Conheça o Júlio Battisti

Julio Battisti - Autor de mais de 25 livros de informática Júlio Battisti tem mais de 50 livros publicados, centenas de e-books e é certificado Microsoft.

SAIBA MAIS...

Loja Virtual do Site

Curta Nossa Fanpage

« Lição anterior

Δ Página principal

¤ Capítulos

Próxima lição »

ASP.NET - CURSO COMPLETO
Autor: Júlio Battisti

Lição 135 - Anexo 1 - Relação das principais tags do HTML utilizadas nos exemplos do livro

Neste tópico apresentaremos uma relação das tags mais utilizadas. São tags para pequenos ajustes na página, tais como inserir uma quebra de linha, colocar um texto em negrito, criar uma tabela, etc.

As tags para criação de títulos.

Existe uma série de tags para a criação de títulos. Estas tags possuem tamanhos e formatações variadas. A seguir temos o exemplo de uma destas tags:

<H3>  Texto do título </H3>

Na Listagem I.3 temos um exemplo onde são utilizadas as diversas tags de títulos disponívies.

Listagem I.3 – Inserindo títulos na página.

<html>

<head>
         <title>Exemplo de títulos  !!</title>
   </head>

<body>

      <h1>Esta é uma tag h1</h1>
         <h2>Esta  é uma tag h2</h2>
         <h3>Esta  é uma tag h3</h3>
         <h4>Esta  é uma tag h4</h4>
         <h5>Esta  é uma tag h5</h5>
         <h6>Esta  é uma tag h6</h6>

</body>
   </html>

Na Figura I.1 temos o resultado desta página.

Curso Completo de ASP.NET - Anexo 1 - Julio Battisti
Figura I.1 Diferentes formatos para o título da página.

Tags para a criação de tabelas.

Em diversos exemplos deste livro utilizamos tabelas para facilitar o alinhamento dos controles de um formulário. Para entender facilmente as tags para a criação de tabela, basta pensarmos na tabela como uma coleção de linhas e em cada linha como uma coleção de células.

Para criar uma tabela utilizamos a tag:

<table> e </table>

Para criarmos uma linha, utilizamos as tags <hr></hr>:

<table> 
               <tr>
               </tr>

            <tr>
               </tr>
               <tr>
               </tr>
   </table>

Neste caso temos uma tabela com três linhas. O passo final é definir quantas colunas teremos em cada linha. No exemplo a seguir vamos definir duas células por linha. O resultado prático é que teremos uma tabela com três linhas e duas colunas. Para adicionar células a uma linha, utilizamos as tags <td>/<td>. Entre estas duas tags colocamos o conteúdo da célula. Observe o exemplo da listagem I.4.

Listagem I.4 – Criando uma tabela simples.

<html>

<head>
         <title>Exemplo  de criação de tabela.</title>
   </head>

<body>
   <table  border="1"> 
               <tr>
                           <td>Linha 1, Coluna  1</td>
                           <td>Linha  1, Coluna 2</td>
               </tr>

            <tr>
                           <td>Linha 2, Coluna  1</td>
                           <td>Linha  2, Coluna 2</td>
               </tr>

            <tr>
                           <td>Linha  3, Coluna 1</td>
                           <td>Linha  3, Coluna 2</td>
               </tr>
   </table>
   </body>
   </html>

Na Figura I.2 temos o resultado desta página.

Curso Completo de ASP.NET - Anexo 1 - Julio Battisti
Figura I.2 Tabela criada com HTML.

Observe que utilizamos o atributo border, para definir o tamanho das bordas (linhas de grade) da tabela.

Podemos definir que uma tabela deva ocupar uma porcentagem específica da janela do navegador, tanto na horizontal quanto na vertical:

<table  border="1" width="90%" height="50%">

Mesmo que o usuário maximize, restaure ou redimensione a janela, o navegador irá manter as proporções especificadas nesta tag.

Para definir uma cor de fundo para a tabela, utilizamos o atributo bgcolor, conforme exemplo a seguir:

<table  border="1" bgcolor="#c0c0c0">

Podemos definir a cor de segundo plano, individualmente, para uma única célula, utilizando o atributo bgcolor para a tag <td> que define a célula:

<td  bgcolor="#ff0000">Conteúdo da célula</td>

Podemos mesclar células utilizando os atributos:

colspan="número de colunas a ser mescladas"

rowspan="número de linhas a ser mescladas"

