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!
Prof, muito legal essas novas tags!!
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.
A desculpe pelo erro “a sula” era pra ser “aula”
rsrsrsrsrsrs……
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 ♥