Anterior
Diseño web: tu primera página

Siguiente


    Tu primera página web será muy sencilla y sólo tendrá texto. Para ser el primer ejercicio no está mal, más adelante haremos páginas más interesantes. Vas a hacer varias tareas:


Crea una página web

  1. Haz clic en Inicio > Programas > Mozilla > Composer para abrir el programa. También puedes hacer clic derecho en el icono de Mozilla de la zona inferior derecha y seleccionar Composer.

Menu contextual

  1. En la pantalla aparece una página en blanco. El cursor parpadea esperando recibir instrucciones. Composer es un editor de texto y se parece a todos los editores de texto.

  2. En la parte inferior verás cuatro fichas (Normal, Etiquetas HTML, Código fuente y Vista preliminar). Es la barra de herramientas de edición y sirve para seleccionar el modo en que se visualiza la página. Empezaremos trabajando en el modo Normal, que es más fácil. Más adelante aprenderemos los otros modos.

Pestañas en la barra inferior

  1. Escribe el texto: ¿Es esto una verdadera página Web?

El texto aparece en el editor

  1. Observa que en la barra de título de la ventana pone Sin título – Composer. Eso significa que aún no hemos dado nombre al documento.

Barra de título sin titulo

  1. Debes dar un título a la página. Para ello, abre el menú Formato / Título y propiedades de la página... y rellena los datos del cuadro de diálogo que aparece. Ponle como título Mi primera página. Este nombre será el que verán los visitantes de tu página en la barra superior de la ventana de su navegador. Haz clic en Aceptar.

Cuadro de dialogo del titulo

  1. Ahora debes guardar el archivo de la página. Para ello abre el menú Archivo / Guardar como... Elige la carpeta Mis webs, ponle al archivo el nombre Prueba01 y pulsa Guardar.

  2. En la barra de título del editor ya se ve el nombre de la página Mi primera pagina, el nombre del archivo Prueba01 y su extensión .html . También puedes ver que, en la barra de tareas de la parte inferior de la pantalla, se muestra el título y el nombre del archivo.

La ventana ya muestra el título

Bueno, pues ya está. Acabas de crear tu primera página web. Su título es Mi primera pagina y el archivo se llama prueba01.html

Las páginas web pueden tener distintas extensiones. Composer utiliza, por defecto, la extensión .html, pero también puedes utilizar .htm. Ambas son válidas, pero es bueno que utilices la misma extensión para todas tus páginas web.

Acostúmbrate a dar nombres en minúsculas a tus archivos. Mezclar mayúsculas y minúsculas puede causar problemas al cargar las páginas en el servidor. Cíñete a las minúsculas y evita los acentos.


Prueba tu página

Cuando escribes una página web en un editor, no siempre puedes estar seguro de que funcionará perfectamente en el navegador. Lo que muestra el editor es una cosa, pero lo que ven los internautas en su pantalla puede ser otra cosa distinta. Debes verificar constantemente el resultado de tu trabajo.

Composer te permite controlar el aspecto de tu página:

  1. Ahora tienes la ventana de Composer activa en tu pantalla y la página prueba01.html está abierta.

  2. Haz clic en la ficha Vista preliminar de la barra inferior de la ventana.

Pestaña vista preliminar
  1. Verás una imagen de la página web como se vería en un navegador. El resultado no parece nada interesante: se ve lo mismo que en el modo Normal. Haz clic en la pestaña Normal para comprobarlo.

Esta página web tiene el mismo aspecto en el modo Normal que en el modo Vista preliminar. Es muy simple y sólo tiene una línea de texto.


Abre el archivo desde el Explorador de Windows

  1. Debes localizar el archivo Prueba01, con el Explorador de Windows, en tu carpeta Mis webs. Observa que es un archivo pequeño, de tamaño inferior a 1Kb.

  2. Haz doble clic en el icono del archivo. Se abrirá el navegador predeterminado. Aunque tu página web sólo tiene una línea de texto, ya es un documento html.

Vista desde el navegador
  1. En la línea de direcciones del navegador puedes ver la ruta del archivo, es decir, su ubicación en el disco duro.

Incluye tu página en los marcadores

Como vamos a trastear varias veces con esta página, es recomendable incluirla en la lista de marcadores favoritos de tu navegador:

  1. La ventana del navegador Mozilla debe estar abierta y mostrando tu página Prueba01.html. Selecciona la opción Marcadores > Archivar marcador. Elige una carpeta de marcadores en la que depositar el marcador de tu página y pulsa Aceptar.

Archivando marcadores

  1. También puedes convertir tu página en la página de inicio del navegador. Para ello selecciona Editar > Preferencias... y, en las opciones de Navigator, pulsa Usar página actual.

Seleccionar página de inicio


Modifica tu página

