Estrutura do HTML e CSS

Esta é a Estrutura Básica de uma página html:

  1. <!DOCTYPE html>
  2. <html lang="pt-br">
  3. <head>
  4. <meta charset="utf-8"/>
  5. <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
  6. <title>Título da Página (Estrutura básica de uma página com HTML 5)</title>
  7. <link href="css/seu-stylesheet.css" rel="stylesheet"/>
  8. <script src="scripts/seu-script.js"></script>
  9. </head>
  10. <body>
  11. ...
  12. </body>
  13. </html>
Doctype e o elemento HTML
O Document Type Defination (DTD, ou simplesmente Doctype) é uma instrução que informa ao navegador qual é a especificação do código que está sendo usada no documento,
e deve ser declarado antes da tag <html>.Na versão anterior do HTML, a declaração do Doctype era mais extensa e difícil de decorar,
havendo a necessidade de referenciar para o navegador o arquivo DTD com as definições daquela especificação:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

 No HTML5 a inserção do Doctype foi simplificada, e a responsabilidade de buscar as definições da especificaçãofica por conta do próprio navegador:

 <!DOCTYPE html!>

 Após a declaração do Doctype, iniciamos o código HTML.
Na árvore de elementos do código,a tag principal é a <html>, que comporta todos os outros elementos filhos.

 <html lang="pt-br">

 É na tag <html> que declaramos o idioma principal do documento, através do atributo (que pode ser usado também em outras tags do documento).
Na tag <html> também podemos inserir atributos como o xmlns (XML Namespace), como quando usamos em nossa página elementos da FBML (Facebook Markup Language):

 <html lang="pt-br" xmlns:fb="http://www.facebook.com/2008/fbml">


Metadados
Os Metadados são um conjunto de informações a respeito da página e do conteúdo nela publicado. 
Essas informações são usadas pelos navegadores e user-agents em geral, sendo invisíveis para os usuários. 
Todos os Metadados ficam contidos na tag <head>:

 <head> 

 <meta charset="utf-8">

 <title>Entendo a estrutura e semântica do HTML5</title> 

 <meta name="keywords" content="HTML5, CSS3, frontend, agni"> 

 <meta name="description" content="Se você quer se aventurar com o HTML5,

 entenda aqui a sua estrutura básica, a semântica das principais marcações novas e algumas ferramentas.">

 <meta name="author" content="Edu Agni"> <meta name="robots" content="index,follow"> 

 <link rel="alternate" type="application/rss+xml" title="Feed de notícias" href="/feed">

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

 <script src="/sidecode/scripts.js">...</script>

 </head>

 Informações como Title e Description por exemplo, são usadas pelos mecanismos de busca para montar uma SERP (Search Engine Results Page).
Com a tag <link> podemos referenciar documentos que serão usados em nossa página. O atributo rel indica o tipo de documento que está sendo referenciado, 
como por exemplo o rel=”alternate”indicando uma forma alternativa de acessar o conteúdo do site via feed, ou o rel=”stylesheet”fazendo referência à folha de estilo CSS usadas para formatar a página.

 <link rel="alternate" type="application/rss+xml" title="Feed de notícias" href="/feed">
<link rel="stylesheet" type="text/css" href="/sidecode/style.css">

Scripts

 Quando trabalhamos com scripts em nossas páginas, estamos habituados a declarar o tipo de linguagem 
que estamos usando através do atributo type:

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

 A metatag Charset é usada para indicar a codificação de caracteres que a nossa página está utilizando.
No exemplo abaixo, estamos indicando uma codificação de caracteres do tipo:

  <meta charset="utf-8">

A semântica das novas marcações do HTML5

 Nas versões anteriores do HTML não haviam tags com uma semântica apropriada para cada uma dessas divisões.
Dessa forma, os desenvolvedores acabavam usando a tag <div> para todas as situações, e criando seus próprios
padrões de nomeclaturas através dos atributos id ou class. No HTML5 foram criadas diversas tags semânticas 
para indicar aos user-agents quais conteúdos estão sendo inseridos em cada uma das divisão da página, 
organizando e padronizando o desenvolvimento.




Estrutura com CSS

 Quanto ao código CSS, vamos um exemplo de organização que pode ser seguido.
Colocaremos alguns comentários para organizar a ordem das regras que iremos inserir mais tarde no HTML para estilizar:

 Esta estrutura é apenas uma sugestão. Com a sua experiência ao longo do tempo você também acaba desenvolvendo o seu próprio padrão.
Os comentários servem para dividir as regras em categorias, o que facilita alterações posteriores.
As regras serão inseridas abaixo do título de cada categoria. Explicando cada categoria:

 Padrões, nesta seção colocaremos estilos que padronizam o visual da página entre navegadores, além de outras preferências pessoais.
Cada navegador tem a sua folha de estilos CSS padrão e aplica estilos como tamanhos e margens às páginas, caso nenhum estilo exista.
Estes estilos padrão podem ocasionar diferenças de visualização (principalmente de margens internas e externas) entre navegadores diferentes.
Tipografia e Cores, esta seção iremos definir as fontes utilizadas no site, além de tamanhos, cores e margens para elementos de texto e links.
Estrutura aqui colocamos os estilos referentes à estrutura e layout do site.
Estilos específicos de seção algumas seções possuem estilos próprios apenas para elas.
Como estamos trabalhando com um site pequeno de 4 páginas, compensa colocar os estilos de cada página nesta parte do arquivo CSS.
Formulários e Tabelas Nestas seções iremos inserir estilos gerais para formulários e tabelas, respectivamente.
Classes de uso geral, esta seção iremos criar algumas classes de apoio que podem ser usadas para vários fins dentro do nosso site.


Um comentário:

Assinar: Postagens (Atom)