Developer day 2010 - html-css

55
www.bravaecm.com.br Introdução a HTML/CSS Marcos Roberto Ferreira [email protected] @marcoooos

Transcript of Developer day 2010 - html-css

Page 1: Developer day   2010 - html-css

www.bravaecm.com.br

Introdução a HTML/CSS

Marcos Roberto Ferreira

[email protected]

@marcoooos

Page 2: Developer day   2010 - html-css

www.bravaecm.com.br

Empresa especialista na distribuição e prestação de serviços em

soluções de GED/CM, Workflow/BPM, Qualidade e Portais, que conta com a credibilidade de ser uma empresa com

o selo TOTVS Business Partner.

10 anos de atuação no mercado

+ de 1.000 projetos entregues

+ de 1.000.000 horas

aplicadas em projetos

Equipe certificada ealtamente qualificada para atendimento em toda a América Latina

BRAVA ECM

Page 3: Developer day   2010 - html-css

www.bravaecm.com.br3

I) O que é HTML

II) Como escrever HTML

III) Principais tags

IV) Tags importantes

V) Algumas tags conhecidas

VI) CSS

Programação

Page 4: Developer day   2010 - html-css

www.bravaecm.com.br4

O que é

HTML?

Page 5: Developer day   2010 - html-css

www.bravaecm.com.br5

HyperText Markup Language

Page 6: Developer day   2010 - html-css

www.bravaecm.com.br6

“Quem aqui nunca utilizou linguagem de

marcação, não é?”

Linguagem de Marcação

Page 7: Developer day   2010 - html-css

www.bravaecm.com.br7

E Hypertexto?

Page 8: Developer day   2010 - html-css

www.bravaecm.com.br8

Nelson não gostava de texto...

Page 9: Developer day   2010 - html-css

www.bravaecm.com.br9

Ele queria algo não sequêncial

Page 10: Developer day   2010 - html-css

www.bravaecm.com.br10

E com imagens!

Page 11: Developer day   2010 - html-css

www.bravaecm.com.br11

HyperTexto

Page 12: Developer day   2010 - html-css

www.bravaecm.com.br12

HyperTextoTem um

texto aqui!!!!

Page 13: Developer day   2010 - html-css

www.bravaecm.com.br13

HyperTexto

Tem um link aqui!!!!

Tem um texto

aqui!!!!

Page 14: Developer day   2010 - html-css

www.bravaecm.com.br14

Como escrever

HTML?

Page 15: Developer day   2010 - html-css

www.bravaecm.com.br15

Page 16: Developer day   2010 - html-css

www.bravaecm.com.br16

tags e atributos

Page 17: Developer day   2010 - html-css

www.bravaecm.com.br17

<a href=“algo.html”>Isto é um link

</a>

tag atributo

Page 18: Developer day   2010 - html-css

www.bravaecm.com.br18

Page 19: Developer day   2010 - html-css

www.bravaecm.com.br19

Pricipais tags

Page 20: Developer day   2010 - html-css

www.bravaecm.com.br20

Tudo começa com a tag <html>

Page 21: Developer day   2010 - html-css

www.bravaecm.com.br21

Assim como nós HTML possui um <head> e um <body>

<head> </head>

<body>

</body>

Page 22: Developer day   2010 - html-css

www.bravaecm.com.br22

<head> e <body>

Page 23: Developer day   2010 - html-css

www.bravaecm.com.br23

E não ter um deles também faz falta!

Page 24: Developer day   2010 - html-css

www.bravaecm.com.br24

Outras tagsimportantes

Page 25: Developer day   2010 - html-css

www.bravaecm.com.br25

<title>

</title>

Page 26: Developer day   2010 - html-css

www.bravaecm.com.br26

<title>

Page 27: Developer day   2010 - html-css

www.bravaecm.com.br27

Headings

<h1>

</h1>

<h2>

</h2>

<h3>

</h3>

Page 28: Developer day   2010 - html-css

