Scribd
Carregar
9 visualizações5 páginas

Roteiro de Prática - Revisão v1

O documento é um roteiro de prática para revisão de HTML5 e CSS inline, com o objetivo de aplicar conceitos básicos em exercícios práticos. Ele inclui instruções para criar um arquivo index.html e realizar uma série de exercícios que envolvem a estruturação de um documento HTML, adição de elementos como títulos, parágrafos, listas, cartões de conteúdo, imagens, vídeos e tabelas. Cada exercício apresenta desafios específicos para aprimorar as habilidades em HTML5 e CSS inline.

Enviado por

Ramon Santos Costa
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
9 visualizações5 páginas

Roteiro de Prática - Revisão v1

O documento é um roteiro de prática para revisão de HTML5 e CSS inline, com o objetivo de aplicar conceitos básicos em exercícios práticos. Ele inclui instruções para criar um arquivo index.html e realizar uma série de exercícios que envolvem a estruturação de um documento HTML, adição de elementos como títulos, parágrafos, listas, cartões de conteúdo, imagens, vídeos e tabelas. Cada exercício apresenta desafios específicos para aprimorar as habilidades em HTML5 e CSS inline.

Enviado por

Ramon Santos Costa
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 5

Roteiro de Prática - Revisão de HTML5 e CSS Inline

Objetivo:
Aplicar os conceitos básicos de HTML5 e CSS inline em exercícios práticos,
simulando atividades de produção de conteúdo para plataformas LMS.

Instruções Gerais:
• Crie um arquivo index.html para desenvolver esta atividade.
• Cada exercício possui um desafio específico para aprimorar a prática com
HTML5 e CSS inline.

Exercícios

Exercício 1: Estrutura Básica do Documento HTML


Desafio:
1. Crie o arquivo index.html e configure a estrutura básica do HTML5.
2. Insira as tags principais: <!DOCTYPE html>, <html>, <head>, <title>, e
<body>.
3. Defina o título da página como "Prática de CSS Inline para LMS".
Dica: Lembre-se de configurar a meta tag de charset e viewport no <head> para
garantir compatibilidade com dispositivos.

Código com a solução:

Exercício 2: Título Principal (Heading)


Desafio:
1. Adicione um título principal (<h1>) dentro do <body> com o texto "Bem-
vindo à Prática de CSS Inline!".
2. Aplique a cor azul ao título usando CSS inline (exemplo: style="color:
blue;").

Código com a solução:

Exercício 3: Descrição com Parágrafo

Desafio:
1. Insira um parágrafo (<p>) abaixo do título com o texto: "Nesta prática,
aprenderemos a estilizar elementos HTML usando CSS inline."
2. Aplique cor cinza e defina o tamanho da fonte como 18px usando CSS inline.

Código com a solução:

Exercício 4: Lista de Objetivos

Desafio:
1. Adicione uma lista não ordenada (<ul>) com os seguintes itens:
o Aplicar cores e tamanhos de fontes.
o Definir margens e alinhamentos. (Ex.: margin-top: 10px)
o Adicionar bordas aos elementos. (Ex: border: 1px solid black)
2. Estilize cada item (<li>) com uma cor de texto única e uma margem
superior usando CSS inline.

Código com a solução:

Exercício 5: Cartão de Conteúdo


Desafio:
1. Crie uma div simulando um cartão de conteúdo.
2. Aplique uma borda cinza, cor de fundo clara, padding de 20px e largura
máxima de 400px usando CSS inline.
3. Dentro da div, adicione:
o Um título (<h2>) com o texto "Cartão de Conteúdo" e a cor azul
escuro.
o Um parágrafo (<p>) com o texto "Este é um exemplo de cartão de
conteúdo que pode ser usado em plataformas LMS."
o Um botão (<button>) com o texto "Saiba Mais", cor de fundo azul
escuro e texto branco.

Código com a solução:

Exercício 6: Inserção de Imagem


Desafio:
1. Adicione uma imagem dentro do cartão de conteúdo (div) usando a tag
<img>.
2. Estilize a imagem com largura de 100% e bordas arredondadas (por
exemplo, style="width: 100%; border-radius: 8px;").

Código com a solução:

Exercício 7: Inserção de Vídeo


Desafio:
1. Adicione um vídeo logo abaixo da tabela para enriquecer o conteúdo da
página.
2. Use a tag <video> com os atributos controls, width, e height, permitindo
que o usuário controle a reprodução do vídeo.
3. Aplique uma borda arredondada e sombra ao vídeo usando CSS inline para
destacá-lo visualmente na página.
4. Inclua um arquivo de vídeo local ou um link para vídeo externo usando o
atributo src.
Instruções:
• Se não tiver um arquivo de vídeo, você pode usar o link direto para um vídeo
ou usar um recurso local fictício como exemplo (src="meu_video.mp4").
• Aplique uma borda de 2px sólida cinza e uma leve sombra para destacar o
vídeo.

Código com a solução:

Exercício 8: Criando uma Tabela de Informações


Desafio:
1. Crie uma tabela logo abaixo do cartão de conteúdo para exibir informações
em um formato organizado.
2. Adicione uma linha de cabeçalho (<tr>) com três colunas: "ID", "Nome do
Conteúdo", e "Descrição".
3. Adicione três linhas de conteúdo, com dados fictícios para simular
atividades de LMS.
4. Estilize a tabela com bordas para as células (<td> e <th>), alinhamento
central, e uma largura de 100% usando CSS inline.

Código com a solução:


<table style="width: 100%; border-collapse: collapse; margin-top:
20px; font-family: Arial, sans-serif;">
<tr style="background-color: #4CAF50; color: white;">
<th style="border: 1px solid #ddd; padding: 12px; text-align:
center; font-size: 16px;">ID</th>
<th style="border: 1px solid #ddd; padding: 12px; text-align:
center; font-size: 16px;">Nome do Conteúdo</th>
<th style="border: 1px solid #ddd; padding: 12px; text-align:
center; font-size: 16px;">Descrição</th>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="border: 1px solid #ddd; padding: 10px; text-align:
center; border-radius: 4px;">1</td>
<td style="border: 1px solid #ddd; padding: 10px; text-align:
center; border-radius: 4px;">Introdução ao CSS
</td>
<td style="border: 1px solid #ddd; padding: 10px; text-align:
center; border-radius: 4px;">Conceitos básicos de
estilização</td>
</tr>
<tr style="background-color: #e7f3e7;">
<td style="border: 1px solid #ddd; padding: 10px; text-align:
center; border-radius: 4px;">2</td>
<td style="border: 1px solid #ddd; padding: 10px; text-align:
center; border-radius: 4px;">Estrutura HTML</td>
<td style="border: 1px solid #ddd; padding: 10px; text-align:
center; border-radius: 4px;">Criação de páginas
HTML</td>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="border: 1px solid #ddd; padding: 10px; text-align:
center; border-radius: 4px;">3</td>
<td style="border: 1px solid #ddd; padding: 10px; text-align:
center; border-radius: 4px;">JavaScript Básico
</td>
<td style="border: 1px solid #ddd; padding: 10px; text-align:
center; border-radius: 4px;">Primeiros passos com
JavaScript</td>
</tr>
</table>
Apresente o código com a solução completa:

Você também pode gostar

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy