Conferência #1 Introdução à a Web, HTML

Objetivos:
• Conhecer o surgimento de Internet.
• Conhecer conceitos gerais associados à a Web: cliente, servidor,
nomes de domínio.
• Conhecer elementos básicos da linguagem HTML.

Conteúdo:
• Introdução
• Internet.
• Sistema de Nomes de Domínio (DNS).
• Modelo Cliente - Servidor.
• Interactividad na Web.
• HTML.
• Conclusões.
• Motivação para a próxima classe.

Bibliografia:

1. Hernán Ruiz, Marcelo. “Programação Web Avançada”. Capítulos 2 e 4.

Coleção: Manuais USERS. Editorial: MP Edições. Buenos Aires, Argentina.
ISBN: 987-526-115-7.
2. Tanembaum, A. Jogue a rede de Computadores, Terceira Edição,
1996.

Introdução

Com o início da era tecnológica, dispôs-se de um meio com o qual foi possível
estabelecer uma comunicação a distância e quase foto instantânea por meio de
códigos e chaves de som: o telégrafo; posteriormente a comunicação humana
se viu beneficiada com a invenção do telefone permitindo o uso da voz, mais
adiante vinho a rádio, a televisão e com isso os computadores.

Estes grandes inventos são a base dos adiantamentos tecnológicos que

desfrutamos hoje em dia quanto a comunicação, do envio e recepção de um
fax até a comunicação foto instantânea em qualquer lugar do mundo por meio
de Internet.

Internet

Conhece-se Internet como "uma série de redes conectadas entre si,

especificamente aquelas que utilizam o protocolo TCP/IP para comunicar-se".
Internet é a abreviatura do Interconnected Networks, quer dizer, Jogue a rede
interconectadas, ou rede de redes que se estende por todo o Globo.

Internet é hoje em dia uma infra-estrutura informática estendida ampliamente,

sua influência alcança não só ao campo técnico das comunicações entre
computadores (redes), também a toda a sociedade na medida em que seu
emprego se incrementa cada vez mais para levar a cabo processos como o
comércio eletrônico, a aquisição de informação e a interação entre a
comunidade ou comunidades remotas.

Antecedentes de Internet

A Agência de Projetos avançados de Investigação (HARPA) (Advanced

Research Projects Agency) do Pentágono, foi criada pelo presidente Dwight
Einsenhower depois de que os soviéticos lançassem o satélite Sputnik em
outubro de 1957. O lançamento soviético causou uma crise na confiança
americana. HARPA foi formada para assegurar-se de que a América não
voltava a ser colhida com o guarda desce na fronteira tecnológica.

• 1969: A primeira célula da atual Internet se criou com o ARPANET

Em 1969 HARPA criou a primeira rede chamada ARPAnet., Em um início a
rede constava só de quatro computadores conectados, uma na Universidade
de Califórnia em Los Angeles (UCLA), outra no Instituto de Investigações do
Stanford (Sri), uma mais na Universidade de Califórnia na Santa Barbara
(UCSB) e a última em Universidade de Utah. Logo se foram somando bases
militares, outras universidades e companhias com contratos do DoD
(Departamento de Defesa).

• 1970: Se interconectaron as principais universidades e centros de

investigação científica dos EUA
Para o ano de 1971, já se contava com 11 tumores mais, e no ano seguinte já
havia um total de 40. Em 1972 se tem a primeira mensagem registrada enviado
e recebido por correio eletrônico do Ray Tomlinson, mas foi até a segunda
mensagem de prova quando se estabeleceu que tudas as mensagens que se
enviassem deveriam empregar o signo @.

• 1981 HARPA termina de definir o protocolo TCP/IP (Transmission

Controle Protocol and / Internetworking Protocol)
É um conhecido conjunto de protocolos de conectividad padrão. Estes
protocolos se utilizam para habilitar tumores diferentes em um entorno
heterogêneo para que possam comunicar uns com outros.
ARPANET adota este protocolo como padrão em 1982.

• 1983: ARPANET se separa da rede militar que a originou

Em 1983 ARPANET se separa da rede militar que a originou, de modo que já
sem fins militares se pode considerar esta data como o nascimento de Internet.
É o momento em que o primeiro tumor, militar, desliga-se deixando aberto o
passo para todas as empresas, universidades e demais instituições que já por
essa época povoavam a jovem rede.

Como resultado, em 1984, ARPANET se dividiu em duas redes separadas mas

interconectadas: uma militar (MILNET) e outra educativa tecnicamente
chamada (ARPANET).

Como dado interessante se pode mencionar que, para chegar aos 50 milhões
de usuários, à telefonia fixa tomou 74 anos, a rádio 38 anos, à computação 16
anos, à televisão 13 anos e a Internet só 4 anos.
Segundo estatísticas em http://www.internetworldstats.com/stats.htm, em 31 de
dezembro de 2005 existiam 1, 018, 057, 389 usuários de Internet.
Na gráfica que aparece a seguir se mostra a distribuição por continentes dos
usuários conectados a Internet. É evidente a disparidade existente entre os
continentes desenvolvidos como a Europa e Ásia e os menos desenvolvidos
como a África.

Sistema de Nomes de Domínio (DNS)

O sistema de nomes de domínio

O Sistema de Nomes de Domínio (Domain Name System) é um capitalista e

complexo mecanismo que permite entre outras possibilidades, a tradução de
nomes a direções IP (e viceversa), nas redes computacionais. Este sistema
tem uma estrutura que responde ante as características atuais das redes de
computadores, dada sua expansão e diversificação.

As direções IP identificam unívocamente às máquinas de uma rede permitindo

a comunicação entre estas através de diversos protocolos com o objetivo de
acessar ou brindar múltiplos serviços. A implementação mais difundida
atualmente do protocolo IP identifica aos hosts através de um número binário
de 32 bits que em decimal se expressa utilizando quatro números entre 0 e
255. Um exemplo de número IP em notação decimal é 192.168.250.145 que
em binário seria 11000000 10101000 11111010 10010001. Evidentemente a
primeira forma é muito mais fácil de dominar e mais até se se tiver uma rede
onde coincida a maior parte do número em todos os hosts. Não obstante se
apresentam dificuldades quando estamos ante redes de alcance global como
Internet com milhares de hosts e onde conhecer a direção IP de todas as
máquinas com as que nos comunicamos normalmente para obter algum
serviço, é virtualmente impossível. Esta é a causa fundamental de que se
utilize uma forma mais humana de identificar às máquinas nas redes: os
nomes.

A primeira forma que se utilizou para converter nomes a números IP e

viceversa foi através de um fichário renomado HOSTS.TXT o qual deveria estar
distribuído em todas as máquinas que necessitavam o serviço. Este
simplesmente continha uma tabela que expressava a correspondência entre
um número IP e um ou vários nomes. Exemplo:

157.245.56.89 deltha
157.245.78.21 gloin
122.145.123.78 odin tera
45.34.12.89 nero neron

Na medida que as redes foram crescendo e interconectándose entre si esta

forma gerava muitos inconvenientes pois era muito difícil de manter, além de
que as contínuas atualizações geravam muito tráfico, em sua major parte
desnecessário, e se dificultava o manter a consistência.

Atualmente o fichário HOSTS.TXT se conhece como /etc/hosts nos ambientes

Unix e se continua utilizando como uma forma básica de resolução de nomes.

Posteriormente a esta forma primária de resolver os nomes na rede, criou-se e

aperfeiçoou o que se conhece atualmente como Sistema de Nomes de
Domínio, que em essência é uma base de dados distribuída, graças ao qual
permite a administração e controle local dos fragmentos em que se divide.
Funciona através do esquema cliente-servidor e está desenhado de forma
eficiente para obter um bom rendimento, além de permitir a replicación e o
brinquei.

Um servidor de nomes é a máquina que executa o programa que implementa a

parte servidora do esquema. Este se encarrega de armazenar a informação
associada ao segmento da base de dados que controla, e de mantê-la
acessível aos clientes, que se conhecem como resolvers. Um resolver é uma
subrutina que gera consultas e as envia através da rede para o servidor de
nomes correspondente.

