Você está na página 1de 35

Comandos

As etiquetas básicas de HTML, cuja presença é altamente recomendada nas páginas


são:

 <html>: define o início de um documento HTML e indica ao navegador que


todo conteúdo posterior deve ser tratado como uma série de códigos HTML.
 <head>: define o cabeçalho de um documento HTML, que traz informações
sobre o documento que está sendo aberto.
 <body>: define o conteúdo principal, o corpo do documento. Esta é a parte do
documento HTML que é exibida no navegador. No corpo podem-se definir
propriedades comuns a toda a página, como cor de fundo, margens, e outras
formatações.

Dentro do cabeçalho podemos encontrar os seguintes comandos:

 <title>: define o título da página, que é exibido na barra de título dos


navegadores.
 <style>: define formatação em CSS.
 <script>: define programação de certas funções em página com scripts,
podendo adicionar funções de JavaScript.
 <link>: define ligações da página com outros arquivos como feeds, CSS, scripts,
etc.
 <meta>: define propriedades da página, como codificação de caracteres,
descrição da página, autor, etc. São meta informações sobre documento. Tais
campos são muitos usados por mecanismos de busca(como o Google) para
obterem mais informações sobre o documento, a fim de classificá-lo melhor.
Por exemplo, pode-se adicionar o código <meta name="description"
content="descrição da sua página" /> no documento HTML para indicar ao
motor de busca que texto de descrição apresentar junto com a ligação para o
documento. Para o sistema Google, comandos meta como keywords por
exemplo não são utilizadas para indexar páginas. Apenas <title> e a meta
<description> são usadas para descrever a página indexada.
Dentro do corpo podemos encontrar outras várias etiquetas que irão moldar a página,
como por exemplo:

 <h1>, <h2>,... <h6>: cabeçalhos e títulos no documento em diversos tamanhos.


(quanto menor for o número, maior sera o tamanho da letra)
 <p>: novo parágrafo.
 <br>: quebra de linha.
 <table>: cria uma tabela (linhas são criadas com <TR> e novas células com
<TD>. Já os cabeçalhos de coluna são criados com a etiqueta <TH>.)
 <div>: determina uma divisão na página a qual pode possuir variadas
formatações.
 <font>: altera a formatação (fonte, cor e tamanho) de um trecho do texto.
 <b>, <i>, <u> e <s>: negrito, itálico, sublinhado e riscado, respectivamente.
 <img>: imagem.
 <a>: hiper-ligação para um outro local, seja uma página, um e-mail ou outro
serviço.
 <textarea>: caixa de texto (com mais de uma linha); estas caixas de texto são
muito usadas em blogs, elas podem ser auto selecionáveis e conter outros
códigos a serem distribuídos.
 <acronym>: acrónimo (sigla)
 <cite>: citação
 <address>: endereço

Uma propriedade importante dos documentos HTML é a possibilidade de fazer


hiperligações. Para isso usa-se a etiqueta <a> (do inglês, anchor). Esta tem os
atributos: href que define o alvo da hiperligação (que pode ser uma página de Internet,
uma parte da mesma página ou um endereço de email) ou name que define um alvo
nessa página (a onde se pode fazer uma hiperligação usando a etiqueta a com o
atributo href). Exemplos:

 <a href="http://pt.wikipedia.org/">Clique aqui para aceder à página principal


da Wikipédia em português.</a>
 <a name="nome">texto</a>

Em que nome e texto podem ser substituídos por o que se desejar. Depois usa-se <a
href="#nome"> </a> para hiperligar a este "anchor".

As etiquetas <b> e </b> definem um texto em negrito.

Então, se desejássemos introduzir um texto alinhado à esquerda escreveríamos:

<p align="left">Texto alinhado à esquerda</p>

Para uma justificação ao centro:

<p align="center">Texto alinhado ao centro</p>

Para justificar à direita:

<p align="right">Texto alinhado à direita</p>

