1. A tag ul Atributos Obrigatórios Atributos padrão A tag ol A tag li... 19

Transcrição

1 Índice Capítulo 1 A linguagem HTML Evolução do HTML Porque utilizamos tags com letras minúsculas?! Validando Seus Documentos Separando Conteúdo da Apresentação Trabalhando com XHTML e CSS Escolhendo o Navegador Web Introduzindo o URL Os Componentes de um URL URLs Absolutos e Relativos Capítulo 2 O Básico de XHTML e CSS Tipos de tags HTML Seletores para as tags de nível de bloco Seletores das tags inline Seletores das tags substituídas Elementos Aninhados Espaços em Branco Adicionando Comentários Elementos e Atributos Capítulo 3 O Elemento (cabeçalho do documento) A Informação Contida no Elemento Elementos de cabeçalho () A declaração DOCTYPE O elemento <meta> Palavras chave para os motores de pesquisa Valores desconhecidos para o atributo name do elemento <meta> A Declaração XML O Elemento HTML Atributos Necessários Atributos opcionais Atributos padrão Tipos de conteúdo (CONTENT TYPES) Capítulo 4 Listas... 18

2 1. A tag ul Atributos Obrigatórios Atributos padrão A tag ol Atributos Obrigatórios Atributos padrão A tag li Atributos Obrigatórios Atributos padrão Listas de Definições A tag dl Atributos Obrigatórios Atributos padrão A tag dt Atributos Obrigatórios Atributos padrão A tag dd Atributos Obrigatórios Atributos padrão Capítulo 5 Elementos de Texto Estruturado A tag EM A tag STRONG A tag CITE A tag Q A tag DFN A tag CODE A tag SAMP A tag KBD: A tag VAR: A Tag BDO A tag ABBR A tag ACRONYM A tag INS A tag DEL A tag HR... 24

3 16. Marcas de citação: os elementos BLOCKQUOTE e Q Representação das citações Sub índices e super índices: Os elementos SUB e SUP Linhas e parágrafos Parágrafos: o elemento P Controle das mudanças de linha Capítulo 6 Links e Âncoras O que é um hiperlink? Atributos do Hiperlink Indicadores (Âncoras) Capítulo 7 Tabelas Semanticamente Corretas TAG table TAG CAPTION TAG TH TAGS THEAD TBODY e TFOOT ATRIBUTOS COLSPAN E ROWSPAN ATRIBUTO SUMARY TABELA COMPLETA Capítulo 8 Fundamentos do CSS O nascimento do HTML O HTML atual Os problemas criados A solução proposta As restrições O efeito "cascata" Regra CSS Regra CSS e sua sintaxe Agrupamento de Seletores O seletor classe O seletor ID Inserindo comentários nas CSS Maneiras de vincular Folhas de Estilo a documentos Os três tipos de vinculação de folhas de estilo Folha de estilo externa Folha de estilo incorporada ou interna... 37

4 1.9 Folha de estilo inline Folhas múltiplas de estilo A propriedade font As letras nos elementos HTML Valores válidos para as propriedades da letra color - A cor da letra font-family - O tipo de letra font-size - O tamanho de letra font-style - O estilo de letra font-variant - Letras maiúsculas "menores" font-weight - Peso das letras - negrito (intensidade da cor) font - Todas as propriedades das letras em uma declaração única A propriedade text Os textos nos elementos HTML Valores válidos para as propriedades do texto color - A cor do texto letter-spacing - O espaço entre letras word-spacing - O espaço entre palavras text-align - Alinhar o texto text-decoration - Decoração do texto text-indent - Recuo do texto text-transform - Forma das letras do texto A propriedade margin As margens nos elementos HTML Valores válidos para as propriedades de margem margin-top - A margem superior margin-right - A margem direita margin-bottom - A margem inferior margin-left - A margem esquerda margin - Todas as quatro margens em uma declaração única A propriedade border As bordas nos elementos HTML Valores válidos para as propriedades das bordas border-width, border-style e border-color espessura, estilo e cor da borda A propriedade padding... 53

5 1.1 Os espaçamentos nos elementos HTML Valores válidos para as propriedades de espaçamento padding-top - O espaçamento superior padding-right - O espaçamento direito padding-bottom - O espaçamento inferior padding-left - O espaçamento esquerdo padding - Todos os quatro espaçamentos em uma declaração única A propriedade background O fundo dos elementos HTML Valores válidos para as propriedades do fundo background-color - A cor do fundo background-image - A imagem de fundo background-repeat - Repetir verticalmente a imagem de fundo background-repeat - Repetir horizontalmente a imagem de fundo background-position - Posicionar uma imagem de fundo background-attachment - Ajustar uma imagem de fundo fixa, que não "rola" com a tela background...todas as propriedades do fundo em uma declaração única A propriedade list Mudando o estilo das listas HTML Valores válidos para as propriedades do lista list-style-image - Imagem para marcadores de lista list-style-position - posição dos marcadores de lista list-style-type - Os tipos de marcadores de lista Definir os marcadores de listas não ordenadas list-style - Duas propriedades das listas em uma declaração única Pseudo elementos Sintaxe O pseudo elemento "first-letter" O pseudo elemento "first-line" Controlando as entrelinhas e o espaçamento entre elementos HTML As propriedades "line-height" e "margin" Alterando o espaçamento entre linhas E o espaçamento (a distância) entre os parágrafos? As medidas CSS de comprimento Introdução... 68

6 19. Incrementando cabeçalhos com CSS Efeitos CSS em Cabeçalhos Efeitos CSS em Cabeçalhos Efeitos CSS em Cabeçalhos Efeitos CSS em Cabeçalhos Efeitos CSS em Cabeçalhos Efeitos CSS em Cabeçalhos CSS Links Pseudo-classes Diferentes estilos de links em uma mesma página web Botões com CSS Como criar botões com CSS Estilos CSS em objetos de formulários As tags HTML para formulários e sua estilização com CSS Estilo CSS na tag <input> Estilo CSS na tag <select> Estilo CSS na tag <textarea> Estilo CSS em formulário para LOGIN... 81

7 Capítulo 1 A linguagem HTML 1. Evolução do HTML O HTML é uma Linguagem de marcação de texto. Mais especificamente, uma linguagem de marcação de hiper texto. Portanto, antes de começar a falar de HTML, vamos entender o que vem a ser uma linguagem de marcação. Linguagens de marcação (markup languages em inglês) são linguagens que combinam texto com informações extras sobre o texto. Essa informação extra pode ser representada por diversos símbolos ou palavras chave diferentes, dependendo da linguagem de marcação com que estivermos trabalhando. O HTML não era uma linguagem de formatação de textos qualquer, ela possibilitava ligar textos que estavam num computador a textos que estavam num outro computador, usando como meio a internet. O processador e visualizador de HTML são chamados de navegador pela característica do hipertexto que permite ao usuário "nadar" na informação. O navegador (também chamado de browser ), nada mais faz do que abrir arquivos de computador e, caso esses arquivos contenham códigos HTML, interpretá los segundo o padrão do hipertexto e gerar a "página html", que é a manifestação gráfica dos códigos aquilo que você usualmente vê quando navega pela internet. Por convenção, os nomes dos arquivos em HTML terminam com.html. Exemplo: index.html, foo.bar.html e etc.hml (existem também arquivos html que terminam com.shtml e outras extensões). Observe que esses arquivos podem estar tanto no computador do usuário que usa o navegador quanto em outros computadores: o navegador é capaz de abrir esses arquivos desde que eles estejam acessíveis. Uma página HTML é dividida em duas partes, a cabeça e o corpo ( e ). Na cabeça (ou cabeçalho) são definidos os atributos principais do documento, como o título e as palavras chave. O corpo contém a parte visível do documento, ou seja, aquela que você verá processada em seu navegador. A linguagem HTML surgiu em 1993 com a versão 1.0 até a versão XHTML em A versão XHTML possui três variantes, conforme mostrado abaixo: HTML 1.0 (1993) HTML 2.0 (1995) HTML 3.0 (1996) HTML 4.0 (1997) HTML 4.01 (1999) XHTML 1.0 (2000) extensible HTML que pode ser subdividida em: o XHTML 1.0 Strict (estrito) o XHTML 1.0 Transitional (Transicional) o XHTML 1.0 Frameset (frames estão em desuso) A linguagem HTML, da versão 1.0 até a 4.01 incluindo a XHTML, passou por diversas alterações. Dentre as alterações mais importantes, podemos destacar a reprovação (deprecação) de algumas tags e atributos. A seguir, mostramos uma tabela com as tags reprovadas pelo W3C (World Wide Web Consortium) e como substituí las: Tags HTML Reprovadas Tag Reprovada Descrição Substituir por <applet> Insere Applet <object> <basefont> Fonte do documento todo font style sheets <center> Centraliza elemento <div style="text align:center"> <dir> Lista de Diretório <ul> <font> Aplica Estilo da Fonte font style sheets <isindex> Adiciona Campo de Busca <form>

8 <menu> Lista de Menu <ul> <s> Sobretachado text style sheets <strike> Sobretachado text style sheets <u> Sublinhado text style sheets A tag <center>, que é reprovada, tem sido utilizada para centralizar estruturas dentro de uma página e não apenas texto, inclusive tabelas. O uso de tabelas para layout também foi reprovado. Tabelas são para estruturas dados tabulares para aquelas situações onde se necessita mostrar dados numa grade. Há também atributos de tags que foram reprovados. Somente os atributos das tag já listadas como reprovadas estão excluídas desta lista. Atributos da tags HTML reprovados Atributos align alink background bgcolor clear compact color border hspace link noshade nowrap size start text type value vlink width vspace Reprovado se usado em: <caption>, <img>, <table>, <hr>,<div>, <h1..6>, <p>, <table> <tr> <td> <th> <br> <ol>, <ul> <basefont>, <font> <img>, <object> <img>,<object> <hr> <td>, <th> <basefont>, <font>, <hr> <ol> <li> <li> <hr>, <pre>, <td>, <th> <img>,<object> Todos estes atributos reprovados podem ser substituídos por controles de folhas de estilo. A maioria pode ser simplesmente trocado por uma folha de estilo, como por exemplo, o arquivo mailme.gif adicionado em cada página de um website possui atributos pré definidos em folhas de estilo, podendo ser utilizado da seguinte maneira: supondo que a tag img apareça como se segue: <img src= mailme.gif id= figura />. Podemos formatá la com CSS conforme: #figura { vertical-align:middle; padding:25px; width:29; height:31; border-style:none;

