HTML: diseños

El diseño de una página web es muy importante para darle una mejor apariencia a su sitio web. Se necesita un tiempo considerable para diseñar el diseño de un sitio web con una gran apariencia.

Hoy en día, todos los sitios web modernos utilizan CSS y un marco basado en JavaScript para crear sitios web dinámicos y receptivos, pero puede crear un buen diseño utilizando tablas HTML simples o etiquetas de división en combinación con otras etiquetas de formato. Este capítulo le dará algunos ejemplos sobre cómo crear un diseño simple pero funcional para su página web usando HTML puro y sus atributos.

Diseño HTML: uso de tablas

La forma más sencilla y popular de crear diseños es utilizando la etiqueta HTML <table>. Estas tablas están organizadas en columnas y filas, por lo que puede utilizar estas filas y columnas de la forma que desee.

Ejemplo

Por ejemplo, el siguiente ejemplo de diseño HTML se logra usando una tabla con 3 filas y 2 columnas, pero la columna de encabezado y pie de página abarca ambas columnas usando el atributo colspan:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Layout using Tables</title>
   </head>

   <body>
      <table width = "100%" border = "0">
         
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <h1>This is Web Page Main title</h1>
            </td>
         </tr>
         <tr valign = "top">
            <td bgcolor = "#aaa" width = "50">
               <b>Main Menu</b><br />
               HTML<br />
               PHP<br />
               PERL...
            </td>
            
            <td bgcolor = "#eee" width = "100" height = "200">
               Technical and Managerial Tutorials
            </td>
         </tr>
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <center>
                  Copyright © 2007 Tutorialspoint.com
               </center>
            </td>
         </tr>
         
      </table>
   </body>

</html>

Esto producirá el siguiente resultado:

Diseño de varias columnas: uso de tablas

Puede diseñar su página web para colocar su contenido web en varias páginas. Puede mantener su contenido en la columna del medio y puede usar la columna de la izquierda para usar el menú y la columna de la derecha se puede usar para poner publicidad o algunas otras cosas. Este diseño será muy similar al que tenemos en nuestro sitio web tutorialspoint.com.

Ejemplo

Aquí hay un ejemplo para crear un diseño de tres columnas:

<!DOCTYPE html>
<html>

   <head>
      <title>Three Column HTML Layout</title>
   </head>

   <body>
      <table width = "100%" border = "0">
         
         <tr valign = "top">
            <td bgcolor = "#aaa" width = "20%">
               <b>Main Menu</b><br />
               HTML<br />
               PHP<br />
               PERL...
            </td>
				
            <td bgcolor = "#b5dcb3" height = "200" width = "60%">
               Technical and Managerial Tutorials
            </td>
				
            <td bgcolor = "#aaa" width = "20%">
               <b>Right Menu</b><br />
               HTML<br />
               PHP<br />
               PERL...
            </td>
         </tr>
         
      <table>
   </body>

</html>

Esto producirá el siguiente resultado:

Diseños HTML: uso de DIV, SPAN

El elemento <div> es un elemento de nivel de bloque que se utiliza para agrupar elementos HTML. Mientras que la etiqueta <div> es un elemento de nivel de bloque, el elemento HTML <span> se usa para agrupar elementos a nivel de línea.

Aunque podemos lograr diseños bastante agradables con tablas HTML, las tablas no fueron realmente diseñadas como una herramienta de diseño. Las tablas son más adecuadas para presentar datos tabulares.

Note - Este ejemplo hace uso de la hoja de estilo en cascada (CSS), por lo que antes de comprender este ejemplo, debe comprender mejor cómo funciona CSS.

Ejemplo

Aquí intentaremos lograr el mismo resultado usando la etiqueta <div> junto con CSS, lo que sea que haya logrado usando la etiqueta <table> en el ejemplo anterior.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Layouts using DIV, SPAN</title>
   </head>

   <body>
      <div style = "width:100%">
		
         <div style = "background-color:#b5dcb3; width:100%">
            <h1>This is Web Page Main title</h1>
         </div>
			
         <div style = "background-color:#aaa; height:200px; width:100px; float:left;">
            <div><b>Main Menu</b></div>
            HTML<br />
            PHP<br />
            PERL...
         </div>
			
         <div style = "background-color:#eee; height:200px; width:350px; float:left;" >
            <p>Technical and Managerial Tutorials</p>
         </div>
		
         <div style = "background-color:#aaa; height:200px; width:100px; float:right;">
            <div><b>Right Menu</b></div>
            HTML<br />
            PHP<br />
            PERL...
         </div>
			
         <div style = "background-color:#b5dcb3; clear:both">
            <center>
               Copyright © 2007 Tutorialspoint.com
            </center>
         </div>
			
      </div>
   </body>

</html>

Esto producirá el siguiente resultado:

Puede crear un mejor diseño utilizando DIV, SPAN junto con CSS. Para obtener más información sobre CSS, consulte el Tutorial de CSS.

↰ Previous page