Estrutura de uma página XHTML

LCM INFORMÁTICA

Para se conectar a internet, é necessário que seu computador tenha algum tipo de conexão para ter acesso à rede (pode ser acesso discado, banda larga, via cabo, rádio ou qualquer outro). É necessário que você seja cadastrado em um provedor de acesso, responsável por gerenciar o acesso às informações da Internet. Há a necessidade de um programa para navegar, também conhecido como navegador ou browser
Os serviços mais comuns na internet são: o Correio Eletrônico, Web e mensageiros instantâneos.
Cada um dos serviços se utiliza das conexões da Internet para transmitir e receber dados entre as várias máquinas que fazem parte do serviço. No caso dos emails, por exemplo, temos a máquina que envia o email, servidores intermediários e a máquina de destino da mensagem.
• WEB (WWW) – Páginas com os mais variados assuntos.
• CORREIO ELETRÔNICO / EMAIL – Comunicação entre pessoas através de mensagens escritas (@).
• FTP – Transferência de informações de um computador para outro.
• MENSAGENS INSTANTÂNEAS – Troca de informações simultâneas
Já sabemos o que é internet e alguns serviços disponíveis nela, mas o que é site? Site é um conjunto de páginas web, compostas de hipertextos. A web ou WWW (World Wide Web) é o conjunto de todos os sites existentes.
Formato de um domínio

Na Internet, cada página tem um endereço próprio, o que chamamos de URL (Uniform Resource Locator) – Localizador Uniforme de Recursos. Esses endereços são chamados de domínios. Como exemplo, utilizamos o endereço abaixo, descrevendo-o detalhadamente.
http://www.google.com.br
• http:// sigla que indica um protocolo de transmissão na WWW. HTTP (HyperText Transfer Protocol) – é o protocolo de transferência de arquivos de hipertexto e o mais comumente usado na internet.
• www indica que estamos na Web
• google nome do site
• com tipo do site (com – comercial, org – organização não governamental, adv – advogados, gov – governamental, etc)
• br país de origem do site (br – Brasil)

A WEB
Um dos serviços mais utilizado na Internet é a Web. Há uma confusão entre internet e Web, mas na verdade a internet já existia 15 anos antes do surgimento da web.
A web consiste em um sistema cliente e um servidor. A maioria das pessoas está familiarizada com os clientes: navegadores Internet Explorer, Mozilla Firefox ou qualquer outro. Porém, os servidores também são essenciais para o funcionamento da mesma. São chamados servidores de Web.
A comunicação entre os clientes e servidores se dá através do protocolo HTTP:
1. Usuário digita um endereço de recurso na caixa de endereço ou clica em um link;

Navegador envia a requisição até o servidor de web;
3. Servidor de web envia o conteúdo requisitado para o navegador;
4. O Navegador apresenta a informação para o usuário.

A Informação
A resposta de uma requisição HTTP vem em um formato chamado HTML. Trata-se de um arquivo em que as informações de texto são apresentadas a uma série de marcadores (tags) para indicar a apresentação daquele texto. Os marcadores indicam o que são: listas, tabelas, títulos, formulários, entre outros.
O navegador utiliza estes marcadores para construir a aparência da página requisitada.
1.1.5 HTML e XHTML
Para a Web funcionar, é preciso que o conteúdo disponível esteja codificado pelo formato HTML. O formato HTML foi reformulado para um padrão mais moderno chamado XHTML, utilizando outra linguagem para esta reformulação. HTML (HyperText Markup Language) – é a linguagem usada na autoria de páginas destinadas a internet.
1.1.6 Acessando uma página da Web
Assim como você usa um aplicativo para fazer textos, outro para fazer planilha, etc, é necessário usar um programa para acessar as páginas da Web (navegador ou browser).
No Ambiente Linux: Botão K Internet / “Navegador”

No Ambiente Windows: Botão Iniciar Programas / “Navegador”
Navegador ou Browser – programa para acessar páginas na Web (Internet Explorer, Mozilla Firefox, Opera, entre outros).
1.1.7 Pesquisando o endereço de uma página na Web
Na internet não há uma lista de endereços, como uma lista telefônica, por exemplo, mas há alguns sites de busca, que nos ajudam a encontrar o que queremos.
Endereços de sites que você poderá usar na pesquisa:
http://www.google.com.br
http://www.yahoo.com.br
http://www.altavista.com
• busca.uol.com.br
1.1.8 Etapas para pesquisar uma página na Web:
1. Ative um navegador (Mozilla, Internet Explorer, etc.).
2. Escolha um site de busca
3. Digite o que deseja procurar
4. Aperte o botão Pesquisa ou Busca
Será aberta uma lista com os sites encontrados sobre o tema procurado.

Desenvolvedor WEB
A disciplina de Introdução a Multimídia, visa dar condições para que o aluno inicie seus conhecimentos na web, para futuro uso como desenvolvedor web ou web designer.
Segundo o Catálogo Nacional de Cursos Técnicos do MEC, o técnico em informática para internet desenvolve programas de computador para internet, seguindo as especificações e paradigmas da lógica de programação e das linguagens de programação. Utiliza ferramentas de desenvolvimento de sistemas, para construir soluções que auxiliam o processo de criação de interfaces e aplicativos empregados no comércio e marketing eletrônicos. Desenvolve e realiza a manutenção de sites e portais na internet e na intranet.
O profissional de Web Design tem sob sua responsabilidade as seguintes atividades: construção de sites, sistemas, projetos multimídia, soluções para educação à distância e comércio eletrônico na internet. Ele deve criar ações que trabalhem os conceitos de usabilidade e planejamento da interface, facilitando e assegurando a interação aos usuários finais.
Cabe ao web designer saber qual será o público-alvo, os objetivos, os serviços/produtos ofertados, diferenciais e outros fatores importantes ao projeto. A partir daí, deve ser definida a estrutura do site, layout e a tecnologia a ser adotada.
O web designer precisa adquirir conhecimentos em diversas áreas da informática e se manter atualizado, além de:
• possuir uma base de design tradicional, como teoria das cores e tipografia;
• aprimorar seus conhecimentos com base na sua área de interesse;
• empenhar-se em ter um bom entendimento de CSS, XHTML, Flash, entre outros. Há a necessidade de conhecer um pouco de tudo para decidir qual tecnologia utilizar;
• buscar conhecimento sobre usabilidade;

procurar sempre por novas tecnologias.

Antes de sair fazendo um site, precisamos conhecer o “problema” que tentaremos resolver. Detectar o real objetivo do site é primordial para um bom planejamento, de modo que as ações sejam tomadas de forma correta, minimizando assim futuras correções para atender o cliente.
É necessário definir o público alvo do site, o objetivo, os serviços oferecidos, qual será o diferencial em relação aos outros sites.
Após o estudo feito, será definida a estrutura do site, a tecnologia empregada e o layout.
Quando visitamos um site, o que faz termos vontade de permanecer nele é a aparência, a facilidade de achar o que procuramos. Por isso, devemos definir o design visual do site, que não precisa pular, girar e piscar, precisa sim ter um aspecto profissional seguindo os conceitos básicos do design, como: aproximação, contraste e alinhamento. O layout do site deve ser utilizado para transmitir o desejado ao visitante.
Até pouco tempo atrás a única saída para se fazer um site com bom designer era utilizando tabelas em HTML, mas atualmente há um movimento chamado tableless, que é a criação de sites bem feitos, mas sem o uso de tabelas.
Devemos sempre focar no visitante do site no momento da criação do mesmo. Também devemos lembrar que há algumas regras a seguir sobre acessibilidade, ver W3C. Este assunto tem sido amplamente discutido e

em alguns países é quase que obrigatório um site ser acessível (por exemplo, Portugal).
Sobre o assunto padrões web, recomendamos o acesso aos seguintes sites: http://www.maujor.com e http://www.w3.org.
Após o site desenvolvido temos que testá-lo em mais de um navegador, pois há diferenças na visualização entre eles.
2.1 Recursos necessários para o desenvolvimento do site
Há vários softwares que facilitam a criação de páginas web, como por exemplo: DreamWeaver, FrontPage, Fireworks, entre outros. Porém, nesta disciplina faremos através de comandos, utilizando para isto apenas um editor de texto e um navegador.

lcmmm

Figura 1: Tela do Editor de Texto do Ubuntu

llll022

Figura 2: Tela do Mozilla Firefox – Navegador Web

Estaremos utilizando o padrão Web, ou Web Standard. Há muitas vantagens em utilizar o padrão em comparação com todos os recursos despadronizados presentes nos navegadores mais utilizados pelo mercado. A principal vantagem é a facilidade de utilizar o código para outros navegadores mais simples. De acordo com o padrão, as regras de utilização de XHTML são mais restritas.

