Download - Iniciação em HTML
![Page 1: Iniciação em HTML](https://reader033.vdocuments.com.br/reader033/viewer/2022052117/5a6ecefd7f8b9a40118b4eb7/html5/thumbnails/1.jpg)
Iniciação em HTMLGustavo Teodoro
![Page 2: Iniciação em HTML](https://reader033.vdocuments.com.br/reader033/viewer/2022052117/5a6ecefd7f8b9a40118b4eb7/html5/thumbnails/2.jpg)
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
![Page 3: Iniciação em HTML](https://reader033.vdocuments.com.br/reader033/viewer/2022052117/5a6ecefd7f8b9a40118b4eb7/html5/thumbnails/3.jpg)
Algumas TAGs de HTML
<!DOCTYPE html><html><body>
<h1>Meu primeiro título</h1>
<p>Meu primeiro parágrafo.</p>
</body></html>
![Page 4: Iniciação em HTML](https://reader033.vdocuments.com.br/reader033/viewer/2022052117/5a6ecefd7f8b9a40118b4eb7/html5/thumbnails/4.jpg)
Títulos
<h1>This is a heading</h1><h2>This is a heading</h2><h3>This is a heading</h3>
![Page 5: Iniciação em HTML](https://reader033.vdocuments.com.br/reader033/viewer/2022052117/5a6ecefd7f8b9a40118b4eb7/html5/thumbnails/5.jpg)
Parágrafos
<p>Este é um parágrafo.</p><p>Este é outro parágrafo.</p>
![Page 6: Iniciação em HTML](https://reader033.vdocuments.com.br/reader033/viewer/2022052117/5a6ecefd7f8b9a40118b4eb7/html5/thumbnails/6.jpg)
Links
<a href="http://www.fb.com">Isto é um link</a>
![Page 7: Iniciação em HTML](https://reader033.vdocuments.com.br/reader033/viewer/2022052117/5a6ecefd7f8b9a40118b4eb7/html5/thumbnails/7.jpg)
Imagens
<img src="w3schools.jpg" width="104" height="142">
![Page 8: Iniciação em HTML](https://reader033.vdocuments.com.br/reader033/viewer/2022052117/5a6ecefd7f8b9a40118b4eb7/html5/thumbnails/8.jpg)
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.
![Page 9: Iniciação em HTML](https://reader033.vdocuments.com.br/reader033/viewer/2022052117/5a6ecefd7f8b9a40118b4eb7/html5/thumbnails/9.jpg)
Linhas
<p>Este é um parágrafo.</p><hr><p>Este é um parágrafo.</p><hr><p>Este é um parágrafo.</p>
![Page 10: Iniciação em HTML](https://reader033.vdocuments.com.br/reader033/viewer/2022052117/5a6ecefd7f8b9a40118b4eb7/html5/thumbnails/10.jpg)
Comentários
<!-- Este é um comentário -->
![Page 11: Iniciação em HTML](https://reader033.vdocuments.com.br/reader033/viewer/2022052117/5a6ecefd7f8b9a40118b4eb7/html5/thumbnails/11.jpg)
Quebra de linhas
<p>Este é<br>um pará<br>grafo com quebra de linhas</p>
![Page 12: Iniciação em HTML](https://reader033.vdocuments.com.br/reader033/viewer/2022052117/5a6ecefd7f8b9a40118b4eb7/html5/thumbnails/12.jpg)
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
![Page 13: Iniciação em HTML](https://reader033.vdocuments.com.br/reader033/viewer/2022052117/5a6ecefd7f8b9a40118b4eb7/html5/thumbnails/13.jpg)
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
![Page 14: Iniciação em HTML](https://reader033.vdocuments.com.br/reader033/viewer/2022052117/5a6ecefd7f8b9a40118b4eb7/html5/thumbnails/14.jpg)
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>
![Page 15: Iniciação em HTML](https://reader033.vdocuments.com.br/reader033/viewer/2022052117/5a6ecefd7f8b9a40118b4eb7/html5/thumbnails/15.jpg)
Tipos de estilo - CSS interna
<head><style type="text/css">body {background-color:yellow;}p {color:blue;}</style></head>
![Page 16: Iniciação em HTML](https://reader033.vdocuments.com.br/reader033/viewer/2022052117/5a6ecefd7f8b9a40118b4eb7/html5/thumbnails/16.jpg)
Tipos de estilo - CSS externa (recomendado)
<head><link rel="stylesheet" type="text/css" href="meuestilo.css"></head>
![Page 17: Iniciação em HTML](https://reader033.vdocuments.com.br/reader033/viewer/2022052117/5a6ecefd7f8b9a40118b4eb7/html5/thumbnails/17.jpg)
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>
![Page 18: Iniciação em HTML](https://reader033.vdocuments.com.br/reader033/viewer/2022052117/5a6ecefd7f8b9a40118b4eb7/html5/thumbnails/18.jpg)
TABELASTag 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
![Page 19: Iniciação em HTML](https://reader033.vdocuments.com.br/reader033/viewer/2022052117/5a6ecefd7f8b9a40118b4eb7/html5/thumbnails/19.jpg)
Lista não ordenada
<ul><li>Café</li><li>Leite</li></ul>
![Page 20: Iniciação em HTML](https://reader033.vdocuments.com.br/reader033/viewer/2022052117/5a6ecefd7f8b9a40118b4eb7/html5/thumbnails/20.jpg)
Lista ordenada
<ol><li>Café</li><li>Leite</li></ol>
![Page 21: Iniciação em HTML](https://reader033.vdocuments.com.br/reader033/viewer/2022052117/5a6ecefd7f8b9a40118b4eb7/html5/thumbnails/21.jpg)
Lista descritiva
<dl><dt>Café</dt><dd>- bebida quente preta.</dd><dt>Leite</dt><dd>- bebida gelada branca</dd></dl>
![Page 22: Iniciação em HTML](https://reader033.vdocuments.com.br/reader033/viewer/2022052117/5a6ecefd7f8b9a40118b4eb7/html5/thumbnails/22.jpg)
LISTAS
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
![Page 23: Iniciação em HTML](https://reader033.vdocuments.com.br/reader033/viewer/2022052117/5a6ecefd7f8b9a40118b4eb7/html5/thumbnails/23.jpg)
Blocos
<DIV><SPAN>
![Page 24: Iniciação em HTML](https://reader033.vdocuments.com.br/reader033/viewer/2022052117/5a6ecefd7f8b9a40118b4eb7/html5/thumbnails/24.jpg)
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>
![Page 25: Iniciação em HTML](https://reader033.vdocuments.com.br/reader033/viewer/2022052117/5a6ecefd7f8b9a40118b4eb7/html5/thumbnails/25.jpg)
CoresCores 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)