Certificado ISO 9001:2000 Nº /98. Centro de Informática CETEP Quintino Elaborada por: Wanderson Mirandela

(1)

Centro de Informática – CETEP Quintino

www.ciquintino.com.br

Elaborada por: Wanderson Mirandela Certificado ISO 9001:2000

(2)

A POLÍTICA DA QUALIDADE DO CI

“Prover cursos de nível básico profissionalizante na área de Informática, adequados

à realidade do mercado de trabalho, buscando a melhoria contínua dos serviços

prestados e da eficácia do Sistema de Gestão, de forma a garantir a plena satisfação

dos seus alunos e colaboradores, através do atendimento aos requisitos da norma

NBR ISO 9001:2000.”

O CURSO DE WEBDESIGN

O treinamento de um Web Designer é baseado em um conteúdo que

visa familiarizar os participantes não apenas para a criação, mas também a

manutenção de Web Sites, compreender os fatores mais importantes no design de

um site, desenvolver conteúdo para a web, utilizar ferramentas para a gestão de

Home Pages, utilizar-se do tratamento digital de informações, além de um conjunto

de diversas soluções gráficas.

Nos dias atuais, ser um Web Designer é ter uma sólida profissão, com

uma forte tendência à expansão deste mercado, em virtude do avanço da

tecnologia. Assim, o aluno estará apto a criar páginas pessoais e profissionais para a

internet. Utilizando algumas das mais modernas e importantes tecnologias do

mercado.

APOSTILA DE WEBDESIGN – Módulo de HTML - 2004

Equipe de Elaboração

Wanderson Mirandela

Revisão

Amanda Tanaka

Aprovação

Sandra Regina Barbosa

(3)

Í

n

d

i

c

e

1. HTML - Introdução

04

1.1 -

Iniciando

um

documento

04 1.2 - TAGs usados no início do documento

05

1.3 -

Títulos

e

subtítulos

05

1.4 -

Formatação

de

textos

06 2. HTML

08

2.1 -

Imagens 08

2.2 - Links

10 3. Listas

11

3.1 -

Listas

ordenadas

11

3.2 -

Listas

não

ordenadas

11 3.3 - Atributos adicionais do elemento UL

12 4. Refresh Page

13 5. Tabelas

14 5.1 - Construindo tabelas com o elemento TABLE

14 5.1.1 - O título da tabela (Elemento CAPTION)

14 5.1.2 - Table Headings (Elemento TH)

14 5.1.3 - Table Data (Elemento TD)

14 5.1.4 - End of Table Row (Elemento TR)

15

5.2 -

Atributos

para

a

Tabela

15

5.2.1 -

BORDER

15

5.2.2 -

ALIGN 16

5.2.3 -

VALIGN

17

(4)

6. Frames

18

6.1 -

Estrutura

18

6.2 -

Sintaxe

18

6.3 -

FRAMESET

19

6.3.1 -

ROWS 19

6.3.2 -

COLS

19 6.4 - FRAME

20 6.4.1 - SRC

20

6.4.2 -

NAME 20

6.4.3 -

SCROLLING

20

6.4.5 -

NORESIZE

21

6.4.6 -

TARGET

21 6.5 - BORDER

22 7. Música

22

8. Caracteres

Especiais

23

9. Exercícios

de

Fixação

24 10. Bibliografia

33

Apostila de Html – Curso WebDesign 3

1

(5)

HTML significa Hypertext Markup Language e é a linguagem de descrição

de documentos usada na WWW - World Wide Web. Ela é orientada por marcadores,

chamados TAGs. Os TAGs são os comandos utilizados pela linguagem HTML.

Cada TAG informa ao programa visualizador (o Browser), como ele deverá

formatar o texto, que deve estar dentro dos sinais de menor que (<) e maior que (>).

Exemplo: <HTML>, <BODY>, etc. Os Tags podem ser únicos ou duplos, com início

e fim. Quando forem duplos, a Barra de Divisão ( / ) indicará, na segunda Tag, o seu

término. Exemplos:

TAG único: <BR>

TAG duplo: <P>....</P>

1

1 .

.

1

1 -

-

I

N

I

C

I

A

N

D

O

U

M

D

O

C

U

M

E

N

T

O

Todo o documento HTML fica contido entre os TAGS: <HTML> e </HTML>.

Dentro destes tags, tem-se duas seções básicas:

HEAD

Contém parâmetros de configuração do documento.

BODY

Contém o documento em si.

A estrutura básica de um documento HTML é:

<html>

<head>

<title>Título da home page</title>

</head>

<body>

Conteúdo da home page!

</body>

</html>

1

1 .

.

2

2 -

-

T

A

G

S

U

S

A

D

O

S

N

O

I

N

Í

C

I

O

D

O

D

O

C

U

M

E

N

T

O

<HTML>...</HTML>

Envolvem todas as seções de um documento (HEAD e BODY).

<HEAD>...</HEAD>

(6)

Envolvem a seção de cabeçalho do documento.

<TITLE>...</TITLE>

Indica o título do documento para o Browser. Os Browsers apresentam este

título na Barra de títulos da sua Janela no Windows.

<BODY>...</BODY>

Envolvem a seção de corpo do documento. Aqui fica o conteúdo principal da

Home Page. Opcionalmente podemos indicar um arquivo de imagem para formar o

fundo, usando a opção: BACKGROUND, descrita mais adiante.

1

1 .

.

3

3 -

-

T

Í

T

U

L

O

S

E

S

U

B

T

Í

T

U

L

O

S

Para demarcar títulos e subtítulos, use os TAGs de HEADER (H1 a H6),

juntamente com as opções CENTER ou BLINK.

Veja alguns exemplos:

Texto inserido entre <H1> e </H1>:

Texto inserido entre <H2> e </H2>:

Texto inserido entre <H3> e </H3>:

Texto inserido entre <H3><CENTER> e </CENTER></H3> :

1

1 .

.

4

4 -

-

F

O

R

M

A

T

A

Ç

Ã

O

D

E

T

E

X

T

O

S

Há dois tipos de formatação em HTML: lógica e física. Os efeitos de apresentação na tela são os mesmos: o motivo da distinção entre eles se deve à idéia básica de independência entre especificação e apresentação. Quando formatamos um trecho de texto como cabeçalho de nível 1, não explicitamos se esse tipo de cabeçalho deve ser em alguma fonte determinada, em um tamanho determinado, justificado à esquerda ou à direita, ou centralizado. Esses detalhes de apresentação são deixados para o browser - o dispositivo

(7)

de apresentação do documento - que pode ser configurado de acordo com o leitor (usuário final).

A formatação lógica segue o significado lógico do texto marcado: um endereço de

e-mail, uma citação etc. Sua apresentação final varia conforme o browser, podendo oferecer resultados mais ricos.

A formatação física especifica explicitamente o estilo que se quer para o texto: itálico,

grifado etc. Sua apresentação final não sofre grandes variações. Estilos Lógicos

<CITE>

Para títulos de livros, filmes, e citações curtas. Exemplo: Assisti Guerra nas Estrelas umas oito vezes! <CODE>

Para indicar trechos de código de programas. Exemplo: for (x=0); cl &&(!feof(stdin)); x++));

<DFN>

Indica definição de uma palavra, em geral apresenta o texto em itálico. Exemplo: CERN: Centre d’Éstudes et Recherches Nucleaires

<EM>

Ênfase, também normalmente apresentado em itálico. Exemplo: É preciso pesquisar muito para encontrar o termo exato. <KBD>

Indica uma entrada via teclado. Exemplo:

Para ler mensagens recebidas, digite pine -i <SAMP>

Indica uma seqüência de caracteres, por exemplo uma mensagem de erro ou um resultado. Exemplo:

O resultado do primeiro applet é: Hello, World! <STRONG>

Forte ênfase, mostrado normalmente em negrito. Exemplo: Antes de enviar um e-mail, confira o campo “Subject:”! <VAR>

Indica variáveis, ou valores que o usuário deverá escrever; geralmente mostrado em itálico. Exemplo:

No campo Login, escreva guest.

Estilos Físicos

(8)

<B>

Quando disponível no browser, é mostrado em negrito (em alguns browsers, pode aparecer sublinhado)

<I>

Itálico (em alguns casos, caracteres inclinados)

<TT>

Tipo teletype - fonte de espaçamento fixo. <U>

Sublinhado; deve ser usado com cuidado, pois confunde-se com a apresentação de links. <STRIKE> ou <S>

Frase riscada. <BIG>

Fonte um pouco maior. <SMALL>

Fonte um pouco menor. <SUB>

Frase em estilo índice, como em H2O.

<SUP>

Frase em estilo expoente_{, como em Km}2_.

Observação: As Marquees

É possível obter o efeito de animação de texto, através do tag <MARQUEE>. Atributos de largura e direção do efeito permitem diversas apresentações diferentes. Por exemplo (o efeito só é executado no Internet Explorer e em versões recentes do Netscape - e de maneiras diferentes):

<MARQUEE BEHAVIOR=SLIDE DIRECTION=RIGHT>Texto</MARQUEE> <MARQUEE BEHAVIOR=SLIDE DIRECTION=LEFT>Texto</MARQUEE> <MARQUEE BEHAVIOR=ALTERNATE DIRECTION=LEFT>Texto</MARQUEE> <MARQUEE WIDTH=30%>Texto</MARQUEE>

<MARQUEE SCROLLAMOUNT=50>Texto</MARQUEE>

2

2 .

.

H

T

M

L

(9)

2

2 .

.

1

1 -

-

I

M

A

G

E

N

S

Pode-se inserir imagens dentro de um documento HTML. Os formatos mais

usados são o GIF e o JPG, ambos com compactação de pixels.

Antes de criar uma página com dezenas de figuras e fotos, lembre-se de que

ao criar e testar sua página em seu micro, todas as imagens serão carregadas

quase que instantaneamente. Contudo, quando sua página estiver na internet, o

tempo para que uma imagem grande seja carregada pode tornar o aceso a sua

página muito difícil.

A quantidade de cores também influi no tamanho da imagem. Se você

digitalizar uma imagem com 65 mil cores, o tamanho do arquivo será muito maior do

que ela tivesse sido capturada com 256 cores.

Para inserir uma imagem, usa-se o tag <IMG>, que é único, não exigindo um

tag para finalizar. Exemplo:

<IMG SRC="figura1.gif">

Os arquivos com as imagens deverão estar armazenados no seu Provedor de

acesso, juntamente com o documento HTML, para que a imagem seja visualizada

pelo usuário.

Atributos básicos de imagem ALT

Indica um texto alternativo, descrevendo brevemente a imagem, que é apresentado no lugar da imagem nos browsers (aquela informação que descreve uma imagem quando paramos a seta do mouse sobre ela). É recomendável que esteja sempre presente.

