6-apostila_html-css.pdf

CADERNO DE EXERCCIOS EDITOR DE TEXTO - WRITER

APOSTILA DE HTML/CSS

2

APOSTILA DE HTML

1 AULA

Assuntos a serem Abordados: 1. Notepad (Bloco de Notas) e Notepad++ 2. O que HTML? 3. Marcaes HTML (tags) 4. Estrutura de uma pgina HTML

1. Notepad (bloco de Notas) e Notepad++

- Notepad (Bloco de Notas)

O Notepad (ou Bloco de notas em portugus) um editor de textos bsico que pode ser utilizado para criar documentos simples. O uso mais comum do Bloco de notas exibir ou editar arquivos de texto (.txt), mas muitos usurios o consideram uma ferramenta simples para criar pginas da Web. Como o Bloco de notas oferece suporte apenas a uma formatao muito bsica, no possvel salvar acidentalmente uma formatao especial em documentos que devem permanecer como texto puro. Isso especialmente til ao criar documentos HTML para uma pgina da Web, uma vez que os caracteres especiais ou outra formatao no podem aparecer na pgina da Web publicada, pois podem at causar erros.

3

APOSTILA DE HTML

- Notepad++

O Notepad++ um editor de texto que suporta vrias linguagens de programao rodando sob o sistema Microsoft Windows. O objetivo do Notepad++ oferecer um esguio e eficiente binrio com uma interface grfica totalmente modificvel. Alm disto, usurios podem definir suas prprias linguagens usando um "sistema de definio de linguagem" integrado, que faz do Notepad++ extensvel, para ter colorizao de sintaxe e compactao de trechos de cdigo. O Notepad++ no apenas um editor de cdigo, mas tambm uma alternativa ao bloco de notas graas a sua velocidade.

2. O QUE HTML?

HTML: Hyper Text Markup Language (Uma linguagem de Marcao de Texto)

A HTML uma linguagem de marcao. Criar um documento em uma linguagem de marcao significa que voc comea com o texto da

4

APOSTILA DE HTML

sua pgina e inclui tags especiais no incio e no final de determinadas palavras ou pargrafos.

- Caractersticas Gerais do HTML

Documentos HTML so arquivos escritos em ASCII - texto. Podem ser criados em qualquer editor de texto (wordpad,

edit, notepad). Existem editores especficos para vrias plataformas. Existem conversores de vrios formatos, por exemplo, doc

para html. A unidade mnima de informao a pgina.

H diferenas entre os diversos clientes Web, de forma que nem

todas as marcaes e seus correspondentes recursos so suportados por todos eles. Quando um cliente no entende uma determinada marcao, ele simplesmente a ignora. Ao criar um documento, importante test-lo com vrios clientes.

3. MARCAES HTML (Tags)

Marcaes HTML conhecidas como tags so os sinais de menor que e maior que (''), e tudo que estiver entre eles. As tags so partes importantes em documentos HTML, elas so as responsveis por toda a formatao do texto. Com elas voc pode dividir o documento em rea de cabealho e corpo, colocar ttulos, criar tabelas, divises, formulrios e ainda formatar trechos especficos do texto. Entre os sinais < > so especificados os comandos propriamente ditos. No caso de tags que necessitam envolver um texto, sua finalizao deve ser feita usando-se a barra de diviso / , indicando que a tag est finalizando a marcao de um texto. H excees a esse funcionamento em pares das marcaes. Por exemplo, a que indica um final de pargrafo: . No necessita de uma correspondente: . A marcao que indica quebra de linha - - tambm no precisa de uma correspondente, e outras tais como e .

Exemplo de tag : texto

Assim como outras linguagens, HTML possui uma estrutura bsica para seus programas. Para que um browser interprete corretamente o programa, ele deve possuir alguns comandos bsicos que sempre devero estar presentes. Alguns browsers at dispensam seu uso, porm melhor assumir tais comandos como parte fundamental do programa.

5

APOSTILA DE HTML

- INFORMAES TEIS

Uma considerao a ser feita em HTML sobre as tags, que elas no so sensveis caixa, ou seja, a notao equivalente a , embora as convenes atuais incentivem o uso de todas as tags em letras minsculas. Ento, para seguir os mais novos padres web voc deve usar letras minsculas.

Uma outra questo que pode surgir sobre a extenso dos arquivos. Este fato uma herana dos tempos antigos (no que diz respeito Internet ) do MS-DOS e do Windows 16 bits, em que os nomes dos arquivos tinham no mximo 8 caracteres e as suas extenses no podiam ter mais de 3 caracteres, e por isso era comum ver arquivos com nomes como 'index.htm'. Essas deficincias, que no passado obrigaram a usar a extenso .htm em vez de .html j foram eliminadas, logo totalmente aceitvel usar 'index.html' ou 'index.htm'.

4. ESTRUTURA DE UMA PGINA HTML

Uma pgina HTML dividida em duas partes: a cabea e o corpo. Na cabea (ou cabealho) so definidos os atributos principais do

documento, como o ttulo e as palavras-chave. O corpo contm a parte visvel do documento, sendo aquela que voc ver processada em seu navegador. - Estrutura Bsica de uma Pgina HTML Ttulo da Pgina Esta minha primeira pgina em HTML.

A primeira tag em seu documento HTML . Esta tag define o incio de um documento HTML e indica ao navegador que todo contedo posterior deve ser tratado como uma srie de cdigos HTML. A ltima tag em seu documento dever ser . Esta tag indica ao navegador que o fim de seu documento HTML.

