Uma jornada rumo ao Front End. O que é HTML?

Rumo ao Front. O que é e para que serve HTML.

Mateus Malvezzi

0 min

Olá, tudo bem ? No meu primeiro texto apresentei as ideias do site, que estou desenvolvendo para minha irmã. Contudo, naquela ocasião não me aprofundei nos fundamentos utilizados. Então, hoje vamos conversar sobre o Hyper Text Markup Language, que nada mais é do que o HTML.

Reprodução: Exemplo de um linktree próprio que está no forno.

Escreverei para vocês de um jeito mais prático, mas muito didático(espero), ou seja, do modo como estou aprendendo dia após dia. Lembro, que estou sempre aberto a sugestões, críticas e dúvidas. É só chamar aqui.

O primeiro passo é definir qual editor nós iremos utilizar. O editor nada mais é do que um lugar onde você armazena todos os seus códigos, para depois hospedá-los em uma plataforma para então ter o site no "ar"(exe : www.sitemateus.com), funcionando para qualquer usuário. No meu caso, utilizo o VSCode, que pode ser baixado neste link. Ao entrar, clique em download, e pronto. A mágica está feita(futuramente, trarei um texto somente sobre VSCode, para otimizar o seu código, afinal, hoje o assunto é HTML).

Visual Studio Code

Uma coisa que gosto muito de fazer é ler a documentação pura(O original, sempre será em inglês, mas nada que um tradutor não resolva), pois lá a teoria sempre será mais profunda(na minha opinião). Então, deixo como sugestão.

|Todos os textos sobre linguagens são uma síntese do conteúdo das documentações e das publicações de outros produtores de conteúdo, tanto aqui na Pingback, Youtube e também Instagram.|

Anatomia do HTML

Para que você entenda o que de fato é o HTML, imagine que ele é esqueleto da página, ou melhor, a estrutura de uma página.

Reprodução didática do que seria o HTML

Dito isso, podemos formar nosso primeiro elemento.

Exemplo : Tag de parágrafo.

Inicialmente, temos o HTML tag, que sempre será o nome/letra dentro da < >(opening) e da </ >(closing) tag. Vamos lá, entender este parágrafo.
Em vermelho, temos o element, que engloba o HTML tag e o content.
Em azul temos as nossas tags, <p>, que é a opening tag (tag de abertura) e a </p>, que a é closing tag (tag de fechamento). Atente-se que, sempre, as tags de fechamento terão um " / ".
Já em amarelo, temos o nosso content, ou seja, o texto(neste caso) que nós queremos passar, e que sempre estará entre a opening e a closing tag.

--> Imagino que isso pode parecer confuso, principalmente se você "caiu" de paraquedas neste "mundo do TI". Mas, leia tudo novamente com calma e tente compreender o conceito, que terá a mesma estrutura ( < > content </ > ) em praticamente todos os casos. Caso não compreenda, estou aqui.

Em uma redação, geralmente, iniciamos com um título, que indica qual será conteúdo ou tema do texto. Aqui, não será muito diferente, e, chamaremos isso de Heading elements (ou, elementos de cabeçalho). Nesse sentido, existem 6 tipos de Heading elements, H1, H2, H3, H4, H5 e H6, sendo <h1></h1> o maior e <h6></6> o menor. Este título será usado no corpo( <body> </body> )da página, que trabalharemos no próximo texto.

Exemplificação de títulos.

Agora, uma coisa importante para que você consiga "ler a lógica" por trás de muitas linguagens de programação(sim, HTML é de marcação, mas vale para ela também) é saber que:

° Tudo é baseado em hierarquia, logo

Para finalizar, vamos dar uma "pincelada" no cabeçalho do HTML, que é o conteúdo dentro de <head> </head>. Esta, é a parte que NÃO é exibida para o usuário quando a página carrega. Ela contém o título, link para o CSS(que irá estilizar a página), codificação de caracteres, além de outras configurações. Abaixo, um exemplo bem simples.

Exemplo <head> </head>

° <head> </head> como dito anteriormente, são a parte que não aparece ao usuário. É utilizada para configurar a página.

° <meta charset="utf-8"> É o elemento que irá especificar a codificação de caracteres do seu documento. O "utf-8" diz ao sistema, que você utilizará um conjunto que inclui praticamente todas os caracteres de linguagem humana, logo, você poderia lidar com a exibição de qualquer idioma. E, <meta> assim como <img> não possuem tag de fechamento, são os chamados elementos vazios(que você pode dar um google para saber mais).

° <title> </title> é o nome que vai aparecer na "aba" da página.

Bem, chegamos ao fim de mais um texto, no qual dei um "start" em HTML. No próximo, veremos as principais tags para <body>, tais como incluir imagens, vídeos, listas ordenadas ou não e muito mais.

Caso este conteúdo tenha contribuído para o seu aprendizado, peço que você me ajude a difundi-lo para mais pessoas. No canto superior esquerdo terá uma raquete que poderá ser curtida e, abaixo dela, você pode também compartilhar meu texto com outra pessoa.

Obrigado, e até a próxima.

Learn

Support

More Options