HTML5 e CSS3 para layout responsivo

Plano de Trabalho Docente
Técnico de Nível Médio em Informática

HTML5 com CSS3
2021
Instrutor: Clayton da Silva Oliveira

Gerência de Produto: TI Data: 23/09/2021
1. Sobre o curso
1.1. Curso: Técnico de Nível Médio em Informática
1.2. Unidade curricular: HTML5 com CSS3
1.1. Carga horária da unidade curricular: 40 horas
2. Competências:
 Desenvolver layout e formatações responsivas para páginas/aplicações web.
3. Indicadores de competências e respectivos procedimentos de avaliação
Procedimentos/ Instrumentos
Competências Indicadores de competências
de avaliação
Atividades de prática
Planeja o desenvolvimento de um profissional envolvendo projeto
Desenvolver layout e projeto de interface web. e implantação de sites para
formatações responsivas Constrói layout de páginas para internet e intranet.
para páginas/aplicações Avaliação escrita com estudo
web. Web com HTML5. de caso referente ao projeto de
Altera formatação da página com especificação de um site web.
estilos em cascata.
2
4. Distribuição das competências pelas sessões de aprendizagem
Sessões de
Aprendizagem
1ª 2ª 3ª 4ª 5ª 6ª 7ª 8ª 9ª 10ª
Competências da
Unidade Curricular
Desenvolver layout e formatação responsivas X X X X X X X X X X

para páginas/aplicações Web.
3
4. PLANO DE TRABALHO DOCENTE
1ª Aula
Curso: Técnico de Nível Médio em Informática Sessão Nº 1
Duração da UC:
40 h
Unidade Curricular: HTML5 com CSS3 Duração: 4 h
Competências a Desenvolver layout e formatação responsivas para páginas/aplicações Web.

desenvolver ou
consolidar
Planeja o desenvolvimento de um projeto de interface web.

Resultado ou
Constrói layout de páginas para Web com HTML5.
produto
Altera formatação da página com estilos em cascata.
Ambiente de Laboratório de Informática

aprendizagem
Situação de Atividade 1: Introdução

aprendizagem e Apresentação da Disciplina e seu objetivo. 20 min
resultados
Explanação das atividades e formas de avaliação.
esperados
Atividade 2: Ferramenta
20 min
Apresentação das ferramentas para desenvolver o HTML
Atividade 3: Feed-back
Mostrar uma página e inspecionar com o atalho de tecla F12 e dividir
com os alunos as experiências e uso do html.
HTML: linguagem de marcação utilizada para estruturar os elementos

da página, como parágrafos, links, títulos, tabelas, imagens e até vídeos.
HTML é a sigla para Hyper Text Markup Language, ou seja, linguagem
de marcação de hipertexto. HTML 5 é a versão mais recente.
CSS: linguagem de estilos utilizada para definir cores, fontes, tamanhos,
posicionamento e qualquer outro valor estético para os elementos da
página. é a sigla para Cascading Style Sheets, ou seja, Folhas de Estilo 30 min
em Cascatas. É uma maneira de dar estilo ao código.
Tags são estruturas de linguagem de marcação contendo instruções,
tendo uma marca de início e outra de fim para que o navegador possa
renderizar uma página. Há uma tendência nos dias atuais para se usar
as tags apenas como delimitadores de estilo e/ou conteúdo, tanto em
HTML quanto em XML.
Tag em inglês significa etiqueta, rótulo, As tags são etiquetas que não
aparecem na tela do computador, mas que servem para orientar
alguém.
Atividade 4: Apresentação das tags 30 min

