APOSTILA DE HTML

SUMRIO
1 2 INTRODUO .........................................................................................................................3 ESTRUTURA DE DOCUMENTOS HTML ................................................................................4 2.1 Conceito das tags usados neste exerccio ........................................................................4 3 CRIANDO ARQUIVOS HTML ..................................................................................................5 4 HEAD.......................................................................................................................................7 4.1 Conceito das tags usados neste exerccio ........................................................................8 5 ALINHAMENTO .......................................................................................................................9 5.1 Conceito das tags usados neste exerccio ......................................................................10 6 FORMATAO DE TEXTOS.................................................................................................11 6.1 Conceito das tags usados neste exerccio ......................................................................12 7 TABELA DE CORES..............................................................................................................13 8 LISTAS NUMERADAS E MARCADAS...................................................................................16 8.1 Conceito das tags usados neste exerccio ......................................................................17 9 DEFININDO O CORPO DA PGINA .....................................................................................20 9.1 Conceito das tags usados neste exerccio ......................................................................22 10 IMAGENS...........................................................................................................................23 10.1 Conceito das tags usados neste exerccio...................................................................25 11 TABELAS ...........................................................................................................................26 11.1 Alinhamentos...............................................................................................................27 11.2 Cor de Fundo ..............................................................................................................29 11.3 Conceito das tags usados neste exerccio...................................................................29 12 LINKS .................................................................................................................................30 13 FORMULRIOS .................................................................................................................32 13.1 Conceito das tags usados neste exerccio...................................................................33 14 FRAMES ............................................................................................................................34 14.1 Conceito das tags usados neste exerccio...................................................................34 15 DICAS E TRUQUES...........................................................................................................35 15.1 Letreiro ........................................................................................................................35 15.2 Trechos de vdeo.........................................................................................................36 15.3 Trilha sonora ...............................................................................................................36 16 ERROS MAIS COMUNS ....................................................................................................37

-2-

APOSTILA DE HTML

1 INTRODUO
Toda vez que voc acessar um site (veja Word Wide Web) por meios de domnios quando adiciona a URL na barra de endereo do seu Navegador (Browser), voc ver pginas na WEB bem dinmicas, organizadas, animadas e com ela trazendo informaes, imagens, sons, vdeos, etc. Ento, voc deve se perguntar. Como feito? Como elas se propagam? Todas estas pginas possuem um cdigo fonte escrito numa linguagem chamada HTML (Hyper Text Markup Language). Apesar dessa aparente sofisticao, as pginas Web no passam de documentos de texto simples. Podem ser produzidas com qualquer editor de texto, como o Notepad do Windows. A diferena que as pginas Web contm algumas marcas especiais para determinar o papel de cada elemento dentro do texto. Alguns elementos so marcados como ttulos, outros como pargrafos. As marcaes so usadas tambm para indicar os links que levam a outros documentos na rede. Essas marcas so chamadas de tags e esto especificadas dentro da linguagem utilizada para criar as pginas Web, HTML. O primeiro conceito que se deve ter em mente ao projetar pginas Web que HTML no foi criada para controlar a aparncia dos documentos, ao contrrio dos processadores de texto e programas de layout de pgina. As tags de HTML apenas informam ao navegador o que so os elementos que esto na pgina. Eles dizem, por exemplo, que um determinado trecho o ttulo principal do documento e outro um item de lista. A formatao do trecho deixada para o navegador. Cada navegador mostra a pgina de uma forma um pouco diferente, o que dificulta o trabalho de programao visual na Web. Para complicar ainda mais, cada usurio pode modificar a configurao padro de seu navegador para que o seu programa mostre o texto na fonte (tipo de caractere) que quiser. Em compensao muito simples criar uma pgina bsica para colocar na Internet com HTML. Neste captulo, apresentamos um exemplo enxuto, que aos poucos ficar mais sofisticado. Como a pgina Web um documento de texto comum, pode-se utilizar um editor de texto simples, como o Notepad do Windows. Existem editores de HTML que podem facilitar a confeco das pginas. importante notar que os exemplos descritos aqui devem ser gravados no formato texto e com a extenso .htm ou .html. Portanto, se for utilizado um processador de texto, como o Word, Wordperfect ou Wordstar, o arquivo deve ser salvo no formato somente texto. O navegador de Web no vai entender um arquivo gravado nos formatos especficos dos processadores de texto (.doc, por exemplo). Ser necessrio tambm um programa de desenho para criar as imagens, como o Paintbrush do Windows ou um mais sofisticado, como o Photoshop. Tambm preciso cuidado na hora de gravar as imagens. O formato mais aceito pelos navegadores o GIF. O Paintbrush do Windows grava arquivos apenas nos formatos BMP ou PCX. Ser necessrio um outro programa para fazer a converso, como o Lview. Alm disso, ser necessrio um navegador de Web para visualizar as pginas No recomendvel que os documentos Web contenham acentos. Ainda que todos os navegadores existentes entendam a presena de um caractere acentuado, existem ocasies em que o texto em HTML pode ficar truncado. Por exemplo, quando algum copia uma pgina Web e a envia para outra pessoa atravs de correio eletrnico. Para contornar este problema, existe uma tabela de cdigos que substituem os acentos. Os navegadores transformam estes cdigos em caracteres acentuados e o documento poder ser transmitido por qualquer meio. Sugesto: o documento pode ser escrito com os acentos e, antes de ir para o servidor de Web, ser submetido a uma macro de processador de texto para substitu-los pelos cdigos HTML. Este tutorial tem por objetivo mostr-lo como criar e exibir pginas HTML, como as que voc ver atravs da WEB. Tais pginas so criadas a partir de arquivos texto ASCII, contendo caracteres de marcao da linguagem HTML. Uma vez criados, estes arquivos so salvos com uma extenso .html.

-3-

APOSTILA DE HTML

2 ESTRUTURA DE DOCUMENTOS HTML

Primeiramente, gostaria de lembrar-lhe como citei a linhas acima, que existem vrios editores de Homepages, como por exemplo: o FrontPage Express, Netscape Composer, Home Site, etc. S que na ausncia destes aplicativos e voc desconhecendo a Linguagem de HyperTextos, HTML, no poderia criar suas pginas. Da a importncia de se conhecer esta linguagem. Entendeu? Muito bem, para estudarmos HTML, usaremos o j conhecido Bloco de Notas e um Browser (Internet Explorer ou Netscape). Para nossos exemplos usarei o Internet Explorer. Tudo Bem? Vamos nessa! A estrutura bsicas de uma pgina HTML mostrada na listagem 1.1. Observe que a construo de pginas exige o uso de marcadores chamados de TAGS. Veja agora 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> Fim da Listagem 1.1 Com certeza voc observou que sempre usei os tags, fazendo demarcao, ou seja, eles sempre estaro ANTES DE ALGUMA COISA E APS ALGUMA COISA. Quer mais um exemplo para entender melhor? Tudo bem. Exemplo: <title>EDITORA ERICA</title>

2.1

Conceito das tags usados neste exerccio

TAG <html> <head> <title> <body> O QUE FAZ Marca o incio e o fim do documento HTML. Com ele 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

-4-

APOSTILA DE HTML

3 CRIANDO ARQUIVOS HTML

Bem entendido os conceitos bsicos e voc mais feliz, vamos criar nossa primeira pgina. 1) Abra o Bloco de Notas Iniciar/Programas/Acessrios/Bloco de Notas 2) Digite o cdigo da listagem 1.2. Aps digit-lo salve na pasta Meus Documentos ou em outra se preferir com o nome exemplo1.html. Como? Resposta: 1) Abra o Menu Arquivo e escolha Salvar 2) Na janela que aparecer como mostrar figura 1.1, faa as seguintes tarefas: 2.1) Na opo Salvar em selecione a pasta onde deseja salvar, no caso Meus Documentos 2.2) Na opo Nome do arquivo coloque o nome do arquivo exemplo1.html 2.3) Finalmente clique no boto Salvar.

Figura 1.1 Listagem 1.2 <html> <head> <title>Minha Home Page</title> </head> <body> Aqui neste espao desenvolverei minha Homepage! Aguarde!! </body> </html> Fim da Listagem 1.2
O TTUO ADICIONADO NA PGINA ATRAVS DO TAG TITLE

-5-

APOSTILA DE HTML
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereo digite C:\Meus documentos\exemplo1.html. Veja a figura 1.2

Figura 1.2

-6-

APOSTILA DE HTML

4 HEAD
Em alguns momentos em sua pgina faz necessrio comentar alguns trechos do cdigo para facilitar na leitura e manuteno da pgina, por isso adicionamos comentrios, ou seja, palavras ou frases que no so exibidos no Navegador, apenas so visto como estamos trabalhando no cdigo fonte. Na listagem 1.3 faremos um novo exemplo e incrementaremos novos tags. Digite a listagem 1.3 abaixo e salve com o nome exemplo2.html na pasta Meus Documentos. Listagem 1.3 <!Incio do Documento HTML> <html> <head> <title>Melhorando Minha Home Page</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> Fim da Listagem 1.3 Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereo digite C:\Meus documentos\exemplo2.html. Veja a figura 1.3

Figura 1.3

-7-

APOSTILA DE HTML

4.1

Conceito das tags usados neste exerccio

TAG <!> <meta> Insere comentrios nas pginas Marcas Metas. Servem para voc especificar o autor, palavras-chaves, descrio da pgina, etc. Dentro do tag <meta>, tem os comandos name e o content. No comando name voc especifica que informao voc quer dar, e no 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 maior tamanho do ttulo. Insere uma linha horizontal Marca um pargrafo e acrescenta uma linha em branco. Insere uma quebra de linha O QUE FAZ

<hn>

