Cabeçalhos

Exemplo: Resultado:
<H1> Cabeçalho nível 1 </H1>
<H2> Cabeçalho nível 2 </H2>
<H3> Cabeçalho nível 3 </H3>
<H4> Cabeçalho nível 4 </H4>
<H5> Cabeçalho nível 5 </H5>
<H6> Cabeçalho nível 6 </H6>

 

Cabeçalho nível 1

Cabeçalho nível 2

Cabeçalho nível 3

Cabeçalho nível 4

Cabeçalho nível 5
Cabeçalho nível 6

 

 

Parágrafos

O alinhamento pode ser:

Exemplo:
<p>Este parágrafo utiliza o alinhamento padrão dos navegadores de Internet (esquerdo).
<p align="center">Este parágrafo utiliza o alinhamento centralizado
<p align="right">Este parágrado utiliza o alinhamento à direita.
Resultado:
Este parágrafo utiliza o alinhamento padrão dos navegadores de Internet (esquerdo).

Este parágrafo utiliza o alinhamento centralizado

Este parágrado utiliza o alinhamento à direita.

 

 

Quebra de Linha

Exemplo:
MODELO I
<html>
<body>
<h1>Utilizando a tag p </h1>
Vamos separar esta linha com a marcação de paragráfo.<p>
Para verificar a diferença.

MODELO II
<h1>Utilizando a tag br</h1>
Diferença quando separamos duas linhas utilizando<br>
a marcação de quebra de linha<br>
Diferença quando separamos duas linhas utilizando<br>
a marcação de quebra de linha <br>
Verificou a diferença?
</body>
</html>
Resultado:
MODELO I

Utilizando a tag p

Vamos separar esta linha com a marcação de paragráfo.

Para verificar a diferença. MODELO II

Utilizando a tag br

Diferença quando separamos duas linhas utilizando
a marcação de quebra de linha
Diferença quando separamos duas linhas utilizando
a marcação de quebra de linha
Verificou a diferença?

 


Listas

LISTAS NÃO NUMERADAS
<html>
<head>
<title> Listas não numeradas </title>
</head>
<body>
<h1> Listas não numeradas</h1>
<ul type="disc">
<li> Type = "disc"
<li> Item 1
<li> Item 2
<li> Item 3
</ul>
<ul type="square">
<li> type="square"
<li> Item 1
<li> Item 2
<li> Item 3
</ul>
<ul type="circle">
<li> type = "circle"
<li> Item 1
<li> Item 2
<li> Item 3
</ul>
</body>
</html>
LISTAS NUMERADAS
<head>
<title> Listas numerada </title>
</head>
<body>
<h1> Listas numeradas</h1>
<h3>Lista numerada padrão</h3>
<ol>
<li> Item 1
<li> Item 2
<li> Item 3
</ol>
<h3>Lista numerada padrão com START="10"</h3>
<ol start="10">
<li> Item 1
<li> Item 2
<li> Item 3
</ol>
<h3>Lista alfabética com letras maiúsculas</h3>
<ol type="A">
<li> Item 1
<li> Item 2
<li> Item 3
</ol>
</body>
</html>


Faixas Animadas

BANNER SCROLL (faixa rotativa)
<MARQUEE BEHAVIOR=SCROLL WIDTH=100%>TEXTO EM SCROOL 100% </MARQUEE>
<MARQUEE BEHAVIOR=SCROOL WIDTH=50%>TEXTO EM SCROOL 50% </MARQUEE>
BANNER SLIDE (faixa quadro)
<MARQUEE BEHAVIOR=SLIDE WIDTH=100%>TEXTO EM SLIDE 100% </MARQUEE>
<MARQUEE BEHAVIOR=SLIDE WIDTH=50%>TEXTO EM SLIDE 50% </MARQUEE>
 

Linha Horizontal

<HR WIDTH=50%>
<HR WIDTH=100%>
<HR WIDTH=50% align="left">
<HR WIDTH=50% align="right">
<HR WIDTH=100% ALIGN=RIGHT COLOR="#CC0000">

 

