HTML PARA INICIANTES |
A tag FONT determina características para o texto muito além do atributo cor permitido pela tag TEXT="". Veja abaixo um exemplo da tag FONT:
COLOR: um código hexadecimal iniciado pelo sinal #;
FACE: um tipo de escrita particular, os mais aplicados em home pages e que usualmente estão na maioria dos discos rígidos são: arial, helvética, tahoma e verdana. Você pode ter uma lista extensa de fontes no seu computador, mas será que estas fontes estão carregadas no computador que acessou a sua home page? Se o visitante não tiver a fonte que você escolheu para texto de sua página, esta fonte citada na tag FONT será automaticamente substituída por outra existente no computador do internauta, a fim de que ele possa visualizar seu site. Portanto, crie suas páginas com estas fontes padrão para não correr o risco de ter a aparência da página prejudicada.
SIZE: no exemplo o tamanho da fonte está configurada para 12pt, ou seja, doze pontos. Em sites não se deve colocar tamanhos muito pequenos nem muito grandes, a não ser para obter efeitos específicos, como um título em tamanho grande para causar impacto, por exemplo "24pt" ou "7". Para um texto comum usa-se tamanhos "10pt" ou "2". Quando se escreve o número sem estar seguido de "pt" entende-se que a medida está em pixels, abreviadamente "px". As medidas em pixels para SIZE são: -3, -2, -1, 1, 2, 3, 4, 5, 6, 7, +1, +2, +3, +4.
Há várias formas de se alterar a aparência de uma fonte, como dar um efeito de negrito, sublinhado, itálico, etc. Vamos tratar disso agora.
negrito | <B> </B> | <FONT COLOR="#000000" FACE="Arial" SIZE="2"><B></B></FONT> |
sublinhado | <U> </U> | <FONT COLOR="#000000" FACE="Arial" SIZE="2"><U></U></FONT> |
itálico | <I> </I> | <FONT COLOR="#000000" FACE="Arial" SIZE="2"><I></I></FONT> |
ênfase | <STRONG> </STRONG> | <STRONG><FONT COLOR="#000000" FACE="Arial" SIZE="2"></FONT></STRONG> |
subscrito exemplo: H2O |
<SUB> </SUB> | <SUB><FONT COLOR="#000000" FACE="Arial" SIZE="2"></FONT></SUB> |
sobrescrito exemplo: x2 |
<SUP> </SUP> | <SUP><FONT COLOR="#000000" FACE="Arial" SIZE="2"></FONT></SUP> |
tachado exemplo: |
<S> </S> | <S><FONT COLOR="#000000" FACE="Arial" SIZE="2"></FONT></S> |
Darei agora dois exemplos de alteração da fonte arial de 2 pixels de cor preta para o efeito negrito:
Uma palavra com o uso de negrito tem o seguinte código html:
Uma <FONT COLOR="#000000" FACE="Arial" SIZE="2"><B>palavra</B></FONT> com o uso de negrito tem o seguinte código html:
Se quiser a frase toda em negrito deve-se colocá-la integralmente:
<FONT COLOR="#000000" FACE="Arial" SIZE="2"><B>Se quiser a frase toda em negrito deve-se colocá-la integralmente:</B></FONT>
Estes dois exemplos acima com o efeito negrito são modelos para os demais efeitos, procure fazer um exercício dos mesmos em um editor de html.
Um jeito rápido de mudar o tamanho de uma fonte é usar a tag de cabeçalhos, com seis níveis de tamanho de fonte, numerados de 1 a 6, com 1 sendo o tamanho maior e 6 o tamanho menor. A tag cabeçalho é reservada aos títulos de capíitulo e subcapítulo. O título de capítulo e subcapítulo é de bom-senso mostrado em tamanho maior ao tamanho da fonte do texto seguinte. O primeiro cabeçalho de um documento deve ser definido como <H1>, que é o tamanho maior.
A sintaxe de um elemento cabeçalho é <Hx> </Hx> onde x é um numero entre 1 e 6.
Tome o cuidado para não pular níveis de cabeçalho no seu documento, por exemplo não comece com o nivel 1 do cabeçalho <H1> e coloque o próximo como nível 3 <H3> (o correto seria colocar <H2>, que é o nível imediato).
Note que usando as tags de cabeçalhos você só altera tamanhos, não podendo alterar cores ou outros efeitos.
Vou dar agora um exemplo usando H2, H3 e H4, a codificação e o seu resultado você vê a seguir:Ainda não encontrei o que estou procurandooriginal: I Still Haven't Found What I'm Looking For (U2)cada estrofe repetir 2 vezes antes de ir para a próximaSubi as mais altas montanhas, corri através dos campos só para estar com você. Corri, engatinhei, escalei estas muralhas da cidade só para estar com você mas ainda não encontrei o que estou procurando. Beijei lábios de mel senti a cura na ponta dos dedos dele, ardia como o fogo, este desejo ardente, falei na língua dos anjos, segurei a mão do demônio, estava quente a noite, e eu estava frio como uma pedra, mas ainda não encontrei o que estou procurando. Acredito no reino dos céus, quando todas as cores sangrarão, fundindo-se em uma só, mas, sim, eu continuo correndo, você partiu os elos, você afrouxou as correntes, você carregou a cruz e a minha vergonha. Você sabe que eu acreditei nisso, mas ainda não encontrei o que estou procurando. |
Um parêntese agora: você notou que o cantor está falando com Deus? A Bíblia diz no Salmo 92 algo sobre subir no alto de montanhas e no Salmo 23 em andar em verdes campos. Em outras partes do Velho Testamento diz-se que quem anda com Deus corre e não se cansa, e em outra parte há uma narração sobre as muralhas de Jericó que tombaram pela crença que homens tiverem em Deus. Na segunda estrofe pode-se pensar na situação em que o demônio tentou Jesus enquanto este jejuava por 40 dias no deserto. Enfim, o cantor se sente religioso mas não tem obtido as promessas e sente-se angustiado. Você, o que acha? Por que podemos nos sujeitar a crer em Deus e ainda assim nos sentir "procurando" se é fato que os elos das correntes foram rompidos e a cruz foi carregada para nós, por que ainda não encontramos o que estamos procurando?
O comando enter para mudança de linha nos documentos html não tem significado. De fato, uma longa seqüência de acionamentos da tecla enter, com o fim de causar mudança de linha para um texto (ou imagem), dá como resultado NADA quando o documento é exibido no navegador. E com o acionamento continuado da tecla de espaço você obtém um único espaço horizontal.
O que quero dizer é que você não deve usar as teclas de enter e espaço na criação de sua página com o objetivo de distanciar elementos. Vamos ver agora como é que se cria espaçamentos horizontais e vertical em html.
Digamos que você digitou assim no seu programa editor de html:
Bem-vindo à minha página pessoal.
Você é o visitante número 1 milhão!
Por favor clique e vote no meu site para concorrer ao iBest!
Eu imagino que você deva ter acionado a tecla de espaço algumas vezes para que as palavras em cada linha se iniciassem um tanto distantes da margem esquerda, bem como imagino que você acionou a tecla enter ao final de cada linha para seguir o texto numa linha diferente. O que você deve saber é que quando for visualisado na Internet este texto será visualisado assim:
Bem-vindo à minha página pessoal. Você é o visitante número 1 milhão! Por favor clique e vote no meu site para concorrer ao iBest!
O navegador mostrará tudo na mesma linha e quando o texto encostar na margem direita da tela o navegador continuará o texto na próxima linha ("word wrap"). O navegador tratará acionamentos de enter e espaços como lhe disse anteriormente.
Em html a mudança intencional de linha é feita com a tag BR. Se você terminou o texto em uma linha e quer continuá-lo na linha seguinte, use BR. Veja como ficaria aquele seu texto:
Bem-vindo à minha página pessoal.<BR>
Você é o visitante número 1 milhão!<BR>
Por favor clique e vote no meu site para concorrer ao iBest!
Em html para se espaçar uma palavra de outra aciona-se uma única vez a tecla de espaço, mas para espaços maiores digita-se o código quantas vezes for necessário até obter a distância pretendida entre as palavras. Para imagens também pode se utilizar da entidade , contudo há outra maneira mais eficiente. Veja como ficaria aquele seu texto:
Bem-vindo à minha página pessoal.<BR>
Você é o visitante número 1 milhão!<BR>
Por favor clique e vote no meu site para concorrer ao iBest!
Há como criar espaçamento colocando o texto centralizado usando a tag <CENTER></CENTER> como se pode ver abaixo:
<CENTER><FONT COLOR="#000000" face="verdana" SIZE="2">As imagens do meu site foram obtidas em sites e chats na Internet e também recebidas por e-mails e havendo qualquer restrição por exigência de copyrigth ou infringência de leis locais, favor solicitar providências enviando-me um e-mail.</FONT><CENTER>
Inicia-se um texto em um parágrafo usando a tag <P>. A tag </P> fechando o parágrafo pode ser omitida. É uma excessão pois você sabe que as tags precisam de ser aos pares. Neste caso do parágrafo é devido aos navegadores entenderem que ao encontrar uma tag <P> significa que o parágrafo anterior terminou, contudo, pode ser necessário usar </P> desde que sejam acrescentados atributos a <P>, como alinhamento.
O parágrafo pode ser alinhado à esquerda, no centro e à direita, portanto a tag P fica acompanhada de atributos. Veja a seguintes codificações para o alinhamento de texto em parágrafos:
- Parágrafo alinhado à esquerda: <P ALIGN="LEFT">
- Parágrafo alinhado no centro: <P ALIGN="CENTER">
- Parágrafo alinhado à direita: <P ALIGN="RIGHT">
Veja o mesmo parágrafo com diferentes alinhamentos:
As imagens do meu site foram obtidas em sites e chats na Internet e também recebidas por e-mails e havendo qualquer restrição por exigência de copyrigth ou infringência de leis locais, favor solicitar providências enviando-me um e-mail. ===> alinhamento à esquerda
As imagens do meu site foram obtidas em sites e chats na Internet e também recebidas por e-mails e havendo qualquer restrição por exigência de copyrigth ou infringência de leis locais, favor solicitar providências enviando-me um e-mail. ===> alinhamento no centro
As imagens do meu site foram obtidas em sites e chats na Internet e também recebidas por e-mails e havendo qualquer restrição por exigência de copyrigth ou infringência de leis locais, favor solicitar providências enviando-me um e-mail. ===> alinhamento à direita
A tag <HR> é usada para se inserir uma linha tracejada horizontal de certa grossura, cor e comprimento. Muito útil para separar seções em uma página.
Observe que HR não tem a tag de fechamento </HR>. Você pode deixar de definir atributos e colocar apenas <HR>, neste caso aparecerá na tela apenas uma barra padrão. Você pode atribuir valores para alguns atributos, estes então modificarão a barra padrão.
<HR> | |
<HR COLOR="#FF0000"> | |
<HR WIDTH="50%" ALIGN="LEFT"> | |
<HR SIZE="6" NOSHADE> | |
<HR COLOR="#00FFCC" SIZE="2" WIDTH="80%" ALIGN="CENTER"> |
Os valores para width podem ser expressos em porcentagem ou em pixels. Definir o comprimento em pixels, por exemplo, 800px, cria-se uma linha horizontal de características default que atravessa toda a página SE e somente SE a tamanho de visualização da tela for de 800 pixels. A maioria dos monitores vem ajustada para uma resolução de 800x600px, mas alguns internautas podem estar com uma tela com 1024x768px ou 640x480px. Se o internauta estiver com 1024px de largura, a barra horizontal de 800px evidentemente não atravessará toda a tela. Para contornar esse problema de qual tamanho de tela o internauta usa, é melhor adotar width em porcentagem. Um width de 80% será sempre de 80% da largura da tela, qualquer que seja a configuração da tela.
Os valores para align são left, center, right.
O aributo size pode assumir valores desde 1, 2, 3 até 10.
O atributo noshade tira da barra horizontal o efeito de 3-D.
- Escreva como você fala
Supondo que você fala a língua padrão (como a falada pelos jornalistas apresentadores de telejornais de alcance nacional) você pode e deve injetar sua personalidade em tudo o que você escrever. Você usaria uma linguagem regional apenas para tornar seu site "curioso" para os demais visitantes de outras regiões ou para restringir a visita apenas às pessoas quem entendam o significado dos termos regionais. Ficará surpreso com a boa aceitação de uma linguagem direta, cordial e franca. Porém saiba que realmente ninguém suporta termos obscuros, gírias ou expressões vulgares ou de guetos, linguagem muito erudita ou técnica e mesmo palavras pouco conhecidas de língua estrangeira. Sendo o seu texto simples e amigável haverá comunicação entre você e o visitante porque as pessoas gostam de relacionar-se com gente igual a elas.
- Diga logo o que o visitante achará
Qualquer pessoa enquanto internauta tem a caracterítica de ser solitária e independente. Internautas não estão nem ai para quem você é. Internautas tem sim o interesse de saber o que é que você tem a dar e acrescentar ao seus estilos de vida. Simplesmente isto! portanto diga logo na página para o que você veio e quais benefícios ou resultados você proporcionará a eles. Se você tem um site de pornografia gay diga logo que o internauta vai ver fotos ou textos de foda, de 69... Sim, não fique com receio ou pudor, dê logo de cara o que o internauta encontrará (se ele não quer encontrar, que suma logo!).
- Prefira o uso de palavras e frases curtas
Palavras e frases curtas produzem impacto mas se longas chateiam e desanimam o visitante. Testes psicológicos comprovam que deve-se preferir o uso de horas e números não exatos, ou seja, acredite você nisso, é mais agradável ao nosso mecanismo crítico cerebral a leitura de 1:15 do que 1:00. Supondo de que seja a hora em que tenha ocorrido um encontro, 1:15 dá a sensação de veracidade e exatidão ao fato do que se você dissesse que ocorreu às 1:00. Você já notou que a maioria dos preços são do tipo 5,99 e não do tipo 6,00?
- Use muito, muito, a palavra você e seu
Provavelmente os visitantes do seu site na Internet não tenha a mesma bagagem educacional e cultural que vocêe podendo ter ou para mais ou para menos, muito raramente igual a que você tem. Convém que o tratamento pessoal no texto do seu site seja 'você' e nunca senhor, moço, internauta, bofe, etc. Por exemplo, diga no texto 'você encontra aqui fotos de cuecas' e nunca uma frase do tipo 'o internauta encontra aqui fotos de cuecas'. Baseado nos mesmos estudos comportamentais, evite dizer nosso, nós, como em 'nosso site tem fotos', fica melhor que diga 'este seu site tem fotos'. Conclusão: prefira o uso de você e seu ao uso de senhor e nosso/meu.
- A barra de rolagem pode ser utilizada
Não se importe se você criou uma página que ficou comprida e a barra de rolagem tenha que ser usada. A barra de rolagem pode ser utilizada pelo visitante, não se obrigue a criar uma página com tudo cabendo em 800 por 600 pixels, por exemplo, para que a barra de rolagem não seja necessária. Sua página pode ser comprida o bastante para conter um bom conteúdo, em toda parte dela.
- Não conte vantagens
Fuja da tentação de escrever que seu site tem a maior galeria de fotos da Internet ou que tem as últimas músicas gravadas por um tal cantor. Isto tudo é repelido mentalmente pelo seu visitante. Se você garantir com certeza que tem um ponto forte em certo aspecto, cumpra, ou corra o risco de não receber uma segunda visita deste internauta.
- Inclua testemunhos
Se você recebeu uma aprovação ou elogio, por exemplo, um e-mail ou uma nota no seu Livro de Visitas, use esse testemunho em sua página, com a fonte (peça a devida licença do autor pelo uso das palavras dele).
- Deixe claro o que for de acesso gratuito e o que for de acesso pago
Ou o que tiver direitos autorais, deve-se esclarecer e alertar o visitante quanto a isto. Também é conveniente e por vezes obrigatório comunicar expressamente alguma interdição ou restrição legal, como o caso de fotos com pornografia, fotos com menores, cenas chocantes ou violentas, etc.
- Prefira textos, não abarrote sua página de imagens
Os mecanismos de busca valem-se de textos para darem resultados às consultas feitas pelos internautas nos box de procura, apenas os sites de busca que oferecem procura de imagens têm condições de servirem-se de imagens. Isto porque além das keywords colodadas em meta, estes sites de busca também recorrem-se do material de sua página, basicamente dos textos contidos em sua página. Uma solução para quem quer apenas ter imagens numa página seria escrever o nome da imagem logo abaixo dela, para que os mecanismos de busca usem-se desta identificação para fazer a indexação. Por outro lado, você ao colocar apenas imagens, que demoram pouco ou muito a carregar, pode não contar com a paciência do visitante de aguardar o carregamento delas.
- Faça uma página inicial que carregue rápido
Sites profissionais têm página inicial que carrega rapidamente (em média 8 segundos em modem de 56K). Visitantes repelem páginas iniciais que demoram a carregar, deve-se esperar paciência apenas para as imagens de galerias de fotos pois neste caso o visitante tacitamente concorda que haverá certa demora na visualização.
- Tenha cuidado ao escolher cores para fundo e textos
Fundos com imagens que exigem a atenção tiram o foco sobre o texto. Fundos com cores fortes cansam os olhos pois necessitam de um texto contrastante de cor também forte. Procure uniformizar suas páginas com o uso da mesma imagem ou cor de fundo e as mesmas fontes e cores para os textos. Cores afetam o humor do visitante, devem ser escolhidas objetivando levá-lo a certo sentimento ou emoção. Cores como amarelo, vermelho ou laranja estimular sensações de sensualidade e felicidade. Azul ou roxo tem efeito calmante. Cores escuras como marrom ou preto conduzem a certa depressão.
- Sobre o uso de imagens animadas e contadores
Enquanto a colocação de muitas imagens animadas (contidas em banners ou em fotos) causam verdadeiramente uma demora no carregamento da página, o contador de visitas não causa demora, ou melhor, causa uma demora no carregamento da página de muito pouca importância. Prefira usar contadores do próprio site de hospedagem, caso não ofereça contadores, há vários gratuitos que você pode utilizar, como o CyberCount e o FastCounter. Caso lhe seja exigida colocação de banners muito provavelmente estes serão dispostos no local mais privilegiado da página, que é o topo. Se você puder, e nem sempre isso lhe é permitido, não coloque banners no topo, por duas principais razões: (1) é o local mais visto da página e (2) os search engines costumam indexar os banners e apresentar os sites do banner como resposta para consultas. Se você deve ter um banner no seu site, tenha UM, mas nunca maisde um, pois vai atrasar demais o carregamento da página. E se você puder escolher entre colocar um banner ou um pop-up, prefira o pop-up.
- Coloque link do seu e-mail
Inclua um link com seu e-mail para que seus visitantes possam entrar em contato com você. Se você não quer revelar o seu e-mail pessoal seria bom que criasse um endereço eletrônico unicamente para receber críticas, sugestões e mesmo colaboração como textos e fotos dos seus visitantes. E também o internauta saber que você não é um anônimo estabelece uma certa confiança e o fato de ter um link de e-mail ainda é um incentivo para uma futura visita, pois raciocina-se que você está aberto para compartilhar com a comunidade web.
- Evite colocar música de fundo
Muitos internautas estão navegando de noite e pode ser bem desagradável para eles entrar num site com música de fundo e de repente sujeitar-se a ter um repentino barulho num volume incerto. Se tiver que colocar uma música de fundo, ofereça ao visitante o controle de play para que o internauta decida se quer ouvir ou não.
- Consulte dicionário se não tem certeza como se escreve
Um site com erros de grafia demonstra que ou houve desinteresse em criar algo de bom ou houve burrice pura e simples. Devida a natureza humana ser como é, decide-se desde já pela segunda opção, e como isto é terrivelmente contagioso, o internauta afastará do seu site e não voltará e nem recomendará. E com certeza irá visitar sites que deêm mais respeito aos visitantes.