HTML5

CSS3

&

slides.com/batistaceos/

html-css/

PASSA O SLIDE

COM O ESPAÇO!!!

HTML5

<head>

<body>

<html>

<header>

<title>

<footer>

<nav>

HTML5

<h1>

<a>

<p>

...

HTML5

Atributos

<tag   at1="valor">

<a href="...">Link</a>

<a href="..." target="_blank >"

HTML5

Formulários

<form> ... </form>

<input />

HTML5

<form> ... </form>

Container

Contém os campos

Pai dos inputs

HTML5

<input />

Campo

Recebe um valor

HTML5

<input type="..." />

text

password

email

date

submit

...

HTML5

<input value="..." />

Valor pré definido

<input placeholder="..." />

Dica

HTML5

Identificações

Classes

Atributos

HTML5

Identificações

Unicamente

id

Diferenciar

HTML5

Classes

Coletivamente

class

Agrupar

HTML5

ID

Exemplo

HTML5

<label>

Rótulo

Legenda

<label for="ID1">

<input id="ID1">

HTML5

Class

Exemplo

CSS3

C
S
S

ascading

tyle

heet

CSS3

F
E
C

olha de

stilo em

ascata

CSS3

"Rosto"

Estilização

<style>

Inline ou não

.css

CSS3

<style> ... </style>

<...   style="..."     ...>

X

Tag

Atributo

CSS3

<style> ... </style>

<...   style="..."     ...>

X

Tag

Atributo

CSS3

Propriedade:

valor;

Propriedade:

valor;

Propriedade:

valor;

color:

white;

display:

block;

font-size:

50pt;

CSS3

<style> ... </style>

<...   style="..."     ...>

X

Tag

Atributo

CSS3

Propriedade:

valor;

Propriedade:

valor;

Propriedade:

valor;

Seletor {

}

CSS3

Seletor

Elemento

Identificador

Classes

CSS3

Seletor

tag

id

class

CSS3

Seletor

nomeDaTag {...}

#id {...}

.class{...}

Pela Atenção

Obrigado

HTML & CSS

By João Batista

HTML & CSS

  • 96