Manual de HTML

helldanger1 · Jun 16, 2009

Manual de HTML. Tudo o que se necessita saber sobre HTML encontra-se dentro deste link. Aqui lhe esperam manuais muito interessantes que irão lhe orientar em sua aprendizagem.

helldanger1 · Jun 16, 2009

Prólogo ao manual de HTML
A quem se dirige este manual e as leituras aconselhadas antes de abordá-lo.

Por Miguel Angel Alvarez - Tradução de JML

Bem-vindos ao manual de HTML . Através de todos estes capítulos vamos descobrir a linguagem utilizada para a criação de páginas web: o Hyper Text Markup Language, mais conhecido como HTML.

À princípio, o fato de falar de uma linguagem informática pode fazer com que alguém se desanime, mas não é para se assustar, pois o HTML não deixa de ser mais que uma forma um tanto peculiar de dar formatos aos textos e imagens que pretendemos ver por meio de um navegador.

Antes de começarmos este manual, o qual faremos de uma forma direta e prática, lhe recomendamos fervorosamente a leitura prévia de nosso manual Desde zero. A partir deste guia, você aprenderá os conceitos básicos necessários para a criação de um web site. E também lhe permitirá acessar este manual já com alguns conhecimentos de base imprescindíveis sobre HTML, além de lhe deixar bem claro o que seu conhecimento contribui em relação ao simples uso de editores HTML.

As pessoas que enfocamos neste manual são todas aquelas que com conhecimentos mínimos de informática, desejam fazer mundialmente público uma mensagem, uma idéia ou uma informação, usando para isso o meio mais prático, econômico e atual: a Internet.

O que se necessita como base para se obter um bom aprendizado (além de ler o manual Desde zero) é:
Saber escrever com um teclado
Saber manusear um mouse
Ter vontade de aprender
O que se obterá depois de haver passado por estes capítulos:
Capacidade para criar e publicar seu próprio site web com um mínimo de qualidade
Conhecimentos de todo tipo sobre as tecnologias e ferramentas empregadas no âmbito da Rede
Possivelmente um interesse ou um gostar que pode se converter em paixão, e terminar em alguns casos, sendo um vício ou um trabalho.
Vale lembrar que estamos a sua inteira disposição para resover todo o tipo de dúvidas referentes a este manual. E para entrar em contato conosco é tão fácil como clicar sobre o e-mail do autor do artigo situado ao pé da página.

Passamos então, sem mais preâmbulos, a ver o que se trata o HTML...

helldanger1 · Jun 16, 2009

Introdução ao HTML

As primeiras coisas que você deve saber sobre HTML: história, objetivos e demais conhecimentos onde fixar as bases do manual.

Por Miguel Angel Alvarez - Tradução de JML

HTML é a linguagem com que se escrevem as páginas web. As páginas web podem ser vistas pelo usuário mediante um tipo de aplicação chamada navegador (browser). Podemos dizer portanto, que o HTML é a linguagem usada pelos navegadores para mostrar as páginas webs ao usuário, sendo hoje em dia a interface mais extensa na rede.

Esta linguagem nos permite aglutinar textos, imagens e áudios, e combiná-los a nosso gosto. Ademais, e é aqui onde está a sua vantagem em relação aos livros e revistas, o HTML nos permite a introdução de referências a outras páginas por meio dos links hipertextos.

O HTML se criou a princípio com objetivos de divulgação. Porém, não se pensou que a web chegaria a ser uma área de ócio com caráter multimídia, de modo que, o HTML se criou sem dar respostas a todos os possíveis usos que lhe dariam posteriormente e ao todo coletivo de gente que o utilizariam no futuro. Entretanto, frente a este deficiente planejamento, com o tempo, foram se incorporando modificações, as quais são os padrões do HTML. Numerosos padrões já se apresentaram. O HTML 4.01 foi o último padrão feito até o mês de abril de 2004.

