Your SlideShare is downloading. ×
0
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Html Exercicio
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html Exercicio

1,154

Published on

1 Comment
0 Likes
Statistics
Notes
  • Professor, o link http://www.fa7.edu.br/tecnicas/modulo1/drinks5.zip não está funcionando.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total Views
1,154
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
55
Comments
1
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Módulo 1 HTML, CSS & XHTML Professor: Eduardo Mendes
  • 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. 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. 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. Adicionando ao phpdrinks.css #drinks { border-width: thin; border-style: solid; border-color: #007e7e; }
  • 6. Adicionando ao phpdrinks.css #drinks { border-width: thin; border-style: solid; border-color: #007e7e; width: 200px; }
  • 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. Alterando as cores dos cabeçalhos #drinks h2 { color: black; } #drinks h3 { color: #d12c47; }
  • 9. Padding em uma linha padding-top: 0px; padding-right: 20px; padding-bottom: 30px; padding-left: 10px padding: 0px 20px 30px 10px;
  • 10. Margem em uma linha margin-top: 0px; margin-right: 20px; margin-bottom: 30px; margin-left: 10px margin: 0px 20px 30px 10px;
  • 11. 1 valor para todos os paddings padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px padding: 20px;
  • 12. Margem horizontal e vertical margin-top: 0px; margin-right: 20px; margin-bottom: 0px; margin-left: 20px margin: 0px 20px;
  • 13. Borda em uma linha border-width: thin; border-style: solid; border-color: #007e7e; border: thin solid #007e7e;
  • 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. Desafio!!!
  • 16. Preparando o território •  Faça o download do arquivo –  www.fa7.edu.br/tecnicas/modulo1/drinks5.zip
  • 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. 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. Incrementando... •  Abra o arquivo css •  Qual a definição a alterar? float: right;
  • 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. 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. 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. Cd  Itálico, Artista  Negrito
  • 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. 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. 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. Crie os estilos .cd { font-style: italic; } .artista { font-weight: bold; }
  • 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. Melhorando a:link { color: #007e7e; text-decoration: none; } a:visited { color: #333333; }
  • 30. Links especiais para os drinks #drinks a:link { color: #007e7e; } #drinks a:visited { color: #333333; } #drinks a:hover { background: #f88396; color: #0d5353; }
  • 31. Último passo •  Crie um id e forneça a formatação adequada
  • 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. A StarBuzz Coffe •  Topo - header •  Principal – main •  Coluna lateral –  sidebar •  Rodapé –  footer
  • 34. <html> <head> </head> <body> <div id="header"> </div> <div id="main"> ... </div> <div id="sidebar"> ... </div> <div id="footer"> ... </div> </body> </html>
  • 35. starbuzz.css body { background-color: #b5a789; font-family: Georgia, "Times New Roman", Times, serif; font-size: small; margin: 0px; }
  • 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. 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. Alterando
  • 39. Primeiro Passo – Alterar as posições
  • 40. Depois •  Adicionar uma largura e um float
  • 41. Melhorando
  • 42. Verificando a página sem o CSS
  • 43. Organizando •  Coloque a div “sidebar” para baixo da div “main”
  • 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. 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. Alterando o CSS #sidebar { background: #efe5d0 url(images/ background.gif) bottom right; font-size: 105%; padding: 15px; margin: 0px 10px 10px 470px; }
  • 47. Teste
  • 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. Teste
  • 50. Corrigindo o footer #footer { background-color: #675c47; color: #efe5d0; text-align: center; padding: 15px; margin: 10px; font-size: 90%; clear: left; }
  • 51. Teste
  • 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. Tente
  • 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. Teste
  • 56. Adicione uma camada <div id="qualquercoisa"> <p> Qualquer coisa </p> </div>
  • 57. Adiciona um seletor CSS para a camada #qualquercoisa { position: absolute; top: 150px; left: 300px; width: 400px; background: #F5F5F5; }
  • 58. Teste
  • 59. Alterando Starbuzz •  Retire a div “content”
  • 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. Teste
  • 62. Alterando o Starbuzz #footer { background-color: #675c47; color: #efe5d0; text-align: center; padding: 15px; margin: 10px 330px 10px 10px; font-size: 90%; }
  • 63. Teste
  • 64. Premiação para o design!!!!! •  Vamos premiar este design
  • 65. Adicionemos uma camada parao prêmio <div id="award"> <img src="images/award.gif" /> </div>
  • 66. Adicionando um seletor css para o prêmio #award { position: absolute; top: 30px; left: 365px; }
  • 67. <div id=“main”> ... </div> <div id=“award”> ... </div> <div id=“sidebar”> ... </div> Mudando o prêmio de lugar
  • 68. Solução  z-index #award { position: absolute; top: 30px; left: 365px; z-index: 99; }
  • 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. Um outro tipo de posicionamento: FIXED •  Promoção para um café “no preço”
  • 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. Teste
  • 73. Corrigindo o problema com as bordas #cupom img { border: none; } #cupom a:link { border: none; } #cupom a:visited { border: none; }
  • 74. Quase OK!!!
  • 75. Usando um valor negativo para a esquerda #cupom { position: fixed; top: 300px; left: -90px; }
  • 76. Uuuuuuuufa!
  • 77. E sobre posicionamento relativo???
  • 78. Relativo à posição que deveria ficar .beanheading img{ position: relative; left: 100px; }
  • 79. Testando o absoluto .beanheading img{ position: relative; left: 100px; }
  • 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. 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. Teste <table> <tr>.... .....</tr><tr>.... .....</tr> <tr>.... .....</tr> </table> <th>Cidade</th> <td>28</td>
  • 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. Voltando a viajar!
  • 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. Border-collapse table { margin-left: 20px; margin-right: 20px; border: thin solid black; caption-side: bottom; border-collapse: collapse; }
  • 87. Teste
  • 88. Cores na tabela? th { background-color: #cc6600; }
  • 89. E como faríamos isso???
  • 90. Css nas células corretas .cellcolor { background-color: #fcba7a; }
  • 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. Interatividade
  • 93. Interatividade
  • 94. O Navegador carrega uma página
  • 95. Você preenche dados... ..e envia as informações
  • 96. O servidor responde
  • 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. 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. O que o browser cria
  • 100. Como o elemento form funciona? <form action= "http://www.fa7.edu.br/phpparainiciantes/modulo1/ saudacao.php" method=“POST"> </form>
  • 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. 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. 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. 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. 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. 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. 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>

×