HTML/CSS( Mi(primera(página(

Transcripción

1 HTML/CSS Miprimerapágina

2 QuéesHTML Esunlenguajedemarcasparaformateary estructurarundocumento,quepuedeleerseen cualquiernavegador. <html> </html> EstandarizadoenlanormaISOdeSGML StandardGeneralizedMarkupLenguage). ElW3Cdesarrollaespecificacionestécnicasy directrices,deformaquesepuedaaseguraruna altacalidadtécnicayeditorial.

3 EstructuraHTML UndocumentoHTMLKenetreseKquetasquedescribenla estructurageneraldeundocumentoydanunainformaciónsencilla sobreél.<html>,<head>y<body> LaseKquetaspuedenescribirsetantoenmayúsculascomoen minúsculas,peroserecomiendaelusodeminúsculas:<html>o <HTML>,<body>o<BODY> Editor Visualizaciónenelnavegador

4 EstructuraHTML <!doctypehtml>declaraundocumentohtml5paraquese visualicecorrectamente. DoctypecomienzaauKlizarseenHTML4.01yXHTML h\p://validator.w3.org/ <!doctypehtml>

5 EstructuraHTML <html>paraidenkficarqueestacodificadoenestelenguajey Limitar,elprincipioyelfindeldocumento. <html></html>

6 EstructuraHTML <HEAD>lacabecera,queconKeneinformaciónyrecursossobreel propiodocumentoyquenoapareceeneldocumento,destacando elktulo<title>.seráelnombrequeapareceenlacabeceradel visualizadoryenlosbuscadoresdeahílaimportanciadequesea significakvo. <head></head> <Ktle></Ktle>

7 EstructuraHTML LaeKquetametadefinevariosKposdemetadatos. Elatributocharsetespecificalacodificaciónusadaennuestra página. <metacharset="character_set"> <metacharset="ude8">

8 EstructuraHTML CharsetuFG8eslaUnicodeTransformaKonFormat8ebit representaelcódigodecaracteresunicode.escompakblecon ASCII. Permitevisualizarloscaracteresdetodoslosidioma.

9 EstructuraHTML Caracteresespeciales:paraincluireneltextocaracteresquesonpropiasdel lenguajehtmlesnecesariousarsuanotacióncodificada: h\p://dev.w3.org/html5/htmleauthor/charref Espacioenblancononebreakingspace) < Menorque < > Mayorque > & Ampersand & Comillas " apóstrofo '

10 EstructuraHTML <body>elcuerpoconkeneloselementosvisiblesenlapágina. Lasimágenes,losencabezados,lospárrafosdetexto,laslistas,las tablas,loshipervínculos <body></body>

11 EditoresHTML Antesdecomenzaratrabajarconuneditorespecífico,esrecomendableconocer elcódigo. Podemosusarprogramasquetrabajencontextoplano,sinañadirsuspropias marcasdeedición,enwindowselblocdenotasyenmacintosheltextedit. TextEditestápordefectoenRichTextesnecesarioconfigurarloparaqueguarde tutrabajocomoarchivosdetextoplano. LosdocumentosHTMLdebentenerlaextensiónhtmlohtm. UsaruneditorwysiwygcomoelAdobeDreamweaver)oelBlueGrifon h\p:// h\p:// VercomparaKva:h\p://en.wikipedia.org/wiki/Comparison_of_HTML_editors

12 EstructuraHTML Mi)primera)página)vistaenelprogramaBlocdeNotas

13 EstructuraHTML Mi)primera)página)vistaenelprogramaSublime.

14 EstructuraHTML Mi)primera)página)vistaenelprogramaDreamweaver.

15 LenguajeHTML UndocumentoHTMLinsertaeneltextoeTquetasquecontrolan losdiferentesaspectosdelapresentaciónylasemánkcadel contenido. Lostextoshabitualesestánformadosporencabezados<h1>, párrafos<p>,textoimportante<strong>enfakzado<em>listas <ul><li>...

16 SelectoresCSS ParaaplicarunesKlodepresentación,elselectordeelemento puedeserunaekquetahtml: p,h1,ul,li ElesKloafectaatodoelcontenidoincluidodentrodeesaeKqueta <p></p>,<h1></h1>,<ul></ul>. ElselectorpuedeaplicarseamásdeunaeKquetaHTML: elemento,elemento h1,h2,h3 Afectaaloselementos<h1>,<h2>y<h3>.

17 CSS ElesKlopuedeestarenlacabeceradelapágina,debeexpresarse enunelemento<style>dentrodelacabecera<head>del documento. Selector{ycadadeclaración:propiedad:valor;}

18 RecursosHTML MDN:ListadeElementosHTML5 h\ps://developer.mozilla.org/es/docs/html/html5/html5_lista_elementos W3C:HTML5elements h\p://dev.w3.org/html5/markup/elements.html WoorkUp:HTML5tagreference h\p://woorkup.com/wpecontent/uploads/2009/12/html5evisualecheate Sheet1.pdf

19 HTML/CSS Findeltema

20 Ejercicio 1.eRealizarconeditordetextoplano,KpoBlocdeNotaslaprimerapáginaWeb: <!doctypehtml> <html> <head> <metacharset="ude8"> <Ktle>Miprimerapágina</Ktle> </head> <body> Miprimerapáginaweb </body> </html> 2.eGuárdaloconextensión.html 3.eCompruebaenelnavegadorelficheroqueacabasdecrear.

21 Ejercicio 1.eEsobligatorioespecificareljuegodecaracteres"charset"enHTML5 a)sib)no 2.eEscorrectoemplearmayúsculasenlaseKquetasHTML,<HEAD><BODY>... a)sib)no 3.eElKpodedocumentoseescribeantesodespuésdeliniciodelaeKqueta <html> a)antes<!doctypehtml><html>b)después<html><!doctypehtml> 4.elaeKqueta<Ktle>seescribe: a)antesdel<head>b)dentrodel<head>c)dentrodel<body> 5.eladeclaración:<!doctypehtml>define: a)cualquierversióndedocumentohtmlb)undocumentoenhtml5

22 EjercicioeSoluciones 1.eEsobligatorioespecificareljuegodecaracteres"charset"enHTML5 a)sib)nob 2.eEscorrectoemplearmayúsculasenlaseKquetasHTML,<HEAD><BODY>... a)sib)noa 3.eElKpodedocumentoseescribeantesodespuésdeliniciodelaeKqueta <html> a)antes<!doctypehtml><html>b)después<html><!doctypehtml>a 4.elaeKqueta<Ktle>seescribe: a)antesdel<head>b)dentrodel<head>c)dentrodel<body>b 5.eladeclaración:<!doctypehtml>define: a)cualquierversióndedocumentohtmlb)undocumentoenhtml5b

23 HTML/CSS Marcasbásicas

24 HTML Lasmarcasdetextoenhtml,seempleanparaelestructurado* semán.co*del*contenido. Lostextoshabitualesestánformadosporpárrafos,palabrasen negritaocursiva,anotacionesycorrecciones,citasaotros documentosexternos... * Marcado*básico:* <p></p>*apárrafo <em></em>*adaénfasisaltextoqueencierra <strong></strong>*amáximaimportanciaaltextoqueencierra LaseDquetas<b>*paralaboldonegritaylaeDqueta*<i>*paralaitálicaocursiva, sonsimilaresvisualmente,perosinsignificadosemándco. hfp://

25 CSS EllenguajedemarcasHTML,estáorientadoaladefinicióndela estructuraylasemándcadeldocumentoynoasurepresentación gráfica. CSScontrolaelaspectográficodeldocumentomediantehojasde esdlostylesheets),indicandoalnavegadorcomosedeben visualizarloselementosdeundocumentohtml.asíseconsigue separarelaspectodelcontenido. Proyectocss*Zen*Garden: hfp://

26 CSS CadaeDquetaHTMLDeneunosvaloresdeCSSpordefecto,que puedenvariarsegúnelnavegador,quetendremosquemodificar connuestrosesdlospersonales. Visualizaciónvalorespor defectocssenelnavegador

27 HTML EjemplovaloresCSSpordefectodelnavegador,de:h1,*p,*strong,* em.* h1{ display:block; fontasize:2em; marginabefore:0.67em; marginaazer:0.67em; marginastart:0; marginaend:0; fontaweight:bold;} p{ display:block; marginabefore:1em; marginaazer:1em; marginastart:0; marginaend:0;} strong{ fontaweight:bold;} em{ fontastyle:italic;}

28 CSS Másinformaciónvalorespordefecto: W3C:* hfp://dev.w3.org/html5/markup/elements.html * Internet*Explorer:** hfp:// * Firefox:* hfp://mxr.mozilla.org/mozillaacentral/source/layout/style/html.css * Chrome,*Safari:* hfp://trac.webkit.org/browser/trunk/source/webcore/css/html.css * Opera* hfp://

29 CSS LaprimeraformadeañadirelesDloCSSaundocumentoHTMLes conelementosen*línea,*eselmétodomássencillo,añadiendoun atributostyleenelelementoconcretodentrodelapágina.*nose puedenreudlizarparavarioselementosquecompartenlasmismas propiedades. SeescribenlaspropiedadesdelesDloenlasmarcasdelHTMLcomo "nombre:valor"separadasporpuntoycoma. <body style="color: red; "> <p style="font-size: 16px; color: blue; font-family: Arial, Helvetica, sans-serif;"> Mi primera página</p>

30 CSS LasegundaformaañadeelesDloCSSenunbloque<style>*en*la cabecera*<head>)yaplicaelesdloavarioselementosdelapág.. CadaelementoHTMLDeneunacaja*asociada,dondeaplicanlos comandosdeesdlocss.elcolordefondoaplicadoacada elementohtmldelejemplo,muestralacajaasociadaacadauno.

