Bacharel em Ciência da Computação (UFG)
Especializando em Gestão de TI
Analista de Sistemas – SIGMA / MDIC
Professor Forma...
• Documento HTML
– <html>:
• Informa ao navegador que este é um documento HTML. A tag <html>
é o elemento externo em docum...
• Cabeçalho do documento
– <head>:
• É o escopo onde definimos todos os elementos de cabeçalho do
documento HTML.
• Os ele...
• Cabeçalho do documento
– <head>:
• Exemplo:
HTML
13/02/2011 4
<html>
<head>
<title>Título do Documento</title>
</head>
<...
• Corpo do documento
– <body>:
• Define o corpo do documento.
• Contém todo o conteúdo de um documento HTML como textos,
h...
• Comentários
– <!-- -->:
• Informa ao navegador que este bloco é um comentários HTML.
HTML
13/02/2011 6
<!--
Este é um co...
• Quebra de linha
– <br>:
• Utilizado para quebra de linha única em documentos HTML.
• É uma tag vazia, não possuindo tag ...
• Cabeçalhos de Texto
– <h1> <h2> <h3> <h4> <h5> <h6>:
• São utilizados para definir cabeçalhos de texto. Utilizados para
...
• Cabeçalhos de Texto
– <h1> <h2> <h3> <h4> <h5> <h6>:
HTML
13/02/2011 9
<html>
<head>
<title>Cabeçalhos HTML</title>
</he...
• 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 inser...
• Hiperlinks ou link
– <a>:
• A tag <a> define uma âncora que pode ser usada de 2 formas:
1. Para criar um link para outro...
• Hiperlink ou link
– <a>:
• Padrão de visualização nos navegadores:
– Link não visitado é sublinhado e azul
– Link visita...
• Hiperlink ou link
– <a>:
HTML
13/02/2011 13
<a name="links">Links</a><br />
<!-- Link simples na mesma janela -->
<a hre...
• Imagem
– <img>:
• A tag <img> incorpora uma imagem em uma página HTML.
• Imagens são linkadas pelo atributo src que prep...
• Listas
– <li>:
• Define uma lista em HTML.
• Pode ser ordenado pela tag <ol>.
• Pode ser ordenado pela tag <ul>.
– Exemp...
• Tabelas
– <table>:
• Define uma tabela no documento HTML, contendo alguns
atributos que formam o cabeçalho, linhas e cél...
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>...
• Formulário
– <form>:
• Os formulários HTML são um mecanismo para submeter dados
para um servidor.
• Um formulário pode c...
• Formulário
– <form>:
• A tag <form> é usado para criar um formulário HTML:
HTML
13/02/2011 19
<form>
...
Elementos de en...
• Formulário
– Elemento <input>:
• É o elemento de entrada mais importante em um formulário.
• O elemento <input> é usado ...
• Formulário
– Text Fields: Campos de Texto
• <input type="text" /> define um campo de entrada de texto:
• Saída:
HTML
13/...
• Formulário
– Password Field: Campo Senha
• <input type="password" /> define um campo de senha:
• Saída:
HTML
13/02/2011 ...
• 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 ...
• Formulário
– Checkbox: Campos Checkbox
• <input type=“checkbox" /> define uma caixa. Caixas de seleção
permitem que um u...
• Formulário
– Submit Button: Botão Submeter
• <input type=“submit” /> Um botão de submit é usado para enviar
dados do for...
• 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...
Upcoming SlideShare
Loading in …5
×

HTML Hardcore Parte 3 - Principais Elementos

2,102 views

Published on

Principais Elementos HTML.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,102
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
29
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML Hardcore Parte 3 - Principais Elementos

  1. 1. 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
  2. 2. • 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>
  3. 3. • 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
  4. 4. • 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>
  5. 5. • 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>
  6. 6. • Comentários – <!-- -->: • Informa ao navegador que este bloco é um comentários HTML. HTML 13/02/2011 6 <!-- Este é um comentário em HTML, quando o interpretador do browser encontra estas Tags ele não interpreta o conteúdo existente. Pode adicionar qualquer informação relevante ao seu projeto. -->
  7. 7. • 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.
  8. 8. • 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
  9. 9. • 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> <h2>Cabeçalhos HTML</h2> <h3>Cabeçalhos HTML</h3> <h4>Cabeçalhos HTML</h4> <h5>Cabeçalhos HTML</h5> <h6>Cabeçalhos HTML</h6> </body> </html> Saída:
  10. 10. • 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>
  11. 11. • 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
  12. 12. • 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
  13. 13. • Hiperlink ou link – <a>: HTML 13/02/2011 13 <a name="links">Links</a><br /> <!-- Link simples na mesma janela --> <a href="http://www.etb.com.br"> Escola Técnica de Brasília </a> <br /> <!-- Abre uma nova janela --> <a href="http://www.georgemendonca.com.br" target="_blank"> TI HardCore </a> Saída:Saída:
  14. 14. • 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:
  15. 15. • 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:
  16. 16. • 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
  17. 17. 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> <td>Linha 2 - Coluna 1</td> <td>Linha 2 - Coluna 2</td> </tr> <tr> <td colspan="2"><b>Rodapé da tabela</b></td> </tr> </table> • Tabela – <table>: Saída:
  18. 18. • 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
  19. 19. • 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>
  20. 20. • 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
  21. 21. • 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>
  22. 22. • 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>
  23. 23. • 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>
  24. 24. • 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>
  25. 25. • 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>
  26. 26. • Formulário – <form>: Reunindo todos os elementos. HTML 13/02/2011 26
  27. 27. • Formulário – Praticando: Para finalizar, vamos elaborar algo como abaixo: HTML 13/02/2011 27
  28. 28. • 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

×