0% acharam este documento útil (0 voto)
16 visualizações5 páginas

Programa HTML-css

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
0% acharam este documento útil (0 voto)
16 visualizações5 páginas

Programa HTML-css

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

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

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