SdevLab – Tutorial | Como Fazer uma Página HTML

Eae galera!
O tutorial de hoje é o último da sequência de tutorias sobre HTML. Se você já tem uma noção básica não faz diferença ter lido os tutoriais anteriores, 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!

Como fazer uma Página HTML

Para finalizar a série de tutoriais básicos de html vamos fazer uma página completa. A idéia de fazer esta página não é ensinar a fazer uma página bonita e incrementada, e sim ensinar como funciona o esquema de links e estruturação, pois até então só vinhamos fazendo alguns exemplos soltos.

Explicando nosso projeto para ficar mais fácil entender a idéia, nós vamos fazer um guia de referência para os nossos exemplos (motivo de eu sempre sugerir um nome para os arquivos de exemplo) e tutoriais.
As tarefas que precisaremos executar para concluir o projeto são:

  • montar uma estrutura de pastas para salvar os arquivos
  • criar o layout
  • definir como vai ser a navegação
  • criar as páginas
  • montar a navegação

Criando a Estrutura de Pastas

Para começar crie uma pasta em algum diretório de seu computador e renomeie esta pasta para guia_html (com letras minúsculas e sem espaço entre as palavras).
Dentro desta pasta crie mais duas pastas, uma renomeie para html e a outra para imagens.

Apartir de agora, todos os arquivos .html que você for utilizar na página devem ser salvos dentro da pasta html, e todas as imagens utilizadas (arquivos. jpg, .gif, .png, etc)  devem ficar na pasta imagens. Isto facilita bastante a organização dos arquivos, principalmente se o projeto começar a crescer.

OBS: Copie e cole todos os exemplos que fizemos no decorrer dos tutoriais (teste1.html ao teste18.html) na pasta html.

Criando o Layout

Como o projeto é fazer um guia de referência para os exemplos que testamos nos tutoriais, vamos estruturar nossa página principal com 2 frames. Um destes frames vai ser o menu do guia e no outro vamos exibir os exemplos prontos (teste1.html, teste2.html, …) e os tutoriais.

A imagem abaixo exemplifica como será o nosso layout.

estrutura_pagina

 

 

 

 

 

 

 

Abaixo está o código da página inicial do guia, que deve ser salva na pasta html como index.html.

<html>
   <head>
      <title>
           Guia de Referência
      </title>
   </head>
   <frameset cols="25%, 75%">
      <frame noresize="noresize" name="menu" SRC="menu_page.html">
      <frame noresize="noresize" name="home" SRC="home_page.html">
   </frameset>
</html>

Navegação

Nós queremos que o usuário clique no menu (frame da esquerda) e a página abra no outro frame (frame da direita), sem sair do menu (normalmente guias e helps de aplicativos funcionam desta maneira), então, a única coisa que precisamos lembrar é do atributo target dos links, para a página destino não abrir em um frame não desejado.

Veja que para esta página foi simples pensar na navegação porque ela é muito básica, mas em projetos maiores, este tipo de planejamento demora um pouco mais, e normalmente a equipe de desenvolvimento pensa nisso em conjunto (ainda mais se o projeto envolver outros tipos de mídia como audío e vídeo por exemplo), por isso não pulei esta etapa mesmo ela sendo praticamente insignificante aqui no exemplo do tutorial.

Criando as páginas e fazendo tudo funcionar

Salve a imagem abaixo na pasta imagens que criamos nos procedimentos acima:

Agora salve o código abaixo como menu_page.html e salve também na pasta html.

<html>
   <head>
      <title>
           Guia de Referência
      </title>
   </head>
   <body>
      <img src="imagens/html.jpg">
      <br>
      <p align="center">
           <strong>
                Guia de  Referência
           </strong>
      </p>
      <p>
           <em>
                Tutoriais
           </em>
      </p>
      <p>
         <ol>
            <li>
                 Usando seus conhecimentos de listas e links, monte aqui a 
                 lista de links para os tutoriais
            </li>
         </ol>
      </p>
      <p>
           <em>
                Exemplos
           </em>
      </p>
      <p>
         <ul>
            <li>
                 <a href="teste1.html" target="home">
                      Teste  1
                 </a>
            </li>
            <li>
                 <a href="teste2.html" target="home">
                      Teste  2
                 </a>
            </li>
            <li>
                 <a href="teste3.html" target="home">
                      Teste  3
                 </a>
            </li>
            <li>
                 <a href="teste4.html" target="home">
                      Teste  4
                 </a>
            </li>
            <li>
                 <a href="teste5.html" target="home">
                      Teste  5
                 </a>
            </li>
            <li>
                 <a href="teste6.html" target="home">
                      Teste  6
                 </a>
            </li>
            <li>
                 <a href="teste7.html" target="home">
                      Teste  7
                 </a>
            </li>
            <li>
                 <a href="teste8.html" target="home">
                      Teste  8
                 </a>
            </li>
            <li>
                 <a href="teste9.html" target="home">
                      Teste  9
                 </a>
            </li>
            <li>
                 <a href="teste10.html" target="home">
                      Teste  10
                 </a>
            </li>
            <li>
                 <a href="teste11.html" target="home">
                      Teste  11
                 </a>
            </li>
            <li>
                 <a href="teste12.html" target="home">
                      Teste  12
                 </a>
            </li>
            <li>
                 <a href="teste13.html" target="home">
                      Teste  13
                 </a>
            </li>
            <li>
                 <a href="teste14.html" target="home">
                      Teste  14
                 </a>
            </li>
            <li>
                 <a href="teste15.html" target="home">
                      Teste  15
                 </a>
            </li>
            <li>
                 <a href="teste16.html" target="home">
                      Teste  16
                 </a>
            </li>
            <li>
                 <a href="teste17.html" target="home">
                      Teste  17
                 </a>
            </li>
            <li>
                 <a href="teste18.html" target="home">
                      Teste  18
                 </a>
            </li>
         </ul>
      </p>
      <p>
           <font size="2">
                <a  href="https://sdevlab.wordpress.com/">
                     Copyright © 2010 Sanoj's  devLab
                </a>
          </font>
      </p>
   </body>
</html>

E agora para finalizar, copie e cole o código abaixo no BLoco de notas e salve como home_page.html:

<html>
   <head>
      <title>
           Home
      </title>
   </head>
   <body>
      <p>
           Guia de Referência do blog SdevLab
      </p>
      <p>
           Bem vindo ao guia de referência aos tutoriais do nosso blog. 
           Para acessar qualquer menu ou exemplo, utilize o menu ao lado.
      </p>
   </body>
</html>

As demais páginas (teste1.html, teste2.html, …) você pode encontrar nos tutoriais anteriores.

Agora que o básico já foi ensinado, vai de cada um pesquisar novas técnicas e treinar para não esquecer.

Um último conselho que pode ser útil é o seguinte: existe uma maneira de ver o código fonte de uma página na internet. Suponha que você tenha gostado de uma página e queira saber como ela foi feita, para isto basta ir no menu Exibir>Código Fonte (Ctrl + U) do seu navegador que ele vai abrir um arquivo com o código da página.

Caso fique alguma dúvida, poste um comentário!

Até a próxima!

xD

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

Um comentário sobre “SdevLab – Tutorial | Como Fazer uma Página HTML

  1. Pingback: SdevLab – Curso| Aprenda HTML 4.1 Online | Sanoj's devLab

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s