Praticando HTML: Receita de Panqueca de Banana
A receita é bem simples:
Panqueca de Banana (rende 1 porção)
Tempo de preparo: 5 min.
Ingredientes:
2 bananas2 ovos
2 colheres de sopa de aveia
óleo ou manteiga para untar a frigideira
Modo de Preparo:
1 comece amassando as bananas e reserve2 em uma vasilha junte os ovos, as bananas amassadas e a aveia
3 misture bem até que vire uma mistura homogênea
4 pingue um pouco de óleo na frigideira e deixe-a aquecer
5 despeje a massa na frigideira
6 deixe a panqueca dourar um lado e depois vire-a para que doure o outro
7 após estar devidamente cozida e dourada sirva
o nosso projeto ficará assim:
 |
| Visualização do projeto finalizado |
Criando um novo documento html para marcar a receita
Em seu computador abra o editor de texto simples (wordpad, bloco de notas, notepad++...) e insira a estrutura básica quie já aprendemos que será utilizada amplamente na marcação dos seus projetos:
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Panqueca de Banana</title>
</head>
<body>
</body>
</html>
Após inserir a estrutura básica acima no novo documento, estamos com tudo pronto para começar a marcar a nossa receita:
- Dentro da tag <body> insira um novo elemento <h1>, que será o título principal do documento
- O elemento <h1> deve envolver o título "Panqueca de Banana (rende 1 porção)" sem aspas
- Em seguida insira um parágrafo <p>
- O elemento <p> deve envolver o texto "Tempo de preparo: 5 min." sem as aspas
- Insira um elemento <h2> que servirá como subtítulo
- O elemento <h2> deve envolver o texto "Ingredientes"
- Insira um elemento <ul> que cria uma lista não ordenada (unordered list)
- Dentro dessa lista insira quatro elementos <li> que são os itens da lista (list item)
- Cada elemento <li> deve envolver um item ou ingrediente da lista
10. Insira um novo elemento <h2>
11. O novo elemento <h2> deve envolver o texto "Modo de Preparo" sem as aspas
12. Insira um elemento <ol> que cria uma lista ordenada (ordered list)
13. Insira sete elementos <li> dentro da lista ordenada criada no passo anterior
14. Cada elemento <li> deve envolver um dos passos do modo de preparo da receita.
Após isso, salve o documento na área de trabalho ou em alguma pasta de fácil localização. Abra o arquivo salvo clicando duas vezes sobre o ícone criado com o nome dado.
PARABÈNS! Você marcou a sua primeira receita usando puramente html. Repare que embora tenhamos feito uma marcação simples, o navegador se esforça para exibir o conteúdo com uma formatação padrão destacando e diferenciando as partes do documento como título (fonte maior e em negrito, parágrafo fonte simples começando em uma nova linha, subtítulos fonte menor que o título principal e em negrito, lista não ordenada contendo marcadores pontuados e elementos com recuo à esquerda, lista ordenada contendo os números da ordem em que os passos devem ser seguidos.
Desafio:
Uma sugestão para você desafiar seus novos conhecimentos é: acesse o google imagens, baixe uma foto pequena de panquecas e insira no documento que criamos anteriormente. Você lembra como inserir imagens em um documento html? Dica: para simplificar mova a foto para o mesmo local onde está o arquivo html criado e no argumento src="" onde se espera uma url, insira o nome do arquivo de foto com sua extensão, por exemplo: se ao baixar a foto o nome do arquivo for "bananas.jpeg" insira o seguinte argumento src na tag <img>: <img src="bananas.jpeg">. Lembre-se de mover a foto para o mesmo local do arquivo, o que fará com que o caminho como exemplificado acima seja mais simples e não exija inserção de nomes de pastas e subpastas.
Conclusão
Em postagens futuras sobre estilo veremos como tornar nossas páginas mais atrativas visualmente. No momento a preocupação principal é reforçar os conhecimento aprendidos, inserir gradativamente novos conceitos e praticar muito o html básico que é a estrutura fundamental do desenvolvimento web. Até a próxima!
Comentários
Postar um comentário