Escolar Documentos
Profissional Documentos
Cultura Documentos
manualHTML PDF
manualHTML PDF
HTML
ndice
1. Introduo ............................................................................................................................. 2
2. Como funciona ...................................................................................................................... 2
3. HTML CSS JavaScript........................................................................................................ 3
4. Estudo de Cores..................................................................................................................... 4
5. Estrutura de pastas de um Site.............................................................................................. 6
6. Estrutura de um documento HTML....................................................................................... 7
7. A declarao <!DOCTYPE>..................................................................................................... 8
8. charset=utf-8 ......................................................................................................................... 8
9. Comentrio............................................................................................................................ 9
10. HTML Headings.................................................................................................................. 9
11. Pargrafos e Quebras de Linha.......................................................................................... 9
12. Formatao de texto ....................................................................................................... 10
13. HTML Links Hyperlinks.................................................................................................. 13
14. Imagens ........................................................................................................................... 14
15. Imagem como link ........................................................................................................... 15
16. HTML Lists ....................................................................................................................... 17
17. Table ................................................................................................................................ 20
18. Anexo 1 Adobe FireWorks Editor de imagens ........................................................... 22
19. Anexo 2 Adobe Dreamweaver...................................................................................... 33
1. Introduo
A linguagem HTML (Hyper Text Markup Language) tem como objetivo formatar textos atravs
de marcaes especiais denominadas tags, para que possam ser mostrados pelos clientes Web,
tambm chamados navegadores ou browsers. Esta linguagem possibilita tambm a interligao
entre pginas Web, criando assim documentos com o conceito de hipertexto.
2. Como funciona
Quando o endereo de uma pgina colocado num Browser de uma estao cliente, para ser
aberta, o Browser envia um pedido com o protocolo http ao servidor (Request).
Se a pgina estiver disponvel, o Servidor Web envia a pgina para o cliente (Response).
Se a pgina precisa da informao de uma BD, uma pgina dinmica, seno uma pgina
esttica.
Existem dois tipos de servidores mais utilizados: IIS da Microsoft e Apache, com origem Linux.
Ambos funcionam num Sistema Windows.
Um servidor web IIS, utiliza uma linguagem de programao (lado servidor) ASP.NET e uma base
de dados em SQL Server.
Um servidor web Apache utiliza uma linguagem de programao (lado servidor) PHP e uma base
de dados em MySql.
Toda a estrutura da pgina (esqueleto) construdo em HTML, com tabelas, frames ou DIVs.
4. Estudo de Cores
Uma pgina web deve ser construda e decorada com um nmero reduzido de cores. frequente
utilizarmos apenas 6 a 8 cores na decorao da pgina.
As cores web safe (cores seguras para a web), so 216 no total e podem ser utilizadas para no
haver um incorreta interpretao dos tons pelos Browsers (opera, IE, Firefox..etc)
As cores web safe so construdas com pares iguais de dgitos hexadecimais do conjunto: 00, 33,
66, 99, CC, FF (Exemplo: 3366CC).
uma boa prtica utilizar apenas cores web safe, mas no entanto, as pginas podem ser
construdas com qualquer combinao de cores.
O Site www.visibone.com, mostra a palete de cores web safe com os cdigos RGB decimal e
hexadecimal.
As cores de dentro (pasteis suaves) devem ser utilizados para fundos e as cores de fora (cores
fortes) para objetos tipo botes e contrastes.
Exerccio 1 Construa num documento de PowerPoint um esquema com 8 cores sua escolha,
como mostra a figura em baixo. O preto e o branco so obrigatrios. Poder utilizar uma
calculadora para converter nmeros hexadecimais para decimais, porque o PowerPoint apenas
trabalha com RGB decimal e na web trabalhamos com RGB hexadecimal.
Exerccio
No quadrado do meio, inserimos os cdigos da nossa cor e, depois podemos escolher uma regra
de cores e ver, quais cores combinam com a nossa.
Um documento HTML pode ser escrito num bloco de notas ou num editor prprio como o Adobe
Dreamweaver.
No bloco de notas o ficheiro deve ser guardado com o nome: nome.html e do tipo: todos os
ficheiros.
Os nomes de ficheiros e pastas e objetos no HTML deve obedecer regra de nomes de variveis
da programao: utilizar minsculas, comear com letras, sem espaos ou acentos ou
cedilhados.
Exerccio 3:
Tables (tabelas)
Divs (Retngulos)
Frames (Zonas)
Mais frente iremos utilizar Tables. Com CSS iremos ainda utilizar Divs.
7. A declarao <!DOCTYPE>
O Doctype deve ser a primeira linha de cdigo do documento antes da tag HTML.
Se omitir o DOCTYPE, ou usar um invlido, o Browser vai renderiz-lo em Quirks Mode, onde
o Browser pensa que escreveu o HTML de forma antiquada e invlida. Mas se escolher um
DOCTYPE vlido, ele ira funcionar em Standards Compliance Mode, ou seja, modo de
concordncia com os padres.
8. charset=utf-8
Para no haver problemas quando tentamos utilizar alguns caracteres especiais, como os de
acentuao da lngua portuguesa, Utilizamos a meta tag charset, na zona do HEAD:
9. Comentrio
Headings so ttulos em HTML, existem 6 nveis de headings (h1, h2, h3, h4, h5, h6): (ttulos,
subttulos, sub-subtitulos, etc..)
Tag Descrio
<b> Texto em Bold
<em> Texto enfatizado
<i> Texto em Itlico
<small> Texto mais pequeno
<strong> Texto importante
<sub> Texto inferior linha
<sup> Texto Superior linha
<ins>ou<u> Texto inserido
<del> Texto apagado
<mark> Texto com cor de realce
Exerccio 4
Os Lusadas
Canto 1
Estrofe 1
As armas e os bares assinalados,
Que da ocidental praia Lusitana,
Por mares nunca de antes navegados,
Passaram ainda alm da Taprobana,
Em perigos e guerras esforados,
Mais do que prometia a fora humana,
E entre gente remota edificaram
Novo Reino, que tanto sublimaram;
Estrofe 2
E tambm as memrias gloriosas
Daqueles Reis, que foram dilatando
A F, o Imprio, e as terras viciosas
De frica e de sia andaram devastando;
E aqueles, que por obras valerosas
Se vo da lei da morte libertando;
Cantando espalharei por toda parte,
Se a tanto me ajudar o engenho e arte.
Estrofe 3
Cessem do sbio Grego e do Troiano
As navegaes grandes que fizeram;
Cale-se de Alexandro e de Trajano
A fama das vitrias que tiveram;
Que eu canto o peito ilustre Lusitano,
A quem Neptuno e Marte obedeceram:
Cesse tudo o que a Musa antgua canta,
Que outro valor mais alto se alevanta.
Invocao s Ninfas do Tejo
Exerccio 5
Um Link um texto ou imagem, que quando sofre um clique, salta para um outro documento.
Exerccio 6
14. Imagens
Todas as imagens em bruto, enquanto esto a ser tratadas, so guardadas na pasta imagesAux.
As imagens GIF permitem transparncias e permitem poucas cores (256). til para botes e
logos.
As imagens JPG permitem milhes de cores mas no permitem transparncias. til para fotos.
O atributo alt especifica um texto alternativo para a imagem, caso esta no possa ser mostrada.
Os atributos width (comprimento) e height (altura) de uma imagem devem sempre ser
inseridos.
Para utilizar uma imagem como link, basta colocar a tag <img> dentro de uma tag <a>
Exerccio 7
Construa uma pgina html com 4 imagens e 4 links. As imagens sobre cada
uma das estaes do ano, escolhidas na Internet tm as dimenses
(300x200). Cada um dos links, remete para uma pgina da Wikipedia sobre
a estao. Exerccio
Exerccio 8
<ul style="list-style-type:square">
Listas horizontais
No mdulo de CSS
Exerccio 9
Exerccio
O border (grossura linha) s fica definido a 1px, para podermos ver as linhas da tabela.
Num produto final, o border do layout de uma pgina fica sempre a 0px.
As tags <td> tambm podem ter propriedades width (comprimento) e height (altura).
Exerccio 10
Exerccio
Tabela com 4 linhas e 1 coluna. As dimenses da tabela so as medidas de uma resoluo dos
monitores. 1024x768 uma das resolues mais utilizadas para a construo da estrutura de
uma pgina. A soma das dimenses de todas as linhas e todas as colunas da tabela tem que dar
1024x768.
Exerccio 11
Exerccio
Novo documento
Comprimento
altura
Resoluo: sempre 72
Copiar a imagem
Como j referido, as imagens nas pginas web devem ter pouco peso, a no ser que um dos
principais requisitos seja a qualidade da imagem. Assim sendo as imagens que vo estar nas
pginas devero ser GIFs ou JPGs, em vez das PNG.
Fica assim
C. Botes
Porque os botes vo ser imagens roollOver, teremos que construir 2 imagens para cada
boto. Uma para o estado normal (UP), outra para o estado OVER (Quando o rato passa por
cima do boto). Os botes de um site devero ser todos iguais, mesma dimenso e mesma
decorao. Apenas muda o texto dos botes.
W:100
H:100
X:0
Y:0
color: #295B73
Roundness: 50%
sem cor de linha
Ateno ao tamanho da
letra. Todos os botes
devem ter o mesmo tipo,
cor e tamanho da letra.
Teremos que adaptar o
tamanho da letra maior
palavra existente nos
botes.
Para construir a segunda imagem do boto (estado over) basta mudar a cor do boto ou a cor
do texto e gravar o boto com outro nome:
Para construir os outros botes da pgina, basta editar os ficheiros png e alterar o texto.
A Barra de menus
B Barra de ferramentas
C rea de trabalho
D Painel de propriedades
E Grupo de painis
Para trabalhar o
cdigo.
Para trabalhar em
modo de design.
Quando iniciamos um novo documento em Dreamweaver, o cdigo inicial j vem feito. Quando
inserimos elementos em modo grfico (tabelas, imagens, ), o Dreamweaver insere
automaticamente o cdigo html, na vista Code.
Rows linhas:4
Columns Colunas:1
Table Width Comprimento da tabela:1024 px
Border thickness espessura da linha: 0 px
Cell Padding distancia dos objetos dentro da clula: 0
Cell spacing distancia entre clulas:0
Header cabealho da tabela: None
Vamos para modo de code, vemos que j foi inserido todo o cdigo html necessrio para a
construo da tabela:
No modo de design vamos dar as dimenses de cada uma das clulas. Colocar o cursor dentro
de cada uma das clulas e modificar as propriedades W (Width comprimento) e H ( Height
altura):
Estrutura feita.
Porque ainda no estamos a trabalhar com CSS, todas as zonas na nossa pgina vo ter imagens
ou imagens com texto. No vamos ainda introduzir texto nas zonas, porque teria que ser sempre
formatado com CSS.
Vamos ento construir uma imagem no Fireworks para a zona do header (1024x150)
Fica assim:
O Alternate text, serve para deixar um texto, quando a imagem no aparece por algum
motivo download por exemplo.
Podemos ainda acrescentar uma propertie title na tag img, como mostra a imagem:
O title serve para mostrar um label, quando num browser passamos o rato por cima da
imagem.
No browser
Vamos ento construir uma imagem no Fireworks para a zona do footer (1024x68)
vista design
AlternateText: imgFooter
Title: footer
vista code
No browser
Como dito anteriormente, apenas estamos a construir a pgina web com imagens nesta altura,
porque ainda no estamos a trabalhar com CSS.
Nota: a zona do main poderia ser dividida em vrias zonas, com a utilizao de uma nova tabela.
AlternateText: imgMain01
Title: main01
no browser
Num site a estrutura e decorao deve ser igual em todas as pginas. Assim, as zonas do head,
menu e footer devem ser sempre iguais. Apenas muda de pgina para pgina a zona do main,
zona de informao.
Porque vamos ter duas pginas, vamos construir uma nova imagem para a zona do main da
futura nova pgina, chamada main02:
Esta nova imagem apenas vai ser utilizada na pgina2, quando esta for construda.
Botes:
A zona do menu vai ter dois botes: Home e Imagens. Porque os botes vo ser roolOver, cada
boto precisa de duas imagens (A construo dos botes foi explicada no captulo do Fireworks).
Cada boto vai ter as dimenses 100x50, logo temos que construir uma nova tabela com 1 linha
e 3 colunas na zona do menu (trs colunas, porque precisamos de duas para os botes e de mais
uma para o resto do espao):
Row:1
column:3
border:0
cell padding:0
cell spacing:3
100x50
100x50
824x50
Construir no fireworks uma imagem com as dimenses 824x50, com a cor de fundo #735735,
para por na clula 3 do menu:
Quando inserirmos
novamente os botes, o
cdigo inserido novamente.
No browser:
Links:
Nesta altura a pgina index12.html est concluda. Tem toda a estrutura feita, tem botes com
links e zona de informao no main. Guardar o documento.
Todas as outras pginas do site tero uma estrutura, botes e links iguais. Apenas muda a zona
da informao main.
No explorador do windows,
copiar e colar o documento
index12 e mudar o nome
para imagens.
Ateno o nome do
documento tem que ser
igual ao nome dado no link
do boto.
Exerccio 12