Curso HTML 12758 Completo

mailxmail - Cursos para compartir lo que sabes
Curso de HTML
Autor: Felipe Javier Mckeever
Presentacin del curso

La elaboracin de una pgina Web, puede realizare de varias maneras, desde escribir una a una todas las instrucciones en un procesador de textos sencillo, hasta utilizar programas en que no se necesita saber ninguna comando de html, (Hyper Text Markup Language) ya que estos automticamente elaboran todos los cdigos, uno de estos programas es Microsoft Publisher, y muchos ms que se pueden encontrar en Internet,. Adems la mayora de programas como Word y Power Point ya incluye la opcin de grabar como pgina Web.
1. Introduccin
Los Programas para generar pginas 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 pgina Web, se recomienda no utilizar tabuladores, y no utilizar sangras francesas. Utilice tablas para producir el mismo efecto que las sangras. Programas para expertos y profesionales.
2. Consejos para el diseo de una pgina Web

Organizacin del contenido de la pgina Un tema grande a tratar se debe de dividir en subtemas, colocando cada uno de ellos en pginas distintas, relacionadas unas a otras por medio de Links. Un grupo de pginas relacionadas recibe el nombre de sitio. Si se coloca bastante informacin 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 grficos, y/o gif animados en todas las pginas. Es conveniente hacer paginas vistosas por lo que es recomendable que tenga grficos, sin embargo hay que tener cuidado de no utilizar demasiados, o grficos muy grandes, ya que hara que la pgina se cargara muy lenta. Cuando tenemos necesidad de colocar un gran nmero de grficos, la tcnica a seguir es reducir las imgenes y colocarlos as en la pgina, elaborando un cdigo para permitir ampliar la imagen del grfico mostrar una pgina adicional con el grfico de gran tamao. Cuando se necesite mostrar una imagen grande, se presenta primero en la pagina una imagen reducida dndole el link o enlace a una imagen grande (al oprimir click a la imagen se carga una pagina con la imagen amplificada.) Eleccin de Grficos Para disear una pgina Web, debemos de contar con imgenes que no ocupen una gran cantidad de Bytes, ya que eso hace que la pgina sea demasiado lenta para cargar, y provocara 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 imgenes de calidad aceptable que ocupen poco espacio. Las imgenes con mucha calidad ocupan ms 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 imgenes. Para que los visitantes que tienen conexiones lentas no se desesperen y cancelen la carga de la pgina. Trminos 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 informacin a un servidor. Es el utilizado para enviar paginas a un servidor. URL Uniform Resource Locator. Este termino se refiere a una direccin de Internet, o una direccin de FTP.
3. Elementos del diseo y publicacin de una pgina

Web Diseo del programa - Anlisis del Problema y Algoritmo - Codificacin o escritura del programa - Agregarle presentacin al programa - Con imgenes, sonido, Gif animados, Scrips de Java y Applets. - Agregarle contadores de visitas. - Depuracin. - Programamacin de Java Scrips y Applets (Avanzado) - Alojar el sitio o la pgina en un servidor - Por medio de un programa Ftp se sube la pgina al servidor - Publicacin - Agregar la pgina en los ndices de los motores de bsqueda. - Intercambio de Banners Requisitos para el diseo profesional de una pgina Web Computadora pentium con modem Conexin a Internet Browser (Navegador) Editor HTML Programa de diseo grfico Programa de retoque fotogrfico Programas de utileras Programa Ftp. Coleccin de Fondos, Vietas, Grficos y Grficos Gif. Direcciones de Internet de utileras.
Herramientas para el diseo de pginas Web
4. Elementos Bsicos 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 mayora de directivas, pero no todas tienen una directiva del cierre. Las directivas o comandos se pueden realizar en maysculas o minsculas. Estructura bsica de una pgina Web
Explicacin de la estructura bsica
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 informacin de la pgina a los buscadores robticos de Internet y otras directivas como <TITLE>, <META>, <SCRIPT> y <STYLE> que a continuacin se describen: Directiva <TITLE> Ensea el nombre de la pgina que se muestra en la barra de ttulo del navegador (Browser) y no el nombre con que se guarda el archivo. <TITLE>Titulo de la pgina</TITLE>
Directiva <META> Proporciona informacin para que los programas de bsqueda (como google.com, yahoo.com, altavista.com) encuentren nuestra pgina. A continuacin se da un ejemplo de la aplicacin 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 pgina y acciones. Ejemplo: Las instrucciones descritas abajo, cambian el texto de los enlaces a rojo al pasar el Mouse sobre ello. <style>  </style> Directiva <STYLE> Se utiliza para colocar Hojas de Estilo en Cascada (CSS), Ejemplo: Las instrucciones descritas abajo, indican los atributos y caractersticas de la fuente de los textos de la pgina <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 lnea y de prrafos
5. 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 < B r > Siendo < P > la directiva de final de prrafo Siendo < B > la directiva de final de lnea Si se desea dejar obtener varias lneas en blanco, no basta con repetir varias veces la directiva <p>, o <br>, sino es necesario escribirlas juntas, o sea, por cada lnea en blanco que queramos se escribe <p><br> Regla 2: Todas las directivas deben de estar Anidadas, o sea una dentro de otra. A excepcin de las directivas abiertas como <br> que no necesitan directiva de cierre Ejemplo:
Grabar la pgina (en el directorio practicas-bsicas) Al terminar de escribir el programa grbelo con el nombre de pagina1.html. Se le puede dar cualquier nombre al archivo mientras la extensin sea html. Importante: Los nombres de archivo no deben de tener espacios en blanco y estar escritos en minscula
6. Cmo abrir una pgina 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 botn abrir B) Para Netscape Navigator: debes de hacer lo siguiente Entrar a Netscape Navigator: Seleccionar el archivo, y dar click en el botn abrir Teniendo el siguiente resultado:
Directiva <BODY> Define el cuerpo del texto del documento, es la seccin principal en la cual va el contenido de nuestra pgina. La directiva <BODY> admite varios atributos, los ms importantes son: BGCOLOR=color de fondo TEXT= color del texto de la pgina 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
10
7. Dar Formato Bsico a una pgina Web

Colores de fondo y texto de la pgina Para cambiar el color de fondo de la pgina El comando BGCOLOR para cambiar el color del fondo va dentro de la directiva inicial de <Body>, de la siguiente manera: <BODY BGCOLOR="Cdigo 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 cdigo "#80ffff" da el color celeste, los cdigos de los colores nos lo dan los editores de pgina Web, Para asignar el color del texto de la pgina El comando TEXT para cambiar el color del texto tambin 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 pgina. Agrega dentro de la directiva <BODY> el siguiente cdigo 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 pgina 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 pgina 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 pgina. La imagen swirlies.gif, es la que se aplicara como fondo en este ejemplo. Modifica el comando <body>, el siguiente cdigo 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
11
8. Ttulos
Para aplicar Titulos Las directivas para aplicar titulos son muy sencillas. Titulo 1, la Directiva es: <H1>TEXTO DEL TITULO Titulo 2, la Directiva es: <H2>TEXTO DEL TITULO Titulo 3, la Directiva es: <H3>TEXTO DEL TITULO Titulo 4, la Directiva es: <H4>TEXTO DEL TITULO Titulo 5, la Directiva es: <H5>TEXTO DEL TITULO Titulo 6, la Directiva es: <H6>TEXTO DEL TITULO Estilo de los caracteres Existen dos tipos de estilo de caracteres, el estilo lgico y el estilo fsico. El estilo fsico literalmente cambia los caracteres, no as el estilo lgico que solo cambia la apariencia de los mismos. En el estilo lgico 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< / B I G > Para aplicar letra pequea <SMALL>Letras pequeas</SMALL> Para aplicar subndices <SUB>texto en subndice < / S U B > Para aplicar ndices (Superndices) <SUP> Superndice < / S U P > Para aplicar letra tipogrfica < T T >Texto< / T T > (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 lgicos Para aplicar texto fuerte. <STRONG>texto</STRONG> Para aplicar texto enfatizado < E M >texto < / E M > Para aplicar texto de terminal 1</H1> 2</H2> 3</H3> 4</H4> 4</H5> 4</H6>
12

<KBD>texto</KBD> Para aplicar texto literal o de cita <CITE>texto < / C I T E > Para aplicar texto de codigo HTML (sin que est se ejecute) <CODE>texto cdigo</CODE> Para aplicar texto de definicin < D F N >texto < / D F N > Para aplicar texto identado o con sangria <BLOCKQUOTE>texto</BLOCKQUOTE> Para aplicar texto ejemplo <SAMP>texto </S A MP > Para centrar textos o prrafos Aplique la directiva <center> Texto centrado </center> Usualmente a los encabezados se les aplica centrado, por ejemplo: <center><h1>Texto del ttulo 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 alineacin)
Resultado Grbalo con el nombre de pgina2.html en el directorio practicas-formatos y visualiza los resultados
13
9. Tipos y tamaos de fuentes

Para cambiar el tamao de la fuente Existen dos formas de cambiar el tamao de letra a la pgina, una manera es con directiva (cerrada) <font> ....<\font>, la cual se utiliza para cambiar el tamao de letra por prrafos, la otra forma con directiva (abierta) <BASEFONT SIZE="valor numrico">, se utiliza para cambiar el tamao de letra por defecto de toda la pgina. Para cambiar el tamao de la letra todo el documento. Se utiliza la directiva <BASEFONT SIZE="valor numrico"> como en el ejemplo <BASEFONT SIZE="5"> Hace que el documento adopte un tamao de letra tamao 5 ror defecto para todo el texto que aparezca despus de esta directiva. Si lo ponemos despus de la directiva <BODY> (inmediatamente despus a sta), la modificacin del tamao de letra afecta a todo el documento: <BODY> <BASEFONT SIZE="5"> .... Para cambiar el tamao de la fuente por prrafos. Se utiliza las siguientes directivas: <FONT SIZE=No. de fuente> Texto < / F O N T > Las fuentes tienen 7 tamaos: Las podrs Observar en el siguiente ejemplo: En un archivo nuevo realiza la siguiente codificacin dentro de la seccin de cuerpo de la pgina en el tercer ejemplo (pgina3.html)
El resultado se ver como sigue
14
Nota: Si se utilizan ttulos, en un texto determinado, no se emplea <font size=No.> para el mismo texto, ya que el titulo da la orden para un tamao determinado de letra y <font size=No.> estara dando la orden para otro tamao de letra. La directiva <FONT> tiene otros parmetros COLOR="color del texto" y FACE="nombre de la fuente" Ejemplo: <font size="3" color=blue face="times new roman">Texto de color azul, tamao 3, de fuente tipo times new roman</font> Para cambiar el tamao de la fuente por prrafos. (segundo mtodo) El tamao de la fuente por defecto (preestablecido) es de tamao 3. Si deseamos aumentar el tamao al siguiente, tenemos las siguientes dos maneras:
<FONT SIZE="4">.....</FONT> 1er. Mtodo <FONT SIZE="+1">...</FONT> 2do. Mtodo

Otro ejemplo de comandos quivalentes
(El tamao estndar es 3 + 1 nos da tamao 4)
<FONT SIZE="2">.....</FONT> 1er. Mtodo <FONT SIZE="-1">...</FONT> 2do. Mtodo
(El tamao estndar es 3 - 1 nos da tamao 2)
15
10. 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 podra modificarnos la distribucin del texto dependiendo del navegador empleado. Escribe y graba con el nombre de pagina4.html en el directorio practicas-formatos la codificacin del siguiente ejemplo. Visualiza detenidamente los resultados Ejemplo: 4
Nota: Se recomienda realizar la tabla en Word, para posteriormente pegarla en arachnophilia Resultado Alineacin de prrafos. (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 <P <P <P ALIGN= ALIGN= ALIGN= ALIGN= "center"> texto centrado < / p > "left"> texto alineado a la izquierda < / p > "right"> texto alineado a la derecha < / p > "justify"> texto justificado < / p >
Escribe y graba con el nombre de pagina5.html en el directorio practica-formato la codificacin del siguiente ejemplo. Visualiza detenidamente los resultados Ejemplo 5
16
Resultado El resultado se ver como sigue
17
11. Lneas Divisorias

Son Separadores de texto en forma de Lneas Horizontales. La directiva es: < H R > (Horizontal Rule) y es una directiva abierta. <HR> Por defecto nos da una lnea de una altura=1 y una anchura=100% Pudiendo cambiar alto, ancho alineacin y color de la misma. Ejemplo: <HR SIZE=5 WIDTH="75%" COLOR="#ff0000" ALIGN = CENTER>
SIZE="valor numerico" WIDTH="valor numrico" ALIGN="LEFT | CENTER | RIGTH"
Permite indicar el grosor de la lnea en cuestin. (valor dpor defecto es 1) Permite indicar la anchura en pixels o el tanto por ciento del ancho de la pantalla que ocupar la lnea.(valor por defecto es 100% Determina la forma de alinear la lnea 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 codificacin del siguiente ejemplo. Visualiza detenidamente los resultados Ejemplo6:
Resultado Resumen de directivas y atributos de formatos
18
12. Creacin de listas en HTML

Estas listas son parecidas a numeracin y vietas en WORD, teniendo los siguientes tipos de lista. Listas numeradas (ordenadas) Listas con vietas (desordenadas) Listas de definicin Listas anidadas Listas numeradas Estas listas generan una numeracin automtica, (Nmeros arbigos, romanos, o letras) tienen la directiva cerrada <OL> ...</OL>(Ordered Lists) que significa listas ordenadas, y se utiliza para iniciar la lista. Dentro del bloque de la lista cada elemento debe de llevar la directiva abierta < L I > (list item) que significa elemento de lista La estructura de una lista ordenada es la siguiente. Ejemplo 7:
Escribe y graba con el nombre de pagina7.html en un nuevo directorio de nombre practica listas, la codificacin del ejemplo anterior. Visualiza detenidamente los resultados Atributos de listas TYPE="Carcter" Si se desea cambiar el tipo de numeracin se emplea el atributo TYPE="Carcter", este debe de escribirse dentro de la directiva < O L >, o sea < O L TYPE="Carcter"> Teniendo los siguientes tipos. <OL TYPE ="A"> Con este atributo la lista comienza con la letra A y el resto de los elementos con las siguientes letras del alfabeto. <OL TYPE ="a"> Con este atributo la lista comienza con la letra a y el resto de los elementos con las siguientes letras del alfabeto. Es igual que la lista anterior con la nica diferencia que es en minscula. <OL TYPE ="1"> Con este atributo la lista numerada comienza con el nmero 1 . Este es el atributo por defecto. <OL TYPE ="I">
19

Con este atributo la lista numerada comienza con el nmero romano I. <OL TYPE ="i"> Con este atributo la lista numerada comienza con el nmero romano i. Igual que la lista anterior pero en minscula. VALUE ="valor numrico" Es el atributo que se utiliza para indicar el valor que debe de tener el elemento de la lista numerada., este atributo se coloca dentro de la directiva < L I >, quedando de la siguiente manera. <LI VALUE="valor numrico"> START="nmero" Es el atributo se utiliza para indicar el valor inicial que debe de tener la lista numerada. Por defecto es 1. Ejemplo: 8 (TYPE ) Copia la codificacin de la lista anterior y realiza los cambios
Graba los cambios y visualiza detenidamente los resultados Ejemplo: 9 (START y VALUE ) Copia la codificacin de la lista anterior y realiza los cambios
Graba los cambios y visualiza detenidamente los resultados En el ejemplo anterior el atributo START="10", ordena al browser iniciar la numeracin en 10 y el atributo VALUE ="20" cambio el numero del elemento a 20. Ejemplos: 10 (TYPE, START VALUE) Copia la codificacin de la lista anterior y realiza los cambios
20
Graba los cambios y visualiza detenidamente los resultados En el ejemplo anterior el atributo TYPE="I", indica que la numeracin es romana, el atributo START="5", ordena al browser iniciar la numeracin en el numero V y el atributo VALUE ="10" cambio el numero del elemento a X.
21
13. Listas con vietas

Estas listas generan vietas 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 vietas (desordenada) es la siguiente. Ejemplo 11: Copia la codificacin de la lista anterior y realiza los cambios
Graba los cambios y visualiza detenidamente los resultados TYPE="Nombre_de_Vieta" Si se desea cambiar el tipo de vieta se emplea el atributo TYPE="Nombre_de_Vieta", TYPE="Nombre_de_Vieta", este debe de escribirse dentro de la directiva < U L >, o sea <UL TYPE="Vieta"> Nota: Los nombres de las vietas debe escribirse forzosamente en minsculas 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 vaco. <UL TYPE ="square"> Este es el atributo que muestra un pequeo cuadro negro. Ejemplo 12 Copia la codificacin de la lista anterior y realiza los cambios
22

Graba los cambios y visualiza detenidamente los resultados
23
14. 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 codificacin siguiente, grbalo con el nombre de practica 8 en el directorio practicas-listas
24
15. Listas de definicin

Estas listas generan listas de elementos con sangras y poseen una directiva cerrada < D L > . . . < / D L > (definition list, lista de definicin), la que se utiliza para dar inicio a la lista de definicin. Para colocar el termino se utiliza la directiva abierta < D T > (Directiva de termino) Para colocar la definicin se utiliza la directiva abierta < D T > (directiva de definicin). Ejemplo 14 Inicia un nuevo archivo y escribe la codificacin siguiente, grbalo con el nombre de practica 9 en el directorio practicas-listas
La directiva < D L >, tiene el parmetro compact, que se emplea para dar sangras francesas al texto, con la salvedad que solo funciona de esa manera con temimos pequeos, para poder entender esto se presenta el siguiente ejemplo. Ejemplo 15 escribe la codificacin siguiente
Graba los cambios y visualiza detenidamente los resultados El espacio que se obtiene de sangra es pequeo ( de 3 a 5 caracteres, dependiendo del tamao de ellos y del tamao de letra del browser). Observe en el resultado que en el primer prrafo la definicin paso a la segunda lnea. En el segundo prrafo la definicin sigue inmediatamente al termino FTP
25
16. Creacin de sangras

Se puede obtener el mismo resultado que las listas de definicin 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 codificacin del ejemplo 14 y realiza los cambios
Graba los cambios y visualiza detenidamente los resultados Ejemplo 17 Copia la codificacin 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 codificacin siguiente, grbalo con el nombre de practica 10 en el directorio practicas-listas
26
27
17. Formato de imgenes

Los navegadores soportan dos tipos de formatos de imgenes GIF y JPEG. Estos formatos permiten comprimir los datos de las imgenes, de manera que sean menos lentas de cargar. Caractersticas de las imgenes GIF.
1.- Soportan Animaciones. 2 . - Soportan Transparencias: 3 . - Efecto de difusionado o entrelazado: 4.- Solo soporta 255 colores. 5.- Comprime las imgenes
Genera grficos con movimiento Esto hace que se muestre el fondo sobre el que se apoya la imagen Funciona de manera que conforme se va cargando va mostrando la imagen ms ntidamente, hasta alcanzar la resolucin total de la misma Se emplea en dibujos, no se recomienda este formato para fotografas ya que estas requieren muchos colores Esto es muy til para empleo de Internet, ya que la velocidad de transmisin es muy lenta para imgenes, sonido y vdeo, ya que estos suelen ser archivos grandes.
Caractersticas de las imgenes JPEG
Soporta un mximo de 16 millones de colores. Alta compresin de imgenes.
Se utiliza para imgenes de fotografas Este formato tiene mejor compresin que el Gif.
En resumen se utiliza el formato GIF, para imgenes animadas e imgenes con transparencia. El formato JPEG, se utiliza para fotografas. Algunos de los programas que se recomiendan para la edicin de imgenes: Los que puedes encontrar y bajar de Internet se indican con * Edicin de imgenes Adobe Photoshop Transparencia Lview Pro * Gif animado Gif Construction Set * Gif Animater * Difuminado Paint Shop Pro * Creacin de ttulos, Xara Web Style y botones Creacin de ttulos Xara 3D3 Con animacin en 3d
28
18. Colocacin de imgenes en la pagina Web

La directiva para incluir un grfico es <IMG > (Imagen), este tiene el formato bsico siguiente: <IMG SRC="Ruta/imagen"> < I M G > Indica la insercin de una imagen en una pgina HTML SRC="Ruta/Imagen" Se utiliza para indicar la ruta y el nombre de grfico a mostrar: Ejemplo: <IMG SRC="imgenes/rosa.gif"> El comando anterior carga en la pagina la imagen rosa del directorio imgenes La directiva <I M G > tiene los parmetros opcionales BORDER, HEIGHT, WIDTH, ALT y ALIGN, pudiendo agregarse uno o varios de ellos.
BORDER= "Tamao numrico" HEIGHT= "Tamao numrico" WIDTH= "Tamao numrico" Tip: ALT= "Texto a mostrar" ALIGN="top | middle | bottom" Bottom Top
Se refiere al borde del grfico, el nmero 1 indica borde y el numero 0 significa sin borde, por defecto el valor es 1 Indica el alto de la imagen en puntos o pixels, o en porcentaje. Se emplea para cambiar el tamao original del grfico. Indica el ancho de la imagen en puntos (pixels) o en porcentaje. Se emplea para variar el tamao de la imagen original. Crea un grfico pequeo que sea rpido de cargar y amplificarlo con HEIGHT y WIDTH, para su visualizacin Es el texto que se desea que aparezca cuando se pase el puntero del Mouse sobre la imagen 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 lnea a un lado de la imagen. Si se desea textos ms largos, se emplean tablas que ms adelante se ilustraran. Alinea el texto en la zona inferior del grfico. Alinea el texto en la zona superior del grfico.
Center Middle Alinea el texto en la zona central del grfico.

Se da a continuacin varios ejemplos de combinaciones de los atributos de <IMG> Colocacin de borde en una imagen Sintaxis: <IMG SRC="Ruta/imagen" BORDER=tamao ALT="texto a mostrar"> Ejemplo: <IMG SRC="imagenes/rosa.gif" BORDER= 0 ALT="Imagen de una rosa">
29

Escribe el ejemplo anterior dentro de la seccin <body> de en un nuevo archivo de nombreimgenes1.html. Visualiza el resultado. Resultado Cambia el atributo BORDER=0 A BORDER=1 y observa que ahora la imagen tiene un borde. Resultado
30
19. Modificacin del tamao de la imagen
Es conveniente grabar imgenes pequeas y amplificarlas, con el propsito de que tarden menos en cargarse. Los atributos para cambiar el ancho y la altura son HEIGHT y WIDTH HEIGHT y WIDTH. Agrega la siguiente lnea en el archivo imgenes.html y observa que ahora hay una segunda imagen ms grande. <IMG SRC="imagenes/rosa.gif" BORDER=0 ALT="Imagen de una rosa"> <IMG SRC= "imagenes/rosa.gif" BORDER= 0 WIDTH=6 0 HEIGHT=6 0 ALT="Imagen de una rosa"> Resultado Alineacin de texto adyacente de una imagen. Para alinear el texto se utiliza el atributo ALIGN="top | middle | bottom". Agrega las siguientes lneas en el archivo imgenes.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
31
20. Enlaces en una pgina Web

Un hiperenlace (enlace) es la referencia a otros documentos html, grficos, direcciones de E-mail, u objetos (archivos Zip, Word, ect). Estos hiperenlaces son las palabras subrayadas, botones o grficos a los que al darle Click muestran otra pgina El nombre de este lenguaje es HTMl, (Lenguaje creador de Hipertecto), se debe a que la caracterstica ms importante de las paginas Web es precisamente el Hiperenlace. Nota: Se debe de escribir en minsculas 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 pginas no aceptan maysculas. Tip: El contenido de un sitio se debe de desglosar en subtemas, colocando cada subtema en una pgina diferente, uniendo todas las pginas 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 pgina de nuestro sitio. Enlace a otra seccin de la misma pgina Enlace a un lugar concreto dentro de otra pgina de nuestro sitio. Enlace a una pgina externa. Enlace por medio de un grfico Enlace a una direccin de E-mail, por medio de un grfico. Enlace a una direccin de E-mail. Enlace a un objeto (documento zip Word) Enlace otra pgina de nuestro sitio. Un enlace es la conexin 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 pgina tres. Agregue la siguiente lnea a la pagina2.html. <A HREF="pagina3.html">Ejemplo 3 </A> Grabe la pgina con el nombre de pagina3-1.html. Al cargar la pgina al browser haga Click en el enlace"Ejemplo 3". Si realizo la practica correctamente se debi haber cambiado de la pgina2 a la pagina3. Practica: Realice un men de enlaces en una pgina de nombre menu.html, escriba una lista de enlaces de las primeras 5 pginas de ejemplo. Al final de cada pagina agregar un enlace a la pagina de men. Enlace dentro de la misma pgina. En caso que tengamos una pgina extensa que contenga varios temas, es necesario crear enlaces a los diferentes temas contenidos en la pgina. Para realizar esto es necesario marcar el lugar exacto con un nombre de referencia a
32

cada tema o lugar al que se desee saltar La directiva para enlazar un tema de la misma pgina es: <A HREF="#marca">Tema a mostrar" </A> El signo # le indica al browser que se trata de una direccin interna. "#marca" es el nombre de la referencia a la que se desee saltar dentro de la pgina. El atributo para marcar con un nombre del lugar exacto a es: <A NAME="marca"> </A> Vea y analice el ejemplo presentado en la pgina "enlaces-int.html" enlaces-int.html Enlace a un lugar exacto dentro de otra pgina de nuestro sitio. Podemos tener una combinacin en la que nos podemos enlazar una pgina 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 pgina "menu1.html" menu1.html Enlace a una pgina 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
33
21. Enlace por medio de un grfico

Se puede utilizar un grfico en lugar de un texto para enlazar las pginas. 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 lnea se incluyo un texto. Enlace a una direccin de E-mail. Se utiliza para que nuestros visitantes puedan mandarnos fcilmente un E-mail. En la referencia colocamos nuestra direccin de E-mail. La directiva es la siguiente <A HREF=mailto:dir_Email>T e xto< / A > Ejemplo <A HREF="mailto:mkcever19@mailcity.com">Mandame un E-mail< / A > Agrega el cdigo anterior al archivo enlace-ext.html, y visualiza el resultado. Enlace a una direccin de E-mail, por medio de un grfico. 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 cdigo 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 cdigo anterior al archivo enlace-ext.html, y visualiza el resultado. enlace-ext.html (comprueba que la grfica tambin activa el enlace.
34
22. Tablas
La creacin de tablas se utiliza en trminos generales para mejorar la visualizacin de la pagina, entrando en detalles se utiliza para colocar imgenes 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 mnimo se tiene que tener un rengln y una celda para una tabla <TABLE> (Inicio Tabla) < T R > (Inicia rengln < T D > (Inicia celda) Texto de la celda < / T D > (Fin celda) < / T R > (Fin rengln) </TABLE> (Fin Tabla) Resultado 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> Resultado
Aumentar el gruesor del borde <TABLE BORDER="8" > <TR> <TD> Texto de la celda </TD> </TR> </TABLE> Resultado
35
23. 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> Resultado
<TABLE BORDER="1" WIDTH="50%" > <TR> <TD> Texto de la celda </TD> </TR> </TABLE> Resultado
<TABLE BORDER="1" WIDTH="300" > <TR> <TD> Texto de la celda </TD> </TR> </TABLE> Resultado
36
24. Cambiar el alto de la tabla

<TABLE BORDER="3" WIDTH="200" HEIGHT="100" > <TR> <TD> Texto de la celda </TD> </TR> </TABLE> Resultado
Alineacin Horizontal (centro derecha e izquierda) Alineacin centrada ALIGN="center" Alineacin derecha ALIGN="right" Alineacin izquierda ALIGN="left" Alineacin centrada: align="center" <TABLE BORDER="3" WIDTH="200" HEIGHT="100"> <TR> <TD align="center" > Texto de la celda </TD> </TR> </TABLE> Resultado
Alineacin derecha : align="right" <TABLE BORDER="3" WIDTH="200" HEIGHT="100"> <TR> <TD align="right" >Texto de la celda</TD> </TR> </TABLE> Resultado
Alineacin Izquierda : align="left" (Es por defecto) <TABLE BORDER="3" WIDTH="200" HEIGHT="100">
37

<TR> <TD align="left" > Texto de la celda </TD> </TR> </TABLE> Resultado
Alineacin Vertical (arriba en medio y abajo) Alineacin arriba: valign="top" Alineacin en medio valign="middle" Alineacin abajo valign="bottom" Alineacin arriba : valign="top" <TABLE BORDER="3" WIDTH="200" HEIGHT="100"> <TR> <TD valign="top" > Texto de la celda </TD> </TR> </TABLE> Resultado
Alineacin Abajo : valign="bottom" <TABLE BORDER="3" WIDTH="200" HEIGHT="100"> <TR> <TD valign= " bottom "> Texto de la celda </TD> </TR> </TABLE> Resultado
Alineacin: En medio : valign="middle" (por defecto) <TABLE BORDER="3" WIDTH="200" HEIGHT="100"> <TR> <TD valign= " middle "> Texto de la celda </TD> </TR> </TABLE> Resultado
38
39
25. Conbinado Alineaciones

Conbinado Alineacines (Centrado verical y horizontal) <TABLE BORDER="3" WIDTH="200" HEIGHT="100"> <TR> <TD align= " center" valign= " middle "> Texto de la celda </TD> </TR> </TABLE> Resultado
Tablas con de un rengln y dos columnas. <TABLE BORDER="3" WIDTH="75%"> <TR> < T D > Texto en fila 1, celda 1 < / T D > < T D > Texto en fila 1, celda 2 < / T D > </TR> </TABLE> Resultado
<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> Resultado
<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> Resultado
Tabla de 1 rengln y tres columnas. <TABLE BORDER="3" WIDTH="100%" > <TR> < T D WIDTH="20%" > Texto en fila 1, celda 1 < / T D > < T D WIDTH="60%" > Texto en fila 1, celda 2 < / T D > < T D WIDTH="20%" > Texto en fila 1, celda 3 < / T D >
40

</TR> </TABLE> Resultado
Tablas de 2 renglones y tres columnas. <TABLE BORDER="3" WIDTH="100%" > <TR> < T D WIDTH="20%" >fila 1, col. 1 < / T D > < T D WIDTH="60%" > fila 1, col. 2 < / T D > < T D WIDTH="20%" > fila 1, col. 3 < / T D > </TR> <TR> < T D >fila 2, col.1 < / T D > < T D > fila 2, col.2 < / T D > < T D > fila 2, col.3 < / T D > </TR> </TABLE> Resultado
Tabla de 2 renglones y tres columnas. <TABLE BORDER="3"> <TR> < T D >fila 1, col. 1 < / T D > < T D > fila 1, col. 2 < / T D > < T D > fila 1, col. 3 < / T D > </TR> <TR> < T D >fila 2, col.1 < / T D > < T D > fila 2, col.2 < / T D > < T D > fila 2, col.3 < / T D > </TR> </TABLE> Resultado
41
26. 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> Resultado
42
27. Arreglos de bordes

CELLPADDING="Valor Numrico": Fija el espacio entre el borde exterior de la celda y el borde interior (borde del contenido) CELLSPACING="Valor Numrico" 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> Resultado
Ntese 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> Resultado
Ntese el espacio entre el texto y los bordes. Ejemplo 3: <table border="5" cellpadding="10" cellspacing="10" >
43

<tr> <td>Ene</td> <td>Feb</td> <td>Mar</td> </tr> <tr> <td>Abr</td> <td>May</td> <td>Jun</td> </tr> </table> Resultado
Ntese el espacio entre el texto y el borde interior. Y el espacio entre el borde interior y el borde exterior.
44
28. 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> Resultado
Fijar el color a la fila <table border="1" cellpadding="1" cellspacing="1"> < t r bgcolor= "#00FFFF" > <td>Ene</td> <td>Feb</td> <td>Mar</td> </tr> <tr> <td>Abr</td> <td>May</td> <td>Jun</td> </tr> </table> Resultado
Para cambiar el color a la celda <table border="1" cellpadding="1" cellspacing="1">
45

<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> Resultado
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> Resultado
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> Resultado
46
47
29. 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 bsqueda </td> </tr> <tr> <td> Yahoo </td> <td> Lycos </td> </tr> </table> Resultado
Ejemplo 2: (uniendo 3 columnas) <table border="8" cellpadding="1" cellspacing="1"> <tr> <td colspan="3" > Motores de bsqueda </td> </tr> <tr> <td> Yahoo </td> <td> Lycos </td> <td> Infoseek </td> </tr> </table> Resultado
48
30. 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> Resultado
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> Resultado
Combinando Renglones y Columnas: Ejemplo (uniendo 2 columnas y dos filas) <table border="8" cellpadding="1" cellspacing="1"> <tr> <td rowspan="2" > I n t e r n e t < / t d > <td colspan="2" > Motores de bsqueda </td> </tr> <tr> <td> Yahoo </td> <td> Lycos </td> </tr> </table>
49

Resultado
50
31. Resumen de las propiedades de las Tablas
Ejemplos de aplicaciones de tablas 1. 2. 3. 4. 5. 6. Organizar texto o grfico en una tabla Escribir texto en Sangras. Colocar texto o listas a un lado del grfico Escribir Texto en dos o ms columnas (tipo peridico o revista) Crear mens al margen izquierdo . Enmarcar ttulos con bordes.
51
32. Carcteres especiales

Estos caracteres se emplean debido a que no todos los pases emplean los mismos tipos de caracteres especiales como son los de puntuacin (comillas, acentos, diresis, etc.)., si queremos que las pginas Web estan disponibles a personas de todo el mundo, debemos emplear los cdigos o alias de caracteres especiales de HTML, estos cdigos nos proporcionan los caracteres especiales independientemente del lenguaje que tenga instalado nuestro visitante. Los cdigos o alias de caracteres especiales de HTML inician con el smbolo & y terminan con el smbolo ; Los caracteres especiales de HTML, se pueden representar con cdigos ASCII, o por medio de alias. Codigo ASCII Sintaxis: &#NO.cdigo_ascii; Ejemplo: ó Nos da como resultado , puesto que el numero de cdigo ASCII para la es 225. Aplicando lo anterior la palabra corazn se escribe as corazón Alias Sintaxis: &alias; Ejemplos:
ó Nos da el resultado á Nos da el resultado ñ Nos da el resultado
Ó Nos da el resultado Á Nos da el resultado Ñ Nos da el resultado
Aplicando lo anterior la palabra corazn se escribe as corazón
52

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
53
33. Frames o marcos

Los frames o cuadros son divisiones que se le pueden dar a una pgina Web. En cada uno de los frames se pueden cargar una pgina diferente que actan independientemente una de otra. El uso ms comn del empleo de los frames es en la aplicacin de mens. 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 estarn 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> Resultado 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>
54

Reslultado 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> Reslultado 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> Resultado Crear dos marcos o frames horizontales fijando el tamao por medio de pixels En el siguiente ejemplo se da un tamao 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> Reslultado Frames o cuadros iteractivos Para que puedas controlar y decidir en que frame se carga una mueva pgina 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 pgina en el otro frame referido por TARGET en lugar de cargarlo en el propio frame. Ejemplos:
55

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> Ver codificacin completa Resultado 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 continuacin damos la codificacin de dicho programa. Extracto del archivomenu2-v.html <a HREF="reglaoro.html" TARGET="principal">La regla de oro</a> <a HREF="unidad.html" TARGET="principal">La unidad de la religin</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> Ver codificacin completa 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. Tambin se puede utilizar divisin horizontal de frames iteractivos Ejemplo UILIZANDO BASE TARGET Otro mtodo 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 continuacin le presentamos el siguiente ejemplo: Extracto del archivomenu3-v.html <BASE TARGET="principal"> <a HREF="reglaoro.html">La regla de oro</a> <a HREF="unidad.html">La unidad de la religin</a> <a HREF="cosecha.html">La cosecha de los hechos</a> Ver la codificacin completa Compare la codificacin 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 Ver codificacin
56

Resultado 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 seccin 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 versin sin frames. <frameset cols="20%,80%"> <frame src="menu3-v.html"> <frame src="reglaoro.html" NAME="principal"> </frameset> <NOFRAMES> <body> Esta pgina utiliza frames, pero su browser no los maneja. </body> </NOFRAMES> </html> Ver codificacin completa Resultado
57
34. Caractersticas 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, adems le quita presentacin o vista a nuestra pgina. Esto se puede solucinar 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 pgina 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 Activa o Desactiva la barra de desplazamiento, en SCROLLING="auto" funcin de que entre o no, la pgina completa dentro del frame
Siendo este ultimo el que se establece por defecto A continuacin 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> Reslultado 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 pgina. La sintaxis es la siguiente: <frame src="directorio\grafico.gif"> <frame src="directorio\grafico.jpg"> <html> <head> < t i t l e > f r a m e 1 0 </ti tl e > </head> <frameset ROWS="100,400"> <frame src="..\imagen\inmortal.jpg" scrolling="no"> <frame src="inmortalidad.html"> </frameset> </html> Resultado
58

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> < t i t l e > f r a m e 1 1 </ti tl e > </head> <frameset ROWS="100,400"> <frame src="..\imagen\inmortal.jpg" scrolling="no" MARGENWIDTH="15" MARGENHEIGHT="5"> <frame src="inmortalidad.html"> </frameset> </html> Resultado Quitar el borde de la divisin del frame La divisin 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> Resultado Con el atributo FRAMEBORDER="no", tenemos casi el mismo resultado Cambiar el ancho del borde de la divisin del frame El ancho de la divisin del frame, se modifica por medio del atributo BORDER="valor", 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 divisin del frame. El color de la divisin del frame, se modifica por medio del atributo BORDERCOLOR="#valor", BORDERCOLOR="#valor", el cual se coloca dentro de la directiva FRAMESET. <html>
59

<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> Resultado Evitar que el visitante cambie la posisin divisin del frame Normalmente el visitante de la pgina puede cambiar la posisin de la divisin, dandole dandole click a la divisin y sin soltar arrastrar el mouse hasta LLEGAR A la nueva posicin. 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> Resultado 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> Resultado 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">
60

</frameset> </html> Resultado
61
35. Frames combinados

Se pueden tener combinacines de FRAMES horizontales y verticales., a continuacin damos algunos ejemplos: Primer ejemplo: < frameset rows="64,*" border="0"> <frame src="banner2.html" scrolling="no" noresize> < frameset cols="150,*"> <frame src="menu3-v.html"> <frame name="principal" src="reglaoro.html"> </frameset> Ver codificacin completa Resultado Segundo ejemplo <frameset rows="60,*,35" border="0"> <frame name="top" scrolling="no" noresize src="banner2.html"> <frameset cols="150,*" border="0"> <frame src="menu3-v.html"> <frame name="principal" src="reglaoro.html"> </frameset> <frame noresize scrolling="no" frameborder="no" src="referencia.html"> </frameset> Ver Codificacin completa Resultado Target especiales Estos targets indican diferentes formas de abrir las ventanas para cargar los archivos. Todos los target especiales inician con el signo "_".
TARGET="_blank" Carga la pgina en una nueva ventana TARGET="_parent" TARGET="_top" TARGET="_self" Carga la pgina en el frameset anterior al frameset actual. Carga la pgina en la pantalla completa de la ventana, quitando todos los submarcos o frames Carga la pgina en la misma ventana o marco.
He aqui un ejemplo completo con 3 archivos: frame 20.html, menu5-v.html, menu6-v.html Para ilustrar TARGET="_blank", TARGET="_top", TARGET="_self" Ejemplos: La pgina webframe 20, carga el archivo menu5-v en el marco superior Ver codificacin de frame 20 El archivo menu 5 vertical carga: El archivo reglaoro.html en TARGET="principal"
62

El archivo unidad.html en TARGET="_top" El archivo cosecha.html en TARGET="_blank" El archivo menu6-v.html" en TARGET="_self" Extracto de la codificacin del archivo men 5 vertical <a HREF="reglaoro.html" TARGET="principal">La regla de oro</a> <a HREF="unidad.html" TARGET="_top">La unidad de la religin</a> <a HREF="cosecha.html" TARGET="_blank">La cosecha de los hechos</a> <a HREF="menu6-v.html" TARGET="_self">Siguente men</a> Ver codificacin completa El archivo menu6-v.html carga los archivos inmortalidad1.htm y bienpormal.html por medio de <base target="_blank">, a excepcin del archivo men 5-v.html, que se carga con target="_self. Extracto del archivo menu6-v.html <base target="_blank"> <a HREF="inmortalidad1.html">La vida despues de la vida</a> <a HREF="bienpormal.html">Devolver bien por mal</a> <a HREF="menu5-v.html" target="_self">menu anterior</a> Ver codificacin completa Resultado TARGET="_parent" Esta propiedad se utiliza en los casos en que un frame carga a otro frame. Para entender este concepto se presenta los siguientes ejemplos: El programa frame21.html es el padre de banner2.html y frame22.html. Extracto del programaframe 21.html <frameset rows="64,*" border="0"> <frame scrolling="no" noresize src="Banner2.html"> <frame src="frame22.html"> </frameset> Ver codificacin completa El programa frame22.html es el padre de menu7-v.html y "menu8-v.html Extracto del programaframe22.html <frameset cols="50%,50%"> <frame src="menu7-v.html" > <frame src="menu8-v.html"> </frameset> Ver codificacin completa Los enlaces con TARGET="_parent" dentro del programa menu7-v.html, y del menu8-v.html, van a ser cargados en todo el frame inferior. Extracto del programamenu7-v.html <a HREF="inmortalidad.html" target="_parent">La vida despues de la vida</a> <a HREF="bienpormal.html" target="_parent">Devolver bien por mal</a> <a HREF="lavenida.html" target="_parent">La venida de los profetas</a> Ver codificacin completa Extracto del programamenu8-v.html <base target="_parent"> Menu B <p> <a HREF="reglaoro.html">La regla de oro</a>
63

<a HREF="unidad.html">La unidad de la religin</a> <a HREF="cosecha.html">La cosecha de los hechos</a> Ver codificacin completa Ejecutar programa
64
36. Resumen de las propiedades de los frames
65

Curso HTML 12758 Completo

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Curso HTML 12758 Completo

Cargado por

Copyright:

Formatos disponibles

mailxmail - Cursos para compartir lo que sabes

mailxmail - Cursos para compartir lo que sabes

Presentacin del curso

mailxmail - Cursos para compartir lo que sabes

mailxmail - Cursos para compartir lo que sabes

2. Consejos para el diseo de una pgina Web

mailxmail - Cursos para compartir lo que sabes

mailxmail - Cursos para compartir lo que sabes

3. Elementos del diseo y publicacin de una pgina

Herramientas para el diseo de pginas Web

mailxmail - Cursos para compartir lo que sabes

4. Elementos Bsicos y estructura de una pagina Web

Explicacin de la estructura bsica

mailxmail - Cursos para compartir lo que sabes

mailxmail - Cursos para compartir lo que sabes

mailxmail - Cursos para compartir lo que sabes

mailxmail - Cursos para compartir lo que sabes

7. Dar Formato Bsico a una pgina Web

mailxmail - Cursos para compartir lo que sabes

mailxmail - Cursos para compartir lo que sabes

mailxmail - Cursos para compartir lo que sabes

9. Tipos y tamaos de fuentes

El resultado se ver como sigue

mailxmail - Cursos para compartir lo que sabes

<FONT SIZE="4">.....</FONT> 1er. Mtodo <FONT SIZE="+1">...</FONT> 2do. Mtodo

(El tamao estndar es 3 + 1 nos da tamao 4)

<FONT SIZE="2">.....</FONT> 1er. Mtodo <FONT SIZE="-1">...</FONT> 2do. Mtodo

(El tamao estndar es 3 - 1 nos da tamao 2)

mailxmail - Cursos para compartir lo que sabes

10. Texto Preformateado

mailxmail - Cursos para compartir lo que sabes

Resultado El resultado se ver como sigue

mailxmail - Cursos para compartir lo que sabes

11. Lneas Divisorias

SIZE="valor numerico" WIDTH="valor numrico" ALIGN="LEFT | CENTER | RIGTH"

Resultado Resumen de directivas y atributos de formatos

mailxmail - Cursos para compartir lo que sabes

12. Creacin de listas en HTML

mailxmail - Cursos para compartir lo que sabes

mailxmail - Cursos para compartir lo que sabes

mailxmail - Cursos para compartir lo que sabes

13. Listas con vietas

mailxmail - Cursos para compartir lo que sabes

mailxmail - Cursos para compartir lo que sabes

14. Listas Anidadas

mailxmail - Cursos para compartir lo que sabes

15. Listas de definicin

mailxmail - Cursos para compartir lo que sabes

16. Creacin de sangras

mailxmail - Cursos para compartir lo que sabes

mailxmail - Cursos para compartir lo que sabes

17. Formato de imgenes

Caractersticas de las imgenes JPEG

Soporta un mximo de 16 millones de colores. Alta compresin de imgenes.

mailxmail - Cursos para compartir lo que sabes

18. Colocacin de imgenes en la pagina Web

Center Middle Alinea el texto en la zona central del grfico.

mailxmail - Cursos para compartir lo que sabes

mailxmail - Cursos para compartir lo que sabes

19. Modificacin del tamao de la imagen

mailxmail - Cursos para compartir lo que sabes

20. Enlaces en una pgina Web

mailxmail - Cursos para compartir lo que sabes

mailxmail - Cursos para compartir lo que sabes

ó Nos da el resultado á Nos da el resultado ñ Nos da el resultado

Ó Nos da el resultado Á Nos da el resultado Ñ Nos da el resultado

Aplicando lo anterior la palabra corazn se escribe as corazón