Ir para conteúdo

Tutorial Sobre Html - Parte 1

Rafael Gomes

Por Rafael Gomes
em Programação Web

 Share

Posts Recomendados

Rafael Gomes

Rafael Gomes 5

Postado
Postado

Tutorial HTML - Parte 1

 

Abaixo está um tutorial básico sobre HTML para quem está dando os primeiros passos na criação de Web sites.

 

 

Estrutura básica:

 

A estrutura de um documento HTML é basicamente igual ao exemplo abaixo:

 

<HTML>
<HEAD>
<TITLE>Nome do documento</TITLE>
Elementos opcionais ...
</HEAD>
<BODY>
Textos, fotos, gráficos, links...
</BODY>
</HTML>

 

Obs.: Tanto faz escrever <TITLE>, <Title> ou <title>, as tags não são sensíveis à caixa (alta ou baixa).

 

 

Tags <HTML> e </HTML>:

 

As tag <HTML> e </HTML> indicam o início e o fim de um documento HTML.

Seção Head:

 

A seção head contém informações que são lidas pelo navegador antes do documento HTML ser exibido na tela, como o título, informações de procura, autor, editor HTML, entre outros.

 

 

Tags <HEAD> e </HEAD>:

 

As tags <HEAD> e </HEAD> indicam o início e o fim do cabeçalho do documento HTML.

 

 

Tags <TITLE> e </TITLE>:

 

O título do documento ou nome da página deve ser colocado entre as tags <TITLE> e </TITLE>, que deve aparecer apenas uma vez no cabeçalho (entre as tags <HEAD> e </HEAD>).

 

 

Meta tags:

 

Meta tags são tags com informações sobre a página, que não afetam sua aparência, elas aparecem entre as tags <HEAD> e </HEAD>. As principais meta tags são:

 

Refresh - Atualiza ou carrega uma próxima página após um determinado espaço de tempo. Veja os exemplos abaixo:

<META HTTP-EQUIV="Refresh" CONTENT="x">: Atualiza a página a cada x segundos.

<META HTTP-EQUIV="Refresh" CONTENT="x;URL=http://www.crieseuwebsite.com">: Carrega a URL em x segundos.

 

Description - Possui uma breve descrição do site. Use no máximo 200 caracteres. Exemplo: <META NAME="Description" CONTENT="Breve descrição da página">.

 

Keywords - Possui as palavras-chave do site separadas por vírgulas. Exemplo: <META NAME="Keywords" CONTENT="Palavra01, palavra02, palavra03, etc">.

 

Generator - Contém o nome e a versão da ferramenta usada na criação da página. Exemplo: <META NAME="Generator" CONTENT="Ferramenta usada">.

 

 

Seção Body:

 

A seção body é onde você coloca textos, imagens, tabelas, formulários, etc. É também na seção body que você configura o background, links, cores dos textos, entre outros atributos.

 

 

Tags <BODY> e </BODY>:

 

As tags <BODY> e </BODY> indicam o início e o fim do corpo, ou seção principal, do documento HTML.

 

 

Background:

 

O atributo background permite colocar um gráfico de plano de fundo para ser mostrado por trás de textos e imagens na página. Exemplo: <BODY BACKGROUND="imagem.extensão">.

 

 

Bgproperties:

 

Para criar um efeito marca d'água em sua página, onde o plano de fundo fica fixo enquanto o documento rola sobre ele, use o atributo bgproperties e a opção fixed. Exemplo: <BODY BACKGROUND="imagem.extensão" BGPROPERTIES="Fixed">.

 

Obs.: Apenas para o Internet Explorer.

 

 

Bgcolor:

 

O atributo bgcolor pinta o plano de fundo do documento inteiro com a cor que você escolher. Exemplo: <BODY BGCOLOR="#3300CC">.

 

 

Link, vlink, alink e text:

 

O atributo link determina a cor de todos os links que não foram acessados, vlink determina a cor de todos os links que já foram acessados e alink determina a cor do link no momento em que ele é clicado.

 

O atributo "text" determina a cor padrão dos textos em seu documento.

 

Exemplo: <BODY LINK="cor" VLINK="cor" ALINK="cor" TEXT="cor">.

 

 

Leftmargin e topmargin:

 

Leftmargin e topmargin definem respectivamente o número de pixels de onde a margem esquerda e a margem superior devem começar. Exemplo: <BODY LEFTMARGIN="10" TOPMARGIN="16">.

 

Obs.: Apenas para o Internet Explorer.

 

 

Marginwidth e marginheight:

 

No Netscape 4.0 ou superior, marginwidth e marginheight definem respectivamente o número de pixels de onde a margem esquerda e a margem superior devem começar. Exemplo: <BODY MARGINWIDTH="10" MARGINHEIGHT="16">.

 

 

 

Créditos: absolutamente para Rafael Hayashi, do Crieseuwebsite.com.

Link para o comentário
Compartilhar em outros sites
  • 3 months later...
  • 7 months later...
 Share
Ir para a lista de tópicos
×
×
  • Criar Novo...