HTML
www.idort.com.br
www.telecentros.sp.gov.br
Realização
Rev00 17/07/12
i | P á g i n a
Com a disseminação das redes de computadores e, principalmente,
com o aparecimento da Internet, ficou claro o impacto social das chamadas
Tecnologias da Informação e Comunicação, as TIC´s. Ao trabalhar e se
comunicar por meio dessas redes as pessoas e as organizações transformam
o modo como produzem, trocam e consomem bens materiais e imateriais.
Abre-se para essas pessoas um enorme leque de oportunidades tanto de
negócios, trabalho, educação, cultura, lazer, quanto relacionamento.
Nessa perspectiva, percebendo as particularidades de uma proposta
de Inclusão Digital, foi implantado o Programa Telecentro pela Prefeitura
Municipal de São Paulo com acesso livre aos serviços de informática, voltado
à população que vive em situação 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 administração dos 355 postos do Telecentro,
através de serviço de planejamento e atividades de inclusão digital, sendo
responsável por sua operação e controle. A inclusão digital é realizada
através de cursos de capacitação, inclusão e educação digital, que visam
fortalecer o aprendizado dos jovens no ensino fundamental e a capacitação
profissional para melhor inserção no mercado de trabalho.
Rev00 17/07/12
ii | P á g i n a
Centro de Treinamento
O Centro de Treinamento Inclusão Digital é o departamento do
IDORT responsável por promover e ampliar o desenvolvimento profissional
de todos os colaboradores que atuam, principalmente, no Programa
Telecentros da Cidade de São Paulo, cujo objetivo é a Inclusão Social e
Digital de todos cidadãos. São oferecidos cursos técnicos, pedagógicos e
oficinas para aprimorar os serviços prestados à população.
O Centro de Treinamento oferece cerca de 4 mil capacitações por
ano, com vinte e oito treinamentos diferenciados:
Área Pedagógica: oferece 7 cursos comportamentais: Integração
Pedagógica e Cidadania, Plano de Aula, Elaboração de Projetos, Organização
no Trabalho, Atendimento ao Público, Competência e Liderança e Integração
Pedagógica e Cidadania - Mapeamento Social.
Área Técnica: oferece 11 cursos técnicos que explora os recursos e
software disponibilizados: Introdução à Informática - GNU/LINUX, Editor de
Textos - Writer, Editor de Planilhas - CALC, Digitação, GÌMP, GIFS, Lógica de
Programação, HTML, PHP/ Mysql, CSS, IMPRESS - Apresentação e Marketing
Pessoal.
Área Oficina: oferece 11 oficinas que exploram os temas através
dos recursos e software disponibilizados: Comunidade e Meio Ambiente,
Telemarketing, Blog, Práticas de Escritório, Técnicas de Vendas, E-mail,
Pesquisa na Rede, Telecriança, Mercado de Trabalho, Introdução à Arte
Digital, Atendimento ao Cliente.
A inscrição e participação dos funcionários são definidas pelo
Supervisor Técnico de acordo com as vagas disponibilizadas pelo Centro de
Treinamento. Somente os funcionários capacitados possuem autorização
para ministrar os conteúdos oficiais nos Telecentros.
O IDORT disponibiliza alguns workshops e palestras gratuitamente,
nos quais os funcionários poderão se inscrever, desde que tenham
autorização do Supervisor Técnico I.
Rev00 17/07/12
iii | P á g i n a
Sumário
1 Objetivo ............................................................................... 6
2 Justificativa ......................................................................... 6
3 Páginas Web ........................................................................ 7
4 Home Page .......................................................................... 7
5 O que são 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 é necessário para trabalhar com HTML? ............ 12
11 Sintaxe dos comandos HTML ............................................ 12
11.1 Como Exibir o Código HTML de uma Página da Internet 13
12 Estrutura Básica do HTML ................................................. 13
12.1 Elementos Básicos do HTML ....................................... 14
13 Títulos e Subtítulos ........................................................... 15
13.1 Exercício 01 ............................................................... 16
14 Acentuação ........................................................................ 16
14.1 Exercício 02 ............................................................... 17
15 Inserindo comentários ...................................................... 18
16 Formatação de Textos ....................................................... 19
16.1 Marcação FONT ......................................................... 19
Rev00 17/07/12
iv | P á g i n a
16.2 Exercício 03 ............................................................... 21
16.3 Os principais Comandos de Estilo de Texto: ................. 22
16.4 Movimentando o texto – Marquee ............................... 22
16.5 Exercício 04 ............................................................... 23
17 Formatação de Parágrafos ............................................... 24
17.1 Exercício 05 ............................................................... 25
18 Linhas Horizontais ............................................................ 25
18.1 Exercício 06 ............................................................... 26
19 Imagens ............................................................................ 27
19.1 Principais Diferenças entre as Imagens GIF e JPEG ....... 28
19.2 Qual Formato Escolher? .............................................. 29
19.3 Exercício 07 ............................................................... 30
19.4 Definir uma Imagem no Plano de fundo ....................... 30
19.5 Exercício 08 ............................................................... 31
20 Hyperlinks ......................................................................... 31
20.1 Definir um Link Externo .............................................. 32
20.2 Exercício 09 ............................................................... 33
20.3 Definindo um Link Interno........................................... 33
20.4 Exercício 10 ............................................................... 34
20.5 Definir um Link de Correio Eletrônico “Mailto’’ .............. 35
20.6 Acrescentar no Exercício 10......................................... 36
20.7 Definir um Link para Outro Site ................................... 36
20.8 Acrescentar no Exercício 10......................................... 36
20.9 Definir uma Imagem como Link ................................... 37
21 Listas ................................................................................ 37
21.1 Listas Ordenadas ........................................................ 37
21.2 Exercício 11 ............................................................... 39
21.3 Listas Não Ordenadas ................................................. 40
21.4 Exercício 12 ............................................................... 40
Rev00 17/07/12
v | P á g i n a
21.5 Lista de Definição ....................................................... 42
21.6 Exercício 13 ............................................................... 42
22 Tabelas .............................................................................. 43
22.1 Atributos de uma Tabela............................................. 44
22.2 Exercício 14 ............................................................... 45
22.3 Atributos da marcação <TABLE> ................................ 46
22.4 Acrescentar no Exercício 14 a linha abaixo:.................. 47
22.5 Atributos da marcação<TR> ....................................... 48
22.6 Atributos das marcações <TD> e <TH> ...................... 48
22.7 Exercício 15 ............................................................... 49
23 Formulários ....................................................................... 51
23.1 Atributos da marcação <FORM> ................................. 52
23.2 Exercício 16 ............................................................... 58
24 Frames ............................................................................... 60
24.1 Atributos HTML para frames ....................................... 61
24.2 Exercício 17 ............................................................... 64
24.3 Links em Frame alvo .................................................. 66
25 Iframe – Inline Frame ....................................................... 67
25.1 Exercício 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 São Paulo para que
possam se apropriar, criar e elaborar homepages utilizando a linguagem
HTML (Hyper Text Markup Language), Desta forma, poderão multiplicar os
conteúdos aos usuários para que estes possam explorar sua criatividade
além de ampliar os conhecimentos sobre os diversos recursos da WEB.
2 JUSTIFICATIVA
Com o avanço da tecnologia muitas vezes condiciona os cidadãos a
se apropriarem cada vez mais das informações disponibilizadas na rede.
Diariamente são acessados milhares de endereços na internet, por esta
razão os usuários necessitam mais conhecimentos para que, além de terem
acesso à rede, possam criar e publicar uma página na web.
O HTML possibilitará aos futuros desenvolvedores a criação e o
desenvolvimento da estrutura das páginas web e, como base de
conhecimento, condições para que possam futuramente aprimorar suas
páginas utilizando outros recursos.
Rev00 17/07/12
7 | P á g i n a
3 PÁGINAS WEB
Páginas Web, documentos HTML ou mesmo páginas na Internet,
são documentos localizados em um servidor específico e acessíveis
mundialmente através da Internet. As páginas podem ser simples, com
algumas linhas de texto, ou ter milhares de páginas em um único site.
A publicação de uma página, ao contrário do que se pensa, não é
complicada, tampouco dispendiosa. Alguns provedores de acesso fornecem
espaço em seu servidor para que os usuários ou os assinantes do sistema
possam hospedar seu site e, mesmo quando é pago, não é tão caro.
Em uma página pessoal, é possível disponibilizar diversas
informações, tais como: poemas, fotos do animal de estimação, desenhos
dos filhos, comentários relativos ao trabalho, dentre outros. O limite é a
imaginação do usuário e o espaço em disco disponibilizado pelo provedor
de hospedagem.
4 HOME PAGE
É a página inicial ou a página de entrada de um site. Uma
apresentação da Web é um conjunto de páginas estruturadas sobre um
determinado conteúdo que pode ser composto por textos, imagens,
diagramas. Esta apresentação fica armazenada em um local chamado Site,
tradução literal de Sítio, ou seja, um lugar na internet.
Rev00 17/07/12
8 | P á g i n a
5 O QUE SÃO BROWSERS?
Browser, também conhecido como navegador é uma ferramenta
primordial que tem como função localizar e interpretar documentos na
internet. Com o passar do tempo os browsers foram ficando cada vez mais
sofisticados com inclusão de imagens, novos métodos de formatação de
texto, reconhecimento de novos formatos de dados, capacidade de
comunicação por voz e recepção de vídeo e áudio. Há dezenas de browsers
diferentes, sendo o Mozilla Firefox um dos mais usados no Linux.
6 PROTOCOLO HTTP
Os protocolos são “línguas” usadas entre o computador que acessa
a informação 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 Transferência de Hipertexto trata-se de uma linguagem usada
na WWW, onde, através dele, qualquer browser pode se comunicar com
qualquer servidor, independente dos fabricantes dos softwares envolvidos.
Os browsers mais modernos são compatíveis com vários tipos de
protocolos, além do HTTP. O mais conhecido é o FTP, sigla que significa
File Transfer Protocol – Protocolo de Transferência de Arquivos, onde se
trata de um método prático 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 informações que descreve um recurso
qualquer na Internet, seja e-mail, FTP, telnet ou WWW. Assim, os
programas sabem que protocolos devem utilizar e podem também orientar
o usuário, quando o recurso solicitado estiver além das possibilidades do
programa. Veja abaixo, exemplos de algumas URLs válidas:
http://pobox.com/~cardoso
ftp://ftp.unikey.com.br
telnet:bbs.unikey.com.br
mailto:[email protected]
8 COMO PLANEJAR SEU SITE
Projetar um site demanda um considerável planejamento prévio
sendo que não basta somente decidir qual será seu público e o que incluir
no site, mas terá que planejar como apresentar essa informação no site.
Planejar seu site é o passo mais importante. Sem um bom plano, seu site
poderá não ser bem-sucedido, o que significa no pior dos casos, que
ninguém 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 propósito do site que será criado, é de
extrema importância 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
façam ou saibam após 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 negócios, certifique-se de obter a opinião de todos os envolvidos
no projeto e nas decisões sobre o conteúdo.
2. Qual é o público que quero atingir?
Você deve decidir quem irá visitar seu site e depois planejar um
site que atraia essas pessoas. Para focalizar seu público, faça a si mesmo
algumas perguntas mais específicas. Qual é a formação de seus amigos, de
sua família ou de seus clientes? Quais grupos etários estão representados?
Quais são seus interesses? O que eles fazem?
3. Quais informações quero compartilhar com os visitantes de meu
site?
Muitas informações estão disponíveis sobre você como pessoa, sua
empresa ou organização, ou sobre seu tópico. Determine quais
informações você quer tornar disponíveis aos seus visitantes. Seja muito
cuidadoso ao determinar qual informação você não deseja compartilhar. A
melhor maneira de decidir o que você quer no seu site é observar outros
sites na Internet.
4. Que tipo de informação você quer obter dos visitantes?
A Internet é uma grande fonte, tanto para dar como para receber
informações. Você precisa decidir se apenas quer compartilhar informações
com aqueles que vêm seu site ou se também quer obter informações
deles, como por exemplo, opiniões sobre seu site ou informações 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 manutenção.
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 contêm informações sobre a pessoa
que criou informações sobre hobbies, interesses e amigos ou família e são
sites menores.
Os sites profissionais anunciam aquilo que uma empresa ou
organização 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 usuários comprem produtos via Internet.
10 O QUE É HTML?
HTML significa Hyper Text Markup Language, que pode ser
traduzido como Linguagem de Marcação de Hipertexto. É uma linguagem
de descrição de página e não uma linguagem de programação. Hipertexto
é um método de organização que permite que textos, imagens, sons e
ações fiquem interligados.
Rev00 17/07/12
12 | P á g i n a
10.1 O QUE VOCÊ PODE FAZER COM O HTML?
A função do HTML é criar páginas na Internet. Você pode criar
textos nas páginas, fazer formatação, criar listas, criar tabelas, criar
formulários, trabalhar com imagens, etc. O HTML cria páginas estáticas,
sem animação.
10.2 O QUE É NECESSÁRIO 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
extensão .htm ou .html. - Pode-se escolher a extensão em
qualquer página criada do site.
Observação: Os arquivos de um projeto devem ser colocados
dentro de uma mesma pasta (diretório).
11 SINTAXE DOS COMANDOS HTML
Nos comandos são utilizadas duas marcas ou tags que são:
< > - Marca de abertura </> - Marca de fechamento.
<comando atributo=“valor” atributo=“valor”>
Rev00 17/07/12
13 | P á g i n a
Os atributos somente devem ser digitados na marca de abertura.
As marcas de fechamento não aceitam atributos.
Exemplos de marcas:
<b> ... </b> - Coloca negrito no texto.
<center> ... </center> - Centraliza o texto na página.
<font> ... </font> - Permite definir o tipo, tamanho, cor,
estilo da fonte.
11.1 COMO EXIBIR O CÓDIGO HTML DE UMA
PÁGINA DA INTERNET
Dar um duplo clique no ícone do Mozilla.
Acessar uma página qualquer.
Clicar no menu View e Page Source.
12 ESTRUTURA BÁSICA DO HTML
A estrutura básica de um documento HTML é a seguinte:
<html>
<head>
<title> Título da Página </title>
</head>
<body>
...
Rev00 17/07/12
14 | P á g i n a
</body>
</html>
12.1 ELEMENTOS BÁSICOS DO HTML
<HTML> ... </HTML> - Indicam respectivamente o início e o
fim de um documento HTML. Todos os outros elementos devem estar
entre estas marcas.
<HEAD> ... </HEAD> - Delimitam a seção de cabeçalho do
documento. Trata-se da primeira seção do documento.
<TITLE> ... </TITLE> - Indicam o título do documento, que
será exibido na barra de título do navegador. Estas marcas devem constar
na seção do cabeçalho.
<BODY> ... </BODY> - Representam o corpo do documento.
Entre estas marcas estará contida a maior parte do conteúdo a ser exibido
com textos e imagens. Este elemento pode conter cinco atributos
opcionais, que são:
Atributo BACKGROUND: Especifica uma imagem como fundo da
página.
Exemplo: <body background=“fundo.gif”>.
Atributo BGCOLOR: Configura a cor de fundo da página.
Exemplo: <body bgcolor=“blue”>
Atributo TEXT: Configura a cor do texto da página.
Exemplo: <body text=“white”>
Atributos LINK, ALINK, VLINK: Configuram as cores dos links
da página. 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: <body link=“blue” vlink=“purple”
alink=“red”>
Por padrão, este exemplo configura uma página com links azuis,
links ativos em vermelho e links visitados em roxo.
Como o HTML não é uma linguagem de programação, você nunca
será avisado de erros que tenha cometido na digitação ou na edição do seu
documento. O simples esquecimento de uma barra pode gerar efeitos
colaterais inesperados na visualização de uma página e estes efeitos serão
o único sinal de que algo está errado.
13 TÍTULOS E SUBTÍTULOS
O destaque para títulos e subtítulos é importante, porque mostra
ao leitor uma visão geral sobre o que trata o texto em questão. Você pode
utilizar até seis níveis de títulos, que são numerados de 1 (o maior) a 6 (o
menor). São tags do tipo início-fim. Exemplos:
Em HTML A saída será
<h1> H1 </h1> H1
<h2> H2 </h2> H2
<h3> H3 </h3> H3
<h4> H4 </h4> H4
<h5> H5 </h5> H5
<h6> H6 </h6> H6
Rev00 17/07/12
16 | P á g i n a
13.1 EXERCÍCIO 01 <html>
<head>
<title> Primeira Pagina </title>
</head>
<body>
<h1> Primeira Pagina </h1>
</body>
</html>
Salvar o arquivo no formato texto, com o nome exercicio01.html e
executar a página no navegador.
Observação.: Para executar uma página html no navegador pode-
se abrir diretamente pelo navegador (menu Arquivo / Abrir) ou através do
gerenciador de arquivos.
14 ACENTUAÇÃO
Como cada navegador lida com os caracteres de uma forma
diferente, é boa prática não acentuar os textos, pois é impossível saber
qual tabela de caracteres o usuário dispõe, e nem a partir de qual
equipamento a página será acessada.
Um dos mecanismos utilizados para solucionar esse impasse é a
tabela de caracteres padrão desenvolvida pela ISO (International
Standards Organization) que é uma organização que desenvolve e
administra padrões.
Rev00 17/07/12
17 | P á g i n a
Veja os exemplos a seguir:
Para conseguir Deve-se digitar
Á Á
À À
à Ã
 Â
