Nesta primeira aula sobre HTML vamos aprender a estrutura básica de uma página, desde as mais simples as mais complexas.
Na postagem anterior eu mostro como instalar o gedit, editor de textos que será usado para trabalhar com HTML:
Abra o gedit, essa é sua página inicial:
Antes de começar, vamos salvar o nosso
arquivo que será base para as próximas aulas. Na barra de menu clique em
ARQUIVO e em seguida SALVAR COMO:
Em NOME digite um nome para o seu arquivo e finalize com .html que é a extensão para ser aberta nos navegadores. Escolha também um local para ser salvo e clique em SALVAR:
Lembrando que o HTML é desenvolvido através de tag’s(<>) que geralmente possuem uma abertura e um fechamento seguindo esse padrão:
Abertura: <nome_da_tag atributos>
Fechamento: </nome_da_tag>
Veja como fica a estrutura básica no gedit e depois vamos detalhar linha por linha:
<!DOCTYPE html>: o doctype sempre deve ser a primeira linha do seu código. Ele NÃO é uma tag e sim uma instrução para mostrar aos navegadores que o código ali presente é um HTML.
<html lang="pt-br"> </html>: é a tag onde será apresentado todo o seu código, sempre devendo começar e finalizar por ela. Apresenta o atributo lang, que define o idioma do seu documento.
<head> </head>: tag responsável pelo cabeçalho do seu documento.
<title> </title>: tag que define o título de sua página que irá aparecer na aba do seu navegador.
<meta charset="utf-8">: Essa tag é muito importante pois faz sua página reconhecer acentuação nos textos. O atributo charset garante a compatibilidade com o padrão latino americano dos caracteres. OBS: Note que essa tag não possui fechamento(</>)
<body></body>: tag que representa o conteúdo visível da sua página.
Abra agora o seu arquivo .html com o navegador de internet:
Note que teremos uma página em branco, o que era esperado já que não adicionamos nada dentro da tag body. O que podemos verificar é o título na aba do navegador que acrescentarmos na tag title e o caminho do arquivo na barra de endereço.
Veja o vídeo sobre a postagem:
Nenhum comentário:
Postar um comentário