Académique Documents
Professionnel Documents
Culture Documents
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
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.
Pgina: 5
Fase WebSite
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:
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>
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
Pgina: 7
Fase WebSite
caso Documentos.
ii. Na opo Nome do arquivo, digite o nome do arquivo
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
<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
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
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.
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
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
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
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
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
Pgina: 32
Fase WebSite
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
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
Pgina: 38