Introduo ao Desenvolvimento de Aplicaes WEB

INTERNET
Aspectos Fundamentais
Prof. Giuliano Prado de Morais Giglio, MSc. profgiuliano@yahoo.com.br

O que a Internet?
A Internet uma rede capaz de interligar todos os computadores do mundo. O que faz a Internet to poderosa assim uma espcie de esperanto da informtica que atende pelas siglas TCP/IP (Protocolo de Controle de Transferncia/Protocolo Internet, em ingls). Todos os computadores que entendem essa lngua so capazes de trocar informaes entre si. Assim pode-se conectar mquinas de diferentes tipos, como PCs, Macs e Unix.

Definio tcnica
Internet se refere ao sistema de informao global que: (i) logicamente ligado por um endereo nico global baseado no Internet Protocol (IP) ou suas subsequentes extenses; (ii) capaz de suportar comunicaes usando o Transmission Control Protocol/Internet Protocol (TCP/IP) ou suas subsequentes extenses e/ou outros protocolos compatveis ao IP; e (iii) prov, usa ou torna acessvel, tanto publicamente como privadamente, servios de mais alto nvel produzidos na infraestrutura descrita.

Uma breve histria

A Internet originou-se da ARPAnet, nos Estados Unidos. O projeto foi iniciado pelo Departamento de Defesa americano em 1969, com o objetivo inicial de manter em funcionamento a rede de computadores e as informaes disponveis, mesmo sob um ataque nuclear, de modo que a comunicao entre as bases militares no fosse interrompida. Dez/1974 - primeira especificao formal A operao comeou com 80 servidores 1983 - ARPAnet adota o protocolo TCP/IP (900 hosts) 1984 - criado o Domain Name System fim dos investimentos ARPA 1989 - incio das primeiras redes comerciais Fim da ARPAnet 1990 - Brasil entra na Internet, com a criao da RNP 1992 - criao da Internet Society 1994 - Embratel passa a disponibilizar os servios de conexo Internet para usurios individuais e empresas 1995 - Ministrio das Telecomunicaes abre a explorao comercial destes servios para a iniciativa privada (sob superviso da RNP) http://orbita.starmedia.com/~hobbestimeline/ - Linha do Tempo da Internet do Hobbes http://www.ciberespaco.com.br/inetbr/ - Linha do Tempo da Internet no Brasil

Organizao
A Internet organizada na forma de uma malha. Se voc pretende acessar um computador no Japo, por exemplo, no necessrio fazer um interurbano internacional. Basta conectarse a um computador ligado Internet na sua cidade. Esse computador local est conectado a uma mquina em outro estado (ou pas) e assim por diante, traando uma rota at chegar ao destino. So mquinas de alta capacidade, com grande poder de processamento e conexes velozes, conhecidas como servidores, controladas por universidades, empresas e rgos do governo. Essa forma de funcionamento garante um custo baixo de conexo. Voc s precisa pagar a ligao local at o seu fornecedor de acesso. Essa empresa (ou instituio) cobra taxa mensal de cada usurio para cobrir, entre outros, os custos da conexo com a rede. Mesmo assim, voc paga o mesmo preo se enviar uma mensagem para o Japo ou para seu vizinho.

Principais Recursos:
E-mail (Correio Eletrnico) Listas de Discusso (Mailing List) Telnet FTP (File Transfer Protocol) Archie Gopher Veronica Usenet (NewsGroups) WWW (World Wide Web) Sistemas de busca MSN GoogleTalk Gerenciamento de Contedo

A Intranet o uso da tecnologia Internet na rede corporativa de uma empresa, isto , a transferncia de arquivos, a consulta informao e muitas outras aplicaes usadas regularmente na Internet, implantadas na rede interna de computadores para uso dos funcionrios e nos processos de negcios da empresa. Principais programas utilizados: Email Informaes que se utilizam dos protocolos http FTP News group Reunies virtuais Conversao via telefnica Acesso remoto com a rede corporativa Treinamento Listas de Discusso

