Os quadros em HTML são uma forma de dividir a janela do navegador em várias seções, cada uma das quais pode carregar e exibir um documento HTML diferente. Neste artigo veremos exemplos práticos de frames em HTML.

Embora seu uso tenha diminuído nos últimos anos devido à adoção de técnicas mais modernas e flexíveis, como CSS e JavaScript, ainda pode ser encontrado em alguns sites, especialmente aqueles criados na década de 1990 e início de 1990. a de 2000.

Como os frames ou frames funcionam no HTML?

Os quadros são compostos por dois elementos:

1. conjunto de quadros: O elemento é usado para dividir a janela do navegador em seções retangulares, cada uma das quais pode carregar seu próprio documento HTML.

instagram story viewer

2. quadros: O elemento é usado dentro de um para definir cada uma das seções individuais. E manda chamar algum outro documento que está carregado dentro do frameset.

• Siga com: Exemplos de iFrames

Como fazer quadros em HTML

Para criar um documento HTML com molduras, siga dois passos muito simples:

1. Crie um documento HTML que defina a estrutura dos quadros usando o elemento. Por exemplo:

Arquivo 1: frameset.html

2. Crie um ou mais documentos HTML para serem carregados nos quadros.

Arquivo 2: frame1.html

Este é o quadro 1

Arquivo 3: frame2.html

Este é o quadro 2

Atributos de quadro em HTML

Alguns dos atributos de elementos mais importantes são:

• rolagem: Este atributo é usado para controlar a aparência das barras de rolagem no quadro. Pode ter os valores "auto", "yes" ou "no".

• não dimensionar: Este atributo é usado para evitar que o usuário redimensione o quadro.

• inhame: Este atributo é usado para dar um nome ao quadro, o que pode ser útil para referenciar o quadro em links e scripts.

• origem: Este atributo é usado para especificar a URL do documento HTML a ser carregado no quadro.

• moldura: Este atributo especifica se os quadros devem ter bordas ou não. Os valores possíveis são "1" (para mostrar bordas) ou "0" (para não mostrar bordas). Por exemplo, .

• fronteira: Este atributo define a largura da borda entre os quadros em pixels. Por exemplo, criará uma borda de 5px entre os quadros.

• espaçamento entre quadros: Este atributo é semelhante a fronteira. Também define o espaço entre os quadros em pixels. Por exemplo, irá definir um intervalo de 10px entre os quadros.

• Cor da borda: Este atributo permite que você altere a cor da borda dos quadros. Qualquer cor válida pode ser especificada. Por exemplo, fará com que a borda dos quadros fique vermelha.

Exemplo de uso:

Como vincular a um quadro específico

Podemos abrir um link em um quadro específico usando o atributo alvo na etiqueta. O valor de alvo deve ser igual ao nome do quadro (inhame atributo de ). Por exemplo:

em menu.html
Página 1
Página 2

Nesse caso, clicar nos links "Página 1" ou "Página 2" no quadro do menu carregará a página correspondente no quadro "conteúdo".

Como quebrar os quadros

Se você deseja que um link abra uma página fora do conjunto de quadros (ou seja, substitua todo o conjunto de quadros), você pode usar o valor especial _principal para o atributo alvo. Por exemplo:

em menu.html
sair dos quadros

Ao clicar em "Exit Frames", o navegador carregará "pageOutofFrames.html" na janela inteira, substituindo o conjunto de quadros.

Exemplo para dividir a tela em duas colunas com molduras

Este exemplo divide a tela em duas colunas de tamanho igual. Cada coluna carrega uma página HTML diferente.

Exemplo para criar uma barra lateral de navegação com frames

Este exemplo cria uma barra lateral que ocupa 25% da tela e é usada para navegação. O restante da tela é usado para exibir o conteúdo principal.

Exemplo para dividir a tela em linhas e colunas

Este exemplo mais complexo divide a tela em quatro partes iguais. Cada seção carrega uma página HTML diferente.

Exemplo de navegação superior com quadros HTML

Crie um arquivo que defina dois quadros seguidos. Os dois arquivos que ele define são: um para a navegação (que ocupa 20% da largura da janela) e outro para o conteúdo principal (que ocupa o restante da largura da janela).

Em seguida, você precisaria criar os arquivos "navigation.html" e "content.html". Por exemplo, "navigation.html" pode ter esta aparência:

Página 1

Página 2

Página 3


E "content.html" poderia ser algo assim:

Bem-vindo ao nosso site!

Aqui irá o conteúdo da página selecionada na navegação.

Neste caso, ao clicar em um link em "navigation.html", a página correspondente é carregada no quadro "conteúdo".