DISEO

DE PAGINAS WEB

CURSO HTML Nebaj 2010

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.

Captulo 1: Intro oducci n

Los Prog gramas par ra generar pginas Web los pode emos clasif ficar en dos s grupos, e en los que podemos ident tificar las ve entajas y de esventajas de cada un no de ello. Program mas para novatos: n

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.

Ca aptulo 3: Elementos del diseo y publica acin de una pgina

Web Dis seo del pro ograma - Anlisis s del Proble ema y Algo oritmo - Codific cacin o esc critura del programa p - Agrega arle present tacin al pr rograma - Con imgenes, sonido, Gif animados s, Scrips de e Java y Ap pplets. - Agrega arle contado ores de visi itas. - Depura acin. - Programacin de Java Scrips y Applets s (Avanzado o) - Alojar el e sitio o la pgina en un servidor r - Por medio de un u programa a Ftp se su ube la pgin na al servidor - Publica acin - Agre egar la pgi ina en los ndices de los motores s de bsque eda. - Inter rcambio de Banners Requisitos para el diseo d prof fesional de una pgina a Web utadora pen ntium con modem m - Compu - Conexi in a Intern net - Browse er (Navegad dor) - Editor HTML H - Programa de dise eo grfico fico - Programa de retoque fotogr - Programas de utileras - Programa Ftp. - Colecc cin de Fondos, Vieta as, Grficos s y Grficos s Gif. - Direcciones de Int ternet de ut tileras. entas para el diseo de d pginas Web Herramie

Ca aptulo 4: Eleme entos Bs sicos y estructura a de una pgina W Web

Directiv vas Piense en e directiva as o etique etas como hablar con n el browse er, o sea es la maner ra de darle ins strucciones. Abajo se e dan los siguientes ejemplos de directivas: <HTML> > </HTML> mera direct tiva es de e inicio y la siguie ente es u una directiva del cierre. La prim Para hacer una directiva de cierre, sim mplemente a agregan un n signo / a la directiv va de inicio. La may yora de directivas, , pero no todas tienen un na directiv va del Las direc ctivas o com mandos se pueden realizar en m maysculas o minscul las. Estructu ura bsica de una p gina Web cierre.

Explicac cin de la estructura a bsica

Directiv va <HTML> >

Indica a la computadora que se trata t de un programa p HT TLM. Todo pro especificad ograma HTM ML tiene dos s partes El encabezado e do por la dire ectiva <HEA AD> y el cuerpo o indicado po or la directiva <BODY>

Directiv va <HEAD> >

Dentro se e colocan la as directivas s para propo orcionar info ormacin de e la pgina a los buscad dores robticos s de Internet t y otras dire ectivas como o <TITLE>, <META>, < <SCRIPT> y <STYLE> q que a continuac cin se desc criben:

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:

Directiv va <SCRIPT T> (Este no o es lenguaj je HTML, y solo se da ar un ejem mplo)

Es emple eada cuando o agregamo os programas con el len nguaje JAVA A SCRIP, pa ara incluir ef fectos visuales en e la pgina a y acciones. Ejemplo: Las instruc cciones desc critas abajo, cambian e l texto de lo os enlaces a rojo al pas sar el obre ello. Mouse so <style> <!--a:hover{color:RED; </style> font-w weight:; }-->

Directiv va <STYLE> >

Se utiliza a para coloca ar Hojas de Estilo en Ca ascada (CSS S). Ejemplo: Las instrucc ciones descritas abajo, indican i los a atributos y ca as de la fuen nte de aracterstica s de la pgin na. los textos

<STYLE> > P </STYLE E>

{font-f family:Arial;

font-size:12pt;

color:red;

backg ground-color r:lime}

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

Captulo 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.

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

Ca aptulo 9: Tip pos y tam maos de e fuentes

Para cambiar el ta amao de la fuente biar el tama ao de let ra a la pg gina, una manera es s con Existen dos formas de camb ambiar el t directiva a (cerrada) <font> ....< <\font>, la cual c se utilliza para ca tamao de letra por pr rrafos, la otra form ma con directiva (a abierta) <B BASEFONT T SIZE="v valor numric co">, se uti iliza para ca ambiar el ta amao de letra por de efecto de toda la pgin na. Para cambiar el ta amao de la letra tod do el docum mento. Se utiliz za la direc ctiva <BAS SEFONT SIZE="valor r numrico o"> como en el eje emplo <BASEF FONT SIZE E="5"> Hace qu ue el docum mento adop pte un tama ao de letr ra tamao 5 por defec cto para todo el texto que aparezca a despus de esta directiva. Si lo ponemo os despus s de la dire ectiva

<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)

El resultado se ve er como sigue s

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)

Cap ptulo 10: : Texto Preformat teado

Las dire ectivas (<PRE>...</PR RE>) permite visualiza ar el texto tal y como se encue entre colocado o entre est tas 2 direct tivas, con el e formato que desee emos, con los retorno os de carro sin n ser espec cificados po or <BR>, y las tabulaci ones NOTA: No es re ecomendab ble usar tab bulaciones, en su luga ar es prefe erible poner r espacios, , (por medio de la barra de d espaciar), ya que no n todos lo os browsers s tienen pre eestablecid dos el mismo espacio e de tabulador y podra mo odificarnos la distribuc cin del tex xto dependiendo del nave egador emp pleado. Escribe y graba co on el nomb bre de pag gina4.html en el direc ctorio prac cticas-form matos la codifi ficacin del siguiente e ejemplo. Visualiz za detenida amente los s resultado os Ejemplo o: 4

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

er como sigue s El resultado se ve

Cap ptulo 11: : Lneas s Divisor rias

Son Sep paradores de d texto en forma de Lneas L Horiz zontales. La direct tiva es: <HR> (Horizontal Rule) y es una dir rectiva abie erta. <HR> Por defe ecto nos da una lnea de d una altu ura=1 y una a anchura=1 100% Pudiendo cambiar alto, a ancho o alineacin n y color de la misma. Ejemplo: <HR SIZ ZE=5 WIDT TH="75%" COLOR="#f C ff0000" ALI IGN = CEN NTER>
SIZE="valo or numerico" WIDTH="v valor numrico" " Permite indic car el grosor de e la lnea en cu uestin. (valor p por defecto es 1) Permite indic car la anchura a en pixels o e el tanto por cie o de la pantal lla que ento del ancho ocupar la ln nea.(valor por defecto es 100 0%)

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:

Resume en de direc ctivas y atr ributos de formatos

Cap ptulo 12: : Cr reacin de listas e en HTML

Estas lis stas son pa arecidas a numeracin y vietas s en WORD, teniendo o los siguie entes tipos de lista.
Listas numeradas (ordenadas s) Listas co on vietas (desordena adas) Lista as de defin nicin Listas an nidadas

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

os cambios y visualiza detenid damente lo os resultados Graba lo

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.

Cap ptulo 13: : Listas con vie etas

Estas lis stas genera an vietas de d diferente es tipos, m uy parecida as a las qu ue se utiliza an en Word, es stas listas son s de tipo desordena adas. Estas lis stas tienen la directiv va cerrada <UL>...<\U UL> (unord dered lists), significa listas desordenadas y se e utiliza para a iniciar est te tipo de lis sta. La estructura de un na lista con vietas (de esordenada a) es la sigu uiente. Ejemplo o Copia la a codificac cin de la lista li anterio or y realiza a los camb bios 11:

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

os cambios y visuali iza detenid damente lo os resultad dos Graba lo

Cap ptulo 14: : Listas s Anidad das

Las lista as anidadas s, son listas de varios s niveles qu ue pueden combinar diferentes tipos de listas s. Ejemplo o 13 Inicia un n nuevo ar rchivo y es scribe la co odificacin n siguiente e, grbalo con el nom mbre de pract tica 8 en el e directorio practicas-listas

Cap ptulo 15: : cin Listas de d definic

Estas lis stas genera an listas de e elementos con sang gras y pos seen una directiva cer rrada <DL>...< </DL> (definition list, li ista de definicin), la q que se utiliza para da ar inicio a la a lista de definicin. Para co olocar el te ermino se utiliza la directiva a abierta <DT T> (Directiva de term mino) Para colocar la definicin se utiliza u la dire ectiva abier rta <DT> (d directiva de e definicin) ). Ejemplo o 14 Inicia un n nuevo ar rchivo y es scribe la co odificacin n siguiente e, grbalo con el nom mbre de practica 9 en el e directori io practicas-listas

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.

Cap ptulo 16: : Creacin de sangras

Se pued de obtener el e mismo re esultado qu ue las listas s de definic cin con la d directiva ab bierta <DIR>... .</DIR> , y con la direc ctiva <bloc ckquote>. <BLOCK KQUOTE>. ...</BLOCK KQUOTE> Es Texto in ndentado. <DIR>... .</DIR> fun nciona como o un tabula ador. Ejemplo o 16 Copia la a codificac cin del eje emplo 14 y realiza los s cambios s

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

Cap ptulo 17: Formato de im genes s

Los nave egadores soportan s do os tipos de formatos f de e imgenes s GIF y JPE EG. Estos fo ormatos permiten com mprimir los datos de las imgen nes, de ma anera que sean menos le entas de ca argar. Caracte ersticas de e las imge enes GIF.
1.- Soporta an Animaciones. Genera G grfico os con movimie ento Esto E hace que se muestre el fondo sobre el que se apoya a la imagen i Funciona F de manera que conforme se va cargando va mostrando m la imagen ms s ntidamente, hasta alcanzar la resolucin r tota al de la misma Se S emplea en n dibujos, no se recomienda a este formato o para fotografas f ya q que estas requ uieren muchos colores Esto E es muy til para emple eo de Internet, ya que la velocidad de d transmisin n es muy lenta para imgenes, sonido y vd deo, ya que q estos suel en ser archivos s grandes.

2.- Soporta an Transparen ncias:

3.- Efecto de difusionad do o entrelazad do:

oporta 255 colores. 4.- Solo so

5.- Compri ime las imgenes

Caractersticas de las imgenes JPEG

Soporta un mximo de 16 millones de colores. Se utiliza para imgenes de fotografas Alta compresin de imgenes. 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.

Captulo 18: Colocacin de imgenes en la pgina Web

La directiva para incluir un grfico es <IMG > (Imagen), este tiene el formato bsico siguiente: <IMG SRC="Ruta/imagen"> <IMG> 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 <IMG> tiene los parmetros opcionales BORDER, HEIGHT, WIDTH, ALT y ALIGN, pudiendo agregarse uno o varios de ellos.
BORDER= "Tamao numrico" 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.

HEIGHT= "Tamao numrico"

WIDTH= "Tamao numrico"

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.

ALT= "Texto a mostrar"

ALIGN="top | middle | bottom"

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.

Captulo 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. 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=60 HEIGHT=60 ALT="Imagen de una rosa"> 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 en medio <p> <IMG SRC="/imagenes/est-azul2.jpg" ALT=" Estrella de 9 puntas" align="bottom"> Texto alineado en la parte inferior

Cap ptulo 20: : En nlaces en una pg gina Web

Un hiper renlace (en nlace) es la referencia a otros do ocumentos Html, grfic cos, direcci iones de E-ma ail, u objetos (archivo os Zip, Wo ord, etc.). E Estos hiper renlaces so on las pala abras subrayad das, botone es o grfico os a los que e al darle C Click muestr ran otra pg gina. El nomb bre de este lenguaje es HTML, (L Lenguaje cr reador de H Hipertexto), se debe a que la caract terstica m s importan nte de las pginas Web es precis samente el Hiperenlac ce. Nota: Se e debe de escribir e en minsculas m s todos los n nombres de e los archiv vos a los qu ue se hace ref ferencia en los hiperen nlaces, ya que q alguno os servidore es en los que se aloja an las pginas no aceptan n maysculas. Tip: El conte enido de un n sitio se de ebe de des sglosar en subtemas, colocando o cada subtema en una pgina p difer rente, unien ndo todas la as pginas por medio de hiperen nlaces. La direct tiva para un n hiperenlace es: <A HRE EF="dir-url" "> Texto o imagen </ /A> En dond de:

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

Captulo 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 incluy 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>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.

Captulo 22: Tablas

La creacin de tablas se utiliza en trminos generales para mejorar la visualizacin de la pgina, 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 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

Cap ptulo 23: : Cambiar el ancho de e la tabla a

El ancho o de la tabla a se puede cambiar en n porcentajje o en pixe els (puntos) ) El atributo WIDTH= ="100%" ca ambia el anc cho de la ta abla al 100% % El atributo WIDTH= ="600" cambia el anch ho de la tabla a 600 pix xels. Ejemplo os: <TABLE E BORDER= ="1" WIDTH H="100%" > <TR> <TD> Texto de la celda a </TD> </TR> </TABLE E> Resultado

E BORDER= ="1" WIDTH H="50%" > <TABLE <TR> <TD>

Texto de la celda a </TD> </TR> E> </TABLE Resultado

E BORDER= ="1" WIDTH H="300" > <TABLE <TR> <TD> a Texto de la celda </TD> </TR> E> </TABLE Resultad do

Cap ptulo 24: : Cambiar C el e alto de la tabla

<TABLE E BORDER= ="3" WIDTH H="200" HE EIGHT="10 00" > <TR> a celda </TD D> <TD> Texto de la </TR> </TABLE E>

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

Alineacin Vertica al (arriba en medio y abajo) Alineacin arriba: "top" valign="

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

</TR> </TABLE E> Resultad do

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

Cap ptulo 25: : Conbinad C do Alineaciones

Conbina ado Alinea acines (Ce entrado ve erical y hor rizontal) <TABLE E BORDER= ="3" WIDTH H="200" HE EIGHT="10 00"> <TR> <TD align= " cent ter" valign= " middle "> Texto d de la celda </TD> </TR> </TABLE E> 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

Cap ptulo 2 26: Encabezado os de c column nas

Centra y resalta el texto conte enido en la celda. <TH>............ </TH> > Significa Table Head d (Encabez zado de tab bla) <table BORDER="3 B 3"> <tr> <th h>Col. 1</th h> <th h>Col. 2</th h> <th h>Col. 3</th h> </tr>

<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

Cap ptulo 2 27: Arreglo A s de bo ordes

CELLPA ADDING="Valor Num mrico": Fija el espacio en ntre el bor rde exterio or de la ce elda y el borde inte erior (borde e del contenid do) CELLSP PACING="V Valor Num mrico" Fija el es spacio entr re el conten nido y el bo orde interior r Ejemplo o 1: <table border="5" cellpadding c ="1" cellsp pacing="10 0" > <tr> ne</td> <td>En <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 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.

Cap ptulo 28: : Colo or de fon ndo para las tablas s

Para cambiar del color c de fondo, basta con escrib bir la direct tiva BGCOLOR dentro o del elemento o que de la a tabla que se desee cambiar. c Para cam mbiar el co olor a la ta abla <TABLE E BGCOLO OR="codigo o de color" "> Para cam mbiar el co olor a la fi ila <TR BG GCOLOR="codigo de color"> Para cam mbiar el co olor a la celda c <TD BG GCOLOR="codigo de color"> Para cam mbiar el co olor del bo orde <TABLE E BORDER RCOLOR=" "codigo de e color"> Fijar co olor a la ta abla <table bgcolor= "# #00FFFF" border="1" b cellpadding c ="1" cellspacing="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

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>

<tr> <td>Ab br</td> <td>Ma ay</td> <td>Jun</td> </tr> </table> do Resultad

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

Cap ptulo 29: : Unir columna as

Se realiz za extiendo o el No.de columnas c que va a ocu upar la celd da. Se utiliza a la directiv va COLSPA AN="No. de e celdas" Ejemplo o 1 (uniendo o 2 column nas) <table border="8" cellpadding c ="1" cellspa acing="1"> <tr> <td col lspan="2" > Motores de bsqued da </td> </tr> <tr> <td> Ya ahoo </td> <td> Ly ycos </td> </tr>

</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

Cap ptulo 30: : Unir filas

Se realiz za extiendo o el No.de re englones que q va a ocu upar la celd da. Se utiliza a la directiv va ROWSPA PAN="No. de d celdas" Ejemplo o 1: (uniend do 2 renglo ones) <table border="8" cellpadding c ="1" cellspa acing="1"> <tr> wspan="2" " > Browsers </td> <td row <td> In nternet Exp plorer </td> </tr> <tr> <td>N Netscape Na avigator</td d> </tr> </table>

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

Captulo 31: Caracteres 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: &#243; Nos da como resultado , puesto que el nmero de cdigo ASCII para la es 225. Aplicando lo anterior la palabra corazn se escribe as coraz&#243;n Alias Sintaxis: &alias; Ejemplos:
&oacute; Nos da el resultado &aacute; Nos da el resultado &ntilde; Nos da el resultado &Oacute; Nos da el resultado &Aacute; Nos da el resultado &Ntilde; Nos da el resultado

Aplicando lo anterior la palabra corazn se escribe as coraz&oacute;n

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

Tabla a de caract teres espec ciales HTM ML

Cap ptulo 32: : Frame es o marc cos

Los fram mes o cuadros son div visiones que e se le pue eden dar a una pgina a Web. En cada uno de e los frames se pueden cargar c un na pgina diferente e que ac ctan independ dientement te una de otra. o El uso ms comn del em mpleo de los frames s es en la aplicaci in de me ens. ual se divide la pantal lla en dos frames, f un o estrecho o (en la par rte superior r o al En el cu lado izquierdo) y otro o mayor. Dentro de el frame e estrecho, se e carga la pagina co on un men co onteniendo los enlaces s a otras pa aginas, al p pulsar uno d de estos en nlaces, se c carga la pagina a dentro de el frame. Ma ayor. De manera que el men siem mpre estar visible en n la parte s superior o izquierda, y los contenid dos se estarn cambia ando dentro o del frame principal. Ejemplo: Men Hor rizontal Ejemplo: Men Ver rtical

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

Captulo 33: 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 necesaria la barra de desplazamiento, adems le quita presentacin o vista a nuestra pgina. Esto se puede solucionar de dos formas: La 1ra. agregando el atributo SCROLLING="no" dentro de la directiva del frame en que se desee desaparecer la barra de desplazamiento, y la 2da. Colocando la imagen en lugar de la pgina que la contenga dentro del frame Quitar la barra de desplazamiento 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 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>

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", 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

Captulo 34: Frames combinados

Se pueden tener combinaciones 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" Carga la pgina en el frameset anterior al frameset actual. TARGET="_top" TARGET="_self" 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" 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