HTML

www.idort.com.br

www.telecentros.sp.gov.br

Realizao

http://www.idort.com.br/http://www.telecentros.sp.gov.br/

Rev00 17/07/12

i | P g i n a

Com a disseminao das redes de computadores e, principalmente,

com o aparecimento da Internet, ficou claro o impacto social das chamadas

Tecnologias da Informao e Comunicao, as TICs. Ao trabalhar e se

comunicar por meio dessas redes as pessoas e as organizaes transformam

o modo como produzem, trocam e consomem bens materiais e imateriais.

Abre-se para essas pessoas um enorme leque de oportunidades tanto de

negcios, trabalho, educao, cultura, lazer, quanto relacionamento.

Nessa perspectiva, percebendo as particularidades de uma proposta

de Incluso Digital, foi implantado o Programa Telecentro pela Prefeitura

Municipal de So Paulo com acesso livre aos servios de informtica, voltado

populao que vive em situao de vulnerabilidade social.

O IDORT/SP contribui ativamente com o programa Telecentro desde

2005, quando assumiu a responsabilidade pelo gerenciamento do Programa

e, consequentemente, a administrao dos 355 postos do Telecentro,

atravs de servio de planejamento e atividades de incluso digital, sendo

responsvel por sua operao e controle. A incluso digital realizada

atravs de cursos de capacitao, incluso e educao digital, que visam

fortalecer o aprendizado dos jovens no ensino fundamental e a capacitao

profissional para melhor insero no mercado de trabalho.

Rev00 17/07/12

ii | P g i n a

Centro de Treinamento

O Centro de Treinamento Incluso Digital o departamento do

IDORT responsvel por promover e ampliar o desenvolvimento profissional

de todos os colaboradores que atuam, principalmente, no Programa

Telecentros da Cidade de So Paulo, cujo objetivo a Incluso Social e

Digital de todos cidados. So oferecidos cursos tcnicos, pedaggicos e

oficinas para aprimorar os servios prestados populao.

O Centro de Treinamento oferece cerca de 4 mil capacitaes por

ano, com vinte e oito treinamentos diferenciados:

rea Pedaggica: oferece 7 cursos comportamentais: Integrao

Pedaggica e Cidadania, Plano de Aula, Elaborao de Projetos, Organizao

no Trabalho, Atendimento ao Pblico, Competncia e Liderana e Integrao

Pedaggica e Cidadania - Mapeamento Social.

rea Tcnica: oferece 11 cursos tcnicos que explora os recursos e

software disponibilizados: Introduo Informtica - GNU/LINUX, Editor de

Textos - Writer, Editor de Planilhas - CALC, Digitao, GMP, GIFS, Lgica de

Programao, HTML, PHP/ Mysql, CSS, IMPRESS - Apresentao e Marketing

Pessoal.

rea Oficina: oferece 11 oficinas que exploram os temas atravs

dos recursos e software disponibilizados: Comunidade e Meio Ambiente,

Telemarketing, Blog, Prticas de Escritrio, Tcnicas de Vendas, E-mail,

Pesquisa na Rede, Telecriana, Mercado de Trabalho, Introduo Arte

Digital, Atendimento ao Cliente.

A inscrio e participao dos funcionrios so definidas pelo

Supervisor Tcnico de acordo com as vagas disponibilizadas pelo Centro de

Treinamento. Somente os funcionrios capacitados possuem autorizao

para ministrar os contedos oficiais nos Telecentros.

O IDORT disponibiliza alguns workshops e palestras gratuitamente,

nos quais os funcionrios podero se inscrever, desde que tenham

autorizao do Supervisor Tcnico I.

Rev00 17/07/12

iii | P g i n a

Sumrio

1 Objetivo ............................................................................... 6

2 Justificativa ......................................................................... 6

3 Pginas Web ........................................................................ 7

4 Home Page .......................................................................... 7

5 O que so Browsers? ........................................................... 8

6 Protocolo HTTP .................................................................... 8

7 URL ...................................................................................... 9

8 Como Planejar seu Site ....................................................... 9

9 Criando o Tipo Certo de Site .............................................. 11

10 O que HTML? .................................................................. 11

10.1 O que voc pode fazer com o HTML? .......................... 12

10.2 O que necessrio para trabalhar com HTML? ............ 12

11 Sintaxe dos comandos HTML ............................................ 12

11.1 Como Exibir o Cdigo HTML de uma Pgina da Internet 13

12 Estrutura Bsica do HTML ................................................. 13

12.1 Elementos Bsicos do HTML ....................................... 14

13 Ttulos e Subttulos ........................................................... 15

13.1 Exerccio 01 ............................................................... 16

14 Acentuao ........................................................................ 16

14.1 Exerccio 02 ............................................................... 17

15 Inserindo comentrios ...................................................... 18

16 Formatao de Textos ....................................................... 19

16.1 Marcao FONT ......................................................... 19

Rev00 17/07/12

iv | P g i n a

16.2 Exerccio 03 ............................................................... 21

16.3 Os principais Comandos de Estilo de Texto: ................. 22

16.4 Movimentando o texto Marquee ............................... 22

16.5 Exerccio 04 ............................................................... 23

17 Formatao de Pargrafos ............................................... 24

17.1 Exerccio 05 ............................................................... 25

18 Linhas Horizontais ............................................................ 25

18.1 Exerccio 06 ............................................................... 26

19 Imagens ............................................................................ 27

19.1 Principais Diferenas entre as Imagens GIF e JPEG ....... 28

19.2 Qual Formato Escolher? .............................................. 29

19.3 Exerccio 07 ............................................................... 30

19.4 Definir uma Imagem no Plano de fundo ....................... 30

19.5 Exerccio 08 ............................................................... 31

20 Hyperlinks ......................................................................... 31

20.1 Definir um Link Externo .............................................. 32

20.2 Exerccio 09 ............................................................... 33

20.3 Definindo um Link Interno........................................... 33

20.4 Exerccio 10 ............................................................... 34

20.5 Definir um Link de Correio Eletrnico Mailto .............. 35

20.6 Acrescentar no Exerccio 10......................................... 36

20.7 Definir um Link para Outro Site ................................... 36

20.8 Acrescentar no Exerccio 10......................................... 36

20.9 Definir uma Imagem como Link ................................... 37

21 Listas ................................................................................ 37

21.1 Listas Ordenadas ........................................................ 37

21.2 Exerccio 11 ............................................................... 39

21.3 Listas No Ordenadas ................................................. 40

21.4 Exerccio 12 ............................................................... 40

Rev00 17/07/12

v | P g i n a

21.5 Lista de Definio ....................................................... 42

21.6 Exerccio 13 ............................................................... 42

22 Tabelas .............................................................................. 43

22.1 Atributos de uma Tabela............................................. 44

22.2 Exerccio 14 ............................................................... 45

22.3 Atributos da marcao ................................ 46

22.4 Acrescentar no Exerccio 14 a linha abaixo:.................. 47

22.5 Atributos da marcao ....................................... 48

22.6 Atributos das marcaes e ...................... 48

22.7 Exerccio 15 ............................................................... 49

23 Formulrios ....................................................................... 51

23.1 Atributos da marcao ................................. 52

23.2 Exerccio 16 ............................................................... 58

24 Frames ............................................................................... 60

24.1 Atributos HTML para frames ....................................... 61

24.2 Exerccio 17 ............................................................... 64

24.3 Links em Frame alvo .................................................. 66

25 Iframe Inline Frame ....................................................... 67

25.1 Exerccio 18 ............................................................... 68

26 Plano de Aula ..................................................................... 70

27 Bibliografia ........................................................................ 74

Rev00 17/07/12

6 | P g i n a

1 OBJETIVO

Possibilitar e contribuir para o conhecimento dos colaboradores que

atuam no Programa Telecentros da Prefeitura de So Paulo para que

possam se apropriar, criar e elaborar homepages utilizando a linguagem

HTML (Hyper Text Markup Language), Desta forma, podero multiplicar os

contedos aos usurios para que estes possam explorar sua criatividade

alm de ampliar os conhecimentos sobre os diversos recursos da WEB.

2 JUSTIFICATIVA

Com o avano da tecnologia muitas vezes condiciona os cidados a

se apropriarem cada vez mais das informaes disponibilizadas na rede.

Diariamente so acessados milhares de endereos na internet, por esta

razo os usurios necessitam mais conhecimentos para que, alm de terem

acesso rede, possam criar e publicar uma pgina na web.

O HTML possibilitar aos futuros desenvolvedores a criao e o

desenvolvimento da estrutura das pginas web e, como base de

conhecimento, condies para que possam futuramente aprimorar suas

pginas utilizando outros recursos.

Rev00 17/07/12

7 | P g i n a

3 PGINAS WEB

Pginas Web, documentos HTML ou mesmo pginas na Internet,

so documentos localizados em um servidor especfico e acessveis

mundialmente atravs da Internet. As pginas podem ser simples, com

algumas linhas de texto, ou ter milhares de pginas em um nico site.

A publicao de uma pgina, ao contrrio do que se pensa, no

complicada, tampouco dispendiosa. Alguns provedores de acesso fornecem

espao em seu servidor para que os usurios ou os assinantes do sistema

possam hospedar seu site e, mesmo quando pago, no to caro.

Em uma pgina pessoal, possvel disponibilizar diversas

informaes, tais como: poemas, fotos do animal de estimao, desenhos

dos filhos, comentrios relativos ao trabalho, dentre outros. O limite a

imaginao do usurio e o espao em disco disponibilizado pelo provedor

de hospedagem.

4 HOME PAGE

a pgina inicial ou a pgina de entrada de um site. Uma

apresentao da Web um conjunto de pginas estruturadas sobre um

determinado contedo que pode ser composto por textos, imagens,

diagramas. Esta apresentao fica armazenada em um local chamado Site,

traduo literal de Stio, ou seja, um lugar na internet.

Rev00 17/07/12

8 | P g i n a

5 O QUE SO BROWSERS?

Browser, tambm conhecido como navegador uma ferramenta

primordial que tem como funo localizar e interpretar documentos na

internet. Com o passar do tempo os browsers foram ficando cada vez mais

sofisticados com incluso de imagens, novos mtodos de formatao de

texto, reconhecimento de novos formatos de dados, capacidade de

comunicao por voz e recepo de vdeo e udio. H dezenas de browsers

diferentes, sendo o Mozilla Firefox um dos mais usados no Linux.

6 PROTOCOLO HTTP

Os protocolos so lnguas usadas entre o computador que acessa

a informao e o que a transmite. uma forma de padronizar os

processos, evitando que cada programa use uma linguagem diferente.

O HTTP, sigla que significa Hyper Text Transfer Protocol -

Protocolo de Transferncia de Hipertexto trata-se de uma linguagem usada

na WWW, onde, atravs dele, qualquer browser pode se comunicar com

qualquer servidor, independente dos fabricantes dos softwares envolvidos.

Os browsers mais modernos so compatveis com vrios tipos de

protocolos, alm do HTTP. O mais conhecido o FTP, sigla que significa

File Transfer Protocol Protocolo de Transferncia de Arquivos, onde se

trata de um mtodo prtico de ter acesso a arquivos de servidores de todo

o mundo.

Rev00 17/07/12

9 | P g i n a

7 URL

URL significa Universal Resource Locator - Localizador Universal de

Recursos. A URL um conjunto de informaes que descreve um recurso

qualquer na Internet, seja e-mail, FTP, telnet ou WWW. Assim, os

programas sabem que protocolos devem utilizar e podem tambm orientar

o usurio, quando o recurso solicitado estiver alm das possibilidades do

programa. Veja abaixo, exemplos de algumas URLs vlidas:

http://pobox.com/~cardoso

ftp://ftp.unikey.com.br

telnet:bbs.unikey.com.br

mailto:cardoso@pobox.com

8 COMO PLANEJAR SEU SITE

Projetar um site demanda um considervel planejamento prvio

sendo que no basta somente decidir qual ser seu pblico e o que incluir

no site, mas ter que planejar como apresentar essa informao no site.

Planejar seu site o passo mais importante. Sem um bom plano, seu site

poder no ser bem-sucedido, o que significa no pior dos casos, que

ningum desejar visit-lo.

Fazer a si mesmo algumas perguntas importantes e desenvolver

um plano baseado em suas respostas ir ajud-lo a criar um site bem-

sucedido. Tendo em mente o propsito do site que ser criado, de

extrema importncia o desenvolvedor fazer as seguintes perguntas:

Rev00 17/07/12

10 | P g i n a

1. Por que estou criando esse site? O que eu quero que as pessoas

faam ou saibam aps visitarem meu site?

fundamental identificar o principal objetivo do site e depois

manter essa meta em mente enquanto o projeta. Se estiver criando um

site para negcios, certifique-se de obter a opinio de todos os envolvidos

no projeto e nas decises sobre o contedo.

2. Qual o pblico que quero atingir?

Voc deve decidir quem ir visitar seu site e depois planejar um

site que atraia essas pessoas. Para focalizar seu pblico, faa a si mesmo

algumas perguntas mais especficas. Qual a formao de seus amigos, de

sua famlia ou de seus clientes? Quais grupos etrios esto representados?

Quais so seus interesses? O que eles fazem?

3. Quais informaes quero compartilhar com os visitantes de meu

site?

Muitas informaes esto disponveis sobre voc como pessoa, sua

empresa ou organizao, ou sobre seu tpico. Determine quais

informaes voc quer tornar disponveis aos seus visitantes. Seja muito

cuidadoso ao determinar qual informao voc no deseja compartilhar. A

melhor maneira de decidir o que voc quer no seu site observar outros

sites na Internet.

4. Que tipo de informao voc quer obter dos visitantes?

A Internet uma grande fonte, tanto para dar como para receber

informaes. Voc precisa decidir se apenas quer compartilhar informaes

com aqueles que vm seu site ou se tambm quer obter informaes

deles, como por exemplo, opinies sobre seu site ou informaes dos

clientes.

Rev00 17/07/12

11 | P g i n a

5. Quanto tempo e dinheiro voc pode gastar mantendo seu site?

Quanto mais complexo o site, mais tempo e dinheiro ele

consome em sua manuteno.

9 CRIANDO O TIPO CERTO DE SITE

Existem dois tipos principais de sites: os sites pessoais e os sites

profissionais onde que possuem finalidades diferentes.

Os sites pessoais normalmente contm informaes sobre a pessoa

que criou informaes sobre hobbies, interesses e amigos ou famlia e so

sites menores.

Os sites profissionais anunciam aquilo que uma empresa ou

organizao faz, produz, vende e pode ser usado tanto para fazer

publicidade de uma empresa na Web quanto para agir como ponto de

vendas, permitindo que os usurios comprem produtos via Internet.

10 O QUE HTML?

HTML significa Hyper Text Markup Language, que pode ser

traduzido como Linguagem de Marcao de Hipertexto. uma linguagem

de descrio de pgina e no uma linguagem de programao. Hipertexto

um mtodo de organizao que permite que textos, imagens, sons e

aes fiquem interligados.

Rev00 17/07/12

12 | P g i n a

10.1 O QUE VOC PODE FAZER COM O HTML?

A funo do HTML criar pginas na Internet. Voc pode criar

textos nas pginas, fazer formatao, criar listas, criar tabelas, criar

formulrios, trabalhar com imagens, etc. O HTML cria pginas estticas,

sem animao.

10.2 O QUE NECESSRIO PARA TRABALHAR COM HTML?

Voc precisar de:

Um Editor de textos qualquer ou voc poder usar um editor web

como, por exemplo, o BlueFish.

E o Browser (navegador) Mozilla Firefox.

