Jairson Monteiro

Introduo
HTML a abreviatura de HyperText Markup Language, ou seja, Linguagem de Marcao de Hipertexto. Resumindo em uma frase: o HTML uma linguagem para publicao de contedo (texto, imagem, vdeo, udio e etc.) na Web.

Os dois objetivos bsicos de HTML so:

1. 2.

Formatao do contedo de uma pgina Web Criar ligaes entre vrias pginas

O HTML baseado no conceito de Hipertexto. Hipertexto so conjuntos de elementos ou ns ligados por conexes. Estes elementos podem ser palavras, imagens, vdeos, udio, documentos etc.
2

O Nascimento da Web
Para distribuir informao de uma maneira global, necessrio haver uma linguagem que seja entendida universalmente por diversos meios de acesso. O HTML se prope a ser esta linguagem. A Web Sua ideia inicial foi concebida em 1989, nos laboratrios de CERN (European Laboratory of Particle Physics), na Suia. Tim Berners-Lee, seu criador, conheceu a linguagem com o propsito de interligar os computadores do laboratrio e instituies de pesquisa coligadas a ele. O objectivo era ter uma linguagem que exibia documentos cientficos de forma simples e fcil de acessar. A web tornou-se a moda no meio cientfico-universitrio e cresceu rapidamente, e assim rapidamente foi assimilada pelas universidades americanas. O crescimento estupendo da Web veio com a criaao do primeiro browser (navegador) grfico, tipo windows, no final de 1993, que foi desenvolvido por Marc Anderseen.
3

A partir da, desenvolvedores e fabricantes de browsers utilizaram o HTML como base, compartilhando as mesmas convenes.

A Evoluo da linguagem HTML

A linguagem HTML foi criada por Timothy John Berners-Lee a partir de 1989. Este anunciou oficialmente a criao da web na Usenet em Agosto de 1991. No entanto, apenas a partir de 1993 se pode considerar o estado do HTML suficientemente avanado para se poder falar de linguagem (o HTML ento simbolicaente baptizado HTML 1.0). O navegador Internet utilizada na poca chamava-se NCSA Mosac. O RFC 1866 (Requests For Comments - Um documento oficial da Internet Engineering Task Force (IETF) que especifica os detalhes dos protocolos includos na famlia TCP/IP ), datado de Novembro de 1995, representa a primeira verso oficial do HTML, quer dizer, o HTML 2.0. Aps o breve aparecimento de um HTML 3.0, que nunca viu oficialmente o dia, o HTML 3.2 tornou-se no standard oficial a 14 de Janeiro de 1997. Os contributos mais notveis do HTML 3.2 eram a normalizao dos quadros bem como um grande nmero de elementos de apresentao. A 18 de Dezembro de 1997, o HTML 4.0 foi publicado. A verso 4.0 da linguagem HTML estandardiza nomeadamente as folhas de estilo e os quadros (frames). A verso HTML 4.01, aparecida a 24 de Dezembro de 1999, traz algumas modificaes menores ao HTML 4.0.

Algumas definies importantes

Internet - Rede Mundial de Computadores (estrutura de milhares de computadores interligados entre si); WWW ou Web - World Wide Web (Teia Mundial de Informao); HTTP - HyperText Transfer Protocol (Protocolo de Transferncia de Hipertexto); HTML - HyperText Markup Language (Linguagem de Marcaes de Hipertexto); SGML - Standard Generalized Markup Language (Standard para a descrio de Linguagens do tipo de Marcao);
5

Browser - Aplicao que permite explorar e visualizar os documentos

Conhecimentos bsicos
Para a realizao de documentos em HTML deve haver um conhecimento prvio de Windows (manuseamento de ficheiros e pastas), bem como do Microsoft Internet Explorer ou outro browser, para a visualizao dos documentos realizados.

O que um documento HTML ou pgina Web? Documentos HTML ou pginas Web, so ficheiros de texto simples constitudos por instrues HTML e que podem ser criados por qualquer editor de texto (exemplo: Bloco de Notas do Windows). Podem ainda ser utilizados processadores de texto (exemplo: Microsoft Word 97) para esse mesmo efeito. Quando se exploram as pginas Web, utilizado o HTTP para a navegao nestas e quando se clica em algo que tem uma ligao iniciado atravs do HTML e HTTP uma leitura e transferncia de dados entre computadores que permite aceder mais diversa informao existente na Internet.

Editores de HTML Existem alguns editores no mercado do tipo WYSIWYG (sigla de What You Se Is What You Get), ou seja, editores que ao ser realizado o trabalho poder antever-se como o documento ficar depois de pronto. Estes editores podem ser utilizados, para se compreender melhor a sua utilidade, depois de aprender alguns dos princpios bsicos da programao em HTML. Desenvolver uma pgina Web Vai precisar de

Conhecer a linguagem HTML para escrever o cdigo fonte da pgina Um editor de texto para gerar o cdigo fonte (Ex: bloco de notas, Notepad++, wordpad, etc) Um navegador (Browser) para visualizar sua pgina (Inetrnet Explorer, Netscape, etc)

