Esta é a estrutura de uma página em HTML:
<html> <head> <title> Aqui vem o Título </title> </head> <body> Aqui vem o principal, o corpo da página. </body> </html>
Definições:
<html> ... </html> => Indicam o início e o fim da página. <head> ... </head> => Indicam o cabeçalho da página. <title> ... </title> => Título da página, dentro do cabeçalho. <body> ... </body> => Entre estas duas marcações fica quase todo o código que você irá utilizar para desenvolver sua página – é o corpo da sua página.
Dentro do cabeçalho da página, ou seja, entre <head> e </head>, você terá também um outro componente importante do seu documento: As Meta Tags.
Meta Tags são marcações utilizadas para informar algumas propriedades do seu documento, como autor da página, editor de texto utilizado, etc.
Elas não são obrigatórias mas há duas delas que você deverá sempre utilizar:
Meta Keywords e Meta Description
Essas duas marcações são utilizadas por alguns dos maiores websites de busca para indexar seu website. Sem ter sua página indexada nesses grandes buscadores, você estará perdendo uma grande oportunidade de publicidade para seu website.
<head> <title>Título da Página</title> <meta name=”keywords” value=”Aqui vêm palavras-chave relacionadas ao conteúdo do seu website”> <meta name=”description” value=”Aqui vem uma breve descrição sobre o seu website.”> </head>
As palavras-chave relacionadas ao conteúdo do seu website (também chamadas de Keywords) são as palavras que, ao serem digitadas por uma pessoa em um site de busca, trarão sua página como um dos resultados. A breve descrição do seu site aparecerá nas páginas de resultado das buscas logo abaixo do título da página.
Como você pode ver no exemplo acima, algumas marcações do HTML possuem atributos. Este é o caso das meta tags, onde temos os atributos name e value, preenchidos de acordo com sau função.
Dentro da marcação <body>, você poderá determinar algumas propriedades para sua página da web:
<body background=”imagem-de-fundo.jpg”> ... </body>
background=”” => Aqui você indica a figura que servirá de pano-de-fundo (opcional). Trata-se do “caminho virtual” até a figura - que pode ser, por exemplo: background=”http://www.web.com/fundo1.jpg” (em outro website) ou background=”figuras/fundo1.jpg” (dentro do diretório “figuras”) ou background=”fundo.jpg” (no mesmo diretório que a página da web) bgcolor=”” => Aqui você indica a cor do plano-de-fundo da página.
No HTML, você tem duas opções para determinar uma cor:Escrever o nome da cor em inglês (blue, red, purple, deepskyblue, etc.)
Escrever seu hex number (ou número hexadecimal):#FF8080 #FF80C0 #FF00FF #FF0000
#00FF00 #0080C0 #8080C0 #008000 etc....
text=”” link=”” vlink=”” alink=””
Cor padrão do texto, links, links visitados e links ativos, consecutivamente.
Links visitados são aqueles que levam para uma página onde o internauta já esteve. Link ativo é aquele em que se está clicando.
Outras Propriedades da marcação <body>:
BgProperties=”fixed” => Neste exemplo, o plano-de-fundo permanecerá imóvel quando a página estiver sendo rolada para baixo. Este efeito é interessante quando o plano-de-fundo é uma imagem e não somente uma cor.
TopMargin=”0” => Define a margem superior da página.
Se você quiser definir uma margem maior no alto da página ou (como no exemplo acima) retirar toda a margem superior para incluir alguma figura ou tabela junto ao topo da página, use esta propriedade.
LeftMargin=”0” => Define a margem esquerda da página.
RightMargin=”0” => Define a margem direita da página.
BgSound=”musica.mid” => Define uma gravação de áudio, de fundo, para a página. Lembre-se apenas de que nem todos têm o mesmo gosto musical que você....
PLANO DE AÇÃO:
1.Abra, no seu navegador da internet, a página criada no plano de ação anterior;
2.Clique na página com o botão direito do mouse e selecione a opção “Exibir Código-Fonte”. Isto fará com que o código fonte da página seja aberto e você poderá editá-lo;
3.Acrescente à sua página as marcações novas aprendidas. Dê um título, escolha as cores do texto e dos links, mude as margens para modificar a posição do seu texto na página.
Quebras de Linha:
Ao interpretar um documento HTML, o navegador irá ignorar múltiplos espaços e linhas em branco.
Isto significa que:
Texto Texto Texto Texto
Aparecerá no documento final como:
Texto Texto Texto Texto
Então, para indicar uma quebra de linha, escreva: <BR>
E, para indicar múltiplos espaços, utilize:
Para incluir um subtítulo em sua página, utilize a marcação:
<H1 align=”center”> ... </H1>
Sendo 1 um número entre 1 e 6, indicando a importância do subtítulo e, com isso, o tamanho da
letra a ser utilizada. 1 corresponde à maior letra e 6 corresponde à menor:
align=”center” =>Alinhamento do sub-título na página.
center = centralizado left = à esquerda right = à direita
<font face=”Arial, Helvetica, Sans-Serif” size=”1” color=”#000000”> … </font>
face=”” => Indica as fontes (estilos de letra) a serem utilizadas.
Tenha em mente que, se o computador do internauta não tiver nenhuma das fontes indicadas, ele verá seu texto na fonte padrão do navegador dele, o que pode fazer seu documento ter uma aparência completamente diferente da planejada.
As fontes indicadas acima são algumas das fontes “seguras”, que quase todos os computadores têm. Outras fontes comuns são: Tahoma, Verdana, Impact, Courier.
size=”” O tamanho da letra vai de 1 a 7. (Desta vez, 1 corresponde à menor)
color=”” Cor do texto (indicada pelo seu número hexadecimal, como nas cores da tag <body>)
As opções abaixo podem ter resultados diferentes, dependendo do navegador.
<BiG> texto </BiG>
Letra um pouco maior
<SMALL> texto </SMALL>
Letra um pouco menor
<B> texto </B> ou <STRONG> texto </STRONG>
Texto em Negrito
<I> ... </I> ou <EM> ... </EM>
Texto em Itálico
<U> ... </U>
Texto Sublinhado
<!-- Observações -->
Dentro das tags de “observações”, você pode escrever um texto qualquer que não irá aparecer na sua página, somente no código fonte. Desta forma, você pode indicar onde começa determinado texto ou determinada parte da sua página para que mais tarde você possa interpretar facilmente o seu código.
Exemplo: <!-- Começo da barra de links -->
<CENTER> … </CENTER>
Os elementos da página que estiverem entre as marcações acima aparecerão centralizados.
<PRE> … </PRE>
O texto que estiver entre as marcações acima aparecerá na página da mesma forma como foi escrito no código (pré-formatado): respeitando múltiplos espaços e quebras de linha.
<BLOCKQUOTE> … </BLOCKQUOTE>
Todas as linhas de texto que estiverem entre as duas tags acima terão as margens esquerda e direita maiores que as das outras partes do documento.
Exemplo:
Texto texto texto texto texto texto texto <blockquote> texto texto texto texto texto texto texto texto </blockquote> texto texto texto texto texto texto texto
