Criar Blogs

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>

A TAG HR
Insere uma linha horizontal no Browser.
EX.
<HR WIDTH=”n%” ALIGN=”posição” SIZE=”n” NOSHADE
COLOR=”#RRGGBB”>
Onde:
ALIGN=”posição”: pode ser left, center e rigth;
WIDTH=”n%”: define a largura da linha, pode ser definida em pixels ou em
percentagem do tamanho horizontal da tela;
SIZE=”n”: define a espessura da barra, em pixels;
NOSHADE: define que a barra não deve ser com efeito 3D;
COLOR=”#RRGGBB”: define a cor da barra. (MS Internet Explorer).