Básico de HTML

HTML é a abreviação de Hyper Text Markup Language, uma linguagem de
marcação/descrição de páginas que utiliza códigos chamados TAG’s, que ficam
entre <> para criá-la. EX.: <HTML>
Criando um Documento HTML
Para criar um documento HTML é necessária a utilização de um editor de
textos ou de HTML como o Notepad (Bloco de Notas). Vá em Iniciar –
Executar… – e digite: “notepad”. Logo após abrirá um documento do bloco
de notas.
Tags HTML
A primeira Tag de sua página é justamente a que indica o tipo de linguagem a
ser utilizada: <HTML>.
Toda Tag deve ter um inicio e um fim. Exceção:<Br>. Além disso, as
primeiras são sempre as ultimas a serem fechadas, fazendo com que as outras
fiquem encadeadas dentro destas. Assim, <html> será a primeira a abrir e a
ultima a fechar.
A partir daí você vai criar uma espécie de cabeçalho para sua página a partir
da tag <head>.
Utilizamos as seguintes Tag’s:

Title
A TAG Title vai dizer qual título aparecera na barra de nomes no topo da
página; do contrario aparecerá apenas o endereço da página.
A Tag Meta
As tag’s Meta são utilizadas por sites de busca como o Google® e o Cadê?®.
Através delas você irá descrever alguns comentários sobre sua pagina.
<META NAME=“DESCRIPTION”> Fará uma pequena descrição sobre seu
site.
Ex. <META NAME=”DESCRIPTOIN” CONTENT=”Site legal que estou
criando”>.
<META NAME=”KEYWORDS”> Com esta tag você colocará a(s) palavra(s)
chave(s).
Ex. <META NAME=”keywords” content=”Pagina web”>.
<META NAME=”AUTHOR”> Indica qual é o author de sua pagina.
Ex. <META NAME=“AUTHOR” CONTENT=“WebMaster Brenex>.
<META HTTP-EQUIV=”language”> Indica o Idioma a ser utilizado na
página.
Ex. <META HTTP-EQUIV=”language” content=”pt-br”>.
<META HTTP-EQUIV=”Refresh”> Redireciona sua página para uma
página secundária, um outro Site ou para algum arquivo como uma foto.
Ex. <meta HTTP-EQUIV=”Refresh” content=”2;
URL=http://www.planetadorock.xpg.com.br/planetarock.html”>, onde 2 é o
tempo em segundos que a página vai demorar até redirecionar e URL é para
onde o site será redirecionado.
BODY
A Tag BODY fará algumas configurações no corpo de sua pagina. Ela é quem
diz a cor do plano de fundo, a cor dos links, entre outras coisinhas.
ELEMENTOS BODY
BGCOLOR – Determina a cor do Plano de Fundo da pagina.
LINK – Determina a cor do Link que aparecerá na pagina
ALINK – Determina a cor que aparecera quando o link for clicado
VLINK – Determina a cor que aparecera no link após ser clicado.
BACKGROUND – Se você for por uma imagem como plano de fundo deve
usar este elemento de BODY no lugar de bgcolor.
LEFTMARGIN – margem esquerda da página(no MS Internet Explorer).
TOPMARGIN – margem superior da página(no MS Internet Explorer).
MARGINHEIGHT – margem superior(no Netscape).
MARGINWIDTH – margem esquerda(no Netscape).
EX. <BODY BACKGROUND=”http://www.XXXX.
pt/disciplinas/dchs/pagina_dchs/disciplinas/527/media/Site%2
0Background.jpg”>
Parágrafo
Para iniciar um parágrafo utilizamos a Tag P.
<HTML>
<HEAD>
<TITLE> Minha Primeira Página</TITLE>
<META NAME=”author” content=”WebMaster”
<META NAME=”descrription” CONTENT=”Minha Primeira Página de HTML”>
<META NAME=”keywords” content=”Página HTML”>
<META HTTP-EQUIV=”language” content=”pt-br”>
</HEAD>
<BODY BGCOLOR=”GRAY” LINK=”RED” ALINK=”YELLOW”
VLINK=”DARKGREEN”>
Entendendo P
ALIGN – Alinha o texto de acordo com o que você colocar:
Left – Esquerdo;
Justify – Justificado;
Center – Centralizado;
Right – Direito.
A Tag FONT
Face – Indica o tipo de fonte que você vai usar. Ex. <font face=”Times New
Roman”>;
Color – Indica qual a cor você vai por em seu texto. Ex. <font color=Navy>.
Navy é a mesma coisa que azul-marinho;
Size – Indica o tamanho do texto. Varia de 1 a 7 o tamanho.
ESTILOS DE TEXTO
Como em editores de texto, o HTML também permite alterar o estilo do texto.
<B> – Aplica o estilo negrito. Ex. <b>texto em negrito</b>
<I> – Aplica o estilo itálico. Ex. <i>texto em it&aacute;lico</i>
<HTML>
<HEAD>
<TITLE> Minha Primeira Página</TITLE>
<META NAME=”author” content=”WebMaster”
<META NAME=”description” CONTENT=”Minha Primeira Página de HTML”>
<META NAME=”keywords” content=”Página HTML”>
<META HTTP-EQUIV=”language” content=”pt-br”>
</HEAD>
<BODY BGCOLOR=”gray” LINK=”RED” ALINK=”YELLOW” VLINK=”DARKGREEN”>
<p align=center><font face=”Arial” color=”navy” size=”2″>Este é o meu primeiro
par&aacute;grafo em HTML</font></p>
<U>- Aplica o estilo sublinhado (nem todos os browser o reconhecem).
Ex. <u>texto sumblinhado</u>
<SUP> – Faz com que o texto fique sobrescrito. Ex. <sup>Texto
sobrescrito</sup>
<SUB>- Faz com que o texto fique subscrito. Ex. <sub>texto
subscrito</sub>
<BIG> – Aumenta a fonte e atribui negrito. Ex. <big>Texto GRANDE</BIG>
<SMALL> – Reduz e altera a fonte. Ex. <small>TEXTO pequeno</small>
<TT> – Aplica um espaçamento regular ao texto. Ex. <tt>Texto com
espaçamento regular</tt>
TITULOS E SUBTITULOS
Estas Tag’s são utilizadas para dar ao leitor uma visão geral sobre o que se
trata o texto em questão.
Estas tags apresentam seis níveis de títulos que são numerado de 1 a 6 por
ordem de importância. (1 – Titulo principal, – 2 titulo secundário, 3 –
subtítulo…)
Ex. <h1>Este é o meu titulo principal</h1>
<h2>Este é meu titulo secundário</h2>
<h3>Este é o meu subtítulo</h3>
Quebras de Linha
São utilizadas para escreverem textos em linhas diferentes, mas em um
mesmo parágrafo, como num poema, versos em linha diferentes, mas numa
mesma estrofe.
EX. <p align=center><font face=”Tahoma” size=”2″>Este é meu texto em
cima<br>Este é meu texto embaixo</font></p>
A TAG DIV
Ela permite o alinhamento horizontal de qualquer elemento em uma página.
Esta TAG é muito utilizada em DHTML pela propriedade de agrupar elementos
de página.
Ex.

Este texto está alinhado no centro.


A TAG HR
Insere uma linha horizontal no Browser.
EX.
<HR WIDTH=”n%” ALIGN=”posição” SIZE=”n” NOSHADE
COLOR=”#RRGGBB”>
Onde:
ALIGN=”posição”: pode ser left, center e rigth;
WIDTH=”n%”: define a largura da linha, pode ser definida em pixels ou em
percentagem do tamanho horizontal da tela;
SIZE=”n”: define a espessura da barra, em pixels;
NOSHADE: define que a barra não deve ser com efeito 3D;
COLOR=”#RRGGBB”: define a cor da barra. (MS Internet Explorer).
Criando Links
Existem dois tipos de links:
1º – Para páginas Externas
2º – Para paginas Internas, chamados de âncoras.
Criando um Link Externo:
<a href=protocolo://endereçodapagina/arquivo.extensão>Texto mostrando o
Link(ex. “Clique aqui”)</a>
Ex. <a href=”http://www.xxxxxxxxxxxx.br/index.html”&gt;

