Html e Xhtml

Pgina 1

HTML

Sumrio
Introduo ..................................................................................................................................... 4 Introduo ao HTML .................................................................................................................... 4 Introduo ao XHTML.................................................................................................................. 4 Histrico e verses do HTML ....................................................................................................... 5 Histrico e verses do XHTML .................................................................................................... 6 A WEB SEMNTICA ................................................................................................................ 7 Browsers........................................................................................................................................ 8 TAGS ............................................................................................................................................ 9 Conceito de Tag ........................................................................................................................ 9 Tags de Ttulo ........................................................................................................................... 9 Este o primeiro nvel de cabealho ............................................................................................. 9 Estrutura bsico de um documento ............................................................................................. 10 Links............................................................................................................................................ 10 Links para um endereo de email ............................................................................................ 12 Outros atributos ....................................................................................................................... 12 Imagens ....................................................................................................................................... 13 Outros atributos .................................................................................................................... 14 Tabelas ........................................................................................................................................ 16 Qual a diferena entre as tags <tr> e <td> .............................................................................. 16 Atributos.................................................................................................................................. 17 Mais atributos .......................................................................................................................... 18 O que inserir em tabelas .......................................................................................................... 18 Mais Sobre Tabelas ..................................................................................................................... 19 Colspan.................................................................................................................................... 19 rowspan ................................................................................................................................... 19 Para que serve o DOCTYPE .................................................................................................... 20 Validao do documento HTML ............................................................................................. 20 Elemento nvel de bloco e inline ................................................................................................. 21 Elementos nveis de bloco ........................................................................................................... 21 Exemplos de tags nvel de bloco: .......................................................................................... 21 Elementos inline .......................................................................................................................... 21 Diferente dos elementos nvel de bloco os inline no comeam em nova linha. Exemplos de tags inlines: ............................................................................................................................ 21 Elementos invisveis.................................................................................................................... 21 Exemplos de elementos invisveis: ....................................................................................... 21 Html e Xhtml Pgina 2

Elementos e atributos (X)HTML ................................................................................................ 22 Elementos e Atributos comuns................................................................................................ 22 MDULO EVENTOS INTRNSECOS ............................................................................................... 25 O que so eventos intrsecos?.................................................................................................. 25 Eventos do documento ........................................................................................................ 25 Eventos das formas.............................................................................................................. 25 Eventos de teclado............................................................................................................... 25 Eventos do mouse................................................................................................................ 26 Principais tags e atributos............................................................................................................ 26 Cabealhos....................................................................................................................................... 27 Pargrafos........................................................................................................................................ 27 Links.............................................................................................................................................. 27 Listas.............................................................................................................................................. 28 Formataode caracteres....................................................................................................................... 29 Outroselementos................................................................................................................................ 30 Imagens .......................................................................................................................................... 31 Frames............................................................................................................................................ 31 Tabelas ........................................................................................................................................... 32 Formulrios...................................................................................................................................... 33 Codificao de caracteres ............................................................................................................ 34 Assegurando o funcionamento da declarao ............................................................................. 35 BIBLIOGRAFIA: ....................................................................................................................... 36

Html e Xhtml

Pgina 3

HTML e XHTML

Introduo
Nesta primeira parte do curso vamos falar sobre a linguagem HTML. Podemos dizer que o HTML a linguagem me da web. importante aprendermos o HTML, para poder trabalhar com outras linguagens. O HTML responsvel pela parte pesada do site em toda sua estrutura. Hoje, existe o XHTML, que veio para substituir o HTML.Voc deve se perguntar, por que ento eu vou aprender HTML em vez de aprender logo XHTML? importante que voc aprenda o bsico primeiro, a linguagem XHTML no to diferente do HTML, mas melhor que aprender o HTML primeiro que tudo ficar mais fcil para aprender o XHTML. E difcil achar algum tutorial ou apostila ensinando o XHTML, j que praticamente o HTML modificado, com maneiras de fechar as tags diferente e algumas outras mudanas pequenas. Ento, aprenda primeiro pelo HTML e depois faa a comparao e veja as diferenas. Ser muito mais fcil entender o XHTML depois de ter visto o HTML.

Introduo ao HTML
O HTML a linguagem me usada para construir os sites web pginas pela internet afora. Apesar de ser coisa do passado, um site pode ser feito apenas com HTML, sem o HTML no possvel montar uma pgina de internet. O HTML foi ficando obsoleto, por ser uma linguagem limitada, no podendo trabalhar com grficos e animaes, por exemplo, apenas texto e imagens estticas ou GIFs animados sem muita complexidade. Hoje usado o HTML, junto com alguma outra linguagem, ou com outras linguagens. Sim, porque vamos supor que voc queira colocar animaes em seu site ou at mesmo fazer pequenas alteraes no ponteiro do mouse, mensagem na barra de ttulo, mensagens de aviso. Isso no seria possvel somente com o HTML. So utilizadas linguagens como o JavaScript ou DHTML(Dynamic HTML) juntamente com o HTML. Hoje so desenvolvidas pginas com banners em Flash, Fireworks, Photoshop, pginas feita toda em Flash(o que no recomendvel para que no tem banda larga), pginas feitas no Fireworks, mas introduzido e alinhado em uma site usando HTML e CSS.

Introduo ao XHTML
Um arquivo XHTML um arquivo HTML, que pode ser lido por qualquer browser. No estamos falando de um novo HTML, com novas tags ou coisa assim. Pelo contrrio, o XHTML foi feito para funcionar mesmo em navegadores antigos. Mas, ao mesmo tempo, Um arquivo XHTML tambm um arquivo XML vlido, que pode ser lido por qualquer interpretador de XML. Meu primeiro conselho, nesse caso, que voc, se no trabalha com XML, deixe preocupao com o XHTML para depois de dominar bem o cdigo semntico e o layout tableless. No porque seja complicado, pelo contrrio, transformar HTML em XHTML bem simples, mas simplesmente porque voc pode obter benefcios muito significativos, e muito mais rapidamente, aprendendo CSS do que XHTML.
Html e Xhtml Pgina 4

O segundo conselho que voc comece a estudar o assunto. Depois de dominar bem layouts CSS, mergulhe no XML. A maioria dos bancos de dados hoje permite extrair dados diretamente em XML e todas as plataformas de aplicaes web trabalham bem com XML. E com a poderosa linguagem XSLT voc pode muito facilmente oferecer seus dados em XHTML para o navegador. Para que seu arquivo possa ser lido por mquinas alm de humanos muito importante que voc escreva um XHTML vlido, com isso voc est fazendo com que as informaes do seu site fique mais acessvel para as buscas, contribuindo para o projeto e principalmente melhorando as visitas do seu site.

