Internet é uma rede mundial de milhares de pequenas redes de computador e
milhões de microcomputadores comerciais, educacionais, governamentais e pessoais
que usa os protocolos TCP/IP (Transmission Control Protocol/Internet Protocol) para
comunicação.
No centro da Internet existem linhas de comunicação de dados de alta velocidade
entre computadores host, consistindo em milhares de sistemas de computador
comerciais, do governo, educacionais e outros, que encaminham dados e
mensagens.
Atualmente, a Internet oferece um grupo de serviços para usuários, como Correio
Eletrônico, a World Wide Web, FTP, grupos de notícias Usenet, Gopher, IRC, telnet e
outros.
A Internet é como uma cidade eletrônica com bibliotecas virtuais, lojas virtuais,
escritórios virtuais, galerias de arte virtuais, etc.
TCP/IP (Transmission Control Protocol/Internet Protocol -
Protocolo de Controle de Transmissão/Protocolo Internet)
Conjunto de protocolos utilizados na troca de informações entre computadores de diferentes
arquiteturas dentro da Internet. O TCP/IP está disponível para qualquer tipo de CPU e Sistema
Operacional.
Mais Internet
your ads here (468x60) - after 1st post.
Frames
Frames são divisões de uma pagina em HTML. Ela é composta de uma pagina
principal e diversas outras divisões, compostas por outras paginas. Na pagina
principal você insere as outras paginas em colunas ou linhas, sendo que você
identifica o tamanho que cada uma deve ter.
É necessária cautela ao pôr frames, pois se você não souber como organizálas,
sua pagina perdera todo o sentido. No entanto, elas podem ser muito
úteis para criação de menus em sua pagina.
Para criar as frames vamos usar duas Tag’s:
FRAMESET: Indica como vai ser sua Frame, se vai ser Horizontal ou vertical.
ROWS: Com este tipo, a frame ficará na horizontal.
COLS: As Frames ficarão verticalmente.
Quando você for configurar frame terá que dar valores de tamanhos para elas,
preferencialmente em % para ficar mais fácil de configurar.
Ex:
<frameset cols=”16%,*” border=”0″>
<frame src=”menu.html” mce_src=”menu.html” name=”frame” noresize scrolling=”no”>
<frame src=”texto.html” mce_src=”texto.html” name=”home” noresize>
</frameset>
Note que colocamos uma parte que vem ser o menu com 16% da pagina, os outros 84% foram embutidos no asterisco, após a virgula.
Agora vamos ver o atributo SRC da tag FRAME.
No quadro acima você pode ver que inserimos dois arquivos: “menu.html” e
“texto.html” e damos nomes à elas. Os nomes são muito importantes para que
quando for abrir um link na outra frame coloque o atributo target e o nome da
frame.
Exemplo: <a href=”Downloads.html” mce_href=”Downloads.html” target=”home”>
Os atributos Noresize e Scrollolling, servem respectivamente para não deixar modificar o tamanho da frame e nem que apareça a barra de rolagem nela.
Células Mescladas
Para mesclar as células vamos atribuir à Tag TD os seguintes atributos:
COLSPAN: Será o numero de colunas que a célula ocupara.
ROWSPAN: Será o numero de linhas que a célula ocupara.
<Table Border=”2″ width=”50%” cellpadintg=”3″ celladding=”3″>
<TR bgcolor=”#FFFACD”>
<TD colspan=”2″>Célula 1</TD>
</TR>
</TABLE>
Atributos Individuais
Vamos agora configurar individualmente cada célula.
ALIGN: alinha do conteúdo da célula ou das células da linha. Valores: right,
left, center.
BGCOLOR: define a cor de fundo das células da linha ou de uma célula
individual;
VALIGN: alinhamento vertical de uma célula ou de células de uma linha;
Pode ser top, middle ou bottom.
WIDTH: largura de uma célula em pixels ou %;
NOWRAP: indica ao browser que o texto da célula não pode ser dividido em
mais de uma linha. A coluna inteira terá o tamanho do texto escrito naquela
célula;
<table border=”2″ bordercolor=”#003300″ bgcolor=”green” width=”60%”
height=”40%” cellspacing=”3″ celladding=”3″>
<tr align=”left” valign=”top”
TABELAS
As Tabelas servem para deixar mais organizados os dados disponíveis em sua
pagina.
Criando tabelas
Para criar tabelas simples, vamos fazer da seguinte maneira:
<TABLE>
<TR>
<TH>Cabeçalho da Tabela</TH>
<TD>Dados da Tabela</TD>
</TR>
</TABLE>
As tag’s Table e /Table servem para indicar inicio e fim de tabela.
TR define cada linha de cada tabela.
TH Define o cabeçalho da Tabela. É uma célula da tabela.
TD Define os dados da Tabela.
Melhorando a Tabela
Agora vamos melhorar a aparência da tabela inserindo Tag’s
BORDER: espessura da borda em pixels.
BOREDERCOLOR: especifica a cor da borda da tabela
WIDTH: especifica a largura da tabela em relação ao browser, em pixels ou %;
HEIGHT: especifica a altura da tabela em relação ao browser, em pixels ou %;
CELLSPACING: especifica o espaço entre uma célula e outra, em pixels;
CELLADDING: especifica o espaço entre os dados e a borda da tabela, em pixels;
BGCOLOR: cor de fundo das células da tabela.
SOM
Para inserir sons na sua pagina vamos utilizar as seguintes Tag’s:
EMBED SRC – Para colocar as músicas para reproduzir em uma espécie de
mini-media player na pagina.
Ex.<embed src=”audio.mp3″ mce_src=”audio.mp3″ loop=”1″>
BGSOUND SRC – Para colocar músicas em plano de fundo, para que apenas
toque sem que ninguém consiga ver, apenas ouvi-la.
Ex.<bgsound src=”audio.mp3 loop=”1″>
LOOP – Utilizamos o loop para colocarmos quantas vezes queremos que a
música toque. Com loop=1, a musica tocara apenas duas vezes, loop=2, suas
vezes… Para colocarmos para que se repita inúmeras vezes, colocamos
loop=infinite.
Inserindo Imagens aos Links
Para inserir uma imagem num link basta colocar no lugar do texto do link a
tag que insere imagem.
Ex. <a href=”teste.html><img src=”http://www.univab.
pt/disciplinas/dchs/pagina_dchs/disciplinas/527/media/Site%20Background.jpg” width=120 height=160 align=”middle” border=”3″ alt=”fundo”></a>
Inserindo Imagens
Para inserir imagens numa WebPage vamos utilizar a Tag IMG.
Ex. <img src=”http://www.univab.
pt/disciplinas/dchs/pagina_dchs/disciplinas/527/media/Site%20Background
.jpg”>
Configurando a Imagem
Após inserirmos a imagem temos de configurá-la. Não é necessário, mas você
pode utilizar para deixar a sua imagem ao seu gosto.
Utilizamos as seguintes Tag’s a partir de IMG SRC:
Width – A partir dela informamos a largura da imagem. Se não for configurada a imagem será inserida no seu tamanho original.
Height – Com ela, informamos a altura. Quando não é informada mantém também sua altura original.
Border – Cria e configura o tamanho da borda da figura.
Align – Alinha a imagem em relação ao texto. Temos três tipos de alinhamento.
Top – Alinha o texto paralelamente ao topo da Imagem.
Middle – Alinha o texto no centro da Imagem.
Bottom – Alinha o texto paralelamente à base da imagem.
Alt – É uma tag em que você insere um texto alternativo, para que se no caso o browser não abrir a imagem o texto aparecerá no lugar.
Exemplo:
<img src=”http://www.univab.pt/disciplinas/dchs/pagina_dchs/disciplinas/527/media/Site%20Background.jpg” mce_src=”http://www.univab.pt/disciplinas/dchs/pagina_dchs/disciplinas/527/media/Site%20Background.jpg” width=120 height=160 align=”top” border=”3″ alt=”imagem principal”>
Criando âncoras
Antes de criar um link interno, temos que criar uma ancora, desse jeito;
<A NAME=”seção1″>Este é o texto da seção</A>, em
que “seção1” é o nome da seção e “Este é o texto da
seção” é em que texto foi feito a seção.
Colocando Links nas Âncoras
Agora que a ancora foi feita, falta linká-la, desse jeito:
<a href=”#seção1″ mce_href=”#seção1″>Seção 1</a>
<HTML>
<HEAD>
<TITLE> Minha Primeira Página</TITLE>
<META NAME=”author” content=”WebMaster”
<META NAME=”description” CONTENT=”Minha Primeira Página de HTML”>
<META NAME=”keywords” content=”Página HTML”>
<META HTTP-EQUIV=”language” content=”pt-br”>
</HEAD>
BODY BGCOLOR=”gray” LINK=”RED” ALINK=”YELLOW”
VLINK=”DARKGREEN”>
<h1><font face=Tahoma color=green>Este é o meu primeiro título
</font></h1>
<a name=”1″><p align=center><font face=”Arial” color=”navy”
size=”2″>Este é o meu primeiro parágrafo em
HTML</font></p></a>
<p align=”justify”><font face=Verdana size=2 color=orange>Este é
o meu segundo parágrafo<Br>E esta é minha primeira
quebra de linha.</font></p>
<a href=”http://www.google.com” mce_href=”http://www.google.com”><font face=”Tahoma” size=2>
Google</font></a>
<a href=”#1″ mce_href=”#1″>Voltar para o primeiro parágrafo</a>
Criando Links
Existem dois tipos de links:
1º - Para páginas Externas
2º - Para paginas Internas, chamados de âncoras.
Criando um Link Externo:
<a href=protocolo://endereçodapagina/arquivo.extensão>Texto mostrando o
Link(ex. “Clique aqui”)</a>
Ex. <a href=”http://www.planetadorock.xpg.com.br/index.html” mce_href=”http://www.planetadorock.xpg.com.br/index.html”>Clique Aqui</a>
<HTML>
<HEAD>
<TITLE> Minha Primeira Página</TITLE>
<META NAME=”author” content=”WebMaster”
<META NAME=”description” CONTENT=”Minha Primeira Página de HTML”>
<META NAME=”keywords” content=”Página HTML”>
<META HTTP-EQUIV=”language” content=”pt-br”>
</HEAD>
<BODY BGCOLOR=”gray” LINK=”RED” ALINK=”YELLOW” VLINK=”DARKGREEN”>
<h1><font face=Tahoma color=green>Este é o meu primeiro título
</font></h1>
<p align=center><font face=”Arial” color=”navy” size=”2″>Este é o meu primeiro
parágrafo em HTML</font></p>
<p align=”justify”><font face=Verdana size=2 color=orange>Este é o meu
segundo parágrafo<Br>E esta é minha primeira quebra de
linha.</font></p>
<a href=”http://www.google.com”><font face=”Tahoma” size=2>Google</font></a>
