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

HTML & CSS

Letícia Figueira
June 01, 2014
Design
2
65

HTML & CSS

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

Letícia Figueira

June 01, 2014
Tweet

More Decks by Letícia Figueira

See All by Letícia Figueira
Empreender, Inspirar e Engajar com Tecnologia
leticia
0
37
Rails Girls Montevideo
leticia
0
80
Ruby: passado, presente e além da Web
leticia
0
47

Other Decks in Design

See All in Design
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
280
太田博三(@usagisan2020)
otanet
0
190
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
2
490
Cardápio - Caraguá A Gosto 2024 - De 01/08 a 08/09/2024
caraguatatuba
0
5.9k
ユーザーに向き合うデザインが介護・福祉の現場を変える / User-facing design changes the field of care and welfare
sms_tech
0
140
デザイナー視点の体験設計とデザインレビューを事業部全員で体験するワークショップをしたお話
masayofff
3
210
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
160
ふわっとはじめるSSOT – SSOT for Communication Design
sekiguchiy
0
1.1k
Arborea Art Book
thebogheart
1
290
みんなに知って欲しい 視覚過敏のアクセシビリティ
0opacity_
4
830
Yahoo Newsletter Clicker Template
xuechunwu
0
290
Dreamia
elsh
0
170

Featured

See All Featured
Automating Front-end Workflow
addyosmani
1366
200k
Designing Experiences People Love
moore
138
23k
How GitHub (no longer) Works
holman
310
140k
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
The Cult of Friendly URLs
andyhume
78
6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Documentation Writing (for coders)
carmenintech
65
4.4k
Music & Morning Musume
bryan
46
6.2k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
Six Lessons from altMBA
skipperchong
27
3.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k

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 >