<IMG SRC="c:\pasta\imagem.gif”” ALT="descrição_da_imagem">

WIDTH e HEIGHT

Atributos de dimensão da imagem, em pixels. Grande parte dos editores HTML coloca automaticamente os valores destes atributos, quando indicamos a inserção de uma imagem. Uma das vantagens de se usar esses atributos é que o browser pode montar mais rapidamente as páginas, por saber de antemão o espaço que deverá ser reservado para elas.

<IMG SRC="imagem" ALT="descrição" WIDTH="largura" HEIGHT="altura">

BORDER

Quando uma frase ou palavra é marcada como um link, ela se apresenta sublinhada; quando uma imagem se torna um link, ganha uma borda azul que indica esta condição. Porém, por questões de apresentação, nem sempre interessa termos essa borda ao redor da imagem. Assim, com o atributo BORDER, podemos controlar esse detalhe.

(10)

Se quisermos uma borda mais larga...

<A HREF="URL"><IMG SRC="imagem" ALT="descrição" BORDER=4></A> Se quisermos uma imagem sem borda...

<A HREF="URL"><IMG SRC="imagem" ALT="descrição" BORDER=0></A>

OBS: Essa borda pode ser apresentada também em imagens que não são âncora de links. Basta aplicar, por exemplo, a BORDER=N dentro da tag IMG SRC. Exemplo:

<IMG SRC="icones/fotoicm.gif" ALT="Foto antiga do ICMC" BORDER=2> Assim, é possível dar mais destaque a uma imagem, sem ser necessário editá-la:

Foto Original Foto com Border=3, dentro da tag IMG SRC

ALIGN

<IMG SRC="imagem" ALT="descrição" ALIGN=”alinhamento”>

Existem também atributos de alinhamento, que produzem os seguintes resultados: ALIGN=TOP Alinha o texto adjacente com o topo da imagem, embora com linhas compridas o resultado não seja muito bom.

ALIGN=MIDDLE Alinha o texto adjacente com o meio da imagem, embora com linhas compridas o resultado não seja muito bom

ALIGN=BOTTOM Alinha o texto adjacente com a parte de baixo da imagem

(default)

ALIGN=RIGHT Alinha imagem à direita, e tudo o que houver ao redor (texto, outras imagens) a partir do topo da imagem.

ALIGN=LEFT Alinha imagem à esquerda, e tudo o que houver ao redor (texto, outras imagens) a partir do topo da imagem.

OBS: Para ter duas imagens, uma em cada margem, numa mesma linha, escreva:

<IMG align=left SRC="imagem.gif" alt="imagem"><IMG align=right SRC="imagem.gif" alt="imagem">...e se pode escrever à vontade entre as imagens!

(11)

Isso resulta em:

Imagens. ...e se pode escrever à vontade entre as

2

2 .

.

2

2 -

-

L

I

N

K

S

Com HTML é possível fazermos ligações de uma região de texto (ou imagem) para um outro documento. Para inserir um link em um documento, utilizamos o tag <A>, da seguinte forma: <A HREF = "arq_destino"> texto ou figura </A>

onde:

arq_destino

é o URL (Uniform Resource Local) do documento de destino; texto ou figura

é o texto ou imagem que servirá de ligação hipertexto do documento sendo apresentado para o documento de destino.

Atributos

<A> tem vários atributos, utilizados de acordo com a ação associada ao link. Os mais usados são:

HREF

Indica o arquivo de destino da ligação de hipertexto. TARGET

Indica o frame em que será carregado o arq_destino.

3

3 .

.

L

i

s

t

a

s

3

3 .

.

1

1 -

-

L

I

S

T

A

S

O

R

D

E

N

A

D

A

S

Listas ordenadas são também denominadas listas numeradas, pois, quando

um navegador encontra um TAG, iniciando uma lista ordenada, ele passa a mostrar

cada item utilizando números, como 1, 2, 3, e assim sucessivamente.

Listas ordenadas são iniciadas pela TAG <OL> e finalizadas com o TAG </OL>.

Cada item utiliza O TAG <LI>.

Exemplo:

(12)

<OL>

<LI>É facil fazer uma Home Page:

<LI>Tem que ter paciência

<LI>Bons recursos

<LI>E não exagerar em imagens

</OL>

Resultado Final:

1. É facil fazer uma Home Page:

2. Tem que ter paciência

3. Bons Recursos

4. E não exagerar em imagens.

3

3 .

.

2

2 -

-

L

I

S

T

A

S

N

Ã

O

R

D

E

N

A

D

A

S

Listas não ordenadas são muito parecidas com as ordenadas. A diferença é o

fato de elas não definirem explicitamente uma ordem, como é no caso as

numeradas. Eles são formados por símbolos, que podem ser bola, quadrado, ou

uma bola vazia. Elas são iniciadas com o TAG <UL> e são respectivamente

terminadas com </UL>, e seus elementos são descritos igual às nem as numeradas:

com <LI>. Exemplo:

<UL>

<LI>Internet

<LI>Intranet

<LI>E-mail

</UL>

Resultado:

• Internet

(13)

• Intranet

• E-mail

3

3 .

.

3

3 -

-

A

T

R

I

B

U

T

O

S

A

D

I

C

I

O

N

A

I

S

D

O

E

L

E

M

E

N

T

O

U

L

O Netscape introduziu o atributo TYPE também em listas ordenadas. Ele

recebe o tipo do marcador que será utilizado ao lado dos itens da lista, o qual pode

ser CIRCLE, SQUARE OU DISC, respectivamente, bola, quadrado, ou uma bola

vazia.

Exemplo:

<html> <head> <title>Listas</title> </head> <body>

Listas com Marcadores <b>sem atributos</b>: <UL>

<LI>Internet <LI>Intranet <LI>E-mail </UL>

Listas com Marcadores e o type <b>square</b>: <UL type="square">

Listas com Marcadores e o type <b>circle</b>: <UL type="circle">

Listas com Marcadores e o type <b>disc</b>: <UL type="disc"> <LI>Internet <LI>Intranet <LI>E-mail </UL> </body> </html>

(14)

4

4 .

.

R

e

f

r

e

s

h

P

a

g

e

São páginas normalmente sem links, que chamam outras depois de um

determinado tempo dentro dela, sem nenhuma interferência do internauta. Para que

o Refresh ocorra, basta colocar no documento a seguinte linha de comando, dentro

do HEAD:

<META HTTP-EQUIV="REFRESH" CONTENT="segundos; URL=Documento.htm">

Exemplo:

<HTML>

<HEAD>

<META HTTP-EQUIV="REFRESH" CONTENT="5; URL=http://www.cade.com.br">

<TITLE> Título da Página </TITLE>

</HEAD>

<BODY bgcolor="Cornsilk">

<center><font color="Darkred" size="5" face="simsun">Esta é uma página de teste

de</font></h1></center>

<center><font color="Darkred" size="7"

face="simsun">Redirecionamento</font></h1></center>

</BODY>

</HTML>

5

5 .

.

T

a

b

e

l

a

s

Tabelas correspondem a um ótimo formato para originar informações, e é por

essa razão que eles foram acrescentados à linguagem HTML

5

5 .

.

1

1 -

-

C

O

N

S

T

R

U

I

N

D

O

T

A

B

E

L

A

S

C

O

M

O

E

L

E

M

E

N

T

O

T

A

B

L

E

A TAG <TABLE> é utilizada para a representação de dados tabulares. A

estrutura e o conteúdo da tabela devem ficar dentro das TAGs <TABLE> </TABLE>

5

5 .

.

1

1 .

.

1

1 -

-

O

T

Í

T

U

L

O

D

A

T

A

B

E

L

A

(

E

L

E

M

E

N

T

O

C

A

P

T

I

O

N

)

A TAG <CAPTION> especifica o título de uma tabela. Por exemplo:

<CAPTION>Notas da primeira avaliação</CAPTION>

5

5 .

.

1

1 .

.

2

2 -

-

T

A

B

L

E

H

E

A

D

I

N

G

S

(

E

L

E

M

E

N

T

O

T

H

)

(15)

A TAG <TH> é usada para especificar as células de cabeçalho da tabela.

Essas células são diferentes das outras, pois seu conteúdo aparece geralmente em

negrito. O elemento TH pode ser apresentado sem conteúdo algum: isso

corresponde a uma célula em branco. As tabelas podem ainda conter mais de um

TH para uma dada coluna, ou linha, ou simplesmente não conter nenhum elemento

TH, isto é, não conter em nenhuma célula um destaque. O TAG dela é:

<HT>texto em destaque</HT>

Observações: Elas devem ficar, assim como todas, dentro da TAG <TABLE>.

5

5 .

.

1

1 .

.

3

3 -

-

T

A

B

L

E

D

A

T

A

(

E

L

E

M

E

N

T

O

T

D

)

A TAG <TD> especifica a células de dados de uma tabela. Por se tratar de

dados comuns (e não cabeçalhos), essas células possuem seu conteúdo escrito em

fonte normal, sem nenhum destaque e alinhamento à esquerda. Assim como o TH,

pode-se construir células em branco, usando o elemento TD, como no exemplo a

seguir:

<TD>Células de dados</TD>

Observações: A TAG de terminação, <TD>, também é opcional.

5

5 .

.

1

1 .

.

4

4 -

-

E

N

D

O

F

T

A

B

L

E

R

O

W

(

E

L

E

M

E

N

T

O

T

R

)

A TAG <TR> indica o fim de uma linha na tabela. Cada linha da tabela pode

conter várias células e, portanto, é necessário que se faça uso de uma marcação

que indique exatamente o ponto de quebra de uma linha e início de outra. Toda linha

deve terminar com um <TR>, com exceção da última linha da tabela, que dispensa o

TR porque o uso da própria marcação de fim de tabela </TABLE> torna implícito o

fim da linha.

5

5 .

.

2

2 -

-

A

T

R

I

B

U

T

O

S

P

A

R

A

T

A

B

E

L

A

As marcações das tabelas podem apresentar resultados diferentes, se

acompanhadas de alguns atributos. Os principais são:

5

5 .

.

2

2 .

.

1

1 -

-

B

O

R

D

E

R

(16)

Um atributo opcional para ser usado com TABLE é o atributo BORDER. Se

ele estiver presente, a tabela será formatada com linhas de borda.

Atenção aos alunos do Centro de Informática: Todas as explicações acima como

as que estão por vir, foram feitas, para que você possa saber o que significa a TAG

em questão!

Exemplo:

<CAPTION> Nota da primeira avaliação </CAPTION> <TD>Notas/Alunos</TD> <TH>Eduardo</TH> <TH>Ana Lúcia</TH> <TH>Andréa</TH> <TR> <TH>Notas</TH> <TD>8,0</TD> <TD>9.3<TD> <TD>7.8</TD> <TR> <TH>No de Inscrição</TH> <TD>376234809</TD> <TD>387349048</TD> <TD>502350432</TD> </TABLE>

