Introdução ao HTML e CSS

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

Introdução ao HTML e CSS

Introdução ao HTML e CSS

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados(20)

Destaque

Destaque(19)

Similar a Introdução ao HTML e CSS

Similar a Introdução ao HTML e CSS(20)

Mais de Sérgio Souza Costa

Mais de Sérgio Souza Costa(20)

Introdução ao HTML e CSS