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

HTML & CSS

Avatar for Letícia Figueira Letícia Figueira
June 01, 2014
Design
2
68

HTML & CSS

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

Avatar for Letícia Figueira

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
Avatar for Letícia Figueira leticia
0
41
Rails Girls Montevideo
Avatar for Letícia Figueira leticia
0
85
Ruby: passado, presente e além da Web
Avatar for Letícia Figueira leticia
0
52

Other Decks in Design

See All in Design
モビリティプラットフォームの未来を築くクラウド基盤
Avatar for Hajime KOSHIRO kossykinto
0
150
逆向きUIの世界 〜iOSアプリのRTL言語対応〜
Avatar for akatsuki174 akatsuki174
1
350
【Designship 2025｜10.11】デザイン組織と事業貢献、その挑戦と結果。
Avatar for payatsun payatsusan213
1
850
デザイナーがはばたく未来の入り口『hatch』が描く、新しいデザイナー育成のカタチ
Avatar for Goodpatch Inc. goodpatch
3
2.8k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
320
【pmconf2025】PdMの頭の中を見える化する体験構造図
Avatar for Shigeyuki Kameda kamechi7222222
1
1.4k
kintone_aroma
Avatar for kintone kintone
0
1k
デザイナーがAIを使い倒して爆速プロダクト開発！社内ハッカソンでの取り組み紹介
Avatar for 都村　美帆 abokadotyann
9
2.8k
「稼ぐ」だけでなく 「還す」ためのデザイン / Designship2025
Avatar for インクルーシブデザインスタジオCULUMU culumu
1
520
組織はみんなでつくる。デザイナーが仕掛ける急拡大する組織のカルチャーづくり
Avatar for Kasumi Morita mkasumi
0
1k
越境するデザイン人材：デザイナーが社会資本となる世界へ
Avatar for Goodpatch Inc. goodpatch
1
410
Memory Man v3 (WIP)
Avatar for Chad Welson storybychad
PRO
0
3k

Featured

See All Featured
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
62
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
210
24k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
9
1k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
74
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
25
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
86
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
20
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
140

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 >