Aprenda passo a passo com exemplos, códigos ocultáveis e interatividade!
HTML é uma linguagem de marcação para estruturar conteúdo em páginas web. Lançada em 1991 por Tim Berners-Lee, é base para outras tecnologias como JavaScript, PHP, etc.
Recomendo depois de aprender html, aprender css e javascript, ambos são importantes, para fazer muitas coisas, muitas coisas mesmo! css, a parte visual, responsiva e bonita do site, enquanto javascript a parte funcional e pensante do site, enfim o html de qualquer forma é base então é importante
Arquivos HTML costumam ter essa organização mínima:
<!DOCTYPE html>
<html>
<head>
<title>Minha página</title>
</head>
<body>
<h1>Olá Mundo!</h1>
<p>Este é um parágrafo.</p>
</body>
</html>
<hr><hr> insere uma linha horizontal para separar conteúdos, sendo uma tag vazia (sem fechamento).
<hr> <!-- Insere uma linha horizontal -->
<br>Quebra de linha: <br> adiciona uma nova linha no meio do texto. Também é tag vazia.
<p>Linha 1<br>Linha 2</p>
<br> em seu texto<pre><pre> preserva todos os espaços e quebras de linha do conteúdo interno.
<pre> Texto exato com quebras preservadas </pre>
CSS Inline é inserido diretamente na tag HTML através do atributo style.
<p style="color:red;">Exemplo</p>
Tags como <del>, <ins>, <b>, <em>, etc., formatam partes do texto.
Minha cor favorita é azul vermelho.
<del>Texto</del> <ins>Texto</ins>
<q><q> define uma citação curta, adicionando aspas automaticamente.
<q>Texto da citação</q>
<blockquote><blockquote> define uma citação longa em bloco, geralmente com recuo.
<blockquote>Texto longo</blockquote>
<abbr><abbr> define uma abreviação com um "tooltip" ao passar o mouse.
<abbr title="Organização Mundial da Saúde">OMS</abbr>
<cite><cite> define o título de uma obra (geralmente renderizada em itálico).
<cite>The Scream</cite> by Edvard Munch
<bdo><bdo> força a direção de leitura do texto (ltr ou rtl), ignorando a padrão.
<bdo dir="rtl">Texto da direita para a esquerda</bdo>
Comentários (<!-- -->) são ignorados pelo navegador e podem ocultar trechos de código.
<!-- Este código não é exibido -->
Defina cores no HTML via style="color:...", bgcolor (mais antigo) ou via CSS.
<p style="color: Tomato;">Texto em Tomate</p>
Defina bordas coloridas, espessura e estilo usando CSS (border).
<p style="border:2px solid blue;">Texto com borda</p>
Texto com borda
Podemos usar rgb(), #hex, hsl(), rgba(), hsla(), etc.
/* Exemplo */ background-color: rgb(255, 99, 71); background-color: #ff6347; background-color: hsl(9, 100%, 64%);
<a href="URL"> cria um link. Com target="_blank" abre em nova aba.
<a href="https://www.exemplo.com" target="_blank">Clique aqui</a>
src em <img><img src="..."> define o caminho da imagem.
<img src="imagem.jpg" alt="Descrição">
Para controlar dimensões e texto alternativo em imagens.
<img src="foto.jpg" width="300" height="200" alt="Descrição">
CSS (Cascading Style Sheets) estiliza páginas web, definindo cores, fontes, layout, etc. “Cascading” indica que estilos do pai passam aos filhos se não forem sobrescritos.
body {
background-color: lightblue;
}
h1 {
color: navy;
text-align: center;
}
Observe como o CSS afeta a cor de fundo e a do título.
O CSS funciona em cascata. Regras gerais (ex: no body) se aplicam a todos os elementos, a menos que haja uma regra mais específica.
body {
color: blue; /* Tudo azul */
}
h1 {
color: red; /* h1 fica vermelho, sobrescreve azul */
}
Texto de parágrafo. Observe a herança de cor.