Esta etiqueta por si só não serve para nada. Tem que estar acompanhada do atributo
align e o que nos permite é alinhar qualquer elemento (parágrafo ou imagem) da
maneira que nós desejarmos.
Assim, o código: <p align="left">paragrafo1</p>
<p align="left">parágrafo2</p>
<p align="left">paragrafo3</p>

É equivalente a:
<div align="left">
<p>paragrafo1</p>
<p>paragrafo2</p>
<p>paragrafo3</p>
</div>

Abaixo, um exemplo de texto em itálico:

<i>Texto em itálico</i>

O HTML nos propõe também para o sublinhado as etiquetas: <u> e </u> (underline)
Combinar etiquetas

<b>Isto só está em negrito<i>e isto em negrito e itálico</i></b>

Existe uma forma clássica e direta de definir cor, tamanho e tipo de letra de um
determinado texto.
Isto faz-se a partir da etiqueta <font> e seu fecho correspondente. Dentro desta
etiqueta devemos especificar os atributos correspondentes a cada um destes
parâmetros que desejamos definir.

Ex:

<font face="Comic SansMS,arial,verdana">Este texto tem outra tipografia</font>

<font size=4>Este texto é maior</font>

<font color="red">Este texto está em vermelho</font>

Nome Color

Aqua

Black

Blue

Fuchsia

Gray

Green

Lime

Maroon

Navy

Olive

Purple
Red

Silver

Teal

White

Yellow

Vamos colocar esta imagem no fundo da página.

A imagem chama-se fundo.jpg e supomos que se encontra no mesmo diretório que a


página. Neste caso se colocaria a seguinte etiqueta <body>

<body background="fondo.jpg">

Exemplo de cor de texto

Vamos ver uma página em que a cor de fundo seja preta, e as cores dos textos e dos
links sejam claros. Colocaremos a cor do texto branca e os links amarelos, mais
ressaltados os que não tenham sido visitados e menos ressaltados os que já tenham
sido. Para isso, escreveríamos a etiqueta body assim:

<body bgcolor="#000000" text="#ffffff" link="#ffff33" alink="ffffcc" vlink="ffff00">

O efeito pode-se ver numa página a parte.

Nota:

Cor Do Texto
Text: Este atributo serve para atribuir a cor do texto da página. Por padrão é o negro.

Ademais da cor do texto, temos três atributos para atribuir a cor dos links da página. Já
devemos saber que os links devem diferenciar-se do resto do texto da página para que
os utilizadores possam identificá-los facilmente. Para isso, eles costumam aparecer
sublinhados e com uma cor mais viva que o texto. Os três atributos são os seguintes:

Link: a cor dos links que não foram visitados.

Vlink: a cor dos links visitados. A letra "v" vem justamente da palavra visitado. É a cor
que terão os links que já visitamos. Por padrão sua cor é roxa. Esta cor deverá ser um
pouco menos viva que a cor dos links normais.

Alink: é a cor dos links ativos. Um link está ativo no preciso momento em que se clica.
Às vezes é difícil perceber quando um link está ativo porque no momento em que se
ativa, é porque o estamos clicando e nesse caso, o navegador abandonará a página
rapidamente e não poderemos ver o link ativo mais que um mínimo instante.

Margens
Com outros atributos da etiqueta <body> podem-se atribuir espaços de margens
nas páginas, o que é muito útil para eliminar as margens em branco que aparecem nos
lados, em cima e embaixo da página. Estes atributos são diferentes para o Internet
Explorer e para o Netscape Navigator, por isso, devemos utilizá-los todos se queremos
que todos os navegadores os interpretem perfeitamente.

Leftmargin: para a indicar a margem nos lados da página. Válido para Internet
Explorer.
Topmargin: para indicar a margem acima e abaixo da página. Para Internet Explorer.

Marginwidth: a contrapartida de leftmargin para Netscape. (margem nos lados)

Marginheight: igual ao topmargin, mas para Netscape. (margem acima e abaixo)

