Html - introdução e exemplos

3,228 views
3,052 views

Published on

Exempls de tags html. Tabelas, links e formulários

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

  • Be the first to like this

No Downloads
Views
Total views
3,228
On SlideShare
0
From Embeds
0
Number of Embeds
46
Actions
Shares
0
Downloads
65
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html - introdução e exemplos

  1. 1. HTMLHypertext Markup LanguageProf Evandro Manara Milettoevandro.miletto@poa.ifrs.edu.br
  2. 2. SumárioElementos BásicosTabelasFormulários
  3. 3. Elementos Básicos
  4. 4. O que é HTML?O HTML é fruto do "casamento" de dois padrões HyTime e SGMLO HTML (HyperText Markup Language) é a linguagem deMarcação que permite a publicação de informações na rede(www)
  5. 5. HTMLTodo documento HTML apresenta elementos entre parênteses angulares (< e >);Esses elementos são as etiquetas (tags) de HTML;Toda tag possui uma abertura e um fechamentoTodo o documento html possui 1 cabeçalho (não aparece) 1 corpo (conteúdo visível)
  6. 6. Exemplo simples <html> <head> ! <title>Título</title> </head> <body bgcolor=“white”> Corpo do texto, links, imagens, videos (conteúdo) </body> </html>
  7. 7. Comentários e Quebra de LinhaCódigo: Resultado:...<body>Revisão<!-- Comentário--> Revisão de htmlde html</body>...Código:...<body>Revisão <br /> HTML Revisão</body> HTML...
  8. 8. inserindo Linksa=ancora, href=url + texto que aparece<a href=“http://www.google.com.br">google</a>Envio de E-mail Simples: (abre o cliente de e-mail dovisitante)<a href="mailto:pedro@gmail.com">Pedro</a>Outras opções:Determinar o assunto<a href="mailto:pedro@gmail.com?subject=Assunto da msg">pedro@gmail.com</a>Determinar assunto e envio para mais de 1 E-mail<a href="mailto:pedro@gmail.com, jose@gmail.com >pedro@gmail.com,jose@gmail.com</a>Envio com assunto e cópia oculta<a href="mailto:pedro@gmail.com?bcc=jose@gmail.com?subject=Assunto damsg">pedro@gmail.com </a>
  9. 9. ImagensCódigo:<img src=“computer.gif">Resultado:
  10. 10. Formataçao de texto<h1>Título grande</h1><h2>Título menor</h2><p> Parágrafo</p><ul>Início de lista não-ordenada </ul><ol>Início de lista ordenada </ol><li>item de uma lista </li><table>início de uma tabela </table><tr>linha de uma tabela </tr><td>dados de uma tabela (celula) </td><img src=”imagem.jpg” alt=”descrição” height=”20” width=”10”><a href=”http://www.google.com”>link para o google</a><div>delimita uma área / caixa</div>
  11. 11. atenção - marcação obsoleta<b> - Negrito </b><i> - Itálico </i><u> - Sublinhado </u><strike> ou <s> - Frase riscada </strike><sub> - Frase subscrita </sub><sup> - Frase sobrescrita </sup><big> - Texto menor </big><small> - Texto menor </small><p align="center">Revisão de Html</p><p align="left"> Revisão de Html</p><p align="right">Revisão de Html</p> http://www.w3.org/TR/html4/index/attributes.html
  12. 12. atenção<a href=”#”><h2>Eu estou certo!</h2></a><h2><a href=”#”>Não! Eu estou certo!</a></h2> ?
  13. 13. Tabelas
  14. 14. Tabelas (linhas e dados) Código: Resultado: <table border=”1”> <tr> td td <td> tr início e final td de uma célula Agosto trinício e final </td>de uma linha <td> Setembro </td> </tr> <tr> <td> Outubro </td> </tr> </table> tr = table row (1 linha) td = table data (um dado / célula da tabela)
  15. 15. Tabelas (altura e largura de uma célula)Código: Resultado:<table border=1> <tr> <td width="100" height="40"> Agosto </td> <td> Setembro </td> </tr> <tr> <td> Outubro </td> </tr></table>
  16. 16. Tabelas (espaçamento interno e externo de uma célula)Código: Resultado:<table border=1 cellpadding="30" cellspacing="20"> <tr> <td > Agosto </td> <td> Setembro </td> </tr> <tr> <td> Outubro </td> </tr></table>
  17. 17. Tabelas (possibilidades não-recomendadas)Códigos: Resultados:<table border=1> <tr> <td> Agosto </td> <td> Setembro <br /><br /><br /> </td> </tr></table> <table border=1 > <tr> <td valign="top"> Agosto </td> <td> Setembro <br /><br /><br /> </td> </tr> </table>
  18. 18. Tabelas (uso ultrapassado - recomenda-se uso de CSS)Código: Resultado:<table border=1 bgcolor="#ffff00"> <tr bgcolor="#ff0000"> <td bgcolor="#00ffff"> Agosto </td> <td> Setembro </td> </tr></table>
  19. 19. Formulários
  20. 20. Input (entradas: sempre tem um “tipo” e um “nome”)Código:Nome: <input type="text" name="nome" />Ou apenas,Nome: <input name="nome" />Resultado:Nome:
  21. 21. Input (quebrando a linha “br” para posicionar)Código: Login: <input type="text" name="login" /> <br /> Password: <input type="password" name="senha" />Resultado:Login:Password:Código: Login: <br /> <input type="text" name="login" /> <br /> Password: <br /> <input type="password" name="senha" />Resultado:Login:Password:
  22. 22. Input pré-carregando um valor no campo Código: Nome: <input type="text" name="nome" value="Seu nome" /> Resultado: Nome:
  23. 23. Input largura do campo (em caracteres) Código: Endereço: <input type="text" name="ex" size="35" /> Resultado: Endereço:
  24. 24. Input tamanho maximo que exibe (máscara) Código: Dia do mês: <input type="text" name="ex" maxlenght="2" /> Resultado: Dia do mês:
  25. 25. Input (alinhando pela direita) Código: <input type="text" name="data" dir="rtl"> Resultado:
  26. 26. Input (alterando tipos e valores) <input type="submit" /> <input type="submit" value="Envia mensagem" /> <input type="reset" /> <input type="reset" valeu="Apaga tudo!" />
  27. 27. Checkbox permite múltiplas opções Código: <input type= "checkbox" name="esporte" value="futebol" />Futebol <br /> <input type= "checkbox" name="esporte" value="volei" checked />Vôlei Resultado: Futebol Vôlei
  28. 28. Radio permite apenas 1 opção Código: <input type="radio" name="time" value="Internacional" />Inter <br /> <input type="radio" name="time" value="Grêmio" checked />Grêmio Resultado: Inter Grêmio
  29. 29. Select (menu drop down ) Código: <select name="sabor"> <option>Abacaxi</option> <option>Creme</option> <option>Morango</option> <option>Chocolate</option> </select> Resultado:
  30. 30. Select (valor pré-selecionado) Código: <select name="sabor"> <option>Abacaxi</option> <option selected>Creme</option> <option>Morango</option> <option>Chocolate</option> </select> Resultado:
  31. 31. Select (exibe todos os valores - seleciono apenas 1) Código: <select name="sabor" size="4"> <option>Abacaxi</option> <option selected>Creme</option> <option>Morango</option> <option>Chocolate</option> </select> Resultado: Chocolate
  32. 32. Select (seleção de múltiplos valores) Código: <select name="sabor" size="4" multiple> <option>Abacaxi</option> <option selected>Creme</option> <option>Morango</option> <option>Chocolate</option> </select> Resultado: Chocolate
  33. 33. SelectCódigo:<select style="width: 8.216cm;"> <option>Esporte Clube Internacional</option> <option>Grêmio Esportivo Brasil</option></select>Resultado: obs.: o atributo style permite inserção de código CSS
  34. 34. Textarea Código: <textarea cols="40" rows="5" name="comentario"> Comentário </textarea> Resultado:
  35. 35. os dados do Form<html> necessitam de um script para serem processados... <body> necessitam de um método para serem enviados <form action="resposta.php" method="GET"> Nome: <br /> <input type="text" name="nome" /> <br /> <input type="submit" value="Enviar" /> </form> </body></html> O Método pode ser GET (envio aberto via barra de endereços do navegador) ou POST (envio encapsulado nos pacotes do http)
  36. 36. ReferênciasHTML 4.01 Specificationhttp://www.w3.org/TR/1999/REC-html401-19991224/Introdução a Linguagem HTMLhttp://www.icmc.usp.br/ensino/material/html/intro.html

×