4.26. Introdução ao HTML: estrutura básica, tags e atributos: Estruturas de controle (if, switch, for, while)
Página 30 | Ouça em áudio
Introdução ao HTML
HTML, que significa Hyper Text Markup Language, é a linguagem de marcação padrão para criar páginas e aplicativos da Web. Combinado com tecnologias de ponta como JavaScript e CSS, HTML permite aos desenvolvedores front-end criar sites e aplicativos ricos em recursos e visualmente impressionantes.
Estrutura básica de um documento HTML
Um documento HTML básico tem uma estrutura específica que inclui tags específicas que definem a cabeça (<head>
) e o corpo (<body>
) do documento. A tag <html>
é a raiz do documento e todas as outras tags estão aninhadas dentro dela. A tag <head>
contém metadados sobre o documento, como seu título e links para scripts e folhas de estilo CSS. A tag <body>
contém o conteúdo real da página da web, como texto, imagens, vídeos, etc.
<!DOCTYPE html> <html> <head> <title>Título da página</title> </head> <body> <h1>Este é um cabeçalho</h1> <p>Este é um parágrafo.</p> <p>Este é outro parágrafo.</p> </body> </html>
Tags e Atributos HTML
As tags HTML são a base da linguagem HTML. Elas definem e descrevem o conteúdo em um documento HTML. Uma tag HTML é composta por um nome de elemento, contido entre sinais de menor e maior. Alguns exemplos incluem <h1>
, <p>
, <div>
, etc.
Os atributos HTML fornecem informações adicionais sobre os elementos. Eles são sempre especificados no elemento de início e geralmente vêm em pares de nome/valor. Por exemplo, a tag de link <a>
geralmente usa o atributo "href" para especificar o link para o qual deve apontar.
<a href="https://www.example.com">Este é um link</a>
Estruturas de controle em JavaScript
JavaScript, como muitas outras linguagens de programação, possui estruturas de controle que permitem aos desenvolvedores especificar diferentes caminhos de execução com base em condições e loops. As estruturas de controle mais comuns em JavaScript são if, switch, for e while.
if
A declaração if é uma estrutura de controle condicional que executa um bloco de código se uma condição especificada for verdadeira.
let x = 20; if (x > 10) { console.log("x é maior que 10"); }
switch
A declaração switch avalia uma expressão e executa o bloco de código correspondente ao valor da expressão.
let fruta = "maçã"; switch (fruta) { case "banana": console.log("Eu gosto de bananas!"); break; case "maçã": console.log("Maçãs são ok."); break; default: console.log("Eu gosto de todas as frutas!"); break; }
for
O loop for é uma estrutura de controle que executa um bloco de código um número específico de vezes.
for (let i = 0; i < 5; i++) { console.log(i); }
while
O loop while é uma estrutura de controle que executa um bloco de código enquanto uma condição especificada for verdadeira.
let i = 0; while (i < 5) { console.log(i); i++; }
Em resumo, HTML, CSS e JavaScript são ferramentas poderosas que permitem aos desenvolvedores criar aplicações web ricas e interativas. Compreender a estrutura básica do HTML, as tags e atributos, bem como as estruturas de controle do JavaScript, são passos fundamentais para se tornar um desenvolvedor front-end eficaz.
Agora responda o exercício sobre o conteúdo:
Qual das seguintes afirmações descreve corretamente a estrutura básica de um documento HTML?
Você acertou! Parabéns, agora siga para a próxima página
Você errou! Tente novamente.
Próxima página do Ebook Gratuito: