Crea tu web, tutor html, css

Mi primera página web

El código

La mejor manera de aprender a hacer algo es ... ¡hacerlo!, por eso se dice que a programar se aprende programando. Así que vas a crear tu primera página web. 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.
<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.

Ahora también puedes hacerlo con la herramienta ediweb que tiene a tu disposición en este sitio web

Una página web se escribe como un texto pero con algunas marcas especiales.

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 etiqueta <html> cerrada al final del documento con </html>, eso quiere decir que estamos ante un HTML:

<html>... </html>

Dentro de ese documento vemos una parte llamada cabecera, que la reconocerás porque está limitada con la etiqueta <head> </head>. Él contenido de esta parte no siempre es visible, y si lo es nunca se muestra en la página 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.

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.

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.