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!
7/24/2019 Diseo de Pagina Web Con HTML
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!
7/24/2019 Diseo de Pagina Web Con HTML
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:
7/24/2019 Diseo de Pagina Web Con HTML
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-
7/24/2019 Diseo de Pagina Web Con HTML
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
7/24/2019 Diseo de Pagina Web Con HTML
6/42
as etiquetas (llamadas tags, en ingls!
Caractersticas de las etiquetas
7/24/2019 Diseo de Pagina Web Con HTML
7/42
7/24/2019 Diseo de Pagina Web Con HTML
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!
7/24/2019 Diseo de Pagina Web Con HTML
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:
7/24/2019 Diseo de Pagina Web Con HTML
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!
7/24/2019 Diseo de Pagina Web Con HTML
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
7/24/2019 Diseo de Pagina Web Con HTML
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"
7/24/2019 Diseo de Pagina Web Con HTML
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"
7/24/2019 Diseo de Pagina Web Con HTML
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!
7/24/2019 Diseo de Pagina Web Con HTML
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!
7/24/2019 Diseo de Pagina Web Con HTML
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!
7/24/2019 Diseo de Pagina Web Con HTML
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"
7/24/2019 Diseo de Pagina Web Con HTML
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!
7/24/2019 Diseo de Pagina Web Con HTML
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
7/24/2019 Diseo de Pagina Web Con HTML
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!
7/24/2019 Diseo de Pagina Web Con HTML
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
7/24/2019 Diseo de Pagina Web Con HTML
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.
7/24/2019 Diseo de Pagina Web Con HTML
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!
7/24/2019 Diseo de Pagina Web Con HTML
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:
7/24/2019 Diseo de Pagina Web Con HTML
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!
7/24/2019 Diseo de Pagina Web Con HTML
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
7/24/2019 Diseo de Pagina Web Con HTML
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:
7/24/2019 Diseo de Pagina Web Con HTML
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
7/24/2019 Diseo de Pagina Web Con HTML
41/42
ser*idor en donde alojar tu in+or#acin) necesitas un do#inio (@
7/24/2019 Diseo de Pagina Web Con HTML
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!
Top Related