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:
- Abra o editor web (clique no botão “Try it yourself!” abaixo)
- Use as tags de cabeçalho para adicionar um título e as tags de parágrafo para escrever um parágrafo sobre Benji
- Se tiver tempo: escreva uma lista das guloseimas favoritas de Benji: peru, manteiga de amendoim e queijo ralado
Use este gráfico de referência para testar algumas tags HTML por conta própria.
| Etiqueta | Descrição | Exemplo |
|---|---|---|
<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> |