Descargar para leer sin conexión
Practicakompozer 3
- 1. Práctica 1: PrimeraWeb con Kompozer Las imágenes, animaciones, sonidos, etc. que se introducen en una página Web no se quedan incrustadas en ella como ocurría en Writer o Impress. El motivo es que todos estos recursos ralentizan la apertura de la página Web, que será más lenta cuanta más memoria requiera su uso, y esto puede causar que el usuario se aburra y se vaya a otra página. Por esto una página Web consta de un texto (que se carga fácil y rápidamente) con una serie de enlaces o vínculos que indican el camino donde están guardados los recursos multimedia (que se cargan más lentamente). En este documento se utilizarán: encabezado, texto e imagen. 1er paso: Crear las carpetas que se van a necesitar. Una simple letra mal puesta, al escribir la dirección dónde está un guardado un recurso, hará que este recurso no se pueda visualizar. Por eso es importante, antes de empezar a diseñar nuestra página, crear la estructura de carpetas que se van a necesitar. 1.- Crea una carpeta con el nombre de “materialesweb” para guardar todos los materiales que se hay que descargar del blog “http://www.lascosasquemeinteresan.wordopress.com”. 2.- Crea otra carpeta con el nombre: “miweb”. 3.- Dentro de la carpeta “miweb” crea una subcarpeta con el nombre: “imagenes”. 4.-.Descarga en la carpeta “materialesweb” los archivos correspondientes a esta practica: “disoluciones.doc” y “submarinista.jpg”. 5.- Mueve el archivo “submarinista.jpg” a la subcarpeta “imagenes”. En lo sucesivo la carpeta “imagenes” contendrá todas las imágenes que se integren en las páginas Web que se van a crear. Es recomendable que, tanto los nombres de carpetas como los de archivos, se escriban en minúscula y que no contengan acentos ni símbolos. 2º paso: Iniciar un documento nuevo en Kompozer. 1.- Inicia el programa Kompozer. Aplicaciones >> Internet >> Kompozer Por defecto se empieza a trabajar en el modo de edición normal o de diseño. 2.- Cambia a modo de edición “Código fuente”. Elige la solapa correspondiente en la parte inferior de la página. Observa que, aunque aún no has escrito nada, Kompozer ya ha introducido una serie de etiquetas en el documento en blanco. Entre ellas las ya conocidas: <html>, <head>, <body> y <title>.
- 2. También aparece unaprimera línea: <!DOCTYPE html PUBLIC ="-//W3C//DTD HTML 4.0//EN">. Siguiendo las indicaciones del W3C (consorcio internacional que se ocupa de normalizar el uso del HTML) DOCTYPE debe ser el primer elemento que abra un documento. Esto quiere decir que debe preceder a <HTML>. Se trata de una marca que no necesita cierre y cuya función es facilitar información al servidor Web que aloja la página. Esta línea proporciona los siguientes datos: • HTML PUBLIC: el documento es público. • DTD HTML 4.0: la versión de HTML soportada es la 4.0 • EN: el idioma del documento es el inglés El uso de DOCTYPE no es obligatorio y puede omitirse. Seguramente su uso ayuda al servidor Web a interpretar correctamente el documento, pero su ausencia no condiciona la correcta visualización. 3.- Cambia al modo normal o de diseño. Antes de continuar, conviene guardar la página Web, aún en blanco, en la carpeta “miweb”. Esto se hace para evitar problemas con el itinerario a la hora de insertar la imagen. Lo normal, es que el camino para buscar la carpeta donde está guardada la imagen, que se va a insertar después, empiece en la carpeta donde esté guardado el archivo HTML, en este caso, el archivo “descompresion.html”. 4.- Pulsa en el botón “Guardar” o bien elige Menú Archivo >> Guardar. Aparece un cuadro de diálogo que pide el título de la página. 5.- Escribe: “La descompresion” y haz clic en el botón “Aceptar”. 6.- Se muestra el cuadro de diálogo “Guardar página como”. 7.- Depliega la lista “Guardar en” para localizar la carpeta “miweb”. 8.- En la casilla “Nombre” introduce el nombre del archivo: “descompresion.html”. 9.- Clic en el botón “Guardar”. 10.- Minimiza esta ventana y utiliza el explorador de archivos para abrir (doble clic) el archivo de texto “disoluciones.doc” (en carpeta “materialesweb”). Se abrirá el procesador de texto. 11- Usa Edición >> Seleccionar todo para seleccionar el texto completo que contiene este archivo y a continuación elige Edición >> Copiar para copiarlo al portapapeles. Cierra la ventana del procesador.
- 3. Si no funcionaranestas opciones siempre usar “Ctrl.+C” y “Ctrol+V” para copiar y pegar. 12.- Maximiza la ventana de Kompozer y haz clic sobre la ventana del nuevo documento HTML que estás editando. 13.- En la barra de menús selecciona Editar >> Pegar. De esta forma podrás disponer del texto de la página sin necesidad de teclearlo. 3er paso: Dar formato al texto. Hay dos formas de modificar las características de un texto: a) Utilizando los iconos de la barra de Formato (o las opciones del Menú Formato) Los iconos son similares a los ya vistos en Writer pero con algunas diferencias: • La lista de fuentes se encuentra en el desplegable que pone: “Anchura variable”. • El icono siguiente permite definir el color del texto. • No se define el tamaño de letra con un número sino utilizando los iconos “Aumenta el tamaño de la letra” o “Reduce el tamaño de la letra” b) Utilizando el cuadro de estilos. Estos estilos pueden ser: Texto del cuerpo (viene seleccionado por defecto), Encabezados o títulos (hay varios disponibles) y Párrafos. Más adelante se verá como modificar la hoja de estilos. 14.- Título. Selecciona la primera línea de texto: “Las disoluciones y el submarinismo a grandes profundidades”. 15.- En la barra de Formato despliega el cuadro de estilos de párrafo y elige Título 1. 16.- Si deseas regresar al estilo normal, marca el texto que desees y selecciona en esta lista: Texto del cuerpo. 17.- Pon el título de color rojo. En el texto, hay una serie de fórmulas que están mal escritas: O2, N2, CO2. El número 2 que aparece en todas ellas debe tener el formato de subíndice. 18.- Busca las fórmulas en el texto, selecciona el número y aplica: Menú Formato >> Estilo de texto >> Subíndice
- 4. Algunas etiquetas html Lafuente: con el atributo face de la etiqueta <Font>. Alineación: • Izquierda: <p align="left"></p> • Centro: <p align="center"></p> • Derecha: <p align="right"></p> • Justificar: <p align="justify"></p> Tamaño: <small> y <big>. 4º paso: Insertar una imagen. Antes de incluir imágenes en nuestra página hay que tener en cuenta lo siguiente: • Su utilidad, si es realmente necesaria o no. • Tamaño: el tamaño del archivo de imagen depende de las dimensiones de la imagen y del número de colores que la forman. El objetivo es lograr que la página se cargue lo más rápidamente posible. • Formato: para colores puros con no más de 256 colores y gráficos muy simples usaremos el formato GIF o PNG. Para imágenes con más de 256 colores usaremos el formato JPG o PNG24. • Resolución: conviene usar las imágenes con su tamaño real, evitando que sea el navegador el encargado de reducirlas. Si necesitamos mostrar un numero elevado de imágenes, lo mejor es usar una versión muy reducida de las mismas (thumbnails o miniaturas) a modo de índice y enlazar con páginas individuales donde se muestre cada imagen por separado a mayor resolución. • Al diseñar la estructura del sitio conviene utilizar una carpeta para guardar las imágenes. Una vez que se ha insertado una imagen en la página, podremos editar sus propiedades y personalizar su diseño, como la altura, anchura, espaciado y alineación del texto. 19.-Clic en el sitio donde queramos que aparezca la imagen. 20.- Menú Insertar >> Imagen o el botón Imagen. Se muestra el cuadro de diálogo Propiedades de imagen. 21.- Pulsa en el botón “Elegir archivo…” para localizar el archivo que contiene la imagen: “submarinista.jpg”. 22.- Al regresar de nuevo al panel “Propiedades de imagen” conviene introducir el “Texto alternativo”.
- 5. Se trata deun texto descriptivo que contribuye a la accesibilidad de nuestra página y que se mostrará cuando el usuario sitúe el ratón sobre ella. 23.- En este caso teclea “submarinista”. 24.- Observa que en la casilla “Ubicación de la imagen” se indica la ruta relativa para localizar la imagen desde la página actual: “imagenes/submarinista.jpg”. Es muy importante que esta dirección esté correctamente indicada. 25.- Para terminar clic en el botón “Aceptar.” 26.- Guarda la página Web. 6.- Ver el resultado 27.- Minimiza la ventana de Kompozer para situarte en la carpeta “miweb”. 28.- Doble clic sobre el archivo “descompresion.html” creado, para ver su aspecto con el navegador Web instalado por defecto. Etiqueta <IMG> Determina la localización de una imagen. No tiene cierre. Atributos de la etiqueta <IMG>: • src ="...": Ruta origen para localizar el archivo de la imagen. (source/fuente). • alt="...": Texto alternativo que aparece en lugar de la imagen si el navegador no puede mostrar la imagen. Tambien es mostrado al colocarnos sobre la imagen en un letrero amarillo. • width="...": Establece el ancho de la imagen. • height="...": Establece el alto de la imagen. • border="...": Muestra un marco con el número de pixeles deseado. • align="...": Alinea la imagen respecto al texto.