Kompozer
¿Qué es una página Web? • Es un documento digital que puede contener texto, imágenes, vídeos,….. , y además tiene distribuidos a lo largo del documento enlaces que sirven para acceder a otras páginas web. • Necesitamos disponer de üOrdenador. üConexión a internet. ONavegador ( Firefox, Explorer, Google Chrome… ) El Lenguaje HTML • El lenguaje HTML es el «idioma» en el que están escritas las páginas web. Están basadas en etiquetas. Práctica: Vamos a ve tiene por debajo una 1. ir a la página http:/ 2. otón derecho/ver Etiquetas HTML 5 gin wipe next pase ww. i •Son marcas escritas entre corchetes angulares, que se colocan al principio y al funal de la zona de texto a la que queremos aplicar un efecto. Etiqueta inicial Contenido
TituIo de la página, hoja de estilo. Título de la ventana que aparece en el navegador. Entre estas etiquetas inclu contenido de la página we oner Pl _ nombreapellido. 2. Abre el bloc de notas:lnicio/todos los programas/Accesorios/ Bloc de notas. 3. Copia en el bloc de notas las etiquetas básicas e imprescindibles que ha de contener un página web (Estructura página web). 4. Añade el texto «Saludo» entre las etiquetas y 5. Luego añade el texto «HOLA MUNDO» entre las etiquetas Inserta este texto en una etiqueta de encabezado de orden 2. HOLA, MUNDO 6.
En el menú Archivo ‘Guardar como. En la opción Tipo elige Todos los archivos(*. *) y en Nombre escribe Pl _ El_nombreapellido. html. 7. Accede a la carpeta anterior haz clic con el ratón sobre el archico que acabas de crear. KompoZer Kompozer es un programa de software libre, gratuito, de muy fácil manejo y muy completo para la creación de páginas web. Es multiplataforma (Windows, Linux,. ,. ). Ejercicio 2: Descargar e instalar Kompozer. 1. Abre tu navegador y entra en www. kompozer. net» download. php. 2. Haz clic sobre download para Windows. 3.
Elige Guardar. 4. Elige carpeta. 5. Instala el software descargado. 30F Ejercicio 3: «Hola, Mundo» neceario lo tienes en la barra de formato(alineación, cambiar color, cambiar tipo de letra, cambiar amaño letra, PRACTICA 1: Diseño de un sitio web completo dedicado a deportes. Diseñaremos un sitio web completo dedicado a deportes , el sitio estará formado por 4 páginas web: -Una inicial de bienvenida. -Otras tres dedicadas a fútbol, baloncesto y tenis. Tendremos la siguiente estructura de páginas: PASO 1: Diseñar la estructura de la página. . Crea en tu ordenador una carpeta llamada P3_nombreapellido. Dentro de ella crea una carpeta llamada img y copia en esta todas las imágenes que aparecen en la wiki. 2. Abre el programa KompoZer. 3. Pulsa Editar sitios. 4. pulsa el botón Guardar. Cuando pida el título, escribe «Deportes-lnicio». Guarda la página como index. html(este es el nombre que habitualmente tiene la página inicial de un Sitio web) y asegúrate de hacerlo en la carpeta que has creado para el sitio. 5. Va a poner una imagen de fondo a la página, a modo de mosaico.
Formato/colores y fondo de la página/elegir PAGF40F pestaña Tabla, pon un ancho de 700 píxeles; en Borde, Espaciado y Relleno, pon un 0, y en Alineación de la tabla elige Centrada (Ver figura). 9. Clic con el botón derecho sobre la tabla interior y selecciona Propiedades de la celda de la tabla. En la pestaña Tabla, pon un ancho de 100%; en Borde, Espaciado pon 0 y Relleno a 10. En la pestaña Celdas, pulsa botones Anterior o Siguiente hasta que quede marcada la celda de la izquierda, la que contendrá el menú. Ponle un ancho de 159 p[xeles. 10.
Elegir colores de fondo para la estructura(no deben molestar: no despiste del contenido y se vea el texto). Botón derecho sobre la celda/Color de fondo de la tabla. Algunas celdas las puedes dejar transparentes para que se vea el color de fondo. PASO 2: La cabecera. La cabecera de una página web es muy importante porque es lo nmero que el usuario ve y a partir de ella tiene que identificar de qué trata nuestro sitio web. Dependiendo de los colores que hayas utilizado para la cabecera tendrás que utilizar unos colores u otros para el texto, de forma que la lectura sea cómoda 1.
Sitúate con el ratón en la celda superior, la cabecera. Escribe palabra del Titulo por separado y dale un color distinto con el botón 4. Selecciona el texto «Fútbol, Baloncesto y Tenis» y ponlo como Título 3 y centrado. Dale color rojo oscuro, por ejemplo. Vamos a insertar ahora una imagen que anime un poco la página. 5. Ponte al principio del texto «MIS DEPORTES FAVORITOS» y pulsa el botón Imagen de la barra de redacción. 6. En la ventana que aparece, dentro de la pestaña Ubicación, pulsa el botón Elegir archivo y busca el archivo P3_E2_Balon. gif de la carpeta img. omo texto alternativo Balón. Ve a la pestaña Apariencia. En Alinear el texto con la imagen, selecciona En el centro. 7. ve al final de la frase «MIS DEPORTES FAVORITOS» y repite la misma operación para insertar de nuevo la misma imagen. 4. Selecciona el texto «Fútbol, Baloncesto y Tenis» y ponlo como Título 3 y centrado. Dale color rojo oscuro, por ejemplo. PASO 3: El pie de página. Esta es la zona mas sencilla. Lo que suele contener el pie de página son datos como los derechos de autor, enlaces a las secciones más importantes, la autoría del sitio web, la fecha de la última actualización,… . Sitúate con el ratón en la celda inferior de la tabla, en el pié de página, y escribe tu nombre completo. Pulsa intro y es re de tu centro tu curso. Pulsa de curso y ponlos centrados y como título 3 pulsando los botones correspondientes de la barra de formato. PASO 4: El menú. A continuación diseñaremos el menú de la izquierda. Deberás scribir todos los enlaces a las distintas páginas que corresponden el sitio web. 1. Haz clic con el botón derecho del ratón sobre la celda izquierda, del menú.
Elige Propiedades de la celda de la tabla. 2. En la ventana que aparece, sobre a pestaña Celda, en el apartado Alineación del contenido, Vertical, elige Superior. 3. Sitúate en la celda de la izquierda, escribe «MENÚ PRINCIPAL» y pulsa dos veces Intro. Con el ratón, selecciona ese texto y ponlo en negrita y centrado pulsando los botones correspondientes de la barra de formato. 4. Después escribe «inicio», pulsa «intro» y escribe Fútbol» y así con todos los deportes que has elegido. 5. Ahora vamos a crear los enlaces al menú.
Empezaremos por el enlace Inicio, con un enlace que cuando alguien pulse sobre esta opción vaya a la página inicial , a index. html. 5. Con el ratón selecciona «Inicio», pulsa el botón Enlace de la barra de redacción V, en la ventana escribe «index. html». hacerlo con las distintas opciones de la barra de modos de vista, o mejor pulsa el botón navegar de la barra de navegación. PASO 5: El contenido de la página inicial(index. html). La página inicial , que hemos llamado index. tml, servirá como bienvenida. Además, en ella informaremos al visitante de qué es lo que va a encontrar en nuestro sitio web. . Haz clic con el botón derecho del ratón sobre la celda central, la que albergará el contenido. Elige Propiedades de la celda de la tabla. 2. En la ventana que aparece, sobre a pestaña Celda, en el apartado Alineación del contenido, Vertical, elige Superior. 3. Sitúate en la celda de la central, escribe «BIENVENIDO A MI WEB» y pulsa intro. Dale color verde oscuro y aplicale Titulo 1. 4. Debajo, escribe «Aqui encontrarás información interesante de deportes favoritos». Centra este texto. 5. Debajo inserta una tabla de dos filas y tres columnas, con un ancho del 100%. . En las celdas superiores, inserta las siguientes imágenes, una en cada celda: P3_E5_ enis. jpg. y en las celdas inferiores escribe el nombre de cada uno de los deportes que representa PASO 5: El contenido de I l(index. html). 80F 7. Debajo de esta tabla, es el menú principal de la «Espero que disfrutes». 9. Guarda la página con el botón «Guardad. PASO 6: El contenido de la página de fútbol(fútbol. html). 1. pulsa el botón Nuevo de la barra de redacción. Aparecerá en una pestaña ueva del área de trabajo un documento en blanco. 2.
Como hicimos al principio, vamos a guardar la página antes de empezar a rellenarla de contenido. Pulsa el botón Guardar. 3. Primero te pide el t[tulo de la página;escribe «Fútbol». 4. Después deberás darle un nombre; Llámala futbol. html. Asegúrate de guardarla en en la misma carpeta que las anteriores, en tu sitio web. 5. El siguiente paso es dar a la página la misma estructura que a la anterior, repitiendo los contenidos de la cabecera, menú y el pie de página. 6. Una vez preparada la página, escribe » FÚTBOL» como titular al rincipio de la celda de contenido.
Hazlo con las mismas características de » BIENVENIDO A MI WEB » en la página inicial. 7. Accede a la página web es. wikipedia. org y escribe «fútbol» en el buscador para coger información sobre este deporte. 8. Copia en tu página los dos p imeros párrafos, por ejemplo, e inserta entre ellos alguna imagen, al principio o al final. Puedes utilizar la imagen P3 E6_Futb012. jpg de la carpeta img o cualquier otra. No olvides que para utilizar una imagen debes arpeta img de tu sitio web. pulsando el botón Alinea justificando ambos márgenes de la barra de formato.
Por último, al final de la página vamos a añadir algunos hiperenlaces a otras páginas web de internet que traten sobre el mismo tema. Esto es algo muy habitual; la mayoría de páginas web que tratan sobre un tema cualquiera tienen tienen una sección de páginas web seleccionadas por el autor para que el visitante pueda profundizar sobre el tema. Un enlace o hipervínculo se compone de dos partes: el texto o imagen que hará de enlace, donde el usuario pulsa, y la dirección web de página a la que ese enlace debe llevarle. 10. Escribe al final de la página «Para saber más:» y ponlo como
Titular 3. 11. Los enlaces a páginas web externas los presentaremos con una lista de viñetas. PuIsa el botón Lista de viñetas de la barra de formato. 12. La primera será un enlace a la pagina web de la FIFA. Escribe «FIFA» (este texto hará de enlace). Selecciona el texto con el ratón y Enlace de la barra de redacción. En la ventana que se abre , escribe http://www. fifa. com. 13. La segunda será un enlace a la Liga de Fútbol Profesional. pulsa intro para crear una nueva líne scribe «Liga de fútbol 0 DF 15 Profesional». Selecciona e a el botón enlace. En la
