PRONATEC - PROGRAMA NACIONAL DE ACESSO AO

ENSINO TCNICO E EMPREGO

CURSO:

PROGRAMADOR WEB

DISCIPLINA:

CONSTRUO DE SITES WEB

INTRODUO WEB

Histria da Internet

A internet surgiu a partir de pesquisas militares nos perodos ureos da Guerra

Fria. Na dcada de 1960, quando dois blocos ideolgicos e politicamente antagnicos
exerciam enorme controle e influncia no mundo, qualquer mecanismo, qualquer
inovao, qualquer ferramenta nova poderia contribuir nessa disputa liderada pela
Unio Sovitica e pelos Estados Unidos: as duas superpotncias compreendiam a
eficcia e necessidade absoluta dos meios de comunicao. Nessa perspectiva, o
governo dos Estados Unidos temia um ataque russo s bases militares. Um ataque
poderia trazer a pblico informaes sigilosas, tornando os EUA vulnerveis. Ento foi
idealizado um modelo de troca e compartilhamento de informaes que permitisse a
descentralizao das mesmas. Assim, se o Pentgono fosse atingido, as informaes
armazenadas ali no estariam perdidas. Era preciso, portanto, criar uma rede, a
ARPANET, criada pela ARPA, sigla para Advanced Research Projects Agency.

A ARPANET funcionava atravs de um sistema conhecido como chaveamento

de pacotes, que um sistema de transmisso de dados em rede de computadores no
qual as informaes so divididas em pequenos pacotes, que por sua vez contm
trecho dos dados, o endereo do destinatrio e informaes que permitiam a
remontagem da mensagem original. O ataque inimigo nunca aconteceu, mas o que o
Departamento de Defesa dos Estados Unidos no sabia era que dava incio ao maior
fenmeno miditico do sculo 20, nico meio de comunicao que em apenas 4 anos
conseguiria atingir cerca de 50 milhes de pessoas.

Em 29 de Outubro de 1969 ocorreu a transmisso do que pode ser considerado

o primeiro E-mail da histria. O texto desse primeiro e-mail seria "LOGIN", conforme
desejava o Professor Leonard Kleinrock da Universidade da Califrnia em Los Angeles
(UCLA), mas o computador no Stanford Research Institute, que recebia a mensagem,
parou de funcionar aps receber a letra "O".

J na dcada de 1970, a tenso entre URSS e EUA diminui. As duas potncias

entram definitivamente naquilo em que a histria se encarregou de chamar de
Coexistncia Pacfica. No havendo mais a iminncia de um ataque imediato, o
governo dos EUA permitiu que pesquisadores que desenvolvessem, nas suas
respectivas universidades, estudos na rea de defesa pudessem tambm entrar na
ARPANET. Com isso, a ARPANET comeou a ter dificuldades em administrar todo este
sistema, devido ao grande e crescente nmero de localidades universitrias contidas nela.

Dividiu-se ento este sistema em dois grupos, a MILNET, que possua as

localidades militares e a nova ARPANET, que possua as localidades no militares. O
desenvolvimento da rede, nesse ambiente mais livre, pde ento acontecer. No s os
pesquisadores como tambm os alunos e os amigos dos alunos, tiveram acesso aos
estudos j empreendidos e somaram esforos para aperfeio-los. Houve uma poca nos
Estados Unidos em que sequer se cogitava a possibilidade de comprar computadores
prontos, j que a diverso estava em mont-los.

A mesma lgica se deu com a Internet. Jovens da contracultura, ideologicamente

engajados em uma utopia de difuso da informao, contriburam decisivamente para a
formao da Internet como hoje conhecida.

Um sistema tcnico denominado Protocolo de Internet (Internet Protocol) permitia

que o trfego de informaes fosse encaminhado de uma rede para outra. Todas as redes
conectadas pelo endereo IP na Internet comunicam-se para que todas possam trocar
mensagens. Atravs da National Science Foundation, o governo norte-americano investiu
na criao de backbones (que significa espinha dorsal, em portugus), que so poderosos
computadores conectados por linhas que tem a capacidade de dar vazo a grandes fluxos
de dados, como canais de fibra ptica, elos de satlite e elos de transmisso por rdio.
Alm desses backbones, existem os criados por empresas particulares. A elas so
conectadas redes menores, de forma mais ou menos anrquica. basicamente isto que
consiste a Internet, que no tem um dono especfico.