O espaço dos nomes de domínio

A estrutura da base de dados do DNS possui uma forma hierárquica (ver figura
que aparece a seguir).

Esta é uma espécie de árvore onde cada tumor representa um segmento ou

domínio. Os tumores a sua vez podem possuir vários subnodos filhos que
constituem subdominios no DNS. Por último, os tumores que não possuem
filhos podem ver-se como os nomes dos hosts que pertencem ao domínio
definido pelo tumor pai. Cada tumor se identidica utilizando uma etiqueta cujo
tamanho não deve exceder os 63 caracteres. O tumor raiz tem uma etiqueta
vazia (longitude zero). Para indicar o nome completamente qualificado de um
host no DNS se utilizam todos as etiquetas dos tumores desde este para a raiz
segundo a hierarquia. As etiquetas se separam utilizando o caracter “.” e se
ordenam de abaixo para cima. Exemplos de nomes no DNS são:
www.google.com
ldp.linux.org
www.cujae.edu.cu
Um domínio é simplesmente um subárbol do espaço de nomes. O nome de um
domínio é o nome do tumor raiz correspondente. Um domínio agrupa um
conjunto de hosts e/ou subdominios que se relacionam de acordo a certo
critério, já seja geográfico ou organizacional. No DNS cada domínio é
administrado por uma organização ou empresa determinada. Esta pode decidir
dividir o ou os domínios que administra em subdominios, assim como atribuir a
administração destes a outras entidades. Cada domínio pode conter tanto
subdominios como hosts independentes, ao igual a um diretório possui
subdirectorios e fichários de uma vez.
O DNS na atualidade segue certos patrões quanto a sua organização. Esta se
apóia em níveis de acordo à posição do domínio. O nível superior ou primeiro
nível o formam aqueles domínios descendentes do domínio raiz. Os
fundamentais se listam a seguir:
com
Agrupa a organizações comerciais. Exemplos: ibm.com, yahoo.com,
redhat.com, etc
edu
Reúne a organizações de propósitos educacionais. Exemplos: berkeley.edu,
cornell.edu, etc
net
Agrupa a organizações dedicadas ao desenvolvimento das redes. Exemplos
rpmfind.net, nic.net, computing.net, etc.
org
Reúne a organizações não comerciais. Exemplos: linuxdoc.org, ibiblio.org,
linux.org, insflug.org, etc.
gov
Agrupa a organizações governamentais. Exemplo: nasa.gov, nsf.gov, etc.
Como parte do espaço de nomes de domínio também existem domínios de
primeiro nível que designam zonas geográficas. Seus nomes representam a
todos os países através de duas letras. Exemplos: q para Cuba, au para a
Austrália, de a Alemanha, etc. Para ver todos os domínios geográficos de
primeiro nível pode consultar-se
http://www.iana.org/cctld/cctld-whois.htm. Pode ocorrer que os domínios
geográficos de primeiro nível contenham a sua vez alguns dos domínios
organizativos de primeiro nível. Exemplos: com.cu, edu.au, org.uk, etc.
Quem Administra os Domínios em Internet?

propôs-se então a criação de uma Nova Entidade administradora onde

participariam todos os setores mundiais envoltos, mas sem que nela tivesse
ingerência direta nenhum governo ou organização intergovernamental. Isto
sem prejuízo de que a administração dos Domínios de Alto Nível para os
países (ccTLD), pudesse ser exercida diretamente por cada país.

depois de todo este processo, surge a finais de 1998, a Internet Corporation for
Assigned Names and Numbers (ICANN), entidade sem fins de lucro
encarregada do DNS, da localização das direções IP, da administração dos
servidores raiz e da coordenação da atribuição dos números de protocolo.

Servidores raiz: Os servidores raiz de nomes de domínio (DNS roots servers)

são 13, uma dezena deles situados nos EUA, funcionam como uma espécie de
diretório professor dos recursos em Internet. O Sistema de Nomes de Domínio
(DNS, por suas siglas em inglês), que converte os complexos códigos de
localização do protocolo Internet nas palavras e nomes que formam as
direções Web e de email, depende dos servidores para lhe dizer aos
ordenadores de todo o mundo como chegar a um determinado domínio de
Internet.

