HTML & CSS

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 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…

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 >

HTML & CSS

HTML & CSS

Letícia Figueira

More Decks by Letícia Figueira

Other Decks in Design

Featured

Transcript

HTML & CSS That is so nifty!

O QUE É UMA WEB PAGE? Documento para a web

O QUE É UMA WEB PAGE? HTML CSS ESTRUTURA APRESENTAÇÃO

HTML

HTML STYLE HEAD META TITLE LINK SCRIPT BODY IMG DIV

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”>

ELEMENTOS <html> <head> <title>Hello, world!</title> </head> <body> <h1 class=“big-title”>Welcome!</h1> <div

ATRIBUTOS <html> <head> <title>Hello, world!</title> </head> <body> <h1 class=“big-title”>Welcome!</h1> <div

<html> <head> <title>Hello, world!</title> </head> <body> <h1 class=“big-title”>Welcome!</h1> <div id=“main”>

<html> <head> <title>An Image Tag</title> </head> <body> <img src=“http://site.com/image.png” />

BLOCK & INLINE Elementos de bloco ! header section h1..h6

WEB BROWSERS SABEM HTML…

… MAS ELES TÊM SOTAQUE! != != != !=

DOCTYPE <!DOCTYPE HTML> //HTML 5 ! <!DOCTYPE HTML PUBLIC "-//W3C//DTD

NA Atributos IDS e classes Tags auto-descritivas É ASSIM…

CSS

Cascading StyleSheets font color image border alignment text images videos

ESTRUTURA DO CSS p { color: red; } Seletor Declaração

SELETORES ✓div: ELEMENTO ! ✓#main: ID ! ✓.repeating-element: CLASSE

SELECIONAR ELEMENTO body { background-color: white; } ! p {

SELECIONAR IDS #main { width: 50%; float: left; } Ocupa

SELECIONAR CLASSES .last-element { margin-right: 0; } Não apresenta margem

TUDO JUNTO… a.menu-link { text-decoration: none; &:hover { text-decoration: underline;

NA É ASSIM… Seletor de elemento Seletor de classe Propriedades

SHOW ME WHAT WE CAN DO!

< /THANKS >