Histrico e verses do HTML

O HTML 1.0 nunca existiu, foi definido como todo o trabalho antes do HTML realmente se tornar um padro, criando ento o HTML 2.0 que foi publicado pelo IETF RFC 1866. Novos suplementos foram adicionados: Novembro de 1995: RFC 1867 (formulrio base para upload de arquivos) Maio 1996: RFC 1942 (tabelas) Agosto 1996: RFC 1980 (mapas de imagem do lado cliente) Janeiro 1997: RFC 2070 (Internacionalizao) Em junho de 2000, todos esses se tornaram obsoletos/ registro no RFC 2854. Janeiro de 1997 HTML 3.2 publicado como uma recomendao do W3C. Foi a primeira verso desenvolvida e padronizada pelo W3C, pois o IETF havia fechado o seu grupo de trabalho em setembro de 1997. O HTML 3.2 omitiu vrias frmulas matemticas, sobreps vrias extenses proprietrias e adotou Markup tags do Netscape. Tags como <blink> da Netscape e <marquee> da Microsoft foram omitidas aps um acordo mtuo entre as duas empresas. A capacidade de incluir frmulas matemticas no HTML no foi padronizado at anos mais tarde, com o MathML. Dezembro de 1997 O HTML 4.0 publicado como uma recomendao do W3C. Foram criadas 3 verses: Strict: elementos em desuso so proibidos

Transitional: elementos em desuso aqui so permitidos Frameset: utilizado em documentos que fazem o uso de frames Inicialmente sob o codinome Cougar, o HTML 4.0 adotou vrios elementos e atributos, mas ao mesmo tempo procurou eliminar marcao proprietria e em desuso a favor das folhas de estilo.

Html e Xhtml

Pgina 5

Abril de 1998 HTML 4.0 foi editado em edies menores mais sem aumentar o nmero de verso. Dezembro de 1999 HTML 4.01 foi publicado como uma recomendao do W3C. Ele possua as mesmas verses do HTML 4.0 e sua errata foi publicada em 12 de Maio de 2001. Maio de 2000 ISO/IEC 15445:2000 (ISO HTML, baseado no HTML 4.01 Strict), foi publicado como uma norma ISO / IEC padro internacional. Em meados de 2008, HTML 4.01 e ISO / IEC 15445:2000 so as verses mais recentes do HTML. Desenvolvida em paralelo, o XHTML, baseado em XML ocupava o grupo de trabalho do W3C at meados de 2000. Janeiro de 2008

HTML5 publicado como um novo projeto do W3C. Apesar de sua sintaxe ser semelhante a do SGML, o HTML 5 abandonou qualquer tentativa de ser uma aplicao SGML, e tem definido seu prprio vocabulrio HTML, alm de uma alternativa baseada em XML, o XHTML 5.

Histrico e verses do XHTML

XHTML uma linguagem que comeou como uma reformulao do HTML 4.01 usando XML1.0: XHTML 1.0: Publicado em 26 de Janeiro de 2000 como uma recomendao do W3C, posteriormente revisto e republicado em 1 de Agosto de 2002, ele oferece as mesmas trs verses que o HTML 4.0 e HTML 4.01, baseado em XML, com menores restries. XHTML 1.1: Publicado em 31 de Maio de 2001 como uma recomendao W3C. baseado em XHTML 1.0 Strict, mas inclui alteraes menores, podem ser personalizadas, e reformulado utilizando mdulos de modularizao do XHTML. Foi publicado em 10 de abril de 2001 como uma Recomendao W3C. XHTML 2.0: Ainda um projeto de trabalho do W3C. XHTML 2.0 compatvel com XHTML 1.1, e, portanto, seria mais adequado caracterizar como uma nova linguagem inspirada em XHTML do que uma atualizao para XHTML 1.1.

Html e Xhtml

Pgina 6

XHTML 5.0: uma atualizao para o XHTML 1.1, est sendo definido juntamente com o HTML5 no mesmo projeto.

A WEB SEMNTICA
A Web Semntica no uma Web separada, mas uma extenso da atual. Nela a informao dada com um significado bem definido, permitindo melhor interao entre os computadores e as pessoas. Com estas palavras, Berners-Lee (2001) define os planos de seu grupo de trabalho no World Wide Web Consortium* (W3C) para operar a transformao que ir modificar a Web como a conhecemos hoje. Web Semntica (Decker et alii, 2000 & Berners-Lee et alii, 1999) o nome genrico deste projeto, capitaneado pelo W3C, que pretende embutir inteligncia e contexto nos cdigos XML utilizados para confeco de pginas Web, de modo a melhorar a forma com que programas podem interagir com estas pginas e tambm possibilitar um uso mais intuitivo por parte dos usurios. * Consrcio de empresas, profissionais, cientistas e instituies acadmicas que responsvel pela criao de padres tecnolgicos que regulam a World Wide Web. Embora semntica signifique estudo do sentido das palavras, Guiraud (1975) reconhece trs ordens principais de problemas semnticos: 1) a ordem dos problemas psicolgicos, que relaciona os estados fisiolgicos e psquicos dos interlocutores nos processos de comunicao de signos; 2) a ordem dos problemas lgicos, que estabelece as relaes dos signos com a realidade no processo de significao; 3) a ordem dos problemas lingsticos, que estabelece a natureza e as funes dos vrios sistemas de signos. Guiraud confere terceira ordem de problemas o status de semntica por excelncia (1976, p.8), mas o uso da conotao semntica para a Web ampliada est ancorado na segunda definio, e se justifica se observarmos as aumentadas possibilidades de associaes dos documentos a seus significados por meio dos metadados descritivos. Alm disso, as ontologias construdas em consenso pelas comunidades de usurios e desenvolvedores de aplicaes permitem o compartilhamento de significados comuns. Berners-Lee (2001) imagina um mundo em que programas e dispositivos especializados e personalizados, chamados agentes, possam interagir por meio da infra-estrutura de dados da Internet trocando informaes entre si, de forma a automatizar tarefas rotineiras dos usurios. O projeto da Web Semntica, em sua essncia, a criao e implantao de padres (standards) tecnolgicos para permitir este panorama, que no somente facilite as trocas de informaes entre agentes pessoais, mas principalmente estabelea uma lngua franca para o compartilhamento mais significativo de dados entre dispositivos e sistemas de informao de uma maneira geral. Para atingir tal propsito, necessria uma padronizao de tecnologias, de linguagens e de metadados descritivos, de forma que todos os usurios da Web obedeam a
Html e Xhtml Pgina 7

