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
67

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

Other Decks in Design

See All in Design
株式会社デイトラ様│コーポレートサイト│コンセプトシート
Avatar for Haruka_CAPEO haruka_capeo
0
2.1k
ビジネスアナリシスはビジネス”分析”じゃないよ！～システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス～
Avatar for BPStudy bpstudy
0
510
250131_product meetup
Avatar for Motoko Ishida motokoishida
0
210
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
Avatar for Shota Ikeyatsu ikeyatsu
2
1.8k
株式会社バクタム　会社説明資料
Avatar for Bactum Inc. bactum
0
240
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
Avatar for Gaku Oyanagi gakuoya
1
670
「デザイン」を信じるには
Avatar for なつ iflection
0
260
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
Avatar for bebe bebe
0
590
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
200
エンジニアでも捗る デザイナー的思考入門
Avatar for Tsubasa SEKIGUCHI tinykitten
PRO
1
1.1k
Storyboard Honey
Avatar for Rocío Parrón rocioparronrubio
0
270
harutaka Vision Deck
Avatar for ZENKIGEN,Inc. zenkigenforrecruit
0
130

Featured

See All Featured
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
233
17k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
Visualization
Avatar for Eitan Lees eitanlees
146
16k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.7k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
346
40k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
81
9k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
39
1.9k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
47
14k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
184
22k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.7k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k

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 >