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!
Você já aprendeu que basta começar a digitar seu texto dentro das marcas BODY. Você pode formatar seu texto de diversas maneiras: <br>
<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>).
<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:
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:
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:
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:
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