DISEÑOS DE PÁGINAS WEB CON N.V.U. E INICIACIÓN AL CÓDIGO HTML

(1)

1 DISEÑOS DE PÁGINAS WEB CON N.V.U. E INICIACIÓN AL CÓDIGO HTML

Una página web es un documento escrito empleando un lenguaje denominado HTML (Hyper text Markup language; Lenguaje de marcas de hipertexto). HTML es un sistema que nos permite dar formato a textos mediante el uso de etiquetas.

Una página web, gracias al lenguaje HTML, puede estar integrada por una gran cantidad de recursos multimedia: imágenes, sonidos, videos, animaciones…

Cuando navegamos por Internet, las páginas web se envían desde servidores situados a miles de kilómetros en décimas de segundo esto se produce gracias a que HTML es un lenguaje que se ha orientado a la transmisión de documentes mediante el protocolo HTTP (protocolo de transmisión de hipertexto) que es el que se usan los ordenadores para enviar y recibir documentos a través de Internet. En principio crearemos una sencilla página web mediante el blog de notas, para ello seguiremos los siguientes pasos:

1. Crear el sitio web local

Las páginas web de tu sitio deben disponer de enlaces entre ellas y estos deben mantenerse cuando estén publicadas.

Crea en tu pen drive una carpeta denominada Mi web dentro de Mi web añade otra carpeta denominada imágenes. 2. Crea la página web

Edita el documento que acabas de crear, empleando el Bloc de notas, y añadiéndole el siguiente contenido:

<html> Indica que inicio el código html

<head> Indica el comienzo del encabezado de mi página web <title>Mi sitio web </title> indica el inicio y fin del titulo </head> fin del encabezamiento

<body> inicio del cuerpo de mi página web ( es decir de el contenido)

<h1>Mi página personal </h1> títulos de nivel 1 dentro de la página, creando encabezados de las páginas; si aumentamos el número el tamaño del encabezado cada vez será más pequeño.

esta es mi web personal, en ella vas a encontrar información sobre mis deportes favoritos……… inicio de un párrafo nuevo

(2)

2 </body> fin del cuerpo

</html> fin del código HTML

Guarda el documento y observa el resultado, acabas de dar forma a tú página web creando el código html.

A continuación vamos a introducir nuevos códigos que nos ayudarán a realizar una página web algo más compleja, dándonos la posibilidad de alinear párrafos, cambiar formatos o incluso realizar cambios de párrafos y crear líneas horizontales.

Para conocerlos realiza los siguientes ejercicios que te irán indicando de manera sencilla como usar los siguientes códigos HTML ( inclúyelos en el body del ejercicio anterior, siempre teniendo cuidado de introducirlos antes de que haya finalizado el body):

así estoy alineando mi párrafo a la izquierda así estoy alineando mi párrafo al centro así estoy alineando mi párrafo a la derecha

ahora estoy poniendo un párrafo de color azul

> ahora estoy poniendo un párrafo de color azul en un tamaño 3

> ahora estoy poniendo un párrafo de color azul en un tamaño 3 y en negrita

> ahora estoy poniendo un párrafo de color azul en un tamaño 3 y en cursiva

> ahora estoy poniendo un párrafo de color azul en un tamaño 3 y en subrayado

3.

Crear el sitio web en el editor

Evidentemente para crear una página web compleja necesitamos un editor de páginas web, que es un programa que nos permite crear documentos escritos en lenguaje HTML sin necesidad de conocer en profundidad este lenguaje. Nosotros utilizaremos la

aplicación

gratuita NVU

.

Vamos a aprovechar el trabajo hecho anteriormente con nuestro editor NVU.

Haz clic en el botón Editar sitios del Administrador de sitios NVU. En la ventana Configuración de publicación escribe un nombre para el sitio

En servidor de publicación, haz clic en Dirección de publicación y elige la carpeta Mi web, que habías creado.

(3)

3 4. Crea una nueva página web con NVU

Abre Nvu y haz clic en el icono Nuevo

Haz clic en el icono guardar y escribe el titulo de tu página web: Deportes de aventuras Guarda el archivo con el nombre Deportes de aventuras.html.