determinadas regras comuns e compartilhadas sobre como armazenar dados e descrever a informao armazenada e que esta possa ser consumida por outros usurios humanos ou no, de maneira automtica e no ambgua. Com a existncia da infraestrutura tecnolgica comum da Internet, o primeiro passo para este objetivo est sendo a criao de padres para descrio de dados e de uma linguagem que permita a construo e codificao de significados compartilhados. Para melhor entender estes padres e linguagens, vamo-nos debruar a seguir um pouco mais sobre estes conceitos.

Definies e Sintaxe Geral de Marcao

Browsers
Um navegador, tambm conhecido pelos termos ingleses web browser ou simplesmente browser, um programa de computador que habilita seus usurios a interagirem com documentos virtuais da Internet, tambm conhecidos como pginas da web, que podem ser escritas em linguagens como HTML, ASP, PHP, com ou sem folhas de estilos em linguagens como o CSS e que esto hospedadas num servidor Web. Os Navegadores Web, ou Web Browsers se comunicam geralmente com servidores Web (podendo hoje em dia se comunicar com vrios tipos de servidor), usando principalmente o protocolo de transferncia de hiper-texto HTTP para efetuar pedidos a ficheiros (ou arquivos, em portugus brasileiro), e processar respostas vindas do servidor. Estes ficheiros/arquivos, so por sua vez identificados por um URL. Os navegadores mais recentes tm a capacidade de trabalhar tambm com vrios protocolos de transferncia, como por exemplo, FTP, HTTPS (uma verso criptografada via SSL do HTTP), etc. A finalidade principal do navegador fazer-se o pedido de um determinado contedo da Web, e providenciar a exibio do mesmo. Geralmente, quando o processamento do ficheiro no possvel atravs do mesmo, este apenas transfere o ficheiro localmente. Quando se trata de texto (Markup Language e/ou texto simples) e/ou imagens bitmaps, o navegador tenta exibir o contedo. Os navegadores mais primitivos suportavam somente uma verso mais simples de HTML. O desenvolvimento rpido dos navegadores proprietrios, porm, (veja As Guerras dos Navegadores) levou criao de dialetos no-padronizados do HTML, causando problemas de interoperabilidade na Web. Navegadores mais modernos (tais como o Internet Explorer, Mozilla Firefox, Opera e Safari e o Chrome do Google) suportam verses padronizadas das linguagens HTML e XHTML (comeando com o HTML 4.01), e mostram pginas de uma maneira uniforme atravs das plataformas em que rodam.

Html e Xhtml

Pgina 8

Alguns dos navegadores mais populares incluem componentes adicionais para suportar Usenet e correspondncia de e-mail atravs dos protocolos NNTP e SMTP, IMAP e POP3 respectivamente.

TAGS
Conceito de Tag A linguagem HTML utiliza Tags (Marcaes) que informam ao browser como exibir o documento. As marcaes do HTML consistem do sinal <, ( menor que) , seguida pelo nome da marcao e fechada por > (Maior que). De um modo geral, as tags aparecem em pares, por exemplo, <H1> Cabealho </H1>. O smbolo que termina uma determinada marcao igual aquele que a inicia, antecedido por uma barra (/). No exemplo, <H1> inicia a formatao do primeiro nvel de cabealho e </H1> indica que o cabealho acabou. H excees a esse funcionamento em pares das marcaes. Por exemplo, a que indica o final de um pargrafo <P>, no necessita de um Tag correspondente: </P>. A marcao que indica quebra de linha - <BR> - tambm no precisa de uma correspondente. Obs.: A linguagem HTML no faz diferena entre maisculas e minsculas (no case sensitive). Ento a notao <TITLE> equivalente a <title> ou <TitlE>. Tags de Ttulo Todo documento deve conter um conjunto bsico de Tags. Deve ser identificado como HTML (<HTML> </HTML>), ter uma rea de cabealho (<HEAD> </HEAD>) onde ser colocado o ttulo do documento (<TITLE> </TITLE>), e uma rea definida como corpo (<BODY> </BODY>) onde estar o contedo do documento. Veja exemplo abaixo: <HTML> <HEAD> <TITLE>HTML Bsico</TITLE> </HEAD> <BODY> <H1>Este o primeiro nvel de cabealho</H1> Bem-vindo ao mundo do HTML. Este o primeiro pargrafo.<P> E este o segundo.<P> </BODY> </HTML> Esta pgina ir aparecer assim: Este o primeiro nvel de cabealho Bem-vindo ao mundo do HTML. Este o primeiro pargrafo. E este o segundo. O ttulo no aparece no corpo da pgina e sim no alto da tela do seu browser, e utilizado para identificar o documento como se fosse um nome do arquivo. interessante que o ttulo possa sugerir claramente o contedo do documento.

Html e Xhtml

Pgina 9

A marcao utilizada para ttulos <TITLE> e seu par </TITLE>. Escrito desta forma: <HTML> <TITLE> Este o ttulo</TITLE> <BODY> </BODY> </HTML>

Estrutura bsico de um documento

<HTML> <HEAD> <TITLE>HTML Bsico</TITLE> </HEAD> <BODY> <H1>Este o primeiro nvel de cabealho</H1> Curso de HTML. Este o primeiro pargrafo.<P> E este o segundo.<P> </BODY> </HTML> Elementos obrigatrios em um documento obrigatrio a declarao do DOCTYPE assim como a existncia dos elementos <html> <head> <tutle> e <body>. Um modelo de documento mostrado abaixo:
<!DOCTYPE bla..bla..bla> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Ttulo do odcumento</title> </head> <body> Contedo do documento </body> </html>

A declarao DOCTYPE no faz parte da marcao HTML e como tal no considerado um elemento, razo pela qual no h necessidade de tag de fechamento.

Links

Html e Xhtml

Pgina 10

Como construir links entre as pginas. O que eu preciso para construir um link? Para construir um link voc usa o que tem usado at agora para codificar HTML: uma tag. Uma pequena tag com um elemento e um atributo suficiente para voc construir links para onde quiser. A seguir um exemplo de link para o site:

<a href="http://www.html.com.br/">Aqui entra o nome do link</a>

Ser renderizado assim no navegador: Aqui entra o nome do link O elemento a refere-se a "anchor" - ncora . O atribuito href abreviao para "hypertext reference" - referncia a hypertexto - e especifica o destino do link que normalmente um endereo na Internet ou um arquivo. No exemplo acima o atributo href tem o valor "http://www.html.net", que o endereo completo do site HTML.net e chamado de URL (Uniform Resource Locator). Notar que "http://" deve sempre ser incluido nas URLs. A frase "Aqui entra o nome do link" o texto mostrado no navegador como link. Lembre-se de fechar a tag com um </a>. Se voc quer construir links entre pginas de um mesmo website voc no precisa escrever o endereo completo de cada pgina (URL). Por exemplo, se voc tem duas pginas (vamos cham-las de pagina1.htm e pagina2.htm) e salvou as duas em um mesmo diretrio voc constri um link de uma para a outra usando somente o nome do arquivo no link. Nestas condies, um link da pgina1.htm para a pagina2.htm como mostrado abaixo:

<a href="pagina2.htm">Aqui um link para a pagina 2</a>

Se a pagina2 for colocada em um subdiretrio (chamado de "subdiretorio"), o link como mostrado abaixo:

<a href="subdiretorio/pagina2.htm">Aqui um link para a pagina 2</a>

Por outro lado, um link da pagina2 no "subdiretorio" para a pagina1 como mostrado a seguir:

<a href="../pagina1.htm">Aqui um link para a pagina 1</a>

"../" aponta para o diretrio a um nvel acima do arquivo onde foi feito o link. Seguindo o mesmo princpio voc pode apontar para dois (ou mais) nveis acima, escrevendo "../../". Como outra opo voc pode usar sempre o endereo completo do arquivo (URL). Voc pode criar links internos, dentro da prpria pgina. Por exemplo, uma tabela de contedos ou ndice com links para cada um dos captulos em uma pgina. Tudo o que voc precisa usar o atributo id e o smbolo "#". Use o atributo id para marcar o elemento que o destino do link. Por exemplo:

<h1 id="heading1">Cabealho 1</h1>

Voc agora pode criar um link que leve quele elemento usando o smbolo "#" no atributo do link. O smbolo "#" informa ao navegador para ficar na mesma pgina que est. O smbolo "#" deve ser seguido pelo valor atribuido a id para onde o link vai. Por exemplo:
Html e Xhtml Pgina 11

<a href="#heading1">Link para o cabealho 1</a> Para ficar mais claro, vamos a um exemplo: <html> <head> </head> <body> <p><a href="#heading1">Link para cabealho 1</a></p> <p><a href="#heading2">Link para cabealho 2</a></p> <h1 id="heading1">Cabealho 1</h1> <p>Texto texto texto texto</p> <h1 id="heading2">Cabealho 2</h1> <p>Texto texto texto texto</p> </body>
Ser renderizado no navegador assim (clique nos dois links): Link para cabealho 1 Link para cabealho 2 Cabealho 1 Texto texto texto texto Cabealho 2 Texto texto texto texto Obs.: O nome de um atributo id deve comear com uma letra Links para um endereo de email

<a href="mailto:nobody@html.net">Enviar e-mail para nobody em HTML</a>

Ser renderizado no navegador assim:

Enviar e-mail para nobody em HTML

A nica diferena que no lugar do endereo do documento voc escreve mailto: seguido pelo endereo de e-mail. Quando o link clicado o programa de e-mail padro do usurio aberto com o endereo do link j digitado na linha para destinatrio. Mas, ateno, isto s ir funcionar se o usurio tiver um programa de e-mail instalado na sua mquina. Como por exemplo, o Outlook. Outros atributos

Html e Xhtml

Pgina 12

Par criar links voc sempre usa o atributo href. Adicionalmente voc pode usar um title (ttulo) para seu link:

<a href="http://www.html.net/" HTML">HTML.net</a>

Ser renderizado no navegador assim:

title="Visite

HTML.net

aprenda

HTML
O atributo title usado para fornecer uma breve descrio do link. Se voc sem clicar no link - colocar o cursor do mouse sobre o link, vai aparecer o texto "Visite o site HTML e aprenda HTML".

Imagens Agora aprenderemos o atributo img que insere uma imagem na pgina HTML. Tudo o que voc precisa da nossa conhecida tag. <img src="bandeiradobrasil.jpg" alt="Bandeira do Brasil" />
Ser renderizado no navegador assim:

O que voc tem a fazer dizer ao navegador que quer inserir uma imagem (img) e depois informar onde a imagem esta localizada (src, abreviatura para "source" local de armazenagem). Notar que a tag imagem do tipo comando isolado, isto , uma s tag de abertura e fechamento. Semelhante a tag <br /> e <hr />que no precisa de um texto inserido nela. "bandeiradobrasil.jpg" o nome do arquivo da imagem que voc quer inserir na pgina. ".jpg" a extenso do tipo de imagem. Tal como a extenso .html ou ".htm" para arquivos de documentos HTML, ".jpg" informa ao navegador que o arquivo uma imagem. Veja abaixo os trs os tipos de imagens que voc pode inserir na sua pgina: GIF (Graphics Interchange Format) JPG / JPEG (Joint Photographic Experts Group) PNG (Portable Network Graphics)
Pgina 13

Html e Xhtml

Em geral imagens GIF so melhores para grficos e desenhos e imagens JPEG so melhores para fotografia. Existem duas razes para isto: primeiro, imagens GIF so constitudas por 256 cores, e imagens JPEG por milhes de cores, segundo, imagens GIF so melhores otimizadas para imagens simples ao passo que imagens JPEG so melhores otimizadas para imagens complexas. Quanto maior a compresso tanto menor o tamanho do arquivo e tanto mais rpido a pgina carregada no navegador Tradicionalmente os formatos GIF e JPEG tm sido os mais empregados, mas ultimamente o formato PNG tem se tornado cada vez mais popular. O formato PNG em vrios aspectos melhor que os formatos JPEG e GIF: milhes de cores e efetiva compresso. Para criar suas prprias imagens voc precisa de um programa de edio de imagens. O Adobe Photoshop e o Adobe Fireworks so excelentes para fazer um papel de parede para a sua pgina por exemplo. Um programa de edio de imagens a ferramenta essencial para criao de websites com grande impacto e apelo visual. Vamos aprender mais algumas coisas sobre imagens. Primeiro voc pode inserir imagens que esto localizadas em outros diretrios ou at mesmo em outros websites:

Diretrio: Sites:

<img src="images/caixa.png"> <img src="http://www.html.com.br/caixa.png">

Segundo, imagens podem ser links:

<a href="http://www.html.com.br"> <img src="caixa.png"></a>

Ser renderizado no navegador assim:

Outros atributos Voc sempre ter que usar o atributo src, que diz ao navegador onde a imagem est localizada. Alm dele existem alguns outros atributos que podem ser bastante teis quando voc insere imagens em uma pgina. O atributo alt usado para fornecer uma descrio textual alternativa da imagem caso por alguma razo a imagem no seja renderizada para o usurio. Isto particularmente importante para usurios com restries visuais ou quando a imagem carregada muito lentamente. Em conseqncia, sempre use o atributo alt: <img src="logo.gif" alt="logotipo do BR Masters"> Alguns navegadores mostram uma caixa pop-up com o contedo do atributo alt quando o usurio passa o mouse sobre a imagem. Tenha em mente que a finalidade principal do atributo alt a de fornecer uma alternativa textual para imagem. O atributo alt no deve ser usado para criar mensagens pop-up uma vez que os leitores de tela passaro uma mensagem que no descreve a imagem para os usurios com restries visuais.
Html e Xhtml Pgina 14

O atributo title pode ser usado para fornecer uma curta descrio da imagem: <img src="bandeira.gif" title="Aprenda HTML no site HTML.com.br"> Ser renderizado assim:

Coloque o ponteiro do mouse sobre a imagem, sem clicar e aparecer uma caixa popup com o texto "Aprenda HTML no site HTML.com.br". Dois outros atributos importantes so width e height: <img src="logo.png" width="141" height="32"> Os atributos width e height podem ser usados para definir respectivamente, a largura e a altura da imagem. O valor adotado para medidas o pixel. Pixel a unidade de medida usada para medir a resoluo da tela. (As resolues de tela mais comuns so de 800x600 e 1024x768 pixels, apesar das resolues 800x600 estarem ficando para trs e sendo cada vez mais usada as de 1024x768 e 1280x1024 ou superior). Ao contrrio de centmetros, pixel uma unidade de medida relativa que depende da resoluo da tela. Usurios com grande resoluo de tela tero 25 pixels em 1 centmetro de tela enquanto aqueles com baixa resoluo de tela tero os mesmos 25 pixels em 1,5 cm de tela. Se no forem definidos os valores para width e height, a imagem ser inserida com seu tamanho real. Com width e height voc pode alterar o tamanho da imagem: <img src="logo.gif" width="32" height="32"> O tempo de descarga da imagem ser sempre aquele requerido como se ela tivesse suas dimenses reais, mesmo que voc diminua seu tamanho com uso destes atributos. Assim, voc no deve diminuir o tamanho das imagens com o uso dos atributos width e height. Se voc precisa diminuir a imagem, diminua suas dimenses reais em um editor de imagem para tornar suas pginas mais leves e mais rpidas. Dito isto, acrescentamos que sempre uma boa idia definir os atributos width e height para imagens, pois assim fazemos o navegador reservar o espao para descarga da imagem previamente. Isto acaba por permitir ao navegador, saber com antecedncia (antes de descarregar as imagens) como ser o layout da pgina.

Html e Xhtml

Pgina 15

Tabelas
Tabelas so usadas para apresentar "dados tabulares", isto , informao que deva ser apresentada em linhas e colunas, de forma lgica e organizada. Criar tabelas em HTML pode parecer complicado, mas quando voc acompanhar passo a passo a explicao ver que bem fcil. <table> <tr> <td>Clula 1</td> <td>Clula 2</td> </tr> <tr> <td>Clula 3</td> <td>Clula 4</td> </tr> </table> Ser renderizado no navegador assim:

Clula 1 Clula 2 Clula 3 Clula 4 Qual a diferena entre as tags <tr> e <td>
Este com certeza o cdigo mais complicado at agora. Vamos analisar isto por partes e explicar as diferentes tags: 3 tags bsicas so usadas para inserir tabelas: <table> comea e termina uma tabela. <tr> significa "table row" - linha de tabela - comea e termina e uma linha horizontal da tabela. <td> significa "table data" - dados da tabela. comea e termina cada clula contida nas linhas da tabela. Eis o acontece no exemplo dado acima: a tabela comea com <table>, segue-se uma <tr>, que indica o incio de uma nova linha. Duas clulas so ento inseridas na linha: <td>Clula 1</td> e <td>Clula 2</td>. A linha termina com </tr> e uma nova linha <tr> comea imediatamente a seguir. A nova linha tambm contm duas clulas. A tabela termina com </table>. Para esclarecer: linhas so horizontais e colunas so verticais, ambas contendo clulas:

Html e Xhtml

Pgina 16

Clula 1 e Clula 2 formam uma linha. Clula 1 e Clula 3 formam uma coluna. No exemplo acima a tabela tem duas linhas e duas colunas. Uma tabela pode conter um nmero ilimitado de linhas e colunas. Outro exemplo:

<table> <tr> <td>Clula 1</td> <td>Clula 2</td> <td>Clula 3</td> <td>Clula 4</td> </tr> <tr> <td>Clula 5</td> <td>Clula 6</td> <td>Clula 7</td> <td>Clula 8</td> </tr> <tr> <td>Clula 9</td> <td>Clula 10</td> <td>Clula 11</td> <td>Clula 12</td> </tr> </table>
Ser renderizado no navegador assim:

Clula 1 Clula 2 Clula 3 Clula 4 Clula 5 Clula 6 Clula 7 Clula 8 Clula 9 Clula 10 Clula 11 Clula 12 Atributos
Por exemplo, o atributo border que usado para definir a espessura de uma borda em volta da tabela:

<table border="1"> <tr> <td>Clula 1</td> <td>Clula 2</td> </tr> <tr> <td>Clula 3</td> <td>Clula 4</td>
Html e Xhtml Pgina 17

</tr> </table>
Ser renderizado no navegador assim:

A borda da tabela especificada em pixels. Tal como fizemos com as imagens, podemos definir width - largura - em pixels, para uma tabela - ou alternativamente em percentagem a tela. Veja abaixo:

<table border="1" width="30%"> Este exemplo renderiza no navegador uma tabela com largura igual a 30% da largura da tela.
Mais atributos Existe uma grande quantidade de atributos para tabelas. A seguir mais dois: align: define o alinhamento horizontal do contedo da tabela, de uma linha ou de uma clula. Por exemplo, left, centre ou right ( esquerda, no centro ou direita). valign: define o alinhamento vertical do contedo de uma clula. Por exemplo, top, middle ou bottom (em cima, no meio ou em baixo).

<td align="right" valign="top">Clula 1</td>

O que inserir em tabelas Teoricamente voc pode inserir qualquer coisa em uma tabela: texto, links e imagens... mas, tabelas tem por objetivo apresentar dados tabulares (isto , dados que por sua natureza devam ser apresentados em linhas e colunas) ento abstenha-se de colocar coisas dentro de tabela simplesmente porque voc deseja que elas estejam prximas umas s outras. Nos primrdios da Internet - isto , h poucos anos atrs - tabelas eram usadas como ferramenta para construir layout. Se voc quer controlar a apresentao de textos e imagens, existe uma maneira bem mais racional. Veremos isso mais a frente em CSS e tableless.

Html e Xhtml

Pgina 18

Mais Sobre Tabelas