Clique Aqui</a>
Criando âncoras
Antes de criar um link interno, temos que criar uma ancora, desse jeito;
<A NAME=”seção1″>Este &eacute; o texto da se&ccedil;&atilde;o</A>, em
que “seção1” é o nome da seção e “Este &eacute; o texto da
se&ccedil;&atilde;o” é em que texto foi feito a seção.
Colocando Links nas Âncoras
Agora que a ancora foi feita, falta linká-la, desse jeito:
<a href=”#seção1″>Se&ccedil;&atilde;o 1</a>
<HTML>
<HEAD>
<TITLE> Minha Primeira Página</TITLE>
<META NAME=”author” content=”WebMaster”
<META NAME=”description” CONTENT=”Minha Primeira Página de HTML”>
<META NAME=”keywords” content=”Página HTML”>
<META HTTP-EQUIV=”language” content=”pt-br”>
</HEAD>
<BODY BGCOLOR=”gray” LINK=”RED” ALINK=”YELLOW” VLINK=”DARKGREEN”>
<h1><font face=Tahoma color=green>Este é o meu primeiro t&iacute;tulo
</font></h1>
<p align=center><font face=”Arial” color=”navy” size=”2″>Este é o meu primeiro
par&aacute;grafo em HTML</font></p>
<p align=”justify”><font face=Verdana size=2 color=orange>Este &eacute; o meu
segundo par&aacute;grafo<Br>E esta &eacute; minha primeira quebra de
linha.</font></p>
<a href=”http://www.google.com”><font face=”Tahoma” size=2>
Google</font></a>
Inserindo Imagens
Para inserir imagens numa WebPage vamos utilizar a Tag IMG.
Ex. <img src=”http://www.xxxxxxx.
pt/disciplinas/dchs/pagina_dchs/disciplinas/527/media/Site%20Background
.jpg”>
Configurando a Imagem
Após inserirmos a imagem temos de configurá-la. Não é necessário, mas você
pode utilizar para deixar a sua imagem ao seu gosto.
Utilizamos as seguintes Tag’s a partir de IMG SRC:
<HTML>
<HEAD>
<TITLE> Minha Primeira Página</TITLE>
<META NAME=”author” content=”WebMaster”
<META NAME=”description” CONTENT=”Minha Primeira Página de HTML”>
<META NAME=”keywords” content=”Página HTML”>
<META HTTP-EQUIV=”language” content=”pt-br”>
</HEAD>
<BODY BGCOLOR=”gray” LINK=”RED” ALINK=”YELLOW”
VLINK=”DARKGREEN”>
<h1><font face=Tahoma color=green>Este é o meu primeiro t&iacute;tulo
</font></h1>
<a name=”1″><p align=center><font face=”Arial” color=”navy”
size=”2″>Este é o meu primeiro par&aacute;grafo em
HTML</font></p></a>
<p align=”justify”><font face=Verdana size=2 color=orange>Este &eacute;
o meu segundo par&aacute;grafo<Br>E esta &eacute; minha primeira
quebra de linha.</font></p>
<a href=”http://www.google.com”><font face=”Tahoma” size=2>
Google</font></a>
<a href=”#1″>Voltar para o primeiro par&aacute;grafo</a>
Width – A partir dela informamos a largura da imagem. Se não for
configurada a imagem será inserida no seu tamanho original.
Height – Com ela, informamos a altura. Quando não é informada mantém
também sua altura original.
Border – Cria e configura o tamanho da borda da figura.
Align – Alinha a imagem em relação ao texto. Temos três tipos de
alinhamento.
Top – Alinha o texto paralelamente ao topo da Imagem.
Middle – Alinha o texto no centro da Imagem.
Bottom – Alinha o texto paralelamente à base da imagem.
Alt – É uma tag em que você insere um texto alternativo, para que se no caso
o browser não abrir a imagem o texto aparecerá no lugar.
Exemplo:
<img src=”http://www.xxxxx.
pt/disciplinas/dchs/pagina_dchs/disciplinas/527/media/Site%20Background
.jpg” width=120 height=160 align=”top” border=”3″ alt=”imagem principal”>
<HTML>
<HEAD>
<TITLE> Minha Primeira Página</TITLE>
<META NAME=”author” content=”WebMaster”
<META NAME=”description” CONTENT=”Minha Primeira Página de HTML”>
<META NAME=”keywords” content=”Página HTML”>
<META HTTP-EQUIV=”language” content=”pt-br”>
</HEAD>
<BODY BGCOLOR=”gray” LINK=”RED” ALINK=”YELLOW” VLINK=”DARKGREEN”>
<h1><font face=Tahoma color=green>Este é o meu primeiro t&iacute;tulo
</font></h1>
<a name=”1″><p align=center><font face=”Arial” color=”navy” size=”2″>Este é o
meu primeiro par&aacute;grafo em HTML</font></p></a>
Inserindo Imagens aos Links
Para inserir uma imagem num link basta colocar no lugar do texto do link a
tag que insere imagem.
Ex. <a href=”teste.html><img src=”http://www.univab.
pt/disciplinas/dchs/pagina_dchs/disciplinas/527/media/Site%20Background
.jpg” width=120 height=160 align=”middle” border=”3″ alt=”fundo”></a>
SOM
Para inserir sons na sua pagina vamos utilizar as seguintes Tag’s:
EMBED SRC – Para colocar as músicas para reproduzir em uma espécie de
mini-media player na pagina.
Ex.http://audio.mp3
BGSOUND SRC – Para colocar músicas em plano de fundo, para que apenas
toque sem que ninguém consiga ver, apenas ouvi-la.
Ex.<bgsound src=”audio.mp3 loop=”1″>
LOOP – Utilizamos o loop para colocarmos quantas vezes queremos que a
música toque. Com loop=1, a musica tocara apenas duas vezes, loop=2, suas
vezes… Para colocarmos para que se repita inúmeras vezes, colocamos
loop=infinite.
<p align=”justify”><font face=Verdana size=2 color=orange>Este &eacute; o meu
segundo par&aacute;grafo<Br>E esta &eacute; minha primeira quebra de
linha.</font></p>
<img src=”http://www.xxxxxx.
pt/disciplinas/dchs/pagina_dchs/disciplinas/527/media/Site%20Background.jpg”
width=120 height=160 align=”middle” border=”3″ alt=”fundo”>
<a href=”http://www.google.com”><font face=”Tahoma” size=2>
Google</font></a>
<a href=”#1″>Voltar para o primeiro par&aacute;grafo</a>
TABELAS
As Tabelas servem para deixar mais organizados os dados disponíveis em sua
pagina.
Criando tabelas
Para criar tabelas simples, vamos fazer da seguinte maneira:
As tag’s Table e /Table servem para indicar inicio e fim de tabela.
TR define cada linha de cada tabela.
TH Define o cabeçalho da Tabela. É uma célula da tabela.
TD Define os dados da Tabela.
Melhorando a Tabela
Agora vamos melhorar a aparência da tabela inserindo Tag’s
BORDER: espessura da borda em pixels.
BOREDERCOLOR: especifica a cor da borda da tabela
WIDTH: especifica a largura da tabela em relação ao browser, em pixels ou
%;
HEIGHT: especifica a altura da tabela em relação ao browser, em pixels ou
%;
CELLSPACING: especifica o espaço entre uma célula e outra, em pixels;
CELLADDING: especifica o espaço entre os dados e a borda da tabela, em
pixels;
BGCOLOR: cor de fundo das células da tabela.
<TABLE>
<TR>
<TH>Cabeçalho da Tabela</TH>
<TD>Dados da Tabela</TD>
</TR>
</TABLE>
Atributos Individuais
Vamos agora configurar individualmente cada célula.
ALIGN: alinha do conteúdo da célula ou das células da linha. Valores: right,
left, center.
BGCOLOR: define a cor de fundo das células da linha ou de uma célula
individual;
VALIGN: alinhamento vertical de uma célula ou de células de uma linha;
Pode ser top, middle ou bottom.
WIDTH: largura de uma célula em pixels ou %;
NOWRAP: indica ao browser que o texto da célula não pode ser dividido em
mais de uma linha. A coluna inteira terá o tamanho do texto escrito naquela
célula;
Células Mescladas
Para mesclar as células vamos atribuir à Tag TD os seguintes atributos:
COLSPAN: Será o numero de colunas que a célula ocupara.
ROWSPAN: Será o numero de linhas que a célula ocupara.
<table border=”2″ bordercolor=”#003300″ bgcolor=”green” width=”60%”
height=”40%” cellspacing=”3″ celladding=”3″>
<table border=”2″ bordercolor=”#003300″ bgcolor=”green” width=”60%”
height=”40%” cellspacing=”3″ celladding=”3″>
<tr align=”left” valign=”top”
<Table Border=”2″ width=”50%” cellpadintg=”3″ celladding=”3″>
<TR bgcolor=”#FFFACD”>
<TD colspan=”2″>Célula 1</TD>
</TR>
</TABLE>
<HTML>
<HEAD>
<TITLE> Minha Primeira Página</TITLE>
<META NAME=”author” content=”WebMaster”
<META NAME=”description” CONTENT=”Minha Primeira Página de HTML”>
<META NAME=”keywords” content=”Página HTML”>
<META HTTP-EQUIV=”language” content=”pt-br”>
</HEAD>
<BODY BGCOLOR=”gray” LINK=”RED” ALINK=”YELLOW” VLINK=”DARKGREEN”>
<h1><font face=Tahoma color=green>Este é o meu primeiro t&iacute;tulo
</font></h1>
<a name=”1″><p align=center><font face=”Arial” color=”navy” size=”2″>Este é o
meu primeiro par&aacute;grafo em HTML</font></p></a>
<p align=”justify”><font face=Verdana size=2 color=orange>Este &eacute; o meu
segundo par&aacute;grafo<Br>E esta &eacute; minha primeira quebra de
linha.</font></p>
<img src=”http://www.xxxxx.
pt/disciplinas/dchs/pagina_dchs/disciplinas/527/media/Site%20Background.jpg”
width=120 height=160 align=”middle” border=”3″ alt=”fundo”>
<a href=”http://www.google.com”><font face=”Tahoma” size=2>
Google</font></a>
<a href=”#1″>Voltar para o primeiro par&aacute;grafo</a>
http://xxxx.xxxx.com/Chp
</embed>
<table border=”2″ bordercolor=”#003300″ bgcolor=”green” width=”60%”
height=”40%” cellspacing=”3″ celladding=”3″>
<TR align=”left” valign=”top” bgcolor=”#FFFACD”>
<TH>Cabeçalho</TH>
<TD colspan=”2″>Minha primeira tabela</TD>
</TR>
</TABLE>
Frames
Frames são divisões de uma pagina em HTML. Ela é composta de uma pagina
principal e diversas outras divisões, compostas por outras paginas. Na pagina
principal você insere as outras paginas em colunas ou linhas, sendo que você
identifica o tamanho que cada uma deve ter.
É necessária cautela ao pôr frames, pois se você não souber como organizálas,
sua pagina perdera todo o sentido. No entanto, elas podem ser muito
úteis para criação de menus em sua pagina.
Para criar as frames vamos usar duas Tag’s:
FRAMESET: Indica como vai ser sua Frame, se vai ser Horizontal ou vertical.
ROWS: Com este tipo, a frame ficará na horizontal.
COLS: As Frames ficarão verticalmente.
Quando você for configurar frame terá que dar valores de tamanhos para elas,
preferencialmente em % para ficar mais fácil de configurar.
Note que colocamos uma parte que vem ser o menu com 16% da pagina, os
outros 84% foram embutidos no asterisco, após a virgula.
Agora vamos ver o atributo SRC da tag FRAME.
No quadro acima você pode ver que inserimos dois arquivos: “menu.html” e
“texto.html” e damos nomes à elas. Os nomes são muito importantes para que
quando for abrir um link na outra frame coloque o atributo target e o nome da
frame. Exemplo: <a href=”Downloads.html” target=”home”>
Os atributos Noresize e Scrollolling, servem respectivamente para não
deixar modificar o tamanho da frame e nem que apareça a barra de rolagem
nela.
<frameset cols=”16%,*” border=”0″>
<frame src=”menu.html” name=”frame” noresize scrolling=”no”>
<frame src=”texto.html” name=”home” noresize>
</frameset>
Inserindo Caracteres Principais
Alguns caracteres como o “Ç” e letras acentuadas, como o “ê” ou o “ã”, não
fazem parte do dicionário inglês, e então não podem ser inseridas
diretamente. É necessária a utilização de códigos para que o Ç seja criado e as
letras acentuadas sejam crias.
Abaixo segue uma tabela com estes códigos.
Caractere Código Caractere Código
Ç &Ccedil; ç &ccedil;
 &Acirc; â &acirc;
à &Atilde; ã &atilde;
Á &Aacute; á &aacute;
À &Agrave; à &agrave;
Ê &Ecirc; ê &ecirc;
Í &Iacute; í &iacute;
Ó &Oacute; ó &oacute;
Ô &Ocirc; ô &ocirc;
Õ &Otilde; õ &otilde;
Ú &Oacute; ú &uacute;
Ü &Uuml; ü &uuml;
< &lt; > &gt;
” &quot; & &amp;
Ø &Oslash; ø &oslash;
Tabela de Cores em HTML
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
Temos também os nomes aceitos em HTML
Outras Tabelas
Tabela de Cores – Verde
Aquamarine
“#70DB93”
Forest Green
“#238E23”
Green Yellow
“#93DB70”
Spring Green
“#00FF7F”
Dark Green
“#2F4F2F”
Dark Green Copper
“#4A766E”
Dark Olive Green
“#4F4F2F”
Lime Green “#32CD32”
Green Copper
“#527F76”
Hunter Green
“#215E21”
Khaki
“#9F9F5F”
Medium Aquamarine
“#32CD99”
Medium Forest Green
“#6B8E23”
Medium Sea Green
“#426F42”
Medium Spring Green
“#7FFF00”
Pale Green
“#8FBC8F”
Sea Green “#238E68”
Yellow Green
“#99CC32”
Tabela de Cores – Marrom
Baker’s Chocolate
“#5C3317”
Brown
“#A62A2A”
Dark Brown
“#5C4033”
Dark Tan
“#97694F”
Dark Wood
“#855E42”
Feldspar
“#D19275”
Firebrick
“#8E2323”
Light
Wood
“#E9C2A6”
Medium Wood
“#A68064”
New Tan
“#EBC79E”
Semi-Sweet Chocolate
“#6B4226”
Sienna
“#8E6B23”
Tan
“#DB9370”
Very Dark Brown
“#5C4033”
aqua black blue fuchsia
gray green lime maroon
navy olive purple red
silver teal white yellow
Tabela de Cores – Violeta
Blue Violet
“#9F5F9F”
Dark Orchid
“#9932CD”
Dark Purple
“#871F78”
Dusty Rose
“#856363”
Indian Red
“#4E2F2F”
Maroon
“#8E236B”
Violet
“#4F2F4F”
Medium Orchid
“#9370DB”
Medium Violet Red
“#DB7093”
Neon Pink
“#FF6EC7”
Orchid
“#DB70DB”
Pink
“#BC8F8F”
Plum
“#EAADEA”
Spicy Pink
“#FF1CAE”
Violet Red
“#CC3299”
Salmon
“#6F4242”
Tabela de Cores – Amarelo
Brass
“#B5A642”
Bright Gold
“#D9D919”
Bronze
“#8C7853”
Bronze II
“#A67D3D”
Cool Copper
“#D98719”
Copper
“#B87333”
Coral
“#FF7F00”
Gold
“#CD7F32”
Goldenrod
“#DBDB70”
Mandarian Orange “#E47833” Medium Goldenrod “#EAEAAE”
Old Gold
“#CFB53B”
Orange
“#FF7F00”
Orange Red
“#FF2400”
Scarlet
“#8C1717”
Wheat
“#D8D8BF”
Tabela de Cores – Azul
Cadet Blue
“#5F9F9F”
Corn Flower Blue
“#42426F”
Dark Slate Blue
“#6B238E”
Dark Turquoise
“#7093DB”
Light Blue
“#C0D9D9”
Light Steel Blue
“#8F8FBD”
Medium Blue
“#3232CD”
Medium Slate Blue
“#7F00FF”
Medium Turquoise
“#70DBDB”
Midnight Blue
“#2F2F4F”
Navy Blue
“#23238E”
Neon Blue
“#4D4DFF”
New Midnight Blue
“#00009C”
Rich Blue
“#5959AB”
Sky Blue
“#3299CC”
Slate Blue
“#007FFF”
Steel Blue
“#236B8E”
Summer Sky
“#38B0DE”
Thistle
“#D8BFD8”
Turquoise
“#ADEAEA”
Tabela de Cores – Cinza
Dark Slate Grey
“#2F4F4F”
Dim Grey
“#545454”
Grey
“#C0C0C0”
Light Grey
“#A8A8A8”
Quartz
“#D9D9F3”
Silver
“#E6E8FA”
Very Light Grey
“#CDCDCD”

GOSTOU SIGA O SITE

por Paulista Postado em HTML Com a tag

Frames são relativamente usadas na Web.

lcm o criador

Frames (quadros) são relativamente usadas na Web. Há os que adoram o uso de
frames e não admitem que suas home-pages fiquem sem elas, por outro lado há os
que abominam o uso de frames, porque julgam que eles “estragam” o layout da homepage.
Fazer frames tem o mesmo procedimento que confecção de home-pages simples, a
diferença é que se deve trocar a tag <BODY> pela tag <FRAMSET>
Para termos uma home-page com frames devemos ter três páginas, uma com o código
que contém a tag <FRAMESET> e duas outras com os códigos onde serão inseridas
as páginas de cada frame.
Vamos procurar entender melhor.
Uma documento HTML simples seria assim :

<HTML>
<HEAD>
<TITLE>Página simples </TITLE>
</HEAD>
<BODY>
Neste campo entram os comandos em geral
</BODY>
</HTML>
Já um documento HTML que teria frames ficaria assim:
<HTML>
<HEAD>
<TITLE>Página com Frame </TITLE>
</HEAD>

Vejamos um exemplo:
<HTML>
<HEAD>
<TITLE> Exemplo de frame</TITLE>
</HEAD>
<FRAMESET COLS=20% , 80%> <! Este comando inicia o frame e divide a tela do
navegador em 2 partes, uma com 20% da tela e outra com 80%>
<FRAME SRC=FRAME1.HTM> <! Este comando chama as páginas HTML que devem
ocupar as colunas divididas pelo frame>
<FRAME SRC=FRAME2.HTM>
</FRAMESET>
</HTML>

Este é o código para gerar os frames (veja a figura) .
Agora vamos crias os códigos para serem inseridos nas duas colunas que criamos.

<HTML>
<HEAD>
<TITLE>Página simples </TITLE>
</HEAD>
<BODY>
AQUI ENTRA A PRIMEIRA PÁGINA NORMAL
</BODY>
</HTML>

Salve este exemplo como FRAME1.HTM. Por que ? Porque no código que geramos no
exemplo de frames chamamos a página com o comando <FRAME
SRC=FRAME1.HTM>, se você salvar o nome do código de forma diferente deverá
alterar também o código da página de frame.

<HTML>
<HEAD>
<TITLE>Página simples </TITLE>
</HEAD>
<BODY>
AQUI ENTRA A SEGUNDA PÁGINA NORMAL
</BODY>
</HTML>

Este código deve ser salvo como FRAME2.HTM, pelo mesmo motivo do código
anterior.
Sempre lembrando que estas páginas devem estar no mesmo DIRETÓRIO.

Pronto, você conseguiu fazer a sua primeira página com frame.
Alem de poder dividir o navegador em colunas com o parâmetro COLS dentro da tag
<FRAMSET> , você também pode dividir em linhas usando o parâmetro ROWS, ou
ainda dividindo em colunas e linhas ao mesmo tempo.

<HTML>
<HEAD>
<TITLE> Exemplo de frame</TITLE>
</HEAD>
<FRAMESET ROWS=50% , 50%> <! Este comando inicia o frame e divide a tela do
navegador em 2 partes, uma com 50% da tela e outra com 50%>
<FRAME SRC=FRAME1.HTM> <! Este comando chama as páginas HTML que devem
ocupar as colunas divididas pelo frame>
<FRAME SRC=FRAME2.HTM>
</FRAMESET></HTML>
Uma tag <FRAMESET> pode ser inserida dentro da outra gerando assim frames dentro
de frames, como no código abaixo:
<HTML>
<HEAD>
<TITLE> Exemplo de frame</TITLE>
</HEAD>
<FRAMESET COLS=50%,50%>
<FRAMESET ROWS=50%,50%>
<FRAME SRC=FRAME1.HTM>
<FRAME SRC=FRAME1.HTM>
</FRAMESET>
<FRAMESET ROWS=50%,50%>
<FRAME SRC=FRAME1.HTM>
<FRAME SRC=FRAME1.HTM>
</FRAMESET>
</FRAMESET>
</HTML>

Este código gera a seguinte página :
Já deu para perceber que toda a estrutura de frames depende na verdade da tag
<FRAME>. Vejamos alguns dos atributos que podem ser inseridos dentro desta tag.

1-PARÂMETROS DE FRAMES
Parâmetro SRC da tag <FRAME>
Este parâmetro é o responsável por chamar a página HTML que deve ser aberta
(inserida) dentro de um frame. Em todos os exemplos até agora só usamos arquivos
locais para abrir estas páginas em um frame, mas nada impede você de colocar no
lugar uma URL completa. Por exemplo:
<FRAME SRC=http://www.yahoo.com>
Com este comando você será capaz, devidamente conectado, de chamar esta página
para a seu frame, onde quer que ela esteja na Internet.
Parâmetro NAME
Este é um dos principais parâmetros da tag <FRAME>. Ele serve, como era de se
esperar, para definir o nome do frame. Ele deve ser usado em conjunto com outro
parâmetro que é o TARGET.
Parâmetro MARGINWIDTH
Define a margem entre as laterais do frame e seu conteúdo. Exemplo:

<FRAME SRC=FRAME1.HTM MARGINWIDTH=100>
Este comando cria uma margem de 100 pixels de cada lado do frame.
Parâmetro MARGINHEIGHT
Da mesma forma que MARGINWIDTH, este parâmetro define uma distância de
margem, que neste caso é a margem superior e inferior do frame. Exemplo:
<FRAME SRC=FRAME1.HTM MARGINHEIGHT=100>
Dá um espaço de 100 pixels entre as margens superior e inferior do frame.
Parâmetro SCROLLING
Define se o frame terá ou não barras de rolagem. Por default quando o conteúdo de
uma página excede o tamanho do frame as barras de rolagem são acrescentadas
automaticamente. Os valores válidos para SCROLLING são YES, NO e AUTO.

Exemplo:
<FRAME SRC=FRAME1.HTM SCROLLING=YES>
Parâmetro TARGET
Este é o mais importante de todos os parâmetros. Ele trabalha em conjunto com NAME
e permite que coloquemos um link em um frame e o resultado, ou seja, a página
linkada, aparece em outro frame.
Vejamos um exemplo de como podemos linkar um frame com outro. Vamos construir
uma página que possua um menu de opções do lado direito, para isso podemos
aproveitar os códigos de exemplo abordados anteriormente.
Os códigos são:

<FRAMESET>

<HTML>
<HEAD>
<TITLE>FRAMES</TITLE>
</HEAD>
<FRAMESET COLS=25%,75%>
<FRAME SRC=FRAME1.HTM SCROLLING=NO>
<FRAME SRC=FRAME2.HTM NAME=TESTE>
</FRAMESET>
</HTML>
FRAME1.HTM
<HTML>
<HEAD>
<TITLE>FRAMES</TITLE>
</HEAD>
<BODY BGCOLOR=YELLOW>
<CENTER><H2>Escolha um Link</H2></CENTER>
<BR>
<A HREF=http:\\www.amazon.com TARGET=TESTE>Livraria Amazon</A>
<BR>
< A HREF=http:\\www.yahoo.com TARGET=TESTE>Pesquisador YAHOO</A>
<BR>
<A HREF=FRAME2.HTM TARGET=TESTE>Volta para Frame2.htm</A>
</BODY>

</HTML>
FRAME2.HTM
<HTML>
<HEAD>
<TITLE>FRAMES</TITLE>
</HEAD>
<BODY>
<CENTER><H2>Os links ao lado deverão aparecer neste lado do
Navegador</H2></CENTER>
<BR>
<CENTER>
<FONT SIZE=4>Este frame é o que foi nomeado como TESTE com o parâmetro NAME
em Frame.HTM</FONT>
</CENTER>
</BODY>
</HTML>
Se tudo funcionar convenientemente você deverá visualizar sua página como abaixo,
mas é claro que os links que não são locais funcionarão somente se você estiver
conectado.
2-Criando um frame Inline
Se você quiser misturar texto , figuras e um frame em uma mesma página você precisa
criar um frame inline. Para isso , utilize a tag http://nomedoframe.
Você também pode usar os atributos normais da tag frame , como o FRAMEBORDER ,
SCROLLING etc.
<html>
<body>
<center><h1>Exemplo do comando IFRAME </h1></center>
<hr>
http://pag2.htm
</center>
Aqui continua a página normal !
</body>
</html>

</FRAMESET>
</HTML>
Então o que devemos fazer ? Devemos criar um documento HTML normal e um
documento HTML de frames.

É ISSO AI SE GOSTOU DEIXE UM COMENTÁRIO!.

por Paulista Postado em HTML Com a tag

Estrutura de uma página XHTML

LCM INFORMÁTICA

Para se conectar a internet, é necessário que seu computador tenha algum tipo de conexão para ter acesso à rede (pode ser acesso discado, banda larga, via cabo, rádio ou qualquer outro). É necessário que você seja cadastrado em um provedor de acesso, responsável por gerenciar o acesso às informações da Internet. Há a necessidade de um programa para navegar, também conhecido como navegador ou browser
Os serviços mais comuns na internet são: o Correio Eletrônico, Web e mensageiros instantâneos.
Cada um dos serviços se utiliza das conexões da Internet para transmitir e receber dados entre as várias máquinas que fazem parte do serviço. No caso dos emails, por exemplo, temos a máquina que envia o email, servidores intermediários e a máquina de destino da mensagem.
• WEB (WWW) – Páginas com os mais variados assuntos.
• CORREIO ELETRÔNICO / EMAIL – Comunicação entre pessoas através de mensagens escritas (@).
• FTP – Transferência de informações de um computador para outro.
• MENSAGENS INSTANTÂNEAS – Troca de informações simultâneas
Já sabemos o que é internet e alguns serviços disponíveis nela, mas o que é site? Site é um conjunto de páginas web, compostas de hipertextos. A web ou WWW (World Wide Web) é o conjunto de todos os sites existentes.
Formato de um domínio

Na Internet, cada página tem um endereço próprio, o que chamamos de URL (Uniform Resource Locator) – Localizador Uniforme de Recursos. Esses endereços são chamados de domínios. Como exemplo, utilizamos o endereço abaixo, descrevendo-o detalhadamente.
http://www.google.com.br
• http:// sigla que indica um protocolo de transmissão na WWW. HTTP (HyperText Transfer Protocol) – é o protocolo de transferência de arquivos de hipertexto e o mais comumente usado na internet.
• www indica que estamos na Web
• google nome do site
• com tipo do site (com – comercial, org – organização não governamental, adv – advogados, gov – governamental, etc)
• br país de origem do site (br – Brasil)

A WEB
Um dos serviços mais utilizado na Internet é a Web. Há uma confusão entre internet e Web, mas na verdade a internet já existia 15 anos antes do surgimento da web.
A web consiste em um sistema cliente e um servidor. A maioria das pessoas está familiarizada com os clientes: navegadores Internet Explorer, Mozilla Firefox ou qualquer outro. Porém, os servidores também são essenciais para o funcionamento da mesma. São chamados servidores de Web.
A comunicação entre os clientes e servidores se dá através do protocolo HTTP:
1. Usuário digita um endereço de recurso na caixa de endereço ou clica em um link;

Navegador envia a requisição até o servidor de web;
3. Servidor de web envia o conteúdo requisitado para o navegador;
4. O Navegador apresenta a informação para o usuário.

