msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'softchris-patch-5'
${ noResults }
Web-Dev-For-Beginners/translations/pt/3-terrarium/1-intro-to-html/README.md

12 KiB
Raw Permalink Blame History

Projeto Terrário Parte 1: Introdução ao HTML

Introdução ao HTML

Sketchnote por Tomomi Imura

Questionário Pré-Aula

Questionário pré-aula

Veja o vídeo

Vídeo sobre Git e GitHub

Introdução

HTML, ou HyperText Markup Language, é o 'esqueleto' da web. Se o CSS 'veste' o seu HTML e o JavaScript lhe dá vida, o HTML é o corpo da sua aplicação web. A sintaxe do HTML reflete essa ideia, pois inclui tags como "head", "body" e "footer".

Nesta lição, vamos usar HTML para estruturar o 'esqueleto' da interface do nosso terrário virtual. Ele terá um título e três colunas: uma coluna à direita e outra à esquerda onde ficarão as plantas arrastáveis, e uma área central que será o terrário com aparência de vidro. Ao final desta lição, você será capaz de ver as plantas nas colunas, mas a interface parecerá um pouco estranha; não se preocupe, na próxima seção você adicionará estilos CSS para melhorar a aparência da interface.

Tarefa

No seu computador, crie uma pasta chamada 'terrarium' e, dentro dela, um ficheiro chamado 'index.html'. Pode fazer isso no Visual Studio Code após criar a pasta do terrário, abrindo uma nova janela do VS Code, clicando em 'abrir pasta' e navegando até à nova pasta. Clique no pequeno botão 'ficheiro' no painel do Explorador e crie o novo ficheiro:

explorador no VS Code

Ou

Use estes comandos no seu git bash:

  • mkdir terrarium
  • cd terrarium
  • touch index.html
  • code index.html ou nano index.html

Ficheiros index.html indicam a um navegador que este é o ficheiro padrão numa pasta; URLs como https://anysite.com/test podem ser construídos usando uma estrutura de pastas que inclui uma pasta chamada test com index.html dentro dela; index.html não precisa aparecer no URL.

O DocType e as tags html

A primeira linha de um ficheiro HTML é o seu doctype. É um pouco surpreendente que seja necessário ter esta linha no topo do ficheiro, mas ela informa navegadores mais antigos que a página deve ser renderizada em modo padrão, seguindo a especificação atual do HTML.

Dica: no VS Code, pode passar o cursor sobre uma tag para obter informações sobre o seu uso nos guias de referência do MDN.

A segunda linha deve ser a tag de abertura <html>, seguida pela sua tag de encerramento </html>. Estas tags são os elementos raiz da sua interface.

Tarefa

Adicione estas linhas no topo do seu ficheiro index.html:

<!DOCTYPE html>
<html></html>

✅ Existem alguns modos diferentes que podem ser determinados ao definir o DocType com uma string de consulta: Modo Quirks e Modo Padrão. Estes modos eram usados para suportar navegadores muito antigos que não são normalmente utilizados hoje em dia (Netscape Navigator 4 e Internet Explorer 5). Pode manter-se à declaração padrão do doctype.

O 'head' do documento

A área 'head' do documento HTML inclui informações cruciais sobre a sua página web, também conhecidas como metadados. No nosso caso, informamos ao servidor web, para o qual esta página será enviada para renderização, estas quatro coisas:

  • o título da página
  • metadados da página, incluindo:
    • o 'conjunto de caracteres', que informa sobre a codificação de caracteres usada na página
    • informações do navegador, incluindo x-ua-compatible, que indica que o navegador IE=edge é suportado
    • informações sobre como o viewport deve comportar-se ao ser carregado. Definir o viewport com uma escala inicial de 1 controla o nível de zoom quando a página é carregada pela primeira vez.

Tarefa

Adicione um bloco 'head' ao seu documento entre as tags de abertura e encerramento <html>.

<head>
	<title>Welcome to my Virtual Terrarium</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

✅ O que aconteceria se definisse uma tag meta de viewport assim: <meta name="viewport" content="width=600">? Leia mais sobre o viewport.

O body do documento

Tags HTML

No HTML, adiciona-se tags ao ficheiro .html para criar elementos de uma página web. Cada tag geralmente tem uma tag de abertura e uma de encerramento, como esta: <p>olá</p> para indicar um parágrafo. Crie o corpo da sua interface adicionando um conjunto de tags <body> dentro do par de tags <html>; o seu código agora ficará assim:

Tarefa

<!DOCTYPE html>
<html>
	<head>
		<title>Welcome to my Virtual Terrarium</title>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
	</head>
	<body></body>
</html>

Agora, pode começar a construir a sua página. Normalmente, usa-se tags <div> para criar os elementos separados numa página. Vamos criar uma série de elementos <div> que conterão imagens.

Imagens

