Fase WebSite

Fase

WebSite
Introduo Linguagem HTML

Pgina: 1

Fase WebSite

SUMRIO
Introduo..........................................................................................................................3 World Wide Web................................................................................................................4 A Linguagem HTML...........................................................................................................5 Entendendo a Linguagem HTML......................................................................................6 Listagem 1.1..............................................................................................................6 Listagem 1.2..............................................................................................................7 Listagem 1.3..............................................................................................................9 Alinhando o texto.............................................................................................................10 Listagem 1.4............................................................................................................11 Formatao de Estilos.....................................................................................................12 Listagem 1.5............................................................................................................13 Tabela de Cores..............................................................................................................15 Listas numeradas e marcadas........................................................................................16 Listagem 1.6............................................................................................................16 Listagem 1.7............................................................................................................18 Listagem 1.8............................................................................................................20 Definindo o corpo da pgina...........................................................................................21 Listagem 1.9............................................................................................................21 Listagem 1.10..........................................................................................................24 Imagens...........................................................................................................................25 Listagem 1.11..........................................................................................................27 Listagem 1.12..........................................................................................................28 Tabelas............................................................................................................................30 Listagem 1.13..........................................................................................................30 Listagem 1.14..........................................................................................................31 Alinhamentos de Tabelas e suas clulas........................................................................32 Listagem 1.15..........................................................................................................32 Cor de Fundo de Tabelas e suas clulas.......................................................................33 Links.................................................................................................................................36 Listagem 1.16..........................................................................................................37

Pgina: 2

Fase WebSite

Introduo
Mais que um modismo, a Internet tornou-se um fenmeno. Conectando mais de um milho de computadores e cerca de 40 milhes de usurios, espalhados em 90 pases, valores estes que mudam a cada dia. Sem dvida no dar para ficar de fora desta teia. A Internet, para ns, tornou-se um meio imprescindvel para Comunicao. Atualmente, ela tambm pode ser entendida como um meio de encurtar as distncias: pessoas em diferentes partes do mundo conseguem se comunicar, seja por meio de texto, voz, vdeos, etc. Com ela, ainda, temos acesso servios e facilidades, como lojas virtuais, onde voc pode comprar ou vender com toda segurana, notcias e atualidades, ou, se preferir, um excelente local para encontrar amigos, jogos, bate papo e muito mais. A rede mundial de computadores foi iniciada em 1969 sob o nome de ARPANET (USA). Essa rede, que conectava quatro computadores, tinha como finalidade demonstrar as potencialidades na construo de redes, utilizando computadores dispersos (espalhados) em uma grande rea. A idia foi boa e, em 1972, 50 universidades e instituies militares j possuam conexes. Hoje uma arquitetura de software e hardware que se comunica entre si e que mantida por organizaes comerciais e governamentais. Mas, uma das principais caractersticas da Internet que esta rede no possui dono. Sendo assim, para organizar toda a troca de informaes, associaes e grupos foram institudos e, em conjunto, decidem quais so os protocolos e padres vigentes na Internet, bem como resolvem questes operacionais, visando promover os objetivos da Internet. Em tempos remotos, somente alguns privilegiados podiam acessar a Internet. Atualmente, as escolas, universidades, empresas j possuem acesso Internet. Voc, de sua casa pode ter acesso Internet de banda larga. Iniciativas governamentais promovem o acesso gratuito a Internet, por meio de quiosques e outras localizaes.

Pgina: 3

Fase WebSite

World Wide Web

As pessoas costumam descrever a Internet e a Web. Ser que so dois conceitos diferentes ou representam a mesma coisa? Existe um conceito cientfico para cada uma dessas expresses? Para entender esta srie de definies de conceitos, vamos partir do seguinte princpio: A World Wide Web (teia mundial) conhecida como WWW, uma nova estrutura de navegao pelos diversos itens de dados em vrios computadores diferentes. O modelo WWW por padro trata todos os dados da Internet como hipertexto, isto , vinculaes entre as diferentes partes do documento para permitir que as informaes sejam exploradas interativamente e no apenas de uma forma linear. Programas como Microsoft Internet Explorer, conhecidos como navegadores Web, permitem que os usurios visitem contedos elaborados em qualquer parte do mundo e, tambm, em qualquer idioma. Eles aumentaram muito a popularidade da Internet e graas as suas potencialidades, atualmente, podemos visualizar documentos formatados (cores, efeitos, etc.), escutar msica, assistir a vdeos e muito mais. Enfim, a Web, a interface grfica da Internet, pois podemos acessar a Internet, transferir arquivos (processo o qual chamamos de Upload) e realizar outras operaes bsicas sem necessitar de uma interface grfica. Para concluir, s estamos de fato usando a Web quando estamos navegando, fazendo uso das pginas Web para acessar um site. importante lembrar que todas as pginas de um site, individualmente, possuem um cdigo fonte. Esse cdigo responsvel por apresentar a pgina tal como foi pensada e elaborada por seu criado. Para a Web, a linguagem padro, compreendida por todos os navegadores disponveis chamada de HTML.

