Curso de HTML – Aula 1: Estrutura básica de páginas web

Esta é a primeira aula do Curso de Desenvolvimento Web com HTML e nela veremos inicialmente um pouco de conceitos e fundamentos na criação de websites para, em seguida, conhecermos a estrutura básica de uma página web e realizarmos o primeiro exercício, o famoso “Olá mundo!”.

Caso ainda não tenha lido, recomendamos que leia antes o artigo de introdução: Curso de Desenvolvimento Web com HTML

Curso de Desenvolvimento Web com HTML

Histórico

Tim Berners-LeeO conceito de web como conhecemos hoje foi criado por Tim Berners-Lee em 1989 quando ele trabalhava na seção de Computação da Organização Europeia de Pesquisa Nuclear na Suíça. Na época ele pesquisava um método que possibilitasse aos cientistas do mundo inteiro compartilhar eletronicamente os documentos. Então, em 1990, ele criou o protótipo de um navegador chamado Nexus, um protocolo para transmitir arquivos denominado HTTP e uma linguagem de marcação de texto chamada HTML.

 

A linguagem HTML

Em essência, todos os sites que você já conhece são arquivos codificados em uma linguagem específica e estão armazenados em um servidor web. Este servidor, nada mais é do que um computador conectado à internet que aguarda ser consultado para disponibilizar os arquivos (páginas web) que ele armazena.

Para consultar as páginas web em um servidor, precisamos de um programa que atenda uma série de regras (protocolos) e, principalmente, entenda a linguagem utilizada para escrever essas páginas. Alguns exemplos desse tipo programa, genericamente chamado de browser ou navegador, são: Internet Explorer, Mozila Firefox, Google Chrome, etc.

Navegadores de internet

Todos os navegadores de internet citados acima possuem a capacidade de interpretar o HTML (abreviação para a expressão inglesa HyperText Markup Language) que é uma linguagem de marcação de texto utilizada para produzir páginas na web. Basicamente, o HTML estabelece como um determinado elemento deve ser visualizado, não sendo, portanto, uma linguagem de programação e sim, uma linguagem de formatação de conteúdo.

Resumindo, um arquivo HTML que está armazenado em um servidor web é formado essencialmente por texto (conteúdo do site) e tags. Sendo assim, quando o navegador recebe o arquivo e “lê” o HTML, ele interpreta todas as tags e atribui a formatação no conteúdo antes de exibir na tela para o usuário.

Processo do Navegador e Servidor Web

 

Conhecendo as tags




A linguagem de marcação de texto HTML baseia-se em etiquetas (tags) com valor semântico, englobando trechos de conteúdo dotando-os de sentido e valor. Essas tags, nada mais são do que comandos de texto escrito entre os sinais de menor “<” e maior “>” que informam ao navegador como deve ser apresentado o conteúdo. Salvo algumas exceções que veremos mais adiante, a tags devem ser escritas aos pares e por essa razão, costumamos dizer que abrimos e fechamos uma tag.

Para escrever uma linha de código HTML precisamos de uma tag de abertura e uma de fechamento. Como você pode notar no exemplo abaixo, a diferença entre elas é que na tag de fechamento existe uma barra “/”.

Exemplo de tag:

<b> Conteúdo a ser Formatado </b>

 

A tag <b> informa ao navegador que todo o texto colocado entre <b> e </b> deve ser mostrado em negrito (O comando “b” é uma abreviação para “bold” – negrito).

Como já disse anteriormente, toda regra tem sua exceção e a exceção aqui no HTML é que algumas tags não “trabalham” em duplas e por essa razão, a abertura e o fechamento se dá na mesma tag. Segue abaixo um exemplo:

Exemplo de tag isolada:

<br />

 

No exemplo acima a tag <br /> informa ao navegador para realizar um pulo de linha, ou seja, dar um espaço entre dois parágrafos. Repare que esta tag não requer um conteúdo para ser processado e justamente por essa razão que não há uma tag de fechamento, mas sim, outra forma de referenciar o fechamento com um espaço e “/” antes do sinal de maior.

 

Estrutura de uma página HTML

Um site, em geral, é formado por um ou mais páginas HTML que, por sua vez, é formado por um conjunto de tags atrelados ao conteúdo do site, seja ele em forma de texto, imagens, vídeos, etc. Para escrevermos um página html, por mais simples que seja, precisamos utilizar no mínimo as seguintes tags abaixo:

<html> é a tag inicial de qualquer documento no formato html;

