Categoria Dicas HTML - Frames: O que são e como usá-los

Posted by webmaster | HTML |

A partir da versão 2 dos principais browsers, foi criado o recurso de frames, hoje presente em um incontável número de sites na web.

Frames são as divisões internas dentro de uma mesma janela do browser, onde você consegue, por exemplo, rolar todo o conteúdo de uma página tendo o menu fixo ao lado. Neste tópico você vai aprender a fazer páginas em frames, ter algumas dicas para melhorar a visualização do seu site dentro das frames e utilizar esse importante recurso de maneira correta e apropriada.

Basicamente, uma página em frames é constituída de dois elementos básicos:

» uma página chamada frameset, que contém em seu código tags que especificam a divisão das frames dentro da janela do browser;

» as páginas internas em si, chamadas frames, carregadas de acordo com as instruções contidas no código da frameset.

Como funcionam os frames

O uso de frames requer um planejamento prévio que consiste na criação da estrutura dos frames (frameset) e, em seguida, o conteúdo de cada frame (dentro de cada página interna, à parte).

Característica do frameset

A página frameset na verdade é um arquivo HTML normal, com uma única diferença básica: no lugar das tags <BODY> e </BODY> (que indicam o conteúdo do documento), possui as tags <FRAMESET> e </FRAMESET> , responsáveis pelas divisões internas de uma página em frames.

A tag </FRAMESET>

A tag frameset é bastante completa. Possui atributos internos e também possui tags inteiras também internas. Veja-os abaixo:

atributo COLS: determina divisões em colunas. Use-o da seguinte maneira: separe por vírgula os comprimentos de cada coluna da página, em pixels ou em valores porcentuais ou ainda use * para que o browser determine o tamanho de acordo com o tamanho da janela;

atributo ROWS: determina divisões em linhas. Use-o da seguinte maneira: separe por vírgula as alturas de cada linha da página, em pixels ou em valores porcentuais ou ainda use * para que o browser determine o tamanho de acordo com o tamanho da janela;

atributo FRAMESPACING: determina o espaçamento entre cada frame (em pixels);

atributo FRAMEBORDER: determina se haverá ou não bordas entre as frames (os valores deste atributo são fixos, ou seja, digite 1 para inserir bordas ou 0 para retirá-las);

Cercadas pelas tags <FRAMESET> e </FRAMESET> , você deve inserir as tags <FRAME> de acordo com o número de colunas ou linhas inserido nos atributos COLS e ROWS .

As tags <FRAME> são responsáveis por definir qual página HTML será carregada dentro de cada divisão da frameset, além de algumas outras configurações particulares a cada divisão. Veja abaixo os atributos:

atributo FRAMESPACING: determina o espaçamento entre cada frame (em pixels);

atributo FRAMEBORDER: determina se haverá ou não bordas entre as frames (os valores deste atributo são fixos, ou seja, digite 1 para inserir bordas ou 0 para retirá-las). Vale lembrar que este atributo sobrepõe-se aos valores de FRAMEBORDER que sejam inseridos na frameset;

atributo MARGINHEIGHT: especifica a altura da margem superior e inferior do frame em pixels;

atributo MARGINWIDTH: especifica a altura da margem direita e esquerda do frame em pixels;

atributo NAME: atribui um nome para o frame, de maneira que possa ser identificado e localizado para carregar documentos;

atributo NORESIZE: simplesmente insira este atributo dentro da tag <FRAME> para que esta não possa ser redimensionada;

atributo SCROLLING: atribua valores YES caso você queira que a frame possua barras de rolagem ou NO em caso contrário (atribuindo YES, a frame só apresentará barra de rolagem caso seja realmente necessário em função do conteúdo da frame);

atributo SRC: define o caminho da página HTML que será exibida no frame;

Exemplos de código

Veja abaixo um exemplo de conteúdo de uma página frameset:

<FRAMESET ROWS=”50%,*,30%” FRAMEBORDER=”1″ FRAMESPACING=”3″>
<FRAME SRC=”pagina1.htm” NAME=”superior” NORESIZE SCROLLING=”NO”>
<FRAME SRC=”pagina2.htm” NAME=”central” MARGINWIDTH=”2″ MARGINHEIGHT=”3″ NORESIZE SCROLLING=”YES”>
<FRAME SRC=”pagina3.htm” NAME=”inferior” NORESIZE SCROLLING=”NO”>
</FRAMESET>
Algumas dicas

As frames não servem apenas para você dividir a página em menu e conteúdo principal. Você pode fazer as divisões de formas bastante inusitadas, conseguindo resultados muito interessantes em termos de navegação e visual.
FONTE: CÓDIGO FONTE

Tags:

Categoria Dicas HTML - O que é HTML?

Posted by webmaster | HTML |

Hypertext Markup Language (HTML - linguagem de marcação de hipertexto) é a linguagem mais utilizada na construção de home pages.

O HTML organiza a informação como uma interconexão de textos (links), permite a criação de documentos que podem ser gerados em qualquer editor de texto e qualquer mudança pode ser feita de forma rápida e fácil.

Os códigos que compõem o HTML são conhecidos como tags e servem para indicar o início e o fim de funções.

Estrutura básica de uma tag

A estrutura básica de uma tag HTML sempre é composta de:

< (sinal de “menor que”): símbolo que indica início da tag, precisa sempre vir primeiro;

NOME DA TAG: logo após o sinal de “<” é colocado o nome da tag, exatamente nessa ordem e sem nenhum espaçamento. O nome da tag pode ser escrito em maiúsculo ou minúsculo;

ATRIBUTOS: após o nome da tag, seguem-se os diversos atributos. Os atributos são configurações específicas de cada uma das tags, que modificam sua atuação na página. Os atributos podem ser digitados em maiúsculo ou minúsculo e não precisam seguir uma sequência entre si. Apenas precisa haver um espaço entre um atributo e outro;

VALORES: cada um dos atributos possui valores, que podem ser pré-definidos pela linguagem HTML ou definidos pelo usuário (no caso de textos livres ou dados numéricos);

Veja o exemplo de uma tag padrão, com os sinais de abertura e fechamento:

<div align=”right”>Exemplo de bloco de texto alinhado com o uso da tag <b>DIV</b>, neste caso com o atributo RIGHT </DIV>
FONTE: CÓDIGO FONTE

Tags:

Categoria Dicas HTML - Criando links

Posted by webmaster | HTML |

1. Criar um link para outro site

Para criar links, usa-se a tag A em conjunto com os atributos HREF ou NAME. Exemplo:

<a HREF=”http://www.codigofonte.net” TARGET=”_blank” > Acesse o CódigoFonte.net</a>

Na prática, o código acima fica assim:

Acesse o CódigoFonte.net

Um visitante na sua página que clicar sobre o link acima será levado à nossa página. Como você deve ter notado, o link abriu outra página. Para fazer isso, use o atributo TARGET=”_blank”.

2. Criar uma imagem com link

Para criar links em imagens, usa-se a tag A HREF em torno da tag IMG, que chama a imagem. Veja o código abaixo:

<a HREF=”http://www.codigofonte.net” TARGET=”_blank”><img src=”http://codigofonte.net/img/powered_codigofonte.gif“> </a>

Veja que o link criou uma borda na imagem. Para retirar essa borda, insira o atributo BORDER=”0″ dentro da tag IMG.

3. Links para download

Funciona da mesma forma que você utiliza em arquivos Html, especificando a URL do arquivo para ser baixado.

O código: <a href=”http://codigofonte.net/download/
radioflash.zip”>Download</a>

neste caso, este link irá direcionar para o arquivo radioflash.zip e automaticamente efetuará o download do mesmo.
FONTE: CÓDIGO FONTE

Tags:
Page 2 of 11«12345»...Último