Título principal aqui

Dicas de HTML

::: Introdução :::

As páginas de internet são estruturadas em códigos-fonte, como o que vc viu na pagina anterior como exemplo. Ele especifica que cor será o fundo da tela, como serão os LINKS do site, quais e como estarão posicionadas as imagens presentes e assim por diante. Enfim, todos esses códigos-fonte definem toda a estrutura funcional e estética do site.

Por trás de toda página de internet há um código-fonte, que pode variar muito de site para site. Mas por trás de toda essa diferença, há um código em comum - o HTML (Hypertext Markup Language ) - que é padrão na interpretação de uma página de internet pelos PCs de todo o mundo.

O HTML não é o único, na construção de um site podem estar presentes também JAVASCRIPT, CSS (Cascading Style Sheets) e alguns outros esquisitões da casa. Neste site serão abordados apenas o HTML e um pouco de JAVASCRIPT e CSS. Quanto aos outros, vale a pena conhecer em outros sites mais especializados. Mas tenha em mente que estes códigos podem ser muito mais complicados e esquisitos do que o esperado e aprender a mexer com FLASH acaba tornando-se mais viável.

Também é importante conceituar que um Site/Homepage é composto por "páginas de internet" - elas são arquivos de programação HTML (ou outras linguagens) distintos, mas interligados através dos LINKS - juntos, ele criam o "site" propriamente dito. Por exemplo: um site de uma "locadora de vídeo virtual" possui distintas páginas de internet - romance, comédia, drama, aventura... cada um com conteúdo relacionado.
Links são ferramentas que redirecionem o visitante para determinados espaços do Site - elas podem ser textos, figuras, botões etc. No HTML TUDO pode ser personalizado, você adapta a linguagem original para adequar seu site às necessidades do visitante, ora sejam visuais, ora sejam acessíveis.

Abaixo vão algumas dicas:

Para criar os códigos-fonte:

Você pode utilizar o Word ou o bloco de notas (recomendamos o bloco de notas, por ser mais simples e não requerir tanta memória em seu uso). Não aconselhamos o uso exclusivo do Front Page, uma vez que ele altera seu código-fonte involuntariamente (retira espaços e modifica caracteres, apesar disso não alterar a configuração original do código). Se preferir um criador de páginas de internet realmente bom, procure utilizar o Dreamweaver, que trabalha na mesma linha, só que melhor e mais difícil. Entretanto, utilizar-se de programas com os quais você "controla indiretamente o HTML" não trará conhecimento nenhum sobre as linguagens de Internet. Você de fato mal vai chegar a conhecê-las.

Confusão de Arquivos

Evite criar nomes complicados demais ou com espaços, maiúsculas, acentuação ou pontuação. Muitas vezes alguns caracteres podem ser confundidos e o código não é propriamente interpretado. Por exemplo: se você quiser chamar o seu arquivo HTML de "página de entrada", utilize "pagina_entrada". Com nomes simplificados assim voce evita ter de escrever em um papelzinho de bolso todo amassado quais arquivos correspondem a quê.

A Página Inicial

Sua página de abertura geralmente deve chamar-se "index.html", a menos que o provedor do seu espaço na internet lhe permita essa alteração. Essa é uma convenção adotada para a intenet - dentre tantos arquivos código HTML interrligados do seu site, como o computador adivinharia qual abrir primeiro?

::: PASSO 1: estrutura principal :::

O código da página possui uma estrutura principal que não pode ser diferente: é a estrutura que define uma página de internet. Veja abaixo:

<HTML>

<HEAD>

<TITLE> </TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

Acima você vê as TAGS, que são códigos específicos inseridos entre colchetes. TAGS não aparecem por escrito na sua página, mas executam funções cruciais para ela.

Em geral, as tags precisam de um "começo" e de um "fim" para definir a partir de qual ponto em seu código ela faz efeito - e onde ele termina. O começo é delimitado pela primeira tag entre colchetes. O final de atuação dela é delimitado pela segunda (sempre com uma "/" antes do nome da tag). Veja o exemplo abaixo:

A tag deixa o texto em Itálico (inclinado). Abaixo, o exemplo de seu uso.

Usando a Linguagem HTML , você pode criar sua página de internet.

é assim que você verá no código-fonte, com as tags aparecendo. Repare 
na barra presente na segunda tag - ela indica o final da atuação da tag. 
Tudo que estiver entre tags como estas sofrerá o efeito correspondente.

Usando a Linguagem HTML , você pode criar sua página de internet.

é assim que você verá na página, sem as tags, mas com a função que elas 
exercem.

Abaixo se seguem as tags principais de uma estrutura HTML (como visto na figura acima).

<HTML> e </HTML>: é a identidade do código HTML. Essas duas TAGS definem que "este arquivo é uma página de internet e deve ser visualizado no internet explorer". A primeira ( HTML ) deve ser a primeira coisa escrita ao topo do arquivo. A segunda ( /HTML ), como você já deve ter imaginado, é a última coisa a ser escrita ao pé do código. O conteúdo entre as duas é tudo o que será considerado como "página de internet".

<HEAD> e </HEAD>: tudo que estiver entre essas duas TAGS será carregado pelo computador do visitante com prioridade. Mas ESSA É UMA TAG ESPECÍFICA, aqui entram apenas alguns códigos de JAVASCRIPT específicos e a tag TITLE, explicada a seguir. Em outras palavras, a função dela é basicamente existir e englobar a TAG TITLE.

<TITLE> e </TITLE>: eis aqui uma TAG simples e eficiente: ela define o que aparecerá escrito no topo da janela do explorer (lá onde tem o botão de fechar, minimizar e maximizar...). Esse recurso é muito importante para orientar visitantes perdidos!
Entre TITLE e /TITLE, você deve escrever o que irá aparecer escrito lá em cima. E só. Lembre-se que TITLE e /TITLE devem estar localizadas entre HEAD e /HEAD (como na estrutura exemplificada acima).

<BODY> e </BODY>: aqui começa a criação da página em si: a parte estética, textual e funcional com a qual o visitante interage. Não a tôa é chamada de BODY. Dentro dela não há regras específicas, apenas aplique códigos de texto, imagem, link e tabela (e seus derivados). Fica à deriva da imaginação do Webdesigner.

A estrutura da página HTML é essa, copie-a em seu arquivo e modifique-a a seu critério.

Aqui você aprenderá a mudar o fundo da janela do seu site... tanto para cores quanto para imagens.

PARA CORES

modifique a TAG BODY como mostrado a seguir:

Você acabou de criar a propriedade COLOR para a TAG BODY. Essa propriedade possibilita-o de escolher uma cor opaca ao fundo da janela. Entre "aspas" especifique a cor (pela codificação numérica ou pelo nome correspondente). Veja abaixo as cores mais usadas:

RED ou #FF0000	GREEN ou #00FF00	YELLOW ou #FFFF00	BLUE ou #0000FF
MAGENTA ou #FF00FF	CYAN ou #00FFFF	BLACK ou #000000	WHITE ou #FFFFFF

PARA IMAGEM

modifique a TAG BODY como mostrado a seguir:

Você acabou de criar a propriedade BACKGROUND para a TAG BODY. Essa propriedade possibilita-o de colocar uma imagem ao fundo da janela. O nome do arquivo correspondente à imagem deve ser especificado entre as "aspas".

Agora você já sabe como modificar o fundo da janela de sua página. Ponha em prática essa técnica e crie sites bonitos e bem-trabalhados. Mas tenha em mente que:

Você deve escolher cores e composições agradáveis à visão. Não jogue apenas cores aleatórias pois um site muito chamativo, além de ser desagradável para o internauta, passa a impressão de que o Webdesigner não se deu ao trabalho de se preocupar com a estética de seu site.

Imagens com alta resolução ou grande número de cores levam mais tempo para ser carregadas e podem deixar a navegação pelo site lenta. (Sempre use imagens com extenções .GIF, .JPG ou JPEG e nunca imagens com extenções .BMP)

::: Inserção de texto :::

Não há muito mistério aqui, inserir textos e personalizar fontes e cores das letras é, na verdade, "um grande jogo de TAGS". Todo e qualquer texto, sem exceção (inclusive este que você está lendo agora) é escrito
fora de qualquer TAG, mas ENTRE BODY e /BODY.
Por isso, quando você se esquece de "fechar uma TAG", ela deixa de ser reconhecida como TAG e passa a ser como texto - e aparece na página, identificando que você errou ali mesmo...

Na formatação do texto é necessário lembrar apenas 2 coisas:

Existe uma TAG para formatação dos textos. Escreva seu texto ENTRE essas duas TAGS:

e

Isso irá restringir a formatação da fonte àquele texto.

Mas ainda não é suficiente, a TAG assim não tem efeito algum... é necessário especificar as propriedades da fonte (FONTE, COR e TAMANHO):

FACE é a propriedade da fonte, do tipo de letra, onde entram por exemplo Arial, Times New Roman, Verdana e outras... Se você especificar DUAS OU MAIS fontes usando vírgulas, elas serão interpretadas na seqüência em que fora especificadas. Esse é um bom recurso, pois se um computador não possui a fonte que você usa em seu site ele automaticamente utiliza a segunda fonte que você especificou.
Substitua o valor X pelo nome da fonte (cuidado para não errar!)

SIZE é a propriedade do tamanho da letra, mas cuidado, pois a numeração é diferente da do Word. A numeração varia de 1 a 7 e o padrão é 3 ou 2.
Substitua o valor Y pela numeração desejada.

COLOR é a propriedade da cor da fonte. Se você acompanhou o PASSO 2, já sabe como usar cores - o sistema é o mesmo, códigos numéricos ou nomes. Ambos valores sempre entre "aspas".
Substitua o valor Z pelo código numérico ou nome da cor.

::: NEGRITO, SUBLINHADO E ITÁLICO

para inserir qualquer um destes (ou todos eles), apenas crie as respectivas TAGS junto da TAG FONT:

NEGRITO...............
SUBLINHADO.......
ITÁLICO.................

::: PARÁGRAFO E MUDANÇA DE LINHA

Apenas "ENTER" não é suficiente para que o computador reconheça uma quebra de linha ou mesmo um parágrafo. Para isso, use as respectivas TAGS a qualquer momento do texto:

MUDAR DE LINHA..................... 
PARÁGRAFO...............................

::: TÓPICOS

Para criar tópicos (bolinhas que "enumeram" fatores) use antes da frase:

<LI>

::: ALINHAMENTO

Há ainda uma TAG especial para alinhamento de textos (e de imagens!) - para alinhá-lo "centralizado à linha". Escreva seu texto (e suas TAGS FONT) entre:

<CENTER> e </CENTER>
...e seu texto estará centralizado, não importanto o tamanho dele. Sem esta TAG ele se dispõe normalmente pela página.

::: Inserção de imagens :::

Pode não parecer, mas este é um conceito quase tão simples quando inserção de textos. Apenas adicione a TAG:

e especifique entre as "aspas" o NOME DO ARQUIVO imagem (sem erro e com a extenção - como gif, bitmap ou jpg). Sua imagem é inserida no local relativo ao da TAG.

Exemplo:

o código-fonte deta figura é:
<img src="http://geocities.yahoo.com.br/marco_manhaes/acessorios/figura01.JPG">

Obs. As extensões dos arquivos exigem a sua atenção, pois, .jpg não é igual à .JPG

Mas há ainda propriedades que podem ser alteradas:

HEIGHT e WIDTH são, respectivamente, a ALTURA e a LARGURA e X e Y podem ser valores tanto numéricos quanto percentuais. Se forem numéricos, corresponderá à medida em PIXELS do monitor. Se for percentual, será relativo às dimensões da janela em que está sendo visualizado. O sistema HTML mantém a proporção a imagem caso apenas uma dimensão seja informada. Para distorcer a imagem é necessário dar ambas dimensões fora da proporção original.

BORDER é a EXPESSURA DA BORDA da imagem.
Com "BORDER=0", não há borda.

::: Alinhamento de imagens :::

Há 3 formas distintas de alinhar uma imagem: Esquerda, centro e direita. Insira a imagem entre as TAGS:

e opte por uma das três opções abaixo para por dentro das "aspas":

À ESQUERDA: escreva "LEFT" entre as "aspas"

AO CENTRO: escreva "CENTER" entre as "aspas"

À DIREITA: escreva "RIGHT" entre as "aspas"

::: Links (imagens e texto) :::

Eis o elemento principal de uma página de internet: O Link. Links são conexões entre dois documentos HTML - eles podem apresentar-se como botões, como figuras, como textos e etc. Linkar duas páginas até pode soar difícil, no entanto é um conceito fácil, que exige apenas compreensão. Veja a TAG abaixo:

<A HREF="pagina_alvo.html"> Aqui entra o texto, imagem ou botão </A>

Ao clicar no elemento entre as duas TAGS (que seria um texto, uma imagem ou um botão), o internauta seria encaminhado para a página especificada em HREF que, no caso, é "pagina_alvo.html".
A TAG </A>, como é de se esperar, delimita a atuação do link. Se você esquecer de incluí-la, o link continuará a funcionar, mas seu efeito se extenderá para todas as outras palavras aparentes que se seguem até o final do código-fonte.

clique no link clique no link

este link acima está em código fonte assim:
<a href="http://geocities.yahoo.com.br/marco_manhaes/dicas/teste.htm">
(indica o endereço que o link te encaminhará.... a "pagina alvo")

<img border="0" src="http://geocities.yahoo.com.br/marco_manhaes/acessorios/figura03.gif">
(indica o endereço da figura que corresponde ao link)

Existem ainda outros parâmetros a serem incluídos DENTRO da TAG para personalizar o efeito de link. Por exemplo, se você quiser que a página-alvo seja aberta em uma nova janela. Veja abaixo:

<A HREF="pagina_alvo.html" TARGET="_blank"> texto, imagem ou botão </A>
Isso fará com que a página seja carregada em uma nova janela.
TARGET="_self"
Isso fará com que a pagina seja carregada em uma mesma janela.

::Microsoft Front Page::
É, você pode sim fazer o seu site inteiro no front page, pode ser mais fácil e mais rápido, se você não estiver acostumado com HTML... mas cadê a graça??? É um programa preguiçoso, isso sim! =)P
Queimar uns neuronios a mais para pôr suas idéias na internet nunca matou ninguém, faz até bem para o raciocínio.
Mas o FrontPage pode e deve ser usado para entender como funcionam TAGS, condições de JAVASCRIPTS e outras chatices que andam soltas por ai... mas construção do site, esqueça! A não ser que queira um trabalho fácil... Então é recomendado!

::DÚVIDAS::

Para tirar dúvidas sobre HTML e saber como utilizar o Front Page é só entrar em contato ou deixar seu recado no livro de visitas, terei prazer em ajudá-lo.

E-mails:

[email protected]
[email protected]
[email protected]