Iniciação em HTML

1.158 visualizações

Publicada em

Aprenda algumas TAGs básicas de HTML e suas funções.

0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.158
No SlideShare
0
A partir de incorporações
0
Número de incorporações
333
Ações
Compartilhamentos
0
Downloads
13
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Iniciação em HTML

  1. 1. Iniciação em HTML Gustavo Teodoro
  2. 2. Preparação É importante que os arquivos do site estejam em uma pasta única, isso facilita ao publicar o seu site. Outra regra básica também é sempre salvar a página inicial do seu site como index. html pois assim o navegador reconhece como homepage e ao digitar o endereço do seu site (www.meusite.com) ele abre a index.html por padrão. Lembre-se de salvar sempre .html
  3. 3. Algumas TAGs de HTML <!DOCTYPE html> <html> <body> <h1>Meu primeiro título</h1> <p>Meu primeiro parágrafo.</p> </body> </html>
  4. 4. Títulos <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>
  5. 5. Parágrafos <p>Este é um parágrafo.</p> <p>Este é outro parágrafo.</p>
  6. 6. Links <a href="http://www.fb.com">Isto é um link</a>
  7. 7. Imagens <img src="w3schools.jpg" width="104" height="142">
  8. 8. Atributos e referências Atributos Descrição class Especificar uma ou mais classes para um elemento (refira a classe na folha de estilo) id Especificar um único ID para um elemento.
  9. 9. Linhas <p>Este é um parágrafo.</p> <hr> <p>Este é um parágrafo.</p> <hr> <p>Este é um parágrafo.</p>
  10. 10. Comentários <!-- Este é um comentário -->
  11. 11. Quebra de linhas <p>Este é<br>um pará<br>grafo com quebra de linhas</p>
  12. 12. Tag Descrição <b> Define texto em negrito <em> Define um texto com ênfase <i> Define um texto em itálico <small> Define um texto em pequeno <strong> Define um texto importante <sub> Define um texto subscrito <sup> Define um texto superescrito <ins> Define um texto sublinhado <del> Define um texto deletado (riscado) <mark> Define um texto marcado FORMATAÇÃO DE TEXTO
  13. 13. Tag Descrição <head> Define informação sobre o documento <title> Define um título de documento <link> Define a relação com um documento externo <meta> Define metadata sobre um documento HTML <script> Define um script <style> Define informações de estilo em um documento HEAD tags
  14. 14. Tipos de estilo - Direto no código <!DOCTYPE html> <html> <body> <h1 style="text-align:center;">Título alinhado ao centro</h1> <p>Este é um parágrafo.</p> </body> </html>
  15. 15. Tipos de estilo - CSS interna <head> <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style> </head>
  16. 16. Tipos de estilo - CSS externa (recomendado) <head> <link rel="stylesheet" type="text/css" href="meuestilo. css"> </head>
  17. 17. Tabela <table border="1"> <tr> <td>linha 1, coluna 1</td> <td>linha 1, coluna 2</td> </tr> <tr> <td>linha 2, coluna 1</td> <td>linha 2, coluna 2</td> </tr> </table>
  18. 18. TABELAS Tag Description <table> Define uma tabela <th> Define o cabeçalho de uma coluna (célula) na tabela <tr> Define uma linha na tabela <td> Define uma coluna na tabela (célula) <caption > Define uma legenda para a tabela
  19. 19. Lista não ordenada <ul> <li>Café</li> <li>Leite</li> </ul>
  20. 20. Lista ordenada <ol> <li>Café</li> <li>Leite</li> </ol>
  21. 21. Lista descritiva <dl> <dt>Café</dt> <dd>- bebida quente preta.</dd> <dt>Leite</dt> <dd>- bebida gelada branca</dd> </dl>
  22. 22. LISTA S Tag Descrição <ol> Define uma lista ordenada <ul> Define uma lista não ordenada <li> Define um item de lista <dl> Defina uma lista de descrição <dt> Define um termo ou o nome em uma lista de descrição <dd> Define a descrição do termo ou do nome
  23. 23. Blocos <DIV> <SPAN>
  24. 24. DIV <!DOCTYPE html> <html> <body> <div id="container" style="width:500px"> <div id="header" style="background-color:#FFA500;"> <h1 style="margin-bottom:0;">Main Title of Web Page</h1></div> <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"> <b>Menu</b><br> HTML<br> CSS<br> JavaScript</div> <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;"> Content goes here</div> <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> Copyright © W3Schools.com</div> </div> </body> </html>
  25. 25. Cores Cores Cor HEX Cor RGB #000000 rgb(0,0,0) #FF0000 rgb(255,0,0) #00FF00 rgb(0,255,0) #0000FF rgb(0,0,255) #FFFF00 rgb(255,255,0) #00FFFF rgb(0,255,255) #FF00FF rgb(255,0,255) #C0C0C0 rgb(192,192,192) #FFFFFF rgb(255,255,255)
  26. 26. É isso, até a próxima! Gustavo Teodoro gustavoalvesteodoro@gmail.com

×