Curso Avanzado de HTML

Curso básico haga click aquí.


Capitulo 1
Capítulo: Consejos para el diseño de una página Web
Capítulo: Elementos Básicos y estructura de una pagina Web
Capítulo: Elementos del diseño y publicación de una página
Capítulo: Resultado
Capítulo: ¿Cómo abrir una página Html del disco duro desde Internet Explorer?
Capítulo: Dar Formato Básico a una página Web
Capítulo: Títulos
Capítulo: Tipos y tamaños de fuentes
Capítulo: Texto Preformateado
Capítulo: Líneas Divisorias
Capítulo: Listas con viñetas
Capítulo: Listas Anidadas
Capítulo: Listas de definición
Capítulo: Creación de sangrías
Capítulo: Formato de imágenes
Capítulo: Colocación de imágenes en la pagina Web
Capítulo: Modificación del tamaño de la imagen
Capítulo: Enlaces en una página Web
Capítulo: Enlace por medio de un gráfico
Capítulo: Tablas
Capítulo: Cambiar el ancho de la tabla
Capítulo: Cambiar el alto de la tabla
Capítulo: Conbinado Alineaciones
Capítulo: Encabezados de columnas
Capítulo: Arreglos de bordes
Capítulo: Color de fondo para las tablas
Capítulo: Unir columnas
Capítulo: Unir filas
Capítulo: Resumen de las propiedades de las Tablas
Capítulo: Caracteres especiales
Capítulo: Frames o marcos
Capítulo: Características adicionales de los frames





 

 

 Capítulo 1

Los Programas para generar páginas Web los podemos clasificar en dos grupos, en los que podemos identificar las ventajas y desventajas de cada uno de ello.

Programas para novatos:

Nota:
Si se emplea Word para realizar una página Web, se recomienda no utilizar tabuladores, y no utilizar sangrías francesas. Utilice tablas para producir el mismo efecto que las sangrías.

Programas para expertos y profesionales.

 

 

 Capítulo: Consejos para el diseño de una página Web

Organización del contenido de la página

Un tema grande a tratar se debe de dividir en subtemas, colocando cada uno de ellos en páginas distintas, relacionadas unas a otras por medio de Links. Un grupo de páginas relacionadas recibe el nombre de sitio.

Si se coloca bastante información en una pagina, esta debe de tener un menú o índice propio, y en cada tema debe de haber opciones de retorno al menú y a los temas siguientes y anteriores.

Incluir gráficos, y/o gif animados en todas las páginas.

Es conveniente hacer paginas vistosas por lo que es recomendable que tenga gráficos, sin embargo hay que tener cuidado de no utilizar demasiados, o gráficos muy grandes, ya que haría que la página se cargara muy lenta.

Cuando tenemos necesidad de colocar un gran número de gráficos, la técnica a seguir es reducir las imágenes y colocarlos así en la página, elaborando un código para permitir ampliar la imagen del gráfico ó mostrar una página adicional con el gráfico de gran tamaño.

Cuando se necesite mostrar una imagen grande, se presenta primero en la pagina una imagen reducida dándole el link o enlace a una imagen grande (al oprimir click a la imagen se carga una pagina con la imagen amplificada.)

Elección de Gráficos

Para diseñar una página Web, debemos de contar con imágenes que no ocupen una gran cantidad de Bytes, ya que eso hace que la página sea demasiado lenta para cargar, y provocaría que el visitante se desespere y salga de ella.

Se recomienda realizar un balance entre calidad y velocidad de carga, tratando siempre de tener las imágenes de calidad aceptable que ocupen poco espacio.

Las imágenes con mucha calidad ocupan más espacio que las que no la tienen.

Se recomienda que en la pagina de inicio o home page, sea aproximadamente de 40 k incluyendo las imágenes. Para que los visitantes que tienen conexiones lentas no se desesperen y cancelen la carga de la página.

Términos importantes:

HTML
Abreviatura de Hyper Text Markup Language
WWW
Abreviatura de World Wide Web
FTP
Abreviatura de File Transfer Protocol. (Protocolo de Transferencia de archivos. Es el empleado por programas que sirven para transmitir (enviar) o recibir información a un servidor. Es el utilizado para enviar paginas a un servidor.
URL
Uniform Resource Locator. Este termino se refiere a una dirección de Internet, o una dirección de FTP.

 

 Capítulo: Elementos Básicos y estructura de una pagina Web

Directivas

Piense en directivas ó etiquetas como hablar con el browser, o sea es la manera de darle instrucciones.
Abajo se dan los siguientes ejemplos de directivas:
<HTML>
</HTML>

La primera directiva es de inicio y la siguiente es una directiva del cierre.
Para hacer una directiva de cierre, simplemente agregan un signo / a la directiva de inicio.

La mayoría de directivas, pero no todas tienen una directiva del cierre.
Las directivas o comandos se pueden realizar en mayúsculas o minúsculas.

Estructura básica de una página Web

Explicación de la estructura básica

Directiva <HTML>

Indica a la computadora que se trata de un programa HTLM.
Todo programa HTML tiene dos partes El encabezado especificado por la directiva <HEAD> y el cuerpo indicado por la directiva <BODY>

Directiva <HEAD>

Dentro se colocan las directivas para proporcionar información de la página a los buscadores robóticos de Internet y otras directivas como <TITLE>, <META>, <SCRIPT> y <STYLE> que a continuación se describen:

Directiva <TITLE>

Enseña el nombre de la página que se muestra en la barra de título del navegador (Browser) y no el nombre con que se guarda el archivo.

<TITLE>Titulo de la página</TITLE>

Directiva <META>

Proporciona información para que los programas de búsqueda (como google.com, yahoo.com, altavista.com) encuentren nuestra página.
A continuación se da un ejemplo de la aplicación de la directiva META:

Directiva <SCRIPT> ( Este no es lenguaje HTML, y solo se dará un ejemplo)

Es empleada cuando agregamos programas con el lenguaje JAVA SCRIP, para incluir efectos visuales en la página y acciones.
Ejemplo: Las instrucciones descritas abajo, cambian el texto de los enlaces a rojo al pasar el Mouse sobre ello.
<style>
    <!--a:hover{color:RED; font-weight:; }-->
</style>

Directiva <STYLE>

Se utiliza para colocar Hojas de Estilo en Cascada (CSS),
Ejemplo: Las instrucciones descritas abajo, indican los atributos y características de la fuente de los textos de la página
<STYLE>
    P {font-family:Arial; font-size:12pt; color:red; background-color:lime}
</STYLE>

Escriba las siguientes instrucciones en un editor de textos simple como Word pad ó Write o block de notas.
Ejemplo 1: Saltos de línea y de párrafos

 

 

 Capítulo: Elementos del diseño y publicación de una página

Web Diseño del programa

- Análisis del Problema y Algoritmo
- Codificación o escritura del programa
- Agregarle presentación al programa
    - Con imágenes, sonido, Gif animados, Scrips de Java y Applets.
- Agregarle contadores de visitas.
- Depuración.
- Programamación de Java Scrips y Applets (Avanzado)
- Alojar el sitio o la página en un servidor
    - Por medio de un programa Ftp se sube la página al servidor
- Publicación
    - Agregar la página en los índices de los motores de búsqueda.
    - Intercambio de Banners

Requisitos para el diseño profesional de una página Web

- Computadora pentium con modem
- Conexión a Internet
- Browser (Navegador)
- Editor HTML
- Programa de diseño gráfico
- Programa de retoque fotográfico
- Programas de utilerías
- Programa Ftp.
- Colección de Fondos, Viñetas, Gráficos y Gráficos Gif.
- Direcciones de Internet de utilerías.

Herramientas para el diseño de páginas Web

 

 

 Capítulo: Resultado

Regla 1

Los retornos de carro que pongo no se respetan en el navegador,
Lo único que separa a los textos son las directivas <P> y la directiva <Br>
Siendo <P> la directiva de final de párrafo
Siendo <B> la directiva de final de línea

Si se desea dejar obtener varias líneas en blanco, no basta con repetir varias veces la directiva <p>, o <br>, sino es necesario escribirlas juntas, o sea, por cada línea en blanco que queramos se escribe <p><br>

Regla 2: Todas las directivas deben de estar Anidadas, o sea una dentro de otra.

A excepción de las directivas abiertas como <br> que no necesitan directiva de cierre

Ejemplo:

Grabar la página (en el directorio practicas-básicas)
Al terminar de escribir el programa grábelo con el nombre de pagina1.html. Se le puede dar cualquier nombre al archivo mientras la extensión sea html.
Importante: Los nombres de archivo no deben de tener espacios en blanco y estar escritos en minúscula

 

 

 Capítulo: ¿Cómo abrir una página Html del disco duro desde Internet Explorer?

Para visualizar el resultado de tu primer pagina en:

a) Para Internet Explorer, debes de hacer lo siguiente: Entrar a Internet Explorer Seleccionar el archivo, y dar click en el botón abrir

B) Para Netscape Navigator: debes de hacer lo siguiente

Entrar a Netscape Navigator: Seleccionar el archivo, y dar click en el botón abrir

Teniendo el siguiente resultado:

Directiva <BODY>

Define el cuerpo del texto del documento, es la sección principal en la cual va el contenido de nuestra página.
La directiva <BODY> admite varios atributos, los más importantes son:

BGCOLOR=color de fondo
TEXT= color del texto de la página
LINK=color del texto o link de enlace
VLINK= color del texto o link de enlace visitado
ALINK= color del texto o link de enlace activo
BACKGROUND="imagen de fondo"

Ejemplo:
<BODY BGCOLOR=black text=white link=blue vlink=red>
Fija el color del fondo negro, el texto blanco, el enlace azul y el enlace visitado rojo

 

 

 Capítulo: Dar Formato Básico a una página Web

Colores de fondo y texto de la página

Para cambiar el color de fondo de la página

El comando BGCOLOR para cambiar el color del fondo va dentro de la directiva inicial de <Body>, de la siguiente manera:
<BODY BGCOLOR="Código del color">

Aplicando el codigo de color celeste
<BODY BGCOLOR="#80ffff">

El comando BGCOLOR, es el que se emplea para cambiar el color del fondo.
El código "#80ffff" da el color celeste, los códigos de los colores nos lo dan los editores de página Web,

Para asignar el color del texto de la página

El comando TEXT para cambiar el color del texto también va dentro de la directiva inicial de <Body>, al junto con la de BGCOLOR de la siguiente manera.
<BODY TEXT ="Codigo del color">

Aplicando el codigo de color azul
<BODY TEXT="#0000ff">

El comando TEXT, es el que se emplea para cambiar el color del texto de la página.

Agrega dentro de la directiva <BODY> el siguiente código a la primer ejemplo (pagina1.htlm) <BODY BGCOLOR="#80ffff" TEXT="#0000ff"> Visualiza los cambios en el browser. Como se puede ver el color del fondo de la página es celeste y el color del texto es azul Graba el cambio con el nombre pag1-1.html
Resultado

Para colocar una imagen de fondo.

El comando para colocar una imagen como fondo de la página Web, va dentro de la directiva inicial de <Body>, de la siguiente manera.

<body BACKGROUND="swirlies.gif">

Simplemente cambia el comando BGCOLOR, por el comando BACKGROUND.
El comando BACKGROUND Se utiliza para colocar una imagen como fondo de la página.

La imagen swirlies.gif, es la que se aplicara como fondo en este ejemplo.

Modifica el comando <body>, el siguiente código del primer ejemplo (pagina1.htlm) <BODY BACKGROUND="swirlies.gif" TEXT="#0000ff">> Graba los cambios con el nombre pag1-2.html Visualiza los cambios en el browser.

Resultado

 

 

 Capítulo: Títulos

Para aplicar Titulos

Las directivas para aplicar titulos son muy sencillas.
Titulo 1, la Directiva es: <H1>

TEXTO DEL TITULO 1

</H1>
Titulo 2, la Directiva es: <H2>

TEXTO DEL TITULO 2

</H2>
Titulo 3, la Directiva es: <H3>

TEXTO DEL TITULO 3

</H3>
Titulo 4, la Directiva es: <H4>

TEXTO DEL TITULO 4

</H4>
Titulo 5, la Directiva es: <H5>
TEXTO DEL TITULO 5
</H5>
Titulo 6, la Directiva es: <H6>
TEXTO DEL TITULO 6
</H6>

Estilo de los caracteres

Existen dos tipos de estilo de caracteres, el estilo lógico y el estilo físico .
El estilo físico literalmente cambia los caracteres, no así el estilo lógico que solo cambia la apariencia de los mismos. En el estilo lógico la apariencia de los caracteres varia de acuerdo a cada Browser, ya que cada uno de ellos tiene una forma diferente de tratar el texto.

Estilo fisicos

Para aplicar Negritas (bold)
<B>texto en negritas</B>
Para aplicar Cursivas (Italic)
<I> texto en cursivas </I>
Para aplicar Subrayado. (Underline)
<U> texto subrayado </U>
Para aplicar letra grande
<BIG>  Letras grandes </BIG>
Para aplicar letra pequeña
<SMALL> Letras pequeñas </SMALL>
Para aplicar  subíndices
<SUB> texto en subíndice </SUB>
Para aplicar índices ( Superíndice s)
<SUP> Superíndice </SUP>
Para aplicar letra tipográfica
<TT> Texto </TT>    (Este tipo de letra se parece al de una maquina de escribir.)
Para aplicar letra tachada
<S> Texto </S>

El efecto de los estilos se acumula, o sea que al aplicar un segundo estilo no se cancela el anterior sino se acumula, por ejemplo al aplicar negritas y luego cursivas, el texto obtiene ambos estilos negritas y cursivas. Por lo tanto se pueden aplicar varios estilos juntos.

Estilos lógicos

Para aplicar texto fuerte.
<STRONG>texto</STRONG>
Para aplicar texto enfatizado
<EM> texto </EM>
Para aplicar texto de terminal
<KBD>texto</KBD>
Para aplicar texto literal o de cita
<CITE> texto </CITE>
Para aplicar texto de codigo HTML (sin que esté se ejecute)
<CODE>texto código</CODE>
Para aplicar texto de definición
<DFN> texto </DFN>
Para aplicar texto identado o con sangria
<BLOCKQUOTE>texto</BLOCKQUOTE>
Para aplicar texto ejemplo
<SAMP> texto </SAMP>

Para centrar textos o párrafos

Aplique la directiva <center> Texto centrado </center>
Usualmente a los encabezados se les aplica centrado, por ejemplo:

<center><h1>Texto del título centrado</h1></center>

Segundo ejemplo: Escriba las siguientes instrucciones en un editor de textos simple como word pad ó write o block de notas.

Ejemplo 2 (Encabezados, y Estilos, y alineación)

Resultado
Grábalo con el nombre de página2.html  en el directorio practicas-formatos y visualiza los resultados

 

 

 Capítulo: Tipos y tamaños de fuentes

Para cambiar el tamaño de la fuente

Existen dos formas de cambiar el tamaño de letra a la página, una manera es con directiva (cerrada) <font> ....<\font>, la cual se utiliza para cambiar el tamaño de letra por párrafos, la otra forma con directiva (abierta) <BASEFONT SIZE="valor numérico">, se utiliza para cambiar el tamaño de letra por defecto de toda la página.

Para cambiar el tamaño de la letra todo el documento.

Se utiliza la directiva <BASEFONT SIZE="valor numérico"> como en el ejemplo <BASEFONT SIZE="5">

Hace que el documento adopte un tamaño de letra tamaño 5 ror defecto para todo el texto que aparezca después de esta directiva. Si lo ponemos después de la directiva <BODY> (inmediatamente después a ésta), la modificación del tamaño de letra afecta a todo el documento:

<BODY> <BASEFONT SIZE="5"> ....

Para cambiar el tamaño de la fuente por párrafos.

Se utiliza las siguientes directivas:
<FONT SIZE=No. de fuente> Texto </FONT>

Las fuentes tienen 7 tamaños:
Las podrás Observar en el siguiente ejemplo:
En un archivo nuevo realiza la siguiente codificación dentro de la sección de cuerpo de la página en el tercer ejemplo (página3.html)

El resultado se verá como sigue

Nota:
Si se utilizan títulos, en un texto determinado, no se emplea <font size=No.> para el mismo texto, ya que el titulo da la orden para un tamaño determinado de letra y  <font size=No.> estaría dando la orden para otro tamaño de letra.  
La directiva <FONT> tiene otros parámetros COLOR="color del texto" y FACE="nombre de la fuente"
Ejemplo: <font size="3" color=blue face="times new roman">Texto de color azul, tamaño 3, de fuente tipo times new roman</font>

Para cambiar el tamaño de la fuente por párrafos. (segundo método)

El tamaño de la fuente por defecto (preestablecido) es de tamaño 3.
Si deseamos aumentar el tamaño al siguiente, tenemos las siguientes dos maneras:

<FONT SIZE="4">.....</FONT> 1er. Método
<FONT SIZE="+1">...</FONT> 2do. Método

(El tamaño estándar es 3 + 1 nos da tamaño 4)

Otro ejemplo de comandos quivalentes

<FONT SIZE="2">.....</FONT> 1er. Método
<FONT SIZE="-1">...</FONT> 2do. Método

(El tamaño estándar es 3 - 1 nos da tamaño 2)

 

 Capítulo: Texto Preformateado

Las directivas ( <PRE>...</PRE> ) permite visualizar el texto tal y como se encuentre colocado entre estas 2 directivas, con el formato que deseemos, con los retornos de carro sin ser especificados por <BR>, y las tabulaciones

NOTA:
No es recomendable usar tabulaciones, en su lugar es preferible poner espacios, (por medio de la barra de espaciar), ya que no todos los browsers tienen preestablecidos el mismo espacio de tabulador y podría modificarnos la distribución del texto dependiendo del navegador empleado.

Escribe y graba con el nombre de pagina4.html en el directorio practicas-formatos la codificación del siguiente ejemplo.
Visualiza detenidamente los resultados

Ejemplo: 4

Nota: Se recomienda realizar la tabla en Word, para posteriormente pegarla en arachnophilia

Resultado

Alineación de párrafos. (derecha, izquierda y centro y justificado)

Estas propiedades son de la directiva <P>.... </P>
Alinean el texto en la pantalla a la izquierda, derecha, centrado y justificado.

<P ALIGN= "center"> texto centrado </p>
<P ALIGN= "left"> texto alineado a la izquierda </p>
<P ALIGN= "right"> texto alineado a la derecha </p>
<P ALIGN= "justify"> texto justificado </p>

Escribe y graba con el nombre de pagina5.html en el directorio practica-formato la codificación del siguiente ejemplo.

Visualiza detenidamente los resultados

Ejemplo 5

Resultado
El resultado se verá como sigue

 

 

 Capítulo: Líneas Divisorias

Son Separadores de texto en forma de Líneas Horizontales.
La directiva es: <HR> (Horizontal Rule) y es una directiva abierta.

<HR>

Por defecto nos da una línea de una altura=1 y una anchura=100%
Pudiendo cambiar alto, ancho alineación y color de la misma.
Ejemplo:
<HR SIZE=5 WIDTH="75%" COLOR="#ff0000" ALIGN = CENTER>

SIZE="valor numerico" Permite indicar el grosor de la línea en cuestión. (valor dpor defecto es 1)
WIDTH="valor numérico" Permite indicar la anchura en pixels o el tanto por ciento del ancho de la pantalla que ocupará la línea.(valor por defecto es 100%
ALIGN="LEFT | CENTER | RIGTH" Determina la forma de alinear la línea en la pantalla (sus valores respectivos son izquierda, derecha y centro). Por defecto el valor, es de alineado a la izquierda.)

Escribe y graba con el nombre de pagina6.html en el directorio practica-formato la codificación del siguiente ejemplo.

Visualiza detenidamente los resultados

Ejemplo6:

Resultado

Resumen de directivas y atributos de formatos


 

 

 Capítulo: Listas con viñetas

Estas listas generan viñetas de diferentes tipos, muy parecidas a las que se utilizan en Word, estas listas son de tipo desordenadas.

Estas listas tienen la directiva cerrada <UL>...<\UL> (unordered lists), significa listas desordenadas y se utiliza para iniciar este tipo de lista.

La estructura de una lista con viñetas (desordenada) es la siguiente.

Ejemplo 11:
Copia la codificación de la lista anterior y realiza los  cambios

Graba los cambios y visualiza detenidamente los resultados

TYPE="Nombre_de_Viñeta"

Si se desea cambiar el tipo de viñeta se emplea el atributo TYPE="Nombre_de_Viñeta", este debe de escribirse dentro de la directiva <UL> , o sea <UL TYPE="Viñeta">
Nota: Los nombres de las viñetas debe escribirse forzosamente en minúsculas

Se tienen los siguientes tipos.

<UL TYPE ="disc">
Este es el atributo que muestra un circulo con relleno negro, es el que da por defecto.

<UL TYPE ="circle">
Este es el atributo que muestra un circulo vacío.

<UL TYPE ="square">
Este es el atributo que muestra un pequeño cuadro negro.

Ejemplo 12
Copia la codificación de la lista anterior y realiza los  cambios

Graba los cambios y visualiza detenidamente los resultados

 

 

 Capítulo: Listas Anidadas

Las listas anidadas, son listas de varios niveles que pueden combinar diferentes tipos de listas.

Ejemplo 13

Inicia un nuevo archivo y escribe la codificación siguiente, grábalo con el nombre de practica 8  en el directorio practicas-listas

 

 

 Capítulo: Listas de definición

Estas listas generan listas de elementos con sangrías y poseen una directiva cerrada <DL>...</DL> (definition list, lista de definición), la que se utiliza para dar inicio a la lista de definición.

Para colocar el termino se utiliza la directiva abierta <DT> ( Directiva de termino)
Para colocar la definición se utiliza la directiva abierta <DT> (directiva de definición).

Ejemplo 14
Inicia un nuevo archivo y escribe la codificación siguiente, grábalo con el nombre de practica 9  en el directorio practicas-listas

La directiva <DL> , tiene el parámetro compact , que se emplea para dar sangrías francesas al texto, con la salvedad que solo funciona de esa manera con temimos pequeños, para poder entender esto se presenta el siguiente ejemplo.

Ejemplo 15 escribe la codificación siguiente

 

 

 Capítulo: Creación de sangrías

Se puede obtener el mismo resultado que las listas de definición con la directiva abierta <DIR>...</DIR> , y con la directiva <blockquote>.

<BLOCKQUOTE>...</BLOCKQUOTE> Es Texto indentado.

<DIR>...</DIR> funciona como un tabulador.

Ejemplo 16
Copia la codificación del ejemplo 14 y realiza los  cambios

Graba los cambios y visualiza detenidamente los resultados

Ejemplo 17
Copia la codificación anterior y realiza los  cambios

Como se puede apreciar el resultado de ambos ejemplos es igual.

Graba los cambios y visualiza detenidamente los resultados

Ejemplo 18
inicia un nuevo archivo y escribe la codificación siguiente, grábalo con el nombre de practica 10  en el directorio practicas-listas

Graba los cambios y visualiza detenidamente los resultados

El espacio que se obtiene de sangría es pequeño ( de 3 a 5 caracteres, dependiendo del tamaño de ellos y del tamaño de letra del  browser).
Observe en el resultado que en el primer párrafo  la definición paso a la segunda línea. En el segundo párrafo la definición sigue inmediatamente al termino FTP

 

 

 Capítulo: Formato de imágenes

Los navegadores soportan dos tipos de formatos de imágenes GIF y JPEG.

Estos formatos permiten comprimir los datos de las imágenes, de manera que sean menos lentas de cargar.

Características de las imágenes GIF.

1.- Soportan Animaciones. Genera gráficos con movimiento
2.- Soportan Transparencias: Esto hace que se muestre el fondo sobre el que se apoya la imagen
3.- Efecto de difusionado o entrelazado: Funciona de manera que conforme se va cargando va mostrando la imagen más nítidamente, hasta alcanzar la resolución total de la misma
4.- Solo soporta 255 colores. Se emplea en dibujos, no se recomienda este formato para fotografías ya que estas requieren muchos colores
5.- Comprime las imágenes Esto es muy útil para empleo de Internet, ya que la velocidad de transmisión es muy lenta para imágenes, sonido y vídeo, ya que estos suelen ser archivos grandes.

Características de las imágenes JPEG

Soporta un máximo de 16 millones de colores. Se utiliza para imágenes de fotografías
Alta compresión de imágenes. Este formato tiene mejor compresión que el Gif.

En resumen se utiliza el formato GIF, para imágenes animadas e imágenes con transparencia. El formato JPEG, se utiliza para fotografías.

Algunos de los programas que se recomiendan para la edición de imágenes:
Los que puedes encontrar y bajar de Internet se indican con *

Edición de imágenes Adobe Photoshop Transparencia Lview Pro * Gif animado Gif Construction Set * Gif Animater * Difuminado Paint Shop Pro * Creación de títulos, Xara Web Style y botones Creación de títulos Xara 3D3 Con animación en 3d

 

 

 Capítulo: Colocación de imágenes en la pagina Web

La directiva para incluir un gráfico es <IMG > (Imagen), este tiene el formato básico siguiente:

<IMG SRC="Ruta/imagen">
<IMG> Indica la inserción de una imagen en una página HTML
SRC="Ruta/Imagen" Se utiliza para indicar la ruta y el nombre de gráfico a mostrar:
Ejemplo:
<IMG SRC="imágenes/rosa.gif">
El comando anterior carga en la pagina la imagen rosa del directorio imágenes

La directiva < IMG> tiene los parámetros opcionales BORDER, HEIGHT, WIDTH, ALT y ALIGN , pudiendo agregarse uno o varios de ellos.

BORDER= "Tamaño numérico" Se refiere al borde del gráfico, el número 1 indica borde y el numero 0 significa sin borde, por defecto el valor es 1
HEIGHT= "Tamaño numérico" Indica el alto de la imagen en puntos o pixels, o en porcentaje. Se emplea para cambiar el tamaño original del gráfico.
WIDTH= "Tamaño numérico" Indica el ancho de la imagen en puntos (pixels) o en porcentaje. Se emplea para variar el tamaño de la imagen original.

Tip:

Crea un gráfico pequeño que sea rápido de cargar y amplificarlo con HEIGHT y WIDTH, para su visualización
ALT= "Texto a mostrar" Es el texto que se desea que aparezca cuando se pase el puntero del Mouse sobre la imagen
ALIGN="top | middle | bottom" Indica como se ha de alinear el texto que siga o preceda a la imagen. Se aplica para textos cortos que entren en una sola línea a un lado de la imagen. Si se desea textos más largos, se emplean tablas que más adelante se ilustraran.

Bottom

Alinea el texto en la zona inferior del gráfico.

Top

Alinea el texto en la zona superior del gráfico.

Center ó Middle

Alinea el texto en la zona central del gráfico.

Se da a continuación varios ejemplos de combinaciones de los atributos de <IMG>

Colocación de borde en una imagen

Sintaxis:
<IMG SRC= "Ruta/imagen" BORDER =tamaño ALT ="texto a mostrar">
Ejemplo:
<IMG SRC ="imagenes/rosa.gif" BORDER =0 ALT ="Imagen de una rosa">

Escribe el ejemplo anterior dentro de la sección <body> de en un nuevo archivo de nombre imágenes1.html.
Visualiza el resultado.
Resultado

Cambia el atributo BORDER=0 A BORDER=1 y observa que ahora la imagen tiene un borde.
Resultado

 

 

 Capítulo: Modificación del tamaño de la imagen

Es conveniente grabar imágenes pequeñas y amplificarlas, con el propósito de que tarden menos en cargarse. Los atributos para cambiar el ancho y la altura son HEIGHT y WIDTH.

Agrega la siguiente línea en el archivo imágenes.html y observa que ahora hay una segunda imagen más grande .

<IMG SRC= "imagenes/rosa.gif" BORDER=0 ALT= "Imagen de una rosa">

<IMG SRC = "imagenes/rosa.gif" BORDER = 0 WIDTH= 60 HEIGHT= 60 ALT= "Imagen de una rosa" >
Resultado

Alineación de texto adyacente de una imagen.

Para alinear el texto se utiliza el atributo ALIGN="top | middle | bottom".

Agrega las siguientes líneas en el archivo imágenes.html y observa los resultados.
<IMG SRC="imagenes/est-2.jpg" ALT="Estrella de 9 puntas" align="top">
Texto alineado en la parte superior
<p>
<IMG SRC="imagenes/est-azul.jpg" ALT="Estrella de 9 puntas" align="center">
Texto alineado en la parte de enmedio
<p>
<IMG SRC="/imagenes/est-azul2.jpg" ALT=" Estrella de 9 puntas" align="bottom">
Texto alineado en la parte inferior
Resultado

 

 

 Capítulo: Enlaces en una página Web

Un hiperenlace (enlace) es la referencia a otros documentos html, gráficos, direcciones de E-mail, u objetos (archivos Zip, Word, ect). Estos hiperenlaces son las palabras subrayadas, botones o gráficos a los que al darle Click muestran otra página

El nombre de este lenguaje es HTMl, (Lenguaje creador de Hipertecto), se debe a que la característica más importante de las paginas Web es precisamente el Hiperenlace.

Nota: Se debe de escribir en minúsculas todos los nombres de los archivos a los que se hace referencia en los hiperenlaces, ya que algunos servidores en los que se alojan las páginas no aceptan mayúsculas.

Tip:

El contenido de un sitio se debe de desglosar en subtemas, colocando cada subtema en una página diferente, uniendo todas las páginas por medio de hiperenlaces.

La directiva para un hiperenlace es:

<A HREF="dir-url"> Texto o imagen </A>
En donde:

Tipos de enlace

Enlace a otra página de nuestro sitio. Enlace a otra sección de la misma página Enlace a un lugar concreto dentro de otra página de nuestro sitio. Enlace a una página externa. Enlace por medio de un gráfico Enlace a una dirección de E-mail, por medio de un gráfico. Enlace a una dirección de E-mail. Enlace a un objeto (documento zip ó Word)

Enlace otra página de nuestro sitio.

Un enlace es la conexión de una pagina a otra. Un sitio es un grupo de paginas conectadas entre si, por hiperenlaces.

Para dar ejemplo a un enlace. Supongamos que en la pagina dos quiera hacer un enlace a la página tres.
Agregue la siguiente línea a la pagina2.html.
<A HREF="pagina3.html">Ejemplo 3 </A>
Grabe la página con el nombre de pagina3-1.html.

Al cargar la página al browser haga Click en el enlace "Ejemplo 3" . Si realizo la practica correctamente se debió haber cambiado de la página2 a la pagina3.
Practica: Realice un menú de enlaces en una página de nombre menu.html, escriba una lista de enlaces de las primeras 5 páginas de ejemplo. Al final de cada pagina agregar un enlace a la pagina de menú.

Enlace dentro de la misma página.

En caso que tengamos una página extensa que contenga varios temas, es necesario crear enlaces a los diferentes temas contenidos en la página.
Para realizar esto es necesario marcar el lugar exacto con un nombre de referencia a cada tema o lugar al que se desee saltar

La directiva para enlazar un tema de la misma página es:
<A HREF="#marca">Tema a mostrar" </A>
El signo # le indica al browser que se trata de una dirección interna.
"#marca" es el nombre de la referencia a la que se desee saltar dentro de la página.
El atributo para marcar con un nombre del lugar exacto a es:
<A NAME="marca"> </A>

Vea y analice el ejemplo presentado en la página "enlaces-int.html" enlaces-int.html

Enlace a un lugar exacto dentro de otra página de nuestro sitio.

Podemos tener una combinación en la que nos podemos enlazar una página y a un punto concreto dentro de ella.
Supongamos que deseamos enlazar a la pagina de nombre capitulo2.html y dentro de ella al tema 4.

La directiva es la siguiente:
<A HREF="capitulo2.html#tema4"> Tema 4 del capitulo 2 </A>

Dentro de la pagina capitulo2.html debemos de tener marcado el lugar con:
<A NAME="tema4"> Tema 4 </A>

Vea y analice el ejemplo presentado en la página "menu1.html"
menu1.html

Enlace a una página externa.

Muchas veces nosotros queremos hacer referencia una pagina o sitio de otra persona.
La directiva para hacerlo es muy parecida a las anteriores.
Ejemplo:
<h1> Motores de Busqueda </h1>
<A HREF="http://www.yahoo.com">Yahoo</A>
<A HREF="http://www.altavista.digital.com">Alta Vista</A>
<A HREF="http://www.lycos.com">Lycos</A>

Grabe el ejemplo anterior con el nombre enlaces-ext.html
Vea y analice el ejemplo: enlaces-ext.html

 

 

 Capítulo: Enlace por medio de un gráfico

Se puede utilizar un gráfico en lugar de un texto para enlazar las páginas.
La directiva utilizada para esto es:
<A HREF="dir-url"> imagen </A>

Ejemplos: Escriba el codigo siguiente en el archivo enlace-ext.html
<A HREF= "enlaces-ext.html" ><IMG SRC= "imagen/rosa.gif" > </A>
<p>
<a HREF ="enlaces-ext.html"> <img SRC= "imagen/rosa.gif" border="0">Buscadores </a>

Vea y analice el ejemplo: enlaces-graf.html
Observe que en la segunda línea se incluyo un texto.

Enlace a una dirección de E-mail.

Se utiliza para que nuestros visitantes puedan mandarnos fácilmente un E-mail.
En la referencia colocamos nuestra dirección de E-mail.

La directiva es la siguiente
<A HREF= mailto:dir_Email >Texto </A>

Ejemplo
<A HREF=" mailto:mkcever19@mailcity.com ">Mandame un E-mail </A>

Agrega el código anterior al archivo enlace-ext.html, y visualiza el resultado.

Enlace a una dirección de E-mail, por medio de un gráfico.

Se puede combinar el Enlaces de E-mail con un grafico.

Ejemplo:
<A HREF="mailto:mkcever19@mailcity.com"><IMG SRC="imagen/email(1).gif" border="0" >Mandame un E-mail</A>

Agrega el código anterior al archivo enlace-ext.html, y visualiza el resultado.

Enlace a un objeto (documento zip ó Word)

Se utiliza cuando deseamos poner al alcance de nuestras visitas un archivo compactado (zip), o un archivo en formato word.

Sintaxis
< A HREF=" archivo "> texto </A>

Ejemplos:
<A HREF=" citas.doc "> Bajar el archivo Citas </A>
<A HREF=" citas.zip "> Bajar el archivo comprimido Citas </A>