Um exemplo de página sem margem é a própria página de criarweb.com que você está
visitando atualmente. (pelo menos na hora de escrever este artigo). Além disso, vamos
ver outra página sem margens, caso alguém necessite ver o exemplo nestas linhas:
<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0 bgcolor="ffffff">
<table width=100% bgcolor=ff6666><tr><td>
<h1>Olá amigos</h1>
<br>
<br>
Obrigado por me visitar!
</td></tr></table>
</body>
Esta página tem o fundo branco e dentro um painel com o fundo vermelho.
Na página poderemos ver que o painel ocupa o espaço na página sem deixar lugar para
nenhum tipo de margem. Pode-se ver o exemplo em uma página à parte.

Os principais atributos da marca IMG são os seguintes :

 SRC : Indica o lugar da imagem (é obrigatório)


 ALIGN : Especifica o alinhamento da imagem em relação ao texto adjacente.
Pode ter os valores: TOP, MIDDLE, e BOTTOM (em cima, ao meio e debaixo)
 ALT : Permite afixar um texto alternativo quando a imagem não se afixa.
 TITLE : Permite afixar uma bolha informativa aquando passa pela imagem
imagem com o cursor.
 WIDTH : Permite especificar a amplitude da imagem.
 HEIGHT : Permite especificar a altura da imagem.

Atributo Efeito Visual

BACKGROUND="imagem" Mostra a imagem de fundo

BGCOLOR="nome_da_cor ou #XXXXXX" Mostra a cor pedida como fundo

LINK="couleur" Cor das ligações hipertextuais

ALINK="couleur" Cor da ligação activa

VLINK="couleur" Cor das ligações já visitadas

TEXT="couleur" Cor do texto por defeito


DEFINIÇÃO ESTRUTURAL (APARÊNCIA CONTROLADA PELO NAVEGADOR)

Titulo (Heading) <H?></H?> (the spec. defines 6 levels)

Alinhamento do título (Align Heading) <H? ALIGN=LEFT|CENTER|RIGHT></H?>

Divisão (Division) <DIV></DIV>

Alinhamento da divisão(Align Division) <DIV


ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>

Bloco de Código(Block Quote) <BLOCKQUOTE></BLOCKQUOTE> (usualmente


indentado)

Enfase (Emphasis) <EM></EM> (usually displayed as italic)

Forte enfase (Strong Emphasis) <STRONG></STRONG> (usually displayed as bold)

Citação (Citation) <CITE></CITE> (usually italics)

Código (Code) <CODE></CODE> (for source code listings)

Exemplo de saida (Sample Output) <SAMP></SAMP>

Entrada p/ teclado (Keyboard Input) <KBD></KBD>

Variavel (Variable) <VAR></VAR>

Definção (Definition) <DFN></DFN> (ainda não foi largamente


implementado)

