OUTLINE.md

Roteiro das Aulas

Aula 01 - (20/09/16)

• Apresentação da disciplina (objetivo, conteúdo, avaliação, comunicação e bibliografia)
• Fundamento e finalidade do HTML, CSS e XML
• Exibindo a arquitetura da Web (URL, HTTP, HTML)

Exercício

• Analisar o site da disciplina e acesso o slack
• Pesquisar sobre a evolução da Web

Aula 02 - (06/08/16)

• Definir o que é uma Linguagem de Marcação (LM)

  • Exemplos: Markdown, RTF, Latex, HTML, XML

• Estrutura de um documento HTML:

  • Estrutura básica de uma página HTML
  • A essência do estilo e do comportamento nas páginas HTML
  • Navegar sobre a estrutura de uma página HTML com a ferramenta de inspecionar elemento
  • Sintaxe (doc w3c): Elementos (tags), atributos e entidades
  • Organização com letras minúsculo, indentação e comentários

• Criando uma site:

  • Página Web com Títulos, Parágrafos, Marcações de ênfase, Imagens
  • Estrutura de um site

  Exercício

  • Exercício 2.9 sobre os primeiros passos com HTML
  • Pesquisar algum site para analisar a sua estrutura utilizando a ferramenta de inspeção de elemento

  AULA 03 - (20/10)

• Criando estilos na Web:

  • Definir o que é uma Linguagem de Estilo:
    • Exemplificar: CSS, XSL, LaTeX (cls e sty)
  • Declarando estilo:
    • Como se aplica estilo ao HTML: inline, embedded, external, mix
    • Sintaxe: propriedade, seletor, função, at-rule e media query
    • Organização: indentação e comentários
  • Propriedades:
    • Tipografia (font-family)
    • alinhamento e espaçamento (text-align, line-height, letter-spacing, word-spacing, text-indent)
    • plano de fundo (background-image)
    • borda (border: color style width)
    • Cores (background-color, border-color, color)
      • valor cor: nome, hex, rgb, rgba, hsl, hsla
      • https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

Exercício

• Pesquisar algum site para analisar o seu estilo utilizando a ferramenta de inspeção de elemento
• Exercício 2.16: primeiros passos com CSS

Aula 04 - (27/10)

• Listas HTML
  • estrutra (ol, ul, dl) e estilos (list-style)
• Espaçamento, margem e dimensões
  • padding, margin, height, width
• Layout básico
  • main, header, footer, article, section, div, span

Exercício

• Exercícios 2.20: listas e margens
• Analisar três estilos de layout: https://webflow.com/templates

Aula 05 - (28/10)

• Links HTML
  • interno, externo e mix
  • target blank
• Flutuação
  • Float
• Seletores
  • Universal, tipo, ID, Combinação (descendência e filho)
  • :nth-child, :hover
• Table
• Criando Layouts
  • wireframe, design
  • Display
  • Portifólio
    • media query
    • at-rule
  • Elementos
    • icon: http://fontawesome.io/
    • imagem: https://unsplash.com/
    • font: https://fonts.google.com/

Exercício

• Exercícios 2.22: links
• Exercícios 2.26: seletores CSS e flutuação de elementos
• Analisar três estilos de layout do mesmo tipo: https://webflow.com/templates
• Criar um layout blog e profile