WWW foi criado em 1989 no Laboratrio de Pesquisas Nucleares - CERN, em Genebra - Sua, com o objetivo de interligar os pesquisadores de vrios institutos atravs da Internet. WWW o recurso mais interessante da Internet e vem apresentando a maior taxa de utilizao entre os recursos da rede, sendo o maior responsvel pelo crescimento da net nos ltimos anos. WWW permite uma leitura no-linear dos documentos disponveis, espalhados pelo espao ciberntico. o ambiente grfico e em hipertexto da rede que permite voc navegar buscando informaes das diversas formas disponveis: textos e/ou recursos multimdia.

Hipertexto modelado como uma rede de componentes relacionados atravs de ligaes. A Multimdia ilustrada como uma apresentao genrica feita de uma coleo de componentes, porm os componentes so apresentados numa ordem definida pelo autor, diretamente relacionadas noo de tempo do modelo. A Hipermdia uma combinao do hipertexto com multimdia: cada componente do modelo de hipertexto em si uma apresentao multimdia.

Tempo

Tempo

Tempo

Tempo

Hipertexto

Multimdia

Hipermdia

Jamais houve uma mdia de distribuio como a web. Onde mais atingiria uma audincia em potencial de milhes de pessoas sem gastar uma fortuna com tempo, dinheiro e pesquisa para enviar seu trabalho a elas? independente de plataforma. A web no se importa se voc est usando uma estao Mac, Windows, Sun ou SGI. No h fronteiras geogrficas. Algum na Alemanha pode ver meu site com tanta facilidade quanto quem mora na outra esquina. Siegel

Definindo Elementos
O que HTML? O que uma pgina Web? O que uma pgina Html? O que uma Home Page? O que um Site ou Website? O que um Navegador? O que so Provedores de Acesso e de Presena? O que um Webdesigner? O que um Webmaster? O que um endereo de pgina ou URL? Que ferramentas so necessrias para programar em HTML?

Um hit qualquer arquivo baixado. Um hit pode ser uma pgina de texto, um grfico ou um filme ou arquivo de som que pode ser baixado. Assim, se tivermos uma grande pgina com 10 imagens, uma pessoa que chegar a essa pgina vai gerar 11 hits (se o navegador puder visualizar as imagens). Muitas pessoas confundem hits com acessos ou visitantes, o que faz a quantidade de 10.000 por volta de meio-dia parecer que o site est repleto de pessoas (quando na verdade no est). Os hits so os centavos da Web. Um acesso toda uma pgina servida. Os acessos (tambm denominados hits de pgina ou visualizao de pgina page views) so a menor unidade de registro porque podem nos ajudar a determinar onde as pessoas esto dentro do site. Um visitante a verdadeira nota de um dlar da Web. Infelizmente visitantes nicos so os mais difceis de se definir. Por isso h tanto incentivo para as pessoas se registrarem as pessoas so annimas quando visitam um site. Em geral, somente fao estimativas estudadas sobre o nmero de visitantes nicos em meu sites. Agora j esto disponveis programas para ajudar os webmasters a acompanhar os visitantes percorrendo os sites. Um visitante repetido a nota de dez dolres da Web. Se um visitante coloca a sua pgina no bookmark dele, significa que est desejando voltar. No ramo de pedidos pelo correio, uma pessoa assim denominada correspondente. Se as pessoas fazem pedidos de coisas no site, transformam-se de visitantes em clientes, o objetivo final. Um cliente o maior nvel de status que um visitante pode atingir. Um bom site esfora-se para transformar uma pequena porcentagem de surfistas espordicos em clientes. Siegel

Tudo o que maravilhoso para a web - acessibilidade total, compatibilidade de plataformas cruzadas, distribuio em rede e a tecnologia sempre atual - tem um obstculo em algum lugar na estrada da criao de imagens grficas. Numa pgina impressa, todos vem a mesma coisa. Uma pgina impressa tem dimenses fixas. Uma pgina impressa desenhada uma vez e permanece igual para sempre. Uma pgina impressa, depois de terminada, no pode ser alterada. Voc no consegue desenhar uma pgina que parecer igual sob todas as circunstncias sem ceder ao menor denominador comum. Diferenas entre navegadores, configuraes de monitores e questes de compatibilidade de plataformas so algumas das questes que os designers da web tm que se preocupar.

A usabilidade governa a Web. Mais diretamente, se o cliente no encontrar o produto, ele no o comprar. A Web o ambiente no qual o poder do cliente se manifesta no mais alto grau. Quem clica no mouse decide tudo. to fcil ir a outro lugar; todos os concorrentes do mundo esto a um simples clique do mouse. Jakob Nielsen

Determinando o objetivo do site A maioria das pequenas e mdias escalas de negcios, demonstram que os sites se destinam uma das duas funes principais (ou a combinao de ambas): informar e interagir. Informativo O valor de tal site est em sua capacidade de apresentar a informao desejada para sua audincia de forma organizada e fcil. Interativo So aqueles cujo sucesso est contido em caractersticas teis ou numa aplicao. Eles contam com um processamento pesado. Em HTML, o uso de formulrios o instrumento primrio na criao de interatividade.

Determinando a audincia do site Determinar a audincia de um site se torna mais difcil na medida em que voc utiliza elementos Web avanados. Muitos fatores influenciam a forma de desenhar e talhar um site para as necessidades e limitaes de seu usurio. Largura de banda Seus usurios so padro Net ou so famintos por largura de banda? Plataforma Que software de computador seu usurio est usando para ver seu site? Qual sistema operacional seus usurios esto usando? Qual o software navegador? Quais plug-ins ele tm?

Demografias Qual o perfil de seus usurios? Eles so pessoas bem ou mal informadas? A partir deste ponto, voc pode determinar se voc deve desenvolver uma interface sofisticada ou simples. Estes usurios tambm determinam a aparncia e impresso do seu site. Idade, cultura, e inmeras outras consideraes so tambm fatores significantes. Examinando o contedo Examine a atual prtica de comunicao e veja onde a web pode agregar valor. Olhe cada empresa individualmente, observe as atuais prticas de comunicao, e ento duplique e aumente no site o que eles j fornecem em termos de servios de informao. Para empresas maiores examine as atuais campanhas de marketing, seja coerente. Avalie a concorrncia na Web Tenha em vista onde sua abordagem pode incrementar o modelo da concorrncia e preste ateno particular como a concorrncia trata as limitaes tcnicas de seus usurios.

Introduo ao Desenvolvimento de Aplicaes WEB

HTML
HyperText Markup Language
Prof. Giuliano Prado de Morais Giglio, MSc. profgiuliano@yahoo.com.br

HTML (HyperText Markup Language - Linguagem de Formatao de Hipertexto) fruto do "casamento" dos padres HyTime e SGML.; HyTime - Hypermedia/Time-based Document Structuring Language HyTime (ISO 10744:1992) - padro para representao estruturada de hipermdia e informao baseada em tempo. Um documento visto como um conjunto de eventos concorrentes dependentes de tempo (udio, vdeo, etc.), conectados por webs ou hiperlinks. O padro HyTime independente dos padres de processamento de texto em geral. Ele fornece a base para a construo de sistemas hipertexto padronizados, consistindo de documentos que alicam os padres de maneira particular SGML - Standard Generalized Markup Language Padro ISO 8879 de formatao de textos: no foi desenvolvido para hipertexto, mas torna-se conveniente para transformar documentos em hiper-objetos e para descrever as ligaes. SGML no padro aplicado de maneira padronizada: todos os produtos SGML tm seu prprio sistema para traduzir as etiquetas para um particular formatador de texto. DTD - Document Type Definition - define as regras de formatao para uma dada classe de documentos. Um DTD ou uma referncia para um DTD deve estar contido em qualquer documento conforme o padro SGML. Portanto, HTML definido segundo um DTD de SGML.

1989 Inveno do Wolrd Wide Web - European Particle Physics Laboratory (CERN) 1990 - Timn Berners-Lee, um fsico do (CERN), desenvolveu a HTML. Os pesquisadores do CERN criaram um prottipo de navegador Web 1991 - um navegador Web pblico tornou-se disponvel 1992 o CERN comeou a promover a Web como ferramenta de informao e surgiu o navegador Web Mosaic. O World Wide Web Consortium (W3C) um grupo de pessoas responsveis pela determinao e publicao de padres da web. Seus membros so de pessoas e empresas comerciais interessadas na determinao do futuro da Web. O W3C aprova padres HTML e HyperText Transfer Protocol (HTTP). Sites sobre o assunto: www.w3.org/ www.w3.org/History.html www.boutell.com/faq/

Linguagem de Formatao de Hipertexto um conjunto de cdigos padro e convenes destinadas a criar pginas e enfatizar texto para apresentao em programas como os navegadores Web. A HTML o fundamento da World Wide Web. Trata-se de uma linguagem de marcao. A marcao da linguagem diz ao computador como tratar o contedo de um arquivo por meio de uma srie de caracteres especiais (tags) incorporados ao arquivo de texto.

Trata-se de uma nomenclatura especfica para indicar o endereo bsico e nico de qualquer documento que esteja sendo veiculado via Internet. A URL inclui trs componentes: protocolo://servidor/NomeDoArquivo Exemplo: http://www.universo.edu.br/semanadeinformatica/foto.jpg ftp://ftp.puc-rio.br

Normalmente, o arquivo index.html o arquivo default dentro de um diretrio. Quando indicamos um endereo para recuperao de um documento, e no especificamos um arquivo dentro de um diretrio, o browser procura pelo arquivo index.html. Se esse arquivo no existir dentro do diretrio, o browser retornar uma listagem dos arquivos contidos naquele diretrio, o que pode no ser nosso desejo. Esse arquivo default definido na configurao do servidor WWW.

Os documentos em HTML so como arquivos ASCII comuns, que podem ser editados em vi, textedit, bloco de notas, WordPad, ou qualquer editor simples. Para facilitar a produo de documentos, existem editores HTML especficos: Editores de texto fonte - inserem automaticamente as etiquetas, orientando a insero de atributos e marcaes. Ex.: 1stPage 2006, EditPlus, HomeSite, HotDog, HTMLed32, etc Editores WYSIWYG - oferecem ambiente de edio com um resultado final das marcaes. Ex.: MS - FrontPage, Macromedia DreamWeaver O documento produzido ter sempre extenso .html ou .htm
Podemos encontrar editores html para download nos sites: http://www.superdownloads.com.br/ http://www.editplus.com/download.html

Todo documento HTML apresenta elementos entre parnteses angulares (< e >); esses elementos so as etiquetas (tags) de HTML, que so os comandos de formatao da linguagem. A maioria das etiquetas tem sua correspondente de fechamento: <etiqueta>...</etiqueta> Isso necessrio porque as etiquetas servem para definir a formatao de uma poro de texto, e assim marcamos onde comea e termina o texto com a formatao especificada por ela. Alguns elementos so chamados vazios, pois no marcam uma regio de texto, apenas inserem alguma coisa no documento: <etiqueta> Todos os elementos podem ter atributos: <etiqueta atributo1=valor1 atributo2=valor2>...</etiqueta> As etiquetas HTML no so sensveis caixa. Traduzindo: tanto faz escrever <HTML>, <Html>, <html>, <HtMl>,

Estrutura de uma pgina html:

<!DOCTYPE HTML PUBLIC //W3C//TD HTML 4.0//EN>

<HTML> <HEAD> <TITLE>Ttulo do Documento</TITLE> ..... </HEAD> <BODY> texto, imagem, links, formulrios, ... </BODY> </HTML>

O cabealho <HEAD> contm informaes sobre o documento. Alm de <TITLE>, existem diversos outros campos de informao, sendo os campos <META> os mais usados. Os campos <META> tm dois atributos principais: NAME, indicando um nome para a informao HTTP-EQUIV, que faz uma correspondncia com campos de cabealho do protocolo HTTP; a informao desse campo pode ser lida pelos browsers, e provocar algumas aes.
<HEAD> <TITLE>Titulo do Documento</TITLE> <META NAME="nome" CONTENT="valor"> <META HTTP-EQUIV="nome" CONTENT="valor"> </HEAD>

Este documento, por exemplo, tem as seguintes informaes:

<HEAD> <TITLE>Atributos gerias de documentos em HTML</TITLE> <meta name=Author content=Giuliano Prado M. Giglio> <meta name=Description CONTENT=Tutorial - desenvolvimento Web.> <meta name=KeyWords CONTENT=HTML, WWW, Webdeveloper> <meta name="Generator" CONTENT="HTMLed32 Version 2.0c"> </HEAD>

Alguns desses atributos so inseridos automaticamente pelos editores.

Um exemplo de uso do atributo HTTP-EQUIV promover a mudana automtica de pginas. <HEAD> <TITLE> ... </TITLE> <META HTTP-EQUIV="Refresh" CONTENT="segundos; URL=pagina.html"> </HEAD> onde: pagina.html a pgina a ser carregada automaticamente segundos o nmero de segundos passados at que a pgina indicada seja carregada.

A aplicao mais utilizada a atualizao automtica de um documento que, por exemplo, tenha uma foto produzida por uma cmara de vdeo: pode-se forar, com o refresh, a atualizao dessa pgina, mostrando para o leitor sempre uma imagem mais atual de algum evento sendo focalizado pela cmara. Outra utilizao em chats, ou em pginas que desviem a navegao por documentos desenvolvidos para browsers avanados.

Atributos de <BODY> Atravs de atributos de <BODY>, podemos definir cores para os textos, links e para o fundo das pginas, bem como uma imagem de fundo (marca dgua):
<BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb ALINK="#rrggbb" VLINK="#rrggbb" BACKGROUND="URL">

BGCOLOR - cor de fundo (padro: cinza ou branco) TEXT - cor dos textos da pgina (padro: preto) LINK - a cor dos links (padro: azul) ALINK - cor dos links, quando acionados (padro: vermelho) VLINK - cor dos links, depois de visitados (padro: azul escuro ou roxo) Seus valores so dados em valores hexadecimais, equivalentes a cores no padro RGB (Red, Green, Blue). Exemplos: #FFFFFF, #804040, #000000. Existem tabelas de cores com esses valores, mas grande parte dos editores j oferece uma interface bem amigvel atravs da qual escolhemos as cores desejadas. Browsers que seguem a definio de HTML 3.2 tambm aceitam 16 nomes de cores, tirados da paleta VGA do Windows - por exemplo, podemos escrever BGCOLOR="BLUE". BACKGROUND - indica o URL da imagem a ser replicada no fundo da pgina, como uma marca dgua.

H seis nveis de cabealhos em HTML, de <H1> a <H6>:

<H1>Este um cabealho de nvel 1</H1> <H2>Este um cabealho de nvel 2</H2> <H3>Este um cabealho de nvel 3</H3> <H4>Este um cabealho de nvel 4</H4> <H5>Este um cabealho de nvel 5</H5> <H6>Este um cabealho de nvel 6</H6>

Este um cabealho de nvel 1

Este um cabealho de nvel 2
Este um cabealho de nvel 3
Este um cabealho de nvel 4
Este um cabealho de nvel 5
Este um cabealho de nvel 6

Os cabealhos tm atributos de alinhamento:

<H2 ALIGN=CENTER>Cabealho centralizado</H2> <H3 ALIGN=RIGHT>Cabealho alinhado direita</H3> <H4 ALIGN=LEFT>Cabealho alinhado esquerda (default)</H4>

Quebra de linha Quando queremos mudar de linha, usamos o elemento <BR>. Isso s necessrio quando queremos uma quebra de linha em determinado ponto, pois os browsers j quebram as linhas automaticamente para apresentar os textos. Com sucessivos <BR>, podemos inserir diversas linhas em branco nos documentos. Pargrafos - para separar blocos de texto, usamos o elemento <P>: Pargrafo 1; <P>Pargrafo 2. <P> tem atributo de alinhamento, como os cabealhos: <P ALIGN=CENTER><P ALIGN=RIGHT><P ALIGN=LEFT> alinhamento padro (default) Linha Horizontal - <HR> insere uma linha horizontal <HR SIZE=7> insere uma linha de largura 7 (pixels): <HR WIDTH=50%> insere uma linha que ocupa 50% do espao disponvel: <HR WIDTH=30% ALIGN=RIGHT NOSHADE> insere uma linha de comprimento 30% (do espao disponvel), alinhada direita, sem efeito tridimensional: <HR SIZE=30 WIDTH=2 ALIGN=LEFT> insere uma linha de largura 30, comprimento 2, alinhada esquerda.

Listas de Definio (listas de glossrio)

<DL> <DT>termo a ser definido <DD>definio <DT>termo a ser definido <DD>definio </DL> termo a ser definido definio termo a ser definido definio

