{"id":335,"date":"2023-06-23T07:22:48","date_gmt":"2023-06-23T05:22:48","guid":{"rendered":"https:\/\/user0.gesem.es\/blog\/?p=335"},"modified":"2023-06-23T15:39:02","modified_gmt":"2023-06-23T13:39:02","slug":"dictat-dhtml-i-css","status":"publish","type":"post","link":"https:\/\/user0.gesem.es\/blog\/dictat-dhtml-i-css\/","title":{"rendered":"Dictat d&#8217;HTML i CSS"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Escriu l&#8217;HTML que es correspon a aquests esquemes. Has de tenir en compte que el fil <strong>blau<\/strong> es correspon a <em>sections<\/em>, el fil <strong>gris<\/strong> a <em>divs<\/em> i el fil <strong>taronja<\/strong> a <em>articles<\/em>. Les lletres corresponen al contingut de cada element (\u00abA\u00bb, \u00abB\u00bb,..). El n\u00famero nom\u00e9s indica el gr\u00e0fic, com a refer\u00e8ncia, no ha d&#8217;estar a l&#8217;HTML<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Recorda tabular l&#8217;HTML per representar visualment les jerarquies entre elements<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"430\" height=\"356\" src=\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-21.png\" alt=\"\" class=\"wp-image-336\" srcset=\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-21.png 430w, https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-21-300x248.png 300w\" sizes=\"auto, (max-width: 430px) 100vw, 430px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"424\" height=\"366\" src=\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-22.png\" alt=\"\" class=\"wp-image-337\" srcset=\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-22.png 424w, https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-22-300x259.png 300w\" sizes=\"auto, (max-width: 424px) 100vw, 424px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"422\" height=\"559\" src=\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-23.png\" alt=\"\" class=\"wp-image-338\" srcset=\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-23.png 422w, https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-23-226x300.png 226w\" sizes=\"auto, (max-width: 422px) 100vw, 422px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"453\" height=\"575\" src=\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-24.png\" alt=\"\" class=\"wp-image-339\" srcset=\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-24.png 453w, https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-24-236x300.png 236w\" sizes=\"auto, (max-width: 453px) 100vw, 453px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"460\" height=\"564\" src=\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-25.png\" alt=\"\" class=\"wp-image-340\" srcset=\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-25.png 460w, https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-25-245x300.png 245w\" sizes=\"auto, (max-width: 460px) 100vw, 460px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Escriu el selector CSS que correspon a cadascun dels seg\u00fcents elements:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Tots els t\u00edtols de segon nivell<\/li>\n\n\n\n<li>Tots els t\u00edtols de segon nivell i tots els par\u00e0grafs<\/li>\n\n\n\n<li>Tots els <em>divs<\/em> que tenen la classe \u00abfila\u00bb<\/li>\n\n\n\n<li>Tots els fills de primer nivell de les <em>sections<\/em> amb la classe \u00abfila\u00bb<\/li>\n\n\n\n<li>Tots els <em>divs<\/em> que tenen la classe \u00abfila\u00bb i que estan a dins d&#8217;una <em>section<\/em><\/li>\n\n\n\n<li>Tots els <em>divs<\/em> amb la classe \u00abfila\u00bb que van darrera d&#8217;un <em>div<\/em> amb la classe \u00abentradeta\u00bb<\/li>\n\n\n\n<li>Tots els <em>divs<\/em> que tinguin les classes \u00abentradeta\u00bb i  \u00abesquerra\u00bb<\/li>\n\n\n\n<li>Tots els <em>divs<\/em> amb la classe \u00abentradeta\u00bb i tots els enlla\u00e7os amb la classe \u00abbotonet\u00bb<\/li>\n\n\n\n<li>Tots els h2 del footer<\/li>\n\n\n\n<li>La imatge i el par\u00e0graf del footer<\/li>\n\n\n\n<li>Els <em>h2<\/em>, els par\u00e0grafs (p) i el enlla\u00e7os (a) de qualsevol <em>section<\/em><\/li>\n\n\n\n<li>Els par\u00e0grafs que vagin darrera d&#8217;un altre par\u00e0graf<\/li>\n\n\n\n<li>Els par\u00e0grafs que siguin \u00faltim fill d&#8217;un <em>div<\/em><\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">M\u00e9s exercicis<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ara escriu regles  segons el que et demana l&#8217;enunciat. \u00c9s a dir: escriu el selector i les propietats.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>selector{\npropietat1: valor;\npropietat2: valor;\n...\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Dona un color de fons groc als elements que tinguin la id \u00abespecial\u00bb<\/li>\n\n\n\n<li>Dona als elements que tenen la classe \u00abalerta\u00bb un border de 1px  de color gris<\/li>\n\n\n\n<li>Dona un color de fons vermells als elements que tinguin les classes \u00abalerta\u00bb i tamb\u00e9 \u00abstop\u00bb (totes dues classes)<\/li>\n\n\n\n<li>Dona un color de fons verd als elements que tenen la classe alerta , per\u00f2 tamb\u00e9 la classe \u00abgo\u00bb (totes dues classes)<\/li>\n\n\n\n<li>Fes que els enlla\u00e7os siguin de color taronja quan el seu estat sigui \u00ablink\u00bb, verd quan sigui \u00abvisited\u00bb i sense subratllat al posar-nos a sobre.<\/li>\n\n\n\n<li>Fes que el primer element dins del div amb la classe \u00abcontainer\u00bb tingui una tipografia de 1.5rem i que la primera l\u00ednia d&#8217;aquest element tingui el text vermell (aqu\u00ed haur\u00e0s de fer un cerca a internet per trobar aquest pseudo element)<\/li>\n\n\n\n<li>Fes que les cel\u00b7les de les  files parells d&#8217;una taula tinguin el fons gris (#CCC) i les imparells blau (#00F)<\/li>\n\n\n\n<li>Fes que quasevol par\u00e0graf que segueixi un h2 sigui vermell<\/li>\n\n\n\n<li>Fes que les listes no tinguin estil de llista. A m\u00e9s, fes que els <em>li<\/em> de primer nivell tinguin un border a la part inferior gris i de 1px. Has de tenir en compte, que les llistes es poden enniuar i que, per tant, poden haver-hi <em>li<\/em> de segon, tercer,&#8230; nivells<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Exemple de llista enniuada:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;ul>\n&lt;li>Item primer nivell\n   &lt;ul>\n      &lt;li>Item segon nivell&lt;\/li>\n      &lt;li>Item segon nivell&lt;\/li>\n   &lt;\/ul>\n&lt;\/li>\n&lt;li>Item primer nivell\n   &lt;ul>\n      &lt;li>Item segon nivell&lt;\/li>\n      &lt;li>Item segon nivell&lt;\/li>\n   &lt;\/ul>\n&lt;\/li>\n&lt;\/ul><\/code><\/pre>\n\n\n\n<ul>\n<li>Item primer nivell\n   <ul>\n      <li>Item segon nivell<\/li>\n      <li>Item segon nivell<\/li>\n   <\/ul>\n<\/li>\n<li>Item primer nivell\n   <ul>\n      <li>Item segon nivell<\/li>\n      <li>Item segon nivell<\/li>\n   <\/ul>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Escriu l&#8217;HTML que es correspon a aquests esquemes. Has de tenir en compte que el fil blau es correspon a sections, el fil gris a divs i el fil taronja a articles. Les lletres corresponen al contingut de cada element (\u00abA\u00bb, \u00abB\u00bb,..). El n\u00famero nom\u00e9s indica el gr\u00e0fic, com a refer\u00e8ncia, no ha d&#8217;estar a&hellip; <a class=\"more-link\" href=\"https:\/\/user0.gesem.es\/blog\/dictat-dhtml-i-css\/\">Continueu llegint <span class=\"screen-reader-text\">Dictat d&#8217;HTML i CSS<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-335","post","type-post","status-publish","format-standard","hentry","category-uncategorized","entry"],"_links":{"self":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/posts\/335","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/comments?post=335"}],"version-history":[{"count":11,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/posts\/335\/revisions"}],"predecessor-version":[{"id":352,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/posts\/335\/revisions\/352"}],"wp:attachment":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/media?parent=335"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/categories?post=335"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/tags?post=335"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}