Arquivo da tag: Tags HTML

Padrão

Publicado por

Postado no

3 de março de 2010

Publicado em

HTML, Linguagens

comentários

2 Comentários

SdevLab – Tutorial | Imagem em HTML

Eae galera!
O tutorial de hoje é a sequência do tutorial anterior, que dava continuidade à uma série de tutorias sobre HTML. Se você já tem uma noção básica não faz diferença a sequência, porém, se você deseja aprender na ordem correta, siga para a página que direciona o aprendizado básico.
Boa leitura!

ATUALIZAÇÃO (06/08/2015): Este post foi escrito com base nos tutoriais do W3C para HTML 4.1. O link de referência deste post, ou de posts seguintes desta mesma série, hoje aponta para o tutorial de HTML 5, logo não é mais válido. O conteúdo está correto, mas não é sobre a versão mais atual!

Imagem em HTML

Trabalhar com imagens em html é bastante simples, existem poucas tags e podemos interagir pouco com elas.

Para inserir uma imagem em um arquivo, faça como no trecho de código abaixo:


<img src="minha_imagem.jpg">
<img src="www.site.com.br/imagens/imagem.jpg">

As duas maneiras estão corretas, porém na primeira, se sua imagem estiver em um diretório diferente do diretório de sua página, ela não será exibida.

Alinhando imagens

Para alinhar uma imagem, utilize o atributo align com o argumento bottom, middle ou top, e sua imagem ficará alinhada nas respectivas posições em relação ao texto. Segue abaixo trechos de código para exemplificar:

<img src="minha_imagem.jpg" align="bottom">
<img src="minha_imagem.jpg" align="middle">
<img src="minha_imagem.jpg" align="top">

Atributo Alt

O atributo alt é utilizado para colocar uma “legenda” interna na foto. Interna porque ela só será exibida se o usuário passar o mouse sobre a imagem (existem alguns navegadores que não suportam).
Os sites validadores de código, ou seja, que verificam se você escreveu seu site com a semântica correta avaliam uma imagem sem o atributo alt como não correta, isto é, ela não está errada, mas vale uma advertência, pois alguns sistemas de navegação para deficientes se valem da legenda da imagem.
Segue trecho de codigo exemplificando o atributo:

<img src="imagem.jpeg" alt="Minha Imagem é legal">

Ajustando as dimensões da imagem

Para ajustar as dimensões de uma imagem, basta usar os atributos width e height como no exemplo abaixo:

<img src="imagem.jpg" width="50" height-"50">

Tome cuidado com este atributo, pois dependendo das alterações que você fizer, a imagem pode sair distorcida.

Colocando um link na imagem

Para inserir um link em uma imagem, faça como no exemplo abaixo:

<a href="http://www.site.com.br">
     <img src="imagem.jpg" alt="Clique na imagem para seguir para o site." border="0">
</a>

Note que foi inserido outro atribudo dentro da tag <img>, que é o atributo border. Este atributo define (assim como nas tabelas) a expessura da borda da imagem. No exemplo escolhemos uma imagem sem borda, colocando para isso border=”0″.

Este foi o tutorial de imagens, até a próxima!
😉

Os códigos deste post estão disponíveis em:
https://github.com/jonasvm/sdevlab-cursos/tree/master/sdevlab-html41
Contribua!

Padrão

Publicado por

Postado no

2 de março de 2010

Publicado em

HTML, Linguagens

comentários

2 Comentários

SdevLab – Tutorial | HTML Form

Eae galera!
O tutorial de hoje é a sequência do tutorial anterior, que dava continuidade à uma série de tutorias sobre HTML. Se você já tem uma noção básica não faz diferença a sequência, porém, se você deseja aprender na ordem correta, siga para a página que direciona o aprendizado básico.
Boa leitura!

ATUALIZAÇÃO (06/08/2015): Este post foi escrito com base nos tutoriais do W3C para HTML 4.1. O link de referência deste post, ou de posts seguintes desta mesma série, hoje aponta para o tutorial de HTML 5, logo não é mais válido. O conteúdo está correto, mas não é sobre a versão mais atual!

HTML Form

Um formulário é uma região de um arquivo html que tem a função de interagir com quem está navegando. O formulário normalmente é utilizado para colher informações, e para isto utiliza as tags demonstradas no exemplo abaixo.


<html>
   <head>
      <title>
           Teste 17
      </title>
   </head>
   <body>
      <form>
           Nome:
           <input type="text" name="nome">
           <br>
           Conhece HTML?:
           <br>
           <input type="radio" name="html" value="sim">Sim
           <br>
           <input type="radio" name="html" value="nao">Não
           <br>
           Ja fez os outros tutoriais?
           <br>
           <input type="checkbox" name="respostas" value="sim">Sim
           <br>
           <input type="checkbox" name="respostas" value="nao">Não
           <br>
           <input type="checkbox" name="respostas" value="quase">Quase todos
           <br>
      </form>
   </body>
</html>

Copie o código acima e cole no Bloco de Notas, salve como teste17.html e execute o exemplo para ver o resultado.

O exemplo mostra um formulário simples, sua tag principal é a <form> que junto com seu par </form> delimitam a região do formulário.
A tag input é utilizada para inserir um elemento, os elementos do exemplo acima são uma caixa de entrada de texto, que serve para receber texto obviamente, um radio, que é utilizado para receber respostas de pergunta de resposta única, e um checkbox, que é utilizado para receber respostas de uma pergunta de multipla escolha.
Estas tags são diferenciadas pelo argumento do atributo type. Para eu definir um elemento <input> do tipo entrada de texto, utilize o argumento type=”text”. Para definir um radio, type=”radio”, e para definir um checkbox, type=”checkbox”.

Em todas as tags do exemplo temos outro atributo em comum, que é o name. Este atributo é utilizado como variável, e vai “receber” o que o usuário digitar ou selecionar no elemento. Coloquei receber entre aspas porque na verdade não é que ele recebe o que o usuário digitar, se fossemos tratar os dados utilizando alguma outra linguagem como php por exemplo, este “nome” que eu defino para o elemento é a referência que o html passa para o php, mas por enquanto não se preocupe com isso.

Por último, no caso do checkbox e do radio tinha ainda um outro atributo dentro do elemento type, o value. Este atributo é o valor que o html vai enviar para a linguagem de programação que vai tratar os dados do formulário. No exemplo não colocamos value dentro da caixa de texto porque a idéia era deixá-la em branco. Caso desejássemos inicializá-la com algum valor, bastaria inserir o atributo value com o texto desejado.

Outros elementos de formulário

TextArea
TextArea é uma caixa de entrada de texto semelhante a text, porém ela pode receber uma quantidade muito maior de caracteres. Exemplo:

<textarea rows="10" cols="30">
     texto
</textarea>

Note que diferente de outros elementos, se eu quiser inicializar o meu textarea basta eu colocar o texto desejado entre as tags <textarea> e </textarea>. Os atributos rows e cols vão estabelecer o tamanho da área de texto.

Menu drop down
O menu drop down é uma lista que tem várias opções e o usuário só pode escolher uma delas. Segue o exemplo abaixo:


<select name="opcoes">
   <option value="1"> Opção 1
   <option value="2"> Opção 2
   <option value="3"> Opção 3
</select>

Todas as tags <option> com seus respectivos valores que estiverem dentro das tags <select> e </select> farão parte do menu drop down.

Fieldset
O fieldset coloca uma borda no formulário, se você tiver mais de um formulário dentro da mesma página compensa usar porque fica mais organizado. Segue exemplo:

<fieldset>
   <legend>Teste</legend>
   <form>
      Item 1 <input type="text">
      Item 2 <input type="text">
   </form>
</fieldset>

Tudo que estiver entre as tags <fieldset> e </fieldset> vai ficar entre as bordas, e a tag <legend> define o título do fieldset.

Botão
Os usos do botão se dão quando o html se mistura com outra linguagem, mas como este não é nosso foco, vou somente postar sua tag.

<button>
     Texto
</button>

Botão Submit
O botão submit quando clicado, vai enviar o conteúdo de um formulário para algum outro arquivo. Como ele faz isso? Muito simples, adicionando o atributo action=”nome_arquivo_exemplo.php” method=”get” dentro da tag <form> isto é possível. Segue abaixo exemplo:


<form action="teste.php" method="get">
   Enviar este texto <input type="text" name="texto">
   <input type="submit" value="Submit">
</form>

No exemplo quando o usuário clicar no botão Submit, o conteúdo da caixa de texto será passada para o arquivo teste.php.

Enviando um formulário por email

Para enviar um formulário por email o procedimento é bastante parecido com o anterior. Basta fazer como no exemplo abaixo:

<form action="MAILTO:seuemail@host.com.br" method="post" enctype="text/plain">
   Enviar este texto por email<input type="text" name="texto">
   <input type="submit" value="Enviar">
