sexta-feira, 11 de setembro de 2020

HTML #1: ESTRUTURA BÁSICA

 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:

 PRIMEIROS PASSOS COM HTML

html-estrutura-basica


 

 

 



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