Internet no Brasil

No Brasil, os primeiros embries de rede surgiram em 1988 e ligavam

universidades do Brasil a instituies nos Estados Unidos. No mesmo ano, o Ibase
comeou a testar o Alternex, o primeiro servio brasileiro de Internet no-acadmica e
no-governamental. Inicialmente o AlterNex era restrito aos membros do Ibase e
associados e s em 1992 foi aberto ao pblico.

Em 1989, o Ministrio da Cincia e Tecnologia lana um projeto pioneiro, a Rede

Nacional de Ensino e Pesquisa (RNP). Existente ainda hoje, a RNP uma organizao de
interesse pblico cuja principal misso operar uma rede acadmica de alcance nacional.

3
Quando foi lanada, a organizao tinha o objetivo de capacitar recursos humanos de alta
tecnologia e difundir a tecnologia Internet atravs da implantao do primeiro backbone
nacional.

O backbone funciona como uma espinha dorsal, a infra-estrutura que conecta

todos os pontos de uma rede. O primeiro backbone brasileiro foi inaugurado em 1991,
destinado exclusivamente comunidade acadmica. Mais tarde, em 1995, o governo
resolveu abrir o backbone e fornecer conectividade a provedores de acesso comerciais. A
partir dessa deciso, surgiu uma discusso sobre o papel da RNP como uma rede
estritamente acadmica com acesso livre para acadmicos e taxada para todos os outros
consumidores. Com o crescimento da Internet comercial, a RNP voltou novamente a
ateno para a comunidade cientfica.

A partir de 1997, iniciou-se uma nova fase na Internet brasileira. O aumento de

acessos a rede e a necessidade de uma infra-estrutura mais veloz e segura levou a
investimentos em novas tecnologias. Entretanto, devido a carncia de uma infra-estrutura
de fibra ptica que cobrisse todo o territrio nacional, primeiramente, optou-se pela
criao de redes locais de alta velocidade, aproveitando a estrutura de algumas regies
metropolitanas. Como parte desses investimentos, em 2000, foi implantado o backbone
RNP2 com o objetivo de interligar todo o pas em uma rede de alta tecnologia.
Atualmente, o RNP2 conecta os 27 estados brasileiros e interliga mais de 300 instituies
de ensino superior e de pesquisa no pas, como o INMETRO e suas sedes regionais.

Outro avano alcanado pela RNP ocorreu em 2002. Nesse ano, o ento
presidente da repblica transformou a RNP em uma organizao social. Com isso ela
passa a ter maior autonomia administrativa para executar as tarefas e o poder pblico
ganha meios de controle mais eficazes para avaliar e cobrar os resultados. Como
objetivos dessa transformao esto o fornecimento de servios de infra-estrutura de
redes IP avanadas, a implantao e a avaliao de novas tecnologias de rede, a
disseminao dessas tecnologias e a capacitao de recursos humanos na rea de
segurana de redes, gerncia e roteamento.

A partir de 2005, a comunicao entre os point of presence (PoPs) da rede

comeou a ser ampliada com o uso de tecnologia ptica, o que elevou a capacidade de
operao a 11 Gbps.

4
A ESTRUTURAO DE PGINAS WEB
Uma pgina da web (webpage) uma fonte de informaes que adequada
World Wide Web e que pode ser acessada por um navegador web. Isso quer dizer que
ela um documento que feito de modo atender requisitos da rede mundial de
computadores e capaz de ser visualizada a partir de um programa especfico para esse
fim.

As pginas web esto localizadas ou em um computador local ou remoto e

disponibilizadas atravs de um servidor web. O acesso a elas pode ser restringido
redes locais, apenas ao prprio computador ou ainda ser publicada na Internet. A
requisio e o acesso a elas feita por meio de um protocolo chamado HTTP
(Hypertext Transfer Protocol, ou Protocolo de transferncia de hipertexto).

Originalmente, as pginas web eram arquivos estticos de texto guardados

dentro de servidores web. Atualmente, entretanto, comum encontrarmos servidores
que geram dinamicamente os arquivos (x)HTML de acordo com a requisio do
navegador. Existem ainda maneiras de obtermos comportamento dinmico pelo lado
do cliente (navegador) por meio de implementaes de Ajax e JavaScript, por exemplo.

As webpages utilizam HTML (Hypertext Markup Language) para fazer a

formatao dos dados. importante notar que HTML no uma linguagem de
programao, mas sim de marcao.

Para melhorar a aparncia das webpages possvel usar cdigo CSS

(Cascading Style Sheet) que pode ser escrito em um arquivo em separado ou dentro
do prprio HTML. O uso de CSS torna-se mais eficiente j que aproveita-se melhor da
maneira como o HTTP trabalha, com o navegador baixando uma nica vez as
informaes e guardando-as em cache.

As imagens so armazenadas tambm como arquivos separados em servidores

web. O navegador faz o trabalho de baixar todas as imagens enquanto a pgina
processada, mantendo a conexo com o servidor at que todas as informaes sejam
baixadas e fornecidas. A grande maioria deles renderiza as imagens juntamente com
os textos e outros materiais na pgina a ser exibida.
Elementos de uma pgina Web

Como j foi mencionado, o HTML uma linguagem de marcao. E esta marcao

realizada atravs de rtulos (tags), onde cada tag possui uma funo. Estas tags so
definidas entre os sinais < (menor que) e > (maior que), e quase sempre so
empregadas em duplas, de modo que a primeira inicia a marcao e a segunda,
identificada por uma / (barra) antes do nome. As tags devem ser empregadas seguindo
uma estrutura hierrquica rgida, ou seja, devem ficar totalmente aninhadas dentro da
sua tag imediatamente superior.

O seguinte cdigo ilustra um exemplo de utilizao de tags.

1 <html>
2 <head>
3 <title>Esta minha primeira pgina</title>
4 </head>
5 <body>
6 <p>E estas so minhas primeiras impresses de HTML</p>
7 </body>
8 </html>

O cdigo acima refere-se pgina web da figura abaixo.

6
Elementos bsicos

<html></html> Inicia/termina um documento em HTML.

Define a rea de cabealho, com elementos no
<head></head>
visualizveis na pgina.
<body></body> Define a rea visvel do documento.
<title></title> Coloca o nome da pgina na barra de ttulo da janela.

Formatao bsica de texto

<h1></h1> Cria cabealhos de nvel 1 (maior).

<h2></h2> Cria cabealhos de nvel 2.
<h3></h3> Cria cabealhos de nvel 3.
<h4></h4> Cria cabealhos de nvel 4 (normal).
<h5></h5> Cria cabealhos de nvel 5.
<h6></h6> Cria cabealhos de nvel 6 (menor).
<p></p> Inicia/termina um pargrafo.
<br /> Insere uma quebra de linha.
<hr /> Insere uma linha horizontal.

Exemplo:

1 <html>
2 <head>
3 <title>Exemplos de texto com cabealho, pargrafos e
quebras de linha</title>
4 </head>
5 <body>
6 <h1>Esse um cabealho muito grande</h1>
7 <h2>Esse um cabealho um pouco menor, mas bem grande
ainda</h2>
8 <h3>Esse um cabealho nem to grande assim</h3>
9 <h4>Esse um cabealho mdio</h4>
10 <h5>Esse um cabealho pequeno</h5>
11 <h6>Esse um cabealho muito pequeno</h6>
12 <hr />
13 <p>Agora faremos um pargrafo. A tag < hr / > no cdigo
serve para inserir uma linha horizontal, voc pode v-la acima.</p>
14 <p>Note que ao criarmos outro, temos uma linha branca
adicionada entre eles</p>
15 Agora o texto est sendo escrito diretamente no corpo do
documento, sem nenhuma formatao. <br />
16 Use a tag vazia < br / > para quebrar linhas (saltar
linhas) seno o seu texto vai ficar bem estranho.
17 </body>
18 </html>

7
Elementos de apresentao

<b></b> Marca um contedo para ser exibido em negrito.

<i></i> Marca um contedo para ser exibido em itlico.
<u></u> Marca um contedo para ser exibido sublinhado
Exemplo:

1 <html>
2 <head>
3 <title>Exemplos de apresentao de texto</title>
4 </head>
5 <body>
6 Esse um texto normal<br />
7 <b>Esse um texto em negrito</b><br />
8 <i>Esse um texto em itlico</i><br />
9 <u>Esse um texto sublinhado</u><br />
10 <b><i><u>Esse um texto em negrito, itlico e
sublinhado</b></i></u><br />
11 </body>
12 </html>

8
Exerccio

Com base no que vimos at agora, crie uma pgina web com um texto sobre
voc. Procure utilizar o maior nmero de recursos de HTML que voc j conhece. No
esquea de salvar o arquivo com o nome exercicio1.html

