Curso HTML

HTML é uma linguagem de marcação usada para criar páginas web, utilizando tags para formatar texto e estruturar conteúdo. Um documento HTML básico contém três partes principais: a estrutura, o cabeçalho e o corpo, com tags específicas para cada uma. Os principais elementos de uma página HTML incluem títulos, textos, parágrafos, imagens e links, que são organizados através de comandos e tags.

Enviado por

Stephan

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

2 visualizações19 páginas

Curso HTML

Enviado por

Stephan

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

HTML: UMA LINGUAGEM DE MARCAÇÃO

A HTML é uma linguagem de marcação. Criar um documento em uma linguagem de

marcação significa que você começa com o texto da sua página e inclui tags especiais
no início e no final de determinadas palavras ou parágrafos.
As tags indicam as diversas partes da página e produzem diferentes efeitos no
navegador. Os arquivos recebem a extensão .html e possuem como ícone a seguinte
imagem:

O ícone a direita ao Internet Explorer 5.

A primeira página a ser exibida geralmente recebe o nome de [Link] ou .html,
dependendo do provedor que hospeda a página.
As tags normalmente são especificadas em pares, delimitando um texto que sofrerá
algum tipo de formatação. As tags são identificadas por estarem entre os sinais < > e
< / >.
Entre os sinais < > são especificados os comandos propriamente ditos. No caso de
tags que necessitam envolver um texto, sua finalização deve ser feita usando-se a
barra de divisão /, indicando que a tag está finalizando a marcação de um texto.
O formato genérico de uma tag é:
<nome da tag> texto</nome da tag>
Mas algumas tags não possuem finalização.
Vejamos agora alguns comandos e o tipo de efeito que estes causam ao texto quando
interpretados pelo browser.
Assim como outras linguagens, a HTML possui uma estrutura básica para seus
programas. Para que um browser interprete corretamente o programa, ele deve
possuir alguns comandos básicos que sempre deverão estar presentes. Alguns
browsers até dispensam seu uso, porém é melhor assumir como parte fundamental do
programa tais comandos.
Um programa HTML possui três partes básicas, a estrutura principal, o cabeçalho e o
corpo do programa. Todo programa deve iniciar com o comando, tag, <html> e ser
encerrado com o comando </html>. Esse par de comandos é essencial. A área de
cabeçalho é opcional e é delimitada pelo par de comandos <head> e </head>.
Estes comandos para cabeçalho são usados para especificar alguns poucos comandos
da linguagem. Eles são opcionais, ou seja, um programa HTML pode funcionar sem
eles. Mas é conveniente usá-los, pois o título da página é acrescentado através deles.E
ainda temos as tags <Title> e </Title>, estes comandos delimitam o texto que irá
aparecer na barra de título do browser.
A maioria dos comandos será especificado no corpo do programa que é delimitado
pelas tags <body> e </body>. É um comando obrigatório.
<HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>
<HTML> </HTML> Esta tag marca o início do programa HTML
<HEAD> </HEAD> Esta tag marca início e fim de cabeçalho
<TITLE> </TITLE> Esta tag delimita o texto que irá ser visualizado na barra de
título do browser
<BODY> </BODY> Esta tag delimita o corpo do programa, aonde a maior parte do
comando serão colocados.
1. OS PRINCIPAIS ELEMENTOS DE UMA PÁGINA HTML
Uma página HTML é composta basicamente de títulos, textos, parágrafos, imagens e
links, responsáveis pela chamada de outras páginas para a tela. Todos esses
elementos são posicionados na página por meio de comandos específicos da
linguagem.
TÍTULO

É o texto que aparece na barra de título do browser.

IMAGEM
São figuras, desenhos e fotos usados para ilustrar a página.

TEXTO

É a informação mais comum dentro da página. Pode ser formatado

através de vários comandos.
LINK
É um trecho que aparece destacado do restante do texto, normalmente sublinhado e
com outra cor. Ao clicar no link, o browser acessa outra região da página atual ou uma
página localizada em qualquer lugar da Internet. Uma figura também pode ser usada
como um link, ou seja, clicando na figura saltamos para outro local.
CABEÇALHO
São linhas de texto com tamanhos especiais. Existem seis tamanhos prefixados de
cabeçalho.