Os arquivos devem ser salvos no formato texto e salvos com

extenso .htm ou .html. - Pode-se escolher a extenso em

qualquer pgina criada do site.

Observao: Os arquivos de um projeto devem ser colocados

dentro de uma mesma pasta (diretrio).

11 SINTAXE DOS COMANDOS HTML

Nos comandos so utilizadas duas marcas ou tags que so:

< > - Marca de abertura - Marca de fechamento.

Rev00 17/07/12

13 | P g i n a

Os atributos somente devem ser digitados na marca de abertura.

As marcas de fechamento no aceitam atributos.

Exemplos de marcas:

... - Coloca negrito no texto.

... - Centraliza o texto na pgina.

... - Permite definir o tipo, tamanho, cor,

estilo da fonte.

11.1 COMO EXIBIR O CDIGO HTML DE UMA PGINA DA INTERNET

Dar um duplo clique no cone do Mozilla.

Acessar uma pgina qualquer.

Clicar no menu View e Page Source.

12 ESTRUTURA BSICA DO HTML

A estrutura bsica de um documento HTML a seguinte:

Ttulo da Pgina

...

Rev00 17/07/12

14 | P g i n a

12.1 ELEMENTOS BSICOS DO HTML

... - Indicam respectivamente o incio e o

fim de um documento HTML. Todos os outros elementos devem estar

entre estas marcas.

... - Delimitam a seo de cabealho do

documento. Trata-se da primeira seo do documento.

... - Indicam o ttulo do documento, que

ser exibido na barra de ttulo do navegador. Estas marcas devem constar

na seo do cabealho.

... - Representam o corpo do documento.

Entre estas marcas estar contida a maior parte do contedo a ser exibido

com textos e imagens. Este elemento pode conter cinco atributos

opcionais, que so:

Atributo BACKGROUND: Especifica uma imagem como fundo da

pgina.

Exemplo: .

Atributo BGCOLOR: Configura a cor de fundo da pgina.

Exemplo:

Atributo TEXT: Configura a cor do texto da pgina.

Exemplo:

Atributos LINK, ALINK, VLINK: Configuram as cores dos links

da pgina. ALINK configura a cor do link ativo, isto , quando clicado.

VLINK configura a cor do link j visitado.

Rev00 17/07/12

15 | P g i n a

Exemplo:

Por padro, este exemplo configura uma pgina com links azuis,

links ativos em vermelho e links visitados em roxo.

Como o HTML no uma linguagem de programao, voc nunca

ser avisado de erros que tenha cometido na digitao ou na edio do seu

documento. O simples esquecimento de uma barra pode gerar efeitos

colaterais inesperados na visualizao de uma pgina e estes efeitos sero

o nico sinal de que algo est errado.

13 TTULOS E SUBTTULOS

O destaque para ttulos e subttulos importante, porque mostra

ao leitor uma viso geral sobre o que trata o texto em questo. Voc pode

utilizar at seis nveis de ttulos, que so numerados de 1 (o maior) a 6 (o

menor). So tags do tipo incio-fim. Exemplos:

Em HTML A sada ser

H1 H1

H2 H2

H3 H3

H4 H4

H5 H5

H6 H6

Rev00 17/07/12

16 | P g i n a

13.1 EXERCCIO 01

Primeira Pagina

Primeira Pagina

Salvar o arquivo no formato texto, com o nome exercicio01.html e

executar a pgina no navegador.

Observao.: Para executar uma pgina html no navegador pode-

se abrir diretamente pelo navegador (menu Arquivo / Abrir) ou atravs do

gerenciador de arquivos.

14 ACENTUAO

Como cada navegador lida com os caracteres de uma forma

diferente, boa prtica no acentuar os textos, pois impossvel saber

qual tabela de caracteres o usurio dispe, e nem a partir de qual

equipamento a pgina ser acessada.

Um dos mecanismos utilizados para solucionar esse impasse a

tabela de caracteres padro desenvolvida pela ISO (International

Standards Organization) que uma organizao que desenvolve e

administra padres.

Rev00 17/07/12

17 | P g i n a

Veja os exemplos a seguir:

Para conseguir Deve-se digitar

&Agrave

14.1 EXERCCIO 02

Exerccio 02

Esta Pgina contm

textos acentuados e com o marcador de cabealho

H2

Salvar o arquivo no formato texto, com o nome exercicio02.html e

executar a pgina no navegador.

Rev00 17/07/12

18 | P g i n a

15 INSERINDO COMENTRIOS

As tags servem para inserirmos comentrios na pgina

com o propsito de organizar o programa e possibilitar fcil visualizao

dos cdigos html. Como so utilizadas para informar, as linhas onde consta

essa marcao no sero processadas pelo navegador.

Exemplo:

Exerccio 02

Esta Pgina contm textos

acentuados e com o marcador de cabealho H2

Rev00 17/07/12

19 | P g i n a

16 FORMATAO DE TEXTOS

Todos os comandos que alteram o estilo do texto so do tipo liga-

desliga, ou seja, precisam ser especificados em pares, marcando o incio e

o fim do trecho que sofrer a formatao.

16.1 MARCAO FONT

A sintaxe

... - Respectivamente, define o tipo, o tamanho e a cor da

fonte. No necessrio usar todos os atributos juntos e no h uma ordem

para utiliz-los.

Atributo FACE: O atributo FACE define o tipo de letra (fonte).

Atributo SIZE: O atributo SIZE define o tamanho da fonte. A

relao dos tamanhos vlidos :

SIZE

Editor de Textos HTML

8 pt 1

10 pt 2

12 pt 3

14 pt 4

24 pt 5

36 pt 6

72 pt 7

Rev00 17/07/12

20 | P g i n a

Atributo COLOR: O atributo COLOR especifica a cor do texto. Seu

valor especificado atravs de um nome predefinido de cores ou no

formato hexadecimal. Veja a tabela das principais cores:

Nome da Cor (Ingls)

Nome da Cor (Portugus)

Hexadecimal

Beige Bege #F5F5D

Black Preta #000000

Blue Azul #0000FF

Cyan Ciano #00FFFF

Gold Ouro #FFD700

Green Verde #008000

Gray Cinza #808080

Yellow Amarela #FFFF00

Magenta Magenta #FF00FF

Maroon Marrom #800000

Olive Verde oliva #808000

Orange Laranja #FFA500

Red Vermelha #FF0000

Pink Rosa #FFC0CB

Purple Prpura #800080

Observao: Pode-se usar o formato hexadecimal.

Rev00 17/07/12

21 | P g i n a

16.2 EXERCCIO 03

Exerccio 03

Formatao de textos

Esta

linha est com a fonte courier, tamanho 5 e na

cor vermelha

Salvar o arquivo no formato texto, com o nome exercicio03.html e

executar a pgina no navegador.

Rev00 17/07/12

22 | P g i n a

16.3 OS PRINCIPAIS COMANDOS DE ESTILO DE TEXTO:

COMANDO SINTAXE FUNO

Negrito texto Aplica negrito.

Itlico texto Aplica itlico.

Sublinhado texto Aplica sublinhado.

Big texto Aumenta o tamanho da fonte e

aplica negrito.

Tachado texto Aplica tachado.

Small texto Reduz e altera a fonte.

Sobrescrito texto Aplica sobrescrito.

Subscrito texto Aplica subscrito.

Pisca-pisca texto Faz o texto piscar.

Observao: Em alguns navegadores o atributo BLINK pode no

funcionar.

16.4 MOVIMENTANDO O TEXTO MARQUEE

A marcao MARQUEE Faz o texto rolar pela tela.

O atributo WIDTH define a largura de rolagem do texto.

O atributo HEIGHT define o comprimento de rolagem do texto.

O atributo DIRECTION define a direo de rolagem. Pode ser

left, right, down e up.

O atributo SCROLLAMOUNT define a velocidade de rolagem do

texto.

Rev00 17/07/12

23 | P g i n a

O atributo BEHAVIOR define o tipo de movimento. Pode ser

scroll, slide e alternate.

Exemplo:

texto

16.5 EXERCCIO 04

Formatao de Textos

Formatao de Textos

Negrito

Itlico

Sublinhado

Aumenta a fonte e aplica negrito

Reduz e altera a fonte

Texto tachado

H 2 O

X 2

Rev00 17/07/12

24 | P g i n a

Texto em

Arial, tamanho = 6 e na cor vermelha

Faz o texto rolar pela tela

Salvar o arquivo no formato texto, com o nome exercicio04.html e

executar a pgina no navegador.

17 FORMATAO DE PARGRAFOS

Comando

...

- Delimita um pargrafo.

possvel omitir o elemento de fim

sem danos ao resultado final. O

efeito visual uma linha em branco antes do incio do prximo pargrafo.

O atributo opcional ALING configura o alinhamento do pargrafo e pode

conter os valores left (esquerda), center (centro), right (direita) ou justify

(justificado).

O marcador ... - Centraliza texto e

pargrafos o nico marcador de alinhamento que pode ser usado sem

o auxlio da tag

...

Comando ... - Este comando

destaca um bloco de texto citado de outra fonte atravs de uma

endentao direita. utilizado na criao de citaes longas que no

devem ser aninhadas em pargrafos.

Rev00 17/07/12

25 | P g i n a

17.1 EXERCCIO 05

Trabalhando com pargrafos

Este pargrafo est

centralizado

J este est alinhado

direita

Salvar o arquivo no formato texto, com o nome exercicio05.html e

executar a pgina no navegador.

18 LINHAS HORIZONTAIS

As Linhas Horizontais so utilizadas para dar destaque a ttulos ou

para gerar a sensao de quebra entre uma informao e outra. Trata-se

de uma marca solitria, que pode ser utilizada com alguns atributos

opcionais.

Marcao para criao de linha padro sem nenhum

atributo.

O atributo SIZE configura a espessura da linha.

Rev00 17/07/12

26 | P g i n a

O atributo WIDTH configura a largura da linha, e pode ser

especificado em pixels ou percentual.

O atributo ALIGN configura o alinhamento da linha. Pode ser: left,

center e right.

O atributo COLOR define a cor da linha.

Exemplo:

:

18.1 EXERCCIO 06

Linhas Horizontais

Linhas Horizontais

Linha Horizontal simples

Linha Horizontal - largura de 50% da pgina

Rev00 17/07/12

27 | P g i n a

Linha Horizontal altura de 10 pixel's

Linha Horizontal com cor de preenchimento

Salvar o arquivo no formato texto, com o nome exercicio06.html e

executar a pgina no navegador.

19 IMAGENS

Alm de texto, possvel colocar imagens em pginas Web. Os

formatos grficos padres da Internet so: JPEG e GIF. Cada um deles tem

vantagens e desvantagens. A escolha entre qual deles voc usar vai

depender da imagem desejada.

a) GIF -Graphics Interchange Format - O formato GIF usa

uma tcnica de compresso no mesmo estilo de programas como o Winzip.

Os arquivos GIF podem ter um mximo de 256 cores, e para a grande

maioria dos usurios mais do que suficiente, j que a grande maioria das

pessoas tem suas placas de vdeo configuradas com este nmero de cores.

uma extenso de imagens muito utilizada para criar animaes

na pgina web. GIF o formato de imagem mais utilizado na Internet.

Rev00 17/07/12

28 | P g i n a

Esse padro tem duas grandes vantagens: utilizar fundos transparentes e

animaes.

b) JPEG -Joint Photografic Experts Group - O formato JPEG

foi criado para que imagens true-color (com 16 milhes de cores)

pudessem ser armazenadas em arquivos pequenos. O formato JPEG

consegue isso usando um sistema onde a qualidade da imagem reduzida

de forma que o arquivo fique menor. S que, na maioria das vezes, a

perda de qualidade, no notada na tela de um monitor, da o seu grande

sucesso. Ao contrrio do GIF, que tem uma compresso padro (que no

pode ser alterada), o JPEG tem uma compresso varivel. Porm, quanto

mais voc comprime, maior ser a perda de qualidade.

19.1 PRINCIPAIS DIFERENAS ENTRE AS IMAGENS GIF E JPEG

CARACTERSTICA GIF JPEG

Animao Sim No

Tamanho do arquivo Maior Menor

Resoluo Menos cores (256) Mais cores (16

milhes)

Transparncia Sim No

Velocidade de download

Mais rpido Mais lento

Exibio Monta distorcida Monta por faixas

Rev00 17/07/12

29 | P g i n a

19.2 QUAL FORMATO ESCOLHER?

O que vai determinar o formato a ser escolhido o nmero de

cores de sua imagem. Normalmente, voc deve usar o GIF para desenhos

ou logotipos, e usar JPEG para fotos ou imagens com muita variao de

cores.

Para que uma imagem seja apresentada em um documento HTML,

necessrio fazer uma referncia ao nome do arquivo da imagem, atravs

da marcao:

.

Caso a imagem esteja em um diretrio diferente do documento

HTML, o nome do diretrio deve ser includo na referncia. Lembre-se que

voc pode tambm usar uma imagem como link. Neste caso, combine os

elementos de link e imagem.

Exemplo:

.

O atributo BORDER serve para definir uma borda para a imagem.

Caso a imagem no possa ser carregada pelo navegador o atributo ALT

servir para definir uma legenda para a imagem com no mximo 255

caracteres.

Rev00 17/07/12

30 | P g i n a

19.3 EXERCCIO 07

Trabalhando com Imagens

Imagem Simples

Imagem com borda e legenda

Salvar o arquivo no formato texto, com o nome exercicio07.html e

executar a pgina no navegador.

19.4 DEFINIR UMA IMAGEM NO PLANO DE FUNDO

Para ir alm de um segundo plano inserindo apenas uma cor, o

HTML permite atribuir uma imagem, para ser exibida no segundo plano de

sua da pgina Web. O atributo BACKGROUND deve ser inserido na

marcao BODY conforme exemplo abaixo:

Rev00 17/07/12

31 | P g i n a

Exemplo:

19.5 EXERCCIO 08

Trabalhando com Imagens no plano de

fundo

Contedo da pgina

Salvar o arquivo no formato texto, com o nome exercicio08.html e

executar a pgina no navegador.

20 HYPERLINKS

Os Hyperlinks so construes HTML que permitem o acesso a

outras pginas construdas ou a recursos na Internet com um simples

clique. possvel programar um hyperlink que permitir o usurio visualizar

o topo da pgina atual, abrir outra pgina construda ou at mesmo

Rev00 17/07/12

32 | P g i n a

acessar o contedo de pginas armazenadas em outro servidor de outro

pas.

Os hyperlinks podem ter a forma de hipertexto ou hipermdia onde,

na maioria dos navegadores, o hipertexto exibido como um texto azul e

sublinhado e a hipermdia inclui hiperimagens. Estas so simples imagens

grficas incorporadas, tais como fotografias ou cones, que aceitam

vnculos.

Os destinos de um hyperlink so:

Um indicador (um local na mesma pgina);

Uma pgina interna;

Um e-mail;

Um site externo;

20.1 DEFINIR UM LINK EXTERNO

Um Web site consiste de algumas pginas separadas, onde, para

torn-las acessveis entre si e convenientes para os visitantes, preciso

definir os links entre as pginas. Costuma-se colocar estes links no incio ou

no final de cada pgina.

Exemplo:

Link para a Pgina 2

Neste exemplo criado um link para a pgina de nome

pgina2.html.

Rev00 17/07/12

33 | P g i n a

20.2 EXERCCIO 09

Trabalhando com Link's

Criando um link para uma pgina

Exerccio 01br

Criando um link para um site na internet

Google

Salvar o arquivo no formato texto, com o nome exercicio09.html e

executar a pgina no navegador.

