Você está na página 1de 5

1.

Comece a entender o HTML


A linguagem da Web

COMENTRIOS: <!-- ... -->

TAGS:
Ttulos: <h1> ... <h6>
Pargrafo: <p>
<html>
<head>
<title>...</title>
</head>
<body>
...
</body>
</html>

ELEMENTO = Tag de Abertura + Contedo + Tag de


Fechamento

TAGS:
<style type="text/css">
...
</style>

2. V alm com o hipertexto


Conhea o HT do HTML

TAGS:

<a href="....html">...</a> Usa-se .. para subir


para o diretrio pai.

3. Construo de blocos
Construo de pginas Web

TAGs:

<img src=...>
<q>...</q> Pequenas citaes.
<blockquote>...</blockquote> Citaes longas. No
preciso estar dentro de um pargrafo.

ELEMENTOS DE BLOCO: <h1>, <h2>, ..., <h6>, <p> e


<blockquote>.
ELEMENTOS EM LINHA: <q>, <a> e <em>.

TAGs:
<br> Quebra de linha.
<ol> Lista ordenada.
<ul> Lista no ordenada.
<li> Item de uma lista.
<code>
<em>
<address>
<strong>
<pre>
<hr>

4. Conecte-se
Uma viagem Weblndia

TAGs:

<a target=_blank href="....html#ancora"


title=Ttulo id=ancora>...</a> Como acessar uma
ncora e como criar uma.

5. Adicione imagens a suas pginas


Conhea a mdia

TAGs:

<img src=... alt=Descrio curta da imagem


width=largura height=altura>

6. Padres, conformidade e tudo o mais


HTML srio
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
http://validator.w3.org/

TAGs:

<meta http-equiv="Content-Type" content="text/html;


charset=ISO-8859-1">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

7. Mude para o XHTML


Coloque um X no HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/Xhtml1/DTD/xhtml1-strict.dtd">

TAGs:

<html xmlns=http://www.w3.org/1999/xhtml lang=en


xml:lang=en>

8. Conhea as CSS
Adicione um pouco de estilo
Cada declarao em CSS = um local + uma propriedade
nesse local + um estilo a ser aplicado quela propriedade.

Regra:
p { background-color: red; }

TAGs:

<link type="text/css" rel="stylesheet"


href="....css" />

/* Comentrio em CSS */

elemento.classe (ou .classe para todos os membros da


classe)
{
...
}
Obs.: Adicionar o atributo class ao elemento.
http://jigsaw.w3.org/css-validator/

9. Aplique estilo com fontes e cores

Expanda seu vocabulrio

Propriedades relacionadas a fontes:


font-familly:
font-size:
font-style:
color:
font-weight:
text-decoration:
border-bottom:

10. O modelo de caixa


Seja ntimo dos elementos

Modelo de caixa: Contedo Enchimento Borda


Margem

11. Divs e spans


Construo avanada na Web

Selecionando descendentes:
pai filho { ... }

TAGs:
<div> ... </div> Para elementos em bloco.
<span> ... </span> Para elementos em linha.

Pseudo-classe:
elemento:estado { ... }

12. Layout e posicionamento


Arrume os elementos

O layout flutuante:

float + clear

O layout gelatina:
<div> em todo o contedo + margens em auto.

O layout absoluto:
Posicionamento absoluto.

13. Tabelas e mais listas


Torne-se tabular

TAGs:
<table>
<tr> Linha
<th> ... </th> Clula de ttulo
</tr>
<tr>
<td> ... </td> Clula normal
</tr>
</table>

14. Formulrio XHTML


Torne-se Interativo

TAGs:
<form action=... method=...>
...
</form>
<input type=text name=... />
<input type=submit />
<input type=radio name=... value=... />
<input type=checkbox name=... value=... />
<textarea name=... rows=... cols=...></textarea>
<select name=...>
<option value=...></option>
</select>