HTML5 & CSS3

Criando interfaces para navegadores web

Transcript

1. 21 de Agosto de 2015
   HTML5 & CSS3
   Criando interfaces para navegadores web
   

   View Slide

2. HTML
   É uma linguagem de marcação utilizada para
   criar interfaces gráficas pelo navegador. Define
   blocos de construção de elementos visuais,
   como imagens , formularios ,
   títulos entre outros.
   

   View Slide

3. CSS
   É uma linguagem para aplicação de estilos em
   documentos HTML, isto é, mudar sua
   aparência visual, através da mudança dos
   atributos como cor de fundo background, tipo
   de fonte font-style, cor color, bordas
   border e assim por diante.
   

   View Slide

4. Conteúdo / Informação Estilo / Apresentação
   Resumidamente
   

   View Slide

5. View Slide

6. Criando uma página HTML
   Um HTML é um arquivo texto como qualquer
   outro. Crie um novo arquivo index.html e
   abra-o no seu editor de texto favorito.
   

   View Slide

7. 1
   2
   3
   4
   5
   Linguagem de marcação
   ...
   
   São instruções baseadas em tags, utilizada
   para simplificar e abstrair a construção de
   interfaces.
   

   View Slide

8. 0
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   Estrutura básica
   
   
   
   
   Título da página
   
   
   
   
   
   

   View Slide

9. 0
   1
   2
   Doctype
   
   Sempre iniciamos um documento HTML
   com um doctype, sua função é informar ao
   navegador como ele deve desenhar a
   página. Nesse caso indicamos que é um
   documento HTML5.
   

   View Slide

10. 0
    1
    2
    HTML
    
    
    
    Logo após temos a tags html que é o nó inicial
    do documento, dentro dele definimos todas as
    propriedades do documento.
    

    View Slide

11. 0
    1
    2
    Head
    
    Título da página
    
    Dentro do head está todas as configurações do
    documento que não são visíveis, mas definem
    como ele deve ser construido, como por
    exemplo incluir outros arquivos.
    

    View Slide

12. 0
    1
    2
    Body
    
    
    
    Em contrapartida o body é o nó onde é inserido
    todos os elementos visíveis, isto é, que vão ser
    desenhados pelo navegador e exibido ao
    usuário.
    

    View Slide

13. Tags de marcação
    O HTML5 possui diversos tipos de tags,
    algumas são usadas para definir sua estrutura:
    header Cabeçalhos
    nav Menus de navegação
    main Conteúdo principal
    section Sessões do conteúdo
    div Bloco estrutural
    footer Rodapé
    

    View Slide

14. 
    
    
    
    
    
    
    
    

    View Slide

15. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    
    
    
    
    Título da página
    
    
    
    
    
    
    
    
    
    

    View Slide

16. Semântica
    Buscadores como o Google se baseiam nos
    elementos HTML para adivinhar qual texto da
    página é importante. Utilizar as tags corretas
    para cada situação é uma técnica conhecida
    como web semântica.
    

    View Slide

17. Especializadas em exibir elementos gráficos
    como texto, lista, tabelas, imagem, formulários:
    Tags de conteúdo
    h1, h2, h3, h4, h5, h6 Títulos
    p, strong, em Elementos textuais
    ol, ul, li Listas
    img Image
    a Links com outras páginas
    

    View Slide

18. 0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    Títulos
    Título H1
    Título H2
    Título H3
    Título H4
    Título H5
    Título H
    Título H1
    Título H2
    Título H3
    Título H4
    Título H5
    Título H6
    

    View Slide

19. 0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    Listas
    Ordenada
    
    Item 1
    Item 2
    
    Desordenada
    
    Item 3
    Item 4
    
    Ordenada
    1. Item 1
    2. Item 2
    Desordenada
    ● Item 3
    ● Item 4
    

    View Slide

20. 0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    Lorem ipsum dolor
    sit amet, consectetur
    adipiscing elit.
    Minus, dolor que
    ducimus officia modi
    reprehenderit saepe.
    
    Elementos textuais
    Lorem ipsum dolor sit amet, consectetur
    adipiscing elit.
    Minus, dolor que dolor ducimus officia modi
    reprehenderit saepe.
    

    View Slide

21. 0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    Lorem ipsum
    dolor sit amet,
    consectetur adipiscing
    elit.
    
    Minus, dolor que
    ducimus officia modi
    reprehenderit saepe.
    
    
    Elementos textuais
    Lorem ipsum dolor sit amet, consectetur
    adipiscing elit.
    Minus, dolor que dolor ducimus officia modi
    reprehenderit saepe.
    

    View Slide

22. 0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    Links e imagens
    Google
    
    
    Google
    

    View Slide

23. 0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    
    
    A1
    A2
    
    
    B1
    B2
    
    
    Tabelas
    A1 A2
    B1 B2
    

    View Slide

24. 0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    Formulários
    
    
    
    
    
    ...
    
    Enviar
    
    

    View Slide

25. Elementos block e inline
    Elementos block são aqueles que ocupam uma
    linha inteira:
    
    
    
    
    

    View Slide

26. 1
    2
    3
    4
    5
    Elementos block e inline
    Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Minus,
    dolorque ducimus officia modi
    reprehender saepe.
    Elementos inline não forçam a quebra de linha
    mantendo a continuidade do texto, geralmente,
    são usados, para da realçe as palavras:
    

    View Slide

