LEW PAC3 Villarreal Quintana Jaume

Llenguatges i estàndards web_PAC3

Prova d’Avaluació Contínua-3 Sobre “respostes.html” (http://cv.uoc.edu/~jvillarrealq/respostes.html) entitats HTML (respostes.html)

Element utilitzat per crear divisions lògiques entre els diferents elements del document. El primer actua com a contenidor de tota la resta. (element de bloc)

Element utilitzat per marcar l’encapçalament del document. Semànticament indica que aquest és títol principal del document. (element de bloc)

Elements utilitzat per crear diferents llistes de definició. Cada llista es correspon amb

una de les preguntes de la pràctica. A l’element
hi queda inclosa la pregunta i

a l’element
la resposta. (element de bloc)

Element utilitzat per indicar que el contingut és un codi. Pot anar acompanyat de l’atribut class=”” per indicar de quint tipus de codi parlem. (element en línia) Elements utilitzat per crear diferents llistes d’enumeració amb vinyetes o símbols. (element de bloc) Element utilitzat per conservar la presentació de les línies de codi d’una de les primeres pàgines web. (element de bloc) Element utilitzat per marcar un trencament de línia. (element en línia) Element utilitzat per ressaltar visualment i semàntica certes parts del text. (element en línia) Element utilitzat per crear una taula. (element de bloc) Vull fer constar aquí que he optat per no utilitzat l’element perquè em generava problemes de representació amb Firefox. A l’utilitzar aquest element les vores de la taula apareixien mal representades. (element de bloc) -1- Llenguatges i estàndards web_PAC3 entitats CSS (respostes.html) body Regla d’estil que especifica: • marge i farcit. • color de fons. • aliniació i mida de font. • família i color de font. Aquestes especificacions seran heretades per la resta d’elements. #main #top ID adjudicat a l’element que especifica: • amplada, marge, vora i color de fons del contenidor. • sombrejat de la caixa. ID adjudicat a l’element per donar format a la part superior del document. Especifica: #foot • alçada i farcit. • color i imatge del fons. • aliniació, pes i mida de la font. • espai d’interlletrat. • color de la font. ID adjudicat a l’element per donar format a la part inferior del document. Especifica: .tit • alçada marge i farcit. • color i imatge del fons. • aliniació i mida de la font. Classe adjudicada a l’element per donar format al títol del document. Especifica: dl • marge. • color de fons. • vora dreta i esquerra. • aliniació, mida, família i color de la font. Selector adjudicat a l’element per donar format a les llistes de definició del document. Especifica: dl dt • marge. • espai interlinial. Selector de descendents per donar format als termes de les llistes de definició del document. Especifica: dd ul • marge, farcit i vora inferior. • color i imatge de fons. • pes i color de la font. Selector de descendents per donar format a llistes imbrincades dins de llistes de defnició. Especifica: -2- Llenguatges i estàndards web_PAC3 • .exemple marge i farcit. Classe adjudicada a l’element . Especifica: • vora. • color fons, • mida i color de la font. .exemple, Classe adjudicada a l’element i selector de les taules del table document. Especifica: • table caption Selector de les taules del document. Especifica: • aliniació del text. • superposició de vores. • mida de la font. Selector del títol les taules del document. Especifica: • th, td li pes i color de la font. Selector de les taules del document. Especifica: • ul amplada, marge i farcit. vora de les cel·les. Selector de llistes no ordenades del document. Especifica: • marge superior. • farcit Selector dels elements que formen llistes no ordenades del document. Especifica: • code Selector d’element. Especifica: • #input thead #input tbody farcit dret. pes de la font. Selector del capçal de taula relacionat amb l’ID #input. Especifica: • color de fons i de la font. Selector del cosde taula relacionat amb l’ID #input. Especifica: • color de fons. #input Classe relacionada amb l’ID #input, adjudicada a l’element . Pren la variable n com tr:nth- el nombre total de files que té la taula. Entre parèntesi s’indica child(2n) l’interval en què se succeirà l’acció i en quina posició començarà a aplicar la regla d’estil. En el nostre cas segueix un interval de dos (2n) i no té especificada la fila d’inici. Hauríem pogut començar, per exemple, a la segona final seguint un interval de 2 (2n+2). Especifica: • .codi color de fons. Classe adjudicada a l’element . Especifica: • amplada, amrge i farcit. • vora superior i inferior. • mida de la font. Els documents “respostes.html” i “respostes.css” han estat sotmesos a validació. Per fer-ho s'ha utilitzat: • validador de marcat HTML (X)HTML de documents web (W3C). • validador de CSS versió 2.1 i documents (X)HTML amb fulls d'estils (W3C). El document repostes.html ha validat de manera correcta. El document repostes.css ha presentat 4 errors atribuïbles al fet que les regles d’estil rebutjades són pròpies de les especificacions de CSS3, mentre que el validador ho fa sobre les especificacions de CSS 2.1. El llistat d’errors és el següent: 1. 2. 3. 4. 21 #main La propiedad -moz-box-shadow no existe : 0 0 10px #000000 0 0 10px #000000. 22 #main La propiedad -webkit-box-shadow no existe : 0 0 10px #000000 0 0 10px #000000. 23 #main La propiedad box-shadow no existe en CSS versión 2.1 pero existe en : 0 0 10px #000000 0 0 10px #000000. 148 Pseudo-clase o pseudo-elemento :nth-child desconocido(a). -4- Llenguatges i estàndards web_PAC3 Sobre “taula.html” (http://cv.uoc.edu/~jvillarrealq/taula.html) SOBRE l’HTML DE LA TAULA S’ha generat certa controvèrsia al fòrum sobre el codi adient per fer una taula correcta a partir d’una casella que ha de quedar buida. En un primer moment vaig optar per deixar una cel·la buida, tot i saber que no era gens recomanable. En un segon moment, atenent a les indicacions de les especificacions, vaig combinar les dues cel·les utilitzant colspan=”2”, ubicant l’element a partir d’una regla d’estil que controlava el seu padding-left. A nivell presentacional el resultat era impecable però a nivell d’accessibilitat tornava a sorgir un problema: combinar les dues cel·les provocava que l’atribut scope=”col” adjudicat al tag th perdés sentit, doncs la cel·la ja no es corresponia amb una columna sinó a dues. Aquesta incongruència representa un clar inconvenient d’accessibilitat per als lectors de pantalla. Per aquesta raó, i contravenint la lògica de les especificacions, he decidit retornar a la primera opció. Tot i que es trenca una especificació, sno hi ha cap problema de validació i es fa primar l’accessibilitat abans que altres criteris... espero no haver comès una errada greu. entitats HTML (taula.html) Element utilitzat per crear divisions lògiques entre els diferents elements del document. El primer actua com a contenidor de tota la resta. (element de bloc) Element utilitzat per donar títol a una taula. (element de bloc) Elements utilitzats per estructurar els elements dins d’una taula. L’element va acompananyat de l’atribut scope. . .estret Especifica: • amplada. • família de font. • pes de la font. • aliniació. #input Classe relacionada amb l’ID #input, adjudicada a l’element . .ample Especifica: • aliniació. #input Classe relacionada amb l’ID #input, adjudicada a l’element . .estret, Especifica: #input • aliniació vertical. .ample -3- Llenguatges i estàndards web_PAC3 #input th, Selector de l’element i classe relacionada amb l’ID #input, #input adjudicada a l’element . Especifica: .estret, • farcit. #input • vora .ample • aliniació vertical. #input Pseudoclasse adjudicada a l’element Element utilitzat per crear una taula. (element de bloc) Elements utilitzats per estructurar els elements dins d’una taula. L’element entitats CSS (taula.html) body Regla d’estil que especifica: • marge i farcit. • color de fons. • aliniació i mida de font. • família i color de font. Aquestes especificacions seran heretades per la resta d’elements. #main ID adjudicat a l’element que especifica: • amplada i marge. -5- Llenguatges i estàndards web_PAC3 #top ID adjudicat a l’element per donar format a la part superior del document. Especifica: #foot • alçada i farcit. • color i imatge del fons. • aliniació del text. • pes i mida de la font. • espai d’interlletrat. • color de la font. ID adjudicat a l’element per donar format a la part inferior del document. Especifica: table • alçada marge i farcit. • color i imatge del fons. • aliniació del text. • mida de la font. Selector de la taula del document. Especifica: • aliniació del text. • superposició de vores. • mida de la font. tbody Pseudoclasse adjudicada a l’element . Pren la variable n com el nombre total tr:nth- de files que té la taula. Entre parèntesi s’indica l’interval en què se succeirà l’acció i child(2n+1) en quina posició començarà a aplicar la regla d’estil. En el nostre cas segueix un interval de dos començant a la fila 1 (2n+1). Especifica: • caption .destacat Selector de l’encapçalament de la taula del document. Especifica: • farcit • alianiació. • mida i pes de la font. Classe adjudicada a l’element Element utilitzat per donar títol a una taula. (element de bloc) va acompananyat de l’atribut scope. (elements de bloc) . Especifica: • thead thead th tbody pes de la font. Selector de la fila de capçalera de la taula del document. Especifica: • color de fons. • mida i color de la font. Selector de la fila de capçalera de la taula del document. Especifica: • aliniaició. • pes de la font. Selector del cos de la taula del document. Especifica: • th td color de fons. color de fons. Selector dels elements de la taula del document. Especifica: • amplada. • aliniació de text i aliniaicó vertical. • vora inferior. -6- Llenguatges i estàndards web_PAC3 • farcit. Selector de la fila de capçalera de la taula del document. Especifica: th • aliniaició. • pes de la font. Els documents “taula.html” i “taula.css” han estat sotmesos a validació. Per fer-ho s'ha utilitzat: • validador de marcat HTML (X)HTML de documents web (W3C). • validador de CSS versió 2.1 i documents (X)HTML amb fulls d'estils (W3C). El document repostes.html ha validat de manera correcta. El document repostes.css ha presentat 4 errors: 5. 44 Pseudo-clase o pseudo-elemento :nth-child desconocido(a). Aquest error s’atribueix al fet que les regles d’estil rebutjades són pròpies de les especificacions de CSS3. -7- Llenguatges i estàndards web_PAC3 Sobre “formulari.html” (http://cv.uoc.edu/~jvillarrealq/formulari.html) entitats HTML (formulari.html) Element utilitzat per crear divisions lògiques entre els diferents elements del document. El primer actua com a contenidor de tota la resta. (element de bloc) Element utilitzat per marcar l’encapçalament del document. Semànticament indica que aquest és títol principal del document. (element de bloc) Element destinat a la creació de formularis. Conté tres atributs: • id: dóna identitat única dins de la pàgina. • action: especifica l’script que enviarà les dades al servidor. • method: especifica el mètode utilitzat per enviar les dades. En el nostre cas serà post. (element de bloc) Elements utilitzats per crear una llista no ordenada que contindrà tots els controls del formulari. (element de bloc) Element emprat per etiquetar els controls del formulari. Conté l’atribut for=””. (element en línia) Element utilitzat per especificar el tipus d’entrada que guarda cada control. Conté els atributs type|name|id|value. (element en línia) Element utilitzat per crear un bloc d’introducció de text. (element en bloc) entitats CSS (formulari.html) body Regla d’estil que especifica: • marge i farcit. • color de fons. • aliniació, família i color de font. Aquestes especificacions seran heretades per la resta d’elements. -8- Llenguatges i estàndards web_PAC3 #main ID adjudicat a l’element <div> que especifica: • #top amplada i marge del contenidor. ID adjudicat a l’element <div> per donar format a la part superior del document. Especifica: h3 #formRecursos ul li • alçada i farcit. • color i imatge del fons. • aliniació, pes, mida i color de la font. • espai d’interlletrat. Selector de títol. Especifica: • marge i farcit esquerre. • vora inferior. • mida de la font i interliniat. ID adjudicat a l’element <form>. Especifica: • amplada i marge. • interliniat. Selector de llista no ordenada. Especifica: • marge i farcit. • anul·la els símbols de llista. Selector dels elements de llista no ordenada. Especifica: • posició flotant a l'esquerra perquè els altres elements flueixin per la dreta. • label farcit i especificaicons de fons. Selector de les etiquetes de control del formulari. Especifica: • visualització de l'element com element de bloc. • posició flotant a l'esquerra perquè els altres elements flueixin per la dreta. input • clear per evitar que l'element superior flueixi també a l'esquerra. • amplada, farcit i aliniació de text. Selector de control del formulari. Especifica: • fieldset Selector d'espai contenidor de controls. Especifica: • fieldset label .botoRadio vora i farcit. Selector de decendents. Especifica: • marge i amplada. • visualització dels elements com elements en línia. • eliminació de la posició flotant a l'esquerra. Classe adjudicada a l'element input de tipus radio. Especifica: • select farcit, amplada i vora. marge i amplada. Selector de control de selecció del formulari. Especifica: • amplada. • visualització dels elements com elements de bloc. -9- Llenguatges i estàndards web_PAC3 Selector de la caixa d'introducció de text. Especifica: textarea • amplada i farcit. • alçada mínima. ID adjudicat a l’element <li> que conté el botó de tramesa <submit>. #submit Especifica: Els • marge esquerre. • elimina farcit. • elimina especificacions de fons. documents “impremta.html” i “impremta.css” han estat validats correctament. Per fer-ho s'ha utilitzat: • validador de marcat HTML (X)HTML de documents web (W3C). • validador de CSS i documents (X)HTML amb fulls d'estils (W3C). -10- </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form role="form" method="post" action="https://qdoc.tips/report/lew-pac3-villarreal-quintana-jaume-pdf-free" style="border: none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Report "LEW PAC3 Villarreal Quintana Jaume"</h4> </div> <div class="modal-body"> <div class="form-group"> <label>Your name</label> <input type="text" name="name" required="required" class="form-control" /> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" required="required" class="form-control" /> </div> <div class="form-group"> <label>Reason</label> <select name="reason" required="required" class="form-control"> <option value="">-Select Reason-</option> <option value="pornographic" selected="selected">Pornographic</option> <option value="defamatory">Defamatory</option> <option value="illegal">Illegal/Unlawful</option> <option value="spam">Spam</option> <option value="others">Other Terms Of Service Violation</option> <option value="copyright">File a copyright complaint</option> </select> </div> <div class="form-group"> <label>Description</label> <textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"> Copyright © 2024 QDOC.TIPS. All rights reserved. About Us | Privacy Policy | Terms of Service | Copyright | Contact Us | Cookie Policy Sign In Email Password Remember me Forgot password? Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close

Elements utilitzats per estructurar els elements dins d’una taula. L’element	va	acompananyat de l’atribut scope.
. .estret Especifica: • amplada. • família de font. • pes de la font. • aliniació. #input Classe relacionada amb l’ID #input, adjudicada a l’element	. .ample Especifica: • aliniació. #input Classe relacionada amb l’ID #input, adjudicada a l’element	. .estret, Especifica: #input • aliniació vertical. .ample -3- Llenguatges i estàndards web_PAC3 #input th, Selector de l’element	i classe relacionada amb l’ID #input, #input adjudicada a l’element	. Especifica: .estret, • farcit. #input • vora .ample • aliniació vertical. #input Pseudoclasse adjudicada a l’element

LEW PAC3 Villarreal Quintana Jaume

Recommend Documents