Atividade 1 – Familiarize-se com o editor online

Atividade 1 – Criando um site básico

Agora é hora de começar a construir um site básico. Para concluir esta atividade, você precisará concluir as seguintes etapas:

  1. Abra o editor web (clique no botão “Try it yourself!” abaixo)
  2. Use as tags de cabeçalho para adicionar um título e as tags de parágrafo para escrever um parágrafo sobre Benji
  3. Se tiver tempo: escreva uma lista das guloseimas favoritas de Benji: peru, manteiga de amendoim e queijo ralado

Try it yourself!

Use este gráfico de referência para testar algumas tags HTML por conta própria.

EtiquetaDescriçãoExemplo
<html></html>Descreve um documento HTML. Qualquer site deve começar com a tag de aberturae terminar com a tag de fechamento.Veja o exemplo do Codepen acima.
<!-- -->Descreve um comentário. Os comentários devem ser vistos por outros programadores, mas não são exibidos no site.<!-- Esta linha não será exibida no navegador -->
<head></head>Contém todos os elementos HTML que fornecem informações ao navegador para exibir o site corretamente. Os elementos HTML entre as tagsenão são exibidos.Veja o exemplo da Code Pen acima
<title></title>Contém o título do site a ser usado para nomear a aba do navegador.<head>
<título> Meu site </title>
</head>
<body></body>Contém todos os elementos HTML exibidos na página, como texto e imagens.Veja o exemplo da Code Pen acima.
<h1></h1>

<h6></h6>
Define um cabeçalho/título. <h1> define o cabeçalho/título mais importante (maior), enquanto <h6> define o título menos importante (menor).<h1>Este será um título grande</h1>
<h4>Este será um título menor</h4>
<p></p>Descreve um parágrafo.<p>Os cães evoluíram para amar os humanos. Concluindo, os cães são os melhores amigos do ser humano.</p>
<div></div>Define uma divisão ou seção no site.<div>
<h1>Tudo sobre mim</h1>
</div>
<img>Uma imagem. É uma tag de fechamento automático, mas você deve especificar a origem da imagem para que o navegador saiba de onde obtê-la.<img src=“aka.ms/Benji-the-dog”>
<hr>Desenha uma linha horizontal. Outra tag de fechamento automático que é útil se você deseja dividir o conteúdo da página.
<hr>
<ul>
<li>
</li>
</ul>
Uma lista. Para iniciar a lista, use um <ul> marcação. Para cada item a ser adicionado à lista, coloque o item entre os caracteres <li> e tags </li>. Termine a lista com </ul> marcação.<ul>
<li>Este é um item de lista.</li>
</ul>