Comunidad PHPeros
Lenguajes => (X)HTML => Mensaje iniciado por: BobEsponja en 26 de Junio de 2012, 07:07:53 am
-
Bueno aquí aprenderás a maquetar tu web trabajando en tablas(no muy recomendado, pero bueno de saber).
De mi parte no recomiendo mucho maquetar de está forma, recomiendo utilizar divs, pero por si de alguna empresa te contratan o algo y te piden una web así y que no sepas como responderle? jeje, bueno empecemos.
A continuación esto te enseñara a crear tu web básica en tablas, no en divs.
Primer paso:
¿Qué significan las siglas HTML?
HyperText Markup Language
Segundo paso:
Creamos nuestro primer archivo llamado index.html con lo siguiente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
</head>
<body>
</body>
</html>
Tercer paso:
Comenzamos a insertarle nuestra tabla:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
</head>
<body>
<table>
<tr>
<td>HEADER</td>
</tr>
<tr>
<td>Menu</td>
</tr>
<tr>
<td>Cuerpo</td>
</tr>
<tr>
<td>Píe de la web</td>
</tr>
</table>
</body>
</html>
Cuarto paso:
Comenzando a darle estilo al header & el píe de la web:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
</head>
<body>
<table border="1" height="600" width="100%">
<tr align="center" bgcolor="#006600">
<td colspan="5">HEADER</td>
</tr>
<tr align="left">
<td>Menu</td>
<td>Menu</td>
<td>Menu</td>
<td>Menu</td>
<td>Menu</td>
</tr>
<tr>
<td>Cuerpo</td>
</tr>
<tr>
<td colspan="5" align="center" bgcolor="#00CC66" >Píe de la pagina web</td>
</tr>
</table>
</body>
</html>
Allí ya va formando la estructura.
Quinto paso:
Mejorar y estructurar la web:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
</head>
<body>
<table border="1" height="600" width="100%">
<tr align="center" bgcolor="#006600">
<td colspan="5" height="150">HOLA.COM</td>
</tr>
<tr align="center" height="20" bgcolor="#CC3333">
<td><a href="#menu">Menu</a></td>
<td><a href="#menu">Menu</a></td>
<td><a href="#menu">Menu</a></td>
<td><a href="#menu">Menu</a></td>
<td><a href="#menu">Menu</a></td>
</tr>
<tr align="center" bgcolor="#999999">
<td colspan="5" valign="top">Cuerpo de la web</td>
</tr>
<tr height="20">
<td colspan="5" align="center" bgcolor="#00CC66" >Píe de la pagina web</td>
</tr>
</table>
</body>
</html>
Aquí ya estructuramos la web y le pusimos varios bgcolor.
Resultado final:
(http://i45.tinypic.com/33tjhab.png)
Bueno imágenes mías y letras igual.
Espero que les sirva algún día, ya que esto no se utiliza casi nunca porque tiene muchas desventajas, recomiendo utilizar divs, diseñar en css, etc..
Atributos útilizados:
-width
-height
-bgcolor
-colspan
-align
-valign