Ahora tienes dos ventanas abiertas en la pantalla: la del editor Composer y la del navegador Mozilla. Puedes pasar de una a otra pulsando en los botones de la barra de tareas. Ambos programas han abierto el mismo archivo prueba01. Se modifica desde Composer y se visualiza en Mozilla.

  1. En la ventana de Composer, coloca el cursor en la línea de texto y haz clic en la flecha del botón Cuerpo del texto.

  2. Se abrirá una lista de formatos de párrafo. Selecciona Título 1 y observa el efecto sobre la línea.

Estilos de párrafo

  1. El texto cambia a negrita en tamaño más grande. Pulsa Ctrl+Fin para colocar el cursor al final de la linea y presiona Entrar para pasar a la linea siguiente.

  2. Escribe: <Esta línea está escrita con la fuente del Cuerpo del texto> y presiona Entrar. La nueva línea tiene el formato del Cuerpo del texto, el formato de párrafo predeterminado en el editor html.

  3. Guarda las modificaciones pulsando Ctrl+S y pasa a la ventana del explorador Mozilla. La visualización de la página no ha cambiado.

  4. Recarga la página para ver los cambios en el navegador, pulsando el botón correspondiente de la barra de herramientas. También puedes recargar la página pulsando Ctrl + R o pulsando F5. Mozilla mostrará los cambios introducidos en tu página. Cuando recargas la página en el navegador, se muestran las modificaciones que has hecho en la página web.

Nueva linea de texto

  1. Cierra el navegador.


Analiza las etiquetas

HTML es un lenguaje que permite etiquetar la información que se muestra en un documento: el texto, las imágenes, las tablas, etc. Estas etiquetas permiten que el navegador pueda reconstruir la página para mostrar cada elemento en su sitio. Para realizar este etiquetado o marcado, el código HTML dispone de etiquetas (tags, en inglés) que indican el principio y el final de cada bloque de formato. Vas a ver qué sencillo es:

En Composer, haz clic en la pestaña Etiquetas HTML.

Imagen de las etiquetas

Observa las etiquetas amarillas BODY y H1. Más adelante hablaremos de la etiqueta BODY. La etiqueta H1 indica un párrafo de estilo Título 1, de la lista de estilos de párrafo de Composer. Haz clic en la etiqueta y verás que el párrafo se selecciona automáticamente. Es muy práctico.

Haz clic en la pestaña <Código fuente> para ver el código html de tu página.

Texto del código html

Observa las dos etiquetas <h1> y </h1> que definen el estilo de párrafo Titulo 1. Por suerte, Composer conoce todas las etiquetas y las insertará por ti.


Añade más texto y una lista

Vamos a añadir más texto, a darle formato y  visualizarlo en el navegador.

  1. Coloca el cursor en una línea vacía, debajo del texto que acabas de escribir.

  2. Selecciona el estilo de párrafo Titulo 3.

  3. Escribe el siguiente texto: <Este texto tiene el formato Titulo 3.> Presiona Entrar para pasar a un nuevo párrafo. Observa que, al empezar un nuevo párrafo el formato de párrafo pasa automáticamente a Cuerpo del texto.

  4. Escribe los siguientes textos, pulsando Entrar entre un párrafo y el siguiente: <Aquí hay otro párrafo con el formato Cuerpo del texto> (Entrar) <Y aquí empieza una lista:> (Entrar)

  5. Haz clic en el botón Lista con viñetas:

Lista con viñetas

  1. El cursor se mueve hacia la derecha y se muestra una viñeta.

  2. Escribe: <Lista 1> (Entrar) <Lista 2> (Entrar) <Lista 3> (Entrar)

  3. Termina la lista con viñetas presionando dos veces Entrar y escribe: <Fin de la lista.>

Texto con lista

  1. Guarda el documento y examínalo en el navegador, sin olvidar recargar la página (Ctrl+R)

Quizá estés deseando probar todos los demás estilos de párrafo, pero ten paciencia. Antes conviene una breve explicación.

Los estilos de párrafo

Has escrito varios textos, en el programa Composer, con la ayuda de funciones muy parecidas a las de cualquier procesador de textos: escribes directamente los textos y pulsas Entrar para cambiar de párrafo.

La diferencia es que el abanico de estilos de párrafo es limitado. Sólo disponemos de estilos de párrafo para los títulos, el cuerpo de texto predeterminado, con efectos de cursiva, negrita o subrayado, además de un número limitado de estilos de lista y poco más.

Este abanico reducido permite mostrar las páginas web en navegadores estándar en muchos tipos distintos de ordenador. El diseño de una página web no se puede separar de las condiciones existentes: se tiene que poder visualizar en las pantallas de miles de ordenadores distintos, por lo que su formato debe seguir unas reglas específicas.

HTML es un lenguaje que trata de describir páginas y, para ello, establece unas reglas muy claras sobre lo que puede y, sobre todo, lo que no puede hacerse, en una página web.


Arriba


Anterior
Inicio
Tecnologías de la Información
Diseño web

Siguiente