Sumário⌗

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>
    &lt; 
    os espaços 
    &gt; 
    &amp; 
    
    <br> 
    &quot; que colocamos   
    &quot;
    <br> 
    &apos; 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