Transcript
2 Curso Subsequente em Manutenção e Suporte em Informática Introdução às Tecnologias Web eXtensible Hypertext Markup Language Prof. Cesar - Copyright©2008 [email protected] Roteiro • Em poucos slides, apresentar conceitos importantes relacionados à elaboração de documentos Web utilizando padrões Web – Estruturação de documentos HTML, XHTML, elementos de um documento, marcadores, atributos, vínculos hipertexto, organização de sites, boas práticas, editando os primeiros arquivos HTML, validando documentos, etc... • Apesar de breve, este módulo é, essencialmente, prático! prático – Por isso, cada assunto comentado em sala deve ser codificado e testado. – Várias práticas de laboratório/casa serão implementadas! – Nenhuma ferramenta específica é necessária • Apenas um editor de textos convencional 2 O primeiro padrão Web • Hypertext Markup Language (a.k.a HTML) provê uma maneira de o webdesigner realizar “marcações” em um arquivo de texto puro – Estas marcações dizem ao browser (navegador) informações sobre a estrutura do documento (onde estão porções de texto, como: cabecalhos, parágrafos, onde devem ser inseridas imagens, links para outras páginas, etc.) – Numa página, apenas a formatação feita através dos marcadores é reconhecida. • Um arquivo HTML não está preso a nenhum formato de arquivo especial, suporte ferramental específico ou tecnologia proprietária – O navegador simplesmente lê cada uma das marcações e toma uma decisão sobre como estruturar o conteúdo marcado 3 Até aqui… n O browser cria uma requisição HTTP para o servidor Web Através da infra-estrutura da Internet, esta requisição HTTP é enviada até o servidor Web. p Em dois Padrões Web estamos interessados: CSS e XHTML ! O servidor encontra a página HTML estática *.css Servidor Web *.html q o O servidor cria uma resposta HTTP já contendo toda a página HTML (no nosso caso) bod y { fon t-s,
…, , , , - , …
– Estes descritores (tag’s) da linguagem forçam o navegador a realizar um salto de linha (Enter) antes e depois do conteúdo marcado
• Depois, procure identificar quem serão os elementos inline “em-linha” que irão aparecer dentro do texto: ,,
![]()
,
,, … 8
Elementos (básicos) do corpo de um documento • Headings (cabeçalhos de níveis) – São elementos de bloco usados para hierarquizar o texto – Sintaxe: texto qualquer onde: N=1 até 6; – Já forçam o navegador a realizar uma quebra de linha (Enter) antes e depois do conteúdo que em que se está efetuando a marcação HTML
• Parágrafos – – –
Sintaxe: texto qualquer
(tag’s podem estar em diferentes linhas); Também forçam o navegador a realizar um salto de linha (Enter) antes e depois do texto. é ainda opcional em alguns browsers (por enquanto!)
9
Vínculos em documentos • Documentos hipertexto permitem estabelecer fluxos não-lineares de leitura (é a parte ‘HT’ na linguagem de marcação) – Um marcador especial da linguagem é reservado para espeficicar a ligação de um elemento do texto origem (chamado âncora) com o recurso de destino (pode ser uma imagem, outra página num outro servidor, um vídeo, etc.)
• Para criar links, usa-se a tag
texto
– Esta tag possui um atributo href=… usado para especificar o recurso • Quando clicado, o browser lê o valor de href no link e trata o recurso
– Já o conteúdo da tag age apenas como o texto para o link; o browser irá aplicar uma folha de estilos default (sublinhado, azul e clicável) 10
Vínculos em documentos(cont.) • Exemplo: O atributo é um par nome=“valor” usado para prover informação adicional a um elemento.
Servidor
Uma tag pode possuir mais de um atributo e a ordem dos atributos listados não é importante. Na página: Conheça nossos produtos hoje!
-
Principal Conheça nossos produtos hoje! 
Cuidado: nem todas as tags possuem atributos!
11
Uniform Resource Locator • Como os recursos são identificados na Web? – Uma URL (Uniform Resource Locator), ou um endereço na Web, é digitada no navegador com o propósito de acessar um recurso no servidor Web.
• Forma geral de uma URL típica: protocolo://nome_do_site/path_absoluto
Onde: – path_absoluto: é o caminho da pasta raiz no servidor até o recurso; – nome_do_site: é composto do nome do servidor +nome do domínio; Ex: http://promocoes.loja.com.br/setembro/anuncio.pdf servidor
domínio
path absoluto
12
Uniform Resource Locator(cont.) • A URL é a forma padronizada e integrada de identificação de qualquer recurso no domínio da Internet • Sintaxe (mais simplificada que a anterior): protocolo://máquina:porta/caminho/recurso
• Outros exemplos: – http://www.cefeturutai.edu.br/concursos2008/edital.pdf – ftp://ftp.dsc.ufcg.edu.br/pub/software/download/tweak.exe – Entre outras. 13
Uniform Resource Locator(cont.) • URL’s Absolutas versus Relativas
-
concursos.html
• Onde:
Servidor
edital.pdf
http://www.cefet .edu. http://www.cefet. edu.br/ br/concursos.html concursos.html http://www.cefet .edu. edital. .pdf http://www.cefet. edu.br/ br/usr/docs/ usr/docs/edital Concursos edital edital
Há desvantagens em se utilizar uma URL absoluta?
14
Como organizar recursos? • Antes de criarmos mais conteúdos HTML, é interessante que possamos organizar melhor nossa estrutura atual de diretórios e arquivos – Mesmo no mais modesto dos sites, é interessante tornar as coisas mais fáceis de se gerenciar (e estar preparado para possíveis mudanças futuras) – Geralmente, cada desenvolvedor (ou o webdesigner) possui uma forma particular de gerenciar um site.
• E o que temos feito? Os recursos foram inseridos na mesma pasta do servidor (imagens, html, sons, programas, etc.) Esta abordagem é viável? Até aqui, temos referenciado algo apenas pelo seu nome e extensão!
Servidor
15
Como organizar recursos?(cont.) Uma boa organização: estruturada em níveis! A raiz é conhecida como contexto da aplicação!
Servidor
Assumindo o Tomcat como container Web…
Cuidado: links precisam ser revistos! Exemplos: 
produtos Voltar à página inicial
16
URL absoluta ou relativa? • Você deve ter percebido que podemos utilizar tanto URL’s absolutas como também caminhos relativos na construção de nossas páginas. – Até aqui, usamos estes caminhos nos atributos href do descritor (links) e também src do marcador ![]()
(imagens)
• Mas, qual forma devemos dar preferência? – A literatura sugere que você utilize URL’s relativas quando desejar referenciar um recurso que está localizado dentro do seu servidor. servidor – Por outro lado, quando se deseja acessar um recurso localizado num servidor externo, externo utilize URL’s absolutas. absolutas 17
Um exemplo breve…
Laboratório : trabalhando com vínculos em páginas
18
Links internos • Documentos HTML muito extensos podem ser indexados, facilmente – É possível criar links para partes internas específicas (seções, etc.)
• A idéia é simples: iremos utilizar o atributo id para criar uma âncora de destino (uma espécie marcação) dentro de uma página longa Encontre maiores detalhes sobre a Pós-graduação
index.html
Para acessar uma parte específica de uma página, basta colocar o sinal de # junto com o nome da âncora interna
Pós-graduação
cursos.html
Dica: também pode-se colocar um link para uma âncora de destino dentro da própria página . Ex.: Topo da página
A âncora de destino se chama posgrad. O atributo id não irá afetar a aparência do texto que está dentro de ! Nada de sublinhado, azul, clicável, etc. 19
Usabilidade em vínculos • Evite criar sentenças inteiras de texto (longas) em um link – Apenas algumas poucas palavras (não mais do que 5 ou 6)! – A maioria dos usuários tendem a “escanear” a página, primeiro, pelos links. Só em seguida lêem algum conteúdo periférico (quando houver algum). – Por isso, teste suas páginas lendo apenas os links. Veja se há algum sentido!
• Forneça sempre uma “dica do link” usando o atributo title – Cuidado! Isto é um atributo. Logo, este não tem relação alguma com o descritor utilizado até aqui no cabeçalho de páginas html href=”docs/edital08.pdf” title=“Edital 08 - Concurso Professores”> Ex: Você pode <abaixar o edital</a> do concurso público para professores hoje mesmo! Obs: conforme dito antes, a ordem dos atributos não é importante!
20
Usabilidade em vínculos(cont.) • Evite criar links do tipo “Clique aqui” ou “Nesta página”! – Links assim quebram o fluxo do texto e atrapalham o processo natural de sequenciamento de leitura do visitante. Uma boa prática é embutir os links dentro do fluxo natural do texto. – Usuários tendem a ler a página primeiro pelos links! Pense nisso…
• Exemplo de um link mal projetado: Para fazer seu pedido em nossa central de atendimento, clique aqui.
• Uma forma mais elegante: Faça seu pedido em nossa central de atendimento.
8
9 21
Elementos “vazios” • Foi dito, no início deste módulo, que um elemento é dado como: tag de abertura + conteúdo desejado + tag de fechamento
• Quando um elemento não marca conteúdo algum e também não possui sua tag de fechamento, este recebe o nome de elemento vazio. vazio • Elementos vazios vistos até aqui: – Marcador de quebra de linha <br> é um marcador vazio. • Ex:
<p>uma linha <br> segunda linha </p>
– Ou ainda, o marcador de imagem: <img src=“imagem_01.jpg”> – Ou ainda, o marcador de linha horizontal: <hr> 22
Citações: linhas ou blocos de texto • Referência de citação em linha – São elementos inline usados para enfatizar um texto pequeno dentro de um parágrafo – Sintaxe: <q>um texto</q> ( irá aparecer: “um texto” ) – Não forçam o navegador a realizar nenhuma quebra de linha
• Referência de citação em blocos – São elementos de bloco usados para enfatizar um texto longo (e.g., parágrafo inteiro) – Ex: <blockquote> um texto muito longo como um parágrafo que será endentado e mantido em um bloco separado do resto do texto. </blockquote>
Dica: mantém o texto em um bloco separado dos demais e o endentará um pouco! 23
Listas ordenadas (ou não) • Em HTML, as listas são elementos de blocos que contém itens de listas – Cada item da lista é um elemento de bloco marcado com <li>…</li>
• Para montar uma lista de itens usando a linguagem HTML – Utilize <ol> com <li> para listas ordenadas (exibição de números) ou <ul> com <li> para listas não ordenadas (exibição de marcadores) <html> Ordenada ... <body> <ol> Lista de produtos: <li>Feijão</li> <li>Arroz</li> <li>Batata</li> </ol> </body> </html>
<html> Não-Ordenada ... <body> <ul> Lista de produtos: <li>Feijão</li> <li>Arroz</li> <li>Batata</li> </ul> </body> </html>
24
<pre>, <adress>, <code> e <hr> • <pre> (texto formatado) Força o navegador a levar em conta: espaços, tabulações e linhas em branco.
<pre> int função( int parâmetro ) { if( parâmetro > 0 ) printf(“%d”, parâmetro); } </pre>
Obs: o que aconteceria se digitássemos este código acima sem aplicar o descritor <pre>?
• <adress> (informa ao browser que o conteúdo é um endereço) – Sintaxe:
<adress> Mr. Zezinho da Silva Solarium Center, Sl. 303, Centro. <a href="mailto: ze@gmail.com">Envie um e-mail</a> para o Zezinho </adress>
• <code> tag lógica que indica que um código de computador existe • <hr> tag lógica que indica uma linha horizontal (e.g., aplicar uma seção com uma linha visível e sem usar um <hn>) 25
Caracteres especiais • Existem métodos de codificação apropriados para caracteres especiais. especiais – É claro que a grande maioria dos caracteres podem ser usados digitando-se o seu valor no teclado; mas o que fazer no caso de caracteres especiais (e.g.: ©, §, ®, etc.) ? – Padrão: a codificação começa com um “&” (e comercial) e termina com “;”
• Há dois métodos: referência de caractere e referência de entidade. entidade – Na referência de caractere, é utilizado um código numérico para o caracter; na referência de entidade, é utilizado um código literal (fácil de lembrar). – Você pode usar tanto o código númérico ( ® para ®) ou o nome da entidade, como ( ®) no seu documento. Mas vale lembrar que nem todos os caracteres especiais possuem um nome literal. Neste caso, sua única opção é utilizar o código numérico.
• Maiores informações em: http://www.w3schools.com/tags/ref_entities.asp 26
Frames • Recurso que permite a divisão da janela do navegador em diversas áreas, cada uma podendo conter um documento HTML diferente – Cria-se um documento de layout versus documentos de conteúdo; conteúdo
• Em documentos de layout: – Defina tags <frameset> em vez de <body> – Use apenas tags <frame> dentro de <frameset> – Defina tags <noframes> no caso do browser não suportá-los
• Em documentos de conteúdo: – Defina uma ou mais páginas HTML comums. 27
Frames(cont.) <html> <head> <title>Uso de frames
n o
<body> Desculpe, seu browser
Temos um arquivo de frames (ao lado) dividido em duas colunas. Na primeira, temos um frame que referencia um arquivo (menu.html). Na outra, um outro arquivo será exibido (conteudo.html) O atributo target de <a> irá informar onde o arquivo será exibido quando o usuário clicar nas opções do menu.
não suporta frames!</body>
n
<html>
Menu de opções:
Conteúdo
o
28
Problemas com Frames… • Note que a divisão de layouts com frames permite que partes com diferentes conteúdos possam variar, independentemente. – É ainda comum encontrar páginas html que utilizam frames (ou até mesmo tabelas, arghh!), para “amarrar” layouts e grandes áreas de exibição – Mas, imagine carregar um frame inteiro para atualizar uma (muitas vezes) grande parte da página! Bom seria se pequenos trechos de conteúdo pudessem ser transferidos e atualizados (e ainda de forma assíncrona). – O que fazer? Este cenário lhe soa familiar?
• Saiba que, nos dias de hoje, frames não são mais sugeridos pela W3C 29
AJAX! • Asynchronous Javascript And XML – Pode-se manipular todos os elementos de um documento html através de uma “árvore” de objetos, na memória, com DOM (Document Object Model) – Utilizando Javascript, você pode interagir com esta árvore de objetos • Ex: document.getElementById( “imagem2” ).getAttribute(…)
– Assim, através de funções escritas em Javascript, você pode atualizar (criar novos elementos, removê-los, alterá-los, …) facilmente.
• Uma boa referência: – Discute casos reais da indústria, como Google Maps, … 30
Um exemplo breve…
Laboratório : trabalhando com links internos
31
Em direção ao XHTML • O HTML 4.01 ainda é um padrão Web amplamente suportado pelos principais browsers do mercado – O World Wide Web Consortium (W3C) é a organização de padronização internacional que controla a evolução do HTML (e de outros padrões) – Contudo, vale lembrar que não há como garantir que um conteúdo marcado com HTML seja igualmente exibido em todos os browsers (distintos) • É comum ver páginas HTML sendo exibidas com pequenas diferenças; sobretudo quando há ocorrência de código legado e/ou inconsistências na marcação
• Entretanto, quando você escreve HTML seguindo padrões, são grandes as chances de que os browsers exibam suas páginas consistentemente 32
Em direção ao XHTML(cont.) • Além de tratar código legado de formas diferentes, browsers também divergem na hora de tratar códigos HTML escritos incorretamente – Na hora do parser do arquivo HTML, browsers decidem por aplicar distintos conjuntos de regras para exibição de páginas: X“quirks-mode”: para páginas com erros de marcação e/ou código legado Y“standard-mode”: irá assumir que a página adere a padrões (e versões)
• Se você não especificar qual padrão foi utilizado para conceber uma página complexa, browsers irão assumir e aplicar o “quirks-mode” – O conjunto de regras “quirks-mode” existe apenas para dar suporte ao código legado ainda existente, mas não há garantia de bons resultados 33
DOCTYPE • (X)HTML permitem que desenvolvedores criem diversos tipos de documentos, cada um definido por um conjunto de regras distinto – Estas regras de cada tipo são detalhadas e mantidas pela W3C na forma de uma Definição do Tipo de Documento (Document Type Definition - DTD) – A declaração DOCTYPE informa aos serviços de validação e aos navegadores modernos qual DTD foi utilizada para elaborar a marcação de sua página
• Declarações DOCTYPE são componentes-chave de páginas Web compatíveis – Portanto, a marcação de sua página não será validada a menos que seu código comece com uma declaração DOCTYPE apropriada. – Estas devem ser sempre as primeiras em um documento Web. 34
Anatomia de um DOCTYPE Informa ao browser que um tipo de documento será especificado
Esta longa string informa que foi utilizado o HTML 4.01 e que a versão é “transitional” com marcações escritas em inglês
O primeiro elemento (raiz) do documento especificado é O HTML 4.10 é público!
Observe que a marcação doctype não é um elemento HTML., face que há um ‘!’ após o ‘<‘
A url que identifica o arquivo dtd cuja especificação das regras é definida
Maiores informações sobre ‘transitional’ serão vistas adiante… O doctype pode ser escrito em apenas uma linha. Contudo, se for necessário quebrar uma linha, esta deve ser feita entre as strings
Obs.: existem diversos DTD’s que especificam outros tipos de documentos e também diferentes versões !
35
O serviço de validação da W3C • Porém, especificar um doctype não fornece garantias de que o documento foi realmente escrito com base no padrão especificado – E ainda: como garantir que o webdesigner não cometeu erros de marcação?
• O Validador W3C – É apenas um serviço gratuito e online que permite checar se um determinado documento (de fato) segue as regras definidas em um doctype – Por conseguinte, ele irá garantir que seu documento é bem formado e que todos os elementos e atributos escolhidos aderem a um padrão definido
• A url do validador: http://validator.w3.org 36
Uso do validador
37
(Oops!) Uso do validador(cont.)
38
Uso do validador(cont.)
39
Codificação de caracteres • A definição de uma codificação, no documento, informará ao browser que conjunto válido de caracteres está sendo utilizado – Ora, páginas podem ser escritas utilizando a codificação Chinesa, Árabe, …
• Para o validador W3C, é importante que este conjunto seja definido – Faremos isso com o uso da tag no cabeçalho do documento
O título do documento ...
– Ela deve ser a primeira declaração dentro do cabeçalho! • Há outros tipos de codificação: ISO-8859-1, UTF-8, etc. Obs: a lista de codificações pode ser encontrada em http://www.w3.org/International/O-charset.html
40
Versões de DOCTYPE (HTML 4.01) • Na verdade, há duas* versões de doctype em HTML 4.01, a saber: – Transitional: Transitional utilize o doctype transitional se está atualizando páginas que possuem código legado e/ou regras de marcação não obrigatórias.
– Strict: Strict utilize o doctype strict se quiser garantir que seu documento segue regras mais rígidas de formatação e utilização de elementos e atributos.
* Há, também, o doctype Frameset; ele existe apenas dar suporte aos frames (já comentados).
41
Checklist para doctype Strict (HTML 4.01) • O doctype strict, no HTML 4.01, informará ao validador W3C para observar as seguintes regras na formação de um documento: 9 O documento sempre deve começar com a definição do doctype apropriado seguido do elemento … 9 Apenas os elementos … e < body > … devem aparecer aninhados sob 9 Entre os descritores …, deve aparecer um . Apenas texto e outros elementos em-linha são permitidos em parágrafos 9Apenas o elemento
- é permitido dentro de
,,
,
- , … – Estes descritores (tag’s) da linguagem forçam o navegador a realizar um salto de linha (Enter) antes e depois do conteúdo marcado • Depois, procure identificar quem serão os elementos inline “em-linha” que irão aparecer dentro do texto: ,,
,
,, … 8 Elementos (básicos) do corpo de um documento • Headings (cabeçalhos de níveis) – São elementos de bloco usados para hierarquizar o texto – Sintaxe:texto qualquer onde: N=1 até 6; – Já forçam o navegador a realizar uma quebra de linha (Enter) antes e depois do conteúdo que em que se está efetuando a marcação HTML • Parágrafos – – – Sintaxe:texto qualquer
(tag’s podem estar em diferentes linhas); Também forçam o navegador a realizar um salto de linha (Enter) antes e depois do texto. é ainda opcional em alguns browsers (por enquanto!) 9 Vínculos em documentos • Documentos hipertexto permitem estabelecer fluxos não-lineares de leitura (é a parte ‘HT’ na linguagem de marcação) – Um marcador especial da linguagem é reservado para espeficicar a ligação de um elemento do texto origem (chamado âncora) com o recurso de destino (pode ser uma imagem, outra página num outro servidor, um vídeo, etc.) • Para criar links, usa-se a tag texto – Esta tag possui um atributo href=… usado para especificar o recurso • Quando clicado, o browser lê o valor de href no link e trata o recurso – Já o conteúdo da tag age apenas como o texto para o link; o browser irá aplicar uma folha de estilos default (sublinhado, azul e clicável) 10 Vínculos em documentos(cont.) • Exemplo: O atributo é um par nome=“valor” usado para prover informação adicional a um elemento. Servidor Uma tag pode possuir mais de um atributo e a ordem dos atributos listados não é importante. Na página: Conheça nossos produtos hoje! -Principal Conheça nossos produtos hoje!Concursos edital edital Há desvantagens em se utilizar uma URL absoluta? 14 Como organizar recursos? • Antes de criarmos mais conteúdos HTML, é interessante que possamos organizar melhor nossa estrutura atual de diretórios e arquivos – Mesmo no mais modesto dos sites, é interessante tornar as coisas mais fáceis de se gerenciar (e estar preparado para possíveis mudanças futuras) – Geralmente, cada desenvolvedor (ou o webdesigner) possui uma forma particular de gerenciar um site. • E o que temos feito? Os recursos foram inseridos na mesma pasta do servidor (imagens, html, sons, programas, etc.) Esta abordagem é viável? Até aqui, temos referenciado algo apenas pelo seu nome e extensão! Servidor 15 Como organizar recursos?(cont.) Uma boa organização: estruturada em níveis! A raiz é conhecida como contexto da aplicação! Servidor Assumindo o Tomcat como container Web… Cuidado: links precisam ser revistos! Exemplos:(imagens) • Mas, qual forma devemos dar preferência? – A literatura sugere que você utilize URL’s relativas quando desejar referenciar um recurso que está localizado dentro do seu servidor. servidor – Por outro lado, quando se deseja acessar um recurso localizado num servidor externo, externo utilize URL’s absolutas. absolutas 17 Um exemplo breve… Laboratório : trabalhando com vínculos em páginas 18 Links internos • Documentos HTML muito extensos podem ser indexados, facilmente – É possível criar links para partes internas específicas (seções, etc.) • A idéia é simples: iremos utilizar o atributo id para criar uma âncora de destino (uma espécie marcação) dentro de uma página longa Encontre maiores detalhes sobre a Pós-graduação index.html Para acessar uma parte específica de uma página, basta colocar o sinal de # junto com o nome da âncora interna
Pós-graduação
cursos.html Dica: também pode-se colocar um link para uma âncora de destino dentro da própria página . Ex.: Topo da página A âncora de destino se chama posgrad. O atributo id não irá afetar a aparência do texto que está dentro de! Nada de sublinhado, azul, clicável, etc. 19 Usabilidade em vínculos • Evite criar sentenças inteiras de texto (longas) em um link – Apenas algumas poucas palavras (não mais do que 5 ou 6)! – A maioria dos usuários tendem a “escanear” a página, primeiro, pelos links. Só em seguida lêem algum conteúdo periférico (quando houver algum). – Por isso, teste suas páginas lendo apenas os links. Veja se há algum sentido! • Forneça sempre uma “dica do link” usando o atributo title – Cuidado! Isto é um atributo. Logo, este não tem relação alguma com o descritor
utilizado até aqui no cabeçalho de páginas html href=”docs/edital08.pdf” title=“Edital 08 - Concurso Professores”> Ex: Você pode <abaixar o edital</a> do concurso público para professores hoje mesmo! Obs: conforme dito antes, a ordem dos atributos não é importante! 20 Usabilidade em vínculos(cont.) • Evite criar links do tipo “Clique aqui” ou “Nesta página”! – Links assim quebram o fluxo do texto e atrapalham o processo natural de sequenciamento de leitura do visitante. Uma boa prática é embutir os links dentro do fluxo natural do texto. – Usuários tendem a ler a página primeiro pelos links! Pense nisso… • Exemplo de um link mal projetado: Para fazer seu pedido em nossa central de atendimento, clique aqui. • Uma forma mais elegante: Faça seu pedido em nossa central de atendimento. 8 9 21 Elementos “vazios” • Foi dito, no início deste módulo, que um elemento é dado como: tag de abertura + conteúdo desejado + tag de fechamento • Quando um elemento não marca conteúdo algum e também não possui sua tag de fechamento, este recebe o nome de elemento vazio. vazio • Elementos vazios vistos até aqui: – Marcador de quebra de linha <br> é um marcador vazio. • Ex: <p>uma linha <br> segunda linha </p> – Ou ainda, o marcador de imagem: <img src=“imagem_01.jpg”> – Ou ainda, o marcador de linha horizontal: <hr> 22 Citações: linhas ou blocos de texto • Referência de citação em linha – São elementos inline usados para enfatizar um texto pequeno dentro de um parágrafo – Sintaxe: <q>um texto</q> ( irá aparecer: “um texto” ) – Não forçam o navegador a realizar nenhuma quebra de linha • Referência de citação em blocos – São elementos de bloco usados para enfatizar um texto longo (e.g., parágrafo inteiro) – Ex: <blockquote> um texto muito longo como um parágrafo que será endentado e mantido em um bloco separado do resto do texto. </blockquote> Dica: mantém o texto em um bloco separado dos demais e o endentará um pouco! 23 Listas ordenadas (ou não) • Em HTML, as listas são elementos de blocos que contém itens de listas – Cada item da lista é um elemento de bloco marcado com <li>…</li> • Para montar uma lista de itens usando a linguagem HTML – Utilize <ol> com <li> para listas ordenadas (exibição de números) ou <ul> com <li> para listas não ordenadas (exibição de marcadores) <html> Ordenada ... <body> <ol> Lista de produtos: <li>Feijão</li> <li>Arroz</li> <li>Batata</li> </ol> </body> </html> <html> Não-Ordenada ... <body> <ul> Lista de produtos: <li>Feijão</li> <li>Arroz</li> <li>Batata</li> </ul> </body> </html> 24 <pre>, <adress>, <code> e <hr> • <pre> (texto formatado) Força o navegador a levar em conta: espaços, tabulações e linhas em branco. <pre> int função( int parâmetro ) { if( parâmetro > 0 ) printf(“%d”, parâmetro); } </pre> Obs: o que aconteceria se digitássemos este código acima sem aplicar o descritor <pre>? • <adress> (informa ao browser que o conteúdo é um endereço) – Sintaxe: <adress> Mr. Zezinho da Silva Solarium Center, Sl. 303, Centro. <a href="mailto: ze@gmail.com">Envie um e-mail</a> para o Zezinho </adress> • <code> tag lógica que indica que um código de computador existe • <hr> tag lógica que indica uma linha horizontal (e.g., aplicar uma seção com uma linha visível e sem usar um <hn>) 25 Caracteres especiais • Existem métodos de codificação apropriados para caracteres especiais. especiais – É claro que a grande maioria dos caracteres podem ser usados digitando-se o seu valor no teclado; mas o que fazer no caso de caracteres especiais (e.g.: ©, §, ®, etc.) ? – Padrão: a codificação começa com um “&” (e comercial) e termina com “;” • Há dois métodos: referência de caractere e referência de entidade. entidade – Na referência de caractere, é utilizado um código numérico para o caracter; na referência de entidade, é utilizado um código literal (fácil de lembrar). – Você pode usar tanto o código númérico ( ® para ®) ou o nome da entidade, como ( ®) no seu documento. Mas vale lembrar que nem todos os caracteres especiais possuem um nome literal. Neste caso, sua única opção é utilizar o código numérico. • Maiores informações em: http://www.w3schools.com/tags/ref_entities.asp 26 Frames • Recurso que permite a divisão da janela do navegador em diversas áreas, cada uma podendo conter um documento HTML diferente – Cria-se um documento de layout versus documentos de conteúdo; conteúdo • Em documentos de layout: – Defina tags <frameset> em vez de <body> – Use apenas tags <frame> dentro de <frameset> – Defina tags <noframes> no caso do browser não suportá-los • Em documentos de conteúdo: – Defina uma ou mais páginas HTML comums. 27 Frames(cont.) <html> <head> <title>Uso de frames n o<body> Desculpe, seu browser Temos um arquivo de frames (ao lado) dividido em duas colunas. Na primeira, temos um frame que referencia um arquivo (menu.html). Na outra, um outro arquivo será exibido (conteudo.html) O atributo target de <a> irá informar onde o arquivo será exibido quando o usuário clicar nas opções do menu. não suporta frames!</body> n <html> Menu de opções:
Conteúdo
o 28 Problemas com Frames… • Note que a divisão de layouts com frames permite que partes com diferentes conteúdos possam variar, independentemente. – É ainda comum encontrar páginas html que utilizam frames (ou até mesmo tabelas, arghh!), para “amarrar” layouts e grandes áreas de exibição – Mas, imagine carregar um frame inteiro para atualizar uma (muitas vezes) grande parte da página! Bom seria se pequenos trechos de conteúdo pudessem ser transferidos e atualizados (e ainda de forma assíncrona). – O que fazer? Este cenário lhe soa familiar? • Saiba que, nos dias de hoje, frames não são mais sugeridos pela W3C 29 AJAX! • Asynchronous Javascript And XML – Pode-se manipular todos os elementos de um documento html através de uma “árvore” de objetos, na memória, com DOM (Document Object Model) – Utilizando Javascript, você pode interagir com esta árvore de objetos • Ex: document.getElementById( “imagem2” ).getAttribute(…) – Assim, através de funções escritas em Javascript, você pode atualizar (criar novos elementos, removê-los, alterá-los, …) facilmente. • Uma boa referência: – Discute casos reais da indústria, como Google Maps, … 30 Um exemplo breve… Laboratório : trabalhando com links internos 31 Em direção ao XHTML • O HTML 4.01 ainda é um padrão Web amplamente suportado pelos principais browsers do mercado – O World Wide Web Consortium (W3C) é a organização de padronização internacional que controla a evolução do HTML (e de outros padrões) – Contudo, vale lembrar que não há como garantir que um conteúdo marcado com HTML seja igualmente exibido em todos os browsers (distintos) • É comum ver páginas HTML sendo exibidas com pequenas diferenças; sobretudo quando há ocorrência de código legado e/ou inconsistências na marcação • Entretanto, quando você escreve HTML seguindo padrões, são grandes as chances de que os browsers exibam suas páginas consistentemente 32 Em direção ao XHTML(cont.) • Além de tratar código legado de formas diferentes, browsers também divergem na hora de tratar códigos HTML escritos incorretamente – Na hora do parser do arquivo HTML, browsers decidem por aplicar distintos conjuntos de regras para exibição de páginas: X“quirks-mode”: para páginas com erros de marcação e/ou código legado Y“standard-mode”: irá assumir que a página adere a padrões (e versões) • Se você não especificar qual padrão foi utilizado para conceber uma página complexa, browsers irão assumir e aplicar o “quirks-mode” – O conjunto de regras “quirks-mode” existe apenas para dar suporte ao código legado ainda existente, mas não há garantia de bons resultados 33 DOCTYPE • (X)HTML permitem que desenvolvedores criem diversos tipos de documentos, cada um definido por um conjunto de regras distinto – Estas regras de cada tipo são detalhadas e mantidas pela W3C na forma de uma Definição do Tipo de Documento (Document Type Definition - DTD) – A declaração DOCTYPE informa aos serviços de validação e aos navegadores modernos qual DTD foi utilizada para elaborar a marcação de sua página • Declarações DOCTYPE são componentes-chave de páginas Web compatíveis – Portanto, a marcação de sua página não será validada a menos que seu código comece com uma declaração DOCTYPE apropriada. – Estas devem ser sempre as primeiras em um documento Web. 34 Anatomia de um DOCTYPE Informa ao browser que um tipo de documento será especificado Esta longa string informa que foi utilizado o HTML 4.01 e que a versão é “transitional” com marcações escritas em inglês O primeiro elemento (raiz) do documento especificado é O HTML 4.10 é público! Observe que a marcação doctype não é um elemento HTML., face que há um ‘!’ após o ‘<‘ A url que identifica o arquivo dtd cuja especificação das regras é definida Maiores informações sobre ‘transitional’ serão vistas adiante… O doctype pode ser escrito em apenas uma linha. Contudo, se for necessário quebrar uma linha, esta deve ser feita entre as strings Obs.: existem diversos DTD’s que especificam outros tipos de documentos e também diferentes versões ! 35 O serviço de validação da W3C • Porém, especificar um doctype não fornece garantias de que o documento foi realmente escrito com base no padrão especificado – E ainda: como garantir que o webdesigner não cometeu erros de marcação? • O Validador W3C – É apenas um serviço gratuito e online que permite checar se um determinado documento (de fato) segue as regras definidas em um doctype – Por conseguinte, ele irá garantir que seu documento é bem formado e que todos os elementos e atributos escolhidos aderem a um padrão definido • A url do validador: http://validator.w3.org 36 Uso do validador 37 (Oops!) Uso do validador(cont.) 38 Uso do validador(cont.) 39 Codificação de caracteres • A definição de uma codificação, no documento, informará ao browser que conjunto válido de caracteres está sendo utilizado – Ora, páginas podem ser escritas utilizando a codificação Chinesa, Árabe, … • Para o validador W3C, é importante que este conjunto seja definido – Faremos isso com o uso da tag no cabeçalho do documentoO título do documento ... – Ela deve ser a primeira declaração dentro do cabeçalho! • Há outros tipos de codificação: ISO-8859-1, UTF-8, etc. Obs: a lista de codificações pode ser encontrada em http://www.w3.org/International/O-charset.html 40 Versões de DOCTYPE (HTML 4.01) • Na verdade, há duas* versões de doctype em HTML 4.01, a saber: – Transitional: Transitional utilize o doctype transitional se está atualizando páginas que possuem código legado e/ou regras de marcação não obrigatórias. – Strict: Strict utilize o doctype strict se quiser garantir que seu documento segue regras mais rígidas de formatação e utilização de elementos e atributos. * Há, também, o doctype Frameset; ele existe apenas dar suporte aos frames (já comentados). 41 Checklist para doctype Strict (HTML 4.01) • O doctype strict, no HTML 4.01, informará ao validador W3C para observar as seguintes regras na formação de um documento: 9 O documento sempre deve começar com a definição do doctype apropriado seguido do elemento … 9 Apenas os elementos … e < body > … devem aparecer aninhados sob 9 Entre os descritores …, deve aparecer um9 Diretamente sob o < body > … , devem aparecer apenas elementos de bloco (talvez a regra mais esquecida…) 42 Checklist para doctype Strict (HTML 4.01)(cont.) 9 Mantenha apenas texto e outros elementos em-linha (inline) dentro de elementos em-linha. Elementos de bloco não são permitidos! 9Mantenha elementos de bloco fora de elementos . Apenas texto e outros elementos em-linha são permitidos em parágrafos 9Apenas o elemento
- é permitido dentro de
51
Um exemplo breve…
Laboratório : migrando para o XHTML 1.0 Strict
52
Para um melhor aproveitamento… • Ao codificar exemplos mostrados em sala, procure verificar pontos de dúvidas com o professor. • Não estude apenas por slides (são apenas tópicos)! • Mantenha em dia todas as questões das listas de exercícios e práticas de laboratório. • Não se acanhe! Procure-me (ou monitor da disciplina, quando houver algum) e questione conceitos, listas, etc. • Não deixe para começar a estudar em cima da hora. 53
Bibliografia • • • • •
DAMASCENCO, Aniele. Webdesign Teoria e Prática. Prática Editora Visual Books, 2003. MEMÓRIA, Filipe. Design para Internet. Internet Editora Campus, 2005. NIEDERST, Jennifer. Aprenda Web Design. Design Editora Ciência Moderna, 2002. SCHMIDT, Paulo. Fundamentos de Auditoria de Sistemas. Sistemas Editora Atlas, 2006. Artigos e materiais na Web.
54