Els navegadors<\/strong> s\u00f3n els responsables del processament i transformaci\u00f3 dels elements en documents representats. Tamb\u00e9 per\u00f2, hi ha elements no tenen una representaci\u00f3 tangible: el seu prop\u00f2sit \u00e9s el de proveir significats sem\u00e0ntics a la porci\u00f3 de document que afecten.<\/p>\n Un element HTML<\/strong> est\u00e0 normalment compost per dues etiquetes: l’etiqueta d’obertura i la etiqueta de tancament. Una etiqueta d’obertura es compon del nom de l’element entre els s\u00edmbols menor-que “<” i major-que “>”. L’etiqueta de tancament es construeix de la mateixa manera que la d’obertura per\u00f2, en aquest cas, el nom de l’element \u00e9s precedit per una barra inclinada (“\/”).<\/p>\n Exemple. Etiquetes d’obertura i tancament per a l’element b.<\/em><\/p>\n Com es pot veure, hi ha les etiquetes d’obertura (“<b>”) i de tancament (“<\/b>”). Ara, el text que veus, “El Bergued\u00e0”, \u00e9s conegut com el contingut de l’element.<\/p>\n L\u2019ordre de tancament<\/strong> de les etiquetes \u00e9s des de l\u2019\u00faltima oberta fins a la primera.<\/p>\n Exemple. Ordre de tancament. <\/em><\/p>\n A m\u00e9s d’etiquetes i contingut, un element pot tenir atributs i esdeveniments<\/strong>. Els atributs defineixen valors o propietats per a ser utilitzades pels navegadors en el processament del document, els esdeveniments s\u2019usen per especificar comportaments o accions a ser exercides quan certes condicions es compleixen, com per exemple, quan l’usuari fa un clic sobre l’element.<\/p>\n Els atributs i esdeveniments comparteixen una mateixa sintaxi: s’han d’inserir dins de l’etiqueta d’obertura com una llista d’\u00edtems separats per espais, despr\u00e9s del nom de l’element i precedida per un espai. Cadascun d’aquests \u00edtems es compon d’un nom (per a l’atribut o esdeveniment), el signe igual (“=”) i el valor o funci\u00f3 (de vegades opcionalment) tancat entre cometes.<\/p>\n Exemple. Un element b amb un atribut (style) i un esdeveniment (onclick).<\/em><\/p>\n El contingut d’un element \u00e9s, en general, tot all\u00f2 que es troba entre les seves etiquetes<\/strong> d’obertura i tancament. Depenent de l’element, aix\u00f2 pot anar des d\u2019absolutament res a un tros de document HTML. Aquest contingut \u00e9s el que ser\u00e0 afectat per la funcionalitat o significat de l’element.<\/p>\n Per exemple, l’element <em> brinda \u00e8mfasi al seu contingut, i els navegadors habitualment mostren el seu text amb un estil de font particular per fer-ho sobresortir del text normal.<\/p>\n Exemple. Hi ha tres elements, cadascun amb un tipus diferent de contingut: el par\u00e0graf (element p), contenint a altres elements; una paraula amb \u00e8mfasi (element em), contenint nom\u00e9s text; i un bot\u00f3 (element input (type = button)), el qual \u00e9s un element buit.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/em><\/p>\n Els atributs s\u00f3n la forma que tenen els autors de definir propietats<\/strong> per a un element. Aquestes propietats habitualment canvien la manera com els navegadors interpreten l’element. Per exemple, l’element <a> insereix un enlla\u00e7 en el document, per\u00f2 l’atribut rel<\/a><\/em> indica la relaci\u00f3 entre el document actual (el que cont\u00e9 al vincle) i el recurs de dest\u00ed (al qual el vincle est\u00e0 apuntant).<\/p>\n Molts dels atributs en HTML5, aquells coneguts com a atributs globals<\/a>, estan disponibles per a tots els elements de l’est\u00e0ndard. Per\u00f2 la majoria dels elements tenen a m\u00e9s un conjunt d’atributs espec\u00edfics que nom\u00e9s estan disponibles o espec\u00edficament adaptats per a ells.<\/p>\n Els atributs s\u00f3n declarats indicant el seu nom, seguit d’un signe igual (=) i el valor assignat entre cometes. Hi ha alguns atributs, que nom\u00e9s poden prendre valors booleans (cert o fals), apliquen el seu valor tan sols amb la seva pres\u00e8ncia. En aquests casos, els atributs poden ser declarats amb nom\u00e9s indicar el seu nom.<\/p>\n En el seg\u00fcent exemple, l’element button t\u00e9 tres atributs presents: id i acceskey, que s\u00f3n atributs globals, i disabled (boole\u00e0), el qual no \u00e9s global per\u00f2 si que ho comparteixen un grup particular d’elements.<\/em><\/p>\n Els esdeveniments s\u00f3n mecanismes prove\u00efts per l’est\u00e0ndard HTML, dissenyats per permetre als autors l’execuci\u00f3 de programes en les seves p\u00e0gines web en resposta a la interacci\u00f3 de l’usuari o el sistema<\/strong>. El prop\u00f2sit d’un esdeveniment \u00e9s el d’associar una acci\u00f3, duta a terme per l’usuari o pel sistema (com, per exemple, quan l’usuari fa un clic sobre un element o el document acaba de carregar-se), amb una funci\u00f3 o script, escrit en un llenguatge del costat client, per exemple JavaScript.<\/p>\n La sintaxi usada per declarar esdeveniments \u00e9s molt similar a la sintaxi dels atributs i consta de: el nom de l’esdeveniment seguit pel signe igual (=) i la funci\u00f3 o l’script entre cometes.<\/p>\n En el seg\u00fcent exemple, hi trobem una s\u00e8rie d\u2019esdeveniments onMouseOver, que crida a la seva funci\u00f3 quan el punter del ratol\u00ed es posa sobre l’element, i onmouseout, que crida a la seva funci\u00f3 quan el punter del ratol\u00ed passa a estar fora de l’\u00e0rea ocupada per l’element. Les funcions declarades en els esdeveniments canvien el color de fons de l’element perqu\u00e8 puguis apreciar millor la funcionalitat.<\/em><\/p>\n \u00a0<\/em>https:\/\/www.w3schools.com\/js\/tryit.asp?filename=tryjs_dom_css_bgcolor<\/a><\/p>\n![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/Imagen-1-1.png\")
<\/p>\n![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/Imagen-1-2.png\")
<\/p>\n![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/Imagen-1-3.png\")
<\/p>\n2.\u00a0\u00a0 Contingut<\/h1>\n
![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/Imagen-1-4.png\")
<\/p>\n![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/Imagen-1-5-300x43.png\")
<\/p>\n3.\u00a0\u00a0 Atributs<\/h1>\n
![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/Imagen-1-6.png\")
<\/p>\n4.\u00a0\u00a0 Esdeveniments<\/h1>\n
![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/Imagen-1-7.png\")
<\/em><\/p>\n![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/Captura-de-Pantalla-2019-01-16-a-les-18.43.54.png\")
<\/p>\n
![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/Imagen-1-8.png\")
<\/p>\n![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/Imagen-1-9.png\")
<\/p>\n","protected":false},"excerpt":{"rendered":"