Este tipo de lista muito utilizado para diversos efeitos de organizao de pginas, por permitir a tabulao do texto. Listas no-numeradas So equivalentes s listas com marcadores do MS Word:
<UL> <LI>item de uma lista <LI>item de uma lista, que pode ser to grande quanto se queira, sem que seja necessrio se preocupar com a formatao das margens de texto <LI>item </UL>

O atributo TYPE, assume os valores CIRCLE, SQUARE e DISC (default).

<UL TYPE=CIRCLE>

Listas numeradas
<OL> <LI>item de uma lista numerada <LI>item de uma lista numerada, que pode ser to grande quanto se queira, sem que seja necessrio se preocupar com a formatao das margens de texto <LI>item de lista numerada </OL>

Estas listas no apresentam numerao em formato 1.1, 1.2 etc., quando compostas. Apresenta os atributos: type=1 - cria uma lista numrica normal (default) type=A - cria uma lista alfabtica com letras maisculas type=a - cria uma lista alfabtica com letras minsculas type=I - cria uma lista com nmeros romanos (maisculos) type=i - cria uma lista com nmeros romanos (minsculos) start=n - especifica o nmero inicial da lista Exemplo: <ol type=i start=5>
<li> Primeiro item <li> Segundo item </ol> v. Primeiro item vi. Segundo item

Listas aninhadas

Listas com marcadores grficos

Caracteres

<B> negrito (em alguns browsers, pode aparecer sublinhado) <I> Itlico <TT> Tipo teletype - fonte de espaamento fixo. <U> Sublinhado; deve ser usado com cuidado, pois confunde-se com
a apresentao de links.

<STRIKE> ou <S> Frase riscada. <BIG> Fonte um pouco maior. <SMALL> Fonte um pouco menor. <SUB> Frase em estilo ndice, como em H2O. <SUP> Frase em estilo expoente, como em Km2.

&nbsp; = espao

&lt; < &gt; > &amp; & &aacute; &Aacute; &acirc; &Acirc; &agrave; &Agrave; &atilde; &Atilde; &ccedil; &Ccedil; &eacute; &Eacute; &ecirc; &Ecirc; &iacute; &Iacute; &oacute; &Oacute; &ocirc; &Ocirc; &otilde; &Otilde; &uacute; &Uacute; &uuml; &Uuml;

As cores so introduzidas atravs do elemento <FONT>, usando o sistema RGB para cores.
<FONT COLOR="#rrggbb">Texto</FONT>

Assim, um trecho de texto pode ter uma cor diferente da definio geral de cores, feita atravs dos atributos de <BODY>. O tamanho definido pelo parmetro SIZE:
<FONT SIZE=tamanho_da_letra>Texto</FONT>

Ele permite que o autor do documento altere o tamanho das letras em trechos especficos de texto. O tamanho bsico dos textos 3. Podemos indicar tamanhos relativos a esse, por exemplo:
<FONT SIZE=+2>Letra maior</FONT> Letra normal <FONT SIZE=-2>Letra menor</FONT>

Uma evoluo que permite a escolha da fonte para os textos, o atributo

FACE:
<FONT FACE=fonte_da_letra>Texto</FONT>

Por exemplo:
<FONT FACE=Times COLOR="#0000AA">Fonte Times azul</FONT> Fonte Times azul <FONT FACE=Arial COLOR="#00AA00">Fonte Arial verde</FONT> Fonte Arial verde <FONT FACE=Courier COLOR="#AA0000">Fonte Courier vermelha</FONT> Fonte Courier vermelha

O nome das cores Os 16 nomes de cores aceitos segundo o HTML 3.2 so estes:

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.

Com HTML possvel fazermos ligaes de uma regio de texto (ou imagem) a um outro documento. O browser destaca essas regies e imagens do texto, indicando que so ligaes de hipertexto - tambm chamadas hypertext links ou hiperlinks ou simplesmente links. Para inserir um link em um documento, utilizamos a etiqueta <A>, da seguinte forma:
<A HREF = "arq_dest">ncora</A>

onde: arq_dest o URL do documento de destino; ncora o texto ou imagem que servir de ligao hipertexto do documento sendo apresentado para o documento de destino.