Todo conteúdo da Web necessita seguir um padrão. Atualmente a codificação padrão é o XHTML.
Algumas razões para aprender e utilizar o XHTML:
• XHTML é o padrão de marcação atual, substituindo a HTML;
• utilização de regras de sintaxe mais precisas e rigorosas;
• aumento significativo da acessibilidade aos sites criados seguindo os padrões;
• facilidade de manutenção e atualização;
• possibilidade de utilizar o mesmo código para diversos clientes Web além do navegador: PDAs, celulares e outros dispositivos móveis.
3.1 Hipertexto e Hiperlink
Normalmente, definimos hipertexto relacionando texto em formato digital, podendo ser agregado a ele outros tipos de informações, como outros blocos de textos, palavras, imagens ou sons, sendo que o acesso aos outros elementos dá-se através de hiperlinks.

Segundo o Glossário do BROFFICE.ORG, “hyperlinks são referências cruzadas, realçados no texto em várias cores e ativados por meio de um clique no mouse. Com eles, os leitores podem saltar para uma informação específica dentro de um documento, bem como para informações relacionadas em outros documentos.”
3.2 HTML (HyperText Markup Language)
Traduzindo: Linguagem de Marcação de Hipertexto.
A linguagem HTML é utilizada para marcar textos através de elementos e atributos. Um texto marcado com esta linguagem é chamado de hipertexto HTML.
Documentos HTML podem ser interpretados por navegadores.
Desde a versão 4.01 do HTML a aparência não é responsabilidade do HTML.
3.3 XHTML (eXtensible Hypertext Markup Language)
Segundo Silva (2008), XHTML é uma Linguagem Extensível de Marcação para Hipertexto e que se destina a escrever documentos web com a funcionalidade adicional de ser compatível com as aplicações XML.
Todas as linguagens de marcação da Web são baseadas em SGML (Standard Generalized Markup Language – Linguagem de Marcação Generalizada Padrão), uma metalinguagem complexa, projetada com a finalidade de servir de base para a criação de outras linguagens. SGML foi usada para criar XML (Extensible Markup Language – Linguagem de Marcação Extensível), também uma metalinguagem, porém, simplificada.
Com XML, é possível definir novas tags e novos atributos para escrever um documento Web, permitindo ao usuário criar sua própria linguagem de marcação. XHTML foi criada dentro deste conceito e, por isso, é

uma aplicação XML. As tags e os atributos de XHTML foram criados a partir das tags e dos atributos do HTML 4.01, juntamente com suas regras.
Dessa forma, ao usar XHTML, estamos escrevendo um código XML, onde as tags e os atributos já estão definidos. Este fato proporciona todos os benefícios de XML sem a complexidade de SGML. Além disso, XHTML é uma linguagem de marcação bastante familiar para quem conhece HTML, o que facilita a transformação de um documento HTML em XHTML.
Como o XHTML não é responsável pela aparência da página, o que faremos é indicar o que é um bloco de texto de forma semântica. Para aparência usaremos CSS.
Um bloco de texto na página XHTML pode ser uma porção de coisas:
• Um parágrafo
• Um título
• Uma lista, ou um item de uma lista
• Uma citação
• Um endereço
• Código de programação
• Texto predefinido
• Texto enfatizado
• e outros.
Observe novamente, todos estes indicadores são nomes de coisas lógicas em uma página XHTML/HTML. Não indicam nunca a aparência. É claro que uma lista na sua cabeça tem uma determinada aparência. Mas em XHTML indicar que um bloco de texto é uma lista, tem exatamente este objetivo: indicar que é uma lista. A aparência é consequência.

Diferenças entre XHTML e HTML
Em documentos XHTML:
• devem ser bem formados.
• Todas as tags devem ser escritas com letras minúsculas.
• Tags devem estar convenientemente aninhadas.
• Uso de tags de fechamento é obrigatório.
• Elementos vazios devem ser fechados.
• Diferenças na sintaxe dos atributos.

Estrutura obrigatória de um documento XHTML
1
<!DOCTYPE tipo_do_documento>
2
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
3
<head>
4
<title>Título do documento</title>
5
</head>
6
7
<body>
8
Conteúdo do documento
9
</body>
10
11
</html>
A declaração DOCTYPE não é uma tag (elemento) da marcação XHTML. Por isso, não há necessidade da tag de fechamento e deve ser sempre escrita em letras maiúsculas.
4.2 O que é tag?
Tags são palavras de códigos contidas entre sinais de maior e menor na linguagem HTML/XHTML de descrição do documento. Muitas tags contêm texto ou referências a hyperlinks entre os símbolos de abertura e de fechamento. Por exemplo: os títulos são identificados pelas tags <h1> no início do título e por </h1> no final do título. Algumas tags aparecem sozinhas, tais como: <br /> (que indica quebra de linha) ou <img … /> (que

indica um vínculo para uma figura).
4.3 Para que serve o DOCTYPE?
Podemos criar vários tipos de documentos em XHTML, sendo que cada tipo é definido por regras diferentes. Estas regras estão detalhadas dentro da especificação XHTML denominada DTD (Document Type Definitions) – Definição do Tipo de Documento.
Sua declaração DOCTYPE diz aos navegadores qual DTD foi utilizada para elaborar a marcação. A partir daí, essa informação explica aos serviços de validação e aos navegadores sobre como tratar a página. É obrigatório o seu uso se quiser validar a sua página. Esta deve ser a primeira linha do seu documento.
4.3.1 Os tipos de DOCTYPE
Há três tipos de DOCTYPE para XHTML, são eles:
Strict
1
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0
2
Strict//EN”
3
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-
4
strict.dtd”>
A mais rígida das declarações, os documentos XHTML escritos no modo Strict não permitem qualquer item de formatação dentro dos elementos e nem elementos em desuso, segundo as recomendações do W3C. São indicados para uso com folhas de estilo em cascata, com marcação totalmente independente da apresentação.

Transitional
1
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0
2
Transitional//EN”
3
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-
4
transitional.dtd”>
Esta declaração permite uma maior flexibilidade e é indicada para documentos que ainda utilizem elementos em desuso, regras de apresentação (formatação) embutidas em tags e também para documentos destinados a exibição em navegadores sem suporte para CSS (navegadores antigos).
Este tipo não admite qualquer tipo de marcação para frames.
Frameset
1
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0
2
Frameset//EN”
3
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-
4
frameset.dtd”>
Com esta declaração podemos utilizar tudo da declaração transacional e mais os elementos específicos para frames.
4.4 A declaração namespace
Após a declaração DOCTYPE vem uma declaração de namespace em XHTML, associada ao elemento raiz html.
1
<html xmlns=”http://www.w3.org/1999/xhtml&#8221;
2
xml:lang=”pt-BR” lang=”pt-BR”>
Um namespace em XML é uma coleção de tipos de elementos e atributos associados a um determinado DTD.
A declaração namespace indica a sua localização. No exemplo acima, aparece indicada a localização do namespace em XHTML (http://www.

w3.org/1999/xhtml). Os dois atributos adicionais especificam que a versão da XML em uso foi escrita em português do Brasil (xml:lang=”pt-BR”), e que o documento está escrito em português(lang=”pt-BR”).
4.5 Codificação dos caracteres
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, sendo a segunda a mais indicada:
1
<?xml version=”1.0” encoding=”iso-8859-1”>
1
<meta http-equiv=”Content-Type”
2
content=”text/html; charset=iso-8859-1” />

Exemplo de um arquivo XHTML
Aqui um simples exemplo de um arquivo codificado em XHTML 1.0:
1
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
2
<html xmlns = “http://www.w3.org/1999/xhtml&#8221; xml:lang=”pt-br” lang=”pt-br”>
3
<head>
4
<title>Título da Página</title>
5
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
6
</head>
7
<body>
8
<p>Aqui ficarão os parágrafos</p>
9
</body>
10
</html>
Bonito, legal, mas o que significa cada linha? Vamos entender?
1 doctype: indica o padrão e qual versão utilizaremos. As possibilidades são: HTML4.1 transactional, strict e frameset, XHTML1.0 transactional, strict e frameset e outros. No nosso caso usaremos o padrão XHTML Strict 1.0. Teremos uma aula só para conhecer os outros padrões.
2 e 10 html: marcador (tag) que indica o início efetivo da página HTML/XHTML. As propriedades xml:lang e lang indicam a língua em que o documento está escrito. Use “pt-BR” para português do Brasil. “en” para

