[HTML 2.0] Introdução ao Desenvolvimento Web

INTRODUO AO DESENVOLVIMENTO WEB

HTML

Introduo ao PGINA EM BRANCO Desenvolvimento WEB - HTMLVerso 2.0Este documento aborda tpicos tcnicos e conceituais utilizados na criao da pgina Web, atravs da linguagem de

Licena e Apresentao

1


HTML

Este livreto pertence a Carlos A. Majer, Consultor de TI e Professor Universitrio de Tecnologia da Informao. Ele encontra encontra-se disponvel em www.carlosmajer.com.br/web

Introduo ao Desenvolvimento Web: HTML de Carlos Majer licenciado sob uma Licena Creative Commons Atribuio Atribuio-Uso nocomercial-Vedada a criao de obras derivadas 3.0 Brasil Vedada Brasil. http://creativecommons.org/licenses/by-nc-nd/3.0/br/ Isto significa que voc PODER copiar, distribuir, exibir e imprimir esta obra. Algumas restries existem:Voc NO PODER cobrar valor algum para distribuir esta obra. Caso tenha interesse comercial, entre em contato. Voc dever sempre fazer referncia ao autor: Carlos Majer. Voc no poder alterar ou derivar esta obra (mas poder cit-la em trabalhos). Caso tenha interesse em utilizar esta e obra como base para criao de material para sua empresa, escola ou instituio, entre em contato. Voc no poder utilizar este trabalho para fins ilegais, imorais ou de forma a denegrir ou prejudicar outras pessoas ou instituies. Para maiores informaes envie um e-mail para [email protected] ou [email protected] ou [email protected] Donativo O donativo representa um agradecimento e reconhecimento da importncia imento do trabalho do autor, bem como serve de incentivo para ele continuar desenvolvendo este tipo de material e disponibiliz-lo para o pblico. lo Caso acredite que este material tenha lhe ajudado, envie um e e-mail solicitando os dados da conta. Donativos a partir de R$ 5,00 so apreciados.Licena e Apresentao

2


HTML

DEDICATRIADedico este livreto aos alunos que conheci, de forma pessoal ou virtual, aos amigos e professores que compartilham os mesmos esforos e ideais, no sentido de se fazer a diferena, atravs da aplicao de uma educao de qualidade, na formao do aluno e cidado, aos diversos colaboradores e influenciadores, que atravs de seus esforos, via sites, artigos, e-mails, etc., compartilham seu conhecimento e experincia, no sentido da difuso da informao e conhecimento permitindo s pessoas que se esforam, a melhoria da qualidade de seu trabalho no dia a dia.

Licena e Apresentao

3


HTML

CONTEDOIntroduo Internet ..................................................................... 7 Funcionamento da World Wide Web ............................................ 7 Conectando-se na Grande Rede................................................... 8 IPs fixos e IPs dinmicos ............................................................. 8 Nmeros IPs e Resoluo de Nomes ............................................ 9 URL Uniform Resource Locator ................................................10 Protocolo ...............................................................................11 Host do domnio .....................................................................12 Nome do domnio. ..................................................................12 :Nmero da Porta ...................................................................12 A linguagem html ..........................................................................13 A pgina da Internet ..................................................................13 Elementos da pgina..................................................................14 Verso do HTML ........................................................................15 Extenso HTML ou HTM ? ..........................................................16 As marcas HTML ........................................................................16 Regras Bsicas para criao de marcas HTML ..........................17 Ciclo de vida ..........................................................................17 Propriedades da marca ...........................................................18 Marcas atuando como containeres...........................................19 Estrutura da pgina HTML ..........................................................20 Apresentao e Estilo .................................................................22 Marcas e elementos bsicos da pgina ........................................23 Cabealho ..............................................................................23 Pargrafos .............................................................................24 Quebras de Linha ...................................................................25 Comentrios ..........................................................................26 Estruturando contedos .............................................................26 Trabalhando com texto ..............................................................28 A marca PRE ..........................................................................28 Marcas de estilizao de texto mais utilizadas ..........................29 Entidades: Caracteres Especiais...............................................30 Estilizando cores no texto .......................................................32 Estilizando tamanhos do texto .................................................33

ndice

4


HTML

Estilizando fontes no texto ......................................................34 Imagens ...................................................................................36 Formatos de imagem mais utilizados na Internet ......................36 Inserindo imagens na pgina ..................................................37 Links .........................................................................................41 Criando Links Internos ............................................................43 Criando Links Externos ...........................................................46 Inserindo um link numa imagem .............................................47 Inserindo um link numa imagem externa .................................47 Abrindo o link numa outra pgina ............................................49 Tabelas .....................................................................................49 Tamanho das clulas numa tabela ...........................................50 Bordas ...................................................................................52 Inserindo ttulo / legenda numa tabela ....................................53 Cabealhos na tabela ..............................................................54 Cores nas Tabelas ..................................................................54 Trabalhando o Layout das tabelas ...........................................58 Agrupando elementos de tabelas.............................................65 Listas ........................................................................................67 Listas Ordenadas ....................................................................67 Listas No Ordenadas .............................................................69 Listas de Definio .................................................................72 Frameset...................................................................................73 Criando Frames ......................................................................76 Frame de Navegao ..............................................................78 Vantagens e desvantagens no uso de frameset ........................80 Quadros Inseridos (In-Line Frames) ............................................81 Formulrios ...............................................................................82 Criando formulrios ................................................................83 Mtodos de Envio de Objetos de Formulrios ...........................84 Elementos de Formulrios .......................................................86 Elemento Caixa de Texto ........................................................86 Elemento Senha .....................................................................89 Elemento Boto de Rdio ........................................................89 Elemento Caixa de Verificao.................................................91 Elemento Lista de Seleo ......................................................94 Elemento rea de Texto .........................................................95ndice

5


HTML

Elemento Conjunto de Campos ...............................................96 Elemento Boto ......................................................................97 Elemento LABEL .....................................................................98 Elemento Upload de Arquivo ...................................................99 Conjunto de caracteres ............................................................... 101 Lngua ........................................................................................ 104 Seu pblico ............................................................................. 104 XHTML ....................................................................................... 106 XML ........................................................................................ 106 Linguagem XHTML ................................................................... 106 DTD - Definio de Tipo de Documento .................................... 107 Tipo de documento: Transitional ........................................... 108 Tipo de documento: Strict ..................................................... 108 Regras do XHTML .................................................................... 109 Proibies ............................................................................ 113 DOCTYPEs padres .................................................................. 113 HTML 4.01 ........................................................................... 113 XHTML 1.0 ........................................................................... 114 Exemplos de Estrutura de Pginas ............................................ 114 XHTML Transitional .............................................................. 114 Concluso ................................................................................... 116 Marcas mais usadas ................................................................. 116 Html5 ..................................................................................... 117 Layout de Pginas para Internet ............................................... 118 Contato ................................................................................... 118

