HTML & CSS

A small talk I gave to introduce Real Seguro Viagem marketing folks into web pages.

Transcript

1. HTML & CSS That is so nifty!
2. O QUE É UMA WEB PAGE? Documento para a web Escrito em linguagem de marcação (HTML) Estilizado com CSS
3. O QUE É UMA WEB PAGE? HTML CSS ESTRUTURA APRESENTAÇÃO COMPORTAMENTO, MAS PULA ESSA!) (JS
4. HTML
5. HTML STYLE HEAD META TITLE LINK SCRIPT BODY IMG DIV H2 P ESTRUTURA DE TAGS
6. TAGS ✓ TAGS COM CONTEÚDO ! ✓ TAGS AUTO- DESCRITIVAS
7. <html> <head> <title>Hello, world!</title> </head> <body> <h1 class=“big-title”>Welcome!</h1> <div id=“main”> <p>This is a paragraph.</p> <a href=“http://site.com”>Link</a> </div> </body> </html> TAGS
8. ELEMENTOS <html> <head> <title>Hello, world!</title> </head> <body> <h1 class=“big-title”>Welcome!</h1> <div id=“main”> <p>This is a paragraph.</p> <a href=“http://site.com”>Link</a> </div> </body> </html>
9. ATRIBUTOS <html> <head> <title>Hello, world!</title> </head> <body> <h1 class=“big-title”>Welcome!</h1> <div id=“main”> <p>This is a paragraph.</p> <a href=“http://site.com”>Link</a> </div> </body> </html>
10. <html> <head> <title>Hello, world!</title> </head> <body> <h1 class=“big-title”>Welcome!</h1> <div id=“main”> <p>This is a paragraph.</p> <a href=“http://site.com”>Link</a> </div> </body> </html> IDS & CLASSES div#main h1.big-title
11. <html> <head> <title>An Image Tag</title> </head> <body> <img src=“http://site.com/image.png” /> </body> </html> Descrição e atributos: mais curto TAGS AUTO-DESCRITIVAS
12. BLOCK & INLINE Elementos de bloco ! header section h1..h6 form div footer aside p ul, ol, li article table dt, dl, dd Elementos inline ! span strong img input a em br abbr
13. WEB BROWSERS SABEM HTML…
14. … MAS ELES TÊM SOTAQUE! != != != !=
15. DOCTYPE <!DOCTYPE HTML> //HTML 5 ! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" “http://www.w3.org/TR/html4/strict.dtd"> //HTML 4 Vai antes da tag <html>
16. NA Atributos IDS e classes Tags auto-descritivas É ASSIM…
17. CSS
18. Cascading StyleSheets font color image border alignment text images videos links ESTILO CONTEÚDO
19. ESTRUTURA DO CSS p { color: red; } Seletor Declaração Valor Propriedade
20. SELETORES ✓div: ELEMENTO ! ✓#main: ID ! ✓.repeating-element: CLASSE
21. SELECIONAR ELEMENTO body { background-color: white; } ! p { font-size: 14px; font-color: blue; text-align: right; } Parágrafo com texto azul
22. SELECIONAR IDS #main { width: 50%; float: left; } Ocupa metade da largura disponível e fica à esquerda
23. SELECIONAR CLASSES .last-element { margin-right: 0; } Não apresenta margem à direita
24. TUDO JUNTO… a.menu-link { text-decoration: none; &:hover { text-decoration: underline; } } Mostra link sublinhado ao passar o mouse Atalho para o seletor
25. NA É ASSIM… Seletor de elemento Seletor de classe Propriedades e valores
26. SHOW ME WHAT WE CAN DO!
27. < /THANKS >