Fontes

EXEMPLO RESULTADO
<Font size=-2>texto -2</font><br>
<Font size=-1>texto -1</font><br>
<Font size=+1>texto +1</font><br>
<font face="Arial" size=+2 color="#FF0000"><b><u><i>texto +2</i></u></b></font><br>
<Font size=+3>texto +3</font><br>
<Font size=+4>texto +4</font><br>		   texto -2
texto -1
texto +1
texto +2
texto +3
texto +4


 

 

Tabela

4 tags básicas são usadas para inserir tabelas:

Existe uma grande quantidade de atributos para tabelas.

 A seguir mais dois:

  • align: define o alinhamento horizontal do conteúdo da tabela, de uma linha ou de uma célula. Por exemplo, left, center ou right (à esquerda, no centro ou à direita).

  • valign: define o alinhamento vertical do conteúdo de uma célula. Por exemplo, top, middle ou bottom (em cima, no meio ou em baixo).

  • Exemplo: <td align="right" valign="top">Célula 1</td>

 

 

Exemplo Resultado
<table border="1" cellspacing="0">
  <tr>
    <td>Célula 1</td>
    <td>Célula 2</td>
  </tr>
  <tr>
    <td>Célula 3</td>
    <td>Célula 4</td>
  </tr>
</table>
 		  
Célula 1 Célula 2
Célula 3

Célula 4
<TABLE BORDER=2>
<TH> Coluna 1</TH><TH> Coluna 2 </TH>
<TR><TD> linha1, 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>
 		  
Coluna 1 Coluna 2
linha1, coluna 1 linha 1, coluna 2
linha 2, coluna 1linha 2, coluna 2

 

<table border=2>
<th bgcolor="red">Coluna 1</th>
<th bgcolor="green">Coluna 2</th>
<tr>
<td bgcolor="yellow">linha1, coluna 1</td>
<td><font color="red"> linha 1, coluna 2</td>
</tr>
<tr>
<td>linha 2, coluna 1</td>
<td>linha 2, coluna 2</td>
</tr>
</table>
 
Coluna 1 Coluna 2
linha1, coluna 1 linha 1, coluna 2
linha 2, coluna 1 linha 2, coluna 2

<marquee id="scroller" onmouseover="scroller.stop()" onmouseout="scroller.start()" scrollamount="1" scrolldelay="2" direction="down" width="258" height="180" frameborder="0" border="0">

<a href="http://www.indicefloripa.com.br"><img src="tomada.gif" border="0" title="banner aki "></a>
</marquee>
 

<marquee id="scroller2" onmouseover="scroller2.stop()" onmouseout="scroller2.start()" scrollamount="1" scrolldelay="1" direction="up" width="258" height="180" frameborder="0" border="0">

<a href=""><img src="tomada.gif" border="0" title="banner aki "></a>
<a href=""><img src="tomada.gif" border="0" title="banner aki "></a>

</marquee>
seu texto aqui
seu texto aqui
seu texto aqui
 		<marquee id="scroller" direction="up" width="150" scrolldelay="100"style="background-color:#f9f9f9;font-size:8pt;font-family:verdana;color:#1c1c1c;">
seu texto aqui<br>
seu texto aqui<br>
seu texto aqui<br>
</marquee>
 
[08/06/2008] Games
[08/06/2008] Aplicativos
[08/06/2008] Utilitários
 <marquee behavior="scroll" direction="up" height="113" scrollamount="1" scrolldelay="60" onmouseover="this.stop()" onmouseout="this.start()" width="154">
<div align="left">

<font size=1 face="Arial" color="#B8860B">[08/06/2008]</font><font size=2px face="Arial" color=red> Games</font><br>
<font size=1 face="Arial" color="#B8860B">[08/06/2008]</font><font size=2px face="Arial" color=red> Aplicativos</font><br>
<font size=1 face="Arial" color="#B8860B">[08/06/2008]</font><font size=2px face="Arial" color=red> Utilitários</font><br>
</div></marquee>