XHTML – (Estensible Hypertext Markup Language. É uma linguagem de marcação que especifica o formato de texto exibido em um navegador Web. Criamos documentos XHTML digitando-os com um editor de textos (por exemplo, NotePad, WordPad,vi, emacs, etc) e salvando-os com extensão de nome .html ou .htm Exemplo: <?xml version = “1.0”?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Primeira página Web</title> </head> <body> <p> Bem Vindo para o XHTML </p> </body> </html> A marcação de XHTML contém texto que representa o conteúdo de um documento e elementos que especificam a sua estrutura. Entre os elementos importantes de um documento XHTML estão os elementos: Html – inclui a seção cabeçalho (representada pelo elemento head) e a seção corpo (representada pelo elemento body). A seção head contém informações sobre o documento XHTML, como o título do documento. A seção cabeçalho também pode conter instruções especiais de formatação de documento, denominado folhas de estilo, e programas do lado do cliente denominados scripts para criar páginas Web dinâmicas. A seção corpo contém o conteúdo da página que o navegador exibe quando o usuário visita a página Web. Os documentos XHTML delimitam um elemento com as marcas de abertura e de finalização. A marca de abertura consiste no nome de elemento entre os sinais de menor que e maior que. Ex: <html>. A marca de finalização consiste no nome de elemento precedido por uma / entre os sinais de menor que e maior que. Ex: </html> VALIDAÇÃO DE XHTML DO W3C A programação de aplicativos baseados na Web pode ser complexa, e os documentos XHTML devem ser escritos corretamente para assegurar que os navegadores os processem adequadamente. Para criar documentos escritos corretamente, o World Wide Web Consortium (W3C) fornece um serviço de validação (validator.w3.org) para verificar a sintaxe de um documento. O documento pode ser validado a partir de um URL que especifica a localização do arquivo ou fazendo-se o upload de um arquivo para o site validator.w3.org/file-upload.html. Clicando em procurar..., os usuários podem selecionar arquivos em seus próprios computadores para fazer upload. Depois de selecionar um arquivo, clicar no botão VALIDAR. CABEÇALHOS A XHTML fornece seis cabeçalhos, chamados de elementos de cabeçalho, para especificar a importância relativa das informações. O elemento de cabeçalho h1 é considerado o cabeçalho mais significativo e é exibido em uma fonte maior que os outros cinco. Cada elemento de cabeçalho sucessivo (isto é, h2, h3 etc.) é exibido em uma fonte menor. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Cabecalho</title> </head> <body> <h1> Tamanho 1</h1> <h2> Tamanho 2</h2> <h3> Tamanho 3</h3> <h4> Tamanho 4</h4> <h5> Tamanho 5</h5> <h6> Tamanho 6</h6> </body> </html> VINCULANDO Um dos recursos mais importantes de XHTML é o hyperlink, que se vincula a outros recursos, como imagens e documentos XHTML. em XHTML textos e imagens podem atuar com hyperlinks. Os navegadores Web em geral sublinham os hyperlinks de texto e colorem de azul por padrão, de modo que os usuários possam distinguir os hyperlinks de texto simples. <html> <head> <title>Introduão aos hyperlinks</title> </head> <body> <h1> Aqui estão meus favoritos sites</h1> <p><strong>Clique em um nome para ir a pagina</strong></p> <p><a href = "http://www.cade.com.br">Cade</a></p> <p><a href = "http://www.yahoo.com.br">Yahoo</a></p> <p><a href = "http://www.google.com.br">Google</a></p> <p><a href = "http://www.deitel.com">Deitel</a></p> </body> </html> As âncoras podem se vincular a endereços de correio eletrônico como o URL mailto: Quando alguém clicar nesse tipo de link ancorado, a maioria dos navegadores abre o programa-padrão de correio eletrônico (por exemplo, o Outlook Express) para o usuário escrever uma mensagem de correio eletrônico para o endereço vinculado. <html> <head> <title>hyperlinks em correio eletronico</title> </head> <body> <p>Meu endereço de email: <a href = "mailto:[email protected]"> [email protected] </a> Clique no endereço e seu navegador abrirá uma mensagem de email com meu endereço. </p> </body> </html> IMAGENS A maioria das páginas contém textos e imagens. A duas formas mais populares de imagens são: imagens Graphics Interchange Format(GIF) e Joint Photographic Experts Group (JPEG). <html> <head> <title>imagens</title> </head> <body> <p> <img src = "xmlhtp.jpg" height = "238" width = "183" alt = "XML HOW TO Programa book cover" /> <img src = "jhtp.jpg" height = "238" width = "183" alt = "Java How to Program book cover" /> </p> </body> </html> Cada elemento img em um documento XHTML possui um atributo alt. Se o navegador não puder exibir uma imagem, ele exibe o valor do atributo alt. <html> <head> <title>imagens</title> </head> <body> <p> <a href = "links.html"> <img src = "buttons/links.jpg" width = "65" height = "50" alt = "Links Page" /> </a><br /> <a href = "list.html"> <img src = "buttons/lista.jpg" width = "65" height = "50" alt = "List exemplo Page" /> </a><br /> <a href = "contato.html"> <img src = "buttons/contato.jpg" width = "65" height = "50" alt = "Contato Page" /> </a><br /> <a href = "tabela.html"> <img src = "buttons/tabela.jpg" width = "65" height = "50" alt = "Tabela Page" /> </a><br /> <a href = "form.html"> <img src = "buttons/form.jpg" width = "65" height = "50" alt = "Formulario Page" /> </a><br /> </p> </body> </html> LISTAS NÃO ORDENADAS O elemento ul da lista não ordenada cria uma lista em que cada item inicia com um símbolo de marcador (denominado disco) Cada entrada em uma lista não ordenada (elemento ul) é um elemento li (item da lista). <?xml version="1.0" encoding="windows-1252"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <!-- Created on: 1/5/2006 --> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <title>Listas n o ordenadas</title> </head> <body> <h1>Aqui est o meus favoritos sites</h1> <p><strong>Clique em um nome para abrir a p gina.</strong><p> <!-- cria lista n o ordenada --> <ul> <li><a href = "http://www.google.com.br">Google</a></li> <li><a href = "http://www.ig.com.br">IG</a></li> <li><a href = "http://www.yahoo.com.br">Yahoo</a></li> <li><a href = "http://www.cade.com.br">Cade</a></li> </u> </body> </html> LISTAS ORDENADAS As listas podem ser aninhadas para representar relacionamentos hierárquicos, como em um formato de estrutura de tópicos. A seguir mostramos um exemplo com listas ordenadas e aninhadas, que ordenada seus itens por letra ou por número. <?xml version="1.0" encoding="windows-1252"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <!-- Created on: 1/5/2006 --> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <title>Listas Ordenadas</title> </head> <body> <h1>Os Melhores da Internet</h1> <!-- cria uma lista n o ordenada --> <ul> <li>Voc pode encontrar novas pessoas em paises ao redor do mundo.</li> <li>Voc tem acesso para novas midias e a torna-las p blicas <ul> <li>New games</li> <li> Novas aplica es <ol type = "I"> <li>Para Neg cios</li> <li>Para divers o</li> </ol> </li> <li>Novos Hor rios</li> <li>Engenharias</li> <li>Compras</li> <li> Programa o <ol type = "a"> <li>XML</li> <li>Java</li> <li>XHTML</li> <li>Scripts</li> <li>Novas Linguagens</li> </ol> </li> </ul> </li> <li>Links</li> <li>Bate papo com seus amigos</li> <li>Essa a tecnologia do futuro</li> </ul> <h1>Meus 3 Favoritos <em>CEOS</em></h1> <ol> <li>Harvey Deitel</li> <li>Bill Gates</li> <li>Michael Dell</li> </ol> </body> </html> TABELAS BÁSICAS DE XHTML É um recurso utilizado que organiza os dados em linhas e colunas. As tabelas são definidas com o elemento table. O atributo border especifica a largura da borda da tabela em pixels. Para criar uma tabela sem borda, configure border como “0”. O atributo width configura a largura da tabela. Exemplo 40% configura a largura da tabela em quarenta por cento da largura do navegador. Podemos também especificar em pixels. <?xml version="1.0" encoding="windows-1252"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <!-- Created on: 1/5/2006 --> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <title>Tabela simples</title> </head> <body> <table border = "1" width = "40%"> <caption><strong>Pre o das Frutas</strong></caption> <thead> <tr> <th>Frutas</th> <th>Pre os</th> </tr> </thead> <tbody> <tr> <td>Ma a</th> <td>R$0.25</td> </tr> <tr> <td>Laranja</td> <td>R$0.50</td> </tr> <tr> <td>Banana</td> <td>R$1.00</td> </tr> <tr> <td>Pineapple</td> <td>R$2.00</td> </tr> </tbody> <!-- <tfoot> É a última seçao de uma tabela --> <!-- formata o rodapé da tabela --> <tfoot> <tr> <th>Total</th> <th>R$3.75</th> </tr> </foot> </table> </body> </html> TABELAS – FORMATAÇÃO O elemento colgroup agrupa e formata as colunas. O elemento col especifica dois atributos nesse exemplo. O atributo align determina o alinhamento do texto na coluna. O atributo span determina quantas colunas o elemento col formata. Como exemplo, configuramos o valor de align como “right” e o valor do span como ‘1”,. As células da tabela são dimensionadas para ajustar os dados que contêm. Os atributos rowspan e colspan especificam o número de linhas ou colunas ocupadas por uma célula. O elemento th utiliza o atibuto rowspan =- “2” para permitir que a célula que contém a figura do camelo use duas células verticalmente adjacentes (assim a célula se distribui por duas linhas). O atributo th utiliza o atributo col span = “4” para aumentar a célula de cabeçalho. <?xml version="1.0" encoding="windows-1252"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <!-- Created on: 1/5/2006 --> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <title>Tabela Formatada</title> </head> <body> <h1>Tabela Exemplo</h1> <table border = "1"> <caption>Aqui temos um exemplo de tabela complexa.</caption> <!-- marcas <colgroup> e <col> sao usadas para --> <!-- formatar colunas inteiras --> <colgroup> <!-- atributo span determina quantas colunas --> <!-- a marca <col> afeta --> <col align = "right" span = "1" /> </colgroup> <thead> <!-- rowspans e colspans mesclam o numero --> <!-- especificado de celulas vertical ou horizontalmente --> <tr> <!-- mescla duas linhas --> <th rowspan = "2"> <img src = "imagem1.gif" width = "205" height = "167" alt = "imagem 1" /> </th> <!-- mescla quatro colunas --> <th colspan = "4" valign = "top"> <h1>Camelid comparison</h'><br /> <p>Approximate as of 9/2002</p> </th> </tr> <tr valign = "bottom"> <th># of Humps</th> <th>Indigenous region</th> <th>Spits?</th> <th>Produces Wool?</th> </tr> </thead> <tbody> <tr> <th>Camelos (bactriam)</th> <td>2</td> <td>Africa/Asia</td> <td rowspan = "2">Llama</td> <td rowspan = "2">Llama</td> </tr> <tr> <th>Llamas</th> <td>1</td> <td>Montanhas nos Andes</td> </tr> </tbody> </table> </body> </html> FORMULÁROS BÁSICOS DE XHTML Ao navegar por sites Web, os usuários precisam fornecer informações como endereços de e-mail, pesquisar palavras e CEP. Os dados que os usuários inserem em uma página Web são normalmente enviados para um servidor Web que fornece acesso aos recursos de um site. <?xml version="1.0" encoding="windows-1252"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <!-- Created on: 1/5/2006 --> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <title>Formulario Simples</title> </head> <body> <h1>Formul rio Simples</h1> <p>Por favor envie este formul rio para melhorar nosso site.</p> <form method = "post" action = "/cgi-bin/formail"> <p> <input type = "hidden" name = "recipiente" value = "[email protected]" /> <input type = "hidden" name = "subject" value = "Feedback Form" /> <input type = "hidden" name = "redirect" value = "main.html" /> </p> <p><label>Name: <input type = "text" name = "name" size = "25" maxlength = "30" /> </label> <p> <input type = "submit" value = "Enviar" /> <input type = "reset" value = "Limpar" /> </p> </form> </body> </html> <?xml version="1.0" encoding="windows-1252"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <!-- Created on: 1/5/2006 --> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <title>Formulario Complexo</title> </head> <body> <h2 align= center>Reserva de Matr cula</h2> <form method = post action = "/cgi-bin/formail"> <h4>Curso pretendido:</h4> <table> <tr> <td>Curso</td> <td> <select name = "curso"> <option> Ensino Infantil <option selected> Ensino Fundamental <option> Ensino M dio </select> </td> <td>S rie</td> <td><input type = "text" name = "serie"></td> </tr> <tr> <td>Per odo</td> <td><input type="text" name="per odo"></td> </tr> </table> <h4>Dados Pessoais</h4> Nome: <input type = "text" name = "nome" size="40"> <table> <tr> <td>Data de Nascimento</td> <td><input type = "text" name ="dnas"></td> <td>Nacionalidade</td> <td><input type = "text" name="nacion"></td> </tr> <tr> <td>Sexo:</td> <td> <input type = "radio" name = "sexo" value = "f">Feminino<br /> <input type = "radio" name = "sexo" value = "m">Masculino </td> </tr> </table> <p> <input type = "submit" value = "Enviar"> <input type = "reset" value = "Apagar"> </form> </body> </html> VINCULAÇÃO INTERNA A vinculação interna é útil para documentos longos, que contém muitas seções. Clicar em um link interno permite localizar uma seção sem ter de rolar pelo documento inteiro. <?xml version="1.0" encoding="windows-1252"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <!-- Created on: 1/5/2006 --> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <title>Links Internos</title> </head> <body> <!-- <a name = "..."</a> cria um hyperlink interno --> <p><a name = "features"></a></p> <h1>Os melhores neg cios na Internet</h1> <!-- endereco de um link interno "#linkname" --> <p><a href = "#ceos">Ir para <em>CEOS Favoritos</em></a></p> <ul> <li>Voc pode encontrar pessoas em cidades do mundo</li> <li>Voc tem acesso a novas tecnologias e torna-las p blicas: <ul> <li>Novos Games</li> <li>Novas aplica es</li> <ul> <li>Para Neg cios</li> <li>Para Divers o</li> </ul> </li> <li>Em volta do novo rel gio</li> <li>Procurando Engenheiros,/li> <li>Comprando</li> <li>Programando <ul> <li>XHTML</li> <li>Java</li> <li>Dynamic HTML</li> <li>Scripts</li> <li>Novas Linguagens</li> </ul> </li> </ul> </li> <li>Links</li> <li>Falar com velhos amigos</li> <li>Novas tecnologia do futuro</li> </ul> <!-- ancora identificada --> <p><a name = "ceos"></a></p> <h1>Meus 3 favoritos <em>CEOS</em></h1> <p> <!-- hyperlink interno para recursos --> <a href = "#features">Ir para <em>Favoritos Features</em></a></p> <ol> <li>Bill Gates</li> <li>Steve Jobs</li> <li>Michael Dell</li> </ol> </body> </html> ELEMENTOS META As pessoas utilizam os mecanismos de busca para localizar sites úteis da Web. Os mecanismos de busca normalmente catalogam os sites seguindo links de página a página e salvando as informações de identificações e de classificação para cada uma. Uma maneira de os mecanismos de busca catalogar as páginas é ler o conteúdo dos elementos meta em cada página, que especificam as informações sobre um documento. Dois atributos importantes do elemento meta são name, que identifica o tipo de elemento meta, e content que fornece as informações que os mecanismos de busca utilizam para catalogar as páginas. <?xml version="1.0" encoding="windows-1252"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <!-- Created on: 1/5/2006 --> <head> <title>Elementos Meta</title> <meta name = "keywords" content = "Web page, design, XHTML, tutorial, personal, help, index, form, contact, feedback, list, links, quadro, deitel" /> <meta name = "description" content = "Este Web site ajudar voc a aprender o XHTML b sico e design de Web page, usando os exemplos interativos." /> </head> <body> <h1>Bem vindo ao nosso Site!</h1> <p> Nos temos feitos esses sites para alunos que querem saber sobre <strong><em>XHTML</em></strong>. <em>XHTML</em> melhor preparado do que <em>html</em> para apresentar complexos dados na internet. <em>XHTML</em>tem vantagens sobre XML. Voc saber ainda muito sobre <em>XHTML</em> </p> <p>Se divirta fazendo sites!</p> </body> </html> ELEMENTO FRAMESET Apresentamos nesse documento o tipo frameset – um tipo especial de documento XHTML especificamente pra framesets. Podemos chamar de quadros ou frames. <frameset parâmetros> ... </frameset> - este comando define a estrutura geral (layout) dos quadros ou frames. Ele contém parâmetros que definem o número de quadros e como estarão distribuídos na tela. Esses parâmetros são: cols – cria frames verticais. Ele exige que seja informada a largura de cada coluna. rows – este outro cria frames horizontais. É preciso que informe a altura da linha. Eles aceitam os seguintes valores: Em porcentagem (numero seguido do símbolo % (porcentagem). A soma dos quadros deve ser sempre igual a 100%. <frameset cols = 30%, 70%> - cria uma moldura com dois frames verticais.O primeiro ocupa 30 por cento da tela e o segundo 70 por cento. Em pixels (quantidade de pontos) <frameset rows = 70, 450, 80> - cria uma janela com três quadros na horizontal. Em tamanho relativo (representado pelo símbolo * (asterisco)). <framesete cols = *, *, *> - cria uma janela com três frames na vertical de tamanho relativo; o asterisco se encarrega de fazer a divisão da tela em partes iguais. <frame parâmetros> - este comando indica qual será o conteúdo do quadro. Deve ser incluído um para cada tela. src – informa o endereço(URL) da página que será aberta no frame. name – dá nome ao frame, para que o browser saiba em qual frame deve abrir a página informada. <html> <head> <title>Exemplo de frame simples</title> </head> <frameset cols = “200, 400”> <frame src = “quadro1.html” name = “índice”> <frame src = “quadro2.html” name = “assuntos”> </frameset> </html> FORMATAÇÃO DOS FRAMES frameborder – permite incluir ou retirar a borda dos frames. <frameset xxx frameborder = “xx”> framespacing - <frameset xxx framespacing = “xx” – mesma função do frameborder. TARGET – o parâmetro target informa ao browser em qual frame será aberta a página do link que foi acionado. <?xml version="1.0" encoding="windows-1252"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <!-- Created on: 1/5/2006 --> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <title></title> </head> <body> <center> <ul> <li><a href="quadro2.html" target="assuntos">Apresenta o</a> <li><a href="quadro3.html" target="assuntos">Programar em xml</a> <li><a href="quadro4.html" target="assuntos">Personalizar a p gina</a> </ul> </body> </html> This document was created with Win2PDF available at http://www.win2pdf.com. The unregistered version of Win2PDF is for evaluation or non-commercial use only. This page will not be added after purchasing Win2PDF.
Download
