Aula XHTML
Xhtml é o novo padrão para o desenvolvimento de páginas para Web. Na verdade trata-se de um html bem formado em que algumas restrições foram impostas, tais como:
• todas as tags devem ser escritas em letras minúsculas; • as tags devem estar convenientemente aninhadas; • os documentos devem ser bem formados;
• o uso de tags de fechamento é obrigatório; • elementos vazios devem ser fechados; • sintaxe para atributos.
Tags
Os comandos html são chamados de TAGS – marcas padrões que são utilizadas para fazer indicações a um browser. As TAGS aparecem sempre entre dois sinais: “<” e “>” e geralmente são utilizadas aos pares.
Exemplo:
<title> Texto </title> <b> Texto </b> <p> Texto </p>
Salvando documentos
Os documentos html devem ser salvos com extensão htm ou html. Esses documentos podem ser criados em qualquer editor de texto convencional.
A declaração <!DOCTYPE>
A declaração <!DOCTYPE> não é um elemento da linguagem. A sua finalidade é informar ao web browser sobre qual a versão exata da linguagem em que a página está escrita. A referência à versão vem dada através de uma DTD (Definição de Tipo de Documento, ou "Document Type Definition".) Essa DTD define as regras gramaticais da linguagem usada. No padrão XHTML essa declaração é obrigatória e deve ser a primeira coisa que aparece no documento.
Existem três tipos de DOCTYPE:
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Esta é a mais rígida das declarações. Os documentos XHTML no modo Strict não admitem qualquer item de formatação dentro dos elementos e nem elementos em desuso "deprecated" 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
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Esta declaração permite uma maior flexibilidade e é indicada para documentos que ainda utilizem elementos em desuso ("deprecated"), regras de apresentação embutidas em tags e também para documentos destinados a exibição em navegadores sem suporte para CSS. Não admite qualquer tipo de marcação para frames.
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Esta declaração permite tudo da declaração transational e mais os elementos especificos para frames.
Modelo básico de uma página Web
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”pt-br” xml:lang=”pt-br”> <head> <title> ... </title> . . . </head> <body> ... </body> </html>
• <html> ... </html> indicam o início e o fim de um documento html. O browser reconhece a tag <html> e identifica que o documento que virá a seguir será interpretado como html. Em xhtml dois atributos adicionais devem estar presentes nessa tag:
xmlns: especifica qual o tipo de linguagem xml está sendo usada. →
lang e xml:lang especifica o lidioma preponderante na página. →
pt Português
pt-br Português do Brasil en Inglês
en-us Inglês dos EUA en-gb Inglês Britânico fr Francês de Alemão es Espanhol it Italiano ru Russo zh Chinês ja Japonês
• <head> ... </head> é o cabeçalho do documento html. Local em que serão definidas algumas tags. Sendo que, a mais importante, é a responsável por exibir o título do documento na barra de títulos do browser.
• <title> ... </title> esta tag deve sempre estar dentro do cabeçalho. Nela é definido o título a aparecer na barra de títulos do browser.
• <body> ... </body> todo o conteúdo da página deve aparecer dentro dessas duas tags. É o local em que estão localizados os textos, as imagens, as ligações com outras páginas, enfim, tudo aquilo que se deseja exibir para o usuário.
A Tag <META>
Meta tags são linhas de código HTML, ou "etiquetas", que, entre outras coisas, descrevem o conteúdo do seu site para os buscadores ou para o browser. É nelas que você vai inserir as palavras chaves que facilitarão a vida do usuário na hora de te encontrar. Através delas você pode também "assinar" seu site, declarando sua autoria sobre o código fonte.
Como utilizar as meta tags
As meta tags devem ser incluídas no seu código HTML, dentro da tag <head>, assim:
<html> <head>
<title> Aprendendo sobre as meta tags </title> <meta name="author" content="Erika Sarti">
<meta name="description" content="Meta Tags - O que são e como utilizá-las - Um artigo para iniciantes"> <meta name="keywords" content="sites, web, desenvolvimento">
</head> ...
description
Uma ou duas frases que o buscador apresentará como um resumo do conteúdo do seu site:
<meta name="description" content=" Meta Tags - O que são e como utilizá-las - Um artigo para iniciantes">
keywords
Nesta tag você deverá incluir o maior número possível de palavras que se refiram ao seu texto. Se não utilizar as mesmas palavras, tente utilizar sinônimos. Nunca quebre uma linha de palavras-chave, porque seu trecho de código será considerado um erro e será ignorado. Por isso, utilize quantas meta tags keywords você precisar.
<meta name="keywords" content="sites, web, desenvolvimento, html, design">
content-type
Especifica o tipo de conteúdo da página e o conjunto de caracteres que ele usa. É recomendável utilizar esta meta tag em todas as páginas do seu site, porque ela garante que os navegadores irão tratar seu documento da maneira mais apropriada, especialmente quando você utiliza formulários para enviar informações entre páginas. Para quem desenvolve páginas em idiomas orientais, utilizar o conjunto de caracteres apropriados é fundamental para que eles sejam exibidos corretamente. Os valores mais comuns são:
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> Onde
text/html define que o conteúdo é um texto em linguagem HTML. Se você desenvolve sites em
XHTML ou XML certamente sabe que deverá os valores "application/xhtml+xml" e "application/xml", respectivamente.
iso-8859-1 é a codificação da linguagem mais comum para exibir textos em línguas derivadas do
latim.
Redirecionamento
Proporciona o redirecionamento automático de uma página a outra depois de um dado intervalo de tempo.
<meta http-equiv="refresh" content="5;url=http://www.novosite.com/">
Não fazer cache
Indicação de não colocar no cache do browser, ou seja sempre vai buscar nova página
Comentários
Utilizados em sua página Web para descrever procedimentos utilizados na criação de sua página. O texto de um comentário não é exibido pelo navegador.
Sintaxe:
<!—Comentário
Tag cabeçalho <h>
São linhas do documento que são exibidas no browser com letras diferentes do texto do restante do texto chamando a atenção de uma nova seção ou tópico. Sempre que se definir um novo cabeçalho uma nova linha é inserida em branco.
Essa tag possui 6 tamanhos diferentes 1 (maior nível) a 6 (menor nível). Sintaxe:
<hn> Texto </hn>
• n é um valor que varia de 1 a 6.
Parágrafos <p>
A tag responsável pela quebra de parágrafos é a <p> que finaliza o parágrafo e insere
automaticamente uma linha em branco entre parágrafos. Também é responsável pelo alinhamento de parágrafos.
Sintaxe:
<p align=”posição”> Texto do parágrafo</p> Onde posição pode ser:
• left: alinhamento a esquerda.
• center: centralizado.
• right: alinhamento a direita.
Quebra de linhas </br>
Pula para próxima linha.
Fontes
Permite que você insira em sua página um texto com fontes de tamanhos, cores e tipos diferentes. Sintaxe:
Onde:
•
size=’n’ : varia entre 1 a 7 e 3 é o valor padrão da maioria dos navegadores.•
face=’nome’: nome da fonte a ser utilizada.•
color=’cor’: cor da fonte definida em hexadecimal, ou através de um nome pré-definido.Formatando fonte
Alguns comandos para formatação de fonte.
Linhas horizontais
Para inserir linhas horizontes em um documento html basta utilizar a tah <hr/>
<hr width=”n%” align=”Posição” size=”n” color=”#codigo” />
•
width: largura da linha. Pode ser definida em pixels ou porcentagem.
•
align: left, right ou center.
Links
LINKS são uma poderosa ferramenta de documentos HTML que permitem que a
característica de leitura não linear seja efetivada. Você pode inserir links em textos e
imagens. Um link é criado utilizando-se a tag <a href=”endereço_do_arquivo”> Texto ou
imagem</a>. Exemplo: <a href=”
http://www.terra.com.br
”>Link para a página do Terra </a>
Essa tag pode conter outros atributos como o target. Esse atributo pode apresentar os
seguintes valores:
•
target=”_self” - abre o link na página corrente.
•
