PHP y MySQL. Aplicaciones Web: HTML II (tercera parte) Autor: Johnny Zulca Mamani

Transcripción

1 PHP y MySQL. Aplicaciones Web: HTML II (tercera parte) Autor: Johnny Zulca Mamani 1

2 Presentación del curso Programación de aplicaciones Web con PHP y MySQL. Ahora continuaremos con el estudio de las páginas Web HTML. Estudiaremos las listas en HTML. También aprenderás a cerca de los formatos de imágenes para la Web: gif, jpg, png, entre otros. Te enseñaremos a crear mapa de imágenes, a usar los enlaces en la Web y a realizar diseños de Web con tablas y hojas de estilo CSS. 2

3 1. HTML. Listas (primera parte) Listas Existen varios tipos de listas en HTML, todas ellas se pueden crear también listas anidadas. Práctica: html_1.htm - Uso de Listas <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>uso de los tres tipos de Listas</title> </head> <body> <ol>una lista ordenada básica <li>primer ítem ordenado <li>segundo ítem ordenado <li>tercer ítem ordenado </ol> <ul>lista No ordenada <li>primer ítem no ordenado <li>segundo ítem no ordenado <li>tercer ítem no ordenado </ul> <dl>lista Definición <dt>primer ítem definición <dd>primera definición <dt>segundo ítem definición <dd>segunda definición <dt>tercer ítem definición <dd>tercera definición </dl> 3

4 </html> 4

5 2. HTML. Listas (segunda parte) Antes de insertar una imágen a una página HTML se deben tomar en cuenta estas consideraciones: Los formatos de imágenes para la Web; gif, jpg, png * Para incrementar la velocidad de descarga de una página con contenido además de texto imágenes; - limitar tamaño archivos imágenes. - limitar el número de imágenes. - reutilizar imágenes tanto como sea posible. - usar marcos así solo la parte de la ventana, no es utilizado. - usar texto mejor que imágenes donde se pueda. * En la edición de imágenes se podrían realizar algunas modificaciones al momento de guardar el archivo de imágen: - reducir la profundidad de bits y salvar como gif. - indexar el color de la imágen si queremos salvar como gif. - salvar la imágen como gif transparente. - salvar la imágen como un archivo png. - salvar la imágen como un jpg progresivo, o como gif entrelazado. Facilitaría ser descargado rápido. Para insertar una imágen en un documento HTML utilizar la etiqueta <img> 5

6 <img src="" alt="" align="" width="" height="" border="" /> src: la ruta del archivo de la imágen. alt: texto alternativo al no cargarse la imágen. align: alinear de acuerdo al contenido que lo acompaña. width: ancho de la imágen. height: alto de la imágen. border: contorno borde de la imágen "0" no mostrar borde. 6

7 3. Insertar imágenes. Práctica Práctica: html_2.htm - Insertar imágenes en HTML <html> <head> <title>insertar de Imágenes</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> </head> <body> ejemplo de alineamiento con el uso del atributo "top" <img alt="imágen 1" src="images/imagen_1.png" width="48" height="48" align="top"/> ejemplo de alineamiento con el uso del atributo "bottom" <img alt="imagen 2" src="images/imagen_2.png" width="48" height="48" align="bottom"/> ejemplo de alineamiento con el uso del atributo "middle" <img alt="imagen 3" src="images/imagen_3.gif" width="48" height="48" align="middle"/> ejemplo de alineamiento con el uso del atributo "left" <img alt="imágen 2" src="images/imagen_2.png" width="64" height="64" align="left"/> ejemplo de alineamiento con el uso del atributo "right" <img alt="imágen 4" src="images/imágen_4.jpg" width="40" height="92" align="right"/> enlace desde una imágen <a href="alt="romano" src="images/imágen_4.jpg" width="40" height="92" border="0"></a> </html> 7

8 4. Mapa de imágenes Mapas de imágenes, para la creación de mapas en las imágenes se utiliza la etiqueta <map>, <area>. <img alt="" src="" width="" height="" border="0" usemap="#map"> <map name="map"> <area shape="" coords="" href=""> <area shape="" coords="" href=""> </map> usemap="#": atributo en la etiqueta <img> para identificar el mapa que se va hacer sobre esta imágen. <map name="">: etiqueta para el mapa de imágen <area shape="">: tipo de área a sectorizar <area coords="">: coordenadas del área sobre la imágen <area href="">: enlace a dirección URL Práctica: html_3.htm - Mapas de imágenes <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>mapas de imagen</title> </head> <body> <img alt="sistemas de hosting" src="mapa.png" width="521" height="157" border="0" usemap="#map"> <map name="map"> <area shape="rect" coords="1,-1,170,156" alt="plan Standard" href=" <area shape="rect" coords="172,-1,343,155" alt="plan Avanzado" href=" <area shape="rect" coords="344,1,525,155" alt="plan Profesional" href=" </map> </html> 8

9 5. HTML. Uso de enlaces en la web Uso de enlaces en la Web Un enlace puede ser una zona de texto o gráficos que si son seleccionados nos trasladan a otro documento HTML o a otra posición dentro del documento actual. Siendo HTML el lenguaje de Internet, la diferencia que posee con respecto a otros tipos de hipertexto es que ese otro documento puede estar físicamente en otro lado del mundo. Son los enlaces lo que hacen de la telaraña o World Wide Web. La etiqueta <a> La sintaxis de esta etiqueta es: <a href="" title="" target="">texto a visualizar y en la cual se va hacer clic del enlace</a> href: la dirección de Internet o URL que vamos a abrir. target: el sitio donde se abre la página que deseamos enlazar: _blank, _parent, _self, _top, otros title: texto alternativo sobre el enlace. <a href=" de google</a> Práctica: html_4.htm - Enlaces Web <html> <head> <title>enlaces Web</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> <script language="javascript"> function NewsWindow(){ fin=window.open("","nueva","width=400,height=400"); } </script> </head> <body> <a href=" target="_blank">abrir en nueva ventana</a> <a href=" target="_self">abrir en la misma ventana</a> puedes encontrar más información de google <a href=" title=" Página de inicio de Google">aquí</a>. abrir una pagina en una nueva ventana desde una pagina <a href="javascript:newswindow()">abrir ventana</a> <a href=" target="nueva">llenar ventana</a> </html> 9

10 6. HTML. Anclas Anclas Crear anclas utilizando este carácter #: <a name="enlace">título enlace</a> y hacemos referencia a el de esta forma <a href=" a Enlace</a> Trabajar con enlaces absolutos y relativos: / hace referencia a un subdirectorio del directorio raíz./ hace referencia a un subdirectorio del directorio padre../ hace referencia al directorio padre por ejemplo: <a href="/cursos/html/">pagina de cursos HTML</a> Práctica: html_5.htm - Enlaces en una misma página <html> <head> <title>enlaces en una misma página</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> </head> <body>  <a name="capítulo1">capítulo 1</a> para más información ver <a href="#capitulo2">capítulo 2</a> ... Más HTML... <a name="capítulo2">capítulo 2</a> <a href="#capítulo1">regresar a Capítulo 1</a> </html> 10

11 7. La etiqueta Práctica: html_6.htm - Enlace a un contenido especifico de otra pagina <html> <head> <title>enlace a un contenido especifico de otra pagina</title> </head> <body> introduccion <a href="html_12.htm#capitulo2">ir a Capítulo 2</a> </html> La etiqueta <link> Para relacionar a enlaces externos <link rel="stylesheet" href="html/estilos.css" type="text/css"> Uso de tablas Las tablas son posiblemente la manera mas clara de organizar la información. También es un modo más adecuado para poder maquetar texto y gráficos de una manera algo mas controlada. A continuación la estructura básica de una tabla: <table align="" width="" border="" cellspacing="" cellpadding=""> <tr> <td></td> <td></td> </tr> </table> A continuación, descripción de los atributos de las tablas: En Tabla: cellspacing: espacio entre celdas cellpadding: espacio en cada uno de los bordes de la celda y el contenido que hay en ellas. width: ancho de la tabla border: grosor del borde la tabla align: center, right, left En Filas: align: alineamiento de horizontal valign: alineamiento vertical 11

12 12

13 8. HTML. Uso de tablas (segunda parte) En Celdas (columnas): align: alineamiento horizontal valign: alineamiento vertical colspan: agrupa columnas rowspan: agrupa filas La estructura estándar de una tabla: <table> <caption>título de la Tabla</caption> <thead> <tr><td colspan="2">cabecera de la Tabla</td></tr> </thead> <tfoot> <tr><td colspan="2">pie de la Tabla</td></tr> </tfoot> <tbody> <tr><th>cabecera Celda 1</th><th>Cabecera de Celda 2</th></tr> <tr><td>cuerpo de Celda 1</td><td>Cuerpo de Celda 2</td></tr> </tbody> </table> Práctica: html_7.htm - Ejemplo de una tabla con contenido <html> <head> <title>tabla de Libros Disponibles</title> </head> <table border="1" cellpadding="3" cellspacing="2"> <caption>libros Disponibles</caption> <tr><th>isbn</th><th>titulo</th><th>autor</th></tr> <tr><td>m </td><td>programación Web</td><td>Sams 2005</td></tr> <tr><td>w </td><td>lenguaje HTML</td><td>Microsoft Development</td></tr> <tr><td>c </td><td>programación Visual C++</td><td>Fco Javier Zeballos</td></tr> <tr><td>m </td><td>base de Datos Web MySQL</td><td>O'Reilly</td></tr> <tr><td>a </td><td>apache Web Server</td><td>Apache Group 2006</td></tr> </table> </html> 13

14 14

15 9. Agrupar columnas. Práctica Práctica: html_8.htm - Agrupar columnas <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>agrupar columnas en tablas</title> </head> <body> <table border="1" cellpadding="5"> <caption>sumario Encuestados por Respuestas</caption> <tr align="center"> <th> </th> <th colspan="2" width="150">agresivo</th> <th colspan="2" width="150">pasivo</th> <th colspan="2" width="150">pasivo/agresivo</th> </tr> <tr align="center"> <th>encuestado</th> <th>a</th><th>b</th><th>c</th><th>d</th><th>e</th><th>f</th> </tr> <tr><td>miguel</td> <td>0</td><td>3</td><td>4</td> <td>0</td><td>5</td><td>2</td> </tr> <tr><td>teresa</td> <td>0</td><td>0</td><td>4</td> <td>6</td><td>2</td><td>2</td> </tr> </table> </html> 15

16 10. Agrupar filas. Práctica Práctica: html_9.htm - Agrupar filas <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>agrupar Filas en Tablas</title> </head> <body> <table border="1" cellpadding="5"> <caption>resumen Encuestados a Preguntas 1-4</caption> <tr align="center"><th>categoría</th><th>edad</th> <th>#1</th><th>#2</th><th>#3</th><th>#4</th></tr> <tr><td rowspan="2">hombres encuestados</td> <td>23</td><td>a</td><td>c</td><td>f</td><td>b</td></tr> <tr><td>29</td><td>b</td><td>f</td><td>a</td><td>a</td></tr> <tr><td rowspan="2">mujeres encuestadas</td> <td>28</td><td>f</td><td>e</td><td>b</td><td>b</td></tr> <tr><td>21</td><td>b</td><td>b</td><td>b</td><td>a</td></tr> </table> </html> 16

17 11. Diseño de páginas Web con tablas Diseño de páginas Web con tablas El diseño Web desde sus inicios se han ido mejorando y cada vez nuevos estándares han dado una idea mas profesional y organizada del manejo de los contenidos de un diseño Web, desde el Diseño Web con Tablas y ahora el diseño Web con Hojas de estilo (CSS), pero ha llevado a generar controversias. Tablas vs CSS Ventajas de tablas frente a CSS * Mayoría de navegadores no admiten CSS * Las tablas readaptan su contenido * Muchos más sencillos que utilizar Ventajas de CSS frente a tablas * CSS va hacer esencial en el futuro ya que atributos de tablas serán desaprobados por versiones HTML * Son independientes del navegador, lo que creamos es lo que se va a ver * Anidar tablas es mas complejo, con CSS son organizadas y fáciles de cambiar en el diseño * Con tablas el diseño es artesanal Diseño Web, podemos elegir una herramienta para el diseño Web (Dreamweaver MX 2004), es el mas utilizado o sino también escribiendo nosotros en algún editor de código HTML el diseño de nuestra pagina Web. Haciendo con ello, lo siguiente: * Diseño de tablas anidadas o utilizar atributos colspan o rowspan * Diseño con código o * Diseño con Dreamweaver Práctica: html_10.htm - Diseño de una pagina con Tablas anidadas y atributos colspan y rowspan 17

18 12. CSS (hojas de estilo) Uso de CSS (hojas de estilo) Introducción a CSS Un estilo se define así: selector {propiedad1: valor1; propiedad2: valor2;} CSS: hojas de estilo en cascada, al crear un estilo estamos creando unas normas de formateo para todo el contenido de la pagina o documento HTML. Pueden utilizarse varios selectores separados con comas: Selector1, selector2, selector3 {propiedad1: valor1;} Existen tres métodos de implementar una hoja de estilos * Definición de estilos dentro de etiquetas individuales <h1 style="color:red;"></h1> Usando elemento "style" < style type="text/css">definición de estilos</style> Hojas de estilo externos <link rel="stylesheet" type="text/css" href="miestilo.css"> podemos tener mas de una hoja de estilo El estilo que predomina de los tres tipos de estilos, depende de las diferentes ubicaciones donde esta el estilo. NOTA: Con este capítulo hemos llegado al final del curso. 18