{"id":262,"date":"2020-05-24T12:27:54","date_gmt":"2020-05-24T10:27:54","guid":{"rendered":"https:\/\/edutictac.es\/sanja\/?p=262"},"modified":"2020-05-24T12:27:54","modified_gmt":"2020-05-24T10:27:54","slug":"pagina-web-aparenca","status":"publish","type":"post","link":"https:\/\/edutictac.es\/blog\/sanja\/2020\/05\/24\/pagina-web-aparenca\/","title":{"rendered":"P\u00e0gina web. Aparen\u00e7a"},"content":{"rendered":"\n

En aquesta pr\u00e0ctica aprendr\u00e0s a donar format b\u00e0sic a una p\u00e0gina web. <\/p>\n\n\n\n

Per on comencem?<\/strong> En les dues pr\u00e0ctiques anteriors hem estat definint l’estructura d’una p\u00e0gina web utilitzant els elements b\u00e0sics de HTML. Hem apr\u00e9s qu\u00e8 s\u00f3n les etiquetes i qu\u00e8 s\u00f3n els atributs dels diferents elements. Aix\u00ed, hem emprat els elements b\u00e0sic com: t\u00edtols de seccions, imatges, enlla\u00e7os a altres p\u00e0gines web, par\u00e0grafs i llistes. <\/p>\n\n\n\n

En cap moment hem canviat l’aparen\u00e7a dels elements, \u00e9s a dir: la gr\u00e0nd\u00e0ria, estil de font, tipus vinyeta, els colors de fons\/primer pla. Tot aix\u00f2 correspon a la definici\u00f3 dels estils. <\/p>\n\n\n\n

El HTML es complementa amb CSS per a definir l’aparen\u00e7a de la p\u00e0gina web. Entra en aquesta p\u00e0gina web<\/a> i comprova com canvia l’aparen\u00e7a depenent dels estils definits.<\/p>\n\n\n\n

Com seguim? <\/strong>Els fulls d’estil s’apliquen en cascada. Aix\u00f2 vol dir que primer s’aplica el que est\u00e0 definit a nivel general i despr\u00e9s es pot anar especificant. Per exemple: <\/p>\n\n\n\n

  1. A nivell d’element<\/span>. Tots els par\u00e0grafs tenen el mateix estil el definit per a l’etiqueta <p><\/code><\/li>
  2. A nivell de classe<\/span>. Tots els par\u00e0grafs que s\u00f3n el subt\u00edtol de la not\u00edcia <p class=\"subtitol><\/code><\/li>
  3. A nivell d’identificador<\/span>. El par\u00e0graf que s’identifica amb un identificador. Nom\u00e9s hi haur\u00e0 un \u00fanic element en tot el document amb aquest identificador. <p id=\u00bbespecial\u00bb><\/li><\/ol>\n\n\n\n
    \"\"<\/figure>
    \n

    Una regla CSS t\u00e9 l’estructura mostrada en la imatge de l’esquerra. <\/p>\n\n\n\n

    Primer s’especifica la jerarquia de selectors, i dins de les claus les declaracions separades per punt i coma. Cada declaraci\u00f3 especifica una propietat i un valor separats per dos punts.<\/p>\n\n\n\n

    Pots trobar la documentaci\u00f3 de refer\u00e8ncia per a CSS en aquesta p\u00e0gina<\/a>: les diferents propietats dels diferents elements.<\/p>\n<\/div><\/div>\n\n\n\n

    Accedeix a aquesta p\u00e0gina<\/a> i realitza els exercicis guiats. Ficar\u00e0s en pr\u00e0ctica els conceptes explicats anteriorment. <\/p>\n\n\n\n

    Un dels elements m\u00e9s interessants a l’hora d’organitzar i donar aparen\u00e7a una web \u00e9s l’element <div><\/code>. L’altre important \u00e9s <span><\/code>. En aquest enlla\u00e7<\/a> tens una explicaci\u00f3 i un parell d’exercicis a realitzar per a veure la difer\u00e8ncia. Quan els acabes, realitza aquests 4 exercicis<\/a> que apliquen a l’element <div>.<\/p>\n\n\n\n

    I ara qu\u00e8? <\/strong>Aplicant els consells d’aquest v\u00eddeo<\/a>, intenta fer el teu curriculum en una p\u00e0gina web. <\/p>\n\n\n\n

    \"\"<\/figure>
    \n

    En la cap\u00e7alera estar\u00e0 el teu nom, centrat vertical i horitzontalment.<\/p>\n\n\n\n

    Els men\u00fa tindr\u00e0 enlla\u00e7os a les seccions del contingut.<\/p>\n\n\n\n

    En la part principal de contingut especificar\u00e0s la informaci\u00f3 important de cada etapa. <\/p>\n\n\n\n

    A la banda de la dreta estar\u00e0 una foto o avatar teu i un enlla\u00e7 a una p\u00e0gina externa.<\/p>\n\n\n\n

    En el peu estar\u00e0 el curs actual i assignatura.<\/p>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"

    En aquesta pr\u00e0ctica aprendr\u00e0s a donar format b\u00e0sic a una p\u00e0gina web. Per on comencem? En les dues pr\u00e0ctiques anteriors hem estat definint l’estructura d’una p\u00e0gina web utilitzant els elements b\u00e0sics de HTML. Hem apr\u00e9s qu\u00e8 s\u00f3n les etiquetes i qu\u00e8 s\u00f3n els atributs dels diferents elements. Aix\u00ed, hem emprat els elements b\u00e0sic com: t\u00edtols … Llegiu m\u00e9s<\/a><\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":""},"categories":[9,2],"tags":[24,25,48],"class_list":["post-262","post","type-post","status-publish","format-standard","hentry","category-4eso","category-practiques","tag-css","tag-div","tag-pagina-web"],"_links":{"self":[{"href":"https:\/\/edutictac.es\/blog\/sanja\/wp-json\/wp\/v2\/posts\/262","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/edutictac.es\/blog\/sanja\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/edutictac.es\/blog\/sanja\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/edutictac.es\/blog\/sanja\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/edutictac.es\/blog\/sanja\/wp-json\/wp\/v2\/comments?post=262"}],"version-history":[{"count":0,"href":"https:\/\/edutictac.es\/blog\/sanja\/wp-json\/wp\/v2\/posts\/262\/revisions"}],"wp:attachment":[{"href":"https:\/\/edutictac.es\/blog\/sanja\/wp-json\/wp\/v2\/media?parent=262"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/edutictac.es\/blog\/sanja\/wp-json\/wp\/v2\/categories?post=262"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/edutictac.es\/blog\/sanja\/wp-json\/wp\/v2\/tags?post=262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}