Este serviço mantém um respaldo dos domínios registrados em vários

servidores, localizado-se dentro e fora do país, o que possibilita uma resposta
rápida e confiável a qualquer consulta que se realize a respeito deles em
qualquer lugar do mundo.
Modelo Cliente - Servidor

A arquitetura cliente/servidor é um modelo para o desenvolvimento de sistemas

de informação, no que os transações se dividem em processos independentes
que cooperam entre si para intercambiar informação, serviços ou recursos. Os
principais componentes do esquema cliente/servidor são os Clientes, os
Servidores e os protocolos. denomina-se Cliente ao processo que inicia o
diálogo ou solicita os recursos onde permanece só o particular de cada usuário
e Servidor, ao processo que responde às solicitudes, portanto contém a parte
que deve ser compartilhada por vários usuários. Por sua parte o protocolo está
composto pelo conjunto de regras e convenções através das quais o cliente e o
servidor intercambiam informação. Internet é, atualmente, um grande sistema
cliente - servidor dividido em três partes fundamentais:

Cliente: É quem usa o serviço, é o que realiza solicitudes ao servidor. (Ex.:

Internet Explorer). Envia uma petição ao servidor e fica esperando por uma
resposta. Seu tempo de vida é finito pois uma vez que são servidas suas
solicitudes, termina seu trabalho.

Servidor: É quem proporciona o serviço, respondendo às solicitudes do cliente.

(Ex.: servidor WWW). É qualquer programa que oferece um serviço que se
pode obter em uma rede. Aceita a petição da rede, realiza o serviço e devolve
o resultado ao solicitante.

Protocolo: Conjunto de regras e convenções através das quais o cliente e o

servidor intercambiam informação.

Como funciona isto: faz-se uma solicitude ao servidor e este devolve um fluxo
de informação, o qual é interpretado pelo navegador da máquina local, que lhe
dá um formato de apresentação e pode também enviar informação de volta ao
servidor. Um exemplo muito ilustrativo deste caso é a atualização de uma base
de dados.

Entre as principais características da arquitetura cliente / servidor, podem-se

destacar as seguintes:
• O servidor apresenta a todos seus clientes uma interfaz única e bem
definida.
• O cliente não precisa conhecer a lógica do servidor, só seu interfaz
externa.
• O cliente não depende da localização física do servidor, nem do tipo de
equipe física no que se encontra, nem de seu sistema operacional.
• As mudanças no servidor implicam poucos ou nenhum troco no cliente.

Para realizar a comunicação entre o cliente e o servidor se faz da seguinte

maneira: http://servidor.dominio:Puerto/{directorio/subdirectorio}/recurso. Por
exemplo: http://ceisnet.cujae.edu.cu/educative/index.php.

Interactividad na Web

Uma das diferenças entre Internet com outros meios de comunicação radica na
possibilidade de interação e personalización da informação com o usuário.
Entretanto, HTML é estático, por isso tem lugar o surgimento de tecnologias
interativas do lado do cliente e do lado do servidor.

Do lado do cliente se encontram:

• Programas interpretados (JavaScript, VBScript) que manipulam
eventos, etc.
• Programas executados (Applets, Plug-ins, ActiveX) que mostram
documentos de diferentes médios (Áudio, Vídeo, Flash).

Do lado do servidor.
• Extensão de servidores Web, através de uma nova capa de
processamento.
• A capa de processamento interpreta a solicitude do cliente.
• O servidor Web funciona como intermediário.
• No servidor se interpretam linguagens script como PHP, ASP, Perl,
JSP.

Para muitos, Internet e a WWW podem ser incluídas entre as mais importantes
criações da humanidade, pois através da fusão entre a informática e as
tecnologias de comunicação, permitem a computadores de todas partes do
mundo estar interconectadas e comunicar-se entre si.

Isto constituiu uma revolução no plano social, cultural e econômico,

redesenhando inclusive a forma de fazer os negócios.

