HTML: introdução
HTML:
introdução
(Elivelto Ebermam)
HTML (do inglês: HiperText Markup Language) é uma linguagem de
marcação de hipertextos. Ela é usada na construção de sites e páginas Web. O
HTML é a base, a estrutura das páginas Web.
Você já deve ter observado que diferentes tipos de arquivos tem
nomes de extensões diferentes. Por exemplo um arquivo do word tem a extensão
.doc ou .docx , um arquivo do bloco de notas tem a extensão .txt , imagens
podem ter a extensão .jpg , livros e apostilas podem vir com a extensão .pdf . Pode-se
dizer que uma página Web é um arquivo com extensão .html . Há outras extensões
como .php , porém, que entregam ao navegador de internet uma página html .
Cada tipo de extensão precisa de um programa específico para
conseguir abrir aquele arquivo. O software usado para abrir um arquivo html são
os navegadores de internet.
O que é um arquivo HTML?
É um documento que possui como conteúdo códigos na linguagem de
programação html . Ao abrir um arquivo html com o navegador de internet, ele irá
interpretar os códigos e desenhar na tela o site, como mostrado na imagem
abaixo:
Então, como fazemos uma página web?
Para fazer uma página web temos que programar, e o primeiro
passo é aprender a linguagem html . Sendo uma linguagem, ela possui regras, ou
seja, não se pode escrever de qualquer jeito. É preciso seguir um padrão de
escrita, para que o navegador web consiga entender o documento html .
A linguagem html utiliza tags e texto puro. Mas afinal o que é
uma tag ?
Tags são como recipientes [1]. Elas agem causando algum efeito
sobre as informações que estão contidas dentro delas. Existem três partes
fundamentais das tags : abertura, fechamento e as informações contidas entre a
abertura e o fechamento.
Nome da tag
|
Abertura da tag
|
Função
|
html
|
<html>
|
Inicia e termina o
documento.
|
head
|
<head>
|
Cabeçalho do
documento.
|
body
|
<body>
|
Corpo do documento.
|
p
|
<p>
|
Parágrafo.
|
O fechamento da tag é muito similar a abertura, o que muda é
apenas a introdução de uma / (barra) após o sinal de menor, como mostra a
imagem abaixo:
Para começar a montar um código html há uma regra importante: a
última tag a ser aberta é a primeira a ser fechada. Observe a figura abaixo:
Para fins ilustrativos, a abertura e o fechamento da primeira
tag é marcada com uma chave azul. O mesmo é feito com a segunda tag, porém,
usando uma chave amarela. Na imagem à esquerda, as chaves não se encontram,
dando a impressão de que a chave amarela está dentro da chave azul. E é
exatamente isso que acontece no código, a segunda tag está contida dentro da
primeira tag. Na imagem à esquerda, porém, há sobreposição das chaves. Com isso
as tags ficam intercaladas, quebrando a ideia de recipiente.
Atributos
Na abertura da tag pode haver o que chamamos de atributos. Mas
o que são esses atributos?
Um atributo é uma propriedade da tag. Assim como nós (humanos)
temos algumas propriedades como altura, peso, telefone, e-mail entre outras, as
tags também podem ter algumas propriedades específicas. Assim uma tag pode ser
escrita de forma genérica:
Inicia-se a escrita da tag da mesma forma: sinal de menor e
nome da tag. A partir desse ponto é que são inseridos os atributos. Os
atributos tem um nome e um valor, ligados por um sinal de igual (que pode ser
entendido com atribuição). É indicado colocar sempre o valor entre aspas.
Na tabela abaixo são listados alguns exemplos de atributos:
Atributo
|
Função
|
Exemplo
|
lang
|
Define a linguagem
|
<html lang=”pt-BR”> ...</html>
|
id
|
Atribui um
identificador único a tag.
|
<p
id=”você escolhe o
id”> texto </p>
|
name
|
Atribui um nome
|
<p
name=”você escolhe
o nome”> texto </p>
|
Montando o código
Podemos pensar no código html como se fosse brinquedo de
montar, onde as tags são as peças. A peça inicial é a tag <html> . Essa
tag define onde o documento começa e onde termina. Ele é o recipiente
principal.
A segunda peça é a tag <head>, responsável pelo cabeçalho
da página. Os elementos dentro do head não são visíveis na parte principal do
navegador.
A terceira peça é a tag <body>, que é responsável pelo
corpo do texto. Os conteúdo dentro da tag <body> normalmente é visível na
tela do navegador.
Essa é a base de uma página web. Agora podemos colocar
elementos dentro da tag <head> e da tag <body> . Uma das tags que
pode ser inserida dentro da tag <head> é a tag <title> . Quando
falamos em title, podemos achar que vai inserir um título lá na parte principal
da página, mas não, essa tag é usada para colocar um título na aba da página no
navegador.
Inserir apenas a tag <title> não vai fazer aparecer nada
no título da aba. Para que isso aconteça, entre a abertura e o fechamento da
tag <title> temos que colocar um texto com um título que queremos que
apareça.
Se quisermos que algo apareça na parte principal do navegador,
temos que adicionar algo entre a abertura e o fechamento da tag <body> .
Poderíamos inserir várias outras tags dentro da tag <body> , mas para
esse exemplo, vamos inserir apenas um texto.
Assim temos nosso primeiro código html . Escrevendo apenas os
códigos desse bloco temos:
<html>
<head>
<title>
Titulo da aba
</title>
</title>
</head>
<body>
Texto
</body>
<body>
Texto
</body>
</html>
Para diminuir a quantidade de linhas podemos escrever assim:
<html>
<head>
<title> Titulo da aba </title>
</head>
<body>
Texto
</body>
<body>
Texto
</body>
</html>
Se colocarmos esse código dentro de um arquivo html e abrirmos
ele com um navegador, teremos o seguinte resultado:
Na prática
Programação é algo que se aprende na prática. Por isso é
necessário treinar a codificação. Uma das maneiras de treinar é utilizando um
editor html online. Esses editores simulam a renderização de uma página web, e
você pode ver de um lado o seu código e de outro o resultado do mesmo. Algumas
coisas não irão funcionar, como o título da aba e links externos, mas a maioria
das <tags> serão renderizadas corretamente.
Na página do site W3Schools [2] há um editor online de html . O
editor é acessado através do seguinte link: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default
.
Na imagem acima, é mostrado a página que é aberta quando
acessamos o link. Note que na parte esquerda da tela já vem escrito um código
html . E é esse código que iremos modificar para o código que fizemos
anteriormente.
Note que foi mantida a primeira linha:
<!DOCTYPE html>
Essa linha é importante mantermos, por que ela diz ao navegador
que estamos usando a versão mais atual do html, que no caso é o html5.
Note também que mesmo mudando o código na parte esquerda da
página, a parte a direita permaneceu a mesma. Isso acontece porque a página não
é renderizada automaticamente. Para podermos ver o resultado do código, temos
que clicar no botão verde chamado run , que fica logo acima do código.
Agora sim, temos a
visualização correta do nosso código. Quando se faz alguma mudança no código é
necessário clicar em run novamente, para que a parte a direita seja atualizada.
Referências
[1] DUCKETT, J. HTML & CSS: design and build websites. Vol. 15. Indianapolis: Wiley, 2011.
[2] HTML Tutorial. W3Schools,
2020. Disponível em <https://www.w3schools.com/html/>.
Acesso em: 4 de mai. de 2020.
Comentários
Postar um comentário