Aula Prática - Solução

ANHANGUERA EDUCACIONAL
SISTEMAS DE INFORMAÇÃO - BACHARELADO
PAULO DÓREA MACHADO
PROGRAMAÇÃO PARA INTERNET EM FRONT-END:

Desenvolver uma interface front-end simples em HTML e CSS contendo texto informativo de
receita e uma imagem do prato escolhido, e ainda contendo botões de paginação utilizando o
framework bootstrap 5.
São Paulo
2023
PAULO DÓREA MACHADO
PROGRAMAÇÃO PARA INTERNET EM FRONT-END:

Desenvolver uma interface front-end simples em HTML e CSS contendo texto informativo de
receita e uma imagem do prato escolhido, e ainda contendo botões de paginação utilizando o
Trabalho textual apresentado como requisito

parcial para a obtenção de média semestral.
Tutor: Marcio Barbosa de Lima
São Paulo
2023
SUMÁRIO
1 INTRODUÇÃO 6
2 DESENVOLVIMENTO 7
2.1 Criando o arquivo HTML 7
2.2 Criando o arquivo CSS 10
2.3 Criando o arquivo JavaScript 11
2.4 Empregando o Bootstrap 12
3 CONCLUSÃO 13
REFERÊNCIAS 15
1 INTRODUÇÃO
Neste trabalho será apresentado a solução para as tarefas da aula prática da

matéria Programação para internet em front-end que teve por objetivo o desenvolvimento de
uma interface front-end simples em HTML e CSS contendo texto informativo de receita e
uma imagem do prato escolhido, e ainda contendo botões de paginação utilizando o
Nos dias de hoje, a presença online é uma necessidade para empresas e
indivíduos. E para isso, o desenvolvimento de sites é uma das ferramentas mais importantes.
O front-end é a parte visual do site e é responsável pela interação do usuário com a interface.
HTML, CSS e JavaScript são as principais tecnologias utilizadas para a
criação do front-end de um site. O HTML é a base da estrutura do site, enquanto o CSS é
responsável pelo estilo e aparência visual e o JavaScript permite a interação do usuário com a
página.
Além dessas tecnologias, o Bootstrap é um framework front-end
amplamente utilizado para o desenvolvimento de sites responsivos e móveis. Ele oferece
componentes prontos e uma grade responsiva que facilita o desenvolvimento de interfaces
modernas e adaptáveis.
2 DESENVOLVIMENTO
2.1 Criando o arquivo HTML

