MM2 WEB01 Exercicio

Multimédia II | Ano Letivo 2023/2024
Licenciaturas em Línguas e Estudos Editoriais e Línguas e Relações Empresariais

Departamento de Comunicação e Arte
MÓDULO DE WEB
Introdução ao HTML
Duração 60 minutos
Sumário • Introdução software de edição;
• Implementação de uma página HTML.
Preparação • Crie uma nova pasta HTML1 no seu ambiente de trabalho;
• Aceda ao eLearning e descarregue o ficheiro relativo à aula para dentro da pasta
criada anteriormente.
• Descompacte o ficheiro.
• Utilize os recursos da pasta “/materiais” como referência visual para a resolução
do exercício.
1 Introdução ao software de edição
1.1. Inicie o programa Visual Studio Code:

• Windows: Menu Iniciar > Programas > Visual Studio Code
• Macintosh: Launchpad > Visual Studio Code
1.2. Instalar o package HTML Preview (opcional)*:

• Disponível em https://marketplace.visualstudio.com/items?itemName=george-
alisson.html-preview-vscode (caso ainda não esteja instalado)
° Ir a Visual Studio Code > View > Extensions
° Na barra de pesquisa escrever HTML Preview
° Selecionar a extensão HTML Preview e clicar Install
° Ao lado do botão Install, verificar se a extensão está ativa: deverá aparecer um
botão azul Disable.
*Nota: Apesar desta extensão permitir a visualização do HTML, por vezes falha. Aconselha-se,
portanto, que a visualização da página seja feita através da abertura do ficheiro HTML num
browser, p. ex. Google Chrome, Mozilla Firefox, Safari, etc.
1
1.3. Explorar os painéis da interface gráfica do Visual Studio Code:

• Ir a File > Open...
• Abrir o ficheiro primeira_pagina.html, que está na pasta Materiais.
• Verificar a visualização do ficheiro no painel do lado direito.
2 Implementação de uma página HTML
2.1. Crie um novo documento:

• Na barra lateral Explorer, clicar no botão direito do rato ou ir a File > New File
• Nomear o ficheiro como index.html1;
• Premir ENTER;
• Guarde o ficheiro sempre que fizer alterações: File > Save.
1
O ficheiro que corresponde à página inicial de um website deve intitular-se, impreterivelmente,
index.html, já que essa é a página que, por defeito, os servidores web leem para apresentar o website.
2
2.2. Construir a página com recurso às tags HTML abordadas na aula:

• Comece por criar a estrutura base duma página HTML:
• Copie o texto presente no ficheiro MM2_WEB01-texto.txt para dentro do <body>;

• Aplique as tags necessárias* de modo a obter um resultado idêntico ao que se pode
observar no ficheiro MM2_WEB01-FINAL.pdf.
° Título de primeiro nível: Welcome to Aveiro's Coffee House!, About us, Events,
Drinks;
° Título de segundo nível: Past events, Coffee beverages, Non-coffee beverages;
° Título de terceiro nível: Espresso €1 popular, Americano €1.6, Cappuccino
€2.5, Latte €2.5, Macchiato €2.8, Hot chocolate €2 popular, Herbal tea €1.2, Iced
tea €1.35;
° Os restantes textos são parágrafos.
2.3. Inserir Hiperligações nas palavras: drinks e Multimédia II.

• Insira as hiperligações conforme instruções abaixo:
° drinks – Hiperligação para a seção #drinks. Para esta hiperligação deve criar
um id denominado drinks na tag H1 em Beverages.
° Multimédia II – Hiperligação para o seguinte link: https://www.ua.pt/pt/uc/2637,
que deve abrir num novo separador.
DICA: Explore o atributo target da tag <a>.
2.4. Inserir uma imagem na sua página.

° Insira a imagem imagem.jpeg que está na pasta Materiais
° Utilize a tag <img>
DICA: Tenha atenção ao caminho da imagem.
*Nota: Consultar tags nos slides da aula teórica.
Finalização Mostre o resultado final ao docente.

No final desta aula, • A estrutura um documento HTML;
compreendi: • A sintaxe de elementos HTML que estruturam um documento;
• A implementação de uma página HTML, utilizando um editor de texto.

MM2 WEB01 Exercicio

Enviado por

Dados do documento

Título original

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

MM2 WEB01 Exercicio

Enviado por

Direitos autorais:

Formatos disponíveis

Multimédia II | Ano Letivo 2023/2024

Licenciaturas em Línguas e Estudos Editoriais e Línguas e Relações Empresariais

1 Introdução ao software de edição

1.1. Inicie o programa Visual Studio Code:

1.2. Instalar o package HTML Preview (opcional)*:

1.3. Explorar os painéis da interface gráfica do Visual Studio Code:

2 Implementação de uma página HTML

2.1. Crie um novo documento:

2.2. Construir a página com recurso às tags HTML abordadas na aula:

• Copie o texto presente no ficheiro MM2_WEB01-texto.txt para dentro do <body>;

2.3. Inserir Hiperligações nas palavras: drinks e Multimédia II.

2.4. Inserir uma imagem na sua página.

*Nota: Consultar tags nos slides da aula teórica.

Finalização Mostre o resultado final ao docente.

Você também pode gostar