Apostila de HTML Primes

Introduo
Uma pgina da web (webpage) uma fonte de informaes que adequada World Wide Web e que pode ser acessada por um navegador web. Isso quer dizer que ela um documento que feito de modo atender requisitos da rede mundial de computadores e capaz de ser visualizada a partir de um programa especfico para esse fim. As pginas web esto localizadas ou em um computador local ou remoto e disponibilizadas atravs de um servidor web. O acesso a elas pode ser restringido redes locais, apenas ao prprio computador ou ainda ser publicada na Internet. A requisio e o acesso a elas feita por meio de um protocolo chamado HTTP (Hypertext Transfer Protocol, ou Protocolo de transferncia de hipertexto). Originalmente, as pginas web eram arquivos estticos de texto guardados dentro de servidores web. Atualmente, entretanto, comum encontrarmos servidores que geram dinamicamente os arquivos (x)HTML de acordo com a requisio do navegador. Existem ainda maneiras de obtermos comportamento dinmico pelo lado do cliente (navegador) por meio de implementaes de Ajax e JavaScript, por exemplo. As webpages utilizam de HTML (Hypertext Markup Language) para fazer a formatao dos dados. importante notar que HTML no uma linguagem de programao, mas sim de formatao. Isso guarda diferenas fundamentais entre HTML e, por exemplo, JavaScript, uma vez que a primeira limita-se apenas a mudar a maneira como os dados so dispostos na tela. Para melhorar a aparncia das webpages possvel usar cdigo CSS (Cascading Style Sheet) que pode ser escrito em um arquivo em separado ou dentro do prprio HTML. prefervel valer-se da primeira opo uma vez que isso torna seu cdigo mais reutilizvel e, alm disso, o uso de CSS torna-se mais eficiente j que aproveita-se melhor da maneira como o HTTP trabalha, com o navegador baixando uma nica vez as informaes e guardando-as em cache. As imagens so armazenadas tambm como arquivos separados em servidores web. O navegador faz o trabalho de baixar todas as imagens enquanto a pgina processada, mantendo a conexo com o servidor at que todas as informaes sejam baixadas e fornecidas. A grande maioria deles renderiza as imagens juntamente com os textos e outros materiais na pgina a ser exibida.
Elementos
Uma pgina web apresenta uma srie de elementos que sero usados para a interao com o usurio. Eles dividem-se em duas grandes categorias, os que so mostrados e os que no so. Entre os mostrados, temos as informaes textuais, com diversas variaes de renderizao; as informaes no-textuais, como imagens estticas (gif, jpg, png, etc) ou animadas (animated gif, flash, shockwave), udio (midi, wav) e vdeo (wmv, rm, mov, etc), e; informaes interativas que so mais complexas, atreladas interface. Nesse ponto, temos textos interativos, ilustraes interativas, botes, hyperlinks e formulrios. Como elementos no mostrados temos os comentrios, meta dados(DTD), informaes de diagramao e estilo (CSS) e scripts (JavaScript).
Nem todos esses elementos sero tratados no escopo do curso. Muitos deles requerem ferramentas adicionais e uma grande quantidade de recursos do computador, tanto para a criao quanto para a exibio e so usados apenas para tornar mais agradvel a experincia de navegao do usurio.
Comeando sua pgina