20.3 DEFININDO UM LINK INTERNO

Um link dentro de uma pgina uma ligao que aponta para

outro local dentro da mesma pgina possuindo duas partes: o link onde o

usurio deve clicar e o ponto (regio) na pgina para o qual o cursor deve

saltar.

Para este tipo de vnculo, preciso definir uma ncora com o nome

do local de destino seguindo o formato: , onde no

exemplo, topo o nome atribudo ao local de destino.

Rev00 17/07/12

34 | P g i n a

Observao.: O nome do local de destino deve iniciar com uma

letra e no pode comear com nmero e nem com caractere especial.

Exemplo: ...

Para a criao do link que permitir o usurio clicar para acessar o

ponto da pgina em questo, dever direcion-lo para o nome criado no

exemplo anterior.

Exemplo: Voltar para o Incio

Onde #topo o indicador do local de destino. O smbolo #

sustenido indica ao navegador a posio do indicador nomeado. Voltar

para o Incio a frase que os navegadores exibem como hyperlink.

20.4 EXERCCIO 10

Trabalhando com Link's

Link's

1Ir para n

120

Rev00 17/07/12

35 | P g i n a

2

3

50Ir para n

1

120Ir para n

1

Salvar o arquivo no formato texto, com o nome exercicio10.html e

executar a pgina no navegador.

20.5 DEFINIR UM LINK DE CORREIO ELETRNICO MAILTO

Um link Mailto permite que os visitantes enviem mensagens para o

endereo de e-mail definido, simplesmente clicando no hyperlink. Quando

o usurio clica no link mailto, o aplicativo de correio eletrnico padro abre

uma janela de mensagem endereada para o mailto de destino.

A seo de rodap um bom local para se colocar um link mailto.

Observao.: Para este link funcionar corretamente, necessrio

que os programas de correio estejam configurados.

Rev00 17/07/12

36 | P g i n a

Exemplo:

Contato

20.6 ACRESCENTAR NO EXERCCIO 10

Criando um link para contato

Contato

20.7 DEFINIR UM LINK PARA OUTRO SITE

Os hyperlinks externos fazem vnculos com outros sites na

Internet. So eles que tornam a Internet possvel. Deve-se incluir uma URL

completa quando voc definir um hyperlink externo.

Exemplo:

Telecentros

20.8 ACRESCENTAR NO EXERCCIO 10

Criando um link para contato

Telecentros

Rev00 17/07/12

37 | P g i n a

20.9 DEFINIR UMA IMAGEM COMO LINK

Um link em uma imagem tambm chamado de vnculo de

hipermdia, que um grfico que funciona com um hyperlink. Uma maneira

de utilizar vnculos em imagens criar botes e adicion-los barra de

navegao da pgina web.

Exemplo:

21 LISTAS

Na linguagem HTML existem elementos especficos para a criao

de listas, que podem ser listas ordenadas (OL), listas sem ordenao (UL),

ou listas de definies (DL).

Um detalhe interessante que podem ser criadas listas aninhadas,

ou seja, listas dentro de listas. A seguir, veremos as caractersticas de cada

uma delas.

21.1 LISTAS ORDENADAS

So estruturas sequenciais inseridas atravs da marcao OL

Ordered Lists (listas Ordenadas).

A estrutura das listas ordenadas bastante simples, onde os itens

da lista so definidos pelos elementos e .

Rev00 17/07/12

38 | P g i n a

Exemplo:

Elemento 1

Elemento 2

Elemento 3

Elemento 4

Atributos de

Type: o atributo opcional TYPE define como ser o tipo de

numerao de cada linha. Os tipos disponveis so: A (A, B, ..., Z), a (a,

b, ..., z), I (I, II, ..., V), e 1 (1, 2, ..., 5). Se omitido, utilizado o tipo

padro (1, 2, 3).

Start: o atributo opcional START define o incio da numerao de

cada elemento, ou seja, a partir de que elemento a lista deve se iniciar. No

exemplo abaixo, a lista ter incio na letra e:

Exemplo:

Elemento 1

Elemento 2

Elemento 3

Elemento 4

Rev00 17/07/12

39 | P g i n a

21.2 EXERCCIO 11

Abrir um arquivo novo e digitar os comandos abaixo.

Listas Ordenadas

Lista ordenada por nmeros

Elemento 1

Elemento 2

Elemento 3

Lista ordenada por letras, iniciando em D

Elemento 1

Elemento 2

Elemento 3

Salvar o arquivo no formato texto, com o nome exercicio11.html e

executar a pgina no navegador.

Rev00 17/07/12

40 | P g i n a

21.3 LISTAS NO ORDENADAS

So estruturas que no possuem sequncia e so inseridas atravs

da marcao UL Unordered Lists (listas No Ordenadas).

A estrutura das listas sem ordenao a mesma das listas

ordenadas, sendo que, na apresentao, os itens sero precedidos por um

marcador (bullet). No caso de listas sem ordenao aninhadas (listas

dentro de listas), o paginador utilizar um marcador (bullet) diferente para

os itens de cada lista.

O atributo TYPE pode ser:

square: um quadrado preenchido.

circle: um crculo vazado.

disc: um crculo preenchido.

Observao.: Se omitido, utilizado o tipo padro (disc).

21.4 EXERCCIO 12

Abrir um arquivo novo e digitar os comandos abaixo.

Listas No Ordenadas

Lista No ordenada

Rev00 17/07/12

41 | P g i n a

Elemento 1

Elemento 2

Elemento 3

Duas listas No ordenadas aninhadas

Elemento 1

Elemento 2

Elemento 2.1

Elemento 2.2

Elemento 2.3

Elemento 3

Elemento 4

Salvar o arquivo no formato texto, com o nome exercicio12.html e

executar a pgina no navegador.

Rev00 17/07/12

42 | P g i n a

Observao.: Como j mencionado, ... o

elemento que define cada item de uma lista ordenada ou no ordenada. O

seu contedo pode ser texto, outras listas, imagens ou links.

21.5 LISTA DE DEFINIO

As Listas de Definio so estruturas que englobam uma lista de

definies, ideais para a criao de glossrios e coisas do gnero. So

inseridas atravs da marcao DL Definition Lists (listas de Definio)

onde sua estrutura diferente das outras, pois existem dois elementos o

termo a ser definido (DT), e a definio propriamente dita (DD). Na

exibio cada termo aparece em uma linha, e a respectiva definio na

linha seguinte, deslocada para a direita.

21.6 EXERCCIO 13

Abrir um arquivo novo e digitar os comandos abaixo.

Listas de Definio

Listas de Definio

HTML

HyperText Markup Language

Rev00 17/07/12

43 | P g i n a

OL

Listas Ordenadas

UL

Listas Sem Ordenao

LI

Elemento da Lista

Salvar o arquivo no formato texto, com o nome exercicio13.html e

executar a pgina no navegador.

Observao.: Ao fazer suas listas, lembre-se sempre que voc

pode combinar tipos diferentes para chegar ao resultado esperado.

22 TABELAS

Assim como as listas, no HTML existem elementos especficos para

a criao e formatao de tabelas. O recurso de tabelas muito

interessante e muito usado nas pginas Web. As tabelas so formadas por

linhas e colunas, e na interseo delas esto as clulas.

Na linguagem HTML, voc pode inserir nas clulas tudo que

normalmente faz parte do corpo de um documento, como textos, links,

imagens, listas e at outras tabelas.

Rev00 17/07/12

44 | P g i n a

22.1 ATRIBUTOS DE UMA TABELA

As marcas que englobam a definio de uma tabela so:

- Comando ... - Todas as outras marcas

referentes s tabelas - linhas e clulas somente sero consideradas se

includas entre estas marcas.

- Comando ... - Trata-se de um

elemento opcional que define o ttulo da tabela, e deve constar entre as

marcas que definem a tabela, mas separado das marcas que definem

linhas e colunas. Sem parmetros, o ttulo apresentado acima da tabela e

