Uma pequena introdução ao HTML

por **Allan** Qui Abr 19, 2012 11:07 pm

Viva!

aqui estou para mais uma introdução/tutorial para aprender algo de mais útil. Agora, vou começar um pouco com o HTML...

Você pode não acreditar, mas tudo que você está vendo aqui, assim como tudo que você vê na internet, é fruto de programação feita usando o HTML combinado com outras linguagens e recursos como CSS, Flash, JavaScript, PHP, ASP… Clique com o botão-direito (o auxiliar) do seu mouse em qualquer área do site que não tenha imagem ou animação e escolha a opção “ver código-fonte”, ou algo similar, para entender melhor o que eu acabei de lhe dizer.

codigo_fonte

Estranho? Complicado? nada… é mais fácil do que você imagina.

HTML é sigla para HyperText Markup Language – Linguagem de Marcação de Hipertexto (Em alguns locais se encontra como Linguagem de Formatação de Hipertexto)

Como o próprio nome diz, o HTML não é uma linguagem de programação, e sim de marcação e/ou formatação de Hipertexto – Trocando em miúdos, significa que com HTML puro você só consegue criar páginas-web estáticas, contendo material estático (textos, links, figuras, sons…). É possível criar páginas atraentes? sim, é possível. Mas eu, por exemplo, teria “mil vezes” mais trabalho do que tenho hoje para “alimentar” este blog. :-)

Fazer uma marcação significa “dizer” quais ítens estão numa página e quais são seus parâmetros (configurações, opções) e formatações.

Vamos então à parte prática da coisa…

Todo documento HTML apresenta elementos entre parênteses angulares (< e >); esses elementos são as etiquetas (tags) de HTML, que são os comandos de marcação/formatação da linguagem. A maioria das etiquetas tem sua correspondente de fechamento:

<etiqueta>…</etiqueta>

Isso é necessário porque as etiquetas servem para definir a formatação de uma porção de texto, e assim marcamos onde começa e termina o texto com a formatação especificada por ela.

Alguns elementos são chamados “vazios”, pois não marcam uma região de texto, apenas inserem alguma coisa no documento:

<etiqueta>

Os elementos podem ter atributos, como o exemplo abaixo:

<etiqueta atributo1=valor1 atributo2=valor2>…</etiqueta>

Para você ver como HTML é “difícil”, peço que abra um software muito complicado e pesado chamado notepad, ou bloco de notas… Já ouviu falar? (rsrsrs)

Então, com o programa aberto, vamos começar a escrever nossa página.

Toda página HTML tem uma estrutura básica formado pelas seguintes tags:

Spoiler:

Pronto! Temos uma página web! Mas ainda não há conteúdo a ser mostrado. Então vamos colocar uma frase simples e um título para a página:

Spoiler:

Agora sim! temos algum conteúdo! Mas precisamos salvar este arquivo com a extensão .htm ou .html para podermos ver a página num navegador.

Vá ao menu “Arquivo” no topo da janela e escolha a opção “Salvar como…”.
Escolha “Todos os arquivos” no box “Salvar como tipo”. Isto é muito importante – caso você não faça isto, o arquivo será salvo como texto e não como documento HTML.
Salve seu documento com um nome de sua preferência e a extensão html. Exemplo: page1.html (a extensão “.htm” indica que se trata de um documento HTML. A extensão “.html” dá o mesmo resultado. Eu sempre uso “.htm”, mas você pode escolher a que você preferir .htm ou .html). Você pode salvar o documento onde você quiser no seu HD – esteja certo de salvar em um lugar que depois você possa achar com facilidade.

Para ver sua página num navegador, basta dar duplo-clique nela.

O que é importante:

<html></html> Marca onde começa/termina o documento html. Os navegadores “lêm” a página a partir deste ponto.

<head></head> Marca o espaço destinado às configurações da página. Quase tudo aqui não é visível.

<title></title> Marca o título de sua página. É uma das pouquíssimas “coisas” visíveis que são colocadas no cabeçalho.

<body></body> Marca o espaço que será exibido pelo navegador. Ou seja, o conteúdo de sua página.

Uma informação muito interessante, e que você já deve ter notado, é que as tags combinam entre si e que podem ser colocadas umas dentro das outras.

Veja:

<html> “Abre o documento.

<head> está dentro da tag html porque, como todos os outros ítens, faz parte do documento que vai ser lido pelo navegador.

<title> está dentro de head porque é uma configuração…

</title></head> As tags são “fechadas” nesta ordem: da mais interna para a mais externa. a tag <html> não foi fechada porque ainda vamos inserir mais “coisas” dentro do documento…

<body> Abre a sessão onde está o conteúdo (visível) do site. e obviamente fica separado do cabeçalho, mas continua dentro do html.

</body></html> A tag body foi fechada e logo em seguida a tag html pois não há mais nada para inserir ou exibir na página neste caso.

E assim damos nosso primeiro passo no HTML. Há muita coisa ainda para aprender, mas isso vai depender somente da sua (boa) vontade…

Na página a seguir há uma lista de tags comuns, e de links onde você poderá aprender muito mais sobre HTML. :-)

Fica ligado no fórum para aprender mais de web e outras linguagens também!