Home Programação Tutorial de introdução a HTML – Aula 1

Bem-vindos à primeira aula de Introdução a HTML! Nestes pequenas sessões vamos procurar, através de detalhados exemplos, despertar a curiosidade do utilizador para este tipo de linguagem com que nos deparamos sempre que abrimos o nosso browser.

Para a a realização deste tutorial, o utilizador necessita simplesmente de um editor de texto e de um browser. Nas capturas de ecrã mostradas, foi utilizado o Sublime Text para fazer o código, porém um simples bloco de notas é suficiente. É de notar que ao longo destas aulas vamos introduzir vários comandos que obviamente não estamos à espera que o utilizador os decore todos. A medida que vamos praticando acabamos sempre por fixar os mais comuns. Quanto aos outros, temos sempre a Internet para os pesquisar quando precisamos deles 🙂

Nesta primeira aula, vão ser apresentados os comandos básicos do HTML e vamos exemplificá-los com a criação de um pequena página.

 

Sobre o HTML…

O HTML (HyperText Markup Language) é uma linguagem de formatação destinada à elaboração de páginas com hiper-texto. Hoje em dia, a principal aplicação do HTML é a criação de páginas na Web, formatando ficheiros de texto com bases em comandos denominados por tags.

Estas tags são sempre inseridas entre os sinais de menor e maior como vamos ver nos exemplos seguintes.

 

Uma primeira página

Vamos criar um ficheiro vazio e vamos dar-lhe o nome de index.html. Porquê? Quando estamos a vizualizar a página no nosso disco, o nome que lhe damos é indiferente. Contudo, quando trabalhamos com servidores (onde estão alojadas as páginas na Internet), por defeito, eles identificam a página inicial pelo nome index.

Comecemos por copiar este código simples:

Código

Código <head>

Se guardarmos e abrirmos esse mesmo ficheiro com o nosso browser, vamos obter o seguinte resultado:

Exemplo

Exemplo <head>

A nossa página está vazia como seria de esperar. No entanto, já podemos concluir que o texto dentro da tag <title>, que por sua vez surge dentro da tag <head> corresponde ao cabeçalho da nossa página.

Vamos olhar agora um bocado para o esqueleto deste código. A primeira linha não afeta em si o conteúdo da página, contudo, como hoje em dia os browsers são usados para ler vários tipos de ficheiros, a tag <!DOCTYPE html> indica ao browser que está perante um ficheiro html e não um pdf ou outro. Em seguida temos o início do ficheiro propriamente dito com a tag <html> e que só acaba quando aparece no código o fecho </html>.

Dentro do <html> temos duas divisões:

  • <head> – contém o código relativo ao cabeçalho da página;
  • <body> – contém o código relativo à área onde reside quase todo o conteúdo visível da página.

Vamos agora alterar o nosso código:

Código

Código <body>

Exemplo

Exemplo <body>

Acrescentámos uma frase na <body> e obtivemos um resultado relativamente esperado. Notem que ao invés de usar o ‘ç’ e o ‘ã’ foram usados os códigos ‘&ccedil’ e ‘&atildeo’ respetivamente pois se estes carateres fossem escritos diretamente, o mais provável era obtermos outros carateres estranhos no sítio deles. Os códigos para carateres especiais de HTML facilmente se encontram na Web com uma simples pesquisa.

Vamos desta vez realizar a seguinte alteração:

Código

Código <enter> errado

Código

Código <enter> errado

Inesperadamente, a frase “Bem-vindos!” não se encontra na linha seguinte como deveria estar. Porque é que isto ocorre? Em HTML, tantos os espaços como as mudanças de linha processam-se de forma diferente. Todo o ficheiro é interpretado continuamente e, embora não seja aconselhável, é possível escrever um ficheiro inteiro numa única linha.

Para adicionarmos um parágrafo, devemos utilizar a tag <br> (de break)

Código

Código <br>

Exemplo

Exemplo <br>

Segundo a mesma lógica, sempre que quisermos indicar mais do que um espaço, devemos usar o comando ‘&nbsp’ (de non-breaking space). Note que o exemplo abaixo introduz quatro espaços por o primeiro espaço (que procede “Lilireviews”) é reconhecido pelo HTML:

Código

Código &nbsp

Exemplo

Exemplo &nbsp

Chegamos ao fim da primeira parte deste tutorial de introdução a HTML. Na próxima sessão iremos ver como adicionar hiperligações à nossa página e algumas noções sobre a formatação de texto. Alguma dúvida e só comentarem em baixo 😉

1 Comentário a este artigo

Deixar um comentário

Este site utiliza o Akismet para reduzir spam. Fica a saber como são processados os dados dos comentários.

Outros Artigos