O que é HTML
Um documento de hipertexto é uma página que pode ser atrelada a outros arquivos, como imagens, vídeos e até mesmo outras páginas. A Linguagem de Marcação de Hipertexto, HTML, é uma linguagem desenvolvida para marcar e identificar partes de um documento de hipertexto.
Criando uma página com HTML
Para criar a sua primeira página web com HTML você precisará adicionar um conteúdo a ela, então, abra um editor de texto simples, como o Bloco de Notas, e adicione:
Website do Thiago Dini
Olá, Mundo! Esse é o Website do Thiago Dini.
Salve o arquivo:
- Acesse no menu do editor texto a opção arquivo e salvar como
- Marque na caixa de seleção a opção todos os formatos
- Salve o arquivo com o nome pagina.html
Abra o arquivo que salvou para ver o resultado. Provavelmente ele abrirá no navegador padrão do seu computador exibindo o conteúdo em uma só linha, pois quando salvamos o arquivo na extensão .html nós apenas informamos ao computador que ele é uma página web, mas por enquanto ele é apenas um texto, sem os poderes da marcação.
Definindo o conteúdo com a marcação
Para definir conteúdos como títulos, parágrafos, listas, tabelas e outros itens de uma página web, é preciso utilizar a marcação. A marcação é normalmente realizada por um par de tags que envolve o conteúdo e especifica o seu tipo através de seu nome.
A estrutura de uma marcação
Uma tag, quando usada no início da marcação de um conteúdo, é composta pelo sinal de menor que (<), seguido do nome da tag e o sinal de maior que (>). Para o fim da marcação do conteúdo a tag apresenta uma barra (/) após o sinal de menor que (<). Por exemplo:
<paragráfo>Conteúdo envolvido pela marcação</paragráfo>
Tags também podem estar presentes dentro de outras tags, exemplo:
<paragráfo>Conteúdo <itálico>envolvido</itálico> pela marcação</paragráfo>
Os atributos de uma marcação
Podemos atribuir informações adicionais em uma tag através dos seus atributos, compostos por nome do atributo, sinal de igual (=) e seu valor (texto). Por exemplo:
<paragráfo idioma=português>Conteúdo <itálico>envolvido</itálico> pela marcação</parágrafo>
Utilizando as tags
Existem dezenas de tags que podem ser utilizadas no desenvolvimento de um website, mas para o seu primeiro website vamos focar em algumas bem simples, são elas:
| Tipo | Nome da tag | Exemplo de uso |
|---|---|---|
| Título | title | <title>Título do website</title> |
| Cabeçalho de nível 1 | h1 | <h1>Cabeçalho de nível 1</h1> |
| Cabeçalho de nível 2 | h2 | <h2>Cabeçalho de nível 2</h2> |
| Parágrafo | p | <p>Texto em parágrafo.</p> |
| Negrito | b | <b>Texto em negrito.</b> |
| Itálico | i | <i>Texto em itálico.</i> |
| Link | a | <a>Texto com link.</a> |
Agora que já conhecemos algumas das tags mais utilizadas, vamos editar a nossa página para descobrir como ela ficará após as devidas marcações. Volte para o arquivo que está aberto no editor de texto simples e atualize-o da seguinte maneira:
<h1>Website do Thiago Dini</h1>
<p>Olá, Mundo! Esse é o <b><i>Website do Thiago Dini</i></b>.</p>
Salve as alterações no arquivo, volte ao navegador que está com a página aberta e atualize o website. Ele provavelmente estará com o título e parágrafo definidos, além de parte do texto em negrito e itálico.
Complementando os arquivos com o hipertexto
Como dito anteriormente, um documento de hipertexto é uma página que pode ser atrelada a outros arquivos, logo, vamos complementar o nosso primeiro website.
Referenciando o hipertexto com as hiperligações
A conexão entre as páginas é feita através das hiperligações, que são popularmente conhecidas como links. A tag de marcação para um link é a a, mas para atribuir o destino desse link precisaremos do atributo hypertext reference, o href. Por exemplo:
<a href="destino">Link</a>
Adicionando imagens ao documento
Um documento em HTML pode exibir imagens diretamente na página, uma funcionalidade muito útil no hipertexto. Para adicionar esse tipo de conteúdo nós utilizamos a tag de imagem, a img, juntamente do atributo resource, o src, que serve para informar o caminho da imagem. Como a tag de imagem não precisa envolver outro conteúdo, ela não precisa ser fechada. Por exemplo:
<img src="imagem.jpg">
Já que sabemos como utilizar a tag de imagem, vamos adicionar uma em nossa página. Volte para o arquivo que está aberto no editor de texto simples e atualize-o da seguinte maneira:
<img src="thiagodini.jpg">
<h1>Website do Thiago Dini</h1>
<p>Olá, Mundo! Esse é o <b>Website do <i>Thiago Dini</i></b>.</p>
<a href="https://twitter.com/thiagodini">Me siga no Twitter</a>
Salve as alterações no arquivo e atualize a página do website no navegador. Ele provavelmente estará da mesma forma que antes, visto que nós ainda não salvamos a imagem que está atribuída com o src da tag img. Vamos resolver isso salvando a imagem que queremos adicionar:
- Acesse o site thiagodini.com
- Clique com o botão direito do mouse e escolha salvar imagem
- Salve-a como ‘thiagodini.jpg’ no mesmo lugar que salvou a sua página
Abra o website e, se tudo tiver dado certo, você terá criado uma página web com foto e texto para o seu website.
Finalizando
A sua página está pronta, que tal dar um título para a ela? Para isso adicione a tag title, deixando o seu hipertexto da seguinte forma:
<title>Meu primeiro website</title>
<img src="thiagodini.jpg">
<h1>Website do Thiago Dini</h1>
<p>Olá, Mundo! Esse é o <b>Website do <i>Thiago Dini</i></b>.</p>
<a href="https://twitter.com/thiagodini">Me siga no Twitter</a>
Sugestões
- Teste refazer o exercício com as suas informações, para reforçar o aprendizado e treinar a resolução de possíveis problemas
- Pesquise novas tags e tente descobrir coisas novas com suas infinitas possibilidades
- Espie o código de outros sites, clicando com o botão direito do mouse e acessando visualizar código fonte