A maioria das páginas da Web contém gráficos. Ele permite que você apresente informações de forma clara e colorida. Em muitos casos, é melhor mostrar uma imagem do que fornecer uma descrição de texto longa.

Existem duas maneiras de colocar gráficos em uma página:

• inserir fotos individuais;
• preenchendo o fundo com uma imagem.

Em qualquer caso, o gráfico é retirado do arquivo.

Inserindo gráficos

Uma imagem gráfica de um arquivo de formato gráfico é inserida na página usando a tag (do inglês, imagem - imagem) especificando o endereço do arquivo como um argumento para o atributo SRC:

< IMG SRC = "адрес_графического_файла" >

O endereço do arquivo de imagem é um URL ou um nome de arquivo, possivelmente com um caminho. Por exemplo, para exibir o arquivo gráfico logotip.jpg, escreva a tag:

< IMG SRC = "logotip.jpg" >

Para aumentar a taxa de transferência de uma imagem gráfica em uma tag você pode usar o atributo (opcional) LOWSRC, que leva o endereço de um arquivo gráfico como argumento. Você pode criar dois arquivos gráficos: um (por exemplo, seja o arquivo logotip.jpg) contém a imagem obtida de alta resolução e o outro (por exemplo, logotip.gif) é uma imagem de baixa resolução. Então a tag é:

< IMG SRC = "logotip.jpg" LOWSRC = "logotip.gif" >

... instruirá o navegador a baixar o arquivo logotip.gif primeiro e, em seguida, substituí-lo pelo arquivo logotip.jpg quando for recebido.

Outra forma de acelerar o carregamento dos gráficos é definir o tamanho da área retangular em que o gráfico será colocado usando os atributos LARGURA(largura) e ALTURA(altura) medida em pixels. Se você especificar esses atributos, o navegador primeiro alocará espaço para os gráficos, preparará o layout do documento, exibirá o texto e só então carregará os gráficos. Observe que o navegador encolhe ou estica a imagem para caber nos quadros do tamanho especificado. Um exemplo de especificação do tamanho de uma imagem:

< IMG SRC = "logotip.gif" WIDTH = 40 HEIGHT = 20 >

Os gráficos são geralmente usados ​​em conjunto com o texto, portanto, surge a tarefa de alinhar o texto e os gráficos. Esta tarefa é realizada usando o atributo ALINHAR marcação usando vários argumentos. Por exemplo, podemos querer que o texto flua ao redor da imagem para a direita ou esquerda. Normalmente, a imagem é incorporada perto do texto, o que pode ser feio. Para evitar isso, você pode definir margens vazias ao redor da ilustração. Os campos são criados usando atributos VSPACE para as margens superior e inferior e НSPACE para margens laterais na tag ... Os argumentos para esses atributos são especificados como números que especificam o tamanho das margens em pixels. Para cancelar o fluxo de texto em torno dos gráficos, use a tag
.

A seguinte tag define o fluxo de gráficos do arquivo logotip.jpg para a direita (a imagem estará à esquerda do texto):

< IMG SRC = "logotip.jpg" ALIGN = LEFT >

Se você deseja posicionar a imagem à direita do texto, você precisa do atributo ALINHAR atribuir um argumento DIREITO:

< IMG SRC = "logotip.jpg" ALIGN = RIGHT >

Para definir os campos ao redor da imagem, você precisa escrever uma tag como:

< IMG SRC = "logotip.jpg" ALIGN = LEFT HSPACE = 20 VSPACE = 10 >

Aqui, os números 20 e 10 determinam os tamanhos dos campos.

Vamos considerar um exemplo de compartilhamento de gráficos e textos. Abra o Bloco de Notas ( editor de texto Bloco de notas) Windows. Escreva o código HTML nele usando as tags discutidas acima. Abaixo está um programa que produz algum texto e gráficos. Qualquer um dos arquivos que você possui pode ser usado como um arquivo gráfico. Isso usa o arquivo logotip.gif.

< HTML >

< HEAD >

< TITLE >Exercício 1< / TITLE >

< / HEAD >

< BODY BGCOLOR = "YELLOW" >

< IMG SRC = "logotip.gif " ALIGN = LEFT >

< H1 >O texto contorna os gráficos à direita< / H1 >

Arroz. 657... O texto envolve a imagem à direita

Amplas oportunidades para o posicionamento preciso de imagens (bem como de outros elementos) na página fornecem mesas e estilos... Esses Elementos HTML será discutido mais tarde. Por exemplo, você pode definir uma tabela sem quadros visíveis e colocar imagens, textos e outros elementos nas células dessa tabela.

Este tutorial mostrará como decorar uma página da web adicionando elementos gráficos a ela. Vamos nos familiarizar com os formatos de imagem mais comuns, descobrir qual tag é usada para adicionar imagens à página, lidar com legendas alternativas e alinhamento de texto e gráficos. Também conheceremos os principais atributos das imagens e aprenderemos como ajustar a largura e altura da imagem. A seguir, algumas palavras sobre o uso de imagens como links e o que são miniaturas de imagens. Finalmente, existem algumas dicas gerais para usar gráficos em uma página da web.

Adicionar imagens a uma página da web
Se a página da web contém apenas informações textuais, pode parecer interessante para alguém, graças às informações apresentadas nela, mas é improvável que alguém se sinta tentado a chamá-la de atraente. É muito fácil adicionar imagens a uma página da web. Adicionar gráficos que podem dar à página uma aparência profissional requer algum conhecimento. A que, de fato, se dedica a lição de hoje.

Os dois formatos gráficos mais comumente usados ​​na Internet são GIF e JPEG. O formato desenvolvido e nomeado pelo Joint Photographic Experts Group (JPEG) é normalmente usado para armazenar imagens com transições suaves de cores, como fotografias.

