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

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

Other Decks in Design

See All in Design
Treasure_Hunting
Avatar for Sol Metts solmetts
0
230
見過ごさない誠実さ_アクティブバイスタンダーとIntegrityが支えるアジャイル文化 / integrity-and-active-bystander
Avatar for Aki spring_aki
1
290
2026年、デザイナーはなにに賭ける？
Avatar for Kazuhiro Tobita 0b1tk
0
470
kintone_aroma
Avatar for kintone kintone
0
1.3k
DMMデザイナーの “AI活用の現在と未来”
Avatar for TakumaS takumasaito
1
430
デザイナーとエンジニアで 同じ山に登ろう
Avatar for moco moco1013
0
120
見栄えと使いやすさの先にある 特別感 をデザインする / Designing a Sense of Specialness Beyond Aesthetics and Usability
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
250
2026の目標「もっと定量的に事業、会社へ貢献する！」
Avatar for yuri ohashi yuri_ohashi
0
650
企業にデザインが融けたとき、デザイナーにできること。事業会社12年間の探究と葛藤 / Designship2025
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
0
1.4k
【サイバーエージェント】Creative Switch 会社説明資料
Avatar for 【CyberAgent】クリエイター新卒採用 cyberagent_creators
0
5.1k
TWCP#21 UXデザインと哲学のはなし
Avatar for MAMIYA Shinsuke shinn
0
260
mount_company_profile
Avatar for mount inc. mount_inc
0
4.9k

Featured

See All Featured
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
140k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
74
11k
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
2
2.3k
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
0
130
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
0
3.4k
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
1
670
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
110
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
210
24k

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 >