6

APOSTILA DE HTML

A tags ... representam a informao do cabealho. Nenhuma informao contida no cabealho exibida na janela do navegador. Estes comandos para cabealho so opcionais, isto , um programa HTML pode funcionar sem eles. Mas conveniente us-los, pois o ttulo da pgina acrescentado atravs deles.

A tags ... representam o ttulo de seu documento, ou seja, o texto que estiver contido entre estas tags ser o ttulo e ser exibido na legenda do navegador, na parte de cima do browser.

O texto entre as tags ... so as informaes que sero exibidas na pgina.

Estas tags definem o corpo de uma pgina HTML.

2 AULA

Assuntos a serem Abordados:

1. O que so Cabealhos? 2. Pargrafos e Quebra de Linha 3. Elementos e Atributos de Pginas

1. O QUE SO CABEALHOS?

Os cabealhos (tambm chamados de Headings) servem para

criar ttulos diferenciar as sees da sua pgina. Cabealhos so exibidos em letras maiores e em negrito. O primeiro cabealho em cada documento deve estar marcado como . Eles possuem seis valores diferentes, sendo que a de valor 1 a que possui a maior fonte e a de valor 6 possui a menor fonte..

Por exemplo, usando o seguinte cdigo:

7

APOSTILA DE HTML

No cdigo acima, o HTML automaticamente solta uma linha em branco entre um Ttulo e outro.

Tome cuidado ao definir o tamanho de um cabealho, voc no est definindo o tamanho da letra (fonte 10, fonte 14). Voc apenas define que ele aparecer com maior tamanho e destaque que o resto do texto.

2. PARGRAFOS E QUEBRA DE LINHA

- PARGRAFOS

Para comear um novo pargrafo, ou seja, avanar uma linha em branco e iniciar o texto na segunda linha aps o final do pargrafo anterior deve ser usado o comando . Esse comando dever aparecer em par: . - QUEBRA DE LINHA

A tag utilizada quando voc quer terminar uma linha, mas no quer comear um novo pargrafo. Com este comando voc faz com que ocorra uma quebra de linha, onde voc posicionar a tag. Note que para o elemento no existe o comando , isto , a quebra de linha no age numa regio de texto delimitada, mas sim num ponto do texto. - INFORMAES TEIS

Sempre que voc quiser inserir linhas em branco, utilize a tag . Existem pessoas que utilizam pargrafos vazios para obter o mesmo resultado, mas isso est errado. A tag deve ser usada apenas para definir pargrafos, e o elemento no deve ser usado, por exemplo, para criar listas, pois existem tags concebidas especificamente para isso. Sempre que voc precisar obter uma formatao especial, voc deve usar o elemento que foi criado para esse efeito.

3. ELEMENTOS E ATRIBUTOS DE PGINAS

Elementos HTML so definidos usando tags de abertura, contedo e tag de fechamento. Tudo o que se encontrar entre as tags de abertura e de fechamento fazem parte do contedo do elemento. Uma pgina HTML composta basicamente de ttulos, textos, pargrafos, imagens e links, responsveis pela chamada de outras pginas para a tela. Todos esses elementos so posicionados na pgina por meio de comandos especficos de linguagem.

8

APOSTILA DE HTML

- Ttulo

O ttulo de uma pgina web indica qual o assunto abordado e ir aparecer na barra de ttulo do browser. Voc poder ter apenas um ttulo. Este ttulo utilizado por programas de lista (hotlist) do seu navegador e tambm por outros programas que catalogam pginas da Internet. Para atribuir um ttulo pgina voc dever utilizar a tag: . Esta tag sempre ser includa no cabealho (entre as tags

9

APOSTILA DE HTML

3 AULA

Assuntos a serem Abordados: 1. Alinhamentos de pargrafo 2. Criando uma Diviso 3. Texto Pr-Formatado

1. ALINHAMENTOS DE PARGRAFO

Voc j deve ter visto que em certos documentos o texto aparece ora alinhado direita, ora esquerda, no centro ou ento ocupando uniformemente o espao da pgina ( texto justificado). Isso pode ser obtido facilmente em HTML. Veja a tabela abaixo:

Alinha o texto esquerda

Alinha o texto direita

Alinha o texto centralizado

Alinha o texto justificado

Note que entre os delimitadores < e > no encontra-se apenas o elemento . Alm dele, existe o texto align="alinhamento". Dizemos que align um atributo do elemento p e alinhamento o valor desse atributo. No caso de , o valor do atributo align (que significa alinhamento em ingls) justify (justificado).

2. CRIANDO UMA DIVISO

Existem momentos em que queremos que vrios pargrafos possuam um mesmo valor de atributo - centralizado, por exemplo. Ao invs de escrevermos align="justify" a cada abertura de novo pargrafo, podemos usar o elemento div, que cria uma "diviso" no documento na qual alguns atributos so preservados. Suas vantagens sobre o align que:

Precisar ser utilizada apenas uma vez, ao contrrio do atributo

align, que tem de ser includo em diversas tags.

10

APOSTILA DE HTML

A tag pode ser usada para alinhar qualquer elemento

(cabealho, pargrafos, citaes, imagens, tabelas, etc.). O atributo align encontra-se disponvel apenas em um nmero limitado de tags.

Voc dever colocar a tag e acrescentar o atributo align na tag de abertura. O atributo align poder ter os valores: left, right , justify e center.

Vejamos o exemplo e como a pgina HTML ficaria:

Texto 1 Texto 2 Texto 3

Texto 4 Texto 5 Texto 6

3. TEXTO PR-FORMATADO

O texto de um arquivo em HTML formatado atravs das tags. Mas voc possui a opo da tag para estabelecer uma formatao atravs de um editor de texto e que esta formatao permanea na sua pgina html.

O texto pr-formatado excelente para apresentar cdigo-fonte com seus espaamentos adequados. Este recurso pode ser utilizado para criar tabelas, mas no recomendvel.

Uma observao importante que, ao usar tags de estilo, no tags de elemento, neste espao elas iro funcionar normalmente.

11

APOSTILA DE HTML

SINTAXE:

TEXTO TEXTO

TEXTO 4 AULA


1. Tags de Formatao 2. Formatao de Fonte 3. Entidades, Acentuao e Caracteres Especiais.

1. TAGS DE FORMATAO Assim como em um editor de texto, em HTML voc poder utilizar

vrios elementos para se formatar um texto, como por exemplo, escrever em negrito, itlico, sublinhado, etc.

Os principais comandos de estilo:

TAG SINTAXE FUNO

STRONG texto Similar ao negrito TYPERWRITER texto Deixa o texto com espaamento

regular BIG texto Aumenta a fonte e aplica Negrito

SMALL texto Reduz e altera a fonte SOBRESCRITO texto Eleva o texto e diminui seu corpo

TAG SINTAXE FUNO NEGRITO

texto Aplica o estilo negrito

ITLICO texto

Aplica o estilo itlico

SUBLINHADO texto

Aplica o estilo sublinhado (em alguns browsers esta tag no funciona)

12

APOSTILA DE HTML

SUBESCRITO texto Rebaixa o texto e diminui seu corpo

2. FORMATAO DE FONTE

Para fazer alteraes no tamanho, tipo e cor da fonte de seu texto voc utilizar a tag . Sua sintaxe a seguinte:

texto

- Size - especifica o tamanho da fonte a ser utilizada para o texto. Os valores permitidos vo de 1, o menor, a 7, o maior. Sendo 3 o valor padro.

- Face - especifica o tipo de fonte a ser escolhida para o texto.

- Color - especifica a cor do texto atravs de um nome predefinido de cores. No entanto, podemos obter qualquer cor que desejarmos combinando propores corretas de trs cores bases: Vermelho (Red), Verde (Green) e Azul (Blue). Seu valor ser especificado no formato hexadecimal.

Desta forma, possvel exprimir cores usando trs nmeros hexadecimais que definem as quantidades de vermelho, verde e azul que entram na composio de uma determinada cor. O valor mais baixo de uma determinada cor 0 (#00 em cdigo hexadecimal) e o valor mais alto 255 (#FF em cdigo hexadecimal). Assim, a cor preta tem 0 de vermelho, 0 de verde e 0 de azul, escrevendo na forma #000000. J o branco possui 255 de vermelho, 255 de verde e 255 de azul, sendo seu cdigo #FFFFFF. O amarelo forte possui 255 de vermelho, 255 de verde e 0 de azul, sendo seu cdigo #FFFF00. A tabela abaixo mostra os resultados de diversas combinaes de cores:

TABELA DE CORES

Os 16 nomes de cores aceitos segundo o HTML 3.2 so estes:

aqua black blue fuchsia gray green lime maroon navy olive purple red

13

APOSTILA DE HTML

silver teal white yellow Os cdigos de cores so estes:

000000 000033 000066 000099 0000CC 0000FF

003300 003333 003366 003399 0033CC 0033FF

006600 006633 006666 006699 0066CC 0066FF

009900 009933 009966 009999 0099CC 0099FF

00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF

00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF

330000 330033 330066 330099 3300CC 3300FF

333300 333333 333366 333399 3333CC 3333FF

336600 336633 336666 336699 3366CC 3366FF

339900 339933 339966 339999 3399CC 3399FF



660000 660033 660066 660099 6600CC 6600FF

663300 663333 663366 663399 6633CC 6633FF

666600 666633 666666 666699 6666CC 6666FF

669900 669933 669966 669999 6699CC 6699FF



990000 990033 990066 990099 9900CC 9900FF

993300 993333 993366 993399 9933CC 9933FF

996600 996633 996666 996699 9966CC 9966FF

999900 999933 999966 999999 9999CC 9999FF



CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF




CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF

CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF

FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF




FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF

14

APOSTILA DE HTML

FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

3. ENTIDADES, ACENTUAO E CARACTERES ESPECIAIS.

Alguns caracteres em HTML so chamados de caracteres reservados que quando aparecem num documento HTML so interpretados pelo navegador.

Para acessar um caractere, voc precisa usar a seguinte

conveno: &nome-especial; Onde o nome-especial o nome ou um nmero associado ao

smbolo grfico que voc deseja mostrar no seu documento. H caracteres que no podem ser obtidos por meio do teclado.

Eles podem ser inseridos em sua pgina atravs da especificao de um cdigo especial que o browser interpreta e substitui por um caractere especfico. Esses cdigos podem ser obtidos a partir de uma entidade HTML.

A norma ISO utiliza um cdigo composto pelo caractere & seguido do smbolo # (cerquilha) e, ento, de uma combinao numrica com ponto-e-vrgula. J a entidade HTML usa o caractere & seguido de uma palavra que identifica o smbolo com ponto-e-vrgula.

Por exemplo, e voc utilizar a palavra caf com a acentuao do seu teclado, com certeza na visualizao do seu browser ficar perfeita, mas pode ser que em outros computadores com a configurao diferente no aparea da mesma forma. O ideal coloc-la assim: caf ou ca Ex: Dirio = dirio Natao = Natao Sequncia = sequncia

E se desejasse colocar a palavra entre aspas: " caf &quot.

15

APOSTILA DE HTML

5 AULA


1. Linhas Horizontais 2. Efeitos de Movimento

1. LINHAS HORIZONTAIS

A tag insere uma linha horizontal. Ela no possui tag de fechamento e utilizada para auxiliar na distino de blocos de contedo.

Essa linha possui vrios atributos, oferecendo resultados diversos. Os atributos iro definir as propriedades que a linha ir conter como largura, cor, posio e comprimento.

insere uma linha de largura 7 (pixels). insere uma linha com cor vermelha. insere uma linha alinhada esquerda. insere uma linha de 50% de comprimento.

Voc poder utilizar os atributos separados ou juntos em uma linha horizontal.

Insere uma de largura 7, com cor vermelha , alinhada esquerda , de 50% de comprimento. - INFORMAES TEIS

16

APOSTILA DE HTML

Para voc utilizar os atributos de alinhamento em uma linha horizontal, voc deve atentar para o comprimento da linha, ou seja, o espao disponvel que ela est ocupando.

Voc poder posicionar uma linha horizontal direita, esquerda e no centro, porm, se desejar posicionar na parte inferior da janela no ser possvel utilizar atributos de alinhamento, para isso, voc poder fazer uso da tag .

2. EFEITOS DE MOVIMENTO

possvel obter o efeito de animao de texto, atravs da tag .

Sintaxe: Texto

Atributos: - Scroll - o letreiro continuar rolando continuamente em um mesmo sentido.

Texto

- Slide - o letreiro parte de um ponto da tela e vai at o outro, e pra quando chega ao final do seu percurso.

Texto

- Alternate - o letreiro deslizar at o outro lado da tela, e quando chegar l, ele voltar pela tela novamente indo e voltando.

Texto

Tambm possvel definir as direes que o texto ir ter em seu

percurso atravs do efeito direction.

Sintaxe: Texto Atributos: - Up - o letreiro ir para cima.

17

APOSTILA DE HTML

Texto

- Down - o letreiro ir para baixo.

Texto

- Left - o letreiro ir para a esquerda.

Texto

- Right - o letreiro ir para a direita.

Texto

6 AULA


1. Listas 2. Imagens 3. Colocando uma imagem como plano de fundo

1. LISTAS A linguagem HTML contm elementos que permitem criar dois

tipos de listas: as no ordenadas e as ordenadas. 1.2 - Listas No Ordenada

Uma lista no ordenada contm vrios itens marcados todos com o mesmo smbolo (normalmente um crculo pequeno ou um quadrado pequeno).

Para criar uma lista no ordenada, utilizamos o elemento

(unordered list). Dentro desse elemento, os vrios itens so criados com o elemento (list item).

O exemplo seguinte mostra uma lista simples:

Laranja Uva

Este o aspecto de como vai ficar em seu navegador:

18

APOSTILA DE HTML

Laranja Uva

Dentro de uma lista no ordenada podemos colocar pargrafos,

quebras de linha, imagens, outras listas, etc. Voc poder personalizar sua lista no ordenada com o atributo

Type. O atributo Type pode assumir trs valores (circle, disk e square) para definir o tipo de marcao a ser usado na lista. Veja o exemplo: Laranja Uva

Agora veja como ficar em seu navegador:

Laranja Uva

1.3 - Listas Ordenadas

Uma lista ordenada contm vrios tens numerados e criada com o elemento (ordered list). Os itens da lista ordenada definem-se com o elemento (list item). Abacate Abacaxi

Este o aspecto de como vai ficar em seu navegador:

1. Abacate 2. Abacaxi

Dentro de uma lista ordenada podemos colocar pargrafos, quebras de linha, imagens, outras listas, etc.

19

APOSTILA DE HTML

Voc poder personalizar sua lista ordenada com o atributo Type e Start. O atributo Type pode assumir cinco valores ( 1 , a , A , i , I ) para definir o tipo de numerao a ser usado na lista ordenada.

"1" - Especifica que os algarismos arbicos padro ( 1, 2, 3, 4, ... ) sero usados para numerar a lista.

"a" - Especifica que as letras minsculas ( a, b, c, d, ... ) sero usadas para numerar a lista.

"A" - Especifica que as letras maisculas ( A, B, C, D, ... ) sero usadas para numerar a lista.

"i" - Especifica que os algarismos romanos minsculos ( i, ii, iii, iv, ... ) sero usados para numerar a lista.

"I" - Especifica que os algarismos romanos maisculos ( I, II, III, IV, ... ) devem sero usados para numerar a lista.

Agora um exemplo com o atributo Type:

Ingredientes para bolo

Farinha de trigo Acar Manteiga Ovos Leite Fermento



a. Farinha de trigo b. Acar c. Manteiga d. Ovos e. Leite f. Fermento

Em uma lista ordenada o ponto inicial 1. Usando o atributo Start

voc poder determinar o nmero ou a letra que inicia sua lista. Como no exemplo abaixo:


Farinha de trigo

20

APOSTILA DE HTML

Acar Manteiga Ovos Leite Fermento



3. Farinha de trigo 4. Acar 5. Manteiga 6. Ovos 7. Leite 8. Fermento

Usando o atributo Value em um item da lista ordenada poderemos alterar os valores da lista a partir de qualquer ponto. Exemplo:

2. IMAGENS Alm de manipular texto, o HTML tambm serve para exibir

imagens de uma maneira muito simples, usando para isso o elemento img. As imagens dentro de uma pgina devem estar preferencialmente no formato ".gif". Este o formato (ou extenso) mais universalmente aceito pelos visualizadores de WWW (browsers). O Internet Explorer consegue decodificar outros formatos como o ".jpg" e ".rgb", mas esta capacidade no comum a todos os programas visualizadores. Por isso fique atento quando for aplicar certos tipos de formatos (extenses).

Para inserir uma imagem em uma pgina web utilizamos a tag e seus atributos.

Sintaxe:

21

APOSTILA DE HTML

Width="valor em pixel" Largura da imagem Height="valor em pixel" Altura da imagem Align=(center, left, right) Alinhamento da imagem.

Alt="texto alternativo" Texto que aparecer ao passar o mouse sobre a imagem

Border="valor em pixel" Especificao da largura da borda da imagem.

Vspace="valor em pixel" Indica o espao que deve ser deixado acima e abaixo da imagem.

Hspace="valor em pixel" Indica o espao que deve ser deixado nas laterais da imagem.

O atributo src - source, (fonte em ingls) d o nome do arquivo

da imagem e o nico atributo obrigatrio para o elemento img. Quando seu navegador abre um arquivo html e encontra o elemento img, ele usar o respectivo atributo src como o endereo onde est o arquivo de imagem a ser exibido. Por isso voc deve organizar as imagens juntamente com os arquivos a serem salvos em um mesmo local.

3. COLOCANDO UMA IMAGEM COMO PLANO DE FUNDO

O atributo background estabelece que o padro de fundo da pgina seja uma imagem. Este atributo inserido dentro da tag . Sendo que o valor desse atributo indica o local onde se encontra a imagem. Se as dimenses da imagem forem inferiores s dimenses da pgina, o navegador repetir a imagem (como num cho de mosaicos ou em uma parede de azulejos), por forma a ocupar todo o fundo da pgina.

O exemplo abaixo mostra bem como se faz isso:

22

APOSTILA DE HTML

7 AULA


1. Colocando uma cor no fundo da pgina 2. Links 3. ncoras

1. COLOCANDO UMA COR NO FUNDO DA PGINA

O atributo bgcolor nos permite escolher a cor de fundo da pgina,

utilizando o cdigo das cores ou at mesmo o nome de cada cor.

2. LINKS A principal atrao da Internet a criao de documentos com o

conceito de hipertexto, ou seja, um documento que se vincula a outros documentos por meio de ligaes especiais chamadas links ou hiperlinks. Com esse conceito, voc pode criar documentos que faam referncias e permitam ao usurio acessar tais referncias no importando se elas esto em outra pgina Web, no seu micro ou em algum servidor de rede.

O uso de hipertexto tambm facilita a criao de documentos extensos cujas sees ou tpicos podem ser rapidamente acessados por meio dos links. Imagine que voc crie uma pgina sobre determinado assunto em vrios tpicos abordados. Assim como em um livro voc cria todo o texto do documento e depois cria, no incio, um sumrio indicando os tpicos do documento. Se quiser acessar diretamente o texto de um tpico, basta dar um clique sobre o item do tpico no sumrio e ele ser imediatamente exibido.

Um link reconhecido em uma pgina por estar em cor

normalmente diferente do resto do texto e, ao passar com o mouse sobre esse texto o cursor muda para uma mo apontando para o link.

Isso feito de modo muito simples com o elemento a, como segue:

texto que ser o link

Exemplo:

23

APOSTILA DE HTML

Minha casa

1.2. Usando uma imagem como link

Exemplo:

24

APOSTILA DE HTML

ATENO: O sinal de cerquilha (#) necessrio para a ncora, pois avisa ao browser para procurar o link no documento atual.

Uma ncora um ponto de referncia ou endereo que ser acessado por um link.

8 AULA


1. Atributos de 2. Tabelas tag 3. Atributos da tag

1. ATRIBUTOS DE Atravs de atributos de , podemos definir cores para os

textos, links e para o fundo das pginas, bem como uma imagem de fundo):

onde:

bgcolor : Cor de fundo (padro: cinza ou branco)

text : Cor dos textos da pgina (padro: preto)

link : A cor dos links (padro: azul)

alink : A cor dos links, quando acionados (padro: vermelho)

vlink : Cor dos links, depois de visitados (padro: azul escuro ou roxo)

Seus valores podem ser dados em valores hexadecimais equivalentes a cores no

padro RGB (Red, Green, Blue) ou mesmo dando os nomes das cores. Existem tabelas de cores com esses valores, mas grande parte dos editores j oferece uma interface

bem amigvel atravs da qual escolhemos as cores desejadas, sem nos preocuparmos com

cdigos de cores complexos.

25

APOSTILA DE HTML

2. TABELAS tag Tabelas auxiliam na visualizao de dados ou na diviso de sua

pgina em setores. Entenda por uma tabela HTML como sendo semelhante a uma tabela que voc desenharia numa folha de papel ou num outro programa de computador. O elemento principal de uma tabela o table e aqui segue um exemplo simples de tabela: Primeira Segunda Terceira Quarta

Cujo resultado : Primeira Segunda Terceira Quarta

Em HTML, as tabelas so divididas em linhas e clulas. Na tabela acima, a primeira linha contm as clulas Primeira e Segunda, enquanto que a segunda linha contm as clulas Terceira e Quarta.

Dentro de um bloco , os principais elementos que voc utilizar so o (linha), e o (clula) . Dessa forma, podemos definir as linhas e as clulas da tabela. obrigatrio que um bloco esteja definido dentro de um bloco , ou seja, que as clulas estejam dentro de linhas.

No exemplo anterior, criamos uma linha com e em seguida, dentro de um bloco , escrevemos o texto da clula (Primeira). Abrimos outro bloco nesse mesmo bloco , onde colocamos o texto da segunda clula (Segunda). Depois, fechamos a linha com o para em seguida abrir uma nova linha, onde criamos as clulas contendo os textos Terceira e Quarta.

Na figura abaixo, voc poder ver com detalhes o significado de cada elemento que compe a estrutura bsica de uma tabela

26

APOSTILA DE HTML

Segue abaixo o conjunto de marcaes essenciais para desenhar

tabelas em HTML. Alguns atributos podem ser definidos para cada uma dessas marcaes. Falaremos desses atributos mais adiante.

- Toda tabela deve ser iniciada com a marcao e encerrada com .

ATENO: Dessa forma a tabela vai aparecer sem bordas, mas dividindo linhas e clulas.

Para que a tabela aparea com bordas simples, defina dessa forma .

Antes e depois de uma tabela, acontece sempre uma quebra de linha.

- Cada linha de uma tabela deve sempre aparecer entre

as marcaes e . - Esta a marcao que define cada clula de uma

tabela. As clulas de uma tabela devem sempre aparecer entre as marcaes de linhas ( e ). Como padro, o texto nas clulas alinhado a esquerda.

- Desta forma so definidos os ttulos de uma tabela. Estes podem ser posicionados em qualquer clula. A diferena entre a marcao de clula e ttulo de clula que o ttulo aparece em negrito.

27

APOSTILA DE HTML

3. ATRIBUTOS DA TAG Vamos ver ento o exemplo de uma tabela utilizando essas

marcaes bsicas: Itens/Ms JaneiroFevereiroMaro Usuarios8093120 Linhas335

Uma tabela simples:

coluna 1coluna 2

linha1, coluna 1 linha 1, coluna 2

linha 2, coluna 1linha 2, coluna 2

5.1. Aplicando bordas na tabela

O atributo border no elemento table serve para dar borda tabela, sendo possvel definir ainda, o valor da largura da borda da tabela. Sem o atributo border, o elemento table no ficaria muito distinto onde comea e termina cada uma das clulas:

Primeira Segunda Terceira Quarta

28

APOSTILA DE HTML

O exemplo abaixo mostra duas tabelas nas quais so

especificados os valores 10 e 5 para a borda, e outra na qual nenhuma borda foi especificada. Voc pode criar uma tabela sem bordas para montar um menu em que as opes no fiquem unicamente na vertical, como ocorre quando se usa o comando para a criao de listas. 5.2. Largura de clulas e tabelas

Para escolher a largura de tabelas e clulas, utiliza-se o j conhecido atributo width, cujo argumento idntico para o caso de imagens:

Primeira Segunda Terceira

29

APOSTILA DE HTML

Quarta

Note que quando o width utilizado com o elemento table, a largura refere-se largura da pgina, enquanto que quando usado dentro de um td largura referente ao tamanho da tabela. Isso tudo desde que o argumento seja dado em porcentagem e no em pixels.

5.3. Espaamento entre clulas

Para controlarmos a distncia entre duas clulas, utilizamos o atributo cellspacing, cujo argumento dado em pixels: Primeira Segunda Terceira Quarta

Para controlar o espaamento vertical, utilizamos o cellpadding: Primeira Segunda Terceira Quarta

30

APOSTILA DE HTML

5.4. Ampliando uma clula para mais de uma coluna

O exemplo acima mostra o uso da opo Colspan para aumentar o tamanho de uma clula e fazer com que ela ocupe colunas adjacentes. Note que o contedo desta clula est centralizado pelo comando align=center. Lembre-se de que esse no um recurso exclusivo do Internet Explorer. Veja o resultado:

5.5. Expandindo uma clula para mais de uma linha. A opo Rowspan serve para aumentar o tamanho de uma clula e

fazer com que ela ocupe colunas adjacentes. Note que o contedo desta clula est centralizado pelo comando valign=top.

31

APOSTILA DE HTML

Veja o efeito desses comandos: Resultado do Cdigo:

5.6. Ttulos de Colunas

Com o par de comandos (Title Heading), voc pode especificar ttulos para as colunas. Esses comandos funcionam da mesma forma que os , s que deixam o contedo da clula centralizado e em negrito. Veja o prximo exemplo.

Resultado do Cdigo:

32

APOSTILA DE HTML

9 AULA


1. Formulrios tag 2. Frames / 3. .CSS

1. FORMULRIOS TAG Os formulrios servem para recolher dados introduzidos pelos

visitantes e envi-las para voc, atravs de seu servidor. Um formulrio uma seo da pgina HTML que contm elementos que permitem ao visitante inserir dados (elementos e vrios tipos de elementos , e ).

Estes elementos permitem inserir dados numricos, textos

pequenos, textos longos, selecionar elementos em uma lista com vrias

33

APOSTILA DE HTML

escolhas, responder facilmente com respostas do tipo "sim" ou "no", selecionar rapidamente uma opo em um pequeno grupo, etc. 1.2. Criar Formulrios

Os formulrios so criados com o elemento . Dentro desse elemento principal colocamos diversos elementos para a insero dos dados. . . .

O elemento por si s no faz com que o navegador desenhe nada na pgina nem permite inserir dados. Ele contm elementos que recolhem os dados e possui atributos que dizem ao navegador como e para onde devem ser enviados os dados inseridos pelo visitante.

Veremos a sintaxe desta tag:

< form name="form1" method="post" action="">

name o nome que ser dado ao formulrio, por padro definido form1, mas o usurio pode colocar outro nome.

method o mtodo que ser utilizado para que os dados do

formulrio sejam enviados para o cliente da pgina. Existem dois mtodos para este envio, o post e o get. Veremos melhor a sua utilizao no curso de ASP.

action o arquivo que ser executado pelo formulrio para

que os dados cheguem ao cliente com segurana.

Aps colocarmos a , teremos que criar as caixas de texto onde sero digitadas as informaes. Para isso utilizaremos a tag veja a sintaxe:

Onde:

34

APOSTILA DE HTML

type o tipo que ser a caixa de texto, normalmente o tipo text, mas h outros tipos password que utilizado em caixas que guardam informaes sobre senhas.

name o nome que ser dado caixa de texto que guardar as informaes.

1.3. Action e Botes (Reset e Submit)

Quando o visitante clica sobre o boto "Submeter" (ou "Submit"), as opes marcadas e o texto que foram inseridos no formulrio so enviados para voc (ou para seu servidor). Conhea dois dos principais botes e suas funes.

submit - usado para enviar os dados do formulrio.

reset - utilizado para limpar os dados do mesmo.

O atributo action do elemento contm o endereo (URL) do recurso da Web (site, download, email, etc. ) que est encarregado de realizar este processamento. para l que o contedo do formulrio ser enviado. Nome de usurio:

O exemplo acima ficar sendo exibido da seguinte forma em seu navegador:

1.4. Input

O elemento que encontramos com maior frequncia em formulrios o elemento .

O exemplo abaixo mostra um formulrio simples com dois elementos input:

35

APOSTILA DE HTML

Cadastro Pessoal Cadastro Pessoal Nome: Telefone:

ATENO: um input para cada caixa de texto.

O formulrio acima ficar sendo exibido desta forma em seu navegador:

O elemento pode assumir diversas formas com finalidades diferentes. 1.5. Radio Buttons

Os "Radio Buttons" so utilizados para se criar um grupo pequeno de opes em que apenas podemos selecionar uma de cada vez. Masculino Feminino

O exemplo acima ficar sendo exibido desta maneira em seu browser:

Repare que s podemos selecionar uma das opes acima.

36

APOSTILA DE HTML

1.6. Checkboxes

As caixas de validao "checkboxes" devem ser usadas sempre que queremos que o visitante aceite (ou no) os itens dentro de um pequeno grupo. permitido validar mais de uma opo simultaneamente. Eu tenho um carro Eu tenho uma prancha de surf

O exemplo acima ficar sendo exibido desta forma em seu browser:

Repare que podemos selecionar vrias opes ao mesmo tempo.

2. /

Os frames (molduras) so subjanelas definidas sobre a janela principal do browser. Estas subjanelas so criadas dividindo a janela em vrias partes, cada parte chamada de frameset. Os frames so geralmente usados para que um frameset permanea enquanto outros mudem baseados nos links que o usurio seleciona. 2.1.

Determina o incio e o fim de um frame. Este elemento divide a janela do browser em linhas e colunas. Deve ser usado juntamente com os parmetros cols (frame na vertical) ou rows (frame na horizontal). 2.2.Atributos Frame

- Src=pgina.htm" - Determina a pgina ou arquivo que ser

carregado na regio correspondente. - Name="nome"- Determina um nome ao frameset correspondente.

O nome de vital importncia na utilizao dos frames.

37

APOSTILA DE HTML

- Noresize - Deixa a linha do frameset esttica.

- Marginheight="x" - Determina a largura em pixels da margem

vertical. - Marginwidth="x" - Determina a largura em pixels da margem

horizontal. - Scrolling="valor" - Determina se aparecer barra de rolagem. Os

valores podem ser yes (com barra de rolagem), no (sem barra de rolagem) ou auto (barra de rolagem s aparecer quando o contedo da pgina ultrapassar o tamanho do frameset).

- Cols="x,x" - Determina o nmero de regies verticais da pgina.

Deve ser indicado juntamente com uma lista de valores. Cada valor especifica a largura de cada frameset e pode ser definido em pixels, percentual ou atravs de asterisco.

- Rows="x,x" - Determina o nmero de regies horizontais da

pgina. Deve ser indicado juntamente com uma lista de valores. Cada valor especifica a largura de cada frameset e pode ser definido em pixels, percentual ou atravs de asterisco.

- Border="x" - Determina a espessura da linha divisria que aparece entre os framesets. Sendo que x o valor da borda em pixels.

- Bordercolor="cor" - Determina a cor da linha divisria que aparece entre os framesets.

- Importante

Para abrir uma pgina em frameset diferentes voc deve especificar o nome do mesmo no link.

Exemplo:

Logo abaixo est o cdigo bsico de uma pgina com frame.

Este exemplo mostra uma pgina HTML com Frames (molduras).

1 Pgina: pagina_banner.htm 2 Pgina: pagina_menu.htm 3 Pgina: pagina_princ.htm

38

APOSTILA DE HTML

Criar a Pgina Index.htm, que ser a pgina dos Frames, onde

ser visualizado as pginas anteriormente criadas. 1 Pgina: pagina_banner.htm

Pgina Banner Oi Tudo bem !!! 2 Pgina: pagina_menu.htm Pgina Menu Oi Tudo OK !!! 3 Pgina: pagina_princ.htm Pgina Principal Oi Tudo Legal !!!

Pode ser acrescidos cores, imagens e efeitos em todas as pginas!

Use sua criatividade. Pgina Index.htm Home Page

39

APOSTILA DE HTML

Esta pgina que foi criada deve ser chamada de index.htm. 3.CSS - Cascading Style Sheets

Cascading Style Sheets (Folhas de Estilo em Cascata ou simplesmente CSS) uma linguagem de estilo utilizada para definir a apresentao de documentos escritos em uma linguagem de marcao, como HTML ou XML. Seu principal benefcio prover a separao entre o formato e o contedo de um documento.

Em vez de colocar a formatao dentro do documento, o desenvolvedor cria um link (ligao) para uma pgina que contm os estilos, procedendo de forma idntica para todas as pginas de um portal. Quando quiser alterar a aparncia do portal basta, portanto modificar apenas um arquivo.

- A sintaxe bsica das CSS

Suponha que desejamos uma cor de fundo vermelha para a pgina web:

Usando HTML podemos fazer assim:

Com CSS o mesmo resultado ser obtido assim:

body {background-color: #FF0000;} OBS: Em CSS, no utilizamos tags de iniciao e termina do documento.

Como voc pode notar os cdigos HTML e CSS so mais ou menos parecidos. O exemplo acima serve tambm para demonstrar o fundamento do modelo CSS:

40

APOSTILA DE HTML

Mas, onde colocar o cdigo CSS? isto que veremos a seguir.

- Aplicando CSS a um documento HTML

Voc pode aplicar CSS a um documento de trs maneiras distintas. Os trs mtodos de aplicao esto exemplificados a seguir. Recomendamos que voc foque no terceiro mtodo, ou seja o mtodo externo.

Mtodo 1: In-line (o atributo style)

Uma maneira de aplicar CSS pelo uso do atributo style do HTML. Tomando como base o exemplo mostrado anteriormente a cor vermelha para o fundo da pgina pode ser aplicada conforme mostrado a seguir:

Exemplo Esta uma pgina com fundo vermelho

Mtodo 2: Interno (a tag style)

Uma outra maneira de aplicar CSS e pelo uso da tag do HTML. Como mostrado a seguir:

Exemplo

41

APOSTILA DE HTML

body {background-color: #FF0000;} Esta uma pgina com fundo vermelho

Mtodo 3: Externo (link para uma folha de estilos)

O mtodo recomendado o de lincar para uma folha de estilos externa. Usaremos este mtodo nos exemplos deste tutorial.

Uma folha de estilos externa um simples arquivo de texto com a extenso .css. Tal como com qualquer outro tipo de arquivo voc pode colocar uma folha de estilos tanto no servidor como no disco rgido.

Vamos supor, por exemplo, que sua folha de estilos tenha sido nomeada de style.css e est localizada no diretrio style. Tal situao est mostrada a seguir:

O "truque" criar um link no documento HTML (default.htm) para a folha de estilos (style.css). O link criado em uma simples linha de cdigo HTML como mostrado a seguir:

Notar que o caminho para a folha de estilos indicado no atributo href.

Esta linha de cdigo deve ser inserida na seo header do documento HTML, isto , entre as tags e . Conforme mostrado abaixo:

42

APOSTILA DE HTML

Meu documento ...

Este link informa ao navegador para usar o arquivo CSS na renderizao e apresentao do layout do documento HTML. A coisa realmente inteligente disto que vrios documentos HTML podem lincar para uma mesma folha de estilos. Em outras palavras isto significa que um simples arquivo ser capaz de controlar a apresentao de muitos documentos HTML.

Esta tcnica pode economizar uma grande quantidade de trabalho. Se por exemplo, voc quiser trocar a cor do fundo de um site com 100 pginas, a folha de estilos evita que voc edite manualmente uma a uma as pginas para fazer a mudana nos 100 documentos HTML. Usando CSS a mudana se far em uns poucos segundos trocando-se a cor em uma folha de estilos central.

Vamos praticar o que aprendemos.

Faa voc mesmo

Abra o Notepad (ou qualquer outro editor de texto que queira usar) e crie dois arquivos um arquivo HTML e um arquivo CSS com os seguintes contedos:

43

APOSTILA DE HTML

default.htm

Meu documento Minha primeira folha de estilos

style.css

body { background-color: #FF0000; }

Salve os dois arquivos no mesmo diretrio. Lembre-se de salvar os arquivos com a extenso apropriada (".css" e ".htm")

Abra default.htm no seu navegador e veja uma pgina com o fundo vermelho. Parabns! Voc construiu sua primeira folha de estilos!

6-apostila_html-css.pdf

Documents