Mi primera página web

El código
La explicación
El cuerpo del documento

El código

La mejor manera de aprender a hacer algo es ... ¡hacerlo!, por eso se dice que a programar se aprende programando. No vas a programas pero vas a crear tu primera página web. Si quieres puedes ir a la versión actual de HTML para hacer este pequeño ejercicios

Abre tu editor de texto (notepad o similar) o tu editor web o nuestro editor online , crea un archivo nuevo que puedes llamar:

mipagina.htm

y escribe el código que ves a continuación.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Mi primera pagina web </title> </head> <body> <h1 align="center" >Mi Primera pagina web </h1> <hr> <p>Esto tan sencillo es una verdadera página web, aunque le falta el contenido, pero todo llegará.</p> </body> </html>

Si quieres ver como queda esto en el explorador solo tienes que pulsar aquí, y tranquilo que se abrirá en otra ventana.

No dejes de visitar la sección HTML 5 donde verás como la versión actual de HTML hace aún más sencillo crear tu primera página web.

Recuerda que también puedes editar tu primera pagina online, con la herramienta ediweb que tienes a tu disposición en este sitio web

Una página web se escribe como un texto, este texto contiene algunas marcas (etiquetas) especiales para organizarlo y mostrarlo en un navegador web.

La explicación

Si te fijas la página vista con el explorador solo muestra parte de lo que has escrito, concretamente todo lo que no está encerrado entre los símbolos < y >. Lo ves es el contenido de la página, pero ¿y lo que está entre esos paréntesis angulares? pues esas son las etiquetas o marcas que le dicen al explorador como mostrar el contenido: en grande, con colores, centrado, el título de la página, etc. Si te fijas cada etiqueta tiene un comienzo y un fin:

<etiqueta parámetros> ... </etiqueta>

Como ves una apertura (< >) y un cierre (</>). Algunas etiquetas (como <br> cambio de línea o <hr> linea horizontal) no llevan cierre.

Fijaros que lo primero que tenemos es la descripción del documento:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

En HTML 5 esto es mucho más simple:

<!doctype html>

La siguiente etiqueta es <html> cerrada al final del documento con </html>, eso quiere decir que estamos ante código HTML:

<html>... </html>

Dentro de ese documento vemos una parte llamada cabecera, que la reconocerás porque está limitada con la etiqueta <head> </head>. El contenido de esta parte no siempre es visible, y si lo es nunca se muestra en la ventana en si. Contiene por ejemplo el título que se ve en la ventana del explorador, arriba a la izquierda. La cabecera queda por tanto :

<head>
  <title>Mi página web</title>
</head>

Puede contener muchas otras cosas, pero eso lo dejamos para más adelante.

Trata de entender el código y por ahora escríbelo, trata de evitar el copiar y pegar sin saber lo que haces.

El cuerpo del documento

La otra parte es el cuerpo o <body> </body>, es el contenido de la página web. Tiene una etiqueta con cierre:

<body> ... </body>

Y ahora el contenido:

<h1 align="center"> Mi primera página web</h1>

Con esto colocaremos el texto en formato <h1> (o cabecera 1) y centrado ( align="center"), o sea, en tamaño grande y centrado en la página, una forma de resaltar la frase. Ahora separamos esa frase por medio de una línea horizontal:

<hr>

Como ves este es un ejemplo de etiqueta sin cierre. Y por último colocamos un texto explicativo en un párrafo ( <p></p>), o sea, un bloque de texto comprendido entre dos saltos de párrafo (puntos y aparte).

<p>Esto tan sencillo es una verdadera página web, aunque le falta el contenido, pero todo llegará.</p>

Fíjate como en la página este párrafo se muestra como una sola linea, que no se rompe después de lña palabra aunque. Esos saltos de linea no afectan a la página cuando la ves en el navegador.

Para empezar no está mal, por supuesto existen muchas más etiquetas con misiones diferentes a la de mostrar texto, pero eso lo iremos viendo poquito a poco.

Para ponerte al día mira una página similar (primera página web) pero usando la versión actual de HTML

Si consideras que ya tienes conocimientos sobre los lenguajes de la web o quieres probar algo de más nivel, puedes seguir todo el proceso para crear una landing page sencilla que te servirá para entrar en materia de fomra más amena

Fíjate que puedes escribir el texto en una sola linea o en varias, con indentados... Al mostrar la página el navegador no muestra esa estructura, solo obedece a las etiquetas.