TECNOLOGIA WEB INTRODUÇÃO CONSTRUÇÃO DE PÁGINAS ESTÁTICAS HTML / XHTML

Transcrição

1 INTRODUÇÃO CONSTRUÇÃO DE PÁGINAS ESTÁTICAS HTML / XHTML 1

2 INTRODUÇÃO TECNOLOGIA WEB Começaremos desvendando o poder do desenvolvimento de aplicações baseadas na Web com a XHTML (Extensible HyperText Markup Language). Mais a frente, veremos técnicas XHTML mais sofisticadas, como vinculação interna (hyperlinks) para a navegação na página, formulários para colher informações de um visitante da página Web e tabelas, úteis para estruturar informações de bancos de dados (softwares que armazenam conjuntos de dados estruturados). Não usa linguagem de programação procedural, como em: C, C++ ou Java. A XHTML é uma linguagem de marcação que especifica o formato de texto exibido em um navegador Web, como no Internet Explorer, Chrome ou Firefox. Uma questão básica ao utilizar a XHTML é a separação entre a apresentação de um documento, isto é, a aparência quando exibido por um navegador, e a estrutura da informação que contém. 2

3 INTRODUÇÃO TECNOLOGIA WEB A XHTML é baseada na HTML (HyperText Markup Language) uma tecnologia com direitos autorais da World Wide Web Consortiurn (W3C). Em linguagem HTML, era comum especificar a estrutura do documento e também a sua formatação. A formatação podia determinar onde o navegador colocava o elemento em uma página Web ou as fontes e as cores usadas para exibir um elemento. A recomendação XHTML 1.0 Strict da W3C permite que apenas a estrutura de um documento apareça em um documento XHTML válido, e não a sua formatação. Normalmente, essa formatação é estabelecida com CSS Cascading Style Sheets (Folhas de Estilo em Cascata), que veremos mais adiante. 3

4 CÓDIGO FONTE DE UM HTML OU XHTML <?xml version = "1.0" encoding = "utf-8"?>  TECNOLOGIA WEB <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "  <html xmlns = "  <head>  <title> Bem Vindo </title>  </head>  <body>   curso DE TECNOLOGIA WEB O crescimento da Web está acelerado. Cada vez mais pessoas estão conectas na rede. Com sistemas cada vez mais complexos e ao mesmo tempo versáteis usuário é o principal beneficiário de toda essa tecnologia. Hoje nos encontramos na versão 2.0 ou Web 2.0 com uma diversidade de opções. Isso nos deixa bem mais próximos da web Semântica, a próxima geração.  </body>  </html>  4

5 RESULTADO - COMO É MOSTRADO NO NAVEGADOR TECNOLOGIA WEB 5

6 INTRODUÇÃO Entendendo um página HTML Um página HTML é um arquivo de texto contendo comandos baseados em etiquetas de identificação ou tags que especificam cada elemento da página, por exemplo: Título; Parágrafo; Tabela; Âncoras ou hyperlinks com outras páginas, definindo a estrutura e as ligações com outras páginas. Pode conter informações como: Cabeçalhos; Texto; Tabelas; Listas; Fotografias; Videoclipes; Links, etc. 6

7 A junção das linguagens HTML e XML aconteceu no final de 1999 e, em 26 de janeiro de 2000, pela W3C (World Wide Web Consortium), onde surgiu a linguagem XHTML (extensible HyperText Markup Language - Linguagem de Marcação de Hipertexto Estendida) em sua versão 1.0 e revisada em 1 de agosto de

8 INTRODUÇÃO HTML / XHTML - TAGS TECNOLOGIA WEB O programa é um texto escrito por meio de comandos específicos da linguagem denominados Tags; Obedece à estrutura e às regras sintáticas dessa linguagem; São usadas para definir a estrutura física de uma página, como: Alterar fontes; Incluir linhas ou imagens; Definir links de navegação; Atividades de formatação CSS. Uma tag é uma palavra reservada delimitada pelos símbolos < (menor que) e > (maior que). As tags são geralmente usadas em duplas: de inicialização <tag> e de finalização </tag>), a barra / indica a finalização da código da linha. 8

9 INTRODUÇÃO HTML / XHTML TAGS EXEMPLO DE INTERPLETAÇÃO Interpretados pelo navegador, browser em inglês, ao encontrar uma tag o programa de navegação verifica se a palavra entre as tags é reservada e se é válida como comando da linguagem de marcação. Sendo válida, o programa de navegação executa a ação indicada e apresenta o resultado. Não sendo válida o programa de navegação não executa a ação e não apresenta nenhuma mensagem de erro. 9

10 INTRODUÇÃO HTML / XHTML ESTRUTURA HIERÁRQUICA As linguagens HTML e XHTML possuem uma estrutura básica (mínima) para a formatação de um documento (página) que são, na verdade, seus comandos de formatação. Um documento HTML/XHTML deve conter algumas tags básicas para que o navegador entenda que a estrutura em uso deve ser interpretado por um navegador de Web (browser). 10

11 INTRODUÇÃO HTML / XHTML ESTRUTURA HIERÁRQUICA Tag Principal <html>... </html> Defini a estrutura principal do documento HTML/XHTML e marcam o início e o final do documento. São obrigatórias, pois informam ao navegador que o documento está escrito na linguagem HTML ou XHTML. A tag <html> determina a estrutura que um documento XHTML deve possuir e tem como parâmetro o atributo xmlns= o qual informa para o navegador que o código a ser executado é um código XHTML de acordo com as recomendações da W3C. Exemplo estrutural: <html xmlns = > 11