Veja o resultado:

O atributo BORDER pode também receber um valor que vai estabelecer qual

a espessura (além da existência) da linha de borda da tabela (BORDER="valor"). Se

o valor atribuído for 0 (zero), o BORDER funciona exatamente como o caso padrão,

sem o BORDER. Dessa maneira, é possível colocar tabelas em maior destaque,

atribuindo um valor maior que 1 para o BORDER.

<TABLE BORDER=5> <TD>TESTE</TD> <TD>TESTE2</TD> <TD>TESTE3</TD> <TR> <TD>TESTE4</TD> <TD>TESTE5</TD>

(17)

</TABLE>

Veja o resultado:

5

5 .

.

2

2 .

.

2

2 -

-

A

L

I

G

N

Este atributo pode ser aplicado a TH, TD ou TR e controla o alinhamento do

texto dentro de uma célula, com relação as bordas laterais. Quando aplicado a TR,

ele define o alinhamento de toda uma linha da tabela.

O exemplo abaixo mostra como o ALIGN aceita os valores LEFT, CENTER ou

RIGHT, para alinhar à esquerda, centralizar ou alinhar à direita, respectivamente.

<TABLE BORDER>

<TD>Primeira célula</TD>

<TD>Segunda célula</TD>

<TD>Terceira célula</TD>

<TR>

<TD ALIGN="CENTER">Centro</TD>

<TD ALIGN="LEFT">Esquerda</TD>

<TD ALIGN="RIGHT">Direita</TD>

<TR>

</TABLE>

Veja o resultado:

5

5 .

.

2

2 .

.

3

3 -

-

V

A

L

I

G

N

(18)

Pode ser aplicado a TH e TD e define o alinhamento do texto em relação às

bordas superior e inferior.

Aceita os valores TOP, MIDDLE, E BOTTOM para alinhar na parte de cima,

no meio e na parte de baixo, respectivamente.

Veja o exemplo:

<TABLE BORDER>

<TD>Teste de alinhamento</TD>

<TD VALIGN="TOP">TOP</TD>

<TD VALIGN="middle">MIDDLE</TD>

<TD VALIGN="bottom">BOTTOM</TD>

</TABLE>

Veja o resultado:

6

6 .

.

F

r

a

m

e

s

Os FRAMES são divisões de telas do seu browser que permitem a utilização

de vários documentos no formato HTML. Este recurso permite criar páginas HTML

que podem ser visualizadas simultaneamente na janela do Browser, compartilhando

o espaço disponível.

Sem o recurso de frames, para visualizar três páginas diferentes, por

exemplo, o usuário necessitaria acessa-las individualmente por meio de uma página

inicial que contivesse um menu, ou então, acessar uma página por vez, no browser.

6

6 .

.

1

1 -

-

E

S

T

R

U

T

U

R

A

Assim como o corpo do HTML, os FRAMES tem sua estrutura. Eles entram

no lugar do corpo, substituindo o <BODY></BODY> por

<FRAMESET></FRAMESET>.

Exemplo:

(19)

<HTML>

<HEAD>

<TITLE> Título do Documento </TITLE>

</HEAD>

<FRAMESET>

Sintaxe dos Frames

</FRAMESET>

</HTML>

6

6 .

.

2

2 -

-

S

I

N

T

A

X

E

Primeiramente devemos fazer um documento HTML para ele ser especificado

pela sintaxe de FRAMES, no caso chamado de Frame1.htm.

<HTML>

<HEAD>

<TITLE> Frame 1 </TITLE> </HEAD>

<BODY>

<FONT SIZE=6> <B> Frame n1 </B> </FONT> </BODY>

</HTML>

6

6 .

.

3

3 -

-

F

R

A

M

E

S

E

T

A primeira especificação é o FRAMESET, que é acompanhado pelas

definições ROWS e COLS.

6

6 .

.

3

3 .

.

1

1 -

-

R

O

W

S

Especifica o numero de FRAMES e a altura de cada um.

Exemplo:

<FRAMESET ROWS="20%,30%,50%"> <FRAME SRC="FRAME1.HTM">

(20)

Neste exemplo de cima, ele chama 3 FRAMES, o 1º com 20% da tela, o 2º

com 30% da tela, o 3º com 50% da tela (ambos em altura).

6

6 .

.

3

3 .

.

2

2 -

-

C

O

L

S

Especifica o numero de FRAMES e a largura de cada um.

Exemplo:

<FRAMESET COLS="20%,30%,50%"> <FRAME SRC="FRAME1.HTM"> <FRAME SRC="FRAME1.HTM"> <FRAME SRC="FRAME1.HTM"> </FRAMESET>

Neste exemplo de cima, ele chama 3 FRAMES, o 1º com 20% da tela, o 2º

com 30% da tela, o 3º com 50% da tela (ambos em largura).

6

6 .

.

4

4 -

-

F

R

A

M

E

A segunda especificação é o FRAME, que é acompanhado pelas definições

SRC, NAME, SCROLLING, NORESIZE, TARGET.

6

6 .

.

4

4 .

.

1

1 -

-

S

R

C

Especifica o documento de formato HTML chamado para o FRAME.

Indispensável, por que sem ele o documento aparecerá vazio, só com as divisões.

Exemplo:

6

6 .

.

4

4 .

.

2

2 -

-

N

A

M