Esta evolução tão anárquica do HTML, trouxe toda uma série de incovenientes e deficiências que tiveram que ser superadas com a introdução de outras tecnologias acessórias capazes de organizar, optimizar e automatizar o funcionamento das webs. Exemplos que podem soar como conhecidos são as CSS, JavaScript ou outros. Veremos mais adiante em que consistem algumas delas.

Alguns dos problemas que acompanham ao HTML é a diversidade de navegadores presentes no mercado, os quais não são capazes de interpretar o mesmo código de uma maneira unificada. Isto obriga ao webmaster a, uma vez criada sua página, comprovar que esta pode ser lida satisfatoriamente por todos os navegadores, ou pelo menos, pelos mais utilizados.

helldanger1 · Jun 16, 2009

Além do navegador necessário para ver os resultados de nosso trabalho, necessitamos evidentemente outra ferramenta capaz de criar a página em si. Um arquivo HTML (uma página) não é mais do que um texto. É por isso que para programar em HTML necessitamos um editor de textos.

É recomendável usar o bloco de notas que vem no Windows, ou outro editor de textos simples. No entanto, há de ter cuidado com alguns editores mais complexos como Wordpad ou MicrosoftWord, pois colocam seu próprio código especial ao salvar as páginas e como o HTML é unicamente texto plano, poderemos ter problemas com isso.

Existem outros tipos de editores específicos para a criação de páginas web, os quais oferecem muitas facilidades que nos permitem aumentar nossa produtividade. Porém, é aconselhável à princípio utilizar uma ferramenta, o mais simples possível para poder prestar a máxima atenção ao nosso código e familiarizarmos o antes possível com ele. Logo mais adiante, ganharemos tempo ao utilizarmos os editores mais versáteis.

Par ter mais claro todo o tema de editores e os tipos que existem, visite os artigos:
Editores de HTML
Bloco de notas
Também se pode acessar a descrições de editores mais complexos que o Bloco de notas, porém mais potentes como o Homesite.
É importante ter claro tudo isso visto que em função de seus objetivos, pode ser que mais do que aprender HTML, resulte mais interessante aprender o uso de uma aplicação para a criação de páginas.

Sendo assim, uma página é um arquivo onde está contido o código HTML em forma de texto. Estes arquivos tem extensão .html ou .htm (é indiferente qual deles utilizar). De modo que quando programarmos em HTML, o faremos com um editor de textos e salvaremos nossos trabalhos com extensão .html, por exemplo, minhapagina.html.

Conselho: Utilize sempre a mesma extensão em seus arquivos HTML. Isso evitará que você se confunda ao escrever os nomes dos seus arquivos umas vezes com .html e outras com .htm. E se você trabalha com uma equipe em um projeto, é ainda mais importante que todos estejam de acordo com a mesma extensão.

helldanger1 · Jun 16, 2009

Sintaxes do HTML

Descrição da sintaxe com a qual se trabalha na linguagem HTML.

Por Miguel Angel Alvarez - Tradução de JML

O HTML é uma linguagem que baseia sua sintaxe em um elemento de base que chamamos etiqueta (tag). A etiqueta apresenta frequentemente duas partes:

Uma abertura de forma geral <etiqueta>
Um fechamento do tipo </etiqueta>

Tudo que estiver incluído no interior desta etiqueta sofrerá as modificações que caracterizam a esta etiqueta. Como por exemplo:

As etiquetas <b> e </b> definem um texto em negrito. Se em nosso documento HTML escrevemos uma frase com o seguinte código:

<b>Isto está em negrito</b>

O resultado será:

Isto está em negrito

As etiquetas <p> e </p> definem um parágrafo. Se em nosso documento HTML escrevêssemos: <p>Olá, estamos no parágrafo 1</p>
<p>Agora mudamos de parágrafo</p>

O resultado seria:

Olá, estamos no parágrafo 1

Agora mudamos de parágrafo

helldanger1 · Jun 16, 2009

Partes de um documento HTML

Ademais de tudo isso, um documento HTML deve estar delimitado pela etiqueta <html> e </html>. Dentro deste documento, podemos ainda distinguir duas partes principais:

O cabeçalho, delimitado por <head> e </head> onde colocaremos etiquetas de índole informativo como por exemplo o título de nossa página.

O corpo, delimitado pelas etiquetas <body> e </body>, que será onde colocaremos nosso texto e imagens delimitados por sua vez por outras etiquetas como as que vimos anteriormente.

O resultado é um documento com a seguinte estrutura:

<html>

<head>

Etiquetas e conteúdos do cabeçalho

Dados que não aparecem em nossa página mas que são importantes para catalogá-la: Título, palavras-chaves, etc

</head>

<body>

Etiquetas e conteúdo do corpo

Parte do documento que será mostrada pelo navegador: Textos e imagens

</body>

</html>

As maiúsculas ou minúsculas são indiferentes ao escrever as etiquetas

As etiquetas podem ser escritas com qualquer tipo de combinação entre maiúsculas e minúsculas. Ou seja, <HTML> ou <HtMl> são a mesma etiqueta. Entretanto, é aconselhável acostumar-se a escrevê-las em minúscula já que outras tecnologias que podem conviver com nosso HTML (XML por exemplo) não são tão permissivas e nunca está mal ter bons costumes desde o princípio para evitar falhos triviais no futuro.

helldanger1 · Jun 16, 2009

Sua primeira página

Vamos ver como se faz uma página muito simples em HTML, que serve de prática aos novatos.

Por Miguel Angel Alvarez - Tradução de JML

Podemos já com estes conhecimentos, e mais algum outro, criar nossa primeira página. Para isso, abra seu editor de textos e, copie e cole o seguinte texto em um novo documento:

<html>

<head>
<title>Cozinha Para Todos</title>
</head>

<body>
<p><b>Bem-vindo,</b></p>
<p>Você está na página<b>Comida para todos</b>.</p>
<p>Aqui você aprenderá receitas fáceis e deliciosas.</p>
</body>

</html>

Agora salve este arquivo com extensão .html ou .htm em seu disco rígido. Para isso, acessamos no menu "Arquivo" e selecionamos a opção "Salvar como". Na janela escolhemos o diretório onde desejamos salvá-lo e colocaremos um nome para ele, como por exemplo: minha_página.html.
Conselho: Utilize nomes em seus arquivos que tenham algumas normas básicas para poupar alguma confusão ou desgosto.
Nosso conselho é que não utilize acentos, nem espaços, nem outros caracteres raros. Também lhe ajudará escrever sempre as letras em minúsculas.
Isto não quer dizer que se deve fazer nomes de arquivos curtos, é melhor fazê-los descritivos para que se possa lembrar o que há dentro. Algum caractere como o traço "-" ou o traço baixo "_" lhe pode ajudar a separar as palavras. Por exemplo: quem_somos.html

helldanger1 · Jun 16, 2009

Com o documento HTML criado, podemos ver o resultado obtido através de um navegador. Chegado a este ponto, é conveniente, insistir no fato de que nem todos os navegadores são idênticos. Infelizmente, os resultados de nosso código podem mudar de um para outro, sendo por isso aconselhável visualizar a página em vários navegadores. Geralmente usam-se Internet Explorer e Netscape como referências já que são os mais extensos.

Na verdade, no momento em que estas linhas são escritas, o Internet Explorer monopoliza a maioria imensa de usuários (mais ou menos 90%) e o Netscape está relegado a um segundo plano. Isto não quer dizer que devemos deixá-lo de lado já que o 10% de visitas que este pode nos proporcionar, pode resultar muito importante para nós. Por outro lado, parece que já se tornou pública a intenção do Netscape de desviar um pouco seus negócios para outros rumos e abandonar esta chamada "luta de navegadores" na qual estava recebendo a pior parte.

