Rogério Lino » Semântica

Escrevendo o Primeiro XHTML

Rogério Alencar Lino Filho — Tue, 11 Jul 2006 12:47:21 +0000

Mãos à obra, vamos agora escrever nosso primeiro código XHTML. Abaixo o código já pronto e comentado:

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Título

Antes de iniciar a tag html é declarado o tipo da página, o Doctype, se você não sabe o que é: leia aqui e/ou aqui.

Nesse caso foi definido como Strict, caso você ainda não esteje preparado pode utilizar como Transitional.

Você deve estar se perguntando: Por que aquele “xmlns” dentro da tag html ?

É chamado de namespace e serve para mostrar para o browser quais elementos pertencem a qual linguagem no documento. Dúvida? Mais? Mais!

As tags meta servem para colocar informações adicionais, tais como, autor, idioma, palavras-chave e etc. – essas tags são utilizadas por mecanismos de buscas, como o Google por exemplo, para localizar os sites. Um site bem estruturado e definido tem chance maior de aparecer primeiro na busca.

Logo abaixo aparece a tag link referenciando um arquivo externo, ícone. Chamado Favicon – ícone do favoritos – que é nada mais nada menos do que aquele íconezinho que fica aparecendo no browser ao lado do endereço do seu site e nos favoritos também é claro. Caso ainda tenha dúvida veja aqui.

Depois como já vimos aparece novamente a tag link para “puxar” o arquivo de estilo da página – CSS.

Fecha-se a tag head, abre e fecha a body e fecha a html, e pronto. O seu XHTML já está pronto.

Na próxima veremos o um layout já pronto com o CSS.

XHTML – O que é?

Rogério Alencar Lino Filho — Mon, 03 Jul 2006 19:17:28 +0000

XHTML (Extensible Hypertext Markup Language) é uma linguagem de marcação baseada em XML escrita para substituir o HTML.

No XML podemos criar nossas próprias tags, e o XHTML já vem com as tags pré-definidas baseadas nas tags já conhecidas do HTML. Utilizando as regras do XML.

Já que o XHTML usa as tags do HTML para que utilizá-lo?

Imagine que para cada página da internet que você fosse ver um código diferente. E que cada pessoa fosse definir o seu padrão. Seria muito difícil verificar se aquele código estaria dentre os padrões. É aí que entra o XHTML.

Para construir uma página em XHTML você deverá seguir os padrões da W3C, padronizando os códigos e tornando mais fácil sua validação e a legibilidade.

Por exemplo: todas as tags e seus atributos devem ser escritos em letra minúscula, todo valor dos atributos devem estar entre “” (alt=”Olá”), e as tags simples devem ser fechadas com “/>” ().

Alguns exemplos:

Tags e atributos:

errado:

certo:

Aninhamento das tags:

errado:
parágrafo negrito

certo:
parágrafo negrito

O XHTML é dividido em três tipos (DOCTYPE):

Strict: o mais rigoroso, exige que seja seguido por completamente os padrões.
Transitional: transição da forma antiga de marcação para uma nova forma. Utilizado por quem ainda está preso à alguma forma antiga em seu site. Sendo um pouco menos rigoroso que o Strict.
Frameset: usado quando se utiliza frames no site.

Principais diferenças entre XHTML e HTML

Além das tags escritas em letra minúscula, o fechamento obrigatório das tags, e as aspas. Também a sintaxe dos atributos devem ser escritas por completo (

para

). E a “troca” do atributo name para o atributo id.

Logo veremos mais a fundo o que são DOCTYPE e como funcionam e a declaração de um XHTML.

mais sobre:
Maujor.com – Tutorial XHTML
W3.org – O que é XHTML?
W3schools – XHTML validation
W3Schools – Diferença entre XHTML e HTML
Revolução.ect.br – O que é XHTML?
Revolução.etc.br – Doctype
Linha de Código – Tutorial XHTML
Linha de Código – Escrevendo um XHTML válido

Tags – O que são?