Quase todos os outros elementos gráficos são salvos em GIF (Graphics Interchange Format), um formato para troca de dados gráficos. Atualmente, existe outro novo formato gráfico que está ganhando popularidade: PNG (Portable Network Graphics). Espera-se que eventualmente substitua o formato GIF. No entanto, não se apresse em salvar novamente todos os seus arquivos gráficos neste formato, pois ele ainda não é compatível com todos os navegadores.

Todas as imagens são adicionadas à página da web usando a mesma tag chamada tag de origem da imagem ... Provavelmente agora você mesmo pode determinar que esta entrada consiste na própria tag , seu atributo (scr) e o valor deste atributo (local). No entanto, como é obrigatório usar o atributo scr, é mais conveniente pensar nessa entrada como uma única tag genérica. Você provavelmente também notou que a tag de origem da imagem não tem uma tag de finalização correspondente. Esta é uma tag separada e independente, então lembre-se de adicionar uma barra de fechamento no final dela: .

# 1058; D XHTML 1.0 Transitional // PT "" http://www.w3.org/TR/xhtml1/DTD/xhtml1/transitional.dtd "> Primeiras imagens f> Esta imagem foi adicionada à minha primeira página da web.>

Adicionando rótulos alternativos
Ao navegar na Internet, você provavelmente notou várias inscrições exibidas quando você passa o ponteiro do mouse sobre algum elemento gráfico de uma página da web. Essas inscrições geralmente indicam algum tipo de Informações adicionais sobre a própria imagem ou sobre a área da página que ela ocupa.

O código HTML abaixo mostra como o atributo alt é adicionado dentro da tag. ... Como o atributo src, o atributo alt informa ao navegador da web algumas informações adicionais sobre a imagem e também pode ser usado em conjunto com a tag .

O atributo alt define um texto alternativo para o elemento gráfico adicionado à página da web. Esse texto é denominado alternativo porque pode ser exibido na tela como uma alternativa à própria imagem. O atributo alt tem outro propósito muito importante. Muitos visitantes da Internet que usam canais de baixa taxa de dados podem instruir seus navegadores a não baixar ou exibir informações gráficas. Isso permite que eles acelerem o carregamento de páginas da web em seus computadores.

Além disso, lembre-se de que nem todos os navegadores são capazes de exibir gráficos em suas janelas. Por exemplo, o navegador Lynx não oferece suporte a esse recurso. Assim, o atributo alt permite que o web designer tenha certeza de que, se um visitante de sua página da web não vir uma imagem em sua tela, ele poderá pelo menos ver as informações de texto adicionadas a essa imagem.

Embora o atributo alt possa ser definido para cada tag , tenha cuidado para não atribuir mensagens de texto inadequadas a alguns elementos gráficos. Por exemplo, não faz sentido adicionar rótulos de texto alternativos a vários elementos do design externo de uma página da web. Para evitar esses erros, você pode definir o atributo alt de tais elementos com um valor vazio (alt = ""). Se você não definir nenhum outro atributo, o navegador renderiza a imagem em seu tamanho original, alinhando a borda superior da imagem com a borda superior da linha de texto adjacente. Você pode alterar esses dois parâmetros usando tags de folha de estilo.

Atributos de imagem
Para tag atributos são fornecidos para redimensionar a imagem. Alguns desses atributos estão listados abaixo.
altura- Especificado em pixels ou porcentagem - Especifica a altura da imagem
largura- Especificado em pixels ou porcentagem - especifica a largura da imagem.

Ajustando a altura e largura da imagem
As dimensões da imagem colocada na página da web podem ser especificadas usando os atributos de altura e largura. Os valores desses atributos são especificados como contagens fixas de pixels ou como uma porcentagem em relação ao tamanho da página. Dê uma olhada no código HTML abaixo. A primeira tag define as dimensões da imagem original, que você já viu nas imagens anteriores deste tutorial, em 60 pixels verticalmente e 60 pixels horizontalmente. A segunda tag define a largura da mesma imagem em 6% da largura da página e a altura em 10% da altura da página. A figura mostra como essas duas imagens aparecem em uma janela do navegador.

Ao exibir a imagem em sua janela, o navegador é igualmente bom em lidar com os valores definidos em pixels e porcentagens. Esteja ciente, no entanto, de que os computadores dos visitantes da sua página da web podem ser configurados para uma resolução de tela diferente da instalada para seu monitor. O que se segue disso? Por exemplo, o monitor tem resolução de 800x600. No exemplo anterior, a imagem adicionada à página da web foi definida para uma largura de 6% da largura da página, o que seria de 48 pixels nesta resolução. Se você visualizar a mesma imagem em um monitor com resolução de 1024x800, os 6% especificados da largura da página corresponderão a uma largura igual a 61 pixels.

Ao redimensionar a imagem, não se esqueça de definir os dois valores correspondentes à sua altura e largura. Se você alterar apenas um desses valores, a própria imagem será esticada vertical ou horizontalmente na tela. Opção alternativa consiste em ajustar o tamanho da imagem por meio de um editor gráfico.

Você pode criar a ilusão de mais carregamento rápido Imagens. Independentemente de a imagem ser redimensionada ou não, sempre inclua os valores dos atributos de altura e largura, pois eles fornecerão ao navegador informações importantes sobre quanto espaço deve ser alocado na página para acomodar a imagem. Nesse caso, o navegador poderá designar o espaço necessário para a imagem e continuar construindo outros elementos da página sem interromper o download da própria imagem. Isso dá a impressão de que a página está carregando mais rápido porque seus visitantes não precisam esperar até que a imagem seja totalmente carregada para finalmente ver as outras informações apresentadas na página.

Se você realmente deseja que a imagem caiba exatamente na quantidade certa de espaço na largura da página, use porcentagens. Nesse caso, na tela de qualquer monitor, a imagem ocupará a mesma parte da página que na sua tela. Se você deseja que a resolução da imagem (tamanho do pixel) permaneça constante, use os valores dos pixels.