Pincha en la pestaña Código fuente de la barra Modo de edición y observa el código HTML de la página.

Haz clic en el botón Recargar el sitio. 5. Trabajar con NVU formatos

Para darle formato atractivo a nuestra página podemos utilizar:

 Las opciones del uso de Negrita, cursiva, subrayado………, que aparecen en la barra de herramientas

 Encabezados de distintos niveles; los podrás elegir en el despliegue de formatos que te aparecen en el Texto del cuerpo (Body Text)

 Uso de listas no numeradas, usando la lista de viñetas, al igual que en un documento de Word

 Distintos formatos de fuentes, al igual que en un documento de Word

 Separar elementos de la página, seleccionando el menú Inserta, elige la opción línea Horizontal; accediendo al modo de edición Editar código de fuente puedes modificar los parámetros de tu barra horizontal, <hr height= “2px” width=”100%”> de esta manera la personalizarás.

(4)

4  Trabajar con tablas

6. Trabajar con tablas

Al insertar la tabla nos aparece un cuadro de diálogo que nos permite definir las caracterísitcas de la tabla. En él encontramos tres pestañas:

a. La primera de ellas en Rápido, es la opción por defecto y nos permite dimensionar la tabla de manera gráfica, eligiendo el número de columnas y filas.

b. Preciso en esta pestaña podremos escribir directamente el número de filas y columnas pero también podemos definir la anchura de la tabla,( la cual se puede definir en píxeles o en el porcentaje del espacio que ocupará la tabla dentro del elemento donde se encuentra insertada,)así como el grosor del borde ( si queremos que el borde de la tabla sea invisible deberemos dar el valor 0 al borde)

c. Celda, en ella podremos añadir más detalles a los elementos que vayan en el interior de las celdas de nuestra tabla: Alineación horizontal ( indicaremos si irán sin alineación ,alineados a la izquierda, derecha o centro), Alineación vertical( que puede ser, sin alinear, arriba, al centro o abajo según el valor que elijamos en el desplegable), Ajustar(permitiremos que el texto introducido en la celda ocupe varias líneas, si deseamos que todo el texto se muestre en una sola línea, marcaremos No ajustar), Espacio entre las celdas ( introducimos el valor en píxeles que queremos haya entre las celdas), Relleno de las celdas (el valor en píxeles es que habrá entre los bordes de la celda y su contenido)

Propiedades de la tabla.

Una vez seleccionada la tabla debemos abrir el diálogo de propiedades si queremos modificarla, para ello podemos hacerlo de tres formas diferentes: con el botón derecho del ratón, con el menú tabla o con el botón tabla de la barra de menús.

Propiedades de la celda

De forma similar como modificamos las propiedades de la tabla podremos modificar las propiedades de la celda.

Combinar y separar celdas.

Podemos combinar celdas, seleccionando las celdas adyacentes y a continuación Tabla Unir celdas. (Join selected cells)

Para separar o dividir una celda combinada (eliminar el efecto de combinar celdas retornando a las celdas originales) Realizar clic dentro de la celda que deseamos dividir, Seleccionar Tabla Dividir Tabla (Split Cell)

7. Insertar imágenes

Los formatos de imagen más adecuados para una página web son: GIF, JPEG (JPG) y PNG, pudiendo añadir también imágenes animadas.

(5)

5 Para insertar imágenes es muy importante que las tengamos guardadas en una carpeta que se denomine imágenes y que se encuentre dentro de nuestra web, de la web que estamos creando,.

Para insertar una imagen ubicamos el cursor en la zona de la página donde deseamos agregar la imagen, hacemos clic en el icono de imagen. En la ventana Propiedades de la imagen haz clic sobre el botón elegir archivo, seleccionamos la imagen que deseamos y hacemos clic en el botón Abrir; introducimos un texto alternativo descriptivo de la imagen

 Insertar una imagen como fondo de nuestra página

Ahora colocaremos una imagen de fondo de página. Para ello pinchamos sobre la página en Formato >> Colores y fondo de página... (Page colors and Background…)