Para criar suas prprias pginas no necessrio um vasto arsenal de ferramentas, apenas um editor de texto e um navegador j so suficientes. Para um iniciante at melhor que no sejam usados recursos muito complexos, eles podem fazer com que muitos detalhes triviais, mas importantes, passem despercebidos. Para o nosso curso, usaremos um editor de texto simples de sua preferncia (como o kwrite, o gedit ou o Mousepad). Recursos como o syntax highlighting (ou destaque de sintaxe) so realmente teis durante a criao da sua pgina ao mesmo tempo que no "fazem o trabalho" por voc, ento prudente que voc deixe-o ligado. Qualquer navegador que tenha interface grfica serve para o nosso curso, fique a vontade para escolher o de sua preferncia.
Comearemos com algo bem simples, abra o editor de texto e insira o seguinte:
<html> <head> <title>Título da página</title> </head> <body> Essa é a minha primeira página. <b>Esse texto está em negrito.</b> </body> </html>
Salve o arquivo como teste.html e abra com um navegador. Voc ver o seguinte:
Agora vamos explicar algumas coisas sobre o exerccio acima. Primeiramente, tudo que estiver entre os sinais de menor que e maior que ("<" e ">"), incluindo eles so chamadas "tags". As tags so partes importantes em documentos HTML, elas so as responsveis por toda a formatao do texto. Com elas voc pode dividir o documento em rea de cabealho e corpo, colocar ttulos, criar tabelas, divises, formulrios e ainda formatar trechos especficos do texto, como a parte em negrito acima. A primeira tag <html>. Ela diz ao navegador que esse ponto marca o incio de um documento HTML, enquanto que a ltima tag </html> diz a ele exatamente o que esperado, que esse o fim do documento HTML. O texto que est compreendido entre as tags <head> e </head> informao sobre a rea de cabealho, como voc pode perceber com <title> e </ title> onde o texto que est entre essas tags aparecer no ttulo da janela do navegador. Prosseguindo, temos as tags <body> e </body> que so responsveis por guardar os dados referentes ao corpo do documento. Isso significa que o texto que estiver entre elas ser exibido pelo navegador. Por fim, as tags <b> e </b> faro com que o texto entre elas seja exibido em negrito (em ingls, bold). Voc j deve ter percebido que as tags utilizadas sempre tm um "fechamento" como por exemplo, <html> -> </html>, <head> -> </head> e <body> -> </body>. Isso realmente vlido para uma grande quantidade delas, mas no ser onipresente, portanto fique atento. Uma considerao a ser feita sobre as tags que elas no so sensveis caixa, o que significa que <b> o mesmo que <B> embora as convenes atuais incentivem o uso de todas as tags em letras minsculas. Ento, para seguir os mais novos padres web voc deve usar letras minsculas. O padro xHTML demanda necessariamente o uso delas. Uma outra questo que pode surgir sobre a extenso dos arquivos. Antigamente, muitos sistemas no permitiam salvar extenses que tivessem mais do que trs caracteres e por isso era comum ver arquivos com nomes como "index.htm" ou "home.htm". Hoje em dia raro encontrarmos um sistema moderno que no permita extenses com um nmero de caracteres que vai muito alm de trs, logo totalmente aceitvel usar "index.html" ou "home.html" como o caso do nosso ltimo exemplo (teste.html). Os espaos utilizados para separar uma palavra da outra aparecero normalmente na sua visualizao, porm, caso voc use mais de um espao, eles no sero considerados. Para que isso ocorra, preciso usar uma tag especial. Trataremos agora dos elementos HTML. Considerando o nosso ltimo exemplo, "<b>Esse texto está em negrito</b>" um elemento onde: 1) o elemento HTML inicia-se com a tag de incio "<b>"; 2) o contedo do elemento "Esse texto está em negrito", e; 3) o elemento HTML termina com a tag de fim "</b>". Tambm um elemento HTML o seguinte trecho:
<body> Essa é a minha primeira página. <b>Esse texto está em negrito.</b> </body>
O incio do elemento "<body>" e o fim "</body>". Um detalhe importante a ser mostrado aqui o que diz respeito acentuao. Voc deve ter notado algumas coisas "estranhas" nos exemplos acima, como "é" ou
"á". Essas so referncias para os caracteres especiais como "" ou "" no exemplo acima, mas que tambm so utilizados em outros casos. O uso deles se deve ao fato de que alguns caracteres so reservados, facilmente perceptvel em "<" e ">" que servem para abrir e fechar tags. O que faramos para inserir esses caracteres em um texto dentro do HTML? Usamos referncias especiais para tal, seguindo o exemplo "<" e ">". Falaremos mais sobre eles na hora devida. Usaremos agora algumas tags para tornarmos nosso texto mais complexo. Abra o editor de textos e crie o arquivo "teste2.html". Escreva o cdigo a seguir. Cabealhos, pargrafos e quebras de linha:
<html> <head> <title>Exemplos de texto com cabeçalho, parágrafos e quebras de linha</title> </head> <body> <h1>Esse é um cabeçalho muito grande</h1> <h2>Esse é um cabeçalho um pouco menor, mas bem grande ainda</h2> <h3>Esse é um cabeçalho nem tão grande assim</h3> <h4>Esse é um cabeçalho médio</h4> <h5>Esse é um cabeçalho pequeno</h5> <h6>Esse é um cabeçalho muito pequeno</h6> <hr /> <p>Agora faremos um parágrafo. A tag '<hr />' no código serve para inserir uma linha horizontal, você pode vê-la acima.</p> <p>Note que ao criarmos outro, temos uma linha branca adicionada entre eles</p> Agora o texto está sendo escrito diretamente no corpo do documento, sem nenhuma formatação. <br /> Use a tag vazia '<br />' para quebrar linhas (saltar linhas) senão o seu texto vai ficar bem estranho.  </body> </html>
Agora vamos explicar um pouco mais sobre as tags usadas nesse exemplo. Preservamos a mesma estrutura de "<html><head><title></title></head><body></body></html>", mas acrescentamos diversas outras tags. As que se iniciam com o "h" e so seguidas por um nmero de 1 a 6 ("<h1>" e "<h4>", por exemplo) servem para fazer um cabealho, um texto que se destacar do restante. O nmero determina o tamanho do mesmo, quanto menor o nmero, maior a tipografia. A tag "<hr />" serve para inserir uma linha horizontal ao longo de todo o documento enquanto a "<br />" apenas salta para a prxima linha. Uma observao sobre essas duas tags que ambas podem ser escritas da seguinte maneira: "<br>" ou "<hr>". A razo pela qual se coloca a barra no final dela que elas so tags vazias, isto , no precisam de uma tag para inici-las e outra para termin-las. Os novos padres da web determinam que toda e qualquer tag deve ser fechada, incluindo as tags vazias. Por isso colocamos a barra no final, para indicar que ela se inicia e se fecha nela mesma. Dessa
maneira, garantimos que nosso cdigo possibilite sua reutilizao no futuro, quando as novas normas estiverem em vigor. Alm dessas tags temos os pargrafos, representados por "<p>" e "</p>". O texto compreendido entre elas ser colocado como um pargrafo separado e ao trmino da tag uma nova linha ser inserida. Fora isso, vale ainda comentar no momento sobre os caracteres especiais utilizados. Temos vrios deles nesse exemplo:
so alguns deles. Ao final deste curso teremos uma tabela mostrando cada um deles. Com base no que vimos at aqui, crie um arquivo chamado "seu_nome.html", no esquea de colocar realmente o seu nome. Dentro dele, faa algo dizendo quem voc, seu nome, sua idade, o que faz da vida e qualquer outra coisa que quiser dizer. No se esquea de usar as tags que voc viu at agora. No final desse documento voc ver alguns exemplos dos exerccios que sero passados aqui. Caso precise de alguma referncia, no hesite em consult-los. Algumas tags apresentam atributos que podem ser modificados por voc medida que achar necessrio. Veremos alguns exemplos abaixo, tomando como ponto de partida o exemplo de apresentao usado no exerccio anterior.
<html> <head> <title>Página do Gallois</title> </head> <body> <h1>Olá, seja bem-vindo à minha webpage</h1> <hr /> <p>Meu nome é Felipe Gallois e sou estudante de Ciência da Computação na UDESC. Eu sou bolsista do projeto Fome-Zero em Joinville e responsável por fazer a apostila do curso de criação de páginas web.</p> Caso você encontre algum erro, tenha alguma crítica ou sugestão para a melhoria deste material, mande um e-mail para mim:<br /> felipe@gallois.us<br /><br /> Até a próxima. </body> </html>
Vamos agora alterar alguns atributos, comeando pelo cabealho. Altere:

<h1>Olá, seja bem-vindo à minha webpage</h1>
para
<h1 align="center">Olá, seja bem-vindo à minha webpage</h1>
Em seguida, altere:
<body> para <body bgcolor="blue">
Abra o arquivo e veja as modificaes. O que ocorreu efetivamente? Ao inserir o atributo "align="center"" na tag "<h1>" voc solicitou que o texto fosse alinhado no centro da pgina. No caso do corpo do documento, o atributo "bgcolor="blue"" quer dizer que voc ir alterar a cor do plano de fundo (background color ou bgcolor) para azul (blue). Note que os atributos preferencialmente devem ser escritos em letras minsculas, novamente para atender s novas convenes. Os valores dos atributos devem sempre estar entre aspas, simples ou duplas, indiferente.Fique atento apenas ao caso de voc querer usar um valor de atributo que tenha aspas, onde voc precisar alternar as duas para poder alcanar o resultado desejado, por ex:
Hyperlinks
Um outro recurso amplamente utilizado em HTMLs o hyperlink. Ele serve para ligar um documento outro na Web. Basicamente, ele ser composto pelo endereo de outro
documento e, ao ser clicado, levar voc ao endereo referenciado por ele. Existem duas maneiras de usar hyperlinks nos seus documentos, com textos ou com imagens. O texto aparecer sublinhado e o cursor do mouse ficar diferente ao passar por cima dele. As imagens tero o mesmo efeito de mudana de cursor. Primeiramente ensinaremos a criar links com texto. Eles podem ser criados com a tag "<a href="endereo para onde quer redirecionar">", que deve ser fechada com "</a>". O contedo entre a tag ser o texto que dever ser clicado para que o navegador redirecione. Pode ser qualquer coisa que voc quiser, mas recomenda-se usar alguma coisa intuitiva. A Internet originalmente pretendia usar hyperlinks em abundncia, quando seu contedo ainda era basicamente composto por textos cientficos e documentos. O aumento da velocidade de transferncia e o incio do uso de imagens e meios multimdia na rede ofuscaram um pouco seu propsito original. Um exemplo para o uso de hyperlinks com texto seria:
<a href="http://www.google.com">Google</a>
Um recurso que pode ser til se voc quiser redirecionar a pessoa mas manter a sua prpria pgina aberta adicionar o atributo "target="_blank"" sua tag "<a>". O resultado que ao clicar no link, uma nova janela do navegador abrir com o endereo desejado. Note o exemplo abaixo:
<a href="http://www.google.com" target="_blank">Google</a>
Agora vamos mostrar como voc cria um hyperlink usando uma imagem ao invs do texto. O processo bem semelhante.
<a href="http://www.google.com"><img border="0" src="http://www.google.com.br/intl/ptBR/logos/Logo_25wht.gif" /></a>
No lugar do texto inserimos uma imagem e ela automaticamente se transforma na ncora responsvel por ligar o documento outro. Vamos aproveitar esse exemplo para darmos mais uma explicao, como inserir imagens. Voc deve ter percebido que usamos uma tag diferente logo acima: "<img />". Ela tem seus atributos que sero mostrados em breve. Ela serve exatamente para inserir imagens no documento HTML, servindo tanto para buscar imagens no computador local ou na rede. No nosso caso, usamos para buscar na Internet, mas isso indiferente, o navegador trata qualquer um dos casos muito bem. Para explicar como funciona o mecanismo de usar imagens que esto no computador local, devemos entender dois conceitos antes, o de caminho relativo e o de caminho absoluto. O caminho absoluto indica a localizao do arquivo no computador a partir do diretrio raiz. Por exemplo, um arquivo chamado "foo.bar" que est dentro da pasta home do usurio Joao tem caminho absoluto "/home/Joao/foo.bar" ou o arquivo de configurao padro de grande parte dos Xorg tem caminho absoluto "/etc/X11/xorg.conf". O conceito de caminho relativo distancia-se do de absoluto na medida em que no possvel determinar o caminho do arquivo sem saber a pasta em que se est no momento. Outra diferena que torna-se mais complicado acessar um arquivo que esteja em uma pasta que est numa pasta que no descende da que voc est na rvore de diretrios. Para dizermos o caminho relativo de um arquivo "foo.bar" que est na mesma pasta em
que estamos no momento, podemos dizer que "foo.bar". Suponhamos agora a seguinte estrutura de pastas:
Partindo da pasta arquivos, o caminho relativo do arquivo "foto1.jpg" "fotos/foto1.jpg" enquanto o de "texto2.txt" "/textos/texto2.txt". Dessa maneira, o arquivo "tema1.tem" do projeto1 ter como caminho relativo "projetos/projeto1/tema1.tem". At a no existem muitas complicaes, mas necessrio conhecer um pouco sobre como trabalhar com arquivos que esto em pastas que esto em nveis superiores. Isso exigir o uso de "..". Quando voc estiver na pasta projeto1 e quiser saber o caminho relativo do arquivos "prazos_dos_projetos.txt"dever ter em mente que este arquivo encontra-se em um nvel superior na rvore de diretrios com relao qual voc est no momento. Isso quer dizer que voc deve retroceder um nvel para s ento poder chamar o arquivo desejado, e exatamente para isso ser necessrio o uso de "..". Como soluo, estando na pasta projeto1, o caminho relativo ser "../prazos_dos_projetos.txt". Quando for necessrio retroceder mais nveis ainda, voc precisar usar mais "..". Por exemplo, imagine-se agora no diretrio "projeto2" e deseja saber o caminho relativo para o arquivo "praia3.jpg". Ele ser "../../fotos/fotos_na_praia/praia3.jpg". Os primeiros ".." te
colocaro no diretrio "projetos" e o segundo no "arquivos". Deste ponto em diante voc segue os passos de como se estivesse apenas buscando em sub-diretrios. Dada essa longa explicao, prosseguiremos na parte de imagens no computador local. Fica bem simples se o princpio acima estiver entendido pelo aluno. Para adicionar uma imagem que esteja na mesma pasta do seu documento HTML apenas coloque
<img src="nome_da_imagem" />
Caso ela esteja numa subpasta:

<img src="nome_da_subpasta/nome_da_imagem" />
E, finalmente, se ela estiver em pastas que no descendem da que voc estiver:

<img src="../nome_da_pasta/nome_da_imagem" />
Voc pode descer quantos nveis quiser at encontrar sua imagem, mas recomendado, caso sua imagem esteja em lugares que no sejam o prprio caminho ou uma subpasta, que voc utilize o caminho absoluto. Em geral, quando se est fazendo pginas de grande porte, comum armazenar todas as imagens em subpastas do caminho onde se encontra o documento HTML. Dessa maneira, o uso de caminhos relativos se torna muito mais gil e facilita imensamente no caso de ser necessrio uma mudana de servidor ou da pasta onde se encontram os arquivos, isso porque quando for completada a operao, nenhum caminho precisar ser consertado no seu cdigo.
Imagens
As imagens so elementos extremamente comuns nos documentos web atualmente. Elas fazem parte dos mais variados tipos de pginas e podem ser usadas tanto para decorar como para compor a informao de maneira a torn-la mais compreensvel. difcil navegarmos na Internet e entrarmos em uma pgina que no tenha pelo menos uma imagem. importante notar que as imagens podem ter diversas aplicaes nos documentos web, possvel us-las como decorao para uma pgina, como plano de fundo, como explicao para alguma coisa (como usada nos livros), como ligao para outras pginas (hyperlinks), etc. Os designers fazem muitas coisas com as imagens, principalmente grficos vetoriais, para criar interfaces mais agradveis no uso de pginas, paralelamente ao uso de CSS. O resultado traz pginas muito bonitas, mas que algumas vezes ficam bem pesadas para um computador lento ou uma internet de velocidade mais baixa. Cabe a voc fazer o julgamento de equilibrar o documento e trazer uma experincia agradvel ao usurio, tanto no ponto de vista de qualidade visual quanto em performance. Como vimos anteriormente, o navegador interpreta as imagens a partir da leitura da tag "<img />". Essa tag tem vrios atributos e trataremos de alguns deles a seguir. Vamos supor que voc queira inserir uma imagem que est no mesmo caminho do seu documento.
<img src="imagem.jpg" />
Essa tag deve ser suficiente para fazer com que a imagem aparea em seu navegador. Voc pode tambm querer pegar uma imagem que est na Internet, usando uma URL para encontr-la.
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Flag_of_Brazil.svg/60pxFlag_of_Brazil.svg.png" />
Dessa maneira, voc estar usando uma imagem encontrada na Internet, por exemplo. O uso de caminho absoluto no computador local j foi descrito anteriormente e serve da mesma maneira para inserir uma imagem isolada no documento web. O atributo "alt" serve para dar um nome alternativo s imagens nas webpages.
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Flag_of_Brazil.svg/60pxFlag_of_Brazil.svg.png" alt="bandeira do brasil" />
Ao para com o mouse em cima da imagem, voc poder notar que o texto mostrado ser o que voc colocou em "alt". Esse recurso tambm facilita muito a navegao para uma pessoa que estiver usando navegao em modo texto, uma vez que o nome da imagem que aparecer na tela ser o que estiver no valor do atributo "alt". O uso desse atributo considerado uma boa prtica e deve ser feito sempre que possvel. As imagens tambm podem ser usadas como plano de fundo para dar uma aparncia mais sofisticada sua pgina.
<body background="imagem_de_fundo.jpg">
Nesse exemplo em especfico, no utilizamos a tag "<img />" pois o navegador j entender que ao usar o atributo "background" da tag "<body>" chamaremos uma imagem para ser utilizada como plano de fundo. Outro recurso que provavelmente ser muito utilizado o alinhamento das imagens com relao ao texto. Voc pode basicamente coloc-la acima, no meio ou abaixo do texto. Seguem alguns exemplos:
<p> Uma imagem <img src="imagem.gif" align="bottom" /> no texto </p> <p> Uma imagem <img src="imagem.gif" align="middle" /> no texto </p> <p> Uma imagem <img src="imagem.gif" align="top" /> no texto </p> <p> Uma imagem <img src="imagem.gif" /> no meio do texto </p> <p> <img src="imagem.gif" /> Uma imagem antes do texto </p> <p> Uma imagem depois do texto <img src="imagem.gif" /> </p>
As linhas acima mostram diversas maneiras de se diagramar a imagem juntamente com o texto. Outra maneira de colocar as imagens na direita ou esquerda do seu texto pode ser da seguinte forma:
<p> <img src ="imagem.gif" align ="left"> Um parágrafo com uma imagem. O atributo 'align' está configurado para 'left' (esquerda). A imagem ficará à esquerda do texto; </p>
<p> <img src ="imagem.gif" align ="right"> Um parágrafo com uma imagem. O atributo 'align' está configurado para 'right' (direita). A imagem ficará à direita do texto; </p>
Outros atributos que sero usados com bastante freqncia so os responsveis por redimensionar as imagens. Voc precisar de dois deles, um para altura (height) e outro para largura (width). Veja abaixo como utiliz-los.
<p> <img src="imagem.gif" width="20" height="20"> </p> <p> <img src="imagem.gif" width="45" height="45"> </p> <p> <img src="imagem.gif" width="70" height="70"> </p>
Mudar o valor dos atributos aumenta ou diminui a imagem conforme o que for indicado.
Listas
Ns temos trs tipos de listas em HTML, listas ordenadas, listas no ordenadas e listas de definies. Uma lista no ordenada simplesmente coloca um marcador antes de cada um
de seus elementos enquanto a lista ordenada numera-os. Alm delas temos a lista de definies, que se difere por no ser uma lista de itens. Ela uma lista de termos e definies. Vamos mostrar alguns exemplos para que voc veja melhor. Crie um novo arquivo de texto como nome "listas.html".
<html> <head> <title>Alguns exemplos de listas</title> </head> <body> <p>Vejamos abaixo algumas listas e suas diferentes características.</p> <br /> <p>Primeiramente, uma lista não ordenada.</p> <h4>Frutas</h4> <ul> <li>Maçã</li> <li>Morango</li> <li>Laranja</li> <li>Limão</li> <li>Abacaxi</li> </ul> <br /> <p>Veja agora uma lista ordenada.</p> <h4>Resultados finais do campeonato de Fórmula 1 de 1991.</h4> <ol> <li>Senna</li> <li>Mansell</li> <li>Patrese</li> <li>Berger</li> <li>Prost</li> <li>Piquet</li> </ol> <br /> <p>Vamos definir algumas coisas abaixo.</p> <h4>Bebidas</h4> <dl> <dt>Café</dt> <dd>Bebida quente e preta</dd> <dt>Chá</dt> <dd>Tem de várias cores e pode ser servido tanto quente como gelado</dd> <dt>Água</dt> <dd>Sem cor, e com certeza gelada! ;)</dd> </dl> </body> </html>
O exemplo auto-explicativo com relao aos tipos de listas empregados, mas alguns detalhes sero deixados para voc praticar. As listas possuem atributos tambm. Alguns deles sero explicados aqui. Em essncia, voc usa tags "<ul>" ou "<ol>" para iniciar suas listas (no ordenada e ordenada), e "<li>" para cada um dos itens listados. As tags devem sempre ser acompanhadas de fechamento. No caso da lista de definio voc tem uma pequena
alterao. Alm da sua tag, que "<dl>" cada um dos elementos dela devem ter duas tags diferentes, a "<dt>" para o item em si e "<dd>" para a definio do mesmo. Para mudar um pouco suas listas ordenadas, tente coisas como:
<ol type="A">
Isso far que ao invs de nmeros, a lista seja ordenada com letras do alfabeto maisculas.
A. Ma B. Morango C. Laranja D. Limo E. Abacaxi
Usar:
<ol type="a">
far a mesma coisa, s que desta vez com letras minsculas. ainda possvel usar algarismos romanos para a numerao. Para isso, faa o seguinte.
<ol type="I">
O resultado ser
I. Ma II. Morango III. Laranja IV. Limo V. Abacaxi
Quer algarismos romanos minsculos?

<ol type="i">
Prontinho! Para mudar o tipo de marcadores usados nas listas no ordenadas, use:
<ul type="disc"> <ul type="circle"> <ul type="square">
O primeiro valor do atributo type far com que os marcadores sejam discos preenchidos, o segundo discos vazios no meio (crculos) e o ltimo mostrar quadrados. bem simples, tente todos eles. Outra idia interessante de listas que possvel aninhar vrias delas. No seu arquivo "listas.html", adicione o seguinte cdigo.
<p>Uma lista aninhada para complicar um pouco</p> <h4>Bebidas e alguns de seus tipos</h4> <ul type="circle"> <li>Café</li> <ul type="square"> <li>com leite</li> <li>preto</li> <li>frappé</li> </ul> <li>Chá</li> <ul type="square">
<li>mate</li> <li>erva doce</li> <li>camomila</li> </ul> <li>Água</li> <ul type="square"> <li>com gás</li> <li>sem gás</li> </ul> </ul>
Agora voc tem uma lista aninhada dentro do seu documento e pode ver como ela funciona. possvel aninhar vrios nveis, o que pode ser til dependendo do tipo de lista que voc pretende criar. Isso pode ser usado, por exemplo, para definir a rvore genealgica de uma famlia, embora provavelmente isso te dar muito trabalho! Use sua imaginao.
Tabelas
As tabelas so em HTML exatamente o que so em qualquer outro lugar. Elas servem para organizar os dados de uma maneira que fique mais fcil para as pessoas entenderem ou tornar mais rpida a comunicao em determinadas ocasies. Vamos diretamente ao uso dessas tabelas para depois entrarmos em detalhes. Crie um arquivo chamado "tabelas.html" e coloque o seguinte cdigo.
<html> <head> <title>Uma página com tabelas</title> </head> <body> <table border="1"> <tr> <th>Parte do computador</th> <th>O que ela faz</th> </tr> <tr> <td>Teclado</td> <td>Onde você digita</td> </tr> <tr> <td>Mouse</td> <td>Onde você mexe a seta</td> </tr> </table> </body> </html>
Voc vai criar uma tabela com a tag "<table>". A partir da, voc deve definir as linhas com a tag "<tr>" e as colunas com "<td>". Cada um dos valores colocados entre as tags "<td>" considerado estar dentro de uma clula. A tag "<th>" usada para o cabealho da tabela, um texto destacado para explicar um pouco sobre a coluna em questo. O atributo "border" da tag "<table>" determina a largura da borda da tabela, experimente usar um valor diferente para ver o resultado. Agora insira dentro da tabela, depois dos outros itens as seguintes linhas:
<tr> <td>Adesivo no monitor</td> <td></td>  </tr>
Recarregue o arquivo e voc notar que a clula onde no h nada tambm ficar sem borda, o que pode dar uma aparncia desagradvel para o usurio, solucione o problema colocando o caracter especial " " nela.
<tr> <td>Adesivo no monitor</td> <td> </td>  </tr>
Ele faz com que serja inserido um caracter em branco (non-breaking space), diferente de se colocar um espao normal l, que o navegador deixa de interpretar. Dessa forma, voc engana a tabela como se tivesse realmente algo escrito l, que de fato h, mas o usurio no ver isso.
possvel tambm fazer tabelas sem bordas, dependendo do seu objetivo:

<h4>A mesma tabela, sem bordas e com legenda</h4> <table border="0"> <caption align="top"><i>Minha legenda</i></caption> <caption align="bottom"><i>Minha outra legenda, abaixo da tabela</i></caption> <tr> <th>Parte do computador</th> <th>O que ela faz</th> </tr> <tr> <td>Teclado</td> <td>Onde você digita</td> </tr> <tr> <td>Mouse</td> <td>Onde você mexe a seta</td> </tr> <tr> <td>Adesivo no monitor</td> <td> </td>  </table>
Alm da borda de tamanho zero (ou sem borda, se preferir), temos mais duas tags que at ento no havamos apresentado, uma delas se refere tabela e a outra no. A tag "<caption>" serve para se colocar uma legenda na tabela e pode carregar o atributo "align", que determinar se ela aparecer em cima ou em baixo. A outra tag, "<i>", pode ser usada em qualquer lugar do texto e serve para deixar o texto que est entre seu incio e fechamento em itlico, assim como a tag "<b>" faz ao passar para negrito. Agora mostraremos alguns exemplos onde queremos que um determinado campo ocupe mais de uma clula.
<h4>Telefone de algumas pessoas que acabei de inventar</h4> <table border="1"> <tr> <th>Nome</th> <th colspan="2">Telefone</th> </tr> <tr> <td>João Frango</td> <td>33 2548 3549</td> <td>33 2544 3578</td> </tr> <tr> <td>Valpano</td> <td>44 2578 3258</td> <td>44 2566 5799</td> </tr> </table> <br /> <h4>Telefone das mesmas pessoas que acabei de inventar, formatando diferente</h4> <table border="1"> <tr> <th>Nome</th> <td>João Frango</td> <td>Valpano</td>
</tr> <tr> <th rowspan="2">Telefone</th> <td>33 2548 3549</td> <td>33 2544 3578</td> </tr> <tr> <td>44 2578 3258</td> <td>44 2566 5799</td> </tr> </table>
O exemplo acima, alm da utilidade proposta, mostra mais uma coisa: os cabealhos no precisam necessariamente ser o primeiro elemento da coluna. Na segunda tabela percebemos que ele est na verdade referindo-se linha onde ele est. Voltando ao tema, usamos os atributos "colspan" e "rowspan" para estendermos uma clula, ambos esto disponveis tanto para "<th>" quanto para "<td>". O valor do atributo determinar quantas clulas o campo ocupar, "colspan" para colunas e "rowspan" para linhas. Vale notar que possvel alinhas tabelas e colocar quaisquer outras tags dentro das clulas. possvel, por exemplo, fazer uma lista dentro de uma clula de uma tabela, inclusive aninh-las. S tome cuidado para no fazer algo to complicado que voc possa se perder ao desenvolver. Outra possibilidade ao trabalhar com tabelas alterar a distncia entre o texto e as bordas da tabela. Esse parmetro controlado pelo atributo "cellpadding" e pode ser observado no exemplo a seguir.
<h4>Tabela sem espaçamento entre texto e bordas</h4> <table border="1" cellpadding="0"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> <br /> <h4>Tabela com espaçamento entre texto e bordas</h4> <table border="1" cellpadding="15"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table>
Alm de espaamento entre texto e bordas tambm podemos deixar uma distncia entre uma clula e outra com o atributo "cellspacing", confira nesse outro exemplo.
<h4>Tabela sem espaçamento entre células</h4> <table border="1" cellspacing="0" bgcolor="yellow">
<tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> <br /> <h4>Tabela com espaçamento entre células</h4> <table border="1" cellspacing="15"> <tr> <td bgcolor="yellow">amarelo</td> <td bgcolor="red">vermelho<td> </tr> <tr> <td bgcolor="green">verde</td> <td bgcolor="blue">azul</td> </tr> </table>
Tanto a tabela toda como cada uma das clulas tratam do atributo background, assim como fizemos anteriormente com a tag "<body>". Desse modo, possvel alterar a cor desses elementos, como voc pode observar no exemplo acima. Ainda podemos alinhar o texto dentro de uma clula pelo atributo "align" da mesma maneira como fizemos em outros lugares, o exemplo abaixo uma alterao daquela nossa "agenda de telefones".
<h4>Telefone das mesmas pessoas que acabei de inventar, formatando diferente</h4> <table border="1"> <tr> <th>Nome</th> <td align="center">João Frango</td> <td align="center">Valpano</td> </tr> <tr> <th rowspan="2">Telefone</th> <td>33 2548 3549</td> <td>33 2544 3578</td> </tr> <tr> <td>44 2578 3258</td> <td>44 2566 5799</td> </tr> </table>
Note que o nome das pessoas agora esto centralizados nas clulas. Existem outros atributos que no apresentaremos aqui para no alongarmos demais essa parte, com o contedo apresentando at aqui j possvel construir tabelas bem completas.
Frames
Com frames voc pode inserir mais de um documento dentro da mesma tela do navegador. Voc pode fazer frames horizontais ou verticais, que determinaro a maneira como os documentos sero exibidos. Cada documento HTML ser chamado frame e cada frame independente do outro. Embora isso ajude bastante a organizar o contedo das pginas, algumas desvantagens so notveis, como a maior necessidade de ateno do desenvolvedor para manter os documentos HTML e a dificuldade para a impresso de uma pgina inteira. Basicamente, o frame faz com que o documento se divida todo e em cada uma dessas partes voc possa criar uma pgina independente e diferente de todas as outras que voc est utilizando. Imagine uma bandeja de refeitrio toda dividida onde em cada lugar seja possvel colocar um alimento diferente sem que ele se misture com o outro. Para colocar frames em suas pginas, primeiramente voc tem que utilizar a tag "<frameset>" que o conjunto de frames que sero usados. Essa tag trar definies bsicas, como se os frames estaro divididos em linhas ou colunas e o tamanho das mesmas. Veja abaixo um exemplo de utilizao.
<frameset cols="30%, 70%"> <frame src="uma_pagina.html" /> <frame src="outra_pagina.html" /> </frameset>
Esse exemplo mostra a diviso dos frames com porcentagem de tamanho a ser ocupado na tela. Existe uma outra maneira de fazer isso, que com o nmero de pixels que cada um utilizar.
<frameset cols="200, 300" />
Ou ainda voc pode querer um frame use o espao restante, como no exemplo abaixo:
<frameset cols="20%, 20%, *" />
Use os cdigos abaixo para ter uma idia do funcionamento dos frames.
frames.html <html> <head> <title>Vamos usar uns frames</title> </head> <frameset cols="20%, 80%"> <frame src="uma_pagina.html" /> <frame src="outra_pagina.html" /> </frameset> <body> <noframes>O seu navegador não suporta frames!</noframes> </body> </html> uma_pagina.html <html> <head> <title>Essa é uma página</title> </head> <body> Uma página qualquer! =) </body> </html> outra_pagina.html
<html> <head> <title>Essa é outra página</title> </head> <frameset rows="100, *, 200"> <frame src="oi.html" /> <frame src="tudo_bem.html" /> <frame src="tchau.html" /> </frameset> <body> <noframes>O seu navegador não suporta frames!</noframes> </body> </html> oi.html <html> <frameset cols="30%, 30%, *"> <frame src="oi1.html" /> <frame src="oi2.html" /> <frame src="oi3.html" /> </frameset> <body> <noframes>O seu navegador não suporta frames!</noframes> </body> </html> oi1.html <html> <body bgcolor="red"> <i>oi um</i> </body> </html> oi2.html <html> <body bgcolor="turquoise"> <i>oi dois</i> </body> </html> oi3.html <html> <body bgcolor="cyan"> <i>oi três</i> </body> </html> tudo_bem.html <html> <big>Tudo bem?</big> </html> tchau.html <html> <strong>TCHAU! =D</strong> </html>
Como vrios documentos foram usados, organize-os de maneira a conseguir um resultado parecido com a imagem acima. Alm dos frames tivemos algumas outras tags de formatao. "<strong>" faz basicamente o mesmo que a tag "<b>", isto , deixa o texto em negrito, mas na verdade um texto forte com nfase. "<big>" deixa o texto em tamanho maior na tela. Outro detalhe a ser observado que no caso dos frames que so compostos pelos documentos oi1, oi2 e oi3.html, cada um tem uma cor de fundo diferente. Isso foi usado apenas para mostrar que cada um dos frames totalmente independente do outro, no compartilhando o mesmo plano de fundo. Apenas para complementar, aconselhvel o uso da tag "<noframes>" nos documentos que contenham frames. Essa tag especifica o que dever ser feito caso o navegador no seja capaz de trabalhar com frames.
Forms
Um form uma rea que contm elementos de formulrio em um documento HTML. Esses elementos so responsveis por permitir que o usurio entre com informaes (como campos de texto, reas de texto, menus, etc.) em um formulrio. So definidos pela tag "<form>". Os formulrios so constantes nas pginas encontradas na internet e basicamente todo cliente de webmail tem elementos de formulrio, mais precisamente campo de texto e
campo de senha para poder fazer a entrada de seu login e senha. Mesmo que voc no se lembre deles agora, provavelmente ver que eles so familiares depois de alguns exemplos. Faremos nosso primeiro exerccio exatamente em cima destes dois exemplos. Os formulrios so constantes nas pginas encontradas na internet e basicamente todo cliente de webmail tem elementos de formulrio, mais precisamente campo de texto e campo de senha para poder fazer a entrada de seu login e senha. Mesmo que voc no se lembre deles agora, provavelmente ver que eles so familiares depois de alguns exemplos. Faremos nosso primeiro exerccio exatamente em cima destes dois exemplos:
<html> <head> <title>Estamos quase acabando, paciência com os forms</title> </head> <body> <p>Veja se isto te lembra algo em clientes de e-mail</p> <form> Login:<input type="text" name="login" /><br /> Senha:<input type="password" name="password" /> </form> </body> </html>
Logo acima podemos ver algumas coisas a respeito dos forms. Uma delas que eles no tm muita serventia se no tivermos outros elementos dentro deles, os "<input>" (Lembrese de fechar a tag com um "/" no final dela. Como j disse, todas as tags devem ser fechadas!). So eles os responsveis por mostrar no navegador os campos que sero responsveis por possibilitar a entrada de algum tipo de informao por parte do usurio. O atributo "type" determina o tipo do elemento, veja abaixo alguns deles:
text: Usado quando voc quer inserir caracteres, nmeros e afins no formulrio. password: Bem parecido com o "text" mas sua entrada de dados no aparecer
explicitamente para o usurio. Usada principalmente, como o prprio nome sugere, para a entrada de senhas. radio: So os radio buttons, ou botes de opo. Elas permitem que o usurio seja capaz de escolher um elemento entre um nmero limitados deles. checkbox: As check boxes, ou caixas de seleo, tm uma finalidade parecida com a dos botes, com a diferena de permitir que sejam selecionados mais de um elementos. submit: O boto submit serve para enviar os dados. reset: O boto reset serve para apagar todas as entradas do formulrio. Uma outra tag que bem comum nas pginas a "<select>" que geralmente tambm esto dentro de formulrios. El ter sub-elementos que sero as tags "<option>" que sero valores que popularo o menu drop-down. O exemplo abaixo clarifica o seu uso:
<select name="servico"> <option value="email">E-mail</option> <option value="agenda">Agenda</option> <option value="noticias">Notícias</option> <option value="jogos">Jogos</option> </select>
Podemos usar os botes de opo para fazer algo semelhante ao select:
<input type="radio" name="servico_botao" value="email" /> E-mail<br /> <input type="radio" name="servico_botao" value="agenda" /> Agenda<br /> <input type="radio" name="servico_botao" value="noticias" /> Notícias<br /> <input type="radio" name="servico_botao" value="jogos" /> Jogos<br />
Os botes de opo precisam basicamente de dois atributos para funcionar corretamente. Um deles o "name", que diz o grupo ao qual ele pertence. Os botes devem estar agrupados para quando os dados forem recuperados na pgina que receber o formulrios, as aes corretas sejam tomadas. O atributo "value" o valor do boto em si, dentro do grupo e sabendo qual o nome da opo, possvel tratar de maneira precisa o que dever ocorrer com os dados do formulrio. O mesmo conceito de grupos e valores individuais tambm se aplica s caixas de seleo. Da mesma maneira elas devem ser agrupadas e depois receber um valor especfico para cada uma delas. O exemplo abaixo mostra isso.
E-mail: <input type="checkbox" name="servico_cb" value="email" /><br /> Agenda: <input type="checkbox" name="servico_cb" value="agenda" /><br /> Notícias: <input type="checkbox" name="servico_cb" value="noticias" /><br /> Jogos: <input type="checkbox" name="servico_cb" value="jogos" /><br />
Como voc pode perceber, elas possuem igualmente os campos "name" e "value" que funcionam da mesma maneira. possvel colocar alguns botes tambm, eles podem ter vrias utilidades, mas usando apenas HTML pouco provvel que voc encontre alguma utilidade prtica para eles. De qualquer maneira, veja abaixo como utiliz-los:
<input type="button" value="Oi, eu sou um botão">
No h muito mistrio quanto sua sintaxe, o tipo deve ser "button" e o atributo "value" dir o que aparecer no texto do boto. Vamos agora tratar o caso de dois botes bem comuns em formulrios, "submit" e "reset". Cada um deles um tipo especial de elemento usados, respectivamente, para enviar o formulrio e apagar tudo que foi entrado no mesmo. Para us-los, o tipo (type) da tag "<input>" deve ser "submit" ou "reset". Alm disso, voc pode dar um outro nome para o boto, alterando o valor do atributo "value".
<input type="submit" value="Enviar" /> <input type="reset" value="Apagar" />
As linhas acima mostram o exemplo de um boto "submit" e um "reset", os dois esto com seus "value"s alterados para poder exibir nomes em portugus. Coloque-os em um documento de exemplo, junto com mais campos de formulrio e clique em ambos para entender o funcionamento deles. O boto reset tem uma caracterstica mais explcita, voc ver os campos que j estavam preenchidos serem todos esvaziados, e exatamente isso que ele deve fazer. No caso do "submit" os dados tambm sero apagados, mas algo mais acontece. Veja na barra de endereos do navegador que o URL ser alterado de acordo com os dados que voc tiver inserido. exatamente dessa maneira que as pginas se comunicam. verdade que no faz muito sentido esse exerccio, j que os dados inseridos no so utilizados para nada. O tratamento dessas informaes feita, de maneira mais bsica, pelo CGI mas podem tambm ser usadas diversas linguagens de programao para os mais variados fins. Isso, porm, foge do escopo do presente material e portanto no ser explicado.
Entretanto, fica aqui mais um instruo referente formulrios, eles podem ser usados para redirecionar alguma outra pgina com as informaes que foram fornecidas. Isso feito atravs do atributo "action" da tag "<form>".
<form name="entrada" action="pagina_redirecionada.html">
Esse atributo est intimamente ligado ao boto "submit", uma vez que esse endereo ser acessado ao clicar nele. Resumindo, voc coloca em um formulrio a ao que dever ser desempenhada ao se clicar no boto "submit". O documento receber as informaes que estavam contidas no formulrio e podero, conseqentemente, ser tratadas para algum fim especfico. Faa o teste preenchendo um formulrio e em seguida clicando no boto "submit" que redirecione para uma pgina local vlida, voc poder ver que no final do URL havero os dados que estavam no formulrio da pgina anterior.
Lista de caracteres especiais
Lista de tags

Apostila de HTML Primes

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Apostila de HTML Primes

Hochgeladen von

Copyright:

Verfügbare Formate

Introduo

Comeando sua pgina

Vamos agora alterar alguns atributos, comeando pelo cabealho. Altere:

Caso ela esteja numa subpasta:

E, finalmente, se ela estiver em pastas que no descendem da que voc estiver:

<img src="imagem.jpg" />

Quer algarismos romanos minsculos?

possvel tambm fazer tabelas sem bordas, dependendo do seu objetivo:

<h4>Tabela sem espaçamento entre células</h4> <table border="1" cellspacing="0" bgcolor="yellow">

Podemos usar os botes de opo para fazer algo semelhante ao select:

Lista de caracteres especiais

Das könnte Ihnen auch gefallen

Apostila de HTML Primes

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Apostila de HTML Primes

Hochgeladen von

Copyright:

Verfügbare Formate

Introduo

Comeando sua pgina

Vamos agora alterar alguns atributos, comeando pelo cabealho. Altere:

Caso ela esteja numa subpasta:

E, finalmente, se ela estiver em pastas que no descendem da que voc estiver:

<img src="imagem.jpg" />

Quer algarismos romanos minsculos?

possvel tambm fazer tabelas sem bordas, dependendo do seu objetivo:

<h4>Tabela sem espa&ccedil;amento entre c&eacute;lulas</h4> <table border="1" cellspacing="0" bgcolor="yellow">

Podemos usar os botes de opo para fazer algo semelhante ao select:

Lista de caracteres especiais

Das könnte Ihnen auch gefallen

<h4>Tabela sem espaçamento entre células</h4> <table border="1" cellspacing="0" bgcolor="yellow">