HTML

HTML (Hypertext Markup Language) é uma linguagem de marcação de texto

padronizado globalmente que permite definir um documento mediante
parâmetros universais. utiliza-se para formatear texto e informação de maneira
geral. apóia-se no uso de etiquetas ou marcas, para a definição do formato do
texto, os distintos elementos que conformam a página, suas propriedades e
disposição.

Funcionaria da seguinte maneira:

• O cliente solicita uma página HTML a um servidor Web.
• O servidor Web envia o texto ASCII da página HTML e o código binário
dos arquivos associados à mesma.
• Texto ASCII é interpretado no navegador do cliente e os arquivos
binários carregados com as aplicações associadas à extensão dos mesmos.

pode-se criar um fichário ou documento HTML utilizando um editor de texto tão

simples como o Notepad, por exemplo (embora existam editores mais
profissionais). Esta linguagem é interpretada pelos navegadores, processado e
convertido no Dom , o qual se mostra como página Web aos usuários.

As etiquetas (tags) em HTML podem estar em maiúsculas ou minúsculas,

indistintamente (não são case-sensitive). Entretanto, as ter todas
preferivelmente em maiúsculas ajuda à legalidade do código, pois desta
maneira se podem diferenciar do texto a mostrar.

<XXX> Indica o início de uma etiqueta.

</XXX> Indica o fechamento de uma etiqueta.

Existem etiquetas contenedoras e vazias, isto quer dizer que existem algumas
que não necessitam etiquetas de fechamento.

O que haja entre as etiquetas estará influenciada por elas. Por exemplo, entre
as etiquetas <HTML> e </HTML> se coloca todo o documento. O documento
se divide em duas zonas principais: primeiro o cabeçalho, entre as etiquetas
<HEAD> e </HEAD> e logo o corpo, entre <o BODY> e </BODY>.

Dentro do cabeçalho há informação do documento, que não se vê na tela

principal. As etiquetas <TITLE></TITLE> definem o título do documento que se
visualizará na barra de título da janela do navegador.

Exemplo:

<HTML>
<HEAD>
<TITLE>
Meu primeiro documento HTML
</TITLE>
</HEAD>
<BODY>
Este é o texto que se visualiza no corpo do documento
</BODY>
</HTML>

As linhas em branco e as indentaciones do texto se puseram para maior

claridade. Tudo pode se localizar-se em uma só linha. O importante é a ordem
correta das etiquetas.

As etiquetas se formam como um comando escrito entre os símbolos "<" e ">".

portanto, se se queriam escrever estes caracteres como parte normal do texto,
daria isto lugar a uma ambigüidade. Por esta razão existem os chamados
caracteres especiais:

&lt; para < (less than, menor que)

&gt; para > (greater than, maior que)
&amp; para o & (ampersand)
&quot; para " (double quotation)
&aacute; para a Á
&eacute; para a É
&iacute; para a Í
&oacute; para a ou
&uacute; para a Ú
&Aacute; para a Á
&Eacute; para a É
&Iacute; para a Í
&Oacute; para a Ou
&Uacute; para a Ú
&ntilde; para a Ñ
&Ntilde; para a Ñ
&uuml; para a Ü
&Uuml; para a Ü
&#161; para
&#191; para
&#199; para o Ç
&#231; para o Ç

Os comentários em HTML se escrevem da seguinte maneira:

<!-- Isto é um comentário ao código, que não se verá em tela -->

Quando se coloca texto em uma página Web (ou quase qualquer outro
elemento) terá que ter em conta que não sempre vai se ver da mesma maneira
nos navegadores de quem visite esse documento. Isto se deve a muitos
fatores, entre eles o navegador utilizado, as fontes instaladas, a resolução de
tela, e o tamanho da janela que esteja utilizando. deve-se trabalhar em função
de que a página se veja o melhor possível em todos os casos comentados.

Uma das etiquetas mais importantes para dar formato a um texto é a etiqueta
<p>. Esta tem a propriedade align para o alinhamento, que toma valores
(center, justify, right, left).

<P> parágrafo </P>