Endereço do autor (Author's Address) <ADDRESS></ADDRESS>

Fonte Grande (Large Font Size) <BIG></BIG>

Fonte Pequena (Small Font Size) <SMALL></SMALL>

FORMATAÇÃO DA APARÊNCIA (O autor especifica a aparência do texto)

Negrito (Bold) <B></B>

Itálico (Italic) <I></I>


Sublinhado (Underline) <U></U> (ainda não foi largamente implementado)

Riscado (Strikeout) <STRIKE></STRIKE> (ainda não foi largamente


implementado)

Riscado (Strikeout <S></S> (ainda não foi largamente implementado)

Subscrito (Subscript) <SUB></SUB>

Sobrescrito (Superscript) <SUP></SUP>

Tipográfico (Typewriter) <TT></TT> (espaçamento constante como o de uma


máquina de escrever)

Preformatado (Preformatted) <PRE></PRE> (display text spacing as-is)

Largura (Width) <PRE WIDTH=?></PRE> (em caracteres)

Centralizar (Center) <CENTER></CENTER> (for both text and images)

Cintilante (Blinking) <BLINK></BLINK>

Tamanho da fonte (Font Size) <FONT SIZE=?></FONT> (varia de 1-7)

Mudar tamanho da fonte(Change Font Size)<FONT SIZE="+|-?"></FONT>

Tamanho Básico (Base Font Size) <BASEFONT SIZE=?> (de 1-7; "default" é 3)

Cor da fonte (Font Color) <FONT COLOR="#$$$$$$"></FONT>

Tipo de Fonte (Select Font) <FONT FACE="***"></FONT>

Multiplas Colunas (Multi-Column) <MULTICOL COLS=?></MULTICOL>

Gutter (Column Gutter) <MULTICOL GUTTER=?></MULTICOL> (espaço


entre colunas)

Largura da coluna (Column Width) <MULTICOL WIDTH=?></MULTICOL>

Espaçador (Spacer) <SPACER>

Tipo de espaçador(Spacer Type) <SPACER TYPE=horizontal|vertical|block>


Tamanho do espaço(Size) <SPACER SIZE=?>

Dimenções do espaço (Dimensions) <SPACER WIDTH=? HEIGHT=?>

Alinhamento doespaço (Alignment) <SPACER ALIGN=left|right|center>

ELOS (LINKS) E GRÁFICOS

Ligar a alguma coisa (Link Something ) <A HREF="URL"></A>

A local específico (Link to Target) <A HREF="URL#***"></A> (se em outro


documento)

<A HREF="#***"></A> (se no mesmo documento)

Janela específica (Target Window) <A HREF="URL" TARGET="***"></A> (usado em


frames)

Define um local (Define Target) <A NAME="***"></A>

Exibe Imagem (Display Image) <IMG SRC="URL">

Alinhamento (Alignment) <IMG SRC="URL"


ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT>

Centralizar (center) <center></center>

Alternate <IMG SRC="URL" ALT="***"> (se a imagem não for


exibida)

Dimensões (Dimensions) <IMG SRC="URL" WIDTH=? HEIGHT=?> (em pixeis)

Borda (Border) <IMG SRC="URL" BORDER=?> (em pixeis)

Espaço ao redor (Runaround Space) <IMG SRC="URL" HSPACE=? VSPACE=?> (em


pixeis)

Proxi de baixa Resolução(Low-Res Proxy)<IMG SRC="URL" LOWSRC="URL">

Mapa de Imagem(Imagemap) <IMG SRC="URL" ISMAP> (requires a script)


Mapa de Imagem(Imagemap) <IMG SRC="URL" USEMAP="URL">

Mapa (Map) <MAP NAME="***"></MAP> (describes the map)

Seção(Section) <AREA SHAPE="RECT" COORDS=",,,"


HREF="URL"|NOHREF>

Extrair Cliente(Client Pull) <META HTTP-EQUIV="Refresh" CONTENT="?;


URL=URL">

Incrustar Objeto( Embed Object <EMBED SRC="URL"> (insere o objeto na pagina)

Tamnho do Objeto( Object Size) <EMBED SRC="URL" WIDTH=? HEIGHT=?>

DIVISORES

Paragrafo (Paragraph) <P></P> (o comando de fechamento pode ser


desnecessário)

Alinhar o texto(Align Text) <P ALIGN=LEFT|CENTER|RIGHT></P>

Quebrade linha(Line Break) <BR> (Retorna para o início da próxima linha)

Limpar o texto(Clear Textwrap) <BR CLEAR=LEFT|RIGHT|ALL>

Linha horizontal(Horizontal Rule) <HR>

Alinhamento(Alignment) <HR ALIGN=LEFT|RIGHT|CENTER>

Espessura (Thickness) <HR SIZE=?> (em pixeis)

Largura(Width) <HR WIDTH=?> (em pixeis)

Largura em porcentagem (Width Percent) <HR WIDTH="%"> (as a percentage of page


width)

Linha sólida (Solid Line) <HR NOSHADE> (without the 3D cutout look)

Não Quebrar linha (No Break) <NOBR></NOBR> (prevents line breaks)

Não quebrar palavra(No Word Break) <WBR> (where to break a line if needed)
LISTAS (As listas podem ser entremeadas)

Sem ordem (Unordered List) <UL><LI></UL> (<LI> before each list item)

Compacta (Compact) <UL COMPACT></UL>

Bolas (Bullet Type) <UL TYPE=DISC|CIRCLE|SQUARE> (para toda a lista)

<LI TYPE=DISC|CIRCLE|SQUARE> (este e seguintes)

Lista ordenada (Ordered List) <OL><LI></OL> (<LI> antes de cada item da lista)

Lista compacta (Compact) <OL COMPACT></OL>

Numerada (Numbering Type) <OL TYPE=A|a|I|i|1> (para toda a lisat)

<LI TYPE=A|a|I|i|1> (este item e seguintes)

Numero inicial (Starting Number) <OL START=?> (para toda a lista)

<LI VALUE=?> (este itém e seguintes)

Lista de definição(Definition List) <DL><DT><DD></DL> (<DT>=term,


<DD>=definition)

Definição-compacta (Compact) <DL COMPACT></DL>

Menu (Menu List) <MENU><LI></MENU> (<LI> antes de cada item da lista)

Menu Compacta (Compact) <MENU COMPACT></MENU>

Lista de Diretório(Directory List) <DIR><LI></DIR> (<LI> before each list item)

Lista de Diretório Compacta) (Compact) <DIR COMPACT></DIR>

FUNDO (BACKGROUNDS) E CORES

Titulo do fundo (Tiled Bkground) <BODY BACKGROUND="URL">


Cor de fundo(Bkground Color) <BODY BGCOLOR="#$$$$$$"> (a ordem é
vermelho/verde/azul)

Cor do texto(Text Color) <BODY TEXT="#$$$$$$">

Cor dos elos(Link Color) <BODY LINK="#$$$$$$">

Elo visitado(Visited Link) <BODY VLINK="#$$$$$$">

Elo ativo(Active Link <BODY ALINK="#$$$$$$">

FORMULÁRIOS (geralmente requerem um script no seu servidor)

Define o formulário <FORM ACTION="URL" METHOD=GET|POST></FORM>

Arquivo(File) Upload <FORM ENCTYPE="multipart/form-data></FORM>

Campo de entrada (Input Field) <INPUT


TYPE="TEXT|PASSWORD|CHECKBOX|RADIO| IMAGE|HIDDEN|SUBMIT|RESET">

Nome do campo (Field Name) <INPUT NAME="***">

Valor do campo (Field Value) <INPUT VALUE="***">

Assinalado(Checked?) <INPUT CHECKED> (para checkboxes e radio boxes)

Tamanho do campo(Field Size) <INPUT SIZE=?> (em caracteres)

Comprimento máximo(Max Length) <INPUT MAXLENGTH=?> (em caracteres)

Seleçionar (Selection List) <SELECT></SELECT>

Nomeda lista(Name of List) <SELECT NAME="***"></SELECT>

Número de opções(# of Options?) <SELECT SIZE=?></SELECT>


Escolha múltipla(Multiple Choice) <SELECT MULTIPLE> (pode selecionar mais de
uma)

Opção(Option) <OPTION> (itens que podem ser selecionados)

Opção padrão(Default Option) <OPTION SELECTED>

Tamanho da Caiza de entrada (Box Size) <TEXTAREA ROWS=? COLS=?></TEXTAREA>

Nome da caixa (Name of Box) <TEXTAREA NAME="***"></TEXTAREA>

Borda (Wrap Text) <TEXTAREA


WRAP=OFF|VIRTUAL|PHYSICAL></TEXTAREA>

ex

http://www.w3schools.com/html/html_forms.asp

TABELAS

Define a Tabela <TABLE></TABLE>

Borda da Tabela (Table Border) <TABLE BORDER></TABLE> [ligado(on)


ou não (off)]

Borda da Tabela (Table Border) <TABLE BORDER=?></TABLE> (você


pode fixar o valor)

Espacamento da célula(Cell Spacing) <TABLE CELLSPACING=?>

Cell Padding <TABLE CELLPADDING=?>

Largura desejada(Desired Width) <TABLE WIDTH=?> (em pixeis)

Largura em porcentagem(Width Percent) <TABLE WIDTH=%> (percentagem da


pagina)

Linha da tabela (Table Row) <TR></TR>


Alinhamento(Alignment) <TR ALIGN=LEFT|RIGHT|CENTER

Alinhamento vertical (VALIGN=TOP|MIDDLE|BOTTOM>

Célula da tabela(Table Cell) <TD></TD> (must appear within table rows)

Alinhamento na célula(Alignment) <TD ALIGN=LEFT|RIGHT|CENTER


VALIGN=TOP|MIDDLE|BOTTOM>

Não quebrar linhas(No linebreaks) <TD NOWRAP>

Expandir colunas (Columns to Span) <TD COLSPAN=?>

Linhas para expandir (Rows to Span) <TD ROWSPAN=?>

Largura desejada(Desired Width) <TD WIDTH=?> (em pixeis)

Largura em %(Width Percent) <TD WIDTH="%"> (percentagem da tabela)

Côr da Célula (Cell Color) <TD BGCOLOR="#$$$$$$">

Título da tabela(Table Header) <TH></TH> (Exibido como dade,centralinhado e


emnegrito)

Alinhamento do título(Alignment) <TH ALIGN=LEFT|RIGHT|CENTER


VALIGN=TOP|MIDDLE|BOTTOM>

Não quebrar linhas(No Linebreaks) <TH NOWRAP>

Colunas p/Expandir(Columns to Span) <TH COLSPAN=?>

Linhas a Expandir (Rows to Span) <TH ROWSPAN=?>

Largura desejada (Desired Width) <TH WIDTH=?> (em pixeis)

Largura em % (Width Percent) <TH WIDTH="%"> (percentagem da tabela)

Côr da célula (Cell Color) <TH BGCOLOR="#$$$$$$">

Captação(Table Caption) <CAPTION></CAPTION>


Alinhamento(Alignment) <CAPTION ALIGN=TOP|BOTTOM> (above/below
table)

MOLDURAS(FRAMES) [define e manipula especificas regiões da tela]

Nome do Documento(Frame Document) <FRAMESET></FRAMESET> (em lugar


de <BODY>)

Altura das linha(Row Heights) <FRAMESET ROWS=,,,></FRAMESET> (pixeis ou


%)

Altura em linhas(Row Heights) <FRAMESET ROWS=*></FRAMESET> (* =


tamanho relativo)

Largura das Colunas(Column Widths) <FRAMESET COLS=,,,></FRAMESET> (pixeis ou


%)

Largura das Colunas(Column Widths) <FRAMESET COLS=*></FRAMESET> (* =


tamanho relativo)

Bordas(Borders) <FRAMESET FRAMEBORDER="yes|no">

Largura da Borda(Border Width <FRAMESET BORDER=?>

Côr da Borda(Border Color) <FRAMESET BORDERCOLOR="#$$$$$$">

Define a Moldura(Define Frame) <FRAME> (conteudo de uma moldura específica)

Exibe Documento(Display Document) <FRAME SRC="URL">

Nome da Moldura(Frame Name) <FRAME


NAME="***"|_blank|_self|_parent|_top>

Largurada margem(Margin Width) <FRAME MARGINWIDTH=?> (margens


esquerdaedireita)

Altura da margem(Margin Height) <FRAME MARGINHEIGHT=?> (margens superior e


inferior)

Barra de Seleção(Barra Scrollbar?) <FRAME SCROLLING="YES|NO|AUTO">


Não alterar o tamanho(Not Resizable) <FRAME NORESIZE>

Bordas (Borders) <FRAME FRAMEBORDER="yes|no">

Côr da Borda(Border Color) <FRAME BORDERCOLOR="#$$$$$$">

Conteúdo sem molduras(Unframed Content) <NOFRAMES></NOFRAMES> (para


navegadores que não aceitam "frames")

JAVA

Applet <APPLET></APPLET>

Nome do arquivo(File Name) <APPLET CODE="***">

Parametros(Parameters) <APPLET PARAM NAME="***">

Localização(Location) <APPLET CODEBASE="URL">

Identificador(Identifier) <APPLET NAME="***"> (para referencias)

Texto alternativo(Alt Text) <APPLET ALT="***"> (para navegadores que não


aceitam Java)

Alinhamento(Alignment) <APPLET ALIGN="LEFT|RIGHT|CENTER">

Tamanho(Size) <APPLET WIDTH=? HEIGHT=?> (em pixeis)

Espaçamento(Spacing) <APPLET HSPACE=? VSPACE=?> (em pixeis)

DIVERSOS

Comentários (Comment) <!-- *** --> (não é exibido pelo navegador)

Prólogo (Prologue) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML


3.2//EN">

Pesquisavel(Searchable) <ISINDEX> (indica um indice de busca)

Pronto(Prompt) <ISINDEX PROMPT="***"> (Texto para a entrada de


dados)
Envia pesquisa (Send Search) <A HREF="URL?***"></a> (use uma questão real)

URL deste Arquivo(of This File) <BASE HREF="URL"> (deve estar no cabeçalho)

Nome básico da janela <BASE TARGET="***">(deve estar no cabeçalho)

Relasionamento (Relationship) <LINK REV="***" REL="***" HREF="URL">


(deve estar no cabeçalho)

Informação(Meta Information) <META> (deve estar no cabeçalho)

Páginas de Estilo(Style Sheets) <STYLE></STYLE> (ainda não é amplamente


suportado)

Scripts <SCRIPT></SCRIPT> (ainda não é amplamente suportado)

Fim de nota

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.
C O R E S NO SEU SITE:

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

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>

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>.

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>

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.

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.

COMO INCLUIR IMAGENS NO SITE :

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 levará
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">

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="http://www.extremaonline.com">Conheça Extrema-MG</a> Resultado:

Conheça Extrema-MG

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="http://www.extremaonline.com" 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

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://www.extremaonline.com"><IMG SRC="local, nome da imagem +
extensão"></a> Sendo que:

http://www.extremaonline.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.
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.

LISTAS:

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.

COMO INSERIR IMAGEM DE FUNDO NO SEU SITE:

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.

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:

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
percentagem.
height="valor" -Onde o "valor" define a altura da tabela em pixels ou em
percentagem.
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

SITE COM FRAMES :

Resume-se em mais de uma página numa 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 utilizador 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.

COMO INSERIR MÚSICA NO SITE:

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:
<EMBED SRC="musica.mid" AUTOSTART="FALSE" LOOP="TRUE">
* 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:


<EMBED SRC="musica.mid" AUTOSTART= LOOP="TRUE">
* Você ainda pode definir o tamanho do display, assim:
<EMBED SRC="musica.mid" AUTOSTART= LOOP="TRUE" WIDTH=145 HEIGHT=25>

COMO INSERIR FLASH NO SITE:

Para inserir um flash (arquivo com extensão .swf), como abaixo, coloque este código
depois da tag <BODY>:
<OBJECT CLASSID="FLASH"
CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/
flash/swflash.cab#version=6,0,0,0 "> <EMBED SRC="arquivo.swf" WIDTH="200"
HEIGHT="200" TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"</EMBED>
</OBJECT>

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).

COMO INSERIR VÍDEO NO SITE:

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

<>

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.

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 motores de busca, 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 portuguesa.
<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.

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

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:

ESCREVA AQUI O SEU TEXTO

COMO FAZER UMA ÂNCORA:


Repare que ao clicar ir para âncora você foi redirecionadopara outro ponto desta
página. Isto é chamado "ÂNCORA".
Você pode redirecionar o utilizador 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 utilizador "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>

Você também pode gostar