0% acharam este documento útil (0 voto)

414 visualizações14 páginas

Entendendo Alguns Comandos HTML Básicos

1) O documento descreve comandos HTML básicos como tags <p>, <br>, <hr>, <h1-6> para formatação de texto e cabeçalhos. 2) São explicados comandos de links como <a> e atributos como href e mailto. 3) São apresentados atributos de formatação de texto como cor, tamanho e estilo de fonte usando a tag <font>.

Enviado por

fabiosantos_rs

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato DOC, PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

414 visualizações14 páginas

Entendendo Alguns Comandos HTML Básicos

Enviado por

fabiosantos_rs

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato DOC, PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 14

Entendendo alguns comandos HTML básicos

A tag <p> representa a única forma mudança de parágrafo numa página HTML.
Equivale a pressionar a tecla Enter num edito de texto. Observe bem! Não adianta
pressionar a tecla Enter! Isso não produzirá nenhum resultado na página HTML!

A tag <br> quebra a linha sem iniciar um novo parágrafo. É como se o texto chegasse
no final da tela e continuasse na linha de baixo. Ou seja é diferente da tag <p>. Faça um
texte usando essas duas tags que você perceberá uma sutil diferença entre elas. Essa tag
não precisa ser fechada.

A tag <hr> pode ser usada para inserir linhas em branco na Home Page. Essa tag não
precisa ser fechada.

Existem seis tipos de fonte na seguinte ordem: <h1>, <h2>, <h3>, <h4>, <h5> e <h6>.
Vejamos possíveis resultados:

<H1>Cabeçalho - h1</H1> Cabeçalho - h1

<H2>Cabeçalho - h2</H2> Cabeçalho - h2
<H3>Cabeçalho - h3</H3> Cabeçalho - h3

<H4>Cabeçalho - h4</H4> Cabeçalho - h4

<H5>Cabeçalho - h5</H5> Cabeçalho - h5

<H6>Cabeçalho - h6</H6> Cabeçalho - h6

Quando especificamos um tipos de cabeçalho, estamos definindo que ele deverá

aparecer com destaque em relação ao resto do texto.

links

A tag <a href = "pagina_tal.html">Link para a página tal</a> você já conhece. É a

tag que insere um link para outra página ou outro local da mesma página. Nesse
exemplo, a página buscada pelo browser é a pagina_tal.html e o texto do link será
Link para a página tal. Como se pode observar </a> é responsável pelo fechamento
dessa tag.

Já fizemos um exemplo acessando outra página do mesmo diretório. Eis um exemplo

de um link acessando uma página de outro site:
<a href = "http://www.dicasbcb.com.br">DicasBCB - o Site dos
Programadores</a>.

Ao invés de um texto, podemos indicar uma imagem para ser usada como link:
<a rhef="página_tal.htm"><img border=off src="imagem.gif">

1 - O comando border=off foi usado para retirar a borda da figura;

2 - Não há necessidade de usar a tag </img> para fechar <img border=off

src="imagem.gif">

É muito útil possibilitar aos visitantes de nossas páginas entrar contato conosco através
de email:
<p><a href="mailto:[email protected]">

<img src=mail.gif border=0 aling=middle>Para nos enviar um e-mail, clique

aqui</a>

Esse código gera um link que, ao ser clicado, abrirá o programa de e-mail padrão do
computador, com o endereço especificado.

Como dissemos, também podemos inserir um link que remeterá o usuário para outro
ponto da mesma página. para isso é necessário informar ao interpretador o local
desejado, através de uma "âncora":
<A NAME="nome da ancora">Ao ser clicado, o link para a mesma página vém para
cá...</A>

O comando responsável pela criação do link:

<A HREF="#nome da ancora">Clique aqui para ir a outro ponto nesta página</A>