www.bravaecm.com.br28

<h1>, <h2>, <h3>

Page 29: Developer day   2010 - html-css

www.bravaecm.com.br29

Parágrafo

<p>

</p><p>

</p>

Page 30: Developer day   2010 - html-css

www.bravaecm.com.br30

<p>

Page 31: Developer day   2010 - html-css

www.bravaecm.com.br31

Links

<a>

</a>

Page 32: Developer day   2010 - html-css

www.bravaecm.com.br32

<a>

Page 33: Developer day   2010 - html-css

www.bravaecm.com.br33

Imagens

<img>

</img>

Page 34: Developer day   2010 - html-css

www.bravaecm.com.br34

<img>

Page 35: Developer day   2010 - html-css

www.bravaecm.com.br35

Tabelas<table>

</table>

Page 36: Developer day   2010 - html-css

www.bravaecm.com.br36

Tabelas<table>

</table>

<tr> </tr>

Page 37: Developer day   2010 - html-css

www.bravaecm.com.br37

Tabelas<table>

</table>

<tr> </tr><td> </td>

Page 38: Developer day   2010 - html-css

www.bravaecm.com.br38

<table>

Page 39: Developer day   2010 - html-css

www.bravaecm.com.br39

Forms

<form>

</form>

Page 40: Developer day   2010 - html-css

www.bravaecm.com.br40

Forms

<form>

</form>

<input type=“text”/>

Page 41: Developer day   2010 - html-css

www.bravaecm.com.br41

Forms

<form>

</form>

<input type=“text”/>

<input type=“radio” name=“campo” value=“1”>

<input type=“radio” name=“campo” value=“2”>

Page 42: Developer day   2010 - html-css

www.bravaecm.com.br42

Forms

<form>

</form>

<input type=“text”/><select>

</select>

<option> </option>

Page 43: Developer day   2010 - html-css

www.bravaecm.com.br43

<form>

Page 44: Developer day   2010 - html-css

www.bravaecm.com.br44

<form>

<input id="nome" name="nome" type="text" />

<input name="casado" id="casado" type="checkbox">

<input name="sexo" id="sexoM" value="M" type="radio">

<select><option>Ensino médio</option><option>Ensino superior</option><option>Pós-graduado</option></select>

<input name="sexo" id="sexoF" value=“F" type="radio">

Page 45: Developer day   2010 - html-css

www.bravaecm.com.br45

Outras tags conhecidas

<div/> define uma divisão ou seção

<br/> pula uma linha

<button/> cria um botão

<textarea/> cria uma área de texto

Page 46: Developer day   2010 - html-css

www.bravaecm.com.br46

Page 47: Developer day   2010 - html-css

www.bravaecm.com.br47

Page 48: Developer day   2010 - html-css

www.bravaecm.com.br48

Declaração de um estilo

Page 49: Developer day   2010 - html-css

www.bravaecm.com.br49

Declaração CSS – Arquivo externo

Page 50: Developer day   2010 - html-css

www.bravaecm.com.br50

Declaração CSS – Declaração interna

Page 51: Developer day   2010 - html-css

www.bravaecm.com.br51

Declaração CSS – Em linha

Page 52: Developer day   2010 - html-css

www.bravaecm.com.br52

Exemplo com CSS

Page 53: Developer day   2010 - html-css

www.bravaecm.com.br53

Exemplo com CSS

Page 54: Developer day   2010 - html-css

www.bravaecm.com.br54

Referências

http://webdesignledger.com/tips/the-most-common-html-and-css-mistakes-

to-avoid

http://www.w3schools.com/html/default.asp

http://www.w3schools.com/css/default.asp

http://piadasdaleloca.blogspot.com/2009/09/entendendo-html-em-outras-

palavras.html

http://pt.wikipedia.org/wiki/HTML

http://pt.wikipedia.org/wiki/Hipertexto

Page 55: Developer day   2010 - html-css

www.bravaecm.com.br

[email protected]

QUESTÕES?