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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Iniciação em HTML

Ähnlich wie Iniciação em HTML (20)

Mehr von Gustavo Teodoro

Mehr von Gustavo Teodoro (7)

Iniciação em HTML