(HTML 2.0) Introdução Ao Desenvolvimento Web

INTRODUO AO DESENVOLVIMENTO WEB
HTML
Introduo ao PGINA EM BRANCO Desenvolvimento WEB - HTML

Verso 2.0
Este documento aborda tpicos tcnicos e conceituais utilizados na criao da pgina Web, atravs da linguagem de
Licena e Apresentao
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 cmajer@uol.com.br ou contato@carlosmajer.com.br ou cmajer@ig.com.br 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
HTML
DEDICATRIA
Dedico 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
HTML
CONTEDO
Introduo 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
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 .........................................................95
ndice
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
HTML
INTRODUO INTERNET
Funcionamento da World Wide Web orld
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 Rede

No 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 dinmicos

A 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 usurios
Introduo INTERNET
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 Nomes

Cada 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.45
ping 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
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 Locator

Diversos 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:-
Protocolo
O 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 esta
Introduo 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 domnio
Quando 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 Porta
Como 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 HTML
A pgina da Internet
HTML significa Hyper Text Markup Language, que traduzida para o portugus significa Linguagem de Marcao de Hipertexto. Esta
Introduo 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 pgina
Uma 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 HTML
O 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 HTML
Ao 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 HTML

Para 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:-
<hr>
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 vida
Atravs 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 (<html>, <head> e <body> com <body>), seus respectivos contedos e par finalizador. Os trechos exemplificados devero ser inseridos dentro da seo <body>.
Propriedades da marca
A 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:-
<img src="imagem.jpg">
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 containeres

Algumas 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.
<p>Eu sou um pargrafo</p>

Para 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. <p> O pargrafo um deles.</p> 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 de

menor
<linha> Marca no reconhecida pelos navegadores

Escreva 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 HTML

Uma pgina HTML uma estrutura de marcas, dentro de outras marcas e, naturalmente, seus contedos. Ela delimitada pelas marcas:-
<html> .... </html>

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

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:-
<body> .... </ body >
A Linguagem HTML
20
HTML
A seguir notamos um exemplo da estrutura em cdigo HTML de uma pgina web:1 <html> 2 <head> 3 <title>Minha primeira pgina</title> 4 </head> 5 <body> 6 Seja bem vindo (a) minha primeira pgina HTML. 7 </body> 8 </html> 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 Estilo
As 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 pgina

Cabealho
Cabealhos so elementos de formatao similares (Ttulos, subttulos, etc.) aos encontrados em livros e documentos relacionados. Eles so criados atravs das marcas <h1> (Tamanho maior) at <h6> (Tamanho menor), so formatados em negrito e comportam-se como pargrafos. Exemplo:<h1>Cabealho do tipo h1</h1> <h2>Cabealho do tipo h2</h2> <h3>Cabealho do tipo h3</h3> <h4>Cabealho do tipo h3</h4> <h5>Cabealho do tipo h5</h5> <h6>Cabealho do tipo h6</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).
Pargrafos
Os pargrafos so criados atravs da marca <p> e de forma similar aos encontrados em livros, so utilizados para agrupar, num nico bloco, um trecho de texto. Exemplo:<p>Eu sou um pargrafo</p> <p>Eu sou outro pargrafo</p>
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 Linha
Quebras de linha so criadas atravs da marca
<br>.
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:<p>O contedo desta linha foi <br>quebrado para a linha <br>de quebrado baixo</p>
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 dois
A Linguagem HTML
25
HTML
navegadores diferentes. Caso voc tente inserir manualmente (digitando) diversos espaos ou quebras de linha (<ENTER>) 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.
Comentrios
Comentrios podem ser inseridos no HTML atravs do uso das marcas


Exemplo:<p> Eu apareo na pgina</p>  Eu tambm apareo na pgina
Estruturando contedos
Utilizar 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 <p>), de um cabealho (marcas <h1> a <h6>) e at forar a quebra de linha (marca <br>). 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 <div> Lua </div> 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 <span> Lua </span> 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 texto

O 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 PRE
Esta 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:<p> A funo abaixo foi desenvolvida em Javascript. Ela solicita um nome ao usurio e verifica se algo foi informado</p> <pre> 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 } </pre>
A Linguagem HTML
28
HTML
Resultado:
Marcas de estilizao de texto mais utilizadas

Algumas 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 <i> Enfatiza um texto com maior intensidade (Negrito). Equivale marca <b> 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 <strike> e <s>
Exemplos:-
A Linguagem HTML
29
HTML
Texto Normal, <big>TextoMaior</big>, <small>Texto Menor</small>,<em>Texto Enfatizado</em> <br> <strong>Texto em Negrito</strong>, <sub>Texto Subescrito Texto Subescrito</sub>, <sup>Texto Superescrito</sup><br> <ins>Texto Inserido numa nova verso de documento</ins>,<del>Texto eliminado na nova verso do documento</del> 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 foram
Entidades: Caracteres Especiais

Muitas 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 (<), este . caractere utilizado para definir o incio de uma marca. Se voc inserir um sinal de menor, o navegador vai entender que voc est informando uma marca. Como voc iria exibir na tela o texto abaixo?
...caso x < 5, ento...
A Linguagem HTML
30
HTML
Para que possamos trabalhar com alguns caracteres reservados (como no exemplo acima) ou especiais, o HTML disponibiliza trechos de textos especiais conhecidos como entidades. Caractere Espao < Menor que > 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 comuns
Prefira 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 HTML
31
HTML
Sabe 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 texto

Para estilizar cores, tamanhos e famlias de fontes em trechos de texto, o HTML disponibiliza a marca <font>. Esta marca funciona com os seguintes atributos:A palavra <font color="blue">cu</font> 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 Marrom
A Linguagem HTML
HTML Yellow Blue Aqua Navy White gray maroon
CDIGO 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,0
Exemplo
32
HTML
Terra Prateado Preto Prpura Rosa Escuro Verde Verde Limo Verde Oliva Verde Teal Vermelho
silver black purple fuchsia green lime olive teal red
C0C0C0 000000 800080 FF00FF 008000 00FF00 808000 008080 FF0000
192,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,0
O 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.asp
Estilizando tamanhos do texto

Quanto ao tamanho, o desenvolvedor tem a sua disposio a propriedade size, da marca <FONT>. Os valores (tamanhos) variam . de 1 a 7. Exemplo:01 02 03 04 05 06 07 08 09 <html> <head> <title>Propriedade SIZE da marca FONT</title> </head> <body> <font size="1">Tamanho 1, </font> <font size="2">Tamanho 2, </font> <font size="3">Tamanho 3, </font> 33
A Linguagem HTML
HTML
10 11 12 13 14 15
<font size="4">Tamanho 4, </font> <font size="5">Tamanho 5, </font> <font size="6">Tamanho 6, </font> <font size="7">Tamanho 7, </font> </body> </html>
Resultado:-
Estilizando fontes no texto

Algumas 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 05
A Linguagem HTML
<html> <head> <title>Propriedade SIZE da marca FONT</title> </head>
34
HTML
06 07 08 09 10
<body> <font face ="Arial, Helvetica, sans-serif "> Famí Arial, ília Helvetica, Sans-serif </font> <br> <font face ="Times New Roman, Times, serif"> Famí ília Times New Roman, Times, serif </font> <br> <font face ="Courier New, Courier, mono"> Famí ília Courier New, Courier, mono </font> <br> <font face ="Georgia, Times New Roman, Times, serif"> Família Georgia, Times New Roman, Times, serif </font> lia <br> <font face ="Verdana, Arial, Helvetica, sans-serif"> Família Verdana, Arial, Helvetica, sans-serif</font> <br> </font> <font face ="Geneva, Arial, Helvetica, sans-serif"> Família Geneva, Arial, Helvetica, sans-serif</font> </font> </body> </html>
11 12 13 14
Resultado:-
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 de
A Linguagem HTML
35
HTML
formatao podem no ser validadas pelos softwares de validao de pginas XHTML.
Imagens
Uma 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 <img> 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 Internet

Existem 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 HTML
36
HTML
GIF Graphics Interchange Format

Padro 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 Graphics

Padro 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 pgina

Imagem existente na mesma pasta da pgina web
Imagine 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 HTML
37
HTML
Simbolo2000.jpg Alce.jpg .jpg
Voc poder carregar a imagem Simbolo2000.jpg na pgina Simbolo2000.jpg, Disney.htm atravs do uso da marca <img> da seguinte forma: forma:<img src ="Simbolo2000.jpg"> 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 HTML
38
HTML
Imagem 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:<img src ="imagens/Simbolo2000.jpg"> 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 projeto

Vamos 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 HTML
39
HTML
No 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? <img src ="../imagens/Simbolo2000.jpg"> 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:<img src ="imagens/carro.jpg"> 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 HTML
40
HTML
Utilizando 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 site

Vamos 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):<img src ="http://www.site.com.br/cidades/NY.png"> 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-la
Links
Os links (ligaes) ou ncoras so elementos (trechos de texto, imagens, etc) utilizados para ligao/conexo com outros elementos
A Linguagem HTML
41
HTML
que 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 :<a href ="url"> Contedo a ser mostrado na pgina </a a> 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 <a href...> e </a>. Exemplo de criao de um link:Clique <a href ="http://www.carlosmajer.com.br /"> aqui </a> 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 HTML
42
HTML
Os links podem ser de dois tipos: Links internos e links externos.
Criando Links Internos

Um 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 HTML
43
HTML
Este link, ao ser clicado, faz com que a pgina desa at localizar e exibir a informao desejada.
A Linguagem HTML
44
HTML
Figura 1-Exemplo de Links Internos
Criando 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:<a name ="dados_cliente"> Dados do Cliente </a> 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 HTML
45
HTML
Consulte os <a href ="#dados_cliente"> Dados do Cliente </a> 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.  <a name ="inicio"> <h1>Introdução</h1></ ></a> <p> De acordo com as regras do W3C World Wi........</p> </p>  <p>Os <strong>padrões de desenvolvimento web es web<strong> devem...................................... </p>  Clique <a href ="#inicio"> aqui </a> para voltar ao topo de página.
Criando Links Externos

A 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):<a href ="http://www.cidadesp.edu.br /"> Unicid </a> No exemplo abaixo, temos um trecho que um link o IP do UOL (em fevereiro de 2009), abrindo a pgina ndex.html:<a href ="http://200.98.249.120/index.html"> UOL </a> 46
A Linguagem HTML
HTML
Inserindo um link numa imagem

Vamos 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. <img src = imagens/dubrovnik.jpg"> O prximo passo encapsular o comando acima (abaixo em cinza) dentro de um link para o site da cidade de Dubrovnik: www.dubrovnik-online.com:<a href ="http://www.dubrovnik-online.com/"> <img src ="imagens/dubrovnik.jpg"> </a> O contedo em cinza acima, representa a imagem a ser exibida. Note que ela est encapsulada pelo comando que faz dela um link: <a href=...> e a </a>.
Inserindo um link numa imagem externa

Uma imagem externa nada mais do que um arquivo (de imagem) que se encontra num endereo web (URL). Isto ns j vimos como se faz, mas vamos fazer uma recapitulao.
A Linguagem HTML
47
HTML
Vamos imaginar que a imagem abaixo esteja no site http://www.site.com.br, numa pasta chamada imagens e seu nome de arquivo seja familia.png.
Voc deseja inserir esta imagem em seu blog (na sua pgina de blog), mas devido a restries deste site de blogs, a nica coisa que voc consegue fazer nele inserir textos. Como j visto anteriormente, voc pode fazer uma referncia (exibir na sua pgina) a uma imagem existente em outros sites. Neste caso, o comando HTML da sua pgina (de blog) para exibir esta imagem seria:<img src ="http://www.site.com.br/imagens/familia.png"> E pronto! A imagem aparece na sua pgina, como se ela estivesse no seu site. S que voc gostaria que, caso o usurio clicasse nesta imagem, o site acima fosse carregado. Para isto, devemos encapsular o comando/marca acima dentro de um link. Vamos l? <a href ="http://www.site.com.br/"> <img src="http://www.site.com.br/imagens/familia.png"> </a>
A Linguagem HTML
48
HTML
Pronto! Agora temos em nossa pgina uma referncia imagem que existe em outro site e a mesma um link para o site desejado.
Abrindo o link numa outra pgina

Quando o usurio clica no link existente na pgina, este link ser aberto na prpria pgina. Ocorre que as vezes queremos que este link seja aberto numa nova pgina. Para isto, podemos utilizar o atributo target, informando o valor _blank para definir onde o documento apontado pelo link ser aberto. No exemplo abaixo, uma nova janela ser aberta pelo navegador:<a href ="http://www.cidadesp.edu.br/" target = "_blank"> Unicid</a> Os outros valores para target so:_self: Abre o link na mesma pgina (padro) _parent: Abre o link na pgina pai (veja frameset) _top: Abre o link na pgina inicial (veja frameset)
Tabelas
O HTML possibilita a utilizao de tabelas, internamente divididas em linhas e clulas. Tabelas so criadas atravs das marcas <table>..</table>, sendo dividida em linhas atravs da marca <tr>..</tr>. As linhas so divididas internamente em clulas de dados atravs da marca <td>..</td> ou clulas de cabealho, atravs da marca <th>..</th>. Dentro da clula inserimos o contedo desejado (textos, imagens , listas, formulrios, etc.).
A Linguagem HTML
49
HTML
Quando no for especificado, o atributo border da tabela assumido com o valor zero (0), ou seja, a tabela no conter bordas. Exemplo de uma tabela sem borda:<table> <tr> <td>Linha 1, Clula 1</td> <td>Linha 1, Clula 2</td> </tr> <tr> <td>Linha 2, Clula 1</td> <td>Linha 2, Clula 2</td> </tr> </table>
Note que ao no utilizar-se borda numa tabela (exemplo acima), no se percebe a separao entre o contedo das diversas clulas.
Tamanho das clulas numa tabela

Usualmente, utilizamos uma nica clula para insero de contedo. Entretanto, existem alguns casos onde o contedo de uma clula pode ocupar mais do que uma linha ou coluna. Para estes casos, o HTML disponibiliza os seguintes atributos:-
Rowspan:
Possibilita informar tabela qual o nmero de linhas que uma clula ir ocupar. No exemplo, definimos que a primeira clula ir ocupar trs linhas:<table border="1"> 50
A Linguagem HTML
HTML
<tr> <th rowspan="3">Professores</th> <th>Projeto de Interfaces</th> <th>Sistemas</th> </tr> <tr> <td>Carlos</td> <td>Luciana</td> </tr> <tr> <td>Fernando</td> <td>Jadir</td> </tr> </table> Resultado:-
Colspan:Este atributo informa ao navegador o nmero de colunas que uma clula ir ocupar. Observe que no exemplo abaixo, informamos que as clulas de cabealho iro ocupar 2 colunas, cada uma:<table border="1"> <tr> <th colspan="2">Projeto de Interfaces</th> <th colspan="2">Sistemas</th> </tr> <tr>
A Linguagem HTML
51
HTML
<td>Carlos</td> <td>Fernando</td> <td>Eliana</td> <td>Wagner</td> </tr> </table> Resultado:-
Bordas
Para inserir uma borda numa tabela, utilizamos o atributo border, especificando a espessura da borda desejada. Se mudarmos a marca de criao da tabela acima, configurando-a para exibir a borda, teremos uma tabela com o seguinte layout:<table border="1">
Ao aumentarmos o tamanho da borda, temos alguns efeitos visuais interessantes:<table border="5">
<table border="25">
A Linguagem HTML
52
HTML
Determinando a cor das bordas

Podemos determinar a bordercolor. Exemplo:cor da borda utilizando o atributo
<table border="3" bordercolor="blue">
Alguns efeitos interessantes podem ser conseguidos com isto:<table border="25" bordercolor="green">
Inserindo ttulo / legenda numa tabela

O desenvolvedor pode inserir uma legenda, que ir acompanhar o layout da tabela. Para isto, ele utiliza-se da marca <caption>,logo aps abrir a marca <table>. Exemplo:53
A Linguagem HTML
HTML
<caption> Legenda/titulo da Tabela </caption> A legenda ser posicionada sobre a tabela, isto , antes da tabela ser exibida.
Cabealhos na tabela
Clulas de cabealho na tabela so definidas atravs da marca <table border="1"> <tr> <th> Cabealho </th> <th> Cabealho 2</th> </tr> <tr> <td> Linha 1, Clula 1</td> <td> Linha 1, Clula 2</td> </tr> <tr> <td> Linha 2, Clula 1</td> <td> Linha 2, Clula 2</td> </tr> </table>
<th>
Os cabealhos so centralizados na clula e em negrito.
Cores nas Tabelas

Tabelas podem ter suas linhas (e consequentemente suas clulas) configuradas para a utilizao de determinadas cores de fundo. Exemplo:A Linguagem HTML
54
HTML
<table border="1"> <tr bgcolor="yellow"> <th> Marca </th> <th> Uso </th> </tr> <tr> <td> <h1> a <h6></td> <td> Marcas de Incio de Cabealho</td> </tr> <tr bgcolor="cyan"> <td><p></td> <td> Marca de incio de pargrafo </td> </tr> <tr> <td> <table> </td> <td> Marcas de Incio de Tabela</td> </tr> <tr bgcolor="cyan"> <td><tr></td> <td> Table Row Inicia uma linha numa tabela</td> </tr> <tr> <td> <td> </td> <td> Table Data Inicia uma coluna numa tabela</td> </tr> </table>
A Linguagem HTML
55
HTML
A aplicao do atributo bgcolor pode ser feito em diversos elementos da tabela, dentre eles, nas marcas table, tr, th e td. O desenvolvedor pode modificar a cor de fundo de apenas uma clula (marca <td> ou <th>) de uma tabela, se assim o desejar. <table border="1"> <tr> <th> Aluno </th> <th> Resultado </th> </tr> <tr> <td> João </td> <td> Aprovado </td> </tr> <tr> <td> Joé </td> <td bgcolor="red"> Reprovado </td> </tr> <tr> <td> Marina </td> <td> Aprovada </td> </tr> </table>
A Linguagem HTML
56
HTML
Alm dos nomes de algumas cores, o navegador est preparado para reconhecer um cdigo de cor no formato RGB (Red-Green-Blue) que uma cor baseada na mistura das cores vermelha, verde e azul, conforme uma intensidade que varia de 0 a 255. O desenvolvedor deve utilizar o caractere # seguido por seis nmeros, onde cada dois nmeros representa a intensidade de cada cor (RGB). Trocando a cor de fundo = red, do exemplo acima, pela cor #FD9886, temos o seguinte resultado:<td bgcolor="#FD9886"> Reprovado </td>
A Linguagem HTML
57
HTML
Trabalhando o Layout das tabelas