A Informação
A resposta de uma requisição HTTP vem em um formato chamado HTML. Trata-se de um arquivo em que as informações de texto são apresentadas a uma série de marcadores (tags) para indicar a apresentação daquele texto. Os marcadores indicam o que são: listas, tabelas, títulos, formulários, entre outros.
O navegador utiliza estes marcadores para construir a aparência da página requisitada.
1.1.5 HTML e XHTML
Para a Web funcionar, é preciso que o conteúdo disponível esteja codificado pelo formato HTML. O formato HTML foi reformulado para um padrão mais moderno chamado XHTML, utilizando outra linguagem para esta reformulação. HTML (HyperText Markup Language) – é a linguagem usada na autoria de páginas destinadas a internet.
1.1.6 Acessando uma página da Web
Assim como você usa um aplicativo para fazer textos, outro para fazer planilha, etc, é necessário usar um programa para acessar as páginas da Web (navegador ou browser).
No Ambiente Linux: Botão K Internet / “Navegador”

No Ambiente Windows: Botão Iniciar Programas / “Navegador”
Navegador ou Browser – programa para acessar páginas na Web (Internet Explorer, Mozilla Firefox, Opera, entre outros).
1.1.7 Pesquisando o endereço de uma página na Web
Na internet não há uma lista de endereços, como uma lista telefônica, por exemplo, mas há alguns sites de busca, que nos ajudam a encontrar o que queremos.
Endereços de sites que você poderá usar na pesquisa:
http://www.google.com.br
http://www.yahoo.com.br
http://www.altavista.com
• busca.uol.com.br
1.1.8 Etapas para pesquisar uma página na Web:
1. Ative um navegador (Mozilla, Internet Explorer, etc.).
2. Escolha um site de busca
3. Digite o que deseja procurar
4. Aperte o botão Pesquisa ou Busca
Será aberta uma lista com os sites encontrados sobre o tema procurado.

Desenvolvedor WEB
A disciplina de Introdução a Multimídia, visa dar condições para que o aluno inicie seus conhecimentos na web, para futuro uso como desenvolvedor web ou web designer.
Segundo o Catálogo Nacional de Cursos Técnicos do MEC, o técnico em informática para internet desenvolve programas de computador para internet, seguindo as especificações e paradigmas da lógica de programação e das linguagens de programação. Utiliza ferramentas de desenvolvimento de sistemas, para construir soluções que auxiliam o processo de criação de interfaces e aplicativos empregados no comércio e marketing eletrônicos. Desenvolve e realiza a manutenção de sites e portais na internet e na intranet.
O profissional de Web Design tem sob sua responsabilidade as seguintes atividades: construção de sites, sistemas, projetos multimídia, soluções para educação à distância e comércio eletrônico na internet. Ele deve criar ações que trabalhem os conceitos de usabilidade e planejamento da interface, facilitando e assegurando a interação aos usuários finais.
Cabe ao web designer saber qual será o público-alvo, os objetivos, os serviços/produtos ofertados, diferenciais e outros fatores importantes ao projeto. A partir daí, deve ser definida a estrutura do site, layout e a tecnologia a ser adotada.
O web designer precisa adquirir conhecimentos em diversas áreas da informática e se manter atualizado, além de:
• possuir uma base de design tradicional, como teoria das cores e tipografia;
• aprimorar seus conhecimentos com base na sua área de interesse;
• empenhar-se em ter um bom entendimento de CSS, XHTML, Flash, entre outros. Há a necessidade de conhecer um pouco de tudo para decidir qual tecnologia utilizar;
• buscar conhecimento sobre usabilidade;

procurar sempre por novas tecnologias.

Antes de sair fazendo um site, precisamos conhecer o “problema” que tentaremos resolver. Detectar o real objetivo do site é primordial para um bom planejamento, de modo que as ações sejam tomadas de forma correta, minimizando assim futuras correções para atender o cliente.
É necessário definir o público alvo do site, o objetivo, os serviços oferecidos, qual será o diferencial em relação aos outros sites.
Após o estudo feito, será definida a estrutura do site, a tecnologia empregada e o layout.
Quando visitamos um site, o que faz termos vontade de permanecer nele é a aparência, a facilidade de achar o que procuramos. Por isso, devemos definir o design visual do site, que não precisa pular, girar e piscar, precisa sim ter um aspecto profissional seguindo os conceitos básicos do design, como: aproximação, contraste e alinhamento. O layout do site deve ser utilizado para transmitir o desejado ao visitante.
Até pouco tempo atrás a única saída para se fazer um site com bom designer era utilizando tabelas em HTML, mas atualmente há um movimento chamado tableless, que é a criação de sites bem feitos, mas sem o uso de tabelas.
Devemos sempre focar no visitante do site no momento da criação do mesmo. Também devemos lembrar que há algumas regras a seguir sobre acessibilidade, ver W3C. Este assunto tem sido amplamente discutido e

em alguns países é quase que obrigatório um site ser acessível (por exemplo, Portugal).
Sobre o assunto padrões web, recomendamos o acesso aos seguintes sites: http://www.maujor.com e http://www.w3.org.
Após o site desenvolvido temos que testá-lo em mais de um navegador, pois há diferenças na visualização entre eles.
2.1 Recursos necessários para o desenvolvimento do site
Há vários softwares que facilitam a criação de páginas web, como por exemplo: DreamWeaver, FrontPage, Fireworks, entre outros. Porém, nesta disciplina faremos através de comandos, utilizando para isto apenas um editor de texto e um navegador.

lcmmm

Figura 1: Tela do Editor de Texto do Ubuntu

llll022

Figura 2: Tela do Mozilla Firefox – Navegador Web

Estaremos utilizando o padrão Web, ou Web Standard. Há muitas vantagens em utilizar o padrão em comparação com todos os recursos despadronizados presentes nos navegadores mais utilizados pelo mercado. A principal vantagem é a facilidade de utilizar o código para outros navegadores mais simples. De acordo com o padrão, as regras de utilização de XHTML são mais restritas.

Todo conteúdo da Web necessita seguir um padrão. Atualmente a codificação padrão é o XHTML.
Algumas razões para aprender e utilizar o XHTML:
• XHTML é o padrão de marcação atual, substituindo a HTML;
• utilização de regras de sintaxe mais precisas e rigorosas;
• aumento significativo da acessibilidade aos sites criados seguindo os padrões;
• facilidade de manutenção e atualização;
• possibilidade de utilizar o mesmo código para diversos clientes Web além do navegador: PDAs, celulares e outros dispositivos móveis.
3.1 Hipertexto e Hiperlink
Normalmente, definimos hipertexto relacionando texto em formato digital, podendo ser agregado a ele outros tipos de informações, como outros blocos de textos, palavras, imagens ou sons, sendo que o acesso aos outros elementos dá-se através de hiperlinks.

Segundo o Glossário do BROFFICE.ORG, “hyperlinks são referências cruzadas, realçados no texto em várias cores e ativados por meio de um clique no mouse. Com eles, os leitores podem saltar para uma informação específica dentro de um documento, bem como para informações relacionadas em outros documentos.”
3.2 HTML (HyperText Markup Language)
Traduzindo: Linguagem de Marcação de Hipertexto.
A linguagem HTML é utilizada para marcar textos através de elementos e atributos. Um texto marcado com esta linguagem é chamado de hipertexto HTML.
Documentos HTML podem ser interpretados por navegadores.
Desde a versão 4.01 do HTML a aparência não é responsabilidade do HTML.
3.3 XHTML (eXtensible Hypertext Markup Language)
Segundo Silva (2008), XHTML é uma Linguagem Extensível de Marcação para Hipertexto e que se destina a escrever documentos web com a funcionalidade adicional de ser compatível com as aplicações XML.
Todas as linguagens de marcação da Web são baseadas em SGML (Standard Generalized Markup Language – Linguagem de Marcação Generalizada Padrão), uma metalinguagem complexa, projetada com a finalidade de servir de base para a criação de outras linguagens. SGML foi usada para criar XML (Extensible Markup Language – Linguagem de Marcação Extensível), também uma metalinguagem, porém, simplificada.
Com XML, é possível definir novas tags e novos atributos para escrever um documento Web, permitindo ao usuário criar sua própria linguagem de marcação. XHTML foi criada dentro deste conceito e, por isso, é

uma aplicação XML. As tags e os atributos de XHTML foram criados a partir das tags e dos atributos do HTML 4.01, juntamente com suas regras.
Dessa forma, ao usar XHTML, estamos escrevendo um código XML, onde as tags e os atributos já estão definidos. Este fato proporciona todos os benefícios de XML sem a complexidade de SGML. Além disso, XHTML é uma linguagem de marcação bastante familiar para quem conhece HTML, o que facilita a transformação de um documento HTML em XHTML.
Como o XHTML não é responsável pela aparência da página, o que faremos é indicar o que é um bloco de texto de forma semântica. Para aparência usaremos CSS.
Um bloco de texto na página XHTML pode ser uma porção de coisas:
• Um parágrafo
• Um título
• Uma lista, ou um item de uma lista
• Uma citação
• Um endereço
• Código de programação
• Texto predefinido
• Texto enfatizado
• e outros.
Observe novamente, todos estes indicadores são nomes de coisas lógicas em uma página XHTML/HTML. Não indicam nunca a aparência. É claro que uma lista na sua cabeça tem uma determinada aparência. Mas em XHTML indicar que um bloco de texto é uma lista, tem exatamente este objetivo: indicar que é uma lista. A aparência é consequência.

Diferenças entre XHTML e HTML
Em documentos XHTML:
• devem ser bem formados.
• Todas as tags devem ser escritas com letras minúsculas.
• Tags devem estar convenientemente aninhadas.
• Uso de tags de fechamento é obrigatório.
• Elementos vazios devem ser fechados.
• Diferenças na sintaxe dos atributos.

Estrutura obrigatória de um documento XHTML
1
<!DOCTYPE tipo_do_documento>
2
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
3
<head>
4
<title>Título do documento</title>
5
</head>
6
7
<body>
8
Conteúdo do documento
9
</body>
10
11
</html>
A declaração DOCTYPE não é uma tag (elemento) da marcação XHTML. Por isso, não há necessidade da tag de fechamento e deve ser sempre escrita em letras maiúsculas.
4.2 O que é tag?
Tags são palavras de códigos contidas entre sinais de maior e menor na linguagem HTML/XHTML de descrição do documento. Muitas tags contêm texto ou referências a hyperlinks entre os símbolos de abertura e de fechamento. Por exemplo: os títulos são identificados pelas tags <h1> no início do título e por </h1> no final do título. Algumas tags aparecem sozinhas, tais como: <br /> (que indica quebra de linha) ou <img … /> (que

indica um vínculo para uma figura).
4.3 Para que serve o DOCTYPE?
Podemos criar vários tipos de documentos em XHTML, sendo que cada tipo é definido por regras diferentes. Estas regras estão detalhadas dentro da especificação XHTML denominada DTD (Document Type Definitions) – Definição do Tipo de Documento.
Sua declaração DOCTYPE diz aos navegadores qual DTD foi utilizada para elaborar a marcação. A partir daí, essa informação explica aos serviços de validação e aos navegadores sobre como tratar a página. É obrigatório o seu uso se quiser validar a sua página. Esta deve ser a primeira linha do seu documento.
4.3.1 Os tipos de DOCTYPE
Há três tipos de DOCTYPE para XHTML, são eles:
Strict
1
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0
2
Strict//EN”
3
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-
4
strict.dtd”>
A mais rígida das declarações, os documentos XHTML escritos no modo Strict não permitem qualquer item de formatação dentro dos elementos e nem elementos em desuso, segundo as recomendações do W3C. São indicados para uso com folhas de estilo em cascata, com marcação totalmente independente da apresentação.

Transitional
1
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0
2
Transitional//EN”
3
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-
4
transitional.dtd”>
Esta declaração permite uma maior flexibilidade e é indicada para documentos que ainda utilizem elementos em desuso, regras de apresentação (formatação) embutidas em tags e também para documentos destinados a exibição em navegadores sem suporte para CSS (navegadores antigos).
Este tipo não admite qualquer tipo de marcação para frames.
Frameset
1
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0
2
Frameset//EN”
3
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-
4
frameset.dtd”>
Com esta declaração podemos utilizar tudo da declaração transacional e mais os elementos específicos para frames.
4.4 A declaração namespace
Após a declaração DOCTYPE vem uma declaração de namespace em XHTML, associada ao elemento raiz html.
1
<html xmlns=”http://www.w3.org/1999/xhtml&#8221;
2
xml:lang=”pt-BR” lang=”pt-BR”>
Um namespace em XML é uma coleção de tipos de elementos e atributos associados a um determinado DTD.
A declaração namespace indica a sua localização. No exemplo acima, aparece indicada a localização do namespace em XHTML (http://www.

w3.org/1999/xhtml). Os dois atributos adicionais especificam que a versão da XML em uso foi escrita em português do Brasil (xml:lang=”pt-BR”), e que o documento está escrito em português(lang=”pt-BR”).
4.5 Codificação dos caracteres
Para serem interpretados corretamente por navegadores e aprovados nos testes de validação de marcação, todos os documentos XHTML devem declarar o tipo de codificação de caractere que foi usado em sua criação (Unicode, ISO-8859-1, etc).
Existem duas formas de fazer isso, sendo a segunda a mais indicada:
1
<?xml version=”1.0” encoding=”iso-8859-1”>
1
<meta http-equiv=”Content-Type”
2
content=”text/html; charset=iso-8859-1” />

Exemplo de um arquivo XHTML
Aqui um simples exemplo de um arquivo codificado em XHTML 1.0:
1
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
2
<html xmlns = “http://www.w3.org/1999/xhtml&#8221; xml:lang=”pt-br” lang=”pt-br”>
3
<head>
4
<title>Título da Página</title>
5
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
6
</head>
7
<body>
8
<p>Aqui ficarão os parágrafos</p>
9
</body>
10
</html>
Bonito, legal, mas o que significa cada linha? Vamos entender?
1 doctype: indica o padrão e qual versão utilizaremos. As possibilidades são: HTML4.1 transactional, strict e frameset, XHTML1.0 transactional, strict e frameset e outros. No nosso caso usaremos o padrão XHTML Strict 1.0. Teremos uma aula só para conhecer os outros padrões.
2 e 10 html: marcador (tag) que indica o início efetivo da página HTML/XHTML. As propriedades xml:lang e lang indicam a língua em que o documento está escrito. Use “pt-BR” para português do Brasil. “en” para

inglês.
3 e 6 head: bloco de cabeçalho. Dentro deste bloco colocaremos as informações importantes sobre a página para os navegadores. Estes dados são interpretados pelos navegadores, que montam o conteúdo da maneira como foi estipulado pelo desenvolvedor.
4 title: título da página. O que estiver digitado entre esta tag será exibido na barra de título da janela ou na aba do navegador, também utilizada pelos motores de busca para nomear o conteúdo de sua página.
5 meta content-type: indica detalhes de codificação de caractere para o navegador.
7 e 9 body: corpo ou conteúdo da página. É dentro desta tag que sua página será realmente feita, o que o seu usuário verá.
8 p: parágrafos. Aqui poderão ser incluídos outras tags no lugar do <p>.
Agora colocaremos a “mão na massa”. Para isto abra o seu editor de texto, podendo ser o Bloco de Notas do Windows ou gedit, kedit, vi do Linux.
1
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
2
<html xmlns = “http://www.w3.org/1999/xhtml&#8221; xml:lang=”pt-Br” lang=”pt-BR”>
3
<head>
4
<title>Olá</title>
5
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
6
</head>
7
<body>
8
<p>Olá Mundo!</p>
9
<p>Digite aqui o seu nome</p>
10
</body>
11
</html>
Salve o documento com extensão *.html na sua pasta, com o nome

primeira.html. Para ver o resultado siga os passos abaixo, conforme o seu navegador.
5.1.1 Internet Explorer
Clique no menu Arquivo/Abrir/Procurar… Localizar o arquivo criado e clicar “Abrir.”
5.1.2 Firefox
Clique no menu Arquivo/Abrir Arquivo… Localizar o arquivo criado e clicar “Abrir.”
Para ambos existe um atalho de teclado: CTRL+O.
Abrirá o seu navegador padrão que mostrará algo parecido com a tela abaixo:

luuuu

Você deverá ver no navegador o texto digitado entre os tags <p> e </p>. Nossos exercícios em XHTML serão todos testados desta maneira.

Validando um documento
Para verificar se você seguiu corretamente o padrão, existe uma ferramenta online que faz o teste de conformidade.
Entre na internet no endereço validator.w3.org clique na aba Validate by File Upload, selecione o seu arquivo e clique em “Check”. Se tudo estiver certo verá a mensagem “Congratulations”. No caso de erro, o sistema apresenta o que você fez de errado. Corrija o que ele pediu e tente novamente.

lucm

Figura 4: Resultado da Validação bem-sucedida da Primeira Página

Testando páginas com erro
Geramos um arquivo com erro para aprendermos o que ocorre quando este é validado.
O erro está na linha 8 da figura abaixo, não foi fechado a tag de parágrafo.

lllc

Figura 6: Página de validação com erros

liilililli

Figura 7: Erros encontrados

Observem que o erro foi encontrado na linha 8 do nosso documento, mas o validador mostrou o primeiro erro na linha 9. Isto ocorreu porque ele tentou encontrar a tag </p> que fecha o parágrafo aberto e não achou.
Corrija a linha 8, salve o arquivo novamente e revalide-o.
Guarde o endereço do “Validator” no seu favoritos. Devemos utilizá-lo sempre para verificar se estamos atendendo as normas do W3C.
Importante! Algumas regras para conseguir a validação:
• Os caracteres maiúsculos e minúsculos são obrigatoriamente como apresentados. (HTML é diferente de html)
• Cuidado ao usar o ctrl+c e ctrl+v do navegador: verifique que todas as aspas ” estão trocadas por aspas inglesas. Quando copiar o conteúdo de um arquivo para o editor de texto apague as aspas que foram coladas e redigite as aspas dupla, normalmente fica próxima ao número 1 do teclado.
• Cuidado com o final da tag meta: …charset=iso-8859-1” /> Observe que depois das aspas usamos espaço, barra e maior. O espaço é obrigatório. Ocorre a mesma coisa com as tags <br />, <hr /> e <img src=“….” alt=“…” />, estas são tags únicas, não existe tags de abertura para elas, então deve ser digitado a tag e seus atributos, o espaço, a barra e maior.

Já conhecemos a estrutura básica de uma página XHTML, vamos incrementá-la?
Precisamos aprender: a marcar parágrafos, títulos, códigos de programação, inserir figuras, criar tabelas (só depois formatá-los), colocar cor. Tamanho e efeitos na nossa página será o último passo.
Todas as tags deste capítulo serão utilizadas dentro do <body> </body>.
Importante: Todos os códigos aqui mostrados devem ser digitados em um arquivo .html para teste.
6.1 Títulos
Como em todo texto, as páginas Web também possuem vários títulos, em vários níveis. Repare no índice desta apostila, perceberá isto, sendo um para cada capítulo e vários subtítulos.
Há 6 níveis de títulos: h1, h2, h3, h4, h5 e h6. O nível 1 é para os títulos mais importantes da página e os outros devem ser usados para caracterizar subtítulos.
A hierarquia dos títulos é construída de acordo com a importância das informações e não em relação à aparência. Por enquanto esqueça a aparência, poderemos alterá-la quando estivermos trabalhando com CSS.

Treinando
Entre no editor de texto e digite o arquivo abaixo, depois salve com titulos.html.

luuu

Figura 8: Exemplo de Títulos

liuws

unorFigura
9: Visualização

Parágrafos
Em XHTML todo o texto simples deve ser delimitado com a tag ‘p’. Desta maneira:
<p>Primeiro parágrafo. Ele pode conter várias frases. Veja que uma frase na mesma linha não deve ser delimitada. Um parágrafo é diferente de uma frase, certo?</p>
<p>Por padrão, é inserido um pequeno espaço entre os parágrafos. Você poderá alterar o espaço via CSS.</p>
<p>Não podemos digitar texto “solto” na nossa página, ele deve sempre estar entre tags, seja elas de parágrafos, listas, títulos ou qualquer outra.</p>
6.3 Listas Ordenadas e Não Ordenadas
Utilizamos listas para enumerar ou listar itens, é um recurso bastante utilizado. Existem dois tipos: numeradas e não-numeradas ou ordenadas e não ordenadas.
As lista não numeradas (não ordenadas) usam duas tags ‘ul’ (unordered list) para delimitar a lista, e ‘li’ (list item) para cada item da lista. Para cada item da lista ele coloca um marcador, que pode ser uma seta ou bolinha. Assim:

1
<ul>
2
<li>primeiro item da lista</li>
3
<li>segundo item da lista</li>
4
<li>terceiro item da lista</li>
5
<ul>
Resultado:
• primeiro item da lista
• segundo item da lista
• terceiro item da lista
As listas numeradas (ordenadas) automaticamente incluem números antes de cada item da lista. Funciona igual a lista não-numerada. No exemplo anterior trocando ‘ul’ por ‘ol’ (ordered list) obteríamos:
1
<ol>
2
<li>primeiro item da lista</li>
3
<li>segundo item da lista</li>
4
<li>terceiro item da lista</li>
5
<ol>
Resultado:

1 primeiro item da lista
2 segundo item da lista
3 terceiro item da lista
Não é necessário digitar os números.
6.4 Listas de Definição
Existe ainda a lista de definição, parecida com um dicionário.
Em uma lista de definições, há os termos a serem definidos e há uma definição para cada termo. Para construir uma lista de definição temos 3 tags:
dl definition list, delimita o início e fim da lista
dt definition term, delimita cada um dos termos da lista
dd definition description, delimita cada definição da lista
Veja um código de exemplo:
1
<dl>
2
<dt>dl</dt> <dd>definition list, delimita o início e fim da lista</dd>
3
<dt>dt</dt><dd>Delimita cada um dos termos da lista</dd>
4
<dt>dd</dt><dd>Delimita cada definição da lista</dd>
5
</dl>
Resultado:

lulululul

Figura 10: Exemplos de parágrafos e listas

Endereços
Address serve para indicar o endereço de um local, assim como marcar qualquer tipo de informação de contato.
Dentro do elemento address pode inserir quaisquer outros elementos inline, como a, span, strong, entre outros.

1
<address>
2
<a href=”http://www.cefetsp.br/edu/sjbv/”&gt; IF – Campus SJBV</a>
3
<span>
4
Acesso Dr. João Batista Merlin, s/nº <br />Jardim Itália – 13872-551 <br />São João da Boa Vista – SP – (19) 3634-1100
5
</span>
6
</address>
ou
1
<address>Este é meu endereço</address>
6.6 Citações
Utilizado para fazer citações de texto de um livro, site ou mesmo uma frase de outro autor, a tag <cite>:
1
<cite>”Seu futuro depende de muitas coisas, mas
2
principalmente de você.” </cite>
Para blocos de citações mais longas com parágrafos inteiros, temos ainda a tag <blockquote>. Observe que ele exige um ou mais blocos dentro:
1
<blockquote><p>Esta citação inclui mais de um
2
parágrafo</p>
3
<p>Este é o segundo parágrafo da
4
citação</p></blockquote>
Sem os tags <p> dentro do blockquote o código não é validado.
Na tag <blockquote> é opcional indicar quem é o autor da citação. Use o parâmetro cite:
1
<blockquote cite=”Einstein”>A velocidade da luz é
2
igual para todos os referenciais
3
inerciais.</blockquote>

O texto em cite não é mostrado, mas é armazenado para o robô dos sistemas de busca.
6.7 Código
Código de programação é um tipo de informação muito comum em sites especializados em informática, principalmente programação. Esta tag deve estar dentro de parágrafos ou títulos. Para indicar que algo é código, temos a tag ‘code’:
1
<code>
2
System.out.println(“Tabuada do 5”);
3
for(i=1;i<=10;i++){
4
System.out.println(“5 x ” + i + “ = ” + (i*5));
5
}
6
</code>
6.8 Resultados de Programas
Utilizado para mostrar resultados de saídas de programas. Esta tag deve estar dentro de parágrafos ou títulos.
Exemplo:
1
<p>Mostrando o resultado do programa acima:
2
<samp>5 x 1 = 5</samp></p>
6.9 Ênfase e ênfase forte
Para destacar uma frase ou palavra no meio de um parágrafo, temos duas opções: utilizar de ênfase ou de ênfase forte. Os tags são, respectivamente, <em> e <strong>:
1
<p>Exemplo de parágrafo. Agora um exemplo <em>de

2
algo muito importante e que necessite
3
destaque</em>. No entanto isso é <strong>ainda
4
mais importante e deve ser ainda mais
5
destacado.</strong></p>
Observe que a aparência padrão para <em> é o itálico e <strong> é o negrito. Mas isso é o padrão e podem ser modificados via CSS. Textos enfatizados fazem parte de um parágrafo, ou outro tipo de bloco, como: code, cite, etc.
6.10 Sobrescrito e Subscrito
Para textos subscritos (subscribed) e sobrescritos (supercribed), temos respectivamente os tags <sub> e <sup>:
1
H<sub>2</sub>O
2
H2O
3
a<sup>2</sup>= b<sup>2</sup>+c<sup>2</sup>
4
a2=b2+c2
Importante: Aluno, teste todos os exemplos vistos, isto é fundamental para o seu aprendizado, teste-os no validator.w3.org
6.11 Mais recursos para a página
Como já criamos alguns exemplos e você testou todos os exemplos anteriores, deve ter percebido que a página está estática, parada, sem saída para outro local. Podemos modificar isto, mas como? Através de links e âncoras.
Veremos também como criar tabelas. Vale destacar que tabela foi criada apenas para tabular dados, mostrar informações de forma concisa e não para fazer a estrutura de uma página .html, como era utilizada antigamente.

6.12 Links e Âncoras
Atualmente, a internet é o que é graças aos links, que na maioria das vezes é caracterizado como textos com um sobrescrito embaixo e geralmente em azul, quando clicados levam a outro conteúdo da internet, de forma automática.
Usar é fácil, mas vocês verão que criar um link é quase tão simples quanto utilizá-lo.
Os atributos HTML são características de uma tag que adicionam funcionalidades a ela. Por exemplo: não basta criar um link, é preciso definir uma página destino. Como já vimos, a tag usada para linkar é <a></a>. Para adicionar a essa tag a página de destino do link, usaremos um atributo dessa tag, chamado href. Todo atributo XHTML segue as seguintes regras:
1 deve ser escrito em letras minúsculas;
2 fica dentro da tag de abertura;
3 Respeita a seguinte sintaxe:
nome_do_atributo = “valor_do_atributo”
Vejamos como ficaria nosso link, usando o atributo href:
1
<a href=”http://www.ifsp.edu.br “>Conheça o IFSP</a>
O texto sublinhado indica o local que o navegador irá carregar no momento que o usuário clicar no link, e o Conheça o IFSP será o texto que o usuário verá.
Quando criarmos links para as páginas que estão dentro do nosso próprio servidor, não é necessário o caminho completo (http://www.dominio.com.br/etc…), basta apenas declarar o nome do arquivo, e sua hierarquia de pastas (quando necessário).
É interessante podermos escolher aonde queremos que seja aberto o link, em qual janela o link será aberto. Temos duas opções: abrir links na

mesma janela, obrigando o usuário a utilizar o botão VOLTAR, do navegador, para retornar a nossa página; abrir links em uma nova janela. Por padrão, os links abrem na mesma janela, mas para forçar a abertura de links em uma nova janela precisaremos do atributo target. Lembrando que para quem utiliza softwares leitores de tela (pessoas com deficiências visuais) a abertura de links em outra janela ou aba dificulta a navegação pela página. Veja como funciona:
1
<h1>Link para mesma janela</h1>
2
<a href=”pagina.html”>Link</a>
3
<h1>Link abrindo em nova janela</h1>
4
<a href=”pagina.html” target=”_blank”>Link</a>
Basta adicionar o atributo target com o valor “_blank” e o link abrirá em uma nova janela.
Importante: Quando necessário utilizar mais de um atributo na tag, deve-se separá-los por um espaço em branco.
6.13 Âncoras
Já aprendemos como criar links para outros sites ou outras páginas, agora aprenderemos a criar links para dentro do próprio documento.
Imagine uma página enorme, cheia de conteúdo dividido em capítulos, mas tudo em uma única página, ficaria difícil navegar por este site, se utilizássemos índices facilitaria a navegabilidade. Para isso, criaremos links âncoras, ou seja, links que apontem para o próprio documento.
Para criar uma âncora é necessário dois passos:
1 Definir um pedaço da página para ser o destino do link;
2 Criar um link apontando para o pedaço da página selecionado como destino.
Para definir um trecho da página como destino do link âncora, será preciso envolvê-lo com as tags <a></a> acrescentando o atributo id. Veja

como funciona:
1
<h4><a id=”ancora1”>Título 1</a></h4>
2
<p>Parágrafo 1…</p>
Bem, definimos um parágrafo de nossa página como uma âncora, agora é preciso criar um link apontando para essa âncora. Para isso, basta criar um link normalmente, e no caminho da página de destino colocar o seguinte valor: #nome_da_ancora.
1
<h4><a id=”topo”>Topo</a></h4>
2
<a href=”#ancora1”>Parágrafo 1</>
3
<h4><a id=”ancora1”>Título 1</a></h4>
4
<p>Parágrafo 1…</p>
5
<a href=”#topo”>Voltar para o topo</a>
Nos casos em que a posição na página de destino é um título marcado com títulos (h1, h2 .. h6), ou mesmo um parágrafo ou qualquer objeto específico, pode-se usar o parâmetro id. Exemplo:
1
<h4 id=”respond”>Envie um comentário</h4>
6.14 Tabelas
Muitas páginas foram construídas com tabelas, pois na época, era o único recurso para construí-las com uma boa aparência. Para montar layout de páginas cada vez mais elaboradas e detalhadas, a tabela ainda é uma ferramenta muito usada, embora esta prática seja desencorajada. Tabelas devem ser utilizadas apenas para tabulação de dados.
Atualmente, há outros recursos mais avançados para isso, por exemplo: CSS.
Dica: Se quiser se livrar das tabelas em layout de página, conheça o site http://tableless.com.br/artigos/tutorial/.
Todas as tabelas devem possuir um título, cabeçalho, corpo e rodapé. Criamos tabela com o elemento <table>. Podemos utilizar alguns

elementos juntamente com tabelas:
<table> indica início e fim da tabela, todos os outros elementos devem ser utilizados dentro desta tag.
<caption> elemento opcional que indica o título da tabela
<thead> delimita o cabeçalho da tabela
<tfoot> delimita o rodapé da tabela
<tbody> delimita o corpo da tabela
<tr> delimita as linhas da tabela, observe que os dados de células ficam dentro de uma linha
<td> delimita as células da tabela
<th> delimita as células da tabela, porém como títulos, uma célula de cabeçalho (head), por padrão já vem em negrito e centralizado.
Quando quisermos “mesclar” uma célula por mais de uma coluna, como fazemos no Excel ou no Word, temos que utilizar o atributo “colspan” seguido do número de colunas que a célula deve se expandir.
Se quiser que a célula ocupe mais de uma linha, o atributo a ser utilizado é o “rowspan”, ambos os atributos devem ser inseridos dentro de uma declaração <td>.
A diferença aqui é conceitual: duas células não são mescladas, mas uma célula é esticada.
Uma tabela possui alguns atributos importantes dos quais podemos destacar:

BOM GALÉRA É ISSO AI SE GOSTOU DEIXE UM COMENTÁRIO E O RESTANTE DA APOSTILA TÁ AQUI É SÓ PEDIR K ENVIO?

por Paulista Postado em HTML Com a tag

15 dicas para deixar seu site PHP mais seguro

10288lula.jpg

Evite colocar seu arquivo de conexão com banco de dados no mesmo diretório das suas páginas ou no diretório usado para includes. O melhor a fazer é colocá-lo em algum diretório fora da raiz do site.

  1. Desligue no servidor web a configuração que permite a listagem dos arquivos presentes nos diretórios que não tem um index.php.
  2. Evite usar o nome includes para o diretório onde você colocará esse tipo de arquivo.

  3. No diretório que você usar para colocar seus arquivos de include, sempre coloque um arquivo index.htm e um index.php em branco. Isso evitará que o servidor liste o conteúdo desse diretório caso esteja com a configuração para listagens habilitada.

  4. Jamais use a extensão .inc para seus arquivos de include. Isso pode fazer com que o servidor web mostre dados importantes contidos nesses arquivos. Use sempre a extensão .php. Dessa forma o arquivo sempre será processado antes de ser entregue para os usuários.

  5. Desligue o error_reporting no servidor de produção. Erros em scripts PHP normalmente exibem a localização física dos arquivos no servidor ou mostram as consultas inteiras que estão sendo usadas para acessar o banco de dados, por exemplo. Com o error_reporting desligado, essas informações não serão mostradas.

  6. Ao criar uma área de administração do site, evite usar nomes óbvios como admin.

  7. Ainda na mesma área administrativa, faça configurações que obriguem os usuários a mudar de senha freqüentemente e que não aceite senhas muito simples. Evite também a criação de usuários padrão como: admin, administrador, admintrator, root.

  8. Em formulários que enviam dados diretamente para o banco, tomar cuidado com SQL Injection. Para resolver isso, capture esses dados e trate-os com addslashes.

  9. Em sistemas dinâmicos, evitar fazer scripts que apagam dados do banco. Costume usar status para os registros e depois construa um script coletor que irá tratar esses dados que deveriam ser apagados.

  10. Não esqueça que é possível configurar o nível de permissão do usuário que será usado para acessar o banco de dados. Se seu site apenas faz consultas. Coloque no seu arquivo de conexão um usuário que só possa fazer SELECT no banco.

  11. No php.ini, que é o arquivo de configuração do PHP, use o parâmetro disable_functions para desabilitar funções que podem ser perigosas como: exec(), eval(), readfile(), shell_exec(), system(), file(), fopen(), popen() entre outras.

13. Ainda no php.ini, habilite o safe_mode.

  1. Sempre desabilitar o usuário root padrão do MySQL, que tem senha em branco.
  • Se for usar algum aplicativo para blog, chat, wiki, etc. Não esqueça de remover o arquivo de instalação do diretório do aplicativo.

  • cropped-meu-logo-do-mundo.jpg

    por Paulista Postado em HTML Com a tag

    Confecção de um site em HTML

    cooltext1602647512

    O objetivo desta página é ensinar os princípios básicos para confecção de um site em HTML para que você possa fazer seu primeiro site.
    Aqui você aprenderá códigos HTML e saberá como inserir um vídeo, como inserir uma música, como inserir um flash, Inserir imagens, Criar Links com imagens, Como fazer tabelas, Criar Links para e-mail, Criar Âncora, Caixa de Texto, Meta-Tags, Letreiros e Linhas, Imagens de Fundo, Fazer Listas, Links para Downloads, Formatar Textos, Tamanho e Cores de Fonte, Cabeçalhos, Atributos de Body, enfim, será sua iniciação para fazer um site em HTML.

    Existem editores HTML que oferecem comodidade para confecção das páginas, tais como: FrontPage; Dreamweaver e outros. Mas não será necessário aprendendo os códigos abaixo e você poderá fazer no Word ou Bloco de Notas e salvar como .html.
    Toda página é composta por Tags, que são os comandos html. Toda página deve comerçar com a tag <HTML> e terminar com </HTML>. Note que a barra “/” determina o fechamento da tag. Estas são as Tags fundamentais de sua página, isto é, toda página contém estas tags:

    Na medida do possível irei acrescentando mais dicas para você fazer um site bem legal. ITENS BÁSICO EM HTML:

    • <HTML>
    • <HEAD>
    • <TITLE> Título da página </TITLE>
    • </HEAD>
    • <BODY> Texto; Imagens; Links; etc </BODY>
    • </HTML>
      As tags podem ser escritas em Maiúscula ou Minúscula Ex.: <html> ou <HTML>.
      O Título da página aparecerá no alto da janela do browser e será referenciado em buscas pela rede. Ao ser adicionada à “Favoritos” (Bookmarks), o título será o atalho para ela.

    Ir para o topo

    ATRIBUTOS DE <BODY> :

    Através de <BODY>, podemos definir cores dos textos, links e fundo das páginas, ou uma imagem de fundo. Temos então:

    • BGCOLOR – Cor de fundo
    • TEXT – Cor da fonte dos textos
    • LINK – Cor dos links (padrão: azul)
    • ALINK – Cor dos links, quando clicados (padrão: vermelho)
    • VLINK – Cor dos Links, depois de visitados (padrão: roxo)
    • BACKGROUND – Imagem de fundo: Indica o URL da imagem.
      Podemos definir tudo de uma só vez, colocando o seguinte código:
      <BODY BGCOLOR=”YELLOW” TEXT=”BLACK” LINK=”BLUE” ALINK=”RED” VLINK=”PURPLE”>
      Não está no código acima o atributo BACKGROUND pois não é padrão.

    Ir para o topo

    C O R E S :

    Você pode escrever as cores (em inglês) ou colocar seu código. Porém, para escrever só é aceito 16 cores, que são:

    • Preto = black – código = #000000 
    • Branco = white – código = #FFFFFF
    • Azul = blue – código = #0000FF
    • Amarelo = yellow – código = #FFFF00
    • Verde = green – código = #008000
    • Lima = lime – código = #00ff00
    • Marron = maroon – código = #800000
    • Oliva = olive – código = #808000
    • Azul Celeste = aqua – código = #00ffff
    • Lilás = fuchsia – código = #ff00ff
    • Cinza = gray – código = #808080
    • Azul escuro = navy – código = #000080
    • Roxo = purple – código = #800080
    • Verde escuro = teal – código = #008080
    • Cinza claro = silver – código = #c0c0c0
    • Vermelho = red – código = #FF0000
      Mas você pode definir varias tonalidades e cores, basta ter a lista de códigos das cores, ou

    CLICAR AQUI

    Ir para o topo

    CABEÇALHOS :

    O tamanho das letras ou fontes é definido pela tag <H> – “Headings”.
    A tag <H> normalmente é usada em CABEÇALHOS e há seis níveis. Com esta tag você pode definir o tamanho das letras, mas não o tipo da fonte. Veja abaixo como fica:

    Este é o tamanho:<H1>

    Este é o tamanho:<H2>

    Este é o tamanho:<H3>

    Este é o tamanho:<H4>

    Este é o tamanho:<H5>

    Este é o tamanho:<H6>

    Pode-se alinhar os cabeçalhos
    <H2 ALIGN=CENTER>Texto centralizado</H2>
    <H2 ALIGN=RIGHT>Texto alinhado à direita</H2>
    <H2 ALIGN=LEFT>Texto alinhado à esquerda</H2>

    Ir para o topo

    TAMANHO E CORES DAS LETRAS :

    Você também pode usar a tag <FONT> para definir o tamanho, bem como sua cor e tipo da fonte. 

    • <FONT FACE> – Define o tipo de letra
    • <FONT COLOR> – Define a cor da letra
    • <FONT SIZE> – Define o tamanho da letra
      Veja abaixo alguns exemplos:
    • <FONT FACE=”ARIAL” SIZE=”1″ COLOR=”RED”>Fica assim</FONT>
    • <FONT FACE=”ARIAL” SIZE=”2″ COLOR=”BLUE”>Fica assim</FONT>
    • <FONT FACE=”ARIAL” SIZE=”3″ COLOR=”BLACK”>Fica assim</FONT>
    • <FONT FACE=”TIMES” SIZE=”5″ COLOR=”BLUE”>Fica assim</FONT>
      * Note que você define com mais precisão o tamanho das letras do que a tag <H>.

    Ir para o topo

    COMO FORMATAR OS TEXTOS :

    Formatando o texto em Negrito, Itálico, Sublinhado e Centralizado. TAGS:
    <B> – Negrito, <U> – Sublinhado, <I> – Itálico e <CENTER> – Centralizado

    • <B>Texto em Negrito</B>
    • <U>Texto Sublinhado</U>
    • <I>Texto em Itálico</I>
    • <STRIKE> ou <S> Texto Riscado assim
    • <SUB> Como em H2O – O número 2 ficou em baixo.
    • <SUP> Como em Km2 – O número 2 ficou em cima.
    • <CENTER>Texto Centralizado</CENTER>

    Você também pode acumular os efeitos, agrupando os códigos Ex.:

    <CENTER><B><U><I>O texto fica assim</B></U></I></CENTER>

     

    Ir para o topo

    COMO FAZER PARÁGRAFOS E LINHAS :

    Não basta você teclar ENTER para que a linha vá para baixo. Você terá que colocar uma TAG para um parágrafo ou para uma nova linha.
    Para parágrafo usar a TAG <P> e para linha usar <BR> Exemplo:
    <P>
    Primeiro Parágrafo
    <BR>
    Primeira Linha

    <P>
    Segundo Parágrafo
    <BR>
    Segunda Linha
    Note que cada vez que você coloca a TAG <BR> estará fazendo uma nova linha, que também não deixa de ser um parágrafo.
    Se você escrever sem usar as tags <BR> ou <P> o próprio browser quebra as linhas automaticamente.

    Ir para o topo

    ALINHAMENTO COM A TAG <P> :

    Para alinhar os parágrafos basta incluir depois do “P” o parâmetro “align + tipo de alinhamento”, conforme abaixo:

    • <P ALIGN=”LEFT”> Texto alinhado à esquerda.
    • <P ALIGN=”RIGHT”> Texto alinhado à direita.
    • <P ALIGN=”CENTER”> Texto centralizado.
    • <P ALIGN=”JUSTIFY”> Texto justificado.

    Ir para o topo

    COMO INCLUIR IMAGENS :

    A TAG utilizada é: <img src=”nome da imagem+extensão”(gif,jpg,bmp,etc)>
    Atributos da Imagem:

    • WIDTH – Define a largura da imagem.
    • HEIGHT – Define a altura da imagem.
    • ALT – Texto que aparece quando é passado o mouse sobre a imagem
    • BORDER – É um valor atribuido à largura da borda da imagem (Contorno).
      Veja alguns exemplos:
      <img src=”zero.gif” alt=”Seu texto” border=”0″>
      <img src=”zero.gif” alt=”Seu texto” border=”1″>
      <img src=”zero.gif” alt=”Seu texto” border=”2″ width=”20″ height=”20″>
      Note que no ultimo exemplo especificamos o tamanho da imagem. Não definindo este tamanho, a imagem aparecerá no tamanho original. Você pode especificar um tamanho menor do que a original, pois não acarretará perda de qualidade da imagem, mas se fizer ao contrário, isto é, definir um tamanho maior que a original perderá qualidade de imagem.
      O correto é você ter a imagem do tamanho certo que deseja que apareça na página. Evite colocar imagens maiores que 50 Kb. Quanto maior a imagem mais tempo leverá para carregar.
      Alinhamento texto de imagens:
    • <img src=”zero.gif” align=”top”>
    • <img src=”zero.gif” align=”middle”>
    • <img src=”zero.gif” align=”left”>
    • <img src=”zero.gif” align=”right”>
      Há também os atributos de moldura, que definem o espaço vertical e horizontal entre as imagens e os textos circundantes, onde:
      <IMG SRC=”imagem.gif” VSPACE=espaço vertical>
      <IMG SRC=”imagem.gif” HSPACE=espaço horizontal>
      Ex.: <IMG SRC=”imagem.gif” ALIGN=”LEFT” WIDTH=”10″ HEIGHT=”10″ VSPACE=”50″>
      <IMG SRC=”imagem.gif” ALIGN=”RIGHT” WIDTH=”10″ HEIGHT=”10″ HSPACE=”30″>

    Ir para o topo

    COMO FAZER OS LINKS :

    Links são pontos clicáveis que levam a qualquer site da internet ou qualquer página do site e até mesmo qualquer ponto da própria página. A TAG usada é:
    <a href=”nome do lugar à ser levado”>descrição do lugar</a>
    Exemplos

    <a href=”https://paulista07.wordpress.com”>Conheça dicas e apostilas grátis</a> Resultado:

    Note que formou-se um link para um determinado site que foi descrito no código acima.
    Se você clicar abrirá o referido site em uma outra janela, isto é, sem que você saia deste site, isto porque foi adicionado o atributo “TARGET”, então na verdade, para você não fechar esta janela, o código inserido aqui foi:
    <a href=”https://paulista07.wordpress.com&#8221; target=”_blank”>Conheça Extrema-MG</a> Para fazer um link para uma outra página do seu site use:
    <a href=”pagina_tal.html”>Clic aqui</a> – Note que após o nome da página é colocado a extensão .html

    Ir para o topo

    COMO FAZER IMAGEM COM LINK :

    É simples fazer uma imagem ter um link. Ao invés de colocar o texto com a descrição do lugar, coloque a TAG de imagem. Veja o exemplo:
    <a href=”http:// paulista07.wordpress.com “><IMG SRC=”local, nome da imagem + extensão”></a> Sendo que:

    • http:// paulista07.wordpress.com com é o URL (endereço) do site.
    • local é caso você tenha armazenado suas imagens em uma pasta. Ex. Pasta “Imagens”.
    • nome da imagem + extensão Exemplo: minhafoto.jpg ou barra.gif
      Veja o exemplo abaixo, note que formou um link na figura e o levará ao referido site acima.
      Lembre-se: foi usado a target”_blank” para abrir em uma nova janela.

    Ir para o topo

    COMO FAZER LINKS PARA DOWNLOAD :

    Na verdade não existe o comando específico. O que acontece é que quando criamos um link para um arquivo que o navegador não reconhece, ele automaticamente inicia o download, por exemplo, o navegador não reconhece os arquivos com extensão ZIP, EXE, RAR, etc., nestes casos ele inicia o download. Veja exemplos:

    • <a href=”arquivo.rar”>Clic aqui para baixar</a>
    • <a href=”pasta_tal/arquivo.zip”>Clic aqui para baixar</a>
      Certas extensões de arquivos fazem com que os navegadores, em vez de fazer o download, abrem com programas instalados no computador.
      Se você fazer um link para um arquivo de vídeo “.avi” o navegador abrirá o programa para exibir esse vídeo. Para que isso não aconteça, sempre compacte seus arquivos para download no formato zip ou rar, por exemplo, tornando-os mais leves (menores) e download será mais rápido.

    Ir para o topo

    L I S T A S :

    Nesta página já existem várias listas. Logo abaixo já tem outra lista com os nomes:

    1. Listas Ordenadas
    2. Listas sem ordenação
    3. Listas Encadeadas

    Exemplos: A lista acima (Ordenada) foi feita com os seguintes códigos:
    <OL> <LI> <LI> <LI> </OL> Os números são inseridos automaticamente.
    Se você quiser trocar os números por letras, Ex.: A, B, C. ao invés de usar só <OL>
    use <OL START=1 TYPE=A> – Onde “1” indica para começar pela primeira letra do alfabeto.
    Lista Sem Ordenação:
    <UL> <LI> <LI> <LI> </UL>
    Resultado:

    • Primeiro item.
    • Segundo item.
    • Terceiro item. As “bolinhas” são inseridas automaticamente.

    Listas Encadeadas:
    <OL> <LI> <UL> <LI> <LI> </UL> <LI> </OL> Produz resultado misto.

    Ir para o topo

    COMO INSERIR IMAGEM DE FUNDO :

    Para você colocar uma imagem de fundo no seu site é só colocar um atributo dentro da TAG <BODY>, assim: <BODY BACKGROUND=”nome da imagem+extensão”>.
    Quando a imagem é menor que o tamanho da tela, o navegador duplica essa imagem tantas vezes forem necessárias para cobrir todo o espaço da tela.
    Existem vários tamanhos de telas. Lembre-se: imagens grandes demoram à carregar.

    Ir para o topo

    COMO FAZER LETREIROS E LINHAS :

    Para colocar um letreiro na página é utilizado a TAG <MARQUEE>Veja o código:
    <MARQUEE BEHAVIOR=SCROLL DIRECTION=”RIGHT” BGCOLOR=”YELLOW”WIDTH=50%>TEXTO</MARQUEE>
    Resultado

    Onde: DIRECTION= indica a direção “LEFT” ou “RIGHT”.
    BGCOLOR= indica a cor de fundo do letreiro.
    WIDTH= indica a porcentagem que o letreiro ocupará sua página.
    Dica: Se você quiser que o texto pare no final, ao invés de SCROLL escreva SLIDE.
    Outro exemplo: <MARQUEE DIRECTION=”RIGHT”> <FONT SIZE=”3″ COLOR=”RED” FACE=”COMIC SANS MS”>texto</FONT></MARQUEE>
    LINHAS Para inserir uma linha basta colocar a TAG <HR>.
    Não é preciso fechar “</HR>”.
    Atributos da Linha Você pode definir a largura, cor e alinhamento.

    <HR SIZE=10> – Insere uma linha de largura 10 pixels.
    <HR WIDTH=50%> – Insere uma linha que ocupa 50% do espaço em tela.
    <HR WIDTH=50% ALIGN=RIGHT> – Insere uma linha que ocupa 50% do espaço em tela alinhada à Direita. Ou LEFT à esquerda.
    Cor da Linha
    <HR SIZE=1 WIDTH=100% COLOR=”RED”> Veja o resultado:

     

    Ir para o topo

    COMO FAZER TABELAS :

    As tabelas valorizam o Layout das páginas, pois dão harmonia e organização dos textos, imagens, listas, etc. A tabela é representada pelas Tags <TABLE> e </TABLE> e possue os seguintes atributos:
    border=”valor” -Onde o “valor” define a largura da borda (contorno).
    cellspacing=”valor” -Onde o “valor” define o espaço horizontal entre as células.
    cellpadding=”valor” -Onde o “valor” define o espaço vertical entre as células.
    width=”valor” -Onde o “valor” define a largura da tabela em pixels ou em porcentagem.
    height=”valor” -Onde o “valor” define a altura da tabela em pixels ou em porcentagem.
    bgcolor=”#cor” -Define a cor de fundo da tabela.
    bordercolor=”#cor” -Define a cor da borda.
    background=”imagem.jpg” -Define uma imagem de fundo.
    A tabela possui alguns comandos que são:
    <TR> e </TR> -Define uma linha da tabela.
    <TH> e </TH> -Define um cabeçalho da tabela.
    <TD> e </TD> -Define a coluna de informações.
    <CAPTION> e </CAPTION> -Define o título da tabela.
    Veja um exemplo: <TABLE BORDER=”2″ BORDERCOLOR=”RED” CELLSPACING=”10″ CELLPADDING=”6″ WIDTH=”50″ HEIGHT=”20″ BGCOLOR=”YELLOW” <TR> <TD> 1a.coluna </TD> <TD>2a.coluna </TD> <TD> 3a.coluna </TD> </TR> <TR> <TD> 1a.linha </TD> <TD> 1a.linha </TD><TD> 1a.linha </TD> </TABLE> </BR>
    Você pode colocar o código acima em apenas uma linha. Resultado:

    1a.coluna 2a.coluna 3a.coluna
    1a.linha 1a.linha 1a.linha

     

    Para que a tabela fique centralizada, como acima, use a tag <CENTER> antes do código e
    </CENTER> depois do código.
    Também pode-se alinhar o texto dentro das células, utilizando os seguintes atributos:
    Align=”left” -Alinha o texto à esquerda.
    Align=”right” -Alinha o texto à direita.
    Align=”center” -Alinha o texto no centro.
    Valign=”top” -Alinha o texto no topo da célula.

     

    Valign=”middle” -Alinha o texto no meio da célula.
    Valign=”bottom” -Alinha o texto na parte inferior da célula.
    ADICIONANDO UMA LISTA DENTRO DA CÉLULA:
    <TABLE BORDER=”1″ <TR> <TD>lista dentro da célula<UL> <LI>1 item<LI>2 item<LI>3 item</UL> </TD> </TABLE>Resultado:

    lista dentro da célula

    • 1 item
    • 2 item
    • 3 item

    Ir para o topo

    SITE COM FRAMES :

    Resume-se em mais de uma página em uma só tela. É necessário criar três páginas para criar uma página com dois frames, ou seja, uma página principal onde terá as tags referente ao frame que deverá ser salva como: index.html e as outras duas serão abertas dentro desta página principal.
    Exemplo:
    <HTML>
    <HEAD>
    <TITLE> Título da página </TITLE>
    </HEAD>
    <FRAMESET COLS=”20%, 80%”>
    <FRAME SRC=”pagina1.html”>
    <FRAME SRC=”pagina2.html”>
    <NOFRAME>
    </NOFRAME>
    </FRAMESET>
    <BODY>
    </BODY>
    </HTML>
    Os códigos acima só serão colocados na página principal que será salva como “index.html”.
    Normalmente nesse tipo de frame a página1.html é usada para os menus e a página2.html para conteúdo geral do site.
    Neste caso <FRAMESET COLS=”20%, 80%”> o atributo COLS divide as colunas ou seja, 20% do lado esquerdo e 80% do lado direito da página.
    Sempre da esquerda para direita. Então a página1.html ocupará 20% do espaço e a página2.html ocupará 80% (espaço vertical).
    Copie o código acima, cole no Bloco de Notas e salve como “index.html” depois dê 2 cliques nesse arquivo para visualizá-lo aberto em seu browser.
    As tags <NOFRAME> e </NOFRAME> é usado somente para avisar usuário que utiliza browser muito antigo que a página contém frames, que não as conseguirá visualizar (muito difícil acontecer).
    Exemplo 2:
    <HTML>
    <HEAD>
    <TITLE> Título da página </TITLE>

     

    </HEAD>
    <FRAMESET COLS=”20%, 80%”>
    <FRAME SRC=”pagina1.html”>
    <FRAMESET ROWS=”20%, 80%”>
    <FRAME SRC=”pagina3.html”>
    <FRAME SRC=”pagina2.html”>
    <NOFRAME>
    </NOFRAME>
    </FRAMESET>
    <BODY>
    </BODY>
    </HTML>
    Copie o código acima, cole no Bloco de Notas e salve como “index.html” depois dê 2 cliques nesse arquivo para visualizá-lo aberto em seu browser.
    Exemplo 3:
    <HTML>
    <HEAD>
    <TITLE> Título da página </TITLE>
    </HEAD>
    <FRAMESET ROWS=”20%, 80%”>
    <FRAME SRC=”pagina1.html”>
    <FRAME SRC=”pagina2.html”>
    <NOFRAME>
    </NOFRAME>
    </FRAMESET>
    <BODY>
    </BODY>
    </HTML>
    Copie o código acima, cole no Bloco de Notas e salve como “index.html” depois dê 2 cliques nesse arquivo para visualizá-lo aberto em seu browser.

    Ir para o topo

    COMO INSERIR MÚSICA :

    Para inserir uma música em sua página, antes de fechar a tag <HEAD> coloque a tag: <BGSOUND SRC=”musica.mid”>.A Extensão do arquivo pode ser .mid ou .wav.
    Para que a música toque novamente, sempre, acrescente: loop=”-1″ Assim:
    <BGSOUND SRC=”musica.mid” loop=”-1″>
    No exemplo acima a música tocará sem que apareça o “display” na tela. O internauta não terá como parar, pausar ou iniciar.
    Para que apareça o display na tela, como você vê abaixo, coloque está tag:

    * Note que você terá que acionar PLAY para iniciar a música.

    * Para que abra a página já tocando a música, coloque este código:

    * Você ainda pode definir o tamanho do display, assim:

    Ir para o topo

    COMO INSERIR FLASH :

    Para inserir um flash (arquivo com extensão .swf), como abaixo, coloque este código depois da tag <BODY>:

    Note no código acima que você pode especificar o tamanho da imagem. Se você não colocar os atributos “WIDTH e HEIGHT” a imagem ficará no tamanho original (tamanho que foi criada).

    Ir para o topo

    COMO INSERIR VÍDEO :

    Para inserir um vídeo (arquivo com extensão .avi), como abaixo, coloque este código depois da tag <BODY>:

     

    • Note que está no tamanho reduzido, pois foi utilizado “WIDTH e HEIGHT”, mas não é preciso, pois o tamanho é padrão, a menos que lhe seja útil.

    Ir para o topo

    META TAGS :

    Após feito seu site, não basta apenas coloca-lo na internet somente com a tag título,
    <TITLE> Título da página</TITLE>, é preciso que os buscadores, como o Google, Yahoo, etc “achem” o seu site, e outras informações, por isso, você deve inserir as METAS TAGS necessárias, entre <HEAD> e </HEAD> conforme abaixo:

    • <META NAME=”keywords” CONTENT=”palavras chaves”>
      Note que onde está escrito “palavras chaves” você deve colocar as palavras pelo qual os buscadores encontrarão seu site quando procurado na pesquisa pelo Google, Yahoo, por exemplo. As palavras deverão ser escritas em minúsculas e separadas por uma vírgula e logo após um espaço. Ex.: “bonito, fotos, casamento, dicas, downloads, etc”.
    • <META NAME=”Description” CONTENT=”descrição do seu site”>
      Informe do que se trata seu site, coerente com o título e as palavras chaves.
      Ex.: “Site bonito, com fotos de casamento, downloads e dicas”.
    • <META NAME=”AUTHOR” CONTENT=”seu nome”>
      Coloque seu nome, pois é ético e fornece confiança ao site.
    • <META NAME=”ROBOTS” CONTENT=”INDEX, FOLLOW”>Sendo:
      “index,follow” – Indexa a página inicial e todas as páginas nela indicadas.
      “noindex,follow” – Não indexa a página inicial, mas indexa as páginas nela indicada.
      “index,nofollow” – Indexa a página inicial, mas não os links que ela indique.
      “noindex,nofollow” – Não indexa nem a página inicial e nem os links.
      Se é seu primeiro site, está aprendendo, use o primeiro exemplo “index,follow”.
      Aconselho você que fez um site com FRAMES usar “index,follow” somente na página que você salvou como index.html, e nas outra páginas “noindex,nofollow” ou simplesmente não use essa tag nessas páginas.
    • <META HTTP-EQUIV=”CONTENT-LANGUAGE” CONTENT=”pt”>
      Coloque em todas as páginas do site, instruindo os navegadores que seu site é feito em lingua portuguêsa.
    • <META NAME=”GENERATOR” CONTENT=”Microsoft FrontPage 5.0″>
      Indique que programa usou para fazer o site, FrontPage, Bloco de Notas, etc.
    • <META HTTP-EQUIV=”CONTENT-TYPE” CONTENT=”text/html; charset=iso-8859-1″>
      Indica que você escreveu normalmente seus textos nas páginas html (com acentuação, etc) sem usar caracteres especiais (ASCII), e a META TAG acima indica isto (palavras originarias do Latim).
      Existe outras META TAGS, mas as principais e necessárias estão aqui.

    Ir para o topo

    COMO FAZER UM LINK PARA ENVIAR E-MAIL :

    Código:<a href=”mailto:seuemail@provedor.com.br”>Clic Aqui</a>
    Note que ao ser clicado no link (Clic Aqui), abrirá o programa que está instalado no computador, exemplo: Outlook, Incredimail, etc. Porém nem todos tem esses programas instalados, vão buscar seus e-mails diretamente nos sites, motivo pelo qual você deve sempre deixar visível seu endereço de e-mail, como abaixo:
    Meu e-mail é: fulano@provedor.com.br se preferir, Clic Aqui

    Ir para o topo

    COMO FAZER UMA CAIXA DE TEXTO :

    Código:<textarea rows=”5″ cols=”50″ style=”background-color: #ffffff”>ESCREVA AQUI O SEU TEXTO</textarea>
    Fica assim:

     

    Ir para o topo

    COMO FAZER UMA ÂNCORA :

    Repare que ao clicar ir para âncora você foi redirecionado à outro ponto desta página. Isto é chamado “ÂNCORA”.
    Você pode redirecionar o usuário para qualquer ponto de sua página ou para outro ponto de outra página.
    O código de destino, isto é, o ponto de chegada ao ser clicado é:
    Código:<a name=”ancora”>
    E o código do comando “ir para” é:
    Código:<a href=”#ancora”>ir para ancora</a>
    Você pode criar vários pontos, como:
    <a name=”ancora2″> e <a href=”#ancora2″>ir para ancora2</a>
    Para fazer o usuário “Ir para o topo” não é necessário uma âncora como acima, tem um código especial para isto:

    Código: <a href=”#top”>Ir para o topo</a>
    Para ir à outra página:
    Código: <a href=”nomedapagina.html#ancora”>ir para ancora</a>
    Utilizando uma imagem como âncora:
    Código: <a href=”#ancora”><img src=”imagem.jpg”></a>

    cooltext1602634544

    por Paulista Postado em HTML Com a tag