Pgina: 4

Fase WebSite

A Linguagem HTML
Para acessar um site, digitamos seu endereo na barra de endereo do navegador (browser). Em seguida, se a conexo com a Internet estiver correta, mostrado o contedo do site visitado. Esse contedo organizado em pginas, que esto organizadas em uma estrutura de links. Ao acessar essas pginas, elas podem ser visualizadas em diversas possibilidades: podem ser dinmicas, animadas, trazendo informaes, imagens, sons, vdeos. Como j comentamos, todas estas pginas possuem um cdigo fonte escrito na linguagem HTML (Hyper Text Markup Language). Porm, o que Linguagem HTML? justamente esta questo que vamos responder nesta apostila. Alm disso, ao estud-la, voc ser capaz de criar pginas para a Internet, utilizando a Linguagem HTML. Duas ferramentas so imprescindveis para que voc continue seus estudos. Portanto, faa o checklist (lista de verificao):

Programa para escrever o cdigo da Linguagem HTML (pode ser o bloco de notas ou outro editor de HTML, que desejar); Microsoft Internet Explorer.

Tudo pronto? Siga em frente!

Pgina: 5

Fase WebSite

Entendendo a Linguagem HTML

A estrutura bsica de uma pgina elaborada com o cdigo HTML mostrada abaixo na listagem 1.1. Observe que a construo de pginas exige o uso de marcadores chamados de TAGS. Veja o uso deles na listagem 1.1. Listagem 1.1
<html> <head> <title>COLOQUE AQUI O TTULO DA PGINA</title> </head> <body> DAQUI EM DIANTE VOC DESENVOLVE SUA PGINA </body> </html>

No exemplo acima, veja que foram utilizadas TAGs, que permitem demarcaes, ou seja, elas sempre estaro ANTES DE ALGUMA COISA E APS ALGUMA COISA. Veja a seguir um exemplo de uso das TAGs acima. Exemplo: <title>EDITORA ERICA</title> CONCEITO DAS TAGS MENCIONADAS ACIMA TAG <html> <head> <title> <body> O QUE FAZ Marca o incio e o fim do documento HTML. Com ela, voc inicia e finaliza a construo da pgina Web. Marca o incio e do fim do cabealho, ou seja, a rea onde sero descritos cabealhos e o ttulo da pgina Marca o incio e o fim do ttulo do cabealho. O ttulo da pgina aparecer na barra superior do browser. Marca o incio e o fim do corpo da pgina.

VAMOS PRATICAR?
Pgina: 6

Fase WebSite

Siga passo a passo o procedimento a seguir para criar sua primeira pgina. Mas, inove! Tente outros exemplos e, se tiver dvidas, procure seu tutor on-line! 1. Abra o Bloco de Notas.
a. Se voc estiver utilizando o Windows XP, siga o caminho:

Iniciar -> Programas/Acessrios/Bloco de Notas.

b. Se voc estiver utilizando o Windows Vista, siga o caminho:

Iniciar/Todos os Programas/Acessrios/Bloco de Notas.

2. Digite o cdigo da Listagem 1.2, que se encontra logo abaixo. Aps digit-lo,

salve o arquivo na pasta Meus Documentos com o nome exemplo1.html. Listagem 1.2
<html> <head> <title>Minha Primeira Pgina HTML</title> </head> <body> Aqui, neste espao, desenvolverei minha pgina! Aguarde!! </body> </html>

Preciso de ajuda! Como visualizo minha pgina?

1. Depois de digitar o cdigo da Listagem 1.2 no Bloco de Notas, abra o nenu

Arquivo e escolha Salvar. 2. Na janela que aparecer, faa as seguintes tarefas: a. Para o Windows XP:
i. Na opo Salvar como, selecione a pasta onde deseja salvar, no

caso Meus Documentos.

ii. Na opo Nome do arquivo, digite o nome do arquivo

exemplo1.html, incluindo a extenso do mesmo.

iii. Clique no boto Salvar.

Pgina: 7

Fase WebSite

b. Para o Windows Vista:

i. Na opo Salvar como, selecione a pasta onde deseja salvar, no

caso Documentos.
ii. Na opo Nome do arquivo, digite o nome do arquivo

exemplo1.html, incluindo a extenso do mesmo.

iii. Clique no boto Salvar.

3. Para ver o resultado deste exemplo abra o Internet Explorer e na barra de endereo

digite C:\Meus documentos\exemplo1.html, se voc estiver utilizando o Windows XP ou digite C:\Users\<usurio>\Documents\exemplo1.html, se voc estiver utilizando o
Windows Vista.

Pgina: 8

Fase WebSite

VAMOS APRENDER MAIS UM POUCO?

Em alguns momentos se faz necessrio comentar alguns trechos do cdigo HTML para facilitar a leitura e a manuteno da pgina. Neste caso, adicionamos comentrios nos cdigos, ou seja, palavras ou frases que no so exibidas no navegador, apenas so vistas quando estamos trabalhando no cdigo fonte. Na listagem 1.3, faremos um novo exemplo e apresentaremos novas TAGs. Digite a listagem 1.3 abaixo e salve com o nome exemplo2.html na pasta Meus Documentos. ATENO: Salve sempre os seus exemplos na pasta Meus Documentos ou Documentos. O processo para salvar o mesmo realizado para o Exemplo1, troque apenas o nome do arquivo. Na dvida veja o exemplo 1! Listagem 1.3
<!--Incio do Documento HTML--> <html> <head> <title>Melhorando Minha Primeira Pgina</title> <meta name="author" content="NMBS Informtica"> <meta name="keywords" content="html, homepages"> </head> <!--Incio do Corpo da Pgina--> <body> <h1>Este o ttulo Principal</h1> <h2>Este o ttulo Secundrio</h2> <h3> Estou adorando criar pginas</h3> <hr>
<p>Este o 1 Primeiro Paragrfo <br> Esta 2 Linha do 1 Paragrfo <p>Com este recurso inicio um paragrfo<br> E Com este recurso quebro uma linha

<hr> <!-- Fim do Corpo da Pgina --> </body> </html> <!-- Fim do Documento HTML-->

Para ver o resultado deste exemplo abra o programa Internet Explorer e na barra de endereo digite C:\Meus documentos\exemplo2.html ou C:\Users\<usurio>\Documents\exemplo2.html. Veja a figura a seguir:
Pgina: 9

Fase WebSite

CONCEITO DAS TAGS MENCIONADAS ACIMA TAG <! contedo--> <meta> O QUE FAZ Insere comentrios nas pginas Marcas Metas. Servem para voc especificar o autor, palavraschaves, descrio da pgina. Dentro do tag<meta>, tem os comandos name e o content. No comando name voc especifica que informao voc quer dar, e no <hn> content voc descreve a informao. Marca um ttulo. Sendo que n representa um valor que pode ser de 1 a 6, o tamanho muda de forma decrescente, ou seja, o nmero 1 o <hr> <p> <br> maior tamanho do ttulo. Insere uma linha horizontal Marca um pargrafo e acrescenta uma linha em branco. Insere uma quebra de linha

Agora que voc viu o resultado do exemplo2.html, vamos passar para o prximo exerccio.

Alinhando o texto
Da mesma forma como alinhamos o texto em documento criando no Word, por exemplo, os textos das pginas HTML tambm necessitam de um alinhamento e de diagramao do texto.

Pgina: 10

Fase WebSite

O alinhamento padro configurado nos navegadores esquerda, assim como o no Word. Para entender como possvel realizar esta tarefa, digite a Listagem 1.4, e salve como exemplo3.html, e acompanhe o conceito de TAG que marcam o alinhamento dos ttulos e pargrafos nas pginas. Listagem 1.4
<html> <head> <title>Tags para Alinhamentos</title> </head> <body> <h4 align=center>Ttulo Centralizado</h4> <h4 align=right>Ttulo Direita</h4> <h4 align=left> Ttulo Esquerda<h4> <hr> <p align=center>Pargrafo ao Centro <p align=right>Pargrafo a direita <p align=left>Paragrfo a esquerda <p align=justify>Este um texto justificado. Na linguagem HTML, temos vrios tipos de alinhamentos que voc poder aplicar em sua pgina. Nesta parte, veremos como alinhar linhas, pargrafos e cabealhos. <br> <br> <hr width=50% align=center> <blockquote>Texto com mais margem</blockquote> <blockquote><blockquote>Tem com mais margem ainda </blockquote> </blockquote> </body> </html>