<P align=“center”>parágrafo centrado</P>

Também pudesse obter o mesmo efeito de centrar um texto com as etiquetas:

<CENTER>centrado também</CENTER>

Mas se deve tomar cuidado, porque não existem as etiquetas <RIGHT>

</RIGHT>, nem <LEFT> </LEFT>, nem <JUSTIFY> </JUSTIFY>.

A etiqueta <BR> (Break Line) utiliza-se para realizar salto de linha. Notar que
existe uma diferença entre os saltos de linha e os parágrafos. Os primeiros
simplesmente produzem um salto de linha a seguinte, enquanto que a
separação de um parágrafo a outro é muito major.

A etiqueta <HR> (Horizontal Rule) utiliza-se para riscar uma linha horizontal.
Tem atributos de tamanho (size), alinhamento (center), e largo (width).
A etiqueta <DIV> também permite definir parágrafos, embora crie uma
distância menor entre os mesmos. Esta etiqueta também pode ser usada com
outros fins.

<FONT></FONT> e <BASEFONT> permitem dar formato a qualquer texto. A

primeira permite dar formato a qualquer texto, enquanto que a segunda se está
acostumado a colocar por única vez logo depois da etiqueta <body> e
estabelece as características por defeito do texto da página. Ambas têm três
atributos: size, cor, face.

Outras etiquetas de formato de texto são as seguintes:

<B>Negrito</B>
<I>Itálico</I>
<Ou>Sublinhado</U>
<CODE>Destacar um código</CODE>
<BIG>Aumentar um texto</BIG>
<SMALL>Esgotar um texto</SMALL>

Para criar uma lista se poderão usar as seguintes etiqueta: <UL> e <Li> para
listas não ordenadas; assim como <OL>, <Li> para as ordenadas.

Os elementos de uma lista não ordenada criam uma lista na qual cada linha
começa com uma vinheta. Todas as entradas ou elementos da lista devem
estar encerrados dentro das etiquetas <UL>...<UL>. Cada um destes
elementos é inserido através do Li>. Ver o seguinte exemplo.

Para criar a seguinte lista:

• Disk
• Circle
• Square

deve-se escrever o seguinte código:

<UL>
<Li>Disk</LI>
<Li>Circle</LI>
<Li>Square</LI>
</UL>

Para as listas ordenadas se procede de forma similar, mas com a etiqueta

<OL></OL>, como se indicava anteriormente. Esta etiqueta possui dois
atributos:
• type = tipo Indica o tipo de numeração utilizada. Se não se indicar se
entende que será uma lista ordenada numericamente, quer dizer, por definição
é TYPE=“1”, o qual mostra uma seqüência enumerada: 1, 2, 3... Se TYPE=“I”,
conforma uma seqüência de números romanos em maiúsculas: I, II, III... Uma
variante deste tipo é TYPE=“i”, que cria uma seqüência de números romanos
em minúscula: i, iI, iII... Se TYPE=“A”, o qual conforma uma seqüência de
caracteres alfabéticos em maiúscula (A, B, C...). A variante TYPE=“a”, cria esta
mesma seqüência em minúscula (a, b,c...).
• start = num Indica que número será o primeiro da lista. Se não se
indicar se entende que começará pelo número 1.

podem-se criar listas aninhadas, quer dizer, listas que estejam contidas em
outros elementos de uma lista. Neste caso se engrena a lista um nível mais
dentro, trocando o tipo da vinheta para refletir o anidamiento. Ver o seguinte
exemplo:

<OL>
<Li>Apêndice A</LI>
<Li>Apêndice B</LI>
<Li>Apêndice C</LI>
<OL TYPE =“I”>
<Li>Apêndice C.1</LI>
<Li>Apêndice C.2</LI>
...
</OL>
<Li>Apêndice D</LI>
...
</OL>

Para criar um enlace se utiliza a etiqueta <A> da seguinte maneira:

<A HREF="xxx"> yyy </A>
Onde “xxx” é o destino do enlace e “yyy” é o texto indicativo do enlace que se
mostra na tela.

Existem 4 tipos de enlaces:

1. Enlace dentro da mesma página
2. Enlace com outra página local
3. Enlace com uma página fora do sistema local
4. Enlace com uma direção de correio eletrônico

Os enlaces dentro da mesma página, como seu nome o indica, usam-se para
saltar a uma zona se localizada dentro da própria página. Por exemplo, para
saltar ao início da página do final da mesma. coloca-se o seguinte ao final da
página:
<A HREF="#inicio"> Ir ao início da página </A>

E logo se coloca ao início do documento: <A NAME="inicio"> </A>

Para enlaçar com outra página local, seria da seguinte maneira:

<A HREF=“Primeira index.html página do curso </A>

Neste caso também se pudesse desejar dirigir-se a um lugar específico dentro

dessa página, e se mesclam estes dois primeiros tipos da seguinte maneira:
<A HREF=“index.html#marca”> Primeira página do curso </A>

E na página catalogada terá que incluir:

<A NAME=“marca"></A>

Para criar um enlace com uma página externa ao sítio se deve escrever a
direção completa, como aparece a seguir:
<A HREF="http://www.cujae.edu.cu/"> Página da CUJAE </A>

É muito importante copiar as direções corretamente (respeitando as maiúsculas

e minúsculas, pois os servidores Unix sim as distinguem)

Os enlaces com uma direção de correio eletrônico, usam-se para que quando
se fizer clique sobre este, abra-se o cliente de correio predeterminado pelo
usuário, escrevendo diretamente no destinatário a direção de correio desejada.
<A HREF="mailto:dirección de email"> Texto de enlace </A>

Exemplo: <A href= "mailto:jperez@ceis.cujae.edu.cu"> Juan Pérez </A>

A seguir se mostrará a forma de criar uma tabela. define-se tabela pelo

conjunto de elementos distribuídos na vertical (colunas) e na horizontal (filas)
de um quadro. Cada elemento produto do cruzamento de uma fila e uma
coluna se denomina cela. Os atributos mais significativos que a compõem são
os borde, o tamanho, o alinhamento, a cor e a imagem de fundo em caso que a
tenha.

A etiqueta de início de uma tabela é <TABLE>. Logo se define cada uma das
filas e as colunas, e com isso se forma de cada uma de suas celas. Para as
filas se usa a etiqueta <TR></TR> e para as colunas a etiqueta <TD></TD>.
Uma cela se constrói da seguinte maneira: <TR><TD> celda_1 </TD></TR>. A
etiqueta de fechamento da tabela é </TABLE>. Por exemplo:

<TABLE>
<TR>
<TD>Cela desta tabela</TD>
</TR>
</TABLE>

Entre as propriedades de uma tabela se encontram:

• border: largo do bordo da tabela em píxeles. Se border=“0” se obtiver
uma tabela com bordo invisível.
• cellpadding: margem da cela, espaço ao bordo da mesma, respeito ao
conteúdo.
• cellspacing: distancia entre celas da mesma tabela.
• align: alinhamento com respeito à página
• width: largo da tabela
• rules: especifica por onde aparecerão os borde da tabela (none,
groups, rows, couves, all)

Por exemplo, uma tabela com o seguinte código:

<TABLE width="200" height="60" border="1" cellspacing="0"

bordercolor="#000099">
<TR>
<TD bgcolor="#33FFFF">celda_1</TD>
<TD bgcolor="#33CCFF">celda_2 </TD>
<TD bgcolor="#3333FF">celda_3</TD>
</TR>
<TR>
<TD bgcolor="#FFFFCC">celda_4</TD>
<TD bgcolor="#FFFF99">celda_5</TD>
<TD bgcolor="#FFCC66">celda_6</TD>
</TR>
</TABLE>

mostra-se da seguinte maneira:

Como se pode apreciar no exemplo, tanto a etiqueta <TABLE> como as outras

usadas <TR> e <TD> têm propriedades, que na medida em que recebam
valores modificarão o aspecto de uma tabela.

Para colocar uma imagem no documento, poderá-se usar a etiqueta <IMG>,