E

Especifica o nome do documento de formato HTML chamado para o FRAME.

É extremamente necessário para o uso do TARGET, que será visto a seguir.

(21)

Exemplo:

<FRAME SRC="FRAME1.HTM" NAME="Principal"> <FRAME SRC="FRAME1.HTM">

6

6 .

.

4

4 .

.

3

3 -

-

S

C

R

O

L

I

N

G

Define se o Frame terá barra de rolagem, o default é Auto.

Fornece as opções: Yes, No, Auto.

Yes - Exibe a barra de rolagem independente do tamanho do documento.

No - Não exibe a barra de rolagem, mesmo que o documento seja maior que o

tamanho especificado.

Auto - Só exibe a barra de rolagem se o documento for maior que a área

especificada.

Exemplo:

<FRAMESET COLS="20%,30%,50%"

<FRAME SRC="FRAME1.HTM" SCROLLING="no"> <FRAME SRC="FRAME1.HTM" SCROLLING="yes"> <FRAME SRC="FRAME1.HTM" SCROLLING="auto"> </FRAMESET>

6

6 .

.

4

4 .

.

4

4 -

-

N

O

R

E

S

I

Z

E

Impossibilita o usuário de mudar o tamanho da área especificada do FRAME.

Por default o usuário pode mudar esta área.

Exemplo:

<FRAMESET COLS="20%,30%,50%">

<FRAME SRC="FRAME1.HTM" NORESIZE>

(22)

<FRAME SRC="FRAME1.HTM">

</FRAMESET>

6

6 .

.

4

4 .

.

5

5 -

-

T

A

R

G

E

T

Define qual a área (FRAME) que aparecerá o documento especificado pelo

link.

Mais útil na utilização de Menus e índices.

Necessita do NAME.

Exemplo:

<FRAMESET COLS="20%,30%,50%">

<FRAME SRC="FRAME1.HTM" NAME="Principal">

<FRAME SRC="FRAME1.HTM">

</FRAMESET>

O Link:

<A HREF="http://www.microsoft.com" TARGET="Principal"> Microsoft </A>

Se você quiser criar um link que chama uma nova tela do browser basta

colocar TARGET="um nome que não existe".

6

6 .

.

5

5 -

-

B

O

R

D

E

R

Define qual a borda que o FRAME terá.

Mais útil na utilização de BACKGROUNDS iguais.

Exemplo:

(23)

<FRAMESET COLS="20%,30%,50%" FRAMEBORDER="NO" BORDER=0> <FRAME SRC="FRAME1.HTM" FRAMEBORDER="NO" BORDER=0> <FRAME SRC="FRAME1.HTM" FRAMEBORDER="NO" BORDER=0> <FRAME SRC="FRAME1.HTM" FRAMEBORDER="NO" BORDER=0> </FRAMESET>

7

7 .

.

M

ú

s

i

c

a

Existem 2 maneiras de colocar músicas em uma home page, através do

HTML. A primeira é com o TAG <BGSOUND> que só é reconhecido pelo Internet

Explorer. Para utilizar este TAG siga o exemplo :

<BGSOUND SRC="arquivo.mid">

Onde arquivo.mid é o arquivo de música. Caso você queira que a música

repita-se, adicione o atributo loop="infinite".

A segunda maneira é com o TAG <EMBED> que, por ser reconhecido pelo

Internet Explorer e Netscape, é recomendado. Para utilizá-lo, siga o exemplo :

<EMBED SRC="arquivo.mid">

Obs: É recomendável usar arquivos midi, por serem bem menores que os

wavs!

8

8 .

.

C

a

r

a

c

t

e

r

e

s

E

s

p

e

c

i

a

i

s

Em determinados momentos da criação de página em HTML, pode-se fazer

necessário a utilização de caracteres que, normalmente, podem não ser

reconhecidos pelo browser.

Estes caracteres são chamados “caracteres especiais”. Veja a tabela a

seguir, contendo alguns exemplos:

Á Á

á á

Â &Acirc

â â

À À

à à

(24)

Å Å

å å

Ã Ã

ã ã

Ä Ä

ä ä

Æ Æ

æ æ

É É

é &eacute

Ê Ê

ê ê

È È

è è

Ë Ë

ë ë

Ð Ð

ð ð

Í Í

í &iacute

Î Î

î î

Ì Ì

ì ì

Ï Ï

ï ï

Ó Ó

ó ó

Ô Ô

ô &ocirc

Ò Ò

ò ò

Ø Ø

ø ø

Õ Õ

õ õ

Ö Ö

ö ö

Ú Ú

ú ú

Û Û

û û

Ù Ù

ù ù

Ü Ü

ü ü

Ç Ç

ç ç

Ñ Ñ

ñ ñ

< <

> >

& &

" "

® ®

© ©

Ý Ý

ý ý

Þ Þ

þ þ

ß ß

º º

ª &170;

¹ ¹

² ²

³ ³

ƒ 

† 

‡ 

‰ 

¢ ¢

£ £

« «

± ±

» »

· ·

¼ ¼

½ ½

¾ ¾

¿ ¿

× ×

÷ ÷

¡ ¡

¤ ¤

9

9 .

.

E

x

e

r

c

í

c

i

o

s

d

e

F

i

x

a

ç

ã

o

Os exercícios de fixação a seguir estão divididos em níveis, de acordo com o

conteúdo desenvolvido nesta apostila. São 5 níveis:

Exercícios de fixação – Nível 1

