HTML Hardcore Parte 3 - Principais Elementos

Bacharel em Ciência da Computação (UFG)
Especializando em Gestão de TI
Analista de Sistemas – SIGMA / MDIC
Professor Formador EAD – NEAD/ETEB
george@georgemendonca.com.br
http://www.georgemendonca.com.br
HTML
Principais elementos

• Documento HTML
– <html>:
• Informa ao navegador que este é um documento HTML. A tag <html>
é o elemento externo em documentos HTML e XHTML.
• O elemento <html> é também conhecido como o elemento raiz.
• Exemplo:
HTML
13/02/2011 2
<html>
... Elementos internos ...
</html>

• Cabeçalho do documento
– <head>:
• É o escopo onde definimos todos os elementos de cabeçalho do
documento HTML.
• Os elementos dentro do cabeçalho podem incluir scripts, referência a
folhas de estilo externas e internas, informações de meta dados, etc.
• As seguintes tags podem ser adicionadas no cabeçalho:
– <base>, <link>, <meta>, <script>, <style> e <title>.
– <title> é o único elemento obrigatório.
HTML
13/02/2011 3

• Cabeçalho do documento
– <head>:
• Exemplo:
HTML
13/02/2011 4
<html>
<head>
<title>Título do Documento</title>
</head>
<body>
Conteúdo...
</body>
</html>

• Corpo do documento
– <body>:
• Define o corpo do documento.
• Contém todo o conteúdo de um documento HTML como textos,
hiperlinks, imagens, tabelas, listas, formulários, etc. Exemplo:
HTML
13/02/2011 5
<html>
<head>
<title>Título</title>
</head>
<body>
Conteúdo da página: Elementos de textos, links,
imagens, scripts, etc.
</body>
</html>

• Comentários
– :
• Informa ao navegador que este bloco é um comentários HTML.
HTML
13/02/2011 6

• Quebra de linha
– <br>:
• Utilizado para quebra de linha única em documentos HTML.
• É uma tag vazia, não possuindo tag de fechamento.
• A recomendação para auto-fechamento é <br />.
• Exemplo:
HTML
13/02/2011 7
Utilizando a tag <br /> para quebra de linha.

• Cabeçalhos de Texto
– <h1> <h2> <h3> <h4> <h5> <h6>:
• São utilizados para definir cabeçalhos de texto. Utilizados para
definir títulos, tópicos, etc.
• O cabeçalho maior é <h1> e o menor é o cabeçalho <h6>.
HTML
13/02/2011 8

• Cabeçalhos de Texto
– <h1> <h2> <h3> <h4> <h5> <h6>:
HTML
13/02/2011 9
<html>
<head>
<title>Cabeçalhos HTML</title>
</head>
<body>
<h1>Cabeçalhos HTML</h1>
</body>
</html>
Saída:

• Parágrafo
– <p>:
• Define um parágrafo de um texto.
• Para iniciar um parágrafo basta abrí-lo com a tag <p> e após inserir
o texto, fechá-lo com a tag </p>.
• Ele define um espaçamento antes e depois do bloco de texto:
HTML
13/02/2011 10
<p> Este é um exemplo de um bloco de texto em um
parágrafo. </p>

• Hiperlinks ou link
– <a>:
• A tag <a> define uma âncora que pode ser usada de 2 formas:
1. Para criar um link para outro documento com o atributo href
2. Para criar um marcador em um documento com o atributo name
• O atributo href é mais importante e mais utilizado, pois define o destin
do link.
HTML
13/02/2011 11

• Hiperlink ou link
– <a>:
• Padrão de visualização nos navegadores:
– Link não visitado é sublinhado e azul
– Link visitado é sublinhado e roxo
– Link ativo é sublinhado e vermelho
HTML
13/02/2011 12

• Hiperlink ou link
– <a>:
HTML
13/02/2011 13
<a name="links">Links</a><br />

<a href="http://www.etb.com.br">
Escola Técnica de Brasília
</a>
<br />

<a href="http://www.georgemendonca.com.br" target="_blank">
TI HardCore
</a>
Saída:Saída:

• Imagem
– <img>:
• A tag <img> incorpora uma imagem em uma página HTML.
• Imagens são linkadas pelo atributo src que prepara o espaço
necessário.
• Possui 2 atributos obrigatórios: src e alt.
HTML
13/02/2011 14
<img alt="XHTML" src="xhtml.png" />
Saída:

• Listas
– <li>:
• Define uma lista em HTML.
• Pode ser ordenado pela tag <ol>.
• Pode ser ordenado pela tag <ul>.
– Exemplo:
HTML
13/02/2011 15
<ol>
<li>Acessibilidade</li>
<li>Navegabilidade</li>
<li>Interoperabilidade</li>
</ol>
<ul>
<li>Acessibilidade</li>
<li>Navegabilidade</li>
<li>Interoperabilidade</li>
</ul>
Saída:

• Tabelas
– <table>:
• Define uma tabela no documento HTML, contendo alguns
atributos que formam o cabeçalho, linhas e células da tabela.
– Atributos pertencentes:
• <tr> - define uma linha em uma tabela
• <th> - define uma célula de cabeçalho em uma tabela
• <td> - define uma célula simples de uma tabela
• <thead> - para agrupar conteúdos de cabeçalho
• <tbody> - para agrupar conteúdos do corpo da tabela
• <tfoot> - para agrupar conteúdos do rodapé
HTML
13/02/2011 16

HTML
13/02/2011 17
<table border="1">
<tr>
<th colspan="2">Cabeçalho da Tabela</th>
</tr>
<tr>
<td>Linha 1 - Coluna 1</td>
<td>Linha 1 - Ccoluna 2</td>
</tr>
<tr>
</tr>
<tr>
<td colspan="2"><b>Rodapé da tabela</b></td>
</tr>
</table>
• Tabela
– <table>:
Saída:

• Formulário
– <form>:
• Os formulários HTML são um mecanismo para submeter dados
para um servidor.
• Um formulário pode conter elementos de entrada, como campos
de texto, caixas de checagem, botões de opção um entre vários,
apresentar botões e muito mais.
• O formulário também pode conter menus de seleção, área de
texto, agrupador de campos, legendas, elementos do rótulo, etc.
HTML
13/02/2011 18

• Formulário
– <form>:
• A tag <form> é usado para criar um formulário HTML:
HTML
13/02/2011 19
<form>
...
Elementos de entrada de dados através
da tag <input>, <select>, <textarea>
entre outras tags complementares.
...
</form>

• Formulário
– Elemento <input>:
• É o elemento de entrada mais importante em um formulário.
• O elemento <input> é usado para selecionar as informações do
usuário.
• Varia bastante dependendo do atributo type, que pode ser:
– text field, checkbox, password, radio button, submit button, etc.
• Os tipos de entrada de dados mais utilizados são descritos a seguir:
HTML
13/02/2011 20

• Formulário
– Text Fields: Campos de Texto
• <input type="text" /> define um campo de entrada de texto:
• Saída:
HTML
13/02/2011 21
<form>
Nome:<br />
<input type="text" name="nome" /><br />
Sobrenome: <br />
<input type="text" name="sobrenome" />
</form>

• Formulário
– Password Field: Campo Senha
• <input type="password" /> define um campo de senha:
• Saída:
HTML
13/02/2011 22
<form>
Senha: <input type="password" name="senha" />
</form>

• Formulário
– Radio Buttons: Botões Rádio
• <input type=“radio" /> define um botão de rádio. Os botões de
rádio permitem que o usuário selecione uma entre várias opções:
• Saída:
HTML
13/02/2011 23
<form>
<input type="radio" name="sexo" value="masculino" /> Masculino<br />
<input type="radio" name="sexo" value="feminino" /> Feminino
</form>

• Formulário
– Checkbox: Campos Checkbox
• <input type=“checkbox" /> define uma caixa. Caixas de seleção
permitem que um usuário selecione uma ou mais opções de um
número limitado de escolhas:
• Saída:
HTML
13/02/2011 24
<form>
<input type="checkbox" name="ver" value="Bike" /> Visualizar<br />
<input type="checkbox" name="edit" value="Car" /> Editar
</form>

• Formulário
– Submit Button: Botão Submeter
• <input type=“submit” /> Um botão de submit é usado para enviar
dados do formulário para um servidor. Os dados são enviados para a
página especificada no atributo action. O arquivo definido no
atributo action os processamentos nessecários com os dados:
• Saída:
HTML
13/02/2011 25
<form name="input" action="url.php" method="get">
Login: <input type="text" name="usuario" />
<input type="submit" value=" Enviar " />
</form>

• Formulário
– <form>: Reunindo todos os elementos.
HTML
13/02/2011 26

• Formulário
– Praticando: Para finalizar, vamos elaborar algo como
abaixo:
HTML
13/02/2011 27

• Referência bibliográfica e leituras
complementares recomendadas
• Tutorial HTML – USP
• HTML Cod Tutorial
• HTML Goodies
• HTML Dog
• Página oficial do HTML na W3C
• Especificação do HTML 4.01
• Especificação do HTML 4.01 em português
• https://developer.mozilla.org/pt/HTML
13/02/2011 28
HTML

HTML Hardcore Parte 3 - Principais Elementos

Recomendados

Recomendados

Mais conteúdo relacionado

Mais de George Mendonça

Mais de George Mendonça (20)

Último

Último (20)

HTML Hardcore Parte 3 - Principais Elementos