Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Introdução
Prática
Exemplo
Desenvolvimento Web
Arquitetura Cliente-Servidor
• Requisição e Resposta
• Destinatário Correto
Identificação de Portas
Resolução de Nomes
• Serviço “Desnecessário”
Páginas Estáticas e Dinâmicas
Páginas Estáticas
• Conteúdo Imutável
• Layout Igual
Páginas Dinâmicas
• Conteúdo Dinâmico e Personalizável
• Layout Dinâmico
• Funcionalidades
Clientes Gordo e Magro
Tecnologias
HTML; Perl;
XHTML; Ruby;
XML; ASP.NET;
CSS; MySQL;
Javascript; SQL Server;
PHP; PostgreSQL;
Java; ...
C;
Padronização
• www.w3schools.com
Validação
• CSS
http://jigsaw.w3.org/css-validator/
• SGML
Objetivo?
• Informar dados de pesquisa!
HTML: Linguagem de Hipertexto
Editor de Texto;
Navegador Web;
Protocolos de Rede.
Ferramentas para auxiliar na construção de
HTML
• Adobe DreamWeaver; • Kate;
• NVU; • Microsoft Frontpage;
• Notepad++; • Namo Web Editor;
• Bloco de Notas; • Microsoft Visual
Studio;
• Bluefish;
• Vim etc.
Porque não vamos usar?
Introdução
Liberdade no Desenvolvimento
Conhecimento Aprofundado
• Gambiarras!! xD
Mas...
• É indicado usar essas ferramentas!
Convenções do HTML
Tags
<tag att=“value”> ... </tag>
tag: Marcação a ser definida
att: Atributo
value: valor do atributo
• É quem realmente manda!
Primeiro HTML
<html>
<head>
<title>Primeiro HTML</title>
</head>
<body>
<h1>Primeiro HTML!</h1>
</body>
</html>
Divisões do HTML
<html>
<head>
Delimitação do HTML
Cabeçalho
<title>Primeiro HTML</title>
</head>
<body>
Corpo
<h1>Primeiro HTML!</h1>
</body>
</html>
Padronização do Primeiro HTML
Indicado!
Por quê?
• Facilidade de Extensão
O que é necessário?
• Definição do Tipo de Arquivo
• XHTML 1.1
Principais Tags
Head
• base • script
• link • meta
• style • title
Head
Título:
<title>Título da Página</title>
meta: informa metadados sobre o arquivo.
• Atributos:
content
http-equiv
name
background
background=“background.jpg”
bgcolor
text
link
alink
vlink
att=“#RRGGBB”
Cabeçalho
Pode Variar de 1 a 6
Indica o tamanho e formatação da fonte
<hn> Cabeçalho Aqui! </hn>
Atributo: align
Center
Left
Right
Justify
Parágrafo
Delimita um parágrafo
Espaço após o parágrafo.
<p> Seu parágrafo Aqui </p>
Quebra de linha
• Quebra forçada
• size
Indica o tamanho da letra
• color
Em RGB: #RRGGBB
Links
• name
Image
Atributos:
• src: fonte
• height
• width
<ol>
<li>Item 1</li>
...
<li>Item n</li>
</ol>
Lista Não-Ordenada
<ul>
<li>Item 1</li>
...
<li>Item n</li>
</ul>
Lista de Definições
<dl>
<dt>Goiaba</dt>
<dd>Fruta tropical de sabor
característico</dd>
...
</dl>
Outras Tags Interessantes
• Página de Produtos
<table>
<tr>
<th>Título01</th><th>Título02</th>
</tr>
<tr>
<td>Célula01</td><td>Célula02</td>
</tr>
</table>
Tabelas
Atributos
• border
• align
• bgcolor
• frame (bordas externas)
• rules (bordas internas)
• summary (índice de conteúdo)
• width
• cellpadding (espaço interno da célula)
• Cellspacing (espaço entre células)
Tabelas
Linhas
• align
• valign
Células
• rowspan: linhas mais largas
• height
• Width
Tabelas
Cabeçalho
<thead> ... </thead>
Corpo
<thead> ... </thead>
Rodapé
<thead> ... </thead>
Form
• Atributo Obrigatório: action
• Atributos Opcionais:
accept-charset
enctype
name
Entrada de Dados
Atributos
• Checked
• Maxlength
• Name
• Readonly
• Size
• Src
• Value
Entrada de Textos
• Multiple
CSS
• Retirando a formatação e aplicando o HTML 4.0!
Javascript
• A programação do lado do cliente