Unidade 1 - HTML:
# 01 - Apresentação da Disciplina (25/04/2019)
# 02 - Introdução a HTML e ferramentas (02/05/2019)
# 03 - Gerenciando listas e tabelas (09/05/2019)
# 04 - Adicionando Links (09/05/2019)
# 05 - Adicionando imagens, áudios e vídeos (16/05/2019)
# 06 - Criando formulários (23/05/2019)
Unidade 2 - CSS:
# 07 - Introdução ao Cascade Style Sheet (CSS) (06/06/2019)
# 08 - Estilizando Texto (13/06/2019)
# 09 - Simulado CSS (20/06/2019)
# 10 - Componentes Web (30/06/2019)
Prova 1 (04/07/2019)
Prova Bimestral (11/07/2019)
Apresentação de Projetos (18/07/2019)
Unidade 3 - Javascript:
# 11 - Primeiros passos com Javascript (18/07/2019)
# 12 - Javascript (loops e arrays) (25/07/2019)
# 13 - Javascript (Funções e objetos) (01/08/2019)
# 14 - Javascript (DOM e criação de elementos) (08/08/2019)
# 15 - Javascript (DOM e criação de elementos) (15/08/2019)
# 16 - Javascript (DOM e criação de elementos) (22/08/2019)
# 17 - Javascript (DOM e criação de elementos) (29/08/2019)
# 18 - Javascript (DOM e criação de elementos) (05/09/2019)
Prova 2 (12/09/2019)
Apresentação final dos proetos (19/09/2019)
Provas finais (26/09/2019)
# 01 - Apresentação da Disciplina (25/04/2019)
Conteúdo:
- Apresentação da disciplina:
- Objetivo, conteúdo, avaliação, comunicação, bibliografia e ferramentas
- Slides
# 02 - Introdução a HTML e ferramentas (02/05/2019)
Conteúdo:
- Editando HTML com o Atom e visualizando com o Google Chrome (https://www.google.com/chrome/)
- Trabalhando com html na prática
- Conceitos básicos
- Estrutura básica
- Cabeçalho e Corpo
- Metadados
- Título da página
- Encoding e UTF-8
- Elementos/tags
- Títulos (h1, h2, h3, …)
- Parágrafos
- Negrito e Itálico
- Referências dos Elementos
Exercício:
- Criando a primeira página Web (cantina do IFPB)
# 03 - Gerenciando listas e tabelas (09/05/2019)
Conteúdo:
- Listas
<ol>
,<ul>
,<dl>
- Definição, Ordenada, Não ordenado
- Lista aninhada
- Tabelas
- Definição de linhas
<tr>
e colunas<td>
- Colunas de cabeçalho
<th>
- Mesclando linhas com
rowspan
e colunas comcolspan
- Definição de linhas
- Slides
Exercício:
- Criando página da disciplina com lista de itens
- Adicionando cronograma da disciplina como tabela
# 04 - Adicionando Links (16/05/2019)
- Estrutura e características de um hyperlink
- Definição e estrutura de uma URL (Uniform Resource Identifier)
- Elementos no nível em linha (
inline
) e bloco (block
) - Abrindo links em uma nova janela (atributo target=
_blank
) - Apontando para endereços absolutos e relativos
- Trabalhando com âncoras internas dentro de uma página
# 05 - Adicionando imagens, áudios e vídeos (16/05/2019)
Conteúdo:
- Imagem
<img>
,<figure>
,<figcaption>
- Imagem dentro (Data URI), próximo ou distante do HTML
- Custos e benefícios
- Atributos:
src
,alt
,width
,title
- Imagem com link
- Imagem dentro (Data URI), próximo ou distante do HTML
# 06 - Criando formulários (23/05/2019)
- Campos de formulário
- Campos de texto, data, email, número
- Campos de seleção (checkbox, radio, combobox)
- Atributos de validação (
required
) - Botões de ação
- Criando um formulário básico
# 07 - Introdução ao Cascade Style Sheet (CSS) (25/07/2019)
Conteúdo:
- Cascade Style Sheet (CSS)
- Origem do CSS
- Declarações do CSS: local (
style=""
), interna (<style>
), externa (<link>
) - Sintaxe do CSS
- Propriedades:
- Texto & Fonte
color
font-size
- Texto & Fonte
- Seletores básicos:
- Propriedades:
Reflexão:
- O que é uma Linguagem de Estilo?
- O que é e como funciona o CSS?
- Quais são os possíveis locais que o CSS pode existir junto com o HTML?
- Qual a relação do atributo global
class
eid
com o CSS? - Qual é a composição da sintaxe do CSS?
- Qual é o benefício de definir mais de uma classe à um elemento?
Exercício:
# 08 - Box model (02/08/2019)
Conteúdo:
Reflexão:
- O que é box model? Como um box pode ser exibido no navegador?
- Por que o W3C considera os elementos HTML deste link como inline?
- Existe alguma exceção de elemento inline que permite definir largura?
- Quais estilos podemos aplicar em um Box?
- É possível personalizar o estilo de alguma borda específica? Por exemplo, a borda inferior? E no chrome, como é calculado o
em
para margens? - Como centralizamos um parágrafo de largura pré-definida?
- Qual é a melhor maneira de definir altura de um Box sem gerar problemas de alinhamento vertical?
- É possível deixar uma borda arredonda nas quinas?
- Como funcionar a sombra para um Box?
- Como apresentar uma tabela em uma grid contínua sem espaçamento entre as bordas?
Exercício:
- Analise o Box Model desses títulos.
- Exemplo de layout
# 08 - Estilizando Texto (09/08/2019)
Conteúdo:
- Estilizando Texto (Texto e fonte, Alinhamento de Texto)
- Estilizando links
- pseudo-class selector:
:hover
,:link
,:active
,:visited
,:focus
- Web Fontes
- pseudo-class selector:
- Ícones
Reflexão:
- Quais são os estilos de alinhamento e aparência para fonte?
- Na propriedade
font-family
, qual é a diferença entre<family-name>
e<generic-family>
? - Se não for definido nenhum
<family-name>
a um elemento, qual será a<family-name>
atribuída por default? - O que acontece se o
<family-name>
não possuir a fonte instalada no computador? - Qual é a recomendação para se difinir uma propriedade
font-family
? - Em relação ao valor
<length>
, qual a diferança entre unidades de medida relativa e absoluta? Que propriedades de texto recebem esse valor? - Como funciona a sombra para um texto?
- Como estilizamos um hyperlink?
Exercício:
- Criando o Curriculum Vitae com Estilo
# 09 - Simulado CSS (16/08/2019)
Reflexão:
- O que é possível fazer com o HTML e CSS até o momento?
** Exercício:**
- Simulado:
- Profile Simples
# 10 - Componentes Web (30/08/2019)
Conteúdo: