HTML CON EJEMPLOS PRÁCTICOS

HTML es el lenguaje de programación, que proporciona la herramienta mas economica para crear páginas web.
Un programa en html puede crearse en el block de notas y guardarse con la extensión .html

Lección 1. Formato Básico de una página en HTML
El formato basico de una pagina html es el siguiente.

<html>
<head>
<title>Este es el titulo de la pagina</title>
</head>
<body >
<h1>Este es el encabezado de la pagina</h1>
<p>Aqui va el texto que se desea que aparezca en pantalla</p>
</body>
</html>

Ver Página

Explicación:
Un archivo html tiene instrucciones que son definidas con "<>" al inciar y con "</>" al finalizar.
La primera linea <html >, indica que el programa html acaba de iniciar.
La segunda linea <head>, separa la informacion que contendrá el encabezado.
La tercera linea <title> guarda la información que aparecerá como título de la pagina. Al final se agrega </title> para avisar que ahi finaliza el titulo.
La cuarta linea marca el fin del encabezado.
La quinta linea <body> indica el inicio del cuerpo de la pagina.
La sexta linea contine un encabezado <h1>. Un tipo de parrafo predefinido, que es util para poner titulos de la información que le seguirá.
La séptima linea <p> inserta un párrafo sin formato.
La penúltima linea </body> indica el final del cuerpo del programa.
La última linea </htm> indica el fin del programa en html

Lección 2. Manejo de encabezados, ligas, anclas y tablas de datos
El siguiente es un ejemplo mas elaborado que utiliza varios elementos como uso de encabezados,
vínculo a un parrafo de la misma pagina, vínculo a otra pagina y uso de tablas.


<html>
<head>
<title>Mi primera pagina </title>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<h1>Este es un encabezado H1</h1>
<h2>Este es un encabezado H2</h2>
<h3>Este es un encabezado H3</h3>
<h4>Este es un encabezado H4</h4>
<h5>Este es un encabezado H5</h5>
<h6>Este es un encabezado H6</h6>
<p>Este es un parrafo</p>
<p><p>
<p><a href="#salto">Esta es una liga interna (ancla)</a></p>
<p><a href="ejemplo2.html">Esta es una liga a un a pagina externa
(no necesario internet)</a></p>
<p><a href="http://www.geocities.com/paolaneriortiz">Esta es una liga a un a pagina externa
en internet</a></p>
<table width="75%" border="1">
<tr>
<td>Este es una tabla con dos filas y una columna</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>
<p><a name="salto"></a>Esta es una Ancla</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>

</html>

Ver Página

Explicación:
Las linea <body bgcolor="#FFFFFF" text="#000000">, incializa el color de fondo como blanco y el color del texto en negro.
Las lineas <h1> a <h6> muestran los seis diferentes tipos de encabezados predefinidos que ofrece html.
La linea <p><a href="#salto"> es un vinculo o liga interna </a></p> que al ser seleccionado con el mouse nos lleva a otro parrafo dentro de la misma pagina web.
El nombre de esta liga interna, es "ancla". El ancla, se guarda en la posición de la página donde se desea que "salte" el cursor. La linea
<p><a name="salto"></a>Esta es una Ancla</p>, es el parrafo donde saltará la liga enterior.
Notese que el vinculo incial debe llamarse href, y tener el símbolo "#" antes del nombre del ancla.
Una liga a una pagina externa, se forma con el texto <a href="direccion_pagina">, como en la línea
<p><a href="ejemplo2.html">Esta es una liga a un a pagina externa </p>
Si se desea que el salto sea a una pagina dentro de internet, se utiliza la linea
<p><a href="http://www.geocities.com/paolaneriortiz ">Esta es una liga a un a pagina externa </p>
Para manejar tablas de datos, se utilza la siguiente linea <table width="75%" border="1">.
El numero de filas y columnas se definen con <tr> y <td> respectivamente.

Lección 3. Inserción de Imágenes y animaciones

<html>
<head>
<title>Mi segunda pagina</title></head>

<body bgcolor="#FFFFFF" text="#006600" background="imagenes/otros/fondo.jpg" marginwidth="100%" marginheight="100%">
<p align="center">Esta pagina usa una imagen estatica, un boton flash y un gif
animado.</p>
<p align="center"><img src="imagenes/Hidalgo/Hgo_tolantongo%20(25).JPG" width="154" height="104"></p>
<p align="center"> Imagen jpg estatica</p>
<p align="center"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" width="100" height="20">
<param name=movie value="imagenes/otros/boton1.swf">
<param name=quality value=high>
<param name="BGCOLOR" value="">
<embed src="imagenes/otros/boton1.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="100" height="20" bgcolor="">
</embed>
</object> </p>
<p align="center">Boton Flash </p>
<p align="center"><img src="imagenes/otros/AnimationLadybug2.gif" width="122" height="64">
</p>
<p align="center">Imagen gif animada tomada de Artificial Planet http://aiplanet.sourceforge.net</p>
</body>
</html>

Ver Página

Explicación:
La linea <body bgcolor="#f000a0" background="fondo.jpg" text="#000000"> inserta una imagen con nombre fondo.jpg que se encuenta en el mismo direcctorio de la pagina que la contiene. Si la imagen se encuentra en otro directorio, la ruta completa puede agragarse al nombre de la imagen, por ejemplo background="/archivos/fondo.jpg".
La linea <p><img src="rembrandt.jpg" width="79" height="100"> Man with a Magnifying Glass. Rembrandt 1668 (imagen tipo jpg)</p> inserta una imagen con extensión jpg con las dimensiones especificadas por width y height.
La linea <p><img src="imagenes/otros/AnimationLadybug2.gif" width="122" height="64"> inserta una imagen de tipo gif animado de dimesiones especificadas por width (ancho) y height (alto).

Lección 4. Manejo de Marcos
Un marco es una página html que puede manejar varias subpaginas y desplegarlas dentro de él.

<html>
<head>
<title>Marco para unir paginas </title>
</head>

<frameset cols="80,*" frameborder="YES" border="3" framespacing="3" bordercolor="#000000">
<frame name="leftFrame" scrolling="NO" noresize src="ejemplo3.1.htm">
<frame name="mainFrame" src="ejemplo3.2.htm">
</frameset>
<noframes>
<body bgcolor="#FFFFFF" text="#000000">
</body>
</noframes>
</html>

Ver página marco
Ver sección izquierda
Ver sección derecha


Explicación
La linea <frameset cols="80,*" frameborder="YES" border="3" framespacing="3" bordercolor="#000000"> , especifica el ancho de columna, si tendra o no borde, el especio entre columnas y el color del borde.
La linea <frame name="leftFrame" scrolling="NO" noresize src="ejemplo3.1.html">, especifica la dirección del marco (derecha o izquierda) y su contenido. Esta definición será igual para cada uno de los segmentos contenidos en el marco.
Cada uno de los segmentos contenidos en el marco, deben de guardarse como páginas separadas.
En este ejemplo, los segmentos del marco se llenen con las páginas ejemplo3.1.html y ejemplo3.2.html.

Seccion Izquierda y cambio de contenido en el marco
La sección izquierda contiene el siguiente código.

<html>
<body bgcolor="ffff">
<p>izquiedo</p>
<a href="ejemplo2.htm" target="mainFrame">cambiar contenido</a>
</html>

Explicación.
La penúltima línea contiene una liga que cambia el contenido de la sección derecha del frame por la página del ejemplo anterior.
En ella se a agregado el parametro target="mainFrame" para identificar la sección donde realizará el cambio.
Recordemos que en el archivo donde establecemos los marcos creamos dos espacios llamados leftFrame y mainFrame.
Target puede reconocer los frames con sus nombres y realizar el salto en el marco elegido.

 

1
Hosted by www.Geocities.ws