O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Html Exercicio

2.425 visualizações

Publicada em

  • Seja a primeira pessoa a gostar disto

Html Exercicio

  1. 1. Módulo 1 HTML, CSS & XHTML Professor: Eduardo Mendes
  2. 2. Como dividir uma página em seções h1 h2 h2 p p p p img div id=“gatos” div id=“caes” div id=“topo” div id=“rodape”
  3. 3. Retornando ao phpdrinks •  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> •  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>
  4. 4. Retornando ao phpdrinks <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>
  5. 5. Adicionando ao phpdrinks.css #drinks { border-width: thin; border-style: solid; border-color: #007e7e; }
  6. 6. Adicionando ao phpdrinks.css #drinks { border-width: thin; border-style: solid; border-color: #007e7e; width: 200px; }
  7. 7. 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; }
  8. 8. Alterando as cores dos cabeçalhos #drinks h2 { color: black; } #drinks h3 { color: #d12c47; }
  9. 9. Padding em uma linha padding-top: 0px; padding-right: 20px; padding-bottom: 30px; padding-left: 10px padding: 0px 20px 30px 10px;
  10. 10. Margem em uma linha margin-top: 0px; margin-right: 20px; margin-bottom: 30px; margin-left: 10px margin: 0px 20px 30px 10px;
  11. 11. 1 valor para todos os paddings padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px padding: 20px;
  12. 12. Margem horizontal e vertical margin-top: 0px; margin-right: 20px; margin-bottom: 0px; margin-left: 20px margin: 0px 20px;
  13. 13. Borda em uma linha border-width: thin; border-style: solid; border-color: #007e7e; border: thin solid #007e7e;
  14. 14. 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;
  15. 15. Desafio!!!
  16. 16. Preparando o território •  Faça o download do arquivo –  www.fa7.edu.br/tecnicas/modulo1/drinks5.zip
  17. 17. Adicione o estilo correto para obter •  Verifique o arquivo css e adicione o estilo correto para que a página possua esta aparência <div> <h2>Drinks Especiais desta Semana</h2> <p> <img src="imagens/yellow.gif" /> </p> <h3>Lemon Breeze</h3> <p> Um drinks mais que saudável, este drink combina ervas botânicas, minerais, e vitaminas com uma suave mistura de limão que manterá sua saúde imune dia e noite. </p> <div id=“drinks”>
  18. 18. Adicione o estilo correto para obter •  Adicione novamente estilo à camada garantia <p> Garantimos a você um ambiente agradável, gente bonita, funções e procedimentos que farão sua noite ser inesquecível. Nossos Djs tocarão as melhores músicas da balada durante a noite toda. Os maiores sucessos da pista regados pelos drinks mais exóticosno mundo da programação web. </p> <p id=“drinks”>
  19. 19. Incrementando... •  Abra o arquivo css •  Qual a definição a alterar? float: right;
  20. 20. Entendendo o float <html> <head>...</head> <body> <h1>...</h1> <h2>...</h2> <p>...</p> <h2>...</h2> <p>...</p> <p>...</p> <p>...</p> </body> </html> h1 h2 p h2 p p p
  21. 21. E sobre os elementos inline??? <p> Venha se divertir conosco <em>a qualquer hora</em> com estes e todos os nossos outros maravilhosos drinks.<a href="bebidas/bebidas.html">drinks</a>. </p> p texto em texto a p texto em texto atexto p texto em texto a texto texto
  22. 22. Tudo junto h1 h2 p h2 p p p texto texto texto texto em texto texto texto texto texto img img img img h1 h2 p h2 p p p texto texto texto em texto texto img img img img texto texto texto texto texto texto texto
  23. 23. Cd  Itálico, Artista  Negrito
  24. 24. <span> •  Elementos que formatam elementos inline •  Vejamos: –  Vamos separar os cd e os artistas com tags span –  Adicionemos às tags span classes “cd” e classes “artista” –  Criar no phpdrinks.css regras para “cd” e “artista”
  25. 25. Separando Cds de Artistas <ul> <li>Stickwitu, Pussycat Dolls</li> <li>Frozen, Madonna</li> <li>Earth 7, L.T.J. Bukem</li> <li>Le Roi Est Mort, Vive Le Roi!, Engima</li> <li>Music for Airports, Brian Eno</li> </ul>
  26. 26. Adicionemos span <ul> <li> <span class=“cd”>Stickwitu</span>, <span class=“artista”>Pussycat Dolls</span> </li> <li>Frozen, Madonna</li> <li>Earth 7, L.T.J. Bukem</li> <li>Le Roi Est Mort, Vive Le Roi!, Engima</li> <li>Music for Airports, Brian Eno</li> </ul>
  27. 27. Crie os estilos .cd { font-style: italic; } .artista { font-weight: bold; }
  28. 28. Links de mútiplas personalidades •  Um link pode ter três estados –  Não-visitado –  Visitado –  Hover –  Teste: a:link { color:green; } a:hover{ color: yellow; }
  29. 29. Melhorando a:link { color: #007e7e; text-decoration: none; } a:visited { color: #333333; }
  30. 30. Links especiais para os drinks #drinks a:link { color: #007e7e; } #drinks a:visited { color: #333333; } #drinks a:hover { background: #f88396; color: #0d5353; }
  31. 31. Último passo •  Crie um id e forneça a formatação adequada
  32. 32. Resposta •  Css #rodape { font-size: 70%; text-align: center; line-height: normal; margin-top: 30px; } •  Html <div id="rodape"> <p> &copy; 2006, PHP DRINKS<br /> Todos os direitos reservados. </p> </div>
  33. 33. A StarBuzz Coffe •  Topo - header •  Principal – main •  Coluna lateral –  sidebar •  Rodapé –  footer
  34. 34. <html> <head> </head> <body> <div id="header"> </div> <div id="main"> ... </div> <div id="sidebar"> ... </div> <div id="footer"> ... </div> </body> </html>
  35. 35. starbuzz.css body { background-color: #b5a789; font-family: Georgia, "Times New Roman", Times, serif; font-size: small; margin: 0px; }
  36. 36. starbuzz ids #header { background-color: #675c47; margin: 10px; height: 108px; } #main { background: #efe5d0 url(images/background.gif) top left; font-size: 105%; padding: 15px; margin: 0px 10px 10px 10px; } #sidebar { background: #efe5d0 url(images/background.gif) bottom right; font-size: 105%; padding: 15px; margin: 0px 10px 10px 10px; } #footer { background-color: #675c47; color: #efe5d0; text-align: center; padding: 15px; margin: 10px; font-size: 90%; }
  37. 37. starbuzz.css h1 { font-size: 120%; color: #954b4b; } h2 { font-size: 110%; } .slogan { color: #954b4b; } .beanheading { text-align: center; line-height: 1.8em; } a:link { color: #b76666; text-decoration: none; border-bottom: thin dotted #b76666; } a:visited { color: #675c47; text-decoration: none; border-bottom: thin dotted #675c47; }
  38. 38. Alterando
  39. 39. Primeiro Passo – Alterar as posições
  40. 40. Depois •  Adicionar uma largura e um float
  41. 41. Melhorando
  42. 42. Verificando a página sem o CSS
  43. 43. Organizando •  Coloque a div “sidebar” para baixo da div “main”
  44. 44. Alterando o CSS #sidebar { background: #efe5d0 url(images/ background.gif) bottom right; font-size: 105%; padding: 15px; margin: 0px 10px 10px 10px; width: 280px; float: right; }
  45. 45. Alterando o CSS #sidebar { background: #efe5d0 url(images/ background.gif) bottom right; font-size: 105%; padding: 15px; margin: 0px 10px 10px 470px; width: 280px; float: right; }
  46. 46. Alterando o CSS #sidebar { background: #efe5d0 url(images/ background.gif) bottom right; font-size: 105%; padding: 15px; margin: 0px 10px 10px 470px; }
  47. 47. Teste
  48. 48. Alterando o CSS •  Alterar a definição do main #main { background: #efe5d0 url(images/background.gif) top left; font-size: 105%; padding: 15px; margin: 0px 330px 10px 10px; width: 420px; float: left; } 10px
  49. 49. Teste
  50. 50. Corrigindo o footer #footer { background-color: #675c47; color: #efe5d0; text-align: center; padding: 15px; margin: 10px; font-size: 90%; clear: left; }
  51. 51. Teste
  52. 52. Envolvendo o conteúdo com a tag div #content { width: 800px; padding-top: 5px; padding-bottom: 5px; background-color: #675c47; margin-left: auto; margin-right: auto; }
  53. 53. Tente
  54. 54. Fixando Camadas #sidebar { position: absolute; top: 100px; right: 200px; width: 280px; background: #efe5d0 url(images/background.gif) bottom right; font-size: 105%; padding: 15px; margin: 0px 10px 10px 470px; }
  55. 55. Teste
  56. 56. Adicione uma camada <div id="qualquercoisa"> <p> Qualquer coisa </p> </div>
  57. 57. Adiciona um seletor CSS para a camada #qualquercoisa { position: absolute; top: 150px; left: 300px; width: 400px; background: #F5F5F5; }
  58. 58. Teste
  59. 59. Alterando Starbuzz •  Retire a div “content”
  60. 60. #main { background: #efe5d0 url(images/background.gif) top left; font-size: 105%; padding: 15px; margin: 0px 330px 10px 10px; } #sidebar { position: absolute; top: 128px; right: 0px; width: 280px; background: efe5d0 url(images/background.gif) bottom right; font-size: 105%; padding: 15px; margin: 0px 10px 10px 10px; } Alterando Starbuzz
  61. 61. Teste
  62. 62. Alterando o Starbuzz #footer { background-color: #675c47; color: #efe5d0; text-align: center; padding: 15px; margin: 10px 330px 10px 10px; font-size: 90%; }
  63. 63. Teste
  64. 64. Premiação para o design!!!!! •  Vamos premiar este design
  65. 65. Adicionemos uma camada parao prêmio <div id="award"> <img src="images/award.gif" /> </div>
  66. 66. Adicionando um seletor css para o prêmio #award { position: absolute; top: 30px; left: 365px; }
  67. 67. <div id=“main”> ... </div> <div id=“award”> ... </div> <div id=“sidebar”> ... </div> Mudando o prêmio de lugar
  68. 68. Solução  z-index #award { position: absolute; top: 30px; left: 365px; z-index: 99; }
  69. 69. Algo mais sobre posições absolutas <div id="sidebar"> <div id=“tv”> <img src=“tv.gif” /> </div> <p class="beanheading"> … </p> … </div> #tv { position: absolute; top: 100px; left: 100px; width: 100px; } div id=“header” div id=“main” div id=“footer” div id=“sidebar” div id=“tv” 100px 100px
  70. 70. Um outro tipo de posicionamento: FIXED •  Promoção para um café “no preço”
  71. 71. Um outro tipo de posicionamento: FIXED <div id=“cupom”> <a href=“freecoffe.html”> <img src=“images/ticket.gif” /> </a> </div> #cupom { position: fixed; top: 300px; left: 100px; }
  72. 72. Teste
  73. 73. Corrigindo o problema com as bordas #cupom img { border: none; } #cupom a:link { border: none; } #cupom a:visited { border: none; }
  74. 74. Quase OK!!!
  75. 75. Usando um valor negativo para a esquerda #cupom { position: fixed; top: 300px; left: -90px; }
  76. 76. Uuuuuuuufa!
  77. 77. E sobre posicionamento relativo???
  78. 78. Relativo à posição que deveria ficar .beanheading img{ position: relative; left: 100px; }
  79. 79. Testando o absoluto .beanheading img{ position: relative; left: 100px; }
  80. 80. Tabelas Cidade Data Temp População Natal 15/08 28° 1.000.000 Salvador 17/08 30° 1.200.000 Rio 19/08 40° 12.000.000 Sampa 21/08 28° 20.000.000 colunas linhas cabeçalho
  81. 81. Como criar tabelas usando HTML? <html> <head> <style type="text/css"> td, th { border: 1px solid black; } </style> <title>Tabelas</title> </head> <body> <table> <tr> <th>Cidade</th> <th>Data</th> <th>Temp</th> <th>População</th> </tr> <tr> <td>Natal</td> <td>15/08</td> <td>28</td> <td>1.000.000</td> </tr> <tr> <td>Salvador</td> <td>17/08</td> <td>30</td> <td>1.200.000</td> </tr> </table> </body> </html>
  82. 82. Teste <table> <tr>.... .....</tr><tr>.... .....</tr> <tr>.... .....</tr> </table> <th>Cidade</th> <td>28</td>
  83. 83. Adicionando um resumo e um título <table summary=“Tabelas de cidades conhecidas”> <caption> As cidades que conheci no Brasil </caption> <tr> <th>Cidade</th>
  84. 84. Voltando a viajar!
  85. 85. Adicionando estilo a tabela table { margin-left: 20px; margin-right: 20px; border: thin solid black; caption-side: bottom; } td, th { border: thin dotted gray; padding: 5px; } caption { font-style: italic; padding-top: 8px; }
  86. 86. Border-collapse table { margin-left: 20px; margin-right: 20px; border: thin solid black; caption-side: bottom; border-collapse: collapse; }
  87. 87. Teste
  88. 88. Cores na tabela? th { background-color: #cc6600; }
  89. 89. E como faríamos isso???
  90. 90. Css nas células corretas .cellcolor { background-color: #fcba7a; }
  91. 91. Uma coluna para 2 linhas <tr> <td rowspan=“2”>Natal</td> <td>15/08</td> <td>28</td> <td>1.000.000</td> </tr> <tr> <td>15/08</td> <td>28</td> <td>1.000.000</td> </tr>
  92. 92. Interatividade
  93. 93. Interatividade
  94. 94. O Navegador carrega uma página
  95. 95. Você preenche dados... ..e envia as informações
  96. 96. O servidor responde
  97. 97. 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> </form>
  98. 98. O que você escreve??? <html> <head> <title>Digite seus dados</title> </head> <body> <form action= "http://www.fa7.edu.br/phpparainiciantes/modulo1/ 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>
  99. 99. O que o browser cria
  100. 100. Como o elemento form funciona? <form action= "http://www.fa7.edu.br/phpparainiciantes/modulo1/ saudacao.php" method=“POST"> </form>
  101. 101. Que elementos o formulário pode possuir? •  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” />
  102. 102. Que elementos o formulário pode possuir? •  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” />
  103. 103. Que elementos o formulário pode possuir? •  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" />
  104. 104. Que elementos o formulário pode possuir? •  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" />
  105. 105. Que elementos o formulário pode possuir? •  O elemento <textarea> cria uma área de texto de múltiplas linhas. <textarea name="comentarios" rows="7" cols="50"></textarea>
  106. 106. Que elementos o formulário pode possuir? •  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>
  107. 107. Que elementos o formulário pode possuir? •  O elemento <option> aparece dentro do elemento <select> para criar as opções do menu. <select name="musicas"> <option>Mind Trick</option> <option>Dont cha</option> <option>Vai Lacraia</option> </select>

×