Atividade 5

UFCD 9963 – Edição Web
Atividade nº 5 – HTML Formador: André Campos
Utilize o Visual Studio Code (ou outro editor…) para realizar os exercícios
propostos.
No final, todos os ficheiros produzidos deverão ser submetidos como resposta à
Tarefa.
Pretende-se com esta atividade a implementação de um site (parte de front-end) que tem como
objetivo apresentar toda a informação relativa a uma conferência fictícia sobre desenvolvimento
Web que vai decorrer em Portugal.
O front-end é composto por:
• uma Single Page Application, com acesso público, que exibe toda a informação relativa à
conferência, desde a possibilidade de se registar no evento até à informação sobre
oradores e sponsors;
Nesta atividade iremos apenas desenvolver algumas partes da SPA (Single Page
Application), cujo layout se apresenta a seguir. Não será implementada a funcionalidade
de inscrição no evento.
Figura 1- Layout da página principal

Exercício 1 – Configurações iniciais
1. Extraia o conteúdo do ficheiro “Atividade5.zip”. Todos os ficheiros necessários à

implementação do site, bem como a estrutura de pastas a utilizar, estarão dentro da pasta
“frontend”.
2. Execute o VSCode e neste, abra a pasta “frontend”.
3. Edite o ficheiro index.html. Poderá constatar que este já contém a estrutura base HTML, bem
como as referências CDN (Content Delivery Network) à framework Bootstrap, que iremos
utilizar.
4. Imediatamente a seguir a <body> construa o seguinte esqueleto de código.
Exercício 2 – Barra de Navegação
No topo da página Web será colocada uma barra com um menu horizontal que vai permitir a
navegação interna da SPA. Para tal, usamos o elemento <nav>, que surgiu no HTML5. Este
elemento representa o agrupamento principal de links de navegação de uma página Web.
De forma a tornar a barra responsiva e com uma aparência mais sofisticada, serão usadas
várias classes do Bootstrap, entre as quais navbar. Tipicamente, esta é combinada com outras
classes:
• a de recolhimento responsivo navbar-expand-xl | lg | md | sm, que empilha a barra de
navegação verticalmente em ecrãs de dimensão extragrande (xl), grande (lg), média (md)
ou pequena (sm);
• a classe navbar-dark | light, que serve para formatar a cor de fundo da barra;
• a classe fixed-top, que permite fixar a barra no topo do ecrã.
1. Altere o elemento <nav> de forma que este utilize as classes atrás mencionadas da seguinte
forma.
2. Defina um contentor com a classe container, para agregar todo o conteúdo da barra de
navegação e de seguida, inclua o nome da página Web. Para tal, formate o texto com a
classe navbar-brand, usada para destacar o nome da marca, do logótipo ou do projeto da
página.
3. Como o atributo href (do elemento <a> do ponto anterior) aponta para uma secção interna da
SPA, temos de definir essa secção. Neste caso, ao clicar no nome da página Web presente
na barra, deverá ser apresentado o início da página. Basta então, colocar o id
correspondente no elemento <body>.
4. Voltando à barra de navegação, imediatamente a seguir ao elemento <a>, prossiga com a

definição de um contentor, que irá agregar o conteúdo que pretende que seja recolhido
(elementos de navegação) num elemento <div> com as classes collapse e navbar-
collapse.
5. Defina os itens de navegação dentro de um elemento <ul> com a classe navbar-nav. Os
itens de navegação são definidos como elementos <li> com uma classe nav-item, seguida
por um elemento <a> com uma classe nav-link.
Os itens de navegação são formatados com caixa alta, ou seja, maiúsculas (classe text-
uppercase), e alinhados à direita (classe ml-auto).
Todos os atributos href apontam para secções internas da SPA, definidas previamente no
exercício 1.
6. A ação de expandir/colapsar os elementos é controlada por um botão com a classe navbar-

toggler e dois atributos de dados:
• O primeiro, data-toggle, é usado para informar o JavaScript sobre o que fazer com o
botão;
• O segundo, data-target, indica qual é o elemento a alternar através do
emparelhamento com o atributo id.
Posicione o elemento <button> imediatamente antes da <div> com o id=navbarResponsive.
7. Será também incluído no botão, aquilo a que normalmente se chama “botão de hambúrguer”.
Este irá alternar a visibilidade dos elementos que estão no conteúdo dos itens de navegação.
8. Teste o site com o browser, redimensione a janela e observe o resultado. Teste a barra de
navegação.
Exercício 3 – Cabeçalho
Nesta secção, é definido o cabeçalho da SPA, que será composto por uma imagem, um título e
um botão para inscrição na conferência.
1. Posicione-se no elemento <header>. No seu interior, defina um elemento <div> com a

