Repaso de cómo hacer una página web básica

Hasta aquí hemos aprendido cómo publicar texto como una página web básica. Repasemos lo que hemos hecho:

Primero, observamos el texto e identificamos nuestros títulos, subtítulos y párrafos:

Fábulas [título]

La Zorra y el Cuervo, de Esopo [subtítulo]

Un Zorro vio una vez a una Cuervo volar con un pedazo de queso en su pico y posarse sobre la rama de un árbol. "Eso es para mí, porque soy un Zorro", dijo el Master Reynard, y caminó hasta el pie del árbol. "Buenos días, Señora Cuervo," gritó. "¡Qué bien se ve usted hoy!: ¡qué brillo tienen sus plumas! ¡qué fulgor sus ojos! Estoy seguro de que su voz debe sobrepasar la de las demás aves, tal como lo hace su figura; permítame oír tan solo una canción suya y yo la saludaré como a la Reina de las Aves." La Cuervo alzó su cabeza y comenzó a cantar lo mejor que pudo, pero apenas abrió su boca, el pedazo de queso se cayó al suelo, solo para ser atrapado por el Maestro Zorro. [párrafo]

"Eso me basta," dijo él. "Era todo lo que quería. A cambio de su queso, le daré un consejo para el futuro." No confíe en los aduladores. [párrafo]

...lo cual convirtió el texto en este código:

<h1>Fábulas</h1>
<h2>El Zorro y el Cuervo, de Esopo</h2>
<p>Un Zorro vio una vez a una Cuervo volar con un pedazo de queso en su pico y posarse sobre la rama de un árbol. "Eso es para mí, porque soy un Zorro", dijo el Master Reynard, y caminó hasta el pie del árbol. "Buenos días, Señora Cuervo," gritó. "¡Qué bien se ve usted hoy!: ¡qué brillo tienen sus plumas! ¡qué fulgor sus ojos! Estoy seguro de que su voz debe sobrepasar la de las demás aves, tal como lo hace su figura; permítame oír tan solo una canción suya y yo la saludaré como a la Reina de las Aves." La Cuervo alzó su cabeza y comenzó a cantar lo mejor que pudo, pero apenas abrió su boca, el pedazo de queso se cayó al suelo, solo para ser atrapado por el Maestro Zorro.</p>
<p>"Eso me basta," dijo él. "Era todo lo que quería. A cambio de su queso, le daré un consejo para el futuro." No confíe en los aduladores.</p>

Luego aprendimos cómo resaltar información, añadir enlaces e imágenes a nuestra página web. Así que ahora intentemos añadir una imagen y un enlace a Heptagrama en nuestra página web, como paso siguiente. Resaltemos la zona del enlace, haciéndolo negrilla.

<img src="http://api.photoshop.com/v1.0/accounts/f928837712bc442d848b5d23fe5b145e/assets/f203125e1c3b4fb39d98525221f04f42" width="300" height="300" alt="La zorra y el cuervo.">
<p><strong>Esta página es parte del curso de cómo hacer una página web de <a href=”//heptagrama.com/”>Heptagrama</a>.</strong></p>

Por último, completamos nuestra página web insertando tanto la información de cabecera como delimitando el cuerpo. Así, si usamos HTML, nuestro código debería verse así:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Una fábula de Esopo</title>
<meta name="description" content="Esta página web contiene una fábula del famoso narrador griego Esopo.">
<meta http-equiv="content-language" content="es">
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
</head>
<body>
<h1>Fábulas</h1>
<p><strong>Esta página es parte del curso de cómo hacer una página web de <a href="//heptagrama.com/">Heptagrama</a>.</strong></p>
<h2>El Zorro y el Cuervo, de Esopo</h2>
<div><img src="http://api.photoshop.com/v1.0/accounts/f928837712bc442d848b5d23fe5b145e/assets/f203125e1c3b4fb39d98525221f04f42" width="300" height="300" alt="La zorra y el cuervo."></div>
<p>Un Zorro vio una vez a una Cuervo volar con un pedazo de queso en su pico y posarse sobre la rama de un árbol. "Eso es para mí, porque soy un Zorro", dijo el Master Reynard, y caminó hasta el pie del árbol. "Buenos días, Señora Cuervo," gritó. "¡Qué bien se ve usted hoy!: ¡qué brillo tienen sus plumas! ¡qué fulgor sus ojos! Estoy seguro de que su voz debe sobrepasar la de las demás aves, tal como lo hace su figura; permítame oír tan solo una canción suya y yo la saludaré como a la Reina de las Aves." La Cuervo alzó su cabeza y comenzó a cantar lo mejor que pudo, pero apenas abrió su boca, el pedazo de queso se cayó al suelo, solo para ser atrapado por el Maestro Zorro.</p>
<p>"Eso me basta," dijo él. "Era todo lo que quería. A cambio de su queso, le daré un consejo para el futuro." No confíe en los aduladores.</p>
</body>
</html>

Si usas XHTML, el código debería verse así:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Una fábula de Esopo</title>
<meta name="description" content="Esta página web contiene una fábula del famoso narrador griego Esopo." />
<meta http-equiv="content-language" content="es" />
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
</head>
<body>
<h1>Fábulas</h1>
<p><strong>Esta página es parte del curso de cómo hacer una página web de <a href="//heptagrama.com/">Heptagrama</a>.</strong></p>
<h2>El Zorro y el Cuervo, de Esopo</h2>
<div><img src="http://api.photoshop.com/v1.0/accounts/f928837712bc442d848b5d23fe5b145e/assets/f203125e1c3b4fb39d98525221f04f42" width="300" height="300" alt="La zorra y el cuervo." /></div>
<p>Un Zorro vio una vez a una Cuervo volar con un pedazo de queso en su pico y posarse sobre la rama de un árbol. "Eso es para mí, porque soy un Zorro", dijo el Master Reynard, y caminó hasta el pie del árbol. "Buenos días, Señora Cuervo," gritó. "¡Qué bien se ve usted hoy!: ¡qué brillo tienen sus plumas! ¡qué fulgor sus ojos! Estoy seguro de que su voz debe sobrepasar la de las demás aves, tal como lo hace su figura; permítame oír tan solo una canción suya y yo la saludaré como a la Reina de las Aves." La Cuervo alzó su cabeza y comenzó a cantar lo mejor que pudo, pero apenas abrió su boca, el pedazo de queso se cayó al suelo, solo para ser atrapado por el Maestro Zorro.</p>
<p>"Eso me basta," dijo él. "Era todo lo que quería. A cambio de su queso, le daré un consejo para el futuro." No confíe en los aduladores.</p>
</body>
</html>

Si utilizas HTML 5, el código debería verse así:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Una fábula de Esopo</title>
<meta name="description" content="Esta página web contiene una fábula del famoso narrador griego Esopo." />
</head>
<body>
<h1>Fábulas</h1>
<p><strong>Esta página es parte del curso de cómo hacer una página web de <a href="//heptagrama.com/">Heptagrama</a>.</strong></p>
<h2>El Zorro y el Cuervo, de Esopo</h2>
<div><img src="http://api.photoshop.com/v1.0/accounts/f928837712bc442d848b5d23fe5b145e/assets/f203125e1c3b4fb39d98525221f04f42" width="300" height="300" alt="La zorra y el cuervo."></div>
<p>Un Zorro vio una vez a una Cuervo volar con un pedazo de queso en su pico y posarse sobre la rama de un árbol. "Eso es para mí, porque soy un Zorro", dijo el Master Reynard, y caminó hasta el pie del árbol. "Buenos días, Señora Cuervo," gritó. "¡Qué bien se ve usted hoy!: ¡qué brillo tienen sus plumas! ¡qué fulgor sus ojos! Estoy seguro de que su voz debe sobrepasar la de las demás aves, tal como lo hace su figura; permítame oír tan solo una canción suya y yo la saludaré como a la Reina de las Aves." La Cuervo alzó su cabeza y comenzó a cantar lo mejor que pudo, pero apenas abrió su boca, el pedazo de queso se cayó al suelo, solo para ser atrapado por el Maestro Zorro.</p>
<p>"Eso me basta," dijo él. "Era todo lo que quería. A cambio de su queso, le daré un consejo para el futuro." No confíe en los aduladores.</p>
</body>
</html>

Imagino que querrás ver los ejemplos funcionando, así que aquí los tienes:

+ Con HTML
+ Con XHTML
+ Con HTML 5

No se ve demasiado bien, lo sé; pero no te preocupes. Lidiaremos con eso más tarde. Mientras tanto, echa un vistazo a las siguientes páginas. Te enseñarán a añadir otras cosas a tu página web. En realidad, queda bastante por aprender.


Aprende + Computadores e Internet + Desarrollo web