Escolar Documentos
Profissional Documentos
Cultura Documentos
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".
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>
<i>Texto em itálico</i>
O HTML nos propõe também para o sublinhado as etiquetas: <u> e </u> (underline)
Combinar etiquetas
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:
Nome Color
Aqua
Black
Blue
Fuchsia
Gray
Green
Lime
Maroon
Navy
Olive
Purple
Red
Silver
Teal
White
Yellow
<body background="fondo.jpg">
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:
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:
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.
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.
Tamanho Básico (Base Font Size) <BASEFONT SIZE=?> (de 1-7; "default" é 3)
DIVISORES
Linha sólida (Solid Line) <HR NOSHADE> (without the 3D cutout look)
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)
Lista ordenada (Ordered List) <OL><LI></OL> (<LI> antes de cada item da lista)
ex
http://www.w3schools.com/html/html_forms.asp
TABELAS
JAVA
Applet <APPLET></APPLET>
DIVERSOS
URL deste Arquivo(of This File) <BASE HREF="URL"> (deve estar no cabeçalho)
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:
Você pode escrever as cores (em inglês) ou colocar seu código. Porém, para escrever
só é aceito 16 cores, que são:
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>
Você também pode usar a tag <FONT> para definir o tamanho, bem como sua cor e
tipo da fonte.
<B>Texto em Negrito</B>
<U>Texto Sublinhado</U>
<I>Texto em Itálico</I>
<CENTER>Texto Centralizado</CENTER>
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.
Para alinhar os parágrafos basta incluir depois do "P" o parâmetro "align + tipo de
alinhamento", conforme abaixo:
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
É 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:
local é caso você tenha armazenado suas imagens em uma pasta. Ex. Pasta
"Imagens".
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:
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
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.
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.
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:
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
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.
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 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).
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:
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".