</form>

Este foi o tutorial sobre formulários. Até a próxima!
😛

Os códigos deste post estão disponíveis em:
https://github.com/jonasvm/sdevlab-cursos/tree/master/sdevlab-html41
Contribua!

Fonte de pesquisa: w3schools.com/html

Padrão

Publicado por

Postado no

1 de março de 2010

Publicado em

HTML, Linguagens

comentários

1 comentário

SdevLab – Tutorial | HTML List

Eae galera!
O tutorial de hoje é a sequência do tutorial anterior, que dava continuidade à uma série de tutorias sobre HTML. Se você já tem uma noção básica não faz diferença a sequência, porém, se você deseja aprender na ordem correta, siga para a página que direciona o aprendizado básico.
Boa leitura!

ATUALIZAÇÃO (06/08/2015): Este post foi escrito com base nos tutoriais do W3C para HTML 4.1. O link de referência deste post, ou de posts seguintes desta mesma série, hoje aponta para o tutorial de HTML 5, logo não é mais válido. O conteúdo está correto, mas não é sobre a versão mais atual!

HTML List

Montar uma lista em html é muito simples. Podemos montar uma lista ordenada como a divisão de capítulos de um livro, podemos montar uma lista não ordenada, ou seja, um item da lista não está ordenado de nenhuma forma em relação à outro, ou então podemos montar uma lista de definições.
Segue abaixo um exemplo com os 3 tipos. Copie e cole o  código no Bloco de notas e salve como teste16.html:

<html>
   <head>
      <title>
           Teste 16
      </title>
   </head>
   <body>
      <p>
           Exemplo de lista não ordenada.
      </p>
      <ul>
           <li>
                Item 1
           </li>
           <li>
                Item 2
           </li>
      </ul>
      <p>
           Exemplo de lista ordenada.
      </p>
      <ol>
           <li>
                Item 1
           </li>
           <li>
                Item 2
           </li>
      </ol>
      <p>
           Exemplo de lista de definição.
      </p>
      <dl>
           <dt>
                Item que estamos definindo
           </dt>
                <dd>
                     caracteristica 1
                </dd>
                <dd>
                     caracteristica 2
                </dd>
            <dt>
                Item 2 que estamos definindo
            </dt>
                <dd>
                     caracteristica
                </dd>
      </dl>
   </body>
</html>

Explicando o exemplo acima, a primeira lista que aparece é a lista não ordenada. Esta lista começa e termina nas tags <ul> e </ul> e seus itens ficam entre as tags <li> e </li>.

A segunda lista do exemplo é a lista ordenada, que é bastante semelhante em termos de tags à lista não ordenada. A lista começa e termina com as tags <ol> e </ol> e seus itens funcionam da mesma maneira da  não ordenada.

O terceiro exemplo é uma lista de definição. Esta é um pouco diferente das outras duas, pois usa uma tag extra. Ela começa e termina nas tags <dl> e </dl> e seus itens ficam entre as tags <dt> e </dt>. A definição dos termos da lista ficam entre as tags <dd> e </dd>.

Para modificar o estilo das listas, tente o atributo type em uma das combinações dos trechos abaixo:


<ol type="A">
<ol type="a">
<ol type="I">
<ol type="i"
<ul type="disc">
<ul type="circle">
<ul type="square">

Tente intercalar diferentes tipos de lista para treinar estas tags. Este foi o tutorial sobre listas, talvez o mais simples da série.

Até o próximo tutorial!
😉

Os códigos deste post estão disponíveis em:
https://github.com/jonasvm/sdevlab-cursos/tree/master/sdevlab-html41
Contribua!

Fonte de pesquisa: w3schools.com/html

Padrão

Publicado por

Postado no

27 de fevereiro de 2010

Publicado em

HTML, Linguagens

comentários

1 comentário

SdevLab – Tutorial | HTML Table

Eae galera!
O tutorial de hoje é a sequência do tutorial anterior, que dava continuidade à uma série de tutorias sobre HTML. Se você já tem uma noção básica não faz diferença a sequência, porém, se você deseja aprender na ordem correta, siga para a página que direciona o aprendizado básico.
Boa leitura!

ATUALIZAÇÃO (06/08/2015): Este post foi escrito com base nos tutoriais do W3C para HTML 4.1. O link de referência deste post, ou de posts seguintes desta mesma série, hoje aponta para o tutorial de HTML 5, logo não é mais válido. O conteúdo está correto, mas não é sobre a versão mais atual!

HTML Table

A idéia de usar tabelas em arquivos html é apresentar de forma tabular certas informações. Por exemplo, se quisessemos exibir uma lista de alunos com as respectivas notas que cada um tirou durante um ano escolar, a maneira ideal para fazer este trabalho seria utilizando tabelas.
Porém, muitas pessoas utilizam tabelas para desenvolver layouts de suas páginas. Esta prática não é recomendada desde que os desenvolvedores passaram a utilizar arquivos css para esta função. Então, neste tutorial não será ensinado como desenvolver um layout usando tabelas, será mostrado somente como manipular linhas, colunas e outras tags referentes ao assunto.

Para explicar como montar uma tabela simples vamos ao primeiro exemplo. Copie e cole o trecho de código no Bloco de Notas salvando como teste12.html.

<html>
   <head>
      <title>
           Teste 12
      </title>
   </head>
   <body>
      <table border="1">
         <tr>
            <td>
                 Esta é a primeira coluna da linha 1.
            </td>
            <td>
                 Esta é a segunda coluna da linha 1.
            </td>
         </tr>
         <tr>
            <td>
                 Esta é a primeira coluna da linha 2.
            </td>
            <td>
                 Esta é a segunda coluna da linha 2.
            </td>
         </tr>
      </table>
   </body>
</html>

O exemplo acima mostra uma tabela simples, com duas linhas e duas colunas. A tag que inicia a tabela é a tag <table>, e a que finaliza é seu par </table>. Veja que um atributo foi inserido dentro desta tag, que é o border. No exemplo eu coloquei bordas de tamanho 1, mas poderia aumentar ou deixar a tabela sem bordas, colocando como valor do atributo “0”. Outros atributos poderiam ser inseridos dentro desta tag, que serão explicados no decorrer deste tutorial.

Tabelas com Cabeçalho

Existe uma tag própria para colocar cabeçalhos nas tabelas, que é exemplificada no exemplo abaixo, que deve ser salvo como os outros, nomeando-o teste13.html.

<html>
   <head>
      <title>
           Teste 13
      </title>
   </head>
   <body>
      <table border="1">
         <tr>
            <th width="20%">
                 Este é o cabeçalho da coluna 1.
            </th>
            <th width="80%">
                 Este é o cabeçalho da coluna 2.
            </th>
         </tr>
         <tr>
            <td>
                 Esta é a primeira coluna da linha 1.
            </td>
            <td>
                 Esta é a segunda coluna da linha 1.
            </td>
         </tr>
         <tr>
            <td>
                 Esta é a primeira coluna da linha 2.
            </td>
            <td>
                 Esta é a segunda coluna da linha 2.
            </td>
         </tr>
      </table>
   </body>
</html>

Observe que para inserirmos o cabeçalho na tabela foi utilizada uma linha normal, mas no lugar da tag <td> para as colunas, nós usamos a <th>. Uma outra observação ainda a respeito deste exemplo, é que nele foi inserido um outro atributo dentro da nossa tabela, que é o width. Nele definimos que 20% da área do nosso navegador seria destinado à primeira coluna, e 80% para a segunda. Se eu quisesse deixar um tamanho fixo, bastaria eu trocar a porcentagem para um número exato em pixels.

Juntando linhas e colunas da tabela

Em algumas situações pode ser necessário juntar linhas e colunas em uma tabela. Para isto usamos os atributos colspan e rowspan. Copie o exemplo abaixo e cole como de costume no Bloco de Notas salvando com teste14.html.


<html>
     <head>
          <title>
               Teste 14
          </title>
     </head>
     <body>
          <table border=1>
               <tr>
                    <th rowspan=3>
                         Notas do primeiro semestre
                    </th>
                    <td>
                         Português
                    </td>
                    <td>
                         10
                    </td>
               </tr>
               <tr>
                    <td>
                         Matemática
                    </td>
                    <td>
                         10
                    </td>
               </tr>
               <tr>
                    <td>
                         Ciências
                    </td>
                    <td>
                         10
                    </td>
               </tr>
               <tr>
                    <td colspan="3">
                         <p align="center">
                              <b>
                                   Aprovado no primeiro semestre
                              </b>
                         </p>
                    </td>
               </tr>
               <tr>
                    <th rowspan=3>
                         Notas do segundo semestre
                    </th>
                    <td>
                         História
                    </td>
                    <td>
                         10
                    </td>
               </tr>
               <tr>
                    <td>
                         Geografia
                    </td>
                    <td>
                         10
                    </td>
               </tr>
               <tr>
                    <td>
                         Empreendedorismo
                    </td>
                    <td>
                         10
                    </td>
               </tr>
               <tr>
                    <td colspan="3">
                         <p align="center">
                              <b>
                                   Aprovado no segundo semestre
                              </b>
                         </p>
                    </td>
               </tr>
          </table>
     </body>
