Article image

JS

João Souza11/02/2024 21:45
Compartilhe

HTML5 sem Mistérios: Uma Abordagem Amigável para Iniciantes

  • #HTML

Introdução

Olá, amigos! Se você já ouviu falar de HTML e pensou: "Isso é mais complicado do que física quântica", não se preocupe. Vamos desvendar os mistérios do HTML5 de uma forma que até seu priminho Enzo vai entender.

O que é HTML?

HyperText Markup Language (HTML, para os íntimos). Em termos mais simples, é a linguagem que dá estrutura para as páginas web. Pense nele como o alicerce de uma casa, definindo a estrutura básica de uma página. É como o esqueleto do seu site, dando forma e sentido para o conteúdo.

Breve História do HTML

Imagina voltar para os tempos em que a internet era como uma terra selvagem e desbravada. Pois é, o HTML é daquela época! Criado por Tim Berners-Lee lá nos idos de 1991, o HTML começou como algo simples, mas, como um bom vinho, ficou melhor com o tempo. Hoje, estamos na era do HTML5, a versão mais moderna e cheia de truques na manga.

image

-Tim Berners-Lee

O que são Tags?

Aqui entram os "mágicos" do HTML: as tags. São como etiquetas que você coloca nos elementos para dizer ao navegador como eles devem aparecer. Elas funcionam em pares - uma de abertura e outra de fechamento. Por exemplo, < p > define um parágrafo e </ p > o encerra.

Exemplos de Tags Mais Utilizadas:

  • <h1> a <h6>: Para títulos de diferentes tamanhos. Por exemplo:
<h1>Este é um Título H1</h1>
<h2>Este é um Título H2</h2>
  • <p>: Para parágrafos, porque ninguém gosta de ler blocos de texto sem espaçamento. Exemplo:
<p>Isso é um parágrafo simples, mas pode conter muito mais texto!</p>
  • <a>: Para criar links, porque links são a cola que une a internet. Exemplo:
<a href="https://www.exemplo.com">Clique aqui para algo incrível</a>
  • <img>: Para adicionar imagens ao seu site. Exemplo:
<img src="caminho/para/sua/imagem.jpg" alt="Descrição da Imagem">
  • <ul>, <ol> e <li>: Para listas não ordenadas (ul), listas ordenadas (ol) e itens de lista (li). Exemplo:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
  • <div>: Para criar divisões em seu layout. É como um bloco de construção para estruturar seu conteúdo. Exemplo:
<div>
<p>Isso está dentro de uma divisão.</p>
</div>
  • <span>: Similar ao <div>, mas usado para aplicar estilos ou scripts a pequenos trechos de texto. Exemplo:
<p>Este é um <span style="color: red;">trecho de texto vermelho</span>.</p>

Essas são apenas algumas das muitas tags que você pode usar para criar seu próprio espetáculo na web. Brinque com elas e crie algo incrível!

image

Criando um Site Básico

Vamos botar a mão na massa! Um site básico com HTML puro é tão fácil que até seu gato poderia fazer (se ele soubesse programar). Olha só:

<!DOCTYPE html>
<html>
<head>
<title>Meu Site Incrível</title>
</head>
<body>

<h1>Bem-vindo ao Meu Site!</h1>
<p>Este é o meu primeiro site criado com HTML5. Espero que gostem!</p>
<a href="https://www.meuexemplo.com">Clique aqui para algo incrível</a>

</body>
</html>

O que Fizemos Aqui:

  • <!DOCTYPE html>: É uma espécie de carta de apresentação para o navegador, dizendo que estamos usando HTML5, a versão mais moderna do HTML.
  • <html>: Indica o início e o fim do nosso documento HTML. É tipo o abraço que envolve todo o conteúdo.
  • <head>: Aqui colocamos informações sobre o nosso documento, como o título da página, que aparece na aba do navegador.
  • <title>: Define o título da nossa página. É o que aparece na aba do navegador ou na barra de favoritos. No exemplo, "Meu Site Incrível".
  • <body>: Aqui é onde a mágica acontece. Colocamos o conteúdo visível do nosso site.
  • <h1>, <p>, <a>: São as tags que mencionamos antes. <h1> é um título grande, <p> é um parágrafo e <a> é um link.
  • <a href="https://www.meuexemplo.com">: Esta tag <a> com o atributo href cria um link para "https://www.meuexemplo.com". Você pode substituir isso pelo link do seu próprio site.

Então, em resumo, criamos um documento HTML básico que tem um título, um cabeçalho, um parágrafo e um link. Agora, você pode ajustar e expandir conforme sua criatividade e necessidades!

Vamos nos Conectar!

Sabia que 80% do conteúdo foi gerado por inteligência artificial, porem foi 100% revisado por um humano? Quer mais dicas e truques? Me siga nas redes sociais e vamos continuar essa conversa:

Instagram: @joao_victtto

LinkedIn: João Victor Rodrigues de Souza

Fontes de produção

Conteúdo gerado por: ChatGPT e revisões humanas

#HTML #Frontend #Iniciantes

Compartilhe
Comentários (1)
Ronaldo Schmidt
Ronaldo Schmidt - 11/02/2024 21:53

Com todo o respeito amigo não é necessário a utilização do ChatGpt para criar um artigo sobre HTML.

Existe muito conteúdo disponível e com um pouco de pesquisa poderia escrever um livro sobre o assunto.

Não menospreze sua capacidade de criação!