Estrutura básica do HTML

São necessárias quatro tags básicas para descrever a estrutura geral de uma página a ser lida pelo navegador: <html> <head> <title> <body>.
Veja o exemplo abaixo:

<html>
<head>
<title>Seja bem-vindo</title>
</head>
<body>
... conteúdo da página
</body>
</html>

As tags <html> </html> :
- Indicam ao browser (navegador) que o documento a ser lido está escrito em linguagem HTML.
- Devem obrigatoriamente abrir e encerrar uma página.

<html>
... página a ser exibida
</html>

As tags <head> </head> :
- Indicam quais os comandos deverão ser lidos pelo navegador antes que a página seja carregada (como num cabeçalho).
- Ex: título da página, método de abertura, linguagens incorporadas...
- V êm logo após a tag <html>

<head>
... cabeçalho
</head>

As tags <meta> e seus atributos:
- São vários os tipos de tags meta. As mais comuns servem para definir dados utilizados em alguns sites de pesquisa (tipo google): autor, palavras-chaves e descrição de conteúdo do site.

As tags <title> </title>
- definem um título a ser exibido na barra de título da janela do navegador
- estão contidas entre as tags <head> </head>

<title> ... título da página ... </title>

As tags <body> </body>
- contém TODO o restante da página, é o que chamamos de corpo do documento
- <body> vem imediatamente após </head>
- </body> vem imediatamente antes de </html>
- pode conter alguns atributos como cor de fundo da página, margens...

<body>
... conteúdo da página
</body>

Vamos criar nossa primeira página em HTML. Para isso você precisa apenas de um editor de texto simples.
Se você trabalha com o Windows siga os passos para abrir o Bloco de Notas:
1 - Clique no botão [Iniciar]
2 - Escolha [Executar]
3 - Digite na caixa em branco: notepad e clique no botão [OK]

Com o Bloco de Notas aberto, digite o código abaixo.

<html>
<head>
<title>Bem-vindo ao meu site</title>
</head>
<body>
... conteúdo da página
</body>
</html>

O HTML não é uma linguagem tipo "case sensitive" (sensível a caracteres maiúsculos e minúsculos) mas em nossos exemplos usaremos tudo em minúsculo para já nos prepararmos para o xhtml, mas isso ja é outra história!

Você também poderia digitar tudo em uma única linha que não faria a menor diferença, no geral trabalhamos com a estrutura acima para ficar mais fácil fazermos eventuais correções e verificações. Por exemplo quando esquecemos de fechar uma tag ou colocar um sinal de menor etc.

Agora salve sua página. Lembre-se de colocar no nome do arquivo a extensão ".htm" e na caixa "salvar como tipo" escolha a opção "todos os arquivos". A codificação pode ser "ansi". Estamos usando a pasta criada em "meus documentos" com o nome "html4blog", conforme a seção "organização".

save_as

Visualize sua página no navegador.
Você pode abrir o seu navegador favorito e escolher a opção "arquivo" e "abrir" e procurar a sua página na pasta "html4blog" dentro da pasta "meus documentos".
Mas pode também primeiro abrir a pasta "html4blog" dentro da pasta "meus documentos" e dar dois cliques no arquivo "primeira_pagina.htm". Páginas ".htm" estão associadas ao navegador que será aberto automaticamente e exibirá sua página. Para ver o código da página, vá ao menu "exibir" e escolha a oção "código fonte". Isto abre automaticamente o bloco de notas já com seu código HTML digitado para qualquer alteração.
Note que qualquer página da Internet possui o recurso de exibir o código fonte e você pode até editar este código, mas na hora de salvar... Aí as coisas mudam. Se a página está na Internet, você não tem acesso ao servidor, que é o local onde a página está salva.

Inserindo um comentário:
- os comentários não são visualizados no navegador
- servem para orientação do programador
- podem ser colocados em qualquer lugar no código

Abra a sua página e coloque este comentário em qualquer lugar no código. Salve e visualize o resultado na janela do navegador. Nada deve aparecer, já que o comentário é visto apenas no Bloco de Notas.

comentario

Atributo bgcolor
- Atributo?
- Serve para definir uma cor de fundo para a página
- Deve ser inserido na tag <body>
<body bgcolor=”#nnnnnn”>

cor	hexadecimal	cor	hexadecimal
branco	#FFFFFF	branco neve	#F4F4F4
preto	#000000	cinza claro	#C0C0C0
azul	#0000FF	azul claro	#CCFFFF
verde	#00FF00	verde claro	#DEFEDA
vermelho	#FF0000	rosa claro	#FFD5D5
cinza	#CCCCCC	amarelo claro	#FFFFF5
amarelo	#FFFF00	roxo claro	#EFDFFF

exemplo:

<html>
<head>

<title>Bem-vindo ao meu site</title>
</head>
<body bgcolor="#efdfff">
... conteúdo da página
</body>
</html>

mais cores...

Abra novamente o Bloco de Notas, digite o código acima e salve sua página com o nome de segunda_pagina.htm.
Abrir o bloco de notas?
Salvar?

segundo_ex

Fim