As
páginas HTML são documentos textos que podem ser editados em qualquer
editor de texto simples (Notepad, por exemplo). Os arquivos HTML
padrão possuem extensão .htm ou .html e seus comandos são
chamandos de Tags, que informa ao navegador como será formatada
a página.
As Tags, são marcas padrões utilizadas para fazer todas as
indicações necessárias ao browser.
Tags são os elementos do Html encarregados de realizar esta
formatação da qual estou falando. São com estes comandos, ou melhor,
com estas tags que você, por exemplo, fará com que uma fonte fique
na cor vermelha, ou mesmo que esta fonte seja Arial ou Verdana.
Existem diversas tags, muitas mesmo, e cada uma possui uma função
diferente.
Ou seja, no World você possui o botão centralizar 
,
no Html você possui a Tag <center>,
no World você possui o botão Italico  ,
em Html você possui a Tag <I>.
Como em qualquer linguagem, os comandos tem uma sintaxe própria
e seguem algumas regras:
* As Tags aparecem sempre entre os sinais de "menor que" (<)
e "maior que" (>).
* As Tags são geralmente usadas aos pares, sendo que a Tag de finalização
é precedida de uma barra (/).
Basicamente tudo o que você for fazer com a html necessitará de
código, tag.
Todo documento Html possue um código fonte, que é na verdade a página
em si, só que com todas as tags visíveis.
E o melhor disso tudo é que você pode por exemplo, ver como esta
página foi feita sem nenhuma dificuldade.
Clique com o botão direito do mouse sobre a página e escolha a opção
"Visualizar Código Fonte".
| Iniciando
sua página - estrutura básica em html |
|
<HTML></HTML>
Envolvem todas as seções de um documento (HEAD e BODY)
<HEAD></HEAD> Contém parâmetros de configuração
do documento.
<TITLE></TITLE>título da Home Page
<BODY></BODY> Contém o conteúdo da Home Page
|
| Criando
seu primeiro documento Html |
Vamos criar o primeiro documento Html. Para
isso abra seu Notepad ou seu editor de textos preferido e vamos
construir nossa primeira página Html de exemplo, veja o código
:
<html>
<head>
<title> Minha primeira página</title>
</head>
<body>
<p>
Aqui você insere textos, imagens, tabelas,
etc. </p>
</body>
</html>
Após ter digitado estas tags em seu editor salva o documento,
porêm coloque neste a extensão ".html", você pode escolher
então a opção salvar como e então colocar "pagina.html" como o
nome deste arquivo.
Agora vamos visualizá-lo em seu navegador.
Pronto, criamos nossa primeira página de internet, é claro
que este é um exemplo simples, mas é basicamente assim que funciona
o Html.
Todo documento Html
possui uma estrutura bem parecida, ou seja, ele sempre vai possuir
o início do documento, marcado pela tag <html>, um
cabeçalho marcado pela tag <head>, o corpo marcado
pela tag <body> e finalmente o final do documento
marcado pela tag </html>.
Vimos o exemplo anterior que, a primeira parte importante em um
documento Html é o cabeçalho. Nele estarão contidas informações
importantes sobre a página, como por exemplo o título dela e inclusive
informações que são chamadas de Meta Informações, pois estão contidas
dentro das chamadas Meta Tags.
<html>
Esta é a primeira tag de um documento
Html, é com ela que você diz ao navegador que alí começa
a página.
<head>
Com
a tag <head> que você diz ao navegador que a partir
dela estarão algumas informações importantes sobre sua página
como título e meta informações.
<title>
Dentro
das tags<title> ... </title> você
colocará o título da sua página, que é aquele texto que aparece
no topo da janela do navegador, olhe para o topo desta janela
para ver o título.
Meta
tags são códigos html, esses códigos ajudam alguns sites de busca,
como Altavista e vários outros, a encontrar o seu site mais rapidamente.
Esses códigos organizam as informações que os sistemas de busca
precisam para mostrar a sua página em um resultado de busca feita
por um usuário. Esse código contém informações sobre o título,
palavras-chave e descrição do seu site.
As tags ficam entre
os comandos <head>
e </head>, que
ficam bem no topo da página. Eles podem ser colocados em todas
as páginas do seu site, somente nas principais, ou ainda só na
página inicial.
Esta outra meta é usada para informar quem
é o autor da página, você pode por exemplo caso, queira, informar
seu nome e também seu email.
exemplo:
<meta name= "author" content="Magali Bracellos
- magali@ccuec.unicamp.br">
Insere a descrição da página que aparecerá
em alguns sistemas de buscas. Pequena porque esta deve conter
por volta de 255 caracteres, ou seja, uma breve descrição.
exemplo:
<meta name= "description" content="descricao
do seu site">
Esta tag meta é usada para indicar a alguns
sites de busca palavras chave (keywords) que podem ser usadas
para identificar o conteúdo do seu site. Elas são separadas por
uma vírgula (,).
exemplo:
<meta name= "keywords"
content="Palavras-chave sempre separadas por vírgula">
Vamos fazer agora nossa segunda página, com um cabeçalho bem completo.
Abra de novo seu editor e vamos lá :
Exercício:
<html>
<head>
<meta name= "author" content="Magali Bracellos
- magali@ccuec.unicamp.br">
<meta name= "description" content="descricao do
seu site">
<meta name= "keywords"
content="Palavras-chave sempre separadas somente por espaços em
branco">
<title> Criando um cabeçalho
mais completo</title>
</head>
<body>
<p>
Neste segundo exercício criamos um
cabeçalho mais completo.</p>
</body>
</html>
Após ter digitado o código acima em seu editor, siga o mesmo processo,
salve-o com a extensão ".html" e então abra-o em seu navegador para
ver o resultado. Aparentemente não haverá nada de muito novo, mas
para os sites de busca como o Google, Altavistae outros... por exemplo,
seu site já poderá ser cadastrado sem problemas, pois ele já possui
algumas das informações necessárias.
|