Nesta segunda parte vamos dar continuao e aprender mais sobre as tabelas. Os dois atributos colspan e rowspan so usados para criar tabelas singulares. Colspan Colspan a abreviao para "column span". Colspan usada na tag <td> para indicar quantas colunas estaro contidas em uma clula.

<table border="1"> <tr> <td colspan="3">Clula 1</td> </tr> <tr> <td>Clula 2</td> <td>Clula 3</td> <td>Clula 4</td> </tr> </table> Ser renderizado no navegador assim:

rowspan Como voc j deve ter concludo, rowspan especifica quantas linhas estaro contidas em uma clula: <table border="1"> <tr> <td rowspan="3">Clula 1</td> <td>Clula 2</td> </tr> <tr> <td>Clula 3</td> </tr> <tr> <td>Clula 4</td> </tr> </table> Ser renderizado no navegador assim:

Html e Xhtml

Pgina 19

No exemplo acima rowspan definido em "3" na Clula 1. Isto especifica que uma clula deve conter 3 linhas. Clula 1 e Clula 2 esto na mesma linha, enquanto Clula 3 e Clula 4 formam duas linhas independentes. Isso no difcil, confuso. bom desenhar a tabela em uma folha de papel antes de comear a codificao HTML.

Para que serve o DOCTYPE

A definio do tipo de documento especifica qual a sintaxe SGML usada no documento. A DTD usada pelas aplicaes SGML (Tais como HTML) para identificar as regras que se aplicam a linguagem de marcao usada no documento bem como o conjunto de elementos e entidades vlidas naquela linguagem. Assim uma DTD para um documento HTML descreve com preciso a sintaxe e a gramtica da linguem de marcao HTML. O DOCTYPE deve ser a primeira declarao em um documento web.
O DOCTYPE deve ser sempre a primeira declarao em um documento web. Os tipos de DOCTYPE: STRICT TRANSITIONAL FRAMESET
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Esta a mais rgida das declaraes. Os documentos XHTML no modo Strict no admitem qualquer item de formatao dentro dos elementos e nem elementos em desuso ("deprecated") segundo as recomendaes do W3C. So indicados para uso com folhas de estilo em cascata, com marcao totalmente independente da apresentao.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Esta declarao permite uma maior flexibilidade e indicada para documentos que ainda utilizem elementos em desuso ("deprecated"), regras de apresentao embutidas em tags e tambm para documentos destinados a exibio em navegadores sem suporte para CSS. No admite qualquer tipo de marcao para frames.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Esta declarao permite tudo da declarao tradicional e mais os elementos especficos para frames.

Validao do documento HTML

W3C disponibiliza um validador gratuito para documentos HTML. Ali, voc digita o URL ou o caminho para o arquivo no seu HD e um rob analisa o documento fornecendo um relatrio completo e detalhado das no conformidades por ventura existentes. uma ferramenta excelente para voc usar durante a elaborao ou migrao
Html e Xhtml Pgina 20

do seu documento para HTML. Serve como um verdadeiro revisor do cdigo que voc cria. Abaixo o link para o validador:
Validador XHTML do W3C

Elemento nvel de bloco e inline

Para um bom entendimento da renderizao dos elementos HTML necessrio o entendimento de elementos nveis de bloco, inline e os invisveis. Conhecendo bem esses conceitos, evitamos o uso inadequado de elementos HTML e marcao adicional.

Elementos nveis de bloco

Elementos nvel de bloco ocupam toda largura disponvel na pgina e criam uma linha invisvel antes e depois de si prprio. Elementos a nvel de bloco sempre comeam em nova linha. Um elemento que venha antes ou depois de um elemento nvel de bloco renderizado acima ou abaixo do elemento nvel de bloco, nunca ao lado. Elementos nvel de bloco podem conter elementos inline e outros elementos nvel de bloco embutidos. Exemplos de tags nvel de bloco:
1. 2. 3. address, blockquote, center, dir, div, dl, dt, dd, frameset, fieldset, form, h1, h2, h3, h4, h5, h6, hr, menu, noframes, noscript, ol, ul, li, p, pre, table, tbody, thead, tfoot, tr, td, th

Elementos inline
Ocupa somente a largura do elemento, largura necessria. Elementos inline podero apenas conter informaes e outros elementos inline, jamais podero conter elementos nvel de bloco. Diferente dos elementos nvel de bloco os inline no comeam em nova linha. Exemplos de tags inlines:
1. a, abbr, acronym, applet, b, basefont, bdo, big, br, button, cite, code, del, dfn,em, font, i, iframe, i mg, input, ins, kbd, label, map, object, q, s, samp, select,small, span, strike, strong, sub, sup, texta rea, tt, u, var

Eu sou um elemento a nvel inline, Eu sou mais um elemento a nvel inline

Elementos invisveis
So definidos como tags invisveis porque esto escritas no documento, mas o usurio no as v. Exemplos de elementos invisveis:
1. meta, link, style, title

Usando display:block; e display:inline; podemos trocar um elemento para nvel de bloco e inline respectivamente. (Veremos mais a frente em CSS).
Html e Xhtml Pgina 21

Elementos e atributos (X)HTML

Elementos e Atributos comuns 1. 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) que deve conter / para indicar o 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 e no representam o mesmo elemento. Exemplo:

<html> <head> <title>Ttulo da Pgina</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). Um exemplo mais complexo. Este exemplo abaixo tambm um elemento do HTML (mais complexo):

<body> Esta minha primeira pgina. <b>Este texto est em negrito</b> </body>
Html e Xhtml Pgina 22

Este elemento HTML inicia com tag <body> e termina com a tag </body>. O propsito da tag definir o contedo principal, o corpo do documento.