Mostrar as ferramentas de divisão de páginas:
<!DOCTYPE html>: informa para o navegador a versão atual HTML
<html lang="pt-br">: informa qual idioma padrão
<head></head>: tag de cabeçalho: lugar onde são armazenadas as
ferramentas e o título da página.
<meta charset="UTF-8">: trata os caracteres especiais
<meta http-equiv="X-UA-Compatible"
content="IE=edge">:
Infoma a compatibilidade com os navegadores
4
<meta name="viewport" content="width=device-width, initial-scale=1.0">:
Faz com que a página seja compatível com os diversos tipos de
aparelhos.
<title>Document</title>:
Informa o título que fica na
barra de títulos do navegador
<body></body>: corpo da página.
Atividade 5: Headers
Funções de headers
20 min
Parágrafos e breaks (br)
Intervalo 15 min
Atividade 6: Listas Ordenadas e desordenadas - subitens
Lista é um importante recurso de HTML, pois permite criarmos tópicos
de textos para uma melhor exemplificação de um determinado assunto.
São recursos extremamente usados, inclusive quando nem imaginamos
que ele esta sendo usado, como no caso de menus. Hoje, boa parte
dos menus em HTML é feito com listas.
Há três tipos de listas:
• Não ordenada
• Ordenada ou numerada
• De definição - usada para fazer comentários sobre os itens
expostos
Listas não ordenadas 40 min
As listas não numeradas são usadas para listar itens, sem se preocupar
com sua sequência. Chamamos de lista de marcadores apenas.
As tags usadas para criar uma lista não ordenada são <ul> e <li>. A tag
<ul> é usada para definir a lista e a tag <li> é usada para cada item da
lista.
Listas ordenadas ou numerada
As listas ordenadas ou enumeradas são usadas para indicar alguma
sequência ou numeração. As tags usadas para criar uma lista ordenada
são <ol> e <li>. A tag <ol> é usada para definir a lista e a tag <li> é
usada para cada item da lista.
Atividade 7: Elementos da página (Estrutura) 40 min

O elemento <header> deve ser usado para marcar a introdução do
conteúdo de seção ascendente mais
próximo ou para a página como um todo, se for um filho do <body>.
O elemento <footer> marca um rodapé. O caso de uso mais comum é o
rodapé da página, que deve ser um elemento
5
filho do <body>, se for um rodapé para a página inteira. Também pode
ser um rodapé de um artigo, seção e
outras coisas.
O elemento <nav> deve ser usado para marcar blocos de navegação
principais para o site. Ele pode conter links para partes da própria
página ou para outras páginas.
O elemento <article> contém conteúdo independente, que faz sentido
sozinho. Exemplos: artigos
O elemento <section> representa uma seção genérica para agrupar
conteúdo tematicamente. Cada seção deve ter
um tema definido, que deve ser colocado em um elemento heading,
filho da seção. Uma <section> pode estar dentro
de um <article> e vice-versa.
Apesar da <section> ser mais genérica do que os outros elementos de
seção, ela não deve ser usada como um
container de estilo. Para isso, deve ser usada uma <div>. Uma
<section> só deve ser usada se ela tiver um tema bem definido, e os
outros elementos de seção não forem mais adequados para marcar o
conteúdo
O elemento <main> contém o principal conteúdo de uma página web.
Seu conteúdo deve ser único na página. Assim, conteúdos que se
repetem não devem ser colocados dentro dele. Esse elemento só deve
ser usado uma vez na página e não deve ser um descendente de um
<article>, <aside>, <footer>, <header> ou <nav>.
Aplicação CSS3 nas páginas:
Podemos inserir o css com 3 exemplos:
1. Nas tags HTML
2. Dentro do header
3. Em um diretório e arquivo separados do HTML
Comparações de páginas prontas com as ferramentas descobertas na 25 min
aula.
Fundamentos da HTML
Listas, Tables, Divs e Spans
Bases
Validação de padrões W3C
tecnológicas
(conteúdos) Introdução ao CSS3
Classes e IDs
Elementos de Posicionamento
Recursos  Laboratório de Informática com os softwares de aplicação Visual Studio Code
6
2ª Aula
Duração da UC:
40 h
Unidade Curricular: HTML com CSS3 Duração: 4 h

desenvolver ou
consolidar

Resultado ou
produto

aprendizagem
Situação de Atividade 1: Introdução 30 min

aprendizagem e Crie uma pasta com o nome de aula03. Nela crie os arquivos: index.html,
resultados quemsomos.html e contatos.html. Crie, também, uma pasta dentro de
esperados aula03 com o nome de css e nela crie um arquivo com o nome de
estilo.css:
Iremos desenvolver as ferramentas abaixo:
Div: O elemento de divisão HTML <div> é um container genérico para
conteúdo de fluxo, que de certa forma não representa nada. Ele pode ser
utilizado para agrupar elementos para fins de estilos (usando class ou id).
Id: O atributo global id define um identificador exclusivo (ID) que deve ser
único por todo o documento. Seu objetivo é identificar o elemento ao
navegar por âncoras (usando um identificador de fragmento), quando
utilizar scripts ou estilizando (com CSS).
Class: O atributo global class é uma lista das classes de um elemento,
separada por espaços. Classes permitem a CSS e Javascript selecionar
e acessar elementos específicos através dos seletores de classe ou
funções como o método DOM document. getElementsByClassName .
Iremos construir a estrutura da página abaixo usando os elementos.
7
Atividade 2: Elementos de referência 90 min
A Href: H(ypertext) Ref(erence)] (Referência para Hipertexto). Tag
utilizada em linguagem HTML que indica o endereço para o qual remete
um link.
Marquee: O elemento html <marquee> é usado para inserir uma área de
rolagem de texto"scrolling" , similar a um letreiro.
Para inserir uma imagem no HTML basta utilizar a tag <img> com o
atributo src. Ou seja: o atributo src, ou source, vai conter a url da imagem
que será inserida.
Diante disso, a sintaxe final será:
<img src="url">
Para inserir uma imagem local, podemos apenas incluir o nome da
imagem com sua extensão, como no exemplo abaixo:
<img src="imagem.jpg">
8
Intervalo 15 min
Atividade 3: Criação de Métodos 40 min
Usando js, iremos tratar os códigos abaixo para exemplificar
9
Atividade 4: CSS para formatação da página 40 min
Elementos:
Margin
Padding
Position
Width
Height
backgroud
10
25 min
Comparação das páginas antes e depois da formatação CSS
Fundamentos da HTML
Bases
tecnológicas
Classes e IDs
3ª Aula
Duração da UC:
40 h

