4.22. Introdução ao HTML: estrutura básica, tags e atributos: Media Queries

Página 26

4.22. Introdução ao HTML: estrutura básica, tags e atributos: Media Queries

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.

Ahora responde el ejercicio sobre el contenido:

O que são Media Queries em HTML?

¡Tienes razón! Felicitaciones, ahora pasa a la página siguiente.

¡Tú error! Inténtalo de nuevo.

Siguiente página del libro electrónico gratuito:

274.23. Introdução ao HTML: estrutura básica, tags e atributos: Introdução ao JavaScript

¡Obtén tu certificado para este curso gratis! descargando la aplicación Cursa y leyendo el libro electrónico allí. ¡Disponible en Google Play o App Store!

Disponible en Google Play Disponible en App Store

+ 6,5 millones
estudiantes

Certificado gratuito y
válido con código QR

48 mil ejercicios
gratis

Calificación de 4.8/5
en tiendas de aplicaciones

Cursos gratuitos de
vídeo, audio y texto.