{"id":68,"date":"2019-01-14T18:54:35","date_gmt":"2019-01-14T16:54:35","guid":{"rendered":"http:\/\/localhost\/wordpress\/?page_id=68"},"modified":"2019-01-14T18:54:35","modified_gmt":"2019-01-14T16:54:35","slug":"introduccio","status":"publish","type":"page","link":"https:\/\/tutorial.bernatcortina.cat\/index.php\/html\/introduccio\/","title":{"rendered":"Introducci\u00f3"},"content":{"rendered":"<h1 style=\"text-align: justify;\">Qu\u00e8 trobar\u00e0s?<\/h1>\n<ul style=\"text-align: justify;\">\n<li>Els elements m\u00e9s comuns d\u2019HTML i CSS.<\/li>\n<li>Com resoldre dubtes quan tinguem problemes.<\/li>\n<li>Eines professionals del m\u00f3n real.<\/li>\n<\/ul>\n<p style=\"text-align: justify;\">Les definicions seran simplificades, assumint que tothom comen\u00e7a de zero. Per aix\u00f2 i per facilitar la comprensi\u00f3, els conceptes molts cops no seran 100% precisos per\u00f2 si correctes i pr\u00e0ctics. A banda d\u2019aix\u00f2 trobar\u00e0s enlla\u00e7os a <a href=\"https:\/\/www.w3c.es\/\">W3C<\/a> amb les definicions formals.<\/p>\n<h1 style=\"text-align: justify;\">Qu\u00e8 necessitem?<\/h1>\n<ul style=\"text-align: justify;\">\n<li>Un navegador.<\/li>\n<li>Un editor de codi o de text. (<a href=\"https:\/\/www.sublimetext.com\/\">Sublime Text<\/a> \u00e9s una bona opci\u00f3. Tamb\u00e9 n&#8217;hi ha d&#8217;online: <a href=\"https:\/\/codepen.io\/pen\/?editors=1000#0\">codeopen<\/a>).<\/li>\n<\/ul>\n<p style=\"text-align: justify;\"><strong>Nota:<\/strong><\/p>\n<p style=\"text-align: justify;\"><em>\u00c9s<\/em><em> possible que et soni algun software com Dreamweaver, Frontpage, etc. Personalment no en recomano cap d\u2019aquests per aprendre perqu\u00e8 inclouen botons que introdueixen codi, aix\u00f2 fa que molts cops s\u2019introdueixi codi que no es necessita o que no sabem qu\u00e8 significa, i per tant no aprenem i en cas d\u2019error no sabrem arreglar-ho.<\/em><\/p>\n<h1 style=\"text-align: justify;\">Conceptes<\/h1>\n<ul style=\"text-align: justify;\">\n<li><strong>Servidor web<\/strong>. Un ordinador que accepta requeriments HTTP de clients, normalment coneguts com a navegadors web, i de servir-los p\u00e0gines web, que normalment s\u00f3n documents HTML.<\/li>\n<li><strong>Allotjament web<\/strong>. Normalment conegut com a servidor. \u00c9s un ordinador connectat a internet en el que hi ha instal\u00b7lat un servidor HTTP i li podem sol\u00b7licitar recursos.<\/li>\n<li><strong>Navegador<\/strong>. \u00c9s un programa que ent\u00e9n i transforma el codi que rep des d\u2019un servidor en una cosa entenedora per una persona (una web, imatges, etc.)<\/li>\n<li><strong>Peticions HTTP<\/strong>. Quan el navegador vol accedir a una p\u00e0gina web a trav\u00e9s d\u2019HTTP, fa una petici\u00f3 al servidor.\n<ul style=\"list-style-type: circle;\">\n<li><strong>GET<\/strong>. Per a sol\u00b7licitar informaci\u00f3.<\/li>\n<li><strong>POST<\/strong>. Per enviar informaci\u00f3.\n<ul style=\"list-style-type: square;\">\n<li><strong>200<\/strong>. S&#8217;ha trobat correctament el fitxer\/recurs.<\/li>\n<li><strong>403<\/strong>. No tenim perm\u00eds per accedir al fitxer\/recurs.<\/li>\n<li><strong>404<\/strong>. El fitxer\/recurs que li hem sol\u00b7licitat no s&#8217;ha pogut trobar al disc dur (pot ser perqu\u00e8 no hi sigui o perqu\u00e8 la ruta \u00e9s incorrecta).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h1 style=\"text-align: justify;\">HTML<\/h1>\n<p style=\"text-align: justify;\"><strong>HTML<\/strong> (Hypertext Markup Language) \u00e9s un llenguatge de marques (que no \u00e9s el mateix que un llenguatge de programaci\u00f3) que serveix per definir l&#8217;estructura i la sem\u00e0ntica de la nostra p\u00e0gina web.<\/p>\n<p style=\"text-align: justify;\">HTML va ser creat i \u00e9s mantingut per una organitzaci\u00f3 sense \u00e0nim de lucre anomenada W3C. El W3C \u00e9s un consorci format per m\u00e9s de 400 empreses (entre elles les que desenvolupen els principals navegadors com Google, Microsoft, Mozilla, Apple &#8230;), etc.<\/p>\n<p style=\"text-align: justify;\">Des del consorci treballen cont\u00ednuament en definir com ha d&#8217;evolucionar aquest llenguatge i altres est\u00e0ndards que conformen la web. Posteriorment els fabricants de navegadors preparen els mateixos intentant aconseguir que un codi funcioni igual en tots els navegadors. Encara que no sempre \u00e9s aix\u00ed, cada vegada \u00e9s una realitat m\u00e9s propera.<\/p>\n<p style=\"text-align: justify;\">Per tant, al llarg dels anys les versions d&#8217;HTML han evolucionat: HTML 2.0 (1995), HTML 4.0 (1997), XHTML (2000), HTML5 (2014), etc. amb l&#8217;objectiu d&#8217;adaptar-se als nous temps i aix\u00ed donar suport a noves necessitats (estandarditzaci\u00f3 dels sistemes d&#8217;\u00e0udio, v\u00eddeo, etc.).<\/p>\n<h1 style=\"text-align: justify;\">DevTools<\/h1>\n<p style=\"text-align: justify;\">S\u00f3n eines de desenvolupador web que incorporen els navegadors, on podem obtenir diferent informaci\u00f3 tant sobre la comunicaci\u00f3 entre servidor i navegador, com del contingut del lloc web que estem visitant.<\/p>\n<ul>\n<li style=\"text-align: justify;\"><strong>Xarxa<\/strong>. Ens permet veure els recursos que recupera el nostre navegador utilitzant peticions HTTP mentre carregem i usem la web.<\/li>\n<li style=\"text-align: justify;\"><strong>Inspector\/Elements<\/strong>. Ens permet veure i modificar el codi de la web.<\/li>\n<li style=\"text-align: justify;\"><strong>Depurador\/Fonts (Sources)<\/strong>. Ens permet navegar pels fitxers que utilitza la web.<\/li>\n<\/ul>\n<h1 style=\"text-align: justify;\">Validaci\u00f3<\/h1>\n<p style=\"text-align: justify;\">Que el codi es mostri en el nostre navegador web com vol\u00edem no implica necess\u00e0riament que l&#8217;h\u00e0gim escrit b\u00e9.<\/p>\n<p style=\"text-align: justify;\">En moltes ocasions el navegador \u00e9s capa\u00e7 de detectar errors humans i corregir de manera autom\u00e0tica perqu\u00e8 l&#8217;usuari vegi b\u00e9 la p\u00e0gina, per\u00f2 aix\u00f2 no \u00e9s sempre aix\u00ed. Si volem assegurar-nos que la nostra p\u00e0gina est\u00e0 correctament escrita podem usar el <a href=\"https:\/\/validator.w3.org\/\">Validador d&#8217;HTML del W3C<\/a>, que a m\u00e9s en cas de trobar errors ens donar\u00e0 pistes sobre com resoldre&#8217;ls.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Qu\u00e8 trobar\u00e0s? Els elements m\u00e9s comuns d\u2019HTML i CSS. Com resoldre dubtes quan tinguem problemes. Eines professionals del m\u00f3n real. Les definicions seran simplificades, assumint que tothom comen\u00e7a de zero. Per aix\u00f2 i per facilitar la comprensi\u00f3, els conceptes molts cops no seran 100% precisos per\u00f2 si correctes i pr\u00e0ctics. A banda d\u2019aix\u00f2 trobar\u00e0s enlla\u00e7os &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/tutorial.bernatcortina.cat\/index.php\/html\/introduccio\/\" class=\"more-link\">Continua llegint <span class=\"screen-reader-text\">\u00abIntroducci\u00f3\u00bb<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":65,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-68","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Introducci\u00f3 | HTML &amp; CSS<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tutorial.bernatcortina.cat\/index.php\/html\/introduccio\/\" \/>\n<meta property=\"og:locale\" content=\"ca_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introducci\u00f3 | HTML &amp; CSS\" \/>\n<meta property=\"og:description\" content=\"Qu\u00e8 trobar\u00e0s? Els elements m\u00e9s comuns d\u2019HTML i CSS. Com resoldre dubtes quan tinguem problemes. Eines professionals del m\u00f3n real. Les definicions seran simplificades, assumint que tothom comen\u00e7a de zero. Per aix\u00f2 i per facilitar la comprensi\u00f3, els conceptes molts cops no seran 100% precisos per\u00f2 si correctes i pr\u00e0ctics. A banda d\u2019aix\u00f2 trobar\u00e0s enlla\u00e7os &hellip; Continua llegint \u00abIntroducci\u00f3\u00bb\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tutorial.bernatcortina.cat\/index.php\/html\/introduccio\/\" \/>\n<meta property=\"og:site_name\" content=\"HTML &amp; CSS\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/bernatcortina\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@bernatcortina\" \/>\n<meta name=\"twitter:label1\" content=\"Temps estimat de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minuts\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tutorial.bernatcortina.cat\/index.php\/html\/introduccio\/\",\"url\":\"https:\/\/tutorial.bernatcortina.cat\/index.php\/html\/introduccio\/\",\"name\":\"Introducci\u00f3 | HTML &amp; CSS\",\"isPartOf\":{\"@id\":\"https:\/\/tutorial.bernatcortina.cat\/#website\"},\"datePublished\":\"2019-01-14T16:54:35+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/tutorial.bernatcortina.cat\/index.php\/html\/introduccio\/#breadcrumb\"},\"inLanguage\":\"ca\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tutorial.bernatcortina.cat\/index.php\/html\/introduccio\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tutorial.bernatcortina.cat\/index.php\/html\/introduccio\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inici\",\"item\":\"https:\/\/tutorial.bernatcortina.cat\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML\",\"item\":\"https:\/\/tutorial.bernatcortina.cat\/index.php\/html\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Introducci\u00f3\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/tutorial.bernatcortina.cat\/#website\",\"url\":\"https:\/\/tutorial.bernatcortina.cat\/\",\"name\":\"HTML &amp; CSS\",\"description\":\"Fonaments d&#039;HTML i full d&#039;estils\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/tutorial.bernatcortina.cat\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ca\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Introducci\u00f3 | HTML &amp; CSS","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/tutorial.bernatcortina.cat\/index.php\/html\/introduccio\/","og_locale":"ca_ES","og_type":"article","og_title":"Introducci\u00f3 | HTML &amp; CSS","og_description":"Qu\u00e8 trobar\u00e0s? Els elements m\u00e9s comuns d\u2019HTML i CSS. Com resoldre dubtes quan tinguem problemes. Eines professionals del m\u00f3n real. Les definicions seran simplificades, assumint que tothom comen\u00e7a de zero. Per aix\u00f2 i per facilitar la comprensi\u00f3, els conceptes molts cops no seran 100% precisos per\u00f2 si correctes i pr\u00e0ctics. A banda d\u2019aix\u00f2 trobar\u00e0s enlla\u00e7os &hellip; Continua llegint \u00abIntroducci\u00f3\u00bb","og_url":"https:\/\/tutorial.bernatcortina.cat\/index.php\/html\/introduccio\/","og_site_name":"HTML &amp; CSS","article_publisher":"https:\/\/www.facebook.com\/bernatcortina","twitter_card":"summary_large_image","twitter_site":"@bernatcortina","twitter_misc":{"Temps estimat de lectura":"3 minuts"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tutorial.bernatcortina.cat\/index.php\/html\/introduccio\/","url":"https:\/\/tutorial.bernatcortina.cat\/index.php\/html\/introduccio\/","name":"Introducci\u00f3 | HTML &amp; CSS","isPartOf":{"@id":"https:\/\/tutorial.bernatcortina.cat\/#website"},"datePublished":"2019-01-14T16:54:35+00:00","breadcrumb":{"@id":"https:\/\/tutorial.bernatcortina.cat\/index.php\/html\/introduccio\/#breadcrumb"},"inLanguage":"ca","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tutorial.bernatcortina.cat\/index.php\/html\/introduccio\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/tutorial.bernatcortina.cat\/index.php\/html\/introduccio\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inici","item":"https:\/\/tutorial.bernatcortina.cat\/"},{"@type":"ListItem","position":2,"name":"HTML","item":"https:\/\/tutorial.bernatcortina.cat\/index.php\/html\/"},{"@type":"ListItem","position":3,"name":"Introducci\u00f3"}]},{"@type":"WebSite","@id":"https:\/\/tutorial.bernatcortina.cat\/#website","url":"https:\/\/tutorial.bernatcortina.cat\/","name":"HTML &amp; CSS","description":"Fonaments d&#039;HTML i full d&#039;estils","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tutorial.bernatcortina.cat\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ca"}]}},"_links":{"self":[{"href":"https:\/\/tutorial.bernatcortina.cat\/index.php\/wp-json\/wp\/v2\/pages\/68","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tutorial.bernatcortina.cat\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tutorial.bernatcortina.cat\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tutorial.bernatcortina.cat\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tutorial.bernatcortina.cat\/index.php\/wp-json\/wp\/v2\/comments?post=68"}],"version-history":[{"count":0,"href":"https:\/\/tutorial.bernatcortina.cat\/index.php\/wp-json\/wp\/v2\/pages\/68\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/tutorial.bernatcortina.cat\/index.php\/wp-json\/wp\/v2\/pages\/65"}],"wp:attachment":[{"href":"https:\/\/tutorial.bernatcortina.cat\/index.php\/wp-json\/wp\/v2\/media?parent=68"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}