Apresentação do PowerPointaulasprof.6te.net/Arquivos_Aulas/01-Tecnologia_Web/...– A indicação...

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


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


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


<?xml version = "1.0" encoding = "utf-8"?>  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <html xmlns = "http://www.w3.org/1999/xhtml"> 

<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> 

CÓDIGO FONTE DE UM HTML OU XHTML

Prof. Celso Candido

TECNOLOGIA WEB


RESULTADO - COMO É MOSTRADO NO NAVEGADOR

Prof. Celso Candido

TECNOLOGIA WEB


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


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


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


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


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


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=“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


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


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 = ”http://www.w3.org/1999/xhtmI”> <head> <title> Seja bem vindo </title> </head> <body> Corpo do Documento </body> </html>

Prof. Celso Candido

TECNOLOGIA WEB


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 = “http://www.w3.org/1999/xhtmI”> <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 -->

Prof. Celso Candido

TECNOLOGIA WEB


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.

Prof. Celso Candido

TECNOLOGIA WEB


 <?xml version = "1.0" encoding = "utf-8"?>  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  <html xmlns = “http://www.w3.org/1999/xhtmI”> 

<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> 

INTRODUÇÃO – HTML / XHTML – ESTRUTURA HIERÁRQUICA – EXEMPLO

Prof. Celso Candido

TECNOLOGIA WEB


INTRODUÇÃO – HTML / XHTML – ESTRUTURA HIERÁRQUICA – EXEMPLO

Prof. Celso Candido

TECNOLOGIA WEB


<!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


<!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


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


CONTINUA Próximo passo exemplos da

apostila.

Iniciando pela página 49.

Prof. Celso Candido

TECNOLOGIA WEB


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]

Apresentação do PowerPointaulasprof.6te.net/Arquivos_Aulas/01-Tecnologia_Web/...– A indicação...

Documents

Transcript of Apresentação do PowerPointaulasprof.6te.net/Arquivos_Aulas/01-Tecnologia_Web/...– A indicação...