Réguas Uma régua (<b><hr></b>) tem o efeito de uma quebra, não tem espaço antes nem depois, e funciona como um separador. <hr> Para retirar o efeito 3D, usa-se <b>noshade</b>. <hr noshade> Parâmetros interessantes:<br> <b>size</b> -- espessura<br> <b>width</b> -- largura em pixel ou em % da janela<br> <b>align</b> -- alinhamento <hr align=right size=5 width=33%> Recomenda-se o uso da percentagem para tornar o aspecto relativo ao tamanho da janela. <hr align=center size=7 width=33%> Pode-se mudar a côr. <hr align=left size=9 width=33% noshade> Internet - 1 Formatos de imagem GIF - graphical interchange format 256 cores comprime sem perda de informação ícones e desenhos visualização de imagem aproximada em 1/4 do tempo • entrelaçamento de 4 em 4 linhas transparência • pixels da côr do fundo são ignorados pelo navegador animação • ficheiro GIF pode conter várias imagens mostradas em sequência JPEG - joint photographic experts group milhares de cores maior compressão, com perdas fotografias Internet - 2 Regras de uso Usar imagens que tenham conteúdo e não apenas para “colorir” a página simplificar as imagens reutilizar imagens manter cada documento abaixo dos 50KByte colocar índices com ligações para os documentos relacionados isolar imagens grandes ícones podem ficar na cache dividir documentos grandes reduzir tamanho, evitar dithering usando cores normalizadas colocar uma versão reduzida no documento principal especificar as dimensões Internet - 3 Marca <img> Atributos src - URL absoluto ou relativo da localização do ficheiro gráfico lowsrc - URL de uma imagem de carregamento mais rápido alt - texto a mostrar caso a imagem não o seja align - posiciona o texto relativamente à sua linha • top, middle, bottom - acerta a linha com o topo da imagem, o meio ou o fundo (varia do Netscape para o IE) • left, right - encosta a imagem e põe o texto a envolvê-la centrar - usa-se a marca <center> ou o atributo de <p> border - espessura do caixilho; 0 elimina, o que pode prejudicar a identificação dos que possuem ligações height e width - dimensão em pixel, acelera o carregamento; é usada para reservar espaço e para escalar as imagens hspace, vspace - número de pixels extra na horizontal e vertical Internet - 4 Exemplos de imagens <p align=center>Eis o <img src="Gtd.gif"> dono do carro.</p> <img src="carro.jpg" align=left alt="Carro da esquerda" border=0 width="25%"> <img src="carro.jpg" align=right alt="Carro da direita" border=5 width="25%" height=80 hspace=10 vspace=10> Especificar a largura ... a imagem. Internet - 5 Mapas <h4 align=center>Mapa</h4> <p align=center><img src="mundo16.gif" width="35%” usemap="#mundo16"></p> <map name="mundo16"> <area coords="30,70,70,140" href="AmericaLatina.html"> <area coords="90,30,150,130" href="Africa.html"> </map> Internet - 6 Mapa sensitivo O atributo usemap faz com que uma imagem fique sensível à passagem do rato definindo na marca <map> correspondente as coordenadas de certas áreas e respectivas ligações, pode usar-se a imagem como índice gráfico este processamento é da responsabilidade do cliente 0,0 90,30 30,70 70,140 150,130 Internet - 7 A marca <body> Cores fundo: bgcolor texto: text ligação: link ligação visitada: vlink ligação activa: alink Nota: mudar as cores pode confundir o leitor Fundo no atributo background indicar um URL de uma imagem pequena que é replicada automaticamente até preencher todo o fundo Internet - 8 Atributos do corpo <body bgcolor="yellow" text="red" background="mundo08.gif"> Um mau exemplo de valores para os atributos do corpo, pois obscurece a leitura. Internet - 9 Desenho do documento Três marcas para controlar posicionamento geral Espaçamento vertical, horizontal, rectangular <spacer> Colunas definidas no navegador da Netscape <multicol> Camadas (Netscape v4.0) localização precisa de páginas independentes sobrepostas <layer> - página completa <ilayer> - camada dentro da linha, relativa acrescenta nova dimensão ao HTML Internet - 10 Abertura de espaços Primeiro, um exemplo de definição de um bloco de espaço. <p align=center> Norte<br> Oeste <spacer type=block width=50 heigth=50 align=absmiddle> Leste.<br> Sul </p> Agora, espaço vertical. <hr noshade> <spacer type=vertical size=50> <hr noshade> E termina com <spacer type=horizontal size=50> espaço horizontal. Internet - 11 Colunas <h2 align=center>Texto em colunas</h2> <multicol cols=3 gutter=15 width=90%> <p>A marca <multicol> tem os atributos <i>gutter</i>- espaço entre colunas e <i>width</i>- dimensão total absoluta ou relativa à janela.<\p> <p>O efeito de várias colunas pode ser simulado com recurso a tabelas.</p> </multicol> <hr align=left size=12 width=90% noshade> Internet - 12 Camadas Uma camada é um documento HTML <layer> … </layer> atributo src vai buscar conteúdo a URL sem <head> ou <body> sem posicionamento, é incluída no fluxo normal posicionamento (top, left) relativo ao canto superior esquerdo do documento ou da camada que contenha uma camada inclusa as camadas são transparentes, a menos que se defina bgcolor ou background atributo name se for necessário referir a camada camadas sucessivas, ao mesmo nível, são postas por cima das anteriores; above, below, z-index controlam sobreposição pode-se controlar a visibilidade com JavaScript (camadas inclusas herdam as propriedades da que as contém) <ilayer> - camada dentro da linha, cujo posicionamento é relativo ao ponto do fluxo em que é definida Internet - 13 Exemplo de camadas <layer name=titulo2> <h2 align=center>Efeito de sombra</h2> </layer> <ilayer top=2 left=2 above=titulo2> <h2 align=center> <font color="gray"> Efeito de sombra </font></h2> </ilayer> <ilayer> <layer left=180, top=25> <img src="Gtd.gif" width=30> </layer> <img src="carro.jpg" width=300> </ilayer> <br>Uma camada <layer> não ocupa … para o seu sítio. Internet - 14
Download
