Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
HTML & CSS
Search
Letícia Figueira
June 01, 2014
Design
2
60
HTML & CSS
A small talk I gave to introduce Real Seguro Viagem marketing folks into web pages.
Letícia Figueira
June 01, 2014
Tweet
Share
More Decks by Letícia Figueira
See All by Letícia Figueira
Empreender, Inspirar e Engajar com Tecnologia
leticia
0
34
Rails Girls Montevideo
leticia
0
73
Ruby: passado, presente e além da Web
leticia
0
46
Other Decks in Design
See All in Design
#コムデナ vol.2 「初めてのデザインカンファレンス協賛!共有したい3つのやらかし」
kiyoshifuwa
1
280
Speaker DeckにおけるGoogleスライドのフォントの問題解決/problem solving for google slides 2023
moriyuya
23
2.1k
介護事業にデザインでどう向き合うか / Designship 2023
sms_tech
0
2k
顕在化されていない期待、デザインの灯台
daitorii
1
1k
UIをもたらすコンテクストの考察
securecat
8
2.4k
Apple提供アプリのナビゲーションバーアイテムクイズ / 20231110-hig
uhooi
1
160
Desarrollo de Carrera en Diseño y Producto
solmesz1
0
160
Concept Art of Pirate Cat
hansolo21
0
2.6k
Amebaデザインシステム Spindleの開発 / The Development of Spindle
spindle
4
510
共創のための地域基盤としての非公式組織の形成 / Informal community as an infrastructure for co-creation
fumiyaakasaka
0
170
今日から始めるDesignOpsのヒント
isaikaori
1
390
Installing and Running decksh/pdfdeck
ajstarks
0
470
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
223
17k
Making Projects Easy
brettharned
106
5.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
343
19k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
Typedesign – Prime Four
hannesfritz
36
2k
Robots, Beer and Maslow
schacon
PRO
154
7.9k
Designing with Data
zakiwarfel
94
4.8k
Principles of Awesome APIs and How to Build Them.
keavy
119
16k
Fantastic passwords and where to find them - at NoRuKo
philnash
35
2.4k
The Pragmatic Product Professional
lauravandoore
24
5.7k
Designing for Performance
lara
601
67k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
Transcript
HTML & CSS That is so nifty!
O QUE É UMA WEB PAGE? Documento para a web
Escrito em linguagem de marcação (HTML) Estilizado com CSS
O QUE É UMA WEB PAGE? HTML CSS ESTRUTURA APRESENTAÇÃO
COMPORTAMENTO, MAS PULA ESSA!) (JS
HTML
HTML STYLE HEAD META TITLE LINK SCRIPT BODY IMG DIV
H2 P ESTRUTURA DE TAGS
TAGS ✓ TAGS COM CONTEÚDO ! ✓ TAGS AUTO- DESCRITIVAS
<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
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>
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>
<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
<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
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
WEB BROWSERS SABEM HTML…
… MAS ELES TÊM SOTAQUE! != != != !=
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>
NA Atributos IDS e classes Tags auto-descritivas É ASSIM…
CSS
Cascading StyleSheets font color image border alignment text images videos
links ESTILO CONTEÚDO
ESTRUTURA DO CSS p { color: red; } Seletor Declaração
Valor Propriedade
SELETORES ✓div: ELEMENTO ! ✓#main: ID ! ✓.repeating-element: CLASSE
SELECIONAR ELEMENTO body { background-color: white; } ! p {
font-size: 14px; font-color: blue; text-align: right; } Parágrafo com texto azul
SELECIONAR IDS #main { width: 50%; float: left; } Ocupa
metade da largura disponível e fica à esquerda
SELECIONAR CLASSES .last-element { margin-right: 0; } Não apresenta margem
à direita
TUDO JUNTO… a.menu-link { text-decoration: none; &:hover { text-decoration: underline;
} } Mostra link sublinhado ao passar o mouse Atalho para o seletor
NA É ASSIM… Seletor de elemento Seletor de classe Propriedades
e valores
SHOW ME WHAT WE CAN DO!
< /THANKS >