HTML + CSS
10 gostaram3,073 visualizações
O documento é uma introdução ao HTML e CSS, cobrindo sua estrutura, sintaxe e elementos comuns como parágrafos, listas, imagens e links. Ele também aborda a utilização de CSS para estilização, incluindo seletores, propriedades e exemplos práticos. Além disso, apresenta exemplos de código para ilustrar a aplicação dessas tecnologias na web.
HTML + CSS
- 1. HTML + CSS Uma introdução Dep. Eng. Informá/ca -‐ FCTUC Universidade de Verão Julho de 2010 Pedro Gaspar TwiGer: @pedrogaspar Web: hGp://pedrogaspar.com/
- 2. O QUE SÃO? HTML CSS Conteúdo Apresentação
- 3. HTML CSS Conteúdo Propriedades visuais das estruturas definidas Estrutura em HTML Título Título Notícia 1 Menu Menu Notícia 2 Notícia 1 Notícia 3 Notícia 2 3
- 4. COMO FUNCIONA? Pedidos e Respostas
- 5. COMO FUNCIONA? Pedidos e Respostas ml .ht in dex T/ GE
- 6. COMO FUNCIONA? Pedidos e Respostas ml .ht in dex T/ GE
- 7. COMO FUNCIONA? Pedidos e Respostas ml .ht in dex T/ GE
- 8. HTML
- 9. HTML - SINTAXE <p>...</p> <img src=”...” />
- 10. HTML - TAGS COMUNS Parágrafo <p>...</p> Cabeçalhos <h1>...</h1>, <h2>...</h2>, etc. Lista <ul> <li>...</li> </ul> Imagem <img src=”...“ /> Link <a href=”...“>...</a> Bloco <div>...</div>
- 11. HTML - PARÁGRAFO <p> Texto... Fim. </p>
- 12. HTML - PARÁGRAFO <p> Texto... Fim. </p> <br />
- 13. HTML - TEXTO <p> <i>Itálico</i> <br /> <small>Pequeno</small> <br /> <b>Negrito</b> <br /> <i><b>Composto</b></i> </p>
- 14. HTML - TEXTO <pre> <i>Itálico</i> <small>Pequeno</small> <b>Negrito</b> <i><b>Composto</b></i> Um dois três. </pre>
- 15. HTML - CABEÇALHOS <h1>O meu Livro</h1> <h2>Capítulo 1</h2> <p>...</p> <h2>Capítulo 2</h2> <h3>Capítulo 2.1</h3> <p>...</p> <h3>Capítulo 2.2</h3> <p>...</p> ...
- 16. HTML - LISTAS <h3>A Fazer</h3> <ul> <li>Limpar a casa</li> <li>Lavar o carro</li> <li>Estudar</li> <li>Ir de Férias!</li> <li>etc...</li> </ul>
- 17. HTML - LISTAS <h3>A Fazer</h3> <ol> <li>Limpar a casa</li> <li>Lavar o carro</li> <li>Estudar</li> <li>Ir de Férias!</li> <li>etc...</li> </ol>
- 18. HTML - IMAGENS <img src=”pessoa.png“ /> O atributo src indica o caminho para a imagem a mostrar. Pode mesmo ser um URL.
- 19. HTML - LINKS <a href=”hSp://google.pt“> Link para o Google </a> O atributo href indica o URL para onde o link aponta. Pode ser um caminho local.
- 20. HTML - BLOCOS <div> <p>Texto...</p> </div> O div pode conter qualquer elemento dentro de sí. Principalmente usado através do CSS.
- 21. HTML - TABELAS <table border=”1”> <th>Número</th> <th>Nome</th> <tr> <td>1</td> <td>Luís</td> </tr> th - Table Header <tr> <td>2</td> tr - Table Row <td>Armando</td> </tr> td - Table Data </table>
- 22. HTML - FORMS <form> ... </form> <input type=”text” /> <input type=”password” /> <input type=”radio” /> <input type=”checkbox” /> <input type=”submit” /> <textarea> </textarea> <label>Nome:</label>
- 23. HTML - ESTRUTURA Início do documento <html> Elemento head <head> ... Elemento body </head> <body> ... Tag externa que contém </body> todo o HTML </html>
- 24. HTML - ESTRUTURA Início do documento <html> Elemento head <head> ... Elemento body </head> Contém tags que dão <body> valor semântico à ... página e que fazem </body> referência a ficheiros </html> com código CSS
- 25. HTML - ESTRUTURA Início do documento <html> Elemento head <head> ... Elemento body </head> <body> ... Tags de HTML normais </body> </html>
- 26. CSS
- 27. CSS - UTILIZAÇÃO Código num ficheiro externo Código no próprio ficheiro HTML Código no atributo style de cada tag
- 28. CSS - UTILIZAÇÃO Na tag head ficheiro HTML <head> <link rel=”stylesheet” type=”text/css” href=”style.css”/> </head>
- 29. CSS - SINTAXE h1 { color: gray; font-‐size: 12px; } Selector
- 30. CSS - SINTAXE h1 { color: gray; font-‐size: 12px; } Propriedade
- 31. CSS - SINTAXE h1 { color: gray; font-‐size: 12px; } Valor
- 32. CSS - SINTAXE h1 { color: gray; font-‐size: 12px; } p { font-‐family: Arial; }
- 33. CSS - SINTAXE h1 { color: gray; font-‐size: 12px; } p { font-‐family: Arial; }
- 34. CSS - SELECTORS <div>...</div> HTML <div>...</div> <p>...</p> CSS div { ... }
- 35. CSS - SELECTORS <div class=”content”>...</div> HTML <div>...</div> <p class=”content”>...</p> CSS .content { ... }
- 36. CSS - SELECTORS <div class=”content”>...</div> HTML <div>...</div> <p class=”content”>...</p> CSS div.content { ... }
- 37. CSS - SELECTORS <div id=”content”>...</div> HTML <div>...</div> <p class=”content”>...</p> CSS #content { ... }
- 38. EXEMPLO
- 39. EX. - BACKGROUND body { background-‐color: #005e1a; background-‐image: url(‘bg.jpg’); CSS background-‐repeat: repeat-‐x; font-‐family: Arial; }
- 41. EX. - CONTAINER <div id=”site-‐ftle”> <h1>Um Blog</h1> </div> HTML <div id=”container”> ... </div>
- 42. EX. - CONTAINER #site-‐/tle { text-‐align: center; } #site-‐/tle h1 { CSS color: white; font-‐family: Arial; }
- 44. EX. - CONTAINER #container { width: 700px; background-‐color: white; CSS margin: auto; margin-‐boSom: 20px; }
- 46. EX. - MENU <div id=”menu”> <ul> <li><a href=”sobre.html”>Sobre</a></li> HTML <li><a href=”fotos.html”>Fotos</a></li> <li><a href=”hSp://google.com”>Google</a></li> </ul> </div> ... <div class=”clear”></div>
- 47. EX. - MENU #menu { width: 150px; float: lek; background-‐color: #DDD; border-‐boSom: 1px solid gray; CSS border-‐right: 1px solid gray; padding: 1px; } #menu li { list-‐style: circle; } .clear { clear: both; }
- 49. EX. - MENU a, a:visited, a:link { text-‐decorafon: none; color: #333; } CSS a:hover { color: #777; font-‐weight: bold; }
- 51. EX. - POSTS <div class=”post”> HTML <p>Texto...</p> ... </div>
- 52. EX. - POSTS <div class=”post”> HTML <p>Texto...</p> ... </div> .post { margin: 20px 0px 5px 24px; float: right; .post p { CSS background-‐color: #EEE; margin: 0px; color: #555; } width: 480px; padding: 10px; }
- 54. EXPERIMENTEM hGp://nei.dei.uc.pt/workshop-‐html-‐css/ hSp://w3schools.com/ hSp://colourlovers.com/ hSp://www.famfamfam.com/lab/icons/ Google: “background gradient”