Introdução - Visão Geral

• Introdução
  -  O que é Web Standarts ?
  -  O que é o W3C ?
  -  O que é Table-Less?
  -  Marcação / Formatação / Comportamento
  -  O que é XHTML ?
  -  O que é CSS ?
  -  O que é JavaScript ?
  -  O que é JQuery?

• Organizando o Projeto
  -  Estrutura de Diretórios
  -  Tipos de Arquivos

• Ambiente de Desenvolvimento
  -  Netbeans
  -  XAMPP
  -  Firefox
          WebDevelopper Tolls
          Ehea

• XHTML Estrutura básica
  -  DOCTYPE
          transicional
          strict
  
  -  Charset
          UTF-8
          ISO 8859-1
  
  -  Html, head, title, Body...

• Tudo Junto
  -  Incluindo arquivos CSS
          Link
          Import
          Qual a Diferença?
          A tag < style >

-  Incluindo arquivos JS
        A Tag < script >

-  Como funciona as estrutura de diretórios
        /
        ./
        ../
        http://

• Finalizando o primeiro exemplo prático

  Conhecendo XHTML (marcação)

• Conhecendo mais HTML
  - XML
  - DOM

• Parâmetros Chave
  - Quais São?
          id
          class

- Quando e porque usar?

• < table >
  - Principais Tags
          < thead >
          < tbody >
          < tfoot >
          < td >
          < tr >
          < th >

- Para que Servem
- Quando e onde usar

• headers
  - O que são?
  - Quais são
          < h1 >
          < h2 >
          < h3 >
          < h4 >...

- Quando Usar?
- Porque Usar?

• Listas
  - O que São ?
  - Principais Tags
          ol, ul, li...

- Para que serve?
- Quando Usar?

• Hyperlinks
  - O que são?
  - Links x Âncoras
  - Target?
  - Acessibilidade
          Parâmetros importantes

• Imagens
  - O que é?
  - Quando e como usar?

• Containers
  - span
  - div
  - Porque são tão importantes?
  - Qual a diferença entre eles?
  - Quando e onde usar?
  - Boas práticas

Conhecendo CSS (formatação)

• Conhecendo mais Sobre o CSS
  - Cascading Style Sheets
  - Cascata?
  - Hierarquia?
  - Um código inteligente
  - Serve apenas para HTML ?
  - Sobre CSS3

• Sintaxe

• Seletores
  - Selecionando o DOM
          Acessando tags HTML

- Classes
        .
        Quando Usar ?
        Boas Práticas

- ID
        #
        Quando Usar?
        Boas Práticas

• Seletores Especiais
  - Acessando Elementos Filhos
  - Acessando Todos os Elementos Filhos
  - Herança
          Sintaxe
          Quando Usar
          Como usar

- Aplicando estilo à vários elementos

• Aplicando Estilo
  - Fontes
  - Textos e Parágrafos
          Alinhamento
          Tabulação

- Cores
        RGB
        HEXADECIMAL

- Background
        Color
        Image
              Repeat
              Position
              Display

- Tamanhos
        Width, height
        Min-Width
        Min-Height
        Tamanhos Relativos
        Tamanhos Exatos
        Medidas
              Pixels
              %

- Exibição
        Display
        Float
        Position

- Posicionamento
        Margin
        Padding
        Left
        Top
        Z-Index

- Outros Estilos

XHTML + CSS

• Revisão sobre XHTML

• Revisão sobre CSS

• Projetando uma Interface
  - Porque planejar uma interface?
  - O que deve ser Levado em consideração?
  - Como Planejar a interface?
  - Protótipos reais

• Organizando os Arquivos
  - Diretórios
  - Nomenclatura

• Projetando o Exemplo prático

• Codificação do Exemplo Prático