Rogério Alencar Lino Filho — Fri, 30 Jun 2006 17:43:44 +0000

São as estruturas que formam o HTML, podem conter atributos ou não. Uma tag é constituída por um sinal de “<” no começo seguido de seu nome mais o sinal de “>”. Os atributos da tag são especificados dentro dela.

exemplo:

resultado:

note que todos os valores dos atributos estão entre “”, mesmo não sendo necessárias para o HTML, mas é bom acostumar para que quando começar a trabalhar com o XHTML (veremos) – para que seja validado pela W3C. O mesmo serve para a “/”, que é insirida no final das tags simples, como é o caso da tag hr. Abaixo as principais tags e seus atributos:html - a tag princiapal da página aonde ficará todas as outras tags.head – dentro da tag head ficam o titulo (title), os scripts (javascript) e o estilo (CSS), além de outras tags como meta e link.title – define o título da página.

body – o corpo da página, o que vai aparecer para o visitante.

hn – varia de h1 até h6, vem com predefinições para o texto, utilizada para títulos.

p – para iniciar um parágrafo.

blockquote – serve para definir uma citação do texto.

hr - horizontal rule, inseri uma linha horizontal. Pode ser controlada pelos seguintes atributos:

width: tamanho da linha, medida em pixel ou porcentagem;
size: largura da linha, medida em pixel;
align: define como será alinhada a linha (left, center, right);
noshade: retira a sombra da linha;

font – para formatar a fonte da página.

size: tamanho da fonte, vai de 1 até 7;
color: cor da fonte em hexadecimal;
face: o tipo da fonte, pode-se escolher mais de uma fonte separando por vírgula no qual o browser vai procurar qual o visitante tem da esquerda para a direita – usa-se como default “Sans-Serif”;
ex: Texto</font>

a – defini um link na página.

href: destino do link, pra onde o usuário vai.
title: a descrição que irá aparecer ao repousar o mouse em cima.

img – adiciona uma imagem à página. Tag simples, então termina com “/”.

src: destino da imagem.
alt: descrição da imagem (ao posicionar o mouse em cima). Opcional, mas para ser validado tem que pelo menos conter. ex: alt=”".
width: largura.
height: altura.
ex:

i – adiciona itálico ao texto;

b – adiciona negrito ao texto (bold);

center – centraliza o conteúdo contido nele na página.

Algumas dessas tags – como por exemplo i, b e center e os atributos da tag font – quase não são usadas e seus atributos também, sendo substituídos por classes ou ids definidas no CSS (Cascade Style Sheet). Mas é bom vermos para termos uma boa base sobre como funcionam as tags.

Toda tag pode receber uma id e/ou class para ser identificada e formatada no CSS.

Dica: tente testar as tags alterando os atributos e ver os resultados para melhor fixar e compreender.

mais sobre:

http://pt.wikipedia.org/wiki/Tag

HTML – O que é?

Rogério Alencar Lino Filho — Fri, 30 Jun 2006 17:42:26 +0000

HTML (Hyper Text Markup Language) é uma linguagem interpretada por browsers (navegadores) para exibir textos e gráficos pela Web; Formado, estruturado, por Tag’s.
Para desenvolver uma página HTML não é necessário mais do que um simples Bloco de Notas, desde que salve como a extensão .html.

Exemplo de página HTML:

Minha Home Pag

Seja bem vindo!

no exemplo acima temos uma simples página com o seguinte conteúdo sendo exibido no corpo da página (body) : “Seja bem vindo!”, formatado pela Tag

que define o parágrafo. E no título (title) na barra do browser: “Minha Home Page”.

Repare que as todas as Tag’s do exemplo são fechadas com a repetição de seu nome acrescentando uma “/” na frente, o que mostra para o browser quando a Tag é fechada. O que veremos mais a fundo nos próximos tópicos sobre Tag’s.

mais sobre:
http://www.w3.org/MarkUp/
http://www.w3.org/MarkUp/Guide/
http://www.criarweb.com/artigos/7.php?manual=11