Página Principal | Conceitos Iniciais | Adquira Suas Ferramentas | Preparativos |
Monte Sua Página | Ponha sua Página na Internet | Divulgue sua Página | Dicas para Evoluir |
![]() |
Ato | INCLUIR COR DE FUNDO |
---|---|
Linha a ser alterada | <body> |
Linha após alteração | <body bgcolor=FFFF80> |
![]() | |
Comentários |
O atributo responsável pela mudança de cor de fundo é o bgcolor. Cada cor possue um
código hexadecimal (utiliza os algarismos 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F)
que a identifica. No nosso exemplo, utilizamos o código FFFF80, que corresponde ao
amarelo claro. Você pode optar entre bater o código ou bater a palavra correspondente a cor. Em outras palavras, você pode digitar o código FFFF80 ou escrever a palavra Yellow no lugar dele.
Veja a tabela de cores, clicando aqui
No HTMLED32 você pode escolher uma cor sem precisar saber seu código. Para tanto proceda assim. Vá ao menu Element, escolha Color Chooser..., clique na cor que deseja (ou procure outras no botão Definir cores personalizadas). Dê OK. O programa coloca o código onde o cursor estiver piscando. |
![]() |
Ato | INSERIR BACKGROUND |
---|---|
Linha a ser alterada | <body bgcolor=FFFF80> |
Linha após alteração | <body bgcolor=FFFF80 background="b15.gif"> |
![]() | |
Comentários |
O atributo responsável pelo background é o background. A figura escolhida para
compor o fundo foi b15.gif. Contudo você pode escolher qualquer outra, desde que ela
esteja no mesmo diretório (no nosso caso C:\APAGE) onde está o arquivo
pagina.html. É importante que você digite o nome do arquivo de imagem corretamente e seguido de sua extensão. Embora a cor de fundo fique por baixo do background, elá aparecerá primeiro quando sua página estiver sendo carregada. Portanto, se for colocar cor de fundo, harmonize-a com as palavras e figuras de sua página, para que estas não fiquem invisíveis ou difíceis de se ver. |
![]() |
Ato | INSERIR FIGURA |
---|---|
Linha a ser incluída | <img src="ani10.gif"> |
![]() | |
Comentários |
O tag responsável pela inserção de imagens e vídeos é o IMG. Quando se quer
inserir uma imagem, usa-se o atributo SRC seguido no nome do arquivo.
Nunca é demais lembrar que o arquivo de imagem a ser inserido deve estar, também, dentro do diretório C:\APAGE.
As imagens GIFS são de dois tipos: normais e animadas. O tag não faz distinção entre estes dois tipos de arquivos, basta colocar a extensão .GIF e o programa identificará qual é qual. Os tipos de arquivos de imagens mais aceitos sao o GIF e o JPEG (JPG). Procure inserir arquivos de imagens pequenos (2 a 40 KB). |
![]() |
Ato | ALINHAR IMAGEM |
---|---|
Linha a ser alterada | <img src="ani10.gif"> |
Linha após alteração | <p align="center"><img src="ani10.gif"></p> |
![]() | |
Comentários |
O tag responsável pelo alinhamento é o P, seguido do seu atributo ALIGN. As
opções CENTER, LEFT OU RIGHT são associadas ao atributo ALIGN, conforme se
queira alinhar a figura ao centro, esquerda ou direita. Observe que o tag P pede o tag de fechamento /P. Tudo que estiver entre eles, não apenas imagens, mas também textos, vídeos, tabelas...será alinhado, conforme a opção selecionada para o atributo align. O tag <P> pode ser usado também na forma simples (<P>). Neste caso, ele não exige o fechamento. O <P> simples abre uma linha em branco, iniciando um novo parágrafo. O tag <CENTER> e seu fechamento </CENTER> também centralizam o que estiver entre eles. |
![]() |
Ato | ALTERAR AS CARACTERÍSTICAS DA IMAGEM |
---|---|
Linha a ser alterada | <p align="center"><img src="ani10.gif"></p> |
Linha após alteração | <p align="center"><img src="ani10.gif" alt="foguinho" border="4" width="20" height="40" vspace="5" hspace="5"></p> |
![]() | |
Comentários |
Foram apenas adicionados os seguintes atributos ao tag IMG:
ALT - mostra o nome que aparecerá antes que a figura seja carregada ou quando o mouse
é passado por sobre ela. Serve para ajudar o usuário a prever que imagem irá aparecer. |
![]() |
Ato | INCLUIR LINHA SEPARADORA |
---|---|
Linhas a serem incluídas | <hr> e <hr align="center" size=5 width=50% noshade> |
![]() | |
Comentários |
HR inclui uma linha na página. Esta linha pode ser redimensionada e realinhada
com os seguintes atributos e opções: SIZE - dado em pixels. Altera a espessura da linha. WIDTH - define a largura da linha, em pixels ou em porcentagem em relação à largura da página. ALIGN - posiciona a linha no centro (center), esquerda (left) ou direita (right) da página. NOSHADE - retira a sombra da linha. |
![]() |
Ato | INCLUIR TÍTULO DA PÁGINA |
---|---|
Linha a ser incluída | <center><h1> TESTE PAGE</h1></center> |
![]() | |
Comentários |
Uma das formas de se escrever títulos em páginas é utilizando os tags <Hn>
e </Hn>, onde n é um número que varia de 1 a 6. Quanto menor for n,
maior serão as letras. Observe que o título está entre os tags <center> e </center>, indicando que está centralizado na página. |
![]() |
Ato | MUDAR A COR DO TEXTO |
---|---|
Linha a ser alterada | <body bgcolor=FFFF80 background="b15.gif"> |
Linha após alteração | <body bgcolor=FFFF80 background="b15.gif" text="blue"> |
![]() | |
Comentários | O atributo TEXT é responsável pela cor do texto da página. Ele deve ser colocado no tag BODY. NO nosso exemplo, escolhemos a cor azul para o texto. Assim tudo que você digitar sairá azul, a menos que especifique o contrário. |
![]() |
Ato | INCLUIR UM TEXTO |
---|---|
Linhas a serem incluídas | My Heart Will Go On (Love Theme From 'titanic') Every night in my dreams I see you, I feel you That is how I know you go on. Far across the distance and spaces between us You have come to show you go on. Near,Far,wherever you are I believe that the heart does go on Once more, you opened the door And you're here in my heart, and my heart will go on and on. Love can touch us one time and last for a lifetime And never let go till we're gone. Love was when I loved you, one true time I hold to In my life we'll always go on. Near, far, wherever you are I believe that the heart does go on Once more, you opened the door And you're here in my heart, and my heart will go on and on. You're here, there's nothing I fear And I know that my heart will go on. We'll stay, forever this way You are safe in my heart and my heart will go on and on. |
![]() | |
Comentários |
Não há segredo. Em qualquer lugar (entre os tags <BODY> e </BODY>) que
for digitado um texto, ele aparecerá no browser. O texto é automaticamente ajustado para
que caiba na página. A cor do texto será aquela escolhida no atributo TEXT do tag
BODY. Não é necessário você escrever o texto acima linha por linha. Selecione-o. Clique como o botão direito do mouse e copie-o. |
![]() |
Ato | INCLUIR UM TEXTO PRÉ-FORMATADO |
---|---|
Linha a ser incluída |
<PRE> My Heart Will Go On (Love Theme From 'titanic') Every night in my dreams I see you, I feel you That is how I know you go on. Far across the distance and spaces between us You have come to show you go on. Near,Far,wherever you are I believe that the heart does go on Once more, you opened the door And you're here in my heart, and my heart will go on and on. Love can touch us one time and last for a lifetime And never let go till we're gone. Love was when I loved you, one true time I hold to In my life we'll always go on. Near, far, wherever you are I believe that the heart does go on Once more, you opened the door And you're here in my heart, and my heart will go on and on. You're here, there's nothing I fear And I know that my heart will go on. We'll stay, forever this way You are safe in my heart and my heart will go on and on. </PRE> |
![]() | |
Comentários | Um texto pré-formatado é aquele que mantém suas características (parágrafos, espaços) quando é inserido na página. Para inserir um texto pré-formatado, coloque-o entre os tags <PRE> e </PRE>, como é mostrado no exemplo acima. |
![]() |
Ato | COLOCAR MARGEM NO TEXTO |
---|---|
Linhas a serem incluídas |
<BLOCKQUOTE> <PRE> Every night in my dreams I see you, I feel you That is how I know you go on. Far across the distance and spaces between us You have come to show you go on. </PRE> </BLOCKQUOTE> |
![]() | |
Comentários | Os textos colocados entre os tags <BLOCKQUOTE> e </BLOCKQUOTE> são distanciados da margem esquerda. Você pode colocar vários <BLOCKQUOTE> antes do texto. Quanta mais deles, mais o texto se distancia da margem esquerda. |
![]() |
Ato | ALTERAR AS CARACTERÍSTICAS DO TEXTO |
---|---|
Linhas a serem incluídas |
<BLOCKQUOTE> <PRE> <FONT size="3" color="#FF0080" face=ARIAL> Every night in my dreams I see you, I feel you That is how I know you go on. Far across the distance and spaces between us You have come to show you go on. </FONT> </PRE> </BLOCKQUOTE> |
![]() | |
Comentários |
Os tags <FONT> e </FONT> servem para modificar o texto que estiver
entre eles. Seus atributos são:
SIZE - modifica o tamanho do texto. Varia entre -7 e 7 em relação ao tamanho definido
em <BASEFONT>. |
![]() |
Ato | INCLUIR LINKS | ||
---|---|---|---|
Lnhas a serem incluídas |
<a name="topo"></a> | ||
![]() | |||
Comentários |
LINKS OU HIPERLINKS são aquelas palavras sublinhadas que você vê nas páginas da
Internet. Ao passar o ponteiro do mouse sobre um link, a setinha torna-se uma mãozinha.
Quando você clica em um link é levado para outro lugar. Este outro lugar poder
ser
Os tags responsáveis pela inclusão de links são <A> e </A>. HREF é o atributo que contém o endereço para o qual o link aponta, isto é, um dos três lugares citados acima. Quando se quer que o link leve para um outro ponto qualquer da mesma página onde este link está, você deve primeiramente nomear este ponto. A nomeação é feita com o atributo NAME, o qual é utilizado dentro do tag <A>. No exemplo acima fizemos um link que aponta para o topo da página. As duas linhas responsáveis por isso são: <a name="topo"></a> A segunda linha constrói o seu link. Observe que o usuário só verá o que estiver entre o tag <a> inicial e seu fechamento </a>. Esta segunda linha, resumindo, aponta para o local que foi nomeado de "topo", sendo que a frase que o usuário verá é "Topo da Página". Agora, atenção!! Nunca esqueça o simbolo "#" (cerquilha) antes da palavra que designa o local para onde o link aponta. O cerquilha indica que o link aponta para um determinado local de uma página. Sem o cerquilha, o programa entende que você está apontando para um arquivo html. Se você quisesse apontar para um determinado local de uma página que não seja aquela onde está o link em questão, você deve digitar seu comando assim: <a href="pagina.html#local"></a> Experimente.
<a href="marta.html" target=window>Veja a Marta, a barata internauta </a> Lembra que o código fonte que dará origem a sua página foi salvo como pagina.html? Pois bem, para que o link que aponta para marta.html funcione, estes dois arquivos html devem estar no mesmo diretório. Observe que, além do atributo href, existe o atributo target (alvo, em inglês). Target="window" ou target="_blank" significa que o link abrirá um nova janela quando for acionado. Experimente:
<a href="http://www.music.sony.com/Music/ArtistInfo/CelineDion/"> Observe que foi incluída uma figura no link. Quando o usuário clicar nesta figura ou no nome "Celine Dion", ele será remetido à página citada. Para que isto funcione deve ser respeitada a seguinte seqüência de tags, durante a confecção do link: <a><img>Celine Dion</a> Também é importante que o endereço associado ao atributo HREF esteja impecavelmente correto.Observação: os tags <b> e </b> colocam em negrito o texto que estiver entre eles. Os tags <i> e </i> formatam o texto para itálico. Você pode usar os dois ao mesmo tempo.
|
![]() |
Ato | ALTERAR AS CORES DOS LINKS | |||
---|---|---|---|---|
Linha a ser alterada | <body bgcolor=FFFF80 background="b15.gif" text=blue> | |||
Linha após alteração | <body bgcolor=FFFF80 background="b15.gif" text=blue link=blue alink=orange vlink=gray> | |||
![]() | ||||
Comentários |
Você já percebeu que, quando você clica em um link, ele muda de cor? Antes de clicar no link, ele está de uma cor. No exato segundo em que você clica nele, o link toma outra cor. Por último, depois de clicado, o link assume uma terceira cor. Observe esse fato nos três links abaixo.
|
![]() |
Ato | LISTAS NÃO-ORDENADAS | ||
---|---|---|---|
Linhas a serem incluídas |
Lista não-ordenada: <ul type="square"> <li>Kate Winslet; <li>Leonardo DiCaprio; <li>Titanic. </ul> <hr> |
||
![]() | |||
Comentários |
O tag <ul> indica o início de uma lista não-ordenada
(unordered list), enquanto que o </ul>, o seu fim. O atributo TYPE indica o tipo de marcador que antecipará cada item da lista. Este marcador pode ser uma bola cheia (disc), um quadrado cheio (square) ou uma circunferência (circle). No nosso exemplo utilizamos o square. O tag <li> indica um item da lista (list item). Na lista do nosso exemplo usamos três nomes como itens. Porém, estes itens podem ser os mais diversos. Veja o exemplo abaixo:
|
![]() |
Ato | LISTAS ORDENADAS | ||
---|---|---|---|
Linhas a serem incluídas |
Lista ordenada: <ol type="1"> <li>Kate Winslet; <li>Leonardo DiCaprio; <li>Titanic. </ol> <hr> |
||
![]() | |||
Comentários |
O tag <ol> indica o início de uma lista ordenada
(ordered list), enquanto que o </ol>, o seu fim. O atributo TYPE indica o tipo de numeração que antecipará cada item da lista. As opçoes para o type são "1" (ordenação com números), "A" (ordenação com letras maiúsculas), "a" (ordenação com letras minúsculas), "I" (ordenação com algarismos romanos maiúsculos) e, finalmente, "i" (ordenação com algarismos romanos minúsculos). No nosso exemplo utilizamos a opção "1". Da mesma forma que na lista não-ordenada, o tag <li> indica um item da lista (list item). Nas listas ordenadas, os itens podem ser também de diversos tipos:
|
![]() |
Ato | LISTAS DE DEFINIÇÕES | |
---|---|---|
Linhas a serem incluídas |
<b>Lista de definições:</b> <dl> <dt>Cenário <dd>Navio <dd>Cais <dt>Personagens <dd>Atores <dd>Atrizes <dd>Figurantes </dl> <hr> |
|
![]() | ||
Comentários |
O tag <dl> indica o início de uma lista de definições
(definition list), enquanto que o </dl>, o seu fim. O tag <dt> indica um termo que será definido (definition term). O tag <dd> indica a definição do termo (definition data). Veja um exemplo:
|
![]() |
Ato | LISTAS DE MENUS E DIRETÓRIOS |
---|---|
Linhas a serem incluídas |
<b>Lista tipo menu:</b> <menu> <li>Animal</li> <menu> <li>Vertebrados</li> <menu> <li>Mamíferos</li> <menu> <li>Homem</li> </menu> <li>Aves</li> <li>Peixes</li> </menu> <li>Invertebrados</li> </menu> <li>Mineral</li> <li>Vegetal</li> <menu> <li>Angiospermas</li> <li>Gimnospermas</li> </menu> </menu> <hr> |
![]() | |
Comentários |
Achou complicado o código acima? O importante, quando se está mexendo com os tags
<menu> e <dir> e seus respectivos fechamentos
</menu> e </dir>, é observar a hirerquia desses tags. Observe
que para cada abre-tag corresponde um fecha-tag. No código acima, os tags correpondentes
(um que abre e outro que fecha) estão colocados à mesma distância da margem esquerda,
para facilitar a visualização. Esse abre-fecha de tags é o que determina a árvore de
elementos no menu ou diretório. Você pode escrever o código como acima, ou colocar
tudo à mesma distância da margem esquerda. Porém, a identação, como mostrada acima,
facilita a compreensão e edição do menu/diretório. Os tags <menu> e <dir> têm a mesma função. Você pode optar tanto por um quanto por outro. |
![]() |
Ato | TABELAS | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Linhas a serem incluídas |
<p align="center"> <table border="4" cellpadding="5" cellspacing="3" bgcolor="yellow"> <caption align="top">TESTE</caption> <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> </tr> <tr> <th>E</th> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <th>F</th> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <th>G</th> <td>7</td> <td>8</td> <td>9</td> </tr> </table> </p> |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
A estrutura acima parece bem difícil de digitar, não? Mas você não precisa se preocupar. O editor HTMLED32, ou outro editor HTML que esteja usando, faz isso pra você em 5 segundos. Mesmo tabelas gigantes são feitas istantaneamente. O trabalho que você terá será digitando o conteúdo das células. O conteúdo do nosso exemplo acima são os caracteres A, B, C, D, E, F, G, 1, 2, 3, 4, 5, 6, 7, 8 e 9. Para você criar uma estrutura coma a acima, vá ao menu Element e escolha Table Designer... Como você pode observar, na confecção de tabelas são usados os seguintes tags:
O tag <table> indica o início de uma tabela. As características que a tabela vai ter são definidas através de atributos que são colocados dentro deste tag. Os atributos de <table> são:
Os tags <tr> e </tr> indicam o começo e o fim de uma linha. Se um determinado atributo for aplicadao a um tag <tr>, esse atributo incidirá somente sobre as células que estão encerradas nessa linha. Os atributos desse tag são:
Os tags <th> e </th>, <td> e </td> indicam o começo e o fim de uma célula, sendo que o conteúdo encerrado pelo primeiro par estará sempre em negrito.Se um determinado atributo for aplicadao a um tag <th> ou <td>, esse atributo incidirá somente sobre o contéudo da célula iniciada por tais tags. Os atributos que podem ser aplicados sobre <th> e <td> são:
Veja abaixo um exemplo que faz uso de todos esses atributos dos tags e, logo em seguida, a tabela obtida com este trecho de código: <th> e <td>:
Dois outros atributos utilizados nos tags <th> e <td> são:
Veremos abaixo três exemplos. O primeiro sem expansões, o segundo com colspan e o último com rowspan
|
![]() |
Ato | MARQUEES |
---|---|
Linhas a serem incluídas | <marquee height=30 width=500 direction=left scrollamount=30><b> <font size="5" color="#FF0000">PIUÍÍÍÍÍÍÍIÍ</font></b></marquee> |
| |
Comentários |
Marquee é isso que você está vendo aí em cima,
isto é, textos em movimento. Se você estiver vendo apenas a palavra
PIUÍÍÍÍ estática, é porque seu browser (Netscape 3.01, por exemplo)
não suporta o comando marquee.
Um marquee é encerrado dentro dos tags <marquee> e </marquee>.
Os atributos de <marquee> são:
|
![]() |
Ato | FRAMES | ||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Explicação |
Veja estes três arquivos HTML:
Frames ("molduras" em inglês) são estas subdivisões que você vê nas páginas da Internet. Para contruir uma página com frames são necessárias duas coisas:
|
||||||||||||||||||||||||
Explicação |
Vamos utilizar o exemplo mostrado acima para explicar como fazer sua página com frames. Primeiramente, você deve inserir vários links locais no código-fonte pagina.html. Se você esqueceu como fazer isso, veja a explicação sobre links que foi dada neste tutorial. Estes links serão:
Agora dê uma olhada no código-fonte de indice.html: Observe que todos o links de indice.html têm a seguinte estrutura:
Agora preste bastante atenção no seguinte detalhe. Em todos os links existe o atributo target ("alvo" em inglês) seguido da opção "tutorial". Esse nome para a opção foi escolhido a dedo, você pode escolher qualquer outro. O atributo target tem uma função especial na criação de frames. É ele que faz com que o link clicado abra na página página.html e não na indice.html. Por último, dê uma olhado no arquivo frame.html
|
![]() |
MAPAS CLICÁVEIS |