Importante notar que HTML não é case sensitive. Quer dizer, não diferencia
maiúsculas de minúsculas. Então tanto faz escrever <a href> como <A HREF>, </a>
como </A>, <p> como <P> e assim por diante. Entenda bem: no nosso estudo, apenas
HTML não é case sensitive, pois PHP, como veremos posteriormente, é case sensitive.

atributos de texto

Observe a formatação das palavras texto a seguir:

texto, texto, texto, texto, texto, texto, texto, texto.

As palavras acima demonstram claramente que podemos, como num editor de texto,
formatar textos HTML, alterando o tamanho, o tipo e o estilo da fonte. É evidente que
todos os comandos que alteram o estilo do texto devem ser usado aos pares, onde o
primeiro "ativa"e o segundo "desativa" o efeito.

Tente decifrar os comandos usados na formatação de uma página com o texto acima:
<HTML>
<HEAD>
<TITLE>Conhecendo atributos de fonte</TITLE>
</HEAD>
<BODY>
<P>texto,
<I><FONT SIZE=4>texto,</FONT></I>
<FONT SIZE=4><B>texto,</B>
<B><I>texto,</I></B></FONT>
<FONT SIZE=5><FONT COLOR="#0000ff">texto,</FONT></FONT>
<FONT SIZE=5 STYLE="font-size: 20pt"><FONT
COLOR="#ff0000">texto,</FONT></FONT>
<FONT SIZE=6 STYLE="font-size: 26pt">texto,</FONT></FONT>
<B><U><I><FONT SIZE=7 STYLE="font-size: 40pt"><FONT COLOR="#008000">
texto.
</FONT></FONT></I></U></B>
</P>
</BODY>
</HTML>

Bem, vamos lá:

1 - itálico: <<I>texto,</I>;
2 - negrito: <<B>texto,</B>;
3 - negrito e itálico: <B><I>texto,</I></B>;
4 - sublinhado: <U>texto,</U>;
5 - negrito, itálico e sublinhado: <B><U><I>texto</I></U></B>;
6 - os tamanhos e as cores das fontes foram determinados pelas tags:
<FONT SIZE=7 STYLE="font-size: 40pt"><FONT
COLOR="#008000">texto.</FONT></FONT>;
7 - Poderíamos mudar a fonte: <FONT FACE="Courier New, monospace">texto</FONT>.

Como vocês puderam perceber, a tag </FONT> é muito versátil, permitindo-nos dar às
fontes praticamente qualquer formatação. Eis os atributos para a tag </FONT>:

FACE : tipo de fonte (Arial, Courier, Times New Romam etc)

SIZE : tamanho da fonte. Os valores variam de 01 à 07.
COLOR : cor do texto

Exemplo:
<FONT face="Lucida Handwriting" SIZE=7 COLOR="#008000">mais sobre
fontes</FONT>

cores

8 - Em HTML, as cores tem seus valores definidos em hexadecimal> Por exemplo,

branco = FFFFFF; preto = 000000 etc.

Eu peguei um código (javascript) na internet (todos os créditos ao autor) que nos dá um

bom auxílio nessa questão de cores. É só Salvar o arquivo e usá-lo para saber,
imediatamente, o valor hexadecimal de determinada cor:
<HTML><HEAD><TITLE> Cores com javascript</TITLE></HEAD><BODY>

<!--

// Copyright (c) 1996-1997 Tomer Shiran. All rights reserved.

// Permission given to use the script provided that this notice
remains as is.
// Additional scripts can be found at
http://www.geocities.com/~yehuda/
// RCH
// create 6-element array
var hex = new Array(6)

// assign non-dithered descriptors

hex[0] = "FF"
hex[1] = "CC"
hex[2] = "99"
hex[3] = "66"
hex[4] = "33"
hex[5] = "00"

// accept triplet string and display as background color

function display(triplet) {
// set color as background color
document.bgColor = '#' + triplet

// display the color hexadecimal triplet

alert('A cor de fundo é ' + triplet)
}

// draw a single table cell based on all descriptors