centralizado.

- Comando ... - Table Row ou Linha de Tabela.

Este o elemento utilizado na definio de linhas das tabelas. As tabelas

so definidas em linhas, sendo as linhas compostas de clulas.

- Comando ... - Table Data ou Dado de Tabela.

Estas marcas delimitam as clulas que compem as linhas, e assim sendo

devem estar inseridas entre marcas de linhas.

O alinhamento padro de uma clula esquerda horizontalmente

e centralizado verticalmente, e caso o nmero de clulas varie de uma

linha para outra, as linhas com menos clulas so completadas direita

com clulas em branco.

- Comando ... - Table Header ou Cabealho de

Tabela. o elemento que define as clulas de cabealho. As clulas de

cabealho tm as caractersticas idnticas s clulas de dados definidas por

, a no ser pelo alinhamento padro horizontal, que centralizado, e

pela utilizao de fonte em negrito.

Rev00 17/07/12

45 | P g i n a

22.2 EXERCCIO 14

Abrir um arquivo novo e criar a tabela da figura abaixo.

Tabela Simples

Tabela Simples

Nome

Idade

Maria

14

Eduardo

11

Rev00 17/07/12

46 | P g i n a

Salvar o arquivo no formato texto, com o nome exercicio14.html e

executar a pgina no navegador.

22.3 ATRIBUTOS DA MARCAO

Estes elementos bsicos possuem alguns parmetros que permitem

um maior controle sobre alguns detalhes da apresentao da tabela.

- BORDER: A apresentao padro de uma tabela sem bordas.

A presena do parmetro BORDER indica justamente que deve ser

desenhada uma borda em torno de cada clula da tabela. Pode ser usado

para indicar a espessura da borda em pixels.

Exemplo:

- WIDTH: Especifica a largura da tabela, que pode ser definida em

pixels ou em percentual referente largura da janela. Caso no seja

especificado, o prprio browser se encarrega de determinar a largura mais

adequada de acordo com o contedo inserido nas clulas.

Exemplo:

- CELLSPACING: Define o espao entre as clulas, ou seja, a

largura das linhas de grade (as bordas que envolvem as clulas).

especificado em pixels.

Exemplo:

Rev00 17/07/12

47 | P g i n a

- CELLPADDING: Determina em pixels, o espao entre o

contedo e as bordas da clula.

Exemplo:

- ALIGN: Configura o alinhamento horizontal da tabela em relao

aos outros elementos da pgina. Pode conter valores LEFT (esquerda),

CENTER (centro) ou RIGHT (direita). Este parmetro no funciona em

alguns browsers.

- BGCOLOR: Define a cor de fundo da tabela.

- BORDERCOLOR: Define a cor da borda da tabela

- BACKGROUND: Define imagem de fundo na coluna da tabela.

Observao.: Para alterar a cor das bordas internas da tabela

somente utilizando estilos.

22.4 ACRESCENTAR NO EXERCCIO 14 A LINHA ABAIXO:

...

Rev00 17/07/12

48 | P g i n a

22.5 ATRIBUTOS DA MARCAO

- ALIGN: Configura o alinhamento horizontal dos elementos

contidos nas clulas de toda linha. Pode conter os valores LEFT (esquerda),

CENTER (centro), RIGHT (direita) ou JUSTIFY (justificado). Se omitido, o

alinhamento padro esquerda para as clulas de dados (), e

centralizado para clulas de cabealho ().

- VALIGN: Define o alinhamento vertical dos elementos contidos

nas clulas de uma linha. Pode conter os valores TOP (topo), MIDDLE

(meio) ou BOTTOM (abaixo). Se omitido, o alinhamento ao meio.

22.6 ATRIBUTOS DAS MARCAES E

- ALIGN: Configura o alinhamento horizontal dos elementos

contidos na clula. Pode conter os valores LEFT (esquerda), CENTER

(centro), RIGHT (direita) ou JUSTIFY (justificado). Se omitido, o

alinhamento esquerda para as clulas de dados (), e centralizado

para clulas de cabealho ().

- VALIGN: Define o alinhamento vertical dos elementos contidos

na clula. Pode conter os valores TOP (topo), MIDDLE (meio) ou BOTTOM

(abaixo). Se omitido, o alinhamento ao meio.

- NOWRAP: Quando este parmetro encontra-se associado a uma

clula, o browser entende que o texto dentro daquela clula no pode ser

dividido em mais de uma linha. Este parmetro deve ser utilizado com

cuidado, para evitar colunas demasiadamente largas.

Rev00 17/07/12

49 | P g i n a

- COLSPAN : Define o nmero de colunas de uma tabela a ser

ocupado por uma clula, ou seja, mesclar as clulas. Deve ser utilizado

para expandir uma clula horizontalmente. Ao atribuir COLSPAN=2 a uma

clula, ela ocupar o seu espao e o de mais uma clula para a direita.

- ROWSPAN: Define o nmero de linhas a ser ocupado por uma

clula. Deve ser utilizado para expandir uma clula verticalmente (para

baixo). Ao atribuir rowspan=2 a uma clula, ela ocupar seu espao e o

de mais uma clula abaixo, ou seja, outra linha.

22.7 EXERCCIO 15

Abrir um arquivo novo e digitar os comandos abaixo, para criar

uma tabela complexa.

Tabela Complexa

Tabela

Complexa

Rev00 17/07/12

50 | P g i n a

Coluna 1

Coluna 2

Linha 1

Clula 1-1

Clula 1-2

Linha

2

Clula 2-1

Clula 2-2

Linha

3

Clula 3-1

Clula 3-2

Rev00 17/07/12

51 | P g i n a

Salvar o arquivo no formato texto, com o nome exercicio15.html e

executar a pgina no navegador.

23 FORMULRIOS

Com certeza voc j deve ter preenchido algum formulrio em suas

viagens pela internet, seja para cadastros, pesquisas ou mesmo envio de

comentrios. Os formulrios aumentam o poder de interao da web e so

formas diferenciadas de receber dados dos visitantes de sua pgina.

Atualizao ou consultas a base de dados, envio de dados por email, ou

simplesmente a construo de uma nova pgina (gerada a partir de novos

dados) so algumas das aplicaes mais comuns.

Os elementos que delimitam os formulrios em uma pgina so:

...

Rev00 17/07/12

52 | P g i n a

23.1 ATRIBUTOS DA MARCAO

Todos os formulrios contidos nas pginas devem estar entre as

marcaes ... para que possam ser direcionados

corretamente para seu destino. Os atributos utilizados para essas

marcaes so:

- ACTION (ao): deve conter o endereo do programa ou

pgina que vai receber os dados do formulrio (escrito em PHP, por

exemplo).

- METHOD (mtodo): define como as informaes coletadas no

formulrio sero enviadas para a URL indicada no atributo ACTION. Ele

deve ter os valores GET ou POST. O valor mais comum o POST, que

envia todas as informaes separadamente. O GET envia todos os dados

do formulrio em uma sequncia de caracteres concatenados.

- TARGET (alvo): opcional e s necessrio quando voc est

usando frames, e deseja que a resposta ao formulrio seja exibida em um

frame diferente do que est o formulrio.

INPUT

INPUT significa entrada de dados, logo este um dos elementos

que determina como ser a entrada de dados nos campos de um

formulrio. usado para montar caixas de texto, botes e at caixas de

verificao de senhas.

Rev00 17/07/12

53 | P g i n a

Exemplo:

- O atributo TYPE (tipo) muito importante, pois define o tipo do

elemento: caixas de texto, botes de escolha ou botes simples. Para ficar

mais claro, mostraremos um de cada vez explicando quais parmetros

devem ser usados.

- O atributo NAME deve conter o nome do formulrio para que

possa ser identificado posteriormente, quando for enviado para outro

programa ou pgina.

- O atributo VALUE pode conter um valor pr-definido para o

campo.

Tipos do elemento INPUT