2. TÍTULO
O título de uma página web indica qual o assunto abordado e irá aparecer na barra de
título do browser. Este título é utilizado por programas de lista (hotlist) do seu
navegador e também por outros programas que catalogam páginas da Internet. Para
atribuir um título a página você deverá utilizar a tag:
<Title> </Title>.
Esta tag sempre será incluída no cabeçalho (entre as tags <Head> </Head> e
descrevem a mesma).
Considerações sobre o título:
• Você poderá ter apenas um título
• texto deverá ser simples e não poderá ter outras tags
• Escolha um texto curto e que descreva o conteúdo da página
3. CABEÇALHOS Os cabeçalhos são usados para dividir seções do texto, como
capítulos de um livro. A HTML divide seis tamanhos de cabeçalhos, de H1 a H6, que
aplicam um tamanho de fonte diferenciado no texto que envolvem, uma linha antes e
depois e além disso dão um efeito de negrito. O maior tamanho é o H1 e o menor é o
H6.
<H1> Texto </H1>
Experimente o seguinte código:
</html>
<head><title>Cabeçalhos</title></head>
<body>
<h1>C</h1>
<h2>A</h2>
<h3>B</h3>
<h4>E</h4>
<h5>ç</h5>
<h6>A</h6>
<h5>L</h5>
<h4>H</h4>
<h3>O</h3>
<h2>S</h2>
</body>
</html>
Vejamos um exemplo de outro código em HTML: <html>
<head><b> A FORMAÇÃO DE UM WEBMASTER</b></HEAD>
<body>
<p>
A formação de um <i>Webmaster</i> envolve diversos tipos de
conhecimentos.<br>
Afinal, ele será o responsável pela administração de um site.
</body>
</html>
Em nosso exemplo introduzi mais algumas tags. Os comandos: <B> </B> Aplica o
estilo negrito ao texto
<I> </I> Aplica o estilo itálico ao texto.
<P> </P> Inicia um novo parágrafo.
<BR> Faz uma quebra de linha.
4. PARÁGRAFOS
Para forçar o início de um novo parágrafo, ou seja, avançar uma linha em branco e
iniciar o texto na Segunda linha após o final do parágrafo anterior, deve ser usado o
comando <p>. Esse comando pode aparecer individualmente ou em par: <p> </p>.
Quando um comando <p> é inserido em um local do programa, o browser irá sempre
avançar uma linha em branco, posiciona-se na linha seguinte ao comando <p>.
5. QUEBRA DE LINHA
O comando <br> faz uma espécie de quebra de linha. Este comando inseri uma linha
em branco no seu local ou na linha seguinte á qual ele foi inserido, caso esteja no
meio de uma linha e não em seu final.
A função deste comando é avançar para a linha imediatamente após aquela em que
ele ocorre.
EXERCÍCIOS
1. Qual a extensão de um arquivo de um programa em HTML?
2. A primeira página de um site geralmente recebe que nome?
3. Escreva a estrutura básica de um programa HTML.
4. Quais os principais elementos exibidos em uma home page?
5. O que é link?
6. Qual as função das tags abaixo:
a. <HTML> </HTML>
b. <HEAD> </HEAD>
c. <TITLE> </TITLE>
d. <H2> </H2>
e. <BODY> </BODY>
f. <B> </B>
g. <I> </I>
h. <P>
i. <BR>
CONT...EXERCÍCIOS
7. Utilize o que você já aprendeu nesta seção e crie seu primeira página HTML. Use a
linguagem HTML e faça uma página falando das suas expectativas para este curso,
como pretende usar o conhecimento que está adquirindo e quais outros cursos que
pretende fazer. Seu texto deve ter no máximo 5 linhas. Salve na unidade A: com o
nome de [Link].
Faça um página utilizando os comandos que você já conhece para falar sobre uma pessoa.
Pode ser alguém que você admire, do seu círculo de amigos, ou uma pessoa pública (ator,
atriz, etc). Seu texto deve ter no máximo 5 linhas. Salve na unidade A: com o nome de
Pessoa admirá[Link].
TAGS DE FORMATAÇÃO
Assim como em um editor de texto, em HTML você poderá utilizar efeitos em seu texto.
Como já percebeu os comandos, tags, trabalham em contêiner.
Alguns destes comandos já foram introduzidos no capítulo anterior. Os principais comandos
de estilo:
TAG SINTAXE FUNÇÃO
STRONG <strong>texto</strong> Similar ao negrito
TYPERWRITER <tt>texto</tt> Deixa o texto com espaçamento
regular
BIG <big>texto</big> Aumenta a fonte e aplica negrito
SMALL <small>texto</small> Reduz e altera a fonte
SOBRESCRITO <sup>texto>/sup> Eleva o texto e diminui seu corpo
SUBESCRITO <sub>texto</sub> Rebaixa o texto e diminui seu corpo

BLINK <blink>texto</blink> Faz com que o texto pisque

TAG SINTAXE FUNÇÃO

NEGRITO <b>texto</b> Aplica o estilo negrito

ITÁLICO <I>texto</I> Aplica o estilo itálico

SUBLINHADO <u>texto</u> Aplica um sublinhado (em alguns

browsers esta tag não funciona)
Estes são os mais utilizados, porém há outros que merecem atenção.
Para alterar a formatação de um texto em HTML existem dois tipos de estilos que
devem ser observados: o estilo lógico e o estilo físico.
1. ESTILO LÓGICO As tags deste tipo indicam como o texto destacado deve ser
utilizado e não como será apresentado. Este estilo não indica como o texto será
formatado e sim como será utilizado no documento. Não é possível garantir que um
texto destacado que utilize tags deste tipo sempre será apresentado em negrito ou
itálico, por exemplo. Dependerá do browser.
Algumas tags de estilo lógico utilizadas em HTML padrão:
<EM>
Indica que os caracteres deverão ser enfatizados de alguma forma. De forma diferente
do restante do texto. Geralmente em itálico
<STRONG>

Esta tag enfatiza ainda mais que a anterior. Em negrito.

<CODE>

Esta tag indica um código de exemplo a ser exposto.

<SAMP>

Esta tag indica texto de exemplo. Quando você quer dar um exemplo de
endereço para a Internet sem criar link.
2. ESTILOS FÍSICOS
Este estilo de tag realmente altera a formatação do texto, no estilo anterior você não
possui garantia que o texto irá ser visualizado da forma que planejou. Neste estilo ele
será visualizado da forma que atribuir as tags a ele.
Algumas tags de estilo físico para HTML padrão:
<B> </B> coloca o texto em negrito
<I> </I> coloca o texto em itálico
<TT> </TT> fonte de máquina de escrever com espaçamento uniforme.
<u> </u> coloca o texto sublinhado
<S> </S> coloca o texto tachado
<BIG> </BIG> o texto irá aparecer maior que o restante ao redor
<SMALL> </SMALL> o texto irá aparecer menor que o restante ao redor
<SUB> </SUB> coloca o texto subscrito
<SUP> </SUP> coloca o texto sobrescrito
Optando por utilizar tags do estilo físico, caso o navegador não reconheça uma das
tags ele a irá substituir por outra equivalente ou ignorará a formatação. 3. TEXTO
PRÉ-FORMATADO
O texto de uma arquivo em HTML é formatado através das tags. Mas você possui a
opção da tag <PRE> </PRE> para estabelecer uma formatação através de um editor
de texto e que esta formatação permaneça na sua página html.
O texto pré-formatado é excelente para apresentar código-fonte com seus
espaçamentos adequados. Este recurso pode ser utilizado para criar tabelas mas não é
recomendável.
Uma observação importante é que, ao usar tags de estilo ou vínculo, não tags de
elemento, neste espaço elas irão funcionar normalmente.
SINTAXE:
<PRE>
TEXTO
TEXTO
TEXTO
</PRE>
4. CITAÇÕES E COMENTÁRIOS
A tag <BLOCKQUOTE> é utilizada na criação de citações longas que não devem ser
aninhadas em parágrafos.. A tag <CITE> destaca citações curtas.
Um exemplo:
<BLOCKQUOTE>
"O mercado de webdesign é um dos segmentos de design com maior potencial de
crescimento para os próximos anos. Estima-se um crescimento de no mínimo 50% ao
ano até 2005. E, na corrida rumo a esse novo eldorado, as agências de propaganda
mais uma vez largaram na frente dos escritórios de design, investindo primeiro em
estruturas especializadas para atender á demanda do mercado (...)".
Maria Edicy Moreira.
</BLOCKQUOTE>
Caso queira fazer comentários a respeito do seu código HTML apenas como referência
pessoal e não para ser exibido em suas páginas você deverá fazer o comentário da
seguinte forma:
5. ENDEREÇOS
Esta tag é utilizada para identificar autorias de sua página. Geralmente são apresentadas na
parte inferior de cada página. Mostra quem confeccionou aquela página, com quem o leitor
deve entrar em contato caso queira ter alguma informação ou fazer alguma observação.
Estes endereços são precedidos de um fio <hr>, que ainda veremos, e você poderá utilizar
a tag <br> para separar linhas.
<ADDRESS> TEXTO</ADDRESS>
Vejamos um exemplo:
<HR>
<address>
ESTUDEHTML@[Link] <br>
A serviço de Ag8 Informática Ltda - Me<br>
Última atualização: 10 de Janeiro de 2000<br>
Todos os direitos autorais são reservados<br>
</address>
Esta é uma excelente forma de garantir que as pessoas entrem em contato com você caso
necessitem e também uma forma de estar melhorando a sua HP (Home Page) através de
sugestões.
6. A TAG <BLINK>
O texto que se encontrar entre estas tags irá aparecer piscando. Dependendo da versão do
Netscape, esta tag somente terá efeito sobre o texto se ele estiver sendo visualizado
através do Netscape, esse efeito terá uma dessas características:
8. texto ficará piscando em intervalos regulares
9. Um bloco cinza ou branco ficará piscando atrás do texto.
Este recurso geralmente é utilizado para chamar a atenção do leitor sobre uma determinada
parte do texto. O problema do efeito piscando é que ele chama atenção excessivamente
sobre aquela parte do texto tirando a atenção do leitor do restante do texto. A maioria dos
projetistas web consideram este efeito feio, desagradável e irritante. Em HTML poderíamos
colocá-lo como se fosse passar a colher com bastante força no fundo de uma panela de
alumínio. Já imaginou?

EXERCÍCIOS
10. Os comandos de formatação podem ser combinados para aplicar mais de um efeito
ao mesmo tempo?
11. Coloque os comandos HTML abaixo para que o texto tenha o seguinte efeito:
Tutorial de HTML
12. Crie uma página HTML sobre algo que goste de fazer, e que faça muito bem, e
queira ensinar a outras pessoas. Um tutorial usando todas as tags vistas até então.
Utilizando principalmente todos os comandos de formatação.
13. Por que a tag Blink não é bem aceita pela maioria dos projetistas de páginas Web?
14. Qual a utilidade da tag de pré-formatação e qual sua sintaxe?
15. Como devo utilizar a tag <ADDRESS> </ADDRESS> e qual sua finalidade?
FONTES
Para fazer alterações no tamanho, tipo e cor da fonte de seu texto você utilizará a tag
<font> </font> que é do tipo contêiner. Sua sintaxe é a seguinte:
<font size=" " color=" " face=" "></font>
1. SIZE
O tamanho Size especifica o tamanho da fonte utilizada. Os valores permitidos vão de 1, o
menor, a 7, o maior. O padrão é 3. Se for especificado um número antecedido com o sinal
de adição ou subtração o valor da fonte será acrescido ou subtraído nesse valor. Vamos a
um exemplo: se eu estiver trabalhando com uma fonte 5 e for especificado <font size=+2,
o texto passará a ser exibido em 7. Se não houver sinal a fonte será exibida naquele valor.
2. FACE
Esse parâmetro permite que seja escolhida uma fonte diferente para o texto. Podem ser
especificadas várias fontes, de maneira que, se o sistema não possuir uma determinada
fonte ele irá utilizar outra.
Face="name [,name2[,name3]]
Se não forem encontradas as fontes especificadas, então, o texto será apresentado na fonte
padrão.
<font face="Agaramond, Arial" size=1>

3. COLOR
Este parâmetro especifica a cor do texto. Seu valor será especificado no formato hexadecimal, RGB ou
através de um nome predefinido de cores.
Algumas cores:
COR CÓDIGO COR CÓDIGO
Aqua #70DB93 Blue #0000FF
Black #000000 Cyan #00FFFF
Fuchsia #FF00FF Gray #C0C0C0
Green #00FF00 Lime #32CD32
Brown #800000 Navy #23238E
Olive #808000 Red #FF0000
Silver #E6E8FA Teal #008080
White #FFFFFF Yellow #FFFF00
Vamos a um exemplo de código:
<html>
<head>
</title>Experiência com Fontes</title>
</head>
<body>
<h2>Primeiro exemplo com tipos de fontes</h2>
<font face="Agaramond"><p>
Este texto será exibido em Agaramond</font><br>
<font face="Tahoma"><p>
Este texto será exibido em Tahoma</font><br>
<font face="Arcane"><p>Este texto será exibido em Aracane</font><br>
<p><h2>Exemplos com tamanhos diferentes de fontes</h2>
<font face="Courier" Size=1>Este texto será exibido em Courier</font><br><p>
<font face="Courier" Size=2>Este texto será exibido em Courier</font><br><p>
<font face="Courier" Size=3>Este texto será exibido em Courier</font><br><p>
<font face="Courier" Size=4>Este texto será exibido em Courier</font><br><p>
<font face="Courier" Size=5>Este texto será exibido em Courier</font><br><p>
<font face="Courier" Size=6>Este texto será exibido em Courier</font><br><p>
<font face="Courier" Size=7>Este texto será exibido em Courier</font><br><p>
<p><h2>Agora iremos usar cores</h2>
<font Face="Verdana" size=5 color="#800000">
Este é o primeiro texto a ser modificado</font>
</body>
</html>