Distanciamento das bordas
Em geral, o contedo da clula fica encostado s suas bordas. O atributo cellpadding da tabela, nos permite determinar uma distncia a ser aplicada, entre o contedo e as bordas das clulas. <table border="1" cellpadding="20"> <tr bgcolor="#999999"> <th> Marca </th> <th> Carro </th> </tr> <tr> <td> Wolkswagen </td> <td> Fox, Gol, Polo </td> </tr> <tr> <td> Fiat </td> <td> Palio, Siena, Marea </td> </tr> <caption> Modelos de carros mais vendidos por fabricante</caption> </table> Resultado:-
A Linguagem HTML
58
HTML
No cdigo acima, informamos um espao entre o contedo e as bordas de vinte pixels.
Distanciamento entre as clulas

De forma similar, podemos distanciar uma clula da outra atravs da utilizao do atributo cellspacing, na tabela. Alterando a linha de criao da tabela, no exemplo acima, temos o seguinte:<table border="1" cellspacing ="20"> Resultado:-
A Linguagem HTML
59
HTML
No caso acima, verificamos um distanciamento de 15 pixels entre uma clula e outra.
Caso juntemos ambas as opes temos o seguinte resultado:<table border="1" cellspacing ="15" cellpadding="20">
A Linguagem HTML
60
HTML
Alinhamento
O contedo das clulas de uma tabela pode ser alinhado. As opes existentes so de alinhamento horizontal (em sua largura) ou de alinhamento vertical (em sua altura).
Alinhamento Horizontal
Este tipo de alinhamento pode ser esquerda (normal), centralizado, direita ou justificado. O atributo que define o alinhamento o align e as opes so:left Exemplo:-
<th align="left">
center Exemplo:-
<th align="center">
right Exemplo:-
<td align="right">
A Linguagem HTML
61
HTML
justify Exemplo:-
<td align="justify ">

A tabela abaixo tem as colunas alinhadas da seguinte forma:Colunas de Cabealhos: Todas centralizadas e em Negrito (padro da marca <th>) Nome: Alinhada naturalmente esquerda Salrio: Alinhada direita Cargo: Centralizada Descrio: Centralizado Exemplo de tabela com os quarto alinhamentos:-
Cdigo da tabela exemplo:<table border="1" cellpadding="20"> <tr> <th width ="100"> Nome</th> <th width ="100"> Salário </th> <th width ="140"> Cargo </th> <th> Descrição</th> </tr> <tr>
A Linguagem HTML
62
HTML
<td> Claudia</td> <td align ="right"> R$ 2.750,00</td> <td align ="center"> Gerente de RH </td> <td width ="310" align ="justify"> Responsvel pelo Departamento Pessoal, Plano de Cargos e Salrios, Treinamento e Qualificao Pessoal.</td> </tr> <tr> <td> Marcos </td> <td align ="right"> R$ 3.280,00</td> <td align ="center"> Gerente Comercial </td> <td width ="310" align ="justify"> Responsvel pelos contatos com clientes, levantamento de pedidos, fechamento de vendas e faturamento da empresa.</td> </tr> <tr> <td> Roberto</td> <td align ="right"> R$ 7.970,00</td> <td align ="center"> Diretor Financeiro</td> <td width ="310" align ="justify"> Responsvel pelo controle e planejamento financeiro da empresa dentre eles: Caixa, Tesouraria, Previso Oramentria e Controle Bancrio.</td> </tr> </table>
Alinhamento Vertical
Este tipo de alinhamento pode feito com base no topo (alto), no meio (padro), no fundo (embaixo) ou na linha base da clula. Como dificilmente se utiliza a linha base, no irei explicar este atributo.
A Linguagem HTML
63
HTML
O atributo que define o alinhamento o align e as opes so:top Exemplo:-
<th valign="top">
middle Exemplo:-
<th valign="middle ">

bottom Exemplo:-
<td valign="bottom">
A tabela abaixo tem as colunas alinhadas da seguinte forma:Colunas de Cabealhos: Todas centralizadas e em Negrito (padro da marca <th>) Top: Alinhada no topo middle: Alinhada no meio Bottom: Alinha no fundo Note tambm que para se visualizar o alinhamento vertical, defini a altura (height) da clula com 50 pixels.
Cdigo da tabela exemplo:<table border="2"> <tr> <th> Topo </th> <th> Meio </th> <th> Fundo </th> </tr> <tr> <td valign="top" height="50"> Conteúdo
A Linguagem HTML
64
HTML
</td> <td valign="middle" height="50"> Conteúdo </td> <td valign="bottom" height="50"> Conteúdo </td> </tr> </table>
Agrupando elementos de tabelas

As marcas <thead>, <tfoot>e <tbody> podem ser opcionalmente usadas na estruturao de uma tabela. Elas possibilitam definir o cabealho, rodap e corpo de dados das tabelas. No exemplo abaixo definimos os itens de cabealho e rodap antes do grupo de dados (tbody) da tabela. No momento da exibio da tabela no navegador, a mesma ser exibida conforme sua estrutura de cabealho, dados e rodap. Exemplo:<table border="1"> <caption> Sua nota</caption> <tbody> <tr> <th>1</th> <td>Avaliação Presencial</td> <td align="center">8</td> <td align="center">6</td> </tr> <tr> <th>2</th> <td> Avaliação Continuada</td>
A Linguagem HTML
65
HTML
<td align="center">2</td> <td align="center">1,5</td> </tr> <tr> <th>3</th> <td> Comparecimento </td> <td align="center">75%</td> <td align="center">80%</td> </tr> </tbody> <thead> <tr> <th>Item</th> <th>Elemento Avaliado</th> <th>Nota Mxima</th> <th>Nota Obtida</th> </tr> </thead> <tfoot> <tr> <th align ="right" colspan="3">Resultado:</th> <td>Aprovado</td> </tr> </tfoot> </table>
A Linguagem HTML
66
HTML
Listas
Listas Ordenadas
Uma lista ordenada caracteriza-se por uma relao de elementos, se geralmente de mesmo tipo ou natureza, que so dispostos numa determinada ordem e numerados (quando o caso) automaticamente pelo navegador. Sua criao se d pela marca de abertura de listas ordenadas <ol> e em seguida pela criao dos itens de lista pela marca <li>. Cada Item de lista deve ter sua marca fechada </li> , bem como a lista </ol>. OL = Ordered List LI = List Item As listas inserem uma linha em branco antes e depois de seu comando de criao Para inserir itens encadeados, isto , como se fossem subitens da lista, deve-se criar uma nova lista, que pode ser ordenada ou no. Exemplo:<strong>Frutas Tropicais</strong> <ol> 67
A Linguagem HTML
HTML
<li>Banana</li> <ol> <li>Nanica</li> <li>Maça</li> </ol> <li>Laranja</li> <li>Abacaxi</li> </ol> Resultado:-
Atributos de Tipos de Estilo de Listas Numeradas

A configurao de uma lista numerada ser marcada por nmeros. O Atributo TYPE permite definir o estilo numrico de seus itens. Os atributos possveis so:Atributo Estilo A Letras do Alfabeto em Maisculo A Letras do Alfabeto em Minsculo I Nmeros Romanos em Maisculo i Nmeros Romanos em Minsculo 1 Lista em ordem numrica (padro) Tambm possvel misturar os tipos. Exemplo:<strong>Frutas Tropicais</strong>
A Linguagem HTML
68
HTML
<ol type="A" > <li>Banana</li> <ol type="i" > <li>Nanica</li> <li>Maça</li> </ol> <li>Laranja</li> <li>Abacaxi</li> </ol>
Listas No Ordenadas
A criao de listas ordenadas se d pela marca de abertura de listas ordenadas <ul> e em seguida pela criao dos itens de lista pela marca <li>. Cada Item de lista deve ter sua marca fechada </li> . No final, a lista tambm deve ser fechada pela marca </ul>.
UL = Unordered List <strong>Carros</strong> <ul> <li> Fiat </li>

A Linguagem HTML
69
HTML
<li> Ford </li> <li> GM </li> <li> VW </li> </ul> Resultado:-
Atributos de Listas No Ordenadas

