HTML | Tutoriais » NetGate

O que é HTML?

   Do inglês HyperText Markup Language, significa Linguagem de Marcação de Hipertexto. Em termos práticos, HTML é uma coleção de estilos que define os vários componentes de um documento Word Wide Web (formatação, hiperlinks clicáveis, imagens gráficas, documentos multimídia, formulários, etc.).
   O HTML é uma linguagem de marcação bem fácil de aprender. Assim como em qualquer linguagem, o programador escreve o código-fonte seguindo as regras de sintaxe. Este código é composto por um início e por um fim, ou seja, em HTML é preciso um comando que inicie a tarefa a ser executada e um outro que a finalize. O código-fonte será interpretado, posteriormente, pelo browser o qual se encarregará de interpretar os comandos ou tags, como são, usualmente, chamados. O código-fonte poderá ser escrito em qualquer editor de texto simples, inclusive pelo programa NotePad do Windows.
   Contudo, a forma mais rápida de se escrever uma página Web (Home Page) é usar um editor HTML. Existem vários editores de HTML disponíveis. Entre eles o MS Front Page, o GNNpress (GNN), HotDog (Sausage software), o FlexED e o Dream Waver.

O que são tags?

Tags são os comandos ou instruções dadas em HTML. Geralmente, estão delimitadas pelos sinais < e >. Quando um browser exibe uma página Web, ele procura por estes comandos os quais determinam como a informação deverá ser exibida. Por exemplo: uma tag pode dizer se um texto deve ser exibido em negrito ou itálico, com que tipo, cor e tamanho de fonte ou representar um link para outra página. As tags, normalmente, são indicadas em pares, limitando o texto que sofrerá algum tipo de formatação. Porém, existem também várias tags individuais.
Segue, abaixo, a estrutura básica de um arquivo HTM (o arquivo mais simples possível):

<TITLE>Título da Home-Page</TITLE>

</HEAD>
<BODY>

...............corpo da página.................

........................................................

</BODY>
</HTML>

O título e o corpo da página você substitui pelos dados de sua página. O resto é fixo.

<HTML>: Este comando inicia a página.
<HEAD>: Neste comando você inclui comentários como, por exemplo, a pessoa ou empresa que desenvolveu a página. Estes comentários não aparecerem na tela quando mostrados por um navegador. Geralmente, os programadores não incluem nada neste local.
</HEAD>: Este comando finaliza os comentários. Delimita o comentário e indica o começo do conteúdo.
<BODY>: Este comando mostra o início do conteúdo da página. Portanto, todas as informações deverá ficar entre ele e o </BODY>.
</BODY>: Este comando encerra o conteúdo da home-page. O que for escrito após este comando não aparecerá na tela quando mostrado por um navegador.
</HTML>: Este comando finaliza o arquivo html. Com ele, a página é concluída.

Resumindo:

O que está entre as tags <HTML> e </HTML> é a sua página. O que, efetivamente, aparecerá na tela do browser está entre <BODY> e </BODY>. E entre <TITLE> e </TITLE> deverá ficar o título da home-page o qual aparecerá na Barra de título do browser e não no corpo da página.

Você poderá transformar uma imagem em papel de parede através da tag <BODY>. O atributo utilizado para conseguir este efeito é o BACKGROUND e a sua sintaxe básica é:

Obs: procure não usar imagens que dificultem a leitura do texto.

O comando <BODY> tem outros atributos. Ele serve, também, para mudar a cor automática de letras e links. Veja um exemplo:

Background: nome do arquivo GIF ou JPG que servirá como papel de parede.

Bgcolor: código da cor do papel de parede.
Text: código da cor das letras da página.

Cabeçalhos

Para se construir uma página HTML, primeiramente, é preciso definir os títulos ou cabeçalhos, como também são chamados. Estes, normalmente, aparecem com um tamanho de letra diferente do resto do texto, pois tem como finalidade, a identificação do início de um documento, de uma seção ou de um tópico. A configuração HTML suporta seis tamanhos ou modelos de cabeçalhos diferentes e, para mudá-los, ela utiliza os descritores <H1> até <H6>. Abaixo, está representado a sintaxe deste comando:

<Hn>Texto do cabeçalho</Hn>

Obs:
1. O "n" deverá ser substituído por um número de 1 a 6.
2. O tamanho irá variar da seguinte forma: para títulos menores serão usados um número maior e, vice-versa. Exemplo:

<H1>Título1</H1>
<H2>Título2</H2>
<H3>Título3</H3>
<H4>Título4</H4>
<H5>Título5</H5>
<H6>Título6</H6>

3. Os títulos criam uma quebra de linha automática nos documentos e se estendem por múltiplas linhas. Você notará que a maioria dos navegadores Web utilizam os tamanhos de títulos menores (geralmente, acima de <H3>).

Parágrafos

Você poderá digitar textos na página HTML, exatamente, como deseja que eles apareçam na tela, da mesma forma que é feito com um editor de texto comum, mas, com uma diferença fundamental: para o primeiro, o simples fato de pressionar Enter não determina um novo parágrafo. É necessário, então, incluir descritores que especifiquem o início de um parágrafo. A tag <P> éresponsável por esta função. Ela é colocada no início de um novo parágrafo.

Formatação de Textos

Descritor	Função
<B></B>	Texto em negrito.
<I></I>	Texto em itálico.
<U></U>	Texto sublinhado.
<STRONG></STRONG>	Texto similar ao negrito.
<TT></TT>	Texto com espaçamento regular.
<BIG></BIG>	Fonte ampliada.
<SMALL></SMALL>	Fonte reduzida.
<SUP></SUP>	Texto sobrescrito.
<BLINK></BLINK>	Texto piscante.
<SUB></SUB>	Texto subscrito.