Luego, en el cuadro de diálogo que se nos muestra pinchamos en Imagen de Fondo; activamos la casilla Imagen de fondo y pinchamos en el botón Elegir archivo....(Choose File…)

Si la imagen es más pequeña que la zona de visualización de una página la repite en forma de mosaico ocupando toda la pantalla. Por eso las imágenes de fondo siempre hay que seleccionarlas bien para que no dificulten la lectura del texto.

8. Utilizar enlaces

 Crear un hipervínculo

Puedes crear un hipervínculo dentro de cualquier elemento de una página web: textos, imágenes, animaciones, etc…

Con independencia del objeto elegido, el proceso es similar. Marca la palabra, imagen… en la que vas a crear el enlace. Selecciona el icono Enlace en la Barra de redacción

En la ventana propiedades del enlace escribe la dirección de la página web que deseas enlazar y Aceptar.

El código HTML para agregar un hipervínculo a una página web externa es:

 Añadir un enlace relativo

Una vez creado el sitio web podemos crear enlaces relativos entre las páginas que componen el sitio web. Un enlace relativo nos dice donde se encuentra un archivo con respecto a otro.

(6)

6 Lo realizaremos igual que hemos hecho para crear un hipervínculo con una página de internet, solo que ahora lo que debemos es hacer elegir la página a la que quieres hacer el enlace (Choose File…)

 Insertar un enlace interno

Cuando una página es suficientemente larga o dispone de una estructura interna, resulta conveniente establecer enlaces internos llamados anclas dentro de ella.

Es decir debes establecer hipervínculos entre distintos elementos de la propia página. Así facilitas la navegación y el acceso a los contenidos.

Para crear enlaces dentro de la página, primero debes indicar qué partes del documento deseas enlazar (anclar).

Para ello:

Inserta el cursor en el lugar de la página donde deseas establecer el ancla para el enlace.

Selecciona el Enlace interno (Anchor) y asigna el nombre del enlace interno , cuando damos a aceptar, lo que acabamos de hacer es poner el ancla en el punto de la página al que deseas dirigirte, necesitas seleccionar ellugar en el que vas a insertar el enlace.

El procedimiento para introducir un hipervínculo a un ancla (enlace interno) es muy parecido al que has aprendido para insertar un vínculo normal.

(7)

7 Seleccionar el lugar, texto, imagen…donde quieras insertar el hipervínculo y a continuación haz clic en el icono de enlace, en la ventana Propiedades del enlace despliega Ubicación de enlace.

Selecciona el enlace al que deseas moverte dentro de la página, Acepta. 9. Requisitos para poder publicar nuestra página web

Publicar un sitio web consiste en situar las páginas en un servidor de internet, de modo que cualquier usuario que lo desee pueda acceder a ellas para visualizarlas.

Para poder publicar en internet hay que disponer de permiso en un servidor; es decir, se necesita tener un nombre de usuario y una contraseña. La mayoría de los proveedores de internet ofrecen, a sus clientes, un servidor para que coloquen sus páginas personales. Algunos servidores, orientados a empresas y profesionales, cobran una cuota por permitir la publicación de páginas web, aunque también puedes encontrar algunos servidores que permiten alojar páginas de forma gratuita, a cualquier usuario que se registre, con el inconveniente de la inserción de publicidad en las páginas.

NVU permite publicar directamente las páginas web, y trabajar con las páginas alojadas en el servidor; para ello, hay que especificar todos los datos necesarios en el cuadro de diálogo de configuración que se activa haciendo clic sobre el botón

Editar sitios.

Una vez que se ha definido el sitio web, en el panel Administrador de sitios web (se visualizarán todos los archivos y carpetas existentes. Al hacer doble clic sobre un archivo, se abrirá en el área de trabajo, y se podrán realizar modificaciones en la página.

Para publicar (alojar en el servidor) una nueva página web, o cualquier modificación de alguna otra página, bastaría con hacer clic sobre el botón publicar. Si la página fuera nueva, el programa solicitará su título y el nombre del archivo en el que se quisiera guardar.