desenvolver ou
consolidar

Resultado ou
produto

aprendizagem
Situação de Atividade 1: Formatação de Tabelas 30 min

aprendizagem e O que são tabelas?
resultados
As tabelas são listas de dados em duas dimensões e são compostas por
esperados
linhas e colunas. Portanto, são muito utilizadas para apresentar dados
de uma forma organizada.
11
A tag utilizada para criar uma tabela HTML é a tag <table>,
posteriormente fechada com </table>. Dentro dela, incluímos todos os
elementos que compõem nossa tabela, ou seja, as células da tabela.
Assim sendo, os elementos de uma tabela consistem em outras tags
que poderão ser utilizadas. Nos próximos tópicos, veremos como utilizar
cada uma delas.
Comandos da tabela:
Dentro da tag <table> criaremos cabeçalho, corpo, rodapé, linhas e
colunas de nossa tabela. De forma geral, a tabela pode ser composta
por um cabeçalho, um corpo e um rodapé. Essa três partes serão
definidas e agrupadas pelas tags <thead>, <tbody> e <tfoot>.
TH = Table head = cabeçalho
TR = Table row = linha
TD = Table Date = coluna
12
Atividade 2: Formatação e CSS da tabela 90 min
13
14
Intervalo 15 min
Atividade 3: Formatação de tabelas com CSS3 40 min
Efeito zebra
15
16
25 min
Fundamentos da HTML
Bases
tecnológicas
Classes e IDs

17
4ª Aula
Duração da UC:
40 h

desenvolver ou
consolidar

Resultado ou
produto

aprendizagem
Situação de Atividade 1: Formatação de Imagens

aprendizagem e No HTML, a tag responsável pela inserção de imagens é a tag <img>.
resultados
Ajustas de imagens:
esperados
Se for uma imagem de plano de fundo, use background-size: contain.
Observe que width:50% irá redimensioná-lo para 50% do espaço
disponível para a imagem, enquanto max-width:50% irá redimensionar a
imagem para 50% de seu tamanho natural .
Inserção de imagens:
30 min
Atividade 2: Formatação e CSS da imagem 90 min
18
19
Intervalo 15 min
Atividade 3: Formulários (introdução) 40 min
Elementos do Formulário:
Label = representa uma legenda para um item em uma interface de
usuário. Ele pode estar associado com um elemento de controle. Com o
label associado corretamente ao <input> por meio de seus atributos 'for'
e 'id' respectivamente.
Input = entrada das informações.
Propriedades do Input:
Type: forma de entrada das informações:
• Text
• Number
• Email
• File
• Search
• Color
• Submit
• Hidden
• Radio
• Checked
20
Elementos do Formulário – continuação
Input...
Size = tamanho das caixas de entrada.
Maxlength = máximo de caracteres no input.
Minlength = mínimo de caracteres no input.
Placeholder = texto explicativo de como preencher a informação.
Pattern = regra de preenchimento das informações. (pode ser feito um
script em JS para isso)
Readonly = propriedade que torna um input somente de leitura. Ele pode
conter um valor no código, mas o usuário não pode manipular esta
informação.
Obs:
Existem id e name para identificação de todos os elementos de um
formulário.
Required = torna obrigatório o preenchimento de qualquer item.
Value = é o valor associado ao elemento.
21
25 min
Bases Fundamentos da HTML

tecnológicas Listas, Tables, Divs e Spans
22
Introdução ao CSS3
(conteúdos)
Classes e IDs
5ª Aula
Duração da UC:
40 h
Unidade Curricular: HTML5 com CSS3 Duração: 4 h

