Introdução ao HTML e CSS
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Introdução ao HTML e CSS

  • 3,422 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,422
On Slideshare
3,272
From Embeds
150
Number of Embeds
3

Actions

Shares
Downloads
93
Comments
0
Likes
4

Embeds 150

https://mj89sp3sau2k7lj1eg3k40hkeppguj6j-a-sites-opensocial.googleusercontent.com 148
https://tal2tot4uenli8d3lphbjvrrl237cfes-a-sites-opensocial.googleusercontent.com 1
http://plus.url.google.com 1

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. Introdução ao HTML e CSS Prof. Sérgio Souza Costa Obs: Alguns slides foram elaborados pela professora Vanesssa
  • 2. O que o servidor faz ....
  • 3. O que o cliente (navegador web) faz ....
  • 4. O HTML, nada mais que texto
  • 5. O navegador renderiza o HTML
  • 6. HTML Timeline vs. 1990 1995 1996 1997 1998 1999 2000 2001 XHTML 2.0 Begins… HTML 1.0 RFC 1866 2002 Logo oficial do Html5 201 0
  • 7. HTML Timeline vs. 1990 1995 1996 1997 1998 1999 2000 2001 XHTML 2.0 Begins… HTML 1.0 RFC 1866 2002 Logo oficial do Html5 201 0
  • 8. HTML - Template <html> <head> <title></title> </head> <body> </body> </html>
  • 9. HTML 4.01 - Template <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http: //www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> </head> <body> <p>Ola mundo</p> </body> </html>
  • 10. HTML 5 - Template <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> </body> </html>
  • 11. XHTML - Template <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html lang=”EN” dir=”ltr” xmlns=”http://www.w3. org/1999/xhtml”> <head> <meta http-equiv=”content-type” content=”text/xml; charset=utf-8” /> <title></title> </head> <body> </body> </html>
  • 12. HTML vs XHTML HTML: dont worry !! escreva algo que o navegador fará o seu melhor para renderizar. XHTML: se não é para fazer direito, melhor nem começar. Como vais querer que o JavaScript, CSS, AJAX funcione ? ● rigidez do XML
  • 13. HTML ● HyperText Markup Language (HTML) ou Linguagem de Marcação de Hipertexto é a linguagem usada pelos navegadores para mostrar as páginas web ao usuário. ● Ela permite combinar textos, imagens e áudios, além introduzir referências a outras páginas por meio dos links hipertextos.
  • 14. Tags, elementos e atributos ● A sintaxe da HTML baseia-se em um elemento chamado tag (etiqueta). ● Tags são rótulos usados para informar ao navegador como o conteúdo deve ser apresentado.
  • 15. Tags, elementos e atributos ● A tag tem a seguinte forma geral: <tag> ..... </tag> ● Tudo que estiver contido entre uma tag de abertura <> e uma tag de fechamento </> será processado segundo o comando contido na tag. ● Algumas tags, chamadas tags de comandos isolados, não necessitam de um conteúdo para serem processados. <BR> ● Tag para pular linha
  • 16. E quanto aos atributos ?
  • 17. E quanto aos atributos ? Atributos modificam as tags, dizendo algo sobre os elementos < html > < head > < title > Popular Websites: Google < /title > < /head > < body > < h1 > About Google < /h1 > < p > Google is best known for its search engine, although Google now offers a number of other services. < /p > < p > Google’s mission is to organize the world’s information and make it universally accessible and useful. < /p > < p > Its founders Larry Page and Sergey Brin started Google at Stanford University. < /p > < p > < a href=”http://www.Google.com/” > Click here to visit Google’s Web site. < /a > < /p > < /body > < /html >
  • 18. Tags, elementos e atributos Com a evolução da web, novos padrões, crescimento na complexidade dos grandes sistemas ... Algumas tags perderam o uso para outros padrões. Então temos : ● Bad tags, conheça para não usar :) ● Good tags
  • 19. Bad Tags Tag Explanation b Presentational. Use strong instead. basefont Deprecated. big Presentational. Use CSS instead. center Deprecated. dir Deprecated. font Deprecated. hr Presentational. Use CSS instead. i Presentational. Use em instead. u Deprecated.
  • 20. Bad Tags Tag Explanation isindex Deprecated. menu Deprecated. s Deprecated. small Presentational. Use CSS instead. strike Deprecated. Use del instead. tt Presentational. Use CSS instead.
  • 21. Good tags: tags que tem semântica relacionada <p> , <body>, <strong>, <em>, <a>, <ul>, <li> ...
  • 22. O que pode ter no HTML ?
  • 23. O que pode ter no HTML ? Elementos estruturantes
  • 24. Elementos estruturantes
  • 25. HTML – Seção HEAD ● O elemento HEAD (Cabeçalho) define uma seção que contém informações sobre o documento HTML. ● A seção pode incluir scripts, instruções para o browser encontrar os estilos, metadados, entre outros. ● As tags que podem estar na seção HEAD são: ● <title> ● <base> ● <link> ● <meta> ● <script> ● <style>
  • 26. HTML – Seção HEAD Elemento TITLE ● Define o título do documento ● O elemento título é obrigatório em todos os documentos HTML/XHTML. ● Esse título é referenciado em buscas pela rede, dando uma identidade ao documento. ● Ao adicionar uma página aos seus Favoritos (Bookmarks), o título da página se torna a âncora de atalho para ela.
  • 27. HTML – Seção HEAD Elemento TITLE <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Home Page do Sérgio Costa</title> </head> <body> </body> </html>
  • 28. HTML – Seção HEAD Elemento BASE ● Define uma url padrão para os links do documento. ● <base href =http://meusite.com.br /> ● Define um target padrão para os links do documento. ● <base target =“_blank” />
  • 29. HTML – Seção HEAD Elemento LINK ● Define ligações do documento HTML com outros arquivos como CSS, scripts, etc. ● Tem como atributos as tags rel, type e href ● Onde rel define o tipo de relacionamento ● Type fornece informações aos navegadores sobre o conteúdo do elemento que o contém (dado, estilo, script...) ● HREF informa a URL que o link aponta ● A tag <link> é mais usada para ligar o documento HTML com o style sheets: <link rel = “stylesheet” type = “text/css” href=“estilo.css”/>
  • 30. HTML – Seção HEAD Elemento META ● O propósito do elemento meta é prover meta-informação sobre o documento. ● Metadados – dados sobre dados ● Usado tipicamente para especificar descrição da página, palavras-chave, autor do documento, última modificação e outros metadados. ● Muito frequentemente esse elemento é usado para prover informação que é relevante para os navegadores ou para as ferramentas de busca como a descrição do conteúdo do seu documento. <meta name = “ ” content = “ ” />
  • 31. HTML – Seção HEAD Elemento META <!DOCTYPE html> <html> <head> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="Hege Refsnes"> <meta charset="UTF-8"> </head> <body> <p>All meta information goes in the head section...</p> </body> </html>
  • 32. HTML – Seção HEAD Elemento META ● Um dos elementos do meta é o HTTP-EQUIV. ● Uma das funcionalidades é dizer ao navegador o tipo de dado que ele encontrará no documento.
  • 33. HTML – Seção HEAD Elemento META ● Um exemplo de uso comum do atributo HTTP-EQUIV é promover a mudança automática de páginas, atribuindolhe o valor Refresh. view-source:http://www.dpi.inpe.br/~scosta/ <meta http-equiv="refresh" content="3; URL=http://sites.google.com/site/skosta/">
  • 34. HTML – Seção HEAD Elemento SCRIPT Usado para definir um script do lado do cliente, como um código do javascript. Torna as páginas mais dinâmicas e iterativas. Utiliza o atributo type para especificar a linguagem utilizada. <script type = “text/javascript> // código javascript </script>
  • 35. HTML – Seção HEAD Elemento SCRIPT <!DOCTYPE html> <html> <body> <p>Click the button to display an alert box. </p> <button onclick="myFunction()">Try it</button> <script> function myFunction() { alert("I am an alert box!"); } </script> </body> </html>
  • 36. HTML – Seção HEAD Elemento STYLE (CSS) Incorpora ao documento HTML, a folha de estilos <style type = “text/css> grupo{nome_atributo: valor;} grupo{nome_atributo: valor;} grupo{nome_atributo: valor;} </style> CSS será visto mais a frente
  • 37. HTML – Seção BODY ● Tudo que estiver contido em <BODY> será apresentado ao leitor na janela principal do browser. ● <BODY> pode conter títulos, parágrafos, listas, tabelas, links para outros documentos, imagens, formulários, animações, vídeos, sons e scripts embutidos. <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
  • 38. O que pode ter no HTML ? Elementos estruturantes
  • 39. O que pode ter no HTML ? Elementos estruturantes Elementos chaves
  • 40. Elementos chaves
  • 41. HTML – Seção BODY Parágrafos e Títulos Prudência com as tags de títulos.
  • 42. HTML – Seção BODY Tags de Formatação <i> x <em> <b> x <strong> <del> x <strike>
  • 43. HTML – Seção BODY Tags de Formatação NÃO usem tags de formatação, apenas "strong" e "em", que tem uma semântica associada. <i> x <em> <b> x <strong> <del> x <strike>
  • 44. O que pode ter no HTML ? Elementos estruturantes Elementos chaves
  • 45. O que pode ter no HTML ? Elementos estruturantes Elementos chaves Listas e dados
  • 46. Listas e dados
  • 47. HTML – Seção BODY Listas ● Em HTML, as listas podem ser itens numerados ou não. ● As listas não numeradas usam a tag <ul> de Unordered Lists para marcar o começo e fim da lista e a tag <li> para cada item da lista. ● Os itens da lista são marcados com bullets <ul> <li> ... </li> <li> ... </li> </ul>
  • 48. HTML – Seção BODY Listas ● Em HTML, as listas podem ser itens numerados ou não. ● As listas numeradas usam a tag <ol> de Ordered Lists para marcar o começo e fim da lista e a tag <li> para cada item da lista. ● Os itens da lista são marcados com números <ol> <li> ... </li> <li> ... </li> </ol>
  • 49. HTML – Seção BODY Listas ● As listas podem ser compostas <ul> <li> ... </li> <ul> <li> ... </li> <li> ... </li> </ul> </ul> ● Nivel 1 ● Nivel 2 ● Nível 2 ● Nível 1
  • 50. HTML – Seção BODY Listas ● As listas podem usar o atributo type. ● Nas listas não ordenadas, o <type> altera o bullet usado e pode ter os valores CIRCLE, SQUARE e DISC (default) <ul type = square> <li> ... </li> <ul type = circle> <li> ... </li> <li> ... </li> </ul> </ul> Com CSS podemos criar outros estilos para as listas.
  • 51. HTML – Seção BODY Tabelas ● Tabelas são definidas pela tag <table>. ● Uma tabela tem linhas (rows) e colunas. ● Em HTML, define-se uma linha com a tag <tr>, de table row. ● A linha é dividia em colunas, onde os dados são inseridos através da tag <td>, de table data. ● Dentro de um table data, pode-se inserir texto, figura, links, listas, formulários, outras tabelas, etc.
  • 52. HTML – Seção BODY Tabelas <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
  • 53. HTML – Seção BODY Tabelas ● Linhas de cabeçalho podem ser definidas utilizando a tag <th>, de table header, o que definirá o texto como negrito e centralizado <table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
  • 54. HTML – Seção BODY Tabelas ● Para inserir uma legenda à tabela, usa-se a tag <caption> <table border="1"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr> </table>
  • 55. O que pode ter no HTML ? Elementos estruturantes Elementos chaves Listas e dados Links e imagens
  • 56. HTML – Seção BODY Hiperlink (Anchor) ● Em HTML, um link é criado utilizando a tag <a>, de duas maneiras: ● Para criar um link para outro documento ● Atributo HREF ● Para criar um link para o próprio documento (âncora ou bookmark), criando um apelido para determinada parte do documento. ● Atributo NAME ● O endereço indicado pelo link pode ser carregado na mesma janela em que o usuário se encontra, ou em outra janela. ● Essa característica é determinada pelo atributo TARGET ● _self ● _blank <a href="http://www.w3schools.com">Visit W3Schools.com!</a>
  • 57. HTML – Seção BODY Imagens ● Para inserir imagens em um documento HTML, utiliza-se a tag <img>. ● Os seguintes atributos devem ser configurados: ● src ● Endereço da imagem (source) ● alt ● Texto mostrado no lugar da imagem, caso a mesma, por algum motivo não puder ser carregada ● width ● Largura da imagem ● heigh ● Altura da imagem
  • 58. HTML – Seção BODY Imagens <!DOCTYPE html> <html> <body> <img src="smiley.gif" alt="Smiley face" width="42" height="42"> </body> </html>
  • 59. O que pode ter no HTML ? Elementos estruturantes Elementos chaves Listas e dados Formulários Links e imagens
  • 60. HTML – Seção BODY Formulários ● Formulários são usados para enviar dados para um servidor web. ● Os elementos de um formulário permitem o usuário entrar com informações, como campos de texto, campos de área de texto, menus drop-down, botões radiais, caixas de seleção, etc.
  • 61. HTML – Seção BODY Formulários ● A tag <form> define uma área de formulário. <form> ... elementos de entrada ... </form>
  • 62. HTML – Seção BODY Formulários ● A tag <input> define um elemento de entrada. ● É a tag mais utilizada em formulários. ● Um elemento de entrada pode ser um campo de texto, um checkbox, um campo de senha, um botão de radio, um botão de envio (submit), entre outros. ● Definido pelo atributo type
  • 63. HTML – Seção BODY Formulários ● Campo de texto ● <input type = “text” name = “nome” /> <!DOCTYPE html> <html> <body> <form action="demo_form.asp"> First name: <input type="text" name="FirstName" value="Mickey" ><br> Last name: <input type="text" name="LastName" value="Mouse" ><br> <input type="submit" value="Submit"> </form> <p>Click the "Submit" button and the form-data will be sent to a page on the server called "demo_form.asp".</p> </body> </html>
  • 64. HTML – Seção BODY Formulários - Tipos Text Radio Checked Submit
  • 65. CSS Cascading Style Sheets
  • 66. O que podemos fazer com CSS ?
  • 67. Texto
  • 68. Texto
  • 69. Tamanho
  • 70. Posição
  • 71. Como usamos o CSS nas nossas paginas Web ?
  • 72. Três maneiras Inline Embedded External (ordem: do mais fácil para o melhor)
  • 73. Inline CSS (bad) <body> <h1 style = "color:red ;"> Ola Mundo </h1> </body>
  • 74. Inline CSS (bad) <body> <p style = "color:red ;"> Ola Mundo </p> </body> Mistura apresentação com estrutura
  • 75. Inline CSS (bad) <body> <p style = "color:red ;"> Ola Mundo </p> </body> É aceito no HTML Mistura 4.01 strict e no apresentação XHTML com estrutura
  • 76. Embedded CSS (OK) <head> <style type="test/css"> p {color:red;} </style> </head>
  • 77. Embedded CSS (OK) <head> <style type="test/css"> p {color:red;} </style> </head> Rápido e fácil. Use em pequenas aplicações.
  • 78. External CSS: link tag (GOOD) <head> <link rel="stylesheet" href="meuestilo.css"> <head>
  • 79. Por dentro do CSS
  • 80. Três partes 1.Seletor
  • 81. Três partes 1.Seletor 2.Propriedades
  • 82. Três partes 1.Seletor 2.Propriedades 3.Valores
  • 83. 1. Primeiro selecionamos o elemento p{}
  • 84. 2. Então dizemos o que queremos mudar p { color: }
  • 85. 3. Então dizemos qual o valor para essa mudança p { color: blue;}
  • 86. Chaves Ponto e virgula h1 { color: red; font-size: 12px; } Dois pontos
  • 87. CSS Sintaxe 1.Seleção 2.Declaração 3.Cascata
  • 88. SELEÇÃO
  • 89. Seleção Tipos de seleção a. element b. class c. id d. posição no documento
  • 90. 1. Element p{} Seleciona todos elemento <p>, em todo o documento HTML
  • 91. 2. Class .menu { } Seleciona todos os elementos da classe "menu" . significa "esse é um nome de uma classe"
  • 92. 3. id #rodape { } Seleciona o elemento com id "rodape" # significa "esse é um nome de um id"
  • 93. 4. posição no documento <div id ="rodape"> <p> aqui é aplicada </p> <span>aqui nao se aplica</span> </div> <p>aqui nao se aplica</p> #rodape p { color:red; } Seleciona todos elementos "p" descendentes de rodape. aqui é aplicada aqui nao se aplica aqui nao se aplica
  • 94. 4. posição no documento <div id ="rodape"> <p class ="primeiro p" > aqui é aplicada </p> <p class ="segundo p"> aqui nao se aplica </p> </div> <p>aqui nao se aplica</p> p.primeiro { color:red; } Seleciona todos elementos "p" descendentes de rodape. aqui é aplicada aqui nao se aplica aqui nao se aplica
  • 95. 4. posição no documento #header div.content form p em.required {} O que estamos selecionando pelo seletor acima ?
  • 96. Pseudo classes a:link {} a:visited {} a:hover {} a:active {} /* link não visitado */ /* link visitado */ /* mouseover */ /* link selecionado */
  • 97. DECLARAÇÃO
  • 98. Declaração (o que está dentro das chaves) selector { property: value; }
  • 99. Declaração É a combinação de propriedade e valor. Nos declaramos o que queremos mudar
  • 100. CSS define diversas coisas que podemos declarar. Exemplo font color background-color border (essas são as propriedades)
  • 101. Cada propriedade possui um conjunto de valores que pode de ser aplicado. font: 12px normal Verdana, sans-serif; color: #123; background-color: red; border: 1px solid rgb(193,193,193);
  • 102. Propriedades tem diferentes granularidades Por exemplo a propriedade "border" ...
  • 103. Propriedades tem diferentes granularidades Por exemplo a propriedade "border" ... border border-color border-bottom border-width border-left border-top border-right ....
  • 104. Propriedades tem diferentes granularidades Por exemplo a propriedade "border" ... border font border-color border-bottom border-width border-left border-top border-right .... font-family font-size font-style font-weight
  • 105. Existe uma alternativa mais simples shorthand
  • 106. Existe uma alternativa mais simples shorthand border: 1px solid #000 É equivalente a: border-width: 1px border-style: solid border-color: #000
  • 107. Podemos mudar especificas partes no estilo de um elemento p { border: 1px solid red; } p.intro {border-color:blue;} O que estamos fazendo aqui ?
  • 108. Unidades Absoulta vs relativas px em %
  • 109. Unidades absolutas Pixels (px) are unidades absolutas. Elas são sempre do mesmo “tamanho”. Independentemente do dispositivo
  • 110. Unidades relativas em é sempre relativa ao valor corrente do tamanho da fonte. width: 2em; font-size: 2em; % é relativo a diferentes coisas em diferentes contextos width: 50% ; 50% da largura disponível font-size: 50% ; 50% do tamanho corrente da fonte
  • 111. Unidades relativas em é sempre relativa tamanho da fonte. width: 2em; font-size: 2em; HTML5 ao valor em usaremos corrente para fonts e não mais px. % é relativo a diferentes coisas em diferentes contextos width: 50% ; 50% da largura disponível font-size: 50% ; 50% do tamanho corrente da fonte do
  • 112. Como é calculado ?
  • 113. Como é calculado ? body {font-size:12 px;} h1 {font-size: 200 % ;} h1 a {font-size: 75%;}
  • 114. Como é calculado ? body {font-size:12 px;} h1 {font-size: 200% ;} O texto de h1 é 24 pixels (12*2) h1 a {font-size: 75%;} Um link dentro de um h1 é 18 pixel (12*2*.75)
  • 115. Como é calculado ? body {font-size:100%;} h1 {font-size: .75em;}
  • 116. Como é calculado ? body {font-size:100%;} h1 {font-size: .75em;} Considerando o tamanho de 16 pixels para o browser, temos 0.75 * 16 = 12
  • 117. CASCATA
  • 118. Cascata Como e quais declaração serão aplicadas aos elementos; Regras para aplicação das declarações
  • 119. Cascata Como e quais declaração serão aplicadas aos elementos; Regras para aplicação das declarações Especificidade Herança
  • 120. Usualmente, as declarações são aplicadas na ordem de definição p {color: red;} p {color: blue;} A ultima declaração é a valida para todos elementos “p”.
  • 121. Usualmente, as declarações são aplicadas na ordem de definição ESPECIFICIDADE. p {color: red;} p {color: blue;} A ultima declaração é a valida para todos elementos “p”.
  • 122. Usualmente, as declarações são aplicadas na ordem de definição p {color: red;} p {color: blue;} A ultima declaração é elementos “p”. ESPECIFICIDADE. A última a valida para declaração mais específica. todos
  • 123. <div id =“a”> <div id =“b”> <h1> </h1> </div> </div> #a #b h1 {color:red;} #a h1 {color: blue;} Qual seletor é mais específico ? Qual será a cor de h1 dentro de #b ?
  • 124. Regras para determinar a especificade Elemento é 1 ponto ●Uma classe é 10 pontos ●Um id é 100 pontos ●
  • 125. Regras para determinar a especificade Elemento é 1 ponto ●Uma classe é 10 pontos ●Um id é 100 pontos ●
  • 126. Regras para determinar a especificade ○ ○ ○ Elemento é 1 ponto Uma classe é 10 pontos Um id é 100 pontos p a {} = 2 pontos p.intro a {} = 12 pontos #about p.intro a {} = 112 pontos
  • 127. Herança Elemento podem herdar estilos dos elementos ascendentes
  • 128. #blog {color: red;} <div id=“blog”> <p>Ola</p> </div> O elemento “p” por ser descendente de #blog, terá cor vermelha.
  • 129. #blog {color: red;} <div id=“blog”> <p>Ola</p> </div> O elemento “p” por ser descendente de Atenção, nem #blog, terá cor vermelha. todos os estilos são “herdáveis”.
  • 130. Usualmente ... Propriedades relativas a texto são herdadas Propriedades relativas a layout não são herdáveis
  • 131. .
  • 132. Layout 1.Modelo caixa 2.Fluxo (“propriedade display”) 3.Posição 4.Flutuação
  • 133. Modelo caixa Content Padding Border Margin
  • 134. Modelo Caixa Content
  • 135. Declarando margin ou padding margin: 1em; Todas as margens = 1em margin: 1em 2em; Superior e inferior = 1em e direita e esquerda = 2em margin: 1em 2em 3em 4em ; Superior = 1em, direita = 2em, inferior = 3em e esquerda = 4em
  • 136. Declarando margin ou padding margin: 1em; Todas as margens = 1em margin: 1em 2em; Superior e inferior = 1em e direita e esquerda = 2em Movimento do relógio margin: 1em 2em 3em 4em ; Superior = 1em, direita = 2em, inferior = 3em e esquerda = 4em
  • 137. Fluxo (“propriedade display”) Em linha (inline) Mostra na mesma linha Ex: <span>, <a>, <input>, <img> .. Nível de bloco (block) Mostra em uma linha posterior Ex: <h1>,<p>, <ul>, <div>
  • 138. Exemplo <p> Click <a href=""> aqui </a> </p> a { display: block; } Click aqui
  • 139. Posição static (padrão) absolute relative fixed
  • 140. Posição static (padrão) absolute relative fixed Flutuação (float)
  • 141. Exercícios css-walkthrough