Cores

Em algumas tags voc podemos adicionar informaes extras para a formatao

da pgina web. Isto feito atravs dos atributos. Um dos atributos que podemos utilizar
relativo s cores.

Exemplo:

1 <html>
2 <head>
3 <title>PRONATEC Programador Web</title>
4 </head>
5 <body bgcolor="red">
6 <p>Esta uma pgina com o fundo em vermelho.</p>

9
 7 </body>
8 </html>

No exemplo acima alteramos a cor do fundo da pgina. Tambm podemos alterar a

cor do texto com o uso de atributos.

Exemplo:

1 <html>
2 <head>
3 <title>PRONATEC Programador Web</title>
4 </head>
5 <body bgcolor="black" text="white">
6 <p>Esta uma pgina com o fundo em preto e o texto
branco.</p>
7 </body>
8 </html>

10
 Algumas cores podem ser referenciadas pelo seu prprio nome em ingls, para
outras precisamos informar seu cdigo em Hexadecimal.

Cores que podem ser referenciadas pelo nome

White Branco
Gray Cinza
Silver Prata
Black Preto
Red Vermelho
Orange Laranja
Ochre Ocre
Brown Marrom
Yellow Amarelo
Gold Ouro / Dourado
Lime Verde Limo
Green Verde
Blue Azul
Purple Roxo

11
 Violet Violeta
Magenta Vinho
Pink Rosa

Cdigo de cores em Hexadecimal

A linguagem HTML utiliza uma notao Hexadecimal para uma combinao de
valores de vermelho (Red), verde (Green) e azul (Blue) RGB. Um cdigo hexadecimal
para cores formado por um sinal # seguido de seis dgitos e/ou letras, sendo os dois
primeiros representam a poro de vermelho, os dois do meio a poro em azul e os dois
ltimos a poro de verde que queremos adicionar a composio da cor.

No link http://www.w3schools.com/html/html_colors.asp vo pode descobrir o

cdigo de diversas combinaes de cores em Hexadecimal.

Preto #000000
Vermelho #FF0000
Verde 00FF00
Azul #0000FF
Amarelo #FFFF00
Ciano #00FFFF
Magenta #FF00FF
Cinza #CCCCCC
Branco #FFFFFF

Imagens

As imagens so elementos extremamente comuns nas pginas web. Atualmente

difcil navegarmos na Internet e entrarmos em uma pgina que no tenha pelo menos
uma imagem.

importante notar que as imagens podem ter diversas aplicaes nas pginas
web, possvel us-las como decorao para uma pgina, como plano de fundo, como
explicao para alguma coisa (como usada nos livros), como ligao para outras pginas
(hyperlinks). O resultado traz pginas muito bonitas, mas que algumas vezes ficam bem
pesadas para um computador lento ou uma internet de velocidade mais baixa. Cabe a
voc fazer o julgamento de equilibrar o documento e trazer uma experincia agradvel ao

12
usurio, tanto no ponto de vista de qualidade visual quanto em performance.

O navegador interpreta as imagens atravs da leitura da tag <img>, que possui

diversos atributos incluindo a localizao da imagem no disco ou na Internet.

Exemplo:

1 <html>
2 <head>
3 <title>PRONATEC Programador Web</title>
4 </head>
5 <body>
6 <p>Esta uma pgina com uma figura.</p>
7 <img src="exemplo.jpg">
8 </body>
9 </html>

Exemplo:

1 <html>
2 <head>
3 <title>PRONATEC Programador Web</title>
4 </head>
5 <body>
6 <p>Esta uma pgina com uma figura da Internet.</p>

13
 7 <img src="http://www.meridiano.com.br/blog/wp-content/uplo
ads/2011/04/cafe-mundo.jpg">
8 </body>
9 </html>

Abaixo alguns atributos que a tag <img> aceita.

Atributo Valores Descrio

align top Alinhamento da imagem na pgina
bottom
middle
left
right
alt text Texto alternativo para a imagem
border Tamanho em pixels Borda ao redor da imagem
height Tamanho em pixels ou Altura da imagem
%
src URL Caminho da imagem
width Tamanho em pixels ou Largura da imagem
%

Exerccio

14
 Crie uma nova pgina web utilizando os recursos vistos at agora (formatao de
texto, pargrafos, cores, imagens). Utilize um texto qualquer sua escolha. No esquea
de salvar o arquivo com o nome exercicio2.html

Lista

Existem trs tipos de listas em HTML, listas no ordenadas <ul>, listas ordenadas
<ol> e listas de definies <dl>. Uma lista no ordenada simplesmente coloca um
marcador antes de cada um de seus elementos enquanto a lista ordenada numera-os.
Alm delas temos a lista de definies, que se difere por no ser uma lista de itens, mas
sim uma lista de termos e definies.

O exemplo a seguir cria uma lista no ordenada de itens:

1 <html>
2 <head>
3 <title>PRONATEC Programador Web</title>
4 </head>
5 <body>
6 <p>Lista no ordenada</p>
7 <h3>Frutas</h3>
8 <ul>
9 <li>Ma</li>
10 <li>Morango</li>
11 <li>Laranja</li>
12 <li>Limo</li>
13 <li>Abacaxi</li>
14 </ul>
15 </body>
16 </html>

15
O exemplo a seguir cria uma lista ordenada de itens:

1 <html>
2 <head>
3 <title>PRONATEC Programador Web</title>
4 </head>
5 <body>
6 <p>Lista ordenada</p>
7 <h3>Ranking da FIFA</h3>
8 <ol>
9 <li>Espanha</li>
10 <li>Alemanha</li>
11 <li>Colmbia</li>
12 <li>Argentina</li>
13 <li>Holanda</li>
14 </ol>
15 </body>
16 </html>

16
O exemplo a seguir cria uma lista de definies:

1 <html>
2 <head>
3 <title>PRONATEC Programador Web</title>
4 </head>
5 <body>
6 <p>Lista de definies</p>
7 <h3>Bebidas</h3>
8 <dl>
9 <dt>Caf</dt>
10 <dd>Bebida quente e preta</dd>
11 <dt>Vinho</dt>
12 <dd>Bebida feita a base de uva</dd>
13 </dl>
14 </body>
15 </html>

17
Exerccio

Crie uma nova pgina web utilizando listas ordenadas, com o nome dos membros
de sua famlia e uma lista no ordenada. No esquea de salvar o arquivo com o nome
exercicio3.html

Tabelas

As tabelas servem para organizar os dados de uma maneira que fique mais fcil o
entendimento ou tornar mais rpida a comunicao em determinadas ocasies.

A tag <table> serve para criar a tabela, que por sua vez vai ser composta de linhas
<tr> e cada linha vai possuir clulas <td>. Alm destas tags, a tag <th> usada para o
cabealho da tabela.

O cdigo a seguir apresenta um exemplo de utilizao de tabela:

1 <html>
2 <head>

18
 3 <title>PRONATEC Programador Web</title>
4 </head>
5 <body>
6 <h3>Exemplo de tabela</h3>
7 <table border="1">
8 <tr>
9 <th>Aluno</th>
10 <th>1 Bimestre</th>
11 <th>2 Bimestre</th>
12 <th>3 Bimestre</th>
13 <th>4 Bimestre</th>
14 <th>Mdia Final</th>
15 </tr>
16 <tr>
17 <td>Ana</td>
18 <td align="right">7,8</td>
19 <td align="right">8,5</td>
20 <td align="right">7,5</td>
21 <td align="right">9,0</td>
22 <td align="right"><b>8,2</b></td>
23 </tr>
24 <tr>
25 <td>Gabriela</td>
26 <td align="right">8,5</td>
27 <td align="right">8,7</td>
28 <td align="right">9,5</td>
29 <td align="right">8,0</td>
30 <td align="right"><b>8,7</b></td>
31 </tr>
32 </table>
33 </body>
34 </html>

19
Abaixo alguns atributos que a tag <table> aceita.

Atributo Valores Descrio

align left Alinhamento do texto da tabela
center
right
bgcolor Cdigo de cor Cor de fundo da tabela
border Tamanho em pixel Espessura da borda
width Tamanho em pixel ou % Largura da tabela

Abaixo alguns atributos que a tag <tr> aceita.

Atributo Valores Descrio

align left Alinhamento horizontal do texto da
center linha
right
justify
bgcolor Cdigo de cor Cor de fundo da tabela
valign top Alinhamento vertical do texto da
middle linha

20
 bottom
baseline

Abaixo alguns atributos que a tag <tr> aceita.

Atributo Valores Descrio

align left Alinhamento horizontal do texto da
center linha
right
justify
bgcolor Cdigo de cor Cor de fundo da tabela
colspan Nmero de colunas Nmero de colunas que a clula
deve abranger
rowspan Nmero de linhas Nmero de linhas que a clula
deve abranger
valign top Alinhamento vertical do texto da
middle linha
bottom
baseline
width Tamanho em pixel ou % Largura da clula

O cdigo a seguir apresenta um exemplo de utilizao de tabela com outros atributos:

1 <html>
2 <head>
3 <title>PRONATEC Programador Web</title>
4 </head>
5 <body>
6 <h3>Exemplo de tabela</h3>
7 <table border="1">
8 <tr>
9 <td colspan="2">Clula expandida</td>
10 <td>Clula normal</td>
11 <td rowspan="2">Linha expandida</td>
12 </tr>
13 <tr>
14 <td>Clula normal</td>
15 <td>Clula normal</td>
16 <td>Clula normal</td>
17 </tr>
18 </table>
19 </body>
20 </html>

21
Exerccio

Crie uma nova pgina web utilizando uma tabela para organizar os dados de
vendas, conforme o exemplo abaixo. No esquea de salvar o arquivo com o nome
exercicio4.html

Setor Janeiro Fevereiro Maro Total

Bazar 12.500 8.400 9.850 30.750
Bebidas 8.000 9.500 7.200 24.700
Fruteira 3.500 4.000 8.200 15.700
Total das vendas 71.150

22
NAVEGAO ENTRE PGINAS
Um outro recurso amplamente utilizado em HTML o hyperlink. Ele serve para
ligar uma pgina a outra na Web. Basicamente, o hyperlink composto pelo endereo
de outra pgina e, ao ser clicado, leva ao endereo referenciado.

Existem duas maneiras de usar hyperlinks nas pginas web, com textos ou com
imagens.

O texto aparecer sublinhado e o cursor do mouse ficar diferente ao passar por

cima deste texto. As imagens tero o mesmo efeito de mudana de cursor.

Para criar um hyperlink utiliza-se a tag <a> passando no atributo href o

endereo da pgina ao qual se quer fazer a ligao.

O contedo entre a tag de abertura <a> e a de fechamento </a> ser o texto que
dever ser clicado para que o navegador redirecione ou at mesmo uma figura.
Recomenda-se usar algum contedo intuitivo.

Pode-se utilizar os hyperlinks para a navegao entre as pginas de uma

mesmo site ou at mesmo para determinados pontos dentro de uma pgina.

O cdigo a seguir apresenta um exemplo de utilizao de hyperlink com texto:

1 <html>
2 <head>
3 <title>PRONATEC Programador Web</title>
4 </head>
5 <body>
6 <h3>Exemplo de hyperlink</h3>
7 <a href="http://www.google.com">Clique aqui</a>
8 </body>
9 </html>
O cdigo a seguir apresenta um exemplo de utilizao de hyperlink com imagem:

1 <html>
2 <head>
3 <title>PRONATEC Programador Web</title>
4 </head>
5 <body>
6 <h3>Exemplo de hyperlink</h3>
7 <a href="http://www.google.com"><img src="imagem.jpg"</a>
8 </body>
9 </html>

24
Exerccio

Crie uma nova pgina web utilizando hyperlinks. No esquea de salvar o arquivo
com o nome exercicio5.html

25
FORMULRIOS
Para trazermos um pouco mais de interatividade para as nossas pginas,
podemos utilizar os elementos de formulrio. Esses elementos recebem algum tipo de
entrada do usurio, seja atravs de um clique ou digitando algum valor.

Tag <form>

Todo formulrio em uma pgina web comea com a tag <form> e termina com a
tag </form>. A tag de entrada, assim como vrias outras tags, tambs aceita alguns
atributos.

Abaixo alguns atributos que a tag <table> aceita.

Atributo Valores Descrio

action URL Destino para envio dos dados
method get Mtodo HTTP para envio dos
post dados

Tag <input>

A tag <input> permite inserir uma srie de elementos de entrada de dados que
podem assumir diversas formas dependendo do seu atributo type. O atributo type
pode receber os seguintes valores:

text - cria uma caixa de texto de uma linha. O atributo maxlength define o
nmero mximo de caracteres que o campo aceita e o atributo size define o
tamano do campo.

password - cria uma caixa de texto de uma linha escondendo os caracteres

digitados. O atributo maxlength define o nmero mximo de caracteres que o
campo aceita e o atributo size define o tamano do campo.

checkbox - cria uma caixa que assume dois estados: marcado ou desmarcado.

radio - cria uma caixa que assume dois estados: marcado ou desmarcado. Em
conjunto com o atributo name possvel que se crie um grupo de radios no qual
apenas um radio seja marcado.

button - cria um boto. Atravs do atributo value definimos o texto do boto.

 submit - cria um boto para o envio do formulrio. Atravs do atributo value
definimos o texto do boto.

reset - cria um boto que descarta todas as alteraes feitas dentro de um

formulrio. Atravs do atributo value definimos o texto do boto.

hidden - cria um elemento que no fica visvel para o usurio, porm pode conter
um valor que ser enviado pelo formulrio.

O cdigo a seguir apresenta um exemplo de formulrio para login:

1 <html>
2 <head>
3 <title>PRONATEC Programador Web</title>
4 </head>
5 <body>
6 <h3>Exemplo de formulrio</h3>
7 <form>
8 Login <input type="text" name="login"> <br />
9 Senha <input type="password" name="senha"> <br />
10 <input type="submit" value="Enviar">
11 <input type="reset" value="Limpar"> <br />
12 </form>
13 </body>
14 </html>

27
O cdigo a seguir apresenta outros exemplo de elementos de um formulrio:

1 <html>
2 <head>
3 <title>PRONATEC Programador Web</title>
4 </head>
5 <body>
6 <h3>Exemplo de formulrio</h3>
7 <form>
8 <p>Checkbox</p>
9 Opo 1 <input type="checkbox" name="opcao1"> <br />
10 Opo 2 <input type="checkbox" name="opcao2"> <br />
11 Opo 3 <input type="checkbox" name="opcao3"> <br />
12 <p>Radio</p>
13 Opo 1 <input type="radio" name="opcao" checked>
<br />
14 Opo 2 <input type="radio" name="opcao"> <br />
15 Opo 3 <input type="radio" name="opcao"> <br />
16 <p>Button</p>
17 <input type="button" value="Boto"> <br />
18 <p>Hidden</p>
19 <input type="hidden" name="oculto" value="123">
20 </form>
21 </body>
22 </html>

28
Tag <select>

A tag <select> permite ao usurio escolher um item em uma lista. A lista de itens
deve ser informada atravs de elementos <option>. Tais elementos devem ser filhos
diretos ou indiretos de elementos <select>. Alm disso, cada item pode conter o atributo
chamado value para informar o valor associado a uma determinada opo.

O cdigo a seguir apresenta um exemplo de select em um formulrio:

1 <html>
2 <head>
3 <title>PRONATEC Programador Web</title>
4 </head>
5 <body>
6 <h3>Exemplo de formulrio</h3>
7 <form>
8 <p>Checkbox</p>
9 <p>Selecione um estado
10 <select>
11 <option value="RS">Rio Grande do Sul</option>
12 <option value="SC">Santa Catarina</option>
13 <option value="SP">So Paulo</option>
14 </select>
15 </form>
16 </body>

29
 17 </html>

O atributo action da tag <form> indica o destino para onde os dados do formulrio
sero enviados. O atributo method indica o mtodo de envio.

O cdigo a seguir apresenta um exemplo de envio de um formulrio:

1 <html>
2 <head>
3 <title>PRONATEC Programador Web</title>
4 </head>
5 <body>
6 <h3>Exemplo de formulrio</h3>
7 <form action="recebe_formulario.html" method="GET">
8 Nome <input type="text" name="nome"> <br />
9 <input type="submit" value="Enviar">
10 <input type="reset" value="Limpar"> <br />
11 </form>
12 </body>
13 </html>

30
Exerccio

Crie uma nova pgina web utilizando um formulrio para o cadastro de pessoas
onde deve solicitar os seguintes dados: nome, e-mail, telefone, data de nascimento, cpf,
estado civil (poder escolher entre: solteiro, casado e outro) e um campo onde o usurio
possa selecionar se quer receber e-mail ou no (use um checkbox para isso). No
esquea de salvar o arquivo com o nome exercicio6.html

31
UTILIZAO DE ESTILOS
CSS a sigla em ingls para Cascading Style Sheet que em portugus foi
traduzido para folha de estilo em cascata e definida como um mecanismo simples
para adicionar estilos (p.ex., fontes, cores, espaamentos) s pginas web.

A grande vantagem do uso de CSS a de separar a marcao HTML, da

apresentao do site. Em outras palavras, vale dizer que o HTML destina-se
unicamente a estruturar e marcar o contedo, ficando por conta das CSS toda a
responsabilidade pelo visual do documento.

HTML marca e estrutura textos, cabealhos, pargrafos, links, botes,

formulrios, imagens e demais elementos da pgina e CSS define cores,
posicionamento na tela, estilos de linhas, bordas e tudo o mais relacionado
apresentao.

A adoo desta tcnica resulta em mltiplas vantagens e benefcios que no so

conseguidos quando se utiliza o conceito largamente empregado para construo de
web sites, baseado no uso de tabelas e de atributos de estilizao dentro das tags
HTML.

Uma regra CSS uma declarao que segue uma sintaxe prpria e que define
como ser aplicado estilo a um ou mais elementos HTML. Um conjunto de regras CSS
formam uma Folha de Estilos. Uma regra CSS, na sua forma mais elementar, compe-
se de trs partes: um seletor, uma propriedade e um valor.

Seletor: genericamente, o elemento HTML identificado por sua tag, ou por

uma classe, ou por uma ID, ou etc., e para o qual a regra ser vlida (por
exemplo: <p>, <h1>, <form>, .minhaclasse).

Propriedade: o atributo do elemento HTML ao qual ser aplicada a regra (por

exemplo: font, color, background).

Valor: a caracterstica especfica a ser assumida pela propriedade (por

exemplo: letra tipo arial, cor azul, fundo verde).

Na sintaxe de uma regra CSS, escreve-se o seletor e a seguir a propriedade e

valor separados por dois pontos e entre chaves { }. Quando mais de uma propriedade
for definida na regra, deve-se usar ponto-e-vrgula para separ-las. O ponto-e-vrgula
facultativo no caso de propriedade nica e tambm aps a declarao da ltima
propriedade quando houver mais de uma. No entanto de boa tcnica usar-se sempre o
ponto-e-vrgula aps cada regra para uma propriedade.

O cdigo a seguir apresenta um exemplo de uso de CSS:

1 <html>
2 <head>
3 <title>PRONATEC Programador Web</title>
4 </head>
5 <body style="background-color: #FF0000;">
6 <p>Esta uma pgina com fundo vermelho</p>
7 </body>
8 </html>

O cdigo a seguir apresenta um outro exemplo de uso de CSS:

1 <html>
2 <head>
3 <title>PRONATEC Programador Web</title>
4 <style type="text/css">
5 body {background-color: #FF0000;}
6 </style>
7 </head>

33
 8 <body>
9 <p>Esta uma pgina com fundo vermelho</p>
10 </body>
11 </html>

Alm das duas maneiras acima, existe uma terceira maneira de utilizarmos CSS,
atravs de um arquivo externo de folha de estilos.

Uma folha de estilos externa um simples arquivo de texto com a extenso .css,
que referenciado dentro da pgina web. Dentro deste aquivo de folha de estilos define-
se todas as configuraes desejadas. Um nico arquivo de folha des estilos pode ser
referenciado por vrias pginas web.

O cdigo a seguir apresenta um exemplo de arquivo de folha de estilos (estilo.css):

1 body {
2 background-color: #FF0000;
3 }
4
5 p {
6 font-size: 12px;
7 color: #0000FF;
8 }

34
 9 h3 {
10 color: #00FF00;
11 }
O cdigo a seguir apresenta um exemplo pgina que referencia um arquivo de folha de
estilos:

1 <html>
2 <head>
3 <title>PRONATEC Programador Web</title>
4 <link rel="stylesheet" type="text/css" href="estilo.css" />
5 </head>
6 <body>
7 <h3>Exemplo de uso de CSS</h3>
8 <p>Esta uma pgina com fundo vermelho</p>
9 </body>
10 </html>
11

Exerccio

Crie um arquivo de folha de estilos e coloque algumas configuraes de

personalizao da apresentao de uma pgina web. Salve este arquivo com o nome

35
estilo.css

Crie uma nova pgina web referenciando a folha de estilos criada e utilize vrios
elementos em HTML que voc j conhece (pargrafos, tabelas, hyperlinks, figuras). Voc
pode usar um texto qualquer para o contedo da pgina. No esquea de salvar o
arquivo com o nome exercicio7.html

36