Diseño de Pagina Web Con HTML

7/24/2019 Diseo de Pagina Web Con HTML

1/42

INFORMATICA

UNIDAD 2 DISEO DE PAGINA WEB CON HTML

INTRODUCCIN

En esta unidad conocers y aplicars el lenguaje utilizado para la creacin de pginas web: HTML(Hyper Text Markup Language! "urante su estudio aprenders los conceptos bsicos ynecesarios para la creacin de una pgina web co#o: $%u& es una pgina' o $%u& erra#ientasnecesitas para su creacin') asta cuestiones co#o la incorporacin de audio y *ideo paraacerla #s din#ica y atracti*a!

En el pri#er te#a aprenders la estructura bsica de una pgina web) esto es) las eti%uetas %uenunca deben +altar y el orden a seguir para su adecuada elaboracin! El segundo te#a es #uyenri%uecedor) ya %ue ars uso de di*ersas eti%uetas) %ue entre otras cosas) te per#itirndestacar t,tulos) agregar color) ta#a-o y +or#a) as, co#o elaborar listas! El te#a de tablas ei#genes) es de gran utilidad para la organizacin de la in+or#acin y la integracin de gr.cos)con el .n de acer #s lla#ati*a tu pgina/ para ello) aprenders a de.nir las eti%uetas y *erslos di*ersos ele#entos %ue puedes incluir en una pgina web! El te#a de *,nculos te ayudar aenri%uecer la in+or#acin %ue se presenta en la pgina aciendo re+erencia a otros docu#entosubicados en cual%uier parte del #undo! 0inal#ente) con el te#a de audio y *ideo podrs agregarsonidos e i#genes en #o*i#iento!

1on todos estos ele#entos logrars %ue tu pgina web tenga una buena presentacin a losinternautas %ue deseen *isitarla! 2de#s de aprender los atributos de las eti%uetas (tags %uecon+or#an el lenguaje HTML!

En cada te#a de la unidad con.r#ars tus conoci#ientos con las di*ersas acti*idades dise-adaspara tu aprendizaje) ya %ue la #ejor +or#a de aprender HTML es practicando! Estas acti*idadessern de dos tipos:

3! "ise-adas para eje#pli.car la insercin de cada eti%ueta HTML en la pgina web) para %ue

posterior#ente se practi%uen/ representadas por el tipo de e+ecto a *isualizar (insertar un textoen cursi*as) agregar una tabla) etc!

4! "ise-adas para de#ostrar tu do#inio del HTML) se-aladas co#o acti*idades de e*aluacin!

"urante la realizacin de las acti*idades te in*ita#os a participar en los +oros progra#ados porcada te#a de la unidad) en los %ue podrs co#partir con tus co#pa-eros y el asesor einterca#bio de conoci#ientos) resolucin de dudas) obser*aciones y sugerencias) %ue sin dudaapoyarn tu aprendizaje!

2l t&r#ino de la unidad sers capaz de crear tu propia pgina web) to#ando en consideracin losprincipios de creacin de pginas web utilizando el lenguaje HTML (lenguaje de #arcado de

ipertexto!


2/42

LA WORLD WIDE WEB

La 5orld 5ide 5eb (555) ta#bi&n conocida con el no#bre de 5eb es un siste#a dena*egacin %ue per#ite +unda#ental#ente publicar) consultar y dado el caso) extraerele#entos de in+or#acin ubicados en las lla#adas 6pginas web6 o 6docu#entos6) las cualesestn ospedadas en #iles de ser*idores %ue se encuentran distribuidos en todo el planeta!

La 5orld 5ide 5eb es la parte #s popular de 7nternet por%ue per#ite establecer) para %uienesla consultan) una co#unicacin rica y di*ersa en contenidos debido a %ue la in+or#acin lapuede presentar usando recursos tales co#o: texto) i#genes) gr.cos) +otos) ani#aciones)sonido y *ideo!

8re*e istoria de la 5ebLa 5orld 5ide 5eb +ue inicial#ente desarrollada en 399 por Ti# 8erners;Lee en el 1Eart,culas) co#o un siste#a de co#unicacin de uso sencillo eindependiente de la plata+or#a co#putacional) basado en el lenguaje HTML (Hyper Text MarkupLanguage) por sus siglas en ingl&s! HTML es un lenguaje de #arcado de eti%uetas %ue describenun docu#ento elaborado con ipertexto (texto con enlaces a otras partes del docu#ento o aotros docu#entos) lenguaje %ue pro+undizars #s adelante!

2ctual#ente) la 5eb es ad#inistrada por la 5orld 5ide 5eb 1onsortiu# (1onsorcio de la 5eb o5?1) en ingl&s! El 5?1 centra su trabajo en desarrollar tareas de educacin) di+usin ydesarrollo de so+tware! 1on el objeti*o de %ue la 5eb alcance su #xi#o potencial) las

tecnolog,as 5eb #s destacadas deben ser co#patibles entre s, y per#itir %ue cual%uierardware y so+tware para acceder a la 5eb +uncione conjunta#ente!


3/42

CARACTERSTICAS DE LA WEB

La 5eb trabaja bajo el es%ue#a de una ar%uitectura deno#inada cliente;ser*idor! Laco#putadora personal es el cliente y la co#putadora re#ota %ue alberga los arci*oselectrnicos es el ser*idor! 2 continuacin te explica#os c#o +unciona:

>or ello) se re%uieren los siguientes ele#entos t&cnicos:

3! @na co#putadora personal!4! @na conexin a un pro*eedor de ser*icios de 7nternet!?! @n conjunto de co#putadoras lla#adas ser*idores %ue albergan in+or#acin digital!A! Los enrutadores y con#utadores) cuya +uncin es dirigir el Bujo de la in+or#acin!C! @n na*egador de 7nternet!

La 5eb se #antiene coesionada gracias a los:


4/42

Debido a estas caractersticas, en la Web se navega o explora a travs de pginas de informacin, conforme a lo quele desee consultar el usuario en un determinado momento. El acceso a estas pginas es mediante un navegador(broser! el cual se encuentra instalado en el cliente, es decir, en la computadora personal. En la red existen diversos

navegadores, siendo los ms populares"

#ara traba$ar, los navegadores necesitan que los documentos o pginas estn en el lengua$e %&'. Es precisamenteeste lengua$e el que aprenders en la unidad.

PGINAS WEBEn 7nternet puedes obtener in+or#acin de los #s *ariados te#as a cual%uier d,a) ora y sinnecesidad de #o*erte de un espacio +,sico! La 5eb per#ite acceder de +or#a si#ple e intuiti*a atoda esta in+or#acin a tra*&s de las pginas web! >ero) $%u& es una pgina web'

)#or qu aprender %&' si *a existen en el mercado de softare muc+os programas de diseo de pginas Web que

pueden +acer el traba$o por nosotros-


5/42

1o#o puedes co#prender) las *entajas %ue se pueden tener al aprender HTML son di*ersas) yparticular#ente) ser la base para el estudio de otros lenguajes #s *erstiles y co#plejos parael dise-o de pginas 5eb!

>ara crear una pgina web se re%uiere una planeacin y el conoci#iento de su estructura:

Estructura bsica de una pgina web

@n pgina web (o docu#ento HTML est +or#ada por dos ele#entos di+erenciados %ue son:

La in+or#acin %ue se #uestra al usuario (persona %ue accede a la pgina web


6/42

as etiquetas (llamadas tags, en ingls!

Caractersticas de las etiquetas


7/42


8/42

1on el propsito de %ue lo aprendido asta el #o#ento te %uede #s claro) realiza la siguienteacti*idad!

Mi pri#era pgina web

1rea una pgina web %ue #uestre una +rase sencilla en pantalla! "a clic a%u, para i#pri#ir lasinstrucciones!

=ota: El proceso descrito en los pasos de este ejercicio son los %ue debes seguirsiste#tica#ente cada *ez %ue se te pida crear una pgina 5eb) la cual debers sal*ar en tucarpeta pginas web de tu disco duro local!

2nlisis de la estructura bsica de una pgina 5eb

Dea#os las eti%uetas %ue e#pleaste en el cdigo de tu pri#era pgina web!


9/42

ETIQUETAS MS USADAS CON HTML

La estructura bsica de una pgina web se enri%uece y a#plia cuando se incorporan otro tipo de

eti%uetas) las cuales #ejoran la +or#a de presentar la in+or#acin) co#o: en+atizar ciertain+or#acin (t,tulos) aplicar +or#ato al texto (negritas) cursi*as) etc!) su organizacin (prra+os*i-etas y tablas e incluir ciertos ele#entos *isuales (i#genes) si#ilar a un docu#ento en5ord! Hars uso de estas eti%uetas durante la elaboracin de di*ersas pginas %ue al#acenarsen tu carpeta pginas web!

2ntes de iniciar) te reco#enda#os lo siguiente:


10/42

1. ETIQUETAS PARA TTULOS

Los t,tulos son una de las principales erra#ientas para estructurar un docu#ento HTMLper#iten organizar el contenido en secciones y subsecciones a con*eniencia del autor) tal co#oar,a#os al redactar un in+or#e o un trabajo escolar! Los siguientes pares de eti%uetas son los%ue estn disponibles para los t,tulos:

>ara %ue *eas c#o +uncionan estas eti%uetas en la prctica) realiza la siguiente acti*idad!

T,tulos

Fbser*a c#o se insertan las eti%uetas de t,tulo en la estructura bsica de la pgina web y su*isualizacin con el na*egador!

"a clic en el botn a*anzar para seguir cada paso!


11/42

2. ETIQUETAS PARA LA ALINEACIN DE ELEMENTOS INDIVIDUALES

>ara alinear un ele#ento o prra+o en la pgina web se usa el atributo align con la eti%ueta de

dico ele#ento) el cual puede to#ar alguno de estos *alores: le+t (iz%uierda) center (centro)rigt (dereca) o justi+y (justi.cado!

>ara eje#pli.car la +uncin de estas eti%uetas realiza la siguiente acti*idad!

2lineacin

Fbser*a c#o se insertan las eti%uetas de alineacin de ele#entos indi*iduales en la estructurabsica de la pgina web y su *isualizacin con el na*egador!

3. ETIQUETAS PARA EL USO DEL COLOR

Todos conoce#os la ga#a de colores existentes) as, co#o la di*ersidad de #atices posibles deun tono espec,.co) por poco %ue este#os interesados en la pintura! >ero) $c#o se losexplica#os a una #%uina'

@na co#putadora no sabe de colores) slo es capaz de entender secuencias de ceros (Gs yunos (3Gs! >or ello) los colores se de.nen #ediante un cdigo exadeci#al! Tran%uil,zateI) no


12/42

es necesario aprenderse de #e#oria todos estos *alores! >uedes utilizar las tablas de coloresdisponibles en 7nternet) en algJn sitio) co#o este Disi8one!

>ara dar color a cual%uier pgina web) se cuentan con dos procedi#ientos a saber:

2! Escritura del no#bre del color

Los 3 colores #s utilizados en 7nternet se pueden indicar con un no#bre #s +cil de recordar)en ingl&s! La siguiente tabla nos #uestra el tipo de color y su e%ui*alente en cdigoexadeci#al) los cuales puedes escribir con #ayJscula o #inJscula!

Tabla de colores para su uso en Internet

1. Aqua #00FFFF 9. Maroon #800000

2. Blac #000000 10. !a" #000080

$. Blue #0000FF 11. %li"e #808000

&. Bro'n #99$$00 12. (urple #800080

). Fusc*ia #FF00FF 1$. +ed #FF0000

,. -ra #808080 1&. il"er #C0C0C0

/. -reen #008000 1). *ite #FFFFFF

8. ie #00FF00 1,. 3ello' #FFFF00

El no#bre de cada color se escribe dentro de los atributos de la eti%ueta Kbody para asignar:

#or e$emplo"


13/42

>ara ilustrar el uso de esta eti%ueta realiza la siguiente acti*idad!

1olores 3

Fbser*a c#o se insertan las eti%uetas de color en la estructura bsica de la pgina web y su*isualizacin con el na*egador!

8! Escritura del cdigo exadeci#al del color

2ora bien) si deseas escribir el cdigo exadeci#al del color) son A partes el %ue lo con+or#an:

3! El signo de nJ#ero NO) para indicar %ue es un *alor exadeci#al!4! Las posiciones 3 y 4 representan el color rojo!?! Las posiciones ? y A representan el color *erde!A! Las posiciones C y representan el color azul!

u*a sintaxis es, por e$emplo"


14/42

1ada par de d,gitos pueden representar asta 4C distintos ni*eles de color) %ue en co#binacincon los otros dos pares nos dan un aproxi#ado de 3 #illones de colores posibles!

2plica estos conoci#ientos con la siguiente acti*idad!

1olores 4

Fbser*a c#o se insertan las eti%uetas de color en la estructura bsica de la pgina web y su*isualizacin con el na*egador!

4. E!"#$%& '%(% &%)*& +$ ),-$% '/((%0*&

1uando esta#os elaborando una pgina web) y %uere#os escribir una prra+o extenso) o bien)%ue aya una separacin entre prra+o y prra+o) HTML nos proporciona las eti%uetas Kbr yKp!

Eti%ueta Kbr

La eti%ueta Kbr produce un salto de l,nea en el punto donde aparece y no es necesario %uelle*e su correspondiente eti%ueta de cierre KPbr! 1uando el na*egador encuentra una eti%uetaKbr crea un salto de l,nea continuando el texto %ue exista despu&s de esa eti%ueta alineado al#argen iz%uierdo) sin producir espacio adicional por arriba o por debajo de la nue*a l,nea) loJnico %ue ace es continuar con el texto en la siguiente l,nea!


15/42

Kbr puede ta#bi&n usarse dentro de otros ele#entos co#o prra+os y ele#entos de una lista!

Eti%ueta Kp

>ara indicar un salto de l,nea se utiliza la eti%ueta Kbr) y para un ca#bio de prra+o (dejar unal,nea en blanco en #edio se utiliza la eti%ueta Kp!

La eti%ueta Kp puede usarse ta#bi&n co#o eti%ueta 6cerrada6 Kp y KPp para indicar losatributos de un prra+o en concreto! 1uando se usa de esta #anera tiene el par#etro align) %ueaprendiste para la 2lineacin de ele#entos indi*idualesO!

7denti.ca las di+erencias entre a#bas eti%uetas e+ectuando las acti*idades siguientes!

Qaltos de l,nea

Fbser*a c#o se insertan las eti%uetas de saltos de l,nea en la estructura bsica de la pginaweb y su resultado .nal con el na*egador!

Qaltos de prra+o

Fbser*a c#o se insertan las eti%uetas de saltos de l,nea en la estructura bsica de la pginaweb y su resultado .nal con el na*egador!


16/42

C! Eti%uetas para l,neas orizontales

Las l,neas orizontales son excelentes para separar *isual#ente las secciones de una pginaweb/ por eje#plo) antes de un encabezado o para separar el cuerpo del texto de una l,nea deele#entos!

>ara lo anterior) HTML proporciona la eti%ueta Kr) %ue crea una l,nea orizontal en la pginaweb! Esta eti%ueta no tiene par de cierre ni lle*a texto asociado) siendo sus atributos:

R Qize) indica el grosor de la l,nea orizontal en p,xeles/ el *alor predeter#inado es 4 y es el#,ni#o grosor %ue puede tener la l,nea!

R 5idt) indica el anco orizontal de la l,nea y se puede especi.car la #edida exacta enporcentaje del anco de la pantalla (por eje#plo) 4S o CS!

R 2lign) per#ite la alineacin de la l,nea orizontal/ puede ser acia la iz%uierda (align le+t)acia la dereca (align rigt o acia el centro (align center! En +or#a predeter#inada) lasl,neas orizontales *an centradas!

7denti.ca las di+erencias entre a#bas eti%uetas e+ectuando la acti*idad siguiente!

L,neas orizontales

Fbser*a c#o se insertan las eti%uetas y atributos de las l,neas orizontales en la estructura

bsica de la pgina web y su *isualizacin con el na*egador!


17/42

E!"#$%& '%(% 0*(%* +$ %(%$($& '/((%0*&

Los textos de las pginas web pueden tener +or#atos o estilos en su presentacin! Es posible

de.nir de una #anera in#ediata algunas de estas caracter,sticas) co#o las negritas) itlicas)etc!) para ello debes usar los siguientes pares de eti%uetas:

4b5 6 47b5 Teto en neritas

4e5 6 47e5 Teto en:ati;ado

4i5 6 47i5 Teto en cursi"as

4stron5 6 47 stron 5 Teto en tipo :uerte

4ul5 6 47ul5 ubraado

#or e$emplo"


18/42

Es i#portante se-alar %ue el tipo de letra y su ta#a-o ta#bi&n puede editarse con el par deeti%uetas K+ontU KP+ont y sus correspondientes atributos:

:ace

&oma como valor un con$unto de nombres de tipos de letra, escritos entre comillas

* separados por comas.

/intaxis" 0font face123rial, +elvetica24&exto a definir05font4

6eneralmente, el navegador busca los tipos de letra indicados uno a la ve7 (p. e$

83rial, +elvetica2!. /i no encuentra el primero, busca el segundo, despus el

tercero * as sucesivamente +asta encontrar un tipo de letra que est instalado en

el sistema9 * si no encuentra ninguno de los tipos de letra indicados, entonces usa

el predeterminado por el navegador (&imes :e ;oman!.

si;eDetermina el tamao de la letra del texto. os valores que pueden utili7arse de

forma creciente van del < al =.

colorDetermina el color de las letras del texto. #uedes utili7ar la tabla de colores vista

en las etiquetas >so de los colores.

Es i#portante considerar %ue al escribir los textos (o prra+os junto con sus atributos (tipo deletra) ta#a-o y color) es con*eniente indicar los inicios de cada prra+o con la eti%uetaKpKPp!


19/42

2plica tus conoci#ientos de esta eti%ueta realizando la siguiente acti*idad!

0or#ato de caracteresFbser*a c#o se insertan las eti%uetas y atributos para el +or#ato de caracteres en la estructurabsica de la pgina web y su *isualizacin con el na*egador!

V! Listas ordenadas o nu#eradas


20/42

2de#s de encabezados y prra+os) otro de los ele#entos t#l #s co#unes son las listas) lascuales te ser*irn para ordenar y agrupar los ele#entos de la in+or#acin) incluso por orden

jerr%uico (con *i-etas) para +acilitar su lectura!

Las listas ordenadas o nu#eradas *an encerradas entre las eti%uetas:

ada elemento de la lista se encierra entre las etiquetas.

1uando el na*egador despliega una lista ordenada) nu#era cada uno de los ele#entos en +or#aconsecuti*a de #anera %ue tJ no tienes %ue poner los nJ#eros a las listas %ue elabores! 2s, %uepode#os decir %ue las listas ordenadas son a%uellas donde cada ele#ento est nu#erado!


21/42

R7O especi.ca %ue se usan nJ#eros ro#anos en #ayJscula para nu#erar los ele#entos de lalista (esto es 7) 77) 777) 7D) etc!!RiO especi.ca %ue se usan nJ#eros ro#anos en #inJscula para nu#erar los ele#entos de lalista (esto es i) ii) iii) i*) etc!!R2O especi.ca %ue se usan letras #ayJsculas (esto es 2) 8) 1) ") etc!!RaO especi.ca %ue se usan letras #inJsculas (esto es a) b) c) d) etc!!

El tipo de nu#eracin se especi.ca en la eti%ueta Kol co#o sigue: Kol type aO! 1uandono especi.ca#os el par#etro type dentro de la eti%ueta Kol) el tipo de nu#eracincorresponde a los nJ#eros arbigos!

Lle*a a cabo la siguiente acti*idad para aplicar este atributo!

Listas ordenadas (b

Fbser*a c#o se colocan las eti%uetas de la lista ordenada con el atributo de los nJ#erosro#anos en #ayJsculas y su *isualizacin con el na*egador!

Ta#bi&n pode#os iniciar una lista ordenada partir de un nJ#ero o letra) distintos a 3) 7) i) 2 o a)#ediante el atributo start nu#ero) en donde el ? corresponde a ?) 777) iii) 1 y c)respecti*a#ente) dependiendo del nJ#ero en %ue %uera#os e#pezar la lista!

Eje#plo: Kol typea start?

>or lo %ue la lista con la sintaxis anterior) #ostrar una lista con letras #inJsculas y el pri#erele#ento de lista ser la letra cO!

W! Listas no nu#eradas


22/42

Las listas no nu#eradas *an encerradas entre las eti%uetas KulU KPul (del ingl&s @norderedList %ue signi.ca lista no ordenada o no nu#erada y cada ele#ento de la lista se encierra entrelas eti%uetas KliU KPli!

Las eti%uetas KulU KPul cuentan con *arios atributos %ue puedes personalizar para lapresentacin de tus listas no nu#eradas #ediante el uso de *i-etas espec,.cas y ta#bi&n seestablecen con el par#etro type/ dicos atributos son los siguientes:

RdiscO especi.ca el uso de *i-etas circulares con relleno de la lista (esto es X para losele#entos de la lista!RcircleO especi.ca %ue el uso de *i-etas circulares *ac,as (sin relleno para los ele#entos de lalista (esto es Y!Rs%uareO especi.ca %ue se usan *i-etas cuadradas con relleno para los ele#entos de la lista(esto es !

El tipo de vieta a emplear se especifica en la etiqueta 4ul5como sigue"

0ul t*pe 1 8disc24

1uando no especi.ca#os el par#etro type dentro de la eti%ueta Kul) el tipo de *i-etacorresponde al c,rculo con relleno!

Listas no nu#eradasFbser*a en el siguiente cdigo c#o se colocan las eti%uetas de la lista no nu#erada con elatributo de las *i-etas cuadradas y su *isualizacin con el na*egador!

omo +abrs podido observar las listas ordenadas * no numeradas estn desplegados +acia la i7quierda de lapantalla, si quisiramos ubicarlos +acia el centro de la misma, necesitamos incorporar al diseo de nuestra pgina una&abla.


23/42

I-*('*(%!- +$ %)%&

Las tablas per#iten distribuir adecuada#ente texto) i#genes y contenidos en .las y colu#nas)con o sin borde! La #ayor,a de los principales na*egadores cuentan con soporte para ellas!

Qu sintaxis es:

Ktable border 3OKtr

Ktd

KPtd

KPtrKPtable

"onde el atributo border 3O indica el grosor del borde de la tabla) segJn el *alor entero 3

#edido en pixeles!

Es i#portante se-alar %ue una tabla est co#puesta de .las (representadas por las eti%uetasKtrUKPtr y de colu#nas (representadas por las eti%uetas KtdUKPtd!

>ara %ue te +a#iliarices con el uso de tablas en el dise-o de tus pginas web) elaborars algunasde ellas #uy sencillas! En estas tablas irs incorporando gradual#ente sus propiedades en cadaacti*idad!


24/42

C$-(%( #-% %)%

:Q#!$($& $-(%( )% %)% *- ($&'$* % )% '%-%))%; '%(% "#$ &$ 7$% ** $- )%&!5#!$-$ !%5$-or esta razn) poca gente los incluye en suspginas web/ no obstante ay dos +or#as de acer esto:

3! En +or#a de arci*os %ue se puedan descargar directa#ente) o bien

2.>sando un formato que se pueda reproducir desde la pgina eb.

La segunda +or#a es #s co#pleja y no necesaria#ente co#patible con todos los na*egadores)+or#atos) reproductores) etc!

>or lo anterior) para %ue los *isitantes a un sitio web %ue contiene *ideo puedan reproducirlo conel na*egador) necesitan tener instalado en su co#putadora un plug;in co#patible con el +or#ato

de dico *ideo (o #elod,a! Existen nu#erosos +or#atos de reproduccin de *ideo %ue no sonco#patibles entre s, y ta#bi&n *arios progra#as %ue no estn instalados por igual en todos losna*egadores!

>or otra parte) deter#inados arci*os de contenido #ulti#edia se pueden reproducirdirecta#ente en el na*egador) el cual se trans+or#a en una plata+or#a de di+usin #ulti#edia!

0or#atos de audio

1o#o se #uestra en la siguiente tabla) los +or#atos de reproduccin de audio #s co#unes %uepode#os utilizar en la 5eb son:


37/42

FORMATOS DE VIDEO

En lo %ue respecta al *ideo) ay distintos +or#atos de codi.cacin de los datos (cdecs %ueproducen y co#ercializan #ucas e#presas en el #ercado #undial de so+tware!

2 continuacin te presenta#os una lista de los reproductores de audio y *ideo #s conocidos)cada uno de los cuales utiliza un +or#ato propio e inco#patible con los de#s!

3! Microso+t propone 5indows Media >layer co#o reproductor! Qu +or#ato propio 5MD esnatural#ente co#patible con 5indows e 7nternet Explorer! Qin e#bargo no +uncionar si los

arci*os estn protegidos contra lectura) si se utiliza el na*egador 0ire+ox) o MacFQ_ o Linux!Este reproductor *iene ya incluido en el siste#a operati*o 5indows y puede actualizarse concierta regularidad en el sitio siguiente:ttp:PPwindows!#icroso+t!co#Pen;@QPwindowsPdownload;windows;#edia;player

4! 1! En el progra#a se pueden trabajar +or#atos de `uick Ti#eco#o #peg!ttp:PPwww!apple!co#PitunesPdownloadP

@na *ez %ue ya conoces los +or#atos para audio y *ideo) te preguntars $%u& eti%uetas per#itensu insercin'

2ntes %ue aprendas c#o incorporar estas eti%uetas a tus pginas web:

3! 1rea las carpetas audio y *ideo en la carpeta pginas web) localizada en tu co#putadorapersonal!

4! En estas carpetas al#acenars los arci*os de audio (bella!#p?/ ca+etacuba!#p? y *ideo(#onito!sw+) %ue utilizars para elaborar las pginas web de este te#a! "a clic a%u, paradescargarlos! Tu directorio %uedar as,:

Qi tienes dudas o %uieres co#partir tus conoci#ientos sobre este te#a ingresa al +oro de launidad!


38/42

Listo) aoraU

7ncorporacin de audio

>ara insertar un *,nculo con sonido externo en una pgina web) es necesario tener:

3! El arci*o con un +or#ato reconocido por el na*egador y su correspondiente plug in!

4! La eti%ueta Kobject (per#ite agregar un sonido de +ondo incrustado) bajo la +or#a deejecucin de aplicaciones externas y los par#etros data (especi.ca la ubicacin de los datos ytype (designa el tipo de contenido del recurso de.nido en el atributo 6data6!

Qintaxis:

Kobject data6no#bre del sonido o #elod,a!extensin6 type6audioP#peg6 widt66eigt66!!!KPobject

2udio

En el siguiente cdigo de la pgina audio!t#l identi.ca la sintaxis (#arcada en color *erdepara insertar audio!

1digo

Kt#lKeadKtitle Esta es #i p]aacute/gina 2udio KPtitleKPeadKbody background6i#agenesPca+etacu*abg!jpg6Kobject data6audioPeoca+etacuba!#p?6 type6audioP#peg6 widt66 eigt66KPobjectKcenterKi#g src 6i#agenesPca+etacu*a3!jpg6 eigt O3O widt OA3OKPcenterKpKcenter

KstrongK+ont color6yellow6120^ T21@82 KP+ontKPstrongKPcenterKpKr widtOCO colorOwiteOKpKcenterKi#g src 6i#agenesPca+etacu*a4!jpg6 eigt ?4O widt O4AOKPcenterKpKcenterK+ont color6yellow6Qizu antraKP+ont


39/42

KPcenterKr widtOCO colorOwiteOKp Ktable borderO3O alignOcenterO Ktr KtdKi#g src6i#agenesPca+etacu*a?!jpg6 widt646 eigt646KPtdKtdKi#g src6i#agenesPca+etacu*aA!jpg6 widt646 eigt646KPtdKPtrKPtableKpKcenterKbK+ont color6yellow6"7Q1FZor otra parte) no obstante %ue la #ayor parte de los +or#atos de *ideo estn opti#izados parala 5eb) aJn as, sigue representando *arios #egabytes por un #inuto de *ideo de buena calidad>or ello) debe#os ser prudentes en cuanto a su inclusin en nuestras pginas!

1abe #encionar %ue los +or#atos de *ideo estndar son #uy extensos) ocupan #uca #e#oriay #ucas *eces ay %ue pagar las licencias de uso!

Es posible ejecutar o incrustar *,deos dentro de la pgina web utilizando la siguiente eti%ueta:


40/42

Ke#bed src6colon!a*i6 eigt? widtA autostart true loop +alse

"onde los atributos:

R src: se-ala la direccin en la %ue se encuentra y el no#bre del arci*o de *ideo!R eigt: indica la altura del cuadro del *ideo y widt su anco!R autostart: se-ala %ue el *ideo se reproduzca en cuanto se cargue la pgina!R loop: indica %ue el *ideo se detenga (+alse en cuanto ter#ine de reproducirse o %ue continu&una y otra *ez (true

Dideo

2 continuacin te presenta#os el cdigo HTML %ue genera una corta ani#acin 0las) la cual#uestra la creacin de un rtulo eca por un #onitoO) cuyo arci*o (#onito4!sw+ tan sloocupa A!? kbs!

Kt#lKeadKtitle Esta es #i p]aacute/gina Dideo KPtitleKPeadKbody bgcolorONWO textON0000OKcenterEsta es una ani#acin lla#ada:#onitoKpKe#bed src 6*ideoP#onito?!sw+6 widt6A6 eigt6?6KPcenterKPbodyKPt#l

=ota: Los arci*os de *ideo siguen la #is#a +or#alidad de los arci*os de audio! >or tanto) elno#bre de la carpeta en donde se localizan debe especi.carse en la eti%ueta Kobject y elpar#etro data!

3! 1aptura el cdigo) sl*alo co#o *ideo!t#l y reprodJcelo! "a clic a%u, para *isualizar lapgina web co#o lo ar,a el na*egador!

2ora %ue ya cuentas con todos los ele#entos bsicos del lenguaje HTML) ests listo paradesarrollar tu propia 5eb) %ue puedes publicar! 2prende este Jlti#o contenido de la unidad!Q@Erotocolo de Trans+erencias de 2rci*os o 0T> (0ile Trans+er >rotocol) co#o suno#bre lo indica) per#ite realizar esta accin!

En el #ercado de ser*icios en l,nea (on line existen #ucos pro*eedores de aloja#iento web en7nternet) algunos de los cuales son pri*ados y cobran una cierta renta al #es o al a-o) otros songratuitos y per#iten aloja#ientos de pginas web %ue no sobrepasen los 3 Mega8ytes!

Es precisa#ente tu pro*eedor de aloja#iento web) %uien debe proporcionarte los datos deacceso al ser*idor 0T>/ &l ta#bi&n debe proporcionarte un identi.cador (login y una contrase-a(password) ya %ue sin ellos no se podr instalar nada en el ser*idor! 2de#s de tener un


41/42

ser*idor en donde alojar tu in+or#acin) necesitas un do#inio (@


42/42

te in+or#a sobre el grado de co#patibilidad %ue ay entre un na*egador y el nue*o estndarHTMLC!

Qlo tene#os %ue cargar la direccin del sitio en nuestro na*egador y &ste nos #ostrar %uetanto soporte o+rece dico na*egador para HTMLC! El in+or#e e*alJa 3 aspectos entre los %ue.guran: *ideo) +or#ularios web) audio) etc!

Las principales co#pa-,as de tecnolog,a estn apoyando a HTMLC) co#o Zoogle) Microso+t o2pple!

Qi deseas saber #s al respecto) re*isa los sitios %ue se presentan al dar clic sobre el logo %ueaparece a continuacin!

Diseño de Pagina Web Con HTML

Documents

Transcript of Diseño de Pagina Web Con HTML