Aula 08-01-2014

Iniciando o HTML
Todo documento HTML apresenta elementos entre parnteses angulares (< e >). Esses elementos so as etiquetas (tags) de HTML, que so os comandos de formatao da linguagem. O que so tags? So elementos fundamentais na estrutura do documento HTML. Os tags so utilizados nos documentos para identificar cabealhos, tabelas, pargrafos, listas, imagens, etc., ou seja, as pginas Web so nada mais, nada menos, que um conjunto de tags, que identificam todos os componentes destas. Os tags so constitudos por um sinal de menor esquerda (<) e por um sinal de maior (>) direita escrevendo-se entre estes o nome do tag, sendo utilizados normalmente aos pares (exemplo:<H1> e </H1>) para comear e terminar a instruo. O tag final em tudo semelhante ao de incio excepto na barra (/) que indica o fim de instruo. Alguns elementos do documento podero incluir atributos, que informao adicional que includa dentro do tag inicial. Exemplo disto so as imagens que podem suportar atributos adicionais acerca do seu posicionamento, atravs do parmetro especfico de cdigo HTML.

Edio de Documentos HTML

Neste mdulo, numa fase inicial ser utilizado o Bloco de Notas do Windows para a realizao dos documentos em html e, mais tarde, o Notepad ++. Para aceder a este editor de texto precisa de: Clicar no boto Iniciar, deslocar o cursor do rato at Programas, Acessrios e de seguida clicar em Bloco de Notas. O mtodo de gravao utilizado Todos os documentos escritos em HTML devero ser gravados com a extenso htm (se houver restrio a nomes longos) ou html (se no houver restrio a nomes longos), da seguinte maneira: Escolher a opo Guardar Como... se esta for a primeira vez que o documento gravado ou ento se houver necessidade de gravar com outro nome.
10

O essencial de um documento HTML Todo e qualquer documento HTML tem de conter certos tags que so imprescindveis nesse mesmo documento. Cada documento consiste num cabealho e num corpo de texto. O cabealho contm o ttulo e o corpo de texto contm o texto que composto por pargrafos, listas e outros elementos. Este texto composto por tags e informao adicional, que lida pelos browsers, pois estes so programados de acordo com as especificaes do cdigo HTML e SGML. Modelo Bsico de pgina Web Uma pgina web criada em HTML, possui trs partes bsicas: estrutura principal, cabealho e um corpo de pgina. Possui uma estrutura dividida em 4 TAGs bsicas: <Html></Html> <Head> </Head>
11

<Title> </Title>

Documento HTML Bsico e seus Componentes

A estrutura de um documento HTML apresenta os seguintes componentes:

<HTML> <HEAD> <TITLE> Titulo do Documento </TITLE> </HEAD> <BODY> texto, imagem, links, etc... </BODY> </HTML>
12

Documento HTML Bsico e seus Componentes

<HTML> e </HTML> Esta instruo indica ao browser que o documento contm informao em cdigo HTML. Para alm disto, os ficheiros com a extenso htm ou ento html, tambm indicam ao browser que o documento contm cdigo HTML. <HEAD> e </HEAD> Esta instruo indica ao browser o cabealho da pgina que est a ser visualizada e a primeira parte do cdigo HTML. Esta instruo utilizada em conjunto com o TITLE (ver abaixo). <TITLE> e </TITLE> A instruo TITLE, indica num contexto geral, o ttulo do documento que est a ser visualizado. Esse ttulo apresentado no topo da janela do seu browser, mas nunca na parte do texto. normalmente resumido e descritivo. <BODY> e </BODY>
13

Esta instruo a segunda parte do cdigo e a mais comprida, pois nela est contida toda a informao que visualizada na pgina Web.

Exemplo1
Fazendo uso do Bloco de Notas do windows, crie o cdigo fonte em html que permita obter o seguinte resultado

14

TAGs
Todo documento HTML apresenta elementos entre parnteses angulares (< e >). Esses elementos so as etiquetas (tags) de HTML, que so os comandos de formatao da linguagem. A maioria das etiquetas tem sua correspondente de fechamento, representada com uma barra ( / ): <etiqueta>...</etiqueta> Isso necessrio porque as etiquetas servem para definir a formatao de uma poro de texto, e assim marcamos onde comea e onde termina o texto com a formatao especificada por ela. Alguns elementos so chamados vazios, pois no marcam uma regio de texto, apenas inserem alguma coisa no documento, no havendo a necessidade do fechamento: <etiqueta> Todos os elementos podem ter atributos: <etiqueta atributo1=valor1 atributo2=valor2>...</etiqueta>
15

HTML um recurso muito simples e acessvel para a produo de

16

17

Os nveis de Cabealhos

18

Trabalhando Pargrafos
A TAG <P> A TAG responsavel pela quebra de paragrafos e a <p> que finaliza o paragrafo e insere automaticamente uma linha entre paragrafos. E tambem responsavel pelo alinhamento de paragrafos. Sem alinhamento Sintaxe: <P>Texto do Pargrafo</P>, onde </P> facultativo. Com alinhamento sintaxe de comando: <P ALIGN="posicao"> texto do paragrafo

Em que Posicao pode ser: Left alinhamento a esquerda center alinhamento ao centro Right alinhamento a direita

19

Quebras de Linha
A TAG <BR>

Faz uma quebra de linha sem acrescentar espacos extras entre linhas. Finaliza a linha de texto e insere automaticamente uma outra linha em branco. Nao necessita ser finalizada com </BR>.

20

Aula 10-012014

Seco <BODY>
Como j estudado anteriormente, tudo que estiver contido em <BODY> ser mostrado na janela principal do browser, sendo apresentado ao leitor. <BODY> pode conter cabealhos, pargrafos, listas, tabelas, links para outros documentos, imagens, formulrios, animaes, vdeos, sons e scripts embutidos. Atributos de <BODY> Atravs de atributos de <BODY>, podemos definir cores para os textos, links e para o fundo das pginas, bem como uma imagem de fundo (marca dgua):
<BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb" ALINK="#rrggbb VLINK="#rrggbb" BACKGROUND="URL">

Onde:

BGCOLOR: Background Color, ou seja, cor de fundo da pgina. Quando no indicada a cor de fundo, o browser ir mostrar uma cor padro, geralmente cinza ou branco. TEXT: Cor dos textos da pgina (padro: preto). 22 LINK: Cor dos links (padro: azul).

Seco <BODY>
Seus valores so dados em hexadecimal, equivalentes a cores no padro RGB (Red, Green, Blue). 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 nmeros esdrxulos tais como #FF80A0. Browsers que seguem a definio de HTML 3.2 em diante, tambm aceitam 16 nomes de cores, tirados da paleta VGA do Windows - por exemplo, podemos escrever BGCOLOR="BLUE". Porm, browsers mais antigos no apresentaro as cores indicadas. BACKGROUND: background=y Este atributo utilizado para colocar uma imagem de fundo no documento. utilizado em conjunto com o tag BODY. Sintaxe: <BODY BACKGROUND=caminho do ficheiro de imagem>.

23

Nota: Se a imagem no existir ou o caminho estiver errado o browser no mostra o fundo pretendido.

Fontes

24

Usando o Tag <Font> e os seus atributos, size, face and color, qual o cdigo fonte para a seguinte figura:

25

Cores - As cores so introduzidas atravs do elemento <FONT>,

usando o sistema RGB para cores (da mesma forma que vimos para cores de documentos), como mostrado no exemplo a seguir: <FONT COLOR="red"> Texto </FONT>

Produzir na pgina: a palavra Texto escrita na cor vermelha. Assim, um trecho de texto pode ter uma cor diferente da definio geral de cores, feita atravs dos atributos de <BODY>.

Tamanho - Veja a formatao a seguir:

<FONT SIZE=3> Texto </FONT> Produzir na pgina: a palavra Texto como o tamaho 3.

Fontes - Uma evoluo que permite a escolha da fonte para os

textos, o atributo FACE: <FONT FACE="Arial"> Texto </FONT>
26

Produzir: a palavra Texto com a fonte (tipo de letra) Arial

Cdigo de Cores
Definio da cor em HTML: # rrggbb em que: rr representa a quantidade total de Red gg representa a quantidade total de Green bb representa a quantidade total de Blue
Cdigo Padro RGB Este e o padrao de cores utilizado nos nossos monitores e televisores

27

Criando Cdigo de Cores

Definio da cor em HTML: estrutura = # rrggbb Ex: Usando cor de fundo na sua pagina <body bgcolor=#0000ff> O codigo da cor e dada no Sistema Hexadecimal, ou seja 0123456789ABCDEF Composta por 16 digitos onde 0 e o nada e F e o Nota: maximo.
Esse cdigo pode ser gerado fazendo uso do programa Paint do windows ou ainda podemos utilizar o Cpick (HTML Color Picker), para o obter.
28

Criando Cdigo de Cores atravs do Paint

Escolhe-se a cor que se quer aplicar Escolhe-se tonalidade da cor, mais clara ou mais escura. Repara na quantidade de cor Red, Green and Blue que essa cor tem e os numeros referentes serao convertidos para sistema Hexadecimal

29

Inserindo uma Linha divisria

TAG <HR> Insere uma linha horizontal no Browser. HR Horizontal Line Sintaxe: <HR WIDTH=n% ALIGN=posio SIZE=n NOSHADE COLOR=#RRGGBB> SIZE=n - Grossura da linha horizontal WIDTH=% - Define o quanto da tela a linha vai ocupar (largura). Pode ser tambem em numero ALIGN=xxx - Alinhamento COLOR=#rrggbb - Cor da linha (alguns navegadores no a exibem...) NOSHADE - Linha slida... Sem efeitos Ex: <HR SIZE=7> insere uma linha de largura 7 (pixels): <HR WIDTH=50%> insere uma linha que ocupa 50% do espao horizontal disponvel: <HR WIDTH=30% ALIGN=RIGHT NOSHADE> insere uma linha de comprimento 30% (do espao horizontal disponvel), alinhada direita, sem efeito tridimensional: <HR SIZE=70 WIDTH=2 ALIGN=LEFT> insere uma linha de largura 70 (pixels), comprimento 2 (pixels), alinhada esquerda (o Netscape,

