www.bravaecm.com.br
Introdução a HTML/CSS
Marcos Roberto Ferreira
marcos.wp@gmail.com
@marcoooos
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
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
www.bravaecm.com.br4
O que é
HTML?
www.bravaecm.com.br5
HyperText Markup Language
www.bravaecm.com.br6
“Quem aqui nunca utilizou linguagem de
marcação, não é?”
Linguagem de Marcação
www.bravaecm.com.br7
E Hypertexto?
www.bravaecm.com.br8
Nelson não gostava de texto...
www.bravaecm.com.br9
Ele queria algo não sequêncial
www.bravaecm.com.br10
E com imagens!
www.bravaecm.com.br11
HyperTexto
www.bravaecm.com.br12
HyperTextoTem um
texto aqui!!!!
www.bravaecm.com.br13
HyperTexto
Tem um link aqui!!!!
Tem um texto
aqui!!!!
www.bravaecm.com.br14
Como escrever
HTML?
www.bravaecm.com.br15
www.bravaecm.com.br16
tags e atributos
www.bravaecm.com.br17
<a href=“algo.html”>Isto é um link
</a>
tag atributo
www.bravaecm.com.br18
www.bravaecm.com.br19
Pricipais tags
www.bravaecm.com.br20
Tudo começa com a tag <html>
www.bravaecm.com.br21
Assim como nós HTML possui um <head> e um <body>
<head> </head>
<body>
</body>
www.bravaecm.com.br22
<head> e <body>
www.bravaecm.com.br23
E não ter um deles também faz falta!
www.bravaecm.com.br24
Outras tagsimportantes
www.bravaecm.com.br25
<title>
</title>
www.bravaecm.com.br26
<title>
www.bravaecm.com.br27
Headings
<h1>
</h1>
<h2>
</h2>
<h3>
</h3>
www.bravaecm.com.br28
<h1>, <h2>, <h3>
www.bravaecm.com.br29
Parágrafo
<p>
</p><p>
</p>
www.bravaecm.com.br30
<p>
www.bravaecm.com.br31
Links
<a>
</a>
www.bravaecm.com.br32
<a>
www.bravaecm.com.br33
Imagens
<img>
</img>
www.bravaecm.com.br34
<img>
www.bravaecm.com.br35
Tabelas<table>
</table>
www.bravaecm.com.br36
Tabelas<table>
</table>
<tr> </tr>
www.bravaecm.com.br37
Tabelas<table>
</table>
<tr> </tr><td> </td>
www.bravaecm.com.br38
<table>
www.bravaecm.com.br39
Forms
<form>
</form>
www.bravaecm.com.br40
Forms
<form>
</form>
<input type=“text”/>
www.bravaecm.com.br41
Forms
<form>
</form>
<input type=“text”/>
<input type=“radio” name=“campo” value=“1”>
<input type=“radio” name=“campo” value=“2”>
www.bravaecm.com.br42
Forms
<form>
</form>
<input type=“text”/><select>
</select>
<option> </option>
www.bravaecm.com.br43
<form>
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">
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
www.bravaecm.com.br46
www.bravaecm.com.br47
www.bravaecm.com.br48
Declaração de um estilo
www.bravaecm.com.br49
Declaração CSS – Arquivo externo
www.bravaecm.com.br50
Declaração CSS – Declaração interna
www.bravaecm.com.br51
Declaração CSS – Em linha
www.bravaecm.com.br52
Exemplo com CSS
www.bravaecm.com.br53
Exemplo com 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
www.bravaecm.com.br
bravaecm@totvs.com.br
QUESTÕES?