#kavalo Dark Site - Tutorial HTML
Tutorial Básico HTML

ELEMENTOS BÁSICOS

Os tags ou elementos, são marcas padrões ultilizadas para fazer todas as indicações necessárias ao browser.Estas marcas são digitadas dentro do documento da mesma forma que o conteúdo a ser exibido.Por exemplo:

<CENTER> conteúdo </CENTER> indica que a palavra conteúdo deve ser centralizada na linha, e o elementos <P> indica início de novo parágrafo.

Por definição, os elementos são delimitados pelos sinais de < e >, sendo indicada a ultilização de letras maiúsculas apenas para facilitar a visualização, uma vez que o uso de minúsculas é igualmentes aceito pelos browsers.

Os elementos, em sua maioria, são do tipo início-fim, ou seja, trabalham em pares, delimitando um determinado conteúdo. Neste caso a marce de fim é idêntica a marca de início sendo precedida por uma barra ("/"). É o caso das marcas <CENTER></CENTER>.

Outros elementos são solitários, ou seja, não necessitam ser fechados, como por exemplo o <P>. Eu pessoalmente não recomendo o uso de editores de HTML, pois acho que seja necessário apenas um Bloco de Notas, um browser (para ver o resultado) e alguma criatividade para elaborar páginas como a minha, pois até agora estes foram meus materiais...Na minha opinião, o uso de editores, facilitam o uso do HTML, porém fazem com que voce não não se familiarize com as tags, pois neles você já tem tudo pronto em janelas e etc...basta clicar! Com o Bloco de Notas, voce só precisa escrever as tags e salvar o arquivo com extesão HTM, por exemplo : teste.htm! Feito isto basta abrir o arquivo em um bom Navegador, de preferência Netscape 3.0 (ou superior) ou Internet Explorer 3.0 (ou superior), pois mais para frente creio que voce queira usar recusos Java, os quais necessitam de um Navegador no mínimo descente.


ESTRUTURA BÁSICA

A estrutura básica de um documento HTML é a seguinte:

<HTML>

<HEAD>

<TITLE>Minha Home Page</TITLE>

</HEAD>

<BODY>

Conteúdo da página, como figuras, textos, tabelas e etc...

</BODY>

</HTML>

Agora vamos saber rapidament um pouco sobre cada um destes elementos basicos:

<HTML></HTML> - indicam o início e o fim do documento TODO.

<HEAD></HEAD> - Delimitam a seção de cabeçalho do documento.

<TITLE></TITLE> - Indicam o título do documento que será exibido na barra superior do browser.

<BODY></BODY> - Corpo do documento.Entre estas marcas estará contida a maior parte do conteúdo a ser aprensentado, como os Textos, Figuras, Tabelas e etc...


TÍTULOS E SUBTÍTULOS

O Destaque para títulos e subtítulos na sua página é importante, pois dá ao visitante um visão geral sobre o que trata o texto em questão e portanto a chance de escolher entre ler ou não.

Podemos ultilizar até seis níveis de títulos, ou "headings" que são numerado de 1 até 6, sendo eles elementos do tipo início-fim tbm. Exemplo:

<H1></H1>

<H2></H2>

<H3></H3>


<H6></H6>


FORMATAÇÃO DE TEXTOS

Assim como podemos aumentar o tamanho do texto, podemos formata-lo tbm como fazemos nos Editores de Texto como Word ou Wordpad...basta adicoinar as tags de tipo início-fim, que por sinal algumas delas tem a letra em comum aos editores citados.Por Exemplo:

<I></I> - Para colocar o texto em itálico

<B></B> - Para deixar o texto em negrito

Ou...as do tipo "solitárias", como por exemplo:

<P> - Para indicar quebra de parágrafo

<BR> - Para quebra de linha.Ao contrário do sinal de parágrafo, não é deixada linha em branco antes da próxima.


LINHAS HORIZONTAIS

Linhas horizontais sãoultilizadas para dar destaque a títulos ou para gerar a sensação de quebra entre um item de informação e outro.Esta pode tbm ser usadas com os atributos de largura e altura que explicarei a seguir.

Por exemplo: <HR SIZE=8 WIDTH=80%> Tag do tipo solitária.


Onde WIDTH indica que a linha ocupará 80% da largura da janela do browser. E SIZE indica que será exibida uma linha com 8 pixels de espessura.


IMAGENS

Associadas a documentos HTML, são ultilizadas imagens do tipo JPEG ou GIF.Para que a imagem seja apresentada em um documento HTML é necessário fazer uma referência ao nome da imagem atravésdo elemento:

<IMG SRC="bandeira.gif">

Caso a imagem esteja em um diretório diferente ao do documento, é necessário que indique o diretório atraves de "../nome_do_diretório".Por exemplo:

Se minha figura chamada "carta.gif" estiver em um diretório(pasta) chamado "figuras", devemos proceder com:

<IMG SRC="../figuras/carta.gif">

Indicando assim que a figura está na Raiz ("../") no diretório figuras ("../figuras/")


LINKS

O elemento link faz exatamente o que os outros fazem, porem este, tem por função "conectar" a palavra ou figura a uma nova página, ou seja, a um novo endereço, como por exemplo:

<A HREF="endereço_da_referência">nome_da_referência</A>------->Página inicial

Ou seja, comando do tipo início-fim que nos leva à outra página contida na Rede Mundial.