HTML?
Sumário⌗
- Início
- VSCode e VSCodium
- Comentários
- Anatomia das Tags
- Atributos
- Atributos Globais
- Aninhamento - Hierarquia
- Anatomia - Documento
- Créditos
Início⌗
O tema desta nova postagem que trata de conceitos inicias e basilares do desenvolvimento web, é sobre o HTML e seus conceitos essenciais, tags, atributos, aninhamentos, hierarquias de tags, elementos de diretórios e muito mais.
VS Code?⌗
O Visual Studio Code (VS Code) é um editor de código aberto desenvolvido pela Microsoft. A saber, ele está disponível para Windows, Mac e Linux. É criado com Electron, ferramenta criada pelo GitHub (adquirido pela MS) que permite a criação de softwares Desktop com **HTMLc, CSS e JavaScript.
Este é o editor que eu prefiro e utilizo, mas sinta-se a vontade para escolher qualquer outro disponível no mercado. O principal objetivo aqui, é você se sentir a vontade com seu editor, o que trará maior fluides no seu estudo também como um ganho significativo na sua produtividade.
Um detalhe importante sobre o VS Code e das suas configurações, são as que tratam da telemetria de utilização do app enviadas à Microsoft, caso isso seja um problema para você, é possível desativá-las nas configurações ou até mesmo baixar uma versão do aplicativo onde elas já venham desativadas por padrão, que é a proposta do VSCodium.
Outra coisa que precisaremos acrescentar no VS Code, visto que trataremos de HTML nesse momento, é uma extensão que nos permita pré-visualizar o código html. Portanto, na seção de plguins do VS Code, que fica na barra lateral da esquerda em seu último ícone, no campo de pesquisa procure por “HTML Preview” e instale a extensão.
É de suma importância que ao decorrer desse post, tudo que se tratar de código escrito, recomendo que você os copie e cole no seu VS Code, vendo como eles funcionam na prática. Fique a vontade também para modificá-los.
HTML?⌗
HTML é um acrônimo para Hypertext (hipertexto) Markup (marcação) Language (linguagem), ela não é uma linguagem de programação em si, porém é uma linguagem na forma de escrever, tendo sintaxe e semântica.
Hypertext é uma marcação específica que nos leva a outro texto, isso mais no passado, agora sendo relacionado a imagens, a vídeos. Bastante simples usar o HTML, podemos ver ele clicando com o botão direito em qualquer página na internet e selecionando a opção “view Page Source/ver código fonte”.
Comentários⌗
Os comentários terão grande utilidade em nossos códigos, muitas vezes nos auxiliando em códigos mais extensos, sua utilização é bastante simples, para abrir um comentário, faremos o seguinte:
<!-- cometários
O conteúdo escrito dentro do comentário,
não aparecerá como conteúdo no seu código html.
-->
Anatomia das Tags⌗
Neste tópico, veremos o que constitui o Markup do HTML, as Tags.
<h1> TÍTULO </h1>
Você faz a abertura delas, coloca o nome da Tag e as fecha como no exemplo acima. No caso dessa Tag, seu conteúdo é de título, juntando a abertura, fechamento e o conteúdo, teremos um Elemento HTML.
Existe também Elementos vazios, que diferente do exemplo acima, não fecham daquela forma, mas assim:
<img src=" " alt=" ">
Essa tag, img
utilizada para imagem, possuí atributos adicionais e que terão o seu funcionamento vistos mais a adiante.
Atributos⌗
Os atributos booleanos, aqueles que não precisam de conteúdo, pois por serem booleanos possuem apenas dois tipos de valores, verdadeiro ou falso, não havendo texto, apenas essas duas opções.
<input type="text" disabled>
Outro fator que devemos levar em consideração são as aspas, recomendado apenas o uso das aspas duplas, para não desencadear problemas no código.
Atributos Globais⌗
Atributos globais (veremos apenas os mais utilizados), são atributos aplicáveis em todas as Tags, sendo as principais:
class⌗
além de classificar as Tags, é usada para aplicar estilo css e também para acessar com o Java Script.
<div class="conteúdo">
</div>
contenteditable⌗
usado para editar o conteúdo da página, porém não é mantido após salvar.
<div contentedtable="true">
</div>
data-⌗
usado para expandir os tipos de atributos que podemos usar para fazer mais tarde lógica no Java Script , utilizado em css também.
<div data-qualquercoisaaqui="">
<!-- escrito com "-" ou tudo junto. -->
</div>
hidden⌗
usado para esconder uma Tag.
<div class="carrinho" hidden>
conteúdo
</div>
id⌗
usado apenas 1 por Tag para identificação, podendo também mais tarde utilizar no Java Script e CSS.
<div id="texto">
conteúdo
</div>
<div id="texto2">
conteúdo
</div>
style⌗
aplica a estilização na Tag, normalmente não se usa “style” dentro da Tag, mas sim em arquivos externos.
<div style="color: red">
tabindex⌗
usado para ordenar o Tab na página.
<div tabindex="3">
</div>
<div tabindex="1">
</div>
<div tabindex="2">
</div>
title⌗
serve para definir um título para a Tag, que aparece quando colocamos o mouse descansando em cima do conteúdo da página.
<div title="aqui vai o título">
conteudo
</div>
Para estudo de mais Atributos Globais, visite o site DEVELOPER.MOZILA.ORG que é uma ótima fonte de conhecimento devido à grandiosidade e facilidade de acesso ao material para estudo.
Aninhamento - Hierarquia⌗
Aninhamento em HTML significa colocar uma tag dentro da outra, porém não é se trata de uma tag qualquer, existe uma hierarquia por trás delas que deverão ser seguidas, por exemplo:
<p>
<em>texto<em>
<p> texto2</p>
</p>
Podemos ver no exemplo acima que a tag <em></em>
(usada para dar ênfase em um texto) é pertencente a Tag <p></p>
(usada para criar um parágrafo). Nota-se também que há um fluxo, onde as tags são lidas por ordem de cima para baixo.
Por fim, no posicionamento dos elementos, podemos ver que a tag <em></em>
não está em uma outra linha como na tag <p></p>
, existem tags que quebram a linha, então mesmo que colocarmos a tag <p></p>
uma do lado da outra, visualmente o resultado será a quebra de linha.
Caracteres Reservados⌗
Caracteres reservado são caracteres usados no próprio HTML, como < > & " " ' '
. Não será possível utilizarmos elas no conteúdo, pois dão erro, mesmo que apareçam na pré-visualização o navegador vai tentar ler esses caracteres de alguma forma que faça sentido. Para usarmos precisamos trocá-los por outras formas de escrever. Faça o teste em algum documento .html para ver seu funcionamento na prática,:
<p>
<
os espaços
>
&
<br>
" que colocamos
"
<br>
' além das quebras de linha são
ignorados
</p>
Anatomia de um Documento⌗
Se abrirmos o documento .html pelo navegador estaremos vendo a página como ela deve ser mostrada ao utilizador, mas se clicarmos em ver o código fonte dela, estaremos vendo o HTML puro. Para testarmos isso na prática, veremos a anatomia de um documento HTML, vide o exemplo abaixo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Anatomia do Documento</title>
</head>
<body>
<h1>Título</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
</body>
</html>
O padrão seria esta forma.
<!DOCTYPE html>
— diz ao navegador que estamos trabalhando com HTML 5.<html></html>
— o próprio HTML, elemento raiz, o início da cadeia.<head></head>
— contém configurações importantes para página, mas não ainda o que o usuário vai ver.<meta>
— onde vai representar vários tipos de metadados da página.<title></title>
— título da página.<body></body>
— onde haverá conteúdo visual da página.
Créditos⌗
Fonte: ROCKETSEAT