PROGRAMAÇÃO PARA INTERNET HTML Prof. Rafael Gross
INTRODUÇÃO Quando acessamos uma página web, estamos interessados na informação contida nessa página. Essa informação pode estar na forma de texto, imagem ou vídeo. O conteúdo de uma página web é definido com a linguagem HTML (HyperText Markup Language). HTML é uma linguagem de marcação originalmente proposta por Tim Berners-Lee no final da década de 1980. O objetivo do Tim Barners-Lee era criar um mecanismo simples que pudesse ser utilizado por qualquer pessoa que quisesse disseminar documentos científicos. Desde sua proposta até os dias de hoje, a linguagem HTML sofreu diversas alterações. A cada versão, novos recursos são adicionados e problemas corrigidos. A versão mais atual da especificação da linguagem HTML é a 5. Essa versão ainda não foi finalizada, foi lançada em definitivo em Julho de 2014. Porém, os navegadores já implementam diversos recursos do HTML5. A especificação está disponível no endereço http://www.w3.org/tr/html5
ESTRUTURA BÁSICA Basicamente, um documento HTML é composto por elementos hierarquicamente organizados. Para inserir um elemento em um documento HTML, devemos utilizar as tags correspondentes a esse elemento. As tags são definidas com parênteses angulares (< e >). Os elementos podem possuir atributos e conteúdo. Os atributos são formados por nome e valor. Normalmente, os valores dos atributos são definidos dentro de aspas dupla e o conteúdo dos elementos é um texto ou outros elementos.
Declaração do tipo de documento <!DOCTYPE html> <html lang= pt-br"> Tag de abertura do elemento html < head> nome do atributo Valor do atributo <meta http-equiv= Content-Type content= "text/html; charset=utf-8"> <title> Aula 1 html </title> </head> <body> <p> FATECJD - PROGRAMAÇÃO PARA INTERNET </p> </body> </html> Fechamento da TAG
<!DOCTYPE> Para um navegador exibir corretamente uma página web, devemos informar explicitamente o tipo do documento. O tipo do documento é informado com a declaração <!DOCTYPE>. Quando conveniente, discutiremos as principais diferenças entre os tipos de documentos mais importantes. Veja a declaração <!DOCTYPE> para os principais tipos de documentos. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.1//EN" "http://www.w3.org/tr/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. Frameset//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.1 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <!DOCTYPE html>
HTML Os elementos HTML, com exceção do DOCTYPE, devem ser inseridos no conteúdo do elemento html. Esse elemento é aberto com a tag <html>, fechado com a tag </html> e deve conter exatamente um elemento head seguido de exatamente um elemento body. Diversos autores recomendam a utilização do atributo lang. Esse atributo indica a língua utili- zada no documento HTML ou na maior parte dele. Algumas ferramentas de leitura ou de tradução de texto podem utilizar esse atributo para descobrir facilmente em qual língua os textos contidos no documento HTML ou na maior parte dele foram escritos.
<head> A principal função do elemento head é agrupar informações sobre o documento HTML (metainformação). São exemplos de metainformações: o encoding, a taxa de atualização, o autor, a descrição e as palavras chaves do documento HTML. <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta http-equiv="refresh" content="3"> <meta name="author" content="rafael Gross"> <meta name="description" content= Programação Internet"> <meta name="keywords" content= curso HTML"> </head>
<body> O conteúdo de uma página web deve ser definido no corpo do elemento body. Por exemplo, podemos inserir no corpo do body cabeçalhos, textos, listas, tabelas, entre outros componentes. Esse elemento é aberto pela tag <body> e fechado pela tag </ body>. <body> <h1>k2 - Desenvolvimento Web com HTML</h1> </body>
Comentários Podemos adicionar comentários em um documento HTML dentro das tags <!-- e -->. Os comen- tários são ignorados pelos navegadores. <!DOCTYPE html> <html lang="pt-br"> <head> <!-- corpo do head --> </head> <body> <!-- corpo do body --> </body> </html>
Semântica HTML No exemplo abaixo, utilizamos o elemento p para definir um parágrafo. De acordo com a especificação da linguagem HTML, esse elemento deve ser utilizado justamente para definir parágrafos. Portanto, ele foi aplicado corretamente. <!DOCTYPE html> <html lang="pt-br"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>exemplo de uso correto da semântica HTML</title> </head> <body> <p>este é um texto para mostrar o significado da tag p.</p> </body> </html>
Semântica HTML <!DOCTYPE html> <html lang="pt-br"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>meus alunos - Outro Exemplo Site do Gross - prof Gross</title> </head> <body> <address> Rafael Gross rafael.gross@fatec.sp.gov.br Professor Fatec Av. Uniao dos Ferroviários, 1760 - Centro - Jundiaí, SP CEP 1352-1 </address> <address> Schuster schuster@fatecjd.edu.br Coordenador do Curso de GTI Av. Uniao dos Ferroviários, 1760 - Centro - Jundiaí, SP CEP 1352-1 </address> </body> </html>
Títulos Assim como em um livro, uma página web pode conter uma hierarquia de títulos para estabelecer uma divisão do seu conteúdo. Para inserir títulos em uma página web, devemos utilizar os elementos h1, h2, h3, h4, h5 e h6. Os sufixos numéricos de 1 a 6 indicam o nível do título dentro da hierarquia de títulos do documento. Veja o exemplo: <!DOCTYPE html> <html lang="pt-br"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>exemplo de títulos</title> </head> <body> <h1>título 1</h1> <h2>título 2</h2> <h3>título 3</h3> <h4>título 4</h4> <h5>título 5</h5> <h6>título 6</h6> </body> </html>
Exercício : Crie um novo documento HTML chamado titulos.html com o conteúdo abaixo no projeto html <!DOCTYPE html> <html lang="pt-br"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title> - Desenvolvimento Web com HTML</title> </head> <body> <h1>k2 - Desenvolvimento Web com HTML</h1> <p>atualmente, praticamente todos os sistemas corporativos possuem interfaces web. Para quem deseja atuar no mercado de desenvolvimento de software, é obrigatório o conhecimento das linguagens: HTML, CSS e JavaScript.</p> <p>essas linguagens são utilizadas para o desenvolvimento da camada de apresentação das aplicações web.</p> <h2>pré-requisitos</h2> <ul> <li>familiaridade com algum sistema operacional (Windows/Linux/Mac OS X)</li> <li>lógica de programação</li> </ul> <h2>agenda</h2> <h3>aos domingos</h3> <ul> <li>1/11/2105 das <li>23/2/216 das </ul> <h3>aos sábados</h3> <ul> <li>15/3/214 das <li>26/4/214 das </ul> </body> </html>
PARAGRÁFO
Character Entities <!DOCTYPE html> <html lang="pt-br"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>exemplo de character entities</title> </head> <body> <h1>exemplo de character entities</h1> <ul> <li>★ ★ ɥ </li> <li>☎ ɮ </li> <li>♀ ɤ </li> <li>♪ </li> </ul> </body> </html>
Como exercício final: Criar um curriculum em html utilizando todos as tags utilizadas na aula de hoje.