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
12年続くB2DサービスとUXデザイン / UX Design keeps B2D service alive over 12 years
tnj
0
280
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
270
HCDフォーラム2024 「HCDとHAI ~人間とAIが共存する世界の実現~」
kamechi7222222
0
280
ネーミングの極意 - その名は体を現していますか? -
kakukoki
2
470
なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
0
590
How to go from research data to insights?
mastervicedesign
0
220
[Designship2024] デザインの力でサービスの価値を追求していたら、組織全体をデザインしていた話
okakasoysauce
2
1.1k
Rayout Pattern 01
one0
0
1.5k
デザイナーのお仕事(UI/UX GRAPHIC GROUP)
mirrativ
0
110
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
680
セブンデックス カルチャーブック
sevendex
0
1.7k
Personal Story Sequence - Vendetta(WIP)
elrns88
0
400
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
521
39k
Fireside Chat
paigeccino
34
3.2k
Producing Creativity
orderedlist
PRO
343
39k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Building Your Own Lightsaber
phodgson
104
6.2k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
Building Applications with DynamoDB
mza
93
6.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
Side Projects
sachag
452
42k
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 >