Alinhar texto e gráficos
Atributo alinhar tag Permite alinhar a imagem à direita (valor à direita) ou à esquerda (valor à esquerda) borda da linha de texto. Exemplos de uso deste atributo são mostrados na figura.

O mesmo atributo pode ser usado para alinhar a imagem verticalmente (novamente, em relação à string de texto). Ele pode assumir três outros valores superior, inferior e central. Se o atributo de alinhamento estiver definido para o topo, a parte superior da imagem será alinhada com a parte superior de qualquer texto circundante. Se o atributo de alinhamento estiver definido como inferior, a parte inferior da imagem será alinhada com a parte inferior do texto ao redor. Se o atributo align for definido como center, o centro da imagem será alinhado ao centro da linha de texto.

Usando imagens como links
As imagens não são boas apenas para o design de páginas da web. Eles podem ser usados ​​com sucesso como hiperlinks para outros documentos. Em HTML, isso é fácil porque as imagens se transformam em hiperlinks exatamente da mesma maneira que as caixas de texto. Para fazer isso, você também deve aplicar uma tag, envolvendo um elemento da página da web que deve se tornar um link para outro documento. Assim, se a transição para um hiperlink deve ser realizada após clicar em alguma imagem, é necessário incluir a tag desta imagem na tag.

a>

V este caso, depois que um visitante da página da web passa o mouse sobre a imagem, a mensagem de texto “Este é o meu autorretrato!” é exibida ao lado do cursor. Após clicar na imagem, será aberto o documento DOC2.htm, que é indicado pelo hiperlink.

Miniaturas de imagens
Outro uso comum do recurso de hiperlinks do HTML é usar algumas imagens para navegar para outras. Para que serve? O fato é que muitas vezes o tamanho das imagens que você deseja publicar em uma página da web é muito grande, e não há certeza de que os visitantes terão paciência para esperar até que terminem de carregar. Nesses casos, é criada uma cópia em miniatura da imagem original, chamada de miniatura, que o navegador irá carregar com muito mais rapidez. Se o visitante se interessar pela imagem e quiser fazer o download de uma cópia completa, basta clicar nesta miniatura. Essa é a aparência dos códigos HTML correspondentes.

a>

Como você pode ver, clicar na imagem thumbnail.jpg abre outro arquivo de imagem (image.jpg). Uma string de texto, especificada como o valor do atributo alt, informa ao visitante como abrir a imagem principal.

Segredos para usar imagens com sucesso
As imagens são interessantes e atraentes, carregam muitas informações visuais e são muito fáceis de adicionar às páginas da web, mas você ainda deve seguir algumas das seguintes regras se realmente deseja criar um site que se tornará popular entre os usuários da Internet.

Quão mais tamanhos arquivo de imagem, mais tempo levará para baixá-lo para o computador do usuário. Uma vez que a maioria dos visitantes da Internet ainda usa canais de baixa comunicação para acessar a rede Taxa de transferência, os tamanhos dos arquivos baixados ainda são de fundamental importância para eles. Lembre-se de manter isso em mente e tente manter as imagens o mais pequenas possível em suas páginas da web.

Não é apenas o tamanho do arquivo da imagem individual que importa, mas também o tamanho total do arquivo de todo o documento HTML. Quanto mais imagens forem adicionadas à página da web, mesmo que sejam pequenas, maior será o tamanho do arquivo do documento final. Executar antevisão sua página em navegadores diferentes e estime quanto tempo levará para cada navegador carregá-la.