Listas no numeradas so marcadas por um determinado desenho. O Atributo TYPE permite definir o estilo numrico de seus itens. Os atributos existentes so:Atributo circle square Disc Estilo Circulo Aberto Quadrado Fechado Losango Fechado
<strong> Carros Populares </strong> <ul> <li> Fiat </li> <ul type="circle"> <li> Uno Mille </li> </ul> <li> Ford </li>
A Linguagem HTML
70
HTML
<ul type="disc"> <li> Ka </li> </ul> <li> GM </li> <ul type="square"> <li> Corsa</li> </ul> <li> VW</li> <ul > <li> Gol</li> </ul> </ul> Resultado (no navegador Internet Explorer):-
Os bullets (marcas/cones/sinais) que precedem os ) itens de uma lista no ordenada variam conforme o navegador
A Linguagem HTML
71
HTML
Listas de Definio
Diferentemente de listas de itens, as listas de definio disponibilizam uma forma de se explicar o que significam certos termos. Os itens contidos nas listas de definio no tm marcao (de nmeros ou desenhos). A criao de listas ordenadas se d pela marca de abertura de listas de definio <dl> e em seguida pela criao dos termos da lista pela marca <dt>, e em seguida a criao da rea de explicao do termo, pela marca de descrio da definio <dd>. Exemplo:<dl> <dt>IBM PC</dt> <dl> <dd><strong>Personal Computer</strong>. Este termo ainda hoje muito utilizado para designar os computadores pessoais que fizeram muito sucesso por conta da poltica de vendas implementada pela IBM no comeo dos anos 80. </dd> <dt> AT</dt> <dd><strong> Advanced Technology </strong>. Este termo foi muito utilizado para designar os computadores da IBM, lanados aps o PC (8086), com destaque o 80286, processador muito conhecido como 286. </dd> </dl> Resultado:-
A Linguagem HTML
72
HTML
Dl = Definition List DT = Definition Term DD = Definition Data
Frameset
Frameset (Conjunto de Quadros) utilizado quando se deseja trabalhar a tela do navegador como um local separado por partes (reas) independentes. Cada rea pode tambm ser dividida em subreas atravs da criao de novos framesets. Por final, dentro das reas criadas temos o quadro (frame) que quem contem de fato o contedo. No exemplo abaixo temos um conjunto de quadros (frameset) estruturado em cinco colunas, cada qual contendo apenas um quadro (frame) em seu interior:-
A Linguagem HTML
73
HTML
Uma determinada rea pode ser subdividida em outras reas. No exemplo abaixo, o frameset (conjunto de quadros) est dividindo em trs colunas. A primeira coluna tem apenas um quadro. A segunda coluna est subdividida em 2 linhas (novo conjunto de quadros). E a terceira coluna est subdividida em 3 linhas (novo conjunto de quadros). Cada linha representa um quadro (frame).
A Linguagem HTML
74
HTML
Podemos notar com isso que um quadro (frame) parecido como uma clula de uma tabela. No exemplo abaixo, iremos verificar como uma estrutura de quadros baseado em linhas.
A Linguagem HTML
75
HTML
Quando o navegador trabalha com quadros (frames), ele trata o contedo de cada quadro separadamente, ou seja, o contedo de cada quadro (frame) advm de um arquivo .HTML, que carregado e manipulado de forma independente dos demais quadros.
Criando Frames
O primeiro passo na criao de quadros o estabelecimento do conjunto de quadros, atravs da marca <frameset>. Esta estrutura define como os quadros internos sero criados. O desenvolvedor dever informar se ele deseja separar o layout da pgina em linhas (rows) ou colunas (cols). Quando se utiliza a marca <frameset>, no permitido a utilizao da marca <body>, exceto quando ela for inserida dentro na marca <noframe>, que utilizada para navegadores que no entendem quadros. Exemplo de quadros utilizando linhas:<html> <frameset rows="10%, 10%, *"> <frame src="parte1.html "> <frame src="parte2.html "> <frame src="parte3.html "> </frameset> </html> Resultado do Layout da Pgina HTML:-
A Linguagem HTML
76
HTML
Exemplo de quadros utilizando colunas:<html> <frameset cols="10%, 10%, *"> <frame src="parte1.html "> <frame src="parte2.html "> <frame src="parte3.html "> </frameset> </html> Resultado do Layout da Pgina HTML:-
Na criao de quadros, deve-se prever o uso de navegadores que no tenham este recurso. Para isto, a marca <NOFRAME> deve ser utilizada. Exemplo:<html> <frameset rows="10%, 10%, *"> <frame src="parte1.html "> <frame src="parte2.html ">
A Linguagem HTML
77
HTML
<frame src="parte3.html "> <noframes> <body>  </body> </noframes> </frameset> </html> Um dos erros mais comuns quando o desenvolvedor insere a marca <frameset> dentro da marca <body>. As marcas em vermelho no exemplo abaixo esto incorretas:<html> <body> <frameset cols="10%, 10%, *"> <frame src="parte1.html "> <frame src="parte2.html "> <frame src="parte3.html "> </frameset> </body> </html>
Frame de Navegao
muito comum o desenvolvedor criar uma rea para navegao do site. O primeiro exemplo montar uma pgina baseada em conjunto de quadros (frameset) que ir carregar dois frames:Frame de nome MENU que carregar o arquivo menu.html Frame de nome CONTEUDO que carregar o arquivo contedo.html
A Linguagem HTML
78
HTML
Analisando o cdigo HTML

O primeiro arquivo ser o que contm a estrutura do conjunto de quadros. Vamos nome-lo como EXEMPLO.HTML. Este frameset baseado em duas colunas.
Primeira Coluna
A primeira coluna ter 200 pixels e a segunda o restante. Nela ser criado um quadro (frame) cujo nome menu e seu contedo vir do arquivo menu.html.
Segunda Coluna
A segunda coluna ocupar o restante da rea visvel da tela do navegador e se chamar contedo. Seu contedo vir do arquivo conteudo.html. Arquivo exemplo.html <html> <head> <title> Teste com Frameset</title> </head> <frameset cols="200,*"> <frame src="menu.html" name="menu"> <frame src="conteudo.html" name="conteudo">
A Linguagem HTML
79
HTML
</frameset> </html> O arquivo de menu criar dois links na tela, na rea contedo contedo. Arquivo menu.html <html> <head> </head> <body> <a href="parte1.html" target="conteudo"> Opo 1 - Clique aqui</a> <br> <a href="parte2.html" target="conteudo"> Opo 2 - Clique aqui</a> <br> </body> </html>
Vantagens e desvantagens no uso de frameset

Algumas dificuldades relacionadas no uso de quadros so: so:Voltar pgina anterior (Uso do boto VOLTAR) Imprimir a tela (como um todo) O desenvolvedor deve gerenciar cada um dos arquivos de cada frame No to fcil identificar o endereo que o frame aponta Por outro lado, o uso de quadros permite as seguintes vantagens: uintes vantagens:Certas partes da tela sempre permanecem visveis liberando o desenvolvedor da tarefa de ter que se preocupar com o que ele dever mostrar numa parte da tela do navegador A barra de navegao pode ser simplificada, e deixada apenas num dos quadros, sem ter a necessidade de existir nos s diversos arquivos .html Tem se verificado cada vez menos o uso de frames frameset, principalmente pelo fato de que alguns dispositivos no o implementam. Apesar disto, importante conhecer a forma pela qual ele podem ser criados,
A Linguagem HTML
80
HTML
caso seja necessrio seu desenvolvimento..
Quadros Inseridos (In-Line Frames)

possvel inserir quadros que ocupam um espao especfico dentro de uma pgina (ou de um quadro html) atuando como se fosse uma pgina independente do resto da pgina onde o mesmo est inserido. Isto permite ao desenvolvedor tratar uma determinada rea como se fosse uma pgina a parte, contendo um cdigo especfico. Exemplo:<html> <head> </head> <body> <table width="788" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="50" height="22"> </td> <td width="738" valign="top" align="center"> Veja o Site da Unicid no quadro abaixo:</td> </tr> <tr> <td height="163"> </td> <td align="top"> <iframe src="http://www.cidadesp.edu.br/" width="60%"> </iframe> </td> </tr> </table> </body> </html> Resultado:-
A Linguagem HTML
81
HTML
Formulrios
Um formulrio permite a coleta de informaes de um lado (cliente) para envio e provvel armazenamento (no servidor).
A Linguagem HTML
82
HTML
As aplicaes mais comuns so encontradas no preenchimento de informaes pessoais e/ou comerciais para envio de pginas dinmicas que armazenam tais informaes em banco de dados. Estas pginas dinmicas, desenvolvidas em linguagens de programao para web (CGI Common Gateway Interface, Perl, PHP, ASP, ASP.NET, etc.) recebem as informaes enviadas pela pgina do formulrio e manipulam-na de vrias formas:Abrem o banco de dados destino e gravam as informaes em suas tabelas Verificam a existncia de usurios cadastrados Verificam a validao de uma informao (Exemplo: senha) Outra possibilidade o envio de informaes atravs do uso do software de correio eletrnico.
Criando formulrios
Um formulrio criado atravs da marca <form>. Exemplo:<form name="frmCadastro" method="post" action="http://www.meusite.com.br/CadCliente.ASP"> ... ... Contedo a ser exibido ... E elementos (de formulrio) a serem exibidos na tela ... </form>
Propriedades da marca <form>
name
Define o nome do objeto de formulrio. No exemplo acima, o nome dado ao formulrio frmCadastro.
method
Define a maneira pela qual os objetos (e seus contedos) sero enviados para a pgina destino. No exemplo acima o mtodo a ser utilizado o POST (explicado abaixo)
A Linguagem HTML
83
HTML
action
Define qual a pgina destino dos dados. No exemplo acima, a pgina que ir tratar estes objetos a http://www.meusite.com.br/CadCliente.ASP
enctype
Propriedade onde se define o tipo de codificao usada no envio dos dados do formulrio. Muito utilizado quando se deseja enviar (upload) arquivos. Exemplo:-
... enctype ="multipart/form-data" ... Mtodos de Envio de Objetos de Formulrios