ndice

6


HTML

INTRODUO INTERNETFuncionamento da World Wide Web orld

D

urante a guerra fria, os Estados Unidos estavam muito preocupados com a fragilidade de seu sistema de telecomunicaes, e em particular, do que poderia acontecer caso sofressem um ataque dos soviticos, o que poderia interromper a comunicao entre alguns elos (ns) de sua rede (quartis generais, bases de silos, etc.), impedindo impedindo-os de uma pronta resposta a um ataque nuclear.

Em funo disto, foi criada a ARPANET rede ARPANET, experimental de telecomunicaes do Departamento de Defesa (DoD) dos Estados Unidos. Ela era composta por la diversos computadores e dispositivos conectados de tal forma que eles poderiam se comunicar atravs do uso de rotas alternativas para envio de dados. Assim, caso uma rota fosse comprometida, os pacotes de dados utilizariam outras rotas para chegar a seus destinos. No processo de criao e aprimoramento da ARPANET, diversas tecnologias de telecomunicaes foram criadas ou adaptadas. Protocolos, nmeros de identificao, mtodos de recuperao de erro e transporte de dados, dentre outros elementos, foram os desenvolvidos no sentido de viabilizar e maximizar o funcionamento desta rede. Com o tempo e o esfriamento da guerra fria, esta rede evoluiu e passou a ser utilizada tambm no meio acadmico, sendo posteriormente aberta para o pblico geral, resultando naquilo que hoje conhecemos como teia de alcance mundial (World Wide Web) ou Internet. 7

Introduo INTERNET


HTML

Atualmente, a Internet caracteriza-se por ser uma grande rede de dispositivos, em sua maior parte computadores, que se interligam atravs de um grande cabo imaginrio (backbone), atravs do qual os dados fluem, o que permite que as pessoas se comuniquem, trocando informaes em velocidades cada vez maiores.

Conectando-se na Grande RedeNo momento da conexo de um computador com a rede, este recebe um nmero IP (Internet Protocol). Este nmero IP serve como identificao nica, para este computador. Isto quer dizer que num determinado momento, cada dispositivo conectado na tem sua identificao que nica, e que possibilita ele ser localizado e identificado por outros dispositivos. Quando um usurio se conecta num provedor de acesso, como por exemplo, no IG , um de seus servidores gera um nmero IP para este computador. Neste momento, este computador faz parte da rede de computadores do IG, passando a ter acesso Internet. O processo anlogo em qualquer outro provedor, como por exemplo, do Virtua ou aJato .

@

Sendo um dispositivo interligado na InternetNet, e tendo um nmero IP de identificao, ele pode efetuar consultas e solicitaes por servios na Internet. Da mesma forma, ele tambm passa a ser passvel de varreduras, podendo ser sondado, receber solicitaes de acesso, de servios e at ser invadido (ao menos enquanto estiver conectado na rede).

IPs fixos e IPs dinmicosA diferena entre uma conexo que utiliza um IP fixo e uma que utiliza um IP dinmico a de o IP fixo nunca muda. Exemplos tpicos de IPs fixos so os das servidores que hospedam pginas web. Exemplos tpicos de IPs dinmicos so aqueles utilizados por usuriosIntroduo INTERNET

8


HTML

de diversos tipos de provedores, especialmente os de conexo via linha discada, que ao conectar num provedor de acesso recebem um nmero IP que esteja disponvel, que provavelmente no ser (mas em alguns casos pode ser) igual ao da ltima vez que acessou.

Nmeros IPs e Resoluo de NomesCada byte, sendo composto de 8 bits pode conter at 256 combinaes diferentes (de 0 at 255). Um nmero IP um conjunto de 4 bytes separados por um ponto, utilizando este formato de endereamento de bits. Exemplo do site da UOL (outubro de 2010): 2010):200.221.2.45ping www.uol.com.br

Disparando www.uol.com.br dados: Resposta de 200.221.2.45: Resposta de 200.221.2.45: Resposta de 200.221.2.45: Resposta de 200.221.2.45:

[200.221.2.45] com 32 bytes de bytes=32 bytes=32 bytes=32 bytes=32 tempo=7ms tempo=8ms tempo=7ms tempo=8ms TTL=55 TTL=55 TTL=55 TTL=55

Estatsticas do Ping para 200.221.2.45: Pacotes: Enviados = 4, Recebidos = 4, Perdidos = 0 (0% de perda), Aproximar um nmero redondo de vezes em milissegundos: Mnimo = 7ms, Mximo = 8ms, Mdia = 7ms C:\>

O nmero IP de um servidor, pode ser mudado pel pela empresa, de forma que no seguro utilizar nmeros IPS em links permanentes. Como mais simples de se lembrar de um nome do que de um nmero IP, foi criada uma maneira para se utilizar nomes do que

Introduo INTERNET

9


HTML

nmeros. O servio DNS (Domain Name Server) efetua a resoluo de nomes, associando os nmeros IPs nomes (alias) que ficam armazenando em tabelas nos servidores da Internet, que efetuam constantes trocas de tabelas entre si, para ficarem sempre atualizados. Isto quer dizer que voc pode digitar no seu navegador tanto 200.221.2.45 quanto www.uol.com.br, para acessar o site da UOL. Que tal tentar?

URL Uniform Resource LocatorDiversos servios podem ser encontrados conectados na Internet. Os mais comuns so:Servidor WEB (Internet) Servidor FTP Servidor de e-Mails Servidor de Notcias Servidor de Banco de Dados nos computadores

Os computadores que tm softwares que provm (servem) estes servios so conhecidos como servidores. URL significa Uniform Resource Locator, ou seja, Localizador de Recurso Uniforme e a forma pela qual formatamos o endereamento para acesso a um determinado recurso da Internet. A Estrutura da URL definida da seguinte forma:1) Protocolo 2) Domnio 3) Porta de Acesso 4) Pasta URI significa Uniform Resource Identifier, ou seja, Identificador de Recurso Uniforme e a formatao para se acessar um recurso especfico, como por exemplo, uma pgina web.

Introduo INTERNET

10


