Iniciação em
HTML
Gustavo Teodoro
Preparação
É importante que os arquivos do site estejam
em uma pasta única, isso facilita ao publicar o
seu site. Outra re...
Algumas TAGs de HTML
<!DOCTYPE html>
<html>
<body>
<h1>Meu primeiro título</h1>
<p>Meu primeiro parágrafo.</p>
</body>
</h...
Títulos
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
Parágrafos
<p>Este é um parágrafo.</p>
<p>Este é outro parágrafo.</p>
Links
<a href="http://www.fb.com">Isto é um link</a>
Imagens
<img src="w3schools.jpg" width="104" height="142">
Atributos e referências
Atributos Descrição
class Especificar uma ou mais classes para um elemento (refira a
classe na fol...
Linhas
<p>Este é um parágrafo.</p>
<hr>
<p>Este é um parágrafo.</p>
<hr>
<p>Este é um parágrafo.</p>
Comentários
<!-- Este é um comentário -->
Quebra de linhas
<p>Este é<br>um pará<br>grafo com quebra de
linhas</p>
Tag Descrição
<b> Define texto em negrito
<em> Define um texto com ênfase
<i> Define um texto em itálico
<small> Define um...
Tag Descrição
<head> Define informação sobre o documento
<title> Define um título de documento
<link> Define a relação com...
Tipos de estilo - Direto no código
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Título alinhado ao
centro<...
Tipos de estilo - CSS interna
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</he...
Tipos de estilo - CSS externa
(recomendado)
<head>
<link rel="stylesheet" type="text/css" href="meuestilo.
css">
</head>
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>...
TABELAS
Tag Description
<table> Define uma tabela
<th> Define o cabeçalho de uma coluna (célula) na tabela
<tr> Define uma...
Lista não ordenada
<ul>
<li>Café</li>
<li>Leite</li>
</ul>
Lista ordenada
<ol>
<li>Café</li>
<li>Leite</li>
</ol>
Lista descritiva
<dl>
<dt>Café</dt>
<dd>- bebida quente preta.</dd>
<dt>Leite</dt>
<dd>- bebida gelada branca</dd>
</dl>
LISTA
S
Tag Descrição
<ol> Define uma lista ordenada
<ul> Define uma lista não ordenada
<li> Define um item de lista
<dl> ...
Blocos
<DIV>
<SPAN>
DIV
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA50...
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(...
É isso, até a
próxima!
Gustavo Teodoro
gustavoalvesteodoro@gmail.com
Próximos SlideShares
Carregando em…5
×

Iniciação em HTML

1.193 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.193
No SlideShare
0
A partir de incorporações
0
Número de incorporações
336
Ações
Compartilhamentos
0
Downloads
14
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

×