Para os que desejam desenvolver páginas web é indispensável conhecer as linguagens HTML e CSS, ambas formam a base do desenvolvimento web. Lembrando que os padrões W3C (World Wide Web Consortium) serão adotados no decorrer do artigo/curso.
De acordo com os padrões W3C, o HTML ou XHTML é utilizado para a estrutura da página e o CSS para o estilo e layout, incluindo as WebFonts (fontes padrões). Iniciaremos então com o básico, (X)HTML.
Mas o que é (X)HTML?
O (X)HTML (HyperText Markup Language) é uma linguagem de marcação, composta por tags e textos simples. Para o desenvolvimento de arquivos (X)HTML é necessário apenas um editor de texto simples (bloco de notas do Windows, por exemplo) e um navegador para a visualização e interpretação do arquivo (os principais são Firefox, Chrome e IE).O que são tags?
Tag significa rótulo, marcação ou rótulo. Podemos utilizar o exemplo do nosso cotidiano, usamos rótulos em produtos ou arquivos para nos orientar em algo. No arquivo HTML não é diferente, são um conjunto de palavras-chave associadas a um conteúdo que orienta o navegador a interpretar a informação (<tag>conteúdo</tag>). Comumente elas aparecem em pares como: <p> e </p>, a primeira sendo chamada de abertura e a segunda de fechamento, informando ao browser o final da marcação.Abaixo vemos um exemplo de código básico (X)HTML:
- <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - <html>
- <head>
- <title>HTML padrão</title>
- </head>
- <body>
- <h1>Cabeçalho</h1>
- <p>Um parágrafo</p>
- </body>
- </html>
- Todo arquivo HTML deve sempre colocar em primeiro lugar a declaração <!DOCTYPE> onde é apresentado o tipo e a versão do HTML ao navegador, auxiliando-o na exibição correta da página web;
- Entre as tags <html> e </html> fica toda a descrição da página;
- Entre as tags <head> e </head> há todas as informações sobre o documento HTML, como o elemento <title>, que mostra um título na janela superior do browser;
- Entre as tags <body> e </body> está contido todo o corpo da página. No exemplo colocamos um cabeçalho <h1> e um parágrafo <p>.
