DEV Community

Cover image for Básico do Básico de HTML5!
Bieldeid
Bieldeid

Posted on • Edited on

2 2

Básico do Básico de HTML5!


Notas do editor:
"A principio gostaria de dizer que ainda sou um mero estudante e continuarei sendo nessa vida que escolhi ter, pois nunca paramos de aprender nessa área.
Sendo assim, se tiver alguma sugestão, algo a complementar ou corrigir algo em meus resumos, fique a vontade.
Estou fazendo isso para melhorar meu aprendizado e passar o conhecimento que adquiri! Sendo assim, tenha um belo dia! <3"


Bom, você ai que quer entrar no ramo da programação mas não sabe por onde começar ou quer ter a primeira experiência, aqui vai uma dica que eu dou, e que provavelmente nem irá precisar instalar uma IDE para tal. (Caso não saiba o que é uma IDE ou o básico das outras coisas e quer saber mais, da uma olhada no perfil do https://dev.to/darrow)

A principio vamos saber o que significa HTML5:
HTML (Hyper Text Markup Language) é nada mais nada menos do que:

  • Um arquivo que contem marcadores (tag).
  • Essas tags indicam para o navegador (browser) como a página deve ser apresentada.
  • Marcadores usualmente vem em pares <tag>...</tag>
  • Também podem aparecer de forma abreviada como: <tag atributo="valor".../>

Agora, vamos compreender um pouco das tags que utilizamos no html5, lembrando, apenas o básico!

<html> - Define um documento HTML, tudo que estiver nele será apresentado no navegador.

<head> - Define e configura o topo do seu site/código, como o título e outros

<title> - Define o título do seu site, que fica nas abas do navegador

<body> - Define o corpo do HTML, tudo que estiver nele será visível no site.

<h1> até a <h6> - Define cabeçalhos de 1 a 6

<p> - Define um parágrafo.

<br> - Define uma quebra de linha.


Sendo assim, vamos fazer o seu primeiro site?

Abra seu bloco de notas e escreva isso aqui:
Alt Text

Após finalizar, salve-o como "index.html" e execute-o, se você fez tudo certinho, o site irá aparecer dessa forma:
image


Espero que você tenha consigo realizar o seu possível primeiro site de muitos outros.
Não se esqueça de fuçar nesse código e entender mais um pouco sobre o que cada tag faz e etc.
Agradeço se leu até aqui, um abraço e até a próxima!

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

While many AI coding tools operate as simple command-response systems, Qodo Gen 1.0 represents the next generation: autonomous, multi-step problem-solving agents that work alongside you.

Read full post

Top comments (0)

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post