HTML/CSS

Módulo 1 - Semi-Integral

Versão 1.0.2

Duração do curso: ​32 horas

Objetivo do curso: ​Ensinar ao estudante o básico sobre a criação e a composição de

páginas da Web estáticas usando as tecnologias HTML5 e CSS3 e também testar e
verificar os códigos das páginas da web.

No final do curso, o aluno será capaz de:

• Aplicar o básico de HTML - tags, atributos e métodos de estruturação do conteúdo de

páginas da web para criar documentos formatados;
• Aplicar os conceitos básicos de CSS - valores, cores, fontes e outras métricas de
formatação;
• Possuir habilidades em verificar e depurar código de documentos da web;
• Usar gráficos para criar páginas da web;
• Criar diferentes tipos de listas;
• Incorporar tabelas em documentos da web;

No final deste curso, o aluno precisa apresentar um Projeto Final. Para a admissão no
Projeto todos os trabalhos de casa e tarefas práticas devem estar carregados no sistema.

Módulo 1 ​(2 horas)​: Introdução à tecnologia da Web. Estrutura HTML. Formatação

de texto HTML

• Introdução às linguagens de marcação. Linguagem de marcação de hipertexto HTML.

◦ Internet
◦ Protocolo HTTP
◦ Desenvolvimento da versão HTML. Versão HTML5
◦ Problemas de compatibilidade entre navegadores. Guerra do navegador.
◦ W3C.
• Tags são um elemento básico da estrutura HTML. Regras para escrever tags e seus
atributos no padrão HTML5. Diferenças sintáticas entre HTML4, XHTML, HTML5.
• Principais erros nas entradas de tags.
◦ Especificações <! DOCTYPE HTML>.
◦ Validação de um documento usando o FireFox - complemento Validator HTML.
◦ Concept O conceito de bem formado.
◦ Progenitores de HTML5: SGML e XML.
• A estrutura do documento HTML5.
◦ Principais elementos e seus propósitos
◦ Tags Novas tags de definição de estrutura: <header>, <nav>, <section>, <article>,
<aside>, <footer>. Disponibilidade de novas tags nos navegadores modernos. Exibir
novas tags nos navegadores herdados.
• Codificações de página e tags <meta>:
◦ Aplicação da tag <meta> - informações de configuração da página (expira,
atualização, autor, direitos autorais, palavras-chave, descrição).
◦ Defina a codificação da página usando a tag <meta>.
 ◦ Substituições e codificações de caracteres.
• Classificação de tags: linear e em bloco.
◦ Linear.
◦ Bloquear.
• Modelo de formatação de texto: títulos e parágrafos. Elementos <p>, <h1> .. <h6>.
Alinhar texto em elementos de bloco: alinhar atributo.
• Classificação de tags: formatação lógica e física.
◦ Tags Tags de formatação física.
◦ Tags Tags de formatação lógica.
◦ Uma breve visão geral das tags básicas de formatação lógica: <abbr>,
<acronym>, <cite>, <code>, <del>, <dfn>, <ins>.
• Prática: criando uma página da web simples.

Módulo 2 ​(5 horas)​: Formatação com CSS. Listas. Recuos e margens do CSS

• CSS - folhas de estilo em cascata.

◦ Introdução. Visão geral da versão. Objetivo: HTML é usado para definir a
estrutura, CSS - para formatação.
◦ Incorpore CSS no HTML usando o atributo style. Regras para escrever
propriedades CSS.
• Tags sem formatar <div> - bloco, <span> - linear.
• A analogia de HTML e CSS no exemplo de tags lineares e de bloco
• Propriedades CSS adicionais para formatação de texto: espaçamento entre letras, altura
da linha, intenção do texto, transformação do texto, espaço em branco e espaçamento
das palavras.
• Usando atributos de classe e ID para definir estilos.
◦Styles Crie estilos para tags, classes, identificadores.
◦Concept: O conceito de seletores. Regra para escrever seletores: seletor de tags,
seletor de classe, seletor de identificador, seletor universal *.
◦ Prioridade para o uso de estilos (tag / classe / id / estilo). Aumentando a
prioridade com a regra!
◦ Herança de estilos. Valores de propriedade padrão.
◦Tracking: Acompanhamento de estilo com ferramentas de desenvolvimento
• Usando arquivos de estilo CSS externos.
◦ Conecte arquivos CSS usando a tag <link> e a instrução @import.
◦ Arquivos CSS e cache do navegador.
• Prática: formatar texto usando CSS.
◦Criar listas
◦ Listas não ordenadas: <ul>, <li> elementos.
◦ Listas ordenadas: <ol>, <li> elementos.
◦ Atributos tipo, valor, início.
• Crie listas aninhadas.
• Formatando listas usando CSS.
◦ Propriedades tipo de estilo de lista, imagem de estilo de lista, posição de estilo de
lista.
◦ Notação abreviada para a propriedade de estilo de lista.
◦ Fazendo listas de vários níveis. Seletores aninhados.
• Listas de definições: elementos <dl>, <dd>, <dt>.
• Gerenciar recuos e margens.
◦ A propriedade margin e seus descendentes margem esquerda, margem superior,
margem direita, margem inferior.
 ◦A propriedade padding e seus descendentes padding-left, padding-top,
padding-right, padding-bottom.
◦A diferença entre preenchimento e margem e sua finalidade.
◦ Cancele o recuo padrão para algumas tags: <body>, <h1> .. <h6>, <p>.
• Prática: criando listas.

Módulo 3 ​(5 horas)​: Gráficos em Web Design. Hiperlinks e Princípios de navegação

nos sites

• Formatos de arquivo gráfico da Web.

• A tag <img /> e seus atributos (src, alt, largura, altura, borda).
◦ A propriedade border é análoga ao atributo border.
◦ Defina as propriedades de margem, preenchimento e borda da imagem.
◦ Alinhe as imagens na página usando o atributo align. Um análogo do atributo
align é a propriedade float.
• Fundo da página - fundo da propriedade.
◦ Defina o fundo como uma cor: cor de fundo. Configuração de plano de fundo
obrigatória para o elemento <body>.
◦ Defina o fundo como uma imagem: imagem de fundo, repetição de fundo, posição
de fundo, anexo de fundo.
◦ Imagens e cache do navegador.• Informações gerais sobre hiperlinks.
◦ Tag A tag <a> e seus atributos (href, target).
◦ Ergonomia, facilidade de navegação.
• Endereçamento absoluto e relativo.
◦ Organização de links externos.
◦ Organize links internos usando o elemento <a>. Atributos de identificação e
nome.
◦ Organização de uma transição “mista” (para o elemento especificado em um
documento HTML externo).
◦ Links de imagem. Cancele bordas nos links.
• Criar um menu usando a estrutura de lista (<ul>, <li>), sua formatação. Exibir
propriedade. Converter um link em um elemento de bloco.
• Pseudo-classes.
◦ Pseudo-classes de link: ativo, pairar, link, visitado.
◦ Pseudo-classes para elementos regulares: primeiro filho, primeira linha, primeira
letra.
• Propriedade do cursor CSS.
• Prática: trabalho no desenvolvimento de uma galeria de imagens.
• Propriedades do CSS3
◦ Trabalhando com o plano de fundo: criando gradientes, redimensionando o plano
de fundo - as propriedades de plano de fundo e tamanho do plano de fundo.
◦ Trabalhando com bordas: bordas arredondadas dos blocos - propriedades do raio
da borda.
◦ Defina a translucidez para os elementos da página - a propriedade opacidade.
◦ Suporte completo para seletores CSS 2.1.
◦ Trabalhar com multimídia
◦ Insira um vídeo em uma página usando a tag <video>.
◦ Insira o áudio em uma página usando a tag <audio>.
◦ Crie imagens e animações usando a tag <canvas>.
◦ Usando o formato SVG.
Módulo 4 ​(4 horas)​: Animações em CSS3

• Funções de transformação 2D:

◦ matriz ();
◦ translate (), translateX (), translateY ();
◦ escala (), escalaX (), escalaY ();
◦ girar ();
◦ skew (), skewX (), skewY ();
• Filtros CSS3:
◦ desfoque ();
◦ brilho ();
◦ contraste ();
◦ Sombra projetada ();
◦ escala de cinza ();
◦ matiz-rotação ();
◦ Ac opacidade ();
◦ Ur saturado ();
◦ Sépia ();
• Regra @ keyframes
• A propriedade de animação e seus componentes.

Módulo 5 ​(5 horas)​: Tabelas

• Criando uma tabela simples. Tags <table>, <tr> e <td>.

◦ Border: Borda de atributos, preenchimento de células no cellpadding. Suas
possíveis contrapartes CSS são: borda e preenchimento.
◦ Especificando os atributos largura e altura da célula. Regras para definir a largura
e a altura. Análogos CSS: largura, altura e propriedades.
◦ Alinhando dados em uma tabela: alinhar e valorizar atributos. Analógicos CSS:
propriedades de alinhamento de texto e alinhamento vertical.
◦ Controle a cor do plano de fundo e a cor dos quadros da tabela (linha única,
célula única).
◦ Usando imagens como plano de fundo da tabela (linha única, célula única).
• Mesclagem de células: atributos Colspan, Rowspan.
• Tags de estruturação de tabela lógica: <thead>, <tbody>, <tfoot>. Tags de agrupamento
lógico da coluna: <colgroup>, <col>.
• Gerenciamento de quadro de tabela: quadro, atributos de regras.
• Prática: criando tabelas complexas.
• Noções básicas de layout da tabela. Um exemplo de layout de tabela: seus contras.

Módulo 6 ​(4 horas)​: Formulários e Frames.

Introdução aos formulários:

• Controlar elementos de formulários.

◦ Botões (enviar, redefinir, etc.).
◦ Bandeiras.
◦ Botões com botões de opção (botões de opção).
◦ Lists: Listas pop-up.
◦ Input: Entrada de texto.
◦ Files: Selecione arquivos.
 ◦ Controls: controles ocultos.
• Criando formulários usando HTML:
◦ Elemento <form>.
◦ Elemento <input>.
◦ Elemento <button>.
◦ Elementos <seleção>, <grupo de opções> e <opção>.
◦ Elemento <textarea>.
◦ Tags <rótulo>.
◦ Structure: Estrutura do formulário: <fieldset> e <legend>.
• Elementos de formulário HTML5
• Validação de formulários usando HTML5
◦ Formatação de elementos de formulário usando CSS.
• Quadros e sua estrutura (informação teórica).
◦ Tag <iframe>.
◦ Frames: Usando quadros para conectar recursos externos (youtube, google
maps, etc.).

Módulo 6 ​(5 horas)​: ​Posicionamento. Layout de páginas da web em blocos.

• A propriedade position.
◦ Consideração de posicionamento: relativo e absoluto.
◦ Propriedades superior, esquerda, inferior, direita.
• Visibilidade das propriedades, estouro.
◦ Prática.
• Noções básicas de layout em blocos. Regras de layout.
◦ Blocos de aninhamento.
◦ Atribua largura e altura aos blocos usando a propriedade width e height.
◦ Fluir em torno dos blocos. Cancele o fluxo ao redor dos blocos.
◦ Regras para definir recuos e campos.
◦ Configuração da altura e largura mínimas do bloco: propriedades de altura
mínima e largura mínima. Definindo essas propriedades no navegador IE6.
◦ Alinhamento dentro dos blocos (margem, alinhamento do texto, altura da linha,
posição). Alinhamento entre navegadores.
• Consideração das estruturas de página mais simples.
◦ Size: Estrutura de tamanho fixo.
• Estrutura de borracha. Blocos com margem negativa.

Módulo 7 ​(2 horas)​: Projeto Final