2. 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 (>) (exemplo: <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 (exemplo: </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 adicionado 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"> Esta a minha primeira pgina da web. <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>
Html e Xhtml Pgina 23

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

3. 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 viceversa: 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.

4. Devemos usar aspas ou plicas/apstrofos (escrevemos "texto" ou 'texto')?

Acabamos de ver que 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!" '

5. Notas rpidas

As Tags HTML so utilizadas para marcar elementos HTML. Elas esto cercadas pelos dois caracteres < (menor que) e > (maior que);
Html e Xhtml Pgina 24

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.

MDULO EVENTOS INTRNSECOS

O que so eventos intrsecos?
HTML tem uma srie de atributos que permitem ao browser executar um evento. Um evento pode ser, por exemplo, um script JavaScript quando voc pressiona qualquer elemento do documento. Apresentamos aqui uma lista de atributos que podem ser inseridos em tags HTML

Eventos do documento Use apenas com o corpo e frameset.

Atributos onload onunload roteiro roteiro Valor Descrio O script executado quando o documento carregado. O script executado quando o usurio exclui um documento de uma janela ou frame.

Eventos das formas Use com elementos de formulrio.

Atributos onchange onsubmit onreset onSelect onblur onfocus roteiro roteiro roteiro roteiro roteiro roteiro Valor Descrio O script executado quando o valor de entrada mudou. O script executado quando um formulrio submetido. O script executado quando um formulrio for reposto. O script executado quando o usurio seleciona o texto em um campo de texto. O script executado quando o elemento perde o foco ou pelo mouse ou por tabulaes navegao. O script executado quando o foco direcionado para um item, com o mouse ou por tabulaes navegao.

Eventos de teclado Use com todos os elementos, exceto: base, bdo, br, frame, frameset cabea, html, iframe, meta, param, script, estilo e ttulo.
Atributos onkeydown roteiro Valor Descrio O script executado quando voc pressiona uma tecla.

Html e Xhtml

Pgina 25

onkeypress onkeyup

roteiro roteiro

O script executado quando voc pressionar e soltar a tecla. O script executado quando uma tecla liberada.

Eventos do mouse Use com todos os elementos, exceto: base, bdo, br, frame, frameset cabea, html, iframe, meta, param, script, estilo e ttulo.
Atributos onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup roteiro roteiro roteiro roteiro roteiro roteiro roteiro Valor Descrio O script executado quando voc clica com o mouse. O script executado quando voc clicar duas vezes no mouse. O script executado quando o boto pressionado enquanto o mouse est sobre um elemento. O script executado quando o mouse movido enquanto mais um elemento. O script executado quando o mouse se move longe de um item. O script executado quando o mouse passa sobre um elemento. O script executado quando o boto do mouse liberado quando sobre um elemento.

Principais tags e atributos

Tags estruturais

<!-- -->
Cria um comentrio

<html> </html>
Envolve todo um documento html

<head> </head>
Envolve o cabealho de um documento html

<meta >
Fornece informaes gerais sobre o documento

<style> </style>
Informaes de estilo

<script> </script>
Linguagem script

<noscript> </noscript>
Contedo alternativo para quando a linguagem script no for suportada

<title> </title>
O ttulo do documento

Html e Xhtml

Pgina 26

<body> </body>
Envolve o corpo (texto e tags) do documento html

bgcolor - Cor de fundo #RRGGBB background - Imagem como plano de fundo text - Cor do texto principal link - Cor dos links existentes na pgina vlink - Cor do link j visitado alink - Cor do link que foi ativado marginheight - Elimina a margem esquerda apenas no Netscape marginwidth - Elimina a margem no topo da pgina apenas no Netscape topmargin - Elimina a margem no topo da pgina apenas no Internet Explorer leftmargin - Elimina a margem esquerda apenas no Internet Explorer

Cabealhos

<hn> </hn>
Cabealho nvel n para n de 1 a 6

Pargrafos

<p> </p>
Um simples pragrafo

align - Alinhamento do pargrafo: left, right, center e justify

Links

<a> </a>
Cria um link e inclui atributos em comum

href - O URL do documento que ser vinculado a este. Para e-mail: mailto e link externo: http name - O nome da ncora target - Identifica a janela ou local em que o link dever ser aberto: blank, self, top, parent rel - Define os tipos de link que avanam rev - Define os tipos de link que revertem a ao acesskey - Atribui uma tecla de atalho para este elemento shape - Para uso com formas de objeto
Pgina 27

Html e Xhtml

coords - Para uso com formas de objeto tabindex - Determina a ordem das guias onclick - um evento JavaScript onmouseover - um evento JavaScript onmouseout - um evento JavaScript

Listas

<ol> </ol>
Uma lista ordenada

start - Define a partir de qual nmero a listagem comea type - Tipos de caracteres ordenados: A, a, I, i, 1

<ul> </ul>
Uma lista no ordenada

type - Tipos de caracteres no ordenados: disk, square, circle

<li> </li>
Um item da lista

value - Numerao individual do item da lista type - Tipos de caracteres ordenados: A, a, I, i e 1 para listagem ordenada e disk, square e circle para no ordenada

<menu> </menu>
Um menu com uma lista de itens

<dir> </dir>
Uma listagem de diretrios

<dl> </dl>
Uma lista de definies ou glossrio

<dt> </dt>
Marca o texto especificado como um termo de definio de um glossrio

<dd> </dd>
Especifica o texto referente a um termo criado pela tag <dt> dentro de uma lista de definio

Html e Xhtml

Pgina 28

Formatao de caracteres

<em> </em>
Maior nfase em itlico

<strong> </strong>
Maior nfase em negrito

<code> </code>
Amostra de cdigo

<kbd> </kbd>
Texto a ser digitado

<var> </var>
Uma varivel ou espao reservado para um outro valor

<samp> </samp>
Texto de amostra

<dfn> </dfn>
Aplica um formatao no texto definido como termo de um glossrio

<cite> </cite>
Uma citao

<b> </b>
Texto em negrito

<i> </i>
Texto em itlico

<u> </u>
Texto sublinhado

<tt> </tt>
Fonte monoespaada (texto semelhante maquina de escrever)

<pre> </pre>
Texto pr-formatado

<strike> </strike>
Texto riscado

<s> </s>
Html e Xhtml Pgina 29

Texto tachado


Texto subscrito


Texto sobrescrito

<big> </big>
Texto em fonte maior do que o padro

<small> </small>
Texto em fonte menor do que o padro

<blink> </blink>
Texto piscando somente no Nestcape

<marquee> </marquee>
Texto animado no Internet Explorer

Outros elementos

<hr>
Uma rgua horizontal

size - Espessura da linha em pixels width - Largura da linha em pixels ou porcentagem align - Alinhamento da linha em center, left, right color - Cor da linha em #RRGGBB noshade - Linha slida

<br>
Uma quebra de linha

<center> </center>
Centralizar

<div> </div>
Contedo

align - Alinhamento: left, center e right

<blockquote> </blockquote>

Html e Xhtml

Pgina 30

Texto com mais margem

<address> </address>
Assinaturas ou informaes gerais sobre o autor de um documento

<font> </font>
Alterna tamanho , cor e tipo de fonte exibida

size - O tamanho da fonte varia de 1 a 7 color - A cor da fonte #RRGGBB face - O tipo da fonte

<basefonte>
Define o tamanho padro para a fonte na pgina atual

size - O tamanho da fonte varia de 1 a 7

Imagens

<img>
Insere uma imagem in-line no documento e inclui atributos comuns

usemap - Um mapa de imagens do lado cliente src - O URL da imagem alt - Uma string de texto que ser exibida em navegadores que no possam suportar imagens align - Determina o alinhamento de uma determinada imagem: top, middle, bottom, left e right height - a altura sugerida em pixels width - a extenso sugerida em pixels vspace - O espao entre a imagem e o texto acima e abaixo dela hspace - O espao entre a imagem e o texto esquerda e direita dela border - Largura da borda

Frames

<frameset> </frameset>
Define um frameset

rows - Nmero de linhas no frame cols - Nmero de colunas no frame

Pgina 31

Html e Xhtml

frameborder - Borda do frame framespacing - Espaamento onload - um evento intrnseco onunload - um evento intrnseco

<frame> </frame>
Define um frameset

name - o nome do frame-alvo src - Chama a fonte de contedo do frame frameborder - Determina a borda do frame marginheight - Determina a largura das margens noresize - Determina a capacidade de redimensionar frames scrolling - Determina a capacidade de rolagem dentro dos frames: auto, yes e no

<iframe> </iframe>
Define um frame in-line

<noframes> </noframes>
Alterna o contedo quando os frames no so suportados

Tabelas

<table> </table>
Cria uma tabela

background - Imagem de plano de fundo bgcolor - Cor de plano de fundo border - Largura da borda em pixels cols - Nmero de colunas cellpadding - Espaamento nas clulas cellspacing - Espaamento entre as clulas width - Largura da tabela align - Alinhamento da tabela: left, center, right bordercolor - Cor na borda da tabela

<caption> </caption>
A legenda para a tabela

<tr> </tr>
Html e Xhtml Pgina 32

Uma linha na tabela

align - O alinhamento horizontal do contedo das clulas dentro dessa linha com os valores possveis left, right, center, justify e char bgcolor - Cor de fundo valign - o alinhamento vertical do contedo das clulas dentro dessa linha com os valores possveis top, middle, bottom e baseline background - Figura como plano de fundo

<th> </th>
Um cabealho de clula da tabela

align - Alinhamento horizontal valign - Alinhamento vertical bgcolor - Cor de plano de fundo rowspan - O nmero de linhas pelo qual essa clula se expandir colspan - O nmero de colunas pelo qual essa clula se expandir nowrap - Desliga o enquadramento de texto em uma clula

<td> </td>
Define uma clula de dados da tabela

align - Alinhamento horizontal valign - Alinhamento vertical bgcolor - Cor de plano de fundo rowspan - O nmero de linhas pelo qual essa clula se expandir colspan - O nmero de colunas pelo qual essa clula se expandir nowrap - Desliga o enquadramento de texto em uma clula width - Largura da clula height - Altura da clula

Formulrios

<form> </form>
Define um formulrio

action - Responsvel por determinar o exato local para onde as informaes coletadas no formulrio devero ser enviadas method - Mtodo de empacotamento dos dados do formulrio: get, post e enctype="multipart/form-data"
Pgina 33

Html e Xhtml

name - Nome do objeto

<input>
Caixa de texto

type - Tipo de dado: text, file, radio, checkbox, hidden, password, submit, reset, button, image name - Identificao do campo size - Largura maxlength - Nmero mximo de caracteres permitidos value - Texto que aparece dentro da caixa ou nome do boto checked value - Valor assumido quando este campo for selecionado

<textarea> </textarea>
Permite criar elementos de entrada com caractersticas de texto

rows - Tamanho da linha da caixa de texto cols - Tamanho da coluna da caixa de texto name - Identificao do campo wrap - Quebra de linha da caixa de texto: off, virtual, physical

<select> </select>
Seleo

name - Identificador

<option> </option>
Opo

value - Valor do campo

Codificao de caracteres
O Conjunto de caracteres do documento
O conjunto de caracteres para documentos XML e HTML 4.0 Unicode (aka ISO 10646). Isto significa que navegadores HTML e processadores XML comportam-se por padro (internamente) com uso da codificao Unicode. Contudo, isto no significa que documentos devam ser transmitidos com a codificao Unicode. Desde que agentes de usurio e servidores estejam em concordncia, pode ser usada qualquer codificao que possa ser convertida para Unicode. Mais detalhes em document character set.

Html e Xhtml

Pgina 34

Declarando a codificao muito importante que a codificao de caracteres para qualquer documento XML ou (X)HTML seja claramente indicada, de modo a que os dispositivos do cliente possam facilmente mapear a codificao para Unicode. Esta indicao poder ser feita das seguintes maneiras: Usar o parmetro 'charset' no Content-Type do cabealho HTTP. Exemplo: Content-Type: text/html; charset=utf-8 Para que isto funcione voc dever ter acesso s configuraes do servidor ou ento servir seu documento via script (para maiores informaes ver Setting the HTTP charset parameter). Em XML (inclusive XHTML), usar o pseudo-atributo para codificao na declarao xml no nicio do documento ou a declarao textual no incio da entidade. Exemplo: <?xml version="1.0" encoding="utf-8" ?> Mas ateno, existe consideraes complementares que devem ser levadas em conta quando voc servir XHTML 1.0 como HTML. Para HTML ou XHTML servidos como HTML, voc deve usar sempre a tag <meta> dentro da seo <head> do documento. Exemplo: <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > Em XHTML, voc dever colocar uma barra "/" no final: <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> Os exemplos acima mostraram declaraes para codificao de contedos em UTF-8. Esta parece ser a melhor escolha para a maioria dos propsitos dos documentos, contudo no a nica possibilidade. Se voc no for usar UTF-8 dever substituir o texto utf-8 nos exemplos mostrados acima pelo nome da codificao que voc pretende usar. Para informaes sobre os nomes das codificaes consulte a lista dos nomes de codificao de caracteres registrados pelo IANA. Na prtica algumas poucas codificaes so preferidas, tais como: ISO-8859-1 (Latin-1), US-ASCII, UTF-16, e outras constantes da srie ISO8859, iso-2022-jp, euc-kr, e assim por diante.

Assegurando o funcionamento da declarao

muito importante no s usar a declarao de codificao no HTTP ou contedo, mas tambm:
Html e Xhtml Pgina 35

Gravar os dados usando codificao apropriada no seu ambiente de edio. Assegurar-se de que no haja conflito entre a declarao que voc escreveu no documento e aquela aplicada pelo servidor uma vez que a do servidor tem prioridade sobre todas as demais declaraes.

BIBLIOGRAFIA:
http://www.w3.org/International/O-charset.pt-br.php http://www.w3c.br/divulgacao/guiasreferencia/xhtml1/#mod-eventos http://www.virtualnauta.com/es/html/html_eventos.php http://www.oficinadanet.com.br/artigo/350/elementos_e_atributos http://www.htmlstaff.org/ver.php?id=23211

Html e Xhtml

Pgina 36