HTML

Para formatamos um URI, adicionamos o nome do recurso na URL. Exemplo:1) Protocolo 2) Domnio 3) Porta de Acesso 4) Pasta 5) Arquivo Vamos ver estes itens em detalhe:-

ProtocoloO protocolo como se fosse uma lngua, que as partes utilizam para se comunicar. Em telecomunicaes, um protocolo a maneira pela qual as duas pontas (remetente e destinatrio) se comunicam, na troca de informaes (pacotes de dados). Em geral, um programa faz uma solicitao e o servidor sabe o que deve enviar. Um exemplo bem prtico disto o do navegador web solicitando uma pgina de um servidor. O usurio em seu navegador (cliente), tenta acessar uma pgina:-

Assim que o usurio teclar ENTER, o navegador, por padro, insere o texto HTTP (Hyper Text Transfer Protocol), na frente do nome de pgina:-

O navegador faz isto para que o servidor (computador que ir receber a solicitao, localizado no endereo fornecido acima) ao receber a solicitao de abertura de pgina consiga passar estaIntroduo INTERNET

11


HTML

responsabilidade (localizar e disponibilizar a pgina) para o software correto (software servidor web. Os mais conhecidos so Microsoft IIS Internet Information Services ou Apache). Sem o uso do protocolo, o servidor (computador) no saberia como tratar a informao que est vindo, para atender a demanda. Com base neste protocolo, o servidor web (software que est rodando no computador servidor) identifica a solicitao web (http), localiza a pgina desejada e devolve-a ao navegador. Os protocolos mais comuns so:Protocolo http:// ftp:// news:// file:// Utilizao Localiza um recurso (pgina www, imagem, etc) num servidor Web Localiza um arquivo num servidor FTP Localiza um servidor de notcias na Web Localiza um arquivo num computador ou rede local

Host do domnioQuando no informado, o host assumido como www.

Nome do domnio. o nome pelo qual seu domnio foi registrado na entidade de registro de domnios de seu pas. No Exemplo abaixo estar sendo utilizado o domnio da UOL (uol.com.br)

:Nmero da PortaComo um dispositivo (computador) pode ter diversos servios disponveis (veja lista acima) , e considerando que o endereo do dispositivo nico, a maneira pela qual ele disponibiliza seus servios atravs do uso de portas. As portas so identificaes especficas de certos servios, e muitas vezes sua utilizao se d de forma transparente, sem que o usurio note sua utilizao.Introduo INTERNET

12


HTML

Os navegadores esto configurados para acessar um endereo na Internet atravs da porta 80, que a porta padro para acesso web da Internet. Alguns exemplos de portas so:Porta Uso 20 e 21 Servio FTP 23 Telnet 25 SMTP - Simple Mail Transfer Protocol Para Envio de e-Mails 53 DNS Domain Name Server 80 INTERNET Porta de acesso para servio de pgina 109 e 110 POP Post Office Protocol Para Recebimento de eMails 119 NNTP Network News Transfer Protocol Para recebimento de Notcias Vamos destrinchar um endereo de um recurso na Internet:http://www.cidadesp.edu.br:8080/pastavirtual/docs/historia.html HTTP:// www.cidadesp.edu.br 8080 pastavirtual docs historia.html o protocolo padro da Internet Compe o computador host e domnio consultado Identifica uma porta no domnio consultado Identifica uma pasta dentro do domnio Identifica uma subpasta Identifica o recurso desejado que um arquivo/pgina

A LINGUAGEM HTMLA pgina da InternetHTML significa Hyper Text Markup Language, que traduzida para o portugus significa Linguagem de Marcao de Hipertexto. EstaIntroduo INTERNET

13


HTML

linguagem permite a utilizao de um conjunto de comandos para disponibilizao de contedo para Internet. A pgina web nada mais do que um arquivo HTML que um arquivo de texto, ou seja, pode ser aberto e editado pelo Bloco de Notas ou qualquer programa editor de textos simples como simples, Dreamweaver, Notepad++ e Microsoft Expression Web Web. Este arquivo, aps sua criao, copiado em conjunto com outros (imagens, vdeo, udio, etc.) para um computador (servidor) que tenha um software (Apache, IIS, etc.) que oferea pginas para Internet. Estes arquivos compem os elementos de um site que fica disponvel a quem acess-lo. O usurio acessar o arquivo, atravs de seu navegador, que o ler e interpretar seus comandos (marcas) de forma a exibir (desenhar) a pgina em seu monitor. Em funo de seu formato aberto, no proprietrio e padronizado, este tipo de arquivo pode ser visualizado em diversas plataformas, dentre elas Windows, Linux, Unix, Macintosh, nos mais diversos navegadores:-

Mozilla Firefox

Internet Explorer

Google Chrome

Apple Safari

Opera

KDE Konkeror

Elementos da pginaUma pgina web pode conter diversos tipos de elementos: elementos: Texto: o tipo de informao mais comum em pginas da : INTERNET. Costumam ser dispostos em diversos tamanhos e cores, despertando o interesse do usurio.

A Linguagem HTML

14


HTML

Link: O link a base de funcionamento da web, visto que se baseia no conceito de Hipertexto, no qual um texto (ou parte dele) ao ser clicado pode conduzir o usurio para um outro texto, localizado em qualquer local do documento (pgina). O mesmo ocorre com outros tipos de mdia (hipermdia). Imagem: Diversos tipos de imagens so utilizados para enriquecer a experincia do usurio na rede. Dentre elas podemos destacar as imagens estticas, geralmente nos padres JPEG e PNG, as imagens animadas no formato GIF. Animao principalmente as feitas em FLASH e Silverlight, como tambm as disponibilizadas pelo HTML5. Elementos de Formulrio: Os formulrios representam um meio para se coletar informaes do usurio, de forma padronizada. So utilizados para muitos fins, dentre eles o de se cadastrar o usurio no site para receber informaes, inserir pedidos de informaes especficas, efetuar buscas de informaes diversas, efetuar pedidos de compras, etc. Arquivo de udio: O arquivo de udio uma forma til e diferenciada para o envio de informao, especialmente quando o usurio tem problemas de acessibilidade (Exemplo: Dificuldades com a viso). Arquivo de Vdeo: Atualmente muito em uso, os arquivos de vdeo inseridos em pginas web permitem uma maior facilidade na transmisso da informao, alm do que, tambm serve como ferramenta de marketing e propaganda. Jogos e aplicaes Java: Diversos tipos de aplicaes esto sendo construdos para Internet atravs da utilizao da linguagem Java, dentre elas acesso a bancos, interfaces com dispositivos diversos, jogos e muito mais.

Verso do HTMLO HTML tem evoludo regularmente e a cada nova verso ele traz diferentes formas de se desenvolver a pgina Internet.

A Linguagem HTML

15


HTML

A verso atualmente em uso do HTML a 4.01, porm o mercado trabalha arduamente nas definies para liberao do HTML verso 5, que trar novos elementos e certamente ser um marco na histria desta linguagem. Neste meio tempo, uma fuso entre o HTML 4.01 e o XML (iremos verificar futuramente, neste documento) gerou o XHTML 1.0, que permite uma forma de padronizar o uso e funcionamento das tecnologias relacionadas ao uso e desenvolvimento de elementos na pgina web.

Extenso HTML ou HTM ?Pode ser utilizada tanto uma quanto a outra. Em funo de restries de alguns sistemas operacionais antigos (DOS), os arquivos s podiam utilizar trs letras em sua extenso. Hoje, no importa qual a extenso utilizada, pois ambas so vlidas e aceitas nos sistemas operacionais mais em uso.

As marcas HTMLAo examinarmos o contedo de um arquivo HTML, notamos a existncia de comandos, conhecidos tambm como marcas (ou tags, em ingls), que so lidas pelo navegador do usurio e instruem o navegador a inserir os contedos a ser exibido na tela. As marcas so conhecidas pelos especificao definida para o HTML. navegadores e seguem a

Isto significa que no correto escrever qualquer coisa. O HTML permite que voc escreva a marca em qualquer tipo de caixa (maiscula, minscula ou ambas, misturadas), porm, caso voc altere seu arquivo para XHTML (explicado adiante), voc dever deixar todas as marcas em minsculo.

A Linguagem HTML

16


HTML

Regras Bsicas para criao de marcas HTMLPara inserir uma marca HTML, devemos seguir algumas regrinhas: Toda marca comea com um sinal de menor e termina com um sinal de maior Logo aps o sinal de menor no pode existir espao (Se colocar no vai funcionar) A marca inserida deve ser reconhecida pelo navegador (caso contrrio, o navegador ir ignor-la) Exemplo de marca simples:-

A marca hr (do ingls Horizontal Ruler) instrui o navegador a desenhar uma linha horizontal. Esta linha rgua ocupa a linha inteira onde foi inserida.

Ciclo de vidaAtravs da continua evoluo da tecnologia, certas marcas HTML vo se tornando obsoletas (depreciadas), ou seja, deixando de ser utilizadas. Outras so trocadas por marcas ou tecnologias mais novas. Isto uma evoluo natural. O ciclo de vida das marcas HTML basicamente o seguinte:Concepo Proposta Especificao Depreciao Obsoletismo Fase Concepo Proposta Descrio Quando a marca concebida para uso em determinadas circunstncias. A marca (ou tecnologia) enviada para o W3C que ir verificar vantagens e viabilidade de implementao Ocorre quando uma marca (ou tecnologia) aceita pelo W3C e faz parte da especificao de uma verso do HTML. 17

Especificao

A Linguagem HTML


HTML

Depreciao

Obsoleta

Quando uma marca (ou tecnologia) trocada por outra melhor, mas deve ainda ser suportada pelos navegadores por questes de compatibilidade com verses de pginas anteriores. Quando uma marca (ou tecnologia) considerada obsoleta de forma que no existe mais garantia de is que a mesma ser suportada por um navegador.

Embora algumas marcas possam ser consideradas depreciadas, pois foram trocadas por outras mais consistentes com seu uso, comum o fato das mesmas continuarem a ser utilizadas por um bom tempo, at que a comunidade absorva e utilize com regularidade as novas terminologias. Isto significa que futuramente, certas marcas no passaro no teste de validao de pginas para Internet, mas isto algo a ser estudado futuramente. As definies sobre padres Internet so efetuadas pelo W3C World Wide Web Consortium. Nos prximos exemplos irei exibir apenas o trecho de cdigo HTML desejado. O desenvolvedor dever sempre digitar as sees da pginas HTML (, e com ), seus respectivos contedos e par finalizador. Os trechos exemplificados devero ser inseridos dentro da seo .

Propriedades da marcaA maior parte das marcas precisa de informaes complementares para definio do que deve como deve ser exibido na pgina do navegador. As propriedades das marcas so utilizadas para isto.

A Linguagem HTML

18


HTML

Elas podem ter valores informados que informam ou modificam a maneira pela qual o contedo ser visualizado pelo usurio. Exemplo de marca com propriedade e valor:-

A marca img, acima, exibe a imagem, no navegador, com base no arquivo imagem.jpg, informado na propriedade src (source = origem do arquivo).

Marcas atuando como containeresAlgumas marcas desenvolvem ao nica, como as exibidas nos exemplos acima. Porm, a grande maioria das marcas permite conter/encapsular algum tipo de contedo, como por exemplo, um trecho de texto. Ocorre que para isto necessrio que a marca funcione como um bloco (ou uma espcie de uma caixa), para conter este texto. Neste sentido, a marca inicia num determinado lugar e finaliza em outro.

Eu sou um pargrafoPara marcas que funcionam como containeres, o encerramento da marca determinado pelo seu par finalizador, que nada mais do que a prpria marca aplicada no final do contedo contido, porm, precedida de um sinal de barra / logo aps o sinal de maior >. Isto permite que a pgina HTML tenha elementos de diversos tipos (incluindo texto livre/solto). Veja:-

A Linguagem HTML

19


HTML

A pgina Web pode ter vrios elementos. O pargrafo um deles. Qualquer contedo inserido antes e depois da marca de pargrafo exibido em linhas diferentes. Isto algo que a marca p (pargrafo) faz automaticamente, na pgina HTML. ATENO Marcas criadas de forma incorreta:-

< hr> Marca tem um espao logo aps o sinal demenor

Marca no reconhecida pelos navegadoresEscreva as marcas em minsculo, assim, quando voc pensar em alterar seu arquivo do formato HTML para XHTML (comentado futuramente), sua pgina j estar parcialmente pronta.

Estrutura da pgina HTMLUma pgina HTML uma estrutura de marcas, dentro de outras marcas e, naturalmente, seus contedos. Ela delimitada pelas marcas:-

.... Dentro dela temos uma rea de cabealho, onde inserimos alguns comandos de configurao e criada atravs das marcas: marcas:-

.... Em seguida existe uma segunda rea, que a rea do corpo da pgina, que ir abrigar o contedo a ser exibido na tela do navegador. Esta rea criada atravs das marcas:-

....

A Linguagem HTML

20


HTML

A seguir notamos um exemplo da estrutura em cdigo HTML de uma pgina web:1 2 3 Minha primeira pgina 4 5 6 Seja bem vindo (a) minha primeira pgina HTML. 7 8 E em seguida como ela exibida no navegador Safari:-

A Linguagem HTML

21


HTML

Para verificar como est ficando sua pgina, salve salve-a numa pasta (diretrio) e em seguida abra atravs abra-a de seu navegador. Clicando duplamente no arquivo gerado ir automaticamente acionar seu navegador padro (Firefox, Microsoft Internet Explorer) para a abertura da pgina web. O contedo de uma pgina web fica em cache, que uma espcie de memria temporria que o seu navegador utiliza para agilizar o carregament de carregamento uma pgina. Muitas vezes, ao tentar abrir-se uma pgina, o se contedo que aparece o que est neste cache (e no a pgina que acabou de ser alterada e salva). Quando isto ocorrer, utilize o boto de recarga de pgina (geralmente F5) do Navegador para atualizar ) seu cache com o contedo atualizado da pgina.

Apresentao e EstiloAs marcas HTML permitem a insero de contedo na pgina web. O tipo mais comum de contedo o texto. Algumas marcas HTML podem ser usadas para estilizar um trecho de texto (Exemplo: Cor do texto, tamanho e famlia de fonte). Outras marcas tm propriedades

A Linguagem HTML

22


HTML

(cor de fundo, borda, etc.) que tambm podem ser usadas para estilizar o texto ou outro elemento HTML (tabelas, imagens, etc.). Com o advento do CSS (tecnologia que permite separar o contedo do estilo de apresentao), a apresentao dos contedos se d de maneira muito mais fcil e permite reduo do cdigo, reduo dos erros, rapidez na manuteno e na carga de pginas. Assim, logo aps o estudo do HTML, indico o estudo do CSS. O objetivo em mostrar a maneira pela qual o desenvolvedor pode estilizar os contedos atravs das marcas HTML, dentro deste livro, se d em funo da necessidade do conhecimento, pelo leitor, da linguagem HTML e suas possibilidades de uso.

Marcas e elementos bsicos da pginaCabealhoCabealhos so elementos de formatao similares (Ttulos, subttulos, etc.) aos encontrados em livros e documentos relacionados. Eles so criados atravs das marcas (Tamanho maior) at (Tamanho menor), so formatados em negrito e comportam-se como pargrafos. Exemplo:Cabealho do tipo h1 Cabealho do tipo h2 Cabealho do tipo h3 Cabealho do tipo h3 Cabealho do tipo h5 Cabealho do tipo h6

A Linguagem HTML

23


HTML

Quando uma marca de cabealho inserida na pgina, ela ocupar uma linha para seu contedo, deslocando elementos posteriores para a linha de baixo. Note que a marca aplica uma margem entre o elemento inferior e superior (para cima e para baixo).

PargrafosOs pargrafos so criados atravs da marca e de forma similar aos encontrados em livros, so utilizados para agrupar, num nico bloco, um trecho de texto. Exemplo:Eu sou um pargrafo Eu sou outro pargrafo

A Linguagem HTML

24


HTML

Note que de forma similar marca de cabealho, a marca de pargrafo tambm aplica uma margem entre o elemento inferior e superior (para cima e para baixo).

Quebras de LinhaQuebras de linha so criadas atravs da marca

.

Ela deve ser utilizada quando se deseja forar uma nova linha. Note que se esta marca for inserida no meio de um texto, o contedo aps esta marca exibido na linha de baixo. Exemplo:O contedo desta linha foi
quebrado para a linha
de quebrado baixo

Atualmente, no podemos ter a certeza onde a pgina ser exibida, isto , se num monitor de 23 polegadas widescreen, ou dispositivo do tipo Tablet (iPad), SmartPhone ou numa televiso. Querer forar um determinado layout atravs do uso de pargrafos, espaos e quebra de linhas pode no gerar o mesmo resultado o esperado, caso a pgina seja exibida em dispositivos diversos. o navegador quem verifica a resoluo de vdeo (nmero de linhas uo e colunas) e adapta o contedo a ser exibido, ajustando o texto e outros elementos da pgina, conforme o tamanho da janela no dispositivo utilizado. A configurao dos navegadores e a configurao do vdeo do usurio fazem com que seja muito difcil um em site ser exibido exatamente igual em doisA Linguagem HTML

25


HTML

navegadores diferentes. Caso voc tente inserir manualmente (digitando) diversos espaos ou quebras de linha () voc notar que o navegador ir ignor-los, trocandoos por um simples espao. Isto ocorre porque na viso da pgina HTML, o navegador deve ser capaz de desenhar a pgina HTML em diversas resolues e desta forma ele deve ser o responsvel em acomodar o contedo.

ComentriosComentrios podem ser inseridos no HTML atravs do uso das marcas

Exemplo: Eu apareo na pgina Eu tambm apareo na pgina

Estruturando contedosUtilizar texto dentro de uma pgina HTML bem simples. digitar o texto abaixo da marca body e o mesmo aparece no navegador, quando a pgina carregada. O texto inserido na pgina web ser exibido conforme a resoluo do dispositivo que est exibindo a pgina. Isto significa que de acordo com a resoluo deste dispositivo, o texto fluir at se acomodar na largura do dispositivo, fazendo uma quebra natural de seu contedo para as linhas seguintes.

A Linguagem HTML

26


HTML

Verificamos tambm que podemos inserir um trecho de texto dentro de um pargrafo (marca ), de um cabealho (marcas a ) e at forar a quebra de linha (marca
). Uma DIV funciona de maneira similar ao pargrafo, como um container que permite armazenar um determinado texto ou outros tipos de contedos. A diferena bsica entre um pargrafo e uma div que na exibio na pgina web, o pargrafo insere uma margem acima e abaixo do local onde foi criado, distanciando-se dos elementos prximos. Exemplo de criao de uma DIV:Sol Lua Mar

Resultado:Sol Lua Mar

O SPAN tambm uma forma de container. Porm, diferente de um pargrafo ou div, ele funciona como um elemento que mantm seu contedo na mesma linha (desde que este contedo no seja do tipo bloco). Exemplo de criao de um SPAN:Sol Lua Mar

Resultado:Sol Lua Mar

