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
66
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
38
Rails Girls Montevideo
leticia
0
82
Ruby: passado, presente e além da Web
leticia
0
48
Other Decks in Design
See All in Design
【デザイン初め新年会2025|01.08】事業貢献するデザイン組織の挑戦 - 2025年、課題解決をリードする。
payatsusan213
0
9.3k
Dive Deep into Communication
yomtsu
0
210
クライアントワークにおける UXリサーチの実践
kozotaira
0
200
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
4.9k
ビジョン実現を加速させるデザインプログラムマネージャーの視座とキャリア/ Designship2024_Sato
root_recruit
0
260
Figma Code Connect を使ってエンジニアの新しい体験をデリバリする
junkifurukawa
0
620
Museum Heist
allykae
0
130
界隈からの逃走–デザイン初め新年会2025
sekiguchiy
3
980
How to go from research data to insights?
mastervicedesign
0
220
Goodpatch Tour💙 / We are hiring!
goodpatch
31
790k
20250129_DAST28_実空間にデジタル資源の接点をデザインする
majimasachi
0
220
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 組織横断のデザインの 取り組みについて
sig
1
270
Featured
See All Featured
Writing Fast Ruby
sferik
628
61k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Why Our Code Smells
bkeepers
PRO
336
57k
Done Done
chrislema
182
16k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Visualization
eitanlees
146
15k
A better future with KSS
kneath
238
17k
What's in a price? How to price your products and services
michaelherold
244
12k
Speed Design
sergeychernyshev
26
790
BBQ
matthewcrist
86
9.5k
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 >