12 INTRODUÇÃO HTML / XHTML ESTRUTURA HIERÁRQUICA Cabeçalho (Título) ou <head>... </head> Define a área do cabeçalho (título) do documento em uso. As informações contidas nas tags <head>... </head> não serão exibidas no corpo do documento. Usada para apresentar o título do documento ou página que será apresentado na barra de títulos do navegador. Exemplo estrutural: <html xmlns = > <head>... </head> 12

13 INTRODUÇÃO HTML / XHTML ESTRUTURA HIERÁRQUICA Título ou <title>... </ title> Par de tags para digitar o título do documento na área de cabeçalho e que será apresentado na barra de título do navegador. Corpo do documento ou <body>... </body> Define o corpo no qual o documento XHTML será estruturado, permitindo várias ações de formatação e uso da linguagem XHTML ou HTML. Exemplo estrutural: <html xmlns = > <head> <title> Seja bem vindo </title> </head> <body> Corpo do Documento </body> </html> 13

14 INTRODUÇÃO HTML / XHTML ESTRUTURA HIERÁRQUICA Comentário ou  Par de tags útil para um comentário qualquer, como se fosse um lembrete para quem está desenvolvendo o código, não aparece na tela do navegador. Parágrafo ou assunto do corpo Par de tags para se construir um parágrafo qualquer, usado entre as tags bodys. Exemplo estrutural:  <html xmlns = > <head>  <title> Bem Vindo </title> </head> <! Finaliza o cabeçalho --> <body>   Bem vindo a minha primeira página de Web. </body> <! Finaliza o corpo do documento --> </html> <! Finaliza o XHTML --> 14

15 INTRODUÇÃO HTML / XHTML ESTRUTURA HIERÁRQUICA Tag pula linha Tag única, usada para pular linhas, trabalha entre as tags <body>... </body>, também pode ser usado dentro das tags ... </p. Exemplos: Uma tag = 1 linha; Duas tags = 2 linhas e assim por diante. Tag negrito ... Indica que o texto ou link entre as tags será mostrado no navegador em negrito. Tag Itálico ... Indica que o texto ou link entre as tags será mostrado no navegador em itálico. Tag negrito + itálico ... O texto será mostrado no navegador em negrito e itálico. 15

16 INTRODUÇÃO HTML / XHTML ESTRUTURA HIERÁRQUICA EXEMPLO  <?xml version = "1.0" encoding = "utf-8"?> TECNOLOGIA WEB  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "  <html xmlns = >  <head>  <title> Bem Vindo </title> </head>  <body>   disciplina DE TECNOLOGIA WEB <como funciona:  - O ambiente de Internet; - Protocolos; - Diversas aplicações. - Diferenciação entre ambientes cliente e servidor; - Introdução à criação de páginas Web simples; - Linguagem de marcação, script e estilos. </body>  </html>  16

17 INTRODUÇÃO HTML / XHTML ESTRUTURA HIERÁRQUICA EXEMPLO TECNOLOGIA WEB 17

18 SERVIÇO DE VALIDAÇÃO DE XHTML DO W3C <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " A declaração <!DOCTYPE> não deve ser confundida com uma tag, pois é expressa em caracteres maiúsculos, diferentemente de uma tag, que é expressa em caracteres minúsculos. Sua função é indicar ao programa de validação: a linguagem e a versão usada para escrever o código, determinando como esse documento deve ser interpretado por um navegador de Web. Sua declaração é obrigatória para que o código de uma página seja válido, devendo sempre ser definida antes da tag <html>. Deve ser digitado conforme o formato apresentado para determinar o padrão de metalinguagem em uso. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " 18

19 SERVIÇO DE VALIDAÇÃO DE XHTML DO W3C <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " As indicações html PUBLIC caracterizam-se por mostrar duas importantes informações: e PUBLIC que define a forma de localizar o DTD (Document Type Definitions - Definição de Tipo de Documento), referenciado como identificador formal público, por meio da SGML. html A indicação do código da linguagem de marcação associada ao padrão SGML (Standard Generalized Markup Language ou Linguagem de Marcação Padrão Generalizada). PUBLIC Define a forma de localizar o DTD (Document Type Definitions ou Definição de Tipo de Documento), referenciado como identificador formal público, por meio da SGML. 19

20 SERVIÇO DE VALIDAÇÃO DE XHTML DO W3C A programação de aplicações baseadas na Web pode ser muito complexa, e os documentos XHTML devem ser escritos corretamente para garantir que os navegadores os processem de modo adequado. 20

21 CONTINUA Próximo passo exemplos da apostila. Iniciando pela página

22 Aulas de Apoio TECNOLOGIA WEB Estarão disponibilizadas nos descritos a baixo para downloads os arquivos nos formatos: PowerPoints ou Word das aulas. Alguns estarão disponíveis para impressão, outros, somente para leitura, mas não para edição. Em alguns casos em que se fizer necessário a impressão, o professor estará liberando para um melhor desenvolvimento dos trabalhos a ser solicitados. Sites do professor: Contato: celso.candido@estacio.br 22