function drawCell(red, green, blue) {
// open cell with specified hexadecimal triplet background
color
document.write('<TD BGCOLOR="#' + red + green + blue + '">')

// open a hypertext link with javascript: scheme to call

display function
document.write('<A HREF="javascript:display(\'' + (red +
green + blue) + '\')">')

// print transparent image (use any height and width)

document.write('<IMG SRC="place.gif" BORDER=0 HEIGHT=12
WIDTH=12>')

// close link tag

document.write('</A>')

// close table cell

document.write('</TD>')
}

// draw table row based on red and blue descriptors

function drawRow(red, blue) {
// open table row
document.write('<TR>')

// loop through all non-dithered color descripters as green

hex
for (var i = 0; i < 6; ++i) {
drawCell(red, hex[i], blue)
}

// close current table row

document.write('</TR>')
}
Salve o código acima e teste o programa. Lembre-se de mantê-lo sempre à mão, pois é
um programinha que quebra um galhão!

Uma vez obtida a cor, não se esqueça de colocar o símbolo # antes de sua
representação hexadecimal. Exemplo:
<BODY text="#0000FF" link="#00FFFF" bgcolor="#FFFFFF" alink="#FF6600"
vlink="#FFFF66">

imagens

Podemos colocar imagens com extensão ".gif" ou ".jpg" em nossos documentos. Eis
algumas formas:

1 - Para inserir uma imagem no local onde o código for colocado: <img
src="imagem.jpg">

2 - O código fala por si mesmo:

<img src="uma_imagem.gif">Um texto entre duas imagens<img
src="outra_imagem.gif">

3 - Imagem como fundo de página: <body background="C:/Web/imagem_fundo.jpg">

Evidente que no local do nome da página sempre indicaremos o seu caminho

(conforme o exemplo do background.

Podemos definir o tipo de alinhamento que desejamos para as imagens. Para isso
usamos o atributo ALIGN :
<IMG SRC="floppy_disk.gif" ALIGN="top">O texto aparece ao lado, no topo da
imagem<p>

<IMG SRC="floppy_disk.gif" ALIGN="middle">O texto aparece ao lado, no meio da

imagem<p>

<IMG SRC="floppy_disk.gif" ALIGN="bottom">O texto aparece ao lado, na base da

imagem<P>

Para centralizar a imagem: <CENTER><IMG SRC="floppy_disk.gif"></CENTER><P>

<IMG SRC="floppy_disk.gif" ALIGN="left"><B>left</B> alinha a imagem à

esquerda<P>

<IMG SRC="floppy_disk.gif" ALIGN="right"><B>right</B>Alinha a imagem à

direita<P>
listas

HTML aceita listas que podem ser numeradas, não numeradas e de definição, sendo possível,
inclusive, incluir sub-itens nas listas. Podemos usar as tags <ul> fechadas com </ul> para iniciar
listas não numeradas, marcadas apenas com pontos gráficos. Por exemplo,

<h3>Lista não numerada</h3>

<ul>
<li> Primeiro item
<li> Segundo item
<li> Terceiro item
</ul>

produzirá:

Lista não numerada

• Primeiro item
• Segundo item
• Terceiro item

Essa tag também pode ser usada para criar sub-itens na lista:
<h3>Lista não numerada com sub-itens</h3>
<ul>
<li> Primeiro item
<li> Segundo item
<ul>
<li> Primeiro sub-item
<li> Segundo sub-item
<ul>
<li> Primeiro item de sub-item
<li> Segundo item de sub-item
</ul></ul>
<li> Terceiro item
</ul>

Eis o resultado:

Lista não numerada com sub-itens

• Primeiro item
• Segundo item
o Primeiro sub-item
o Segundo sub-item
 Primeiro item de sub-item
 Segundo item de sub-item
• Terceiro item

Quando desejamos tabular um parágrafo à direita, podemos usar uma lista de definição. Nas
listas de definição, podemos usar as seguintes tags: <dl> para iniciar e </dl> para fechar a lista;
<dt> para abrir e </dt> para fechar um título; e <dd> para iniciar e </dd> para encerrar um texto.
Obs. Essas tags devem ser usadas em conjunto:
<dl>
<dt>Esse é um título da lista</dt>
<dd>Eis aqui um primeiro texto</dd>
<dt>Eis outro Título</dt>
<dd>Novo texto para a lista</dd>
</dl>

resultado:

Esse é um título da lista

Eis aqui um primeiro texto
Eis outro Título
Novo texto para a lista

Se quisermos uma lista numerada, usamos: <ol> </ol>

<h3>Lista numerada</h3>
<ol>
<li> Primeiro item da Lista
<li> Segundo item da Lista
<li> Terceiro item da Lista
</ol>

resultado:

Lista numerada

1. Primeiro item da Lista

2. Segundo item da Lista
3. Terceiro item da Lista

Bem... podemos fazer uma salada de listas:

<h1>Salada de listas</h1>
<DL>
<DT>Primeiro item da lista
<DD>Primeiro item da lista de definição
<UL>
<LI>Primeiro item não numerado desta lista
<OL>
<LI>Primeiro sub-item numerado desta lista
<LI>Segundo sub-item numerado desta lista
<UL>
<LI>Primeiro item não numerado do sub-item numerado
<LI>Segundo item não numerado do sub-item numerado
</UL>
<LI>Terceiro sub-item numerado desta lista
</OL>
<LI>Segundo item não numerado desta lista
<LI>Terceiro item não numerado desta lista
</UL>
<DT>Segundo Item da Lista
<DD>Segundo item da Lista de Definição
<OL>
<LI>Primeiro item numerado desta lista
<LI>Segundo item numerado desta lista
</OL>
<DT>Terceiro Item da Lista
</OL>
</DL>
Eis a saída:

Salada de listas
Primeiro item da lista
Primeiro item da lista de definição

• Primeiro item não numerado desta lista

1. Primeiro sub-item numerado desta lista
2. Segundo sub-item numerado desta lista
 Primeiro item não numerado do sub-item numerado
 Segundo item não numerado do sub-item numerado
3. Terceiro sub-item numerado desta lista
• Segundo item não numerado desta lista
• Terceiro item não numerado desta lista

Segundo Item da Lista

Segundo item da Lista de Definição

1. Primeiro item numerado desta lista

2. Segundo item numerado desta lista

Terceiro Item da Lista

tabelas

Podemos usar tabelas em nossos documentos HTML. As tabelas são muito úteis
quando queremos organizar nossos textos em linhas e colunas, ou desejamos dar um
toque diferente no visual da página. As tabelas podem abrigar textos, imagens ou
outras tabelas. Eis as tags usadas na composição das tabelas:

<TABLE> para iniciar e </TABLE> para fechar a tabela;

<tr> para iniciar e </tr> para findar uma linha;

<th> para começar e </th> encerrar uma célula;

<td> para iniciar e </td> para fechar uma célula;

Notas:
1º. a diferença básica entre <th> e <td> é que o texto de <th> é apresentado em negrito e centralizado;
2º. As tags de fechamento </tr>, </th> e <td> não são de uso obrigatório, mas ajudam na
compreensão da estrutura da tabela.
Podemos manipular bastante a aparência das tabelas, através de alguns atributos:
align - alinhamento da tabela: left, right ou center;
width - largura da tabela, em pixels ouu em porcentagem em relação ao tamanho da
janela;
height - altura da tabela, em pixels ou em porcentagem em relação ao tamanho da
janela;
border - espessura da borda da tabela;
bgcolor - cor do fundo da tabela;<
bordercolor - cor das bordas da tabela das bordas daas células;
bordercolorlight - cor das bordas esquerda e superior da tabela e das bordas inferiores
das células;
bordercolordark - cor das bordas direita e inferior da ttabela e das bordas superiores
das células;
rowspan - quantia de linhas que a célula pode ocupar;
colspan - quantia de colunas que a tabela pode oocupar;
Abaixo colocamos o código, facilmente assimilável, de uma tabela abordando o tema:

<TABLE align = center width="90%" border="15" bordercolorlight = 3300ff

bordercolordark = ff00CC bgcolor = ffffff>
<TR>
<TH rowspan="2">1 - duas linhas</TH>
<TH colspan="2">1 - duas colunas</TH>
<TH colspan="2">2 - duas colunas</TH>
<TR>
<TD>1 - célula simples</TD>
<TD>2 - célula simples</TD>
<TD>3 - célula simples</TD>
<TD>4 - célula simples</TD>
<TR>
<TH rowspan="2">2 - duas linhas</TH>
<TH colspan="2">3 - duas colunas</TH>
<TH colspan="2">4 - duas colunas</TH>
<TR>
<TD>5 - célula simples</TD>
<TD>6 - célula simples</TD>
<TD>7 - célula simples</TD>
<TD>8 - célula simples</TD>
</TABLE>

Perca alguns minutos comparando o código acima com o resultado produzido! Depois
disso, apenas delete o atributo border do código proposto e veja o resultado: uma tabela
sem quaisquer bordas!
O código deve ficar assim:
<TABLE align = center width="90%" bordercolorlight = 3300ff bordercolordark =
ff00CC bgcolor = ffffff>

Note que o interpretador simplesmente ignorará os atributos que especificam cores para
as bordas da tabela!
Veja agora um modo de escrever ao lado de uma tabela:
<table align="right" width="80%" height="50%" border="3" bgcolor="#ffff00">
<tr>
<th>Linha 1 Coluna 1</th>
<th>Linha 1 Coluna 2</th>
<tr>
<td>Linha 2 Coluna 1</td>
<td>Linha 2 Coluna 2</td>
</table>
Observe!!!<p>
escrevendo<br>
ao<br>
lado<br>
dessa<br>
tabela<br>
aí<br>
à<br>
direita!!!!!!!<br>
!!!!!!!!!!!!!!

Formulários HTML
Os formulários constituem-se numa matéria de extrema importância no HTML, uma
vez que são responsáveis pela interação entre um usuário e o servidor, possibilitando a
troca de dados ou informações.
Quem ainda não viu uma página com campos para entrada de texto, botões de
múltiplas escolhas ou menu de opções em listbox ou combobox?
Um formulario é iniciado com <form> e fechado com </form>. Internamente a essas
marcações especificamos o tipo de campo desejado para entrada de dados:
<input> : text (linha única para texto), password, checkbox, radio, submit (button) e
reset (button);
<select> : listbox, combobox;
<textarea> : campo de texto de múltiplas linhas.

Cada um destes campos de entrada de dados possui um atributo name associado a um

nome, de tal forma que o parâmetro action possa receber uma variável com o valor
digitado pelo usuário.
Uma vez que a finalidade básica de um formulário é possibilitar a troca de dados entre
o usuário e um servidor, o formulário precisa saber o método (method) em que os dados
serão enviados do browser para o servidor. Há dois métodos:
post - voltado à transferência de grandes quantidades de dados, transferindo a
informação assim que a URL estiver habilitada. Quando o servidor recebe uma
ativação via post, ele continua aberto para receber informações.
get - Suporta somente 128 caracteres e os ddados fazem parte da URL associado à
consulta enviada para o servidor.
O formulário também precisa saber o endereço URL do script ao qual serão enviados
seus dados. Especificamos esse endereço através do parâmetro action.
Vejamos alguns exemplos básicos com <input>:

1º. text:
<form method="post" action="teste.php">
Digite o nome de sua cidade:
<input type="text" name="Cidades" value=Araçatuba size="15" maxlenght="15">
</form>

O exemplo acima cria um text, que permite a entrada de um texto.

Parâmetros opcionais:
value - atribui um valor inicial para o campoo;
size - especifica o tamanho do campo;>
maxlenght - especifica o número máxximo de caracteres aceitos pelo campo.

2º. Agora um exemplo com password (campo para entrada de senhas):

<form method="post" action="teste.php">
Digite uma senha:
<input type="password" name="Senha" value="minhasenha" size="10"
maxlenght="10">
</form>

A diferença entre text e password é que, sendo este último campo apropriado para
entrada de senhas, os caracteres são apresentados como asteriscos (*). Os parâmetros
value, size e maxlenght são opcionais.

3º. Um checkbox é um campo de múltipla escolha onde o usuário pode escolher mais
de uma opção:
Que outro curso você quer ver em nossas páginas:<p>
<input type="checkbox" name="preferencia" value="cbuilder" checked>C++Builder
<input type="checkbox" name="preferencia" value="php">PHP<p>
<input type="checkbox" name="preferencia" value="delphi">Delphi
<input type="checkbox" name="preferencia" value="vb">Visual Basic<p>
<input type="checkbox" name="preferencia" value="asm">Assembly
<input type="checkbox" name="preferencia" value="java">Java

O parâmetro checked, que é opcional, determina a marcação da opção inicialmente. Já

value é obrigatório pois especifica o valor da opção a ser enviada ao servidor.

4º. Radio é mais um formulário de múltipla escolha, mas nesse caso o usuário poderá
escolher apenas uma opção. Os parâmetros seguem o mesmo roteiro do checkbox:
Que outro curso você quer ver em nossas páginas:<p>
<input type="radio" name="preferencia" value="cbuilder" checked>C++Builder
<input type="radio" name="preferencia" value="php">PHP<p>
<input type="radio" name="preferencia" value="delphi">Delphi
<input type="radio" name="preferencia" value="vb">Visual Basic<p>
<input type="radio" name="preferencia" value="asm">Assembly
<input type="radio" name="preferencia" value="java">Java

5º. Um botão reset pode ser usado para restaurar o valor padrão de todos os campos de
um formulário:
<input type="reset">

Se colocado, o parâmetro value especifica o texto do botão.

6º. Por sua vez, submit enviará as opções ou informações digitadas ao servidor:
<input type="submit" value="enviar">

São opcionais os parâmetro value que especifica o texto a ser exibido no botão e o
parâmetro name que determinará a transmissão do valor contido em value, permitindo a
colocação de vários botões.
Agora vamos conhecer os campos que podem ser construídos com <select>:
1º. Listbox ;
2º. Combobox;
parâmetros:
Listbox e Combobox podem ser considerados campos irmãos. A diferença básica entre
eles consiste na existência ou não do parâmetro size (que especifica o número de linha
exibidas). Se inserirmos esse parâmetro, estaremos construindo um listibox; se não
especificarmos, um combobox.
Um listbox:
Que outro curso você quer ver em nossas páginas:<p>
<select name="cursos" size = "10" multiple>
<option value="bcb">C++Builder</option>
<option value="php">PHP</option>
<option value="delphi">Delphi</option>
<option value="vb">Visual Vasic</option>
<option value="asm">Assembly</option>
<option value="java">Java</option>
</select>

Um Combobox:
Que outro curso você quer ver em nossas páginas:<p>
<select name="cursos"><> <option value="bcb">C++Builder</option>
<option value="php">PHP</option>
<option value="delphi">Delphi</option>
<option value="vb">Visual Vasic</option>
<option value="asm">Assembly</option>
<option value="java">Java</option>
</select>

O parâmetro opcional multiple permite a seleção de mais de uma linha;

Cada <option> acrescenta uma linha ao componente;
value especifica o valor a ser enviado ao servidor se tal item for selecionado;

Inserimos o texto que queremos expor entre <option> e </option>:

<option>Texto que aparecerá no item</option>

Agora vamos conhecer <textarea>:

<textarea name="opniao" rows="5" cols="40">
digite aqui sua avaliação deste curso
</textarea>

Em <textarea> o texto default é opcional; já os parâmetros rows e cols devem ser

especificados.
Frames

<frameset> ... </frameset> é o comando HTML responsável pela divisão da janela do

browser em duas ou mais partes, naquilo que virá a ser denominado frames. Cada uma
das partes resultantes poderá abrigar arquivos distintos e independentes uns dos outros.
Para carregar esses arquivos, usamos o comando <frame> que, por sua vez, comporta
dois parâmetros:
1- src que define o arquivo a ser carregado no frame; e
2 - name que define o nome do frame e possibilita o aparecimento do conteúdo do link
de um frame em outro.
Precisamos criar os documentos e inserir os comandos necessários para carregá-los na
região apropriada do frame. Passemos a um exemplo prático... lembra-se da nossa
pasta Web e dos arquivos primeira.htm e segunda.htm? Pois bem, vamos usá-los de
uma forma diferente. Salve o código abaixo na pasta Web com o nome de frame.htm.
Execute e teste o resultado!
<HTML>

<head><title>Conhecendo frames</title></head>

<FRAMESET COLS = "308,100% " >

<FRAME SRC="primeira.htm" NAME="primeira">

<FRAME SRC="segunda.htm" NAME="segunda">

</FRAMESET>

<BODY>

</BODY>

</HTML>

Obtivemos essa divisão vertical pelo fato de determinarmos a partição da janela em

colunas (cols). Poderíamos, também, determinar a divisão da janela em linhas (rows)
criando, assim, frames horizontais. Como era de se esperar, os valores desses atributos
podem ser expressados em pixels ou em porcentagem.
Eis um exemplo combinando esses atributos (e, como exercício, com mais alguns
parâmetros para você tentar entendê-los - por si mesmo!):
<HTML>

<head><title>Conhecendo frames 2</title></head>

<FRAMESET ROWS = "55,100% " border="0">

<FRAME SRC="frame.htm" NAME="Frame" SCROLLING="NO" MARGINWIDTH="20"

MARGINHEIGHT="0" NORESIZE>

<FRAMESET COLS = "108,100% " >

<FRAME SRC="primeira.htm" NAME="prm" RESIZE>

<FRAME SRC="segunda.htm" NAME="seg" RESIZE>

</FRAMESET>

</HTML>

Salve o código acima e veja que resultado "maluco!"

iframe

Existe outra maneira mais elegante de inserir outras páginas dentro de nossos
documentos HTML, através do comando <iframe>. Nesse caso, devemos especificar o
tamanho do espaço que deverá ser aberto no documento para apresentação da outra
página. Abaixo um exemplo retirado do site DicasBCB, onde <iframe> foi colocado de
forma a abrir a página centralizada:
<CENTER>
<iframe src="http://www.dicasbcb.com.br/Forum/last_posts.php" width=740
height=255></iframe>
</CENTER>

Se você rodar esse exemplo, verá o fórum do site citado abrindo-se no meio de sua
página HTML.
Formatando sinais especiais

Embora em nossos exemplos tenhamos usado normalmente as letras e os sinais como

habitualmente conhecemos, um documento HTML carece de um cuidado especial,
posto que um documento feito em lígua portuguesa possui letras e símbolos que não
são comuns em outros idiomas. Resolvemos isso substituindo esses caracteres por seus
"equivalentes universais". Vejamos alguns:
Á Á É É Í Í Ó Ó Ú Ú
á á é é í í ó ó ú ú
À À à à
Ç Ç ç ç
Ã Ã ã ã Õ Õ õ õ
Â Â Ê Ê Ô Ô
â â ê ê ô ô
Não é compicado! Vejamos como devem ser escritas algumas palavras:
porção = porção
vigilância sanitária = vigilância sanitária

TAMBÉM = TAMBÉM