segunda-feira, 15 de março de 2010

HTML Parte 1

Olá Gente,

Bom, vamos começar pela linguagem base da internet: HTML (HyperText Markup Language - Linguagem de Marcação de Hipertexto).

Não importa o quão sofisticado é um site. Não importa qual tecnologia foi utilizada para o seu desenvolvimento. Sempre haverá algumas linhas de html por trás dele! Por isso é importante que você, que tem vontade de programar para web, tenha pelo menos uma noção básica de HTML.

Bom, vamos lá!

Podemos dizer que toda página web é dividida em duas áreas: cabeçalho e corpo. O seu raciocínio deve ser: o que coloco no corpo? O que coloco no cabeçalho?

O cabeçalho é responsável pel
o título da sua futura página e demais itens relacionados a linkagem com outras linguagens (veremos isso mais a frente). O corpo é responsável por todos as informações que aparecerão na sua página.

A linguagem HTML é organizada por elementos que chamamos de tags. São códigos delimitados pelos símbolos <>.

Dadas essas informações, vamos a organização básica de uma página web.
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>

Cada um desses elementos representa uma tag, como descrito a seguir:


<HTML> e </HTML> -> tags de início e fim do site HTML
<HEAD> e </HEAD> -> tags de início e fim do cabeçalho
<BODY> e </BODY> -> tags de início e fim do corpo

Dessa forma, deu para notar que a tag de fim nada mais é do que a tag de início precedida de uma barra, certo?

Bom, e do que mais você precisa para fazer uma página web? Conhecer uma boa quantidade de tags e seus significados. Assim, toda vez que você precisar inserir uma imagem numa página, por exemplo, você saberá qual tag poderá fazer o que você quer.

Então vamos fechar essa primeira parte do HTML com mais duas tags: título e parágrafo.

A tag de título <TITLE> é responsável pelo título do site! Intuitivo, não?
Sua localização é sempre no cabeçalho.

A tag de parágrafo <P> é responsável pelos parágrafos do site. Outra vez intuitivo!

Dessa forma, num primeiro exemplo, poderíamos ter um site codificado da seguinte forma:

<HTML>
<HEAD>
<TITLE>
.:Tudo de Programação:.
</TITLE>
</HEAD>
<BODY>
<P>
Aqui no http://tudodeprogramacao.blogspot.com/
você encontra aulas de HTML e outras linguagens!
</P>
</BODY>
</HTML>

Entre as tags de início e fim, é colocado o texto que se deseja apresentar na tela. Para ver na prática, digite o código HTML acima em um bloco de notas e salve o arquivo com extensão *.html (exemplo: meusite.html). Depois é só ir na pasta onde o arquivo foi salvo e dar duplo clique. Seu site está feito! =)









(clique na imagem para ampliar)

Nenhum comentário:

Postar um comentário