4. ALINHAMENTO
Pense no que é alinhar um texto no Word ou no StarWrite. Pois então você sabe o que é
alinhar um texto. É claro que você não irá alinhar em HTML da mesma forma, terá que
utilizar tags e parâmetros para estas tags.
Para alinhar um texto você utilizará o atributo ALIGN com valores : LEFT
(esquerda), RIGHT (direita), CENTER (centralizado) e JUSTIFY (justificado).
PARÁGRAFOS
O comando <p> inicia um novo parágrafo onde o texto é automaticamente alinhado pela
margem esquerda da tela. Caso você deseje que seu novo parágrafo seja iniciado com um
alinhamento diferente você deverá especificar na hora que incluir esta tag o atributo align.
Vejamos um exemplo:
<html>
<head>
<title>Alinhamento</title>
</head>
<body>
<h1>MACROMEDIA FLASH</H1>
<P ALIGN=JUSTIFY>
A tecnologia Shockwave Flash, da Macromedia, já está presente na Web há alguns anos, e
no último no ganhou um forte impulso com a inclusão do plug-in necessário nos
navegadores mais recentes (apartir do Internet Explorer 4 e Netscape Navigator 4.6). Cada
vez mais utilizado, este programa já está sendo empregado em sites de grandes empresas.
Seu poder se deve a sua grande capacidade multimídia e á sua versatilidade. Sua finalidade
é a criação de imagens vetoriais com animação, som e interatividade.</p>
<p align=center>
Depois veremos mais sobre o Flash</p>
</body>
</html>

CABEÇALHO
Quanto ao cabeçalho você só poderá alterar o alinhamento para direita e centralizado, a
esquerda é alinhamento padrão.
Exemplo:
<h2 align=center>Este é um exemplo de cabeçalho com alinhamento</h2>
Vamos ao código-fonte para verificarmos a diferença:
<html>
<head>
<title>Alinhamento de cabeçalho</title>
</head>
<body>
<h2>Cabeçalho sem alinhamento especial</h2>
Este é um exemplo do cabeçalho sem alinhamento especial.
<h2 align=center>Cabeçalho com alinhamento centralizado</h2>
Este é um exemplo de cabeçalho alinhado ao centro.
<h2 align=right>Cabeçalho com alinhamento a direita</h2>
Este é um exemplo de cabeçalho alinhado a direita.
</body>
</html>
5. ALINHAMENTO COM O COMANDO <DIV>
A utilização desta tag é uma forma prática e rápida de alinhar bloco de texto. A abreviatura
DIV significa divisão. Ao usar esta tag num bloco de texto você estará atingindo todas as
tags dentro daquele bloco. Suas vantagens sobre o Align é que:
16. Precisará ser utilizada apenas uma vez, ao contrário do atributo Align, que tem de
ser incluído em diversas tags.
17. A tag <DIV> pode ser usada para alinhar qualquer elemento (cabeçalho, parágrafos,
citações, imagens, tabelas, etc.). O atributo Align encontra-se disponível apenas em
um número limitado de tags.
Você deverá colocar a tag <DIV> e acrescentar o atributo align na tag de abertura. O
atributo align poderá ter os valores left, right e center.

Sintaxe:
<DIV ALIGN=" ">
TEXTO e OUTRAS TAGS
TEXTO e OUTRAS TAGS
</DIV>
OBSERVAÇÃO:
Além do atributo align=center temos a tag <center> </center> que funciona
igualmente ao atributo.
Vamos treinar um pouco com este código-fonte:
<html>
<head>
<title>Utilizando a tag DIV para alinhar</title>
</head>
<body>
<h2>JavaScript na World Wide Web</h2>
<p align=justify>
A World Wide Web iniciou-se como um simples repositório de informações, mas
cresceu muito além disso. A medida que a Web desenvolveu-se, as ferramentas
também desenvolveram-se. Ferramentas simples de marcação como HTML foram
unidas por linguagens de programação de verdade. Incluindo <b>JavaScript</b>,
que na verdade não é uma linguagem de programação mas uma <b>linguagem
Script hospedeira</b> de páginas em HTML.<br>
<p>
<div align=center>
<h2>Entendendo a utilidade do JavaScript</h2>
Como a HTML é uma linguagem apenas de marcação de texto simples, ela não pode
responder para o usuário, tomar decisões, nem autorizar tarefas repetitivas. Tarefas
interativas como essas exigem uma linguagem mais complexa.
<h3>Eu precisarei usar JavaScript em todas as minhas páginas</h3>
Apenas se quiser aprimorá-las e interagir com o usuário.
</div>
</body>
</html>
6. CARACTERES ESPECIAIS Há caracteres que não podem ser obtidos por meio do
teclado. Eles podem ser inseridos em sua página através da especificação de um
código especial que o browser interpreta e substitui por um caracter específico. Esses
códigos podem ser obtidos utilizando-se uma nomeclatura definida pela ISO -LATIN -
1 ou a partir de uma entidade HTML.
A norma ISO utiliza um código composto pelo caractere & seguido do símbolo # e,
então, de uma combinação numérica com ponto-e-vírgula. Já a entidade HTML usa o
caractere & seguido de uma palavra que identifica o símbolo com ponto-e-vírgula.
Caso você queira escrever uma página HTML em outro idioma terá que usar bastante
esses caracteres especiais.
Imagine que você queira fazer uma página HTML ensinando a outras pessoas a
linguagem HTML. Como faria para explicar uma tag sem que o browser interpretasse
como um comando. Terá de utilizar estes símbolos especiais.
Vamos a um exemplo:
<html>
<head>
<title>Tutorial em HTML</title>
</head>
<body>
<h2>O comando &ltBR&gt</h2>
A finalidade deste comando HTML é marcar uma seção do texto como parágrafo
inserindo uma quebra de linha.<br>
<p>
Já o comando &ltP&gt é para indicar início de uma novo parágrafo.
</body>
</html>
Observe que para que o browser pudesse mostrar <br> e <p> sem interpretar como
comandos usei caracteres especiais &lt para indicar sinal de < e &gt para indicar o
sinal de >.
Quando você utiliza a acentuação comum do teclado nas suas páginas podem até
parecer que tudo irá correr tudo bem. Mas alguém que visualizar suas páginas em um
computador que não tenha as mesmas configurações de 'vídeo e teclado, alguns
caracteres podem não sair da forma desejada.
Por exemplo:
A palavra café, se você utilizar esta palavra com a acentuação do seu teclado, com certeza na
visualização do seu browser ficará perfeita, mas pode ser que em outros computadores com a
configuração diferente não apareça da mesma forma. O ideal é colocá-la assim:
Café ou caé
E se desejasse colocar a palavra entre aspas:
"Café&quot

