Minicursos - HTML

Principais Tags


Agora que as famosas tags já não são mais um mistério, vou falar um pouco sobre as principais delas. Para um arquivo ser considerado HTML e ser interpretado corretamente pelos navegadores, ele precisa conter algumas tags essenciais. São elas:

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

Se você utilizar um programa específico para criação de páginas HTML, ele já fará a inserção dessas tags obrigatórias automaticamente, mas ainda assim vou falar resumidamente sobre todas elas.

A tag <html> apenas diz ao navegador em que linguagem ele deve interpretar esse código.

A <head> fornece informações básicas sobre o documento, mas sempre com outras tags aninhadas. No exemplo acima coloquei a tag <title>, que permite que se defina um título para o documento. Criei o seguinte exemplo:

<html>
<head>
<title>Adicionando um título como exemplo</title>
</head>
<body>
</body>
</html>

Abrindo este código em um navegador, teremos:

Percebam que o texto inserido entre as tags <title> e </title>foi inserido na barra de título da página. A observação é que alguns navegadores, como o Firefox 7, já estão ocultando essa barra, portanto o texto não é exibido. Parece-me que isso é uma tendência, para que se libere mais espaço na tela para exibir a página. De qualquer forma, fica explicado!

Ainda dentro das tags <head> e </head>colocamos scripts feitos em outras linguagens, como Javascript, e também vinculamos arquivos de folhas de estilo, como as CSS. Essas são, basicamente, as funções dessas tags. Se você for um iniciante em HTML, não se preocupe com elas agora. Conforme for aprimorando seus conhecimentos, seja em CSS ou Javascript, vai fazendo uso disso com frequência e entendendo melhor seu funcionamento.

Entre as tags <body>e</body>colocamos o conteúdo da página. É aqui que todas as tags que estruturarão o documento deverão ser inseridas. Vou falar um pouco sobre elas, e, mesmo quando isso não for explícito, lembrem que todas as tags a seguir devem estar no corpo da página, portanto entre <body>e</body>,ok?

Bem, como toda página deve ter um cabeçalho, começarei pela sequência de tags referentes a isso.

<h1> e </h1>
<h2> e </h2>
<h3> e </h3>
<h4> e </h4>
<h5> e </h5>
<h6> e </h6>

A diferença visual entre elas é apenas o tamanho em que os textos serão apresentados, conforme imagem abaixo:

Como foi possível perceber, as tags <h>, criam cabeçalhos, ou seja, são indicadas para a inserção de títulos no documento. No entanto existem diferenças não visuais e muito importantes. A forma como os buscadores, como o Google, Yahoo, Altavista, dentre outros, criam os índices, leva em consideração estes cabeçalhos. Esses robôs de busca dão muito mais importância a um texto contido em uma tag<h1>do que em uma<h6>.

Depois de definidos os cabeçalhos, as páginas precisarão de parágrafos, e como já citei na página anterior sobre tags, o responsável por criar parágrafos é a tag<p>seguida do seu par de encerramento</p>

Ainda sobre formatação de textos temos as seguintes tags:

<i> e </i>
<b> e </b>

Lembrando que é possível aninhar várias tags, criando textos em negrito e itálico ao mesmo tempo. Vejam o exemplo:

<p>Tenho tantos lugares para ir hoje que estou em dúvida. Não sei se vou primeiro pro <b>Twitter</b>, <i>Facebook</i>, <b> <i>Orkut, MSN</i> </b>...</p>

Essa exibição nos trará a palavra Twitter em negrito, o Facebook em itálico e Orkut e MSN em negrito e itálico.

Uma tag que merece atenção por ser bastante útil é a tag<pre>. Se nós criarmos um parágrafo comum e inserirmos nele um texto longo, o navegador se encarregará de gerar as quebras de linha quando a página terminar. Mas e se quisermos, por exemplo, escrever um verso, com quebras de linha em locais específicos, como o trecho abaixo:

"Amor é fogo que arde sem se ver,
é ferida que dói e não se sente, 
é um contentamento descontente,
dor que desatina sem doer".

(Luiz Vaz de Camões)

A alternativa nada recomendada seria:

<p>"Amor é fogo que arde sem se ver,</p>
<p>é ferida que dói e não se sente,</p>
<p>é um contentamento descontente,</p>
<p>dor que desatina sem doer".</p>
<br>
<p>(Luiz Vaz de Camões)</p>

Horrível, certo? Bem, é aí que entra a tag<pre>. Com ela bastaria fazermos da seguinte forma:

<pre>
"Amor é fogo que arde sem se ver,
é ferida que dói e não se sente,
é um contentamento descontente,
dor que desatina sem doer".

(Luiz Vaz de Camões)
</pre>
Vejamos a exibição no navegador:

Muito melhor, certo? A tag<pre>permite que o texto seja exibido exatamente como estiver escrito no código, inclusive respeitando linhas em branco.

