3.1 Sintaxe do HTML

O HTML é um conjunto de tags.

As tags são os elementos a mais que escrevemos usando a sintaxe <nomedatag> ...</nomedatag>

 

 

Algumas tags podem receber atributos dentro de sua definição. São parâmetros usando a sintaxe de nome=valor. Para definir uma imagem, por exemplo, usamos a tag e, para indicar qual imagem carregar, usamos o atributo src:

 

 

A tag img não possui conteúdo por si só. Nesses casos, não é necessário fechar a tag.

As tags são os elementos da página que escrevemos usando a sintaxe <nomedatag> ...</nomedatag>

 


3.2 Sintaxe do HTML

Na estrutura do documento (.html) inserimos uma tag <html>. Dentro dessa tag, é necessário declarar outras duas tags: <head> e <body>.

 

 

A tag <head> contém informações sobre o documento que são importantes apenas para o browser. São informações que não são exibidas ao utilizador.

Dentro do <head> coloca-se a tag <title> para especificar o título do documento, que normalmente é exibido na barra de título da janela do browser ou no separador.

 

 

Outra configuração muito utilizada, principalmente em documentos cujo conteúdo é escrito num idioma como o português, e que tem caracteres como acentos e cedilha, é a configuração da codificação de caracteres, chamado de encoding ou charset. Podemos configurar qual a codificação que queremos na tag <meta>. Um dos valores mais comuns usados hoje em dia é o UTF-8, também chamado de Unicode. Há outras possibilidades, como o latin1, muito usado antigamente.

 

 

A tag <body> contém os conteúdos (tags) da página, ou seja o que é exibido ao utilizador.

 

 

Nesse exemplo, usamos a tag <h1>, que indica um título.

 


3.3 Tags HTML (que são escritas no body)

Títulos (heading>

As tags de heading são tags de conteúdo e vão de <h1> a <h6>, seguindo a ordem de importância, sendo <h1> o título principal, o mais importante, e<h6> o título de menor importância.

 

 


Parágrafos

 

 

Quando queremos dar uma ênfase diferente a texto, podemos utilizar as marcações de ênfase. Podemos deixar um texto "mais forte" com a tag <strong> ou deixar o texto com uma "ênfase acentuada" com a tag <em>. Também há a tag <small>, que diminui o tamanho do texto.

 

 


Imagens

 

A tag <img> define uma imagem numa página HTML e necessita de dois atributos preenchidos: src e alt. O primeiro aponta para o local da imagem e o segundo, um texto alternativo para a imagem caso essa não possa ser carregada ou visualizada.

O HTML 5 introduziu duas novas tags específicas para imagem: <figure> e <figcaption>. A tag <figure> define uma imagem com a conhecida tag <img>. Além disso, permite adicionar uma legenda para a imagem por meio da tag <figcaption>.

 

 


Hiperlink

 

A tag <a> define um hiperlink, que é usado para aceder a outras páginas.

O atributo mais importante do elemento <a> é o atributo href, o que indica o destino do link.

 

 


3.4 Organização dos Arquivos (páginas) de um Website

 

Existem algumas recomendações quanto à organização dos arquivos de um site. Não há nenhum rigor técnico quanto a essa organização. Como um site é um conjunto de páginas Web sobre um assunto, empresa, produto ou qualquer outra coisa, é comum todos os arquivos de um site estarem dentro de uma só pasta e, assim como um livro, é recomendado que exista uma "capa", uma página inicial que possa indicar aos utilizadores quais são as outras páginas que fazem parte desse projeto e como pode aceder às páginas, como se fosse o índice do site. Esse índice, não por coincidência, é uma convenção adotada pelos servidores de páginas Web. Se desejamos que uma determinada pasta seja servida como um site e dentro dessa pasta existe um arquivo chamado index.html. Esse arquivo será a página inicial a menos que alguma configuração determine outra página para esse fim. Dentro da pasta do site, no mesmo nível que o index.html, é recomendado que sejam criadas mais algumas pastas para manter separados os arquivos de imagens, as folhas de estilo CSS e os scripts. Para iniciar um projeto, teríamos uma estrutura de pastas como a demonstrada na imagem a seguir:

 

 

Muitas vezes, um site é servido por meio de uma aplicação Web e, nesses casos, a estrutura dos arquivos depende de como a aplicação necessita dos recursos para funcionar corretamente.

 


3.5 A minha primeira página em HTML

 

Ver Página