que é autocontenida, quer dizer, que não necessita etiqueta de fechamento. As
propriedades desta etiqueta são:
• src: caminho de origem da imagem.
• alt: texto alternativo à imagem, se por acaso não carrega bem.
• width: largo da imagem.
• height: alto da imagem.
• align: alinhamento da imagem.
• border: bordo da imagem.
• hspace: espaço horizontal ao redor da imagem.
• vspace: espaço vertical ao redor da imagem.

As imagens podem estar guardadas em formatos de fichário GIF, JPG, JPEG.

O formato GIF se usa para desenhos e imagens artificiais, JPG para imagens
reais. É muito importante ter em conta o tamanho das imagens, uma imagem
de 25 KBytes demora em carregar-se de 15 a 30 segundos utilizando um
modem de 28.8 Kbps, por isso se deve procurar que a imagem tenha o menor
peso possível, e colocar sozinho aquelas que sejam imprescindíveis para obter
um efeito determinado, tendo especial cuidado no tamanho das mesmas.

Conclusões
Na classe de hoje se ilustrou de forma general o que é Internet, como surgiu, o
auge que alcançou a escala mundial e a distribuição por continentes dos
usuários conectados a Internet.

estudaram-se os conceitos essenciais relacionados com em Sistema de Nomes

de Domínio (DNS), assim como da arquitetura cliente/servidor como modelo
para o desenvolvimento de sistemas de informação. falou-se das tecnologias
interativas do lado do cliente e do lado do servidor.

definiu-se HTML, linguagem de marcação de texto, apoiado no uso de

etiquetas para a definição do formato do texto, os distintos elementos que
conformam a página, suas propriedades e disposição. Por último se
descreveram um conjunto de etiquetas HTML e suas propriedades, e se
colocaram alguns exemplos ilustrativos de como as utilizar.

Motivação para a próxima classe

Na próxima classe se trabalhará fundamentalmente com as etiquetas para a

criação de pranchas e enlaces em um documento Web. Exercitaremos o uso
de hiperenlaces para obter a navegação entre as diferentes páginas de um
sítio.

Xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
 Identifica se são verdadeiras ou falsas.
Internet está baseada no modelo cliente-servidor - V
UDNS permite traduzir nomes e endereços IP e vice-versa – V
Uma das ciências da internet é a sua possibilidade de iterações e
personalização dos usuários – F
Um documento HTML está formado por endereços e corpo - V
A informação que encontra-se no encabeçado é a primeira que mostra-se na
página – V
O background da página especifica-se na etiqueta <html> - F
Os hiper links são inseridos na etiqueta <link> - F

Complete o espaço em branco

A etiqueta P é utilizada para escrever um parágrafo.
A etiqueta TITLE coloca-se dentro da etiqueta <head></head>.
A cabeceira de texto mais grande é H1 e a mais pequena é H6.
Pode centrar-se um documento html dentro da etiqueta <CENTER> </CENTER>

Responde se são verdadeiro ou falsa

 Não há limites de níveis de anidamento em uma lista ordenada – V/

porque pode ter mais níveis.
 A largura (width) em todas as colunas numa tabela tem que ser
sempre o mesmo – F
 Uma lista só pode ter um único sistema de numeração – F
 Quando os dados enviados se forem muitos em formulário só através
do método get – F
 No atributo action no formulário especifica-se o nome da página no
qual vai enviar os dados – V/ porque este só serve para enviar dados.
 A etiqueta STYTE permite definir os estilos de todas as páginas do site
– F/ porque só especifica a página onde …
 A etiqueta LINK permite localizar a página onde se encontra os estilos
das páginas do site – V/ porque a maneira de representar, estará
sempre na etiqueta HEAD.

1- Em uma etiqueta INPUT, o atributo TYPE com o valor RESET insere um

botão que limpa os componentes do formulário.
2- A etiqueta LI insere um novo elemento em uma lista.
3- A etiqueta LINK permite usar uma folha de estilo externa.
4- A definição de estilos utilizando a etiqueta STYLE se realiza no
encabeçado de um documento HTML.
5- Utilizando CSS permite conectar um único lugar a definição de estilos
de todos os elementos do site.