ALGUNS CARACTERES ESPECIAIS

CARACTER SÍMBOLO CARACTER SÍMBOLO
ESPECIAL ESPECIAL
< &lt à à
> &gt â â
{ { ã ã
} } ü ü
: : & &
; ; ® ®
= = " "
á á " "
@ @ ª ª
$ $ º º
% % ? ?
Exercício Crie uma página HTML utilizando os recursos vistos acima. Use esta página
para falar da utilidade da Internet na vida de pessoas que não trabalham com
informática, sugestões para aqueles que querem abrir negócios novos envolvendo
Internet, sem ser um racker. LISTAS Vamos colocar assim, há basicamente dois tipos
de listas: as ordenadas, que contêm uma série de itens sem numerá-los, e as listas
ordenadas, que atribuem um número para cada elemento da lista. Trabalhar com
listas é simples.
Trabalharemos com os comandos <ul> para listas não ordenadas e <ol> para as listas
ordenadas.
1. O COMANDO <UL> Para criar uma lista não ordenada, você deve usar um conjunto
de comandos cuja sintaxe básica é mostrada a seguir. O comando que gera a lista não
ordenada é o comando <UL> (unordered list), que deve envolver o primeiro e o
último item da lista. Cada item da lista deve ser precedido do comando <LI> (line
list).
<UL>
<LI> Texto
<LI> Texto
</UL>
2. O COMANDO <OL> Para criar uma lista básica não ordenada, você deve usar um
conjunto de comandos cuja sintaxe básica é mostrada a seguir. O comando que gera a
lista não ordenada (ordered list) é o comando <OL>, que deve envolver o primeiro e o
último item da lista. Cada item da lista deve ser precedido do comando <LI> (Line
item).
<OL>
<LI> Texto
<LI> Texto
</OL>
OBSERVAÇÃO:
Na lista não ordenada cada item receberá um marcador ("bolinha") e a numerada
receberá automaticamente números.
Você poderá personalizar sua lista ordenada com o atributo TYPE e START. O atributo
Type pode assumir cinco valores para definir o tipo de numeração a ser usado na lista.
· "1" : Especifica que os algarismos arábicos padrão devem ser usados para numerar a
lista ( 1,2,3,4, ...).
· "a" : Especifica que as letras minúsculas devem ser usadas para numerar a lista (a,
b, c, d, etc.)
· "A" : Especifica que as letras maiúsculas devem ser usadas para numerar a lista (A,
B, C, D, etc.)
· "i" : Especifica que os algarismos romanos minúsculos devem ser usados para
numerar a lista ( i, ii, iii, iv, etc.)
· "I" : Especifica que os algarismos romanos maiúsculos devem ser usados para
numerar a lista ( I, II, III, IV, etc.).
Exemplo: <p>Ingredientes para bolo</p>
<ol>
<li>Farinha de Trigo
<li>Açucar
<li>Manteiga
<li>Ovos
<li>Leite
<li>Fermento
</ol>
Agora um exemplo com o atributo Type:
<p>Ingredientes para bolo</p>
<ol type="I">
<li>Farinha de trigo
<li>Açucar
<li>Manteiga
<li>Ovos
<li>Leite
<li>Fermento
</ol>
Usando o atributo START você poderá determinar o número ou a letra que inicia sua lista. O
ponto inicial é 1. Usando o Start, você pudará esse número. Um exemplo: <ol Type=a
start=3>.
Usando o atributo VALUE em um item da lista poderemos alterar os valores da lista apartir
de qualquer ponto.
Ex.:
<UL>
<LI>
<LI value=10>
<LI>
</UL>
IMAGENS
Para inserir uma imagem em uma página web utilizamos do comando, tag, <img src> e seus atributos.
<img src="endereço da imagem no HD">
ex.: <img src="c:\site\[Link]">
Poderemos acrescentar a esta imagem os seguintes atributos:
Width="valor em pixel" largura da imagem
Height="valor em pixel" altura da imagem
Align=(left, right ou center) alinhamento da imagem
Alt="texto" texto que irá aparecer ao passar o mouse sobre a imagem ou texto que surgirá caso a imagem não possa
ser visualizada.

Border="valor em pixel" especificação da largura da borda da imagem.

Vspace="valor em pixel" para especificar o espaço que deve ser deixado acima e abaixo da
imagem.
Hspace="valor em pixel" especifica o espaço que deve ser deixado nas laterais da imagem.
O único obrigatório é o src.
- Colocando Uma Imagem Como Fundo Da Página
<body background="endereço da imagem no HD">
ex.: <body background="c:\site\[Link]">
Procure usar imagens simples, com poucas variações de tons.
Para fixar a imagem de fundo
<body background="c:\site\[Link]" bgproperties="fixed">
- Colocando Uma Cor Como Fundo Da Página:
<body bgcolor="cor">
Procure não usar cores chamativas. Para que a cor do fundo da sua página chame mais
atenção que seu conteúdo.
Você pode criar seus próprios fundos de página com programas como o Photoshop e o
Corelphoto-paint.
LINKS E ANCORAS
1- LINKS
A principal atração da Internet é a criação de documentos com o conceito de hipertexto ,ou
seja ,um documento que se vincula a outros documentos por meio de ligações especiais
chamadas links ou [Link] esse conceito ,você pode criar documentos que façam
referências e permitam ao usuário acessar tais referências não importando se elas estão em
outra página Web ,no seu micro ou em algum servidor de rede.
O uso de hipertexto também facilita a criação de documentos extensos cujas seções ou
tópicos podem ser rapidamente acessados por meio dos links. Imagine que você crie uma
página sobre determinado assunto em vários tópicos abordados. Assim como em um livro
você cria todo o texto do documento e depois cria , no início ,um sumário indicando os
tópicos do documento. Se quiser acessar diretamente o texto de um tópico ,basta dar um
clique sobre o item do tópico no sumário e ele será imediatamente exibido.