Existem dois mtodos para envio de (elementos de) formulrios:-
GET
o primeiro mtodo criado para envio de dados entre pginas da Internet. Caracteriza-se por enviar os dados (objetos e seus contedos) para a pgina destino utilizando a barra de endereos do navegador. Exemplo (O trecho de texto aps o ? conhecido como query string):-
http://www.site.com.br/gravar.php?codigo=00057& nome=Renata&idade=21&senha=123
Podemos verificar diversas restries em seu uso:-
A Linguagem HTML
84
HTML
Limitao no envio de caracteres

Isto ocorre em funo do uso da barra de endereos do navegador (que geralmente permite enviar 128 caracteres). Isto impossibilita envio de grande quantidade de informaes, bem como de arquivos.
Menor Segurana
Uma vez que as informaes so facilmente percebidas pelos usurios, j que os dados so exibidos na barra de endereos, ele pode alterar os valores na barra de endereo e executar a pgina destino com outras informaes.
Impossibilidade de Envio de Arquivos

Uma vez que este mtodo no consegue enviar caracteres especiais (Exemplo: Cdigos ASC 000, 255, etc.), o envio de arquivos no possvel, uma vez que eles costumam conter estes caracteres especiais. Vamos analisar novamente a query string? ?codigo=00057&nome=Renata&idade=21&senha=123 Verificamos que na URL existe uma chamada pgina gravar.php. Em seguida, temos o sinal de interrogao, que usado para iniciar a string de pesquisa (query string). Temos ento as seguintes informaes e valores:cdigo e seu valor 00057 nome e seu valor Renata idade e seu valor 21 senha e seu valor 123 A pgina gravar.php receber estes valores e provavelmente os gravar num banco de dados.
POST
Este um mtodo criado para superar as limitaes do mtodo GET.
A Linguagem HTML
85
HTML
Ele caracteriza-se por enviar para a pgina destino sem exibi r exibi-los na barra de endereos (como o mtodo GET faz). Isto significa que o usurio no consegue enxergar quais so os dados que esto sendo enviados. Apenas o endereo de destino exibido na tela. Permite o envio de grande quantidade de objetos, caracteres especiais e principalmente, o envio de arquivos. Para envio de arquivos, utilize o mtodo POST e informe, na marca <FORM>, a propriedade enctype com o tipo de encadeamento desejado.
Elementos de Formulrios
Diversos objetos podem ser criados dentro de um formulrio, cada qual deles prevendo uma forma de se coletar a informao desejada. Isto facilita o processo de entrada de dados, pois muitas vezes queremos apenas que o usurio informe algo do tipo Sim/No, ou em outros casos, escolha uma opo de uma srie. Desta forma, os dados podem ser digitados pelo usurio, selecionados atravs de uma lista ou clicados numa rea especfica.
Elemento Caixa de Texto

Este tipo de elemento caracteriza-se por uma rea onde o usuri se usurio poder digitar (ou visualizar) uma determinada informao textual e ocupa certo espao numa nica linha.
Sintaxe Bsica:<input type="text" name="NomeDoobjeto">
Propriedades deste objeto

Algumas propriedades do objeto caixa de texto so:A Linguagem HTML
86
HTML
Propriedade disabled="disabled"
Descrio Desabilita a entrada do objeto de forma que o usurio no consegue alterar seu contedo. O usurio consegue visualizar este objeto e perceber que seu valor est desabilitado para alterao, pois a cor do texto deste objeto modificada para cinza. Define o nome exclusivo do objeto. Tenha cuidado ao no informar um nome que j est sendo utilizado por outro objeto na pgina (ou numa funo Javascript). Determina n como sendo o nmero mximo de caracteres que pode ser inserido (digitado) neste objeto Trava o objeto, desabilita a entrada de dados, no permitindo sua edio pelo usurio. Determina como n o tamanho visual do elemento na tela Determina o valor (texto) inicial no objeto.
name="nome"
maxlength="n"
readonly= "readonly"
size="n" value="texto"
Exemplos:1) Criao de uma de caixa de texto nomeada como endereco:Digite seu endereço <input type="text" name="endereco"/>
A Linguagem HTML
87
HTML
2) Criao de uma de caixa de texto previamente preenchida com o texto So Paulo:Cidade:<input type="text" name="nome" value="São Paulo">
3) Criao de uma caixa de texto com tamanho 10 e que permite at 15 caracteres de digitao Nome:<input type="text" name="nome" maxlength="15" size="10" value="Carlos Majer">
4) Criao de uma caixa de texto o atributo readonly, o que no permite alterao de seu contedo Plano Anterior: <input type="text" name="planoAnterior" readonly="readonly" value="60 minutos">
5) Criao de uma caixa de texto o atributo disabled, o que no permite alterao de seu contedo e serve como indicao visual ao usurio de que o campo est desabilitado para alteraes Plano Anterior: <input type="text" name=" planoAnterior " disabled="disabled" value="60 minutos ">
A Linguagem HTML
88
HTML
Elemento Senha
Basicamente uma caixa de texto que mostra asteriscos quando o usurio digita alguma coisa. Uma de suas particularidades a de que quando o usurio clica no boto de VOLTAR, do navegador, este campo perde seu valor anterior ( limpo).
Sintaxe Bsica:<input type="password" name=" NomeDoobjeto"> Atributos So os mesmos do campo tipo texto. Exemplo:1) Criao de uma de caixa de senha identificada como senha:Digite sua senha: <input type="password" name="senha">
Obs: Exemplo capturado quando o usurio estava digitando a senha
Elemento Boto de Rdio

Botes de rdio permitem ao usurio selecionar uma nica opo, dentre diversas. Neste tipo de objeto, o desenvolvedor deve criar os diversos botes com o atributo name igual para todos. Assim, ele caracteriza um mesmo grupo de opes.
Sintaxe Bsica:<input type="radio" name=" NomeDoobjeto" value="ValorDoObjeto"> Primeira Opo a ser exibida <input type="radio" name=" NomeDoobjeto"
A Linguagem HTML
89
HTML
value="ValorDoObjeto"> Segunda Opo a ser exibida

Algumas propriedades deste objeto so:Atributo Descrio checked="checked" Determina um objeto pr-selecionado disabled="disabled" Desabilita a entrada do objeto de forma que o usurio no consegue alterar seu contedo. Visualmente falando, o usurio consegue perceber que este campo est desabilitado, pois a cor do texto deste objeto modificada para cinza. name="nome" Define o nome exclusivo do objeto. Tenha cuidado ao no informar um nome que j est sendo utilizado por um outro objeto na pgina, ou numa funo Javascript. value="valor" Determina o valor que ser enviado para a pgina destino (action) do formulrio ao submet-lo. Exemplos:1)Uma seleo de botes para se escolher o sexo da pessoa. <input type="radio" name="sexo" value="A"> Masculino <input type="radio" name="sexo" value="F"> Feminino
2)Uma seleo de botes com a opo VW selecionada e a opo FIAT desabilitada:<input type="radio" name="marca" value="A">Audi<br> <input type ="radio" name ="marca" value ="F" disabled="disabled">Fiat<br>
A Linguagem HTML
90
HTML
<input type ="radio" name ="marca" value ="V" checked = " "checked">VW<br>
Quando o usurio clicar no boto ENVIAR (boto submit do formulrio), a pgina destino ir receber o objeto de nome marca e o valor deste objeto ser uma das seguintes opes: A ou V, j que a opo Fiat (valor F) est desabilitada.
O nome boto de rdio uma analogia aos antigos rdios de carros, onde o ouvinte tinha que apertar um boto para escolher uma rdio pr-selecionada, e selecionada, quando assim o fizesse, um outro boto anteriormente travado (pressionado) seria solto.
Elemento Caixa de Verificao

As caixas de verificao permitem ao usurio selecionar uma determinada opo do tipo Sim/No (checado / no checado). comum encontrar formulrios com diversas opes, onde o usurio seleciona diversas opes de uma s vez. um modo sim simples e rpido que facilita a comunicao com o usurio.
Sintaxe Bsica:<input type="checkbox" name="NomeDoobjeto" value ="ValorDoObjeto"> Texto a ser exibido

