Oficina HTML do Grupo P²-KLH – Aula 1

Postado por joseact
16/05/2022

Está disponível a primeira aula da oficina de HTML produzida pelo grupo P²-KLH – ACT Unicamp/Limeira

_{^{Inscreva-se no Canal!}}

Introdução

O que é HTML?

Criada pelo britânico Tim Berners-Lee, o acrônimo HTML significa HyperText Markup Language ou Linguagem de Marcação de Hipertexto.

Obs: Não é uma linguagem de programação e sim de marcação

E como funciona?

Criamos um arquivo com a extensão .html, dentro desse arquivo vamos ter tags de marcação que o navegador faz a leitura do arquivo e renderiza o conteúdo para a visualização.

Esse conteúdo pode ser texto, imagens, vídeos, arquivos.

O que são As TAGs?

São códigos de marcação que vão possibilitar criar a estrutura de uma página.

Palavras dentro de < > que o navegador entende.

As tags quase sempre vão ter uma abertura e um fechamento.

<tag> informação </tag>

Estrutura básica de uma página

<!DOCTYPE html>
<html>
<head>
      <title>Título</title>
</head>
<body>
  
</body>
</html>

O que vamos precisar?

Onde vamos montar nossa página:

IDE (Ambiente de Desenvolvimento Integrado, como VS Code ou SublimeText) ou o bloco de notas do seu computador.

Browser, onde a página será interpretada e exibida:

Pode ser o que estiver instalado como Google, Mozilla Firefox etc.

Bora criar uma página

Vamos criar uma página simples para exibir Frutas Cítricas e testar o funcionamento da estrutura HTML

https://www.w3schools.com/html/default.asp

Principais tags

<head> – local para declarar todas informações, como título e metadados da sua página;

<title> – define o título;

<body> – local para declarar todos os elementos que irão compor o corpo da página;

<h1>,<h2>,<h3>,<h4>,<h5 >e <h6> – Tags para definir um título e subtítulos, variando de 1 a 6, sendo h1 o título mais importante e h6 o de menor importância;

<p> – Tag para definir um parágrafo;

<a> – Tag de link, junto ao atributo href=”” da web;

<img> – permite inserir uma imagem no seu documento.

Tags Possuem propriedades

src => serve para definir o caminho de pastas onde está a minha imagem

alt => é para a descrição de rodapé da imagem e para acessibilidade

width => utilizamos essa propriedade para especificar a altura

height => a largura da imagem

https://www.w3schools.com/html/default.asp

Exercício 1

A ideia aqui é colocar a mão na massa, usar o que aprendeu e experimentar.

Instruções

Crie uma página html para representar 2 comidas favoritas.

Para o exercício adicione nome do prato, origem do prato, descrição e uma imagem usando um arquivo e outra um link.

Exercícios extras

Baixe o arquivo com exercícios extras para treinar ainda mais!

https://drive.google.com/drive/folders/1o8Fp0Vq9qX826IPHkyYH7HvbFBPB4laa?usp=sharing