Para ver o resultado deste exemplo abra o programa Internet Explorer e na barra de endereo digite C:\Meus documentos\exemplo3.html ou C:\Users\<usurio>\Documents\exemplo3.html. Veja a figura a seguir:

Pgina: 11

Fase WebSite

CONCEITO DAS TAGS MENCIONADAS ACIMA TAG <center> align=center, right, left ou justify O QUE FAZ Alinha o trecho (texto, imagem ou tabela ao centro) Atribudos dentro do tag <p> que marca o incio de um pargrafo modificam o alinhamento do ttulo. Center= alinha ao centro Right = alinha a direita Left = alinha a esquerda <blockquote> <hr> Justify = faz a justificao do pargrafo. Adiciona uma margem de cerca de um centmetro Atributos Size = define a altura da linha. Exemplo: <hr size=50> Width = define a largura da linha horizontal. Exemplo: <hr width=200>ou <hr width=50%> Noshade = desenha a linha sem a sombra para dar o efeito de trs dimenses. Exemplo: <hr noshade>

Formatao de Estilos

Pgina: 12

Fase WebSite

A cada exemplo desenvolvido, perceba que suas pginas esto incrementando. Neste prximo exemplo, trabalharemos com a formatao das letras bem como cor, tamanho de fonte, estilo. Bem, preparado? Vamos l novamente para mais um estudo! Para entender isto, digite a listagem 1.5, e salve como exemplo4.html. Listagem 1.5
<html> <head> <title>Formatando Estilos</title> </head> <body> <center>Mudando o Estilo dos Caracteres</center> <p> <b>Texto em Negrito</b><br> <i>Texto em Itlico</i><br> <u>Texto sublinhado</u><br> <tt>Texto Monoespaado</tt><br> <br><font color=red>Texto em Vermelho</font> <br><font size=5>Texto em Tamanho 5</font> <br><font face=verdana>Texto com a letra Verdana</font> <br><font face=arial black>Voc pode fazer combinaes</font> <br> <center> <fontcolor=blue face=verdana size=5><b>Editora rica</b></font> </center> <br>Voc poder os atributos para cada tipo de letra! <br> <font color=blue size=6>E</font> <font color=red size=4>ditora rica</font> <br> <pre> Estamos progredindo no curso de HTML. Este tag permite que todos os espaos feitos no cdigo fonte sejam respeitados. Certo? </pre> </body> </html>

Pgina: 13

Fase WebSite

Para ver o resultado deste exemplo abra o programa Internet Explorer e na barra de endereo digite
C:\Meus documentos\exemplo4.html

ou

C:\Users\<usurio>\Documents\exemplo4.html . Veja a figura a seguir:

CONCEITO DAS TAGS MENCIONADAS ACIMA TAG <b> <i> <u> <tt> <font> O QUE FAZ Coloca o texto em negrito Coloca o texto em itlico Coloca o texto sublinhado Coloca o texto em fonte monoespaada. (fonte Courier,como mquina de escrever) Modifica a formatao do texto. Atributos: Size = define o tamanho da letra. Ex: <font size=5>Texto</font> Face = define o estilo da letra. Ex: <font face=verdana>Texto</font> <pre> Color = define a cor da letra. Ex:<font color=red>Texto</font> Marca um trecho formatado com fonte monoespaada. A formatao com

espaos e entrada de pargrafos respeitada. <basefont> Modifica a formatao padro do texto. Ex: <basefont size=5>

Pgina: 14

Fase WebSite

Tabela de Cores
Voc percebeu que as cores e as fontes obedecem ao idioma ingls, no entanto, as cores da fonte podem ser adicionadas por meio do nome ou de seus respectivos cdigos. Relacionamos abaixo algumas cores para colorir e diversificar sua pgina. Veja a tabela abaixo:

Pgina: 15

Fase WebSite

Listas numeradas e marcadas

Desta vez trabalharemos com as listas numeradas e os marcadores. Assim como em uma carta ou qualquer outro documento comum, precisamos listar tpicos atravs de smbolos ou nmeros. Para entender isto, digite a Listagem 1.6 e salve como exemplo5.html. Listagem 1.6
<html> <head><title>Listas</title> </head> <body> <h3>Isto uma lista</h3> <!-- Incio dos Numeradores> <ol> <li>Item 1 <li>Item 2 <li>Item 3 </ol> <!-- Fim dos Numeradores> <hr width=50% size=5 align=left> <!-- Incio dos Marcadores> <ul> <li>Item 1 <li>Item 2 <li>Item 3 </ul> <!-- Fim dos Marcadores> </body> </html>

