Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Llenguatges i Estàndards Web - PAC 1 - Multimedia (UOC) - Paquita Ribas

2,348 views

Published on

PAC 1 de l'assignatura Llenguatges i Estàndards Web del Grau Multimèdia de la UOC

Published in: Education
  • Be the first to comment

  • Be the first to like this

Llenguatges i Estàndards Web - PAC 1 - Multimedia (UOC) - Paquita Ribas

  1. 1. LLENGUATGES I ESTÀNDARS WEB - PROVA D’AVALUACIÓ CONTINUADA 1 PAQUITA RIBAS TUR1 - (5 punts) Quines versions dHTML, XHTML i CSS hem dusar a les nostres pàginesweb? - HTML 4.01 - XHTML 1.0 - CSS 2.12 - (10 punts) Enumera les diferents formes dusar CSS en una pàgina web. Per quèés, en general, una pràctica dolenta embeure els estils dins de lHTML? Se tacutalgun cas en el qual pugui ser una bona idea? - Es poden posar els estils directament dins del document HTML, amb l’atribut style i els estils entre cometes i separats per punt i coma. Són els estils en línia i actuen només sobre l’element etiquetat. S’apliquen, per exemple als paràgrafs, a una frase en concret, etc, i sempre dins de les etiquetes. - Dins del <head> de la web i amb l’atribut style. - Es pot donar estils a una web amb una fulla d’estils CSS externa.La forma més idònia és donar estils a una web mitjançant una fulla d’estils CSSexterna, pels següents motius: - Es pot canviar, només amb unes quantes línies les característiques de qualsevol element . Per exemple, canviar el interlineat en tots els paràgrafs, o el color de la tipografia en els títols, etc. h2 { padding: 0 10px; color: #000; font-family: Georgia; background: #EEBC0C; } - En l’HTML podem posar a un element un atribut id o class, de manera que el la fulla d’estil podem assignar-li característiques especials a aquesta id o a aquesta classe. Per exemple: HTML: <div id="menu"> <a href="index.html">HOME</a> <a href="curriculum.html">CURRICULUM</a> <a href="criterios_usabilidad.html">CRITERIS</a> <a href="enllaços.html">ENLLAÇOS</a> <a href="explicacions.html">EXPLICACIONS</a> </div> CSS: #menu { margin: 0; padding: 0; background: #FFF; float:left; margin-right:10px; width:190px; }
  2. 2. - Si volem canviar un color, els espais, etc, ho farem des de la fulla d’estils importada, canviarem unes poques paraules i automàticament ho canviarà a tota la web. - Es pot aplicar una fulla d’estils a tots els documents d’HTML i unificar així tota la web.És una bona idea posar els estils dins de l’HTML , en línia, quan volem obligar alsnavegadors a utilitzar aquest estils sobre els que pugui haver en una fulla CSSexterna.3 - (5 punts) Quins elements poden aparèixer dins de lelement <head>? - Títol del document <title>Títol del document</title> - Senyalar el tipus de contingut <meta http-equiv="Content-Type" content="text/html;charset=windows-1252"> - Descripció del document <meta name="description" content="Descripció de la pàgina web"> - Paraules clau <meta name="keywords" content="pac,uoc,html"> - Afegir estils o vincular fulla d’estils CSS externa - Afegir els scrips4 - (10 punts) Quines diferències hi ha entre una classe i una id? - id defineix un element únic, només es pot tenir un id per pàgina i class es pot aplicar a molts elements. - id es pot utilitzar per a definir els contenidors principals de la web i class per a definir continguts.5 - (15 punts) Quina és lestructura bàsica dun document XHTML? Quina éslestructura més simple possible dun document XHTML que validi? Explica breumentper a què sutilitzen cadascun dels seus elements.Un document HTML consta de dues parts la capçalera <head> i el contingut <body>.Dins del <head> va la informació explicada en la pregunta 3. Dins del <body> va elcos del document, es a dir, el document en sí.Una estructura bàsica seria una cosa així:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ES""http://www.w3.org/TR/html4/strict.dtd"><html> <head> <title>Estructura més simple</title> </head>
  3. 3. <body> <h1>Títol</h1> <p>Això realment ja no seria necessari</p> </body></html>En aquest exemple he posat: - Doctype – Indica el tipus de document HTML perquè els navegadors el puguin interpretar - Dintre de <html> es troben o <head> - La capçalera. L’estructura més simple pot ser el títol. o <body> - Cos del document. L’estructura més simple pot ser un títol, un paràgraf, etc.6 - (15 punts) Investigació. En aquests moments sestà elaborant lestàndard HTML5.Busca informació en la web sobre lestat daquest projecte i les principals diferènciesque suposarà HTML5 quant al marcat dels documents. Fes-ne un informed’aproximadament 500 paraules. És essencial que citis les fonts dinformació que hasutilitzat. Mirar document adjunt: “paquita_ribas_html5.docx”7 - (10 punts) Digues si són correctes o incorrectes els següents fragments de codi (enXHTML). En cas que siguin incorrectes, indica per què.<strong>Text negreta i <i>cursiva</strong></i> És incorrecte. La correcte seria (si la paraula “cursiva” no va en negreta): <strong>Text negreta</strong> i <i>cursiva</i> O també (si la paraula “cursiva” va en negreta): <strong>Text negreta i <i>cursiva</i></strong><h7>Títol</h7> No existeix el títol h7. Va del h1 (el més gran) al h6 (el més petit)o <h1><strong>Un altre títol</strong></h1> L’etiqueta h1 ja ve ressaltada com a bold, per tant no faria falta posar <strong><h2><p>I encara un altre títol</p><p>Amb el seu subtítol</p></h2> És incorrecte. No és necessari posar el títol entre <p>. Jo posaria: <h2>I encara un altre títol</h2> <h3>Amb el seu subtítol</h3> I després posaria el paràgraf que correspon al títol i subtítol entre <p></p><em class=enverd>Text en color verd</em> (Suposant que existeixuna classe enverd en el CSS) És incorrecte, falten les cometes <em class=”enverd”>Text en color verd</em><ul><li>Primera entrada <ul><li>Primera subentrada</li> <li>Segona subentrada</li>
  4. 4. <li>Tercera subentrada</li></li></ul> <li>Segona entrada</li> <ol><li>Primera subentrada</li> <li>Segona subentrada</li> <li>Tercera subentrada</li></ol> </ul> Incorrecte. El correcte seria: <ul> <li>Primera entrada <ul> <li>Primera subentrada</li> <li>Segona subentrada</li> <li>Tercera subentrada</li> </ul> </li> <li>Segona entrada <ol> <li>Primera subentrada</li> <li>Segona subentrada</li> <li>Tercera subentrada</li> </ol> </li> </ul>8 - (10 punts) De quines formes es poden especificar la grandària del text usant CSS?Quins són les diferències entre elles? I els avantatges i inconvenients de cadascunadelles? <font-size> Hi ha que posar la mida, exemple: Body { Font-size: 12px; } O utilitzant paraules clau: xx-small, x-small, small, medium, large, x-large, xx- large9 - (10 punts) Posa un exemple de pàgina web no accessible (desafortunadament, sónfàcils de trobar) i explica alguns dels motius pels quals no ho és. L’accessibilitat és tractar a tothom igual, encara que les persones tinguin algun tipus de discapacitat visual, motriu, etc. Un exemple: http://personales.com/espana/valencia/tortugas/Marinas.htm
  5. 5. (10 punts) Observeu la següent captura de pantalla:Mirar document adjunt “pac1.html” i “pac1.css” i “pac1b.html” i “pac1b.css” queestan dintre de la carpeta “paquita_ribas_pac1_ultima_pregunta”.Volem aconseguir el següent resultat: les imatges hauran de quedar envoltades d’unmarge de color gris de dos píxels de gruix i, a més, volem assegurar-nos que hi hagialmenys cinc píxels de separació amb qualsevol element que les envolti, amb el colordel fons. Indicació: consulteu el model de caixes.

×