classe container. Este elemento irá agregar um outro elemento <div>, com o título principal
e um botão para inscrição. Proceda às seguintes alterações…
O elemento <header> é estilizado por uma regra CSS através da qual são definidas a
imagem de fundo e várias configurações relativas ao seu tamanho, posicionamento e
repetição (propriedades background-*). A classe masthead já está definida no ficheiro
webconf.css.
A classe intro-text define o espaçamento interno superior e inferior para os textos do título e
para o botão. Esta classe também está definida no ficheiro webconf.css, pelo que neste
ponto não tem de executar mais nada.
2. O título será composto por duas frases representadas por dois elementos <div>. Proceda às
seguintes alterações no ficheiro index.html.
As classes utilizadas já estão definidas no ficheiro webconf.css, pelo que neste ponto não
tem de executar mais nada.
3. Por último é definido um botão como um elemento <a>, que vai possibilitar ao utilizador a
inscrição na conferência. Proceda às seguintes alterações no ficheiro index.html.
4. Teste o site com o browser e observe o botão.

5. As classes base em Bootstrap para estilizar o botão podem ser consultadas aqui. Contudo,
podemos efetuar determinadas alterações a estas classes. Abra o ficheiro webconf.css e
descomente o conjunto de regras em comentário (linhas 66 a 89).
6. Teste novamente o site com o browser e observe as diferenças.
Exercício 4 – Secção “Sobre”

