A review on how to make a basic web page

Up to this point, we have learned how to publish text into a basic web page. Let's review what we've done:

First, we took the text, and identified our headings, subheadings, and paragraphs:

Fables [heading]

The Fox and the Crow, by Aesop [subheading]

A Fox once saw a Crow fly off with a piece of cheese in its beak and settle on a branch of a tree. "That's for me, as I am a Fox," said Master Reynard, and he walked up to the foot of the tree. "Good-day, Mistress Crow," he cried. "How well you are looking to-day: how glossy your feathers; how bright your eye. I feel sure your voice must surpass that of other birds, just as your figure does; let me hear but one song from you that I may greet you as the Queen of Birds." The Crow lifted up her head and began to caw her best, but the moment she opened her mouth the piece of cheese fell to the ground, only to be snapped up by Master Fox. [paragraph]

"That will do," said he. "That was all I wanted. In exchange for your cheese I will give you a piece of advice for the future. "Do not trust flatterers. [paragraph]

...which turned our text to this code:

<h1>Fables</h1>
<h2>The Fox and the Crow, by Aesop</h2>
<p>A Fox once saw a Crow fly off with a piece of cheese in its beak and settle on a branch of a tree. "That's for me, as I am a Fox," said Master Reynard, and he walked up to the foot of the tree. "Good-day, Mistress Crow," he cried. "How well you are looking to-day: how glossy your feathers; how bright your eye. I feel sure your voice must surpass that of other birds, just as your figure does; let me hear but one song from you that I may greet you as the Queen of Birds." The Crow lifted up her head and began to caw her best, but the moment she opened her mouth the piece of cheese fell to the ground, only to be snapped up by Master Fox.</p>
<p>"That will do," said he. "That was all I wanted. In exchange for your cheese I will give you a piece of advice for the future. "Do not trust flatterers.</p>

Then, we learned how to highlight information, add links, and pictures to our web page. So now let's try adding a picture and a link to Heptagrama on our web page, as the next step. Let's highlight the link part, making it bold.

<img src="http://api.photoshop.com/v1.0/accounts/f928837712bc442d848b5d23fe5b145e/assets/f203125e1c3b4fb39d98525221f04f42" width="300" height="300" alt="The fox and the crow.">
<p><strong>This page is part of <a href=”//heptagrama.com/”>Heptagrama</a>'s course on how to make a web page.</strong></p>

Lastly, we completed our web page by inserting both its head and body information. Thus, if using HTML, our code should look like this:

<!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>

If using XHTML, our code should look like this:

<!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>

If using HTML 5, our code should look like this:

<!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>

I'll bet you will want to see working examples, so here you have them:

+ Using HTML
+ Using XHTML
+ Using HTML 5

It’s not very impressive looking, is it? Don't worry; we will deal with that later. Meanwhile, take a look at the following pages. They will teach you how to add additional things to your web page. There's still a lot to learn.


Learn + Computers and the Internet + Web development