Observe o exemplo da listagem I.5.

Listagem I.5 – Mesclando linhas e colunas.

<html>

<head>
   <title>Mesclando  linhas e colunas!</title>
   </head>

<body>

<table border="1">
   <tr>
       <td colspan="2">Mesclando duas  colunas</td>
   </tr>

<tr>
        <td>Linha 2, Coluna 1</td>
       <td  rowspan="2">Meslando duas linhas</td>
   </tr>

<tr>
        <td>Linha 3, Coluna 1</td>
   </tr>

</table>
   </body>
   </html>

Na Figura I.3 temos o resultado desta página.

Curso Completo de ASP.NET - Anexo 1 - Julio Battisti
Figura I.3 Mesclando linhas e colunas.

Inserindo uma linha horizontal

Também utilizamos, em diversos exemplos, a tag <HR>. Esta tag insere uma linha horizontal na página. Existe alguns atributos que podem ser utilizados para definir o formato da linha:

<hr align="left"  size="5"  color="#FF0000">

Neste exemplo criamos uma linha com alinhamento à esquerda, com espessuara de 5 pixels e de cor vermelha. A tag <HR>, automaticamente, insere uma quebra de linha.

Tags para formatação básica do texto.

Existe um conjunto de tags que permite a definição de efeitos como negrito, itálico e sublinhado.

No exemplo da Listagem I.6 utilizamos diversas tags para formatação de texto.

Listagem I.6 – Formatação de texto com o HTML.

<html>

<head>
   <title>Tags  para formatação de texto</title>
   </head>

<body>

<h2>Formatação  de texto:</h2>

<p><B>Este  texto em negrito</strong></B>

<p><I>Este  texto em itálico</I></p>

<p><U>Este  texo sublinhado</U></p>

<p><B><I>Este  texto em negrito e itálico</B></I></p>

</body>
   </html>

Na Figura I.4 temos o resultado desta página.

Curso Completo de ASP.NET - Anexo 1 - Julio Battisti
Figura I.4 Formatação básica de texto.

Utilizamos as seguintes tags:

: Negrito
 : Itálico
: Sublinhado

Observe que é possível combinar duas ou mais tags para aplicar múltiplas formatações. A tag é utilizada para a definição de parágrafo. Ao fecharmos a tag () será feita uma quebra automática de linha.

Formatação de fonte.

Utilizamos a tag para definir algumas características da fonte, como por exemplo:

Cor da fonte
Tipo de fonte
Tamanho

No exemplo da Listagem I.7 utilizamos a tag para formatar texto.

Listagem I.7 – Formatação de texto com a tag .

<html>

<head>
   <title>Tags  para formatação de fonte!</title>
   </head>

<body>

<h2>Formatação  de texto:</h2>

<p>
   <font  face="Arial" size="6" color="#FF0000">
                   Fonte arial, cor vermelha e  tamanho 6
   </font>
   </p>

<p>
   <font  face="Arial" size="4" color="#0000FF">
                   Fonte arial, cor azul e  tamanho 4
   </font>
   </p>

<p>
   <font  face="Arial" size="3" color="#00FF00">
                   Fonte arial, cor vermelha e  tamanho 3
   </font>
   </p>

<p>
   <font  face="Arial" size="2" color="#FF8000">
                   Fonte arial, cor laranha e  tamanho 2
   </font>
   </p>

</body>
   </html>

Na Figura I.5 temos o resultado desta página.

Curso Completo de ASP.NET - Anexo 1 - Julio Battisti
Figura I.5 Formatação básica de fonte.

A tag <A></A>.

Esta tag é utilizada para criar links em uma página HTML.

No exemplo da Listagem I.8 utilizamos a tag <A></A> para criar alguns links.

Listagem I.8 – Criando links com a tag <A></A>.

<html>

<head>
   <title>Criação de links!</title>
   </head>

<body>

<h2>Livros  do autor Júlio Battisti:</h2>

<ul>
     <li>
   <a  href="https://juliobattisti.com/livros/windows2000.htm">
                   Windows 2000 Server
   </a>
     </li>
     
     <li>
   <a  href="https://juliobattisti.com/livros/asp3.htm">
                   ASP 3.0
   </a>
     </li>
     
     <li>
   <a  href="https://juliobattisti.com/livros/sql2000.htm">
                   SQL Server 2000
   </a>
     </li>
   </ul>