A secção “Sobre” irá exibir informações básicas sobre a conferência, nomeadamente a data,
local e tópicos abordados.
1. Para representar uma secção é utilizado o elemento semântico <section>, no qual é incluído
um elemento <div> com a classe container para definir uma largura fixa, centrada e com
conteúdo responsivo. Por sua vez, este elemento terá duas linhas definidas por elementos
<div> com classes row. Proceda às seguintes alterações no ficheiro index.html…
2. Na primeira linha, defina o título e o texto…
No seu interior, é definida uma única coluna com texto centrado que abrange toda a largura
da grelha em dispositivos de grande dimensão (largura de ecrã igual ou maior que 992
píxeis). A coluna inclui os textos como cabeçalhos <h2> e <h3> estilizados.
As classes section-heading e section-subheading já estão definidas no ficheiro
webconf.css.
3. Na segunda linha, são definidos os tópicos da conferência, organizados em duas colunas de
igual tamanho.
4. Cada tópico será representado por um ícone, um título e uma breve descrição.
Um ícone é um elemento gráfico muito comum em páginas Web. Por vezes, os ícones
disponíveis não são suficientes para cobrir as necessidades. Para colmatar este problema,
existem várias bibliotecas de ícones disponíveis na Web.
Uma das mais conhecidas é a Font Awesome (https://fontawesome.com/). O <link> para
utilizar os recursos desta biblioteca já faz parte do código disponibilizado e pode ser
encontrado dentro do <head>, pelo que não terá de copiar o código abaixo.
Um ícone Font Awesome é composto por um prefixo de estilo e um nome, e deve ser usado
com elementos inline.
• Prefixo de estilo – fas para estilo sólido e fab para marcas
• Nome – nome do ícone, precedido por fa-
Segue-se a descrição da construção dos tópicos. Proceda às seguintes alterações no ficheiro

index.html…
Para empilhar vários ícones, são usadas as seguintes classes:
• fa-stack no pai
• fa-stack-1x no ícone de tamanho regular
• fa-stack-2x no ícone maior
• fa-inverse para definir uma cor de ícone alternativa
5. Teste o site com o browser, redimensione a janela e observe o resultado. Teste a navegação
do site.
Exercício 5 – Secção “Rodapé”

A secção “Rodapé” é a mais curta de todas, pois aqui basta definir a informação típica que surge
nos rodapés dos sites: nome da empresa, informação sobre copyright e links para redes sociais,
entre outras opções. Neste site, vamos incluir apenas informação sobre o copyright e um
conjunto de ícones que apontam para redes sociais.
1. Altere o elemento <footer> de forma que este inclua a seguinte estrutura.

2. Para as informações de copyright, adicione um elemento <span>. Execute estas alterações
no ficheiro index.html.
3. Por último, adicione os ícones para as redes sociais, organizados numa lista desordenada
<ul>. Execute estas alterações no ficheiro index.html.
Repare que a classe CSS social-buttons já está definida no ficheiro webconf.css. As

restantes classes pertencem à framework Bootstrap e podem ser consultadas aqui.
4. Teste o site com o browser, redimensione a janela e observe o resultado.

Exercício 6 – Secção “Speakers”
A secção “Speakers” tem como objetivo exibir informação sobre os oradores que irão participar
na Conferência. A interface gráfica desta secção é exibida na figura seguinte.
A lista de oradores é organizada por linhas. Cada linha terá três colunas, cada uma com a
informação relativa a um orador.
1. Posicione-se no elemento <section> cujo id é speakers e proceda às seguintes alterações

no código.
2. Posicione-se no elemento <div> cujo id é renderSpeakers e adicione a seguinte estrutura
para incluir 3 oradores.
3. A informação do orador é composta por uma foto, um nome, um cargo e três ícones (no
máximo) com links para as redes sociais. Segue-se um exemplo do código para representar
o orador número 1. Transcreva-o para o seu código.
4. Adapte o código anterior para incluir os outros dois oradores. As informações (nome e cargo)
estão na imagem da interface gráfica para esta secção.
do site.
Exercício 7 – Secção “Sponsors”
A secção “Sponsors” tem como objetivo exibir informação sobre os patrocinadores da
Conferência. A interface gráfica desta secção é exibida na figura seguinte.
A lista de sponsors é organizada numa única linha com quatro sponsors em dispositivos de
média dimensão (largura de ecrã igual ou superior a 768 píxeis).
1. Posicione-se no elemento <section> cujo id é sponsors e proceda às seguintes alterações

no código.
2. Posicione-se no elemento <div> cujo id é renderSponsors e adicione a seguinte estrutura

para incluir os 4 patrocinadores.
3. A informação de um sponsor resume-se a um logótipo clicável. Tendo isto em conta, é fácil
perceber que há apenas um elemento <img> dentro de um elemento <a>. Segue-se um
exemplo do código para representar o sponsor número 1. Transcreva-o para o seu código.
4. Adapte o código anterior para incluir os outros três sponsors. Os sponsors a incluir estão na
imagem da interface gráfica para esta secção e as imagens dos logótipos estão na pasta
“img”.
do site.
Exercício 8 – Secção “Contactos”

A secção “Contactos” tem como objetivo possibilitar ao utilizador o envio de mensagens
(comentários, sugestões, dúvidas, por exemplo). A interface gráfica desta secção é exibida na
figura seguinte.
O envio de mensagens é feito através de um formulário organizado numa linha com duas
colunas. Numa nova linha, é incluído um botão que irá submeter o formulário.
1. Posicione-se no elemento <section> cujo id é contacts e proceda às seguintes alterações

no código.
2. Na <div> onde está o comentário , escreva a seguinte estrutura de suporte
ao formulário.
3. Implemente os campos nome, email e telemóvel. Estes campos estão agregados em

elementos <div> com a classe form-group.
4. Implemente o campo mensagem.
5. Implemente o botão de envio da mensagem.
O botão é colocado dentro de uma coluna, que abrange a grid do layout, sendo formatada
com alinhamento ao centro.
do site.

Atividade 5

Enviado por

Direitos autorais:

Formatos disponíveis

Atividade 5

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

Atividade 5

Enviado por

Direitos autorais:

Formatos disponíveis

UFCD 9963 – Edição Web

Atividade nº 5 – HTML Formador: André Campos

Figura 1- Layout da página principal

1. Extraia o conteúdo do ficheiro “Atividade5.zip”. Todos os ficheiros necessários à

4. Voltando à barra de navegação, imediatamente a seguir ao elemento <a>, prossiga com a

6. A ação de expandir/colapsar os elementos é controlada por um botão com a classe navbar-

1. Posicione-se no elemento <header>. No seu interior, defina um elemento <div> com a

4. Teste o site com o browser e observe o botão.

6. Teste novamente o site com o browser e observe as diferenças.

Exercício 4 – Secção “Sobre”

2. Na primeira linha, defina o título e o texto…

Segue-se a descrição da construção dos tópicos. Proceda às seguintes alterações no ficheiro

Exercício 5 – Secção “Rodapé”

1. Altere o elemento <footer> de forma que este inclua a seguinte estrutura.

Repare que a classe CSS social-buttons já está definida no ficheiro webconf.css. As

4. Teste o site com o browser, redimensione a janela e observe o resultado.

1. Posicione-se no elemento <section> cujo id é speakers e proceda às seguintes alterações

1. Posicione-se no elemento <section> cujo id é sponsors e proceda às seguintes alterações

2. Posicione-se no elemento <div> cujo id é renderSponsors e adicione a seguinte estrutura

Exercício 8 – Secção “Contactos”

1. Posicione-se no elemento <section> cujo id é contacts e proceda às seguintes alterações

3. Implemente os campos nome, email e telemóvel. Estes campos estão agregados em

5. Implemente o botão de envio da mensagem.

Você também pode gostar