<hr> <p> <br>

Agora, que voc viu o resultado do exemplo2.html a cada vez mais feliz, por est entendendo esta linguagem, vamos passar para o Exerccio 3.

-8-

APOSTILA DE HTML

5 ALINHAMENTO
Assim, como num documento comum, h necessidade de melhorar a aparncia do documento, e a primeira providncia a tomar cuidar do alinhamento do texto. O Alinhamento padro que vem configurado nos navegadores, a esquerda. Para entender isto, digite a listagem 1.4, e salve como exemplo3.html, e acompanhe o conceito de tag que marcam o alinhamento dos ttulos e paragrfos 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 do livro,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> Fim da Listagem 1.4 Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereo digite C:\Meus documentos\exemplo3.html. Veja a figura 1.4

Figura 1.4

-9-

APOSTILA DE HTML

5.1

Conceito das tags usados neste exerccio

TAG <center> 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 Justify = faz a justificao do pargrafo.

align=center, right, left ou justify

<blockquote> <hr>

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>

- 10 -

APOSTILA DE HTML

6 FORMATAO DE TEXTOS
Muito bem caro estudante, perceba que a cada exemplo sua pgina vai melhorando ainda mais sua aparncia. Neste exemplo trabalharemos com a formatao das letras bem como cor, tamanho de fonte, estilo, e etc.. 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> <font color=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> Fim da Listagem 1.5

- 11 -

APOSTILA DE HTML
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereo digite C:\Meus documentos\exemplo4.html. Veja a figura 1.5

Figura 1.5

6.1

Conceito das tags usados neste exerccio

TAG <b> <i> <u> <tt> Coloca o texto em negrito Coloca o texto em itlico Coloca o texto sublinhado Coloca o texto em escrever) Atributos: Size = define o tamanho da letra. Ex: <font size=5>Texto</font> O QUE FAZ

IMPORTANTE

