Apostila de HTML Senai

By SHARK
Cabealho
Elementos Elementos Bsicos HTML Imagens Links listas Modificando o <body> Referncias Tabelas
Devemos usar aspas ou plicas/apstrofos (escrevemos "texto" ou 'texto')? Os valores dos atributos devem ser sempre colocados entre aspas. Normalmente utilizamos as aspas normais ( " ), mas os apstrofos ( ' ) tambm so permitidos. Em alguns casos, o valor do atributo contm o prprio caractere aspas. Numa situao dessas, devemos usar apstrofos (que aqui funcionam como aspas simples) para colocar em torno do valor do atributo, assim:
alt='Ele disse: "No!" ' Notas Rpidas As Tags HTML so utilizadas para marcar elementos HTML. Elas esto cercadas pelos dois caracteres < (menor que) e > (maior que) As tags normalmente aparecem em pares, como <b> e </b> A primeira tag em um par sempre a tag de incio, a segunda tag do par a tag de fim O texto entre o comeo e o fim da tag o contedo do elemento. HTML no sensitive, ou seja, <b> a mesma coisa que <B> Se por acaso voc escreveu os cdigos HTML errado - por exemplo >b> invs de <b> - no se desespere, pois o mximo que pode acontecer o seu navegador interpretar sua pgina de forma diferente do esperado e desenh-la de um jeito maluco. O CABEALHO DE UM DOCUMENTO HTML O Elemento <head> (cabealho do documento)
O elemento <head> contm informao de caractere geral, tambm designada por meta-informao, sobre o contedo do documento e sobre a forma como ele deve ser apresentado. Podemos dizer que o termo metainformao (ou meta-dados) significa dados que descrevem outros dados ou informaes.
A Informao Contida no Elemento <head> Os elementos contidos dentro do elemento <head> no so exibidos na tela do navegador. O padro HTML estabelece que s um pequeno nmero de elementos pode aparecer dentro do cabealho. Eles so: <base>, <link>, <meta>, <title>, <style> e <script>. A construo seria o seguinte:
<head> <p>Aqui temos algum texto</p> </head>
Nesta situao acima, o navegador pode reagir de duas formas:
Apresentar o texto porque ele se encontra dentro de um elemento <p> Esconde o texto porque ele pertence ao cabealho. Se voc colocar um elemento no autorizado, como <h2> ou <p>, dentro do cabealho, a maioria dos navegadores vai escrever este elemento na pgina. Aparentemente, as pessoas que so responsveis pela concepo dos browsers acham que este gnero de erros aceitvel. Esta e outras deficincias dos browsers so parcialmente responsveis pelas ms prticas de codificao adquiridas por muitos criadores de pginas HTML. Uma das razes que levaram criao da linguagem XHTML foi a necessidade de acabar com estas situaes de uma vez por todas. Elementos de cabealho ( <head> )
Descrio Elemento Contm informao importante a respeito do documento mas que no deve ser apresentada no corpo da pgina <title> Define o ttulo da pgina Define um URL base comum para todas as ligaes relativas da <base> pgina <link> Faz referncia a um recurso externo e estabelece a ligao com ele <meta> D informao sobre aquilo que o documento contm <head>
A declarao DOCTYPE
A declarao DOCTYPE serve para indicar o DTD a usar para validar na pgina. Quando utilizada, deve aparecer logo no incio da pgina, antes do elemento <html>
Declarao
Descrio
Define o tipo de documento. Deve ser colocada antes de <!DOCTYPE> qualquer elemento pelo que fica mesmo antes do elemento <html>
O elemento <meta> O elemento <meta> contm informao de caractere geral (metainformao) sobre o documento e deve ser colocado dentro do elemento <head>. Sua finalidade fornecer informao que descreve o documento.
Palavras-chave para os motores de pesquisa Durante alguns anos a utilizao mais freqente da informao fornecida pelo elemento <meta> foi a criao de ndices para sites de busca. Atualmente somente alguns buscadores ainda usam esta informao para indexar pginas, e os de maior sucesso ignoram este elemento. No entanto, h partes que continuam a ser tidas em considerao pelos agentes (robots) dos buscadores, como por exemplo, as indicaes dadas sobre as pastas em que no deve ser feita qualquer indexao. Alguns sistemas de busca (no muitos) usam a informao contida nos elemento meta para indexar as pginas. No fragmento de cdigo seguinte, o elemento <meta> contm uma breve descrio da pgina:
<meta name="description" content="Estudo em ASP.NET, Tutoriais e referncias tcnicas de HTML">
Na parte do cdigo abaixo o elemento <meta> contm uma palavras-chave para indexar a pgina:
<meta name="keywords" content="HTML, ASP.NET,XML">
Como acabamos de ver, os nomes dados ao atributo name indicam claramente a finalidade da informao contida no elemento meta.
Infelizmente, muitos criadores de pginas para a Web abusaram do elemento meta e usaram de forma contrria sua filosofia para enganar os motores de pesquisa. Em conseqncia disso, os sites de busca passaram a ignorar cada vez mais o elemento <meta>, o que acabou dificultando todos aqueles que pretendiam us-lo de forma correta.
Valores desconhecidos para o atributo name do elemento <meta> Algumas vezes encontramos situaes em que o atributo name do elemento <meta> contm um valor desconhecido, como no exemplo seguinte:
<meta name="security" content="low">
Numa situao destas devemos interpretar o elemento meta como contendo informao que especfica do website. Essa informao pode ser importante para o autor da pgina, mas provavelmente irrelevante para os visitantes. possvel que essas informaes sejam teis para algum software que leia a pgina.
ELEMENTOS E ATRIBUTOS Elementos Um elemento uma estrutura semntica, composta de tag de abertura, contedo e tag de fechamento. Os documentos HTML so simples arquivos de texto que contm "tags de marcao". Essas etiquetas definem os elementos da linguagem HTML e os seus contedos. A lista seguinte indica algumas de suas caractersticas: As "tags de marcao" do HTML so usadas para definir os elementos. As tags HTML escrevem-se utilizando os caracteres < e > , entre eles o nome do elemento e os seus atributos. A primeira tag do par a tag de incio (ou de abertura) e a segunda do par a tag de fim (ou de fechamento). Tudo o que se encontrar entre as tags de incio e de fim fazem parte do contedo do elemento. Em XHTML as tags devem ser escritas sempre com letras minsculas, e as tags <b> e <B> no representam o mesmo elemento. Voc se lembra de nosso primeiro exemplo mostrado?!
<html> <head> <title> Exemplo 01</title> </head> <body> Esta minha primeira pgina. <b>Este texto est em negrito</b> </body> </html>
Esta parte abaixo um elemento HTML:
<b>Este texto est em negrito</b>
Repare alguns aspectos do cdigo acima:
Este elemento inicia com a tag: <b> O contedo do elemento este: Este texto est em negrito O elemento termina com a tag final: </b> O propsito da tag <b> colocar o contedo do elemento HTML em negrito (bold)
Segundo Exemplo <body> Esta minha primeira pgina. <b>Este texto est em negrito</b> </body>
Este elemento HTML inicia com tag <body> e termina com a tag </body>. O propsito da tag <body> definir o contedo principal, o corpo do documento.
Atributos das Tags Tag um cdigo usado para marcar o incio e, onde for requerido, o fim de um elemento HTML. H, como exposto acima, tags de abertura e de fechamento. Uma tag de abertura representada por sinal de menor ( < ), um nome de elemento HTML, e um sinal de maior ( > ) (ex. <p>) e deve ser colocada imediatamente antes do incio do contedo do elemento. Uma tag de fechamento se diferencia de uma tag de abertura apenas por uma barra ( / ) antes do nome do elemento (ex. </p>) e deve ser colocada
imediatamente aps o fim do contedo do elemento. Os Atributos servem para definir uma propriedade de um elemento HTML. Os atributos HTML devem ser colocados sempre na tag de abertura, logo aps o nome do elemento, precedido de um espao e composto de um nome de atributo, um sinal de igual ( = ) e um valor de atributo, cercado por aspas duplas ( " ) ou simples ( ) A tag <body> define o corpo ( body ) de uma pgina HTML. No exemplo seguinte adicionei o atributo bgcolor (que significa "background color", ou cor de fundo) para indicarmos que queremos que a pgina fique com uma cor vermelha em seu plano de fundo. <html> <body bgcolor="red"> Este um exemplo com formatao e utilizando atributos. <b>Este texto est em negrito</b> </body> </html>
Vamos considerar agora a tag <table>, que define um elemento de uma tabela. Ao juntarmos o atributo border (que significa borda) com o valor apresentado a seguir, estamos dizendo ao navegador para no colocar as bordas da tabela ( <table border="0"> indica uma espessura nula para a linha de contorno da tabela):
<html> <body> <table border="0"> <tr> <td> Esta a minha primeira tabela. </td> </tr> </table> </body>
</html>
J no exemplo abaixo estamos dizendo ao navegador para desenhar uma linha de contorno com espessura 2 ( border="2" )
<html> <body> <table border="2"> <tr> <td> Esta a minha segunda tabela. </td> </tr> </table> </body> </html>
Os atributos sempre entram em pares nome/valor (name/value), assim: name="value"
Nota 1: Os atributos s podem aparecer nas tags de incio. proibido colocar atributos nas tags de fechamento. Nota 2: Para garantir a compatibilidade com a linguagem XHTML, utilize letras minsculas para escrever o nome dos atributos, e sempre coloque os valores entre aspas.
Atributos podem ser aplicados maioria das tags Voc normalmente usar atributos com mais freqncia em algumas tags, tais como a tag body e raramente usar em outras, como por exemplo, a
tag br que um comando para pular de linha e no precisa de nenhuma informao adicional. Assim como existem muitas tags, tambm existem muitos atributos. Alguns atributos so empregados em tags especficas enquanto outros servem para vrias tags. E vice-versa: algumas tags podem conter somente um tipo de atributo, enquanto outras podem conter vrios tipos. Isto pode parecer um pouco confuso, mas medida que voc for praticando vai constatar que tudo fcil e lgico, bem como vai verificar as inmeras possibilidades que os atributos oferecem.
ELEMENTOS BSICOS DA LINGUAGEM HTML
Cabealhos
Os cabealhos (tambm chamados de Headings) servem para criar ttulos diferenciar as sees da sua pgina. Eles possuem seis valores diferentes, sendo que a de valor 1 a que possui a maior fonte e a de valor 6 possui a menor fonte.
Por exemplo, usando o seguinte cdigo:
<h1> Ttulo 1 </h1> <h2> Ttulo 2 </h2> <h3> Ttulo 3 </h3> <h4> Ttulo 4 </h4> <h5> Ttulo 5 </h5> <h6> Ttulo 6 </h6>
No cdigo acima, o HTML automaticamente solta uma linha em branco entre um ttulo e outro.
Pargrafos
Os pargrafos so definidos com a tag <p>
<p>Este um pargrafo</p> <p>Este um outro pargrafo</p>
No cdigo acima, o HTML automaticamente acrescenta uma linha em branco antes e depois de um pargrafo.
Alinhamentos de pargrafo
Voc j deve ter visto que em certos documentos o texto aparece ora alinhado direita, ora esquerda, no centro ou ento ocupando uniformemente o espao da pgina (texto justificado). Isso pode ser obtido facilmente em HTML. Veja a tabela abaixo:
ELEMENTO <p align=left> <p align=right> <p align=center> <p align=justify>
DESCRIO Alinha o texto esquerda Alinha o texto direita Alinha o texto centralizado Alinha o texto justificado
Note que entre os delimitadores < e > no encontra-se apenas o elemento <p>. Alm dele, existe o texto align="alinhamento". Dizemos que align um atributo do elemento p e alinhamento o valor desse atributo. No caso de <p align="justify">, o valor do atributo align (que significa alinhamento em ingls) justify (justificado). Os atributos, as palavras que seguem o
elemento, informam o navegador a respeito das propriedades que os elementos podem assumir. Confuso?! Pode parecer um pouco confuso, mas no . Como disse a Toya, "Um disco de banda punk pode ter diversas propriedades ou 'atributos' - a cor do disco, tamanho, velocidade, etc, tudo isso so atributos." E eu digo mais: se voc coloca o disco num toca-discos, voc pode ouvi-lo em duas ou no mximo trs velocidades. s vezes d pra ouvir ao contrrio. Mas se voc arremessar seus discos do Fofo, garanto que eles podero girar em muitas outras velocidades. Assim o HTML, com muitas opes para voc exibir seu texto. No HTML, os valores dos atributos podem ser definidos da forma atributo=valor ou atributos="valor" (como em align="justify"), que mais recomendada. Como voc viu, nem todos os cdigos em HTML necessitam de atributos, em especial os comandos de modificao de texto como negrito, itlico, sublinhado, etc. Resumindo, os atributos definem caractersticas adicionais aos elementos. Nas sees seguintes veremos elementos com vrios atributos. Por exemplo, no adianta dizer ao seu navegador pra por um link em alguma parte do seu texto, preciso dizer ao navegador, por exemplo, pra que lugar esse link aponta. isso o que um atributo faz. Criando uma diviso Existem momentos em que queremos que vrios pargrafos possuam um mesmo valor de atributo - centralizado, por exemplo. Ao invs de escrevermos align="justify" a cada abertura de novo pargrafo, podemos usar o elemento div, que cria uma "diviso" no documento na qual alguns atributos so preservados. Vejamos o exemplo:
<div align="center"><p> Pargrafo 1 Pargrafo 1 Pargrafo 1 </p> <p> Pargrafo 2 Pargrafo 2 Pargrafo 2 </p> <p>
Pargrafo 3 Pargrafo 3 Pargrafo 3 </p> </div>
Experimente mudar os atributos do alinhamento pra ver o que acontece!! Na parte de Folhas de Estilo mostrarei como utilizar o elemento div para criar sees lgicas em documentos. Quebras de Linha A tag <br> utilizada quando voc quer terminar uma linha, mas no quer comear um novo pargrafo. Com este comando voc faz com que ocorra uma quebra de linha, onde voc posicionar a tag. Note que para o elemento <br> no existe o comando </br>, isto , a quebra de linha no age numa regio de texto delimitada, mas sim num ponto do texto. Complicado?! Ento vamos l, mais uma vez explicando de uma outra forma: comandos como <b>, <i> e <u> agem sobre uma regio do texto e precisam ser fechados com seus respectivos </b>, </i> e </u>, pois do contrrio esses comandos agiro at o fim do documento. J o comando de quebra de linha, </br>, e alguns outros atuam somente no ponto onde eles aparecem.
Veja o exemplo abaixo da utilizao da tag <br>
<p>Este <br> um par<br>grafo com quebra de linha</p> A tag <br> uma etiqueta vazia, ela no possui tag final.
Comentrios A tag de comentrio utilizada para inserir comentrios no cdigo fonte HTML. Todo tipo de comentrio ignorado pelo navegador, isto , ele no ser exibido na tela. Voc pode utilizar esta tag para explicar seu cdigo fonte ou parte dele, que poder ajud-lo quando voc estiver editando seus cdigos posteriormente.

Note que voc precisa de um ponto de exclamao depois do parnteses de abertura, e no antes do parnteses final.
O HTML uma Linguagem de marcao de texto. Mais especificamente, uma linguagem de marcao de hipertexto. Portanto, antes de comear a falar de HTML, vamos entender o que vem a ser uma linguagem de marcao.Linguagens de marcao (markup languages em ingls) so linguagens que combinam texto com informaes extras sobre o texto. Essa informao extra pode ser representada por diversos smbolos ou palavraschave diferentes, dependendo da linguagem de marcao com que estivermos trabalhando.O HTML no era uma linguagem de formatao de textos qualquer, ela possibilitava ligar textos que estavam num computador a textos que estavam num outro computador, usando como meio a internet. O processador e visualizador de HTML so chamados de navegador, pela caracterstica do hipertexto que permite ao usurio "nadar" na informao.O navegador (tambm chamado de browser), nada mais faz do que abrir arquivos de computador e, caso esses arquivos contenham cdigos HTML, interpret-los segundo o padro do hipertexto e gerar a "pgina html", que a manifestao grfica dos cdigos - aquilo que voc usualmente v quando navega pela internet. Por conveno, os nomes dos arquivos em HTML terminam com .html. Exemplo: index.html, foo.bar.html e etc.hml (existem tambm arquivos html que terminam com .shtml e outras extenses malucas). Observe que esses arquivos podem estar tanto no computador do usurio que usa o navegador quanto em outros computadores: o navegador capaz de abrir esses arquivos desde que eles estejam acessveis - as tais pginas web.
ESTRUTURA DE UMA PGINA EM HTML U ma pgina HTML dividida em duas partes, a cabea e o corpo. Na cabea (ou cabealho) so definidos os atributos principais do documento, como o ttulo e as palavras-chave. O corpo contm a parte visvel do documento, i.e, aquela que voc ver processada em seu navegador. Existe ainda uma regio da pgina que est tanto fora da cabea quanto do corpo (no! no a falta de juzo!), mas no iremos entrar nesse mrito.
Um arquivo HTML constitudo por textos que definem os elementos da linguagem HTML usando "etiquetas de marcao"; As etiquetas de marcao do instrues ao navegador sobre a estrutura do documento e sobre a forma de como a pgina deve ser apresentada graficamente. Os arquivos HTML podem ser escritos usando um simples editor de textos e seus nomes devem possuir a extenso .html Inicie o Bloco de Notas (notepad.exe).
Agora digite o seguinte texto:
<html> <head> <title> Exemplo 01</title> </head> <body> Esta minha primeira pgina. <b>Este texto est em negrito</b> </body> </html>
Salve este arquivo com o nome ex01.htm.
Abra o seu navegador. Agora abra o arquivo que voc salvou acima, chamado index.htm utilizando as opes do menu ou arrastando o cone do arquivo para dentro da janela do navegador. Observe o resultado.
Explicao do Exemplo A primeira tag em seu documento HTML <html>. Esta tag define o incio de um documento HTML e indica ao navegador que todo contedo posterior
deve ser tratado como uma srie de cdigos HTML. A ltima tag em seu documento dever ser </html>. Esta tag indica ao navegador que o fim de seu documento HTML.
O texto entre as tags <head> ... </head> a informao do cabealho. Nenhuma informao contida no cabealho exibida na janela do navegador.
O texto entre as tags <title> ... </title> o ttulo de seu documento. O ttulo ser exibido na legenda do navegador, na parte de cima do browser.
O texto entre as tags <body> ... </body> so as informaes que sero exibidas na pgina.
O texto entre <b> ... </b> ficar com o estilo Negrito (Bold)
Devemos usar a extenso .htm ou .html? Os nomes dos arquivos escritos em HTML devem ter a extenso .html, mas a extenso .htm ainda utilizada. Este fato uma herana dos tempos (pr-histricos no que diz respeito Internet) do MS-DOS e do Windows 16 bits, em que os nomes dos arquivos tinham no mximo 8 caracteres e as suas extenses no podiam ter mais de 3 caracteres. Essas deficincias, que no passado obrigaram a usar a extenso .htm em vez de .html j foram eliminadas. Por isso devemos usar a extenso .html, a no ser que exista uma boa razo para voc estar utilizando .htm (pouco provvel).
Editores "Puros" versus WYSIWYG Existem duas formas de se criar um texto formatado atravs de linguagens de marcao. A primeira consiste em escrever o texto, usando as instrues da linguagem, num editor de texto puro. Em seguida, usa-se o processador de texto para produzir o texto formatado.
A outra maneira usar um editor de textos WYSIWYG (What You See Is What You Get - O Que Voc V O Que Voc Tem). Apesar da sigla ser comprida, o conceito simples: esse tipo de programa composto por um editor de texto que tambm um processador de textos formatados. A diferena aqui que o texto que o usurio est editando e visualizando no o texto puro, mas sim o texto j formatado graficamente, ou seja, o que voc v o que voc tem. Voc provavelmente j usou editores desse tipo. Os editores como o Word, o AbiWord e o OpenOffice Writer so WYSIWYG e os documentos que eles geram utilizam Linguagens de marcao.
Por que utilizamos tags com letras minsculas?! Em HTML os nomes das tags e elementos podem ser escritos tanto com letras maisculas quanto com letras minsculas, tanto que <B> a mesma coisa que <b>. Se voc observar em tutoriais encontrados pela Web, vai notar que os mais antigos geralmente utilizam letras maisculas para escrever os nomes das tags, mas os mais modernos utilizam exclusivamente letras minsculas. Nesta minha apostila utilizo sempre letras minsculas porque existe uma razo muito forte para isso. A nova gerao do HTML uma aplicao do XML e designada por XHTML. O XHTML a melhor linguagem para se criar pginas para a Web, mas mais restrita do que o HTML (rouba algumas das liberdades que o HTML oferece). Ao contrrio do que acontece em HTML, em XML as etiquetas <B> e <b> representam elementos diferentes, visto que em XHTML foi adotado uma conveno segundo a qual todas as etiquetas devem ser escritas com letras minsculas. Por este motivo extremamente recomendvel que se escreva todas as etiquetas com letras minsculas. Deste modo, voc estar adquirindo bons modos e quase no ter trabalho de converter suas pginas HTML para XHTML.
IMAGENS
Alm de manipular texto, o html tambm serve para exibir imagens de uma maneira muito simples, usando para isso o elemento img:
<img src="suico.jpg" width="221" height="300">
O atributo src - source, fonte em ingls - d o nome do arquivo da imagem e o nico atributo obrigatrio para o elemento img. Os atributos para a largura (width) e a altura (height) no so necessrios, mas sero muito teis quando as pessoas estiverem navegando em seu site: quando seu navegador abre um arquivo html e encontra o elemento img, ele usar o respectivo atributo src como o endereo onde est o arquivo de imagem a ser exibido. Em outras palavras, o elemento img apenas passa uma referncia do arquivo de imagem ao navegador, ou seja, voc no est colocando esse arquivo de imagem dentro do seu arquivo html, voc est apenas colocando em seu arquivo html uma referncia a esse arquivo de imagem. O navegador, por sua vez, comea a baixar essa imagem a partir desse endereo atributo enquanto termina de exibir o documento.
Dependendo do tipo de arquivo de imagem, ela s ser exibido pelo navegador quando terminar de ser baixada. Se isso ocorrer e voc no utilizou os atributos width e height no seu documento, o navegador s reservar espao na tela do seu computador para a exibio da imagem quando ela estiver sido baixada, e duranter esse intervalo a formatao do seu documento pode ficar diferente. Para evitar isso - somente por uma questo de estilo - recomendamos que voc sempre use os atributos width e height, que informam ao navegador o tamanho da imagem, antes mesmo
dele comear a baix-la, e assim o espao na tela do seu computador ser apropriadamente reservado para ela.
11.1 - Tamanho de exibio da imagem
Os atributos width e height merecem um pouco mais de ateno. Como vimos, so os atributos que determinam o tamanho que a imagem ser exibida. Existem duas formas de se fazer isso, utilizando o tamanho em pixels (tamanho absoluto) e em valores relativos ao tamanho disponvel da tela do computador, isto , em porcentagem.
Um pixel a menor unidade luminosa da tela do seu computador que os programas podem manipular, e isso depende muito da resoluo da tela do seu computador. Um pixel um quadradinho luminoso. Atualmente as telas de computador tem uma resoluo de 800 pixels de comprimento e 600 de altura, s vezes pode ser de 1024 de comprimento e 768 na altura ou resolues at maiores, de tal modo que nossos olhos j no conseguem distinguir entre pixels contguos.
O tamanho das imagens computadorizadas tambm pode ser medido em pixels, que o tamanho que a imagem vai ocupar na tela do seu computador quando ela for exibida. Para que voc descubra qual o tamanho da sua imagem, voc ter que usar algum programa de edio de imagens ou ento abri-la diretamente no seu navegador. Experimente ir no menu Arquivo e depois em Abrir, no seu nagevador, ou ento digitar a localizao da imagem diretamente na barra de endereos. Quando a imagem for exibida, clique sobre ela com o boto direito do seu mouse e em seguida v em Propriedades. Uma janela com as informaes da imagens - inclusive seu tamanho - dever aparecer. De posse desses valores, basta colocar-los dentro da do img. No exemplo anterior, onde usamos o cdigo width="221" height="300", a imagem foi exibida com 221 pixels de largura e 300 de altura, coincidentemente sendo seu tamanho original. Poderamos ter escrito:
<img src="suico.jpg" width="22" height="30">
Ou seja, a imagem foi mostrada com um tamanho menor do que o original. Tambm poderamos usar tamanhos maiores que original... que tal voc experimentar algo como width="2210" height="3000"?!
O segundo modo de determinar o tamanho de exibio das imagens no navegador consiste em utilizar porcentagem. Por exemplo:
<img src="suico.jpg" width="10%" height="10%"> Resultar numa imagem exibida com um dcimo (10%) do espao disponvel da tela do computador.
Nos dois modos de determinar o tamanho - em pixels e em porcentagem podemos escolher valores independentes para a altura e a largura, de tal forma que a imagem fique distorcida. Olha que engraado:
<img src="suico.jpg" width="50" height="400"> 11.2 - Texto alternativo
Existem ainda outros atributos interessantes para a exibio de imagens. Voc pode incluir uma descrio da imagem para que se, por qualquer razo, algum no consiga ver a imagem ela possa ler uma descrio no espao vazio. Essa descrio tambm aparecer quando voc passar o mouse por sobre a imagem.
Voc pode adicionar uma pequena descrio desta maneira:
<img src="suico.jpg" width="221" height="300" alt="Emma Goldman!">
O atributo alt (texto alternativo) utilizado para dar a pequena descrio, neste caso "Emma Goldman!".
11.3 - Borda da imagem
Uma borda (contorno) da imagem pode ser adicionada com o atributo border:
<img src="suico.jpg" width="10%" height="10%" border="1"> <img src="suico.jpg" width="10%" height="10%" border="2"> <img src="suico.jpg" width="10%" height="10%" border="3">
O valor do atributo border indicar o tamanho dessa moldura.
Alinhamento da imagem possvel ainda colocar imagens e texto um do lado do outro, de diversas formas. Vamos supor a mais simples:
<img src="suico.jpg" width="200" height="200" border="1">
O texto aparece ao lado da imagem.
Esse cdigo pode funcionar muito bem, mas s vezes acontece do texto aparecer abaixo da imagem. Para fazer o posicionamento da imagens e do texto corretamente, basta utilizar o atributo align, que funciona de modo anlogo ao do alinhamento de paragrfos:
<img src="suico.jpg" width="200" height="200" border="1" align="right" border="1"> O texto vai aparecer esquerda da imagem (o atributo right faz que a imagem fique direita da tela), mesmo tendo escrito aps o cdigo sobre a imagem. Enquanto o texto puder ficar ao lado da imagem, ele ficar.
Quando ele no mais couber nesse espao, ele comear a ser exibido abaixo da imagem, como voc pode ver aqui. Utilizar o alinhamento de imagens a melhor maneira de garantir que ela aparecer no local desejado. Espaamento da imagem Notou como o texto do exemplo anterior saiu colado imagem?! possvel definir um espaamento entre a imagem e qualquer objeto (texto, imagem, tabelas) que esteja ao seu lado, acima ou abaixo, usando para isso os atributos vspace (espaamento vertical) e hspace (espaamento horizontal). O valor desses atributos diz ao navegador qual ser o espao em pixels entre a imagem e qualquer objeto:
<img src="suico.jpg" width="200" height="200" border="1" align="left" hspace="5" border="1"> O texto vai aparecer direita da imagem, a cinco pixels de distncia dela. Deu pra notar a diferena?! Utilizando todos esses atributos para a exibio de imagens voc obtm um texto bem diagramado e bonito de ser lido. Nota: Ao utilizar imagens, lembre-se de que elas podem aumentar consideravelmente o tempo de carregamento para ver o contedo de suas pginas, por isso, use-as com cuidado.
Elementos relacionados com imagens
ELEMENTO <img> <map> <rea>
DESCRIO Insere uma imagem Define um mapeamento sobre a imagem ("image map") Define uma rea clicvel sobre um mapa de imagem
Fundos de Pgina
Uma cor ou uma imagem de fundo bem escolhido podem melhorar o aspecto da pgina, mas uma m escolha capaz de causar danos muito graves na legibilidade e no aspecto geral da pgina. O atributo bgcolor do elemento <body>
O elemento <body> possui atributos que nos permitem especificar as cores do texto e a cor de fundo. Tambm podemos usar uma imagem como padro de fundo. O atributo bgcolor nos permite escolher a cor de fundo da pgina. O quadro seguinte mostra trs formas de indicar a cor de fundo da pgina usando um cdigo de cor hexadecimal, um cdigo RGB e um nome de cor (veja mais frente o tpico sobre cores).
<body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black">
As linhas apresentadas mais acima usam formas diferentes (mas todas vlidas) para dar a cor preta ao fundo da pgina.
Nota: a forma recomendada para formatar o texto e os fundos de pgina baseia-se em estilos CSS. A utilizao do atributo bgcolor s se justifica se precisarmos de manter a compatibilidade com navegadores antigos que no suportam CSS (veremos sobre CSS no fim da apostila).
O atributo background
O atributo background estabelece que o padro de fundo da pgina ser uma imagem. O valor deste atributo indica o local onde se encontra a imagem. Se as dimenses da imagem forem inferiores s dimenses da pgina, o navegador repetir a imagem (como num cho de mosaicos ou em uma parede de azulejos), por forma a ocupar todo o fundo da pgina.
O exemplo abaixo mostra bem como se faz isso: <body background="imagem.jpg"> <body background="http://www.tiagosouza.com/imagem.jpg">
O valor do atributo background uma URL (site) que define o local onde se encontra a imagem. Na primeira linha mais acima, demos uma URL relativa e na segunda demos uma URL absoluta.
Nota: a forma recomendada para formatar o texto e os fundos de pgina baseia-se em estilos CSS. A utilizao deste atributo s se justifica se precisarmos de manter a compatibilidade com navegadores antigos que no suportam CSS. Dicas

Sempre que utilizar uma imagem de fundo na pgina, no se esquea destes aspectos: Certifique-se de que o tamanho da imagem (em KBytes) no muito grande, pois em caso afirmativo, o tempo para carregar a pgina aumentaria consideravelmente. Certifique-se de que a imagem de fundo combina bem com a cor do texto. Certifique-se de que o fundo combina bem com as outras imagens da pgina. Verifique se a repetio da imagem de fundo em mosaico resulta em um padro perfeito. Se voc perceber algumas falhas aparentes, utilize outra imagem de fundo ou faa uma edio nesta atual. Certifique-se de que a imagem no incmoda e que no desvia a ateno do texto.
Os atributos bgcolor, background e text do elemento <body> foram reprovados nas recomendaes mais recentes da W3C para a linguagem HTML (HTML 4 e XHTML). A forma recomendada para obter os mesmos resultados baseia-se na utilizao de estilos CSS. A utilizao destes atributos s se justifica se precisarmos de manter a compatibilidade com navegadores antigos que no suportam CSS. So poucos os sites de qualidade que utilizam imagens de fundo, e aqueles que o fazem, usam fundos que no atrapalham a visualizao do site.
LIGAES DE HIPERTEXTO ("LINKS") Essa uma das sees mais importantes desta apostila, pois afinal estamos falando de hipertexto. Queremos que uma pgina HTML possa fazer referncia a outras pginas html ou para qualquer outro tipo de arquivo que se encontre em outros lugares da web. No jargo da internet, voc quer ligar (link) parte da sua pgina com outras. Isso feito de modo muito simples com o elemento a, como segue: <a href="http://www.midiaindependente.org">CMI Brasil</a> Como voc deve ter percebido, o atribudo href (Hipertext Reference / Referncia de Hipertexto) indica o endereo da pgina que voc quer "linkar" (ligar) ao seu documento. No exemplo acima, o texto CMI Brasil aparece como uma referncia para o link. Se voc clicar sobre esse texto, seu navegador automaticamente tentar abrir a pgina http://www.midiaindependente.org Os endereos so escritos na forma de URL (Uniform Resource Locators), que uma maneira que inventaram para se especificar o caminho at se chegar num arquivo que esteja nalgum local da internet.
O formato da URL : protocolo://nome-do-computador/pastas/arquivo O protocolo indica como o navegador ir buscar o arquivo. Nome do computador aquele endereo do tipo www.ninguem.com.br e as pastas so os diretrios dentro desse computador onde esto os arquivos. Uma URL de um artigo do site da CMI Brasil , por exemplo, http://www.sp.senai.br/pt/blue/2004/09/290669.shtml, onde http:// o protocolo, pt, blue, 2004 e 09 so pastas (uma fica dentro da outra) e 290669.shtml o nome do arquivo. http:// \--- www.sp.senai.br \--- pt \-- blue \--- 2004 \--- 09
\--290669.shtml Lembre-se tambm que quando voc acessa o endereo http://www.ninguem.com.br, por exemplo, est na verdade vendo o arquivo http://www.ninguem.com.br/index.html. Os arquivos do tipo index.html sempre so procurados pelo navegador quando voc solicita apenas o nome do site ou uma pasta de um computador. Em html, existem trs formas possveis de se fazer links: os links internos, os links locais (ou relativos) e os links externos.
Links internos Links internos so aqueles que ligam uma seo de uma pgina com uma outra seo da mesma pgina. Por exemplo, se eu quiser fazer uma referncia para a seo Hipertexto dessa nossa apostila, basta que eu primeiro defina um nome para a seo Hipertexto e ento adicione um link pra ela. Isso feito da seguinte forma: 1 - Vou at o incio da seo Hipertexto e adiciono o seguinte cdigo, ao invs de simplesmente escrever o ttulo da seo: <a name="Hipertexto">Hipertexto</a> 2 - Adiciono o link pra essa seo com o seguinte cdigo, <a href="#Hipertexto">V para a seo hipertexto</a> O atributo name serve apenas para dar um nome para uma posio de uma pgina html. O valor de name pode ser qualquer um (nesse caso eu coloquei "Hipertexto"). Quando voc fizer uma referncia a um link interno utilizando o atributo href, voc precisa necessariamente adicionar o caractere # (jogo da velha) antes do nome da sua seo - no nosso caso, #Hipertexto - pois do contrrio seu navegador tentar abri-lo como um link local. Links locais ou relativos Links locais so aqueles que referenciam um arquivo que esteja no mesmo computador que a sua pgina. Links locais no contm o http:// no incio do endereo. Por exemplo, se no meu documento html eu quiser fazer um link para o arquivo links.html que est na mesma pasta do meu documento, no preciso digital o endereo completo, mas apenas: <a href="links.html">Acesse os links!</a> Esse tipo de argumento para o href tambm chamado de links relativos. Se voc quiser linkar uma pgina que esteja do diretrio (pasta) superior da sua pgina, use dois pontos e uma barra antes do nome do arquivo: <a href="../links.html">Acesse os links!</a> A vantagem de voc usar links relativos que voc pode mover todo o seu site para um novo endereo na internet e no precisar reeditar todos os links que apontam para pginas do seu prprio site.
Links externos Links externos so aqueles que podem apontar para qualquer arquivo disponvel na internet, como por exemplo: <a href="http://www.sp.senai.br">SENAI!</a> Os links externos precisam necessariamente conter o prefixo http:// e o endereo completo do arquivo. Alvo (target) Um atributo interessante para o elemento <a href> o target, que permite que o link seja aberto numa outra janela do seu navegador. <a href="http://www.sp.senai.br" target="_blank">Acesse o SENAI!</a> O argumento do atributo target o nome da janela do navegador que abrir o link. Se voc quiser que o link seja aberto numa nova janela, simplesmente escolha qualquer nome como argumento. Elementos para fazer ligaes ELEMENTO <a>
DESCRIO Define uma ncora ou uma ligao de hipertexto
LISTAS A linguagem HTML contm elementos que permitem criar listas de definies, listas ordenadas e listas no ordenadas. Listas No Ordenadas Uma lista no ordenada contm vrios itens marcados todos com o mesmo smbolo (normalmente um crculo pequeno ou um quadrado pequeno). Para criar uma lista no ordenada, utilizamos o elemento <ul> ("unordered list"). Dentro desse elemento, os vrios itens so criados com o elemento <li> ("list item").
O exemplo seguinte mostra uma lista simples:
<ul> <li>Rum</li> <li>Bagao</li> </ul>
Este o aspecto de como vai ficar em seu navegador:
Rum Bagao
Dentro de uma lista no ordenada podemos colocar pargrafos, quebras de linha, imagens, outras listas, etc. Listas Ordenadas
Uma lista ordenada contm vrios itens numerados e criada com o elemento <ol> ("ordered list"). Os itens da lista definem-se com o elemento <li> ("list item").
<ol> <li>Rum</li> <li>Bagao</li> </ol>
Rum Bagao Dentro de uma lista ordenada podemos colocar pargrafos, quebras de linha, imagens, outras listas, etc. Listas de Definies Uma lista de definies no constituda por uma srie de itens, mas sim por vrios termos acompanhados de descries de seus significados. As listas de definies so criadas com o elemento <dl> ("definition list") O nome de cada termo fica dentro de um elemento <dt> ("definition term") e a sua descrio fica no elemento <dd> ("definition description")
<dl> <dt>Rum</dt> <dd>Bebida espirituosa muito apreciada pelos piratas do Caribe</dd>
<dt>Bagao</dt> <dd>Bebida com elevado teor alcolico. A sabedoria popular atribui-lhe fortes propriedades teraputicas.</dd> </dl>
Rum Bebida espirituosa muito apreciada pelos piratas do Caribe Bagao Bebida com elevado teor alcolico. A sabedoria popular reconhece-lhe fortes propriedades teraputicas.
Dentro de um elemento <dd> podemos colocar pargrafos, quebras de linha, imagens, outras listas, etc.
Elementos para Listas
ELEMENTO <ol> <ul> <li> <dl> <dt> <dd> <dir> <menu>
DESCRIO Define uma lista ordenada Define uma lista no ordenada Insere um item na lista Insere uma lista de definies Apresenta a definio de um termo Insere a definio de um termo Desuso. Utilize <ul> Desuso. Utilize <ul>
MODIFICANDO O CORPO DO DOCUMENTO Como j vimos, o elemento body engloba o corpo do seu documento HTML. Ele possui muitos atributos que possibilitam modificar a aparncia da sua pgina, como cor de fundo ou das letras. Esses atributos tambm podem ser utilizados junto com o atributo td. Aqui mostraremos apenas os atributos que interferem nas cores da sua pgina:
bgcolor: define a cor de fundo de um documento text: a cor do texto link: a cor dos links alink: a cor dos links ativos atualmente (a pgina que voc est visitando) vlink: cor dos links j visitados Os argumentos so o nome ou o nmero de uma cor, exatamente como no caso do atributo color usado no elemento font. Por exemplo:
<html> <head> <title>Isso uma confuso!</title></head> <body bgcolor="black" text="gray" link="red" alink="white"> Isso uma pgina em html. </body></html>
Essa uma pgina HTML onde o fundo ser preto, com letras cinzas, links em vermelho e links ativos em branco. Essas so as definies globais de cor para seu documento, e a qualquer instante voc pode mudar as cores com o elemento font.
GUIA DE REFERNCIA RPIDA Como resumo de todo o cdigo HTML apresentado at agora, deixo algumas tabelas de referncia rpida que podem ser at impressas e guardadas no bolso.
Caractersticas gerais de um documento HTML CDIGO html head title body EXIGE FECHAMENTO sim sim sim sim
FUNO bloco interno considerado documento html bloco que define a cabea do documento bloco que define o ttulo do documento bloco interno considerado o corpo do html
Aparncia do documento CDIGO b i u font EXIGE FECHAMENTO sim sim sim sim
FUNO bloco em negrito bloco em itlico bloco sublinhado muda as caractersticas da fonte
pre
mantm o texto pr-formatado
sim
Quebra de linha, pargrafos e divises CDIGO br center p div FUNO quebra de linha texto centralizado pargrafos cria uma diviso
EXIGE FECHAMENTO no sim recomendado sim
Atributos diversos CDIGO ATRIBUTO FUNO p, div align alinhamento font font font face color size fonte, nome da fonte cor tamanho ver a tabela de cores disponvel na pasta APOIO -7 a +7 VALORES POSSVEIS letf, right, justify, center
Espaamento e entidades CDIGO FUNO espao simples EXIGE FECHAMENTO no uma tag
O documento HTML bsico <html> <head> <title>Aqui colocamos o ttulo</title> </head> <body> Aqui colocamos os contedos visveis
</body> <html>
Elementos de cabealho (para captulos ou seces) <h1>Cabealho maior</h1> <h2>. . . </h2> <h3>. . . </h3> <h4>. . . </h4> <h5>. . .</h5> <h6>Cabealho menor</h6>
Elementos para texto <p>Isto um pargrafo</p> <br> (mudana forada de linha) <hr> (linha horizontal) <pre>Isto texto pr-formatado</pre>
Estilos lgicos <em>Isto texto enfatizado</em> <strong>Isto texto forte</strong> <code>Isto cdigo de computador</code>
Estilos fsicos <b>Isto texto em negrito</b>
<i>Isto texto em itlico</i>
Ligaes e ncoras <a href="http://www.sp.senai.br/">Isto uma Ligao</a> <a href=" http://www.sp.senai.br/"><img src="URL" alt="Texto alternativo"></a> <a href="mailto:pmagi@ig.com.br">Enviar e-mail</a>
Uma ncora com nome: <a name="dicas" id="dicas">Dicas teis</a> <a href="#dicas">Saltar para a Seo de Dicas</a>
Lista no ordenada <ul> <li>Primeiro item</li> <li>Item seguinte</li> </ul>
Lista ordenada <ol> <li>Primeiro item</li> <li>Item seguinte</li> </ol>
Lista de definies
<dl> <dt>Primeiro termo</dt> <dd>Definio</dd> <dt>Termo seguinte</dt> <dd>Definio</dd> </dl>
Tabelas <table border="1"> <tr> <th>um cabealho</th> <th>outro cabealho</th> </tr> <tr> <td>algum texto</td> <td>mais texto</td> </tr> </table>
Subjanelas (molduras, ou "frames") <frameset cols="25%,75%"> <frame src="pagina1.html"> <frame src="pagina2.html"> <frameset>
Formulrios <form action="http://www.pesquisa.com/processar.php" method="post/get"> <input type="text" name="lastname" value="Nabo" size="30" maxlength="50"> <input type="password"> <input type="checkbox" checked="checked"> <input type="radio" checked="checked"> <input type="submit"> <input type="reset"> <input type="hidden"> <select> <option>Rabanetes <option selected>Alhos <option>Cebolas </select> <textarea name="Comentario" rows="60" cols="20"></textarea> </form>
Entidades < representa o mesmo que < > representa o mesmo que > © representa o mesmo que
Outros Elementos 
<blockquote> Texto citado a partir de uma fonte externa. </blockquote> <address> Endereo (1 linha)<br> Endereo (2 linha)<br> Cidade<br> </address>
TABELAS Tabelas auxiliam na visualizao de dados ou na diviso de sua pgina em setores. Entenda por uma tabela HTML como sendo semelhante a uma tabela que voc desenharia numa folha de papel ou num outro programa de computador. O elemento principal de uma tabela o table e aqui segue um exemplo simples de tabela:
<table border="1"> <tr> <td>Primeira</td> <td>Segunda</td> </tr> <tr> <td>Terceira</td> <td>Quarta</td> </tr> </table>
Em HTML, as tabelas so divididas em linhas e clulas. Na tabela acima, a primeira linha contm as clulas Primeira e Segunda, enquanto que a segunda linha contm as clulas Terceira e Quarta. Dentro de um bloco table, os principais elementos que voc utilizar so o tr, ou table row (linha), e o td, ou table data (clula). Dessa forma, podemos definir as
linhas e as clulas da tabela. mandatrio que um bloco td esteja definido dentro de um bloco tr, ou seja, que as clulas estejam dentro de linhas. No exemplo anterior, criamos uma linha com tr e em seguida, dentro de um bloco td, escrevemos o texto da clula (Primeira). Abrimos outro bloco td nesse mesmo bloco tr, onde colocamos o texto da segunda clula (Segunda). Depois, fechamos a linha com o </tr> para em seguida abrir uma nova linha, onde criamos as clulas contendo os textos Terceira e Quarta. O atributo border no elemento table serve para dar borda tabela. Sem o ele no ficaria muito distinto onde comea e termina cada uma das clulas:
<table> <tr> <td>Primeira</td> <td>Segunda</td> </tr> <tr> <td>Terceira</td> <td>Quarta</td> </tr> </table>
Dentro de um bloco td possvel colocar cdigos HTML e inclusive criar at tabelas dentro de clulas! Veja s:
<table border="1"> <tr> <td>Primeira</td> <td>Segunda</td> </tr> <tr>
<td>Terceira</td> <td> <table border="1"> <tr> <td>Quarta</td> <td>Quinta</td> </tr> </table> </td> </tr> </table>
Espaamento entre clulas Para controlarmos a distncia entre duas clulas, utilizamos o atributo cellspacing, cujo argumento dado em pixels:
<table cellspacing="20" border="1"> <tr> <td>Primeira</td> <td>Segunda</td> </tr> <tr> <td>Terceira</td> <td>Quarta</td> </tr>
</table>
Para controlar o espaamento vertical, utilizamos o cellpadding:
<table cellspacing="20" cellpadding="35" border="1"> <tr> <td>Primeira</td> <td>Segunda</td> </tr> <tr> <td>Terceira</td> <td>Quarta</td> </tr> </table>
Preenchimento de clulas
Pode ser que voc queira uma tabela onde a primeira linha tenha duas clulas, a segunda com apenas uma clula e a terceira com trs clulas. Faremos o seguinte:
<table border="1"> <tr> <td>Primeira</td> <td>Segunda</td> </tr> <tr>
<td>Terceira</td> </tr> <tr> <td>Quarta</td> <td>Quinta</td> <td>Sexta</td> </tr> </table>
Percebeu como a tabela ficou cheia de buracos?! Para que as clulas preencham os buracos, utilizaremos o atributo colspan:
<table border="1"> <tr> <td>Primeira</td> <td colspan="2">Segunda</td> </tr> <tr> <td colspan="3">Terceira</td> </tr> <tr> <td>Quarta</td> <td>Quinta</td> <td>Sexta</td> </tr> </table>
Da mesma forma, se quisermos uma coluna com apenas uma clula e outra com duas, poderamos usar o atributo rowspan. Veja a diferena entre usarmos e no usarmos o rowspan:
<table border="1"> <tr> <td>Primeira</td> <td>Segunda</td> </tr> <tr> <td>Terceira</td> </tr> </table>
<table border="1"> <tr> <td rowspan="2">Primeira</td> <td>Segunda</td> </tr> <tr> <td>Terceira</td> </tr> </table> Largura de clulas e tabelas Para escolher a largura de tabelas e clulas, utiliza-se o j conhecido atributo width, cujo argumento idntico para o caso de imagens:
<table border="1" width="200"> <tr> <td width="30%">Primeira</td> <td width="70%">Segunda</td> </tr> <tr> <td>Terceira</td> <td>Quarta</td> </tr> </table> Note que quando o width utilizado com o elemento table, a largura referese largura da pgina, enquanto que quando usado dentro de um td a largura referente ao tamando da tabela. Isso tudo desde que o argumento seja dado em porcentagem e no em pixels.

Apostila de HTML Senai

Caricato da

Informazioni sul documento

Descrizione originale:

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Apostila de HTML Senai

Caricato da

Copyright:

Formati disponibili

By SHARK

<head> <p>Aqui temos algum texto</p> </head>

Nesta situao acima, o navegador pode reagir de duas formas:

<meta name="description" content="Estudo em ASP.NET, Tutoriais e referncias tcnicas de HTML">

<meta name="keywords" content="HTML, ASP.NET,XML">

<meta name="security" content="low">

Esta parte abaixo um elemento HTML:

<b>Este texto est em negrito</b>

Repare alguns aspectos do cdigo acima:

Os atributos sempre entram em pares nome/valor (name/value), assim: name="value"

ELEMENTOS BSICOS DA LINGUAGEM HTML

Por exemplo, usando o seguinte cdigo:

Os pargrafos so definidos com a tag <p>

<p>Este um pargrafo</p> <p>Este um outro pargrafo</p>

ELEMENTO <p align=left> <p align=right> <p align=center> <p align=justify>

Pargrafo 3 Pargrafo 3 Pargrafo 3 </p> </div>

Veja o exemplo abaixo da utilizao da tag <br>

Agora digite o seguinte texto:

Salve este arquivo com o nome ex01.htm.

<img src="suico.jpg" width="221" height="300">

11.1 - Tamanho de exibio da imagem

<img src="suico.jpg" width="22" height="30">

<img src="suico.jpg" width="50" height="400"> 11.2 - Texto alternativo

Voc pode adicionar uma pequena descrio desta maneira:

<img src="suico.jpg" width="221" height="300" alt="Emma Goldman!">

11.3 - Borda da imagem

O valor do atributo border indicar o tamanho dessa moldura.

<img src="suico.jpg" width="200" height="200" border="1">

O texto aparece ao lado da imagem.

Elementos relacionados com imagens

ELEMENTO <img> <map> <rea>

<body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black">

DESCRIO Define uma ncora ou uma ligao de hipertexto

O exemplo seguinte mostra uma lista simples:

<ul> <li>Rum</li> <li>Bagao</li> </ul>

Este o aspecto de como vai ficar em seu navegador:

<ol> <li>Rum</li> <li>Bagao</li> </ol>

Este o aspecto de como vai ficar em seu navegador:

<dl> <dt>Rum</dt> <dd>Bebida espirituosa muito apreciada pelos piratas do Caribe</dd>

Este o aspecto de como vai ficar em seu navegador:

Elementos para Listas

ELEMENTO <ol> <ul> <li> <dl> <dt> <dd> <dir> <menu>

mantm o texto pr-formatado

EXIGE FECHAMENTO no sim recomendado sim

Estilos fsicos <b>Isto texto em negrito</b>

<i>Isto texto em itlico</i>

Lista no ordenada <ul> <li>Primeiro item</li> <li>Item seguinte</li> </ul>

Lista ordenada <ol> <li>Primeiro item</li> <li>Item seguinte</li> </ol>

<dl> <dt>Primeiro termo</dt> <dd>Definio</dd> <dt>Termo seguinte</dt> <dd>Definio</dd> </dl>

Outros Elementos

<table border="1"> <tr> <td>Primeira</td> <td>Segunda</td> </tr> <tr>

Para controlar o espaamento vertical, utilizamos o cellpadding:

<table border="1"> <tr> <td>Primeira</td> <td>Segunda</td> </tr> <tr>

<td>Terceira</td> </tr> <tr> <td>Quarta</td> <td>Quinta</td> <td>Sexta</td> </tr> </table>

Potrebbero piacerti anche