Porque o atributo alt é tão importante (é recomendado que você o defina para cada tag , tenha cuidado ao usá-lo. Certifique-se de que o conteúdo mensagem de texto sempre corresponde à própria imagem, caso contrário, os visitantes da sua página podem ficar confusos. A mesma observação se aplica a direção oposta: Certifique-se de combinar as imagens com as informações de texto fornecidas na página da web. A fotografia de um avião seria apropriada em um site de viagens aéreas e completamente redundante em um site de vida selvagem.

Você pode encontrar muitas imagens interessantes na Internet e salvá-las facilmente no seu computador. No entanto, muitas dessas imagens são protegidas por direitos autorais. Se você encontrar uma imagem de que goste em um site comercial, veja se há alguma mensagem de direitos autorais lá e se essa imagem está disponível para uso gratuito.

Se a imagem na página da web não tiver direitos autorais, você pode copiá-la para o seu computador. Para fazer isso, basta clicar com o botão direito do mouse na imagem e selecionar o comando Salvar imagem como no menu que é aberto. Depois de salvar a imagem em seu computador, você pode usá-la como qualquer outro desenho.

Trabalho prático número 2

Inserindo imagens em um documento HTML

Objetivo do trabalho. Familiaridade com tags básicas para inserir imagens em um documento HTML, aprendendo sobre atributos para transformar imagens em um documento.

Literatura. Notas da aula.

3. Preparação para o trabalho. Estude as notas de aula sobre o tema "Gráficos".

Lista de equipamento. Um computador.

Exercício.

5.1. Aprenda sobre tags básicas para inserir imagens em um documento HTML.

5,2 Explore os atributos básicos para transformar imagens.

5,4 Aprenda a decorar imagens em páginas da web.

A ordem do trabalho.

6.1. Inserindo imagens em uma página da web.

1. Abra Programa de pintura e crie três fotos de acordo com o exemplo: cada foto está em um arquivo separado.

Fig. 1 Fig. 2 Fig. 3

Salve esses arquivos com os nomes bloc1.gif, bloc2.gif, bloc3.gif em sua pasta.

2. Abra o bloco de notas do editor de texto e crie uma página da web de acordo com o exemplo:

Código da página da web:

algoritm.html.

6.2. Criação de linhas horizontais e outros objetos.

1. Abra o bloco de notas do editor de texto e crie 2 páginas da web de acordo com o exemplo:

Fragmento do código da página da web:

3. Salve o documento recebido em sua pasta, dando um nome ao arquivo linii.html.

4. Abra o seu navegador Internet Explorer... Visualize a página da web resultante nele.

5. Crie uma segunda página da web.

Fragmento do código da página da web:

6. Salve o documento recebido em sua pasta, dando um nome ao arquivo list.html.

7. Corra navegador de internet Explorador. Visualize a página da web resultante nele.

Criação de um mapa de imagem e inserção de uma linha rasteira.

1. Crie uma página da web usando a imagem a seguir. Ele está localizado na área de trabalho da pasta Trabalho prático por HTML.

2. Crie um mapa de imagem para que, quando você passar o mouse sobre um dispositivo específico em seu computador, seu nome seja exibido.

3. Na mesma página, crie uma linha rasteira:

Você gosta de jogar jogos de computador, adoro programar-se!

4. Salve o documento recebido em sua pasta, dando um nome ao arquivo carta.html.

5. Inicie o navegador Internet Explorer. Visualize a página da web resultante nele.

7.1. arquivos algoritm.html, linii.html, list.html, carta.html em sua pasta.

8. Perguntas do teste.

8,1 Qual tag é usada para inserir imagens em um documento HTML?

8,2. Qual atributo permite que você especifique o nome do arquivo de imagem?

8,3. Quais atributos permitem definir o tamanho da imagem?

8.4. Qual atributo permite definir a posição da imagem em relação ao texto ao redor?

8,5. Qual atributo permite definir a espessura da borda ao redor da imagem?

8,6. ... Quais atributos determinam a quantidade de espaço livre à esquerda, direita, acima e abaixo da imagem?

8,7. Qual tag é usada para criar mapas de imagens? Quais atributos são usados?

8,8. Qual tag é para criar uma linha de rastreamento?

Aplicativo.

Gráficos

Colocação de gráficos em uma página da web. Formatos de arquivos gráficos

Os dois formatos gráficos mais populares na Internet são GIF e JPEG.

Normalmente eles usam:

JPEG - para fotografias e imagens com gama de cores muito complexa com transições de cores suaves (na extensão é escrito como JPG).

GIF - para logotipos, legendas, títulos, imagens com bordas de cores claras.

Formato GIF

As imagens neste formato suportam 256 cores. O formato GIF tem três características adicionais:

Animação. Usando um editor de GIF animado, é fácil montar um simples "desenho animado": desenhe quadros individuais, ajuste o tempo de atraso na sequência de exibição, "faça um loop do filme" ou mostre os quadros apenas uma vez. Quando a animação está pronta, ela é gravada no disco como um arquivo GIF normal. Mas este arquivo contém não um, mas uma coleção inteira de GIFs e várias informações de configuração.

Em HTML, não há distinção entre especificar um GIF simples ou um GIF animado.

Gráficos transparentes. O formato GIF permite que uma ou mais cores em uma imagem sejam declaradas transparentes. Isso ajuda a eliminar as ilustrações estritamente retangulares e a ajustar o desenho ao documento de uma forma mais atraente:

Varredura entrelaçada. Usado para GIFs grandes. A ilustração é dividida em quatro partes, o tamanho da imagem original. A primeira parte contém 1, 5, 9, etc. as linhas da imagem original. A segunda é a 2ª, 6ª, 10ª, etc. O terceiro é o 3º, 7º, 11º, etc. Quarto - 4º, 8º, 12º, etc.

O navegador constrói na tela primeiro a primeira parte da imagem, depois a terceira e a quarta. O efeito do desenvolvimento gradual da imagem é obtido.

Formato JPEG

Este formato foi desenvolvido especificamente para a transferência de fotografias. Suporta milhões de cores e produz imagens de altíssima qualidade.

Obviamente, a alta qualidade se reflete nos tamanhos dos arquivos. Mas Formato JPEG tem uma peculiaridade: no editor JPG, ao gravar em disco, você pode especificar o grau de qualidade que deseja e, assim, balanceando na barra “tamanho do arquivo de qualidade”, consegue o compromisso desejado. Na verdade, se você deixar apenas 10.000 de um milhão de cores em uma foto digitalizada, substituindo o resto das cores por outras próximas, será quase impossível detectar tal substituição a olho nu, e o tamanho do arquivo será significativamente reduzido.

O formato JPEG oferece suporte a um modo semelhante ao GIF entrelaçado. Mas, ao contrário do GIF, a divisão em partes não ocorre por linhas, mas pelo algoritmo para extrair partes em tamanho real da imagem. Além disso, cada parte seguinte tem uma qualidade superior à anterior. JPEG com essa propriedade é chamado de progressivo.

Elemento

Elemento usado para inserir uma imagem gráfica no corpo do documento.

Sintaxe:

Além disso, o elemento suporta vários atributos que definem a posição da imagem em relação ao texto e conteúdo circundante Rede páginas em geral. A imagem pode ser alinhada à esquerda, direita, superior ou inferior da linha, ou posicionada no centro da janela.

Atributos:

src(aponta para o arquivo gráfico especificando seu URL).
Sintaxe:
alt(em vez da imagem, exibe um texto alternativo do tipo, o logotipo da empresa é desenhado aqui).
Sintaxe:
alinhar(define a posição da imagem na janela e seu alinhamento, pode assumir os seguintes valores: principal- ao longo da borda superior, fundo- ao longo da borda inferior, meio-no centro, direito-na direita, deixou-deixou).

Sintaxe:

largura(define a largura da área em pixels alocada na janela para a imagem).

Sintaxe:

altura(define a altura da área em pixels alocada na janela para a imagem).

Sintaxe:

hspace(especifica o espaço em branco em pixels à direita e à esquerda da imagem).
Sintaxe:
fronteira(define a largura da borda ao redor da imagem em pixels).
Sintaxe:
vspace(define o espaço em branco em pixels acima e abaixo da imagem).
Sintaxe:
ismap(permite o uso de imagens, partes das quais estão vinculadas a links e permitem transições. Essas imagens são chamadas de mapa MAP, elas são usadas em conjunto com um elemento ... Neste caso, o servidor responde a um clique no mapa).
Sintaxe:

usemap ( permite o uso de imagens, algumas partes das quais estão associadas a mapas, elas são usadas em conjunto com o elemento

Mapas de imagem.

Elemento

Elemento

Sintaxe:

Elemento

Elemento especifica as áreas ativas do mapa que você pode clicar para vincular. O item não possui tag de finalização. É conveniente trabalhar com imagens de mapas em aplicação padrão para Windows - o editor do Paint, para o qual a imagem deve ser transformada em formato BMP. Usando a grade nos modos de zoom pressionando Ctrl + G e escolhendo a ferramenta Seleção, quando o ponteiro do mouse muda para uma cruz fina, as coordenadas do cursor podem ser determinadas com a precisão de um pixel. Esta precisão pode ser muito útil ao especificar as coordenadas das áreas ativas do mapa. Elemento suporta vários atributos:

Sintaxe: Url ">

alt(define o texto alternativo para navegadores que não suportam este item).
Sintaxe:

título(define um texto alternativo para navegadores que aparece quando você passa o mouse sobre este elemento).

Sintaxe:

forma(define a forma da área ativa no mapa e suas coordenadas, ele pode assumir os seguintes valores: coordenadas do "círculo" = X, Y, R, onde X, Y, R - coordenadas do centro do círculo e seu raio , "poly" coords = X1, Y1, X2, Y2, X3, Y3 ..., onde X1, Y1, X2, Y2, X3, Y3 ... são as coordenadas dos vértices do polígono, se o polígono for um retângulo, então é suficiente especificar seus vértices superior esquerdo e direito inferior "retângulo" (coordenadas = X1, Y1, X3, Y3).
Sintaxe: círculo"coords = X, Y, R >

Imagem de exemplo - Mapas:

O segundo componente mais importante do preenchimento de páginas da Web após o texto será, sem dúvida, design gráfico. São vários tipos de desenhos, fotografias e talvez até videoclipes. Também podemos usar trilha sonora para exibir páginas da web.
Começaremos colocando os gráficos. Os navegadores só podem exibir três tipos de arquivos gráficos. Esses são arquivos GIF, JPEG e PNG. Os arquivos GIF permitem que você crie imagens animadas. Arquivos JPEG são comumente usados ​​para armazenar imagens fotográficas. Recém-emergido Formato PNG permite que você combine boa qualidade imagens e uma pequena quantidade de arquivo gráfico. Mas depois que a imagem foi compactada em um arquivo gráfico, ela ainda precisa ser incorporada em uma página da Web de alguma forma.

Para isso, a tag é aplicada com muitos parâmetros. Esta tag não possui um par final, uma vez que não cria nenhum escopo para a regra de exibição, apenas incorpora uma imagem gráfica no conteúdo da página da web. Na verdade, uma imagem gráfica também pode ser um hiperlink ou, até mesmo, ocultar vários hiperlinks atrás de si mesma, mas falaremos sobre hiperlinks na próxima seção deste capítulo, mas por enquanto vamos descobrir as regras de uso da tag .

O atributo principal e obrigatório da tag é o atributo src. O valor deste atributo é o endereço do arquivo gráfico a ser inserido, ou, para ser mais preciso, sua URL. Se o arquivo gráfico estiver localizado no mesmo servidor Web, basta anotar o nome completo do arquivo, incluindo o caminho para ele nos subdiretórios, ou seja, se o diretório de imagens estiver localizado na mesma pasta dos arquivos HTML com Páginas da Web. Imagens, a tag de inserção de imagem gráfica terá a seguinte aparência:

Neste exemplo, estamos usando uma imagem GIF encontrada em um arquivo chamado pictl.gif, que por sua vez está localizado em um diretório chamado imagens. Deve-se notar que as barras são barras inclinadas na direção oposta do que quando usadas em caminhos de arquivos de sistemas operacionais das famílias DOS e Windows. O fato é que os servidores Web eram originalmente baseados no sistema operacional Unix, que suporta o sistema de arquivos com essas barras. Agora, não importa qual sistema operacional suporta o servidor que hospeda o site, todos os caminhos são registrados da mesma forma e tratados corretamente. Programas servidor.

No início do desenvolvimento da WWW, os navegadores exibiam apenas informações de texto, nenhum gráfico era compatível. Agora eles praticamente não são encontrados, mas todo navegador tem a capacidade de desabilitar o download de gráficos. Portanto, você deve sempre usar uma representação textual alternativa da imagem. Simplesmente, você precisa preparar um texto que será exibido em vez de uma imagem se não puder ser carregado pelo navegador por algum motivo. Este texto é adicionado à tag usando o parâmetro ait, cujo valor é a string de texto desejada, ou seja, obtemos aproximadamente a seguinte construção:

Caso a imagem gráfica ainda seja exibida pelo navegador, o texto da representação textual alternativa é exibido como uma "dica", um pequeno prompt de texto, quando o usuário passa o cursor do mouse sobre a imagem gráfica desejada.

No entanto, também existe uma opção mais detalhada para criar esses prompts de texto. O parâmetro longdesc define o endereço do recurso da Internet onde o Descrição completa deste gráfico. O valor deste parâmetro é, obviamente, a URL do recurso com a descrição da imagem.

O parâmetro name permite que você especifique um nome exclusivo para a imagem que identifica este elemento de design da página da web. Este parâmetro é mantido para fins de compatibilidade com versões anteriores, ele é deixado de Versões prévias Padrão HTML. Agora todas as tags usam o parâmetro id para esse propósito.

Por padrão, a imagem gráfica é mostrada exatamente como foi criada, com as mesmas dimensões verticais e horizontais. No entanto, temos a capacidade de definir explicitamente o tamanho da imagem a nosso critério. Os parâmetros de altura e largura são usados ​​para isso. Já sabemos como definir dimensões em pixels ou porcentagem. Deve-se notar apenas que os navegadores tendem a preservar as proporções da imagem, portanto, uma configuração explícita de tamanhos que altera as proporções pode ser ignorada pelo navegador, e o navegador escolherá os tamanhos que seriam o mais próximos possível do aquelas especificadas pelo usuário, sem violar as proporções. Portanto, as imagens gráficas são geralmente preparadas para páginas da Web nos tamanhos que serão usados ​​quando forem exibidas nas páginas da Web. E se uma imagem deve ser exibida várias vezes com tamanhos diferentes, então é mais fácil preparar vários arquivos gráficos do que entregar suas imagens a um navegador que pode atrapalhar todo o layout das páginas da web.

Com a ajuda de parâmetros, podemos especificar a quantidade de espaço em branco que separará a imagem gráfica dos demais elementos circundantes do design da página Web, ou seja, definir o recuo da imagem. Os parâmetros hspace e vspace são usados ​​para isso. O parâmetro hspace define o preenchimento horizontal em pixels, e o parâmetro vspace define o preenchimento vertical. Observe que apenas valores numéricos que indicam distâncias em pixels podem ser usados ​​como valores para esses parâmetros. Não há valor zero para esses parâmetros, mas normalmente todo navegador usa um pequeno valor diferente de zero.

E com o parâmetro border, podemos definir a espessura da borda que envolve a imagem. Como de costume, o valor do parâmetro é um número que indica a espessura em pixels. O padrão é zero, o que torna a borda invisível.

É necessário também mencionar o alinhamento do objeto gráfico em relação ao texto que flui ao seu redor. O parâmetro de alinhamento é usado para isso. Uma palavra-chave de um conjunto predefinido de palavras-chave pode ser usada como seu valor. Os valores inferior, intermediário e superior são usados ​​para posicionar a primeira linha do texto que flui verticalmente ao redor da imagem. O valor superior move-o para cima, para baixo - para baixo, e o valor do meio permite que a linha seja centralizada verticalmente. Os valores esquerdo e direito são usados ​​para alinhar o gráfico horizontalmente. O primeiro valor para a esquerda, como você pode imaginar, desloca a imagem para a borda esquerda do bloco em que ela é exibida e para a direita à direita.

Agora é hora de ver com exemplos como podemos posicionar uma imagem e combiná-la com o texto que deve envolver o gráfico desejado.

Listagem 1.11

"http://www.w3.org/TR/htm!4/strict.dtd">




<р>
Este é o texto que envolve o desenho.
Este é o texto que envolve o desenho.

A aparência deste documento HTML quando exibido usando um navegador é mostrada na Fig. 1,11.

Arroz. 1,11. Janela do navegador mostrando o resultado da exibição do arquivo na Listagem 1.11

Neste exemplo, usamos uma tag de inserção de imagem limpa sem qualquer parâmetros adicionais... Como podemos ver, a imagem é inserida imediatamente após a primeira frase, onde colocamos a tag ... Ao mesmo tempo, se reduzirmos o tamanho da janela de visualização do navegador horizontalmente para que a primeira frase e a imagem não caibam na mesma linha, a oferta seria exibida primeiro, e já abaixo dela a imagem, pressionada para o borda esquerda da janela de visualização. À direita dele, o texto que o segue começaria a ser exibido de forma que a linha de base da linha coincidisse com a borda inferior da imagem.

Agora vamos adicionar uma opção de alinhamento horizontal à tag de exibição da imagem. O código resultante é mostrado na Listagem 1.12.

Listagem 1.12

"http://www.w3.org/TR/html4/strict.dtd">


<р>Este é o texto que envolve o desenho. alinhar = "ieft">
Este é o texto que envolve o desenho. Este é o texto que envolve o desenho.
Este é o texto que envolve o desenho.

Como você pode ver, neste caso, o texto começa a ser mostrado novamente, então a imagem gráfica, pressionada para a borda esquerda, de acordo com a diretriz dada no parâmetro de alinhamento, e o resto do texto é colocado à direita de a imagem (Fig. 1.12), ou seja, a imagem não pode ocupar a primeira linha, pois o texto começa antes dela. O mesmo acontecerá se você aplicar o parâmetro de alinhamento com um valor de direita, mas a imagem será aderida apenas à borda direita da janela de exibição, e o texto fluirá em torno dela do lado esquerdo. Essas são todas as mudanças.

Agora vamos ver como o alinhamento vertical funciona. Embora a configuração de alinhamento seja inserida na marca da imagem, as alterações mais perceptíveis ainda estão no texto que circunda a imagem. Vamos ver o efeito do parâmetro de alinhamento vertical usando um exemplo.

Arroz. 1,12. Janela do navegador mostrando o resultado da exibição do arquivo na Listagem 1.12

Listagem 1.13

"http://www.w3.org/TR/html4/striqt.dtd">




<р>Este é o texto que envolve o desenho. alinhar = "meio">
Este é o texto que envolve o desenho. Este é o texto,
que envolve o desenho.
Este é o texto que envolve o desenho.

O resultado da renderização deste documento HTML é mostrado na Fig. 1,13.

Arroz. 1,13. Janela do navegador mostrando o resultado da exibição do arquivo na Listagem 1.13

Neste exemplo, definimos o alinhamento vertical para o meio, ou seja, a primeira linha do texto após a tag de inserção da imagem é exibida no centro vertical do espaço livre à direita da imagem. O resto do texto é exibido abaixo da imagem. Se definirmos o parâmetro de alinhamento para o topo, a primeira linha será exibida próximo à borda superior da imagem. E ao usar o valor inferior, a primeira linha do texto será exibida perto da parte inferior da imagem. Observe que o navegador reconhece apenas um parâmetro de alinhamento, ou seja, podemos especificar o alinhamento vertical ou horizontal. Se os meios embutidos de posicionamento e alinhamento da imagem não forem suficientes, você pode recorrer ao processo de layout usando tabelas. Veremos o uso de tabelas em uma seção posterior deste capítulo.

Temos a oportunidade de usar vídeos no design de páginas da web. Você deve ter muito cuidado com seu uso, pois os arquivos que contêm esses recursos de vídeo geralmente são muito grandes. E para que um usuário remoto os visualize em seu navegador, ele precisará fazer o download completo desse arquivo em sua máquina. Usando os canais que estão disponíveis para a maioria dos usuários da Internet, esse procedimento pode levar muito tempo. Nenhum de nós gosta de esperar o carregamento de uma página da Web.

Os navegadores geralmente são capazes de reproduzir arquivos de vídeo em AVI, Real Video e Windows Media... E sua introdução na página da Web é feita usando a mesma tag ... Mas o parâmetro dunscr é usado para especificar a localização do arquivo de vídeo. Por padrão, um videoclipe incorporado em uma página da Web é reproduzido uma vez, imediatamente após o carregamento completo da página. Mas temos algumas possibilidades para regular o processo de reprodução de um clipe ou dar ao usuário a capacidade de controlar sua reprodução.

Se a tag habilitamos o parâmetro start, então podemos especificar explicitamente o evento após o qual o navegador terá que reproduzir o videoclipe carregado. Os valores deste parâmetro podem ser usados palavras-chave mouseover e fileopen. O primeiro indica que o clipe deve ser reproduzido após o usuário colocar o cursor do mouse sobre o espaço alocado para a inserção de vídeo, e o segundo indica que a reprodução começará imediatamente após o arquivo HTML ser totalmente carregado. No entanto, podemos combinar essas duas opções. Nesse caso, a tag de inserção de vídeo terá a seguinte aparência:

Podemos especificar quantas vezes o vídeo precisa ser reproduzido usando o parâmetro de loop. O valor deste parâmetro é um número que define a quantidade de repetição do videoclipe. No entanto, se quisermos que o vídeo seja reproduzido continuamente, sem nenhum número fixo de repetições, devemos usar o valor infinito. E com a ajuda do parâmetro loopdelay, podemos definir o intervalo de tempo entre as repetições do videoclipe. O valor deste parâmetro é um número que indica a quantidade de tempo em milissegundos. Vejamos a aplicação desses parâmetros usando o seguinte snippet de código como exemplo:

Aqui, declaramos explicitamente que o videoclipe será reproduzido duas vezes imediatamente após o carregamento da página da web, com um atraso de cinco segundos entre as reproduções.

Neste caso, nós mesmos controlamos a exibição do arquivo de vídeo. Mas também podemos transferir essa prerrogativa para o usuário remoto que irá carregar a página web. Para fazer isso, você deve inserir a tag o parâmetro de controles sem qualquer valor. A presença desse parâmetro na tag indica claramente que os controles de reprodução serão exibidos junto com o videoclipe na página da web.

Os parâmetros que consideramos são suficientes para a incorporação correta de arquivos de vídeo no conteúdo de uma página da web. Vamos considerar um exemplo detalhado (Fig. 1.14).

Listagem 1.14

"http://www.w3.org/TR/html4/strict.dtd">
.

<р>Texto simples.

Arroz. 1,14. A janela do navegador mostrando o resultado da exibição do arquivo na Listagem 1.14

Naturalmente, como o procedimento para inserir um fragmento de vídeo no corpo de uma página da Web é um caso especial de inserção de gráficos, todos os outros parâmetros aplicáveis ​​à tag são aplicados à tag de inserção do fragmento de vídeo. , como opções de alinhamento, tamanho explícito e outros.

O design de som da página da Web também pertence aos recursos de multimídia. Mas podemos usar o som apenas como forma de fundo, ou seja, um determinado arquivo de som será reproduzido no computador do usuário remoto após ele carregar a página web. Se, é claro, seu computador possui uma placa de som, ou seja, um arquivo HTML com uma página da Web é inicialmente baixado para o computador do usuário remoto e, em seguida, todos os outros arquivos usados ​​no design desta página da Web são carregados, como gráfico arquivos, videoclipes e clipes de áudio.

Portanto, para que a visualização de uma página da Web seja acompanhada por uma reprodução de som, é necessário inserir a tag no código da página ... A tag é colocada não no corpo de uma página da Web, mas em seu cabeçalho, ou seja, entre as tags e... Esta tag tem um parâmetro src obrigatório, cujo valor é o URL do arquivo de som... Deve-se observar que os navegadores têm garantia de reconhecer e reproduzir arquivos de áudio MIDI e WAV. A reprodução de outros formatos, como MP3 e Real Audio, só é possível quando módulos adicionais estão conectados aos navegadores.

Tal como acontece com os videoclipes, podemos definir o número de vezes que o arquivo de áudio é reproduzido usando o parâmetro loop. O valor deste parâmetro é o número de repetições. Se precisar reproduzir um fragmento de áudio constantemente, deve-se usar o valor "-1", ou seja, se quisermos que um arquivo de áudio seja reproduzido continuamente ao carregar uma página da Web, deve-se usar a seguinte construção:

Isso conclui nossa consideração sobre o uso de multimídia e objetos gráficos no design de páginas da Web e vá para a próxima parte do primeiro capítulo.

Sobre este momento quase todas as imagens na Web estão em dois formatos: GIF e JPEG. O terceiro contendor que vale a pena mencionar, PNG, está lutando pelo suporte e atenção do navegador. Avançar - breve revisão os "três grandes" formatos gráficos online. Para obter mais informações, consulte os capítulos de cada formato.

GIF- O formato de alteração do GraficInter pode ser chamado de formato de arquivo da Web tradicional. Foi o primeiro formato de arquivo compatível com navegadores da Web e continua sendo o principal formato gráfico da Web até hoje.

Suas propriedades são as seguintes:

• - Suporta não mais do que 256 cores (menos é possível e frequentemente necessário);
• - usa uma paleta de cores;
• - usa compactação sem perda de informação pelo método LZW (que é semelhante ao usado no arquivador PKZIP e, portanto, os arquivos GIF praticamente não são compactados no futuro);
• - Suporta digitalização entrelaçada;
• - é um formato de streaming, ou seja, a exibição da imagem começa durante a transferência;
• - permite que você atribua um atributo transparente a uma das cores na paleta, que é usado ao criar os chamados GIFs transparentes;
• - tem a capacidade de salvar várias imagens em um arquivo, que é usado na produção de GIFs animados;
• - Suporta a capacidade de inserir blocos de controle no arquivo, o que permite inserir comentários no arquivo (por exemplo, sobre direitos autorais), atraso entre exibições de imagens, etc.

E agora um pequeno esclarecimento - a que essas propriedades podem levar. Como escrevemos, GIF suporta não mais do que 256 cores, o que significa que todas as imagens que salvamos no formato GIF explicitamente ou implicitamente reduzem o número de cores para caber dentro deste limite ( programas diferentes com vários graus de sucesso). E daí a conclusão - se tomarmos foto bonita com transições suaves e tons sutis de cor, então, após a transformação, tudo ficará muito pior - os tons não serão mais indescritíveis e toda a foto terá uma aparência não natural e irreal. Portanto, se você ainda precisa salvar a foto no formato GIF e transferir todas as sombras, então você tem que ir aos truques. Por exemplo, você pode aplicar algum tipo de filtro artístico a uma foto e transformá-la em um desenho ou aplicar tons. Mas não há problemas em salvar desenhos e desenhos neste formato, em geral eles ficam bem compactados e não contêm muitas cores.

O segundo formato de imagem mais popular na Web é o JPEG - Joint Photographic Experts Group. Ele contém informações de cores de 24 bits. São 16,77 milhões de cores, em contraste com as 256 cores do formato GIF. JPEG usa o que é conhecido como compactação com perdas. Isso significa que algumas informações sobre as imagens são descartadas durante o processo de compactação, mas na maioria dos casos a degradação da qualidade da imagem é inofensiva e muitas vezes nem mesmo perceptível.

Fotos ou quaisquer imagens com gradações de cores suaves são melhor salvas no formato JPEG porque oferece imagens de qualidade superior que podem caber em um arquivo menor. No entanto, JPEG não é a melhor solução para gráficos com áreas monocromáticas, porque esse formato tende a ser pontilhado de cores e o arquivo resultante geralmente será um pouco maior do que o GIF da mesma imagem.

Existe um terceiro formato gráfico competindo pelo uso persistente na web. Trata-se de um formato PNG - Portable Net work Graphic que, apesar de algumas vantagens, está mais ou menos na sombra desde 1994. Só recentemente os navegadores começaram a suportar PNG como gráficos incorporados, mas o PNG tem potencial para se tornar um formato muito popular na web. É por isso que ele está incluído aqui nos "três grandes". O PNG pode suportar cores indexadas de 8 bits, meios-tons de 16 bits ou imagens coloridas de 24 bits usando um esquema de compactação sem perdas. Isso fornece imagens de qualidade superior e, às vezes, menos arquivos do que GIFs. Além do mais, Arquivos PNG tem alguns recursos excelentes, como controle de gama integrado e níveis de transparência variáveis ​​(isso permite que a imagem de fundo seja mostrada através de sombras suaves).

Como as imagens da Web só existem na tela do monitor, é tecnicamente correto medir sua resolução em pixels por polegada (ppi - pixels por polegada). Outra unidade de medida de resolução - pontos por polegada (dpi - pontos por polegada) refere-se à resolução das imagens impressas e depende da resolução do dispositivo de impressão.

Mas, uma vez que as dimensões reais dos gráficos dependem da resolução da tela, medir em polegadas torna-se inaceitável para o ambiente da web. A única unidade de medida significativa é o pixel.

É prático criar imagens de 72 ppi (isto é a melhor maneira para exibição), prestando atenção apenas às dimensões gerais em pixels. No processo de criação de gráficos na Web, você não precisa usar polegadas. O que importa é o tamanho da imagem em comparação com outras imagens na página e o tamanho geral da janela do navegador.

Por exemplo, muitos usuários ainda usam monitores de 14 polegadas com 640x480 pixels. Para garantir que a tela inicial ocupe todo o espaço da tela, é melhor deixá-la com no máximo 600 pixels de largura (assumindo que alguns dos pixels à direita e à esquerda serão usados ​​para a janela e a barra de rolagem). O tamanho do restante dos botões e imagens da página deve ser medido em pixels em relação ao banner, que tem 600 pixels de largura.

Sem dúvida, foram os gráficos que tornaram a Web do jeito que a vemos hoje, mas como designer você deve saber que muitos usuários têm um sentimento de amor e ódio pelos gráficos na Web. Lembre-se de que os gráficos aumentam o tempo de transferência de uma página da Web pela rede; a grande quantidade de gráficos significa tempos de download significativos, o que testará a paciência do leitor, especialmente se ele estiver discando usando uma conexão dial-up padrão.

V A este respeito, para o Web designer, existe uma regra mais importante: o tamanho do arquivo da imagem gráfica deve ser o menor possível! A criação de imagens destinadas à transmissão em uma rede coloca a responsabilidade sobre os desenvolvedores de levar a sério os tempos de carregamento.