HTML PARA INICIANTES |
Certas tags são imprescindíveis e não podem deixar de estar presentes em um documento, isto é, uma página criada por você. São tags padrão, básicas, não dá pra viver sem elas porque os navegadores ficam na expectativa de as "ler" para executar o documento.
Veja este exemplo:
<!DOCTYPE> <HTML> <HEAD> <TITLE></TITLE> <META> </HEAD> <BODY> </BODY> </HTML> |
Os elementos requeridos e que você deve incluir sempre em toda página que você criar são:
Veja este outro exemplo:
<!DOCTYPE> <HTML> <HEAD> <TITLE></TITLE> <META> </HEAD> <FRAMESET> <FRAME> </FRAMESET> </HTML> |
Neste exemplo os elementos requeridos são:
Um documento html sempre começa com uma declaração da versão de html que o documento utiliza. Atualmente, isto é, enquanto não aparecer outra melhor, a versão de html comumente usada é a HTML 4.0 que pode gerar 3 possibilidades de !DOCTYPE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> é a declaração para HTML 4.0 Strict, que privilegia e enfatiza o aspecto estrutura da página sobre o aspecto apresentação. Esclarecendo o que isto significa, é a linguagem html para uma página básica e sem rebuscamentos. O uso deste tipo de !DOCTYPE fará com que atributos e especificações e particularismos para textos (tais como alinhamentos e escolha de cores para as letras), imagens (espaçamentos horizontal e vertical), sons (repetir uma música de fundo repetidamente), colocação de links não possam ser digitadas porque este tipo de !DOCTYPE não permite a sua utilização. O visitante vai ter rápida descarga da sua página, contudo a apresentação será bem simples, e como foi dito, sem a permissão de usar links o visitante só terá as informações contidas nesta única página.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> é a declaração para HTML 4.0 HTML 4.0 Transitional, que inclue todos os atributos possíveis à HTML 4.0 Strict, mais atributos de apresentação e links. É o !DOCTYPE que recomendo a você usar.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> é a declaração para HTML 4.0 Frameset, uma variante do HTML 4.0 Transitional para documentos que use o recurso de frames. Ao usar este tipo de versão de html deve-se substituir a tag BODY pela tag FRAMESET.
Esta tag notifica ao seu navegador que a sua página contém informações em html. Ao salvar sua página inicial do site prefira um nome tal como index e coloque como um arquivo de extensão .html ou .htm, portanto salve como index.htm ou index.html. Se você vai nomear o documento com um nome que tenha no máximo 8 caracteres, use a extensão de arquivo .htm, exemplo index.htm, pois index contém 5 caracteres, mas nada impede que você nomeie como index.html. Eu aconselho você a criar o hábito dos arquivos terem extensão .html, a página inicial e as demais.
A tag head contém as tags META e TITLE. Para os iniciantes é o suficiente a saber, porém adianto a você que também pode conter codificação de scripts e folhas de estilo, que lhe será explicado numa outra oportunidade.
O título é mostrado na linha do topo da janela do seu navegador. A tag title contém o nome da sua página, não tem que ser necessariamente um monossíilabo, pode ser uma frase, pois title visa identificar para o visitante qual é o nome do seu site e qual o seu conteúdo. Estando acima dos ícones e da linha de endereço do navegador, title não faz parte da página do seu site. Se você quiser que o título apareça em sua página, o que é altamente recomendável, você deve colocá-lo na parte da tag body. Outra finalidade de title é aparecer em resultados de pesquisa em sites de busca como o Cadê, Radix, Radar UOL e também aparecer no menu Favoritos do seu navegador.
Você deve escolher como título algo descritivo, único e relativamente curto. Por exemplo, você poderia informar no título o nome do site, o público ao qual se destina e o que há na página, exemplo: PEDRO'S HOME PAGE - GAY SITE - CUECAS. O título abrange informações que vão prender a atenção do visitante, permitindo que ele prossiga ou não na visita. Geralmente você deve evitar títulos longos, use no maximo 64 caracteres. Você não acha que assim ficou melhor do que simplesmente dar um titulo como "cuecas" ou como "fotos"?
A tag meta é usada pelos mecanismos de pesquisa e há vários tipos de meta e eles devem ser digitadas muito criteriosamente para que seja otimizada a busca por estes search engines, dentre as metas existentes vamos informar apenas as principais.
- <META NAME="DESCRIPTION" CONTENT="">
- É usada para descrever sua home page, você vai fazer isso escrevendo dentro das aspas de CONTENT uma descrição sucinta do seu site. Os mecanismos de busca vão aproveitar o texto que você digitar para apresentar ao internatura um sumário sobre o seu site.
- <META NAME="KEYWORDS" CONTENT="">
- Igualmente ao procedimento de escolher criteriosamente o title e meta description, deve-se escolher termos para keywords que tenham a ver com o conteúdo do seu site, que sejam relevantes, denotativos, orientativos e preferencialmente termos que apareçam escritos na página. Se você quiser mais explicações sobre como escolher boas keywords, leia o item Conselhos sobre keywords. Mas leia apenas após ler o próximo item BODY, pois estes conselhos são avançados e você tem ainda que adquirir mais noções mínimas, coloquei estes conselhos aqui por que fazem parte do assunto, você poderá ler numa outra hora.
- <META HTTP-EQUIV="Content-Type" CONTENT="text/html;>
- Indica que a página contém unicamente texto, não há na página scripts ou folhas de estilo.
Você aprendeu que head contém title e meta e agora você entra na segunda e maior parte do seu documento html que é BODY. Entre as tags body e /body pode haver uma infinidade de tags executantes das mais variadas funções, fazendo com que body seja quem realmente vai provocar o aparecimento de textos e imagens na área central da janela do navegador.
A tag body não é aplicável a páginas com frames. Posteriormente você saberá o que são frames e o porquê de não se colocar a tag body.
Irei lhe mostrar agora que a tag body em si mesma pode receber atributos que irão provocar efeitos importantes no visual da sua página, por exemplo, colocar uma cor de fundo na página, fazer os links ficarem coloridos, etc.
Este atributo de body permite que você coloque uma imagem como fundo da sua página, esta imagem deve estar no formato .gif ou .jpg. Outra coisa a dizer é que esta imagem será repetida continuadamente até preencher toda a tela, evidentemente se ela for menor que o tamanho da tela é que fará isto. Por exemplo, se você tem uma imagem em formato .jpg de 30 por 30 pixels, digamos que seja a figura de uma estrela, o atributo background fará com que esta estrela seja repetida até preencher toda a tela, este é o efeito pile. Dentro das aspas você deve digitar o endereço da imagem no seu computador, ficando algo parecido com isto:
<BODY BACKGROUND="C:/Meus Documentos/Backgrounds/star.jpg">
Este atributo de body permite que você coloque uma cor como fundo da sua página. Entre as aspas digite o nome da cor, em inglês, ou o código hexadecimal, aconselho a usar sempre o código hexadecimal. As cores você obtém no próprio programa editor de html ou pode deixar sempre à mão uma listinha já pronta, como esta: red #FF0000 - teal #008080 - blue #0000FF - yellow #FFFF00 - green #008000 - purple #800080 - white #FFFFFF - gray #C0C0C0 - black #000000 - orange #FF3300. Quando você escolhe uma cor de fundo deve prestar atenção se vai harmonizar este fundo colorido com os elementos que vão estar por cima dele, como os links, os textos, as imagens, etc.
<BODY BGCOLOR="#C0C0C0">
Este atributo de body permite atribuir uma cor ao texto da página, note bem, apenas atribuir a cor mas não o tamanho da letra, o tipo cursivo da letra, etc. No exemplo abaixo o texto é azul, que acredito combina bem com o fundo cinza mencionado anteriormente para a cor de fundo.
<BODY TEXT="#0000FF">
Este atributo de body permite atribuir a cor do link, que é uma outra página do seu site. O link é uma forma de você levar o visitante a outras informações que você não julga pertinente ou oportuno de veicular na página atual. Um conselho que dou é adotar uma cor apenas para cor de link em todas as páginas que você criar, isto evita confusão quando se está indo de cá pra lá num site.No exemplo abaixo o link é azul-marinho.
<BODY LINK="#000080">
Este atributo de body permite atribuir a cor que deve ter um link que acaba de ser clicado. Foi dito que o link é de cor azul-marinho, quando ele for clicado ele se torna um link ativo e para mostrar que é ele quem está sendo acessado, muda-se a cor do link para outra cor, vamos supor vermelho. Porém você pode preferir manter link e alink de mesma cor.
<BODY ALINK="#FF0000">
Este atributo de body permite atribuir a cor que deve ter um link já visitado. Costuma-se admitir para cor de vlink uma cor sem graça que não chame muita atenção, muito comum a escolha recair sobre cinza-escuro ou roxo.
<BODY VLINK="800080">
Os atributos acima ficam todos agrupados dentro da tag body, veja abaixo, ressaltando que a cor de fundo só será visível enquanto não for baixada completamente a imagem de fundo, ficando esta última sobre aquela, tornando-a invisível. Evidentemente se você for colocar uma imagem de fundo pode omitir a cor de fundo, já que ela se tornará invisível, mas lembre-se que pode dar um problema qualquer e a imagem de fundo não ser carregada, por isso é bom que você tenha também a cor de fundo.
TEXT LINK ALINK VLINK |
Depois de tomar conhecimento destes itens acima você pode ir para a Parte 2.
Keywords é para o século 21 o equivalente às páginas amarelas da telefonia convencional. É possível achar online qualquer objetivo na forma de texto, imagem ou áudio, mas mais importante é que keywords possibilitam acharem vocêe!
As keywords que vocêe insetir na tag Meta em seu site determinará exatamente a performance do seu site nos mecanismos de busca a partir do que estes potenciais visitantes escreverem no box de busca. Portanto, ao escolher uma keyword vocêe estará posicionando um efeito positivo ou negativo para a exposição recebida e vocêe sabe que no mundo virtual o tráafego é tudo, por mais atraente e elaborado que seja o site, e por mais louvável seja o objetivo do seu site. Sem tráafego (visitantes) o seu site será visto apenas por vocêe!
O uso de keywords pode levar o seu site ao sucesso ou ao fracasso, logo, é recomendável que alguns conselhos sejam considerados:
- Escolha keywords pertinentes ao seu site
Se você tem um site de acesso gratuito com contos eróticos então não deve referir-se na keyword sobre galeria de fotos, mesmo sabendo que prevalece para a maioria dos internautas o desejo de ver fotos eróticas. Perceba que você deve se ater ao assunto ou material que será encontrado pelo visitante, e se você referiu-se a acesso gratuito, nem pense em pedir senha, subscrição ou e-mail sob pena de nunca mais ser revisitado.
- Use termos da keyword na Title tag
As informações contidas na Title tag são as primeiras a serem encontradas pelos mecanismos de busca, portanto tire proveito disso para atrair visitantes potenciais inserindo alguns termos presentes na keywords ao título do seu site.
- Não repita o termo da keyword
Alguns webmasters pensam que a repetição de termos incrementa o ranking do site. Isto era verdade alguns anos atrás mas atualmente o uso repetido de termos ou penalizará o seu site o o banirá definitivamente dos mecanismos de busca. Use um termo apenas uma vez seja no Title ou no Description. Por bom senso, mesmo no texto deve ser evitado a repetição de palavras ou frases.
- Use o termo da keyword no corpo do seu site
Uma vez escolhida uma keyword é muito recomendável que este termo apareça na página. Caso seja uma fotografia ou música, coloque uma referência denotando a presença da mesma.
- Pesquise online o resultado da busca de um termo usado na keyword
Como é que um internauta acharia o seu site? O mais provável é digitando keyword no box de busca. Você deve fingir que é este visitante e que está digitando palavras ou frase no box de algum serviço de busca na Internet. Uma vez digitado é clicado o botão de OK e em breve uma resposta lhe é disponibilizada. O seu site apareceu entre os resultados? Se o seu site não foi encontrado pelo mecanisco de busca então é altamente recomendável que você mude o termo (ou termos) utilizados na Keyword da sua Meta tag.
- Consulte online sobre as keywords mais utilizadas
Se você não tem idéia de qual termo usar como keyword, que tal visitar um dos seus concorrentes com sucesso na resposta a esta busca que você fez e verificar quais foram as keywords que ele usou para obter tal sucesso? (as keywords aparecem se voce clicar sobre a página com o lado direito do mouse e escolher exibir código fonte).Uma boa atitude sua, mais ética, é procurar por sites gratuitos que mostram quais os termos de keywords mais buscados na Internet, exemplo este aqui que é bem prático, basta enviar um e-mail em branco e eles retornam pra você os termos mais digitados no box de busca, eis: keywords@emailexchange.org.
- Site que fornece as keywords mais utilizadas
Um site interessante sobre as keywords (palavras-chave) mais comuns escritas pelos internautas do site de busca Overture está em http://inventory.overture.com/d/searchinventory/suggestion/. Este site apresenta quantas vezes uma keyword, seja uma palavra ou uma frase, é solicitada no período do mês e quais termos alternativos para esta keyword redundando numa otimizaço de visitas ao seu site, caso você as use no campo Meta.