Html - Aula 3

726 visualizações

Publicada em

CSS, Formulários, classes e identificadores

Publicada em: Tecnologia
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Html - Aula 3

  1. 1. Técnicas de Programação HTML, XTML e CSS Aula 3 Eduardo Mendes
  2. 2. HTML
  3. 3. Criando a nova versão do PHP Drinks n Faça o download dos arquivos
  4. 4. <html> <head> <title>PHP Drinks</title> <head> <body> <h1>Bem-vindo ao Novo PHP Drinks</h1> <img src="drinks.gif"/> <p> Prove uma de nossas <a href="bebidas.html">bebidas</a> e relaxe ao som de <em>Dance Dance</em>. </p> <h2>Localização</h2> <p> Você pode nos encontrar no centro da Vila Web. Para chegar aqui sigas as <a href="instrucoes.html">instrucoes</a>. </p> </body> <html> Edite phpdrinks.html
  5. 5. O que nós fizemos??? n O texto que deve se tornar um “link” foi colocado entre tags <a> n Adicione a informação HTML que informará para onde o link nos levará ao clicar nele
  6. 6. O que o navegador fez?
  7. 7. Organizando PHP Drinks
  8. 8. Dificuldades Técnicas
  9. 9. Criando links para uma subpasta n Identicamos o caminho Criar um valor para o atributo href para caminho identificado bebidas/bebidas.html <a href=“bebidas/bebidas.html”>bebidas</a>
  10. 10. Criando links para uma pasta acima n Identicamos o caminho Criar um valor para o atributo href para caminho identificado ../phpdrinks.html <a href=“../phpdrinks.html”>Voltar</a>
  11. 11. Corrigindo os links para as imagens n Realize o mesmo para as imagens no caminho para a imagem: <img src=“drinks.gif”/> <img src=“imagens/drinks.gif”/> <img src=“../imagens/red.jpg”/>
  12. 12. Elemento de bloco e elemenos inline n Elementos de bloco n Separam o conteúdo n Elementos inline h2 p blockquote p q
  13. 13. Elementos aninhados
  14. 14. Elementos aninhados n <q> está aninhada a <p>, que está aninhado a <body>, que está aninhado a <html>
  15. 15. Um gráfico para o aninhamento html head body title p q
  16. 16. Criando um arquivo “css” n Vamos criar o arquivo phpdrinks.css phpdrinks.css
  17. 17. Criando um arquivo “css” – Folha de Estilo n Copiar as regras CSS para ele h1, h2 { font-family:sans-serif; color: gray; } h1 { border-bottom: 1px solid black; } p { color: maroon; }
  18. 18. Linkando um html para uma folha de estilo <html> <head> <title>PHP Drinks</title> <style type=“text/css”> </style> <head> <body> <h1>Bem-vindo ao Novo PHP Drinks</h1> <img src="drinks.gif"/> <p> . . . </p> </body> <html>
  19. 19. Linkando um html para uma folha de estilo <html> <head> <title>PHP Drinks</title> <link type=”text/css” rel=“stylesheet” href=“phpdrinks.css” /> <head> <body> <h1>Bem-vindo ao Novo PHP Drinks</h1> <img src="drinks.gif"/> <p> . . . </p> </body> <html>
  20. 20. Teste Drive
  21. 21. Oooops! n Diferença de letras
  22. 22. Altere o arquivo css h1, h2 { font-family:sans-serif; color: gray; } h1 { border-bottom: 1px solid black; } p { color: maroon; font-family:sans-serif; }
  23. 23. Oba! n Os elementos inseridos na tag <p> sofrem a alteração também
  24. 24. Os elementos aninhados html body h1 p p h2 p img a em a
  25. 25. Os elementos aninhados html body h1 p p h2 p img a em a
  26. 26. Movendo a definição da fonte para o body body { font-family:sans-serif; } h1, h2 { font-family:sans-serif; color: gray; } h1 { border-bottom: 1px solid black; } p { color: maroon; font-family:sans-serif; }
  27. 27. Teste
  28. 28. Sobrescrevendo a herança n Você decidiu que o <em> deve ser diferente html body h1 p p h2 p img a em a
  29. 29. Sobrescrevendo a herança body { font-family:sans-serif; } h1, h2 { color: gray; } h1 { border-bottom: 1px solid black; } p { color: maroon; } em { font-family: serif; }
  30. 30. Idéias do Cliente n Texto verde n Texto azul n Texto purpura n Texto vermelho
  31. 31. Adicionando uma classe <h2>Chá Verde Gelado</h2> <p class="verde"> <img src="../imagens/green.jpg"> Mistura de vitaminas e sais minerais, este drink combina benefícios do chá verde com a camomila. </p> p.verde { color: green; }
  32. 32. Adicionando uma classe body { font-family:sans-serif; } h1, h2 { color: gray; } h1 { border-bottom: 1px solid black; } p { color: maroon; Teste!!! } p.verde { color: green; }
  33. 33. Podemos fazer mais blockquote.verde, p.verde { color: green; } <blockquote class=“verde”> .verde { color: green; }
  34. 34. Realizar as idéias do Cliente n Texto verde n Texto azul n Texto purpura n Texto vermelho
  35. 35. Técnicas de Programação - Eduardo Mendes FORMULÁRIOS
  36. 36. Interatividade
  37. 37. Interatividade
  38. 38. O Navegador carrega uma página
  39. 39. Você preenche dados... ..e envia as informações
  40. 40. O servidor responde
  41. 41. O que você escreve e o que o browser faz <p> Apenas digite seu nome e clique no botão enviar para ser saudado pelo servidor web :)<br/> Primeiro Nome: <input type="text" name="primeiroNome" value="" /> <br /> Ultimo Nome: <input type="text" name="segundoNome" value="" /> <br /> <input type="submit" value="Enviar" /> </p>
  42. 42. O que você escreve??? <html> <head> <title>Digite seus dados</title> </head> <body> <form action= "http://www.fa7.edu.br/tecnicas/saudacao.php" method=“post"> <p> Apenas digite seu nome e clique no botão enviar para ser saudado pelo servidor web :)<br/> Primeiro Nome: <input type="text" name="primeiroNome" value="" /> <br /> Ultimo Nome: <input type="text" name="segundoNome" value="" /> <br /> <input type="submit" value="Enviar" /> </p> </form> </body> </html>
  43. 43. O que o browser cria
  44. 44. Como o elemento form funciona? <form action= "http://www.fa7.edu.br/tecnicas/saudacao.php" method=“POST"> </form>
  45. 45. Que elementos o formulário pode possuir? n O elemento <input> de texto serve para o usuário preencher uma linha de texto. Atributos opcionais podem configurar o máximo de caracteres e a largura <input type=“text” name=“primeiroNome” />
  46. 46. Que elementos o formulário pode possuir? n O elemento <input> submit cria um botão que permite você submeter o formulário. Quando você clica neste botão o navegador envia o formulário para uma que uma aplicação web processe-o <input type=“submit” value=“Enviar” />
  47. 47. Que elementos o formulário pode possuir? n O elemento <input> radio cria um controle com vários botões, só é possível selecionar um. <input type="radio" name="temperatura" value="quente" /> <input type="radio" name="temperatura" value="frio" />
  48. 48. Que elementos o formulário pode possuir? n O elemento <input> checkbox cria um controle com vários botões, onde vários podem ser selecionados. <input type="checkbox" name="tempero[]" value="sal" /> <input type="checkbox" name="tempero[]" value="pimentao" /> <input type="checkbox" name="tempero[]" value="alho" />
  49. 49. Que elementos o formulário pode possuir? n O elemento <textarea> cria uma área de texto de múltiplas linhas. <textarea name="comentarios" rows="7" cols="50"></textarea>
  50. 50. Que elementos o formulário pode possuir? n O elemento <select> cria um controle de menu na página web, que possibilita escolher entre várias opções. <select name="musicas"> <option>Mind Trick</option> <option>Dont cha</option> <option>Vai Lacraia</option> </select>
  51. 51. Que elementos o formulário pode possuir? n O elemento <option> aparece dentro do elemento <select> para criar as opções do menu. Pode possuir o atributo “value” <select name="musicas"> <option>Mind Trick</option> <option>Dont cha</option> <option>Vai Lacraia</option> </select> <select name="musicas"> <option value=“1”>Mind Trick</option> <option value=“2”>Dont cha</option> <option value=“3”>Vai Lacraia</option> </select>
  52. 52. Todo elemento vem dentro de uma caixa conteúdo borda
  53. 53. Vários tipos de caixas e bordas
  54. 54. Adicionando uma caixa
  55. 55. Adicionando uma caixa n Abra o arquivo phpdrinks.html n Adicione um paragrafo com uma classe e salve o arquivo <p class="garantia"> Garantimos a você um ambiente agradável, gente bonita, funções e procedimentos que farão sua noite ser inesquecível </p>
  56. 56. Adicionando uma caixa n Abra o phpdrinks.css e adicione as regras de css para a classe garantia .garantia { border-color: black; border-width: 1px; border-style: solid; background-color: #a7cece; }
  57. 57. Teste
  58. 58. Adicione o padding .garantia { border-color: black; border-width: 1px; border-style: solid; background-color: #a7cece; padding: 25px; }
  59. 59. Teste
  60. 60. Adicione a margem .garantia { border-color: black; border-width: 1px; border-style: solid; background-color: #a7cece; padding: 25px; margin: 30px; }
  61. 61. Teste
  62. 62. Adicionando uma imagem de fundo .garantia { border-color: black; border-width: 1px; border-style: solid; background-color: #a7cece; padding: 25px; margin: 30px; background-image: url(imagens/estrela.gif); }
  63. 63. Teste
  64. 64. Para que a imagem não se repita .garantia { border-color: black; border-width: 1px; border-style: solid; background-color: #a7cece; padding: 25px; margin: 30px; background-image: url(estrela.gif); background-repeat: no-repeat; background-position: top left; }
  65. 65. Teste
  66. 66. Aumentando o padding à esquerda .garantia { border-color: black; border-width: 1px; border-style: solid; background-color: #a7cece; padding: 25px; padding-left: 80px; margin: 30px; background-image: url(estrela.gif); background-repeat: no-repeat; background-position: top left; }
  67. 67. Teste
  68. 68. Aumentando a margem à direita .garantia { border-color: black; border-width: 1px; border-style: solid; background-color: #a7cece; padding: 25px; padding-left: 80px; margin: 30px; margin-right: 250px; background-image: url(estrela.gif); background-repeat: no-repeat; background-position: top left; }
  69. 69. Teste
  70. 70. Adicionando cor e estilo a borda .garantia { border-color: white; border-width: 1px; border-style: dashed; background-color: #a7cece; padding: 25px; padding-left: 80px; margin: 30px; margin-right: 100px; background-image: url(estrela.gif); background-repeat: no-repeat; background-position: top left; }
  71. 71. Teste
  72. 72. O atributo id n Similar a classe n Um atributo chamado “id” n Deve possuir um nome único n Só um elemento pode possuir aquele id específico <p id=“rodape”>Página desenvolvida pela FA7</p>
  73. 73. Como usar? p.especial { color: red; } .especial { color:red; } Seleciona apenas as tags <p> que tenham a classe “especial” Seleciona todos os elementos que tenham a classe “especial”
  74. 74. Como usar? #rodape { color: red; } p#rodape { color:red; } Seleciona qualquer elemento que possua o id “rodape” Seleciona apenas o elemento <p> que tenha o id “rodape”
  75. 75. Adicionando id ao phpdrinks.php n Altere o atributo classe para o atributo id <p id="garantia"> Garantimos a você um ambiente agradável, gente bonita, funções e procedimentos que farão sua noite ser inesquecível </p>
  76. 76. Adicionando id ao phpdrinks.php n Altere o “.garantia” para um id no phpdrinks.css #garantia { border-color: white; border-width: 1px; border-style: dashed; background-color: #a7cece; padding: 25px; padding-left: 80px; margin: 30px; margin-right: 100px; background-image: url(estrela.gif); background-repeat: no-repeat; background-position: top left; }
  77. 77. Como dividir uma página em seções h1 h2 p h2 p p p img div id=“topo” div id=“gatos” div id=“caes” div id=“rodape”
  78. 78. Como dividir uma página em seções h1 h2 p h2 p p p img header section id=“gatos” section id=“caes” footer
  79. 79. Retornando ao projeto n bebidas.html <h1>Nossos Drinks</h1> <h2>Chá Verde Gelado</h2> <p> <img src="green.jpg"> Mistura de vitaminas e sais minerais, este drink combina benefícios do chá verde com a camomila. </p> <h2>Concentrado Gelado</h2> <p> <img src="lightblue.jpg"> Combinação de suco de limão com contreau. </p> <h2>Azul Bliss</h2> <p> <img src="blue.jpg"> Mistura secreta que deixará você relaxado. </p> <h2>Drink Rejuvenescedor</h2> <p> <img src="red.jpg"> Combinação de acerola e goiaba, drink rico em vitamina C. </p> n bebidas.html <h2>Nossos Drinks</h2> <h3>Chá Verde Gelado</h3> <p> <img src="green.jpg"> Mistura de vitaminas e sais minerais, este drink combina benefícios do chá verde com a camomila. </p> <h3>Concentrado Gelado</h3> <p> <img src="lightblue.jpg"> Combinação de suco de limão com contreau. </p> <h3>Azul Bliss</h3> <p> <img src="blue.jpg"> Mistura secreta que deixará você relaxado. </p> <h3>Drink Rejuvenescedor</h3> <p> <img src="red.jpg"> Combinação de acerola e goiaba, drink rico em vitamina C. </p>
  80. 80. Retornando ao projeto <div id=“drinks”> <h2>Nossos Drinks</h2> <h3>Chá Verde Gelado</h3> <p> <img src="green.jpg"> Mistura de vitaminas e sais minerais, este drink combina benefícios do chá verde com a camomila. </p> . . . <h3>Drink Rejuvenescedor</h3> <p> <img src="red.jpg"> Combinação de acerola e goiaba, drink rico em vitamina C. </p> </div>
  81. 81. Adicionando ao phpdrinks.css #drinks { border-width: thin; border-style: solid; border-color: #007e7e; }
  82. 82. Adicionando ao phpdrinks.css #drinks { border-width: thin; border-style: solid; border-color: #007e7e; width: 200px; }
  83. 83. Adicionando ao phpdrinks.css #drinks { border-width: thin; border-style: solid; border-color: #007e7e; width: 200px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; margin-left: 20px; text-align: center; background-image: url(images/cocktail.gif); background-repeat: repeat-x; }
  84. 84. Alterando as cores dos cabeçalhos #drinks h2 { color: black; } #drinks h3 { color: #d12c47; }
  85. 85. Padding em uma linha padding-top: 0px; padding-right: 20px; padding-bottom: 30px; padding-left: 10px padding: 0px 20px 30px 10px;
  86. 86. Margem em uma linha margin-top: 0px; margin-right: 20px; margin-bottom: 30px; margin-left: 10px margin: 0px 20px 30px 10px;
  87. 87. 1 valor para todos os paddings padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px padding: 20px;
  88. 88. Margem horizontal e vertical margin-top: 0px; margin-right: 20px; margin-bottom: 0px; margin-left: 20px margin: 0px 20px;
  89. 89. Borda em uma linha border-width: thin; border-style: solid; border-color: #007e7e; border: thin solid #007e7e;
  90. 90. Fundo em uma linha background-color: white; background-image: url(images/cocktail.gif); background-repeat: repeat-x; background: white url(images/cocktail.gif) repeat-x;

×