31 CSS Lomásaconsejableparamantenerlaseparaciónentrecontenidoy presentación,enunahojadeesdlocssseparadadelhtml,quese importaconunelemento<link>enlacabecera.

32 CSS Laprincipalventajaesquelashojas deesdlosonaplicablesaunaoa muchaspáginas.permiteademás adaptarlapresentaciónapcs, móviles,tabletasoimpresorascon elatributomediaqueacdvaráel esdloespecíficodecadadisposidvo. <link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css"> <link href= estilo.css" rel="stylesheet" type="text/css" media="min-width:380px)"> hfp://

33 CSS Formato*de*las*normas*y*comandos*de*es.lo* * * ElesDlosedefineentrellaves"{"y"}";elselectordeterminasobre queelementoshtmlaplicaelesdlo,cadabloquededeclaración: {declaración;*declaración}*separadasporpuntoycoma";". Cadadeclaración:propiedad*:*valor,fijaunvalorparauna propiedaddeles:lo). H1 {color : green; text-align : center}

34 HTML Listas:* <ul></*ul*>*adefinelistas,noordenadas. <ol></*ol*>*adefinelistas,ordenadas. <li></li>*adefineloselementosdelaslistas ul{ display:block; listastyleatype:disc; marginabefore:1em; marginaazer:1em; marginastart:0; marginaend:0; paddingastart:40px;} ol{ display:block; listastyleatype:decimal; marginabefore:1em; marginaazer:1em; marginastart:0; marginaend:0; paddingastart:40px;}

35 TextoHTML Citas:*<blockquote></*blockquote*>*Acitastextualesdeuntexto externo. Elatributocite="url"AIndicaladireccióndelapáginaweboriginal delaqueseextraelacita. blockquote{ display:block; marginabefore:1em; marginaazer:1em; marginastart:40px; marginaend:40px;}

36 TextoHTML Texto*preformateado:* <pre></*pre*>*amandeneelaspectovisual,loselementoenblanco semandenenigualqueeneltextooriginal. pre{ display:block; fontafamily:monospace; whiteaspace:pre; margin:1em0;}

37 TextoHTML Abreviatura*y*acrónimo:* <abbr></abbr>*aparaindicarelsignificadodeunaabreviaturaoun acrónimo.

38 TextoHTML Salto*de*línea:* <br>*asaltodelíneaeneltexto,sinlosmárgenesdefinidosparael párrafo. Pocasveceshayqueusarunsaltodelínea:Unapoesía,unlistado delcódigo,cuandocadalíneanoesunpárrafoporsísola.

39 TextoHTML Superíndices*y*subíndices:* <sup></sup>** <sub></sub>*aparaedquetareltextocomosuperosubíndices. sub{ verdcalaalign:sub; fontasize:smaller;} sup{ verdcalaalign:super; fontasize:smaller;}

40 TextoHTML code:* <code></code>*apararepresentarfragmentosdecódigo informádco. Valorespordefecto: code{ fontafamily:monospace;} Otras*marcas*de*texto:* Textoborrado<del>*einsertado<ins>*enundocumento. Listasdedefiniciones<dl>,*<dt>*y<dd>*

41 Tabla LastablassedefinenconlaseDquetas<table>,*<tr>*paracadafilay <td>*paracadacolumna<th>indicaqueunaceldaeslacabecera.

42 TablaCSS

43 TextoHTML LIBROS*WEB:*Marcadobásicodetexto hfp://librosweb.es/xhtml/capitulo_3/ marcado_basico_de_texto.html Con*Clase:**Texto hfp://html.conclase.net/w3c/html401aes/struct/text.html MDN:*CSS hfps://developer.mozilla.org/enaus/docs/web/css

45 Ejercicio 1.AEnelarchivocreadoenelejercicioanterior"laprimerapáginaWeb",cambiar elcolordelfondo,delafuente,lafamiliadpográficayeltamaño.

46 Ejercicio 1.ALosvaloresdeesDlosCSSpordefectodelnavegador,sonigualesentodoslosnavegadores a)sib)no 2.AQueesmásaconsejable,queelesDloesteenlalíneaoenlacabeceradeldocumento. a)enlalíneab)enlacabecera 3.AQueesmásaconsejable,queelesDloesteenlacabeceradeldocumentooenarchivoCSSaparte. a)enlacabecerab)enhojadeesdlocssaparte 4.ElusodelosesDlosCSSenlalíneadelHTML, estádesaconsejado? a)sib)no 5.A PuedehaberesDlosdiferentesdependiendodeldisposiDvo?. a)sib)noc)si,sielesdlocssseaplicaenlalíneadelhtml 6.AlaeDqueta<th>representa: a)unaceldaimportantedelatablab)unaceldadelatablac)unaceldaqueescabeceradelatabla 7.ALaeDqueta<em>daénfasisaltextoqueencierra,pordefectoserepresenta: a)decolorrojo"red b)comocursivac)comoredondad)comonegrita 8.ALaeDqueta<strong>damáximaimportanciaaltextoqueencierra,pordefectoserepresenta: a)decolorrojo"red b)comocursivac)comoversalitad)comonegrita 9.ALaslistasdeinformaciónnoordenadasseidenDficanconlaeDqueta: a)<ul>b)<ol>c)<dl> 10.ALaeDqueta<blockquote>seempleaparatratar: a)parabloquesdetextob)enpárrafossangradosc)pararepresentarcitasd)pararepresentar fragmentosdecódigoinformádco

47 EjercicioASoluciones 1.ALosvaloresdeesDlosCSSpordefectodelnavegador,sonigualesentodoslosnavegadores a)sib)nob 2.AQueesmásaconsejable,queelesDloesteenlalíneaoenlacabeceradeldocumento. a)enlalíneab)enlacabecerab 3.AQueesmásaconsejable,queelesDloesteenlacabeceradeldocumentooenarchivoCSSaparte. a)enlacabecerab)enhojadeesdlocssaparteb 4.ElusodelosesDlosCSSenlalíneadelHTML, estádesaconsejado? a)sib)noa 5.A PuedehaberesDlosdiferentesdependiendodeldisposiDvo?. a)sib)noc)si,sielesdlocssseaplicaenlalíneadelhtmla 6.AlaeDqueta<th>representa: a)unaceldaimportantedelatablab)unaceldadelatablac)unaceldaqueescabeceradelatablac 7.ALaeDqueta<em>daénfasisaltextoqueencierra,pordefectoserepresenta: a)decolorrojo"red b)comocursivac)comoredondad)comonegritab 8.ALaeDqueta<strong>damáximaimportanciaaltextoqueencierra,pordefectoserepresenta: a)decolorrojo"red b)comocursivac)comoversalitad)comonegritad 9.ALaslistasdeinformaciónnoordenadasseidenDficanconlaeDqueta: a)<ul>b)<ol>c)<dl>a 10.ALaeDqueta<blockquote>seempleaparatratar: a)parabloquesdetextob)enpárrafossangradosc)pararepresentarcitasd)pararepresentar fragmentosdecódigoinformádcoc

48 HTML Estructura

49 EstructuraHTML Loselementoshtmlpuedenvisualizarsecomobloqueocomoenlínea. Loselementosbloquesblockocupantodoelanchodelapáginayfuerzanauna nuevalíneaantesydespués. <article> <aside> <canvas> <div> <footer> <h1>, <h2>, <h3>, <h4>, <h5>, <h6> <header> <p> <pre> <section> <ul> hbps://developer.mozilla.org/eneus/docs/html/blockelevel_elements Loselementosenlíneainlinesóloocupanelanchonecesarioynofuerzan nuevaslíneas. <em> <a> <br> <img> <span> <button> <input> <select> <textarea> hbps://developer.mozilla.org/eneus/docs/html/inline_elements

50 EstructuraHTML DIV, Elelemento<div>esunelementodebloquequeseemplea contenerensuinteriorotroselementoshtml. Elelemento<div>,noLeneningúnsignificado,essemánLcamente neutro. EmpleandoCSS,elelemento<div>,sepuedeuLlizarpara estructurareldocumentoengrandesbloquesdecontenido. EldiveslapropuestaparasusLtuiraloselementos<table>,parael diseño.elpropósitodelelemento<table>,esparamostrardatos tabulados.

51 <div> <div>definebloqueungenéricoempleadoparaformatearconcss. <div,id="caja" class="cabecera">,.,</div> AtributoID:idenLficaunívocamenteunelementoHTMLenuna página.unelementohtmlsolodebetenerunatributoidyeste debeserúnicoenlapágina.elselectorcsscaja,serefiereal elementoconatributoid="caja,comoencaja,{color:blue},, AtributoCLASS:defineunaclasedeelementosHTML.Unelemento puedetenervariosatributosclass.,elselectorcss.cabecera,se refiereatodosloselementodelaclasecabeceraquellevanel atributoclass="cabecera"),comoen.cabecera,{color:red},,,,

52 EstructuraHTML SPAN, ElelementoHTML,<span>,esunelementoenlíneaqueseemplea comouncontenedordetexto. Elelemento<span>,noLeneningúnsignificadoespecial,es semánlcamenteneutro.. CuandoseuLlizajuntocon,CSS,elelemento<span>,sepuede ullizarparaestablecerlosatributosdeeslloparalaspartesdel textomedianteunidenlficadoridounaclaseclass.

53 CSS Loselementos<DIV>y<SPAN>seempleanparadefinirnormasde esllomásespecíficas. Elatributo,id,seempleaparaidenLficarunelementoúnico. ElatributoclasscuandohaymásdeunelementoquemanLenen unarelaciónsignificalva,puedesercomparlrelesllo.

54 EstructuraHTML EnHTML5,losbloques,sonsusLtuidosporbloquessemánLcosque muestransignificadoporsimismos. <header> <nav> <seclon> <arlcle> <aside> <footer>

55 EstructuraHTML UnapáginadeesteLporealizadacon<div>,quedaríadela siguientemanera. Eshabitualunacajacontenedorparaimpedirqueocupetodalapáginacuandolaventana delanavegadoresmuygrandeocontrolarladisposicióndeloselementoscuandoesmuy pequeña. +,CSS,

56 EstructuraHTML UnapáginadeesteLporealizadaconlosnuevosbloques semánlcosdelhtml5quedaría. +,CSS,

57 EstructuraHTML LaestructuraHTML,,deberealizarseenelsenLdológicodelectura deldocumento,cuandolapáginaseveasinaplicarlosesllosno pierdasusignificado.

58 HerenciaCSS ParaentendercomofuncionanlosselectoresylaherenciaCSSes necesarioentenderquéeselárboldeldocumento.

59 HerenciaCSS elárboldeldocumentodelejemploanterior: html head body Ltle div.caja header nav arlcle footer h1 ul li li li a a a

60 HerenciaCSS Ancestoresunelementoconectadoperomásarribaenla estructuradeldocumento html head body Ltle div.caja Ancestor header nav arlcle footer h1 ul descendientes li li li, a a a

61 HerenciaCSS Descendientessonloselementosconectadosperomásabajoenla estructuradeldocumento. html head body Ltle div.caja Ancestor header nav arlcle footer h1 ul descendientes li li li, a a a

62 HerenciaCSS Parenteselelementoconectadoydirectamentesobreun elementoenlaestructuradeldocumento. html head body Ltle div.caja header nav arlcle footer h1 ul Parent descendientes li li li, a a a

63 HerenciaCSS Childeselelementoconectadoydirectamentedebajodeun elementoenlaestructuradeldocumento. html head body Ltle div.caja Child header nav arlcle footer h1 ul li li li a a a

64 HerenciaCSS Siblings,sonloselementosquecompartenunmismopadreenla estructuradeldocumento. html head body Ltle div.caja header nav arlcle footer h1 ul Parent Siblings li li li,

65 HerenciaCSS SidefinimosunesLloenelbody,todosloselementossituados debajoenelárboldeldocumento,heredanesapropiedad.

66 HTML Findeltema

67 Ejercicio RealizaunesquemasencillodeestedocumentoHTMLasuestructuraLpoárbol,queresumabrevementelas relacionesdirectasentreelementosdelapágina,clarificandolajerarquíadelárbol. <!doctypehtml> <html> <head> <metacharset="u_e8"> <Ltle>Ejercicioopcionalárbol</Ltle> </head> <body> <header> <imgsrc="logolpo.jpg"alt="firefoxlogo"width="100"height="100"> </header> <nav> <ul> <li>menú1</li> <li>menú2</li> <li>menú3</li> </ul> </nav> <arlcle> <h1>titulardenivel1</h1> <p>contenidodelapágina</p> </arlcle> <footer>piedepágina</footer> </body> </html>

68 Ejercicio 1.ECuáldelassiguienteseLquetasNOesdebloqueblock: a)<h1>b)<hr>c)<span>d)<p> 2.ECuáldelassiguienteseLquetasNOesdebloqueblock: a)<p>b)<hr>c)<ul>d)<strong> 3.ECuáldelassiguienteseLquetasNOesenlíneainline: a)<em>b)<span>c)<pre>d)<a> 5.ECuáldelassiguienteeLquetadeestructuranoessemánLcaHTML5 a)<header>b)<seclon>c)<pie>d)<aside> AnalizarelárboldelsiguientedocumentoHTML <!doctypehtml><html><head><metacharset="u_e8 ><Ltle>HerenciaCSS</Ltle></head> <body><ul><li>elementodelista1</li><li>elementodelista2</li><li>elementodelista3</li></ul></body></html> 6.ElaeLquetaulseriael"parent"de: a)bodyb)elpropioulc)loslid)html 7.Ebodyes"ancestor"deLtle: a)sib)no AnalizarelárboldelsiguientedocumentoHTML <!doctypehtml><html><head><metacharset="u_e8 ><Ltle>HerenciaCSS</Ltle></head> <body><ul><li>elementodelista1</li><li>elementodelista2</li><li>elementodelista3</li></ul> <p>estoesunpárrafo</p></body></html> 8.ElaeLqueta,pseriaelhijo"child"de: a)bodyb)ulc)elúllmolid)detodoslosanteriores 9.ElaeLquetas,serianhermanos"siblings": a)lostreslib)lostresliyelpc)uld)lasrespuestasaybsoncorrectas 10.ECuáldelassiguientesafirmacionesesincorrecta a)uleshijo"child"debodyb)peshijo"child"debodyc)peshijo"child"deuld)lieshijo"child"deul

69 EjercicioESoluciones 1.ECuáldelassiguienteseLquetasNOesdebloqueblock: a)<h1>b)<hr>c)<span>d)<p>c 2.ECuáldelassiguienteseLquetasNOesdebloqueblock: a)<p>b)<hr>c)<ul>d)<strong>d 3.ECuáldelassiguienteseLquetasNOesenlíneainline: a)<em>b)<span>c)<pre>d)<a>c 5.ECuáldelassiguienteeLquetadeestructuranoessemánLcaHTML5 a)<header>b)<seclon>c)<pie>d)<aside>c AnalizarelárboldelsiguientedocumentoHTML <!doctypehtml><html><head><metacharset="u_e8 ><Ltle>HerenciaCSS</Ltle></head> <body><ul><li>elementodelista1</li><li>elementodelista2</li><li>elementodelista3</li></ul></body></html> 6.ElaeLquetaulseriael"parent"de: a)bodyb)elpropioulc)loslid)htmlc 7.Ebodyes"ancestor"deLtle: a)sib)nob AnalizarelárboldelsiguientedocumentoHTML <!doctypehtml><html><head><metacharset="u_e8 ><Ltle>HerenciaCSS</Ltle></head> <body><ul><li>elementodelista1</li><li>elementodelista2</li><li>elementodelista3</li></ul> <p>estoesunpárrafo</p></body></html> 8.ElaeLqueta,pseriaelhijo"child"de: a)bodyb)ulc)elúllmolid)detodoslosanterioresa 9.ElaeLquetas,serianhermanos"siblings": a)lostreslib)lostresliyelpc)uld)lasrespuestasaybsoncorrectasa 10.ECuáldelassiguientesafirmacionesesincorrecta a)uleshijo"child"debodyb)peshijo"child"debodyc)peshijo"child"deuld)lieshijo"child"deulc

70 CSS Prioridad

71 SelectoresCSS ElselectoraplicaatodosloselementosHTMLdelapáginaconesa e9quetap). Elselectormúl+pledeCSS,incluyevariosselectoresseparadospor coma,),aplicandoeles9loacualquierelementoconalgunadelas marcasincluidas:h1,h2,h3. Elselectorpuedeincluire9quetasseparadassoloporespacios.El selectoraplicarásoloaelementosconlaúl9mamarcaul),conlos anteriorescomoancestros,esdecir.cajadeberáserancestrode navynavdeberáserancestrodeul.

72 PrioridadCSS Cuandodosdeclaracionesafectanaunmismoelemento. cualde ellasseinterpretaenelnavegadorcomomásimportante? A=0es9losenlínea B=0ID C=0clases D=1elemento Puntuación=0,0,0,1 HayquecalcularlatuplaA,B,C,D)ganadorade todaslasreglascssquecompiten.a9ene máximopesoydmínimo.sihayempateena,se mirabyasísucesivamente. A=es9loenlínea B=númerodeIDs C=númerodeclases D=númerodemarcasHTML

73 PrioridadCSS Cuandodosdeclaracionesafectanaunmismoelemento. cualde ellasseinterpretaenelnavegadorcomomásimportante? A=0es9losenlínea B=0ID C=0clases D=2marcas Puntuación=0,0,0,2 HayquecalcularlatuplaA,B,C,D)ganadorade todaslasreglascssquecompiten.a9ene máximopesoydmínimo.sihayempateena,se mirabyasísucesivamente. A=es9loenlínea B=númerodeIDs C=númerodeclases D=númerodemarcasHTML

74 PrioridadCSS Cuandodosdeclaracionesafectanaunmismoelemento. cualde ellasseinterpretaenelnavegadorcomomásimportante? A=0es9losenlínea B=1ID C=1clase D=1elemento Puntuación=0,1,1,1 HayquecalcularlatuplaA,B,C,D)ganadorade todaslasreglascssquecompiten.a9ene máximopesoydmínimo.sihayempateena,se mirabyasísucesivamente. A=es9loenlínea B=númerodeIDs C=númerodeclases D=númerodemarcasHTML

75 PrioridadCSS Cuandodosdeclaracionesafectanaunmismoelemento. cualde ellasseinterpretaenelnavegadorcomomásimportante? A=0es9losenlínea B=1ID C=0clases D=2marcas Puntuación=0,1,0,2 HayquecalcularlatuplaA,B,C,D)ganadorade todaslasreglascssquecompiten.a9ene máximopesoydmínimo.sihayempateena,se mirabyasísucesivamente. A=es9loenlínea B=númerodeIDs C=númerodeclases D=númerodemarcasHTML

76 PrioridadCSS Laganadoraes,caja.cabecerah1=0,1,1,1 Ganadora: A=0es9losenlínea B=1ID C=1clase D=1elemento Puntuación=0,1,1,1

77 PrioridadCSS Cuandodosdeclaraciones9enenelmismovalor: Serálaúl9maespecificada

78 SelectoresCSS Selectoruniversal * Afectaatodosloselementos.

79 ReglasCSS Modificacióndees9los,porelusuarioenelnavegador:9pograYas

80 PrioridadCSS ReglasadicionalesdeprioridaddelasdeclaracionesCSSordenadas demenoramayor: CSSpordefectodelNavegadornavegador) CSSenpreferenciasdeusuariodelnavegadorusuario) CSSenpáginaHTMLoscriptCSSdiseñador) CSSenpáginaHTMLoscriptCSScon!importantdiseñador),p.e. body{color:blue!important;} CSSenpreferenciasdeusuariodelnavegadorcon!important usuario),p.e.body{color:blue!important;}

81 RecursosCSS KsesoCSS:CSSbásico:Cascada,especificidadyherencia h\p://ksesocss.blogspot.com/2012/05/css`basico`cascada`especificidad`y.html Dev.Opera:RecorriendoelárbolDOM h\p://dev.opera.com/ar9cles/view/traversing`the`dom`es/ LIBROSWEB:Árboldenodo h\p://librosweb.es/javascript/capitulo_5/arbol_de_nodos.html UOC:Herenciaycascada h\p://mosaic.uoc.edu/ac/le/es/m6/ud2/ LIBROSWEB:Colisionesdees9los h\p://librosweb.es/css/capitulo_2/colisiones_de_es9los.html CSS:SpecifityWars h\p://

82 RecursosHTML BruceLawson:HTML5ar9clesandsec9ons:what sthedifference? h\p:// whats`the`difference/ html5doctor:thear9cleelement h\p://html5doctor.com/the`ar9cle`element/ HTM5pasoapaso:div,sec9onyar9cle h\p://html5pasoapaso.blogspot.com.es/2011/08/div`sec9on`y` ar9cle.html ondho:html5discusionesentrear9cleysec9on) h\p://

83 CSS Findeltema

84 Ejercicio RealizarenelsiguienteHTML5declaracionesdees9loCSSqueafectenalmismoelemento,el9tularh1,con diferentespuntuacionesdeprioridad,eindicarsupuntuacióncomouncomentarioenelpropiohtml: <!doctype html> <html> <head> <meta charset="utf-8"> <title>herencia</title> </head> <body> <div id="caja"> <header class="cabecera"> <h1>cabecera: header</h1> </header> </div> </body> </html>

85 Ejercicio QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.Ès9lopordefectodelnavegador`h2{color:black;}2.Ès9lofijadoporeldiseñador`h2{color:green;} QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.Ès9lopordefectodelnavegador`h2{color:black;}2.Ès9lofijadoporelusuario`h2{color:green;} 3.Ès9loenhojaCSSexternaoenelHead`h2{color:blue;}4.Ès9loenhojaCSSexternaoenelHead`h2 {color:lime!important;} QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.Ès9loenhojaCSSexternaoenelHead`h2.news{color:green;}2.Ès9loenhojaCSSexternaoenelHead `h2{color:blue;} QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.Ès9loenhojaCSSexternaoenelHead`h2{color:blue;}2.ÈnlalíneasiguientedelCSS`h2{color: purple;} QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.Ès9loenhojaCSSexternaoenelHead`cajah2{color:lime;}2.Ès9loenhojaCSSexternaoenelHead` h2.news{color:green;}3.ès9loenhojacssexternaoenelhead`h2{color:blue;} QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.Ès9loenhojaCSSexternaoenelHead`cajah2{color:lime;}2.Ès9loenhojaCSSexternaoenelHead` h2.news{color:green;}3.ès9loenhojacssexternaoenelhead`h2{color:blue;}4.ès9loenhojacss externaoenelhead`h2{color:purple;}5.ès9loenhojacssexternaoenelhead`divcajah2{color: black;}

86 Ejercicio`Soluciones QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.Ès9lopordefectodelnavegador`h2{color:black;}2.Ès9lofijadoporeldiseñador`h2{color:green;}2 QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.Ès9lopordefectodelnavegador`h2{color:black;}2.Ès9lofijadoporelusuario`h2{color:green;} 3.Ès9loenhojaCSSexternaoenelHead`h2{color:blue;}4.Ès9loenhojaCSSexternaoenelHead`h2 {color:lime!important;}4 QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.Ès9loenhojaCSSexternaoenelHead`h2.news{color:green;}2.Ès9loenhojaCSSexternaoenelHead `h2{color:blue;}1 QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.Ès9loenhojaCSSexternaoenelHead`h2{color:blue;}2.ÈnlalíneasiguientedelCSS`h2{color: purple;}2 QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.Ès9loenhojaCSSexternaoenelHead`cajah2{color:lime;}2.Ès9loenhojaCSSexternaoenelHead` h2.news{color:green;}3.ès9loenhojacssexternaoenelhead`h2{color:blue;}1 QuéreglaCSSganaríaenlapresentaciónenelnavegador? 1.Ès9loenhojaCSSexternaoenelHead`cajah2{color:lime;}2.Ès9loenhojaCSSexternaoenelHead` h2.news{color:green;}3.ès9loenhojacssexternaoenelhead`h2{color:blue;}4.ès9loenhojacss externaoenelhead`h2{color:purple;}5.ès9loenhojacssexternaoenelhead`divcajah2{color: black;}5

87 HTML/CSS Navegación

88 NavegaciónHTML Unmenúesunalistadeenlaces.Serecomiendausarlasmarcasde lista<ul>)<li>)yelenlace<a>,queesloestablecidoporlasnormas deaccesibilidad.

89 NavegaciónHTML MenúverAcal)

90 NavegaciónCSS LosvaloresCSSpordefectodelalistaydelenlace,debenser ajustadosanuestrasnecesidades.) EjemplomenúverAcal myspace

91 NavegaciónHTML Menúhorizontal)

92 NavegaciónCSS CSSmenúhorizontal.) Ejemplomenúhorizontal BBC

93 MenúsFirefoxOS LosmenúsrecomendadosparalasaplicacionesenFirefoxOS FirefoxOSAppBuMons: hmp://

94 IconosparaaplicacionesFirefoxOS UniconoparaunaaplicaciónFirefoxOSesunaimagendepíxeles 60x60píxelsenformatoPNGde24bits. Hayotrastamaños necesariosparaotros disposiavos: 16px,32px,48px, 60px,128px,256px. Guíasdediseñodemozilla,)paradescargarlasplanAllasdelosiconos hmp://

95 RecursosnavegaciónCSS Cristalab:)MenúsverAcales hmp:// CSS)Blog:)CrearunmenúhorizontalsimpleconCSS hmp:// w3schools:)menúhorizontal hmp://

97 Ejercicio 1.PRealizarelCSSdeunmenúverAcaldeestehtml: <!doctypehtml><html><head><metacharset="uhp8 ><Atle>Menú</Atle></head> <body> <nav><h1>discover</h1><ul><li><ahref=""class="welcome">welcome</a></li><li><ahref="" class="featured">featured</a></li><li><ahref=""class="people">people</a></li><li><ahref="" class="music">music</a></li><li><ahref=""class="mixes">mixes</a></li><li><ahref="" class="videos">videos</a></li><li><ahref=""class="radio">radio</a></li></ul></nav> </body></html> 2.PRealizarelCSSdeunmenúhorizontaldeestehtml: <!doctypehtml><html><head><metacharset="uhp8 ><Atle>Menú</Atle></head> <body> <nav><h1>bbc</h1><ul><liclass="news"><ahref="">news</a></li><liclass="sport"><ahref="">sport</a></ li><liclass="weather"><ahref="">weather</a></li><liclass="capital"><ahref="">capital</a></li> <liclass="culture"><ahref="">culture</a></li><liclass="autos"><ahref="">autos</a></li> <liclass="tv"><ahref="">tv</a></li><liclass="radio"><ahref="">radio</a></li><liclass="more"><a href="">more </a></li></ul><divclass="clear"></div></nav> </body></html>

98 Ejercicio 1.PunmenúserealizaaparArdeunalistadeelementos,queseconvierteenunalistadeenlaces,sus eaquetasson: a)ul>li>ab)p>li>ac)p>ad)todaslasanteriores 2.PElselectora:hover,seempleaparadefinirelesAlode: a)elenlaceacavob)elenlacevisitadoc)cuandoelratónpasasobreelenlaced)todaslas anteriores 3.PEnelmenúhorizontal,hayquemodificarlosvalorespordefectodelalistaparaqueestén horizontal,serealizamodificandoelesalodelselectorypropiedad: a)ul{display:inline;}b)il{display:inline;}c)a{display:inline;}d)cualquieradelasanteriores 4.PLadiferenciaentreunelementoconenlaceyeltextosinenlace,seaconsejaporusabilidadquesea visiblementediferente a)sib)no 5. QuécondicionesdebecumpliruniconoparaFirefoxOS? a.debeserunaimagendeformatopng.b.debeserunaimagendeformatojpg.c.debemedir 3REM.d.Debemedir3REMpíxelesencolorblanco.

99 EjercicioPSoluciones 1.PunmenúserealizaaparArdeunalistadeelementos,queseconvierteenunalistadeenlaces,sus eaquetasson: a)ul>li>ab)p>li>ac)p>ad)todaslasanterioresa 2.PElselectora:hover,seempleaparadefinirelesAlode: a)elenlaceacavob)elenlacevisitadoc)cuandoelratónpasasobreelenlaced)todaslas anterioresc 3.PEnelmenúhorizontal,hayquemodificarlosvalorespordefectodelalistaparaqueestén horizontal,serealizamodificandoelesalodelselectorypropiedad: a)ul{display:inline;}b)il{display:inline;}c)a{display:inline;}d)cualquieradelasanterioresb 4.PLadiferenciaentreunelementoconenlaceyeltextosinenlace,seaconsejaporusabilidadquesea visiblementediferente a)sib)noa 5. QuécondicionesdebecumpliruniconoparaFirefoxOS? a.debeserunaimagendeformatopng.b.debeserunaimagendeformatojpg.c.debemedir 3REM.d.Debemedir3REMpíxelesencolorblanco.A