Criando uma página – html

Ok… Vamos ser mais explícitos…

A idéia é que se faça uma página html que terá a aparência finalizada como essa que você está vendo, salvo as cores que não aparecem aqui devido a configuração de todo o blog que segue um padrão.

Bacana será ir fazendo o código (nada de copiar e colar, hein!) e testando no navegador para ver o resultado.

Detalhe importante: Se você não utilizar os caracteres especiais, sua página html no seu navegador será comprometida. Essa é a “pegadinha”.

Vamos lá! It’s really easy! I swear!

 

Como construir uma página

Passo a passo

 

 

Utilizamos uma estrutura básica de uma página html e algumas tags com seus devidos atributos como pode ser visualizado abaixo:

<HTML>
<HEAD>
<TITLE> HTML Básico</TITLE>
</HEAD>
<body bgcolor= "#FFFACD" text="#6B8E23" topmargin="0" alink="#4876FF" 

vlink="#B22222">

Isso feito, iniciamos com a tag <FONT> para formatar a fonte de nossa página, <CENTER> para centralizar o nosso título e <H1> e <H2> para estabelecer os níveis do título e subtítulo. Fechamos todas as tags inclusive a tag </CENTER> e adicionamos um parágrafo <P> para começar a digitação de nosso texto. Nosso código html ganhou essa aparência:

<HTML>
<HEAD>
<TITLE> HTML Básico</TITLE>
</HEAD>
<body bgcolor= "#FFFACD" text="#6B8E23" topmargin="0" alink="#4876FF" 

vlink="#B22222">
<font face="arial" size="4">
<center>
<h1>Como construir esta página</h1>
<h2>Passo a passo</h2>
</center>
<p>
Começamos a digitar o nosso texto...

Para que o código da página html pudesse ser visualizado, utilizamos a tag <PRE>. A tag <PRE> serve para manter toda a formatação original (espacos em branco, quebras de linhas e tabulações importantes) do texto que estiver entre ela. E também utilizamos caracteres especiais para a formatação.

Caracteres Especiais saiba mais clicando aqui.

Dessa maneira nosso código html ficou com esse aspecto:

<HTML>
<HEAD>
<TITLE> HTML Básico</TITLE>
</HEAD>
<body bgcolor= "#FFFACD" text="#6B8E23" topmargin="0" alink="#4876FF" 

vlink="#B22222">
<font face="arial" size="4">
<center>
<h1>Como construir esta página</h1>
<h2>Passo a passo</h2>
</center>
<p>
Começamos a digitar o nosso texto...
<PRE>
<font color="#000000">
      Inserimos as tags html da página aqui dentro e
      alteramos a cor da fonte para melhor visualização.
</font>
</PRE>

Criação de Tabelas Html

Para iniciar, após a codificação html já exibida ou ainda utilizando o básico da criação de páginas, utilizamos a tag <TABLE> com alguns atributos para criarmos a nossa tabela como mostrado abaixo:

<HTML>
<HEAD>
<TITLE> HTML Básico</TITLE>
</HEAD>
<body bgcolor= "#FFFACD" text="#6B8E23" topmargin="0" alink="#4876FF" vlink="#B22222">
<font face="arial" size="4">
<center>
<h1>Como construir esta página</h1>
<h2>Passo a passo</h2>
</center>
<p>
Começamos a digitar o nosso texto...
<PRE>
<font color="#000000">
      Inserimos as tags html da página aqui dentro e
      alteramos a cor da fonte para melhor visualização.
</font>
</PRE> 

<table border="2" bordercolor="#3A5FCD">

Quando inserimos uma tabela, podemos colocar certos atributos para formatá-la, por exemplo “border” – que coloca uma borda, nesse nosso caso colocamos uma borda de 2 pixels, e “bordercolor” que, intuitivamente, percebemos tratar-se da cor da borda, nesse caso, uma tonalidade de azul royal. Veja um exemplo de uma tabela com duas linhas e duas colunas:

Tabela Tabela
Aprender Aprender

Para criarmos as linhas e células utilizamos as tags <TR> e <TD>, respectivamente.

TR significa “table row” – linha de tabela – começa e termina uma linha horizontal da tabela.

TD significa “table data” – dados da tabela – começa e termina cada célula contida nas linhas da tabela.

Sendo assim, nosso código agora será:

<HTML>
<HEAD>
<TITLE> HTML Básico</TITLE>
</HEAD>
<body bgcolor= "#FFFACD" text="#6B8E23" topmargin="0" alink="#4876FF" vlink="#B22222">
<font face="arial" size="4">
<center>
<h1>Como construir esta página</h1>
<h2>Passo a passo</h2>
</center>
<p>
Começamos a digitar o nosso texto...
<PRE>
<font color="#000000">
      Inserimos as tags html da página aqui dentro e
      alteramos a cor da fonte para melhor visualização.
</font>
</PRE> 

<table border="2" bordercolor="#3A5FCD">
<tr>
   <td>Tabela</td>
   <td>Tabela </td>
</tr>

<tr>
   <td>Aprender</td>
   <td>Aprender</td>
</tr>
</table>

</body>
</html>

Bem, agora já sabemos fazer uma tabela…

Até! Isso feito, finalizamos.

</body>
</html>

See you!

Anúncios

7 comentários em “Criando uma página – html

  1. Oie profº Adorei o que você passou hoje, no começo estava muito chato e estressante mais consegui pegar rápido.
    Gostei muito de ter apreendido tudo sobre a sula de hoje.
    Mais uma vez muito mais muito Obrigado
    E tenha uma boa noite.

  2. Olá Chiquinho, Nossa vou falar a verdade, no começo as aulas HTML estvam me deixando extressada, cheguei a comentar com você, (pensei que iria gostar de HTML, mais persebi que me enganei), mais foi como o senhor disse, estamos ainda no começo você vai aprender a gosta.
    E foi disso é feito na hora de colocar os código, não é muito prazerozo mais com o tempo eu me acostumo, mais apos de ver o site pronto sinto uma coisa diferente e penso nossa veleu apena, fui eu quem fiz.
    Chiquinho muito obrigado mesmo por tudo, que está nos ensinado com essa paciencia incrivel.
    Estou adorando suas aulas de HTML.
    Beijos ♥

  3. Olá,
    Fiz uma tabela para o meu blog no WordPress, mas estou enfrentando um problema bastante chato.
    Ele transforma as minhas tabelas e acrescenta bordas onde eliminei.
    Como ultrapassar estes problemas?
    Agradeço alguma dica,

    Airton

    1. Não sei ao certo se esse é o problema, mas quando usamos o wordpress gratuito (ponto com) ele herda as características do modelo em questão pre-elaborado. Se for esse o seu caso, você terá que ver se o template tem CSS customizável. Espero ter te ajudado. Abs

Deixe um comentário

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