Ambos os elementos (div e span) so muito utilizados em conjunto com CSS, o que facilita o processo de estilizao e permite criar elementos em cores, fundos, fontes e tamanhos bem especficos.

A Linguagem HTML

27


HTML

Trabalhando com textoO ideal que o desenvolvedor, ao criar uma pgina HTML, estruture seu contedo, identificando os cabealhos, pargrafos, tabelas e outros tipos de informao necessrios, objetivando acomodar de maneira adequada o contedo a ser exibido. O HTML disponibiliza ao desenvolvedor um conjunto de marcas que possibilitam estilizar determinados trechos de textos.

A marca PREEsta marca faz com que o texto contido na mesma seja exibido de forma exata como digitado. Isto pode ser muito til quando queremos preservar a formatao de um trecho de texto. Exemplo: A funo abaixo foi desenvolvida em Javascript. Ela solicita um nome ao usurio e verifica se algo foi informado function PegaNome() { var lRet=true var nome='' while(nome=='' || (nome==null)) { nome=prompt('Favor informar seu nome:','') if ((nome=='') || (nome==null)) { alert('Nome em branco \nCampo Obrigatrio!!') lRet=false } } return lRet } A Linguagem HTML

28


HTML

Resultado:

Marcas de estilizao de texto mais utilizadasAlgumas marcas tm atributos que podem ser utilizados para destacar o texto atravs de aplicao de estilos visuais. Marca small big em strong sub sup ins del Descrio Diminui a fonte do texto Aumenta a fonte do texto Enfatiza um texto. Equivale marca Enfatiza um texto com maior intensidade (Negrito). Equivale marca Exibe o texto em formato subescrito Exibe o texto formato superescrito Utilizado para marcar um trecho de texto que foi inserido numa nova verso de um documento Utilizado para marcar um trecho de texto que foi eliminado de uma verso anterior de um documento * Equivalente s marcas e Exemplos:-A Linguagem HTML29INTRODUO AO DESENVOLVIMENTO WEBHTMLTexto Normal, TextoMaior, Texto Menor,Texto Enfatizado
Texto em Negrito, Texto Subescrito Texto Subescrito, Texto Superescrito
Texto Inserido numa nova verso de documento,Texto eliminado na nova verso do documento Resultado:-O W3C recomenda que toda estilizao visual de elementos na pgina HTML seja feita atravs de CSS. Algumas das marcas exibidas consideradas obsoletas pelo W3C. acima foramEntidades: Caracteres EspeciaisMuitas vezes queremos inserir um caractere especfico na pgina HTML. Como por exemplo, o caractere de sinal de menor. Ocorre que certos caracteres (como neste caso) tm significado e uso especial (reservado) pelo HTML. No caso do sinal de menor ( Maior que & E comercial Aspas duplas ' Aspas simples Centavo Libra Yen Pargrafo de documento Copyright Marca Registrada Multiplicao Diviso Mais e Menos Graus a minsculo com til a maisculo com til o minsculo com til o maisculo com til C cedilha minsculo C cedilha maisculo Entidade < > & " Caractere Entidade Tabela de Entidades mais comunsPrefira sempre inserir as entidades na pgina do que caracteres especiais (como por exemplo, caracteres acentuados). Com isto, voc ter a certeza de que a pgina ser visualizada de forma correta, independente da configurao do navegador.A Linguagem HTML31INTRODUO AO DESENVOLVIMENTO WEBHTMLSabe quando voc abre uma pgina e ela mostra caracteres estranhos, no lugar dos caracteres acentuados? Provavelmente o que aconteceu que ela no carregou a tabela de caracteres correta, ou seja, o charset. Para prevenir esta situao, sempre defina esta tabela de caracteres e preferencialmente utilize as entidades informadas na tabela acima.Estilizando cores no textoPara estilizar cores, tamanhos e famlias de fontes em trechos de texto, o HTML disponibiliza a marca . Esta marca funciona com os seguintes atributos:A palavra cu est na cor azul.O desenvolvedor pode selecionar uma cor pelo seu nome em ingls conforme a tabela de cores (mencionado mais para a frente neste documento) RGB (mistura das cores Red vermelho, Green Verde e Blue Azul) reconhecida pelos navegadores, conforme regras do W3C. Segue abaixo a tabela de cores padro definida na especificao do HTML 4.Cor Amarelo Azul Azul Claro Azul Marinho Branco Cinza MarromA Linguagem HTMLHTML Yellow Blue Aqua Navy White gray maroonCDIGO HEXA RGB FFFF00 255,255,0 #0000FF 0,0,255 #00FFFF 0,255,255 #000080 0,0,128 FFFFFF 255,255,255 808080 128,128,128 800000 128,0,0Exemplo32INTRODUO AO DESENVOLVIMENTO WEBHTMLTerra Prateado Preto Prpura Rosa Escuro Verde Verde Limo Verde Oliva Verde Teal Vermelhosilver black purple fuchsia green lime olive teal redC0C0C0 000000 800080 FF00FF 008000 00FF00 808000 008080 FF0000192,192,192 0,0,0 128,0,128 255,0,255 0,128,0 0,255,0 128,128,0 0,128,128 255,0,0O HTML 4 define o nome de apenas 16 cores (acima). Apesar disto, a especificao do CSS estendeu a tabela de nomes de cores e os navegadores implementam-na inclusive nas marcas HTML, que na utilizam nomes de cores. Veja uma lista da tabela de cores completa, contendo nomes e cdigos Hexa e RGB em:http://www.w3schools.com/css/css_colornames.aspEstilizando tamanhos do textoQuanto ao tamanho, o desenvolvedor tem a sua disposio a propriedade size, da marca . Os valores (tamanhos) variam . de 1 a 7. Exemplo:01 02 03 04 05 06 07 08 09 Propriedade SIZE da marca FONT Tamanho 1, Tamanho 2, Tamanho 3, 33A Linguagem HTMLINTRODUO AO DESENVOLVIMENTO WEBHTML10 11 12 13 14 15Tamanho 4, Tamanho 5, Tamanho 6, Tamanho 7, Resultado:-Estilizando fontes no textoAlgumas fontes podem existir num sistema operacional, mas no em outros (Windows, Linux, Mac-Os, Solaris, Unix, etc). Isto pode causar um problema, pois caso o sistema operacional no encontre a fonte definida pelo desenvolvedor, ele utiliza a fonte padro, o que pode fazer com que o texto fique com uma aparncia completamente diferente da esperada pelo designer. Neste sentido, o HTML oferece uma forma de informar diversas fontes para estilizao de um trecho de texto. Isto significa que se o sistema operacional no tiver instalada a primeira fonte da lista, ele tenta aplicar a segunda fonte e assim, consecutivamente. importante que o desenvolvedor conhea quais so as famlias de fontes mais comuns, que se caracterizam por serem fontes muito parecidas. 01 02 03 04 05A Linguagem HTML Propriedade SIZE da marca FONT 34INTRODUO AO DESENVOLVIMENTO WEBHTML06 07 08 09 10 Fam Arial, lia Helvetica, Sans-serif
Fam lia Times New Roman, Times, serif
Fam lia Courier New, Courier, mono
Famlia Georgia, Times New Roman, Times, serif lia
Famlia Verdana, Arial, Helvetica, sans-serif
Famlia Geneva, Arial, Helvetica, sans-serif 11 12 13 14Resultado:-AVISO A explicao de funcionamento dos elementos de estilizao de marcas HTML visa mostrar ao leitor que o HTML traz esta possibilidade. Entretanto, o W3C depreciou o uso destas propriedades e orienta o desenvolvedor a utilizar apenas CSS para estilizao dos elementos da pgina HTML. Isto significa que as pginas que utilizarem este tipo deA Linguagem HTML35INTRODUO AO DESENVOLVIMENTO WEBHTMLformatao podem no ser validadas pelos softwares de validao de pginas XHTML.ImagensUma imagem no realmente inserida numa pgina HTML. O que o HTML permite fazer informar ao navegador que se deseja exibir na pgina, um determinado arquivo que contm uma imagem. O arquivo da imagem deve existir em algum lugar na Internet. O desenvolvedor utiliza a marca e atravs da propriedade src, o desenvolvedor faz referncia ao local onde a imagem pode ser encontrada. Uma imagem pode estar:Na mesma pasta (diretrio) da pgina que est tentando exibi-la Numa pasta diferente da pgina que est tentando exibi-la Num endereo na Internet (site/servidor web)Formatos de imagem mais utilizados na InternetExistem diversos tipos de imagens que podem ser utilizados na pgina HTML. Podemos identific-las conforme a extenso de seu arquivo:-JPG Joint Photograph Experts Group um dos padres de imagem mais utilizados atualmente na Internet. Este formato tem seu tamanho real reduzido (nmero de bytes) em funo de uso de um algoritmo de compresso de dados, que pode alterar a qualidade da imagem. O usurio pode escolher o nvel de compresso que deseja aplicar. Quanto mais comprimido, menos qualidade se tem.A Linguagem HTML36INTRODUO AO DESENVOLVIMENTO WEBHTMLGIF Graphics Interchange FormatPadro de imagem com menor qualidade (limite de 256 cores) que implementa algoritmo de compresso de dados e entrelaamento (permite a carga parcial para rpida visualizao da imagem). Uma de suas interessantes caractersticas o fato de se poder armazenar num nico arquivo diversas imagens que ao serem trocadas seqencialmente criam a sensao de uma animao.PNG Portable Network GraphicsPadro de imagem que trabalha com 24 bits que permite exibir imagens que tenham grande nmero de cores. Este formato tambm permite trabalhar com transparncia. Isto quer dizer que uma imagem no precisa ser exatamente quadrada de forma que ao aplicarmos sobre um fundo digamos escuro, no aparece o fundo (Exemplo:quadrado branco ao redor da imagem) que em geral surge quando utilizado certos tipos de imagem.Inserindo imagens na pginaImagem existente na mesma pasta da pgina webImagine que temos os seguintes arquivos numa mesma pasta:Disney.htm: Pgina que voc est desenvolvendo. Simbolo2000.jpg: Imagem do smbolo das festas do ano 2000, que voc quer exibir na pgina Disney.htm. Para exemplificar estas situaes iremos utilizar as duas imagens abaixo:-A Linguagem HTML37INTRODUO AO DESENVOLVIMENTO WEBHTMLSimbolo2000.jpg Alce.jpg .jpgVoc poder carregar a imagem Simbolo2000.jpg na pgina Simbolo2000.jpg, Disney.htm atravs do uso da marca da seguinte forma: forma: Isto o suficiente para exibir esta imagem na pgina, considerando que ambos os arquivos (da imagem e da pgina) estejam na mesma pasta. AVISO Saiba que alguns navegadores (Exemplo: Firefox) diferencia a caixa (maiscula ou minscula) nos nomes de arquivos. Isto quer dizer que se o arquivo foi salvo todo em maisculo (Exemplo: SIMBOLO2000.JPG), e inser inserido na pgina como no exemplo acima, o Firefox no conseguir localizar este arquivo. Para que ele funcione, voc ter que informar na pgina o nome do arquivo exatamente como foi gravado no diretrio, letra por letra.A Linguagem HTML38INTRODUO AO DESENVOLVIMENTO WEBHTMLImagem existente em subpasta (dentro da pasta do projeto)Vamos imaginar agora outra situao: Na medida em que voc vai criando novas pginas e gerando novas imagens, voc percebe que existem muitos arquivos na mesma pasta, o que est lhe dificultando a tarefa de gerenciar estes arquivos. Algo que comum a se fazer neste caso separar as pginas web (arquivos HTML) numa pasta e as imagens em outra pasta. Exemplo:-Podemos verificar no exemplo acima que foi criada uma pasta de nome Projetos. Dentro dela, foi criada uma pasta de nome Disney que onde iremos inserir/criar as pginas web (HTML). Dentro desta ltima foi criada outra pasta de nome imagens, que onde sero inseridas todas as imagens do Projeto Disney. Para que isto funcione, precisaremos ento ajustar a marca que carrega a imagem, para considerar a mudana de pasta: Note que como a pasta imagens est dentro da pasta corrente/atual, precisamos apenas informar seu nome e uma barra para separar o nome do arquivo de imagem.Imagem existente em diretrio anterior ao do projetoVamos imaginar uma situao onde as imagens precisam estar disponveis para diversos projetos. Podemos viabilizar esta situao criando uma pasta imagens no mesmo nvel das pastas dos projetos. Exemplo:A Linguagem HTML39INTRODUO AO DESENVOLVIMENTO WEBHTMLNo exemplo acima podemos verificar a existncia de dois projetos (Canad e Disney). Ao criarmos a pasta imagens no mesmo nvel destes projetos, podemos utilizar os arquivos (as imagens) desta pasta em qualquer um dos projetos. Isto quer dizer que todas as imagens ficariam numa nica pasta e seriam acessveis por qualquer pgina (de qualquer projeto). Vamos ajustar nossa pgina Disney.htm para ver como fica? Antes de comear a explicar, para quem no conhece o funcionamento do sistema de pastas e diretrios, utilizamos barras para separar a informao de caminho quando navegar por diversas pastas. O exemplo abaixo significa que o arquivo carro.jpg est contido na pasta atual, dentro da subpasta imagens: Voltando nossa explicao, podemos verificar que o caminho a ser percorrido para encontrar a imagem desejada :-"../imagens/Simbolo2000.jpg"Utilizamos dois pontos (..) para voltar ao diretrio anterior, e em seguida entramos na pasta imagens para em seguida poder acessar o arquivo desejado.A Linguagem HTML40INTRODUO AO DESENVOLVIMENTO WEBHTMLUtilizando este mesmo exemplo para criao de uma pgina Canad, que precise carregar a imagem Alce.jpg, podemos ter a seguinte , pgina:-"../imagens/Alce.jpg"Note a semelhana para o acesso das imagens existentes na mesma ara pasta.Utilizando imagens existentes em outro siteVamos dizer que voc visitou um site e gostou de uma imagem e decidiu utiliz-la temporariamente na sua pgina, mas no quer la armazenar a imagem (o arquivo) em sei site. Vamos supor que este site se chame www.site.com.br, e a imagem , esteja numa pasta chamada cidades e seu arquivo (imagem) seja NY.png. Para voc utilizar esta imagem em seu site, o comando abaixo dever ser utilizado (em sua pgina): Voc pode referenciar qualquer imagem em seu site, isto , fazer uma referencia a uma imagem que exista em outro servidor/endereo web Voc deve informar a URL completa. (No sabe o que isto? Volte ao comeo desta apostila) A imagem pode sumir, de uma hora para outra, caso o administrador do site onde a imagem se encontra decida remov-laLinksOs links (ligaes) ou ncoras so elementos (trechos de texto, imagens, etc) utilizados para ligao/conexo com outros elementosA Linguagem HTML41INTRODUO AO DESENVOLVIMENTO WEBHTMLque podem estar na mesma pgina ou em outras pginas (de outros sites). Estes elementos podem ser de diversos tipos (pgina web, imagens, vdeos, etc) na Internet. Hipertexto denota um link baseado em texto enquanto que Hiperlink significa qualquer tipo de link. Hipermdia significa qualquer tipo de mdia (udio, vdeo, texto, grficos, etc) que tenha um link ativado. Um link executado ao ser clicado. Percebe-se a existncia de um se link quando ao posicionar-se sobre o link, o desenho do cursor muda se para uma mo. Em alguns casos, em se tratando de links baseados em texto, o estilo do texto fica sublinhado e numa cor diferente do resto do texto. A sintaxe para criao de um link : Contedo a ser mostrado na pgina Onde a letra a significa ncora, que serve como um aviso de referncia para algum local (interno ou externo), e em seguida temos o cdigo href que um atributo que identifica a URL destino a ser referenciada. Onde se l url, no comando acima, troque pelo , endereo completo da pgina a ser referenciada. Isto quer dizer que basicamente encapsulamos o contedo a ser exibido dentro das marcas e . Exemplo de criao de um link:Clique aqui para entrar no meu Site. Sempre insira o contedo de um atributo dentro de aspas duplas. Como ser verificada posteriormente, esta uma das regras do padro XHTML.A Linguagem HTML42INTRODUO AO DESENVOLVIMENTO WEBHTMLOs links podem ser de dois tipos: Links internos e links externos.Criando Links InternosUm link interno aquele que aponta para uma informao existente na mesma pgina. Vamos imaginar que temos um livro, em formato HTML (em pginas web) e num certo local do mesmo, precisamos inserir uma referncia a uma informao que se encontra detalhada no final da pgina. Podemos inserir um link, neste local de modo que ao ser clicado, a parte pgina que descreve esta informao detalhada exibida. No exemplo abaixo, temos um link no trecho de texto 4 Descrio de Caso de Uso:-A Linguagem HTML43INTRODUO AO DESENVOLVIMENTO WEBHTMLEste link, ao ser clicado, faz com que a pgina desa at localizar e exibir a informao desejada.A Linguagem HTML44INTRODUO AO DESENVOLVIMENTO WEBHTMLFigura 1-Exemplo de Links InternosCriando links / ncoras para elementos do mesmo documento.Um link para um elemento dentro da mesma pgina criado em duas a partes:O primeiro passo criar uma ncora identificada para um determinado local, que nada mais do que o local que queremos que seja exibido quando o usurio clicar no link. Exemplo: Dados do Cliente Neste exemplo, utilizamos a marca a (ncora) com o atributo name identificando uma determinada rea (neste caso, uma regio de texto) pelo nome de dados_cliente. Isto o que chamamos por . ncora identificada. O segundo passo colocar um link para esta rea, na mesma pgina. ta Exemplo:A Linguagem HTML45INTRODUO AO DESENVOLVIMENTO WEBHTMLConsulte os Dados do Cliente para saber mais a respeito.ncoras identificadas so geralmente utilizadas para se criar um ndice no incio ou final de um documento. Exemplo de utilizao de ncora identificada. Introduo De acordo com as regras do W3C World Wi........ Os padres de desenvolvimento web es web devem...................................... Clique aqui para voltar ao topo de pgina.Criando Links ExternosA criao de links externos funciona referenciando-se a URL completa se que se deseja ligar. No exemplo abaixo, temos um trecho de texto que um link para o site da Unicid (que ser aberto na janela aberta, do navegador) e navegador): Unicid No exemplo abaixo, temos um trecho que um link o IP do UOL (em fevereiro de 2009), abrindo a pgina ndex.html: UOL 46A Linguagem HTMLINTRODUO AO DESENVOLVIMENTO WEBHTMLInserindo um link numa imagemVamos imaginar que desejamos inserir uma imagem em nossa pgina (brubovnik.jpg) e criar um link, nesta imagem, para o site da cidade de Dubrovnik (http://www.dubrovnik http://www.dubrovnikonline.com/)Exibir uma imagem na pgina HTML um comando relativamente simples. Neste exemplo assumo que o arquivo da imagem dubrovnik.jpg e encontra-se na pasta imagens, se existente no mesmo nvel da pgina web editada.

Documents

[HTML 2.0] Introdução ao Desenvolvimento Web