Uma tag html que não precisa de uma tag de encerramento é a <img>, porque ela tem um elemento src que contém todas as informações necessárias para renderizar o item na página.

Crie uma pasta na sua aplicação chamada images e, dentro dela, adicione todas as imagens da pasta de código fonte; (são 14 imagens de plantas).

Tarefa

Adicione essas imagens de plantas em duas colunas entre as tags <body></body>:

<div id="page">
	<div id="left-container" class="container">
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant2" src="./images/plant2.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant3" src="./images/plant3.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant4" src="./images/plant4.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant5" src="./images/plant5.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant6" src="./images/plant6.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant7" src="./images/plant7.png" />
		</div>
	</div>
	<div id="right-container" class="container">
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant8" src="./images/plant8.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant9" src="./images/plant9.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant10" src="./images/plant10.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant11" src="./images/plant11.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant12" src="./images/plant12.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant13" src="./images/plant13.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant14" src="./images/plant14.png" />
		</div>
	</div>
</div>

Nota: Spans vs. Divs. Divs são considerados elementos 'block', e Spans são 'inline'. O que aconteceria se transformasse esses divs em spans?

Com este código, as plantas agora aparecem no ecrã. Parece muito feio, porque ainda não foram estilizadas com CSS, e faremos isso na próxima lição.

Cada imagem tem um texto alternativo (alt) que aparecerá mesmo que não consiga ver ou renderizar uma imagem. Este é um atributo importante para incluir por questões de acessibilidade. Aprenda mais sobre acessibilidade em lições futuras; por agora, lembre-se de que o atributo alt fornece informações alternativas para uma imagem caso um utilizador, por algum motivo, não consiga visualizá-la (devido a uma conexão lenta, um erro no atributo src ou se o utilizador usar um leitor de ecrã).

✅ Reparou que cada imagem tem o mesmo texto alternativo? Isso é uma boa prática? Porquê? Consegue melhorar este código?

Marcação semântica

Em geral, é preferível usar 'semântica' significativa ao escrever HTML. O que isso significa? Significa usar tags HTML para representar o tipo de dados ou interação para os quais foram projetadas. Por exemplo, o texto principal de um título numa página deve usar uma tag <h1>.

Adicione a seguinte linha logo abaixo da sua tag de abertura <body>:

<h1>My Terrarium</h1>

Usar marcação semântica, como ter cabeçalhos como <h1> e listas não ordenadas renderizadas como <ul>, ajuda leitores de ecrã a navegar por uma página. Em geral, botões devem ser escritos como <button> e listas como <li>. Embora seja possível usar elementos <span> especialmente estilizados com manipuladores de clique para simular botões, é melhor para utilizadores com deficiência usar tecnologias que determinem onde está um botão numa página e interagir com ele, se o elemento aparecer como um botão. Por esta razão, tente usar marcação semântica sempre que possível.

✅ Veja um leitor de ecrã e como ele interage com uma página web. Consegue perceber por que ter uma marcação não semântica pode frustrar o utilizador?

O terrário

A última parte desta interface envolve criar uma marcação que será estilizada para criar um terrário.

Tarefa:

Adicione esta marcação acima da última tag </div>:

<div id="terrarium">
	<div class="jar-top"></div>
	<div class="jar-walls">
		<div class="jar-glossy-long"></div>
		<div class="jar-glossy-short"></div>
	</div>
	<div class="dirt"></div>
	<div class="jar-bottom"></div>
</div>

✅ Apesar de ter adicionado esta marcação ao ecrã, não vê absolutamente nada renderizado. Porquê?

🚀Desafio

Existem algumas tags 'antigas' no HTML que ainda são divertidas de usar, embora não deva usar tags obsoletas como estas tags na sua marcação. Ainda assim, consegue usar a antiga tag <marquee> para fazer o título h1 rolar horizontalmente? (se o fizer, não se esqueça de removê-la depois)

Questionário Pós-Aula

Questionário pós-aula

Revisão & Autoestudo

HTML é o sistema de construção 'testado e comprovado' que ajudou a construir a web como a conhecemos hoje. Aprenda um pouco sobre a sua história estudando algumas tags antigas e novas. Consegue descobrir por que algumas tags foram descontinuadas e outras adicionadas? Que tags podem ser introduzidas no futuro?

Saiba mais sobre como construir sites para a web e dispositivos móveis em Microsoft Learn.

Tarefa

Pratique o seu HTML: Crie um modelo de blog

Aviso Legal:
Este documento foi traduzido utilizando o serviço de tradução por IA Co-op Translator. Embora nos esforcemos para garantir a precisão, é importante notar que traduções automáticas podem conter erros ou imprecisões. O documento original na sua língua nativa deve ser considerado a fonte autoritária. Para informações críticas, recomenda-se a tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução.