Está en la página 1de 60

DISEÑO

DE PAGINAS WEB

CURSO HTML

Nebaj 2010

Presentación del curso

La elaboración de una página 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 automáticamente elaboran todos los códigos, uno de estos programas es Microsoft Publisher, y muchos más que se pueden encontrar en Internet,. Además la mayoría de programas como Word y Power Point ya incluye la opción de grabar como página Web.

Cap ítulo 1 : Intro ducci ón

Los Pro gramas pa ra generar páginas W eb los pod emos clasi ficar en do s grupos, e n los que pod emos ident ificar las v entajas y d esventajas de cada u no de ello.

Progra mas para n ovatos:

de cada u n o de ello. Progra mas para n ovatos: Nota: Si se e

Nota:

Si se

emplea

W ord

para

realizar

u na

página

Web, se e recomie nda no u tilizar

tabulado res, y no

efecto q ue las sang rías.

utilizar sa ngrías fra ncesas. Ut ilice tablas

Progra mas para e xpertos y profesion ales.

para pro ducir el m ismo

s a ngrías fra n cesas. U t ilice tabla s Progra mas para e xpertos

Capítulo 2:

Consejos para el diseño de una página Web

Organización del contenido de la página

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

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

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

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

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

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

Elección de Gráficos

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

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

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

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

Términ os importa ntes:

HTML A breviatura de Hyper T ext Marku p Languag e

WWW A breviatura de World

FTP Ab reviatura d e File Tran sfer Protoc ol. (Protoc olo de Tra nsferencia de archivo s. Es

o recibir i nformación a un

servidor . Es el utiliz ado para e nviar pagi nas a un se rvidor. URL Un iform Reso urce Loca tor. Este té rmino se r refiere a u na direcció n de Intern et, o una dire cción de F TP.

Ca pítulo 3:

Elem entos de l diseño y publica ción de una pági na

el emple ado por pr ogramas q ue sirven p ara transm itir (enviar)

Wide Web

Web Dis eño del pr ograma

- Análisi s del Probl ema y Algo ritmo

- Codific ación o es critura del

- Agrega rle presen tación al pr ograma

programa

- Con imágenes, sonido, Gi f animados , Scrips de Java y Ap plets.

- Agrega rle contad ores de vis itas.

-

- Progra mación de Java Scrip s y Applets

- Alojar el sitio o la página en un servidor

Depur

ción.

(Avanzad o)

- Por medio de u n program a Ftp se su be la págin a al servid or

-

Public

ción

- Agre gar la pág na en los í ndices de l os motores

- Inter cambio de Banners

de búsqu eda.

Requisit os para el diseño prof esional de una págin a Web

- Compu tadora pen tium con m odem

- Conex ón a Intern et

- Brows er (Navega dor)

- Editor HTML

- Progra ma de dise ño gráfico

- Progra ma de reto que fotogr áfico

- Progra mas de util erías

- Progra ma Ftp.

- Colecc ión de Fon dos, Viñeta s, Gráficos

- Direcci ones de In ternet de u tilerías.

y

Gráfico s Gif.

Herrami entas para el diseño d e páginas Web

- Direcci ones de In t ernet de u t ilerías. y Gráfico s Gif. Herrami

Ca pítulo 4:

Eleme ntos Bá sicos y e structura

Directiv as

Piense

darle ins trucciones .

en directiv as o etique tas como

hablar con

de una página W eb

el browse r, o sea e s la mane ra de

Abajo s

dan los si guientes ej emplos de directivas:

<HTML >

</HTML >

La prim era direc tiva

Para ha cer una di rectiva de

inicio.

es

d e

y

cierre, sim plemente

inicio

la

sigui ente

es

una direct iva del c ierre.

la directiv a de

agregan u n signo / a

La ma yoría de

Las dire ctivas o co mandos se pueden re alizar en m ayúsculas o minúscu las.

directivas ,

pero

n o

todas

tienen

u na

directi va

Estruct ura básica de una pá gina Web

n a directi v a Estruct u ra básica de una p á gina Web Explica

Explica ción de la estructura básica

una p á gina Web Explica ción de la estructur a básica Directiv a <HTML> del

Directiv a <HTML>

del

c ierre.

Indica a l a computad ora que se trata de un

Todo pro grama HTM L tiene dos

el cuerpo

programa H TLM.

partes El e ncabezado especificad o por la dir ectiva <HEA D> y

indicado p or la directiv a <BODY>

Directiv a <HEAD>

Dentro s e colocan l as directivas

robóticos

continua ción se desc riben:

para prop orcionar info rmación de

la página

a los busca dores

que a

de Internet y otras dir ectivas com o <TITLE>,

<META>, < SCRIPT> y <STYLE>

Directiv a <TITLE>

Enseña

(Browse r)

el nombre

y

de la pág ina que s e muestra

no

el

nombre

con

en la barr a de título

q ue

se

guarda

<TITLE> Titulo de l a página</ TITLE>

<TITLE > Titulo de l a página</ T ITLE> del nave g ador el ar c

del naveg ador el arc hivo.

Directiv a <META>

Proporc ona inform ación par a que los

yahoo.c om, A contin uación se

programa s de búsq ueda (co mo google. com,

gina.

altavista. com)

encuen tren

nuestra

da un ejem plo de la a plicación d e la directiv a META:

un ejem plo de la a p licación d e la directi v a META: Directiv

Directiv a <SCRIP T> (Este no

es lengua je HTML, y solo se da rá un ejem plo)

Es empl eada cuand o agregamo s programa s con el len guaje JAVA

visuales en la página

y acciones .

SCRIP, pa ra incluir ef ectos

Ejemplo:

Mouse s obre ello.

Las instruc ciones des critas abajo,

cambian e l texto de lo s enlaces

a rojo al pa sar el

<style>

 

<!--a:hover{ color:RED;

font-w eight:;

}-->

</style>

Directiv a <STYLE >

Se utiliza para coloc ar Hojas de Estilo en Ca scada (CSS ).

Ejemplo: Las instruc ciones desc ritas abajo, indican los los texto s de la págin a.

atributos y c aracterística s de la fuen te de

<STYLE >

P

{font-

family:Arial;

font-si ze:12pt;

color:red;

backg round-color :lime}

</STYLE >

Escriba

Write o

las siguie

tes instruc ciones en

block de no tas.

un editor

de textos

simple co mo Word p ad o

Ejemplo 1: Saltos de línea y de párraf os Ca pítulo 5: R sultado Regla
Ejemplo
1: Saltos de línea y de párraf os
Ca pítulo 5:
R
sultado
Regla 1

Los

re

tornos

d e

carro

que

pon go

no

se

respe tan

en

el

naveg ador,

Lo

únic

o

que

se para

a

lo s

textos

son

las

d irectivas

<P>

y

la

directiva

<Br>

Siendo

<P> la dire ctiva de fin al de párr afo - Siend o <B> la di rectiva de final de lín ea

Si se de sea dejar obtener va rias líneas en blanco,

directiva

blanco q ue queram os se escr ibe <p><br >

no basta

<p>, o < br>, sino e s necesar io escribirl as juntas,

con repetir varias vec es la o sea, po r cada líne a en

Regla 2 : Todas las directivas deben de

estar Anida das, o sea una dentr o de otra.

A excep ción de las directivas abiertas co mo <br> q ue no nece sitan direc tiva de cier re

Ejemplo :

q ue no nec e sitan direc t iva de cie r re Ejempl o :

Grabar la página ( en el direc torio practi cas-básica s)

Al termi nar de escr ibir el prog rama gráb elo con el n ombre de pagina1.ht ml. Se le p uede

dar c ualquier

nombre

al

archi vo

mien tras

la

extensión

sea

html.

Importa nte: Los n ombres de

archivo n o deben d e tener es pacios en

blanco y

estar

escritos en minúsc ula.

Ca pítulo 6:

¿Cóm o abrir u na págin a Html d

l disco d uro des de Intern et Explor er?

Para vis ualizar el resultado de tu prim era págin a en:

a) Para Internet Ex plorer, deb es de hace r lo siguien te: Entrar a Internet E xplorer

Seleccio nar el arch ivo, y dar c lick en el b otón abrir

B) Para Netscape

Navigator:

debes de h acer lo sig uiente

Entrar a Netscape Navigator: Selecciona r el archivo o, y dar clic k en el bot ón abrir

Teniend o el sigui ente result ado:

el bot ó n abrir Tenien d o el sigui e nte resul t ado: Directiv

Directiv a <BODY>

sección

contenid o de nuest ra página. La dir ectiva <B ODY> ad mite vari os atribu tos, los

Define

el cuerpo

del texto

d el

docum ento, es la

BGCOL OR=color d e fondo

TEXT=

color del te xto de la p ágina

LINK=co lor del text o o link de enlace

VLINK= color del te xto o link d e enlace v isitado

ALINK= color del te xto o link d e enlace a ctivo

BACKG ROUND="i magen de fondo"

Ejemplo :

principal e n la cual

más

im portantes

va

el

son:

<BODY BGCOLOR =black tex t=white lin k=blue vlin k=red>

Fija el c olor del fon do negro,

el texto bla nco, el enla ce azul y e l enlace vi sitado rojo

Capítulo 7:

Dar Formato Básico a una página Web

Colores de fondo y texto de la página

Para cambiar el color de fondo de la página

El comando BGCOLOR para cambiar el color del fondo va dentro de la directiva inicial de <Body>, de la siguiente manera:

<BODY BGCOLOR="Código del color">

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

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

Para asignar el color del texto de la página

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

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

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

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

Para colocar una imagen de fondo.

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

<body BACKGROUND="swirlies.gif">

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

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

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

Para aplicar Titulos

Capítulo 8:

Títulos

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 lógico y el estilo físico. El estilo físico literalmente cambia los caracteres, no así el estilo lógico que solo cambia la apariencia de los mismos. En el estilo lógico la apariencia de los caracteres varía de acuerdo a cada Browser, ya que cada uno de ellos tiene una forma diferente de tratar el texto.

Estilo fisicos

Para aplicar Negritas (bold)

<B>texto en negritas</B> Para aplicar Cursivas (Italic <I>texto en cursivas</I> Para aplicar Subrayado. (Underline) <U>texto subrayado</U> Para aplicar letra grande <BIG> Letras grandes</BIG> Para aplicar letra pequeña <SMALL>Letras pequeñas</SMALL> Para aplicar subíndices <SUB>texto en subíndice </SUB> Para aplicar índices (Superíndices) <SUP> Superíndice </SUP> Para aplicar letra tipográfica

<TT>Texto</TT>

(Este tipo de letra se parece al de una maquina de escribir.)

Para aplicar letra tachada

<S>Texto</S>

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

Estilos lógicos

Para aplicar texto fuerte.

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

Para centrar textos o párrafos

Aplique la directiva <center> Texto centrado </center>

Usualmente a los encabezados se les aplica centrado, por ejemplo:

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

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

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

Resulta do Grábal o visuali z a los resu l tados con el n ombre

Resulta do

Grábalo

visualiz a los resu ltados

con el n ombre de

página2. html

en

el directo rio practic as-format os y

Ca pítulo 9:

Ti pos y tam años de fuentes

Para ca mbiar el ta maño de l a fuente

Existen

dos forma s de camb iar el tam año de let ra a la pá gina, una

manera es

con

directiva

(cerrada)

<font>

<\font>, la

cual se uti liza para c ambiar el t amaño de

letra

por

rrafos,

la

otra

form a

con

d irectiva

(a bierta)

< BASEFON T

SIZE=" valor

numéri

o">, se ut iliza para c ambiar el t amaño de l etra por de fecto de to da la págin a.

Para ca mbiar el ta maño de l a letra tod o el docu mento.

Se utiliz a la direc tiva <BAS EFONT S IZE="valo r numéric o"> como <BASE FONT SIZE ="5">

en el eje mplo

Hace qu e el docu mento adop te un tam año de letr a tamaño

texto qu e aparezc a después

5 por defe cto para to do el

de la dire ctiva

de esta di rectiva. Si

lo ponemo s después

<BODY > (inmediat amente de spués a és ta), la mod ificación d el tamaño todo el d ocumento:

<BODY > <BASEF ONT SIZE= "5">

de letra afe cta a

Para ca mbiar el ta maño de l a fuente p or párrafo s.

Se utiliz a las siguie ntes direct ivas:

<FONT SIZE=No. de fuente> Texto </F ONT>

Las fuen tes tienen 7 tamaños :

Las pod rás Observ ar en el sig uiente eje mplo:

En un a rchivo nue vo realiza l a siguiente codificació ón dentro d e la secció n de cuerp o de la págin a en el terc er ejemplo (página3.h tml)

o de la págin a en el terc er ejemplo (página3. h tml) El resul tado

El resul tado se ve rá como s igue

(página3. h tml) El resul tado se v e rá como s igue Nota: Si se

Nota:

Si se ut ilizan título s, en un t exto deter minado, no

mismo t exto, ya qu e el titulo da la orde n para un t amaño det erminado

size=No .> estarí a dando

se emple a <font siz e=No.> pa ra el

<font

de letra y

de

la

or den

par a

otro

tamaño

letra .

La direc tiva <FON T> tiene otr os paráme tros COLO R="color d el texto" y FACE="no mbre de la fue nte"

Ejemplo : <font si ze="3" col or=blue fa ce="times tamaño 3, de fuent e tipo time s new roma n</font>

new rom an">Texto

de color

azul,

Para ca mbiar el ta maño de l a fuente p or párrafo s. (Segun do método )

El

tam año

de

la

fuente

por

de fecto

(pr eestablecid o)

es

d e

tamañ o

3.

Si dese

mos aume ntar el tam año al sigu iente, tene mos las si guientes do s maneras :

<FONT

SIZE="4">

</FONT > 1er. Mé todo

<FONT SIZE="+1" >

</FONT > 2do. Mét odo (El ta maño está ndar es 3 +

1 nos da t amaño 4)

Otro eje mplo de c omandos equivalen tes

SIZE="2">

<FONT SIZE="-1">

<FONT

</FONT > 1er. Mé todo </FONT > 2do. Mét odo

(El ta maño está ndar es 3 - 1 nos da t amaño 2)

Ca pítulo 10 :

Texto P reformat eado

Las dire ctivas (<P

colocad o entre est as 2 direc tivas, con

RE>

</PR

E>) permi te visualiz ar el texto

el formato

tal y com o se encu entre

los retorno s de

que desee mos, con

carro sin

ser espec ificados po r <BR>, y l as tabulaci ones

NOTA:

No es r ecomendab le usar ta bulaciones,

medio d e la barra

mismo e spacio de tabulador y

del nave gador emp leado.

(por

no todos lo s browsers s tienen pr eestablecid os el

podría m odificarnos la distribuc ión del tex to dependi endo

en su lug ar es prefe rible pone r espacios,

de espacia r), ya que

Escribe y graba c on el nom bre de pag ina4.html en el dire ctorio prac ticas-form atos

la codif icación de l siguiente

ejemplo.

Visualiz a detenid amente los

resultado s

Ejempl o: 4

atos la codi f i cación d e l siguient e ejemplo. Visuali z a deten

Nota: S e recomie nda realiz ar la tabl a en Wor d, para p osteriorme nte pegarl a en

arachno philia

Alineac ión de pár rafos. (De echa, izqu ierda y ce ntro y jus tificado)

Estas pr opiedades son de la

irectiva <P >

</P>

Alinean el texto en la pantalla a la izquie rda, derech a, centrad o y justifica do.

<P ALIG N= "cente r"> texto c entrado </ p>

<P ALIG N= "left"> texto aline ado a la iz quierda </ p>

<P ALIG N= "right "> texto ali neado a la derecha </ p>

<P ALIG N= "justif y"> texto j ustificado < /p>

Escribe y graba c on el nom bre de pag ina5.html en el dire ctorio prac tica-forma to la codifica ción del s iguiente e jemplo.

Visualiz a detenid amente los

resultado s

Ejempl o 5

del s iguiente e jemplo. Visuali z a detenid amente los resultad o s Ejempl o

El resul tado se ve rá como s igue

del s iguiente e jemplo. Visuali z a detenid amente los resultad o s Ejempl o

Ca pítulo 11 :

Línea s Divisor ias

Son Sep aradores d e texto en forma de L íneas Hori zontales.

La direc tiva es: <H R> (Horizo ntal Rule) y

<HR>

es una di rectiva abie rta.

Por defe cto nos da una línea de una altu ra=1 y una anchura= 100%

Pudiend o cambiar alto, ancho alineación y color de la misma.

Ejemplo :

<HR SIZ E=5 WIDT H="75%"

OLOR="# ff0000" ALI GN = CEN TER>

SIZE="val or numerico"

Permite indic ar el grosor d e la línea en cu estión. (valor por defecto es 1)

WIDTH="v alor

Permite indi car la anchura

en pixels o

el tanto por ci ento del anch o de la pantal la que

numérico"

ocupará la lí nea.(valor por defecto es 100 %)

ALIGN="L EFT | CENTE R Determina l a forma de a linear la líne a en la pant alla (sus valo res respectivo s son

| RIGTH"

izquierda, de recha y centro ). Por defecto el valor, es de alineado a la i zquierda.)

Escribe

codifica ción del sig uiente ejem plo.

y graba c on el nom bre de pa gina6.html

Visualiz a detenid

mente los

resultado s

en el dire ectorio pra ctica-forma to la

Ejemplo 6:

o s en el dir e e ctorio pra ctica-forma to la Ejempl o 6: Resum

Resum en de dire ctivas y at ributos de formatos

o s en el dir e e ctorio pra ctica-forma to la Ejempl o 6: Resum
o s en el dir e e ctorio pra ctica-forma to la Ejempl o 6: Resum

Ca pítulo 12 :

Cr eación d e listas e n HTML

Estas lis tas son p arecidas a tipos de lista.

numeració n y viñeta s en WOR D, teniend o los sigui entes

Listas n umeradas Listas a nidadas

(ordenadas ) Listas c on viñetas

(desorden adas) Lista s de defin ición

Listas n umeradas

Estas li stas gene ran una n umeración

letras) t ienen la d irectiva ce rrada <OL > </OL>

ordenad as, y se uti liza para in iciar la list a.

automátic a, (Númer os arábig os, roman os, o

listas

>(Ordered

Lists) que

significa

Dentro d el bloque de la lista

item) qu e significa elemento d e lista

cada elem ento debe

de llevar la directiva a bierta <LI > (list

La estru ctura de un a lista ord enada es la

Ejempl o 7:

siguiente.

de u n a lista ord e nada es l a Ejempl o 7: siguiente. Escribe

Escribe

y graba c on el nom bre de pa gina7.html

en un nu evo direct orio de no mbre

práctica

lista

s,

la

cod ificación

del

ejemplo

ant erior.

Visualiz a detenida mente los r esultados

Atributo s de lista s

TYPE=" Carácter"

Si se d esea camb iar el tipo

este deb e de escri birse dentr o de la dire ctiva <OL> , o sea <O L TYPE=" Carácter">

de numer ación se e mplea el a tributo TY PE="Carác ter",

Teniend o los siguie ntes tipos.

<OL TY PE ="A">

Con est e atributo l a lista com ienza con siguient es letras de l alfabeto.

la letra A y el resto

de los ele mentos co n las

<OL TY PE ="a">

Con est e atributo

siguient es letras de l alfabeto. Es igual q ue la lista a nterior con la única d iferencia q ue es

en minú scula.

de los ele mentos co n las

la lista com ienza con

la letra a

y el resto

<OL TY PE ="1">

Con est e atributo l a lista num erada com ienza con defecto.

<OL TY PE ="I">

el número

1. Este e s el atribut o por

Con est e atributo l a lista num erada comi enza con e l número r omano I.

<OL TY PE ="i">

Con est e atributo l a lista num erada com ienza con anterior pero en mi núscula.

VALUE ="valor nu mérico"

el número

romano i. I gual que la

lista

Es el at ributo que se utiliza

para indica r el valor q ue debe d e tener el

elemento de la

lista nu merada., e ste atribut o se coloc a dentro d e la direct iva <LI>,

quedando

de la

siguient e manera.

<LI VALUE ="valor n umérico">

 

START ="número" Es el a tributo que

se utiliza

para indi car

el valo r inicial

q ue

debe

d e tener la

lista

numera da. Por def ecto es 1.

Ejemplo : 8 (TYPE )

Copia l

codificac ión de la l ista anteri or y realiz a los cam bios

ión de la l ista anteri or y realiz a los cam bios Graba l o

Graba l os cambio s y visuali za detenid amente lo s resultad os

Ejemplo : 9 (STAR T y VALU E)

Copia l

codificac ión de la l ista anteri or y realiz a los cam bios

ión de la l ista anteri or y realiz a los cam bios Graba l o

Graba l os cambio s y visuali za detenid amente lo s resultad os

En el ej emplo ante rior el atrib uto STAR T="10", ord ena al bro wser inicia r la numer ación

VALUE ="2 0" cambio el número del elemen to a 20.

en 10 y el atributo

Ejemplo s: 10 (TY PE, START VALUE)

Copia l

codificac ión de la l ista anteri or y realiz a los cam bios

ión de la l ista anteri or y realiz a los cam bios Graba l o

Graba l os cambio s y visuali za detenid amente lo s resultad os

En el ej emplo ant erior el atri buto TYPE ="I", indic a que la n umeración

atributo

START=" 5", orden a al brows er iniciar l a numerac ión en el

es roman a, el

el

numero V

y

Ca pítulo 13 :

Listas con viñe tas

Estas lis tas genera n viñetas

Word, e stas listas

de diferent es tipos, m uy parecid as a las qu e se utiliza n en

son de tipo desordena das.

Estas li stas tienen

la directiv a cerrada

<UL>

<\U UL> (unord ered lists) , significa

listas

desorde nadas y se utiliza par a iniciar est e tipo de li sta.

 

La estru ctura de un a lista con viñetas (d esordenad a) es la sig uiente.

 

Ejempl o Copia l a codificac ión de la l ista anteri or y realiz a los cam bios

 

11:

 
   
 

Graba l os cambio s y visuali za detenid amente lo s resultad os

TYPE=" Nombre_d e_Viñeta"

 

Si

se

desea

cambiar

el

tipo

de

v iñeta

se

emplea

el

atr ibuto

TYPE=" Nombre_d e_Viñeta" , este deb e de escri birse dentr o de la di rectiva <U L>, o

sea <UL

TYPE="V iñeta">

Nota: Lo s nombres de las viñ etas debe e scribirse f orzosamen te en minú sculas

Se tiene n los sigui

ntes tipos.

<UL TY PE ="disc" >

Este es el atributo que muestr a un circul o con relle no negro, e s el que da

<UL TY PE ="circl e">

por defec to.

Este es el atributo que muestr a un circul o vacío.

<UL TY PE ="squa re">

Este es el atributo que muestr a un pequ eño cuadro negro.

Ejempl o 12

Copia l a codificac ión de la l ista anteri or y realiz a los cam bios

ión de la l i sta anteri or y realiz a los cam bios Graba l

Graba l os cambio s y visuali za detenid amente lo s resultad os

Ca pítulo 14 :

Lista s Anidad as

Las lista s anidada s, son lista s de varios de listas .

niveles q ue pueden

combinar diferentes tipos

Ejemplo

13

Inicia u n nuevo a chivo y e scribe la c odificació n siguient e, grábalo con el no mbre

de prac tica 8 en

l directori o practica s-listas

cribe la c odificació n siguient e, grábalo con el no m bre de prac t

Ca pítulo 15 :

Listas de defini ción

Estas lis tas gener an listas de

<DL> </DL> (defi nition list, l ista de defi nición), la que se utili za para da r inicio a la

de defin ición.

elemento s con sang grías y pos een una d irectiva ce rrada

lista

Para co locar el t ermino se

Para col ocar la def inición se u tiliza la dir ectiva abie rta <DT> (d irectiva de definición) .

utiliza la

directiva a bierta <D T> (Directi va de ter mino)

Ejempl o 14

Inicia u n nuevo a rchivo y e scribe la c odificació n siguient e, grábalo con el no mbre

de prac tica 9 en

el director io practica s-listas

bre de prac tica 9 en e l director i o practic a s-listas La direc

La direc tiva <DL> , tiene el

francesa s al texto , con la s alvedad qu e solo fun ciona de

pequeñ

parámetro

compact,

que se e mplea par a dar san grías

esa maner a con tem imos

s, para po der entend er esto se presenta el siguiente ejemplo.

Ejempl o 15 escrib e la codifi cación sig uiente

Ejempl o 15 escri b e la codif i cación si g uiente Graba l o

Graba l os cambio s y visuali za detenid amente lo s resultad os

El espac io que se

tamaño de ellos y d el tamaño de letra de l browser) .

obtiene de sangría es pequeño ( de 3 a 5 ca racteres, d ependiend o del

bserve

en el result ado que e n el primer

párrafo la a definición

paso a la segunda l ínea.

Ca pítulo 16 :

Creació n de san grías

Se pued e obtener el mismo r esultado qu e las listas

<DIR>

</DIR> , y con la dire ctiva <bloc kquote>.

de definic ión con la directiva abierta

<BLOC KQUOTE>

</BLOC KQUOTE> Es Texto i ndentado.

<DIR>

</DIR> fun ciona com o un tabula dor.

Ejempl o 16 Copia l a codificac ión del ej emplo 14 y realiza lo s cambio s

a codificac ión del ej e mplo 14 y realiza lo s cambio s Graba l

Graba l os cambio s y visuali za detenid amente lo s resultad os

Ejempl o 17 Copia l a codificac ión anteri or y realiz a los cam bios

l a codificac ión anteri or y realiz a los cam bios Como s e puede

Como s e puede ap reciar el re sultado de ambos eje mplos es i gual.

Graba l os cambio s y visuali za detenid amente lo s resultad os

Ejempl o 18

Inicia u n nuevo a rchivo y e scribe la c odificació n siguient e, grábalo con el no mbre de prac tica 10 en el directo rio practic as-listas

de prac tica 10 en el directo r io practi c as-listas Cap ítulo 1 7:

Cap ítulo 1 7:

Fo rmato de im ágene s

Los nav egadores s oportan do s tipos de f ormatos d e imágenes s GIF y JP EG.

Estos fo rmatos pe rmiten com primir los menos l entas de c argar.

Caracte rísticas de

las imág enes GIF.

1.- Soport an Animacion es.

2.- Soport an Transpare ncias:

3.- Efecto de difusionad o o entrelaza do:

4.- Solo so porta 255 col ores.

5.- Compri me las imáge nes

datos de

las imágen nes, de ma nera que

Genera gráfico s con movimie nto

sean

Esto hace que se muestre el fondo sobre e l que se apoya la

i

magen

Funciona de

manera

que

conforme

s

e

va

cargan do

va

mostrando la

imagen

s

nítidamente,

hasta

alcan zar

la

resolución tota l de la misma

Se emplea en

fotografías ya que estas requ ieren muchos colores

dibujos, no

se recomiend a este format o para

Esto es muy ú til para emple o de Internet,

de transmisión

que estos suel en ser archivo s grandes.

ya que la vel ocidad

es muy lenta para imágene s, sonido y víd eo, ya

Características de las imágenes JPEG

Soporta un máximo de 16 millones de colores. Se utiliza para imágenes de fotografías

Alta compresión de imágenes.

Este formato tiene mejor compresión que el Gif.

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

Algunos de los programas que se recomiendan para la edición de imágenes:

Los que puedes encontrar y bajar de Internet se indican con *

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

3d.

Capítulo 18:

Colocación de imágenes en la página Web

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

<IMG SRC="Ruta/imagen">

<IMG> Indica la inserción de una imagen en una página HTML

SRC="Ruta/Imagen" Se utiliza para indicar la ruta y el nombre de gráfico a mostrar:

Ejemplo:

<IMG SRC="imágenes/rosa.gif">

El comando anterior carga en la pagina la imagen rosa del directorio imágenes

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

BORDER= "Tamaño numérico"

HEIGHT= "Tamaño numérico"

WIDTH= "Tamaño numérico"

Se refiere al borde del gráfico, el número 1 indica borde y el numero 0 significa sin borde, por defecto el valor es 1

Indica el alto de la imagen en puntos o pixels, o en porcentaje. Se emplea para cambiar el tamaño original del gráfico.

Indica el ancho de la imagen en puntos (pixels) o en porcentaje. Se emplea para variar el tamaño de la imagen original.

Tip:

ALT= "Texto a mostrar"

ALIGN="top | middle | bottom"

Bottom

Top

Center ó Middle

Crea un gráfico pequeño que sea rápido de cargar y amplificarlo con HEIGHT y WIDTH, para su visualización

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 línea a un lado de la imagen. Si se desea textos más largos, se emplean tablas que más adelante se ilustraran.

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

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

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

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

Colocación de borde en una imagen

Sintaxis:

<IMG SRC="Ruta/imagen" BORDER=tamaño ALT="texto a mostrar">

Ejemplo:

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

Escribe el ejemplo anterior dentro de la sección <body> de en un nuevo archivo de

nombreimágenes1.html.

Visualiza el resultado.

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

Capítulo 19:

Modificación del tamaño de la imagen

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

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

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

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

Alineación de texto adyacente de una imagen.

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

Agrega

resultados.

las

siguientes

líneas

en

el

archivo

imágenes.html

y

observa

los

<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

Ca pítulo 20 :

En laces en una pág ina Web

Un hipe renlace (en lace) es la referencia a otros do cumentos Html, gráfi cos, direcci ones

Estos hipe renlaces s on las pal abras

subraya das, boton es o gráfico s a los qu e al darle C lick muest ran otra pá gina.

de E-m ail, u objet os (archiv os Zip, Wo rd, etc.).

El nomb re de este lenguaje e s HTML, ( Lenguaje c reador de

la carac terística m ás importan te de las p áginas We b es precis amente el Hiperenlac e.

Hipertexto) , se debe a

que

Nota: S e debe de e scribir en

hace ref erencia en los hipere nlaces, ya que alguno s servidor es en los q ue se aloja n las

minúsculas todos los nombres d e los archiv os a los q ue se

páginas no acepta n mayúscul as.

Tip:

El conte nido de un

en una

sitio se d ebe de de sglosar en

subtemas,

colocando

cada sub tema

página dife rente, unie ndo todas l as páginas por medio de hiperen laces.

La direc tiva para u n hiperenla ce es:

<A HRE F="dir-url "> Texto o imagen </ A>

En dond e:

" > Texto o imagen < / A> En don d e: Tipos d e enlace

Tipos d e enlace

Enlace a

lugar con creto dentr o de otra pá gina de nu estro sitio. E nlace a un a página ex terna. Enlac e por

medio de

a una

a un

otra págin a de nuestr o sitio. Enla ce a otra s ección de la

un gráfico

Enlace a u na direcció n de E-mail,

misma pá gina Enlace

por medio de un gráfi co. Enlace

dirección de E-mail. Enlace a un objeto (doc umento zip ó Word)

Enlace otra págin a de nuest ro sitio.

Un enla ce es la

conecta das entre s i, por hiper enlaces.

conexión

d e una pag ina

a

otra .

Para da r ejemplo

enlace a

a un enla ce. Supon gamos que

la página tres.

Agregu e la siguie nte línea a la pagina 2.html.

<A HRE F="pagina 3.html">E jemplo 3 < /A>

Un sitio

es

en la pa gina

un gru po de pa ginas

dos q uiera hac er un

Grabe la página con el nombre de pagina3-1.html.

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

Enlace dentro de la misma página.

En caso que tengamos una página extensa que contenga varios temas, es necesario crear enlaces a los diferentes temas contenidos en la página.

Para realizar esto es necesario marcar el lugar exacto con un nombre de referencia a cada tema o lugar al que se desee saltar

La directiva para enlazar un tema de la misma página es:

<A HREF="#marca">Tema a mostrar" </A>

dirección interna.

"#marca" es el nombre de la referencia a la que se desee saltar dentro de la página.

es:

El

El

signo

#

le

indica

al

browser

con

que

un

se

trata

de

una

lugar

atributo

para

marcar

nombre

del

exacto

a

<A NAME="marca"> </A>

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

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

Podemos tener una combinación en la que nos podemos enlazar una página y a un punto concreto dentro de ella.

Supongamos que deseamos enlazar a la página de nombre capitulo2.html y dentro de ella al tema 4.

La directiva es la siguiente:

<A HREF="capitulo2.html#tema4">Tema 4 del capítulo 2 </A>

Dentro de la pagina capitulo2.html debemos de tener marcado el lugar con:

<A NAME="tema4">Tema 4</A>

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

menu1.html

Enlace a una página externa.

Muchas veces nosotros queremos hacer referencia una pagina o sitio de otra persona. La directiva para hacerlo es muy parecida a las anteriores.

Ejemplo:

<h1> Motores de Búsqueda </h1>

<A HREF="http://www.yahoo.com">Yahoo</A>

<A HREF="http://www.altavista.digital.com">Alta Vista</A>

<A HREF="http://www.lycos.com">Lycos</A>

Grabe el ejemplo anterior con el nombre enlaces-ext.html

Vea y analice el ejemplo: enlaces-ext.html

Capítulo 21:

Enlace por medio de un gráfico

Se puede utilizar un gráfico en lugar de un texto para enlazar las páginas.

La directiva utilizada para esto es:

<A HREF="dir-url"> imagen </A>

Ejemplos: Escriba el codigo siguiente en el archivo enlace-ext.html

<A HREF="enlaces-ext.html" ><IMG SRC="imagen/rosa.gif"> </A>

<p>

<a HREF="enlaces-ext.html"><img SRC="imagen/rosa.gif" border="0">Buscadores</a>

Vea y analice el ejemplo: enlaces-graf.html

Observe que en la segunda línea se incluyó un texto.

Enlace a una dirección de E-mail.

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

La directiva es la siguiente

<A HREF=mailto:dir_Email>Texto</A>

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

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

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

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

Ejemplo:

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

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

Enlace a un objeto (documento zip ó Word)

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

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

Ejemplos:

<A

HREF="citas.doc">Bajar

el

archivo

Citas

</A>

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

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

Capítulo 22:

Tablas

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

Crear u na tabla

La estru ctura de un a tabla y s us directiv as para cre arlas son:

Ejempl o: tabla con

una celda

Nota: C omo mínim o se tiene

<TABLE > (Inicio T abla)

<TR> (I nicia rengló n

<TD> (Inicia celd a)

Text o de la ce lda

</TD> (Fin celda )

</TR> ( Fin renglón )

</TABL E> (Fin Ta bla)

Resulta do

Texto de

celda

que tener u n renglón

Colocar un borde sobre la t abla

y una celda

para una tabla

El atribu to BORDE R=1 se vis ualiza un b orde en tab la

El atribu to BORDE R=0 quita

Ejempl os:

< TABL E BORDER ="1">

<TR>

<TD>

Texto de la celda

</TD>

</TR>

</TABL E>

Resulta do

el borde de la tabla.

<TD> Texto de la celd a </TD> </TR> </TABL E> Resulta do e l borde de

Aument ar el grues or del bord e

<TABLE

<TR>

<TD>

BORDER ="8" >

Texto de la celda

</TD>

</TR>

</TABL E>

Resulta do

</TR> </TABL E> Resulta do Ca pítulo 23 : Ca mbiar el ancho d e la

Ca pítulo 23 :

Ca mbiar el ancho d e la tabla

El ancho

de la tabl a se puede cambiar e n porcentaj e o en pixe ls (puntos)

El atribu to WIDTH= "100%" ca mbia el an cho de la t abla al 100 %

El atribu to WIDTH= "600" cam bia el anch o de la tab la a 600 pi xels.

Ejempl os:

<TABLE

BORDER ="1" WIDT H="100%" >

<TR>

<TD>

Texto de la celda

</TD>

</TR>

</TABL E>

Resulta do

</TR> </TABL E> Resulta do <TABL E <TR> <TD> BORDER ="1"

<TABLE

<TR>

<TD>

BORDER ="1" WIDT H="50%" >

Texto de la celda

</TD>

</TR>

</TABL E>

Resulta do

</TR> </TABL E> Resulta do <TABL E <TR> <TD> BORDER ="1"

<TABLE

<TR>

<TD>

BORDER ="1" WIDT H="300" >

Texto de la celda

</TD>

</TR>

</TABL E>

Resulta do

</TR> </TABL E> Resulta do Ca pítulo 24 : C ambiar e l alto de la

Ca pítulo 24 :

C ambiar e l alto de la tabla

<TABLE

BORDER ="3" WIDT H="200" H EIGHT="10 0" >

<TR> <TD> Texto de la

</TR>

</TABL E>

celda </T D>

Resulta do

0" > <TR> <TD> Texto de l a </TR> </TABL E> celda </T D> Resulta do

Alineac ión Horizo ntal (centr o derecha e izquierd a)

Alineac ión centra da ALIGN ="center"

Alineac ión derech a

ALIGN ="right"

Alineac ión izquie da ALIGN ="left"

Alineac ión centra da: align= "center"

<TABLE

BORDER ="3" WIDT H="200" H EIGHT="10 0">

<TR> <TD a lign="cent er" > Text o de la celd a </TD>

</TR>

</TABL E>

Resulta do

a </TD> </TR> </TABL E> Resulta do Alineac i ón derec h a : align=" right"