$30 off During Our Annual Pro Sale. View Details »

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. HTML É uma linguagem de marcação utilizada para criar interfaces

    gráficas pelo navegador. Define blocos de construção de elementos visuais, como imagens <img>, formularios <input> , títulos <h1> entre outros.
  2. 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.
  3. 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.
  4. 1 2 3 4 5 Linguagem de marcação <nome-tag atributo="valor">...</nome-tag>

    <nome-tag atributo1="valor" atributo2="valor"> São instruções baseadas em tags, utilizada para simplificar e abstrair a construção de interfaces.
  5. 0 1 2 3 4 5 6 7 8 9

    10 Estrutura básica <!doctype html> <html> <head> <meta charset="utf-8"> <title>Título da página</title> </head> <body> <!-- Aqui começa a parte visível --> </body> </html>
  6. 0 1 2 Doctype <!doctype html> 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.
  7. 0 1 2 HTML <html> <!-- [...] --> </html> Logo

    após temos a tags html que é o nó inicial do documento, dentro dele definimos todas as propriedades do documento.
  8. 0 1 2 Head <head> <title>Título da página</title> </head> 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.
  9. 0 1 2 Body <body> <!-- Aqui começa a parte

    visível --> </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.
  10. 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é
  11. 1 2 3 4 5 6 7 8 9 10

    11 12 13 14 15 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Título da página</title> </head> <body> <header></header> <nav></nav> <main> <section></section <aside></aside> </main> <footer></footer> </body>
  12. 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.
  13. 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
  14. 0 1 2 3 4 5 6 7 8 9

    10 Títulos <h1>Título H1</h1> <h2>Título H2</h2> <h3>Título H3</h3> <h4>Título H4</h4> <h5>Título H5</h5> <h6>Título H</h6> Título H1 Título H2 Título H3 Título H4 Título H5 Título H6
  15. 0 1 2 3 4 5 6 7 8 9

    10 Listas <h3>Ordenada</h3> <ol> <li>Item 1</li> <li>Item 2</li> </ol> <h3>Desordenada</h3> <ul> <li>Item 3</li> <li>Item 4</li> </ul> Ordenada 1. Item 1 2. Item 2 Desordenada • Item 3 • Item 4
  16. 0 1 2 3 4 5 6 7 8 9

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

    10 <p><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</strong> </p><p> <em>Minus, dolor que ducimus officia modi reprehenderit saepe. </em> </p> Elementos textuais Lorem ipsum dolor sit amet, consectetur adipiscing elit. Minus, dolor que dolor ducimus officia modi reprehenderit saepe.
  18. 0 1 2 3 4 5 6 7 8 9

    10 Links e imagens <a href="http://google.com">Google</a> <br> <img src="../imgs/imagem.jpg" alt="Texto"> Google
  19. 0 1 2 3 4 5 6 7 8 9

    10 <table> <tr> <td>A1</td> <td>A2</td> </tr> <tr> <td>B1</td> <td>B2</td> </tr> </table> Tabelas A1 A2 B1 B2
  20. 0 1 2 3 4 5 6 7 8 9

    10 Formulários <form action="#"> <input type="text"> <input type="checkbox"> <input type="radio"> <select> <option>...</option> </select> <button>Enviar</button> </form>
  21. Elementos block e inline Elementos block são aqueles que ocupam

    uma linha inteira: <div></div> <p></p> <ul></ul> <h1></h1>
  22. 1 2 3 4 5 Elementos block e inline <p>Lorem

    ipsum <a href="#">dolor</a> sit amet, consectetur <span>adipiscing</span> elit. Minus, dolorque ducimus <strong>officia</srong> modi <em>reprehender</em> saepe.</p> 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:
  23. Os elementos inline, do exemplo anterior, se ajustam automaticamente ao

    texto: Elementos block e inline <p> a bcd efgh ijklmnopqrs tuvwxyz .</p> <span></span> <a></a> <strong></strong> <em></em>
  24. 0 1 2 3 4 5 6 7 8 9

    10 Elementos inline span <!-- Elemento inline genérico --> a <!-- Link diferentes páginas --> img <!-- Imagens --> <!-- Negrito, itálico, citação, ... --> strong, em, cite, sub, sup <!-- Elementos de formulários --> button, input, label, select, textarea
  25. 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)
  26. 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.
  27. 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 <head> <meta charset="utf-8"> <title>Título da página</title> <link rel="stylesheet" href="estilo.css"> </head>
  28. 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:
  29. 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. <div class="verde">Planta</div> <p class="verde grande">Hulk</p>
  30. 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!
  31. 1 2 3 4 5 Permite selecionar o elemento pelo

    attributo id, porém, apenas um elemento. IDs <div id="elemento1">Hello</div> <span id="elemento2">World</span>
  32. 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%; }
  33. 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 */ }
  34. 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%; }
  35. 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
  36. 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
  37. 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; }
  38. 0 1 2 3 4 5 6 7 8 9

    10 <div class="classe"> <p>Planta</p> <p class="classe-filha"> Planta </div> </div> <div class="classe-prima"> Planta </div> Hierarquia
  39. Cada navegador implementa seu próprio motor de renderização de HTML,

    isso, faz com que possam acontecer inconsistencias. Problemática dos navegadores
  40. Biblioteca de estilos comuns, que pode ser utilizada como base

    para a construção de interfaces web. Bootstrap
  41. JavaScript É uma linguagem de programação interpretada, projetada para se

    executada pelo navegadores e capaz de manipular e interagir com os elementos HTMLs.
  42. FIM

  43. Criar um arquivo CSS e vincula-lo, com o HTML (<link

    rel="stylesheet" href="estilo.css">): • 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