Para encerrar as tags referentes aos textos, é preciso citar a<br>. Ela insere uma linha em branco na página e, diferente das outras tags vistas, não necessita de um par de encerramento, ou seja, não existe tag</br>e o motivo para isso é óbvio: uma linha em branco é algo pontual, fácil de o navegador identificar e inserir sem gerar qualquer confusão sobre onde ela deve começar e terminar. As versões mais atuais do HTML usam o formato<br />com a barra após o identificador. Caso queira, você pode inserir diversas tags<br />seguidas, dessa forma:

<p>
"Amor é fogo que arde sem se ver,
<br>
<br>
<br>
<br>
<br>
é ferida que dói e não se sente, é um contentamento descontente, dor que desatina sem doer". (Luiz Vaz de Camões)
<p>

A página, no navegador, será:

As várias tags <br> geraram o espaço de várias linhas em branco entre a primeira frase do verso e o restante.
Essas são as tags de formatação de textos simples. No tópico seguinte falarei sobre a construção de tabelas.



Algumas notícias

O que acontece com o cérebro no exato momento em que morremos

O que passa em nossa cabeça no momento da morte? Não se sabe exatamente e, embora os cientistas tenham alguma resposta, a resposta continua sendo um grande mistério. Além de difícil solução, tentar respondê-la pode criar implicações éticas. No entanto, uma equipe de cientistas da Universidade...

Ler Notícia Completa

Operada e devolvida ao útero, menina que nasceu duas vezes hoje 'acorda sorrindo toda manhã'

Um bebê pode nascer duas vezes? Não é o caso da absoluta maioria das crianças, mas foi assim para a pequena Lynlee Boemer. Em outubro de 2015, sua mãe, Margaret Boemer, descobriu que estava grávida de gêmeos. Ela sofreu um aborto espontâneo, mas um dos bebês sobreviveu. Com dez semanas de ges...

Ler Notícia Completa

Médicos dizem estar perto de chegar a exame de sangue para todos os tipos de câncer

Cientistas dizem que estão mais perto de criar um exame de sangue universal, capaz de identificar todos os tipos de câncer. Estudo conduzido com 1.005 pacientes por uma equipe da Universidade Johns Hopkins, dos Estados Unidos, testou um método que detecta oito tipos de proteínas e 16 mutações ge...

Ler Notícia Completa

Formato JPEG está com os dias contados

Há quantos anos você ouve falar em arquivos JPG? O formato já era utilizado nos primórdios da web comercial nos anos 1990, vivendo há mais de 20 anos como o principal método de compressão de imagens do público. No que depender de Google, Mozilla e outras empresas, isso pode mudar dentro de algum...

Ler Notícia Completa

EUA aprovam 'droga viva', 1ª terapia contra câncer que reestrutura sistema imunológico do paciente

Os Estados Unidos aprovaram o primeiro tratamento que reestrutura o sistema imunológico do paciente para atacar o câncer. A agência reguladora de medicamentos do país - a FDA - diz que a decisão foi um momento "histórico" e que a medicina agora "entra em uma nova fronteira". A companhia Novar...

Ler Notícia Completa

Cientistas norte-americanos criaram anticorpo capaz de atacar 99% das variações de HIV

Um grupo formado por pesquisadores do Instituto Nacional de Saúde (NIH), dos Estados Unidos, e da empresa farmacêutica Sanofi criaram em laboratório anticorpos superdesenvolvidos capazes de atacar 99% das cepas de HIV. O feito é ainda mais significativo por ser capaz até mesmo de prevenir a infec...

Ler Notícia Completa

Facebook investirá mais de US$ 1 bilhão em conteúdo original em 2018

Anunciada em agosto, a plataforma original de vídeos do Facebook, Watch, parece ser a grande aposta de Mark Zuckerberg para o ano que vem. De acordo com o TechCrunch, a empresa deve investir US$ 1 bilhão para criar e incentivar iniciativas voltadas para a produção de conteúdo audiovisual exclu...

Ler Notícia Completa

Software da Adobe é capaz de manipular gravações de voz e criar frases com perfeição

O software se chama Voco, foi desenvolvido pela Adobe (a mesma criadora do Photoshop) e permite manipular gravações de voz com uma precisão inédita, inclusive criando frases que a pessoa não disse. Na demonstração do app, um técnico forjou uma gravação em que um homem dizia “eu beijei a Jordan...

Ler Notícia Completa

Games nos Jogos Olímpicos de 2024. Será?

Sabe aquela discussão sobre os jogos eletrônicos poderem ou não ser considerados esportes? Pois o comitê responsável pela realização dos Jogos Olímpicos de 2024 acaba de colocar mais um pouco de lenha nesta fogueira. Isso aconteceu através da divulgação de que eles gostariam de incorporar torne...

Ler Notícia Completa