O primeiro passo para o desenvolvimento do projeto é a criação do arquivo
HTML, que servirá como a estrutura do site. Nesse arquivo, serão definidos os elementos da
página, como cabeçalhos, parágrafos, imagens e links, além de tags que serão utilizadas para
incorporar o arquivo CSS e JavaScript na página.
Tabela 1 - Código HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bo
otstrap.min.css" rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/boot
strap.bundle.min.js"></script>
<link href="css/style.css" rel="stylesheet">
<script src="js/paginar.js"></script>
<title>Livro de receitas</title>
</head>
<body>
<div class="main">
<div id="pag1" class="active">
<h2 class="item">Bobó de camarão</h2>
<img class="item" src="images/bobo.jpg" alt="Bobó de
Camarão">
<p class="item">Ingredientes</p>
<ul class="item">
<li>1Kg de Camarão</li>
<li>2 Colheres de sopa de Azeite de Dendê</li>
<li>200ml de Leite de Côco</li>
<li>1Kg de Macaxeira</li>
<li>Coentro a gosto</li>
<li>4 Tomates</li>
<li>2 Cebolas</li>
<li>Azeite de Oliva a gosto</li>
<li>1 Colher de sopa de Extrato de Tomate</li>
<li>Sal a gosto</li>
</ul>
<p class="item">Preparo</p>
<ul class="item">
<li>Cozinhe a macaxeira (4 a 5 pedaços) retire o talo
central e passe no liquidificador com água do cozimento. Se
precisar, coloque mais água para deixar o mingau grosso.</li>
<li>Descasque dois tomates e uma cebola média branca.
Pique e refogue bem com o extrato de tomate e um pouco de
azeite de oliva. Coloque ½ xícara de água no refogado.</li>
<li>Passe tudo no liquidificador e volte à panela para
ir de novo ao fogo. Quando ferver, lave os camarões em água
corrente e ponha no molho. Deixe ferver uns três minutos.</li>
<li>Coloque a mistura no mingau da macaxeira e coloque
meia garrafinha de leite de coco e duas colheres de sopa de
dendê e leve ao fogo.</li>
<li>Lave alguns galhos de coentro e amarre com uma
linha na alça da panela e deixe ferver um pouco mexendo para
não grudar na panela. Retifique o sal e ponha mais um pouco de
azeite de oliva.</li>
<li>Deixe ferver por uns 10 min. Retire o coentro
apague o fogo e bom apetite.</li>
</ul>
</div>
<div id="pag2">
<h2 class="item">Caldo verde</h2>
<img class="item" src="images/caldo.jpg" alt="Bobó de
Camarão">
<ul class="item">
<li>4 batatas médias</li>
<li>1 tablete de caldo de galinha</li>
<li>1 colher (sopa) de azeite</li>
<li>1 dente de alho</li>
<li>1 pedaço pequeno de gengibre</li>
<li>1 colher (sopa) rasa de sal ou a gosto</li>
<li>5 xícaras (chá) de água</li>
<li>1 xícara (chá) de couve manteiga cortada em
tiras</li>
<li>1 lingüiça calabresa defumada cortada em
rodelas</li>
</ul>
<ul class="item">
<li>Na panela de pressão, coloque a batata, caldo de
galinha, azeite, alho, gengibre, água e sal.</li>
<li>Cozinhe por cerca de 10 minutos, contando o tempo
depois que a panela começar a chiar, e até a batata
desmanchar.</li>
<li>Bata tudo no liquidificador e volte para a panela.
Acrescente as rodelas de calabresa e ferva.</li>
<li>Se quiser adicionar couve, corte-as em tiras
finas, ferva uma vez e escorra, adicione um pouco de sal e
cozinhe mais um pouco até amaciar as folhas e coloque dentro
do caldo.</li>
<li>Na hora de servir, coloque um fio de azeite e bom
apetite.</li>
</div>
<div id="pag3">
<h2 class="item">Torta de prestígio</h2>
<img class="item" src="images/bolo.jpg" alt="Bobó de
Camarão">
<ul class="item">
<li>1 lata de leite condensado</li>
<li>5 colheres de chocolate</li>
<li>1 lata de creme de leite</li>
<li>100g de coco ralado</li>
</ul>
<ul class="item">
<li>Em uma panela coloque o coco e leite condensado,
sempre mexendo até soltar da panela e reserve.</li>
<li>Em outra panela coloque o creme de leite e o
chocolate. O ponto é o mesmo, até que solte da panela.</li>
<li>Unte uma forma e monte na sequência das camadas,
leve ao forno até o bolo crescer e bom apetite.</li>
</div>
</div>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#"
onclick="paginar('pag1')">1</a></li>
</ul>
</body>
</html>
Fonte: Elaborada pelo autor
2.2 Criando o arquivo CSS

Em seguida, o arquivo CSS será criado para definir o estilo e a aparência
visual do site. Nele podem ser definidos elementos como cores, fontes, tamanhos e disposição
dos elementos na página. É importante manter um código organizado para facilitar a
manutenção futura.
Tabela 2 - Código CSS

.main {
margin: auto;
width: 80%;
}
.main img, h2 {
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
text-align: center;
}
.main p {
font-weight: bold;
}
.item {
display: none;
}
.active .item {
display: block;
}
2.3 Criando o arquivo JavaScript
O arquivo JavaScript será criado para adicionar interatividade à página.

Nesse arquivo, serão definidas funções e eventos para permitir que o usuário interaja com a
página, neste exemplo, o código foi definido para dar funcionalidade à paginação. É
importante também manter um código organizado para facilitar a manutenção futura.
Tabela 3 - Código JavaScript

function paginar(pagina) {
const ativo = document.querySelectorAll('[class="active"]');
ativo.forEach(element => {
element.removeAttribute("class");
});
paginacao = document.getElementById(pagina);
paginacao.setAttribute("class", "active");
}
2.4 Empregando o Bootstrap
Por fim, o Bootstrap será empregado para agilizar o desenvolvimento do

site. O framework oferece diversas funcionalidades prontas, como uma grade responsiva que
facilita a disposição dos elementos na página e componentes como menus de navegação e
carrosséis de imagens. Neste exemplo, o framework foi usado nos links da paginação para dar
um efeito nos links. Com o uso do Bootstrap, é possível criar um site responsivo e moderno
com menos esforço.
Tabela 1 - Link CDN para acesso ao Bootstrap5 e paginação

<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bo
otstrap.min.css" rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/boot
strap.bundle.min.js"></script>
(...)
<ul class="pagination">
</ul>
Fonte: Elaborado pelo autor
3 CONCLUSÃO
Com esses passos, será possível desenvolver um site completo e funcional

utilizando HTML, CSS, JavaScript e Bootstrap. É importante lembrar que a documentação e a
busca por referências são essenciais durante o processo de desenvolvimento para a resolução
de problemas e para obter ideias para o design e a interatividade da página. Observe nas
imagens a seguir o resultado do trabalho desenvolvido:
Imagem 1 - Estrutura de pastas
Imagem 2 - 1ª página


REFERÊNCIAS
W3Schools. HTML Tutorial. Disponível em <https://www.w3schools.com/html/>. Acesso

em: 17 de abr. de 2023.
MDN Web Docs. CSS | MDN. Disponível em
<https://developer.mozilla.org/pt-BR/docs/Web/CSS>. Acesso em: 17 de abr. de 2023.
MDN Web Docs. JavaScript | MDN. Disponível em
<https://developer.mozilla.org/pt-BR/docs/Web/JavaScript>. Acesso em: 17 de abr. de 2023.
Bootstrap. Bootstrap · The most popular HTML, CSS, and JS library in the world. Disponível
em <https://getbootstrap.com/>. Acesso em: 17 de abr. de 2023.

Aula Prática - Solução

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Aula Prática - Solução

Enviado por

Direitos autorais:

Formatos disponíveis

ANHANGUERA EDUCACIONAL

SISTEMAS DE INFORMAÇÃO - BACHARELADO

PAULO DÓREA MACHADO

PROGRAMAÇÃO PARA INTERNET EM FRONT-END:

PROGRAMAÇÃO PARA INTERNET EM FRONT-END:

Trabalho textual apresentado como requisito

Tutor: Marcio Barbosa de Lima

Neste trabalho será apresentado a solução para as tarefas da aula prática da

2.1 Criando o arquivo HTML

Tabela 1 - Código HTML

2.2 Criando o arquivo CSS

Tabela 2 - Código CSS

2.3 Criando o arquivo JavaScript

O arquivo JavaScript será criado para adicionar interatividade à página.

Tabela 3 - Código JavaScript

Por fim, o Bootstrap será empregado para agilizar o desenvolvimento do

Tabela 1 - Link CDN para acesso ao Bootstrap5 e paginação

Com esses passos, será possível desenvolver um site completo e funcional

Imagem 1 - Estrutura de pastas

Fonte: Elaborada pelo autor

Fonte: Elaborada pelo autor

Fonte: Elaborada pelo autor

Fonte: Elaborada pelo autor

W3Schools. HTML Tutorial. Disponível em <https://www.w3schools.com/html/>. Acesso

Você também pode gostar