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 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 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 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 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. 6
Herramientas de Desarrollo Aplicaciones para Tratamiento de Imágenes Tratamiento de Imágenes Windows: FireWorks, PhotoShop Gimp Linux: Gimp 7
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. 8
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.) 9
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 /> 10
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 /> 11
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> 12
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> 13
Manejo de Texto Caracteres Especiales HTML tiene una manera especial de presentar algunos caracteres: á é í ó ú ñ (espacio ü < & á é í ó ú ñ obligatorio) &uumi; < & Á É Í Ó Ú Ñ Á É Í Ó Ú Ñ º ª & " º ª nbsp; Ü > %iexcl; &Uumi; > ½ ¼ ¾ ½ ¼ ¾ 15
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ítulo más grande</h1> <h2>título de tamaño 2</h2> <h3>título de tamaño 3</h3> <h4>título de tamaño 4</h4> <h5>título de tamaño 5</h5> <h6>título más pequeñ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 16
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> 18
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> 19
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> 21
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> 22
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> 25