Então, voltando ao tema, uma vez criado o arquivo .html ou .htm, podemos visualizar o resultado de nosso trabalho abrindo a página criada com um navegador. Para isso, dependendo do navegador a forma de fazer será diferente.

Se estamos usando o Explorer, temos de ir à barra de menu, selecionar "Arquivo" e em seguida "Abrir". Uma janela irá se abrir. Clicamos sobre o botão "Examinar" e acessamos uma janela a partir da qual poderemos nos mover pelo interior do nosso disco rígido até encontrar o arquivo que desejamos abrir.

A coisa não é mais difícil com o Netscape. Neste caso, temos de ir também à barra de menu principal e selecionarmos File e logo, Open File. A mesma janela de busca nos permitirá examinar o conteúdo de nosso PC até dar com o arquivo procurado.

Nota: Também se pode abrir o arquivo acessando o diretório onde ele está salvo. Nele se pode encontrar seu arquivo HTML e ver que possui como ícone o logotipo de Netscape ou o do Internet Explorer. Para abrí-lo simplesmente fazemos um clique duplo sobre ele.

helldanger1 · Jun 16, 2009

Uma vez aberto o arquivo, já poderá ver sua primeira página web. Algo simples mas que já é um começo. E que em pouco tempo, já verá como será capaz de melhorar sensivelmente.

Observe a parte superior esquerda da janela do navegador e poderá comprovar a presença do texto delimitado pela etiqueta <title>. Esta é uma das funções desta etiqueta, cujo principal incubência é o de servir de referência nos motores de busca como Altavista ou Yahoo.

Por outro lado, os elementos que colocamos entre a etiqueta <body> e </body> se podem ver no espaço reservado para o corpo da página.

Se agora dermos um clique no botão direito do mouse sobre a página e selecionarmos "Ver código fonte" (ou View page source), veremos como que numa janela acessória aparece o código de nossa página. Este recurso é de extrema importância já que nos permite ver o tipo de técnicas empregadas por outros para a confecção de suas páginas.

Com tudo isso assimilado já estamos em condições de aprofundarmos um pouco mais na descrição de algumas das etiquetas mais usadas do HTML.
Possível problema: Ao utilizar o Bloco de Notas no Windows em algumas ocasiões, mesmo lhe dizendo que é um arquivo .html, o documento se salva como se fosse um texto e não uma página web. O que está acontecendo é que o Bloco de Notas tem pré-determinado salvar seus arquivos com extensão .txt e por isso, na realidade o que ele está salvando no disco rígido é minha_pagina.html.txt.

Para conseguir ter o controle das extensões no Bloco de Notas e no Windows em geral podemos acessar ao "Meu computador" e no menu de "Ver", selecionar "Opções de pasta". Na janela que aparece clicamos na opção "Ver" e nos permite desabilitar uma caixa de seleção que põe como "Ocultar extensões para os tipo de arquivos conhecidos". (assim se faz no Win98, mas pode variar um pouco em outras versões do Windows)
Com isso conseguiremos ver sempre a extensão do arquivo com o qual estamos trabalhando e fazer com que o Bloco de Notas atenda o que estamos lhe solicitando quando gravamos com outra extensão que não seja .txt.

helldanger1 · Jun 16, 2009

Formato de parágrafos em HTML

Como colocar parágrafos e saltos de linha em páginas web. Também vemos os cabeçalhos como parágrafos que servem de título.

Por Miguel Angel Alvarez - Tradução de JML

Nos capítulos anteriores apresentamos a título de exemplo, algumas etiquetas que permitem dar formato ao nosso texto. Neste capítulo veremos com mais detalhe, as etiquetas mais amplamente utilizadas e exemplificaremos algumas delas posteriormente.

Formatar um texto passa por tarefas tão evidentes como definir os parágrafos, justificá-los, introduzir marcadores, numerações, ou pôr em negrito, itálico, etc.

