Web Du Zero: dezembro 2010

O uso da tag "Body"

Já vimos qual é a utilidade da tag “Body”, agora vamos aprender como acrescentar configurações importantes à face do nosso site..

Para acrescentar cor, adicionamos na tag a seguinte descrição: bgcolor=”cor escolhida”. Como há vários tons de cada cor, mesmo havendo a possibilidade de escrevermos apenas “blue” (azul), por exemplo, se quisermos colocar um tom de azul mais claro ou mais escuro, é necessário utilizar o código referente a essa cor.. Abaixo, segue alguns exemplos:

Cores disponíveis no link http://www.w3schools.com/html/html_colors.asp

Agora, para alinhar as margens internas do site, é necessário utilizar as descrições “topmargin” (margem de cima), “leftmargin” (margem da esquerda) e “rightmargin” (margem da direita).. Dessa forma, o conteúdo ficará alinhado..

Abaixo, os exemplos de como ficariam os ajustes de cores e margens, tanto no Note Pad quanto no navegador.. Note que as margens ainda não serão visíveis, pois além de não haver conteúdo no site, a escolha da margem foi “0”.. Isso significa que, neste momento, qualquer que seja nosso conteúdo, o mesmo ficará rente às laterais e ao topo.. Quanto maior a margem, mais o conteúdo se distancia da borda..

99CCFF - Tom de azul escohido para cor de fundo

Base HTML

Ao iniciar um arquivo HTML, deve-se especificar através da abertura e fechamento de uma tag que esse será o formato do arquivo.. Dessa forma, o navegador terá maior facilidade em identificar que todo conteúdo posterior deverá ser tratado como uma série de códigos HTML.

Essa indicação acontecerá na primeira linha do arquivo (abertura) e na última (fechamento).

O formato será conforme abaixo:

< html > (abrir)

</html > (fechar)

Logo abaixo da abertura da tag HTML, deve-se abrir e fechar uma tag com o nome “Head”, essa tag nomeará a aba na parte superior do navegador, não aparecendo a indicação da localização do seu arquivo.

O formato será conforme abaixo:

<head>

<title>Título a ser dado para sua página (ex: Teste) </title>

</head>

E pra finalizar.. Antes de começar a configurar o site, deve-se criar uma tag com o nome “Body”, essa tag será responsável pelas configurações do corpo do site... Como a cor de fundo... margem e tudo mais... Então, basta abrir e fechar uma tag, conforme abaixo:

<body>

</body>

IMPORTANTE: A ordem de inclusão de tags é parecida com a regra matemática das “Chaves” { } , “Colchetes” [ ] e “Parênteses” ( )... Ou seja, o que abre primeiro, fecha por último...

Pra facilitar o entendimento, basta olhar esse exemplo abaixo:

Formato de colocação das tags, parecido com regra matemática

Resultado final

Pra checar o resultado do que foi feito, clique duas vezes sobre o arquivo HTML salvo e compare a diferença no nome que aparece na aba do navegador.. O nome que for escolhido como título na tag “Head” será o que aparecerá nomeando a aba do navegador.

O Início...

Abra o Note Pad (Bloco de Notas) e salve o arquivo em branco com o nome que desejar, mas com a extensão HTML.

É muito simples, basta seguir os passos abaixo:

Salve na pasta desejada com a extensão HTML: "teste.html" e altere o tipo de arquivo para "Todos os Arquivos", caso contrário, o formato será salvo em TXT

Após ter salvo esse arquivo, toda vez que quiser editá-lo, terá que escolher abri-lo com o Note Pad, caso clique duas vezes sobre ele, o mesmo abrirá diretamente no navegador (Internet Explorer, Mozilla Firefox, Google Chrome..)

Clique no arquivo com o botão direito, em seguida em "Abrir com" e escolha a opção "Note Pad" (Bloco de Notas)

O arquivo abrirá dessa forma no Note Pad

Ao clicar duas vezes sobre o arquivo, ele abrirá no navegador como se fosse uma página da web.. Dessa forma, é possível verificar as atualizações feitas no código HTML na mesma hora

O básico já foi... Agora podemos partir pra prática...

HTML, o quê??

HTML é a sigla para "HyperText Markup Language", que significa "Linguagem de Marcação de Hiper Texto"... Até aí tudo bem.. Mas e na prática?

O HTML nada mais é do que uma das linguagens mais utilizadas para desenvolver páginas na internet.. Até existem linguagens mais avançadas, mas dificilmente encontra-se algum site que não se utilize do HTML..

O programa normalmente utilizado para escrever os arquivos HTML é o Note Pad (Bloco de Notas), que aparece assim no Windows:

O arquivo HTML é formado por tags = etiquetas.
Essas tags são responsáveis pela indicação de cada comando, arquivo ou link que for inserido na face do site.. Esses comandos serão sempre escritos em inglês...

As tags devem ser abertas e fechadas de acordo com os seus objetivos e identificadas pelo uso dos sinais “menor que” ( < ) e “maior que” ( > ). Sua função é marcar o início e o término de uma determinada formatação que adicionamos ao site.
Para isso, usa-se o seguinte formato:

< descrição função tag > (abrir)
</ descrição função tag > (fechar)

IMPORTANTE: A única diferença estética entre a abertura e o fechamento de tags está na utilização da “barra” (/) após o sinal “menor que” (<), utilizada apenas no fechamento.

Sabendo disso, podemos começar a explorar esse universo HTMLouco..

Tira Dúvidas

Caso não consiga visualizar o formulário, entre em contato pelo nosso e-mail: webduzero@hotmail.com