inglês.
3 e 6 head: bloco de cabeçalho. Dentro deste bloco colocaremos as informações importantes sobre a página para os navegadores. Estes dados são interpretados pelos navegadores, que montam o conteúdo da maneira como foi estipulado pelo desenvolvedor.
4 title: título da página. O que estiver digitado entre esta tag será exibido na barra de título da janela ou na aba do navegador, também utilizada pelos motores de busca para nomear o conteúdo de sua página.
5 meta content-type: indica detalhes de codificação de caractere para o navegador.
7 e 9 body: corpo ou conteúdo da página. É dentro desta tag que sua página será realmente feita, o que o seu usuário verá.
8 p: parágrafos. Aqui poderão ser incluídos outras tags no lugar do <p>.
Agora colocaremos a “mão na massa”. Para isto abra o seu editor de texto, podendo ser o Bloco de Notas do Windows ou gedit, kedit, vi do Linux.
1
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
2
<html xmlns = “http://www.w3.org/1999/xhtml&#8221; xml:lang=”pt-Br” lang=”pt-BR”>
3
<head>
4
<title>Olá</title>
5
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
6
</head>
7
<body>
8
<p>Olá Mundo!</p>
9
<p>Digite aqui o seu nome</p>
10
</body>
11
</html>
Salve o documento com extensão *.html na sua pasta, com o nome

primeira.html. Para ver o resultado siga os passos abaixo, conforme o seu navegador.
5.1.1 Internet Explorer
Clique no menu Arquivo/Abrir/Procurar… Localizar o arquivo criado e clicar “Abrir.”
5.1.2 Firefox
Clique no menu Arquivo/Abrir Arquivo… Localizar o arquivo criado e clicar “Abrir.”
Para ambos existe um atalho de teclado: CTRL+O.
Abrirá o seu navegador padrão que mostrará algo parecido com a tela abaixo:

luuuu

Você deverá ver no navegador o texto digitado entre os tags <p> e </p>. Nossos exercícios em XHTML serão todos testados desta maneira.

Validando um documento
Para verificar se você seguiu corretamente o padrão, existe uma ferramenta online que faz o teste de conformidade.
Entre na internet no endereço validator.w3.org clique na aba Validate by File Upload, selecione o seu arquivo e clique em “Check”. Se tudo estiver certo verá a mensagem “Congratulations”. No caso de erro, o sistema apresenta o que você fez de errado. Corrija o que ele pediu e tente novamente.

lucm

Figura 4: Resultado da Validação bem-sucedida da Primeira Página

Testando páginas com erro
Geramos um arquivo com erro para aprendermos o que ocorre quando este é validado.
O erro está na linha 8 da figura abaixo, não foi fechado a tag de parágrafo.

lllc

Figura 6: Página de validação com erros

liilililli

Figura 7: Erros encontrados

Observem que o erro foi encontrado na linha 8 do nosso documento, mas o validador mostrou o primeiro erro na linha 9. Isto ocorreu porque ele tentou encontrar a tag </p> que fecha o parágrafo aberto e não achou.
Corrija a linha 8, salve o arquivo novamente e revalide-o.
Guarde o endereço do “Validator” no seu favoritos. Devemos utilizá-lo sempre para verificar se estamos atendendo as normas do W3C.
Importante! Algumas regras para conseguir a validação:
• Os caracteres maiúsculos e minúsculos são obrigatoriamente como apresentados. (HTML é diferente de html)
• Cuidado ao usar o ctrl+c e ctrl+v do navegador: verifique que todas as aspas ” estão trocadas por aspas inglesas. Quando copiar o conteúdo de um arquivo para o editor de texto apague as aspas que foram coladas e redigite as aspas dupla, normalmente fica próxima ao número 1 do teclado.
• Cuidado com o final da tag meta: …charset=iso-8859-1” /> Observe que depois das aspas usamos espaço, barra e maior. O espaço é obrigatório. Ocorre a mesma coisa com as tags <br />, <hr /> e <img src=“….” alt=“…” />, estas são tags únicas, não existe tags de abertura para elas, então deve ser digitado a tag e seus atributos, o espaço, a barra e maior.

Já conhecemos a estrutura básica de uma página XHTML, vamos incrementá-la?
Precisamos aprender: a marcar parágrafos, títulos, códigos de programação, inserir figuras, criar tabelas (só depois formatá-los), colocar cor. Tamanho e efeitos na nossa página será o último passo.
Todas as tags deste capítulo serão utilizadas dentro do <body> </body>.
Importante: Todos os códigos aqui mostrados devem ser digitados em um arquivo .html para teste.
6.1 Títulos
Como em todo texto, as páginas Web também possuem vários títulos, em vários níveis. Repare no índice desta apostila, perceberá isto, sendo um para cada capítulo e vários subtítulos.
Há 6 níveis de títulos: h1, h2, h3, h4, h5 e h6. O nível 1 é para os títulos mais importantes da página e os outros devem ser usados para caracterizar subtítulos.
A hierarquia dos títulos é construída de acordo com a importância das informações e não em relação à aparência. Por enquanto esqueça a aparência, poderemos alterá-la quando estivermos trabalhando com CSS.

Treinando
Entre no editor de texto e digite o arquivo abaixo, depois salve com titulos.html.

luuu

Figura 8: Exemplo de Títulos

liuws

unorFigura
9: Visualização

Parágrafos
Em XHTML todo o texto simples deve ser delimitado com a tag ‘p’. Desta maneira:
<p>Primeiro parágrafo. Ele pode conter várias frases. Veja que uma frase na mesma linha não deve ser delimitada. Um parágrafo é diferente de uma frase, certo?</p>
<p>Por padrão, é inserido um pequeno espaço entre os parágrafos. Você poderá alterar o espaço via CSS.</p>
<p>Não podemos digitar texto “solto” na nossa página, ele deve sempre estar entre tags, seja elas de parágrafos, listas, títulos ou qualquer outra.</p>
6.3 Listas Ordenadas e Não Ordenadas
Utilizamos listas para enumerar ou listar itens, é um recurso bastante utilizado. Existem dois tipos: numeradas e não-numeradas ou ordenadas e não ordenadas.
As lista não numeradas (não ordenadas) usam duas tags ‘ul’ (unordered list) para delimitar a lista, e ‘li’ (list item) para cada item da lista. Para cada item da lista ele coloca um marcador, que pode ser uma seta ou bolinha. Assim:

1
<ul>
2
<li>primeiro item da lista</li>
3
<li>segundo item da lista</li>
4
<li>terceiro item da lista</li>
5
<ul>
Resultado:
• primeiro item da lista
• segundo item da lista
• terceiro item da lista
As listas numeradas (ordenadas) automaticamente incluem números antes de cada item da lista. Funciona igual a lista não-numerada. No exemplo anterior trocando ‘ul’ por ‘ol’ (ordered list) obteríamos:
1
<ol>
2
<li>primeiro item da lista</li>
3
<li>segundo item da lista</li>
4
<li>terceiro item da lista</li>
5
<ol>
Resultado:

1 primeiro item da lista
2 segundo item da lista
3 terceiro item da lista
Não é necessário digitar os números.
6.4 Listas de Definição
Existe ainda a lista de definição, parecida com um dicionário.
Em uma lista de definições, há os termos a serem definidos e há uma definição para cada termo. Para construir uma lista de definição temos 3 tags:
dl definition list, delimita o início e fim da lista
dt definition term, delimita cada um dos termos da lista
dd definition description, delimita cada definição da lista
Veja um código de exemplo:
1
<dl>
2
<dt>dl</dt> <dd>definition list, delimita o início e fim da lista</dd>
3
<dt>dt</dt><dd>Delimita cada um dos termos da lista</dd>
4
<dt>dd</dt><dd>Delimita cada definição da lista</dd>
5
</dl>
Resultado:

lulululul

Figura 10: Exemplos de parágrafos e listas

Endereços
Address serve para indicar o endereço de um local, assim como marcar qualquer tipo de informação de contato.
Dentro do elemento address pode inserir quaisquer outros elementos inline, como a, span, strong, entre outros.

1
<address>
2
<a href=”http://www.cefetsp.br/edu/sjbv/”&gt; IF – Campus SJBV</a>
3
<span>
4
Acesso Dr. João Batista Merlin, s/nº <br />Jardim Itália – 13872-551 <br />São João da Boa Vista – SP – (19) 3634-1100
5
</span>
6
</address>
ou
1
<address>Este é meu endereço</address>
6.6 Citações
Utilizado para fazer citações de texto de um livro, site ou mesmo uma frase de outro autor, a tag <cite>:
1
<cite>”Seu futuro depende de muitas coisas, mas
2
principalmente de você.” </cite>
Para blocos de citações mais longas com parágrafos inteiros, temos ainda a tag <blockquote>. Observe que ele exige um ou mais blocos dentro:
1
<blockquote><p>Esta citação inclui mais de um
2
parágrafo</p>
3
<p>Este é o segundo parágrafo da
4
citação</p></blockquote>
Sem os tags <p> dentro do blockquote o código não é validado.
Na tag <blockquote> é opcional indicar quem é o autor da citação. Use o parâmetro cite:
1
<blockquote cite=”Einstein”>A velocidade da luz é
2
igual para todos os referenciais
3
inerciais.</blockquote>