Para ver o resultado deste exemplo abra o programa Internet Explorer e na barra de endereo digite
C:\Meus documentos\exemplo5.html

ou

C:\Users\<usurio>\Documents\exemplo5.html.

Veja a figura a segui:

Pgina: 16

Fase WebSite

CONCEITO DAS TAGS MENCIONADAS ACIMA TAG <ol> O QUE FAZ Marca o incio e o fim de uma lista ordenada. Recebem na primeira linha um nmero ou letra. Devem ser usados com tag <LI> Atributos Start = especifica o nmero a partir do qual os itens comeam a ser contados. Ex: <ol start=3> Type = modifica o tipo do numerador que pode ser: nmero, letras ou <ul> algarismo romano. Ex: <ol type=A> <ol type=I> Marca o incio e o fim de uma lista no ordenada, ou seja, os itens da lista recebem smbolos na primeira linha. Devem ser usados com tag <LI> Atributos Type = modifica o tipo do marcador (smbolo), que pode ser: Circle = um crculo vazio. Disc = um crculo cheio. Square = um quadrado cheio Ex: <ul type=circle> Ex: <ul type=disc> Ex: <ul type=square>

Pgina: 17

Fase WebSite

Vamos ver outros exemplos? Siga o cdigo na linguagem HTML apresentado na Listagem 1.7 e salve o arquivo como exemplo6.html. Se tiver dvidas, no hesite em procurar seu tutor on-line. Listagem 1.7
<html> <head> <title>Listas</title> </head> <body> <h3>Isto uma listagem iniciando no nmero 4</h3> <ol start=4> <li>Item 1 <li>Item 2 <li>Item 3 </ol> <h3>Isto uma listagem com letras</h3> <ol type=A> <li>Editora <li>rica <li>Livros </ol> <h3>Isto uma listagem em algarismo romano</h3> <ol type=I> <li>Editora <li>rica <li>Livros </ol> <h3>Esta 3</h3> uma listagem em algarismo romano a partir do nmero

<ol type=I start=3> <li>Editora <li>rica <li>Livros </ol> </body> </html>

Pgina: 18

Fase WebSite

Para ver o resultado deste exemplo abra o programa Internet Explorer e na barra de endereo digite
C:\Meus documentos\exemplo6.html

ou

C:\Users\<usurio>\Documents\exemplo6.html . Veja a figura a seguir:

Pgina: 19

Fase WebSite

No prximo exemplo, voc criar listagens com subnveis. Veja como fazer isso, usando o cdigo da Listagem 1.8. Salve este arquivo como exemplo7.html. Listagem 1.8
<html> <head> <title>Listas</title> </head> <body> <h3>Listagem e SubListagem</h3> <ol><!-- Incio do Numerador> <li>Item 1 <ul><!-- Incio do Marcador dentro do Numerador> <li type=disc>Item 1.1 <li type=disc>Item 1.2 <li type=disc>Item 1.3 </ul><!-- Fim do Marcador dentro do Numerador> <li> Item 2 <ul><!-- Incio do Marcador dentro do Numerador> <li type=square>Item 2.1 <ul><!--Incio do Marcador dentro do Marcador> <li type=circle>Item 2.1.1 <li type=circle>Item 2.1.2 <li type=circle>Item 2.1.3 </ul><!--Fim do Marcador dentro do Marcador> <li type=circle>Item 2.2 <li type=disc>Item 2.3 </ul><!--Fim do Marcador dentro do Numerador> <li> Item 3 </ol><!--Fim do Numerador> </body> </html>

Terminamos mais uma etapa! Esse cdigo foi grande, mas valeu! Para ver o resultado deste exemplo abra o programa Internet Explorer e

Pgina: 20

Fase WebSite

na barra de endereo digite C:\Meus documentos\exemplo7.html ou

C:\Users\<usurio>\Documents\exemplo7.html.

Definindo o corpo da pgina

Voc deve ter observado que, em alguns sites, as cores de fundo da pgina so bem diversificadas ou, em outros casos, uma imagem adicionada no fundo da pgina, como uma marca dgua. Todas estas definies so feitas dentro da TAG <BODY>. Digite o cdigo apresentado na Listagem 1.9 e o salve como exemplo8.html. Listagem 1.9
<html> <head><title>Pgina com Fundo Colorido</title> </head> <body bgcolor=beige text=blue> <h3>Definfo cor de fundo para a pgina</h3> </body> </html>

Para ver o resultado deste exemplo abra o programa Internet Explorer e na barra de endereo digite C:\Meus documentos\exemplo8.html ou
C:\Users\<usurio>\Documents\exemplo8.html. O resultado ser uma pgina com o fundo de

cor bege e o texto na cor azul. Veja figura a seguir:

Pgina: 21

Fase WebSite

OBSERVAO: Voc poder adicionar a cor que desejar, tanto para o fundo quanto para o texto. Porm, fique atento! No configure a mesma cor para o fundo da pgina e para o texto, caso contrrio voc no ver o texto! Para escolher a cor, consulte na Tabela de Cores, j apresentada. Como vimos anteriormente, podemos colocar uma imagem no fundo da pgina. Mas, antes de fazer o exerccio, observe a seguinte recomendao: as imagens suportadas so do tipo GIF e JPG. Na dvida sobre imagens, procure seu tutor on-line, ele poder ajud-lo! As imagens devem estar na mesma pasta, onde estar o documento HTML ou em uma subpasta. Exemplo: Imagine que voc tem uma pasta chamada projeto e nessa pasta voc armazena todos os documentos HTML referente a pgina que por hora desenvolve. Ento, basta que os arquivos de imagens, tambm fiquem na mesma pasta projeto, assim voc no ter problema na hora de visualizar sua pgina no navegador. Vamos ver outra situao:

Pgina: 22

Fase WebSite

Voc agora resolveu organizar ainda mais o desenvolvimento de sua pgina. Para isso, criou uma pasta projeto e dentro armazenou todos os arquivos HTML. Certo? Depois resolveu criar uma subpasta dentro da pasta projeto chamada imagens. Muito bem! Nesta pasta voc colocou todas as imagens. Ento, tudo est correto, mas no se esquea de especificar o caminho, ou seja, o nome da subpasta quando for inserir a imagem. No se preocupe! Voc far exemplo para as duas situaes mais adiante!

Pgina: 23

Fase WebSite

Muito bem, caro estudante, entendido tudo isso, vamos praticar. Digite o cdigo apresentado na Listagem 1.10 e o salve como exemplo9.html. Listagem 1.10
<html> <head> <title>Inserindo Imagem no Fundo da Pgina</title> </head> <body background=parede.gif bgproperties=fixed> <h1 align=center>Editora rica</h1> <font size=4 face=verdana> <ul> <li>Livros <li>Dicas <li>Volte Sempre </ul> </font> </body> </html>

Para ver o resultado deste exemplo abra o programa Internet Explorer e na barra de endereo digite C:\Meus documentos\exemplo9.html ou
C:\Users\<usurio>\Documents\exemplo9.html.

Observao: Se a imagem estivesse em uma subpasta bastaria apontar o caminho para ela na TAG. Veja o exemplo:

Pgina: 24

Fase WebSite

Exemplo: <body background=/imagens/parede.gif bgproperties=fixed> Onde: 1. imagens= o nome da subpasta 2. parede.gif = o nome do arquivo. CONCEITO DAS TAGS MENCIONADAS ACIMA TAG <body> O QUE FAZ Marca o incio e o fim do corpo da pgina Atributos: Bgcolor = define a cor do fundo da pgina Text = define a cor do texto padro da pgina Background = permite inserir uma imagem como fundo da pgina Bgproperties = fixa a imagem no fundo da pgina quando a pgina rolada, criando um efeito de marca dgua.

Imagens
Neste prximo exemplo, vamos trabalhar com as TAGs que permitem a incluso de imagens em uma pgina Web. Antes de iniciar o estudo sobre imagens, vamos recordar que uma imagem s poder ser exibida no navegador, se ela estiver na mesma pasta, ou ento, voc dever apontar o caminho onde est, conforme o exemplo 9. Lembra? Outro fato que, voc poder escolher as imagens que desejar, basta substituir o nome da imagem que est no exemplo pelo caminho e nome da imagem que voc escolheu.

Pgina: 25

Fase WebSite

Tudo certo agora? Vamos em frente! Digite o cdigo apresentado na Listagem 1.11 e o salve como exemplo10.html.

Pgina: 26

Fase WebSite

Listagem 1.11
<html> <head> <title>Imagens</title> </head> <body> <h1>Agora estamos trabalhando com imagens</h1> <h3> Esta sua primeira imagem. Sorria?</h3> <img src=fig.jpg align=left>Veja imagens?<br> O rosto de um velho<br> Uma moa<br> Um cachorro<br> Um outro velho<br> Um pssaro<br> E algo mais<br> </body> </html> se consegue enxergar, as seguintes

Para ver o resultado deste exemplo abra o programa Internet Explorer e na barra de endereo digite C:\Meus documentos\exemplo10.html ou C:\Users\<usurio>\Documents\exemplo10.html.

No se preocupe, caso no tenha conseguido enxergar todas as imagens. O mais importante no momento que voc tenha entendido as explicaes. Vamos tentar outro exemplo? Desta vez, trabalharemos com o alinhamento da imagem e do texto.
Pgina: 27

Fase WebSite

Para verificar como alinhar imagem e texto, digite a Listagem 1.12 e salve como exemplo11.html. Listagem 1.12
<html> <head> <title>Imagens</title> </head> <body> Note neste exemplo que a imagem <img src=fig2.jpg> est entre o texto<br> <img src=fig2.jpg align=top>Imagem est esquerda e o texto no topo<br> <img src=fig2.jpg align=middle>Imagem est esquerda e o texto no centro<br> <img src=fig2.jpg align=left>Neste exemplo a imagem ficou alinhada esquerda, permitindo que o texto ficasse todo direita ao redor da imagem. Utilize este recurso toda vez que desejar que o texto fique ao lado da imagem <br> </body> </html>

Para ver o resultado deste exemplo abra o programa Internet Explorer e na barra de endereo digite C:\Meus documentos\exemplo11.html ou C:\Users\<usurio>\Documents\exemplo11.html.

Pgina: 28

Fase WebSite

CONCEITO DAS TAGS MENCIONADAS ACIMA TAG <img> O QUE FAZ Insere uma imagem Atributos: src indica o nome da imagem a ser carregado. align=middle centraliza o base do texto com o centro da imagem align=left faz a imagem flutuar a esquerda enquanto o texto circunda imagem direita. align=top alinha o texto no topo align=right faz a imagem flutuar a direita enquanto o texto circunda imagem esquerda. alt=n indica o texto para ser exibido quando o navegador no exibe a imagem. Sendo que n o ttulo que identifique a imagem. Exemplo: <img src=fig.jp alt=Esta uma imagem legal>

Pgina: 29

Fase WebSite

Tabelas
Nesta etapa, voc conhecer as TAGs responsveis pela construo de tabelas. Depois, voc ver como utilizar as tabelas como recurso para a definio dos layouts de nossas pginas. Por hora, vamos s principais TAGs. Como voc vem fazendo, digite a Listagem 1.13, e salve como exemplo12.html. Listagem 1.13
<html> <head> <title>Montando Tabelas</title> </head> <body> <table border=2> <!--Aqui comea a Tabela> <tr><!--Aqui Comea uma linha> <td>Clula1</td> <td>Clula2</td> <td>Clula3</td> </tr><!-- Aqui termina uma linha> <tr><!-- Aqui Comea outra linha> <td>Frase 1</td> <td>Frase 2</td> <td>Frase 3</td> </tr><!-- Fim da outra linha> </table><!-- Fim da Tabela> </body> </html>

Para ver o resultado deste exemplo abra o programa Internet Explorer e na barra de endereo digite C:\Meus documentos\exemplo12.html ou

C:\Users\<usurio>\Documents\exemplo12.html.

Pgina: 30

Fase WebSite

Voc pode tambm controlar as dimenses de sua tabela. Vamos para mais uma listagem? Digite, ento, a Listagem 1.14 e salve como exemplo13.html. Listagem 1.14
<html> <head> <title>Montando Tabelas</title> </head> <body> <table border=1 <tr> <td>Item <td>Item <td>Item </tr> width=400 height=50 cellpadding=5 cellspacing=5> 1</td> 2</td> 3</td>

<tr> <td>Item 4</td> <td>Item 5</td> <td>Item 6</td> </tr> </table> </body> </html>

Para ver o resultado deste exemplo abra o programa Internet Explorer e na barra de endereo digite C:\Meus documentos\exemplo13.html ou C:\Users\<usurio>\Documents\exemplo13.html.

Pgina: 31

Fase WebSite

Alinhamentos de Tabelas e suas clulas

Os elementos dentro da tabela tambm podem ser alinhados da mesma que um pargrafo. Veja mais um exemplo, utilizando a Listagem 1.15 Listagem 1.15 Para ver o resultado deste exemplo abra o programa Internet Explorer e na barra de endereo digite C:\Meus documentos\exemplo14.html ou C:\Users\<usurio>\Documents\exemplo14.html.

Pgina: 32

Fase WebSite

Cor de Fundo de Tabelas e suas clulas

Voc pode ainda adicionar cores ao fundo da tabela ou apenas de uma clula que deseja. Voc j estudou como utilizar o atributo bgcolor. com este mesmo comando que voc pode adicionar uma cor padro para tabela ou para a clula. Veja o exemplo: <table bgcolor=blue> O resultado seria assim: Toda a tabela exibida no navegador com o preenchimento azul, como mostra a figura abaixo:

Veja mais um exemplo abaixo. Porm, observe que o atributo bgcolor inserido na TAG referente coluna da tabela (<td></td>). Com isso, voc pode verificar que apenas as colunas tm seu fundo preenchido com as cores selecionadas. No caso deste exemplo, a primeira coluna ser preenchida com a cor Bege e, a segunda, com a cor Vermelha. <table> <tr> <td bgcolor=beige>Beige</td> <td bgcolor=red> Vermelho</td> </tr> </table>

Pgina: 33

Fase WebSite

O resultado : as clulas (colunas) tm cores diferentes:

CONCEITO DAS TAGS MENCIONADAS ACIMA TAG <table> O QUE FAZ Marca o incio e o fim de uma tabela Atributos Width define a largura da tabela ou da clula Height define a altura da tabela ou da clula Cellpadding define a margem dentro das clulas Cellspacing define o espao entre as clulas <tr> <td> border = n align=left align=right align=center valign=top valign=bottom valign=middle Bgcolor define a cor de fundo da tabela ou da clula Marca o incio e o fim de uma linha Marca o incio e o fim de uma clula Coloca uma borda na tabela, onde n o valor em pixels da borda Alinha o contedo da clula esquerda na horizontal Alinha o contedo da clula direita na horizontal Alinha o contedo da clula ao centro na horizontal Alinha o contedo da clula no topo (vertical) Alinha o contedo da clula na base da clula (vertical) Alinha o contedo da clula no centro na vertical.

Fique atento!

1. O atributo de alinhamento ALIGN, faz o alinhamento da clula na horizontal. 2. O atributo de alinhamento VALIGN, faz o alinhamento da clula na vertical.

Pgina: 34

Fase WebSite

Com isso, voc aprendeu a trabalhar com tabelas na Linguagem HTML. Use sua criatividade para criar tabelas diferentes! Seu prximo passo estudar o conceito de Links. Bons estudos!

Pgina: 35

Fase WebSite

Links
Como comentamos no incio desta apostila, voc est produzindo pginas de hipertextos, ou seja, textos que podem fazer ligaes com outros textos, ligando pginas entre si. Porm, para estes pontos de ligao, existe um nome, que deve ser familiar a voc, que formado no Programa Aluno Monitor: links ou hyperlinks. Vamos relembrar? Na Fase 1 Primeiros Passos, voc viu que:

A TAG responsvel o <a>. Nesta TAG, voc ir inserir a URL do endereo de ligao, por meio de um atributo. Para criar um link, use a seguinte sintaxe: Cdigo HTML da TAG <a>: <a href = url>Texto que faz referncia ao link</a>

Onde: 1. <a> a TAG que marca o incio e o fim do link, sendo que o fim deve ser sinalizado por </a>.

Pgina: 36

Fase WebSite

2. href= URL atributo que especifica o endereo do site. Esse endereo pode ser o nome de uma pgina Web, localizada na mesma pastinha do seu projeto ou uma URL. Que tal um exerccio para entender melhor tudo isso? Ento, prossiga digitando a Listagem 1.16 e salve como exemplo15.html. Listagem 1.16
<html> <head> <title>Estudando Links</title> </head> <body> <h2>Exemplo de Links Internos</h2> <h3>Seo de Exemplos</h3> <a href=exemplo1.html>Exemplo1</a> <a href=exemplo2.html>Exemplo2</a> <hr> <h2>Exemplo de Links Externos</h2> <a href=http://www.alunomonitor.com.br>Programa Aluno Monitor</a><br> <a href= http://www.microsoft.com/brasil/educacao/default.mspx>Microsoft Educao</a> <h3>Voc pode usar imagens para usar nos links</h3> <a href=exemplo10.html><img src=bola.gif></a>Imagens </body> </html>

Para ver o resultado deste exemplo abra o programa Internet Explorer e na barra

Pgina: 37

Fase WebSite

de endereo digite C:\Meus documentos\exemplo15.html ou C:\Users\<usurio>\Documents\exemplo15.html.

Pgina: 38