9 Cada vez que a imagem for utilizada, somente o src e o id são usados (navegadores mais antigos ainda precisam do atributo borda zero border= 0, mas você terá que utilizar o HTML4 Transitional ao invés do Strict. Se você utilizar a mesma imagem mais de uma vez, utilize um identificador de classe (que veremos mais adiante). Perceba também que <td width=> está reprovado. Para controlar a largura de colunas de tabelas, utilize as tags <colgroup> e <col>. 2. Porque utilizamos tags com letras minúsculas?! Em HTML os nomes das tags e elementos podem ser escritos tanto com letras maiúsculas quanto com letras minúsculas, tanto que <B> é a mesma coisa que <b>. Se você observar em tutoriais encontrados pela Web, vai notar que os mais antigos geralmente utilizam letras maiúsculas para escrever os nomes das tags, mas os mais modernos utilizam exclusivamente letras minúsculas. A nova geração do HTML é uma aplicação do XML e é designada por XHTML. O XHTML é a melhor linguagem para se criar páginas para a Web, mas é mais restrita do que o HTML ( rouba algumas das liberdades que o HTML oferece). Ao contrário do que acontece em HTML, em XML as etiquetas <B> e <b> representam elementos diferentes, visto que em XHTML foi adotado uma convenção segundo a qual todas as etiquetas devem ser escritas com letras minúsculas. Por este motivo é extremamente recomendável que se escreva todas as etiquetas com letras minúsculas. Deste modo, você estará adquirindo bons modos e quase não terá trabalho de converter suas páginas HTML para XHTML. 3. Validando Seus Documentos Utilizando uma ferramenta de autoria (Dreamweaver, Frontpage, por exemplo) W3C 4. Separando Conteúdo da Apresentação 1990 Surgimento do CSS (Cascading Style Sheets). 5. Trabalhando com XHTML e CSS Por se tratar de um texto plano, pode se utilizar qualquer editor de textos, como o bloco de notas, vi (Linux) ou TextEditor (Mac). 6. Escolhendo o Navegador Web Microsoft Internet Explorer é o browser padrão nos sistemas Windows. Apple Safari é o browser padrão para o Mac OS X. Mozilla Firefox é o browser gratuito disponível para Windows, Mac OS X e Linux ( Netscape Navigator está disponível para Mac OS X e Linux e é baseado no mesmo software que impulsiona o Firefox ( Opera é outro browser gratuito disponível para uma grande gama de sistemas operacionais ( Konqueror é um browser e gerenciador de arquivos gratuito para Linux ( OmniWeb é um browser para Mac OS X que custa uma pequena taxa e uma avaliação gratuita ( 7. Introduzindo o URL Cada arquivo ou documento disponível na web residem em um endereço único chamado de localizador de recurso uniforme (URL). O termo Identificador de Recurso Uniforme (URI) é usado às vezes como URL, embora URI seja um termo mais geral; um URL é um tipo de URI. Usaremos o termo URL nesta apostila para discutir posições dirigidas a

10 endereços de arquivos. É este endereço que permite que um dispositivo conectado à Web encontre um arquivo específico em um servidor específico a fim de baixar e exibir ao usuário (ou para empregar em alguma outra finalidade; nem todos os arquivos na Web podem ser mostrados). 8. Os Componentes de um URL Um URL segue uma sintaxe padrão que pode ser dividido em pequenos termos chave, diagramado na Figura 1 2. Cada segmento do URL comunica a informação específica ao cliente e ao usuário. O protocolo indica uma de um conjunto de regras diferentes que ditam o movimento dos dados sobre a Internet. A Web usa o protocolo de transferência de hipertexto (HTTP) que é o protocolo padrão usado na transmissão de dados codificados em hipertextos de um computador a outro. O protocolo é separado do resto do URL por dois pontos e por duas barras inclinadas para frente (://). O nome do host é o nome do site a partir do qual o browser irá obter o arquivo. O endereço verdadeiro do servidor Web é um endereço numérico único do Protocolo de Internet (IP), e cada computador conectado à Internet tem um. Os endereços IP parecem se com algo como " " que não é muito fácil aos olhos humanos e é certamente um desafio armazená lo na memória. Um Nome de Domínio (Domain Name) é um pseudônimo mais passível de memorizar e ser usado para direcionar o tráfego da Internet a um endereço IP. Muitos nomes de host (hostname) na Web caracterizam se por possuírem um prefixo do domínio, adicionado ao nome do servidor que está sendo conectado (especialmente quando há múltiplos usuários dentro de um único domínio), embora esse prefixo seja freqüentemente opcional. Um prefixo pode ser quase toda a etiqueta curta do texto, mas "WWW" é tradicional. É possível para outro Web site inteiro existir separadamente dentro de um domínio sob um prefixo diferente, conhecido como subdomínio. Um hostname caracterizará também um sufixo de domínio (chamado às vezes uma extensão) para indicar a categoria de domínio em que o host reside, como o.com para um domínio comercial localizado nos ESTADOS UNIDOS, "edu" para uma instituição educacional, ou "co.uk" para um Web site comercial no Reino Unido. 9. URLs Absolutos e Relativos Um URL pode ser obtido de uma das duas formas quando aponta para um recurso dentro do Web site. Um URL Absoluto é aquele que inclui o caminho completo, incluindo o protocolo e o nome do host, não deixando margem a dúvidas quanto à localização do recurso. Você usará URL absoluto quando fizer um link para um site fora de seu domínio. Um URL relativo é aquele que aponta para um recurso dentro de seu próprio domínio ou site referenciando somente pelo caminho e/ou arquivo, omitindo o domínio e o protocolo desde que eles possam ser seguramente assumidos. Parece se mais ou menos com o seguinte: exemplos/capitulo1/exemplo.html Se o arquivo estiver armazenado dentro do mesmo diretório onde o arquivo que está fazendo o link está, o trajeto pode ser suposto que seja também no mesmo diretório, assim, somente o nome e a extensão do arquivo são requeridos, assim como:

11 exemplo.html Se o destino está num diretório hierarquicamente acima do arquivo fonte, o caminho relativo pode ser indicado por dois pontos e uma barra (../), instruindo o navegador a subir um nível para encontrar o recurso. Cada ocorrência de../ indica um nível acima, então um URL apontando dois diretórios acima deverá parecer se com:../../ exemplo.html URLs relativos são uma maneira útil de manter as referências aos arquivos portáveis; um Web site inteiro pode ser movido para outro provedor e outro domínio sem alterar seus links internos.

12 Capítulo 2 O Básico de XHTML e CSS 1. Tipos de tags HTML Na linguagem HTML existem três tipos de tags: as tags de bloco, as inline e as substituídas. Esta classificação é importante porque os estilos devem ser adequadamente aplicados a cada tag. O fato de determinada propriedade da CSS poder ser aplicada depende da natureza da tag. Em sua maior parte, o fato de uma propriedade poder ser aplicada a determinada tag (ou não) é relativamente óbvio. Por exemplo, você não esperaria que a propriedade de recuo de texto, que recua a primeira linha de um parágrafo, se aplicasse a uma tag inline, tal como o negrito. Quando precisar de ajuda nessa área, consulte as tabelas abaixo para saber quais propriedades podem ser usadas com determinado tipo de tag HTML. 1.1 Seletores para as tags de nível de bloco 1.2 Seletores das tags inline SELETOR USO NA HTML blockquote Endentação center (reprovada) Centralizar texto dd Descrição da definição dfn Termo definido dir lista de diretórios div Divisão lógica dl lista de definições dt Termo de definição h1 h6 Níveis de cabeçalho 1 6 li Item de lista ol lista ordenada p Parágrafo table Tabela td Dados de tabela th Título de tabela tr Linha de tabela ul lista não ordenada SELETOR a b small big cite code em font i pre span strike strong sub sup tt u USO NA HTML Link ancorado Negrito (somente visual) Texto menor Texto maior Citação curta Código fonte Ênfase Aparência da fonte (reprovada) Itálico (somente visual) Texto pré formatado Container inline Sobretachado (reprovada) Ênfase forte (visual e semântico) Subscrito Sobrescrito Teletipo (somente visual) Texto sublinhado (reprovada)

13 Além da tag, existem três tipos básicos de tags HTML: As tags de nível de bloco colocam uma quebra de linha antes e depois do elemento. Confira a relacão dos seletores de nível de bloco que podem ser usados pela CSS. As tags inline não têm quebras de linhas associadas ao elemento. Confira a lista de seletores de tag inline que a CSS pode usar. As tags substituídas têm dimensões definidas ou calculadas. Confira a lista de seletores de tag substituídos que a CSS pode usar. 1.3 Seletores das tags substituídas SELETOR Img Input object select textarea USO NA HTML Imagem incorporada Objeto de entrada Incorporação de objeto Selecionar área de entrada Área de entrada de texto 2. Elementos Aninhados Uma das principais características da linguagem HTML é o fato de as tags serem, obrigatoriamente, aninhadas. O que isto quer dizer? Isto significa que uma tag de abertura inicial deve possuir sua correspondente de fechamento por último. Por exemplo, suponha o seguinte trecho de código HTML: <b><i>texto em negrito e itálico.</i></b> (correto) <b><i>texto em negrito e itálico.</b></i> (errado) Observe que a tag <b> no exemplo acima começou abrindo, mas foi a última a fechar, enquanto que no exemplo seguinte, não foi observado seu correto aninhamento ocasionando erro de renderização pelo navegador. Observe também que algumas tags não possuem suas respectivas tags de fechamento, como a <br />, <hr />, etc. 3. Espaços em Branco Quando você cria seus documentos XHTML como texto plano, você está livre para formatá lo como quiser. Quebras de linha e endentações podem ajudá lo a fazer sua marcação mais legível conforme você trabalha. Navegadores Web ignoram quebras de linha extras, convertendo inúmeros espaços em um único espaço em branco. Para ilustrar um pouco, observe o seguinte exemplo: <p> spaces! </p> Será mostrado no navegador: Wide open spaces Wide open 4. Adicionando Comentários Para adicionarmos comentários num código HTML, procedemos da seguinte forma: qualquer texto que queira

14 5. Elementos e Atributos Um elemento ou descritor HTML é uma estrutura semântica, composta de uma tag de abertura, conteúdo e uma tag de fechamento. Alguns descritores não possuem uma tag de fechamento, como é o caso das tags <br />, <hr /> e <img />. Os documentos HTML são arquivos de texto plano que contêm "tags de marcação. Essas tags (etiquetas) definem os elementos da linguagem HTML e os seus conteúdos. A lista seguinte indica algumas de suas características: As "tags de marcação" do HTML são usadas para definir os elementos. As tags HTML escrevem se utilizando os caracteres < e > e entre eles o nome do elemento e os seus atributos. A primeira tag do par é a tag de início (ou de abertura) e a segunda do par é a tag de fim (ou de fechamento). Tudo o que se encontrar entre as tags de início e de fim fazem parte do conteúdo do elemento. Em XHTML as tags devem ser escritas sempre com letras minúsculas, fazendo com que as tags <b> e <B> não representem o mesmo elemento. Exemplo de uma tag com atributo: <div id= texto class= vermelho >Texto qualquer</div> A tag <div> recebeu os atributos id e class. Atributos são elementos colocados numa tag para modificá la ou destacá la permitindo alterações em sua funcionalidade. Alguns autores também denominam o conjunto completo <div id= texto class= vermelho >Texto qualquer</div> - uma tag.

15 Capítulo 3 O Elemento (cabeçalho do documento) O elemento contém informação de caractere geral, também designada por meta informação, sobre o conteúdo do documento e sobre a forma como ele deve ser apresentado. Podemos dizer que o termo meta informação (ou metadados ) significa dados que descrevem outros dados ou informações. 1. A Informação Contida no Elemento Os elementos cont idos dentro do elemento não são exibidos na tela do navegador. O padrão HTML estabelece que só um pequeno número de elementos pode aparecer dentro do cabeçalho. Eles são: <base>, <link>, <meta>, <title>, <style> e <script>. A construção seria a seguinte: <p>aqui temos algum texto</p> Na situação acima, o navegador pode reagir de duas formas: Apresentar o texto porque ele se encontra dentro de um elemento <p> Esconde o texto porque ele pertence ao cabeçalho. Se você colocar um elemento não autorizado, como <h2> ou <p>, dentro do cabeçalho, a maioria dos navegadores vai escrever este elemento na página. Aparentemente, as pessoas que são responsáveis pela concepção dos browsers acham que este gênero de erros é aceitável. Esta e outras deficiências dos browsers são parcialmente responsáveis pelas más práticas de codificação adquiridas por muitos criadores de páginas HTML. Uma das razões que levaram à criação da linguagem XHTML foi a necessidade de acabar com a criação de páginas mal formadas e semanticamente incorretas. 2. Elementos de cabeçalho () Elemento <title> <base> <link> <meta> Descrição Contém informação importante a respeito do documento, mas que não deve ser apresentada no corpo da página Define o título da página que aparecerá na barra de títulos do navegador Define um URL base comum para todas as ligações relativas da página Faz referência a um recurso externo e estabelece a ligação com ele Dá informação sobre aquilo que o documento contém 3. A declaração DOCTYPE A declaração DOCTYPE serve para indicar o DTD a usar para validar na página. Quando utilizada, deve aparecer logo no início da página, antes do elemento. Sua origem se deve ao fato de, nos primórdios do CSS, cada desenvolvedor de browser ter sua própria implementação das folhas de estilo, fazendo com que os webdesigners tivessem que desenvolver sites diferentes para cada tipo de navegador. Quando o W3C resolveu padronizar o CSS, foi necessário resolver o problema das páginas já desenvolvidas. A maneira que encontraram foi criar uma diretiva que desse instruções ao navegador como interpretar o código HTML: se seria feito rigorosamente dentro dos padrões ou se o navegador utilizaria uma espécie de modo de compatibilidade para que não fosse necessário reescrever toda a página já feita nos padrões antigos. Declaração <!DOCTYPE> Descrição Define o tipo de documento. Deve ser colocada antes de qualquer elemento pelo que fica mesmo antes do elemento XHTML 1.0 Strict: <!DOCTYPE html PUBLIC " //W3C//DTD XHTML 1.0 Strict//EN" " strict.dtd"> XHTML 1.0 Transitional: <!DOCTYPE html PUBLIC " //W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd">

16 XHTML 1.0 Frameset: <!DOCTYPE html PUBLIC " //W3C//DTD XHTML 1.0 Frameset//EN" " frameset.dtd"> 4. O elemento <meta> O elemento <meta> contém informação de caractere geral (meta informação) sobre o documento e deve ser colocado dentro do elemento. Sua finalidade é fornecer informação que descreve o documento. 1.1 Palavras chave para os motores de pesquisa Durante alguns anos a utilização mais freqüente da informação fornecida pelo elemento <meta> foi a criação de índices para sites de busca. Atualmente somente alguns buscadores ainda usam esta informação para indexar páginas, e os de maior sucesso ignoram este elemento. No entanto, há partes que continuam a ser t idas em consideração pelos agentes (robots) dos buscadores, como por exemplo, as indicações dadas sobre as pastas em que não deve ser feita qualquer indexação. Alguns sistemas de busca (não muitos) usam a informação contida nos elemento meta para indexar as páginas. No fragmento de código seguinte, o elemento <meta> contém uma breve descrição da página: <meta name="description" content="tutoriais, referências técnicas de HTML, CSS, JavaScript, XML, XSLT, SVG"> Na parte do código abaixo o elemento <meta> contém uma palavras chave para indexar a página: <meta name=" keywords " content="html, DHTML, CSS, XML, XHTML, JavaScript, XSLT, SVG"> Como acabamos de ver, os nomes dados ao atributo name indicam claramente a final idade da informação contida no elemento meta. Infelizmente, muitos criadores de páginas para a Web abusaram do elemento meta e usaram de forma contrária à sua filosofia para enganar os motores de pesquisa. Em conseqüência disso, os sites de busca passaram a ignorar cada vez mais o elemento <meta>, o que acabou dificultando todos aqueles que pretendiam usá lo de forma correta. 1.2 Valores desconhecidos para o atributo name do elemento <meta> Algumas vezes encontramos situações em que o atributo name do elemento <meta> contém um valor desconhecido, como no exemplo seguinte: <meta name="security" content="low"> Numa situação destas devemos interpretar o elemento meta como contendo informação que é específica do web site. Essa informação pode ser importante para o autor da página, mas provavelmente é irrelevante para os visitantes. É possível que essas informações sejam úteis para algum software que leia a página. 5. A Declaração XML Para ser honesto, um documento XHTML não deveria ter uma declaração XML antes do DOCTYPE. Esta declaração especial indica que o documento foi codificado como XML e opcionalmente especifica a versão do XML e a codificação de caracteres: <?xml version="1.0" encoding="utf 8"?> O Internet Explorer para Windows é de longe o navegador mais comum utilizado hoje, dominando 70% a 90% entre os navegadores web. E, infelizmente, o Internet Explorer não reconhece uma declaração XML. Cuidado, pois o IE pode não renderizar seus documentos XHTML de maneira correta. 6. O Elemento HTML O elemento HTML, colocado após o doctype, age como um container para o documento inteiro. Ele é conhecido como o elemento raiz. O elemento html não possui propriedades próprias; é estritamente um contêiner que define onde o

17 documento começa e termina. Qualquer elemento ou conteúdo que estiver fora dele tornará o documento todo inválido. 1.3 Atributos Necessários xmlns: Um URL especificando um namespace XML, que é para documentos XHTML. 1.4 Atributos opcionais Não há atributos opcionais para o elemento HTML. 1.5 Atributos padrão dir id lang xml:lang Um namespace é um local onde são especificados nomes e atributos de um elemento para documentos XML. Como o XML é uma linguagem de marcação extensível, em que os autores definem seus próprios elementos e atributos. Por exemplo, um elemento animal com um atributo espécie é útil em documentos sobre animais, e tais nomes customizados podem definir um namespace especial. O XHTML 1.0, por outro lado, possui um conjunto predefinido de elementos e atributos, e o URL correto de seu namespace é O namespace é declarado em um documento XHTML através do atributo xmlns do elemento html. Os atributos lang e xml:lang são opcionais para o elemento html. A linguagem declarada no elemento html será passada aos demais elementos dentro dele. 7. Tipos de conteúdo (CONTENT TYPES) Servidores e clientes Web confiam em tipos de conteúdo padronizados para diferenciar um tipo do outro para determinar que tipo de dado processar. Texto plano não formatado é entregue como tipo text/plain, uma imagem JPEG é entregue com um tipo de conteúdo image/jpeg, e assim por diante. Tudo isto é feito por trás das cenas da web e geralmente os autores não têm que se preocupar com isto. Os tipos de conteúdo também são conhecidos como Internet media types ou tipos MIME (MIME é o acrônimo para Multipurpose Internet Mail Extensions). Documentos HTML usam o tipo de conteúdo text/html, então ambos servidor e cliente sabem exatamente o que é o documento e como lidar com ele.

18 Capítulo 4 Listas Uma lista é simplesmente uma coleção de dois ou mais itens relacionados. Uma lista que possui apenas um único item é válida e pode estar semanticamente correta em alguns casos, mas normalmente agrupa diversos itens. Há três tipos de listas em XHTML: Listas não ordenadas (unordered lists), Listas ordenadas (ordered lists), e Listas de definições (definition lists). 1. A tag ul Uma lista não ordenada é designada pela tag <ul> e é utilizada quando a seqüência dos itens não é especificamente importante, como uma lista de ingredientes de uma receita. Cada item da lista é definido por seu próprio elemento <li>. As tags <ul> e <li> são de bloco. Somente as tags <li> são permitidas dentro de uma tag <ul> como elemento filho. Nenhum outro elemento pode estar dentro da <ul> sem que estejam encampadas pelas tags <li>. Exemplo de lista nãoordenada: <ul> <li>1 cup warm water</li> <li>1 packet active dry yeast</li> <li>2 1/2 to 3 cups all-purpose flour</li> <li>2 tablespoons olive oil</li> <li>1/2 teaspoon salt</li> </ul> OBS: existe um atributo type nas listas ordenadas e não ordenadas que altera o tipo de marcador (quadrado, círculo, disco, algarismos arábicos, algarismos romano e numerais), mas foram reprovadas pelo W3C. Caso queira alterar o marcador, utilize folhas de estilo. 1.1 Atributos Obrigatórios Esta tag não possui nenhum atributo obrigatório. 1.2 Atributos padrão class dir id lang style title xml:lang 2. A tag ol Uma lista ordenada é designada pela tag <ol> e é utilizada quando a seqüência dos itens é especificamente importante, como uma lista de ações a serem seguidas em uma receita. Cada item da lista é definido por seu próprio elemento <li>. As tags <ol> e <li> são de bloco. Somente as tags <li> são permitidas dentro de uma tag <ol> como elemento filho. Nenhum outro elemento pode estar dentro da <ol> sem que estejam encampadas pelas tags <li>. Exemplo de lista ordenada: <ol> <li>combine the water, yeast, oil, salt and two thirds of the flour in a large bowl and mix thoroughly.</li> <li>gradually add the remaining flour until the dough holds its shape, being careful not to let it become too dry. You may not need all the flour.</li> <li>place the dough on a lightly floured surface and knead for five minutes until it becomes smooth and elastic.</li>

19 <li>transfer the dough to a lightly oiled bowl, cover with plastic wrap and let it rise until it has doubled in size.</li> <li>when the dough has risen, place it on a floured surface, divide it into two equal portions rolled into balls. Allow the dough to rest for 15 minutes before forming your pizzas.</li> </ol> 1.1 Atributos Obrigatórios Esta tag não possui nenhum atributo obrigatório. 1.2 Atributos padrão class dir id lang style title xml:lang 3. A tag li Serve tanto para a tag <ul> como para a <ol>. Ela especifica cada item da lista individualmente. Um item da lista pode conter texto ou outros elementos, inclusive outras listas. <h2>specialty Pizzas</h2> <ul> <li> <h3>barbecue Chicken Pizza</h3> <p>this hearty American departure from Italian tradition is one of our most popular pizzas.</p> <ul> <li>spicy barbecue sauce.</li> <li>chunks of mesquite grilled chicken.</li> <li>blend of three cheeses: <ul> <li>mozzarella</li> <li>monterey Jack</li> <li>smoked Gouda</li> </ul> </li> <li>thin-sliced red onion.</li> <li>roasted red peppers.</li> </ul> </li> </ul> Quando uma lista é aninhada com outra, a lista interna será, por padrão, ser estilizada de maneira diferente (uma bola ao invés de um quadrado, etc.), conforme seu nível de aninhamento. 1.1 Atributos Obrigatórios Esta tag não possui nenhum atributo obrigatório. 1.2 Atributos padrão class dir id

20 lang style title xml:lang Listas de Definições Uma lista de definições não é apenas uma coleção de itens, mas uma coleção de itens e suas respectivas definições. Diferentemente de uma <ol> ou <ul>, ela não possui a tag <li> como delimitador de elementos. Ela consiste de termos de definição (definition term) <dt> e de descritores de definição <dd>. Há uma conexão semântica entre um termo e suas descrições. 4. A tag dl A tag <dl> cria uma lista de definição. É um elemento de bloco que, por sua vez, deve possuir ao menos um termo <dt> ou ao menos uma descrição <dd>. Somente os elementos dt e dd são permitidos como filhos de uma dl. 1.1 Atributos Obrigatórios Esta tag não possui nenhum atributo obrigatório. 1.2 Atributos padrão class dir id lang style title xml:lang 5. A tag dt A tag dt pode ter somente texto ou elementos inline (itálicos, citações curtas, negritos, etc.). Ele designa um termo ou item a ser descrito. Um termo de definição é relacionado a cada descrição que o segue até que um novo elemento dt apareça para iniciar uma nova seqüência (ou até a lista encontrar a tag de fechamento </dl>). 1.1 Atributos Obrigatórios Esta tag não possui nenhum atributo obrigatório. 1.2 Atributos padrão class dir id lang style title xml:lang 6. A tag dd O elemento dd contém a descrição do elemento dt. Em caso de múltiplas descrições de um único termo, cada um deve ser encampado pelo seu próprio elemento dd. Esta tag é de bloco. Esta tag permite tanto texto, elementos inline e de bloco dentro dela.

21 1.3 Atributos Obrigatórios Esta tag não possui nenhum atributo obrigatório. 1.4 Atributos padrão class dir id lang style title xml:lang <dl> <dt>pizza</dt> <dd> <p>a flat, open-faced baked pie of Italian origin, consisting of a layer of bread dough covered with tomato sauce, cheese and a wide variety of optional toppings.</p> <p>also called <em>pizza pie</em>.</p> </dd> <dt>pasta</dt> <dd>unleavened dough that is molded into any of a variety of shapes and boiled.</dd> <dd>a prepared dish containing pasta as its main ingredient.</dd> </dl>

22 Capítulo 5 Elementos de Texto Estruturado Elementos de frase: EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR e ACRONYM Atributos definidos: id, class (identificadores ao longo do documento) lang (informação referente à linguagem), dir (direção do texto) title (título do elemento ) style (informação referente ao estilo "inline") onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (acontecimentos intrínsecos ) Os elementos da frase adicionam informação estrutural aos fragmentos de texto. Os elementos da frase assumem os seguintes significados: 1. A tag EM Indica nos uma ênfase. Visualmente, aplica um estilo itálico à fonte. Possui semântica, o que não ocorre com a tag <i> 2. A tag STRONG Indica nos uma ênfase mais acentuada. Visualmente, aplica um peso negrito à fonte. Possui semântica, o que não ocorre com a tag <b>. 3. A tag CITE Contém uma citação ou uma referência feita a outras fontes. Não confundi la com o parâmetro cite de algumas tags, como a <blockquote>. <p>restaurant critic <cite>norm Deplume</cite> had this to say about our eatery:</p> <blockquote cite=" <p>spaghetti and Cruft offers tasty wood-fired pizzas at affordable prices, served in a hip, relaxed atmosphere. Comfortable seats, free WiFi and abundant power outlets make this a popular spot for the neighborhood technophiles to linger with their laptops.</p> <p><cite>gotham Examiner, November 22, 2006</cite></p> </blockquote> 4. A tag Q (Quote) Contém uma citação curta. Deve possuir um atributo cite com o URL da citação. Ex.: <p>norm Deplume, food critic for <cite>the Gotham Examiner</cite>, recently commended our geek-friendly attitude, even saying that we're <q cite=" popular spot for the neighborhood technophiles to linger with their laptops.</q></p> 5. A tag DFN (Definição) Indica nos que neste ponto se define a instância do termo que foi encerrado, ou seja, esta tag é usada para definir termos num texto. Ex.: <p>spaghetti and Cruft offers free wireless broadband internet access so laptop-toting patrons can check their , publish updates to their <dfn title="short for weblog, a kind of online journal">blogs</dfn>, or even do some honest work.</p>

23 6. A tag CODE Designa o fragmento de um código computadorizado. Utiliza se quando desejamos exibir um trecho de um códigofonte de algum programa ou até mesmo código HTML. 7. A tag SAMP Designa exemplos de saídas de programas, scripts, etc. 8. A tag KBD: Indica nos dados de entrada em um programa de computador. Numa página HTML onde o autor quer demonstrar um código fonte, utiliza se o KBD para indicar quais dados deram entrada do programa. 9. A tag VAR: Indica nos um exemplo de uma variável ou argumento de um programa. <pre><code> function helloworld() { var button = document.getelementbyid("button"); if (button) { button.onclick = function(){ alert("hello world!"); </code></pre> <address> Jon Hicks <br />Illustrator and cheese lover <br /> </address> 10. A Tag BDO Define a direção de um segmento de texto. Pode ser da direita pra esquerda ou vice versa. Ex.: <p>a passage of text containing one <em lang="en" xml:lang="en"> <bdo dir="rtl">reversed</bdo></em> word.</p> 11. A tag ABBR Indica nos a abreviação de um termo (exemplo: WWW, HTTP, URI, Mass., etc.). 12. A tag ACRONYM Indica nos um acrônimo (exemplo: WAC, sonar, etc.). Ex.: <p>we accept all major credit cards, as well as <abbr title="automatic Teller Machine">ATM</abbr> cards (you'll need to provide your <acronym title="personal Identification Number">PIN</acronym>).</p> 13. A tag INS Insere um fragmento de texto. Pode, opcionalmente, ter como atributo o URL que contém informações sobre as alterações feitas no texto, bem como a data de alteração. Observe o exemplo do DEL. 14. A tag DEL Marca o texto (sobretachado) indicando uma alteração no conteúdo sem apagá lo. Ex.: <p>beginning <del datetime=" t06:49:15-08:00">january 5th</del> <ins datetime=" t06:49:35-08:00" title="delayed one week while we hire more wait staff">january 12th</ins>, we'll be open until 2AM on Fridays and Saturdays.</p>

24 15. A tag HR Régua Horizontal. Cria uma régua horizontal, uma linha divisória entre seções de conteúdo. Ex.: <h2>customer feedback</h2> <p>our loyal customers love us (and we love them).</p> <hr /> <h2>reviews</h2> <p>even those stuffy restaurant critics can't resist our charms.</p> EM e STRONG são usados para indicar uma ênfase. Os outros elementos da frase assumem um significado especial nos documentos técnicos. Estes exemplos ilustram alguns casos contendo elementos de frase: Tal como <CITE>Harry S. Truman</CITE> teve a oportunidade de referir, <Q lang="en-us">the buck stops here.</q> Informações mais detalhadas poderão ser encontradas em <CITE>[ISO- 0000]</CITE>. Utilize por favor a seguinte referência em correspondências futuras: <STRONG> </STRONG> A apresentação dos elementos das frases depende em muito do agente usado pelo usuário. Geralmente, os agentes visuais apresentem o texto EM em estilo itálico e o texto STRONG a negrito. Os agentes de voz sintetizada poderão alterar conforme os parâmetros de síntese, tais como o volume, o tom e a velocidade. Os elementos ABBR e ACRONYM permitem aos autores indicar claramente a ocorrência de abreviações e de acrônimos. As linguagens ocidentais fazem um uso alargado dos acrônimos, tais como "GmbH", "NATO" e "F.B.I.", como também ainda de abreviações tais como "M.", "Inc.", "et al.", "etc.". Tanto no Chinês como no Japonês, são usados mecanismos de abreviação análogos, as referências subseqüentes de um nome longo se dão, usando um sub conjunto de caracteres do tipo Han a partir da ocorrência original. Ao se marcarem estas construções, fornece se informação preciosa aos agentes e a ferramentas de edição, tais como os verificadores de ortografia, os sintetizadores de voz, sistemas de tradução e os indexadores das máquinas de busca. O conteúdo dos elementos ABBR e ACRONYM, especifica a expressão abreviada, tal como ela aparece normalmente definida no texto. O atributo "title" desses elementos poderá ser usado para fornecer a forma completa ou expandida da expressão. Eis aqui alguns exemplos do uso de ABBR: <P> <ABBR title="world Wide Web">WWW</ABBR> <ABBR lang="fr" title="société Nationale des Chemins de Fer"> SNCF </ABBR> <ABBR lang="es" title="doña">doña</abbr> <ABBR title="abbreviation">abbr.</abbr> Note se que as abreviações e os acrônimos possuem muitas das vezes pronúncias idiossincráticas. Por exemplo, enquanto que "IRS" e "BBC" são tipicamente pronunciadas letra por letra, "NATO" e "UNESCO" são pronunciadas foneticamente. Existem ainda outras abreviações (exemplo: "URI" e "SQL"), as quais são soletradas por algumas pessoas e faladas como palavras por outras. Sempre que necessário, os autores deverão usar folhas de estilo a fim de especificar a pronunciação das abreviações. 16. Marcas de citação: os elementos BLOCKQUOTE e Q cite = uri [CT]. O valor deste atributo é nos dado sob a forma de um URI, o qual designa o documento fonte ou a mensagem original.pretende se, com o uso deste atributo, fornecer informação acerca da fonte de onde a citação foi retirada. Atributos definidos noutros lugares:

25 id, class (identificadores ao longo do documento) lang (informação referente à linguagem), dir (direção do texto) title (título do elemento ) style (informação referente ao estilo "inline") onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (acontecimentos intrínsecos) Estes dois elementos definem citações de texto BLOCKQUOTE é usado para as citações mais longas (conteúdo em bloco) e Q é usado para as citações mais curtas (conteúdo "inline"), as quais não requeiram mudanças de parágrafo. Este exemplo de formatação foi extraído de "The Two Towers", escrito por J.R.R. Tolkien, como sendo uma citação de bloco (do Inglês: BLOCKQUOTE). <BLOCKQUOTE cite=" <P>They went in single file, running like hounds on a strong scent, and an eager light was in their eyes. Nearly due west the broad swath of the marching Orcs tramped its ugly slot; the sweet grass of Rohan had been bruised and blackened as they passed.</p> </BLOCKQUOTE> 1.1 Representação das citações De uma forma geral, os agentes visuais representam BLOCKQUOTE como sendo um bloco recortado. Os agentes visuais deverão assegurar que o conteúdo do elemento Q seja representado com as respectivas marcas de citação (aspas). Os autores não deverão colocar as referidas marcas nem no princípio nem no fim do conteúdo do elemento Q. Os agentes devem representar as marcas de citação de acordo com a linguagem (ver o atributo lang). Muitas das linguagens adotam diferentes estilos para as citações externa e interna (integradas), as quais deveriam ser respeitadas pelos agentes usados pelos usuários. O exemplo que se segue ilustra nos citações integradas através do elemento Q. O João disse: <Q lang="en-us">eu vi a Lucília à hora do almoço... ela disse-me: <Q lang="en-us">a Maria quer que tu compres sorvetes, de regresso a casa.</q> Penso que irei comprá-los no Ben and Jerry's, na Rua Castilho.</Q> Dado que a linguagem das duas citações é o Inglês Americano, os agentes deverão representá las sem qualquer tipo de problemas, por exemplo, com apóstrofes à volta da citação interna e aspas à volta da citação externa: O João disse: "Eu vi a Lucília à hora do almoço... ela disse-me: 'A Maria quer que tu compres sorvetes, de regresso a casa.' Penso que irei comprá-los no Ben and Jerry's, na Rua Castilho." Nota: recomenda se que as implementações das folhas de estilo forneçam um mecanismo de inserção destinado às marcas de citação antes e depois de uma citação delimitada pelo elemento BLOCKQUOTE, de acordo com o contexto da linguagem em questão e o grau de integração das respectivas citações. Contudo, dado que alguns autores usam BLOCKQUOTE meramente como um mecanismo para acentuar um texto, de modo a preservar a intenção dos autores, os agentes não deveriam inserir as marcas de citação no estilo que é definido por padrão. O uso de BLOCKQUOTE para recortar ou acentuar um texto está reprovado, em favor das folhas de estilo. 1.2 Sub índices e super índices: Os elementos SUB e SUP Atributos definidos: id, class (identificadores ao longo do documento) lang (informação referente à linguagem), dir (direção do texto) title (título do elemento )

26 style ( informação referente ao estilo "inline" ) onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (acontecimentos intrínsecos) Muitas linguagens (exemplo: Francês), requerem sub índices ou super índices para uma representação adequada dos fatores. Nesses casos, devem se usar os elementos SUB e SUP na marcação do texto. H₂O E = mc² <SPAN lang="fr">m^lle Dupont</SPAN> 17. Linhas e parágrafos De uma forma geral, os autores dividem os seus pensamentos e argumentos por seqüência de parágrafos. A organização da informação em parágrafos não é afetada pela forma como esses parágrafos são representados: os parágrafos duplamente justificados contêm os mesmos pensamentos que os parágrafos justificados apenas do lado esquerdo. A marcação HTML para a definição de um parágrafo é direta: o elemento P define o parágrafo. Contudo, a representação visual dos parágrafos não é assim tão simples. Existe certo número de parâmetros, ambos de ordem estilística e técnica, que terão de ser preenchidos: Tratamento ou processamento do espaço em branco Salto e mudança automática de linha Justificação de parágrafos Hífenização Direcionalidade e convenções respeitantes à linguagem escrita em questão Formatação de parágrafos, no que diz respeito ao conteúdo envolvente ou circundante 1.1 Parágrafos: o elemento P Atributos definidos: id, class (identificadores ao longo do documento) lang (informação referente à linguagem), dir (direção do texto) title (título do elemento ) style ( informação referente ao estilo "inline" ) align (alinhamento) onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (acontecimentos intrínsecos) O elemento P representa um parágrafo. Ele não pode conter elementos de bloco (incluindo o próprio P). Aconselha se que os autores não devem usar os elementos P vazios. 1.2 Controle das mudanças de linha Aqui, a mudança de linha é definida como sendo um retorno do carro ( ), um avanço de linha ( ) ou ambos. Todas as mudanças de linha constituem um espaço em branco. Para mais informações relacionadas com este tema, consulte, por favor, as notas relacionadas com as mudanças de linha, situadas no apêndice da especificação SGML. Forçar a mudança de linha: o elemento BR Atributos definidos: id, class (identificadores ao longo do documento)