Vimos que para definir os parágrafos utilizamos a etiqueta <p> que introduz um salto e deixa uma linha em branco antes de continuar com o resto do documento.

Podemos também utilizar a etiqueta <br>, da qual não existe seu fechamento correspondente (</br>), para realizar um simples enter, com o que não deixamos uma linha em branco, e sim, somente mudamos de linha.
Nota: Existem outras etiquetas que não têm seu correspondente de fechamento, como <img> para as imagens, que veremos mais adiante. Isto ocorre porque um salto de linha ou uma imagem não começam e acabam mais adiante, simplesmente só têm presença em um lugar pontual.

Podemos comprovar que mudar de linha em nosso documento HTML sem introduzir algumas dessas ou de outras etiquetas não implica em absoluto uma mudança de linha na página visualizada.

Na realidade o navegador introduzirá o texto e não mudará de linha a não ser que esta chegue a seu fim ou se o especifiquemos com a etiqueta correspondente.

helldanger1 · Jun 16, 2009

Os parágrafos delimitados por etiquetas <p> podem ser facilmente justificados à esquerda, ao centro ou à direita, especificando tal justificação no interior da etiqueta por meio de um atributo align. Um atributo não é mais do que um parâmetro incluído no interior da etiqueta que ajuda a definir o funcionamento da etiqueta de uma forma mais pessoal. Veremos ao longo deste manual uma quantidade de atributos muito úteis para todo tipo de etiquetas.

Então, se desejássemos introduzir um texto alinhado à esquerda escreveríamos:

<p align="left">Texto alinhado à esquerda</p>

O resultado seria:

Texto alinhado à esquerda

Para uma justificação ao centro:

<p align="center">Texto alinhado ao centro</p>

Que seria:

Texto alinhado ao centro

Para justificar à direita:

<p align="right">Texto alinhado à direita</p>

Cujo efeito seria:

Texto alinhado à direita

Como se vê, em cada caso o atributo align toma determinados valores que são escritos entre aspas. Em algumas ocasiões necessitamos especificar alguns atributos para o funcionamento correto da etiqueta. Em outros casos, o próprio navegador toma um valor definido por padrão. Para o caso de align, o valor padrão é left.
Nota: Os atributos têm seus valores indicados entre aspas ("), mas se não os indicamos entre aspas, também funcionará na maioria dos casos. Entretanto, é aconselhável que ponhamos sempre as aspas para acostumarmos a utilizá-las, por dar homogeneidade aos nossos códigos e para evitar erros futuros em sistemas mais meticulosos.

helldanger1 · Jun 16, 2009

O atributo align não é exclusivo da etiqueta <p>. Outras etiquetas muitos comuns, que veremos mais adiante, entre as quais se introduzem texto ou imagens, costumam fazer uso deste atributo de forma habitual.

Imaginemos um texto relativamente longo onde todos os parágrafos estão alinhados à esquerda (por exemplo). Uma forma de simplificar nosso código e de evitar introduzir continuamente o atributo align sobre cada uma de nossas etiquetas é utilizando a etiqueta <div>.

Esta etiqueta por si só não serve para nada. Tem que estar acompanhada do atributo align e o que nos permite é alinhar qualquer elemento (parágrafo ou imagem) da maneira que nós desejarmos.

Assim, o código: <p align="left">paragrafo1</p>
<p align="left">parágrafo2</p>
<p align="left">paragrafo3</p>

É equivalente a:

<div align="left">
<p>paragrafo1</p>
<p>paragrafo2</p>
<p>paragrafo3</p>
</div>

Como vimos, a etiqueta <div> marca divisões nas quais definimos um mesmo tipo de alinhado.

Exemplo prático:

Para praticar um pouco o que acabamos de ver, vamos propor um exercício que se pode resolver no seu computador. Simplesmente queremos construir uma página que tenha, por esta ordem:

2 parágrafos centralizados
3 parágrafos à direita
Um salto triplo de linha
1 parágrafo alinhado à esquerda

Não vamos escrever nesta ocasião o código fonte do exercício. Podemos vê-lo em funcionamento em nosso navegador e na janela podemos obter o código fonte selecionando no menu Exibir a opção Código fonte.

helldanger1 · Jun 16, 2009

Cabeçalhos

Existem outras etiquetas para definir parágrafos especiais, formatados como títulos. São os cabeçalhos ou Header em inglês. Como dissemos, são etiquetas que formatam o texto como um título, para o qual atribuem um tamanho maior de letra e colocam o texto em negrito.

Existem vários tipos de cabeçalhos que se diferenciam no tamanho da letra que utilizam. A etiqueta em concreto é a <h1>, para os cabeçalhos maiores, <h2> para os de segundo nível e assim, até <h6> que é o cabeçalho menor.

Os cabeçalhos implicam também uma separação em parágrafos, portanto, tudo o que for escrito dentro de <h1> e </h1> (ou qualquer outro cabeçalho) será colocado em um parágrafo independente.

Podemos ver como se apresentam alguns cabeçalhos a seguir:

<h1>Cabeçalho de nível 1</h1>

Será visto dessa maneira na página:

Cabeçalho de nível 1

Os cabeçalhos, como outras etiquetas de html, suportam o atributo align. Vejamos um exemplo de cabeçalho de nível 2 alinhado ao centro:

<h2 align="center">Cabeçalho de nível 2</h2>

Será visto dessa maneira na página:

Cabeçalho de nível 2

helldanger1 · Jun 16, 2009

Outro exercício interessante é construir uma página web que contenha todos os cabeçalhos possíveis. Pode-se ver a seguir:

<html>
<head>
<title>Todos os cabeçalhos</title>
</head>

<body>

<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>

</body>

</html>

Conselho: Não devemos utilizar as etiquetas do cabeçalho para formatar o texto, ou seja, se queremos colocar um tipo de letra maior e em negrito, devemos utilizar as etiquetas que existem para isso (que veremos em seguida). Os cabeçalhos são para colocar títulos em páginas web e é o navegador o responsável de formatar o texto de maneira que pareça um título. Cada navegador então, pode formatar o texto ao seu gosto contanto que pareça um título.

helldanger1 · Jun 16, 2009

Formatando o texto

Vemos como colocar em negrito, itálico, sublinhado, subscrito e sobrescrito.

Por Miguel Angel Alvarez - Tradução de JML

Além de tudo relativo à organização dos parágrafos, um dos aspectos primordiais da formatação de um texto, é o da própria letra. É muito comum e prático, apresentar o texto ressaltado em negrito, itálico e outros. Paralelamente, o uso de índices e subíndices é vital para a publicação de textos científicos. Tudo isso e muito mais, é possível por meio do HTML a partir de uma série de etiquetas entre as quais vamos destacar algumas.

Negrito

Podemos escrever o texto em negrito o incluindo dentro das etiquetas <b> e </b> (bold). Esta mesma tarefa é desempenhada por <strong> e </strong> sendo ambas equivalentes. Nós nos inclinamos pelas primeiras por uma simples razão de esforço.

Escrevendo um código deste tipo:

<b>Texto em negrito</b>

Obteremos este resultado: Texto em negrito
Nota: Qual a diferença entre <b> e <strong>? Apesar das duas etiquetas fazerem o mesmo efeito, há uma peculiaridade que as fazem distintas. A etiqueta <b> indica negrito, enquanto que a etiqueta <strong> indica que se deve escrever ressaltado. Os navegadores interpretam o HTML segundo seu critério, é por isso que se podem ver as páginas de distintas maneiras em uns browsers e outros. A etiqueta <h1> quer dizer "cabeçalho de nível 1", o navegador é o responsável de formatar o texto de maneira que pareça um cabeçalho de primeiro nível. Na prática, os cabeçalhos do Internet Explorer e do Netscape são muito parecidos (tamanho de letra grande e em negrito), mas outro navegador poderia colocar os cabeçalhos sublinhados se lhe parecesse oportuno.

helldanger1 · Jun 16, 2009

Itálico

Também neste caso existem duas possibilidades, uma curta: <i> e </i> (italic) e outra um pouco mais longa: <em> e </em>. Neste manual, e na maioria das páginas que se vê por aí, é normal encontrar com a primeira forma que é sem dúvida mais simples para escrever e para se lembrar.

Abaixo, um exemplo de texto em itálico:

<i>Texto em itálico</i>

Que dá o seguinte efeito:

Texto em itálico

Sublinhado

O HTML nos propõe também para o sublinhado as etiquetas: <u> e </u> (underline). Entretanto o uso do sublinhado deve ser usado com muita precaução visto que os links hipertextos vão, a não ser que se indique o contrário, sublinhados com o que podemos confundir o leitor e afastá-lo do verdadeiro interesse de nosso texto.

Subscrito e sobrescrito

Este tipo de formato é de extrema utilidade para textos científicos. As etiquetas empregadas são:

<sup> e </sup> para os sobrescritos
<sub> e </sub> para os subscritos

Temos aqui um exemplo:

A <sup>13</sup>CC<sub>3</sub>H<sub>4</sub>CINOS é um heterociclo alergeno enriquecido

O resultado seria:

A ¹³CC3H4CINOS é um heterociclo alergeno enriquecido.

helldanger1 · Jun 16, 2009

Combinar etiquetas

Todas estas etiquetas, incluindo as que já vimos e as que ainda vamos ver, podem ser combinadas estando umas dentro das outras de forma que conseguimos resultados diferentes. Assim, podemos sem nenhum problema criar um texto em negrito e em itálico colocando uma etiqueta dentro da outra:

<b>Isto só está em negrito<i>e isto em negrito e itálico</i></b>

Isto daria:

Isto só está em negrito e isto em negrito e itálico
Conselho: Para unir etiquetas HTML, faça corretamente. Referimo-nos a que se você abre uma etiqueta dentro de outra mais principal, antes de fechar a etiqueta principal feche as etiquetas que você tiver aberto dentro dela.

Devemos evitar códigos como o seguinte:
<b>Isto está em negrito e <i>itálico</b></i>

A favor de códigos com etiquetas corretamente colocadas:
<b>Isto está em negrito e<i>itálico</i></b>

Isto é muito aconselhável, ainda que os navegadores entendam bem as etiquetas mal colocadas, por duas razões:

1. Sistemas como XML não são tão permissivos com estes erros e pode que no futuro nossas páginas não funcionem corretamente.
2. Leva muito tempo de processamento para os navegadores resolverem este tipo de erro, inclusive mais do que construir a própria página, por isso devemos evitar-lhes que sofram por uma má codificação.

helldanger1 · Jun 16, 2009

Cor, tamanho e tipo de letra

Continuamos o aprendizado sobre as etiquetas que nos servem para formatar o texto.

Por Miguel Angel Alvarez - Tradução de JML

Apesar de que por razões de homogeneidade e simplicidade de código estes tipos de formatos são controlados atualmente por folhas de estilo cascata (das quais já teremos tempo de falar), existe uma forma clássica e direta de definir cor, tamanho e tipo de letra de um determinado texto.

Isto se faz a partir da etiqueta <font> e seu fechamento correspondente. Dentro desta etiqueta devemos especificar os atributos correspondentes a cada um destes parâmetros que desejamos definir. A seguir comentamos os atributos principais desta etiqueta:

Atributo face

Define o tipo de letra. Este atributo é interpretado por versões do Netscape a partir da 3 e de MSIE 3 ou superiores. Outros navegadores as ignoram completamente e mostram o texto com a fonte que utilizam.

Deve-se ter cuidado com este atributo já que cada usuário, dependendo da plataforma que utilize, pode não dispor dos mesmos tipos de letra que nós com o que, se nós escolhemos um tipo do que não dispõe, o navegador se verá forçado a mostrar o texto com a fonte que utiliza por padrão (que costuma ser Times New Roman). Para evitar isso, dentro do atributo costuma-se selecionar vários tipos de letras separados por vírgulas. Neste caso, o navegador comprovará que dispõe do primeiro tipo numerado e se não for assim, passará para o segundo e assim sucessivamente até encontrar um tipo que possua ou então, até acabar a lista e colocar a fonte padrão. Vejamos um exemplo:

<font face="Comic SansMS,arial,verdana">Este texto tem outra tipografia</font>

Que se visualizaria assim em uma página web:

Este texto tem outra tipografia
Nota: Aqui temos um exemplo de atributo cujo valor deve estar limitado entre aspas (").
Havíamos dito que as aspas eram opcionais nos atributos, entretanto isto não é assim sempre. Se o valor do atributo contém espaços, como é o caso de:

face="Comic Sans MS,arial,verdana"

devemos colocar as aspas para limitá-lo. Em caso de não ter aspas

face=Comic Sans MS,arial, verdana

se entenderia que face=Comic, mas não se levaria em conta tudo o que segue, porque o HTML não o associaria ao valor atributo. Neste caso o HTML pensaria que as seguintes palavras (depois do espaço) são outros atributos, mas como não os conhece como atributos simplesmente iria ignorá-los.

helldanger1 · Jun 16, 2009

Atributo size

Define o tamanho da letra. Este tamanho pode ser absoluto ou relativo.

Se falarmos em términos absolutos, existem 7 níveis de tamanhos distintos numerados de 1 a 7 por ordem crescente. Escolheremos portanto um valor size="1" para a menor letra ou size="7" para a maior.

<font size=4>Este texto é maior</font>

Que se visualizaria assim em uma página web:

Este texto é maior

Podemos também modificar o tamanho de nossa letra em relação ao do texto mostrado anteriormente definindo o número de níveis que queremos subir ou descer nesta escala de tamanhos por meio do signo + ou - . Desse modo, se definimos nosso atributo como size="+1" o que queremos dizer é que aumentamos um nível o tamanho da letra. Se estávamos escrevendo previamente em 3, passaremos automaticamente a 4.

Os tamanhos reais que vermos na tela dependerão da definição e do tamanho da fonte escolhido pelo usuário no navegador. Este tamanho de fonte pode ser definido no Explorer indo ao menu superior, Exibir/Tamanho da fonte. No Netscape escolheremos View/Text Size. Esta flexibilidade pode acabar sendo embaraçosa para nós em mais de uma ocasião, já que em muitos casos desejaremos que o tamanho do texto permaneça constante para que este caiba em um determinado espaço. Veremos em seu momento que esta pré-fixação do tamanho pode ser realizada pelas folhas de estilo em cascata

helldanger1 · Jun 16, 2009

Atributo cor

A cor do texto pode ser definida através do atributo cor. Cada cor é por sua vez definida por um número hexadecimal que está composto por três partes. Cada uma destas partes representa a contribuição do vermelho, verde e azul à cor em questão.

Por outro lado é possível definir de uma maneira imediata algumas das cores mais freqüentemente usadas para as que se criaram um nome mais memotécnico:

Nombre
Aqua
Black
Blue
Fuchsia
Gray
Green
Lime
Maroon
Navy
Olive
Purple
Red
Silver
Teal
White
Yellow

<font color="red">Este texto está em vermelho</font>

Que se visualizaria assim em uma página web:

Este texto está em vermelho

Manual de HTML

GForum VIP

GForum VIP

GForum VIP

GForum VIP

GForum VIP

GForum VIP

GForum VIP

GForum VIP

GForum VIP

GForum VIP

GForum VIP

GForum VIP

GForum VIP

GForum VIP

GForum VIP

GForum VIP

GForum VIP

GForum VIP

GForum VIP

GForum VIP