- TEXT (texto): especificado no parmetro TYPE indica que o

campo ser de texto, ou seja, um campo onde voc digita os dados:

O parmetro VALUE (valor), neste caso, pode ser usado se voc

quiser definir um valor prvio para o campo, de tal forma que, quando a

pgina for carregada, este valor j venha preenchido.

Rev00 17/07/12

54 | P g i n a

O parmetro SIZE (tamanho) configura o tamanho do campo e

baseado no nmero de caracteres. Se voc quiser um campo com tamanho

de 40 caracteres dever digitar SIZE=40. Note que este valor no limita o

campo em 40 caracteres, ele somente define o tamanho que ser

mostrado na pgina.

O que define o nmero mximo de caracteres que podem ser

digitados o parmetro MAXLENGTH (comprimento mximo), que

opcional.

- PASSWORD (senha): no parmetro TYPE tudo funciona da

mesma forma que o valor TEXT, exceto que todas as informaes digitadas

aparecem como um asterisco (*) - tal como quando digita-se uma senha

para se conectar internet.

- RADIO: no parmetro TYPE define botes de escolha. Eles so

usados em situaes onde somente uma opo pode ser selecionada. Em

nosso exemplo, este tipo de elemento serve para construir as opes para

a pergunta Voc gostou da minha pgina?.

O parmetro NAME, neste caso, deve ser igual para todos os

campos deste tipo, pois estar identificando a questo formulada.

O parmetro VALUE deve conter o valor do campo, que ser

passado ao programa interpretador do formulrio.

O parmetro CHECKED deve ser usado quando voc desejar que

uma das opes esteja selecionada como padro ao carregar a pgina.

Rev00 17/07/12

55 | P g i n a

- CHECKBOX: no parmetro TYPE define botes de verificao. A

traduo do termo checkbox meio difcil, mas, ao contrrio dos botes de

escolha (do tipo RADIO), ele deve ser usado quando uma ou mais opes

so vlidas. No nosso exemplo usamos este tipo na pergunta Voc

gostaria que eu respondesse a este seu comentrio?.

O parmetro NAME, neste caso, deve ser diferente para cada

campo.

O parmetro VALUE deve conter o valor do campo, que ser

passado ao programa interpretador do formulrio.

O parmetro CHECKED deve ser usado quando voc desejar que

uma das opes esteja selecionada como padro ao carregar a pgina.

- RESET: no parmetro TYPE define um boto que limpa todos os

campos, colocando os mesmos valores de quando a pgina foi carregada.

No parmetro VALUE, pode-se definir o que estar escrito no boto. Caso

nenhum valor seja definido, aparecer escrito somente reset. Em nosso

exemplo usamos este elemento no boto Limpar todos os campos.

Rev00 17/07/12

56 | P g i n a

- SUBMIT: no parmetro TYPE define um boto que aciona o

envio das informaes preenchidas no formulrio ao programa

interpretador (aquele definido no parmetro ACTION do elemento FORM).

O parmetro VALUE define o que estar escrito no boto. Caso

nenhum valor seja definido, aparecer escrito submit. Para definir o

boto Enviar comentrios de nosso exemplo, usamos este tipo de

elemento.

- IMAGE: no parmetro TYPE, assim como o boto tipo SUBMIT,

aciona o envio das informaes preenchidas no formulrio utilizando uma

imagem. Neste caso, passam a existir os parmetros SRC e ALT

normalmente usados no elemento que define uma imagem.

O parmetro SRC define o endereo ou nome do arquivo da

imagem.

O parmetro ALT opcional e define o texto que ser mostrado

caso a imagem no seja carregada.

- SELECT: possibilita definir uma lista de opes para o visitante

escolher.

O parmetro NAME define o nome desta lista, e SIZE define

quantos elementos sero exibidos na tela simultaneamente. Se for omitido,

somente uma opo aparece por vez.

Rev00 17/07/12

57 | P g i n a

Cada opo da lista definida atravs de um elemento OPTION e o

parmetro VALUE deste elemento o que determinar o valor de cada

opo. Em nosso exemplo, usamos este elemento para criar a lista de

opes para a resposta da pergunta Qual a pgina de que voc mais

gostou?.

...

- TEXTAREA: (rea de texto) permite definir um campo de texto

com vrias linhas. Ele til para colher comentrios e depoimentos dos

visitantes.

O parmetro ROWS define o nmero de linhas da caixa de texto, e

o parmetro COLS define quantos caracteres (colunas) cada linha possui.

O parmetro NAME define o nome da caixa de texto.

...

Rev00 17/07/12

58 | P g i n a

23.2 EXERCCIO 16

Abrir um arquivo novo e digitar os comandos abaixo, para criar um

formulrio.

Formulrio 1

Cadastro de Clientes

Nome:

Digite o seu E-mail:

Senha do E-mail:

Sexo

Masculino

feminino

Produtos Comprados:

Computador

Rev00 17/07/12

59 | P g i n a

Monitor

teclado

Estado

AM

MG

PE

RJ

SP

Histrico do Cliente:

Salvar o arquivo no formato texto, com o nome exercicio16.html e

executar a pgina no navegador.

Rev00 17/07/12

60 | P g i n a

24 FRAMES

Atravs do framing, um recurso poderoso, a janela de um browser

pode ser dividida em diversas partes. Cada uma dessas partes chamada

de frame.

Cada um destes frames pode ser manipulado separadamente, onde

cada um pode conter um documento diferente. Alm disso, um frame pode

ordenar ao browser para que este atualize, com a URL indicada em um

frame diferente.

Assim como todos os recursos mais avanados para a construo

de Home Pages, os frames devem ser utilizados com o mximo de cuidado.

Sua utilizao deve obedecer ao critrio de necessidade. Os casos de real

necessidade de frames no so tantos, mas quando surgem, podem

melhorar significativamente o site.

Os casos mais comuns em que utilizao de frames pode ser

indicada na criao de ndices e tutoriais para efeitos de design podendo

alterar suas diversas caractersticas atravs de recursos como a omisso de

barra de rolagem e bordas.

Com a definio de frames, os documentos escritos em HTML com

as extenses .htm e .html podem ser classificados em dois tipos:

Documentos de Layout:

Contm informaes sobre a estrutura de frames dos documentos.

Cada frame declarada em documento de layout contm uma referncia

implcita ou explcita para outro documento que ser exibido no frame. Este

documento filho ser exibido independentemente da existncia de outras

frames na janela do browser. O documento filho pode ser um documento

de contedo ou mesmo outro documento de layout encadeado.

Rev00 17/07/12

61 | P g i n a

Documentos de Contedo:

So arquivos HTML convencionais. Um documento de contedo

pode ser visto em um frame (de um documento de layout) ou

independente na janela do browser.

24.1 ATRIBUTOS HTML PARA FRAMES

... definem a diviso da janela em

duas ou mais linhas ou em duas ou mais colunas. Pode haver

vrias tags encadeadas, fazendo-se desta maneira,

subdivises da pgina.

Exemplo:

Observao.: Neste exemplo foram criadas duas frames, a

primeira (30%) divide a tela em duas colunas, na primeira coluna ser

carregado o arquivo pagina1.html, na segunda coluna (70%) foi criado

mais uma diviso em 2 linhas, na primeira linha (20%) ser carregado o

arquivo pagina2.html e na segunda linha (80%) ser carregado o arquivo

pagina3.html.

Rev00 17/07/12

62 | P g i n a

COLS: O atributo cols divide a janela ou (frames) em diversas

janelas verticais, tantas quantas forem os valores descritos. Os valores

podem estar expressos em pixels, percentuais ou relativamente uns aos

outros.

Exemplo:

ROWS: O atributo rows divide a janela ou (frames) em diversas

janelas horizontais, tantas quantas forem os valores descritos. Os valores

podem estar expressos em pixels, percentuais ou relativamente uns aos

outros.

Exemplo:

FRAMEBORDER: O atributo frameborder indica se ser exibida ou

no uma borda 3D para as frames. O parmetro pode assumir os valores

1 (default, indica a exibio da borda) ou 0 para no exibir a borda.

Exemplo:

FRAMESPACING: O atributo framespacing cria um espao

adicional em pixels entre as frames.

Exemplo:

Observao.: Os atributos FRAMESPACING e FRAMEBORDER

funcionam igualmente por toda a cadeia de FRAMESETs encadeados,

bastando que sejam declarados no primeiro comando FRAMESET a ser

utilizado.

A definio de frames atravs de percentuais interessante, pois a

diagramao da janela preservada no importando a resoluo em que

se estiver visualizando a pgina.

Rev00 17/07/12

63 | P g i n a

Define as pginas que sero carregadas nas divises

determinadas nas FRAMESETs.

SRC: O atributo src define o contedo de cada frame do

documento, onde o parmetro src associa uma URL ao frame.

Exemplo:

SCROLLING: O atributo scrolling define a presena, ausncia ou

atribuio automtica pelo browser das barras de rolagem sendo

respectivamente: YES, NO ou AUTO.

Exemplo:

NORESIZE: O atributo noresize impede que o usurio altere o

tamanho da frame.

Exemplo:

NAME: O atributo name associa um nome janela.

Exemplo:

NOFRAME: A marcao permite a criao de uma

opo de navegao para browsers mais antigos, que no interpretam

frames, pois ignoram toda a rea de influncia de sendo

assim, pginas com frames podem conter mensagens que somente sero

lidas pelos browsers mais antigos, provavelmente avisando aos usurios

que no conseguiram visualizar, que adquiram uma verso mais atualizada

ou que sigam um determinado link para pgina escrita sem uso de frames.

Rev00 17/07/12

64 | P g i n a

Exemplo:

Esta pgina usa FRAME e seu browser no os

suporta

24.2 EXERCCIO 17

1- Abrir um arquivo novo e digitar os comandos abaixo, para criar

o primeiro arquivo para construo do frame.

AZUL

Salvar o arquivo no formato texto, com o nome azul.html

2- Abrir um arquivo novo e digitar os comandos abaixo, para criar

o segundo arquivo para construo do frame.

Rev00 17/07/12

65 | P g i n a

Verde

Salvar o arquivo no formato texto, com o nome verde.html

3- Abrir um arquivo novo e digitar os comandos abaixo, para criar

o terceiro arquivo para construo do frame.

Vermelho

Salvar o arquivo no formato texto, com o nome vermelho.html

Rev00 17/07/12

66 | P g i n a

4- Abrir um arquivo novo e digitar os comandos abaixo para criar

o arquivo que contenha os frames.

Pgina de Frames

Salvar o arquivo no formato texto, com o nome frame.html e

executar a pgina no navegador.

24.3 LINKS EM FRAME ALVO

Quando o usurio pressiona um link qualquer em uma frame, o link

pode utilizar sua prpria frame para carregar o documento contido em sua

URL ou utilizar outra frame. Para que seja possvel a atualizao de outras

frames foi introduzido o atributo TARGET na tag .

Rev00 17/07/12

67 | P g i n a

Exemplo:

Telecentros

Clicando

neste link o arquivo teste.html ser aberto na frame

pgina1

25 IFRAME INLINE FRAME

A IFRAME utilizada para inserir um documento ou site dentro de

uma janela configurvel dentro de uma pgina html. A desvantagem

principal desse recurso, embora d um visual atrativo para as pginas,

ter que criar vrios clones de uma pgina e alterar o endereo especificado

da tag de cada uma. A tag no dinmica e sim

esttica, ou seja, cada tag desta pgina deve ter um endereo prprio.

Exemplo:

Rev00 17/07/12

68 | P g i n a

25.1 EXERCCIO 18

1- Abrir um arquivo novo e digitar os comandos abaixo, para criar

o primeiro arquivo para construo do frame.

TESTE

Salvar o arquivo no formato texto, com o nome teste.html

2- Abrir um arquivo novo e digitar os comandos abaixo para criar

o arquivo que contenha o iframe.

Pgina contendo IFRAME

Esta pgina tem um iframe

Rev00 17/07/12

69 | P g i n a

Salvar o arquivo no formato texto, com o nome exercicio18.html e

executar a pgina no navegador.

Rev00 17/07/12

70 | P g i n a

26 PLANO DE AULA

1 aula

- Pginas Web

- Home Page

- O que so Browsers?

- Protocolo HTTP

- URL

- Como Planejar seu Site

- Criando o Tipo Certo de Site

- O que HTML?

- O que voc pode fazer com o HTML?

- O que necessrio para trabalhar com HTML?

- Sintaxe dos comandos HTML

- Como Exibir o Cdigo HTML de uma Pgina da Internet

- Estrutura Bsica do HTML

- Elementos Bsicos do HTML

- Ttulos e Subttulos

- Exerccio 01

- Acentuao

- Exerccio 02

2 aula

- Inserindo comentrios

Rev00 17/07/12

71 | P g i n a

- Formatao de Textos

- Marcao FONT

- Exerccio 03

- Os principais Comandos de Estilo de Texto so:

- Movimentando o texto Marquee

- Exerccio 04

- Formatao de Pargrafos

- Exerccio 05

- Linhas Horizontais

- Exerccio 06

3 aula

- Imagens

- Principais Diferenas entre as Imagens GIF e JPEG

- Qual Formato Escolher?

- Exerccio 07

- Definir uma Imagem no Plano de fundo

- Exerccio 08

- Hyperlinks

- Definir um Link Externo

- Exerccio 09

- Definindo um Link Interno

- Exerccio 10

- Definir um Link de Correio Eletrnico Mailto

Rev00 17/07/12

72 | P g i n a

- Acrescentar no Exerccio 10

- Definir um Link para Outro Site

- Acrescentar no Exerccio 10

- Definir uma Imagem como Link

4 aula

- Listas

- Listas Ordenadas

- Exerccio 11

- Listas No Ordenadas

- Exerccio 12

- Lista de Definio

- Exerccio 13

5 aula

- Tabelas

- Atributos de uma Tabela

- Exerccio 14

- Atributos da marcao

- Acrescentar no Exerccio 14 a linha abaixo:

- Atributos da marcao

- Atributos das marcaes e

- Exerccio 15

Rev00 17/07/12

73 | P g i n a

6 aula

- Formulrios

- Atributos da marcao

- Exerccio 16

7 aula

- Frames

- Atributos HTML para frames

- Exerccio 17

- Links em Frame alvo

- Iframe Inline Frame

- Exerccio 18

8 aula

- Projeto final: Desenvolvimento do tema (escolhido pela turma)

para elaborao do projeto.

- Incio da Elaborao do projeto

9 aula

- Elaborao do projeto

10 aula

- Concluso do projeto

- Hospedagem do site

Rev00 17/07/12

74 | P g i n a

27 BIBLIOGRAFIA

Sites

www.openoffice.org/pt-br/

Rev00 17/07/12

75 | P g i n a

Esta obra pode ser reproduzida e distribuda parcial ou

integralmente desde que citada a fonte.

Venda Proibida.

Realizao: Secretaria Municipal de Participao e Parceria do

Municpio de So Paulo

CID Coordenadoria de Incluso Digital

IDORT - Instituto de Organizao Racional do Trabalho

Gestor Responsvel: Roberta Taconi Ferraz

Pedagogo Responsvel: Mariana Garcia Anunciato

Redao: Equipe de Capacitao rea tcnica

Audre Eller

Douglas Diniz Alves

Nanci Furtado

Paulo Jordo da Silva Boccatto

Fale conosco: telecentros.capacitacao.tecnica@projetos.idort.com

telecentros.capacitacao@projetos.idort.com

(011) 3277-2408

mailto:telecentros.capacitacao.tecnica@projetos.idort.commailto:telecentros.capacitacao@projetos.idort.com