Posts Tagged ‘Designer’

Tutorial – HTML parte 1

03/12/2008

São incontáveis os tutoriais existentes de HTML pela Web, e este não trará novas ferramentas mais sim uma nova forma de se abordar o assunto, de maneira clara e de fácil assimilação. Confira agora.

HTML (HyperText Markup Language – Linguagem de Formatação de Hipertexto)

O HTML é a linguagem de formatação para construção de páginas, em geral todas as páginas fazem uso dela e também de outras linguagens simultaneamente.

HTML é uma linguagem de formatação e não de programação!

As Tags

Os elementos HTML são apresentados como tags, as quais se apresentam dentro dos sinais de “menor e maior” conforme o exemplo:

<tag>

A maioria das tag’s possui 1 par que “fecha” a região de formatação, veja o exemplo:

<tag> Texto a ser formatado </tag>

Vamos Começar

Nenhum programa especial é necessário para o HTML, basta um editor simples de texto como o notepad do windows para começarmos.

Toda página HTML começa da seguinte maneira:

<HTML>
<HEAD> </HEAD>
<BODY>
</BODY>
</HTML>

Onde:

<html> indica que vamos usar esta linguagem deste ponto em diante
</html>indica que não mais vamos usar esta linguagem deste ponto em diante

<head> indica que tudo que estiver dentro deste ponto até </head> faz parte do cabeçalho da página

<body> indica que tudo que estiver dentro deste ponto até </body> faz parte do corpo da página

 

Sem embromações, vamos logo aos execícios para entender, crie uma pasta no desktop de seu computador com o nome Site, abra o bloco de notas e digite:

<HTML>
<HEAD> <TITLE> TITULO DA PÁGINA</TITLE></HEAD>
<BODY>
<H1> Sua Primeira Página da Web </H1>
<H4> Esta é sua primeira página da web! </H4>
</BODY>
</HTML>

Agora Clique em Salvar Como selecione a pasta Site que você criou no desktop e na caixa Nome do arquivo: digite index.htm e na caixa Salvar como tipo: selecione Todos os Arquivos e clique em Salvar

Dentro da pasta Site no seu desktop o arquivo index.htm foi criado, duplo clique nele e seu browser (internet Explorer, Firefox, Crome, Opera, etc…) irá abrir e agora você pode visualizar sua primeira página, ver o resultado e entender melhor o que estamos falando.

Vamos analisar um pouco as novas tag’s usadas:

<TITLE> TITULO DA PÁGINA</TITLE> => Coloca um título na barra de títulos do Browser

<H1> <H2> … <H6> São tag’s para texto pré formatadas onde H1 é a maior usada para títulos, H2, h3 para subtítulos e assim por diante decrescendo.

Existem muitas outras tag’s, que serão apresentadas pouco a pouco nos próximos tutoriais.

Até breve!

Confira também:Tutorial HTML – parte 2