Algumas propriedades deste objeto so:A Linguagem HTML
91
HTML
Atributo checked="checked" disabled="disabled"
name="nome"
value="valor"
Descrio Determina que o objeto j est selecionado Desabilita a entrada do objeto de forma que o usurio no consegue alterar seu contedo. Visualmente falando, o usurio consegue perceber que este campo est desabilitado, pois a cor do texto deste objeto modificada para cinza. Define o nome exclusivo do objeto. Tenha cuidado ao no informar um nome que j est sendo utilizado por um outro objeto na pgina, ou numa funo Javascript. Determina o valor que ser enviado para a pgina destino (action) do formulrio ao submet-lo.
Exemplos:1) Pergunta ao usurio se ele deseja receber e-mails:<input name="emails" type="checkbox" value="1">Desejo receber e-mails
Neste exemplo, o programa que receber o formulrio (definido em ACTION), ao avaliar o contedo da varivel de nome emails, poder receber o valor em branco (""), caso o objeto no esteja checado ou o valor "1", caso o objeto esteja checado. Exemplo de programa em ASP que avaliar o objeto emails:01 <html> 02 <head> 03 <title>Documento Teste de Caixa de Checagem</title> 04 </head> 05 06 <body> 07 <%
A Linguagem HTML
92
HTML
08 09 10 <br>") 11 12 13 14
emails=request("emails") if emails="1" then response.write("Voc dediciu receber e-mails Voc end if %> </body> </html> O objetivo de um objeto do tipo caixa de checagem ser avaliado pelo programa na pgina destino (ACTION do formulrio), que ir tomar uma determinada ao em funo de seu valor. O valor deste tipo de objeto est definido em seu atributo value.
2) Lista de aparelhos do escritrio. Alguns deles esto previamente selecionados e o aparelho Telex est desabilitado:Marque tudo que tiver em seu escritrio<br> <input type ="checkbox" name="Telex" value="Telex" disabled disabled= "disabled">Telex<br> <input type ="checkbox" name ="PC" value ="PC" checked="checked">Computador<br> <input type ="checkbox" name ="Internet" value = "NET">Internet<br> <input type ="checkbox" name ="Calculadora" value ="Calculadora Calculadora" checked="checked">Calculadora<br>
A Linguagem HTML
93
HTML
Elemento Lista de Seleo

As listas de seleo permitem ao usurio a escolha de uma dentre diversas opes. O atributo selected utilizado para selecionar um item default da lista , ou seja, ir mostrar um determinado quando da exibio da lista. O atributo value de cada elemento/opo da lista o que ser enviado para o ACTION do formulrio, quando de sua submisso.
<option value="volvo">Fiat</option>
<select name="carros"> <option value ="volvo">Fiat</option> <option value ="saab" selected="selected">Ford</option> <option value ="fiat" >GM</option> <option value ="audi">VW</option> </select> Resultado:-
A marca optgroup pode ser utilizada em conjunto para agrupar e destacar conjunto de opes, de forma a facilitar o entendimento das opes pelo usurio:<select name="cargo"> <option value ="nada" selected="selected">Escolha aqui</option> <optgroup label="Direo"> <option value ="dc">Diretor Comercial</option> <option value ="df">Diretor Financeiro</option>
A Linguagem HTML
94
HTML
</optgroup> <optgroup label="Gerencia"> <option value ="gerente">Gerente</option> <option value ="chefe">Chefia</option> </optgroup> <optgroup label="Operacional"> <option value = "responsavel"> responsvel </option> <option value ="operador">operador</option> </optgroup> </select>
Elemento rea de Texto

As reas de texto permitem ao usurio digitar informaes em formato de texto livre, de forma similar a qualquer editor simples de texto, como o bloco de notas. Exemplo:Observações<br> <textarea rows="6" cols="30" name="obs" >Digite seu texto aqui</textarea><br> <input type="submit" name="Submit" value ="Enviar">
A Linguagem HTML
95
HTML
O atributo rows define o nmero de linhas que o controle ir utilizar, enquanto que o controle cols define o nmero de colunas (caracteres). Caso deseje, o desenvolvedor pode deixar o controle com um contedo pr-determinando, inserindo-o entre suas marcas de abertura de fechamento, como no exemplo acima.
Elemento Conjunto de Campos

O elemento fieldset permite o agrupamento de objetos dentro de uma rea comum. Ao se utilizar a marca legend, o contedo da mesma exibido na borda do conjunto. <fieldset> <legend>Sexo</legend> <input type="radio" name="sexo" value ="M" checked="checked"> Masculino <input type="radio" name="sexo" value ="F">Feminino </fieldset>
A Linguagem HTML
96
HTML
Elemento Boto
Em geral, botes so utilizados dentro de formulrios para: Submeter um formulrio. Carregar/Limpar (reset) os campos de um formulrio, isto , os valores dos objetos do formulrio com suas informaes iniciais. Executar uma ao especfica, estando o boto geralmente associado uma rotina desenvolvida numa linguagem de programao. No exemplo abaixo, dois objetos de caixa de texto so criados. Caso o usurio preencha alguma informao e clique no boto LIMPAR, estes objetos tero seu contedo (texto digitado) zedrado. Caso o usurio clique no boto Enviar, estes objetos sero enviados para o endereo definido no atributo ACTION do formulrios:<form action="http://www.site.com.br/cad.php" name="cad" method="post"> Nome: <input type="text" name="nome" id="nome"><br> e-Mail: <input type ="text" name ="email" id="email"><br> <input type ="submit" value ="Enviar"> <input type ="reset" value ="Limpar"> </form>
No exemplo abaixo, foi criado um boto que ao ser clicado exibe uma mensagem:A Linguagem HTML
97
HTML
<input type="button" value="Clique-ME" onClick="alert('Fui Clicado !!!')">
Elemento LABEL
A marca LABEL permite associar um trecho de texto a um elemento de formulrio. <input type ="checkbox" name ="Item1" id ="Item1">Item 1<br> <input type ="checkbox" name ="Item2" id ="Item2">Item 2 <br><br> <input type ="radio" name ="botao" id ="tres" value ="Tres">Item 3<br> <input type ="radio" name ="botao" id ="quatro" value ="Quatro">Item 4<br> O comando label pode ser usado em diversos lugares:-<br> <label for ="Item2"><br> Clique aqui para alterar o Item 2 </label> <br> <label for ="quatro">Clique aqui para alterar o Item 4 </label>
A Linguagem HTML
98
HTML
Elemento Upload de Arquivo

Este elemento permite o envio de um arquivo para o destino especificado pelo atributo ACTION do formulrio. Exemplo:<form action="recebe.asp" method="post" name="form1" id="form1"> Selecione o arquivo a ser enviado:<input type ="file" name ="arquivo" id="arquivo"> <input type ="submit" value="Enviar"> </form>
A Linguagem HTML
99
HTML
Convm notar que a pgina destino, informada no ACTION quem ir tratar o arquivo, aceitando-o e/ou movendo-o para outra pasta.
A Linguagem HTML
100
HTML
CONJUNTO DE CARACTERES
O ASCII (ou ASC 2) uma forma criada (h muitos anos) para se permitir a utilizao de um conjunto grande de caracteres. Este conjunto previa que cada caractere teria um cdigo especfico. Desta forma, o cdigo 65 desta tabela (ASCII) pertence letra A (e assim consecutivamente). Na criao desta tabela, se pensou em armazenar alguns caracteres especiais, que poderiam ser utilizados tanto no vdeo quanto em outros dispositivos (Exemplo: Impressora). Com a utilizao da Internet e a necessidade de se exibir os caracteres especiais prprios de cada lngua (chins, croata, russo, portugus), verificou-se que o modelo ASCII era muito limitado. Em funo disto, criou-se o Conjunto de Caractere Universal (Universal Character Set - UCS) que composto de milhares de caracteres utilizados pelas linguagens mundiais. Os caracteres deste conjunto esto totalmente relacionados com o UNICODE. Eventualmente, novos caracteres podem ser inseridos ou atualizados. Grande parte dos caracteres pode ser encontrada nos teclados de computadores, mas perceba que em diversos pases, existem teclas especiais que representam caracteres regionais. A simples existncia deste conjunto de caracteres no o suficiente para que o navegador consiga interpretar a pgina HTML. O navegador precisa ainda saber o tipo de codificao que est sendo enviada pelo servidor, para preparar e formatar a pgina HTML com os caracteres corretos, esperados pela lngua do usurio (ou do desenvolvedor).
CONCLUSO
101
HTML
Apesar dos navegadores terem um padro de conjunto de caracteres (charset), o que ocorre que os servidores que enviam as pginas podem envi-las com um conjunto de caracteres no esperado, las muitas vezes em funo de alguma configurao interna do s servidor. As codificaes mais comuns utilizadas em pginas na Internet so o ISSO-8859-1 que tambm conhecida como Latin-1, usada por 1, muitas lnguas, como a portuguesa (e vrias outras lnguas ocidentais), bem como UTF-8, usada por servidores de lngu inglesa. 8, lngua O conjunto de caracteres desejado deve ser enviado ao navegador atravs do campo de cabealho de requisio HTTP http-equiv com o valor Content-Type, informando na propriedade , charset o conjunto de caracteres desejado. Para isto, o desenvolvedor deve utilizar a marca META:-
<META http-equiv="Content-Type" Type" content="text/html; charset=iso-8859 8859-1">

Note ainda que o navegador pode ter, em sua configurao padro, um conjunto de caracteres definido (exemplo:ISSO-8859 8859-1), porm, isto no garantia de que a pgina ser vista corretamente em todos os computadores. Coloque as declaraes META logo no incio da seo HEAD da pgina HTML. Isto far com que o servidor prepare para envio os campos do cabealho para envio ao navegador do cliente. As entidades (trechos de texto que representam caracteres especiais), podem ser utilizadas para exibir exatamente determinados caracteres, independente do charset definido na pgina. Exemplos:-
Conjunto de Caracteres
102
HTML
No exemplo abaixo, podemos notar como ficaria alguns de nossos caracteres (brasileiros) sendo utilizados na codificao ISSO ISSO-8869-6, tpica do alfabeto rabe:<html> <head> <META http-equiv="Content-Type" content="text/html; charset=ISO-8859-6"> </head> <body> ao </body> </html>
Alterando o conjunto de caracteres para ISSO-8859 8859-1 (Latin-1), podemos verificar a mudana na exibio de nossos caracteres: caracteres:<html> <head> <META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> </head> <body> ao </body> </html>
Ao desenvolver para INTERNET, certifique certifique-se de que todas as suas pginas utilizam um determinado conjunto de caracteres, principalmente as pginas
103
HTML
que inserem ou recuperam informaes de um banco de dados.
LNGUA
A possibilidade de informar ao navegador para qual lngua a pgina web foi desenvolvida traz diversas vantagens. Uma delas que torna possvel aos leitores de texto (software que permite que usurios com deficiente visual possam escutar as informaes da pgina) sintetizar a voz na lngua do usurio (caso tenha o banco de udio associado). Outras vantagens esto relacionadas s buscas contextuais, informaes geogrficas e exibio de informaes e elementos gramaticais (exemplo: uso de hfens).
Seu pblico
Em geral, uma pgina feita para um determinado pblico que utiliza uma nica lngua. Apesar disto, nada impede que existam trechos de texto em outras lnguas, na pgina web. Desta forma, para definir uma lngua que sirva para todo o documento, uma das opes existentes informar o atributo Lang, na insero da marca raiz html:-
<HTML lang="pt-br">
Caso voc utilize XHTML, voc tambm deve informar o atributo XML:Lang:-
<html lang="pt-br" xml:lang=" pt-br" xmlns= "http://www.w3.org/1999/xhtml">

possvel tambm informar a lngua utilizada atravs de cabealhos HTTP, informando no campo Content-Language a linguagem desejada, atravs da marca META. Exemplo:Conjunto de Caracteres
104
HTML
<meta http-equiv="Content-Language" Language" content="pt-br" />

Podemos ainda informar diversas lnguas que sero usadas dentro da pgina:-
<meta http-equiv="Content-Language" Language" content="pt-br, it, em-us" />

No exemplo acima, informamos que nosso pblico entende as lnguas: portugus do Brasil, Italiano e Ingls dos Estados Unidos. Partes da pgina podem conter definies de diversas lnguas: <body> <div lang="pt-br" xml:lang="pt-br"> <h1>Saudao</h1> <p>O senhor Jos esteve...</p> </p> </div> <div lang="hr" xml:lang="hr"> <h1>Pozdrav</h1> <p>Gospodin Josip je bilo...</p> </p> </div> </html> De acordo com o W3C prefervel que se utilize os atributos na marca HTML para escolha da lngua. Veja mais em:http://www.w3.org/TR/i18n-html-tech-lang/ lang/
105
HTML
XHTML
XML
Uma das grandes criaes na WEB foi a do XML (Extensible Markup Language Linguagem de Marcao Extensvel). Esta linguagem permite a criao de novas marcas dentro do corpo de uma pgina WEB, o que lhe permitir criar suas prprias marcas. Ela tem sido muito utilizada para criao de estruturas de dados relacionadas, similares aos dados encontrados em banco de dados. Esta pgina e sua estrutura podem ser acessadas e lidas, como se fizesse uma navegao numa tabela de banco de dados. O XML tem uma estrutura muito mais rgida de marcao quando comparada ao HTML.
Linguagem XHTML
Buscando a evoluo da linguagem e principalmente uma forma de padronizao do funcionamento das tecnologias de renderizao (desenho) e acesso aos elementos da pgina, foi criada a XHTML (Extensible HyperText Markup Language), nova linguagem de marcao para pginas da Internet que alia o HTML com restries e regras do XML. Em geral, pginas feitas em HTML podem rodar sem grandes problemas, mesmo que as regras na criao das marcas no sejam seguidas corretamente. O XHTML aplica regras mais rgidas para a criao de uma pgina web, de maneira a assegurar sua qualidade em desenvolvimento para
XHTML
106
HTML
criao de um documento bem formatado, possibilitando uma forma de se efetuar a verificao de erros em sua criao.
DTD - Definio de Tipo de Documento

Em suas verses iniciais, alguns navegadores lanavam tecnologias que funcionavam apenas em seus navegadores (e no em todos os navegadores existentes). Isto era vlido para diversas tecnologias: Marcas HTML, DOM (acesso aos elementos da pgina via Javascript), CSS, etc. Atualmente, os navegadores buscam formas de se adequar aos padres estabelecidos pelo W3C. Para que um navegador possa identificar se uma pgina foi desenvolvida especificamente para um determinado padro, foi criada a DTD (Document Type Definition). Em termos prticos, o desenvolvedor insere uma linha no comeo da pgina que serve para informar ao navegador qual o tipo de documento padro que est sendo utilizado. Desta forma, o navegador renderiza a pgina de acordo com o tipo definido. Assim, o navegador desenha a pgina e criar os elementos HTML e seus respectivos atributos, com base na estrutura legal do padro/tipo informado. Isto permite ao navegador saber quando ele deve desenhar uma pgina com base nas antigas tecnologias, ou se deve aplicar as novas tecnologias suportadas em definies de padres abertos do W3C. Um grande motivo para os desenvolvedores definirem o tipo da pgina fazer com que todos os navegadores saibam qual o tipo de documento pela qual a pgina (e seus elementos) foi desenvolvida e desta forma, desenhem-na de forma igual (ou bem similar).
XHTML
107
HTML
Tipo de documento: Transitional

O DOCTYPE Transitional deve ser utilizado quando a sua pgina est num meio termo, no que diz respeito ao funcionamento de padres, isto , voc aplicou algumas das regras de um padro (verses de HTML e XHTML), porm nem todas foram aplicadas. Um exemplo disto ocorre quando nem todas as marcas HTML que permitem implementao da apresentao foram transferidas para estilos CSS.
Tipo de documento: Strict

Neste DOCTYPE, as regras so as mais rgidas. Como abordado no exemplo acima, as questes relativas apresentao dos elementos na pgina web deve ser feita apenas e exclusivamente via CSS, sendo proibidas o uso de marcas e atributos de apresentao (x)HTML.
Elementos no permitidos no tipo Strict

center font iframe strike u Um elemento que no pode existir diretamente dentro do body o elemento imagem (img). Ele s pode ser inserido dentro de um elemento do tipo bloco (Exemplo: Dentro de uma div, ou pargrafo). No XHTML Strict, o elemento form no pode ter o atributo name (voc pode utilizar o atributo id). Diversos atributos tambm no so permitidos neste tipo de documento.
XHTML
108
HTML
Veja este interessante artigo de Roger Johansson, onde o autor lista todos os atributos e excees (em ingls):http://24ways.org/2005/transitional-vs-strict-markup Algumas obrigaes deste tipo de documento so:1) Deve conter as limitaes encontradas num dos arquivos DTD 2) O elemento html deve ser o elemento raiz (root) do documento 3) Deve conter a definio de um namespace XHTML Exemplo:-
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

4) Deve haver uma declarao DOCTYPE no documento, antes do elemento raiz:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Regras do XHTML
Suas regras bsicas so:1) Todas as marcas devem ter um par finalizador. As marcas que terminam em si (no usam par finalizador) devero ter em seu final uma barra, finalizando a marca. Exemplos usando Par Finalizador:<body> </body> , <p> </p> , <strong> </strong>
XHTML
109
HTML
Exemplos usando Barra Finalizadora:<br /> <hr /> <area shape ="circle" coords ="120,70,4" /> <img src="imagem.png" /> Incorreto:No exemplo abaixo, as tags <br> e <hr> esto sem a barra finalizadora da marca <br> Site Atual <hr> No exemplo abaixo, a marca <li> no foi finalizada <ul> <li>Primeiro Item </ul>
Insira um espao antes da barra fechadora, no caso de marcas sem par finalizador, para garantir a compatibilidade com navegadores antigos. 2) As marcas web devem ser corretamente aninhadas, isto , as marcas devem ser fechadas na ordem em que foram abertas (as ltimas marcas abertas devem fechar antes e na devida ordem). Exemplo:<p> A <i>Raposa</i> corria rapidamente pela <strong> floresta</strong> </p> Incorreto:<p> A <i>Raposa corria rapidamente pela <strong> floresta floresta</i>
XHTML
110
HTML
</strong> </p> 3) Os valores dos atributos de uma marca devem ser delimitados por um par de aspas. Exemplo:<input type ="text" name ="endereco" /> Incorreto:<input type =text name =endereco /> Todos os atributos devem ser identificados atravs de seu atributo name Exemplo:<input type ="checkbox" name ="chkMaior18Anos" /> Incorreto:<input type ="checkbox" /> 4) Todas as marcas e seus atributos devem ser criados atravs da utilizao de caixa baixa (letras minsculas) Exemplo:<textarea name ="observacoes">Digite seu texto aqui</textarea> Incorreto:<TEXTAREA name aqui</TEXTAREA>
="observacoes">Digite
seu
texto
5) O atributo id deve ser utilizado de forma nica nos elementos. Exemplo:<textarea id ="obs" name ="obs" >Digite seu texto aqui</textarea> Incorreto:XHTML
111
HTML
<textarea id ="obs" name ="obs" >Digite seu texto aqui</textarea> Observaes Complementares:-<br> <textarea id ="obs" name ="obs" >Digite o complement aqui Digite </textarea>
6) Todos os atributos devem ter seus valores informados explicitamente. Alguns atributos, no HTML, permitem que pela sua simples existncia dentro da marca, j se presumam sua utilizao. No XHTML, eles devem ser informados. Exemplo:<input type ="text" id="nome" name="nome" value="Carlos Carlos" disabled> Incorreto:<input type ="text" id="nome" name="nome" value="Carlos Carlos" disabled="disabled">
Exemplos de utilizao Exemplos de utilizao:<input type="text" id="nome" disabled="disabled" /> <input type="checkbox" id="ativo" checked="checked" /> Atributos que so em geral minimizados em sua digitao: digitao:compact="compact" checked="checked" declare="declare" defer="defer" disabled="disabled" multiple="multiple" nohref="nohref" noshade="noshade" nowrap="nowrap" noresize="noresize" readonly="readonly" ismap="ismap" selected="selected" 7) Todas as pginas devem comear com um elemento pai.
XHTML
112
HTML
<html> . . </html> 8) Todas as pginas devem ter um DOCTYPE:-
Proibies
O XHTML 1.0 probe que determinadas marcas contenham certas marcas. Marca a pre button label form No pode conter Outra marca a As marcas img, object, big, small, sub e sup As marcas input, select, textarea, label, button, form, fieldset, iframe ou isindex. Outra marca label Outra marca form
DOCTYPEs padres
Segue abaixo alguns exemplos de doctypes:-
HTML 4.01
Tipo de Documento: STRICT <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Tipo de Documento: TRANSITIONAL <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML
113
HTML
Tipo de Documento: FRAMESET <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0
Tipo de Documento: STRICT <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Tipo de Documento: TRANSITIONAL <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Outras declaraes podem ser consultas em:http://www.w3.org/QA/2002/04/valid-dtd-list.html Consulte as restries de atributos em XHTML1.0, abaixo:http://blackwidows.co.uk/resources/tutorials/xhtml/attributecomparison.php
Exemplos de Estrutura de Pginas

