Beruflich Dokumente
Kultur Dokumente
DE PAGINAS WEB
Nota: Si se emplea e Word W para realizar una pgina a Web, se e recomien nda no ut tilizar tabulado ores, y no utilizar sa angras fran ncesas. Ut tilice tablas s para producir el m mismo efecto que las sang gras. mas para expertos e y profesiona ales. Program
Captulo 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 pgina, 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.
Trmino os importa antes: HTML Abreviatura A de Hyper Text T Markup p Language e WWW Abreviatura A de World Wide W Web FTP Abr reviatura de e File Transfer Protoc col. (Protoco olo de Tran nsferencia de archivos s. Es el emple eado por pr rogramas que sirven para p transm mitir (enviar) ) o recibir in nformacin a un servidor. Es el utiliz zado para enviar e pagin nas a un se ervidor. URL Uniform Reso ource Locat tor. Este t rmino se r refiere a un na direccin de Intern net, o una direccin de FT TP.
Directiv va <TITLE> > Ensea el nombre e de la pg gina que se e muestra en la barr ra de ttulo o del naveg gador (Browse con q ue er) y no n el nombre se guarda el arc chivo. >Titulo de la a pgina</T TITLE> <TITLE>
Directiv va <META> > Proporci iona inform macin para que los programas queda (com mo google.com, s de bsq yahoo.co om, altavista.com) encuen tren nuestra p gina. A continuacin se da d un ejemplo de la ap plicacin de e la directiv va META:
{font-f family:Arial;
font-size:12pt;
color:red;
Escriba las siguien ntes instruc cciones en un editor de textos simple com mo Word p pad o Write o block b de no otas. Ejemplo o 1: Saltos de lnea y de prrafo os
Ca aptulo 5: Re esultado
Regla 1 Los re etornos de e carro que pongo no s se respet tan en el navega ador, Lo nic co que separa a lo os textos son s las d directivas < <P> y la directiva <Br> Siendo <P> < la direc ctiva de final de prra afo - Siendo o <B> la directiva de f final de ln nea Si se de esea dejar obtener o var rias lneas en blanco, no basta c con repetir varias vec ces la directiva a <p>, o <b br>, sino es e necesario escribirla as juntas, o sea, por r cada lne ea en blanco que q queram mos se escribe <p><br r> Regla 2: Todas las s directivas deben de estar e Anida adas, o sea una dentro o de otra. A excepcin de las directivas abiertas co omo <br> qu ue no nece esitan direct tiva de cier rre o: Ejemplo
Grabar la pgina (en ( el direct torio practic cas-bsicas s) Al termin nar de escr ribir el programa grbe elo con el n nombre de pagina1.html. Se le puede nombre extensin dar cu ualquier al archiv vo mient tras la n sea html. Importan nte: Los no ombres de archivo no o deben d e tener es spacios en blanco y estar escritos en minscu ula.
Ca aptulo 6: Cmo o abrir un na pgina a Html de el disco d duro desd de Interne et Explor rer?
Para vis sualizar el resultado de tu prim mera pgina a en: a) Para Internet Explorer, debes de hace er lo siguien nte: Entrar a Internet E Explorer Seleccio onar el arch hivo, y dar click c en el botn b abrir B) Para Netscape Navigator: N debes d de hacer lo sigu uiente Entrar a Netscape Navigator: Selecciona ar el archivo o, y dar clic ck en el bot n abrir do el siguie ente result tado: Teniend
Directiv va <BODY> > Define el e cuerpo del d texto del d docume ento, es la a seccin p principal en n la cual v va el contenid do de nuest tra pgina. La dire ectiva <BODY> ad dmite vari ios atribu tos, los ms imp portantes son: BGCOLO OR=color de d fondo TEXT= color c del tex xto de la p gina LINK=co olor del text to o link de enlace VLINK= color del te exto o link de d enlace visitado v ALINK= color del te exto o link de d enlace activo a BACKGR ROUND="imagen de fondo" f Ejemplo: <BODY BGCOLOR R=black tex xt=white link k=blue vlink k=red> Fija el co olor del fondo negro, el e texto blan nco, el enla ace azul y e el enlace vis sitado rojo
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.
Captulo 8: Ttulos
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 4</H5> Titulo 6, la Directiva es: <H6>TEXTO DEL TITULO 4</H6> 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 vara 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 pequea <SMALL>Letras pequeas</SMALL> Para aplicar subndices <SUB>texto en subndice </SUB> Para aplicar ndices (Superndices) <SUP> Superndice </SUP> Para aplicar letra tipogrfica
<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 lgicos 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 cdigo</CODE> Para aplicar texto de definicin <DFN>texto </DFN> Para aplicar texto identado o con sangra <BLOCKQUOTE>texto</BLOCKQUOTE> Para aplicar texto ejemplo <SAMP>texto </SAMP> 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)
Resultad do Grbalo o con el nombre n de e pgina2.html en e el director rio practic cas-format tos y visualiz za los resul ltados
<BODY> > (inmediat tamente despus a s sta), la mod dificacin de el tamao d de letra afe ecta a todo el documento: d : <BODY> > <BASEFO ONT SIZE= ="5"> .... Para cambiar el ta amao de la fuente por prrafos s. Se utiliza a las siguie entes directivas: <FONT SIZE=No. de d fuente> > Texto </FO ONT> Las fuen ntes tienen 7 tamaos: Las podrs Observ var en el sig guiente ejem mplo: En un ar rchivo nuev vo realiza la a siguiente codificaci n dentro d de la secci n de cuerp po de la pgina a en el terc cer ejemplo (pgina3.h html)
Nota: os, en un te exto determ minado, no o se emplea a <font siz ze=No.> pa ara el Si se utilizan ttulo mismo texto, ya qu ue el titulo da d la orden n para un t tamao det terminado d de letra y <font size=No.> estar a dando o la or rden para a otro tamao de letra a.
La direct tiva <FONT T> tiene otr ros parme etros COLO OR="color del texto" y FACE="nombre de la fue ente" Ejemplo: <font siz ze="3" colo or=blue face="times new roma an">Texto de color azul, e tipo times s new roma an</font> tamao 3, de fuente amao de la fuente por prrafos s. (Segund do mtodo o) Para cambiar el ta El tamao de la fuente e por de efecto (pre eestablecid do) es d de tamao o 3. amos aume entar el tam mao al sigu uiente, tene emos las sig guientes do os maneras s: Si desea <FONT SIZE="4">.....</FONT T> 1er. M todo >...</FONT T> 2do. Mt todo (El tam mao estn ndar es 3 + 1 nos da t tamao 4) <FONT SIZE="+1"> emplo de comandos c equivalent tes Otro eje <FONT SIZE="2">.....</FONT T> 1er. M todo <FONT SIZE="-1"> >...</FONT> > 2do. Mto odo (El tam mao estn ndar es 3 - 1 nos da ta amao 2)
Nota: Se S recomie enda realiz zar la tabla a en Word d, para po osteriormen nte pegarla a en arachnophilia recha, izqu uierda y ce entro y just tificado) Alineacin de prrafos. (Der Estas pr ropiedades son de la directiva d <P P>....</P> Alinean el texto en la pantalla a la izquier rda, derech ha, centrado o y justifica ado. <P ALIG GN= "cente er"> texto centrado c </p p> <P ALIG GN= "left"> > texto aline eado a la izquierda </p p> <P ALIG GN= "right" "> texto alin neado a la derecha </ /p> <P ALIG GN= "justify fy"> texto ju ustificado </p> < Escribe y graba co on el nomb bre de pag gina5.html en el direc ctorio prac ctica-forma ato la acin del siguiente ej jemplo. codifica Visualiz za detenida amente los s resultado os Ejemplo o5
ALIGN="LEFT | CENTER R Determina la a forma de alinear a la lnea a en la panta alla (sus valo ores respectivo os son | RIGTH" izquierda, de erecha y centro o). Por defecto el valor, es de alineado a la i izquierda.)
Escribe y graba con c el nom mbre de pa agina6.html en el dire ectorio prac ctica-forma ato la codificac cin del siguiente ejem mplo. Visualiz za detenida amente los s resultado os Ejemplo o6:
Listas nu umeradas Estas lis stas gener ran una nu umeracin automtic ca, (Nmer ros arbigo os, romano os, o letras) tienen la directiva d ce errada <OL L> ...</OL> >(Ordered Lists) que significa listas niciar la lista a. ordenadas, y se utiliza para in Dentro del d bloque de d la lista cada c eleme ento debe d de llevar la a directiva a abierta <LI> > (list item) que significa elemento e de d lista La estructura de un na lista orde enada es la a siguiente. o 7: Ejemplo
c el nom mbre de pagina7.html en un nu uevo directo orio de nombre Escribe y graba con codi prctica listas, la ificacin del ejemplo o ant terior. a detenidam mente los re esultados Visualiza Atributo os de listas s TYPE="Carcter" Si se de esea cambiar el tipo de numera acin se em mplea el a atributo TYP PE="Carc cter", este deb be de escrib birse dentro o de la direc ctiva <OL> >, o sea <OL TYPE="C Carcter"> > Teniendo los siguie entes tipos. PE ="A"> <OL TYP Con este e atributo la l lista com mienza con la letra A y el resto de los elementos con las siguiente es letras de el alfabeto.
<OL TYP PE ="a"> Con este atributo la l lista com mienza con la letra a y el resto de los elementos con las siguiente es letras de el alfabeto. Es igual qu ue la lista a anterior con n la nica di iferencia qu ue es en mins scula. <OL TYP PE ="1"> Con este e atributo la lista num merada com mienza con el nmero o 1. Este es s el atributo o por defecto. <OL TYP PE ="I"> Con este e atributo la a lista nume erada comienza con e el nmero ro omano I. <OL TYP PE ="i"> Con este e atributo la a lista nume erada comienza con e el nmero r romano i. Ig gual que la a lista anterior pero en minscula. VALUE ="valor nu umrico" Es el atributo que se utiliza para p indicar el valor q que debe d de tener el elemento d de la lista num merada., es ste atributo o se coloca a dentro de e la directiva <LI>, q quedando d de la siguiente e manera. <LI < VALUE E="valor nu umrico"> START= ="nmero" " Es el at tributo que e se utiliza para indic car el valo or inicial qu ue debe de tener la lista numerad da. Por defe ecto es 1. Ejemplo o: 8 (TYPE) ) Copia la a codificac cin de la lista anterio or y realiza a los camb bios
Ejemplo o: 9 (START y VALUE E) Copia la a codificac cin de la lista anterio or y realiza a los camb bios
Graba lo os cambios y visuali iza detenid damente lo os resultad dos En el eje emplo anterior el atrib buto START T="10", ord dena al bro owser iniciar la numera acin en 10 y el e atributo VALUE V ="2 20" cambio el nmero del elemen nto a 20. Ejemplo os: 10 (TYP PE, START T VALUE) Copia la a codificac cin de la lista anterio or y realiza a los camb bios
Graba lo os cambios y visualiza detenid damente lo os resultados En el ejemplo ante erior el atributo TYPE E="I", indic ca que la n numeracin n es roman na, el o START=" "5", ordena a al browser iniciar la numerac cin en el numero V y el atributo atributo VALUE ="1 10" cambio el nmero del elemen nto a X.
Graba lo os cambios y visuali iza detenid damente lo os resultad dos TYPE="Nombre_d de_Vieta" Si se desea cambiar el tipo o de viieta se emplea el atr ributo TYPE="Nombre_d de_Vieta", este debe de escrib birse dentr ro de la dir rectiva <UL L>, o sea <UL L TYPE="V Vieta"> Nota: Lo os nombres s de las vie etas debe escribirse e fo orzosament te en mins sculas Se tiene en los siguie entes tipos. <UL TYP PE ="disc" "> Este es el atributo que q muestr ra un circulo o con rellen no negro, e es el que da a por defect to. <UL TYP PE ="circle e"> Este es el atributo que q muestr ra un circulo o vaco. <UL TYP PE ="squa are"> Este es el atributo que q muestr ra un peque eo cuadro o negro.
Ejemplo o 12 Copia la a codificac cin de la lista li anterio or y realiza a los camb bios
La direc ctiva <DL>, tiene el parmetro compact, que se e emplea par ra dar sangras francesa as al texto, , con la sa alvedad qu ue solo fun nciona de e esa maner ra con tem mimos pequeo os, para pod der entende er esto se presenta p el siguiente e ejemplo. Ejemplo o 15 escrib be la codifi icacin sig guiente
os cambios y visuali iza detenid damente lo os resultad dos Graba lo El espac cio que se obtiene o de sangra es pequeo (d de 3 a 5 ca aracteres, d dependiendo del tamao de ellos y del d tamao de letra de el browser) ). bserve en e el result tado que en n el primer r prrafo la a definicin n paso a la segunda lnea. En el segundo prr rafo la defin nicin sigue e inmediatamente al te ermino FTP P.
Graba lo os cambios y visuali iza detenid damente lo os resultad dos Ejemplo o 17 Copia la a codificac cin anterio or y realiza a los camb bios
e puede ap preciar el resultado de ambos ejemplos es ig gual. Como se Graba lo os cambios y visuali iza detenid damente lo os resultad dos
Ejemplo o 18 Inicia un n nuevo ar rchivo y es scribe la co odificacin n siguiente e, grbalo con el nom mbre de practica 10 en el director rio practic cas-listas
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.
Tip:
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.
Bottom
Alinea el texto en la zona superior del grfico. Top 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"> Escribe el ejemplo anterior dentro de la seccin <body> de en un nuevo archivo de nombreimgenes1.html. Visualiza el resultado. Cambia el atributo BORDER=0 A BORDER=1 y observa que ahora la imagen tiene un borde.
Tipos de e enlace
Enlace a otra pgina a de nuestro o sitio. Enlace a otra se eccin de la a misma pg gina Enlace a un lugar con ncreto dentro o de otra p gina de nue estro sitio. E Enlace a una a pgina ext terna. Enlac ce por medio de e un grfico Enlace a una direccin n de E-mail, por medio de un grfic co. Enlace a una direccin de E-mail. Enlace E a un objeto (documento zip Word)
Enlace otra o pgina a de nuest tro sitio. Un enla ace es la conexin c de una pag gina a otra a. Un sitio es un gru upo de pag ginas conectad das entre si, s por hiper renlaces. Para da ar ejemplo a un enlac ce. Supong gamos que e en la pag gina dos q quiera hace er un enlace a la pgina tres. Agregue e la siguien nte lnea a la pagina2 2.html. <A HRE EF="pagina a3.html">E 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 prctica 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 pgina agregar un enlace a la pgina 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 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 pgina de nombre capitulo2.html y dentro de ella al tema 4. La directiva es la siguiente: <A HREF="capitulo2.html#tema4">Tema 4 del captulo 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 Bsqueda </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
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 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 border="0" >Mandame un E-mail</A>
SRC="imagen/email(1).gif"
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 <A HREF="citas.zip">Bajar el archivo comprimido Citas </A>
Citas
</A>
Agrega el cdigo anterior al archivo enlace-ext.html, y visualiza el resultado. enlaceext.html (comprueba que la grfica tambin activa el enlace.
Crear un na tabla La estructura de un na tabla y sus directiva as para cre arlas son: Ejemplo o: tabla con n una celda Nota: Co omo mnimo o se tiene que q tener un u rengln y una celda a para una t tabla <TABLE E> (Inicio Tabla) Ta <TR> (In nicia rengl n <TD> (Inicia celd da) Text to de la cel lda </TD> (Fin celda) ) </TR> (F Fin rengln) ) </TABLE E> (Fin Tab bla) Resultado Texto de e celda Colocar r un borde sobre la ta abla El atributo BORDER=1 se visu ualiza un bo orde en tab bla El atributo BORDER=0 quita el e borde de la tabla. os: Ejemplo < TABLE E BORDER R="1"> <TR> <TD> Texto de la celda a </TD> </TR> </TABLE E> Resultado
Aumenta ar el grueso or del borde e <TABLE E BORDER="8" > <TR> <TD> a Texto de la celda </TD> </TR> </TABLE E> Resultado
E BORDER= ="1" WIDTH H="300" > <TABLE <TR> <TD> a Texto de la celda </TD> </TR> E> </TABLE Resultad do
Resultad do
Alineacin Horizo ontal (centr ro derecha a e izquierd da) Alineacin centrad da ALIGN="center" ha ALIGN= ="right" Alineacin derech Alineacin izquier rda ALIGN= ="left" Alineaci in centrada: align=" "center" <TABLE E BORDER= ="3" WIDTH H="200" HE EIGHT="10 00"> <TR> <TD align="cent ter" > Texto o de la celd da </TD> </TR> </TABLE E> Resultad do
Alineaci in derech ha : align=" "right" <TABLE E BORDER= ="3" WIDTH H="200" HE EIGHT="10 00"> <TR> t" >Texto de d la celda< </TD> <TD align="right </TR> </TABLE E> Resultad do
Alineaci in Izquier rda : align= ="left" (Es por defecto o) <TABLE E BORDER= ="3" WIDTH H="200" HE EIGHT="10 00">
<TR> <TD align="left" > Texto de e la celda </TD> < </TR> </TABLE E> Resultad do
dio valign= ="middle" Alineacin en med Alineacin abaj jo va align="bott tom" valign=" "top"
in arriba : Alineaci <TABLE E BORDER= ="3" WIDTH H="200" HE EIGHT="10 00"> <TR> <TD valign="top p" > Texto de d la celda </TD> </TR> </TABLE E> Resultad do
Alineaci in Abajo : valign="b bottom" <TABLE E BORDER= ="3" WIDTH H="200" HE EIGHT="10 00"> <TR> ottom "> Te exto de la celda c </TD> > <TD valign= " bo
Alineaci in: En me edio : valig gn="middle e" (por defe ecto) <TABLE E BORDER= ="3" WIDTH H="200" HE EIGHT="10 00"> <TR> <TD valign= " mi iddle "> Te exto de la ce elda </TD> > </TR> E> </TABLE Resultad do
Tablas con c de un rengln y dos colum mnas. <TABLE E BORDER= ="3" WIDTH H="75%"> <TR> <TD> Texto T en fila a 1, celda 1 </TD> <TD> Texto T en fila a 1, celda 2 </TD> </TR> </TABLE E> Resultad do
<TABLE E BORDER= ="3" WIDTH H="100%" > <TR> <TD WIDTH="50% W %" > Texto en fila 1, celda c 1</TD D> <TD WIDTH="50% W %" > Texto en fila 1, celda c 2 </TD D> </TR> </TABLE E> Resultad do
<TABLE E BORDER= ="3" WIDTH H="100%" > <TR> <TD WIDTH="20% W %" > Texto en fila 1, celda c 1</TD D> <TD WIDTH="80% W %" > Texto en fila 1, celda c 2 </TD D> </TR> </TABLE E> Resultad do
Tabla de e 1 rengln n y tres co olumnas. <TABLE E BORDER= ="3" WIDTH H="100%" > <TR> <TD WIDTH="20% W %" > Texto en fila 1, celda c 1 </TD D> <TD WIDTH="60% W %" > Texto en fila 1, celda c 2 </TD D> <TD WIDTH="20% W %" > Texto en fila 1, celda c 3 </TD D> </TR> E> </TABLE Resultad do
d 2 renglo ones y tres s columnas s. Tablas de <TABLE E BORDER= ="3" WIDTH H="100%" > <TR> W %" >fila 1, col. c 1 </TD> <TD WIDTH="20%
<TD WIDTH="60% W %" > fila 1, col. 2 </TD D> <TD WIDTH="20% W %" > fila 1, col. 3 </TD D> </TR> <TR> <TD >f fila 2, col.1 </TD> <TD > fila 2, col.2 </TD> <TD > fila 2, col.3 </TD> </TR> </TABLE E> Resultad do
e 2 renglon nes y tres columnas. . Tabla de <TABLE E BORDER= ="3"> <TR> <TD >f fila 1, col. 1 </TD> <TD > fila 1, col. 2 </TD> <TD > fila 1, col. 3 </TD> </TR> <TR> fila 2, col.1 </TD> <TD >f <TD > fila 2, col.2 </TD> <TD > fila 2, col.3 </TD> </TR> E> </TABLE Resultad do
<tr> <td>fila 1, col. 1</td> <td>fila 1, col. 2</td> <td>fila 1, col. 3</td> </tr> <tr> >fila 2, col.1 1</td> <td> <td> >fila 2, col.2 2</td> <td> >fila 2, col.3 3</td> </tr> </table> Resultad do
Ntese el e espacio entre e los bo ordes (inter rior y exterio or) Ejemplo o 2: <table border="5" cellpadding c g="10" cell lspacing="1 1"> <tr> <td>En ne</td> <td>Fe eb</td> <td>Ma ar</td> </tr> <tr> <td>Ab br</td> <td>Ma ay</td> <td>Jun</td> </tr> </table> Resultad do
Ntese el e espacio entre e el tex xto y los bor rdes. Ejemplo o 3: <table border="5" cellpadding c g="10" cellspacing=" "10" > <tr> <td>En ne</td> <td>Fe eb</td> <td>Ma ar</td> </tr> <tr> br</td> <td>Ab <td>Ma ay</td> <td>Jun</td> </tr> </table> Resultad do
Ntese el e espacio entre e el tex xto y el bord de interior. Y el espac cio entre el borde interior y el borde exterior.
Fijar el color c a la fila <table border="1" cellpadding c ="1" cellspa acing="1"> <tr bgco olor= "#00FFFF" > <td>En ne</td> <td>Fe eb</td> <td>Ma ar</td> </tr> <tr> br</td> <td>Ab <td>Ma ay</td> <td>Jun</td> </tr> </table> Resultad do
Para cam mbiar el co olor a la celda c <table border="1" cellpadding c ="1" cellspa acing="1"> <tr > <td bgc color= "#00 0FFFF" >Ene</td> <td>Fe eb</td> <td bgc color= "#00 0FFFF" >M Mar</td> </tr> <tr> <td>Ab br</td> <td bgc color= "#00 0FFFF" >M May</td> <td>Jun</td> </tr> </table> do Resultad
Para cam mbiar el co olor del bo orde <table bordercolor r = "#0000F FF" border= ="8" cellpad dding="1" cellspacing= ="1"> <tr> ne</td> <td>En <td>Fe eb</td> <td>Ma ar</td> </tr>
Para cam mbiar el co olor del bo orde en dos s tonos <table bordercolor rdark="#99 99933" bor rdercolorlig ght="#CCC CC66" bord der="8" cellpadd ding="1" cel llspacing="1"> <tr> ne</td> <td>En <td>Fe eb</td> <td>Ma ar</td> </tr> <tr> br</td> <td>Ab <td>Ma ay</td> <td>Jun</td> </tr> </table> Resultad do
</table> Resultad do
Ejemplo o 2: (uniend do 3 colum mnas) <table border="8" cellpadding c ="1" cellspa acing="1"> <tr> <td col lspan="3" > Motores de bsqued da </td> </tr> <tr> ahoo </td> <td> Ya <td> Ly ycos </td> <td> Infoseek </td d> </tr> </table> Resultad do
Resultad do
Ejemplo o 2: (uniend do 3 renglo ones) <table border="5"> <tr> <td row wspan="3"> >Browsers< </td> <td>Internet Explorer</td> </tr> <tr> <td>Ne etscape Na avigator</td d> </tr> <tr> <td>Mo osaic</td> </tr> </table> Resultad do
Combin nando Reng glones y Columnas: C Ejemplo o (uniendo 2 columna as y dos filas) <table border="8" cellpadding c ="1" cellspa acing="1"> <tr> <td row wspan="2" " >Internet< </td> <td co olspan="2" > Motores de bsque eda </td> </tr> <tr> <td> Yahoo Y </td> > <td> Lycos L </td> </tr> </table> Resultad do
Como podemos ver el alias para los acentos es letra+acute, y el alias para los tildes es letra+tilde.
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> 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: 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 Ntese que cada enlace se le agrego el atributo TARGET="principal", este atributo 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 est activando. Tambin se puede utilizar divisin horizontal de frames interactivos 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 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
SCROLLING="yes" Activa la barra de desplazamiento Activa o Desactiva la barra de desplazamiento, en funcin de que entre o no, la pgina completa dentro del frame
SCROLLING="auto"
Siendo este ltimo el que se establece por defecto A continuacin se da un ejemplo de cmo 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 necesita 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>
<title>frame 10</title> </head> <frameset ROWS="100,400"> <frame src="..\imagen\inmortal.jpg" scrolling="no"> <frame src="inmortalidad.html"> </frameset> </html> Resultado 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> 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>
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", 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", 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> 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"> </frameset> </html>
Resultado
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" 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> <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