internet - 1 hipertexto m misturar as referências (realçadas) com o texto têm a vantagem de lhes...
TRANSCRIPT
Internet - 1
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
LEIC Disciplinas
------
------
NMP
------
NMP 1998/1999
------
------
Alunos
------
Alunos
------
Luis
Rui
------
Luis
------
------
Curso
------
Rui
------
------
Curso
------
Internet - 2
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 - 3
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 - 4
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 - 5
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 - 6
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 - 7
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 - 8
Primeiro documento
<html><head><title>Documento inicial</title></head><h2>Exemplo</h2><body>Este documento mostraque
os espaços no código fonte <!-- observação: esta observaçãonão aparece no texto -->são ignorados pelo navegador.<p><i>Introduzi um novo paragrafo.</i></body></html>
Internet - 9
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 - 10
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 - 11
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 - 12
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 &#nnn;A A • •
Internet - 13
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 - 14
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 - 15
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 - 16
Texto estruturado<div align=right class=introducao>Introdução: O trabalho presente visa demonstrar anecessidade 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 - 17
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 - 18
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 - 19
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 - 20
Exemplo de fontes
Internet - 21
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 - 22
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 - 23
Côr
Nomes normalizadosaqua (#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 - 24
Controlo de quebras
<br clear=left> muda de linha, mas só recomeça abaixo de qualquer imagem
ou tabela que esteja encostada à esquerda
<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> 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 - 25
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>