XHTML Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=http://www.w3.org/1999/xhtml xml:lang="en" lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
XHTML
114
HTML
<script type="text/javascript" src="common.js"> </script> </head> <body> <div id="container"> <div id="header"> </div> <div id="wrapper"> <div id="main"> </div> </div> <div id="footer"> </div> </div> </body> </html>
XHTML
115
HTML
CONCLUSO
Marcas mais usadas
<html> <head> <title> <body> <h1> ..<h6> <p> <div> <span> <br> <hr>  <img> ESTRUTURA Criao do documento HTML Seo de Cabealho Definio do Ttulo da Pgina Seo do Corpo Cabealhos Pargrafo Camada/rea Camada/rea na mesma linha Quebra de linha Linha Rgua Horizontal DIVERSOS
Imagem LISTAS <ol> Criao de lista ordenada <ul> Criao de lista no ordenada <li> Criao de item de lista LINKS <a href="URL"> Link Comum <a name="nome"> ncora nomeada <a href="#nome"> Link p/ ncora nomeada ESTILIZAO DE TEXTO <strong> ou <b> Negrito <em> ou <i> Itlico <pre> Texto Pr-Formatado <del> Texto Deletado <sub> Texto Subscrito <sup> Texto Sobrescrito
CONCLUSO
116
HTML
<bdo>
Texto com direo alterada ELEMENTOS DE FORMULRIO <form> Criao de Formulrio <label> Texto associado a um elemento formulrio <input type="text"> Criao de caixa de texto <input type="button"> Criao de Boto <input type="rdio"> Criao de Boto de Rdio <input type="check"> Criao de Caixa de Checagem <input type="file"> Criao de Caixa de Arquivo (upload) <textarea> rea de Texto <fieldset> Container para campos diversos <legend> Legenda de Fieldset <select> Lista de Seleo <option> Item de Lista de Seleo <optgroup> Grupo de Itens de Seleo TABELAS <table> Criao de Tabela <thead> Seo de Cabealho de Tabela <tbody> Seo de corpo de Tabela <tfoot> Seo de Rodap de Tabela <tr> Linha <td> Clula de dados <th> Clula de ttulo/cabealho <caption> Ttulo da Tabela <colspan="nmero"> Juno de clulas horizontais <rowspan="nmero"> Juno de clulas verticais
de
Html5
Atualmente, o mercado est agitado com o HTML5, que representa
CONCLUSO
117
HTML
uma nova especificao desta linguagem, com novas marcas que ficao prometem no apenas trazer novas funcionalidades embutidas diretamente no navegador, como facilitar a maneira pela qual desenvolvemos pginas para a Internet. Mas este um assunto para uma futura atualizao deste documento. Novos documentos de referncia esto sendo desenvolvidos abordando outras tecnologias para desenvolvimento web e estaro disponveis futuramente.
Layout de Pginas para Internet

Se num momento inicial da Internet, o layout das pginas de um site era construdo com base em tabelas (<table>), este momento h muito passou, e atualmente, estruturado com base em estilos CSS. o Incentivo-o a aprender CSS, pois esta tecnologia surpreendeu e facilita em muito o desenvolvimento de pginas para internet. ernet.
Contato
Coloco-me a disposio para troca de idias e comentrios, incluindo me sugestes de contedos e dicas, bem como a indicao de algum erro que possa ter passado despercebido. Grande abrao, contato@carlosmajer.com.br cmajer@uol.com.br Carlos Majer.
CONCLUSO
118
HTML
Caso se interesse por este livreto impresso, entre em contato comigo solicitando informaes de custo. Informe a cidade onde gostaria de receb-lo, bem como o tipo de envio (SEDEX, PAC, etc.), para que Eu possa calcular tambm o custo de envio.
Os livretos impressos tero um nmero de srie nico, anotado no quadro abaixo e esta contribuio, na forma de aquisio deste livreto, possibilitar a reviso e criao de futuras verses.
Nmero de Srie
Para receber maiores informaes sobre novas verses deste livreto, bem como sobre outros livros voltados ao uso da tecnologia web, cadastre-se na pgina abaixo:WWW.carlosmajer.com.br/web
CONCLUSO
119

(HTML 2.0) Introdução Ao Desenvolvimento Web

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

(HTML 2.0) Introdução Ao Desenvolvimento Web

Enviado por

Direitos autorais:

Formatos disponíveis

INTRODUO AO DESENVOLVIMENTO WEB

Introduo ao PGINA EM BRANCO Desenvolvimento WEB - HTML

INTRODUO AO DESENVOLVIMENTO WEB

INTRODUO AO DESENVOLVIMENTO WEB

INTRODUO AO DESENVOLVIMENTO WEB

INTRODUO AO DESENVOLVIMENTO WEB

INTRODUO AO DESENVOLVIMENTO WEB

INTRODUO AO DESENVOLVIMENTO WEB

INTRODUO AO DESENVOLVIMENTO WEB

Conectando-se na Grande Rede

IPs fixos e IPs dinmicos

INTRODUO AO DESENVOLVIMENTO WEB

Nmeros IPs e Resoluo de Nomes

INTRODUO AO DESENVOLVIMENTO WEB

URL Uniform Resource Locator

INTRODUO AO DESENVOLVIMENTO WEB

INTRODUO AO DESENVOLVIMENTO WEB

INTRODUO AO DESENVOLVIMENTO WEB

INTRODUO AO DESENVOLVIMENTO WEB

INTRODUO AO DESENVOLVIMENTO WEB

INTRODUO AO DESENVOLVIMENTO WEB

Extenso HTML ou HTM ?

INTRODUO AO DESENVOLVIMENTO WEB

Regras Bsicas para criao de marcas HTML

INTRODUO AO DESENVOLVIMENTO WEB

INTRODUO AO DESENVOLVIMENTO WEB

Marcas atuando como containeres

<p>Eu sou um pargrafo</p>

INTRODUO AO DESENVOLVIMENTO WEB

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

<linha> Marca no reconhecida pelos navegadores

Estrutura da pgina HTML

<html> .... </html>

<head> .... </head>

<body> .... </ body >

INTRODUO AO DESENVOLVIMENTO WEB

INTRODUO AO DESENVOLVIMENTO WEB

INTRODUO AO DESENVOLVIMENTO WEB

Marcas e elementos bsicos da pgina

INTRODUO AO DESENVOLVIMENTO WEB

INTRODUO AO DESENVOLVIMENTO WEB

INTRODUO AO DESENVOLVIMENTO WEB

INTRODUO AO DESENVOLVIMENTO WEB

Resultado:Sol Lua Mar

Resultado:Sol Lua Mar

INTRODUO AO DESENVOLVIMENTO WEB

Trabalhando com texto

INTRODUO AO DESENVOLVIMENTO WEB

Marcas de estilizao de texto mais utilizadas

INTRODUO AO DESENVOLVIMENTO WEB

Entidades: Caracteres Especiais

...caso x < 5, ento...

INTRODUO AO DESENVOLVIMENTO WEB

Tabela de Entidades mais comuns

INTRODUO AO DESENVOLVIMENTO WEB

Estilizando cores no texto

HTML Yellow Blue Aqua Navy White gray maroon

INTRODUO AO DESENVOLVIMENTO WEB

silver black purple fuchsia green lime olive teal red

C0C0C0 000000 800080 FF00FF 008000 00FF00 808000 008080 FF0000

192,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,0

Estilizando tamanhos do texto