Developer day 2010 - html-css
-
Upload
marcos-ferreira -
Category
Documents
-
view
473 -
download
0
Transcript of Developer day 2010 - html-css
![Page 1: Developer day 2010 - html-css](https://reader034.fdocument.pub/reader034/viewer/2022052208/55946e371a28abea718b463e/html5/thumbnails/1.jpg)
www.bravaecm.com.br
Introdução a HTML/CSS
Marcos Roberto Ferreira
@marcoooos
![Page 2: Developer day 2010 - html-css](https://reader034.fdocument.pub/reader034/viewer/2022052208/55946e371a28abea718b463e/html5/thumbnails/2.jpg)
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](https://reader034.fdocument.pub/reader034/viewer/2022052208/55946e371a28abea718b463e/html5/thumbnails/3.jpg)
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 6: Developer day 2010 - html-css](https://reader034.fdocument.pub/reader034/viewer/2022052208/55946e371a28abea718b463e/html5/thumbnails/6.jpg)
www.bravaecm.com.br6
“Quem aqui nunca utilizou linguagem de
marcação, não é?”
Linguagem de Marcação
![Page 13: Developer day 2010 - html-css](https://reader034.fdocument.pub/reader034/viewer/2022052208/55946e371a28abea718b463e/html5/thumbnails/13.jpg)
www.bravaecm.com.br13
HyperTexto
Tem um link aqui!!!!
Tem um texto
aqui!!!!
![Page 21: Developer day 2010 - html-css](https://reader034.fdocument.pub/reader034/viewer/2022052208/55946e371a28abea718b463e/html5/thumbnails/21.jpg)
www.bravaecm.com.br21
Assim como nós HTML possui um <head> e um <body>
<head> </head>
<body>
</body>
![Page 41: Developer day 2010 - html-css](https://reader034.fdocument.pub/reader034/viewer/2022052208/55946e371a28abea718b463e/html5/thumbnails/41.jpg)
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](https://reader034.fdocument.pub/reader034/viewer/2022052208/55946e371a28abea718b463e/html5/thumbnails/42.jpg)
www.bravaecm.com.br42
Forms
<form>
</form>
<input type=“text”/><select>
</select>
<option> </option>
![Page 44: Developer day 2010 - html-css](https://reader034.fdocument.pub/reader034/viewer/2022052208/55946e371a28abea718b463e/html5/thumbnails/44.jpg)
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](https://reader034.fdocument.pub/reader034/viewer/2022052208/55946e371a28abea718b463e/html5/thumbnails/45.jpg)
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 54: Developer day 2010 - html-css](https://reader034.fdocument.pub/reader034/viewer/2022052208/55946e371a28abea718b463e/html5/thumbnails/54.jpg)
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