fonte monoespaada. (fonte Courier,como mquina de

<font>

Modifica a formatao do texto.

Face = define o estilo da letra. Ex: <font face=verdana>Texto</font> Color = define a cor da letra. Ex:<font color=red>Texto</font> <pre> <basefont> Marca um trecho formatado com fonte monoespaada. A formatao com espaos e entrada de pargrafos respeitada. Modifica a formatao padro do texto. Ex: <basefont size=5>

- 12 -

APOSTILA DE HTML

7 TABELA DE CORES
Voc percebeu que as cores a fonte obedecem o idioma ingls, no entanto, as cores da fonte podem ser adicionados atravs do nome ou de seus respectivos cdigos. Ento para voc ficar mais feliz, relacionei aqui algumas cores para colorir e diversificar sua home page. Veja a figura 1.6

Figura 1.6 A tabela abaixo apresenta os cdigos de cores que podem ser utilizados em documentos HTML. Somente os nomes de cores acompanhados de asterisco podem ser utilizados no lugar dos cdigos. Olive, fuchsia, purple e teal no tm correspondentes em cdigo.

Nome da cor *White *Red *Green *Blue Magenta Cyan *Yellow *Black *Aqua Baker's Chocolate Blue Violet Brass Bright Gold Brown Bronze Bronze II Cadet Blue Cool Copper Copper Coral Corn Flower Blue Dark Brown

Cdigo da cor #FFFFFF #FF0000 #00FF00 #0000FF #FF00FF #00FFFF #FFFF00 #000000 #70DB93 #5C3317 #9F5F9F #B5A642 #D9D919 #A62A2A #8C7853 #A67D3D #5F9F9F #D98719 #B87333 #FF7F00 #42426F #5C4033

Aparncia

- 13 -

APOSTILA DE HTML Dark Green Dark Green Copper Dark Olive Green Dark Orchid Dark Purple Dark Slate Blue Dark Slate Grey Dark Tan Dark Turquoise Dark Wood Dim Grey Dusty Rose Feldspar Firebrick Forest Green *Fuchsia Gold Goldenrod *Gray Green Copper Green Yellow Hunter Green Indian Red Khaki Light Blue Light Grey Light Steel Blue Light Wood *Lime Mandarian Orange *Maroon Medium Aquamarine Medium Blue Medium Forest Green Medium Goldenrod Medium Orchid Medium Sea Green Medium Slate Blue Medium Spring Green Medium Turquoise Medium Violet Red Medium Wood Midnight Blue *Navy Neon Blue Neon Pink New Midnight Blue New Tan Old Gold *Olive Orange Orange Red Orchid Pale Green #2F4F2F #4A766E #4F4F2F #9932CD #871F78 #6B238E #2F4F4F #97694F #7093DB #855E42 #545454 #856363 #D19275 #8E2323 #238E23 #CD7F32 #DBDB70 #C0C0C0 #527F76 #93DB70 #215E21 #4E2F2F #9F9F5F #C0D9D9 #A8A8A8 #8F8FBD #E9C2A6 #32CD32 #E47833 #8E236B #32CD99 #3232CD #6B8E23 #EAEAAE #9370DB #426F42 #7F00FF #7FFF00 #70DBDB #DB7093 #A68064 #2F2F4F #23238E #4D4DFF #FF6EC7 #00009C #EBC79E #CFB53B #FF7F00 #FF2400 #DB70DB #8FBC8F - 14 -

APOSTILA DE HTML Pink Plum *Purple Quartz Rich Blue Salmon Scarlet Sea Green Semi-Sweet Chocolate Sienna *Silver Sky Blue Slate Blue Spicy Pink Spring Green Steel Blue Summer Sky Tan *Teal Thistle Turquoise Very Dark Brown Very Light Grey Violet Violet Red Wheat Yellow Green #BC8F8F #EAADEA #D9D9F3 #5959AB #6F4242 #8C1717 #238E68 #6B4226 #8E6B23 #E6E8FA #3299CC #007FFF #FF1CAE #00FF7F #236B8E #38B0DE #DB9370 #D8BFD8 #ADEAEA #5C4033 #CDCDCD #4F2F4F #CC3299 #D8D8BF #99CC32

- 15 -

APOSTILA DE HTML

LISTAS NUMERADAS E MARCADAS

E l vamos ns para um mais exerccio. Desta vez trabalharemos com listas numeradas e 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> Fim da Listagem 1.6 Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereo digite C:\Meus documentos\exemplo5.html. Veja a figura 1.7

Figura 1.7

- 16 -

APOSTILA DE HTML

8.1

Conceito das tags usados neste exerccio

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 algarismo romano. Ex: <ol type=A> <ol type=I> <ul> 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>

Ficou confuso? Quer mais um exemplo para entender legal? Vamos nessa! Para entender isto, digite a listagem 1.7, e salve como exemplo6.html, 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

- 17 -

APOSTILA DE HTML
<li>Livros </ol> <h3>Esta uma listagem em algarismo romano a partir do nmero 3</h3> <ol type=I start=3> <li>Editora <li>rica <li>Livros </ol> </body> </html> Fim da Listagem 1.7 Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereo digite C:\Meus documentos\exemplo6.html. Veja a figura 1.8

Figura 1.8 Vamos terminar esta lio com mais um exemplo? Desta vez, faremos uma listagem com subnveis. Para entender isto, digite a listagem 1.8, e salve 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

- 18 -

APOSTILA DE HTML
<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> Fim da Listagem 1.8 Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereo digite C:\Meus documentos\exempl7.html. Veja a figura 1.9

Figura 1.9

- 19 -

APOSTILA DE HTML

9 DEFININDO O CORPO DA PGINA

Voc teve Ter observado em algumas sites, que as cores de fundo da pgina so bem diversificados, ou em outros casos, uma imagem adicionado no fundo da pgina, como uma marca dgua. Ento, todas estas definies so feitas dentro do tag <BODY>. Vamos praticar? Para entender isto, digite a listagem 1.9, e 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> Fim da Listagem 1.9 Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereo digite C:\Meus documentos\exemplo8.html. O resultado, ser uma pgina como fundo de cor bege e o texto na cor azul. Certo?. Veja figura 1.10

Figura 1.10 Observao: Voc poder adicionar a cor que desejar, tanto para o fundo quanto para o texto. Os dois s no podem ser da mesma cor!(risos). Para escolher a cor, consulte na Tabelade Cores (figura 1.6) Como comentei linhas acima, voc tambm pode colocar um imagem no fundo da pgina. Mas, antes de fazer o exerccio, observe as seguintes recomendaes: As imagens suportadas so do tipo GIF e JPG. Na dvida sobre imagens aconselho, consultar um livro de PhotoShop 5.0 ou outra verso. As imagens devem estar na mesma pasta, onde estar o documento HTML, ou numa 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. Certo at a? Ento, basta que os arquivos de imagens, tambm fiquem na mesma pasta projeto, assim no ter problema na hora de visualizar no Browser.

- 20 -

APOSTILA DE HTML
Outro exemplo que posso citar o seguinte. Imagine agora outra situao:

Voc agora resolveu organizar ainda mais o desenvolvimento de sua pgina. 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 garoto! Excelente atitude e nela voc colocou todas as imagens. Ento, tudo est correto, mas no esquea de na hora de especificar a imagem que deseja inserir no fundo dentro do tag <BODY>, o caminho, ou seja, o nome da subpasta. Entendeu? No se preocupe voc far exemplo para as duas situaes, eu prometo! Muito bem, caro web designer, entendido tudo isso, vamos praticar. Para entender isto, digite a listagem 1.10, e 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> Fim da Listagem 1.10 Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereo digite C:\Meus documentos\exemplo9.html. Veja figura 1.11

Figura 1.11

- 21 -

APOSTILA DE HTML
Observao: Caso a imagem estivesse em uma subpasta bastaria apontar o caminho para ela no tag. Veja o exemplo: Exemplo: <body background=/imagens/parede.gif bgproperties=fixed> Onde: imagens= o nome da subpasta parede.gif = o nome do arquivo.

9.1

Conceito das tags usados neste exerccio

TAG 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.

<body>

- 22 -

APOSTILA DE HTML

10 IMAGENS
Muito bem, voc est evoluindo a cada exerccio. Neste exemplo exercitaremos os tags que permitem a insero de imagens em sua home page. Antes de iniciar o estudo sobre imagens, quero lembrar-lhe que uma imagem s poder ser exibida no browser, se ela estiver na mesma pasta, ou ento, voc dever apontar o caminho onde est, conforme o exemplo de nmero 6. Lembra? Outro fato que, voc poder escolher as imagens que desejar, basta substituir o nome da imagem que est no exemplo pela a que voc escolheu. Tudo certinho agora? Vamos em frente! Para entender isto, digite a listagem 1.11, e salve como exemplo10.html, 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 se consegue enxergar, as seguintes 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> Fim da Listagem 1.11 Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereo digite C:\Meus documentos\exemplo10.html. Veja figura 1.12

Figura 1.12

- 23 -

APOSTILA DE HTML
isso a, no se preocupe se voc no conseguiu enxergar todas as imagens, o mais importante para mim que voc tenha entendido a aula. (risos!!!) Vamos para um exemplo? Desta vez, trabalharemos com o alinhamento da imagem e do texto. Para entender isto, 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 vez que desejar que o texto fique ao lado da imagem <br> </body> </html> Fim da Listagem 1.12 Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereo digite C:\Meus documentos\exemplo11.html. Veja figura 1.13 toda

Figura 1.13

- 24 -

APOSTILA DE HTML

10.1 Conceito das tags usados neste exerccio

TAG <img> 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> O QUE FAZ

- 25 -

APOSTILA DE HTML

11 TABELAS
Nesta etapa conheceremos os tags responsveis pela construo de tabelas. Na parte II deste estudo atravs do Front Page Express, utilizaremos a tabela como recurso para a definio dos layouts de nossas pginas. Por hora, vamos aos principais tags. Tudo Bem? Como sempre, 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> Listagem 1.13 Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereo digite C:\Meus documentos\exemplo12.html. Veja figura 1.14

Figura 1.13

- 26 -

APOSTILA DE HTML
Voc pode tambm controlar as dimenses de sua tabela. Vamos para mais uma listagem? Como sempre, digite a listagem 1.14, e salve como exemplo13.html Listagem 1.14 <html> <head><title>Montando Tabelas</title> </head> <body> <table border=1 width=400 height=50 cellpadding=5 cellspacing=5> <tr> <td>Item 1</td> <td>Item 2</td> <td>Item 3</td> </tr> <tr> <td>Item 4</td> <td>Item 5</td> <td>Item 6</td> </tr> </table> </body> </html> Fim da Listagem 1.14 Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereo digite C:\Meus documentos\exemplo13.html. Veja figura 1.15

Figura 1.15

11.1 Alinhamentos
Os elementos dentro da tabela tambm podem ser alinhados da mesma que um pargrafo. Veja mais um exemplo atravs da listagem 1.15

- 27 -

APOSTILA DE HTML
Listagem 1.15 <html> <head><title>Montando Tabelas</title> </head> <body> <table border=1 width=400 height=120 cellpadding=5 cellspacing=5> <tr> <td align=center>No Centro</td> <td align=right>Para Direita</td> <td align=left>Para a Esquerda</td> </tr> <tr> <td valign=bottom>Em baixo</td> <td valign=top>No Topo</td> <td valign=middle>Centro na Vertical</td> </tr> </table> </body> </html> Fim da Listagem 1.15 Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereo digite C:\Meus documentos\exemplo14.html. Veja figura 1.16

Figura 1.16

- 28 -

APOSTILA DE HTML

11.2 Cor de Fundo

Voc pode ainda adicionar cores no fundo da tabela ou apenas de uma clula que deseja. Lembra do atributo bgcolor, ento com este mesmo que voc pode adicionar um cor padro para tabela ou para a clula. Veja o exemplo: <table bgcolor=blue> O resultado seria assim: Toda Tabela teria um preenchimento azul

Veja mais este exemplo: <table> <tr> <td bgcolor=beige>Bege</td> <td bgcolor=red> Vermelho<td> O resultado seria assim: As clulas teriam cores diferentes

11.3 Conceito das tags usados neste exerccio

TAG <table> 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 Bgcolor define a cor de fundo da tabela ou da clula <tr> <td> border=n align=left align=right align=center valign=top valign=bottom valign=middle 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 a esquerda na horizontal Alinha o contedo da clula a 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 vertica O QUE FAZ Marca o incio e o fim de uma tabela

Observao: O atributo de alinhamento ALIGN, faz o alinhamento na horizontal. O atributo de alinhamento VALIGN, faz o alinhamento na vertical

- 29 -

APOSTILA DE HTML

12 LINKS
Como falei no incio, estamos produzindo pginas de hipertextos, ou seja, textos que podem fazer ligaes com outros textos, ligando pginas entre si e a WEB. Ento, estes pontos ns chamamos de links ou hyperlinks, ncoras de hipertexto, todos com a mesma funo, de atravs de um nico clique sobre a frase ou imagem conduzir a algum lugar no site ou na WEB. O Tag responsvel o <A>, onde dentro deste, atravs de um atributo coloco a referncia, ou seja, A URL (Uniform Resource Locator). Para criar um link usamos a seguinte sintaxe: SINTAXE: <A HREF=URL>Frase que aparece na pgina</a> Onde: <a> tag que marca o incio e o fim do link href= atributo que especifica o nome da referncia URL o nome do local para onde desejar linkar (ir) Nada de complicao, que tal um exerccio para entendermos legal tudo isso? Vamos nessa! Como sempre, digite 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.erica.com.br>Conhea a Editora rica</a><br> <a href=http://www.apple.com>Apple Computer</a> <h3>Voc pode usar imagens para usar nos links</h3> <a href=exemplo10.html><img src=bola.gif> </body> </html> Fim da Listagem 1.16 </a>Imagens
So aqueles vo para outro site! So aqueles vo para alguma outra pgina dentro do mesmo site

- 30 -

APOSTILA DE HTML
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereo digite C:\Meus documentos\exemplo15.html. Veja figura 1.17

Figura 1.17

- 31 -

APOSTILA DE HTML

13 FORMULRIOS
Nesta etapa conheceremos os tags responsveis pela construo de formulrios. Neste estudo utilizaremos campos para preenchimento de um formulrio. Vale lembrar que para uma melhor utilizao de formulrios necessria uma linguagem de programao como, por exemplo, ASP. Por hora, vamos aos principais tags. Tudo Bem? Como sempre, digite a listagem 1.18, e salve como exemplo18.html Listagem 1.18 <html> <head> <title>Criando Formulrios</title> </head> <body> <p align="center"><font size="6" face="Arial, Helvetica, sans-serif">EDITORA ETICA</font></p> <form name="suspenso" method="post" > <font size="2" face="Arial, Helvetica, sans-serif">TIPO DE LIVRO </font> <select name="select"> <option>Romance</option> <option>Policial</option> <option>Direito</option> <option>Contos</option> <option>Outros</option> </select> </form> <form name="caixa de selecao" method="post" > <font size="2" face="Arial, Helvetica, sans-serif"> Quantidade <input type="checkbox" name="checkbox" value="checkbox"> 1 <input type="checkbox" name="checkbox2" value="checkbox"> 2 <input type="checkbox" name="checkbox3" value="checkbox"> 3 <input type="checkbox" name="checkbox4" value="checkbox"> mais </font> </form> <form name="campo de texto" method="post" > <font size="2" face="Arial, Helvetica, sans-serif"> Nome do usuario <input name="textfield" type="text" size="8" maxlength="8"> senha <input name="textfield2" type="password" size="9" maxlength="7"> </font> </form> </body> </html> Fim da listagem 1.18

- 32 -

APOSTILA DE HTML
Para ver o resultado deste exemplo abra o Internet Explorer, e na barra de endereo digite C:\Meus documentos\exemplo16.html. Veja figura 1.18

Figura 1.18

13.1 Conceito das tags usados neste exerccio

TAG <form> Atributos name define o nome do formulrio method define o modo de envio ou recebimento dos dados action define o arquivo em que os dados iro ser armazenados <select name = > Define o formulrio como suspenso Atributos option define os itens que iram compor o formulrio suspenso <input> Marca o incio e o fim de uma caixa do formulrio Atributos type = checkbox define o formulrio como caixa de seleo name nome da caixa de seleo value define o valor que ir ser complementado na caixa <input> Marca o incio e o fim de uma caixa do formulrio Atributos Name=textfield define o formulrio como campo de texto type tipo da caixa: pode ser texto text ou senha password size tamanho do campo maxlength nmero mximo de caracteres O QUE FAZ Marca o incio e o fim de um formulrio

- 33 -

APOSTILA DE HTML

14 FRAMES
Uma pgina de frames um tipo especial de pgina HTML que divide a janela do navegador em diferentes reas denominadas molduras, cada qual podendo mostrar uma pgina diferente. Depois de criar a pgina de moldura com base em um modelo, basta definir a pgina inicial que ser mostrada em cada moldura. Pode-se selecionar uma pgina existente ou criar uma. Em seguida, voc pode editar a pgina diretamente no quadro em que ela vai ficar. Digite a listagem 1.19. e salve como exemplo19.htm Listagem 1.19

html> <head> <title>Documento com frames</title> </head> <frameset cols="80,*" frameborder="NO" border="0" framespacing="0"> <frame src="menu.htm" name="leftFrame" scrolling="NO" noresize> <frame src="principal.htm" name="mainFrame"> </frameset> <noframes> <body> </body> </noframes> </html> Fim da listagem 1.19

14.1 Conceito das tags usados neste exerccio

TAG <framset> Atributos cols nmero de colunas (largura) frameborder define uma borda para os frames framespacing define um espao de um frame para o outro frame scr define o arquivo que o frame ir exibir name tipo do frame scrolling rolagem de tela O QUE FAZ Marca o incio e o fim de um frame (moldura)

- 34 -

APOSTILA DE HTML

15 DICAS E TRUQUES
15.1 Letreiro
O Internet Explorer implementa uma forma muito simples de dar movimento ao texto. O recurso funciona como um letreiro luminoso de bolsa de valores, no qual o texto corre da direita para a esquerda. No caso do letreiro produzido para o Internet Explorer, utiliza-se o tag <MARQUEE> para marcar o trecho de texto que ser animado. Uma srie de atributos permitem controlar o tipo de rolagem do texto (da esquerda para a direita ou vice-versa), a velocidade e o tamanho do letreiro, entre outras coisas. Um letreiro simples seria: <MARQUEE HEIGHT=30 WIDTH=300 DIRECTION=LEFT SCROLLAMOUNT=50>Este texto rola pela tela da direita para a esquerda.</MARQUEE> No exemplo acima, uma rea de 30 pixels de altura (HEIGHT=30) por 300 pixels de largura (WIDTH=300) ser criada para a exibio do texto em movimento, que ser apresentado da direita para a esquerda (DIRECTION=LEFT). A velocidade expressa tambm em pixels pelo atributo SCROLLAMOUNT. Quanto mais pixels, mais rpido correr o texto na tela. Atributos ALIGN=TOP, MIDDLE ou BOTTOM: modifica o alinhamento do texto em volta do marquee. ALIGN=TOP alinha o texto com o topo do marquee. ALIGN=MIDDLE alinha o texto com o centro do marquee. ALIGN=BOTTOM alinha o texto com a base do marquee. BEHAVIOR=SCROLL, SLIDE ou ALTERNATE: controla o comportamento do texto dentro do marquee. BEHAVIOR=SCROLL faz com que o texto entre por um dos cantos do marquee e sai por outro. BEHAVIOR=SLIDE, o texto entra por um cantos do marquee e pra ao chegar no canto oposto. BEHAVIOR=ALTERNATE, o texto fica passando de um canto a outro, sempre dentro do marquee. Exemplo: <MARQUEE BEHAVIOR=SLIDE>Texto</MARQUEE> BGCOLOR=#nnnnnn: muda a cor do fundo do marquee. O Apndice C mostra os valores possveis de n. Exemplo: <MARQUEE BGCOLOR=#FF0000>Texto</MARQUEE> DIRECTION=LEFT ou RIGHT: define a direo na qual o texto se move. DIRECTION=LEFT faz o texto correr para a esquerda. DIRECTION=RIGHT faz o texto correr para a direita. Exemplo: <MARQUEE DIRECTION=RIGHT>Texto</MARQUEE> HEIGHT=n ou n%: define a altura do marquee. Sendo que n um valor em pixels ou um percentual da altura da janela. Exemplo: <MARQUEE HEIGHT=20 WIDTH=50%>Texto</MARQUEE> WIDTH=n ou n%: define a largura do marquee. Sendo que n um valor em pixels ou um percentual da largura da janela. Exemplo: <MARQUEE HEIGHT=20 WIDTH=50%>Texto</MARQUEE> HSPACE=n: define margens esquerda e direita do marquee. Sendo que n um valor em pixels. Exemplo: <MARQUEE HSPACE=10>Texto</MARQUEE> VSPACE=n: define margens acima e abaixo do marquee. Sendo que n um valor em pixels. Exemplo: <MARQUEE VSPACE=10>Texto</MARQUEE> LOOP=n: define quantas vezes o texto ir cruzar o marquee. Sendo que n o nmero de vezes que o texto ir cruzar o marquee. Se n for igual a 1 ou a INFINITE, o texto ir se movimentar infinitamente. Exemplo: <MARQUEE LOOP=2>Texto</MARQUEE> SCROLLAMOUNT=n: controla a velocidade do texto, definindo o nmero de pixels entre cada redesenho do texto. Sendo que n o valor em pixels que separa cada redesenho do texto. Quanto maior for n, mais rpido ser o movimento texto.

- 35 -

APOSTILA DE HTML
Exemplo: <MARQUEE SCROLLAMOUNT=20>Texto</MARQUEE> SCROLLDELAY=n: controla a velocidade do marquee ao definir os intervalos de redesenho do texto. Sendo que n o valor em milisegundos do intervalo de redesenho do texto. Quanto menor for n, mais rpido ser o texto. Exemplo: <MARQUEE SCROLLDELAY=10>Texto</MARQUEE>

15.2 Trechos de vdeo

No Microsoft Internet Explorer 2.0 possvel incluir um trecho de vdeo numa pgina. A Microsoft inventou um atributo chamado DYNSRC (de dynamic source, fonte dinmica) para ser includo dentro do tag <IMG>. O formato de arquivo de vdeo suportado o AVI (Audio Video Interleave). Para que os demais navegadores, incapazes de entender o atributo DYNSRC, possam tambm receber a imagem, ainda que esttica, inclui-se no mesmo tag o atributo SRC com o arquivo de imagem comum correspondente. <IMG DYNSRC=video.avi SRC=imagem.gif WIDTH=50 HEIGHT=50 START=MOUSEOVER LOOP=INFINITE> O exemplo acima implementa numa pgina lida com o Internet Explorer 2.0 o arquivo de vdeo video.avi. Outros navegadores (como o Netscape) iro mostrar apenas a imagem imagem.gif. O atributo START=MOUSEOVER indica que o trecho de vdeo comear a ser executado quando o usurio passar o mouse sobre ele. O atributo LOOP=INFINITE declara que o vdeo ser exibido continuamente at que o usurio mude de pgina. Outros atributos so: START=FILEOPEN: o vdeo comea a ser exibido assim que a pgina carregada CONTROLS: adiciona um conjunto de botes para controlar a execuo do vdeo LOOP=n: Executa o trecho de vdeo n vezes. Se for colocado LOOP=5, o vdeo ser exibido cinco vezes. LOOPDELAY=n: especifica, em milisegundos, de quanto em quanto tempo o trecho de vdeo ser executado quando colocado em loop.

15.3 Trilha sonora

O Internet Explorer 2.0 tambm aceita colocar uma trilha sonora em uma pgina Web. Como no tag que implementa a execuo de vdeo, possvel utilizar um dispositivo de looping, que pode manter o arquivo tocando constantemente ou por um nmero definido de vezes. Para colocar uma trilha sonora, a Microsoft criou o tag BGSOUND. Pode-se incluir trechos de udio nos formatos WAV, AU ou MIDI. <BGSOUND SRC=som.wav LOOP=INFINITE> Neste exemplo, o arquivo de udio som.wav ser executado constantemente at que o usurio troque de pgina. S depois que a pgina carregada que o som comea a tocar. possvel tambm fazer com que o som seja tocado por um nmero determinado de vezes. Exemplo: <BGSOUND SRC=som.wav LOOP=5> No exemplo acima, o arquivo som.wav ser executado cinco vezes.

- 36 -

APOSTILA DE HTML

16 ERROS MAIS COMUNS

Esquecer de fechar as aspas s vezes defeitos estranhssimos aparecem no documento HTML. Por exemplo, simplesmente uma parte do texto desaparece. preciso conferir se no foi esquecido de fechar as aspas utilizadas em um nome de arquivo dentro de uma referncia. Colocar os nomes dos arquivos em maisculas Os servidores que utilizam o sistema operacional Unix a maioria dos servidores Internet fazem diferena quando o nome de um arquivo escrito em maisculas ou minsculas (caixa alta e caixa baixa). Para o servidor, os arquivos TEXTO.TXT e texto.txt so diferentes. o que se chama de sensitivo caixa (case sensitive, em ingls). A sensitividade caixa tambm mantida quando o nome do arquivo colocado entre aspas na referncia. Se o arquivo foi nomeado como imagem.gif e dentro do documento HTML a referncia para imagem.Gif, o servidor no ir ach-lo. Por isso, deve-se escolher um padro para os nomes dos arquivos (sempre em maisculas ou sempre em minsculas). Esquecer de citar o diretrio em uma referncia Clica-se no link e aparece uma mensagem dizendo que o documento no foi encontrado. Basta checar os links para descobrir se no faltou colocar o diretrio onde est o arquivo. Em mapas clicveis, o cuidado deve ser ainda maior. Deve-se checar as referncias das reas com ligao de hipertexto (no editor de mapas), a localizao do arquivo imagemap (normalmente /cgi-bin/imagemap) e o nome do mapa. Fechar uma clula em um pargrafo diferente ridculo, mas o Netscape insiste em incluir espaos em branco entre as clulas se o tag de fim de clula </TD> ficar separado por uma marca de pargrafo do contedo da clula. O tag </TD> deve ser colocado imediatamente depois do contedo da clula. Exemplo: Errado <TD> <IMG SRC=imagem.gif> </TD> Certo <TD> <IMG SRC=imagem.gif></TD> Fechar uma referncia em um pargrafo diferente Uma variao desse erro acontece com os links de imagem. preciso encerrar a ncora de hipertexto no mesmo pargrafo do contedo da referncia. Do contrrio, o navegador adiciona um trao da cor do link. A soluo a mesma do exemplo anterior: colocar o tag </A> imediatamente depois do contedo do link.

- 37 -