Aplicativos Web e Webdesign Médio Integrado Aula 02 – 2014 Thatiane de Oliveira Rosa INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína Aplicativos Web e Webdesign – Médio Integrado 1 Roteiro • Tema: Introdução ao HTML Introdução ao HTML; Tags Estruturais; Títulos; Cabeçalhos; Parágrafos; INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína Aplicativos Web e Webdesign – Médio Integrado 2 HTML • HTML – Hypertext Markup Language ou Linguagem de Marcação de Hipertexto: É uma linguagem de marcação empregada para descrever a estrutura de uma página web, definindo um conjunto de elementos (cabeçalhos, parágrafos, listas, tabelas, dentre outros) que a compõem. INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína Aplicativos Web e Webdesign – Médio Integrado 3 HTML • HTML: É composto por tags especiais para envolver palavras e parágrafos; Tags indicam as diferentes partes da página e produzem diferentes efeitos no navegador; • Exemplos: <body> </body> <table></table> INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína Aplicativos Web e Webdesign – Médio Integrado 4 HTML • HTML: Possui um conjunto definido de tags que podem ser utilizadas para criação de páginas web; INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína Aplicativos Web e Webdesign – Médio Integrado 5 Tags Estruturais • Basicamente, 3 (três) tags são utilizadas para descrever a estrutura geral de um documento HTML: <html>; <head>; <body>. INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína Aplicativos Web e Webdesign – Médio Integrado 6 Tags Estruturais • <html>: primeira tag de qualquer página HTML, indica que o conteúdo do arquivo está na linguagem HTML. • Exemplo: <html>...sua pagina html...</html> INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína Aplicativos Web e Webdesign – Médio Integrado 7 Tags Estruturais • <head>: cabeçalho da página, geralmente nesta tag é definido o título da página. • Exemplo: ... <head> <title> Título da Página</title> </head> ... INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína Aplicativos Web e Webdesign – Médio Integrado 8 Tags Estruturais • <body>: tag onde são descritas as demais tags que compõem o corpo do documento html. • Exemplo: ... <body> Sua página HTML </body> ... INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína Aplicativos Web e Webdesign – Médio Integrado 9 Títulos • É muito importante que todo documento HTML possua um título, para indicar o que a página descreve; • A tag <title> é sempre apresentada dentro da tag <head>; • Cada página deve possuir apenas um título, que pode conter apenas textos. INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína Aplicativos Web e Webdesign – Médio Integrado 10 Cabeçalhos • Conjunto de Tags utilizada para dividir seções no texto; • Existem seis níveis de cabeçalhos; • Tags de cabeçalho: <h1></h1>; ◦ <h4></h4>; <h2></h2>; ◦ <h5></h5>; <h3></h3>; ◦ <h6></h6>; INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína Aplicativos Web e Webdesign – Médio Integrado 11 Cabeçalhos • Exemplo: ... <body> <h1>Texto do cabeçalho h1</h1> <h2>Texto do cabeçalho h2</h2> <h3>Texto do cabeçalho h3</h3> <h4>Texto do cabeçalho h4</h4> <h5>Texto do cabeçalho h5</h5> <h6>Texto do cabeçalho h6</h6> </body> ... INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína Aplicativos Web e Webdesign – Médio Integrado 12 Cabeçalhos • Resultado: INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína Aplicativos Web e Webdesign – Médio Integrado 13 Parágrafos • <p></p> tag indicadora de parágrafo. INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína Aplicativos Web e Webdesign – Médio Integrado 14 Referências LEMAY, Laura. Aprenda a Criar Páginas Web com HTML e XHTML em 21 dias. São Paulo. Pearson Education, 2002. INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína Aplicativos Web e Webdesign – Médio Integrado 15 Aplicativos Web e Webdesign Médio Integrado Aula 02 – 2014 Thatiane de Oliveira Rosa INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína Aplicativos Web e Webdesign – Médio Integrado 16