Documentos HTML consistem em elementos que são marcados por meio de tags. Vocês reconhecem as tags pelas cunhas angulares. A maioria dos elementos HTML são marcados por uma tag de abertura e uma tag de fechamento. O que está entre eles é chamado de escopo.
Um exemplo:
<h1>PSD-Tutorials.de – seu portal de gráficos, web e aprendizado</h1>
Através desta sintaxe, é escrita uma primeira ordem de cabeçalho no documento. A tag de abertura <h1> informa o navegador que se trata de um cabeçalho desse tipo. A tag de fechamento </h1> encerra o cabeçalho. Vocês reconhecem as tags de fechamento por uma cunha angular de abertura, seguida de uma barra inclinada </.
Uma pergunta surge no que diz respeito à grafia dos nomes dos elementos: Como deveria ser a questão de maiúsculas e minúsculas? Como já foi mencionado, o foco desta série está no HTML5. Aqui, vocês realmente podem escolher entre maiúsculas e minúsculas. Pessoalmente, prefiro consistência em minúsculas e irei manter isso nesta série. Em princípio, após o HTML5, as seguintes coisas seriam corretas:
<h1>PSD-Tutorials.de – seu portal de gráficos, web e aprendizado</h1> <H1>PSD-Tutorials.de – seu portal de gráficos, web e aprendizado</H1> <h1>PSD-Tutorials.de – seu portal de gráficos, web e aprendizado</H1>
Elementos que são abertos também devem ser fechados. Portanto, se vocês definirem um <h1>, devem fechá-lo após encerrar a definição do cabeçalho com </h1>. Embora em HTML5 existam exceções como entradas de lista e parágrafos, sobre isso falaremos mais tarde.
No HTML, também existem as chamadas tags independentes. Essas são constituídas apenas por uma tag, não por uma tag de abertura e fechamento. Um exemplo típico disso é <br />.
Esta é uma linha.<br /> Esta é outra linha.
Esta tag <br /> define uma quebra de linha.
Tais tags vazias geralmente são fechadas com barra inclinada, embora em HTML5 isso não seja obrigatório. Aqui também seria válida a seguinte forma:
<br>
Ao longo desta série, vocês irão conhecer mais sobre essas tags independentes.
Aninhamento de Elementos
Por sinal, os elementos HTML podem ser aninhados. Imaginem que querem destacar uma passagem em itálico dentro de um cabeçalho. Para uma representação em itálico, o elemento i é utilizado.
<h1>PSD-Tutorials.de – <i>seu portal de gráficos, web e aprendizado</i></h1>
Ao aninhar, prestem atenção à ordem correta. O elemento aberto é fechado por último. No caso presente, isso significa que é o elemento h1 que é fechado por último.
Utilização de Atributos
Dentro de tags de abertura ou tags independentes, atributos podem ser definidos. Esses atributos podem atribuir propriedades adicionais aos elementos. Em tempos antigos de HTML, muitos atributos eram atribuídos aos elementos. Isso se devia simplesmente à mistura entre estrutura e design. Por exemplo, definições de cor eram atribuídas diretamente ao elemento HTML através de um atributo correspondente. Atualmente, - também graças ao CSS - é possível uma separação rigorosa entre design e estrutura, o que deve ser seguido. Por isso, existem apenas alguns atributos que são utilizados.
Um atributo importante é o id. Através deste atributo, um nome único pode ser atribuído a um elemento HTML, o que permite que ele seja acessado posteriormente através de CSS ou JavaScript, por exemplo.
<h1 id="head">PSD-Tutorials.de – seu portal de gráficos, web e aprendizado</h1>
Para atribuir um atributo, é adicionado um espaço após o h1. Em seguida, segue-se pelo nome do atributo, que geralmente é escrito em minúsculas. Após o nome do atributo vem o sinal de igual. Entre as aspas duplas, segue-se o valor do atributo.
Também é possível atribuir vários atributos a um elemento. Por exemplo, é bastante comum definir uma classe e uma ID para um elemento. Um exemplo disso: Através do id, o cabeçalho é identificado de forma única. A classe, por sua vez, serve para classificar o cabeçalho em uma categoria específica. Assim, pode-se determinar que todos os elementos atribuídos à classe blue sejam exibidos em azul. (Mais sobre este tema de CSS e cores será discutido mais detalhadamente posteriormente).
<h1 id="head" class="blue">PSD-Tutorials.de – seu portal de design, web e aprendizado</h1>
Os atributos são separados por um espaço em branco neste caso.
Validar o código
Vocês já aprenderam algumas regras de sintaxe básicas. Especialmente no início, ao aprender HTML, é importante seguir essas regras. O que vocês aprenderem de errado, será difícil de desaprender. Portanto, sempre verifiquem ou validem seu código HTML quanto a correção. Vocês não precisam fazer isso sozinhos. Existem ferramentas online específicas para isso. Vocês podem encontrar um validador, por exemplo, em http://validator.w3.org/.
A melhor opção é mudar diretamente para a aba Validate by direct Input. Aqui vocês podem colar diretamente o código HTML a ser verificado. Certifiquem-se de colar o código completo do arquivo, incluindo a declaração DOCTYPE.
Para testar o validador, cole o seguinte no campo de texto e clique no botão Validar.
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> <h1>PSD-Tutorials.de – seu portal de design, web e aprendizado</h1> </body> </html>
O resultado deve se parecer com o seguinte:
Tudo está correto aqui. (Nesse caso, vocês não precisam se preocupar com as duas advertências). Se a mensagem This document was successfully checked as HTML5!, aparecer, está tudo certo. Mas como fica em caso de erro? Para isso, vocês podem introduzir intencionalmente um erro de sintaxe.
<h1 id=head">PSD-Tutorials.de – seu portal de design, web e aprendizado</h1>
A aspa inicial em head foi esquecida aqui. Se vocês validarem a sintaxe novamente, o erro será detectado.
O validador emitirá uma mensagem correspondente. Vocês podem verificar exatamente o que deu errado na parte inferior da janela.
Aqui é descrito de forma clara o que realmente deu errado.
Linha 8, Coluna 12: " in an unquoted attribute value. Prováveis causas: Atributos juntos ou uma string de consulta de URL em um valor de atributo não citado.
<h1 id=head" >PSD-Tutorials.de</h1>
Vocês podem ver diretamente em qual linha houve uma entrada inválida e corrigi-la. Portanto, o validador os ajuda a criar um código HTML limpo. Sempre deveriam validar seu código. Pois os navegadores frequentemente exibem o código HTML corretamente, mesmo que a sintaxe esteja incorreta. No entanto, em outros navegadores onde vocês não testam suas páginas, a situação pode ser completamente diferente.