</html>

Cellpading e Cellspacing

Cellpading e cellspacing inserem espaços entre o conteúdo da tabela e sua borda, e entre o conteúdo da página e a tabela. Salve o código abaixo como teste15.html, que exemplifica o uso destes atributos.


<html>
   <head>
      <title>
           Teste 15
      </title>
   </head>
   <body>
      <p>
           Exemplo com cellpading:
      </p>
      <table border="1" cellpading="10">
         <tr>
            <td>
                 C1 - L1
            </td>
            <td>
                 C2 - L1
            </td>
         </tr>
         <tr>
            <td>
                 C1 - L2
            </td>
            <td>
                 C2 - L2
            </td>
         </tr>
      </table>
      <p>Exemplo com cellspacing:</p>
      <table border="1" cellspacing="10">
         <tr>
            <td>
                 C1 - L1
            </td>
            <td>
                 C2 - L1
            </td>
         </tr>
         <tr>
            <td>
                 C1 - L2
            </td>
            <td>
                 C2 - L2
            </td>
         </tr>
      </table>
   </body>
</html>

Alterando o Fundo das tabelas

Nós podemos mudar a cor de fundo das nossas tabelas, ou então colocar uma imagem como fundo, para isto basta utilizar o atributo bgcolor e background respectivamente, como são apresentados nos trechos de código abaixo.


<table bgcolor="#009988">
<table background="imagem.jpg">

Vale lembrar que para o caso da imagem, se ela não estiver no mesmo diretório da página, o correto é colocar o caminho inteiro da imagem. Uma outra informação muito útil, é que estes atributos bgcolor e background podem ser inseridos dentro de uma linha ou coluna no lugar de ser definido na declaração da tabela. Isto permite eu montar uma tabela com uma linha (ou coluna) de cada cor por exemplo.

Alinhando o conteúdo dentro da tabela

Para fechar o tutorial vamos aprender a alinhar o conteúdo dentro de uma tabela, veja os exemplos nos trechos de código abaixo:


<td align="center">
<td align="left">
<td align="right">

As linhas acima alinham o conteúdo da coluna, centralizando, à esquerda e à direita respectivamente. Tente outras combinações, inserindo o atributo align na tag <table> e <tr> para praticar.

Este foi o tutorial sobre tabelas, até a próxima!
😉

Os códigos deste post estão disponíveis em:
https://github.com/jonasvm/sdevlab-cursos/tree/master/sdevlab-html41
Contribua!

Fonte de pesquisa: w3schools.com/html

Padrão

Publicado por

Postado no

27 de fevereiro de 2010

Publicado em

HTML, Linguagens

comentários

2 Comentários

SdevLab – Tutorial | HTML Frame

Eae galera!
O tutorial de hoje é a sequência do tutorial anterior, que dava continuidade à uma série de tutorias sobre HTML. Se você já tem uma noção básica não faz diferença a sequência, porém, se você deseja aprender na ordem correta, siga para a página que direciona o aprendizado básico.
Boa leitura!

ATUALIZAÇÃO (06/08/2015): Este post foi escrito com base nos tutoriais do W3C para HTML 4.1. O link de referência deste post, ou de posts seguintes desta mesma série, hoje aponta para o tutorial de HTML 5, logo não é mais válido. O conteúdo está correto, mas não é sobre a versão mais atual!

HTML Frame

Utilizando os frames nós mudamos um pouco o formato de nossas páginas, podemos abrir mais de uma ao mesmo tempo na mesma aba do navegador. Com isto é possível desenvolvermos projetos mais elaborados.

Para explicar melhor como utilizar os frames, vamos ao primeiro exemplo, copie o código abaixo e colo no Bloco de Notas, salvando como teste7.html:


<html>
   <head>
      <title>
           Teste 7
      </title>
   </head>
   <frameset cols="25%,75%">
      <frame src="frame_1.html">
      <frame src="frame_2.html">
   </frameset>
</html>

Agora crie dois arquivos html e salve ambos no mesmo diretório que você salvou o teste 7. Um dos arquivos dever ser nomeado como frame_1.html e o outro frame_2.html.