Fontes

Para definir as suas características, utilize a sintaxe abaixo:

<FONT SIZE=N COLOR="RRGGBB">Texto</FONT>

1. FONT: inicializa um texto com as características que fazem parte de todo comando.
2.SIZE=N: define o tamanho da fonte.
3. N é um numero qualquer.
4. COLOR="RRGGBB": indica a intensidade das cores de fundo da página.
5 . A tag "RRGGBB" corresponde a cor da letra, mas pode ser escrita em inglês.. EX: COLOR="red" ... letra vermelha.

Frames

Muitas vezes, você acessa um site e este aparece dividido em várias regiões. Estas regiões são conhecidas como frames. Em cada frame, você poderá colocar um documento distinto.
Os arquivos que irão ocupar cada frame e o tamanho que eles aparecerão na tela, serão indicados por um arquivo HTM, responsável por esta divisão. Por isso, ao utilizar um frame será necessário a criação prévia de um documento HTML. Exemplo de uma página com 2 frames em colunas, contendo os arquivos doc1 e doc2 :

<HTML>
<HEAD>
<TITLE>Exemplo de página com Frames</TITLE>
</HEAD>
<FRAMESET COLS="30%,70%">
<FRAME SRC="doc1.htm" NAME=índice>
<FRAME SRC="doc2.Htm" NAME=conteúdo>
</FRAMESET>
</HTML>

Análise do código-fonte acima

1. O comando <BODY> foi substituído pelo comando <FRAMESET>, responsável pela criação dos frames.
2. Dentro do comando <FRAMESET> existem os atributos que define o tipo de divisão desejada: COLS, para colunas ou ROWS, para linhas. Os seus valores poderão ser dados em pixels ou em porcentagem. O sinal "*" representa um coringa. Os valores especificados entre vírgulas, determina o número de divisões na tela.
3. Cada frame definido em <FRAMESET> usará um comando <FRAME>. Neste comando será definido o que será carregado em cada uma das regiões.
4. O comando <FRAME> possui, basicamente, dois atributos:
SRC: define o arquivo a ser carregado no frame.
NAME: define o nome do frame.

Obs: Para que um arquivo com link em doc1.htm apareça em doc2.htm, será necessário acrescentar o atributo target="conteúdo" a tag <A HREF>. Exemplo:

<A HREF="doc3.htm" target="conteúdo">nome do arquivo</A>

E para que doc3.htm seja visto sem os frames:

<A HREF="doc3.htm" target="auto">nome do arquivo</A>

Dominando o uso de Frames

Você precisará conhecer a finalidade de quatro nomes especiais para dominar o uso de frames. Estes nomes usados no atributo Target, carregará o documento em determinadas janelas. São eles:
1. TARGET="_blank": este parâmetro permite que uma nova janela seja aberta para carregar um documento. A janela aberta não possui um nome.
2. TARGET="_self": este parâmentro permite que um documento seja mostrado na mesma janela em que está o link.
3. TARGET="_parent": este parâmetro permite que o link seja carregado no FRAMESET de nível superior ao do documento atual.
4. TARGET="_top": este parâmetro permite que um documento seja carregado usando a janela inteira do browser.

Imagens

   Os formatos padrões de figuras na Web são GIF (Graphic Interchange Format) e JPG (Joint Photographic Group). Este último reduz em até dez vezes o tamanho original de uma imagem . Os browsers Netscape e Internet Explorer trabalham com esses dois tipos de arquivo.
   Obs: As imagens no formato BMP precisarão ser convertidas para um dos formatos padrões em HTML. Através de um programa apropriado como, por exemplo, o Adobe Photoshop ou o Picture Publisher, você conseguirá esta conversão.
   Veja, agora, um exemplo do comando usado para inserir uma imagem:

1. O comando <IMG> junto ao atributo SRC especifica a sua imagem.

2. O atributo ALIGN= especifica o alinhamento físico da imagem numa página. O uso do bottom significa que a base da imagem se alinhará com a base da linha de texto, o middle significa que o meio da imagem se alinhará com o meio da linha de texto e o top significa que o topo da imagem se alinhará com o topo da linha de texto.

Obs: Para alinhar uma imagem no canto direito da página use ALIGN="right", para alinhá-la no canto esquerdo use ALIGN="left" e para alinhá-la no centro, use ALIGN="center".

Links

Links são locais clicáveis, usado em um documento HTML para saltar de um documento disponível na Internet a outro. Existem links internos os quais fazem ligações com documentos no mesmo servidor e os links externos, os quais permitem que você salte para qualquer lugar na Web. Ambos dependem da tag:

<A HREF="link">descrição</A>

1. <A HREF="link">: representa o arquivo htm ou html que deverá ser aberto quando clicarem neste local.
2. link: será substituído por um nome de arquivo como, por exemplo, dados.htm ou por um URL como http://www.cade.com.br
3. Descrição: é o texto, palavra ou expressão que aparecerá sublinhado na home page, indicando o ponto clicável. Por exemplo, usando a descrição "Clique aqui" e a sintaxe abaixo.
4. que pode ser também um link de e-mail como :

5. que pode ser também um link de transferência de arquivo por FTP como:

<a href="ftp://local do arquivo a ser transferido">Descrição</a>

Qualquer Dúvida ou reclamação mande-me um E-mail.
Desenvolvido pelo WebMaster desta HP®

por Douglas Lima

CERRAR