Tutorial de HTML

Tutorial HTML

Fazer um Home Page não é complicado, aliás é bastante simples. Primeiro você deve escolher um programa para fazer sua Home Page, isso vai fazer a diferença, você pode utilizar até mesmo o Note Pad (Bloco de Notas) do Windows, onde é necessário a utilização do HTML, portanto leia atentamente as instruções, elas são explicativas, básicas e bem fácil.

Linguagem

HTML significa Hypertext Markup Language e é a linguagem de descrição de documentos usada na World Wide Web, ou Internet.
Ela é orientada por marcadores ou TAGs.
Cada TAG informa ao programa visualizador, ou Browser (Navegador), como ele deverá ver o texto.
Os TAGs podem ser únicos ou duplos, com início e fim.

Exemplos:

TAG único: <BR> TAG duplo: <P>....</P>

Editor HTML:

Bem para quem está começando aconselhamos um editor simples, o editor do Netscape, o Composer, nele você já visualiza o que vai ver na Internet, não precisa usar HTML; para quem já sabe um pouco mais de HTML aconselhamos o Microsoft Front Page, ele é um excelente programa, que possui vários recursos.

Aprendendo noções de HTML:

Inicio:

Para você que resolveu fazer sua HP em um programa que use tags de HTML ai vai as noções... Todo o documento HTML fica contido entre os TAGS: <HTML> e </HTML>. Quer dizer que para iniciar a página você começa com <HTML> e termina com ele</HTML> para o browser saber onde começa e termina a página ou o HTML.
Em um documento em HTML temos duas partes, o cabeçalho e o corpo ou conteúdo:

HEAD Contém parâmetros de configuração do documento.

BODY Contém o documento em si.

A estrutura de um documento HTML é:

<HTML>
<HEAD>
<TITLE>Título da Home Page</TITLE>
</HEAD>
<BODY BACKGROUND="imagem.gif"> ou só <BODY>
*** Conteúdo da Home Page ***
</BODY>
</HTML>

Tags usados no início do documento:

<HTML>...</HTML> Envolvem todo o documento.
<HEAD>...</HEAD> Envolvem a seção de cabeçalho do documento.
<TITLE>...</TITLE> Indica o título do documento para o Browser.
<BODY>...</BODY> Envolvem o conteúdo principal da Home Page.

Formatação:

Títulos e subtítulos: Para demarcar títulos e subtítulos, use os TAGs de HEADER <H1></H1> a <H6></H6> o H6 é o menor e o H1 é o maior, juntamente com as opções <CENTER> centralizar </CENTER> ou <BLINK>para as palavras ficarem piscando</BLINK>.

Parágrafos e frases: Os parágrafos de texto devem estar inseridos entre os TAGs: <P> , </P> Para dar destaque a algumas frases e palavras, existem os TAGs:

<B> negrito </B> ; <I> itálico </I>.

Só o que está dentro dos tags é que se modifica.

<U> sublinhado </U> E caso você queira negrito itálico por exemplo é só por <I><B> e ficará como você quer, em negrito e itálico</B></I>

Imagens: Podemos inserir imagens dentro de um documento HTML, mas devemos ter o máximo de cuidado, para não exagerar, pois muitas imagens só deixa a páginas mais lenta para o usuário. Os formatos mais usados são o GIF e o JPG, ambos com compactação de pixels.

Para inserir uma imagem, uso o TAG: <IMG SRC>, que é único, não exigindo um TAG finalizador. Exemplo: <IMG SRC="figura1.ext">

Os arquivos com as imagens deverão estar armazenados onde você vai colocar sua página juntamente com o documento HTML.

OBS.: É esse também o comando para quem quer mandar imagens em salas de imagens, IMG SRC="http://www.dataplace.com.br/images/dpnetpeq.jpg".jpg>

Links: Os Links servem para criar Palavras Chaves, que permitem a interligação entre documentos HTML e outros documentos ou até arquivos FTP.

Veja o seguinte exemplo: <A HREF="http://www.dataplace.com.br"> DataPlace Internet Service Provider </A> Tudo que estiver no meio do comando de link ficará com um link, então se quiser por uma imagem para linkar algo é só por no meio.

Musica de Fundo:

Apenas o Explorer 2.0 e o Netscape 3.0 (Ou Superiores) aceitam este recurso, e os dois aceitem apenas arquivos MID e WAV, mas com parâmetros diferentes.

No Explorer: Abaixo do rótulo <BODY> acrescente: <BGSOUND SRC="nome do arquivo.mid" LOOP=Número de execuções>

Obs.: Para repetir o som infinitamente basta colocar LOOP=INFINITE

No Netscape:

Em qualquer parte do documento HTML, acrescente: <EMBED SRC="nome do arquivo.mid" AUTOSTART="true" VOLUME="100" WIDTH="0" HEIGHT="100" CONTROLS="none">

Música de fundo é bom recurso, mas que pode deixar sua página muito mas lenta, por isso se for utiliza-lo é melhor escolher um arquivo MID.

Frames

O que são Frames ?

Frame é apenas uma arquivo html que permite a apresentação de mais de uma página na mesma tela. Para usar frames o browser usado deve ser um Nestcape Navigator 2.0 ou superior, ou o Internet Explorer 3.0 .

