Estrutura Básica de uma página XHTML/HTML

TiloWR - Tatoo HTML

Vamos falar sobre os elementos básicos para iniciar uma
página HTML

<!DOCTYPE>
<html>
   <head>
      <title>
         TiloWR
      </title>
   </head>
<body></body>
</html>

<!DOCTYPE> – Versão do (X) HTML

Existem vários tipos de DOCTYPE, mas vamos falar dos mais
usados três para HTML 4 e uma para HTML 5.

HTML 5:

<!DOCTYPE html>

HTML 4 Strict:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML; 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Essa é a mais exigente das declarações, quando você declara
que seu código é STRICT você está dizendo que no seu código não existe nenhum
tipo de tag depreciada e segue todas as regras do W3C. é ideal para o uso em
documentos que tem estilos em CSS.

HTML 4 Transitional:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML; 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Esta declaração permite a você usar tags depreciadas, e
trabalhar seu código de forma mais flexível mas não suporta páginas com frames.

HTML 4 FRAMESET:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML; 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

Essa declaração permite tudo que o transitional permite,
porem dá suporte a frames.

HTML

A tag HTML tem duas variações, uma para HTML e uma XHTML:

HTML

<html>

XHTML

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="pt-BR">

xmlns: declara a forma de escrita XML usada no documento.

dir: direção do texto, no nosso caso é “left to right”.

lang: linguagen usada no documento em que no brasil usamos
“pt-BR”.

HEAD

A tag HEAD é onde declaramos as informações sobre a página,
como quem é o autor, qual o seu conteúdo, a língua usada, o tipo de escrita, o
titulo da página entre outras informações, vejamos essas informações.

Todas as tags a seguir estão dentro da tag HEAD

Titulo da página

<title>TiloWR</title>

Declara o tipo de codificação usada no conteúdo, o
recomendável é usar UTF-8, mas caso queira usar outro tipo, consulte a tabela
aqui

<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />

Declara sobre o assunto abordado na página

<meta name="description" content="Internet vista pelos
olhos de um Front End" />

Declara as palavras chaves usadas na página, deixando seu site mais amigável para os mecanismos de busca.

<meta name="keywords" content="CSS, HTML, XHTML,
DHTML, JavaScript, XML, JQuery, AJAX, PHP, MySQL, SQL 2008, C#,
Witalo Rebouças, Tilo, TiloWR, Twitter, Orkut," />

Declara o
autor da página

<meta name="author" content="Witalo Rebouças" />

Linka o arquivo css e diz qual o tipo de
mídia será usado, os mais comuns são “screen” e “print”.

<link rel="stylesheet" href="style.css"
type="text/css" media="screen" />

para executar um script direto do arquivo ou referenciando um arquivo externo
você usa a tag SCRIPT

<script type="text/javascript" src="javascript.js"></script>

BODY

Tudo que será exibido para o usuário é
inserido dentro da tag body.

<body></body>

Comentários

Sempre que precisamos deixar um comentário no código, algo
o usuário não veja, mas que precisamos que esteja no documento por uma questão
de documentação, fazemos da seguinte maneira:

<!-- Aqui vai o que não é exibido -->

Leia Também:

About Tilo

Profissional FrontEnd desde 2006, Executa trabalhos com xHtml, CSS, JavaScript, MySQL e PHP, estudante de C# e SQL. Cursa Tec. em Analise e Desenvolvimento de Sistemas na UniItalo.
This entry was posted in XHTML & CSS and tagged , , , , , , , , . Bookmark the permalink.

One Response to Estrutura Básica de uma página XHTML/HTML

  1. Pedro Diaz says:

    Muito bom este post, ideal para quem está começando e bem detalhado, parabéns!

Deixe um Comentário

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Spam Protection by WP-SpamFree