27. Os elementos inline, do exemplo anterior, se
    ajustam automaticamente ao texto:
    Elementos block e inline
    a bcd
    efgh ijklmnopqrs
    tuvwxyz .
    
    
    
    
    

    View Slide

28. 0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    Elementos inline
    span
    a
    img
    
    strong, em, cite, sub, sup
    
    button, input, label, select, textarea
    

    View Slide

29. Exercício
    Criar um arquivo HTML, como os items abaixo,
    cada qual em um section com uma classe:
    ● Header com um título;
    ● Paragrafos (como negrito, itálico e um link)
    ● Listas ordenadas e desordenadas
    ● Tabelas
    ● Formulário (Para inserir um texto e botão)
    

    View Slide

30. Folhas de estilo
    

    View Slide

31. Criando um CSS
    Um CSS também é um arquivo texto, crie um
    novo arquivo estilo.css e abra-o no seu
    editor de texto favorito.
    

    View Slide

32. 1
    2
    3
    4
    5
    Para usar o CSS para estilizar o HTML, nós
    precisamos inclui-lo neste último. Para tal
    inserimos a tag link no head, tal qual:
    Vinculando o HTML com o CSS
    
    
    Título da página
    
    
    

    View Slide

33. 1
    2
    3
    4
    5
    Adicionar um estilo à um elemento
    p {
    color: red;
    }
    Para tal precisamos selecionar o elemento e
    aplicar um estilo, no exemplo abaixo aplicamos
    a cor de fonte vermelha no elemento p:
    

    View Slide

34. 1
    2
    3
    4
    5
    Classes
    É uma forma de selecionar elementos pelo
    atributo class, ao invés da tag, além de
    permitir o seu multiplo encadeamento.
    Planta
    Hulk
    

    View Slide

35. 0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    Estilizando classes
    /* Classes sempre se iniciam com um ponto */
    .verde {
    color: green;
    }
    .grande {
    font-size: 50px;
    width: 1000px;
    }
    Atenção com o ponto e vírgulo no final de cada diretriz!
    

    View Slide

36. 1
    2
    3
    4
    5
    Permite selecionar o elemento pelo attributo
    id, porém, apenas um elemento.
    IDs
    Hello
    World
    

    View Slide

37. 0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    Estilizando com IDs
    /* IDs sempre se iniciam com uma cerquilha */
    #elemento1 {
    background-color: #000000;
    color: white;
    border: 1px solid red;
    }
    #elemento2 {
    text-align: center;
    padding: 15px;
    width: 90%;
    }
    

    View Slide

38. 0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    Estilos comuns
    .classe {
    background-image: url(imagem.jpg); /* Imagem */
    background-color: #ffffff; /* Cor de fundo */
    border: 2px solid #000000; /* Borda */
    float: left; /* Flutuação do block */
    color: #000000; /* Cor da fonte */
    font-size: 16px; /* Tamanho da fonte */
    text-align: left; /* Alinhamento do texto */
    height: 200px; /* Altura do bloco */
    width: 500px; /* Largura do bloco */
    }
    

    View Slide

39. Flutuação de blocks
    
    
    
    
    
    

    View Slide

40. 0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    Flutuação de blocks
    /* A largura total NÃO pode exceder 100%! */
    section {
    width: 85%;
    }
    aside {
    float: right;
    width: 15%;
    }
    

    View Slide

41. Detalha as opções de
    ajuste da caixa de um
    elemento. A soma de
    todos esses elementos
    é representa sua largura
    total.
    Box-model
    margin
    border
    padding
    width
    

    View Slide

42. 0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .classe {
    /* Cores */
    color: #000000; /* Hexadecimal #RRGGBB */
    color: rgb(0, 128, 255); /* RGB */
    color: rgba(0, 128, 255, 0.5); /* Transparencia */
    /* Dimensões */
    width: 100px;
    width: 100%;
    font-size: 1em; /* Relativo a resolução */
    }
    Unidades
    

    View Slide

43. 0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    Hierarquia
    body {
    font-family: Arial;
    }
    .classe {
    color: red;
    }
    .classe .classe-filha {
    color: green;
    }
    .classe-filha, .classe-prima {
    text-align: center;
    }
    

    View Slide

44. 0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    
    Planta
    
    Planta
    
    
    
    Planta
    
    Hierarquia
    

    View Slide

45. Cada navegador implementa seu próprio motor
    de renderização de HTML, isso, faz com que
    possam acontecer inconsistencias.
    Problemática dos navegadores
    

    View Slide

46. Biblioteca de estilos comuns, que pode ser
    utilizada como base para a construção de
    interfaces web.
    Bootstrap
    

    View Slide

47. http://getbootstrap.com
    

    View Slide

48. Debug
    

    View Slide

49. JavaScript
    É uma linguagem de programação interpretada,
    projetada para se executada pelo navegadores
    e capaz de manipular e interagir com os
    elementos HTMLs.
    

    View Slide

50. FIM
    

    View Slide

51. Criar um arquivo CSS e vincula-lo, com o HTML
    ():
    ● Alterar a fonte do geral para Arial 12px;
    ● Crie classes com bordas e margens e
    aplique nos elementos;
    ● Deixa o "designer" em você fluir!
    Exercício
    

    View Slide