Guia HTML™

HTML


Para existir uma página na internet, são necessários basicamente 3 itens:
  1. Um computador que ficará ligado e conectado a internet 24 horas / dia.
  2. algum programa servidor Web (IIS, Apache, etc) instalado neste computador;
  3. arquivos da página (Basicamente 1 arquivo, podendo existir ligações para outros arquivos com imagens, sons, filmes e etc)

HTML significa Hyper Text Markup Language, Linguagem de marcação de hipertextos, tradução nossa. Estas marcações, são os elementos da linguagem, ou seja, as conhecidas TAGs, listaremos algumas adiante.
Utilizando-se esta linguagem, é possivel criar páginas de internet, ou seja, os sites.
HTML como ja dissemos é uma linguagem de marcação, nao uma linguagem de programação.
Normalmente existe para cada elemento (TAG) inicial, um final correspondente.

Estrutura basica arquivo HTML

<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>


Descricao Tags

<html> - Tag inicial de todo documento HTML.
<head> - Tag que contem as Meta Tags, o titulo da pagina <title>, as tag de estilo, de layout, codigos HTML e outros.
<title> - Tag inicial referente ao texto (Titulo) que fica na barra superior da Janela do Browser.
</title> - Fecha a tag <title>.
</head> - Fecha a tag <head>.
<body> - Tag inicial que delimita o inicio documento com o codigo HTML.
</body> - Fecha a tag <body>.
</html> - Fecha a tag <html>.



Tags HTML

Nome
Tag
Codigo HTML
Resultado
Alterando a fonte <font> <font face="arial">Fonte Arial</font> Fonte Arial
Alterando a cor
e o tamanho
<font> <font face="Times New Roman" size="+3" color="#ff0000">Exemplo</font> Exemplo
Ancora (link) <a href> <a href="http://www.ogomes.com/">Visite nosso site</a> Visite nosso site
<a href>
Sem frames
<a href="http://www.ogomes.com/" target="_top">>Livrando-se dos frames</a> Livrando-se dos frames
<a href>
Nova janela
<a href="http://www.ogomes.com/" target="_blank">>Abrindo em nova janela</a> Abrindo em nova janela
<a href>
<a name>
<a name="texto">Posicao do texto</a> <= Codigo destino
<a href="#texto">Va para a posicao do texto</a> <= Codigo origem
Va para a posicao do texto riscado
Removendo o sublinhado
de um link
<a href="http://www.ogomes.com/" style="text-decoration: none">>Sou um link sem sublinhado</a> Sou um link sem sublinhado
<a href>
title
<a href="http://www.ogomes.com/" title="Cursos, guias, dominios, hospedagens e etc">Exemplo de TITLE - passe o mouse</a> Exemplo de TITLE - passe o mouse
Cabecalho <h1> <h2>
<h3> <h4>
<h5> <h6>
<h1>Cabecalho</h1>
<h2>Cabecalho</h2>
<h3>Cabecalho</h3>
<h4>Cabecalho</h4>
<h5>Cabecalho</h5>
<h6>Cabecalho</h6>

Cabecalho <h1>

Cabecalho <h2>

Cabecalho <h3>

Cabecalho <h4>

Cabecalho <h5>
Cabecalho <h6>
Centralizar <center> <center>Texto ficara centrado</center>
Texto ficara centrado
Citacao <blockquote> A seguir um exemplo de citacao
<blockquote>
Este texto esta inserido entre as tags que o transforma em citacao.
</blockquote>
O trecho tem a margem esquerda um pouco maior e ele tambem espaco um pouco maior antes e depois dele.
A seguir um exemplo de citacao
Este texto esta inserido entre as tags que o transforma em citacao.
O trecho tem a margem esquerda um pouco maior e ele tambem espaco um pouco maior antes e depois dele.
Comentario <!-- --> <!--Este codigo so pode ser visto no fonte HTML--> Nada sera mostrado na pagina
Corpo de um documento <body> <body>Aqui fica o conteudo da sua pagina</body> Aqui fica o conteudo da sua pagina
Formulario <form> <form action="processa.php" method=post>
Nome.......: <input name="Nome" value="" size="10">
Telefone..: <input name="Fone" value="" size="10">
Senha.....: <input name="Senha" type=password size="10">
<input type="submit" value="Enviar">
</form>
Nome......:
Telefone..:
Senha.....:
O nome e o telefone sao limitados em 10 caracteres
<form action="processa.php" method=post>
Nome.......: <input name="Nome" value="" size="10" maxlength="10">
Telefone..: <input name="Fone" value="" size="10" maxlength="10">
<input type="submit" value="Enviar">
</form>
Nome......:
Telefone..:
<form action="processa.php" method=post>
Nome.......: <input name="Nome" value="" size="10" style="color: #000000; font-family: Verdana; font-weight: bold; font-size: 10px; background-color: #ffff00;">
Telefone..: <input name="Fone" value="" size="10" style="color: #000000; font-family: Verdana; font-weight: bold; font-size: 10px; background-color: #ffff00;>
<input type="submit" value="Enviar" style="background-color: #00aa00; font: 12px verdana, arial, helvetica, sans-serif; color:#ffffff; border-style:solid; border-color: #00ff00 #00ff00 #005500 #005500;">
</form>
Nome......:
Telefone..:
<form action="processa.php" method=post>
<table border="0" cellspacing="0" cellpadding="2">
<tr>
<td bgcolor="#ff00ff">
<input name="Nome" value="" size="10">
</td>
<td bgcolor="#ff00ff" valign="Middle">
<input type="image" Value="Enviar" src="botao.gif">
</td>
</tr>
</table>
</form>
<form action="processa.php" method=post>
Entre com seu texto:<br>
<textarea wrap="virtual" name="texto" rows=4 cols=20 maxlength=100></textarea><br>
<input type="submit" value="Enviar">
<input type="Reset" value="Apagar">
</form>
Entre com seu texto:

<form action="processa.php" method=post>
Selecione uma opcao:
<select name="selecao">
<option>opcao 1</option>
<option selected>opcao 2</option>
<option>opcao 3</option>
<option>opcao 4</option>
<input type="submit" value="Enviar">
</select>
</form>
Selecione uma opcao:
<form action="processa.php" method=post>
Selecione uma opcao:
<select name="selecao" style="color: #000000; font-family: Verdana; font-weight: bold; font-size: 10px; background-color: #ffff00;">
<option>opcao 1</option>
<option selected>opcao 2</option>
<option>opcao 3</option>
<option>opcao 4</option>
<input type="submit" value="Enviar">
</select>
</form>
Selecione uma opcao:
<form action="processa.php" method=post>
Quantos anos voce tem:
<input type="radio" name="idade" value="idade_menos_20"> Menos de 20 anos<br/>
<input type="radio" name="idade" value="idade20_40" checked> De 20 a 40 anos<br/>
<input type="radio" name="idade" value="idademais_40"> Acima de 40 anos
<br/><br/>
Selecione as opcoes a seu respeito:<br/>
<input type="checkbox" name="fumante"> Fumante<br/>
<input type="checkbox" name="alcoolatra"> Alcolatra<br/>
<input type="checkbox" name="hipertenso" checked> Hipertenso<br/>
<input type="submit" value="Enviar">
</form>
Quantos anos voce tem:
Menos de 20 anos
De 20 a 40 anos
Acima de 40 anos

Select an option:
Fumante
Alcolatra
Hipertenso
<form action="processa.php" method=post> Profissao:
<select name="selecao[]" size=2 multiple>
<option value="DBA">DBA</option>
<option value="ASup">Analista de Suporte</option>
<option value="ASist">Analista de Sistemas</option>
<option value="Prog">Programador</option>
<option value="Gerpro">Gerente de projetos</option>
<option value="Ger">Gerente</option>
<input type="submit" value="Enviar">
</form>
Profissao:
Imagem <img> <img src="botao.gif" width="30" height="30" border="0" alt="Este texto aparece enquanto nao carrega a imagem" /> Este texto aparece enquanto nao carrega a imagem
Redimensionada <img src="botao.gif" width="10" height="10" border="0" alt="Imagem redimensionada" /> Imagem redimensionada
Italico <i> <i>Italico</i> Italico
Linha
Horizontal
<hr> <hr>
<hr width="50%" size="4">
<hr width="90%" size="4" noshade>
<hr width="50%" size="4" color=#00ff00>
Lista de definicao <dl>
<dt>
<dd>
<dl>
<dt>Termo1</dt>
<dd>Descricao do termo1</dd>
<dt>Termo2</dt>
<dd>Descricao do termo2</dd>
</dl>
Termo1
Descricao do termo1
Termo2
Descricao do termo2
<dl>
<dd><img src="botao.gif" width="10" height="10" border="0">Item 1</dd>
<dd><img src="botao.gif" width="10" height="10" border="0">Item 2</dd>
<dd><img src="botao.gif" width="10" height="10" border="0">Item 3</dd>
<dd><img src="botao.gif" width="10" height="10" border="0">Item 4</dd>
</dl>
Item 1
Item 2
Item 3
Item 4
Lista
desordenada
<ul> <li> <ul> <li>Item 1</li> <li>Item 2</li> </ul>
  • Item 1
  • Item 2
<ul type="disc">
<li>Item 1</li>
<li>Item 2</li>
<ul type="circle">
<li>Item 2.1</li>
<li>Item 2.2</li>
<ul type="square">
<li>Item 2.2.1</li>
<li>Item 2.2.2</li>
</ul>
<li>Item 2.3</li>
</ul>
<li>Item 3</li>
</ul>
  • Item 1
  • Item 2
    • Item 2.1
    • Item 2.2
      • Item 2.2.1
      • Item 2.2.2
    • Item 2.3
  • Item 3
Lista
ordenada
<ol><li>
com numero <ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
  1. Item 1
  2. Item 2
  3. Item 3
com numero inicio em 4 <ol start="4">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
  1. Item 1
  2. Item 2
  3. Item 3
com letra <ol type="A">
<li>Item 1
<li>Item 2
<li>Item 3
</ol>
  1. Item 1
  2. Item 2
  3. Item 3
com letra inicio na quarta <ol type="A" start="4">
<li>Item 1
<li>Item 2
<li>Item 3
</ol>
  1. Item 1
  2. Item 2
  3. Item 3
com letra <ol type="a">
<li>Item 1
<li>Item 2
<li>Item 3
</ol>
  1. Item 1
  2. Item 2
  3. Item 3
algarismo romano <ol type="I">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
algarismo romano <ol type="i">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
algarismo romano <ol type="i" start="4">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
  1. Item 1
  2. Item 2
  3. Item 3
Marquee <marquee> <marquee behavior=scroll direction="right" bgcolor="green" width=90%>TEXTO</marquee> TEXTO
Negrito <b> <b>Negrito</b> Negrito
Paragrafo <p> Apresentamos diversas formas <p>de utilizacao do neste caso criara uma quebra de linha e adicionara um espaco entre as linhas. Apresentamos diversas formas

de utilizacao do neste caso criara uma quebra de linha e adicionara um espaco entre as linhas.

<p align="left">
Neste caso estas linhas serao configuradas a esquerda </p>

Neste caso estas linhas serao configuradas a esquerda

<p align="right">
Neste caso estas as linhas serao configuradas a direita </p>

Neste caso estas linhas serao configuradas a direita

<p align="center">
Neste caso estas as linhas serao configuradas no centro </p>

Neste caso estas linhas serao configuradas no centro

<p align="justify">
Neste caso estas as linhas serao configuradas com as margens alinhadas. </p>

Neste caso estas linhas serao configuradas com as margens alinhadas.

Sublinhado <u> <u>Tenho uma linha embaixo</u> Tenho uma linha embaixo
Subscript <sub> A palavra <sub>Subscript</sub> esta em Subscript A palavra Subscript esta em Subscript
Superscript <sup> A palavra <sup>Superscript</sup> esta em Subscript A palavra Superscript esta em Superscript
Tabelas
alguns
recursos
<table>
<td>
<th>
<tr>
<table border="2" cellpadding="2" cellspacing="2">
<tr>
<td>Coluna 1</td>
<td>Coluna 2</td>
</tr>
</table>
Coluna 1 Coluna 2
<table border="2" cellpadding="2" cellspacing="2" width="100%">
<tr>
<td>Coluna 1</td>
<td>Coluna 2</td>
</tr>
</table>
Coluna 1 Coluna 2
<table border="2" cellpadding="2" cellspacing="2" width="100%" bordercolor="#11ff00" >
<tr>
<td>Coluna 1</td>
<td>Coluna 2</td>
</tr>
</table>
Coluna 1 Coluna 2
<table border="8" cellpadding="2" cellspacing="2" width="100%">
<tr>
<td>Coluna 1</td>
<td>Coluna 2</td>
</tr>
</table>
Coluna 1 Coluna 2
<table border="2" cellpadding="8" cellspacing="2" width="100%">
<tr>
<td>Coluna 1</td>
<td>Coluna 2</td>
</tr>
</table>
Coluna 1 Coluna 2
<table border="2" cellpadding="2" cellspacing="8" width="100%">
<tr>
<td>Coluna 1</td>
<td>Coluna 2</td>
</tr>
</table>
Coluna 1 Coluna 2
<table border="2" cellpadding="8" cellspacing="8" width="100%">
<tr>
<td>Coluna 1</td>
<td>Coluna 2</td>
</tr>
</table>
Coluna 1 Coluna 2
<table cellpadding="2" cellspacing="2" width="100%">
<tr>
<td bgcolor="#cccccc">Coluna 1</td>
<td bgcolor="#cccccc">Coluna 2</td> </tr>
<tr>
<td>Linha 2</td> <td>Linha 2</td> </tr>
</table>
Coluna 1 Coluna 2
Linha 2 Linha 2
<table>
<tr> <th>Coluna 1</th> <th>Coluna 2</th> <th>Coluna 3</th> </tr>
<tr> <td>Linha 2</td> <td>Linha 2</td> <td>Linha 2</td> </tr>
<tr> <td>Linha 3</td> <td>Linha 3</td> <td>Linha 3</td> </tr>
<tr> <td>Linha 4</td> <td>Linha 4</td> <td>Linha 4</td> </tr>
</table>
Coluna 1 Coluna 2 Coluna 3
Linha 2 Linha 2 Linha 2
Linha 3 Linha 3 Linha 3
Linha 4 Linha 4 Linha 4
<table border="0" cellpadding="4" align="Center" width="95%" bgcolor="#A40000">
<tr bgcolor="#A472D2">
<th>Coluna 1</th> <th>Coluna 2</th>
</tr>
<tr>
<td bgcolor="#72A4D2" WIDTH="40%">Coluna 1</td>
<td bgcolor="#5566E8">Coluna 2</td>
<tr bgcolor="#A472D2">
<td>Coluna 1</td>
<td>Coluna 2</td>
</tr>
</table>
Coluna 1 Coluna 2
Lin 1 - Col 1 Lin 1 - Col 2
Lin 2 - Col 1 Lin 2 - Col 2
Teletype <Teletype> <tt>Texto em teletype</tt> Texto em teletype
Texto
enfatizado
<em> <em>Texto enfatizado</em> Texto enfatizado
Texto
Forte
<strong> <strong>Texto forte</strong> Texto forte
Texto grande <big> <big>Texto grande</big> Texto grande
Texto pre
formatado
<pre>
<pre>
O texto apresentado com o uso 
   do <pre> preserva espaco e
 quebra    de   linha, alem
de possuir fonte 
     com tamanho fixo.
</pre>
O texto apresentado com o uso 
   do <pre> preserva espaco e
 quebra    de   linha, alem
de possuir fonte 
     com tamanho fixo.
Texto
riscado
<strike> <strike>Texto riscado</strike> Texto riscado

Cores


Sao muitas as possibilidades de cores disponiveis, utilizando RGB, para configurar os fundos, os textos, as tabelas e etc.

