CMS Básico com PHP, HTML e CSS

Parte 1 - Conhecendo as nossas ferramentas de trabalho


Aula 2.1 - Que venham as etiquetas!

[voltar] [índice]

Os marcadores (também chamados de tags ou etiquetas) são essencialmente os comandos de formatação da linguagem HTML, mas não se limitam a isso. De forma geral, existem dois tipos de tag: as que vêm em pares (de abertura e de fechamento) e as auto-contidas:

<nome [atributos]> ... </nome>

<nome [atributos] />

Definindo o padrão de renderização

Todo HTML deve começar com a declaração do tipo de documento, que não é uma tag, mas uma iformação para que o navegador saiba com que tipo de documento está lidando e como renderizá-lo. No HTML5, a declaração é apenas:

<!DOCTYPE html>

A raiz do documento HTML

Todo o conteúdo do documento em HTML deve estar contido na tag <html>. Também é na tag <html> que declaramos o idioma da página, o que é feito através do atributo lang...

<html lang="pt-br">

</html>

Seções de cabeçalho e corpo do documento

O documento em HTML é composto basicamente de duas seções:

<!DOCTYPE html>
<html lang="pt-br">
<head>

    <!--
    Aqui entram mais informações sobre o documento que
    não serão exibidos no navegador, como:
    
    * título (única informação obrigatória)
    * conjunto de caracteres a ser utilizado
    * definições de estilos CSS
    * ícone de favoritos
    * entre outras...
    -->
    
</head>
<body>

    <!--
    Aqui entram todos os elementos do conteúdo que
    serão renderizados pelo navegador para exibição.
    -->

</body>
</html>

Componentes da seção <head>

<title>...</title>       - O título exibido na aba do navegador.
<style>...</style>       - Estilos CSS escritos no próprio HTML.
<link ... />             - Define a relação do documento com recursos externos.
<meta ... />             - Informações diversas sobre os dados no documento.
<script>...</script>     - Utilizado para embutir scripts executados no navegador.
<noscript>...</noscript> - Define o que exibir caso não seja possível executar scripts.

A seguir...