Unidad 1. Introducción a HTML (III)



1.3. Mi primera página web

Vamos a comenzar por escribir una página web muy sencilla. Para ello podemos utilizar cualquier editor de texto sin formato, por ejemplo, el Bloc de Notas (Notepad) incluido en Windows. En ordenadores Apple puedes usar el TextEdit. Para abrir el Bloc de Notas en Windows 8 o posterior, teclea Bloc de Notas en la caja de búsqueda de la barra de tareas y ábrelo. En Windows 7 desde el Menú InicioProgramasAccesorios Bloc de notas

El aspecto del Bloc de Notas es muy simple, una hoja en blanco con una barra de menús.

Escribiremos el siguiente código. Más adelante ya veremos qué es cada elemento:

<html>
<head>
 <title>Mi primera página</title>
</head>
<body>
 <p>Visita aulaClic</p>
</body>
</html>

Una vez escrito, vamos a guardarlo. Pero antes de continuar, debemos de explicar lo que es la extensión de un archivo. La extensión indica de qué tipo es un archivo. La extensión son las tres letras que van después del punto al final del nombre de un archivo (por ejemplo, imagen.gif o documento.doc). Puedes abrir cualquier carpeta para comprobarlo. Si no puedes ver las extensiones, es porque Windows las oculta. Si es tu caso, puedes hacer que las muestre, abre el Explorador de Windows y haz clic en la pestaña Vista, abre Mostrar u ocultar y marca la opción Extensiones de nombre de archivo, tal y como muestra la siguiente imagen.

Vamos a continuar guardando la página. Pulsamos en el menú Archivo y elegimos Guardar. Introducimos el nombre, por ejemplo primera. Si ahora pulsásemos Guardar, se guardaría con la extensión txt, que indica que es un documento de texto sin formato. Para guardarlo como una página web, debemos de emplear la extensión .html (o .htm). Por lo que completamos el nombre para que quede primera.html y pulsamos Guardar.

Ahora, utilizando el Explorador de Windows, abrimos la carpeta en la que hemos guardado el archivo y hacemos doble clic sobre él. Como el archivo tiene extensión .html, se abrirá la página con el navegador que tengamos como predeterminado. Por ejemplo, en Google Chrome, el resultado se ve así:

Observa que no se muestra todo lo que hemos escrito. Si te fijas en el documento del Bloc de Notas, verás que todo lo que aparece entre los signos < y > no se muestra. Esos signos delimitan una etiqueta de HTML, y todas las que hemos utilizado siguen el formato <etiqueta>contenido</etiqueta>. Por ejemplo, la etiqueta <title> contiene el texto que se mostrará como título de la página, y la etiqueta <p> indica un párrafo con texto normal.

Por lo tanto, un navegador web es una aplicación capaz de interpretar el código HTML, formado por etiquetas y mostralo debidamente formateado. En cualquier momento, podemos ver el código HTML de la página que estamos viendo. En los navegadores Chrome y Firefox, podemos hacerlo pulsando con el botón derecho sobre una zona de texto de la página para que se abra un menú contextual, desde el que elegiremos Ver código fuente de la página. Otra forma de hacer lo mismos es pulsar las teclas Ctrl + U. Un paso más es el Inspector de código que permite modificar las propiedades CSS y ver el resultado directamente.

Por lo que hemos visto hasta ahora debe quedar claro que una página web es un archivo con extensión .html que se abre con un navegador web y que se escribe con cualquier editor de texto plano.

Para practicar esto por ti mismo es conveniente que realices este ejercicio paso a paso: Crear mi primera página web.

Para que la página que acabamos de crear la pudiese ver todo el mundo simplemente habría que guardarla en un ordenador especial llamado servidor de Internet. Es lo que hemos hecho nosotros al guardarla en el servidor de aulaClic. Haz clic aquí para verla. Se abrirá una nueva ventana del navegador y verás lo que muestra la siguiente imagen.

Observa que la única diferencia respecto a cuando la hemos visto desde nuestro ordenador es que la dirección (URL) que aparece es diferente, antes era una dirección dentro de nuestro disco duro (file:///C:/mis_webs/en_contruccion/cursos/todo_html/html_17_fuente/ejemplos/primera.html) mientras que ahora es una direción de internet (https://www.aulaclic.es/html/ejemplos/primera.html).

En la unidad 17 veremos con más detalle qué es una URL y cómo publicar las páginas web en internet.


Enero-2019 (V 2.2)
Pág. 1.3
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.