Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Codelab HTML e CSS

255 views

Published on

Material utilizado durante o Codelab de HTML e CSS.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Codelab HTML e CSS

  1. 1. Codelab: HTML e CSS GDG Feira de Santana
  2. 2. Introdução
  3. 3. Um pouco de história
  4. 4. Como funciona
  5. 5. Vamos ver na prática GDG Feira de Santana Bem-vindo ao Grupo de Desenvolvedores Google de Feira de Santana (BA) O que é um GDG? Redes sociais Eventos
  6. 6. <!DOCTYPE html> <html> <head> <title>GDG Feira de Santana</title> <meta charset="utf-8"> </head> <body> <h1>GDG Feira de Santana</h1> <h2>Bem-vindo ao Grupo de Desenvolvedores Google de Feira de Santana (BA)</h2> <ul> <li>O que é um GDG?</li> <li>Redes sociais</li> <li>Eventos</li> </ul> </body> </html>
  7. 7. <figure> <img width="200px" src="img/gdgfsa.png" alt="Logo GDG Feira de Santana"> <figcaption>GDG Feira de Santana</figcaption> </figure>
  8. 8. <video src="video/gdg.mp4" controls>Seu navegador não suporta a tag video</video> <audio src="audio/Anydoll_-_Evil_Rockstar.mp3" controls> Seu navegador não suporta a tag audio</audio>
  9. 9. <link rel="stylesheet" href="style.css"> body { font-family: "Arial", "Helvetica", sans-serif; } figcaption{ font-style: italic; font-variant: small-caps; /*normal|small-caps|initial|inherit;*/ } h1{ background-image: url(img/background.png); height: 50px; color: white; }
  10. 10. p { text-align: right; /* alinhamento de cada linha */ line-height: 3px; /* tamanho da altura de cada linha */ letter-spacing: 3px; /* tamanho do espaço entre cada letra */ word-spacing: 5px; /* tamanho do espaço entre cada palavra */ text-indent: 30px; /* tamanho da margem da primeira linha do texto */ background-color: gray;/* rgb ou hexadecimal*/ color: blue; padding: 10px; /* padding-top padding-bottom padding-right padding-left*/ } video{ border-color: red; border-style: solid; border-width: 1px; height: 300px; width: 300px; }
  11. 11. Seletores CSS ID: #texto Classe: .video Atributo: audio[controls] Pseudo-classe: a:visited a:hover Relações: ● A B: qualquer elemento B que descendente de A (filhos, filhos de filhos, etc.) ● A > B: qualquer elemento B que é filho de A ● A:first-child: primeiro filho de A ● B + E: qualquer elemento E que é irmão próximo de B Wild card: *
  12. 12. Tabelas
  13. 13. Tabelas<table> <tr> <td>Evento</td> <td>Data e hor&aacute;rio</td> </tr> <tr> <td>JS Day Feira de Santana</td> <td>2017 7/14/17 2 p.m. -03</td> </tr> <tr> <td>Kotlin para programadores raiz</td> <td>6/14/17 8:30 p.m. -03</td> </tr> <tr> <td>Codelab Angular 2 B&aacute;sico</td> <td>3/25/17 1:30 p.m. -03</td> </tr> <tr> <td>Feliz Angular Novo!</td> <td>1/19/17 9 p.m. -03</td> </tr> </table>
  14. 14. Formulário <form> <fieldset> <legend>Inscreva-se</legend> <input type="text" placeholder="Nome" required/><br> <input type="email" placeholder="Email" required/><br> <label for="newsletter"> <input id="newsletter" type="checkbox"/> Receber novidades na nossa newsletter </label><br> <label for="gender">Gênero <br> <input type="radio" name="gender" value="male" checked/> Masculino<br> <input type="radio" name="gender" value="female"/> Feminino<br> <input type="radio" name="gender" value="other"/> Outro<br> </label> <button type="submit">Enviar</button> </fieldset> </form>
  15. 15. Semântica ● header: conteúdo de introdução, logo, navegação. ● nav: uma seção com links para navegar para outras páginas ou áreas da mesma página. ● aside: conteúdo relacionado à página, como informações sobre o autor, avisos, links relacionados, glossário. ● article: conteúdo principal da página. Pode ser um post de blog, notícia, artigo científico, comentários, etc. ● section: seção genérica em um documento, geralmente possui título.
  16. 16. Grid layout ● Melhor organização da página ● Responsividade <meta name="viewport" content="width=device- width, user-scalable=no"> Ou @viewport{ zoom: 1.0; width: device-width; }
  17. 17. Grid layout ● Conjunto de linhas e colunas ● Posições fixa ou flexíveis ● Posicionamento de itens ● Grids adicionais ● Alinhamento ● Sobreposição: z-index
  18. 18. .nav ul{ padding: 0px; margin: 0px; list-style: none; background-color: #EDEDED; } Menu de navegação
  19. 19. .nav ul li { display: inline; } .nav ul li a { padding: 2px 10px; display: inline-block; /* visual do link */ background-color:#EDEDED; color: #333; text-decoration: none; border-bottom:3px solid #EDEDED; }
  20. 20. .nav ul li a:hover { background-color:#D6D6D6; color: #6D6D6D; border-bottom:3px solid #14EA00; }
  21. 21. Grid .grid-container { display: grid; grid-template-columns: 70% 30%; grid-template-rows: 30% 60% 10%; grid-column-gap: 20px; grid-row-gap: 20px; grid-template-areas: 'header header' 'article aside' 'footer footer'; }
  22. 22. Grid layout
  23. 23. Media query ● All: Para todos os dispositivos. ● Braille: Para dispositivos táteis. ● Embossed: Para dispositivos que imprimem em braile. ● Handheld: Para dispositivos portáteis, geralmente com telas pequenas e banda limitada. ● Print: Para impressão em papel. ● Projection: Para apresentações como PPS. ● Screen: Para monitores ou dispositivos com telas coloridas e resolução adequada. ● Speech: Para sintetizadores de voz. As CSS 2 tem uma especificação de CSS chamada Aural, onde podemos formatar a voz dos sintetizadores. ● Tty: Para dispositivos que possuem uma grade fixa para exibição de caracteres, tais como: Teletypes, Terminais e também dispositivos portáteis com display limitados. ● Tv: Para dispositivos como televisores, ou seja, com baixa resolução, quantidade de cores e scroll limitados.
  24. 24. Media query - operadores lógicos ● And: screen and (max-width: 600px) ● Or: screen and (color), tv and (color) ● Not: all and (not color) ● Only: only screen and (color)
  25. 25. Media query @media screen and (max-device-width: 600px) { .grid-container{ grid-gap: 10px; grid-template-columns: 100%; grid-template-rows: auto; grid-template-areas: 'header' 'article' 'aside' 'footer'; } }
  26. 26. Media query
  27. 27. Referências ● Desenvolvimento Web com HTML, CSS e JavaScript: https://www.caelum.com.br/apostila-html-css-javascript/ ● Mozilla Developer Network HTML: https://developer.mozilla.org/pt- BR/docs/Web/HTML ● Mozilla Developer Network CSS: https://developer.mozilla.org/pt- BR/docs/Web/CSS ● Adeus Flexbox! Bem-vindo CSS Grid Layout: https://imasters.com.br/desenvolvimento/adeus-flexbox-bem-vindo- css-grid-layout/ ● Utilizando CSS Media Queries: http://www.devmedia.com.br/utilizando-css-media-queries/27085
  28. 28. Devfest Nordeste 2017: www.devfestne.com.br

×