Hipertexto Misturar as referências (realçadas) com o texto têm a vantagem de lhes dar contexto e de facilitar uma sequência natural de consulta estes documentos designam-se de hipertexto ou hipermédia texto, áudio, imagem parada ou vídeo NMP 1998/1999 Alunos ------ ------ LEIC Disciplinas ------ Luis ------ Alunos Rui ------ ------ ------ Luis -----Rui NMP ----------Curso ----------Curso ------ ------ Internet - 1 World Wide Web Origem: vários grupos de físicos pretendiam partilhar informação multimédia integrada, sem terem de a enviar para as várias equipas acesso à informação por pedido (pull) em vez de por envio (push) no CERN (1991) definiu-se a linguagem HTML e no NCSA implementou-se o browser Mosaic serviço mais importante: em 1995 o tráfego WWW ultrapassou o de FTP responsável pela actual expansão da Internet Internet - 2 Navegadores Quem controla as normas da Web é o W3C World Wide Web Consortium em sentido estrito, WWW refere-se ao serviço de navegação que usa o protocolo http os navegadores mais comuns são o Netscape Navigator e Microsoft Internet Explorer (guerra!) para além de funcionarem como clientes WWW, também incluem clientes para os outros serviços (ftp, telnet, e-mail, gopher) transferem ficheiros ASCII ou HTML que mostram e ficheiros binários que também mostram se a aplicação ajudante (helper) ou um software adicional (plug-in ou applet) estiverem definidos, caso contrário armazenam-nos em disco interface universal, incluindo bases de dados Internet - 3 URL A localização de um qualquer recurso é definida num URL - Uniform Resource Locator serviço://computador/ficheiro serviço indica o protocolo do servidor pretendido (http, ftp, gopher, ...); se omisso, usa-se o http da Web computador é a máquina onde corre o servidor ficheiro é o nome completo do ficheiro pretendido; se omisso, usa-se habitualmente Welcome.html ou index.html para facilitar a organização das áreas de trabalho http://tom.fe.up.pt/~ei96023/casa.html corresponde de facto ao ficheiro ~ei96023/public_html/casa.html os directórios ~ei96023 e public_html têm que ter permissão x para todos e o ficheiro casa.html tem que ter permissão r Internet - 4 HTML HyperText Markup Language é uma linguagem de estruturação de documentos, incluindo recursos multimédia, e de especificação de ligações, com suporte para outros serviços, como o ftp e o gopher é um caso particular da linguagem SGML (Standard General Markup Language) utilizada em processamento de texto HTML é definida por um DTD (Document Type Definition) SGML está na versão 4.0 a concorrência entre navegadores origina o aparecimento de extensões à norma podem amarrar a um navegador e dificultar o acesso através de outros navegadores por vezes, as mais usadas acabam por ser incorporadas na versão seguinte da norma Internet - 5 HTML não é Não é uma ferramenta de processamento de texto é uma linguagem de anotação de documentos, para evidenciar a sua estrutura e conteúdo, mais do que a forma, que pode variar entre navegadores inclui contudo comandos que afectam a forma, tais como a fonte, os títulos e as mudanças de linha não se devem usar os comandos de estrutura só pelo efeito gráfico que produzem não existe notas de rodapé, sumários e índices automáticos cabeçalhos e rodapés tabuladores listas com sublistas numeradas tratamento gráfico de equações matemáticas Internet - 6 Ferramentas de desenvolvimento Necessários um editor e um navegador dois métodos de construção das páginas primeiro escrever o texto e depois marcá-lo • pode usar-se um processador de texto normal e respectivas ferramentas de correcção ortográfica, etc., e em seguida acrescentar as marcas sistematicamente (gravar em texto) • pode recorrer-se à gravação em formato HTML de documentos MS Office, embora muitas vezes seja necessário afinar o resultado • a ferramenta shareware HTML Author é útil para complementar o Word escrita simultânea do conteúdo e das marcas • editores que facilitam a geração de código HTML com visualização num navegador (HomeSite) • editores WYSIWYG só interessam se for possível chegar facilmente ao código gerado (Adobe PageMill) Internet - 7 Primeiro documento <html> <head> <title>Documento inicial</title> </head> <h2>Exemplo</h2> <body> Este documento mostra que os espaços no código fonte <!-- observação: esta observação não aparece no texto --> são ignorados pelo navegador. <p> <i>Introduzi um novo paragrafo.</i> </body> </html> Internet - 8 Estrutura de um documento Documento HTML = texto + marcas armazenado e transmitido como ficheiro de texto ASCII partes : cabeçalho (título) + corpo <html> <head> <title>Titulo</title> </head> <body> Conteúdo anotado. </body> </html> Internet - 9 Marcas As anotações HTML são constituídas por marcas <nome param1 param2=24 param3=“Valor entre aspas”> texto </nome> indiferentes a maiúsculas maior parte delimita uma região com um início e um fim • há marcas sem fim (ex: <br>) • nas marcas encaixadas convém manter o escopo hierárquico <html> <head> <title>Exemplo</title> </head> <body> <i>Fica bold <b>a meio.</i> Deixa de estar</b> bold aqui. </body> </html> Internet - 10 Função das marcas as marcas aconselham o navegador a mostrar o conteúdo segundo uma dada forma, mas não são imperativas não se trata de definir disposição de página mas de transmitir conteúdos redimensionar a janela muda o aspecto mas ver CSS os navegadores ignoram marcas desconhecidas e tentam ultrapassar erros respeitar a sintaxe para facilitar o trabalho de analisadores de texto embora não exigida, é boa prática incluir a marca <html> Internet - 11 Caracteres especiais Só parte dos 256 caracteres ISO 8859-1 são representáveis e ainda menos são normalizados entidade carácter com nome &nome; < > & º × < > & º × á ê ì õ Ü entidade carácter numérica A A á ê ì õ Ü &#nnn; • • Internet - 12 Comentários tudo entre as marcas <!-- eis o comentário --> não visualizado mas passa no View Source não está normalizado o encaixe de comentários (Netscape aceita) certos navegadores usam os comentários para incluir comandos específicos para o seu servidor que outros navegadores não entenderiam CSS inclusão de ficheiros do lado do servidor geração dinâmica de conteúdo Internet - 13 Cabeçalho <head> Descreve propriedades do documento, em marcas inclusas específicas <title> - título do documento; topo da janela; nome de bookmark • única “exigida” no cabeçalho • importante que descreva o conteúdo e eventualmente dê o contexto, pois pode-se chegar lá directamente e os indexadores muitas vezes só olham para o título <meta> - informação extra; pares nome/conteúdo (não normalizada) • <meta name=“keywords” content=“engineering, computer science”> • <meta http-equiv=“charset” content=“iso-8859-1”> faz com que o servidor envie no cabeçalho do documento MIME que vai para o navegador content/type: text/html (sempre) charset: iso-8859-1 • automatização: motores de pesquisa, navegadores Internet - 14 Divisões e parágrafos Um texto pode estar estruturado em divisões resumo, capítulos, secções, anexos, bibliografia, etc. marca <div> … </div> permite individualizar essas unidades e tratá-las sistematicamente; por exemplo extrair automaticamente os resumos de todos os documentos atributo align= left (omissão), center ou right, posiciona o texto atributo class= nome permite definir um estilo para a classe nome e usá-lo sistematicamente as marcas <div> podem estar encaixadas, para subdivisões, prevalecendo a mais interior o texto organiza-se em parágrafos <p> - muda de linha e adiciona espaço <p align=center class=citacao> … </p> <br> limita-se a introduzir uma mudança de linha </p> é muitas vezes omitido; <p> omitido no primeiro parágrafo Internet - 15 Texto estruturado <div align=right class=introducao> Introdução: O trabalho presente visa demonstrar a necessidade de os agricultores se actualizarem. </div> <hr> <div class=capitulo> Início do capítulo. <div class=resumocap align=center> Resumo: este é o primeiro capítulo <br> e trata da actualização tecnológica. </div> A utilização de … dimensão. <p align=right> Encostado à direita.<br> Este é um parágrafo fechado. </p> Encostado à esquerda por omissão. <p align=center> Novo parágrafo. </div> Internet - 16 Títulos de divisões Separação visual de partes do texto feita com títulos, linhas, espaçamentos, … seis níveis de títulos <h1>, <h2>, …, <h6> <h4> tem o tamanho da fonte normal; escolher para a menor subdivisão <h5> e <h6> muito pequenos; só para elementos extra existem os atributos align e class manter a consistência na escolha dos níveis repetir o conteúdo da marca <title> como primeiro título marcam conteúdo; podem ser mostrados de várias maneiras; não devem ser usados só para mudar fontes; fim existe sempre podem incluir texto, imagens, âncoras e mudanças de linha não devem incluir parágrafos, listas e outros blocos Internet - 17 Aparência do texto Estilos baseados no conteúdo são marcas que anotam a função especial do elemento e devem ser mostradas com aparência diferente do texto normal actualmente são pouco diferenciadas (convertidas para itálico ou negrito) sensíveis ao atributo class e têm sempre fim exemplos mais usados • • • • • <cite> - citação bibliográfica; incluir ligação, se existir; itálico <code> - código para computador; monoespaçado <dfn> - definição; útil para produzir índices; <em> - enfatizar; itálico <strong> - forte; negrito Internet - 18 Aparência do texto Estilos físicos são marcas que indicam directamente o aspecto pretendido, mas não transportam significado redefiníveis na classe exemplos • • • • • <b>, <i>, <s>, <u> - negrito, itálico, traçado, sublinhado <big>, <small> - tamanho relativo; fonte seguinte; encaixável <blink> - pisca; realça e aborrece <sub>, <sup> - índice, expoente <tt> - monoespaçado Internet - 19 Exemplo de fontes Internet - 20 Código do exemplo <h2 align=center>Fontes</h2> <h3>Modelo</h3> <div> O HTML usa um esquema de <dfn>fontes virtuais</dfn> com <em>7 tamanhos</em>. O tamanho por omissão é o <strong>3</strong>. A relação entre tamanhos adjacentes é de 20%. A especificação de tamanhos pode ser absoluta (1..7) ou relativa (<code>size=+1</code>). </div> <h3>Uso</h3> <div> Realçar uma expressão com <big>a marca <big><big></big> produz</big> uma variação relativa encaixada. <br> Diminuir tamanho do texto normal com <basefont size=-1> <basefont size=-1> passa para 2. Aqui, <big><big> fica com 3,</big> pois a variação é relativa. <br> Realçar texto com <font size=7><font size=7></font> indica tamanho absoluto. Este é o <small>mínimo e não adianta tentar <small>reduzir</small> mais</small>. <basefont size=+1> Os expoentes <b>x</b><sup>2</sup> e índices <b>x</b><sub><small>2</small></sub> não mudam de tamanho automaticamente. </div> Internet - 21 Fontes Tamanho de uma fonte marca <basefont> (muitas vezes sem fim) • <basefont size=+2><basefont size=+1> aumenta o tamanho 3 níveis marca <font> (sempre com fim) • <font size=+2><font size=+1> ... </font></font> só aumenta 1 nível, porque é sempre relativo à fonte base <big> e <small> são encaixáveis Escolha de fonte <font face= "Times New Roman, ZapfDingbats, Courier New"> • a fonte escolhida é a primeira que exista no sistema do navegador Côr <font color=yellow>Sol</font> ou <font color=#FFFF00>Sol</font> #FFFF00 significa vermelho e verde no máximo (FF), sem azul (RGB) Internet - 22 Côr Nomes normalizados aqua (#00FFFF) gray (#808080) navy (#000080) silver (#C0C0C0) black (#000000) green (#008000) olive (#808000) teal (#008080) blue (#0000FF)lime (#00FF00) purple (#800080) yellow (#FFFF00) fuchsia (#FF00FF) maroon (#800000) red (#FF0000) white (#FFFFFF) Mapa de cores normalizado cada côr primária (vermelho, verde e azul) só pode tomar 6 valores de brilho (00, 33, 66, 99, CC, FF) o mapa contém apenas 216 cores (6x6x6), mas que não precisam de ser convertidas: convém usar só estas, para garantir consistência em navegadores diferentes Internet - 23 Controlo de quebras <br clear=left> <nobr> não muda de linha, mesmo que ultrapasse a margem <wbr>, dentro de um <nobr> dá a oportunidade de quebrar, se já se tiver ultrapassado a margem <pre> ... </pre> muda de linha, mas só recomeça abaixo de qualquer imagem ou tabela que esteja encostada à esquerda respeita os espaçamentos e quebras do texto preformatado útil para quadros e código; monoespaçado interpreta marcas que não impliquem quebras (fontes, ligações) <center> ... </center> principal uso: centrar imagens e tabelas outros usos: usar atributo align=center noutras marcas Internet - 24 Exemplo de quebras <h4 align=center>Quebras</h4> <p>Este texto aparece antes da imagem, a qual vai ser alinhada à esquerda. <br> <img src="Gtd.gif" align=left> Esta frase está na mesma linha da imagem<br> pelo que fica à sua direita. <br clear=left> O parâmetro de limpeza faz ultrapassar a imagem. </p> <pre width=30> Este bocado de texto tem muitos espaços e mudanças de linha. </pre> Internet - 25
Download