A utilização de frames é um recurso muito útil, mas que deve ser usado concientemente, pois: muitas pessoas não gostam de frames, alguns browsers não as aceitam e também porque muitas vezes não há necessidade.

O mais recomendado é colocar sua página em duas versões, uma com frame e outras sem. Como fazer...

Estrutura

Assim como o corpo do HTML, as frames tem sua estrutura. Eles entram no lugar do corpo, substituindo o <BODY></BODY> por <FRAMESET></FRAMESET>

Ex:

<HTML>
<HEAD>
<TITLE> Título da Página</TITLE>
</HEAD>
<FRAMESET>
Sintaxe dos Frames
</FRAMESET>
</HEAD>

Primeiramente devemos fazer um documento HTML para ele ser especificado pela sintaxe de frames, no caso chamado de Frame1.htm.

<HTML>
<HEAD>
<TITLE>Frame 1</TITLE>
</HEAD>
<BODY>
<FONT SIZE=+2>Frame n1</FONT>
</BODY>
</HEAD>

1. A primeira especificação é o FRAMESET, que é acompanhado pelas definições ROWS e COLS.

ROWS

Especifica o numero de frames e a altura de cada um.

Ex:

Neste exemplo de cima, ele chama 3 frames, o 1º com 20% da tela, o 2º com 30% da tela, o 3º com 50% da tela (ambos em altura).

COLS

Especifica o numero de frames e a largura de cada um.

Ex:

Neste exemplo de cima, ele chama 3 frames, o 1º com 20% da tela, o 2º com 30% da tela, o 3º com 50% da tela (ambos em largura).

2. A segunda especificação é o FRAME, que é acompanhado pelas definições SRC, NAME, SCROLLING, NORESIZE, TARGET.

SRC

Especifica o documento de formato HTML chamado para o frame. Indispensável, por que sem ele só o documento aparecerá vazio, só com as divisões.

Ex:

NAME

Especifica o nome do documento de formato HTML chamado para o frame. É extremamente necessário para o uso do Target, que será visto a seguir.

Ex:

SCROLLING

Define se o Frame terá barra de rolagem, o default é Auto. Fornece as opções: Yes, No, Auto.
Yes - Exibe a barra de rolagem independente do tamanho do documento.
No - Não exibe a barra de rolagem, mesmo que o documento seja maior que o tamanho especificado.
Auto - Só exibe a barra de rolagem se o documento for maior que a área especificada.

Ex:

NORESIZE

Impossibilita o usuário de mudar o tamanho da área especificada do Frame. Por default o usuário pode mudar esta área.

<FRAMESET COLS="20%,30%,50%">
<FRAME SRC="FRAME1.HTM" NAME="Principal" NORESIZE>
<FRAME SRC="FRAME1.HTM">
<FRAME SRC="FRAME1.HTM">
</FRAMESET>
TARGET

Define qual a área (Frame) que aparecerá o documento especificado pelo link. Mais útil na utilização de Menus e índices. Necessita do NAME.

Ex:

O Link:

<A HREF="http://www.intel.com" TARGET="Principal"> Intel< /A>

BORDER

Define qual a borda que o frame terá. Mais útil na utilização de de backgrounds iguais.

Ex:

ÂNCORA:

Uma âncora desvia com um link a uma parte do documento.

Para fazer uma âncora use o parâmetro NAME

Para fazer um link para a âncora

LISTAS:

Podemos criar vários tipos de listas.

Listas Ordenadas:

Use:<OL><LI>Manhã</LI>
        <LI>Tarde</LI>
        <LI>Tarde</LI></OL>
Exemplo:
#Manhã
#Tarde
#Noite

Listas não ordenadas:

Use:<UL><LI>Manhã</LI>
                 <LI>Tarde</LI>
                 <LI>Noite</LI></UL>
Exemplo:

Manhã
Tarde
Noite

Mapeando Imagens:

Obtenha o programa MAPEDIT.

Crie um arquivo de imagem (GIF,JPG) e abra-o com o MAPEDIT.

Indique, usando as opções de SQUARE, CIRCLE ou POLYGON, as área acessíveis da imagem. Para cada área marcada, indique a Home Page a ser acessada. Envie o arquivo MAP gerado (*.ma) e a sua imagem GIF para onde irá colocar sua home-page no ar.

Em sua Home Page, coloque os TAGS:

Como usar o Composer:

Para colocar o fundo:
Format - Page Colors and properties - escolha uma imagem em Choose File.
Se quizer ver e editar em HTML:
Edit - HTML source - escolha seu editor, pode ser o bloco de notas, depois se quizer fazer algo em HTML é só ir ai.

Imagem:

Image - Choose File - você escolhe a imagem
Solid border - aqui você escolhe se quer por borda no desenho ou não.
Alt. Text - em alternat text você escreve o que quer que apareça escrito na imagem quando alguém passar o mouse por cima.
Link to a page - aqui você se quizer por um link na imagem é só coloca-lo.
Em mais é só escrever e você já verá o produto final, o que aparecerá na Web.

Hosted by www.Geocities.ws