LINKS Um link é reconhecido em uma página por estar em cor normalmente diferente
do resto do texto e , ao passar com o mouse sobre esse texto o cursor muda para
uma mão apontando para o link.
Para criar uma link com uma página
<a href="endereço da página">texto que será o link</a>
ex.: <a href="c:\site\[Link]">Minha casa</a>
Usando uma imagem como link:
Ex.: <a href="c:\site\[Link]><img src="c:\site\[Link]"></a>
2- Âncoras Uma âncora é um ponto de referência ou endereço que será acessado por
um link.
Uma âncora é usada dentro do documento para marcar o início de uma seção do
documento.
Suponha que seu texto seja muito grande , o que tornaria trabalhoso para quem
estiver vendo a página conseguir se movimentar entre um tópico e outro. Então faça o
seguinte : Nomeie um pedaço da sua página através do tag :
<A NAME="NOME "> Texto </A>
( Lembre –se que "NOME" é fictício, você escolhe o nome…)
Depois disso escreva o pedaço que você quer associar a esse Nome. Agora crie um
link para chegar até esse pedaço , usando o tag :
<A HREF="#NOME">Clique Aqui</A>
Pronto! Ao clicar na mensagem "Clique Aqui" de sua página , o usuário irá até o
pedaço que você nomeou.
ATENÇÃO : O sinal de cerquilha (#) é necessário para a âncora, pois avisa ao
browser para procurar o link no documento atual !!!
3- Linkando Arquivos de Outros Servidores Agora a coisa fica um pouco mais séria . É
aqui que está toda graça de Internet . Através de um esquema de endereçamento , a
URL , a Internet consegue acessar um arquivo que está em qualquer micro deste
planeta desde que esteja conectado adequadamente a Web.
Como já vimos , a URL serve para especificar a localização de páginas e arquivos em
diretórios de servidores da Web . Vamos comparar com um esquema que você usa (
as vezes até sem saber ) para acessar algum arquivo em seu próprio computador .
Acessando um arquivo pelo DOS :
C: \WINDOWS \SYSTEM \ [Link]
Acessando uma página pela Web :
HTTP://[Link]
Uma URL é composta por duas partes principais . A primeira é o protocolo Internet do
documento , a segunda parte é o endereço do servidor e da página.
A sintaxe disso é :
PROTOCOLO: //SERVIDOR . INSTITUIÇÃO / ARQUIVO
Onde :
· Protocolo é o tipo de servidor que está sendo acessado;
· Servidor é o computador que contém a página ;
· Instituição é o tipo de instituição a qual esse computador pertence ( Comercial ,
Internet Publica , Militar etc. ) ;
· Arquivo é o caminho do arquivo.
Exemplo :
HTTP : // [Link]
Esse endereço pode ser especificado diretamente na linha de URL do Browser , para
acessar diretamente a página INDEX. HTM , ou então dentro de um link de um
documento HTML , através do A HREF que cria uma ligação , um link para o URL .
<A HREF = "HTTP : // WWW. [Link] "> TIMASTER </A>
TABELAS As tabelas são muito importantes para o designer de uma home-page. Com
elas pode-se fazer alinhamentos que dificilmente seriam possíveis com simples
comandos.
A funcionalidade de uma tabela faz com que um determinado site tenha um aspecto
mais profissional e o usuário possa navegar de forma mais eficiente, pois os objetos
podem estar melhor posicionados na home-page.
Vamos discutir, nesta parte, quais são os comandos para se criar uma tabela e
mostrar alguns exemplos. Claro que você deverá praticar e principalmente planejar a
sua tabela, pois sem isso, fica muito difícil de controlar o código HTML da sua home-
page.
O comando para se inserir uma tabela é <TABLE>; para iniciar uma linha devemos
introduzir a tag <TR> e para uma célula (alguns preferem dizer coluna) <TD>. Todos
estes comandos são encerrados como </TABLE> , </TR> e </TD> respectivamente.
Vejamos um exemplo. Vamos supor que queiramos montar uma tabela 3X2, ou seja
de 3 colunas por 2 linhas, o código HTML para isso é :
<HTML>
<HEAD>
<TITLE>Criando Tabelas</TITLE>
</HEAD>
<BODY>
<CENTER><FONT COLOR=BLUE SIZE=6>TABELA</FONT></CENTER>
<BR>
<TABLE BORDER=1> <! Inicia a tabela e coloca uma borda de espessura igual a 1>
<TR> <! Cria a primeira linha da tabela>
<TD>PRIMEIRA COLUNA </TD> <! Aqui foi criada uma célula>
<TD>SEGUNDA COLUNA </TD>
<TD>TERCEIRA COLUNA </TD>
</TR> <! Fecha a primeira linha da tabela>
<TR> <! Abre a segunda linha da tabela>
<TD> PRIMEIRA COLUNA</TD>
<TD>SEGUNDA COLUNA </TD>
<TD>TERCEIRA COLUNA </TD>
<TR> <! Encerra a Segunda linha da tabela>
</TABLE> <! Encerra a tabela>
</BODY>
</HTML>
1-ALTERANDO A LARGURA DA CÉLULA
Para alterar o largura de uma célula da tabela basta acrescentar o parâmetro WIDTH dentro
da tag <TD>. Exemplo1:
<TABLE BORDER=2>
<TR>
<TD WIDTH=100> WIDTH=100</TD>
<TD ALIGN=MIDDLE WIDTH=200>WIDTH=200 (PIXELS)</TD>
</TR>
</TABLE>
O parâmetro WIDTH pode receber dois tipos de valores, em pixels como no exemplo acima
ou em porcentagem, como mostrado no exemplo a seguir. Também dentro da tag <TD>
vemos um outro parâmetro que é VALIGN=MIDDLE, este parâmetro tem por função alinhar
o conteúdo da célula no meio da mesma, ou seja, dentro da célula as frases são alinhadas
com relação ao seu centro
Exemplo2:
<TABLE BORDER=2>
<TR>
<TD WIDTH=25%> WIDTH=25%</TD>
<TD ALIGN=MIDDLE WIDTH=75%>WIDTH=75%</TD>
</TR>
2- INSERINDO COR DE FUNDO E SEPARAÇÃO DE CÉLULAS
Outro atributo que podemos ter nas tabelas é mudar a sua cor de fundo, isto se torna
particularmente útil quando se quer dar destaque a uma célula em especial.
Vejamos um exemplo:
<TABLE BORDER=0>
<TR>
<TD WIDTH=150 BGCOLOR=RED>VERMELHO </TD>
<TD WIDTH=150 BGCOLOR=BLUE>AZUL </TD>
<TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD>
</TR>
<TR>
<TD WIDTH=150 BGCOLOR=BLUE>AZUL</TD>
<TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD>
<TD WIDTH=150 BGCOLOR=BLUE> AZUL</TD>
</TR>
</TABLE>
Aqui, vimos que podemos acrescentar cores ao fundo de uma célula, outra coisa que
também pode ser feita é mudar a fonte com os comandos de formatação que você já
conhece, como <FONT COLOR=>, por exemplo.

Repare que no exemplo anterior nós colocamos BORDER=0 e as células apareceram

coloridas, mas com um certo espaçamento entre elas, para tirarmos este espaço
devemos acrescentar dentro da tag <TABLE> o parâmetro CELLSPACING=0. Este
parâmetro elimina por completo os espaços entre as células.
<TABLE BORDER=0 CELLSPACING=0>
<TR>
<TD WIDTH=150 BGCOLOR=RED>VERMELHO </TD>
<TD WIDTH=150 BGCOLOR=BLUE>AZUL </TD>
<TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD>
</TR>
<TR>
<TD WIDTH=150 BGCOLOR=BLUE>AZUL</TD>
<TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD>
<TD WIDTH=150 BGCOLOR=BLUE> AZUL</TD>
</TR>
</TABLE>
Outro parâmetro que pode ser usado para separar espaços em uma célula é
CELLPADDING que inclui ou exclui espaços dentro da célula, ou seja, se você tiver um
elemento (frase, texto, figura etc.) dentro da célula você pode acrescentar espaços
por igual nos quatros cantos da célula, fazendo com que seu texto ou figura não fique
"grudado" nas paredes da célula. Aproveite os exemplos anteriores e experimente
usar este atributo para ver como ele funciona.
Isto já dá uma idéia do funcionamento geral das tabelas na WEB. Muitos dos
alinhamentos que encontramos na Internet são feito por intermédio de tabelas.
Você também pode usar todos os outros recursos já vistos de HTML para otimizar o
uso de tabelas.
3-UM POUCO MAIS DE TABELAS Agora que você já está um pouco mais familiarizado
com o uso de tabelas e com seus
principais atributos, vamos ver como podemos aperfeiçoar o uso de tabelas.
Em seguida descreveremos uma série de outros atributos e comandos para tabelas:
<TH> ... </TH>
Esta tag insere um cabeçalho dentro da célula. Na verdade a única diferença entre a
tag <TH> e a tag <TD> é que a <TH> exibe o conteúdo da célula em negrito.
<CAPTION> ... </CAPTION>
Exibe um texto centralizado em relação à tabela, como se fosse uma legenda.
Exemplo:
<TABLE BORDER=1 CELLSPACING=2 CELLPADDING=6> <! Esta linha inicia a tabela com
borda de espessura 1 (border), espaço entre as células 2 (Cellspacing) e espaço dentro da
célula 6 (Cellpadding)>
<CAPTION>LEGENDA</CAPTION> <! Introduz uma legenda na tabela>
<TR>
<TH>Conteúdo em negrito</TH> <! Insere o texto na forma de cabeçalho (negrito)>
</TR>
<TR>
<TH>Conteúdo em negrito</TH>
</TR>
</TABLE>
Repare neste exemplo, que a legenda já sai centralizada com relação a tabela e repare no
espaço dentro da célula devido ao comando CELLPADDING.
4-OS ATRIBUTOS COLSPAN E ROWSPAN
Estes atributos são muito importantes dentro da tag <TABLE>. São eles que nos possibilitam remodelar a
disposição das células dentro da tabela. Vejamos um exemplo prático:
<TABLE BORDER=2 CELLPADDING=2>
<TR>
<TD COLSPAN=2>Exemplo do uso do COLSPAN</TD>
<TR>
<TD>CÉLULA 1</TD> <TD>CÉLULA 2</TD>
</TR>
</TABLE>
Neste exemplo vemos que na tag <TD> foi introduzido o parâmetro COLSPAN. Este parâmetro tem a finalidade de
dizer que sob a célula onde ele foi introduzido podemos ter um certo número de colunas. Logo, se você quiser que
uma célula ocupe uma única linha, como no nosso exemplo, você deve inserir o parâmetro dentro da tag <TD>
desta célula. A quantidade de células que virão em baixo da célula que recebeu o atributo COLSPAN deve ser de
acordo com o número especificado no parâmetro.
Mas se quisermos definir uma única célula ocupando uma coluna inteira ? Neste caso usamos o atributo
ROWSPAN. Exemplo:
<TABLE BORDER=2 CELLPADDING=2>
<TR>
<TD ROWSPAN=2>Exemplo do uso do ROWSPAN</TD>
<TD>CÉLULA 1</TD></TR><TR> <TD>CÉLULA 2</TD>
</TR>
</TABLE>
Para melhor utilizar estes parâmetros e ver como eles funcionam você deve fazer a sua própria tabela, pois
somente desta forma você conseguirá fixar o uso destes parâmetros.

5-USANDO TABELAS COMO MOLDURAS

Um outro uso bastante interessante de tabelas é como moldura para alguma figura. Para
isto basta você iniciar uma tabela e definir um valor para BORDER.
Exemplo:
<TABLE BORDER=5>
<TR>
<TD> <IMG SRC=NOME DA FIGURA> </TD>
</TR>
</TABLE>
Claro que você deve usar com muito bom senso este artifício da tag <TABLE>, pois nem
sempre uma moldura em uma figura defini um bom layout (aparência) da sua home-page.
6-COLOCANDO UMA IMAGEM DE FUNDO NAS TABELAS
Um recurso parecido com a cor de fundo , colocar uma imagem como fundo de uma tabela
é uma técnica muito usada. Através do complemento BACKGROUND dentro da tag TABLE ,
basta indicar qual o endereço e o nome da figura.
<TABLE BACKGROUND="[Link]" BORDER=5>
<TR>
<TD><H1>Que tal um mergulho agora ? </H1></TD>
</TR>
</TABLE>
7- O atributo RULES
Para escolher as linhas internas que serão mostradas dentro da tabela , usamos o atributo
RULES , dentro da tag <TABLE> . Os complementos desse atributo são :
· none : nenhuma linha interna ;
· rows : para as linhas horizontais entre cada linha da tabela ;
· cols : para as linhas verticais entre cada coluna da tabela ;
· groups : para linhas entre grupos de colunas e seções horizontais , definidas por tags
especiais como COLGROUP e THEAD ;
· all : para mostrar todas as linhas entre cada coluna e linha na tabela ( default ) .

Veja uma tabela com todas as linhas internas ( default ) :

<TABLE BORDER RULES=all>
Outro exemplo sem as linhas internas :
<TABLE BORDER RULES=none>
Outro exemplo usando o complemento ROWS:
<TABLE BORDER RULES=rows>
O último exemplo usará o complemento COLS :
<TABLE BORDER RULES=cols>
As tabelas são um forte recurso de modelagem das home-pages hoje em dia e para
que você consiga utilizar bem este recuso não deve se limitar somente aos exemplos
desta apostila, procure em sites e até mesmos em livros , como por exemplo:
"Criando sites arrasadores na Web" (capítulo 4) ou "HTML Truques Espertos" (capítulo
5). Nessas referências você poderá encontrar vários outros exemplos de páginas
usando tabelas mais complexas (como por exemplo, uma tabela periódica dos
elementos) e é claro em laboratório desenvolvendo sua própria home-page.
Há uma observação importantíssima que devemos fazer aqui. Como já vimos antes,
alguns comandos HTML não funcionam em um dado navegador, se você reparou para
falarmos de tabelas rodamos os exemplos nos dois navegadores mais conhecidos :
Internet Explore 4.0 e no Netscape Communicator 4.0. Você não reparou nenhuma
diferença no uso destes navegadores para nossos exemplos, a questão é que para
tabelas mais complexas, com alinhamentos mais precisos cada navegador interpreta
estes comandos HTML de tabelas de forma diferenciada. Um exemplo típico é uso de
CELLSPACING e CELLPADDING.
Isto se deve ao fato de que nem a Netscape e nem a Microsoft entram em um acordo
quanto a padronização de seus navegadores. Sendo assim, quando você construir
tabelas deve sempre levar em conta em qual navegador você dará preferência para
rodar a sua página. Por isso nunca é demais deixar claro à sua home-page em qual
navegador ela roda melhor a sua formatação.
Frames 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
home-page.
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>
<FRAMESET>
NESTE CAMPO ENTRAM AS CHAMADAS PARA OS DOCUMENTOS DOS FRAMES
</FRAMESET>
</HTML>
Então o que devemos fazer ? Devemos criar um documento HTML normal e um
documento HTML de frames.
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=[Link]> <! Este comando chama as páginas HTML que devem
ocupar as colunas divididas pelo frame>
<FRAME SRC=[Link]>
</FRAMESET>
</HTML>
Este é o código para gerar os frames.
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 [Link]. Por que ? Porque no código que geramos no
exemplo de frames chamamos a página com o comando <FRAME
SRC=[Link]>, 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 [Link], 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=[Link]> <! Este comando chama as páginas HTML que devem
ocupar as colunas divididas pelo frame>
<FRAME SRC=[Link]>
</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=[Link]>
<FRAME SRC=[Link]>
</FRAMESET>
<FRAMESET ROWS=50%,50%>
<FRAME SRC=[Link]>
<FRAME SRC=[Link]>
</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=[Link]
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=[Link] 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=[Link] MARGINHEIGHT=100>
Dá um espaço de 100 pixels entre as margens superior e inferior do frame.
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:
[Link]
<HTML>
<HEAD>
<TITLE>FRAMES</TITLE>
</HEAD>
<FRAMESET COLS=25%,75%>
<FRAME SRC=[Link] SCROLLING=NO>
<FRAME SRC=[Link] NAME=TESTE>
</FRAMESET>
</HTML>
[Link]
<HTML>
<HEAD>
<TITLE>FRAMES</TITLE>
</HEAD>
<BODY BGCOLOR=YELLOW>
<CENTER><H2>Escolha um Link</H2></CENTER>
<BR>
<A HREF=http:\\[Link]
TARGET=TESTE>Livraria Amazon</A>
<BR>
< A HREF=http:\\[Link] TARGET=TESTE>Pesquisador
YAHOO</A>
<BR>
<A HREF=[Link] TARGET=TESTE>Volta para [Link]</A>
</BODY>
</HTML>
[Link]
<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
[Link]</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 <IFRAME SRC=" nome do frame "> .
Você pode usar os complementos NAME – para especificar um nome que identifica qual
frame está em uso ; WIDTH e HEIGTH para definir o espaço na página utilizado pelo Frame
; ALIGN ( LEFT ou RIGHT ) - para alinhar o frame na página. Lembre-se de fechar a tag
</IFRAME>.
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>
<iframe width=90% height=70% src="[Link]">
</iframe>
</center>
Aqui continua a página normal !
</body>
</html>