30

<BLOCKQUOTE> </BLOCKQUOTE>

Edentao (Recuo). Texto fica com mais margem na esquerda e direita. Quanto mais repetido o comando, mais o texto fica edentado.

31

Comandos de formatao Fsica

<HTML> <HEAD> <TITLE>FORMATAO FSICA</TITLE> </HEAD> <BODY> <B> TEXTO EM NEGRITO </B><BR> <BIG> TEXTO EM FONTE MAIOR </BIG><BR> <BLINK> EXIBE TEXTO PISCANDO </BLINK> <BR> <I>TEXTO EM TALICO </I><BR> <U>EXIBE O TEXTO SUBLINHADO </U><BR> <SMALL>TEXTO EM FONTE MENOR </SMALL><BR> <STRIKE>TEXTO RISCADO </STRIKE><BR> <SUB>TEXTO EM SUBSCRITO </SUB><BR> <SUP>TEXTO SOBRESCRITO </SUP><BR> <TT>EXIBE O TEXTO USANDO FONTE EM TAMANHO FIXO</TT> </BODY> </HTML>
32

Aula 15-01-2014
Listas Imagen s

Criando Listas em documento HTML

A linguagem HTML contm elementos que permitem criar listas de definies, listas ordenadas e listas no ordenadas como os que so utilizados nos aplicativos de edio de textos.

Tipos de Listas 1. Listas Ordenadas (<OL>) a. Atributos de OL 2. Listas no Ordenadas (<UL>) a. Atributos de UL 3. Listas de Definio

34

Criando Listas em documento HTML 1. Listas ordenadas

Listas ordenadas so tambm denominadas listas numeradas, pois, quando um navegador encontra uma TAG, iniciando uma lista ordenada, ele passa a mostrar cada item utilizando nmeros, como 1, 2, 3, e assim sucessivamente.

TAG <OL> </OL> Ordered List

Toda Lista possui itens

TAG <LI> </LI>, onde LI significa List Item

marca inicio de uma lista lista cada um dos itens da lista a <OL> ordenada ser criada <LI> Termina a lista </OL> ExempLo: Lista Meses do Ano <ol> <li> Janeiro </li> <li> Fevereiro </li> <li> Maro </li> </ol>

35

Criando Listas em documento HTML Atributos de Listas ordenadas

Type:

indica tipo de caractere que far a marcao [i|I|a|A|1] Start: indica onde deve comear a numerao ou as letras da lista. [valor] Cdigo em Html

Ex:

1. Primeiro item h. Sub-item 2. Segundo item 3. Terceiro item

36

<ol> <li> Primeiro Item </li> <ol type=a start=8> <li> Sub-item</li></ol> <li> Segundo Item </li> <li> Terceiro Item </li> </ol>

Criando Listas em documento HTML 2. Listas No ordenadas (numerada)

Listas no ordenadas so muito parecidas com as ordenadas. A nica diferena o fato de elas no definirem explicitamente uma ordem, como no caso as numeradas. Eles so formados por smbolos, que podem ser bola, quadrado, e uma bola vazia. Elas so iniciadas com a TAG <UL> e so respectivamente terminadas com </UL>. E seus elementos so que nem as numeradas: com <LI>.

TAG <UL> </UL> Unordered List TAG <LI> </LI>, onde LI significa List Item
<UL> <LI> </UL> ExempLo: Lista Meses do Ano <ul> <li> Janeiro </li> <li> Fevereiro </li> <li> Maro </li> </ul>

37

Criando Listas em documento HTML Atributos de Listas No ordenadas

Type:

(tipo de caractere que far a marcao [square|circ|disc]

Sintaxe:

Onde:
<UL>: incio da lista pontuada;

<UL TYPE=formato: o formato do marcador pode TYPE=formato> ser: - disc: o marcador um ponto (padro <LI> Tpico 1 utilizado pelos navegadores, no precisa indicar) - square: o marcador um quadrado <LI> Tpico 2 - circle: o marcador um crculo <LI> Tpico 3 <LI>: tpicos da lista, no necessrio encerrar com a TAG </LI>; </UL> </UL>: fim da lista pontuada
38

Exemplo de Lista no Ordenada

<HTML> <HEAD> <TITLE>Criando Listas em HTML</TITLE> </HEAD> <BODY> <H3>Lista No Ordenada - Tipo Predefinio / Disc </H3> <UL> <LI>Tpico 1</LI> <LI>Tpico 2</LI> <LI>Tpico 3</LI> </UL> </BODY> </HTML>
39

Criando Listas em documento HTML

Listas Intercaladas
Podem ser utilizadas para criar listas hierarquicas, juntando listas ordenadas e no numeradas. utilizado para melhor organizar a estrutura de tpicos.
Exemplo

1. Informtica i. Hardware A. Dispositivos de Entrada o Teclado o Rato o Scaner o Leitor cdigo Barra B. Dispositivos de Saida Monitor a) CRT b) LCD Impressora Colunas de Som C. Mistos Pen drive Aparelhos Multifunes ii. Software I. Sistema Operativo 40 II. Outros Aplicativos

