Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML5 & CSS3

Edson Hilios
September 21, 2015

HTML5 & CSS3

Criando interfaces para navegadores web

Edson Hilios

September 21, 2015
Tweet

More Decks by Edson Hilios

Other Decks in Programming

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