Escolar Documentos
Profissional Documentos
Cultura Documentos
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.1
-4-
APOSTILA DE HTML
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
<hn>
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
<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
IMPORTANTE
<font>
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
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
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
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
<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
- 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
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
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
- 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
- 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>
- 36 -
APOSTILA DE HTML
- 37 -