Buscar

HTML Básico Fundação Bradesco

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 3, do total de 19 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 6, do total de 19 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 9, do total de 19 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Prévia do material em texto

HTML – Básico – Fundação Bradesco
Serão abordados temas como: Importância do HTML na web; Principais comandos para criar páginas na web; Como formatar documentos HTML; Como listar e adicionar elementos gráficos.
A internet e intranet
A internet é uma rede mundial de computadores que permite ao usuário obter informações e se comunicar com pessoas do mundo todo.
Já a intranet, é uma rede privada que permite ao usuário interagir com pessoas de uma mesma organização.
A World Wide Web
A World Wide Web (WWW), conhecida como web, é um sistema de informação que une dados de vários serviços de internet.
Enquanto a internet refere-se aos componentes físicos da rede global, a web refere-se ao corpo da informação compartilhada por esta rede, ou seja, às páginas web (conteúdos) que você acessa quando visita um site.
O acesso aos sites ocorre por meio de browsers (navegadores) que são programas utilizados para acessar e interagir com páginas web. Navegadores de diferentes plataformas interpretam, formatam e exibem páginas web.
Servidores web
Servidores web são computadores robustos com programas que processam pedidos recebidos dos navegadores.
O que é uma home page?
Home page é a primeira página recebida de um site por um servidor web.
Por exemplo, quando você acessa o site da Escola Virtual (http://www.ev.org.br/) pode não saber especificar um nome de arquivo. Nestes casos, o servidor web exibirá um arquivo padrão, que é a home page ou página principal.
Uma home page é normalmente chamada de index.htm ou de default.htm. Os arquivos também podem possuir a extensão .html como padrão.
Protocolos
Protocolos são um conjunto de regras para a comunicação em rede. Eles determinam como computadores se comunicam: como iniciar, como manter e como encerrar a comunicação.
	HTTP
	Hypper Text Transfer Protocol (HTTP) é o protocolo usado pelos servidores web para transmitir documentos HTML pela internet.
	FTP
	File Transfer Protocol (FTP) é outro protocolo muito utilizado para transmitir arquivos, porém sua interface gráfica não é tão agradável como o HTTP.
	TCP
	Transfer Control Protocol (TCP) é um conjunto de protocolos para a transmissão de informação pela web, com função de verificar se os dados são transferidos de forma correta, na sequência apropriada e sem erros.
	IP
	Internet Protocol (IP) é um protocolo de endereçamento, que fornece o endereço dos computadores na rede.
Universal Resource Locator (URL) é o sistema de endereçamento usado pelos navegadores para localizar redes, computadores e arquivos na internet.
Uma URL especifica: http://www.ev.org.br/Paginas/Home.aspx
Protocolo HTTP – Protocolo a ser usado para acessar o arquivo.
Endereço – Endereço do Servidor
Subárea – Área do servidor onde se encontra o arquivo.
Nome do arquivo – Nome do arquivo no servidor.
Para criar páginas web com textos descritivos e informações separadamente, utilizamos uma linguagem de marcação.
As páginas web são armazenadas em arquivos com extensão htm ou html. Isto assegura que elas serão acessíveis por qualquer tipo de navegador e de qualquer parte do mundo.
HTML e a web
Serão agora abordados temas como: As características e benefícios do HTML; A função do HTML na web.
HyperText Markup Language
(Linguagem de Marcação de HiperTexto)
Então, para que você possa criar páginas web, apresentaremos a você uma das linguagens de marcação mais conhecidas - HTML e que utiliza um formato simples de código, que pode ser gerado sem a ajuda de aplicativos especiais.
Para criar um documento HTML, tudo o que você precisa é de um editor de texto ASCII como o NotePad (Bloco de Notas), por exemplo. Se você precisar verificar a formatação do documento durante a criação, pode usar qualquer navegador, pois todos eles são capazes de interpretar o código.
Origem do HTML
HTML é uma linguagem que possibilita apresentar informações na internet. Aquilo que você vê quando abre uma página na internet é a interpretação que seu navegador faz do HTML.
O HTML foi inventado em 1990 por um cientista chamado Tim Berners-Lee. A finalidade inicial era a de tornar possível o acesso e a troca de informações e de documentação de pesquisas, entre cientistas de diferentes universidades.
O projeto inicial tornou-se um sucesso jamais imaginado por Tim Berners-Lee. Ao inventar o HTML ele lançou as fundações da internet tal como a conhecemos atualmente.
Vantagens do uso do HTML
Podemos dizer que as vantagens do uso do HTML estão no que você pode fazer com ele:
	Criar e adicionar facilmente documentos a web, devido ao seu formato simples.
	Assegurar a acessibilidade das suas páginas web por um grande número de plataformas e navegadores.
	Transmitir facilmente documentos pela internet.
O HTML tem uma função importante em aplicações web, que são programas que você incorpora em sites para gerenciar tarefas adicionais como por exemplo, o gerenciamento de pedidos de usuários. As aplicações web aumentam a interação do usuário na web.
O papel do HTML na web
Quando você entra com alguma informação em uma página web, o navegador a envia para um conjunto especial de programas chamados Common Gateway Interface (CGI) scripts. Estes programas processam a informação e exibem o resultado no navegador segundos após.
Você usa o HTML para fornecer a interface básica para a interação com aplicações web. Você pode também usar o HTML para criar interfaces gráficas entre os bancos de dados usados nestas aplicações e o usuário final.
Criando um documento HTML
Agora você aprenderá sobre: Como criar um documento HTML; As partes de um documento HTML; Tags e seu papel no documento HTML; Como visualizar o documento criado; Salvando o documento para visualizá-lo pelos navegadores; Visualizando a página web.
Criando uma página web em HTML
Para tornar possível a criação de páginas web mesmo sem ter nenhum aplicativo instalado no computador, além do sistema operacional Windows, utilizaremos, neste curso, o editor de texto Bloco de Notas para criar documentos HTML.
Exemplo de código HTML
Observe atentamente a figura abaixo e analise o que há em comum em todas as linhas que contém textos, independente de saber ou não o que significam:
Partes de um documento HTML
Um documento HTML possui duas partes:
Head (cabeçalho)
Body (corpo)
No head, você entra com o título da página web, que será exibido apenas na barra de endereços do navegador.
No body você entra com o conteúdo da página web.
Em ambos podem ser inseridas outras informações que serão vistas mais adiante.
<HTML>
<HEAD>
<TITLE>Escola Virtual - Curso de HTML Básico</TITLE>
</HEAD>
<BODY>
<P>O objetivo deste curso é fazer com que você seja capaz de criar páginas <I>web</I>, utilizando a linguagem de marcação HTML.</P>
</BODY>
</HTML>
Tags com fechamento
Grande parte das tags requerem um fechamento e este é idêntico à tag de abertura, porém com o sinal / (barra) no início. Veja, abaixo, alguns exemplos:
	<HTML> e </HTML>
	Inicia e encerra um documento HTML.
	<HEAD> e </HEAD>
	Inicia e encerra a área do cabeçalho.
	<TITLE> e </TITLE>
	Inicia e encerra a linha de título.
	<BODY> e </BODY>
	Inicia e encerra a área do corpo (conteúdo) do documento HTML.
	<P> e </P>
	Inicia e encerra um novo parágrafo.
O conteúdo das tags pode ser digitado em minúsculo ou maiúsculo. Neste curso, adotaremos as letras maiúsculas apenas para facilitar a visualização delas nas imagens.
Existem algumas tags que não necessitam de fechamento e sua sintaxe é somente de abertura, como por exemplo, a tag <Break> ou <BR>, que insere uma quebra de linha. Observe o exemplo abaixo, depois clique no ícone correspondente para visualizar o efeito dos comandos na página web.
<HTML>
<HEAD>
<TITLE>HTML - TAG BREAK ou <BR></TITLE>
</HEAD>
<BODY>
Exemplo do uso da tag BREAK <BR> em um texto.<BR> Observe a quebra de linha.
</BODY>
</HTML>
Salvando um documento HTML
Como você deve recordar, arquivos gerados pelo Bloco de Notas assumem automaticamentea extensão .txt. Acontece, que este tipo de arquivo não pode ser aberto por navegadores.
E então, como visualizar o documento HTML como página web para verificar se ele está de acordo com o que você imagina?
Simples, basta salvar o arquivo com a extensão .html.
Codificação de caracteres
Codificação de caracteres é o mecanismo que armazena os símbolos em forma binária no computador, possibilitando a conversão de um símbolo em código e um código em símbolo.
A codificação UTF-8 é a recomendação atual para codificação na web por ser amplamente suportada em navegadores e editores de código, além de ser compatível com praticamente todos os idiomas do mundo. Esta codificação utiliza um número variável de bytes para representar símbolos, podendo usar de 1 a 4 bytes.
Por padrão, os documentos HTML criados no bloco de notas são salvos na codificação ANSI que é considerada obsoleta, uma vez que utiliza um único byte, tem limitações na representação de caracteres especiais e possui diferentes versões, ao passo que o UTF-8 usa codificação multibyte, representa um grande conjunto de caracteres e possui padronização uniforme nos pontos de código. Portanto, lembre-se de alterar o campo codificação na hora que for salvar a página web.
	Exercício 1
Você já estudou sobre as partes de um documento HTML, sobre a função das tags, como criar e como salvar um documento HTML. Agora, criará sua primeira página web. Isso mesmo, seu primeiro documento HTML! Então, abra o Bloco de Notas e digite os códigos abaixo:
<HTML>
<HEAD>
<TITLE>EXERCÍCIO 1</TITLE>
</HEAD>
<BODY>
<P>Está é a primeira vez que digito um documento HTML para criar uma página web.</P>
<P>Nome: digite seu nome<BR>
Nasc.: digite sua data de nascimento<BR>
End.: digite seu endereço</P>
<P>Muito legal!</P>
</BODY>
</HTML>
Formatando um documento HTML
Agora iremos ver: Inserção dde efeitos (negrito, itálico e sublinhado) para destacar partes do texto; Como alterar o alinhamento do texto (centro, justificado, direita e esquerda); Como alterar o tipo, tamanho e cor da fonte do texto da página web; A diferança entre as tags <P> e <BR>; Como inserir linhas horizontais para dividir partes do conteúdo; Como cirar subtítulos e adicionar comentários; Utilizar tags pré-formatadas.
Inserindo efeitos
Agora que você já sabe como criar e visualizar documentos HTML, veja como inserir alguns efeitos para destacar o texto.
Negrito: <B>Texto</B>
Itálico: <I>Texto</I>
Sublinhado: <U>Texto</U>
Alterando o alinhamento do texto
Para destacar um texto, além dos efeitos, você também pode alterar o alinhamento da linha ou parágrafo. Os alinhamentos disponíveis são:
Esquerda: <P ALIGN=left>Texto</P>
Centro: <P ALIGN=center>Texto</P>
Direita: <P ALIGN=right>Texto</P>
Esticado: <P ALIGN=justify>Texto</P>
Alterando a fonte
Você deve ter observado, que independente da fonte na qual o código HTML é digitado, a visualização da página web é sempre com a mesma fonte, Times New Roman. Pois é, essa é a fonte padrão.
Caso você deseje utilizar outra fonte, alterar o tamanho ou ainda a cor, será preciso fazer uso da tag <FONT> </FONT>.
Esta tag normalmente vem acompanhada dos atributos face, size e color. Eles servem para alterar a fonte, o tamanho e a cor, respectivamente.
Você pode, teoricamente, escolher qualquer fonte existente, mas na verdade ela só aparecerá em computadores que tiverem tal fonte instalada.
Portanto, para isso não acontecer, escolha uma fonte que já venha instalada com o sistema operacional, presente na maioria dos computadores, tais como:
Arial
Calibri
Comic Sans MS
Verdana
Um dos primeiros atributos utilizados com a tag <FONT>, é o FACE, que permite alterar o tipo da fonte. A sintaxe fica assim: <FONT FACE="nome da fonte">
EX: <P><FONT FACE=”Arial”>Texto</FONT></P>
Alterando o tamanho da fonte
Agora que você já sabe alterar o tipo de fonte, veja como alterar o tamanho dela.
Para isso, basta acrescentar o atributo SIZE (tamanho) na tag <FONT>.
A sintaxe fica assim: <FONT SIZE="numero">, onde "numero" pode variar de 1 até 7, sendo que 1 é o menor tamanho e 7 é o maior tamanho possível de fonte.
Tamanho: 1
Tamanho: 2
Tamanho: 3
Tamanho: 4
Tamanho: 5
Tamanho: 6
Tamanho: 7
EX: <P><FONT SIZE=”5”>Texto</FONT></P>
Alterando a cor da fonte
Finalmente, você vai aprender a alterar a cor da fonte, utilizando o atributo COLOR.
A sintaxe fica assim: <FONT COLOR="cor">, onde "cor" pode ser definida pelo nome ou pelo código hexadecimal da cor.
Ao utilizar o nome, você estará restrito às cores básicas, algumas delas são: 
Aqua, Black, Blue, Fuchsia, Gold, Gray, Green, Indigo, Lime, Maroon, Navy, Olive, Purple, Red, Salmon, Siena, Silver, Teal, White, Yellow.
As cores em HTML são definidas em notação hexadecimal pela combinação dos valores RGB (Red, Green e Blue).
Os valores em hexadecimal são definidos em três pares de números, começando em 00 (0 em decimal) e terminando em FF (255 em decimal). Cada símbolo hexadecimal começa sempre com o símbolo hash (#).
Com a combinação dos três valores é possível obter mais de 16 milhões de cores (255 x 255 x 255).
Já com os códigos, você terá várias opções de tonalidades.
EX: <P><FONT COLOR=”Gold”>Texto</FONT></P> 
EX2: <P><FONT COLOR=”#70A8C7”>Texto</FONT></P>
Inserindo quebra de linha
Por padrão, os navegadores encaixam automaticamente o texto da página web de acordo com o tamanho de sua janela. Agora, se você desejar quebrar o texto sempre no mesmo lugar, independente da largura da janela do navegador, você pode utilizar a tag <P> </P> (paragraph) ou a tag <BR> (break).
A tag <P></P> insere uma linha entre os parágrafos. Já a tag <BR>, insere apenas uma quebra de linha.
Inserindo linhas horizontais em uma página web
Você aprenderá agora, a inserir linhas horizontais em uma página web. Você usa estas linhas para dividir a informação exibida em diferentes blocos. Para criar uma linha horizontal, você usa a tag Horizontal Ruling<hr>. Observe o exemplo:
<HTML>
 <HEAD>
 <TITLE>Inserindo linha horizontal</TITLE>
 </HEAD>
<BODY>
 <HR>
 <B>Dados pessoais:</B><BR>
 Nome:<BR>
 <HR>
 <B>Dados bancários:</B><BR>
 Banco:<BR>
 <HR>
</BODY>
</HTML>
Criando subtítulos
Agora, você verá como adicionar títulos e subtítulos em uma página web. Para isso, utilizará a tag Heading <Hx> </Hx>, onde x é um número que representa o nível do tópico. Você pode criar até 6 subtítulos.
O uso de subtítulos, facilita o entendimento do conteúdo. Por exemplo, para conseguir o efeito do texto abaixo, você pode usar o conjunto de tags <H1> </H1> e <H2> </H2>.
1. Linguagem de marcação HTML
    1.1. Breve histórico
Veja como o código deve ser escrito para obter esse resultado:
<H1><b>1. Linguagem de marcação HTML</B></H1>
<P>O HTML é uma das linguagens de marcação mais utilizada.</P>
<H2><b>1.1 Breve histórico</B></H2>
<P>Tudo começou quando em ...</P>
1. Linguagem de marcação HTML
O HTML é uma das linguagens de marcação mais utilizada.
1.1 Breve histórico
Tudo começou quando em ...
Adicionando comentários
Você pode inserir comentários para incluir notas, sugestões e explicações que o internauta não deva ver. Para isso, você usa a tag Comment, com a sintaxe <!-- xxxxxx -->
EX: <!--Texto-->
Tag preformatted
Por padrão, os navegadores não exibem os espaços extras e linhas em branco de um documento HTML. 
Para que o usuário visualize a página web com os espaços e linhas em branco que você definiu no documento HTML, é necessário utilizar a tag Preformatted (Pré-formatado), com a sintaxe <PRE> </PRE>. O navegador exibe o bloco de texto exatamente como está descrito no documento HTML.
EX: <PRE>Texto</PRE> (No caso, usá-se no lugar de <P></P>)
Criando listas
Os tópicos a serem abordados são: Tipos e função das listas; Como criar listas; Como intercalar tipos diferentes de lista.
Lista é uma coleção de itens relacionados. Você usa uma lista para organizar dados com uma sequência de passos ou para listar itens em um grupo.
O HTML possuidois tipos principais de lista:
Numeradas
Não numeradas
Criando listas ordenadas
Para criar uma lista ordenada, utilizamos duas tags:
<OL> </OL>: que abre e fecha o tipo de lista
<LI>: abre cada item da lista
EX: ...<OL>
<LI>Primeira coisa.
<LI>Segunda coisa.
</LI>
</OL>...
Criando listas não numeradas
Para criar uma lista não ordenada, utilizamos duas tags:
<UL> </UL>: que abre e fecha o tipo de lista
<LI>: abre cada item da lista
EX: ...<UL>
<LI>Alguma coisa.
<LI>Alguma outra coisa.
</LI>
</UL>...
O que significa lista intercalada?
Também é possível criar combinações de listas em uma página web. Essa combinação é chamada de lista intercalada.
EX:
<OL>
<LI>Celular
<UL>
<LI>Retangular
<LI>Pequeno
</UL>
<LI>Notebook
<UL>
<LI>”Grande”
</UL>
</OL>
Personalizando listas
O atributo TYPE pode especificar o tipo de  marcador em uma lista não ordenada, ou tipo de número em uma lista ordenada. Observe, abaixo, os valores que podem ser utilizados.
Você pode especificar o tipo de número como:
	A
	Para exibir letras maiúsculas
	a
	Para exibir letras minúsculas
	I
	Para exibir números romanos grandes
	I
	Para exibir números romanos pequenos
Sintaxe: <OL TYPE=”estilo do número”>
Você pode especificar o tipo de marcador como:
	DISC
	Para exibir círculo preto
	CIRCLE
	Para exibir círculo branco com bordas pretas
	SQUARE
	Para exibir quadrado preto
Sintase: <UL TYPE="estilo do marcador">
Inserindo imagens
Tipos de imagens
Quando adicionamos uma imagem a uma página web, é preciso ter em mente o formato, o tamanho e a posição dela na página. Começaremos pelos formatos de imagens mais utilizados em páginas web que são: JPEG ou JPG; GIF; PNG.
Inserindo imagens
A tag utilizada para se inserir imagens é a <IMG>, utilizada com alguns atributos.
Em primeiro lugar, como já é de se imaginar, você precisará informar ao navegador onde a imagem se encontra, ou seja, o endereço e nome dela. Para isso, utilizaremos o atributo SRC que é a abreviação de source (fonte).
Sintaxe: <IMG SRC="C:\pasta\nome imagem">
Alinhando uma imagem
Você pode usar diversos recursos para alinhar textos e imagens em sua página web, criando uma organização visual diferente.
A imagem pode ser alinhada com outros elementos usados na página, como textos ou outras imagens.
O atributo a ser utilizado em conjunto com a tag de imagem é ALIGN. Você pode alinhar o texto no topo, no centro ou no rodapé da imagem, à esquerda ou à direita.
O valor padrão que o browser usa para o align é BOTTOM (rodapé)
Usando o atributo ALIGN
Você verá agora o atributo align e seus parâmetros para alterar a posição da imagem.
align=TOP: <img src=”nome da imagem” align=”top”>
align=BOTTOM: <img src=”nome da imagem” align=”bottom”>
align=MIDDLE: <img src=”nome da imagem” align=”middle”>
align=RIGHT: <img src=”nome da imagem” align=”right”>
align=LEFT: <img src=”nome da imagem” align=”left”>
Usando o atributo ALT
Caso o navegador não consiga exibir a imagem, o atributo ALT permite vincular um texto explicativo à ela.
Este atributo é considerado de acessibilidade, já que é importantíssimo para deficientes visuais, uma vez que os programas desenvolvidos para eles, lêem as imagens.
Quando o usuário coloca o mouse sobre a imagem, o texto alternativo também é exibido.
A sintaxe do comando é a seguinte:
<IMG ALT="Texto explicativo">
Criando links
O que são links e como inserir links.
O que são links?
Links são conexões pelas quais você conecta páginas que podem ser do mesmo website, externas ou ainda conectar páginas a outros documentos.
Os links podem ser criados no texto e também em outros elementos do website, como imagens ou itens de um menu.
Usando a Tag Anchor
A tag ANCHOR <A> </A> (âncora) é utilizada para criar links no hipertexto. A sintaxe desta tag é: <a href=”URL”>Texto descritivo</a>
a: Abertura da tag ANCHOR
href: Atributo usado para especificar a URL do documento linkado ou interligado
URL: Endereço da página ou documento a ser linkado
/a: Finalização da tag ANCHOR
Criando Links em textos
Observe, abaixo, um exemplo de documento HTML com código para a criação de um link no texto "Clique aqui", direcionando para o Google, que é atualmente o maior site de busca.
EX: <A HREF="http://www.google.com">Clique aqui</A> para acessar o Google.
Ao especificar uma URL apropriada para um serviço de internet, você também pode linkar ou interligar sua página web a esse serviço. Por exemplo, você pode criar um link entre sua página e o seu e-mail. Observe, abaixo, como os atributos formam a sintaxe da tag <A>, neste caso.
<a href="mailto:meuemail@meudominio.com">Texto do link</a>
Selecionado o link, o navegador ativa o programa de e-mail.
Criando links para seções na mesma página
Você aprendeu a criar links entre páginas web. Agora, aprenderá a criar links entre diferentes seções de uma mesma página. Esse recurso é utilizado quando a página contém um texto muito extenso.
Você, com certeza, já deve ter acessado alguma página em que há uma espécie de índice para direcioná-lo a partes específicas dela. O site WIKIPÉDIA é um bom exemplo.
A tag Anchor também é utilizada para criar links de seção.
Você especifica a URL do documento que deseja interligar, com o nome da seção precedido pelo símbolo #.
No entanto, será preciso utilizar um atributo que fará o navegador entender para onde deve ir após o usuário clicar no link criado. Este atributo é o NAME. O navegador exibe o link e, quando selecionado, exibirá a seção que começa com o nome especificado.
Observe, abaixo, como os atributos forma a sintaxe da tag <A> neste caso
<A href="#nome da seção">Texto explicativo</A>
<A name="nome da seção">
Criando links em imagens
Aprendemos a criar links entre duas páginas web e entre duas seções de uma mesma página. Agora aprenderemos a criar links em imagens, que podem ser para acessar outras imagens, páginas web ou documentos.
Usamos a combinação da tag Anchor com a tag Image para criar um link numa imagem. Observe a sintaxe para este tipo de operação: <a href=”URL”><img src=”img_url”></a>
Personalizando links
Você observou então, que para inserir um link numa imagem usamos dois conceitos aprendidos anteriormente: inserção de links e inserção de imagens.
Também é possível personalizar as cores dos links.
Dependendo da cor de fundo utilizada e a opção feita pela cor do texto, a cor do link pode ficar comprometida visualmente em sua página.
Para resolver isso podemos utilizar três elementos que modificam a apresentação dos links. Observe a descrição de cada um, seguido de sua sintaxe dentro da tag <BODY>.
<BODY LINK="cor" VLINK="#cor" ALINK="cor">
Link: Cor dos links não acessados da página web.
Vlink: Cor dos links após serem acessados.
Alink: Cor dos links ao passer o mouse por cima deles.
Combinando tags
Agora veremos: A tag ANCHOR combinada com tags de formatação, lista e imagem; Thumbnails – combinação de tags IMAGE e LIST.
Combinaçõe possíveis
Você pode utilizar combinações de tags em páginas web, para melhorar sua aparência e funcionalidade.
Dentre os diversos tipos de combinação que podemos fazer, vamos mostrar a você dois deles. O primeiro é a combinação da tag Anchor com as seguintes tags:
Formatação
List
Image
A seguir, veramos a combinação entre imagens e listas, através de um recurso chamado thumbnails.
Tag Anchor com tags de formatação e lista
Primeiramente, vamos combinar a tag Anchor com as tags de formatação. Observe o código:
<UL>
<LI><A HREF="#Exerc1"><FONT COLOR="green">Reveja o exercício 1</FONT></A><BR>
<LI><A HREF="#Exerc2"><FONT COLOR="red">Reveja o exercício 2</FONT></A><BR>
<LI><A HREF="#Exerc3"><FONT COLOR="purple">Reveja o exercício 3</FONT></A><BR>
</UL>
<BR>
<A NAME="Exerc1"><H2>Exercício 1</H2></A>
<A NAME="Exerc2"><H2>Exercício 2</H2></A>
<A NAME="Exerc3"><H2>Exercício 3</H2></A>
Reveja o exercício 1
Reveja o exercício 2
Reveja o exercício 3
Exercício 1
Exercício 2Exercício 3
Tag anchor com tag lista e tag imagem
O navegador exibe a lista de imagens junto com o texto de descrição, esta combinação melhora a aparência da lista.
Para isso, você define cada item como um link utilizando uma combinação da tag Anchor e da tag Image. Desta forma, você pode construir uma lista de imagens, que contém links para outras páginas, documentos, ou até mesmo outras imagens.
Um recurso comum na internet é a utilização de thumbnails, que são imagens em tamanhos reduzidos.
<UL>
<LI><A HREF="Produtos.html"><IMG SRC="Imagem1.jpg">Produtos</A></BR>
<LI><A HREF="Serviços.html"><IMG SRC="Imagem2.jpg">Serviços</A></BR>
<LI><A HREF="Contato.html"><IMG SRC="Imagem3.jpg">Contato</A></BR>
</UL>
Usando imagens mapeadas
Agora veremos: O que são imagens mapeadas; Tipos dde imagem mapeada; Como mapear uma imagem; A tag MAP e tag AREA.
O que são imagens mapeadas?
Uma imagem mapeada é uma imagem dividida em diferentes áreas e cada área é interligada a um documento. Uma imagem mapeada é diferente de um link numa imagem.
No caso da imagem mapeada, o navegador, primeiramente, identifica a área da imagem que você selecionou e então a URL do documento vinculado a esta área.
O exemplo mais comum de uso é quando existe a necessidade de uma mesma imagem direcionar o usuário para duas ou mais páginas web diferentes, como num menu. Neste caso, delimitam-se áreas da imagem que remetem a um lugar e outras áreas para outras páginas ou documentos.
Tipos de imagens mapeadas
Você pode criar dois tipos de imagens mapeadas:
Server-side (no servidor): Na imagem mapeada server-side, você define um arquivo especial chamado arquivo de definições das coordenadas com todos os detalhes da imagem mapeada e armazena este arquivo no servidor.
Quando você seleciona uma área da imagem mapeada, o navegador acessa o arquivo de definição das coordenaddas no servidor para identificar a URL do documento interligado.
Client-side (no cliente): Na imagem mapeada client-side, você inclui todos os detalhes da imagem mapeada no próprio documento.
Este será o tipo de imagem mapeada que vamos ver neste curso.
Como mapear uma imagem
Para utilizar uma imagem mapeada, primeiro você precisa definir as áreas da imagem que possuirão links para outras páginas ou documentos e, posteriormente, colocar a referida imagem no site. Para realizar este procedimento, você pode definir as áreas utilizando formas geométricas como quadrados, retângulos, círculos ou qualquer outro polígono.
Para delinear as formas geométricas na imagem, são utilizadas coordenadas X e Y, que são contadas pixel a pixel, tendo como 0 (zero) o ponto esquerdo superior da imagem.
Para cada tipo de forma, a inserção de coordenadas possui uma sintaxe única.
Retângulo: “x1,y1,x2,y2” (X1 e Y1 são o vértice esquerdo superior e X2 e Y2 são o vértice direito inferior)
Círculo: “x,y,r” (X, Y são o centro do círculo e R é a medida ddo raio, em pixel)
Polígono: “x1, y1, x2, y2, x3, y3...” (Todos os vértices do polígono)
Mapeando uma imagem
É muito importante lembrar que atualmente, quase nenhuma pessoa realiza a operação de descobrimento dos pontos de coordenadas manualmente. Praticamente, todos os programas editores de HTML possuem um mapeador de imagens incluso, no qual você desenha as formas geométricas e o programa fornece o código pronto.
É um processo demorado e trabalhoso realizar tudo manualmente. Entretanto, é de extrema importância que se conheça os conceitos de como o código é construído. Observe a sintaxe a seguir: <img src=”menu.gif” alt=”Menu” usemap=#menu”>
USEMAP: Atributo demonstrando que será utilizado um mapa na imagem e qual o nome do mapa utilizado (podde-se ter mais de um mapa para mais de uma imagem possuindo mapeamento).
A Tag MAP
Agora, observe como fica o código da tag <MAP>. Como resultado temos a imagem mapeada, com cada área colorida representando um link com uma página externa.
<BODY>
<img src="imagem_menu.gif" usemap="#menu" border="0">
<map name="menu">
  <area shape="rect" coords="11,13,115,52" href="http://www.fb.org.br" alt="Item 1">
  <area shape="rect" coords="11,55,114,94" href="http://www.ev.org.br" alt="Item 2">
  <area shape="rect" coords="11,99,114,137" href="http://www.educacao.org.br" alt="Item 3">
  <area shape="rect" coords="11,142,114,180" href="http://educamaisacao.fb.org.br" alt="Item 4">
  <area shape="rect" coords="11,184,115,221" href="http://www.fb.org.br" alt="Item 5">
</map></BODY>
A Tag AREA
Acompanhe abaixo e observe a tag <MAP> com o atributo mapname="nome_do_mapa" e, em seguida, a tag <AREA>, definindo o tipo de forma, as coordenadas e o link com o qual a forma se relacionará.
<area shape=”forma” coords=”x,y,x,y...” href=”URL”>
Area – Delimita a área da imagem que irá conter o link
Shape – Seus valores podem ser rect, para retângulos, circle, para círculos e polygon, para polígonos.
Coords – Coordenadas X e Y que delimitam a forma.
HREF – Endereço (URL) do documento com determinada área da imagem.

Materiais relacionados

Perguntas relacionadas

Materiais recentes

Perguntas Recentes