Dicas de endereços para você construir sua home page de graça:

Domínio:

 

Programa para construir seu site:

Saiba tudo sobre HTML!

O que é HTML?

HTML é a sigla de Hypertext Markup Language (linguagem de marcação de hipertexto). Essa linguagem consiste em um conjunto de códigos (chamados de marcas ou tags) usados para definir a aparência e funcionalidade das páginas da Web que você usando seu navegador, como o Netscape Navigator/Communicator ou o Microsoft Internet Explorer. Ou seja, é com o HTML que se constrói as páginas pelas quais você navega na Internet. Um documento formatado com código HTML é chamado de documento HTML, como esta página que você está vendo agora. Um documento HTML precisa ter um formato adequado para ser reconhecido e interpretado corretamente pelo navegador. O formato básico é:

<HTML>
<HEAD>
<TITLE>Título da página</TITLE>
</HEAD>
<BODY>

Esses códigos acima sempre compõem o cabeçalho de uma página HTML

A parte principal do conteúdo de uma página é inserida aqui.

... e então código é encerrado de forma muito parecido como foi aberto
</BODY>
</HTML>

Observe estes dois detalhes: as marcas de abertura ficam entre os sinais de maior que/menor que "<...>" e as marcas de fechamento também mas têm uma barra "</...>" antes do texto. Por exemplo, um documento HTML é aberto por <HTML> e fechado por </HTML>.

 

Como posso iniciar a construção de uma página HTML?

Siga o formato básico abaixo para criar uma página HTML:

<HTML>
<HEAD>
<TITLE>Título da página</TITLE>
</HEAD>
<BODY>
A parte principal do documento é inserida aqui.
</BODY>
</HTML>

Como você pode ver, as páginas HTML começam com uma marca de abertura <HTML> seguida das marcas <HEAD>. Observe que, dentro de HEAD, ficam as marcas <TITLE>, onde vai o título de sua página. O título da página é exibido no canto superior esquerdo da janela do navegador e não aparece em sua página principal. Observe também que as marcas TITLE e HEAD são fechadas antes de iniciar a marca <BODY>. <br>
Depois, dentro da marca <BODY>, você deverá inserir todas as informações de sua página, como texto, imagens, links etc. <br> Consulte as seções a seguir para obter mais informações sobre como formatar sua página!

Como posso formatar meu texto?

Você já aprendeu que basta começar a digitar seu texto dentro das marcas BODY. Você pode formatar seu texto de diversas maneiras: <br>

  1. Negrito, itálico e sublinhado
    Você pode fazer o texto aparecer em negrito, itálico ou su-blinhado colocando-o entre marcas correspondentes a esses atributos.
  2. <b>Texto em negrito</b>
    aparecerá como: Texto em negrito

    <i>Texto em itálico</i>
    aparecerá como: Texto em itálico

    <u>Texto sublinhado</u>
    aparecerá como: Texto sublinhado

    Você também pode combinar esses atributos para criar o que quiser. Por exemplo:

    <b><i>Texto em negrito e itálico</i></b>
    aparecerá como: Texto em negrito e itálico

    OBSERVAÇÃO: é importante fechar as marcas na mesma seqüência utilizada para abri-las. Em outras palavras, no último exemplo, é importante que a marca de "itálico" seja fechada antes da marca de "negrito" (coloque o </i> antes do </b>).

  3. Usando tamanhos de cabeçalho
    Os navegadores da Web reconhecem seis níveis de cabeçalho.
  4. <h1>Cabeçalho de nível 1 </h1>
    <h2>Cabeçalho de nível 2</h2>
    <h3>Cabeçalho de nível 3</h3>
    <h4>Cabeçalho de nível 4</h4>
    <h5>Cabeçalho de nível 5</h5>
    <h6>Cabeçalho de nível 6</h6>

    Eles terão a seguinte aparência:

    Cabeçalho de nível 1

    Cabeçalho de nível 2

    Cabeçalho de nível 3

    Cabeçalho de nível 4

    Cabeçalho de nível 5
    Cabeçalho de nível 6
  5. Centralizando texto
    Por padrão, os navegadores alinham seu texto à esquerda. É possível centralizar seu texto colocando-o entre as marcas <center>.
  6. Esta linha:<center>Isto é um teste</center>
    aparecerá como:

    Isto é um teste

    * Como posso usar fontes?  

    É possível usar a marca FONT para melhorar a aparência de seu texto. Por exemplo, você pode definir tipo, tamanho e cor da fonte, tudo dentro da marca FONT. Veja este exemplo:

    <FONT FACE="Arial" SIZE="2" <br>COLOR="#0000FF">OLÁ!</FONT>

    O exemplo acima exibirá a palavra OLÁ! na fonte Arial, tamanho 2 e cor azul: OLÁ!

    Fique muito atento à seleção de fontes, pois o resultado final é que as fontes utilizadas em uma página somente aparecem se o usuário tiver as mesmas fontes instaladas em seu computador. A solução para essa questão é usar fontes que sejam instaladas comumente na maioria dos sistemas. Por exemplo: Arial, Times New Roman, Helvetica. Se realmente quiser ter determinadas fontes atraentes em sua página, você pode salvá-las como imagens e colocar essas imagens na página.

    * Posso alterar as cores de meu texto e plano de fundo? Cores, imagens de plano de fundo e algumas outras características são controladas pela marca <BODY>.

    É possível controlar a cor de plano de fundo, texto e links de sua home page usando a marca <BODY>. Para definir a cor do plano de fundo, texto, link, link visitado ou link ativo, mude um valor de cor, alterando os seis caracteres (depois do símbolo "#") do exemplo a seguir. Não os deixe todos com a mesma cor, pois assim você não conseguirá ver nada na página. É possível incluir qualquer um dos itens (BGCOLOR, TEXT, LINK, VLINK ou ALINK) ou excluir qualquer um deles.

    <BODY BGCOLOR="#FFFFFF" TEXT="#000000"

    LINK="#="#0000FF" VLINK="#="#009900" ALINK="#FF0000">

    * Veja algumas cores que você pode usar:

    Branco     #FFFFFF    Verde        #00FF00

    Amarelo   #FFFF66    Preto         #000000

    Vermelho #FF0000    Violeta       #CC33FF

    Cinza      #CC9999    Azul-claro   #00CCFF

    Azul        #0000FF

    Como posso alinhar texto?

    É possível usar estas marcas de parágrafo para alterar o alinhamento do texto em sua página:

    ALINHAR À ESQUERDA
    <p align="left">Seu texto aqui

    aparecerá como:

    Seu texto aqui

    ALINHAR À DIREITA
    <p align="right">Seu texto aqui

    aparecerá como:

    Seu texto aqui

    CENTRALIZADO
    <p align="center">Seu texto aqui

    -- ou --

    <CENTER>Seu texto aqui</CENTER>

    aparecerá como:

    Seu texto aqui

    Que tal usar parágrafos, quebras de linha e espaços?  

    É possível criar um novo parágrafo inserindo uma marca <P> antes de seu texto. Isso criará uma linha em branco antes de iniciar o parágrafo.

    As quebras de linha são criadas com a marca <BR>, que inicia seu texto uma linha abaixo da anterior, mas não insere uma linha em branco.

    Você também perceberá que pode acionar repetidamente a barra de espaços ao editar HTML, mas o navegador somente converterá todos esses espaços em um único espaço. Para criar mais de um espaço, você precisa usar a marca . Inserir esta marca entre seu texto faz o navegador reconhecer que você deseja espaços não separáveis.

    Como posso inserir uma linha horizontal?  

    Use a marca <HR> para inserir uma linha horizontal (ou traço horizontal) na página, dessa forma:

     


    Depois, você pode personalizar sua linha horizontal, como a largura e a cor. Por exemplo, este código: <HR WIDTH="50%"> gera isto:

     


    Você também pode formatar a cor, inserindo um atributo COLOR="RED", mas, para isto, somente os navegadores Internet Explorer oferecem suporte. Experimente visualizar isto usando o IE. Você verá um traço horizontal:

     


    O código é, simplesmente: <HR WIDTH="50%" COLOR="RED">

    Posso criar listas instantâneas?  

    Sim, claro. Podem ser usadas marcas HTML para criar, de forma rápida e fácil, listas ordenadas (numeradas), listas não ordenadas (com marcadores) e listas de definições (com recuos).

    Lista ordenada:
    É possível criar listas numeradas ou listas ordenadas usando a marca <OL> (ordered list, lista ordenada). O formato é:

    <OL>
    <LI>Item 1
    <LI>Item 2
    <LI>Item 3
    </OL>

    A lista terá a seguinte aparência:

  7. Item 1
  8. Item 2
  9. Item 3

Lista não ordenada:
Para criar listas de marcadores ou listas não ordenadas, use a marca <UL> (unordered list, lista não ordenada). O formato é:

<UL>
<LI>Item 1
<LI>Item 2
<LI>Item 3
<UL>

A lista terá a seguinte aparência:

Lista de definições:
A lista de defiições é um pouco diferente e pode ser usada para recuar, automaticamente, determinadas partes de seu texto. É mais fácil explicar uma lista de definições mostrando-a:

Laranjas
Uma fruta tropical avermelhada com o tamanho de uma maçã. Membro da família das frutas cítricas. Nos Estados Unidos, as laranjas são cultivadas principalmente nos Estados da Flórida e Califórnia.
Maçãs
Tecnicamente um pomo, as maçãs são frutas com o tamanho de uma laranja, em geral com diversos tons e mistura de vermelho, amarelo e verde. Nos Estados Unidos, as maçãs são cultivadas principalmente nos estados do norte, em locais próximos a extensões de água.

Esta é a mesma lista, com as marcas visíveis:

<DL>
<DT> Laranjas
<DD> Uma fruta tropical avermelhada com o tamanho de uma maçã. Membro da família das frutas cítricas. Nos Estados Unidos, as laranjas são cultivadas principalmente nos Estados da Flórida e Califórnia.
<DT> Maçãs
<DD> Tecnicamente um pomo, as maçãs são frutas com o tamanho de uma laranja, em geral com diversos tons e mistura de vermelho, amarelo e verde. Nos Estados Unidos, as maçãs são cultivadas principalmente nos estados do norte, em locais próximos a extensões de água.
</DL>

Como posso criar hiperlinks?  

É possível criar hiperlinks em sua página que apontem para:

  1. Uma página ou arquivo de seu diretório pasta
  2. Uma página ou arquivo em um subdiretório
  3. Um local fora de seu diretório na Internet).

Para criar um link para uma página ou arquivo localizada no mesmo diretório da página que você estiver editando, basta usar o caminho relativo, no qual você precisará fornecer somente o nome do arquivo no link:

<a href="nomedapagina.html">Próxima página</a>

"Próxima página" será exibida na página e, clicando na frase, você será levado para nomedapagina.html. Se quiser alterar o texto de seu link, troque "Próxima página" pelo texto que desejar no link. Além disso, se quiser fazer o link para uma outra página, basta trocar "nomedapagina.html" pelo nome do arquivo correspondente à página.

Ao fazer um link para um subdiretório, é preciso usar este formato:

<a href="subdiretorio/nomedapagina.html">Próxima página</a>

Para criar um link para uma página que reside fora de seu diretório ou na Internet, você precisa apenas usar o endereço completo (chamado de caminho absoluto) em vez de o caminho relativo:

<a href="http://www.abelbotafogo.com.br.tf">Ir para abelbotafogo </a>

O código acima criará um link, o qual vai levá-lo para a página "abelbotafogo" localizada em http://www.abelbotafogo.com.br.tf Use o botão de voltar do navegador para voltar aqui. Experimente abaixo!

Ir para abelbotafogo

 
Hosted by www.Geocities.ws

1