Iniciação em HTML

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 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

Algumas TAGs de HTML
<!DOCTYPE html>
<html>
<body>
<h1>Meu primeiro título</h1>
<p>Meu primeiro parágrafo.</p>
</body>
</html>

Títulos
<h1>This is a heading</h1>

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 folha de estilo)
id Especificar um único ID para um elemento.

Linhas
<hr>
<hr>

Comentários

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 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

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

Tipos de estilo - Direto no código
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Título alinhado ao
centro</h1>
</body>
</html>

Tipos de estilo - CSS interna
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

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>
</tr>
<tr>
</tr>
</table>

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

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> 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

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>

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)

É isso, até a
próxima!
Gustavo Teodoro
gustavoalvesteodoro@gmail.com

Iniciação em HTML

Mais conteúdo relacionado

Mais procurados (20)

Semelhante a Iniciação em HTML (20)

Mais de Gustavo Teodoro (7)

Iniciação em HTML