Introdução a
Desenvolvimento Web
Iago Effting iago.effting@gmail.com
O que é?
O que é?
Linguagem de Marcação
O que é?
Linguagem de Marcação
Para que serve?
O que é?
Linguagem de Marcação
Para que serve?
Desenvolver página Web
O que é?
Linguagem de Marcação
Para que serve?
Recomendações
Desenvolver página Web
O que é?
Linguagem de Marcação
Para que serve?
W3Schools
http://goo.gl/9Z751Y
Recomendações
Desenvolver página Web
O que é?
O que é?
Folha de Estilo Cascata
O que é?
Folha de Estilo Cascata
Para que serve?
O que é?
Folha de Estilo Cascata
Para que serve?
Deixar as coisas “Legais”
O que é?
Folha de Estilo Cascata
Para que serve?
Recomendações
Deixar as coisas “Legais”
O que é?
Folha de Estilo Cascata
Para que serve?
Maujor
http://goo.gl/9Z751Y
W3Schools
http://goo.gl/lxH1lg
Recomendações
...
HTML + CSS
Criando uma página HTML
<!DOCTYPE html>
<html>
</html>
SaídaIndex.html
HTML + CSS
Adicionando um Titulo
<!DOCTYPE html>
<html>
<head>
<title>Site 01</title>
</head>
</html>
SaídaIndex.html
HTML + CSS
Criando Corpo <body>*
<!DOCTYPE html>
<html>
<head>
<title>Site 01</title>
</head>
<body>
</body>
</html>
Saída...
*O que é <body>?
É o corpo do documento onde
todo o conteúdo HTML deve ficar:
• Textos;
• Hipertextos;
• Imagens;
• Formul...
HTML + CSS
Escrevendo no Corpo
<!DOCTYPE html>
<html>
<head>
<title>Site 01</title>
</head>
<body>
<h1>Cabeçalho</h1>
<p>I...
HTML + CSS
Escrevendo no Corpo
<!DOCTYPE html>
<html>
<head>
<title>Site 01</title>
</head>
<body>
<h1>Cabeçalho</h1>
<p>I...
HTML + CSS
Alterando cor da tag <h1>
…
<body>
<h1 style=“color:
#F00F00”>
Cabeçalho
</h1>
<p>Istó é um
parágrafo</p>
</bod...
HTML + CSS
Alterando cor da tag <h1>
…
<body>
<h1 style=“color:
#F00F00”>
Cabeçalho
</h1>
<p>Istó é um
parágrafo</p>
</bod...
*O que é style?
O atributo style é usado para
definir informações de estilo para
um elemento. Alguns deles são:
• color: ;...
*O que é style?
O atributo style é usado para
definir informações de estilo para
um elemento. Alguns deles são:
• color: ;...
HTML + CSS
Separando CSS do HTML
…
<head>
<title>Site 01</title>
<style>
</style>
</head>
…
SaídaIndex.html
HTML + CSS
Separando CSS do HTML
…
<style>
h1{color: #F00F00”; }
</style>
…
<h1>Cabeçalho</h1>
<p>Istó é um
parágrafo</p>
...
*Padrão de definição
O padrões para manipular
elementos CSS dentro das tags
<style></style> é o seguinte:
elemento {propri...
*Padrão de definição
O padrões para manipular
elementos CSS dentro das tags
<style></style> é o seguinte:
elemento {propri...
HTML + CSS
Atribuindo Identificador
…
<h1 id=“titulo”>
Cabeçalho
</h1>
<p>Istó é um
parágrafo</p>
…
SaídaIndex.html
*O que é id?
O atributo id especifica um id único
para um elemento HTML:
<p id=“paragrafo”></p>
<a id=“link”></a>
*O que é id?
O atributo id especifica um id único
para um elemento HTML:
<p id=“paragrafo”></p>
<a id=“link”></a>
Obs.: O ...
HTML + CSS
Atribuindo Identificador
<style>
h1#titulo{color:
#F00F00”; }
</style>
…
<h1 id=“titulo”>
Cabeçalho
</h1>
<h1>O...
HTML + CSS
Atribuindo Identificador
<style>
h1#titulo{color:
#F00F00”; }
</style>
…
<h1 id=“titulo”>
Cabeçalho
</h1>
<h1>O...
*O que é o símbolo #
Usado para selecionar um
elemento com um id especifico,
como por exemplo:
elemento#nome_id {prop: val...
HTML + CSS
Criar grupo de elementos
…
<p class=“claro”>texto
1</p>
<p class=“escuro”>texto
2</p>
<p class=“claro”>texto
3<...
*O que é o atributo class?
O atributo class especifica um
grupo de um elemento HTML, não
existe limite de um conjunto de
c...
HTML + CSS
Criar grupo de elementos
…
<style>
p.claro{background:
#F6F6F6;}
p.escuro{background:
#333;}
</style>
…
<p clas...
*O que é o símbolo .
Usado para selecionar um
elemento com uma classe
especifica, como por exemplo:
/* Fica em negrito que...
HTML + CSS
Resetar Espaços Padrões
…
<style>
*{ margin: 0; padding: 0}
p.claro{background:
#F6F6F6;}
p.escuro{background:
...
HTML + CSS
Criar um arquivo CSS
…
<head>
…
<link rel=“stylesheet”
type=“text/css”
href=“estilo.css”>
…
</head>
…
SaídaInde...
HTML + CSS
Inserir Dados no estilo.css
*{ margin: 0; padding: 0; }
p.Claro { background:
#F6F6F6; }
p.escuro{ background:
...
*Arquivos .css
São arquivos de estilo. Ele não
deve ter a tag style, pois ele já o
interpreta. Você deve apenas
inserir os...
HTML + CSS
Acentuação
…
<head>
…
<meta charset=“utf-8”>
…
</head>
…
SaídaIndex.html estilo.css
Navegadores
Cada navegador tem sua configuração,
por isso teste seu código em cada um
(ou pelo menos nos mais utilizados)
Bônus HTML!
Lista de Tags
http://goo.gl/HRTcFF
Lista de Atributos
http://goo.gl/qkzLQG
Bônus CSS!
Maujor
http://maujor.com
CSS desde o início (Maujor)
http://goo.gl/EaSroL
Técnicas de Acessibilidade
(Maujor)
h...
Código Fonte
Iago Effting iago.effting@gmail.com
https://gist.github.com/iagoEffting/4148
9bb8cbd6b5db9825
Introdução a desenvolvimento web
Introdução a desenvolvimento web
Introdução a desenvolvimento web
Próximos SlideShares
Carregando em…5
×

Introdução a desenvolvimento web

338 visualizações

Publicada em

Introdução de HTML e CSS básico.

0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
338
No SlideShare
0
A partir de incorporações
0
Número de incorporações
5
Ações
Compartilhamentos
0
Downloads
6
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Introdução a desenvolvimento web

  1. 1. Introdução a Desenvolvimento Web Iago Effting iago.effting@gmail.com
  2. 2. O que é?
  3. 3. O que é? Linguagem de Marcação
  4. 4. O que é? Linguagem de Marcação Para que serve?
  5. 5. O que é? Linguagem de Marcação Para que serve? Desenvolver página Web
  6. 6. O que é? Linguagem de Marcação Para que serve? Recomendações Desenvolver página Web
  7. 7. O que é? Linguagem de Marcação Para que serve? W3Schools http://goo.gl/9Z751Y Recomendações Desenvolver página Web
  8. 8. O que é?
  9. 9. O que é? Folha de Estilo Cascata
  10. 10. O que é? Folha de Estilo Cascata Para que serve?
  11. 11. O que é? Folha de Estilo Cascata Para que serve? Deixar as coisas “Legais”
  12. 12. O que é? Folha de Estilo Cascata Para que serve? Recomendações Deixar as coisas “Legais”
  13. 13. O que é? Folha de Estilo Cascata Para que serve? Maujor http://goo.gl/9Z751Y W3Schools http://goo.gl/lxH1lg Recomendações Deixar as coisas “Marotas”
  14. 14. HTML + CSS Criando uma página HTML <!DOCTYPE html> <html> </html> SaídaIndex.html
  15. 15. HTML + CSS Adicionando um Titulo <!DOCTYPE html> <html> <head> <title>Site 01</title> </head> </html> SaídaIndex.html
  16. 16. HTML + CSS Criando Corpo <body>* <!DOCTYPE html> <html> <head> <title>Site 01</title> </head> <body> </body> </html> SaídaIndex.html
  17. 17. *O que é <body>? É o corpo do documento onde todo o conteúdo HTML deve ficar: • Textos; • Hipertextos; • Imagens; • Formulário;
  18. 18. HTML + CSS Escrevendo no Corpo <!DOCTYPE html> <html> <head> <title>Site 01</title> </head> <body> <h1>Cabeçalho</h1> <p>Istó é um parágrafo</p> </body> SaídaIndex.html
  19. 19. HTML + CSS Escrevendo no Corpo <!DOCTYPE html> <html> <head> <title>Site 01</title> </head> <body> <h1>Cabeçalho</h1> <p>Istó é um parágrafo</p> </body> SaídaIndex.html
  20. 20. HTML + CSS Alterando cor da tag <h1> … <body> <h1 style=“color: #F00F00”> Cabeçalho </h1> <p>Istó é um parágrafo</p> </body> … SaídaIndex.html
  21. 21. HTML + CSS Alterando cor da tag <h1> … <body> <h1 style=“color: #F00F00”> Cabeçalho </h1> <p>Istó é um parágrafo</p> </body> … SaídaIndex.html
  22. 22. *O que é style? O atributo style é usado para definir informações de estilo para um elemento. Alguns deles são: • color: ; • background-color: ; • font-size: ;
  23. 23. *O que é style? O atributo style é usado para definir informações de estilo para um elemento. Alguns deles são: • color: ; • background-color: ; • font-size: ; Observação: Attr style Funciona apenas no próprio elemento atribuído
  24. 24. HTML + CSS Separando CSS do HTML … <head> <title>Site 01</title> <style> </style> </head> … SaídaIndex.html
  25. 25. HTML + CSS Separando CSS do HTML … <style> h1{color: #F00F00”; } </style> … <h1>Cabeçalho</h1> <p>Istó é um parágrafo</p> … SaídaIndex.html
  26. 26. *Padrão de definição O padrões para manipular elementos CSS dentro das tags <style></style> é o seguinte: elemento {propriedade: valor; } p{ color: #F00; font-size: 12px}
  27. 27. *Padrão de definição O padrões para manipular elementos CSS dentro das tags <style></style> é o seguinte: elemento {propriedade: valor; } p{ color: #F00; font-size: 12px} Obs.: Pode ser colocado mais de uma propriedade, separando por ponto e virgula (;)
  28. 28. HTML + CSS Atribuindo Identificador … <h1 id=“titulo”> Cabeçalho </h1> <p>Istó é um parágrafo</p> … SaídaIndex.html
  29. 29. *O que é id? O atributo id especifica um id único para um elemento HTML: <p id=“paragrafo”></p> <a id=“link”></a>
  30. 30. *O que é id? O atributo id especifica um id único para um elemento HTML: <p id=“paragrafo”></p> <a id=“link”></a> Obs.: O valor deve ser exclusivo dentro do documento HTML
  31. 31. HTML + CSS Atribuindo Identificador <style> h1#titulo{color: #F00F00”; } </style> … <h1 id=“titulo”> Cabeçalho </h1> <h1>Outro Cabeçalho</h1> SaídaIndex.html
  32. 32. HTML + CSS Atribuindo Identificador <style> h1#titulo{color: #F00F00”; } </style> … <h1 id=“titulo”> Cabeçalho </h1> <h1>Outro Cabeçalho</h1> Saída Obs.: Apenas um elemento h1 está com id Titulo Index.html
  33. 33. *O que é o símbolo # Usado para selecionar um elemento com um id especifico, como por exemplo: elemento#nome_id {prop: valor; } h1#titulo{color: #F00; font-size: 12px} Obs.: Um id deve referenciar apenas um elemento, caso precise de um conjunto, use
  34. 34. HTML + CSS Criar grupo de elementos … <p class=“claro”>texto 1</p> <p class=“escuro”>texto 2</p> <p class=“claro”>texto 3</p> <p class=“escuro”>texto 4</p> … SaídaIndex.html
  35. 35. *O que é o atributo class? O atributo class especifica um grupo de um elemento HTML, não existe limite de um conjunto de classes: <a class=“menu”> Link 1</a> <a class=“menu”> Link 2</a> ... <a class=“menu”> Link N</a> Obs.: O valor deve ser exclusivo dentro do documento HTML
  36. 36. HTML + CSS Criar grupo de elementos … <style> p.claro{background: #F6F6F6;} p.escuro{background: #333;} </style> … <p class=“claro”>texto 1</p> <p class=“escuro”>texto SaídaIndex.html
  37. 37. *O que é o símbolo . Usado para selecionar um elemento com uma classe especifica, como por exemplo: /* Fica em negrito quem estiver com a classe negrito e ser um p */ p.negrito{ font-weight: bold}
  38. 38. HTML + CSS Resetar Espaços Padrões … <style> *{ margin: 0; padding: 0} p.claro{background: #F6F6F6;} p.escuro{background: #333;} </style> … SaídaIndex.html
  39. 39. HTML + CSS Criar um arquivo CSS … <head> … <link rel=“stylesheet” type=“text/css” href=“estilo.css”> … </head> … SaídaIndex.html estilo.css
  40. 40. HTML + CSS Inserir Dados no estilo.css *{ margin: 0; padding: 0; } p.Claro { background: #F6F6F6; } p.escuro{ background: #333; } SaídaIndex.html estilo.css
  41. 41. *Arquivos .css São arquivos de estilo. Ele não deve ter a tag style, pois ele já o interpreta. Você deve apenas inserir os elementos e suas propriedades: p { color: #000; font-size: 12px;} h1#titulo{ text-decorator: underline;}
  42. 42. HTML + CSS Acentuação … <head> … <meta charset=“utf-8”> … </head> … SaídaIndex.html estilo.css
  43. 43. Navegadores Cada navegador tem sua configuração, por isso teste seu código em cada um (ou pelo menos nos mais utilizados)
  44. 44. Bônus HTML! Lista de Tags http://goo.gl/HRTcFF Lista de Atributos http://goo.gl/qkzLQG
  45. 45. Bônus CSS! Maujor http://maujor.com CSS desde o início (Maujor) http://goo.gl/EaSroL Técnicas de Acessibilidade (Maujor) http://goo.gl/ZCfmNb
  46. 46. Código Fonte Iago Effting iago.effting@gmail.com https://gist.github.com/iagoEffting/4148 9bb8cbd6b5db9825

×