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

(1)

PHP y MySQL. Aplicaciones Web:

HTML II (tercera parte)

(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.

(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

< h t m l > < h e a d >

< / h e a d >

<ol>Una lista ordenada básica <li>Primer ítem ordenado <li>Segundo ítem ordenado <li>Tercer ítem ordenado < / o l >

<ul>Lista No ordenada

<li>Primer ítem no ordenado <li>Segundo ítem no ordenado <li>Tercer ítem no ordenado

<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 < / d l >

(4)

< / h t m l >

(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>

(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.

(7)

3. Insertar imágenes. Práctica

Práctica: html_2.htm - Insertar imágenes en HTML

< h t m l > < h e a d >

<title>Insertar de Imágenes</title>

ejemplo de alineamiento con el uso del atributo "top"

ejemplo de alineamiento con el uso del atributo "bottom"

ejemplo de alineamiento con el uso del atributo "middle"

ejemplo de alineamiento con el uso del atributo "left"

& n b s p ; & n b s p ;

ejemplo de alineamiento con el uso del atributo "right"

& n b s p ; & n b s p ;

Enlace desde una imágen <a href="alt="romano"

src="images/imágen_4.jpg" width="40" height="92" border="0"></a>

(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=""> < / m a p >

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

< h t m l > < h e a d >

< / h e a d >

< / m a p > < / h t m l >

(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="http://www.google.com">pagina de google</a>

Práctica: html_4.htm - Enlaces Web

< h t m l > < h e a d >

<title>Enlaces Web</title>

<a href="http://www.google.com" target="_blank">Abrir en nueva v e n t a n a < / a >

<a href="http://www.google.com" target="_self">Abrir en la misma v e n t a n a < / a >

Puedes encontrar más información de google <a href="http://www.google.com" title=" Página de inicio de G o o g l e " > a q u í < / a > .

Abrir una pagina en una nueva ventana desde una p a g i n a < / s t r o n g >

<a href="JavaScript:NewsWindow()">Abrir ventana</a>

<a href="http://www.yahoo.es" target="NUEVA">Llenar ventana</a>

(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="http://www.jozuma.com/cursos/pagina2.htm#enlace">Ir 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

< h t m l > < h e a d >

<title>Enlaces en una misma página</title>

<a name="Capítulo1">Capítulo 1</a>

Para más información ver <a href="#Capitulo2">Capítulo 2</a> & n b s p ;

& n b s p ;

. . . Más HTML . . .

& n b s p ; & n b s p ; & n b s p ; & n b s p ; & n b s p ; & n b s p ; & n b s p ; & n b s p ; & n b s p ; & n b s p ; & n b s p ; & n b s p ; & n b s p ; & n b s p ; & n b s p ; & n b s p ; & n b s p ; & n b s p ; & n b s p ; & n b s p ; & n b s p ;

<a name="Capítulo2">Capítulo 2</a> & n b s p ;

(11)

7. La etiqueta

Práctica: h t m l _ 6 . h t m - E n l a c e a u n c o n t e n i d o e s p e c i f i c o d e o t r a p a g i n a < h t m l > < h e a d > < t i t l e > E n l a c e a u n c o n t e n i d o e s p e c i f i c o d e o t r a p a g i n a < / t i t l e > < / h e a d > I n t r o d u c c i o n & n b s p ; & n b s p ; < a h r e f = " h t m l _ 1 2 . h t m # C a p i t u l o 2 " > I r a C a p í t u l o 2 < / a >

& n b s p ; & n b s p ; & n b s p ; & n b s p ; & n b s p ;

< / h t m l >

La etiqueta <link>

Para relacionar a enlaces externos

< l i n k r e l = " s t y l e s h e e t " h r e f = " h t m l / e s t i l o s . c s s " t y p e = " t e x t / c s s " > Uso de tablas

L a s t a b l a s s o n p o s i b l e m e n t e l a m a n e r a m a s c l a r a d e o r g a n i z a r l a i n f o r m a c i ó n . T a m b i é n e s u n m o d o m á s a d e c u a d o p a r a p o d e r m a q u e t a r t e x t o y g r á f i c o s d e u n a m a n e r a a l g o m a s c o n t r o l a d a .

A continuación la estructura básica de una tabla:

< t d > < / t d > < t d > < / t d > < / t r >

< / t a b l e >

A continuación, descripción de los atributos de las tablas: En Tabla:

cellspacing: e s p a c i o e n t r e c e l d a s

cellpadding: espacio en cada uno de los bordes de la celda y el contenido que hay

en ellas.

width: a n c h o d e l a t a b l a

border: g r o s o r d e l b o r d e l a t a b l a align: center, right, left

En Filas:

(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:

< t a b l e > <caption>Título de la Tabla</caption> < t h e a d > <tr><td colspan="2">Cabecera de la Tabla</td></tr> < / t h e a d > < t f o o t > <tr><td colspan="2">Pie de la Tabla</td></tr> < / t f o o t > < t b o d y >

<tr><th>Cabecera Celda 1</th><th>Cabecera de Celda 2</th></tr> <tr>< td>Cue rp o d e C e l d a 1 < /td > < td > Cu e rpo de Cel da 2< /t d>< / tr> < / t b o d y >

< / t a b l e >

Práctica: html_7.htm - Ejemplo de una tabla con contenido

< h t m l > < h e a d >

<title>Tabla de Libros Disponibles</title> < / h e a d >

<table border="1" cellpadding="3" cellspacing="2"> <caption>Libros Disponibles</caption> < t r > < t h > I S B N < / t h > < t h > T i t u l o < / t h > < t h > A u t o r < / t h > < / t r > < t r > < t d > M 2 3 - 2 3 5 6 7 < / t d > < t d > P r o g r a m a c i ó n W e b < / t d > < t d > S a m s 2 0 0 5 < / t d > < / t r > < t r > < t d > W 2 4 - 5 6 7 8 1 < / t d > < t d > L e n g u a j e H T M L < / t d > < t d > M i c r o s o f t D e v e l o p m e n t < / t d > < / t r >

<tr><td>C21-1003</td><td>Programación Visual C++</td><td>Fco Javier Z e b a l l o s < / t d > < / t r >

<tr><td>M21-0002</td><td>Base de Datos Web M y S Q L < / t d > < t d > O ' R e i l l y < / t d > < / t r >

<tr><td>A12-0034</td><td>Apache Web Server</td><td>Apache Group 2 0 0 6 < / t d > < / t r >

< / t a b l e > < / h t m l >

(14)

(15)

9. Agrupar columnas. Práctica

Práctica: html_8.htm - Agrupar columnas

< h t m l > < h e a d >

< / h e a d >

<caption>Sumario Encuestados por Respuestas</caption> <tr align="center"> < t h > & n b s p ; < / t h > <th colspan="2" width="150">Agresivo</th> <th colspan="2" width="150">Pasivo</th> <th colspan="2" width="150">Pasivo/Agresivo</th> < / t r > <tr align="center"> <th>E nc uest a do< /th >

< t h > A < / t h > < t h > B < / t h > < t h > C < / t h > < t h > D < / t h > < t h > E < / t h > < t h > F < / t h > < / t r > < t r > < t d > M i g u e l < / t d > < t d > 0 < / t d > < t d > 3 < / t d > < t d > 4 < / t d > < t d > 0 < / t d > < t d > 5 < / t d > < t d > 2 < / t d > < / t r > < t r > < t d > T e r e s a < / t d > < t d > 0 < / t d > < t d > 0 < / t d > < t d > 4 < / t d > < t d > 6 < / t d > < t d > 2 < / t d > < t d > 2 < / t d > < / t r > < / t a b l e > < / h t m l >

(16)

10. Agrupar filas. Práctica

Práctica: html_9.htm - Agrupar filas

< h t m l > < h e a d >

< / h e a d >

<caption>Resumen Encuestados a Preguntas 1-4</caption> <tr align="center"><th>Categoría</th><th>Edad</th> < t h > # 1 < / t h > < t h > # 2 < / t h > < t h > # 3 < / t h > < t h > # 4 < / t h > < / t r > <tr><td rowspan="2">Hombres Encuestados</td> < t d > 2 3 < / t d > < t d > A < / t d > < t d > C < / t d > < t d > F < / t d > < t d > B < / t d > < / t r > < t r > < t d > 2 9 < / t d > < t d > B < / t d > < t d > F < / t d > < t d > A < / t d > < t d > A < / t d > < / t r > <tr><td rowspan="2">Mujeres Encuestadas</td> < t d > 2 8 < / t d > < t d > F < / t d > < t d > E < / t d > < t d > B < / t d > < t d > B < / t d > < / t r > < t r > < t d > 2 1 < / t d > < t d > B < / t d > < t d > B < / t d > < t d > B < / t d > < t d > A < / t d > < / t r > < / t a b l e > < / h t m l >

(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

(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

El estilo que predomina de los tres tipos de estilos, depende de las diferentes ubicaciones donde esta el estilo.

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

Texto completo