Taller 1 Creación una Página Web Personal El objetivo de este taller es comenzar a trabajar los elementos básicos utilizados en HTML como imágenes, hipervínculos (links), listas, tablas, para crear una página Personal, además aplicando hojas de estilo CSS. En esta primera sesión solo se usará HTML para agregar los elementos como texto, listas, imágenes, vínculos, tablas con la información relevante, luego se definirán y aplicarán las CSS.
1. El desarrollo de una página web involucra varias fases, la planificación, el diseño y el desarrollo; en cada una de estas se definen elementos que conllevarán a implementar una buena página. Planificación: En esta fase se define la temática de la página, el contenido que llevará y la información que se requiere para ello, para este caso la temática es una página personal, el contenido hace referencia a que información va a presentarse, en este caso se van a tratar temas como: información personal o perfil, actividades, links de importancia, comunidades y contactos. Adicionalmente es necesario recopilar archivos adicionales o referencias que necesitan, por ejemplo una foto personal, un conjunto de vínculos a páginas importantes entre otros. Diseño: Esta fase es importante porque establece la distribución de la información y los elementos que se van a presentar en la página, se definen tres secciones básicas: El encabezado, el menú de opciones de la página, el contenido y el pie de la página: Tal como se presenta en la siguiente imagen: Encabezado Menú de Navegación Contenido Pie Desarrollo: Corresponde al proceso en el cual se comienza a generar la página a partir de HTML, agregando etiquetas (tags) que permiten presentar los elementos ya planteados. Para esta tarea se pueden usar varios editores de texto incluso text, porque no se requiere ninguna plataforma ya que el lenguaje Bluefish HTML es muy sencillo y fácil de entender. En este caso se va a utilizar el editor BlueFish, ya que es un editor que posee una interfaz sencilla y facilita agregar algunas etiquetas rápidamente.
2. Para comenzar es necesario crear un directorio donde se almacenarán los archivos que conformarán la página, tales como imágenes, videos y páginas adicionales por ejemplo Web, identifique la ubicación de dicho directorio con la siguiente estructura. Coloque los archivos de imágenes en el directorio imágenes y si lo requiere cree las carpetas necesarias para agregar más elementos. 3. Cuando ya se ha definido la ubicación, se procede a crear la página principal. Abra el editor de HTML, puede utilizar el bloc de notas o para este caso el Bluefish.Usted observará la siguiente imagen. Barra de Menús Barras de Herramienta s Vista de Código Vista de Edición 4. CREACIÓN DE LA ESTRUCTURA DE LA PÁGINA En la barra de herramientas seleccione la sección Estándar, esta contiene los botones de acceso a las tareas más comunes que se pueden activar en el documento de la página tales como: aplicar formatos, agregar links o imágenes, entre otros. Para comenzar haga clic en el botón de Inicio rápido (primer botón de la izquierda ), de esta forma podrá crear una página web con las etiquetas básicas de HTML.
Al realizar esta acción aparecerá el siguiente cuadro de inicio rápido donde deberá seleccionar el tipo de documento DTD, agregar un titulo de la página y seleccionar los metadatos que se necesiten. Para quitar los metadatos, seleccione cada metadato y haga clic en el botón Remove. Finalmente haga clic en el botón OK. De esta forma usted ha generado la estructura básica de una página Web, tal como se observa a continuación. Observe que cada renglón tiene activas las etiquetas básicas en HTML : <!DOCTYPE html> Esta etiqueta define el tipo de document que se va a crear <html> Define el inicio y final de la página web se cierra con la etiqueta </html> <head> Corresponde a la definición de el encabezado o cabecera de la página y puede contener varias etiquetas, se cierra con la etiqueta </head> <title>página Personal</title> Permite crear un titulo a la página, el cual aparecerá en la barra de título del navegador cuando la página sea abierta.
<body> Corresponde a la sección del cuerpo de la página, puede contener varias secciones o elementos, por lo generar es en esta donde se agrega la mayor parte de información de la página, se cierra con la etiqueta </body> 5. GUARDAR LA PÁGINA Para guardar la página Active el menú Archivo y la opción Guardar o haga clic en el ícono Guardar. 6. Seleccione la ubicación donde se guardará el archivo que contiene la página luego escriba el nombre del archivo (index.html) y el directorio Web previamente creado o haga clic en el botón Crear Carpeta (Create Folder). Seleccione Archivos web en la lista de tipo de archivo. Finalmente seleccione el botón Guardar (Save). Observe que el texto del editor ha cambiado de color las etiquetas HTML, esta es una forma fácil de diferenciarlas.
7. ELEMENTOS DE TEXTO: ENCABEZADOS Inicialmente se adicionarán los elementos de texto de la página entre estos el título. Seleccione el Menú Etiquetas, la opción encabezado y luego la opción H1, de esta forma usted agregará un Encabezado de nivel 1. Escriba su nombre dentro del código donde aparecen las etiquetas <h1></h1> Por ejemplo <h1> Pepito Pérez </h1>. Luego realice la misma operación para seleccionar Encabezado de nivel 2 con la opción H2 y escriba su profesión u oficio entre las etiquetas <h2>ingeniero</h2>. De esta manera observará lo siguiente: Observe que las etiquetas de Encabezado corresponden a <h1> y <h2>. 8. VISUALIZAR LA PÁGINA EN EL NAVEGADOR Guarde los cambios hechos y haga clic en el botón Previsualizar en el navegador.
De esta forma se abrirá una ventana con el navegador que presentará la página que ha sido creada. Usted podrá ir haciendo cambios en el código, almacenándolos y actualizando la vista en el navegador. 9. CREACIÓN DE LISTAS Active la Sección listas en la barra de herramientas y haga clic en el botón lista rápida. Seleccione el número de filas, para el ejemplo seleccione el número 4, luego escoja el estilo de la lista en este caso seleccione la opción Ordenada. Finalmente haga clic en el botón Aceptar ( OK). Usted observará el código que contiene una lista ordenada usando la etiqueta <ol>, esta permitirá agregar elementos que contienen símbolos o viñetas para distinguirlos cada elemento se encuentra entre las etiquetas <li> </li>. Escriba el nombre de cada tema que desee tratar en la página, ejemplo: Perfil, Links de interés, Comunidades y Contacto. 10. PARRAFOS Los párrafos son secciones de texto que van desde el inicio de una línea hasta el punto. Para agregar este elemento se usa la etiqueta <p>.
Coloque el texto Perfil como Encabezado de nivel 3, en el código después de la lista que agregó en el punto anterior, luego escriba la información relacionada como texto de párrafo y finalmente agregue la información de pie de página (texto informativo). Tal como se presenta a continuación <h3>perfil</h3> <p>bienvenido a mi página personal. Aqui encontrarás infrormación sobre mis actividades, gustos, comunidades y vínculos de interés.bien, lo importante es que hace 23 años nací en Bogotá, desde muy niño me ha llamado la atención todo esto del internet, trabajo junto a mi familia en un pequeño negocio y en mis ratos libres soy desarrolador de paginas Web, actualmente me encuentro participando en la Capacitación de Diseño Web para las JAC en la Universidad Distrital Francisco Jose de Caldas.</p> 11. PIE DE PÁGINA Para agregar los derechos de autor se puede adicionar una sección en la página que se utiliza con la etiqueta Footer. Active la sección HTML y seleccione el botón Footer Escriba el siguiente texto entre las etiquetas <footer> <p>copyright 2015 Este sitio está desarrollado por Pepito Perez, asesorado por Universidad Distrital </p> </footer> Hasta este momento la página deberá observarse de la siguiente forma.
12. INSERCIÓN DE IMAGENES El uso de imágenes en HTML se establece con la etiqueta <img>, esta posee el atributo src, al cual se asigna la ubicación o ruta del archivo de la imagen. Lo más común es que la imagen se encuentre en el mismo directorio que la pagina html, en este caso si se quiere asignar la imagen a la página se podría utilizar la siguiente ruta para agregarla: <img src= foto.jpg > Pero cuando se utiliza una estructura de archivos organizada, donde las imágenes se encuentran en un directorio y las paginas en otro tal como se ha establecido inicialmente, es necesario utilizar la siguiente ruta: <img src=../imagenes/ foto.jpg > - Utilizando el editor no es necesario escribir la línea de código solo active el botón Insertar Imagen del cuadro de elementos en la sección Estandar. Seleccione la ubicación del archivo donde se encuentra la imagen y agregue el texto alternativo (este permitirá dar mayor información a dispositivos accesibles tales como lectores de pantalla, en el caso de que los usuarios tengan una discapacidad visual). Por último active el botón Aceptar (OK).
13. VINCULOS Y DESTINOS EN LA MISMA PAGINA Los vínculos o links se pueden enlazar en la misma página o a páginas externas. Para agregar los vínculos en la página se utiliza la etiqueta <a>. Inicialmente debe completarse la información de cada una de las secciones que fueron definidas para la página (Perfil, Actividades, Links de interés, Comunidades y Contacto). Un ejemplo de estas se presenta a continuación: Información Personal Bienvenido a mi página personal. Aquí encontrarás información sobre mis actividades, gustos, comunidades y vínculos de interés. Bien, lo importante es que hace 23 años nací en Bogotá, desde muy niño me ha llamado la atención todo esto del internet, trabajo junto a mi familia en un pequeño negocio y en mis ratos libres soy desarrollador de páginas Web hace 2 años, actualmente curso el La capacitación en Diseño Web para las JAC en la Universidad Distrital. Actividades En mi tiempo libre realizo las siguientes actividades Cine: Cada vez que hay un estreno interesante voy a las salas de cine, la última película que vi fue El Lobo de Wall Street. Diseño Web: Es la mas importante de mis aficiones, me gusta buscar en internet herramientas para crear páginas y agregar elementos novedosos. Viajar: Aunque mi economía no me permite viajar tanto, procuro ir a sitios de interés en Colombia, por ejemplo Amazonas o la Isla Gorgóna. Links de Interés Las siguientes páginas son las que uso constantemente para buscar información y mantenerme al día. Buscador Google Página Software Libre GNU Página Tutoriales W3School Página Universidad Distrital Comunidades Aunque por mis compromisos no puedo estar conectado constantemente, si tengo mi cuenta en Facebook, puedes contactarme como Pepe Perez, también tengo un grupo a través de mi correo gmail con los que comparto información por el Drive y DropBox. Contacto Si deseas contactarme puedes usar mi correo p.perez@gmail.com. Estaré atento a tus comentarios y aportes!. Cuando ya esté completa la información se podrá agregar las etiquetas de destino en la página, para esto se usan los atributos name o id.
14. Agregar destinos en la página Ubique el cursor en el titulo donde desea establecer el destino por ejemplo Perfil y selecciónelo. Luego haga clic en el botón Ancla en la barra de herramientas estándar, en el cuadro que aparece escriba una palabra que identifique ese destino en la caja de texto nombre. Tal como se observa en la imagen. Finalmente presione el botón Aceptar (OK). Al realizar esta acción el código quedará de la siguiente manera: <h3><a name="perfil">perfil</a></h3> Realice el mismo proceso con las demás secciones solo seleccionando una palabra del texto.
15. Adicionar Vínculos (Hipervínculos) Para adicionar los vínculos seleccione el texto que desea establecer como un hipervínculo. Por ejemplo para colocar el hipervínculo de en la opción Perfil de la lista seleccione la palabra perfil (recuerde que para seleccionar puede hacer doble clic sobre la palabra) Haga Clic nuevamente en el botón Ancla en la barra de herramientas estándar. En el cuadro que aparece, escriba el nombre del destino precedido por el símbolo #, por ejemplo #perfil. Finalmente presione el botón Aceptar (OK). El código que se mostrará será el siguiente: Realice la misma operación para colocar los demás vínculos a las demás opciones de la lista. Guarde los cambios y visualice la página, pruebe todos los vínculos para verificar su funcionamiento.
16. VINCULOS A PAGINAS EXTERNAS Para adicionar vínculos hacia otras páginas también se utiliza la etiqueta <a>, aunque en este caso solo se agrega la URL o dirección de la página que se desea enlazar. En la Sección Links de Interés, se pueden agregar los vínculos de las páginas, por ejemplo el Buscador Google. Seleccione el texto del hipervínculo que va a crear y luego active el botón Ancla. En el cuadro que aparece adicione la dirección Web de la Página, ejemplo: https://ww.google.com. Al guardar los cambios en el código aparecerá la siguiente línea: <p><a href="www.google.com.co">buscador Google</a></p> Realice la misma operación con las demás secciones y visualice la página en el navegador para comprobar.
17. TABLAS En la sección Actividades Agregue la tabla que se presenta a continuación. Ubique el cursor después del texto de la sección actividades y realice una de las siguientes operaciones: Para crear tablas se usa la etiqueta <table>. En bluefish se puede crear una tabla usando el menú Etiquetas y la opción Tablas luego tablas o con el botón Asistente para Tablas en el la barra de herramientas Tablas. En la caja de diálogo que aparece, defina el número de filas y de columnas, también seleccione la opción Filas en una línea para que el código aparezcan las celda fila por fila. Finalmente presione el botón Aceptar (OK).
Usted observará el siguiente código <table> <tr><td></td><td></td><td></td></tr> </table> Haga clic derecho sobre la etiqueta <table> y seleccione la opción Editar Etiqueta En el cuadro que aparece seleccione el tipo de alineación Aling en center y active la opción Border. Usted observará el siguiente código al final. <table border="border" align="center"> <tr><td></td><td></td><td></td></tr> </table> Entre las etiquetas <td></td> coloque la información que requiera, por ejemplo: <tr><td>1</td> <td>la vida es bella</td><td>1997</td>></tr> Copie y peque la misma línea para agilizar la edición de lapágina o Puede ir agregando filas con los botones que aparecen en la barra de Tablas. Activación de la Leyenda (esta opción activa el atributo Caption en la tabla, que es una breve descripción de la misma o un titulo). Ubique el cursor después de la etiqueta <table> presione el botón Leyenda de la tabla en la barra de herramientas Tabla y agregue la descripción. De la siguiente manera:
<caption>listado 10 Mejores Películas</caption> Visualice la página para verificar los cambios. Finalmente se han adicionado las secciones e información necesaria, ya puede publicar la página en su bloc en un Blog. El paso siguiente es aplicar estilos a la página o convertirla en un sitio Web. Este proceso será explicado en la próxima sesión.