Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
xhtml Alguns Conceitos fundamentais
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
2016
Guilherme Alves de Araujo Guerra -
Nome do Grupo: SoftwareOriginSP
21/3/2016
xhtml Alguns Conceitos fundamentais
O grupo SoftwareOriginSP, é um grupo independente fundado no
fim do ano de 2015, sem iniciativa do gorvenamental. Seu principal interesse é seguimenta da
criação de jogos para diversas plataformas tanto desktop ou móbile. Entretanto, adquirimos
alguns conceitos fundamentais que são estabelecidos para fazer ferramentas para as pessoas,
entre elas são: ferramentas para web, sendo sites dinâmicos, e entre outras que podam
contribuir na comunicação e da evolução do aspecto humano.
As tecnologias feitas pelo grupo são de alta telecomunição, para que as pessoas possam se
comunicar em qualquer lugar e a qualquer momento. Usamos ferramentas totalmente aceitas
no mercado tecnológico.
1° Cápitolo
Conhecendo a linguagem
XHTML
O XHTML, ou eXtensible Hypertext Markup Language, é uma reformulação da
linguagem de marcação HTML, baseada em XML. Combina as tags de marcação
HTML com regras da XML. Este processo de padronização provê a exibição de uma
página Web neste por diversos formato. além da melhoraria da acessibilidade do
conteúdo. A principal diferença entre XHTML e HTML, é que o primeiro é XML
válido, enquanto o segundo possui sintaxe própria. Ambos possuem sentido semântico.
Para verificar se uma página foi construída corretamente no padrão XHTML,
existem diversos validadores; a W3C disponibiliza um validador online.
A linguagem xhtml pode ser vista pelo browsers com versões atuais, com browsers
antigos o efeito da página poderá ouver distoções devido pela a versão do browser ser
antiga.
Para poder conpreender a linguagem, primeiramente é recomendado que tenha
alguns conhecimentos sobre outras linguagens, tais como: HTML, CSS e
principalmente XML. A linguagem XHTML, assim sendo para fazer qualquer tipo de
aplicações para web, também existem outras linguagens que você pode fim aprender
para fazer qualquer coisa para web, tais como: Ruby, Python, PHP 5, Java 8 e
JavaScript.
Deste material iremos aborda conceitos de XHTML, alguns conceitos de CSS e
HTML que será realmente necessario, conforme vamos citando alguns fundamentos da
linguagem, e abordaremos alguns códigos básicos para aprende-mos sobre a linguagem,
e citaremos algumas ferramentas que poderam utilizar para criar códigos sendo elas
gratuitas.
Introdução
Na época do lançamento da tecnologia, considerava-se o XHTML como sendo o
sucessor do HTML. Porém, XHTML é uma recomendação separada; a W3C continua a
recomendar o uso de XHTML 1.1, XHTML 1.0, e HTML 4.01 para publicação na web,
assim como o HTML5.
Um exemplo simples de XHTML seria: (Observando dentro das tags
<html></html>)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-
8" />
<title>Dados para Cadastro</title>
</head>
<body>
<form action="">
<fieldset>
<legend>Dados para Cadastro</legend>
<label for="nome">Nome:</label>
<input type="text" name="nome" id="nome" /><br />
<label for="tipo">Tipo:</label>
<input type="text" name="tipo" id="tipo" /><br />
<label for="data">Data:</label>
<input type="text" name="data" id="data" /><br />
<input type="submit" value="enviar" />
</fieldset>
</form>
</body>
</html>
O código CSS que formataria este XHTML seria:
form input, form label, form legend {
font-size: 11px;
}
form input {
border: solid #ccc thin;
font-family: 'Trebuchet MS', Verdana, Tahoma, serif;
width: 100%;
}
form input[type="submit"] {
display: block;
float: right;
margin-top: 13px;
width: auto;
}
form fieldset, form legend {
border: solid black thin;
margin: 10px;
padding: 6px;
}
form fieldset {
width: 40%;
}
form label {
display: block;
}
form legend {
background-color: #e8e8e8;
font-weight: bold;
}
Versões :
XHTML 1.0
A Recomendação XHTML original da W3C, XHTML 1.0, foi simplesmente uma
reformulação do HTML 4.01 em XML. Existem três diferentes "DTDs" de XHTML
1.0, cada qual com equivalência a uma versão em HTML 4.01.
XHTML 1.0 Strict é o mesmo que HTML 4.01 Strict, mas seguindo regras de
sintaxe XML.
Declaração da XHTML 1.0 Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-
8" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
XHTML 1.0 Transitional é o mesmo que HTML 4.01 Transitional, mas segue
as regras de sintaxe XML. Ele suporta tudo encontrado no XHTML 1.0 Strict,
mas também permite o uso de vários elementos e atributos que são julgados
presencionais, para facilitar a transição de HTML 3.2 e mais recentes. Isso
inclui<center>,<u>,<strike>, e<applet>.
Declaração da XHTML 1.0 Transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-
8" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
XHTML 1.0 Frameset: é o mesmo que HTML 4.01 Frameset, mas seguindo as
regras de sintaxe XML. Ele permite a definição de um frameset HTML, uma
prática comum em versões de HTML anteriores ao HTML 4.01.
Declaração da XHTML 1.0 Frameset:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-
8" />
<title>Untitled Document</title>
</head>
<frameset>
</frameset>
</html>
XHTML 1.1
A mais recente Recomendação XHTML da W3C é o XHTML 1.1: Module-based
XHTML, que é uma reformulação do XHTML 1.0 Strict, com pequenas modificações,
usando alguns módulos de um conjunto definido em Modularização de XHTML,
[2]
uma
Recomendação W3C que cria uma modularização de frames, um padrão de módulos, e
várias outras definições. Todas as ferramentas depreciadas de HTML, como elementos
presencionais e framesets, e até mesmo os atributoslang e o atributo de âncorasname,
que ainda eram permitidos no XHTML 1.0 Strict, foram removidos desta versão. A
apresentação é controlada puramente pelas Folhas de Estilo em Cascata (CSS). Esta
versão também permite suporte à marcação rubi, necessária para línguas do Extremo
Oriente (especialmente CJK).
Além da Modularização de XHTML permitir pequenas ferramentas XHTML serem
reutilizadas por outras aplicações XML de uma maneira bem definida, e que o XHTML
seja estendido para alguns propósitos, XHTML 1.1 adiciona o conceito de um
documento "estritamente conformado": esses documentos definidos nos módulos
requeridos para XHTML 1.1. Por exemplo, se um documento é estendidopara usar o
módulo XHTML Frames (frameset), ele também pode ser descrito como XHTML 1.1,
mas não estritamente conforme o XHTML 1.1. Ao invés disso, ele deve ser descrito
como um XHTML Host Language Conforming Document,
[3]
se a ferramenta for
relevante e necessária.
Em 2007, uma segunda edição do XHTML 1.1 está em desenvolvimento pela W3C
Working Draft.
Documentos XHTML válidos
Um documento XHTML que está em conformidade com uma especificação
XHTML, é dito válido. Validade garante consistência no código, que por sua vez
facilita o processamento, mas não necessariamente garante renderização consistente nos
navegadores.
!— */
p { color: green; }
/* ]]> */ -- >
Editores de textos que suporta XHTML:
Geany – gratuito
Notepad++ - gratuito
Visual Studio Code – gratuito
Codelobster – gratuito
2° Cápitolo
Alguns conceitos
Diferenças Entre XHTML e HTML
Como Preparar-se para a XHTML
A XHTML é a próxima geração da HTML, mas levará certamente algum tempo até
que os navegadores e outros produtos de software estejam prontos para ela.
Neste meio-tempo há algumas coisas importantes que você pode fazer para
preparar-se para ela. Como você irá aprender neste tutorial, a XHTML não é muito
diferente da HTML 4.01, portanto, trazer o seu código aos padrões da 4.01 é um início
muito bom. A nossa Referência HTML 4.01 completa pode ajuda-lo nisso.
Além disso, você deve começar AGORA a escrever o seu código HTML em letras
minúsculas, e NUNCA adquirir o mau hábito de pular as tags de fechamento como
</p>.
As Diferenças Mais Imoprtantes:
Os elementos XHTML devem estar devidamente aninhados
Os documentos XHTML devem estar bem-formados
Os nomes das tags devem estar em letras minúsculas
Todos os elementos XHTML devem ser fechados
Os Elementos Devem Estar Devidamente Aninhados
Na HTML alguns elementos podem estar indevidamente aninhados uns dentro dos outros
como estes:
<b><i>Este texto está em negrito e itálico</b></i>
Na XHTML todos os elementos devem estar devidamente aninhados uns dentro dos
outros como estes:
<b><i>Este texto está em negrito e itálico</i></b>
Observação: Uma falha comum em listas aninhadas, é esquecer que a lista interna
deve estar dentro de um elemento li, assim:
<ul>
<li>Café</li>
<li>Chá
<ul>
<li>Chá preto</li>
<li>Chá verde</li>
</ul>
<li>Leite</li>
</ul>
Este é o correto:
<ul>
<li>Café</li>
<li>Chá
<ul>
<li>Chá preto</li>
<li>Chá verde</li>
</ul>
</li>
<li>Leite</li>
</ul>
Observe que inserimos uma tag </li> após a tag </ul> no exemplo com o código "correto".
Os Documentos Devem Estar Bem-formados
Todos os elementos XHTML devem estar aninhados dentro do elemento raiz <html>. Todos
os outros elementos podem ter sub elementos (children [filhos]). Os sub elementos devem
estar em pares e corretamente aninhados dentro de seu elemento pai (parent). A estrutura
básica do documento é:
<html>
<head> ... </head>
<body> ... </body>
</html>
Os Nomes de Tags Devem Estar em Letras Minúsculas
Isto é porque os documentos XHTML são aplicações XML. A XML é sensível à caixa (letras
maísculas e minúsculas são diferenciadas). Tags como <br> e <BR> são interpretadas como
tags diferentes.
Isto está errado:
<BODY>
<P>Este é um parágrafo</P>
</BODY>
Isto está correto:
<body>
<p>Este é um parágrafo</p>
</body>
Todos os Elementos XHTML Devem Ser Fechados
Elementos não vazios devem ter uma tag de fechamento.
Isto está errado:
<p>Este é um parágrafo
<p>Este é outro parágrafo
Isto está correto:
<p>Este é um parágrafo</p>
<p>Este é outro parágrafo</p>
Elementos Vazios Devem também Ser Fechados
Elementos vazios devem ou ter uma tag de fechamento ou a tag de abertura deve terminar
com />.
Isto está errado:
Esta é uma quebra<br>
Aqui vem um filete horizontal:<hr>
Aqui está uma imagem <img src="happy.gif" alt="Rosto feliz">
Isto está correto:
Esta é uma quebra<br />
Aqui vem um filete horizontal:<hr />
Aqui está uma imagem <img src="happy.gif" alt="Rosto feliz" />
Observação de Compatibilidade IMPORTANTE:
Para tornar a sua XHTML compatível com os navegadores de hoje, você deve adicionar um
espaço extra antes do símbolo "/" assim: <br />, e assim: <hr />.
A Sintaxe da XHTML
Escrever XHTML demanda uma sintaxe HTML limpa.
Mais Algumas Regras de Sintaxe XHTML:
Nomes de atributo devem estar em letras minúsculas
Valores de atributo devem estar entre aspas
A minimização de atributo é proibida
O atributo id substitui o atributo name
A DTD XHTML define elementos obrigatórios
Nomes de Atributo Devem Estar em Letras Minúsculas
Isto está errado:
<table WIDTH="100%">
Isto está correto:
<table width="100%">
Valores de Atributos Devem Estar Entre Aspas
Isto está errado:
<table width=100%>
Isto está correto:
<table width="100%">
A Minimização de Atributo É Proibida
Isto está errado:
<dl compact>
<input checked>
<input readonly>
<input disabled>
<option selected>
<frame noresize>
Isto está correto:
<dl compact="compact">
<input checked="checked" />
<input readonly="readonly" />
<input disabled="disabled" />
<option selected="selected" />
<frame noresize="noresize" />
Aqui está um alista de atributos minimizados em HTML e como eles devem ser escritos em
XHTML:
HTML XHTML
compact compact="compact"
checked checked="checked"
declare declare="declare"
readonly readonly="readonly"
disabled disabled="disabled"
selected selected="selected"
defer defer="defer"
ismap ismap="ismap"
nohref nohref="nohref"
noshade noshade="noshade"
nowrap nowrap="nowrap"
multiple multiple="multiple"
noresize noresize="noresize"
O Atributo id substitui o Atributo name
A HTML 4.01 define um atributo name para os elementos a, applet, frame, iframe, img, e
map. Na XHTML o atributo name está desaprovado. Use id em vez.
Isto está errado:
<img src="picture.gif" name="picture1" />
Isto está correto:
<img src="picture.gif" id="picture1" />
Observação: Para inter-operar com navegadores mais antigos por enquanto, você deve usar
tanto o name quanto o id, com valores de atributo idênticos, assim:
<img src="picture.gif" id="picture1" name="picture1" />
Observação de Compatibilidade IMPORTANTE:
Para tornar sua XHTML compatível com os navegadores de hoje, você deve adicionar um
espaço extra antes do símbolo "/".
O Atributo Lang
O atributo lang aplica-se a quase todos os elementos XHTML. Ele especifica a linguagem do
conteúdo dentro de um elemento.
Se você usar o atributo lang num elemento, você deve adicionar o atributo xml:lang, assim:
<div lang="no" xml:lang="no">Heia Norge!</div>
Elementos Obrigatórios em XHTML
Todos os documentos XHTML devem ter uma declaração DOCTYPE. Os elementos html,
head e body devem estar presentes, e o title deve estar presente dentro do elemento head.
Este é um modelo de documento XHTML mínimo:
<!DOCTYPE O Tipo-de-documento vai aqui>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>O título vai aqui</title>
</head>
<body>
O corpo do texto vai aqui
</body>
</html>
Observação: A declaração DOCTYPE não é em si uma parte do documento XHTML. Ela não é
um elemento XHTML, e ela não deve ter uma tag de fechamento.
Observação: O atributo xmlns dentro da tag <html> é requerido na XHTML. Entretanto,o
validador no w3.org não acusa quando este atributo está faltando num documento XHTML.
Isto é porque "xmlns=http://www.w3.org/1999/xhtml" é um valor fixo e será adicionado à tag
<html> mesmo se você não o incluir.
Você aprenderá mais sobre a definição de tipo de documento XHTML no próximo capítulo.
3° Capítulo
A DTD XHTML
O padrão XHTML define três Document Type Definitions (Definições de Tipos de
Documentos).
A mais comum é a XHTML Transitional.
A <!DOCTYPE> é Obrigatória
Um documento XHTML consiste de três partes principais:
DOCTYPE
Head
Body
A estrutura básica do documento é:
<!DOCTYPE ...>
<html>
<head>
<title>... </title>
</head>
<body> ... </body>
</html>
A declaração DOCTYPE deve sempre estar na primeira linha em um documento XHTML.
Um Exemplo em XHTML
Este é um documento XHTML simples (mínimo):
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>documento simples</title>
</head>
<body>
<p>um simples parágrafo</p>
</body>
</html>
A declaração DOCTYPE define o tipo do documento:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
O resto do documento parece com HTML:
<html>
<head>
<title>documento simples</title>
</head>
<body>
<p>um simples parágrafo</p>
</body>
</html>
As 3 Definições de Tipo de Documento
A DTD especifica a sintaxe de uma página web em SGML.
A DTD é usada por aplicações SGML, tais como HTML, para especificar regras que se
aplicam à marcação de documentos de um tipo particular, incluindo um conjunto de
declarações de elementos e de etidades.
A XHTML é especificada em uma definição de tipo de documento SGML ou 'DTD'.
Uma DTD XHTML descreve de forma precisa em linguagem legível ao computador, a
sintaxe e a gramática permitida da marcação XHTML.
Há atualmente 3 tipos de documentos XHTML:
STRICT
TRANSITIONAL
FRAMESET
A XHTML 1.0 especifica três tipos de documentos XML document que correspondem às três
DTDs: Strict, Transitional, and Frameset.
XHTML 1.0 Strict
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Use esta quando você quer realmente uma marcação limpa, livre da confusão da
apresentação. Use junto com Folhas de Estilo em Cascata (Cascading Style Sheets).
XHTML 1.0 Transitional
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Use esta quando você precisa tirar vantagem das características de apresentação da HTML e
quando você quer dar suporte aos navegadores que não entendem FOlhas de Estilo em
Cascata.
XHTML 1.0 Frameset
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Use esta quando você quer usar Frames (molduras) HTML para particionar a janela do
navegador em duas ou mais molduras (frames).
4° capítulo
XHTML Como fazer
Como este sítio Web foi convertido para XHTML
Este sítio Web foi convertido de HTML para XHTML no final de semana de 18 e 19 de
dezembro de 1999, por Hege Refsnes e Ståle Refsnes.
Para converter um sítio Web de HTML para XHTML, você deve estar familiarizado com as
regras de sintaxe da XHTML dos capítulos anteriores. Os seguintes passos foram executados
(na ordem listada abaixo):
Uma Definição de DOCTYPE foi Adicionada
A seguinte declaração de DOCTYPE foi adicionada como primeira linha de cada página:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Observe que usamos a DTD transitional. Poderíamos ter escolhido a DTD strict, mas
achamo-la um pouco "strici" demais, e um pouco difícil de se adaptar.
Uma Observação sobre DOCTYPE
As suas páginas devem ter uma declaração DOCTYPE se você quer valida-las como XHTML
corretas.
Esteja alerta entretanto, que os navegadores mais recentes (como o Internet Explorer 6)
podem tratar os seus documentos de modo diferente dependendo da declaração <!DOCTYPE>.
Se o navegador le um documento com uma declaração DOCTYPE, ele pode tratar o documento
como "correto". As XHTML mal-formadas podem falhar [fall over] e serem exibidas
diferentemente do que seriam sem a DOCTYPE.
Nomes de Tag e Atributo em Letras Minúsculas
Já que a XHTML é sensível à caixa, e já que a XHTML somente aceita nomes de tags e
atributos HTML em letras minúsculas, uma busca e substituição geral foi executada para
substituir todas as tags com letras maiúsculas para minúsculas. O mesmo foi feito para os
nomes de atrivutos. Sempre tentamos usar letras minúsculas em nossa Web, de modo que a
função de substituição não produziu muitas substituições reais.
Todos os Atributos foram Aspados
Como a Recomendação XHTML 1.0 do W3C estabelece que todos osvalores de atributos
devem ser aspados, cada página na web foi conferida para ver se os valores dos atributos
estavam aspados adequadamente. Isto foi um trabalho que consumiu muito tempo, e
certamente nunca mais esqueceremos de colocar aspas em torno dos nossos valores de
atributo.
Tags Vazias: <hr> , <br> and <img>
Tags vazias não são permitidas na XHTML. As tags <hr> e <br> devem ser substituidas por
<hr /> e <br />.
Isto produziu um problema com o Netscape que mal-interpretava as tags <br/>. Não
sabemos porque, mas mudando-as para <br /> funcionou bem. Após aquela descoberta, uma
função de busca e substituição geral foi executada para trocar as tags.
Umas poucas outras tags (como a tag <img>) sofriam do mesmo problema acima. Decidimos
não fechar as tags <img> com </img>, mas com /> no final da tag. Isto foi feito manualmente.
O Sítio Web foi Validado (sem TIDY)
Após aquilo, todas as páginas foram validadas com a DTD oficial do W3C com este vínculo:
XHTML Validator. Uns poucos erros mais foram encontrados e editados manualmente. O erro
mais comum foi a falta das tags </li> nas listas.
Deveríamos ter usado uma ferramenta de conversão? Bem, poderiamos ter usado a TIDY.
O HTML TIDY de Dave Raggett's é um utilitário livre para limpar código HTML. Também
funciona bem com a marcação difícil de ler gerada por editores e ferramentas de conversão
especializado de HTML, e pode ajuda-lo a identificar onde você precisa prestar mais atenção
para fazer a suas páginas mais acessíveis.
A razão pela qual não usamos Tidy? Nós sabíamos sobre a XHTML quanod começamos a
escrever este sítio Web. Sabíamos que tínhamos que usar nomes de tags em letras minúsculas
e que tínhamos que aspar os atributos. ASsim, quando chegou a hora (de fazer a conversão),
nós simplesmente tínhamos que testar nossas páginas com o validador XHTML do W3C XHTML
e corrigir os poucos erros. E - aprendemos muito sobre como escrever código HTML "tidy".
5° Capítulo
Validação XHTML
Um documento XHTML é validado em comparação com uma Definição de Tipo de
Documento (DTD).
Validar a XHTML Com Uma DTD
Um documento XHTML é validado em comparação com uma Document Type Definition
(DTD). Antes que um arquivo XHTML possa ser adequadamente validado, uma DTD correta
deve ser adicionada como primeira linha do arquivo.
A Strict DTD inclue elementos e atributos que não foram desaprovados ou não aparecem em
framesets:
!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"A Transicional DTD inclui tudo da DTD estrita mais elementos e atributos desaprovados:
!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
A Frameset DTD inclue tudo da DTD transitiva mais as frames também:
!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"
Este é um documento XHTML simples:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>documento simples</title>
</head>
<body>
<p>um simples parágrafo</p>
</body>
</html>
Teste sua XHTML com o Validados W3C
Ponha o endereço da sua página na caixa abaixo:
http://www.w3schools.com/xhtml/default.a
Parte II
6° Capítulo
Aprendendo alguns conceitos da linguagem HTML
Escrevendo um XHTML válido
Ter uma Web com as suas informações todas "organizadas" é extremamente importante,
isso facilita uma busca pela Web por informações mais precisas. Para que seu arquivo possa
ser lido por máquinas além de humanos é muito importante que você escreva um XHTML
válido, com isso você está fazendo com que as informações do seu site fique mais acessível
para as buscas, contribuindo para o projeto e principalmente melhorando as visitas do seu
site.
Porque escrever um XHTML válido?
Acho que todos já ouviram falar de Web Semântica, para quem não ouviu, em poucas palavras
é: Um projeto para organizar e estruturar a informação da WEB.
Ter uma Web com as suas informações todas "organizadas" é extremamente importante, isso
facilita uma busca pela Web por informações mais precisas. Para que seu arquivo possa ser
lido por máquinas além de humanos é muito importante que você escreva um XHTML válido,
com isso você está fazendo com que as informações do seu site fique mais acessível para as
buscas, contribuindo para o projeto e principalmente melhorando as visitas do seu site.
DOC o que?!
O Doctype (Document Type Definition, vulgo DTD) é a primeira coisa que se deve escrever em
um arquivo XHTML, ele vai na PRIMEIRA LINHA do seu documento, se você quiser ter um XML
Válido, não devemos esquecê-lo, ele serve para informar ao browser que tipo de documento
será visualizado, ok? Existem 3 tipos:
Strict: Este tipo é usado quando você fez um código 100% XHTML, sem erros, deve ser
escrito assim: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Transitional: Este é o modo mais usado, você o usa quando está começando a migrar
do nosso amigo HTML para o poderoso XHTML, sua sintaxe é: <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Frameset: É usado quando você está utilizando FRAMES em seu site, se escreve assim:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Exemplo:
Listagem 1: Exemplo de uso do DOCTYPE
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html>
3 <head><tilte>
4 </tilte></head>
5 <body>
6 <!—Conteúdo-->
7 </body>
8 </html>
Feche TODAS as tags
Quem já escreveu algum XML sabe que ele não funciona até que TODAS as tags estiverem
bem fechadas, no HTML era diferente, muitas vezes deixávamos tags abertas, e ele funcionava
que era uma beleza. Para se fazer um XHTML válido, devemos fechar TODAS as tags:
Não devemos esquecer de fechar as tags que estamos carecas de conhecer: <p></p>,
<b></b>, etc...
E não devemos esquecer de forma alguma de fechar as tags "solitárias", assim, ao
invés de <br> escrevemos <br></br>, ou na forma simplificada: <br />.
Descobriram que fechando tags desta forma , não se sabe porque estava causando um
problema no Netscape, mas apenas colocando um espaço antes da / o problema é
solucionado.
Use letras minúsculas
Quem nunca viu um código fonte de um documento HTML escrito assim: <A
HREF="http://tags.com.letras.minúsculas/" TARGET="_BLANK"> </A> Um documento XHTML
deve ter TODAS as tags e seus respectivos atributos escritos com letra minúscula!
Não esqueça das "ASPAS"
Esta regra é bem simples. Todos os atributos XHTML devem conter as benditas "ASPAS".
Atributo NAME
O antigo atributo NAME foi substituído pelo atributo ID. Se seus usuários, clientes, etc,
utilizam ainda antigos browsers, você pode sem problema nenhum utilizar as duas formas
juntas durante neste período em que estamos migrando:< img src="imagem.gif" id="imagem"
name="imagem" />
Atributos sem valor
Não devemos esquecer também os atributos que escrevemos sem valor, por exemplo:
ERRADO:
Listagem 2: Uso incorreto de atributos não valorados
<option selected>
<frame noresize>
<input checked>
<input readonly>
CERTO:
Listagem 3: Uso correto de atributos não valorados
<option selected="selected">
<frame noresize="noresize">
<input checked="checked">
<input readonly="readonly">
Aprendendo algumas sentenças de HTML
O QUE É HTML?
Um documento escrito em HTML (Hiper Textos Markup Language) é um texto comum no
formato ASCII.
O QUE É HIPERTEXTO?
Hipertexto são aqueles itens marcados numa página WEB que, quando clicados, levam a
imagens ou informações mais detalhadas sobre o assunto. O Hipertexto é um texto (ou uma
imagem) grifado e destacado na página por uma cor diferente da cor do texto no qual está
inserido. Quando se coloca o cursor sobre o hipertexto, o cursor muda seu formato para um
ícone representado por uma mão.
Exemplo de Hipertexto: Clique aqui para...
CRIANDO UMA PÁGINA HTML USANDO UM EDITOR DE TEXTO
Uma página HTML pode ser criada em qualquer editor de texto (Bloco de Notas, WordPad,
etc), desde que seja salvo no formato ASCII.
Por exemplo: Se você criar um documento usando Bloco de Notas, deve salvá-lo no
formato .txt. Ao salvá-lo modifique a extensão .txt para .htm ou .html. Se seu
documento, no formato .txt se chama Index.txt altere-o para Index.htm ou
Index.html. Porém, lembre-se que o documento somente pode ser considerado HTML
se nele houver o esqueleto da linguagem HTML.
AS TAGS
As marcas utilizadas para produzir o hipertexto são chamadas tags. Uma tag consiste dos sinais
< (menor que) e > (maior que) e um texto dentro deles. A notação <title> por exemplo é uma
tag para o título do documento.
As tags devem ser usadas em pares, devendo haver uma tag que inicia a marcação e uma tag
que a finaliza. A tag de finalização deve ter uma barra "/" antes do texto. Por exemplo, a
marcação completa para o título de um documento é:
<title>Título do Documento</title>
Algumas marcações, no entanto, como as tags de início de parágrafo <p>, quebra de linha <br>
e inserção de barra <hr> não necessitam de seus pares.
Todo documento HTML deve iniciar com a tag <html> e finalizar com o seu par </html>.
Um documento HTML não faz diferença entre maiúsculas e minúsculas. Portanto tanto faz
usar <TITLE> como <title>.
CABEÇALHO DO DOCUMENTO
A cabeça do documento deve conter as informações mais essenciais da página.
Coloca-se no cabeçalho o Título do documento, a descrição, palavras chaves e comentários
O TÍTULO
Todo documento HTML deve ter um título que servirá para identificar o documento. O título
do documento não é visualizado na página mas aparece na barra de título do browser de
navegação. O título não é o mesmo que cabeçalho. O título é o nome do arquivo. É através do
título que sua home page será procurada pelos catálogosde busca.
A tag de título é:
<title></title>
Por exemplo: minha página tem o título CINCO PASSOS PARA CONSTRUIR SUA HOME PAGE.
Então a tag para o título de minha página é:
<title> CINCO PASSOS PARA CONSTRUIR SUA HOME PAGE</title>
A DESCRIÇÃO
A cabeça do documento deve conter uma descrição da página. Sobre o que ela trata e o que
tem a oferecer. A tag para a descrição é:
<meta name="description" content="descrição">
Por exemplo: minha página trata de HTML. A notação para minha página é a seguinte:
<meta name="description" content="Tutorial sobre HTML, dicas para construir homepage">
PALAVRAS CHAVES
As palavras chaves também servirão para a busca de sua home page. A tag de palavras chaves
é:
<meta name="keywords"content="palavras chaves">
A notação acima para minha página é:
<meta name="keywords"content="HTML, tutorial, gif, homepage">
COMENTÁRIOS
Você pode inserir comentários adicionais na cabeça do seu documento usando a marcação <!>
Portanto o cabeçalho de um documento HTML ficaria assim:
<head> (início da cabeça)
<title>Como Fazer uma Home Page</title>
<meta name="description" content="dicas de linguagem HTML, endereços
de imagens gifs, download de editores HTML.">
<meta name="keywords"content="home page, html, barras, gifs,
programação">
<!Home Page criada por...usando o programa... >
</head> (final de cabeça)
Sites recomendados para pesquisa:
http://hugoribeiro.com.br/Curso_HTML/xhtml/c03.htm
https://pt.wikipedia.org/wiki/XHTML
https://www.codecademy.com/pt
Continue navegando
Materiais relacionados
Perguntas relacionadas
Compartilhar