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
71
2

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

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

Other Decks in Design

See All in Design
Of Ordination and Rebellion exploration sketches
Avatar for Rachel Poon rezaline
0
190
なぜ、インサイトを貯めるのか？
Avatar for 田島佳穂 tajima_kaho
3
2.5k
開閉UIのアニメーション設計
Avatar for hiro hiro0218
2
900
Signull 団体説明資料
Avatar for Signull signull
0
730
【優秀賞＋特別賞】くまモン食いしん坊弁当「くまモンの魔法の柑橘弁当」最終審査資料
Avatar for Shoko shoko_seven11
0
250
染み出し好きの、 染み出しコントロール論
Avatar for Takeru Mukai mukai_takeru
0
350
「親切なオンボーディング」 が招く罠　ー　AI時代のUXデザイン
Avatar for 小神 godlingkogami
1
140
AI時代に必要な アイデアの形
Avatar for ux-man uxman
0
240
2026の目標「もっと定量的に事業、会社へ貢献する！」
Avatar for yuri ohashi yuri_ohashi
0
880
社長の宿題への回答 「新卒×AI」が生み出す価値
Avatar for さき saki822
2
190
AI-Slopなデザインを生まないためのデザインプロセス戦略
Avatar for takanorip takanorip
7
5.1k
ISO 9241-171:2025っていうのがあってな
Avatar for Shoji Ohashi shosira
1
220

Featured

See All Featured
Visualization
Avatar for Eitan Lees eitanlees
152
17k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
190
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7.2k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
1
2.1k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
56k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.5k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
53k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.3k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
25k
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
200
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
67
56k

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 >