Imagens

Inserindo Imagens em HTML

Imagens Grficas
Actualmente a maioria dos browsers exibe imagens, porm no qualquer tipo de arquivo imagem que deve ser inserido em HTML. Os formatos mais aceitos na web so GIF e JPEG. GIF e JPG

O formato GIF (Grafics Interchange Format) pode ser utilizado em diferentes plataformas de Hardware (PC e Macintosh), suporta no mximo 256 cores e gera arquivos menores, com extenso .gif. este formato muito utilizado para desenhos e grficos.
O formato JPEG (Joint Photographic Engineering Group) suporta 16 milhes de cores e pode reduzir o tamanho de uma imagem at dez vezes. Gera arquivos com a extenso .jpg e .jpeg muito utilizado para fotos. Utilizar imagens de dimenses pequenas, gravadas no formato JPEG (no caso de fotografias) ou GIF (melhor para desenhos, em preto-e-branco ou com poucas cores).

42

Inserindo Imagens em HTML

Pxel (ou Pixel) - a juno das palavras Picture e Element, ou seja, elemento de imagem - o menor elemento num dispositivo de exibio (como por exemplo um monitor), ao qual possvel atribuir-se uma cor. De uma forma mais simples um pixel o menor ponto que forma uma imagem digital, sendo que o conjunto de milhares de pixels formam a imagem inteira.

Num monitor colorido cada Pixel composto por um conjunto de 3 pontos: verde, vermelho e azul. Nos melhores monitores cada um destes pontos capaz de exibir 256 tonalidades diferentes ( o equivalente a 8 bits).

43

Inserindo Imagens em HTML

Para inserir uma imagem em uma pgina web utilizamos a tag <img src> e seu atributos <img src=nome do arquivo.extenso> Sintaxe: <img src=endereo da imagem.extenso WIDTH=n% HEIGHT=n% ALIGN=posio ALT=mensagem BORDER=n>

44

Onde: WIDTH Define a largura da imagem, o que pode ser feito em pixels (nmero absoluto) ou em percentual da tela (com o smbolo de %) HEIGHT Define a altura da imagem, o que pode ser feito em pixels ou em n percentual da tela; ALIGN alinhamento da imagem pode ser , LEFT, CENTER e RIGHT ALT texto que ir aparecer ao passar o rato sobre a imagem ou texto que surgir caso a imagem no possa ser visualizada; BORDER especificao da largura da borda da imagem. Valor em pixel. VSPACE especifica o espao que deve ser deixado acima e abaixo da imagem. (dado em pixel) HSPACE especifica o espao que deve ser deixado nas laterais da imagem. (dado em pixel)

Ciar/ Guardar Imagem com extenso .gif e .jpg

Atravs do Paint - seleccionar a imagem e com boto direito do mouse na imagem escolher a opo abrir com - Escolher o programa Paint - No menu Ficheiro, seleccionar Guardar Como - Na janela visualizada, na caixa Guardar com o tipo:, seleccionar a opo desejada podendo ser jpeg ou gif.

Usando a tecla Print Screen - pressionar a tcla quando preciso e aceder ao programa Paint do windows; - Ao abrir novo documento de imagem precionar CTRL+V, boto direito do rato e escolher opo COLAR ou ainda no menu EDITAR escolher opo COLAR; - Usando alguns recursos do programa, tais como CORTAR, podemos determinar o resultado final para a nossa imagem. - e depois s seguir os passos de GUARDAR COMO, como j explicado acima.

45

17-Jan-2014

Tabelas em HTML
As tabelas so muito importantes para o designer de uma home-page. Com elas pode-se fazer alinhamentos que dificilmente seriam possveis com simples comandos. A funcionalidade de uma tabela faz com que um determinado site tenha um aspecto mais profissional e o utilizador possa navegar de forma mais eficiente, pois os objectos podem estar melhor posicionados na home-page.

Comandos para se criar uma tabela

O comando para se inserir uma tabela <TABLE>; para iniciar uma linha devemos introduzir a tag <TR> e para uma clula (alguns preferem dizer coluna) <TD>. Todos estes comandos so encerrados como </TABLE>, </TR> e </TD>respectivamente.

<HTML> <HEAD> <TITLE>Criando Tabelas</TITLE> </HEAD> <BODY> <CENTER><FONT COLOR=BLUE SIZE=6> TABELA </FONT></CENTER><BR> <TABLE BORDER=1> <TR> <TD>PRIMEIRA COLUNA </TD> <TD>SEGUNDA COLUNA </TD> <TD>TERCEIRA COLUNA </TD> </TR> <TR> <TD> PRIMEIRA COLUNA</TD> <TD>SEGUNDA COLUNA </TD> <TD>TERCEIRA COLUNA </TD> <TR> </TABLE> </BODY> </HTML>