Note que se você clicar na barra que divide os frames você poderá redimensionar o tamanho deles. Para criar um frame de tamanho fixo, utilize o atributo noresize seguindo a sintaxe abaixo


<frame noresize="noresize" src="seuframe.html">

Frames Mistos

Um frame misto tem linhas e colunas na sua composição, copie e cole o exemplo abaixo no Bloco de notas e salve como teste8.html; crie também mais 1 arquivo,  frame_3.html, que deve ser salvo no mesmo diretório que os arquivos criados no exemplo 7 e 8.


<html>
   <head>
      <title>
           Teste 8
      </title>
   </head>
   <frameset rows="50%,50%">
      <frame noresize="noresize" src="frame_1.html">
      <frameset cols="25%,75%">
           <frame noresize="noresize" src="frame_2.html">
           <frame noresize="noresize" src="frame_3.html">
      </frameset>
   </frameset>
</html>

Noframes

Regiões de noframe são áreas que só serão exibidas por navegadores que não exibirem frames, dentro dela você pode usar a tag body como no exemplo abaixo:


<html>
   <head>
      <title>
           Teste 9
      </title>
   </head>
   <frameset rows="50%,50%">
      <frame noresize="noresize" src="frame_1.html">
      <frameset cols="25%,75%">
           <frame noresize="noresize" src="frame_2.html">
           <frame noresize="noresize" src="frame_3.html">
           <noframes>
                <body>
                     <p>
                          Esta região só será exibida em navegadores 
                          que não suportarem frames.
                     </p>
                </body>
           </noframes>
      </frameset>
   </frameset>
</html>

Copie o código e salve no mesmo lugar do exemplo anterior, com o nome teste9.html.

Navegação entre frames

Para fazer uma página que utilize um frame somente para a navegação, fazemos um arranjo da seguinte maneira: um arquivo html é utilizado de “menu” e guarda todos os links que irão abrir no frame “principal”. Segue um exemplo para ilustrar melhor a idéia. Copie e cole o código como nos exemplos anteriores e salve este como teste10.html.


<html>
   <head>
      <title>
           Teste 10
      </title>
   </head>
   <frameset cols="25%,75%">
      <frame noresize="noresize" src="menu.html">
      <frame noresize="noresize" src="frame_1.html" name="principal">
   </frameset>
</html>

Note que foi utilizado o atributo name dentro da tag frame, que é o responsável por fazer a conexão com o link, que é exemplificado no código abaixo, que deve ser salvo como menu.html.


<html>
   <head>
      <title>
           Menu
      </title>
   </head>
   <body>
      <a href="frame_1.html" target="principal">
           Frame 1
      </a>
      <a href="frame_2.html" target="principal">
           Frame 2
      </a>
      <a href="frame_3.html" target="principal">
           Frame 3
      </a>
   </body>
</html>

Observe que na tag do link, foi utilizado o atributo target (que foi explicado neste tutorial) com o argumento “principal”, que foi definido dentro do exemplo anterior. Quando qualquer link do código acima for clicado, ele abrirá a página destino no frame da direita do navegador.

OBS: para o exemplo funcionar corretamente você deve ter todas as páginas envolvidas (teste10.html, menu.html, frame_1.html, frame_2.html e frame_3.html)  salvas no mesmo diretório.

Frames dentro de uma página

Para inserirmos um frame dentro de uma página (um arquivo que tem as tags head, body, ou seja, que não foi feita utilizando a tag frameset), utilizamos a tag iframe, que é demonstrada na prática no exemplo abaixo.


<html>
   <head>
      <title>
           Teste 11
      </title>
   </head>
   <body>
      <p>
           Esta é minha página.
      </p>
      https://sdevlab.wordpress.com
      <p>
           Eu continuo com a pagina normalmente, porém, 
           uma outra página está "dentro" dela.
      </p>
   </body>
</html>

Errata: Este trecho do iFrame ficou um bom tempo errado aqui no blog, mas foi corrigido em 26/05/2016.

Salve o exemplo como teste11.html. Crie uma página e salve como iframe.html no mesmo diretório do teste11.html ou então faça um iframe para uma página da web para testar!

Este foi o tutorial sobre frames, até a próxima!
😉

Os códigos deste post estão disponíveis em:
https://github.com/jonasvm/sdevlab-cursos/tree/master/sdevlab-html41
Contribua!

Fonte de pesquisa: w3schools.com/html