desenvolver ou
consolidar

Resultado ou
produto

aprendizagem
Situação de Atividade 1: Momento de avaliação 120 min

aprendizagem e Iremos continuar o projeto da aula anterior que será o momento de
resultados avaliação:
esperados
Use a formatação de cores como está descrito no exemplo:

Na opção sexo, utilize a opção checked para que apenas uma opção
possa ser escolhida pelo usuário.
Implemente as placeholders de cada entrada
Nos botões, faça as seguintes configurações:
Enviar = submit
Limpar = reset
Apenas Button = inserir um link para uma página com resultado “você
clicou no bõtão de link”
23
Menu = crie um menu inicial apenas com um título você clicou em Menu.
Faça a formatação do CSS
Intervalo 15 min
Atividade 3: Slider HTML 40 min
O que é slider HTML?
O slider é um elemento visual muito comum em aplicações web,
principalmente àquelas que exibem muitas imagens, possibilitando uma
melhor experiência ao usuário. Entretanto, a utilização massiva de
JavaScript pode prejudicar o desempenho do website, especialmente
em dispositivos móveis.
24
25
25 min
Fundamentos da HTML
Bases
tecnológicas
Classes e IDs
6ª Aula
Duração da UC:
40 h

desenvolver ou
consolidar

Resultado ou
produto

aprendizagem
Situação de Construção do Projeto em HTML divido em 4 aulas seguidas 30 min

aprendizagem e Atividade 1: Proposta do projeto
resultados
Desenvolver um grupo de páginas com as ferramentas já apresentadas
esperados
e outros recursos de imagens e mídias. Uso de divs, class e
26
identificações:
Estrutura do Projeto:
Criar um diretório com o nome de ProjetoAula
Crie os arquivos: index.html, compras.html e cadastro.html
Dentro deste diretório crie as pastas:
img
css
js
videos
Dentro da pasta css crie o arquivo estilo.css
Dentro da pasta js crie o arquivo script.css
Dentro da pasta img e da pasta video baixe os arquivos indicados pelo
professor
Atividade 2: Parte 01 90 min
Construção do HTML com ferramentas de posicionamento:
27
Intervalo 15 min
Atividade 3: Formatação css da 1ª parte do projeto 40 min
Ferramentas de posicionamento CSS
28
Atividade 4: CSS para formatação da página para o menu 40 min
29
25 min
Fundamentos da HTML
Bases
tecnológicas
Classes e IDs
30
7ª Aula
Duração da UC:
40 h

desenvolver ou
consolidar

Resultado ou
produto

aprendizagem

aprendizagem e Atividade 1: Parte 02 do Projeto
resultados
Confecção de Ids para singles pages
esperados
31
Atividade 2: Formatação css 90 min
32
Intervalo 15 min
33
Atividade 3: Recurso de Mídias do HTML com CSS 40 min
34
Atividade 4: CSS para formatação da página para o recurso da 40 min
atividade 3
35
25 min
Fundamentos da HTML
Bases
tecnológicas
Classes e IDs
36
8ª Aula
Duração da UC:
40 h

desenvolver ou
consolidar

Resultado ou
produto

aprendizagem
Situação de Construção do Projeto em HTML divido em 4 aulas seguidas

resultados
Localização
esperados
30 min
Recurso de localização
Atividade 2: Formatação css 90 min
37
Recurso de Vídeos:
1º Youtube
2º Vídeos locais
38
Intervalo 15 min
Atividade 3: Recurso de Footer e mídias
40 min
Atividade 4: CSS para formatação da página para o recurso da 40 min

atividade 3
39
40
25 min
Fundamentos da HTML
Bases
tecnológicas
Classes e IDs
9ª Aula
Duração da UC:
40 h

desenvolver ou
consolidar

Resultado ou
produto

aprendizagem

resultados
Formulário e Javascript
esperados
41
Intervalo 15 min
Atividade 3: CSS 40 min
42
43
44
Atividade 4: Aplicação de Javascript
40 min
25 min
Fundamentos da HTML
Bases
tecnológicas
Classes e IDs
45
10ª Aula
Duração da UC:
40 h

desenvolver ou
consolidar

Resultado ou
produto

aprendizagem
Atividade 1: Avaliação
120 min
Com base no projeto, faça:

Situação de
aprendizagem e
resultados
1. Utilize a variável de cores
esperados
2. Crie o menu com as opções: Catálogo, sobre, recursos,
onde estamos?, compras e login.
3. Formate a div e a image conforme aparece no layout
apresentado.
Use o recurso de logo com a ferramenta Brand em compre Bem
Intervalo 15 min
Atividade 3: Momento de Feed-back
Mercado de trabalho na área de informática com a UC HTML5 com 40 min
CSS3
Atividade 4: Momento de Feed-Back com os alunos sobre

conceitos e resultado final
40 min
25 min
Conferência dos conceitos e lançamento
46
Fundamentos da HTML
Bases
tecnológicas
Classes e IDs
47

HTML5 e CSS3 para layout responsivo

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

HTML5 e CSS3 para layout responsivo

Enviado por

Direitos autorais:

Formatos disponíveis

Plano de Trabalho Docente

Técnico de Nível Médio em Informática

Instrutor: Clayton da Silva Oliveira

3. Indicadores de competências e respectivos procedimentos de avaliação

Desenvolver layout e formatação responsivas X X X X X X X X X X

Competências a Desenvolver layout e formatação responsivas para páginas/aplicações Web.

Planeja o desenvolvimento de um projeto de interface web.

Ambiente de Laboratório de Informática

Situação de Atividade 1: Introdução

HTML: linguagem de marcação utilizada para estruturar os elementos

Atividade 4: Apresentação das tags 30 min

Parágrafos e breaks (br)

Atividade 7: Elementos da página (Estrutura) 40 min

Recursos  Laboratório de Informática com os softwares de aplicação Visual Studio Code

Competências a Desenvolver layout e formatação responsivas para páginas/aplicações Web.

Planeja o desenvolvimento de um projeto de interface web.

Ambiente de Laboratório de Informática

Situação de Atividade 1: Introdução 30 min

Recursos  Laboratório de Informática com os softwares de aplicação Visual Studio Code

Competências a Desenvolver layout e formatação responsivas para páginas/aplicações Web.

Planeja o desenvolvimento de um projeto de interface web.

Ambiente de Laboratório de Informática

Situação de Atividade 1: Formatação de Tabelas 30 min

Recursos  Laboratório de Informática com os softwares de aplicação Visual Studio Code

Competências a Desenvolver layout e formatação responsivas para páginas/aplicações Web.

Planeja o desenvolvimento de um projeto de interface web.

Ambiente de Laboratório de Informática

Situação de Atividade 1: Formatação de Imagens

Atividade 2: Formatação e CSS da imagem 90 min

Atividade 4: CSS para formatação da página 40 min

Bases Fundamentos da HTML

Recursos  Laboratório de Informática com os softwares de aplicação Visual Studio Code

Competências a Desenvolver layout e formatação responsivas para páginas/aplicações Web.

Planeja o desenvolvimento de um projeto de interface web.

Ambiente de Laboratório de Informática

Situação de Atividade 1: Momento de avaliação 120 min

Use a formatação de cores como está descrito no exemplo:

Recursos  Laboratório de Informática com os softwares de aplicação Visual Studio Code

Competências a Desenvolver layout e formatação responsivas para páginas/aplicações Web.

Planeja o desenvolvimento de um projeto de interface web.

Ambiente de Laboratório de Informática

Situação de Construção do Projeto em HTML divido em 4 aulas seguidas 30 min

Atividade 2: Parte 01 90 min

Construção do HTML com ferramentas de posicionamento:

Recursos  Laboratório de Informática com os softwares de aplicação Visual Studio Code

Competências a Desenvolver layout e formatação responsivas para páginas/aplicações Web.

Planeja o desenvolvimento de um projeto de interface web.

Ambiente de Laboratório de Informática

Situação de Construção do Projeto em HTML divido em 4 aulas seguidas 30 min

Recursos  Laboratório de Informática com os softwares de aplicação Visual Studio Code

Competências a Desenvolver layout e formatação responsivas para páginas/aplicações Web.

Planeja o desenvolvimento de um projeto de interface web.

Ambiente de Laboratório de Informática

Situação de Construção do Projeto em HTML divido em 4 aulas seguidas

Atividade 2: Formatação css 90 min

Atividade 4: CSS para formatação da página para o recurso da 40 min

Recursos  Laboratório de Informática com os softwares de aplicação Visual Studio Code

Competências a Desenvolver layout e formatação responsivas para páginas/aplicações Web.

Planeja o desenvolvimento de um projeto de interface web.

Ambiente de Laboratório de Informática

Situação de Construção do Projeto em HTML divido em 4 aulas seguidas 120 min

Recursos  Laboratório de Informática com os softwares de aplicação Visual Studio Code

Competências a Desenvolver layout e formatação responsivas para páginas/aplicações Web.