- Alterando a largura da clula Para alterar o largura de uma clula da tabela basta acrescentar o parmetro WIDTH dentro da tag <TD>. Exemplo1: <TABLE BORDER=2> <TR> <TD WIDTH=100> WIDTH=100 </TD> <TD ALIGN=MIDDLE WIDTH=200>WIDTH=200 (PIXELS) </TD> </TR> </TABLE> O parmetro WIDTH pode receber dois tipos de valores, em pixels como no exemplo acima ou em percentagem, como mostrado no exemplo a seguir. Tambm dentro da tag <TD> vemos um outro parmetro que VALIGN=MIDDLE, este parmetro tem por funo alinhar o contedo da clula no meio da mesma, ou seja, dentro da clula as frases so alinhadas com relao ao seu centro. Exemplo2: <TABLE BORDER=2> <TR> <TD WIDTH=25%> WIDTH=25% </TD> <TD ALIGN=MIDDLE WIDTH=75%> WIDTH=75% </TD> </TR>

Inserindo cor de fundo e separao de clulas

Outro atributo que podemos ter nas tabelas mudar a sua cor de fundo, isto se torna particularmente til quando se quer dar destaque a uma clula em especial. Vejamos um exemplo: <TABLE BORDER=0> <TR> <TD WIDTH=150 BGCOLOR=RED> VERMELHO </TD> <TD WIDTH=150 BGCOLOR=BLUE> AZUL </TD> <TD WIDTH=150 BGCOLOR=RED> VEMELHO </TD> </TR> <TR> <TD WIDTH=150 BGCOLOR=BLUE> AZUL</TD> <TD WIDTH=150 BGCOLOR=RED> VEMELHO</TD> <TD WIDTH=150 BGCOLOR=BLUE> AZUL</TD> </TR>

No exemplo anterior ns colocamos BORDER=0 e as clulas apareceram coloridas, mas com um certo espaamento entre elas, para tirarmos este espao devemos acrescentar dentro da tag <TABLE> o parmetro CELLSPACING=0. Este parmetro elimina por completo os espaos entre as clulas. <TABLE BORDER=0 CELLSPACING=0> <TR> <TD WIDTH=150 BGCOLOR=RED>VERMELHO </TD> <TD WIDTH=150 BGCOLOR=BLUE>AZUL </TD> <TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD> </TR> <TR> <TD WIDTH=150 BGCOLOR=BLUE>AZUL</TD> <TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD> <TD WIDTH=150 BGCOLOR=BLUE> AZUL</TD> </TR> </TABLE>

Estes so muito importantes dentro da tag <TABLE>. So eles que nos Osatributos atributos COLSPAN e ROWSPAN possibilitam remodelar a disposio das clulas dentro da tabela. Vejamos um exemplo prtico:
<TABLE BORDER =2 CELLPADDING=2> <TR> <TD COLSPAN=2>Exemplo do uso do COLSPAN</TD> <TR> <TD>CLULA 1</TD> <TD>CLULA 2</TD> </TR> </TABLE>

Neste exemplo vemos que na tag <TD> foi introduzido o parmetro COLSPAN. Este parmetro tem a finalidade de dizer que sob a clula onde ele foi introduzido podemos ter um certo nmero de colunas. Logo, se voc quiser que uma clula ocupe uma nica linha, como no nosso exemplo, voc deve inserir o parmetro dentro da tag <TD> desta clula. A quantidade de clulas que viro em baixo da clula que recebeu o atributo COLSPAN deve ser de acordo com o nmero especificado no parmetro. Mas se quisermos definir uma nica clula ocupando uma coluna inteira ? Neste caso usamos o atributo ROWSPAN. Exemplo:
<TABLE BORDER=2 CELLPADDING=2> <TR> <TD ROWSPAN=2>Exemplo do uso do ROWSPAN</TD> <TD>CLULA 1</TD></TR><TR> <TD>CLULA 2</TD> </TR> </TABLE>

Usando tabelas como molduras

Um outro uso bastante interessante de tabelas como moldura para alguma figura. Para isto basta voc iniciar uma tabela e definir um valor para BORDER. Exemplo: <TABLE BORDER=5> <TR> <TD> <IMG SRC=NOME DA FIGURA> </TD> </TR> </TABLE>

Imagem de fundo nas tabelas

<TABLE BACKGROUND=nome da imagem" BORDER=5> <TR> <TD><H1>Que tal um mergulho agora ? </H1></TD> </TR> </TABLE>

Links

Links so os pontos clicveis do documento HTML que levam a qualquer outro documento da sua pgina ou site na Internet. Podemos fazer links internos, para documentos no mesmo servidor, links externos para qualquer lugar na Web, ou at mesmo links para um mesmo ponto dentro de uma pgina. Ambos dependem da tag: <a href="nome-do-lugar-a-ser-levado">descrio</a> "Nome-do-lugar-a-ser-levado" voc coloca o ficheiro html que voc quer que seja visitado, por exemplo dados.htm ou por um URL como http://www.starmedia.com;

"Descrio" o que vai aparecer sublinhado na pagina indicando que pode ser clicado. Por exemplo, se a descrio fosse "Clique aqui para visitar a StarMedia", voc colocaria este cdigo:
<a href="http://www.starmedia.com">Clique aqui para visitar a StarMedia </a>

Tambm existem os links para fazer com que as pessoas enviem um email. Se voc quer um lugar para os utilizadores deixarem um email, faa assim: <a href="mailto:seu email">Deixe um email para mim ! </a> Dica: Se voc quiser colocar um link para uma outra pgina dentro da sua pagina, voc no precisa colocar todo o endereo como http://orbita.starmedia.com/seunome/pagina.html. Basta apenas colocar o nome do arquivo e, pronto, ficaria assim: <a href="pagina.html">Este um link para uma pgina no seu site </a> Como fazer um link abrir em outra janela? possvel que voc queira colocar um link em sua pgina que abra em uma outra janela para que o visitante no saia do seu site, por exemplo, colocar um link para uma pagina fora do site. Fazer isso muito simples. Basta incluir um atributo "TARGET" (alvo), assim:
<a href="http://www.starmedia.com" target="_blank" >Clique aqui para visitar

Como fazer uma imagem ter um link Voc pode fazer com que uma imagem possa ter um link. bem simples. Na tag de link, em vez de colocar o texto com a descrio, coloque a tag de imagem. Veja:
<A HREF="nome-do-lugar-a-ser-levado"> <IMG SRC="nome do arquivo de imagem que vai aparecer"> </A> Em "nome-do-lugar-a-ser-levado" voc coloca o ficheiro html que voc quer que seja visitado, por exemplo, dados.htm ou um URL como http://www.starmedia.com. Em "nome do ficheiro de imagem que vai aparecer" voc deve colocar o nome correto da imagem que vai estar na pgina, por exemplo, "foto.gif".

Veja um exemplo de imagem com link:

<A HREF="http://www.starmedia.com/orbita"><img src="orbita.gif" width="100" height="75" alt="Esta imagem tem um link para a StarMedia Home Pages" border="1"></a>

Repare que, alm da tag "comum" de imagem, colocamos outros atributos como "border=1" (borda da imagem) , tamanho e o texto alternativo.

1. Links para mesmo directrio

Exemplo1: Links.htm <HTML> <HEAD> <TITLE> Curso de HTML - Links</TITLE> </HEAD> <BODY> <H3>Link Para Pgina Local</H3> <A HREF="Link_Local.htm">Clique aqui</A> para ver a pgina Link_Local.htm </BODY> </HTML> Exemplo2: Link_Local.htm <HTML> <HEAD> <TITLE> Curso de HTML - Links</TITLE> </HEAD> <BODY> <H3>Link Para Pgina Local</H3> <A HREF="Links.htm">Clique aqui</A> voltar pgina Links.htm </BODY> </HTML>

60

Exerccio Proposto
1. Criar uma Pasta de Nome EXERCICIOS REALIZADOS 2. Dentro dessa pasta dever constar todos os exerccios realizados at agora (Ex: Exer1, Exer2, Exer3,) 3. Tambm dentro da pasta dever estar uma nova pgina web de nome PGINA PRINCIPAL. 4. Na Pgina Principal dever construir links (locais) para cada exerccio realizado 1. Ex: ao criar Link, com Texto ou Imagem, relactivo ao exer1 ao fazer clique dever

Ao fazer clique em qualquer Pgina Principal retornar o contedo da pgina do exer1 e assim por diante. uma das opes assim teremos o resultado esperado Ver Exerccio 1
Ver Exerccio 2 Ver Exerccio 3 Ver Exerccio 4 Ver Exerccio 5 Ver Exerccio 6

61

Interligando Documentos - LINKS

2. Links para outros directrios e pastas
Para criar links para uma pgina localizada em outros directrios (Pastas), necessrio indicar o caminho completo do arquivo (ficheiro). Regras de directorios na Web: a barra utilizada para separar directrios a barra convencional (/); o ponto de partida para localizar um arquivo em outro directrio o actual; Para baixar um nvel deve utilizar os sinais ../; Sintaxe (exemplo): <A HREF=directrio/nome do arquivo.extenso> Texto ou Imagem </A> Ou <A HREF=../directorio/nome do ficheiro.extensao>Texto ou Imagem</A> Exemplo: Imagine a seguinte estrutura de diretrios: C:\HTML\Aulas\Links.htm C:\HTML\Link_Home.htm

62

Exemplo: Links.htm <HTML> <HEAD> <TITLE>Curso de HTML - Links</TITLE> </HEAD> <BODY> <H3>Link Para Pgina Local</H3> <A HREF="Link_Local.htm">Clique aqui</A> para ver a pgina Link_Local.htm <BR> <H3>Link Para Pgina Que est um nvel acima</H3> <A HREF="../Link_Home.htm">Clique aqui</A> para ver a pgina ../Link_Home.htm <BR> <H3>Link Para Pgina Que est um nvel abaixo</H3> <A HREF="Distante/Link_Distante.htm">Clique aqui</A> para ver a pgina Distante/Link_Distante.htm </BODY> </HTML>

63

Exemplo: Pagina_Home.htm <HTML> <HEAD> <TITLE>Curso de HTML - Links</TITLE> </HEAD> <BODY> <H3>Pgina em Home</H3> Esta pgina est um nvel de diretrio acima que a pgina onde foi criado o link. <BR> <A HREF="Aulas/Links.htm">Clique aqui</A> para voltar a pgina Links.htm </BODY> </HTML> Exemplo: Pagina_Distante.htm <HTML> <HEAD> <TITLE>Curso de HTML - Links</TITLE> </HEAD> <BODY> <H3>Pgina Distante</H3> Esta pgina est um nvel abaixo do diretrio da pgina onde foi criado o link. <BR> <A HREF="../Links.htm">Clique aqui</A> para voltar a pgina ../Links.htm </BODY> 64 </HTML>

Interligando Documentos - LINKS

3. Links para E-Mail
Para criar um link para um e-mail preciso informar o endereo eletrnico na tag de link. Exemplo: <A HREF=mailto:aleckssandro@hotmail.com>aleckssandro@hotmail.co m</A>

65

Interligando Documentos - LINKS

4. Links para arquivos de outros Servidores
Para criar um link para arquivos localizados em qualquer parte do mundo necessrio a URL do arquivo (ficheiro). URL a abreviatura de Uniform Resource Locator. Tem a funo de especificar a localizao de pginas ou arquivos em servidores da Web, composta de duas partes; O protocolo Internet do documento; O endereo do servidor da pgina. Sintaxe (exemplo): <A HREF=protocolo://servidor.arquivo> Texto ou Imagem </A>

66

Onde protocolo: o tipo de servidor que est sendo acessado. HTTP, FTP, etc; servidor: o computador que contm o arquivo;

Interligando Documentos - LINKS

4. Links para arquivos de outros Servidores
Exemplos: <A HREF=ftp://www.empresa.com.br/docs/curriculo.doc>Curriculo</A> <A HREF=http://www.empresa.com.br/index.htm>Empresa X</A>

67

Interligando Documentos - LINKS

5. Links para mesma pagina
Para criar um link para a mesma pgina preciso definir sees na pgina. Cada seo ter um nome que servir de referncia para o link. Para isso, preciso criar uma ncora no incio de cada seo que ser acessada. Uma ncora um ponto de referncia ou endereo. Ela utilizada para marcar o incio de cada seo. O nome da ncora ser utilizado pelo link que a acessar.
Para Criar ncora: <A NAME=Nome da Seo>Texto</A> Onde: NAME=Nome da Seo: Cria o nome da seo, marcando o incio da mesma. Texto: No necessrio definir nada. Para Linkar ncora: <A HREF=#Nome da Seo>Texto</A> Onde:

68

Exemplo: Links_Ancoras.htm <A HREF="#Inicio">Clique aqui para <HTML> voltar ao incio da pgina</A><BR> <HEAD> <BR><BR><BR><BR> <TITLE>Curso de HTML - Links <A NAME="Seo2"></A> ncoras</TITLE> <H3>ncoras:</H3> </HEAD> As ncoras so criadas para definir o <BODY> incio de cada seo que servem como <A NAME="Inicio"></A> referncia para os links.<BR> <H2>Exemplo de links para sees de <A HREF="#Inicio">Clique aqui para uma Pgina:</H2> voltar ao incio da pgina</A><BR> <!-- Aqui esto os links --> <BR><BR> <A HREF="#Seo1">Seo</A><BR> Este espao foi criado para separar as <A HREF="#Seo2">ncoras</A><BR> sees da pgina. <A HREF="#Seo3">Links</A><BR> <BR><BR> <BR><BR><BR><BR> <A NAME="Seo3"></A> <!-- Aqui esto as sees --> <H3>Links:</H3> <A NAME="Seo1"></A> Os links so ligaes para outras <H3>Seo:</H3> pginas ou sees de uma mesma Seo uma parte de uma pgina.<BR> pgina.<BR> As sees normalmente so utilizadas <A HREF="#Inicio">Clique aqui para como captulos de um livro.<BR> voltar ao incio da pgina</A><BR> </BODY> </HTML>

69

Interligando Documentos - LINKS

Basta referenciar um arquivo com a extensao *.EXE, *.ZIP E ao clicar no link aparecera:

6. Links de disposio de arquivos para downloads

70

Tabelas Simples
Como padro uma tabela no possui bordas (limites). Cada linha da tabela definida separadamente e possvel modificar a aparncia da tabela, utilizando alguns atributos que veremos mais adiante.

O nmero de TR define o nmero de linhas na tabela e o nmero de TD (dentro da TAG TR) define o nmero de colunas da tabela.
Sintaxe:
<TABLE> <TR> <TH>Cabealho da Tabela</TH> <TD>Dados da Tabela</TD> </TR> </TABLE>

71

Onde: <TABLE></TABLE>: TAGs de incio e fim de tabela. <TR></TR>: define cada linha da tabela; <TH></TH>: define o cabealho da tabela. uma clula da tabela; <TD></TD>: define os dados da tabela. uma clula na tabela; Dados da Tabela: podem ser texto, imagens e links; Cabealhos da Tabela: cabealhos com texto, imagens ou links.