Caminho relativo O caminho relativo pode ser usado sempre que queremos fazer referncia a um documento que esteja no mesmo servidor do documento atual. Exemplo: se atravs do campo Location do browser, vemos que o documento atual est localizado em um diretrio /paginas/HTML/ do servidor www.ufjf.br. Para escrevermos um link deste documento para o documento doc2.html no diretrio /paginas/HTML/exemplos, tudo que precisamos fazer escrever:
<A HREF="exemplos/doc2.html">exemplo de caminho relativo</A>

Se quisermos um link deste documento para um outro que esteja em diretrio diferente neste mesmo servidor, escrevemos, por exemplo:
<A HREF="/cursos/informatica/">Instituto de Cincias Matemticas e de Computao</A>

Para usar links com caminhos relativos preciso conhecer a estrutura do diretrio do servidor web que estamos utilizando.

Caminho absoluto Utilizamos caminho absoluto quando desejamos referenciar um documento que esteja em outro servidor, por exemplo:
<A HREF="http://www.registros.com.br/">Registros e Hospedagem</A>

que oferece um link para um documento no servidor WWW do Grupo de Pesquisa Intermdia Com a mesma sintaxe, possvel escrever links para qualquer servidor de informaes da Internet. Ligaes para trechos do documento Alm do atributo href, que indica um documento destino de uma ligao hipertexto, o elemento A possui um atributo NAME que permite indicar um trecho de documento como ponto de chegada de uma ligao hipertexto. Exemplo: <h3><A NAME="relativo">Caminho relativo</A></h3> que faz com que a ncora Caminho relativo seja o destino de um link. Se escrevermos: Leia sobre <A HREF="#relativo">caminhos relativos</A>. teremos uma ligao hipertexto para um trecho deste mesmo documento. Exemplo para um trecho de um outro documento:
So Carlos um <A HREF= "/Portugues/Sao_Carlos/histprog.html#polo">plo de alta tecnologia</A>.

O elemento IMG insere imagens que so apresentadas junto com os textos. Um atributo SRC deve estar presente, da seguinte forma:
<IMG SRC="URL_imagem"> onde URL_imagem o URL do arquivo que contm

a imagem que se quer inserir; pode ser referenciada uma imagem que esteja em um outro servidor. Ex.: <IMG SRC = "/icones/newred.gif"> inserimos a figura no documento. Sintaxe dos Atributos Bsicos:
<IMG SRC="URL_imagem" ALT="descrio_da_imagem"> <IMG SRC="imagem" ALT="descrio" WIDTH="largura" HEIGHT="altura"> <A HREF="URL"><IMG SRC="imagem" ALT="descrio" BORDER=4></A> <A HREF="URL"><IMG SRC="imagem" ALT="descrio" BORDER=0></A> <IMG SRC="imagem" ALT="descrio" ALIGN=alinhamento> <IMG SRC="imagem" VSPACE=esp_vertical> <IMG SRC="imagem" HSPACE=esp_horizontal>

Atributo clear para o <BR>: <BR CLEAR=RIGHT | LEFT | ALL>

As tabelas foram uma grande conquista para os autores de documentos para a Web. Tabelas implementam um conceito importante de layout: as grades, segundo as quais organizamos textos e ilustraes de maneira harmoniosa. Como j foi possvel perceber, as tabelas contm textos, listas, pargrafos, imagens, diversas outras formataes - inclusive outras tabelas.
<TABLE>...</TABLE> delimita uma tabela. <TABLE BORDER="borda"> ... </TABLE>

Ttulos, linhas e elementos

<CAPTION>...</CAPTION>

define o ttulo da tabela

<TR>...</TR>

delimita uma linha

<TH>...</TH>

define um cabealho para colunas ou linhas (dentro de <TR>)

<TD>...</TD>

delimita um elemento ou clula (dentro de <TR>) possvel englobar colunas e linhas, atravs dos atributos COLSPAN (para colunas) e ROWSPAN (para linhas).

<TABLE BORDER=4> <CAPTION>Primeiro exemplo</CAPTION> <TR><TH>Coluna 1</TH><TH>Coluna 2</TH></TR> <TR><TD>linha1, coluna 1</TD><TD> linha 1, coluna 2</TD></TR> <TR><TD>linha 2, coluna 1</TD><TD>linha 2, coluna 2</TD></TR> </TABLE>

<TABLE BORDER=1> <TR><TH COLSPAN=2>Colunas 1 e 2</TH></TR> <TR><TD>linha1, coluna 1</TD><TD> linha 1, coluna 2</TD></TR> <TR><TD>linha 2, coluna 1</TD><TD>linha 2, coluna 2</TD></TR> <TR><TH ROWSPAN=3>3 linhas</TH><TD>uma linha</TD></TR> <TR><TD>duas linhas</TD></TR> <TR><TD>tres linhas</TD></TR> </TABLE>

Um dos recursos mais fascinante da linguagem Html a possibilidade de criar formulrios eletrnicos. Usando um formulrio o usurio pode interagir com o servidor, enviando dados que sero processados no servidor e posteriormente devolvidos ao cliente. Esses comandos so os principais responsveis pela viabilizao da troca de informaes entre o cliente e o servidor. Eles podem ser usados em qualquer tipo de atividade. O elemento <FORM> delimita um formulrio e contm uma seqncia de elementos de entrada e de formatao do documento.
<FORM ACTION="URL_de_script" METHOD=mtodo>...</FORM>

Os atributos de FORM que nos interessam agora so: ACTION - especifica o URL do script ou email ao qual sero enviados os dados do formulrio. METHOD - Seleciona um mtodo para acessar o URL de ao. Os mtodos usados atualmente so : POST - os dados entrados fazem parte do corpo da mensagem enviada para o servidor; transfere grande quantidade de dados. GET - os dados entrados fazem parte do URL associado consulta enviada para o servidor; suporta at 128 caracteres.

O campo <INPUT> tem um atributo TYPE, ao qual atribumos seis valores diferentes para gerar seis tipos diferentes de entrada de dados.

FORM tambm pode apresentar o atributo: ENCTYPE Indica o tipo de codificao dos dados enviados atravs do formulrio. O tipo default application/x-www-form-urlencoded. Outro tipo aceito por alguns browsers text/plain, mas sua utilizao ainda no est padronizada. Os formulrios podem conter qualquer formatao - pargrafos, listas, tabelas, imagens - exceto outros formulrios. Em especial, colocamos dentro da marcao de <FORM> as formataes para campos de entrada de dados, que so trs: <INPUT>, <SELECT> e
<TEXTAREA>.

Todos os campos de entrada de dados tm um atributo NAME, ao qual associamos um nome, utilizado posteriormente pelo script. So os scripts que organizam esses dados de entrada em um conjunto de informaes significativas para determinado propsito.

O campo <INPUT> tem um atributo TYPE, ao qual atribumos seis valores diferentes para gerar seis tipos diferentes de entrada de dados.

Type = text Type = password

Type = checkbox Type = radio

Type = submit

Type = reset

Campos <select> permite criar uma caixa de seleo e o <textarea> uma caixa de digitao de vrias linhas

<select> <option> </option> </select>

<textarea>

<form name="form1" method="post" action="mailto:profgiuliano@yahoo.com.br" enctype="text/plain"> <p>Nome:<input type="text" name="Nome" maxlength="50" size="40"></p> <p>Senha:<input type="password" name="Senha"></p> <p>Sistema Operacional:<input type="checkbox" name="so" value="w95" checked>Windows 95 <input type="checkbox" name="so" value="win98">Windows 98 <input type="checkbox" name="so" value="checkbox">Linux </p> <p>Processador: </font> <input type="radio" name="proc" value="intel">Intel <input type="radio" name="proc" value="amd">AMD <input type="radio" name="proc" value="cyrix">Cyrix</p> <p>Profiss&atilde;o: <select name="select" size="2" multiple> <option value="ASIST">Analista de Sistemas</option> <option value="ASUP">Analista de Suporte</option> <option value="GREDES">Gerente de Redes</option> <option value="PROG">Programador</option> </select></p> <p>Coment&aacute;rios: <textarea name="comentarios" rows=3 cols=40></textarea></p><p> <input type="submit" name="Envia value="Envia Dados"> <input type="reset" name="Apaga" value="Limpa Dados"> </p> </form>