IntroduçãoàTecnologiaWeb HTML HyperTextMarkupLanguage XHTML extensiblehypertextmarkuplanguage EstruturaBásicadoDocumentoHTML ProfªMSc.ElizabeteMunzlinger www.elizabete.com.br
ProfªMSc.ElizabeteMunzlinger www.elizabete.com.br EstruturaBásicadoDocumentoHTML Índice 1 - O que é mesmo HTML?... 2 2 E o que é XHTML?... 2 3 O que são tags HTML?... 2 4 - O que são elementos HTML?... 2 5 Estrutura básica do documento... 3 Diferenças entre HTML 4.01 e XHTML 1.0 deste capítulo... 3 Referências Bibliográficas... 4 1
ProfªMSc.ElizabeteMunzlinger www.elizabete.com.br 1 OqueémesmoHTML? HTML é uma linguagem de marcação para escrever as páginas web. HTML significa HypertText Markup Language (Linguagem de Marcação de Hypertexto). HTML não é uma linguagem de programação, é uma linguagem de marcação. Uma linguagem de marcação é um conjunto de etiquetas de marcação (tags) usadas para definir os elementos existentes na página. HTML 4.01 é uma recomendação da W3C desde 24 de dezembro de 1999. 2 EoqueéXHTML? XHTML é uma reformulação da linguagem HTML 4.01, combinado com as regras rígidas de escrita da linguagem XML. Também é usado para escrever as páginas web, tornando-as acessíveis em diversos dispositivos. XHTML significa Extensible HyperText Markup Language (Linguagem de Marcação de Texto Extensível). XHTML é quase idêntico ao do HTML 4.01, com a diferença de ser uma versão com escrita de código mas rigorosa e limpa. XHTML 1.0 é uma recomendação da W3C desde 26 de janeiro de 2000. OBS: Como XHTML é baseada em HTML, veremos o conteúdo de HTML, e todas as diferenças de uso dos elementos para o XHTML serão citados ao final de cada documento. 3 OquesãotagsHTML/XHTML? Tags são etiquetas usadas para definir os elementos que compõem um site. Servem para definir a estrutura de uma página. As tags garantem que o browser consiga interpretar de forma correta o site, identificando o tipo de documento e os elementos que ele deve apresentar para o usuário. São palavras-chave precedidos de um caracter "<" (menor que) e seguido por um caracter ">" (maior que)... Ex: <body>. Normalmente vêm em pares como <b> e </ b>, chamadas de tag de abertura e tag de fechamento. Tag de fechamento tem o mesmo nome da Tag de abertura, precedido do caracter "/". Ex: <body> </body> A tag de abertura indica onde começa sua área de influência, enquanto o seu correspondente, tag de fechamento, indica onde termina a área de influência. Também existem tags vazias. São assim chamadas por que não tem a correspondente de abertura e de fechamento. Tags normalmente possuem atributos, que definem detalhes de configuração. Alguns atributos podem repetir para diversas tags, mas algumas delas possuem atributos próprios. As tags podem estar em diferentes sintaxes. Exemplo: <tag>... </tag> tag de abertura e tag de fechamento <tag atributos >... </tag> tag de abertura com atributos e tag de fechamento <tag> tag vazia <tag atributos> tag vazia com atributos 4 OquesãoelementosHTML/XHTML? A linguagem de marcação HTML define um documento com marcas ou marcações. Estas marcações, indicam ao browser que existe um elemento que deve ser apresentado. Os elementos são todas as estruturas visuais que podemos inserir em uma página: textos, links, tabelas, listas, imagens, vídeos, âncoras, elementos pré-formatados, parágrafos, títulos, etc. Um elemento é formado pelo 2
ProfªMSc.ElizabeteMunzlinger www.elizabete.com.br conjunto de tag com ou sem atributos e mais o conteúdo influenciado. O conjunto de elementos de um documento HTML formam a estrutura da página. Um elemento HTML pode ter as seguintes sintaxes: <tag_vazia> <tag_vazia atributo1= valor atributo2= valor > <tag_de_abertura>conteúdo</tag_de_fechamento> <tag_de_abertura atributo1= valor atributo2= valor >Conteúdo</tag_de_fechamento> 5 Estruturabásicadodocumento Todo documento deve conter os elementos que definem a sua estrutura básica. Esta estrutura se refere a um documento bem formado, segundo os padrões W3C. Evidente que dentro de cada conjunto de elementos apresentados abaixo, temos outros elementos. A endentação é usada apenas para organizar o código-fonte. Use a tabulação ou 2 espaços. Estrutura mínima de um documento bem formado: 1 <!DOCTYPE...> <- não é tag do HTML 2 <html> 3 <head> 4 <title> Aqui entra o título do documento </title> Informações lógicas sobre o documento </head> 5 <body> Todo o conteúdo que será exposto pelo browser... </body> </html> 1 Declaração DOCTYPE é uma instrução para o navegador sobre qual versão da linguagem de marcação a página está escrita. 2 Definição do documento HTML 3 Seção do cabeçalho contém informações lógicas sobre o documento. 4 Titulo da página. 5 Seção do corpo contém todo o conteúdo apresentado pelo browser. OBS: Cada item acima será visto em detalhes nos próximos documentos DiferençasentreHTML4.01eXHTML1.0destecapítulo 1 AestruturabásicacomelementoraizeinstruçãoDOCTYPEérecomendadoemHTMLeobrigatórioem XHTML. 2 EmXHTMLtodasastagsvaziasdevemtermarcadefim(barra): <meta name= author content= Joao /> <link rel="stylesheet" type="text/css" href="theme.css" /> <hr /> <br /> 3 EmXHTMLtags/atributosevaloresdevemserescritosemminúsculo.Osvaloresdevemestarsempre entreaspas.essacaracterísticaérecomendadatambémparadocumentoshtml. Abandone 1 DocumentosHTMLquenãopossuemaestruturabásicacomelementoraizeinstruçãoDOCTYPE. 2 DocumentosHTMLcomelementos,atributosevaloresescritosemmaiúsculaseminúsculas. 3
ProfªMSc.ElizabeteMunzlinger www.elizabete.com.br ReferênciasBibliográficas 1. MACEDO,MarcelodaSilva.ConstruindositesadotandopadrõesWeb.RiodeJaneiro:CiênciaModerna, 2004. 2. MARCONDES,ChristianAlfim.HTMLfundamental4.0.SãoPaulo:Érica,2005. 3. CARDOSO,Márdel.Desenvolvimentowebparaoensinosuperior.RiodeJaneiro:AxcelBooks,2004. 4. ALBERTIN,AlbertoLuiz.Comércioeletrônico:modelo,aspectosecontribuiçõesdesuaaplicação.SãoPaulo: Atlas,2004. 5. W3C.WordWideWebConsortium.Disponívelonlineem:[http://www.w3.org/] 6. Webdesign.RevistaWebdesign.RiodeJaneiro:Artecom,2010. 7. TiDigital.RevistaTIDigital.RiodeJaneiro:Artecom,2010. 8. HTML.HTMLWorkingGroup.Disponívelonlineem:[http://www.w3.org/html/wg/] 9. HTML.W3CRecomendation:HTML4.01Specification.Disponívelonlineem:[http://www.w3.org/TR/html4/] 10. HTML.HTML5 InRevision.Disponívelonlineem:[http://dev.w3.org/html5/spec/Overview.html] 11. XHTML.W3CRecomendation:XHTML1.0TheExtensibleHyperTextMarkupLanguage(SecondEdition).A ReformulationofHTML4inXML1.0.Disponívelonlineem:[http://www.w3.org/TR/xhtml1/] 12. HTML.OverviewofHTML.Disponívelonlineem:[http://www.w3.org/html/] 4