tutorial 2 para hacer paginas web con html 4.0

Bienvenidos otra vez a un nuevo post. En este post les enseñare como crear una sencilla pagina web aplicando los llamados frames y ademas indicare algunas cosas de la etiqueta <body> que no menciones antes. Y prometo que esta pagina sera un tanto mas complicada que la anterior con lo que veran muchas cosas.

Lo que me interesaba del lenguaje html era como hacer para dividir una pagina en varias partes o secciones y eso se puede hacer con las siguientes etiquetas <frameset> y <frame> y otra cosa si queremos hacer una pagina con 3 secciones deberemos hacer 4 documentos html.
 Pero la estructura de la pagina principal es decir donde haremos las divisiones en marcos tiene la siguiente forma

<html>
<head>
codigos
<head>
<frameset>
<frame src=..>
</frameset>
</html>

es decir se reemplaza la etiqueta <body> por <frameset>
y la etiqueta <frame> es para incluir el archivo que pondremos en el o los frame

La etiqueta <frameset> tiene varios atributos pero mencionaremos 2 nada mas que son cols y rows.

<frameset cols=10%,30%,*>
divide la pagina en tres columnas una con un ancho del 20% de la pagina, otra con un ancho del 30% de la pagina y con * otra columna con el ancho restante.(El ancho de las columnas tambien se puede indicar en pixeles)


Ejemplo supongamos un hipotetico monitor con resolucion 1000 x 750
el ancho de la primera columna sera 100 pixeles, de la segunda 300 pixeles y de la ultima columna el espacio que sobra es decir 600 pixeles.

<frameset rows=100,300,*>
divide la pagina en tres filas, una con una altura de 100 pixeles, la del medio con altura de 300 pixeles y la de abajo con la altura restante es decir  350 pixeles suponiendo que trabajamos con el mismo hipotetico monitor.

Veamos el siguiente ejemplo haremos una pagina dividida en 3 columnas y en cada una insertaremos otras paginas.

<html>
<head><title>pagina de pueba</title></head>
<frameset cols=30%,30%,*>
<frame src=http://www.identi.li>
<frame src=http://www.tadinga>
<frame src=http://www.lagaceta.com.ar>
</frameset>
</html>

Ese es para insertar paginas web externas pero si las paginas o archivos tienen la misma ubicacion que la pagina principal es suficiente con poner
<frame src=nombredearchivo.jpg>   si fuera una imagen en jpg
<frame src=nombredepagina.html>  si fuera un archivo html

Veamos el ejemplo


Pagina completa http://i.minus.com/iourlhvkWwNCN.jpg

Ahora veamos este codigo

<html>
<head><title>pagina de pueba</title></head>
<frameset rows=200,200,*>
<frame src=http://www.identi.li>
<frame src=http://www.tadinga>
<frame src=http://www.lagaceta.com.ar>
</frameset>
</html>


Esta se puede ver en el ejemplo siguiente


pantalla completa http://i.minus.com/insGWvAEsf3oV.jpg

Bueno ahora veamos si hacemos algo un poquito mas serio.jeje.

codigo de la pagina

<html>
<head><title>paginola</title></head>
<frameset cols=200,*>
<frame src=uno.html name=frameuno>

 <frameset rows=150,*>
 <frame src=dos.html name=framedos>
 <frame src=paginaprincipal.html name=frametres>
 </frameset>

</frameset>
</html>


Explicacion este es un ejempo de uso de anidamiento de frames.
primero dividimos la pagina en dos columnas con <frameset cols=200,*>
con <frame src=pagina1.html> introducimos en la columna de la izquierda la pagina 1.
Y ahora cuando ponemos <frameset rows=150,*> dividimos la columna de la derecha en dos filas.
con <frame src..> introducimos las dos paginas (pagina 2 y pagina 3) en las filas que habiamos obtenidos respectivamente.
</frameset> etiqueta de cierre del segundo frameset
y finalmente </frameset> para cerrar el primer frameset.

Lo que yo quiero hacer es una pagina donde en la columna izquierda pondre algunas opciones y al hacer click en algunas opciones aparecera una nueva pagina en la fila de abajo de la columna de la derecha.

Otro atributo de la etiqueta <frame> es name como se ve en el codigo anterior
<frame src=uno.html name=frameuno>
Su uso es para darle un nombre al frame o seccion, esdecir la columna de la izquierda se llamara frameuno
Asi es como se dividira la pagina con el codigo anterior
   .............................................................
   .                       .                                   .
   .    frameuno      .                                   .
   .                       .                                   .
   .                       .                                   .
   .                       .        framedos              .
   .                       .                                   .
   .                       .                                   .
   .                       .....................................
   .                       .                                   .
   .                       .                                   .
   .                       .      frametres                .
   .                       .                                   .
   .                       .                                   .
   .                       .                                   .
   .............................................................


codigo de la pagina que ira en frameuno

<html>
<head>
<title>pagina1</title>
</head>
<body bgcolor=#AAAAAA>
<font color=ffffff>
<h2>
<a href=nuestrafuncion.html target=frametres>nuestra funcion[/url][br /]
<a href=quienesomos.html target=frametres>quienes somos[/url][br /]
<a href=comocontactarse.html target=frametres>como contactarse[/url][br /]
<a href=paginaprincipal.html target=frametres>pagina principal[/url][br /]
</h2>
</font>
</body>
</html>

Esta se debe guardar con nombre "uno.html"

explicacion
href y target son atributos de la etiqueta <a> que sirve para crear enlaces a otras paginas
<a href=www.google.com.ar> click <a>
al clickear en la palabra "click" ira a www.google.com.ar.
<a href=nuestrafuncion.html target=frametres>nuestra funcion[/url]
con el atributo target indicamos donde se abrira la pagina enlazada en este caso se abrira en el frame de nombre "frametres"

codigo de la segunda pagina

<html>
<head>
<title>pagina1</title>
</head>
<body background=fondo.jpg>
<center>
<span style=font-size: 90px>Bienvenidos a mi pagina</span>
</center>
</body>
</html>


Esta se debe guardar con nombre "dos.html"
Con el atributo background=fondo.jpg, ponemos una imagen de fondo, en mi caso tengo la imagen y los archivos en el escritorio por lo que no hace falta poner la direccion de la imagen pero si estuviera en otra ubicacion distinta hay que poner la ubicacion completa. supongamos que esta en el disco f
seria asi background=f://fondo.jpg

Y esta ira en la cabecera o en el "framedos" que sera el titulo de la pagina.
Habia limitaciones en el tamaño del texto con html asi que tuve que introducir la etiqueta <span style> que sirve para definir estilos en algunas partes del documento y con font-size indicar el tamaño del texto de 90 pixeles.

tercera pagina
<html>
<head>
<title>pagina principal</title>
</head>
<body bgcolor=green>
<center>
<font color=white>
<h2>
<p>
En esta pagina encontraran todas las herramientas necesarias para aprender a programar [br /]
Manuales, tutoriales, videos gratis para que entres en este mundo de la programacion y [br /]
totalemente gratis. Tu aprendizaje esta garantizado.[br /]
</p>
<h2>
</font>
</center>
</body>
</html>


Este se debe guardar con nombre "paginaprincipal.html"
Esta pagina es la que aparecera por defecto al abrir la pagina pero obviamente al clickear en algun enlace de la columna la pagina de ese enlace aparecera en este frame y podemos volver ckickeando en "paginaprincipal".

codigo de la cuarta pagina

<html>
<head>
<title>pagina1</title>
</head>
<body bgcolor=black>
<center>
<font color=white>
<h2>
Somos una empresa dedicada a la formacion de personas[br /]
en el ambito informatico, con sede en Salta, Republica de Argentina,[br /]
nuestros manuales y tutoriales son preparados por personas[br /]
con conocimientos idoneos en la materia.[br /]
</h2>
</font>
</center>
</body>
</html>


Este se debe guardar con nombre "nuestrafuncion.html"

codigo de la quinta pagina

<html>
<head>
<title>pagina1</title>
</head>
<body bgcolor=black>
<font color=white>
<center>
<h2>
Nuestra organizacion nacio hace unos cincos años [br /]
Al principio se trataba de una sola persona con muchas [br /]
ambiciones, pero luego se junto con otras con intereses [br /]
compartidos en la enseñaza y preparacion de gente [br /]
que muestre deseos de aprender. [br /]
</h2>
</center>
</font>
</body>
</html>


Este se debe guardar con nombre "quienesomos.html"

Codigo de la ultima pagina
<html>
<head>
<title>pagina1</title>
</head>
<body>

</body>
</html>


Esta no tiene importancia, se debe guardar con nombre "comocontactarse.html"
Esta en blanco pero a los efectos sirve igual.para el ejemplo.
finalmente puede verse en el video siguiente la funcionalidad de la pagina.



link del video http://www.youtube.com/watch?v=t7TlNzXMGAI

Bueno espero que les haya gustado, nos vemos la proxima
tutorial 2 para hacer paginas web con html 4.0
10 Puntos Score: 10/10
Visitas: 2289 Favoritos: 6
Ver los usuarios que votaron...
8 Comentarios tutorial 2 para hacer paginas web con html 4.0
Muchas gracias!!! Salu2... ahora a practicar!  
Jajajaj osea aqui tambi?
Cita New1: Mostrar
Cita potrosalta: Mostrar
@potrosalta Asi es amigo es muy conocida; adem?
identi es una super pagina a taringa vengo de aya y se volvi?
Se que ya paso mucho de este post, pero si podes hacer mas estaria genial...
Para dejar un comentario Registrate! o.. eres ya usuario? Accede!