PHP Mysql Aplicaciones Web HTML 3 Parte

mailxmail - Cursos para compartir lo que sabes
PHP y MySQL. Aplicaciones Web:

HTML II (tercera parte)
Autor: Johnny Zulca Mamani
[Ver curso online]
Descubre miles de cursos como ste en www.mailxmail.com
Presentacin del curso

Programacin de aplicaciones Web con PHP y MySQL. Ahora continuaremos con el
estudio de las pginas Web HTML. Estudiaremos las listas en HTML. Tambin
aprenders a cerca de los formatos de imgenes para la Web: gif, jpg, png, entre
otros. Te ensearemos a crear mapa de imgenes, a usar los enlaces en la Web y a
realizar diseos de Web con tablas y hojas de estilo CSS.
Visita ms cursos como este en mailxmail:
[http://www.mailxmail.com/cursos-informatica]
[http://www.mailxmail.com/cursos-programacion]
Tu opinin cuenta! Lee todas las opiniones de este curso y djanos la tuya:
[http://www.mailxmail.com/curso-php-mysql-web-3/opiniones]
Cursos similares
Cursos
Valoracin
Alumnos
Vdeo
Funciones en C (segunda parte)

Sigue este curso de programacin informtica sobre Funciones en C en su
parte complementaria. Aprende las variables de registro en relacin con la
unidad central de proce...
[17/10/08]
3.650
Crear una pgina web

Te mostraremos algunos consejos para que puedas introducirte en el
mundo de las pginas web, teniendo en cuenta algunos conceptos bsicos.
Pronto podrs mejorar tu pgina...
[04/11/05]
4.564
Introduccin al lenguaje Pascal

Pascal es un lenguaje de alto nivel y de propsito general (es aplicable a un
gran nmero de aplicaciones diversas) desarrollado por el profesor suizo
Niklaus Wirth como ...
[01/03/06]
MySQL bsico. Bases de datos y software

libre (primera parte)
Curso de informtica sobre MySQL bsico incluida la instalacin y descarga
de MySQL. Aprende el origen y la historia de MySQL definido como un SGBD
Sistema Gestor de Base...
[30/10/08]
PHP y MySQL. Aplicaciones Web: base de

datos MySQL I (sptima parte)
Programacin de aplicaciones Web con PHP y MySQL Ahora estudiaremos la
Base de Datos MySQL. Te explicaremos la instalacin, la configuraci&oacu...
[02/12/08]
19.284
2.324
1.662
1. HTML. Listas (primera parte)

[ http://www.mailxmail.com/curso-php-mysql-web-3/html-listas-primera-parte]
Listas
Existen varios tipos de listas en HTML, todas ellas se pueden crear tambin listas
anidadas.
Prctica: html_1.htm - Uso de Listas

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Uso de los tres tipos de Listas</title>
</head>
<body>
<ol>Una lista ordenada bsica
<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 Definicin
<dt>Primer tem definicin
<dd>Primera definicin
<dt>Segundo tem definicin
<dd>Segunda definicin
<dt>Tercer tem definicin
<dd>Tercera definicin

</dl>
</body>
</html>
2. HTML. Listas (segunda parte)

[ http://www.mailxmail.com/curso-php-mysql-web-3/html-listas-segunda-parte ]
Antes de insertar una imgen a una pgina HTML se deben tomar en cuenta estas
consideraciones:
Los formatos de imgenes para la Web; gif, jpg, png
* Para incrementar la velocidad de descarga de una pgina con contenido adems
de texto imgenes;
- limitar tamao archivos imgenes.
- limitar el nmero de imgenes.
- reutilizar imgenes tanto como sea posible.
- usar marcos as solo la parte de la ventana, no es utilizado.
- usar texto mejor que imgenes donde se pueda.
* En la edicin de imgenes se podran realizar algunas modificaciones al momento
de guardar el archivo de imgen:
- reducir la profundidad de bits y salvar como gif.
- indexar el color de la imgen si queremos salvar como gif.
- salvar la imgen como gif transparente.
- salvar la imgen como un archivo png.
- salvar la imgen como un jpg progresivo, o como gif entrelazado.
Facilitara ser descargado rpido. Para insertar una imgen en un documento HTML
utilizar la etiqueta <img>

<img src="" alt="" align="" width="" height="" border="" />
src: la ruta del archivo de la imgen.
alt: texto alternativo al no cargarse la imgen.
align: alinear de acuerdo al contenido que lo acompaa.
width: ancho de la imgen.
height: alto de la imgen.
border: contorno borde de la imgen "0" no mostrar borde.
3. Insertar imgenes. Prctica

[ http://www.mailxmail.com/curso-php-mysql-web-3/insertar-imagenes-practica]
Prctica: html_2.htm - Insertar imgenes en HTML
<html>
<head>
<title>Insertar de Imgenes</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
ejemplo de alineamiento con el uso del atributo "top"
<img alt="imgen 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="imgen 2" src="images/imagen_2.png" width="64" height="64"
align="left"/>
 
 
ejemplo de alineamiento con el uso del atributo "right"
<img alt="imgen 4" src="images/imgen_4.jpg" width="40" height="92"
align="right"/>
 
 
Enlace desde una imgen
<a href="alt="romano"
src="images/imgen_4.jpg" width="40" height="92" border="0"></a>
</body>
</html>
4. Mapa de imgenes
[ http://www.mailxmail.com/curso-php-mysql-web-3/mapa-imagenes]
Mapas de imgenes, para la creacin de mapas en las imgenes 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 imgen.
<map name="">: etiqueta para el mapa de imgen
<area shape="">: tipo de rea a sectorizar
<area coords="">: coordenadas del rea sobre la imgen
<area href="">: enlace a direccin URL
Prctica: html_3.htm - Mapas de imgenes
<html>
<head>
<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="http://www.enlace1.com">
<area shape="rect" coords="172,-1,343,155" alt="Plan Avanzado"
<area shape="rect" coords="344,1,525,155" alt="Plan Profesional"
</map>
</body>
</html>
5. HTML. Uso de enlaces en la web

[ http://www.mailxmail.com/curso-php-mysql-web-3/html-uso-enlaces-web]
Uso de enlaces en la Web
Un enlace puede ser una zona de texto o grficos que si son seleccionados nos
trasladan a otro documento HTML o a otra posicin 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 fsicamente en otro lado
del mundo. Son los enlaces lo que hacen de la telaraa 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 direccin de Internet o URL que vamos a abrir.
target: el sitio donde se abre la pgina que deseamos enlazar: _blank, _parent, _self,
_top, otros
title: texto alternativo sobre el enlace.
<a href="http://www.google.com">pagina de google</a>
Prctica: html_4.htm - Enlaces Web
<html>
<head>
<title>Enlaces Web</title>
<script language="JavaScript">
function NewsWindow(){
fin=window.open("","NUEVA","width=400,height=400");
}
</script>
</head>
<body>
<a href="http://www.google.com" target="_blank">Abrir en nueva
ventana</a>
<a href="http://www.google.com" target="_self">Abrir en la misma
ventana</a>
Puedes encontrar ms informacin de google <a
href="http://www.google.com" title=" Pgina 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="http://www.yahoo.es" target="NUEVA">Llenar ventana</a>
</body>
</html>
10
11
6. HTML. Anclas
[ http://www.mailxmail.com/curso-php-mysql-web-3/html-anclas ]
Anclas
Crear anclas utilizando este carcter #:
<a name="enlace">Ttulo 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 raz
. / hace referencia a un subdirectorio del directorio padre
. . / hace referencia al directorio padre
por ejemplo:
<a href="/cursos/html/">pagina de cursos HTML</a>
Prctica: html_5.htm - Enlaces en una misma pgina
<html>
<head>
<title>Enlaces en una misma pgina</title>
</head>
<body>

<a name="Captulo1">Captulo 1</a>
Para ms informacin ver <a href="#Capitulo2">Captulo 2</a> 
 
 
. . . Ms HTML . . .
 
 
 
 
 
<a name="Captulo2">Captulo 2</a>
 
 
<a href="#Captulo1">Regresar a Captulo 1</a>
</body>
</html>
12
7. La etiqueta
13

[http://www.mailxmail.com/curso-php-mysql-web-3/etiqueta-link-uso-tablas-primera-parte]
Prctica: 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 Captulo 2</a>
 
</body>
</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 informacin.
Tambin es un modo ms adecuado para poder maquetar texto y grficos de una
manera algo mas controlada.
A continuacin la estructura bsica de una tabla:
<table align="" width="" border="" cellspacing="" cellpadding="">
<tr>
<td></td>
<td></td>
</tr>
</table>
A continuacin, descripcin 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
14
8. HTML. Uso de tablas (segunda parte)

[ http://www.mailxmail.com/curso-php-mysql-web-3/html-uso-tablas-segunda-parte]
En Celdas (columnas):
align: alineamiento horizontal
valign: alineamiento vertical
colspan: agrupa columnas
rowspan: agrupa filas
La estructura estndar de una tabla:
<table>
<caption>Ttulo 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>
Prctica: 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>M23-23567</td><td>Programacin Web</td><td>Sams
2005</td></tr>
<tr><td>W24-56781</td><td>Lenguaje HTML</td><td>Microsoft
Development</td></tr>
<tr><td>C21-1003</td><td>Programacin Visual C++</td><td>Fco Javier
Zeballos</td></tr>
<tr><td>M21-0002</td><td>Base de Datos Web
MySQL</td><td>O'Reilly</td></tr>
<tr><td>A12-0034</td><td>Apache Web Server</td><td>Apache Group
2006</td></tr>
</table>
</body>
</html>
15
16
9. Agrupar columnas. Prctica

[ http://www.mailxmail.com/curso-php-mysql-web-3/agrupar-columnas-practica]
Prctica: html_8.htm - Agrupar columnas
<html>
<head>
<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>
</tr>
<tr><td>Teresa</td>
</tr>
</table>
</body>
</html>
17
10. Agrupar filas. Prctica

[ http://www.mailxmail.com/curso-php-mysql-web-3/agrupar-filas-practica]
Prctica: html_9.htm - Agrupar filas
<html>
<head>
<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>Categora</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>
</body>
</html>
18
11. Diseo de pginas Web con tablas

[ http://www.mailxmail.com/curso-php-mysql-web-3/diseno-paginas-web-tablas]
Diseo de pginas Web con tablas
El diseo Web desde sus inicios se han ido mejorando y cada vez nuevos estndares
han dado una idea mas profesional y organizada del manejo de los contenidos de
un diseo Web, desde el Diseo Web con Tablas y ahora el diseo Web con Hojas de
estilo (CSS), pero ha llevado a generar controversias.
Tablas vs CSS
Ventajas de tablas frente a CSS
* Mayora de navegadores no admiten CSS
* Las tablas readaptan su contenido
* Muchos ms sencillos que utilizar
Ventajas de CSS frente a tablas
* CSS va hacer esencial en el futuro ya que atributos de tablas sern 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 fciles de cambiar en el
diseo
* Con tablas el diseo es artesanal
Diseo Web, podemos elegir una herramienta para el diseo Web (Dreamweaver MX
2004), es el mas utilizado o sino tambin escribiendo nosotros en algn editor de
cdigo HTML el diseo de nuestra pagina Web. Haciendo con ello, lo siguiente:
* Diseo de tablas anidadas o utilizar atributos colspan o rowspan
* Diseo con cdigo o
* Diseo con Dreamweaver
Prctica: html_10.htm - Diseo de una pagina con Tablas anidadas y atributos
colspan y rowspan
19
12. CSS (hojas de estilo)

[ http://www.mailxmail.com/curso-php-mysql-web-3/css-hojas-estilo ]
Uso de CSS (hojas de estilo)
Introduccin 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 mtodos de implementar una hoja de estilos
* Definicin de estilos dentro de etiquetas individuales
<h1 style="color:red;"></h1>
Usando elemento "style"
< style type="text/css">definicin 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 captulo hemos llegado al final del curso.
Visita ms cursos como este en mailxmail:

[http://www.mailxmail.com/cursos-informatica]
[http://www.mailxmail.com/cursos-programacion]
Tu opinin cuenta! Lee todas las opiniones de este curso y djanos la tuya:
[http://www.mailxmail.com/curso-php-mysql-web-3/opiniones]
Cursos similares
Cursos
Valoracin
Alumnos
Vdeo
20

Introduccin al lenguaje Pascal
Pascal es un lenguaje de alto nivel y de propsito general (es aplicable a un
gran nmero de aplicaciones diversas) desarrollado por el profesor suizo
Niklaus Wirth como ...
[01/03/06]
19.284
Gua Wireless para todos/as

Con este curso se pretende dar una informacin que pueda servir de ayuda
a todo aquel que teniendo conocimientos bsicos de informtica quiera
introducirse en el mundo d...
[04/08/06]
PHP y MySQL. Aplicaciones Web: base de

datos MySQL I (sptima parte)
Programacin de aplicaciones Web con PHP y MySQL Ahora estudiaremos la
Base de Datos MySQL. Te explicaremos la instalacin, la configuraci&oacu...
[02/12/08]
2.758
1.662
Funciones en C (segunda parte)

Sigue este curso de programacin informtica sobre Funciones en C en su
parte complementaria. Aprende las variables de registro en relacin con la
unidad central de proce...
[17/10/08]
3.650
WML. Internet para mvil (segunda parte)

Internet para mvil y el lenguaje WML son las claves de este curso. En esta
ocasin estudiaremos la creacin del WML y las variables m&a...
[07/07/09]
579
21

PHP Mysql Aplicaciones Web HTML 3 Parte

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

PHP Mysql Aplicaciones Web HTML 3 Parte

Uploaded by

Copyright:

Available Formats

mailxmail - Cursos para compartir lo que sabes

PHP y MySQL. Aplicaciones Web:

Descubre miles de cursos como ste en www.mailxmail.com

mailxmail - Cursos para compartir lo que sabes

Presentacin del curso

Funciones en C (segunda parte)

Crear una pgina web

Introduccin al lenguaje Pascal

MySQL bsico. Bases de datos y software

PHP y MySQL. Aplicaciones Web: base de

Descubre miles de cursos como ste en www.mailxmail.com

mailxmail - Cursos para compartir lo que sabes

1. HTML. Listas (primera parte)

Prctica: html_1.htm - Uso de Listas

Descubre miles de cursos como ste en www.mailxmail.com

mailxmail - Cursos para compartir lo que sabes

Descubre miles de cursos como ste en www.mailxmail.com

mailxmail - Cursos para compartir lo que sabes

2. HTML. Listas (segunda parte)

Descubre miles de cursos como ste en www.mailxmail.com

mailxmail - Cursos para compartir lo que sabes

Descubre miles de cursos como ste en www.mailxmail.com

mailxmail - Cursos para compartir lo que sabes

3. Insertar imgenes. Prctica

Descubre miles de cursos como ste en www.mailxmail.com

mailxmail - Cursos para compartir lo que sabes

Descubre miles de cursos como ste en www.mailxmail.com

mailxmail - Cursos para compartir lo que sabes

Descubre miles de cursos como ste en www.mailxmail.com

mailxmail - Cursos para compartir lo que sabes

5. HTML. Uso de enlaces en la web

Descubre miles de cursos como ste en www.mailxmail.com

mailxmail - Cursos para compartir lo que sabes

Descubre miles de cursos como ste en www.mailxmail.com

mailxmail - Cursos para compartir lo que sabes

Descubre miles de cursos como ste en www.mailxmail.com

mailxmail - Cursos para compartir lo que sabes

Descubre miles de cursos como ste en www.mailxmail.com

mailxmail - Cursos para compartir lo que sabes

Descubre miles de cursos como ste en www.mailxmail.com

mailxmail - Cursos para compartir lo que sabes

8. HTML. Uso de tablas (segunda parte)

Descubre miles de cursos como ste en www.mailxmail.com

mailxmail - Cursos para compartir lo que sabes

Descubre miles de cursos como ste en www.mailxmail.com

mailxmail - Cursos para compartir lo que sabes

9. Agrupar columnas. Prctica

Descubre miles de cursos como ste en www.mailxmail.com

mailxmail - Cursos para compartir lo que sabes

10. Agrupar filas. Prctica

Descubre miles de cursos como ste en www.mailxmail.com

mailxmail - Cursos para compartir lo que sabes

11. Diseo de pginas Web con tablas

Descubre miles de cursos como ste en www.mailxmail.com

mailxmail - Cursos para compartir lo que sabes

12. CSS (hojas de estilo)

Visita ms cursos como este en mailxmail:

Descubre miles de cursos como ste en www.mailxmail.com

mailxmail - Cursos para compartir lo que sabes

Gua Wireless para todos/as

PHP y MySQL. Aplicaciones Web: base de

Funciones en C (segunda parte)

WML. Internet para mvil (segunda parte)