1) Estrutura básica em HTML <html>

(25)

2) Estrutura simples contendo informações <html>

<head>

<title>Meu primeiro site em HTML</title> </head>

<body>

Esta é a minha primeira página em HTML! </body>

</html>

3) Estrutura contendo quebras de linha <html>

<head>

<title>Exemplos de Quebras de Linha</title> </head>

<body>

Primeira linha contendo texto<br> Segunda linha contendo texto<br> Terceira linha contendo texto<br> Quarta linha contendo texto<p> Quinta linha contendo texto<p> Sexta linha contendo texto<p>

Repare a diferença de espaçamento entre as duas tags de quebra de linha. A tag br tem por objetivo inserir uma quebra de linha imediatamente após ser inserida, enquanto a tag p insere duas linhas em branco.

</body> </html>

4) Estrutura contendo linhas horizontais divisórias <html>

<head>

<title>Exemplos de linhas divisórias horizontais</title> </head> <body> Paulo <br> Beto<br> João<br><hr> Ana<br> Beatriz<br> Lúcia<br><hr>

(26)

Ao ser inserida no meio desta linha, é mostrada uma barra na próxima linha <hr> e o restante do texto na linha seguinte.

</body> </html>

5) Estrutura contendo estilos de texto <html>

<head>

<title>Estilos de texto</title> </head>

<body>

São vários os estilos que podem ser aplicados no texto, em HTML. Eis alguns exemplos: <p>

<b>Negrito</b> - aplica o efeito negrito ao texto <br> <i>Itálico</i> - aplica o efeito itálico ao texto <br> <u>Sublinhado</u> - sublinha o texto <br>

<strong>Strong</strong> - Similar ao negrito <br>

<big>Big</big> - faz com que texto aumente de tamanho <br> <small>Small</small> - faz com que texto reduza de tamanho <br>

<tt>Typerwriter</tt> - faz com o texto fique similar ao de uma máquina de escrever <br> <sup>Sobrescrito</sup> - Eleva o texto e diminui o seu corpo <br>

<sub>Subscrito</sub> - Rebaixa o texto e diminui o seu corpo <br> <marquee>Marquee - faz com que o texto deslize pela tela </marquee> </body>

</html>

6) Estrutura contendo formatação de texto <html>

<head>

<title>Formatação de texto</title> </head>

<body>

</html>

7) Estrutura contendo cor de fundo e texto centralizado <html>

<head><title>Fundo colorido e texto alinhado</title></head> <body bgcolor=“darkblue”>

(27)

<center><font size=7 color=#ffffff face="arial black">Fundo Colorido</font></center><p> <center><font size=5 color=#ffffff face="comic sans ms">Esta página contém o fundo colorido com as letras em branco.</font></center>

</body> </html>

Exercícios de fixação – Nível 2

1) Estrutura contendo cor de fundo, alinhamentos de parágrafo e cabeçalhos <html>

<head>

<title>Fundo colorido com parágrafos alinhados e cabeçalhos</title> </head>

<body bgcolor=#ffff99> <h1>Cabeçalhos</h1>

A palavra “cabeçalho”, acima digitada, é um exemplo de cabeçalho no tamanho H1. Em HTML os cabeçalhos variam de H1 a H6, sendo H1 o maior e a seqüência decrescente. Os cabeçalhos têm o objetivo de servir como títulos, textos simples ou em destaque, pois possuem padrões diferenciados.<hr>

<p align=“center”><h1>Alinhamentos</h1></p>

Para alinharmos textos em HTML, utilizamos a tag <b>p align=</b>. Os alinhamentos podem ser de três tipos:<p>

<p align=“left”>left (ou alinhamento à esquerda, que é o padrão de qualquer editor de textos).</p>

<p align=“center”>center (ou alinhamento centralizado).</p> <p align=“right”>right (ou alinhamento à direita).</p>

</body> </html>

2) Estrutura contendo fundo com imagem (arquivo .GIF ou .JPEG) <html>

<head>

<title>Fundo contendo imagem</title> </head>

<p align="center"><font size=6 color=#ffffff face="comic sans ms">Bem vindos à minha Home Page</font></p>

</body> </html>

3) Estrutura contendo imagens e textos <html>

(28)

<head>

<title>Imagens com e sem bordas</title> </head>

<font size=4 face=“tahoma” color=#330099>Para inserir imagens em HTML, como fotos e figuras, é necessário utilizar a tag <b>img src</b>, mais o nome completo do arquivo que será inserido como figura, inclusive a extensão. Algumas imagens podem vir com uma borda, e para retira-la, utiliza-se a tag <b>border=</b> mais o número zero. Exemplo: <p></font>

<center><img src=“garfield.gif” border=0> Imagem contendo a tag border=0</center><br> <center><img src=“garfield.gif” border=6> Imagem contendo a tag border=5</font

></center><br> </body> </html>

4) Estrutura contendo alinhamento de imagens <html>

<head>

<title>Alinhamento de imagens</title> </head>

<img src="garfield.gif" align="bottom"> Esta figura possui o alinhamento <b>bottom</b><br><br><br>

<img src="garfield.gif" align="middle"> Esta figura possui o alinhamento <b>middle</b><br><br><br>

<img src="garfield.gif" align="top"> Esta figura possui o alinhamento <b>top</b><br><br><br>

<img src="garfield.gif" align="left"> Esta figura possui o alinhamento <b>left</b><br><br><br><br><br><br><br><br><br><br>

