Apresentação do PowerPoint
Propaganda
UNIBRATEC – Ensino Superior e Técnico em Informática Ferramentas para Web I 1 Micheline Carvalho Barroso Sexta-feira, 3 de Fevereiro de 2006 UNIBRATEC – Ensino Superior e Técnico em Informática Ferramentas para Web I XHTML Profa. Micheline Carvalho Barroso [email protected] 2 Capítulo 2 – XHTML Sexta-feira, 3 de Fevereiro de 2006 INC – Introdução a Sistemas de Computação XHTML De onde veio o XHTML? Razões para usar XHTML: • XHTML é o padrão de marcação atual, substituindo a HTML; • utilização de regras de sintaxe mais precisas e rigorosas; • criação de documentos mais consistentes; • facilidade de manutenção; • extensão do cliente Web além do navegador: PDAs, celulares e outros dispositivos móveis; • iniciação dos desenvolvedores Web no ambiente XML. ‹#› Capítulo 1 – Conceitos Básicos Sexta-feira, 3 de Fevereiro de 2006 INC – Introdução a Sistemas de Computação XHTML Elementos obrigatórios em um documento XHTML <!DOCTYPE tipo_do_documento> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Título do documento</title> </head> <body> Conteúdo do documento </body> </html> ‹#› Capítulo 1 – Conceitos Básicos Sexta-feira, 3 de Fevereiro de 2006 INC – Introdução a Sistemas de Computação XHTML Para que serve o DOCTYPE ? • A XHTML permite que desenvolvedores criem diversos tipos diferentes de documentos, cada um definido por regras diferentes. • As regras de cada tipo são detalhadas na Definição do Tipo de Documento (Document Type Definitions - DTD). • Sua declaração DOCTYPE informa aos serviços de validação e aos navegadores modernos qual DTD foi utilizada para elaborar a marcação. ‹#› Capítulo 1 – Conceitos Básicos Sexta-feira, 3 de Fevereiro de 2006 INC – Introdução a Sistemas de Computação XHTML Para que serve o DOCTYPE ? • As declarações DOCTYPE são componentes-chave de páginas Web compatíveis. • Sua marcação e CSS não serão validadas a menos que seu código XHTML comece com uma declaração DOCTYPE apropriada. • Esta deve ser sempre a primeira declaração em um documento Web. ‹#› Capítulo 1 – Conceitos Básicos Sexta-feira, 3 de Fevereiro de 2006 INC – Introdução a Sistemas de Computação XHTML Os tipos de DOCTYPE • STRICT • TRANSITIONAL • FRAMESET ‹#› Capítulo 1 – Conceitos Básicos Sexta-feira, 3 de Fevereiro de 2006 INC – Introdução a Sistemas de Computação XHTML Os tipos de DOCTYPE • XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> • XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> • XHTML 1.0 Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> ‹#› Capítulo 1 – Conceitos Básicos Sexta-feira, 3 de Fevereiro de 2006 INC – Introdução a Sistemas de Computação XHTML A declaração namespace • A declaração DOCTYPE é imediatamente seguida por uma declaração de namespace em XHTML, associada ao elemento raiz html. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> • Um namespace em XML é uma coleção de tipos de elementos e nomes de atributos associados a um DTD específico. • A declaração namespace indica a sua localização. ‹#› Capítulo 1 – Conceitos Básicos Sexta-feira, 3 de Fevereiro de 2006 INC – Introdução a Sistemas de Computação XHTML Declarando o tipo do conteúdo • Para serem interpretados corretamente por navegadores e aprovados nos testes de validação de marcação, todos os documentos XHTML devem declarar o tipo de codificação de caractere que foi usado em sua criação (Unicode, ISO-8859-1, etc). • Existem duas formas de fazer isso: <?xml> version="1.0" encoding="iso-8859-1"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> ‹#› Capítulo 1 – Conceitos Básicos Sexta-feira, 3 de Fevereiro de 2006 INC – Introdução a Sistemas de Computação XHTML Diferenças entre XHTML e HTML • todas as tags devem ser escritas em letras minúsculas; • o tratamento dos atributos; • o uso de tags de fechamento é obrigatório; • as tags vazias devem ser fechadas; • as tags devem estar convenientemente aninhadas; • o tratamento dos comentários. ‹#› Capítulo 1 – Conceitos Básicos Sexta-feira, 3 de Fevereiro de 2006 INC – Introdução a Sistemas de Computação XHTML Diferenças entre XHTML e HTML • Todas as tags devem ser escritas em letras minúsculas. Errado: <DIV><P>Aqui um texto</P></DIV> Certo: <div><p>Aqui um texto</p></div> ‹#› Capítulo 1 – Conceitos Básicos Sexta-feira, 3 de Fevereiro de 2006 INC – Introdução a Sistemas de Computação XHTML Diferenças entre XHTML e HTML • O tratamento dos atributos: nomes de atributos. Errado: <td ROWSPAN="3">...</td> Certo: <td rowspan="3">...</td> ‹#› Capítulo 1 – Conceitos Básicos Sexta-feira, 3 de Fevereiro de 2006 INC – Introdução a Sistemas de Computação XHTML Diferenças entre XHTML e HTML • O tratamento dos atributos: valores de atributos. Errado: <td rowspan=3>...</td> Certo: <td rowspan="3">...</td> ‹#› Capítulo 1 – Conceitos Básicos Sexta-feira, 3 de Fevereiro de 2006 INC – Introdução a Sistemas de Computação XHTML Diferenças entre XHTML e HTML • O tratamento dos atributos: sintaxe dos atributos. Errado: <input checked /> Certo: <input checked="checked" /> ‹#› Capítulo 1 – Conceitos Básicos Sexta-feira, 3 de Fevereiro de 2006 INC – Introdução a Sistemas de Computação XHTML Diferenças entre XHTML e HTML • O tratamento dos atributos: os atributos id e name. Errado: <img src="imagem.gif" name="minha_imagem" /> Certo: <img src="imagem.gif" id="minha_imagem" /> Ou: <img src="imagem.gif" id="minha_imagem“ name="minha_imagem" /> ‹#› Capítulo 1 – Conceitos Básicos Sexta-feira, 3 de Fevereiro de 2006 INC – Introdução a Sistemas de Computação XHTML Diferenças entre XHTML e HTML • O tratamento dos atributos: o atributo alt para imagens. Certo: <img src="imagem.gif" alt ="minha_imagem" /> Ou: <img src="imagem.gif" alt = “ “ /> ‹#› Capítulo 1 – Conceitos Básicos Sexta-feira, 3 de Fevereiro de 2006 INC – Introdução a Sistemas de Computação XHTML Diferenças entre XHTML e HTML • O uso de tags de fechamento é obrigatório. Errado: <p>Um parágrafo.<p>Outro parágrafo. Certo: <p>Um parágrafo.</p><p>Outro parágrafo.</p> ‹#› Capítulo 1 – Conceitos Básicos Sexta-feira, 3 de Fevereiro de 2006 INC – Introdução a Sistemas de Computação XHTML Diferenças entre XHTML e HTML • As tags vazias devem ser fechadas. Errado: Elementos vazios sem terminação <br> <hr> <img src="imagem.gif" alt="minha imagem"> Certo: Elementos vazios com terminação <br /> <hr /> <img src="imagem.gif" alt="minha imagem" /> ‹#› Capítulo 1 – Conceitos Básicos Sexta-feira, 3 de Fevereiro de 2006 INC – Introdução a Sistemas de Computação XHTML Diferenças entre XHTML e HTML • As tags devem estar convenientemente aninhadas. Errado: <div><em><p> Aqui um texto itálico </em></p></div> Certo: <div><em><p> Aqui um texto itálico </p></em></div> ‹#› Capítulo 1 – Conceitos Básicos Sexta-feira, 3 de Fevereiro de 2006 INC – Introdução a Sistemas de Computação XHTML Diferenças entre XHTML e HTML • O tratamento dos comentários. Errado: <!-- Aqui começa o menu --> <!-- ------------------- --> código XHTML do menu Certo: <!-- Aqui começa o menu --> <!-- xxxxxxxxxxxxxxxxxx --> código XHTML do menu ‹#› Capítulo 1 – Conceitos Básicos Sexta-feira, 3 de Fevereiro de 2006 INC – Introdução a Sistemas de Computação XHTML Códigos gerados por editores • Cuidado com os códigos gerados por editores! Errado: onMouseOver=function() Certo: onmouseover=function() ‹#› Capítulo 1 – Conceitos Básicos Sexta-feira, 3 de Fevereiro de 2006 INC – Introdução a Sistemas de Computação XHTML XHTML Básico Elemento ‹#› Documento Tag/Atributos <html>..</html> Cabeçalho <head>..</head> Título <title>..</title> Corpo <body>..</body> Parágrafo <p>..</p> Nova linha <br /> Texto pré-formatado <pre>..</pre> Cabeçalho de texto <h1>..</h1> (<h1> ,.., <h6>) Seção <div>..</div> Capítulo 1 – Conceitos Básicos Sexta-feira, 3 de Fevereiro de 2006 INC – Introdução a Sistemas de Computação XHTML XHTML Básico Elemento Texto enfatizado ‹#› Tag/Atributos <em>..</em> Texto fortemente enfatizado <strong>..</strong> Citação <cite>..</cite> Código de programa <code>..</code> Entrada de programa <kbd>..</kbd> Saída de programa <samp>..</samp> Variável/Argumento de programa <var>..</var> Capítulo 1 – Conceitos Básicos Sexta-feira, 3 de Fevereiro de 2006 INC – Introdução a Sistemas de Computação XHTML XHTML Básico Elemento ‹#› Texto subscrito Tag/Atributos <sub>..</sub> Texto sobrescrito <sup>..</sup> Abreviação <abbr>..</abbr> Atributo: title Referência em linha <q>..</q> Atributo: cite Referência em bloco <blockquote>..</blockquote> Lista não-ordenada <ul>..</ul> Lista ordenada <ol>..</ol> Elemento da lista <li>..</li> Capítulo 1 – Conceitos Básicos Sexta-feira, 3 de Fevereiro de 2006 INC – Introdução a Sistemas de Computação XHTML XHTML Básico Elemento Âncora ‹#› Tag/Atributos <a>..</a> Atributos: href, name/id Imagem <img /> Atributos: src, alt Barra horizontal <hr /> Comentários <!-- .. --> Capítulo 1 – Conceitos Básicos Sexta-feira, 3 de Fevereiro de 2006 INC – Introdução a Sistemas de Computação XHTML Tabelas Elemento ‹#› Corpo da tabela Tag/Atributos <table>..</table> Linha da tabela <tr>..</tr> Célula de cabeçalho <th>..</th> Atributos: colspan, rowspan Célula de dado <td>..</td> Atributos: colspan, rowspan Capítulo 1 – Conceitos Básicos Sexta-feira, 3 de Fevereiro de 2006 INC – Introdução a Sistemas de Computação XHTML Formulários Elemento Corpo do formulário ‹#› Tag/Atributos <form>..</form> Atributos: method, action, name/id Campo de formulário <input /> Atributos: type, name/id, size, maxlength, value, checked Campo de texto de linha única type=“text” Atributos: size, maxlength, value Capítulo 1 – Conceitos Básicos Sexta-feira, 3 de Fevereiro de 2006 INC – Introdução a Sistemas de Computação XHTML Formulários Elemento Campo de senha ‹#› Tag/Atributos type=“password” Atributos: size, maxlength, value Campos radio button type=“radio” Atributos: name, value, checked Campos checkbox type=“checkbox” Atributos: name, value, checked Campo oculto type=“hidden” Atributos: name, value Capítulo 1 – Conceitos Básicos Sexta-feira, 3 de Fevereiro de 2006 INC – Introdução a Sistemas de Computação XHTML Formulários Elemento ‹#› Botão para enviar dados Tag/Atributos type=“submit” Atributos: name/id, value. Botão para limpar dados type=“reset” Atributos: name/id, value. Área de texto <textarea>..</textarea> Atributos: name/id, cols, rows Caixa de seleção <select>..</select> Atributos: name/id, size, multiple Opção da caixa de seleção <option>..</option> Atributo: selected, value Capítulo 1 – Conceitos Básicos Sexta-feira, 3 de Fevereiro de 2006 INC – Introdução a Sistemas de Computação XHTML Frames em série Elemento Frame ‹#› Tag/Atributos <iframe>..</iframe> Atributos: name/id, src, frameborder, scrolling Capítulo 1 – Conceitos Básicos Sexta-feira, 3 de Fevereiro de 2006 INC – Introdução a Sistemas de Computação XHTML Codificação de caracteres • Existem métodos de codificação apropriados para acrescentar caracteres especiais e letras acentuadas em um documento. • Estes métodos são: referência de caracter e referência de entidade. • a codificação começa com um "&" (e comercial) e termina com ";". A diferença é a seguinte: na referência de caracter, é utilizado um código numérico para o caracter; na referência de entidade, é utilizado um código literal (mais fácil de lembrar). ‹#› Capítulo 1 – Conceitos Básicos Sexta-feira, 3 de Fevereiro de 2006 INC – Introdução a Sistemas de Computação XHTML Codificação de caracteres Relações de códigos podem ser encontradas em: • http://www.w3.org/TR/1999/REC-html40119991224/sgml/entities • http://www.miswebdesign.com/resources/articles/xhtmllatin-1-character-references.html • http://www.miswebdesign.com/resources/articles/xhtmlspecial-character-references.html • http://www.miswebdesign.com/resources/articles/xhtmlsymbol-character-references.html ‹#› Capítulo 1 – Conceitos Básicos Sexta-feira, 3 de Fevereiro de 2006 INC – Introdução a Sistemas de Computação Bibliografia • http://w3c.org Site do Consórcio W3C (World Wide Web Consortium) ZELDMAN, Jeffrey. "Projetando Web Sites Compatíveis". Rio de Janeiro: Editora Campus, 2003. http://www.maujor.com Site de Maurício Samy Silva. Tutoriais, Recomendações, Dicas: XHTML e CSS. HOLZSCHLAG, Molly E.. "XHTML: XML on the client side". XML Journal, Abril/2001. Disponível online em: http://molly.com/articles/markupandcss/2001-04-xmlclientside.php. Acessado em: 30/03/2005. ‹#› Capítulo 1 – Conceitos Básicos Sexta-feira, 3 de Fevereiro de 2006 INC – Introdução a Sistemas de Computação Bibliografia PECK, Nigel. "XHTML Web Design for Beginners". SitePoint, Junho/2003. Disponível online em: http://www.accessify.com/tutorials/xhtml-web-design-for-beginnerspart-1.asp. Acessado em: 03/04/2005. "Recomendação XHTML 1.0 do W3C". Disponível online em: http://www.maujor.com/w3c/xhtml10_2ed.html. Acessado em: 06/04/2005. ‹#› Capítulo 1 – Conceitos Básicos Sexta-feira, 3 de Fevereiro de 2006
