Para empezar solo necesitas abrir el bloc de notas y escribir:
Mi primera página web
Guardas el archivo donde quieras con el nombre mi_primera_web.html. Fíjate que en el nombre del archivo no utilizo ni espacios ni acentos, evita utilizarlos tu también para evitar futuros problemas. Ahora puedes ir a la carpeta donde lo has guardado y abrirlo. Verás que se abre en tu navegador mostrando lo siguente:
Aunque se ha abierto en el navegador, no se trata todavía de una página web. Se trata de un archivo que entiende el navegador y lo muestra "a su manera". Vamos a crear la primera estructura de una página web. Para ello se usa el lenguaje de marcado HTML.
Reemplaza el contenido del archivo en el bloc de notas por el siguiente:
<html>
<head>
<title>El título de mi web</title>
</head>
<body>
Mi primera página web
</body>
</html>
¿Qué significa todo esto? Todo lo que pongamos entre < y > no se mostrará en la web, son las etiquetas de marcado de HTML que usamos para indicar la estructura del documento. Hay dos tipos de etiquetas, las de apertura como <html> y las de cierre como </html> (fíjate en la barra). Si dentro de una etiqueta abrimos otra, se debe cerrar antes que la primera:
MAL
<html>
<body>
</html>
</body>
BIEN
<html>
<body>
</body>
</html>
Primero hemos "abierto" el documento con <html>, a continuación hemos definido dos zonas, <head> es la cabecera del documento que contiene datos que no se mostrarán en la ventana del navegador, pero afectará a su contenido (lo veremos más adelante), como <title> que muestra el título que aparece en la pestaña del navegador. <body> en cambio es el cuerpo del documento, donde pondremos el contenido que se mostrará, en este caso una simple frase.
Vuelve a guardarlo y ábrelo de nuevo en el navegador (o simplemente actualiza la página), se mostrará lo siguiente:
Parecen idénticas, pero fíjate en el título de la pestaña, además internamente hemos sentado las bases para el resto del documento, definiendo las principales secciones.
Esto es todo por hoy en la siguiente entrega profundizaremos algo más. ¿Hay algún tema del desarrollo de páginas web que desees conocer?
0 comentarios