Padrao RGB

  1. O padrao RGB combina as cores R (red - vermelha), G (Green - Verde) e B (blue - azul).
    1. R (Red - vermelha) pode variar de 0 a 255 (decimal) ou 0 a FF (Hexadecimal)
    2. G (Green - Verde) pode variar de 0 a 255 (decimal) ou 0 a FF (Hexadecimal
    3. B (Blue - azul) pode variar de 0 a 255 (decimal) ou 0 a FF (Hexadecimal
  2. Sao 256 X 256 X 256 = 16777216 possiveis cores
Conheca a ferramenta: escolha suas cores
A seguir está uma amostra com 216 cores com o valor RGB de cada uma.
#000000
#000033
#000066
#000099
#0000CC
#0000FF
#003300
#003333
#003366
#003399
#0033CC
#0033FF
#006600
#006633
#006666
#006699
#0066CC
#0066FF
#009900
#009933
#009966
#009999
#0099CC
#0099FF
#00CC00
#00CC33
#00CC66
#00CC99
#00CCCC
#00CCFF
#00FF00
#00FF33
#00FF66
#00FF99
#00FFCC
#00FFFF
#330000
#330033
#330066
#330099
#3300CC
#3300FF
#333300
#333333
#333366
#333399
#3333CC
#3333FF
#336600
#336633
#336666
#336699
#3366CC
#3366FF
#339900
#339933
#339966
#339999
#3399CC
#3399FF
#33CC00
#33CC33
#33CC66
#33CC99
#33CCCC
#33CCFF
#33FF00
#33FF33
#33FF66
#33FF99
#33FFCC
#33FFFF
#660000
#660033
#660066
#660099
#6600CC
#6600FF
#663300
#663333
#663366
#663399
#6633CC
#6633FF
#666600
#666633
#666666
#666699
#6666CC
#6666FF
#669900
#669933
#669966
#669999
#6699CC
#6699FF
#66CC00
#66CC33
#66CC66
#66CC99
#66CCCC
#66CCFF
#66FF00
#66FF33
#66FF66
#66FF99
#66FFCC
#66FFFF
#990000
#990033
#990066
#990099
#9900CC
#9900FF
#993300
#993333
#993366
#993399
#9933CC
#9933FF
#996600
#996633
#996666
#996699
#9966CC
#9966FF
#999900
#999933
#999966
#999999
#9999CC
#9999FF
#99CC00
#99CC33
#99CC66
#99CC99
#99CCCC
#99CCFF
#99FF00
#99FF33
#99FF66
#99FF99
#99FFCC
#99FFFF
#CC0000
#CC0033
#CC0066
#CC0099
#CC00CC
#CC00FF
#CC3300
#CC3333
#CC3366
#CC3399
#CC33CC
#CC33FF
#CC6600
#CC6633
#CC6666
#CC6699
#CC66CC
#CC66FF
#CC9900
#CC9933
#CC9966
#CC9999
#CC99CC
#CC99FF
#CCCC00
#CCCC33
#CCCC66
#CCCC99
#CCCCCC
#CCCCFF
#CCFF00
#CCFF33
#CCFF66
#CCFF99
#CCFFCC
#CCFFFF
#FF0000
#FF0033
#FF0066
#FF0099
#FF00CC
#FF00FF
#FF3300
#FF3333
#FF3366
#FF3399
#FF33CC
#FF33FF
#FF6600
#FF6633
#FF6666
#FF6699
#FF66CC
#FF66FF
#FF9900
#FF9933
#FF9966
#FF9999
#FF99CC
#FF99FF
#FFCC00
#FFCC33
#FFCC66
#FFCC99
#FFCCCC
#FFCCFF
#FFFF00
#FFFF33
#FFFF66
#FFFF99
#FFFFCC
#FFFFFF



A seguir esta uma amostra de cada uma das cores RGB.

Os tons de cinza sao formados com a combinacao das componentes vermelha, verde e azul com a mesma intensidade.


Conheca a ferramenta: escolha suas cores
Click aqui
VermelhoVerdeAzulCinza
#000000
#000000
#000000
#000000
#080000
#000800
#000008
#080808
#100000
#001000
#000010
#101010
#180000
#001800
#000018
#181818
#200000
#002000
#000020
#202020
#280000
#002800
#000028
#282828
#300000
#003000
#000030
#303030
#380000
#003800
#000038
#383838
#400000
#004000
#000040
#404040
#480000
#004800
#000048
#484848
#500000
#005000
#000050
#505050
#580000
#005800
#000058
#585858
#600000
#006000
#000060
#606060
#680000
#006800
#000068
#686868
#700000
#007000
#000070
#707070
#780000
#007800
#000078
#787878
#800000
#008000
#000080
#808080
#880000
#008800
#000088
#888888
#900000
#009000
#000090
#909090
#980000
#009800
#000098
#989898
#A00000
#00A000
#0000A0
#A0A0A0
#A80000
#00A800
#0000A8
#A8A8A8
#B00000
#00B000
#0000B0
#B0B0B0
#B80000
#00B800
#0000B8
#B8B8B8
#C00000
#00C000
#0000C0
#C0C0C0
#C80000
#00C800
#0000C8
#C8C8C8
#D00000
#00D000
#0000D0
#D0D0D0
#D80000
#00D800
#0000D8
#D8D8D8
#E00000
#00E000
#0000E0
#E0E0E0
#E80000
#00E800
#0000E8
#E8E8E8
#F00000
#00F000
#0000F0
#F0F0F0
#F80000
#00F800
#0000F8
#F8F8F8
#FF0000
#00FF00
#0000FF
#FFFFFF


























Sobre


Bom proveito...

Espero que tenha alguma valia.

Por: Willer Gomes Junior