Ç Ç
Ó ó
14.1 EXERCÍCIO 02
<html>
<head>
<title> Exercício 02 </title>
</head>
<body>
<h2> Esta Página contém
textos acentuados e com o marcador de cabeçalho
H2 </h2>
</body>
</html>
Salvar o arquivo no formato texto, com o nome exercicio02.html e
executar a página no navegador.
Rev00 17/07/12
18 | P á g i n a
15 INSERINDO COMENTÁRIOS
As tags <!-- ... --> servem para inserirmos comentários na página
com o propósito de organizar o programa e possibilitar fácil visualização
dos códigos html. Como são utilizadas para informar, as linhas onde consta
essa marcação não serão processadas pelo navegador.
Exemplo:
<html>
<head>
<title> Exercício 02 </title>
</head>
<body>
<!-- Esta linha não será processada pelo
navegador, serve apenas como comentário -->
<h2> Esta Página contém textos
acentuados e com o marcador de cabeçalho H2
</h2>
</body>
</html>
Rev00 17/07/12
19 | P á g i n a
16 FORMATAÇÃO DE TEXTOS
Todos os comandos que alteram o estilo do texto são do tipo liga-
desliga, ou seja, precisam ser especificados em pares, marcando o início e
o fim do trecho que sofrerá a formatação.
16.1 MARCAÇÃO FONT
A sintaxe <font face=“...” size=“...” color=“...”>
... </font> - Respectivamente, define o tipo, o tamanho e a cor da
fonte. Não é necessário usar todos os atributos juntos e não 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
relação dos tamanhos válidos é:
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 através de um nome predefinido de cores ou no
formato hexadecimal. Veja a tabela das principais cores:
Nome da Cor (Inglês)
Nome da Cor (Português)
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 Púrpura #800080
Observação: Pode-se usar o formato hexadecimal.
Rev00 17/07/12
21 | P á g i n a
16.2 EXERCÍCIO 03
<html>
<head>
<title> Exercício 03 </title>
</head>
<body>
<h1> Formatação de textos </h1>
<font face=“courier” size=“5” color=“red”>Esta
linha está com a fonte courier, tamanho 5 e na
cor vermelha</font>
</body>
</html>
Salvar o arquivo no formato texto, com o nome exercicio03.html e
executar a página no navegador.
Rev00 17/07/12
22 | P á g i n a
16.3 OS PRINCIPAIS COMANDOS DE ESTILO DE
TEXTO:
COMANDO SINTAXE FUNÇÃO
Negrito <b> texto </b> Aplica negrito.
Itálico <i> texto </i> Aplica itálico.
Sublinhado <u> texto </u> Aplica sublinhado.
Big <big> texto </big> Aumenta o tamanho da fonte e
aplica negrito.
Tachado <s> texto </s> Aplica tachado.
Small <small> texto </small> Reduz e altera a fonte.
Sobrescrito <sup> texto </sup> Aplica sobrescrito.
Subscrito <sub> texto </sub> Aplica subscrito.
Pisca-pisca <blink> texto </blink> Faz o texto piscar.
Observação: Em alguns navegadores o atributo BLINK pode não
funcionar.
16.4 MOVIMENTANDO O TEXTO – MARQUEE
A marcação 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 direção 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:
<marquee width=“50%” height=“35%”
direction=“left” scrollamount=“10” behavior=“slide”>
texto </marquee>
16.5 EXERCÍCIO 04
<html>
<head>
<title> Formatação de Textos</title>
</head>
<body>
<h1> Formatação de Textos </h1>
<b> Negrito </b><br>
<i> Itálico </i><br>
<u> Sublinhado </u><br>
<big> Aumenta a fonte e aplica negrito </big><br>
<small> Reduz e altera a fonte </small><br>
<s> Texto tachado </s> <br>
H <sub> 2 </sub> O <br>
X <sup> 2 </sup> <br>
Rev00 17/07/12
24 | P á g i n a
<font face=“Arial” size=“6” color=“red”>Texto em
Arial, tamanho = 6 e na cor vermelha </font>
<marquee width=“100” height=“100”
direction=”left” scrollamount=”10”
behavior=”scroll”> Faz o texto rolar pela tela
</marquee>
</body>
</html>
Salvar o arquivo no formato texto, com o nome exercicio04.html e
executar a página no navegador.
17 FORMATAÇÃO DE PARÁGRAFOS
Comando <P ALIGN=...> ... </P> - Delimita um parágrafo. É
possível omitir o elemento de fim </p> sem danos ao resultado final. O
efeito visual é uma linha em branco antes do início do próximo parágrafo.
O atributo opcional ALING configura o alinhamento do parágrafo e pode
conter os valores left (esquerda), center (centro), right (direita) ou justify
(justificado).
O marcador <CENTER> ... </CENTER> - Centraliza texto e
parágrafos – é o único marcador de alinhamento que pode ser usado sem
o auxílio da tag <P>...</P>
Comando <BLOCKQUOTE> ... </BLOCKQUOTE> - Este comando
destaca um bloco de texto citado de outra fonte através de uma
endentação à direita. É utilizado na criação de citações longas que não
devem ser aninhadas em parágrafos.
Rev00 17/07/12
25 | P á g i n a
17.1 EXERCÍCIO 05
<html>
<head>
<title> Trabalhando com parágrafos</title>
</head>
<body>
<p align=“center”>Este parágrafo está
centralizado</p>
<p align=“right”>Já este está alinhado à
direita</p>
</body>
</html>
Salvar o arquivo no formato texto, com o nome exercicio05.html e
executar a página no navegador.
18 LINHAS HORIZONTAIS
As Linhas Horizontais são utilizadas para dar destaque a títulos ou
para gerar a sensação de quebra entre uma informação e outra. Trata-se
de uma marca solitária, que pode ser utilizada com alguns atributos
opcionais.
<HR> Marcação para criação de linha padrão 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:
<HR SIZE=“...” WIDTH=“...” ALIGN=“...”
COLOR=“...”>:
18.1 EXERCÍCIO 06
<html>
<head>
<title> Linhas Horizontais</title>
</head>
<body>
<h1>Linhas Horizontais</h1>
<br><br>
<h3>Linha Horizontal simples</h3>
<hr>
<br><br>
<h3>Linha Horizontal - largura de 50% da página
</h3>
<hr width=“50%”>
Rev00 17/07/12
27 | P á g i n a
<br><br>
<h3>Linha Horizontal – altura de 10 pixel's</h3>
<hr size=“10”>
<br><br>
<h3>Linha Horizontal com cor de preenchimento
</h3>
<hr size=“15” color=“red”>
</body>
</html>
Salvar o arquivo no formato texto, com o nome exercicio06.html e
executar a página no navegador.
19 IMAGENS
Além de texto, é possível colocar imagens em páginas Web. Os
formatos gráficos padrões da Internet são: 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 técnica de compressão no mesmo estilo de programas como o Winzip.
Os arquivos GIF podem ter um máximo de 256 cores, e para a grande
maioria dos usuários é mais do que suficiente, já que a grande maioria das
pessoas tem suas placas de vídeo configuradas com este número de cores.
É uma extensão de imagens muito utilizada para criar animações
na página web. GIF é o formato de imagem mais utilizado na Internet.
Rev00 17/07/12
28 | P á g i n a
Esse padrão tem duas grandes vantagens: utilizar fundos transparentes e
animações.
b) JPEG -Joint Photografic Experts Group - O formato JPEG
foi criado para que imagens “true-color” (com 16 milhões 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, não é notada na tela de um monitor, daí o seu grande
sucesso. Ao contrário do GIF, que tem uma compressão padrão (que não
pode ser alterada), o JPEG tem uma compressão variável. Porém, quanto
mais você comprime, maior será a perda de qualidade.
19.1 PRINCIPAIS DIFERENÇAS ENTRE AS IMAGENS
GIF E JPEG
CARACTERÍSTICA GIF JPEG
Animação Sim Não
Tamanho do arquivo Maior Menor
Resolução Menos cores (256) Mais cores (16
milhões)
Transparência Sim Não
Velocidade de download
Mais rápido Mais lento
Exibição 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 número de
cores de sua imagem. Normalmente, você deve usar o GIF para desenhos
ou logotipos, e usar JPEG para fotos ou imagens com muita variação de
cores.
Para que uma imagem seja apresentada em um documento HTML,
é necessário fazer uma referência ao nome do arquivo da imagem, através
da marcação:
<IMG SRC=“figura.gif”>.
Caso a imagem esteja em um diretório diferente do documento
HTML, o nome do diretório deve ser incluído na referência. Lembre-se que
você pode também usar uma imagem como link. Neste caso, combine os
elementos de link e imagem.
Exemplo:
<a href=“http://www.telecentros.sp.gov.br”>
<img src=“imagens/imagem.gif” border=“0”
alt=“telecentros”> </a>.
O atributo BORDER serve para definir uma borda para a imagem.
Caso a imagem não possa ser carregada pelo navegador o atributo ALT
servirá para definir uma legenda para a imagem com no máximo 255
caracteres.
Rev00 17/07/12
30 | P á g i n a
19.3 EXERCÍCIO 07
<html>
<head>
<title> Trabalhando com Imagens</title>
</head>
<body>
Imagem Simples<br>
<img src=“imagem2.jpg”><br><br>
Imagem com borda e legenda<br>
<img src=“imagem3.gif” border=“5” alt=“Legenda”>
</body>
</html>
Salvar o arquivo no formato texto, com o nome exercicio07.html e
executar a página no navegador.
19.4 DEFINIR UMA IMAGEM NO PLANO DE FUNDO
Para ir além de um segundo plano inserindo apenas uma cor, o
HTML permite atribuir uma imagem, para ser exibida no segundo plano de
sua da página Web. O atributo BACKGROUND deve ser inserido na
marcação BODY conforme exemplo abaixo:
Rev00 17/07/12
31 | P á g i n a
Exemplo:
<body background=“figura.gif”>
19.5 EXERCÍCIO 08
<html>
<head>
<title> Trabalhando com Imagens no plano de
fundo</title>
</head>
<body background=“imagem_segundo_plano.jpg”>
Conteúdo da página
</body>
</html>
Salvar o arquivo no formato texto, com o nome exercicio08.html e
executar a página no navegador.
20 HYPERLINKS
Os Hyperlinks são construções HTML que permitem o acesso a
outras páginas construídas ou a recursos na Internet com um simples
clique. É possível programar um hyperlink que permitirá o usuário visualizar
o topo da página atual, abrir outra página construída ou até mesmo
Rev00 17/07/12
32 | P á g i n a
acessar o conteúdo de páginas armazenadas em outro servidor de outro
país.
Os hyperlinks podem ter a forma de hipertexto ou hipermídia onde,
na maioria dos navegadores, o hipertexto é exibido como um texto azul e
sublinhado e a hipermídia inclui hiperimagens. Estas são simples imagens
gráficas incorporadas, tais como fotografias ou ícones, que aceitam
vínculos.
Os destinos de um hyperlink são:
Um indicador (um local na mesma página);
Uma página interna;
Um e-mail;
Um site externo;
20.1 DEFINIR UM LINK EXTERNO
Um Web site consiste de algumas páginas separadas, onde, para
torná-las acessíveis entre si e convenientes para os visitantes, é preciso
definir os links entre as páginas. Costuma-se colocar estes links no início ou
no final de cada página.
Exemplo:
<a href=“página2.html”> Link para a Página 2 </a>
Neste exemplo é criado um link para a página de nome
página2.html.
Rev00 17/07/12
33 | P á g i n a
20.2 EXERCÍCIO 09
<html>
<head>
<title> Trabalhando com Link's</title>
</head>
<body>
Criando um link para uma página<br>
<a href=“exercicio01.html”>Exercício 01</a>br
Criando um link para um site na internet<br>
<a href=“http://www.google.com.br”>Google</a>
</body>
</html>
Salvar o arquivo no formato texto, com o nome exercicio09.html e
executar a página no navegador.
20.3 DEFININDO UM LINK INTERNO
Um link dentro de uma página é uma ligação que aponta para
outro local dentro da mesma página possuindo duas partes: o link onde o
usuário deve clicar e o ponto (região) na página para o qual o cursor deve
saltar.
Para este tipo de vínculo, é preciso definir uma âncora com o nome
do local de destino seguindo o formato: <A NAME=“topo’’>, onde no
exemplo, “topo” é o nome atribuído ao local de destino.
Rev00 17/07/12
34 | P á g i n a
Observação.: O nome do local de destino deve iniciar com uma
letra e não pode começar com número e nem com caractere especial.
Exemplo: <a name=“topo”> ... </a>
Para a criação do link que permitirá o usuário clicar para acessar o
ponto da página em questão, deverá direcioná-lo para o nome criado no
exemplo anterior.
Exemplo: <a href=“#topo”> Voltar para o Início
</a>
Onde #topo é o indicador do local de destino. O símbolo #
“sustenido” indica ao navegador a posição do indicador nomeado. “Voltar
para o Início” é a frase que os navegadores exibem como hyperlink.
20.4 EXERCÍCIO 10
<html>
<head>
<title> Trabalhando com Link's</title>
</head>
<body>
Link's<br>
<pre> 1<a name=“#inicio”></a><a href=“#fim”>Ir para nº
120</a>
Rev00 17/07/12
35 | P á g i n a
2
3 …
50<a name=“meio”></a><a href=“#inicio”>Ir para nº
1</a> …
120<a name=“fim”></a><a href=“#inicio”>Ir para nº
1</a>
</pre>
</body>
</html>
Salvar o arquivo no formato texto, com o nome exercicio10.html e
executar a página no navegador.
20.5 DEFINIR UM LINK DE CORREIO ELETRÔNICO
“MAILTO’’
Um link Mailto permite que os visitantes enviem mensagens para o
endereço de e-mail definido, simplesmente clicando no hyperlink. Quando
o usuário clica no link mailto, o aplicativo de correio eletrônico padrão abre
uma janela de mensagem endereçada para o mailto de destino.
A seção de rodapé é um bom local para se colocar um link mailto.
Observação.: Para este link funcionar corretamente, é necessário
que os programas de correio estejam configurados.
Rev00 17/07/12
36 | P á g i n a
Exemplo:
<a href=“mailto:[email protected]”> Contato
</a>
20.6 ACRESCENTAR NO EXERCÍCIO 10
Criando um link para contato<br>
<a href=“mailto:[email protected]”> Contato
</a>
20.7 DEFINIR UM LINK PARA OUTRO SITE
Os hyperlinks externos fazem vínculos com outros sites na
Internet. São eles que tornam a Internet possível. Deve-se incluir uma URL
completa quando você definir um hyperlink externo.
Exemplo:
<a href=“http://www.telecentros.sp.gov.br”>
Telecentros</a>
20.8 ACRESCENTAR NO EXERCÍCIO 10
Criando um link para contato<br>
<a href=“http://www.telecentros.sp.gov.br”>
Telecentros</a>
Rev00 17/07/12
37 | P á g i n a
20.9 DEFINIR UMA IMAGEM COMO LINK
Um link em uma imagem é também chamado de vínculo de
hipermídia, que é um gráfico que funciona com um hyperlink. Uma maneira
de utilizar vínculos em imagens é criar botões e adicioná-los à barra de
navegação da página web.
Exemplo:
<a href=“página2.html”><img src=“prefeitura.jpg”>
</a>
21 LISTAS
Na linguagem HTML existem elementos específicos para a criação
de listas, que podem ser listas ordenadas (OL), listas sem ordenação (UL),
ou listas de definições (DL).
Um detalhe interessante é que podem ser criadas listas aninhadas,
ou seja, listas dentro de listas. A seguir, veremos as características de cada
uma delas.
21.1 LISTAS ORDENADAS
São estruturas sequenciais inseridas através da marcação OL –
Ordered Lists (listas Ordenadas).
A estrutura das listas ordenadas é bastante simples, onde os itens
da lista são definidos pelos elementos <LI> e </LI>.
Rev00 17/07/12
38 | P á g i n a
Exemplo:
<ol>
<li> Elemento 1 </li>
<li> Elemento 2 </li>
<li> Elemento 3 </li>
<li> Elemento 4 </li>
</ol>
Atributos de <OL>
Type: o atributo opcional TYPE define como será o tipo de
numeração de cada linha. Os tipos disponíveis são: “A” (A, B, ..., Z), “a” (a,
b, ..., z), “I” (I, II, ..., V), e “1” (1, 2, ..., 5). Se omitido, é utilizado o tipo
padrão (1, 2, 3).
Start: o atributo opcional START define o início da numeração de
cada elemento, ou seja, a partir de que elemento a lista deve se iniciar. No
exemplo abaixo, a lista terá início na letra “e”:
Exemplo:
<ol type=“a” start=“5”>
<li> Elemento 1 </li>
<li> Elemento 2 </li>
<li> Elemento 3 </li>
<li> Elemento 4 </li>
</ol>
Rev00 17/07/12
39 | P á g i n a
21.2 EXERCÍCIO 11
Abrir um arquivo novo e digitar os comandos abaixo.
<html>
<head> <title> Listas Ordenadas </title>
</head>
<body>
<h2> Lista ordenada por números </h2>
<ol>
<li> Elemento 1 </li>
<li> Elemento 2 </li>
<li> Elemento 3 </li>
</ol>
<h2> Lista ordenada por letras, iniciando em D
</h2>
<ol type=“a” start=“4”>
<li> Elemento 1 </li>
<li> Elemento 2 </li>
<li> Elemento 3 </li>
</ol>
</body>
</html>
Salvar o arquivo no formato texto, com o nome exercicio11.html e
executar a página no navegador.
Rev00 17/07/12
40 | P á g i n a
21.3 LISTAS NÃO ORDENADAS
São estruturas que não possuem sequência e são inseridas através
da marcação UL – Unordered Lists (listas Não Ordenadas).
A estrutura das listas sem ordenação é a mesma das listas
ordenadas, sendo que, na apresentação, os itens serão precedidos por um
marcador (bullet). No caso de listas sem ordenação 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 círculo vazado.
disc: É um círculo preenchido.
Observação.: Se omitido, é utilizado o tipo padrão (disc).
21.4 EXERCÍCIO 12
Abrir um arquivo novo e digitar os comandos abaixo.
<html>
<head>
<title> Listas Não Ordenadas </title>
</head>
<body>
<h2> Lista Não ordenada </h2>
<ul>
Rev00 17/07/12
41 | P á g i n a
<li> Elemento 1 </li>
<li> Elemento 2 </li>
<li> Elemento 3 </li>
</ul>
<h2> Duas listas Não ordenadas aninhadas </h2>
<ul type=“square”>
<li> Elemento 1 </li>
<li> Elemento 2
<ul>
<li> Elemento 2.1 </li>
<li> Elemento 2.2 </li>
<li> Elemento 2.3 </li>
</ul>
</li>
<li> Elemento 3 </li>
<li> Elemento 4 </li>
</ul>
</body>
</html>
Salvar o arquivo no formato texto, com o nome exercicio12.html e
executar a página no navegador.
Rev00 17/07/12
42 | P á g i n a
Observação.: Como já mencionado, <LI> ... </LI> é o
elemento que define cada item de uma lista ordenada ou não ordenada. O
seu conteúdo pode ser texto, outras listas, imagens ou links.
21.5 LISTA DE DEFINIÇÃO
As Listas de Definição são estruturas que englobam uma lista de
definições, ideais para a criação de glossários e coisas do gênero. São
inseridas através da marcação DL – Definition Lists (listas de Definição)
onde sua estrutura é diferente das outras, pois existem dois elementos – o
termo a ser definido (DT), e a definição propriamente dita (DD). Na
exibição cada termo aparece em uma linha, e a respectiva definição na
linha seguinte, deslocada para a direita.
21.6 EXERCÍCIO 13
Abrir um arquivo novo e digitar os comandos abaixo.
<html>
<head>
<title> Listas de Definição </title>
</head>
<body>
<h2> Listas de Definição </h2>
<dl>
<dt> HTML </dt>
<dd> HyperText Markup Language
</dd>
Rev00 17/07/12
43 | P á g i n a
<dt> OL </dt>
<dd> Listas Ordenadas </dd>
<dt> UL </dt>
<dd> Listas Sem Ordenação </dd>
<dt> LI </dt>
<dd> Elemento da Lista </dd>
</dl>
</body>
</html>
Salvar o arquivo no formato texto, com o nome exercicio13.html e
executar a página no navegador.
Observação.: 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 específicos para
a criação e formatação de tabelas. O recurso de tabelas é muito
interessante e muito usado nas páginas Web. As tabelas são formadas por
linhas e colunas, e na interseção delas estão as células.
Na linguagem HTML, você pode inserir nas células 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 definição de uma tabela são:
- Comando <TABLE> ... </ TABLE> - Todas as outras marcas
referentes às tabelas - linhas e células somente serão consideradas se
incluídas entre estas marcas.
- Comando <CAPTION> ... </CAPTION> - Trata-se de um
elemento opcional que define o título da tabela, e deve constar entre as
marcas que definem a tabela, mas separado das marcas que definem
linhas e colunas. Sem parâmetros, o título é apresentado acima da tabela e
centralizado.
- Comando <TR> ... </TR> - Table Row ou Linha de Tabela.
Este é o elemento utilizado na definição de linhas das tabelas. As tabelas
são definidas em linhas, sendo as linhas compostas de células.
- Comando <TD> ... </TD> - Table Data ou Dado de Tabela.
Estas marcas delimitam as células que compõem as linhas, e assim sendo
devem estar inseridas entre marcas de linhas.
O alinhamento padrão de uma célula é à esquerda horizontalmente
e centralizado verticalmente, e caso o número de células varie de uma
linha para outra, as linhas com menos células são completadas à direita
com células em branco.
- Comando <TH> ... </TH> - Table Header ou Cabeçalho de
Tabela. É o elemento que define as células de cabeçalho. As células de
cabeçalho têm as características idênticas às células de dados definidas por
<TD>, a não ser pelo alinhamento padrão horizontal, que é centralizado, e
pela utilização de fonte em negrito.
Rev00 17/07/12
45 | P á g i n a
22.2 EXERCÍCIO 14
Abrir um arquivo novo e criar a tabela da figura abaixo.
<html>
<head>
<title> Tabela Simples </title>
</head>
<body>
<table border=“1”>
<caption> <b> Tabela Simples </b> </caption>
<tr>
<th> Nome </th>
<th> Idade </th>
</tr>
<tr>
<th> Maria </th>
<td> 14 </td>
</tr>
<tr>
<th> Eduardo</th>
<td> 11 </td>
</tr>
</table>
<br><br><br>
Rev00 17/07/12
46 | P á g i n a
</body>
</html>
Salvar o arquivo no formato texto, com o nome exercicio14.html e
executar a página no navegador.
22.3 ATRIBUTOS DA MARCAÇÃO <TABLE>
Estes elementos básicos possuem alguns parâmetros que permitem
um maior controle sobre alguns detalhes da apresentação da tabela.
- BORDER: A apresentação padrão de uma tabela é sem bordas.
A presença do parâmetro BORDER indica justamente que deve ser
desenhada uma borda em torno de cada célula da tabela. Pode ser usado
para indicar a espessura da borda em pixels.
Exemplo: <table border=“2”>
- WIDTH: Especifica a largura da tabela, que pode ser definida em
pixels ou em percentual referente à largura da janela. Caso não seja
especificado, o próprio browser se encarrega de determinar a largura mais
adequada de acordo com o conteúdo inserido nas células.
Exemplo: <table width=“75%”>
- CELLSPACING: Define o espaço entre as células, ou seja, a
largura das linhas de grade (as bordas que envolvem as células). É
especificado em pixels.
Exemplo: <table cellspacing=“3”>
Rev00 17/07/12
47 | P á g i n a
- CELLPADDING: Determina em pixels, o espaço entre o
conteúdo e as bordas da célula.
Exemplo: <table cellpadding=“6”>
- ALIGN: Configura o alinhamento horizontal da tabela em relação
aos outros elementos da página. Pode conter valores LEFT (esquerda),
CENTER (centro) ou RIGHT (direita). Este parâmetro não 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.
Observação.: Para alterar a cor das bordas internas da tabela
somente utilizando estilos.
22.4 ACRESCENTAR NO EXERCÍCIO 14 A LINHA
ABAIXO:
<body>
...
<table border=“1” width=“50%” cellspadding=“4”
bgcolor=“yellow”>
Rev00 17/07/12
48 | P á g i n a
22.5 ATRIBUTOS DA MARCAÇÃO<TR>
- ALIGN: Configura o alinhamento horizontal dos elementos
contidos nas células de toda linha. Pode conter os valores LEFT (esquerda),
CENTER (centro), RIGHT (direita) ou JUSTIFY (justificado). Se omitido, o
alinhamento padrão é à esquerda para as células de dados (<TD>), e
centralizado para células de cabeçalho (<TH>).
- VALIGN: Define o alinhamento vertical dos elementos contidos
nas células de uma linha. Pode conter os valores TOP (topo), MIDDLE
(meio) ou BOTTOM (abaixo). Se omitido, o alinhamento é ao meio.
22.6 ATRIBUTOS DAS MARCAÇÕES <TD> E
<TH>
- ALIGN: Configura o alinhamento horizontal dos elementos
contidos na célula. Pode conter os valores LEFT (esquerda), CENTER
(centro), RIGHT (direita) ou JUSTIFY (justificado). Se omitido, o
alinhamento é à esquerda para as células de dados (<TD>), e centralizado
para células de cabeçalho (<TH>).
- VALIGN: Define o alinhamento vertical dos elementos contidos
na célula. Pode conter os valores TOP (topo), MIDDLE (meio) ou BOTTOM
(abaixo). Se omitido, o alinhamento é ao meio.
- NOWRAP: Quando este parâmetro encontra-se associado a uma
célula, o browser entende que o texto dentro daquela célula não pode ser
dividido em mais de uma linha. Este parâmetro deve ser utilizado com
cuidado, para evitar colunas demasiadamente largas.
Rev00 17/07/12
49 | P á g i n a
- COLSPAN : Define o número de colunas de uma tabela a ser
ocupado por uma célula, ou seja, mesclar as células. Deve ser utilizado
para expandir uma célula horizontalmente. Ao atribuir COLSPAN=“2” a uma
célula, ela ocupará o seu espaço e o de mais uma célula para a direita.
- ROWSPAN: Define o número de linhas a ser ocupado por uma
célula. Deve ser utilizado para expandir uma célula verticalmente (para
baixo). Ao atribuir rowspan=“2” a uma célula, ela ocupará seu espaço e o
de mais uma célula abaixo, ou seja, outra linha.
22.7 EXERCÍCIO 15
Abrir um arquivo novo e digitar os comandos abaixo, para criar
uma tabela complexa.
<html>
<head>
<title> Tabela Complexa </title>
</head>
<body>
<table width=“50%” cellspacing=“0”
cellpadding=“4” bgcolor=“yellow”>
<tr bgcolor=“black” align=“center”>
<td colspan=“3”><font size=“3”
color=“yellow”><i><b>Tabela
Complexa</b></i></font></td>
</tr>
<tr> <td colspan=“3”> </td> </tr>
Rev00 17/07/12
50 | P á g i n a
<tr bgcolor=“black”>
<td> </td>
<th> <font color=“yellow”> Coluna 1<font
face=“yellow”> </th>
<th> <font color=“yellow”> Coluna 2 <font
face=“yellow”> </th>
</tr>
<tr align=“center”>
<th bgcolor=“black><font
color=“yellow”>Linha 1</font> </th>
<td> Célula 1-1 </td>
<td> Célula 1-2 </td>
</tr>
<tr align=“center”>
<th bgcolor=“black”> <font color=“yellow”> Linha
2 </font>
</th>
<td> Célula 2-1 </td>
<td> Célula 2-2 </td>
</tr>
<tr align=“center”>
<th bgcolor=“black”> <font color=”yellow“> Linha
3 </font> </th>
<td> Célula 3-1 </td>
<td> Célula 3-2 </td>
Rev00 17/07/12
51 | P á g i n a
</tr>
</table>
</body>
</html>
Salvar o arquivo no formato texto, com o nome exercicio15.html e
executar a página no navegador.
23 FORMULÁRIOS
Com certeza você já deve ter preenchido algum formulário em suas
viagens pela internet, seja para cadastros, pesquisas ou mesmo envio de
comentários. Os formulários aumentam o poder de interação da web e são
formas diferenciadas de receber dados dos visitantes de sua página.
Atualização ou consultas a base de dados, envio de dados por email, ou
simplesmente a construção de uma nova página (gerada a partir de novos
dados) são algumas das aplicações mais comuns.
Os elementos que delimitam os formulários em uma página são:
<form action=“...” method=“...” target=“...”> ...
</form>
Rev00 17/07/12
52 | P á g i n a
23.1 ATRIBUTOS DA MARCAÇÃO <FORM>
Todos os formulários contidos nas páginas devem estar entre as
marcações <form>...</form> para que possam ser direcionados
corretamente para seu destino. Os atributos utilizados para essas
marcações são:
- ACTION (ação): deve conter o endereço do programa ou
página que vai receber os dados do formulário (escrito em PHP, por
exemplo).
- METHOD (método): define como as informações coletadas no
formulário serão 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 informações separadamente. O GET envia todos os dados
do formulário em uma sequência de caracteres concatenados.
- TARGET (alvo): é opcional e só é necessário quando você está
usando frames, e deseja que a resposta ao formulário seja exibida em um
frame diferente do que está o formulário.
INPUT
INPUT significa entrada de dados, logo este é um dos elementos
que determina como será a entrada de dados nos campos de um
formulário. É usado para montar caixas de texto, botões e até caixas de
verificação de senhas.
Rev00 17/07/12
53 | P á g i n a
Exemplo:
<input type=“...” name=“...” value=“...”
size=“...” maxlength=“...” checked>
- O atributo TYPE (tipo) é muito importante, pois define o tipo do
elemento: caixas de texto, botões de escolha ou botões simples. Para ficar
mais claro, mostraremos um de cada vez explicando quais parâmetros
devem ser usados.
- O atributo NAME deve conter o nome do formulário para que
possa ser identificado posteriormente, quando for enviado para outro
programa ou página.
- O atributo VALUE pode conter um valor pré-definido para o
campo.
Tipos do elemento INPUT
- TEXT (texto): especificado no parâmetro TYPE indica que o
campo será de texto, ou seja, um campo onde você digita os dados:
<input type=“text” name=“...” value=“...”
size=“...” maxlength=“...”>
O parâmetro VALUE (valor), neste caso, pode ser usado se você
quiser definir um valor prévio para o campo, de tal forma que, quando a
página for carregada, este valor já venha preenchido.
Rev00 17/07/12
54 | P á g i n a
O parâmetro SIZE (tamanho) configura o tamanho do campo e é
baseado no número de caracteres. Se você quiser um campo com tamanho
de 40 caracteres deverá digitar SIZE=”40”. Note que este valor não limita o
campo em 40 caracteres, ele somente define o tamanho que será
mostrado na página.
O que define o número máximo de caracteres que podem ser
digitados é o parâmetro MAXLENGTH (comprimento máximo), que é
opcional.
- PASSWORD (senha): no parâmetro TYPE tudo funciona da
mesma forma que o valor TEXT, exceto que todas as informações digitadas
aparecem como um asterisco (*) - tal como quando digita-se uma senha
para se conectar à internet.
<input type=“password” name=“...” value=“...”
size=“...” maxlength=“...”>
- RADIO: no parâmetro TYPE define botões de escolha. Eles são
usados em situações onde somente uma opção pode ser selecionada. Em
nosso exemplo, este tipo de elemento serve para construir as opções para
a pergunta “Você gostou da minha página?”.
O parâmetro NAME, neste caso, deve ser igual para todos os
campos deste tipo, pois estará identificando a questão formulada.
O parâmetro VALUE deve conter o valor do campo, que será
passado ao programa interpretador do formulário.
O parâmetro CHECKED deve ser usado quando você desejar que
uma das opções esteja selecionada como padrão ao carregar a página.
Rev00 17/07/12
55 | P á g i n a
<input type=“radio” name=“...” value=“...”
checked>
- CHECKBOX: no parâmetro TYPE define botões de verificação. A
tradução do termo checkbox é meio difícil, mas, ao contrário dos botões de
escolha (do tipo RADIO), ele deve ser usado quando uma ou mais opções
são válidas. No nosso exemplo usamos este tipo na pergunta “Você
gostaria que eu respondesse a este seu comentário?”.
O parâmetro NAME, neste caso, deve ser diferente para cada
campo.
O parâmetro VALUE deve conter o valor do campo, que será
passado ao programa interpretador do formulário.
O parâmetro CHECKED deve ser usado quando você desejar que
uma das opções esteja selecionada como padrão ao carregar a página.
<input type=“checkbox” name=“...” value=“v...”
checked>
- RESET: no parâmetro TYPE define um botão que limpa todos os
campos, colocando os mesmos valores de quando a página foi carregada.
No parâmetro VALUE, pode-se definir o que estará escrito no botão. Caso
nenhum valor seja definido, aparecerá escrito somente “reset”. Em nosso
exemplo usamos este elemento no botão “Limpar todos os campos”.
<input type=“reset” value=“...”>
Rev00 17/07/12
56 | P á g i n a
- SUBMIT: no parâmetro TYPE define um botão que aciona o
envio das informações preenchidas no formulário ao programa
interpretador (aquele definido no parâmetro ACTION do elemento FORM).
O parâmetro VALUE define o que estará escrito no botão. Caso
nenhum valor seja definido, aparecerá escrito “submit”. Para definir o
botão “Enviar comentários” de nosso exemplo, usamos este tipo de
elemento.
<input type=“submit” name=“...” value=“...”>
- IMAGE: no parâmetro TYPE, assim como o botão tipo SUBMIT,
aciona o envio das informações preenchidas no formulário utilizando uma
imagem. Neste caso, passam a existir os parâmetros SRC e ALT
normalmente usados no elemento que define uma imagem.
O parâmetro SRC define o endereço ou nome do arquivo da
imagem.
O parâmetro ALT é opcional e define o texto que será mostrado
caso a imagem não seja carregada.
<input type=“image” name=“...” src=“...”
alt=“...”>
- SELECT: possibilita definir uma lista de opções para o visitante
escolher.
O parâmetro NAME define o nome desta lista, e SIZE define
quantos elementos serão exibidos na tela simultaneamente. Se for omitido,
somente uma opção aparece por vez.
Rev00 17/07/12
57 | P á g i n a
Cada opção da lista é definida através de um elemento OPTION e o
parâmetro VALUE deste elemento é o que determinará o valor de cada
opção. Em nosso exemplo, usamos este elemento para criar a lista de
opções para a resposta da pergunta “Qual é a página de que você mais
gostou?”.
<select name=“...” size=“...”>
<option value=“...”>
<option value=“...”>
...
</select>
- TEXTAREA: (área de texto) permite definir um campo de texto
com várias linhas. Ele é útil para colher comentários e depoimentos dos
visitantes.
O parâmetro ROWS define o número de linhas da caixa de texto, e
o parâmetro COLS define quantos caracteres (colunas) cada linha possui.
O parâmetro NAME define o nome da caixa de texto.
<textarea name=“...” rows=“...” cols=“...”> ...
</textarea>
Rev00 17/07/12
58 | P á g i n a
23.2 EXERCÍCIO 16
Abrir um arquivo novo e digitar os comandos abaixo, para criar um
formulário.
<html>
<head>
<title> Formulário 1 </title>
</head>
<body>
<h4>Cadastro de Clientes</h4>
<hr>
<form method=“POST” action=“”>
<b>Nome: </b><input type=“text” name=“nome”
size=“30” maxlength=“5”> <br><br>
<b>Digite o seu E-mail:</b><input type=“text”
name=“email” size=“30”>
<b>Senha do E-mail:</b><input type=“password”
name=“senha” size=“5” maxlength=“5”> <br><br>
<b>Sexo</b><br>
<input type=“radio” name=“sexo”>Masculino<br>
<input type=“radio”
name=“sexo”>feminino<br><br><br>
<b>Produtos Comprados:</b><br>
<input type=“checkbox” name=“computador”>
Computador <br>
Rev00 17/07/12
59 | P á g i n a
<input type=“checkbox” name=“monitor”>Monitor<br>
<input type=“checkbox” name=“teclado”>teclado
<br><br>
<b>Estado</b>
<select name=“listagem”>
<option size=“3”>AM</option>
<option>MG</option>
<option>PE</option>
<option>RJ</option>
<option>SP</option>
</select><br><br>
<b>Histórico do Cliente:</b><br>
<textarea name=“observacao” cols=“30” rows=“3”>
</textarea>
<br><br>
<input type=“file” name=“procurar”>
<input type=“submit” value=“Enviar Informações”>
<input type=“reset” value=“Limpar”><br>
</form>
</body>
</html>
Salvar o arquivo no formato texto, com o nome exercicio16.html e
executar a página no navegador.
Rev00 17/07/12
60 | P á g i n a
24 FRAMES
Através 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. Além 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 avançados para a construção
de Home Pages, os frames devem ser utilizados com o máximo de cuidado.
Sua utilização deve obedecer ao critério de necessidade. Os casos de real
necessidade de frames não são tantos, mas quando surgem, podem
melhorar significativamente o site.
Os casos mais comuns em que utilização de frames pode ser
indicada é na criação de índices e tutoriais para efeitos de design podendo
alterar suas diversas características através de recursos como a omissão de
barra de rolagem e bordas.
Com a definição de frames, os documentos escritos em HTML com
as extensões “.htm” e “.html” podem ser classificados em dois tipos:
Documentos de Layout:
Contêm informações sobre a estrutura de frames dos documentos.
Cada frame declarada em documento de layout contém uma referência
implícita ou explícita para outro documento que será exibido no frame. Este
“documento filho” será exibido independentemente da existência de outras
frames na janela do browser. O “documento filho” pode ser um documento
de conteúdo ou mesmo outro documento de layout encadeado.
Rev00 17/07/12
61 | P á g i n a
Documentos de Conteúdo:
São arquivos “HTML” convencionais. Um documento de conteúdo
pode ser visto em um frame (de um documento de layout) ou
independente na janela do browser.
24.1 ATRIBUTOS HTML PARA FRAMES
<frameset> ... </frameset> definem a divisão da janela em
duas ou mais linhas ou em duas ou mais colunas. Pode haver
várias tags <frameset> encadeadas, fazendo-se desta maneira,
subdivisões da página.
Exemplo:
<frameset scrolling=“yes” cols=“30%,70%”>
<frame src=“pagina1.htm”>
<frameset scrolling=“yes” rows=“20%,80%”>
<frame src=“pagina2.htm”>
<frame src=“pagina3.htm”>
</frameset>
</frameset>
Observação.: 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 divisão 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: <frameset cols=“25%,75%”>
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: <frameset rows =“50%,50%”>
FRAMEBORDER: O atributo frameborder indica se será exibida ou
não uma borda 3D para as frames. O parâmetro pode assumir os valores
“1” (default, indica a exibição da borda) ou “0” para não exibir a borda.
Exemplo: <frameset cols =“25%,75%” frameborder=“1”>
FRAMESPACING: O atributo framespacing cria um espaço
adicional em pixels entre as frames.
Exemplo: <frameset cols =“25%,75%” framespacing=“10”>
Observação.: 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 definição de frames através de percentuais é interessante, pois a
diagramação da janela é preservada não importando a resolução em que
se estiver visualizando a página.
Rev00 17/07/12
63 | P á g i n a
<FRAME> Define as páginas que serão carregadas nas divisões
determinadas nas FRAMESET’s.
SRC: O atributo src define o conteúdo de cada frame do
documento, onde o parâmetro src associa uma URL ao frame.
Exemplo: <frame src=“pagina1.html”>
SCROLLING: O atributo scrolling define a presença, ausência ou
atribuição automática pelo browser das barras de rolagem sendo
respectivamente: “YES”, “NO” ou “AUTO”.
Exemplo: <frame src=“pagina1.html” scrolling=“no”>
NORESIZE: O atributo noresize impede que o usuário altere o
tamanho da frame.
Exemplo: <frame src=“pagina1.html” noresize>
NAME: O atributo name associa um nome à janela.
Exemplo: <frame src=“pagina1.html” name=“cursos”>
NOFRAME: A marcação <NOFRAME> permite a criação de uma
opção de navegação para browsers mais antigos, que não interpretam
frames, pois ignoram toda a área de influência de <noframe> sendo
assim, páginas com frames podem conter mensagens que somente serão
lidas pelos browsers mais antigos, provavelmente avisando aos usuários
que não conseguiram visualizar, que adquiram uma versão mais atualizada
ou que sigam um determinado link para página escrita sem uso de frames.
Rev00 17/07/12
64 | P á g i n a
Exemplo:
<noframe>
<body>
<p>Esta página usa FRAME e seu browser não os
suporta</p>
</body>
</noframe>
24.2 EXERCÍCIO 17
1- Abrir um arquivo novo e digitar os comandos abaixo, para criar
o primeiro arquivo para construção do frame.
<html>
<head>
<title> </title>
</head>
<body bgcolor=“blue”>
<br><br><br>
<p align=“middle”><b>AZUL</b></p>
</body>
</html>
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 construção do frame.
Rev00 17/07/12
65 | P á g i n a
<html>
<head>
<title> </title>
</head>
<body bgcolor=“green”>
<br><br>
<p align=“middle”><b>Verde</b></p>
</body>
</html>
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 construção do frame.
<html>
<head>
<title> </title>
</head>
<body bgcolor=“red”>
<br><br><br>
<p align=“middle”><b>Vermelho</b></p>
</body>
</html>
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.
<html>
<head>
<title> Página de Frames </title>
</head>
<frameset cols=“25%,75%”>
<frame src=“verde.html” noresize>
<frameset rows=“20%,80%”>
<frame src=“vermelho.html” noresize>
<frame src=“azul.html” noresize>
</frameset>
</frameset>
<body>
</body>
</html>
Salvar o arquivo no formato texto, com o nome frame.html e
executar a página no navegador.
24.3 LINKS EM FRAME ALVO
Quando o usuário pressiona um link qualquer em uma frame, o link
pode utilizar sua própria frame para carregar o documento contido em sua
URL ou utilizar outra frame. Para que seja possível a atualização de outras
frames foi introduzido o atributo “TARGET” na tag <A>.
Rev00 17/07/12
67 | P á g i n a
Exemplo:
<html>
<head>
<title>Telecentros</title>
</head>
<body>
<a href=“teste.html” target=“pagina1”>Clicando
neste link o arquivo “teste.html” será aberto na frame
“página1”</a>
</body>
</html>
25 IFRAME – INLINE FRAME
A IFRAME é utilizada para inserir um documento ou site dentro de
uma janela configurável dentro de uma página html. A desvantagem
principal desse recurso, embora dê um visual atrativo para as páginas, é
ter que criar vários clones de uma página e alterar o endereço especificado
da tag <iframe> de cada uma. A tag <iframe> não é dinâmica e sim
estática, ou seja, cada tag desta página deve ter um endereço próprio.
Exemplo:
<iframe src=“pagina1.html” name=“pagina1” width=“100”
height=“50” scrolling=“no”>
</iframe>
Rev00 17/07/12
68 | P á g i n a
25.1 EXERCÍCIO 18
1- Abrir um arquivo novo e digitar os comandos abaixo, para criar
o primeiro arquivo para construção do frame.
<html>
<head>
<title> </title>
</head>
<body bgcolor=“#708090”>
<br><br><br>
<p align=“center”><b><blink> <font size=“10”
color=“red”> TESTE </font>
</blink></b></p>
</body>
</html>
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.
<html>
<head>
<title> Página contendo IFRAME </title>
</head>
<body>
<h1>Esta página tem um iframe</h1>
Rev00 17/07/12
69 | P á g i n a
<center>
<iframe width=“50%” height=“50%” src=“teste.html”
name=“teste”>
</iframe>
</center>
</body>
</html>
Salvar o arquivo no formato texto, com o nome exercicio18.html e
executar a página no navegador.
Rev00 17/07/12
70 | P á g i n a
26 PLANO DE AULA
1ª aula
- Páginas Web
- Home Page
- O que são 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 é necessário para trabalhar com HTML?
- Sintaxe dos comandos HTML
- Como Exibir o Código HTML de uma Página da Internet
- Estrutura Básica do HTML
- Elementos Básicos do HTML
- Títulos e Subtítulos
- Exercício 01
- Acentuação
- Exercício 02
2ª aula
- Inserindo comentários
Rev00 17/07/12
71 | P á g i n a
- Formatação de Textos
- Marcação FONT
- Exercício 03
- Os principais Comandos de Estilo de Texto são:
- Movimentando o texto – Marquee
- Exercício 04
- Formatação de Parágrafos
- Exercício 05
- Linhas Horizontais
- Exercício 06
3ª aula
- Imagens
- Principais Diferenças entre as Imagens GIF e JPEG
- Qual Formato Escolher?
- Exercício 07
- Definir uma Imagem no Plano de fundo
- Exercício 08
- Hyperlinks
- Definir um Link Externo
- Exercício 09
- Definindo um Link Interno
- Exercício 10
- Definir um Link de Correio Eletrônico “Mailto’’
Rev00 17/07/12
72 | P á g i n a
- Acrescentar no Exercício 10
- Definir um Link para Outro Site
- Acrescentar no Exercício 10
- Definir uma Imagem como Link
4ª aula
- Listas
- Listas Ordenadas
- Exercício 11
- Listas Não Ordenadas
- Exercício 12
- Lista de Definição
- Exercício 13
5ª aula
- Tabelas
- Atributos de uma Tabela
- Exercício 14
- Atributos da marcação <TABLE>
- Acrescentar no Exercício 14 a linha abaixo:
- Atributos da marcação<TR>
- Atributos das marcações <TD> e <TH>
- Exercício 15
Rev00 17/07/12
73 | P á g i n a
6ª aula
- Formulários
- Atributos da marcação <FORM>
- Exercício 16
7ª aula
- Frames
- Atributos HTML para frames
- Exercício 17
- Links em Frame alvo
- Iframe – Inline Frame
- Exercício 18
8ª aula
- Projeto final: Desenvolvimento do tema (escolhido pela turma)
para elaboração do projeto.
- Início da Elaboração do projeto
9ª aula
- Elaboração do projeto
10ª aula
- Conclusão 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 distribuída parcial ou
integralmente desde que citada a fonte.
Venda Proibida.
Realização: Secretaria Municipal de Participação e Parceria do
Município de São Paulo
CID – Coordenadoria de Inclusão Digital
IDORT - Instituto de Organização Racional do Trabalho
Gestor Responsável: Roberta Taconi Ferraz
Pedagogo Responsável: Mariana Garcia Anunciato
Redação: Equipe de Capacitação – Área técnica
Audre Eller
Douglas Diniz Alves
Nanci Furtado
Paulo Jordão da Silva Boccatto
Fale conosco: [email protected]
(011) 3277-2408
![Expo gifs animados[1]](https://cdn.vdocuments.net/doc/165x107/557b406bd8b42a16488b5541/expo-gifs-animados1.jpg)