<img src="garfield.gif" align="right"> Esta figura possui o alinhamento <b>right</b> </body>

</html>

5) Estrutura contendo alterações nos tamanhos das imagens <html>

<head>

<title>Tamanhos das imagens</title> </head>

<img src="garfield.gif"> O tamanho desta figura não foi alterado<p>

<img src="garfield.gif" widht=50 height=50> O tamanho foi alterado para width e height 50<p>

<img src="garfield.gif" widht=200 height=200> O tamanho foi alterado para width e height 200<p>

A tag <b>widht</b> refere-se à largura da imagem e a tag <b>height</b> se refere à altura. </body>

</html>

(29)

Exercícios de fixação – Nível 3

1) Estrutura contendo link para e-mail <html>

<head>

<title>Links para e-mail</title> </head>

Em HTML textos e imagens podem servir como links, ou seja, ligações para outras páginas no próprio micro, sites da internet o qual chamamos URL (Uniform Resource Locator) e até mesmo para facilitar o envio de e-mails.A tag utilizada para criação de links chama-se <b>a href=</b>.<p>

Exemplo de link para e-mail utilizando texto: <a href=mailto:info.prof@bol.com.br>Entre em contato</a><p>

Exemplo de link para e-mail utilizando figura: <a href=mailto:info.prof@bol.com.br><img src="garfield.gif" border=0></a>

</body> </html>

2) Estrutura contendo link para URL <html>

<head>

<title>Links para e-mail</title> </head>

Exemplos de links para URL, ou seja, para endereços de sites já hospedados na internet:<p>

Exemplo de link utilizando texto: <a href=http:www.globo.com>Globo.com</a><p> Exemplo de link utilizando figura: <a href=http:www.cade.com.br><img src="garfield.gif" border=0 align="middle"></a>

</body> </html>

3) Estrutura contendo tabelas <html>

<head>

<title>Tabelas</title> </head>

O uso de tabelas é essencial para muitas das páginas existentes na web. Para se utilizar estas tabelas em HTML, necessita-se de mais de uma tag. As mais utilizadas são:<br>

(30)

<b>tr</b> - Serve para indicar o início e o final de uma linha da tabela<br> <b>td</b> - Serve para indicar cada célula da tabela.<p>

<table border> <tr> <td>Linha 1 - Coluna 1</td> <td>Linha 1 - Coluna 2</td> <td>Linha 1 - Coluna 3</td> </tr> <tr> <td>Linha 2 - Coluna 1</td> <td>Linha 2 - Coluna 2</td> <td>Linha 2 - Coluna 3</td> </tr> </table><p> <table border=6> <tr> <td>Ana e João</td> <td>Ana e Pedro</td> </tr> <tr> <td>Maria e João</td> <td>Maria e Pedro</td> </tr> </table><p> <table border=0> <tr> <td>Brasil</td> <td>Chile</td> </tr> <tr> <td>Hungria</td> <td>Dinamarca</td> </tr> </table> </body> </html>

Exercícios de fixação – Nível 4

1) Estrutura contendo Listas Ordenadas e Não-Ordenadas <html>

<head>

<title>Listas Ordenadas e Não-Ordenadas em HTML</title> </head>

(31)

<H2><p align=center>Listas</p></H2>

A tag utilizada para inserir Listas Ordenadas é a tag OL (Odered List). Exemplo: <OL>

<LI>Primeiro item da lista <LI> Segundo item da lista <LI> Terceiro item da lista </OL><BR>

A tag utilizada para inserir Listas Não-Ordenadas é a tag UL (Unordered List). Exemplo: <UL>

<LI> Primeiro item da lista <LI> Segundo item da lista <LI> Terceiro item da lista </UL>

</body> </html>

2) Estrutura alinhamento Justify de parágrafos <html>

<head>

<title>Alinhamento Justify</title> </head>

<p align=”justify”>Quando o Web Design necessitar de um alinhamento mais específico, no caso, o Justificar, que alinha o texto tanto à sua direita quanto à esquerda, será necessário a utilização da tag <b>justify</b>, dentro do p align. Este texto, por exemplo, está alinhado de forma justificada, como em um editor de textos igual ao pagemaker ou ao Microsoft Word.</p>

</body> </html>

Exercícios de fixação – Nível 5

1) Estrutura contendo variações de Marquee <html> <head> <title>Teste de Marquee</title> </head> <body bgcolor=#cc9966> <marquee>Marquee normal</marquee>

<marquee behavior="slide">Marquee com behavior (comportamento, tipo) slide</marquee> <marquee behavior="slide" scrollamount=100>Marquee com behavior slide e scrollamount (velocidade) 100</marquee>

<marquee behavior="alternate">Marquee com behavior alternate</marquee>

(32)

<marquee behavior="alternate" scrollamount=50>Marquee com behavior alternate e scrollamount 50</marquee>

</body> </html>

2) Estrutura contendo background com imagem de fundo fixa <html>

<head>

<title>Background com imagem de fundo fixa</title> </head>

<p align="center"><font size=6 color=#ffffff face="comic sans ms">Bem vindos à minha Home Page</font></p>

</body> </html>

3) Estrutura para transformar o Site em página inicial do usuário <html>

<head>

<title>Página Inicial</title> </head>

<p align="center"><font size=6 color=#ffffff face="impact">Welcome to Fire’s Page</font></p>

<a href=”#” onClick=”this.style.behavior=’url(default#homepage)’; this.setHomePage(‘http://www.globo.com’);”>Clique aqui</a> </body>