O texto em cite não é mostrado, mas é armazenado para o robô dos sistemas de busca.
6.7 Código
Código de programação é um tipo de informação muito comum em sites especializados em informática, principalmente programação. Esta tag deve estar dentro de parágrafos ou títulos. Para indicar que algo é código, temos a tag ‘code’:
1
<code>
2
System.out.println(“Tabuada do 5”);
3
for(i=1;i<=10;i++){
4
System.out.println(“5 x ” + i + “ = ” + (i*5));
5
}
6
</code>
6.8 Resultados de Programas
Utilizado para mostrar resultados de saídas de programas. Esta tag deve estar dentro de parágrafos ou títulos.
Exemplo:
1
<p>Mostrando o resultado do programa acima:
2
<samp>5 x 1 = 5</samp></p>
6.9 Ênfase e ênfase forte
Para destacar uma frase ou palavra no meio de um parágrafo, temos duas opções: utilizar de ênfase ou de ênfase forte. Os tags são, respectivamente, <em> e <strong>:
1
<p>Exemplo de parágrafo. Agora um exemplo <em>de

2
algo muito importante e que necessite
3
destaque</em>. No entanto isso é <strong>ainda
4
mais importante e deve ser ainda mais
5
destacado.</strong></p>
Observe que a aparência padrão para <em> é o itálico e <strong> é o negrito. Mas isso é o padrão e podem ser modificados via CSS. Textos enfatizados fazem parte de um parágrafo, ou outro tipo de bloco, como: code, cite, etc.
6.10 Sobrescrito e Subscrito
Para textos subscritos (subscribed) e sobrescritos (supercribed), temos respectivamente os tags <sub> e <sup>:
1
H<sub>2</sub>O
2
H2O
3
a<sup>2</sup>= b<sup>2</sup>+c<sup>2</sup>
4
a2=b2+c2
Importante: Aluno, teste todos os exemplos vistos, isto é fundamental para o seu aprendizado, teste-os no validator.w3.org
6.11 Mais recursos para a página
Como já criamos alguns exemplos e você testou todos os exemplos anteriores, deve ter percebido que a página está estática, parada, sem saída para outro local. Podemos modificar isto, mas como? Através de links e âncoras.
Veremos também como criar tabelas. Vale destacar que tabela foi criada apenas para tabular dados, mostrar informações de forma concisa e não para fazer a estrutura de uma página .html, como era utilizada antigamente.

6.12 Links e Âncoras
Atualmente, a internet é o que é graças aos links, que na maioria das vezes é caracterizado como textos com um sobrescrito embaixo e geralmente em azul, quando clicados levam a outro conteúdo da internet, de forma automática.
Usar é fácil, mas vocês verão que criar um link é quase tão simples quanto utilizá-lo.
Os atributos HTML são características de uma tag que adicionam funcionalidades a ela. Por exemplo: não basta criar um link, é preciso definir uma página destino. Como já vimos, a tag usada para linkar é <a></a>. Para adicionar a essa tag a página de destino do link, usaremos um atributo dessa tag, chamado href. Todo atributo XHTML segue as seguintes regras:
1 deve ser escrito em letras minúsculas;
2 fica dentro da tag de abertura;
3 Respeita a seguinte sintaxe:
nome_do_atributo = “valor_do_atributo”
Vejamos como ficaria nosso link, usando o atributo href:
1
<a href=”http://www.ifsp.edu.br “>Conheça o IFSP</a>
O texto sublinhado indica o local que o navegador irá carregar no momento que o usuário clicar no link, e o Conheça o IFSP será o texto que o usuário verá.
Quando criarmos links para as páginas que estão dentro do nosso próprio servidor, não é necessário o caminho completo (http://www.dominio.com.br/etc…), basta apenas declarar o nome do arquivo, e sua hierarquia de pastas (quando necessário).
É interessante podermos escolher aonde queremos que seja aberto o link, em qual janela o link será aberto. Temos duas opções: abrir links na

mesma janela, obrigando o usuário a utilizar o botão VOLTAR, do navegador, para retornar a nossa página; abrir links em uma nova janela. Por padrão, os links abrem na mesma janela, mas para forçar a abertura de links em uma nova janela precisaremos do atributo target. Lembrando que para quem utiliza softwares leitores de tela (pessoas com deficiências visuais) a abertura de links em outra janela ou aba dificulta a navegação pela página. Veja como funciona:
1
<h1>Link para mesma janela</h1>
2
<a href=”pagina.html”>Link</a>
3
<h1>Link abrindo em nova janela</h1>
4
<a href=”pagina.html” target=”_blank”>Link</a>
Basta adicionar o atributo target com o valor “_blank” e o link abrirá em uma nova janela.
Importante: Quando necessário utilizar mais de um atributo na tag, deve-se separá-los por um espaço em branco.
6.13 Âncoras
Já aprendemos como criar links para outros sites ou outras páginas, agora aprenderemos a criar links para dentro do próprio documento.
Imagine uma página enorme, cheia de conteúdo dividido em capítulos, mas tudo em uma única página, ficaria difícil navegar por este site, se utilizássemos índices facilitaria a navegabilidade. Para isso, criaremos links âncoras, ou seja, links que apontem para o próprio documento.
Para criar uma âncora é necessário dois passos:
1 Definir um pedaço da página para ser o destino do link;
2 Criar um link apontando para o pedaço da página selecionado como destino.
Para definir um trecho da página como destino do link âncora, será preciso envolvê-lo com as tags <a></a> acrescentando o atributo id. Veja

como funciona:
1
<h4><a id=”ancora1”>Título 1</a></h4>
2
<p>Parágrafo 1…</p>
Bem, definimos um parágrafo de nossa página como uma âncora, agora é preciso criar um link apontando para essa âncora. Para isso, basta criar um link normalmente, e no caminho da página de destino colocar o seguinte valor: #nome_da_ancora.
1
<h4><a id=”topo”>Topo</a></h4>
2
<a href=”#ancora1”>Parágrafo 1</>
3
<h4><a id=”ancora1”>Título 1</a></h4>
4
<p>Parágrafo 1…</p>
5
<a href=”#topo”>Voltar para o topo</a>
Nos casos em que a posição na página de destino é um título marcado com títulos (h1, h2 .. h6), ou mesmo um parágrafo ou qualquer objeto específico, pode-se usar o parâmetro id. Exemplo:
1
<h4 id=”respond”>Envie um comentário</h4>
6.14 Tabelas
Muitas páginas foram construídas com tabelas, pois na época, era o único recurso para construí-las com uma boa aparência. Para montar layout de páginas cada vez mais elaboradas e detalhadas, a tabela ainda é uma ferramenta muito usada, embora esta prática seja desencorajada. Tabelas devem ser utilizadas apenas para tabulação de dados.
Atualmente, há outros recursos mais avançados para isso, por exemplo: CSS.
Dica: Se quiser se livrar das tabelas em layout de página, conheça o site http://tableless.com.br/artigos/tutorial/.
Todas as tabelas devem possuir um título, cabeçalho, corpo e rodapé. Criamos tabela com o elemento <table>. Podemos utilizar alguns

elementos juntamente com tabelas:
<table> indica início e fim da tabela, todos os outros elementos devem ser utilizados dentro desta tag.
<caption> elemento opcional que indica o título da tabela
<thead> delimita o cabeçalho da tabela
<tfoot> delimita o rodapé da tabela
<tbody> delimita o corpo da tabela
<tr> delimita as linhas da tabela, observe que os dados de células ficam dentro de uma linha
<td> delimita as células da tabela
<th> delimita as células da tabela, porém como títulos, uma célula de cabeçalho (head), por padrão já vem em negrito e centralizado.
Quando quisermos “mesclar” uma célula por mais de uma coluna, como fazemos no Excel ou no Word, temos que utilizar o atributo “colspan” seguido do número de colunas que a célula deve se expandir.
Se quiser que a célula ocupe mais de uma linha, o atributo a ser utilizado é o “rowspan”, ambos os atributos devem ser inseridos dentro de uma declaração <td>.
A diferença aqui é conceitual: duas células não são mescladas, mas uma célula é esticada.
Uma tabela possui alguns atributos importantes dos quais podemos destacar:

BOM GALÉRA É ISSO AI SE GOSTOU DEIXE UM COMENTÁRIO E O RESTANTE DA APOSTILA TÁ AQUI É SÓ PEDIR K ENVIO?

por Paulista Postado em HTML Com a tag