<head> é uma seção da página que apresenta informações gerais;

<title> é a tag que informa o título da página na barra do navegador;

<body> é a seção principal, na qual será escrito o conteúdo da página.

Com o conteúdo apresentado até aqui e com a tag <p> utilizada para criar parágrafos, já podemos escrever a nossa primeira página em HTML. Para isso, observe o modelo abaixo e logo em seguida os comentários de cada linha do código.

Modelo básico de uma página HTML

1 - <html>   
2 - <head>
3 -     <title>Título da minha página</title>
4 - </head> 
5 - <body>
6 -     <p>Olá Mundo! Esta é minha primeira página web</p>
7 - </body> 
8 - </html>

Obs.: Os números são apenas para efeito de explicação, não enumere seu código quando estiver criando suas páginas.

  • Na linha 1 abrimos a tag <html> que informa ao navegador que esta é uma página html;
  • Na linha 2 abrimos a tag <head> na qual ficará o cabeçalho da página;
  • Na linha 3 temos a tag <title> que deverá sempre estar dentro da tag <head>. Observe que abrimos com a tag <title>, colocamos o título da página e, em seguida, fechamos com a tag </title>;
  • Na linha 4 fechamos a tag <head> que abrimos na linha 2;
  • Na linha 5 abrimos a tag <body> que conterá todo o conteúdo da nossa página;
  • Na linha 6 abrimos a tag <p> para colocarmos o texto “Olá Mundo! Esta é minha primeira página web” e logo em seguida fechamos o parágrafo com a tag </p>
  • Na linha 7 fechamos a tag <body> que abrimos na linha 5
  • Na linha 8 finalizamos o documento fechando a tag <html> que abrimos na linha 1.

 

PRIMEIRO EXERCÍCIO: Olá Mundo!

Falamos no início desse curso sobre servidores que armazenam as páginas na internet, mas, para reproduzirmos o exemplo anterior e os exercícios que faremos aqui, não precisaremos de nada sofisticado, precisaremos apenas de um navegador e um simples editor de texto como, por exemplo, o Bloco de Notas de Windows.

Mais adiante, em outro curso, veremos com detalhes a questão de servidor web, mas, por enquanto, já temos o suficiente para criar nossa primeira página web. Vamos lá então!

 

1º passo

Abra o Bloco de Notas do Windows ou qualquer outro editor de texto de sua preferência; apenas certifique-se de que ele consiga criar um arquivo de texto simples com uma extensão “.html”.

 

2º passo

Assumindo que você esteja usando o Bloco de Notas, digite no programa o modelo básico de página HTML estudado anteriormente exatamente como mostra a imagem abaixo:

HTML básico no Bloco de Notas

 

3º passo

Depois de digitado o código HTML no Bloco de Notas, precisamos salvar o arquivo no formato “.html” para visualizarmos no navegador. Para isso:

  • No Bloco de Notas clique no menu Arquivo e escolha a opção “Salvar como…”;
  • Conforme mostra a imagem abaixo, escolha “Todos os arquivos” na opção Tipo; digite “olaMundo.html” na opção Nome e selecione a área de trabalho para salvar o arquivo.

HTML básico no Bloco de Notas

 

4º passo

Encontre o arquivo “olaMundo.html” na área de trabalho; clique com sobre com o botão direito do mouse; selecione a opção “Abrir com…” e clique em algum navegador instalado no seu computador (Internet Explorer, Firefox ou Chrome).

 

5º passo

Caso você tenha seguido corretamente todos os passos descritos aqui, você deverá ver abrir o seu navegador com um conteúdo semelhante ao da imagem abaixo:

Primeira página "Olá Mundo"

 

Parabéns! Você criou a sua primeira página web no nosso curso de HTML. Minha sugestão é que agora você altere o conteúdo desse exercício para que compreenda melhor o funcionamento da linguagem HTML. Em breve, com o conteúdo das próximas aulas, você incrementará esse exercício tornando uma página web muito mais interessante.

Continue este curso em: Aula 2: Cabeçalhos, listas e outras tags

Coordenador de curso na Etec de Itapira, pós-graduado em desenvolvimento de sistemas web e professor nos cursos de Administração e Técnico em Informática para Internet. Nerd por vocação e blogueiro por opção, é autor do livro “Diário de um Blogueiro” e dos blogs Neurônio 2.0 e Hiperbytes.

1 COMENTÁRIO

DEIXE UMA RESPOSTA

Please enter your comment!
Please enter your name here