Introdução a desenvolvimento web

333 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
333
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

×