Introdução ao HTML
HTML, ou HyperText Markup Language, é a linguagem padrão para a criação de páginas e aplicações web. Ela é uma linguagem de marcação, o que significa que ela fornece uma estrutura para o conteúdo na web e descreve a aparência desse conteúdo.
Estrutura Básica
Um documento HTML básico possui uma estrutura específica, incluindo doctype, elementos de cabeçalho e corpo. O doctype declara que a página é um documento HTML. O elemento de cabeçalho contém metadados sobre o documento, como o título da página, enquanto o corpo contém o conteúdo da página, como texto, imagens, listas, links, etc.
<!DOCTYPE html>
<html>
<head>
<title>Título da página</title>
</head>
<body>
Conteúdo da página aqui.
</body>
</html>
Tags e Atributos
As tags HTML são os blocos de construção de uma página HTML. Elas definem e descrevem o conteúdo. Cada tag começa com um sinal de menor (<) e termina com um sinal de maior (>). Alguns exemplos de tags HTML incluem <h1> para títulos, <p> para parágrafos, <a> para links, etc.
Os atributos HTML fornecem informações adicionais sobre os elementos. Eles vêm em pares de nome/valor e são sempre incluídos no início da tag. Por exemplo, a tag de link (<a>) geralmente inclui o atributo 'href', que indica o URL para o qual o link leva.
<a href="https://www.exemplo.com">Este é um link para Exemplo.com</a>
Media Queries
As Media Queries são uma técnica CSS que permite adaptar o layout e o design de uma página web para diferentes dispositivos e tamanhos de tela. Elas são uma parte crucial do design responsivo.
Uma Media Query consiste em um tipo de mídia e uma ou mais expressões que verificam as condições de determinados recursos do dispositivo. Por exemplo, você pode usar uma Media Query para aplicar um conjunto de estilos CSS se a largura da janela do navegador for menor que 600px.
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Neste exemplo, o fundo da página será azul claro se a largura da janela do navegador for menor que 600px.
As Media Queries são uma ferramenta poderosa para criar uma experiência de usuário otimizada para diferentes dispositivos. Elas permitem que você crie designs que respondem a mudanças no ambiente do usuário, como tamanho de tela, orientação (retrato ou paisagem) e resolução de tela.
Em conclusão, o HTML é a base de qualquer página web. Compreender a estrutura básica do HTML, as tags e atributos, e como usar Media Queries para criar designs responsivos, é essencial para se tornar um desenvolvedor front-end eficaz.