Agrega el código anterior al archivo enlace-ext.html, y visualiza el resultado. enlace-ext.html
(comprueba que la gráfica también activa el enlace.

 

 

 Capítulo: Tablas

La creación de tablas se utiliza en términos generales para mejorar la visualización de la pagina, entrando en detalles se utiliza para colocar imágenes con textos extensos a un lado de ellas, crear un columnas de datos, resaltar por medio de bordes los datos, distribuir los datos de manera ordenada.

Crear una tabla
La estructura de una tabla y sus directivas para crearlas son:
Ejemplo: tabla con una celda
Nota: Como mínimo se tiene que tener un renglón y una celda para una tabla

<TABLE> (Inicio Tabla)
<TR> (Inicia renglón
   <TD> (Inicia celda)
      Texto de la celda
   </TD> (Fin celda)
</TR> (Fin renglón)
</TABLE> (Fin Tabla)


Texto de celda

Colocar un borde sobre la tabla
El atributo BORDER=1 se visualiza un borde en tabla
El atributo BORDER=0 quita el borde de la tabla.

Ejemplos:
< TABLE BORDER="1">
<TR>
   <TD>
   Texto de la celda
   </TD>
</TR>
</TABLE>

Aumentar el gruesor del borde
<TABLE BORDER="8" >
<TR>
   <TD>
   Texto de la celda
   </TD>
</TR>
</TABLE>

 

 

 Capítulo: Cambiar el ancho de la tabla

El ancho de la tabla se puede cambiar en porcentaje o en pixels (puntos)
El atributo WIDTH="100%" cambia el ancho de la tabla al 100%
El atributo WIDTH="600" cambia el ancho de la tabla a 600 pixels.
Ejemplos:
<TABLE BORDER="1" WIDTH="100%" >
<TR>
   <TD>
   Texto de la celda
   </TD>
</TR>
</TABLE>

<TABLE BORDER="1" WIDTH="50%" >
<TR>
   <TD>
   Texto de la celda
   </TD>
</TR>
</TABLE>

<TABLE BORDER="1" WIDTH="300" >
<TR>
   <TD>
   Texto de la celda
   </TD>
</TR>
</TABLE>

 

 

 Capítulo: Cambiar el alto de la tabla

<TABLE BORDER="3" WIDTH="200" HEIGHT="100" >
<TR>
   <TD> Texto de la celda </TD>
</TR>
</TABLE>

Alineación Horizontal (centro derecha e izquierda)

Alineación centrada  ALIGN="center"
Alineación derecha   ALIGN="right"
Alineación izquierda ALIGN="left"

Alineación centrada:
align="center"
<TABLE BORDER="3" WIDTH="200" HEIGHT="100">
<TR>
   <TD align="center" > Texto de la celda </TD>
</TR>
</TABLE>

Alineación derecha : align="right"
<TABLE BORDER="3" WIDTH="200" HEIGHT="100">
<TR>
   <TD align="right" >Texto de la celda</TD>
</TR>
</TABLE>

Alineación Izquierda : align="left" (Es por defecto)
<TABLE BORDER="3" WIDTH="200" HEIGHT="100">
<TR>
   <TD align="left" > Texto de la celda </TD>
</TR>
</TABLE>

Alineación Vertical (arriba en medio y abajo)

Alineación arriba:    valign="top"
Alineación en medio valign="middle"
Alineación abajo      valign="bottom"

Alineación arriba :
valign="top"
<TABLE BORDER="3" WIDTH="200" HEIGHT="100">
<TR>
   <TD valign="top" > Texto de la celda </TD>
</TR>
</TABLE>

Alineación Abajo : valign="bottom"
<TABLE BORDER="3" WIDTH="200" HEIGHT="100">
<TR>
   <TD valign= " bottom "> Texto de la celda </TD>
</TR>
</TABLE>

Alineación: En medio : valign="middle" (por defecto)
<TABLE BORDER="3" WIDTH="200" HEIGHT="100">
<TR>
   <TD valign= " middle "> Texto de la celda </TD>
</TR>
</TABLE>

 

 

 Capítulo: Conbinado Alineaciones

Conbinado Alineaciónes (Centrado verical y horizontal)
<TABLE BORDER="3" WIDTH="200" HEIGHT="100">
<TR>
  <TD align= " center" valign= " middle "> Texto de la celda </TD>
</TR>
</TABLE>

Tablas con de un renglón y dos columnas.
<TABLE BORDER="3" WIDTH="75%">
<TR>
  <TD> Texto en fila 1, celda 1 </TD>
  <TD> Texto en fila 1, celda 2 </TD>
</TR>
</TABLE>

<TABLE BORDER="3" WIDTH="100%" >
<TR>
  <TD WIDTH="50%" > Texto en fila 1, celda 1</TD>
  <TD WIDTH="50%" > Texto en fila 1, celda 2 </TD>
</TR>
</TABLE>

<TABLE BORDER="3" WIDTH="100%" >
<TR>
  <TD WIDTH="20%" > Texto en fila 1, celda 1</TD>
  <TD WIDTH="80%" > Texto en fila 1, celda 2 </TD>
</TR>
</TABLE>

Tabla de 1 renglón y tres columnas.
<TABLE BORDER="3" WIDTH="100%" >
<TR>
  <TD WIDTH="20%" > Texto en fila 1, celda 1 </TD>
  <TD WIDTH="60%" > Texto en fila 1, celda 2 </TD>
  <TD WIDTH="20%" > Texto en fila 1, celda 3 </TD>
</TR>
</TABLE>

Tablas de 2 renglones y tres columnas.
<TABLE BORDER="3" WIDTH="100%" >
<TR>
  <TD WIDTH="20%" >fila 1, col. 1 </TD>
  <TD WIDTH="60%" > fila 1, col. 2 </TD>
  <TD WIDTH="20%" > fila 1, col. 3 </TD>
</TR>

<TR>
  <TD >fila 2, col.1 </TD>
  <TD > fila 2, col.2 </TD>
  <TD > fila 2, col.3 </TD>
</TR>
</TABLE>

Tabla de 2 renglones y tres columnas.
<TABLE BORDER="3">
<TR>
  <TD >fila 1, col. 1 </TD>
  <TD > fila 1, col. 2 </TD>
  <TD > fila 1, col. 3 </TD>
</TR>

<TR>
  <TD >fila 2, col.1 </TD>
  <TD > fila 2, col.2 </TD>
  <TD > fila 2, col.3 </TD>
</TR>
</TABLE>

 

 

 Capítulo: Encabezados de columnas

Centra y resalta el texto contenido en la celda.
<TH>............ </TH> Significa Table Head (Encabezado de tabla)

<table BORDER="3">
   <tr>
        <th>Col. 1</th>
        <th>Col. 2</th>
        <th>Col. 3</th>
   </tr>
   <tr>
        <td>fila 1, col. 1</td>
        <td>fila 1, col. 2</td>
        <td>fila 1, col. 3</td>
    </tr>
    <tr>
       <td>fila 2, col.1</td>
       <td>fila 2, col.2</td>
       <td>fila 2, col.3</td>
    </tr>
</table>

 

 

 Capítulo: Arreglos de bordes

CELLPADDING="Valor Numérico":
Fija el espacio entre el borde exterior de la celda y el borde interior (borde del contenido)
CELLSPACING="Valor Numérico"
Fija el espacio entre el contenido y el  borde interior

Ejemplo 1:
<table border="5" cellpadding="1" cellspacing="10" >
<tr>
  <td>Ene</td>
  <td>Feb</td>
  <td>Mar</td>
</tr>
<tr>
  <td>Abr</td>
  <td>May</td>
  <td>Jun</td>
</tr>
</table>

Nótese el espacio entre los bordes (interior y exterior)

Ejemplo 2:
<table border="5" cellpadding="10" cellspacing="1">
<tr>
  <td>Ene</td>
  <td>Feb</td>
  <td>Mar</td>
</tr>
<tr>
  <td>Abr</td>
  <td>May</td>
  <td>Jun</td>
</tr>
</table>

Nótese el espacio entre el texto y los bordes.

Ejemplo 3:
<table border="5" cellpadding="10" cellspacing="10" >
<tr>
  <td>Ene</td>
  <td>Feb</td>
  <td>Mar</td>
</tr>
<tr>
  <td>Abr</td>
  <td>May</td>
  <td>Jun</td>
</tr>
</table>

 

 

 Capítulo: Color de fondo para las tablas

Para cambiar del color de fondo, basta con escribir la directiva BGCOLOR dentro del elemento que de la tabla que se desee cambiar.

Para cambiar el color a  la tabla
<TABLE BGCOLOR="codigo de color">
Para cambiar el color a  la fila
<TR BGCOLOR="codigo de color">
Para cambiar el color a  la celda
<TD BGCOLOR="codigo de color">
Para cambiar el color del borde
<TABLE  BORDERCOLOR="codigo de color">

Fijar  color a  la tabla
<table bgcolor= "#00FFFF" border="1" cellpadding="1" cellspacing="1">
<tr>
  <td>Ene</td>
  <td>Feb</td>
  <td>Mar</td>
</tr>
<tr>
  <td>Abr</td>
  <td>May</td>
  <td>Jun</td>
</tr>
</table>

Fijar el color a  la fila
<table border="1" cellpadding="1" cellspacing="1">
<tr  bgcolor= "#00FFFF" >
  <td>Ene</td>
  <td>Feb</td>
  <td>Mar</td>
</tr>
<tr>
  <td>Abr</td>
  <td>May</td>
  <td>Jun</td>
</tr>
</table>

Para cambiar el color a  la celda
<table border="1" cellpadding="1" cellspacing="1">
<tr >
  <td bgcolor= "#00FFFF" >Ene</td>
  <td>Feb</td>
  <td bgcolor= "#00FFFF" >Mar</td>
</tr>
<tr>
  <td>Abr</td>
  <td bgcolor= "#00FFFF" >May</td>
  <td>Jun</td>
</tr>
</table>

Para cambiar el color del borde
<table bordercolor = "#0000FF" border="8" cellpadding="1" cellspacing="1">
<tr>
  <td>Ene</td>
  <td>Feb</td>
  <td>Mar</td>
</tr>
<tr>
  <td>Abr</td>
  <td>May</td>
  <td>Jun</td>
</tr>
</table>

Para cambiar el color del borde en dos tonos
<table bordercolordark="#999933" bordercolorlight="#CCCC66" border="8" cellpadding="1" cellspacing="1">
<tr>
  <td>Ene</td>
  <td>Feb</td>
  <td>Mar</td>
</tr>
<tr>
  <td>Abr</td>
  <td>May</td>
  <td>Jun</td>
</tr>
</table>

Nótese el espacio entre el texto y el borde interior. Y el espacio entre el borde interior y el borde exterior.

 

 Capítulo: Unir columnas

Se realiza extiendo el No.de columnas que va a ocupar la celda.
Se utiliza la directiva COLSPAN="No. de celdas"
Ejemplo 1
(uniendo  2 columnas)
<table border="8" cellpadding="1" cellspacing="1">
<tr>
  <td colspan="2" > Motores de búsqueda </td>
</tr>
<tr>
  <td> Yahoo </td>
  <td> Lycos </td>
</tr>
</table>

Ejemplo 2: (uniendo  3 columnas)
<table border="8" cellpadding="1" cellspacing="1">
<tr>
  <td colspan="3" > Motores de búsqueda </td>
</tr>
<tr>
  <td> Yahoo </td>
  <td> Lycos </td>
  <td> Infoseek </td>
</tr>
</table>

 

 

 Capítulo: Unir filas

Se realiza extiendo el No.de renglones que va a ocupar la celda.
Se utiliza la directiva ROWSPAN="No. de celdas"
Ejemplo 1:
(uniendo  2 renglones)
<table border="8" cellpadding="1" cellspacing="1">
<tr>
   <td rowspan="2" > Browsers </td>
   <td> Internet Explorer </td>
</tr>
<tr>
    <td>Netscape Navigator</td>
</tr>
</table>

Ejemplo 2: (uniendo  3 renglones)
<table border="5">
<tr>
   <td rowspan="3">Browsers</td>
   <td>Internet Explorer</td>
</tr>
<tr>
   <td>Netscape Navigator</td>
</tr>
<tr>
  <td>Mosaic</td>
</tr>
</table>

Combinando Renglones y Columnas:

Ejemplo (uniendo  2 columnas y dos filas)
<table border="8" cellpadding="1" cellspacing="1">
<tr>
   <td rowspan="2" >Internet</td>
   <td colspan="2" > Motores de búsqueda </td>
</tr>
<tr>
   <td> Yahoo </td>
   <td> Lycos </td>
</tr>
</table>

 

 

 Capítulo: Resumen de las propiedades de las Tablas

Ejemplos de aplicaciones de tablas

1. Organizar texto o gráfico en una tabla
2. Escribir texto en Sangrías.
3. Colocar texto o listas a un lado del gráfico
4. Escribir Texto en dos o más columnas (tipo periódico o revista)
5. Crear menús al margen izquierdo .

 

  Capítulo: Carácteres especiales

Estos caracteres se emplean debido a que no todos los países emplean los mismos tipos de caracteres especiales como son los de puntuación (comillas, acentos, diéresis, etc.).,   si queremos que las páginas Web estan disponibles a personas de todo el mundo, debemos emplear los códigos o alias de caracteres especiales  de HTML, estos códigos nos proporcionan los caracteres especiales independientemente del lenguaje que tenga instalado nuestro visitante.

Los códigos o alias de caracteres especiales de HTML inician con el símbolo & y terminan con el símbolo ;

Los caracteres especiales de HTML, se pueden representar con  códigos ASCII, o por medio de alias.

Codigo ASCII
Sintaxis:
&#NO.código_ascii ;
Ejemplo:
&#243 ;     Nos da como resultado ó , puesto que el numero de código ASCII para la á es 225.
Aplicando lo anterior la palabra corazón se escribe así coraz&#243 ; n

Alias
Sintaxis:
&alias ;
Ejemplos:

& o acute ;   Nos da el resultado  ó
& a acute ;   Nos da el resultado  á
& O acute ;   Nos da el resultado    Ó
& A acute ; Nos da el resultado    Á
& n tilde ;    Nos da el resultado ñ & N tilde ;    Nos da el resultado    Ñ
Aplicando lo anterior la palabra corazón se escribe así coraz& o acute ; n

Como podemos ver el alias para los acentos es letra+acute, y el alias para los tildes es letra+tilde.

Tabla de caracteres especiales HTML

 

 Capítulo: Frames o marcos

Los frames o cuadros son divisiones que se le pueden dar a una página Web. En cada uno de los frames se pueden cargar una página diferente que actúan independientemente una de otra.
El uso más común del empleo de los frames es en la aplicación de menús.
En el cual se divide la pantalla en dos frames, uno estrecho (en la parte superior o al lado izquierdo) y otro mayor. Dentro del frame estrecho, se carga la pagina con un menú conteniendo los enlaces a otras paginas, al pulsar uno de estos enlaces, se carga la pagina dentro del frame. Mayor.
De manera que el menú siempre estará visible en la parte superior o izquierda, y los contenidos se estarán cambiando dentro del frame principal.
Ejemplo: Menú Horizontal
Ejemplo: Menú Vertical

Para crear frames se utilizan las directivas cerradas <FRAMESET>..... </FRAMESET>
Esta directiva indica inicio y final de los frames o cuadros.Dentro de ella se colocan   todos los frames que se van a emplear.
La directiva FRAMSET se coloca en lugar de BODY.

Se coloca una directiva  <FRAME> por cada cuadro que se quiera tener.
La directiva <FRAME> indica el archivo que va a contener ese cuadro o frame.
Ejemplo: <FRAME SRC="archivo.html">

La directiva  FRAMESET, nesesita los parametros ROWS ó COLS, que indican si la pantalla se va a dividir en filas o columnas.

Ejemplos:

Crear dos marcos o frames horizontales

<html>
<head>
<title>Frame 1</title>
</head>
<frameset ROWS="50%,50%">
<frame src="reglaoro.html">
<frame src="bienpormal.html">
</frameset>
</html>

Crear dos marcos o frames Verticales

<html>
<head>
<title>Frame 2</title>
</head>
<frameset COLS="50%,50%">
<frame src="reglaoro.html">
<frame src="bienpormal.html">
</frameset>
</html>

Crear dos marcos o frames Horizontales de 20 % la primera columna y 80% la segunda columna.

<html>
<head>
<title>frame 3</title>
</head>
<frameset rows="20%,80%">
<frame src=" banner1.htm ">
<frame src=" inmortalidad.html ">
</frameset>
</html>

Crear dos marcos o frames Verticales de 20 % la primera columna y 80% la segunda

<html>
<head>
<title>Frame 4</title>
</head>
<frameset cols="20%,80%">
<frame src="reglaoro.html">
<frame src="bienpormal.html">
</frameset>
</html>

Crear dos marcos o frames horizontales fijando el tamaño por medio de pixels
En el siguiente ejemplo se da un tamaño de 100 pixels al frame superior y el resto de la altura para el área inferior.

<html>
<head>
<title>frame 5</title>
</head>
<frameset ROWS="100,400">
<frame src=" banner1.htm ">
<frame src=" inmortalidad.html ">
</frameset>
</html>

Frames o cuadros iteractivos
Para que puedas controlar y decidir en que frame  se carga una mueva página es nesesario dar un nombre al FRAME , y referir a el, la pagina a cargar.

El atributo  NAME, es el que permite darle un nombre a cada   frame, el cual es referido por el atributo TARGET ="nombre del frame". El atributo TARGET, se coloca dentro de un enlace, el cual al ser activado el enlace carge la página en el otro frame referido por TARGET en lugar de cargarlo en el   propio frame.

Ejemplos:
Frames o cuadros verticales iteractivos
Para crear frames iteractivos, es nesesario nombrar el frame con el attributo  NAME.
Este atributo se coloca dentro del frame.

<frameset cols="20%,80%">
<frame src="menu2-v.html">
<frame src="reglaoro.html" NAME="principal" >
</frameset>

Notese que el segundo frame se llama principal.
Para que funcione el frame iteractivo es nesesario que los enlaces esten relacionados con el frame, por medio del atributo TARGET, el cual se coloca dentro de los enlaces.
Para que funcione el programa frame 6 es nesesario que el programa menu2-v.html, contenga el atributo TARGET encada uno de  los enlaces. A continuación damos la codificación de dicho programa.

Extracto del archivo menu2-v.html

<a HREF="reglaoro.html" TARGET="principal" >La regla de oro</a>
<a HREF="unidad.html" TARGET="principal" >La unidad de la religión</a>
<a HREF="cosecha.html" TARGET="principal ">La cosecha de los hechos</a>
<a HREF="lavenida.html" TARGET="principal ">La venida de los profetas</a>

Notese que cada enlace se le agrego el atributo TARGET="principal", este atriibuto le indica al browser que la pagina enlazada se debe de cargar en el frame principal, y no en el frame desde el que se esta activando.

También se puede utilizar división horizontal de frames iteractivos

UILIZANDO  BASE TARGET
Otro método para relacionar varios enlaces con un frame, es utilizando BASE TARGET , con esta directiva, nos ahorramos el tener que especificar TARGET en cada uno de los enlaces, y en su lugar solo basta con especificar una sola vez al principio de BODY el atributo <BASE TARGET>. para ilustrar esto a continuación le presentamos el siguiente ejemplo:

Extracto del archivo menu3-v.html

<BASE TARGET="principal">
<a HREF="reglaoro.html">La regla de oro</a>
<a HREF="unidad.html">La unidad de la religión</a>
<a HREF="cosecha.html">La cosecha de los hechos</a>

Compare la codificación del programa menu2-v.html con menu3-v.html, y notese que nos ahorramos escribir TARGET en cada enlace, al especificar BASE TARGET al inicio.

El programa anterior (menu3-v.html) nesesita el programa frame7.html

Directiva NOFRAMES
Esta se utiliza para advertir a los visitantes que no cuenten con un browser actualizado, ya que los browsers viejos no manejan  frames.
Dentro de la sección NOFRAMES, se coloca un mensaje advirtiendo al visitante que nesesita un browser actualizado para poder ver la pagina con frames, o para dar un enlace a una versión sin frames.

<frameset cols="20%,80%">
   <frame src="menu3-v.html">
   <frame src="reglaoro.html" NAME="principal" >
</frameset>
<NOFRAMES>
   <body>
   Esta página utiliza frames, pero su browser no los maneja.
   </body>
</NOFRAMES>
</html>

 

 

 

 Capítulo: Características adicionales de los frames

En el ejemplo de frame 5 la imagen en el frame superior no entro completa, por lo que aparece la barra de desplazamiento, en este ejemplo no es nesesaria la barra de desplazamiento, además le quita presentación o vista a nuestra página.
Esto se puede soluciónar de dos formas: La 1ra. agregando el atributo SCROLLING="no" dentro de la directiva del frame en que se desee desaparecer la barra de despalazamiento, y  la 2da. colocando la imagen en lugar de la página que la contenga dentro del frame

Quitar la barra de desplazaminto de un frame

Esto se logra por medio del atributo SCROLLING="no".
Los valores para este atributo son:

SCROLLING="no" Desactiva  la barra de desplazamiento
SCROLLING="yes" Activa la barra de desplazamiento
SCROLLING="auto" Activa o Desactiva  la barra de desplazamiento, en función de que entre o no,  la página completa dentro del frame

Siendo este ultimo el que se establece por defecto

A continuación se da un ejemplo de como se quita la barra de desplazamiento.
<html>
<head>
<title>frame 9</title>
</head>
<frameset ROWS="100,400">
<frame src="banner1.htm" SCROLLING="no" >
<frame src="inmortalidad.html">
</frameset>
</html>

Colocar una imagen dentro de un frame

Solo se nesesita remplazar dentro del frame, el nombre del archivo de la imagen por el nombre de la página.
La sintaxis es la siguiente:
<frame src="directorio\grafico.gif" >    ó    <frame src="directorio\grafico.jpg" >

<html>
<head>
<title>frame 10</title>
</head>
<frameset ROWS="100,400">
<frame src=" ..\imagen\inmortal.jpg" scrolling="no">
<frame src="inmortalidad.html">
</frameset>
</html>

Cambiar el ancho del margen interior (alto y ancho) de un frame

Normalmente se emplea para centrar un grafico dentro de un frame.
Los atributos empleados son MARGENWIDTH="valor" y MARGENHEIGHT="valor", los cuales se escriben dentro del frame al que se le desea aplicar margen.

<html>
<head>
<title>frame 11</title>
</head>
<frameset ROWS="100,400">
<frame src="..\imagen\inmortal.jpg" scrolling="no" MARGENWIDTH="15" MARGENHEIGHT="5" >
<frame src="inmortalidad.html">
</frameset>
</html>

Quitar el borde de la división del frame

La división del frame se quita por medio del atributo BORDER="0" ó FRAMEBORDER="no", el cual se escribe dentro de la directiva  FRAMESET.
<html>
<head>
<title>Frame 12</title>
</head>
<frameset cols="20%,80%" BORDER="0" >
<frame src="menu2-v.html">
<frame src="reglaoro.html" NAME="principal" >
</frameset>
</html>

Con el atributo FRAMEBORDER="no", tenemos casi el mismo resultado

Cambiar el ancho del borde de la división del frame

El ancho de la división del frame, se modifica por medio del atributo BORDER="valor", el cual se escribe dentro de la directiva  FRAMESET.
<html>
<head>
<title>Frame 13</title>
</head>
<frameset cols="20%,80%" BORDER="20" >
<frame src="menu2-v.html">
<frame src="reglaoro.html" NAME="principal" >
</frameset>
</html>
Resultado

Cambiar el color del borde de la división del frame.

El color de la división del frame, se modifica por medio del atributo BORDERCOLOR="#valor", el cual se coloca dentro de la directiva FRAMESET.

<html>
<head>
<title>Frame 14</title>
</head>
<frameset cols="20%,80%" BORDER="20" BORDERCOLOR="#80ffff">
<frame src="menu2-v.html">
<frame src="reglaoro.html" NAME="principal" >
</frameset>
</html>

Evitar que el visitante cambie la posisión división del frame

Normalmente el visitante de la página puede cambiar la posisión de la   división, dandole dandole click a la división y sin soltar arrastrar el mouse hasta LLEGAR A la nueva posición.
Si se desea evitar esto el atributo empleado es NORESIZE , el cual se escribe dentro del frame que se quiere fijar.

<html>
<head>
<title>Frame 15</title>
</head>
<frameset cols="20%,80%" >
<frame src="menu2-v.html">
<frame src="reglaoro.html" NAME="principal"  NORESIZE >
</frameset>
</html>

FRAMES MULTIPLES
Se puede dividir la pantalla en varios frames a la vez, solo se nesesita colocar una directiva FRAME por cada marco que se desee colocar.

Tres marcos horizontales
<html>
<head>
<title>Frame 16</title>
</head>
<frameset ROWS="33%,33%,33%">
<frame src="reglaoro.html">
<frame src="bienpormal.html">
<frame src="unidad.html">
</frameset>
</html>

Tres marcos verticales
<html>
<head>
<title>Frame 17</title>
</head>
<frameset COLS="20%,40%,40%">
<frame src="reglaoro.html">
<frame src="bienpormal.html">
<frame src="unidad.html">
</frameset>
</html>