Começando agora ou também esqueceu como montar a estrutura básica?
Sem problemas, vamos nessa!
HTML
HTML é a abreviação de Hypertext Markup Language ( em português Linguagem de Marcação de HiperTexto ). conhecendo o significado fica bem mais simples entender o seu uso.
O HTML serve pra estruturar e organizar todo o seu código “marcando e separando” cada tipo de conteúdo, para que você possa posteriormente personalizar!
O documento HTML possui uma estrutura básica. Está estrutura sempre será organizada da mesma forma, mudando apenas alguns elementos conforme a necessidade do que você estiver desenvolvendo.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Título da página</title>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
Aqui vai o código HTML que fará seu site aparecer.
</body>
</html>O HTML quase sempre é o seu primeiro contato com a programação, e ele é muito simples de se compreender.
As Tags são um conjunto de caracteres que formam um elemento e que possuem uma estrutura própria. As Tags iniciam com < (“menor que”), e terminam com > (“Maior que”). ou seja, a tag p que marca um paragrafo para o navegador, fica assim <p>.
Algumas tags precisam do seu fechamento e outras não necessitam pois possuem um auto fechamento (Self-closing). Uma tag de fechamento, é a primeira ocorrencia, da mesma tag que você iniciou, porém ela necessita ter uma / (“barra”) antes do seu nome. ou seja para marcar o fim de um paragrafo, fica assim </p>.
Mas porque, é necessário utilizar uma tag de fechamento?
Alguns elementos do HTML precisam ter o seu fechamento mencionado, para que o navegador ou interpretador de HTML, possa compreender o que é aquela parte do código; se você está montando a estrutura de um site, você sabe onde vai ficar cada elemento. Mas o navegador, precisa saber o que é para fazer a diferenciação de cada tipo de elemento e possa exibir e executar da melhor forma.
Se ao montar um parágrafo em seu site, você deve apontar o seu inicio e o seu fim!
<p>Este é um parágrafo</p>Sabendo disso, vamos rever a estrutura do HTML e entender um pouco mais sobre as tags da estrutura básica
<!DOCTYPE html>
Todo documento HTML, deve ser SEMPRE iniciado com <!DOCTYPE html> pois é ele que indica para o interpretador, o tipo de documento (DOC TYPE) e como todo o conjunto deve ser tratado. quando informado somente html, indica que é a ultima versão.
<html>
Representa a raiz do documento, serve como um container que vai englobar todo os outros elementos do HTML e essa tag, possui um atributo que serve para informar o idioma do conteúdo (lang=”pt-br”)
<head> (Cabeça)
Contém as todas as informações do documento que serão apenas interpretadas pelo navegador e não serão exibidas no conteúdo final, como o título da página, links para CSS entre outros
<meta>
Define os metadados, informações sobre os dados do documento HTML. Elas são usadas para especificar o tipo do conjunto de caracteres, o autor do documento, as confirgurações da janela de visualização entre outros itens importantes para o resultado final.
<link>
É uma tag de auto fechamento (Self-closing), que tem a função de incorporar outros elementos e recursos externos no documento HTML. como por exemplo uma folha de estilo.
<style>
Essa tag é usada para fazer a declaração da estilização (CSS), dentro do mesmo documento.
<body>
É aqui que a mágica acontece e fica todo o conteúdo do seu HTML, seja texto, imagem, videos, ou alguma outra tag de estruturação do html
Outras Tags
O HTML, possui muitas outras tags que organizam e dão sentido a toda informação do seu site
As tags semânticas auxiliam otimização e na indexação com motores de busca como o Google, Elas possuem um significado e mostram onde fica cada parte importante do seu conteúdo, facilitando a indexação de parte do seu conteúdo com motores de busca.
Abaixo algumas tags semanticas:
<header><main><footer><section><article><aside><nav><ol><ul><li>
Exemplo de estruturação com tags semânticas:
Tags sem semântica
São tags que não possuem um significado e que não definem o tipo de conteúdo. Normalmente são utilizadas apenas para fins de estilização e organização do conteúdo.
Como por exemplo:
<div><span><b><i>
Comentários
Os comentários no HTML, são anotações que podem ser colocadas no código sem atrapalhar a interpretação do HTML, servindo para que o desenvolvedor possa comentar o que aquela parte do código faz ou o que precisa ser inserido futuramente. Eles podem ser de uma ou várias linhas, desde que todo o conteúdo que se deseja comentar esteja entre <!– e –>
Por exemplo
<!-- Esse meu texto será ignorado pelo navegador! -->
<!--
<div>
<p>Esse código será ignorado pelo navegador!</p>
</div>
-->Lembre-se de sempre estar buscando se manter atualizado, pois o html pode ser a coisa mais simples de toda a programação, mas ele é atualizado constantemente, trazendo novas tags que facilitam e muito o nosso dia a dia
