Construindo a primeira página
Head
A tag head é a primeira seção de uma página da web XHTML. Dentro desta vão todos os elementos que devem ser carregados antes da página ser exibida, como scripts e folhas de estilo (CSS). A principal característica dessa seção é que nenhum desses elementos efetivamente é mostrado na visualização da página, eles apenas fornecem parâmetros para o conteúdo da página, como no caso das folhas de estilo CSS. Dentro da tag head também se encontram as metatags que, como o próprio nome indica, apresentam informações em metadados para finalidades específicas.
Metatags
As metatags são utilizadas para fornecer informações específicas sobre a página, como a descrição do conteúdo, palavras chave, autor, o programa no qual a página foi gerada, etc. As metatags mais comuns são:
Keywords - Palavras chave
<meta name="keywords" content="palavra, ou expressao, etc" />
Description - Descrição
<meta name="description" content="Descrição da página" />
Tipo de conteúdo e codificação
<meta http-equiv="Content-Type" content="text/html; charset=código" />
Forçar o navegador a atualizar a página
<meta http-equiv="refresh" content="numero em segundos; url=url da proxima página" />
Idioma
<meta http-equiv="content-language" content="código do idioma" />
Instruções para mecanismos de busca
<meta name="robots" content="index,follow" />
<meta name="revisit-after" content="1 days" />
Autor
<meta name="author" content="Nome" />
Informações de Copyright
<meta name="copyright" content="© ano detentor" />
Link
A tag link é um elemento vazio, assim como as metatags. As duas principais aplicações dessa tag são a de indicar um ícone para o site e especificar uma folha de estilos CSS.
<link rel="icon" href="/icone.ico" type="image/x-icon" />
<link href="/caminho/arquivo.css" rel="stylesheet" type="text/css" media="screen" />
Título
É obrigatório inserir o título em uma página da web. Por meio da tag <title> pode-se definir o título da página, que será exibido na barra de títulos do navegador.
Body
Dentro da tag body fica o conteúdo efetivamente visível da página. Nessa seção os elementos são mostrados à medida em que são carregados pelo navegador. Essa é a seção onde se passa a maior parte do tempo gasto na construção da página.
Abaixo segue uma lista de tags comuns e suas funções no desenvolvimento da página. Os elementos vazios estão destacados com a barra antes do sinal de maior que ( /> ).
| Tag | Principais atributos | Função |
| <a> | accesskey, href, name, title, target, tabindex | Cria um parágrafo |
| <abbr> | title | Explica uma abreviação |
| <acronym > | title | Explica um acrônimo |
| <address> | Usado em email do webmaster | |
| <b> | Coloca o texto em negrito | |
| <big> | Torna o texto maior | |
| <blockquote> | cite | Insere bloco de citação |
| <body> | background, bgcolor, text | Cria o corpo da página |
| <br /> | Quebra de linha | |
| <button> | accesskey, disabled, event, type, value, name | Cria um botão |
| <caption> | align | Título de tabela |
| <center> | Centraliza o conteúdo | |
| <cite> | Citações | |
| <code> | Usado para inserir códigos (XHTML, PHP, etc) | |
| <del> | Marca o texto com tachado | |
| <div> | width, height, align | Cria uma divisão em bloco |
| <em> | Aplica ênfase (itálico) | |
| <form> | action, method, width, heigth | Cria um formulário |
| <h1><h2>... | Cria um cabeçalho nível 1, 2, etc. | |
| <head> | Pré-conteúdo da página com informações. | |
| <hr> | align, noshade, size, width | cria linhas horizontais |
| <html> | xmlns | Inicia o código XHTML |
| <i> | Aplica itálico | |
| <iframe> | name, width, height, scrolling, src, align, frameborder | Cria uma seção que carrega conteudo de outra página. |
| <img /> | alt, title, src, width, height, usemap, align, vspace, hspace, border | Insere uma imagem |
| <input> | accesskey, align, checked, disabled, event, maxlength, name, size, src, readonly, tabindex, tye, value | Cria elementos de formulário, como botões, caixas de texto, checkboxes e radio buttons. |
| <ins> | Marca o texto inserido com sublinhado | |
| <li> | type, value | Cria um elemento de uma lista |
| <link /> | href, media, title, type, rel | Cria um vínculo a um arquivo externo (p.e CSS) |
| <p> | class, id, title, style | Cria um parágrafo |
| <li> | type, value | Cria um elemento de uma lista |
| <meta /> | content, http-equiv, name | Insere metadados na página (informação) |
| <noscript> | Conteúdo alternativo a um script | |
| <object> | align, border, classid, codebase, data, name, standby, type, width, heigth | Insere objeto na página (animações, vídeos, etc.) |
| <ol> | type, start | Cria uma lista ordenada |
| <option> | disabled, label, value, selected | Insere uma opção no menu suspenso |
| <p> | class, id, title, style | Cria um parágrafo |
| <param> | name, value | Insere parâmetros em um objeto |
| <pre> | Mantém a formatação original do texto (quebras de linha) | |
| <s> | Aplica tachado a um texto | |
| <script> | charset, language, src, type | Permite inserir códigos em linguagens de programação para a web |
| <select> | disabled, name, multiple, size | Cria um menu suspenso (drop down) |
| <small> | Diminui a fonte do texto | |
| <span> | class, id | Customiza a formatação de caracteres |
| <strong> | Aplica ênfase ao texto (negrito) | |
| <style> | media, type | Insere formatação CSS na página |
| <sub> | Aplica sobrescrito | |
| <sup> | Aplica subescrito | |
| <table> | align, bgcolor, border, cellpadding, cellspacing, frame, rules, width | Cria uma tabela |
| <textarea> | accesskey, disabled, name, readonly, rows, cols | Cria um bloco de texto em formulários |
| <title> | Insere o título de uma página | |
| <ul> | type | Cria uma lista não ordenadas |
Tabela de tags. Os atributos "id, class, title e style" podem ser empregados em quase todas as tags, por isso foram omitidos nos casos não essenciais.
| < URL - Uniform Resource Location | Estrutura da página > |