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>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>
- 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.
<meta name=”author” content=” Tomate e os Emos”>
<meta name=”keywords” content=”palavra chave 1, palavra chave 2”>
<meta name=”description” content=”este site foi produzido para ajudar aos Emos a desenvolverem melhor seus espaces kkkkk”>
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 "htmlmeublog", conforme a seção "organização".ou editar
save_as ou salvar como 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 "htmlmeublog" dentro da pasta "meus documentos".
Mas pode também primeiro abrir a pasta "htmlmeublog" dentro da pasta "meus documentos" e dar dois cliques no arquivo "primeira_pagina.html". Páginas ".html" 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
<!-- ... texto do comentário .. -->
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 bgcolor=”#nnnnnn”>
Exemplo:
<html>
<head>
<!-- Título da Home Page -->
<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.html.
Abrir o bloco de notas?
Salvar?
segundo exemplo
Fim
