Upload
others
View
1
Download
0
Embed Size (px)
Citation preview
Prof. Celso Candido
TECNOLOGIA WEB
ADS / REDES / ENGENHARIA 1
INTRODUÇÃO
CONSTRUÇÃO DE PÁGINAS ESTÁTICAS
HTML / XHTML
Prof. Celso Candido
TECNOLOGIA WEB
ADS / REDES / ENGENHARIA 2
Começaremos desvendando o poder do desenvolvimento de aplicações baseadas na Web com a XHTML (Extensible HyperText Markup Language).
INTRODUÇÃO
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.
Prof. Celso Candido
TECNOLOGIA WEB
ADS / REDES / ENGENHARIA 3
A XHTML é baseada na HTML (HyperText Markup Language) — uma tecnologia com direitos autorais da World Wide Web Consortiurn (W3C).
INTRODUÇÃO
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.
Prof. Celso Candido
TECNOLOGIA WEB
ADS / REDES / ENGENHARIA 4
<?xml version = "1.0" encoding = "utf-8"?> <!-- Versão do “XML” e codificação dos caracteres de página --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- Identificação do XHTML --> <html xmlns = "http://www.w3.org/1999/xhtml"> <!-- Início do código da página -->
<head> <!-- Início do Cabeçalho de página --> <title> Bem Vindo </title> <!-- Título da página -->
</head> <!-- Fim do cabeçalho --> <body> <!-- Início do corpo do documento -->
<!-- Identifica o conteúdo da página --> <p><b>CURSO DE TECNOLOGIA WEB</b></p> <p> O crescimento da Web está <b>acelerado</b>.<br />
Cada vez mais pessoas estão conectas na <i>rede</i>.<br /> Com sistemas cada vez mais complexos e ao mesmo tempo versáteis <b><i>usuário</i></b> é o principal beneficiário de toda essa tecnologia.</p>
<p> Hoje nos encontramos na <b>versão 2.0 ou Web 2.0</b> com uma diversidade de opções.<br /><br /> Isso nos deixa bem mais próximos da <b>Web Semântica</b>, a próxima geração.</p> <!-- Fim do conteúdo de página -->
</body> <!-- Fim do corpo do documento --> </html> <!-- Fim do código de página -->
CÓDIGO FONTE DE UM HTML OU XHTML
Prof. Celso Candido
TECNOLOGIA WEB
ADS / REDES / ENGENHARIA 5
RESULTADO - COMO É MOSTRADO NO NAVEGADOR
Prof. Celso Candido
TECNOLOGIA WEB
ADS / REDES / ENGENHARIA 6
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.
INTRODUÇÃO – Entendendo um página HTML
Pode conter informações como: Cabeçalhos; Texto; Tabelas; Listas; Fotografias; Videoclipes; Links, etc.
Prof. Celso Candido
TECNOLOGIA WEB
ADS / REDES / ENGENHARIA 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 2002.
Prof. Celso Candido
TECNOLOGIA WEB
ADS / REDES / ENGENHARIA 8
INTRODUÇÃO – HTML / XHTML - TAGS 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.
Prof. Celso Candido
TECNOLOGIA WEB
ADS / REDES / ENGENHARIA 9
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.
INTRODUÇÃO – HTML / XHTML – TAGS – EXEMPLO DE INTERPLETAÇÃ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.
Prof. Celso Candido
TECNOLOGIA WEB
ADS / REDES / ENGENHARIA 10
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.
INTRODUÇÃO – HTML / XHTML – ESTRUTURA HIERÁRQUICA
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).
Prof. Celso Candido
TECNOLOGIA WEB
ADS / REDES / ENGENHARIA 11
Tag Principal – <html>... </html> Defini a estrutura principal do documento HTML/XHTML e marcam o início e o final do documento.
INTRODUÇÃO – HTML / XHTML – ESTRUTURA HIERÁRQUICA
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=“http://www.w3.org/1999/xhtmI”, 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 = ”http://www.w3.org/1999/xhtmI”>
Prof. Celso Candido
TECNOLOGIA WEB
ADS / REDES / ENGENHARIA 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 = ”http://www.w3.org/1999/xhtmI”> <head> ... </head>
Prof. Celso Candido
TECNOLOGIA WEB
ADS / REDES / ENGENHARIA 13
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.
INTRODUÇÃO – HTML / XHTML – ESTRUTURA HIERÁRQUICA
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 = ”http://www.w3.org/1999/xhtmI”> <head> <title> Seja bem vindo </title> </head> <body> Corpo do Documento </body> </html>
Prof. Celso Candido
TECNOLOGIA WEB
ADS / REDES / ENGENHARIA 14
Comentário ou <!-- assunto do comentário --> 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.
INTRODUÇÃO – HTML / XHTML – ESTRUTURA HIERÁRQUICA
Parágrafo ou <p> assunto do corpo </p> Par de tags para se construir um parágrafo qualquer, usado entre as tags “bodys”.
Exemplo estrutural: <!-- Identifica um XHTML --> <html xmlns = “http://www.w3.org/1999/xhtmI”> <head> <!-- Identifica um Cabeçalho --> <title> Bem Vindo </title> </head> <!– Finaliza o cabeçalho --> <body> <!-- Identifica o corpo do documento --> <!-- Identifica o assunto da página --> <p> Bem vindo a minha primeira página de Web. </p> </body> <!– Finaliza o corpo do documento --> </html> <!– Finaliza o XHTML -->
Prof. Celso Candido
TECNOLOGIA WEB
ADS / REDES / ENGENHARIA 15
Tag pula linha – “ <br />” Tag única, usada para pular linhas, trabalha entre as tags “<body> ... </body>”, também pode ser usado dentro das tags “<p> ... </p.
INTRODUÇÃO – HTML / XHTML – ESTRUTURA HIERÁRQUICA
Exemplos: Uma tag <br /> = 1 linha; Duas tags <br /> = 2 linhas e assim por diante.
Tag negrito – “<b> ... </b>” Indica que o texto ou link entre as tags será mostrado no navegador em negrito.
Tag Itálico – “<i> ... </i>” Indica que o texto ou link entre as tags será mostrado no navegador em itálico.
Tag negrito + itálico – “<b><i> ... </i></b>” O texto será mostrado no navegador em negrito e itálico.
Prof. Celso Candido
TECNOLOGIA WEB
ADS / REDES / ENGENHARIA 16
<!-- Decodificação de Caracteres --> <?xml version = "1.0" encoding = "utf-8"?> <!-- Indica que o código será escrito no formato XHTML --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <!-- Informação para Identificação de um código XHTML para o navegador --> <html xmlns = “http://www.w3.org/1999/xhtmI”> <!-- Inicia o código XHTML-->
<head> <!-- Identifica um Cabeçalho --> <title> Bem Vindo </title>
</head> <!-- Finaliza o cabeçalho --> <body> <!-- Identifica o corpo do documento -->
<!-- Identifica o assunto da página --> <p><b><i>DISCIPLINA DE TECNOLOGIA WEB</i></b></p> <p><Como funciona:</b> <br/> <!-- Pula linha --> - O ambiente de Internet; <br/> - Protocolos; <br/> - Diversas aplicações.<br/> - Diferenciação entre ambientes cliente e servidor; <br/> - Introdução à criação de páginas Web simples; <br/> - Linguagem de marcação, script e estilos. </p>
</body> <!-- Finaliza o corpo do documento --> </html> <!-- Finaliza o XHTML -->
INTRODUÇÃO – HTML / XHTML – ESTRUTURA HIERÁRQUICA – EXEMPLO
Prof. Celso Candido
TECNOLOGIA WEB
ADS / REDES / ENGENHARIA 17
INTRODUÇÃO – HTML / XHTML – ESTRUTURA HIERÁRQUICA – EXEMPLO
Prof. Celso Candido
TECNOLOGIA WEB
ADS / REDES / ENGENHARIA 18
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> SERVIÇO DE VALIDAÇÃO DE XHTML DO W3C
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" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Prof. Celso Candido
TECNOLOGIA WEB
ADS / REDES / ENGENHARIA 19
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> SERVIÇO DE VALIDAÇÃO DE XHTML DO W3C
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.
Prof. Celso Candido
TECNOLOGIA WEB
ADS / REDES / ENGENHARIA 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.
Prof. Celso Candido
TECNOLOGIA WEB
ADS / REDES / ENGENHARIA 21
CONTINUA Próximo passo exemplos da
apostila.
Iniciando pela página 49.
Prof. Celso Candido
TECNOLOGIA WEB
ADS / REDES / ENGENHARIA 22
Aulas de Apoio 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: www.aulasprof.6te.net www.profcelso.orgfree.com
Contato: [email protected]