Páginas WEB Parte II INTRODUCCIÓN A LAS TECNOLOGÍAS INFORMÁTICAS Escuela de Ingeniería de Sistemas y Computación – Universidad del Valle Contenido Implementación de Sitios Web Herramientas de desarrollo Editores de código HTML Aplicaciones para la edición de imágenes El lenguaje (X)HTML Historia Estructura Manejo de texto Manejo de Imágenes Manejo de Enlaces Manejo de Tablas Aplicación de hoja de estilos Diagramación (Estilos en las cajas) Estilos en el texto Estilos en los enlaces EISC - Introducción a las Tecnologías Informáticas 2 Herramientas de Desarrollo Editores de Código (X)HTML Editores de (archivos de) Texto (Plano) Windows: WordPad, NotePad Linux: Vi, Pico, Emacs Se escribe un archivo de texto con extensión htm o html EISC - Introducción a las Tecnologías Informáticas 3 Herramientas de Desarrollo Editores de Código (X)HTML Editores de texto que reconocen Sintaxis Windows: TextPad, EditPad, NotePad++, VIM Linux: Nedit, Gedit,Kate, BlueFish Reconocen la Sintaxis Colorean etiquetas Marcan errores Brindan sugerencias EISC - Introducción a las Tecnologías Informáticas 4 Herramientas de Desarrollo Editores de Código (X)HTML Editores Gráficos Windows: DreamWeaver, FrontPage, GoLive KompoZer (Nvu) Linux: QuantaPlus Nvu Permiten visualizar el resultado en el mismo entorno EISC - Introducción a las Tecnologías Informáticas 5 Herramientas de Desarrollo Aplicaciones para Tratamiento de Imágenes ● ● ● Se deben optimizar las imágenes para que su peso sea el menor posible y aún se vean bien en pantalla Reducir Tamaño de la Imagen Tipo de archivo según el tipo de imagen Cantidad de colores Porcentaje de calidad A menor tamaño de la imagen, menor será su tiempo de transferencia en la red Cuando las imagen a desplegar tienen un gran tamaño, se usa la estrategia de dividirla en varias imágenes. Se ven como una sola, acomodándolas en celdas contiguas de una tabla. EISC - Introducción a las Tecnologías Informáticas 6 Herramientas de Desarrollo Aplicaciones para Tratamiento de Imágenes Tratamiento de Imágenes Windows: FireWorks, PhotoShop Gimp Linux: Gimp EISC - Introducción a las Tecnologías Informáticas 7 El Lenguaje (X)HTML Historia ● ● ● ● HTML fue propuesto en 1989 por Tim Berners-Lee para promover la publicación de información a través de la naciente Internet Los documentos HTML por ser archivos de texto, son de poco tamaño, aptos para transmisión en Internet El Consorcio W3C mantiene el estándar de este lenguaje XHTML es el sucesor de HTML, es por eso que muchos lo consideran la versión actual de HTML, pero es una recomendación aparte que tiene una sintaxis más estricta que HTML. EISC - Introducción a las Tecnologías Informáticas 8 El Lenguaje (X)HTML Estructura (X)HTML usa etiquetas o marcas (lenguaje de marcado) que consisten en breves instrucciones de comienzo y final Toda etiqueta se identifica porque está encerrada entre los signos menor que (<) y mayor que (>) Todo el contenido de un documento HTML está enmarcado dentro de etiquetas Las etiquetas HTML indican al navegador cómo presentar (formatear) el contenido en la pantalla (color, tamaño, alineación, fuente, etc.) EISC - Introducción a las Tecnologías Informáticas 9 El Lenguaje (X)HTML Estructura En su mayoría, las etiquetas presentan una marca de apertura y otra de finalización <etiqueta>contenido</etiqueta> Algunas pocas etiquetas no tienen un contenido o etiqueta de finalización Salto de línea <br /> Línea Horizontal <hr /> Definición de Imagen <img src=”imagen.jpg” /> EISC - Introducción a las Tecnologías Informáticas 10 El Lenguaje (X)HTML Estructura En su mayoría, las etiquetas presentan una marca de apertura y otra de finalización <etiqueta>contenido</etiqueta> Algunas pocas etiquetas no tienen un contenido o etiqueta de finalización Salto de línea <br /> Línea Horizontal <hr /> Definición de Imagen <img src=”imagen.jpg” /> EISC - Introducción a las Tecnologías Informáticas 11 El Lenguaje (X)HTML Estructura Algunas etiquetas incluyen atributos a los que se les puede dar valor <etiqueta atributo1=”valor1” atributo2=”valor2” ... atributoN=”valorN”>contenido</etiqueta> Ejemplos: <table bgcolor=”white” width=”100%”>...</table> <a href=”http://www.univalle.edu.co”>Universidad del Valle</a> Para una lectura más cómoda, en el archivo HTML se debe presentar las etiquetas identadas según la jerarquía de contenido <etiquetaPadre> • <etiquetaHija>...</etiquetaHija> </etiquetaPadre> EISC - Introducción a las Tecnologías Informáticas 12 El Lenguaje (X)HTML Estructura <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Título de la Página</title> </head> <body> Contenido de la Página </body> </html> Inicio del documento Encabezado Cuerpo Fin del documento Encabezado: define características y atributos especiales del documento, se denota entre las etiquetas <head></head> Cuerpo: contiene la información a mostrar, se denota entre las etiquetas <body></body> EISC - Introducción a las Tecnologías Informáticas 13 El Lenguaje (X)HTML Manejo de Texto – Caracteres Especiales HTML tiene una manera especial de presentar algunos caracteres: á é í ó ú ñ (espacio ¿ ü < & &aacute; &eacute; &iacute; &oacute; &uacute; &ntilde; obligatorio) &iquest; &uumi; &lt; &amp; Á É Í Ó Ú Ñ &Aacute; &Eacute &Iacute &Oacute &Uacute &Ntilde; “ º ª © ™ & &quot; &ordm; &ordf; &copy; &trade; nbsp; ¡ Ü > € %iexcl; &Uumi; &gt; &euro; ₤ ½ ¼ ¾ &pound; &frac12; &frac14; &frac34; EISC - Introducción a las Tecnologías Informáticas 15 El Lenguaje (X)HTML Manejo de Texto - Títulos Se puede manejar jerarquía de títulos usando las etiquetas <h1>, <h2>, <h3>, <h4>, <h5> y <h6> <h1>T&iacute;tulo más grande</h1> <h2>T&iacute;tulo de tamaño 2</h2> <h3>T&iacute;tulo de tamaño 3</h3> <h4>T&iacute;tulo de tamaño 4</h4> <h5>T&iacute;tulo de tamaño 5</h5> <h6>T&iacute;tulo más peque&ntilde;o</h6> Título más grande Título de tamaño 2 Título de tamaño 3 Título de tamaño 4 Título de tamaño 5 Título más pequeño EISC - Introducción a las Tecnologías Informáticas 16 El Lenguaje (X)HTML Manejo de Texto – Numeración y Viñetas Lista NO Ordenada (Viñetas): <ul>...</ul> <ul> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> </ul> El Atributo type indica el tipo de viñeta a usar: circle,square <ul type="square"> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> </ul> EISC - Introducción a las Tecnologías Informáticas 18 El Lenguaje (X)HTML Manejo de Texto – Numeración y Viñetas Lista Ordenada (Numeración): <ol>...</ol> <ol> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> </ol> El Atributo start indica el inico de la cuenta: 1, 2, 3, etc El Atributo type indica el tipo de numeración a usar: A: letras en mayúsculas a: letras en minúsculas 1: números arábigos I: romanos en mayúsculas i: romanos en minúsculas <ol type="I" start="3">......</ol> EISC - Introducción a las Tecnologías Informáticas 19 El Lenguaje (X)HTML Manejo de Enlaces <a>...</a> permite enlazar con otras páginas en Internet desde la página actual El atributo href determina la dirección a la cual se desea enlazar Ejemplo de enlace usando texto: <a href=”http://www.univalle.edu.co”>Universidad del Valle</a> Ejemplo de enlace usando imagen: <a href=”http://www.univalle.edu.co”><img src=”logoUV.gif” /></a> EISC - Introducción a las Tecnologías Informáticas 21 El Lenguaje (X)HTML Manejo de Tablas Etiquetas para construir tablas: Inicio y final de la Tabla <table>...</table> Encabezado de la Tabla <th>...</th> Inicio y final de una Fila <tr>...</tr> Inicio y final de una Columna <td>...</td> Ejemplo de Tabla con 2 filas y 2 columnas: <table border="1" width="400"> <th>Título Columna 1</th><th>Título Columna 2</th> <tr><td>Fila 1, Columna 1</td><td>Fila 1, Columna 2</td></tr> <tr><td>Fila 2, Columna 1</td><td>Fila 2, Columna 2</td></tr> </table> EISC - Introducción a las Tecnologías Informáticas 22 El Lenguaje (X)HTML Manejo de Tablas Atributos para la etiqueta <td>: align: alineación del texto y objetos dentro de la columna (left, right, center) bgcolor: color de fondo de la celda width: ancho en pixeles o porcentaje de la celda height: alto en pixeles o porcentaje de la celda colspan: cantidad de columnas a combinar <table width=”100%” bgcolor=”red” align=”right”> <tr valign=”top” bgcolor=”blue”> <td bgcolor=”yellow”>Celda 1</td> <td colspan=”2”>Celda 2</td> </tr> </table> EISC - Introducción a las Tecnologías Informáticas 25