Unidad 5. Ejercicio paso a paso: KompoZer. Página base
Vamos a crear la página que nos servirá como base para crear las distintas páginas del curso.
La página la ubicaremos en el sitio que habíamos creado previamente, llamado sitio_flores.
- En la barra de redacción de KompoZer, haz clic sobre el botón Nuevo.
- En la página en blanco, escribe el nombre del sitio, Floramics. No cambies de línea al acabar.
- En la barra de formatos, en el primer desplegable, elige Título 1.
- Pulsa Intro para saltar de línea.
- Vamos a escribir el menú. Escribe los distintos elementos, cada uno en una línea. Debe de quedar con este aspecto.
- Inicio
- Flores
- Nosotros
- Contacto
- Noticias
- Selecciona las cinco líneas y pulsa el icono
de la barra de formatos para convertirlas en una lista no ordenada.
- Haz doble clic sobre el texto del primer elemento para seleccionarlo.
- En la barra de redacción haz clic sobre el botón Enlace.
- En la ventana que se abre, en Ubicación del enlace introduce index.html y pulsa Aceptar.
- Repite los pasos del 7 al 9, pero enlazando los elementos con las siguientes páginas:
- Flores → flores/index.html
- Nosotros → nosotros.html
- Contacto → contacto.html
- Noticias → noticias.html
- Haz clic fuera de la lista, en la línea siguiente. Si no puedes salir de la lista, sitúate en el último elemento y pulsa dos veces intro.
- Escribe un texto donde irá el título de la sección, por ejemplo Título. Conviértelo en un Título 2 (
<h2>).
- Cambia de línea, y escribe un texto de ejemplo, como Aquí irá el texto. Conviértelo en un Párrafo, en el mismo desplegable.
Estos dos elementos los hemos colocados para hacernos una idea de lo que irá en la página, pero los cambiaremos para cada una.
- Cambia de línea y escribe el texto del pie, © Todos los derechos reservados. El símbolo © lo puedes insertar a través del menú Insertar → Caracteres y símbolos....
- Sin cambiar de línea, en la barra de formatos, en el primer desplegable, elige Contenedor genérico (DIV).
- Cambia al modo de edición de Código fuente.
- Vamos a encerrar la parte del encabezado en una división. Escribe la apertura de la etiqueta (
<div>) antes de la etiqueta <h1>.
- Escribe el cierre de la etiqueta (
</div>) tras el cierre de la lista (</ul>).
- En la página tenemos ahora dos divisiones, una para el encabezado y otra para el pie. Crea otra para el contenido, que englobe al título 2 y al párrafo.
- Para acabar, vamos a añadir el enlace a la hoja de estilos. Vuelve al modo de edición normal.
- En la barra de redacción, pulsa en CaScadeS.
- Despliega el menú de la izquierda y elige Elem. Enlace.
- En el campo URL escribe estilo.css y pulsa en Crear hoja de estilos. Pulsa Aceptar.
- En la barra de redacción, pulsa Guardar.
- Cuando te pida el título, escribe el nombre de la asociación y pulsa Aceptar.
- Asegúrate de que eliges la carpeta sitio_flores para guardarla, cámbiale el nombre por base.html y pulsa Guardar.
El código que has generado debe de ser muy similar a este:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type" />
<title>Floramics</title>
<link rel="stylesheet" href="estilo.css"
type="text/css" />
</head>
<body>
<div>
<h1>Floramics</h1>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="flores/index.html">Flores</a></li>
<li><a href="nosotros.html">Nosotros</a></li>
<li><a href="contacto.html">Contacto</a></li>
<li><a href="noticias.html">Noticias</a></li>
</ul>
</div>
<div>
<h2>Título</h2>
<p>Aquí irá el texto</p>
</div>
<div>© Todos los derechos reservados</div>
</body>
</html>
La página quedará así: base.htm
Cursos Informática Gratuitos
