diff options
Diffstat (limited to 'files/ca/learn')
87 files changed, 23017 insertions, 0 deletions
diff --git a/files/ca/learn/accessibility/accessibility_troubleshooting/index.html b/files/ca/learn/accessibility/accessibility_troubleshooting/index.html new file mode 100644 index 0000000000..170f46a570 --- /dev/null +++ b/files/ca/learn/accessibility/accessibility_troubleshooting/index.html @@ -0,0 +1,122 @@ +--- +title: 'Avaluació: solució de problemes d''accessibilitat' +slug: Learn/Accessibility/Accessibility_troubleshooting +translation_of: Learn/Accessibility/Accessibility_troubleshooting +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}</div> + +<p class="summary">A l'avaluació d'aquest mòdul, us presentem un lloc senzill amb diversos problemes d'accessibilitat que haureu de diagnosticar i solucionar.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td>Coneixement bàsic d'informàtica, comprensió bàsica d’HTML, CSS i JavaScript, <a href="/ca/docs/Learn/Accessibility">comprensió dels articles anteriors del curs</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Posar a prova els coneixements bàsics dels fonaments d'accessibilitat.</td> + </tr> + </tbody> +</table> + +<h2 id="Punt_de_partida">Punt de partida</h2> + +<p>Per començar aquesta avaluació, heu d'agafar el <a href="https://github.com/mdn/learning-area/blob/master/accessibility/assessment-start/assessment-files.zip?raw=true">ZIP que conté els fitxers que formen l'exemple</a>. Descomprimiu el contingut en un directori nou en algun lloc de l'ordinador local.</p> + +<p>Com a alternativa, podeu fer servir un lloc com <a href="https://glitch.com/">JSBin</a> o <a href="https://glitch.com/">Glitch</a> per fer la vostra avaluació. Podeu enganxar l'HTML, CSS i JavaScript en un d'aquests editors en línia. Si l'editor en línia que utilitzeu no té un panell CSS / JS separat, no dubteu a posar-los en elements <code><style></code> / <code><script></code> adequats.</p> + +<p>El lloc d'avaluació acabat hauria de ser així:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14555/assessment-site-finished.png" style="border-style: solid; border-width: 1px; display: block; height: 457px; margin: 0px auto; width: 800px;"></p> + +<p>Veureu algunes diferències / problemes amb la visualització de l’estat inicial de l’avaluació; això es deu principalment a les diferències en el marcatge, que al seu torn provoquen alguns problemes d’estil, ja que el CSS no s’aplica correctament. No us preocupeu, solucionareu aquests problemes a les properes seccions.</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> si us quedeu atrapats, demaneu-nos ajuda; consulteu la secció {{anch("Avaluació o ajuda addicional")}} a la part inferior d'aquesta pàgina.</p> +</div> + +<h2 id="Brífing_del_projecte">Brífing del projecte</h2> + +<p>Per a aquest projecte, se us presenta un lloc de natura fictícia que mostra un article "factual" sobre els óssos. Tal com està, té diversos problemes d’accessibilitat: la vostra tasca és explorar el lloc existent i solucionar-los al màxim de les vostres capacitats, responent a les preguntes que es donen a continuació.</p> + +<h3 id="Color">Color</h3> + +<p>El text és difícil de llegir a causa de l’esquema de colors actual. Podeu fer una prova del contrast de color actual (text / fons), informar dels resultats de la prova i després corregir-la canviant els colors assignats?</p> + +<h3 id="HTML_semàntic">HTML semàntic</h3> + +<ol> + <li>El contingut encara no és gaire accessible: informeu del que passa quan intenteu navegar-hi mitjançant un lector de pantalla.</li> + <li>Podeu actualitzar el text de l'article per facilitar la navegació dels usuaris de lectors de pantalla?</li> + <li>La part del menú de navegació del lloc (marcada per <code><div class = "nav"> </div></code>) es podria fer més accessible posant-la en un element semàntic HTML5 adequat. A quin s'ha d'actualitzar? Feu l'actualització.</li> +</ol> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> haureu d'actualitzar els selectors de regles CSS que donen estil a les etiquetes als seus equivalents adequats per als encapçalaments semàntics. Un cop afegiu elements de paràgraf, notareu que l'estil té un aspecte millor.</p> +</div> + +<h3 id="Les_imatges">Les imatges</h3> + +<p>Actualment, les imatges no són accessibles als usuaris de lectors de pantalla. Podeu solucionar-ho?</p> + +<h3 id="El_reproductor_dàudio">El reproductor d'àudio</h3> + +<ol> + <li>El reproductor <code><audio></code> no és accessible per a persones amb discapacitat auditiva (sordes). Podeu afegir algun tipus d'alternativa accessible per a aquests usuaris?</li> + <li>El reproductor <code><audio></code> no és accessible per a aquells que utilitzen navegadors antics que no admeten àudio HTML5. Com es pot permetre que continuïn accedint a l'àudio?</li> +</ol> + +<h3 id="Els_formularis"><font>Els formularis</font></h3> + +<ol> + <li>A l'element <code><input></code> del formulari de cerca de la part superior se li podria posar una etiqueta, però no volem afegir una etiqueta de text visible que pugui malmetre el disseny i que no sigui realment necessària per als usuaris vidents. Com es pot afegir una etiqueta que només sigui accessible per als lectors de pantalla?</li> + <li>Els dos elements <code><input></code> del formulari de comentaris tenen etiquetes de text visibles, però no s’associen sense ambigüitats amb les seves etiquetes; com ho podem aconseguir? Tingueu en compte que també haureu d’actualitzar algunes de les regles CSS.</li> +</ol> + +<h3 id="El_control_de_mostrar_amagar_comentaris">El control de mostrar / amagar comentaris</h3> + +<p>El botó de control de mostrar / amagar comentaris no és accessible per teclat actualment. Es pot fer accessible al teclat, tant pel que fa a donar-hi focus mitjançant la tecla de tabulació com per activar-lo amb la tecla de retorn?</p> + +<h3 id="La_taula">La taula</h3> + +<p>Actualment, la taula de dades no és gaire accessible: és difícil per als usuaris de lectors de pantalla associar files i columnes de dades, i la taula tampoc no té cap mena de resum per deixar clar què mostra. Podeu afegir algunes funcions al vostre codi HTML per solucionar aquest problema?</p> + +<h3 id="Altres_consideracions">Altres consideracions?</h3> + +<p>Podeu enumerar dues idees més per millorar que faran que el lloc web sigui més accessible?</p> + +<h2 id="Avaluació_o_ajuda_addicional">Avaluació o ajuda addicional</h2> + +<p>Si voleu que el vostre treball sigui avaluat o esteu atrapats i voleu demanar ajuda:</p> + +<ol> + <li>Poseu el vostre treball en un editor compartible en línia com CodePen, jsFiddle o Glitch.</li> + <li>Escriviu un missatge demanant avaluació i/o ajuda a <a href="https://discourse.mozilla.org/c/mdn/learn">la categoria d’aprenentatge del fòrum Discourse de la MDN</a>. La vostra publicació ha d'incloure: + <ul> + <li>Un títol descriptiu com ara "Avaluació per solucionar problemes d'accessibilitat".</li> + <li>Detalls del que ja heu provat i del que voleu que fem. P.ex. si esteu atrapats i necessiteu ajuda o voleu una valoració. + <ul> + <li>Un enllaç a l'exemple que vulgueu que s'avalui o amb el qual necessiteu ajuda en un editor compartible en línia (tal com s'esmenta al pas 1 anterior). Aquesta és una bona pràctica a adquirir: és molt difícil ajudar algú amb un problema de codi si no podeu veure el seu codi.</li> + <li>Un enllaç a la pàgina de tasca o avaluació real, de manera que podem trobar la pregunta amb la qual voleu obtenir ajuda.</li> + </ul> + </li> + </ul> + </li> +</ol> + +<p><font>{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}</font></p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li> +</ul> diff --git a/files/ca/learn/accessibility/css_and_javascript/index.html b/files/ca/learn/accessibility/css_and_javascript/index.html new file mode 100644 index 0000000000..28aa1b9651 --- /dev/null +++ b/files/ca/learn/accessibility/css_and_javascript/index.html @@ -0,0 +1,355 @@ +--- +title: Bones pràctiques d'accessibilitat en CSS i JavaScript +slug: Learn/Accessibility/CSS_and_JavaScript +translation_of: Learn/Accessibility/CSS_and_JavaScript +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}</div> + +<p class="summary">El CSS i el JavaScript, quan s’utilitzen correctament, també tenen el potencial de permetre experiències web accessibles ... o poden perjudicar significativament l’accessibilitat si s’utilitzen malament. Aquest article descriu algunes de les pràctiques recomanades amb CSS i JavaScript que s’han de tenir en compte per garantir que fins i tot el contingut complex sigui el més accessible possible.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td>Alfabetització bàsica en informàtica, comprensió bàsica d’HTML, CSS i JavaScript, i comprensió de <a href="/ca/docs/Learn/Accessibility/Que_es_accessibilitat">què és l’accessibilitat.</a></td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Familiaritzar-vos amb l’ús adequat de CSS i JavaScript als vostres documents web per maximitzar l’accessibilitat i no restar-li importància.</td> + </tr> + </tbody> +</table> + +<h2 id="CSS_i_JavaScript_són_accessibles">CSS i JavaScript són accessibles?</h2> + +<p>CSS i JavaScript no tenen la mateixa importància immediata per a l’accessibilitat que l’HTML, però tot i això poden ajudar o perjudicar l’accessibilitat, segons com s’utilitzin. Dit d'una altra manera, és important que tingueu en compte alguns consells sobre bones pràctiques per assegurar-vos que l'ús de CSS i JavaScript no arruïni l'accessibilitat dels vostres documents.</p> + +<h2 id="CSS">CSS</h2> + +<p>Comencem considerant CSS.</p> + +<h3 id="Semàntica_correcta_i_expectatives_dels_usuaris">Semàntica correcta i expectatives dels usuaris</h3> + +<p>És possible utilitzar CSS per fer que qualsevol element HTML sembli qualsevol cosa, però això no vol dir que ho hàgiu de fer. Tal com hem esmentat amb freqüència en el nostre article <a href="/ca/docs/Learn/Accessibility/HTML">HTML: Una bona base per a l'accessibilitat</a>, heu d’utilitzar l’element semàntic adequat per a cada funcionalitat, sempre que sigui possible. Si no ho feu, pot causar problemes de confusió i usabilitat per a tothom, però sobretot per als usuaris amb discapacitat. L’ús de semàntica correcta té molt a veure amb les expectatives dels usuaris: els elements tenen un aspecte i un comportament determinats segons la seva funcionalitat, i els usuaris esperen aquestes convencions habituals.</p> + +<p>Per exemple, un usuari de lector de pantalla no pot navegar per una pàgina a través dels seus elements d’encapçalament si el desenvolupador no ha utilitzat adequadament elements d’encapçalament per marcar el contingut. De la mateixa manera, un encapçalament perd el seu propòsit visual si hi apliqueu estil perquè no sembli un encapçalament.</p> + +<h4 id="Estructura_de_contingut_textual_estàndard">Estructura de contingut textual "estàndard"</h4> + +<p>Encapçalaments, paràgrafs, llistes — el contingut bàsic del text de la vostra pàgina:</p> + +<pre class="brush: html notranslate"><h1>Encapçalament</h1> + +<p>Paràgraf</p> + +<ul> + <li>La meva llista</li> + <li>té dos ítems.</li> +</ul></pre> + +<p>Un CSS típics pot tenir aquest aspecte:</p> + +<pre class="brush: css notranslate">h1 { + font-size: 5rem; +} + +p, li { + line-height: 1.5; + font-size: 1.6rem; +}</pre> + +<p>Hauríeu de:</p> + +<ul> + <li>Seleccionar mides de lletra, alçades de línia, espaiat entre lletres, etc. raonables per fer que el vostre text sigui lògic, llegible i còmode de llegir.</li> + <li>Assegurar-vos que els títols destaquen del cos de text, normalment grans i en negreta, com l'estil predeterminat. Les vostres llistes haurien de semblar llistes.</li> + <li>El color del text hauria de contrastar bé amb el color de fons.</li> +</ul> + +<p>Consulteu <a href="/ca/docs/Learn/HTML/Introducci%C3%B3_al_HTML/Fonaments_de_text_HTML">Fonaments de text HTML </a>i <a href="/ca/docs/Learn/CSS/Estilitzar_text">Estilitzar text</a> per obtenir més informació.</p> + +<h4 id="Text_emfatitzat">Text emfatitzat</h4> + +<p>Marcatge en línia que confereix un èmfasi específic al text que embolcalla:</p> + +<pre class="brush: html notranslate"><p>L'aigua està <em>molt calenta</em>.</p> + +<p><span class="tlid-translation translation" lang="ca"><span title="">Les gotes d’aigua que es recullen a les superfícies s’anomenen <strong>condensació</strong>.</p></span></span> </pre> + +<p>Potser voldreu afegir un color simple al text emfatitzat:</p> + +<pre class="brush: css notranslate">strong, em { + color: #a60000; +}</pre> + +<p>Tot i això, poques vegades haureu d'aplicar estil als elements d’èmfasi de manera significativa. Les convencions estàndard del text en negreta i cursiva són molt reconeixibles i canviar l’estil pot provocar confusió. Per obtenir més informació sobre l’èmfasi, vegeu <a href="/ca/docs/Learn/HTML/Introducci%C3%B3_al_HTML/Fonaments_de_text_HTML#%C3%88mfasi_i_import%C3%A0ncia">Èmfasi i importància</a>.</p> + +<h4 id="Abreviatures">Abreviatures</h4> + +<p>Un element que permet associar una abreviatura, acrònim o inicialització a la seva expansió:</p> + +<pre class="brush: html notranslate"><p>El contingut web es marca fent servir <abbr title="Hypertext Markup Language">HTML</abbr>.</p></pre> + +<p>De nou, és possible que vulgueu donar-li estil de manera senzilla:</p> + +<pre class="brush: css notranslate">abbr { + color: #a60000; +}</pre> + +<p>La convenció d’estil reconeguda per a les abreviatures és un subratllat puntejat i no és prudent desviar-se’n significativament. Per obtenir més informació sobre les abreviatures, vegeu <a href="/ca/docs/Learn/HTML/Introducci%C3%B3_al_HTML/Format_de_text_avan%C3%A7at#Abreviatures">Abreviatures</a>.</p> + +<h4 id="Enllaços">Enllaços</h4> + +<p>Hiperenllaços — la manera d’arribar a nous llocs del web:</p> + +<pre class="brush: html notranslate"><p>Visiteu la <a href="https://www.mozilla.org">pàgina d'inici de Mozilla</a>.</p></pre> + +<p>A continuació es mostra un estil d’enllaços molt senzill:</p> + +<pre class="brush: css notranslate">a { + color: #ff0000; +} + +a:hover, a:visited, a:focus { + color: #a60000; + text-decoration: none; +} + +a:active { + color: #000000; + background-color: #a60000; +}</pre> + +<p>Les convencions d’enllaç estàndard són el subratllat i un color diferent (per defecte, el blau) en el seu estat estàndard, una altra variació de color quan l’enllaç s’ha visitat prèviament (per defecte: porpra) i un altre color quan l’enllaç està activat (per defecte: vermell). A més, el cursor canvia a una icona de punter quan es passa per sobre dels enllaços i l’enllaç rep un ressaltat quan està enfocat (per exemple, mitjançant la tecla de tabulació) o activat. La imatge següent mostra el destacat tant a Firefox (rodejat de punts) com a Chrome (rodejat de blau):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14371/focus-highlight-firefox.png" style="display: block; height: 173px; margin: 0px auto; width: 319px;"></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14369/focus-highlight-chrome.png" style="display: block; height: 169px; margin: 0px auto; width: 309px;"></p> + +<p>Podeu ser creatius amb els estils d’enllaços, sempre que continueu donant informació als usuaris quan interactuen amb els enllaços. Definitivament, alguna cosa hauria de passar quan els estats canvien i no heu d’eliminar el cursor del punter ni el destacat (<em>outline</em>): tots dos són ajudes d’accessibilitat molt importants per a aquells que fan servir controls de teclat.</p> + +<h4 id="Elements_de_formulari">Elements de formulari</h4> + +<p>Elements que permeten als usuaris introduir dades als llocs web:</p> + +<pre class="brush: html notranslate"><div> + <label for="name">Entra el teu nom</label> + <input type="text" id="name" name="name"> +</div></pre> + +<p>Podeu veure un bon exemple de CSS al nostre exemple <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-css.html">form-css.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/css/form-css.html">vegeu-lo també en viu</a>).</p> + +<p>La majoria de CSS que escriureu per als formularis serà per donar dimensions als elements, alinear etiquetes i entrades i aconseguir que es vegin ordenats i polits.</p> + +<p>Tanmateix, no us heu de desviar massa de la retroalimentació visual esperada que reben els elements de formulari quan prenen el focus, que és bàsicament la mateixa que als enllaços (vegeu més amunt). Podeu definir els estats de <em>focus</em> i <em>hover</em> del formulari per fer que aquest comportament sigui més coherent entre navegadors o que s’adapti millor al disseny de la vostra pàgina, però no us en desfeu del tot: de nou, la gent confia en aquestes pistes per ajudar-los a saber què passa.</p> + +<h4 id="Taules">Taules</h4> + +<p>Taules per presentar dades tabulars.</p> + +<p>Podeu veure un bon exemple d'HTML i CSS de taula al nostre exemple <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/table-css.html">table-css.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/css/table-css.html">vegeu-lo també en viu</a>).</p> + +<p>Generalment, el CSS de les taules serveix perquè la taula s’adapti millor al vostre disseny i sigui menys lletja. És una bona idea assegurar-se que les capçaleres de les taules destaquen (normalment amb negreta) i fer servir les tires de zebra per fer més fàcil analitzar les diferents files.</p> + +<h3 id="Color_i_contrast_de_color">Color i contrast de color</h3> + +<p>Quan trieu un esquema de colors per al vostre lloc web, assegureu-vos que el color del text (primer pla) contrasta bé amb el color de fons. El vostre disseny pot semblar genial, però no és bo si les persones amb deficiències visuals com el daltonisme no poden llegir el vostre contingut.</p> + +<p>Hi ha una manera fàcil de comprovar si el vostre contrast és prou gran per no causar problemes. Hi ha una sèrie d’eines de comprovació de contrast en línia on podeu introduir els colors de primer pla i de fons per comprovar-los. Per exemple, el <a href="http://webaim.org/resources/contrastchecker/">Color Contrast Checker</a> de WebAIM és senzill d'utilitzar i proporciona una explicació del que necessiteu per adaptar-vos als criteris WCAG sobre contrast de color.</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> una relació de contrast elevada també permetrà que tothom que faci servir un telèfon intel·ligent o una tauleta amb pantalla brillant pugui llegir millor les pàgines quan es troba en un entorn brillant, com ara al sol.</p> +</div> + +<p>Un altre consell és no confiar només en el color per a les indicacions/informació, ja que no servirà per a aquells que no poden veure el color. En lloc de marcar els camps de formulari obligatoris en vermell, per exemple, marqueu-los amb un asterisc i en vermell.</p> + +<h3 id="Amagar_coses">Amagar coses</h3> + +<p>Hi ha molts casos en què un disseny visual requereix que no es mostri tot el contingut alhora. Per exemple, a l’exemple del <a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">quadre d’informació amb pestanyes</a> (vegeu el <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">codi font</a>), tenim tres panells d’informació, però els <a href="/ca/docs/Learn/CSS/Disseny_CSS/Posicionament">posicionem</a> els uns sobre els altres i proporcionem pestanyes on es pot fer clic per mostrar-les (també és accessible per al teclat: podeu utilitzar alternativament el tabulador i Return/Enter per a seleccionar-les).</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13368/tabbed-info-box.png" style="display: block; height: 400px; margin: 0px auto; width: 450px;"></p> + +<p>Als usuaris del lector de pantalla no els importa res d’això: estan satisfets amb el contingut sempre que tingui sentit l’ordre al codi font i puguin arribar a tot. El posicionament absolut (tal com s’utilitza en aquest exemple) es considera generalment com un dels millors mecanismes per amagar el contingut per obtenir efectes visuals, perquè no impedeix que els lectors de pantalla hi accedeixin.</p> + +<p>D'altra banda, no heu d'utilitzar {{cssxref ("visibility")}}:<code>hidden</code> o {{cssxref ("display")}}<code>: none</code>, perquè oculten el contingut als lectors de pantalla. Tret que, per descomptat, hi hagi una bona raó per la qual vulgueu que aquest contingut quedi amagat als lectors de pantalla.</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> <span class="subtitle"><a href="http://webaim.org/techniques/css/invisiblecontent/">Invisible Content Just for Screen Reader Users</a> </span>té molts més detalls útils sobre aquest tema.</p> +</div> + +<h3 id="Accepteu_que_els_usuaris_poden_sobreescriure_els_estils">Accepteu que els usuaris poden sobreescriure els estils</h3> + +<p>Els usuaris poden sobreescriure els vostres estils amb els seus propis estils personalitzats, per exemple:</p> + +<ul> + <li>Consulteu <a class="external external-icon" href="https://www.itsupportguides.com/knowledge-base/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-firefox/" rel="noopener">How to use a custom style sheet (CSS) with Firefox,</a> de Sarah Maddox, una útil guia sobre com fer-ho manualment a Firefox i <a href="https://www.itsupportguides.com/knowledge-base/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-internet-explorer/">How to use a custom style sheet (CSS) with Internet Explorer</a> d'Adrian Gordon per a les instruccions equivalents a Internet Explorer.</li> + <li>Probablement sigui més fàcil fer-ho mitjançant una extensió. Per exemple, l’extensió <em>Stylish</em> està disponible per a <a href="https://addons.mozilla.org/en-US/firefox/addon/stylish/">Firefox</a>, <a href="https://safari-extensions.apple.com/details/?id=com.sobolev.stylish-5555L95H45">Safari</a>, <a href="https://addons.opera.com/en/extensions/details/stylish/">Opera</a> i <a href="https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe">Chrome</a>.</li> +</ul> + +<p>Els usuaris poden fer-ho per diversos motius. Un usuari amb discapacitat visual pot voler fer més gran el text a tots els llocs web que visita o un usuari amb deficiència de color severa pot voler posar tots els llocs web en colors d’alt contrast que siguin fàcils de veure. Qualsevol que sigui la necessitat, hauríeu de sentir-vos còmodes amb això i fer que els vostres dissenys siguin prou flexibles perquè aquests canvis funcionin al vostre disseny. Per exemple, és possible que vulgueu assegurar-vos que la vostra àrea de contingut principal pot admetre text més gran (potser començarà a desplaçar-se per permetre que es vegi tot), i no només l’amagarà, ni es trencarà completament.</p> + +<h2 id="JavaScript">JavaScript</h2> + +<p>El JavaScript també pot trencar l'accessibilitat, segons com s'utilitzi.</p> + +<p>El JavaScript modern és un llenguatge potent i podem fer-hi moltes coses, avui dia, des de contingut senzill i actualitzacions d’interfície d’usuari fins a jocs 2D i 3D completament desenvolupats. No hi ha cap regla que digui que tot el contingut ha de ser accessible al 100% per a totes les persones; però cal que feu tot el que pugueu i que les vostres aplicacions siguin tan accessibles com sigui possible.</p> + +<p>El contingut i la funcionalitat senzills són fàcils de fer accessibles — per exemple, text, imatges, taules, formularis i botons que activen les funcions. Tal com hem vist al nostre article <a href="/ca/docs/Learn/Accessibility/HTML">HTML: Una bona base per l'accessibilitat</a>, les consideracions clau són:</p> + +<ul> + <li>Bona semàntica: utilitzar l'element adequat per a cada cosa. Per exemple, assegureu-vos que utilitzeu encapçalaments i paràgrafs, i elements {{htmlelement ("button")}} i {{htmlelement ("a")}}}.</li> + <li>Assegureu-vos que el contingut estigui disponible en forma textual, ja sigui directament com a contingut textual, amb bones etiquetes textuals per a elements de formulari o bé alternatives textuals, com ara text alternatiu per a imatges.</li> +</ul> + +<p>També vam veure un exemple de com utilitzar JavaScript per generar funcionalitats que hi falten - vegeu <a href="/ca/docs/Learn/Accessibility/HTML#Tornar_a_afegir_laccessibilitat_de_teclat">Tornar a afegir l'accessibilitat de teclat</a>. Això no és l'ideal; de fet, només hauríeu d'utilitzar l'element adequat per a cada feina, però demostra que és possible en situacions en què per alguna raó no es pot controlar el marcatge que s'utilitza. Una altra manera de millorar l’accessibilitat dels ginys JavaScript no semàntics és utilitzar WAI-ARIA per proporcionar semàntica addicional als usuaris de lectors de pantalla. El següent article també tractarà això en detall.</p> + +<p>Les funcionalitats complexes, com ara els jocs en 3D, no són tan fàcils de fer accessibles: un joc en 3D complex creat amb WebGL es mostrarà en un element {{htmlelement ("canvas")}}), que actualment no té cap capacitat per proporcionar alternatives textuals o altres informacions per a usuaris amb discapacitats visuals greus. És discutible que un joc d’aquest tipus tingui realment aquest grup de persones com a part del seu públic objectiu principal, i no seria raonable esperar que es fes 100% accessible per a persones invidents, tot i que es podrien implementar controls de teclat perquè el puguin utilitzar usuaris que no fan servir el ratolí, i fer que l’esquema de colors sigui prou contrastat per ser utilitzat per persones amb deficiències de color.</p> + +<h3 id="El_problema_de_massa_JavaScript">El problema de massa JavaScript</h3> + +<p>El problema sol venir quan la gent confia massa en JavaScript. De vegades veureu un lloc web on tot s’ha fet amb JavaScript: l’HTML l’ha generat JavaScript, el CSS l’ha generat JavaScript, etc. Això comporta tota mena de problemes d’accessibilitat i altres d'associats, de manera que no és aconsellable.</p> + +<p>A més d'utilitzar l'element adequat per a cada feina, també us heu d'assegurar que utilitzeu la tecnologia adequada per a cada cosa. Penseu bé si necessiteu aquest brillant quadre d’informació 3D basat en JavaScript o si amb un simple text ja faríeu. Penseu bé si necessiteu un complex giny de formulari no estàndard o si una entrada de text serviria. I no genereu tot el vostre contingut HTML mitjançant JavaScript, si és possible.</p> + +<h3 id="Feu-ho_no_obstructiu">Feu-ho no obstructiu</h3> + +<p>Hauríeu de fer servir <strong>JavaScript no obstructiu</strong> quan creeu el vostre contingut. La idea del JavaScript no obstructiu és que s’ha d’utilitzar sempre que sigui possible per millorar funcionalitats i no per construir-la del tot: les funcions bàsiques haurien de funcionar idealment sense JavaScript, tot i que ja sabem que això no sempre és una opció. Un altre cop, una gran part és fer servir la funcionalitat integrada del navegador sempre que sigui possible.</p> + +<p>Un bon exemple d'usos de JavaScript no obstructiu inclou:</p> + +<ul> + <li>Proporcionar validació de formulari al costat del client, que avisa els usuaris de problemes amb les seves entrades de formulari ràpidament, sense haver d’esperar que el servidor comprovi les dades. Si no està disponible, el formulari continuarà funcionant, però la validació pot ser més lenta.</li> + <li>Proporcionar controls personalitzats per als <code><video></code>s HTML5 que siguin accessibles per als usuaris de teclat, juntament amb un enllaç directe al vídeo que es pot utilitzar per accedir-hi si JavaScript no està disponible (els controls predeterminats del navegador per a <code><video></code> no són accessibles per teclat a la majoria de navegadors).</li> +</ul> + +<p>Com a exemple, hem escrit un exemple de validació de formulari al client "ràpid i brut": vegeu <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-validation.html">form-validation.html</a> (vegeu també la <a href="http://mdn.github.io/learning-area/accessibility/css/form-validation.html">demostració en viu</a>). Aquí veureu un formulari senzill: quan intenteu enviar el formulari amb un o ambdós camps buits, l'enviament falla i apareix un quadre de missatge d'error per indicar-vos què no funciona.</p> + +<p>Aquest tipus de validació de formularis és no obstructiu: podeu utilitzar el formulari perfectament sense que estigui disponible JavaScript, i qualsevol implementació de formulari assenyada també tindrà activa la validació del servidor, perquè és massa fàcil per als usuaris malintencionats saltar-se la validació al client (per exemple, desactivant JavaScript al navegador). Però la validació al client és molt útil per informar d'errors: els usuaris poden veure els errors que cometen a l'instant, en lloc d'haver d'esperar un viatge d'anada i tornada al servidor i una recàrrega de la pàgina. Aquest és un avantatge clar d’usabilitat.</p> + +<div class="blockIndicator note"> +<p>Nota: La validació al servidor no s'ha implementat en aquesta senzilla demostració.</p> +</div> + +<p>També hem fet que la validació d’aquest formulari sigui força accessible. Hem utilitzat elements {{htmlelement ("label")}}}) per assegurar-nos que les etiquetes del formulari estiguin lligades sense ambigüitats a les seves entrades, de manera que els lectors de pantalla les puguin llegir conjuntament:</p> + +<pre class="brush: html notranslate"><label for="name">Entra el teu nom:</label> +<input type="text" name="name" id="name"></pre> + +<p>La validació només la fem quan s’envia el formulari, de manera que no actualitzem la interfície d’usuari massa sovint, cosa que pot confondre als usuaris de lectors de pantalla (i possiblement d’altres):</p> + +<pre class="brush: js notranslate">form.onsubmit = validate; + +function validate(e) { + errorList.innerHTML = ''; + for(let i = 0; i < formItems.length; i++) { + const testItem = formItems[i]; + if(testItem.input.value === '') { + errorField.style.left = '360px'; + createLink(testItem); + } + } + + if(errorList.innerHTML !== '') { + e.preventDefault(); + } +}</pre> + +<div class="note"> +<p><strong>Nota</strong>: En aquest exemple, amaguem i mostrem el quadre de missatge d'error mitjançant posicionament absolut en lloc d'un altre mètode, com ara <code>visibility</code> o <code>display</code>, perquè no interfereix amb el fet que el lector de pantalla pugui llegir-ne contingut.</p> +</div> + +<p>La validació real del formulari seria molt més complexa que això: voldríeu comprovar que el nom introduït sembli un nom, l’edat introduïda sigui realment un número i sigui realista (per exemple, no negativa i amb menys de 4 dígits). Aquí simplement hem implementat una comprovació senzilla: que s'ha introduït un valor a cada camp d'entrada (<code>if(testItem.input.value === '')</code>).</p> + +<p>Quan s’hagi realitzat la validació, si passa la prova, s’envia el formulari. Si hi ha errors (<code>if (errorList.innerHTML!== ")</code>), no enviem el formulari (utilitzant <code>preventDefault()</code>) i mostrem els missatges d'error creats (vegeu més avall). Aquest mecanisme significa que els errors només es mostraran si hi ha errors, cosa que és millor per a la usabilitat.</p> + +<p>Per a cada entrada que no tingui un valor completat quan s’envia el formulari, creem un element de llista amb un enllaç i l’inserim a <code>errorList</code>.</p> + +<pre class="brush: js notranslate">function createLink(testItem) { + const listItem = document.createElement('li'); + const anchor = document.createElement('a'); + + anchor.textContent = 'El camp ' + testItem.input.name + ' és buit: entreu ' + testItem.input.name + '.'; + anchor.href = '#' + testItem.input.name; + anchor.onclick = function() { + testItem.input.focus(); + }; + listItem.appendChild(anchor); + errorList.appendChild(listItem); +}</pre> + +<p>Cada enllaç té un doble propòsit: indica quin és l'error i, a més, permet fer-hi clic / activar-lo per saltar directament a l'element d'entrada en qüestió i corregir-lo.</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> la part <code>focus()</code> d’aquest exemple és una mica complicada. Chrome i Edge (i les versions més recents d’IE) donen focus a l’element quan es fa clic a l’enllaç, sense necessitat del bloc <code>onclick</code> / <code>focus()</code>. Safari només ressaltarà l’element del formulari amb l’enllaç, de manera que necessita el bloc <code>onclick</code> / <code>focus()</code> per donar-hi focus realment. Firefox no dona focus correctament a les entrades en aquest context, de manera que els usuaris de Firefox no poden aprofitar-ho actualment (tot i que la resta funciona bé). El problema a Firefox s'hauria de solucionar aviat — s'està treballant per proporcionar a Firefox un comportament equivalent al d'altres navegadors (vegeu {{bug(277178)}}).</p> +</div> + +<p>A més, l’<code>errorField</code> es col·loca a la part superior del codi font (tot i que es posiciona de manera diferent a la interfície d'usuari mitjançant CSS), cosa que significa que els usuaris poden esbrinar exactament què passa amb els enviaments del formulari i accedir als elements d’entrada en qüestió tornant al començament de la pàgina.</p> + +<p>Com a nota final, hem utilitzat alguns atributs WAI-ARIA a la nostra demostració per ajudar a resoldre els problemes d’accessibilitat causats per àrees de contingut que s’actualitzen constantment sense que es recarregui la pàgina (els lectors de pantalla no ho recolliran ni avisaran els usuaris per defecte):</p> + +<pre class="notranslate"><div class="errors" role="alert" aria-relevant="all"> + <ul> + </ul> +</div></pre> + +<p>Explicarem aquests atributs al nostre proper article, que cobreix <a href="/ca/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> amb molt més detall.</p> + +<div class="note"> +<p><strong>Nota</strong>: Probablement, alguns de vosaltres pensareu en el fet que els formularis HTML5 tenen mecanismes de validació integrats, com ara els atributs <code>required</code>, <code>min</code>/<code>minlength</code> i <code>max</code>/<code>maxlength</code> (vegeu la referència de l’element {{htmlelement("input")}}) per obtenir més informació ). No els hem utilitzat a la demostració perquè el suport de diversos navegadors per a ells és inadequat (per exemple, només existeix en IE10 i superior).</p> +</div> + +<div class="note"> +<p><strong>Nota</strong>: <a href="http://webaim.org/techniques/formvalidation/">Usable and Accessible Form Validation and Error Recovery</a>, de WebAIM, dona més informació útil sobre validació accessible de formularis.</p> +</div> + +<h3 id="Altres_problemes_d’accessibilitat_a_JavaScript">Altres problemes d’accessibilitat a JavaScript</h3> + +<p>Hi ha altres coses que cal tenir en compte a l’hora d’implementar JavaScript i pensar en l’accessibilitat. N’afegirem més a mesura que les trobem.</p> + +<h4 id="Esdeveniments_específics_del_ratolí">Esdeveniments específics del ratolí</h4> + +<p>Com ja deveu saber, la majoria de les interaccions dels usuaris s’implementen en JavaScript del costat del client mitjançant gestors d’esdeveniments (<em>event handlers</em>), que ens permeten executar funcions en resposta a determinats esdeveniments que succeeixen. Alguns esdeveniments poden tenir problemes d’accessibilitat. El principal exemple que trobareu són esdeveniments específics del ratolí, com ara <code>mouseover</code>, <code>mouseout</code>, <code>dblclick</code>, etc. La funcionalitat que s'executa en resposta a aquests esdeveniments no serà accessible mitjançant altres mecanismes, com ara els controls del teclat.</p> + +<p>Per mitigar aquests problemes, hauríeu de duplicar aquests esdeveniments amb esdeveniments similars que es puguin activar per altres mitjans (els anomenats controladors d’esdeveniments independents de dispositiu); <code>focus</code> i <code>blur</code> proporcionarien accessibilitat als usuaris de teclat.</p> + +<p>Vegem un exemple que destaca quan pot ser útil fer-ho. Potser volem proporcionar una imatge en miniatura que mostri una versió més gran de la imatge quan s'hi passi per sobre amb el ratolí o s'hi doni focus (com passaria en un catàleg de productes de comerç electrònic).</p> + +<p>Hem fet un exemple molt senzill que podeu trobar a <a href="http://mdn.github.io/learning-area/accessibility/css/mouse-and-keyboard-events.html">mouse-and-keyboard-events.html</a> (vegeu també el <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/mouse-and-keyboard-events.html">codi font</a>). El codi presenta dues funcions que mostren i amaguen la imatge ampliada; són executats per les línies següents que els configuren com a gestors d'esdeveniments:</p> + +<pre class="brush: js notranslate">imgThumb.onmouseover = showImg; +imgThumb.onmouseout = hideImg; + +imgThumb.onfocus = showImg; +imgThumb.onblur = hideImg;</pre> + +<p>Les dues primeres línies executen les funcions quan el punter del ratolí passa per sobre i surt de sobre de la miniatura, respectivament. Tot i això, no ens permetrà accedir a la vista ampliada mitjançant el teclat; per permetre-ho, hem inclòs les dues darreres línies, que executen les funcions quan la imatge agafa i perd focus. Això es pot fer prement el tabulador fins arribar a la imatge, perquè hi hem inclòs <code>tabindex="0"</code>.</p> + +<p>L’esdeveniment <code>click</code> és interessant: sembla que depengui del ratolí, però la majoria de navegadors activaran els controladors d’esdeveniments <code>onclick</code> en prémer Retorn sobre un enllaç o element de formulari que tingui focus, o quan es toqui a aquest element en un dispositiu de pantalla tàctil. Això no funciona de manera determinada, però, si permeteu que un esdeveniment al qual no es pot donar focus per defecte prengui el focus mitjançant <code>tabindex</code>. En aquests casos, heu de detectar específicament quan es prem aquesta tecla exacta (consulteu <a href="/ca/docs/Learn/Accessibility/HTML#Tornar_a_afegir_laccessibilitat_de_teclat">Tornar a afegir l'accessibilitat de teclat</a>).</p> + +<h2 id="Posa_a_prova_les_teves_habilitats!">Posa a prova les teves habilitats!</h2> + +<p>Heu arribat al final d’aquest article. En recordeu la informació més important? Podeu trobar algunes proves addicionals per verificar que reteniu aquesta informació abans de continuar. Vegeu <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript/Test_your_skills:_CSS_and_JavaScript_accessibility">Test your skills: CSS and JavaScript accessibility</a>.</p> + +<h2 id="Resum">Resum</h2> + +<p>Esperem que aquest article us hagi donat una bona quantitat de detalls i comprensió sobre els problemes d’accessibilitat relacionats amb l’ús de CSS i JavaScript a les pàgines web.</p> + +<p>Tot seguit, WAI-ARIA!</p> + +<div>{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}</div> + +<div> +<h2 id="En_aquest_mòdul">En aquest mòdul</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li> +</ul> +</div> diff --git a/files/ca/learn/accessibility/html/index.html b/files/ca/learn/accessibility/html/index.html new file mode 100644 index 0000000000..ddcb351f85 --- /dev/null +++ b/files/ca/learn/accessibility/html/index.html @@ -0,0 +1,596 @@ +--- +title: 'HTML: Una bona base per l''accessibilitat' +slug: Learn/Accessibility/HTML +translation_of: Learn/Accessibility/HTML +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}</div> + +<p class="summary">Es pot fer accessible una gran quantitat de contingut web només assegurant-se que els elements d'HTML correctes s’utilitzin en tot moment amb el propòsit correcte. Aquest article analitza detalladament com es pot utilitzar HTML per garantir la màxima accessibilitat.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td> + <p>Alfabetització bàsica en informàtica, comprensió bàsica d’HTML (vegeu <a href="/ca/docs/Learn/HTML/Introducci%C3%B3_al_HTML">Introducció a l’HTML</a>) i comprensió de <a href="/ca/docs/Learn/Accessibility/Que_es_accessibilitat">què és l’accessibilitat</a>.</p> + </td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Familiaritzar-vos amb les funcions d’HTML que tenen avantatges d’accessibilitat i com utilitzar-les adequadament als vostres documents web.</td> + </tr> + </tbody> +</table> + +<h2 id="HTML_i_accessibilitat">HTML i accessibilitat</h2> + +<p>A mesura que apreneu més sobre HTML —llegiu més recursos, mireu més exemples, etc.— anireu veient un tema comú: la importància d’utilitzar HTML semàntic (de vegades anomenat POSH o <em lang="en">Plain Old Semantic HTML</em>). Això significa utilitzar els elements HTML correctes per al propòsit previst en la mesura del possible.</p> + +<p>Us podeu preguntar per què és tan important. Al cap i a la fi, podeu utilitzar una combinació de CSS i JavaScript per fer que qualsevol element HTML es comporti de la manera que vulgueu. Per exemple, es podria marcar un botó de control per reproduir un vídeo al vostre lloc així:</p> + +<pre class="brush: html notranslate"><div>Reproduir vídeo</div></pre> + +<p>Però, com veureu amb més detall més endavant, té sentit utilitzar l'element correcte per a aquest objectiu:</p> + +<pre class="brush: html notranslate"><button>Reproduir vídeo</button></pre> + +<p>Els <code><button></code>s HTML no només tenen un estil adequat aplicat per defecte (que probablement voldreu substituir), sinó que també tenen accessibilitat de teclat integrada: els usuaris poden navegar entre els botons mitjançant la tecla <kbd>Tab</kbd> i activar la seva selecció mitjançant <kbd>Retorn</kbd> o <kbd>Enter</kbd>.</p> + +<p>No costa més escriure HTML semàntic que etiquetatge no semàntic (i incorrecte) si ho feu de manera constant des de l’inici del projecte. Encara millor, l’etiquetatge semàntic té altres avantatges més enllà de l’accessibilitat:</p> + +<ol> + <li><strong>Més fàcil de desenvolupar:</strong> com es va esmentar anteriorment, obtindreu algunes funcions de forma gratuïta, a més, és possiblement més fàcil d’entendre.</li> + <li><strong>Millor en dispositius mòbils:</strong> l’HTML semàntic és, sens dubte, més lleuger en mida de fitxer que el codi espagueti no semàntic i és més fàcil de fer <em>responsive</em>.</li> + <li><strong>Bo per al SEO:</strong> els motors de cerca donen més importància a les paraules clau dels encapçalaments, enllaços, etc. que les paraules clau incloses als <code><div></code> no semàntics, etc., de manera que els vostres clients podran trobar més fàcilment els vostres documents.</li> +</ol> + +<p>Continuem i vegem l'HTML accessible amb més detall.</p> + +<div class="note"> +<p><strong>Nota</strong>: És una bona idea tenir instal·lat un lector de pantalla a l'ordinador local perquè pugueu provar els exemples que es mostren a continuació. Consulteu la nostra <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">Screen readers guide</a> per obtenir més informació.</p> +</div> + +<h2 id="Bona_semàntica">Bona semàntica</h2> + +<p>Ja hem parlat de la importància d'una semàntica adequada i de per què hauríem d'utilitzar l'element HTML adequat per a cada cosa. Això no es pot ignorar, ja que és un dels principals llocs on l'accessibilitat es trenca greument si no es gestiona correctament.</p> + +<p>Al web, la veritat és que la gent fa coses molt estranyes amb el marcatge HTML. Alguns abusos d'HTML es deuen a pràctiques heretades que no s'han oblidat completament, i algunes són simplement ignorància. En qualsevol cas, hauríeu de substituir aquest codi tan dolent.</p> + +<p>De vegades no esteu en condicions de desfer-vos del marcat terrible: les vostres pàgines podrien ser generades per algun tipus de <em lang="en">framework</em> del servidor sobre el qual no teniu el control total, o bé podríeu tenir contingut de tercers a la vostra pàgina (com ara banners publicitaris) sobre els quals no teniu control.</p> + +<p>L'objectiu no és "tot o res". Tot i això, totes les millores que pugueu fer ajudaran a la causa de l’accessibilitat.</p> + +<h3 id="Contingut_textual">Contingut textual</h3> + +<p>Una de les millors ajudes d’accessibilitat que pot tenir un usuari de lector de pantalla és una estructura de contingut excel·lent amb encapçalaments, paràgrafs, llistes, etc. Un exemple semàntic excel·lent pot semblar-se al següent:</p> + +<pre class="brush: html example-good line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h1</span><span class="punctuation token">>El meu encapçalament</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h1</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Aquesta és la primera secció del meu document.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">>Aquí hi afegiré un paràgraf també</span></span>.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">> + +<ol> + <li>Aquí tenim</li> + <li>una llista</li> + <li>per llegir</li> +</ol></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">>El meu sotsencapçalament</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">>Aquesta és la primera subsecció del document</span></span>. M'encantaria que tothom pogués trobar aquest document!<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">>El meu 2n sotsencapçalament</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">>Aquesta és la segona subsecció del meu contingut</span></span>. Crec que és més interessant que l'anterior.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span></code></pre> + +<p>Hem preparat una versió amb text més llarg per provar-la amb un lector de pantalla (vegeu <a href="https://mdn.github.io/learning-area/accessibility/html/good-semantics.html">good-semantics.html</a>). Si proveu de navegar-hi, veureu que és bastant fàcil:</p> + +<ol> + <li>El lector de pantalla llegeix cada capçalera a mesura que avança pel contingut i us notifica què és un encapçalament, què és un paràgraf, etc.</li> + <li>S'atura després de cada element, deixant-te anar al ritme que sigui més còmode per a tu.</li> + <li>Podeu passar a l’encapçalament següent / anterior en molts lectors de pantalla.</li> + <li>També podeu mostrar una llista de tots els encapçalaments a molts lectors de pantalla, cosa que us permetrà utilitzar-los com una taula de contingut útil per trobar contingut específic.</li> +</ol> + +<p>De vegades, la gent escriu encapçalaments, paràgrafs, etc. mitjançant HTML de presentació i salts de línia, com ara el següent:</p> + +<pre class="brush: html example-bad line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font</span> <span class="attr-name token">size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>7<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code>El meu encapçalament<code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>font</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> +</code>Aquesta és la primera secció del meu document.<code class="language-html"> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> +</code>Aquí hi afegiré un paràgraf també.<code class="language-html"> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">> +1. </span></span></code>Aquí tenim<code class="language-html"><span class="tag token"><span class="punctuation token"> +</span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">> +2. </span></span></code>una llista<code class="language-html"><span class="tag token"><span class="punctuation token"> +</span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">> +3. </span></span></code>per llegir<code class="language-html"><span class="tag token"><span class="punctuation token"> +</span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font</span> <span class="attr-name token">size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>5<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code>El meu sotsencapçalament<code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>font</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> +</code>Aquesta és la primera subsecció del document. M'encantaria que tothom pogués trobar aquest document!<code class="language-html"> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>font</span> <span class="attr-name token">size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>5<span class="punctuation token">"</span></span><span class="punctuation token">></span></span></code>El meu 2n sotsencapçalament<code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>font</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> +</code>Aquesta és la segona subsecció del meu contingut. Crec que és més interessant que l'anterior.</pre> + +<p>Si proveu la nostra versió més llarga amb un lector de pantalla (vegeu <a href="https://mdn.github.io/learning-area/accessibility/html/bad-semantics.html">bad-semantics.html</a>), no tindreu una experiència molt bona: el lector de pantalla no té res a utilitzar com a indicador, de manera que no podeu recuperar una útil taula de continguts i tota la pàgina es veu com un bloc gegant únic, de manera que només es llegeix d’una sola vegada, tot alhora.</p> + +<p>Hi ha altres qüestions més enllà de l’accessibilitat: és més difícil donar estils al contingut mitjançant CSS o manipular-lo amb JavaScript, per exemple, perquè no hi ha elements que s’utilitzin com a selectors.</p> + +<h4 id="Utilitzar_un_llenguatge_clar">Utilitzar un llenguatge clar</h4> + +<p>El llenguatge que utilitzeu també pot afectar l'accessibilitat. En general, heu d’utilitzar un llenguatge clar que no sigui massa complex i que no faci servir termes d’argot innecessaris. Això no només beneficia les persones amb discapacitats cognitives o d’altres; beneficia els lectors per als quals el text no està escrit en la seva primera llengua, la gent més jove... tothom, de fet! A part d'això, heu d'intentar evitar l'ús de llenguatge i caràcters que el lector de pantalla no llegeixi amb claredat. Per exemple:</p> + +<ul> + <li>No utilitzeu guions si podeu evitar-ho. En lloc d’escriure 5-7, escriviu 5 a 7.</li> + <li>Amplieu les abreviatures: en lloc d’escriure Gen, escriviu gener.</li> + <li>Amplieu les sigles, almenys una o dues vegades. En lloc d’escriure HTML en primera instància, escriviu Hypertext Markup Language.</li> +</ul> + +<h3 id="Disposicions_de_pàgina">Disposicions de pàgina</h3> + +<p>Antigament, la gent solia crear dissenys de pàgines amb taules HTML: utilitzaven diferents cel·les de taula per contenir la capçalera, el peu de pàgina, la barra lateral, la columna de contingut principal, etc. No és una bona idea perquè els lectors de pantalla faran lectures confuses, sobretot si el disseny és complex i té moltes taules imbricades.</p> + +<p>Proveu el nostre exemple <a href="https://mdn.github.io/learning-area/accessibility/html/table-layout.html">table-layout.html</a>, que té un aspecte semblant a aquest:</p> + +<pre class="brush: html notranslate"><table width="1200"> + <!-- main heading row --> + <tr id="heading"> + <td colspan="6"> + + <h1 align="center">Header</h1> + + </td> + </tr> + <!-- nav menu row --> + <tr id="nav" bgcolor="#ffffff"> + <td width="200"> + <a href="#" align="center">Home</a> + </td> + <td width="200"> + <a href="#" align="center">Our team</a> + </td> + <td width="200"> + <a href="#" align="center">Projects</a> + </td> + <td width="200"> + <a href="#" align="center">Contact</a> + </td> + <td width="300"> + <form width="300"> + <input type="search" name="q" placeholder="Search query" width="300"> + </form> + </td> + <td width="100"> + <button width="100">Go!</button> + </td> + </tr> + <!-- spacer row --> + <tr id="spacer" height="10"> + <td> + + </td> + </tr> + <!-- main content and aside row --> + <tr id="main"> + <td id="content" colspan="4" bgcolor="#ffffff"> + + <!-- main content goes here --> + </td> + <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top"> + <h2>Related</h2> + + <!-- aside content goes here --> + + </td> + </tr> + <!-- spacer row --> + <tr id="spacer" height="10"> + <td> + + </td> + </tr> + <!-- footer row --> + <tr id="footer" bgcolor="#ffffff"> + <td colspan="6"> + <p>©Copyright 2050 by nobody. All rights reversed.</p> + </td> + </tr> + </table></pre> + +<p>Si intenteu navegar-hi mitjançant un lector de pantalla, probablement us dirà que hi ha una taula que cal mirar (tot i que alguns lectors de pantalla poden endevinar la diferència entre els dissenys amb taules i les taules de dades). És probable que (depenent del lector de pantalla que utilitzeu) hàgeu de baixar a la taula com a objecte i mirar-ne les cel·les una a una i tornar a sortir de la taula per continuar navegant pel contingut.</p> + +<p>Els dissenys de taules són una relíquia del passat: tenien sentit quan el suport de CSS no estava estès als navegadors, però ara només creen confusió per als usuaris de lectors de pantalla. A més, el seu codi font requereix més marcatge, cosa que els fa menys flexibles i més difícils de mantenir. Podeu verificar aquestes afirmacions comparant la vostra experiència anterior amb un <a href="https://mdn.github.io/learning-area/html/introduction-to-html/document_and_website_structure/">exemple d’estructura de lloc web més modern</a>, que podria semblar-se a:</p> + +<pre class="brush: html notranslate"><header> + <h1>Header</h1> +</header> + +<nav> + <!-- main navigation in here --> +</nav> + +<!-- Here is our page's main content --> +<main> + + <!-- It contains an article --> + <article> + <h2>Article heading</h2> + + <!-- article content in here --> + </article> + + <aside> + <h2>Related</h2> + + <!-- aside content in here --> + </aside> + +</main> + +<!-- And here is our main footer that is used across all the pages of our website --> + +<footer> + <!-- footer content in here --> +</footer></pre> + +<p>Si proveu el nostre exemple d’estructura més modern amb un lector de pantalla, veureu que l’etiquetatge de disseny ja no s’interposa i confon la lectura del contingut. També és molt més lleuger i reduït pel que fa a la mida del codi, cosa que significa que és més fàcil mantenir el codi i que necessita menys amplada de banda per a l'usuari (especialment important per a aquells que tenen connexions lentes).</p> + +<p>Una altra consideració a l’hora de crear dissenys és l’ús d’elements semàntics HTML5 tal com es veu a l’exemple anterior (vegeu <a href="/ca/docs/Web/HTML/Element#Seccionament_del_contingut">seccionat de contingut</a>): podeu crear un disseny utilitzant només elements {{htmlelement("div")}}) imbricats, però és millor utilitzar elements adequats per marcar la vostra navegació principal ({{htmlelement("nav")}}), peu de pàgina ({{htmlelement("footer")}}), unitats de contingut ({{htmlelement("article")}}), etc. Aquests proporcionen una semàntica addicional per als lectors de pantalla (i altres eines) per donar a l'usuari pistes addicionals sobre el contingut que navega (vegeu <a href="http://www.weba11y.com/blog/2016/04/22/screen-reader-support-for-new-html5-section-elements/">Screen Reader Support for new HTML5 Section Elements</a> per fer-vos una idea de com és el suport en els lectors de pantalla).</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> A més de tenir una bona semàntica i un disseny atractiu, el vostre contingut hauria de tenir un sentit lògic en el seu ordre de codi; sempre podeu col·locar-lo allà on vulgueu mitjançant CSS, però hauríeu de crear un ordre de codi correcte de sortida, de forma que el que es llegeixi als usuaris de lectors de pantalla tingui sentit.</p> +</div> + +<h3 id="Controls_dinterfície_dusuari">Controls d'interfície d'usuari</h3> + +<p>Per controls d’interfície d’usuari ens referim a les parts principals dels documents web amb les quals interactuen els usuaris, normalment botons, enllaços i controls de formulari. En aquesta secció analitzarem les qüestions bàsiques d’accessibilitat que cal tenir en compte a l’hora de crear aquests controls. Articles posteriors sobre WAI-ARIA i multimèdia examinaran altres aspectes de l'accessibilitat de la interfície d'usuari.</p> + +<p>Un aspecte clau de l’accessibilitat dels controls d’interfície d’usuari és que, per defecte, els navegadors permeten manipular-los mitjançant el teclat. Podeu provar-ho amb el nostre exemple <a href="https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">native-keyboard-accessibility.html</a> (consulteu el <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">codi font</a>). Obriu-lo en una pestanya nova i proveu de prémer la tecla de tabulació; després de prémer algunes vegades, hauríeu de veure com el focus de la pestanya comença a moure's pels diferents elements enfocables. Els elements enfocats tenen un estil predeterminat ressaltat en tots els navegadors (difereix lleugerament entre els diferents navegadors) de manera que pugueu saber quin element està enfocat.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14215/button-focused-unfocused.png" style="border-style: solid; border-width: 1px; display: block; height: 39px; margin: 0px auto; width: 288px;"></p> + +<p>A continuació, podeu prémer Enter / Return per seguir un enllaç enfocat o prémer un botó (hem inclòs una mica de JavaScript per fer que els botons llancin un missatge) o començar a escriure per introduir text en una camp de formulari. Altres elements del formulari tenen controls diferents, per exemple, l'element {{htmlelement ("select")}}} pot mostrar les seves opcions i circular entre elles amb les tecles de fletxa amunt i avall.</p> + +<div class="note"> +<p><strong>Nota</strong>: Els diferents navegadors poden tenir diferents opcions de control de teclat disponibles. Consulteu <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility">Using native keyboard accessibility</a> per obtenir més informació.</p> +</div> + +<p>Essencialment, obteniu aquest comportament gratis només fent servir els elements adequats, p.ex:</p> + +<pre class="brush: html example-good notranslate"><h1>Enllaços</h1> + +<p>Això és un enllaç a <a href="https://www.mozilla.org">Mozilla</a>.</p> + +<p>Un altre enllaç, a la <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p> + +<h2>Botons</h2> + +<p> + <button data-message="Això és del primer botó">Fes-me clic!</button> + <button data-message="Això és del segon botó">Fes-me clic també!</button> + <button data-message="Això és del tercer botó">I a mi!</button> +</p> + +<h2>Formulari</h2> + +<form> + <div> + <label for="nom">Entra el teu nom:</label> + <input type="text" id="nom" name="nom"> + </div> + <div> + <label for="edat">Entra la teva edat:</label> + <input type="text" id="edat" name="edat"> + </div> + <div> + <label for="mood">Tria el teu humor:</label> + <select id="humor" name="humor"> + <option>Feliç</option> + <option>Trist(a)</option> + <option>Enfadat/da</option> + <option>Preocupat/da</option> + </select> + </div> +</form></pre> + +<p>Això vol dir utilitzar adequadament enllaços, botons, elements de formulari i etiquetes (inclòs l'element {{htmlelement("label")}}) per als controls de formulari).</p> + +<p>Tanmateix, es torna a donar el cas que la gent de vegades fa coses estranyes amb HTML. Per exemple, de vegades veieu botons marcats amb {{htmlelement("div")}}s, per exemple:</p> + +<pre class="brush: html example-bad notranslate"><div data-message="Això és del primer botó">Fes-me clic!</div> +<div data-message="Això és del segon botó">Fes-me clic també!</div> +<div data-message="Això és del tercer botó">I a mi!</div></pre> + +<p>Però no s’aconsella l’ús d’aquest codi: perdeu immediatament l’accessibilitat nativa de teclat que hauríeu tingut si acabeu d’utilitzar elements {{htmlelement("button")}}), a més de no obtenir cap estil CSS predeterminat.</p> + +<h4 id="Tornar_a_afegir_laccessibilitat_de_teclat">Tornar a afegir l'accessibilitat de teclat</h4> + +<p>Afegir aquests avantatges requereix una mica de feina (podeu veure un exemple al nostre exemple <a href="https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">fake-div-buttons.html</a>; també podeu veure el <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">codi font</a>). Aquí hem donat als nostres botons falsos amb <code><div></code> la possibilitat d'agafar el focus (inclòs mitjançant la tecla de tabulació) donant a cadascun l'atribut <code>tabindex="0"</code>:</p> + +<pre class="brush: html notranslate"><div data-message="Això és del primer botó" tabindex="0">Fes-me clic!</div> +<div data-message="Això és del segon botó" tabindex="0">Fes-me clic també!</div> +<div data-message="Això és del tercer botó" tabindex="0">I a mi!</div></pre> + +<p>Bàsicament, l'atribut {{htmlattrxref("tabindex")}} està pensat principalment per permetre que els elements tabulables puguin tenir un ordre de tabulació personalitzat (especificat en ordre numèric positiu), en comptes del seu ordre de codi per defecte. Aquesta és gairebé sempre una mala idea, ja que pot provocar confusions importants. Utilitzeu-la només si ho necessiteu de debò; per exemple, si el disseny mostra les coses en un ordre visual molt diferent al codi font i voleu que les coses funcionin de manera més lògica. Hi ha dues opcions més per a tabindex:</p> + +<ul> + <li><code>tabindex = "0"</code>: tal com s'ha indicat anteriorment, aquest valor permet que els elements que normalment no són tabulables passin a ser tabulables. Aquest és el valor més útil de <code>tabindex</code>.</li> + <li><code>tabindex = "- 1"</code>: això permet que els elements no tabulables normalment puguin rebre el focus per programació, per exemple, mitjançant JavaScript o com a objectiu dels enllaços.</li> +</ul> + +<p>Tot i que l’addició anterior ens permet arribar als botons amb lña tecla de tabulació, no ens permet activar-los mitjançant la tecla Enter / Retorn. Per fer-ho, hem hagut d'afegir el següent truc amb JavaScript:</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">document<span class="punctuation token">.</span>onkeydown <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span><span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">13</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="comment token">// La tecla Enter/Return</span> + document<span class="punctuation token">.</span>activeElement<span class="punctuation token">.</span><span class="function token">click</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> + +<p>Aquí afegim un 'listener' (oient) a l'objecte <code>document</code> per detectar quan s'ha premut un botó al teclat. Comprovem quin botó s'ha premut mitjançant la propietat <code>keyCode</code> de l'objecte d'esdeveniment; si és el codi de tecla que coincideix amb Return / Enetr, executem la funció emmagatzemada al controlador <code>onclick</code> del botó mitjançant <code>document.activeElement.click()</code>. <code>activeElement</code> ens proporciona l'element que té actualment el focus a la pàgina.</p> + +<p>Això suposa un munt de molèsties addicionals per recuperar la funcionalitat. I segurament hi haurà altres problemes. Millor utilitzar l’element adequat per al treball adequat en primer lloc.</p> + +<h4 id="Etiquetes_de_text_significatives">Etiquetes de text significatives</h4> + +<p>Les etiquetes de text dels controls de la interfície d’usuari són molt útils per a tots els usuaris, però fer-les correctament és particularment important per als usuaris amb discapacitat.</p> + +<p>Assegureu-vos que les etiquetes de text del botó i de l'enllaç siguin comprensibles i distintives. No només utilitzeu "Feu clic aquí" per a les etiquetes, ja que els usuaris del lector de pantalla de vegades obtenen una llista de botons i controls de formulari. La següent captura de pantalla mostra el que VoiceOver llista els nostres controls en Mac.</p> + +<p><img alt="Form controls. Click me! button. Click me too! button. And me! button. Fill me in: edit text. Fill me in: edit text. Happy collapsed pop up button. Happy menu item. Sad menu item. Angry menu item. Worried menu item." src="https://mdn.mozillademos.org/files/14335/voiceover-formcontrols.png" style="display: block; height: 604px; margin: 0px auto; width: 802px;"></p> + +<p>Assegureu-vos que les vostres etiquetes tinguin sentit fora del context, llegides per si mateixes, així com en el context del paràgraf en què es troben. Per exemple, el següent mostra un exemple de text de bon enllaç:</p> + +<pre class="brush: html example-good notranslate"><p>Les balenes són criatures realment fantàstiques. <a href="whales.html">Aprèn més sobre les balenes</a>.</p></pre> + +<p>Però això és mal text d'enllaç:</p> + +<pre class="brush: html example-bad notranslate"><p>Les balenes són criatures realment fantàstiques. Per tal d'aprendre més sobre les balenes, <a href="whales.html">fes clic aquí</a>.</p></pre> + +<div class="note"> +<p><strong>Nota</strong>: Podeu trobar molt més sobre la implementació d’enllaços i les pràctiques recomanades al nostre article Creació d’enllaços. També podeu veure alguns exemples bons i dolents a <a href="https://mdn.github.io/learning-area/accessibility/html/good-links.html">good-links.html</a> i <a href="https://mdn.github.io/learning-area/accessibility/html/bad-links.html">bad-links.html</a>.</p> +</div> + +<p>Les etiquetes del formulari també són importants per donar-vos una idea del que heu d’introduir a cada entrada del formulari. El següent sembla un exemple prou raonable:</p> + +<pre class="brush: html example-bad notranslate">Entra el teu nom: <input type="text" id="nom" name="nom"></pre> + +<p>Tot i això, això no és tan útil per a usuaris amb discapacitat. No hi ha res a l’exemple anterior per associar l’etiqueta sense ambigüitats amb l’entrada del formulari i deixar clar com emplenar-la si no la podeu veure. Si hi accediu amb alguns lectors de pantalla, podria ser que només se us donés una descripció seguint la línia de "edita text".</p> + +<p>El següent és un exemple molt millor:</p> + +<pre class="brush: html example-good notranslate"><div> + <label for="nom">Entra el teu nom:</label> + <input type="text" id="nom" name="nom"> +</div></pre> + +<p>Amb un codi com aquest, l'etiqueta s'associarà clarament a l'entrada; la descripció serà més semblant a "Entra el teu nom nom: editeu text".<br> + </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14337/voiceover-good-form-label.png" style="display: block; margin: 0 auto;"></p> + +<p>Com a avantatge addicional, a la majoria de navegadors si associeu una etiqueta amb una entrada de formulari, podeu fer clic a l’etiqueta per seleccionar o activar l’element de formulari. Això proporciona a l’entrada una zona d’èxit més gran, cosa que facilita la selecció.</p> + +<div class="note"> +<p><strong>Nota</strong>: podeu veure alguns exemples de formularis bons i dolents a <a href="https://mdn.github.io/learning-area/accessibility/html/good-form.html">good-form.html</a> i <a href="https://mdn.github.io/learning-area/accessibility/html/bad-form.html">bad-form.html</a>.</p> +</div> + +<ol> +</ol> + +<h2 id="Taules_de_dades_accessibles">Taules de dades accessibles</h2> + +<p>Es pot escriure una taula de dades bàsica amb un marcatge molt senzill, per exemple:</p> + +<pre class="brush: html notranslate"><table> + <tr> + <td>Nom</td> + <td>Edat</td> + <td>Gènere</td> + </tr> + <tr> + <td>Gabriel</td> + <td>13</td> + <td>Masculí</td> + </tr> + <tr> + <td>Elva</td> + <td>8</td> + <td>Femení</td> + </tr> + <tr> + <td>Freida</td> + <td>5</td> + <td>Femení</td> + </tr> +</table></pre> + +<p>Però això té problemes: un usuari del lector de pantalla no pot associar files o columnes juntes com a agrupacions de dades. Per fer-ho, hauria de saber quines són les cel·les amb capçaleres i si encapçalen files, columnes, etc. Això només es pot fer visualment per a la taula anterior (consulteu <a href="https://mdn.github.io/learning-area/accessibility/html/bad-table.html">bad-table.html</a> i proveu l'exemple vosaltres mateixos).</p> + +<p>Vegeu ara el nostre <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-complete.html">exemple de taula de grups de punk</a>: podeu veure algunes ajudes d’accessibilitat en funcionament:</p> + +<ul> + <li>Les capçaleres de les taules es defineixen mitjançant elements {{htmlelement("th")}}); també podeu especificar si són capçaleres per a files o columnes mitjançant l'atribut <code>scope</code>. Això us proporciona grups complets de dades que els lectors de pantalla poden consumir com a unitats individuals.</li> + <li>L'element {{htmlelement("caption")}}} i l'atribut <code>summary</code> de <code><table></code> fan tasques similars: actuen com a text alternatiu per a una taula, donant a l'usuari de lector de pantalla un resum ràpid i útil del contingut de la taula. Generalment es prefereix l'element <code><caption></code>, ja que fa que el seu contingut és accessible també per als usuaris vidents, que també poden trobar-los útils. Realment no necessiteu les dues coses.</li> +</ul> + +<p>Nota: Consulteu l'article sobre funcions avançades i accessibilitat de la nostra taula HTML per obtenir més informació sobre les taules de dades accessibles.</p> + +<div class="note"> +<p><strong>Nota</strong>: Consulteu el nostre article <a href="/ca/docs/Learn/HTML/Taules_HTML/Taula_HTML_caracter%C3%ADstiques_avan%C3%A7ades_i_laccessibilitat">Taules HTML: característiques avançades i accessibilitat</a> per saber més sobre les taules de dades accessibles.</p> +</div> + +<h2 id="Alternatives_de_text">Alternatives de text</h2> + +<p>Mentre que el contingut textual és intrínsecament accessible, no es pot dir el mateix necessàriament del contingut multimèdia: les persones amb discapacitat visual no poden veure el contingut d’imatges ni de vídeo i les persones amb discapacitat auditiva no poden sentir l'àudio. Cobrim detalladament el contingut de vídeo i àudio a <a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a>, però per a aquest article analitzarem l'accessibilitat de l'humil element {{htmlelement ("img")}}.</p> + +<p>Tenim un exemple senzill escrit, <a href="https://mdn.github.io/learning-area/accessibility/html/accessible-image.html">accessible-image.html</a>, que inclou quatre còpies de la mateixa imatge:</p> + +<pre class="notranslate"><img src="dinosaur.png"> + +<img src="dinosaur.png" + alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."> + +<img src="dinosaur.png" + alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth." + title="The Mozilla red dinosaur"> + + +<img src="dinosaur.png" aria-labelledby="dino-label"> + +<p id="dino-label">The Mozilla red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.</p> +</pre> + +<p>La primera imatge, quan la veu un lector de pantalla, no ofereix realment molta ajuda a l'usuari: VoiceOver, per exemple, llegeix "/dinosaur.png, imatge". Es llegeix el nom del fitxer per intentar proporcionar ajuda. En aquest exemple, l'usuari almenys sabrà que és un dinosaure d'alguna mena, però sovint es poden penjar fitxers amb noms de fitxers generats automàticament (per exemple, des d'una càmera digital) i és probable que aquests noms de fitxers no proporcionin context al contingut de la imatge.</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> és per això que no heu d’incloure mai contingut de text dins d’una imatge; els lectors de pantalla simplement no hi poden accedir. També hi ha altres desavantatges: no podeu seleccionar-lo ni copiar-lo / enganxar-lo. Simplement no ho feu!</p> +</div> + +<p>Quan un lector de pantalla troba la segona imatge, llegeix l’atribut alt complet: "Un tiranosaure vermell Rex: un dinosaure de dues potes dret com un humà, amb braços petits i un cap gran amb moltes dents afilades".</p> + +<p>Això posa de manifest la importància d’utilitzar no només noms de fitxers significatius en cas que l’anomenat <strong>text alternatiu</strong> no estigui disponible, sinó també assegurar-se que el text alternatiu s’ofereixi en atributs <code>alt</code> sempre que sigui possible. Tingueu en compte que el contingut de l'atribut <code>alt</code> sempre ha de proporcionar una representació directa de la imatge i del que transmet visualment. Aquí no s’hi hauria d’incloure cap coneixement personal ni cap descripció addicional, ja que no és útil per a persones que no s’han trobat amb la imatge abans.</p> + +<p>Una cosa a tenir en compte és si les vostres imatges tenen significat dins del vostre contingut o si són exclusivament per a la decoració visual i, per tant, no tenen cap sentit. Si són decoratives, és millor escriure un text buit com a valor de l'atribut <code>alt</code> (ho veurem més endavant en aquest mateix article) o simplement incloure'ls a la pàgina com a imatges de fons CSS.</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> Llegiu <a href="/ca/docs/Learn/HTML/Multim%C3%A8dia_i_incrustar/Images_in_HTML">Imatges en HTML</a> i <a href="/ca/docs/Learn/HTML/Multim%C3%A8dia_i_incrustar/Imatges_sensibles">Imatges responsives</a> per obtenir molta més informació sobre la implementació d'imatges i les pràctiques recomanades.</p> +</div> + +<p>Si voleu proporcionar informació contextual addicional, l'heu de posar al text que envolta la imatge o dins d'un atribut de títol, tal com es mostra a continuació. En aquest cas, la majoria de lectors de pantalla llegiran el text alternatiu, l'atribut <code>title</code> i el nom del fitxer. A més, els navegadors mostren el text del títol quan es passa el ratolí per sobre.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14333/title-attribute.png" style="display: block; margin: 0 auto;"></p> + +<p>Fem una altra ullada ràpida al quart mètode:</p> + +<pre class="brush: html notranslate"><img src="dinosaur.png" aria-labelledby="dino-label"> + +<p id="dino-label">The Mozilla red Tyrannosaurus ... </p></pre> + +<p>En aquest cas, no utilitzem en absolut l’atribut <code>alt</code>; en canvi, hem presentat la nostra descripció de la imatge com a paràgraf de text normal, li hem donat un id i, a continuació, hem utilitzat l’atribut <code>aria-labelledby</code> per referir-nos a aquest id, que fa que els lectors de pantalla utilitzin aquest paràgraf com a text alternatiu / etiqueta per a aquesta imatge. Això és especialment útil si voleu utilitzar el mateix text com a etiqueta per a diverses imatges, cosa que no és possible amb <code>alt</code>.</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> <code>aria-labelledby</code> forma part de l'especificació <a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA</a>, que permet als desenvolupadors afegir semàntica addicional al seu marcatge per millorar l'accessibilitat del lector de pantalla quan sigui necessari. Per obtenir més informació sobre com funciona, llegiu el nostre article <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA Basics</a>.</p> +</div> + +<h3 id="Daltres_mecanismes_de_text_alternatiu">D'altres mecanismes de text alternatiu</h3> + +<p>Les imatges també tenen un altre mecanisme disponible per proporcionar text descriptiu. Per exemple, hi ha un atribut <code>longdesc</code> destinat a apuntar a un document web independent que conté una descripció ampliada de la imatge, per exemple:</p> + +<pre class="brush: html notranslate"><img src="dinosaur.png" longdesc="dino-info.html"></pre> + +<p>Sembla una bona idea, especialment per a infografies i grans gràfics amb molta informació, que potser es podrien representar com una taula de dades accessible (n'hem parlat en aquest mateix article). No obstant això, <code>longdesc</code> no és compatible amb tots els lectors de pantalla i el contingut és completament inaccessible per als usuaris que no utilitzin lectors de pantalla. Sens dubte, és molt millor incloure la descripció llarga a la mateixa pàgina que la imatge o enllaçar-la amb un enllaç normal.</p> + +<p>HTML5 inclou dos elements nous: {{htmlelement("figure")}} i {{htmlelement("figcaption")}} que se suposa que associen una figura d'algun tipus (pot ser qualsevol cosa, no necessàriament una imatge) amb un títol de figura:</p> + +<pre class="brush: html notranslate"><figure> + <img src="dinosaur.png" alt="The Mozilla Tyrannosaurus"> + <figcaption>A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.</figcaption> +</figure></pre> + +<p>Malauradament, la majoria dels lectors de pantalla sembla que encara no associen els subtítols de figures amb les seves figures. Dit això, l'estructura de l'element és útil per a aplicar-hi estil CSS; a més, proporciona una manera de col·locar una descripció de la imatge al costat al codi font.</p> + +<h3 id="Atributs_alt_buits">Atributs alt buits</h3> + +<pre class="brush: html notranslate"><h3> + <img src="article-icon.png" alt=""> + Tyrannosaurus Rex: the king of the dinosaurs +</h3></pre> + +<p>Pot haver-hi ocasions en què s’inclogui una imatge al disseny d’una pàgina, però el seu propòsit principal sigui la decoració visual. Notareu a l’exemple de codi anterior que l’atribut <code>alt</code> de la imatge és buit: es tracta de fer que els lectors de pantalla reconeguin la imatge, però no intentin descriure-la (en lloc d’això, només dirien “imatge” o alguna cosa similar).</p> + +<p>La raó per utilitzar un <code>alt</code> buit en lloc de no incloure'l és perquè molts lectors de pantalla anuncien tota la URL de la imatge si no es proporciona cap <code>alt</code>. A l'exemple anterior, la imatge actua com a decoració visual de l'encapçalament amb què s'associa. En casos com aquest, i en els casos en què una imatge només sigui decorativa i no tingui cap valor de contingut, hauríeu d'incloure un <code>alt</code> buit als elements <code>img</code>. Una altra alternativa és utilitzar l'atribut aria <code>role="presentation"</code>, ja que també impedeix que els lectors de pantalla llegeixin el text alternatiu.</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> si és possible, heu d’utilitzar CSS per mostrar imatges només decoratives.</p> +</div> + +<h2 id="Més_sobre_els_enllaços">Més sobre els enllaços</h2> + +<p>Els enllaços (l'element <code><a></code> amb un atribut <code>href</code>), en funció de com s'utilitzin, poden ajudar o perjudicar l'accessibilitat. Per defecte, els enllaços són accessibles en aparença. Poden millorar l’accessibilitat ajudant l’usuari a navegar ràpidament a les diferents seccions d’un document. També poden perjudicar l’accessibilitat si s’elimina l’estil accessible o si JavaScript fa que es comportin de manera inesperada.</p> + +<h4 id="Estil_d’enllaç">Estil d’enllaç</h4> + +<p>Per defecte, els enllaços són visualment diferents de la resta del text en color i en decoració de text, amb els enllaços de color blau i subratllats per defecte, de color porpra i subratllats si s'han visitat, i amb un anell de focus quan reben el focus del teclat.</p> + +<p>No s’ha d’utilitzar el color com a únic mètode per distingir els enllaços del contingut que no enllaça. El color del text de l’enllaç, com tot el text, ha de diferir significativament del color de fons (<a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast">un contrast de 4,5:1</a>). A més, els enllaços han de ser significativament diferents del text que no enllaça. Amb un requisit de contrast mínim de 3:1 entre el text de l'enllaç i el text circumdant i entre els estats predeterminat, visitat i focus / actiu i un contrast de 4:5 entre tots els colors d'estat i el color de fons.</p> + +<h3 id="Esdeveniments_onclick">Esdeveniments onclick</h3> + +<p>Sovint s'abusa de les etiquetes d'ancoratge amb l'esdeveniment <code>onclick</code> per crear pseudo-botons configurant <strong>href</strong> a <code>"#"</code> o <code>"javascript:void(0)"</code> per evitar que la pàgina s'actualitzi.</p> + +<p>Aquests valors causen un comportament inesperat en copiar o arrossegar enllaços, en obrir enllaços en una pestanya o finestra nova, en afegir adreces d'interès i, quan el JavaScript encara s'està descarregant, es produeix un error o es desactiva. Això també transmet una semàntica incorrecta a les tecnologies d'assistència (per exemple, lectors de pantalla). En aquests casos, es recomana utilitzar un {{HTMLElement("button")}}. En general, només heu d'utilitzar un àncora per a la navegació mitjançant un URL adequat.</p> + +<h3 id="Enllaços_externs_i_enllaços_a_recursos_no_HTML">Enllaços externs i enllaços a recursos no HTML</h3> + +<p>Els enllaços que s'obrin en una nova pestanya o finestra mitjançant la declaració <code>target="_ blank"</code> i els enllaços el valor <code>href</code> dels quals apunti a un recurs de fitxer han d'incloure un indicador sobre el comportament que es produirà quan s'activi l'enllaç.</p> + +<p>Les persones amb problemes de visió baixa, que naveguen amb l'ajut de tecnologies de lectura de pantalla o que tenen problemes cognitius, poden confondre's quan s'obre inesperadament la nova pestanya, finestra o aplicació. És possible que versions antigues del programari de lectura de pantalla ni tan sols anunciïn el comportament.</p> + +<h4 id="Enllaç_que_obre_una_nova_pestanya_o_finestra">Enllaç que obre una nova pestanya o finestra</h4> + +<pre class="brush: html notranslate"><a target="_blank" href="https://www.wikipedia.org/">Wikipedia (opens in a new window)</a> +</pre> + +<h4 id="Enllaç_a_un_recurs_no_HTML">Enllaç a un recurs no HTML</h4> + +<pre class="brush: html notranslate"><a target="_blank" href="2017-annual-report.ppt">2017 Annual Report (PowerPoint)</a> +</pre> + +<p>Si s'utilitza una icona en comptes de text per assenyalar aquest tipus de comportament d'enllaç, assegureu-vos que inclou una {{HTMLAttrxRef("alt", "img", "descripció alternativa", "true")}}.</p> + +<ul> + <li><a href="https://webaim.org/techniques/hypertext/hypertext_links">WebAIM: Links and Hypertext - Hypertext Links</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.2_—_Predictable_Make_Web_pages_appear_and_operate_in_predictable_ways">MDN Understanding WCAG, Guideline 3.2 explanations</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G200.html">G200: Opening new windows and tabs from a link only when necessary | W3C Techniques for WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G201.html">G201: Giving users advanced warning when opening a new window | W3C Techniques for WCAG 2.0</a></li> +</ul> + +<h3 id="Enllaços_de_salt">Enllaços de salt</h3> + +<p>Un enllaç de salt, també conegut com a "skipnav", és un element situat tan a prop com sigui possible de l'element d'obertura {{HTMLElement ("body")}} que enllaça amb el començament del contingut principal de la pàgina. Aquest enllaç permet saltar el contingut que es repeteix en diverses pàgines d’un lloc web, com ara la capçalera d’un lloc web i la navegació principal.</p> + +<p>Els enllaços de salt són especialment útils per a les persones que naveguen amb l'ajuda de tecnologies d'assistència, com ara controls de commutació, ordres de veu o les varetes de cap / boca, on el fet de moure's per enllaços repetitius pot ser una tasca laboriosa.</p> + +<ul> + <li><a href="https://webaim.org/techniques/skipnav/">WebAIM: "Skip Navigation" Links</a></li> + <li><a href="https://www.a11yproject.com/posts/2013-05-11-skip-nav-links/">How–to: Use Skip Navigation links - The A11Y Project</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_%E2%80%94_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN Understanding WCAG, Guideline 2.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html">Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h3 id="Proximitat">Proximitat</h3> + +<p>Les grans quantitats de contingut interactiu (incloses les àncores) situades molt a prop les unes de les altres haurien de tenir espai inserit per separar-les. Aquest espaiat és beneficiós per a les persones que pateixen problemes de control motor fi i poden activar accidentalment el contingut interactiu equivocat durant la navegació.</p> + +<p>Es pot crear espai mitjançant propietats CSS com ara {{CSSxRef ("margin")}}.</p> + +<ul> + <li><a href="https://axesslab.com/hand-tremors/">Hand tremors and the giant-button-problem - Axess Lab</a></li> +</ul> + +<h2 id="Posa_a_prova_les_teves_habilitats!">Posa a prova les teves habilitats!</h2> + +<p>Heu arribat al final d’aquest article, però recordeu la informació més important? Consulteu <a href="/en-US/docs/Learn/Accessibility/Test_your_skills:_HTML_accessibility">Test your skills: HTML Accessibility</a> per verificar que heu conservat aquesta informació abans de continuar.</p> + +<h2 id="Resum">Resum</h2> + +<p>Ara hauríeu de tenir un bon coneixement de l’escriptura d’HTML accessible per a la majoria de les ocasions. El nostre article de fonaments de WAI-ARIA ajudarà a omplir els buits d’aquest coneixement, però aquest article s’ha ocupat dels conceptes bàsics. A continuació, explorarem CSS i JavaScript i com es veu afectada l’accessibilitat pel seu bon o mal ús.</p> + +<p>{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li> +</ul> diff --git a/files/ca/learn/accessibility/index.html b/files/ca/learn/accessibility/index.html new file mode 100644 index 0000000000..398a9ee96f --- /dev/null +++ b/files/ca/learn/accessibility/index.html @@ -0,0 +1,77 @@ +--- +title: Accessibility +slug: Learn/Accessibility +tags: + - ARIA + - Accessibility + - Articles + - Beginner + - CSS + - CodingScripting + - HTML + - JavaScript + - Landing + - Learn + - Module + - NeedsTranslation + - TopicStub +translation_of: Learn/Accessibility +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Learning some HTML, CSS, and JavaScript is useful if you want to become a web developer. Beyond mechanical use, it's important to learn how to use these technologies <strong>responsibly</strong> so that all readers might use your creations on the web. To help you achieve this, this module will cover general best practices (which are demonstrated throughout the <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> topics), <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">cross browser testing</a>, and some tips on enforcing accessibility from the start. We'll cover accessibility in special detail.</p> + +<h2 id="Overview">Overview</h2> + +<p>When someone describes a site as "accessible," they mean that any user can use all its features and content, regardless of how the user accesses the web — even and especially users with physical or mental impairments.</p> + +<ul> + <li>Sites should be accessible to keyboard, mouse, and touch screen users, and any other way users access the web, including screen readers and voice assistants like Alexa and Google Home.</li> + <li>Applications should be understandable and usable by people regardless of auditory, visual, physical, or cognitive abilities.</li> + <li>Sites should also not cause harm: web features like motion can cause migraines or epileptic seizures.</li> +</ul> + +<p><strong>By default, HTML is accessible, if used correctly.</strong> Web accessibility involves ensuring that content remains accessible, regardless of who and how the web is accessed.</p> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>To get the most out of this module, it would be a good idea to either work through at least the first two modules of the <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> topics, or perhaps even better, work through the relevant parts of the accessibility module as you work through the related technology topics.</p> + +<div class="note"> +<p><strong>Note</strong>: If you are working on a computer/tablet/other devices where you don't have the ability to create your own files, you can try out most of the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com/">Glitch</a>.</p> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></dt> + <dd>This article starts off the module with a good look at what accessibility is — this includes what groups of people we need to consider and why, what tools different people use to interact with the web, and how we can make accessibility part of our web development workflow.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></dt> + <dd>A great deal of web content can be made accessible just by making sure the correct HTML elements are always used for the correct purpose . This article looks in detail at how HTML can be used to ensure maximum accessibility.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></dt> + <dd>CSS and JavaScript, when used properly, also have the potential to allow for accessible web experiences, but if misused they can significantly harm accessibility. This article outlines some CSS and JavaScript best practices that should be considered to ensure that even complex content is as accessible as possible.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></dt> + <dd>Following on from the previous article, sometimes making complex UI controls that involve unsemantic HTML and dynamic JavaScript-updated content can be difficult. WAI-ARIA is a technology that can help with such problems by adding in further semantics that browsers and assistive technologies can recognize and use to let users know what is going on. Here we'll show how to use it at a basic level to improve accessibility.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></dt> + <dd>Another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives, so they can be understood by assistive technologies and their users. This article shows how.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></dt> + <dd>With web access on mobile devices being so popular, and popular platforms such as iOS and Android having fully-fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms. This article looks at mobile-specific accessibility considerations.</dd> +</dl> + +<h2 id="Assessments">Assessments</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></dt> + <dd> + <p>In the assessment for this module, we present to you a simple site with several accessibility issues that you need to diagnose and fix.</p> + </dd> +</dl> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://egghead.io/courses/start-building-accessible-web-applications-today">Start Building Accessible Web Applications Today</a> — an excellent series of video tutorials by Marcy Sutton.</li> + <li><a href="https://dequeuniversity.com/resources/">Deque University resources</a> — includes code examples, screen reader references, and other useful resources.</li> + <li><a href="http://webaim.org/resources/">WebAIM resources</a> — includes guides, checklists, tools, and more.</li> + <li><a href="https://www.w3.org/WAI/ER/tools/">Web Accessibility Evaluation Tools List</a> - includes a list of web accessibility evaluation tools.</li> +</ul> diff --git a/files/ca/learn/accessibility/que_es_accessibilitat/index.html b/files/ca/learn/accessibility/que_es_accessibilitat/index.html new file mode 100644 index 0000000000..6d8891a20c --- /dev/null +++ b/files/ca/learn/accessibility/que_es_accessibilitat/index.html @@ -0,0 +1,211 @@ +--- +title: Què és l'accessibilitat? +slug: Learn/Accessibility/Que_es_accessibilitat +translation_of: Learn/Accessibility/What_is_accessibility +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}</div> + +<p class="summary">Aquest article inicia el mòdul fent ullada a què és l’accessibilitat: aquesta visió general inclou quins grups de persones hem de considerar i per què, quines eines utilitzen les persones per a interactuar amb el web i com podem fer que l’accessibilitat sigui una part del nostre lloc web.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisits:</th> + <td>Coneixements bàsics d'informàtica i nocions bàsiques de com funcionen l'HTML i el CSS.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Adquirir familiaritat amb l’accessibilitat, inclòs què és i com t’afecta com a desenvolupador web.</td> + </tr> + </tbody> +</table> + +<h2 id="Què_és_laccessibilitat">Què és l'accessibilitat?</h2> + +<p>L’accessibilitat és la pràctica de fer que els llocs web siguin utilitzables per tantes persones com sigui possible. Tradicionalment pensem que es tracta de persones amb discapacitat, però el fet de fer accessibles els llocs web també beneficia altres grups, com els qui utilitzen dispositius mòbils o els qui tenen connexions de xarxa lentes.</p> + +<p>També pots pensar en l’accessibilitat com el fet de tractar igual a tothom i oferir igualtat d’oportunitats, independentment de quines siguin les capacitats o les circumstàncies. De la mateixa manera que no està bé excloure algú d’accedir a un edifici perquè va en cadira de rodes (els edificis públics moderns solen tenir rampes o ascensors per a cadires de rodes), tampoc és correcte excloure d’un lloc web algú que té una discapacitat visual. Tots som diferents, però tots som humans, i tenim els mateixos drets com a humans.</p> + +<p>Per això hem de fer les coses accessibles. L’accessibilitat dels llocs web forma part de la legislació d’alguns països, i et pot obrir un mercat significatiu, que d'altra manera no podria utilitzar els teus serveis ni comprar els teus productes.</p> + +<p>La construcció de llocs accessibles beneficia a tothom:</p> + +<ul> + <li>Un HTML semàntic, que millora l’accessibilitat, també millora el posicionament en els motors de cerca (SEO), i incrementa la possibilitat que trobin el teu lloc web.</li> + <li>Preocupar-se per l’accessibilitat demostra valors ètics i morals, cosa que millora la teva imatge pública.</li> + <li>Altres bones pràctiques que milloren l’accessibilitat també milloren la usabilitat d’altres grups, com ara els usuaris de telèfons mòbils o els que tenen una velocitat d’accés a la xarxa lenta. De fet, tothom pot beneficiar-se de moltes d'aquestes millores.</li> + <li>Hem esmentat que també hi ha lleis al respecte en alguns països?</li> +</ul> + +<h2 id="En_quins_tipus_de_discapacitat_ens_hem_de_fixar">En quins tipus de discapacitat ens hem de fixar?</h2> + +<p>Les persones amb discapacitat són igual de diverses que les persones sense discapacitat, i també ho són les discapacitats. La lliçó clau aquí és pensar més enllà de com utilitzes el teu ordinador i el web i començar a aprendre com l'utilitzen els altres, <em>tu no ets els teus usuaris</em>. A continuació s’expliquen els tipus principals de discapacitat que pots tenir en compte i les eines especials que s’utilitzen per a accedir al contingut web (conegudes com a <strong>tecnologies d’assistència</strong> o <strong>AT</strong>, d’<em>assistive technologies</em>).</p> + +<div class="note"> +<p><strong>Nota</strong>: La fitxa informativa sobre <a href="https://www.who.int/en/news-room/fact-sheets/detail/disability-and-health">discapacitat i salut</a> de l'Organització Mundial de la Salut estableix que «Més d'un milió de persones, aproximadament el 15% de la població mundial, tenen algun tipus de discapacitat» i «Entre 110 i 190 milions d'adults tenen dificultats importants de funcionament».</p> +</div> + +<h3 id="Les_persones_amb_discapacitat_visual">Les persones amb discapacitat visual</h3> + +<p>Les persones amb discapacitat visual inclouen persones amb ceguesa, poca visió i daltonisme. Moltes persones amb deficiències visuals utilitzen lupes de pantalla, que poden ser lupes físiques o les funcions de zoom del programari. La majoria de navegadors i sistemes operatius actuals tenen la capacitat de fer zoom. Alguns usuaris confien en lectors de pantalla, un programari que llegeix el text digital en veu alta. Alguns exemples de lectors de pantalla són:</p> + +<ul> + <li>Uns són productes comercials de pagament, com ara <a class="external external-icon" href="https://www.freedomscientific.com/Products/software/JAWS/">JAWS</a> (Windows) i <a href="https://yourdolphin.com/screenreader">Dolphin Screen Reader</a> (Windows).</li> + <li>D’altres són productes gratuïts, com <a class="external external-icon" href="https://www.nvaccess.org/">NVDA</a> (Windows), <a class="external external-icon" href="https://www.chromevox.com/">ChromeVox</a> (Chrome, Windows i Mac OS X) i <a class="external external-icon" href="https://wiki.gnome.org/Projects/Orca">Orca</a> (Linux).</li> + <li>N’hi ha que estan incorporats dins el sistema operatiu, com <a class="external external-icon" href="https://www.apple.com/accessibility/mac/vision/">VoiceOver</a> (macOS, iPadOS, iOS), <a class="external external-icon" href="https://support.microsoft.com/en-us/help/22798/windows-10-narrator-get-started">Narrator</a> (Microsoft Windows), <a class="external external-icon" href="https://www.chromevox.com/">ChromeVox</a> (al sistema operatiu Chrome) i <a class="external external-icon" href="https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback">TalkBack</a> (Android).</li> +</ul> + +<p>Seria bo que et familiaritzessis amb els lectors de pantalla; també hauries de configurar un lector de pantalla i experimentar-hi per a fer-te una idea de com funciona. Consulta la nostra <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">guia de lectors de pantalla per a proves de compatibilitat creuada entre navegadors</a> per a obtenir més detalls sobre el seu ús. El vídeo següent proporciona un breu exemple de com és l'experiència.</p> + +<p>{{EmbedYouTube("IK97XMibEws")}}</p> + +<p>En termes estadístics, l'Organització Mundial de la Salut estima que «hi ha al voltant de 285 milions de persones amb deficiències visuals a tot el món: 39 milions són cegues i 246 tenen un nivell de visió baix». (Consulta l’informe sobre <a href="https://www.who.int/mediacentre/factsheets/fs282/en/">Dificultat visual i ceguesa</a>). Es tracta d'una població d’usuaris molt gran i significativa, que no pots deixar escapar perquè el teu lloc web no es codifiqui correctament (parlem de gairebé el mateix nombre de persones que viuen a Estats Units d’Amèrica).</p> + +<h3 id="Les_persones_amb_discapacitat_auditiva">Les persones amb discapacitat auditiva</h3> + +<p>Altrament conegudes com persones amb deficiències auditives o persones sordes, aquest grup de persones es diferencia per tenir nivells auditius baixos o perquè, directament, no tenen sentit de l’oïda. Les persones amb deficiències auditives utilitzen AT (consulta els <a href="https://www.nidcd.nih.gov/health/assistive-devices-people-hearing-voice-speech-or-language-disorders">Dispositius assistents per a persones amb trastorns de l’audició, la veu, la parla o el llenguatge</a>), però realment no hi ha AT específics per a l’ús d'un ordinador o un lloc web.</p> + +<p>Tanmateix, hi ha tècniques específiques que proporcionen alternatives textuals al contingut d'àudio, que van des de transcripcions de text senzilles fins a pistes de text (és a dir, subtítols) que es poden mostrar juntament amb un vídeo. Més endavant, tractarem aquest tema en un article.</p> + +<p>Les persones amb discapacitat auditiva també representen una base d’usuaris important. «466 milions de persones a tot el món tenen pèrdua auditiva», diu el full informatiu de l'Organització Mundial de la Salut per a la <a href="https://www.who.int/mediacentre/factsheets/fs300/en/">Sordesa i pèrdua auditiva</a>.</p> + +<h3 id="Les_persones_amb_problemes_de_mobilitat">Les persones amb problemes de mobilitat</h3> + +<p>Aquestes persones tenen discapacitats motrius, que poden ser per problemes purament físics (com la pèrdua de les extremitats o una paràlisi), o per trastorns neurològics/genètics que condueixen a debilitat o pèrdua de control en les extremitats. Algunes persones podrien tenir dificultats per a fer els moviments de mà necessaris per a utilitzar un ratolí, mentre que d’altres poden tenir afectacions més greus, potser una paràlisi significativa, fins al punt que necessitin utilitzar un <a href="https://www.performancehealth.com/baseball-cap-head-pointer">punter de cap</a> per a interactuar amb els ordinadors.</p> + +<p>Aquest tipus de discapacitat també pot ser conseqüència d'una edat avançada, més que d'un traumatisme o una condició específica, o bé de les limitacions del maquinari (pot ser que alguns usuaris no tinguin un ratolí).</p> + +<p>La manera en què afecta habitualment el treball del desenvolupador web és en el requisit que els controls siguin accessibles pel teclat; tractarem l’accessibilitat del teclat en articles posteriors del mòdul, però és una bona idea provar d’accedir a alguns llocs web utilitzant només el teclat per veure com te'n surts. Per exemple, pots utilitzar la tecla de tabulació per a desplaçar-te entre els diferents controls d'un formulari web? Pots trobar més detalls sobre els controls de teclat a la nostra secció <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility">Prova de compatibilitat creuada entre navegadors Ús original d’accessibilitat des del teclat</a>.</p> + +<p>En termes estadístics, un nombre important de persones presenta deficiències de mobilitat. Els centres dels EUA per al control i la prevenció de la <a href="https://www.cdc.gov/nchs/fastats/disability.htm">discapacitat i el funcionament (adults no institucionalitzats de més de 18 anys)</a> informen que el percentatge d’adults amb dificultats de motricitat física als Estats Units és del 16,1%.</p> + +<h3 id="Les_persones_amb_problemes_de_cognició">Les persones amb problemes de cognició</h3> + +<p>El deteriorament cognitiu es refereix a una àmplia gamma de discapacitats, des de persones amb discapacitat intel·lectual que tenen les capacitats més limitades, fins a tots nosaltres, que a mesura que envellim tenim més dificultats per a pensar i recordar. La gamma inclou les persones amb malalties mentals com la <a href="https://www.nimh.nih.gov/health/topics/depression/index.shtml">depressió</a> i l’<a href="https://www.nimh.nih.gov/health/topics/schizophrenia/index.shtml">esquizofrènia</a>. També inclou persones amb discapacitats d'aprenentatge com la <a href="https://www.ninds.nih.gov/Disorders/All-Disorders/Learning-Disabilities-Information-Page">dislèxia</a> o el <a href="https://www.nimh.nih.gov/health/topics/attention-deficit-hyperactivity-disorder-adhd/index.shtml">trastorn d'hiperactivitat i dèficit d'atenció</a>. És important destacar que, tot i que hi ha molta diversitat en les definicions clíniques de deficiències cognitives, les persones que les tenen experimenten un conjunt de problemes funcionals comuns, que inclouen dificultats per comprendre els continguts, recordar com fer tasques, i confusions causades per dissenys de pàgines web incoherents.</p> + +<p>Una bona base d’accessibilitat per a persones amb deficiències cognitives inclou:</p> + +<ul> + <li>proporcionar el contingut de més d'una manera, com ara de text a veu o en vídeo;</li> + <li>proporcionar continguts fàcils d’entendre, com ara text escrit amb estàndards de llenguatge normal;</li> + <li>centrar l’atenció en els continguts importants;</li> + <li>minimitzar les distraccions, com ara continguts innecessaris o anuncis;</li> + <li>proporcionar un sistema de navegació i un disseny de la pàgina web coherents;</li> + <li>fer servir elements familiars, com ara els enllaços subratllats en blau quan encara no s'han visitat i en violeta quan ja s'han visitat;</li> + <li>dividir els processos en passos lògics i essencials amb indicadors de progrés;</li> + <li>oferir un sistema d'autenticació de llocs web tan simple com sigui possible sense comprometre la seguretat; i</li> + <li>dissenyar formularis fàcils d’emplenar, amb missatges d’error clars i facilitat de recuperació dels errors.</li> +</ul> + +<h3 id="Notes">Notes</h3> + +<ul> + <li>Un disseny d’<a href="/en-US/docs/Web/Accessibility/Cognitive_accessibility">accessibilitat cognitiva</a> dóna lloc a bones pràctiques de disseny. Això beneficia a tothom.</li> + <li>Moltes persones amb deficiències cognitives també tenen discapacitats físiques. Els llocs web han d’ajustar-se a les <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">Directrius d’accessibilitat per als continguts web</a> del W3C, que inclouen les <a href="/en-US/docs/Web/Accessibility/Cognitive_accessibility#Guidelines">directrius d’accessibilitat cognitiva</a>.</li> + <li>El Grup de <a href="https://www.w3.org/WAI/GL/task-forces/coga/">treball per a l'accessibilitat de persones amb discapacitats cognitives i d'aprenentatge</a> del W3C elabora directrius d'accessibilitat web per a persones amb deficiències cognitives.</li> + <li>WebAIM té una <a href="https://webaim.org/articles/cognitive/">pàgina sobre cognició</a>, amb informació i recursos rellevants<a name="_GoBack"></a>.</li> + <li>Els Centres de Control de Malalties dels Estats Units estimen que, del 2018 en endavant, 1 de cada 4 ciutadans dels Estats Units tenen alguna discapacitat, i que <a href="https://www.cdc.gov/media/releases/2018/p0816-disability.html">la més habitual en els joves és el deteriorament cognitiu</a>.</li> + <li>Als EUA, el terme «discapacitats intel·lectuals» és la nova manera de dir «retard mental». Al Regne Unit, les «discapacitats intel·lectuals» solen ser «discapacitats d'aprenentatge» o «dificultats d'aprenentatge».</li> +</ul> + +<h2 id="Implementar_laccessibilitat_del_teu_projecte">Implementar l'accessibilitat del teu projecte</h2> + +<p>Un mite comú de l’accessibilitat és que l’accessibilitat és un «cost afegit» a l'hora de crear un projecte. Aquest mite en realitat pot ser cert si:</p> + +<ul> + <li>Proves d’«incorporar» l'accessibilitat d’un lloc web que presenta problemes d'accessibilitat importants.</li> + <li>Has començat a plantejar-te l’accessibilitat i els problemes relacionats descoberts només en les últimes etapes d’un projecte.</li> +</ul> + +<p>Tanmateix, si consideres l'accessibilitat des del començament d'un projecte, el cost de fer la majoria del contingut accessible hauria de ser mínim.</p> + +<p>Quan planifiquis el teu projecte, inclou les proves d’accessibilitat en el teu règim de proves, conjuntament amb les proves per a qualsevol altre segment de públic objectiu important (per exemple, navegadors per a equips d’escriptori o per a dispositius mòbils). Fes les proves tan aviat com et sigui possible i de manera continuada, fes proves automatitzades per a descobrir les quines característiques de programació falten (com ara que falti el text alternatiu de les imatges o que hi hagi text d’enllaços erroni; observa les relacions entre els elements i el seu context) i fes proves amb grups d’usuaris discapacitats per veure com es desenvolupen amb els elements web més complexos. Per exemple:</p> + +<ul> + <li>La gent que utilitza lectors de pantalla pot fer servir el selector de dates?</li> + <li>Si el contingut s’actualitza de manera dinàmica, les persones amb deficiències visuals ho sabran?</li> + <li>Els botons d'interfície són accessibles des del teclat i les interfícies tàctils?</li> +</ul> + +<p>Pots i has de mantenir un seguiment de les possibles àrees problemàtiques del teu contingut que necessitaran més feina per a fer-lo accessible, assegura't que es fa una prova exhaustiva i pensa en solucions/alternatives. El contingut de text (com veuràs en l’article següent) és fàcil; però, i el contingut multimèdia i els gràfics 3D? Has de tenir present el pressupost del projecte i pensar de quines solucions disposes per a fer aquest contingut accessible. Una opció possible, tot i que costosa, és tenir transcrit tot el contingut multimèdia.</p> + +<p>Sigues realista. El «100% d'accessibilitat» és un ideal que no es pot assolir, sempre hi haurà algun cas que tingui com a resultat que un usuari determinat trobi uns continguts determinats difícils d'utilitzar, però tot i això, hauries de fer tot allò que et sigui possible. Si tens previst incloure un gràfic 3D elaborat amb WebGL, potser voldràs incloure una taula de dades com a representació alternativa accessible de les dades. O, simplement, voldràs incloure la taula i desfer-te del gràfic de taules 3D: és accessible per a tothom, més ràpida de codificar, empra menys recursos de la CPU i és més fàcil de mantenir.</p> + +<p>Ara bé, si treballes en un lloc web d’una galeria d’art que mostra obres d'art interessants en 3D, no seria raonable esperar que les obres fossin perfectament accessible per a persones amb deficiències visuals, ja que es tracta d'un mitjà totalment visual.</p> + +<p>Per demostrar que et preocupa i has pensat en l’accessibilitat, publica una declaració d’accessibilitat en el teu lloc web en què es detalli quina és la teva política d’accessibilitat i quins passos has fet per a aconseguir que el lloc sigui accessible. Si algú es queixa que el teu lloc web té un problema d’accessibilitat, estableix-hi un diàleg, mostra empatia i pren les mesures raonables per a intentar solucionar el problema.</p> + +<div class="note"> +<p><strong>Nota</strong>: El nostre article sobre la <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Gestió de problemes d’accessibilitat comuns</a> exposa especificacions d’accessibilitat que s’han de provar amb més detall.</p> +</div> + +<p>En resum:</p> + +<ul> + <li>Considera l’accessibilitat des de l’inici d’un projecte i prova-la tan aviat com et sigui possible i de manera continuada. Igual que qualsevol altre error, un problema d’accessibilitat es fa més car de resoldre com més tard es descobreix.</li> + <li>Tingues en compte que moltes pràctiques d’accessibilitat beneficien a tothom, no només els usuaris amb discapacitat. Per exemple, el marcatge semàntic no és bo només per als lectors de pantalla, sinó que a més resulta ràpid de carregar i presenta un bon rendiment. Això beneficia a tothom, sobretot els dispositius mòbils i les connexions lentes.</li> + <li>Publica una declaració d’accessibilitat al lloc web i relaciona't amb les persones que hi tinguin problemes.</li> +</ul> + +<h2 id="Directrius_d’accessibilitat_i_lleis">Directrius d’accessibilitat i lleis</h2> + +<p>Hi ha tantes llistes de comprovació i conjunts de pautes disponibles per a fonamentar les proves d’accessibilitat, que pot semblar aclaparador a primera vista. El nostre consell és que et familiaritzis amb les àrees bàsiques de què t’has d’ocupar i comprendre les estructures d’alt nivell de les directrius que més t'interessin.</p> + +<ul> + <li>Per començar, W3C ha publicat un document ampli i molt detallat que inclou criteris tecnològics i agnòstics molt precisos per a la conformitat de l'accessibilitat. S’anomenen <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">directrius d’accessibilitat per a continguts web</a> (WCAG) i no són en absolut una lectura curta. Els criteris es divideixen en quatre categories principals, que especifiquen com es pot aconseguir que les implementacions resultin percebudes, operables, comprensibles i coherents. El millor lloc per a obtenir una introducció lleugera i començar a aprendre és <a href="https://www.w3.org/WAI/standards-guidelines/wcag/glance/">WCAG at a Glance</a>. No cal que t’aprenguis el WCAG de memòria: tingues en compte les teves àrees de preocupació principals i utilitza diverses tècniques i eines per destacar les àrees que no s’ajusten als criteris del WCAG (continua més avall).</li> + <li>El teu país també pot disposar de legislació específica que reguli la necessitat que els llocs web al servei de la població siguin accessibles (per exemple, <a href="https://www.etsi.org/deliver/etsi_en/301500_301599/301549/02.01.02_60/en_301549v020102p.pdf">EN 301 549</a> a la UE, la <a href="https://www.section508.gov/training">secció 508 de la Llei de rehabilitació</a> als Estats Units, l'<a href="https://www.einfach-fuer-alle.de/artikel/bitv_english/">Ordenança Federal sobre Tecnologies de la Informació sense barreres</a> a Alemanya, les <a href="https://www.legislation.gov.uk/uksi/2018/952/introduction/made">Normes d’Accessibilitat del 2018</a> al Regne Unit, l'<a href="https://www.agid.gov.it/it/design-servizi/accessibilita-siti-web">Accessibilitat</a> a Itàlia, la <a href="https://www.humanrights.gov.au/world-wide-web-access-disability-discrimination-act-advisory-notes-ver-41-2014">Llei de discriminació per discapacitat</a> a Austràlia, etc.). L'W3C conté una <a href="https://www.w3.org/WAI/policies/">llista de les lleis i polítiques d’accessibilitat web</a> per país.</li> +</ul> + +<p>De manera que mentre que el WCAG és un conjunt de directrius, el teu país probablement disposa de lleis que regulen l’accessibilitat web o, almenys, l’accessibilitat dels serveis disponibles per al públic (que podrien incloure llocs web, televisió, espais físics, etc.). És una bona idea que et preocupis per esbrinar quines són aquestes lleis, perquè podria ser que tinguis algun tipus de responsabilitat legal si la gent es queixa.</p> + +<p>Tot i que sona molt seriós, de fet només cal que consideris l’accessibilitat com la prioritat principal de les teves pràctiques de desenvolupament web, tal com hem exposat abans. En cas de dubte, demana l’assessorament d’un advocat qualificat. Aquí no oferirem més consells sobre el tema, perquè no som advocats.</p> + +<h2 id="API_daccessibilitat">API d'accessibilitat</h2> + +<p>Els navegadors web fan ús de les <strong>API d’accessibilitat</strong> especial (proporcionades pel sistema operatiu subjacent), que exposen informació útil per a tecnologies assistencials (AT, <em>assistive technologies</em>): les AT solen fer ús d’informació semàntica, és a dir, que aquesta informació no inclou aplicació d’estil o JavaScript. Aquesta informació s’estructura en un arbre d’informació anomenat <strong>arbre d’accessibilitat</strong>.</p> + +<p>Els diferents sistemes operatius tenen diferents API d’accessibilitat disponibles:</p> + +<ul> + <li>Windows: MSAA/IAccessible, UIAExpress, IAccessible2</li> + <li>Mac OS X: NSAccessibility</li> + <li>Linux: AT-SPI</li> + <li>Android: Accessibility framework</li> + <li>iOS: UIAccessibility</li> +</ul> + +<p>Si cau la informació semàntica d’origen que proporcionen els elements HTML de les teves aplicacions web, pots completar-la amb funcions de l’<a href="https://www.w3.org/TR/wai-aria/">especificació WAI-ARIA</a>, que afegeixen informació semàntica a l’arbre d’accessibilitat per a millorar-ne l’accessibilitat. Pots obtenir més informació sobre WAI-ARIA en el nostre article <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA bàsic</a>.</p> + +<h2 id="Resum">Resum</h2> + +<p>Aquest article t'hauria d'haver proporcionat una panoràmica útil i de gran nivell sobre l'accessibilitat, i mostrat per què és important i com pots integrar-la en el teu flux de treball. Ara també hauries de frisar per conèixer els detalls d’implementació que poden fer que els llocs web siguin accessibles, i començarem a fer-ho en la secció següent, i veurem per què l’HTML és una bona base per a l'accessibilitat.</p> + +<p>{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}</p> + +<h2 id="En_aquest_mòdul">En aquest mòdul</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">Què és l'accessibilitat?</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/HTML">L’HTML: Una bona base per a l'accessibilitat</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">Bones pràctiques d’accessibilitat en CSS i JavaScript</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">Conceptes bàsics de WAI-ARIA</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessibilitat multimèdia</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Accessibilitat mòbil</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Resolució de problemes amb accessibilitat</a></li> +</ul> + +<h2 id="Consulta_també">Consulta també</h2> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG">WCAG</a> + + <ul> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable">Percebible</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable">Operable</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable">Comprensible</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Robust">Robust</a></li> + </ul> + </li> +</ul> diff --git a/files/ca/learn/css/building_blocks/advanced_styling_effects/index.html b/files/ca/learn/css/building_blocks/advanced_styling_effects/index.html new file mode 100644 index 0000000000..4196ac9434 --- /dev/null +++ b/files/ca/learn/css/building_blocks/advanced_styling_effects/index.html @@ -0,0 +1,410 @@ +--- +title: Efectes avançats de la caixa +slug: Learn/CSS/Building_blocks/Advanced_styling_effects +tags: + - Article + - Beginner + - Blend modes + - Boxes + - CSS + - CodingScripting + - Filters + - Styling + - box shadows + - effects +translation_of: Learn/CSS/Building_blocks/Advanced_styling_effects +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</div> + +<p class="summary">Aquest article actua com una caixa de trucs, que proporciona una introducció a algunes de les característiques avançades disponibles per a caixes d'estil que no encaixen a les altres categories anteriors - com ara ombres de caixa, modes de combinació i filtres.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td><span id="result_box" lang="ca"><span>Conceptes bàsics d'HTML</span></span> (estudi <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">Introducció a HTML</a>), <span id="result_box" lang="ca"><span>i una idea de com funciona CSS</span></span> (estudi <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Introducció a CSS</a>).</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Obtenir una idea sobre com utilitzar els efectes avançats de la caixa i conèixer algunes de les eines d'estil emergents que apareixen al llenguatge CSS.</td> + </tr> + </tbody> +</table> + +<h2 id="Ombres_de_caixa">Ombres de caixa</h2> + +<p>De tornada al nostre mòdul <a href="/en-US/docs/Learn/CSS/Styling_text">Estilitzar text</a> module, vam mirar la propietat {{cssxref("text-shadow")}}, que permet aplicar una o més ombres al text d'un element. Bé, existeix una propietat equivalent per les caixes - {{cssxref("box-shadow")}} que permet aplicar una o més ombres a una caixa de l'element actual. Igual que les ombres de text, les ombres de caixa són bastant ben suportades en tots els navegadors, però només a IE9+. Els usuaris de versions antigues d'IE podrien haver de fer front a no veure cap ombra, així que només cal que proveu els vostres dissenys per assegurar-vos que el vostre contingut sigui llegible sense elles.</p> + +<p>Podeu trobar els exemples d'aquesta secció a <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/box-shadow.html">box-shadow.html</a> (vegeu el <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/box-shadow.html">codi font</a> també).</p> + +<h3 id="Una_ombra_de_caixa_senzilla">Una ombra de caixa senzilla</h3> + +<p>Vegeu un exemple senzill per començar les coses. Primer, algun HTML:</p> + +<pre class="brush: html"><article class="simple"> + <p><strong>Warning</strong>: The thermostat on the cosmic transcender has reached a critical level.</p> +</article></pre> + +<p>Ara el CSS:</p> + +<pre class="brush: css">p { + margin: 0; +} + +article { + max-width: 500px; + padding: 10px; + background-color: red; + background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); +} + +.simple { + box-shadow: 5px 5px 5px rgba(0,0,0,0.7); +}</pre> + +<p><span class="short_text" id="result_box" lang="ca"><span>Això ens dóna el següent resultat:</span></span></p> + +<p>{{ EmbedLiveSample('A_simple_box_shadow', '100%', 100) }}</p> + +<p>Veureu que tenim quatre elements en el valor de la propietat <code>box-shadow</code>:</p> + +<ol> + <li>El primer valor de longitud és el desplaçament horitzontal (<strong>horizontal offset</strong>) - la distància a la dreta que l'ombra es desplaça des de la caixa original (o a l'esquerra, si el valor és negatiu).</li> + <li>El segon valor de longitud és el desplaçament vertical (<strong>vertical offset</strong>) - la distància cap avall que l'ombra es desplaça des de la caixa original (o cap amunt, si el valor és negatiu).</li> + <li>El tercer valor de longitud és el radi de difuminat (<strong>blur radius</strong>) - la quantitat de difuminació aplicada a l'ombra.</li> + <li>El valor de color és el color base (<strong>base color</strong>) de l'ombra.</li> +</ol> + +<p>Podeu utilitzar qualsevol longitud i unitats de color que tingui sentit fer-ho per definir aquests valors.</p> + +<h3 id="Múltiples_ombres_de_caixa">Múltiples ombres de caixa</h3> + +<p>També podeu especificar múltiples ombres de caixa en una única declaració <code>box-shadow</code>, separant-les amb comes:</p> + +<div class="hidden"> +<pre class="brush: html"><article class="multiple"> + <p><strong>Warning</strong>: The thermostat on the cosmic transcender has reached a critical level.</p> +</article></pre> +</div> + +<pre class="brush: css">p { + margin: 0; +} + +article { + max-width: 500px; + padding: 10px; + background-color: red; + background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); +} + +.multiple { + box-shadow: 1px 1px 1px black, + 2px 2px 1px black, + 3px 3px 1px red, + 4px 4px 1px red, + 5px 5px 1px black, + 6px 6px 1px black; +}</pre> + +<p>Ara obtenim aquest resultat:</p> + +<p>{{ EmbedLiveSample('Multiple_box_shadows', '100%', 100) }}</p> + +<p>Hem fet alguna cosa divertida, aquí, creant una caixa elevada amb diverses capes de colors, però podeu utilitzar-la de la manera que vulgueu, per exemple, per crear un aspecte més realista amb ombres basades en múltiples fonts de llum.</p> + +<h3 id="Altres_característiques_d'ombra_de_caixa">Altres característiques d'ombra de caixa</h3> + +<p>A diferència de {{cssxref("text-shadow")}}, {{cssxref("box-shadow")}} té una paraula clau disponible <code>inset</code> - posar-la al principi d'una declaració ombra fa que es converteixi en una ombra interior, més aviat, que una ombra exterior. Fem un cop d'ull i vegem què volem dir.</p> + +<p>En primer lloc, anirem amb un codi HTML diferent per a aquest exemple:</p> + +<pre class="brush: html"><button>Press me!</button></pre> + +<pre class="brush: css">button { + width: 150px; + font-size: 1.1rem; + line-height: 2; + border-radius: 10px; + border: none; + background-image: linear-gradient(to bottom right, #777, #ddd); + box-shadow: 1px 1px 1px black, + inset 2px 3px 5px rgba(0,0,0,0.3), + inset -2px -3px 5px rgba(255,255,255,0.5); +} + +button:focus, button:hover { + background-image: linear-gradient(to bottom right, #888, #eee); +} + +button:active { + box-shadow: inset 2px 2px 1px black, + inset 2px 3px 5px rgba(0,0,0,0.3), + inset -2px -3px 5px rgba(255,255,255,0.5); +}</pre> + +<p><span class="short_text" id="result_box" lang="ca"><span>Això ens dóna el següent resultat:</span></span></p> + +<p>{{ EmbedLiveSample('Other_box_shadow_features', '100%', 70) }}</p> + +<p>Aquí hem configurat un estil de botó juntament amb els estats focus/hover/active. El botó té una senzilla ombra de caixa negre que s'adapta a ella de manera predeterminada, a més d'un parell d'ombres d'inserció, una de llum i una altra fosca, situades a les cantonades oposades del botó per donar-li un bon efecte d'ombrejat.</p> + +<p>Quan es prem el botó, l'estat active fa que es canviï la primera ombra de la caixa per una ombra d'inserció molt fosca, donant l'aparença del botó que es prem.</p> + +<div class="note"> +<p><strong>Nota</strong>: Hi ha un altre element que es pot establir en el valor de <code>box-shadow</code> - un altre valor de longitud es pot configurar de manera opcional just abans del valor del color, que és un radi de dispersió (<strong>spread radius</strong>). Si s'estableix, això fa que l'ombra sigui més gran que la caixa original. No és molt utilitzat, però val la pena esmentar.</p> +</div> + +<h2 id="Filtres">Filtres</h2> + +<p>Els filtres CSS proporcionen una manera d'aplicar filtres a un element de la mateixa manera que podeu aplicar un filtre a una capa d'un paquet gràfic com Photoshop. Hi ha diverses opcions disponibles, i podeu llegir-les totes amb més detall a la pàgina de referència {{cssxref("filtre")}}. En aquesta secció, us explicarem la sintaxi i us mostrarem lo divertit que poden ser els resultats.</p> + +<p>Bàsicament, un filtre es pot aplicar a qualsevol element, bloc o en línia - simplement utilitzeu la propietat <code>filter</code> i li proporcioneu un valor d'una funció de filtre en particular. Algunes de les opcions de filtre, disponibles, fan coses molt similars a altres funcions CSS, per exemple, drop-shadow() funciona d'una manera molt similar i dóna un efecte similar a {{cssxref("box-shadow")}} o {{cssxref("text-shadow")}}. La cosa realment agradable sobre els filtres és que treballen sobre les formes exactes del contingut dins de la caixa, no només la caixa en si mateix com un gran tros, que pot semblar més bonic, encara que no sempre pot ser el que desitjeu. Vegem un exemple senzill per il·lustrar el que volem dir:</p> + +<p>En primer lloc, un senzill HTML:</p> + +<pre class="brush: html"><p class="filter">Filter</p> + +<p class="box-shadow">Box shadow</p> +</pre> + +<p><span id="result_box" lang="ca"><span>I ara, alguns CSS per aplicar una ombra a cadascuna</span></span>:</p> + +<pre class="brush: css">p { + margin: 1rem auto; + padding: 20px; + width: 100px; + border: 5px dashed red; +} + +.filter { + -webkit-filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7)); + filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7)); +} + +.box-shadow { + box-shadow: 5px 5px 1px rgba(0,0,0,0.7); +}</pre> + +<p><span class="short_text" id="result_box" lang="ca"><span>Això ens dóna el següent resultat:</span></span></p> + +<p>{{ EmbedLiveSample('Filters', '100%', 200) }}</p> + +<p>Com podeu veure, el filtre drop-shadow segueix la forma exacta del text i els guions de la vora. L'ombra de la caixa només segueix el quadrat de la caixa.</p> + +<p>Algunes altres coses a destacar</p> + +<ul> + <li>Els filtres són molt nous - són compatibles amb la majoria de navegadors moderns, fins i tot Microsoft Edge, però no són compatibles en absolut amb Internet Explorer. Si utilitzeu filtres en els vostres dissenys, us heu de garantir que el vostre contingut es pugui utilitzar sense els filtres.</li> + <li>Veureu que hem inclòs una versió de la propietat <code>filtre</code> amb -<code>webkit</code>- prefixada. Es diu {{glossary("Vendor Prefix")}}, i és utilitzada de vegades per un navegador abans que finalitzi la implementació d'una nova característica, per suportar aquesta característica i experimentar amb ella sense coincidir amb la versió no prefixada. Els Vendor prefixes mai van ser destinats a ser utilitzats pels desenvolupadors web, però s'utilitzen de vegades a les pàgines de producció si realment es desitgen les característiques experimentals. En aquest cas, actualment, la versió -<code>webkit</code>- de la propietat és necessària per al suport de Chrome/Safari/ Opera, mentre que Edge i Firefox utilitzen la versió final, no prefixada.</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: Si decidiu utilitzar els prefixos en el vostre codi, assegureu-vos d'incloure tots els prefixos requerits, així com la versió no prefixada, de manera que el nombre màxim de navegadors possibles poguin utilitzar la característica, i quan els navegadors posteriorment deixin anar els prefixos, també poguin utilitzar la versió no prefixada. Tingueu també en compte que aquestes característiques experimentals podrien canviar, de manera que el codi podria trencar-se. Realment és millor experimentar amb aquestes característiques fins que s'eliminin els prefixos.</p> +</div> + +<p>Podeu veure altres exemples de filtres a <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/filters.html">filters.html</a> (vegeu també el <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/filters.html">codi font</a>).</p> + +<h2 id="Modes_de_mescla_(Blend)">Modes de mescla (Blend)</h2> + +<p>Els modes de mescla CSS ens permeten afegir modes de mescla a elements que especifiquen un efecte de mescla quan es superposen dos elements - el color final mostrat per a cada píxel serà el resultat d'una combinació del color del píxel original i el del píxel en la capa de sota. Els modes de mescla tornen a ser molt familiars per als usuaris d'aplicacions gràfiques com Photoshop.</p> + +<p>Hi ha dues propietats que utilitzen modes de mescla en CSS:</p> + +<ul> + <li>{{cssxref("background-blend-mode")}}, mescla diverses imatges de fons i colors establerts, en un sol element.</li> + <li>{{cssxref("mix-blend-mode")}}, mescla l'element que està establert amb elements que es superposen - tant de fons com de contingut.</li> +</ul> + +<p>Trobareu molts més exemples, que els disponibles aquí, a la nostra pàgina d'exemple <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/blend-modes.html">blend-modes.html</a> (consulteu el <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/blend-modes.html">codi font</a>), i a la pàgina de referència {{cssxref("<blend-mode>")}}.</p> + +<div class="note"> +<p><strong>Nota</strong>: Els modes de mescla són també molt nous i lleugerament menys compatibles que els filtres. Encara no hi ha cap suport a Edge, i Safari només admet algunes de les opcions de mode de mescla.</p> +</div> + +<h3 id="background-blend-mode">background-blend-mode</h3> + +<p>De nou, anem a veure alguns exemples perquè pugueu entendre millor això. En primer lloc, {{cssxref("background-blend-mode")}} - aquí mostrarem un parell de {{htmlelement("div")}}s senzills, de manera que pogueu comparar l'original amb la versió barrejada:</p> + +<pre class="brush: html"><div> +</div> +<div class="multiply"> +</div></pre> + +<p>Ara, alguns CSS - afegim dues imatges de fons als <code><div></code>s: un gradient lineal i un png:</p> + +<pre class="brush: css">div { + width: 280px; + height: 130px; + padding: 10px; + margin: 10px; + display: inline-block; + background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px; + background-color: green; +} + +.multiply { + background-blend-mode: multiply; +}</pre> + +<p>El resultat que obtenim és el següent - podeu veure l'original a l'esquerra i el mode de mescla <code>multiply</code> a la dreta:</p> + +<p>{{ EmbedLiveSample('background-blend-mode', '100%', 200) }}</p> + +<h3 id="mix-blend-mode">mix-blend-mode</h3> + +<p>Ara mirem {{cssxref("mix-blend-mode")}}. Aquí presentem els mateixos dos <code><div></code>s, però cadascun d'ells ara està assegut a la part superior d'un simple <code><div></code> amb un fons porpra, per mostrar com es barregen els elements:</p> + +<pre class="brush: html"><article> + No mix blend mode + <div> + + </div> + <div> + </div> +</article> + +<article> + Multiply mix + <div class="multiply-mix"> + + </div> + <div> + </div> +</article></pre> + +<p><span id="result_box" lang="ca"><span>Aquí teniu el CSS amb aquest estil:</span></span></p> + +<pre class="brush: css">article { + width: 300px; + height: 180px; + margin: 10px; + position: relative; + display: inline-block; +} + +div { + width: 250px; + height: 130px; + padding: 10px; + margin: 10px; +} + +article div:first-child { + position: absolute; + top: 10px; + left: 0; + background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px; + background-color: green; +} + +article div:last-child { + background-color: purple; + position: absolute; + bottom: -10px; + right: 0; + z-index: -1; +} + +.multiply-mix { + mix-blend-mode: multiply; +}</pre> + +<p><span class="short_text" id="result_box" lang="ca"><span>Això ens dóna el següent resultat:</span></span></p> + +<p>{{ EmbedLiveSample('mix-blend-mode', '100%', 200) }}</p> + +<p>Aquí podeu veure que la mescla de la mescla de multiply ha combinat no només les dues imatges de fons, sinó també el color del <code><div></code> a sota.</p> + +<div class="note"> +<p><strong>Nota</strong>: No us preocupeu si no enteneu algunes de les propietats de disseny anteriors, com ara {{cssxref("position")}}, {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("z-index")}}, etc. Les cobrirem amb més detall en el nostre mòdul de <a href="/en-US/docs/Learn/CSS/CSS_layout">Disseny CSS</a>.</p> +</div> + +<h2 id="-webkit-background-clip_text">-webkit-background-clip: text</h2> + +<p>Una altra característica incipient que pensàvem esmentar breument abans de seguir endavant (actualment compatible amb Chrome, Safari i Opera i que es va implementar a Firefox) és el valor <code>text</code> de {{cssxref("background-clip")}}. Quan s'utilitza juntament amb el propietari -<code>webkit-text-fill-color: transparent</code>; la característica, això us permet retallar imatges de fons a la forma del text de l'element, fent-ne uns efectes agradables. Aquest no és un estàndard oficial, però s'ha implementat en diversos navegadors, ja que és popular i utilitzat àmpliament pels desenvolupadors. Quan s'utilitza en aquest context, ambdues propietats requeriran un -<code>webkit</code>- vendor prefix, fins i tot per a navegadors no basats en Webkit/Chrome:</p> + +<pre class="brush: css">.text-clip { + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +}</pre> + +<p>Llavors, per què altres navegadors han implementat un prefix -webkit-? Principalment per a la compatibilitat del navegador - així, que molts desenvolupadors web van començar a implementar llocs web amb prefixes -<code>webkit</code>- va començar a semblar que els altres navegadors estaven trencats, mentre que, de fet, seguien els estàndards. Així que es van veure forçats a implementar algunes característiques d'aquest tipus. Això posa de manifest el perill d'utilitzar característiques CSS no estàndard i/o prefixades en el vostre treball - no només causen problemes de compatibilitat amb el navegador, sinó que també estan subjectes a canvis, de manera que el vostre codi podria trencar-se en qualsevol moment. És molt millor complir amb els estàndards.</p> + +<p>Si voleu utilitzar aquestes característiques en el vostre treball de producció, assegurar-vos de provar, a fons, en tots els navegadors i comprovar que, en els casos en què aquestes característiques no funcionin, el lloc encara és utilitzable.</p> + +<div class="note"> +<p><strong>Nota</strong>: Per a un complet codi d'exemple sobre <code>-webkit-background-clip: text</code>, vegeu <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/background-clip-text.html">background-clip-text.html</a> (vegeu també el <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/background-clip-text.html">codi font</a>).</p> +</div> + +<h2 id="Aprenentatge_actiu_experimentar_amb_alguns_efectes">Aprenentatge actiu: experimentar amb alguns efectes</h2> + +<p>Ara és el vostre torn. Per a aquest aprenentatge actiu, volem que experimenteu alguns dels efectes que heu llegit anteriorment, utilitzant el codi proporcionat a continuació.</p> + +<p>Si cometeu un error, sempre podeu restablir l'exemple mitjançant el botó <em>Reset</em>.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> + <h2>HTML Input</h2> + <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><div class="style-me"> +</div></textarea> + + <h2>CSS Input</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">.style-me { + width: 280px; + height: 130px; + padding: 10px; + margin: 10px; + display: inline-block; + background-color: red; + background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px, + linear-gradient(to bottom right, #f33, #a33); +} </textarea> + + <h2>Output</h2> + <div class="output" style="width: 90%;height: 15em;padding: 10px;border: 1px solid #0095dd;overflow:hidden;"></div> + <div class="controls"> + <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"> + </div> +</div> +</pre> + +<pre class="brush: js">var htmlInput = document.querySelector(".html-input"); +var cssInput = document.querySelector(".css-input"); +var reset = document.getElementById("reset"); +var htmlCode = htmlInput.value; +var cssCode = cssInput.value; +var output = document.querySelector(".output"); + +var styleElem = document.createElement('style'); +var headElem = document.querySelector('head'); +headElem.appendChild(styleElem); + +function drawOutput() { + output.innerHTML = htmlInput.value; + styleElem.textContent = cssInput.value; +} + +reset.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = cssCode; + drawOutput(); +}); + +htmlInput.addEventListener("input", drawOutput); +cssInput.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 820) }}</p> + +<h2 id="Resum">Resum</h2> + +<p>Esperem que aquest article hagi demostrat ser divertit en general - jugar amb joguines brillants i sempre és interessant veure quins tipus d'eines només estan disponibles en navegadors d'avantguarda. Heu arribat al final dels articles de les <a href="/en-US/docs/Learn/CSS/Styling_boxes">Caixes d'estil</a> de manera que a continuació, provareu les vostres habilitats amb les caixes d'estil amb les nostres avaluacions.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</p> diff --git a/files/ca/learn/css/building_blocks/cascada_i_herència/index.html b/files/ca/learn/css/building_blocks/cascada_i_herència/index.html new file mode 100644 index 0000000000..09a5e368eb --- /dev/null +++ b/files/ca/learn/css/building_blocks/cascada_i_herència/index.html @@ -0,0 +1,333 @@ +--- +title: Cascada i herència +slug: Learn/CSS/Building_blocks/Cascada_i_herència +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +--- +<div>{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</div> + +<p>L’objectiu d’aquest article és desenvolupar la comprensió d’alguns dels conceptes més fonamentals del CSS (la cascada, l’especificitat i l’herència) que controlen com s’aplica el CSS a l’HTML i com es resolen els conflictes.</p> + +<p>Si bé pot semblar que és menys rellevant i una mica més acadèmic que algunes altres parts del curs, la seva comprensió t'estalviarà feina més endavant! T’animem a treballar aquesta secció en profunditat i comprovar que entens els conceptes abans de continuar endavant.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisits:</th> + <td>Coneixements bàsics d'informàtica, tenir el <a href="/ca/docs/Learn/Getting_started_with_the_web/Instal·lació_bàsica_programari">programari bàsic instal·lat</a>, coneixements bàsics de com <a href="/ca/docs/Learn/Getting_started_with_the_web/Tractar_amb_arxius">treballar amb fitxers</a> i d'HTML (mira <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a>) i nocions bàsiques de <a href="/ca/docs/Learn/CSS/First_steps">com funciona el CSS</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Aprendre què són la cascada i l'especificitat, i com funciona l'herència en CSS.</td> + </tr> + </tbody> +</table> + +<h2 id="Regles_conflictives">Regles conflictives</h2> + +<p>CSS significa fulls d'estil en cascada (<strong>cascading style sheets</strong>), i es molt important entendre la paraula, <em>cascada</em>; el comportament de la cascada és clau per a comprendre el CSS.</p> + +<p>En algun moment treballaràs en un projecte i trobaràs que el CSS que creus que s’hauria d’aplicar a un element no funciona. Normalment, el problema és que has creat dues regles que podrien aplicar-se al mateix element. La <strong>cascada</strong> i el concepte d’<strong>especificitat</strong>, que estan estretament relacionats, són mecanismes que controlen quina regla s'aplica quan hi ha aquest conflicte. La regla que dona estil al teu element pot ser que no sigui la que esperaves, per la qual cosa has d'entendre com funcionen aquests mecanismes.</p> + +<p>Aquí també és important el concepte <strong>d'herència</strong>, que significa que algunes propietats CSS per defecte hereten valors establerts per a l'element pare, i d'altres no. Això també pot causar algun comportament que potser no esperes.</p> + +<p>Comencem per fer una ullada ràpida als elements clau que tractem i, a continuació, examinarem com interaccionen entre si i amb el CSS. Poden semblar un conjunt de conceptes complicats d’entendre. A mesura que vagis adquirint pràctica a l'hora d’escriure CSS, se’t farà més evident la manera que té de funcionar.</p> + +<h3 id="La_cascada">La cascada</h3> + +<p>Fulls d’estil en <strong>cascada</strong>: en un nivell molt senzill això significa que l’ordre de les regles CSS és important; quan s’apliquen dues regles que tenen la mateixa especificitat, la que s’utilitza és l'última que surt al codi CSS.</p> + +<p>En l’exemple següent hi ha dues regles que podrien aplicar-se a <code>h1</code>. <code>h1</code> acaba sent de color blau: aquestes regles tenen un selector idèntic i, per tant, porten la mateixa especificitat, de manera que l’última regla en el full d'estil guanya.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} </p> + +<h3 id="Especificitat">Especificitat</h3> + +<p>L’especificitat és la manera com el navegador decideix quina regla s’aplica si diverses regles tenen selectors diferents i poden aplicar-se al mateix element. Bàsicament és una mesura de com d'específica serà la selecció d'un selector:</p> + +<ul> + <li>Un selector d’elements és menys específic (selecciona tots els elements d’un mateix tipus que apareixen en una pàgina) i, per tant, obté una puntuació més baixa.</li> + <li>Un selector de classes és més específic: només selecciona els elements d'una pàgina que tenen un valor d'atribut <code>class</code> específic, de manera que obté una puntuació més alta.</li> +</ul> + +<p>Vegem-ne un exemple! A continuació, tornem a tenir dues regles que podrien aplicar-se a <code>h1</code>. L’encapçalament <code>h1</code> següent acaba sent de color vermell: el selector de classe dona a aquesta regla una especificitat més alta, i per tant s'aplica encara que la regla amb el selector d'elements apareix més avall en el full d'estil.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} </p> + +<p>Més endavant explicarem la puntuació de l'especificitat.</p> + +<h3 id="Herència">Herència</h3> + +<p>L’herència també s’ha d’entendre en aquest context: els elements fill hereten alguns valors de propietat CSS que s’han establert en els elements pare, i no n’hereten d’altres.</p> + +<p>Per exemple, si configures un element <code>color</code> i un <code>font-family</code> per a un element, aquest color i tipus de lletra també s’apliquen a tots els elements que hi hagi a dintre, tret que els hi hagis aplicat valors de color i lletra diferents directament.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} </p> + +<p>Algunes propietats no s'hereten. Per exemple, si estableixes una amplada ({{cssxref("width")}}) del 50% per a un element, cap dels seus elements descendents adquireix una amplada del 50% de l'amplada de l'element pare. Si fos així, seria molt frustrant utilitzar CSS!</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: A les pàgines de referència de les propietats CSS de MDN, pots trobar un quadre d'informació tècnica, normalment a la part inferior de la secció d'especificacions, que enumera diversos punts de dades sobre aquesta propietat, inclòs si s'hereta o no. Consulta, per exemple, la secció <a href="/en-US/docs/Web/CSS/color#Specifications">Especificacions de la propietat del color</a>.</p> +</div> + +<h2 id="Entendre_com_interaccionen_els_conceptes">Entendre com interaccionen els conceptes</h2> + +<p>Aquests tres conceptes controlen quin CSS s'aplica a cada element. En les seccions següents veurem com funcionen conjuntament. De vegades pot semblar una mica complicat, però començaràs a recordar-los a mesura que guanyis experiència amb el CSS, i sempre ho pots tornar a buscar si se t'obliden els detalls. Fins i tot als desenvolupadors experimentats els costa recordar tots els detalls.</p> + +<h2 id="Comprendre_l’herència">Comprendre l’herència</h2> + +<p>Començarem per l'herència. En l'exemple següent hi ha un element {{HTMLElement("ul")}}, que conté dos nivells de llistes no ordenades. Hem definit per a l'element exterior <code><ul></code> una vora i un farciment, i n’hem canviat el color de la lletra.</p> + +<p>El color s’ha aplicat als fills directes i també als indirectes: els elements fill immediats (<code><li></code>) i els que hi ha a la primera llista imbricada. Després, hem afegit una classe <code>special</code> a la segona llista imbricada i hi hem aplicat un color diferent, el qual hereten els fills d’aquesta.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} </p> + +<p>No s'hereten propietats com l'amplada (com ja s'ha esmentat), els marges, els farciments i les vores. Si els fills de la nostra llista haguessin d’heretar una vora, cada llista i element de llista obtindria una vora, i probablement no sigui un efecte que vulguem.</p> + +<p>Quines propietats s'hereten de manera predeterminada i quines no, es en bona mesura qüestió de sentit comú.</p> + +<h3 id="Control_de_l’herència">Control de l’herència</h3> + +<p>El CSS proporciona quatre valors especials de propietat universal per a controlar l’herència. Totes les propietats CSS admeten aquests valors.</p> + +<dl> + <dt>{{cssxref("inherit")}}</dt> + <dd>Estableix el valor de la propietat aplicat a un element seleccionat perquè sigui igual que el de l’element pare. Això, en efecte, «activa l'herència».</dd> + <dt>{{cssxref("initial")}}</dt> + <dd>Estableix que el valor de la propietat que s’aplica a l’element que se selecciona sigui igual que el valor que el full d'estil predeterminat del navegador estableix per a la propietat d’aquest element. Si el full d’estil predeterminat del navegador no estableix cap valor i la propietat s’hereta de manera natural, el valor de la propietat s’estableix en <code>inherit</code>.</dd> + <dt>{{cssxref("unset")}}</dt> + <dd>Restableix la propietat al seu valor natural, cosa que significa que si la propietat s’hereta naturalment, actua com a <code>inherit</code>, i en cas contrari, actua com a <code>initial</code>.</dd> +</dl> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: També hi ha un valor més recent, {{cssxref("revert")}}, que té un suport limitat per part dels navegadors.</p> +</div> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Consulta la secció {{SectionOnPage("/en-US/docs/Web/CSS/Cascade", "Origin of CSS declarations")}} per obtenir més informació sobre cadascuna d'elles i el seu funcionament.</p> +</div> + +<p>Podem observar una llista d’enllaços i analitzar com funcionen els valors universals. L’exemple en viu següent et permet jugar amb el CSS i veure què passa si hi fas canvis. Jugar amb el codi és realment la millor manera d’arribar a conèixer l'HTML i el CSS.</p> + +<p>Per exemple:</p> + +<ol> + <li>El segon element de llista té aplicada la classe <code>my-class-1</code>. Estableix el color que hereta l’element <code><a></code> que té imbricat. Com canvia el color de l'enllaç si suprimeixes la regla?</li> + <li>Entens per què el tercer i el quart enllaços són del color que són? Si no és així, repassa la descripció dels valors anteriors.</li> + <li>Quin dels enllaços canvia de color si defineixes un color nou per a l'element <code><a></code>, per exemple <code>a { color: red; }</code>?</li> +</ol> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} </p> + +<h3 id="Restablir_tots_els_valors_de_propietat">Restablir tots els valors de propietat</h3> + +<p>La propietat CSS abreviada <code>all</code> es pot utilitzar per a aplicar un d’aquests valors d’herència a (gairebé) totes les propietats alhora. El seu valor pot ser qualsevol dels valors d'herència (<code>inherit</code>, <code>initial</code>, <code>unset</code> o <code>revert</code>). És una manera còmoda de desfer els canvis que s’han aplicat a l’estil de manera que puguis tornar a un punt de partida conegut abans d'introduir canvis nous.</p> + +<p>En l’exemple següent hi ha dues citacions de bloc. La primera té un estil que s’aplica directament sobre la citació de bloc, mentre que la segona té una classe aplicada a la citació de bloc que estableix el valor de <code>all</code> en <code>unset</code>.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} </p> + +<p>Prova d’establir el valor <code>all</code> a alguns dels altres valors disponibles i observa quina és la diferència.</p> + +<h2 id="Entendre_la_cascada">Entendre la cascada</h2> + +<p>Ara entenem per què un paràgraf que està profundament imbricat dins l'estructura del teu HTML és del mateix color que el CSS que s’ha especificat per a <code>body</code>, i entenem per què canvia el CSS que, de les lliçons introductòries, hem aplicat a algun element en qualsevol punt del document, ja sigui assignant CSS a un element o creant una classe. Ara farem una ullada de més a prop a com la cascada defineix quines regles CSS s'apliquen quan hi ha més d'un situació que pot aplicar estil a un element.</p> + +<p>Cal considerar tres factors, en un ordre d'importància creixent. Els posteriors anul·len els anteriors:</p> + +<ol> + <li><strong>Ordre dins el codi</strong></li> + <li><strong>Especificitat</strong></li> + <li><strong>Importància</strong></li> +</ol> + +<p>Ara els analitzarem i descobrirem com els navegadors determinen quin CSS han d’aplicar.</p> + +<h3 id="Ordre_dins_el_codi">Ordre dins el codi</h3> + +<p>Ja hem vist com l’ordre dins el codi és important en la cascada. Si hi ha més d’una regla, amb exactament el mateix pes, guanya la que apareix última en el CSS. Pots veure-ho com que les regles que són més properes a l'element sobreescriuen les anteriors fins que l'última guanya i estableix el disseny que es dona a l'element.</p> + +<h3 id="Especificitat_2">Especificitat</h3> + +<p>Un cop entès el fet que l’ordre dins el codi importa, en algun moment et pots topar amb una situació en què saps que no s’aplica la regla que apareix l’última en el full d’estil, sinó una d’anterior. Això es deu al fet que aquesta regla anterior té una <strong>especificitat més elevada</strong>: és més específica i, per tant, el navegador la tria per donar estil a l'element.</p> + +<p>Com hem vist abans en aquest article, un selector de classes té més pes que un selector d’elements, de manera que les propietats definides per a la classe anul·len les que s’apliquen directament per a l’element.</p> + +<p>Una observació important que cal fer aquí és que, tot i que pensem en selectors i regles que s’apliquen a l'element que seleccionen, no es sobreescriu tota la regla, sinó només les propietats que són iguals.</p> + +<p>Aquest comportament ajuda a evitar repeticions dins el CSS. Una pràctica habitual és definir estils genèrics per als elements bàsics, i després crear classes per a aquells que són diferents. Per exemple, en el full d’estil següent hem definit estils genèrics per a títols d’encapçalament de nivell 2 i després hem creat algunes classes que canvien només algunes propietats i valors. Els valors definits inicialment s'apliquen a tots els títols d’encapçalament, i els valors més específics s'apliquen als títols d’encapçalament en què s'ha establert alguna classe.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} </p> + +<p>Observa ara com calcula l’especificitat el navegador. Ja saps que un selector d’elements té una especificitat baixa i una classe el pot sobreescriure. Essencialment s’atorga un valor en punts als diferents tipus de selectors i, si se sumen, s’obté el pes concret de cada selector, que pot avaluar-se respecte d’altres coincidències potencials.</p> + +<p>La quantitat d'especificitat que presenta un selector es mesura a partir de quatre valors (o components) diferents, que es poden entendre com si fossin milers, centenes, desenes i unitats; quatre dígits simples disposats en quatre columnes:</p> + +<ol> + <li><strong>Milers</strong>: suma un punt en aquesta columna si la declaració es troba continguda dins d’un atribut {{htmlattrxref("style")}}, també conegut com estil de línia. Aquestes declaracions no tenen selectors, de manera que la seva especificitat és sempre de 1.000.</li> + <li><strong>Centenes</strong>: suma un punt en aquesta columna per cada selector d’identificador que està contingut en el selector global.</li> + <li><strong>Desenes</strong>: suma un punt en aquesta columna per cada selector de classe, selector d'atributs o de pseudoclasse que està contingut dins del selector general.</li> + <li><strong>Unitats</strong>: suma un punt en aquesta columna per cada selector d'elements o pseudoelement que està contingut dins del selector general.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: El selector universal (<code>*</code>), els combinadors (<code>+</code>, <code>></code>, <code>~</code>, ' ') i la pseudoclasse de negació (<code>:not</code>) no tenen cap efecte sobre l'especificitat.</p> +</div> + +<p>La taula següent mostra alguns exemples aïllats per posar-te en situació. Estudia aquestes qüestions i assegura't d’entendre per què tenen aquestes especificitats. Encara no hem exposat detalladament els selectors, però pots trobar detalls de cada selector en la <a href="/ca/docs/Web/CSS/Selectors_CSS">pàgina de referència dels selectors</a> de MDN.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Selector</th> + <th scope="col">Milers</th> + <th scope="col">Centenes</th> + <th scope="col">Desenes</th> + <th scope="col">Unitats</th> + <th scope="col">Especificitat total</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>h1</code></td> + <td>0</td> + <td>0</td> + <td>0</td> + <td>1</td> + <td>0001</td> + </tr> + <tr> + <td><code>h1 + p::first-letter</code></td> + <td>0</td> + <td>0</td> + <td>0</td> + <td>3</td> + <td>0003</td> + </tr> + <tr> + <td><code>li > a[href*="en-US"] > .inline-warning</code></td> + <td>0</td> + <td>0</td> + <td>2</td> + <td>2</td> + <td>0022</td> + </tr> + <tr> + <td><code>#identifier</code></td> + <td>0</td> + <td>1</td> + <td>0</td> + <td>0</td> + <td>0100</td> + </tr> + <tr> + <td>Cap selector, amb una regla dins de l’atribut {{htmlattrxref ("style")}} d'un element</td> + <td>1</td> + <td>0</td> + <td>0</td> + <td>0</td> + <td>1000</td> + </tr> + </tbody> +</table> + +<p>Abans de continuar endavant, observa un exemple en acció.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} </p> + +<p>Què hi passa, aquí? En primer lloc, només ens interessen les set primeres regles d’aquest exemple i, com ja deus haver observat, hem inclòs els seus valors d’especificitat en un comentari abans de cadascuna.</p> + +<ul> + <li>Els dos primers selectors competeixen per donar estil al color de fons de l'enllaç; el segon guanya i fa que el color de fons sigui blau perquè té un selector d’ID addicional en la cadena: l’especificitat és de 201 contra 101.</li> + <li>Els selectors tercer i quart competeixen per donar estil al color del text de l'enllaç: el segon guanya i fa que el text sigui blanc perquè, encara que té un selector d'elements de menys, el selector que falta es canvia per un selector de classe, que passa de valdre 1 a valdre 10. Així, doncs, l’especificitat guanyadora és de 113 contra 104.</li> + <li>Els selectors 5-7 competeixen per donar estil a la vora de l'enllaç quan el cursor hi passa per sobre. El selector sis perd clarament contra el cinc, amb una especificitat de 23 enfront d’una de 24: té un selector de menys en la cadena. El selector set, però, supera el cinc i el sis: té el mateix nombre de subselectors que cinc en la cadena, però un element ha estat canviat per un selector de classe. Així doncs, l’especificitat guanyadora és 33 contra 23 i 24.</li> +</ul> + +<ol> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: Aquest ha estat només un exemple aproximat per facilitar-ne la comprensió. En realitat, cada tipus de selector té el seu nivell d'especificitat propi, que no pot ser sobreescrit per selectors amb un nivell d'especificitat inferior. Per exemple, una combinació de selectors d’una <strong>classe</strong> <em>milió</em> no podrien sobreescriure les regles d’un selector d’<strong>ID</strong> <em>unitat</em>.</p> + +<p>Una manera més precisa d’avaluar l’especificitat seria puntuar els nivells d’especificitat individualment començant pel més alt i descendint quan sigui necessari. Només quan hi hagi un empat entre puntuacions de selector dins d’un nivell d’especificitat, hauràs d'avaluar el nivell següent; en cas contrari, pots prescindir dels selectors de nivell d’especificitat inferior perquè mai podran sobreescriure els nivells d’especificitat més alts.</p> +</div> + +<h3 id="!important">!important</h3> + +<p>Hi ha una element especial de CSS que podries utilitzar per substituir tots els càlculs anteriors, però has de tenir molta cura a l'hora de fer-lo servir: <code>!important</code>. S’utilitza per fer que una propietat i un valor particulars tinguin l’especificitat màxima; per tant, anul·la les regles normals de la cascada.</p> + +<p>Observa aquest exemple, en què hi ha dos paràgrafs, un dels quals té un selector d’ID.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} </p> + +<p>Fes-ne la prova i observa què succeeix. Si et costa d’entendre, prova d’eliminar algunes de les propietats i observa què passa:</p> + +<ol> + <li>Veuràs que els valors {{cssxref("color")}} i {{cssxref("padding")}} de la tercera regla s'han aplicat, però {{cssxref("background-color")}} no ho ha fet. Per què? Els tres haurien d’aplicar-se sense cap problema, perquè les regles posteriors en l’ordre del codi en general anul·len les regles anteriors.</li> + <li>Tanmateix, les regles anteriors guanyen perquè els selectors de classe tenen una especificitat més alta que els selectors d’element.</li> + <li>Els dos elements tenen una {{htmlattrxref("class")}} <code>better</code>, però el segon té un {{htmlattrxref("id")}} <code>winning</code>. Com que els ID tenen una especificitat <em>encara més elevada</em> que les classes (només es pot tenir un element amb un determinat ID en una mateixa pàgina, però es poden tenir molts elements amb la mateixa classe: els selectors ID són <em>molt específics</em> amb allò que delimiten), el color de fons vermell i la vora negra d'1 píxel s'aplicaran tots dos estils al segon element, mentre que el primer element té un color de fons gris i cap vora, tal i com especifica la classe.</li> + <li>El segon element <em>si</em> adquireix un color de fons vermell, però no té cap vora. Per què? Perquè la declaració <code>!important</code> de la segona regla s’ha inclòs després de <code>border: none</code>, i això vol dir que aquesta declaració obté el valor de la vora <code>border</code>) de la regla anterior, tot i que l'ID té una especificitat més elevada.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: L'única manera de substituir aquesta declaració <code>!important</code> seria incloure una altra declaració <code>!important</code> en una declaració amb la <em>mateixa especificitat</em> que es trobi més endavant en l'ordre del codi, o que presenti una especificitat més alta.</p> +</div> + +<p>És útil saber que <code>!important</code> existeix perquè sàpigues què és si t’ho trobes en el codi d’algú altre. <strong>Tanmateix, et recomanem fermament que no l'utilitzis tret que no tinguis cap altra alternativa.</strong> <code>!important</code> canvia el funcionament habitual de la cascada, de manera que pot complicar molt la resolució dels problemes de depuració de CSS, sobretot en un full d’estil.</p> + +<p>Una de les situacions en què potser l'has d'utilitzar és quan treballes en un CMS en què no pots editar els mòduls CSS bàsics, però vols substituir un estil que no es pot substituir de cap altra manera. Però, de debò, no ho facis servir si ho pots evitar!</p> + +<h2 id="La_importància_de_la_ubicació_del_CSS">La importància de la ubicació del CSS</h2> + +<p>Per acabar, és útil tenir en compte també que la importància d’una declaració CSS depèn de quin full d’estil s’especifica; és possible que els usuaris estableixin fulls d’estil personalitzats que anul·lin els estils del desenvolupador. Per exemple, l’usuari pot tenir una deficiència visual i pot voler definir una mida de lletra per a totes les pàgines web que visita que sigui el doble de la mida normal, per a poder llegir amb més facilitat.</p> + +<h2 id="En_resum">En resum</h2> + +<p>Les declaracions que entren en conflicte s’aplicaran en l’ordre següent, en què les que apareixen amb posterioritat sempre reescriuen les anteriors:</p> + +<ol> + <li>Declaracions en fulls d’estil d’agent d’usuari (per exemple, els estils predeterminats del navegador, que s’utilitzen quan no s’estableix cap altre estil).</li> + <li>Declaracions normals en fulls d’estil de l’usuari (estils personalitzats que estableix un usuari).</li> + <li>Declaracions normals en fulls d'estil d'autor (aquests són els estils que establim nosaltres, els desenvolupadors web).</li> + <li>Declaracions importants en fulls d’estil d’autor.</li> + <li>Declaracions importants en els fulls d'estil de l'usuari.</li> +</ol> + +<p>Té sentit que els fulls d’estil dels desenvolupadors web reemplacin els fulls d’estil dels usuaris, de manera que el disseny es pot mantenir tal i com es pretén, però a vegades els usuaris tenen bons motius per a anul·lar els estils dels desenvolupadors web, com ja s’ha esmentat; això es pot aconseguir amb <code>!important</code> en les regles d’estil.</p> + +<h2 id="Posa_a_prova_les_teves_habilitats">Posa a prova les teves habilitats</h2> + +<p>Hem vist moltes coses en aquest article. Ets capaç de recordar-ne la informació més important? A <a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_tasks">Test your skills: the Cascade</a> trobaràs més proves per verificar que has retingut aquesta informació abans de continuar.</p> + +<h2 id="Què_segueix">Què segueix?</h2> + +<p>Si has entès el gruix d’aquest article, ja has començat a familiaritzar-te amb la mecànica fonamental del CSS. A continuació, examinarem els selectors amb detall.</p> + +<p>Si no has entès del tot els conceptes de la cascada, l'especificitat i l'herència, no et preocupis. Sens dubte, això és el més complicat que hem exposat fins ara, i a vegades fins i tot els desenvolupadors web professionals ho troben complicat. T’aconsellem que tornis a aquest article unes quantes vegades a mesura que avancis en el curs, i que hi continuïs pensant.</p> + +<p>Torna a aquest punt si comences a trobar-te amb problemes estranys amb estils que no s'apliquen com esperaves. Podria ser un problema d'especificitat.</p> + +<p>{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="En_aquest_mòdul">En aquest mòdul</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">La cascada i l'herència</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selectors CSS</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Selectors de tipus, de classe i d’ID</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Selectors d'atribut</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Les pseudoclasses i els pseudoelements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinadors</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El model de caixes</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fons i vores</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El tractament del text en diverses direccions </a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordament dels continguts </a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Els valors i les unitats</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionar elements en CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imatges, media i elements de formulari</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estil a les taules</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depurar el CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organitza el teu CSS</a></li> +</ol> diff --git a/files/ca/learn/css/building_blocks/depurar_el_css/index.html b/files/ca/learn/css/building_blocks/depurar_el_css/index.html new file mode 100644 index 0000000000..273468969e --- /dev/null +++ b/files/ca/learn/css/building_blocks/depurar_el_css/index.html @@ -0,0 +1,198 @@ +--- +title: Depurar el CSS +slug: Learn/CSS/Building_blocks/Depurar_el_CSS +translation_of: Learn/CSS/Building_blocks/Debugging_CSS +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</div> + +<p>En escriure codi CSS de vegades et pots trobar que el teu CSS no fa el que esperes. Pot ser que esperis que un determinat selector coincideixi amb un element, i no passa; o que una caixa tingui una mida diferent de la que t’esperaves. Aquest article et proporciona orientacions sobre com es pot emprendre la depuració d’un problema en CSS i et mostra com les eines de desenvolupador (DevTools) que tots els navegadors moderns inclouen et poden ajudar a esbrinar què passa.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisits:</th> + <td>Coneixements bàsics d'informàtica, tenir el <a href="/ca/docs/Learn/Getting_started_with_the_web/Instal·lació_bàsica_programari">programari bàsic instal·lat</a>, coneixements bàsics de <a href="/ca/docs/Learn/Getting_started_with_the_web/Tractar_amb_arxius">treballar amb fitxers</a> i d'HTML (consulta la <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a>) i nocions de <a href="/ca/docs/Learn/CSS/First_steps">com funciona el CSS</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Adquirir informació bàsica sobre les eines de desenvolupador dels navegadors i aprendre a inspeccionar i editar el CSS de manera senzilla.</td> + </tr> + </tbody> +</table> + +<h2 id="Com_accedir_a_les_eines_de_desenvolupador_del_navegador">Com accedir a les eines de desenvolupador del navegador</h2> + +<p>L'article <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">Què són les eines de desenvolupador dels navegadors</a> és una guia actualitzada que explica com accedir a les eines de desenvolupament web en diversos navegadors i plataformes. Tot i que pots decidir fer el desenvolupament web majoritàriament en un navegador determinat, i per tant et familiaritzaràs amb les eines que inclou aquell navegador, val la pena saber com accedir-hi des d'altres navegadors. Això t’ajudarà si fas proves de les representacions que donen diferents navegadors.</p> + +<p>També t’adonaràs que els diversos navegadors han decidit centrar-se en àrees diferents a l’hora de crear les eines de desenvolupador. Per exemple, en Firefox hi ha algunes eines excel·lents per a treballar visualment amb la compaginació amb CSS, que et permeten inspeccionar i editar <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Dissenys de graella</a>, <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts">Flexbox</a> i <a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Formes</a>. Ara bé, tots els diferents navegadors tenen eines fonamentals semblants; per exemple, per a inspeccionar les propietats i els valors que s’apliquen als elements de la teva pàgina i modificar-los des de l'editor.</p> + +<p>En aquest article analitzarem algunes funcions útils de les eines de desenvolupador de Firefox per a treballar amb CSS. Per fer-ho, utilitzarem un <a href="https://mdn.github.io/css-examples/learn/inspecting/inspecting.html">fitxer d'exemple</a>. Carrega’l en una pestanya nova si vols seguir-nos alhora, i obre les eines de desenvolupador tal com es descriu en l'article de l'enllaç anterior.</p> + +<h2 id="El_DOM_i_el_View_Source">El DOM i el View Source</h2> + +<p>Una cosa que pot sorprendre els nouvinguts a DevTools és la diferència entre el que es veu quan mires <a href="/en-US/docs/Tools/View_source">el codi font</a> d'una pàgina web o el fitxer HTML que hi ha penjat al servidor, i el que pots veure en <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">la finestra HTML</a> de DevTools. Tot i que s’assembla força al que es pot veure des de View Source, hi ha algunes diferències.</p> + +<p>En el processat pel DOM, el navegador pot haver corregit un codi HTML mal escrit. Si has tancat un element de manera incorrecta, per exemple perquè has obert un <code><h2></code> però l’has tancat amb un <code></h3></code>, el navegador esbrina què volies fer i l'HTML del DOM tanca correctament l’etiqueta d’obertura <code><h2></code> amb l’etiqueta de tancament <code></h2></code> corresponent. El navegador també normalitza tot el codi HTML i el DOM mostra, a més, tots els canvis que s’hi fan amb JavaScript.</p> + +<p>En canvi, View Source és simplement el codi font HTML que hi ha emmagatzemat en el servidor. L’<a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_tree">arbre HTML</a> de DevTools mostra exactament el que representa el navegador, de manera que et proporciona una visió detallada del que passa realment.</p> + +<h2 id="Inspecció_del_CSS_aplicat">Inspecció del CSS aplicat</h2> + +<p>Selecciona un element de la teva pàgina, ja sigui fent clic amb el botó dret del ratolí o prement la tecla ctrl per seleccionar l'opció <em>Inspeccionar</em>, o selecciona’l en l'arbre HTML de l'esquerra de la pantalla de la interfície DevTools. Selecciona l'element amb la classe <code>box1</code>; aquest és el primer element de la pàgina que té una caixa que l’envolta.</p> + +<p><img alt="Pàgina d'exemple per a aquest tutorial amb DevTools." src="https://mdn.mozillademos.org/files/16606/inspecting1.png" style="border-style: solid; border-width: 1px; height: 1527px; width: 2278px;"></p> + +<p>Si observes la vista de visualització de regles, <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Rules view</a>, que hi ha a la dreta de l’HTML, pots veure les propietats i els valors CSS que s’apliquen a aquest element. S’hi veuen les regles que s’apliquen directament a la classe <code>box1</code> i també les regles de CSS que la caixa hereta de l’element pare, en aquest cas <code><body></code>. Això és útil per a veure si s’aplica algun codi CSS que no esperes. Potser hi ha una regla que s’hereta d’un element pare i has d’afegir una regla que l’anul·li en el context d’aquest element.</p> + +<p>També és útil la capacitat d’ampliar les propietats abreviades. En el nostre exemple hem fet servir la propietat abreviada <code>margin</code>.</p> + +<p><strong>Fes clic a la fletxa petita per a ampliar la vista i que se’n mostrin les diferents propietats sense abreviar i els valors.</strong></p> + +<p><strong>Pots activar i desactivar els valors en la finestra de Visualització de regles quan aquest plafó està actiu; si hi passes el ratolí per sobre, apareixeran les caselles de verificació. Desmarca la casella de verificació d’una regla, per exemple <code>border-radius</code> i aquell CSS deixarà d’aplicar-se.</strong></p> + +<p>Pots utilitzar-ho per a fer una comparació entre A i B i decidir si alguna cosa es veu més bé amb una regla aplicada o no, i també per a ajudar a depurar-la. Per exemple, quan un disseny de pàgina web no funciona correctament i intentes esbrinar quina propietat provoca el problema.</p> + +<h2 id="Editar_els_valors">Editar els valors</h2> + +<p>A més d’activar i desactivar propietats, pots editar-ne els valors. Pot ser que vulguis veure si un altre color escau més, o modificar la mida d'alguna cosa. Les DevTools et poden ajudar a estalviar molt de temps a l'hora d'editar un full d’estil i tornar a carregar la pàgina.</p> + +<p><strong>Amb l’element <code>box1</code> seleccionat, fes clic en la mostra (el petit cercle de color) que mostra el color que s’aplica a la vora. S'obrirà un selector de colors i podràs provar amb colors diferents, que s'actualitzaran en temps real a la pàgina. De manera semblant pots canviar l'amplada o l'estil de la vora.</strong></p> + +<p><img alt="Taula d'estils de DevTools amb un selector de colors obert." src="https://mdn.mozillademos.org/files/16607/inspecting2-color-picker.png" style="border-style: solid; border-width: 1px; height: 1173px; width: 2275px;"></p> + +<h2 id="Afegir_una_propietat">Afegir una propietat</h2> + +<p>Amb les DevTools pots afegir propietats. Que t'has adonat que no vols que la caixa hereti la mida de la lletra de l'element <code><body></code> i vols definir-hi una mida de lletra pròpia? Fes-ne primer la prova en les DevTools abans d’afegir-ho al teu fitxer CSS.</p> + +<p><strong>Fes clic en la clau de tancament de la regla i comença a introduir-hi una altra declaració; en el moment que comences a escriure, DevTools mostra una llista completa de les propietats que hi coincideixen. Selecciona la propietat per a la mida de la lletra (<code>font-size</code>) i introdueix-hi el valor que vols provar. També pots fer clic al botó + per a afegir una altra regla amb el mateix selector, i afegir-hi les regles noves.</strong></p> + +<p><img alt="El tauler DevTools quan afegeixes una propietat nova a les regles, amb l’eina de compleció automàtica oberta" src="https://mdn.mozillademos.org/files/16608/inspecting3-font-size.png" style="border-style: solid; border-width: 1px; height: 956px; width: 2275px;"></p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: També hi ha altres funcions útils en la vista de visualització de regles; per exemple, es ratllen les declaracions que tenen valors no vàlids. Pots obtenir més informació en l’article <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examinar i editar el CSS</a>.</p> +</div> + +<h2 id="Entendre_el_model_de_caixes">Entendre el model de caixes</h2> + +<p>En articles anteriors hem parlat del <a href="/ca/docs/Learn/CSS/Building_blocks/The_box_model">model de caixes</a> i del fet que tenim un model de caixes alternatiu que canvia la manera com es calculen les mides dels elements segons la mida que els proporciones, i també de l'àrea de farciment i els marges. Les DevTools et poden ajudar a entendre com es calcula la mida d'un element.</p> + +<p>La <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Layout_view">vista de disposició</a> mostra un esquema del model de caixes de l’element seleccionat, juntament amb una descripció de les propietats i els valors que canvien la manera com es disposa l’element en la pàgina. Inclou una descripció de les propietats que potser no has utilitzat explícitament sobre l'element, però que tenen valors inicials definits.</p> + +<p>Una de les propietats que es detallen en aquesta taula és la propietat de dimensionament de caixa (<code>box-sizing</code>), que controla quin model de caixes utilitza l'element.</p> + +<p><strong>Compara les dues caixes amb les classes <code>box1</code> i <code>box2</code>. Totes dues tenen definida la mateixa amplada (400px), però <code>box1</code> és visualment més ampla. En la finestra de disseny pots veure que utilitza <code>content-box</code>. Aquest valor pren la mida que dones a l’element, i a continuació hi suma l’amplada de l'àrea de farciment i de les vores.</strong></p> + +<p>L’element amb una classe <code>box2</code> fa servir <code>border-box</code>, de manera que aquí l’àrea de farciment i les vores es resten de la mida que has donat a l’element. Això significa que l'espai que ocupa la caixa en la pàgina és la mida exacta que has especificat, en el nostre cas: <code>width: 400px</code>.</p> + +<p><img alt="La secció de compaginació dels DevTools" src="https://mdn.mozillademos.org/files/16609/inspecting4-box-model.png" style="border-style: solid; border-width: 1px; height: 1532px; width: 2275px;"></p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Obtén més informació sobre com <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">examinar i inspeccionar el model de caixes</a>.</p> +</div> + +<h2 id="Resolució_de_qüestions_despecificitat">Resolució de qüestions d'especificitat</h2> + +<p>De vegades durant el desenvolupament, però en particular quan necessites editar el CSS en un lloc que ja està en actiu, et trobes amb problemes per aconseguir que s’apliquin algunes regles CSS. No importa què facis, l'element simplement sembla que no entén la regla CSS. El que acostuma a passar és que un selector més específic anul·la els teus canvis, i aquí les DevTools et poden ajudar molt.</p> + +<p>En el nostre fitxer d’exemple hi ha dues paraules incloses en un element <code><em></code>. Una es mostra de color carabassa, i l’altra de color rosa brillant. Al CSS hi hem aplicat:</p> + +<pre class="brush: css notranslate">em { + color: hotpink; + font-weight: bold; +}</pre> + +<p>Per sobre de tot això, en el full d’estil hi ha una regla amb un selector <code>.special</code>:</p> + +<pre class="brush: css notranslate">.special { + color: orange; +}</pre> + +<p>Com recordaràs de l'article sobre <a href="/ca/docs/Learn/CSS/Building_blocks/Cascada_i_herència">la cascada i l’herència</a> en què comentem l’especificitat, els selectors de classe són més específics que els selectors d’elements, així que aquest és el valor que s’aplica. Les DevTools et poden ajudar a trobar aquest tipus de problemes, sobretot si la informació està amagada en algun lloc d'un extens full d'estil.</p> + +<p><strong>Inspecciona l'element <code><em></code> amb la classe <code>.special</code> i DevTools et mostrarà que el color que s'aplica és <code>orange</code>, i la propietat <code>color</code> aplicada a l'<code>em</code> està ratllada. Aquí pots veure que el selector de classe supera el selector d’elements.</strong></p> + +<p><img alt="Un element <code>em</code> seleccionat i inspeccionat amb DevTools per veure què anul•la el color." src="https://mdn.mozillademos.org/files/16610/inspecting5-specificity.png" style="border-style: solid; border-width: 1px; height: 1161px; width: 2275px;"></p> + +<h2 id="Obtén_més_informació_sobre_les_DevTools_de_Firefox">Obtén més informació sobre les DevTools de Firefox</h2> + +<p>Hi ha molta informació sobre les DevTools de Firefox aquí a MDN. Dona una ullada a la <a href="/ca/docs/Tools">secció principal de DevTools</a> i consulta les <a href="/en-US/docs/Tools/Page_Inspector#How_to">Guies pràctiques</a> per a obtenir més detalls sobre les qüestions que hem tractat breument en aquest article.</p> + +<h2 id="Problemes_en_depurar_el_CSS">Problemes en depurar el CSS</h2> + +<p>Les DevTools poden ser de gran ajuda a l’hora de resoldre problemes en CSS, de manera que, què has de fer quan et trobes en una situació en què el CSS no es comporta com esperes? Els passos següents t’haurien d’ajudar.</p> + +<h3 id="Fes_un_pas_enrere_des_del_problema">Fes un pas enrere des del problema</h3> + +<p>Qualsevol problema de codificació pot ser frustrant, sobretot els problemes amb el CSS, perquè sovint no reps cap missatge d’error que et permeti de cercar en línia per ajudar-te a trobar una solució. Si et sents frustrat, allunyat de la qüestió durant un temps: passeja, pren-te un refresc, parla amb un company de feina o treballa en una altra cosa durant un temps. De vegades la solució apareix màgicament quan deixes de pensar en el problema i, fins i tot si no arriba, resulta molt més fàcil treballar quan et sent fresc.</p> + +<h3 id="Els_teus_HTML_i_CSS_són_vàlids">Els teus HTML i CSS són vàlids?</h3> + +<p>Els navegadors esperen que tant el teu CSS com el teu HTML estiguin escrits correctament, però els navegadors també són molt indulgents i fan tot el possible per mostrar les teves pàgines web, encara que hi hagi errors d'etiquetatge. Si hi ha errors en el codi, el navegador ha de suposar què vols dir, i pot ser que prengui una decisió diferent de la que tenies en ment. A més, dos navegadors diferents podrien fer front al problema de maneres diferents. Per tant, un bon primer pas és executar tant el codi HTML com el CSS amb un validador, per a descobrir qualsevol error i esmenar-lo.</p> + +<ul> + <li><a href="https://jigsaw.w3.org/css-validator/">Validador de CSS</a></li> + <li><a href="https://validator.w3.org/">Validador d'HTML</a></li> +</ul> + +<h3 id="Les_propietats_i_els_valors_són_compatibles_amb_el_navegador">Les propietats i els valors són compatibles amb el navegador?</h3> + +<p>Els navegadors simplement ignoren el CSS que no entenen. Si la propietat o el valor que utilitzes no és compatible amb el navegador amb què fas les proves, no es trencarà res, però no s’aplicarà el CSS. Les DevTools en general ressalten d’alguna manera les propietats i els valors que no són compatibles. En la captura de pantalla següent, el navegador no admet el subvalor {{cssxref("grid-template-columns")}}.</p> + +<p><img alt="Imatge de les DevTools del navegador amb el subvalor grid-template-columns: subgrid es mostra ratllat perquè aquest subvalor no és compatible." src="https://mdn.mozillademos.org/files/16641/no-support.png" style="height: 397px; width: 1649px;"></p> + +<p>També pots donar una ullada a les taules de compatibilitat del navegador que hi ha a la part inferior de cada pàgina de propietat del projecte MDN. Et mostren la compatibilitat del navegador per a aquesta propietat, sovint desglossada si hi ha compatibilitat per a algun ús de la propietat però no d’altres. La taula següent mostra les dades de compatibilitat per a la propietat {{cssxref("shape-outside")}}.</p> + +<p>{{compat("css.shape-outside")}}</p> + +<h3 id="Alguna_cosa_anul·la_el_teu_CSS">Alguna cosa anul·la el teu CSS?</h3> + +<p>Aquí és on la informació que has après sobre l’especificitat et resultarà molt útil. Si hi ha alguna regla que anul·la el que vols fer perquè té més especificitat, pots entrar en un joc molt frustrant per a intentar esbrinar què passa. Tanmateix, com es descriu més amunt, les DevTools et mostraran quin CSS s’aplica i podràs esbrinar com anul·lar-ho amb un nou selector que sigui prou específic.</p> + +<h3 id="Fer_una_prova_reduïda_del_problema">Fer una prova reduïda del problema</h3> + +<p>Si el problema no es resol amb els passos anteriors, has d'investigar més. El millor que pots fer en aquest moment és crear una cosa que es coneix com a prova reduïda. Ser capaç de «reduir un problema» és una habilitat molt útil. T'ajuda a trobar problemes en el teu codi propi i en el dels teus companys, i també et permet informar d’errors i demanar ajuda de manera més efectiva.</p> + +<p>Una prova reduïda és un exemple de codi que mostra el problema de la manera més senzilla possible, sense contingut ni estil. Això de vegades significa eliminar del teu disseny de pàgina web el codi problemàtic i fer-ne un petit exemple que només mostri aquest codi o aquesta funció.</p> + +<p>Per a crear una prova reduïda:</p> + +<ol> + <li>Si el teu codi d’etiquetatge es genera dinàmicament (per exemple amb un CMS), fes una versió estàtica de la sortida que mostra el problema. Un lloc per compartir codi com <a href="https://codepen.io/">CodePen</a> és útil per a allotjar proves reduïdes, perquè aleshores són accessibles en línia i es poden compartir fàcilment amb els companys. Pots començar per visualitzar el codi d’origen de la pàgina i copiar l’HTML a CodePen; a continuació, inclou-hi qualsevol CSS i JavaScript rellevants. Després d'això, comprova si el problema encara hi és.</li> + <li>Si suprimir el JavaScript no fa desaparèixer el problema, no incloguis el JavaScript. Si suprimir el JavaScript fa desaparèixer el problema, elimina tant de JavaScript com et sigui possible, i deixa-hi només el que origina el problema.</li> + <li>Elimina qualsevol codi HTML que no contribueixi al problema. Elimina components, o fins i tot elements principals del disseny de pàgina. Un cop més, prova de reduir al mínim el codi mentre encara es mostri el problema.</li> + <li>Elimina qualsevol CSS que no afecti el problema.</li> +</ol> + +<p>En aquest procés podràs descobrir què causa el problema, o com a mínim el podràs activar i desactivar en eliminar-ne quelcom específic. Val la pena afegir alguns comentaris al codi a mesura que descobreixes coses. Si has de demanar ajuda, aquests comentaris mostraran a la persona que t'ajuda el que ja has provat. O també et pot acabar de donar prou informació per a poder cercar problemes i situacions semblants.</p> + +<p>Si encara no trobes la solució del problema, tenir una prova reduïda et permet demanar ajuda, publicar-la en un fòrum o mostrar-la a un col·laborador. És molt més probable obtenir ajuda si mostres que abans de fer-ho t’has pres la feina de reduir el problema i esbrinar exactament on passa. Aleshores, un desenvolupador amb més experiència pot ser capaç de detectar el problema ràpidament i orientar-te en la direcció correcta; o, encara que no sigui així, la teva prova reduïda els permetrà de donar-hi una ullada ràpida i, potser, oferir-te una mica d'ajuda.</p> + +<p>En el cas que el problema sigui un error en un navegador, la prova reduïda també es pot fer servir per a enviar un informe d’errors al proveïdor del navegador corresponent (per exemple, a la pàgina web <a href="https://bugzilla.mozilla.org">bugzilla</a> de Mozilla).</p> + +<p>A mesura que adquireixis més experiència amb el CSS aprendràs a veure amb més facilitat on hi ha els problemes. Tanmateix, fins i tot els més experimentats de nosaltres ens trobem de vegades barrinant què dimonis passa aquí. Adoptar un enfocament metòdic, fer una prova reduïda i explicar el problema a algú són possibilitats que acostumen a donar un bon resultat a l'hora de trobar una solució.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="En_aquest_mòdul">En aquest mòdul</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">La cascada i l'herència</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Els selectors CSS</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Els selectors de tipus, de classe i d’ID</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Els selectors d'atribut</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Les pseudoclasses i els pseudoelements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Els combinadors</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El model de caixes</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fons i vores</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El tractament del text en diverses direccions</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordament dels continguts</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Els valors i les unitats</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionar elements amb el CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imatges, mèdia i elements de formulari</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estil a les taules</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depura el teu CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organitza el teu CSS</a></li> +</ol> diff --git a/files/ca/learn/css/building_blocks/desbordament_de_contingut/index.html b/files/ca/learn/css/building_blocks/desbordament_de_contingut/index.html new file mode 100644 index 0000000000..2ee0dc6129 --- /dev/null +++ b/files/ca/learn/css/building_blocks/desbordament_de_contingut/index.html @@ -0,0 +1,123 @@ +--- +title: Desbordament de contingut +slug: Learn/CSS/Building_blocks/Desbordament_de_contingut +translation_of: Learn/CSS/Building_blocks/Overflowing_content +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</div> + +<p>En aquest apartat veurem un altre concepte important en CSS: el <strong>desbordament</strong>. El desbordament és el que succeeix quan hi ha massa contingut i no cap còmodament en una caixa. En aquesta guia aprendràs què és i com gestionar-lo.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisits:</th> + <td>Coneixements bàsics d'informàtica, tenir el <a href="/ca/docs/Learn/Getting_started_with_the_web/Instal·lació_bàsica_programari">programari bàsic instal·lat</a>, coneixements bàsics de <a href="/ca/docs/Learn/Getting_started_with_the_web/Tractar_amb_arxius">treballar amb fitxers</a> i d'HTML (mira <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a>) i nocions de CSS (consulta els <a href="/ca/docs/Learn/CSS/First_steps">Primers passos amb el CSS</a>).</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Entendre el desbordament i com gestionar-lo.</td> + </tr> + </tbody> +</table> + +<h2 id="Què_és_el_desbordament">Què és el desbordament?</h2> + +<p>Ja sabem que tot en CSS són caixes i que podem restringir la mida d’aquestes caixes assignant valors als atributs {{cssxref("width")}} i {{cssxref("height")}} (o {{cssxref("inline-size")}} i {{cssxref("block-size")}}). <strong>El desbordament és el que succeeix quan dins d’una caixa hi ha massa contingut i no hi cap.</strong> El CSS t'ofereix diverses eines per a gestionar aquest desbordament, i també és un concepte útil de comprendre en aquesta fase inicial. Et trobaràs amb situacions de desbordament força sovint quan escriguis CSS, sobretot quan aprofundeixis en el disseny de pàgines web amb CSS.</p> + +<h2 id="El_CSS_tracta_devitar_«la_pèrdua_de_dades»">El CSS tracta d'evitar «la pèrdua de dades»</h2> + +<p>Comencem per examinar dos exemples que mostren com es comporta per defecte el CSS quan es desborda.</p> + +<p>El primer és una caixa a la que s’han restringit les dimensions del bloc en donar-hi una alçada (<code>height</code>). Després s’hi ha afegit més contingut del que cap en l’espai de la caixa. El contingut de la caixa es desborda i s’encavalca desordenadament sobre el paràgraf que hi ha a sota.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}}</p> + +<p>El segon consisteix en una paraula dins d'una caixa en la qual s’ha restringit la dimensió de línia. La caixa s'ha fet massa petita perquè la paraula hi càpiga, i acaba sortint més enllà de la caixa.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}</p> + +<p>Pot ser que et preguntis per què el CSS ha adoptat per defecte l’enfocament més aviat desarreglat de provocar el desbordament del contingut. Per què no amagar el contingut de més, o fer créixer la caixa?</p> + +<p>Sempre que és possible, el CSS no amaga cap part de contingut; fer-ho provocaria la pèrdua de dades, i això acostuma a ser un problema. En termes de CSS, això significa que una part del contingut desapareix. El problema que el contingut s’esvaeixi és que podria passar que no t'adonis que ha desaparegut. Pot passar que els visitants de la teva pàgina no s'adonin que ha desaparegut. Pot tractar-se del botó d'enviament d'un formulari, i ningú no podria completar el formulari; això, és un gran problema! Per tant, el CSS tendeix a desbordar-se de manera visible. D’aquesta manera és probable que t’adonis del desperfecte o, en el pitjor dels casos, que un visitant del teu lloc web t'informi que una part del contingut s’encavalca amb una altra, i que s’ha de rectificar.</p> + +<p>Si has restringit la mida d’una caixa amb <code>width</code> o <code>height</code>, el CSS suposa que saps què fas i que gestiones el potencial de desbordament. En general, restringir la mida d’un bloc és problemàtic quan es col·loca text en una caixa, perquè pot haver-hi més text del que esperaves en el moment de dissenyar un lloc web, o que el text ocupi més espai, per exemple, perquè l'usuari ha augmentat la mida de la lletra.</p> + +<p>En el proper parell d’articles veurem diferents maneres de controlar la mida que poden ser menys propenses al desbordament. Tanmateix, també pots controlar la manera com es comporta el desbordament si necessites una mida fixa. Continua llegint!</p> + +<h2 id="La_propietat_overflow">La propietat <code>overflow</code></h2> + +<p>La propietat {{cssxref("overflow")}} és la manera de prendre el control del desbordament d'un element i dir al navegador com volem que s’hi comporti. El valor per defecte del desbordament és <code>visible</code>, és per això que per defecte podem veure el nostre contingut quan es desborda.</p> + +<p>Si vols que el contingut que desborda es talli, pots establir el valor <code>overflow: hidden</code> per a la caixa. Això farà exactament el que diu: amagar el desbordament. Això pot causar la desaparició de les coses, de manera que només ho hauries de fer si ocultar contingut no causarà cap problema.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}}</p> + +<p>Potser voldries posar barres de desplaçament quan el contingut es desborda. Si utilitzes <code>overflow: scroll</code>, el navegador sempre mostra les barres de desplaçament, fins i tot quan no hi ha prou contingut per a desbordar-se. Pot ser que vulguis fer-ho així perquè evita que les barres de desplaçament apareguin i desapareguin en funció del contingut.</p> + +<p><strong>Observa que si vas traient part del contingut que hi ha en la caixa següent, les barres de desplaçament de la caixa es mantenen, fins i tot quan no hi ha res per desplaçar.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}}</p> + +<p>En l’exemple anterior només hem de desplaçar-nos per l’eix <code>y</code>, però tenim barres de desplaçament en els dos eixos. En lloc d’això, podries utilitzar la propietat {{cssxref("overflow-y")}} i establir <code>overflow-y: scroll</code>, i et desplaçaries només sobre l'eix <code>y</code>.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}}</p> + +<p>També pots desplaçar-te sobre l'eix <em>x</em> amb {{cssxref("overflow-x")}}, tot i que no és recomanable quan apareixen paraules llargues. Consulta les propietats {{cssxref("word-break")}} o {{cssxref("overflow-wrap")}} si has de treballar amb paraules llargues en una caixa petita. També et poden ajudar a crear caixes que s’adaptin més bé segons la quantitat de contingut alguns dels mètodes que s’exposen en l’apartat <a href="/ca/docs/Learn/CSS/Building_blocks/Dimensionar_elements_en_CSS">Dimensionament d’elements amb CSS</a>.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}}</p> + +<p>Igual que amb <code>scroll</code>, obtindràs una barra de desplaçament en la dimensió de desplaçament si hi ha prou contingut per provocar l’aparició d’una barra de desplaçament.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: pots especificar el desplaçament en x i en y amb la propietat <code>overflow</code> passant-hi dos valors. Si s’especifiquen dues paraules clau, la primera s’aplica a <code>overflow-x</code> i la segona a <code>overflow-y</code>. En cas contrari, tant <code>overflow-x</code> com <code>overflow-y</code> s’estableixen en el mateix valor. Per exemple, <code>overflow: scroll hidden</code> configuraria <code>overflow-x</code> per a <code>scroll</code> i <code>overflow-y</code> per a <code>hidden</code>.</p> +</div> + +<p>Si vols que les barres de desplaçament apareguin només si hi ha més contingut del que es pot incloure dins de la caixa, utilitza <code>overflow: auto</code>. En aquest cas, el navegador decideix quan mostra les barres de desplaçament. Els navegadors per als equips d'escriptori normalment ho fan només quan hi ha prou contingut per a provocar desbordament.</p> + +<p><strong>En l’exemple següent, elimina una mica de contingut fins que no càpiga en la caixa i observa que les barres de desplaçament desapareixen.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}}</p> + +<h2 id="El_desbordament_estableix_un_context_de_formatació_de_bloc">El desbordament estableix un context de formatació de bloc</h2> + +<p>Hi ha un concepte en CSS que s'anomena <strong>block formatting context</strong> (<em>context de formatació de bloc</em>) o BFC. No és res que t'hagi de preocupar gaire ara mateix, però és útil saber que quan empres un valor de desbordament com ara <code>scroll</code> o <code>auto</code>, crees un BFC. El resultat és que el contingut de la caixa en què has canviat el valor <code>overflow</code> es converteix en un mini disseny de pàgina web propi. Les coses que hi ha fora del contenidor no poden ficar-se en el contenidor, i res pot sobresortir de la caixa cap als elements del disseny de pàgina web del voltant. Això és per permetre el comportament amb desplaçament, perquè per a crear una experiència de desplaçament coherent, tot el contingut de la caixa ha d’estar-hi contingut i no en pot sobresortir ni superposar-se amb altres elements de la pàgina.</p> + +<h2 id="Desbordaments_no_volguts_en_el_disseny_web">Desbordaments no volguts en el disseny web</h2> + +<p>Els mètodes de disseny moderns (tal com es recull en el mòdul de <a href="/ca/docs/Learn/CSS/Disseny_CSS">Disseny de pàgines web amb CSS</a>) gestionen molt bé el desbordament. Han estat dissenyats per fer front al fet que normalment no podem predir la quantitat de contingut que hi haurà en una pàgina web. En el passat, però, els desenvolupadors solien utilitzar altures fixes per a intentar alinear els extrems inferiors de caixes que en realitat no tenien cap relació entre elles. Això era fràgil, i encara et pots topar amb aplicacions heretades en què el contingut d’una caixa se superposa amb un altre contingut de la pàgina. Si veus això, sabràs que es tracta de desbordament; l'ideal seria que tornis a fer un càlcul de les mides dels elements de disseny de la pàgina per no haver de dependre de mides de caixa fixes.</p> + +<p>En desenvolupar un lloc sempre has de tenir en compte els problemes de desbordament. Has de provar els dissenys amb quantitats de contingut grans i petites, augmentar la mida de la lletra del text i assegurar-te que el teu CSS pot fer-ho de manera coherent. És probable que et vulguis reservar les opcions de canviar el valor de desbordament per ocultar contingut o afegir barres de desplaçament només per a casos especials, per exemple, per quan realment vols una caixa amb barres de desplaçament.</p> + +<h2 id="Posa_a_prova_els_teus_coneixements">Posa a prova els teus coneixements</h2> + +<p>Hi ha moltes coses a absorbir en aquesta lliço. En recordes la informació més important? Per comprovar-ho, vés a <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Overflow_Tasks">Test your skills: overflow</a>.</p> + +<h2 id="Resum">Resum</h2> + +<p>Aquest breu article ha introduït el concepte de desbordament; ara entens que el CSS intenta no invisibilitzar el contingut que es desborda perquè això causa la pèrdua de dades. Has descobert que pots gestionar un desbordament potencial i també que has de fer proves per assegurar-te que la teva feina no causa accidentalment desbordaments problemàtics.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="En_aquest_mòdul">En aquest mòdul</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">La cascada i l'herència</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Els selectors CSS</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Els selectors de tipus, de classe i d’ID</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Els selectors d'atribut</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Les pseudoclasses i els pseudoelements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Els combinadors</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El model de caixes</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fons i vores</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El tractament del text en diferents direccions</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordament del contingut</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Els valors i les unitats</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionament d’elements amb CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imatges, media i controls de formulari</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estil a les taules</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depura el teu CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organitza el teu CSS</a></li> +</ol> diff --git a/files/ca/learn/css/building_blocks/dimensionar_elements_en_css/index.html b/files/ca/learn/css/building_blocks/dimensionar_elements_en_css/index.html new file mode 100644 index 0000000000..5ff34b8d93 --- /dev/null +++ b/files/ca/learn/css/building_blocks/dimensionar_elements_en_css/index.html @@ -0,0 +1,129 @@ +--- +title: Dimensionar elements en CSS +slug: Learn/CSS/Building_blocks/Dimensionar_elements_en_CSS +translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</div> + +<p>En els articles que hem vist fins ara has descobert diverses maneres de dimensionar els elements d'una pàgina web amb CSS. És important entendre la importància de les diferents característiques dels elements del teu disseny, i en aquest article resumim les maneres com assignar una mida als elements amb CSS i definim uns quants termes relatius al dimensionament que t'ajudaran en el futur.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisits:</th> + <td>Coneixements bàsics d'informàtica, tenir el <a href="/ca/docs/Learn/Getting_started_with_the_web/Instal·lació_bàsica_programari">programari bàsic instal·lat</a>, coneixements bàsics de <a href="/ca/docs/Learn/Getting_started_with_the_web/Tractar_amb_arxius">treballar amb fitxers</a> i d'HTML (mira <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a>) i nocions de <a href="/ca/docs/Learn/CSS/First_steps">com funciona el CSS</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Entendre les diferents maneres com podem assignar mides als elements amb CSS.</td> + </tr> + </tbody> +</table> + +<h2 id="La_mida_natural_o_intrínseca_de_les_coses">La mida natural o intrínseca de les coses</h2> + +<p>Els elements HTML tenen una mida natural predeterminada abans que els afecti cap codi CSS. Un exemple senzill n’és una imatge. Una imatge té una amplada i una alçada definides en el fitxer d'imatge, que s'incorpora a la pàgina. Aquesta mida es descriu com la <strong>mida intrínseca</strong>, que prové de la imatge mateixa.</p> + +<p>Quan poses una imatge en una pàgina i no en canvies l’alçada i l’amplada, ja sigui amb atributs en l’etiqueta <code><img></code> o amb el CSS, es mostra amb aquesta mida intrínseca. Hem donat a la imatge de l’exemple següent una vora perquè puguis veure la dimensió que té el fitxer.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}</p> + +<p>Un element {{htmlelement("div")}} buit, però, no té mida pròpia. Si afegeixes un element {{htmlelement("div")}} sense contingut al teu HTML, i hi poses una vora, com hem fet abans amb la imatge, veuràs que a la pàgina apareix una línia. Es tracta de la vora de l'element replegat sobre si mateix perquè no té contingut que el mantingui obert. En el nostre exemple següent, aquesta vora s'estén per tota l'amplada de l’element que el conté, perquè és un element que té un comportament de bloc, amb el qual ja t'hauries de començar a familiaritzar. No té alçada (ni mida en la dimensió del bloc) perquè no hi ha contingut.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}</p> + +<p>Afegeix una mica de text a l'interior de l'element buit de l'exemple anterior. Ara la vora envolta aquest text perquè el contingut defineix l'altura de l'element. La mida d'aquest element <code><div></code> en la dimensió del bloc prové, per tant, de la mida del contingut. Una vegada més, aquesta és la mida intrínseca de l'element: el contingut en defineix la mida.</p> + +<h2 id="Configurar_una_mida_específica">Configurar una mida específica</h2> + +<p>Per descomptat, podem donar una mida específica als elements del nostre disseny. Quan es dona una mida a un element (el contingut del qual hauria d’encaixar en aquesta mida) ens hi referim com la <strong>mida extrínseca</strong>. Agafa els elements <code><div></code> de l'exemple anterior: podem donar-los valors específics d'amplada i d'alçada, i aleshores tindran aquesta mida, independentment del contingut que hi fiquem a dins. Tal com vam descobrir en l’anterior <a href="/ca/docs/Learn/CSS/Building_blocks/Desbordament_de_contingut">article sobre el desbordament</a>, una altura fixa pot provocar el desbordament del contingut si el contingut no cap en l’espai de la caixa.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}</p> + +<p>Arranjar l'alçada dels elements amb longituds o percentatges s’ha de fer amb molta cura justament pel problema del desbordament.</p> + +<h3 id="Lús_de_percentatges">L'ús de percentatges</h3> + +<p>En molts sentits, els percentatges actuen com unitats de longitud, i com hem comentat en l'<a href="https://wiki.developer.mozilla.org/ca/docs/Learn/CSS/Building_blocks/Valors_i_unitats_CSS#Percentatges">article sobre valors i unitats</a>, sovint es poden intercanviar amb les longituds. Quan fas servir un percentatge has de ser conscient <em>de què</em> és percentatge. En el cas d’una caixa dins d’un altre contenidor, si dones a la caixa secundària un percentatge d’amplada, serà un percentatge de l’amplada del contenidor principal.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}</p> + +<p>Això és perquè els percentatges es calculen a partir de la mida del bloc contenidor. Sense un percentatge aplicat, el nostre element <code><div></code> ocuparia el 100% de l'espai disponible, perquè és un element de bloc. Si hi donem un percentatge d’amplada, es converteix en un percentatge de l’espai que ompliria normalment.</p> + +<h3 id="Marges_i_àrea_de_farciment_com_a_percentatges">Marges i àrea de farciment com a percentatges</h3> + +<p>Si estableixes <code>margins</code> i <code>padding</code> com percentatges, pot ser que observis algun comportament estrany. En l’exemple següent hi ha una caixa. Hem assignat a la caixa interior un marge ({{cssxref("margin")}}) del 10% i un àrea de farciment ({{cssxref("padding")}}) també del 10%. L'àrea de farciment i el marge de les parts superior i inferior de la caixa tenen la mateixa mida que els marges de l’esquerra i la dreta.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}</p> + +<p>Podries esperar, per exemple, que el percentatge dels marges superior i inferior sigui un percentatge de l'alçada de l'element, i que el percentatge dels marges esquerre i dret sigui un percentatge de l'amplada de l'element. Però aquest no és el cas!</p> + +<p>Quan utilitzes marges i àrees de farciment definits en percentatges, el valor es calcula a partir de la <strong>mida de l’element de línia</strong>, per tant, de l'amplada de l'element quan es treballa en un llenguatge horitzontal. En el nostre exemple, tots els marges i l'àrea de farciment són del 10% de l'amplada de l'element. Això significa que pots tenir marges i àrea de farciment de la mateixa mida al voltant de la caixa. És un fet que val la pena de recordar si utilitzes els percentatges d'aquesta manera.</p> + +<h2 id="Mida_mínima_i_màxima">Mida mínima i màxima</h2> + +<p>A més d’assignar mides fixes a les coses, podem demanar al CSS que doni a un element una mida mínima o màxima. Si tens una caixa que pot contenir una quantitat variable de contingut i vols que sempre tingui una alçada determinada <em>com a mínim</em>, pots establir la propietat {{cssxref("min-height")}}. La caixa sempre serà almenys d'aquesta alçada, però creixerà si hi ha més contingut del que pot contenir amb aquesta alçada mínima.</p> + +<p>En l'exemple següent hi ha dues caixes, totes dues amb una alçada establerta en 150 píxels. La caixa de l’esquerra té 150 píxels d’alçada; la caixa de la dreta ha augmentat la mida a més de 150 píxels perquè té més contingut i no hi cabria.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}</p> + +<p>Això és molt útil per tractar amb quantitats de contingut variables i evitar desbordaments.</p> + +<p>Un ús comú de {{cssxref("max-width")}} és reduir les imatges si no hi ha prou espai perquè es mostrin amb l’amplada intrínseca, alhora que es garanteix que no superen l'alçada de la caixa.</p> + +<p>Per exemple, si una imatge té una amplada intrínseca més petita que la de l’element que la conté i hi estableixes una amplada de <code>width: 100%</code>, la imatge s’estirarà i es farà gran, i podria pixelar-se. En canvi, si l’amplada intrínseca fos més gran que l’element que la conté, desbordaria. És probable que no vulguis que passi cap d'aquestes dues coses.</p> + +<p>Si en lloc d'això utilitzes <code>max-width: 100%</code>, la imatge es pot fer més petita que la seva mida intrínseca, però no es farà més gran que el 100% de la seva mida.</p> + +<p>En l'exemple següent hem utilitzat dues vegades la mateixa imatge. A la primera hi hem donat <code>width: 100%</code>, i com que està continguda en un recipient més gran, s'estén per tota l'amplada del contenidor. La segona imatge, en canvi, té <code>max-width: 100%</code>, i no s’estira per ocupar tot el recipient. La tercera caixa torna a contenir la mateixa imatge, amb <code>max-width: 100%</code>; en aquest cas pots observar com s’ha reduït per encaixar dins la caixa.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}</p> + +<p>Aquesta tècnica s’utilitza per fer que les imatges siguin <em>adaptatives</em>, de manera que quan es visualitzen en un dispositiu més petit es redueixen adequadament. Però no has d'utilitzar aquesta tècnica per carregar imatges molt grans i després reduir-les en el navegador. Les imatges han de tenir una mida adequada i no han de ser més grans del que es necessita en relació amb la mida més gran en què es poden mostrar en el disseny. La descàrrega d’imatges massa grans fa que el teu lloc web vagi més lent i pot ser més car per als usuaris que tenen una connexió amb comptador de dades.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Troba més informació sobre les <a href="/ca/docs/Learn/HTML/Multimèdia_i_incrustar/Imatges_sensibles">tècniques d’imatges adaptatives</a>.</p> +</div> + +<h2 id="Unitats_de_finestra_gràfica">Unitats de finestra gràfica</h2> + +<p>La finestra gràfica (que és l’àrea visible de la teva pàgina en el navegador que utilitzes per visitar un lloc web) també té una mida. En CSS hi ha unes unitats que es relacionen amb la mida de la finestra gràfica: la unitat <code>vw</code> per a l'amplada i la unitat <code>vh</code> per a l'alçada. Amb aquestes unitats pots establir mides relatives a la finestra gràfica de l'usuari.</p> + +<p><code>1vh</code> és igual a l'1% de l’alçada de la finestra gràfica, i <code>1vw</code> és igual a l’1% de l’amplada de la finestra gràfica. Pots fer servir aquestes unitats per a dimensionar les caixes, però també el text. A l'exemple següent tenim una caixa que té una mida de 20vh i 20vw. La caixa conté una lletra <code>A</code>, que ha rebut un valor {{cssxref("font-size")}} de 10vh.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}</p> + +<p><strong>Si canvies els valors de <code>vh</code> i <code>vw</code>, canvia la mida de la caixa o de la lletra; si canvies la mida de la finestra gràfica, també canvien les mides de la caixa i de la lletra perquè es mostren en relació amb la finestra gràfica. Per veure com canvia l'exemple quan canvies la mida de la finestra gràfica, has de carregar l'exemple en una finestra nova del navegador que puguis redimensionar (perquè la teva finestra gràfica és l’<code><iframe></code> incorporat que conté l'exemple anterior). <a href="https://mdn.github.io/css-examples/learn/sizing/vw-vh.html">Obre l'exemple</a>, redimensiona la finestra del navegador i observa què passa amb la mida de la caixa i del text.</strong></p> + +<p>Dimensionar les coses segons la finestra gràfica pot ser útil en els teus dissenys. Per exemple, si vols que una secció principal es mostri a pantalla completa abans que la resta del contingut, fes que aquella part de la pàgina tingui un 100vh d’alçada i empenyerà la resta del contingut fora de la finestra gràfica, i això significa que només apareixerà quan l'usuari es desplaci pel document.</p> + +<h2 id="Resum">Resum</h2> + +<p>Aquest article t'ha proporcionat un resum dels problemes principals que podries trobar-te a l’hora de dimensionar les coses en un lloc web. En passar a l’article de <a href="/ca/docs/Learn/CSS/Disseny_CSS">Disseny de pàgines web amb CSS</a>, la mida serà un aspecte molt important per a dominar els diferents mètodes de disseny, per la qual cosa val la pena entendre els conceptes que s'han explicat aquí abans de continuar.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="En_aquest_mòdul">En aquest mòdul</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">La cascada i l'herència</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Els selectors CSS</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Els selectors de tipus, de classe i d’ID</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Els selectors d'atribut</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Les pseudoclasses i els pseudoelements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Els combinadors</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El model de caixes</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fons i vores</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El tractament del text en diferents direccions</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordament del contingut</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Els valors i les unitats</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionar elements en CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imatges, mèdia i elements de formulari</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estil a les taules</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depura el teu CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organitza el teu CSS</a></li> +</ol> diff --git a/files/ca/learn/css/building_blocks/fons_i_vores/index.html b/files/ca/learn/css/building_blocks/fons_i_vores/index.html new file mode 100644 index 0000000000..2e2ce4727c --- /dev/null +++ b/files/ca/learn/css/building_blocks/fons_i_vores/index.html @@ -0,0 +1,307 @@ +--- +title: Fons i vores +slug: Learn/CSS/Building_blocks/Fons_i_vores +translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</div> + +<p>En aquest article veurem algunes de les coses creatives que pots fer amb fons i vores amb el CSS. Des d’afegir degradats o imatges de fons fins a arrodonir cantonades; els fons i les vores són la solució per a moltes qüestions d’estil en CSS.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisits:</th> + <td>Coneixements bàsics d'informàtica, tenir el <a href="/ca/docs/Learn/Getting_started_with_the_web/Instal·lació_bàsica_programari">programari bàsic instal·lat</a>, coneixements bàsics de <a href="/ca/docs/Learn/Getting_started_with_the_web/Tractar_amb_arxius">treballar amb fitxers</a> i d'HTML (consulta la <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a>) i nocions de <a href="/ca/docs/Learn/CSS/First_steps">com funciona el CSS</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Aprendre a aplicar estil al fons i la vora de les caixes.</td> + </tr> + </tbody> +</table> + +<h2 id="Aplicar_estil_als_fons_amb_CSS">Aplicar estil als fons amb CSS</h2> + +<p>La propietat CSS {{cssxref("background")}} és una propietat abreviada que substitueix un seguit de propietats de fons que presentarem en aquest article. Quan et trobes amb una propietat de fons complexa en un full d’estil, pot ser que et sembli una mica difícil d’entendre perquè es poden estar passant molts valors alhora.</p> + +<pre class="brush: css notranslate"><code>.box { + background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, + url(big-star.png) center no-repeat, rebeccapurple; +} </code> +</pre> + +<p>Més endavant en aquest tutorial tornarem a l’objectiu de com funcionen les propietats abreviades, però primer fem un cop d’ull a les diverses coses que pots fer amb els fons amb el CSS, a partir de cadascuna de les propietats dels fons.</p> + +<h3 id="Els_colors_de_fons">Els colors de fons</h3> + +<p>La propietat {{cssxref("background-color")}} defineix el color de fons de qualsevol element en CSS. La propietat accepta qualsevol color (<code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code>) vàlid. Un color de fons s'estén per sota del contingut i del farciment de la caixa.</p> + +<p>En l'exemple següent hem utilitzat diversos valors de color per a afegir un color de fons a la caixa, un títol d’encapçalament i un element {{htmlelement("span")}}.</p> + +<p><strong>Juga a fer servir qualsevol valor de <a href="/en-US/docs/Web/CSS/color_value"><color></a> disponible.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 800)}}</p> + +<h3 id="Les_imatges_de_fons">Les imatges de fons</h3> + +<p>La propietat {{cssxref("background-image")}} permet visualitzar una imatge de fons en un element. En l'exemple següent hi ha dues caixes: una té una imatge de fons que és més gran que la caixa, l'altra té una imatge petita en forma d’estrella.</p> + +<p>Aquest exemple mostra dues coses sobre les imatges de fons. La imatge gran no es redueix de manera predeterminada per a adaptar-se a la caixa, sinó que només en veiem un tros petit d’una cantonada, mentre que la imatge petita es mostra en mosaic fins a omplir la caixa. La imatge en aquest cas és en realitat una única estrella.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 800)}}</p> + +<p><strong>Si especifiques un color de fons a més d'una imatge de fons, la imatge es mostra a sobre. Afegeix una propietat <code>background-color</code> a l'exemple de dalt i observa-ho en acció.</strong></p> + +<h4 id="Control_amb_la_propietat_background-repeat">Control amb la propietat <code>background-repeat</code></h4> + +<p>La propietat {{cssxref("background-repeat")}} s'utilitza per a controlar el comportament en mosaic de les imatges. Els valors disponibles són:</p> + +<ul> + <li><code>no-repeat</code>: evita que el fons es repeteixi.</li> + <li><code>repeat-x</code>: repeteix horitzontalment.</li> + <li><code>repeat-y</code>: repeteix verticalment.</li> + <li><code>repeat</code>: el valor per defecte; repeteix en totes dues direccions.</li> +</ul> + +<p><strong>Prova aquests valors en l'exemple següent. Hem establert la propietat al valor <code>no-repeat</code>, de manera que només veuràs una estrella. Prova els diferents valors <code>repeat-x</code> i <code>repeat-y</code> i observa’n els efectes.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 800)}}</p> + +<h4 id="Les_mides_de_la_imatge_de_fons">Les mides de la imatge de fons</h4> + +<p>En l'exemple anterior hi ha una imatge gran que ha acabat retallada perquè és més gran que el fons. En aquest cas podríem utilitzar la propietat {{cssxref("background-size")}}, que pot prendre valors de <a href="/en-US/docs/Web/CSS/length">longitud</a> o <a href="/en-US/docs/Web/CSS/percentage">percentatge</a>, per a dimensionar la imatge i que s'ajusti al fons.</p> + +<p>També pots utilitzar paraules clau:</p> + +<ul> + <li><code>cover</code>: el navegador ajusta la imatge perquè cobreixi tota l’àrea de la caixa, sense canviar-ne la relació d’aspecte. En aquest cas una part de la imatge pot acabar fora de la caixa.</li> + <li><code>contain</code>: el navegador ajusta la imatge a la mida adequada perquè s’adapti a la caixa. En aquest cas, pots acabar amb buits a banda i banda o a la part superior i inferior de la imatge, si la relació d'aspecte de la imatge és diferent de la de la caixa.</li> +</ul> + +<p>En l'exemple següent hem utilitzat la imatge més gran de l'exemple anterior i unitats de longitud per dimensionar-la dins de la caixa. Observa que això ha distorsionat la imatge.</p> + +<p>Fes la prova següent.</p> + +<ul> + <li>Canvia les unitats de longitud que s’hi utilitzen i modifica’n la mida del fons.</li> + <li>Elimina les unitats de longitud i observa què passa quan fas servir <code>background-size: cover</code> o <code>background-size: contain</code>.</li> + <li>Si la imatge és més petita que la caixa, pots canviar el valor de <code>background-repeat</code> perquè la imatge es repeteixi.</li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}}</p> + +<h4 id="La_ubicació_de_la_imatge_de_fons">La ubicació de la imatge de fons</h4> + +<p>La propietat {{cssxref("background-position")}} et permet triar la posició en què apareix la imatge de fons en la caixa a la qual s'aplica. Fa servir un sistema de coordenades en què el <code>(0,0)</code> és a la part superior esquerra de la caixa, i la caixa es posiciona sobre els eixos horitzontal (<code>x</code>) i vertical ((<code>y</code>).</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: El valor per defecte de <code>background-position</code> és <code>(0,0)</code>.</p> +</div> + +<p>Els valors de <code>background-position</code> més comuns prenen dos valors independents: un valor horitzontal seguit d'un valor vertical.</p> + +<p>També pots utilitzar paraules clau com <code>top</code> i <code>right</code> (busca la resta de possibilitats en la pàgina sobre la propietat {{cssxref("background-position")}}):</p> + +<pre class="brush: css notranslate"><code>.box { + background-image: url(star.png); + background-repeat: no-repeat; + background-position: top center; +} </code> +</pre> + +<p>I <a href="/en-US/docs/Web/CSS/length">longituds</a> i <a href="/en-US/docs/Web/CSS/percentage">percentatges</a>:</p> + +<pre class="brush: css notranslate"><code>.box { + background-image: url(star.png); + background-repeat: no-repeat; + background-position: 20px 10%; +} </code> +</pre> + +<p>També pots barrejar valors de paraules clau amb longituds o percentatges, per exemple:</p> + +<pre class="brush: css notranslate">.box { + background-image: url(star.png); + background-repeat: no-repeat; + background-position: top 20px; +}</pre> + +<p>Finalment, també pots utilitzar una sintaxi de 4 valors per a indicar una distància des de determinades cantonades de la caixa; la unitat de longitud en aquest cas és un desplaçament del valor que la precedeix. Així, doncs, en el CSS de sota, posicionem el fons a 20px de l’extrem superior i 10px de l’extrem dret:</p> + +<pre class="brush: css notranslate"><code>.box { + background-image: url(star.png); + background-repeat: no-repeat; + background-position: top 20px right 10px; +} </code></pre> + +<p><strong>Juga amb aquests valors en l'exemple següent i mou l'estrella per la caixa.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 800)}}</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: <code>background-position</code> és una propietat abreviada de {{cssxref ("background-position-x")}} i {{cssxref ("background-position-y")}}, que et permeten establir els diferents valors de posició de l'eix per separat.</p> +</div> + +<h3 id="Degradats_de_fons">Degradats de fons</h3> + +<p>Un degradat (quan s'utilitza per a un fons) actua igual que una imatge i també es defineix amb la propietat {{cssxref("background-image")}}.</p> + +<p>Pots llegir més informació sobre els diferents tipus de degradats i què pots fer amb ells en la pàgina sobre els tipus de dades <code><a href="/en-US/docs/Web/CSS/gradient"><gradient></a></code> de MDN. Una manera divertida de jugar amb els degradats és utilitzar un dels molts generadors de degradats CSS que hi ha disponibles al web, <a href="https://cssgradient.io/">com aquest</a>. Pots crear un degradat i copiar i enganxar el codi font que el genera.</p> + +<p>Prova alguns degradats diferents en l'exemple següent. En les dues caixes hi ha, respectivament, un degradat lineal que s’estén per tota la caixa i un degradat radial amb una mida fixa, que per tant es repeteix.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 800)}}</p> + +<h3 id="Múltiples_imatges_de_fons">Múltiples imatges de fons</h3> + +<p>També és possible posar més d’una imatge de fons: especifica amb una sola propietat <code>background-image</code> els diversos valors, separats cadascun per una coma.</p> + +<p>En fer-ho, pot passar que les imatges de fons es superposin entre elles. Els fons es disposen amb la darrera imatge de fons enumerada a la part inferior de la pila, i cada imatge anterior s’apila a sobre de la que la segueix en el codi.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Els degradats es poden barrejar feliçment amb imatges de fons normals.</p> +</div> + +<p>Les altres propietats <code>background-*</code> també poden tenir valors separats per comes, de la mateixa manera que <code>background-image</code>:</p> + +<pre class="brush: css notranslate">background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png); +background-repeat: no-repeat, repeat-x, repeat; +background-position: 10px 20px, top right;</pre> + +<p>Cada valor de les diverses propietats coincideix amb els valors que estan en la mateixa posició en les altres propietats. Aquí sobre, per exemple, el valor per a la propietat <code>background-repeat</code> d’<code>image1</code> és <code>no-repeat</code>. Però, què passa quan propietats diferents tenen una quantitat diferent de valors? La resposta és que els valors que ocupen les posicions més petites s'alternen cíclicament: en l'exemple anterior hi ha quatre imatges de fons però només dos valors <code>background-position</code>. Les dues primeres posicions s’apliquen a les dues primeres imatges, i després els valores es tornen a assignar cíclicament: el valor de la primera posició s’aplica a <code>image3</code>, i el valor de segona posició, a <code>image4</code>.</p> + +<p><strong>Juguem! En l'exemple següent hem inclòs dues imatges. Per a comprovar l'ordre d'apilament, canvia la imatge de fons que apareix primer en la llista. O juga amb les altres propietats i canvia’n els valors de posició i mida, o la repetició.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 800)}}</p> + +<h3 id="Ancoratge_del_fons">Ancoratge del fons</h3> + +<p>Una altra opció que hi ha disponible per als fons és especificar com es desplacen quan es desplaça el contingut. Això es controla amb la propietat {{cssxref("background-attachment")}}, que pot prendre els valors següents:</p> + +<ul> + <li><code>scroll</code>: Fa que el fons de l'element es desplaci quan es desplaça la pàgina. Si el contingut de l'element es desplaça, el fons no es mou. En efecte, el fons està fixat a la mateixa posició de la pàgina, de manera que es desplaça a mesura que la pàgina es desplaça.</li> + <li><code>fixed</code>: Fa que el fons d'un element es fixi a la finestra de visualització, de manera que no es desplaça quan es desplaça el contingut de la pàgina o de l'element. Roman sempre en la mateixa posició a la pantalla.</li> + <li><code>local</code>: Aquest valor es va afegir més endavant (només és compatible amb Internet Explorer 9+, mentre que els altres són compatibles amb IE4+) perquè el valor <code>scroll</code> és més aviat confús i en molts casos no fa realment el que vols. El valor <code>local</code> fixa el fons a l'element en què està configurat, de manera que quan l'element es desplaça, el fons es desplaça amb ell.</li> +</ul> + +<p>La propietat {{cssxref("background-attachment")}} només funciona quan hi ha contingut pel qual et pots desplaçar; hem preparat un exemple que mostra les diferències entre els tres valors: fes-hi un cop d’ull a <a href="http://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html">background-attachment.html</a> (també en pots consultar el <a href="https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds">codi font</a> aquí).</p> + +<h3 id="Ús_de_la_propietat_abreviada_background">Ús de la propietat abreviada background</h3> + +<p>Com hem esmentat al començament d'aquest article, sovint veuràs fons que estan especificats amb la propietat {{cssxref("background")}}. Aquesta propietat abreviada et permet configurar totes les propietats diferents alhora.</p> + +<p>Si fas servir diversos fons, has d’especificar totes les propietats per al primer fons, i a continuació afegir-hi el fons següent, després d’una coma. En l'exemple següent hi ha un degradat amb una mida i una posició, i després un fons d'imatge amb <code>no-repeat</code> i una posició, i després un color.</p> + +<p>Quan s’escriuen els valor abreviats de les imatges de fons cal seguir unes regles, per exemple:</p> + +<ul> + <li>Només es pot especificar un fons de color després de la coma final.</li> + <li>El valor <code>background-size</code> només es pot incloure immediatament després de <code>background-position</code>, separat amb el caràcter «/», així: <code>center/80%</code>.</li> +</ul> + +<p>Consulta la pàgina sobre {{cssxref("background")}} de MDN per a veure’n totes les possibilitats.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 800)}}</p> + +<h3 id="Consideracions_d’accessibilitat_relatives_als_fons">Consideracions d’accessibilitat relatives als fons</h3> + +<p>Quan poses un text sobre una imatge o un color de fons, t’has d’assegurar que té prou contrast perquè els usuaris el poden llegir. Si poses una imatge de fons i el text s’hi llegeix a sobre, també has d'especificar un color de fons que permeti llegir el text si la imatge no es carrega.</p> + +<p>Els lectors de pantalla no poden analitzar les imatges de fons, de manera que aquestes haurien de ser purament decoratives; qualsevol contingut important hauria de formar part de la pàgina HTML, i no estar continguda en segon pla.</p> + +<h2 id="Vores">Vores</h2> + +<p>En aprendre el model de caixes, vam descobrir com afecten les vores a la mida de la caixa. En aquesta secció veurem com emprar les vores de manera creativa. Normalment, quan afegim vores a un element amb CSS, utilitzem una propietat abreviada que estableix el color, l'amplada i l'estil de la vora en una línia de CSS.</p> + +<p>Podem establir una vora per als quatre costats d'una caixa amb la propietat {{cssxref("border")}}:</p> + +<pre class="brush: css notranslate"><code>.box { + border: 1px solid black; +} </code></pre> + +<p>O podem establir una sola vora de la caixa, per exemple:</p> + +<pre class="brush: css notranslate"><code>.box { + border-top: 1px solid black; +} </code></pre> + +<p>Cadascuna d’aquestes propietats abreviades seria:</p> + +<pre class="brush: css notranslate"><code>.box { + border-width: 1px; + border-style: solid; + border-color: black; +} </code></pre> + +<p>I per a les no abreviades seria:</p> + +<pre class="brush: css notranslate"><code>.box { + border-top-width: 1px; + border-top-style: solid; + border-top-color: black; +} </code></pre> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Aquestes propietats de la vora superior, dreta, inferior i esquerra també tenen mapades propietats <em>lògiques</em> relacionades amb el mode d'escriptura del document (per exemple, text d'esquerra a dreta o de dreta a esquerra, o de dalt a baix). Ho explorarem en l’article següent, que inclou <a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">el tractament del text en diverses direccions</a>.</p> +</div> + +<p><strong>Amb les vores es poden emprar una gran varietat d'estils. En l'exemple següent hem utilitzat un estil de vora diferent per als quatre costats de la caixa. Juga amb l'estil, l'amplada i el color de la vora per veure com funcionen les vores.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 800)}}</p> + +<h3 id="Les_cantonades_arrodonides">Les cantonades arrodonides</h3> + +<p>L’arrodoniment de les cantonades d'una caixa s’aconsegueix amb la propietat {{cssxref("border-radius")}} i les propietats associades que es relacionen amb cada cantó de la caixa. Es poden utilitzar dues longituds o percentatges com a valor; el primer valor defineix el radi horitzontal, i el segon el radi vertical. En molts casos només faràs servir un valor, que s'utilitzarà per a tots dos.</p> + +<p>Per exemple, pots fer que les quatre cantonades d’una caixa tinguin un radi de 10px:</p> + +<pre class="brush: css notranslate"><code>.box { + border-radius: 10px; +} </code></pre> + +<p>O que la cantonada superior dreta tingui un radi horitzontal d’1em i un radi vertical del 10%:</p> + +<pre class="brush: css notranslate"><code>.box { + border-top-right-radius: 1em 10%; +} </code></pre> + +<p>Hem fixat les quatre cantonades de l'exemple següent i després hem canviat els valors de l'extrem superior dret perquè sigui diferent. Juga amb els valors i canvia les cantonades. Consulta la pàgina de propietats de {{cssxref("border-radius")}} i esbrina les opcions de sintaxi disponibles.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 800)}}</p> + +<h2 id="Posa_a_prova_les_teves_habilitats">Posa a prova les teves habilitats</h2> + +<p>Hem vist moltes coses en aquest article. Recordes la informació més important? Trobaràs més proves per verificar que retens la informació abans de seguir a<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Test_your_skills_backgrounds_and_borders"> Test your skills: Backgrounds and Borders</a>.<br> + </p> + +<h2 id="Resum">Resum</h2> + +<p>En aquest articles hem descobert força conceptes, i pots veure que hi ha molt per afegir a un fons o una vora d'una caixa. Consulta les diverses pàgines de propietat si vols obtenir més informació sobre alguna de les funcions que hem comentat. Cada pàgina de MDN té més exemples d’ús amb què pots jugar i ampliar els teus coneixements.</p> + +<p>En el proper article descobrirem com interactua el mode d'escriptura del document amb el CSS. Què passa quan el text no flueix d'esquerra a dreta?</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="En_aquest_mòdul">En aquest mòdul</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">La cascada i l'herència</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Els selectors CSS</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Els selectors de tipus, de classe i d’ID</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Els selectors d'atribut</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Les pseudoclasses i els pseudoelements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Els combinadors</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El model de caixes</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fons i vores</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El tractament del text en diverses direccions</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordament de continguts</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Els valors i les unitats</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionar elements en CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imatges, mèdia i elements de formulari</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estil a les taules</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depura el teu CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organitza el teu CSS</a></li> +</ol> diff --git a/files/ca/learn/css/building_blocks/images_media_form_elements/index.html b/files/ca/learn/css/building_blocks/images_media_form_elements/index.html new file mode 100644 index 0000000000..cb1ce805bc --- /dev/null +++ b/files/ca/learn/css/building_blocks/images_media_form_elements/index.html @@ -0,0 +1,193 @@ +--- +title: 'Imatges, media i elements de formulari' +slug: Learn/CSS/Building_blocks/Images_media_form_elements +translation_of: Learn/CSS/Building_blocks/Images_media_form_elements +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}</div> + +<p>En aquest article analitzarem com es tracten certs elements especials en CSS. Les imatges, altres media i els elements de formulari es comporten una mica diferent que les caixes pel que fa a la possibilitat d’aplicar-los disseny amb CSS. Entendre què és possible i què no ens estalviarà unes quantes frustracions, i en aquest article destacarem alguns dels conceptes principals que has de conèixer.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisits:</th> + <td>Coneixements bàsics d'informàtica, tenir el <a href="/ca/docs/Learn/Getting_started_with_the_web/Instal·lació_bàsica_programari">programari bàsic instal·lat</a>, coneixements bàsics de <a href="/ca/docs/Learn/Getting_started_with_the_web/Tractar_amb_arxius">treballar amb fitxers</a> i d'HTML (mira <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a>) i nocions de <a href="/ca/docs/Learn/CSS/First_steps">com funciona el CSS</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Comprendre el comportament inusual d'alguns elements quan se’ls aplica disseny amb CSS.</td> + </tr> + </tbody> +</table> + +<h2 id="Elements_de_recol·locació">Elements de recol·locació</h2> + +<p>Les imatges i els vídeos es descriuen com <strong><a href="/en-US/docs/Web/CSS/Replaced_element">elements de recol·locació</a></strong>. Això significa que no es pot actuar sobre el disseny intern d'aquests elements amb CSS, sinó només sobre la seva posició en la pàgina web entre la resta d’elements. Com veurem, però, hi ha diverses coses que el CSS pot fer amb una imatge.</p> + +<p>Alguns elements de recol·locació, com ara les imatges i els vídeos, també presenten una <strong>relació d'aspecte</strong>. Això vol dir que tenen una mida tant en la dimensió horitzontal (x) com en la vertical (y), i de manera predeterminada es mostren amb les dimensions intrínseques del fitxer.</p> + +<h2 id="Les_mides_de_les_imatges">Les mides de les imatges</h2> + +<p>Com ja saps d'aquests articles, tot en CSS genera una caixa. Si col·loques una imatge dins d’una caixa que és més petita o més gran que les dimensions intrínseques del fitxer d’imatges en qualsevol direcció, o bé apareixerà més petita que la caixa o bé desbordarà. Has de prendre una decisió sobre què passa amb el desbordament.</p> + +<p>En l'exemple següent hi ha dues caixes, totes dues de 200 píxels:</p> + +<ul> + <li>Una conté una imatge més petita de 200 píxels: és més petita que la caixa i no l’ocupa tota per a omplir-la.</li> + <li>L'altra és més gran de 200 píxels i desborda més enllà dels límits de la caixa.</li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/learn/images/size.html", '100%', 1000)}}</p> + +<p>Què podem fer amb el problema del desbordament?</p> + +<p>Com hem vist en <a href="/ca/docs/Learn/CSS/Building_blocks/Dimensionar_elements_en_CSS">l'article anterior</a>, una tècnica habitual és assignar a la propietat <code>max-width</code> de la imatge una amplada del 100%. Això permet fer la imatge més petita que la caixa, però no més gran. Aquesta tècnica funciona amb altres elements de recol·locació com ara <code><a href="/ca/docs/Web/HTML/Element/video"><video></a></code> o <code><a href="/ca/docs/Web/HTML/Element/iframe"><iframe></a></code>.</p> + +<p><strong>Afegeix a l'element <code><img></code> de l'exemple anterior <code>max-width: 100%</code>. Observa que la imatge més petita es manté inalterada, però la més gran es fa més petita per a encaixar a la caixa.</strong></p> + +<p>Pots prendre altres decisions sobre el comportament de les imatges dins dels contenidors. Per exemple, pots voler donar a una imatge una mida perquè ompli completament una caixa.</p> + +<p>La propietat {{cssxref("object-fit")}} et pot ajudar amb això. La propietat <code>object-fit</code> et permet donar a l'element de recol·locació la mida adequada per adaptar-se a una caixa de diverses maneres.</p> + +<p>A continuació, hem utilitzat el valor <code>cover</code>, que redueix la mida de la imatge de manera que omple la caixa perfectament, tot mantenint la relació d’aspecte. Com que la relació d’aspecte es manté, la caixa talla algunes parts de la imatge.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/images/object-fit.html", '100%', 1000)}}</p> + +<p>Si fem servir el valor <code>contain</code>, la imatge es redueix fins que és prou petita per adaptar-se a la caixa. Això pot donar lloc a un format panoràmic si la imatge no presenta la mateixa relació d'aspecte que la caixa.</p> + +<p>També pots provar el valor <code>fill</code>, que omple la caixa però no manté la relació d’aspecte.</p> + +<h2 id="Elements_de_recol·locació_en_el_disseny_de_pàgines_web">Elements de recol·locació en el disseny de pàgines web</h2> + +<p>A mesura que vagis fent servir diverses tècniques de disseny de pàgines web amb CSS en elements de reemplaçament, és possible que t’adonis que es comporten una mica diferent d'altres elements. Per exemple, els elements d’un disseny de pàgina flexible o de graella per defecte ocupen tota l’àrea. Les imatges, en canvi, no s’estiren, sinó que s’alineen amb l’inici de l’àrea de la graella o del contenidor flexible.</p> + +<p>Observa que això passa en l'exemple següent, en què hi ha un contenidor amb dues columnes i dues files, que inclou quatre elements. Tots els elements <code><div></code> tenen un color de fons i s’estiren fins que ocupen tota la fila i la columna. Però la imatge no s’estira.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/images/layout.html", '100%', 1000)}}</p> + +<p>Si has seguit aquests articles en ordre, potser encara no has arribat a al disseny de pàgina web. Aleshores, senzillament tingues en compte que els elements de recol·locació tenen comportaments predeterminats diferents quan passen a formar part d'un disseny en graella o d'un disseny flexible, essencialment per a evitar que el disseny de pàgina web els deformi de manera estranya.</p> + +<p>Pots aconseguir que la imatge ocupi tot l’espai de la cel·la de la quadrícula en què es troba, si fas això:</p> + +<pre class="brush: css">img { + width: 100%; + height: 100%; +}</pre> + +<p>Però això deformaria també la imatge, de manera que probablement no és el que busques.</p> + +<h2 id="Els_elements_de_formulari">Els elements de formulari</h2> + +<p>Els elements de formulari poden ser un problema a l’hora de fer un disseny de pàgina web amb CSS, i <a href="/ca/docs/Learn/HTML/Forms">l'article sobre formularis web</a> conté guies detallades sobre els aspectes més complicats relatius a aquest tema, que no reproduirem completament en aquest article. Tanmateix, en aquesta secció val la pena que destaquem uns quants elements bàsics.</p> + +<p>Molts controls de formulari s'afegeixen amb l’element <code><a href="/ca/docs/Web/HTML/Element/input"><input></a></code>; això defineix des de camps de formulari senzills, com ara entrades de text, fins a camps més complexos que s’han afegit en l'HTML5 com ara els selectors de color i de dates. I encara hi ha altres elements, com ara <code><a href="/ca/docs/Web/HTML/Element/textarea"><textarea></a></code>, per a entrades de text multilínia, i elements que s'utilitzen per a contenir i etiquetar parts de formularis com <code><a href="/ca/docs/Web/HTML/Element/fieldset"><fieldset></a></code> i <code><a href="/ca/docs/Web/HTML/Element/legend"><legend></a></code>.</p> + +<p>L'HTML5 també inclou atributs que permeten als desenvolupadors web indicar quins camps són obligatoris, i fins i tot el tipus de contingut que cal introduir. Si l’usuari introdueix alguna cosa inesperada o deixa un camp obligatori en blanc, el navegador pot mostrar un missatge d’error. Els diversos navegadors no presenten cap coherència ni homogeneïtzació pel que fa a l’estil que apliquen a aquests elements.</p> + +<h3 id="Aplicar_estil_a_elements_dentrada_de_text">Aplicar estil a elements d'entrada de text</h3> + +<p>Resulta força fàcil aplica estil als elements que permeten l’entrada de text, com <code><input type="text"></code>, alguns tipus específics, com <code><input type="email"></code>, i l'element <code><textarea></code>, i tendeixen a comportar-se igual que les altres caixes de la teva pàgina web. L'estil predeterminat d'aquests elements varia segons del sistema operatiu i el navegador amb què l'usuari visita el lloc web.</p> + +<p>En l'exemple següent hem aplicar estil a algunes entrades de text amb CSS; observa que alguns elements com ara les vores, els marges i l'àrea de farciment s'apliquen tal com s'esperaria. Utilitzem selectors d’atribut per a seleccionar els diferents tipus d’entrada. Ajusta les vores, afegeix colors de fons als camps i canvia el tipus de lletra i l'àrea de farciment; prova de canviar la manera com es veu aquest formulari.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/images/form.html", '100%', 1000)}}</p> + +<div class="blockIndicator warning"> +<p><strong>Important</strong>: Quan canvies l'estil dels elements de formulari t’has d’assegurar-te que a l'usuari encara li resulta evident que són elements de formulari. Podries crear una entrada de formulari sense vores i amb un fons que gairebé no es distingís del contingut que l’envolta, que potser seria difícil de reconèixer per a emplenar-la.</p> +</div> + +<p>Tal com s’explica en els articles sobre <a href="/en-US/docs/Learn/Forms/Styling_web_forms">l’aplicació d’estil a formularis</a> de la part d’HTML d’aquest curs, molts dels tipus d'entrada més complexos els proporciona el sistema operatiu i no és possible aplicar-los disseny. Per tant, has d’assumir que els diferents visitants sempre veuran els formularis ben diferents, i hauràs de provar els formularis complexos en diversos navegadors.</p> + +<h3 id="Elements_de_formulari_i_herència">Elements de formulari i herència</h3> + +<p>En alguns navegadors, els elements de formulari no hereten l'estil de lletra per defecte. Per tant, si vols estar segur que els teus camps de formulari utilitzen el tipus de lletra definit en el cos (<code>body</code>) de l’HTML o en un element pare, has d’afegir al teu CSS aquesta regla:</p> + +<pre class="brush: css"><code>button, +input, +select, +textarea { + font-family : inherit; + font-size : 100%; +} </code></pre> + +<h3 id="Elements_de_formulari_i_mida_de_les_caixes">Elements de formulari i mida de les caixes</h3> + +<p>En els diversos navegadors els elements de formulari utilitzen regles diferents per a assignar les mides de les caixes per a diferents controls de formulari. En el nostre article sobre <a href="/ca/docs/Learn/CSS/Building_blocks/The_box_model">el model de caixes</a> has après com assignar una mida a les caixes amb la propietat <code>box-sizing</code> i pots fer servir aquests coneixements a l’hora d’aplicar disseny als formularis per a garantir una experiència coherent a l’hora d’establir les amplades i les alçades dels elements d’un formulari.</p> + +<p>Una bona idea per a obtenir una experiència d’usuari coherent és establir els marges i l'àrea de farciment a <code>0</code> per a tots els elements i afegir-los després en aplicar un disseny concret a cada control.</p> + +<pre class="brush: css"><code>button, +input, +select, +textarea { + box-sizing: border-box; + padding: 0; + margin: 0; +}</code></pre> + +<h3 id="Altres_paràmetres_útils">Altres paràmetres útils</h3> + +<p>A més de les regles que hem esmentat, també hauries de configurar <code>overflow: auto</code> a <code><textarea></code> per evitar que Internet Explorer mostri una barra de desplaçament quan no faci falta:</p> + +<pre class="brush: css">textarea { + overflow: auto; +}</pre> + +<h3 id="Posar-ho_tot_«a_zero»">Posar-ho tot «a zero»</h3> + +<p>Com a últim pas, podem agrupar les diverses propietats que hem comentat en el «formulari base» següent, que proporciona una base coherent sobre la qual treballar. Això inclou tots els elements que hem esmentat en les últimes tres seccions:</p> + +<pre class="brush: css"><code>button, +input, +select, +textarea { + font-family: inherit; + font-size: 100%; + box-sizing: border-box; + padding: 0; margin: 0; +} + +textarea { + overflow: auto; +} </code></pre> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Molts desenvolupadors utilitzen fulls d'estil de normalització, que creen un conjunt d'estils de referència que utilitzen en tots els projectes. Normalment, aquests fulls d'estil fan coses semblants a les que acabem de descriure i garanteixen que qualsevol cosa que en navegadors diferents pugui ser diferent està configurada de manera predeterminada abans de fer la teva feina amb el CSS. Ara aquests fulls d’estil de normalització no són tan importants com abans, perquè els navegadors acostuma a presentar visualitzacions més coherents que en el passat. Tanmateix, si vols fer un cop d’ull a un exemple, ves a <a href="http://necolas.github.io/normalize.css/">Normalize.css</a>, que és un full d’estil molt popular que s’ha utilitzat com a base per molts projectes.</p> +</div> + +<p>Si vols obtenir més informació sobre com aplicar estil als formularis, fes un cop d’ull als dos articles de la secció d’HTML d’aquestes guies.</p> + +<ul> + <li><a href="/en-US/docs/Learn/Forms/Styling_web_forms">Disseny de formularis web</a></li> + <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Aspectes avançats d'aplicació d’estil a formularis web</a></li> +</ul> + +<h2 id="Resum">Resum</h2> + +<p>En aquest article s’han destacat algunes de les diferències amb què et trobaràs quan treballis amb imatges, media i altres elements poc habituals en CSS. En l’article següent examinarem alguns consells que et seran d’utilitat quan hagis de dissenyar taules HTML.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="En_aquest_mòdul">En aquest mòdul</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">La cascada i l'herència</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Els selectors CSS</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Els selectors de tipus, de classe i d’ID</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Els selectors d'atribut</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Les pseudoclasses i els pseudoelements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Els combinadors</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El model de caixes</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fons i vores</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El tractament del text en diverses direccions</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordament dels continguts</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Els valors i les unitats</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionar elements amb el CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imatges, media i elements de formulari</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estil a les taules</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depura el teu CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organitza el teu CSS</a></li> +</ol> diff --git a/files/ca/learn/css/building_blocks/index.html b/files/ca/learn/css/building_blocks/index.html new file mode 100644 index 0000000000..d42bb1fe85 --- /dev/null +++ b/files/ca/learn/css/building_blocks/index.html @@ -0,0 +1,72 @@ +--- +title: CSS building blocks +slug: Learn/CSS/Building_blocks +translation_of: Learn/CSS/Building_blocks +--- +<div>{{LearnSidebar}}</div> + +<p class="summary"><strong>Translation in progress.</strong></p> + +<p class="summary">This module carries on where <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a> left off — now you've gained familiarity with the language and its syntax, and got some basic experience with using it, its time to dive a bit deeper. This module looks at the cascade and inheritance, all the selector types we have available, units, sizing, styling backgrounds and borders, debugging, and lots more.</p> + +<p class="summary">The aim here is to provide you with a toolkit for writing competent CSS and help you understand all the essential theory, before moving on to more specific disciplines like <a href="/en-US/docs/Learn/CSS/Styling_text">text styling</a> and <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a>.</p> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>Before starting this module, you should have:</p> + +<ol> + <li>Basic familiarity with using computers, and using the Web passively (i.e. just looking at it, consuming the content.)</li> + <li>A basic work environment set up as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, and an understanding of how to create and manage files, as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a>.</li> + <li>Basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module.</li> + <li>An understanding of the basics of CSS, as discussed in the <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a> module.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Guides">Guides</h2> + +<p>This module contains the following articles, which cover the most essential parts of the CSS language. Along the way you'll come across plenty of exercises to allow you to test your understanding.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></dt> + <dd>The aim of this lesson is to develop your understanding of some of the most fundamental concepts of CSS — the cascade, specificity, and inheritance — which control how CSS is applied to HTML and how conflicts are resolved.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a></dt> + <dd>There are a wide variety of CSS selectors available, allowing for fine-grained precision when selecting elements to style. In this article and its sub-articles we'll run through the different types in great detail, seeing how they work. The sub-articles are as follows: + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> + </ul> + </dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></dt> + <dd>Everything in CSS has a box around it, and understanding these boxes is key to being able to create layouts with CSS, or to align items with other items. In this lesson we will take a proper look at the CSS <em>Box Model</em>, in order that you can move onto more complex layout tasks with an understanding of how it works and the terminology that relates to it.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></dt> + <dd>In this lesson we will take a look at some of the creative things you can do with CSS backgrounds and borders. From adding gradients, background images, and rounded corners, backgrounds and borders are the answer to a lot of styling questions in CSS.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></dt> + <dd>In recent years, CSS has evolved in order to better support different directionality of content, including right-to-left but also top-to-bottom content (such as Japanese) — these different directionalities are called <strong>writing modes</strong>. As you progress in your study and begin to work with layout, an understanding of writing modes will be very helpful to you, therefore we will introduce them in this article.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></dt> + <dd>In this lesson we will look at another important concept in CSS — <strong>overflow</strong>. Overflow is what happens when there is too much content to be contained comfortably inside a box. In this guide you will learn what it is and how to manage it.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></dt> + <dd>Every property used in CSS has a value or set of values that are allowed for that property. In this lesson we will take a look at some of the most common values and units in use.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></dt> + <dd>In the various lessons so far you have come across a number of ways to size items on a web page using CSS. Understanding how big the different features in your design will be is important, and in this lesson we will summarize the various ways elements get a size via CSS and define a few terms around sizing that will help you in the future.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></dt> + <dd>In this lesson we will take a look at how certain special elements are treated in CSS. Images, other media, and form elements behave a little differently in terms of your ability to style them with CSS than regular boxes. Understanding what is and isn't possible can save some frustration, and this lesson will highlight some of the main things that you need to know.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></dt> + <dd>Styling an HTML table isn't the most glamorous job in the world, but sometimes we all have to do it. This article provides a guide to making HTML tables look good, with some specific table styling techniques highlighted.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></dt> + <dd>Sometimes when writing CSS you will encounter an issue where your CSS doesn't seem to be doing what you expect. This article will give you guidance on how to go about debugging a CSS problem, and show you how the DevTools included in all modern browsers can help you find out what is going on.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></dt> + <dd>As you start to work on larger stylesheets and big projects you will discover that maintaining a huge CSS file can be challenging. In this article we will take a brief look at some best practices for writing your CSS to make it easily maintainable, and some of the solutions you will find in use by others to help improve maintainability.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">Advanced styling effects</a></dt> + <dd>This article acts as a box of tricks, providing an introduction to some interesting advanced styling features such as box shadows, blend modes, and filters.</dd> +</dl> diff --git a/files/ca/learn/css/building_blocks/selectors_css/combinadors/index.html b/files/ca/learn/css/building_blocks/selectors_css/combinadors/index.html new file mode 100644 index 0000000000..175379f986 --- /dev/null +++ b/files/ca/learn/css/building_blocks/selectors_css/combinadors/index.html @@ -0,0 +1,111 @@ +--- +title: Combinadors +slug: Learn/CSS/Building_blocks/Selectors_CSS/Combinadors +translation_of: Learn/CSS/Building_blocks/Selectors/Combinators +--- +<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p> + +<p>Els últims selectors que veurem s’anomenen combinadors, perquè combinen altres selectors de manera que proporcionen una relació útil entre aquests i la ubicació de continguts en el document.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisits:</th> + <td>Coneixements bàsics d'informàtica, tenir el <a href="/ca/docs/Learn/Getting_started_with_the_web/Instal·lació_bàsica_programari">programari bàsic instal·lat</a>, coneixements bàsics de com <a href="/ca/docs/Learn/Getting_started_with_the_web/Tractar_amb_arxius">treballar amb fitxers</a> i d'HTML (mira <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a>) i nocions bàsiques de <a href="/ca/docs/Learn/CSS/First_steps">com funciona el CSS</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Obtenir més informació sobre els diferents selectors que es poden utilitzar en CSS.</td> + </tr> + </tbody> +</table> + +<h2 id="Selector_de_descendents">Selector de descendents</h2> + +<p>Ja has vist selectors de descendents en articles anteriors (selectors separats per un espai):</p> + +<pre class="brush: css notranslate">body article p</pre> + +<p>Aquests selectors seleccionen elements que són descendents d’un altre selector. No cal que els elements que se seleccionen siguin fills directes.</p> + +<p>En l'exemple següent se seleccionen només els elements <code><p></code> que hi ha dins d'un element que està etiquetat amb una classe <code>.box</code>.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}</p> + +<h2 id="Combinador_de_fills">Combinador de fills</h2> + +<p>El combinador de fills és un símbol de «més gran que» (<code>></code>), que només selecciona elements que són descendents directes. Els descendents que hi ha més avall en la jerarquia no se seleccionen; per exemple, per a seleccionar només els elements <code><p></code> que són descendents directes d’elements <code><article></code>:</p> + +<pre class="brush: css notranslate">article > p</pre> + +<p>En aquest exemple hi ha una llista ordenada imbricada dins d'una altra llista no ordenada. Fem servir el combinador de fills per a seleccionar només els elements <code><li></code> que són fills directes de <code><ul></code> i els apliquem una vora superior.</p> + +<p>Si suprimim l’element <code>></code>, que designa que es tracta d'un selector de fills, obtenim un selector de descendents, i tots els elements <code><li></code> adquireixen una vora vermella.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}</p> + +<h2 id="Selector_de_germans_adjacents">Selector de germans adjacents</h2> + +<p>El selector de germans adjacents (<code>+</code>) s'utilitza per a seleccionar un element que es troba immediatament a continuació d'un altre element en el mateix nivell de jerarquia; per exemple, per a seleccionar tots els elements <code><img></code> que hi ha just a continuació d‘elements <code><p></code>:</p> + +<pre class="brush: css notranslate">p + img</pre> + +<p>Un cas comú d’ús d’aquest combinador és per a fer alguna cosa amb un paràgraf que va a continuació d’un encapçalament, com en el nostre exemple següent. Aquí busquem un paràgraf que estigui immediatament a continuació d’<code><h1></code> i hi apliquem estil.</p> + +<p>Si insereixes qualsevol altre element, com ara <code><h2></code>, entre <code><h1></code> i <code><p></code>, el paràgraf ja no coincideix amb el selector, i el color de fons no s'aplica.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}</p> + +<h2 id="Selector_de_germans_general">Selector de germans general</h2> + +<p>Si vols seleccionar els elements que són germans d’un element, encara que no siguin adjacents directes, pots fer servir el selector de germans general (<code>~</code>). Per a seleccionar tots els elements <code><img></code> que estiguin <em>en qualsevol lloc</em> a continuació dels elements <code><p></code>, hem de fer això:</p> + +<pre class="brush: css notranslate">p ~ img</pre> + +<p>En l'exemple següent seleccionem tots els elements <code><p></code> que hi ha després de <code><h1></code>, i tot i que en el document també hi ha un element <code><div></code>, se selecciona també l'element <code><p></code> que hi ha després.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}</p> + +<h2 id="Lús_dels_combinadors">L'ús dels combinadors</h2> + +<p>Pots combinar qualsevol dels selectors que hem vist en articles anteriors amb els combinadors per a seleccionar parts d’un document. Per exemple, per a seleccionar els elements de llista que tenen una classe «a» que són descendents directes de <code><ul></code>, pots utilitzar el codi següent:</p> + +<pre class="brush: css notranslate">ul > li[class="a"] { }</pre> + +<p>Tanmateix, has de tenir cura quan crees llistes grans de selectors que seleccionen parts molt específiques del document, perquè el selector serà molt específic per a la ubicació d'aquest element en l'etiquetatge i et serà difícil reutilitzar les regles CSS.</p> + +<p>Sovint és millor crear una classe senzilla i aplicar-la a l’element en qüestió. Ara bé, els coneixements sobre combinadors et poden ser molt útils si necessites accedir a algun part del document, però no pots accedir al codi HTML, potser a causa de la generació d’un CMS.</p> + +<h2 id="Comprova_les_teves_habilitats">Comprova les teves habilitats</h2> + +<p>Hem vist moltes coses en aquest article. Recordes la informació més important? Trobaràs més tests per a verificar que has retingut aquesta informació a <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks">Test your skills: Selectors</a>.</p> + +<h2 id="Avancem">Avancem</h2> + +<p>Aquesta és l’última secció dels nostres articles sobre selectors. A continuació passarem a una altra qüestió important del CSS: el <a href="/ca/docs/Learn/CSS/Building_blocks/The_box_model">model de caixes del CSS</a>.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="En_aquest_mòdul">En aquest mòdul</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">La cascada i l'herència</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Els selectors CSS</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Els selectors de tipus, de classe i d’ID</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Els selectors d'atribut</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Les pseudoclasses i els pseudoelements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Els combinadors</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El model de caixes</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fons i vores</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El tractament de les diverses direccions del text</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordament del contingut</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Els valors i les unitats</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionar elements en CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Elements d'imatge, de mèdia i de formulari</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estil a les taules</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depurar el CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organitzar el teu CSS</a></li> +</ol> diff --git a/files/ca/learn/css/building_blocks/selectors_css/index.html b/files/ca/learn/css/building_blocks/selectors_css/index.html new file mode 100644 index 0000000000..4bd7b005de --- /dev/null +++ b/files/ca/learn/css/building_blocks/selectors_css/index.html @@ -0,0 +1,223 @@ +--- +title: Selectors CSS +slug: Learn/CSS/Building_blocks/Selectors_CSS +translation_of: Learn/CSS/Building_blocks/Selectors +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div> + +<p class="summary">En el {{Glossary("CSS")}}, els selectors s'utilitzen per a determinar els elements {{glossary("HTML")}} de les pàgines web als quals volem aplicar estil. Hi ha una gran varietat de selectors CSS disponibles, que permeten obtenir una precisió àmplia a l’hora de seleccionar elements per a aplicar-los estil. En aquest article i els seus subarticles s'explicaran els diferents tipus amb detall i observarem com funcionen.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisits:</th> + <td>Coneixements bàsics d'informàtica, tenir el <a href="/ca/docs/Learn/Getting_started_with_the_web/Instal·lació_bàsica_programari">programari bàsic instal·lat</a>, coneixements bàsics de com <a href="/ca/docs/Learn/Getting_started_with_the_web/Tractar_amb_arxius">treballar amb fitxers</a> i d'HTML (mira <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a>) i nocions bàsiques de <a href="/ca/docs/Learn/CSS/First_steps">com funciona el CSS</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Conèixer amb detall com funcionen els selectors CSS.</td> + </tr> + </tbody> +</table> + +<h2 id="Què_és_un_selector">Què és un selector?</h2> + +<p>Ja has conegut els selectors. Un selector CSS és la primera part d'una regla CSS. Es tracta d’un patró d’elements i d’altres termes que diuen al navegador quins elements HTML s’han de seleccionar perquè tinguin els valors de les propietat CSS segons la regla que se’ls ha d’aplicar. L'element o els elements que selecciona el selector s'anomenen el <em>subjecte del selector</em>.</p> + +<p><img alt="Una mica de codi amb un h1 ressaltat." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p> + +<p>En articles anteriors, has vist altres selectors i també que hi ha selectors que es focalitzen en el document de maneres diferents (per exemple, seleccionant un element com <code>h1</code>, o una classe com <code>.special</code>).</p> + +<p>En CSS, els selectors es defineixen en l’especificació dels selectors CSS; com qualsevol altra part del CSS, han de ser compatibles amb els navegadors perquè funcionin. La majoria de selectors que trobaràs es defineixen en l’<a href="https://www.w3.org/TR/selectors-3/">especificació de selectors de nivell 3</a>, que és una especificació madura i, per tant, trobaràs una compatibilitat de navegadors excel·lent per a aquests selectors.</p> + +<h2 id="Llistes_de_selectors">Llistes de selectors</h2> + +<p>Si tens més d'un element que utilitza el mateix CSS, cadascun dels selectors es poden combinar en una <em>llista de selectors</em> que aplica la mateixa regla a tots els selectors. Per exemple, si tenim el mateix CSS per a <code>h1</code> i també per a una classe <code>.special</code>, ho podríem escriure com dues regles separades.</p> + +<pre class="brush: css notranslate"><code>h1 { + color: blue; +} + +.special { + color: blue; +} </code></pre> + +<p>Però també podem combinar-los en una llista de selectors, afegint-hi una coma entre ells.</p> + +<pre class="brush: css notranslate"><code>h1, .special { + color: blue; +} </code></pre> + +<p>L’espai en blanc és vàlid tant abans com després de la coma. També pots decidir que la llegibilitat dels selectors és més bona si cada un està en una línia nova.</p> + +<pre class="brush: css notranslate"><code>h1, +.special { + color: blue; +} </code></pre> + +<p>En l'exemple en viu següent, combina els dos selectors que tenen declaracions idèntiques. La visualització hauria de ser la mateixa després de la combinació.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}}</p> + +<p>Si agrupes els selectors d'aquesta manera, i algun dels selectors no és vàlid, s'ignorarà tota la regla.</p> + +<p>En l'exemple següent, la regla del selector de classe no vàlida s’ignorarà mentre que no hi haurà problemes a l'hora d’aplicar estil a <code>h1</code>.</p> + +<pre class="brush: css notranslate"><code>h1 { + color: blue; +} + +..special { + color: blue; +} </code></pre> + +<p>Tanmateix, en combinar-les, no s’aplicarà estil ni a <code>h1</code> ni a la classe, perquè la regla ja no és vàlida.</p> + +<pre class="brush: css notranslate"><code>h1, ..special { + color: blue; +} </code></pre> + +<h2 id="Tipus_de_selectors">Tipus de selectors</h2> + +<p>Hi ha uns quants grups diferents de selectors, i conèixer quin tipus de selector necessites t'ajudarà a trobar l'eina adequada a l'hora de treballar. En els subarticles d’aquest article examinarem amb més detall els diferents grups de selectors.</p> + +<h3 id="Selectors_de_tipus_de_classe_i_d’ID">Selectors de tipus, de classe i d’ID</h3> + +<p>Aquest grup inclou selectors que delimiten un element HTML, com ara <code><h1></code>.</p> + +<pre class="brush: css notranslate">h1 { }</pre> + +<p>També inclou selectors que delimiten una classe:</p> + +<pre class="brush: css notranslate">.box { }</pre> + +<p>o un ID:</p> + +<pre class="brush: css notranslate">#unique { }</pre> + +<h3 id="Selectors_datribut">Selectors d'atribut</h3> + +<p>Aquest grup de selectors t'ofereix diferents maneres de seleccionar elements segons la presència d’un atribut determinat en un element:</p> + +<pre class="brush: css notranslate">a[title] { }</pre> + +<p>O fins i tot fer una selecció segons la presència d’un atribut amb un valor determinat:</p> + +<pre class="brush: css notranslate">a[href="https://example.com"] { }</pre> + +<h3 id="Les_pseudoclasses_i_els_pseudoelements">Les pseudoclasses i els pseudoelements</h3> + +<p>Aquest grup de selectors inclou les pseudoclasses, que apliquen estil a certs estats d’un element. La pseudoclasse <code>:hover</code>, per exemple, selecciona un element només quan hi passa pel damunt el cursor del ratolí:</p> + +<pre class="brush: css notranslate">a:hover { }</pre> + +<p>També inclou els pseudoelements, que seleccionen una part determinada d’un element en lloc de l’element en si. Per exemple, <code>::first-line</code> sempre selecciona la primera línia de text que hi ha dins d’un element (<code><p></code> en el cas següent), i actua com si un <code><span></code> delimités la primera línia amb format i després la seleccionés.</p> + +<pre class="brush: css notranslate">p::first-line { }</pre> + +<h3 id="Combinadors">Combinadors</h3> + +<p>El grup final de selectors fa combinacions d’altres selectors que delimiten encara més els elements dels nostres documents. A continuació, per exemple, se seleccionen els paràgrafs que són fills directes dels elements <code><article></code> amb el combinador de fills (<code>></code>):</p> + +<pre class="brush: css notranslate">article > p { }</pre> + +<h2 id="Propers_passos">Propers passos</h2> + +<p>Pots donar un cop d'ull a la taula de referència de selectors que hi ha a continuació per trobar enllaços directes als diversos tipus de selectors de la secció d'aprenentatge o de MDN en general, o pots continuar en ordre i descobrir <a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Selectors_de_tipus_classe_i_ID">els tipus de selectors de classe i d’ID</a>.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="Taula_de_referència_dels_selectors">Taula de referència dels selectors</h2> + +<p>La taula següent t'ofereix una visió general dels selectors que tens disponibles, juntament amb enllaços a les pàgines d’aquesta guia, que et mostraran com utilitzar cada tipus de selector. També hem inclòs un enllaç a la pàgina MDN de cada selector, en què pots consultar la informació de compatibilitat amb els navegadors. Pots fer-ho servir com a referència de consulta per quan més endavant hagis de buscar selectors, o a mesura que experimentes amb el CSS en general.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Selector</th> + <th scope="col">Exemple</th> + <th scope="col">Tutorial de CSS</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/ca/docs/Web/CSS/Selectors_de_Tipus">Selector de tipus</a></td> + <td><code>h1 { }</code></td> + <td><a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Selectors_de_tipus_classe_i_ID#Selectors_de_tipus">Selectors de tipus</a></td> + </tr> + <tr> + <td><a href="/ca/docs/Web/CSS/Selectors_Universal">Selector universal</a></td> + <td><code>* { }</code></td> + <td><a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Selectors_de_tipus_classe_i_ID#El_selector_universal">El selector universal</a></td> + </tr> + <tr> + <td><a href="/ca/docs/Web/CSS/Selectors_de_Classe">Selector de classe</a></td> + <td><code>.box { }</code></td> + <td><a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Selectors_de_tipus_classe_i_ID#Selectors_de_classe">Selectors de classe</a></td> + </tr> + <tr> + <td><a href="/ca/docs/Web/CSS/Selectors_ID">Selector d’ID</a></td> + <td><code>#unique { }</code></td> + <td><a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Selectors_de_tipus_classe_i_ID#Selectors_ID">Selectors d’ID</a></td> + </tr> + <tr> + <td><a href="/ca/docs/Web/CSS/Selectors_d'Atribut">Selector d'atribut</a></td> + <td><code>a[title] { }</code></td> + <td><a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Selectors_atribut">Selectors d'atribut</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Pseudo-classes">Selectors de pseudoclasse</a></td> + <td><code>p:first-child { }</code></td> + <td><a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Pseudo-classes_and_pseudo-elements#Qu%C3%A8_%C3%A9s_una_pseudoclasse">Pseudoclasse</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Pseudo-elements">Selectors de pseudoelement</a></td> + <td><code>p::first-line { }</code></td> + <td><a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Pseudo-classes_and_pseudo-elements#Qu%C3%A8_%C3%A9s_un_pseudoelement">Pseudoelements</a></td> + </tr> + <tr> + <td><a href="/ca/docs/Web/CSS/Selectors_de_descendents">Combinador descendent</a></td> + <td><code>article p</code></td> + <td><a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Combinadors">Combinador descendent</a></td> + </tr> + <tr> + <td><a href="/ca/docs/Web/CSS/Selectors_de_fills">Combinador de fills</a></td> + <td><code>article > p</code></td> + <td><a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Combinadors#Selector_de_combinaci%C3%B3_delements_fill">Combinador de fills</a></td> + </tr> + <tr> + <td><a href="/ca/docs/Web/CSS/Selectors_de_germans_adjacents">Combinador de germans adjacents</a></td> + <td><code>h1 + p</code></td> + <td><a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Combinadors#Germans_adjacents">Germans adjacents</a></td> + </tr> + <tr> + <td><a href="/ca/docs/Web/CSS/Selectors_general_de_germans">Combinador general de germans</a></td> + <td><code>h1 ~ p</code></td> + <td><a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Combinadors#Germans_generals">Germans general</a></td> + </tr> + </tbody> +</table> + +<h2 id="En_aquest_mòdul">En aquest mòdul</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">La cascada i l'herència</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selectors CSS</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Selectors de tipus, de classe i d’ID</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Selectors d'atribut</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Les pseudoclasses i els pseudoelements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinadors</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El model de caixes</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fons i vores</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El tractament del text en diverses direccions</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordament dels continguts</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Els valors i les unitats</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionar elements en CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imatges, media i elements de formulari</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estil a les taules</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depurar el CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organitza el teu CSS</a></li> +</ol> diff --git a/files/ca/learn/css/building_blocks/selectors_css/pseudo-classes_and_pseudo-elements/index.html b/files/ca/learn/css/building_blocks/selectors_css/pseudo-classes_and_pseudo-elements/index.html new file mode 100644 index 0000000000..b28cb4873a --- /dev/null +++ b/files/ca/learn/css/building_blocks/selectors_css/pseudo-classes_and_pseudo-elements/index.html @@ -0,0 +1,398 @@ +--- +title: Pseudoclasses i pseudoelements +slug: Learn/CSS/Building_blocks/Selectors_CSS/Pseudo-classes_and_pseudo-elements +translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements +--- +<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p> + +<p>El conjunt següent de selectors que veurem s’anomenen <strong>pseudoclasses</strong> i <strong>pseudoelements</strong>. N'hi ha una bona quantitat i sovint serveixen per a propòsits força específics. Un cop que hauràs après a utilitzar-los, pots mirar-te la llista i veure si n’hi ha cap que et serveixi per a la tasca que intentes assolir. Una vegada més afegim que la pàgina de MDN corresponent a cada selector et pot ser útil per a esbrinar-ne la compatibilitat dels navegadors.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisits:</th> + <td>Coneixements bàsics d'informàtica, tenir el <a href="/ca/docs/Learn/Getting_started_with_the_web/Instal·lació_bàsica_programari">programari bàsic instal·lat</a>, coneixements bàsics de com <a href="/ca/docs/Learn/Getting_started_with_the_web/Tractar_amb_arxius">treballar amb fitxers</a> i d'HTML (mira <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a>) i nocions bàsiques de <a href="/ca/docs/Learn/CSS/First_steps">com funciona el CSS</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Adquirir més informació sobre els selectors de pseudoclasse i pseudoelement.</td> + </tr> + </tbody> +</table> + +<h2 id="Què_és_una_pseudoclasse">Què és una pseudoclasse?</h2> + +<p>Una pseudoclasse és un selector que selecciona elements que es troben en un estat específic. Per exemple, són el primer element del seu tipus o bé el cursor del ratolí els passa per sobre. Solen actuar com si haguessis aplicat una classe a alguna part del document, i sovint t’ajuden a reduir l'excés de classes en l'etiquetatge i et proporcionen un codi més flexible i fàcil de mantenir.</p> + +<p>Les pseudoclasses són paraules clau que comencen amb dos punts (:):</p> + +<pre class="notranslate">:<em>pseudo-class-name</em></pre> + +<h3 id="Un_exemple_senzill_de_pseudoclasse">Un exemple senzill de pseudoclasse</h3> + +<p>Donem una ullada a un exemple senzill. Si volem que el primer paràgraf d'un article es vegi més gran i en negreta, podem afegir una classe a aquest paràgraf i després afegir CSS a aquesta classe, tal com es mostra en el primer exemple següent:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}</p> + +<p>Tanmateix, això pot resultar molest a l'hora de fer-ne el manteniment; i si afegim un tipus nou de paràgraf a la part superior del document? Hauríem d’incloure la classe en el nou paràgraf. Doncs, en comptes d’afegir la classe, podríem utilitzar el selector de pseudoclasse {{cssxref(":first-child")}}; això seleccionarà <em>sempre</em> el primer element fill de l'article i ja no caldria editar l’HTML (que no sempre és possible, perquè de vegades es genera des d'un CMS).</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-child2.html", '100%', 700)}}</p> + +<p>Totes les pseudoclasses es comporten de la mateixa manera. Etiqueten una part del document que es troba en un estat determinat, i es comporten com si haguessis afegit una classe a l'HTML. Pots veure’n més exemples a MDN:</p> + +<ul> + <li><code><a href="/ca/docs/Web/CSS/:last-child">:last-child</a></code></li> + <li><code><a href="/ca/docs/Web/CSS/:only-child">:only-child</a></code></li> + <li><code><a href="/ca/docs/Web/CSS/:invalid">:invalid</a></code></li> +</ul> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: és vàlid escriure pseudoclasses i pseudoelements sense que les precedeixi cap selector d'element. En l'exemple anterior, podríem escriure <code>:first-child</code> i la regla s'aplicaria a qualsevol element que sigui el primer element d'un element <code><article></code>, no només primers paràgrafs. <code>:first-child</code> equival a <code>*:first-child</code>. Però normalment volem més control i cal ser més específics.</p> +</div> + +<h3 id="Pseudoclasses_dacció_dusuari">Pseudoclasses d'acció d'usuari</h3> + +<p>Algunes pseudoclasses només actuen quan l'usuari interactua d'alguna manera amb el document. Aquestes pseudoclasses <strong>d'acció de l'usuari</strong>, de vegades denominades <strong>pseudoclasses dinàmiques</strong>, actuen com si s'hagués afegit una classe a l'element quan l'usuari hi interactua. Els exemples inclouen:</p> + +<ul> + <li><code><a href="/ca/docs/Web/CSS/:invalid">:hover</a></code>; ja l’hem esmentada; només actua si l'usuari passa el cursor del ratolí per sobre d'un element, normalment un enllaç.</li> + <li><code><a href="/ca/docs/Web/CSS/:focus">:focus</a></code>; només actua si l'usuari selecciona l'element amb controls de teclat.</li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}</p> + +<h2 id="Què_és_un_pseudoelement">Què és un pseudoelement?</h2> + +<p>Els pseudoelements es comporten d’una manera similar, però actuen com si afegissis un element HTML completament nou a l’etiquetatge, en lloc d’aplicar una classe als elements que ja hi ha. Els pseudoelements comencen amb un doble dos punts <code>::</code>.</p> + +<pre class="notranslate"><em>::pseudo-element-name</em></pre> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Alguns pseudoelements originals utilitzaven la sintaxi de dos punts simple, i de vegades encara ho pots veure en algun codi o alguns exemples. Els navegadors moderns admeten els primers pseudoelements amb una sintaxi de dos punts simple o de dos punts doble per a tenir compatibilitat cap enrere.</p> +</div> + +<p>Per exemple, si volguessis seleccionar la primera línia d’un paràgraf, podries etiquetar-la amb un element <code><span></code> i utilitzar un selector d’elements; però això falla si el nombre de paraules que has etiquetat és superior o inferior a l'amplada de l'element principal. Com que no podem saber quantes paraules cabran en una línia perquè això canvia amb l’amplada de la pantalla o la mida de la lletra, no és possible fer-ho només afegint HTML.</p> + +<p>El selector de pseudoelements <code>::first-line</code> ho fa de manera segura: selecciona només la primera línia, encara que el nombre de paraules augmenti o disminueixi.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}</p> + +<p>Actua com si hi hagués una etiqueta <code><span></code> màgica en aquesta primera línia que s'actualitza cada cop que canvia la longitud de la línia.</p> + +<p>Pots veure que això selecciona la primera línia dels dos paràgrafs.</p> + +<h2 id="Combinar_pseudoclasses_i_pseudoelements">Combinar pseudoclasses i pseudoelements</h2> + +<p>Si vols que la primera línia del primer paràgraf es vegi en negreta, pots agrupar els selectors <code>:first-child</code> i <code>::first-line</code>. Prova d’introduir en l'exemple en viu anterior el CSS següent. Amb això demanem que volem seleccionar la primera línia del primer element <code><p></code>, que hi ha dins d’un element <code><article></code>.</p> + +<pre class="brush: css notranslate"><code>article p:first-child::first-line { + font-size: 120%; + font-weight: bold; +}</code></pre> + +<h2 id="Generar_contingut_amb_before_i_after">Generar contingut amb <code>::before</code> i <code>::after</code></h2> + +<p>Hi ha un parell de pseudoelements especials, que s'utilitzen juntament amb la propietat <code><a href="/en-US/docs/Web/CSS/content">content</a></code> per a inserir contingut al document mitjançant CSS.</p> + +<p>Pots utilitzar-los per a inserir una cadena de text, com en l'exemple en viu següent. Prova de canviar el valor de text de la propietat {{cssxref("content")}} i observa com canvia a la sortida. També pots canviar el pseudoelement <code>::before</code> per <code>::after</code> i observa que el text s’insereix al final de l'element, en lloc del principi.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}</p> + +<p>Inserir cadenes de text amb CSS, de fet, no es fa gaire sovint a la web, perquè aquest text no és accessible per a alguns lectors de pantalla i pot ser difícil de trobar i editar en el futur.</p> + +<p>Un ús més vàlid d'aquests pseudoelements és inserir una icona, per exemple la petita fletxa afegida de l'exemple següent, que és un indicador visual que no volem que un lector de pantalla llegeixi:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}</p> + +<p>Aquests pseudoelements també s'utilitzen amb freqüència per a inserir una cadena buida, a la qual després pots aplicar estil com a qualsevol altre element de la pàgina.</p> + +<p>En l'exemple següent hem afegit una cadena buida amb el pseudoelement <code>::before</code>. L'hem establert en <code>display: block</code> per a poder-hi aplicar una amplada i una alçada. A continuació, utilitzem el CSS per donar-hi estil com a qualsevol altre element. Pots jugar-hi amb el CSS i canviar-ne l’aspecte i el comportament.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}</p> + +<p>L’ús dels pseudoelements <code>::before</code> i <code>::after</code>, juntament amb la propietat <code>content</code>, es coneix en CSS com el «contingut generat» i veuràs que aquesta tècnica s’utilitza sovint per a diverses tasques. Un bon exemple és el lloc <a href="http://www.cssarrowplease.com/">CSS Arrow Please</a>, que t'ajuda a generar una fletxa amb CSS. Observa el CSS mentre crees la teva fletxa i fixa’t com funcionen els pseudoelements {{cssxref("::before")}} i {{cssxref("::after")}}. Sempre que vegis aquests selectors, cerca en la propietat {{cssxref("content")}} per esbrinar què s'ha afegit al document.</p> + +<h2 id="Secció_de_referència">Secció de referència</h2> + +<p>Hi ha un gran nombre de pseudoclasses i pseudoelements, i és útil tenir una llista en la qual s’hi faci referència. A continuació es mostren unes taules amb enllaços que apunten a les seves pàgines de referència en MDN. Fes-les servir de referència per veure de quines possibilitats d’etiquetatge disposes.</p> + +<h3 id="Pseudoclasses">Pseudoclasses</h3> + +<p>Paged Media, selecciona les pàgines de l’esquerra.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Selector</th> + <th scope="col">Descripció</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ Cssxref(":active") }}</td> + <td>Selecciona un element quan l’usuari l'activa (per exemple, fent-hi clic a sobre).</td> + </tr> + <tr> + <td>{{ Cssxref(":any-link") }}</td> + <td>Selecciona els estats <code>:link</code> i <code>:visited</code> d'un enllaç.</td> + </tr> + <tr> + <td>{{ Cssxref(":blank") }}</td> + <td>Selecciona un <a href="/ca/docs/Web/HTML/Element/input">element <code><input></code></a> que té el valor d'entrada buit.</td> + </tr> + <tr> + <td>{{ Cssxref(":checked") }}</td> + <td>Selecciona un botó d'opció o una casella de selecció en l'estat de seleccionat.</td> + </tr> + <tr> + <td>{{ Cssxref(":current") }}</td> + <td>Selecciona l'element o un antecessor de l'element que es mostra actiu.</td> + </tr> + <tr> + <td>{{ Cssxref(":default") }}</td> + <td>Selecciona un o diversos elements de la interfície d'usuari que són els elements predeterminats entre un conjunt d'elements similars.</td> + </tr> + <tr> + <td>{{ Cssxref(":dir") }}</td> + <td>Selecciona un element a partir de la direccionalitat (el valor de l’atribut <code><a href="/ca/docs/Web/HTML/Global_attributes/dir">dir</a></code> en HTML o la propietat <code><a href="/en-US/docs/Web/CSS/direction">direction</a></code> en CSS).</td> + </tr> + <tr> + <td>{{ Cssxref(":disabled") }}</td> + <td>Selecciona els elements d'una interfície d'usuari que estan deshabilitats.</td> + </tr> + <tr> + <td>{{ Cssxref(":empty") }}</td> + <td>Selecciona un element que no té fills, excepte, opcionalment, un espai blanc.</td> + </tr> + <tr> + <td>{{ Cssxref(":enabled") }}</td> + <td>Selecciona els elements d'una interfície d'usuari que estan habilitats.</td> + </tr> + <tr> + <td>{{ Cssxref(":first") }}</td> + <td>En <a href="/en-US/docs/Web/CSS/Paged_Media">Paged Media</a>, selecciona la primera pàgina.</td> + </tr> + <tr> + <td>{{ Cssxref(":first-child") }}</td> + <td>Selecciona un element que és el primer entre els seus germans.</td> + </tr> + <tr> + <td>{{ Cssxref(":first-of-type") }}</td> + <td>Selecciona un element d'un tipus determinat entre els seus germans.</td> + </tr> + <tr> + <td>{{ Cssxref(":focus") }}</td> + <td>Selecciona l’element que té el focus.</td> + </tr> + <tr> + <td>{{ Cssxref(":focus-visible")}}</td> + <td>Selecciona l’element que té el focus i que el focus està visible per a l'usuari.</td> + </tr> + <tr> + <td>{{ Cssxref(":focus-within") }}</td> + <td>Selecciona l’element que té el focus més l’element que té un descendent amb el focus.</td> + </tr> + <tr> + <td>{{ Cssxref(":future") }}</td> + <td>Selecciona els elements que estan just després de l’element actiu.</td> + </tr> + <tr> + <td>{{ Cssxref(":hover") }}</td> + <td>Selecciona un element quan l'usuari hi interactua.</td> + </tr> + <tr> + <td>{{ Cssxref(":indeterminate") }}</td> + <td>Selecciona els elements d'una interfície d'usuari, el valor dels quals estan en un estat indeterminat; generalment es tracta de <a href="/en-US/docs/Web/HTML/Element/input/checkbox">caselles de selecció</a>.</td> + </tr> + <tr> + <td>{{ Cssxref(":in-range") }}</td> + <td>Selecciona un element amb un rang de valors quan té el valor dins del rang.</td> + </tr> + <tr> + <td>{{ Cssxref(":invalid") }}</td> + <td>Selecciona un element, com ara <code><input></code>, que estigui en un estat no vàlid.</td> + </tr> + <tr> + <td>{{ Cssxref(":lang") }}</td> + <td>Selecciona un element segons l’idioma (valor de l’atribut <a href="/ca/docs/Web/HTML/Global_attributes/lang">lang</a> en HTML).</td> + </tr> + <tr> + <td>{{ Cssxref(":last-child") }}</td> + <td>Selecciona l’element que és l’últim entre els seus germans.</td> + </tr> + <tr> + <td>{{ Cssxref(":last-of-type") }}</td> + <td>Selecciona un element d'un tipus determinat que és l’últim entre els seus germans.</td> + </tr> + <tr> + <td>{{ Cssxref(":left") }}</td> + </tr> + <tr> + <td>{{ Cssxref(":link")}}</td> + <td>Selecciona els enllaços no visitats.</td> + </tr> + <tr> + <td>{{ Cssxref(":local-link")}}</td> + <td>Selecciona els enllaços que apunten a les pàgines que estan al mateix lloc web que el document actiu.</td> + </tr> + <tr> + <td>{{ Cssxref(":is", ":is()")}}</td> + <td>Selecciona qualsevol dels selectors de la llista de selectors.</td> + </tr> + <tr> + <td>{{ Cssxref(":not") }}</td> + <td>Selecciona coses que no han estat seleccionades per altres selectors, que es converteixen en valor d'aquest selector.</td> + </tr> + <tr> + <td>{{ Cssxref(":nth-child") }}</td> + <td>Selecciona elements d'entre una llista de germans: els germans es combinen amb una fórmula del tipus <var>an+b</var> (per exemple, 2n + 1 coincidiran amb els elements 1, 3, 5, 7, etc. Tots els imparells).</td> + </tr> + <tr> + <td>{{ Cssxref(":nth-of-type") }}</td> + <td>Selecciona elements d'un tipus determinat d'entre una llista de germans (per exemple, <code><p></code>): els germans es corresponen amb una fórmula de la forma <var>an+b</var> (per exemple, 2n + 1 coincidiria amb els elements 1, 3, 5, 7, etc. Tots els imparells).</td> + </tr> + <tr> + <td>{{ Cssxref(":nth-last-child") }}</td> + <td>Selecciona elements d'entre una llista de germans, comptant enrere des del final. Els germans es corresponen amb una fórmula del tipus <var>an+b</var> (per exemple, 2n + 1 coincidiria amb l’últim element de la seqüència, després els dos elements anteriors, un altre cop els dos elements anteriors, etc. Tots els imparells, comptant des del final).</td> + </tr> + <tr> + <td>{{ Cssxref(":nth-last-of-type") }}</td> + <td>Selecciona elements d'un tipus determinat d'entre una llista de germans (per exemple, <code><p></code>), comptant cap enrere des del final. Els germans es corresponen amb una fórmula de la forma <var>an+b</var> (per exemple, 2n + 1 coincidiria amb l’últim element d’aquest tipus de la seqüència, després els dos elements anteriors a aquell, i un altre cop dos elements anteriors, etc. Tots els imparells, comptant des del final).</td> + </tr> + <tr> + <td>{{ Cssxref(":only-child") }}</td> + <td>Selecciona un element que no té germans.</td> + </tr> + <tr> + <td>{{ Cssxref(":only-of-type") }}</td> + <td>Selecciona un element que és l'únic del seu tipus entre els seus germans.</td> + </tr> + <tr> + <td>{{ Cssxref(":optional") }}</td> + <td>Selecciona els elements de formulari que no són necessaris.</td> + </tr> + <tr> + <td>{{ Cssxref(":out-of-range") }}</td> + <td>Selecciona un element amb un interval quan el seu valor està fora del rang.</td> + </tr> + <tr> + <td>{{ Cssxref(":past") }}</td> + <td>Selecciona els elements que són anteriors a l’element actiu.</td> + </tr> + <tr> + <td>{{ Cssxref(":placeholder-shown") }}</td> + <td>Selecciona un element d’entrada que mostra el marcador de posició del text.</td> + </tr> + <tr> + <td>{{ Cssxref(":playing") }}</td> + <td>Selecciona un element que representa un àudio, un vídeo o un recurs similar, que pot ser «reproduït» o «pausat» quan aquest element «es reprodueix».</td> + </tr> + <tr> + <td>{{ Cssxref(":paused") }}</td> + <td>Selecciona un element que representa un àudio, un vídeo o un recurs similar, que pot ser «reproduït» o «pausat», quan aquest element està «en pausa».</td> + </tr> + <tr> + <td>{{ Cssxref(":read-only") }}</td> + <td>Selecciona un element no modificable per l'usuari.</td> + </tr> + <tr> + <td>{{ Cssxref(":read-write") }}</td> + <td>Selecciona un element modificable per l'usuari.</td> + </tr> + <tr> + <td>{{ Cssxref(":required") }}</td> + <td>Selecciona els elements de formulari que són necessaris.</td> + </tr> + <tr> + <td>{{ Cssxref(":right") }}</td> + <td>En <a href="/en-US/docs/Web/CSS/CSS_Pages">Paged Media</a>, selecciona les pàgines de la dreta.</td> + </tr> + <tr> + <td>{{ Cssxref(":root") }}</td> + <td>Selecciona un element que és l'arrel del document.</td> + </tr> + <tr> + <td>{{ Cssxref(":scope") }}</td> + <td>Selecciona qualsevol element que sigui un element d'abast.</td> + </tr> + <tr> + <td>{{ Cssxref(":valid") }}</td> + <td>Selecciona un element, com ara <code><input></code>, que estigui en un estat vàlid.</td> + </tr> + <tr> + <td>{{ Cssxref(":target") }}</td> + <td>Selecciona l’element al qual apunta l’URL activa (és a dir, si té un ID que coincideix amb l’<a href="https://en.wikipedia.org/wiki/Fragment_identifier">identificador de fragment</a> de l’URL actiu).</td> + </tr> + <tr> + <td>{{ Cssxref(":visited") }}</td> + <td>Selecciona els enllaços visitats.</td> + </tr> + </tbody> +</table> + +<h3 id="Pseudoelements">Pseudoelements</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Selector</th> + <th scope="col">Descripció</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ Cssxref("::after") }}</td> + <td>Selecciona un element que pot aparèixer després del contingut actiu de l'element originari.</td> + </tr> + <tr> + <td>{{ Cssxref("::before") }}</td> + <td>Selecciona un element que pot aparèixer abans del contingut actiu de l'element originari.</td> + </tr> + <tr> + <td>{{ Cssxref("::first-letter") }}</td> + <td>Selecciona la primera lletra de l'element.</td> + </tr> + <tr> + <td>{{ Cssxref("::first-line") }}</td> + <td>Selecciona la primera línia de l'element.</td> + </tr> + <tr> + <td>{{ Cssxref("::grammar-error") }}</td> + <td>Selecciona una part del document que conté un error de gramàtica que indica el navegador.</td> + </tr> + <tr> + <td>{{ Cssxref("::selection") }}</td> + <td>Selecciona la part del document seleccionat.</td> + </tr> + <tr> + <td>{{ Cssxref("::spelling-error") }}</td> + <td>Selecciona una part del document que conté un error d'ortografia que indica el navegador.</td> + </tr> + </tbody> +</table> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="En_aquest_mòdul">En aquest mòdul</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">La cascada i l'herència</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Els selectors CSS</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Els selectors de tipus, de classe i d’ID</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Els selectors d'atribut</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Les pseudoclasses i els pseudoelements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Els combinadors</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El model de caixes</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fons i vores</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El tractament del text en diverses direccions</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordament dels continguts</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Els valors i les unitats</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionar elements en CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imatges, mèdia i elements de formulari</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estil a les taules</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depura el teu CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organitza el teu CSS</a></li> +</ol> diff --git a/files/ca/learn/css/building_blocks/selectors_css/selectors_atribut/index.html b/files/ca/learn/css/building_blocks/selectors_css/selectors_atribut/index.html new file mode 100644 index 0000000000..6ab61828f8 --- /dev/null +++ b/files/ca/learn/css/building_blocks/selectors_css/selectors_atribut/index.html @@ -0,0 +1,154 @@ +--- +title: Selectors d'atribut +slug: Learn/CSS/Building_blocks/Selectors_CSS/Selectors_atribut +translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors +--- +<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p> + +<p>Com ja saps a partir de l’estudi de l'HTML, els elements poden tenir atributs, que donen més detalls sobre l'element que s’etiqueta. En CSS pots utilitzar selectors d’atributs per a seleccionar elements que tenen uns atributs determinats. Aquest article et mostra com utilitzar aquests selectors tan útils.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisits:</th> + <td>Coneixements bàsics d'informàtica, tenir el <a href="/ca/docs/Learn/Getting_started_with_the_web/Instal·lació_bàsica_programari">programari bàsic instal·lat</a>, coneixements bàsics de com <a href="/ca/docs/Learn/Getting_started_with_the_web/Tractar_amb_arxius">treballar amb fitxers</a> i d'HTML (consulta <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a>) i nocions bàsiques de <a href="/ca/docs/Learn/CSS/First_steps">com funciona el CSS</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Conèixer els selectors d’atributs i com utilitzar-los.</td> + </tr> + </tbody> +</table> + +<h2 id="Selectors_de_presència_i_de_valor">Selectors de presència i de valor</h2> + +<p>Aquests selectors permeten seleccionar un element només per la presència d’un atribut (per exemple <code>href</code>) o per diferents coincidències amb el valor de l’atribut.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Selector</th> + <th scope="col">Exemple</th> + <th scope="col">Descripció</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>[<em>attr</em>]</code></td> + <td><code>a[title]</code></td> + <td>Selecciona elements que tenen com a nom d'atribut <em>attr</em> el valor entre claudàtors.</td> + </tr> + <tr> + <td><code>[<em>attr</em>=<em>value</em>]</code></td> + <td><code>a[href="https://example.com"]</code></td> + <td>Selecciona elements que tenen el nom d'atribut <em>attr</em>, el valor del qual sigui exactament la cadena de caràcters que hi ha entre cometes: <em>value</em>.</td> + </tr> + <tr> + <td><code>[<em>attr</em>~=<em>value</em>]</code></td> + <td><code>p[class~="special"]</code></td> + <td> + <p>Selecciona elements amb un nom d’atribut <em>attr</em> el valor del qual és exactament <em>value</em>, o elements que tenen un atribut <em>attr</em> que conté un o més valors, dels quals almenys un coincideix amb <em>value</em>.</p> + + <p>Observa que en una llista de diversos valors, els valors se separen amb espais en blanc.</p> + </td> + </tr> + <tr> + <td><code>[<em>attr</em>|=<em>value</em>]</code></td> + <td><code>div[lang|="zh"]</code></td> + <td>Selecciona elements que tenen un nom d’atribut <em>attr</em> que pot ser exactament <em>value</em> o que pot començar per <em>value</em> seguit immediatament d’un guionet.</td> + </tr> + </tbody> +</table> + +<p>En l'exemple següent pots veure que com es fan servir aquests selectors.</p> + +<ul> + <li>Utilitzant <code>li[class]</code> podem seleccionar qualsevol selector amb un atribut de classe. Això ho fa coincidir tot menys el primer element de la llista.</li> + <li><code>li[class="a"]</code> relaciona un selector amb una classe <code>a</code>, però no un selector amb una classe <code>a</code> amb una altra classe separada per un espai que sigui part del valor. Selecciona el segon element de llista.</li> + <li><code>li[class~="a"]</code> selecciona una classe <code>a</code>, però que també tingui un valor que contingui la classe <code>a</code> com a part d'una llista separada amb espais. Selecciona el segon i el tercer elements de la llista.</li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}</p> + +<h2 id="Selectors_de_subcadena">Selectors de subcadena</h2> + +<p>Aquests selectors permeten obtenir una concordança més ajustada a partir de les subcadenes que conté el valor del teu atribut. Per exemple, si hi ha les classes <code>box-warning</code> i <code>box-error</code> i vols seleccionar tot el que comença amb la cadena «box-», pots seleccionar-les totes dues amb <code>[class^="box-"]</code>.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Selector</th> + <th scope="col">Exemple</th> + <th scope="col">Descripció</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>[<em>attr</em>^=<em>value</em>]</code></td> + <td><code>li[class^="box-"]</code></td> + <td>Selecciona elements amb un nom d'atribut <em>attr</em> que conté la subcadena <em>value</em> al principi.</td> + </tr> + <tr> + <td><code>[<em>attr</em>$=<em>value</em>]</code></td> + <td><code>li[class$="-box"]</code></td> + <td>Selecciona elements amb un nom d’atribut <em>attr</em> que conté la subcadena <em>value</em> al final.</td> + </tr> + <tr> + <td><code>[<em>attr</em>*=<em> </em>]</code></td> + <td><code>li[class*="box"]</code></td> + <td>Relaciona elements amb un nom d'atribut <em>attr</em> que conté almenys una ocurrència de la subcadena <em>value</em> en qualsevol lloc de la cadena.</td> + </tr> + </tbody> +</table> + +<p>L’exemple següent mostra l'ús d'aquests selectors:</p> + +<ul> + <li><code>li[class^="a"]</code> selecciona qualsevol valor d'atribut que comença amb <code>a</code>; és a dir, selecciona els dos primers elements de la llista.</li> + <li><code>li[class$="a"]</code> selecciona qualsevol valor d'atribut que acaba amb <code>a</code>; és a dir, selecciona el primer i el tercer elements de la llista.</li> + <li><code>li[class*="a"]</code> selecciona qualsevol valor d'atribut en què <code>a</code> apareix en alguna part de la cadena, de manera que selecciona tots els elements de la nostra llista.</li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}</p> + +<h2 id="Distinció_entre_majúscules_i_minúscules">Distinció entre majúscules i minúscules</h2> + +<p>Si vols seleccionar els valors d'atribut tant si estan escrits en majúscules com en minúscules, pots utilitzar el valor <code>i</code> abans del claudàtor de tancament. Aquest indicador informa el navegador que els caràcters ASCII han de coincidir independentment de si les lletres són majúscules o minúscules. Sense aquest indicador, la correspondència entre els valors es farà segons les directrius del llenguatge del document pel que fa a la distinció entre majúscules i minúscules; en el cas de l'HTML, distingeix entre majúscules i minúscules.</p> + +<p>En l'exemple següent, el primer selector coincideix amb un valor que comença per <code>a</code>; només coincideix el primer element de la llista perquè els altres dos elements de la llista comencen amb una A majúscula. El segon selector no distingeix entre majúscules i minúscules, així que la correspondència és entre tots els elements de la llista.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: També hi ha un valor <code>s</code> més recent, que imposa la coincidència de majúscules i les minúscules en contextos en què normalment no es dona; tanmateix, aquest valor encara no té gaire compatibilitat amb els navegadors i no resulta gaire útil en el context de l’HTML.</p> +</div> + +<h2 id="Propers_passos">Propers passos</h2> + +<p>Ara que hem acabat amb els selectors d’atribut, pots avançar cap a l’article següent sobre les <a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Pseudo-classes_and_pseudo-elements">pseudoclasses i els pseudoelements</a>.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="En_aquest_mòdul">En aquest mòdul</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">La cascada i l'herència</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Els selectors CSS</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Els selectors de tipus, de classe i d’ID</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Els selectors d'atribut</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Les pseudoclasses i els pseudoelements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Els combinadors</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El model de caixes</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fons i vores</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El tractament del text en diverses direccions</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordament dels continguts</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Els valors i les unitats</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionar elements en CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imatges, mèdia i elements de formulari</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estil a les taules</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depura el teu CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organitza el teu CSS</a></li> +</ol> diff --git a/files/ca/learn/css/building_blocks/selectors_css/selectors_de_tipus_classe_i_id/index.html b/files/ca/learn/css/building_blocks/selectors_css/selectors_de_tipus_classe_i_id/index.html new file mode 100644 index 0000000000..2cdbdc244a --- /dev/null +++ b/files/ca/learn/css/building_blocks/selectors_css/selectors_de_tipus_classe_i_id/index.html @@ -0,0 +1,117 @@ +--- +title: 'Selectors de tipus, classe i ID' +slug: Learn/CSS/Building_blocks/Selectors_CSS/Selectors_de_tipus_classe_i_ID +translation_of: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors +--- +<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p> + +<p>En aquest article farem un cop d’ull als selectors més senzills que hi ha disponibles, i que probablement utilitzaràs més a l'hora de treballar.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisits:</th> + <td>Coneixements bàsics d'informàtica, tenir el <a href="/ca/docs/Learn/Getting_started_with_the_web/Instal·lació_bàsica_programari">programari bàsic instal·lat</a>, coneixements bàsics de com <a href="/ca/docs/Learn/Getting_started_with_the_web/Tractar_amb_arxius">treballar amb fitxers</a> i d'HTML (mira <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a>) i nocions bàsiques de <a href="/ca/docs/Learn/CSS/First_steps">com funciona el CSS</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Obtenir més informació sobre els diferents selectors CSS que podem utilitzar per a aplicar CSS a un document.</td> + </tr> + </tbody> +</table> + +<h2 id="Selectors_de_tipus">Selectors de tipus</h2> + +<p>A vegades, a un <strong>selector de tipus</strong> també se'l denomina <em>selector de noms d'etiqueta</em> o <em>selector d'elements</em>, perquè selecciona una etiqueta/element HTML al document. En l’exemple següent hem utilitzat selectors <code>span</code>, <code>em</code> i <code>strong</code>. Per tant, hem aplicat estil a totes les instàncies <code><span></code>, <code><em></code> i <code><strong></code>.</p> + +<p><strong>Afegeix una regla CSS que seleccioni l’element <code><h1></code> i en canviï el color pel blau.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}</p> + +<h2 id="El_selector_universal">El selector universal</h2> + +<p>El selector universal s'indica amb un asterisc (<code>*</code>) i selecciona tot el que hi ha dins del document (o dins de l'element pare, si s'encadena amb un altre element i un combinador descendent, per exemple). En l'exemple següent hem utilitzat el selector universal per a eliminar els marges de tots els elements. Això vol dir que, en lloc de l'estil predeterminat que hi afegeix el navegador, que deixa un espai de marge entre els títols d’encapçalament i els paràgrafs, tot està junt i no podem distingir els diferents paràgrafs amb facilitat.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}</p> + +<p>Aquest tipus de comportament a vegades es pot veure en els «fulls d'estil de restabliment» (o «fulls d'estil <em>reset</em>»), que eliminen tot l'estil que aplica el navegador. Van ser molt populars en un moment determinat, tot i que eliminar tots els estils significava que aleshores havies de tornar-ho a fer tot! Per tant, acostumem a utilitzar el selector universal amb atenció per a afrontar situacions molt específiques, com la que es descriu a continuació.</p> + +<h3 id="Ús_del_selector_universal_per_a_facilitar_la_lectura">Ús del selector universal per a facilitar la lectura</h3> + +<p>Un dels usos del selector universal és fer els selectors més fàcils de llegir i més evidents, en termes de què fan. Per exemple, si vull seleccionar el primer fill de qualsevol element <code><article></code>, independentment de quin element sigui, i posar-lo en negreta, podem utilitzar el selector {{cssxref(":first-child")}}, que veurem amb més detall en l’article sobre <a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Pseudo-classes_and_pseudo-elements">pseudoclasses i pseudoelements</a>, com un selector descendent juntament amb el selector d'elements <code><article></code>:</p> + +<pre class="brush: css notranslate">article :first-child { + +}</pre> + +<p>Això es pot confondre, però, amb <code>article:first-child</code>, que selecciona qualsevol element <code><article></code> que sigui el primer fill d'un altre element.</p> + +<p>Per evitar aquesta confusió, podem afegir al selector <code>:first-child</code> el selector universal, de manera que ara resulta obvi el que fa el selector. Selecciona <em>qualsevol</em> element que sigui el primer fill d'un element <code><article></code>:</p> + +<pre class="brush: css notranslate">article *:first-child { + +} </pre> + +<h2 id="Selectors_de_classe">Selectors de classe</h2> + +<p>El selector de classe s’inicia amb un caràcter de punt (<code>.</code>) i selecciona qualsevol element del document que tingui aplicada la classe seleccionada. En l'exemple en directe següent hem creat una classe anomenada <code>.highlight</code> i l'hem aplicada a diversos llocs del document. Es ressalten tots els elements que tenen aplicada aquesta classe.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}</p> + +<h3 id="Seleccionar_classes_en_elements_concrets">Seleccionar classes en elements concrets</h3> + +<p>Pots crear un selector que seleccioni els elements específics que tenen aplicada aquella classe. En l'exemple següent, destaquem un element <code><span></code> que té una classe <code>highlight</code> diferent del destacat que apliquem a l'encapçalament <code><h1></code> amb classe <code>highlight</code>. Ho fem adjuntant la classe al selector de tipus per a l’element que volem seleccionar, sense cap espai entremig.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}</p> + +<p>Aquesta manera de seleccionar dificulta la reutilització de CSS, perquè la classe només s'aplica a aquest element en concret, i hauràs d'afegir un altre selector si decideixes que les regles s'han d'aplicar també a altres elements.</p> + +<h3 id="Seleccionar_un_element_si_té_aplicada_més_duna_classe">Seleccionar un element si té aplicada més d'una classe</h3> + +<p>Pots aplicar diverses classes a un element i seleccionar-les individualment, o bé seleccionar l'element només quan inclou totes les classes del selector. Això pot ser útil per a crear components que es poden combinar de maneres diferents al teu lloc web.</p> + +<p>En l'exemple següent hi ha un element <code><div></code> que inclou una nota. La vora gris s'aplica quan la casella té una classe <code>notebox</code>. Si també té una classe <code>warning</code> o <code>danger</code>, el {{cssxref("border-color")}} canvia.</p> + +<p>Podem dir-li al navegador que només volem fer coincidir l’element si té totes aquestes classes tot encadenant-les juntes sense espais entremig.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}</p> + +<h2 id="Selectors_d’ID">Selectors d’ID</h2> + +<p>Un selector d’ID comença amb un caràcter <code>#</code> en lloc d'un caràcter de punt, però s'utilitza bàsicament de la mateixa manera que un selector de classe. Ara bé, un ID només es pot utilitzar una vegada en cada document, i cada element pot tenir un <code>id</code> com a màxim. El selector pot seleccionar l’element que té l’<code>id</code> establert i també pots precedir l'identificador amb un selector de tipus que seleccioni l’element només si coincideix amb l'ID. Pots veure aquests dos usos en l'exemple següent:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Tal com hem après en l’article que parla d'especificitat, un ID té més especificitat i anul·la la majoria dels altres selectors. Això pot dificultar les coses a l'hora de treballar. En la majoria dels casos és preferible afegir una classe a l'element, en lloc d'utilitzar un ID, però a vegades fer servir un ID és l'única manera de seleccionar l'element (potser perquè no es té accés al codi d’etiquetatge i, per tant, no es pot editar).</p> +</div> + +<h2 id="En_el_proper_article">En el proper article</h2> + +<p>Continuarem explorant els selectors i veurem els <a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Selectors_atribut">selectors d’atribut</a>.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="En_aquest_mòdul">En aquest mòdul</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">La cascada i l'herència</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Els selectors CSS</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Els selectors de tipus, de classe i d’ID</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Els selectors d'atribut</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Les pseudoclasses i els pseudoelements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Els combinadors</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El model de caixes</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fons i vores</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El tractament del text en diverses direccions</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordament dels continguts</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Els valors i les unitats</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionar elements en CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imatges, media i elements de formulari</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estil a les taules</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depurar el CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organitza el teu CSS</a></li> +</ol> diff --git a/files/ca/learn/css/building_blocks/styling_tables/index.html b/files/ca/learn/css/building_blocks/styling_tables/index.html new file mode 100644 index 0000000000..21f96454d9 --- /dev/null +++ b/files/ca/learn/css/building_blocks/styling_tables/index.html @@ -0,0 +1,290 @@ +--- +title: Estils per taules +slug: Learn/CSS/Building_blocks/Styling_tables +tags: + - Article + - Beginner + - CSS + - CodingScripting + - Guide + - Styling + - Tables +translation_of: Learn/CSS/Building_blocks/Styling_tables +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}</div> + +<p class="summary"><span id="result_box" lang="ca">Aplicar estil a una taula HTML no és la feina més glamurosa del món, però tots ho hem de fer en algun moment. Aquest article proporciona una guia d’aplicació d’estil a les taules HTML per a donar-los un aspecte presentable.</span></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td>Conceptes bàsics d'HTML (consulta la <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l’HTML</a>), coneixements de taules HTML (consulta el mòdul de taules HTML (TBD)) i nocions de com funciona el CSS (consulta la <a href="/ca/docs/Learn/HTML/Taules_HTML">Introducció al CSS</a>.)</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Aprendre a aplicar estil a una taula HTML.</td> + </tr> + </tbody> +</table> + +<h2 id="Una_taula_HTML_típica"><span id="result_box" lang="ca"><span>Una taula HTML típica</span></span></h2> + +<p>Comencem amb una taula HTML típica. Bé, diem que és típica, tot i que la majoria d'exemples de taula HTML són sobre sabates, dades climàtiques o empleats, i nosaltres, en canvi, hem decidit fer-ne una de més interessant, sobre bandes punk famoses del Regne Unit. El codi d’etiquetatge presenta aquesta aspecte:</p> + +<pre class="brush: html notranslate"><table summary="The most famous UK punk bands"> + <caption>A summary of the UK's most famous punk bands</caption> + <thead> + <tr> + <th scope="col">Band</th> + <th scope="col">Year formed</th> + <th scope="col">No. of Albums</th> + <th scope="col">Most famous song</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Buzzcocks</th> + <td>1976</td> + <td>9</td> + <td>Ever fallen in love (with someone you shouldn't've)</td> + </tr> + <tr> + <th scope="row">The Clash</th> + <td>1976</td> + <td>6</td> + <td>London Calling</td> + </tr> + + ... some rows removed for brevity + + <tr> + <th scope="row">The Stranglers</th> + <td>1974</td> + <td>17</td> + <td>No More Heroes</td> + </tr> + </tbody> + <tfoot> + <tr> + <th scope="row" colspan="2">Total albums</th> + <td colspan="2">77</td> + </tr> + </tfoot> +</table></pre> + +<p>El codi d’etiquetatge de la taula és correcte, permet aplicar-hi estil sense problemes i és accessible, gràcies a funcions com {{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlattrxref("summary","table")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}}, etc. Malauradament, presenta un aspecte poc agradable quan es representa a la pantalla (observa-la en viu en el fitxer <a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html">punk-bands-unstyled.html</a>):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13064/table-unstyled.png" style="display: block; margin: 0 auto;"></p> + +<p>Amb l’estil per defecte que hi aplica el navegador, la taula presenta un aspecte atapeït i poc llegible, i resulta més aviat avorrida. Per a posar-hi remei, hem d'utilitzar una mica de CSS.</p> + +<h2 id="Aprenentatge_actiu_Aplica_estil_a_la_taula">Aprenentatge actiu: Aplica estil a la taula</h2> + +<p>En aquesta secció d'aprenentatge actiu, treballarem junts per a aplicar estil a la nostra taula d’exemple.</p> + +<ol> + <li>Per començar, fes una còpia local del fitxer amb el <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-unstyled.html">codi d’etiquetatge d'exemple</a>, descarrega’t les dues imatges (<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/noise.png">noise</a> i <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/leopardskin.jpg">leopardskin</a>), i posa els tres fitxers resultants en un directori de treball en algun lloc del teu ordinador local.</li> + <li>A continuació, crea un fitxer nou anomenat <code>style.css</code> i desa’l al mateix directori que els altres fitxers.</li> + <li>Enllaça el CSS amb l'HTML, i posa-hi la línia de codi HTML següent dins de l’element {{htmlelement("head")}}: + <pre class="brush: html notranslate"><link href="style.css" rel="stylesheet" type="text/css"></pre> + </li> +</ol> + +<h3 id="Espaiat_i_disseny">Espaiat i disseny</h3> + +<p>El primer que cal és organitzar l'espaiat i el disseny, perquè l'estil de taula predeterminat és molt atapeït. Afegeix, doncs, el codi CSS següent al teu fitxer <code>style.css</code>:</p> + +<pre class="brush: css notranslate">/* spacing */ + +table { + table-layout: fixed; + width: 100%; + border-collapse: collapse; + border: 3px solid purple; +} + +thead th:nth-child(1) { + width: 30%; +} + +thead th:nth-child(2) { + width: 20%; +} + +thead th:nth-child(3) { + width: 15%; +} + +thead th:nth-child(4) { + width: 35%; +} + +th, td { + padding: 20px; +}</pre> + +<p><span id="result_box" lang="ca"><span>Les parts més importants que destaquem són les següents:</span></span></p> + +<ul> + <li>Assignar el valor <code>fixed</code> a la propietat {{cssxref("table-layout")}} de la taula en general és una bona idea perquè fa el comportament per defecte de la taula més previsible. Normalment, les columnes de la taula adquireixen una mida segons la quantitat de contingut que inclouen, i això pot provocar resultats estranys. Amb la propietat <code>table-layout: fixed</code> pots donar a les columnes una mida segons l'amplada de les capçaleres, i a continuació tractar-ne el contingut com sigui necessari. Per aquest motiu hem seleccionat les quatre capçaleres amb el selector <code>thead th:nth-child(<em>n</em>)</code> ({{cssxref(":nth-child")}}) («selecciona l’<em>n</em>-èsim fill d’una seqüència que és un element {{htmlelement("th")}} que hi ha dins d'un element {{htmlelement("thead")}}») i els hem assignat una amplada en percentatge. L'amplada de la columna sencera segueix l'amplada de la capçalera, de manera que és una bona manera de configurar la mida de les columnes de la taula. Chris Coyier analitza aquesta tècnica amb més detall en <a href="https://css-tricks.com/fixing-tables-long-strings/">Fixed table layouts</a>.<br> + <br> + Hem emparellat això amb una amplada ({{cssxref("width")}}) del 100%, que significa que la taula ocuparà tota l’amplada del contenidor en què estigui continguda i serà molt adaptativa (tot i que encara t’ho hauries de treballar una mica si vols aconseguir que la taula presenti un bon aspecte amb amplades de pantalla estretes).</li> + <li>Assignar un valor <code>collapse</code> a la propietat {{cssxref ("border-collapse")}} és una bona pràctica habitual en qualsevol intent d’aplicació d’estil a una taula. Quan es configuren les vores dels elements de la taula, per defecte totes deixen un espai entre elles, com es mostra a la imatge següent: <img alt="" src="https://mdn.mozillademos.org/files/13068/no-border-collapse.png" style="display: block; margin: 0 auto;">Això no resulta gaire agradable (o potser és l'aspecte que cerques, qui sap?). Amb la declaració <code>border-collapse: collapse;</code>, les vores s’ajunten en una de sola, i l’aspecte és més polit: <img alt="" src="https://mdn.mozillademos.org/files/13066/border-collapse.png" style="display: block; margin: 0 auto;"></li> + <li>Hem afegit una vora ({{cssxref("border")}}) al voltant de tota la taula, i més endavant també posarem vores al voltant de la capçalera de la taula i del peu de pàgina; ho fem perquè fa molt estrany si no hi ha una vora exterior que englobi tota la taula; pot resultar descontextualitzada i poden quedar-hi buits.</li> + <li>Hem establert una mica de farciment ({{cssxref("padding")}}) en els elements {{htmlelement("th")}} i {{htmlelement("td")}}; això proporciona als elements de dades un espai perquè respirin, i millora força la llegibilitat de la taula.</li> +</ul> + +<p>En aquest punt, la nostra taula presenta un aspecte molt més polit:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13070/table-with-spacing.png" style="display: block; margin: 0 auto;"></p> + +<h3 id="Una_mica_de_tipografia_senzilla">Una mica de tipografia senzilla</h3> + +<p>Ara organitzarem una mica el nostre text.</p> + +<p>En primer lloc hem trobat un tipus de lletra a <a href="https://www.google.com/fonts">Google Fonts</a> que resulta adequat per a una taula sobre bandes punk. Si vols, hi pots anar i triar-ne una altra; només cal que substitueixis l'element {{htmlelement("link")}} que et proporcionem i la declaració {{cssxref("font-family")}} personalitzada que Google Fonts et proporciona.</p> + +<p>Afegeix l’element {{htmlelement("link")}} següent a la capçalera (<code>head</code>) de l’HTML, just a sobre de l'element <code><link></code>:</p> + +<pre class="brush: html notranslate"><link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'></pre> + +<p><span id="result_box" lang="ca">A continuació afegeix al teu fitxer <code>style.css</code> el CSS següent, a sota del que has afegit abans</span>:</p> + +<pre class="brush: css notranslate">/* typography */ + +html { + font-family: 'helvetica neue', helvetica, arial, sans-serif; +} + +thead th, tfoot th { + font-family: 'Rock Salt', cursive; +} + +th { + letter-spacing: 2px; +} + +td { + letter-spacing: 1px; +} + +tbody td { + text-align: center; +} + +tfoot th { + text-align: right; +}</pre> + +<p>Fins aquí no hi ha res que sigui específicament de taules; en general, configurem un estil de lletra que en faciliti la lectura:</p> + +<ul> + <li>Hem configurat una llista de tipus de lletra sans-serif per al text general; aquesta elecció és purament d’estil. També hem configurat el tipus de lletra personalitzat per als elements de capçalera {{htmlelement("thead")}} i {{htmlelement("tfoot")}}, que hi dona un simpàtic aspecte <em>grungy punky</em>.</li> + <li>Hem establert un espai d’interlineat ({{cssxref("letter-spacing")}}) a les capçaleres i les cel·les, perquè creiem que afavoreix la llegibilitat. Una vegada més, es tracta sobretot d’una qüestió d’estil.</li> + <li>Hem centrat el text de les cel·les de la taula que hi ha dins de {{htmlelement("tbody")}} perquè estiguin alineats amb els de les capçaleres, perquè de manera predeterminada les cel·les tenen assignat un valor {{cssxref("text-align")}} <code>left</code>, i les capçaleres un valor <code>center</code>; però en general sembla que té un aspecte més agradable si els textos dels dos tipus d’element estan alineats de la mateixa manera; el gruix de la negreta que té la lletra de les capçaleres per defecte és prou per a diferenciar-ne l'aspecte.</li> + <li>Hem alineat a la dreta el text de la capçalera {{htmlelement("tfoot")}} perquè tingui una associació visual més adequada amb la dada que s’hi correspon.</li> +</ul> + +<p>El resultat presenta un aspecte una mica més net:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13072/table-with-typography.png" style="display: block; margin: 0 auto;"></p> + +<h3 id="Gràfics_i_colors"><span id="result_box" lang="ca">Gràfics i colors</span></h3> + +<p>Ara passem als gràfics i els colors! Com que la taula desprèn un aire i una actitud punk, hi hem de donar un potent estil marcat. Ara bé, no totes les teves taules hauran de tenir un aspecte tan extrem, també pots fer alguna cosa més subtil i amb més bon gust.</p> + +<p>Comença per afegir al teu fitxer <code>style.css</code> el CSS següent, també al final de tot:</p> + +<pre class="brush: css notranslate">thead, tfoot { + background: url(leopardskin.jpg); + color: white; + text-shadow: 1px 1px 1px black; +} + +thead th, tfoot th, tfoot td { + background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5)); + border: 3px solid purple; +} +</pre> + +<p>Fins aquí tampoc no hi ha res que sigui específicament de taules, però val la pena observar alguns aspectes.</p> + +<p>Hem afegit una imatge de fons amb la propietat {{cssxref("background-image")}} a les capçaleres {{htmlelement("thead")}} i {{htmlelement("tfoot")}} i hem canviat el color ({{cssxref("color")}}) de tot el text de les capçaleres i el peu de pàgina pel blanc (i hi hem afegit una ombra amb {{cssxref("text-shadow")}}), i així resulta més llegible. Sempre t’has d’assegurar que el text contrasta prou amb el fons i es pot llegir bé.</p> + +<p>També hem afegit un degradat lineal en els elements {{htmlelement("th")}} i {{htmlelement ("td")}} de les capçaleres i el peu de pàgina per a obtenir-hi una mica de textura, i hem donat a aquests elements una fantàstica vora porpra. Resulta útil disposar diversos elements imbricats i poder superposar els estils de capa un damunt de l'altre. Sí, hauríem pogut posar la imatge de fons i el degradat lineal dels elements {{htmlelement("thead")}} i {{htmlelement("tfoot")}} amb la tècnica de les múltiples imatges de fons, però hem decidit fer-ho per separat perquè els navegadors antics no admeten imatges de fons múltiples ni degradats lineals.</p> + +<h4 id="Ratlles_de_zebra">Ratlles de zebra</h4> + +<p>Hem volgut dedicar una secció independent a mostrar-te com s’implementen les <strong>ratlles de zebra</strong> (<strong>zebra stripes)</strong>, que alternen files de color que faciliten l’anàlisi i la llegibilitat de les diferents files de dades de la taula. Afegeix el CSS següent a la part inferior del teu fitxer <code>style.css</code>:</p> + +<pre class="brush: css notranslate">tbody tr:nth-child(odd) { + background-color: #ff33cc; +} + +tbody tr:nth-child(even) { + background-color: #e495e4; +} + +tbody tr { + background-image: url(noise.png); +} + +table { + background-color: #ff33cc; +}</pre> + +<ul> + <li>Abans has vist el selector {{cssxref(":nth-child")}}, que hem utilitzat per a seleccionar elements fills específics. També hi pots donar una fórmula com a paràmetre, i aleshores es selecciona una seqüència d'elements. La fórmula <code>2n-1</code> seleccionaria tots els fills imparells (1, 3, 5, etc.), i la fórmula <code>2n</code> seleccionaria tots els fills parells (2, 4, 6, etc.). En el nostre codi hem utilitzat les paraules clau <code>odd</code> i <code>even</code>, que fan exactament el mateix que aquelles fórmules. En aquest cas, donem a les files parelles i imparelles uns (esborronadors) colors diferents.</li> + <li>També hem afegit un mosaic de fons que es repeteix en totes les files del cos; només una mica de soroll (un <code>.png</code> semitransparent amb un xic de distorsió visual) que proporciona un pèl de textura.</li> + <li>Per acabar, hem donat a la taula sencera un color de fons sòlid perquè els navegadors que no admeten el selector <code>:nth-child</code> encara tinguin un fons per a les files del cos.</li> +</ul> + +<p>Aquesta explosió de color dona com a resultat el següent:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13074/table-with-color.png" style="display: block; margin: 0 auto;"></p> + +<p>Bé, això podria resultar una mica excessiu i pot ser que no sigui del tot del teu gust, però el punt que volem tractar aquí és que les taules no tenen per què ser avorrides ni acadèmiques.</p> + +<h3 id="Aplicar_estil_al_títol_caption">Aplicar estil al títol (<em>caption</em>)</h3> + +<p>Encara podem fer una darrera cosa amb la nostra taula, aplicar estil al títol (<em>caption</em>). Afegeix el CSS següent a la part inferior del fitxer <code>style.css</code>:</p> + +<pre class="brush: css notranslate">caption { + font-family: 'Rock Salt', cursive; + padding: 20px; + font-style: italic; + caption-side: bottom; + color: #666; + text-align: right; + letter-spacing: 1px; +}</pre> + +<p>Aquí no hi ha res d’excepcional, tret de la propietat {{cssxref("caption-side")}}, a la qual hem donat un valor <code>bottom</code>. Això posa el títol (<em>caption</em>) a la part inferior de la taula, i amb les altres declaracions ens ofereix aquest aspecte final (consulta-ho en directe en el fitxer <a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html">punk-bands-complete.html</a>):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13076/table-with-caption.png" style="display: block; height: 357px; margin: 0px auto; width: 723px;"></p> + +<h2 id="Aprenentatge_actiu_Dissenya_la_teva_taula">Aprenentatge actiu: Dissenya la teva taula</h2> + +<p>En aquest punt, volem que prenguis el nostre HTML d'exemple (o fes-ne servir un de teu propi) i aplica-hi estil per a obtenir alguna cosa no tan cridanera i més refinada que la nostra taula.</p> + +<h2 id="Consells_ràpids_d’aplicació_d’estil_a_una_taula">Consells ràpids d’aplicació d’estil a una taula</h2> + +<p>Abans de continuar, hem pensat de proporcionar-te una llista breu dels punts més útils que hem exposat a dalt:</p> + +<ul> + <li>Fes el codi d’etiquetatge de la taula tan senzill com sigui possible i empra estructures de comportament flexible (p. ex., utilitza percentatges) per a aconseguir un disseny adaptatiu.</li> + <li>Aconsegueix un comportament de la taula més previsible amb la declaració {{cssxref("table-layout")}}<code>: fixed</code>, que et permet establir amb facilitat les amplades de columna a partir de configurar l’amplada ({{cssxref("width")}}) de les capçaleres ({{htmlelement ("th")}}).</li> + <li>Fes servir la declaració {{cssxref("border-collapse")}}<code>: collapse</code> per a ajuntar les vores dels elements de la taula en una sola línia i aconseguir un aspecte més net i fàcil de controlar.</li> + <li>Utilitza els elements {{htmlelement("thead")}}, {{htmlelement("tbody")}} i {{htmlelement("tfoot")}} per a dividir la taula en blocs lògics i obtenir més elements en què aplicar CSS, que et permetin aplicar estils per capes i sobreposar-les les unes sobre les altres, si cal.</li> + <li>Fes servir ratlles de zebra en files alternatives per a millorar la llegibilitat.</li> + <li>Utilitza la propietat {{cssxref("text-align")}} per a alinear el text dels elements {{htmlelement("th")}} i {{htmlelement("td")}}, i obtenir un aspecte més net i endreçat.</li> +</ul> + +<h2 id="Resum">Resum</h2> + +<p>Ara que deixem enrere l’aplicació d’estil a les taules, hem d’ocupar el temps en una altra cosa. L’article següent explica com depurar el CSS, com resoldre problemes com ara dissenys de pàgines web que no presenten l’aspecte que se n’espera, o propietats que no s’apliquen quan creus que ho haurien de fer.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}</p> diff --git a/files/ca/learn/css/building_blocks/the_box_model/index.html b/files/ca/learn/css/building_blocks/the_box_model/index.html new file mode 100644 index 0000000000..e0d11e7e76 --- /dev/null +++ b/files/ca/learn/css/building_blocks/the_box_model/index.html @@ -0,0 +1,343 @@ +--- +title: El model de caixa +slug: Learn/CSS/Building_blocks/The_box_model +translation_of: Learn/CSS/Building_blocks/The_box_model +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</div> + +<p>Tot el que hi ha en CSS té una caixa que ho envolta, i entendre aquestes caixes és clau per a poder crear dissenys amb CSS o alinear els elements amb altres elements. En aquest article analitzarem adequadament el <em>model de caixes CSS</em> perquè puguis dur a terme tasques de disseny de pàgines web més complexes amb una bona comprensió de la manera com funcionen, i en coneixerem la terminologia relacionada.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisits:</th> + <td>Coneixements bàsics d'informàtica, tenir el <a href="/ca/docs/Learn/Getting_started_with_the_web/Instal·lació_bàsica_programari">programari bàsic instal·lat</a>, coneixements bàsics de <a href="/ca/docs/Learn/Getting_started_with_the_web/Tractar_amb_arxius">treballar amb fitxers</a> i d'HTML (consulta la <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a>) i nocions de com funciona el CSS (consulta els <a href="/ca/docs/Learn/CSS/First_steps">Primers passos amb CSS</a>).</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Adquirir més informació sobre el model de caixes del CSS, què compon el model de caixes i com canviar al model de caixes alternatiu.</td> + </tr> + </tbody> +</table> + +<h2 id="Caixes_en_bloc_i_en_línia">Caixes en bloc i en línia</h2> + +<p>En CSS en general hi ha dos tipus de caixes: <strong>caixes de bloc</strong> i <strong>caixes de línia</strong>. Aquestes característiques fan referència a com es comporta la caixa en termes de flux de pàgina i en relació amb altres caixes de la pàgina:</p> + +<p>Si una caixa es defineix com un bloc, es comporta de les maneres següents:</p> + +<ul> + <li>La caixa crea un salt de línia i genera una línia nova.</li> + <li>La caixa s’estén en la direcció de la línia i omple tot l’espai disponible de l’element que la conté. En la majoria dels casos, això significa que la caixa s’amplia tant com el seu contenidor i omple el 100% de l’espai disponible.</li> + <li>Es respecten les propietats d’amplada ({{cssxref("width")}}) i alçada ({{cssxref("height")}}).</li> + <li>El farciment, el marge i la vora allunyen la caixa de la resta d’elements.</li> +</ul> + +<p>Si no és que decidim canviar el tipus de visualització a <code>inline</code> (en línia), els elements com ara els títols d’encapçalament (per exemple, <code><h1></code>) o els paràgrafs, <code><p></code>, utilitzen per defecte el tipus de visualització <code>block</code>.</p> + +<p>Si una caixa té un tipus de visualització exterior <code>inline</code>, llavors:</p> + +<ul> + <li>La caixa no crea un salt de línia i no genera una línia nova.</li> + <li>Les propietats {{cssxref("width")}} i {{cssxref("height")}} no s'apliquen.</li> + <li>El farciment, el marge i les vores verticals s’apliquen, però no fan que la resta de caixes en línia s'allunyin.</li> + <li>El farciment, el marge i les vores horitzontals s’apliquen i fan que la resta de caixes en línia s'allunyin.</li> +</ul> + +<p>Els elements <code><a></code>, que s’usa per als enllaços, <code><span></code>, <code><em></code> i <code><strong></code> són altres exemples d’elements que es mostren en línia per defecte.</p> + +<p>El tipus de caixa que s’aplica a un element està definit pels valors de la propietat {{cssxref("display")}}, com <code>block</code> i <code>inline</code>, i es relaciona amb el valor <strong>exterior</strong> (<em>outer</em>) de <code>display</code>.</p> + +<h2 id="A_part_tipus_de_visualització_interior_i_exterior">A part: tipus de visualització interior i exterior</h2> + +<p>Aquest és un bon moment per explicar també els tipus de visualització <strong>inner</strong> i <strong>outer</strong>. Com ja hem esmentat, les caixes CSS tenen un tipus de visualització <em>outer</em> (exterior), que especifica si la caixa es comporta com un element de bloc o de línia.</p> + +<p>Les caixes també tenen un tipus de visualització <em>interna</em> (<em>inner</em>), que determina com es disposen els elements dins d'aquesta caixa. Per defecte, els elements que hi ha a l’interior d’una caixa es disposen segons el <strong><a href="/ca/docs/Learn/CSS/Disseny_CSS/Flux_normal">flux normal</a></strong>, que significa que es comporten igual que qualssevol altres elements de bloc i de línia (com s’explica més amunt).</p> + +<p>Tanmateix, podem canviar el tipus de visualització <code>inner</code> (interior) amb els valors de <code>display</code>, com ara <code>flex</code>. Si en un element establim <code>display: flex;</code>, el tipus de visualització <code>outer</code> (exterior) és <code>block</code>, però el tipus de visualització <code>inner</code> es canvia per <code>flex</code>. Els fills directes d’aquesta caixa es converteixen en elements flexibles i es disposen d’acord amb les regles que s’especifiquen en les especificacions de <a href="/ca/docs/Learn/CSS/Disseny_CSS/Flexbox">Flexbox</a>, que veurem més endavant.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Per obtenir més informació sobre els valors de la visualització i sobre com funcionen les caixes de bloc i de línia, consulta la guia MDN per a les <a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Disposicions de bloc i de línia</a>.</p> +</div> + +<p>Quan avancis a l'article Disseny de pàgines web amb CSS, trobaràs <code>flex</code> i els diversos valors <code>inner</code> que pots donar a les teves caixes, per exemple, <code><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">grid</a></code>.</p> + +<p>Tanmateix, la disposició de bloc i de línia és la manera com es comporten les coses a la web per defecte. Com hem dit abans, de vegades es coneix com el <em>flux normal</em>, perquè sense cap altra instrucció, les nostres caixes es comporten com elements de bloc o de línia.</p> + +<h2 id="Exemples_de_diferents_tipus_de_visualització">Exemples de diferents tipus de visualització</h2> + +<p>Avancem i donem una ullada a uns quants exemples. A continuació es mostren tres elements HTML diferents, tots ells amb una visualització exterior de tipus <code>block</code>. El primer és un paràgraf amb una vora que s’ha afegit amb CSS. El navegador el representa com una caixa amb un comportament de tipus bloc, de manera que el paràgraf comença en una línia nova i ocupa tota l'amplada disponible.</p> + +<p>El segon és una llista amb una disposició de tipus <code>display: flex</code>, que estableix una disposició de tipus flex per als elements de dins del contenidor, però la llista en si mateixa és una caixa que té un comportament de tipus bloc i, com el paràgraf, ocupa tota l’amplada del contenidor i crea un salt de línia que genera una línia nova.</p> + +<p>A sota hi ha un paràgraf a nivell de bloc, dins del qual hi ha dos elements <code><span></code>. Aquests elements normalment tindrien un comportament de tipus <code>inline</code>, però un dels elements té una classe amb comportament de tipus bloc i l'hem configurada amb la declaració <code>display: block</code>.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}} </p> + +<p>Podem observar com es comporten els elements <code>inline</code> en l'exemple següent. Els elements <code><span></code> del primer paràgraf són elements de línia per defecte i no creen salts de línia nous.</p> + +<p>També hi ha un element <code><ul></code> que es pot configurar amb <code>display: inline-flex</code>, que crea una caixa amb comportament de línia al voltant d'alguns elements de tipus flex.</p> + +<p>Per acabar, hi ha dos paràgrafs configurats amb <code>display: inline</code>. El contenidor de línia amb comportament flex i els paràgrafs es combinen en una sola línia, en lloc de generar línies noves, com ho farien si es configuraven com elements de bloc.</p> + +<p><strong>En l'exemple pots alternar entre aquests modes de visualització si canvies de <code>display: inline</code> a <code>display: block</code> o de <code>display: inline-flex</code> a <code>display: flex</code>.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}} </p> + +<p>En articles posteriors trobaràs coses com ara el comportament de tipus flex; de moment has de recordar que canviar el valor de la propietat <code>display</code> pot canviar el tipus de visualització exterior d’una caixa del comportament de bloc al de línia, i això canvia la manera com es distribueix al costat d’altres elements en la composició de la pàgina web.</p> + +<p>A la resta de l’article ens centrarem en el tipus de visualització exterior.</p> + +<h2 id="Què_és_el_model_de_caixes_de_CSS">Què és el model de caixes de CSS?</h2> + +<p>El model complet de caixes CSS s'aplica a les caixes amb comportament de bloc; les caixes amb comportament de línia només utilitzen una mica del comportament definit en el model de caixes. El model defineix com funcionen conjuntament les diferents parts que constitueixen una caixa (el marge, la vora, el farciment i el contingut) per a crear una caixa que pots veure a la pàgina web. Per complicar-ho encara una mica més, hi ha un model de caixes estàndard i un model de caixes alternatiu.</p> + +<h3 id="Parts_duna_caixa">Parts d'una caixa</h3> + +<p>Per crear una caixa amb comportament de bloc amb CSS tenim:</p> + +<ul> + <li>El <strong>contingut de la caixa</strong> (o <em>content box</em>): L'àrea on es mostra el contingut, que es pot dimensionar amb propietats com {{cssxref("width")}} i {{cssxref("height")}}.</li> + <li>El <strong>farciment de la caixa</strong> (o <em>padding box</em>): El farciment s’ubica al voltant del contingut com un espai en blanc; la mida es pot controlar amb la propietat {{cssxref("padding")}} i d’altres de relacionades.</li> + <li>La <strong>vora de la caixa</strong> (o <em>border box</em>): La vora envolta el contingut i el farciment. La mida i l’estil es poden controlar amb la propietat {{cssxref("border")}} i d’altres de relacionades.</li> + <li>El <strong>marge de la caixa</strong> (o <em>margin box</em>): El marge és la capa més externa, embolica el contingut, el farciment i la vora com espai en blanc entre la caixa i la resta d’elements. La mida es pot controlar amb la propietat {{cssxref("margin")}} i d’altres de relacionades.</li> +</ul> + +<p>El diagrama següent mostra aquestes capes:</p> + +<p><img alt="Diagrama del model de caixes" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p> + +<h3 id="El_model_de_caixes_CSS_estàndard">El model de caixes CSS estàndard</h3> + +<p>En el model de caixes estàndard, si es dona a la caixa els atributs <code>width</code> i <code>height</code>, això defineix l'amplada i l'alçada del <em>contingut de la caixa</em>. A continuació s'afegeix a l'amplada i l'alçada qualsevol farciment i vora, i això dona la mida total de la caixa. Això es mostra a la imatge de sota.</p> + +<p>Suposem que la caixa té el CSS definit pels atributs <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code> i <code>padding</code> següents:</p> + +<pre class="brush: css notranslate">.box { + width: 350px; + height: 150px; + margin: 10px; + padding: 25px; + border: 5px solid black; +} +</pre> + +<p>L’espai que ocupa la nostra caixa segons el model de caixa estàndard és de 410 px (350 + 25 + 25 + 5 + 5) i l’alçada de 210 px (150 + 25 + 25 + 5 + 5), perquè l'àrea de farciment i la vora s'afegeixen a l'amplada útil que la caixa utilitza per al contingut.</p> + +<p><img alt="Exemple de mida d’una caixa en el model de caixa estàndard." src="https://mdn.mozillademos.org/files/16559/standard-box-model.png" style="height: 300px; width: 500px;"></p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: El marge no compta per a la mida real de la caixa: òbviament afecta l’espai total que la caixa ocupa en la pàgina, però només l’espai de fora de la caixa. L’àrea de la caixa arriba fins a la vora: no s’estén fins al marge.</p> +</div> + +<h3 id="El_model_de_caixes_CSS_alternatiu">El model de caixes CSS alternatiu</h3> + +<p>Pots pensar que resulta una mica incòmode haver de sumar la vora i el farciment per a obtenir la mida real de la caixa, i tens raó! Per aquest motiu, el CSS va introduir un model de caixes alternatiu poc després de crear el model de caixes estàndard. Amb aquest model, qualsevol amplada de caixa és l'amplada de caixa visible en la pàgina; per tant, l'amplada de l'àrea de contingut és aquella amplada menys les amplades del farciment i de la vora. El mateix CSS que hem fet servir en l'exemple anterior donaria el resultat següent (amplada = 350 px, alçada = 150 px).</p> + +<p><img alt="Exemple de mida de caixa quan s’utilitza el model de caixes alternatiu." src="https://mdn.mozillademos.org/files/16557/alternate-box-model.png" style="height: 240px; width: 440px;"></p> + +<p>Per defecte, els navegadors utilitzen el model de caixes estàndard. Si vols activar el model alternatiu per a un element, ho pots fer amb la configuració de <code>box-sizing: border-box</code>. Amb això dius al navegador que prengui la vora de la caixa com la zona definida per totes les mides que has definit.</p> + +<pre class="brush: css notranslate"><code>.box { + box-sizing: border-box; +} </code></pre> + +<p>Si vols que tots els teus elements utilitzin el model de caixes alternatiu, elecció habitual entre els desenvolupadors, configura la propietat <code>box-sizing</code> en l’element <code><html></code>, i a continuació configura tots els altres elements perquè heretin aquest valor, com es veu en l'exemple següent. Si vols entendre el concepte que hi ha al darrere, consulta l'article <a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">sobre trucs de CSS sobre les mides de les caixes</a>.</p> + +<pre class="brush: css notranslate"><code class="language-css"><span class="selector token">html</span> <span class="punctuation token">{</span> + <span class="property token">box-sizing</span><span class="punctuation token">:</span> border-box<span class="punctuation token">;</span> +<span class="punctuation token">}</span> +<span class="selector token">*, *<span class="pseudo-element token">::before</span>, *<span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span> + <span class="property token">box-sizing</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Una dada curiosa és que Internet Explorer solia treballar per defecte amb el model de caixes alternatiu i no tenia cap mecanisme disponible per canviar-lo.</p> +</div> + +<h2 id="Jugar_amb_els_models_de_caixes">Jugar amb els models de caixes</h2> + +<p>En l’exemple següent pots veure dues caixes. Totes dues tenen una classe <code>.box</code>, que els proporciona els mateixos valors de <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code> i <code>padding</code>. L’única diferència és que la segona caixa s’ha configurat perquè utilitzi el model de caixes alternatiu.</p> + +<p><strong>Pots canviar la mida de la segona caixa (afegint CSS a la classe <code>.alternate</code>) i fer-la coincidir amb l'alçada i l'amplada de la primera caixa?</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} </p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Pots trobar la solució d’aquesta activitat <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model">aquí</a>.</p> +</div> + +<h3 id="Utilitza_les_DevTools_del_navegador_per_veure_el_model_de_caixes">Utilitza les DevTools del navegador per veure el model de caixes</h3> + +<p>Les <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">eines de desenvolupador dels navegadors</a> poden facilitar la comprensió del model de caixes. Si inspecciones un element amb les DevTools del Firefox, pots veure la mida que té l’element, i el marge, l’àrea de farciment i la vora. Fer una inspecció com aquesta d’un element és una bona manera de saber si la caixa té realment la mida que et penses que té.</p> + +<p><img alt="Inspecció d’un element segons el model de caixes amb Firefox DevTools" src="https://mdn.mozillademos.org/files/16560/box-model-devtools.png" style="height: 683px; width: 1150px;"></p> + +<h2 id="Marges_farciments_i_vores">Marges, farciments i vores</h2> + +<p>Ja has vist les propietats {{cssxref("margin")}}, {{cssxref("padding")}} i {{cssxref("border")}} en l'exemple anterior. En aquest exemple utilitzem les propietats abreviades, que ens permeten establir els quatre costats de la caixa alhora. Aquestes propietats abreviades també tenen propietats equivalents sense abreviar, que permeten controlar els diferents costats de la caixa individualment.</p> + +<p>Explorem aquestes propietats amb més detall.</p> + +<h3 id="Marges">Marges</h3> + +<p>El marge és un espai invisible que hi ha al voltant de la caixa. Manté la resta d’elements lluny de la caixa. Els marges poden tenir valors positius o negatius. Si estableixes un marge negatiu en un costat de la caixa, altres elements de la caixa s’hi poden superposar. Tant si utilitzes el model de caixes estàndard com el model alternatiu, el marge se suma sempre a la mida especificada per a la caixa visible.</p> + +<p>Podem controlar tots els marges d’un element alhora amb la propietat {{cssxref("margin")}}, o bé per cada costat de manera individual amb les propietats equivalents:</p> + +<ul> + <li>{{cssxref("margin-top")}}</li> + <li>{{cssxref("margin-right")}}</li> + <li>{{cssxref("margin-bottom")}}</li> + <li>{{cssxref("margin-left")}}</li> +</ul> + +<p><strong>Prova de canviar els valors del marge en l’exemple següent i observa com s’empeny la caixa a causa de l’espai que es crea o s’elimina (si és un marge negatiu) entre aquest element i l’element que conté.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}} </p> + +<h4 id="Col·lapse_del_marge">Col·lapse del marge</h4> + +<p>Un punt clau per a entendre els marges és el concepte de col·lapse del marge. Quan els marges de dos elements es toquen, es combinen i es converteixen en un sol marge, que és la mida del marge més gran. Si un dels negatius (o ho són tots dos), la quantitat de marge negatiu és resta del total.</p> + +<p>En l’exemple següent hi ha dos paràgrafs. El paràgraf superior té un <code>margin-bottom</code> de 50 píxels. El segon paràgraf té un <code>margin-top</code> de 30 píxels. Els marges col·lapsen, de manera que el marge efectiu entre les caixes és de 50 píxels, i no el total dels dos marges.</p> + +<p><strong>Prova d’establir la propietat <code>margin-top</code> del segon paràgraf a 0. El marge visible entre els dos paràgrafs no canvia: conserva els 50 píxels que s’han establert per al <code>bottom-margin</code> del primer paràgraf.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}} </p> + +<p>Hi ha diverses normes que dicten quan els marges col·lapsen i quan no. Per a més informació, consulta amb detall la pàgina sobre el <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">col·lapse del marge</a>. De moment l'important és que recordis que els marges col·lapsen. Si crees espai amb marges i no obtens l’espai que esperes, és probable que tinguis un col·lapse de marges.</p> + +<h3 id="Vores">Vores</h3> + +<p>La vora s’estableix entre el marge i el farciment d'una caixa. Si empres el model de caixes estàndard, la mida de la vora s’afegeix a les de <code>width</code> i <code>height</code> de la caixa. Si utilitzes el model de caixes alternatiu, la mida de la vora fa més petita la caixa de contingut, perquè ocupa una mica de les <code>width</code> i <code>height</code> disponibles.</p> + +<p>Les vores ofereixen moltes possibilitats de dissenys: hi ha quatre vores i cada vora pot tenir un estil, una amplada i un color, que podem definir.</p> + +<p>Pots definir l'amplada, l'estil o el color de les quatre vores alhora amb la propietat {{cssxref("border")}}.</p> + +<p>Per establir propietats diferents per a cada costat de vora, pots utilitzar:</p> + +<ul> + <li>{{cssxref("border-top")}}</li> + <li>{{cssxref("border-right")}}</li> + <li>{{cssxref("border-bottom")}}</li> + <li>{{cssxref("border-left")}}</li> +</ul> + +<p>Per a establir l'amplada, l’estil o el color de tots els costats alhora, utilitza les propietats següents:</p> + +<ul> + <li>{{cssxref("border-width")}}</li> + <li>{{cssxref("border-style")}}</li> + <li>{{cssxref("border-color")}}</li> +</ul> + +<p>Per a definir l'amplada, l'estil o el color d'un sol costat, pots emprar una de les propietats següents:</p> + +<ul> + <li>{{cssxref("border-top-width")}}</li> + <li>{{cssxref("border-top-style")}}</li> + <li>{{cssxref("border-top-color")}}</li> + <li>{{cssxref("border-right-width")}}</li> + <li>{{cssxref("border-right-style")}}</li> + <li>{{cssxref("border-right-color")}}</li> + <li>{{cssxref("border-bottom-width")}}</li> + <li>{{cssxref("border-bottom-style")}}</li> + <li>{{cssxref("border-bottom-color")}}</li> + <li>{{cssxref("border-left-width")}}</li> + <li>{{cssxref("border-left-style")}}</li> + <li>{{cssxref("border-left-color")}}</li> +</ul> + +<p><strong>En l'exemple següent hem utilitzat diverses propietats abreviades i sense abreviar per a crear vores. Juga amb les diferents propietats i comprova que n’entens el funcionament. Les pàgines de MDN sobre les propietats de les vores proporcionen informació sobre els diversos estils de vora que pots triar.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}} </p> + +<h3 id="Farciment">Farciment</h3> + +<p>El farciment es situa entre la vora i l’àrea de contingut. A diferència dels marges, no hi pot haver àrees de farciment negatives, de manera que el valor ha de ser 0 o un valor positiu. Qualsevol fons que apliques al teu element es mostra darrere de l'àrea de farciment, i normalment s'utilitza per a mantenir el contingut allunyat de la vora.</p> + +<p>Podem controlar l'àrea de farciment de cadascun dels costats d’un element amb la propietat {{cssxref("padding")}}, o bé cadascuna de les àrees de farciment de cada costat amb les propietats equivalents:</p> + +<ul> + <li>{{cssxref("padding-top")}}</li> + <li>{{cssxref("padding-right")}}</li> + <li>{{cssxref("padding-bottom")}}</li> + <li>{{cssxref("padding-left")}}</li> +</ul> + +<p><strong>Observa que si canvies els valors de farciment en la classe <code>.box</code> de l'exemple següent, canvia on comença el text en relació amb la caixa.</strong></p> + +<p><strong>També pots canviar el farciment en la classe <code>.container</code>, que deixa un espai entre el contenidor i la caixa. Pots canviar l'àrea de farciment de qualsevol element, i es fa un espai entre la vora i el que hi ha dins de l'element.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}} </p> + +<h2 id="El_model_de_caixes_i_les_caixes_amb_comportament_de_línia">El model de caixes i les caixes amb comportament de línia</h2> + +<p>Totes les opcions anteriors s'apliquen a les caixes amb comportament de bloc. Algunes de les propietats poden aplicar-se també a les caixes amb comportament de línia, com ara les creades per un element <code><span></code>.</p> + +<p>En l'exemple següent hi ha un <code><span></code> dins d'un paràgraf i hi hem aplicat els atributs <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code> i <code>padding</code>. Observa que l’amplada i l’alçada s’ignoren. Es respecta el marge, l'àrea de farciment i la vora, però no es canvia la relació de la resta de continguts amb la nostra caixa amb comportament de línia, i per tant l'àrea de farciment i la vora s’encavalquen amb altres paraules del paràgraf.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}} </p> + +<h2 id="Ús_de_display_inline-block">Ús de <code>display: inline-block</code></h2> + +<p>Hi ha un valor especial de l’atribut <code>display</code> que proporciona un punt intermedi entre <code>inline</code> i <code>block</code>. Això és útil per a situacions en què no vols que un article generi una línia nova, però vols que respecti l’amplada (<code>width</code>) i l’alçada (<code>height</code>) i evitar que es superposin.</p> + +<p>Un element <code>display: inline-block</code> constitueix un subconjunt dels elements de bloc que ja coneixem:</p> + +<ul> + <li>Es respecten les propietats <code>width</code> i <code>height</code>.</li> + <li><code>padding</code>, <code>margin</code> i <code>border</code> allunyen la resta d'elements de la caixa.</li> +</ul> + +<p>Tanmateix, no es genera una línia nova i només es fa més gran que el contingut si afegeixes explícitament les propietats <code>width</code> i <code>height</code>.</p> + +<p><strong>En l'exemple següent hem afegit al nostre element <code><span></code>la declaració <code>display: inline-block</code>. Fes la prova de canviar-ho per <code>display: block</code> o elimina del tot aquesta línia i observa quina diferència hi ha entre els dos models de visualització.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}} </p> + +<p>Això pot ser útil si vols donar a un enllaç una àrea sensible més gran amb <code>padding</code>. L’element <code><a></code> és un element de línia, com <code><span></code>; pots utilitzar <code>display: inline-block</code> per configurar l'àrea de farciment de manera que a un usuari li resulti més fàcil fer clic a l'enllaç.</p> + +<p>Això es veu amb força freqüència en les barres de navegació. La barra de navegació següent es mostra en una fila gràcies a la propietat <code>flexbox</code>, i hem afegit àrea de farciment a l'element <code><a></code> perquè volem canviar el color de fons (<code>background-color</code>) quan es passa per sobre de <code><a></code> amb el cursor del ratolí. El farciment sembla que s’encavalca amb la vora de l’element <code><ul></code>. Això és perquè <code><a></code> és un element en línia.</p> + +<p><strong>Afegeix <code>display: inline-block</code> a la regla amb el selector <code>.links-list a</code> i observa que aquest problema es soluciona amb l'àrea de farciment perquè els altres elements la respecten.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}}</p> + +<h2 id="Posa_a_prova_les_teves_habilitats">Posa a prova les teves habilitats</h2> + +<p>Hem vist moltes coses en aquest article. Recordes la informació més rellevant? Trobaràs més tests per verificar que has retingut la informació abans de seguir a <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks">Test your skills: The Box Model</a>.</p> + +<h2 id="Resum">Resum</h2> + +<p>Això és el que has d’entendre sobre el model de caixes. Potser voldràs tornar a aquest article en el futur si les mides de les caixes et confonen.</p> + +<p>En l’article següent analitzem com es poden emprar <a href="/ca/docs/Learn/CSS/Building_blocks/Fons_i_vores">fons i vores</a> per a fer més interessants les teves caixes.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="En_aquest_mòdul">En aquest mòdul</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">La cascada i l'herència</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Els selectors CSS</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Els selectors de tipus, de classe i d’ID</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Els selectors d'atribut</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Les pseudoclasses i els pseudoelements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Els combinadors</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El model de caixes</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fons i vores</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El tractament del text en diverses direccions</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordament dels continguts</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Els valors i les unitats</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">El dimensionament dels elements amb CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imatges, mèdia i controls de formulari</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estil a les taules</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depura el teu CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organitza el teu CSS</a></li> +</ol> diff --git a/files/ca/learn/css/building_blocks/valors_i_unitats_css/index.html b/files/ca/learn/css/building_blocks/valors_i_unitats_css/index.html new file mode 100644 index 0000000000..b754bd27ac --- /dev/null +++ b/files/ca/learn/css/building_blocks/valors_i_unitats_css/index.html @@ -0,0 +1,394 @@ +--- +title: Valors i unitats CSS +slug: Learn/CSS/Building_blocks/Valors_i_unitats_CSS +translation_of: Learn/CSS/Building_blocks/Values_and_units +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</div> + +<p>Totes les propietats CSS tenen assignats un valor o un conjunt de valors permesos; donar una ullada a qualsevol pàgina de propietats de MDN t'ajudarà a comprendre els valors que admet una propietat concreta. En aquest article veurem uns quants dels valors i unitats que són d’ús més habitual.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisits:</th> + <td>Coneixements bàsics d'informàtica, tenir el <a href="/ca/docs/Learn/Getting_started_with_the_web/Instal·lació_bàsica_programari">programari bàsic instal·lat</a>, coneixements bàsics de <a href="/ca/docs/Learn/Getting_started_with_the_web/Tractar_amb_arxius">treballar amb fitxers</a> i d'HTML (consulta la <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a>) i nocions de <a href="/ca/docs/Learn/CSS/First_steps">com funciona el CSS</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Adquirir informació sobre els diferents tipus de valors i unitats que s’utilitzen en les propietats CSS.</td> + </tr> + </tbody> +</table> + +<h2 id="Què_és_un_valor_CSS">Què és un valor CSS</h2> + +<p>En les especificacions CSS i en les pàgines de propietat d'aquest projecte MDN pots identificar amb facilitat els valors perquè estan escrits entre parèntesis angulars (<em>brackets</em>), per exemple <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code> o <code><a href="/en-US/docs/Web/CSS/length"><length></a></code>. Si veus que per a una propietat és vàlid el valor <code><color></code>, vol dir que per a aquesta propietat pots utilitzar com a valor qualsevol dels colors vàlids que apareixen a la pàgina de referència de la propietat <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code>.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Observa que també es fa referència als valors CSS com <em>tipus de dades</em>. Bàsicament són termes intercanviables: el terme <em>tipus de dada</em> és en realitat una altra manera de dir <em>valor</em>.</p> +</div> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Els valors CSS solen denotar-se entre parèntesis angulars per a diferenciar-los de les propietats CSS (per exemple, la propietat {{cssxref("color")}} i el tipus de dada <a href="/en-US/docs/Web/CSS/color_value"><color></a>). Encara que tant els tipus de dades CSS com els elements d’HTML es denoten entre parèntesis angulars, és poc probable que et confonguis perquè s'utilitzen en contextos molt diferents.</p> +</div> + +<p>En l'exemple següent hem establert el color del nostre títol de capçalera amb una paraula clau, i el fons amb la funció <code>rgb()</code>:</p> + +<pre class="brush: css notranslate"><code>h1 { + color: black; + background-color: rgb(197,93,161); +} </code> +</pre> + +<p>Un valor en CSS és una manera de definir una col·lecció de subvalors permesos. Això vol dir que si <code><color></code> és un valor permès, no t'has de demanar quins dels diferents tipus de valor del color es poden utilitzar: les paraules clau, els valors hexadecimals, les funcions <code>rgb()</code>, etc. Pots utilitzar <em>qualsevol</em> valor <code><color></code> disponible, sempre que sigui compatible amb el navegador. La pàgina de MDN et dona informació sobre la compatibilitat de cada valor amb els navegadors. Per exemple, consulta la pàgina <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code> i observa que en la secció de compatibilitat dels navegadors s’enumeren diferents tipus de valors de color i la compatibilitat que tenen amb els diferents navegadors.</p> + +<p>A continuació donem una ullada a uns quants dels tipus de valors i unitats amb què et pots trobar habitualment, amb exemples perquè facis proves amb diferents valors possibles.</p> + +<h2 id="Nombres_longituds_i_percentatges">Nombres, longituds i percentatges</h2> + +<p>En CSS pots trobar diversos tipus de dades numèriques. Totes les dades següents es classifiquen com a dades numèriques:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Tipus de dada</th> + <th scope="col">Descripció</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><a href="/en-US/docs/Web/CSS/integer"><integer></a></code></td> + <td>Un <code><integer></code> és un nombre enter, com ara <code>1024</code> o <code>-55</code>.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/CSS/number"><number></a></code></td> + <td>Un <code><number></code> representa un nombre decimal: pot tenir o no un punt de separació de xifres decimals, per exemple <code>0.255</code>, <code>128</code> o <code>-1.2</code>.</td> + </tr> + <tr> + <td><code><dimension></code></td> + <td>Una <code><dimension></code> és un valor <code><number></code> amb una unitat associada, per exemple <code>45deg</code> (graus), <code>5s</code> (segons) o <code>10px</code> (píxels). <code><dimension></code> és una categoria «paraigua» que inclou els tipus <code><a href="/en-US/docs/Web/CSS/length"><length></a></code>, <code><a href="/en-US/docs/Web/CSS/angle"><angle></a></code>, <code><a href="/en-US/docs/Web/CSS/time"><time></a></code> i <code><a href="/en-US/docs/Web/CSS/resolution"><resolution></a></code><a href="/en-US/docs/Web/CSS/resolution">.</a></td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/CSS/percentage"><percentage></a></code></td> + <td>Un <code><percentage></code> representa una proporció d'algun altre valor, per exemple el <code>50%</code>. Els valors de percentatge sempre són relatius a una altra quantitat, per exemple, la longitud d'un element en percentatge és relativa a la longitud de l'element pare.</td> + </tr> + </tbody> +</table> + +<h3 id="Longituds">Longituds</h3> + +<p>El tipus numèric que es troba amb més freqüència és <code><length></code>, per exemple <code>10px</code> (píxels) o <code>30em</code>. En CSS s'utilitzen dos tipus de longituds: relatives i absolutes. És important conèixer-ne la diferència per a entendre quines mides pot atènyer un element.</p> + +<h4 id="Unitats_de_longitud_absolutes">Unitats de longitud absolutes</h4> + +<p>Totes les unitats que es mostren a continuació són unitats de longitud <strong>absolutes</strong>: no són relatives a cap altre element i es considera que tenen sempre la mateixa mida.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Unitat</th> + <th scope="col">Nom</th> + <th scope="col">Equival a</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>cm</code></td> + <td>Centímetres</td> + <td>1cm = 96px/2,54</td> + </tr> + <tr> + <td><code>mm</code></td> + <td>Mil·límetres</td> + <td>1 mm = 1/10 d'1cm</td> + </tr> + <tr> + <td><code>Q</code></td> + <td>Quarts de mil·límetre</td> + <td>1T = 1/40 d'1cm</td> + </tr> + <tr> + <td><code>in</code></td> + <td>Polzades</td> + <td>1in = 2,54cm = 96px</td> + </tr> + <tr> + <td><code>pc</code></td> + <td>Piques</td> + <td>1pc = 1/16 d'1"</td> + </tr> + <tr> + <td><code>pt</code></td> + <td>Punts</td> + <td>1pt = 1/72a d'1"</td> + </tr> + <tr> + <td><code>px</code></td> + <td>Píxels</td> + <td>1px = 1/96a d'1"</td> + </tr> + </tbody> +</table> + +<p>La majoria d'aquests valors són més útils quan s'utilitzen en una sortida en format imprès, més que no en una sortida per pantalla. Per exemple, la pantalla no s’acostuma a mesurar en <code>cm</code> (centímetres). Normalment, les úniques unitats que es fan servir per a la pantalla són els píxels (<code>px</code>).</p> + +<h4 id="Unitats_de_longitud_relatives">Unitats de longitud relatives</h4> + +<p>Les unitats de longitud relatives són unitats que es prenen en relació amb un altre element, potser la mida de la lletra o la mida de la finestra gràfica. L’avantatge d’utilitzar unitats relatives és que amb una planificació acurada pots definir a escala la mida del text o d’altres elements de la pàgina. A la taula següent pots trobar algunes de les unitats que són més útils per al desenvolupament web.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Unitat</th> + <th scope="col">Relativa a</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>em</code></td> + <td> + <p>La mida de la lletra de l’element pare, en el cas de propietats tipogràfiques como ara {{cssxref("font-size")}}, i la mida de la font del propi element, en el cas d'altres propietats com {{cssxref("width")}}.</p> + </td> + </tr> + <tr> + <td><code>ex</code></td> + <td>L’altura x de la lletra de l'element.</td> + </tr> + <tr> + <td><code>ch</code></td> + <td>La mesura d'avanç (amplada) del glif «0» del tipus de lletra de l'element.</td> + </tr> + <tr> + <td><code>rem</code></td> + <td>La mida de la lletra de l’element arrel.</td> + </tr> + <tr> + <td><code>lh</code></td> + <td>L’alçada de línia de l’element.</td> + </tr> + <tr> + <td><code>vw</code></td> + <td>L’1% de l'amplada de la finestra gràfica.</td> + </tr> + <tr> + <td><code>vh</code></td> + <td>L’1% de l'alçada de la finestra gràfica.</td> + </tr> + <tr> + <td><code>vmin</code></td> + <td>L’1% de la dimensió més petita de la finestra gràfica.</td> + </tr> + <tr> + <td><code>vmax</code></td> + <td>L’1% de la dimensió més gran de la finestra gràfica.</td> + </tr> + </tbody> +</table> + +<h4 id="Un_exemple_il·lustratiu">Un exemple il·lustratiu</h4> + +<p>En l'exemple següent pots observar com es comporten algunes unitats de longitud relativa i absoluta. La primera caixa té una amplada ({{cssxref("width")}}), establerta en píxels. Com que és una unitat absoluta, aquesta amplada roman sempre igual, independentment d’altres canvis.</p> + +<p>La segona caixa té una amplada fixa establerta en unitats <code>vw</code> (amplada de la finestra gràfica). Aquest valor és relatiu a l'amplada de la finestra gràfica; així, 10vw és un 10 per cent de l'amplada de la finestra gràfica. Si canvia l’amplada de la finestra del navegador, la mida de la caixa ha de canviar, però aquí no et funcionarà perquè aquest exemple està incrustat a la pàgina amb <code><a href="/ca/docs/Web/HTML/Element/iframe"><iframe></a></code>. Si vols veure-ho en acció, has d’<a href="https://mdn.github.io/css-examples/learn/values-units/length.html">obrir l’exemple en una pestanya nova del teu navegador</a>.</p> + +<p>La tercera caixa utilitza unitats <code>em</code>. Aquestes unitats són relatives a la mida de la lletra. Hem establert una mida de lletra d'<code>1em</code> en l’element {{htmlelement("div")}} que conté una classe <code>.wrapper</code>. Canvia aquest valor per <code>1,5em</code> i observa que la mida de la lletra de tots els elements augmenta, però només augmenta l’amplada de l’últim element, perquè l’amplada és relativa a la mida de la lletra.</p> + +<p>Després de seguir les instruccions anteriors, juga una mica més amb els valors i observa què hi obtens.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}</p> + +<h4 id="Unitats_em_i_rem">Unitats <code>em</code> i <code>rem</code></h4> + +<p>Les unitats <code>em</code> i <code>rem</code> són les dues longituds relatives que és probable que et trobis amb més freqüència per a dimensionar elements, des de caixes fins a text. Val la pena entendre com funcionen i en què es diferencien, sobretot quan comences a introduir-te en temes més complexos, com ara <a href="/ca/docs/Learn/CSS/Estilitzar_text">aplicar estil al text</a> o el <a href="/ca/docs/Learn/CSS/Disseny_CSS">disseny de pàgines web amb CSS</a>. T’ho mostrem a continuació amb un exemple.</p> + +<p>L’HTML d’aquest exemple consisteix en dos blocs de llistes imbricades: hi ha tres llistes en total i tots dos blocs tenen el mateix HTML. L’única diferència és que en el primer bloc hi ha una classe <em>em</em>, i en el segon una classe <em>rem</em>.</p> + +<p>Per començar, establim la mida de la lletra de l’element <code><html></code> a 16px.</p> + +<p><strong>Breument, la unitat <em>em</em> fa referència a «la mida de lletra de l'element pare»</strong>. Els elements {{htmlelement("li")}} que hi ha dins dels elements {{htmlelement("ul")}} amb una classe <code>em</code> hereten la mida de l’element pare, de manera que en cada nivell d’imbricació successiu la mida de la lletra augmenta progressivament perquè en cadascun hi ha una mida de lletra establerta en <code>1.3em</code> (1,3 vegades la mida de la lletra de l’element pare).</p> + +<p><strong>Breument, la unitat <em>rem</em> fa referència a «la mida de lletra de l'element arrel»</strong> (els rem estàndard es corresponen amb l’<code>em</code> de l’arrel). Els elements {{htmlelement("li")}} dins dels elements {{htmlelement("ul")}} amb una classe <code>rem</code> prenen la mida de l'element arrel (<code><html></code>). Això significa que no augmenten en cada nivell d’imbricació successiu.</p> + +<p>Tanmateix, observa que si canvies la mida de la lletra (<code>font-size</code>) de l’element <code><html></code> amb el CSS, canvia tot el que hi està relacionat, tant els <code>rem</code> com els <code>em</code>.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} </p> + +<h3 id="Percentatges">Percentatges</h3> + +<p>En molts casos, un percentatge és tractat de la mateixa manera que una longitud. La qüestió amb els percentatges és que sempre es defineixen en relació amb algun altre valor. Per exemple, si defineixes la mida de la lletra (<code>font-size</code>) d'un element com un percentatge, aquesta serà un percentatge del valor de <code>font-size</code> de l’element pare. Si fas servir un percentatge per a un valor de l’amplada (<code>width</code>), serà un percentatge del valor de <code>width</code> de l’element pare.</p> + +<p>En l'exemple següent, les dues caixes amb la mida especificada en unitats de percentatge i les dues caixes amb la mida especificada en unitats de píxel tenen els mateixos noms de classe. Tots dos conjunts de caixes tenen 200px i un 40% d’amplada, respectivament.</p> + +<p>La diferència és que el segon conjunt de dues caixes es troba dins d’un contenidor de 400 píxels d’amplada. La segona caixa de 200px d'amplada té la mateixa amplada que la primera, però la segona caixa del 40% ara és el 40% de 400px, molt més estreta que la primera.</p> + +<p><strong>Canvia l'amplada del contenidor o el valor en percentatge i observa què passa.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} </p> + +<p>L’exemple següent mostra les mides de lletra en percentatges. Cada element de llista <code><li></code> té una mida de lletra <code>font-size</code> del 80%; per tant, la lletra dels elements de llista imbricats és cada cop més petita a mesura que la mida de lletra s’hereta de l’element pare.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} </p> + +<p>Observa que molts valors accepten unitats de longitud i de percentatge, però n’hi ha que només accepten unitats de longitud. Consulta quins valors s’accepten en les pàgines de referència de cada propietat de MDN. Si el valor permès inclou <code><a href="/en-US/docs/Web/CSS/length-percentage"><length-percentage></a></code>, pots utilitzar una longitud o un percentatge. Si el valor permès només inclou <code><length></code> no s’admet l’ús de percentatges.</p> + +<h3 id="Nombres">Nombres</h3> + +<p>Hi ha valors que accepten nombres sense unitat. Un exemple de propietat que accepta un nombre sense unitat és la propietat <code>opacity</code>, que controla l’opacitat d’un element (el nivell de transparència). Aquesta propietat accepta un nombre entre el <code>0</code> (totalment transparent) i l’<code>1</code> (totalment opac).</p> + +<p><strong>En l’exemple següent, canvia el valor <code>opacity</code> per diversos valors decimals entre el <code>0</code> i l’<code>1</code> i observa com la caixa i el contingut es tornen més o menys opacs.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} </p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Si en CSS fas servir un nombre com a valor, no l’has de posar entre cometes.</p> +</div> + +<h2 id="Color">Color</h2> + +<p>Hi ha moltes maneres d’especificar el color en CSS, i algunes s’han implementat més recentment que d’altres. El CSS pot utilitzar els mateixos valors de color per a qualsevol element, ja sigui per a especificar el color del text com el color del fons, o qualsevol altra cosa.</p> + +<p>El sistema de colors estàndard disponible en els equips moderns és de 24 bits, que permet la visualització d’uns 16,7 milions de colors diferents mitjançant una combinació de diferents canals vermell, verd i blau amb 256 valors diferents per a cada canal (256 x 256 x 256 = 16.777.216). Observa algunes de les maneres com podem especificar colors amb el CSS.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: En aquest tutorial analitzarem els mètodes habituals per a especificar el color que tenen una bona compatibilitat amb els navegadors. N’hi ha d’altres, que no tenen una bona compatibilitat amb els navegadors i són menys habituals.</p> +</div> + +<h3 id="Paraules_clau_per_als_colors">Paraules clau per als colors</h3> + +<p>Molt sovint en els exemples de la nostra secció d’aprenentatge o en alguna altra pàgina de MDN veuràs que utilitzem paraules clau de colors, perquè són una manera senzilla i comprensible d’especificar un color. Hi ha moltes paraules clau, i algunes tenen noms força curiosos. En pots veure una llista completa a la pàgina dedicada al valor <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code>.</p> + +<p><strong>Juga amb diferents valors de color en els exemples en viu que et presentem a continuació per a entendre més bé com funcionen.</strong></p> + +<h3 id="Els_valors_RGB_hexadecimals">Els valors RGB hexadecimals</h3> + +<p>El tipus de valor de color següent que probablement trobaràs més sovint són els codis hexadecimals. Cada valor hexadecimal consisteix en un símbol hashtag/coixinet (#) seguit de sis nombres hexadecimals, cadascun dels quals pot prendre un dels 16 valors que van del 0 a la f (que representa el 15), és a dir: <code>0123456789abcdef</code>. Cada parell de valors representa un dels canals (vermell, verd i blau) i permet especificar qualsevol dels 256 valors disponibles per a cada un (16 x 16 = 256).</p> + +<p>Aquests valors són una mica més complexos i menys fàcils d’entendre, però són molt més versàtils que les paraules clau: amb els valors hexadecimals pots representar qualsevol color que vulguis per a la teva paleta de colors.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} </p> + +<p><strong>Canvia un cop més els valors i observa com varien els colors.</strong></p> + +<h3 id="Valors_RGB_i_RGBA">Valors RGB i RGBA</h3> + +<p>El tercer sistema de què parlarem aquí és RGB. Un valor RGB és una funció <code>rgb()</code> que proporciona tres paràmetres que representen els valors dels canals vermell, verd i blau dels colors, igual que els valors hexadecimals. La diferència amb RGB és que els canals no estan representats per dos dígits hexadecimals, sinó per un nombre decimal entre 0 i 255, que sembla una mica més fàcil d’entendre.</p> + +<p>Reescrivim el nostre darrer exemple adaptat amb l’ús de colors RGB:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} </p> + +<p>També pots utilitzar colors RGBA: funcionen exactament igual que els colors RGB, de manera que pots utilitzar qualsevol valor RGB, però s’hi afegeix un quart valor que representa el canal alfa del color, que en controla l'opacitat. Si estableixes aquest valor a <code>0</code>, el color és totalment transparent, mentre que <code>1</code> el fas totalment opac. Els valors que hi ha entremig proporcionen diferents nivells de transparència.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Entre establir un canal alfa per a un color o utilitzar la propietat {cssxref("opacity")}} que hem vist abans hi ha una diferència fonamental. Quan empres l'opacitat, l’element i tot el que té a l’interior són opacs, mentre que amb l’ús de colors RGBA, només es torna opac el color que especifiques.</p> +</div> + +<p>En l'exemple següent hem afegit una imatge de fons al bloc que conté les nostres caixes de colors. A continuació, hem configurat les caixes perquè tinguin valors d'opacitat diferents: observa que el fons es veu més quan el valor del canal alfa és més petit.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}</p> + +<p><strong>Canvia els valors del canal alfa en aquest exemple i observa com això afecta la sortida del color.</strong></p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: En algun moment els navegadors moderns es van actualitzar perquè <code>rgba()</code> i <code>rgb()</code>, i també <code>hsl()</code> i <code>hsla()</code> (els veurem més avall) fossin àlies purs els uns dels altres i es comportessin exactament igual. Així, per exemple, tant <code>rgba()</code> com <code>rgb()</code> accepten colors amb valors de canal alfa i sense. Prova de canviar en l'exemple anterior les funcions <code>rgba()</code> per <code>rgb()</code> i comprova si els colors encara funcionen. Tot i que és decisió teva la manera com aplicar estil, fer servir funcions diferents que separin les definicions dels colors transparents de les dels que no ho són proporciona una compatibilitat (una mica) més bona amb els navegadors i pot servir d’indicador visual de quins colors del teu codi estan definits amb transparència.</p> +</div> + +<h3 id="Els_valors_HSL_i_HSLA">Els valors HSL i HSLA</h3> + +<p>Una mica menys de compatibilitat que RGB presenta el model de color HSL (no és compatible amb versions antigues d’Internet Explorer), que es va implementar després de molta insistència per part dels dissenyadors. En lloc dels valors vermell, verd i blau, la funció <code>hsl()</code> accepta valors de tonalitat, saturació i lluminositat, que distingeixen els 16,7 milions de colors, però d'una manera diferent:</p> + +<ul> + <li><strong>Tonalitat</strong>: El to de base del color. Pren un valor entre el 0 i el 360, que representa un angle al voltant d'una roda de color.</li> + <li><strong>Saturació</strong>: El nivell de saturació que presenta el color. Pren un valor entre el 0 i el 100%, en què al 0 no hi ha color (apareix com una ombra de gris) i al 100% la saturació del color és total.</li> + <li><strong>Lluminositat</strong>: La claror i brillantor del color. Pren un valor entre el 0 i el 100%, en què al 0 no hi ha llum (apareix negre del tot) i al 100% la llum és total (apareix blanc del tot).</li> +</ul> + +<p>Podem adaptar l'exemple RGB amb colors HSL, d’aquesta manera:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} </p> + +<p>De la mateixa manera que RGB té RGBA, HSL té un equivalent HSLA, que et proporciona la mateixa funció d’especificació del canal alfa. Ho mostrem a continuació canviant el nostre exemple RGBA adaptat amb colors HSLA.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} </p> + +<p>Pots utilitzar qualsevol d'aquests valors de color en els teus projectes. En la majoria de casos és probable que et triïs una paleta de colors (i el mètode que escullis per a especificar el color), que faràs servir al llarg de tot el projecte. Pots fer combinacions de colors i barreges, però per coherència acostuma a ser millor si tot el teu projecte empra el mateix model de colors.</p> + +<h2 id="Imatges">Imatges</h2> + +<p>El tipus de dades <code><a href="/en-US/docs/Web/CSS/image"><image></a></code> utilitza valors permesos que són imatges. Poden ser tant fitxers d'imatge enllaçats des d'una funció <code>url()</code>, com degradats.</p> + +<p>En l'exemple següent presentem una imatge i un degradat emprats com a valors de la propietat CSS <code>background-image</code>.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} </p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: hi ha altres valors possibles per a <code><image></code>, però són més recents i encara tenen poca compatibilitat amb els navegadors. Si vols saber-ne més, dona una ullada a la pàgina que MDN dedica al tipus de dada <code><a href="/en-US/docs/Web/CSS/image"><image></a></code>.</p> +</div> + +<h2 id="Posició">Posició</h2> + +<p>El tipus de dades <code><a href="/en-US/docs/Web/CSS/position_value"><position></a></code> representa un conjunt de coordenades 2D que s’utilitzen per a posicionar un element, com ara una imatge de fons (amb <code><a href="/en-US/docs/Web/CSS/background-position">background-position</a></code>). Pot prendre paraules clau com <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code> i <code>center</code> per a alinear els elements amb límits específics d’una caixa 2D, i també longituds, que representen desplaçaments respecte de les vores superior i esquerra de la caixa.</p> + +<p>Un valor de posició típic consta de dos valors: el primer estableix la posició horitzontal, i el segon la vertical. Si només especifiques el valor per a un eix, l’altre utilitza <code>center</code> per defecte.</p> + +<p>En l’exemple següent hem posicionat una imatge de fons a 40px de la part superior dreta del contenidor amb una paraula clau.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} </p> + +<p><strong>Juga amb aquests valors i observa com pots anar desplaçant la imatge.</strong></p> + +<h2 id="Cadenes_i_identificadors">Cadenes i identificadors</h2> + +<p>Al llarg dels exemples anteriors hem vist que es fan servir paraules clau com a valors (per exemple, les paraules clau de <code><color></code> com ara <code>red</code>, <code>black</code>, <code>rebeccapurple</code> i <code>goldenrod</code>). Aquestes paraules clau s’anomenen més precisament <em>identificadors</em>, i són valors especials que el CSS entén. Per tant, no s'escriuen entre cometes (és a dir, no es tracten com cadenes alfanumèriques).</p> + +<p>En alguns casos en CSS s’utilitzen cadenes alfanumèriques, per exemple en <a href="https://wiki.developer.mozilla.org/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Pseudo-classes_and_pseudo-elements#Generar_contingut_amb_before_i_after">especificar contingut generat</a>. En aquests casos, aquest valor es posa entre cometes per a denotar que es tracta d’una cadena alfanumèrica. En l'exemple següent utilitzem paraules clau de color, que s’escriuen sense cometes, i una cadena de contingut generat, escrita entre cometes.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} </p> + +<h2 id="Funcions">Funcions</h2> + +<p>L'últim tipus de valor que analitzarem és el grup de valors coneguts com a funcions. En programació, una funció és un bloc de codi reutilitzable que es pot executar diverses vegades per completar una tasca repetitiva amb un esforç mínim tant per part del desenvolupador com de l’ordinador. Les funcions normalment s’associen a idiomes com JavaScript, Python o C++, però també n’hi ha en CSS, com a valors de propietats. Ja hem vist funcions en acció en l’article sobre els colors: <code>rgb()</code>, <code>hsl()</code>, etc. El valor que retorna una imatge des d'un fitxer, <code>url()</code>, també és una funció.</p> + +<p>Un valor que es comporta més com les funcions que pots trobar en un llenguatge de programació tradicional és la funció <code>calc()</code> de CSS. Aquesta funció et permet fer càlculs senzills dins del CSS. És útil sobretot quan vols calcular valors que no pots definir quan escrius el CSS del teu projecte perquè necessites que el navegador te’ls proporcioni en temps d'execució.</p> + +<p>Per exemple, a continuació fem servir la funció <code>calc()</code> per a assignar a una caixa una amplada d’un <code>20% + 100px</code>. El 20% es calcula a partir de l’amplada de l’element pare contenidor <code>.wrapper</code>, i canvia si en canvia l’amplada. Aquest càlcul no es pot fer prèviament perquè no sabem quin serà el 20% de l’element pare, de manera que demanem al navegador que ens ho calculi amb la funció <code>calc()</code>.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}</p> + +<h2 id="Posa_a_prova_el_teu_coneixement">Posa a prova el teu coneixement</h2> + +<p>Hem vist molt de contingut en aquest article. En recordes la informació més important? Trobaràs més proves per comprovar si has retingut aquesta informació abans de seguir a <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_tasks">Test your skills: Values and units</a>.</p> + +<h2 id="Resum">Resum</h2> + +<p>Hem fet una passada ràpida pels tipus de valors i unitats més habituals amb què et pots trobar. Pots consultar tots els diferents tipus a la pàgina de referència <a href="/en-US/docs/Web/CSS/CSS_Values_and_Units">Valors i unitats en CSS</a>; molts d’ells els faràs servir a mesura que avances per aquests articles.</p> + +<p>L’important és que recordis que cada propietat té una llista determinada de valors permesos, i que cada valor té una definició que explica quins en són els subvalors. Aleshores, pots consultar-ne les dades específiques aquí, a les pàgines d’MDN.</p> + +<p>Per exemple, és útil saber que <code><a href="/en-US/docs/Web/CSS/image"><image></a></code> també et permet crear un degradat de color, però potser no és obvi.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="En_aquest_mòdul">En aquest mòdul</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">La cascada i l'herència</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Els selectors CSS</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Els selectors de tipus, de classe i d’ID</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Els selectors d'atribut</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Les pseudoclasses i els pseudoelements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Els combinadors</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El model de caixes</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fons i vores</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El tractament del text en diverses direccions</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordament dels continguts</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Valors i unitats</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionar elements amb el CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imatges, mèdia i elements de formulari</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estil a les taules</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depura el teu CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organitza el teu CSS</a></li> +</ol> diff --git a/files/ca/learn/css/caixes_estil/caixa_aspecte_interessant/index.html b/files/ca/learn/css/caixes_estil/caixa_aspecte_interessant/index.html new file mode 100644 index 0000000000..3a4df8a2b2 --- /dev/null +++ b/files/ca/learn/css/caixes_estil/caixa_aspecte_interessant/index.html @@ -0,0 +1,85 @@ +--- +title: Una caixa d'aspecte interessant +slug: Learn/CSS/Caixes_estil/Caixa_aspecte_interessant +tags: + - Assessment + - Beginner + - CSS + - Learn + - backgrounds + - borders + - box + - box model + - effects +translation_of: Learn/CSS/Building_blocks/A_cool_looking_box +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</div> + +<p class="summary">En aquesta avaluació, obtindreu una mica més de pràctica a l'hora de crear caixes d'aspecte interessant, intentant crear una caixa atractiva.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Rrequisits previs:</th> + <td><span id="result_box" lang="ca"><span>Abans d'intentar aquesta avaluació, hauríeu d'haver treballat tots els articles d'aquest mòdul.</span></span></td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Provar la comprensió del model de caixa CSS i altres característiques relacionades amb la caixa, com ara les vores i els fons.</td> + </tr> + </tbody> +</table> + +<h2 id="Punt_de_partida">Punt de partida</h2> + +<p><span id="result_box" lang="ca"><span>Per començar aquesta avaluació, heu de:</span></span></p> + +<ul> + <li><span id="result_box" lang="ca"><span>Feu còpies locals del codi</span></span> <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/cool-information-box-start/index.html">HTML</a> i <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/cool-information-box-start/style.css">CSS</a> - <span id="result_box" lang="ca"><span>deseu-les com</span></span> <code>index.html</code> and <code>style.css</code> <span id="result_box" lang="ca"><span>en un directori nou</span></span>.</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: Com a alternativa, podeu utilitzar un lloc com <a class="external-icon external" href="http://jsbin.com/">JSBin</a> o <a class="external-icon external" href="https://thimble.mozilla.org/">Thimble</a> per fer la vostra avaluació. Podeu enganxar el codi HTML i omplir el CSS en un d'aquests editors en línia. Si l'editor en línia que esteu utilitzant no té cap panell CSS independent, no dubteu a posar-lo en un element <<code>style</code>> al capdavant del document.</p> +</div> + +<h2 id="Resum_del_projecte">Resum del projecte</h2> + +<p>La vostra tasca és crear una caixa genial i de luxe i explorar que podem tenir de divertit amb CSS.</p> + +<h3 id="Tasques_generals">Tasques generals</h3> + +<ul> + <li>Apliqueu el CSS a l'HTML.</li> +</ul> + +<h3 id="L'estil_de_la_caixa">L'estil de la caixa</h3> + +<p>Ens agradaria que dissenyéssiu<br> + el {{htmlelement("p")}} proporcionat, donant-li el següent:</p> + +<ul> + <li>Un ample raonable per a un botó gran, diguem al voltant de 200 píxels.</li> + <li>Una alçada raonable per a un botó gran, centrant el text verticalment en el procés.</li> + <li>Text centrat.</li> + <li>Un lleuger augment de la grandària de la font, al voltant de 17-18px d'estil, calculat. Utilitzeu rems. Escriviu com a treballar, el valor, en un comentari.</li> + <li>Color base per al disseny. Doneu a la caixa a aquest color com a color de fons.</li> + <li>El mateix color per al text; Feu que sigui llegible usant una ombra negre del text.</li> + <li>Una vora de radi bastant subtil.</li> + <li>Una vora sòlida de 1 píxel amb un color similar al color base, però una ombra una mica més fosca.</li> + <li>Un gradient lineal semitransparent negre, que es dirigeix cap a la cantonada superior esquerra. Feu que sigui completament transparent al principi, gradat al voltant de 0,2 d'opacitat en un 30% al llarg i romandre en el mateix color fins al final.</li> + <li>Múltiples ombres de caixa. Doneu-li una ombra de caixa estàndard, per fer que la caixa es vegi lleugerament aixecada de la pàgina. Les altres dues haurien de ser ombres de caixa d'inserció: una ombra blanca semitransparent prop de la part superior esquerra i una ombra semitransparent negre a la part inferior dreta, per afegir-li el bonic aspecte 3D de la caixa.</li> +</ul> + +<h2 id="Exemple">Exemple</h2> + +<p><span id="result_box" lang="ca"><span>La següent captura de pantalla mostra un exemple del que podria semblar el disseny final</span></span>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13148/fancy-box.png" style="display: block; height: 76px; margin: 0px auto; width: 228px;"></p> + +<h2 id="Avaluació">Avaluació</h2> + +<p>Si seguiu aquesta avaluació com a part d'un curs organitzat, hauríeu de poder lliurar el vostre treball al vostre professor/mentor per qualificar-ho. Si esteu en auto-aprenentatge, podreu obtenir la guia de qualificacions amb força facilitat preguntant sobre el tema <a class="external-icon external" href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">en el fil de conversa en l'àrea d'aprenentatge</a>, o en el canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> en <a class="external-icon external" href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Intenteu primer l'exercici - no es guanya res fent trampes!</p> + +<p>{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</p> diff --git a/files/ca/learn/css/caixes_estil/creació_carta/index.html b/files/ca/learn/css/caixes_estil/creació_carta/index.html new file mode 100644 index 0000000000..2623d6d0dd --- /dev/null +++ b/files/ca/learn/css/caixes_estil/creació_carta/index.html @@ -0,0 +1,97 @@ +--- +title: Creació d'una carta amb encapçalat de fantasia +slug: Learn/CSS/Caixes_estil/Creació_carta +tags: + - Assessment + - Background + - Beginner + - CSS + - CodingScripting + - border + - borderBoxes + - letter + - letterhead + - letterheaded + - paper +translation_of: Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}</div> + +<p class="summary">Si voleu fer una impressió correcta, escriviu una carta amb un bon paper i una capçalera agradable pot ser un començament realment bo. En aquesta avaluació, us desafiarem a crear una plantilla en línia per aconseguir-ho.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td><span id="result_box" lang="ca"><span>Abans d'intentar aquesta avaluació, hauríeu d'haver treballat tots els articles d'aquest mòdul</span></span>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Provar la comprensió del model de caixa CSS i altres característiques relacionades amb la caixa, com ara la implementació de fons.</td> + </tr> + </tbody> +</table> + +<h2 id="Punt_de_partida"><span id="result_box" lang="ca"><span>Punt de partida</span></span></h2> + +<p><span id="result_box" lang="ca"><span>Per començar aquesta avaluació, heu de:</span></span></p> + +<ul> + <li><span id="result_box" lang="ca"><span>Feu còpies locals del codi</span></span> <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/letterheaded-paper-start/index.html">HTML</a> i <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/letterheaded-paper-start/style.css">CSS</a> — <span id="result_box" lang="ca"><span>deseu-les com</span></span> <code>index.html</code> i <code>style.css</code> <span id="result_box" lang="ca"><span>en un directori nou</span></span>.</li> + <li><span id="result_box" lang="ca"><span>Deseu còpies locals de les imatges</span></span> <a href="https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/top-image.png">top</a>, <a href="https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/bottom-image.png">bottom</a> i <a href="https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/logo.png">logo</a> <span id="result_box" lang="ca"><span>en el mateix directori que els fitxers de codi.</span></span></li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: Com a alternativa, podeu utilitzar un lloc com <a class="external external-icon" href="http://jsbin.com/">JSBin</a> o <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> per fer la vostra avaluació. Podeu enganxar el codi HTML i omplir el CSS en un d'aquests editors en línia. Si l'editor en línia que esteu utilitzant no té cap panell CSS independent, no dubteu a posar-lo en un element <<code>style</code>> al capdavant del document.</p> +</div> + +<h2 id="Resum_del_projecte">Resum del projecte</h2> + +<p>Se us ha donat els fitxers necessaris per crear una plantilla de paper amb capçalera. Només cal que col·loqueu els fitxers junts. Per arribar-hi, heu de:</p> + +<h3 id="La_carta_principal">La carta principal</h3> + +<ul> + <li>Apliqueu el CSS a l'HTML.</li> + <li>Afegiu una declaració de fons a la carta que: + <ul> + <li>Fixeu la imatge superior a la part superior de la carta</li> + <li>Fixeu la imatge inferior a la part inferior de la carta</li> + <li>Afegiu un gradient semitransparent a la part superior de tots dos fons anteriors que dóna una mica de textura a la lletra. Feu que sigui lleugerament fosc a la part superior i inferior, però que sigui completament transparent per a una gran part del centre.</li> + </ul> + </li> + <li>Afegiu una altra declaració de fons, que només afegeixi la imatge superior a la part superior de la carta, com a alternativa per a navegadors que no admetin la declaració anterior.</li> + <li>Afegiu un color de fons blanc a la carta.</li> + <li>Afegiu una vora sòlida superior i inferior de 1 mm a la carta, en un color que es mantngui amb la resta del esquema de color.</li> +</ul> + +<h3 id="El_logotip"><span id="result_box" lang="ca"><span>El logotip</span></span></h3> + +<ul> + <li>A {{htmlelement("h1")}}, afegiu el logotip com a imatge de fons.</li> + <li>Afegiu un filtre al logotip per donar-li una ombra subtil.</li> + <li>Ara comenteu el filtre i implementeu l'ombra en un mode diferent (una mica més compatible amb el navegador creuat), que encara segueix la forma de la imatge rodona.</li> +</ul> + +<h2 id="Consells_i_suggeriments">Consells i suggeriments</h2> + +<ul> + <li>Recordeu que pofeu crear una alternativa per als navegadors més antics, posant la versió alternativa com a primera declaració, seguida de la versió que funciona només en els navegadors més recents. Els navegadors més antics aplicaran la primera declaració i ignoraran la segona, mentre que els nous exploradors aplicaran la primera i després la reemplaçaran amb la segona</li> + <li>No dubteu a crear els vostres propis gràfics per a l'avaluació si ho voleu.</li> +</ul> + +<h2 id="Exemple">Exemple</h2> + +<p>La següent captura de pantalla mostra un exemple del que podria semblar el disseny final:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13144/letterhead.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p> </p> + +<h2 id="Avaluació"><span id="result_box" lang="ca"><span>Avaluació</span></span></h2> + +<p>Si seguiu aquesta avaluació com a part d'un curs organitzat, hauríeu de poder lliurar el vostre treball al vostre professor/mentor per qualificar-ho. Si esteu en auto-aprenentatge, podreu obtenir la guia de qualificacions amb força facilitat preguntant sobre el tema <a class="external external-icon" href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">en el fil de conversa en l'àrea d'aprenentatge</a>, o en el canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> en <a class="external external-icon" href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Intenteu primer l'exercici - no es guanya res fent trampes!</p> + +<p>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}</p> diff --git a/files/ca/learn/css/disseny_css/disseny_responsiu/index.html b/files/ca/learn/css/disseny_css/disseny_responsiu/index.html new file mode 100644 index 0000000000..5bf909e6e7 --- /dev/null +++ b/files/ca/learn/css/disseny_css/disseny_responsiu/index.html @@ -0,0 +1,324 @@ +--- +title: Disseny responsiu +slug: Learn/CSS/Disseny_CSS/Disseny_responsiu +translation_of: Learn/CSS/CSS_layout/Responsive_Design +--- +<div>{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}</div> + +<p>En els primers dies del disseny de pàgines web es creaven pàgines per a una mida de pantalla determinada. Si l’usuari tenia una pantalla més gran o més petita que la que el dissenyador s’esperava, els resultats anaven des de barres de desplaçament no desitjades fins a línies excessivament llargues i un mal ús de l’espai. A mesura que apareixien mides de pantalla més diverses, va aparéixer el concepte de <em>disseny web responsiu</em> (RWD o <em>responsive web design</em>), un conjunt de pràctiques que permeten a les pàgines web alterar el disseny i l’aparença per a adaptar-se a diferents amplades, resolucions, etc. És una idea que ha canviat la manera de dissenyar una pàgina web per a diversos dispositius, i en aquest article t’ajudarem a entendre les principals tècniques que has de conèixer per a dominar-la.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisits:</th> + <td>Conceptes bàsics d’HTML (consulta la <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l’HTML</a>), i nocions de com funciona el CSS (consulta els <a href="/ca/docs/Learn/CSS/First_steps">Primers passos amb el CSS</a> i els <a href="/ca/docs/Learn/CSS/Building_blocks">elements bàsics del CSS</a>).</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Entendre els conceptes fonamentals i la història del disseny responsiu.</td> + </tr> + </tbody> +</table> + +<h2 id="Història_dels_dissenys_de_pàgina_web">Història dels dissenys de pàgina web</h2> + +<p>En un moment de la història, només tenies dues opcions a l’hora de dissenyar un lloc web:</p> + +<ul> + <li>Podies crear un lloc web <em>líquid</em>, que s’estendria fins a omplir la finestra del navegador</li> + <li>o un lloc amb una <em>amplada fixa</em>, que tindria una mida fixa en píxels.</li> +</ul> + +<p>Aquests dos enfocaments tenien com a resultat un lloc web que s’adequava essencialment a la pantalla de la persona que havia dissenyat el lloc web. El lloc web líquid donava un disseny aixafat en pantalles més petites (com es pot veure a continuació), i línies molt llargues que costaven molt de llegir en les pantalles grans.</p> + +<figure><img alt="Una disposició amb dues columnes aixafades en una finestra de visualització de la mida d’un dispositiu mòbil." src="https://mdn.mozillademos.org/files/16834/mdn-rwd-liquid.png" style="display: block; height: 406px; width: 300px;"> +<figcaption></figcaption> +</figure> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Observa aquest disseny de pàgina web líquid senzill: <a href="https://mdn.github.io/css-examples/learn/rwd/liquid-width.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/liquid-width.html">codi d’origen</a>. Amplia o redueix la finestra del navegador i observa com en canvia l’aspecte segons les diferents mides.</p> +</div> + +<p>Amb llocs web amb amplada fixa es corria el risc d’aparició d’una barra de desplaçament horitzontal en les pantalles que eren més petites que l’amplada del lloc web (com es pot veure a continuació) i de molta superfície blanca a les vores del disseny en les pantalles que eren més grans.</p> + +<figure><img alt="Disseny amb barra de desplaçament horitzontal en una finestra de visualització de la mida d’un dispositiu mòbil." src="https://mdn.mozillademos.org/files/16835/mdn-rwd-fixed.png" style="display: block; height: 411px; width: 300px;"> +<figcaption></figcaption> +</figure> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Observa aquest disseny de pàgina web senzill d’amplada fixa: <a href="https://mdn.github.io/css-examples/learn/rwd/fixed-width.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/fixed-width.html">codi d’origen</a>. Un cop més, canvia la mida de la finestra del navegador i observa’n el resultat.</p> +</div> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Les captures de pantalla de dalt es fan amb el <a href="/en-US/docs/Tools/Responsive_Design_Mode">mode de disseny responsiu</a> de les DevTools de Firefox.</p> +</div> + +<p>A mesura que la web per a dispositius mòbils va començar a esdevenir una realitat amb els primers telèfons mòbils, les companyies que volien adherir-se en general a la tecnologia mòbil creaven una versió del lloc web especial per a dispositius mòbils amb una URL diferent (sovint alguna cosa com ara <em>m.example.com</em> o <em>example.mobi</em>). Això volia dir que calia desenvolupar i mantenir actualitzades dues versions independents de la mateixa pàgina web.</p> + +<p>A més, aquests llocs web per a dispositius mòbils solien oferir una experiència d’usuari molt reduïda. Com que els dispositius mòbils es van tornar més potents i van poder mostrar llocs web complets, això frustrava els usuaris de dispositius mòbils, que es trobaven atrapats en la versió mòbil del lloc web i no podien accedir a informació que sabien que hi havia en la versió d’escriptori, que incloïa totes les funcions de la pàgina web.</p> + +<h2 id="Disseny_flexible_abans_del_disseny_responsiu">Disseny flexible abans del disseny responsiu</h2> + +<p>Es van desenvolupar diversos enfocaments per a intentar resoldre els inconvenients dels mètodes líquids o d’amplada fixa per a crear llocs web. El 2004, Cameron Adams va escriure una publicació titulada <a href="http://www.themaninblue.com/writing/perspective/2004/09/21/">Resolution dependent layout</a>, on descriu un mètode per a crear un disseny de pàgina web que s’adapta a diferents resolucions de pantalla. Aquest enfocament requeria JavaScript per a detectar la resolució de la pantalla i carregar el CSS correcte.</p> + +<p>Zoe Mickley Gillenwater va ser fonamental en <a href="http://zomigi.com/blog/voices-that-matter-slides-available/">la seva tasca</a> de descriure i formalitzar les diferents maneres de crear llocs web flexibles, per a intentar trobar una situació intermèdia entre omplir tota la pantalla o tenir una mida completament fixa.</p> + +<h2 id="El_disseny_responsiu">El disseny responsiu</h2> + +<p>El terme disseny responsiu va ser <a href="https://alistapart.com/article/responsive-web-design/">creat per Ethan Marcotte el 2010</a>, que va descriure l’ús de tres tècniques combinades.</p> + +<ol> + <li>La primera va ser la idea de les graelles fluides, cosa que ja explorava Gillenwater, i que es pot llegir en l’article de Marcotte, <a href="https://alistapart.com/article/fluidgrids/">Fluid grids</a> (publicat el 2009 en <em>A list apart</em>).</li> + <li>La segona tècnica va ser la idea d’<a href="http://unstoppablerobotninja.com/entry/fluid-images">imatges fluides</a>. Utilitzant una tècnica molt senzilla d’establir la propietat <code>max-width</code> al <code>100%</code>, les imatges es farien més petites si la columna que les contenia es feia més estreta que la mida intrínseca de la imatge, però mai no augmentaria. D’aquesta manera, una imatge s’escala per a poder-se incloure en una columna de mida flexible sense que desbordi, però no es fa més gran i es pixela si la columna s’amplia més que la imatge.</li> + <li>El tercer component clau va ser la <a href="/en-US/docs/Web/CSS/Media_Queries">consulta de mèdia</a> (o <em>media query</em>). Les consultes de mèdia habiliten el tipus de canvi de disseny de pàgina web que Cameron Adams havia explorat abans amb JavaScript, però utilitzant només CSS. En lloc de tenir un disseny de pàgina web per a cada mida de pantalla, se’n podria tenir un i canviar-ne la disposició dels elements. Es podrien fer aparèixer barres laterals per a les pantalles més petites, o es podia mostrar una navegació alternativa.</li> +</ol> + +<p>És important entendre que <strong>el disseny web responsiu no és una tecnologia independent</strong>: és un terme que s’utilitza per a descriure un enfocament del disseny de pàgines web o un conjunt de bones pràctiques que s’utilitzen per a crear un disseny de pàgines web que pugui <em>respondre</em> segons el dispositiu que s’utilitza per a visualitzar el contingut. En l’exploració original de Marcotte, això va donar lloc a les graelles flexibles (amb elements flotants) i les consultes de mèdia; però en els gairebé deu anys des que es va escriure aquest article, treballar de manera responsiva s’ha convertit en la norma. Els mètodes de disseny amb CSS moderns són intrínsecament responsius, i hi ha novetats integrades a la plataforma web que faciliten el disseny de llocs web responsius.</p> + +<p>La resta d’aquest article t’indica les diverses funcions de la plataforma web que pots utilitzar per a crear un lloc web responsiu.</p> + +<h2 id="Les_consultes_a_mèdia_media_queries">Les consultes a mèdia (<em>media queries</em>)</h2> + +<p>El disseny responsiu només va poder sorgir a causa de les consultes a mèdia. L’especificació del nivell 3 de les consultes a mèdia es va convertir en una Candidate Recommendation el 2009, cosa que significa que es considerava llesta per a implementar-la en els navegadors. Les consultes a mèdia ens permeten fer un seguit de proves (per exemple, si la pantalla de l’usuari és més gran que una certa amplada o una determinada resolució) i aplicar CSS de manera selectiva per a dissenyar la pàgina web més adequada segons les necessitats de l’usuari.</p> + +<p>Per exemple, la consulta als mèdia següent esbrina si la pàgina web que es mostra ho fa com una pantalla (per tant, no és un document imprès), i si la finestra té almenys 800 píxels d’ample. El CSS per al selector <code>.container</code> només s’aplica si aquestes dues coses són certes.</p> + +<pre class="brush: css notranslate"><code>@media screen and (min-width: 800px) { + .container { + margin: 1em 2em; + } +} </code> +</pre> + +<p>Pots afegir diverses consultes a mèdia dins d’un full d’estil, i ajustar el disseny sencer o només unes parts perquè s’adapti més bé a les diverses mides de pantalla. Els punts en què s’introdueix una consulta de mèdia i es canvia la disposició dels elements de la pàgina web es coneixen com <em>punts de ruptura</em>.</p> + +<p>Un enfocament habitual quan s’utilitzen les consultes als mèdia és crear un disseny senzill d’una sola columna per a dispositius de pantalla estreta (per exemple, telèfons mòbils), després comprovar si hi ha pantalles més grans i implementar una disposició en múltiples columnes quan saps que tens prou amplada de pantalla per a fer-ho. Sovint es descriu com disseny <strong>mobile first</strong>.</p> + +<p>Trobaràs més informació en la documentació de MDN per a les <a href="/en-US/docs/Web/CSS/Media_Queries">consultes als mèdia</a>.</p> + +<h2 id="Graelles_flexibles">Graelles flexibles</h2> + +<p>Els llocs responsius no només canvien la distribució entre punts de ruptura, sinó que es basen en graelles flexibles. Una graella flexible significa que no cal delimitar el lloc web a totes les mides possibles de dispositius que hi ha i crear un disseny en píxels perfecte. Aquest plantejament seria impossible, atès el gran nombre de dispositius de mida diferent que hi ha, i del fet que, com a mínim en la versió d’escriptori, la finestra del navegador no sempre es maximitza.</p> + +<p>Si fas servir una graella flexible, només has d’afegir un punt de ruptura i canviar el disseny en el punt en què el contingut es comença a veure malament. Per exemple, si les longituds de les línies es fan il·legibles a mesura que augmenta la mida de la pantalla, o si una caixa s’encongeix fins a una amplada de dues paraules en cada línia a mesura que la mida de la pantalla es redueix.</p> + +<p>En els primers dies del disseny responsiu, l’única opció per a dissenyar pàgines web era utilitzar <a href="/ca/docs/Learn/CSS/Disseny_CSS/Flotadors">elements flotants</a>. Els dissenys de pantalla amb elements flotants flexibles s’aconseguien donant a cada element una amplada en percentatge i assegurar-se que no s’atenyia més del 100% per a tota la pàgina. En la seva obra original sobre graelles flexibles, Marcotte va detallar una fórmula per a convertir en percentatges un disseny de pàgina dissenyat en píxels.</p> + +<pre class="notranslate"><code>target / context = result </code> +</pre> + +<p>Per exemple, si la mida de la nostra columna de destinació és de 60 píxels i el context (o contenidor) en què es troba és de 960 píxels, dividim 60 per 960 i obtenim un valor que podem utilitzar en el nostre CSS, després de traslladar el punt decimal dos llocs a la dreta.</p> + +<pre class="brush: css notranslate"><code>.col { + width: 6.25%; /* 60 / 960 = 0.0625 */ +} </code> +</pre> + +<p>Avui dia trobaràs aquest enfocament en molts llocs web, i també el trobaràs documentat aquí, en la secció dedicada al disseny de l’article de <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">mètodes heretats de disseny de pàgines web</a>. És probable que en el transcurs del teu treball et trobis amb llocs web que usen aquest enfocament, de manera que val la pena entendre’l, tot i que no construiràs un lloc modern amb una graella flexible basada en elements flotants.</p> + +<p>L’exemple següent mostra un disseny senzill i sensible amb consultes a mèdia i una graella flexible. En pantalles estretes, el disseny mostra les caixes apilades les unes sobre les altres:</p> + +<figure><img alt="Una vista d’un dispositiu mòbil amb una disposició de caixes apilades verticalment l’una sobre l’altra." src="https://mdn.mozillademos.org/files/16836/mdn-rwd-mobile.png" style="display: block; height: 407px; width: 300px;"> +<figcaption></figcaption> +</figure> + +<p>En pantalles més amples es passa a dues columnes:</p> + +<figure><img alt="Una vista d’un dispositiu d’escriptori d’un disseny amb dues columnes." src="https://mdn.mozillademos.org/files/16837/mdn-rwd-desktop.png" style="display: block; height: 217px; width: 600px;"> +<figcaption></figcaption> +</figure> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Pots trobar l’<a href="https://mdn.github.io/css-examples/learn/rwd/float-based-rwd.html">exemple en viu</a> i el <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/float-based-rwd.html">codi d’origen</a> d’aquest exemple a GitHub.</p> +</div> + +<h2 id="Tecnologies_modernes_de_disseny_de_pàgines_web">Tecnologies modernes de disseny de pàgines web</h2> + +<p>De manera predeterminada, els mètodes moderns de disseny de pàgines web com ara el <a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">disseny en múltiples columnes</a>, el <a href="/ca/docs/Learn/CSS/Disseny_CSS/Flexbox">Flexbox</a> i el <a href="/ca/docs/Learn/CSS/Disseny_CSS/Graelles">Grid</a> són responsius per defecte. Tots aquests mètodes parteixen de la base que vols crear una graella flexible i et proporcionen les maneres de fer-ho més fàcils.</p> + +<h3 id="Multicol">Multicol</h3> + +<p>El més antic d’aquests mètodes de disseny de pàgines web és <code>multicol</code>: quan especifiques un nombre de columnes (<code>column-count</code>), indiques en quantes columnes vols dividir el contingut. El navegador llavors calcula la mida d’aquestes columnes, que canvia d’acord amb la mida de la pantalla.</p> + +<pre class="brush: css notranslate"><code>.container { + column-count: 3; +} </code> +</pre> + +<p>Si en lloc d’això estableixes l’atribut <code>column-width</code>, especifiques una amplada <em>mínima</em>. El navegador crea tantes columnes d’aquesta amplada com càpiguen còmodament en el contenidor, i reparteix l’espai entre totes les columnes. Per tant, el nombre de columnes canvia segons la quantitat d’espai que hi ha.</p> + +<pre class="brush: css notranslate"><code>.container { + column-width: 10em; +} </code> +</pre> + +<h3 id="Flexbox">Flexbox</h3> + +<p>Amb la tecnologia Flexbox, els elements flexibles es redueixen i distribueixen l’espai entre els elements d’acord amb l’espai que hi ha en el contenidor segons el comportament inicial que tenen predeterminat. Si canvies els valors de <code>flex-grow</code> i <code>flex-shrink</code>, pots indicar com vols que es comportin els elements quan hi ha més o menys espai al voltant.</p> + +<p>En l’exemple següent, els elements flexibles ocupen cada un la mateixa quantitat d’espai en el contenidor flexible, mitjançant la propietat abreviada <code>flex: 1</code>, com es descriu en l’article <a href="https://wiki.developer.mozilla.org/ca/docs/Learn/CSS/Disseny_CSS/Flexbox#Dimensi%C3%B3_flexible_dels_elements_flexibles">Flexbox: Dimensions flexibles d’elements flex</a>.</p> + +<pre class="brush: css notranslate"><code>.container { + display: flex; +} + +.item { + flex: 1; +} </code> +</pre> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Com a exemple hem reconstruït el disseny responsiu senzill anterior, aquest cop amb Flexbox. Pots veure que ja no cal fer servir valors percentuals estranys per a calcular la mida de les columnes: <a href="https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html">codi d’origen</a>.</p> +</div> + +<h3 id="Graella_CSS">Graella CSS</h3> + +<p>En el disseny de pàgines web amb graella CSS, la unitat <code>fr</code> permet distribuir l’espai disponible en les traces d’una graella. L’exemple següent crea un contenidor de graella amb tres traces de mida <code>1fr</code>. Es creen tres traces de columna, i cadascuna ocupa una part de l’espai disponible en el contenidor. Pots obtenir més informació sobre aquest enfocament per a crear una graella en la secció Aprendre a dissenyar graelles, de l’article <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids#Flexible_grids_with_the_fr_unit">Graelles flexibles amb la unitat fr</a>.</p> + +<pre class="brush: css notranslate"><code>.container { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} </code> +</pre> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: La versió del disseny de pàgines web amb graella és encara més senzilla, perquè permet definir les columnes amb .wrapper: <a href="https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html">codi d’origen</a>.</p> +</div> + +<h2 id="Imatges_responsives">Imatges responsives</h2> + +<p>L’enfocament més senzill de les imatges responsives es va descriure en els primers articles de Marcotte sobre el disseny de pàgines web responsiu. Bàsicament, agafes una imatge de la mida més gran que puguis necessitar, i la redueixes. Aquest és encara un enfocament emprat avui, i en la majoria de fulls d’estil trobaràs en algun lloc el CSS següent:</p> + +<pre class="brush: css notranslate"><code>img { + max-width: 100%: +} </code> +</pre> + +<p>Hi ha inconvenients evidents en aquest enfocament. És possible que la imatge es mostri molt més petita que la seva mida intrínseca, i això representa una pèrdua d’amplada de banda: un usuari de dispositiu mòbil pot acabar descarregant una imatge que és diverses vegades de la mida del que realment veu a la finestra del navegador. A més, pot ser que no vulguis la mateixa relació d’aspecte de la imatge al mòbil i a l’escriptori. Per exemple, pot ser bo tenir una imatge quadrada per a mòbils, i mostrar la mateixa imatge en format apaïsat a l’escriptori. O bé, tenint en compte la mida més petita del dispositiu mòbil, pot ser que hi vulguis mostrar una imatge diferent, que s’entengui més fàcilment en una pantalla petita. Aquestes coses no es poden aconseguir simplement reduint una imatge.</p> + +<p>Les imatges responsives, amb l’element {{htmlelement("picture")}} i els atributs <code>srcset</code> i <code>sizes</code> de {{htmlelement("img")}} resolen tots dos problemes. Pots proporcionar diverses mides, juntament amb «suggeriments» (metadades que descriuen la mida de la pantalla i la resolució a la qual s’adapta la imatge), i el navegador tria la imatge més adequada per a cada dispositiu i procura que l’usuari descarregui la mida adequada de la imatge en el dispositiu que utilitza.</p> + +<p>També pots usar imatges de <em>director artístic</em>, que proporcionen un retall o una imatge completament diferent per a diferents mides de pantalla.</p> + +<p>Pots trobar una guia detallada sobre <a href="/ca/docs/Learn/HTML/Multimèdia_i_incrustar/Imatges_sensibles">Imatges responsives</a> en el mòdul Aprendre HTML de MDN.</p> + +<h2 id="Tipografia_responsiva">Tipografia responsiva</h2> + +<p>Un element de disseny responsiu que encara no hem tractat en articles anteriors és la idea de la tipografia responsiva. Aquest concepte descriu essencialment el fet de canviar la mida de lletra segons l’espai de pantalla que reflecteixen les consultes a mèdia.</p> + +<p>En aquest exemple, volem establir el nostre títol d’encapçalament de nivell 1 en <code>4rem</code>, és a dir, que serà quatre vegades la mida de la nostra lletra base. És un títol molt gran! Només volem aquest títol d’encapçalament tan gran en mides de pantalla grans, per tant, primer creem un títol d’encapçalament més petit i després utilitzem les consultes a mèdia per a sobreescriure’l amb la mida més gran si sabem que l’usuari té una mida de pantalla d’almenys <code>1200px</code>.</p> + +<pre class="brush: css notranslate"><code>html { + font-size: 1em; +} + +h1 { + font-size: 2rem; +} + +@media (min-width: 1200px) { + h1 { + font-size: 4rem; + } +} </code> +</pre> + +<p>Hem editat el nostre exemple de graella responsiva per a incloure el tipus responsiu amb el mètode descrit. Pots veure com el títol d’encapçalament canvia de mida a mesura que el disseny canvia a la versió de dues columnes.</p> + +<p>En el dispositiu mòbil, el títol d’encapçalament és més petit:</p> + +<figure><img alt="Un esquema apilat amb una mida de títol d’encapçalament petita." src="https://mdn.mozillademos.org/files/16838/mdn-rwd-font-mobile.png" style="display: block; height: 407px; width: 300px;"> +<figcaption></figcaption> +</figure> + +<p>Tanmateix, en el dispositiu d’escriptori veiem la mida del títol d’encapçalament més gran:</p> + +<figure><img alt="Un disseny de dues columnes amb un títol d’encapçalament gran." src="https://mdn.mozillademos.org/files/16839/mdn-rwd-font-desktop.png" style="display: block; height: 169px; width: 600px;"> +<figcaption></figcaption> +</figure> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Observa aquest exemple en acció: <a href="https://mdn.github.io/css-examples/learn/rwd/type-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-rwd.html">codi d’origen</a>.</p> +</div> + +<p>Tal com mostra aquest enfocament de la tipografia, no cal restringir les consultes a mèdia a canviar només el disseny de pàgina web. Es poden utilitzar per a ajustar qualsevol element i fer-lo més útil o atractiu a les diverses mides de pantalla.</p> + +<h3 id="L’ús_d’unitats_de_finestra_de_visualització_per_a_tipografies_responsives">L’ús d’unitats de finestra de visualització per a tipografies responsives</h3> + +<p>Un enfocament interessant és utilitzar la unitat <code>vw</code> de finestra de visualització per a habilitar la tipografia responsiva. <code>1vw</code> és igual a un 1 per cent de l’amplada de la visualització, cosa que significa que si defineixes la mida de la lletra amb <code>vw</code>, sempre es relacionarà amb la mida de la finestra de visualització.</p> + +<pre class="brush: css notranslate">h1 { + font-size: 6vw; +}</pre> + +<p>El problema de fer servir la unitat <code>vw</code> és que l’usuari perd la capacitat d’ampliar un bloc de text, perquè aquest text sempre està relacionat amb la mida de la finestra de visualització. <strong>Per tant, mai no hauries de definir text fent servir només les unitats de finestra de visualització</strong>.</p> + +<p>Hi ha una solució, que implica l’ús de <code><a href="/en-US/docs/Web/CSS/calc">calc()</a></code>. Si afegeixes la unitat <code>vw</code> a un conjunt de valors amb una mida fixa com <code>em</code> o <code>rem</code>, encara es pot fer zoom del text. Essencialment, la unitat <code>vw</code> s’afegeix a sobre d’aquest valor ampliat:</p> + +<pre class="brush: css notranslate">h1 { + font-size: calc(1.5rem + 3vw); +}</pre> + +<p>Això vol dir que només hem d’especificar la mida de la lletra per al títol d’encapçalament, en lloc de configurar-la per a dispositius mòbils i redefinir-la segons les consultes a mèdia. A continuació, la lletra augmenta gradualment a mesura que augmenta la mida de la finestra de visualització.</p> + +<div class="blockIndicator note"> +<p>Observa aquest exemple en acció: <a href="https://mdn.github.io/css-examples/learn/rwd/type-vw.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-vw.html">codi d’origen</a>.</p> +</div> + +<h2 id="L’etiqueta_meta_de_la_finestra_de_visualització">L’etiqueta <code>meta</code> de la finestra de visualització</h2> + +<p>Si observes el tipus de lletra d’una pàgina HTML responsiva, normalment trobaràs l’etiqueta {{htmlelement("meta")}} a la capçalera (<code><head></code>) del document.</p> + +<pre class="brush: html notranslate"><code><meta name="viewport" content="width=device-width,initial-scale=1"></code> +</pre> + +<p>Aquesta etiqueta <code>meta</code> indica als navegadors dels dispositius mòbils que han d’establir l’amplada de la finestra de visualització a l’amplada del dispositiu i escalar el document al 100% de la mida prevista, cosa que mostra el document a la mida optimitzada per a dispositius mòbils.</p> + +<p>Per què cal, això? Perquè els navegadors dels dispositius mòbils tendeixen a mentir sobre l’amplada de la finestra de visualització.</p> + +<p>Aquesta etiqueta <code>meta</code> existeix perquè quan es va llançar l’iPhone original i la gent va començar a veure llocs web en una petita pantalla de telèfon, la majoria dels llocs web no estaven optimitzats per a dispositius mòbils. Per tant, el navegador del dispositiu mòbil establia l’amplada de la visualització a 960 píxels, la representava a aquella amplada i mostrava el resultat com la versió ampliada del disseny per al dispositiu d’escriptori. Altres navegadors de dispositius mòbils (per exemple, el de Google Android) van fer el mateix. Els usuaris podien fer zoom i desplaçar-se per la web per a veure els fragments que els interessaven, però allò no era còmode. Encara ho podràs veure si tens la mala sort d’anar a parar a un lloc web que no té un disseny responsiu.</p> + +<p>El problema és que el teu disseny responsiu amb punts de ruptura i consultes a mèdia no funciona tal com es preveu per als navegadors mòbils. Si tens un disseny de pantalla estret que s’inicia amb una amplada de visualització de 480px o menys i la ruptura s’estableix a 960px, mai no veuràs la disposició de pantalla estreta al dispositiu mòbil. En canvi, si defineixes <code>width=device-width</code>, sobreescrius l’amplada predeterminada d’Apple <code>width=960px</code> amb l’amplada real del dispositiu, de manera que les consultes a mèdia permetran que funcioni com es preveu.</p> + +<p><strong>Per tant, <em>sempre</em> has d’incloure la línia HTML anterior a la capçalera dels teus documents.</strong></p> + +<p>Hi ha altres opcions de configuració que pots utilitzar amb l’etiqueta <code>meta</code> de la finestra de visualització, però, en general, t’anirà bé utilitzar la línia anterior.</p> + +<ul> + <li><code>initial-scale</code>: Configura el zoom inicial de la pàgina, que establim a 1.</li> + <li><code>height</code>: Estableix una alçada específica per a la finestra de visualització.</li> + <li><code>minimum-scale</code>: Estableix el nivell mínim de zoom.</li> + <li><code>maximum-scale</code>: Estableix el nivell màxim de zoom.</li> + <li><code>user-scalable</code>: Impedeix fer zoom si es defineix <code>no</code>.</li> +</ul> + +<p>Has d’evitar l’ús de <code>minimum-scale</code>, <code>maximum-scale</code>, i en particular la configuració de <code>user-scalable</code> en <code>no</code>. Els usuaris haurien de poder fer zoom en la mesura que necessitin; impedir això genera problemes d’accessibilitat.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Hi ha una @rule CSS dissenyada per a substituir l’etiqueta <code>meta</code> de la finestra de visualització (<a href="/en-US/docs/Web/CSS/@viewport">@viewport</a>), però té una compatibilitat de navegadors deficient. Es va implementar a Internet Explorer i Edge, però un cop entri en funcionament Edge basat en Chromium, deixarà de formar part del navegador Edge.</p> +</div> + +<h2 id="Resum">Resum</h2> + +<p>El disseny responsiu es refereix a un disseny de lloc o d’aplicació que respon a l’entorn en què es visualitza. Comprèn diverses funcions i tècniques CSS i HTML, i ara és essencialment l’única manera com construïm els llocs web per defecte. Tingues en compte els llocs web que visites amb el dispositiu mòbil: probablement és poc habitual trobar-te amb un lloc que és la versió reduïda de la d’escriptori, o en què cal desplaçar-se de costat per a trobar-hi coses. Això és perquè la xarxa web s’ha orientat cap a aquest enfocament de disseny responsiu.</p> + +<p>També ha estat molt més fàcil aconseguir dissenys responsius amb l’ajuda dels mètodes de disseny que has après en aquests articles. Si ets nou en el desenvolupament web, avui tens moltes més eines a la teva disposició que en els primers dies del disseny responsiu. Per tant, val la pena comprovar la data dels materials de referència que consultes. Tot i que els articles històrics continuen sent útils, l’ús modern de CSS i HTML facilita molt la creació de dissenys elegants i útils, i independents del dispositiu del visitant.</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="En_aquest_mòdul">En aquest mòdul</h2> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introducció al disseny CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Flux normal</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Elements flotants</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Posicionament</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Disseny en diverses columnes</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">El disseny responsiu</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Guia d’iniciació a les consultes de mèdia</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Mètodes heretats de disseny de pàgines web </a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Compatibilitat dels navegadors antics</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Avaluació del conjunt d’elements bàsics del disseny</a></li> +</ul> diff --git a/files/ca/learn/css/disseny_css/exemples_pràctics_posicionament/index.html b/files/ca/learn/css/disseny_css/exemples_pràctics_posicionament/index.html new file mode 100644 index 0000000000..dfaac7f63c --- /dev/null +++ b/files/ca/learn/css/disseny_css/exemples_pràctics_posicionament/index.html @@ -0,0 +1,404 @@ +--- +title: Exemples pràctics de posicionament +slug: Learn/CSS/Disseny_CSS/Exemples_pràctics_posicionament +tags: + - Article + - Beginner + - CSS + - CodingScripting + - Guide + - Layout + - Learn + - absolute + - fixed + - relative +translation_of: Learn/CSS/CSS_layout/Practical_positioning_examples +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary">Amb els fonaments del posicionament coberts en l'últim article, ara veurem com crear alguns exemples del món real, per il·lustrar quin tipus de coses podeu fer amb el posicionament.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td><span id="result_box" lang="ca"><span>Conceptes bàsics d'HTML</span></span> (estudi <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">Introducció a HTML</a>), <span id="result_box" lang="ca"><span>i una idea de com funciona CSS</span></span> (estudi <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Introducció a CSS</a>).</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Tenir una idea dels aspectes pràctics del posicionament</td> + </tr> + </tbody> +</table> + +<h2 id="Una_caixa_d'informació_amb_pestanyes"><span id="result_box" lang="ca"><span>Una caixa d'informació amb pestanyes</span></span></h2> + +<p>El primer exemple que veurem és una caixa d'informació amb pestanyes clàssica - una característica molt freqüent que es fa servir quan voleu empaquetar molta informació en una petita àrea. Això inclou aplicacions de gran abast d'informació, com ara jocs d'estratègia/guerra, versions mòbils de llocs web on la pantalla és estreta i l'espai és limitat, i caixes d'informació compactes on és possible que vulgueu tenir molta informació disponible sense haver d'omplir tota la IU. El nostre senzill exemple es veurà així una vegada que hàgim acabat:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13368/tabbed-info-box.png" style="display: block; height: 400px; margin: 0px auto; width: 450px;"></p> + +<div class="note"> +<p><strong>Nota</strong>: Podeu veure l'exemple acabat executant-ho en directa a <a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">info-box.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">codi font</a>). Consulteu-ho per tenir una idea del que estareu construint en aquesta secció de l'article.</p> +</div> + +<p>Podeu estar pensant "per què no crear les pestanyes separades com a pàgines web independents, i només les pestanyes, fent clic a través de les pàgines independents per crear l'efecte?" Aquest codi seria més senzill, sí, però cada visualització de "pàgina" per separat seria en realitat una pàgina web recentment carregada, la qual cosa faria més difícil guardar la informació entre les vistes i integrar aquesta característica en un disseny de d'interfície d'usuari més gran. A més, les anomenades "aplicacions de pàgina única" s'estan tornant molt populars - especialment per a les d'interfície d'usuari web mòbils - ja que tenir tot el que serveix com un únic arxiu redueix el nombre de sol·licituds HTTP necessàries per visualitzar tot el contingut, millorant així el rendiment.</p> + +<div class="note"> +<p><strong>Nota</strong>: Alguns desenvolupadors web porten les coses encara més lluny, només tenen una pàgina d'informació carregada alhora i canvien dinàmicament la informació que es mostra utilitzant, una funció de JavaScript com <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>. En aquest punt de l'aprenentatge, però, volem que les coses siguin tan simples com sigui possible. Hi ha una mica de JavaScript més endavant, però només una mica.</p> +</div> + +<p>Per començar, ens agradaria que féssiu una còpia del fitxer HTML d'inici - <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box-start.html">info-box-start.html</a>. Deseu-lo en algun lloc sensible a l'ordinador i obrir-ho en el vostre editor de text. Vegem l'HTML contingut en el cos:</p> + +<pre class="brush: html"><section class="info-box"> + <ul> + <li><a href="#" class="active">Tab 1</a></li> + <li><a href="#">Tab 2</a></li> + <li><a href="#">Tab 3</a></li> + </ul> + <div class="panels"> + <article class="active-panel"> + <h2>The first tab</h2> + + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.</p> + </article> + <article> + <h2>The second tab</h2> + + <p>This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.</p> + </article> + <article> + <h2>The third tab</h2> + + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!</p> + + <ol> + <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li> + <li>Aliquam ut porttitor urna.</li> + <li>Nulla facilisi</li> + </ol> + </article> + </div> +</section></pre> + +<p>Així que aquí tenim un element {{htmlelement("section")}} amb una <code>class</code> <code>info-box</code>, que conté un {{htmlelement("ul")}} i un {{htmlelement("div")}}. La llista desordenada conté tres elements de llista amb enllaços a l'interior, que es convertiran en les pestanyes reals per fer clic, per visualitzar els nostres panells de contingut. El div conté tres elements {{htmlelement("article")}}, que formaran els panells de contingut que corresponen a cada pestanya. Cada panell conté alguns continguts d'exemple.</p> + +<p>La idea, aquí, és fer que l'estil de pestanyes pogui semblar-se a un menú estàndard de navegació horitzontal i donant-li estil els panells per a que s'asseguin un damunt de l'altre mitjançant el posicionament absolut. També us donarem una mica de JavaScript per incloure a la vostra pàgina, per mostrar el panell corresponent quan es pressiona una pestanya i l'estil de la pestanya en si. No necessitareu entendre el JavaScript en aquesta etapa, però haureu de pensar en aprendre una mica de <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript</a> bàsic, el més aviat possible - com més complexes siguin les característiques de la vostra interfície d'usuari, més probable és que necessiteu implementar JavaScript a la vostra funcionalitat desitjada.</p> + +<h3 id="Configuració_general">Configuració general</h3> + +<p>Per començar, afegiu el següent entre l'obertura i tancament de les etiquetes {{HTMLElement("style")}}:</p> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +* { + box-sizing: border-box; +} + +body { + margin: 0; +}</pre> + +<p>Aquesta és només una configuració general per establir una font sans-serif a la nostra pàgina, utilitzar el model <code>border-box</code> de {{cssxref("box-sizing")}} i desfer-se del marge predeterminat de {{htmlelement("body")}}.</p> + +<p>A continuació, afegiu el següent just a sota del vostre CSS anterior:</p> + +<pre class="brush: css">.info-box { + width: 450px; + height: 400px; + margin: 0 auto; +}</pre> + +<p>Això estableix un ample i alçada específic sobre el contingut i el centra a la pantalla mitjançant el antic truc <code>margin: 0 auto;</code>. Anteriorment en el curs, vam aconsellar no establir una alçada fixa en contenidors de contingut, si fos possible; Està bé en aquesta circumstància, perquè tenim contingut fix en les nostres pestanyes. També sembla una mica discordant tenir diferents pestanyes a diferents alçades.</p> + +<h3 id="Estilitzar_les_nostres_pestanyes">Estilitzar les nostres pestanyes</h3> + +<p>Ara volem que les pestanyes d'estil semblin com a pestanyes - bàsicament, aquest és un menú de navegació horitzontal, però en comptes de carregar diferents pàgines web quan es fa clic, com hem vist prèviament al curs, fa que es mostrin panells diferents en la mateixa pàgina. Primer, afegiu la següent regla a la part inferior del vostre CSS per eliminar el valor predeterminat {{cssxref("padding-left")}} i {{cssxref("margin-top")}} de la llista no ordenada:</p> + +<pre class="brush: css">.info-box ul { + padding-left: 0; + margin-top: 0; +}</pre> + +<div class="note"> +<p><strong>Nota</strong>: Estem utilitzant selectors descendents amb <code>.info-box</code> al principi de la cadena a través d'aquest exemple - això és per poguer inserir aquesta funció en una pàgina amb un altre contingut ja en ella, sense por a interferir amb els estils aplicats a altres parts de la pàgina.</p> +</div> + +<p>A continuació, dissenyarem les pestanyes horitzontals - els elements de la llista es flotant tots cap a l'esquerra per fer que s'asseguin en una sola línia, el seu {{cssxref("list-style-type")}} s'estableix a <code>none</code> per desfer-se de les vinyetes i el seu {{cssxref("width")}} s'estableix a <code>150px</code> perquè s'ajusti còmodament a través de la caixa d'informació (info-box). Els elements {{htmlelement("a")}} estan configurats en {{cssxref("display")}} inline-block, perquè s'asseguin en una línia però que encara siguin estilitzables, i estiguin dissenyats adequadament per als botons de pestanya, usant una varietat d'altres propietats.</p> + +<p>Afegiu el següent CSS:</p> + +<pre class="brush: css">.info-box li { + float: left; + list-style-type: none; + width: 150px; +} + +.info-box li a { + display: inline-block; + text-decoration: none; + width: 100%; + line-height: 3; + background-color: red; + color: black; + text-align: center; +}</pre> + +<p>Finalment, per a aquesta secció, establirem alguns estils als estats de l'enllaç. En primer lloc, configurarem els estats <code>:focus</code> i <code>:hover</code> de les pestanyes, perquè es vegin diferents quan estan enfocats/planejats, oferint als usuaris alguna infomació visual. En segon lloc, establirem una regla que posi el mateix estil en una de les pestanyes quan hi hagi una <code>class</code> <code>active</code> present en ella. Definirem això mitjançant JavaScript quan es faci clic a una pestanya. Col·loqueu els següents CSS per sota dels altres estils:</p> + +<pre class="brush: css">.info-box li a:focus, .info-box li a:hover { + background-color: #a60000; + color: white; +} + +.info-box li a.active { + background-color: #a60000; + color: white; +}</pre> + +<h3 id="Estilitzar_els_panells">Estilitzar els panells</h3> + +<p>El següent treball és dissenyar els nostres panells. Anem a engegar-ho!</p> + +<p>Primer de tot, afegiu la següent regla per dissenyar el contenidor <code>.panels</code> {{htmlelement("div")}}. Aquí, simplement, hem establert un {{cssxref("height")}} fix per assegurar-nos que els panells s'ajustin bé a l'interior de la caixa d'informació, {{cssxref("position")}} <code>relative</code> pel que fa a {{htmlelement("div" )}} com a context de posicionament, de manera que podeu col·locar elements fills posicionats relatius a ell i no a l'element {{htmlelement("html")}} i finalment el flotador {{cssxref("clear")}} establert en el CSS anterior perquè no interfereixi amb la resta del disseny.</p> + +<pre class="brush: css">.info-box .panels { + height: 352px; + position: relative; + clear: both; +}</pre> + +<p>Finalment, per a aquesta secció, dissenyarem els elements individuals {{htmlelement("article")}} que componen els nostres panells. La primera regla que afegirem serà {{cssxref("position")}} <code>absolute</code> dels panells, i farà que tots quedin asseguts, alineats a {{cssxref("top")}} i {{cssxref("left")}} del seu contenidor {{htmlelement ("div")}} - aquesta part és absolutament clau per a tota aquesta característica de disseny, ja que fa que els panells s'asseguin uns sobre els altres. La regla també proporciona als panells la mateixa alçada de conjunt que el contenidor, i dóna al contingut un farciment, un text {{cssxref("color")}} i un {{cssxref("background-color")}}.</p> + +<p>La segona regla que afegirem aquí fa que un panell amb una <code>class</code> <code>active-panel</code>, establert en ell, tindrà un {{cssxref("z-index")}} d'1, que se li aplicarà, la qual cosa farà que s'asseguin per sobre dels altres panells (els elements posicionats tenen un <code>z-index</code> de 0 per defecte, la qual cosa els posaria a continuació). Una vegada més, afegirem aquesta classe utilitzant JavaScript en el moment adequat.</p> + +<pre class="brush: css">.info-box article { + position: absolute; + top: 0; + left: 0; + height: 352px; + padding: 10px; + color: white; + background-color: #a60000; +} + +.info-box .active-panel { + z-index: 1; +}</pre> + +<h3 id="Afegir_el_nostre_JavaScript">Afegir el nostre JavaScript</h3> + +<p>L'últim pas per fer funcionar aquesta característica és afegir JavaScript. Col·loqueu el següent bloc de codi, exactament com s'escriu, entre les etiquetes d'obertura i tancament {{htmlelement("script")}} (trobareu aquestes a sota del contingut HTML):</p> + +<pre>var tabs = document.querySelectorAll('.info-box li a'); +var panels = document.querySelectorAll('.info-box article'); + +for(i = 0; i < tabs.length; i++) { + var tab = tabs[i]; + setTabHandler(tab, i); +} + +function setTabHandler(tab, tabPos) { + tab.onclick = function() { + for(i = 0; i < tabs.length; i++) { + tabs[i].className = ''; + } + + tab.className = 'active'; + + for(i = 0; i < panels.length; i++) { + panels[i].className = ''; + } + + panels[tabPos].className = 'active-panel'; + } +}</pre> + +<p><span class="short_text" id="result_box" lang="ca"><span>Aquest codi fa el següent:</span></span></p> + +<ul> + <li>Primer guardem una referència a totes les pestanyes i panells en dues variables anomenades <code>tabs</code> i <code>panels</code>, així, fàcilment, podem fer coses amb elles més endavant.</li> + <li>A continuació, utilitzem un bucle <code>for</code> per recórrer totes les pestanyes i executar una funció anomenada <code>setTabHandler()</code> en cadascuna, en el qual s'estableix la funcionalitat que ha de produir-se quan es fa clic en cadascuna d'elles. Quan s'executa, es passa a la funció una referència a la pestanya, en particular, per a la qual s'executa, <code>i</code> un nombre d'índex i que identifica la posició de la pestanya en la matriu <code>tabs</code>.</li> + <li>A la funció <code>setTabHandler()</code>, la pestanya té un controlador d'esdeveniments onclick establert en ell, de manera que quan es fa clic a la pestanya, es produeix el següent: + <ul> + <li>Un bucle <code>for</code> s'utilitza per recórrer totes les pestanyes i eliminar les classes que hi són presents.</li> + <li>Una <code>class</code> <code>active</code> s'estableix a la pestanya en la qual s'ha fet clic - recordeu que, anteriorment, aquesta classe té una regla associada al CSS que estableix el mateix estil {{cssxref("color")}} i {{cssxref("background-color")}} a la pestanya com els panells.</li> + <li>Un bucle <code>for</code> s'utilitza per recórrer tots els panells i eliminar les classes que hi són presents.</li> + <li>Una classe <code>active-panel</code> s'estableix al panell que correspon a la pestanya que es va fer clic - recordeu que anteriorment, aquesta classe té una regla associada al CSS que estableix el seu {{cssxref("z-index")}} a 1, fent que aparegui a la part superior dels altres panells.</li> + </ul> + </li> +</ul> + +<p>Això és tot pel primer exemple. Manteniu obert el vostre codi, ja que l'afegirem a la segona.</p> + +<h2 id="Una_caixa_d'informació_amb_pestanyes_de_posició_fixa">Una caixa d'informació amb pestanyes de posició fixa</h2> + +<p>En el nostre segon exemple, farem el nostre primer exemple - la nostra caixa d'informació - i l'afegirem al context d'una pàgina web completa. Però no només això - li donarem una posició fixa perquè es mantingui en la mateixa posició en la finestra del navegador. Quan el contingut principal es desplaci, la caixa d'informació romandrà en la mateixa posició en la pantalla. El nostre exemple acabat tindrà aquest aspecte:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13364/fixed-info-box.png" style="border-style: solid; border-width: 1px; display: block; height: 585px; margin: 0px auto; width: 1118px;"></p> + +<div class="note"> +<p><strong>Nota</strong>: Podeu veure l'exemple acabat, executant-ho en directe a <a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/fixed-info-box.html">fixed-info-box.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/fixed-info-box.html">codi font</a>). Comproveu-ho per tenir una idea del que serà la construcció d'aquesta secció de l'article.</p> +</div> + +<p>Com a punt de partida, podeu fer servir l'exemple complet de la primera secció de l'article o fer una còpia local de <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">info-box.html</a> des del nostre repositori de Github.</p> + +<h3 id="Addicions_HTML">Addicions HTML</h3> + +<p>En primer lloc, necessitem un codi HTML addicional per representar el contingut principal del lloc web. Afegiu el següent {{htmlelement("section")}} just a sota de l'etiqueta d'apertura {{htmlelement("body")}}, just abans de la secció existent:</p> + +<pre class="brush: html"><section class="fake-content"> + <h1>Fake content</h1> + <p>This is fake content. Your main web page contents would probably go here.</p> + <p>This is fake content. Your main web page contents would probably go here.</p> + <p>This is fake content. Your main web page contents would probably go here.</p> + <p>This is fake content. Your main web page contents would probably go here.</p> + <p>This is fake content. Your main web page contents would probably go here.</p> + <p>This is fake content. Your main web page contents would probably go here.</p> + <p>This is fake content. Your main web page contents would probably go here.</p> + <p>This is fake content. Your main web page contents would probably go here.</p> +</section></pre> + +<div class="note"> +<p><strong>Nota</strong>: Us podeu sentir lliures de canviar el contingut fals per a algun contingut real si ho desitjeu.</p> +</div> + +<h3 id="Canvis_al_CSS_existent">Canvis al CSS existent</h3> + +<p>A continuació, hem de fer petits canvis al CSS existent, per tenir la caixa d'informació col·locada i posicionada Canvieu la regla <code>.info-box</code> per desfer-vos del <code>margin: 0 auto;</code> (Ja no volem que la caixa d'informació estigui centrada), afegiu {{cssxref("position")}}: <code>fixed;</code>, i enganxeu-ho en el {{cssxref("top")}} de la finestra de visualització del navegador.</p> + +<p>Ara ha de ser així:</p> + +<pre class="brush: css">.info-box { + width: 450px; + height: 400px; + position: fixed; + top: 0; +}</pre> + +<h3 id="Estilitzar_el_contingut_principal">Estilitzar el contingut principal</h3> + +<p>L'únic que queda per a aquest exemple és proporcionar al contingut principal amb un estil. Afegiu la següent regla sota la resta del vostre CSS:</p> + +<pre class="brush: css">.fake-content { + background-color: #a60000; + color: white; + padding: 10px; + height: 2000px; + margin-left: 470px; +}</pre> + +<p>Per començar, donem al contingut el mateix {{cssxref("background-color")}}, {{cssxref("color")}}, i {{cssxref("padding")}} com els panells de caixa d'informació. A continuació, li donem un gran {{cssxref("margin-left")}} per moure-ho cap a la dreta, fent espai perquè la caixa d'informació s'assegui, de manera que no se superposi amb qualsevol altre cosa.</p> + +<p>Això marca el final del segon exemple; esperem que trobeu el tercer tan interessant.</p> + +<h2 id="Un_panell_amagat_lliscant"><span id="result_box" lang="ca"><span>Un panell amagat lliscant</span></span></h2> + +<p>L'exemple final que presentarem aquí és un panell que es llisca des de dins i fora de la pantalla en prémer una icona - com s'ha esmentat anteriorment, això és popular per a situacions com ara dissenys de mòbils, on els espais de pantalla disponibles són petits, per la qual cosa no es desitja usar la major part d'ella, mostrant un menú o panell d'informació en lloc de contingut útil.</p> + +<p>El nostre exemple acabat tindrà aquest aspecte:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13366/hidden-sliding-panel.png" style="border-style: solid; border-width: 1px; display: block; height: 521px; margin: 0px auto; width: 950px;"></p> + +<div class="note"> +<p><strong>Nota</strong>: Podeu veure l'exemple acabat, executant-ho en directe a <a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/hidden-info-panel.html">hidden-info-panel.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel.html">codi font</a>). Comproveu-ho per tenir una idea del que serà la construcció d'aquesta secció de l'article.</p> +</div> + +<p>Com a punt de partida, feu una còpia local de <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel-start.html">hidden-info-panel-start.html</a> des del nostre repositori de Github. Això no segueix l'exemple anterior, de manera que cal un nou fitxer d'inici. Fem un cop d'ull al codi HTML del fitxer:</p> + +<pre class="brush: css"><label for="toggle">❔</label> +<input type="checkbox" id="toggle"> +<aside> + + ... + +</aside></pre> + +<p>Per començar, tenim un element {{htmlelement("label")}} i un element {{htmlelement("input")}} - els elements <code><label></code> normalment s'utilitzen per associar una etiqueta de text amb un element de formulari amb finalitats d'accessibilitat (permetent que un usuari de pantalla vegi quina descripció fa amb quin element del formulari). Aquí s'associa amb la casella de verificació <code><input></code> amb els atributs <code>for</code> i <code>id</code>.</p> + +<div class="note"> +<p><strong>Nota</strong>: Hem posat un gran signe d'interrogació en el nostre HTML perquè actuï com la nostra icona d'informació - aquest representa el botó que es premut per mostrar/amagar el panell.</p> +</div> + +<p>Aquí utilitzarem aquests elements per un propòsit lleugerament diferent - un altre efecte secundari útil dels elements <code><label></code> és que podeu fer clic a l'etiqueta de la casella de verificació per a marcar la casella de verificació, així com només la casella de verificació. Això ha portat a la coneguda <a href="https://css-tricks.com/the-checkbox-hack/">checkbox hack</a>, que proporciona una forma lliure de JavaScript per controlar un element mitjançant la commutació d'un botó. L'element que anem a controlar és l'element {{htmlelement("aside")}} que segueix els altres dos (hem deixat el seu contingut fora del llistat del codi anterior per brevetat).</p> + +<p>A les seccions següents explicarem com funciona tot això.</p> + +<h3 id="Estilitzar_els_elements_de_formulari">Estilitzar els elements de formulari</h3> + +<p>Primer tractarem els elements de formulari - afegiu el següent CSS entre les etiquetes {{htmlelement("style")}}:</p> + +<pre class="brush: css">label[for="toggle"] { + font-size: 3rem; + position: absolute; + top: 4px; + right: 5px; + z-index: 1; + cursor: pointer; +} + +input[type="checkbox"] { + position: absolute; + top: -100px; +}</pre> + +<p>La primera regla donar estil el <code><label></code>; aquí tenim:</p> + +<ul> + <li>Establiu una gran {{cssxref("font-size")}} per fer que la icona sigui agradable i gran.</li> + <li>Establiu {{cssxref("position")}} <code>absolute</code>, i utilitzeu {{cssxref("top")}} i {{cssxref("right")}} per col·locar-ho bé a la cantonada superior dreta.</li> + <li>Establiu un {{cssxref("z-index")}} d'1 - això és perquè quan el panell d'informació estigui dissenyat i es mostri, no cobreixi la icona; En lloc d'això, la icona s'asseura sobre d'ell, de manera que es pogui tornar a prémer per ocultar el panell d'informació.</li> + <li>S'ha utilitzat la propietat {{cssxref("cursor")}} per canviar el cursor del ratolí quan es mou sobre la icona, amb un punter de mà (com el que es veu quan es planeja sobre els enllaços), com una pista visual addicional per als usuaris com que la icona fa alguna cosa interessant.</li> +</ul> + +<p>La segona regla estableix {{cssxref("position")}} <code>absolute</code> en l'element <code><input></code> de casella de verificació real i l'oculta a la part superior de la pantalla. De fet, no volem veure això a la nostra interfície d'usuari.</p> + +<h3 id="Estilitzar_el_panell">Estilitzar el panell</h3> + +<p>Ara és hora de donar-li estil el propi panell lliscant. Afegiu la següent regla al final del vostre CSS:</p> + +<pre class="brush: css">aside { + background-color: #a60000; + color: white; + + width: 340px; + height: 98%; + padding: 10px 1%; + + position: fixed; + top: 0; + right: -370px; + + transition: 0.6s all; +}</pre> + +<p>Hi ha molt a fer aquí, analitzem-ho a poc a poc:</p> + +<ul> + <li>En primer lloc, establim {{cssxref("background-color")}} i {{cssxref("color")}} en la caixa d'informació.</li> + <li>A continuació, establim un {{cssxref("width")}} fix al panell i feu que {{cssxref("height")}} sigui tota l'alçada de la finestra de visualització del navegador.</li> + <li>També inclourem un {{cssxref("padding")}} per compensar l'amplada/alçada al valor total que volem (això és necessari ja que no hem establert <code>box-sizing: border-box;</code> en aquest exemple).</li> + <li>A continuació, establim una {{cssxref("position")}}: <code>fixed;</code> en el panell perquè sempre aparegui al mateix lloc, fins i tot si la pàgina té contingut per desplaçar-se. Ho peguem a la {{cssxref("top")}} de la finestra de visualització, i ho configurem perquè de manera predeterminada estigui fora de pantalla a la {{cssxref("right")}}.</li> + <li>Finalment, establim una {{cssxref("transition")}} a l'element. Les transicions són una característica interessant que permet fer canvis entre estats que succeeixen suaument, en lloc de simplement fer "on", "off" abruptament. En aquest cas, intentem que el panell llisqui suaument a la pantalla quan es marca la casella de verificació. (O dit d'una altra manera, quan es fa clic a la icona del signe d'interrogació - recordeu, fent clic en el <label>, marcarà la casella de verificació associada! Us explicàvem que era un hack). Aprendreu molt més sobre...</li> +</ul> + +<h3 id="Seleccionar_el_estat_marcat">Seleccionar el estat marcat</h3> + +<p>Hi ha una mica de CSS per afegir - poseu el següent al final del vostre CSS:</p> + +<pre class="brush: css">input[type=checkbox]:checked + aside { + right: 0px; +}</pre> + +<p>El selector és bastant complex aquí - estem seleccionant l'element <code><aside></code> adjacent a l'element <code><input></code>, però només quan està marcat (tingueu en compte l'ús de la pseudo-classe {{cssxref (": checked")}} per aconseguir això). Quan aquest és el cas, estem establint la propietat {{cssxref("right")}} de <code><aside></code> a 0px, el que fa que el panell aparegui novament en la pantalla (suaument a causa de la transició). En fer clic en l'etiqueta, torna a desmarcar la casella de verificació, que torna a ocultar el panell.</p> + +<p>Així que aquí ho teniu - una manera bastant intel·ligent, lliure de Javascript, per crear un efecte de botó alternatiu. Això funcionarà en IE9 i superiors (la transició suau funcionarà en IE10 i superiors). Aquest efecte té algunes preocupacions - això és abusar una mica d'elements de forma (no estan destinats per a aquest propòsit), i l'efecte no és el millor en termes d'accessibilitat - l'etiqueta no es pot enfocar de manera predeterminada, i l'ús no semàntic dels elements de formulari pot causar problemes amb els lectors de pantalla. JavaScript i un enllaç o un botó poden ser més apropiat, però encara és divertit experimentar.</p> + +<h2 id="Resum">Resum</h2> + +<p>Així que arrodonim el nostre cop d'ull en el posicionament - ara com ara, heu de tenir una idea de com funciona la mecànica bàsica, així com la comprensió de com començar a aplicar-los en la construcció d'algunes característiques interessants de la interfície d'usuari. No us preocupeu sinó vau rebre tot això immediatament - el posicionament és un tema bastant avançat, i sempre podeu treballar a través dels articles de nou, per ajudar-vos en la vostra comprensió. El següent tema al que ens referirem és a Flexbox.</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p> diff --git a/files/ca/learn/css/disseny_css/flexbox/index.html b/files/ca/learn/css/disseny_css/flexbox/index.html new file mode 100644 index 0000000000..37f31f619b --- /dev/null +++ b/files/ca/learn/css/disseny_css/flexbox/index.html @@ -0,0 +1,330 @@ +--- +title: Flexbox +slug: Learn/CSS/Disseny_CSS/Flexbox +tags: + - Article + - Beginner + - CSS + - CSS layouts + - CodingScripting + - Flexible Boxes + - Guide + - Layout + - Layouts + - Learn + - flexbox +translation_of: Learn/CSS/CSS_layout/Flexbox +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary"><a href="/ca/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a> és un mètode de disseny de pàgina web unidimensional que distribueix els elements de la pàgina web en files o en columnes. Els elements són «flexibles» i omplen tot l’espai de més o s’encongeixen per caber en espais més petits. Aquest article n’explica els fonaments.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisits:</th> + <td><span id="result_box" lang="ca">Conceptes bàsics d'HTML</span> (consulta la <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l’HTML</a>), <span id="result_box" lang="ca">i nocions de com funciona el CSS</span> (consulta la <a href="/ca/docs/Learn/CSS/First_steps">Introducció al CSS</a>).</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Aprendre a utilitzar el sistema de disseny de pàgines web Flexbox.</td> + </tr> + </tbody> +</table> + +<h2 id="Per_què_Flexbox">Per què Flexbox?</h2> + +<p>Durant molt de temps, les úniques eines fiables compatibles amb els navegadors, disponibles per crear dissenys de pàgina web amb CSS eren mètodes com ara els <a href="/ca/docs/Learn/CSS/Disseny_CSS/Flotadors">elements flotants (<em>floats</em>)</a> i el <a href="/ca/docs/Learn/CSS/Disseny_CSS/Posicionament">posicionament</a>. Estan bé i funcionen, però d'alguna manera també són més limitats i frustrants.</p> + +<p>Uns requisits senzills de disseny de pàgina web com els que enumerem a continuació són difícils o impossibles d'aconseguir amb aquestes eines d’una manera còmoda i flexible:</p> + +<ul> + <li>Que un bloc de contingut es centri verticalment dins de l’element pare.</li> + <li>Que tots els elements fills d'un contenidor ocupin la mateixa quantitat d'amplada/alçada, independentment de la quantitat d'amplada/alçada que hi hagi disponible.</li> + <li>Que totes les columnes d'un disseny de pàgina en columnes múltiples adoptin la mateixa alçada, encara que continguin una quantitat de contingut diferent.</li> +</ul> + +<p>Com veureu en les properes seccions, Flexbox facilita moltes tasques de disseny de pàgina web. Aprofundim-hi!</p> + +<h2 id="Un_exemple_senzill">Un exemple senzill</h2> + +<p>En aquest article, et farem treballar en un seguit d'exercicis que t’ajudaran a entendre com funciona Flexbox. Per començar, fes una còpia local del primer fitxer d'inici, <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a>, que trobaràs en el nostre repositori de GitHub; carrega’l en un navegador modern (com Firefox o Chrome) i consulta’n el codi en el teu editor. També ho pots <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html">veure en viu aquí</a>.</p> + +<p>Observa que hi ha un element {{htmlelement("header")}} amb un títol d’encapçalament de nivell superior i un element {{htmlelement("section")}} que conté tres elements {{htmlelement("article")}}. Els farem servir per a crear un disseny de tres columnes força habitual.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p> + +<h2 id="Especificar_els_elements_flexbox">Especificar els elements flexbox</h2> + +<p>Per començar hem de decidir quins elements volem configurar perquè es comportin com caixes flexibles. Per tal de fer-ho, establim un valor especial de {{cssxref("display")}} en l'element pare dels elements als quals afectarà. En aquest cas, volem que siguin els elements {{htmlelement("article")}}, per la qual cosa ho configurem en l’element {{htmlelement("section")}}:</p> + +<pre class="brush: css notranslate">section { + display: flex; +}</pre> + +<p>Això fa que l'element <code><section></code> esdevingui un <strong>contenidor flexible</strong> i els seus fills <strong>ítems flexibles</strong>. El resultat d'això hauria de presentar un aspecte semblant a això:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13408/flexbox-example2.png" style="border-style: solid; border-width: 1px; display: block; height: 348px; margin: 0px auto; width: 800px;"></p> + +<p>Per tant, aquesta declaració única, ens dona tot el que necessitem; increïble, oi? Tenim el nostre disseny de pàgina de columna múltiple amb columnes de la mateixa mida, i que tenen la mateixa alçada. Això és perquè els valors predeterminats que s’han donat als elements flex (els fills del contenidor flex) estan dissenyats per a resoldre problemes comuns com aquest.</p> + +<p>Per deixar-ho clar, reiterem el que passa aquí. L’element al qual hem donat un valor de {{cssxref("display")}} de <code>flex</code> actua com un element de nivell de bloc en termes de com interactua amb la resta de la pàgina, però els seus fills es presenten com a elements flexibles. La següent secció explicarà amb més detall què significa això. Fixeu-vos també que podeu utilitzar un valor de <code>display</code> d'<code>inline-flex</code> si voleu disposar els fills d'un element com a elements flexibles, però que aquest element es comporti com un element en línia.</p> + +<h2 id="El_model_flex">El model flex</h2> + +<p>Els elements que es disposen com caixes flexibles, es distribueixen al llarg de dos eixos:</p> + +<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png" style="display: block; margin: 0px auto;"></p> + +<ul> + <li>L'<strong>eix principal</strong> (<strong><em>main axis</em></strong>) és l'eix que corre en la direcció en què es disposen els elements flex (p. ex., com files al llarg de la pàgina o com columnes, cap avall de la pàgina). L'inici i el final d'aquest eix reben els noms d’<strong>inici principal</strong> (<strong><em>main start</em></strong>) i <strong>final principal</strong> (<em><strong>main end</strong></em>).</li> + <li>L'<strong>eix transversal</strong> (<strong><em>cross axis</em></strong>) és l'eix que corre perpendicular a la direcció en què es disposen els elements flexibles. L'inici i el final d'aquest eix s'anomenen <strong>inici transversal</strong> (<strong><em>cross-start</em></strong>) i <strong>final tranversal</strong> (<strong><em>cross-end</em></strong>).</li> + <li>L'element pare que està configurat amb <code>display: flex</code> (la secció {{htmlelement("section")}} del nostre exemple) s'anomena <strong>contenidor flex</strong> (<strong><em>flex container</em></strong>).</li> + <li> + <p>Els elements que es disposen com caixes flexibles dins del contenidor flex s'anomenen <strong>elements flexibles</strong> (flex items) (els elements {{htmlelement("article")}} del nostre exemple).</p> + </li> +</ul> + +<p>Tingues present aquesta terminologia a mesura que avances en les seccions. Sempre pots tornar enrere si en algun moment l’ús d’aquests termes et genera confusions.</p> + +<h2 id="Columnes_o_files"><span id="result_box" lang="ca">Columnes o files?</span></h2> + +<p>Flexbox proporciona una propietat anomenada {{cssxref("flex-direction")}}, que especifica en quina direcció discorre l'eix principal (en quina direcció es disposen les caixes flexibles fill); per defecte, està definida en <code>row</code>, que fa que els elements flexibles es disposin en una fila en la direcció de l'idioma predeterminat amb què funciona el teu navegador (d'esquerra a dreta, en el cas d'un navegador en català).</p> + +<p>Prova d'afegir a la teva regla <code><section></code> la declaració següent:</p> + +<pre class="brush: css notranslate">flex-direction: column;</pre> + +<p>Observa que això posa de nou els elements en una disposició en columna, igual que estaven abans d’afegir-hi el CSS. Abans de continuar, elimina aquesta declaració del teu exemple.</p> + +<div class="note"> +<p><strong>Nota</strong>: També pots disposar elements flexibles en direcció inversa amb els valors <code>row-reverse</code> i <code>column-reverse</code>. Experimenta també amb aquests valors.</p> +</div> + +<h2 id="Ajust">Ajust</h2> + +<p>Un problema que sorgeix quan tens un disseny de pàgina amb una amplada o una alçada fixa és que els fills de l’element flexbox poden desbordar el contenidor i trencar el disseny de la pàgina. Fes un cop d'ull al nostre exemple <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html">flexbox-wrap0.html</a> i <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html">mira’l en directe</a> (fes primer una còpia local d'aquest fitxer, si vols seguir amb aquest exemple):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13410/flexbox-example3.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;"></p> + +<p>Aquí observem que els fills desborden el contenidor. Una manera de solucionar això és afegir a la teva regla <code><a href="/ca/docs/Web/HTML/Element/section"><section></a></code> la declaració següent:</p> + +<pre class="brush: css notranslate">flex-wrap: wrap;</pre> + +<p>Afegeix també la declaració següent a la teva regla <code><a href="/ca/docs/Web/HTML/Element/article"><article></a></code></p> + +<pre class="brush: css notranslate">flex: 200px;</pre> + +<p>Ara prova-ho; observa que el disseny es veu força més bé ara que hi has inclòs això:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13412/flexbox-example4.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;">Ara hi ha diverses files, i a cada fila hi ha tantes elements fill flexbox com és raonable que hi hagi, i si hi ha cap desbordament, es genera una altra línia. La declaració <code>flex: 200px</code> que hem establer per als elements <code><article></code> significa que cada article tindrà com a mínim una amplada de 200px; més endavant parlarem d'aquesta propietat amb més detall. També pots observar que els últims fills de l'última fila s’han fet més amples, de manera que la fila està igualment tota plena.</p> + +<p>Però encara hi podem fer més. Primer de tot, prova de canviar el valor de la propietat {{cssxref("flex-direction")}} a <code>row-reverse</code>; observa que encara tens el disseny de files múltiples, però ara comença des de la cantonada oposada de la finestra del navegador i flueix en sentit invers.</p> + +<h2 id="La_propietat_flex-flow_abreujada">La propietat <code>flex-flow</code> abreujada</h2> + +<p>En aquest punt, val la pena observar que hi ha una propietat abreujada per a {{cssxref("flex-direction")}} i {{cssxref("flex-wrap")}}, que és: {{cssxref("flex-flow")}}. Per exemple, pots substituir:</p> + +<pre class="brush: css notranslate">flex-direction: row; +flex-wrap: wrap;</pre> + +<p>per</p> + +<pre class="brush: css notranslate">flex-flow: row wrap;</pre> + +<h2 id="Dimensió_flexible_dels_elements_flexibles">Dimensió flexible dels elements flexibles</h2> + +<p>Tornem ara al nostre primer exemple i observem com podem controlar quina proporció d'espai poden ocupar els elements flexibles. Fes servir la teva còpia local de <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a>, o fes una còpia de <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html">flexbox1.html</a> com a punt de partida nou (també el pots <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html">veure en viu</a>).</p> + +<p>Primer, afegeix la regla següent al final del teu CSS:</p> + +<pre class="brush: css notranslate">article { + flex: 1; +}</pre> + +<p>Es tracta d'un valor de proporció sense unitat que determina quina quantitat de l'espai disponible al llarg de l'eix principal ocupa cada element flexible. En aquest cas donem a cada element {{htmlelement("article")}} un valor de 1, que significa que tots ocuparan una quantitat igual de l'espai que sobri després que s'hagin establert elements com ara l’àrea de farciment i el marge. És una proporció, que significa que donar a cada element flexible un valor de 400.000 tindria exactament el mateix efecte.</p> + +<p>A continuació, afegeix la regla següent a sota de l'anterior:</p> + +<pre class="brush: css notranslate">article:nth-of-type(3) { + flex: 2; +}</pre> + +<p>Aleshores, actualitza. Observa que el tercer element {{htmlelement("article")}} ocupa el doble de l'amplada disponible que els altres dos; perquè ara hi ha en total quatre unitats proporcionals disponibles. Els dos primers elements flexibles en tenen una cadascun, i prenen 1/4 de l'espai disponible cadascun. El tercer té dues unitats, de manera que ocupa 2/4 de l'espai disponible (o el que és el mateix, la meitat).</p> + +<p>També pots especificar un valor de mida mínima per al valor flex. Actualitza les teves regles per als elements <code><article></code>, així:</p> + +<pre class="brush: css notranslate">article { + flex: 1 200px; +} + +article:nth-of-type(3) { + flex: 2 200px; +}</pre> + +<p>Això bàsicament estableix que «Es dona a cada element flexible primer 200px de l'espai disponible. A continuació, la resta de l'espai disponible es reparteix segons les unitats de proporció». Actualitza i observa com es reparteix l'espai ara.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p> + +<p>El valor real de flexbox es pot apreciar en la flexibilitat / capacitat de resposta; si canvies la mida de la finestra del navegador o afegeixes un altre element {{htmlelement("article")}}, el disseny de pàgina encara funciona.</p> + +<h2 id="Propietat_flex_abreujada_o_no_abreujada">Propietat <code>flex</code> abreujada o no abreujada</h2> + +<p>{{Cssxref("flex")}} és una propietat de abreujada que pot especificar fins a tres valors diferents:</p> + +<ul> + <li>El valor de la proporció sense unitat que hem comentat abans. Es pot especificar per a cada element usant la propietat no abreujada {{cssxref("flex-grow")}}.</li> + <li>Un segon valor de proporció sense unitat, {{cssxref("flex-shrink")}}, que entra en joc quan els elements flexibles desborden de l’element contenidor. Especifica quanta de la quantitat que desborda es treu de la mida de cada element flexible per a evitar que desbordi del contenidor. Aquesta és una característica avançada de flexbox i no la detallarem més en aquest article.</li> + <li>El valor mínim de la mida, que hem comentat abans. Es pot especificar per a cada element usant el valor no abreujat {{cssxref("flex-base")}}.</li> +</ul> + +<p>Recomanem evitar l'ús de les propietats flex no abreujades, si no és que t’és realment necessari (per exemple, perquè has de substituir alguna configuració anterior). Comporta escriure una gran quantitat de codi addicional, i pot acabar sent una mica confús.</p> + +<h2 id="Alineació_horitzontal_i_vertical">Alineació horitzontal i vertical</h2> + +<p>També pots utilitzar funcions flexbox per a alinear elements flexibles al llarg dels eixos principals o transversals. Ho expliquem amb un nou exemple, <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html">flex-align0.html</a> (també el pots <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html">veure en viu</a>), que convertirem en una bonica barra d'eines/botons flexible. De moment, observa aquesta barra de menú horitzontal amb alguns botons agrupats a la cantonada superior esquerra.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13414/flexbox-example5.png" style="display: block; height: 77px; margin: 0px auto; width: 600px;"></p> + +<p><span id="result_box" lang="ca">Primer, fes una còpia local d'aquest exemple</span>.</p> + +<p>A continuació, afegeix a la part inferior del CSS de l'exemple el codi següent:</p> + +<pre class="brush: css notranslate">div { + display: flex; + align-items: center; + justify-content: space-around; +}</pre> + +<p>Actualitza la pàgina i observa que els botons estan ben centrats, horitzontalment i verticalment. Ho hem fet amb dues propietats noves.</p> + +<p>El control {{cssxref("align-items")}} disposa els elements flexibles sobre l'eix transversal.</p> + +<ul> + <li>El valor predeterminat és <code>stretch</code>, que estira tots els elements flexibles fins a ocupar tot l’espai de l’element pare en la direcció de l'eix transversal. Si l’element pare no té una amplada fixa en la direcció de l'eix transversal, tots els elements flexibles es faran tan llargs com l’element flexible més llarg. Per això el nostre primer exemple tenia per defecte columnes de la mateixa alçada.</li> + <li>El valor <code>center</code> que hem utilitzat en el codi anterior manté les dimensions intrínseques dels elements, però els centrats al llarg de l'eix transversal. És per això que els botons d’aquest exemple estan centrats verticalment.</li> + <li>També pots tenir valors com <code>flex-start</code> i <code>flex-end</code>, que alineen tots els elements al principi i al final de l'eix transversal, respectivament. Consulta’n tots els detalls en {{cssxref("align-items")}}.</li> +</ul> + +<p>Pots anul·lar el comportament {{cssxref("align-items")}} per a elements flexibles individuals amb la propietat {{cssxref("align-self")}}. Per exemple, afegeix al teu CSS el codi el següent:</p> + +<pre class="brush: css notranslate">button:first-child { + align-self: flex-end; +}</pre> + +<p>Dona un cop d'ull a l'efecte que hi produeix i retira de nou aquest codi quan hagis acabat.</p> + +<p>La propietat {{cssxref("justify-content")}} controla on s’ubiquen els elements flexibles sobre l'eix principal.</p> + +<ul> + <li>El valor per defecte és <code>flex-start</code>, que col·loca tots els elements al principi de l'eix principal.</li> + <li>Pots fer servir <code>flex-end</code> perquè es col·loquin al final.</li> + <li>El valor <code>center</code> també és un valor per a <code>justify-content</code> i posa els elements flexibles al centre de l'eix principal.</li> + <li>El valor que hem utilitzat abans, <code>space-around</code>, és útil perquè distribueix tots els elements sobre l'eix principal de manera uniforme i deixa una mica d'espai en cada extrem.</li> + <li>Hi ha un altre valor, <code>space-between</code>, que és molt similar a <code>space-around</code>, però que no deixa cap espai als extrems.</li> +</ul> + +<p>T’animem a jugar amb aquests valors i veure com funcionen abans de continuar.</p> + +<h2 id="Ordena_els_elements_flexibles">Ordena els elements flexibles</h2> + +<p>Flexbox també té una característica que canvia l'ordre de disposició dels elements flexibles sense afectar l'ordre d'origen. Aquesta és una altra característica que és impossible de fer amb els mètodes tradicionals de disseny de pàgines web.</p> + +<p>El codi per a això és senzill: afegeix al codi d'exemple de la barra de botons el codi CSS següent:</p> + +<pre class="brush: css notranslate">button:first-child { + order: 1; +}</pre> + +<p>Actualitza, i observa que ara el botó «Smile» s'ha mogut al final de l'eix principal. Parlarem de com això funciona amb una mica més detall:</p> + +<ul> + <li>Per defecte, tots els elements flexibles tenen un valor d’ordre ({{cssxref("order")}}) de 0.</li> + <li>Els elements flexibles que estan configurats amb un valor d’ordre més alt apareixen més endavant en l'ordre de visualització que els elements amb valors d’ordre més baix.</li> + <li>Els elements flexibles que tenen el mateix valor d'ordre apareixen en l’ordre d'origen. Així, si hi ha quatre elements que tenen configurats els valors d'ordre 2, 1, 1 i 0, respectivament, l’ordre de visualització serà 4t, 2n, 3r i 1r.</li> + <li>El 3r element apareix després del 2n perquè té el mateix valor d'ordre i està després en l'ordre d'origen.</li> +</ul> + +<p>Pots establir valors d'ordre negatius i fer que els elements apareguin abans que els elements amb un ordre 0. Per exemple, pots fer que el botó «Blush» aparegui al principi de l'eix principal amb la següent regla:</p> + +<pre class="brush: css notranslate">button:last-child { + order: -1; +}</pre> + +<h2 id="Caixes_flexibles_imbricades">Caixes flexibles imbricades</h2> + +<p>Amb flexbox és possible crear dissenys força complexos. És del tot correcte establir que un element flexible sigui també un contenidor flexible, de manera que els elements fills també es disposin com caixes flexibles. Dona un cop d'ull a <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html">complex-flexbox.html</a> (o també el pots <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html">veure en viu</a>).</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13418/flexbox-example7.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p>L'HTML d’això és força senzill. Hi ha un element {{htmlelement("section")}} que conté tres elements {{htmlelement("article")}}. El tercer element {{htmlelement("article")}} conté tres elements {{htmlelement("div")}}:</p> + +<pre class="notranslate">section - article + article + article - div - button + div button + div button + button + button</pre> + +<p>Observa el codi que hem utilitzat per al disseny.</p> + +<p>En primer lloc, establim que els fills de {{htmlelement("section")}} es disposin com caixes flexibles.</p> + +<pre class="brush: css notranslate">section { + display: flex; +}</pre> + +<p>A continuació, establim alguns valors flex en els propis elements {{htmlelement("article")}}. Aquí cal tenir en compte la 2a regla; configurem el tercer element {{htmlelement("article")}} de manera que els seus elements fills es disposin també com elements flexibles, però aquesta vegada en columna.</p> + +<pre class="brush: css notranslate">article { + flex: 1 200px; +} + +article:nth-of-type(3) { + flex: 3 200px; + display: flex; + flex-flow: column; +} +</pre> + +<p>A continuació, seleccionem el primer element {{htmlelement("div")}}. Utilitzem la declaració <code>flex: 1 100px;</code> perquè hi doni efectivament una alçada mínima de 100px, aleshores en configurem els elements fills (els elements {{htmlelement("button")}}) perquè també siguin elements flexibles. Els distribuïm en fila perquè ocupin tot l’espai amb la propietat <code>wrap</code> i els alineem al centre de l'espai disponible, com hem fet en l'exemple del botó individual que hem vist abans.</p> + +<pre class="brush: css notranslate">article:nth-of-type(3) div:first-child { + flex: 1 100px; + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: space-around; +}</pre> + +<p>Finalment, establim les dimensions del botó, però la qüestió interessant és que hi donem un valor de flex de 1. Això té un efecte molt interessant, que pots observar si canvies la mida de l'amplada de la finestra del navegador. Els botons ocuparan tant d’espai com puguin i es disposaran sobre la mateixa línia tant com sigui possible, però quan ja no càpiguen amb comoditat a la mateixa línia, cauran a la línia següent.</p> + +<pre class="brush: css notranslate">button { + flex: 1; + margin: 5px; + font-size: 18px; + line-height: 1.5; +}</pre> + +<h2 id="Compatibilitat_amb_altres_navegadors">Compatibilitat amb altres navegadors</h2> + +<p>Flexbox és compatible amb la majoria de navegadors nous: Firefox, Chrome, Opera, Microsoft Edge i IE 11, i les versions més noves d'Android/iOS, etc. No obstant això, cal tenir en compte que encara hi ha navegadors antics en ús que no admeten Flexbox (o bé n’admeten una versió antiga i desactualitzada).</p> + +<p>Mentre ets en procés d’aprendre i experimentar, això no importa gaire; però si consideres l'ús de flexbox en un lloc web real, has de fer proves i assegurar-te que la teva experiència d'usuari continua sent acceptable en el màxim nombre de navegadors possible.</p> + +<p>Flexbox és una mica més complicat que altres característiques CSS. Per exemple, si un navegador no té ombres CSS, probablement el lloc web serà encara usable. En canvi, la no-compatibilitat amb les característiques de flexbox probablement trencarà del tot el disseny i inutilitzarà el lloc web.</p> + +<p>En un altre mòdul parlarem de les estratègies per a superar els complexos problemes de compatibilitat dels navegadors.</p> + +<h2 id="Posa_a_prova_les_teves_habilitats">Posa a prova les teves habilitats</h2> + +<p>Hem vist moltes coses en aquest article. En recordes la informació més important? Trobaràs més tests per poder comprovar si has retingut la informació abans de seguir a <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills">Test your skills: Flexbox</a>.</p> + +<h2 id="Resum">Resum</h2> + +<p>Això clou el nostre recorregut pels fonaments de flexbox. Esperem que t’hagis divertit i que sàpigues jugar-hi mentre continues endavant amb el teu aprenentatge. A continuació, veurem un altre aspecte important dels dissenys CSS, els sistemes de graella.</p> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div> diff --git a/files/ca/learn/css/disseny_css/flotadors/index.html b/files/ca/learn/css/disseny_css/flotadors/index.html new file mode 100644 index 0000000000..25d2fe01a6 --- /dev/null +++ b/files/ca/learn/css/disseny_css/flotadors/index.html @@ -0,0 +1,516 @@ +--- +title: Flotadors (Floats) +slug: Learn/CSS/Disseny_CSS/Flotadors +tags: + - Article + - Beginner + - CSS + - Clearing + - CodingScripting + - Floats + - Guide + - Layout + - columns + - multi-column +translation_of: Learn/CSS/CSS_layout/Floats +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</div> + +<p>Originalment pensada per a flotar imatges dins de blocs de text, la propietat {{cssxref("float")}} va esdevenir una de les eines més utilitzades per a crear dissenys multicolumna a les pàgines web. Amb l'arribada de Flexbox i Grid ha tornat ara al seu propòsit original, tal com s'explica en aquest article.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td>HTML bàsic (vegeu <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a>), i una idea de com funciona CSS (vegeu <a href="/ca/docs/Learn/CSS/First_steps">Introducció a CSS</a>.)</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Aprendre a crear elements flotants a les pàgines web, i a fer servir la propietat <em>clear</em> i altres mètodes per a netejar els elements flotants.</td> + </tr> + </tbody> +</table> + +<h2 id="La_història_dels_elements_flotants">La història dels elements flotants</h2> + +<p>La propietat {{cssxref("float")}} fou introduïda per a permetre als desenvolupadors implementar dissenys senzills que incloguessin una imatge flotant dins d'una columna de text, amb el text envoltant la part esquerra o dreta de la imatge. El tipus de cosa que trobes habitualment en el disseny d'un diari.</p> + +<p>Però els desenvoupadors web aviat s'adonaren que podien flotar qualsevol cosa, i no només les imatges, pel que el seu ús s'amplià, per exemple, creant efectes de disseny divertits com els d'aquestes <a href="https://css-tricks.com/snippets/css/drop-caps/">caplletres</a>.</p> + +<p>Els elements flotants han estat utitlitzats habitualment per a crear dissenys web complets amb múltiples columnes situades l'una al costat de l'altra (el comportament per defecte seria que les columnes se situessin les unes sota les altres, en el mateix ordre en què apareixen al codi font). Ara hi ha disponibles tècniques més modernes i millors, que explorarem més endavant en aquest mòdul, per la qual cosa l'ús de {{cssxref("float")}} d'aquesta manera s'hauria de contemplar com una <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">tècnica antiquada</a>.</p> + +<p>En aquest article ens centrarem en l'ús apropiat de la propietat {{cssxref("float")}}.</p> + +<h2 id="Un_exemple_de_float_simple">Un exemple de float simple</h2> + +<p>Explorem com utilitzar els <em>float</em>. Començarem amb un exemple realment simple que inclou un bloc de text flotant al voltant d'un element. Pots acompanyar-nos creant un fitxer <code>index.html</code> al teu ordinador, omplint-lo amb <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">una plantilla HTML simple</a>, i inserint el codi següent als llocs adequats. Al final de la secció podràs veure un exemple en viu de com hauria de ser el codi final.</p> + +<p>Primer, comencem amb una mica d'HTML simple — afegeix el següent al cos del teu HTML, eliminant qualsevol altra cosa que hi hagués abans:</p> + +<pre class="brush: html notranslate"><h1>Exemple simple de caixa flotant</h1> + +<div class="box">Caixa flotant</div> + +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. </p> + +<p>Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></pre> + +<p>Ara aplica el següent CSS al teu HTML (fent servir un element {{htmlelement("style")}} o un {{htmlelement("link")}} per a separar el fitxer <code>.css</code> — tu tries):</p> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; + font: .9em/1.2 Arial, Helvetica, sans-serif +} + +.box { + width: 150px; + height: 100px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +}</pre> + +<p>Si deses y recarregues la pàgina, veuràs quelcom semblant a allò que esperaries: la caixa es troba per sobre del text, en un flux normal. Per a flotar el text al voltant, afegeix les propietats {{cssxref("float")}} i {{cssxref("margin-right")}} a la regla <code>.box</code>:</p> + +<pre class="brush: css notranslate">.box { + float: left; + margin-right: 15px; + width: 150px; + height: 100px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +}</pre> + +<p>Ara, si deses i recarregues, podràs veure alguna cosa semblant a això:</p> + +<div id="Float_1"> +<div class="hidden"> +<h6 id="Float_Example_1">Float Example 1</h6> + +<pre class="brush: html notranslate"><h1>Exemple simple de caixa flotant</h1> + +<div class="box">Caixa flotant</div> + +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> + +<p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +</pre> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; + font: .9em/1.2 Arial, Helvetica, sans-serif +} + +.box { + float: left; + margin-right: 15px; + width: 150px; + height: 150px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Float_1', '100%', 500) }}</p> + +<p>Analitzem ara com funciona el <em>float</em> — l'element amb el <em>float</em> aplicat (l'element {{htmlelement("div")}} en aquest cas) és extret del flux normal del document i està enganxat al costat esquerre del seu element contenidor pare ({{htmlelement("body")}}, en aquest cas). Qualsevol contingut que estigui per sota de l'element flotat en el flux normal, ara l'envoltarà, omplint l'espai a la dreta fins a la part superior de l'element flotant. Allà s'aturarà.</p> + +<p>Flotar el contingut a la dreta té exactament el mateix efecte, però a la inversa — l'element flotat s'enganxarà a la dreta, i el contingut l'envoltarà per l'esquerra. Prova de canviar el valor de la propietat <em>float</em> a <code>right</code> i substitueix {{cssxref("margin-right")}} per {{cssxref("margin-left")}} al darrer conjunt de regles per veure el resultat.</p> + +<p>Tot i que podem afegir un marge a l'element flotant per alunyar el text, no podem afegir un marge al text per allunyar-lo del flotant. Això es deu al fet que un element flotant s'extreu del flux normal i les caixes dels següents elements segueixen per darrera del flotador. Pots comprovar-ho fent alguns canvis a l'exemple.</p> + +<p>Afegeix una clase <code>special</code> al primer paràgraf de text, el que succeeix immediatament a la caixa flotant, i després afegeix al teu CSS les següents regles. Això li donarà al paràgraf següent un color de fons.</p> + +<pre class="brush: css notranslate">.special { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; +} +</pre> + +<p>Per tal que l'efecte sigui més fàcil de veure, canvia el <code>margin-right</code> del teu element flotant a <code>margin</code>, per obtener espai al voltant de l'element flotant. Veuràs que el fons del paràgraf passa just per sota de la caixa flotant, com en l'exemple inferior.</p> + +<div id="Float_2"> +<div class="hidden"> +<h6 id="Float_Example_2">Float Example 2</h6> + +<pre class="brush: html notranslate"><h1>Exemple simple de caixa flotant</h1> + +<div class="box">Caixa flotant</div> + +<p class="special">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> + +<p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; + font: .9em/1.2 Arial, Helvetica, sans-serif +} + +.box { + float: left; + margin: 15px; + width: 150px; + height: 150px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} + +.special { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Float_2', '100%', 500) }}</p> + +<p>Els quadres de línia del següent element s'han escurçat perquè el text discorri al voltant del flotador, però com que el flotador s'ha eliminat del flux normal, el quadre al voltant del paràgraf encara manté l'ample complet.</p> + +<h2 id="Netejant_floats">Netejant floats</h2> + +<p>Hem vist que el flotador s'elimina del flux normal i que els altres elements es mostraran al seu costat. Per tant, si volem evitar que un element a continuació es mogui cap amunt, hem de netejar el <em>float</em>. Això s'aconsegueix amb la propietat {{cssxref ("clear")}}.</p> + +<p>En l'HTML de l'exemple anterior, afegeix una classe <code>cleared</code> al segon paràgraf sota de l'element flotant. Després, afegeix això al teu CSS:</p> + +<pre class="brush: css notranslate">.cleared { + clear: left; +} +</pre> + +<div id="Float_3"> +<div class="hidden"> +<h6 id="Float_Example_3">Float Example 3</h6> + +<pre class="brush: html notranslate"><h1>Exemple simple de caixa flotant</h1> + +<div class="box">Caixa flotant</div> + +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> + +<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + </pre> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; + font: .9em/1.2 Arial, Helvetica, sans-serif +} + +.box { + float: left; + margin: 15px; + width: 150px; + height: 150px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} + +.cleared { + clear: left; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Float_3', '100%', 600) }}</p> + +<p>Hauries de veure que el següent paràgraf neteja l'element flotant i ja no apareix al seu costat. La propietat <code>clear</code> accepta els següents valors:</p> + +<ul> + <li><code>left</code>: neteja els elements flotats a l'esquerra.</li> + <li><code>right</code>: neteja els elements flotats a la dreta.</li> + <li><code>both</code>: neteja qualsevol element flotat, a l'esquerra o a la dreta.</li> +</ul> + +<h2 id="Netejar_la_caixa_contenidora_dun_float">Netejar la caixa contenidora d'un float</h2> + +<p>Ara ja saps com netejar un element que es troba a continuació d'un element flotant, però observa el que succeeix si tens un flotant alt i un paràgraf curt, amb una caixa convenidora que envolta ambdós elements. Modifica el teu document per tal que el primer paràgraf i la caixa flotant es trobin dins d'un {{htmlelement("div")}} amb una classe <code>wrapper</code>.</p> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box">Caixa flotant</div> + + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.</p> +</div> +</pre> + +<p>Al teu CSS, afegeix la següent regla per a la teva classe <code>.wrapper</code> i després recarrega la pàgina:</p> + +<pre class="brush: css notranslate">.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; +}</pre> + +<p>A més, elimina la classe <code>.cleared</code> anterior:</p> + +<pre class="comment-text notranslate" id="ct-0">.cleared { + clear: left; +}</pre> + +<p>Veuràs que, como en l'exemple on hem posat un color de fons al paràgraf, el color de fons passa per darrere de l'element flotant.</p> + +<div id="Float_4"> +<div class="hidden"> +<h6 id="Float_Example_4">Float Example 4</h6> + +<pre class="brush: html notranslate"><h1>Exemple simple de caixa flotant</h1> +<div class="wrapper"> + <div class="box">Caixa flotant</div> + + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> +</div> + +<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; + font: .9em/1.2 Arial, Helvetica, sans-serif +} + +.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; +} + +.box { + float: left; + margin: 15px; + width: 150px; + height: 150px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Float_4', '100%', 600) }}</p> + +<p>Un cop més, això és així perquè el flotador s'ha extret del flux normal. Netejar el següent elemento no ajuda a resoldre aquest problema de neteja de la caixa, on volem que la part inferior de la caixa envolti l'element flotant i que envolti el contingut fins i tot si el coningut és més curt. Hi ha tres maneres posssibles de resoldre això, dues que funcionen en tots els navegadors, però que tenen una mica de truc, i una tercera, nova manera de resoldre aquesta situació correctament.</p> + +<h3 id="El_hack_clearfix">El hack clearfix</h3> + +<p>La forma com aquesta situació s'ha tractat tradicionalment és utilitzant un truc conegut com el "truc clearfix". Això implica inserir algun contingut generat després de la caixa que conté el contingut flotant i envolvent, i configurar-lo per netejar ambdós.</p> + +<p>Afefeix el següent CSS a l'exemple:</p> + +<pre class="brush: css notranslate">.wrapper::after { + content: ""; + clear: both; + display: block; +}</pre> + +<p>Ara recarrega la pàgina i la caixa hauria de netejar-se. Això és bàsicament el mateix que si haguessis afegit un element HTML com un <code><div></code> a sota dels elements i li haguessis afegit la propietat <code>clear: both</code>.</p> + +<div id="Float_5"> +<div class="hidden"> +<h6 id="Float_Example_5">Float Example 5</h6> + +<pre class="brush: html notranslate"><h1>Exemple simple de caixa flotant</h1> +<div class="wrapper"> + <div class="box">Caixa flotant</div> + + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> +</div> +<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; + font: .9em/1.2 Arial, Helvetica, sans-serif +} + +.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; +} + +.box { + float: left; + margin: 15px; + width: 150px; + height: 150px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} + +.wrapper::after { + content: ""; + clear: both; + display: block; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Float_5', '100%', 600) }}</p> + +<h3 id="Fent_servir_overflow">Fent servir overflow</h3> + +<p>Un mètode alternatiu és establir la propietat {{cssxref("overflow")}} de l'element contenidor amb un valor diferent de <code>visible</code>.</p> + +<p>Elimina el CSS clearfix que has afegit en l'anterior secció i, en el seu lloc, afegeix <code>overflow: auto</code> a les regles de la caixa contenidora. Altre cop, la caixa hauria de netejar-se.</p> + +<pre class="brush: css notranslate">.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; + overflow: auto; +}</pre> + +<div id="Float_6"> +<div class="hidden"> +<h6 id="Float_Example_6">Float Example 6</h6> + +<pre class="brush: html notranslate"><h1>Exemple simple de caixa flotant</h1> +<div class="wrapper"> + <div class="box">Caixa flotant</div> + + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> +</div> +<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; + font: .9em/1.2 Arial, Helvetica, sans-serif +} + +.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; + overflow: auto; +} + +.box { + float: left; + margin: 15px; + width: 150px; + height: 150px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Float_6', '100%', 600) }}</p> + +<p>Aquest exemple funciona creant el que s'anomena un <em><strong>block formatting context</strong></em> (BFC) o context de format de bloc. És com un petit disseny dins de la nostra pàgina (dins la qual tot està contingut, per tant, el nostre element flotant està contingut dins del BFC i el fons es troba darrere d'ambdós elements. Això generalment funcionarà. Això no obstant, en certs casos, és possible que et trobis amb barres de desplaçament no desitjades o ombres retallades com a conseqüències no desitjades de l'ús del desbordament..</p> + +<h3 id="display_flow-root">display: flow-root</h3> + +<p>La manera moderna de resoldre aquest problema és fer servir el valor <code>flow-root</code> de la propietat <code>display</code>. Això existeix només per a crear un BFC sense fer servir trucs; no hi haurà conseqüències no desitjades quan el facis servir. Elimina <code>overflow: auto</code> de la regla <code>.wrapper</code> i afegeix <code>display: flow-root</code>. Assumint que el teu <a href="/en-US/docs/Web/CSS/display#Browser_compatibility">navegador sigui compatible</a>, la caixa es netejarà.</p> + +<pre class="brush: css notranslate">.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; + display: flow-root; +}</pre> + +<div id="Float_7"> +<div class="hidden"> +<h6 id="Float_Example_7">Float Example 7</h6> + +<pre class="brush: html notranslate"><h1>Exemple simple de caixa flotant</h1> +<div class="wrapper"> + <div class="box">Caixa flotant</div> + + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> +</div> +<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; + font: .9em/1.2 Arial, Helvetica, sans-serif +} + +.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; + display: flow-root; +} + +.box { + float: left; + margin: 15px; + width: 150px; + height: 150px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Float_7', '100%', 600) }}</p> + +<h2 id="Resum">Resum</h2> + +<p>Ara ja saps tot el que has de saber sobre els flotadors en el desenvolupament web modern. Consulta l'article sobre els <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">mètodes de disseny antiquats</a> per obtenir informació de com es feien servir, cosa que pot ser-te útil si has de treballar en projectes antics.</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="En_aquest_mòdul">En aquest mòdul</h2> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> +</ul> diff --git a/files/ca/learn/css/disseny_css/flux_normal/index.html b/files/ca/learn/css/disseny_css/flux_normal/index.html new file mode 100644 index 0000000000..ac44f6a95a --- /dev/null +++ b/files/ca/learn/css/disseny_css/flux_normal/index.html @@ -0,0 +1,95 @@ +--- +title: Flux normal +slug: Learn/CSS/Disseny_CSS/Flux_normal +translation_of: Learn/CSS/CSS_layout/Normal_Flow +--- +<div>{{LearnSidebar}}</div> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p> + +<p class="summary">Aquest article explica el flux normal o la manera com es disposen els elements de la pàgina web si tu no en canvies la disposició.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisits:</th> + <td>Conceptes bàsics d'HTML (consulta la <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a>) i nocions de com funciona el CSS (consulta la <a href="/ca/docs/Learn/CSS/First_steps">Introducció al CSS</a>).</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Entendre la manera com els navegadors disposen per defecte els elements en les pàgines web abans que l'usuari comenci a fer-hi canvis.</td> + </tr> + </tbody> +</table> + +<p>Com es detalla en l’últim article d’introducció al disseny de pàgines web, els elements d’una pàgina web es distribueixen segons el flux normal si no s'hi aplica CSS que en canviï el comportament. Com ja hem començat a veure, pots canviar la manera com es comporten els elements, bé ajustant-ne la posició dins d’aquest flux normal, o bé suprimint-los-en del tot. Un document sòlid i ben estructurat que sigui llegible en el sentit del flux normal és la millor manera de començar qualsevol pàgina web. Garanteix que el contingut serà llegible, fins i tot si l’usuari fa servir un navegador molt limitat o un dispositiu com un lector de pantalla, que llegeix el contingut de la pàgina. A més, com que el flux normal està dissenyat per a fer llegible un document, començar d'aquesta manera significa que treballes amb el document en lloc de lluitar-hi en contra perquè hi fas canvis d’ordre.</p> + +<p>Abans d’aprofundir més en diferents mètodes de disseny, val la pena revisar algunes de les qüestions que has estudiat en mòduls anteriors pel que fa al flux normal dels documents.</p> + +<h2 id="Com_es_disposen_per_defecte_els_elements">Com es disposen per defecte els elements?</h2> + +<p>Primer de tot s'agafa el contingut dels elements de les caixes, i a continuació s’hi afegeixen l'àrea de farciment, les vores i els marges al voltant. Es tracta del model de caixes, que ja coneixem.</p> + +<p>De manera predeterminada, el contingut d'un <a href="/ca/docs/Web/HTML/Block-level_elements">element de nivell de bloc</a> és del 100% de l'amplada de l’element pare, i l‘alçada està determinada pel contingut. Els <a href="/ca/docs/Web/HTML/Elements_en_línia">elements de línia</a> tenen l’amplada i l’alçada determinades pel contingut. En els elements de línia no pots establir l’amplada i l’alçada, senzillament s’inclouen dins del contingut d’elements de nivell de bloc. Si vols controlar la mida d'un element de línia d'aquesta manera, has de configurar-lo perquè es comporti com un element de nivell de bloc amb <code>display: block;</code> (o fins i tot, <code>display: inline-block;</code>, que barreja característiques de tots dos).</p> + +<p>Això pel que fa a elements individuals; però què passa amb la manera com interactuen els elements entre ells? El flux normal del disseny d’una pàgina web (que s’esmenta en l’article d’introducció al disseny de pàgines web) és el sistema pel qual els elements s’ubiquen dins de la finestra gràfica del navegador. Per defecte, els elements de nivell de bloc estan configurats en la <em>direcció del flux dels blocs</em>, en funció del <a href="/en-US/docs/Web/CSS/writing-mode">mode d'escriptura</a> de l’element pare (<em>inicialment</em>: en horitzontal): cada element de bloc apareix en una línia nova per sota de l’anterior i estan separats per qualsevol marge que s’hi hagi establert. Per tant, en català, o en qualsevol altre sistema d'escriptura horitzontal i de dalt a baix, els elements de nivell de bloc es disposen verticalment.</p> + +<p>Els elements de línia es comporten de manera diferent: no es disposen en línies noves; en lloc d’això, es disposen sobre la mateixa línia que l’anterior i que qualsevol contingut textual contigu (o que el delimiti), mentre hi hagi espai dins de l’amplada de l’element pare de nivell de bloc. Quan ja no hi ha espai, el text o els elements que desborden passen a una línia nova.</p> + +<p>Si dos elements adjacents tenen configurat un marge i els marges dels dos es toquen, predomina el que és més gran, i el més petit desapareix; es diu que els marges col·lapsen, i això també ho coneixem.</p> + +<p>Vegem un exemple senzill que il·lustra tot això:</p> + +<div id="Normal_Flow"> +<pre class="brush: html"><h1>Flux bàsic d’un document</h1> + +<p>Sóc un element de nivell de bloc bàsic. Els meus elements de nivell de bloc adjacents es distribueixen en línies noves per sota meu.</p> + +<p>Per defecte ocupem el 100% de l'amplada de l'element pare i som tan alts com el contingut dels nostres elements fill. L‘amplada i l’alçada total són el nostre contingut + l’àrea de farciment + l’amplada/alçada de la vora.</p> + +<p>Tenim marges que ens separen. Però pel col·lapse dels marges, ens separa només l'amplada d'un dels dos marges, però no l’amplada dels dos.</p> + +<p>Els elements de línia <span> com aquest </span> i <span> aquest </span> es disposen sobre la mateixa línia que els altres i que els nodes de text adjacents, si hi ha espai en la mateixa línia. Quan els elements de línia desborden, <span>continuen per la línia següent, si és possible (com el que conté aquest text)</span>; o si no és possible, passen a una línia nova, com és el cas d’aquesta imatge: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; +} + +p { + background: rgba(255,84,104,0.3); + border: 2px solid rgb(255,84,104); + padding: 10px; + margin: 10px; +} + +span { + background: white; + border: 1px solid black; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}</p> + +<h2 id="Resum">Resum</h2> + +<p>Ara que saps com funciona el flux normal del disseny de pàgina i quines són les opcions que el navegador estableix per defecte, avança i descobreix com pots canviar aquesta visualització per defecte i crear la composició de pàgina que necessita el teu disseny de pàgina web.</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="En_aquest_mòdul">En aquest mòdul</h2> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introducció al disseny amb CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">El flux normal de disposició</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Graella</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Flotació</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Posicionament</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Disseny en diverses columnes</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">El disseny adaptatiu</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Guia d’iniciació a les consultes dels mèdia</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Mètodes de disposició heretats</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Compatibilitat amb navegadors antics</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Avaluació del conjunt d’elements bàsics de compaginació</a></li> +</ul> diff --git a/files/ca/learn/css/disseny_css/graelles/index.html b/files/ca/learn/css/disseny_css/graelles/index.html new file mode 100644 index 0000000000..af97c6f989 --- /dev/null +++ b/files/ca/learn/css/disseny_css/graelles/index.html @@ -0,0 +1,699 @@ +--- +title: Graelles (Grids) +slug: Learn/CSS/Disseny_CSS/Graelles +tags: + - Article + - Beginner + - CSS + - CSS Grids + - CodingScripting + - Grids + - Guide + - Layout + - Learn + - Tutorial + - grid design + - grid framework + - grid system +translation_of: Learn/CSS/CSS_layout/Grids +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Assessment", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary">Les graelles són una eina de disseny de pàgines web consolidada i molts dissenys de pàgines web moderns basen els seus dissenys de pàgina web en una graella regular. En aquest article analitzarem el disseny de pàgines web basats en graella i com es pot utilitzar CSS per a crear graelles, tant amb les eines presents com amb les noves tecnologies que comencen a estar disponibles en els navegadors.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisits:</th> + <td><span id="result_box" lang="ca">Conceptes bàsics d'HTML</span> (consulta la <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a HTML</a>), <span id="result_box" lang="ca">i nocions de com funciona el CSS</span> (consulta la <a href="/ca/docs/Learn/CSS/First_steps">Introducció al CSS</a> i <a href="/ca/docs/Learn/CSS/Building_blocks">Aplicar estil a les caixes</a>.)</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Entendre els conceptes fonamentals que hi ha darrere dels sistemes de disseny de pàgines web amb graella i la manera com implementar un disseny de pàgina web basat en graella.</td> + </tr> + </tbody> +</table> + +<h2 id="Què_és_el_disseny_de_pàgines_web_basat_en_graella">Què és el disseny de pàgines web basat en graella?</h2> + +<p>Una graella és senzillament una col·lecció de línies horitzontals i verticals que creen un patró que ens serveix per a alinear els elements del disseny d’una pàgina web. Ens ajuden a crear dissenys en què els elements no es mouen ni canvien d'amplada a mesura que naveguem de pàgina en pàgina, i proporcionen més coherència als nostres llocs web.</p> + +<p>Normalment, una graella té <strong>columnes</strong> (<strong><em>columns</em></strong>), <strong>files</strong> (<strong><em>rows</em></strong>) i espais entre cada fila i columna, que anomenem comunament <strong>canals</strong> (<strong><em>gutters</em></strong>).</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13899/grid.png" style="display: block; height: 553px; margin: 0px auto; width: 1196px;"></p> + +<h2 id="Crear_la_teva_graella_en_CSS">Crear la teva graella en CSS</h2> + +<p>Després d'haver decidit la graella que necessita el vostre disseny, podeu utilitzar el disseny de graella (o grid) de CSS per crear aquesta quadrícula a CSS i col·locar-hi elements. Primer veurem les característiques bàsiques del disseny de quadrícula i després explorarem com crear un sistema de quadrícula simple per al vostre projecte.</p> + +<p>Com a punt de partida, descarregueu i obriu el <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/0-starting-point.html">fitxer del punt de partida</a> a l’editor de text i al navegador (també el podeu <a href="https://mdn.github.io/learning-area/css/css-layout/grids/0-starting-point.html">veure en directe aquí</a>). Veureu un exemple amb un contenidor que conté alguns elements secundaris. Per defecte, es mostren en un flux normal, de manera que els quadres es mostren un sota l’altre. Treballarem amb aquest fitxer durant la primera part d’aquesta lliçó, fent canvis per veure com es comporta la quadrícula.</p> + +<p>Per definir una graella utilitzem el valor <code>grid</code> de la propietat <code>display</code>. Com passa amb Flexbox, això activa el disseny de graella i tots els fills directes del contenidor es converteixen en elements de la quadrícula. Afegiu això al CSS del vostre fitxer:</p> + +<pre class="brush: css notranslate">.container { + display: grid; +}</pre> + +<p>A diferència de flexbox, els articles no tindran cap aspecte immediatament diferent. Declarar <code>display: grid</code> us dona una quadrícula d'una columna, de manera que els vostres articles continuaran mostrant-se un per sota de l'altre tal com ho fan en el flux normal.</p> + +<p>Per veure alguna cosa que sembli més una graella, haurem d’afegir algunes columnes a la quadrícula. Afegim aquí tres columnes de 200 píxels. Podeu utilitzar qualsevol unitat de longitud o percentatges per crear aquestes pistes de columna.</p> + +<pre class="brush: css notranslate">.container { + display: grid; + grid-template-columns: 200px 200px 200px; +}</pre> + +<p><span id="docs-internal-guid-c80e169c-7fff-1a9b-8e08-9626ee0cc209" style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Afegiu la segona declaració a la vostra regla CSS i, a continuació, torneu a carregar la pàgina i hauríeu de veure que els elements s'han reordenat un a cada cel·la de la quadrícula creada.</span></p> + +<div id="Grid_1"> +<div class="hidden"> +<h6 id="Simple_Grid_Example">Simple Grid Example</h6> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container > div { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} </pre> + +<pre class="brush: html notranslate"><div class="container"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> +</div> </pre> + +<pre class="brush: css notranslate">.container { + display: grid; + grid-template-columns: 200px 200px 200px; +} </pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Grid_1', '100%', 400) }}</p> + +<h3 id="Graelles_flexibles_amb_la_unitat_fr">Graelles flexibles amb la unitat fr</h3> + +<p>A més de crear quadrícules amb longituds i percentatges, podem utilitzar la unitat <code>fr</code> per dimensionar de manera flexible les files i les columnes de la quadrícula. Aquesta unitat representa una fracció de l'espai disponible al contenidor de la quadrícula.</p> + +<p>Canvieu el llistat de pistes a la següent definició, creant tres pistes d'<code>1fr</code>.</p> + +<pre class="brush: css notranslate">.container { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +}</pre> + +<p><span id="docs-internal-guid-b7563581-7fff-e1f8-a099-a9ce28505b44" style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Ara hauríeu de veure que teniu pistes flexibles. La unitat <code>fr</code> distribueix espai proporcionalment, per tant, podeu donar diferents valors positius a les vostres pistes, per exemple, si canvieu la definició així:</span></p> + +<pre class="brush: css notranslate">.container { + display: grid; + grid-template-columns: 2fr 1fr 1fr; +}</pre> + +<p><span id="docs-internal-guid-bbc2b6b9-7fff-d5ec-cd85-f7dc19208069" style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">La primera pista ara té <code>2fr</code> de l’espai disponible i les altres dues pistes <code>1fr</code>, fent que la primera pista sigui més gran. Podeu barrejar unitats de fr i pistes de longitud fixa; en aquest cas, l’espai necessari per a les pistes fixes s’elimina abans de distribuir l’espai a les altres pistes.</span></p> + +<p> + </p><div id="Grid_2"> + <div class="hidden"> + <h6 id="Simple_Grid_Example_with_fr_units">Simple Grid Example with fr units</h6> + + <pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container { + display: grid; + grid-template-columns: 2fr 1fr 1fr; +} + +.container > div { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} + </pre> + + <pre class="brush: html notranslate"><div class="container"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> +</div> </pre> + </div> + </div> + + +<p>{{ EmbedLiveSample('Grid_2', '100%', 400) }}</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> La unitat <code>fr</code> distribueix l'espai <em>disponible</em>, no <em>tot </em>l'espai. Per tant, si una de les vostres pistes té alguna cosa gran al seu interior, hi haurà menys espai lliure per compartir.</p> +</div> + +<h3 id="Espais_entre_pistes">Espais entre pistes</h3> + +<p>Per crear espais entre pistes, fem servir les propietats {{cssxref ("grid-column-gap")}} per a espais entre columnes, {{cssxref ("grid-row-gap")}} per a espais entre files i {{ cssxref ("grid-gap")}} per establir tots dos alhora.</p> + +<pre class="brush: css notranslate">.container { + display: grid; + grid-template-columns: 2fr 1fr 1fr; + grid-gap: 20px; +}</pre> + +<p>Aquests buits poden especificar-se en qualsevol unitat de longitud o percentatge, però no en unitats <code>fr</code>.</p> + +<div id="Grid_3"> +<div class="hidden"> +<h6 id="Simple_Grid_Example_with_fr_units_2">Simple Grid Example with fr units</h6> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container { + display: grid; + grid-template-columns: 2fr 1fr 1fr; + grid-gap: 20px; +} + +.container > div { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} + </pre> + +<pre class="brush: html notranslate"><div class="container"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> +</div> +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Grid_3', '100%', 400) }}</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> Les propietats <code>*gap</code> solien portar el prefix <code>grid-</code>, però això s'ha canviat a l'especificació, ja que la intenció és fer-les útils en diversos mètodes de disseny. Les versions prefixades es mantindran com a àlies, de manera que es podran utilitzar amb seguretat durant algun temps. Per estar segur, podeu duplicar i afegir les dues propietats per fer el vostre codi més a prova de bales.</p> +</div> + +<pre class="brush: css notranslate">.container { + display: grid; + grid-template-columns: 2fr 1fr 1fr; + grid-gap: 20px; + gap: 20px; +}</pre> + +<h3 id="Repetició_de_llistes_de_pistes">Repetició de llistes de pistes</h3> + +<p>Podeu repetir tot o una secció de la vostra llista de pistes mitjançant la notació de repetició. Canvieu la llista de pistes pel següent:</p> + +<pre class="brush: css notranslate">.container { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 20px; +}</pre> + +<p>Ara tindreu 3 pistes d’<code>1fr</code> igual que abans. El primer valor que es passa a la funció de repetició és el nombre de vegades que voleu que es repeteixi el llistat, mentre que el segon valor és un llistat de pistes, que consisteix d’una o més pistes que vulgueu repetir.</p> + +<h3 id="La_quadrícula_implícita_i_explícita">La quadrícula implícita i explícita</h3> + +<p>Fins ara, només hem especificat pistes de columnes i, tot i això, s’estan creant files per contenir el nostre contingut. Aquest és un exemple de la quadrícula explícita contra la quadrícula implícita. La quadrícula explícita és la que creeu utilitzant <code>grid-template-columns</code> o <code>grid-template-rows</code>. La quadrícula implícita es crea quan el contingut es col·loca fora d’aquesta, com ara a les nostres files. Les quadrícules explícites i implícites són anàlogues als eixos flexbox principal i transversal.</p> + +<p>Per defecte, les pistes creades a la quadrícula implícita tenen una mida <code>auto</code>, cosa que en general vol dir que són prou grans per adaptar-se al seu contingut. Si voleu donar una mida implícita a les pistes de quadrícula, podeu utilitzar les propietats {{cssxref ("grid-auto-rows")}} i {{cssxref ("grid-auto-columns")}}. Si afegiu <code>grid-auto-rows</code> amb un valor de 100px al vostre CSS, veureu que aquestes files creades ara tenen una alçada de 100 píxels.</p> + +<div id="Grid_4"> +<div class="hidden"> +<h6 id="Simple_Grid_Example_with_fr_units_3">Simple Grid Example with fr units</h6> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container > div { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} </pre> + +<pre class="brush: html notranslate"><div class="container"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> +</div> + </pre> +</div> + +<pre class="brush: css notranslate">.container { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 100px; + grid-gap: 20px; +}</pre> + +<p>{{ EmbedLiveSample('Grid_4', '100%', 400) }}</p> + +<h3 id="La_funció_minmax">La funció minmax()</h3> + +<p>Les nostres pistes de 100 píxels d’alçada no seran molt útils si afegim contingut a les pistes de més de 100 píxels, ja que aquest cas provocaria un desbordament. Podria ser millor tenir pistes de <em>com a mínim</em> 100 píxels d’alçada i que es puguin expandir si hi entra més contingut. Un fet bastant bàsic sobre el web és que mai no se sap realment la mida que tindrà alguna cosa; contingut addicional o mides de lletra més grans poden causar problemes amb els dissenys que intenten ser perfectes en píxels en totes les dimensions.</p> + +<p>La funció {{cssxref ("minmax")}} ens permet establir una mida mínima i màxima per a una pista, per exemple, <code>minmax(100 px, auto)</code>. La mida mínima és de 100 píxels, però la màxima és automàtica, i s’ampliarà per adaptar-se al contingut. Proveu de canviar <code>grid-auto-rows</code> per utilitzar un valor min-max:</p> + +<pre class="brush: css notranslate">.container { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: minmax(100px, auto); + grid-gap: 20px; +}</pre> + +<p>Si afegiu contingut addicional, veureu que la pista s'expandeix per permetre que encaixi. Tingueu en compte que l'expansió es produeix al llarg de la fila.</p> + +<h3 id="Tantes_columnes_com_encaixin">Tantes columnes com encaixin</h3> + +<p>Podem combinar algunes de les coses que hem après sobre el llistat de pistes, la notació de repetició i {{cssxref ("minmax")}} per crear un patró útil. De vegades, és útil poder demanar a la quadrícula que creï tantes columnes com càpiguen al contenidor. Ho fem establint el valor de <code>grid-template-columns</code> mitjançant la notació {{cssxref ("repeat")}}}), però en lloc de passar un número, introduïu la paraula clau <code>auto-fill</code>. Per al segon paràmetre de la funció utilitzem <code>minmax()</code>, amb un valor mínim igual a la mida mínima de la pista que ens agradaria tenir i un màxim de <code>1fr</code>.</p> + +<p>Proveu-ho ara al vostre fitxer amb el CSS següent:</p> + +<div id="Grid_5"> +<div class="hidden"> +<h6 id="As_many_columns_as_will_fit">As many columns as will fit</h6> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container > div { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} + </pre> + +<pre class="brush: html notranslate"><div class="container"> + <div>One</div> + <div>Two</div> + <div>Three</div> + <div>Four</div> + <div>Five</div> + <div>Six</div> + <div>Seven</div> +</div> </pre> +</div> + +<pre class="brush: css notranslate">.container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + grid-auto-rows: minmax(100px, auto); + grid-gap: 20px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Grid_5', '100%', 400) }}</p> + +<p>Això funciona perquè Grid crea tantes columnes de 200 píxels com càpiguen al contenidor i, a continuació, comparteix l’espai que sobri entre totes les columnes: el màxim és 1fr que, com ja sabem, distribueix l’espai de manera uniforme entre les pistes.</p> + +<h2 id="Ubicació_basada_en_línies">Ubicació basada en línies</h2> + +<p>Ara passem de crear una graella a col·locar coses a la quadrícula. La nostra quadrícula sempre té línies, que comencen per 1 i es relacionen amb el mode d’escriptura del document. Per tant, en anglès, la línia de columna 1 es troba a la part esquerra de la quadrícula i la línia de fila 1 a la part superior. En àrab, la línia 1 de la columna estaria a la dreta, ja que l'àrab s'escriu de dreta a esquerra.</p> + +<p>Podem situar les coses segons aquestes línies especificant la línia inicial i final. Ho fem utilitzant les propietats següents:</p> + +<ul> + <li>{{cssxref ("grid-column-start")}}</li> + <li>{{cssxref ("grid-column-end")}}</li> + <li>{{cssxref ("grid-row-start")}}</li> + <li>{{cssxref ("grid-row-end")}}</li> +</ul> + +<p>Totes aquestes propietats poden tenir un número de línia com a valor. També podeu utilitzar les propietats abreujades:</p> + +<p> {{cssxref ("grid-column")}}<br> + {{cssxref ("grid-row")}}</p> + +<p>Aquests us permeten especificar les línies inicial i final alhora, separades per un <code>/</code>, un caràcter de barra inclinada cap endavant.</p> + +<p><a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/8-placement-starting-point.html">Descarregueu aquest fitxer com a punt de partida</a> o <a href="https://mdn.github.io/learning-area/css/css-layout/grids/8-placement-starting-point.html">vegeu-lo en directe aquí</a>. Ja té una quadrícula definida i article senzill. Podeu veure que la col·locació automàtica col·loca elements un a cada cel·la de la quadrícula que hem creat.</p> + +<p>En lloc d'això, col·locarem tots els elements del nostre lloc a la quadrícula, mitjançant les línies de la quadrícula. Afegiu les regles següents a la part inferior del vostre CSS:</p> + +<pre class="brush: css notranslate">header { + grid-column: 1 / 3; + grid-row: 1; +} + +article { + grid-column: 2; + grid-row: 2; +} + +aside { + grid-column: 1; + grid-row: 2; +} + +footer { + grid-column: 1 / 3; + grid-row: 3; +}</pre> + +<div id="Grid_6"> +<div class="hidden"> +<h6 id="Line-based_placement">Line-based placement</h6> + +<pre class="brush: css notranslate"> body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; + } + + .container { + display: grid; + grid-template-columns: 1fr 3fr; + grid-gap: 20px; + } +header { + grid-column: 1 / 3; + grid-row: 1; +} + +article { + grid-column: 2; + grid-row: 2; +} + +aside { + grid-column: 1; + grid-row: 2; +} + +footer { + grid-column: 1 / 3; + grid-row: 3; +} + +header, +footer { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} + +aside { + border-right: 1px solid #999; +} +</pre> + +<pre class="brush: html notranslate"><div class="container"> + <header>This is my lovely blog</header> + <article> + <h1>My article</h1> + <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + </article> + <aside> + <h2>Other things</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> + </aside> + <footer>Contact me@mysite.com</footer> +</div> </pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Grid_6', '100%', 400) }}</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> també podeu utilitzar el valor <code>-1</code> per referir-vos a la columna o la línia final i comptar cap a l'interior des del final mitjançant valors negatius. Tanmateix, això només funciona per a la quadrícula explícita. El valor <code>-1</code> no es referirà a la línia final de la quadrícula implícita.</p> +</div> + +<h2 id="Posicionament_amb_grid-template-areas">Posicionament amb grid-template-areas</h2> + +<p>Una forma alternativa de col·locar elements a la quadrícula és fer servir la propietat {{cssxref ("grid-template-areas")}} i donar un nom als diversos elements del vostre disseny.</p> + +<p>Traieu el posicionament basat en línies de l'últim exemple (o torneu a descarregar el fitxer per tenir un punt de partida nou) i afegiu el CSS següent.</p> + +<pre class="brush: css notranslate">.container { + display: grid; + grid-template-areas: + "header header" + "sidebar content" + "footer footer"; + grid-template-columns: 1fr 3fr; + grid-gap: 20px; +} + +header { + grid-area: header; +} + +article { + grid-area: content; +} + +aside { + grid-area: sidebar; +} + +footer { + grid-area: footer; +}</pre> + +<p>Torneu a carregar la pàgina i veureu que els vostres articles s'han col·locat igual que abans, sense que hàgim d'utilitzar cap número de línia!</p> + +<div id="Grid_7"> +<div class="hidden"> +<h6 id="Line-based_placement_2">Line-based placement</h6> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +header, +footer { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} + +aside { + border-right: 1px solid #999; +} + +.container { + display: grid; + grid-template-areas: + "header header" + "sidebar content" + "footer footer"; + grid-template-columns: 1fr 3fr; + grid-gap: 20px; +} + +header { + grid-area: header; +} + +article { + grid-area: content; +} + +aside { + grid-area: sidebar; +} + +footer { + grid-area: footer; +} + </pre> + +<pre class="brush: html notranslate"><div class="container"> + <header>This is my lovely blog</header> + <article> + <h1>My article</h1> + <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + </article> + <aside><h2>Other things</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> + </aside> + <footer>Contact me@mysite.com</footer> +</div> </pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Grid_7', '100%', 400) }}</p> + +<p>Les regles per a les <code>grid-template-areas</code> són les següents:</p> + +<ul> + <li>Cal que ompliu totes les cel·les de la graella.</li> + <li>Per abastar dues cel·les, repetiu el nom.</li> + <li>Per deixar una cel·la buida, utilitzeu un <code>.</code> (punt).</li> + <li>Les àrees han de ser rectangulars; per exemple, no es pot tenir una àrea en L.</li> + <li>Les àrees no es poden repetir en ubicacions diferents.</li> +</ul> + +<p>Podeu jugar amb el nostre disseny canviant el peu de pàgina per situar-se només a sota del contingut i la barra lateral, per exemple, per abastar fins a baix de tot. Aquesta és una manera molt agradable de descriure un disseny, ja que és obvi a partir del CSS exactament el que està passant.</p> + +<h2 id="Un_framework_de_graella_amb_CSS_Grid">Un framework de graella amb CSS Grid</h2> + +<p>Els "frameworks" de quadrícula tendeixen a basar-se al voltant de 12 o 16 quadrícules i, amb CSS Grid, no necessiteu cap eina de tercers que us proporcioni aquest <em>framework</em>: ja hi és, a l’especificació.</p> + +<p><a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/11-grid-system-starting-point.html">Descarregueu el fitxer de punt de partida</a>. Conté un contenidor amb una quadrícula de 12 columnes definida i el mateix marcatge que hem utilitzat en els dos exemples anteriors. Ara podem utilitzar la ubicació basada en línies per col·locar el nostre contingut a la quadrícula de 12 columnes.</p> + +<pre class="brush: css notranslate">header { + grid-column: 1 / 13; + grid-row: 1; +} + +article { + grid-column: 4 / 13; + grid-row: 2; +} + +aside { + grid-column: 1 / 4; + grid-row: 2; +} + +footer { + grid-column: 1 / 13; + grid-row: 3; +}</pre> + +<div id="Grid_8"> +<div class="hidden"> +<h6 id="A_CSS_Grid_Grid_System">A CSS Grid Grid System</h6> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container { + display: grid; + grid-template-columns: repeat(12, minmax(0,1fr)); + grid-gap: 20px; +} + +header { + grid-column: 1 / 13; + grid-row: 1; +} + +article { + grid-column: 4 / 13; + grid-row: 2; +} + +aside { + grid-column: 1 / 4; + grid-row: 2; +} + +footer { + grid-column: 1 / 13; + grid-row: 3; +} + +header, +footer { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} + +aside { + border-right: 1px solid #999; +} + </pre> + +<pre class="brush: html notranslate"><div class="container"> + <header>This is my lovely blog</header> + <article> + <h1>My article</h1> + <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + </article> + <aside><h2>Other things</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> + </aside> + <footer>Contact me@mysite.com</footer> +</div> + </pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Grid_8', '100%', 400) }}</p> + +<p>Si feu servir el <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Inspector</a> per superposar les línies de quadrícula del vostre disseny, podreu veure com funciona la nostra quadrícula de 12 columnes.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16045/learn-grids-inspector.png" style="height: 1026px; width: 2028px;"></p> +</div> + +<h2 id="Posa_a_prova_els_teus_coneixements">Posa a prova els teus coneixements</h2> + +<p>Hem arribat al final de l'article. Recordes la informació més rellevant? Trobaràs més proves per comprovar si retens aquesta informació abans de seguir a <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grid_skills">Test your skills: Grids</a>.</p> + +<h2 id="Resum">Resum</h2> + +<p>Després de la lectura d’aquest article, hauries de ser capaç d’entendre com funcionen els dissenys de pàgina web amb CSS Grid. Per aprofundir en l'especificació, llegeix les nostres guies sobre Disposició amb Grid, que trobaràs a continuació.</p> + +<h2 id="Veieu_també">Veieu també</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout#Guides">CSS Grid guides</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">CSS Grid Inspector: Examine grid layouts</a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Assessment", "Learn/CSS/CSS_layout")}}</p> diff --git a/files/ca/learn/css/disseny_css/index.html b/files/ca/learn/css/disseny_css/index.html new file mode 100644 index 0000000000..e74e5da0b9 --- /dev/null +++ b/files/ca/learn/css/disseny_css/index.html @@ -0,0 +1,66 @@ +--- +title: Disseny CSS +slug: Learn/CSS/Disseny_CSS +tags: + - Beginner + - CSS + - Floating + - Grids + - Guide + - Landing + - Layout + - Learn + - Module + - Multiple column + - Positioning + - flexbox + - float +translation_of: Learn/CSS/CSS_layout +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">En aquest punt, ja hem examinat els fonaments de CSS, com l'estil del text, i l'estil i la manipulació de les caixes en el que estroba dins el contingut. Ara és hora de veure com col·locar les caixes al lloc correcte en relació amb la finestra de visualització, entre elles. Hem cobert els requisits previs necessaris de manera que ara podem aprofundir en el disseny CSS, provant diferents paràmetres de visualització, mètodes tradicionals de disseny que inclouen flotants i posicionament, i noves eines de disseny modernas, com flexbox.</p> + +<h2 id="Requisits_previs">Requisits previs</h2> + +<p><span id="result_box" lang="ca"><span>Abans de començar aquest mòdul, ja hauríeu de:</span></span></p> + +<ol> + <li>Estar familiaritzats amb els principis bàsics d' HTML, tal com es descriu en el mòdul <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introducció a HTML</a>.</li> + <li>Sentir-vos còmodes amb els fonaments CSS, tal com s'ha tractat a la <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introducció a CSS</a>.</li> + <li>Entendre com fer <a href="/en-US/docs/Learn/CSS/Styling_boxes">caixes d'estil</a>.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: Si esteu treballant en un ordinador/tauleta/altre dispositiu on no té la capacitat de crear els vostres propis fitxers, podeu provar (la majoria) d'exemples de codi, en un programa de codificació en línia com <a href="http://jsbin.com/">JSBin</a> o <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Guies">Guies</h2> + +<p>Aquests articles proporcionaran instruccions sobre les eines i tècniques fonamentals de disseny, disponibles a CSS.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introducció al disseny CSS</a></dt> + <dd>Aquest article recapitularà algunes de les característiques de disseny de CSS que ja hem tocat en els mòduls anteriors, com els diferents valors de {{cssxref("display")}} - i introduïm alguns dels conceptes que cobrirem al llarg d'aquest mòdul.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Flotants</a></dt> + <dd>Originalment per a imatges flotants dins dels blocs de text, la propietat {{cssxref("float")}} s'ha convertit en una de les eines més utilitzades per crear diversos dissenys de columnes a les pàgines web. Aquest article ho explica tot.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Posicionament</a></dt> + <dd>El posicionament us permet treure elements del flux normal de disseny del document, i fer que es comportin de manera diferent, per exemple, asseguts un damunt de l'altre o quedant sempre al mateix lloc dins de la finestra de visualització del navegador. Aquest article explica els diferents valors de {{cssxref("position")}}, i com utilitzar-los.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Exemples pràctics de posicionament</a></dt> + <dd>Amb els conceptes bàsics de posicionament coberts en l'últim article, veurem, ara, com construir un parell d'exemples del món real per il·lustrar quin tipus de coses podeu fer amb el posicionament.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></dt> + <dd>Una nova tecnologia, però amb suport, ara, bastant estès en tots els navegadors, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Flexbox</a> està començant a estar preparat per a un ús generalitzat. Flexbox proporciona eines que permeten crear ràpidament dissenys complexos i flexibles i característiques que històricament resulten difícils amb CSS. Aquest article explica tots els fonaments.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Graelles</a></dt> + <dd>Els sistemes de graella són una altra característica molt comuna que s'utilitza en els dissenys de CSS, que solen implementar-se mitjançant flotadors o altres característiques de disseny. Imagineu el disseny com un nombre establert de columnes (p. Ex. 4, 6 o 12) i, a continuació, ajusteu les columnes de contingut dins d'aquestes columnes imaginàries. En aquest article explorarem la idea bàsica sobre la creació d'un sistema de graella, mireu l'ús d'un sistema de graella confeccionat per un marc (framework) de graella i finalitzeu l'experimentació amb les Graelles CSS - una incipient nova funció de navegador fa que l'implementació de disseny de graella a la Web sigui molt més fàcil.</dd> +</dl> + +<h2 id="Avaluacions"><span id="result_box" lang="ca"><span>Avaluacions</span></span></h2> + +<p><span id="result_box" lang="ca"><span>Les següents avaluacions posaran a prova la vostra capacitat per dissenyar pàgines web amb CSS.</span></span></p> + +<dl> + <dt>Creació d'un disseny flexible multicolumna (TBD)</dt> + <dd>Aquesta avaluació provarà la vostra capacitat per crear un disseny estàndard de diverses columnes, amb algunes característiques interessants.</dd> + <dt>Creació d'un widget de control fix (TBD)</dt> + <dd>Aquesta avaluació desafia la vostra comprensió del posicionament, demanant-vos que creeu un widget de control de posició fix que permeti a l'usuari accedir als controls d'una aplicació web independentment d'on es desplaci.</dd> +</dl> diff --git a/files/ca/learn/css/disseny_css/introduccio_disseny_css/index.html b/files/ca/learn/css/disseny_css/introduccio_disseny_css/index.html new file mode 100644 index 0000000000..88a924dc00 --- /dev/null +++ b/files/ca/learn/css/disseny_css/introduccio_disseny_css/index.html @@ -0,0 +1,700 @@ +--- +title: Introducció al disseny CSS +slug: Learn/CSS/Disseny_CSS/Introduccio_disseny_CSS +tags: + - Article + - Beginner + - CSS + - Floats + - Grids + - Introduction + - Layout + - Learn + - Positioning + - Tables + - flexbox + - flow +translation_of: Learn/CSS/CSS_layout/Introduction +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary">Aquest article recapitula algunes de les característiques de disseny CSS que ja hem tocat en els mòduls anteriors, com els diferents valors de {{cssxref ("display")}}, i introdueix alguns dels conceptes que exposem al llarg d'aquest mòdul.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisits:</th> + <td><span id="result_box" lang="ca">Conceptes bàsics d'HTML</span> (consulta la <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a HTML</a>), <span id="result_box" lang="ca">i nocions de com funciona el CSS</span> (consulta la <a href="/ca/docs/Learn/CSS/First_steps">Introducció al CSS</a>).</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Adquirir una visió general de les tècniques de disseny de pàgines web amb CSS. Cada tècnica es pot aprendre amb més detall en tutorials posteriors.</td> + </tr> + </tbody> +</table> + +<p>Les tècniques de disseny de pàgina web amb CSS ens permeten prendre els elements que hi ha en una pàgina web i controlar on estan posicionats en relació amb la seva posició predeterminada en el flux de disseny normal, els altres elements del voltant, l’element pare contenidor o la finestra de visualització / finestra principal. Les tècniques de disseny de pàgines que exposem amb més detall en aquest mòdul són:</p> + +<ul> + <li>Elements flotants</li> + <li>La propietat {{cssxref("display")}}</li> + <li>Flexbox</li> + <li>Graella</li> + <li>Posicionament</li> + <li>Taules CSS</li> + <li>Disposició de múltiples columnes</li> +</ul> + +<p><span id="docs-internal-guid-3d1d84d1-7fff-8b2f-5bac-858fd61ba989" style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Cada tècnica té els seus usos, avantatges i inconvenients, i cap tècnica s'ha dissenyat per utilitzar-se aïllada. Entenent per a què s’ha dissenyat cada mètode estaràs en una bona posició per entendre quina és la millor disposició per a cada tasca.</span></p> + +<h2 id="Flux_normal"><span id="result_box" lang="ca">Flux normal</span></h2> + +<p>El flux normal és la manera com el navegador estableix les pàgines HTML de manera predeterminada quan no es fa res per controlar el disseny de pàgina. Vegem-ne un exemple HTML ràpid:</p> + +<pre class="brush: html notranslate"><p>I love my cat.</p> + +<ul> + <li>Buy cat food</li> + <li>Exercise</li> + <li>Cheer up friend</li> +</ul> + +<p>The end!</p></pre> + +<p>Per defecte, el navegador mostra aquest codi de la manera següent:</p> + +<p>{{ EmbedLiveSample('Normal_flow', '100%', 200) }}</p> + +<p>Tingues en compte que aquí l'HTML es mostra en l'ordre exacte en què apareix en el codi d’origen, amb elements apilats l’un sobre l’altre: el primer paràgraf, seguit de la llista no ordenada, seguit del segon paràgraf.</p> + +<p>Per a molts dels elements de la pàgina el flux normal crea exactament la disposició que cal, però per dissenys més complexos et farà falta alterar aquest comportament per defecte fent ús d'alguna de les eines disponibles en CSS. Començar amb un document HTML ben estructurat és molt important, donat que així pots treballar amb com les coses es disposen per defecte, en comptes de barallar-t'hi.</p> + +<p>Les tècniques de disseny tendeixen a substituir aquest comportament predeterminat, utilitzant les tècniques següents:</p> + +<ul> + <li><strong>La propietat {{cssxref("display")}}:</strong> els valors habituals, com ara <code>block</code>, <code>inline</code> o <code>inline-block</code> poden canviar la manera com els elements es comporten en un flux normal (consulta l’article <a href="/ca/docs/Learn/CSS/Building_blocks/The_box_model">Tipus de caixes CSS</a> per a obtenir-ne més informació), mentre que d’altres valors poc freqüents o especialitzats ens permeten disposar els elements de maneres completament diferents, utilitzant eines com Flexbox.</li> + <li><strong>Elements flotants:</strong> aplicant a {{cssxref("float")}} un valor com <code>left</code>, pots fer que els elements de nivell de bloc s'alineïn l’un al costat de l'altre en lloc de disposar-se l’un damunt de l'altre.</li> + <li><strong>La propietat {{cssxref("position")}}:</strong> et permet controlar amb precisió la disposició de caixes dintre d'altres caixes. El posicionat <code>static</code> és l'habitual en el flux normal, però pots fer que els elements es disposin d'altres maneres usant valors diferents, per exemple enganxats a la part superior de la finestra de visualització del navegador.</li> + <li><strong>Disposició en taules:</strong> les característiques dissenyades per aplicar estils a les parts d'una taula HTML poden usar-se sobre d'altres elements fent servir <code>display: table</code> i les propietats associades.</li> + <li><strong>Disposició multicolumna:</strong> Las propietats de <a href="/en-US/docs/Web/CSS/CSS_Columns">disposició multicolumna</a> poden fer que el contingut d'un bloc es disposi en columnes, com les d'un diari.</li> +</ul> + +<h2 id="La_propietat_display">La propietat <code>display</code></h2> + +<p>Els mètodes principals per aconseguir un disseny de pàgina amb CSS són tots els valors de la propietat <code>display</code> (visualització). Aquesta propietat ens permet canviar la manera per defecte com es mostren les coses. Tot el que hi ha al flux normal té un valor de <code>display</code>, que s'utilitza com la forma per defecte en què es comporten els elements que hi estan configurats. Per exemple, el fet que els paràgrafs en català es mostrin un per sota de l’altre es deu al fet que s’estilen amb <code>display: block</code>. Si creeu un enllaç al voltant d'un text dins d'un paràgraf, aquest enllaç romandrà en línia amb la resta del text i no es dividirà en cap línia nova. Això es deu al fet que l'element {{htmlelement("a")}} és <code>display: inline</code> per defecte.</p> + +<p>Pots canviar aquest comportament de visualització per defecte. Per exemple, l'element {{htmlelement("li")}} és <code>display: block</code> per defecte, és a dir, que els elements de la llista es mostren l'un a sota de l'altre al nostre document en català. Si canviem el valor de <code>display</code> a <code>inline</code>, ara es mostraran un al costat de l’altre, com ho farien les paraules en una frase. El fet que puguis canviar el valor de <code>display</code> de qualsevol element significa que pots triar elements HTML pel seu significat semàntic, sense preocupar-te de com quedaran. La seva aparença és una cosa que es pot canviar.</p> + +<p>A més de poder canviar la presentació predeterminada, canviant un element de <code>block</code> a <code>inline</code> i viceversa, hi ha alguns mètodes de disseny més grans que comencen com amb un valor de <code>display</code>. Tanmateix, quan els feu servir, generalment haureu d'invocar propietats addicionals. Els dos valors més importants per als nostres propòsits a l’hora de parlar del disseny són <code>display: flex</code> i <code>display: grid</code>.</p> + +<h2 id="Caixes_flexibles_Flexbox">Caixes flexibles (Flexbox)</h2> + +<p>Flexbox és el nom breu del <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">mòdul de disseny de caixa flexible</a>, dissenyat per facilitar-nos la distribució de les coses en una dimensió, sigui com a fila o com a columna. Per utilitzar flexbox, apliqueu <code>display: flex</code> a l'element pare dels elements que vulgueu disposar; tots els seus fills directes es converteixen en ítems flexibles. Ho podem veure en un exemple senzill.</p> + +<p>L'etiquetatge HTML següent ens proporciona un element contenidor, amb una classe <code>wrapper</code>, dins del qual hi ha tres elements {{htmlelement("div")}}. Per defecte, es mostrarien com a elements de bloc, un a sota de l’altre, al nostre document.</p> + +<p>Tanmateix, si afegim <code>display: flex</code> al pare, els tres elements ara es disposen en columnes. Això es deu al fet que es converteixen en ítems flexibles (<em>flex items</em>) i es veuen afectats per alguns valors inicials que flexbox estableix al contenidor flex. Es mostren en una fila, perquè el valor inicial de {{cssxref("flex-direction")}} establert al seu pare és <code>row</code>. Tots semblen estirar-se fins a l’alçada de l’element més alt, perquè el valor inicial de la propietat {{cssxref("align-items")}} establert al seu pare és <code>stretch</code>. Això significa que els ítems s’estenen fins a l’alçada del contenidor flex, que en aquest cas està definida per l’element més alt. Tots els articles s’alineen a l’inici del contenidor, deixant qualsevol espai addicional al final de la fila.</p> + +<div id="Flex_1"> +<div class="hidden"> +<h6 id="Flexbox_Example_1">Flexbox Example 1</h6> + +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} + </pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: flex; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('Flex_1', '300', '200') }}</p> + +<p>A més de les propietats anteriors que es poden aplicar al contenidor flex, hi ha propietats que es poden aplicar als ítems flex. Aquestes propietats, entre altres coses, poden canviar la manera com es “flexionen” els ítems, cosa que els permet expandir-se i contraure’s per adaptar-se a l’espai disponible.</p> + +<p>Com a exemple senzill d'això, podem afegir la propietat {{cssxref ("flex")}} a tots els nostres elements fill, amb un valor d'<code>1</code>. Això farà que tots els ítems creixin i omplin el contenidor, en comptes de deixar espai al final. Si hi ha més espai, els elements s’ampliaran; si hi ha menys espai es tornaran més estrets. A més, si afegiu un altre element al marcatge, tots els elements es faran més petits per fer-hi espai; ajustaran la seva mida per ocupar la mateixa quantitat d’espai, sigui quin sigui.</p> + +<div id="Flex_2"> +<div class="hidden"> +<h6 id="Flexbox_Example_2">Flexbox Example 2</h6> + +<pre class="brush: css notranslate"> * {box-sizing: border-box;} + + .wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + } + </pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: flex; +} + +.wrapper > div { + flex: 1; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('Flex_2', '300', '200') }}</p> + +<div class="blockIndicator note"> +<p><strong>Nota: </strong>Aquesta ha estat una molt breu introducció al que és possible amb Flexbox. Per obtenir més informació, consulteu el nostre article de <a href="/ca/docs/Learn/CSS/Disseny_CSS/Flexbox">Flexbox</a>.</p> +</div> + +<h2 id="Disposició_en_graella_Grid">Disposició en graella (Grid)</h2> + +<p>Mentre que Flexbox està dissenyat per al disseny unidimensional, el disseny de quadrícula està pensat per a dues dimensions: alinear les coses en files i columnes.</p> + +<p>Una vegada més, podeu activar el disseny de quadrícula amb un valor específic de display - <code>display: grid</code>. L'exemple següent utilitza un marcatge similar a l'exemple de flex, amb un contenidor i alguns elements fills. A més d’utilitzar <code>display: grid</code>, també definim files i columnes al pare mitjançant les propietats {{cssxref("grid-template-rows")}} i {{cssxref("grid-template-columns")}}, respectivament. Hem definit tres columnes cadascuna d'<code>1fr</code> i dues files de <code>100px</code>. No necessito posar cap regla sobre els elements infantils; es col·loquen automàticament a les cel·les que ha creat la nostra graella.</p> + +<div id="Grid_1"> +<div class="hidden"> +<h6 id="Grid_example_1">Grid example 1</h6> + +<pre class="brush: css notranslate"> * {box-sizing: border-box;} + + .wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + } + </pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 100px 100px; + grid-gap: 10px; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> + <div class="box4">Four</div> + <div class="box5">Five</div> + <div class="box6">Six</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('Grid_1', '300', '330') }}</p> + +<p><span id="docs-internal-guid-06c574d0-7fff-ef3d-b16b-035c6b7961fe" style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Un cop tingueu una graella, podeu col·locar-hi explícitament els elements, en lloc de confiar en el comportament de la ubicació automàtica que acabem de veure. Al segon exemple que teniu a continuació hem definit la mateixa graella, però aquesta vegada amb tres elements fills. Hem definit la línia inicial i final de cada element mitjançant les propietats {{cssxref("grid-column")}} i {{cssxref("grid-row")}}. Això fa que els elements abastin diverses pistes.</span></p> + +<div id="Grid_2"> +<div class="hidden"> +<h6 id="Grid_example_2">Grid example 2</h6> + +<pre class="brush: css notranslate"> * {box-sizing: border-box;} + + .wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + } + </pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 100px 100px; + grid-gap: 10px; +} + +.box1 { + grid-column: 2 / 4; + grid-row: 1; +} + +.box2 { + grid-column: 1; + grid-row: 1 / 3; +} + +.box3 { + grid-row: 2; + grid-column: 3; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('Grid_2', '300', '330') }}</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> Aquests dos exemples són només una petita part de la potència del disseny de graella; per obtenir més informació, consulteu el nostre article sobre <a href="/ca/docs/Learn/CSS/Disseny_CSS/Graelles">Graelles (Grids)</a>.</p> +</div> + +<p>La resta d'aquesta guia cobreix altres mètodes de disseny, que són menys importants per a les principals estructures de disseny de la pàgina, però que poden ajudar-vos a realitzar tasques específiques. En comprendre la naturalesa de cada tasca de disseny, aviat trobareu que, quan mireu un component concret del vostre disseny, el tipus de disseny més adequat sovint serà clar.</p> + +<h2 id="Elements_flotants_Floats">Elements flotants (<em>Floats</em>)</h2> + +<p>Flotar un element canvia el comportament d’aquest element i dels elements de nivell de bloc que el segueixen en un flux normal. L'element es mou cap a l'esquerra o cap a la dreta i s'elimina del flux normal i el contingut circumdant flota al voltant de l'element flotat.</p> + +<p>La propietat {{cssxref("float")}} té quatre valors possibles:</p> + +<ul> + <li><code>left</code>: fa flotar l'element a l'esquerra.</li> + <li><code>right</code>: fa flotar l'element a la dreta.</li> + <li><code>none</code>: no flota. Aquest és el valor predeterminat.</li> + <li><code>inherit</code>: especifica que el valor de la propietat <code>float</code> s'hereta de l'element pare.</li> +</ul> + +<p>A l'exemple següent, flotem un <code><div></code> a l'esquerra i li donem un {{cssxref("margin")}}} per la dreta per apartar el text de l'element. Això ens dona l’efecte del text rodejant aquesta caixa i és la major part del que heu de saber sobre els elements flotants tal com s’utilitzen en el disseny web modern.</p> + +<div id="Float_1"> +<div class="hidden"> +<h6 id="Floats_example">Floats example</h6> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; +} + +p { + line-height: 2; + word-spacing: 0.1rem; +} + +.box { + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); + padding: 10px; + border-radius: 5px; +} +</pre> +</div> + +<pre class="brush: html notranslate"><h1>Simple float example</h1> + +<div class="box">Float</div> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +</pre> + +<pre class="brush: css notranslate"> +.box { + float: left; + width: 150px; + height: 150px; + margin-right: 30px; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Float_1', '100%', 600) }}</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> Els <em>floats</em> s’expliquen completament a la nostra lliçó sobre les propietats <a href="/ca/docs/Learn/CSS/Disseny_CSS/Flotadors">float i clear</a>. Abans de tècniques com Flexbox i Grid es feien servir <em>floats</em> com a mètode per crear dissenys de columnes. És possible que encara trobeu aquests mètodes al web; els tractarem a la lliçó sobre <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">mètodes de disseny heretats</a>.</p> +</div> + +<h2 id="Tècniques_de_posicionament">Tècniques de posicionament</h2> + +<p>El posicionament us permet moure un element des d'on es col·locaria quan estigués en un flux normal a una altra ubicació. El posicionament no és un mètode per crear el disseny principal de la pàgina, sinó que es tracta més de gestionar i ajustar la posició d’elements específics de la pàgina.</p> + +<p>Tot i això, hi ha tècniques útils per a certs patrons de disseny que depenen de la propietat {{cssxref("position")}}. La comprensió del posicionament també ajuda a entendre el flux normal, i què significa moure un element fora del flux normal.</p> + +<p>Hi ha cinc tipus de posicionament principals, que hauries de conèixer:</p> + +<ul> + <li>El <strong>posicionament estàtic</strong> (<em><strong>static positioning</strong></em>) és el valor per defecte que té cada element; significa «posa l'element en la posició normal en el flux del disseny del document; res especial per veure aquí».</li> + <li>El <strong>posicionament relatiu</strong> (<em><strong>relative positioning</strong></em>) permet modificar la posició d'un element en la pàgina i moure’l en relació amb la seva posició en el flux normal, fins i tot fent que se superposi a altres elements de la pàgina.</li> + <li>El <strong>posicionament absolut</strong> (<em><strong>absolute positioning</strong></em>) elimina un element completament del flux normal de la pàgina, com si estigués disposat en una capa separada pròpia. A partir d'aquí, el podem fixar a una posició relativa respecte de les vores de l'element <code><html></code> de la pàgina (o l'element pare posicionat més proper). És útil per a crear efectes de disseny de pàgina complexos com ara caixes de tipus pestanya en què diferents panells de contingut es disposen els uns damunt dels altre i es mostren i oculten segons es vol, o panells d'informació que es disposen fora de la pantalla per defecte, però es poden fer lliscar cap a l’interior de la pantalla amb un control de tipus botó.</li> + <li>El <strong>posicionament fix</strong> (<strong>fixed positioning</strong>) és molt similar al posicionament absolut, excepte que fixa un element en relació amb la finestra de visualització del navegador, no amb un altre element. Això és útil per a crear efectes com ara un menú de navegació persistent, que sempre es manté al mateix lloc a la pantalla en desplaçar-se la resta del contingut.</li> + <li>El <strong>posicionament enganxós</strong> (<strong>sticky positioning</strong>) és un mètode de posicionament més recent que fa que un element actuï com si fos <code>position: static</code> fins que arriba a un desplaçament definit des de la finestra de visualització del navegador, moment en què passa a actuar com a <code>position: fixed</code>.</li> +</ul> + +<h3 id="Un_exemple_senzill_de_posicionament">Un exemple senzill de posicionament</h3> + +<p>Per familiaritzar-te amb aquestes tècniques de disseny de pàgina, el mostrem un parell d'exemples ràpids. Tots els nostres exemples tenen el mateix codi HTML, que és el següent:</p> + +<pre class="brush: html notranslate"><h1>Positioning</h1> + +<p>I am a basic block level element.</p> +<p class="positioned">I am a basic block level element.</p> +<p>I am a basic block level element.</p></pre> + +<p><span id="result_box" lang="ca">Apliquem a aquest codi HTML un estil predeterminat amb el codi CSS següent:</span></p> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +}</pre> + +<p>La sortida que dona és la següent:</p> + +<p>{{ EmbedLiveSample('Simple_positioning_example', '100%', 300) }}</p> + +<h3 id="Posicionament_Relatiu_Relative_positioning">Posicionament Relatiu (<em>Relative positioning</em>)</h3> + +<p>El posicionament relatiu et permet desplaçar un element de la posició que tindria per defecte en flux normal. Això vol dir que pots assolir una tasca com ara moure una icona cap avall de manera que quedi alineada amb una etiqueta de text. Per fer-ho, podríem afegir la següent regla per afegir un posicionament relatiu:</p> + +<pre class="notranslate">.positioned { + position: relative; + background: yellow; + top: 30px; + left: 30px; +}</pre> + +<p>Aquí hem donat al nostre paràgraf del mig un valor {{cssxref("position")}} de <code>relative</code>; això no fa res per si mateix, de manera que també afegim les propietats {{cssxref("top")}} i {{cssxref("left")}}, que serveixen per a moure l'element afectat cap avall i cap a la dreta; això podria semblar el contrari del que s'esperava, però cal pensar que l'element és empès des dels costats esquerre i superior, cosa que fa que es mogui cap a la dreta i avall.</p> + +<p>Si afegeixes aquest codi, es mostra el resultat següent:</p> + +<div class="hidden"> +<h6 id="Un_exemple_de_posicionament_relatiu">Un exemple de posicionament relatiu</h6> + +<pre class="brush: html notranslate"><h1>Relative positioning</h1> + +<p>I am a basic block level element.</p> +<p class="positioned">This is my relatively positioned element.</p> +<p>I am a basic block level element.</p></pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +.positioned { + position: relative; + background: yellow; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Relative_positioning_example', '100%', 300) }}</p> + +<h3 id="Posicionament_absolut_Absolute"><span id="result_box" lang="ca">Posicionament absolut</span> (Absolute)</h3> + +<p>El posicionament absolut s’utilitza per eliminar completament un element del flux normal i col·locar-lo mitjançant desplaçaments des de les vores d’un bloc contenidor.</p> + +<p>Tornant al nostre exemple original no posicionat, podríem afegir la regla CSS següent per a implementar el posicionament absolut:</p> + +<pre class="brush: css notranslate">.positioned { + position: absolute; + background: yellow; + top: 30px; + left: 30px; +}</pre> + +<p>Aquí hem donat al nostre paràgraf del mig un valor {{cssxref("position")}} d'<code>absolute</code>, i les mateixes propietats {{cssxref("top")}} i {{cssxref("left")}}, com abans. L'addició d'aquest codi, però, dona el resultat següent:</p> + +<div class="hidden"> +<h6 id="Absolute_positioning_example">Absolute positioning example</h6> + +<pre class="brush: html notranslate"><h1>Absolute positioning</h1> + +<p>I am a basic block level element.</p> +<p class="positioned">This is my absolutely positioned element.</p> +<p>I am a basic block level element.</p></pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +.positioned { + position: absolute; + background: yellow; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Absolute_positioning_example', '100%', 300) }}</p> + +<p>Això és molt diferent. L'element ha quedat totalment separat de la resta del disseny de la pàgina i s’hi ha col·locat a sobre en l’extrem superior. Els altres dos paràgrafs ara es disposen junts, com si el germà posicionat no existís. Les propietats {{cssxref("top")}} i {{cssxref("left")}} tenen un efecte diferent sobre elements amb posicionament absolut que sobre elements amb posicionament relatiu. En aquest cas, s'especifica la distància a la qual l'element s’ha de situar dels costats superior i esquerre de la pàgina. És possible canviar l'element pare que es converteix en aquest contenidor i ho veurem a la lliçó sobre <a href="/ca/docs/Learn/CSS/Disseny_CSS/Posicionament">posicionament</a>.</p> + +<h3 id="Posicionament_fix_fixed_positioning">Posicionament fix (fixed positioning)</h3> + +<p>El posicionament fix elimina el nostre element del flux de documents de la mateixa manera que el posicionament absolut. Tanmateix, en lloc d'aplicar els desplaçaments des del contenidor, s'apliquen des de la finestra gràfica. Com que l'element es manté fix en relació amb la finestra gràfica, podem crear efectes com un menú que es manté fix a mesura que la pàgina es desplaça per sota.</p> + +<p>Per a aquest exemple, el nostre HTML inclou tres paràgrafs de text, per tal que puguem fer que la pàgina es desplaci, i un quadre al qual donarem <code>position: fixed</code>.</p> + +<pre class="brush: html notranslate"><h1>Fixed positioning</h1> + +<div class="positioned">Fixed</div> + +<p>Paragraph 1.</p> +<p>Paragraph 2.</p> +<p>Paragraph 3.</p> +</pre> + +<div id="Fixed_1"> +<div class="hidden"> +<h6 id="Fixed_positioning_example">Fixed positioning example</h6> + +<pre class="brush: html notranslate"><h1>Fixed positioning</h1> + +<div class="positioned">Fixed</div> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +</pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +.positioned { + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + padding: 10px; + margin: 10px; + border-radius: 5px; +}</pre> +</div> + +<pre class="brush: css notranslate">.positioned { + position: fixed; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Fixed_1', '100%', 200) }}</p> + +<h3 id="Posicionament_enganxós_sticky_positioning">Posicionament enganxós (sticky positioning)</h3> + +<p>El posicionament enganxós és el mètode de posicionament final que tenim a la nostra disposició. Combina el posicionament estàtic per defecte amb el posicionament fix. Quan un element té <code>position: sticky</code>, es desplaçarà en flux normal fins que arribi al desplaçament sobre la finestra de visualització del navegador que definit. En aquest moment es queda "enganxat" com si tingués <code>position: fixed</code> aplicat.</p> + +<div id="Sticky_1"> +<div class="hidden"> +<h6 id="Sticky_positioning_example">Sticky positioning example</h6> + +<pre class="brush: html notranslate"><h1>Sticky positioning</h1> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<div class="positioned">Sticky</div> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> </pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +.positioned { + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + padding: 10px; + margin: 10px; + border-radius: 5px; +}</pre> +</div> + +<pre class="brush: css notranslate">.positioned { + position: sticky; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Sticky_1', '100%', 200) }}</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> per aprendre més sobre posicionament, aneu a l'article sobre <a href="/ca/docs/Learn/CSS/Disseny_CSS/Posicionament">posicionament</a>.</p> +</div> + +<h2 id="Taules_CSS">Taules CSS</h2> + +<p>Les taules HTML són perfectes per a mostrar dades tabulades, però fa molts anys, fins i tot abans que el CSS bàsic fos compatible de manera fiable entre els navegadors, els desenvolupadors web solien utilitzar taules per als dissenys de pàgines web senceres; col·locaven els encapçalaments, els peus de pàgina, les diferents columnes, etc., en files i columnes d’una taula. Això va funcionar en el moment, però presenta molts problemes: els dissenys de taules no són flexibles, l’etiquetatge és feixuc, són difícils de depurar, i són semànticament erronis (els usuaris de lectors de pantalla, per exemple, tenen problemes per navegar en dissenys de pàgina web amb taules).</p> + +<p>La forma en què es mostra una taula en una pàgina web quan utilitzeu el marcatge de taula es deu a un conjunt de propietats CSS que defineixen el disseny de la taula. Aquestes propietats es poden utilitzar per disposar elements que no són taules, un ús que de vegades es descriu com "utilitzar taules CSS".</p> + +<p>L'exemple següent mostra un d'aquests usos; L'ús de taules CSS per al disseny s'hauria de considerar un mètode heretat en aquest moment, per a aquelles situacions en què tingueu navegadors molt antics sense compatibilitat amb Flexbox o Grid.</p> + +<p>Vegem-ne un exemple. Primer, un marcatge senzill que crea un formulari HTML. Cada element d'entrada té una etiqueta i també hem inclòs un text dins d'un paràgraf. Cada parell label/input està envoltat d'un element {{htmlelement("div")}}, amb finalitats de disseny.</p> + +<pre class="brush: html notranslate"><form> + <p>First of all, tell us your name and age.</p> + <div> + <label for="fname">First name:</label> + <input type="text" id="fname"> + </div> + <div> + <label for="lname">Last name:</label> + <input type="text" id="lname"> + </div> + <div> + <label for="age">Age:</label> + <input type="text" id="age"> + </div> +</form></pre> + +<p>Ara afegim el CSS al nostre exemple. La major part del CSS és bastant comú, excepte els usos de la propietat {{cssxref("display")}}. A l’element {{htmlelement("form")}} i als elements {{htmlelement("div")}}, {{htmlelement("label")}} i {{htmlelement("input")}} se'ls hi ha dit que es mostrin com una taula, files de la taula i cel·les de la taula, respectivament; bàsicament actuaran com un marcatge de taula HTML que alinea les etiquetes de text i les entrades de manera predeterminada. Tot el que hem de fer és afegir una mica de mida, marges, etc. perquè tot es vegi una mica més agradable, i ja haurem acabat.</p> + +<p>Observa que s’ha assignat al paràgraf de descripció (<em>caption</em>) la declaració <code>display: table-caption;</code>, que fa que aquest paràgraf actuï com un títol de taula ({{htmlelement("caption")}}), i també <code>caption-side: bottom;</code>, que indica que el títol es posa a la part inferior de la taula amb finalitats d'estil, encara que va abans de les entrades de la taula en l’ordre del codi d’origen. Això permet una mica de flexibilitat.</p> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +form { + display: table; + margin: 0 auto; +} + +form div { + display: table-row; +} + +form label, form input { + display: table-cell; + margin-bottom: 10px; +} + +form label { + width: 200px; + padding-right: 5%; + text-align: right; +} + +form input { + width: 300px; +} + +form p { + display: table-caption; + caption-side: bottom; + width: 300px; + color: #999; + font-style: italic; +}</pre> + +<p><span id="result_box" lang="ca">Això ens dona el resultat següent:</span></p> + +<p>{{ EmbedLiveSample('CSS_tables', '100%', '170') }}</p> + +<p>També pots veure aquest exemple en viu en el fitxer <a href="https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html">css-tables-example.html</a> (i també consultar-ne el <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html">codi d’origen</a>).</p> + +<h2 id="Disseny_multicolumna">Disseny multicolumna</h2> + +<p>El mòdul de disseny de múltiples columnes ens proporciona una manera de distribuir contingut en columnes, de manera similar a com flueix el text en un diari. Tot i que la lectura de columnes cap amunt i cap avall és menys útil en un context web, ja que no voleu obligar els usuaris a desplaçar-se cap amunt i cap avall, la disposició del contingut en columnes pot ser una tècnica útil.</p> + +<p>Per convertir un bloc en un contenidor multicolumna, utilitzem la propietat {{cssxref("column-count")}}, que indica al navegador quantes columnes voldríem tenir o bé {{cssxref("column-width" )}}, que indica al navegador que ompli el contenidor amb tantes columnes d'almenys aquesta amplada.</p> + +<p>A l'exemple següent, comencem amb un bloc d'HTML dins d'un element <code><div></code> que conté una classe de <code>container</code>.</p> + +<pre class="brush: html notranslate"><div class="container"> + <h1>Multi-column layout</h1> + + <p>Paragraph 1.</p> + <p>Paragraph 2.</p> + +</div></pre> + +<p>Utilitzem una <code>column-width</code> (amplada de columna) de 200 píxels en aquest contenidor, cosa que provoca que el navegador creï tantes columnes de 200 píxels com càpiguen al contenidor i, a continuació, comparteixi l’espai restant entre les columnes creades.</p> + +<div id="Multicol_1"> +<div class="hidden"> +<h6 id="Multicol_example">Multicol example</h6> + +<pre class="brush: html notranslate"> <div class="container"> + <h1>Multi-column Layout</h1> + + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + + </div> + </pre> + +<pre class="brush: css notranslate">body { max-width: 800px; margin: 0 auto; } </pre> +</div> + +<pre class="brush: css notranslate"> .container { + column-width: 200px; + }</pre> +</div> + +<p>{{ EmbedLiveSample('Multicol_1', '100%', 200) }}</p> + +<h2 id="Resum">Resum</h2> + +<p>Aquest article ha proporcionat un breu resum de totes les tecnologies de disseny que has de conèixer. Continua llegint per a obtenir més informació sobre cadascuna d’aquestes tecnologies!</p> + +<p>{{NextMenu("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</p> diff --git a/files/ca/learn/css/disseny_css/posicionament/index.html b/files/ca/learn/css/disseny_css/posicionament/index.html new file mode 100644 index 0000000000..213293ff4e --- /dev/null +++ b/files/ca/learn/css/disseny_css/posicionament/index.html @@ -0,0 +1,467 @@ +--- +title: Posicionament +slug: Learn/CSS/Disseny_CSS/Posicionament +tags: + - Article + - Beginner + - CSS + - CodingScripting + - Guide + - Layout + - Positioning + - absolute + - fixed + - relative +translation_of: Learn/CSS/CSS_layout/Positioning +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary">El posicionament permet treure elements del flux normal de disseny del document, i fer que es comportin de manera diferent, per exemple, asseient-se un damunt de l'altre o mantenint-se sempre al mateix lloc dins de la finestra de visualització del navegador. Aquest article explica els diferents valors de {{cssxref("position")}}, i com utilitzar-los.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td><span id="result_box" lang="ca"><span>Conceptes bàsics d'HTML</span></span> (estudi <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">Introducció a HTML</a>), <span id="result_box" lang="ca"><span>i una idea de com funciona CSS</span></span> (estudi <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Introducció a CSS</a>).</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Aprendre com funciona el posicionament CSS.</td> + </tr> + </tbody> +</table> + +<h2 id="Flux_del_document"><span id="result_box" lang="ca"><span>Flux del document</span></span></h2> + +<p>El posicionament és un tema bastant complex, per tant, abans de submergir-nos en el codi, anem a revisar i ampliar una mica de teoria de disseny per donar-nos una idea de com funciona això.</p> + +<p>En primer lloc, les caixes d'elements individuals es defineixen tenint en compte el contingut dels elements, afegint-hi qualsevol farciment, vora i marge al voltant d'ells - és a dir, aquell <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model">model de caixa</a> nou, que vam mirar abans. Per defecte, el contingut d'un element de nivell de bloc és del 100% de l'ample de l'element pare i tan alt com el seu contingut. Els elements en línia són tan alts i tan amples com el seu contingut. No es pot definir l'ample o alçada en elements en línia - simplement s'assenten dins del contingut dels elements de nivell de bloc. Si es vol controlar la mida d'un element en línia d'aquesta manera, s'ha d'establir perquè es comporti com un element de nivell de bloc amb <code>display: block;</code>.</p> + +<p>Això explica els elements individuals, però què passa amb els elements que interactuen els uns amb els altres? El <strong>flux de disseny normal</strong> (esmentat en l'article de presentació de disseny) és el sistema mitjançant el qual es col·loquen els elements dins de la finestra de visualització del navegador. De manera predeterminada, els elements de nivell de bloc es distribueixen verticalment a la finestra de visualització: cadascun d'ells apareixerà en una nova línia,per sota d l'última i se separaran per qualsevol marge que s'estableixi en ells.</p> + +<p>Els elements en línia es comporten de manera diferent - no apareixen en noves línies; en canvi, s'assenten en la mateixa línia que els altres i amb qualsevol contingut de text adjacent (o embolicat), sempre que hi hagi espai perquè ho facin dins de l'amplada de l'element a nivell de bloc pare. Si no hi ha espai, el text desbordat o els elements es desplacen cap a una nova línia.</p> + +<p>Si dos elements adjacents tenen un marge establert i els dos marges es toquen, el més gran dels dos es queda i el més petit desapareix - això es diu <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">col.lapsació del marge</a>, i també ho hem conegut abans.</p> + +<p>Vegem un exemple senzill que expliqui tot això:</p> + +<pre class="brush: html"><h1>Basic document flow</h1> + +<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> + +<p>By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p> + +<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> + +<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +}</pre> + +<p>{{ EmbedLiveSample('Document_flow', '100%', 500) }}</p> + +<p>Revisarem aquest exemple diverses vegades al llarg d'aquest article, ja que mostrarem els efectes de les diferents opcions de posicionament disponibles per a nosaltres.</p> + +<p>Ens agradaria que seguíssiu els exercicis en el vostre ordinador, si és possible - agafeu una còpia de <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/0_basic-flow.html">0_basic-flow.html</a></code> del nostre repositori de Github (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/0_basic-flow.html">codi font aquí</a>) i utilitzeu-lo com a punt de partida.</p> + +<h2 id="Introducció_al_posicionament">Introducció al posicionament</h2> + +<p>Tota la idea del posicionament és permetre'ns anul·lar el comportament bàsic del flux de documents descrit anteriorment, per produir efectes interessants. Què passa si voleu canviar lleugerament la posició d'algunes caixes dins d'un disseny des de la seva posició de flux de disseny per defecte, per donar-li un toc lleugerament peculiar i molest? El posicionament és la vostra eina. O si voleu crear un element d'interfície d'usuari que floti a la part superior d'altres parts de la pàgina i/o sempre es trobi al mateix lloc dins de la finestra del navegador, sense importar quant es desplaça la pàgina? El posicionament fa possible aquest treball de disseny.</p> + +<p>Hi ha una sèrie de diferents tipus de posicionament que podeu implementar en elements HTML. Per fer un tipus específic de posicionament actiu en un element, utilitzem la propietat {{cssxref("position")}}.</p> + +<h3 id="Posicionament_estàtic_(Static)"><span id="result_box" lang="ca"><span>Posicionament estàtic</span></span> (Static)</h3> + +<p>El posicionament estàtic és el valor predeterminat que cada element obté - significa "posar l'element en la seva posició normal en el flux del disseny del document - res especial per veure aquí".</p> + +<p>Per demostrar això i preparar el vostre exemple per a futures seccions, primer afegiu una <code>class</code> de <code>positioned</code> al segon {{htmlelement("p")}} en l'HTML:</p> + +<pre class="brush: html"><p class="positioned"> ... </p></pre> + +<p><span id="result_box" lang="ca"><span>Ara afegiu la següent regla a la part inferior del vostre CSS:</span></span></p> + +<pre class="brush: css">.positioned { + position: static; + background: yellow; +}</pre> + +<p>Si ara deseu i actualitzeu, no veureu cap diferència en absolut, excepte el color de fons actualitzat del segon paràgraf. Està bé - com hem dit abans, el posicionament estàtic és el comportament predeterminat!</p> + +<div class="note"> +<p><strong>Nota</strong>: Podeu veure l'exemple en aquest moment en directe a <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html">1_static-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html">vegeu el codi font</a>).</p> +</div> + +<h3 id="Posicionament_relatiu_(Relative)">Posicionament relatiu (Relative)</h3> + +<p>El posicionament relatiu és el primer tipus de posició que veurem. Això és molt semblant al posicionament estàtic, tret que una vegada que l'element posicionat ha tingut el seu lloc en el flux de disseny normal, podeu modificar la seva posició final, incloent-hi la superposició d'altres elements a la pàgina. Seguiu i actualitzeu la declaració de posició del vostre codi:</p> + +<pre class="brush: css">position: relative;</pre> + +<p>Si deseu i actualitzeu en aquesta etapa, no veureu cap canvi en el resultat en absolut, així, com modifiqem la posició de l'element? Heu d'utilitzar les propietats {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} i {{cssxref("right")}} , Que explicarem en la següent secció.</p> + +<h3 id="Introduir_top_bottom_left_i_right">Introduir top, bottom, left i right</h3> + +<p>{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, and {{cssxref("right")}} s'utilitzen juntament amb {{cssxref("position")}} per especificar exactament a on moure l'element posicionat. Per provar-ho, afegiu les següents declaracions a la regla <code>.positioned</code> al vostre CSS:</p> + +<pre>top: 30px; +left: 30px;</pre> + +<div class="note"> +<p><strong>Nota</strong>:<span id="ouHighlight__0_2TO0_2"> Els</span><span id="noHighlight_0.1974495154842031"> </span><span id="ouHighlight__4_9TO4_9">valors</span><span id="noHighlight_0.85891676862169"> </span><span class="highlighted" id="ouHighlight__14_18TO11_20">d'aquestes</span><span id="noHighlight_0.11330426706729768"> </span><span id="ouHighlight__20_29TO22_31">propietats</span><span id="noHighlight_0.18392821958485306"> </span><span id="ouHighlight__31_33TO33_35">pot</span><span id="noHighlight_0.9676838165776446"> </span><span id="ouHighlight__35_38TO37_43">prendre</span><span id="noHighlight_0.037568817284082345"> </span><span id="ouHighlight__40_42TO45_49">totes</span><span id="noHighlight_0.9017348693534137"> les </span><span id="ouHighlight__44_48TO55_61">unitats</span><span id="noHighlight_0.831725614209524"> que </span><span id="ouHighlight__66_71TO67_77">s'esperaria</span><span id="noHighlight_0.2590131286870444"> </span><span id="ouHighlight__56_64TO79_88">lògicament</span> - píxels, mm, rems,%, etc.</p> +</div> + +<p>Si ara deseu i actualitzeu, obtindreu un resultat com aquest:</p> + +<div class="hidden"> +<pre class="brush: html"><h1>Relative positioning</h1> + +<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> + +<p class="positioned">By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p> + +<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> + +<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +.positioned { + position: relative; + background: yellow; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Introducing_top_bottom_left_and_right', '100%', 500) }}</p> + +<p>Genial, eh? D'acord, aixó es probablement el que no esperaves: per què s'ha mogut a la part inferior i la dreta si s'especificat a dalt i a l'esquerra? Pot sonar Il·lògic inicialment, però aquesta és la forma en què funciona el posicionament relatiu: cal pensar en una força invisible que empeny el costat de la caixa posicionada, movent-la en la direcció oposada. Així, per exemple, si especifiqueu un <code>top: 30px;</code>, una força empeny la part superior de la caixa, fent que es mogui cap avall en 30px.</p> + +<div class="note"> +<p><strong>Nota</strong>: Podeu veure l'exemple en aquest moment en directe a <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html">2_relative-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/2_relative-positioning.html">vegeu el codi font</a>).</p> +</div> + +<h3 id="Posicionament_absolut_(Absolute)"><span id="result_box" lang="ca"><span>Posicionament absolut (</span></span>Absolute)</h3> + +<p>El posicionament absolut porta resultats molt diferents. Intenteu canviar la declaració de posició del vostre de la manera següent:</p> + +<pre>position: absolute;</pre> + +<p>Si ara deseu i actualitzeu, obtindreu un resultat com aquest:</p> + +<div class="hidden"> +<pre class="brush: html"><h1>Absolute positioning</h1> + +<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> + +<p class="positioned">Now I'm absolutely positioned, I'm not playing by the rules any more!</p> + +<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> + +<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +.positioned { + position: absolute; + background: yellow; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Absolute_positioning', '100%', 420) }}</p> + +<p>En primer lloc, tingueu en compte que el buit on l'element posicionat hauria d'estar en el flux del document ja no hi és - el primer i el tercer element s'han tancat junts, com que ja no existeix!. Bé, en certa manera, això és cert. Un element absolutament posicionat ja no existeix en el flux de disseny normal del document. En lloc d'això, s'asseu a la seva pròpia capa separada de tota la resta. Això és molt útil - vol dir que podem crear funcions d'interfície d'usuari aïllades que no interfereixin amb la posició d'altres elements de la pàgina - per exemple, les caixes d'informació emergents i els menús de control, els panells de rollover, les funcions d'interfície d'usuari que es poden arrossegar i deixar anar a qualsevol lloc en la pàgina, i així successivament.</p> + +<p>En segon lloc, observeu que la posició de l'element ha canviat - això es deu al fet que {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} i {{cssxref("right")}} es comporten d'una manera diferent amb el posicionament absolut. En lloc d'especificar la direcció en què l'element s'ha de moure, especifiquen la distància que ha de tenir l'element en cada costat dels elements que contingui. Així que, en aquest cas, estem dient que l'element absolutament posicionat hauria de situar-se 30px des de la part superior del "element que conté" i 30px des de l'esquerra.</p> + +<div class="note"> +<p><strong>Nota</strong>: Podeu utilitzar {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} i {{cssxref("right")}} per canviar la mida dels elements si és necessari. Intenteu establir <code>top: 0; bottom: 0; left: 0; right: 0;</code> and <code>margin: 0;</code> en els elements posicionats i veureu què passa! Torneu a posar-ho de nou després...</p> +</div> + +<div class="note"> +<p><strong>Nota</strong>: Sí, els marges encara afecten els elements posicionats. Tanmateix, el col·lapse de marges no existeix.</p> +</div> + +<div class="note"> +<p><strong>Nota</strong>: Podeu veure l'exemple en aquest moment en directe a <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html">3_absolute-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/3_absolute-positioning.html">vegeu el codi font</a>).</p> +</div> + +<h3 id="Contextos_de_posicionament"><span id="result_box" lang="ca"><span>Contextos de posicionament</span></span></h3> + +<p>Quin element és el "element que conté" un element absolutament posicionat? Per defecte, és l'element {{htmlelement("html")}} - l'element posicionat està niat dins del {{htmlelement("body")}} en la font HTML, però en el disseny final, es troba a 30px de distància des de la part superior i esquerra de la vora de la pàgina, que és l'element {{htmlelement("html")}}. Això s'anomena més exactament com a <strong>context de posicionament</strong> de l'element.</p> + +<p>Podem canviar el <strong>context de posicionament</strong> - quin element posiciona l'element absolutament posicionat en relació a. Això es fa establint el posicionament en un dels altres avantpassats del element - un dels elements que està niat a l'interior (no es pot col·locar en relació amb un element que no està niat a l'interior). Per demostrar-ho, afegiu la següent declaració a la regla del cos:</p> + +<pre>position: relative;</pre> + +<p><span class="short_text" id="result_box" lang="ca"><span>Això hauria de donar el següent resultat:</span></span></p> + +<div class="hidden"> +<pre class="brush: html"><h1>Positioning context</h1> + +<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> + +<p class="positioned">Now I'm absolutely positioned relative to the <code>&lt;body&gt;</code> element, not the <code>&lt;html&gt;</code> element!</p> + +<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> + +<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; + position: relative; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +.positioned { + position: absolute; + background: yellow; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Positioning_contexts', '100%', 420) }}</p> + +<p>L'element posicionat ara es troba en relació amb l'element {{htmlelement("body")}}.</p> + +<div class="note"> +<p><strong>Nota:</strong> Podeu veure l'exemple en aquest moment en directe a <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html">4_positioning-context.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/4_positioning-context.html">vegeu el codi font</a>).</p> +</div> + +<h3 id="Introducció_a_z-index">Introducció a z-index</h3> + +<p>Tot aquest posicionament absolut és una bona diversió, però hi ha una altra cosa que encara no hem considerat - quan els elements comencen a superposar-se, què determina que uns elements apareguin sobre quins altres elements? En l'exemple que hem vist fins ara, només tenim un element posicionat en el context de posicionament, i apareix a la part superior, ja que els elements posicionats guanyen elements no posicionats. Què passa quan tenim més d'un?</p> + +<p>Intenteu afegir el següent, al vostre CSS, perquè el primer paràgraf estigui absolutament posicionat també:</p> + +<pre>p:nth-of-type(1) { + position: absolute; + background: lime; + top: 10px; + right: 30px; +}</pre> + +<p>En aquest punt, veureu el primer paràgraf de color verd, desplaçat del flux del document i colocat una mica per sobre d'on era originalment. També s'apil·la a sota del paràgraf original .positioned, on els dos es superposen. Això és degut a que el paràgraf <code>.positioned</code> és el segon paràgraf de l'ordre d'origen, i els elements posicionats més endavant en l'ordre d'origen guanyen sobre els elements posicionats anteriorment en l'ordre d'origen.</p> + +<p>Es pot canviar l'ordre d'apilament? Sí, podeu fer-ho, utilitzant la propietat {{cssxref("z-index")}}. "z-index" és una referència a l'eix z. Recordareu que en punts anteriors, en la font, parlàvem de la utilització en pàgines web de coordenades horitzontals (eixos x) i verticals (eixos-y) per tal de determinar el posicionament de coses com ara imatges de fons i desplaçaments d'ombra. (0,0) es troba a la part superior esquerra de la pàgina (o element), i els eixos x i y es desplaçan cap a la dreta i avall de la pàgina (per als idiomes d'esquerra a dreta, de totes maneres).</p> + +<p>Les pàgines web també tenen un eix z - una línia imaginària que s'estén des de la superfície de la pantalla, cap a la nostra cara (o el que vulgueu tenir davant de la pantalla). Els valors de {{cssxref("z-index")}} afecten on els elements posicionats se situen en aquest eix; els valors positius els mouen més amunt per la pila, i els valors negatius els mouen més avall a la pila. De manera predeterminada, els elements posicionats tenen un z-index d'auto, que és efectivament 0.</p> + +<p>Per canviar l'ordre d'apilament, proveu d'afegir la següent declaració a la vostra regla <code>p:nth-of-type(1)</code>:</p> + +<pre>z-index: 1;</pre> + +<p><span class="short_text" id="result_box" lang="ca"><span>Ara hauríeu de veure l'exemple acabat:</span></span></p> + +<div class="hidden"> +<pre class="brush: html"><h1>z-index</h1> + +<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> + +<p class="positioned">Now I'm absolutely positioned relative to the <code>&lt;body&gt;</code> element, not the <code>&lt;html&gt;</code> element!</p> + +<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> + +<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; + position: relative; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +.positioned { + position: absolute; + background: yellow; + top: 30px; + left: 30px; +} + +p:nth-of-type(1) { + position: absolute; + background: lime; + top: 10px; + right: 30px; + z-index: 1; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Introducing_z-index', '100%', 400) }}</p> + +<p>Tingueu en compte que <code>z-index</code> només accepta valors d'índex, sense unitat; No podeu especificar que desitgeu que un element tingui 23 píxels a dalt de l'eix Z - no funciona així. Els valors més alts van per sobre dels valors inferiors, i depèn de vosaltres quins valors utilitzar. L'ús de 2 i 3 donaria el mateix efecte que 300 i 40000.</p> + +<p>Tingueu en compte que aquí només hem tractat un únic context de posicionament. Si tinguéssiu dos conjunts separats d'elements posicionats a la mateixa pàgina, i volguéssiu que es superposessin i que l'ordre d'apilament funcionés d'una manera específica, les coses es complicarien. Afortunadament, molt poques vegades trobareu tal complexitat amb z-index. Si voleu llegir amb molt més detall sobre com funciona exactament z-index, consulteu la <a href="https://www.w3.org/community/webed/wiki/CSS_absolute_and_fixed_positioning#The_third_dimension.E2.80.94z-index">Web Standards Curriculum z-index writeup</a>. En aquest article us hem proporcionat tot el que necessiteu saber en aquesta etapa del vostre aprenentatge.</p> + +<div class="note"> +<p><strong>Note</strong>: Podeu veure l'exemple en aquest moment en directe a <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html">5_z-index.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/5_z-index.html">vegeu el codi font</a>).</p> +</div> + +<h3 id="Posicionament_Fixa_(Fixed)"><span id="result_box" lang="ca"><span>Posicionament Fixa (</span></span>Fixed)</h3> + +<p>Hi ha un altre tipus de posicionament a cobrir - fixed. Això funciona exactament igual que el posicionament absolut, amb una diferència clau - mentre que el posicionament absolut fixa un element en el lloc en relació amb l'element {{htmlelement("html")}} o seu més proper avantpassat posicionat, el posicionament fix fixa un element en el lloc en relació a la finestra de visualització del navegador. Això vol dir que podeu crear elements útils de la interfície d'usuari que es fixen en el lloc, com ara menús de navegació persistents.</p> + +<p>Fem un exemple senzill per mostrar el que volem dir. Abans de res, elimineu les regles existents <code>p:nth-of-type(1)</code> i <code>.positioned</code> del vostre CSS.</p> + +<p>Ara, actualitzeu la regla del cos per eliminar la declaració <code>position: relative;</code> i afegiu una alçada fixa, com aixó:</p> + +<pre>body { + width: 500px; + height: 1400px; + margin: 0 auto; +}</pre> + +<p>Ara donarem a l'element {{htmlelement("h1")}} <code>position: fixed;</code>, i aconseguirem que s'assegui en el centre superior de la finestra de visualització. Afegiu la regla següent al vostre CSS:</p> + +<pre>h1 { + position: fixed; + top: 0; + width: 500px; + margin: 0 auto; + background: white; + padding: 10px; +}</pre> + +<p>El <code>top: 0;</code> és necesari per fer que s'adhereixi a la part superior de la pantalla; Donem a l'encapçalament el mateix ample que la columna de contingut i utilitzarem el fidel antic <code>margin: 0 auto;</code> com a truc per centrar-ho. A continuació, li donem un fons blanc i algun farcit, de manera que el contingut no estigui visible per sota d'ell.</p> + +<p>Si deseu i actualitzeu ara, veureu un petit efecte divertit pel qual l'encapçalament es manté fix, i el contingut apareix en desplaçar-se cap amunt i desaparèixer per sota d'ell. Però podríem millorar més, això - de moment, alguns dels continguts començan per sota de l'encapçalament, perquè el encapçalament posicionat ja no apareix en el flux del document, de manera que la resta del contingut es mou cap amunt. Necessitem moure-ho tot cap avall una mica; podem fer-ho establint un marge superior al primer paràgraf. Afegiu-ho ara:</p> + +<pre>p:nth-of-type(1) { + margin-top: 60px; +}</pre> + +<p><span class="short_text" id="result_box" lang="ca"><span>Ara hauríeu de veure l'exemple acabat:</span></span></p> + +<div class="hidden"> +<pre class="brush: html"><h1>Fixed positioning</h1> + +<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> + +<p class="positioned">I'm not positioned any more...</p> + +<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> + +<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css">body { + width: 500px; + height: 1400px; + margin: 0 auto; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +h1 { + position: fixed; + top: 0px; + width: 500px; + margin: 0 auto; + background: white; + padding: 10px; +} + +p:nth-of-type(1) { + margin-top: 60px; +}</pre> + +<p> </p> +</div> + +<p>{{ EmbedLiveSample('Fixed_positioning', '100%', 400) }}</p> + +<div class="note"> +<p><strong>Nota</strong>: Podeu veure l'exemple en aquest moment en directe a <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html">6_fixed-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html">vegeu el codi font</a>).</p> +</div> + +<h3 id="Experimental_posició_adherent_(sticky)">Experimental: posició adherent (sticky)</h3> + +<p>Hi ha un nou valor de posicionament disponible anomenat <code>position: sticky</code>, el suport del mateix no està molt estès. Aquest és bàsicament un híbrid entre una posició relativa i una fixa, que permet que un element posicionat actuï com si estigués relativament posicionat fins que es desplaci a un determinat llindar (per ex., 10px des de la part superior de la finestra de visualització), i després es torna fix. Vegeu la nostra <a href="/en-US/docs/Web/CSS/position#Sticky_positioning">entrada de referéncia de position: sticky</a> per més detalls i un exemple.</p> + +<h2 id="Resum">Resum</h2> + +<p>Estic segur que us heu divertir jugant amb el posicionament bàsic - és una de les eines essencials que està darrera en le creació de complexos dissenys CSS i funcions d'interfície d'usuari. Tenint en compte això, en el proper article tindrem encara més diversió amb el posicionament, allà anirem un pas més enllà i començarem a construir algunes coses útils del món real amb ell.</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}</p> diff --git a/files/ca/learn/css/disseny_css/suport_en_navegadors_antics/index.html b/files/ca/learn/css/disseny_css/suport_en_navegadors_antics/index.html new file mode 100644 index 0000000000..5a689b6437 --- /dev/null +++ b/files/ca/learn/css/disseny_css/suport_en_navegadors_antics/index.html @@ -0,0 +1,237 @@ +--- +title: Suport en navegadors antics +slug: Learn/CSS/Disseny_CSS/Suport_en_navegadors_antics +translation_of: Learn/CSS/CSS_layout/Supporting_Older_Browsers +--- +<div>{{LearnSidebar}}</div> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}</p> + +<p class="summary">En aquest mòdul et recomanem que utilitzis els mètodes Flexbox i Grid com a eines principals per als teus dissenys. Tot i això, hi haurà visitants del teu lloc web que utilitzin navegadors més antics o navegadors que no admetin els mètodes que has utilitzat. Això sempre serà així a la xarxa: a mesura que es desenvolupen funcions noves, els diferents navegadors prioritzen coses diferents. Aquest article explica com utilitzar tècniques web modernes sense perjudicar els usuaris que empren una tecnologia més antiga.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisits:</th> + <td>Els conceptes bàsics d'HTML (consulta la <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a>), i nocions de com funciona el CSS (consulta la <a href="/ca/docs/Learn/CSS/First_steps">Introducció al CSS</a> i <a href="/ca/docs/Learn/CSS/Building_blocks">Aplicar estil a les caixes</a>).</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Entendre com proporcionar assistència per als dissenys en navegadors antics que potser no són compatibles amb les funcions que vols utilitzar.</td> + </tr> + </tbody> +</table> + +<h2 id="El_panorama_de_compatibilitat_dels_navegadors_per_al_teu_lloc_web">El panorama de compatibilitat dels navegadors per al teu lloc web?</h2> + +<p>Cada lloc web és diferent en termes de públic objectiu. Abans de decidir l’enfocament que cal adoptar, esbrina el nombre de visitants que accedeixen al teu lloc web amb navegadors més antics. Això és senzill si ja tens un lloc web que simplement modifiques o reemplaces, perquè probablement tinguis analítiques que t'indiquin la tecnologia que utilitzen les persones que hi accedeixen. Si no tens analítiques o es tracta un lloc web totalment nou, hi ha llocs com ara <a href="http://gs.statcounter.com/">Statcounter</a> que poden proporcionar estadístiques filtrades segons la ubicació.</p> + +<p>També has de considerar el tipus de dispositius i la manera com la gent utilitza el teu lloc web; per exemple, potser esperes un nombre de dispositius mòbils superior a la mitjana. Sempre s’ha de tenir en compte l’accessibilitat i les persones que utilitzen tecnologia d’assistència, però per a alguns llocs pot ser encara més crític. Segons experiència pròpia, els desenvolupadors sovint es preocupen massa per l’experiència de l’1% d’usuaris en una versió antiga d’Internet Explorer, i no consideren del tot el nombre molt més gran d'usuaris que tenen necessitats d’accessibilitat especials.</p> + +<h2 id="La_compatibilitat_de_les_funcions_que_empres">La compatibilitat de les funcions que empres</h2> + +<p>Un cop coneixes els navegadors que accedeixen al teu lloc web, pots valorar qualsevol tecnologia que vulguis utilitzar segons la compatibilitat que presenten i la facilitat amb què pots proporcionar una alternativa als visitants que no tenen aquesta tecnologia disponible. Intentem facilitar-te aquesta experiència proporcionant informació de compatibilitat dels navegadors en cadascuna de les pàgines que detallen una propietat CSS. Per exemple, consulta la pàgina de {{cssxref("grid-template-columns")}}. Al final d'aquesta pàgina hi ha una taula que mostra els navegadors principals juntament amb la versió que va començar a admetre aquesta propietat.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16047/browser-table.png" style="height: 1178px; width: 2102px;"></p> + +<p>Una altra manera més popular d'esbrinar què és compatible amb una funció és el lloc web <a href="https://caniuse.com/">Can I Use</a>. Aquest lloc web enumera la majoria de funcions de la plataforma web amb informació sobre l'estat de compatibilitat del navegador. Pots veure les estadístiques d’ús per ubicació, fet que resulta útil si treballes en un lloc que té usuaris d'una àrea del món determinada. Fins i tot pots enllaçar el teu compte de Google Analytics per a obtenir anàlisis basades en les teves dades d’usuari.</p> + +<p>Entendre la tecnologia que tenen els teus usuaris i les compatibilitats de les funcions que potser vulguis fer servir et proporciona una bona base per a prendre totes les decisions i saber quina és la millor manera de donar suport a tots els teus usuaris.</p> + +<h2 id="Compatibilitat_no_significa_«veures_igual»">Compatibilitat no significa «veure's igual»</h2> + +<p>És possible que un lloc web no es vegi de la mateixa manera a tots els navegadors, perquè alguns dels teus usuaris accediran al lloc web des d’un dispositiu mòbil i d’altres des de l'ordinador de taula. De la mateixa manera, alguns dels teus usuaris tindran una versió antiga del navegador, i d'altres una de més nova. És possible que alguns dels teus usuaris n’escoltin el contingut amb un lector de pantalla o hagin fet zoom a la pàgina per a poder-la llegir. Donar suport a tothom significa servir una versió del contingut dissenyada estratègicament, de manera que es vegi genial en els navegadors moderns, però que encara puguin utilitzar a un nivell bàsic els usuaris de navegadors més antics.</p> + +<p>Un nivell bàsic de compatibilitat prové d’estructurar bé el contingut perquè el flux normal de la pàgina tingui sentit. Pot ser que un usuari amb un telèfon mòbil amb funcions molt limitades no obtingui gran part del teu CSS, però el contingut fluirà de manera que faciliti la lectura. Per tant, un document HTML ben estructurat hauria de ser sempre el punt de partida. <em>El teu contingut té sentit si suprimeixes el full d’estil?</em></p> + +<p>Una opció és deixar aquesta visió senzilla del lloc web com a alternativa per a les persones que utilitzen navegadors molt antics o limitats. Si tens un nombre reduït de persones que visiten el lloc amb aquests navegadors, és possible que no tingui sentit comercial dedicar temps a intentar donar-los una experiència similar a la gent que utilitza navegadors moderns. Seria millor dedicar temps a coses que facin més accessible el lloc web, perquè així dones servei a molts més usuaris. Hi ha un punt intermedi entre una pàgina HTML simple i tots aquests recursos, i el CSS ha permès que la creació d'aquestes alternatives sigui bastant senzilla.</p> + +<h2 id="La_creació_d’alternatives_demergència_amb_CSS">La creació d’alternatives d'emergència amb CSS</h2> + +<p>Les especificacions CSS contenen informació que explica què fa el navegador quan s'apliquen dos mètodes de disseny al mateix element. Això vol dir que hi ha una definició per a què passa si un element flotant, per exemple, també és un element de graella que utilitza disseny de graella CSS. Combina aquesta informació amb el fet que els navegadors ignoren el CSS que no entenen, i tens una manera de crear dissenys senzills amb les <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">tècniques heretades</a> que ja hem explicat, que després se sobreescriuen amb el teu disseny de graella en els navegadors moderns que l’entenen.</p> + +<p>En l'exemple següent hem especificat que tres elements de flotació <code><div></code> es mostrin en fila. Qualsevol navegador que no admeti el <a href="/ca/docs/Learn/CSS/Disseny_CSS/Graelles">disseny de graella CSS</a> veurà la fila de caixes com un disseny amb el mètode de flotació. Un element de flotació que es converteix en un element de graella perd el comportament de flotació, i això significa que si convertim l'embolcall en un contenidor de graella, els elements de flotació es converteixen en elements de graella. Si el navegador admet el disseny de graella, mostrarà la pàgina en forma de graella; si no l’admet, ignorarà les propietats relacionades amb el disseny de graella i utilitzarà el disseny de flotació.</p> + +<div id="Example1"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + max-width: 400px; + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} + +.item { + float: left; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item">Primer element</div> + <div class="item">Segon element</div> + <div class="item">Tercer element</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('Example1', '100%', '200') }}</p> +</div> + +<div class="note"> +<p><strong>Nota</strong>: La propietat {{cssxref("clear")}} tampoc té cap efecte un cop l'element es converteix en un element de graella, de manera que pots tenir un composició amb un peu de pàgina esborrat, que es convertirà en un disseny de graella.</p> +</div> + +<h3 id="Mètodes_de_les_solucions_alternatives">Mètodes de les solucions alternatives</h3> + +<p>Hi ha diversos mètodes de disseny que es poden utilitzar de manera similar a aquest exemple de flotació. Pots triar el que tingui més sentit per al patró de disseny que has de crear.</p> + +<dl> + <dd><strong><code>Float</code></strong> i <code><strong><strong>clear</strong></strong></code></dd> + <dd>Com s'ha mostrat abans, les propietats <em>float</em> i <em>clear</em> deixen d'afectar el disseny si els elements que passen a ser de flotació o els esborrats es converteixen en elements flexibles o de graella.</dd> + <dt><code>display: inline-block</code></dt> + <dd>Aquest mètode es pot utilitzar per a crear dissenys de columnes si un element té <code>display: inline-block</code>, però si després es converteix en un element de disseny de tipus flexible o de graella, el comportament <code>inline-block</code> s'ignora.</dd> + <dt><code>display: table</code></dt> + <dd>El mètode per a crear taules CSS que es descriu en la <a href="/ca/docs/Learn/CSS/Disseny_CSS/Introduccio_disseny_CSS">introducció</a> d'aquests articles es pot utilitzar com a mètode de solució alternativa. Els elements que estiguin configurats en la taula CSS perdran aquest comportament si es converteixen en elements Flexbox o Grid. Però és important destacar que les caixes sense nom que s’han creat per a corregir l'estructura de la taula, no es creen.</dd> + <dt>Disseny en diverses columnes</dt> + <dd>Pots utilitzar <a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">multi-col</a> com a solució alternativa en certs dissenys; si el teu contenidor té definida alguna propietat <code>column-*</code> i es converteix en un contenidor amb comportament de graella, s'anul·la el comportament en columnes.</dd> + <dt>Flexbox com a solució alternativa a la graella</dt> + <dd><a href="/ca/docs/Learn/CSS/Disseny_CSS/Flexbox">Flexbox</a> té una compatibilitat de navegador més gran que Grid perquè ha rebut el suport d’Internet Explorer 10 i 11, tot i que et recomanem que comprovis la informació que trobaràs més endavant en aquest article sobre la compatibilitat força irregular i confusa de Flexbox en navegadors més antics. Si converteixes un contenidor flexible en un contenidor de graella, s'ignorarà qualsevol propietat <code>flex</code> aplicada als descendents.</dd> +</dl> + +<p>Observa que si fas servir el CSS d'aquesta manera pots proporcionar una experiència d'usuari decent per ajustar moltes compaginacions en navegadors antics. Afegim un disseny més senzill basat en tècniques més antigues i amb bona compatibilitat, i després utilitzem el CSS més recent per a crear el disseny que veurà més del 90% del públic. Hi ha casos, però, en què el codi alternatiu haurà d’incloure alguna cosa que els navegadors nous també interpretaran. Un bon exemple d’això és si afegim amplades percentuals als nostres elements de flotació per aconseguir que les columnes s’assemblin més a la visualització de graella i s’estirin per omplir el contenidor.</p> + +<p>En el disseny de flotació, el percentatge es calcula a partir del contenidor: el 33,333% és un terç de l'amplada del contenidor. Tanmateix, a la graella es calcula que el 33,333% es calcula a partir de l’àrea de la graella en què es troba l’element, de manera que es converteix en un terç de la mida que volem un cop introduït el disseny de graella.</p> + +<div id="Example2"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + max-width: 400px; + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} + +.item { + float: left; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + width: 33.333%; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item">Primer element</div> + <div class="item">Segon element</div> + <div class="item">Tercer element</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('Example2', '100%', '200') }}</p> +</div> + +<p>Per resoldre aquest problema, hem de tenir una manera de detectar si la graella és compatible i, per tant, si anul·larà l'amplada. El CSS té una solució.</p> + +<h2 id="Consultar_les_propietats">Consultar les propietats</h2> + +<p>Consultar les propietats et permet provar si un navegador admet alguna funció CSS en concret. Això vol dir que pots escriure algun CSS per a navegadors que no admetin una característica determinada, i a continuació comprovar si el navegador és compatible i introduir el teu disseny.</p> + +<p>Si afegim una consulta de propietats en l’exemple anterior, podem utilitzar-la per a configurar les amplades dels nostres articles de manera automàtica (<code>auto</code>) si sabem que hi ha compatibilitat amb el disseny de graella.</p> + +<div id="Example3"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + max-width: 400px; + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} + +.item { + float: left; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + width: 33.333%; +} + +@supports (display: grid) { + .item { + width: auto; + } +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item">Primer element</div> + <div class="item">Segon element</div> + <div class="item">Tercer element</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('Example3', '100%', '200') }}</p> +</div> + +<p>La compatibilitat per a la consulta de propietats és molt bona en tots els navegadors moderns, però cal tenir en compte que són els navegadors que no admeten la graella CSS els que tampoc no admeten la consulta de propietats. Això significa que per a aquells navegadors funcionarà un enfocament com el que es detalla més amunt. El que fem és escriure primer el nostre CSS anterior, sense fer cap consulta de propietats. Els navegadors que no admeten la graella i no admeten la consulta de propietats faran servir la informació de disseny que poden comprendre i ignoraran completament la resta. Els navegadors que admeten la consulta de propietats també admeten la graella, i per tant executaran el codi de graella i el codi de la consulta de propietats.</p> + +<p>L'especificació per a la consulta de propietats també inclou la possibilitat de comprovar si un navegador no admet una propietat; això només és útil si el navegador admet consultes de propietats. En el futur tindrà sentit un enfocament que comprovi la falta de compatibilitats, perquè ja no existiran els navegadors que no disposen de compatibilitats per a la consulta. Ara, però, utilitza l’enfocament de fer servir el CSS anterior i sobreescriure'l per a obtenir la millor compatibilitat.</p> + +<h2 id="Les_versions_anteriors_de_Flexbox">Les versions anteriors de Flexbox</h2> + +<p>En versions anteriors dels navegadors, pots trobar versions anteriors de l'especificació Flexbox. En el moment d’escriure això, es tracta principalment d’un problema amb Internet Explorer 10, que utilitza el prefix <code>-ms-</code> per a Flexbox. Això també significa que hi ha articles i tutorials obsolets; <a href="https://css-tricks.com/old-flexbox-and-new-flexbox/">aquesta guia útil</a> t'ajuda a comprovar el que busques, i també pot ajudar-te si necessites compatibilitat Flexbox en navegadors molt antics.</p> + +<h2 id="La_versió_prefixada_de_graella_de_l’Internet_Explorer_10_i_11">La versió prefixada de graella de l’Internet Explorer 10 i 11</h2> + +<p>L'especificació de graella CSS es va prototipar inicialment en Internet Explorer 10; això vol dir que, tot i que IE10 i IE11 no disposen de compatibilitat de graella <em>moderna</em>, sí que tenen una versió de disseny de graella molt útil, tot i que diferent de l’especificació moderna que documentem en aquest lloc. Les implementacions d’IE10 i 11 tenen el prefix <code>-ms-</code>, que significa que les pots utilitzar per a aquests navegadors i que s'ignoraran en els navegadors que no formin part de Microsoft. Tanmateix, Edge encara entén la sintaxi antiga, així que tingues cura que tot es sobreescrigui de manera segura al teu CSS de graella moderna.</p> + +<p>La guia per a la <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">Millora progressiva del disseny de graella</a> et pot ajudar a comprendre la versió de la graella d’Internet Explorer, i hem inclòs alguns enllaços útils addicionals al final d'aquest article. Tanmateix, a menys que tinguis un nombre molt elevat de visitants en versions d’Internet Explorer més antigues, potser és millor centrar-te en la creació d’una alternativa que funcioni per a tots els navegadors no compatibles.</p> + +<h2 id="Proves_amb_navegadors_antics">Proves amb navegadors antics</h2> + +<p>Atès que la majoria de navegadors admeten Flexbox i la graella, pot ser raonablement difícil fer proves amb navegadors més antics. Una de les maneres és utilitzar una eina de prova en línia com Sauce Labs, tal i com es detalla en el mòdul de <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">comprovació de compatibilitat entre navegadors</a>.</p> + +<p>També pots descarregar i instal·lar màquines virtuals i executar versions anteriors de navegadors en un entorn contingut en el teu ordinador. Tenir accés a versions anteriors d’Internet Explorer és especialment útil, i amb aquest propòsit Microsoft ha posat a disposició dels usuaris una <a href="https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/">varietat de màquines virtuals de descàrrega gratuïta</a>. Estan disponibles per als sistemes operatius Mac, Windows i Linux, i per tant són una bona manera de fer proves en navegadors Windows antics i moderns, encara que no utilitzis un ordinador amb sistema operatiu de Windows.</p> + +<h2 id="Resum">Resum</h2> + +<p>Ara tens el coneixement per utilitzar tècniques de confiança com ara Grid i Flexbox, crear solucions alternatives per a navegadors més antics i utilitzar qualsevol tècnica nova que pugui aparèixer en el futur.</p> + +<h2 id="Consulta_també">Consulta també</h2> + +<ul> + <li><a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/">L'ús de la consulta de propietats en CSS</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">Compatibilitat amb versions anteriors de Flexbox</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">Disposició de graella CSS i millora progressiva</a></li> + <li><a href="https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/">L'ús de la graella CSS: Compatibilitat amb navegadors sense comportament de graella</a></li> + <li><a href="https://24ways.org/2012/css3-grid-layout/">Un tutorial que utilitza les versions IE10 i 11 de graella</a></li> + <li><a href="https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/">Hauria d’intentar utilitzar la implementació IE10 de disseny de graella?</a></li> + <li><a href="https://24ways.org/2017/cascading-web-design/">Disseny web en cascada amb consulta de propietats</a></li> + <li><a href="https://gridbyexample.com/learn/2016/12/24/learning-grid-day24/">L'ús de les consultes de propietats (vídeo)</a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="En_aquest_mòdul">En aquest mòdul</h2> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introducció al disseny CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Flux normal</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Graella (Grid)</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Flotació</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Posicionament</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Disseny en columnes</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">El disseny adaptatiu</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Guia d’iniciació a les consultes de mèdies</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Mètodes heretats de disseny de pàgines web</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Compatibilitat amb navegadors antics</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Avaluació del conjunt d'elements bàsics del disseny</a></li> +</ul> diff --git a/files/ca/learn/css/estilitzar_text/composició_pàgina_inici/index.html b/files/ca/learn/css/estilitzar_text/composició_pàgina_inici/index.html new file mode 100644 index 0000000000..2619be67e7 --- /dev/null +++ b/files/ca/learn/css/estilitzar_text/composició_pàgina_inici/index.html @@ -0,0 +1,112 @@ +--- +title: Composició d'una pàgina d'inici de l'escola comunitaria +slug: Learn/CSS/Estilitzar_text/Composició_pàgina_inici +tags: + - Assessment + - Beginner + - CSS + - CodingScripting + - Link + - Styling text + - font + - list + - web font +translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</div> + +<p class="summary">En aquesta avaluació, comprovarem la comprensió de totes les tècniques d'estil de text que hem cobert al llarg d'aquest mòdul, que us permetrà personalitzar el text de la pàgina d'inici d'una escola comunitària. Podríeu tindra una mica de diversió durant el camí.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td><span id="result_box" lang="ca"><span>Abans d'intentar aquesta avaluació, hauríeu d'haver treballat tots els articles d'aquest mòdul.</span></span></td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Provar la comprensió de les tècniques d'estil de text CSS.</td> + </tr> + </tbody> +</table> + +<h2 id="Punt_de_partida"><span id="result_box" lang="ca"><span>Punt de partida</span></span></h2> + +<p>Per començar aquesta avaluació, heu de:</p> + +<ul> + <li>Aneu i agafeu els fitxers <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/index.html">HTML</a> i <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/style.css">CSS</a> per a l'exercici i la <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/external-link-52.png">icona de l'enllaç extern proporcionada</a>.</li> + <li>Feu una còpia d'ells a l'ordinador local.</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: Com a alternativa, podeu utilitzar un lloc com <a class="external external-icon" href="http://jsbin.com/">JSBin</a> o <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> per fer la vostra avaluació. Podeu enganxar el codi HTML i omplir el CSS en un d'aquests editors en línia i utilitzar <a href="http://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-start/external-link-52.png">aquest URL</a> per indicar la imatge de fons. Si l'editor en línia que esteu utilitzant no té cap panell CSS separat, no dubteu a posar-lo en un element <code><style></code> a la capçalera del document.</p> +</div> + +<h2 id="Resum_del_projecte"><span id="result_box" lang="ca"><span>Resum del projecte</span></span></h2> + +<p>Us hem proporcionat un codi HTML sense format per a la pàgina d'inici d'una universitat comunitària imaginària, a més d'alguns estils CSS de la pàgina en un disseny de dues columnes, proporcionant un estil rudimentari. Heu d'escriure els vostres afegits CSS a sota del comentari a la part inferior del fitxer CSS, per assegurar-vos que sigui fàcil marcar les parts que heu realitzat. No us preocupeu si alguns dels selectors són repetitius; en aquest cas us deixarem.</p> + +<p>Fonts:</p> + +<ul> + <li>Primer de tot, descarregueu un parell de fonts gratuïtes. Com que es tracta d'una escola, les fonts s'haurien d'escollir per donar a la pàgina un sensació bastant seriosa, formal i de confiança - una font serif per el lloc a tot el cos del text general, juntament amb una sans-serif o una serif recta per als encapçalaments, podria ser agradable.</li> + <li>Utilitzeu un servei adequat per generar un codi font <code>@face-face</code> blindat per a aquestes dues fonts.</li> + <li>Apliqueu la font del cos a la pàgina sencera i la font d'encapçalament a les capçaleres</li> +</ul> + +<p><span id="result_box" lang="ca"><span>Estil de text general</span></span> :</p> + +<ul> + <li>Doneu a la pàgina un <code>font-size</code> de <code>10px</code> a tot el lloc.</li> + <li>Doneu els encapçalaments i altres tipus d'elements les mides de font apropiades definides amb una unitat relativa adequada.</li> + <li>Doneu al text del cos una alçada de línia (<code>line-height</code>) adequada.</li> + <li>Centreu el encapçalament de nivell superior a la pàgina.</li> + <li>Doneu als encapçalaments una mica d'espaiat a les lletres (<code>letter-spacing</code>) perquè no estiguin massa atapeïdes, i deixeu que les lletres respiren una mica.</li> + <li>Doneu al text del cos una mica d'espaiat entre lletres (<code>letter-spacing</code>) i espaiat entre paraules (<code>word-spacing</code>) , segons correspong</li> + <li>Doneu el primer paràgraf després de cada encapçalament en la <code><section></code> una mica de sagnat al text (<code>text-indentation</code>), diguem 20px.</li> +</ul> + +<p>Enllaços:</p> + +<ul> + <li>Doneu als estats de l'enllaç, visitad, enfocament i desplaçamen per damunt alguns colors que van amb el color de les barres horitzontals en la part superior i inferior de la pàgina.</li> + <li>Feu que els enllaços estiguin subratllats de manera predeterminada, però quan es passa el cursor per damunt o els enfoca, el subratllat desapareix.</li> + <li>Elimineu el contorn d'enfocament predeterminat de TOTS els enllaços de la pàgina.</li> + <li>Proporcioneu a l'estat actiu un estil notablement diferent, per la qual cosa es destaca molt bé, però cal que encaixi amb el disseny general de la pàgina.</li> + <li>Feu que els enllaços externs tinguin la icona de l'enllaç extern inserida al seu costat.</li> +</ul> + +<p>Llistes:</p> + +<ul> + <li>Assegureu-vos que l'espaiat de les vostres llistes i elements de llista funcionan bé amb l'estil de la pàgina general. Cada element de la llista hauria de tenir la mateixa alçada de línia (<code>line-height</code>) que una línia de paràgraf, i cada llista hauria de tenir el mateix espai en la part superior i inferior que hi ha entre els paràgrafs.</li> + <li>Doneu als elements de la llista una bonica vinyeta, apropiada per al disseny de la pàgina. Depenent de si trieu una imatge de vinyeta personalitzada o una altra cosa.</li> +</ul> + +<p><span id="result_box" lang="ca"><span>Menú de navegació</span></span></p> + +<ul> + <li>El estil del menú de navegació que tingui un aspecte adequat per a l'aparença de la pàgina.</li> +</ul> + +<h2 id="Consells_i_suggeriments">Consells i suggeriments</h2> + +<ul> + <li>No cal que editeu l'HTML de cap manera per a aquest exercici.</li> + <li>No necessàriament heu de fer que el menú de navegació es vegi com botons, però ha de ser una mica més alt per tal que no sembli una tonteria al costat de la pàgina; Recordeu, també, que heu de fer d'aquest un menú vertical de navegació.</li> +</ul> + +<h2 id="Exemple">Exemple</h2> + +<p>La següent captura de pantalla mostra un exemple del que podria semblar el disseny final:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12994/example2.png" style="display: block; height: 1106px; margin: 0px auto; width: 1533px;"></p> + +<h2 id="Avaluació">Avaluació</h2> + +<p>Si seguiu aquesta avaluació com a part d'un curs organitzat, hauríeu de poder lliurar el vostre treball al vostre professor/mentor per qualificar-ho. Si esteu en auto-aprenentatge, podreu obtenir la guia de qualificacions amb força facilitat preguntant sobre el tema <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">en el fil de conversa en l'àrea d'aprenentatge</a>, o en el canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> en <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Intenteu primer l'exercici - no es guanya res fent trampes!</p> + +<p>{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</p> diff --git a/files/ca/learn/css/estilitzar_text/estilitzar_enllaços/index.html b/files/ca/learn/css/estilitzar_text/estilitzar_enllaços/index.html new file mode 100644 index 0000000000..448a53289d --- /dev/null +++ b/files/ca/learn/css/estilitzar_text/estilitzar_enllaços/index.html @@ -0,0 +1,424 @@ +--- +title: Aplicar estils a enllaços +slug: Learn/CSS/Estilitzar_text/Estilitzar_enllaços +translation_of: Learn/CSS/Styling_text/Styling_links +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</div> + +<p class="summary">Quan s’aplica estil a <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Crear_hipervincles">enllaços</a> és important entendre com fer ús de les pseudoclasses per a donar estil als estats de l’enllaç d’una manera efectiva, i com donar estil als enllaços per a utilitzar-los en diverses interfícies d’usuari característiques comunes, com ara menús de navegació i pestanyes. En aquest article tractarem tots aquests temes.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td>Coneixements bàsics d'informàtica, fonaments d'HTML (consulta la <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l’HTML</a>), fonaments de CSS (consulta la <a href="/ca/docs/Learn/CSS/First_steps">Introducció al CSS</a>), <a href="/ca/docs/Learn/CSS/Estilitzar_text/Text_fonamental">fonaments d’aplicació d’estil i tipus de lletra als textos amb CSS</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Aprendre a dissenyar els estats d'un enllaç i a fer servir enllaços de manera efectiva en interfícies d'usuari característiques comunes, com ara els menús de navegació.</td> + </tr> + </tbody> +</table> + +<h2 id="Un_cop_d’ull_a_alguns_enllaços"><span id="result_box" lang="ca">Un cop d’ull a alguns enllaços</span></h2> + +<p>En la secció <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Crear_hipervincles">Creació d’hipervincles</a> hem vist com has d’implementar els enllaços en el teu codi HTML d'acord amb les bones pràctiques. En aquest article aprofundirem en aquest coneixement i et mostrarem les bones pràctiques que has de tenir en compte per a aplicar estil als enllaços.</p> + +<h3 id="Els_estats_dun_enllaç">Els estats d'un enllaç</h3> + +<p>El primer que has d'entendre és el concepte d'estats d'un enllaç; els enllaços poden tenir diversos estats, i se’ls pot aplicar estil fent servir diverses <a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS">pseudoclasses</a>:</p> + +<ul> + <li><strong>link</strong>: L'estat per defecte en què es troba un enllaç, quan no es troba en cap altre estat; s’hi pot aplicar estil específicament utilitzant la pseudoclasse {{cssxref(":link")}}.</li> + <li><strong>visited</strong>: Un enllaç quan ja ha estat visitat (apareix en l’historial del navegador); s’hi pot aplicar estil utilitzant la pseudoclasse {{cssxref(":visited")}}.</li> + <li><strong>hover</strong>: Un enllaç quan el punter del ratolí de l'usuari hi passa per damunt; s’hi pot aplicar estil utilitzant la pseudoclasse {{cssxref(":hover")}}.</li> + <li><strong>focus</strong>: Un enllaç quan té el focus (per exemple, perquè un usuari es desplaça per la pàgina web amb la tecla <kbd>Tab</kbd> del teclat, o una altra, o se li ha assignat el focus per programació amb {{domxref("HTMLElement.focus()")}}); s’hi pot aplicar estil utilitzant la pseudoclasse {{cssxref(":focus")}}.</li> + <li><strong>active</strong>: Un enllaç quan s'activa (per exemple, perquè hi has fet clic); s’hi pot aplicar estil utilitzant la pseudoclasse {{cssxref(":active")}}.</li> +</ul> + +<h3 id="Estils_predeterminats"><span id="result_box" lang="ca">Estils predeterminats</span></h3> + +<p>L’exemple següent il·lustra com es comporta un enllaç de manera predeterminada (el CSS simplement amplia i centra el text perquè destaqui més).</p> + +<pre class="brush: html notranslate"><p><a href="https://mozilla.org">A link to the Mozilla homepage</a></p> +</pre> + +<pre class="brush: css notranslate">p { + font-size: 2rem; + text-align: center; +}</pre> + +<p>{{ EmbedLiveSample('Estils_predeterminats', '100%', 120) }}</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> Tots els enllaços d'aquesta pàgina són falsos — s'ha posat un <code>#</code> en comptes d'un URL real. Això és perquè si incloïssim enllaços reals, fer-hi clic trencaria els exemples (acabaries amb un error, o una pàgina càrregada en l'exemple incrustat de la què no podries tornar.). <code>#</code> simplement enllaça a la pàgina actual.</p> +</div> + +<p>A mesura que exploris els estils predeterminats t’adonaràs d'algunes coses:</p> + +<ul> + <li>Els enllaços es subratllen.</li> + <li>Els enllaços no visitats són blaus.</li> + <li>Els enllaços visitats són violeta.</li> + <li>En passar per sobre d'un enllaç, el punter del ratolí canvia a una petita icona en forma de mà.</li> + <li>Els enllaços que tenen el focus tenen un contorn que els envolta: hauries de poder saltar pels enllaços d'aquesta pàgina amb el teclat, prement la tecla de tabulació (en Mac, és possible que hagis d'habilitar l’opció <em>Full Keyboard Access: All controls</em>, prement <kbd>Ctrl</kbd> + <kbd>F7</kbd> abans que això funcioni).</li> + <li>Els enllaços actius són de color vermell (deixa pres el botó del ratolí en fer clic en l’enllaç).</li> +</ul> + +<p>Curiosament, aquests estils predeterminats són gairebé idèntics que els dels primers dies dels navegadors a mitjan anys 90. Això és perquè els usuaris coneixen aquest comportament i l’esperen; si els enllaços estiguessin dissenyats de manera diferent, molta gent es confondria. Això no vol dir en absolut que no puguis aplicar estil als enllaços, només que no t’has d'allunyar del comportament que se n’espera. Com a mínim hauries de complir el següent:</p> + +<ul> + <li>Utilitzar el subratllat per als enllaços, però no per a altres coses. Si no vols subratllar els enllaços, almenys ressalta’ls d'alguna altra manera.</li> + <li>Fes que reaccionin d'alguna manera quan el punter del ratolí hi passa per sobre o quan adquireixen el focus, i d'una manera lleugerament diferent, quan s'activen.</li> +</ul> + +<p>Els estils predeterminats es poden desactivar/modificar amb les propietats CSS següents:</p> + +<ul> + <li>{{cssxref("color")}} per al color del text.</li> + <li>{{cssxref("cursor")}} per a l'estil del punter del ratolí; no l’hauries de desactivar, tret que hi hagi una raó molt bona.</li> + <li>{{cssxref("outline")}} per al contorn del text (un contorn és similar a una vora, l'única diferència és que la vora ocupa espai de la caixa, i un contorn no; és a la part superior del fons). El contorn és una ajuda d'accessibilitat útil, de manera que pensa-t’ho bé abans de desactivar aquesta propietat; com a mínim hauries de duplicar els estils per a l’estat de passar-hi el punter del ratolí per sobre l'estat amb el focus.</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: No està limitat només a les propietats anteriors per al disseny dels enllaços; pots utilitzar qualsevol propietat que vulguis. Només procura no esbojarrar-te!</p> +</div> + +<h3 id="Aplicar_estil_a_enllaços">Aplicar estil a enllaços</h3> + +<p>Ara que hem examinat amb una mica de detall els estats per defecte dels enllaços, vegem un conjunt típic d'estils d'enllaç.</p> + +<p>Per començar, escriurem un conjunt de regles buides:</p> + +<pre class="brush: css notranslate">a { + +} + + +a:link { + +} + +a:visited { + +} + +a:focus { + +} + +a:hover { + +} + +a:active { + +}</pre> + +<p>Aquest ordre és important perquè els estils d'enllaç es construeixen els uns sobre els altres, per exemple, els estils de la primera regla s'aplicaran a tots els subsegüents, i quan s'activa un enllaç, també s'hi passa per sobre. Si els posem en l'ordre equivocat, les coses no funcionaran correctament. Per recordar l'ordre, pots provar d'usar un mnemotècnic com <strong>L</strong>o<strong>V</strong>e <strong>F</strong>ears <strong>HA</strong>te.</p> + +<p>Ara afegim una mica més d'informació per a obtenir aplicar-hi els estils adequats:</p> + +<pre class="brush: css notranslate">body { + width: 300px; + margin: 0 auto; + font-size: 1.2rem; + font-family: sans-serif; +} + +p { + line-height: 1.4; +} + +a { + outline: none; + text-decoration: none; + padding: 2px 1px 0; +} + +a:link { + color: #265301; +} + +a:visited { + color: #437A16; +} + +a:focus { + border-bottom: 1px solid; + background: #BAE498; +} + +a:hover { + border-bottom: 1px solid; + background: #CDFEAA; +} + +a:active { + background: #265301; + color: #CDFEAA; +}</pre> + +<p><span id="result_box" lang="ca">També et proporcionem un exemple d'HTML al qual aplicar el CSS:</span></p> + +<pre class="brush: html notranslate"><p>There are several browsers available, such as <a href="https://www.mozilla.org/en-US/firefox/">Mozilla +Firefox</a>, <a href="https://www.google.com/chrome/index.html">Google Chrome</a>, and +<a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>.</p></pre> + +<p>Si ho posem tot junt, obtenim aquest resultat:</p> + +<p>{{ EmbedLiveSample('Aplicar_estil_a_enllaços', '100%', 150) }}</p> + +<p>Què hem fet aquí? Sens dubte, això es diferent de l'estil predeterminat, però encara proporciona una experiència prou familiar perquè els usuaris sàpiguen què passa:</p> + +<ul> + <li>Les dues primeres regles no proporcionen gaires elements de discussió.</li> + <li>La tercera regla utilitza el selector per a desfer-se del subratllat per defecte i el contorn de l’estat amb el focus (que varia d'un navegador a un altre), i afegeix una petita quantitat de farciment a cada enllaç; tot això ho acabarem d’aclarir més endavant.</li> + <li>A continuació, s'utilitzen els selectors <code>a:link</code> i <code>a:visited</code> per a establir un parell de variacions de color en els enllaços no visitats i visitats, de manera que siguin diferents.</li> + <li>Les dues regles següents utilitzen <code>a:focus</code> i <code>a:hover</code> per a establir que els estats d’enllaç amb el focus i enllaç activat pel desplaçament del punter del ratolí tinguin colors de fons diferents, i un subratllat perquè l'enllaç destaqui encara més. Dos punts que cal destacar són: + <ul> + <li>El subratllat s'ha creat amb {{cssxref("border-bottom")}}, no amb {{cssxref("text-decoration")}}; hi ha qui ho prefereix perquè la primera propietat té més opcions d'estil que la darrera, i el subratllat es dibuixa una mica més avall, de manera que no talla els traços descendents de la paraula que es subratlla (per exemple, les cues de la g i la j).</li> + <li>El valor {{cssxref("border-bottom")}} s'ha establert a <code>1px solid</code>, sense especificar-ne el color. D'aquesta manera, la vora adopta el mateix color que el text de l'element, i és útil en casos com aquest, en què el text té un color diferent en cada cas.</li> + </ul> + </li> + <li>Finalment, <code>a:active</code> s'utilitza per a donar als enllaços un esquema de color invertit quan s’activen, per deixar clar que passa alguna cosa important.</li> +</ul> + +<h3 id="Aprenentatge_actiu_Fes_el_teu_propi_disseny_d’enllaç">Aprenentatge actiu: Fes el teu propi disseny d’enllaç</h3> + +<p>En aquesta sessió d'aprenentatge actiu, et proposem que aprenguis el nostre conjunt de regles buides i hi afegeixis les teves declaracions pròpies perquè els teus enllaços llueixin fantàstics! Utilitza la imaginació, deixa't anar! Segur que pots trobar alguna cosa tan funcional com el nostre exemple, i més fresca!</p> + +<p>Si t’equivoques, sempre pots tornar a començar amb el botó <em>Reinicia</em>. Si t’encalles, prem el botó <em>Mostra la solució</em> per a inserir l'exemple mostrat a dalt.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> + <h2>HTML Input</h2> + <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><p>There are several browsers available, such as <a href="https://www.mozilla.org/en-US/firefox/">Mozilla + Firefox</a>, <a href="https://www.google.com/chrome/index.html">Google Chrome</a>, and +<a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>.</p></textarea> + + <h2>CSS Input</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">a { + +} + +a:link { + +} + +a:visited { + +} + +a:focus { + +} + +a:hover { + +} + +a:active { + +}</textarea> + + <h2>Output</h2> + <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div> + <div class="controls"> + <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"> + <input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;"> + </div> +</div> +</pre> + +<pre class="brush: js notranslate">var htmlInput = document.querySelector(".html-input"); +var cssInput = document.querySelector(".css-input"); +var reset = document.getElementById("reset"); +var htmlCode = htmlInput.value; +var cssCode = cssInput.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +var styleElem = document.createElement('style'); +var headElem = document.querySelector('head'); +headElem.appendChild(styleElem); + +function drawOutput() { + output.innerHTML = htmlInput.value; + styleElem.textContent = cssInput.value; +} + +reset.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = cssCode; + drawOutput(); +}); + +solution.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = 'p {\n font-size: 1.2rem;\n font-family: sans-serif;\n line-height: 1.4;\n}\n\na {\n outline: none;\n text-decoration: none;\n padding: 2px 1px 0;\n}\n\na:link {\n color: #265301;\n}\n\na:visited {\n color: #437A16;\n}\n\na:focus {\n border-bottom: 1px solid;\n background: #BAE498;\n}\n\na:hover {\n border-bottom: 1px solid;\n background: #CDFEAA;\n}\n\na:active {\n background: #265301;\n color: #CDFEAA;\n}'; + drawOutput(); +}); + +htmlInput.addEventListener("input", drawOutput); +cssInput.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p> + +<h2 id="Icones_en_els_enllaços">Icones en els enllaços</h2> + +<p>Una pràctica comuna és incloure icones en els enllaços per a proporcionar més d'un indicador quant al tipus de contingut al qual apunta l'enllaç. Vegem-ne un exemple molt senzill, que afegeix una icona als enllaços externs (enllaços que apunten cap a altres llocs web). Aquesta icona normalment té l’aspecte d’una petita fletxa que apunta cap enfora d'una caixa: per a aquest exemple, utilitzarem <a href="https://icons8.com/web-app/741/external-link">aquest fantàstic exemple de icons8.com</a>.</p> + +<p>Vegem alguns HTML i CSS, que ens donarà l'efecte que volem. En primer lloc, alguns simple HTML a l'estil:</p> + +<pre class="brush: html notranslate"><p>For more information on the weather, visit our <a href="weather.html">weather page</a>, +look at <a href="https://en.wikipedia.org/wiki/Weather">weather on Wikipedia</a>, or check +out <a href="http://www.extremescience.com/weather.htm">weather on Extreme Science</a>.</p></pre> + +<p><span class="short_text" id="result_box" lang="ca">A continuació, el CSS</span>:</p> + +<pre class="brush: css notranslate">body { + width: 300px; + margin: 0 auto; + font-family: sans-serif; +} + +p { + line-height: 1.4; +} + +a { + outline: none; + text-decoration: none; + padding: 2px 1px 0; +} + +a:link { + color: blue; +} + +a:visited { + color: purple; +} + +a:focus, a:hover { + border-bottom: 1px solid; +} + +a:active { + color: red; +} + +a[href*="http"] { + background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0; + background-size: 16px 16px; + padding-right: 19px; +}</pre> + +<p>{{ EmbedLiveSample('Icones_en_els_enllaços', '100%', 150) }}</p> + +<p>Què passa aquí, doncs? Ens saltarem la major part del CSS, perquè és la mateixa informació que ja has vist abans. Tanmateix, l'última regla és interessant perquè inserim una imatge de fons personalitzada en els enllaços externs d'una manera similar a com hem tractat les <a href="https://wiki.developer.mozilla.org/ca/docs/Learn/CSS/Estilitzar_text/Llistes_estil#%C3%9As_duna_imatge_de_vinyeta_personalitzada">vinyetes personalitzades dels elements de llista</a> de l'article anterior, però fem servir la propietat abreujada {{cssxref("background")}}, en comptes de les propietats individuals. Establim la ruta a la imatge que volem inserir i especifiquem <code>no-repeat</code> perquè només se’n vegi una còpia, i a continuació especifiquem la posició com al 100% a la dreta del contingut de text i a 0 píxels de l’extrem superior.</p> + +<p>També fem servir {{cssxref("background-size")}} per a especificar la mida amb què volem que es mostri la imatge de fons; és útil tenir una icona més gran i canviar-ne la mida per a propòsits de disseny de webs adaptatius. Tanmateix, això només funciona amb IE 9 i posteriors, de manera que si has de donar suport a aquests navegadors antics, només has de canviar la mida de la imatge i inserir-la tal qual.</p> + +<p>Finalment, establim una mica de {{cssxref("padding-right")}} als enllaços perquè la imatge de fons tingui espai i no es superposi amb el text.</p> + +<p>Per acabar, com etiquetem els enllaços externs? Bé, si escrius els teus <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Crear_hipervincles">enllaços HTML</a> correctament, només has d'utilitzar URL absoluts en el codi d’etiquetatge dels enllaços externs; per enllaçar a altres parts del teu lloc web propi és més eficient utilitzar enllaços relatius. Per tant, el text «http» només hauria d'aparèixer en enllaços externs i pots etiquetar-los amb un <a href="https://wiki.developer.mozilla.org/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS#Selectors_datribut">selector d'atributs</a>: <code>a[href*="http"]</code> selecciona elements {{htmlelement("a")}}, però només si tenen un atribut {{htmlattrxref("href","a")}} amb un valor que conté «http» en algun lloc.</p> + +<p>Això és tot — torna a visitar la secció d'aprenentatge actiu anterior i prova aquesta tècnica nova.</p> + +<div class="note"> +<p><strong>Nota</strong>: No et preocupis si encara no tens prou familiaritat amb els <a href="/ca/docs/Learn/CSS/Building_blocks">fons</a> i el <a href="/en-US/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks">disseny web adaptatiu</a> perquè s’expliquen en altres articles.</p> +</div> + +<h2 id="Enllaços_amb_estil_de_botó">Enllaços amb estil de botó</h2> + +<p>Les eines que has explorat fins ara en aquest article també es poden utilitzar d'altres maneres. Per exemple, els estats com el flotant (<em>hover</em>) es poden utilitzar per a dissenyar molts elements diferents, no només enllaços; pot ser que vulguis dissenyar estats flotants (<em>hover</em>) per a paràgrafs, elements de llista o altres elements.</p> + +<p>A més, és habitual aplicar estil als enllaços perquè semblin i es comportin com botons en determinades circumstàncies — el menú de navegació d’un lloc web s’acostuma a marcar com una llista que conté enllaços, i es pot configurar fàcilment perquè sembli un conjunt de botons o pestanyes de control que proporcionen a l'usuari accés a les altres parts del lloc web. Expliquem com es fa.</p> + +<p>Primer, una mica d’HTML:</p> + +<pre class="brush: html notranslate"><ul> + <li><a href="#">Home</a></li><li><a href="#">Pizza</a></li><li><a href="#">Music</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland</a></li> +</ul></pre> + +<p>I ara, el nostre CSS:</p> + +<pre class="brush: css notranslate">body,html { + margin: 0; + font-family: sans-serif; +} + +ul { + padding: 0; + width: 100%; +} + +li { + display: inline; +} + +a { + outline: none; + text-decoration: none; + display: inline-block; + width: 19.5%; + margin-right: 0.625%; + text-align: center; + line-height: 3; + color: black; +} + +li:last-child a { + margin-right: 0; +} + +a:link, a:visited, a:focus { + background: yellow; +} + +a:hover { + background: orange; +} + +a:active { + background: red; + color: white; +}</pre> + +<p><span id="result_box" lang="ca">Això ens dona el resultat següent:</span></p> + +<p>{{ EmbedLiveSample('Enllaços_amb_estil_de_botó', '100%', 100) }}</p> + +<p>Expliquem què passa aquí, i ens centrem en les parts més interessants:</p> + +<ul> + <li>La segona regla elimina el {{cssxref("padding")}} per defecte de l'element {{htmlelement ("ul")}} i n’estableix una amplada que abasta el 100% del contenidor exterior (l’element {{htmlelement("body")}}, en aquest cas).</li> + <li>Els elements {{htmlelement("li")}} normalment són elements de bloc per defecte (vegeu els <a href="/ca/docs/Learn/CSS/Building_blocks/The_box_model">tipus de caixes CSS</a> per refrescar la memòria), que significa que cadascun ocuparà la seva línia pròpia. En aquest cas, creem una llista d'enllaços horitzontal, i en la tercera regla establim la propietat {{cssxref("display")}} en el valor <code>inline</code>, que fa aparèixer tots els elements de la llista en la mateixa línia. Ara es comporten com elements de línia.</li> + <li>La quarta regla, que dissenya l'element {{htmlelement("a")}}, és la més complicada aquí. Anem pas a pas: + <ul> + <li>Com en els exemples anteriors, comencem per desactivar el valor per defecte de {{cssxref("text-decoration")}} i {{cssxref("outline")}}; no volem que espatllin la nostra aparença.</li> + <li>A continuació, establim la propietat {{cssxref("display")}} a <code>inline-block</code>; els elements {{htmlelement ("a")}} estan en línia per defecte, i si bé no volem que desbordin de la seva línia com passaria amb un valor <code>block</code>, volem ser capaços de dimensionar-los. La propietat <code>inline-block</code> ens permet fer-ho.</li> + <li>Ara, passem a la mida! Volem omplir tot l'ample de {{htmlelement ("ul")}} i deixarem un petit marge entre cada botó (però no hi ha un buit a la vora dreta), i hi han de cabre 5 botons que han de ser de la mateixa mida. Per a això, establim l’amplada {{cssxref("width")}} al 19,5%, i el {{cssxref("margin-right")}} al 0,625%. Observa que tot aquest ample suma 100,625%, que fa desbordar l'últim botó <code><ul></code>, que cau a la línia següent. Tanmateix, recuperem el 100% amb la regla següent, que selecciona només l'última <code><a></code> de la llista i n’elimina el marge. Fet!</li> + <li>Les tres últimes declaracions són força senzilles i acostumen a tenir finalitats cosmètiques. Centrem el text dins de cada enllaç, establim {{cssxref("line-height")}} a 3 per a donar una mica d'alçada als botons (que també té l'avantatge de centrar el text verticalment), i establim el color del text en negre.</li> + </ul> + </li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: És possible que hagis observat que en l’HTML hem col·locat tots els elements de llista en la mateixa línia; fem això perquè els espais / les línies entre els elements de línia de bloc creen espais a la pàgina, com els espais que hi ha entre les paraules, i aquests espais trencarien el disseny de menú de navegació horitzontal. De manera que hem eliminat els espais. Pots trobar més informació sobre aquest problema (i les solucions) a <a href="https://css-tricks.com/fighting-the-space-between-inline-block-elements/">Fighting the space between inline block elements</a>.</p> +</div> + +<h2 id="Resum">Resum</h2> + +<p>Esperem que aquest article t’hagi proporcionat tot el que has de saber sobre els enllaços, per ara. L'article final del nostre mòdul de text «Aplicació d’estils» explica com pots utilitzar tipus de lletra personalitzats en els teus llocs web o tipus de lletra per a web, com es coneixen més sovint.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</p> diff --git a/files/ca/learn/css/estilitzar_text/fonts_web/index.html b/files/ca/learn/css/estilitzar_text/fonts_web/index.html new file mode 100644 index 0000000000..b4d1e8ecfd --- /dev/null +++ b/files/ca/learn/css/estilitzar_text/fonts_web/index.html @@ -0,0 +1,193 @@ +--- +title: Fonts Web +slug: Learn/CSS/Estilitzar_text/Fonts_Web +tags: + - '@font-face' + - Article + - Beginner + - CSS + - Fonts + - Guide + - Learn + - font-family + - web fonts +translation_of: Learn/CSS/Styling_text/Web_fonts +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}</div> + +<p class="summary">En el primer article del mòdul hem explorat les característiques bàsiques de CSS que hi ha disponibles per a aplicar estil a la lletra i el text. En aquest article anem més lluny i explorem els tipus de lletra per a web amb detall, que permeten descarregar tipus de lletra personalitzats junt amb la teva pàgina web i et proporciona més varietat i personalització en l’aplicació d’estil als textos.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td>Coneixements bàsics d'informàtica, fonaments d'HTML (consulta la <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l’HTML</a>), fonaments de CSS (consulta la <a href="/ca/docs/Learn/CSS/First_steps">Introducció al CSS</a>), <a href="/ca/docs/Learn/CSS/Estilitzar_text/Text_fonamental">fonaments d’aplicació d’estil a tipus de lletra i textos</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Aprendre com aplicar tipus de lletra per a web a una pàgina web utilitzant un servei de tercers o escrivint el teu codi propi.</td> + </tr> + </tbody> +</table> + +<h2 id="Recapitulació_sobre_famílies_de_tipus_de_lletra">Recapitulació sobre famílies de tipus de lletra</h2> + +<p>Com hem vist en l’article <a href="/ca/docs/Learn/CSS/Estilitzar_text/Text_fonamental">Fonaments d’aplicació d’estil a la lletra i els textos</a>, pots controlar les fonts que fas servir per al teu HTML amb la propietat {{cssxref("font-family")}}. Aquesta propietat pren un o més noms de famílies de tipus de lletra i el navegador recorre la llista fins que troba un tipus de lletra que estigui disponible en el sistema en què s'executa:</p> + +<pre class="brush: css notranslate">p { + font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif; +}</pre> + +<p>Aquest sistema funciona bé, però tradicionalment les opcions de tipus de lletra per al desenvolupament web han estat limitades. Només hi ha un grapat de tipus de lletra per a les que pots garantir la disponibilitat en tots els sistemes habituals, els anomenats <a href="/ca/docs/Learn/CSS/Estilitzar_text/Text_fonamental#Fam%C3%ADlies_de_tipus_de_lletra">tipus de lletra segurs per al web (<em>web-safe fonts</em>)</a>. Pots especificar la llista dels tipus de lletra preferents, seguits dels tipus de lletra alternatius segurs per al web, seguits dels tipus de lletra del sistema per defecte, però això afegeix una sobrecàrrega en termes de proves per a assegurar-te que els teus dissenys de pàgina presenten un aspecte correcte amb cada tipus de lletra, etc.</p> + +<h2 id="Tipografies_web"><span id="result_box" lang="ca">Tipografies web</span></h2> + +<p>Però hi ha una alternativa, que funciona molt bé, ja des de la versió 6 d'IE. Les tipografies web són una característica CSS que et permet especificar els fitxers de tipus de lletra que vols que es descarreguin juntament amb el teu lloc web quan s’hi accedeix, i això fa que qualsevol navegador que admet tipografies web pot disposar exactament dels tipus de lletra que especifiques. Increïble! La sintaxi necessària presenta aquest aspecte:</p> + +<p>En primer lloc, hi ha un bloc de codi {{cssxref("@font-face")}} al començament del CSS, que especifica els fitxers de tipus de lletra que vols que es descarreguin:</p> + +<pre class="brush: css notranslate">@font-face { + font-family: "myFont"; + src: url("myFont.ttf"); +}</pre> + +<p>A continuació pots aplicar el nom de la família del tipus de lletra personalitzada que has especificat en @font-face a qualsevol cosa que vulguis, de la manera habitual:</p> + +<pre class="brush: css notranslate">html { + font-family: "Bitstream Vera Serif Bold", serif; +}</pre> + +<p>La sintaxi es comença a complicar una mica. A continuació hi entrem amb detall.</p> + +<p>Hi ha dues coses importants que cal tenir en compte sobre els tipus de lletra segurs per al web:</p> + +<ol> + <li>Els navegadors admeten diversos formats de tipus de lletra, de manera que necessites diversos formats de tipus de lletra per a atènyer una compatibilitat de navegador decent. Per exemple, la majoria dels navegadors més moderns admeten WOFF / WOFF2 (Web Open Font Format, versions 1 i 2), el format més eficient per a tot, però les versions anteriors d'IE només admeten tipus de lletra EOT (Embedded Open Type), i és possible que hagis d'incloure una versió de tipus de lletra SVG per tenir compatibilitat amb versions anteriors dels navegadors iPhone i Android. A continuació et mostrarem com generar el codi necessari.</li> + <li>Normalment els tipus de lletra no són d’ús lliure. Cal pagar per a fer-los servir o assumir unes condicions de llicència, com ara acreditar el creador del tipus de lletra en el codi (o en el teu lloc web). No hauries de robar els tipus de lletra ni utilitzar-los sense donar-ne el crèdit adequat.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: Els tipus de lletra web com a tecnologia són compatibles amb Internet Explorer des de la versió 4!</p> +</div> + +<h2 id="Aprenentatge_actiu_Un_exemple_de_tipografia_web">Aprenentatge actiu: Un exemple de tipografia web</h2> + +<p>Tenint en compte això, construïm un exemple bàsic de tipografia web des de zero. És difícil mostrar-ho a partir d’un exemple en viu, de manera que, en lloc d'això, seguirem els passos detallats en les seccions següents, per a tenir una idea del procés.</p> + +<p>Has d'utilitzar els fitxers <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.html">web-font-start.html</a> i <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.css">web-font-start.css</a> com a punt de partida per a afegir el codi (consulta també el codi de l’<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-start.html">exemple en viu</a>). Fes també una còpia d'aquests fitxers en un directori nou al teu ordinador. En el fitxer <code>web-font-start.css</code> hi ha una mica de CSS per tractar el disseny bàsic i la tipografia de l'exemple.</p> + +<h3 id="Buscar_tipus_de_lletra">Buscar tipus de lletra</h3> + +<p>Per a aquest exemple, utilitzarem dos tipografies web, un per als títols d’encapçalament i un per al text del cos (<code>body</code>). Per començar, hem de trobar els fitxers que contenen els tipus de lletra. Els tipus de lletra es creen en estudis de disseny i s'emmagatzemen en diferents formats de fitxer. En general, hi ha tres tipus de llocs web en què pots obtenir tipus de lletra:</p> + +<ul> + <li>Distribuïdors de tipus de lletra gratuït: són llocs web que posen a disposició per a descarregar tipus de lletra gratuïtament (encara que hi pot haver certes condicions de llicència, com ara acreditar el creador del tipus de lletra). Alguns exemples són: <a href="https://www.fontsquirrel.com/">Font Squirrel</a>, <a href="http://www.dafont.com/">dafont</a> i <a href="https://everythingfonts.com/">Everything Fonts</a>.</li> + <li>Distribuïdors de tipus de lletra de pagament: llocs web que posen a disposició tipus de lletra per una quantitat de diners, com <a href="http://www.fonts.com/">fonts.com</a> o <a href="http://www.myfonts.com/">myfonts.com</a>. També pots comprar tipus de lletra directament a creadors de tipus de lletres, per exemple <a href="https://www.linotype.com/">Linotype</a>, <a href="http://www.monotype.com">Monotype</a> o <a href="http://www.exljbris.com/">Exljbris</a>.</li> + <li>Serveis de tipus de lletra en línia: llocs web que emmagatzemen i serveixen tipus de lletra, i que simplifiquen el procés sencer. Consulta’n els detalls en la secció {{anch("Usar un servei de tipografies en línia")}}.</li> +</ul> + +<p>Busquem ara alguns tipus de lletra! Ves a <a href="https://www.fontsquirrel.com/">Font Squirrel</a> i tria dos tipus de lletra, un que et resulti interessant i agradable per als títols (ppotser una bona tipografia tipus "Display" o "Slab Serif"), i un altre una mica menys cridaner i que resulti més llegible, per als paràgrafs. Quan hagis trobat cada tipus, prem el botó de descàrrega i desa el fitxer en el mateix directori que hi ha els fitxers HTML i CSS que has desat abans. No importa si són en format TTF (True Type Fonts) o OTF (Open Type Fonts).</p> + +<p>En cada cas, descomprimeix el paquet amb els tipus de lletra (les tipografies web s’acostumen a distribuir en fitxers ZIP que contenen els fitxers dels tipus de lletra i la informació de la llicència). Pots trobar diversos fitxers de tipus de lletra en el paquet —alguns tipus de lletra es distribueixen com una família, amb diverses variants disponibles, per exemple, fina, seminegreta, negreta, cursiva, cursiva fina, etc. Per a aquest exemple, només cal que et preocupis d'un únic fitxer de tipus de lletra per cada elecció.</p> + +<div class="note"> +<p><strong>Nota</strong>: en la columna de la dreta de la secció «Busca tipus de lletra», pots fer clic en les diverses etiquetes, i classificacions per filtrar les opcions que es mostren.</p> +</div> + +<h3 id="Generació_del_codi_necessari">Generació del codi necessari</h3> + +<p>Ara cal generar el codi necessari (i els formats de tipus de lletra). Per cada tipografia, segueix aquests passos:</p> + +<ol> + <li>Assegura’t que compleixes tots els requisits de llicència si vols fer servir això en un projecte comercial o en el web.</li> + <li>Ves al <a href="https://www.fontsquirrel.com/tools/webfont-generator">Webfont Generator</a> de Font Squirrel.</li> + <li>Carrega els dos fitxers de tipus de lletra amb el botó <em>Upload Fonts</em>.</li> + <li>Marca la casella de verificació amb el text «Sí, els tipus de lletra que carrego són legalment aptes per a la inclusió en el web».</li> + <li>Fes clic a <em>Download your kit</em>.</li> +</ol> + +<p>Un cop el generador ha acabat de processar, has d'obtenir un fitxer ZIP, descarregar-lo i desar-lo al mateix directori que els teus HTML i CSS.</p> + +<h3 id="Implementar_el_codi_a_la_teva_demo">Implementar el codi a la teva demo</h3> + +<p>En aquest punt, has de descomprimir el paquet de fitxers de tipus de lletra segurs per al web que acabes de generar. Dins del directori descomprimit, hi haurà tres elements útils:</p> + +<ul> + <li>Diverses versions de cada tipus de lletra: <code>.eot</code>, <code>.svg</code>, <code>.ttf</code>, <code>.woff</code>, <code>.woff2</code>. Com ja s’ha dit, calen diversos tipus de fitxers de tipus de lletra per a tenir compatibilitat amb els navegadors; aquesta és la manera que té Font Squirrel d’assegurar-se que tens tot el que necessites.</li> + <li>Un fitxer HTML de demostració per a cada font; carrega’l en el teu navegador i observa com es veu el tipus de lletra en diferents contextos d'ús.</li> + <li>Un fitxer <code>stylesheet.css</code> que conté el codi @font-face generat que necessites.</li> +</ul> + +<p>Per a implementar aquests tipus de lletra en el teu exemple de demostració, segueix aquests passos:</p> + +<ol> + <li>Canvia el nom del directori descomprimit per un nom que sigui senzill i fàcil de recordar, com ara <code>fonts</code>.</li> + <li>Obre el fitxer <code>stylesheet.css</code> i copia-hi els blocs <code>@font-face</code> que conté en el teu fitxer <code>web-font-start.css</code>; has de posar-los a dalt de tot, abans de qualsevol bloc de CSS, perquè els tipus de lletra s’han d’importar abans de poder-los utilitzar en el teu lloc web.</li> + <li>Cadascuna de les funcions <code>url()</code> apunta a un fitxer de tipus de lletra que volem importar al nostre CSS; afegeix <code>fonts/</code> al començament de cada ruta (o adapta-ho si cal) per a assegurar-te que les rutes d'accés als fitxers són correctes.</li> + <li>Ara pots utilitzar aquests tipus de lletra en les llistes d’arxius de tipus de lletra, igual que qualsevol tipus de lletra segur per al web o tipus de lletra predeterminat del sistema. Per exemple: + <pre class="brush: css notranslate">font-family: 'zantrokeregular', serif;</pre> + </li> +</ol> + +<p>Has d'acabar amb una pàgina de demostració amb alguns tipus de lletra agradables implementats. Atès que els diferents tipus de lletra es creen amb mides diferents, és possible que hagis d'ajustar la mida, l'espaiat, etc., per a ordenar-ne l'aspecte.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12984/web-font-example.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<div class="note"> +<p><strong>Nota</strong>: Si tens problemes perquè funcioni, no dubtis de comparar la teva versió amb els nostres fitxers acabats; consulta <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.html">web-font-finished.html</a> i <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.css">web-font-finished.css</a> (<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-finished.html">executa l'exemple acabat en directe</a>).</p> +</div> + +<h2 id="Usar_un_servei_de_tipografies_en_línia">Usar un servei de tipografies en línia</h2> + +<p>Els serveis de tipus de lletra en línia normalment emmagatzemen i serveixen tipus de lletra per tu, de manera que no t’has de preocupar d’escriure el codi <code>@font-face</code>, i generalment només cal que insereixis una o dues línies de codi al teu lloc web perquè tot funcioni. Alguns exemples són: <a href="https://typekit.com/">Typekit</a> i <a href="http://www.typography.com/cloud/welcome/">Cloud.typography</a>. La majoria d'aquests serveis estan basats en subscripcions, amb la notable excepció de <a href="https://www.google.com/fonts">Google Fonts</a>, un útil servei gratuït, especialment per a fer proves ràpides i demostracions d'escriptura.</p> + +<p>La majoria d'aquests serveis són fàcils d'utilitzar, de manera que no hi entrarem amb molt de detall. Vegem ràpidament les fonts de Google, perquè puguis fer-te’n la idea. De nou, fes còpies de <code>web-font-start.html</code> i <code>web-font-start.css</code> com a punt de partida.</p> + +<ol> + <li>Ves a <a href="https://www.google.com/fonts">Google Fonts</a>.</li> + <li>Utilitza els filtres de la banda esquerra per visualitzar els tipus de lletra que vols triar i escull un parell de tipus de lletra.</li> + <li>Per a seleccionar un tipus de lletra, prem el botó <em>Add to Collection</em> que hi ha al costat.</li> + <li>Quan hagis escollit els tipus de lletra, prem el botó <em>Use</em> que hi ha a la part inferior de la pàgina.</li> + <li>A la pantalla resultant, primer has de copiar la línia de codi que es mostra a la secció 3 i enganxar-la al final de tot del teu fitxer HTML. Posa-la per sobre de l'element {{htmlelement("link")}} perquè el tipus de lletra s'importi abans que el teu CSS l’hagi d’utilitzar.</li> + <li>A continuació, has de copiar les declaracions que hi ha en la secció 4 al teu CSS, segons correspongui, per a aplicar els tipus de lletra personalitzats al teu codi HTML.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: Pots trobar una versió completa a <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.html">google-font.html</a> i <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.css">google-font.css</a>, si et cal contrastar el teu treball amb el nostre (<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/google-font.html">consulta-ho en directe</a>).</p> +</div> + +<h2 id="font-face_amb_més_detall">@font-face amb més detall</h2> + +<p>Explorem la sintaxi <code>@font-face</code> que genera Font Squirrel. Aquest és l’aspecte que presenta un dels blocs:</p> + +<pre class="brush: css notranslate">@font-face { + font-family: 'ciclefina'; + src: url('fonts/cicle_fina-webfont.eot'); + src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'), + url('fonts/cicle_fina-webfont.woff2') format('woff2'), + url('fonts/cicle_fina-webfont.woff') format('woff'), + url('fonts/cicle_fina-webfont.ttf') format('truetype'), + url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg'); + font-weight: normal; + font-style: normal; +}</pre> + +<p>Això s'anomena «sintaxi a prova de bales @font-face» des d'una publicació de Paul Irish dels inicis, quan <code>@font-face</code> va començar a ser popular (<a href="http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/">Bulletproof @font-face Syntax</a>). Passem a veure què fa:</p> + +<ul> + <li><code>font-family</code>: Aquesta línia especifica el nom amb què et faràs referència al fitxer de tipus de lletra que empraràs. Pots posar-hi qualsevol cosa que t’agradi, sempre que l'utilitzis de manera coherent en tot el teu codi CSS.</li> + <li><code>src</code>: Aquestes línies especifiquen les rutes d'accés als fitxers de tipus de lletra que cal que importis al teu CSS (la part d'URL) i el format de cada fitxer de tipus de lletra (la part <code>format</code>). L'última part en cada cas és opcional, però és útil declarar-la perquè permet als navegadors trobar més ràpidament el tipus de lletra que poden utilitzar. Es poden incloure diverses declaracions, separades per comes; el navegador buscarà entre elles i usarà la primera que trobi que entén; per tant, és millor posar abans formats nous i millors, com WOFF2, i formats més antics i no tan bons, com TTF, després. L'única excepció d’això són les fonts EOT, que es col·loquen en primer lloc per corregir un parell d'errors en les versions anteriors d'IE, que intentarà utilitzar la primera que trobi, fins i tot si no pot utilitzar el tipus de lletra.</li> + <li>{{cssxref("font-weight")}}/{{cssxref("font-style")}}: Aquestes línies especifiquen el gruix del tipus de lletra i si és cursiva o no. Si importes diversos gruixos del mateix tipus de lletra, en pots especificar gruix/estil i, a continuació, utilitzar valors diferents de {{cssxref("font-weight")}}/{{cssxref("font-style")}} per a triar entre ells, en lloc d'haver de cridar tots els membres diferents de la família de tipus de lletra pels diferents noms. <a href="http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/">@font-face tip: define font-weight and font-style to keep your CSS simple</a>, de Roger Johansson, mostra amb més detall què cal fer.</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: També pots especificar cada valor {{cssxref("font-variant")}} i {{cssxref("font-stretch")}} per als teus tipus de lletra segurs per al web. En els navegadors més nous també pots especificar un valor {{cssxref("unicode-range")}}, que és una gamma de caràcters específica que vols utilitzar a banda del tipus de lletra segur per al web; en els navegadors compatibles amb aquesta propietat, només es descarregaran els caràcters especificats, per a estalviar descàrregues innecessàries. <a href="https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/">Creating Custom Font Stacks with Unicode-Range</a>, de Drew McLellan, t’ofereix unes idees útils sobre com fer-ne ús.</p> +</div> + +<h2 id="Resum">Resum</h2> + +<p>Ara que has treballat els nostres articles sobre els fonaments d’aplicació d'estil al text, és hora de posar a prova el que has après amb la nostra avaluació per al mòdul, Composició tipogràfica d’una pàgina d’inici per a un lloc web d’una escola de la comunitat.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}</p> diff --git a/files/ca/learn/css/estilitzar_text/index.html b/files/ca/learn/css/estilitzar_text/index.html new file mode 100644 index 0000000000..c815d83297 --- /dev/null +++ b/files/ca/learn/css/estilitzar_text/index.html @@ -0,0 +1,55 @@ +--- +title: Estilitzar text +slug: Learn/CSS/Estilitzar_text +tags: + - Beginner + - CSS + - CodingScripting + - Fonts + - Landing + - Links + - Module + - Text + - font + - letter + - line + - lists + - shadow + - web fonts +translation_of: Learn/CSS/Styling_text +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Amb els aspectes bàsics del llenguatge CSS coberts, el següent tema CSS, per a què us concentreu, és l'estil del text - una de les coses més habituals que fareu amb CSS. Aquí observem els fonaments d'estil de text, incloent la configuració de fonts, negreta, cursiva, espaiat entre línies i lletres, ombres i altres funcions de text. Completem el mòdul examinant l'aplicació de fonts personalitzades a la vostra pàgina i llistes d'estil i enllaços.</p> + +<h2 id="Requisits_previs">Requisits previs</h2> + +<p>Abans de començar aquest mòdul, ja hauríeu de tenir una familiaritat bàsica amb l'HTML, tal com s'ha explicat en el mòdul <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introducció a HTML</a> i estar còmodes amb els fonaments CSS, tal com s'ha explicat en <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introducció a CSS</a>.</p> + +<div class="note"> +<p><strong>Nota</strong>: Si esteu treballant en un ordinador/tauleta/altre dispositiu on no té la capacitat de crear els vostres propis fitxers, podeu provar (la majoria) els exemples de codi en un programa de codificació en línia com <a href="http://jsbin.com/">JSBin</a> o <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Guies"><span id="result_box" lang="ca"><span>Guies</span></span></h2> + +<p>Aquest mòdul conté els següents articles, que us ensenyaran tot l'essencial de l'estil del contingut de text HTML.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Text fonamental i estil de font</a></dt> + <dd>En aquest article, es detallen tots els conceptes bàsics d'estil de text/font, incloent la configuració del pes de la font, família i estil, abreviatura de font, alineació del text i altres efectes, i espaiat entre línies i lletres.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Estilitzar llistes</a></dt> + <dd>Les llistes es comporten com qualsevol altre text en la seva major part, però hi ha algunes propietats CSS específiques de les llistes que necessiteu saber i algunes de les millors pràctiques a tenir en compte. Aquest article ho explica tot.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Estilitzar enllaços</a></dt> + <dd>En dissenyar enllaços, és important entendre com fer ús de pseudo-classes per crear estils de vincles de manera efectiva i com dissenyar vincles per utilitzar-los en característiques d'interfície variades comunes, com a menús de navegació i pestanyes. Veurem tots aquests temes en aquest article.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Fonts Web</a></dt> + <dd>Aquí explorarem detalladament els tipus de fonts web, que us permeten descarregar fonts personalitzades juntament amb la vostra pàgina web, per permetre un estil de text més variat i personalitzat.</dd> +</dl> + +<h2 id="Avaluacions">Avaluacions</h2> + +<p>Les següents avaluacions posaran a prova la vostra comprensió de les tècniques d'estil de text cobertes en les guies anteriors.</p> + +<dl> + <dt><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Composició d'una pàgina web d'una escola comunitaria</a></dt> + <dd>En aquesta avaluació, provarem la vostra comprensió sobre l'estil de text, que us permetrà personalitzar el text de la pàgina d'inici d'una escola comunitària.</dd> +</dl> diff --git a/files/ca/learn/css/estilitzar_text/llistes_estil/index.html b/files/ca/learn/css/estilitzar_text/llistes_estil/index.html new file mode 100644 index 0000000000..6caa6e0e24 --- /dev/null +++ b/files/ca/learn/css/estilitzar_text/llistes_estil/index.html @@ -0,0 +1,382 @@ +--- +title: Estils de llistes +slug: Learn/CSS/Estilitzar_text/Llistes_estil +tags: + - Article + - Beginner + - CSS + - Guide + - Styling + - Text + - bullets + - lists +translation_of: Learn/CSS/Styling_text/Styling_lists +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</div> + +<p class="summary">Les <a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">llistes</a> <span id="result_box" lang="ca">es comporten com qualsevol altre text en la seva major part, però hi ha algunes propietats CSS específiques de les llistes que has de conèixer i algunes bones pràctiques que has de tenir en compte. Aquest article ho explica tot.</span></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td>Coneixements bàsics d'informàtica, els fonaments d'HTML (estudi <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a HTML</a> ), fonaments CSS (estudi <a href="/ca/docs/Learn/CSS/First_steps">Introducció a CSS</a>), <a href="/ca/docs/Learn/CSS/Estilitzar_text/Text_fonamental">fonaments d’aplicació d’estil i tipus de lletra a textos amb CSS</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td><span id="result_box" lang="ca">Familiaritzar-se amb les bones pràctiques i propietats relacionades amb l’aplicació d'estil a les llistes</span> .</td> + </tr> + </tbody> +</table> + +<h2 id="Un_exemple_senzill_de_llista">Un exemple senzill de llista</h2> + +<p>Per començar, observa un exemple senzill de llista. Al llarg d'aquest article, veurem llistes no ordenades, ordenades i de descripció: totes tenen característiques d'estil similars, i algunes que són particulars per al tipus de llista concret. Tens l'exemple sense estil <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html">disponible a GitHub</a> (consulta també el <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html">codi d’origen</a>).</p> + +<p>El codi HTML del nostre exemple de llista té aquest aspecte:</p> + +<pre class="brush: html notranslate"><h2>Shopping (unordered) list</h2> + +<p>Paragraph for reference, paragraph for reference, paragraph for reference, +paragraph for reference, paragraph for reference, paragraph for reference.</p> + +<ul> + <li>Humous</li> + <li>Pitta</li> + <li>Green salad</li> + <li>Halloumi</li> +</ul> + +<h2>Recipe (ordered) list</h2> + +<p>Paragraph for reference, paragraph for reference, paragraph for reference, +paragraph for reference, paragraph for reference, paragraph for reference.</p> + +<ol> + <li>Toast pitta, leave to cool, then slice down the edge.</li> + <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> + <li>Wash and chop the salad.</li> + <li>Fill pitta with salad, humous, and fried halloumi.</li> +</ol> + +<h2>Ingredient description list</h2> + +<p>Paragraph for reference, paragraph for reference, paragraph for reference, +paragraph for reference, paragraph for reference, paragraph for reference.</p> + +<dl> + <dt>Humous</dt> + <dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd> + <dt>Pitta</dt> + <dd>A soft, slightly leavened flatbread.</dd> + <dt>Halloumi</dt> + <dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd> + <dt>Green salad</dt> + <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd> +</dl></pre> + +<p>Si ara vas a l'exemple en directe i investigues els elements de la llista amb les <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">eines de desenvolupador del navegador</a>, t’adonaràs que hi ha un parell d'estils per defecte:</p> + +<ul> + <li>Els elements {{htmlelement("ul")}} i {{htmlelement("ol")}} tenen un {{cssxref("margin")}} superior i inferior de <code>16px</code> (<code>1em</code>) i un {{cssxref("padding-left")}} de <code>40px</code> (<code>2.5em</code>).</li> + <li>Els elements de llista (elements {{htmlelement("li")}}) no tenen valors predeterminats establerts per a l’espaiat.</li> + <li>L'element {{htmlelement("dl")}} té un {{cssxref("margin")}} superior i inferior de <code>16px</code> (<code>1em</code>), però no hi ha cap farciment (<em>padding</em>) establert.</li> + <li>Els elements {{htmlelement("dd")}} tenen un {{cssxref("margin-left")}} de <code>40px</code> (<code>2.5em</code>).</li> + <li>Els elements {{htmlelement("p")}} que hem inclòs com a referència tenen un {{cssxref("margin")}} de <code>16px</code> (<code>1em</code>), el mateix que els diferents tipus de llista.</li> +</ul> + +<h2 id="Tractament_dels_espais_en_llistes">Tractament dels espais en llistes</h2> + +<p>Quan fas llistes d'estil, has d'ajustar-ne els estils perquè mantinguin el mateix espai vertical que els elements que l'envolten (com ara paràgrafs i imatges, que de vegades s’anomena <em>ritme vertical</em>), i el mateix espaiat horitzontal que la resta (observa l'<a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/">exemple d'estil acabat</a> a GitHub, i també el <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html">codi d’origen</a> que hi trobaràs).</p> + +<p>El CSS que s’utilitza per a aplicar l'estil al text i l'espaiat és el següent:</p> + +<pre class="brush: css notranslate">/* General styles */ + +html { + font-family: Helvetica, Arial, sans-serif; + font-size: 10px; +} + +h2 { + font-size: 2rem; +} + +ul,ol,dl,p { + font-size: 1.5rem; +} + +li, p { + line-height: 1.5; +} + +/* Description list styles */ + + +dd, dt { + line-height: 1.5; +} + +dt { + font-weight: bold; +} + +dd { + margin-bottom: 1.5rem; +}</pre> + +<ul> + <li>La primera regla estableix un tipus de lletra per a tot el lloc web i una mida de lletra de referència de 10 px, que hereta tota la pàgina web.</li> + <li>Les regles 2 i 3 estableixen mides de lletra relatives per als títols d’encapçalament, els diferents tipus de llista (els fills dels elements de la llista els hereten) i els paràgrafs. Això significa que cada paràgraf i cada llista tindrà la mateixa mida de lletra i el mateix espaiat superior i inferior, que ajuden a mantenir un ritme vertical constant.</li> + <li>La regla 4 estableix la mateixa {{cssxref("line-height")}} en els paràgrafs i els elements de llista, de manera que els paràgrafs i cada element de llista tindran el mateix espaiat entre línies. Això també ajuda a mantenir el ritme vertical consistent.</li> + <li>Les regles 5-7 es refereixen a la llista de descripció: establim la mateixa <code>line-height</code> per als termes i les descripcions de terme de la llista de descripció que els que hem establert per als paràgrafs i els elements de llista, i un {{cssxref("margin-bottom")}} de <code>1.5rem</code>, el mateix que hi ha per als paràgrafs (<code>p</code>) i els elements de la llista (<code>li</code>). Una vegada més, la coherència és bona. També establim els termes de descripció en negreta, de manera que destaquin més visualment.</li> +</ul> + +<h2 id="Estils_específics_de_llista"><span id="result_box" lang="ca">Estils específics de llista</span></h2> + +<p>Hem examinat l'espaiat general de les llistes, ara explorarem algunes propietats específiques de la llista. Per començar, hi ha tres propietats que has de conèixer, que es poden establir en els elements {{htmlelement("ul")}} o {{htmlelement("ol")}}:</p> + +<ul> + <li>{{cssxref("list-style-type")}}: Estableix el tipus de vinyeta que s'utilitza per a la llista, per exemple vinyetes quadrades o circulars per a una llista no ordenada, números, lletres o números romans per a una llista ordenada.</li> + <li>{{cssxref("list-style-position")}}: Estableix si les vinyetes apareixen dins dels elements de la llista, o a fora, abans de l'inici de cada element.</li> + <li>{{cssxref("list-style-image")}}: Permet utilitzar una imatge personalitzada per a la vinyeta, en comptes d'un quadrat o cercle.</li> +</ul> + +<h3 id="Estils_de_vinyeta">Estils de vinyeta</h3> + +<p>Com s'ha comentat, la propietat {{cssxref("list-style-type")}} permet establir quin tipus de vinyeta s'usa per als punts de vinyeta. En el nostre exemple, hem establert que la llista ordenada utilitzi números romans en majúscules, amb:</p> + +<pre class="brush: css notranslate">ol { + list-style-type: upper-roman; +}</pre> + +<p>Això ens dona l’aspecte següent:</p> + +<p><img alt="Una llista ordenada amb vinyetes que apareixex fora del text de l'element de llista." src="https://mdn.mozillademos.org/files/12962/outer-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 119px; margin: 0px auto; width: 376px;"></p> + +<p>Podeu trobar moltes més opcions consultant la pàgina de referència {{cssxref("list-style-type")}}.</p> + +<h3 id="Posició_de_la_vinyeta">Posició de la vinyeta</h3> + +<p>La propietat {{cssxref("list-style-position")}} estableix si les vinyetes apareixen dins dels elements de llista, o a fora, abans de l'inici de cada element. El valor predeterminat és <code>outside</code> (fora), que fa que les vinyetes se situïn fora dels elements de llista, tal com hem vist.</p> + +<p>Si estableixes el valor <code>inside</code> (dins), les vinyetes se situen dins de les línies:</p> + +<pre class="brush: css notranslate">ol { + list-style-type: upper-roman; + list-style-position: inside; +}</pre> + +<p><img alt="Una llista ordenada amb vinyetes que apareixex dins del text de l'element de llista." src="https://mdn.mozillademos.org/files/12958/inner-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 123px; margin: 0px auto; width: 370px;"></p> + +<h3 id="Ús_duna_imatge_de_vinyeta_personalitzada">Ús d'una imatge de vinyeta personalitzada</h3> + +<p>La propietat {{cssxref("list-style-image")}} et permet fer servir una imatge personalitzada per a la vinyeta. La sintaxi és bastant senzilla:</p> + +<pre class="brush: css notranslate">ul { + list-style-image: url(star.svg); +}</pre> + +<p>Tanmateix, aquesta propietat és una mica limitada en termes de control de la posició, la mida, etc., de les vinyetes. És millor utilitzar la família de propietats {{cssxref("background")}}, que aprendràs amb més detall en el mòdul de <a href="/ca/docs/Learn/CSS/Building_blocks">Aplicar estil a les caixes</a>. De moment, aquí en tens un tast!</p> + +<p>En el nostre exemple acabat, hem aplicat estil a la llista no ordenada d’aquesta manera (a sobre del que ja has vist abans):</p> + +<pre class="brush: css notranslate">ul { + padding-left: 2rem; +} + +ul li { + padding-left: 2rem; + list-style-type: none; + background-image: url(star.svg); + background-position: 0 0; + background-size: 1.6rem 1.6rem; + background-repeat: no-repeat; +}</pre> + +<p>Aquí hem fet el següent:</p> + +<ul> + <li>Hem reduït el valor per defecte del {{cssxref("padding-left")}} de {{htmlelement("ul")}} de <code>40px</code> a <code>20px</code>, i establim la mateixa quantitat per als elements de llista. D’aquesta manera, en general, els elements de llista encara estan alineats amb els elements de llista ordenada i les descripcions de llista de descripció, però els elements de llista tenen un farciment per a poder-hi encabir imatges de fons. Si no ho féssim així, les imatges de fons es superposarien amb el text de l'element de la llista, i es veuria desordenat.</li> + <li>Hem establert el {{cssxref("list-style-type")}} a <code>none</code>, de manera que no aparegui cap vinyeta per defecte. En lloc d’això, utilitzarem les propietats {{cssxref("background")}} per tractar les vinyetes.</li> + <li>Hem inserit una vinyeta en cada element de llista no ordenada. Les propietats rellevants són les següents: + <ul> + <li>{{cssxref("background-image")}}: Especifica la ruta del fitxer d'imatge que vols utilitzar com a vinyeta.</li> + <li>{{cssxref("background-position")}}: Defineix en quin lloc del fons de l'element seleccionat apareix la imatge; en aquest cas, <code>0 0</code>, que significa que la vinyeta apareix a la part superior esquerra de cada element de llista.</li> + <li>{{cssxref("background-size")}}: Estableix la mida de la imatge de fons. Idealment voldríem que les vinyetes tinguessin la mateixa mida que els elements de llista (o lleugerament més petits o més grans). Fem servir una mida de <code>1.6rem</code> (16px), que s'adiu molt bé amb el farciment de <code>20px</code> que hem establert per e encabir-hi la vinyeta; 16 px, més 4 px d'espai entre la vinyeta i el text de l'element de llista funciona bé.</li> + <li>{{cssxref("background-repeat")}}: Per defecte, les imatges de fons es repeteixen fins que omplen l'espai del fons disponible. Només volem que es faci una còpia de la imatge inserida en cada cas, de manera que el fixem en un valor de no-repetició (<code>no-repeat</code>).</li> + </ul> + </li> +</ul> + +<p><span class="short_text" id="result_box" lang="ca">Això ens dona el resultat següent:</span></p> + +<p><img alt="Una llista no ordenada amb vinyetes en forma de petites estrelles." src="https://mdn.mozillademos.org/files/12956/image-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 106px; margin: 0px auto; width: 124px;"></p> + +<h3 id="La_propietat_abreujada_list-style">La propietat abreujada list-style</h3> + +<p>Les tres propietats anteriors esmentades es poden configurar amb una única propietat abreujada, {{cssxref("list-style")}}. Per exemple, el CSS següent:</p> + +<pre class="brush: css notranslate">ul { + list-style-type: square; + list-style-image: url(example.png); + list-style-position: inside; +}</pre> + +<p>Podria reemplaçar-se per això:</p> + +<pre class="notranslate">ul { + list-style: square url(example.png) inside; +}</pre> + +<p>Els valors es poden incloure en qualsevol ordre, i pots utilitzar-ne un, dos o els tres (els valors predeterminats que s’utilitzen per a les propietats que no s'inclouen són <code>disc</code>, <code>none</code> i <code>outside</code>). Si s'especifica un tipus i una imatge, el tipus s'utilitza com a alternativa si la imatge no es carrega per alguna raó.</p> + +<h2 id="El_control_de_la_numeració_de_les_llistes">El control de la numeració de les llistes</h2> + +<p>De vegades pot ser que vulguis numerar de manera diferent una llista ordenada, per exemple, que comenci a partir d'un número diferent de 1, o bé que compti enrere, o que compti en passos de més d'1. L'HTML i el CSS disposen d’algunes eines que et poden ajudar amb això.</p> + +<h3 id="start">start</h3> + +<p>L'atribut {{htmlattrxref("start", "ol")}} permet iniciar el recompte de la llista a partir d'un número diferent de 1. L’exemple següent:</p> + +<pre class="brush: html notranslate"><ol start="4"> + <li>Toast pitta, leave to cool, then slice down the edge.</li> + <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> + <li>Wash and chop the salad.</li> + <li>Fill pitta with salad, humous, and fried halloumi.</li> +</ol></pre> + +<p>Dona aquesta sortida:</p> + +<p>{{ EmbedLiveSample('start', '100%', 150) }}</p> + +<h3 id="reversed">reversed</h3> + +<p>L'atribut {{htmlattrxref("reversed","ol")}} inicia la llista comptant cap enrere en comptes de cap endavant. L'exemple següent</p> + +<pre class="brush: html notranslate"><ol start="4" reversed> + <li>Toast pitta, leave to cool, then slice down the edge.</li> + <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> + <li>Wash and chop the salad.</li> + <li>Fill pitta with salad, humous, and fried halloumi.</li> +</ol></pre> + +<p>Dona aquesta sortida:</p> + +<p>{{ EmbedLiveSample('reversed', '100%', 150) }}</p> + +<h3 id="value">value</h3> + +<p>L'atribut {{htmlattrxref("value", "ol")}} permet establir valors numèrics específics per a cada element de llista. L’exemple següent:</p> + +<pre class="brush: html notranslate"><ol> + <li value="2">Toast pitta, leave to cool, then slice down the edge.</li> + <li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> + <li value="6">Wash and chop the salad.</li> + <li value="8">Fill pitta with salad, humous, and fried halloumi.</li> +</ol></pre> + +<p>Dona aquesta sortida:</p> + +<p>{{ EmbedLiveSample('value', '100%', 150) }}</p> + +<div class="note"> +<p><strong>Nota</strong>: Fins i tot si fas servir un valor de {{cssxref("list-style-type")}} no numèric, cal que utilitzis els valors numèrics equivalents per a l'atribut <code>value</code>.</p> +</div> + +<h2 id="Aprenentatge_actiu_Aplicar_estil_a_una_llista_imbricada">Aprenentatge actiu: Aplicar estil a una llista imbricada</h2> + +<p>En aquesta sessió d'aprenentatge actiu, volem que prenguis allò que has après i dissenyis una llista imbricada. T’hem proporcionat un codi HTML, i volem que:</p> + +<ol> + <li>Apliquis vinyetes quadrades als elements de llista no ordenada.</li> + <li>Apliquis als elements de llista no ordenada i els elements de llista ordenada una alçada de línia d'1,5 respecte de la mida de la lletra.</li> + <li>Apliquis als elements de llista ordenada valors de lletra minúscula.</li> + <li>No dubtis de jugar amb l'exemple de llistes tant com vulguis, experimenta amb els tipus de vinyeta, l’espaiat o qualsevol altra cosa que hi trobis.</li> +</ol> + +<p>Si t’equivoques, sempre pots tornar a començar amb el botó <em>Reinicia</em>. Si t’encalles, prem el botó <em>Mostra la solució</em> per veure’n una resposta possible.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> + <h2>HTML Input</h2> + <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><ul> + <li>First, light the candle.</li> + <li>Next, open the box.</li> + <li>Finally, place the three magic items in the box, in this exact order, to complete the spell: + <ol> + <li>The book of spells</li> + <li>The shiny rod</li> + <li>The goblin statue</li> + </ol> + </li> +</ul></textarea> + + <h2>CSS Input</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></textarea> + + <h2>Output</h2> + <div class="output" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"></div> + <div class="controls"> + <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"> + <input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;"> + </div> +</div> +</pre> + +<pre class="brush: js notranslate">var htmlInput = document.querySelector(".html-input"); +var cssInput = document.querySelector(".css-input"); +var reset = document.getElementById("reset"); +var htmlCode = htmlInput.value; +var cssCode = cssInput.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +var styleElem = document.createElement('style'); +var headElem = document.querySelector('head'); +headElem.appendChild(styleElem); + +function drawOutput() { + output.innerHTML = htmlInput.value; + styleElem.textContent = cssInput.value; +} + +reset.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = cssCode; + drawOutput(); +}); + +solution.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = 'ul {\n list-style-type: square;\n}\n\nul li {\n line-height: 1.5;\n}\n\nol li {\n list-style-type: lower-alpha\n}'; + drawOutput(); +}); + +htmlInput.addEventListener("input", drawOutput); +cssInput.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p> + +<h2 id="Vegeu_també"><span id="result_box" lang="ca">Vegeu també</span></h2> + +<p>Els comptadors CSS proporcionen eines avançades per a personalitzar el recompte i l'estil de les llistes, però són bastant complexos. Et recomanem que hi facis un cop d'ull si vols ampliar la informació. Vegeu:</p> + +<ul> + <li>{{cssxref("@counter-style")}}</li> + <li>{{cssxref("counter-increment")}}</li> + <li>{{cssxref("counter-reset")}}</li> +</ul> + +<h2 id="Resum">Resum</h2> + +<p>Resulta relativament fàcil de dominar l'aplicació d’estil a les llistes una vegada que en coneixes els principis bàsics associats i les propietats específiques. En l’article següent continuarem amb les tècniques d'estil.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</p> diff --git a/files/ca/learn/css/estilitzar_text/text_fonamental/index.html b/files/ca/learn/css/estilitzar_text/text_fonamental/index.html new file mode 100644 index 0000000000..e258171ffc --- /dev/null +++ b/files/ca/learn/css/estilitzar_text/text_fonamental/index.html @@ -0,0 +1,739 @@ +--- +title: Text fonamental i estil de font +slug: Learn/CSS/Estilitzar_text/Text_fonamental +tags: + - Article + - Beginner + - CSS + - Guide + - Style + - Text + - alignment + - family + - font + - shorthand + - spacing + - weight +translation_of: Learn/CSS/Styling_text/Fundamentals +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</div> + +<p class="summary">En aquest article t'iniciem en el viatge cap al domini de l'aplicació d’estil a text amb {{glossary("CSS")}}. Aquí passarem amb detall per tots els fonaments bàsics de l'aplicació d’estil a textos / tipus de lletra, inclosos el gruix, la família i l'estil del tipus de lletra, les propietats abreviades per al tipus de lletra, l'alineació del text i altres efectes, i l’interlineat i l’interlletratge.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td>Coneixements bàsics d'informàtica, fonaments bàsics d'HTML (consulta l’article <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l’HTML</a>), fonaments de CSS (consulta l’article <a href="/ca/docs/Learn/CSS/First_steps">Introducció al CSS</a>).</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Aprendre les propietats i tècniques bàsiques necessàries per a l'aplicació d’estil al text de les pàgines web.</td> + </tr> + </tbody> +</table> + +<h2 id="Què_implica_laplicació_d’estil_al_text_en_CSS">Què implica l'aplicació d’estil al text en CSS?</h2> + +<p>Com ja deus conèixer d’haver treballat amb l’HTML i el CSS, el text dins d'un element es defineix dins de la caixa de contingut de l'element. Comença a la part superior esquerra de l'àrea de contingut (o a la part superior dreta, en el cas de contingut en idiomes RTL, o right-to-left, que s'escriuen de dreta a esquerra) i flueix cap al final de la línia. Quan arriba al final, passa a la línia següent i continua; i després, a la següent línia, fins que tot el contingut s'ha col·locat a la caixa. El contingut de text es comporta en efecte com un seguit d'elements en línia, es distribueix en línies adjacents entre si, i no crea salts de línia fins que s’ateny el final de la línia, o tret que s'obligui a un salt de línia manual de l'element {{htmlelement("br")}}.</p> + +<div class="note"> +<p><strong>Nota</strong>: Si el paràgraf anterior et sembla confós, no t’hi amoïnis, torna enrere i fes un repàs de la teoria del model de caixa que s’explica en l’article <a href="/ca/docs/Learn/CSS/Building_blocks/The_box_model">El model de caixa</a> abans de continuar.</p> +</div> + +<p>Les propietats CSS que s'utilitzen per a escriure text generalment es divideixen en dues categories, que veurem per separat en aquest article:</p> + +<ul> + <li><strong>Els estils dels tipus de lletra</strong>: són les propietats que afecten el tipus de lletra que es fa servir per al text, que afecta el tipus de lletra que s’empra, la mida, els formats de negreta, cursiva, etc.</li> + <li><strong>Els estils de text en el disseny de pàgina</strong>: són les propietats que afecten l'espaiat i altres funcions de disseny de pàgina relacionades amb el text, que permeten la manipulació de, per exemple, l'espai entre línies i lletres, i la manera com s’alinea el text dins de la caixa de contingut.</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: Tingues en compte que les propietats que afecten el text dins d'un element hi actuen com una única entitat. No pots seleccionar i modificar l'estil de les subseccions de text si no les etiquetes amb un element apropiat (com ara {{htmlelement("span")}} o {{htmlelement("strong")}}) o utilitzes un pseudoelement específic per a text com <a href="/ca/docs/Web/CSS/::first-letter">::first-letter</a> (selecciona la primera lletra del text d'un element), <a href="/ca/docs/Web/CSS/::first-line">::first-line</a> (selecciona la primera línia del text d'un element) o <a href="/ca/docs/Web/CSS/::selection">::selection</a> (selecciona el text que el cursor ressalta en aquell moment).</p> +</div> + +<h2 id="Tipus_de_lletra">Tipus de lletra</h2> + +<p>Continuem endavant per veure les propietats d'estil dels tipus de lletra. En aquest exemple aplicarem algunes propietats CSS diferents a la mateixa mostra d’HTML, que té l’aspecte següent:</p> + +<pre class="brush: html notranslate"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p></pre> + +<p>Podeu trobar l'<a href="http://mdn.github.io/learning-area/css/styling-text/fundamentals/">exemple acabat en GitHub</a> (vegeu-ne també <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/fundamentals/index.html">el codi font</a>).</p> + +<h3 id="Color">Color</h3> + +<p>La propietat {{cssxref("color")}} estableix el color del contingut de primer pla dels elements seleccionats (que normalment és el text, però també pot incloure un parell d'altres coses, com ara un subratllat o un sobreratllat en el text, amb la propietat {{cssxref("text-decoration")}}).</p> + +<p>La propietat <code>color</code> pot acceptar qualsevol <a href="/ca/docs/Learn/CSS/Building_blocks/Valors_i_unitats_CSS">unitat de color CSS</a>, per exemple:</p> + +<pre class="brush: css notranslate">p { + color: red; +}</pre> + +<p>Això fa que els paràgrafs es converteixin en vermells, en comptes del negre estàndard per defecte del navegador, així:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p></pre> +</div> + +<p>{{ EmbedLiveSample('Color', '100%', 220) }}</p> + +<h3 id="Famílies_de_tipus_de_lletra">Famílies de tipus de lletra</h3> + +<p>Per a establir un tipus de lletra diferent en el teu text, utilitza la propietat {{cssxref("font-family")}}; això et permet especificar un tipus de lletra (o una llista de tipus de lletra) perquè el navegador l'apliqui als elements seleccionats. El navegador només aplica un tipus de lletra si està disponible en la màquina amb què s’accedeix al lloc web. Si no, només usarà un {{anch("Default fonts", "tipus de lletra predeterminat")}} del navegador. Un exemple senzill és el següent:</p> + +<pre class="brush: css notranslate">p { + font-family: arial; +}</pre> + +<p>Això fa que tots els paràgrafs d'una pàgina adoptin el tipus de lletra Arial, que es troba en qualsevol ordinador.</p> + +<h4 id="Tipus_de_lletra_segurs_per_a_la_xarxa_web">Tipus de lletra segurs per a la xarxa web</h4> + +<p>Parlant de la disponibilitat dels tipus de lletra, només una certa quantitat de tipus de lletra es troben generalment disponibles en tots els sistemes i, per tant, es poden utilitzar sense gaires preocupacions. Són els anomenats <strong>tipus de lletra segurs per a la xarxa web</strong>.</p> + +<p><span id="result_box" lang="ca">La majoria de les vegades, com a desenvolupadors web, volem tenir un control més específic sobre els tipus de lletra que s’utilitzen per a mostrar el contingut del text. El problema és trobar una manera de saber quin tipus de lletra està disponible en l'ordinador que es fa servir per a accedir a les nostres pàgines web. No hi ha manera de saber-ho en tots els casos, però se sap que els tipus de lletra segurs per a la web estan disponibles en gairebé totes les instàncies dels sistemes operatius més utilitzats (Windows, Mac, les distribucions més habituals de Linux, Android i iOS).</span></p> + +<p>La llista de tipus de lletra segurs per a la xarxa web reals canvia a mesura que evolucionen els sistemes operatius, però és convenient considerar els tipus de lletra segurs per a la xarxa web següents, almenys ara com ara (molts d'ells s’han popularitzades gràcies a la iniciativa de Microsoft <em><a href="https://ca.wikipedia.org/wiki/Core_fonts_for_the_Web">Tipus de lletra principals per a la xarxa web</a></em>, de finals dels anys 1990 i principis dels anys 2000):</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Nom</th> + <th scope="col" style="white-space: nowrap;"><span class="short_text" id="result_box" lang="ca"><span>Tipus de lletra genèric</span></span></th> + <th scope="col">Observacions</th> + </tr> + </thead> + <tbody> + <tr> + <td>Arial</td> + <td>sans-serif</td> + <td>Sovint es considera una bona pràctica afegir també el tipus de lletra <em>Helvetica</em> com una alternativa preferent a <em>Arial</em>; encara que són gairebé idèntiques, es considera que <em>Helvetica</em> té una forma més agradable, tot i que <em>Arial</em> està més disponible.</td> + </tr> + <tr> + <td>Courier New</td> + <td>monospace</td> + <td>Hi ha sistemes operatius que tenen una versió alternativa (possiblement més antiga) del tipus de lletra <em>Courier New</em> anomenada <em>Courier</em>. Es considera una bona pràctica utilitzar-les totes dues, amb <em>Courier New</em> com l’opció preferent.</td> + </tr> + <tr> + <td style="white-space: nowrap;">Georgia</td> + <td>serif</td> + <td></td> + </tr> + <tr> + <td style="white-space: nowrap;">Times New Roman</td> + <td>serif</td> + <td>Hi ha sistemes operatius que tenen una versió alternativa (possiblement més antiga) del tipus de lletra <em>Times New Roman</em> anomenada <em>Times</em>. Es considera una bona pràctica utilitzar-les totes dues, amb <em>Times New Roman</em> com l’opció preferent.</td> + </tr> + <tr> + <td>Trebuchet MS</td> + <td>sans-serif</td> + <td>Has de tenir cura amb l'ús d'aquest tipus de lletra perquè no està àmpliament disponible en sistemes operatius mòbils.</td> + </tr> + <tr> + <td>Verdana</td> + <td>sans-serif</td> + <td></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Nota</strong>: Entre els diversos recursos, el lloc web <a href="http://www.cssfontstack.com/">cssfontstack.com</a> manté una llista de tipus de lletra segurs per a la web disponibles en sistemes operatius Windows i macOS, que poden ajudar-te a prendre la decisió sobre el que consideris segur per al teu ús.</p> +</div> + +<div class="note"> +<p><strong>Nota</strong>: Hi ha una manera de descarregar un tipus de lletra personalitzat juntament amb una pàgina web, que et permet personalitzar l'ús del tipus de lletra de la manera que vulguis: <strong>web fonts</strong>. Això és una mica més complex, i ho exposarem en un <a href="/ca/docs/Learn/CSS/Estilitzar_text/Fonts_Web">article separat</a> més endavant en el mòdul.</p> +</div> + +<h4 id="Tipus_de_lletra_predeterminats">Tipus de lletra predeterminats</h4> + +<p>CSS defineix cinc noms genèrics per als tipus de lletra: <code>serif</code>, <code>sans-serif</code>, <code>monospace</code>, <code>cursive</code> i <code>fantasy</code>. Són noms molt genèrics i l’aspecte exacte del tipus de lletra usat quan s'utilitzen aquests noms genèrics correspon a cada navegador i pot variar per a cada sistema operatiu amb què s'executa. Representa un pitjor escenari, en què el navegador tracta de fer el possible per a oferir almenys un tipus de lletra que es consideri adequat. <code>serif</code>, <code>sans-serif</code> i <code>monospace</code> són bastant previsibles i han de proporcionar alguna cosa raonable. D'altra banda, <code>cursive</code> i <code>fantasy</code> són menys previsibles i et recomanem utilitzar-les amb molta cura i provar-les cada vegada.</p> + +<p>Els cinc noms es defineixen de la manera següent:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Nom</th> + <th scope="col">Definició</th> + <th scope="col">Exemple</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>serif</code></td> + <td>Tipus de lletra que tenen serifes (les floritures i altres petits detalls que es veuen en els extrems dels traços en algunes tipografies).</td> + <td><span style="font-family: serif;">My big red elephant</span></td> + </tr> + <tr> + <td><code>sans-serif</code></td> + <td>Tipus de lletra que no tenen serifes.</td> + <td><span style="font-family: sans-serif;">My big red elephant</span></td> + </tr> + <tr> + <td><code>monospace</code></td> + <td>Tipus de lletra en què cada caràcter ocupa la mateixa amplada, normalment s’utilitza en les llistes d’instruccions que constitueixen el codi informàtic.</td> + <td><span style="font-family: monospace;">My big red elephant</span></td> + </tr> + <tr> + <td><code>cursive</code></td> + <td>Tipus de lletra que tenen com a objectiu emular l'escriptura manuscrita, amb moviments fluids i connectats.</td> + <td><span style="font-family: cursive;">My big red elephant</span></td> + </tr> + <tr> + <td><code>fantasy</code></td> + <td>Tipus de lletra amb intencions decoratives.</td> + <td><span style="font-family: fantasy;">My big red elephant</span></td> + </tr> + </tbody> +</table> + +<h4 id="Llistes_de_tipus_de_lletra">Llistes de tipus de lletra</h4> + +<p>Com que no pots garantir la disponibilitat dels tipus de lletra que vols utilitzar en les teves pàgines web (fins i tot un tipus de lletra segur per a la xarxa web <em>podria</em> fallar per alguna raó), pots proporcionar una <strong>llista de tipus de lletra</strong> perquè el navegador tingui diversos tipus de lletra per poder triar. Això només implica introduir un atribut <code>font-family</code> amb un valor que consti de diversos noms de tipus de lletra separats per comes, per exemple:</p> + +<pre class="brush: css notranslate">p { + font-family: "Trebuchet MS", Verdana, sans-serif; +}</pre> + +<p>En aquest cas, el navegador comença pel principi de la llista i mira si el primer tipus de lletra està disponible en la màquina. Si és així, s'aplica aquesta font als elements seleccionats. En cas contrari, es passa al tipus de lletra següent, i així successivament.</p> + +<p>És recomanable proporcionar al final de la llista un nom de tipus de lletra genèric que sigui adequat perquè el navegador pugui almenys proporcionar alguna cosa adequada aproximada si cap dels tipus de lletra de la llista estan disponibles. Per il·lustrar aquest punt, els navegadors presenten els paràgrafs en un tipus de lletra serifa predeterminada, que normalment és Times New Roman, si no hi ha cap altra opció disponible; però això no és bo quan s’espera un tipus de lletra sans-serif!</p> + +<div class="note"> +<p><strong>Nota</strong>: Els noms dels tipus de lletra que tenen més d'una paraula, com <code>Trebuchet MS</code> s’han d’escriure entre cometes.</p> +</div> + +<h4 id="Un_exemple_de_font-family"><span id="result_box" lang="ca">Un exemple de <code>font-family</code></span></h4> + +<p><span id="result_box" lang="ca">Afegim les línies següents al nostre exemple anterior per a donar als paràgrafs un tipus de lletra sans-serif</span>:</p> + +<pre class="brush: css notranslate">p { + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> + +<p><span id="result_box" lang="ca">Això ens dona el resultat següent</span>:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p></pre> +</div> + +<p>{{ EmbedLiveSample('Un_exemple_de_font-family', '100%', 220) }}</p> + +<h3 id="La_mida_de_la_lletra"><span id="result_box" lang="ca">La mida de la lletra</span></h3> + +<p>En l'article de <a href="/ca/docs/Learn/CSS/Building_blocks/Valors_i_unitats_CSS">valors i unitats en CSS</a> del mòdul anterior, hem revisat les <a href="/ca/docs/Learn/CSS/Building_blocks/Valors_i_unitats_CSS">unitats de longitud i mida</a>. La mida de la lletra (que s’estableix amb la propietat {{cssxref("font-size")}} pot prendre valors que es mesuren en la majoria d'aquestes unitats (i d’altres, com ara <a href="/ca/docs/Learn/CSS/Building_blocks/Valors_i_unitats_CSS#Percentatges">percentatges</a>), però les unitats més comunes que faràs servir per a la mida del text són:</p> + +<ul> + <li><code>px</code> (píxels): L’alçada expressada en nombre de píxels que vols que tingui el text. Aquesta és una unitat absoluta; dona sempre el mateix valor final calculat per al tipus de lletra de la pàgina en qualsevol situació.</li> + <li><code>em</code>: 1 <code>em</code> és igual a la mida de la lletra que s’ha establert per al tipus de lletra de l'element pare de l'element al qual apliquem estil (més concretament, l'amplada d'una lletra M majúscula continguda dins de l'element pare). Això pot arribar a ser complicat de calcular si hi ha molts elements imbricats amb mides de tipus de lletra establertes diferents, però és factible, com veuràs a continuació. Així, doncs, per què t’ha de preocupar? Resulta força natural una vegada que t’hi acostumes i pots fer servir unitats <code>em</code> per a dimensionar-ho tot, no només text. Pots tenir un lloc web complet definit amb mides en unitats <code>em</code>, i així se simplifica molt el manteniment.</li> + <li><code>rem</code>: Aquestes unitats funcionen igual que les unitats <code>em</code>, excepte que 1 <code>rem</code> és igual a la mida de lletra del tipus de lletra que s’ha establert per a l'element arrel del document (és a dir, {{htmlelement("html")}}), no l'element pare. Això facilita força els càlculs per a esbrinar la mida de la lletra, però malauradament les unitats <code>rem</code> no són compatibles amb Internet Explorer 8 o anteriors. Si necessites compatibilitat amb navegadors antics per al teu projecte, pots utilitzar unitats <code>em</code> o <code>px</code>, o bé utilitzar un {{glossary("polyfill")}} com <a href="https://github.com/chuckcarpenter/REM-unit-polyfill">REM-unit-polyfill</a>.</li> +</ul> + +<p>L’atribut <code>font-size</code> d'un element s'hereta de l'element pare d'aquest element. Tot comença amb l'element arrel del document, {{htmlelement("html")}}, en què l’atribut <code>font-size</code> està establert en 16 px de manera estàndard en els navegadors. Qualsevol paràgraf (o un altre element que no tingui una mida diferent establerta pel navegador) de l'interior de l'element arrel tindrà una mida final de 16 px. Altres elements poden tenir mides predeterminades diferents, per exemple, un element {{htmlelement("h1")}} té una mida de 2 <code>em</code> establerta per defecte, de manera que tindrà una mida final de 32 píxels.</p> + +<p>Les coses es tornen més difícils quan es comença a alterar la mida del tipus de lletra dels elements imbricats. Per exemple, si en la teva pàgina hi ha un element {{htmlelement("article")}} i hi estableixes la mida del tipus de lletra en 1,5 <code>em</code> (que donaria una mida final de 24 px), i llavors vols que els paràgrafs de dins de l'element <code><article></code> tinguin una mida de lletra computada de 20 px, quin valor <code>em</code> hem d’utilitzar?</p> + +<pre class="brush: html notranslate"><!-- document base font-size is 16px --> +<article> <!-- If my font-size is 1.5em --> + <p>My paragraph</p> <!-- How do I compute to 20px font-size? --> +</article></pre> + +<p>Hauràs d'establir el valor <code>em</code> en 20/24 o 0,83333333 <code>em</code>. Els càlculs poden complicar-se, de manera que cal tenir cura a l’hora de com aplicar estils. El millor és utilitzar unitats <code>rem</code> on puguis per mantenir les coses senzilles i evitar establir la mida de la lletra dels elements del contenidor quan sigui possible.</p> + +<h4 id="Un_exemple_senzill_de_dimensionament">Un exemple senzill de dimensionament</h4> + +<p>Quan dimensiones el teu text, normalment és una bona idea establir l’atribut base <code>font-size</code> del document en 10 px, de manera que resulta molt més senzill de fer els càlculs, perquè llavors els valors <code>(r)em</code> són la mida de la lletra en píxels dividida per 10, no per 16. A continuació, pots dimensionar fàcilment els diferents tipus de text del document si ho vols. És una bona idea fer una llista de tot el conjunt de regles <code>font-size</code> en una zona determinada del teu full d'estil, i així són fàcils de trobar.</p> + +<p>El nostre nou resultat és així:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p> +</pre> +</div> + +<pre class="brush: css notranslate">html { + font-size: 10px; +} + +h1 { + font-size: 2.6rem; +} + +p { + font-size: 1.4rem; + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> + +<p>{{ EmbedLiveSample('Un_exemple_senzill_de_dimensionament', '100%', 220) }}</p> + +<h3 id="Estils_i_gruixos_de_lletra_transformacions_i_decoracions_del_text"><span id="result_box" lang="ca">Estils i gruixos de lletra, transformacions i decoracions del text</span></h3> + +<p>CSS proporciona quatre propietats comunes per a alterar el gruix visual / l’èmfasi del text:</p> + +<ul> + <li>{{cssxref("font-style")}}: s'utilitza per a activar i desactivar el text en cursiva. Els valors possibles són els següents (rarament es farà servir això, tret que vulgueu desactivar algun estil de cursiva per alguna raó): + <ul> + <li><code>normal</code>: Estableix per al text el tipus de lletra normal (activa les cursives).</li> + <li><code>italic</code>: Estableix per al text l’ús de la <em>versió cursiva del tipus de lletra</em>, si està disponible; si no està disponible, simula la cursiva amb <code>oblique</code>.</li> + <li><code>oblique</code>: Estableix per al text l’ús d’una versió simulada d'un tipus de lletra en cursiva, creada <em>inclinant la versió normal</em>.</li> + </ul> + </li> + <li>{{cssxref("font-weight")}}: estableix el "pes" del text. Això té molts valors disponibles en cas que hi hagi moltes variants de fonts disponibles (com ara -<em>light</em>, -<em>normal</em>, -<em>bold</em>, -<em>extrabold</em>, -<em>black</em>, etc.), però en una situació realista poques vegades n’usaràs cap, excepte per a <code>normal</code> i <code>bold</code>: + <ul> + <li><code>normal</code>, <code>bold</code>: Gruix dels tipus de lletra normal i negreta</li> + <li><code>lighter</code>, <code>bolder</code>: Estableix la intensitat de negreta en un element un nivell més lleu o més intens que la intensitat de negreta de l'element pare.</li> + <li><code>100</code>–<code>900</code>: Valors numèrics d'intensitat de negreta que proporcionen un control de gra més fi que les paraules clau anteriors, si cal.</li> + </ul> + </li> + <li>{{cssxref("text-transform")}}: Et permet configurar el tipus de transformació que admet el tipus de lletra. Els valors inclouen: + <ul> + <li><code>none</code>: Evita qualsevol transformació.</li> + <li><code>uppercase</code>: Transforma TOT EL TEXT A MAJÚSCULES.</li> + <li><code>lowercase</code>: Transforma tot el text a minúscules.</li> + <li><code>capitalize</code>: Transforma totes les paraules perquè tinguin La Primera Lletra en Majúscula.</li> + <li><code>full-width</code>: Transforma tots els glifs de manera que s'escriuen dins d'un quadrat d'amplada fixa, similar a un tipus de lletra monoespaiada, i permet l'alineació de, per ex., caràcters llatins juntament amb glifs de llengua asiàtica (com el xinès, el japonès, el coreà).</li> + </ul> + </li> + <li>{{cssxref("text-decoration")}}: Activa/desactiva les decoracions de text en els tipus de lletra (s'utilitza principalment per a desfer el subratllat predeterminat dels enllaços en aplicar-los estil). Els valors disponibles són: + <ul> + <li><code>none</code>: Anul·la qualsevol decoració de text ja present.</li> + <li><code>underline</code>: <u>Subratlla el text</u>.</li> + <li><code>overline</code>: <span style="text-decoration: overline;">Posa una línia sobre el text</span>.</li> + <li><code>line-through</code>: Posa una <s style="text-decoration: line-through;">ratlla sobre el text</s>.</li> + </ul> + </li> +</ul> + +<p>Cal tenir en compte que {{cssxref("text-decoration")}} pot acceptar diversos valors alhora, si vols afegir diverses decoracions alhora; per exemple, <span style="text-decoration: underline overline;"><code>text-decoration: underline overline</code></span>. Tingues en compte que {{cssxref("text-decoration")}} és una propietat abreujada per a {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} i {{cssxref("text-decoration-color")}}. Pots utilitzar les combinacions d'aquests valors de propietat per a crear efectes interessants, per exemple, <span style="text-decoration: line-through red wavy;"><code>text-decoration: line-through red wavy</code></span></p> + +<p>Observem com afegir un parell d'aquestes propietats al nostre exemple:</p> + +<p>El resultat és aquest:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p> +</pre> +</div> + +<pre class="brush: css notranslate">html { + font-size: 10px; +} + +h1 { + font-size: 2.6rem; + text-transform: capitalize; +} + +h1 + p { + font-weight: bold; +} + +p { + font-size: 1.4rem; + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> + +<p>{{ EmbedLiveSample('Estils_i_gruixos_de_lletra_transformacions_i_decoracions_del_text', '100%', 220) }}</p> + +<h3 id="Ombres_en_el_text">Ombres en el text</h3> + +<p>Pots aplicar ombres al text amb la propietat {{cssxref("text-shadow")}}. Això involucra fins a quatre valors, com es mostra en l'exemple següent:</p> + +<pre class="brush: css notranslate">text-shadow: 4px 4px 5px red;</pre> + +<p>Les quatre propietats són:</p> + +<ol> + <li>El desplaçament horitzontal de la silueta del text original: pot prendre la majoria de les <a href="/ca/docs/Learn/CSS/Building_blocks/Valors_i_unitats_CSS">unitats de longitud i grandària</a> disponibles en CSS, però el més convenient és usar <code>px</code>. Aquest valor s'ha d'incloure.</li> + <li>El desplaçament vertical de la silueta del text original: es comporta bàsicament igual que el desplaçament horitzontal, excepte que mou l'ombra amunt i avall, no a dreta i esquerra. Aquest valor s'ha d'incloure.</li> + <li>El radi d'esborronat: un valor més alt significa que l'ombra es dispersa més àmpliament. Si aquest valor no s'inclou, el valor predeterminat és 0, que significa que no s’esborrona. Pot prendre la majoria de les <a href="/ca/docs/Learn/CSS/Building_blocks/Valors_i_unitats_CSS">unitats de longitud i grandària</a> disponibles en CSS.</li> + <li>El color base de l'ombra: pot prendre qualsevol <a href="/ca/docs/Learn/CSS/Building_blocks/Valors_i_unitats_CSS">unitat de color CSS</a>. Si no s'inclou, el valor predeterminat és <code>black</code>.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: Els valors de desplaçament positius mouen l'ombra cap a la dreta i cap avall, però també pots utilitzar valors de desplaçament negatius per a moure l'ombra cap a l'esquerra i cap amunt, com per exemple <code>-1px -1px</code>.</p> +</div> + +<h4 id="Ombres_múltiples">Ombres múltiples</h4> + +<p>Pots aplicar diverses ombres a un mateix text si inclous més d’un valor d'ombra separats per comes, per exemple:</p> + +<pre class="brush: css notranslate"><code class="language-css"><span class="property token">text-shadow</span><span class="punctuation token">:</span> -<span class="number token">1</span>px -<span class="number token">1</span>px <span class="number token">1</span>px <span class="hexcode token">#aaa</span>, + <span class="number token">0</span>px <span class="number token">4</span>px <span class="number token">1</span>px <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0.5</span><span class="punctuation token">)</span>, + <span class="number token">4</span>px <span class="number token">4</span>px <span class="number token">5</span>px <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0.7</span><span class="punctuation token">)</span>, + <span class="number token">0</span>px <span class="number token">0</span>px <span class="number token">7</span>px <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0.4</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Si apliquem això a l'element {{htmlelement("h1")}} del nostre exemple de Tommy the cat, obtenim això:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p> +</pre> + +<pre class="brush: css notranslate">html { + font-size: 10px; +} + +h1 { + font-size: 26px; + text-transform: capitalize; + text-shadow: -1px -1px 1px #aaa, + 0px 2px 1px rgba(0,0,0,0.5), + 2px 2px 2px rgba(0,0,0,0.7), + 0px 0px 3px rgba(0,0,0,0.4); +} + +h1 + p { + font-weight: bold; +} + +p { + font-size: 14px; + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Ombres_múltiples', '100%', 220) }}</p> + +<div class="note"> +<p><strong>Nota</strong>: Pots veure més exemples interessants d'ús de <code>text-shadow</code> en l'article de Sitepoint <a href="http://www.sitepoint.com/moonlighting-css-text-shadow/">Moonlighting with CSS text-shadow</a>.</p> +</div> + +<h2 id="Disseny_de_pàgina_del_text">Disseny de pàgina del text</h2> + +<p>Ara que ja coneixem les propietats bàsiques dels tipus de lletra, passem a veure les propietats del text que podem utilitzar que afecten el disseny de pàgina.</p> + +<h3 id="Alineació_del_text">Alineació del text</h3> + +<p>La propietat {{cssxref("text-align")}} s'utilitza per a controlar com s'alinea el text dins de la caixa que conté els continguts. Els valors disponibles són els següents i funcionen gairebé de la mateixa manera que ho fa una aplicació de processador de text normal:</p> + +<ul> + <li><code>left</code>: Justifica el text a l'esquerra.</li> + <li><code>right</code>: Justifica el text a la dreta.</li> + <li><code>center</code>: Centra el text.</li> + <li><code>justify</code>: Varia els espais entre les paraules perquè totes les línies de text ocupin la mateixa amplada. Cal utilitzar-lo amb cura; pot presentar un aspecte terrible, sobretot quan s'aplica a un paràgraf amb paraules molt llargues. Si fas servir aquesta propietat, has de pensar d’utilitzar-hi també conjuntament alguna altra cosa, com ara {{cssxref("hyphens")}}, per partir les paraules més llargues al final de línia.</li> +</ul> + +<p>Si s'aplica <code>text-align: center;</code> a l’{{htmlelement("h1")}} en el nostre exemple, obtenim això:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p> +</pre> + +<pre class="brush: css notranslate">html { + font-size: 10px; +} + +h1 { + font-size: 2.6rem; + text-transform: capitalize; + text-shadow: -1px -1px 1px #aaa, + 0px 2px 1px rgba(0,0,0,0.5), + 2px 2px 2px rgba(0,0,0,0.7), + 0px 0px 3px rgba(0,0,0,0.4); + text-align: center; +} + +h1 + p { + font-weight: bold; +} + +p { + font-size: 1.4rem; + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Alineació_del_text', '100%', 220) }}</p> + +<h3 id="Interlineat">Interlineat</h3> + +<p>La propietat {{cssxref("line-height")}} estableix l'alçada que hi ha entre les línies de text. Pot prendre la majoria de les <a href="/ca/docs/Learn/CSS/Building_blocks/Valors_i_unitats_CSS">unitats de longitud i grandària</a>, però també un valor sense unitat, que actua com un multiplicador, i generalment es considera l’opció més bona; es multiplica el valor de {{cssxref("font-size")}} i s’obté <code>line-height</code>. El text del <code>body</code> en general es veu més bé i és més fàcil de llegir si les línies estan prou separades. L'alçada de la línia recomanada és d'aproximadament 1,5-2 (doble espai). Per tant, si vols establir les línies de text a 1,6 vegades l'alçada del tipus de lletra, utilitzaries això:</p> + +<pre class="brush: css notranslate">line-height: 1.6;</pre> + +<p>Si apliques això als elements {{htmlelement("p")}} del nostre exemple, obtindràs aquest resultat:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p> +</pre> + +<pre class="brush: css notranslate">html { + font-size: 10px; +} + +h1 { + font-size: 2.6rem; + text-transform: capitalize; + text-shadow: -1px -1px 1px #aaa, + 0px 2px 1px rgba(0,0,0,0.5), + 2px 2px 2px rgba(0,0,0,0.7), + 0px 0px 3px rgba(0,0,0,0.4); + text-align: center; +} + +h1 + p { + font-weight: bold; +} + +p { + font-size: 1.4rem; + color: red; + font-family: Helvetica, Arial, sans-serif; + line-height: 1.5; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Interlineat', '100%', 250) }}</p> + +<h3 id="Espaiat_entre_lletres_i_entre_paraules">Espaiat entre lletres i entre paraules</h3> + +<p>Les propietats {{cssxref("spacing-letter")}} i {{cssxref("word-spacing")}} permeten establir l'espaiat entre lletres i l'espaiat entre paraules en el text. No ho faràs amb gaire freqüència, però potser ho trobes útil per a obtenir un cert tipus de presentació o per millorar la llegibilitat d'un tipus de lletra especialment densa. Pot prendre la majoria de les <a href="/ca/docs/Learn/CSS/Building_blocks/Valors_i_unitats_CSS">unitats de longitud i grandària</a>.</p> + +<p>Així, per exemple, podríem aplicar una mica d’espai entre lletres i espai entre paraules a la primera línia de cada element {{htmlelement("p")}} del nostre exemple:</p> + +<pre class="brush: css notranslate">p::first-line { + letter-spacing: 4px; + word-spacing: 4px; +}</pre> + +<p>Afegim-ne una mica al nostre exemple, així:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p> +</pre> + +<pre class="brush: css notranslate">html { + font-size: 10px; +} + +h1 { + font-size: 2.6rem; + text-transform: capitalize; + text-shadow: -1px -1px 1px #aaa, + 0px 2px 1px rgba(0,0,0,0.5), + 2px 2px 2px rgba(0,0,0,0.7), + 0px 0px 3px rgba(0,0,0,0.4); + text-align: center; +} + +h1 + p { + font-weight: bold; +} + +p::first-line { + letter-spacing: 2px; + word-spacing: 4px; +} + +p { + font-size: 1.4rem; + color: red; + font-family: Helvetica, Arial, sans-serif; + line-height: 1.5; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Espaiat_entre_lletres_i_entre_paraules', '100%', 250) }}</p> + +<h3 id="Altres_propietats_que_convé_conèixer"><span id="result_box" lang="ca"><span title="Other properties worth looking at">Altres propietats que convé conèixer</span></span></h3> + +<p>Les propietats anteriors et donen una idea de com començar a aplicar estil al text d’una pàgina web, però hi ha moltes altres propietats que es poden utilitzar. Aquí només hem volgut exposar les més importants. Un cop t’hagis acostumat a fer-les servir, també hauries d'explorar les següents:</p> + +<p>Estils per als tipus de lletra:</p> + +<ul> + <li>{{cssxref("font-variant")}}: Alterna entre la versaleta i la lletra normal</li> + <li>{{cssxref("font-kerning")}}: Activa i desactiva les opcions de kerning del tipus de lletra.</li> + <li>{{cssxref("font-feature-settings")}}: Activa i desactiva diverses característiques dels tipus de lletra <a href="https://en.wikipedia.org/wiki/OpenType">OpenType</a>.</li> + <li>{{cssxref("font-variant-alternates")}}: Controla l'ús de caràcters alternatius per a un tipus de lletra determinat.</li> + <li>{{cssxref("font-variant-caps")}}: Controla l'ús de caràcters alternatius en majúscules.</li> + <li>{{cssxref("font-variant-east-asian")}}: Controla l'ús de caràcters alternatius per a textos en caràcters de llengües de l'Àsia oriental, com ara el japonès i el xinès.</li> + <li>{{cssxref("font-variant-ligatures")}}: Controla les lligadures i les formes contextuals que s'utilitzen en text.</li> + <li>{{cssxref("font-variant-numeric")}}: Controla l'ús de glifs alternatius per a números, fraccions i marcadors ordinaris.</li> + <li>{{cssxref("font-variant-position")}}: Controla l'ús de caràcters alternatius de mides més petites posicionades com superíndex o subíndex.</li> + <li>{{cssxref("font-size-adjust")}}: Ajusta la mida visual del tipus de lletra independentment de la mida real de la lletra.</li> + <li>{{cssxref("font-stretch")}}: Alterna entre versions espaiades alternatives possibles d'un tipus de lletra donat.</li> + <li>{{cssxref("text-underline-position")}}: Especifica la posició dels subratllats amb el valor <code>underline</code> de la propietat <code>text-decoration-line</code>.</li> + <li>{{cssxref("text-rendering")}}: Intenta aconseguir una optimització de la presentació del text.</li> +</ul> + +<p>Aplicació d’estil al text per al disseny de pàgina</p> + +<ul> + <li>{{cssxref("text-indent")}}: Especifica quant d’espai horitzontal s'hauria de deixar abans del començament de la primera línia del contingut del text.</li> + <li>{{cssxref("text-overflow")}}: Defineix com s’indica als usuaris el contingut desbordat que no es mostra.</li> + <li>{{cssxref("white-space")}}: Defineix com es tracten els espais en blanc i els salts de línia associats dins de l'element.</li> + <li>{{cssxref("word-break")}}: Especifica si vols partició de paraules entre línies.</li> + <li>{{cssxref("direction")}}: Defineix la direcció del text (això depèn de l’idioma i, en general, és millor deixar que HTML s’encarregui d’aquesta part, perquè va associada al contingut del text).</li> + <li>{{cssxref("hyphens")}}: Activa i desactiva la partició de paraules per als idiomes admesos.</li> + <li>{{cssxref("line-break")}}: Relaxa o força la partició de línies per a les llengües asiàtiques.</li> + <li>{{cssxref("text-align-last")}}: Defineix com s'alinea l'última línia d'un bloc o una línia, just abans d'un salt de línia forçat.</li> + <li>{{cssxref("text-orientation")}}: Defineix l'orientació del text en una línia.</li> + <li>{{cssxref("word-wrap")}}: Especifica si el navegador pot partir o no paraules entre línies per a evitar desbordaments.</li> + <li>{{cssxref("writing-mode")}}: Estableix si les línies de text estan en horitzontal o vertical, i en quina direcció flueixen les línies posteriors.</li> +</ul> + +<h2 id="Propietat_abreujada_per_al_tipus_de_lletra">Propietat abreujada per al tipus de lletra</h2> + +<p>També es poden establir moltes propietats de tipus de lletra amb la propietat abreujada {{cssxref("font")}}. S’escriuen en l’ordre següent: {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}} i {{cssxref("font-family")}}.</p> + +<p>Entre totes aquestes propietats, només es requereixen <code>font-size</code> i <code>font-family</code> quan s'utilitza la propietat abreujada <code>font</code>.</p> + +<p>S'ha d'incloure una barra diagonal entre les propietats {{cssxref("font-size")}} i {{cssxref("line-height")}}.</p> + +<p>Un exemple complet tindria un aspecte com aquest:</p> + +<pre class="brush: css notranslate">font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;</pre> + +<h2 id="Aprenentatge_actiu_Jugar_amb_els_estils_de_text"><span id="result_box" lang="ca">Aprenentatge actiu: Jugar amb els estils de text</span></h2> + +<p>En aquesta sessió d'aprenentatge actiu, no et proposem de fer cap exercici específic: et proposem que juguis amb algunes propietats del tipus de lletra i el text aplicades al disseny de pàgina i observis què ets capaç de crear. Pots fer-ho usant els fitxers HTML/CSS fora de línia, o pots introduir el teu codi en l'exemple editat en viu a continuació.</p> + +<p>Si t’equivoques, sempre pots tornar a l’inici amb el botó <em>Reinicia</em>.</p> + +<div class="hidden"> +<h6 id="Codi_executable">Codi executable</h6> + +<pre class="brush: html notranslate"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> + <h2>HTML Input</h2> + <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> + <p>Some sample text for your delight</p></textarea> + + <h2>CSS Input</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">p { + + }</textarea> + + <h2>Output</h2> + <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div> + <div class="controls"> + <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"> + </div> +</div> +</pre> + +<pre class="brush: js notranslate">var htmlInput = document.querySelector(".html-input"); +var cssInput = document.querySelector(".css-input"); +var reset = document.getElementById("reset"); +var htmlCode = htmlInput.value; +var cssCode = cssInput.value; +var output = document.querySelector(".output"); + +var styleElem = document.createElement('style'); +var headElem = document.querySelector('head'); +headElem.appendChild(styleElem); + +function drawOutput() { + output.innerHTML = htmlInput.value; + styleElem.textContent = cssInput.value; +} + +reset.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = cssCode; + drawOutput(); +}); + +htmlInput.addEventListener("input", drawOutput); +cssInput.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Codi_executable', 700, 800) }}</p> + +<h2 id="Resum"><span id="result_box" lang="ca">Resum</span></h2> + +<p>Esperem que hagis gaudit jugant amb el text d’aquest article! L’article següent t’explicarà tot el que has de saber sobre l’aplicació d'estil a llistes HTML.</p> + +<p>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</p> diff --git a/files/ca/learn/css/first_steps/com_començar_amb_css/index.html b/files/ca/learn/css/first_steps/com_començar_amb_css/index.html new file mode 100644 index 0000000000..dfc1ae29b3 --- /dev/null +++ b/files/ca/learn/css/first_steps/com_començar_amb_css/index.html @@ -0,0 +1,254 @@ +--- +title: Com començar amb CSS +slug: Learn/CSS/First_steps/Com_començar_amb_CSS +translation_of: Learn/CSS/First_steps/Getting_started +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</div> + +<p class="summary">En aquest article, agafarem un document HTML senzill i hi aplicarem una mica de CSS per aprendre algunes coses pràctiques sobre aquest llenguatge informàtic.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisits:</th> + <td>Coneixements bàsics d'informàtica, tenir el <a href="/ca/docs/Learn/Getting_started_with_the_web/Instal·lació_bàsica_programari">programari bàsic instal·lat</a>, coneixements bàsics de com <a href="/ca/docs/Learn/Getting_started_with_the_web/Tractar_amb_arxius">treballar amb fitxers</a> i d'HTML (mira <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a>).</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Comprendre els fonaments bàsics d’enllaçar un document CSS a un fitxer HTML i poder crear un text simple amb CSS.</td> + </tr> + </tbody> +</table> + +<h2 id="Començar_amb_lHTML">Començar amb l'HTML</h2> + +<p>El nostre punt de partida és un document HTML. Pots copiar el codi de sota si vols treballar al teu propi ordinador. Desa el codi de sota com a <code>index.html</code> en una carpeta de l'ordinador.</p> + +<pre class="brush: html notranslate"><!doctype html> +<html lang="ca"> +<head> + <meta charset="utf-8"> + <title>Introducció al CSS</title> +</head> + +<body> + + <h1>Sóc un títol de nivell u</h1> + + <p>Aquest és un paràgraf de text. Al text hi ha un <span>element span</span> +i també un enllaç <a href="http://example.com">link</a>.</p> + + <p>Aquest és el segon paràgraf. Conté un element <em>subratllat</em>.</p> + + <ul> + <li>Article 1</li> + <li>Article 2</li> + <li>Article <em>tres</em></li> + </ul> + +</body> + +</html> +</pre> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Si llegeixes això en un dispositiu o en un entorn on no pots crear fitxers fàcilment, no et preocupis: a continuació es mostren editors de codi en directe per a escriure un exemple de codi aquí a la pàgina.</p> +</div> + +<h2 id="Afegir_CSS_al_nostre_document">Afegir CSS al nostre document</h2> + +<p>El primer que hem de fer és dir al document HTML que tenim unes regles CSS que volem que utilitzi. Habitualment trobaràs tres maneres diferents d’aplicar CSS a un document HTML, però de moment examinarem la manera més comuna i útil: enllaçar el CSS des de la capçalera del document.</p> + +<p>Crea un fitxer a la mateixa carpeta que el teu document HTML i desa’l com <code>styles.css</code>. L’extensió <code>.css</code> mostra que es tracta d’un fitxer CSS.</p> + +<p>Per a enllaçar <code>styles.css</code> a <code>index.html</code>, afegeix la línia següent en algun lloc de la capçalera ({{htmlelement("head")}}) del document HTML:</p> + +<pre class="brush: html notranslate"><link rel="stylesheet" href="styles.css"></pre> + +<p>Aquest element {{htmlelement("link")}} indica al navegador que hi ha un full d'estil i utilitza l'atribut <code>rel</code> i la ubicació d'aquest full d'estil com a valor de l'atribut <code>href</code>. Pots provar si funciona el CSS afegint una regla a <code>styles.css</code>. Fent servir l'editor de codi, afegeix el següent al fitxer CSS:</p> + +<pre class="brush: css notranslate">h1 { + color: red; +}</pre> + +<p>Desa els fitxers HTML i CSS i torna a carregar la pàgina en un navegador web. Ara el títol d’encapçalament de primer nivell a la part superior del document s'ha de veure de color vermell. Si això succeeix, enhorabona: has aplicat amb èxit una mica de CSS a un document HTML. Si això no passa, comprova ho has escrit tot correctament.</p> + +<p>Pots continuar treballant amb <code>styles.css</code> localment, o bé pots utilitzar el nostre editor interactiu, que trobaràs a continuació, per continuar amb aquest tutorial. L’editor interactiu actua com si el CSS del primer quadre estigués vinculat al document HTML, tal com passa amb el nostre document anterior.</p> + +<h2 id="Aplicar_estil_als_elements_HTML">Aplicar estil als elements HTML</h2> + +<p>En tornar el títol vermell, ja hem demostrat que podem seleccionar un element HTML i aplicar-hi estil. Ho fem delimitant un <em>selector d’elements</em>: un seleccionador que coincideix directament amb un nom d’element HTML. Per a seleccionar tots els paràgrafs del document, utilitzaries el selector <code>p</code>. Per a convertir tots els paràgrafs en verd, faries servir:</p> + +<pre class="brush: css notranslate">p { + color: green; +}</pre> + +<p>Pots seleccionar diversos selectors alhora, separats amb una coma. Si volem que tots els paràgrafs i tots els elements de la llista siguin verds, la regla ha de ser la següent:</p> + +<pre class="brush: css notranslate">p, li { + color: green; +}</pre> + +<p>Prova-ho a l’editor interactiu següent (edita els quadres de codi) o al teu document CSS local.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} </p> + +<h2 id="Canviar_el_comportament_predeterminat_dels_elements">Canviar el comportament predeterminat dels elements</h2> + +<p>Quan observem un document HTML ben marcat, fins i tot una cosa tan simple com el nostre exemple, podem veure que el navegador afegeix algun estil per defecte per fer que l’HTML sigui llegible. Els títols són grans i en lletra negreta i la nostra llista inclou vinyetes. Això passa perquè els navegadors tenen fulls d’estil interns que contenen estils predeterminats que s’apliquen per defecte a totes les pàgines; sense això no hi hauria distincions dins el text i hauríem d’aplicar estil a tot des de zero. Tots els navegadors moderns mostren el contingut HTML de la mateixa manera per defecte.</p> + +<p>Tanmateix, sovint voldràs alguna cosa que no sigui la tria que ha fet el navegador. Això es pot fer escollint només l’element HTML que vols canviar i fent servir una regla CSS per a canviar-ne l’aspecte. Un bon exemple és <code><ul></code>, que marca una llista no ordenada. Mostra boletes en els elements de llista, però si decideixo que no les vull, les puc eliminar:</p> + +<pre class="brush: css notranslate">li { + list-style-type: none; +}</pre> + +<p>Prova d’afegir això al teu CSS.</p> + +<p>És una bona opció consultar la propietat <code>list-style-type</code> a la pàgina de MDN per veure quins valors admet. Per provar uns valors diferents, dona una ullada a la pàgina <code><a href="/en-US/docs/Web/CSS/list-style-type">list-style-type</a></code>, on trobaràs un exemple interactiu a la part superior de la pàgina i, a continuació, es detallen tots els valors que s’admeten.</p> + +<p>Si consultes aquesta pàgina, descobriràs que, a banda d’eliminar les vinyetes de la llista, també les pots canviar: prova de canviar-les per vinyetes quadrades amb el valor <code>square</code>.</p> + +<h2 id="Afegir_una_classe">Afegir una classe</h2> + +<p>Fins al moment hem dissenyat elements basats en els seus noms en HTML. Això funciona sempre que vulguis que tots els elements d’aquest tipus del document presentin el mateix aspecte. Moltes vegades no és el cas, així que hauràs de trobar la manera de seleccionar un subconjunt dels elements sense canviar els altres. La manera més habitual de fer-ho és afegir una classe a l'element HTML i delimitar aquesta classe.</p> + +<p>Al teu document HTML, afegeix un <a href="/ca/docs/Web/HTML/Global_attributes/class">atribut de classe</a> al segon element de la llista. La teva llista ara es veurà així:</p> + +<pre class="brush: html notranslate"><ul> + <li>Article 1</li> + <li <strong>class="special"</strong>>Item two</li> + <li>Article <em>tres</em></li> +</ul></pre> + +<p>Al teu CSS pots seleccionar la classe <code>special</code> creant un selector que comenci amb un punt. Afegeix el següent al teu fitxer CSS:</p> + +<pre class="brush: css notranslate">.special { + color: orange; + font-weight: bold; +}</pre> + +<p>Desa i actualitza per veure quin és el resultat.</p> + +<p>Pots aplicar la classe <code>special</code> a qualsevol element de la pàgina que vulguis que tingui el mateix aspecte que aquesta llista. Per exemple, potser vols que l’element <code><span></code> del paràgraf també es vegi de color taronja i en negreta. Prova d’afegir-hi una classe <code>special</code> i torna a carregar la pàgina, i observa què passa.</p> + +<p>De vegades veuràs regles amb un selector que enumera el selector d’elements HTML juntament amb la classe:</p> + +<pre class="brush: css notranslate">li.special { + color: orange; + font-weight: bold; +}</pre> + +<p>Aquesta sintaxi vol dir «selecciona qualsevol element <code>li</code> que tingui una classe <code>special</code>». Si ho fas així, ja no podràs aplicar la classe a un element <code><span></code> o qualsevol altre element simplement afegint-hi la classe; hauràs d’afegir aquest element a la llista de selectors:</p> + +<pre class="brush: css notranslate">li.special, +span.special { + color: orange; + font-weight: bold; +}</pre> + +<p>Com pots imaginar, algunes classes podrien aplicar-se a molts elements i no vols haver d’editar el CSS cada vegada que calgui adoptar un estil nou. Per tant, de vegades és millor deixar de banda l’element i simplement fer referència a la classe, tret que sàpigues que vols crear algunes regles especials per a un sol element i potser vols assegurar-te que no s’apliquen a altres coses.</p> + +<h2 id="Aplicar_estil_en_funció_de_la_ubicació_en_un_document">Aplicar estil en funció de la ubicació en un document</h2> + +<p>Hi ha vegades que voldràs que alguna cosa sembli diferent segons el lloc en què es troba dins el document. Hi ha diversos selectors que poden ajudar en aquesta situació, però ara per ara només ens fixarem en un parell. Al nostre document hi ha dos elements <code><em></code>: un dins d’un paràgraf i l’altre dins d’una llista. Per a seleccionar només un <code><em></code> que estigui situat dins d'un element <code><li></code>, pots utilitzar un selector anomenat <strong>combinador de descendents</strong>, que simplement pren la forma d'un espai entre dos altres selectors.</p> + +<p>Afegeix la regla següent al teu full d’estil.</p> + +<pre class="brush: css notranslate">li em { + color: rebeccapurple; +}</pre> + +<p>Aquest selector seleccionarà qualsevol element <code><em></code> que es trobi dins un (descendent de) <code><li></code>. Per tant, al document d’exemple, hauries de trobar que el <code><em></code> de l’element de la tercera llista és morat, però el que hi ha dins del paràgraf no canvia.</p> + +<p>Una altra cosa que potser t'agradaria provar és aplicar estil a un paràgraf que surt immediatament després d'un títol d’encapçalament del mateix nivell de jerarquia de l'HTML. Per fer-ho, col·loca un <code>+</code> (un <strong>combinador de germans adjacents</strong>) entre els selectors.</p> + +<p>Prova d'afegir aquesta regla al teu full d'estil, també:</p> + +<pre class="brush: css notranslate">h1 + p { + font-size: 200%; +}</pre> + +<p>L'exemple en directe següent inclou les dues regles anteriors. Prova d'afegir una regla perquè un element <code>span</code> es mostri de color vermell si és dins d'un element paràgraf. Sabràs que ho has fet bé si element <code>span</code> del primer paràgraf és vermell, però el que apareix al primer element de llista no canvia de color.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Com pots veure, el CSS ens ofereix diverses maneres de seleccionar elements, i fins ara només n’hem gratat la superfície! Analitzarem amb detall tots aquests selectors i molts més en els nostres articles sobre <a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS">selectors</a> que trobaràs més endavant en el curs.</p> +</div> + +<h2 id="Aplicar_estil_en_funció_de_l’estat">Aplicar estil en funció de l’estat</h2> + +<p>El darrer tipus d’aplicació d’estil que analitzarem en aquest article és la capacitat d’aplicar estil a les coses en funció del seu estat. Un exemple senzill d’això són els enllaços. Quan dissenyem un enllaç, hem de seleccionar l’element <code><a href="/en-US/docs/Web/HTML/Element/a"><a></a></code> (<em>anchor</em>). Això té diferents estats en funció de si no s’ha visitat, s’ha visitat, s’hi passa pel damunt, se selecciona amb el teclat o s'hi fa clic (s’activa). Pots fer servir el CSS per a dirigir-te a aquests estats diferents: el CSS que trobaràs a continuació estableix els enllaços no visitats en rosa, i els visitats en verd.</p> + +<pre class="brush: css line-numbers language-css notranslate"><code class="language-css"><span class="selector token">a<span class="pseudo-class token">:link</span></span> <span class="punctuation token">{</span> + <span class="property token">color</span><span class="punctuation token">:</span> pink<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token">a<span class="pseudo-class token">:visited</span></span> <span class="punctuation token">{</span> + <span class="property token">color</span><span class="punctuation token">:</span> green<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<p>Pots canviar l'aparença de l'enllaç quan l'usuari hi col·loca el punter a sobre, per exemple, eliminar-ne el subratllat, que s'aconsegueix amb la regla següent:</p> + +<pre class="brush: css line-numbers language-css notranslate"><code class="language-css"><span class="selector token">a<span class="pseudo-class token">:hover</span></span> <span class="punctuation token">{</span> + <span class="property token">text-decoration</span><span class="punctuation token">:</span> none<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<p>A l’exemple en directe següent pots jugar amb diferents valors per als diversos estats d’un enllaç. Hi hem afegit les regles anteriors, i ens adonem que el color rosa és força clar i difícil de llegir; per què no el canviem per un color que vagi més bé? Es poden posar els enllaços en negreta?</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} </p> + +<p>Hem eliminat el subratllat del nostre enllaç quan s’hi passa el punter del ratolí per sobre. Pots eliminar el subratllat de tots els estats d’un enllaç. Val la pena recordar, però, que en un lloc web real, vols que els visitants sàpiguen que un enllaç és un enllaç. Deixar el subratllat a lloc pot ser una pista important perquè la gent s’adoni que pot fer clic en un text dins d’un paràgraf; aquest és el comportament al qual estan acostumats. Com tot en CSS, amb els canvis es pot fer que el document sigui menys accessible; tractarem de posar en evidència els entrebancs potencials en els llocs adequats.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: sovint veuràs que en aquests articles i en l’MDN es menciona <a href="/ca/docs/Learn/Accessibility">l'accessibilitat</a>. Quan parlem d’accessibilitat ens referim al requisit que les nostres pàgines web siguin comprensibles i utilitzables per tothom.</p> + +<p>El teu visitant pot entrar a la pàgina web des d'un ordinador amb un ratolí o un <em>trackpad</em>, o des d’un telèfon amb pantalla tàctil. O potser utilitza un lector de pantalla que llegeix el contingut del document; o necessita utilitzar una mida de lletra del text molt més gran; o bé navega pel lloc web només amb el teclat.</p> + +<p>Un document HTML senzill és en general accessible per a tothom, i a l'hora d’aplicar estil a aquest document, és important que no el facis menys accessible.</p> +</div> + +<h2 id="Combinar_selectors_i_combinadors">Combinar selectors i combinadors</h2> + +<p>Val la pena assenyalar que pots combinar diversos selectors i combinadors. Per exemple:</p> + +<pre class="brush: css notranslate">/* selecciona qualsevol <span> que estigui dins d'un <p>, que està dins d'un <article> */ +article p span { ... } + +/* Selecciona qualsevol <p> que vagi directament després d'un <ul>, que vagi directament després d'un <h1> */ +h1 + ul + p { ... }</pre> + +<p>També pots combinar diversos tipus. Intenta afegir el següent al teu codi:</p> + +<pre class="brush: css notranslate">body h1 + p .special { + color: yellow; + background-color: black; + padding: 5px; +}</pre> + +<p>Aplicarà estil a qualsevol element amb una classe <code>special</code> que es trobi dins d’un element <code><p></code>, que vingui just després d’un element <code><h1></code>> que es trobi dins del <code><body></code>. Uf!</p> + +<p>A l'HTML original que t’hem proporcionat, l'únic element amb estil és <code><span class="special"></code>.</p> + +<p>No et preocupis si et sembla complicat en aquest moment, començaràs a entendre-ho ben aviat de seguida que treballis més amb el CSS.</p> + +<h2 id="Tancant">Tancant</h2> + +<p>En aquest tutorial hem analitzat diverses maneres d’aplicar estil a un document amb CSS. Anirem desenvolupant aquests coneixements a mesura que avancem amb la resta d'articles. Tanmateix, ja en coneixes prou per a aplicar estil al text, aplicar CSS a partir de diferents maneres de seleccionar els elements del document i cercar propietats i valors en la documentació MDN.</p> + +<p>Al proper article analitzarem com s’estructura el CSS.</p> + +<p>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</p> + +<h2 id="En_aquest_mòdul">En aquest mòdul</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">Què és el CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">Primers passos amb el CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">Com s'estructura el CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">Com funciona el CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Aplica els teus nous coneixements</a></li> +</ol> diff --git a/files/ca/learn/css/first_steps/com_estructurar_el_css/index.html b/files/ca/learn/css/first_steps/com_estructurar_el_css/index.html new file mode 100644 index 0000000000..6c216af68c --- /dev/null +++ b/files/ca/learn/css/first_steps/com_estructurar_el_css/index.html @@ -0,0 +1,512 @@ +--- +title: Com estructurar el CSS +slug: Learn/CSS/First_steps/Com_estructurar_el_CSS +translation_of: Learn/CSS/First_steps/How_CSS_is_structured +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</div> + +<p class="summary">Ara que tens una idea sobre què és el CSS i les bases de com fer-lo servir, és hora d’aprofundir una mica més en l’estructura pròpia del llenguatge. Ja hem vist molts dels conceptes que s'esmenten en aquest article; pots recapitular si t’entrebanques amb els conceptes que et trobes a partir d’ara.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisits:</th> + <td>Coneixements bàsics d'informàtica, tenir el <a href="/ca/docs/Learn/Getting_started_with_the_web/Instal·lació_bàsica_programari">programari bàsic instal·lat</a>, coneixements bàsics de com <a href="/ca/docs/Learn/Getting_started_with_the_web/Tractar_amb_arxius">treballar amb fitxers</a> i d'HTML (mira <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a>) i nocions de <a href="/ca/docs/Learn/CSS/First_steps/Com_funciona_el_CSS">com funciona el CSS</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Aprendre amb detall les estructures de sintaxi fonamentals del CSS.</td> + </tr> + </tbody> +</table> + +<h2 id="Aplicar_CSS_a_lHTML">Aplicar CSS a l'HTML</h2> + +<p>El primer que analitzarem són els tres mètodes d’aplicació del CSS a un document.</p> + +<h3 id="Fulls_d’estils_externs">Fulls d’estils externs</h3> + +<p>En l’article <a href="/ca/docs/Learn/CSS/First_steps/Com_començar_amb_CSS">Primers passos amb el CSS</a> hem enllaçat un full d’estil extern a la nostra pàgina. Aquest és el mètode més comú i útil d’adjuntar CSS a un document perquè pots enllaçar el CSS a diverses pàgines, cosa que et permet d’aplicar-hi estil a totes amb el mateix full d’estil. En la majoria dels casos, les diverses pàgines d’un lloc web presentaran un aspecte molt semblant i, per tant, pots utilitzar el mateix conjunt de regles per a la presentació bàsica.</p> + +<p>Un full d’estil extern és quan el CSS està escrit en un fitxer independent amb l’extensió <code>.css</code> i s'hi fa referència des d’un element HTML <code><link></code>:</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>El meu experiment amb CSS</title> + <link rel="stylesheet" href="styles.css"> + </head> + <body> + <h1>Hola món!</h1> + <p>Aquest és el meu primer exemple amb CSS</p> + </body> +</html></pre> + +<p>El fitxer CSS podria presentar un aspecte així:</p> + +<pre class="brush: css notranslate">h1 { + color: blue; + background-color: yellow; + border: 1px solid black; +} + +p { + color: red; +}</pre> + +<p>L'atribut <code>href</code> de l'element {{htmlelement ("link")}} necessita fer referència a un fitxer del sistema de fitxers.</p> + +<p>A l'exemple anterior, el fitxer CSS es troba a la mateixa carpeta que el document HTML, però el pots col·locar en un altre lloc i ajustar la ruta especificada per a adaptar-s’hi, per exemple:</p> + +<pre class="brush: html notranslate"><!-- Dins d’un subdirector anomenat styles dins del directori actual --> +<link rel="stylesheet" href="styles/style.css"> + +<!-- Dins d’un subdirector anomenat general, que es troba en un subdirector anomenat styles, dins del directori actual --> +<link rel="stylesheet" href="styles/general/style.css"> + +<!-- Puja un nivell de directori i, a continuació, a un subdirector anomenat styles --> +<link rel="stylesheet" href="../styles/style.css"></pre> + +<h3 id="Fulls_d’estil_interns">Fulls d’estil interns</h3> + +<p>Un full d’estil intern és on no hi ha cap fitxer CSS extern, sinó que el CSS se situa dins d’un element {{htmlelement("style")}} que hi ha dins de l’HTML {{htmlelement("head")}}.</p> + +<p>Així doncs, l’HTML quedaria així:</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>El meu experiment amb CSS</title> + <style> + h1 { + color: blue; + background-color: yellow; + border: 1px solid black; + } + + p { + color: red; + } + </style> + </head> + <body> + <h1>Hola món!</h1> + <p>Aquest és el meu primer exemple amb CSS</p> + </body> +</html></pre> + +<p>Això pot ser útil en algunes circumstàncies (potser treballes amb un sistema de gestió de continguts en què no pots modificar els fitxers CSS directament), però no és tan eficient com els fulls d'estil externs; en un lloc web, el CSS s'hauria de canviar individualment a cada pàgina i actualitzar-se en diversos llocs si s’hi haguessin de fer canvis.</p> + +<h3 id="Estils_en_línia">Estils en línia</h3> + +<p>Els estils en línia són declaracions CSS que afecten només un element, que està contingut dins d'un atribut <code>style</code>:</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>El meu experiment amb CSS </title> + </head> + <body> + <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hola món!</h1> + <p style="color:red;">Aquest és el meu primer exemple amb CSS</p> + </body> +</html></pre> + +<p><strong>Si et plau, no ho facis!, tret que realment ho hagis de fer.</strong> És molt dolent per al manteniment (potser hauràs d’actualitzar la mateixa informació diverses vegades per cada document) i també barreges la informació de presentació del CSS amb la informació d’estructuració de l’HTML, i dificultes la llegibilitat i comprensió del codi. Mantenir diferents tipus de codificació separats permet una feina molt més fàcil a tots aquells que treballen en el codi.</p> + +<p>Hi ha llocs web en què els estils en línia són més comuns, o fins i tot recomanables. Pot ser que hagis de recórrer a utilitzar-los si el teu entorn de treball és molt restrictiu (potser el teu CMS només et permet editar el cos de l'HTML). També veuràs que s’utilitzen molt al correu electrònic per a obtenir compatibilitat amb tants clients de correu electrònic com sigui possible.</p> + +<h2 id="Jugar_amb_el_CSS_en_aquest_article">Jugar amb el CSS en aquest article</h2> + +<p>En aquest article hi ha molt de CSS. Per fer-ho, et recomanem que creïs un directori/carpeta al teu ordinador i, a dins, hi creïs una còpia dels dos fitxers següents:</p> + +<p><strong>index.html:</strong></p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html lang="ca"> + <head> + <meta charset="utf-8"> + <title>El meu experiment amb CSS</title> + <link rel="stylesheet" href="styles.css"> + </head> + <body> + + <p>Crea el teu HTML de prova aquí</p> + + </body> +</html></pre> + +<p><strong>styles.css:</strong></p> + +<pre class="brush: css notranslate">/* Crea el teu CSS de prova aquí */ + +p { + color: red; +}</pre> + +<p>Aleshores, quan vulguis experimentar amb un CSS, substitueix el contingut del <code><body></code> de l’HTML per un altre HTML, i comença per afegir el codi CSS per a donar-hi estil dins del fitxer CSS.</p> + +<p>Si no utilitzes un sistema amb què puguis crear fitxers fàcilment, pots utilitzar l'editor interactiu següent per experimentar.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 800)}}</p> + +<p>Continua i diverteix-te!</p> + +<h2 id="Selectors">Selectors</h2> + +<p>No es pot parlar de CSS sense parlar de selectors, i ja n'hem descobert diversos tipus al tutorial de <a href="/ca/docs/Learn/CSS/First_steps/Com_començar_amb_CSS">Primers passos amb el CSS</a>. Un selector és la manera amb què seleccionem alguna cosa del document HTML per a aplicar-hi estils. Si els teus estils no s’apliquen, és probable que el selector no coincideixi amb el que creus que hauria de coincidir.</p> + +<p>Cada regla CSS comença amb un selector o una llista de selectors que indica al navegador a quin element o elements han d’aplicar-se les regles. Totes les mostres següents són exemples de selectors o llistes de selectors vàlids.</p> + +<pre class="brush: css notranslate">h1 +a:link +.manythings +#onething +* +.box p +.box p:first-child +h1, h2, .intro</pre> + +<p><strong>Prova de crear algunes regles CSS que utilitzin els selectors anteriors i algun codi HTML al qual aplicar-hi els estils. Si no saps què significa alguna de les sintaxis anterior, prova de buscar-la a MDN.</strong></p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Aprendràs molt més sobre els selectors als nostres tutorials <a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS">Selectors CSS</a>, al mòdul següent.</p> +</div> + +<h3 id="Especificitat">Especificitat</h3> + +<p>Sovint hi haurà escenaris en què dos selectors podrien seleccionar el mateix element HTML. Considera el full d’estil següent, en què hi ha una regla amb un selector <code>p</code> que mostrarà els paràgrafs de color blau, i també una classe que mostrarà els elements seleccionats de color vermell.</p> + +<pre class="brush: css notranslate">.special { + color: red; +} + +p { + color: blue; +}</pre> + +<p>Diguem que al document HTML hi ha un paràgraf amb una classe <code>special</code>. Totes dues regles es podrien aplicar; quina guanyaria? De quin color creus que es veurà el nostre paràgraf?</p> + +<pre class="brush: html notranslate"><p class="special">De quin color sóc?</p></pre> + +<p>El llenguatge CSS té regles per a controlar quina regla guanyarà en cas de collisió; s'anomenen <strong>cascada</strong> i <strong>especificitat</strong>. Al bloc de codi següent hem definit dues regles per al selector <code>p</code>, però el paràgraf acaba sent de color blau. Això és perquè la declaració que hauria de fer que es veiés de color blau apareix més tard al full d’estil, i els estils posteriors anul·len els anteriors. És la cascada en acció.</p> + +<pre class="brush: css notranslate">p { + color: red; +} + +p { + color: blue; +}</pre> + +<p>Tanmateix, en el cas del nostre exemple anterior, amb el selector de classes i el selector d’elements, la classe guanya, i el paràgraf es veu de color vermell, encara que apareix abans en el full d’estil. Es diu que una classe és més específica, o té més especificitat, que un selector d’elements, de manera que guanya.</p> + +<p><strong>Prova l'experiment anterior: afegeix el codi HTML al teu experiment i, a continuació, afegeix les dues regles <code>p { ... }</code> al teu full d'estil. A continuació, canvia el primer selector de <code>p</code> per <code>.special</code> i observa com canvia l’estil.</strong></p> + +<p>Les regles d’especificitat i cascada poden semblar una mica complicades al principi, però són més fàcils d’entendre a mesura que s'avança amb el CSS. A l'article <a href="/ca/docs/Learn/CSS/Building_blocks/Cascada_i_herència">Cascada i herència</a>, al qual accediràs al mòdul següent, s'explica amb més detall, entre altres coses, la manera de calcular l’especificitat. Ara per ara, només has de recordar que existeix, i que és possible que de vegades el CSS no s'apliqui tal com esperes perquè alguna cosa del full d'estil té una especificitat més alta. Identificar que hi ha més d'una regla que pot aplicar-se a un element és el primer pas per a solucionar aquests problemes.</p> + +<h2 id="Propietats_i_valors">Propietats i valors</h2> + +<p>El CSS consta de dos blocs de construcció bàsics:</p> + +<ul> + <li><strong>Propietats</strong>: Són identificadors que indiquen quines són les característiques d’estil (per exemple, <code><a href="/en-US/docs/Web/CSS/font-size">font-size</a></code>, <code><a href="/en-US/docs/Web/CSS/width">width</a></code> o <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code>) que es volen canviar.</li> + <li><strong>Valors</strong>: Cada propietat especificada rep un valor, que indica com vols canviar aquestes característiques d’estil (per exemple, quin tipus de lletra, l'amplada o el color de fons que vols).</li> +</ul> + +<p>En la imatge següent es ressalten una sola propietat i el seu valor. El nom de la propietat és <code>color</code> i el valor <code>blue</code>.</p> + +<p><img alt="Una declaració del CSS ressaltada" src="https://mdn.mozillademos.org/files/16498/declaration.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p> + +<p>Una propietat emparellada amb un valor s'anomena <em>declaració CSS</em>. Les declaracions CSS es posen dins dels <em>blocs de declaració CSS</em>. Aquesta imatge següent mostra el nostre CSS amb el bloc de declaracions ressaltat.</p> + +<p><img alt="Un bloc de declaracions ressaltat" src="https://mdn.mozillademos.org/files/16499/declaration-block.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p> + +<p>Finalment, els blocs de declaració CSS es combinen amb <em>selectors</em> per a produir <em>conjunts de regles CSS</em> (o <em>regles CSS</em>). La nostra imatge conté dues regles, una per al selector <code>h1</code> i una altra per al selector <code>p</code>. La regla per a <code>h1</code> està ressaltada.</p> + +<p><img alt="La regla per a h1 està ressaltada" src="https://mdn.mozillademos.org/files/16500/rules.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p> + +<p>Definir propietats CSS amb valors específics és la funció principal del llenguatge CSS. El motor CSS calcula quines declaracions s’apliquen a cada element d’una pàgina per tal de definir-la i donar-hi l’estil adequat.</p> + +<div class="blockIndicator warning"> +<p><strong>Important:</strong> Les propietats i valors de CSS són sensibles a majúscules i minúscules. Cada parella de propietat i valor es separa per un dos punts (:).</p> +</div> + +<p><strong>Prova de cercar diferents valors de les propietats següents i escriu regles CSS que s’apliquin a diferents elements HTML: </strong></p> + +<ul> + <li><strong>{{cssxref("font-size")}}</strong></li> + <li><strong>{{cssxref("width")}}</strong></li> + <li><strong>{{cssxref("background-color")}}</strong></li> + <li><strong>{{cssxref("color")}}</strong></li> + <li><strong>{{cssxref("border")}}</strong></li> +</ul> + +<div class="warning"> +<p><strong>Important</strong>: Si una propietat és desconeguda o si un valor no és vàlid per a una propietat determinada, es considera que la declaració no és vàlida i el motor CSS del navegador la ignora completament.</p> +</div> + +<div class="warning"> +<p><strong>Important</strong>: En CSS (i altres estàndards web) s'ha acceptat l'ortografia nord-americana com a estàndard per a resoldre la incertesa lingüística. Per exemple, la propietat <code>color</code> <em>sempre</em> s'ha d'escriure <code>color</code>. Si n’escrivim la versió britànica <code>colour</code>, no funcionarà.</p> +</div> + +<h3 id="Funcions">Funcions</h3> + +<p>Si bé la majoria dels valors són paraules clau o valors numèrics relativament simples, hi ha alguns valors que prenen la forma d’una funció. Un exemple seria la funció <code>calc()</code>. Aquesta funció permet fer operacions matemàtiques senzilles des del CSS, per exemple:</p> + +<div id="calc_example"> +<pre class="brush: html notranslate"><div class="outer"><div class="box">la caixa interior és de 90% - 30px.</div></div></pre> + +<pre class="brush: css notranslate">.outer { + border: 5px solid black; +} + +.box { + padding: 10px; + width: calc(90% - 30px); + background-color: rebeccapurple; + color: white; +}</pre> +</div> + +<p>Això es presenta així:</p> + +<p>{{EmbedLiveSample('calc_example', '100%', 200)}}</p> + +<p>Una funció consisteix en el nom de la funció i, a continuació, uns parèntesis entre els quals es col·loquen els valors permesos per a aquesta funció. En el cas de l'exemple <code>calc()</code> anterior, volem que l'amplada d'aquesta caixa sigui el 90% de l'amplada del bloc que la conté, menys 30 píxels. No és un valor que es pugui calcular d’antuvi i senzillament introduir-lo en el CSS corresponent, perquè no sabem quin serà aquest 90%. Com en tots els valors, en la pàgina corresponent de MDN hi ha exemples d’ús perquè puguis veure com funciona aquesta funció.</p> + +<p>Un altre exemple serien els diversos valors de {{cssxref("transform")}}, com ara <code>rotate()</code>.</p> + +<div id="transform_example"> +<pre class="brush: html notranslate"><div class="box"></div></pre> + +<pre class="brush: css notranslate">.box { + margin: 30px; + width: 100px; + height: 100px; + background-color: rebeccapurple; + transform: rotate(0.8turn) +}</pre> +</div> + +<p>La sortida del codi anterior és la següent:</p> + +<p>{{EmbedLiveSample('transform_example', '100%', 200)}}</p> + +<p><strong>Prova de cercar diferents valors de les propietats següents i escriu regles CSS que s’apliquin a diferents elements HTML: </strong></p> + +<ul> + <li><strong>{{cssxref("transform")}}</strong></li> + <li><strong>{{cssxref("background-image")}}, en particular valors de gradient</strong></li> + <li><strong>{{cssxref("color")}}, en particular els valors rgb/rgba/hsl/hsla</strong></li> +</ul> + +<h2 id="rules">@rules</h2> + +<p>Les <code><a href="/ca/docs/Web/CSS/At-rule">@rules</a></code> (llegit «at-rules», en anglès) proporcionen instruccions sobre com ha de comportar-se el CSS, o quin CSS s'ha d'aplicar. Algunes <code>@rules</code> són senzilles i es formen només amb el nom de la regla i el valor. Per exemple, per a importar un full d’estil addicional al teu full d’estil CSS principal, pots utilitzar <code>@import</code>:</p> + +<pre class="brush: css notranslate">@import 'styles2.css';</pre> + +<p>Una de les <code>@rules</code> més comunes que trobaràs és <code>@media</code>, que et permet crear <a href="/en-US/docs/Web/CSS/Media_Queries">consultes a mèdia (o media queries, en anglès)</a> per a aplicar CSS només quan determinades condicions són certes (per exemple, quan la resolució de la pantalla està per sobre d’una quantitat determinada, o la pantalla és més ampla que una certa amplada).</p> + +<p>Al CSS següent hi ha un full d’estil que dona a l’element <code><body></code> un color de fons rosat. Tot i això, després utilitzem <code>@media</code> per a crear una secció al nostre full d’estil que només s’aplicarà als navegadors amb una visualització més ampla de 30em. Si el navegador és més ample de 30em, el color de fons serà blau.</p> + +<pre class="brush: css notranslate">body { + background-color: pink; +} + +@media (min-width: 30em) { + body { + background-color: blue; + } +}</pre> + +<p>Trobaràs altres <code>@rules</code> al llarg d’aquests tutorials.</p> + +<p><strong>Prova d’afegir una consulta a un mèdia al teu CSS que canviï els estils en funció de l’amplada de la visualització. Canvia l'amplada de la finestra del navegador per veure’n el resultat.</strong></p> + +<h2 id="Propietats_abreviades">Propietats abreviades</h2> + +<p>Algunes propietats com {{cssxref ("font")}}, {{cssxref ("background")}}, {{cssxref ("padding")}}, {{cssxref ("border")}} i {{cssxref ("margin")}} s’anomenen <strong>propietats abreviades</strong>: això és perquè permeten establir diversos valors de propietat en una sola línia, que estalvia temps i aconsegueix que el codi es vegi més net.</p> + +<p>Per exemple, aquesta línia:</p> + +<pre class="brush: css notranslate">/* En les propietats abreviades de 4 valors, com ara margin i padding, s'apliquen els valors + a la part superior, dreta, inferior, esquerra (en sentit horari des de la part superior). També hi ha altres + propietats abreviades, per exemple les propietats abreviades de 2 valors, que estableixen una àrea de farciment/marge + a la part superior/inferior, a l'esquerra/a la dreta */ +padding: 10px 15px 15px 5px;</pre> + +<p>Fa el mateix que totes aquestes juntes:</p> + +<pre class="brush: css notranslate">padding-top: 10px; +padding-right: 15px; +padding-bottom: 15px; +padding-left: 5px;</pre> + +<p>Mentre que aquesta línia:</p> + +<pre class="brush: css notranslate">background: red url(bg-graphic.png) 10px 10px repeat-x fixed;</pre> + +<p>Fa el mateix que totes aquestes juntes:</p> + +<pre class="brush: css notranslate">background-color: red; +background-image: url(bg-graphic.png); +background-position: 10px 10px; +background-repeat: repeat-x; +background-scroll: fixed;</pre> + +<p>No intentarem ensenyar-les de manera exhaustiva ara; trobaràs molts exemples més endavant en el curs i et recomanem que cerquis més noms de propietats abreviades clau a les nostres <a href="/ca/docs/Web/CSS/Referéncia_CSS">referències CSS</a> per a obtenir-ne més informació.</p> + +<p><strong>Prova d’afegir les declaracions anteriors al teu CSS per veure com afecta a l’estil del teu HTML. Prova d’experimentar amb valors diferents.</strong></p> + +<div class="blockIndicator warning"> +<p><strong>Atenció</strong>: Mentre que les propietats abreviades sovint et permeten ometre els valors, després restabliran els valors que no incloguis als seus valors inicials. D’aquesta manera es garanteix l’ús d’un conjunt de valors coherent. Però et pot confondre si esperes que la propietat abreviada només canviï els valors que has marcat.</p> +</div> + +<h2 id="Comentaris">Comentaris</h2> + +<p>De la mateixa manera que amb l’HTML, et convidem a posar comentaris al teu CSS per a ajudar-te a comprendre com funciona el teu codi en tornar-hi al cap d’uns mesos, i per a ajudar altres que treballin sobre aquest codi.</p> + +<p>Els comentaris en CSS comencen amb <code>/*</code> i acaben amb <code>*/</code>. Al bloc de codi següent hem utilitzat comentaris per marcar l'inici de diverses seccions de codi diferents. És útil per a ajudar-te a orientar-te pel codi a mesura que n’augmenta l’extensió. Cerca els comentaris al teu editor de codi.</p> + +<pre class="brush: css notranslate">/* Manejar una aplicació d’estil als elements bàsics */ +/* -------------------------------------------------------------------------------------------- */ +body { + font: 1em/150% Helvetica, Arial, sans-serif; + padding: 1em; + margin: 0 auto; + max-width: 33em; +} + +@media (min-width: 70em) { + /* Posem en cas especial la mida del tipus de lletra general. En una pantalla gran o en una finestra, + augmentem la mida de la lletra per a facilitar la lectura */ + body { + font-size: 130%; + } +} + +h1 {font-size: 1.5em;} + +/* Manejar elements específics que es troben al DOM */ +/* -------------------------------------------------------------------------------------------- */ +div p, #id:first-line { + background-color: red; + border-radius: 3px; +} + +div p { + margin: 0; + padding: 1em; +} + +div p + p { + padding-top: 0; +}</pre> + +<p>Els comentaris també són útils <em>per a inhabilitar</em> temporalment algunes parts del codi amb finalitats de prova, per exemple, si intentes trobar quina part del teu codi causa un error. A l’exemple següent hem «comentat» (posat com a comentaris) les regles per al selector <code>.special</code>.</p> + +<pre class="brush: css notranslate">/*.special { + color: red; +}*/ + +p { + color: blue; +}</pre> + +<p><strong>Afegeix alguns comentaris al teu CSS per acostumar-te a utilitzar-los.</strong></p> + +<h2 id="Espais_en_blanc">Espais en blanc</h2> + +<p>Els espais en blanc són els espais, els sagnats de text i les línies noves. De la mateixa manera que en l’HTML, el navegador ignora els espais en blanc del teu CSS. El valor dels espais en blanc està en que són molt útils per a millorar la llegibilitat.</p> + +<p>En l'exemple que trobaràs a continuació, cada declaració (i inici/final de regla) és en una línia de text pròpia. Probablement és una bona manera d’escriure el CSS, perquè fa que sigui fàcil de mantenir i d'entendre:</p> + +<pre class="brush: css notranslate">body { + font: 1em/150% Helvetica, Arial, sans-serif; + padding: 1em; + margin: 0 auto; + max-width: 33em; +} + +@media (min-width: 70em) { + body { + font-size: 130%; + } +} + +h1 { + font-size: 1.5em; +} + +div p, +#id:first-line { + background-color: red; + border-radius: 3px; +} + +div p { + margin: 0; + padding: 1em; +} + +div p + p { + padding-top: 0; +} +</pre> + +<p id="Very_compact">Podries escriure exactament el mateix CSS de la manera següent, eliminant-ne la majoria d’espais en blanc. Aquest codi és funcionalment idèntic al del primer exemple, però segur que estàs d’acord que és una mica més feixuc de llegir:</p> + +<pre class="brush: css notranslate">body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;} +@media (min-width: 70em) { body {font-size: 130%;} } + +h1 {font-size: 1.5em;} + +div p, #id:first-line {background-color: red; border-radius: 3px;} +div p {margin: 0; padding: 1em;} +div p + p {padding-top: 0;} +</pre> + +<p>La disposició del codi que tries sol ser una preferència personal, tot i que quan comences a treballar en equip, és possible que trobis que l’equip té la seva guia d’estil pròpia que especifica una convenció acordada a seguir.</p> + +<div class="blockIndicator warning"> +<p><strong>Important:</strong> Has de tenir cura amb l’espai en blanc que hi ha d’haver entre una propietat del CSS i el seu valor.</p> +</div> + +<p>Per exemple, les declaracions següents són vàlides en CSS:</p> + +<pre class="brush: css notranslate">margin: 0 auto; +padding-left: 10px;</pre> + +<p>Però les següents no són vàlids:</p> + +<pre class="brush: css notranslate">margin: 0auto; +padding- left: 10px;</pre> + +<p><code>Veus els errors d'espaiat? 0auto</code> no es reconeix com a valor vàlid per a la propietat <code>margin</code> (<code>0</code> i <code>auto</code> són dos valors separats), i el navegador no reconeix <code>padding-</code> com a propietat vàlida. El nom correcte de la propietat (<code>padding-left</code>) ha quedat separat per un espai perdut.</p> + +<p>Sempre t'has d'assegurar de separar valors diferenciats els uns dels altres com a mínim per un espai, però mantenir els noms de la propietat i els valors de propietat junts, com cadenes ininterrompudes.</p> + +<p><strong>Prova de jugar amb espais en blanc al teu CSS per veure què es trenca i què no.</strong></p> + +<h2 id="Què_segueix">Què segueix?</h2> + +<p>És útil entendre una mica com el navegador pren els teus codis HTML i CSS i els converteix en una pàgina web, així que en l’article següent, (<a href="/ca/docs/Learn/CSS/First_steps/Com_funciona_el_CSS">Com funciona el CSS</a>), donarem una ullada a aquest procés.</p> + +<p>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p> + +<h2 id="En_aquest_mòdul">En aquest mòdul</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">Què és el CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">Primers passos amb el CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">Com s'estructura el CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">Com funciona el CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Aplica els teus nous coneixements</a></li> +</ol> diff --git a/files/ca/learn/css/first_steps/com_funciona_el_css/index.html b/files/ca/learn/css/first_steps/com_funciona_el_css/index.html new file mode 100644 index 0000000000..9621d2c21c --- /dev/null +++ b/files/ca/learn/css/first_steps/com_funciona_el_css/index.html @@ -0,0 +1,156 @@ +--- +title: Com funciona el CSS +slug: Learn/CSS/First_steps/Com_funciona_el_CSS +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +<p>{{LearnSidebar}}<br> + {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p> + +<p class="summary">Hem après els conceptes bàsics de CSS, per a què serveix i com escriure fulls d'estil senzills. En aquest article veurem com un navegador pren els llenguatges CSS i HTML i els converteix en una pàgina web.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisits:</th> + <td>Coneixements bàsics d'informàtica, tenir el <a href="/ca/docs/Learn/Getting_started_with_the_web/Instal·lació_bàsica_programari">programari bàsic instal·lat</a>, coneixements bàsics de com <a href="/ca/docs/Learn/Getting_started_with_the_web/Tractar_amb_arxius">treballar amb fitxers</a> i d'HTML (mira <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a>).</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Entendre els conceptes bàsics de com el navegador analitza els llenguatges CSS i HTML i què passa quan un navegador troba un CSS que no entén.</td> + </tr> + </tbody> +</table> + +<h2 id="Com_funciona_realment_el_CSS">Com funciona realment el CSS?</h2> + +<p>Quan un navegador mostra un document, ha de combinar el contingut del document amb la informació d’estil. Processa el document en un seguit d'etapes, que enumerarem a continuació. Tingues present que aquesta és una versió molt simplificada de què passa quan un navegador carrega una pàgina web, i que els diversos navegadors gestionen el procés de maneres diferents. Però això és més o menys el que succeeix.</p> + +<ol> + <li>El navegador carrega el codi HTML (per exemple, el rep de la xarxa).</li> + <li>Converteix el codi {{Glossary("HTML")}} en un model d'objectes del document (<em>document object model</em> o {{Glossary("DOM")}}). El DOM representa el document a la memòria de l'ordinador. L’explicarem amb més detall en la secció següent.</li> + <li>El navegador recupera la majoria dels recursos als quals està vinculat el document HTML, com ara imatges i vídeos incrustats... i CSS enllaçats. El JavaScript es tracta una mica més endavant en el procés, i no en parlarem aquí per no embolicar les coses.</li> + <li>El navegador analitza el CSS recuperat i ordena les diferents regles segons els tipus de selector en diferents «cubetes». Per exemple: element, classe, ID, etc. A partir dels selectors que troba, calcula quines regles s’han d’aplicar als nodes del DOM i hi atribueix l’estil segons sigui necessari (aquest pas intermedi s’anomena <em>arbre de renderització</em>).</li> + <li>L'arbre de representació presenta l'estructura en què ha d'aparèixer després que s'apliquin les regles.</li> + <li>La presentació visual de la pàgina es mostra a la pantalla (aquesta etapa s’anomena <em>pintura</em>).</li> +</ol> + +<p>El diagrama següent ofereix una visió senzilla del procés.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11781/rendering.svg" style="height: auto; max-width: 635px; width: 100%;"></p> + +<h2 id="Sobre_el_DOM">Sobre el DOM</h2> + +<p>Un DOM té una estructura en forma d'arbre. Cada element, atribut i fragment de text del llenguatge de marcatge es converteix en un {{Glossary("Node/DOM","node DOM")}} en l'estructura de l'arbre. Els nodes es defineixen per la seva relació amb els altres nodes del DOM. Alguns elements són pares de nodes secundaris, i els nodes secundaris tenen nodes germans.</p> + +<p>Entendre el DOM t'ajuda a dissenyar, depurar i mantenir el teu CSS perquè el DOM és el lloc on es troba el CSS i el contingut del document. Quan comencis a treballar amb les eines DevTools (o eines del desenvolupador) del navegador, et desplaçaràs pel DOM mentre selecciones els elements per veure quines regles s'apliquen.</p> + +<h2 id="Una_representació_real_del_DOM">Una representació real del DOM</h2> + +<p>En lloc d’una llarga i avorrida explicació, vegem amb un exemple com un fragment HTML es converteix en un DOM.</p> + +<p>Prenguem el codi HTML següent:</p> + +<pre class="brush: html notranslate"><p> + Utilitzem: + <span>Fulls</span> + <span>d'estil</span> + <span>en cascada</span> +</p> +</pre> + +<p>En el DOM, el node que correspon al nostre element <code><p></code> és un element pare. Els nodes fills són un node de text i els tres nodes corresponen als elements <code><span></code>. Els nodes <code>SPAN</code> són també nodes <span style="background-color: #f5f6f5;">pare</span>, i tenen nodes de text com a nodes fill:</p> + +<pre class="notranslate">P +├─ "Utilitzem:" +├─ SPAN +| └─ "Fulls" +├─ SPAN +| └─ "d’estil" +└─ SPAN + └─ "en cascada" +</pre> + +<p>Així és com un navegador interpreta aquest fragment HTML: es confecciona l'arbre DOM anterior i el navegador el representa així:</p> + +<p>{{EmbedLiveSample('Una_representació_real_del_DOM', '100%', 55)}}</p> + +<div class="hidden"> +<pre class="brush: css notranslate">p {margin:0;}</pre> +</div> + +<h2 id="Aplicar_CSS_al_DOM">Aplicar CSS al DOM</h2> + +<p>Suposem que hem afegit una mica de codi CSS al nostre document per a donar-hi estil. Un cop més, l'HTML és el següent:</p> + +<pre class="brush: html notranslate"><p> + Utilitzem: + <span>Fulls</span> + <span>d'estil</span> + <span>en cascada</span> +</p></pre> + +<p>Suposem que hi apliquem el CSS següent:</p> + +<pre class="brush: css notranslate">span { + border: 1px solid black; + background-color: lime; +}</pre> + +<p>El navegador analitza el codi HTML i crea un DOM, i després analitza el CSS. Atès que l'única regla disponible en el CSS té un selector <code>span</code>, el navegador pot ordenar el CSS molt de pressa! Aplica aquesta regla a cadascun dels tres <code><span></code> i després pinta a la pantalla la representació visual final.</p> + +<p>La sortida actualitzada és la següent:</p> + +<p>{{EmbedLiveSample('Aplicar_CSS_al_DOM', '100%', 55)}}</p> + +<p>En el nostre article <a href="/ca/docs/Learn/CSS/Building_blocks/Depurar_el_CSS">Depurar el CSS</a> del mòdul següent, utilitzarem les eines DevTools del navegador per depurar problemes del CSS i coneixerem més sobre com l'interpreta el navegador.</p> + +<h2 id="Què_passa_si_un_navegador_es_troba_amb_CSS_que_no_entén">Què passa si un navegador es troba amb CSS que no entén?</h2> + +<p><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS#Browser_support">En un article anterior</a> hem esmentat que no tots els navegadors implementen el CSS al mateix temps. A més, molta gent no utilitza la versió més recent del navegador. Tenint en compte que el CSS està en desenvolupament constant i, per tant, va per davant del que els navegadors poden reconèixer, et podries preguntar què passa si un navegador troba un selector CSS o una declaració que no reconeix.</p> + +<p>La resposta és que no fa res i només passa a la declaració CSS següent.</p> + +<p>Si un navegador analitza les teves regles i troba una propietat o un valor que no entén, l'ignora i passa a la declaració següent. Ho fa si has comès un error i has escrit malament una propietat o un valor, o si la propietat o el valor són massa recents i el navegador encara no és compatible.</p> + +<p>De la mateixa manera, si un navegador troba un selector que no entén, ignora tota la regla i passa a la següent.</p> + +<p>En l’exemple següent hem utilitzat l’ortografia britànica per a la propietat del color, cosa que invalida aquesta propietat perquè no es reconeix. Per tant, el paràgraf no es veu de color blau. Tots els altres CSS s'han aplicat; només s’ignora la línia no vàlida.</p> + +<div id="Skipping_example"> +<pre class="brush: html notranslate"><p>Vull que aquest text sigui gran, en negreta i blau.</p></pre> + +<pre class="brush: css notranslate">p { + font-weight: bold; + colour: blue; /* Ortografia incorrecta de la propietat color */ + font-size: 200%; +}</pre> +</div> + +<p>{{EmbedLiveSample('Skipping_example', '100%', 200)}}</p> + +<p>Aquest comportament és molt útil. Significa que pots utilitzar el CSS nou com una millora, perquè no es produirà cap error si no s’entén: pot ser que el navegador entengui la funció nova, o que no l’entengui. Combinat amb el funcionament en cascada i el fet que els navegadors utilitzen l’últim CSS que es troben en un full d’estil quan hi ha dues regles amb la mateixa especificitat, també pots oferir alternatives per a navegadors que no admeten el CSS nou.</p> + +<p>Això funciona especialment bé quan vols fer servir un valor força nou i no és compatible amb tots els navegadors. Per exemple, alguns navegadors antics no admeten <code>calc()</code> com a valor. Podríem donar una amplada alternativa a una caixa en píxels i després donar una amplada amb un valor <code>calc()</code> de <code>100% - 50px</code>. Els navegadors antics faran servir la versió en píxels i ignoraran la línia sobre <code>calc()</code> perquè no l’entenen. Els navegadors nous interpretaran la línia amb píxels i després la substituiran per la línia amb <code>calc()</code>, perquè la línia apareix més tard en la cascada.</p> + +<pre class="brush: css notranslate">.box { + width: 500px; + width: calc(100% - 50px); +}</pre> + +<p>En articles posteriors analitzarem moltes maneres més de donar compatibilitat a diferents navegadors.</p> + +<h2 id="Per_acabar">Per acabar</h2> + +<p>Ja has acabat aquest mòdul; només hi ha una cosa més per fer. En l’article següent faràs servir els teus nous coneixements per a canviar el disseny d'un exemple i provar una mica de codi CSS en el procés.</p> + +<p>{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p> + +<h2 id="En_aquest_mòdul">En aquest mòdul</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">Què és el CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">Primers passos amb el CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">Com s'estructura el CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">Com funciona el CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Aplica els teus nous coneixements</a></li> +</ol> diff --git a/files/ca/learn/css/first_steps/index.html b/files/ca/learn/css/first_steps/index.html new file mode 100644 index 0000000000..a3a11678a2 --- /dev/null +++ b/files/ca/learn/css/first_steps/index.html @@ -0,0 +1,55 @@ +--- +title: CSS first steps +slug: Learn/CSS/First_steps +tags: + - Beginner + - CSS + - Landing + - Learn + - Module + - NeedsTranslation + - TopicStub + - first steps +translation_of: Learn/CSS/First_steps +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">CSS (Cascading Style Sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. This module provides a gentle beginning to your path towards CSS mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to HTML.</p> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>Before starting this module, you should have:</p> + +<ol> + <li>Basic familiarity with using computers, and using the Web passively (i.e. looking at it, consuming the content.)</li> + <li>A basic work environment set up as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, and an understanding of how to create and manage files, as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a>.</li> + <li>Basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com/">Glitch</a>.</p> +</div> + +<h2 id="Guides">Guides</h2> + +<p>This module contains the following articles, which will take you through all the basic theory of CSS, and provide opportunities for you to test out some skills.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">What is CSS?</a></dt> + <dd><strong>{{Glossary("CSS")}}</strong> (Cascading Style Sheets) allows you to create great-looking web pages, but how does it work under the hood? This article explains what CSS is, with a simple syntax example, and also covers some key terms about the language.</dd> + <dt><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">Getting started with CSS</a></dt> + <dd>In this article we will take a simple HTML document and apply CSS to it, learning some practical things about the language along the way.</dd> + <dt><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">How CSS is structured</a></dt> + <dd>Now that you have an idea about what CSS is and the basics of using it, it is time to look a little deeper into the structure of the language itself. We have already met many of the concepts discussed here; you can return to this one to recap if you find any later concepts confusing.</dd> + <dt><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">How CSS works</a></dt> + <dd>We have learned the basics of CSS, what it is for and how to write simple stylesheets. In this lesson we will take a look at how a browser takes CSS and HTML and turns that into a webpage.</dd> + <dt><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Using your new knowledge</a></dt> + <dd>With the things you have learned in the last few lessons you should find that you can format simple text documents using CSS, to add your own style to them. This article gives you a chance to do that.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="https://teach.mozilla.org/activities/intermediate-web-lit/">Intermediate Web Literacy 1: Intro to CSS</a></dt> + <dd>An excellent Mozilla foundation course that explores and tests a lot of the skills talked about in the <em>Introduction to CSS</em> module. Learn about styling HTML elements on a webpage, CSS selectors, attributes, and values.</dd> +</dl> diff --git a/files/ca/learn/css/first_steps/que_es_el_css/index.html b/files/ca/learn/css/first_steps/que_es_el_css/index.html new file mode 100644 index 0000000000..b158b8e62e --- /dev/null +++ b/files/ca/learn/css/first_steps/que_es_el_css/index.html @@ -0,0 +1,119 @@ +--- +title: Què és el CSS? +slug: Learn/CSS/First_steps/Que_es_el_CSS +translation_of: Learn/CSS/First_steps/What_is_CSS +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</div> + +<p class="summary">Els fulls d'estil en cascada (<strong>{{Glossary("CSS")}}</strong> o cascading style sheets) et permeten crear pàgines web atractives; però, com funcionen realment? Aquest article explica què és el CSS amb un exemple de sintaxi senzilla, i també inclou alguns termes clau sobre aquest llenguatge informàtic.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisits:</th> + <td>Coneixements bàsics d'informàtica, tenir el <a href="/ca/docs/Learn/Getting_started_with_the_web/Instal·lació_bàsica_programari">programari bàsic instal·lat</a>, coneixements bàsics de com <a href="/ca/docs/Learn/Getting_started_with_the_web/Tractar_amb_arxius">treballar amb fitxers</a> i amb HTML (mira <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a>).</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Aprendre què és el CSS.</td> + </tr> + </tbody> +</table> + +<p>Al mòdul <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a> exposem què és l’HTML i com s'utilitza per a etiquetar documents. Aquests documents es podran llegir en un navegador web. Els títols d’encapçalament es veuran més grans que el text normal, els paràgrafs començaran en una línia nova i estaran separats per un espai entre ells. Als enllaços se'ls dona color i es subratllen per a distingir-los de la resta del text. El que veus són els estils predeterminats del navegador: estils molt bàsics que el navegador aplica a l'HTML per a assegurar-se que es pot llegir, fins i tot si l'autor de la pàgina no especifica cap estil explícit.</p> + +<p><img alt="Els estils predeterminats que utilitza un navegador" src="https://mdn.mozillademos.org/files/16493/html-example.png" style="border: 1px solid #cccccc; height: 594px; width: 1385px;"></p> + +<p>No obstant això, Internet seria un lloc avorrit si tots els llocs web fossin així. Amb CSS pots controlar exactament com es veuen els elements HTML al navegador, i presentar el teu etiquetatge amb el disseny que t'agradi.</p> + +<h2 id="Per_a_què_serveix_el_CSS">Per a què serveix el CSS?</h2> + +<p>Com hem comentat anteriorment, el CSS és un llenguatge informàtic que especifica com es presenten els documents als usuaris, com se’ls aplica estil, s’elaboren, etc.</p> + +<p>Un <strong>document</strong> sol ser un fitxer de text estructurat que utilitza un llenguatge d’etiquetatge: {{Glossary("HTML")}} és el més comú, però també en pots trobar d'altres com ara {{Glossary("SVG")}} or {{Glossary("XML")}}.</p> + +<p><strong>Presentar</strong> un document a un usuari significa convertir-lo en una forma que el públic pugui fer servir. Els {{Glossary("browser","navegadors")}} com {{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}} o {{Glossary("Microsoft Edge","Edge")}} estan dissenyats per a presentar documents visualment, per exemple, en una pantalla d'ordinador, un projector o una impressora.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: De vegades, als navegadors se'ls anomena {{Glossary("User agent","agents d'usuari")}}, que significa bàsicament un programa informàtic que representa a una persona dins d'un sistema informàtic. Els navegadors són el principal tipus d’agent d’usuari en què pensem quan parlem de CSS, però no són l’únic. Hi ha altres agents d'usuari disponibles, com els que converteixen documents HTML i CSS en PDF per a imprimir.</p> +</div> + +<p>El CSS es pot fer servir per a dissenyar el text de documents molt bàsics, per exemple, per a canviar el <a href="/en-US/docs/Web/CSS/color_value">color</a> i la <a href="/en-US/docs/Web/CSS/font-size">mida de la lletra</a> dels títols i els enllaços. Es pot utilitzar per a donar disseny de la pàgina web; per exemple, convertir una sola columna de text en un disseny de pàgina amb una àrea de contingut principal i una barra lateral per a obtenir informació relacionada. Fins i tot es pot utilitzar per a efectes com <a href="/en-US/docs/Web/CSS/CSS_Animations">l’animació</a>. Consulta els enllaços d’aquest paràgraf per a obtenir exemples concrets.</p> + +<h2 id="La_sintaxi_CSS">La sintaxi CSS</h2> + +<p>El CSS és un llenguatge basat en regles: cada usuari defineix regles que especifiquen grups d’estils que s’han d’aplicar a determinats elements o grups d’elements de la teva pàgina web. Per exemple: «Vull que el títol d’encapçalament principal de la pàgina es vegi amb lletra gran i de color vermell».</p> + +<p>El codi següent mostra una regla CSS molt simple que aplicaria l'estil descrit al paràgraf anterior:</p> + +<pre class="brush: css notranslate">h1 { + color: red; + font-size: 5em; +}</pre> + +<p>La regla s’obre amb un {{Glossary("CSS Selector", "selector")}}, que <em>selecciona</em> l'element HTML al qual aplicarem estil. En aquest cas, aplicarem estil als títols de nivell 1 ({{htmlelement ("h1")}}).</p> + +<p>Tot seguit, hi ha un conjunt de claus <code>{ }</code>, i a dins hi haurà una o més <strong>declaracions</strong>, que prenen la forma de parells <strong>propietat</strong> i <strong>valor</strong>. Cada parell especifica una propietat dels elements que seleccionem i, a continuació, un valor que volem donar a la propietat.</p> + +<p>Abans de la clau hi ha la propietat, i després, el valor. Les {{Glossary("property/CSS","propietats")}} CSS admeten diferents valors, depenent de quina propietat s'especifica. En el nostre exemple, tenim la propietat <code>color</code>, que pot prendre diversos <a href="https://wiki.developer.mozilla.org/ca/docs/Learn/CSS/Building_blocks/Valors_i_unitats_CSS#Color">valors de color</a>. També hi ha la propietat <code>font-size</code>. Aquesta propietat pot prendre diverses <a href="https://wiki.developer.mozilla.org/ca/docs/Learn/CSS/Building_blocks/Valors_i_unitats_CSS#Nombres_longituds_i_percentatges">unitats de mida</a> com a valor.</p> + +<p>Un full d’estils CSS contindrà moltes regles d’aquestes, escrites l’una darrere de l’altra.</p> + +<pre class="brush: css notranslate">h1 { + color: red; + font-size: 5em; +} + +p { + color: black; +}</pre> + +<p>Trobaràs que aprens ràpidament alguns valors, mentre que d’altres els hauràs de buscar. Les pàgines de propietat individuals del projecte MDN t'ofereixen una manera ràpida de cercar propietats i els seus valors si se t’obliden o si vols saber què més pots fer servir com a valor.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Pots trobar enllaços a totes les pàgines de propietat CSS (juntament amb altres funcions CSS) a la pàgina de <a href="/ca/docs/Web/CSS/Referéncia_CSS">referències CSS</a> de MDN. De manera alternativa, t'has d’acostumar a cercar «mdn <em>css-feature-name</em>» al teu motor de cerca preferit sempre que necessitis més informació sobre una característica CSS. Per exemple, prova de cercar «mdn color» i «mdn font-size».</p> +</div> + +<h2 id="Mòduls_CSS">Mòduls CSS</h2> + +<p>Com que amb CSS es pot aplicar estil a tantes coses, el llenguatge es desglossa en <em>mòduls</em>. Veuràs diverses referències a aquests mòduls a mesura que explores la pàgina de MDN i moltes de les pàgines de documentació que s’organitzen al voltant d’un mòdul determinat. Per exemple, pots donar una ullada a la referència MDN en el mòdul <a href="/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders">Fons i vores</a> per a esbrinar quin n’és el propòsit i quines en són les diferents propietats i altres característiques que conté. També trobaràs enllaços a <em>l’especificació CSS</em> que defineix la tecnologia.</p> + +<p>En aquesta fase, no t'has de preocupar gaire de la manera en què s’estructura el CSS, però pot facilitar la cerca d’informació si, per exemple, saps que és probable que una propietat determinada es trobi entre altres coses similars i, probablement, en la mateixa especificació. </p> + +<p>Per veure un exemple concret, tornem al mòdul Fons i vores; podries pensar que té sentit lògic que les propietats <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code> i <code><a href="/en-US/docs/Web/CSS/border-color">border-color</a></code> es defineixin en aquest mòdul. I tens raó.</p> + +<h3 id="Especificacions_CSS">Especificacions CSS</h3> + +<p>Totes les tecnologies d’estàndards web (HTML, CSS, JavaScript, etc.) estan definides en extensos documents anomenats especificacions (o simplement «specs»), que publiquen les organitzacions d’estàndards (com {{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}} o {{glossary("Khronos")}}) i defineixen amb precisió com se suposa que aquestes tecnologies han de comportar-se.</p> + +<p>El CSS no és diferent: el desenvolupa un grup del W3C anomenat <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a>. Aquest grup està format per representants de creadors de navegadors i altres empreses que tenen interès en el CSS. També hi ha altres persones, conegudes com a experts convidats, que actuen com a veus independents, i que no estan vinculats a cap organització.</p> + +<p>El CSS Working Group desenvolupa i especifica les noves funcions CSS. De vegades, perquè un navegador determinat està interessat a tenir alguna capacitat, d’altres vegades perquè els dissenyadors i els desenvolupadors web demanen una funció i, de vegades, perquè el grup de treball mateix ha identificat un requisit. El CSS es troba en desenvolupament constant, introduint característiques noves. Tot i això, una cosa clau sobre CSS és que tothom treballa molt per no canviar mai les coses d’una manera que trenqui els llocs web antics. Un lloc web creat el 2000, que utilitza el CSS limitat que hi havia aleshores, encara es pot fer servir avui dia.</p> + +<p>Com a nouvingut al CSS, és probable que trobis aclaparadores les especificacions CSS, ja que estan destinades a l’ús dels enginyers perquè les utilitzin per a implementar-ne suport als d'agents d’usuari, no perquè els desenvolupadors web les llegeixin. Molts desenvolupadors experimentats preferirien consultar la documentació a MDN o en altres tutorials. No obstant això, val la pena saber que existeixen, i entendre la relació que hi ha entre el CSS que utilitzes, el suport del navegador i les especificacions.</p> + +<h2 id="Suport_dels_navegadors">Suport dels navegadors</h2> + +<p>Un cop especificat el CSS, només ens és útil per desenvolupar pàgines web si un o més navegadors l’han implementat. Això vol dir que el codi ha estat escrit per a convertir la instrucció del nostre fitxer CSS en quelcom que pugui sortir a la pantalla. Analitzarem més aquest procés en l’article <a href="/ca/docs/Learn/CSS/First_steps/Com_funciona_el_CSS">Com funciona el CSS</a>. És inusual que tots els navegadors implementin una característica alhora, i per tant hi sol haver un buit en quina part del CSS es pot fer servir en quins navegadors i en quins no. Per això, és útil ser capaç de comprovar l’estat d’implementació. A cada pàgina de propietats de MDN pots veure l'estat de la propietat que t'interessa, de manera que pots saber si pots fer-la servir en un lloc web.</p> + +<p>El que segueix és el gràfic de dades de compatibilitat per a la propietat <code><a href="/en-US/docs/Web/CSS/font-family">font-family</a></code> de CSS.</p> + +<p>{{Compat("css.properties.font-family")}}</p> + +<h2 id="Què_segueix">Què segueix</h2> + +<p>Ara que coneixes què és el CSS, passem a <a href="/ca/docs/Learn/CSS/First_steps/Com_començar_amb_CSS">Començar amb el CSS</a>, on pots començar a escriure algun codi CSS.</p> + +<p>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</p> + +<h2 id="En_aquest_mòdul">En aquest mòdul</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">Què és el el CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">Primers passos amb el CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">Com s'estructura el CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">Com funciona el CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Aplica els teus nous coneixements</a></li> +</ol> diff --git a/files/ca/learn/css/howto/generated_content/index.html b/files/ca/learn/css/howto/generated_content/index.html new file mode 100644 index 0000000000..877bfefad7 --- /dev/null +++ b/files/ca/learn/css/howto/generated_content/index.html @@ -0,0 +1,179 @@ +--- +title: Contingut +slug: Learn/CSS/Howto/Generated_content +tags: + - Basic + - Beginner + - CSS + - CSS Background + - 'CSS:Getting_Started' + - Graphics + - Guide + - NeedsLiveSample + - NeedsUpdate + - Web +translation_of: Learn/CSS/Howto/Generated_content +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Color", "Color") }}Aquesta és la 9th secció del tutorial<span class="seoSummary"> <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started;</a></span> descriu algunes formes en què es pot utilitzar CSS per afegir contingut quan es visualitza un document. Modifiqueu la fulla d'estil per afegir el contingut del text i una imatge.</p> + +<h2 class="clearLeft" id="Informació_Contingut"><span class="short_text" id="result_box" lang="ca"><span>Informació</span><span>:</span> <span>Contingut</span></span></h2> + +<p>Un dels avantatges importants de CSS és que ajuda a separar l'estil d'un document, del seu contingut. No obstant això, hi ha situacions en què té sentit especificar certs continguts com a part de la fulla d'estil, no com a part del document.</p> + +<p>El contingut especificat en una fulla d'estil pot constar de text o imatges. S'especifica el contingut de la fulla d'estils quan el contingut està estretament lligat a l'estructura del document.</p> + +<div class="tuto_details"> +<div class="tuto_type">Més detalls</div> + +<p>Especificar el contingut d'una fulla d'estil pot causar complicacions. Per exemple, es poden tenir diferents versions d'idioma del document que comparteix una fulla d'estil. Si una part de la fulla d'estil ha de ser traduït, vol dir que heu de posar parts de la fulla d'estil en arxius separats i encarregar-se de fer els vincles amb la versió d'idioma adequat a cada document.</p> + +<p>Aquestes complicacions no sorgeixen si el contingut que especifiqueu consisteix en símbols o imatges que s'apliquen en tots els idiomes i cultures.</p> + +<p>El contingut especificat en una fulla d'estil no es converteixi en part del DOM.</p> +</div> + +<h3 id="Text_content" name="Text_content"><span id="result_box" lang="ca"><span>Contingut de</span> <span>text</span></span></h3> + +<p>CSS pot inserir el contingut de text abans o després d'un element. Per especificar això, fer una regla i afegir {{ cssxref("::before") }} o {{ cssxref("::after") }} al selector. En la declaració, especificar la propietat {{ cssxref("content") }} amb el contingut de text com el seu valor.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html">A text where I need to <span class="ref">something</span> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.ref::before { + font-weight: bold; + color: navy; + content: "Reference: "; +}</pre> + +<h4 id="Sortida">Sortida</h4> + +<p>{{ EmbedLiveSample('Text_content', 600, 30) }}</p> +</div> + +<div class="tuto_details"> +<div class="tuto_type">Més detalls</div> + +<p>El joc de caràcters d'una fulla d'estil és UTF-8 per defecte, però es pot especificar a l'enllaç, en la pròpia fulla d'estil o d'altres maneres. Per a més detalls, veure <a href="http://www.w3.org/TR/CSS21/syndata.html#q23">4.4 representació de fulles d'estil CSS</a> en l'especificació CSS.</p> + +<p>Els caràcters individuals també poden ser especificats per un mecanisme d'escapament que utilitza la barra invertida com a caràcter d'escapament. Per exemple, \ 265B és el símbol d'escacs per a una reina negre ♛. Per a més detalls, vegeu <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q24">Referència a caràcters que no estan representats en una codificació de caràcters</a> i també <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q6">Caràcters i suposats</a> en l'especificació CSS.</p> +</div> + +<h3 id="Contingut_d'image">Contingut d'image</h3> + +<p>Per afegir una imatge abans o després d'un element, especifiqueu l'adreça URL d'un fitxer d'imatge en el valor de la propietat {{ cssxref("content") }}.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> + +<p>Aquesta regla afegeix un espai i una icona després de cada vincle que té la classe <code>glossari</code>:</p> + +<pre class="brush:css">a.glossary:after {content: " " url("../images/glossary-icon.gif");} +</pre> +</div> + +<p>Per afegir una imatge com a fons d'un element, introduïu l'adreça URL d'un fitxer d'imatge en el valor de la propietat {{ cssxref("background") }}. Aquesta és una propietat abreujada que especifica el color de fons, la imatge, com la imatge es repeteix i alguns altres detalls.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> + +<p>Aquesta norma estableix el fons d'un element específic, utilitzant una URL per especificar un fitxer d'imatge.</p> + +<p>El selector especifica el <code>id</code> de l'element. El valor <code>no-repeat</code> fa que la imatge aparegui una sola vegada:</p> + +<pre class="brush:css">#sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;} +</pre> +</div> + +<div class="tuto_details"> +<div class="tuto_type">Més detalls</div> + +<p>Per obtenir informació sobre les propietats individuals que afecten els fons, i sobre altres opcions quan s'especifican imatges de fons, veure la pàgina de referència {{ cssxref("background") }}.</p> +</div> + +<h2 id="Acció_Afegir_una_imatge_de_fons">Acció: Afegir una imatge de fons</h2> + +<p>Aquesta imatge és un quadrat blanc amb una línia blava a la part inferior:</p> + +<table style="border: 2px solid #cccccc;"> + <tbody> + <tr> + <td><img alt="Image:Blue-rule.png" class="internal" src="https://mdn.mozillademos.org/files/160/Blue-rule.png"></td> + </tr> + </tbody> +</table> + +<ol> + <li>Descarregueu l'arxiu d'imatge en el mateix directori que el fitxer CSS. (Per exemple, feu-hi clic per obtenir un menú de context, a continuació, selecciona Desar imatge com i especifiqueu el directori que utilitzeu per aquest tutorial.)</li> + <li>Editeu l'arxiu CSS i afegiu aquesta regla al cos, establint una imatge de fons per tota la pàgina. + <pre class="brush:css">background: url("Blue-rule.png"); +</pre> + + <p>El valor de <code>repeat</code> és el valor per defecte, de manera que no necessita ser especificat. La imatge es repeteix horitzontal i verticalment, donant una aparença com de paper pautat:</p> + + <div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;"> + <p style="margin: 0px;"><img alt="Image:Blue-rule-ground.png" class="internal" src="https://mdn.mozillademos.org/files/161/Blue-rule-ground.png"></p> + + <div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;"> + <div style="font-style: italic; width: 24em;"> + <p><strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>heets</p> + </div> + + <div style="font-style: normal; padding-top: 2px; height: 8em;"> + <p><strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>heets</p> + </div> + </div> + </div> + </li> +</ol> + +<div class="tuto_example"> +<div class="tuto_type">Repte</div> + +<p>Descarregueu aquesta imatge:</p> + +<table style="border: 2px solid #cccccc;"> + <tbody> + <tr> + <td><img alt="Image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"></td> + </tr> + </tbody> +</table> + +<p>Afegiu una regla a la fulla d'estils perquè mostri la imatge al començament de cada línia:</p> + +<div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;"> +<p style="margin: 0px;"><img alt="Image:Blue-rule-ground.png" class="internal" src="https://mdn.mozillademos.org/files/161/Blue-rule-ground.png"></p> + +<div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;"> +<div style="font-style: italic; width: 24em; padding-top: 8px;"><img alt="image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"> <strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>heets</div> + +<div style="font-style: normal; padding-top: 12px; height: 8em;"><img alt="image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"> <strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>heets</div> +</div> +</div> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<p>Add this rule to your stylesheet:</p> + +<pre class="brush: css">p:before{ + content: url("yellow-pin.png"); +} +</pre> + +<p> </p> +<a class="hideAnswer" href="#challenge">Hide solution</a></div> +<a href="#tutochallenge" title="Display a possible solution for the challenge">Veure la solució per el repte.</a></div> + +<h2 id="I_ara_què">I ara què?</h2> + +<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Lists", "Llistes") }}Una forma comuna d'afegir contingut a les fulles d'estil és marcar elements en les llistes. La següent secció descriu com especificar l'estil d'elements de llista.</p> diff --git a/files/ca/learn/css/howto/index.html b/files/ca/learn/css/howto/index.html new file mode 100644 index 0000000000..1f087d3e22 --- /dev/null +++ b/files/ca/learn/css/howto/index.html @@ -0,0 +1,86 @@ +--- +title: Use CSS to solve common problems +slug: Learn/CSS/Howto +translation_of: Learn/CSS/Howto +--- +<div>Translation in progress{{LearnSidebar}}</div> + +<p class="summary">The following links provide solutions to common problems you can solve with CSS.</p> + +<h2 id="Common_use_cases">Common use cases</h2> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Basics">Basics</h3> + +<ul> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">How to apply CSS to HTML</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Syntax#White_space">How to use whitespace in CSS</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Syntax#Comments">How to write comments in CSS</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Simple_selectors">How to select elements via element name, class or ID</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Attribute_selectors">How to select elements via attribute name and content</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-classes">How to use pseudo-classes</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-elements">How to use pseudo-elements</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Multiple_selectors_on_one_rule">How to apply multiple selectors to the same rule</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">How to specify colors in CSS</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Debugging_CSS#Inspecting_the_DOM_and_CSS">How to debug CSS in the browser</a></li> +</ul> + +<h3 id="CSS_and_text">CSS and text</h3> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">How to style text</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">How to customize a list of elements</a></li> + <li><a href="/en-US/Learn/CSS/Styling_text/Styling_links">How to style links</a></li> + <li><a href="/en-US/Learn/CSS/Styling_text/Fundamentals#Text_drop_shadows">How to add shadows to text</a></li> +</ul> +</div> + +<div class="column-half"> +<h3 id="Boxes_and_layouts">Boxes and layouts</h3> + +<ul> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Box_properties">How to size CSS boxes</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Overflow">How to control overflowing content</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip">How to control the part of a CSS box that the background is drawn under</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">How do I define inline, block, and inline-block?</a></li> + <li><a href="/en-US/docs/Learn/CSS/Howto/create_fancy_boxes">How to create fancy boxes</a> (also see the <a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a> module, generally).</li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip">How to use <code>background-clip</code> to control how much of the box your background image covers</a>.</li> + <li><a href="/en-US/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">How to change the box model completely using <code>box-sizing</code></a></li> + <li><a href="/en-US/Learn/CSS/Styling_boxes/Backgrounds">How to control backgrounds</a></li> + <li><a href="/en-US/Learn/CSS/Styling_boxes/Borders">How to control borders</a></li> + <li><a href="/en-US/Learn/CSS/Styling_boxes/Styling_tables">How to style an HTML table</a></li> + <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Box_shadows">How to add shadows to boxes</a></li> +</ul> +</div> +</div> + +<h2 id="Uncommon_and_advanced_techniques">Uncommon and advanced techniques</h2> + +<p>CSS allows very advanced design techniques. These articles help demistify the harder use cases you may face.</p> + +<h3 id="General">General</h3> + +<ul> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Specificity">How to calculate specificity of a CSS selector</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Controlling_inheritance">How to control inheritance in CSS</a></li> +</ul> + +<h3 id="Advanced_effects">Advanced effects</h3> + +<ul> + <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Filters">How to use filters in CSS</a></li> + <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Blend_modes">How to use blend modes in CSS</a></li> +</ul> + +<h3 id="Layout">Layout</h3> + +<ul> + <li><a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes">Using CSS flexible boxes</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts" title="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts">Using CSS multi-column layouts</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Getting_started/Content">Using CSS generated content</a></li> +</ul> + +<h2 id="See_also">See also</h2> + +<p><a href="/en-US/docs/Learn/CSS/Howto/CSS_FAQ">CSS FAQ</a> — A variety of topics: from debugging to selector usage.</p> diff --git a/files/ca/learn/css/index.html b/files/ca/learn/css/index.html new file mode 100644 index 0000000000..05c93dfbb8 --- /dev/null +++ b/files/ca/learn/css/index.html @@ -0,0 +1,64 @@ +--- +title: CSS +slug: Learn/CSS +tags: + - Beginner + - CSS + - CodingScripting + - Debugging + - Landing + - NeedsContent + - NeedsTranslation + - Topic + - TopicStub + - length + - specificity +translation_of: Learn/CSS +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Les Fulles d'estil en cascada (de l'anglès <em>Cascading Stylesheets</em> {{glossary("CSS")}}) és la segona tecnologia que hauries de començar a aprendre després de l'{{glossary("HTML")}}. Mentre que l'HTML s'utilitza per definir l'estructura i la semàntica del teu contingut, el CSS s'utilitza per donar-li estil i forma. Per exemple, pots utilitzar CSS per modificar el color, mida i espaiat de la tipografia del contingut, dividir-lo en múltiples columnes o afegir animacions i altres funcionalitats decoratives.</p> + +<h2 id="Itinerari_d'aprenentatge">Itinerari d'aprenentatge</h2> + +<p>Abans de començar amb CSS s'han d'aprendre els aspectes bàsics d'HTML. Recomanem que primer facis un cop d'ull a la nostra <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introducció a HTML</a> i posteriorment podràs aprendre:</p> + +<ul> + <li>CSS, començant amb el mòdul l'introducció a CSS</li> + <li><a href="/en-US/Learn/HTML#Modules">Mòduls HTML</a> més avançats</li> + <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a> i com utilitzar-lo per afegir funcionalitats dinàmiques a les pàgines web</li> +</ul> + +<p>Es recomana aprendre HTML i CSS a la vegada, treballant de manera conjunta les dues disciplines. Això es deu a que HTML és molt més interessant conjuntament amb CSS i no pots aprendre CSS sense saber HTML.</p> + +<p>Abans de començar aquest tema, hauries d'estar familiaritzat amb l'ús d'ordinadors i l'utilització passiva del Web (per exemple navegant i consumint contingut). Hauries de tenir configurat un entorn de treball bàsic com es detalla a <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Instal·lant programari bàsic</a> i entendre com crear i gestionar arxius, com es detalla a <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Treballant amb arxius.</a> Ambdós temes formen part del mòdul complet per a principiants <a href="/en-US/docs/Learn/Getting_started_with_the_web">Començant amb la web</a>.</p> + +<p>Malgrat que no és absolutament necessari, es recomana treballar el mòdul <a href="/en-US/docs/Learn/Getting_started_with_the_web">Començant amb la web</a> abans de començar amb aquest tema. Gran part del tractat a l'article d'introducció a CSS també es tracta al mòdul d'introducció a CSS, encara que d'una manera més detallada.</p> + +<h2 id="Mòduls">Mòduls</h2> + +<p>Aquest tema conté els següents mòduls en un ordre recomanat per un correcte aprenentatge. Es recomana que comencis pel primer.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introducció a CSS</a></dt> + <dd>Aquest mòdul t'introdueix als conceptes bàsics de com funciona CSS, incloent selectors i propietats, escrivint regles CSS, aplicant CSS a l'HTML, com especificar longitud, color i altres unitats a CSS, cascada i herència, conceptes bàsic del model de caixes i depurant el CSS.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text">Donant estil al text</a></dt> + <dd>Aqui veurem els aspectes bàsics dels estils de text: tipografia, gruixudària, cursiva, espai d'interlínia, espai entre caràcters, ombres i altres funcions que es poden aplicar al text. Acabarem d'arrodonir el mòdul fent un cop d'ull a la manera d'aplicar tipografies personalitzades a la teva pàgina web, donar estil a llistes i enllaços.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes">Donant estil a les caixes</a></dt> + <dd>A continuació, veurem com donar estil a les caixes, un dels passos fonamentals per poder maquetar una pàgina web. En aquest mòdul resumirem el model de caixa i veurem com controlar la maquetació de les caixes, donan-hi espaiat, vores i marges, configurant colors de fons, imatges i altres funcionalitats divertides com per exemple ombrejat i filtres.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout">Disseny CSS</a></dt> + <dd>Arribats a aquest punt ja hem vist els aspectes bàsics de CSS, com donar estil al text i com manipular les caixes on posem el contingut. Ara és moment de veure com posicionar les caixes al lloc correcte en relació a la finestra de visualització o a la resta de caixes. Hem cobert els prerequisits necessaris amb el que ens podem submergir a la maquetació CSS, veure les diferents configuracions de visualització, mètodes tradicionals utilitzant float i posicionament i les noves eines de maquetació com per exemple flexbox.</dd> + <dt>Disseny Adaptable</dt> + <dd>Amb tants tipus de dispositius amb els que es pot navegar per la Web avui en dia, el <a href="/en-US/docs/Web/Guide/Responsive_design">disseny web adaptable</a> (<em>RWD - Responsive Web Design</em>) ha esdevingut un aspecte clau pel que fa al desenvolupament de pàgines web. Aquest mòdul cobrirà les eines i principis bàsics del RWD, explicarà com aplicar diferents estils de CSS a un document en funció de les diferents característiques del dispositiu com poden ser la mida de la pantalla, orientació, i resolució i explorarà les tecnologies que tenim al nostre abast per servir vídeo i imatges en funció d'aquestes característiques.</dd> +</dl> + +<h2 id="Resolent_problemes_habituals_de_CSS">Resolent problemes habituals de CSS</h2> + +<p><a href="/en-US/docs/Learn/CSS/Howto">Ús de CSS per resoldre problemes habituals</a> ofereix enllaços a seccions de contingut explicant com utilitzar CSS per resoldre problemes molt habituals en el moment de crear pàgines web.</p> + +<h2 id="Veure_també">Veure també</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS">CSS a MDN</a></dt> + <dd>Principal punt d'entrada de la documentació sobre CSS a MDN, on trobaràs una documentació detallada de totes les funcionalitats del llenguatge CSS. Vols saber tots els valors que pot prendre una determinada propietat? Aquest és el lloc on anar.</dd> +</dl> diff --git a/files/ca/learn/css/introducció_a_css/comprensió_css_fonamental/index.html b/files/ca/learn/css/introducció_a_css/comprensió_css_fonamental/index.html new file mode 100644 index 0000000000..34a654269a --- /dev/null +++ b/files/ca/learn/css/introducció_a_css/comprensió_css_fonamental/index.html @@ -0,0 +1,114 @@ +--- +title: Comprensió CSS fonamental +slug: Learn/CSS/Introducció_a_CSS/Comprensió_CSS_fonamental +tags: + - Assessment + - Beginner + - CSS + - CodingScripting + - Selectors + - Style + - Syntax + - box model + - comments + - rules +translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}</div> + +<p class="summary">Heu cobert molt en aquest mòdul, de manera que us heu de sentir bé d'haver arribat al final!. El pas final abans de continuar és intentar l'avaluació del mòdul: això implica una sèrie d'exercicis relacionats que s'han de completar per crear el disseny final - un perfil de targeta de visita/targeta de jugador/perfil social.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td><span id="result_box" lang="ca"><span>Abans d'intentar aquesta avaluació, hauríeu d'haver treballat tots els articles d'aquest mòdul.</span></span></td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td><span id="result_box" lang="ca"><span>Comprovar la comprensió de la teoria CSS fonamental, la sintaxi i la mecànica</span></span></td> + </tr> + </tbody> +</table> + +<h2 id="Punt_de_partida"><span id="result_box" lang="ca"><span>Punt de partida</span></span></h2> + +<p><span id="result_box" lang="ca"><span>Per començar aquesta avaluació, heu de:</span></span></p> + +<ul> + <li>Aneu i agafeu el <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/index.html">fitxer HTML per a l'exercici</a>, i el <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">fitxer d'image associat</a>, i deseu-los en un directori nou a l'ordinador local. Si voleu utilitzar el vostre propi fitxer d'imatge i ompliu el vostre nom, podeu fer-ho: simplement assegureu-vos que la imatge sigui quadrada.</li> + <li>Agafa el <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/style-resources.txt">fitxer de text de recursos CSS</a> - aquest conté un conjunt de selectors i regles que necesitaràs estudiar i combinar per respondre part d'aquesta avaluació.</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: D'altra banda, podeu utilitzar un lloc com <a class="external external-icon" href="http://jsbin.com/">JSBin</a> o <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> per fer la vostra avaluació. Podeu enganxar el codi HTML i omplir el CSS en un d'aquests editors en línia i utilitzar <a href="http://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">aquest URL</a> per indicar a l'element <img> el fitxer d'imatge. Si l'editor en línia que esteu utilitzant no té cap panell CSS separat, no dubteu a posar-lo en un element <code><style></code> al capdavant del document.</p> +</div> + +<h2 id="Resum_del_projecte"><span id="result_box" lang="ca"><span>Resum del projecte</span></span></h2> + +<p>Se us ha proporcionat un mica d'HTML sense processar i una imatge, i heu d'escriure el CSS necessari per d'introduir una mica d'estil bonic en una targeta de negocis en línia, que potser es pot duplicar com a targeta de jugador o perfil de xarxes socials. <span id="result_box" lang="ca"><span>Les següents seccions descriuen el que heu de fer.</span></span></p> + +<p><span id="result_box" lang="ca"><span>Configuració bàsica:</span></span></p> + +<ul> + <li>En primer lloc, creeu un nou fitxer al mateix directori que el vostre fitxer HTML i d'imatge. Nomeneu-ho alguna cosa realment imaginativa com <code>style.css</code>.</li> + <li>Enllaceu el vostre CSS al vostre fitxer HTML a través d'un element <code><link></code>.</li> + <li>Els dos primers conjunts de regles del fitxer de recursos CSS són vostres, GRATIS! Després d'haver acabat d'alegrar-se amb la vostra bona fortuna, copieu-los i enganxeu-los a la part superior del vostre nou fitxer CSS. Utilitzeu-les com a prova per assegurar-vos que el vostre CSS s'apliqui correctament al vostre HTML.</li> + <li>A sobre de les dues regles, afegiu un comentari CSS amb algun text dins d'ell per indicar que es tracta d'un conjunt d'estils generals per a la pàgina general. Faríeu "Estils de pàgina general". També afegiu tres comentaris més a la part inferior del fitxer CSS per indicar els estils específics de la configuració del contenidor de la targeta, els estils específics del encapçalament i el peu de pàgina, i els estils específics per el contingut principal de la targeta de visita. A partir d'ara, els estils posteriors afegits al full d'estils s'han d'organitzar en un lloc adequat.</li> +</ul> + +<p>Tingueu cura dels selectors i els conjunts de regles proporcionats:</p> + +<ul> + <li>A continuació, ens agradaria que consultéssiu els quatre selectors i calculéssiu l'especificitat de cadascun d'ells. Escriviu-les en algun lloc on es pugui trobar més endavant, com ara un comentari a la part superior del vostre CSS.</li> + <li>Ara és el moment de posar el selector adequat al conjunt de regles correctes! Teniu quatre parells de selector i un conjunt de regles perquè coincideixin amb els vostres recursos CSS. Feu això ara i afegiu-los el vostre fitxer CSS. Necessitareu: + <ul> + <li>Doneu al contenidor principal de la targeta una amplada/alçada fixa, un color de fons sòlid, una vora i un radi de vora (cantonades arrodonides), entre d'altres.</li> + <li>Doneu a la capçalera un degradat de fons que va des de més fosc a més clar, a més cantonades arrodonides que encaixen amb les cantonades arrodonides establertes al contenidor principal de la targeta.</li> + <li>Doneu al peu de pàgina un degradat de fons que va des de més clar a més fosc, a més de cantonades arrodonides que encaixen amb les cantonades arrodonides establertes al contenidor principal de la targeta.</li> + <li>Floteu la imatge a la dreta per tal que s'adhereixi al costat dret dels continguts principals de la targeta de visita i li proporcioneu una alçada màxima (max-height) del 100% (un truc intel·ligent que assegura que creixerà/disminuirà per mantenir la mateixa alçada que el seu contenidor principal, independentment de l'alçada que es faci).</li> + </ul> + </li> + <li><span id="result_box" lang="ca"><span>Aneu amb compte!</span> <span>Hi ha dos errors en els conjunts de regles proporcionats.</span> <span>Usant qualsevol tècnica que coneixeu, seguiu-los i solucioneu-los abans de continuar</span></span>.</li> +</ul> + +<p>Nou conjunt de regles que necessiteu escriure :</p> + +<ul> + <li>Escriviu un conjunt de regles que apunti tant a l'encapçalat de la targeta com al peu de la targeta, donant-los una alçada total de 50 px, que inclou una alçada de contingut de 30px i un farcit de 10px en tots els costats. Però expressat en <code>em</code>s.</li> + <li>El marge predeterminat aplicat als elements <code><h2></code> i <code><p></code> per el navegador interfereix amb el nostre disseny, així que escriviu una regla que apunti a tots aquests elements i estableixi el seu marge a 0.</li> + <li>Per evitar que la imatge es vessi fos del contingut principal de la targeta de visita (l'element <code><article></code>), hem de donar-li una alçada específica. Establiu l'alçada de <code><article></code> a 120px, expressada en <code>em</code>s. A més, doneu-li un color de fons negre semitransparent, resultant una ombra lleugerament més fosca, que permet que el color vermell de fons resplendeixi molt més.</li> + <li>Escriviu un conjunt de regles que doni a <code><h2></code> una mida efectiva de font de 20px (però expressat en <code>em</code>s) i una alçada de línia adequada per col·locar-la al centre de la caixa de contingut del encapçalament. Recordeu que anteriorment, l'alçada de contingut de la caixa hauria de ser de 30px - això us proporcionarà tots els números que necessiteu per calcular l'alçada de la línia.</li> + <li>Escriviu un conjunt de regles que doni a <code><p></code> dins del peu de pàgina una mida de font efectiva de 15px (però expressat en <code>em</code>s) i una alçada de línia adequada per col·locar-la al centre de la caixa de contingut del peu de pàgina. Recordeu que anteriorment, l'alçada de la caixa de contingut hauria de ser de 30px - això us proporcionarà tots els números que necessiteu per calcular l'alçada de la línia..</li> + <li>Com a últim toc, doneu el paràgraf dins de <code><article></code> un valor de farcit adequat de manera que la seva vora esquerra s'alineï amb el paràgraf <code><h2></code> i el peu de pàgina, i establiu el seu color per que sigui prou clar per facilitar la seva lectura.</li> +</ul> + +<p>Altres coses a pensar:</p> + +<ul> + <li>Obtindreu bonificacions si escriviu el vostre CSS amb la màxima llegibilitat, amb una declaració independent en cada línia.</li> + <li>Haureu d'incloure <code>.card</code> al principi de la cadena del selector a totes les vostres regles, de manera que aquestes regles no interfereixin amb l'estil de qualsevol altre element si la targeta de visita es col·loqués en una pàgina amb una càrrega d'un altre contingut</li> +</ul> + +<h2 id="Consells_i_suggeriments">Consells i suggeriments</h2> + +<ul> + <li>No cal que editeu l'HTML de cap manera, excepte per aplicar el CSS a l'HTML.</li> + <li>Per tractar d'esbrinar el valor <code>em</code>, que necessiteu, per representar una determinada longitud de píxels, penseu en la mida de font base que té l'element arrel (<code><html></code>) i el que necessita ser multiplicat per obtenir el valor desitjat. Això us donarà el seu valor <code>em</code>, almenys en un cas senzill com aquest.</li> +</ul> + +<h2 id="Exemple">Exemple</h2> + +<p><span id="result_box" lang="ca"><span>La següent captura de pantalla mostra un exemple del que hauria de tenir el disseny acabat:</span></span></p> + +<p><img alt="A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image." src="https://mdn.mozillademos.org/files/12616/business-card.png" style="display: block; margin: 0 auto;"></p> + +<p> </p> + +<h2 id="Avaluació"><span id="result_box" lang="ca"><span>Avaluació</span></span></h2> + +<p>Si seguiu aquesta avaluació com a part d'un curs organitzat, hauríeu de poder lliurar el vostre treball al vostre professor/mentor per qualificar-ho. Si esteu en auto-aprenentatge, podreu obtenir la guia de qualificacions amb força facilitat preguntant sobre el tema en el <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">fil de conversa en l'àrea d'aprenentatge</a>, o en el canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> en <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Intenteu primer l'exercici - no es guanya res fent trampes!</p> + +<p>{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}</p> diff --git a/files/ca/learn/getting_started_with_the_web/com_funciona_web/index.html b/files/ca/learn/getting_started_with_the_web/com_funciona_web/index.html new file mode 100644 index 0000000000..4a36fb2bff --- /dev/null +++ b/files/ca/learn/getting_started_with_the_web/com_funciona_web/index.html @@ -0,0 +1,99 @@ +--- +title: Com funciona la Web +slug: Learn/Getting_started_with_the_web/Com_funciona_Web +tags: + - Beginner + - Client + - DNS + - HTTP + - IP + - Infrastructure + - Learn + - Server + - TCP + - 'l10n:priority' +translation_of: Learn/Getting_started_with_the_web/How_the_Web_works +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p><em>Com funciona la web</em>, proporciona una visió simplificada del que passa quan veieu una pàgina web en un navegador web en el vostre ordinador o telèfon.</p> +</div> + +<p>Aquesta teoria no és essencial per a l'escriptura de codi web en el curt termini, però en poc temps realment començareu a beneficiar-vos de la comprensió del que està passant en el fons.</p> + +<h2 id="Clients_i_servidors">Clients i servidors</h2> + +<p><span id="result_box" lang="ca"><span>Ordinadors</span> <span>connectats a</span> <span>la web són</span> <span>anomenats</span> <span>clients</span> <span>i</span> <span>servidors.</span> <span>Un diagrama</span> <span>simplificat</span> <span>de com</span> <span>interactuen</span> <span>podria</span> <span>tenir aquest</span> <span>aspecte</span><span>:</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8973/Client-server.jpg" style="height: 123px; width: 336px;"></p> + +<ul> + <li>Els clients són els dispositius connectats a Internet dels típics usuaris web (per exemple, l'ordinador connectat a la xarxa Wi-Fi o el telèfon connectat a la xarxa mòbil) i el programari d'accés a Internet disponible en aquests dispositius (normalment un navegador web com Firefox o Chrome).</li> + <li>Els servidors són ordinadors que emmagatzemen pàgines web, llocs o aplicacions. Quan un dispositiu client vol accedir a una pàgina web, una còpia de la pàgina web es descarrega des del servidor en l'equip del client, mostrant-se en el navegador web de l'usuari.</li> +</ul> + +<h2 id="Altres_parts_de_la_caixa_d'eines">Altres parts de la caixa d'eines</h2> + +<p>El client i el servidor que hem descrit més amunt no expliquen tota la història. Hi ha moltes altres parts involucrades i que descriurem a continuació.</p> + +<p>Per ara, imaginem que la web és un camí. En un extrem del carrer hi ha el client, que és com casa vostra. A l'altre extrem del carrer hi ha el servidor, que és una botiga que voleu comprar alguna cosa.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9749/road.jpg" style="display: block; height: 427px; margin: 0px auto; width: 640px;"></p> + +<p>A més del client i el servidor, també hem de saludar:</p> + +<ul> + <li><strong>La vostra connexió a Internet</strong>: Us permet enviar i rebre dades a la web. És bàsicament com el carrer entre casa i la botiga.</li> + <li><strong>TCP/IP</strong>: Transmission Control Protocol i Internet Protocol són els protocols de comunicació que defineixen com les dades han de viatjar a través del web. Això és com els mecanismes de transport que us permeten realitzar una comanda, anar a la botiga i comprar els seus productes. En el nostre exemple, això és com un cotxe o una moto (o com una altra cosa que es pugui moure).</li> + <li><strong>DNS</strong>: Domain Name System Servers són com un llibre d'adreces de llocs web. Quan escriviu una adreça web al navegador, el navegador busca en el DNS abans de recuperar el lloc web. El navegador necessita saber en quin servidor viu la pàgina web, de manera que podrà enviar missatges HTTP al lloc correcte (veure més a baix). Això és com buscar l'adreça de la tenda perquè pugueu accedir a ella.</li> + <li><strong>HTTP</strong>: Hypertext Transfer Protocol és una aplicació {{Glossary( "Protocol", "protocol")}} que defineix un llenguatge per als clients i servidors per parlar l'un a l'altre. Això és com el llenguatge que s'utilitza per ordenar les vostres mercaderies.</li> + <li><strong>Arxius de components</strong>: Un lloc web es compon de molts arxius diferents, que són com les diferents parts dels productes que compreu a la botiga. Aquests arxius són de dos tipus principals: + <ul> + <li><strong>Arxius de codi</strong>: Els llocs web estan construïts principalment d'HTML, CSS i Javascript, encara que coneixereu a altres tecnologies una mica més tard.</li> + <li><strong>Actius</strong>: Aquest és un nom col·lectiu per a totes les altres coses de que es compon un lloc web, com ara imatges, música, vídeo, documents de Word i PDF.</li> + </ul> + </li> +</ul> + +<h2 id="Llavors_què_passa_exactament">Llavors, què passa exactament?</h2> + +<p>En escriure una adreça web al navegador (per la nostra analogia, és com entrar a la botiga):</p> + +<ol> + <li>El navegador va al servidor DNS i troba l'adreça real del servidor on el lloc web viu (trobar ll'adreça de la botiga).</li> + <li>El navegador envia un missatge de petició HTTP al servidor demanant-li que enviï una còpia de la pàgina web per al client (que vagi a la botiga i demani els seus béns). Aquest missatge i totes les altres dades enviades entre el client i el servidor, s'envian a través de la vostra connexió a Internet mitjançant el TCP/IP.</li> + <li>Sempre i quan el servidor aprovi la sol·licitud del client, el servidor envia al client un missatge "200 OK" , el que significa "Per descomptat que podeu veure aquest lloc web! Aquí és" i, a continuació, inicia l'enviament d'arxius del lloc web al navegador com una sèrie de petits trossos anomenats paquets de dades (la botiga us dóna la vostra mercaderia, i les porteu de tornada a casa).</li> + <li>El navegador acobla els petits trossos en un lloc web complet i us el mostra (la mercaderia arriba a la vostra porta - coses noves, impressionant!).</li> +</ol> + +<h2 id="DNS_explicat">DNS explicat</h2> + +<p>Les adreces web real no són cadenes agradables i fàcils de recordar si les escriviu a la barra d'adreces per trobar els vostres llocs web favorits. Són cadenes de nombres, com aquesta: 63.245.217.105.</p> + +<p>Això s'anomena {{Glossary("IP Address","adreça IP")}}, i representa una ubicació única a la web. No obstant això, no és molt fàcil de recordar, oi? És per això que es van inventar els servidors de noms de domini. Aquests són servidors especials que responen a una adreça web que escriviu en el vostre navegador (com "mozilla.org") a l'adreça real (IP) del lloc web.</p> + +<p>Els llocs web poden ser aconseguits directament a través de les seves adreces IP. Intenteu anar a la pàgina web de Mozilla escrivint <code>63.245.217.105</code> a la barra d'adreces en una nova pestanya del navegador.</p> + +<p><img alt="A domain name is just another form of an IP address" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p> + +<h2 id="Paquets_explicat">Paquets explicat</h2> + +<p>Anteriorment hem utilitzat el terme "paquets" per descriure el format en què s'envien les dades del servidor al client. Què volem dir aquí? Bàsicament, quan les dades s'envien a través del web, s'envian com milers de petits trossos, de manera que molts diferents usuaris d'Internet poden descarregar el mateix lloc web al mateix temps. Si els llocs web s'enviessin en grans trossos individuals, només un usuari podria descarregar-los alhora, el que òbviament faria la Web molt ineficient i no seria molt divertit d'utilitzar.</p> + +<h2 id="Veure">Veure</h2> + +<ul> + <li><a href="/en-US/Learn/How_the_Internet_works">Com funciona Internet</a></li> + <li><a href="https://dev.opera.com/articles/http-basic-introduction/">HTTP — un Protocol a Nivell d'Aplicació</a></li> + <li><a href="https://dev.opera.com/articles/http-lets-get-it-on/">HTTP: Seguirem endavant!</a></li> + <li><a href="https://dev.opera.com/articles/http-response-codes/">HTTP: Codis de resposta</a></li> +</ul> + +<h2 id="Crèdit">Crèdit</h2> + +<p>Foto carrer: <a href="https://www.flickr.com/photos/kdigga/9110990882/in/photolist-cXrKFs-c1j6hQ-mKrPUT-oRTUK4-7jSQQq-eT7daG-cZEZrh-5xT9L6-bUnkip-9jAbvr-5hVkHn-pMfobT-dm8JuZ-gjwYYM-pREaSM-822JRW-5hhMf9-9RVQNn-bnDMSZ-pL2z3y-k7FRM4-pzd8Y7-822upY-8bFN4Y-kedD87-pzaATg-nrF8ft-5anP2x-mpVky9-ceKc9W-dG75mD-pY62sp-gZmXVZ-7vVJL9-h7r9AQ-gagPYh-jvo5aM-J32rC-ibP2zY-a4JBcH-ndxM5Y-iFHsde-dtJ15p-8nYRgp-93uCB1-o6N5Bh-nBPUny-dNJ66P-9XWmVP-efXhxJ">Street composing</a>, per <a href="https://www.flickr.com/photos/kdigga/">Kevin D</a>.</p> + +<p>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/ca/learn/getting_started_with_the_web/css_bàsic/index.html b/files/ca/learn/getting_started_with_the_web/css_bàsic/index.html new file mode 100644 index 0000000000..991a20ca78 --- /dev/null +++ b/files/ca/learn/getting_started_with_the_web/css_bàsic/index.html @@ -0,0 +1,276 @@ +--- +title: CSS bàsic +slug: Learn/Getting_started_with_the_web/CSS_bàsic +tags: + - Beginner + - CSS + - CodingScripting + - Learn + - Styling + - Web + - 'l10n:priority' +translation_of: Learn/Getting_started_with_the_web/CSS_basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p>CSS (Cascading Style Sheets) és el codi que utilitzareu per dissenyar la vostre pàgina web. CSS Bàsic us portarà a través del que necessiteu per començar. Respondrem a preguntes com: Com puc fer perquè el meu text sigui negre o vermell? Com puc fer perquè el meu contingut aparegui en tal i tal lloc en la pantalla? Com puc decorar la meva pàgina web amb imatges de fons i colors?</p> +</div> + +<h2 id="Què_és_CSS_en_realitat"><span id="result_box" lang="ca"><span>Què</span> <span>és</span> <span>CSS,</span> <span>en realitat</span><span>?</span></span> ?</h2> + +<p>Igual que HTML, CSS no és realment un llenguatge de programació. És un llenguatge de fulles d'estil, és a dir, us permet aplicar estils de manera selectiva als elements en els documents HTML. Per exemple, per seleccionar tots els elements de paràgraf en una pàgina HTML i convertir el text en color vermell, escriuríeu aquest CSS:</p> + +<pre class="brush: css">p { + color: red; +}</pre> + +<p>Anem a provar: enganxeu aquestes tres línies de CSS en un arxiu nou a l'editor de text i, a continuació, deseu el arxiu com <code>style.css</code> en el directori d'estils.</p> + +<p>Però encara heu d'aplicar el CSS al vostre document HTML, en cas contrari l'estil CSS no afectarà en la forma en que el navegador mostrarà el document HTML. (Si no heu estat seguint el nostre projecte, llegiu <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Tractar amb arxius</a> i <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/HTML_basics">HTML bàsic</a> per esbrinar el que cal fer en primer lloc.)</p> + +<ol> + <li>Obriu el arxiu <code>index.html</code> i enganxeu la següent línia en algun lloc del cap, és a dir, entre les etiquetes <code><head></code> i <code></head></code>: + + <pre class="brush: html"><link href="styles/style.css" rel="stylesheet" type="text/css"></pre> + </li> + <li>Deseu <code>index.html</code> i carregar-ho en el navegador. Hauriau de veure alguna cosa com això:</li> +</ol> + +<p><img alt="A mozilla logo and some paragraphs. The paragraph text has been styled red by our css." src="https://mdn.mozillademos.org/files/9435/website-screenshot-styled.png" style="display: block; height: 832px; margin: 0px auto; width: 711px;">Si el text del paràgraf és ara de color vermell, felicitacions, ara heu escrit el vostre primer CSS amb èxit!</p> + +<h3 id="Anatomia_d'un_conjunt_de_regles_CSS">Anatomia d'un conjunt de regles CSS</h3> + +<p>Vegem el CSS anterior en una mica més de detall:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9461/css-declaration-small.png" style="display: block; height: 480px; margin: 0px auto; width: 850px;"></p> + +<p>Tota l'estructura es denomina un <strong>conjunt de regles</strong> (però sovint "regla" per abreujar). Tingueu en compte també els noms dels components individuals:</p> + +<dl> + <dt>Selector</dt> + <dd>El nom de l'element HTML en l'inici del conjunt de regles. Es selecciona l'element o els elements per donar estil (en aquest cas, els elements <code>p</code>). Per l'estil d'un element diferent, només cal canviar el selector.</dd> + <dt>Declaració</dt> + <dd>Una sola regla com <code>color: red</code>; especificant quines de les <strong>propietats</strong> de l'element voleu estil.</dd> + <dt>Propietats</dt> + <dd>Maneres en què podem donar estil a un element HTML. (En aquest cas, <code>color</code> és una propietat dels elements <code>p</code>.) CSS, ens permet triar quines propietats volem afectar amb la nostra regla.</dd> + <dt>Valor de propietat</dt> + <dd>A la dreta de la propietat, després dels dos punts, tenim el <strong>valor de la propietat</strong>, per triar una de les moltes aparicions possibles per a una determinada propietat (hi ha molts valors de <code>color</code>, a més de <code>red</code>).</dd> +</dl> + +<p>Recordeu les altres parts importants de la sintaxi:</p> + +<ul> + <li>Cada conjunt de regles (a part del selector) han de ser embolicades en les claus (<code>{}</code>).</li> + <li>Dins de cada declaració, heu d'usar els dos punts (:) per separar la propietat dels seus valors.</li> + <li>Dins de cada conjunt de regles, heu d'utilitzar un punt i coma (;) per separar cada declaració de la següent.</li> +</ul> + +<p>Així que per modificar diversos valors de propietats a la vegada, només les heu d'escriure separades per punt i coma, per exemple:</p> + +<pre class="brush: css">p { + color: red; + width: 500px; + border: 1px solid black; +}</pre> + +<h3 id="Seleccionar_diversos_elements">Seleccionar diversos elements</h3> + +<p>També podeu seleccionar diversos tipus d'elements i aplicar un únic conjunt de regles per a tots ells. Incloure múltiples selectors separats per comes. Per exemple:</p> + +<pre class="brush: css">p,li,h1 { + color: red; +}</pre> + +<h3 id="Diferents_tipus_de_selector">Diferents tipus de selector</h3> + +<p>Hi ha molts tipus diferents de selector. Per sobre, només ens fixarem en <strong>selectors d'elements</strong>, els quals seleccionen tots els elements d'un tipus determinat en els documents HTML donats. Però podem fer seleccions més específiques que això. Aquests són alguns dels tipus més comuns de selector:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Nom del Selector</th> + <th scope="col">Què es selecciona</th> + <th scope="col">Exemple</th> + </tr> + </thead> + <tbody> + <tr> + <td><span id="result_box" lang="ca"><span>Selector</span> <span>d'element</span> <span>(</span><span>de vegades</span> <span>anomenat</span> <span>un selector</span> <span>d'etiquetes</span> <span>o</span> <span>tipus</span><span>)</span></span></td> + <td>Tot(s) element(s) HTML del tipus especificat.</td> + <td><code>p</code><br> + Selecciona <code><p></code></td> + </tr> + <tr> + <td>selector ID</td> + <td>L'element de la pàgina amb l'ID especificat (en una pàgina HTML donada, només es permet un element per ID).</td> + <td><code>#my-id</code><br> + Selecciona <code><p id="my-id"></code> o <code><a id="my-id"></code></td> + </tr> + <tr> + <td>selector Class</td> + <td>L'element(s) a la pàgina amb la classe especificada (múltiples instàncies de la classe podem aparèixer en una pàgina).</td> + <td><code>.my-class</code><br> + Selecciona <code><p class="my-class"></code> i <code><a class="my-class"></code></td> + </tr> + <tr> + <td>selector Attribute</td> + <td>L'element(s) a la pàgina amb l'atribut especificat.</td> + <td><code>img[src]</code><br> + Selecciona <code><img src="myimage.png"></code> però no <code><img></code></td> + </tr> + <tr> + <td>selector Pseudo class</td> + <td>L'element(s) especificat(s), però només quan està en l'estat especificat, per exemple, planejar per sobre.</td> + <td><code>a:hover</code><br> + Selecciona <code><a></code>, però només quan el punter del ratolí planeja sobre l'enllaç.</td> + </tr> + </tbody> +</table> + +<p>Hi ha moltes més selectors per explorar, i podeu trobar una llista més detallada a la nostra <a href="/en-US/docs/Web/Guide/CSS/Getting_started/Selectors">Guia de selectors</a>.</p> + +<h2 id="Tipus_de_lletra_i_text">Tipus de lletra i text</h2> + +<p>Ara que hem explorat alguns conceptes bàsics de CSS, començarem a afegir algunes regles més i informació al nostre arxiu <code>style.css</code> per fer que el nostre exemple es vegi bé. En primer lloc, anem a aconseguir els nostres tipus de lletra i text perquè es vegi una mica millor.</p> + +<ol> + <li>En primer lloc, torneu enrere i trobeu els <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Font">enllaços de Google Fonts</a> que vau guardar en un lloc segur. Afegiu l'element <code><link...></code> algun lloc dins del cap del vostre index.html (de nou, en qualsevol lloc entre les etiquetes <code><head></code> i <code></head></code>). Es veurà alguna cosa com això: + + <pre class="brush: html"><link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'></pre> + </li> + <li>A continuació, elimineu la regla existent que teniu en el vostre arxiu <code>style.css</code>. Va ser una bona prova, però el text en vermell en realitat no es veu molt bé.</li> + <li>Afegiu les següents línies al seu lloc, en substitució de la línia de marcador de posició amb la línia de <code>font-family</code> que vau obtenir de Google fonts. (<code>font-family</code> només significa el tipùs de lletra que voleu utilitzar per al text.) Aquesta primera regla estableix una base global en tipùs de lletra i mida per a tota la pàgina (ja que <code><html></code> és l'element principal de tota la pàgina, i tots els elements dins d'ella heretaran el mateix tipus de lletra (<code>font-family)</code> i mida (<code>font-size</code>)): + <pre class="brush: css">html { + font-size: 10px; /* px means 'pixels': the base font size is now 10 pixels high */ + font-family: placeholder: this should be the rest of the output you got from Google fonts +}</pre> + + <div class="note"> + <p><strong>Nota</strong>: He afegit un comentari per explicar el que significa "px". Qualsevol cosa en un document CSS entre <code>/*</code> i <code>*/</code> és un <strong>comentari CSS</strong>, que el navegador ignora quan processa el codi. Aquest és un lloc per vosaltres, per escriure notes útils sobre el que esteu fent.</p> + </div> + </li> + <li>Ara establirem les mides del tipus de lletra per als elements que contenen text, a l'interior del cos HTML ({{htmlelement("h1")}}, {{htmlelement("li")}} i {{htmlelement("p")}}). També centrarem el text del nostre encapçalament i establirem una certa altura de línia i espaiat entre caràcters en el contingut del cos perquè sigui una mica més fàcil de llegir: + <pre class="brush: css">h1 { + font-size: 60px; + text-align: center; +} + +p, li { + font-size: 16px; + line-height: 2; + letter-spacing: 1px; +}</pre> + </li> +</ol> + +<p>Podeu ajustar aquests valors de <code>px</code> al vostre gust per tal d'aconseguir el disseny que busqueu, però en general el vostre disseny ha de tenir aquest aspecte:</p> + +<p><img alt="a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered" src="https://mdn.mozillademos.org/files/9447/website-screenshot-font-small.png" style="display: block; height: 1020px; margin: 0px auto; width: 921px;"></p> + +<h2 id="Caixes_caixes_tot_es_tracta_de_caixes"><span id="result_box" lang="ca"><span>Caixes</span><span>, caixes,</span> <span>tot</span> <span>es</span> <span>tracta</span> <span>de caixes</span></span></h2> + +<p>Una cosa que notareu en escriure CSS és que molt d'ell es tracta de caixes - establir la seva mida, color, posició, etc. La major part dels elements HTML de la pàgina pot estar pensat com caixes que se sentin unes sobre unes altres.</p> + +<p><img alt="a big stack of boxes or crates sat on top of one another" src="https://mdn.mozillademos.org/files/9441/boxes.jpg" style="display: block; height: 463px; margin: 0px auto; width: 640px;"></p> + +<p>No us estranyeu, el disseny CSS es basa principalment en el <em>model de caixa</em>. Cada un dels blocs que ocupa espai en la vostra pàgina té propietats com aquesta:</p> + +<ul> + <li><code>padding</code>, l'espai al voltant dels continguts (per exemple, al voltant del text del paràgraf)</li> + <li><code>border</code>, la línia contínua que es troba just fora del farciment (padding)</li> + <li><code>margin</code>, l'espai al voltant de l'exterior de l'element</li> +</ul> + +<p><img alt="three boxes sat inside one another. From outside to in they are labelled margin, border and padding" src="https://mdn.mozillademos.org/files/9443/box-model.png" style="display: block; height: 450px; margin: 0px auto; width: 574px;"></p> + +<p><span class="short_text" id="result_box" lang="ca"><span>En aquesta</span> <span>secció</span> <span>també</span> <span>utilitzem</span><span>:</span></span></p> + +<ul> + <li><code>width</code> (d'un element)</li> + <li><code>background-color</code>, El color de fons del contingut d'un element i el farcit</li> + <li><code>color</code>, <span id="result_box" lang="ca"><span>el color</span> <span>del contingut d'un</span> <span>element</span> <span>(</span><span>en general el</span> <span>text</span><span>)</span></span></li> + <li><code>text-shadow</code>: <span id="result_box" lang="ca"><span>estableix una</span> <span>ombra sobre</span> <span>el text dins</span> <span>d'un element</span></span></li> + <li><code>display</code>: estableix la manera de visualitzar un element (no es preocupeu per això encara)</li> +</ul> + +<p>Per tant, anem a començar i afegir una mica més de CSS a la nostra pàgina! Seguiu afegint aquestes noves regles al final de la pàgina, i no tingueu por d'experimentar amb el canvi de valors per veure com resulta.</p> + +<h3 id="Canviar_el_color_de_la_pàgina"><span class="short_text" id="result_box" lang="ca"><span>Canviar el color</span> <span>de la pàgina</span></span></h3> + +<pre class="brush: css">html { + background-color: #00539F; +}</pre> + +<p>Aquesta regla estableix un color de fons a tota la pàgina. Canvieu el codi de color per qualsevol altre color que vau triar a l'hora de planificar el vostre lloc.</p> + +<h3 id="Ordenar_el_cos"><span class="short_text" id="result_box" lang="ca"><span class="alt-edited">Ordenar el cos</span></span></h3> + +<pre class="brush: css">body { + width: 600px; + margin: 0 auto; + background-color: #FF9500; + padding: 0 20px 20px 20px; + border: 5px solid black; +}</pre> + +<p>Ara l'element <code>body</code>. Hi ha bastants declaracions aquí, així que passarem per totes elles una per una:</p> + +<ul> + <li><code>width: 600px;</code> — Això obliga el cos a estar sempre a 600 píxels d'ample.</li> + <li><code>margin: 0 auto;</code> — En establir dos valors en una propietat com <code>margin</code> o <code>padding</code>, el primer valor afecta a la part superior <strong>i</strong> inferior de l'element (És el <code>0</code> en aquest cas), i el segon valor a la part esquerra <strong>i</strong> dreta (en aquest cas, <code>auto</code> és un valor especial que divideix l'espai horitzontal disponible uniformement entre l'esquerra i la dreta). També podeu utilitzar un, tercer o quart valor, tal com es documenta <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin#Values">aquí</a>.</li> + <li><code>background-color: #FF9500;</code> — com abans, això estableix el color de fons de l'element. He utilitzat una mena de color taronja vermellós per al cos (body) en lloc del blau fosc per a l'element <code>html</code>. Endevant i experimenteu. Sentir-vos lliures d'usar el blanc (<code>white</code>) o el que vulgueu.</li> + <li><code>padding: 0 20px 20px 20px;</code> — tenim quatre valors establerts en el farciment (padding), per fer una mica d'espai al voltant del nostre contingut. Aquesta vegada no hem establert cap farcit (padding) a la part superior del cos, i 20 píxels a l'esquerra, a baix i a la dreta. Els valors s'estableixen a dalt, dreta, a baix, esquerra, en aquest ordre.</li> + <li><code>border: 5px solid black;</code> — això simplement estableix una vora (border) negra sòlid de 5 píxels d'ample en tots els costats del cos.</li> +</ul> + +<h3 id="Posicionament_i_estil_del_títol_de_la_pàgina_principal">Posicionament i estil del títol de la pàgina principal</h3> + +<pre class="brush: css">h1 { + margin: 0; + padding: 20px 0; + color: #00539F; + text-shadow: 3px 3px 1px black; +}</pre> + +<p>Podeu haver notat que hi ha un buit horrible a la part superior del cos. Això succeeix perquè els navegadors apliquen algun <strong>estil predeterminat</strong> a l'element {{htmlelement("h1")}} (entre d'altres), tot i que no s'ha aplicat cap CSS en absolut! Això pot semblar una mala idea, però volem que fins i tot una pàgina web sense estil tingui la facilitat d'una lectura bàsica. Per desfer-nos de la bretxa sobreescriurem l'estil per defecte, establint <code>margin: 0;</code>.</p> + +<p>A continuació, hem establert el farciment (padding) superior i inferior de l'encapçalat a 20 píxels, i el text del encapçalat del mateix color que el color de fons de l'HTML.</p> + +<p>Una de les propietats més interessants que hem utilitzat aquí és <code>text-shadow</code> , la qual aplica una ombra de text el contingut de text de l'element. Els seus quatre valors són els següents:</p> + +<ul> + <li>El primer valor de píxel estableix el <strong>desplaçament horitzontal</strong> de l'ombra del text - quant es mou a través de: un valor negatiu ha de moure's cap a l'esquerra.</li> + <li>El segon valor de píxel estableix el <strong>desplaçament vertical</strong> de l'ombra del text - quant es mou cap avall, en aquest exemple; un valor negatiu ha de moure-ho cap amunt.</li> + <li>El tercer valor de píxel estableix el <strong>radi de desenfoquement</strong> de l'ombra - un valor major significarà una ombra més fosca.</li> + <li>El quart valor estableix el color base de l'ombra.</li> +</ul> + +<p>Un cop més, tracteu d'experimentar amb diferents valors per veure el que pot passar.</p> + +<h3 id="Centrar_la_imatge">Centrar la imatge</h3> + +<pre class="brush: css">img { + display: block; + margin: 0 auto; +}</pre> + +<p>Finalment, centrarem la imatge perquè es vegi millor. Podríem utilitzar el <code>marge: 0 auto</code>, nou truc que hem fet servir anteriorment per al cos, però també hem de fer alguna cosa més. L'element del cos és a <strong>nivell de bloc</strong>, el que significa que ocupa un espai a la pàgina i pot tenir marges i altres valors d'espaiat que se li apliquen. Les imatges, per altra banda, són elements <strong>en línia</strong>, el que significa que no poden. Així que per aplicar marges a la imatge, hem de donar a la imatge el comportament a nivell de bloc usant <code>display: block;</code>.</p> + +<div class="note"> +<p><strong>Note</strong>: No us preocupeu si encara no enteneu <code>display: block</code>; i la distinció a nivell de bloc/en línia. Ho fareu mentre estudieu CSS amb més profunditat. Podeu trobar més informació sobre els diferents valors de visualització disponibles a la nostra <a href="/en-US/docs/Web/CSS/display">pàgina de referència de la pantalla</a>.</p> +</div> + +<h2 id="Conclusió">Conclusió</h2> + +<p>Si heu seguit totes les instruccions d'aquest article, hareu d'acabar amb una pàgina que es vegi alguna cosa com això (també es pot <a href="http://mdn.github.io/beginner-html-site-styled/">veure la nostra versió aquí</a>):</p> + +<p><img alt="a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip." src="https://mdn.mozillademos.org/files/9455/website-screenshot-final.png" style="display: block; height: 1084px; margin: 0px auto; width: 940px;"></p> + +<p>Si us quedeu encallats, sempre podreu comparar el vostre treball amb el nostre <a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">codi d'exemple acabat en Github</a>.</p> + +<p>Aquí, en realitat només hem tractat una part superficial de CSS. Per obtenir més informació, visiteu el nostre <a href="https://developer.mozilla.org/en-US/Learn/CSS">tema d'aprenentatge CSS</a>.</p> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/ca/learn/getting_started_with_the_web/html_basics/index.html b/files/ca/learn/getting_started_with_the_web/html_basics/index.html new file mode 100644 index 0000000000..42ee2b4c30 --- /dev/null +++ b/files/ca/learn/getting_started_with_the_web/html_basics/index.html @@ -0,0 +1,218 @@ +--- +title: HTML basics +slug: Learn/Getting_started_with_the_web/HTML_basics +tags: + - Beginner + - CodingScripting + - HTML + - Learn + - Web + - 'l10n:priority' +translation_of: Learn/Getting_started_with_the_web/HTML_basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p>HTML (Hypertext Markup Language) és el codi que s'utilitza per estructurar i visualitzar una pàgina web i el seu contingut. Per exemple, el contingut podria està estructurat dins d'un conjunt de paràgrafs, una llista de vinyetes o l'ús d'imatges i taules de dades. Com el títol indica, aquest article us donarà un coneixement bàsic d'HTML i quina és la seva funció.</p> +</div> + +<h2 id="Llavors_què_és_HTML_en_realitat">Llavors, què és HTML, en realitat?</h2> + +<p>HTML no és un llenguatge de programació; és un <em>llenguatge de marcat</em>, i s'utilitza per dir-li al navegador com mostrar les pàgines web que visiteu. Pot ser tan complicat o tan simple com el dissenyador de pàgines web desitji que sigui. HTML consisteix en una sèrie de <strong>{{Glossary("element", "elements")}}</strong>, que s'utilitza per tancar o embolicar, diferents parts del contingut per fer que apareguin o actuïn d'una manera determinada. L'envoltant {{Glossary("tag", "tags")}} pot fer una paraula o imatge un hipervincle a un altre lloc, pot posar en cursiva les paraules, i pot fer que el tipus de lletra sigui més gran o més petit, i així successivament. Per exemple, prenguem la següent línia de contingut:</p> + +<pre>My cat is very grumpy</pre> + +<p>Si volguéssim que la línia es mantingués independent, podríem especificar que és un paràgraf, tancant-ho, en un element d'etiqueta de paràgraf ({{htmlelement ("p")}}:</p> + +<pre class="brush: html"><p>My cat is very grumpy</p></pre> + +<h3 id="Anatomia_d'un_element_HTML"><span id="result_box" lang="ca"><span>Anatomia</span> <span>d'un</span> <span>element</span> <span>HTML</span></span></h3> + +<p>Anem a explorar aquest element paràgraf una mica més lluny.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p> + +<p><span id="result_box" lang="ca"><span>Les</span> <span>parts</span> <span>principals</span> <span>del nostre</span> <span>element</span> <span>són</span><span>:</span></span></p> + +<ol> + <li><strong>L'etiqueta d'obertura:</strong> Aquest consisteix en el nom de l'element (en aquest cas, p), embolicat en <strong>claus angulars</strong> d'obertura i tancament. Això indica on comença l'element, o on comença a tenir efecte - en aquest cas és en el començament del paràgraf.</li> + <li><strong>L'etiqueta de tancament:</strong> Aquesta és la mateixa que l'etiqueta d'obertura, excepte que inclou una barra inclinada abans del nom de l'element. Això indica on acaba l'element - en aquest cas és en el final del paràgraf. No incloure una etiqueta de tancament és un dels errors comuns per a principiants i pot conduir a resultats estranys.</li> + <li><strong>El contingut:</strong> Aquest és el contingut de l'element, que en aquest cas és només text.</li> + <li><strong>L'element:</strong> L'etiqueta d'obertura, més de l'etiqueta de tancament, més el contingut, és igual a l'element.</li> +</ol> + +<p><span id="result_box" lang="ca"><span>Els</span> <span>elements</span> <span>també</span> <span>poden tenir</span> <span>atributs, </span><span>es</span> <span>veuen</span> <span>així</span><span>:</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p> + +<p>Els atributs contenen informació addicional sobre l'element que no voleu que aparegui en el contingut real. Aquí, <code>class</code> és el <em>nom</em> de l'atribut, i <code>editor-note</code> és el <em>valor</em> de l'atribut. L'atribut <code>class</code> li permet donar a l'element un identificador que pot ser utilitzat posteriorment per l'element de destí amb informació d'estil i altres coses.</p> + +<p>Un atribut sempre ha de tenir:</p> + +<ol> + <li>Un espai entre el mateix i el nom de l'element (o l'atribut anterior, si l'element ja té un o més atributs).</li> + <li>El nom de l'atribut, seguit d'un signe igual.</li> + <li>Obertura i tancament de cometes al voltant del valor de l'atribut. </li> +</ol> + +<h3 id="Niar_elements">Niar elements</h3> + +<p>Podeu posar, també, elements dins d'altres elements - això es diu <strong>niar</strong>. Si volguéssim afirmar que el nostre gat està de molt (VERY) mal humor, podríem embolicar la paraula "molt" ("very") en un element {{htmlelement("strong")}}, el que significa que la paraula està fortament emfatitzada:</p> + +<pre class="brush: html"><p>My cat is <strong>very</strong> grumpy.</p></pre> + +<p>No obstant això, necessiteu assegurar-vos que els seus elements estan correctament niats: en l'exemple anterior vam obrir l'element <p> en primer lloc, a continuació, l'element <strong>, per tant, primer hem de tancar l'element <strong>, després el <p >. El següent és incorrecte:</p> + +<pre class="example-bad brush: html"><p>My cat is <strong>very grumpy.</p></strong></pre> + +<p>Els elements han de ser oberts i tancats correctament perquè estiguin clarament dins o fora uns dels altres. Si es superposen com els de dalt, llavors el navegador web tractarà de fer una millor estimació del que estava tractant de dir, i així es poden obtenir resultats inesperats. Així que no ho feu!</p> + +<h3 id="Elements_buits">Elements buits</h3> + +<p>Alguns elements no tenen contingut, es diuen <strong>elements buits</strong>. Prengueu l'element {{htmlelement("img")}} que ja tenim en el nostre HTML:</p> + +<pre class="brush: html"><img src="images/firefox-icon.png" alt="My test image"></pre> + +<p>Aquest conté dos atributs, però no hi ha cap etiqueta de tancament <code></img></code>, i cap contingut intern. Això es deu al fet que un element image no embolica el contingut per tenir un efecte sobre ell. La seva finalitat és la d'inserir una imatge a la pàgina HTML, en el lloc que apareix.</p> + +<h3 id="Anatomia_d'un_document_HTML"><span id="result_box" lang="ca"><span>Anatomia</span> <span>d'un</span> <span>document HTML</span></span></h3> + +<p>Envolta els conceptes bàsics dels elements HTML individuals, els quals són poc útils per si mateixos. Ara veurem com els elements individuals es combinen per formar tota una pàgina HTML. Revisarem el codi que posarem en el nostre exemple <code>index.html</code> (que per primera vegada ens trobem amb el article <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Tractar amb arxius</a>):</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My test page</title> + </head> + <body> + <img src="images/firefox-icon.png" alt="My test image"> + </body> +</html></pre> + +<p><span class="short_text" id="result_box" lang="ca"><span>Aquí tenim</span><span>:</span></span></p> + +<ul> + <li><code><!DOCTYPE html></code> — el doctype. En la nit dels temps, quan HTML era jove (al voltant de 1991/2), els doctypes havien d'actuar com a enllaços a un conjunt de regles que la pàgina HTML havia de seguir per ser considerada un bon HTML, la qual cosa podria significar la verificació automàtica d'errors i altres coses útils. No obstant això, en aquests dies ningú realment es preocupa per ells, i realment només son un artefacte històric que ha de ser inclòs perquè tot funcioni bé. Per ara, això és tot el que necessiteu saber.</li> + <li><code><html></html></code> — l'element <code><html></code>. Aquest element envolta tot el contingut de la pàgina sencera, algunes vegades es coneix com l'element arrel.</li> + <li><code><head></head></code> — l'element <code><head></code>. Aquest element actua com a contenidor de totes les coses que voleu incloure a la pàgina HTML que <em>no és</em> el contingut que es mostre als espectadors de la vostre pàgina. Això inclou coses com {{Glossary("keyword", "keywords")}} i una descripció de la pàgina que voleu que aparegui en els resultats de cerca, CSS per l'estil del vostre contingut, declaracions de conjunt de caràcters, i més.</li> + <li><code><body></body></code> — l'element <code><body></code>. Això inclou tot el contingut que voleu mostrar als usuaris d'Internet quan visiten la vostre pàgina, ja sigui text, imatges, vídeos, jocs, reproducció de pistes d'àudio, o qualsevol altra cosa.</li> + <li><code><meta charset="utf-8"></code> — aquest element defineix el conjunt de caràcters que el document ha d'utilitzar per utf-8, inclou la majoria dels caràcters de tots els idiomes de la humanitat coneguts. En essència, ara podeu gestionar qualsevol contingut textual, possible, que vulgueu posar. No hi ha cap raó per no establir aquest, i pot ajudar a evitar alguns problemes més endavant.</li> + <li><code><title></title></code> — Estableix el títol de la pàgina, que és el títol que apareix a la pestanya del navegador quan es carrega la pàgina, i s'utilitza per descriure la pàgina quan aquest és un marcador/favorit.</li> +</ul> + +<h2 id="Imatges">Imatges</h2> + +<p>Anem a centrar de nou la nostra atenció en l'element image:</p> + +<pre class="brush: html"><img src="images/firefox-icon.png" alt="My test image"></pre> + +<p>Com hem dit abans, incrusta una imatge a la nostra pàgina en la posició que apareix. Això ho fa a través de l'atribut <code>src</code> (source), que conté la ruta d'accés al nostre arxiu d'imatge.</p> + +<p>També hem inclòs un atribut <code>alt</code> (alternatiu). En aquest atribut, s'especifica un text descriptiu per als usuaris que no puguin veure la imatge, possiblement pel fet que:</p> + +<ol> + <li>Tenen trastorns visuals. Els usuaris amb impediments visuals significatius sovint utilitzen eines anomenades lectors de pantalla (Screen Readers) per llegir el text alternatiu.</li> + <li>Alguna cosa ha anat malament provocant que la imatge no es vegi. Per exemple, tractar deliberadament de canviar la ruta d'accés dins del seu atribut src perquè sigui incorrecta. Si guardeu i torneu a carregar la pàgina, hauríeu de veure alguna cosa com això en lloc de la imatge:</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9349/alt-text-example.png" style="display: block; height: 36px; margin: 0px auto; width: 108px;"></p> + +<p>Les paraules clau sobre el text alternatiu són "text descriptiu". El text alternatiu escrit ha de proporcionar al lector informació suficient per tenir una bona idea del que la imatge transmet. En aquest exemple, el nostre text actual "La meva imatge de prova" no és bo en absolut. Una alternativa molt millor per al nostre logotip de Firefox seria "El logo de Firefox: una guineu en flames que envolta la Terra."</p> + +<p><strong>Tracteu d'arribar amb un text alternatiu millor per a la vostre imatge ara.</strong></p> + +<div class="note"> +<p><strong>Nota</strong>: Per saber més sobre l'accessibilitat en <a href="/en-US/docs/Web/Accessibility">MDN's Accessibility landing page</a>.</p> +</div> + +<h2 id="Marcat_de_text">Marcat de text</h2> + +<p>En aquesta secció es descriuen alguns dels elements HTML bàsics que utilitzareu per marcar el text.</p> + +<h3 id="Encapçalaments">E<span id="result_box" lang="ca"><span>ncapçalaments</span></span></h3> + +<p>Els elements d'encapçalat permeten especificar que certes parts del seu contingut són encapçalats o subtítols del seu contingut. De la mateixa manera que un llibre té un títol principal, títols de capítols i subtítols, un document HTML també pot. HTML conté sis nivells d'encapçalament, {{htmlelement("h1")}}–{{htmlelement("h6")}} encara que normalment només s'utilitza 3-4 en la majoria de les vegades:</p> + +<pre class="brush: html"><h1>My main title</h1> +<h2>My top level heading</h2> +<h3>My subheading</h3> +<h4>My sub-subheading</h4></pre> + +<p>Ara tracteu d'afegir un títol adequat a la vostre pàgina HTML just per sobre de l'element {{htmlelement("img")}}.</p> + +<h3 id="Paràgrafs">Paràgrafs</h3> + +<p>Com es va explicar anteriorment, els elements {{htmlelement("p")}} són per contenir paràgrafs de text; Els utilitzareu freqüentment quan marqueu un contingut de text normal:</p> + +<pre class="brush: html"><p>This is a single paragraph</p></pre> + +<p>Afegir el text de mostra<strong> (</strong>ha de tenir el que <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">hauria de semblar al vostre lloc web?</a><strong>) </strong>en un o uns pocs paràgrafs, col·locats directament sota de l'element <img>.</p> + +<h3 id="Llistes">Llistes</h3> + +<p>Una gran quantitat de contingut de la web son llistes HTML i té elements especials per a aquestes. El marcat de les llistes es compon sempre d'almenys dos elements. Els tipus de llistes més comuns son ordenades i desordenades:</p> + +<ol> + <li><strong>Llistes desordenades</strong> són llistes en què l'ordre dels elements no importa, com una llista de la compra. Aquestes estan embolicades en un element {{htmlelement("ul")}}.</li> + <li><strong>Llistes ordenades</strong> són llistes en què l'ordre dels elements és important, com una recepta. Aquestes estan embolicades en un element {{htmlelement("ol")}}.</li> +</ol> + +<p>Cada element dins de les llistes es col·loca dins d'un element {{htmlelement("li")}} (llista d'elements).</p> + +<p>Per exemple, si volguéssim convertir la part del fragment del següent paràgraf en una llista:</p> + +<pre class="brush: html"><p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p></pre> + +<p>Podríem modificar el marcat a això:</p> + +<pre class="brush: html"><p>At Mozilla, we’re a global community of</p> + +<ul> + <li>technologists</li> + <li>thinkers</li> + <li>builders</li> +</ul> + +<p>working together ... </p></pre> + +<p><strong>Intenteu afegir una llista ordenada o desordenada a la vostre pàgina d'exemple.</strong></p> + +<h2 id="Enllaços">Enllaços</h2> + +<p>Els enllaços són molt importants, perquè són els que converteixen a la Web en UN LLOC WEB. Per afegir un vincle, necessiteu utilitzar un element simple - {{htmlelement("a")}} - sent l'abreviatura de "ancora". Per posar el text en el seu apartat en un enllaç, seguiu aquests passos:</p> + +<ol> + <li>Trieu un text. Triem el text "Manifest de Mozilla".</li> + <li>Emboliqueu el text en un element <a>, així: + <pre class="brush: html"><a>Mozilla Manifesto</a></pre> + </li> + <li>Doneu a l'element <a> un atribut href, així: + <pre class="brush: html"><a href="">Mozilla Manifesto</a></pre> + </li> + <li>Ompliu el valor d'aquest atribut amb l'adreça web que desitjeu enllaçar el vincle: + <pre class="brush: html"><a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a></pre> + </li> +</ol> + +<p>És possible obtenir resultats inesperats si s'omet la part <code>https://</code> o <code>http://</code>, anomenat el protocol, al principi de l'adreça web. Després de fer un enllaç, feu-hi clic per assegurar-vos que us està enviant on volíeu.</p> + +<div class="note"> +<p><code>href</code> podria aparèixer com una elecció bastant fosca per a un nom d'atribut al principi. Si teniu problemes per recordar-la, recordeu que representa una <em><strong>h</strong>ypertext <strong>ref</strong>erence</em>.</p> +</div> + +<p><strong>Afegiu un enllaç a la vostre pàgina d'ara, si no ho heu fet encara.</strong></p> + +<h2 id="Conclusió">Conclusió</h2> + +<p>Si heu seguit totes les instruccions d'aquest article, heu d'acabar amb una pàgina que s'assembla a la de sota (també es pot <a href="http://mdn.github.io/beginner-html-site/">veure aquí</a>):<br> + <br> + <img alt="A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text" src="https://mdn.mozillademos.org/files/9351/finished-test-page-small.png" style="display: block; height: 838px; margin: 0px auto; width: 716px;"></p> + +<p>Si us quedeu encallats, sempre podeu comparar el vostre treball amb el nostre <a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">codi d'exemple acabat</a> en Github.</p> + +<p>Aquí, en realitat, només hem tractat una part superficial d'HTML. Per obtenir més informació, visiteu el nostre <a href="/en-US/Learn/HTML">HTML Learning topic</a>.</p> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/ca/learn/getting_started_with_the_web/index.html b/files/ca/learn/getting_started_with_the_web/index.html new file mode 100644 index 0000000000..2681cd612f --- /dev/null +++ b/files/ca/learn/getting_started_with_the_web/index.html @@ -0,0 +1,62 @@ +--- +title: Introducció a la Web +slug: Learn/Getting_started_with_the_web +tags: + - Beginner + - CSS + - Design + - Disseny + - Guide + - Guía + - HTML + - Index + - Principiant + - 'l10n:priority' + - publishing + - teoria + - theory +translation_of: Learn/Getting_started_with_the_web +--- +<div>{{LearnSidebar}}</div> + +<div class="summary"> +<p><em>Iniciació a la Web</em> és una sèrie concisa que us introdueix en als aspectes pràctics de desenvolupament web. Podreu configurar les eines que necessiteu per construir una pàgina web senzilla i publicar el vostre propi codi.</p> +</div> + +<h2 id="La_història_del_vostre_primer_lloc_web">La història del vostre primer lloc web</h2> + +<p>És molta feina crear un lloc web professional, per si sou nous en el desenvolupament web us recomanem començar a poc a poc. No es tracta de construir un altre Facebook immediatament, però no és difícil aconseguir d'una manera senzilla el vostre propi lloc web en xarxa, així que començarem per aquí.</p> + +<p>Treballant a través dels articles que figuren en ordre a continuació, passareu del no-res a aconseguir la vostre primera pàgina web en línia. Som-hi!</p> + +<h3 id="Instal.lació_del_programari_bàsic"><a href="/ca/Learn/Getting_started_with_the_web/Installing_basic_software">Instal.lació del programari bàsic</a></h3> + +<p>Quan es tracta d'eines per a la construcció d'un lloc web, hi ha molt per triar. Si esteu començant, pot ser confós per la varietat d'editors de codi, marcs i eines de prova que hi ha. En la <a href="/ca/docs/Learn/Getting_started_with_the_web/Instal·lació_bàsica_programari">instal·lació del programari bàsic</a> t'ensenyarem pas a pas com instal·lar només el programari que necessites per començar un desenvolupament web bàsic.</p> + +<h3 id="Com_serà_el_teu_lloc_web"><a href="/ca/Learn/Getting_started_with_the_web/Quin_aspecte_tindrà_vostre_lloc_web">Com serà el teu lloc web?</a></h3> + +<p>Abans de començar a escriure el codi del vostre lloc web, en primer lloc ho heu de planificar. Quina informació es mostrarà? Quins tipus de lletra i colors utilitzar? <a href="/ca/Learn/Getting_started_with_the_web/Quin_aspecte_tindrà_vostre_lloc_web">Com serà el teu lloc web?</a> Descriure un mètode senzill a seguir per planificar el contingut i el disseny del lloc.</p> + +<h3 id="Tractar_amb_arxius"><a href="/ca/docs/Learn/Getting_started_with_the_web/Tractar_amb_arxius">Tractar amb arxius</a></h3> + +<p>Un lloc web es compon de molts arxius: contingut de text, codi, fulles d'estil, contingut multimèdia, i successivament. Quan esteu construint un lloc web, és necessari reunir aquests arxius en una estructura sensible i assegurar-se que poden parlar l'un a l'altre. <a href="/ca/docs/Learn/Getting_started_with_the_web/Tractar_amb_arxius">Tractar amb arxius</a> explica com configurar una estructura raonable d'arxius per al vostra lloc web i quins aspectes s'han de tenir en compte.</p> + +<h3 id="HTML_bàsics"><a href="/ca/Learn/Getting_started_with_the_web/HTML_basics">HTML bàsics</a></h3> + +<p>Llenguatge de marcat d'hipertext (HTML) és el codi que s'utilitza per estructurar el contingut de la vostra web, donant-li sentit i propòsit. Per exemple, el meu contingut és un conjunt de paràgrafs, o una llista de vinyetes? He inserit imatges a la meva pàgina? Tinc una taula de dades? Sense aclaparar-vos, els conceptes <a href="https://developer.mozilla.org/ca/Learn/Getting_started_with_the_web/HTML_basics">bàsics d'HTML</a> proporcionen suficient informació per familiaritzar-vos amb HTML.</p> + +<h3 id="CSS_bàsics"><a href="/ca/Learn/Getting_started_with_the_web/CSS_bàsic">CSS bàsics</a></h3> + +<p>Els fulls d'estil en cascada (CSS) és el codi que s'utilitza per donar estil el vostre lloc web. Per exemple, voleu que el text sigui negre o vermell? On s'ha de dibuixar el contingut en la pantalla? Quines imatges de fons i colors han d'usar-se per decorar el vostre lloc web? <a href="/ca/Learn/Getting_started_with_the_web/CSS_bàsic">CSS bàsic</a> us portarà a través del que necessiteu per començar.</p> + +<h3 id="JavaScript_bàsics"><a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript bàsics</a></h3> + +<p>JavaScript és el llenguatge de programació que s'utilitza per afegir característiques interactives al vostra lloc web, per exemple, jocs, coses que succeeixen quan es pressionen els botons o s'introdueixen les dades en els formularis, els efectes dinàmics d'estil, animació i molt més. Els conceptes <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">bàsics de JavaScript</a> us dnarà una idea del que és possible amb aquest llenguatge emocionant, i com començar.</p> + +<h3 id="Publicació_del_vostre_lloc_web"><a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Publicació del vostre lloc web</a></h3> + +<p>Un cop hàgiu acabat d'escriure el codi i l'organització dels arxius que componen el vostre lloc web, cal posar-ho tot en línia perquè la gent el pugui trobar. <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Publicar el codi d'exemple</a> es descriu com obtenir el teu simple codi de mostra en línia amb el mínim esforç.</p> + +<h3 id="Com_funciona_el_web"><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">Com funciona el web</a></h3> + +<p>Quan accediu al vostre lloc web favorit, un munt de coses complicades succeeixen en el fons que no podeu saber. <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">Com funciona la web</a> descriu el que succeeix quan veieu una pàgina web en el vostra ordinador.</p> diff --git a/files/ca/learn/getting_started_with_the_web/instal·lació_bàsica_programari/index.html b/files/ca/learn/getting_started_with_the_web/instal·lació_bàsica_programari/index.html new file mode 100644 index 0000000000..aa431f3199 --- /dev/null +++ b/files/ca/learn/getting_started_with_the_web/instal·lació_bàsica_programari/index.html @@ -0,0 +1,67 @@ +--- +title: Instal·lació bàsica del programari +slug: Learn/Getting_started_with_the_web/Instal·lació_bàsica_programari +tags: + - Beginner + - Browser + - Learn + - Setup + - Tools + - WebMechanics + - 'l10n:priority' + - text editor +translation_of: Learn/Getting_started_with_the_web/Installing_basic_software +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p>En la <em><strong>Instal·lació de programari bàsic</strong></em>, us mostrarem les eines que necessiteu per a començar amb el desenvolupament web, i com instal·lar-les correctament.</p> +</div> + +<h2 id="Quines_eines_fan_servir_els_professionals"><span id="result_box" lang="ca"><span>Quines eines</span> <span>fan servir els professionals</span></span>?</h2> + +<ul> + <li><strong>Un ordinador</strong>. Potser això sona obvi per a algunes persones, però alguns de vosaltres esteu llegint aquest article des del vostre telèfon o un ordinador de la biblioteca. Per a un desenvolupament web seriós, és millor invertir en un ordinador d'escriptori (Windows, Mac, o Linux).</li> + <li><strong>Un editor de text</strong>, per escriure codi. Tant pot ser un editor de text (per exemple <a href="http://brackets.io/">Brackets</a>, <a href="https://atom.io/">Atom</a> o <a href="https://code.visualstudio.com/">Visual Studio Code</a>), com un editor híbrid (per exemple <a href="https://www.adobe.com/products/dreamweaver.html">Dreamweaver</a> o <a href="https://www.jetbrains.com/webstorm/">WebStorm</a>). Els editors de documents d'oficina no són adequats per a aquest ús, ja que es basen en elements ocults que interfereixen amb els motors de renderitzat utilitzats pels navegadors web.</li> + <li><strong>Navegadors web</strong>, per posar a prova el codi. Actualment els navegadors més utilitzats són <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> i <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>. També heu de provar com funciona el vostre lloc en dispositius mòbils i en qualsevol navegador antic en què el seu públic objectiu encara pugui està utilitzant-lo extensivament (com IE 8-10).</li> + <li><strong>Un editor de gràfics</strong>, com <a href="http://www.gimp.org/">GIMP</a>, <a href="http://www.getpaint.net/">Paint.NET</a> o <a href="https://www.adobe.com/products/photoshop.html">Photoshop</a>, per crear imatges per a les vostres pàgines web.</li> + <li><strong>Un sistema de control de versions</strong>, per administrar arxius en servidors, col·laborar en un projecte amb un equip, compartir codi i actius, i evitar conflictes d'edició. En aquest moment <a href="http://git-scm.com/">Git</a> és l'eina de control de versions més popular, i el servei d'allotjament de codi en <a href="https://github.com/">GitHub</a> basat en Git, és també molt popular.</li> + <li><strong>Un programa FTP</strong>, utilitzat en els serveis d'allotjament web més antics per a administrar els arxius en els servidors (<a href="http://git-scm.com/">Git</a> està reemplaçant cada vegada més els FTP per a aquest propòsit). Hi ha un munt de programes (S)FTP disponibles, incloent <a href="https://cyberduck.io/">Cyberduck</a>, <a href="http://fetchsoftworks.com/">Fetch</a> i <a href="https://filezilla-project.org/">FileZilla</a>.</li> + <li><strong>Un sistema d'automatització</strong>, com <a href="http://gruntjs.com/">Grunt</a> o <a href="http://gulpjs.com/">Gulp</a>, per a realitzar tasques repetitives de forma automàtica, per exemple minifying codi i execució de proves.</li> + <li>Plantilles, biblioteques, entorns de treball, etc., per accelerar l'escriptura de funcions comunes.</li> + <li>Moltres altres eines!</li> +</ul> + +<h2 id="Quines_eines_realment_necessito_ara_mateix"><span id="result_box" lang="ca"><span>Quines eines</span> <span>realment</span> <span>necessito</span><span>, ara</span> <span>mateix</span><span>?</span></span></h2> + +<p>Sembla una llista aterridora, però, afortunadament, es pot començar en el desenvolupament web sense saber-ne res de la majoria. En aquest article només en configurarem les mínimes - un editor de text i alguns navegadors web moderns.</p> + +<h3 id="Instal·lació_dun_editor_de_text">Instal·lació d'un editor de text</h3> + +<p>Probablement ja teniu un editor de text bàsic en l'equip. Per defecte, Windows inclou el <a href="https://en.wikipedia.org/wiki/Microsoft_Notepad">Notepad</a> i OS X ve amb <a href="https://en.wikipedia.org/wiki/TextEdit">TextEdit</a>. Les distribucions de Linux varien; Ubuntu ve amb <a href="https://en.wikipedia.org/wiki/Gedit">gedit</a> per defecte.</p> + +<p>Per al desenvolupament web, segurament treballareu millor amb altres eines que el NotePad o el TextEdit. Es recomana començar amb <a href="https://brackets.io">Brackets</a>, que és un editor gratuït que ofereix vistes prèvies i suggeriments per al codi.</p> + +<h3 id="Instal·lació_de_navegadors_web_moderns">I<span id="result_box" lang="ca"><span>nstal·lació</span> <span>de navegadors</span> <span>web moderns</span></span></h3> + +<p>Per ara, només haurem d'instal·lar un parell de navegadors web d'escriptori per provar el nostre codi. Seleccioneu el vostre sistema operatiu i feu clic a l'enllaç corresponent per descarregar els instal·ladors per als vostres navegadors preferits:</p> + +<ul> + <li>Linux: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>.</li> + <li>Windows: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a>, <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a> (Windows 10 ve amb Edge per defecte. Si teniu Windows 7 o superior, podeu instal·lar IE 11; en qualsevol altre cas us caldrà instal·lar un navegador alternatiu)</li> + <li>Mac: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a> (Safari ve amb iOS i macOS per defecte)</li> +</ul> + +<p>Abans de continuar, heu d'instal·lar almenys dos d'aquests navegadors i tenir-los llestos per a la prova.</p> + + + +<h3 id="Instal·lació_dun_servidor_web_local">Instal·lació d'un servidor web local</h3> + +<p>Alguns exemples, per a que funcionin correctament caldrà executar-los amb un servidor web local instal·lat. Podeu esbrinar com fer-ho a <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">Com instal·lar i configurar un servidor local de test?</a> (en anglès)</p> + + + +<p>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/ca/learn/getting_started_with_the_web/javascript_bàsic/index.html b/files/ca/learn/getting_started_with_the_web/javascript_bàsic/index.html new file mode 100644 index 0000000000..e9b90830ca --- /dev/null +++ b/files/ca/learn/getting_started_with_the_web/javascript_bàsic/index.html @@ -0,0 +1,394 @@ +--- +title: JavaScript bàsic +slug: Learn/Getting_started_with_the_web/JavaScript_bàsic +tags: + - Beginner + - CodingScripting + - JavaScript + - Learn + - Web + - 'l10n:priority' +translation_of: Learn/Getting_started_with_the_web/JavaScript_basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p>JavaScript és un llenguatge de programació que afegeix interactivitat al vostre lloc web (per exemple: jocs, respostes quan es premen els botons o les dades introduïdes en formularis, estil dinàmic, animació). Aquest article us ajudarà a començar amb aquest llenguatge emocionant i us donarà una idea del que és possible.</p> +</div> + +<h2 id="Què_és_JavaScript_realment"><span class="short_text" id="result_box" lang="ca"><span>Què</span> <span>és</span> <span>JavaScript,</span> <span>realment</span><span>?</span></span></h2> + +<p>{{Glossary("JavaScript")}} ("JS" abreujat) és un veritable {{Glossary("Dynamic programming language", "llenguatge dinàmic de programació")}} en tota regla, que quan s'aplica a un document {{Glossary("HTML")}}, pot proporcionar interactivitat dinàmica en els llocs web. Va ser inventat per Brendan Eich, cofundador del projecte Mozilla, la Fundació Mozilla i Mozilla Corporation.</p> + +<p>Javascript és increïblement versàtil. Podeu començar a poc a poc, amb carrusels, galeries d'imatges, dissenys fluctuants i les respostes a les pulsacions de botó. Amb més experiència sereu capaços de crear jocs, gràfics animats en 2D i 3D, aplicacions completes de bases de dades i molt més!</p> + +<p>JavaScript per si mateix és bastant compacte però molt flexible. Els desenvolupadors han escrit una gran varietat d'eines que complementen el nucli del llenguatge JavaScript, el desbloqueig d'una gran quantitat de funcionalitats extra amb el mínim esforç. Aquestes inclouen:</p> + +<ul> + <li>Interfícies de programació d'aplicacions ({{Glossary("API","APIs")}}) en els navegadors web, proporcionant funcionalitats com la creació dinàmica HTML i l'establiment d'estils CSS, recol·lecció i manipulació d'una seqüència de vídeo des de la càmera web de l'usuari, o la generació de gràfics 3D i mostres d'àudio.</li> + <li>APIs de tercers per permetre als desenvolupadors incorporar funcionalitat en els seus llocs d'altres proveïdors de contingut, com Twitter o Facebook.</li> + <li>Marcs de tercers i biblioteques que podreu aplicar al vostre HTML els quals us permetrà construir ràpidament llocs i aplicacions.</li> +</ul> + +<h2 id="Un_exemple_hola_món"><span id="result_box" lang="ca"><span>Un exemple</span> <span>"</span><span>hola</span> <span>món</span><span>"</span></span></h2> + +<p>La secció anterior pot sonar molt emocionant, i així ha de ser - i Javascript és una de les tecnologies web més vives i quan comenceu a ser bons en el seu ús, els vostres llocs web entraran en una nova dimensió de poder i creativitat.</p> + +<p>No obstant això, Javascript és una mica més complex per sentir-se còmodes que amb HTML i CSS. Podria ser necessari començar a poc a poc i seguir treballant en petits passos consistents. Per començar, us mostrarem com afegir una mica de Javascript bàsic a la vostre pàgina, creant un "Hello world!" d'exemple (<a href="https://en.wikipedia.org/wiki/%22Hello,_World!%22_program">l'estandard en els exemples bàsics de programació</a>).</p> + +<div class="warning"> +<p><strong>Important</strong>: Si no ho heu estat seguint juntament amb la resta del nostre curs, <a href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip">descarregueu el codi exemple</a> i utilitzar-ho com a punt de partida.</p> +</div> + +<ol> + <li>En primer lloc, aneu al vostre lloc de prova i creeu una nova carpeta amb el nom 'scripts' (sense les cometes). Després, en la nova carpeta scripts que acabeu de crear, creeu un nou arxiu anomenat <code>main.js</code>. Guardeu-ho en la carpeta <code>scripts</code>.</li> + <li>A continuació, en l'arxiu <code>index.html</code> introduir l'element següent en una nova línia just abans de l'etiqueta de tancament <code></body></code>: + <pre class="brush: html"><script src="scripts/main.js"></script></pre> + </li> + <li>La seva funció fa bàsicament la mateixa feina que l'element {{htmlelement("link")}} per CSS - s'aplica el codi JavaScript a la pàgina, de manera que pot tenir un efecte sobre el codi HTML (juntament amb el CSS, i qualsevol altra cosa en la pàgina).</li> + <li> + <p>Ara afegiu el codi següent a l'arxiu <code>main.js</code>:</p> + + <pre class="brush: js">var myHeading = document.querySelector('h1'); +myHeading.textContent = 'Hello world!';</pre> + </li> + <li>Finalment, assegureu-vos que els fitxers HTML i JavaScript es guarden i <code>index.html</code> es carrega en el navegador. Haurieu de veure alguna cosa com el següent:<img alt="" src="https://mdn.mozillademos.org/files/9543/hello-world.png" style="display: block; height: 236px; margin: 0px auto; width: 806px;"></li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: La raó per la qual hem posat l'element {{htmlelement("script")}} prop de la part inferior de l'arxiu HTML és que l'HTML és carregat pel navegador en l'ordre en què apareix en l'arxiu. Si el Javascript es carrega primer i se suposa que afecta a l'HTML sota ell, pot ser que no funcioni, ja que el Javascript es carregaria abans de l'HTML que se suposa que funciona. Per tant, col·locar Javascript prop de la part inferior de la pàgina HTML és sovint la millor estratègia.</p> +</div> + +<h3 id="Què_va_passar"><span id="result_box" lang="ca"><span>Què va passar?</span></span></h3> + +<p>Al text de la capçalera ara s'ha canviat a "Hola, món!" amb l'ús de JavaScript. Això s'ha fet utilitzant primer una funció denominada {{domxref("Document.querySelector", "querySelector()")}} per obtenir una referència al vostre encapçalament, i emmagatzemar-ho en una variable denominada myHeading. Això és molt similar al que vam fer amb l'ús de selectors CSS. Quan es vol fer alguna cosa en un element, primer heu de seleccionar-lo.</p> + +<p>Després d'això, s'estableix el valor de la variable <code>myHeading</code> amb la propietat {{domxref("Node.textContent", "textContent")}} (que representa el contingut del encapçalament) a "Hola, món!".</p> + +<h2 id="Curs_intensiu_bàsic_del_llenguatge">Curs intensiu bàsic del llenguatge</h2> + +<p>Anem a explicar algunes de les característiques bàsiques del llenguatge JavaScript, per donar-vos una major comprensió de com funciona tot. Millor encara, aquestes característiques són comunes a tots els llenguatges de programació. Si domineu aquests fonaments, esteu en el camí de ser capaços de programar gairebé qualsevol cosa!</p> + +<div class="warning"> +<p><strong>Important</strong>:En aquest article, intenteu introduir les línies de codi d'exemple en la vostra consola de Javascript per veure què succeeix. Per a més detalls sobre les consoles de JavaScript, consulteu <a href="/en-US/Learn/Discover_browser_developer_tools">Descobrir eines per a desenvolupadotrs del navegador</a>.</p> +</div> + +<h3 id="Variables">Variables</h3> + +<p>{{Glossary("Variable", "Variables")}} són contenidors en els quals es poden emmagatzemar valors. Es comença per declarar una variable amb la paraula clau var, seguit pel nom que voleu nomenar:</p> + +<pre class="brush: js">var myVariable;</pre> + +<div class="note"> +<p><strong>Nota</strong>: Totes les sentències en JavaScript han d'acabar amb un punt i coma, per indicar que aquí és on acaba la sentència. Si no incloeu aquests, es poden obtenir resultats inesperats.</p> +</div> + +<div class="note"> +<p><strong>Nota</strong>: Podeu nomenar una variable gairebé qualsevol cosa, però hi ha algunes restriccions de nom (vegeu <a href="http://www.codelifter.com/main/tips/tip_020.shtml">aquest article sobre les regles de denominació de les variables</a>). Si no esteu segur, podeu <a href="https://mothereff.in/js-variables">comprovar el nom de la variable</a> per veure si és vàlida.</p> +</div> + +<div class="note"> +<p><strong>Nota</strong>: JavaScript és sensible a majúscules - myVariable és una variable diferent a myvariable. Si si esteu tenint problemes en el vostre codi, comprobeu el cos!</p> +</div> + +<p>Després de declarar una variable, podeu donar-li un valor:</p> + +<pre class="brush: js">myVariable = 'Bob';</pre> + +<p>Podeu fer les dues operacions en la mateixa línia si ho desitjeu:</p> + +<pre class="brush: js">var myVariable = 'Bob';</pre> + +<p>Podeu recuperar el valor amb només cridar la variable pel seu nom:</p> + +<pre class="brush: js">myVariable;</pre> + +<p>Després de donar a una variable un valor, posteriorment podeu optar per canviar-ho:</p> + +<pre>var myVariable = 'Bob'; +myVariable = 'Steve';</pre> + +<p>Recordeu que les variables tenen diferents <a href="/en-US/docs/Web/JavaScript/Data_structures">tipus de dades</a>:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="row">Variable</th> + <th scope="col">Explicació</th> + <th scope="col">Exemple</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">{{Glossary("String")}}</th> + <td>Una seqüència de text coneguda com una cadena. Per indicar que la variable és una cadena, heu de tancar-la entre cometes.</td> + <td><code>var myVariable = 'Bob';</code></td> + </tr> + <tr> + <th scope="row">{{Glossary("Number")}}</th> + <td>Un nombre. Els nombres no tenen cometes al voltant d'ells.</td> + <td><code>var myVariable = 10;</code></td> + </tr> + <tr> + <th scope="row">{{Glossary("Boolean")}}</th> + <td>Un valor True/False. Les paraules true i false són paraules clau especials en JS, i no necessiten cometes.</td> + <td><code>var myVariable = true;</code></td> + </tr> + <tr> + <th scope="row">{{Glossary("Array")}}</th> + <td>Una estructura que permet emmagatzemar diversos valors en una sola referència.</td> + <td><code>var myVariable = [1,'Bob','Steve',10];</code><br> + Referir-se a cada membre de la matriu d'aquesta manera:<br> + <code>myVariable[0]</code>, <code>myVariable[1]</code>, etc.</td> + </tr> + <tr> + <th scope="row">{{Glossary("Object")}}</th> + <td>Bàsicament, qualsevol cosa. Tot en JavaScript és un objecte, i pot ser emmagatzemat en una variable. Tingueu això en compte a mesura que apreneu.</td> + <td><code>var myVariable = document.querySelector('h1');</code><br> + <span class="short_text" id="result_box" lang="ca"><span>Tots</span> <span>els</span> <span>exemples</span> <span>anteriors</span> <span>també</span></span></td> + </tr> + </tbody> +</table> + +<p>Llavors, per què necessitem les variables? Bé, es necessiten les variables per fer alguna cosa interessant en la programació. Si els valors no poden canviar, llavors no es pot fer res dinàmic, com personalitzar un missatge de salutació o canviar la imatge mostrada en una galeria d'imatges.</p> + +<h3 id="Comentaris">Comentaris</h3> + +<p>Podeu posar comentaris en el codi JavaScript, de la mateixa manera que en el CSS:</p> + +<pre class="brush: js">/* +Everything in between is a comment. +*/</pre> + +<p>Si el vostre comentari no conté salts de línia, sovint és més fàcil de posar-ho darrere de dues barres d'aquest tipus:</p> + +<pre class="brush: js" style="font-size: 14px;">// This is a comment +</pre> + +<h3 id="Operadors">Operadors</h3> + +<p>Un {{Glossary("operator")}} és un símbol matemàtic que produeix un resultat basat en dos valors (o variables). A la següent taula es pot veure alguns dels operadors més simples, juntament amb alguns exemples per provar-ho a la consola de JavaScript.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="row">Operador</th> + <th scope="col">Explicació</th> + <th scope="col">Símbol(s)</th> + <th scope="col">Exemple</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">suma/concatenació</th> + <td><span id="result_box" lang="ca"><span>S'utilitza</span> <span>per sumar</span> <span>dos nombres,</span> <span>o enganxar</span> <span>dues cadenes</span> <span>juntes.</span></span></td> + <td><code>+</code></td> + <td><code>6 + 9;<br> + "Hello " + "world!";</code></td> + </tr> + <tr> + <th scope="row">resta, multiplicació, divisió</th> + <td><span id="result_box" lang="ca"><span>Aquests</span> <span>fan el que</span> <span>s'espera que</span> <span>ho facin en</span> <span>les</span> <span>matemàtiques</span> <span>bàsiques.</span></span></td> + <td><code>-</code>, <code>*</code>, <code>/</code></td> + <td><code>9 - 3;<br> + 8 * 2; // multiplicar en JS és un </code> <span id="result_box" lang="ca"><span>asterisc</span></span><br> + <code>9 / 3;</code></td> + </tr> + <tr> + <th scope="row">operador d'assignació</th> + <td>Heu vist això ja: s'assigna un valor a una variable.</td> + <td><code>=</code></td> + <td><code>var myVariable = 'Bob';</code></td> + </tr> + <tr> + <th scope="row">operador d'identitat</th> + <td>Fa una prova per veure si dos valors són iguals entre si, i retorna un resultat <code>true/false</code> (booleà).</td> + <td><code>===</code></td> + <td><code>var myVariable = 3;<br> + myVariable === 4;</code></td> + </tr> + <tr> + <th scope="row">No, No igual</th> + <td>Retorna el valor lògic contrari del que precedeix; converteix un <code>true</code> en un <code>false</code>, etc. Quan s'utilitza juntament amb l'operador d'igualtat, el operador de negació comprova si dos valors són <em>no iguals</em>.</td> + <td><code>!</code>, <code>!==</code></td> + <td> + <p>L'expressió bàsica és <code>true</code>, però la comparació retorna <code>false</code>, perquè l'hem negat:</p> + + <p><code>var myVariable = 3;<br> + !(myVariable === 3);</code></p> + + <p>Aquí estem provant "és <code>myVariable</code> NO és igual a 3". Això retorna <code>false</code>, perquè <code>myVariable</code> ÉS igual a 3.</p> + + <p><code><code>var myVariable = 3;</code><br> + myVariable !== 3;</code></p> + </td> + </tr> + </tbody> +</table> + +<p>Hi ha molts més operadors per explorar, però això és suficient per ara. Veure <a href="/en-US/docs/Web/JavaScript/Reference/Operators">Expressions i operadors</a> per obtenir una llista completa.</p> + +<div class="note"> +<p><strong>Nota</strong>: La barreja de tipus de dades pot donar lloc a alguns resultats estranys al realitzar càlculs, així que aneu amb compte quan us referiu a les variables correctament, i obtenir els resultats que espereu. Per exemple, introduïu "35" + "25" a la consola. Per què no s'obté el resultat que esperavau? A causa de que les cometes converteixen els nombres en cadenes, pel que acabat en concatenació de cadenes en lloc d'afegir nombres. Si introduiu, 35 + 25 Obtindreu el resultat correcte.</p> +</div> + +<h3 id="Condicionals">Condicionals</h3> + +<p>Els condicionals són estructures de codi que permeten posar a prova si una expressió retorna veritable o no, s'executa codi alternatiu revelat pel seu resultat. La forma més comuna de condicional és nomenada <code>if ... else</code>. Així, per exemple:</p> + +<pre class="brush: js">var iceCream = 'chocolate'; +if (iceCream === 'chocolate') { + alert('Yay, I love chocolate ice cream!'); +} else { + alert('Awwww, but chocolate is my favorite...'); +}</pre> + +<p>L'expressió dins del <code>if ( ... )</code> és la prova - s'utilitza l'operador d'identitat (com es va descriure anteriorment) per comparar la variable <code>iceCream</code> amb la cadena <code>chocolate</code> per veure si els dos són iguals. Si aquesta comparació retorna <code>true</code>, s'executa el primer bloc de codi. Si la comparació no és certa, el primer bloc s'omet i el segon bloc de codi, després de la instrucció <code>else</code>, s'executa al seu lloc.</p> + +<h3 id="Funcions">Funcions</h3> + +<p>{{Glossary("Function", "Functions")}} són una forma d'empaquetar la funcionalitat que desitjeu reutilitzar. Quan es necessita el procediment es pot cridar a una funció, amb el nom de la funció, en lloc de tornar a reescriure tot el codi cada vegada. Ja heu vist alguns usos de les funcions anteriorment, per exemple:</p> + +<ol> + <li> + <pre class="brush: js">var myVariable = document.querySelector('h1');</pre> + </li> + <li> + <pre class="brush: js">alert('hello!');</pre> + </li> +</ol> + +<p>Aquestes funcions, <code>document.querySelector</code> i <code>alert</code>, estan integrades en el navegador per poder utilitzar-les sempre que ho desitgeu.</p> + +<p>Si veieu alguna cosa que s'assembla a un nom de variable, però té claudàtors - () - després d'ell, és probable que sigui una funció. Les funcions sovint prenen {{Glossary("Argument", "arguments")}} - bits de dades que necessiten per treballar. Aquests van dins dels claudàtors, separats per comes si n'hi ha més d'un argument.</p> + +<p>Per exemple, la funció <code>alert()</code> realitza una finestra emergent que apareix dins de la finestra del navegador, però cal donar-li una cadena com a argument per dir-li a la funció que ha d'escriure en el quadre emergent.</p> + +<p>La bona notícia és que podeu definir les vostras pròpies funcions - en el següent exemple escrivim una funció simple que pren dos nombres com a arguments i els multiplica:</p> + +<pre class="brush: js">function multiply(num1,num2) { + var result = num1 * num2; + return result; +}</pre> + +<p>Proveu a executar la funció anterior a la consola, i després provar amb diversos arguments. Per exemple:</p> + +<pre class="brush: js">multiply(4,7); +multiply(20,20); +multiply(0.5,3);</pre> + +<div class="note"> +<p><strong>Nota</strong>: La instrucció return indica al navegador que retorni la variable result de la funció perquè estigui disponible per al seu ús. Això és necessari perquè les variables definides dins de funcions només estan disponibles dins d'aquestes funcions. Això es diu {{Glossary("Scope", "àmbit")}} de la variable. (Llegiu <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variable_scope">mès sobre l'àmbit de les variables</a>.)</p> +</div> + +<h3 id="Esdeveniments">E<span id="result_box" lang="ca"><span>sdeveniments</span></span></h3> + +<p>La interactivitat real en un lloc web necessita esdeveniments. Es tracta d'estructures de codi que escolten les coses que succeeixen al navegador, executant el codi en resposta. L'exemple més obvi és l'<a href="https://developer.mozilla.org/en-US/docs/Web/Events/click">esdeveniment de clic</a>, que es dispara pel navegador quan es fa clic en alguna cosa amb el ratolí. Per demostrar això, escriviu el següent a la consola, a continuació feu clic a la pàgina web actual:</p> + +<pre class="brush: js">document.querySelector('html').onclick = function() { + alert('Ouch! Stop poking me!'); +}</pre> + +<p>Hi ha moltes formes d'adjuntar un esdeveniment a un element. Aquí seleccionem l'element HTML, establint la seva propietat <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onclick">onclick</a> igual a una funció anònima (és a dir, sense nom), que conté el codi que volem que l'esdeveniment clic executi.</p> + +<p>Tingues en compte que</p> + +<pre class="brush: js">document.querySelector('html').onclick = function() {};</pre> + +<p>és equivalent a</p> + +<pre class="brush: js">var myHTML = document.querySelector('html'); +myHTML.onclick = function() {};</pre> + +<p><span class="short_text" id="result_box" lang="ca"><span>És només</span> <span>més</span> <span>curt.</span></span></p> + +<h2 id="Alimentant_nostra_pàgina_web_d'exemple">Alimentant nostra pàgina web d'exemple</h2> + +<p>Ara hem repassat alguns conceptes bàsics de Javascript, afegirem algunes característiques interessants per al nostre lloc d'exemple, per veure el que és possible.</p> + +<h3 id="Afegir_un_canviador_d'imatge">Afegir un canviador d'imatge</h3> + +<p>En aquesta secció, afegirem una imatge addicional al nostre lloc, afegint una mica de JavaScript per canviar entre les dues quan es fa clic a la imatge.</p> + +<ol> + <li>En primer lloc, busqueu una altra imatge que volgueu oferir al vostre lloc. Assegureu-vos que és de la mateixa mida que la primera imatge, o el més a prop possible.</li> + <li>Guardeu aquesta imatge a la carpeta <code>images</code>.</li> + <li>Canvieu el nom d'aquesta imatge 'firefox2.png' (sense cometes).</li> + <li>Aneu a l'arxiu <code>main.js</code> i entrar el següent JavaScript. (Si el vostre "hola món" JavaScript està encara allà, esborrar-ho.) + <pre class="brush: js">var myImage = document.querySelector('img'); + +myImage.onclick = function() { + var mySrc = myImage.getAttribute('src'); + if(mySrc === 'images/firefox-icon.png') { + myImage.setAttribute ('src','images/firefox2.png'); + } else { + myImage.setAttribute ('src','images/firefox-icon.png'); + } +}</pre> + </li> + <li>Deseu tots els arxius i <code>index.html,</code> carregar-ho en el navegador. Ara en fer clic a la imatge, s'ha de canviar per l'altra!</li> +</ol> + +<p>S'emmagatzema una referència al vostre element d'imatge en la variable <code>myImage</code>. A continuació, converteix la propietat <code>onclick</code> del controlador d'esdeveniments d'aquesta variable igual a una funció sense nom (una funció "anònima"). Ara, cada vegada que es fa clic en aquest element d'imatge:</p> + +<ol> + <li>Recupera el valor de l'atribut src de la imatge <code>src</code>.</li> + <li>Utilitzar un condicional per comprovar si el valor <code>src</code> és igual a la ruta a la imatge original: + <ol> + <li>Si és així, canvia el valor de <code>src</code> a la ruta d'accés de la 2ª imatge, obligant a l'altra imatge a ser carregada dins de l'element {{htmlelement("image")}}.</li> + <li>Si no ho és (el que significa que ja ha d'haver canviat), el valor <code>src</code> canvia de nou a la ruta original de la imatge, a l'estat original..</li> + </ol> + </li> +</ol> + +<h3 id="Afegir_un_missatge_de_benvinguda_personalitzat">Afegir un missatge de benvinguda personalitzat</h3> + +<p>A continuació afegirem una altre mica de codi, canviant el títol de la pàgina a un missatge de benvinguda personalitzat, quan l'usuari navegui per primera vegada al lloc. Aquest missatge de benvinguda persistirà, l'usuari ha d'abandonar el lloc i tornar més tard. També inclourem una opció per canviar l'usuari i, per tant, el missatge de benvinguda en qualsevol moment que es requereixi.</p> + +<ol> + <li>En <code>index.html</code>, afegiu la següent línia just abans de l'element {{htmlelement("script")}}: + + <pre class="brush: html"><button>Change user</button></pre> + </li> + <li>En <code>main.js</code>, poseu el següent codi a la part inferior de l'arxiu, exactament com està escrit - això pren referències al nou botó i l'encapçalat, emmagatzemant-los en les variables: + <pre class="brush: js">var myButton = document.querySelector('button'); +var myHeading = document.querySelector('h1');</pre> + </li> + <li>Ara afegiu la següent funció per establir la salutació personalitzada - això no farà res, però ho arreglarem en un moment: + <pre class="brush: js">function setUserName() { + var myName = prompt('Please enter your name.'); + localStorage.setItem('name', myName); + myHeading.textContent = 'Mozilla is cool, ' + myName; +}</pre> + Aquesta funció conté una funció <a href="/en-US/docs/Web/API/Window.prompt"><code>prompt()</code></a>, obre un quadre de diàleg, una mica com <code>alert()</code>. No obstant això, aquest <code>prompt()</code> li demana a l'usuari que introdueixi algunes dades, emmagatzemant-les en una variable després que l'usuari pressioni <strong>OK</strong>. En aquest cas, estem demanant a l'usuari que introdueixi el seu nom. A continuació, fem una crida a una API anomenada <code>localStorage</code>, que ens permet emmagatzemar les dades en el navegador i posteriorment recuperar-les. Utilitzem la funció <code>setItem()</code> de localStorage per crear i emmagatzemar un element de dades anomenat "<code>name</code>", establint el seu valor en la variable <code>myName</code> que conté les dades que ha introduït l'usuari. Finalment, establim el <code>textContent</code> de l'encapçalat a una cadena, més el nom recentment emmagatzemat de l'usuari. </li> + <li>A continuació, afegiu aquest bloc <code>if ... else</code> - que podríem anomenar el codi d'inicialització, ja que estructura l'aplicació quan es carrega per primera vegada: + <pre class="brush: js">if(!localStorage.getItem('name')) { + setUserName(); +} else { + var storedName = localStorage.getItem('name'); + myHeading.textContent = 'Mozilla is cool, ' + storedName; +}</pre> + Aquest primer bloc utilitza l'operador de negació (NOT lògic, representada pel!) per comprovar si existeix o no les dades de nom. Si no és així, la funció <code>setUserName()</code> s'executa per crear-lo. Si existeix (és a dir, l'usuari ho va establir durant una visita anterior), recuperarem el nom emmagatzemat utilitzant <code>getItem()</code> i establint el <code>textContent</code> de l'encapçalat en una cadena, a més del nom de l'usuari, com ho vam fer dins de <code>setUserName()</code>.</li> + <li>Finalment, col·loqueu el següent controlador d'esdeveniments <code>onclick</code> en el botó. En fer clic, la funció <code>setUserName()</code> s'executa. Això permet a l'usuari configurar un nou nom, quan ho desitgi, prement el botó: + <pre class="brush: js">myButton.onclick = function() { + setUserName(); +} +</pre> + </li> +</ol> + +<p>Ara, quan visiteu per primera vegada el lloc, se us demanarà el vostre nom d'usuari i us donarà un missatge personalitzat. Podeu canviar el nom en qualsevol moment que desitgeu, oprimint el botó. Com un avantatge addicional, ja que el nom s'emmagatzema dins localStorage, aquest persistirà després que el lloc estigui tancat, mantinguen el missatge personalitzat quan torneu a obrir el lloc!</p> + +<h2 id="Conclusió">Conclusió</h2> + +<p>Si heu seguit totes les instruccions d'aquest article, heu d'acabar veient una pàgina amb aquest aspecte (també podreu <a href="https://mdn.github.io/beginner-html-site-scripted/">veure la nostra versió aquí</a>):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9539/website-screen-scripted.png" style="display: block; height: 995px; margin: 0px auto; width: 800px;"></p> + +<p>Si us quedeu encallats, sempre podreu comparar el vostre treball amb el nostre <a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js">codi d'exemple acabat en Github</a>.</p> + +<p>Tot just hem tractat una part superficial de JavaScript. Si heu gaudit del joc i desitgeu avançar encara més, dirigir-vos al nostre <a href="/en-US/docs/Learn/JavaScript">tema d'aprenentatge de JavaScript</a>.</p> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/ca/learn/getting_started_with_the_web/publicar_nostre_lloc_web/index.html b/files/ca/learn/getting_started_with_the_web/publicar_nostre_lloc_web/index.html new file mode 100644 index 0000000000..0329bbfcd0 --- /dev/null +++ b/files/ca/learn/getting_started_with_the_web/publicar_nostre_lloc_web/index.html @@ -0,0 +1,115 @@ +--- +title: Publicar el nostre lloc web +slug: Learn/Getting_started_with_the_web/Publicar_nostre_lloc_web +tags: + - Beginner + - CodingScripting + - FTP + - GitHub + - Google App Engine + - Learn + - Web + - 'l10n:priority' + - publishing + - web server +translation_of: Learn/Getting_started_with_the_web/Publishing_your_website +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p>Un cop hagueu acabat d'escriure el codi i l'organització dels arxius que componen el vostre lloc web, cal posar-ho tot en línia perquè la gent ho pugui trobar. En aquest article s'exposa com arribar a obtenir un codi d'exemple senzill, en línia, amb poc esforç.</p> +</div> + +<h2 id="Quines_són_les_opcions">Quines són les opcions?</h2> + +<p>La publicació d'un lloc web no és un tema senzill, sobretot perquè hi ha tantes maneres diferents de fer-ho. En aquest article no pretenem documentar tots els mètodes possibles. Més aviat, anem a discutir els pros i els contres de tres estratègies generals des del punt de vista d'un principiant, i després caminar a través d'un mètode que funcioni per ara.</p> + +<h3 id="Aconseguir_allotjament_i_un_nom_de_domini"><span id="result_box" lang="ca"><span>Aconseguir</span> <span>allotjament</span> <span>i un</span> <span>nom</span> <span>de domini</span></span></h3> + +<p>Si desitjeu tenir un control total sobre el vostre lloc web publicat, llavors és probable que hagiu de gastar diners per comprar:</p> + +<ul> + <li>Hosting — llogueu espai d'arxius al <a href="https://developer.mozilla.org/en-US/Learn/What_is_a_web_server">servidor web</a> (<a href="/en-US/Learn/What_is_a_web_server">web server) </a>d'una empresa d'allotjament. Poseu els arxius del lloc web en aquest espai, i el servidor web serveix el contingut als usuaris d'Internet que ho sol·licitin.</li> + <li>Un <a href="/en-US/Learn/Understanding_domain_names">nom de domini</a> (<a href="/en-US/Learn/Understanding_domain_names">domain name)</a> —direcció única on la gent pot trobar el vostre lloc web, igual que <code>http://www.mozilla.org</code>, o <code>http://www.bbc.co.uk</code>. Llogueu el vostre nom de domini durant tants anys d'un <strong>registrador de dominis</strong>.</li> +</ul> + +<p><span id="result_box" lang="ca"><span>Molts</span> <span>llocs web</span> <span>professionals</span> <span>van en línia</span> <span>d'aquesta manera.</span></span></p> + +<p>A més, es necessita un programa {{Glossary("FTP", "File Transfer Protocol (FTP)")}} (veure <a href="https://developer.mozilla.org/en-US/Learn/How_much_does_it_cost#Software">Quant costa: el programari per a més detalls</a>) per a transferir efectivament els arxius del lloc web al servidor. Programes FTP varian àmpliament, però en general heu d'iniciar sessió al servidor web utilitzant les dades proporcionades per la vostra empresa d'allotjament (per exemple, nom d'usuari, contrasenya, nom de sistema principal). A continuació, el programa mostra els arxius locals i arxius del servidor web en dues finestres, perquè pugueu transferir-los d'anada i tornada:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9469/ftp.jpg" style="display: block; height: 487px; margin: 0px auto; width: 800px;"></p> + +<h4 id="Consells_de_cerca_d'allotjament_i_dominis"><span class="short_text" id="result_box" lang="ca"><span>Consells de cerca</span> <span>d'allotjament i</span> <span>dominis</span></span></h4> + +<ul> + <li>Aquí no promocionem empreses d'allotjament comercials específiques. Per trobar empreses d'allotjament i registradors de noms de domini, només busqueu "allotjament web" i "noms de domini" per trobar una empresa que ven registres de noms de domini. Totes aquestes empreses tenen una funció que us permetrà buscar el nom de domini que desitgeu.</li> + <li>A la vostre llar o oficina un {{Glossary("ISP", "proveïdor de serveis d'Internet")}} pot proporcionar-vos un allotjament limitat per a un lloc web petit. El conjunt de funcions disponibles estarà limitat, però pot ser perfecte per als vostres primers experiments - contacteu amb ells i pregunteu!</li> + <li>Hi ha uns pocs serveis gratuïts disponibles com <a href="https://neocities.org/">Neocities</a>, <a href="https://www.blogger.com">Blogger</a> i <a href="https://wordpress.com/">WordPress</a>. Un cop més, s'obté el que es paga, però que són ideals per als vostres experiments inicials. Els serveis gratuïts majoritàriament no requereixen programari de FTP per pujar o bé - es pot simplement arrossegar i deixar anar dins de la seva interfície web.</li> + <li>De vegades les empreses ofereixen tant hosting i dominis en un sol paquet.</li> +</ul> + +<h3 id="L'ús_d'una_eina_en_línia_com_GitHub_Google_App_Engine_o_Dropbox"><span id="result_box" lang="ca"><span>L'ús d'una</span> <span>eina en</span> <span>línia</span> <span>com</span> <span>GitHub</span><span>,</span> <span>Google</span> <span>App Engine</span> <span>o</span> <span>Dropbox</span></span></h3> + +<p>Algunes eines us poden permetre publicar el vostre lloc web en línia:</p> + +<ul> + <li><a href="https://github.com/">GitHub</a> és un lloc de "codificació social". Us permet carregar repositoris de codi per al seu emmagatzematge en el <strong>sistema de control de versions</strong> de <a href="http://git-scm.com/">Git</a> A continuació, pot col·laborar en projectes de codi i el sistema és de codi obert per defecte, la qual cosa significa que qualsevol persona al món pot trobar el vostre codi GitHub, utilitzar-ho, aprendre d'ell i millorar-ho. GitHub té una característica molt útil anomenada <a href="https://pages.github.com/">GitHub Pages</a>, que us permet exposar el codi del lloc web en viu a la Web.</li> + <li><a href="https://cloud.google.com/appengine/" title="App Engine - Platform as a Service — Google Cloud Platform">Google App Engine</a> és una potent plataforma que us permet crear i executar aplicacions en la infraestructura de Google - ja sigui des de la necessitat de construir una aplicació web de diversos nivells des de zero o allotjar una pàgina web estàtica. Veure <a href="https://developer.mozilla.org/en-US/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">Com veieu allotjar el vostre lloc web a Google App Engine?</a> per a més informació.</li> + <li><a href="https://www.dropbox.com/">Dropbox</a> és un sistema d'emmagatzematge d'arxius que us permet guardar els arxius a la web i tenir-los disponibles des de qualsevol ordinador. Qualsevol persona amb una connexió a Internet pot accedir a qualsevol carpeta de Dropbox que faci accessible al públic. Si aquesta carpeta conté arxius de llocs web, es publicarà automàticament com a lloc web. Veure <a href="http://www.dropboxwiki.com/tips-and-tricks/host-websites-with-dropbox">Allotjar llocs web amb Dropbox</a> per a més informació.</li> +</ul> + +<p>A diferència de la majoria d'allotjaments, tals eines solen ser d'ús gratuït, però només s'obté un conjunt limitat de funcions.</p> + +<h3 id="L'ús_d'un_IDE_basat_en_web_com_Thimble">L'ús d'un IDE basat en web com Thimble</h3> + +<p>Hi ha una sèrie d'aplicacions web que emulen un entorn de desenvolupament de llocs web, que us permet introduir codi HTML, CSS i JavaScript i després mostrar el resultat d'aquest codi quan es representa com un lloc web - tot en una pestanya del navegador. En termes generals aquestes eines són molt fàcils, ideal per a l'aprenentatge, i lliure (per a funcions bàsiques), i l'allotjament de la vostre pàgina representada en una única adreça web. No obstant això, les característiques bàsiques són bastant limitades, i les aplicacions no solen proporcionar l'espai d'allotjament per actius (com imatges).</p> + +<p>Intenteu jugar amb alguns d'aquests exemples, i veure quin és el millor que us agrada:</p> + +<ul> + <li><a href="https://jsfiddle.net/">JSFiddle</a></li> + <li><a href="https://thimble.mozilla.org">Thimble</a></li> + <li><a href="http://jsbin.com/">JS Bin</a></li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9471/jsbin-screen.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></p> + +<h2 id="Publicar_via_GitHub">Publicar via GitHub</h2> + +<p>Ara us portaren a través de com publicar fàcilment el vostre lloc mitjançant GitHub Pages.</p> + +<ol> + <li>En primer lloc, <a href="https://github.com/">registrar-vos a GitHub</a> i verifiqueu la vostre adreça de correu electrònic.</li> + <li>A continuació, cal <a href="https://github.com/new">crear un repositori</a> per als arxius a entrar.</li> + <li>En aquesta pàgina, en el <em>quadre Nom del repositori</em>, introduïu username.github.io, on <em>username</em> és el vostre nom d'usuari. Així, per exemple, el nostre amic bobsmith entraria com <em>bobsmith.github.io</em>.<br> + Comproveu també <em>Inicialitzar aquest repositori amb un README</em> i després feu clic a <em>Crear repositori</em>.<img alt="" src="https://mdn.mozillademos.org/files/9479/github-create-repo.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></li> + <li>Després d'això, arrossegar i deixar anar el contingut de la vostra carpeta del lloc web en el vostre repositori, i després feu clic a <em>Registrar els canvis</em>.<br> + + <div class="note"> + <p><strong>Nota</strong>: Assegureu-vos que la carpeta té un arxiu <em>index.html</em>.</p> + </div> + </li> + <li> + <p>Ara navegueu pel vostre navegador a <em>username</em>.github.io per veure el vostre lloc web en línia. Per exemple, per al nom d'usuari <em>chrisdavidmills</em>, aneu a <a href="http://chrisdavidmills.github.io/">chrisdavidmills.github.io</a>.</p> + + <div class="note"> + <p><strong>Nota</strong>: Pot trigar alguns minuts perquè el vostre lloc web pugui està actiu. Si no funciona immediatament, és possible que hagiu d'esperar uns minuts i torneu a intentar-ho.</p> + </div> + </li> +</ol> + +<p>Per a més informació, consulteu les <a href="https://help.github.com/categories/github-pages-basics/">Pàgines d'ajuda de GitHub</a>.</p> + +<h2 id="Altres_lectures">Altres lectures</h2> + +<ul> + <li><a href="/en-US/Learn/What_is_a_web_server">Que és un servidor webr</a></li> + <li><a href="/en-US/Learn/Understanding_domain_names">La comprensió dels noms de domini</a></li> + <li><a href="/en-US/Learn/How_much_does_it_cost">Quant costa fer una cosa a la web?</a></li> + <li><a href="https://www.codecademy.com/learn/deploy-a-website">Implementar un lloc web</a>: <span id="result_box" lang="ca"><span>Un bon</span> <span>tutorial</span> <span>de</span> <span>Codecademy</span> <span>que</span> <span>va una mica</span> <span>més</span> <span>enllà</span> <span>i</span> <span>mostra</span> <span>algunes</span> <span>tècniques addicionals</span><span>.</span></span></li> + <li><a href="http://alignedleft.com/resources/cheap-web-hosting">Allotjament web estàtic barat o gratuit</a> <span id="result_box" lang="ca"><span>per Scott</span> <span>Murray,</span> <span>té algunes</span> <span>idees</span> <span>útils</span> <span>sobre els</span> <span>serveis disponibles.</span></span></li> +</ul> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/ca/learn/getting_started_with_the_web/quin_aspecte_tindrà_vostre_lloc_web/index.html b/files/ca/learn/getting_started_with_the_web/quin_aspecte_tindrà_vostre_lloc_web/index.html new file mode 100644 index 0000000000..a7e5ef4b2c --- /dev/null +++ b/files/ca/learn/getting_started_with_the_web/quin_aspecte_tindrà_vostre_lloc_web/index.html @@ -0,0 +1,103 @@ +--- +title: Quin aspecte tindrà el vostre lloc web? +slug: Learn/Getting_started_with_the_web/Quin_aspecte_tindrà_vostre_lloc_web +tags: + - Assets + - Beginner + - Composing + - Content + - Design + - Fonts + - Learn + - Plan + - 'l10n:priority' +translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p><em><strong>Quin serà l'aspecte del vostre lloc web?</strong></em> Analitzeu la planificació i disseny de treball que heu de fer per al vostre lloc web <em><strong>abans</strong></em> d'escriure el codi, incloent, "Quina informació ofereix el meu lloc web?" "Quins tipus de lletra i colors és el que vull?" "Què fa el meu lloc?"</p> +</div> + +<h2 id="El_primer_és_el_primer_planificació"><span id="result_box" lang="ca"><span>El primer és</span> <span>el primer:</span> <span>planificació</span></span></h2> + +<p>Abans de fer res, necessiteu algunes idees. Què hauria de fer el vostre lloc web en realitat? Un lloc web pot fer bàsicament qualsevol cosa, però per al vostre primer intent heu de mantenir les coses simples. Anem a començar per la creació d'una pàgina web senzilla amb una capçalera, una imatge, i uns pocs paràgrafs.</p> + +<p>Per començar, haureu de respondre a aquestes preguntes:</p> + +<ol> + <li><strong>Quin és la teva pàgina web?</strong> Us agraden els gossos, Nova York, o Pacman?</li> + <li><strong>Quina informació esteu presentant sobre el tema?</strong> Escriviu un títol i alguns paràgrafs, i penseu en una imatge que volgueu mostrar en la vostra pàgina.</li> + <li><strong>Com es veu el vostre lloc web</strong>, en termes simples d'alt nivell. Quin és el color de fons? Quin tipus de font és apropiada: formals, dibuixos animats, audaç i fort, subtil?</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: Els projectes complexos necessiten directrius detallades que incloent tots els detalls de colors, tipus de lletra, espaiat entre els elements d'una pàgina, l'estil d'escriptura apropiada, i així successivament. Això de vegades es diu una guia de disseny o un llibre de marca, i es pot veure un exemple en les <a href="https://www.mozilla.org/en-US/styleguide/products/firefox-os/">Firefox OS Guidelines</a>.</p> +</div> + +<h2 id="Esbossar_el_disseny">Esbossar el disseny</h2> + +<p>A continuació, obtenir un llapis i paper i esbossar més o menys com voleu el aspecte del vostre lloc. En la vostra primera pàgina web senzilla, no hi ha molt per esbossar, però heu d'aconseguir l'hàbit de fer això ara. Realment ajuda - no heu de ser un Van Gogh!</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9239/website-drawing-scan.png" style="display: block; height: 460px; margin: 0px auto; width: 640px;"></p> + +<div class="note"> +<p><strong>Nota</strong>: Fins i tot en els llocs web reals, complexos, els equips de disseny en general comencen amb esbossos en paper, i posteriorment construeixen maquetes digitals utilitzant un editor de gràfics o tecnologies web.</p> + +<p>Els equips web sovint inclouen tant un dissenyador gràfic i un {{Glossary("UX", "user-experience")}} dissenyador (UX). Els dissenyadors gràfics, òbviament, posar junts els elements visuals de la pàgina web. Els dissenyadors UX tenen un paper una mica més abstracte a l'hora d'abordar com els usuaris han d'experimentar i interactuar amb el lloc web.</p> +</div> + +<h2 id="Escollir_els_vostres_recursos">Escollir els vostres recursos</h2> + +<p>En aquest punt, és bo per començar a armar el contingut que apareixerà finalment a la vostra pàgina web.</p> + +<h3 id="Text">Text</h3> + +<p>No obstant això hauríeu de tenir els paràgrafs i títols abans. Tingueu això molt a prop.</p> + +<h3 id="Color_del_tema">Color del tema</h3> + +<p>Per triar un color, aneu al <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool">selector de color</a> i trobeu un color que us agradi. En fer clic a un color, apareixerà un codi de sis caràcters estranys com <code>#660066</code>. Això es diu un codi <em>hex(adecimal)</em>, i representa el vostre color. Copieu el codi en un lloc segur per ara.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8975/Screenshot%20from%202014-11-03%2017:40:49.png" style="height: 262px; width: 448px;"></p> + +<h3 id="Imatges">Imatges</h3> + +<p>Per triar una imatge, anar a <a href="https://www.google.com/imghp?gws_rd=ssl">Google Images</a> i buscar alguna adequada.</p> + +<ol> + <li>Quan trobeu la imatge que desitjeu, feu clic a la imatge.</li> + <li>Premeu el botó <em>Veure imatge</em>.</li> + <li>A la següent pàgina, feu clic amb el botó dret del ratolí en la imatge (Ctrl + clic en Mac), seleccioneu <em>Guardar imatge com...</em> i trieu un lloc segur per guardar la imatge. Com a alternativa, copieu l'adreça Web de la imatge des de la barra d'adreces del vostre navegador per usar-la més tard.</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8985/Screenshot%20from%202014-11-04%2015:09:21.png" style="height: 293px; width: 420px;"></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8989/Screenshot%20from%202014-11-04%2015:20:48.png" style="height: 292px; width: 340px;"></p> + +<div class="note"> +<p><strong>Nota</strong>: La majoria de les imatges a la web, incloent a Google Images, tenen drets d'autor. Per reduir la probabilitat de que violeu els drets d'autor, podeu utilitzar el filtre de llicència de Google. Només 1) feu clic a <strong>Eines de recerca</strong>, a continuació, a 2) <strong>Drets d'ús</strong>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8981/Screenshot%20from%202014-11-04%2014:27:45.png" style="height: 195px; width: 587px;"></p> +</div> + +<h3 id="Tipus_de_lletra">Tipus de lletra</h3> + +<p>Per triar un tipus de lletra:</p> + +<ol> + <li>Anar a <a href="http://www.google.com/fonts">Google Fonts</a> i examinar la llista fins que trobeu una que us agradi. També podeu utilitzar els controls de la dreta per filtrar encara més els resultats.</li> + <li>Feu clic al icona "plus" (Afegir a) al costat del tipus de lletra que vulgueu.</li> + <li>Feu clic al botó "*, Familia Seleccionada" en el panell a la part inferior de la pàgina ("*" depèn del nombre de fonts que hagiu seleccionat)</li> + <li>En el quadre emergent, es pot veure i copiar les línies de codi que Google us dóna en el vostre editor de text per a guardar per més endavant.</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13871/font1.png" style="height: 359px; width: 600px;"></p> + +<p> </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13873/font2.png" style="height: 608px; width: 600px;"></p> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/ca/learn/getting_started_with_the_web/tractar_amb_arxius/index.html b/files/ca/learn/getting_started_with_the_web/tractar_amb_arxius/index.html new file mode 100644 index 0000000000..0ba94d3273 --- /dev/null +++ b/files/ca/learn/getting_started_with_the_web/tractar_amb_arxius/index.html @@ -0,0 +1,104 @@ +--- +title: Tractar amb arxius +slug: Learn/Getting_started_with_the_web/Tractar_amb_arxius +tags: + - Beginner + - CodingScripting + - Files + - Guide + - HTML + - 'l10n:priority' + - theory + - website +translation_of: Learn/Getting_started_with_the_web/Dealing_with_files +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p>Un lloc web es compon de molts arxius: contingut de text, codi, fulles d'estil, contingut multimèdia, i així successivament. Quan estigueu construint un lloc web, necessitareu muntar aquests arxius en una estructura assenyada al vostre ordinador, assegurar-vos que poden parlar l'un a l'altre, i obtenir tot el seu contingut buscat, abans de que finalment <a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">els pujeu a un servidor</a>. Tractar amb arxius descriu alguns problemes que heu de tenir en compte perquè pugueu establir una estructura d'arxius assenyada per al vostre lloc web.</p> +</div> + +<h2 id="On_ha_de_viure_el_lloc_web_en_l'ordinador">On ha de viure el lloc web en l'ordinador?</h2> + +<p>Quan treballeu un lloc web en local en el vostre ordinador, heu de tenir tots els arxius relacionats en una sola carpeta que reflecteix l'estructura d'arxius de la pàgina web publicada al servidor. Aquesta carpeta pot viure en qualsevol lloc que us agradi, però cal posar-la en algun lloc on es pugui trobar fàcilment, potser en el escriptori de la vostra carpeta d'inici, o en l'arrel del disc dur.</p> + +<ol> + <li>Trieu un lloc per emmagatzemar els vostres projectes web. A continuació, creeu una nova carpeta anomenada <code>web-projects</code> (o similar). Aqui és on viuran tots els vostres projectes web.</li> + <li>Dins d'aquesta primera carpeta, creeu una altra carpeta per emmagatzemar el vostre primer lloc web. Nomeneu-ho <code>test-site</code> (o alguna cosa més imaginativa).</li> +</ol> + +<h2 id="Un_a_part_en_l'embolcall_i_espaiament">Un a part en l'embolcall i espaiament</h2> + +<p>Us donareu compte de que al llarg d'aquest article, us demanarem que nomeneu les carpetes i arxius completament en minúscules i sense espais. Això és perquè:</p> + +<ol> + <li>Molts equips, especialment en servidors web, són sensibles a les majúscules i minúscules. Així, per exemple, si poseu una imatge a la vostra pàgina web en la prova in <code>test-site/MyImage.jpg</code>, i després en un arxiu diferent intenteu invocar la imatge com <code>test-site/myimage.jpg</code>, pot ser que no funcioni.</li> + <li>Navegadors, servidors web, i llenguatges de programació no manegen espais de forma coherent. Per exemple, si utilitzeu espais en els noms d'arxiu, alguns sistemes poden tractar el nom d'arxiu com dos noms d'arxiu. Alguns servidors substituiran els espais en els noms d'arxiu amb "%20" (el codi de caràcters d'espais en els URI), trencant tots els seus enllaços. Es millor separar les paraules amb guions o subratllats: <code>my-file.html </code>o <code>my_file.html</code>.</li> +</ol> + +<p>Per aquestes raons, el millor és tenir l'hàbit d'escriure els noms de carpetes i arxius en minúscules i sense espais, almenys fins que sapigueu que és el que esteu fent. D'aquesta manera evitareu un menor numero de problemes.</p> + +<h2 id="Quina_estructura_ha_de_tenir_el_lloc_web">Quina estructura ha de tenir el lloc web?</h2> + +<p>A continuació, anem a veure quina estructura ha de tenir el nostre lloc de prova. Les coses més comuns que tindrem en qualsevol projecte de lloc web que creiem són un arxiu índex HTML i carpetes que continguin imatges, arxius d'estil i arxius de scripts. Crearem aquests ara:</p> + +<ol> + <li><code><strong>index.html</strong></code>: Aquest arxiu contindrà generalment el contingut de la vostra pàgina d'inici, és a dir, el text i les imatges que la gent veu quan accedeixin per primera vegada al vostre lloc. Usant el vostre editor de text, creeu un nou arxiu anomenat <code>index.html</code> i guardeu-ho just dins de la carpeta <code>test-site</code>.</li> + <li><strong><code>carpeta d'imatges</code></strong>: Aquesta carpeta contindrà totes les imatges que utilitzeu en el vostre lloc. Creeu una carpeta anomenada <code>images</code>, dins de la carpeta <code>test-site</code>.</li> + <li><strong><code>carpeta d'estils</code></strong>: Aquesta carpeta contindrà el codi CSS per donar estil el vostre contingut (per exemple, l'establiment de text i colors de fons). Creeu una carpeta anomenada <code>styles</code>, dins de la carpeta <code>test-site</code>.</li> + <li><strong><code>carpeta de scripts</code></strong>: Aquesta carpeta contindrà tot el codi JavaScript que s'utilitza per afegir funcionalitat interactiva al vostre lloc (per exemple, els botons que carreguen dades quan es fa clic). Crear una carpeta anomenada <code>scripts</code>, dins de la carpeta <code>test-site</code>.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: En ordinadors Windows, és possible que tingueu problemes per veure els noms dels arxius, ja que Windows té una opció molesta anomenada <strong>Ocultar extensions per a tipus d'arxiu coneguts</strong>, activat per defecte. En general, podeu desactivar aquesta opció, aneu a l'Explorador de Windows, seleccioneu l'opció <strong>Opcions de carpeta</strong>..., desmarqueu la casella <strong>Ocultar les extensions dels tipus d'arxiu coneguts</strong> i fent clic a <strong>OK</strong>. Per obtenir informació més específica sobre la vostra versió de Windows, feu una cerca de Yahoo!</p> +</div> + +<h2 id="Rutes_d'arxius">R<span id="result_box" lang="ca"><span>utes</span> <span>d'arxius</span></span></h2> + +<p>Per fer que els arxius parlin uns amb uns altres, heu de proporcionar una ruta d'accés entre ells - bàsicament una ruta per a un arxiu sap on és l'altre. Per demostrar això, introduirem una mica d'HTML en el nostre arxiu index.html, i farem que es vegi la imatge que vam escollir en l'article. <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">"Quin aspecte tindrà en el vostre lloc web?"</a></p> + +<ol> + <li>Copieu la imatge que vau escollir anteriorment a la carpeta <code>images</code>.</li> + <li>Obriu el vostre arxiu <code>index.html</code>, i inseriu el codi següent a l'arxiu exactament com es mostra. No es preocupeu per tot el que significa per ara - veureu les estructures amb més detall més endavant en la sèrie. + <pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My test page</title> + </head> + <body> + <img src="" alt="My test image"> + </body> +</html> </pre> + </li> + <li>La línia <code><img src="" alt="My test image"></code> és el codi HTML que insereix una imatge a la pàgina. Hem de dir-li a l'HTML on és la imatge. La imatge es troba dins del directori <em>images</em>, que està en el mateix directori que <code>index.html</code>. Per caminar per l'estructura de l'arxiu de <code>index.html</code> fins a la nostra imatge, la ruta de l'arxiu que necessitaríeu és <code>images/your-image-filename</code>. Per exemple, la nostra imatge es diu firefox-icon.png, de manera que la ruta de l'arxiu és <code>images/firefox-icon.png</code>.</li> + <li>Introduïu la ruta de l'arxiu en el codi HTML entre dobles cometes del codi <code>src=""</code>.</li> + <li>Deseu el fitxer HTML, després carregar-la en el vostre navegador web (doble clic al fitxer). Heu de veure la nova pàgina web que mostra la imatge!</li> +</ol> + +<p><img alt="A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world" src="https://mdn.mozillademos.org/files/9229/website-screenshot.png" style="display: block; height: 542px; margin: 0px auto; width: 690px;"></p> + +<p>Algunes regles generals per a les rutes d'arxius:</p> + +<ul> + <li>Per enllaçar a un arxiu de destinació en el mateix directori que el fitxer HTML que ho invoca, només heu d'utilitzar el nom d'arxiu, per exemple, <code>my-image.jpg</code>.</li> + <li>Per fer referència a un arxiu en un subdirectori, escriviu el nom del directori davant de la ruta, a més d'una barra inclinada, per exemple, <code>subdirectory/my-image.jpg</code>.</li> + <li>Per enllaçar a un arxiu de destinació en el directori anterior de l'arxiu HTML que ho invoca, escriviu dos punts (<code>..</code>). Així per exemple, si <code>index.html</code> estava dins d'una subcarpeta <code>test-site</code> i <code>my-image.png</code> estava dins de <code>test-site</code>, es pot fer referència a <code>my-image.png</code> des d'<code>index.html</code> utilitzant <code>../my-image.png</code>.</li> + <li>Es poden combinar aquests tant com vulgueu, per exemple <code>../subdirectory/another-subdirectory/my-image.png</code>.</li> +</ul> + +<p>Per ara, això és tot el que necessiteu saber.</p> + +<div class="note"> +<p><strong>Nota</strong>: El sistema d'arxius de Windows tendeix a utilitzar barres invertides, no barres diagonals, com, per exemple, <code>C:\windows</code>. Això no importa - fins i tot si esteu desenvolupant el vostre lloc web en Windows, heu d'utilitzar barres diagonals en el vostre codi.</p> +</div> + +<h2 id="Què_més_es_pot_fer"><span id="result_box" lang="ca"><span>Què</span> <span>més</span> <span>es</span> <span>pot</span> <span>fer</span><span>?</span></span></h2> + +<p>Això és tot per ara. La vostra estructura de carpetes ha de ser alguna cosa com això:</p> + +<p><img alt="A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file" src="https://mdn.mozillademos.org/files/9231/file-structure.png" style="display: block; height: 577px; margin: 0px auto; width: 929px;"></p> + +<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/ca/learn/html/forms/com_estructurar_un_formulari_web/index.html b/files/ca/learn/html/forms/com_estructurar_un_formulari_web/index.html new file mode 100644 index 0000000000..c0cb1e022c --- /dev/null +++ b/files/ca/learn/html/forms/com_estructurar_un_formulari_web/index.html @@ -0,0 +1,316 @@ +--- +title: Com estructurar un formulari web +slug: Learn/HTML/Forms/Com_estructurar_un_formulari_web +translation_of: Learn/Forms/How_to_structure_a_web_form +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Forms/Your_first_form", "Learn/Forms/Basic_native_form_controls", "Learn/Forms")}}</div> + +<p class="summary">Ara que ja coneixem els conceptes bàsics, veurem amb més detall els elements que s’utilitzen per a proporcionar estructura i significat a les diferents parts d’un formulari.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td>Coneixements bàsics d'informàtica i una <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">fonaments bàsics de l’HTML</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Aprendre a estructurar els formularis HTML i donar-los semàntica perquè compleixin criteris d’usabilitat i accessibilitat.</td> + </tr> + </tbody> +</table> + +<p>La flexibilitat dels formularis els converteix en una de les estructures més complexes pel que fa al codi <a href="/ca/docs/Learn/HTML" title="/en-US/docs/HTML">HTML</a>; pots crear qualsevol tipus de formulari bàsic amb elements i atributs específics de formulari. Fer servir una estructura correcta en crear un formulari HTML et garantirà la usabilitat i l’<a href="/ca/docs/Learn/Accessibility">accessibilitat</a> del formulari.</p> + +<h2 id="Lelement_<form>">L'element <form></h2> + +<p>L’element {{HTMLElement("form")}} defineix formalment un formulari i els atributs que determinen el comportament del formulari. Cada vegada que vols crear un formulari HTML, has de començar per aquest element i imbricar-hi tot el contingut a dins. Moltes tecnologies d'assistència i complements de navegador poden descobrir elements {{HTMLElement("form")}} i implementar codis de suport (<em>hooks</em>) especials per a facilitar-ne l’ús.</p> + +<p>Ja ho hem vist en l’article anterior.</p> + +<div class="warning"><strong>Atenció</strong>: Està totalment prohibit imbricar un formulari dins d’un altre formulari. És una mala idea perquè la imbricació de formularis pot introduir comportaments del tot imprevisibles.</div> + +<p>Sempre és possible utilitzar un control de formulari fora d'un element {{HTMLElement("form")}}. Si ho fas, per defecte aquest control no tindrà res a veure amb cap formulari, tret que l’associïs a algun formulari amb l'atribut <a href="/en-US/docs/Web/HTML/Attributes/form"><code>form</code></a>. Això es va introduir per a permetre unir explícitament un control amb un formulari encara que no hi estigui imbricat.</p> + +<p>Avancem una mica i observem els elements estructurals que trobaràs en un formulari.</p> + +<h2 id="Els_elements_<fieldset>_i_<legend>">Els elements <code><fieldset></code> i <code><legend></code></h2> + +<p>L’element {{HTMLElement("fieldset")}} és una manera convenient de crear grups de controls que comparteixen el mateix propòsit, amb les mateixes finalitats d’estil i semàntiques. Pots etiquetar un element {{HTMLElement("fieldset")}} incloent un element {{HTMLElement("legend")}} just a sota de l'etiqueta d'obertura {{HTMLElement("fieldset")}}. El text contingut en l'element {{HTMLElement("legend")}} descriu formalment el propòsit de l'element {{HTMLElement("fieldset")}} que hi ha inclòs.</p> + +<p>Moltes tecnologies d'assistència utilitzaran l'element {{HTMLElement("legend")}} com si fos una part de l'etiqueta de cada control de formulari que hi ha dins de l'element {{HTMLElement("fieldset")}} corresponent. Per exemple, alguns lectors de pantalla com <a href="http://www.freedomscientific.com/products/software/jaws/" rel="external" title="http://www.freedomscientific.com/products/fs/jaws-product-page.asp">Jaws</a> i <a href="http://www.nvda-project.org/" rel="external" title="http://www.nvda-project.org/">NVDA</a> llegiran el contingut de la llegenda abans de llegir el text de l’etiqueta de cada control.</p> + +<p>Aquí hi ha un petit exemple:</p> + +<pre class="brush:html; notranslate"><form> + <fieldset> + <legend>Mida del suc de fruita</legend> + <p> + <input type="radio" name="size" id="size_1" value="small"> + <label for="size_1">Petit</label> + </p> + <p> + <input type="radio" name="size" id="size_2" value="medium"> + <label for="size_2">Mitjà</label> + </p> + <p> + <input type="radio" name="size" id="size_3" value="large"> + <label for="size_3">Gran</label> + </p> + </fieldset> +</form></pre> + +<div class="note"> +<p><strong>Nota</strong>: Pots trobar aquest exemple en el fitxer <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/fieldset-legend.html">fieldset-legend.html</a> (o consultar-ne l’<a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/fieldset-legend.html">exemple en viu</a>).</p> +</div> + +<p>En llegir el formulari anterior, un lector de pantalla dirà «Mida del suc de fruita: petit» per al primer giny, «Mida del suc de fruita: mitjà» per al segon i «Mida del suc de fruita: gran» per al tercer.</p> + +<p>El cas d’ús que mostra aquest exemple és un dels més importants. Cada vegada que tinguis un conjunt de botons d'opció, els hauries d’imbricar dins d’un element {{HTMLElement("fieldset")}}. Hi ha altres casos d'ús i, en general, l'element {{HTMLElement("fieldset")}} també es pot utilitzar per a introduir seccions en un formulari. L’ideal seria que els formularis llargs ocupin diverses pàgines, però si un formulari s’allarga i només ha d’ocupar una sola pàgina, posar les diferents seccions relacionades dins de diferents elements {{HTMLElement("fieldset")}} millora la usabilitat.</p> + +<p>L’element {{HTMLElement("fieldset")}} és un dels elements clau per crear formularis accessibles per l’efecte que té sobre la tecnologia d’assistència; tanmateix, és la teva responsabilitat no abusar-ne. Si és possible, cada cop que creïs un formulari, intenta <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">escoltar com l’interpreta un lector de pantalla</a>. Si sona estrany, prova de millorar l'estructura del formulari.</p> + +<h2 id="Lelement_<label>">L'element <label></h2> + +<p>Com hem vist en l’article anterior, l’element {{HTMLElement("label")}} és la manera formal de definir una etiqueta per a un control de formulari en HTML. Aquest és l’element més important si vols crear formularis accessibles: quan s’implementen correctament, els lectors de pantalla llegeixen l’etiqueta d’un element de formulari juntament amb qualsevol instrucció relacionada, i també resulta útil per als usuaris sense discapacitats. Considerem aquest exemple, que hem vist en l’article anterior:</p> + +<pre class="brush: html notranslate"><label for="name">Nom:</label> <input type="text" id="name" name="user_name"></pre> + +<p>Amb l'etiqueta <code><label></code> associada correctament amb l’element <code><input></code> per l’atribut <code>for</code> (que conté l'atribut <code>id</code> de l'element <code><input></code>), un lector de pantalla llegirà una cosa així com «Nom, editar text».</p> + +<p>Hi ha una altra manera d’associar un control de formulari amb una etiqueta: introduir el control de formulari dins de <code><label></code> i associar-l’hi implícitament.</p> + +<pre class="brush: html notranslate"><label for="name"> + Nom: <input type="text" id="name" name="user_name"> +</label></pre> + +<p>Fins i tot en aquests casos, però, es considera una bona pràctica establir-hi l’atribut <code>for</code> per garantir que totes les tecnologies d’assistència entenen la relació entre l'etiqueta i el control.</p> + +<p>Si no hi ha cap etiqueta o si el control de formulari no està associat implícitament ni explícitament amb una etiqueta, un lector de pantalla llegirà alguna cosa com ara «Editar text en blanc», la qual cosa no és gaire útil.</p> + +<h3 id="També_pots_clicar_les_etiquetes!">També pots clicar les etiquetes!</h3> + +<p>Un altre avantatge de configurar correctament les etiquetes és que pots fer-hi clic o tocar-les per a activar-ne el control corresponent. Això és útil per a controls com les entrades de text, en què pots fer clic a l’etiqueta i també a l’entrada per a donar-hi el focus, però és útil, sobretot, per als botons d'opció i les caselles de verificació; l’àrea d’aquest control pot ser molt petita, de manera que és útil per a facilitar-ne l’activació.</p> + +<p>Per exemple, si fas clic al text de l'etiqueta «M'agraden les cireres» de l'exemple següent, canviarà l'estat seleccionat de la casella <em>taste_cherry</em>:</p> + +<pre class="brush:html; notranslate"><form> + <p> + <input type="checkbox" id="taste_1" name="taste_cherry" value="cherry"> + <label for="taste_1">M'agraden les cireres</label> + </p> + <p> + <input type="checkbox" id="taste_2" name="taste_banana" value="banana"> + <label for="taste_2">M'agraden els plàtans</label> + </p> +</form></pre> + +<div class="note"> +<p><strong>Nota</strong>: Pots trobar aquest exemple en el fitxer <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/checkbox-label.html">checkbox-label.html</a> (o consultar l’<a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/checkbox-label.html">exemple en viu</a>).</p> +</div> + +<h3 id="Etiquetes_múltiples">Etiquetes múltiples</h3> + +<p>Estrictament parlant, pots posar diverses etiquetes en un sol control, però no és una bona idea perquè algunes tecnologies d'assistència poden tenir problemes a l'hora de manejar-los. En el cas de tenir etiquetes múltiples, hauràs d’incloure el control i les seves múltiples etiquetes dins d’un únic element {{htmlelement("label")}}.</p> + +<p>Considerem l'exemple següent:</p> + +<pre class="brush: html notranslate"><p>Els camps obligatoris van seguits de <abbr title="required">*</abbr>.</p> + +<!-- Doncs, això: ---> +<div> + <label for="username">Nom:</label> + <input type="text" name="username"> + <label for="username"><abbr title="obligatori" aria-label="required">*</abbr></label> +</div> + +<!-- seria millor fer-ho d'aquesta manera: --> +<div> + <label for="username"> + <span>Nom:</span> + <input id="username" type="text" name="username"> + <abbr title="obligatori" aria-label="required">*</abbr> + </label> +</div> + +<!-- Però això és probablement el millor: --> +<div> + <label for="username">Nom: <abbr title="obligatori" aria-label="required">*</abbr></label> + <input id="username" type="text" name="username"> +</div></pre> + +<p>{{EmbedLiveSample("Etiquetes_múltiples", 120, 120)}}</p> + +<p>El paràgraf de la part superior estableix una regla per als elements obligatoris. La regla s'ha d'incloure <em>abans</em> que s’hagi d'utilitzar perquè els usuaris generals i els usuaris amb tecnologies d’assistència, com ara lectors de pantalla, puguin saber què vol dir abans de trobar un element obligatori. Tot i que això ajuda a informar els usuaris què significa un asterisc, no ens en podem refiar. Un lector de pantalla llegirà un asterisc així: «<em>estrella</em>». Si s'hi passa el ratolí per sobre, hauria d'aparèixer «<em>obligatori</em>», que s'aconsegueix amb l'atribut <code>title</code>. Els títols que es llegeixen en veu alta depenen de la configuració del lector de pantalla, de manera que és més fiable incloure també l’atribut <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute">aria-label</a></code>, que els lectors de pantalla llegeixen sempre.</p> + +<p>Les variants anteriors augmenten l’efectivitat a mesura que hi avances:</p> + +<ul> + <li>En el primer exemple, l’etiqueta no es llegeix del tot amb l’entrada: només es llegeix «editar text en blanc»; a més, les etiquetes es llegeixen en realitat per separat. Els múltiples elements <code><label></code> confonen el lector de pantalla.</li> + <li>En el segon exemple, les coses són una mica més clares: l’etiqueta, llegida juntament amb l’entrada, és «Editar text nom estrella nom obligatori» i les etiquetes encara es llegeixen per separat. Tot és encara una mica confús, però aquesta vegada està una mica més bé, perquè <code><input></code> té una etiqueta associada.</li> + <li>El tercer exemple és el millor: l’etiqueta es llegeix realment en conjunt i l’etiqueta que es llegeix amb l’entrada és «Editar text nom requerit».</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: Pots obtenir resultats una mica diferents, segons quin sigui el teu lector de pantalla. Aquest ha estat provat amb VoiceOver (i NVDA es comporta de manera similar). Ens agradaria conèixer també les teves experiències.</p> +</div> + +<div class="note"> +<p><strong>Nota</strong>: Pots trobar aquest exemple a GitHub en el fitxer <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/required-labels.html">required-labels.html</a> (o consulta l’<a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/required-labels.html">exemple en viu</a>). No provis l'exemple amb les dues o tres versions sense comentaris: els lectors de pantalla definitivament es confondran si tens diverses etiquetes i múltiples entrades amb el mateix ID.</p> +</div> + +<h2 id="Estructures_HTML_habituals_que_es_fan_servir_als_formularis">Estructures HTML habituals que es fan servir als formularis</h2> + +<p>Més enllà de les estructures específiques dels formularis web, és bo recordar que l'etiquetatge del formulari només és HTML. Això significa que pots utilitzar tot el poder de l'HTML per a estructurar un formulari web.</p> + +<p>Com es pot veure en els exemples, és una pràctica habitual delimitar una etiqueta i el control associat amb un element {{HTMLElement("li")}} dins d'un element de llista {{HTMLElement("ul")}} o {{HTMLElement("ol")}}. Els elements {{HTMLElement("p")}} i {{HTMLElement("div")}} també s'utilitzen de forma habitual. Per a estructurar diverses caselles de verificació o botons d'opció es recomana crear una llista.</p> + +<p>A més de l’element {{HTMLElement("fieldset")}}, també és una pràctica habitual utilitzar títols HTML (per exemple, {{htmlelement("h1")}}, {{htmlelement("h2")}}) i seccionar (per exemple, {{htmlelement("section")}}), per a estructurar formularis complexos.</p> + +<p>Per sobre de tot, et correspon a tu trobar un estil de codificació còmode que doni lloc a formularis que compleixin criteris d’accessibilitat i usabilitat. Les seccions independents amb funcions diferents haurien d’estar contingudes en un element {{htmlelement("section")}} separat, amb elements {{htmlelement("fieldset")}} per a contenir botons d'opció.</p> + +<h3 id="Aprenentatge_actiu_construir_l’estructura_d’un_formulari">Aprenentatge actiu: construir l’estructura d’un formulari</h3> + +<p>Posem en pràctica aquestes idees i construïm un formulari una mica més complicat: un formulari de pagament. Aquest formulari contindrà diversos tipus de controls que encara no coneixes. No et preocupis; en veuràs el funcionament en l’article següent (<a href="/ca/docs/Learn/HTML/Forms/Controls_de_formulari_originals">Els controls de formulari bàsics originals</a>). Per ara, llegeix amb detall les descripcions mentre segueixes les instruccions següents i comences a entendre quins elements utilitzem per a estructurar un formulari, i per què.</p> + +<ol> + <li>Per començar, fes una còpia local del <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">fitxer de plantilla en blanc</a> i del <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.css">CSS del nostre formulari de pagament</a> en un directori nou del teu ordinador.</li> + <li>Aplica el CSS a l’HTML afegint la línia següent a l’element {{htmlelement("head")}} de l’HTML: + <pre class="brush: html notranslate"><link href="payment-form.css" rel="stylesheet"></pre> + </li> + <li>A continuació, afegeix l’element extern {{htmlelement("form")}} per a crear el teu formulari: + <pre class="brush: html notranslate"><form> + +</form></pre> + </li> + <li>Afegeix un títol d’encapçalament encapçalament i un paràgraf a les etiquetes <code><form></code> per a informar els usuaris com es marquen els camps obligatoris: + <pre class="brush: html notranslate"><h1>Forma de pagament</h1> +<p>Els camps obligatoris van seguits de <strong><abbr title = "obligatori">*</abbr></strong>.</p></pre> + </li> + <li>A continuació, afegirem una secció més gran de codi al formulari, a sota de l’entrada anterior. Aquí veuràs que delimitem amb un element {{htmlelement("section")}} independent els camps amb la informació de contacte. A més, hi ha un conjunt de dos botons d'opció, cadascun dels quals col·loquem dins d’un element de llista ({{htmlelement("li")}}) propi. També hi ha dos textos estàndard {{htmlelement("input")}} i els seus elements {{htmlelement("label")}} associats, cadascun imbricat dins d'un element {{htmlelement("p")}} i un camp per a introduir una contrasenya. Afegeix aquest codi al teu formulari: + <pre class="brush: html notranslate"><section> + <h2>Informació de contacte</h2> + <fieldset> + <legend>Títol </legend> + <ul> + <li> + <label for="title_1"> + <input type="radio" id="title_1" name="title" value="K" > + Rei + </label> + </li> + <li> + <label for="title_2"> + <input type="radio" id="title_2" name="title" value="Q"> + Reina + </label> + </li> + <li> + <label for="title_3"> + <input type="radio" id="title_3" name="title" value="J"> + Bufó + </label> + </li> + </ul> + </fieldset> + <p> + <label for="name"> + <span>Nom: </span> + <strong><abbr title="required">*</abbr></strong> + </label> + <input type="text" id="name" name="username"> + </p> + <p> + <label for="mail"> + <span>Correu electrònic: </span> + <strong><abbr title="required">*</abbr></strong> + </label> + <input type="email" id="mail" name="usermail"> + </p> + <p> + <label for="pwd"> + <span>Contrasenya:</span> + <strong><abbr title="required">*</abbr></strong> + </label> + <input type="password" id="pwd" name="password"> + </p> +</section></pre> + </li> + <li>La segona secció (<code><section></code>) del nostre formulari és la informació de pagament. Hi ha tres controls diferents, juntament amb les seves etiquetes, cadascun inclòs en un element <code><p></code>. El primer és un menú desplegable ({{htmlelement("select")}}) que selecciona el tipus de targeta de crèdit. El segon és un element <code><input></code> del tipus <code>tel</code>, que introdueix un número de targeta de crèdit; tot i que podríem haver utilitzat el tipus <code>number</code>, no volem la interfície d'usuari que s'hi aplica per defecte. L'últim és un element <code><input></code> del tipus <code>date</code>, per a introduir la data de caducitat de la targeta; aquest apareixerà amb un control de selecció de dates en els navegadors compatibles, i es converteix en una entrada de text normal en els navegadors no compatibles. Aquests tipus d’entrada més nous es reintrodueixen en l’article <a href="/en-US/docs/Learn/Forms/HTML5_input_types">tipus d’entrades en HTML5</a>.<br> + <br> + Introdueix el següent en la secció anterior: + <pre class="brush: html notranslate"><section> + <h2>Informació de pagament</h2> + <p> + <label for="card"> + <span>Tipus de targeta: </span> + </label> + <select id="card" name="usercard"> + <option value="visa">Visa</option> + <option value="mc">Mastercard</option> + <option value="amex">American Express</option> + </select> + </p> + <p> + <label for="number"> + <span>Número de targeta:</span> + <strong><abbr title="required">*</abbr></strong> + </label> + <input type="tel" id="number" name="cardnumber"> + </p> + <p> + <label for="date"> + <span> Data de caducitat: </span> + <strong><abbr title="required">*</abbr></strong> + <em>en format mm/aa</em> + </label> + <input type="date" id="date" name="expiration"> + </p> +</section></pre> + </li> + <li>L’última secció que afegim és molt més senzilla, perquè només conté un element {{htmlelement("button")}} de tipus <code>submit</code>, que envia les dades del formulari. Afegeix això al final del formulari: + <pre class="brush: html notranslate"><p> <button type="submit">Validar el pagament</button> </p></pre> + </li> +</ol> + +<p>A sota pots veure en acció el formulari acabat (també el pots trobar a GitHub; consulta el <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.html">codi d’origen</a> a payment-form.html i <a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/payment-form.html">executa’l en viu</a>):</p> + +<p>{{EmbedLiveSample("A_payment_form","100%",620, "", "en-US/Learn/Forms/How_to_structure_a_web_form/Example")}}</p> + +<h2 id="Resum">Resum</h2> + +<p>Ara tens tot el coneixement que necessites per a estructurar adequadament els teus formularis web. En els pròxims articles tractarem moltes de les funcions que s’introdueixen aquí; l’article següent explica amb més detall l’ús de tots els diferents tipus de controls de formulari que voldràs utilitzar per a recopilar informació dels teus usuaris.</p> + +<h2 id="Consulta_també">Consulta també</h2> + +<ul> + <li><a href="http://www.alistapart.com/articles/sensibleforms/" rel="external noopener" title="http://www.alistapart.com/articles/sensibleforms/">A List Apart: <em>Sensible Forms: A Form Usability Checklist</em></a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/Forms/Your_first_form", "Learn/Forms/Basic_native_form_controls", "Learn/Forms")}}</p> + +<h2 id="En_aquest_mòdul">En aquest mòdul</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">El teu primer formulari HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">Com estructurar un formulari HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">Controls de formulari bàsics originals</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/HTML5_input_types">Tipus d'entrades en HTML5</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Additional_form_controls">Els controls de formulari addicionals</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/UI_pseudo-classes">Pseudoclasses d’interfícies d’usuari UI</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Aplicació d’estil als formularis HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Validació de les dades d’un formulari</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Enviar les dades d’un formulari</a></li> +</ul> + +<h3 id="Temes_avançats">Temes avançats</h3> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Enviar formularis mitjançant JavaScript</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">Com crear controls de formulari personalitzats</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">Formularis HTML en els navegadors antics</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Estil avançat per als formularis HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Taula de compatibilitat dels controls de formulari segons el seu codi propietari</a></li> +</ul> diff --git a/files/ca/learn/html/forms/controls_de_formulari_originals/index.html b/files/ca/learn/html/forms/controls_de_formulari_originals/index.html new file mode 100644 index 0000000000..73ee2a9249 --- /dev/null +++ b/files/ca/learn/html/forms/controls_de_formulari_originals/index.html @@ -0,0 +1,325 @@ +--- +title: Controls de formulari originals +slug: Learn/HTML/Forms/Controls_de_formulari_originals +translation_of: Learn/Forms/Basic_native_form_controls +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Forms/How_to_structure_an_HTML_form", "Learn/Forms/HTML5_input_types", "Learn/Forms")}}</div> + +<p class="summary">En <a href="/ca/docs/Learn/HTML/Forms/Com_estructurar_un_formulari_web">l’article anterior</a> hem etiquetat un exemple de formulari web funcional, hem introduït alguns controls de formulari i elements estructurals comuns, però sobretot, ens hem centrat en l'accessibilitat. A continuació analitzarem amb detall la funcionalitat dels diferents controls de formulari, també anomenats <em>ginys</em> o <em>widgets</em>, i estudiarem totes les opcions que hi ha disponibles per a recollir diferents tipus de dades. En aquest article, veurem el conjunt original de controls de formulari que hi ha disponibles en tots els navegadors des dels primers dies.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisits:</th> + <td>Coneixements bàsics d'informàtica i una <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">comprensió bàsica d’HTML</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Comprendre amb detall el conjunt de controls de formulari originals que hi ha disponibles als navegadors per a la recollida de dades, i com implementar-los amb HTML.</td> + </tr> + </tbody> +</table> + +<p>Ja coneixes alguns elements de formulari, com ara {{HTMLelement('form')}}, {{HTMLelement('fieldset')}}, {{HTMLelement('legend')}}, {{HTMLelement('textarea')}}, {{HTMLelement('label')}}, {{HTMLelement('button')}} i {{HTMLelement('input')}}. Aquest article exposa:</p> + +<ul> + <li>Els tipus d’entrada habituals {{HTMLelement('input/button', 'button')}}, {{HTMLelement('input/checkbox', 'checkbox')}}, {{HTMLelement('input/file', 'file')}}, {{HTMLelement('input/hidden', 'hidden')}}, {{HTMLelement('input/image', 'image')}}, {{HTMLelement('input/password', 'password')}}, {{HTMLelement('input/radio', 'radio')}}, {{HTMLelement('input/reset', 'reset')}}, {{HTMLelement('input/submit', 'submit')}} i {{HTMLelement('input/text', 'text')}}.</li> + <li>Alguns dels atributs que són comuns a tots els controls de formulari.</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: Les característiques que comentem en aquest article són compatibles amb tots els navegadors, però no amb tots els controls de formulari. En els dos articles següents expliquem els controls de formulari que s’han afegit a l’HTML5 més recentment. Si vols una referència més avançada, has de consultar la nostra <a href="https://wiki.developer.mozilla.org/ca/docs/Web/HTML/Element#Formularis">referència d’elements de formulari HTML</a> i, en particular, la nostra extensa referència de <a href="/ca/docs/Web/HTML/Element/input">tipus <input></a>.</p> +</div> + +<h2 id="Camps_dentrada_de_text">Camps d'entrada de text</h2> + +<p>Els camps d’entrada de text {{htmlelement("input")}} són els controls del formulari més bàsics. Són una manera molt còmoda de permetre a l’usuari introduir qualsevol tipus de dades, i ja n’hem vist alguns exemples senzills.</p> + +<div class="note"> +<p><strong>Nota</strong>: Els camps de text en format HTML són controls d’entrada de text pla. Això vol dir que no pots aplicar-hi <a href="/ca/docs/Web/HTML/Element/input" title="/en-US/docs/Rich-Text_Editing_in_Mozilla"> una edició enriquida</a> (negreta, cursiva, etc.). Tots els controls de formulari que trobis amb text enriquit són controls de formulari personalitzats creats amb HTML, CSS i JavaScript.</p> +</div> + +<p>Tots els controls bàsics de text comparteixen alguns comportaments comuns:</p> + +<ul> + <li>Es poden etiquetar amb {{htmlattrxref("readonly","input")}} (l'usuari no pot modificar el valor d'entrada, però aquest s’envia igualment amb la resta de dades del formulari) o {{htmlattrxref("disabled","input")}} (el valor d'entrada no es pot modificar i no s'envia mai amb la resta de dades del formulari).</li> + <li>Poden tenir un element {{htmlattrxref("placeholder","input")}}; és el text que apareix dins la caixa d’entrada de text que s’ha d’utilitzar i que en descriu breument l’objectiu.</li> + <li>Se’n poden restringir les propietats <a href="/en-US/docs/Web/HTML/Attributes/size"><code>size</code></a> (la mida física de la caixa) i <a href="/en-US/docs/Web/HTML/Attributes/maxlength" title="/en-US/docs/HTML/Element/input#attr-maxlength"><code>maxlength</code></a> (el nombre màxim de caràcters que es poden introduir a la caixa).</li> + <li>Són compatibles amb la funció de <a href="/en-US/docs/HTML/Element/input#attr-spellcheck" title="/en-US/docs/HTML/Element/input#attr-spellcheck">revisió ortogràfica</a> (utilitzant l'atribut <a href="/en-US/docs/Web/HTML/Attributes/spellcheck"><code>spellcheck</code></a>), si el navegador hi és compatible.</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: L’element {{htmlelement("input")}} és únic entre els elements d’HTML perquè pot adoptar moltes formes diferents segons el valor del seu atribut <code><a href="/en-US/docs/Web/HTML/Attributes/type">type</a></code>. S'utilitza per a crear la majoria de tipus de controls de formulari, que inclouen camps de text d'una sola línia, controls d'hora i data, controls sense entrada de text com ara caixes de selecció, botons d'opció i selectors de colors, i botons.</p> +</div> + +<h3 id="Camps_de_text_duna_sola_línia">Camps de text d'una sola línia</h3> + +<p>Un camp de text d'una sola línia es crea en assignar a l'atribut {{htmlattrxref("type","input")}} d’un element {{HTMLElement("input")}} el valor <code>text</code>, o si l’atribut {{htmlattrxref("type","input")}} s’omet (perquè el valor per defecte d’aquest atribut és <code>text</code>). El valor <code>text</code> d’aquest atribut és també el valor alternatiu que el navegador utilitza si el valor que especifiques per a l’atribut {{htmlattrxref("type","input")}} li és desconegut (per exemple, si especifiques <code>type="color"</code> i el navegador no és compatible amb els selectors de color).</p> + +<div class="note"> +<p><strong>Nota</strong>: Consulta exemples de tots els tipus de camp de text d’una sola línia a GitHub, en el fitxer <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/single-line-text-fields.html">single-line-text-fields.html</a> (també pots consultar l’<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/single-line-text-fields.html">exemple en viu</a>).</p> +</div> + +<p>A continuació es mostra un exemple bàsic de camp de text d'una sola línia:</p> + +<pre class="brush: html notranslate"><input type="text" id="comment" name="comment" value="I'm a text field"></pre> + +<p>Els camps de text d'una sola línia només tenen una restricció: si escrius text amb salts de línia, el navegador elimina els salts de línia abans d'enviar les dades al servidor.</p> + +<p><em>La captura de pantalla següent mostra els tipus de controls d’entrada de text predeterminat, amb el focus i desactivat en Firefox 71 i Safari amb macOS i en Chrome 79 i Edge 18 amb Windows 10.</em></p> + +<p><img alt="Captura de pantalla que mostra els estils de l’atribut en els estats predeterminat, amb el focus i desactivat per a un control d’entrada de text en Firefox, Safari, Chrome i Edge." src="https://mdn.mozillademos.org/files/17021/disabled.png" style="height: 113px; width: 442px;"></p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: L'HTML5 va millorar el camp de text d'una sola línea bàsic original afegint valors especials per a l’atribut {{htmlattrxref("type","input")}} que aplica restriccions de validació específiques i altres funcions, per exemple a l'hora d'introduir adreces URL o números. Les tractarem en l’article següent: <a href="/en-US/docs/Learn/Forms/HTML5_input_types">tipus d’entrada HTML5</a>.</p> +</div> + +<h4 id="Camps_de_contrasenya">Camps de contrasenya</h4> + +<p>Un dels tipus d’entrada de text originals era el tipus de camp de text per a introduir una contrasenya (<code>password</code>):</p> + +<pre class="brush: html notranslate"><input type="password" id="pwd" name="pwd"></pre> + +<p>El valor de contrasenya (<code>password</code>) no afegeix cap restricció especial al text que s’introdueix al camp, però n’amaga el valor (per exemple, amb punts o asteriscs) i impedeix que altres usuaris el puguin llegir.</p> + +<p>Tingues en compte que es tracta només d’una funció d’interfície d’usuari; si no és que envies el formulari d’una manera segura, s’enviarà un text pla, i això no és aconsellable per a la seguretat. Una persona maliciosa podria interceptar les teves dades i robar-te contrasenyes, dades de la targeta de crèdit o qualsevol cosa que hagis enviat. La millor manera de protegir els usuaris d’això és allotjar les pàgines que incloguin formularis en una connexió segura (és a dir, una adreça <code>https://</code>...), perquè les dades se xifrin abans d’enviar-se.</p> + +<p>Els navegadors reconeixen les implicacions de seguretat de l'enviament de dades del formulari per una connexió no segura i disposen de missatges d’advertiments per a dissuadir els usuaris d'utilitzar formularis no segurs. Per a obtenir més informació sobre el que implementa Firefox, consulta l’article <a href="/ca/docs/Security/InsecurePasswords">Contrasenyes insegures</a>.</p> + +<h3 id="Contingut_ocult">Contingut ocult</h3> + +<p>Un altre control de text original és el tipus d’entrada <code>hidden</code>. S'utilitza per a crear un control de formulari que és invisible per a l'usuari, però que s'envia al servidor juntament amb la resta de dades del formulari. Per exemple, pot ser que vulguis enviar una marca de temps al servidor que indiqui quan s’ha fet una comanda. Com que és un control ocult, l’usuari no el pot veure ni editar-ne el valor de manera intencionada, mai no rep el focus i un lector de pantalla tampoc no el detecta.</p> + +<pre class="brush: html notranslate"><input type="hidden" id="timestamp" name="timestamp" value="1286705410"> +</pre> + +<p>Quan crees aquest element, cal que hi configuris els atributs <code>name</code> i <code>value</code>. El valor es pot configurar dinàmicament amb JavaScript. El tipus d’entrada <code>hidden</code> no hauria de tenir cap etiqueta associada.</p> + +<p>Amb HTML5 es van afegir altres tipus d'entrada de text, com {{HTMLElement("input/search", "search")}}, {{HTMLElement("input/url", "url")}} i {{HTMLElement("input/tel", "tel")}}. Es tracten en el tutorial següent: tipus d’entrada HTML5.</p> + +<h2 id="Elements_de_selecció_caselles_de_selecció_i_botons_dopció">Elements de selecció: caselles de selecció i botons d'opció</h2> + +<p>Els elements de selecció (o <em>checkable items</em>, en anglès) són controls dels quals pots canviar l’estat fent-hi clic a sobre o en les etiquetes que hi estan associades. Hi ha dos tipus d’elements de selecció: la casella de selecció, o <em>check box</em>, i el botó d'opció, o <em>radio button</em>. Tots dos utilitzen l’atribut <a href="/en-US/docs/Web/HTML/Attributes//checked"><code>checked</code></a> per indicar si el control està en estat seleccionat per defecte o no.</p> + +<p>Val la pena assenyalar que aquests controls no es comporten exactament igual que altres controls de formulari. Per a la majoria de controls de formulari, un cop validat el formulari s’envien tots els controls que tenen un atribut <a href="/en-US/docs/Web/HTML/Attributes/name"><code>name</code></a>, fins i tot si no se n’ha omplert el valor. En el cas dels elements de selecció, els valors s’envien només si estan seleccionats. Si no ho estan, no s'envia res, ni tan sols el nom. Si estan seleccionats però no tenen cap valor, el nom s'envia amb el valor <em>on</em>.</p> + +<div class="note"> +<p><strong>Nota</strong>: Pots trobar els exemples d'aquesta secció a GitHub, en el fitxer <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/checkable-items.html">checkable-items.html</a> (o també consultar-ne l’<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/checkable-items.html">exemple en viu</a>).</p> +</div> + +<p>Per a assolir una usabilitat/accessibilitat màxima, es recomana delimitar cada llista d’elements que estan relacionats entre si dins d'un element {{htmlelement("fieldset")}} amb un element {{htmlelement("legend")}} que ofereixi una descripció general de la llista. Cada parella d'elements {{htmlelement("label")}}/{{htmlelement("input")}} hauria d’estar continguda en un element de llista (o similar) propi. L'element associat {{htmlelement('label')}} se situa en general immediatament a continuació del botó d'opció o de la caixa de verificació, i les instruccions del grup de botons d'opció o caselles de selecció solen ser el contingut de l'element {{htmlelement("legend")}}. Observa els exemples estructurals que et presentem en l’enllaç anterior.</p> + +<h3 id="Caselles_de_verificació">Caselles de verificació</h3> + +<p>Una casella de verificació es crea amb l’element {{HTMLElement("input")}} i un atribut <a href="/en-US/docs/Web/HTML/Attributes/type"><code>type</code></a> amb el valor {{HTMLElement("input/checkbox", "checkbox")}}.</p> + +<pre class="brush: html notranslate"><input type="checkbox" id="carrots" name="carrots" value="carrots" checked> +</pre> + +<p>Si s’hi inclou l’atribut <code><a href="/en-US/docs/Web/HTML/Attributes/checked">checked</a></code>, la casella de verificació es marca automàticament en carregar-se la pàgina. Si s’hi fa clic, en la casella de verificació o en l’etiqueta associada, la casella de verificació canvia entre els estats activat o desactivat.</p> + +<p>Les captures de pantalla següents mostren les caselles de verificació en els estats per defecte, amb el focus i desactivat en Firefox 71 i Safari 13 amb macOS i Chrome 79 i en Edge 18 amb Windows 10:</p> + +<p><img alt="Caselles de verificació en els estats per defecte, amb el focus i desactivat en Firefox 71 i Safari 13 amb macOS i Chrome 79 i en Edge 18 amb Windows 10" src="https://mdn.mozillademos.org/files/17024/checkboxes.png" style="height: 203px; width: 293px;"></p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: La pseudoclasse {{cssxref('<code>:default')}}</code> selecciona les caselles de verificació i els botons d'opció que presenten l'atribut <code><a href="/en-US/docs/Web/HTML/Attributes/checked">checked</a></code> en el moment de carregar-se la pàgina, encara que ja no estiguin en l’estat <code>checked</code>. La pseudoclasse <code>{{cssxref(':checked')}}</code> selecciona només els elements que estan en estat <code>checked</code>.</p> +</div> + +<p id="Radio_button">A causa de la característica activada-desactivada que presenten les caselles de verificació, es consideren botons de commutació i molts desenvolupadors i dissenyadors han estès l’estil per defecte de la casella de selecció per a crear botons que semblen interruptors. Pots consultar-ne un <a href="https://mdn.github.io/learning-area/html/forms/toggle-switch-example/">exemple en acció aquí</a> (o també pots consultar-ne el <a href="https://github.com/mdn/learning-area/blob/master/html/forms/toggle-switch-example/index.html">codi d’origen</a>).</p> + +<h3 id="Botons_dopció">Botons d'opció</h3> + +<p>Un botó d'opció es crea amb l’element {{HTMLElement("input")}} i l’atribut {{htmlattrxref("type","input")}} establert en el valor <code>radio</code>:</p> + +<pre class="brush: html notranslate"><input type="radio" id="soup" name="meal" checked></pre> + +<p>És possible associar diversos botons de ràdio. Si comparteixen el mateix valor de l’atribut {{htmlattrxref("name","input")}}, es considera que estan en el mateix grup de botons. Només és possible marcar un botó d’un grup determinat cada vegada; això vol dir que quan se’n clica un, tots els altres es desmarquen automàticament. Quan el formulari s’envia, només s’envia el valor del botó d'opció seleccionat. Si no se'n selecciona cap, es considera que el conjunt de botons d'opció està en un estat desconegut i no s’envia cap valor amb el formulari. Quan s’ha clicat un dels botons d'opció d’un mateix grup de botons, no és possible desmarcar tots els botons sense reiniciar el formulari.</p> + +<pre class="brush: html notranslate"><fieldset> + <legend>Quin és el teu menjar preferit?</legend> + <ul> + <li> + <label for="soup">Sopa </label> + <input type="radio" id="soup" name="meal" value="soup" checked> + </li> + <li> + <label for="curry">Curry </label> + <input type="radio" id="curry" name="meal" value="curry"> + </li> + <li> + <label for="pizza">Pizza </label> + <input type="radio" id="pizza" name="meal" value="pizza"> + </li> + </ul> +</fieldset></pre> + +<p>Les captures de pantalla següents mostren els botons d'opció en els estats no marcat i marcat, amb el focus i desactivats: en Firefox 71 i Safari 13 amb MacOs i Chrome 79 i en Edge 18 amb Windows 10.</p> + +<p><img alt="Botons d'opció en Firefox 71 i Safari 13 amb Mac i Chrome 79 i en Edge 18 amb Windows 10" src="https://mdn.mozillademos.org/files/17022/radios.png" style="height: 142px; width: 196px;"></p> + +<h2 id="Botons_reals">Botons reals</h2> + +<p>En realitat, els botons d'opció no són botons, malgrat el nom. Ara anirem una mica més enllà i veurem botons autèntics! Hi ha tres tipus d’entrada que proporcionen botons:</p> + +<dl> + <dt><code>submit</code></dt> + <dd>Envien les dades del formulari al servidor. Per als elements {{HTMLElement("button")}}, si s’omet l'atribut <code>type</code> (o es posa un valor de <code>type</code> no vàlid), s’obté un botó d'enviament.</dd> + <dt><code>reset</code></dt> + <dd>Restableixen tots els controls de formulari als valors predeterminats.</dd> + <dt><code>button</code></dt> + <dd>No presenten cap efecte automàtic, però es poden personalitzar amb codi JavaScript.</dd> +</dl> + +<p>A més, l’element {{htmlelement("button")}} pot prendre un atribut <code>type</code> i imitar aquests tres tipus d'entrada. La diferència principal entre els dos elements és que els elements <code><button></code> autèntics admeten moltes més opcions d’estil.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: També es pot representar com un botó el tipus d’entrada <code>image</code>. El tractarem més endavant també.</p> +</div> + +<div class="note"> +<p><strong>Nota</strong>: Pots trobar els exemples d'aquesta secció a GitHub, en els fitxers <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/button-examples.html">button-examples.html</a> (o també pots consultar l’<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/button-examples.html">exemple en viu</a>).</p> +</div> + +<p>A continuació pots trobar exemples de cada tipus d’entrada <code><input></code> de tipus botó, juntament amb el tipus de botó equivalent.</p> + +<h3 id="submit">submit</h3> + +<pre class="brush: html notranslate"><button type="submit"> + Aquest és un <strong>botó Enviar</strong> +</button> + +<input type="submit" value="Aquest és un botó Enviar"></pre> + +<h3 id="reset">reset</h3> + +<pre class="brush: html notranslate"><button type="reset"> + Aquest és un <strong>botó Reiniciar</strong> +</button> + +<Input type = "reset" value = "Aquest és un botó Reiniciar"></pre> + +<h3 id="anonymous">anonymous</h3> + +<pre class="brush: html notranslate"><button type="button"> + Aquest és un <strong>botó anònim</strong> +</button> + +<input type="button" value="Aquest és un botó anònim"></pre> + +<p>Els botons sempre es comporten igual, tant si fas servir un element {{HTMLElement("button")}} com un element {{HTMLElement("input")}}. Però, com pots veure en els exemples, els elements {{HTMLElement("button")}} et permeten aplicar HTML al contingut inclòs entre les etiquetes <code><button></code> d'obertura i de tancament. En canvi, els elements {{HTMLElement("input")}} són elements buits; el contingut que s’hi mostra s’insereix dins de l’atribut <code>value</code>, i per tant només accepten contingut textual.</p> + +<p>Els exemples següents mostren els tipus d’entrada per defecte dels botons en els estats predeterminat, amb el focus i desactivat: en Firefox 71 i Safari 13 amb macOS i Chrome 79 i en Edge 18 amb Windows 10.</p> + +<p><img alt="Tipus d’entrada per defecte dels botons en els estats predeterminat, amb el focus i desactivat: en Firefox 71 i Safari 13 amb macOS i Chrome 79 i en Edge 18 amb Windows 10" src="https://mdn.mozillademos.org/files/17023/buttons.png" style="height: 182px; width: 286px;"></p> + +<h3 id="Botons_imatge">Botons imatge</h3> + +<p>El control <strong>botó imatge</strong> es comporta exactament com un element {{HTMLElement("img")}}, però passa a comportar-se com un botó de validació quan un usuari hi fa clic.</p> + +<p>Un botó imatge es crea amb un element {{HTMLElement("input")}} i l’atribut {{htmlattrxref("type","input")}} establert en el valor <code>image</code>. Aquest element admet exactament el mateix conjunt d’atributs que l’element {{HTMLElement("img")}}, i a més, tots els atributs que són compatibles amb els altres botons de formulari.</p> + +<pre class="brush: html notranslate"><input type="image" alt="Fes-me clic!" src="my-img.png" width="80" height="30"></pre> + +<p>Si per a validar el formulari s’utilitza un botó imatge, aquest control no envia el seu valor, sinó que s’envien les coordenades X i Y del clic que s’ha fet en la imatge (les coordenades són relatives a la imatge, és a dir, que la part superior esquerra de la imatge representa les coordenades (0, 0)). Les coordenades s’envien com dos parells clau/valor:</p> + +<ul> + <li>La clau del valor X és el valor de l’atribut {{htmlattrxref("name","input")}} seguit de la cadena «<em>.x</em>».</li> + <li>La clau del valor Y és el valor de l’atribut {{htmlattrxref("name","input")}} seguit de la cadena «<em>.y</em>»</li> +</ul> + +<p>Així, per exemple, observa que en fer clic a les coordenades (123, 456) de la imatge i enviar pel mètode <code>get</code>, aquests valors s’annexen a l’URL de la manera següent:</p> + +<pre class="notranslate">http://foo.com?pos.x=123&pos.y=456</pre> + +<p>Aquesta és una manera molt còmoda de construir un «mapa interactiu». La manera d’enviar i recuperar aquests valors es detalla en l’article <a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">Enviar les dades d’un formulari</a>.</p> + +<h2 id="Selector_de_fitxers">Selector de fitxers</h2> + +<p>Un últim tipus <code><input></code> que ens va arribar amb l'HTML inicial és el tipus entrada de fitxer. Els formularis poden enviar fitxers a un servidor (aquesta acció específica també es detalla en l’article <a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">Enviar les dades d’un formulari</a>). El control de selecció de fitxers es pot utilitzar per triar un o més fitxers que es volen enviar.</p> + +<p>Pots crear un <a href="/en-US/docs/Web/HTML/Element/input/file">control de selecció de fitxers</a> amb l’element {{HTMLElement("input")}} i l’atribut {{htmlattrxref("type","input")}} establert en el valor <code>file</code>. Pots restringir els tipus de fitxers que se seleccionen amb l’atribut {{htmlattrxref("accept","input")}}. A més, pots deixar que l’usuari triï més d’un fitxer si hi afegeixes l’atribut {{htmlattrxref("multiple","input")}}.</p> + +<h4 id="Exemple">Exemple</h4> + +<p>En aquest exemple es crea un selector de fitxers que sol·licita fitxers gràfics d’imatge. En aquest cas, l'usuari té la possibilitat de seleccionar diversos fitxers.</p> + +<pre class="brush: html notranslate"><input type="file" name="file" id="file" accept="image/*" multiple></pre> + +<p>En alguns dispositius mòbils, el selector de fitxers pot accedir a fotos, vídeos i àudio capturats directament per la càmera i el micròfon del dispositiu i afegir a l’atribut <code>accept</code> informació sobre la captura com ara:</p> + +<pre class="notranslate"><input type="file" accept="image/*;capture=camera"> +<input type="file" accept="video/*;capture=camcorder"> +<input type="file" accept="audio/*;capture=microphone"></pre> + +<h2 id="Atributs_comuns">Atributs comuns</h2> + +<p>Molts dels elements utilitzats per a definir controls de formulari tenen atributs específics propis. Això no obstant, hi ha un conjunt d’atributs comuns a tots els elements de formulari. Ja n'has conegut uns quants, però a continuació et presentem una llista d’aquests atributs comuns, perquè els tinguis com a referència:</p> + +<table> + <thead> + <tr> + <th scope="col">Nom de l'atribut</th> + <th scope="col">Valor per defecte</th> + <th scope="col">Descripció</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><a href="/en-US/docs/Web/HTML/Attributes/autofocus">autofocus</a></code></td> + <td>false</td> + <td>Aquest atribut booleà permet especificar que un element adquireix el focus d'entrada automàticament quan es carrega la pàgina. En un document només hi pot haver un element associat a un formulari que tingui especificat aquest atribut.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/HTML/Attributes/disabled">disabled</a></code></td> + <td>false</td> + <td>Aquest atribut booleà indica que l'usuari no pot interactuar amb l'element. Si aquest atribut no s'especifica, l'element hereta la configuració de l'element que el conté, per exemple, {{HTMLElement("fieldset")}}; si no hi ha cap element contenidor que tingui establert l'atribut <code>disabled</code>, l'element està habilitat.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/HTML/Attributes/form">form</a></code></td> + <td></td> + <td>L’element <code><form></code> s’utilitza per a associar el control al formulari, quan aquest no hi està imbricat. El valor de l’atribut ha de ser l’atribut <code>id</code> d’un element {{HTMLElement("form")}} del mateix document. D’aquesta manera pots associar un formulari un control de formulari que n’estigui fora, encara que sigui dins d’un formulari diferent.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/HTML/Attributes/name">name</a></code></td> + <td></td> + <td>El nom de l'element; s'envia amb les dades del formulari.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/HTML/Attributes/value">value</a></code></td> + <td></td> + <td>El valor inicial de l'element.</td> + </tr> + </tbody> +</table> + +<h2 id="Resum">Resum</h2> + +<p>Aquest article ha exposat els tipus d’entrada més antics: el conjunt original introduït els primers dies de l’HTML, que és compatible amb tots els navegadors. En l'article següent analitzarem els valors més recents de l’atribut <code>type</code>, que s’han afegit en HTML5.</p> + +<p>{{PreviousMenuNext("Learn/Forms/How_to_structure_an_HTML_form", "Learn/Forms/HTML5_input_types", "Learn/Forms")}}</p> + +<h2 id="En_aquest_mòdul">En aquest mòdul</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">El teu primer formulari HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">Com estructurar un formulari HTML</a></li> + <li><a href="/en-US/docs/Learn/Forms/Basic_native_form_controls">Els controls de formulari bàsics originaris</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/HTML5_input_types">Els tipus d'entrada de l’HTML5</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Additional_form_controls">Altres controls de formulari </a></li> + <li><a href="/en-US/docs/Learn/Forms/Styling_web_forms">Aplicar estils a formularis web</a></li> + <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Aplicació avançada d’estil a formularis </a></li> + <li><a href="/en-US/docs/Learn/Forms/UI_pseudo-classes">Pseudoclasses d’interfície d’usuari (UI)</a></li> + <li><a href="/en-US/docs/Learn/Forms/Form_validation">Validació del formulari de la banda del client</a></li> + <li><a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">Enviar les dades d’un formulari</a></li> +</ul> + +<h3 id="Temes_avançats">Temes avançats</h3> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">Com crear controls de formulari adaptats a client</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Enviar formularis amb JavaScript</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Taula de compatibilitat de controls de formulari de codi propietari</a></li> +</ul> diff --git a/files/ca/learn/html/forms/el_teu_primer_formulari/index.html b/files/ca/learn/html/forms/el_teu_primer_formulari/index.html new file mode 100644 index 0000000000..3f327d4494 --- /dev/null +++ b/files/ca/learn/html/forms/el_teu_primer_formulari/index.html @@ -0,0 +1,298 @@ +--- +title: El teu primer formulari +slug: Learn/HTML/Forms/El_teu_primer_formulari +translation_of: Learn/Forms/Your_first_form +--- +<div>{{LearnSidebar}}{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}</div> + +<p class="summary">Aquest articles t'ofereix la primera experiència de creació d’un formulari web, que inclou dissenyar d’un formulari senzill amb els controls de formulari HTML adequats i altres elements HTML, afegir una mica d’estil molt senzill amb CSS i enviar les dades a un servidor. A mesura que avancem en el mòdul, ampliarem aquesta informació.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td>Coneixements bàsics d'informàtica i <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">fonaments bàsics d’HTML</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Familiaritzar-se amb els formularis web, per a què serveixen, com dissenyar-los, i quins elements bàsics HTML necessitaràs per a casos senzills.</td> + </tr> + </tbody> +</table> + +<h2 id="Què_són_els_formularis_web">Què són els formularis web?</h2> + +<p>Els <strong>formularis web</strong> són un dels principals punts d’interacció entre un usuari i un lloc web o aplicació. Els formularis permeten als usuaris introduir dades, que en general s’envien a un servidor web per a processar-les i emmagatzemar-les (consulta l’article <a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">Enviar les dades d’un formulari web</a> més endavant d’aquest mòdul) o permeten al client actualitzar a l’instant la interfície d’alguna manera (per exemple, afegir un altre element de llista, o mostrar o amagar una funció d'interfície d'usuari).</p> + +<p>L’HTML d’un <strong>formulari web</strong> està format per un o més <strong>controls de formulari</strong> (de vegades anomenats <strong>ginys</strong> o, en anglès, <em>widgets</em>), a més d’alguns elements addicionals que ajuden a estructurar el formulari general, que sovint s’anomenen <strong>formularis HTML</strong>. Els controls poden ser camps de text d'una sola línia o de diverses línies, caixes desplegables, botons, caselles de selecció o botons d'opció, i es creen majoritàriament amb l'element {{htmlelement("input")}}, tot i que hi ha altres elements que també has de conèixer.</p> + +<p>Els controls de formulari també es poden programar per a forçar la introducció de formats o valors específics (<strong>validació del formulari</strong>) i es poden combinar amb etiquetes de text que en descriuen el propòsit tant als usuaris estàndard com als que tenen discapacitats visuals.</p> + +<h2 id="Disseny_del_formulari">Disseny del formulari</h2> + +<p>Abans de començar a codificar, sempre és millor fer un pas enrere i prendre't el temps necessari per pensar en el teu formulari. Dissenyar una maqueta ràpida t'ajudarà a definir el conjunt adequat de dades que vols que l'usuari introdueixi. Des del punt de vista de l'experiència d’usuari (UX), és important recordar que, com més gran sigui el teu formulari, més risc hi ha de frustrar les persones i perdre usuaris. Fes que sigui senzill i concís: demana només les dades que necessites.</p> + +<p>El disseny de formularis és un pas important a l’hora de crear un lloc web o una aplicació. Aquest article no tracta de l’experiència d’usuari amb els formularis, però si vos aprofundir aquest tema, pots llegir els articles següents:</p> + +<ul> + <li>Smashing Magazine conté <a href="https://www.smashingmagazine.com/2018/08/ux-html5-mobile-form-part-1/" rel="external" title="http://uxdesign.smashingmagazine.com/tag/forms/">articles molt bons sobre formularis UX</a>, que inclouen un article antic però encara rellevant anomenat <a href="https://www.smashingmagazine.com/2011/11/extensive-guide-web-form-usability/" rel="external" title="http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/">Extensive Guide To Web Form Usability</a>.</li> + <li>UXMatters també és un recurs que dona consells molt bons de <a href="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php" rel="external" title="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php">bones pràctiques bàsiques</a> per a problemes complexos, com ara <a href="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php" title="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php">formularis que ocupen més d’una pàgina</a>.</li> +</ul> + +<p>En aquest article crearem un formulari de contacte senzill. Fem-ne un esbós.</p> + +<p><img alt="Una manera aproximada de fer un esbós de formulari" src="/files/4579/form-sketch-low.jpg" style="border-style: solid; border-width: 1px; display: block; height: 352px; margin: 0px auto; width: 400px;"></p> + +<p>El nostre formulari inclourà tres camps de text i un botó. Demanem a l’usuari el nom, el correu electrònic i el missatge que vol enviar. En prémer el botó, les dades s’enviaran a un servidor web.</p> + +<h2 id="Aprenentatge_actiu_Creació_del_nostre_formulari_HTML">Aprenentatge actiu: Creació del nostre formulari HTML</h2> + +<p>D’acord, en primer lloc creem l’HTML per al nostre formulari. Utilitzarem els elements HTML següents: {{HTMLelement("form")}}, {{HTMLelement("label")}}, {{HTMLelement("input")}}, {{HTMLelement("textarea")}} i {{HTMLelement("button")}}.</p> + +<p>Abans d’avançar, fes una còpia local de la nostra <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">plantilla HTML senzilla</a> i hi introduiràs el formulari HTML.</p> + +<h3 id="L’element_HTMLelementform">L’element {{HTMLelement("form")}}</h3> + +<p>Tots els formularis comencen amb un element {{HTMLelement("form")}}, com ara:</p> + +<pre class="brush:html; notranslate"><form action="/my-handling-form-page" method="post"> + +</form></pre> + +<p>Aquest element defineix formalment un formulari. És un element contenidor, com un element {{HTMLelement ("section")}} o {{HTMLelement ("footer")}}, però que conté específicament formularis; també admet alguns atributs específics per a configurar el comportament del formulari. Tots els atributs són opcionals, però és una pràctica habitual establir sempre com a mínim els atributs <a href="/en-US/docs/Web/HTML/Attributes/action"><code>action</code></a> i <a href="/en-US/docs/Web/HTML/Attributes/method"><code>method</code></a>:</p> + +<ul> + <li>L’atribut <code>action</code> defineix la ubicació (URL) on s’han d’enviar les dades recollides pel formulari quan es validen.</li> + <li>L'atribut <code>method</code> defineix amb quin mètode HTTP s’envien les dades (normalment <code>get</code> o <code>post</code>).</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: Observa com funcionen aquests atributs en el nostre article <a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Enviar les dades d’un formulari web</a>, que trobaràs més endavant.</p> +</div> + +<p>Per ara, afegeix l'element {{htmlelement("form")}} anterior al teu element HTML {{htmlelement("body")}}.</p> + +<h3 id="Els_elements_HTMLelementlabel_HTMLelementinput_i_HTMLelementtextarea">Els elements {{HTMLelement("label")}}, {{HTMLelement("input")}} i {{HTMLelement("textarea")}}</h3> + +<p>El nostre formulari de contacte no és complex: la part de l’entrada de les dades conté tres camps de text, cadascun amb el seu element {{HTMLelement("label")}} corresponent:</p> + +<ul> + <li>El camp d'entrada del nom és un {{HTMLelement("input/text", "camp de text d'una sola línia")}}.</li> + <li>El camp d'entrada del correu electrònic és una {{HTMLelement ("input/email", "entrada del tipus correu electrònic")}}: un camp de text d'una sola línia que accepta només adreces de correu electrònic.</li> + <li>El camp d'entrada del missatge és un {{HTMLelement("textarea", "àrea de text")}}; un camp de text de múltiples línies.</li> +</ul> + +<p>En termes de codi HTML, necessitem alguna cosa com la següent per a implementar aquests controls de formulari:</p> + +<pre class="brush:html; notranslate" dir="rtl"><form action="/my-handling-form-page" method="post"> + <ul> + <li> + <label for="name">Nom:</label> + <input type="text" id="name" name="user_name"> + </li> + <li> + <label for="mail">Correu electrònic:</label> + input type="email" id="mail" name="user_mail"> + </li> + <li> + <label for="msg">Missatge:</label> + <textarea id="msg" name="user_message"></textarea> + </li> + </ul> +</form></pre> + +<p>Actualitza el codi del teu formulari perquè s'assembli a l’anterior.</p> + +<p>Els elements {{HTMLelement("li")}} hi són per estructurar convenientment el nostre codi i facilitar el disseny (ho veuràs més endavant en aquest article). Incloem una etiqueta explícita per a cada control de formulari per motius d'usabilitat i accessibilitat. Tingues en compte l’ús de l’atribut <a href="/en-US/docs/Web/HTML/Attributes/for"><code>for</code></a> per a tots els elements {{HTMLelement ("label")}}, que pren com a valor l'identificador del control de formulari <a href="/en-US/docs/Web/HTML/Attributes/id"><code>id</code></a> al qual està associat; així és com un formulari s'associa a la seva etiqueta.</p> + +<p>Fer-ho resulta molt útil: associa l’etiqueta amb el control del formulari i permet als usuaris de ratolí, trackpad i dispositius tàctils fer clic a l’etiqueta i activar el control corresponent, i també proporciona un nom accessible per als usuaris de lectors de pantalla. Trobaràs més informació sobre les etiquetes dels formularis en l’article <a href="/ca/docs/Learn/HTML/Forms/Com_estructurar_un_formulari_web">Com estructurar un formulari web</a>.</p> + +<p>En l’element {{HTMLelement("input")}}, l’atribut més important és <code>type</code>. Aquest atribut és molt important perquè defineix la manera com apareix l’element {{HTMLelement("input")}}, i com es comporta. Trobaràs més informació més endavant, en l’article <a href="/ca/docs/Learn/HTML/Forms/Controls_de_formulari_originals">Els controls de formulari bàsics originals</a>.</p> + +<ul> + <li>En el nostre exemple senzill, utilitzem el valor {{HTMLelement ("input/text")}} per a la primera entrada: el valor per defecte d'aquest atribut. Representa un camp bàsic de text d’una sola línia que accepta qualsevol tipus d’entrada de text.</li> + <li>Per a la segona entrada, utilitzem el valor {{HTMLelement ("input/email")}}, que defineix un camp de text d'una sola línia que només accepta una adreça de correu electrònic ben formada. Això converteix un camp de text bàsic en una mena de camp «intel·ligent» que fa algunes comprovacions de validació de les dades que l'usuari introdueix per teclat. També crea un disseny de teclat més adequat per a introduir adreces de correu electrònic (per exemple, amb un símbol @ per defecte) en dispositius amb teclats dinàmics, com els telèfons intel·ligents. Trobaràs més informació sobre la validació de formularis més endavant en l'article <a href="/en-US/docs/Learn/Forms/Form_validation">Validació de formularis en la banda del client</a>.</li> +</ul> + +<p>Per últim, però no per això menys important, cal destacar la sintaxi de <code><input></code> en contraposició a <code><textarea></textarea></code>. Aquesta és una de les curiositats de l’HTML. L’etiqueta <code><input></code> és un element buit, que significa que no necessita una etiqueta de tancament. En canvi, {{HTMLElement("textarea")}} no és un element buit, és a dir, s'hauria de tancar amb l'etiqueta final adequada. Això té una conseqüència en una característica específica dels formularis: la manera de definir el valor per defecte. Per a definir el valor predeterminat d'un element {{HTMLElement("input")}} has d'utilitzar l'atribut <a href="/en-US/docs/Web/HTML/Attributes/value"><code>value</code></a> de la manera següent:</p> + +<pre class="brush:html; notranslate"><input type="text" value="per defecte aquest element s'omple amb aquest text"></pre> + +<p>D'altra banda, si vols definir un valor predeterminat per a un {{HTMLElement("textarea")}}, l'has de posar entre les etiquetes d'obertura i tancament de l'element {{HTMLElement("textarea")}}, com en el cas següent:</p> + +<pre class="brush:html; notranslate"><textarea> +per defecte aquest element s'omple amb aquest text +</textarea></pre> + +<h3 id="L’element_HTMLelementbutton">L’element {{HTMLelement("button")}}</h3> + +<p>L'etiquetatge del nostre formulari és gairebé complet; només haurem d’afegir un botó que permeti a l’usuari enviar les dades un cop emplenat el formulari. Això es fa amb l’element {{HTMLelement("button")}}; afegeix el següent just a sobre de l’etiqueta de tancament <code></form></code>:</p> + +<pre class="brush:html; notranslate"><li class="button"> + <button type="submit">Envia el teu missatge</button> +</li></pre> + +<p>L’element {{htmlelement("button")}} també accepta un atribut <code>type</code>, que a la vegada accepta un d'aquests tres valors: <code>submit</code>, <code>reset</code> o <code>button</code>.</p> + +<ul> + <li>Un clic sobre el botó <code>submit</code> (el valor predeterminat) envia les dades del formulari a la pàgina web definida en l'atribut <code>action</code> de l'element {{HTMLelement("form")}}.</li> + <li>Un clic en un botó <code>reset</code> restableix immediatament tots els controls del formulari als valors predeterminats. Des d’un punt de vista de l'experiència d'usuari, es considera una mala pràctica, per la qual cosa has d’evitar fer servir aquest tipus de botons, tret que tinguis un bon motiu per a incloure’ls.</li> + <li>Un clic sobre un botó <code>button</code>, no fa res! Això sembla una ximpleria, però és molt útil per a crear botons personalitzats; pots definir-ne la funció amb JavaScript.</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: També pots utilitzar l’element {{HTMLElement("input")}} amb el <code>type</code> corresponent i crear un botó, per exemple <code><input type="submit"></code>. L’avantatge principal de l’element {{HTMLelement("button")}} és que l’element {{HTMLelement("input")}} només admet text, mentre que l’element {{HTMLelement("button")}} admet contingut HTML complet i permet dissenyar botons més complexos i creatius.</p> +</div> + +<h2 id="Nocions_bàsiques_d’aplicació_d’estil_a_formularis">Nocions bàsiques d’aplicació d’estil a formularis</h2> + +<p>Ara que has acabat d'escriure el codi HTML del teu formulari, desa’l i obre’l en un navegador. Observa que, de moment, presenta un aspecte més aviat lleig.</p> + +<div class="note"> +<p><strong>Nota</strong>: Si creus que el teu codi HTML no és correcte, compara’l amb el nostre exemple acabat: consulta el fitxer <a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form.html">first-form.html</a> (també pots consultar l’<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html">exemple en viu</a>).</p> +</div> + +<p>Aplicar estil a un formulari perquè quedi bé no és gens fàcil. En aquest article no t’ensenyarem a aplicar-hi estil de manera detallada; de moment, només afegirem una mica de CSS perquè sigui presentable.</p> + +<p>Abans de res, afegeix un element {{htmlelement("style")}} a la teva pàgina, en la capçalera de l’HTML. Hi hauria d’haver una cosa com aquesta:</p> + +<pre class="brush: html notranslate"><style> + +</style></pre> + +<p>Afegeix a l'etiqueta <code>style</code> el CSS següent:</p> + +<pre class="brush:css; notranslate">form { + /* Centra el formulari a la pàgina */ + margin: 0 auto; + width: 400px; + /* Esquema de formulari */ + padding: 1em; + border: 1px solid #CCC; + border-radius: 1em; +} + +ul { + list-style: none; + padding: 0; + margin: 0; +} + +form li + li { + margin-top: 1em; +} + +label { + /* Mida i alineació uniforme */ + display: inline-block; + width: 90px; + text-align: right; +} + +input, +textarea { + / * Per garantir que tots els camps de text tenen la mateixa configuració de tipus de lletra + de manera predeterminada, les àrees de text tenen un tipus de lletra monospai */ + font: 1em sans-serif; + + /* Mida uniforme del camp de text */ + width: 300px; + box-sizing: border-box; + + /* Vores del camp de formulari */ + border: 1px solid #999; +} + +input:focus, +textarea:focus { + /* Destacat addicional per a elements enfocats */ + border-color: #000; +} + +textarea { + /* Alinea els camps de text multilínies amb les seves etiquetes */ + vertical-align: top; + + /* Proporciona espai per a escriure algun text */ + height: 5em; +} + +.button { + /* Alinea els botons amb els camps de text */ + padding-left: 90px; /* la mateixa mida que els elements d'etiqueta */ +} + +button { + /* Aquest marge addicional representa aproximadament el mateix espai que l’espai + entre les etiquetes i els seus camps de text */ + margin-left: .5em; +}</pre> + +<p>Desa’l i torna’l a carregar i observa que el teu formulari no s’hauria de veure tan lleig com abans.</p> + +<div class="note"> +<p><strong>Nota</strong>: Pots trobar la nostra versió a GitHub, en el fitxer <a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form-styled.html">first-form-styled.html</a> (o consultar l’<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html">exemple en viu</a>).</p> +</div> + +<h2 id="Enviar_les_dades_del_formulari_al_servidor_web">Enviar les dades del formulari al servidor web</h2> + +<p>L’última part, i potser la més complicada, és tractar les dades del formulari del costat del servidor. L’element {{HTMLelement("form")}} defineix on i com enviar les dades amb els atributs <a href="/en-US/docs/Web/HTML/Attributes/action"><code>action</code></a> i <a href="/en-US/docs/Web/HTML/Attributes/method"><code>method</code></a>.</p> + +<p>Proporcionem un nom (<a href="/en-US/docs/Web/HTML/Attributes/name"><code>name</code></a>) a cada control de formulari. Els noms són importants tant del costat del client com del costat del servidor; informen el navegador sobre quin nom ha de donar a cadascuna de les dades i, del costat del servidor, permeten tractar cada dada pel nom. Les dades del formulari s’envien al servidor com a parells de nom/valor.</p> + +<p>Per posar el nom a les dades d'un formulari, has d'utilitzar l'atribut <code>name</code> en cada control de formulari que recopilarà una informació específica. Vegem de nou una mica de codi del nostre formulari:</p> + +<pre class="brush:html; notranslate"><form action="/my-handling-form-page" method="post"> + <ul> + <li> + <label for="name">Nom:</label> + <input type="text" id="name" name="user_name" /> + </li> + <li> + <label for="mail">Correu electrònic:</label> + <input type="email" id="mail" name="user_email" /> + </li> + <li> + <label for="msg">Missatge:</label> + <textarea id="msg" name="user_message"></textarea> + </li> + + ... +</pre> + +<p>En el nostre exemple, el formulari enviarà 3 blocs de dades anomenats «<code>user_name</code>», «<code>user_email</code>» i «<code>user_message</code>». Aquestes dades s’enviaran a l’URL «<code>/my-handling-form-page</code>» pel mètode <a href="/en-US/docs/Web/HTTP/Methods/POST"><code>post</code> de HTTP </a>.</p> + +<p>De la banda del servidor, l'script a l'URL «<code>/my-handling-form-page</code>» rebrà les dades com una llista de 3 elements clau/valor continguts en la sol·licitud HTTP. La manera de gestionar aquest script depèn de les dades. Cada llenguatge de servidor (PHP, Python, Ruby, Java, C#, etc.) té el seu mecanisme propi per al tractament de les dades de formulari. Està fora de l’àmbit d’aquest article aprofundir en aquest tema, però si vols saber-ne més, et proporcionem alguns exemples en el nostre article <a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Enviar les dades d’un formulari web</a> que trobaràs més endavant.</p> + +<h2 id="Resum">Resum</h2> + +<p>Enhorabona!, has creat el teu primer formulari web. Hauria de presentar un aspecte semblant a aquest:</p> + +<p>{{ EmbedLiveSample('A_simple_form', '100%', '240', '', '/en-US/Learn/Forms/Your_first_form/Example') }}</p> + +<p>Això només és el començament; ara toca aprofundir. Els formularis tenen molt més poder que el que hem vist aquí i la resta d'articles d'aquest mòdul t'ajudaran a dominar-los.</p> + +<p>{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}</p> + +<h2 id="En_aquest_mòdul">En aquest mòdul</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Forms/Your_first_form">El teu primer formulari</a></li> + <li><a href="/en-US/docs/Learn/Forms/How_to_structure_a_web_form">Com estructurar un formulari web</a></li> + <li><a href="/en-US/docs/Learn/Forms/Basic_native_form_controls">Els controls de formulari bàsics originals</a></li> + <li><a href="/en-US/docs/Learn/Forms/HTML5_input_types">Els tipus d'entrada HTML5</a></li> + <li><a href="/en-US/docs/Learn/Forms/Other_form_controls">Altres controls de formulari</a></li> + <li><a href="/en-US/docs/Learn/Forms/Styling_web_forms">Aplicació d'estil a formularis web</a></li> + <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Aplicació d'estil a formularis avançada</a></li> + <li><a href="/en-US/docs/Learn/Forms/UI_pseudo-classes">Les pseudoclasses UI</a></li> + <li><a href="/en-US/docs/Learn/Forms/Form_validation">Validació de formulari del costat del client</a></li> + <li><a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">Enviar les dades d’un formulari web</a></li> +</ul> + +<h3 id="Temes_avançats">Temes avançats</h3> + +<ul> + <li><a href="/en-US/docs/Learn/Forms/How_to_build_custom_form_controls">Com crear controls de formulari personalitzats</a></li> + <li><a href="/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript">Enviar formularis amb JavaScript</a></li> + <li><a href="/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_widgets">Taula de compatibilitat dels controls de formulari de codi propietari</a></li> +</ul> diff --git a/files/ca/learn/html/forms/index.html b/files/ca/learn/html/forms/index.html new file mode 100644 index 0000000000..bfd01dcf91 --- /dev/null +++ b/files/ca/learn/html/forms/index.html @@ -0,0 +1,356 @@ +--- +title: HTML forms guide +slug: Learn/HTML/Forms +tags: + - Featured + - Formularis + - Guía + - HTML + - Web +translation_of: Learn/Forms +--- +<p>Aquesta guia és una sèrie d'articles que l'ajudaran a dominar els formularis HTML. Els formularis HTML són una eina molt potent per interactuar amb els usuaris; No obstant això, per raons històriques i tècniques, no sempre és obvi com usar-los al seu màxim potencial. En aquesta guia, anem a cobrir tots els aspectes dels formularis HTML, des de donar estil a l'estructura, des de la manipulació de dades amb components personalitzats. Aprendràs a gaudir de la gran potència que ofereixen!</p> + +<h2 id="Articles">Articles</h2> + +<ol> + <li><a href="https://developer.mozilla.org/en-US/docs/HTML/Forms/My_first_HTML_form">El meu primer formulari HTML</a></li> + <li><a href="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form" title="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form"><span>Com estructurar un formulari HTML</span></a></li> + <li><a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets"><span>Formularis widgets nadius</span></a></li> + <li>CSS amb formularis HTML + <ol> + <li><a href="/en-US/docs/HTML/Forms/Styling_HTML_forms" title="/en-US/docs/HTML/Forms/Styling_HTML_forms"><span>Estil en formularis HTML</span></a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms">Estils avançats en formularis HTML</a></li> + <li><a href="/en-US/docs/Property_compatibility_table_for_form_widgets" title="/en-US/docs/Property_compatibility_table_for_form_widgets">Taula de propietats compatibles per formularis widgets</a></li> + </ol> + </li> + <li><a href="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>Enviar <s>y recuperar</s> dades del formulari</span></a></li> + <li><a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">Validació de dades del formulari</a></li> + <li><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">Contruir formularis <span>widgets personalitzats</span></a></li> + <li><a href="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript" title="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript">Enviament de formularis amb JavaScript</a> + <ol> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects">Utilitzant l'objecte FormData</a></li> + </ol> + </li> + <li><a href="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers" title="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers">Formularis HTML en navegadors antics</a></li> +</ol> + +<h2 id="Documentació_HTML">Documentació HTML</h2> + +<h3 id="Elements_HTML">Elements HTML</h3> + +<table> + <thead> + <tr> + <th scope="col">Element</th> + <th scope="col"><span class="short_text" id="result_box" lang="ca"><span>Interfície</span> <span>DOM</span> <span>relacionat</span></span></th> + <th scope="col">Descripció</th> + </tr> + </thead> + <tbody> + <tr> + <td style="vertical-align: top;">{{HTMLElement("button")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLButtonElement")}}</td> + <td style="vertical-align: top;"><span class="short_text" id="result_box" lang="ca"><span>L'element</span> <code><span>button</span></code> <span>representa</span> <span>un botó que</span> <span>es premi</span><span>.</span></span></td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("datalist")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLDataListElement")}}</td> + <td style="vertical-align: top;">L'element <span style="font-family: courier new;">datalist</span> conté un conjunt d'elements {{ HTMLElement("option") }} que representen les opcions possibles per al valor d'altres elements de formulari.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("fieldset")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLFieldSetElement")}}</td> + <td style="vertical-align: top;">El <span style="font-family: courier new;">fieldset</span> s'utilitza per agrupar diversos elements formulari dins d'un formulari.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("form")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLFormElement")}}</td> + <td style="vertical-align: top;">L'element <code>form</code> representa una secció del document que conté l'element interactiu que permet a un usuari enviar informació a un servidor web.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("input")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLInputElement")}}</td> + <td style="vertical-align: top;">L'element <code>input</code> s'utilitza per crear controls interactius per als formularis.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("keygen")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLKeygenElement")}}</td> + <td style="vertical-align: top;">L'element <code>keygen</code> existeix per facilitar la generació de material clau, i l'enviament de la clau pública com a part d'un formulari HTML</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("label")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLLabelElement")}}</td> + <td style="vertical-align: top;">L'element <code>label</code> representa un títol d'un article en una interfície d'usuari</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("legend")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLLegendElement")}}</td> + <td style="vertical-align: top;">L'element <code>legend </code>representa una llegenda per al contingut del seu pare {{ HTMLElement("fieldset") }}.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("meter")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLMeterElement")}}</td> + <td style="vertical-align: top;">L'element <code>metre</code> representa o bé un valor escalar dins d'un rang conegut o un valor fraccionari.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("optgroup")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLOptGroupElement")}}</td> + <td style="vertical-align: top;">l'element <code>optgroup</code> crea un grup d'opcions dins d'un element {{ HTMLElement("select") }} element.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("option")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLOptionElement")}}</td> + <td style="vertical-align: top;">l'element HTML <code>option</code> s'utilitza per crear un control que representa un element dins d'un element {{ HTMLElement("select") }}, o un {{ HTMLElement("optgroup") }} o un {{ HTMLElement("datalist") }}.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("output")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLOutputElement")}}</td> + <td style="vertical-align: top;">L'element <code>output </code>representa el resultat d'un càlcul.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("progress")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLProgressElement")}}</td> + <td style="vertical-align: top;">L'element <code>progress </code>s'utilitza per veure el progrés de la finalització d'una tasca.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("select")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLSelectElement")}}</td> + <td style="vertical-align: top;">L'element <code>select</code> representa un control que presenta un menú d'opcions.</td> + </tr> + <tr> + <td style="vertical-align: top;">{{HTMLElement("textarea")}}</td> + <td style="vertical-align: top;">{{domxref("HTMLTextAreaElement")}}</td> + <td style="vertical-align: top;">L'element <code>textarea</code> representa un control d'edició de text pla multilínia.</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Nota:</strong> Tots els elements formulari, com tots els elements d'HTML, suportan la interfície DOM {{domxref("HTMLElement")}}.</p> +</div> + +<h3 id="Atributs_HTML">Atributs HTML</h3> + +<table class="standard-table"> + <thead> + <tr> + <th>Nom Atribut</th> + <th>Elements</th> + <th>Descripció</th> + </tr> + </thead> + <tbody> + <tr> + <td>accept</td> + <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> + <td>Llista de tipus que accepta el servidor, normalment un tipus de fitxer.</td> + </tr> + <tr> + <td style="white-space: nowrap;">accept-charset</td> + <td>{{ HTMLElement("form") }}</td> + <td>Llista de jocs de caràcters suportats.</td> + </tr> + <tr> + <td>action</td> + <td>{{ HTMLElement("form") }}</td> + <td>L'URI d'un programa que processa la informació presentada a través del formulari.</td> + </tr> + <tr> + <td>autocomplete</td> + <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> + <td>Indica si els controls d'aquest formulari poden tenir per defecte els seus valors emplenats automàticament pel navegador.</td> + </tr> + <tr> + <td>autofocus</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>L'element ha de tenir el focus automàticament després de carregar la pàgina.</td> + </tr> + </tbody> + <tbody> + <tr> + <td>challenge</td> + <td>{{ HTMLElement("keygen") }}</td> + <td>Una cadena proposada que es presenta juntament amb la clau pública.</td> + </tr> + <tr> + <td>checked</td> + <td>{{ HTMLElement("input") }}</td> + <td>Indica si l'element s'ha de comprovar en carregar la pàgina.</td> + </tr> + <tr> + <td>cols</td> + <td>{{ HTMLElement("textarea") }}</td> + <td><span id="result_box" lang="ca"><span>Defineix</span> <span>el nombre</span> <span>de columnes</span> <span>en una àrea</span> <span>de text.</span></span></td> + </tr> + <tr> + <td>data</td> + <td>{{ HTMLElement("object") }}</td> + <td><span id="result_box" lang="ca"><span>Especifica</span> <span>l'adreça URL</span> <span>del recurs.</span></span></td> + </tr> + <tr> + <td>dirname</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td> </td> + </tr> + <tr> + <td>disabled</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td><span id="result_box" lang="ca"><span>Indica</span> <span>si l'usuari</span> <span>pot interactuar</span> <span>amb l'element</span><span>.</span></span></td> + </tr> + <tr> + <td>enctype</td> + <td>{{ HTMLElement("form") }}</td> + <td><span id="result_box" lang="ca"><span>Defineix</span> <span>el tipus</span> <span>de contingut</span> <span>de les dades del</span> <span>formulari</span> <span>quan</span> <span>el mètode és</span> <span>POST</span><span>.</span></span></td> + </tr> + <tr> + <td>for</td> + <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td> + <td><span id="result_box" lang="ca"><span>Descriu</span> <span>els</span> <span>elements que</span> <span>pertanyen</span> <span>a aquest.</span></span></td> + </tr> + <tr> + <td>form</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Indica el formulari que és el propietari de l'element.</td> + </tr> + </tbody> + <tbody> + <tr> + <td>high</td> + <td>{{ HTMLElement("meter") }}</td> + <td>Indica el límit inferior del rang superior.</td> + </tr> + <tr> + <td>keytype</td> + <td>{{ HTMLElement("keygen") }}</td> + <td>Especifica el tipus de clau generada.</td> + </tr> + <tr> + <td>list</td> + <td>{{ HTMLElement("input") }}</td> + <td>Identifica una llista d'opcions predefinides per suggerir a l'usuari.</td> + </tr> + <tr> + <td>low</td> + <td>{{ HTMLElement("meter") }}</td> + <td>Indica el límit superior del rang inferior.</td> + </tr> + <tr> + <td>max</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td> + <td>Indica el valor màxim permès.</td> + </tr> + <tr> + <td>maxlength</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td><span id="result_box" lang="ca"><span>Defineix</span> <span>el nombre</span> <span>màxim</span> <span>de caràcters</span> <span>permesos en</span> <span>l'element</span><span>.</span></span></td> + </tr> + <tr> + <td>method</td> + <td>{{ HTMLElement("form") }}</td> + <td><span id="result_box" lang="ca"><span>Defineix</span> <span>quin mètode</span> <span>HTTP</span> <span>a utilitzar al</span> <span>enviar el formulari.</span> <span>Pot ser</span> <span>GET</span> <span>(</span><span>per defecte</span><span>)</span> <span>o</span> <span>POST</span><span>.</span></span></td> + </tr> + <tr> + <td>min</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td> + <td><span id="result_box" lang="ca"><span>Indica</span> <span>el valor mínim</span> <span>permès.</span></span></td> + </tr> + <tr> + <td>multiple</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> + <td>Indica si diversos valors es poden introduir en una entrada del <code>correu electrònic</code> o tipus <code>arxiu</code>.</td> + </tr> + <tr> + <td>name</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Nom de l'element. Per exemple el usat en el servidor per identificar els camps de formulari enviat.</td> + </tr> + <tr> + <td>novalidate</td> + <td>{{ HTMLElement("form") }}</td> + <td>Aquest atribut indica que el formulari no ha de ser validat quan sigui enviat.</td> + </tr> + <tr> + <td>optimum</td> + <td>{{ HTMLElement("meter") }}</td> + <td>Indica el valor numèric òptim.</td> + </tr> + <tr> + <td>pattern</td> + <td>{{ HTMLElement("input") }}</td> + <td>Defineix una expressió regular que es validarà el valor de l'element en contra.</td> + </tr> + <tr> + <td>placeholder</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>Proporciona un suggeriment a l'usuari de què es poden introduir en el camp.</td> + </tr> + <tr> + <td>readonly</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td><span id="result_box" lang="ca"><span>Indica si l'</span><span>element pot ser</span> <span>editat</span> <span>o</span> <span>no.</span></span></td> + </tr> + <tr> + <td>required</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td><span id="result_box" lang="ca"><span>Indica</span> <span>si es</span> <span>requereix aquest</span> <span>element</span> <span>per omplir o</span> <span>no.</span></span></td> + </tr> + <tr> + <td>rows</td> + <td>{{ HTMLElement("textarea") }}</td> + <td><span id="result_box" lang="ca"><span>Defineix</span> <span>el nombre</span> <span>de files</span> <span>en una àrea</span> <span>de text.</span></span></td> + </tr> + <tr> + <td>selected</td> + <td>{{ HTMLElement("option") }}</td> + <td><span id="result_box" lang="ca"><span>Defineix un</span> <span>valor que serà</span> <span>seleccionat</span> <span>en carregar la pàgina</span><span>.</span></span></td> + </tr> + <tr> + <td>size</td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> + <td>Defineix l'amplada de l'element (en píxels). Si el atribut <code>type</code> de l'element és <code>text</code> o <code>contrasenya</code>, llavors és el nombre de caràcters.</td> + </tr> + <tr> + <td>src</td> + <td>{{ HTMLElement("img") }}</td> + <td>La URL del contingut integrable.</td> + </tr> + <tr> + <td>step</td> + <td>{{ HTMLElement("input") }}</td> + <td> </td> + </tr> + <tr> + <td>target</td> + <td>{{ HTMLElement("form") }}</td> + <td> </td> + </tr> + <tr> + <td>type</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td> + <td>Defineix el tipus d'element.</td> + </tr> + <tr> + <td>usemap</td> + <td>{{ HTMLElement("img") }}</td> + <td> </td> + </tr> + <tr> + <td>value</td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td> + <td>Defineix un valor predeterminat que es mostrarà en l'element en la càrrega de la pàgina.</td> + </tr> + <tr> + <td>wrap</td> + <td>{{ HTMLElement("textarea") }}</td> + <td>Indica si el text ha de ser embolicat o no.</td> + </tr> + </tbody> +</table> + +<h3 id="Referència_normativa">Referència normativa</h3> + +<ul> + <li><a href="https://www.w3.org/TR/html51/sec-forms.html#sec-forms" lang="en" rel="external" title="https://www.w3.org/TR/html51/sec-forms.html#sec-forms">W3C HTML 5.1 Especificacions (Formularis)</a></li> + <li><a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms" rel="external" title="https://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms">WHATWG HTML Temps de vida dels (Formularis)</a></li> +</ul> diff --git a/files/ca/learn/html/forms/validacio_formularis/index.html b/files/ca/learn/html/forms/validacio_formularis/index.html new file mode 100644 index 0000000000..0b76183d7e --- /dev/null +++ b/files/ca/learn/html/forms/validacio_formularis/index.html @@ -0,0 +1,829 @@ +--- +title: Validació de formularis del costat del client +slug: Learn/HTML/Forms/Validacio_formularis +translation_of: Learn/Forms/Form_validation +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}</div> + +<p>Abans d’enviar dades al servidor és important assegurar-se que s’emplenen tots els controls de formulari necessaris en el format correcte. Es denomina <strong>validació de formularis del costat del client</strong>, i ajuda que les dades enviades coincideixin amb els requisits establerts en els diversos controls de formulari. Aquest article et permet conèixer els conceptes bàsics i veure exemples de validació de formularis del costat del client.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisits:</th> + <td>Coneixements bàsics d'informàtica i nocions d'<a href="/ca/docs/Learn/HTML">HTML</a>, <a href="/ca/docs/Learn/CSS">CSS</a> i <a href="/ca/docs/Learn/JavaScript">JavaScript</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Entendre què és la validació de formularis de costat del client, per què és important i conèixer-ne diverses tècniques d’implementació.</td> + </tr> + </tbody> +</table> + +<p>La validació del costat del client és una comprovació inicial i una característica important que garanteix una bona experiència d’usuari; si es detecten dades no vàlides del costat del client, l'usuari pot corregir-les immediatament. Si van al servidor i aquest les rebutja, es genera un retard perquè les dades s’envien de tornada a la banda del client perquè l'usuari les corregeixi.</p> + +<p>Tanmateix, la validació del costat del client <em>no s'ha de considerar</em> una mesura de seguretat exhaustiva. Les aplicacions sempre han de dur a terme comprovacions de seguretat de qualsevol informació que s’envia en un formulari <em>tant del costat del servidor</em> com <strong>també</strong> <em>del costat del client</em>, perquè la validació del client és molt fàcil de desactivar i qualsevol usuari maliciós pot enviar fàcilment dades incorrectes al teu servidor. Llegeix <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">La seguretat dels llocs web</a> per a fer-te una idea de què <em>podria</em> passar; implementar la validació del costat del servidor és fora de l’àmbit d’aquest mòdul, però l’has de tenir en compte.</p> + +<h2 id="Què_és_la_validació_de_formularis">Què és la validació de formularis?</h2> + +<p>Ves a qualsevol lloc web popular que tingui un formulari d’inscripció i observa que et fan comentaris quan no introdueixes les dades en el format que s’espera. Rebràs missatges com ara:</p> + +<ul> + <li>«Aquest camp és obligatori» (no es pot deixar en blanc).</li> + <li>«Si et plau, introdueix el número de telèfon en el format xxx-xxxx» (cal un format de dades específic que es consideri vàlid).</li> + <li>«Si et plau, introdueix una adreça de correu electrònic vàlida» (les dades que has introduït no tenen el format adequat).</li> + <li>«La contrasenya ha de tenir entre 8 i 30 caràcters i ha de contenir una lletra majúscula, un símbol i un número» (cal un format de dades molt específic).</li> +</ul> + +<p>Això es coneix com <strong>validació de formulari</strong>. Quan introdueixes dades, el navegador i/o el servidor web comproven que les dades estan en el format correcte i són dins de les restriccions que l’aplicació estableix. La validació que es fa en el navegador s’anomena <strong>validació del costat del client</strong>, mentre que la validació que es fa en el servidor s’anomena <strong>validació del costat del servidor</strong>. En aquest article ens centrem en la validació del costat del client.</p> + +<p>Si la informació està en el format correcte, l'aplicació permet que les dades que les dades s’enviïn al servidor i (normalment) es guarden en una base de dades; si la informació no té el format correcte, es proporciona a l'usuari un missatge d'error en què li explica què ha de corregir, i s'ha de tornar a provar.</p> + +<p>Volem fer que l’emplenament dels formularis web sigui tan fàcil com sigui possible. Aleshores, per què insistim que cal validar els nostres formularis? Hi ha tres raons principals:</p> + +<ul> + <li><strong>Volem recollir les dades correctes en el format adequat.</strong> Les aplicacions no funcionen correctament si les dades dels usuaris s’emmagatzemen en un format equivocat, si són incorrectes, o senzillament si no n’hi ha.</li> + <li><strong>Volem protegir les dades dels nostres usuaris</strong>. Obligar els usuaris a introduir contrasenyes segures facilita la protecció de la informació del seu compte.</li> + <li><strong>Volem protegir-nos</strong>. Un usuari maliciós té moltes maneres de fer un mal ús dels formularis que no disposen de protecció, i pot danyar l’aplicació (consulta <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">La seguretat dels llocs web</a>). + <div class="warning"><strong>Atenció:</strong> No et refiïs mai de les dades que passen del client al servidor. Fins i tot quan el teu formulari es valida correctament i s’evita l’entrada de dades en format incorrecte del costat del client, un usuari maliciós encara pot modificar la sol·licitud de xarxa.</div> + </li> +</ul> + +<h2 id="Els_diferents_tipus_de_validació_del_costat_del_client"><strong>Els diferents tipus de validació del costat del client</strong></h2> + +<p>Els llocs web poden presentar dos tipus diferents de validació del costat del client</p> + +<ul> + <li>La <strong>validació de formulari integrada</strong> utilitza les funcions de validació dels formularis HTML5, que ja hem comentat en altres articles d'aquest mòdul. En general, aquesta validació no requereix JavaScript. La validació de formulari integrada té un rendiment més bo que el JavaScript, però no és tan personalitzable com la validació amb JavaScript.</li> + <li>La <strong>validació amb JavaScript</strong> es codifica en llenguatge JavaScript. Aquesta validació és totalment personalitzable, però cal crear-la tota (o bé fer servir una biblioteca de fitxers).</li> +</ul> + +<h2 id="Ús_de_la_validació_de_formulari_integrada">Ús de la validació de formulari integrada</h2> + +<p>Una de les característiques més significatives dels <a href="/en-US/docs/Learn/Forms/HTML5_input_types">controls de formulari HTML5</a> és la capacitat de validar la majoria de les dades de l'usuari sense dependre de JavaScript. Això es fa gràcies als atributs de validació dels elements del formulari. Ja n'hem vist uns quants, però en fem una recapitulació:</p> + +<ul> + <li><code><a href="/en-US/docs/Web/HTML/Attributes/required">required</a></code>: Especifica si cal emplenar un camp de formulari abans de poder enviar el formulari.</li> + <li><code><a href="/en-US/docs/Web/HTML/Attributes/minlength">minlength</a></code> i <code><a href="/en-US/docs/Web/HTML/Attributes/maxlength">maxlength</a></code>: Especifica la longitud mínima i màxima de les dades textuals (cadenes)</li> + <li><code><a href="/en-US/docs/Web/HTML/Attributes/min">min</a></code> i <code><a href="/en-US/docs/Web/HTML/Attributes/max">max</a></code>: Especifica els valors mínims i màxims dels tipus d'entrada numèrics.</li> + <li><code>type</code>: Especifica si les dades han de ser un número, una adreça de correu electrònic o algun altre tipus específic preestablert.</li> + <li><code><a href="/en-US/docs/Web/HTML/Attributes/pattern">pattern</a></code>: Especifica una <a href="/ca/docs/Web/JavaScript/Guide/Regular_Expressions">expressió regular</a> que defineix un patró que han de seguir les dades introduïdes.</li> +</ul> + +<p>Si les dades que s’introdueixen en un camp de formulari segueixen les regles especificades pels atributs anteriors, es consideren vàlides. Si no és així, es consideren no vàlides.</p> + +<p>Quan un element és vàlid, es compleixen els aspectes següents:</p> + +<ul> + <li>L’element coincideix amb la pseudoclasse {{cssxref(":valid")}} de CSS, que et permet aplicar un estil específic als elements vàlids.</li> + <li>Quan l’usuari valida les dades, el navegador envia el formulari, sempre que no hi hagi res més que ho impedeixi (per exemple, JavaScript).</li> +</ul> + +<p>Quan un element no és vàlid, es verifica el següent:</p> + +<ul> + <li>L'element coincideix amb la pseudoclasse {{cssxref(":invalid")}} de CSS, i de vegades amb altres pseudoclasses de la interfície d'usuari (per exemple, {{cssxref(":out-of-range")}}), segons el tipus d'error, i això et permet aplicar un estil específic als elements no vàlids.</li> + <li>Quan l’usuari valida les dades, el navegador bloca l’enviament del formulari i mostra un missatge d’error.</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Els diversos errors que impedeixen enviar el formulari inclouen {{domxref('validityState.badInput', 'badInput')}}, {{domxref('validityState.patternMismatch','patternMismatch')}}, {{domxref('validityState.rangeOverflow','rangeOverflow')}} o {{domxref('validityState.rangeUnderflow','rangeUnderflow')}}, {{domxref('validityState.stepMismatch','stepMismatch')}}, {{domxref('validityState.tooLong','tooLong')}} o {{domxref('validityState.tooShort','tooShort')}}, {{domxref('validityState.typeMismatch','typeMismatch')}}, {{domxref('validityState.valueMissing','valueMissing')}}, o {{domxref('validityState.customError','customError')}}.</p> +</div> + +<h2 id="Exemples_de_validació_de_formularis_integrada"><strong>Exemples de validació de formularis integrada</strong></h2> + +<p>En aquesta secció provarem alguns dels atributs que hem esmentat abans.</p> + +<h3 id="Un_fitxer_d’inici_senzill">Un fitxer d’inici senzill</h3> + +<p>Comencem amb un exemple senzill: una entrada que permet triar si prefereixes un plàtan o una cirera. Aquest exemple inclou una entrada de text {{HTMLElement("input")}} senzilla amb una etiqueta {{htmlelement("label")}} associada i un {{htmlelement("button")}} de validació. En pots trobar el codi d’origen a GitHub, en el fitxer <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a>, i l’exemple en viu a continuació.</p> + +<pre class="brush: html notranslate"><form> + <label for="choose">Would you prefer a banana or a cherry?</label> + <input id="choose" name="i_like"> + <button>Submit</button> +</form></pre> + +<pre class="brush: css notranslate">input:invalid { + border: 2px dashed red; +} + +input:valid { + border: 2px solid black; +}</pre> + +<p>{{EmbedLiveSample("Un_fitxer_d’inici_senzill", "100%", 80)}}</p> + +<p>Per començar, fes una còpia del fitxer <code>fruit-start.html</code> en un directori nou del teu disc dur.</p> + +<h3 id="L’atribut_required">L’atribut required</h3> + +<p>La característica de validació HTML5 més simple és l’atribut <code><a href="/en-US/docs/Web/HTML/Attributes/required">required</a></code> (obligatori). Afegeix aquest atribut a l'element si vols que una entrada sigui obligatòria. Quan es defineix aquest atribut, l'element coincideix amb la pseudoclasse {{cssxref(':required')}} de la interfície d'usuari i el formulari no s’envia; si l'entrada és buida, en el moment de validar mostra un missatge d'error. L’entrada, tot i que és buida, es considera no vàlida i coincideix amb la pseudoclasse de la interfície d'usuari {{cssxref(':invalid')}}.</p> + +<p>Afegeix un atribut <code>required</code> a la teva entrada, com es mostra a continuació.</p> + +<pre class="brush: html notranslate"><form> + <label for="choose">Would you prefer a banana or a cherry? (requested)</label> + <input id="choose" name="i_like" required> + <button>Submit</button> +</form></pre> + +<p>Tingues en compte el CSS que s'ha inclòs en el fitxer d'exemples:</p> + +<pre class="brush: css notranslate">input:invalid { + border: 2px dashed red; +} + +input:invalid:required { + background-image: linear-gradient(to right, pink, lightgreen); +} + +input:valid { + border: 2px solid black; +}</pre> + +<p>Aquest CSS afegeix una vora vermella quan l’entrada no és vàlida i una vora negra més subtil quan és vàlida. També hi afegeix un degradat de fons quan l’entrada és necessària <em>i</em> no vàlida. Prova’n el comportament nou en l'exemple següent:</p> + +<p>{{EmbedLiveSample("L’atribut_required", "100%", 80)}}</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Pots trobar aquest exemple en directe a GitHub en el fitxer <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-required.html">fruit-validation.html</a> (consulta’n també el <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-required.html">codi d’origen</a>.)</p> +</div> + +<p>Prova de validar el formulari sense cap valor. Observa que l’entrada no vàlida pren el focus, apareix un missatge d’error per defecte («Emplena aquest camp») i el formulari no s’envia.</p> + +<p>La presència de l'atribut <code>required</code> en qualsevol element que admet aquest atribut significa que l'element coincideix amb la pseudoclasse {{cssxref(':required')}}, tant si té un valor com si no. Si {{HTMLElement("input")}} no té cap valor, l’element <code>input</code> coincideix amb la pseudoclasse {{cssxref(':invalid')}}.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Si vols oferir una bona experiència d'usuari, indica quan són obligatoris els camps de formulari. No és només una bona experiència d’usuari, sinó que ho demanen les directrius d’<a href="/ca/docs/Learn/Accessibility">accessibilitat</a> de WCAG. A més, demana només les dades que necessites realment. Per què necessites saber, per exemple, el gènere o el títol d’algú?</p> +</div> + +<h3 id="Validar_una_expressió_regular">Validar una expressió regular</h3> + +<p>Una altra característica útil de la validació és l’atribut <a href="/en-US/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a>, que espera una <a href="/ca/docs/Web/JavaScript/Guide/Regular_Expressions">expressió regular</a> com a valor. Una expressió regular (<em>regex</em>) és un patró que es pot utilitzar per a establir combinacions de caràcters en cadenes de text, de manera que resulten ideals per a la validació de formularis i serveixen per a molts altres usos en JavaScript.</p> + +<p>Els <em>regex</em> són força complexos i no pretenem ensenyar-los exhaustivament en aquest article. A continuació te’n mostrem alguns exemples perquè et puguis fer una idea bàsica de com funcionen.</p> + +<ul> + <li><code>a</code>: Coincideix amb un caràcter que és <code>a</code> (ni <code>b</code>, ni <code>aa</code>, etc.).</li> + <li><code>abc</code>: Coincideix amb <code>a</code>, seguit de <code>b</code> i de <code>c</code>.</li> + <li><code>ab?c</code>: Coincideix amb <code>a</code>, seguit opcionalment d’un sol <code>b</code>, seguit de <code>c</code> ( <code>ac</code> o <code>abc</code>)</li> + <li><code>ab*c</code>: Coincideix amb <code>a</code>, opcionalment seguit de qualsevol nombre de caràcters <code>b</code>, seguit de <code>c</code>. (<code>ac</code>, <code>abc</code>, <code>abbbbbc</code>, etc.).</li> + <li><code>a|b</code>: Coincideix amb un caràcter que és <code>a</code> o <code>b</code>.</li> + <li><code>abc|xyz</code>: Coincideix exactament amb <code>abc</code> o exactament amb <code>xyz</code> (però no amb <code>abcxyz</code> o <code>a</code> o <code>y</code>, etc.).</li> +</ul> + +<p>Hi ha moltes més possibilitats, que no presentem aquí. Per a obtenir-ne una llista completa i molts exemples, consulta la nostra documentació sobre expressions regulars.</p> + +<p>Posem-ho en pràctica amb un exemple. Afegeix al teu codi HTML un atribut <a href="/ca/docs/Web/JavaScript/Guide/Regular_Expressions"><code>pattern</code></a>, d'aquesta manera:</p> + +<pre class="brush: html notranslate"><form> + <label for="choose">Would you prefer a banana or a cherry?</label> + <input id="choose" name="i_like" required pattern="[Bb]anana|[Cc]herry"> + <button>Submit</button> +</form> +</pre> + +<div class="hidden"> +<pre class="brush: css notranslate">input:invalid { + border: 2px dashed red; +} + +input:valid {<strong> + </strong>border: 2px solid black; +}</pre> +</div> + +<p>Això ens proporciona l’actualització següent. Prova-ho:</p> + +<p>{{EmbedLiveSample("Validar_una_expressió_regular", "100%", 80)}}</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Pots trobar aquest exemple en directe a GitHub en el fitxer <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-pattern.html">fruit-pattern.html</a> (consulta’n també el <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-pattern.html">codi d’origen</a>).</p> +</div> + +<p>En aquest exemple, l’element {{HTMLElement("input")}} accepta un dels quatre valors possibles: les cadenes «banana», «Banana», «cherry» o «Cherry». Les expressions regulars distingeixen entre majúscules i minúscules, però hem eliminat aquesta característica utilitzant un patró «Aa» extra situat entre claudàtors.</p> + +<p>En aquest punt, intenta canviar el valor de l’atribut <a href="/en-US/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> per a igualar alguns dels exemples que has vist abans, i observa com això afecta els valors que pots introduir perquè que el valor d’entrada sigui vàlid. Prova d'escriure-hi alguna cosa i observa què passa. Intenta tant com sigui possible que estiguin relacionats amb la fruita perquè els teus exemples siguin coherents.</p> + +<p>Si un valor {{HTMLElement("input")}} no buit no coincideix amb el patró de l'expressió regular, <code>input</code> coincideix amb la pseudoclasse {{cssxref(':invalid')}}.</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> Alguns tipus d'elements {{HTMLElement("input")}} no necessiten validar una expressió regular amb l’atribut <a href="/en-US/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a>. Si especifiques el tipus <code>email</code>, per exemple, el valor d’entrada es valida amb un patró d’adreça de correu electrònic ben formada, o amb un patró que coincideix amb una llista d’adreces de correu electrònic separades per comes si té l’atribut <a href="/en-US/docs/Web/HTML/Attributes/multiple"><code>multiple</code></a>.</p> +</div> + +<div class="blockIndicator note"> +<p><strong><strong>Nota</strong>: </strong>L'element {{HTMLElement("textarea")}} no admet l'atribut <a href="/en-US/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a>.</p> +</div> + +<h3 id="Restringir_la_longitud_de_les_entrades">Restringir la longitud de les entrades</h3> + +<p>Pots restringir la longitud de caràcters de tots els camps de text creats amb {{HTMLElement("input")}} o {{HTMLElement("textarea")}} amb els atributs <a href="/en-US/docs/Web/HTML/Attributes/minlength"><code>minlength</code></a> i <code><a href="/en-US/docs/Web/HTML/Attributes/maxlength">maxlength</a></code>. Un camp no és vàlid si té un valor que té menys caràcters que el valor assignat a <a href="/en-US/docs/Web/HTML/Attributes/minlength"><code>minlength</code></a>, o més que el valor assignat a <code><a href="/en-US/docs/Web/HTML/Attributes/maxlength">maxlength</a></code>.</p> + +<p>Els navegadors sovint no permeten que l'usuari escrigui un valor més llarg del que s'espera en els camps de text. Una experiència d’usuari encara més bona que utilitzar només <code>maxlength</code> és proporcionar també comentaris de recompte de caràcters d’una manera accessible, i deixar editar el contingut fins que sigui d’una mida més reduïda. Un exemple d'això és el límit de caràcters de Twitter. Per a això pots utilitzar JavaScript, incloses les <a href="https://github.com/mimo84/bootstrap-maxlength">solucions que fan servir <code>maxlength</code></a>.</p> + +<h3 id="Restringir_els_valors_de_les_entrades">Restringir els valors de les entrades</h3> + +<p>Per als camps d’entrada de números (és a dir, <code><a href="/en-US/docs/Web/HTML/Element/input/number"><input type="number"></a></code>), es poden utilitzar els atributs <code><a href="/en-US/docs/Web/HTML/Attributes/min">min</a></code> i <code><a href="/en-US/docs/Web/HTML/Attributes/max">max</a></code>, que proporcionen un rang de valors vàlids. Un camp que conté un valor que cau fora d'aquest interval no és vàlid.</p> + +<p>Observem-ne un altre exemple. Crea una còpia nova del fitxer <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a>.</p> + +<p>A continuació suprimeix el contingut de l'element <code><body></code> i substitueix-lo pel següent:</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="choose">Would you prefer a banana or a cherry?</label> + <input type="text" id="choose" name="i_like" required minlength="6" maxlength="6"> + </div> + <div> + <label for="number">How many would you like?</label> + <input type="number" id="number" name="amount" value="1" min="1" max="10"> + </div> + <div> + <button>Submit</button> + </div> +</form></pre> + +<ul> + <li>Observa que aquí hem donat al camp de <code>text</code> una longitud mínima (<code>minlength</code>) i una longitud màxima (<code>maxlength</code>) de sis, la mateixa longitud que tenen <em>banana</em> i <em>cherry</em>.</li> + <li>També hem donat al camp <code>number</code> un valor <code>min</code> d’1 i un valor <code>max</code> de 10. Els números introduïts fora d'aquest interval es presenten com no vàlids; els usuaris no poden utilitzar les fletxes d’increment/decrement per a desplaçar el valor fora d’aquest interval. Si l’usuari introdueix manualment un número que està fora d’aquest interval, les dades no són vàlides. El número no és obligatori, de manera que eliminar el valor encara dona un valor vàlid.</li> +</ul> + +<div class="hidden"> +<pre class="brush: css notranslate">input:invalid { + border: 2px dashed red; +} + +input:valid { + border: 2px solid black; +} + +div { + margin-bottom: 10px; +}</pre> +</div> + +<p>Aquí tens l’execució en viu de l’exemple:</p> + +<p>{{EmbedLiveSample("Restringir_els_valors_de_les_entrades", "100%", 100)}}</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Pots trobar aquest exemple en viu a GitHub en el fitxer <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-length.html">fruit-length.html</a> (o també consultar-ne el <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-length.html">codi d’origen</a>.)</p> +</div> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: <code><input type="number"></code> (i altres tipus, com ara <code>range</code> i <code>date</code>) també poden tenir un atribut <a href="/en-US/docs/Web/HTML/Attributes/step"><code>step</code></a>, que especifica quin increment augmenta o disminueix el valor quan s'utilitzen els controls d'entrada (com ara els botons numèrics d’increment i decrement). En l'exemple anterior no hem inclòs un atribut <code>step</code>, de manera que el valor per defecte és <code>1</code>. Això vol dir que els números de coma flotant (com ara el 3,2) també es mostren com a no vàlids.</p> +</div> + +<h3 id="Exemple_complet">Exemple complet</h3> + +<p>A continuació hi ha un exemple complet que mostra l'ús de les funcions de validació integrades en HTML. En primer lloc, una mica d'HTML:</p> + +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>fieldset</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>legend</span><span class="punctuation token">></span></span>Do you have a driver's license?<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>abbr</span> <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>This field is mandatory<span class="punctuation token">"</span></span> <span class="attr-name token">aria-label</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>required<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>*<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>abbr</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>legend</span><span class="punctuation token">></span></span> + <span class="comment token"><!-- While only one radio button in a same-named group can be selected at a time, + and therefore only one radio button in a same-named group having the "required" + attribute suffices in making a selection a requirement --></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">required</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>driver<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>r1<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>yes<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>r1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Yes<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">required</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>driver<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>r2<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>no<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>r2<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>No<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>fieldset</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>n1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>How old are you?<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> + <span class="comment token"><!-- The pattern attribute can act as a fallback for browsers which + don't implement the number input type but support the pattern attribute. + Please note that browsers that support the pattern attribute will make it + fail silently when used with a number field. + Its usage here acts only as a fallback --></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>number<span class="punctuation token">"</span></span> <span class="attr-name token">min</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>12<span class="punctuation token">"</span></span> <span class="attr-name token">max</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> <span class="attr-name token">step</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>n1<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>age<span class="punctuation token">"</span></span> + <span class="attr-name token">pattern</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>\d+<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>What's your favorite fruit?<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>abbr</span> <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>This field is mandatory<span class="punctuation token">"</span></span> <span class="attr-name token">aria-label</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>required<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>*<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>abbr</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t1<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>fruit<span class="punctuation token">"</span></span> <span class="attr-name token">list</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>l1<span class="punctuation token">"</span></span> <span class="attr-name token">required</span> + <span class="attr-name token">pattern</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>datalist</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>l1<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Banana<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Cherry<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Apple<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Strawberry<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Lemon<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span><span class="punctuation token">></span></span>Orange<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>option</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>datalist</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t2<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>What's your e-mail address?<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>email<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t2<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>email<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t3<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Leave a short message<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>textarea</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t3<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>msg<span class="punctuation token">"</span></span> <span class="attr-name token">maxlength</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>140<span class="punctuation token">"</span></span> <span class="attr-name token">rows</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>5<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>textarea</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span><span class="punctuation token">></span></span>Submit<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span></code></pre> + +<p>I ara, una mica de CSS per a aplicar estil al codi HTML:</p> + +<pre class="brush: css notranslate">form { + font: 1em sans-serif; + max-width: 320px; +} + +p > label { + display: block; +} + +input[type="text"], +input[type="email"], +input[type="number"], +textarea, +fieldset { + width: 100%; + border: 1px solid #333; + box-sizing: border-box; +} + +input:invalid { + box-shadow: 0 0 5px 1px red; +} + +input:focus:invalid { + box-shadow: none; +}</pre> + +<p>Això dona la sortida següent:</p> + +<p>{{EmbedLiveSample("Exemple_complet", "100%", 420)}}</p> + +<p>Consulta una llista completa d’atributs que es poden utilitzar per a restringir els valors d’entrada i els tipus d’entrada que els admeten en els <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes">atributs relacionats amb la validació</a>.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Pots trobar aquest exemple en viu a GitHub, en el fitxer <a href="https://mdn.github.io/learning-area/html/forms/form-validation/full-example.html">full-example.html</a> (o consultar-ne també el <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/full-example.html">codi d’origen</a>).</p> +</div> + +<h2 id="Validació_de_formularis_amb_JavaScript"><strong>Validació de formularis amb JavaScript</strong></h2> + +<p>Has d’utilitzar JavaScript si vols controlar l’aspecte dels missatges d’error originals o fer-los compatibles amb els navegadors antics que no admeten la validació de formularis integrada en HTML. En aquesta secció veurem les diferents maneres de fer això.</p> + +<h3 id="L’API_de_validació_de_restriccions">L’API de validació de restriccions</h3> + +<p>La majoria dels navegadors admeten l'<a href="/en-US/docs/Web/API/Constraint_validation">API de validació de restriccions</a>, que consta d'un conjunt de mètodes i propietats disponibles en les interfícies DOM per als elements de formulari següents:</p> + +<ul> + <li><code><a href="/en-US/docs/Web/API/HTMLButtonElement">HTMLButtonElement</a></code> (representa un element <code><a href="/en-US/docs/Web/HTML/Element/button"><button></a></code>)</li> + <li><code><a href="/en-US/docs/Web/API/HTMLFieldSetElement">HTMLFieldSetElement</a></code> (representa un element <code><a href="/en-US/docs/Web/HTML/Element/fieldset"><fieldset></a></code>)</li> + <li><code><a href="/en-US/docs/Web/API/HTMLInputElement">HTMLInputElement</a></code> (representa un element <code><a href="/en-US/docs/Web/HTML/Element/input"><input></a></code>)</li> + <li><code><a href="/en-US/docs/Web/API/HTMLOutputElement">HTMLOutputElement</a></code> (representa un element <code><a href="/en-US/docs/Web/HTML/Element/output"><output></a></code>)</li> + <li><code><a href="/en-US/docs/Web/API/HTMLSelectElement">HTMLSelectElement</a></code> (representa un element <code><a href="/en-US/docs/Web/HTML/Element/select"><select></a></code>)</li> + <li><code><a href="/en-US/docs/Web/API/HTMLTextAreaElement">HTMLTextAreaElement</a></code> (representa un element <code><a href="/en-US/docs/Web/HTML/Element/textarea"><textarea></a></code>)</li> +</ul> + +<p id="Constraint_validation_API_properties">L’API de validació de restriccions posa a la disposició dels elements anteriors les propietats següents.</p> + +<ul> + <li><code>validationMessage</code>: Retorna un missatge localitzat que descriu les restriccions de validació que el control no satisfà (si n'hi ha). Si el control de formulari no és candidat a validació de restriccions (<code>willValidate</code> és <code>false</code>) o si el valor de l’element satisfà les restriccions (és vàlid), retorna una cadena buida.</li> + <li><code>validity</code>: Retorna un objecte <code>ValidityState</code> que conté diverses propietats que descriuen l'estat de validesa de l'element. Pots trobar tots els detalls de les propietats disponibles a la pàgina de referència {{domxref("ValidityState")}}; a continuació se n'enumeren uns quants dels més comuns: + <ul> + <li>{{domxref("ValidityState.patternMismatch", "patternMismatch")}}: Retorna <code>true</code> si el valor no coincideix amb el {{htmlattrxref("pattern", "input")}} especificat, i <code>false</code> si hi coincideix. Si és <code>true</code>, l'element coincideix amb la pseudoclasse {{cssxref(":invalid")}} de CSS.</li> + <li>{{domxref("ValidityState.rangeOverflow", "rangeOverflow")}}: Retorna <code>true</code> si el valor és superior al màxim especificat per l’atribut {{htmlattrxref("max", "input")}}, o <code>false</code> si és inferior o igual al màxim. Si és <code>true</code>, l'element coincideix amb les pseudoclasses {{cssxref(":invalid")}} i {{cssxref(":out-of-range")}} de CSS.</li> + <li>{{domxref("ValidityState.rangeUnderflow", "rangeUnderflow")}}: Retorna <code>true</code> si el valor és inferior al mínim especificat per l’atribut {{htmlattrxref("min", "input")}}, o <code>false</code> si és superior o igual al mínim. Si és <code>true</code>, l'element coincideix amb les pseudoclasses {{cssxref(":invalid")}} i {{cssxref(":out-of-range")}} de CSS.</li> + <li>{{domxref("ValidityState.typeMismatch", "typeMismatch")}}: Retorna <code>true</code> si el valor no està en la sintaxi requerida (quan {{htmlattrxref("type", "input")}} és un correu electrònic o una url), o <code>false</code> si la sintaxi és correcta. Si és <code>true</code>, l'element coincideix amb la pseudoclasse {{cssxref(":invalid")}} de CSS.</li> + <li><code>valid</code>: Retorna <code>true</code> si l'element compleix totes les limitacions de validació i es considera que és vàlid, o <code>false</code> si falla alguna restricció. Si és <code>true</code>, l'element coincideix amb la pseudoclasse {{cssxref(":valid")}} de CSS; o amb la pseudo-classe {{cssxref(":invalid")}} de CSS en cas contrari.</li> + <li><code>valueMissing</code>: Retorna <code>true</code> si l'element té un atribut {{htmlattrxref("required", "input")}} sense cap valor, o <code>false</code> en cas contrari. Si és <code>true</code>, l'element coincideix amb la pseudoclasse {{cssxref(":invalid")}} de CSS.</li> + </ul> + </li> + <li><code>willValidate</code>: Retorna <code>true</code> si l'element es valida en enviar-se el formulari; <code>false</code> en cas contrari.</li> +</ul> + +<p id="Constraint_validation_API_methods">L'API de validació de restriccions també ofereix als elements anteriors els mètodes següents:</p> + +<ul> + <li><code>checkValidity()</code>: Retorna <code>true</code> si el valor de l'element no té problemes de validesa; <code>false</code> en cas contrari. Si l'element no és vàlid, aquest mètode també activa un esdeveniment no vàlid (<a href="/en-US/docs/Web/API/HTMLInputElement/invalid_event"><code>invalid</code> event</a>) sobre l'element.</li> + <li><code>setCustomValidity(<em>message</em>)</code>: Afegeix un missatge d'error personalitzat a l'element; si configures un missatge d’error personalitzat, es considera que l’element no és vàlid i es mostra l’error especificat. Això et permet utilitzar el codi JavaScript per a establir un error de validació diferent dels que ofereixen les restriccions de validació estàndard en HTML5. El missatge es mostra a l'usuari en informar del problema.</li> +</ul> + +<h4 id="Missatges_d’error_personalitzats"><strong>Missatges d’error personalitzats</strong></h4> + +<p>Com has vist en els exemples de restricció de validació HTML5 anteriors, cada vegada que un usuari intenta enviar un formulari no vàlid, el navegador mostra un missatge d'error. La manera com es mostra aquest missatge depèn del navegador.</p> + +<p>Aquests missatges automatitzats tenen dos inconvenients:</p> + +<ul> + <li>No hi ha una manera estàndard de canviar-ne l’aparença amb CSS.</li> + <li>Depenen de la configuració regional del navegador, que significa que pots tenir una pàgina en un idioma, però que un missatge d'error es mostri en un altre idioma, com es pot veure a la captura de pantalla de Firefox següent.</li> +</ul> + +<p><img alt="Exemple d’un missatge d’error a Firefox en francès en una pàgina en anglès" src="/files/4329/error-firefox-win7.png" style="height: 97px; width: 228px;"></p> + +<p>La personalització d’aquests missatges d’error és un dels casos d’ús més comuns de l’<a href="/en-US/docs/Web/API/Constraint_validation" rel="external">API de validació de restriccions</a>. Vegem la manera de fer-ho amb un exemple senzill.</p> + +<p>Començarem amb alguns elements senzills d’HTML (no dubtis a posar-ho en un fitxer HTML en blanc; utilitza una còpia nova del fitxer <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a> com a base, si vols):</p> + +<pre class="brush: html notranslate"><form> + <label for="mail">I would like you to provide me with an e-mail address: </label> + <input type="email" id="mail" name="mail"> + <button>Submit</button> +</form></pre> + +<p>I afegeix a la pàgina el JavaScript següent:</p> + +<pre class="brush: js notranslate">const email = document.getElementById("mail"); + +email.addEventListener("input", function (event) { + if (email.validity.typeMismatch) { + email.setCustomValidity(«I am expecting an e-mail address!»); + } else { + email.setCustomValidity(""); + } +});</pre> + +<p>Aquí emmagatzemem una referència a l’entrada de correu electrònic, i a continuació afegim un detector d’esdeveniments que executa el codi de <code>content</code> cada vegada que es modifica el valor dins de l’entrada.</p> + +<p>Dins del codi de <code>content</code>, comprovem si la propietat <code>validity.typeMismatch</code> de l’entrada de correu electrònic retorna <code>true</code>, que significa que el valor que conté no coincideix amb el patró d’una adreça de correu electrònic ben formada. Si és així, cridem el mètode <a href="/en-US/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()"><code>setCustomValidity()</code></a> amb un missatge personalitzat. Això fa que l’entrada no sigui vàlida, de manera que quan intentes enviar el formulari, l’enviament falla i es mostra el missatge d’error personalitzat.</p> + +<p>Si la propietat <code>validity.typeMismatch</code> retorna <code>false</code>, cridem el mètode <code>setCustomValidity()</code> amb una cadena buida. Això fa que l’entrada sigui vàlida, i el formulari s’envia.</p> + +<p>Pots provar-ho a continuació:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/form-validation/custom-error-message.html", '100%', 80)}}</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Pots trobar aquest exemple en viu a GitHub en el fitxer <a href="https://mdn.github.io/learning-area/html/forms/form-validation/custom-error-message.html">custom-error-message.html</a> (consulta’n també el <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/custom-error-message.html">codi d’origen</a>).</p> +</div> + +<h4 id="Un_exemple_més_detallat"><strong>Un exemple més detallat</strong></h4> + +<p>Ara que hem vist un exemple molt senzill; observem com podem utilitzar aquesta API per a crear una validació personalitzada una mica més complexa.</p> + +<p>En primer lloc, el codi HTML. Un cop més, no dubtis a construir-lo amb nosaltres:</p> + +<pre class="brush: html notranslate"><form novalidate> + <p> + <label for="mail"> + <span>Please enter an email address:</span> + <input type="email" id="mail" name="mail" required minlength="8"> + <span class="error" aria-live="polite"></span> + </label> + </p> + <button>Submit</button> +</form></pre> + +<p>Aquest formulari senzill utilitza l’atribut <code><a href="/en-US/docs/Web/HTML/Attributes/novalidate">novalidate</a></code>, que desactiva la validació automàtica del navegador; això permet que el nostre codi prengui el control de la validació. Però això no desactiva la compatibilitat per a l’API de validació de restriccions ni l’aplicació de pseudoclasses CSS com {{cssxref(":valid")}}, etc. Això vol dir que, tot i que el navegador no comprova automàticament la validesa del formulari abans d’enviar les dades, encara pots fer-ho tu mateix i dissenyar el formulari en conseqüència.</p> + +<p>La nostra entrada per validar és <code><a href="/en-US/docs/Web/HTML/Element/input/email"><input type="email"></a></code>, que està marcada com a <code>required</code> i té una longitud mínima (<code>minlength</code>) de 8 caràcters. Comprovem-ho amb el nostre codi i mostrem un missatge d'error personalitzat per a cada element.</p> + +<p>El nostre objectiu és mostrar els missatges d'error dins d'un element <code><span></code>. L'atribut <a href="/en-US/docs/Accessibility/ARIA/ARIA_Live_Regions"><code>aria-live</code></a> està establert a <code><span></code> per a assegurar-nos que el missatge d'error personalitzat serà visible per a tothom, inclosos els usuaris que empren lectors de pantalla.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Un element clau aquí és el fet que establir l’atribut <code>novalidate</code> en el formulari impedeix el formulari de mostrar els quadres de diàleg de missatge d’error propis, i permet de mostrar els missatges d’error personalitzats en el DOM de la manera que escollim.</p> +</div> + +<p>Ara una mica de CSS bàsic per a millorar una mica l’aspecte del formulari i proporcionar informació visual quan les dades d’entrada no són vàlides:</p> + +<pre class="brush: css notranslate">body { + font: 1em sans-serif; + width: 200px; + padding: 0; + margin : 0 auto; +} + +p * { + display: block; +} + +input[type=email]{ + -webkit-appearance: none; + appearance: none; + + width: 100%; + border: 1px solid #333; + margin: 0; + + font-family: inherit; + font-size: 90%; + + box-sizing: border-box; +} + +/* Aquest és el nostre estil per als camps no vàlids */ +input:invalid{ + border-color: #900; + background-color: #FDD; +} + +input:focus:invalid { + outline: none; +} + +/* Aquest és l'estil per als nostres missatges d'error */ +.error { + width : 100%; + padding: 0; + + font-size: 80%; + color: white; + background-color: #900; + border-radius: 0 0 5px 5px; + + box-sizing: border-box; +} + +.error.active { + padding: 0.3em; +}</pre> + +<p>A continuació veurem el JavaScript que implementa la validació d'errors personalitzada.</p> + +<pre class="brush: js notranslate">// Hi ha moltes maneres de triar un node DOM; amb aquest obtenim el formulari en si i el control de formulari de tipus caixa d’entrada +// de correu electrònic, i també l’element span en què col·locarem el missatge d’error. +const form = document.getElementsByTagName('form')[0]; + +const email = document.getElementById('mail'); +const emailError = document.querySelector('#mail + span.error'); + +email.addEventListener('input', function (event) { + // Cada vegada que l’usuari escriu alguna cosa, comprovem si els + // camps del formulari són vàlids. + + if (email.validity.valid) { + // En cas que hi hagi un missatge d’error visible, si el camp + // és vàlid, n’eliminem el missatge d'error. + emailError.innerHTML = ''; // Restablim el contingut del missatge + emailError.className = 'error'; // Restablim l'estat visual del missatge + } else { + // Si encara hi ha un error, mostrem l'error correcte + ShowError(); + } +}); + +form.addEventListener('submit', function (event) { + // si el camp de correu electrònic és vàlid, enviem el formulari + + if(!email.validity.valid) { + // Si no és així, mostrem el missatge d'error corresponent + showError(); + // Aleshores, cancel·lem l’esdeveniment i evitem que s’enviï el formulari + event.preventDefault(); + } +}); + +function showError() { + if(email.validity.valueMissing) { + // Si el camp està buit + // mostra el missatge d'error següent. + emailError.textContent = 'You need to enter an e-mail address.'; + } else if(email.validity.typeMismatch) { + // Si el camp no conté una adreça de correu electrònic + // mostra el missatge d'error següent. + emailError.textContent = 'Entered value needs to be an e-mail address.'; + } else if(email.validity.tooShort) { + // Si les dades són massa curtes + // mostra el missatge d'error següent. + emailError.textContent = `el correu electrònic ha de tenir com a mínim $ {email.minLength} caràcters; n'heu introduït $ {email.value.length}. '; + } + + // Configura l’estil de manera adequada + emailError.className = 'error active'; +}</pre> + +<p>Els comentaris expliquen les coses força bé, però de manera breu:</p> + +<ul> + <li>Cada vegada que canviem el valor de l’entrada, comprovem si conté dades vàlides. Si n’hi ha, eliminem qualsevol missatge d'error que es mostri. Si les dades no són vàlides, executem <code>showError()</code> perquè es mostri l'error adequat.</li> + <li>Cada vegada que intentem enviar el formulari, tornem a comprovar si les dades són vàlides. En cas afirmatiu, enviem el formulari. Si no, executem <code>showError()</code> perquè es mostri l’error adequat i aturem l’enviament del formulari amb <code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code>.</li> + <li>La funció <code>showError()</code> utilitza diverses propietats de l'objecte <code>validity</code> de l'entrada de text per a determinar de quin error es tracta, i a continuació mostra el missatge d'error que hi correspon.</li> +</ul> + +<p>Aquest és el resultat en viu:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/form-validation/detailed-custom-validation.html", '100%', 150)}}</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Pots trobar aquest exemple en viu a GitHub en el fitxer <a href="https://mdn.github.io/learning-area/html/forms/form-validation/detailed-custom-validation.html">detailed-custom-validation.html</a> (consulta’n també el <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/detailed-custom-validation.html">codi d’origen</a>).</p> +</div> + +<p>L'API de validació de restriccions t’ofereix una eina poderosa per a gestionar la validació de formularis i et proporciona un gran control sobre la interfície d'usuari, més enllà del que hi pots fer només amb l’HTML i el CSS.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Per obtenir més informació, consulta la nostra <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">guia de validació de restriccions</a> i la referència de l'<a href="/en-US/docs/Web/API/Constraint_validation">API de validació de restriccions</a>.</p> +</div> + +<h3 id="Validació_dels_formularis_sense_una_API_integrada">Validació dels formularis sense una API integrada</h3> + +<p>En alguns casos, com ara la compatibilitat amb navegadors antics o els <a href="/en-US/docs/Learn/Forms/How_to_build_custom_form_controls">controls personalitzats</a>, no podràs o no voldràs utilitzar l'API de validació de restriccions. Aleshores pots utilitzar JavaScript per a validar el teu formulari, només que l'hauràs d’escriure.</p> + +<p>Per a validar un formulari, planteja’t unes quantes preguntes:</p> + +<dl> + <dt><strong>Quin tipus de validació he de fer?</strong></dt> + <dd>Has de determinar com validar les dades: operacions amb variables de cadena, conversió de tipus, expressions regulars, etc. Tot depèn de tu.</dd> + <dt><strong>Què he de fer si el formulari no es valida?</strong></dt> + <dd>Això és clarament una qüestió de la interfície d'usuari. Has de decidir com es comporta el formulari. El formulari ha d’enviar les dades igualment? Has de destacar els camps que tenen un error? Has de mostrar missatges d’error?</dd> + <dt><strong>Com puc ajudar l’usuari a corregir dades no vàlides?</strong></dt> + <dd>Per a reduir la frustració de l’usuari és molt important proporcionar la informació més útil possible i orientar-lo en la correcció de les entrades. Has d’oferir suggeriments anticipats perquè sàpiguen què se n’espera, i missatges d’error clars. Si vols aprofitar els requisits de la interfície d'usuari de validació de formularis, aquí tens alguns articles útils: + <ul> + <li>SmashingMagazine: <a href="http://uxdesign.smashingmagazine.com/2012/06/27/form-field-validation-errors-only-approach/" rel="external">Form-Field Validation: The Errors-Only Approach</a> [Validació dels camps d’un formulari: L’enfocament de només errors]</li> + <li>SmashingMagazine: <a href="http://www.smashingmagazine.com/2009/07/07/web-form-validation-best-practices-and-tutorials/" rel="external">Web Form Validation: Best Practices and Tutorials</a> [Validació de formularis web: Bones pràctiques i tutorials]</li> + <li>Six Revision: <a href="http://sixrevisions.com/user-interface/best-practices-for-hints-and-validation-in-web-forms/" rel="external">Best Practices for Hints and Validation in Web Forms</a> [Bones pràctiques per a suggeriments i validació de formularis web]</li> + <li>A List Apart: <a href="http://www.alistapart.com/articles/inline-validation-in-web-forms/" rel="external">Inline Validation in Web Forms</a>[Validació en línia de formularis web]</li> + </ul> + <strong> </strong></dd> +</dl> + +<h4 id="Un_exemple_que_no_utilitza_lAPI_de_validació_de_restriccions"><strong>Un exemple que no utilitza l'API de validació de restriccions</strong></h4> + +<p>A continuació es mostra una versió simplificada de l'exemple anterior que funciona amb navegadors antics.</p> + +<p>L’HTML és gairebé el mateix; només n’hem tret les funcions de validació HTML.</p> + +<pre class="brush: html notranslate"><form> + <p> + <label for="mail"> + <span>Please enter an email address::</span> + <input type="text" class="mail" id="mail" name="mail"> + <span class="error" aria-live="polite"></span> + </label> + </p> + <!-- Alguns navegadors antics han de tenir l’atribut «type» + definit explícitament com «submit» en l'element «button» + <button type="submit">Submit</button> +</form></pre> + +<p>De la mateixa manera, el CSS no ha de canviar gaire; acabem de convertir la pseudoclasse {{cssxref(":invalid")}} de CSS en una classe real i hem evitat utilitzar el selector d'atributs que no funciona en Internet Explorer 6.</p> + +<pre class="brush: css notranslate">body { + font: 1em sans-serif; + width: 200px; + padding: 0; + margin : 0 auto; +} + +form { + max-width: 200px; +} + +p * { + display: block; +} + +input.mail { + -webkit-appearance: none; + + width: 100%; + border: 1px solid #333; + margin: 0; + + font-family: inherit; + font-size: 90%; + + box-sizing: border-box; +} + +/* Aquest és el nostre estil per als camps no vàlids */ +input.invalid{ + border-color: #900; + background-color: #FDD; +} + +input:focus.invalid { + outline: none; +} + +/* Aquest és l'estil dels nostres missatges d'error */ +.error { + width : 100%; + padding: 0; + + font-size: 80%; + color: white; + background-color: #900; + border-radius: 0 0 5px 5px; + box-sizing: border-box; +} + +.error.active { + padding: 0.3em; +}</pre> + +<p>Els grans canvis es produeixen en el codi JavaScript, que ha de fer molta més feina feixuga.</p> + +<pre class="brush: js notranslate">// Hi ha menys maneres de seleccionar un node DOM amb navegadors antics +const form = document.getElementsByTagName('form')[0]; +const email = document.getElementById('mail'); + +// A continuació es mostra un truc per a arribar al node següent d’elements germans en el DOM. +// Això és perillós perquè pots crear fàcilment un bucle infinit. +// En els navegadors moderns és preferible utilitzar element.nextElementSibling +let error = email; +while ((error = error.nextSibling).nodeType != 1); + +// segons l'especificació HTML5 +const emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; + +// Molts navegadors antics no són compatibles amb el mètode addEventListener. +// Aquesta és una manera senzilla de tractar això; però no n’és l’única. +function addEvent(element, event, callback) { + let previousEventCallBack = element["on"+event]; + element["on"+event] = function (e) { + const output = callback(e); + + // Una crida que retorna «false» atura la cadena de devolució + // i interromp l'execució de l'esdeveniment de retorn de la crida + if (output === false) return false; + + if (typeof previousEventCallBack === 'function') { + output = previousEventCallBack(e); + if(output === false) return false; + } + } +}; + +// Ara podem reconstruir la nostra restricció de validació +// Com que no ens basem en cap pseudoclasse de CSS, hem +// d'establir explícitament la classe vàlida/invàlida en el nostre camp de correu electrònic +addEvent(window, "load", function () { + // Aquí comprovem si el camp està buit (recorda que no és un camp obligatori) + // Si no ho està, comprovem si el contingut és una adreça de correu electrònic ben formada. + const test = email.value.length === 0 || emailRegExp.test(email.value); + + email.className = test ? "valid" : "invalid"; +}); + +// Això defineix què passa quan l'usuari escriu en el camp +addEvent(email, "input", function () { + const test = email.value.length === 0 || emailRegExp.test(email.value); + if (test) { + email.className = "valid"; + error.innerHTML = ""; + error.className = "error"; + } else { + email.className = "invalid"; + } +}); + +// Això defineix què passa quan l’usuari intenta enviar les dades +addEvent(form, "submit", function () { + const test = email.value.length === 0 || emailRegExp.test(email.value); + + if (!test) { + email.className = "invalid"; + error.innerHTML = "I expect an e-mail, darling!"; + error.className = "error active"; + + // Alguns navegadors antics no admeten el mètode event.preventDefault () + return false; + } else { + email.className = "valid"; + error.innerHTML = ""; + error.className = "error"; + } +});</pre> + +<p>El resultat és el següent:</p> + +<p>{{EmbedLiveSample("Un_exemple_que_no_utilitza_lAPI_de_validació_de_restriccions", "100%", 130)}}</p> + +<p>Com pots veure, no és tan difícil construir un sistema de validació pel teu compte. La part difícil és que sigui prou genèric perquè es pugui utilitzar tant en múltiples plataformes com en qualsevol formulari que puguis crear. Disposes de moltes biblioteques de fitxers que et permeten executar una validació de formulari, com ara <a href="http://rickharrison.github.com/validate.js/" rel="external">Validate.js</a>.</p> + +<h2 id="Resum">Resum</h2> + +<p>De vegades, la validació de formulari del costat del client necessita JavaScript si vols personalitzar els missatges d’estil i d’error, però <em>sempre</em> requereix que pensis detingudament en l’usuari. Recorda d’ajudar sempre els usuaris a corregir les dades que et proporcionen. Per a això, assegura’t de:</p> + +<ul> + <li>Mostrar missatges d’error explícits.</li> + <li>Ser permissiu amb els formats d’entrada.</li> + <li>Assenyalar exactament on es produeix l’error, sobretot en els formularis grans.</li> +</ul> + +<p>Un cop comprovat que el formulari s'ha emplenat correctament, pots procedir a enviar-lo. A continuació exposarem l’<a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">enviament de les dades d’un formulari</a>.</p> + +<p>{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}</p> + +<h2 id="En_aquest_mòdul"><strong>En aquest mòdul</strong></h2> + +<ul> + <li><a href="/en-US/docs/Learn/Forms/Your_first_form">Els teu primer formulari</a></li> + <li><a href="/en-US/docs/Learn/Forms/How_to_structure_a_web_form">Com estructurar un formulari web</a></li> + <li><a href="/en-US/docs/Learn/Forms/Basic_native_form_controls">Els controls de formulari bàsics originaris</a></li> + <li><a href="/en-US/docs/Learn/Forms/HTML5_input_types">Els tipus d'entrada de l’HTML5</a></li> + <li><a href="/en-US/docs/Learn/Forms/Other_form_controls">Altres controls de formulari</a></li> + <li><a href="/en-US/docs/Learn/Forms/Styling_web_forms">Aplicar estil a formularis web</a></li> + <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Aplicació avançada d’estil a formularis</a></li> + <li><a href="/en-US/docs/Learn/Forms/UI_pseudo-classes">Pseudoclasses d’interfície d’usuari (UI)</a></li> + <li><a href="/en-US/docs/Learn/Forms/Form_validation">Validació del formulari de la banda del client</a></li> + <li><a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">Enviar les dades d’un formulari</a></li> +</ul> + +<h3 id="Temes_avançats">Temes avançats</h3> + +<ul> + <li><a href="/en-US/docs/Learn/Forms/How_to_build_custom_form_controls">Com crear controls de formulari adaptats a client</a></li> + <li><a href="/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript">Enviar formularis amb JavaScript</a></li> + <li><a href="/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_widgets">Taula de compatibilitat de controls de formulari de codi propietari</a></li> +</ul> diff --git a/files/ca/learn/html/index.html b/files/ca/learn/html/index.html new file mode 100644 index 0000000000..b490d7ec06 --- /dev/null +++ b/files/ca/learn/html/index.html @@ -0,0 +1,57 @@ +--- +title: HTML +slug: Learn/HTML +tags: + - Beginner + - Guide + - HTML + - Intro + - Learn + - Topic +translation_of: Learn/HTML +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Per construir llocs web, heu de saber sobre {{Glossary('HTML')}} - la tecnologia fonamental utilitzada per definir l'estructura d'una pàgina web. HTML s'utilitza per especificar si el contingut de la web ha de ser reconegut com un paràgraf, llista, títol, enllaç, imatge, reproductor multimèdia, un formulari o un de molts altres elements disponibles o fins i tot un nou element que es defineixi.</p> + +<h2 id="Itinerari_d'aprenentatge"><span class="short_text" id="result_box" lang="ca"><span>Itinerari</span> <span>d'aprenentatge</span></span></h2> + +<p>L'ideal seria que comencéssiu el vostre viatge d'aprenentatge per l'aprenentatge d'HTML ( <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction">Introduction to HTML</a>). Comenceu llegint la Introducció a HTML. A continuació, podeu passar a aprendre sobre temes més avançats, com ara:</p> + +<ul> + <li><a href="/en-US/docs/Web/API">HTML5 APIs</a></li> + <li><a href="/en-US/docs/Learn/CSS">CSS</a>, i la forma de donar estil a HTML (per exemple, alterar la mida del text i fonts utilitzats, afegir vores i ombres, el disseny de la vostre pàgina amb diverses columnes, afegir animacions i altres efectes visuals.)</li> + <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, i com utilitzar-lo per afegir funcionalitat dinàmica a les pàgines web (per exemple, trobar la seva ubicació i traçar en un mapa, fer aparèixer/desapareixer els elements d'UI quan s'activa un botó, guardar les dades dels usuaris a nivell local en els seus equips, i molt més .)</li> +</ul> + +<p>Abans d'iniciar aquest tema, heu d'estar almenys familiaritzats basicamente amb l'ús d'ordinadors, i l'ús de la web de forma passiva (és a dir, amb només mirant, consumint el contingut). Heu de tenir un entorn base de treball establert, com es detalla en <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Instal·lació de programari bàsic (Installing basic software)</a>, i entendre com crear i administrar arxius, com es detalla en <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Tractament d'arxius (Dealing with files)</a> - tots dos són parts del nostre mòdul d'<a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Introducció a la web (Getting started with the web)</a> del principiant.</p> + +<p>Es recomana que es treballi a través de <a href="/en-US/docs/Learn/Getting_started_with_the_web">Introducció a la Web (G</a><a href="/en-US/docs/Learn/Getting_started_with_the_web">etting started with the web) </a>abans de tractar aquest tema, però, no és absolutament necessari; molt del que es tracta en l'article de conceptes <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">Bàsics d'HTML (HTML basics</a>) també està cobert en la nostra <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introducció al mòdul d'HTML (Introduction to HTML)</a> encara que en molt més detall..</p> + +<h2 id="Mòduls">Mòduls</h2> + +<p>Aquest tema conté els següents mòduls, en un ordre suggerit per treballar a través d'ells. Definitivament, heu de començar pel primer.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introducció a HTML</a></dt> + <dd>Aquest mòdul prepara l'escenari, per aconseguir utilitzar conceptes importants i sintaxis, buscant aplicar HTML a un text, com crear hipervincles, i com utilitzar HTML per estructurar una pàgina web.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia i incrustació</a></dt> + <dd>Aquest mòdul explora com utilitzar HTML per incloure multimèdia en les seves pàgines web, incloent-hi les diferents formes en què les imatges poden ser incloses, i com integrar vídeo, àudio i fins i tot altres pàgines web senceres.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Forms_and_buttons">Formularis i botons</a></dt> + <dd>Els formularis i els botons són una part molt important de la web - aquests permeten als visitants del lloc entrar dades i enviar-les (per exemple formularis de registre, d'inici de sessió i de comentaris), i per implementar controls per controlar funcionalitats complexes (per exemple, enviar un formulari al servidor, o pausar la reproducció d'un vídeo.) Aquest mòdul us ajudarà a començar.</dd> + <dt>Taules (TBD)</dt> + <dd>Representar dades tabulars en una pàgina web d'una manera comprensible, {{glossary("Accessibility", "accessible")}} pot ser un desafiament. Aquest mòdul cobreix el marcat bàsic de la taula , juntament amb característiques més complexes, com la implementació dels títols i resums.</dd> +</dl> + +<h2 id="Solució_de_problemes_comuns_d'HTML"><span class="short_text" id="result_box" lang="ca"><span>Solució de</span> <span>problemes</span> <span>comuns</span> <span>d'HTML</span></span></h2> + +<p>Utilitza HTML per resoldre problemes comuns<a href="/en-US/docs/Learn/HTML/Howto"> (Use HTML to solve common problems)</a> proporciona enllaços a seccions de contingut que expliquen com utilitzar HTML per resoldre problemes molt comuns en crear una pàgina web: es tracta de títols, afegir imatges o vídeos, emfatitzar continguts, creació d'un formulari bàsic, etc.</p> + +<h2 id="Veure">Veure</h2> + +<div class="document-head" id="wiki-document-head"> +<dl> + <dt><a href="/en-US/docs/Web/HTML">HTML (HyperText Markup Language)</a> en MDN.</dt> + <dd>El punt d'entrada principal per a la documentació HTML en MDN, incloent referències detallades dels elements i atributs - Si voleu saber quins atributs té un element o quins valors té un atribut, per exemple, aquest és un gran lloc per començar.</dd> +</dl> +</div> diff --git a/files/ca/learn/html/introducció_al_html/crear_hipervincles/index.html b/files/ca/learn/html/introducció_al_html/crear_hipervincles/index.html new file mode 100644 index 0000000000..c2bc2d0b0c --- /dev/null +++ b/files/ca/learn/html/introducció_al_html/crear_hipervincles/index.html @@ -0,0 +1,320 @@ +--- +title: Crear hipervincles +slug: Learn/HTML/Introducció_al_HTML/Crear_hipervincles +tags: + - Beginner + - CodingScripting + - Guide + - HTML + - Learn + - Links + - Title + - absolute + - hyperlinks + - relative + - urls +translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">Els hipervincles són realment importants; són els que fan de la xarxa web una xarxa. En aquest article es mostra la sintaxi necessària per a fer un enllaç, i es tracten les bones pràctiques en els enllaços.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisits:</th> + <td>Familiaritzar-se amb els conceptes bàsics de l’HTML, que es tracten en <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Getting_started">Iniciació a l’HTML</a>. Format del text en HTML, que es tracta en <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Fonaments_de_text_HTML">Fonaments del text HTML</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Aprendre com implementar un hipervincle amb eficàcia, i enllaçar diversos fitxers.</td> + </tr> + </tbody> +</table> + +<h2 id="Què_és_un_hipervincle"><span id="result_box" lang="ca"><span>Què</span> <span>és</span> <span>un hipervincle</span><span>?</span></span></h2> + +<p>Els hipervincles són una de les innovacions més interessants que la web té per oferir. Bé, ha estat una característica de la web des del principi, i són els que fan de la xarxa web una <em>xarxa</em>; ens permeten vincular els nostres documents a un altre document (o un altre recurs) qualsevol, també ens permeten vincular parts específiques dels documents entre elles, i permeten que les aplicacions estiguin disponibles en una adreça web (això contrasta amb les aplicacions natives, que requerien instal·lació i altres obligacions d’aquesta mena). Gairebé qualsevol contingut del web es pot convertir en un enllaç, de manera que en fer-hi clic (o activar-ho d’alguna altra manera) el navegador anirà cap a una altra adreça web ({{glossary("URL")}}).</p> + +<div class="note"> +<p><strong>Nota</strong>: Una URL pot apuntar a fitxers HTML, fitxers de text, imatges, documents de text, vídeo i fitxers d’àudio, i qualsevol cosa que pugui existir en la web. Si el navegador no sap com mostrar o gestionar el fitxer, se’t demana si vols obrir el fitxer (en aquest cas el deure d’obrir o manipular el fitxer passa per una aplicació nativa adequada en el dispositiu) o descarregar el fitxer (i en aquest cas pots fer-te’n càrrec més endavant).</p> +</div> + +<p>La pàgina web de la BBC, per exemple, conté un gran nombre d’enllaços que apunten no només a múltiples històries de notícies, sinó també a diferents àmbits del lloc web (funcions de navegació), pàgines d’accés/registre (eines d’usuari), i molt més.</p> + +<p><img alt="Portal de bbc.co.uk, que mostra moltes notícies i també elements de navegació i funcions de menú " src="https://mdn.mozillademos.org/files/12405/bbc-homepage.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="Anatomia_d’un_enllaç"><span id="result_box" lang="ca"><span>Anatomia</span> <span>d’un</span> <span>enllaç</span></span></h2> + +<p>Un enllaç bàsic es crea delimitant el text (o d’altres continguts, consulta {{anch("Enllaços de nivell de bloc")}}) que vols convertir en un enllaç dintre d’un element {{htmlelement("a")}}, i hi assigna un atribut {{htmlattrxref ("href", "a")}} (també conegut com a <strong>destinació</strong> o <em><strong>target</strong></em>) que conté l’adreça web on vols que apunti l’enllaç.</p> + +<pre class="brush: html notranslate"><p>I’m creating a link to +<a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>. +</p></pre> + +<p>Això ens dóna el següent resultat:</p> + +<p>I’m creating a link to <a class="ignore-external" href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.</p> + +<h3 id="Afegir_informació_de_suport_amb_<title>">Afegir informació de suport amb <title></h3> + +<p>Un altre atribut que és possible que vulguis afegir als teus enllaços és <code>title</code>; aquest atribut està destinat a contenir informació complementària útil sobre l’enllaç, com ara quin tipus d’informació conté la pàgina, o coses que cal tenir en compte. Per exemple:</p> + +<pre class="brush: html notranslate"><p>I’m creating a link to +<a href="https://www.mozilla.org/en-US/" + title="The best place to find more information about Mozilla’s + mission and how to contribute">the Mozilla homepage</a>. +</p></pre> + +<p>Això ens dona el resultat següent (el títol apareix com un indicador de funció (<em>tooltip</em>) quan passem el cursor per sobre l’enllaç):</p> + +<p>I’m creating a link to <a class="ignore-external" href="https://www.mozilla.org/en-US/" title="The best place to find more information about Mozilla’s mission and how to contribute">the Mozilla homepage</a>.</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> El títol d'un enllaç només es mostra quan el punter del ratolí planeja per sobre, i això significa que les persones que fan servir el teclat per navegar, o pantalles tàctils, tindran dificultats per a accedir a aquesta informació. Si la informació d'un títol és realment important per la usabilitat d'una pàgina, s'hauria de presentar d'una forma accessible per a tothom, per exemple incloent-la com a text normal.</p> +</div> + +<h3 id="Aprenentatge_actiu_Crear_un_exemple_d’enllaç_propi">Aprenentatge actiu: Crear un exemple d’enllaç propi</h3> + +<p>És l’hora de l’aprenentatge actiu: volem que creïs un document HTML al teu editor de codi (faràs bé d’aconseguir la nostra <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">plantilla inicial</a>).</p> + +<ul> + <li>Dintre del cos de l’HTML, afegeix un o més paràgrafs o altres tipus de contingut que ja coneguis.</li> + <li>Converteix alguns dels continguts en enllaços.</li> + <li>Inclou l’atribut <code>title</code>.</li> +</ul> + +<h3 id="Enllaços_de_nivell_de_bloc">Enllaços de nivell de bloc</h3> + +<p>Com ja s’ha esmentat, pots convertir gairebé qualsevol contingut en un enllaç, fins i tot <a href="https://wiki.developer.mozilla.org/ca/docs/Learn/HTML/Introducci%C3%B3_al_HTML/Getting_started#Elements_de_bloc_i_elements_de_l%C3%ADnia">elements de nivell de bloc</a>. Si vols convertir una imatge en un enllaç, només cal que posis la imatge entre les etiquetes <code><a></a></code>.</p> + +<pre class="brush: html notranslate"><a href="https://www.mozilla.org/en-US/"> + <img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage"> +</a></pre> + +<div class="note"> +<p><strong>Nota</strong>: En un proper article t’assabentaràs de molts més aspectes sobre l’ús d’imatges al web.</p> +</div> + +<h2 id="Una_introducció_ràpida_a_les_adreces_URL_i_les_rutes">Una introducció ràpida a les adreces URL i les rutes</h2> + +<p>Per entendre bé les destinacions dels enllaços, cal comprendre les adreces URL i les rutes dels fitxers. En aquesta secció es proporciona la informació que necessites per a aconseguir això.</p> + +<p>Un URL, o Uniform Resource Locator (localitzador de recursos uniforme), és simplement una cadena de text que defineix on es pot localitzar alguna cosa a la web. Per exemple, la pàgina d’inici de Mozilla en versió anglesa es troba a <code>https://www.mozilla.org/en-US/</code>.</p> + +<p>Els URL utilitzen rutes per a trobar fitxers. Les rutes especifiquen en quina part del sistema de fitxers es troba el fitxer en el qual estàs interessat. Vegem un exemple senzill d’una estructura de directoris (observa el directori de <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks">creating-hyperlinks</a>).</p> + +<p><img alt="Una estructura de directoris senzilla. El directori pare s’anomena creating-hyperlinks i conté dos fitxers anomenats index.html i contacts.html i dos directoris anomenats projects i pdfs, que contenen un fitxer index.html i un fitxer project-brief.pdf, respectivament." src="https://mdn.mozillademos.org/files/12409/simple-directory.png" style="display: block; margin: 0 auto;"></p> + +<p>L’<strong>arrel</strong> d’aquesta estructura de directoris s’anomena <code>creating-hyperlinks</code>. Quan treballes amb un lloc web en local, hi ha un directori que conté dins tot el lloc web. A l’arrel hi ha un fitxer <code>index.html</code> i un fitxer <code>contacts.html</code>. En un lloc web real, <code>index.html</code> seria la nostra pàgina d’inici o pàgina de destinació.</p> + +<p>També hi ha dos directoris dins del nostre directori arrel: <code>pdfs</code> i <code>projects</code>. Cadascun té a dins un sol fitxer: un fitxer PDF (<code>projecte-brief.pdf</code>) i un fitxer <code>index.html</code>, respectivament. Observa que hi pot haver sense problemes dos fitxers index.html en un projecte, sempre que es trobin en ubicacions diferents del sistema de fitxers. Molts llocs web ho fan. El segon <code>index.html</code> seria potser la pàgina de destinació principal per a obtenir informació relacionada amb el projecte.</p> + +<ul> + <li> + <p><strong>Mateix directori</strong>: Si dins d’<code>index.html</code> (el nivell superior <code>index.html</code>) vols incloure un hipervincle que apunti a <code>contacts.html</code>, només has d’especificar el nom del fitxer per a establir l’enllaç, perquè és en el mateix directori que el fitxer d’origen. Aleshores, l’URL que utilitzaries seria <code>contacts.html</code>:</p> + + <pre class="brush: html notranslate"><p>Want to contact a specific staff member? +Find details on our <a href="contacts.html">contacts page</a>.</p></pre> + </li> + <li> + <p><strong>Baixar a subdirectoris</strong>: Si vols incloure un hipervincle dins d’<code>index.html</code> (el nivell superior <code>index.html</code>) que apunti a <code>projects/index.html</code>, hauries de desplaçar-te cap avall en el directori <code>projects</code> abans d’indicar el nom del fitxer que vols enllaçar. Això es fa especificant el nom del directori, a continuació, una barra inclinada, i a continuació, el nom del fitxer. De manera que utilitzaries l’URL <code>projects/index.html</code>:</p> + + <pre class="brush: html notranslate"><p>Visit my <a href="projects/index.html">project homepage</a>.</p></pre> + </li> + <li> + <p><strong>Pujar cap als directoris pare</strong>: Si vols incloure un hipervincle dins de <code>projects/index.html</code> que apunti a <code>pdfs/project-brief.pdf</code>, hauries de pujar un nivell en el directori, i després anar avall cap al directori <code>pdf</code>. «Pujar un directori» s’indica amb l’ús de dos punts, <code>..</code>. Per tant, l’URL que utilitzaries seria <code>../pdfs/project-brief.pdf</code>:</p> + + <pre class="brush: html notranslate"><p>A link to my <a href="../pdfs/project-brief.pdf">project brief</a>.</p></pre> + </li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: Si cal, pots combinar diverses instàncies d’aquestes característiques en adreces URL complexes; per exemple, <code>../../../complex/path/to/my/file.html</code>.</p> +</div> + +<h3 id="Fragments_de_document">Fragments de document</h3> + +<p>És possible enllaçar una part específica d’un document HTML (conegut com un <strong>fragment de document</strong>), i no només a l'inici del document. Per a això, primer cal assignar un atribut {{htmlattrxref ("id")}} a l’element en què vols establir l’enllaç. Normalment té sentit enllaçar en una línia de títol específica, de manera que es veuria alguna cosa com la següent:</p> + +<pre class="brush: html notranslate"><h2 id="Mailing_address">Mailing address</h2></pre> + +<p>A continuació, per a enllaçar aquest <code>id</code> específic, cal incloure'l al final de l'URL, precedit per un símbol de número o coixinet (#). Per exemple:</p> + +<pre class="brush: html notranslate"><p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p></pre> + +<p>Fins i tot pots utilitzar la referència mateixa del fragment del document per a fer un enllaç cap a <em>una altra part del mateix document</em>:</p> + +<pre class="brush: html notranslate"><p>The <a href="#Mailing_address">company mailing address</a> can be found at the bottom of this page.</p></pre> + +<h3 id="URL_absoluts_i_relatius">URL absoluts i relatius</h3> + +<p>Dos termes que et trobaràs a la web són l’<strong>URL absolut</strong> i l’<strong>URL relatiu:</strong></p> + +<p><strong>URL absolut</strong>: Apunta cap a una ubicació definida per la seva ubicació absoluta al web, que inclou el {{glossary("protocol")}} i el {{glossary("nom de domini")}}. Així, per exemple, si una pàgina <code>index.html</code> es carrega en un directori anomenat <code>projects</code> que hi ha dins de l’arrel d’un servidor web, i el domini del lloc web és <code>http://www.example.com</code>, la pàgina estaria disponible en <code>http://www.example.com/projects/index.html</code> (o fins i tot només <code>http://www.example.com/projects/</code>, perquè la majoria dels servidors web cerquen una pàgina de destinació com <code>index.html</code> per carregar-la si no s’especifica a l'URL).</p> + +<p>Un URL absolut sempre apuntarà a la mateixa ubicació, no importa des d’on s’utilitzi.</p> + +<p><strong>URL relatiu</strong>: Apunta a una ubicació que és relativa al fitxer que s’enllaça, una mica com el que hem vist en la secció anterior. Per exemple, si volem tenir un enllaç des del nostre fitxer d’exemple en <code>http://www.example.com/projects/index.html</code> a un fitxer PDF del mateix directori, l’URL només seria el nom del fitxer; per exemple: <code>project-brief.pdf</code>; no cal informació addicional. Si el PDF estigués disponible en un subdirectori dins de <code>projects</code> anomenat <code>pdfs</code>, l’enllaç relatiu seria <code>pdfs/project-brief.pdf</code> (l’URL absolut equivalent seria <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>).</p> + +<p>Un URL relatiu assenyala diferents llocs segons on estigui el fitxer que s’utilitza; per exemple, si movem el nostre fitxer <code>index.html</code> del directori <code>projects</code> a l’arrel del lloc web (el nivell superior, no en altres directoris), l’URL relativa <code>pdfs/project-brief.pdf</code> ara apunta a <code>http://www.example.com/pdfs/project-brief.pdf</code>, no a <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.</p> + +<p>Naturalment, la ubicació de l'arxiu <code>project-brief.pdf</code> i el directori <code>pdfs</code> no canviaran de sobte perquè moguis l'arxiu <code>index.html</code>; això faria que el teu enllaç apunti al lloc equivocat, així que no funcionaria si s'hi fes clic. Cal anar amb compte.</p> + +<h2 id="Les_bones_pràctiques_en_els_enllaços">Les bones pràctiques en els enllaços</h2> + +<p>Hi ha algunes bones pràctiques que és bo de seguir quan es posen enllaços. Vegem quines són.</p> + +<ul> +</ul> + +<h3 id="Fes_servir_un_redactat_clar">Fes servir un redactat clar</h3> + +<p>És molt fàcil afegir enllaços. Però amb això, no n’hi ha prou. Hem de fer que els nostres enllaços siguin accessibles a tots els lectors, independentment de quin sigui el seu context i quines eines prefereixen. Per exemple:</p> + +<ul> + <li>Als usuaris de lectors de pantalla els agrada saltar d’enllaç en enllaç per la pàgina, i llegir els enllaços fora del context.</li> + <li>Els motors de cerca utilitzen el text de l’enllaç per a indexar els fitxers de destinació, de manera que és una bona idea incloure paraules clau en el text de l’enllaç per a descriure de manera efectiva què s’enllaça.</li> + <li>Els usuaris que fan una lectura visual de la pàgina, fan un cop d’ull a la pàgina en lloc de llegir-la paraula per paraula, i els ulls se senten atrets per les característiques que es destaquen en la pàgina, com ara els enllaços. Trobaran útil que el text dels enllaços sigui descriptiu.</li> +</ul> + +<p>Vegem-ne un exemple concret:</p> + +<p><span class="short_text" id="result_box" lang="ca">Text d’enllaç <strong>ben</strong> redactat</span>: <a href="https://firefox.com">Download Firefox</a></p> + +<pre class="brush: html notranslate"><p><a href="https://firefox.com/"> + Download Firefox +</a></p></pre> + +<p><span class="short_text" id="result_box" lang="ca"><strong>Text d’enllaç mal</strong> redactat</span>: <a href="https://firefox.com/">Click here</a> to download Firefox</p> + +<pre class="brush: html notranslate"><p><a href="https://firefox.com/"> + Click here +</a> +to download Firefox</p> +</pre> + +<p>Altres consells:</p> + +<ul> + <li>No repeteixis l’URL com a part del text de l’enllaç; els URL es veuen lletjos i el so que generen encara és més lleig quan un lector de pantalla els llegeix lletra per lletra.</li> + <li>No diguis «enllaç» o «enllaços a» en el text de l’enllaç; és només soroll. Els lectors de pantalla avisen que hi ha un enllaç. Els usuaris que fan una lectura visual de la pàgina també saben que hi ha un enllaç perquè els enllaços en general es decoren amb un color diferent i es mostren subratllats (aquesta convenció general no s’ha de trencar, perquè els usuaris hi estan acostumats).</li> + <li>Mantingues l’etiqueta de l’enllaç tan curta com sigui possible, sobretot en enllaços llargs que molesten els usuaris de lectors de pantalla, que han d’escoltar la lectura de tot el text.</li> + <li>Minimitza les instàncies en què múltiples còpies del mateix text enllacen a llocs diferents. Això pot causar problemes pels usuaris de lectors de pantalla, si hi ha una llista d'enllaços sense context etiquetats tots "fes clic aquí", "fes clic aquí", "fes clic aquí".</li> +</ul> + +<h3 id="Utilitza_enllaços_relatius_sempre_que_puguis">Utilitza enllaços relatius sempre que puguis</h3> + +<p>A partir de la descripció anterior, es podria pensar que és una bona idea utilitzar enllaços absoluts en tot moment; al cap i a la fi, no es trenquen com els enllaços relatius quan una pàgina es mou. Tanmateix, és bo emprar enllaços relatius sempre que puguis quan enllaces a altres llocs dins del <em>mateix lloc web</em> (i fes servir enllaços absoluts quan enllacis a un <em>altre lloc web</em>):</p> + +<ul> + <li>Per començar, resulta molt més fàcil d’analitzar el codi si les URL són relatives perquè en general són molt més curtes que les URL absolutes, i la lectura del codi resulta força més lleugera.</li> + <li>En segon lloc, és més eficient utilitzar URL relatives sempre que sigui possible. Quan utilitzes una URL absoluta, el navegador comença per cercar la ubicació real del servidor en el sistema de noms de domini ({{glossary( "DNS")}}), aleshores va a aquest servidor i cerca el fitxer que s’ha demanat. En canvi, amb una adreça URL relativa el navegador cerca el fitxer que se sol·licita en el mateix servidor. De manera que si utilitzes adreces URL absolutes en lloc d’URL relatives, el teu navegador ha de fer feina extra constantment, i això significa que funciona amb menys eficiència.</li> +</ul> + +<h3 id="Indica_amb_claredat_quan_s’enllacen_recursos_no_HTML">Indica amb claredat quan s’enllacen recursos no HTML</h3> + +<p>Quan enllaces a un recurs que es pot descarregar (com un document PDF o Word) o reproduir en continu (<em>streaming</em>), com ara un vídeo o un àudio, o que pot tenir un altre efecte potencialment inesperat (s’obre una finestra emergent), hauries d’afegir un redactat clar per a reduir qualsevol confusió. Pot resultar força molest, per exemple:</p> + +<ul> + <li>Si tens una connexió de poc ample de banda, fas clic en un enllaç i s’inicia una descàrrega de diversos megabytes de manera inesperada.</li> + <li>Si no has aconseguit instal·lar el reproductor de Flash, fas clic en un enllaç i et trobes de cop i volta en una pàgina que requereix Flash.</li> +</ul> + +<p>Observa amb alguns exemples quin tipus de text pots utilitzar aquí:</p> + +<pre class="brush: html notranslate"><p><a href="http://www.example.com/large-report.pdf"> + Download the sales report (PDF, 10MB) +</a></p> + +<p><a href="http://www.example.com/video-stream/"> + Watch the video (stream opens in separate tab, HD quality) +</a></p> + +<p><a href="http://www.example.com/car-game"> + Play the car game (requires Flash) +</a></p></pre> + +<h3 id="Utilitza_l‘atribut_download_quan_enllacis_a_una_descàrrega">Utilitza l‘atribut <code>download</code> quan enllacis a una descàrrega</h3> + +<p>Quan enllaces a un recurs que s’ha de descarregar en lloc d’obrir-se en el navegador, pots utilitzar l’atribut <code>download</code>, que proporciona l’opció de desar amb el nom de fitxer per defecte. Heus aquí un exemple amb un enllaç de descàrrega de Firefox 39 per a la versió de Windows:</p> + +<pre class="brush: html notranslate"><a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US" + download="firefox-39-installer.exe"> + Download Firefox 39 for Windows +</a></pre> + +<h2 id="Aprenentatge_actiu_crear_un_menú_de_navegació">Aprenentatge actiu: crear un menú de navegació</h2> + +<p>Per a aquest exercici, et volem proposar que enllacis algunes pàgines amb un menú de navegació per a crear un lloc web de diverses pàgines. Aquesta és una manera comuna per a crear un lloc web: en cada pàgina s’utilitza la mateixa estructura de pàgina, que inclou el mateix menú de navegació, de manera que quan fas clic als enllaços fa la impressió que ets en el mateix lloc, però apareix un contingut diferent.</p> + +<p>Fes còpies locals de les quatre pàgines següents, totes en el mateix directori (consulta també el directori de <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start">navegació del menú d’inici</a> per a la llista completa de fitxers):</p> + +<ul> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/index.html">index.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/projects.html">projects.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/pictures.html">pictures.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/social.html">social.html</a></li> +</ul> + +<p>Hauries de:</p> + +<ol> + <li>Afegir una llista no ordenada en el lloc indicat en una pàgina, que contingui els noms de les pàgines que s’enllacen. Un menú de navegació és justament una llista d’enllaços, de manera que això és semànticament correcte.</li> + <li>Convertir cada nom de la pàgina en un enllaç a aquesta pàgina.</li> + <li>Copiar el menú de navegació en cada pàgina.</li> + <li>Eliminar de cada pàgina només l’enllaç a ella mateixa; és confús incloure un enllaç a la mateixa pàgina, i no té sentit, i el fet que no hi hagi enllaç resulta un bon recordatori visual de la pàgina en què et trobes.</li> +</ol> + +<p>L’exemple acabat hauria de veure’s més o menys així:</p> + +<p><img alt="Un exemple senzill de menú de navegació HTML, amb els elements inici, imatges, projectes i xarxes socials" src="https://mdn.mozillademos.org/files/12411/navigation-example.png" style="display: block; margin: 0 auto;"></p> + +<div class="note"> +<p><strong>Nota</strong>: Si t’encalles o no saps si ho has fet bé, pots comprovar la solució en el directori de l’<a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up">etiquetatge del menú de navegació</a>.</p> +</div> + +<h2 id="Enllaços_a_correu_electrònic">Enllaços a correu electrònic</h2> + +<p>És possible crear enllaços o botons que, quan els prems, en lloc d’enllaçar amb un recurs o pàgina, obren un missatge de correu electrònic nou de sortida. Això es fa amb l’element {{HTMLElement("a")}} i l’esquema d’URL <code>mailto:</code>.</p> + +<p>En la forma més bàsica i d’ús més comú, un enllaç <code>mailto:</code> simplement indica l’adreça de correu electrònic del destinatari. Per exemple:</p> + +<pre class="brush: html notranslate"><a href="mailto:ningu@mozilla.org">Envia un missatge a ningú</a> +</pre> + +<p>Això genera un enllaç que té aquest aspecte: <a href="mailto:ningu@mozilla.org">Envia un missatge a ningú</a>.</p> + +<p>De fet, fins i tot l’adreça de correu electrònic és opcional. Si la deixes fora (és a dir, {{htmlattrxref ("href", "a")}} és simplement "mailto:"), el client de correu de l’usuari obrirà una finestra de correu electrònic sortint nova que encara no té cap adreça de destinació especificada. Això sovint és útil com a enllaços per «compartir» en què els usuaris poden fer clic i enviar un correu electrònic a una adreça que triïn.</p> + +<h3 id="Especificar_detalls">Especificar detalls</h3> + +<p>A més de l’adreça de correu electrònic, pots proporcionar més informació. De fet, pots afegir qualsevol camp de capçalera d’un missatge de correu electrònic estàndard a l’adreça URL <code>mailto:</code> que proporcionis. El més habituals són «subject», «cc» i «body» (respectivament, «tema», «amb còpia» i «cos», que no és un veritable camp de capçalera, però permet especificar el contingut d’un missatge curt per al nou correu electrònic). Cada camp i el seu valor s’especifiquen com un terme de la consulta.</p> + +<p>Aquí hi ha un exemple que inclou un cc, bcc, assumpte i cos:</p> + +<pre class="brush: html notranslate"><a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&amp;subject=The%20subject%20of%20the%20email &amp;body=The%20body%20of%20the%20email"> + Send mail with cc, bcc, subject and body +</a></pre> + +<div class="note"> +<p><strong>Nota:</strong> Els valors de cada camp han de tenir una codificació URL (és a dir, amb caràcters no imprimibles i espais <a href="http://en.wikipedia.org/wiki/Percent-encoding">percentatge-escapats</a>). També has de tenir en compte l’ús del signe (&), que separa cada camp en la URL <code>mailto:</code>. Aquesta és la notació estàndard d’una consulta URL.</p> +</div> + +<p>Aquí hi ha algunes altres mostres d’URL de <code><code>mailto:</code></code>:</p> + +<ul> + <li><a href="mailto:">mailto:</a></li> + <li><a href="mailto:nowhere@mozilla.org">mailto:nowhere@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org,nobody@mozilla.org">mailto:nowhere@mozilla.org,nobody@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject</a></li> +</ul> + +<h2 id="Sumari">Sumari</h2> + +<p>Això, de tota manera, és tot sobre els enllaços, per ara! Tornarem als enllaços més endavant en el curs, quan comencem a aplicar-los estils. El pas següent pel que fa a l’HTML és tornar a la semàntica de text i conèixer algunes de les característiques més avançades/inusuals que podeu trobar útils; la formatació avançada del text és la vostra pròxima parada.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/ca/learn/html/introducció_al_html/depurar_html/index.html b/files/ca/learn/html/introducció_al_html/depurar_html/index.html new file mode 100644 index 0000000000..5d8feaea62 --- /dev/null +++ b/files/ca/learn/html/introducció_al_html/depurar_html/index.html @@ -0,0 +1,171 @@ +--- +title: Depurar HTML +slug: Learn/HTML/Introducció_al_HTML/Depurar_HTML +tags: + - Beginner + - CodingScripting + - Debugging + - Error + - Guide + - HTML + - Validation + - validator +translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">Escriure HTML està molt bé; però, i si hi ha alguna cosa que va malament i no se sap on està l'error en el codi? Aquest article dona a conèixer algunes eines que poden ajudar.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisits:</th> + <td>Familiaritzar-se amb els fonaments bàsics de l’HTML, que s’expliquen, per exemple, en <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Getting_started">Iniciació a l’HTML</a>, <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Fonaments_de_text_HTML">Fonaments de text en HTML</a> i <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Crear_hipervincles">Creació d’hipervincles</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td><span id="result_box" lang="ca">Aprendre els conceptes bàsics de la utilització d'eines de depuració per a trobar problemes en HTML. </span></td> + </tr> + </tbody> +</table> + +<h2 id="Depurar_no_fa_por">Depurar no fa por</h2> + +<p>En escriure qualsevol mena de codi, tot està molt bé en general, fins que arriba aquest moment temut, que és quan es produeix un error; s'ha fet alguna cosa malament i el codi no funciona en absolut, o no ben bé com es voldria. Per exemple, a continuació es mostra la informació d'un error en intentar {{glossary("compilar")}} un programa senzill escrit en el llenguatge <a href="https://www.rust-lang.org/">Rust</a>.</p> + +<p><img alt="Una finestra d’ordinador portàtil que mostra el resultat d'intentar compilar un programa en codi Rust amb una cometa que manca en algun lloc d'una instrucció 'print'. El missatge d'error indica: 'error: unterminated double quote string'." src="https://mdn.mozillademos.org/files/12435/error-message.png" style="display: block; height: 520px; margin: 0px auto; width: 711px;">En aquest cas, el missatge d'error és relativament fàcil d'entendre: «cadena de text amb cometes dobles sense tancar». Si et fixes en la programació, és probable que puguis veure que en la instrucció <code>println!(Hello, world!”);</code> podria faltar-hi, per lògica, una cometa doble. Però els missatges d'error poden esdevenir ràpidament més complicats i menys fàcils d'interpretar a mesura que els programes es fan més extensos, i fins i tot el cas senzill anterior pot intimidar una mica a algú que no sap gens de programació amb Rust.</p> + +<p>Això no obstant, la depuració no té per què fer por; la clau per estar còmodes amb l’escriptura i depuració de qualsevol llenguatge de programació o codi és la familiaritat, tant amb el llenguatge com amb les eines.</p> + +<h2 id="Depuració_amb_HTML">Depuració amb HTML</h2> + +<p>HTML no és tan complicat d'entendre com Rust; HTML no es compila en una forma diferent abans que el navegador n’analitzi el resultat i el presenti (s’interpreta, no es compila). I la sintaxi d’un {{glossary("element")}} HTML és possiblement molt més fàcil d'entendre que la d’un «autèntic llenguatge de programació» com Rust, {{glossary("JavaScript")}} o {{glossary("Python")}}. Però la manera amb què els navegadors executen l’HTML és molt més <strong>permissiva</strong> que la manera com s'executen els llenguatges de programació, i això és alhora bo i dolent.</p> + +<h3 id="Codi_permissiu">Codi permissiu</h3> + +<p>Què entenem per permissiu? Bé, en general, quan comets algun error de codi, et pots topar amb dos tipus d'error principals:</p> + +<ul> + <li><strong>Errors de sintaxi:</strong> són errors d'ortografia en el codi, que impedeixen que el programa s'executi, igual que l'error en el codi Rust que es mostra a dalt. En general, aquests errors es poden resoldre bé, sempre que estiguem familiaritzats amb les eines adequades i sapiguem què signifiquen els missatges d'error.</li> + <li><strong>Errors lògics</strong>: aquests són errors en què la sintaxi és correcta, però el codi no fa el que vols que faci, sinó que el programa s'executa de manera incorrecta. Sovint, aquests errors són més difícils de corregir que els de sintaxi, perquè no hi ha cap missatge d'error que t’adreci cap a la font de l'error.</li> +</ul> + +<p>L’HTML en si no té tendència a presentar errors de sintaxi perquè els navegadors en què s'executa són permissius, i això significa que el codi funciona fins i tot encara que hi hagi errors de sintaxi. Els navegadors incorporen regles que els indiquen com interpretar l’etiquetatge escrit erròniament, de manera que s'obtingui alguna cosa que rutlli, encara que potser no sigui exactament el que esperaves. Això, per descomptat, també pot ser un problema!</p> + +<div class="note"> +<p><strong>Nota</strong>: L’HTML s'executa amb permissivitat perquè quan es va crear la web, es va decidir que permetre a la gent la publicació dels seus continguts fos més important que garantir que la sintaxi fos totalment correcta. La xarxa web probablement no seria tan popular com ho és avui, si hagués estat més estricta des dels inicis.</p> +</div> + +<h3 id="Aprenentatge_actiu_estudiar_la_permissivitat_del_codi">Aprenentatge actiu: estudiar la permissivitat del codi</h3> + +<p>És hora d'estudiar la naturalesa permissiva del codi HTML per tu mateix.</p> + +<ol> + <li>En primer lloc, fes-te amb una còpia de la nostra <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">demostració de depuració</a> i desa-te-la en local. Hem escrit aquest exemple de demostració deliberadament amb alguns errors perquè els analitzis (es diu que l’etiquetatge HTML està <strong>mal format</strong>, en oposició a <strong>ben format</strong>).</li> + <li>A continuació, obre’l en un navegador; veuràs alguna cosa com aquesta: <img alt="Un document HTML senzill amb el títol Exemples de depuració HTML i una mica d'informació sobre errors comuns amb HTML, com elements que no es tanquen, elements mal imbricats o atributs que no es tanquen." src="https://mdn.mozillademos.org/files/12437/badly-formed-html.png" style="display: block; margin: 0 auto;"></li> + <li>Això, d’entrada, no fa bona pinta; analitzem el codi per veure si podem esbrinar-ne el perquè (només es mostren els continguts de <code>body</code>): + <pre class="brush: html notranslate"><h1>HTML debugging examples</h1> + +<p>What causes errors in HTML? + +<ul> + <li>Unclosed elements: If an element is <strong>not closed properly, + then its effect can spread to areas you didn't intend + + <li>Badly nested elements: Nesting elements properly is also very important + for code behaving correctly. <strong>strong <em>strong emphasised?</strong> + what is this?</em> + + <li>Unclosed attributes: Another common source of HTML problems. Let's + look at an example: <a href="https://www.mozilla.org/>link to Mozilla + homepage</a> +</ul></pre> + </li> + <li>Fem un repàs dels problemes que hi podem veure: + <ul> + <li>Els elements {{htmlelement("p")}} i {{htmlelement("li")}} no tenen etiquetes de tancament. A partir de la imatge de dalt, no sembla que això hagi afectat malament la representació del codi d’etiquetatge, perquè és fàcil deduir on acaba un dels elements i on en comença un altre.</li> + <li>El primer element {{htmlelement("strong")}} no té etiqueta de tancament. Això és una mica més problemàtic, perquè no és fàcil saber on se suposa que acaba l'element. De fet, sembla que s’ha destacat en negreta tota la resta del text.</li> + <li>En aquesta secció les etiquetes estan mal imbricades: <code><strong>strong <em>strong emphasised?</strong> what is this?</em></code>. No és fàcil saber com s'ha d'interpretar això, a causa del problema anterior.</li> + <li>El valor de l'atribut {{htmlattrxref ("href", "a")}} no té cometes dobles tancament. Això sembla que ha causat el problema més greu: l'enllaç no apareix en absolut.</li> + </ul> + </li> + <li>Ara observem quina presentació fa el navegador a partir d’aquest d’etiquetatge, en oposició a l’etiquetatge que observem en el codi. Per a això, pots utilitzar les eines de desenvolupador del navegador. Si no estàs familiaritzat amb l'ús de les eines de desenvolupador del navegador, dedica uns minuts a revisar <a href="/en-US/docs/Learn/Discover_browser_developer_tools">Descobreix les eines de desenvolupador del navegador</a>, i després torna.</li> + <li>En l'inspector de DOM pots veure quin aspecte presenta la representació d’aquest etiquetatge: <img alt="L'inspector d'HTML de Firefox, amb el nostre paràgraf d'exemple destacat, mostra el text "Què genera errors en l'HTML". Hi pots veure que el navegador s'ha encarregat de tancar l'element paràgraf." src="https://mdn.mozillademos.org/files/12439/html-inspector.png" style="display: block; margin: 0 auto;"></li> + <li>Amb l'inspector DOM, explorarem el codi amb detall per veure com el navegador ha intentat de corregir els errors HTML (hem fet la revisió amb Firefox; altres navegadors moderns <em>haurien de donar</em> el mateix resultat): + <ul> + <li>S’han donat etiquetes de tancament als paràgrafs i elements de llista.</li> + <li>No està clar on s’ha de tancar el primer element <code><strong></code>, de manera que el navegador ha etiquetat cada bloc de text per separat que hi ha fins al final del document amb una etiqueta <code>strong</code>.</li> + <li>El navegador ha resolt la imbricació d’etiquetes incorrecta de la següent manera: + <pre class="brush: html notranslate"><strong>strong + <em>strong emphasised?</em> +</strong> +<em> what is this?</em></pre> + </li> + <li>L'enllaç amb la cometa doble que falta s’ha eliminat del tot. L'últim element de la llista ara presenta aquest aspecte: + <pre class="brush: html notranslate"><li> + <strong>Unclosed attributes: Another common source of HTML problems. + Let's look at an example: </strong> +</li></pre> + </li> + </ul> + </li> +</ol> + +<h3 id="Validació_HTML">Validació HTML</h3> + +<p>A partir de l'exemple anterior pots veure que és important que t’asseguris que el codi HTML està prou ben format. Però, com? En un exemple petit com el que has vist abans, resulta prou fàcil buscar per les línies de codi i trobar els errors; però, què passa amb un document HTML extens i complex?</p> + +<p>La millor estratègia és començar per executar la pàgina HTML amb el servei de validació d’etiquetatge (<a href="https://validator.w3.org/">Markup Validation Service</a>), creat i mantingut per l'organització W3C, que s'ocupa de les especificacions que defineixen l’HTML, el CSS i altres tecnologies web. Aquesta pàgina web pren un document HTML com una entrada, l’analitza i et retorna un informe que exposa tot el que està malament en l’HTML.</p> + +<p><img alt="La pàgina d’inici del validador d’HTML" src="https://mdn.mozillademos.org/files/12441/validator.png" style="display: block; margin: 0 auto;"></p> + +<p>Per a especificar el codi HTML que vols validar, pots donar-ne l’adreça web, pujar-hi l’arxiu HTML o introduir-hi el codi HTML directament.</p> + +<h3 id="Aprenentatge_actiu_validació_d’un_document_HTML">Aprenentatge actiu: validació d’un document HTML</h3> + +<p>Provem-ho amb el nostre <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">document de mostra</a>.</p> + +<ol> + <li>En primer lloc, carrega el <a href="https://validator.w3.org/">Markup Validation Service</a> en una de les pestanyes del navegador, si encara no ho has fet.</li> + <li>Ves a la pestanya <a href="https://validator.w3.org/#validate_by_input">Validate by Direct Input</a>.</li> + <li>Copia tot el codi del document de mostra (no només el body) i enganxa’l en l'àrea gran de text que hi ha en el Markup Validation Service.</li> + <li>Prem el botó <em>Check</em>.</li> +</ol> + +<p>Això t’ha de donar una llista d'errors i altres dades.</p> + +<p><img alt="Llista dels resultats de la validació HTML del servei de validació d'etiquetatge de W3C " src="https://mdn.mozillademos.org/files/12443/validation-results.png" style="display: block; margin: 0 auto;"></p> + +<h4 id="Interpretació_dels_missatges_derror"><span class="short_text" id="result_box" lang="ca">Interpretació dels missatges d'error</span></h4> + +<p>La llista de missatges d'error que el validador presenta sovint són útils, però de vegades no tant; amb una mica de pràctica trobaràs la manera d'interpretar-los per resoldre el codi. Fem una passada pels missatges d'error i vegem què signifiquen. Observem que cada missatge ve amb un número de línia i columna, que t’ajuda a localitzar l'error més fàcilment.</p> + +<ul> + <li>"<span>Consider adding a </span><code>lang</code><span> attribute to the </span><code>html</code><span> start tag to declare the language of this document." [Considera afegir un atribug <code>lang</code> a l'etiqueta d'inici <code>html</code> per declarar l'idioma del document]: No es tracta d'un error, sinó d'una advertència (warning). La <a class="external external-icon" href="https://www.w3.org/International/questions/qa-html-language-declarations" rel="noopener">recomanació</a> és definir sempre l'idioma, i aquest "warning" explica com fer-ho.</span></li> + <li>"End tag <code>li</code> implied, but there were open elements" [Etiqueta final <code>li</code> implícita, però hi havia elements oberts] (2 instàncies): Aquest missatge indica que un element està obert i que s’ha de tancar. L'etiqueta final hi és implícita, però de fet no hi és. La informació de línia/columna apunta a la primera línia després de la línia en què hi hauria d’haver l'etiqueta de tancament, però això ja aquest és un bon indici per veure què falla.</li> + <li>"Unclosed element <code>strong</code>" [“Element <code>strong</code> sense tancar”]: Aquest és molt fàcil d'entendre, un element {{htmlelement("strong")}} està sense tancar i la informació de línia/columna hi apunta directament.</li> + <li>"End tag <code>strong</code> violates nesting rules" [L'etiqueta de tancament <code>strong</code> infringeix les regles d’imbricació]: Aquest missatge assenyala els elements que estan mal imbricats, i la informació de línia/columna assenyala on són.</li> + <li>"End of file reached when inside an attribute value. Ignoring tag" [S'ha arribat al final de l'arxiu sense sortir d'un valor d’atribut. L’etiqueta s’ignora]: Aquest missatge és força críptic; es refereix al fet que hi ha un valor d'atribut que no està correctament format en algun lloc, possiblement prop del final de l'arxiu, perquè en el valor de l'atribut apareix el final de l'arxiu. El fet que el navegador no mostri l'enllaç ens dona una pista de quin element falla.</li> + <li>"End of file seen and there were open elements" [S’ha arribat al final de l'arxiu i hi ha elements oberts]: Aquest missatge és una mica ambigu, però bàsicament es refereix al fet que hi ha elements oberts que s’han de tancar correctament. Els números de línia apunten a les últimes línies de l'arxiu i aquest missatge d'error ve amb una línia de codi que assenyala un exemple d'element obert: + <pre class="notranslate">example: <a href="https://www.mozilla.org/>link to Mozilla homepage</a> ↩ </ul>↩ </body>↩</html></pre> + + <div class="note"> + <p><strong>Nota</strong>: Un atribut que no té cometes de tancament pot entendre’s com un element obert perquè la resta del document s’interpreta com el valor de l'atribut.</p> + </div> + </li> + <li>"Unclosed element <code>ul</code>" [Element <code>ul</code> sense tancar]: Aquest missatge no resulta de gaire utilitat perquè l'element {{htmlelement("ul")}} està tancat correctament. L’error es produeix perquè l'element {{htmlelement("a")}} no està tancat perquè no té cometes de tancament.</li> +</ul> + +<p>Si no arribes a esbrinar què significa cada missatge d'error, no t’hi amoïnis; una bona idea és tractar de resoldre uns quants errors cada la vegada, i a continuació tornar a validar el codi HTML per veure els errors que queden. De vegades, la resolució d'un error pot eliminar més d’un missatges d'error diferents, perquè sovint un sol problema pot causar diversos errors, en un efecte dòmino.</p> + +<p>Sabràs que has resolt tots els errors quan en la sortida t’aparegui una banda amb el missatge següent:</p> + +<p><img alt="Banda amb el text: "El document valida d'acord amb els esquemes i les restriccions addiconals especificats que verifica el validador"" src="https://mdn.mozillademos.org/files/12445/valid-html-banner.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="Resum">Resum</h2> + +<p>Aquí tenim una introducció a la depuració de codi HTML, que t’hauria de proporcionar alguns coneixements útils per quan comencis a depurar CSS, JavaScript i altres tipus de codi, més endavant durant la carrera. Això també marca el final dels articles d’aprenentatge del mòdul Introducció a l’HTML; ara ja pots examinar-te tu mateix amb les nostres activitats d’avaluació: a sota trobaràs un enllaç a la primera d'elles.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/ca/learn/html/introducció_al_html/document_i_estructura_del_lloc_web/index.html b/files/ca/learn/html/introducció_al_html/document_i_estructura_del_lloc_web/index.html new file mode 100644 index 0000000000..1088731eea --- /dev/null +++ b/files/ca/learn/html/introducció_al_html/document_i_estructura_del_lloc_web/index.html @@ -0,0 +1,267 @@ +--- +title: Document i estructura del lloc web +slug: Learn/HTML/Introducció_al_HTML/Document_i_estructura_del_lloc_web +translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">Així com definim les parts individuals de la pàgina (per exemple, «un paràgraf» o «una imatge»), {{glossary("HTML")}} també compta amb una sèrie d'elements de nivell de bloc que s'utilitzen per a definir les àrees del teu lloc web (com ara «la capçalera», «el menú de navegació» o «la columna principal de contingut»). En aquest article es reflexiona sobre com planificar una estructura bàsica d'un lloc web, i com escriure el codi HTML per a representar aquesta estructura.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisits:</th> + <td>Familiaritat amb els conceptes bàsics de l’HTML que s'expliquen en <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Getting_started">Iniciació a l’HTML</a>. <span id="result_box" lang="ca"><span>Aplicació de format</span> <span>al text amb HTML</span></span>, que s'explica en <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Fonaments_de_text_HTML">Fonaments de text amb HTML</a>. Funcionament dels hipervincles, que s'expliquen en <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Crear_hipervincles">Crear hipervincles</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Aprendre a estructurar un document amb etiquetes semàntiques, i elaborar l'estructura d'un lloc web senzill.</td> + </tr> + </tbody> +</table> + +<h2 id="Seccions_bàsiques_dun_document">S<span id="result_box" lang="ca"><span title="Basic sections of a document">eccions bàsiques d'un document</span></span></h2> + +<p>Les pàgines web poden i tenen un aparença molt diferent les unes de les altres, però totes tendeixen a compartir components estàndard similars, llevat que a la pàgina es mostri un vídeo o un joc en pantalla completa, formi part d'alguna mena de projecte artístic, o simplement estigui mal estructurada:</p> + +<dl> + <dt>capçalera (header)</dt> + <dd>Sol ser una gran franja a la part superior amb un títol gran i/o un logotip. És on en general es manté la informació principal comuna sobre un lloc web respecte d'una altra pàgina web.</dd> + <dt>barra de navegació (navigation bar)</dt> + <dd>Són els enllaços a les seccions principals del lloc; en general es representen com botons de menú, enllaços o pestanyes. Igual que la capçalera, aquest contingut en general roman característic d'una pàgina web respecte d’una altra; un sistema de navegació incoherent en el lloc web només portarà frustració i confusió als usuaris. Molts dissenyadors web consideren que la barra de navegació ha de ser part de la capçalera en lloc d'un component individual, però això no és un requisit; de fet, alguns sostenen també que el fet de tenir aquests dos elements separats és millor per motius d’<a href="/ca/docs/Learn/Accessibility">accesibilitat</a>, perquè els lectors de pantalla poden llegir més bé totes dues característiques si estan separades.</dd> + <dt>contingut principal (main content)</dt> + <dd>Una àrea gran al centre que conté la part principal del contingut particular d'una pàgina web determinada, per exemple, el vídeo que vols veure o la història principal que llegeixes, o el mapa que vols examinar, o els titulars de les notícies, etc. Aquesta és la part singular de la pàgina web que sens dubte variarà d'una pàgina web a una altra!</dd> + <dt>barra lateral (sidebar)</dt> + <dd>Informació secundària, enllaços, citacions, anuncis, etc. En general es tracta d’informació de context respecte de la que inclou el contingut principal (per exemple, en un article d’una pàgina de notícies, la barra lateral podria contenir la biografia de l'autor o enllaços a articles relacionats), però també hi ha casos en què trobaràs elements recurrents, com ara un sistema secundari de navegació.</dd> + <dt>peu de pàgina (footer)</dt> + <dd>Una franja a la part inferior de la pàgina que generalment conté la lletra petita, els avisos de copyright o informació de contacte. És un lloc per a posar-hi informació que és comuna (com la capçalera) per a tot el lloc web, però aquesta informació no és en general ni crítica ni secundària respecte de la pàgina web mateixa. El peu de pàgina també s'utilitza de vegades amb finalitats de posicionament {{Glossary("SEO")}}, en proporcionar enllaços per a un accés ràpid al contingut popular.</dd> +</dl> + +<p>Un «lloc web típic» podria presentar una estructura semblant a això:</p> + +<p><img alt="Un exemple senzill d’estructura de lloc web que inclou una capçalera principal, un menú de navegació, una àrea de contingut principal, una barra lateral i un peu de pàgina." src="https://mdn.mozillademos.org/files/12417/sample-website.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="HTML_per_a_estructurar_el_contingut">HTML per a estructurar el contingut</h2> + +<p>L'exemple senzill que es mostra a dalt no és bonic, però és perfectament acceptable per a il·lustrar un exemple típic de disseny d'una pàgina web. Alguns llocs web tenen més columnes, alguns són molt més complexos, però ja es copsa la idea. Amb el CSS correcte, pots usar gairebé qualsevol element per a delimitar les diferents seccions i assignar-los l’aspecte que vulguis però, com ja hem dit, cal respectar la semàntica i <strong>utilitzar l'element correcte per a la funció correcta</strong>.</p> + +<p>Això és perquè els elements visuals no expliquen tota la història. Utilitzem el color i la mida de la lletra per a cridar l'atenció dels usuaris en les parts del contingut més rellevants, com ara el menú de navegació i els enllaços relacionats; però, què passa amb les persones que tenen una discapacitat visual, per exemple, que potser no troben gaire útils conceptes com «rosa» o «mida de lletra gran»?</p> + +<div class="note"> +<p><strong>Nota</strong>: Les persones daltòniques representen al voltant del <a href="http://www.color-blindness.com/2006/04/28/colorblind-population/">8% de la població mundial</a>. Les persones cegues o amb discapacitats visuals representen aproximadament el 4-5% de la població mundial (el 2012 hi havia <a href="https://ca.wikipedia.org/wiki/Defici%C3%A8ncia_visual">285 milions d'aquest tipus de persones al món</a>, mentre que la població total era de <a href="https://en.wikipedia.org/wiki/World_human_population#/media/File:World_population_history.svg">prop de 7.000 milions</a>.)</p> +</div> + +<p>En el teu codi HTML pots etiquetar seccions de contingut segons la funció que compleixen; pots fer servir elements que representin de manera inequívoca les seccions de contingut que hem descrit abans, i les tecnologies de suport com els lectors de pantalla poden reconèixer aquells elements i ajudar amb tasques com «trobar la navegació principal» o «trobar el contingut principal». Com ja hem esmentat abans en el curs, són moltes les <a href="https://wiki.developer.mozilla.org/ca/docs/Learn/HTML/Introducci%C3%B3_al_HTML/Fonaments_de_text_HTML#Per_qu%C3%A8_cal_una_estructura">conseqüències de no utilitzar una estructura i una semàntica correctes perquè un element compleixi la funció correcta</a>.</p> + +<p>Per a dur a terme aquest etiquetatge semàntic, l’HTML proporciona etiquetes específiques que es poden utilitzar per a representar aquestes seccions, per exemple:</p> + +<ul> + <li><strong>capçalera: </strong>{{htmlelement("header")}}.</li> + <li><strong>barra de navegació: </strong>{{htmlelement("nav")}}.</li> + <li><strong>contingut principal: </strong>{{htmlelement("main")}}, <span id="result_box" lang="ca"><span>amb</span> <span>diverses</span> <span>subseccions</span> <span>de contingut</span> <span>representades</span> <span>pels elements</span></span> {{HTMLElement("article")}}, {{htmlelement("section")}} i {{htmlelement("div")}}.</li> + <li><strong>barra lateral: </strong>{{htmlelement("aside")}}; <span class="short_text" id="result_box" lang="ca"><span>sovint</span> <span>col·locat dins de l’element</span></span> {{htmlelement("main")}}.</li> + <li><strong>peu de pàgina: </strong>{{htmlelement("footer")}}.</li> +</ul> + +<h3 id="Aprenentatge_actiu_Analitzar_el_codi_del_nostre_exemple">Aprenentatge actiu: Analitzar el codi del nostre exemple</h3> + +<p>L’exemple que hem vist abans està representat pel codi següent (també pots trobar <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/document_and_website_structure/index.html">l’exemple en el repositori de GitHub</a>). Observa’l a dalt i fes un cop d’ull a la llista següent per veure quines parts componen quines seccions visibles.</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + + <title>My page title</title> + <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css"> + <link rel="stylesheet" href="style.css"> + + <!-- the below three lines are a fix to get HTML5 semantic elements working in old versions of Internet Explorer--> + <!--[if lt IE 9]> + <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> + <![endif]--> + </head> + + <body> + <!-- Here is our main header that is used accross all the pages of our website --> + + <header> + <h1>Header</h1> + </header> + + <nav> + <ul> + <li><a href="#">Home</a></li> + <li><a href="#">Our team</a></li> + <li><a href="#">Projects</a></li> + <li><a href="#">Contact</a></li> + </ul> + + <!-- A Search form is another commmon non-linear way to navigate through a website. --> + + <form> + <input type="search" name="q" placeholder="Search query"> + <input type="submit" value="Go!"> + </form> + </nav> + + <!-- Here is our page's main content --> + <main> + + <!-- It contains an article --> + <article> + <h2>Article heading</h2> + + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p> + + <h3>subsection</h3> + + <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p> + + <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p> + + <h3>Another subsection</h3> + + <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p> + + <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p> + </article> + + <!-- the aside content can also be nested within the main content --> + <aside> + <h2>Related</h2> + + <ul> + <li><a href="#">Oh I do like to be beside the seaside</a></li> + <li><a href="#">Oh I do like to be beside the sea</a></li> + <li><a href="#">Although in the North of England</a></li> + <li><a href="#">It never stops raining</a></li> + <li><a href="#">Oh well...</a></li> + </ul> + </aside> + + </main> + + <!-- And here is our main footer that is used across all the pages of our website --> + + <footer> + <p>©Copyright 2050 by nobody. All rights reversed.</p> + </footer> + + </body> +</html></pre> + +<p>Pren-te un temps per observar el codi i intentar entendre’l; els comentaris que hi ha dins del codi també t’haurien d'ajudar a entendre’l. No et demanem de fer gaire més en aquest article perquè la clau per a entendre el disseny del document és escriure una estructura HTML semblant a aquesta i a continuació posar-hi CSS. Però ens esperarem per a això fins que comencis a estudiar com dissenyar amb CSS en l’article dedicat al CSS que tracta aquest tema.</p> + +<h2 id="Els_elements_HTML_de_disseny_amb_més_detall"><span class="short_text" id="result_box" lang="ca"><span>Els elements</span> <span>HTML de disseny</span> <span>amb</span> <span>més</span> <span>detall</span></span></h2> + +<p>És bo entendre amb detall el significat general de tots els elements HTML de seccionament; treballarem aquesta qüestió de manera gradual a mesura que anem assolint més experiència en el desenvolupament web. Pots entrar en molt de detall amb la lectura de la nostra <a href="/ca/docs/Web/HTML/Element">referència d’elements HTML</a>. De moment, aquestes són les definicions principals que ens cal comprendre:</p> + +<ul> + <li>{{HTMLElement('main')}} és el contingut <em>particular d'aquesta pàgina</em>. <code><main></code> només es fa servir una vegada per pàgina i es posa directament a dins de l’element {{HTMLElement('body')}}. Per anar bé, no hauria d'estar imbricat dins d'altres elements.</li> + <li>{{HTMLElement('article')}} tanca un bloc de contingut que té sentit per si sol, sense la resta de la pàgina (per exemple, una sola entrada al bloc).</li> + <li>{{HTMLElement('section')}} és similar a <code><article></code>, però és més aviat per mantenir agrupada una sola part de la pàgina, que constitueix una peça amb una funció única (per exemple, un mini mapa, o un conjunt de titulars d'articles i resums). Es considera una bona pràctica començar cada secció amb un <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Fonaments_de_text_HTML">títol d’encapçalament</a>; observa també que pots fragmentar cada article (<code><article></code>) en diferents seccions (<code><section></code>), o cada secció (<code><section></code>) en diferents articles (<code><article></code>), segons el context.</li> + <li>{{HTMLElement('aside')}} inclou contingut que no està directament relacionat amb el contingut principal, però pot proporcionar informació addicional que hi estigui relacionada indirectament (entrades del glossari, biografia de l'autor, enllaços relacionats, etc.)</li> + <li>{{HTMLElement('header')}} representa un grup de contingut introductori. Si es tracta d'un element fill de l’element {{HTMLElement('body')}}, defineix la capçalera global d'una pàgina web, però si es tracta d'un element fill d'un element {{HTMLElement('article')}} o d’un element {{HTMLElement('section')}}, defineix una capçalera específica per a aquesta secció (no confonguis això amb els <a href="https://wiki.developer.mozilla.org/ca/docs/Learn/HTML/Introducci%C3%B3_al_HTML/Qu%C3%A8_hi_ha_en_el_head_Metadades_en_HTML#Afegir_un_t%C3%ADtol">títols d’encapçalament</a>.)</li> + <li>{{HTMLElement('nav')}} inclou les funcions de navegació principal de la pàgina. A la navegació no anirien enllaços secundaris i d’altres elements.</li> + <li>{{HTMLElement('footer')}} representa un grup de continguts al final d'una pàgina.</li> +</ul> + +<h3 id="Delimitadors_no_semàntics"><span id="result_box" lang="ca"><span>Delimitadors no semàntics</span></span></h3> + +<p>A vegades et trobes amb una situació en què no hi ha un element semàntic adequat per a agrupar junts un seguit d’elements o delimitar uns continguts concrets. A vegades pot ser que simplement vulguis agrupar un conjunt d'elements per a tractar-los tots com una sola entitat amb una mica de {{glossary("CSS")}} o {{glossary("JavaScript")}}. Per a casos com aquests, l’HTML proporciona els elements {{HTMLElement("div")}} i {{HTMLElement("span")}}. S'han d'utilitzar preferiblement amb un atribut {{htmlattrxref('class')}} adequat, que els proporcioni algun tipus d'etiqueta perquè se’ls pugui identificar fàcilment.</p> + +<p>{{HTMLElement("span")}} és un element de línia no semàntic que només hauries d'utilitzar si no trobes cap altre element de text semàntic que vagi més bé per a delimitar aquell contingut, o no vols afegir-hi cap significat específic. Per exemple:</p> + +<pre class="brush: html notranslate"><p>The King walked drunkenly back to his room at 01:00, the beer doing nothing to aid +him as he staggered through the door <span class="editor-note">[Editor's note: At this point in the +play, the lights should be down low]</span>.</p></pre> + +<p>En aquest cas, la nota de l'editor només pretén proporciona una indicació addicional per al director de l'obra; no es pretén que tingui un significat semàntic addicional. Podries aplicar-hi CSS per a distanciar aquesta nota del text principal als ulls d’un usuari vident.</p> + +<p>{{HTMLElement("div")}} és un element de bloc no semàntic que només hauries d'utilitzar si no trobes cap altre element de bloc semàntic que vagi més bé per a delimitar aquell contingut, o no vols afegir-hi cap significat específic. Per exemple, imagina’t un giny de tipus carretó de la compra que pots optar per seleccionar en qualsevol moment durant el temps que navegues per un lloc web de comerç electrònic:</p> + +<pre class="brush: html notranslate"><div class="shopping-cart"> + <h2>Shopping cart</h2> + <ul> + <li> + <p><a href=""><strong>Silver earrings</strong></a>: $99.95.</p> + <img src="../products/3333-0985/" alt="Silver earrings"> + </li> + <li> + ... + </li> + </ul> + <p>Total cost: $237.89</p> +</div></pre> + +<p>No és realment un element <code><aside></code>, perquè no s'identifica necessàriament amb el contingut principal de la pàgina (vols que estigui accessible des de qualsevol lloc). Tampoc és particularment necessari utilitzar un element <code><section></code>, perquè no és part del contingut principal de la pàgina. En aquest cas està molt bé utilitzar un element <code><div></code>. Hi hem inclòs un títol d’encapçalament com un indicador per a ajudar els usuaris amb lectors de pantalla a trobar-ho.</p> + +<div class="warning"> +<p><strong>Atenció</strong>: Els elements <code>div</code> són tan còmodes d'usar que és fàcil d'utilitzar-los en excés. Però com que no aporten cap valor semàntic, només introdueixen soroll en el teu codi HTML. Assegura’t d’utilitzar-los només quan no hi hagi cap altra solució semàntica més adequada i tracta de reduir-ne l’ús al mínim. En cas contrari et trobaràs amb moltes dificultats a l’hora d’actualitzar i mantenir els teus documents.</p> +</div> + +<h3 id="Salts_de_línia_i_separadors_horitzontals">Salts de línia i separadors horitzontals</h3> + +<p>Dos elements que utilitzaràs de tant en tant i que voldràs conèixer són {{htmlelement("br")}} i {{htmlelement("hr")}}:</p> + +<p><code><br></code> crea un salt de línia en un paràgraf; és l'única manera de forçar una estructura rígida, en una situació en què vols un seguit de línies curtes fixes, com en una adreça postal o un poema. Per exemple:</p> + +<pre class="brush: html notranslate"><p>There once was a girl called Nell<br> +Who loved to write HTML<br> +But her structure was bad, her semantics were sad<br> +and her markup didn't read very well.</p></pre> + +<p>Sense els elements <code><br></code>, el paràgraf es mostraria en una línia llarga (com hem dit abans en el curs, <a href="/ca/docs/Learn/HTML/Introducci%C3%B3_al_HTML/Getting_started#Els_espais_en_blanc_en_HTML">l’HTML ignora la major part dels espais en blanc</a>); amb aquests elements en el codi, el marcatge es mostra així:</p> + +<p>There once was a girl called Nell<br> + Who loved to write HTML<br> + But her structure was bad, her semantics were sad<br> + and her markup didn't read very well.</p> + +<p>Els elements <code><hr></code> creen un separador horitzontal en el document que indica un canvi de temàtica en el text (com ara un canvi de tema o escena). Visualment es veu com una línia horitzontal. A tall d'exemple:</p> + +<pre class="notranslate"><p>Ron was backed into a corner by the marauding netherbeasts. Scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.</p> +<hr> +<p>Meanwhile, Harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap. He read it hasily, and lept to his feet; "better get back to work then", he mused.</p></pre> + +<p>Seria com això:</p> + +<p>Ron was backed into a corner by the marauding netherbeasts. Scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.</p> + +<hr> +<p>Meanwhile, Harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap. He read it hasily and sighed; "better get back to work then", he mused.</p> + +<h2 id="Planificar_un_lloc_web_senzill">Planificar un lloc web senzill</h2> + +<p>Una vegada planificat el contingut d'una pàgina web simple, el pas lògic següent és tractar d'esbrinar quin contingut volem posar en tota la pàgina web, quines pàgines es necessitaran i de quina manera s'han d'arranjar i enllaçar l’una amb l'altra per a oferir la millor experiència d'usuari possible. Això s’anomena {{glossary("Arquitectura de la informació")}}. En un lloc web gran i complex, aquest procés pot requerir una gran planificació, però per a un lloc web senzill d'unes poques pàgines això pot ser força senzill, i fins i tot divertit!</p> + +<ol> + <li>Has de tenir en compte que hi ha d’haver uns quants elements comuns en la majoria de pàgines (si no totes), com ara el menú de navegació i els continguts del peu de pàgina. Si el lloc és per una empresa, per exemple, és una bona idea que tingui la informació de contacte disponible al peu de pàgina de cada pàgina. Apunta quins continguts vols que siguin comuns a totes les pàgines.<img alt="Els elements comuns que hi ha d'haver a cada pàgina d'una pàgina web de viatges: el títol i el logotip, la informació de contacte, el copyright, la declaració de termes i condicions, el selector d'idioma, la política d'accessibilitat" src="https://mdn.mozillademos.org/files/12423/common-features.png" style="border-style: solid; border-width: 1px; display: block; height: 375px; margin: 0px auto; width: 600px;"></li> + <li>A continuació, dibuixa un esbós de quina estructura vols que presenti cada pàgina (pot ser semblant a la nostra pàgina web senzilla d’abans). Pren nota de què hi haurà a cada bloc. <img alt=" Un diagrama senzill d'una mostra de l'estructura d'un lloc web, amb una capçalera, l'àrea de contingut principal , dues barres laterals i un peu de pàgina." src="https://mdn.mozillademos.org/files/12429/site-structure.png" style="border-style: solid; border-width: 1px; display: block; height: 232px; margin: 0px auto; width: 600px;"></li> + <li>Ara, fes una previsió (una pluja d'idees) de la resta de continguts (que no seran comuns a totes les pàgines) que vols que hi hagi al lloc web; escriu-ne tota la llista, tan llarga com vulguis. <img alt="Una llarga llista de tots els elements que podríem posar en el nostre lloc web de viatges, des d'un cercador fins a ofertes especials o informació específica per a cada país" src="https://mdn.mozillademos.org/files/12425/feature-list.png" style="border-style: solid; border-width: 1px; display: block; height: 1066px; margin: 0px auto; width: 600px;"></li> + <li>A continuació, ordena tots aquests elements de contingut per grups, perquè et puguis fer una idea de quines parts poden anar juntes en les diferents pàgines. Això és molt similar a una tècnica anomenada classificació de targetes, o {{glossary("card sorting")}}. <img alt="Els elements que haurien d'aoparpèixer en un lloc web de vacances, repartits en 5 categories: Cercar, Ofertes especials, Informació específica de país, Resultats de cerca i Compres." src="https://mdn.mozillademos.org/files/12421/card-sorting.png" style="border-style: solid; border-width: 1px; display: block; height: 579px; margin: 0px auto; width: 600px;"></li> + <li>Ara, dibuixa un mapa del lloc web en brut; dibuixa un globus per a cada pàgina del lloc web, i línies que mostrin el flux de treball esperat entre les pàgines. La pàgina d'inici probablement estarà al centre, i s’enllaçarà amb la majoria de les altres, si no amb totes; la major part de les pàgines d'un lloc web petit han d'estar disponibles en la navegació principal, encara que hi ha excepcions. També hi pots voler incloure observacions sobre com podrien presentar-se les coses.<img alt="Un mapa del lloc web que mostra les pàgines d'inici, informació específica del país, resultats de cerca, pagament i compres" src="https://mdn.mozillademos.org/files/12427/site-map.png" style="border-style: solid; border-width: 1px; display: block; height: 872px; margin: 0px auto; width: 600px;"></li> +</ol> + +<h3 id="Aprenentatge_actiu_crea_el_teu_mapa_de_lloc_web_propi">Aprenentatge actiu: crea el teu mapa de lloc web propi</h3> + +<p>Fes l'exercici anterior per a un lloc web de creació pròpia. De què t’agradaria fer un lloc web?</p> + +<div class="note"> +<p><strong>Nota</strong>: Desa el teu treball en algun lloc; pot ser que el necessitis més endavant.</p> +</div> + +<h2 id="Resum">Resum</h2> + +<p>En aquest punt hauries de tenir idea més clara sobre com estructurar una pàgina/lloc web. En l'últim article d'aquest mòdul, estudiarem com depurar l’HTML.</p> + +<h2 id="Mira_també">Mira també</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">Ús de seccions i esquemes</a>: Guia avançada d'elements semàntics HTML5 i algoritme de disseny d'estructures HTML5.</li> +</ul> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/ca/learn/html/introducció_al_html/estructurar_una_pàgina_de_contingut/index.html b/files/ca/learn/html/introducció_al_html/estructurar_una_pàgina_de_contingut/index.html new file mode 100644 index 0000000000..e3481bdc15 --- /dev/null +++ b/files/ca/learn/html/introducció_al_html/estructurar_una_pàgina_de_contingut/index.html @@ -0,0 +1,93 @@ +--- +title: Estructurar una pàgina de contingut +slug: Learn/HTML/Introducció_al_HTML/Estructurar_una_pàgina_de_contingut +tags: + - Assessment + - Beginner + - CodingScripting + - Design + - HTML + - Layout + - Learn + - Structure + - semantics +translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">L'estructuració d'una pàgina de contingut llest per dissenyar, utilitzant CSS, és una habilitat molt important per dominar, pel que en aquesta avaluació es provarà la vostra capacitat de pensar sobre com una pàgina podria acabar veient-se, i triar la semàntica estructural apropiada per construir un disseny damunt.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td>Abans de procedir a aquesta avaluació heu hagut de treballar la resta del curs, amb un èmfasi particular en <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Documents i estructura del lloc web</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Posar a prova el coneixement de les estructures de pàgines web, i com representar un esquema de diseny possible en el marcat.</td> + </tr> + </tbody> +</table> + +<h2 id="Punt_de_partida"><span id="result_box" lang="ca"><span>Punt de partida</span></span></h2> + +<p>Per obtenir aquesta avaluació inicial, cal anar i agafar l'<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/structuring-a-page-of-content-start/assets.zip?raw=true">arxiu zip que conté tots els recursos per començar</a>. L'arxiu zip conté:</p> + +<ul> + <li>L'HTML que es necessita per afegir el marcat estructural</li> + <li>CSS per l'estil del marcat.</li> + <li>Les imatges que s'utilitzen en la pàgina.</li> +</ul> + +<p>Crear l'exemple en el vostre equip local, o bé, utilitzar un lloc com <a class="external external-icon" href="http://jsbin.com/">JSBin</a> or <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> per fer la vostra avaluació.</p> + +<h2 id="Resum_del_projecte">R<span class="short_text" id="result_box" lang="ca"><span>esum</span> <span>del projecte</span></span></h2> + +<p>Per a aquest projecte, la tasca és prendre el contingut de la pàgina principal d'un lloc web d'observació d'aus i afegir elements estructurals a la mateixa, pel que pot tenir un disseny de pàgina que se li aplica. S'ha de tenir:</p> + +<ul> + <li>Una capçalera que abasta l'ample complet del lloc que conté el títol principal de la pàgina, el logotip del lloc, i el menú de navegació. El títol i el logotip apareixen un al costat de l'altre una vegada que s'aplica l'estil, i la navegació apareix sota d'aquests dos elements.</li> + <li>Una àrea de contingut principal que conté dues columnes - un bloc principal per contenir el text de benvinguda, i una barra lateral que conté imatges en miniatura.</li> + <li>Un peu de pàgina que conté informació dels drets d'autor i crèdits.</li> +</ul> + +<p>Cal afegir un embolcall adequat per a:</p> + +<ul> + <li>La capçalera</li> + <li>El menú de navegació</li> + <li>El contingut principal</li> + <li>El text de benvinguda</li> + <li>La barra lateral de la imatge</li> + <li>El peu de pàgina</li> +</ul> + +<p>També s'ha de:</p> + +<ul> + <li>Aplicar el CSS, proporcionat,a la pàgina mitjançant l'addició d'una altra element {{htmlelement("link")}} just a sota de l'existent proporcionada a l'inici.</li> +</ul> + +<h2 id="Consells_i_suggeriments"><span id="result_box" lang="ca"><span>Consells</span> <span>i</span> <span>suggeriments</span></span></h2> + +<ul> + <li>Utilitzar el <a href="https://validator.w3.org/">validador HTML de W3C</a> per validar el codi HTML; s'obtenen punts de bonificació si es valida tant com sigui possible (la línia "googleapis" és una línia que s'utilitza per importar fonts personalitzades en la pàgina de Google Fonts service; no valida, pel que no ens hem de preocupar per això.)</li> + <li>No es necessita saber res de CSS per fer aquesta avaluació; només s'ha de posar el CSS proporcionat a l'interior d'un element HTML.</li> + <li>El CSS proporcionat està dissenyat de manera que quan s'afegeixen els elements estructurals correctes per al marcatge, apareixeran en verd a la pàgina representada.</li> + <li>Si us quedeu encallats i no es pot preveure a on posar els elements, sovint, ajuda dibuixar un diagrama de blocs simples del disseny de pàgina, i escriure sobre els elements que cregueu que haurien d'embolicar cada bloc.</li> +</ul> + +<h2 id="Exemple">Exemple</h2> + +<p>La següent captura de pantalla mostra un exemple del que la pàgina podria ser després del seu marcatge.</p> + +<p><img alt='The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message' src="https://mdn.mozillademos.org/files/12449/example-page.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="Avaluació">Avaluació</h2> + +<p>Si esteu seguint aquesta avaluació com a part d'un curs organitzat, heu de ser capaços de donar al vostre treball al vostre professor/tutor per qualificar-ho. Si sou d'auto-aprenentatge, llavors podeu obtenir la guia de qualificació amb molta facilitat preguntan <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">fil del discurs de l'àrea d'aprenentatge</a> o al canal d'IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> en <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Prova el primer exercici - no hi ha res a guanyar amb trampa!</p> + +<p>{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/ca/learn/html/introducció_al_html/fonaments_de_text_html/index.html b/files/ca/learn/html/introducció_al_html/fonaments_de_text_html/index.html new file mode 100644 index 0000000000..fafc49effe --- /dev/null +++ b/files/ca/learn/html/introducció_al_html/fonaments_de_text_html/index.html @@ -0,0 +1,950 @@ +--- +title: Fonaments de text HTML +slug: Learn/HTML/Introducció_al_HTML/Fonaments_de_text_HTML +tags: + - Beginner + - CodingScripting + - Guide + - HTML + - Introduction to HTML + - Learn + - Text + - headings + - paragraphs + - semantics +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">Una de les funcions principals de l'HTML és donar estructura i significat al text (també conegut com {{glossary("semàntica")}}), perquè el navegador el pugui mostrar correctament. En aquest article s'explica la forma com es pot utilitzar {{glossary("HTML")}} per estructurar una pàgina de text afegint títols i paràgrafs, destacant paraules, amb la creació de llistes, i més.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td>Familiaritzar-se amb els elements bàsics de l’HTML, com es tracta en <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Getting_started">Inici en HTML</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td><span id="result_box" lang="ca"><span>Aprendre com</span> <span>marcar una</span> <span>pàgina</span> <span>bàsica</span> <span>de text</span> <span>per donar-hi</span> <span>estructura</span> <span>i</span> <span>significat</span> <span>- incloent</span> <span>paràgrafs,</span> <span>capçaleres,</span> <span>llistes</span><span>, destacats</span> <span>i</span> <span>cites.</span></span></td> + </tr> + </tbody> +</table> + +<h2 id="Conceptes_bàsics_capçaleres_i_paràgrafs">Conceptes bàsics: capçaleres i paràgrafs</h2> + +<p>La majoria del text estructurat es compon de títols i paràgrafs, independentment de si llegeixes una història, un diari, un llibre de text universitari, una revista, etc.</p> + +<p><img alt="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs." src="https://mdn.mozillademos.org/files/12371/newspaper_small.jpg" style="display: block; margin: 0 auto;"></p> + +<p>El contingut estructurat fa que l'experiència de llegir sigui més fàcil i agradable.</p> + +<p>En HTML, cada paràgraf s’ha de delimitar amb un element {{htmlelement("p")}}, així:</p> + +<pre class="brush: html notranslate"><p>I am a paragraph, oh yes I am.</p></pre> + +<p>Cada títol s’ha de delimitar amb un element de títol:</p> + +<pre class="brush: html notranslate"><h1>I am the title of the story.</h1></pre> + +<p>Hi ha sis elements de títol: {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}} i {{htmlelement("h6")}}. Cada element representa un nivell de contingut diferent del document; <code><h1></code> representa el títol principal, <code><h2></code> representa un subtítol, <code><h3></code> representa un subsubtítol, i així successivament.</p> + +<h3 id="Implementar_una_estructura_jeràrquica">Implementar una estructura jeràrquica</h3> + +<p>A tall d'exemple, en una història, <code><h1></code> representaria el títol de la història, <code><h2></code> representaria el títol de cada capítol i <code><h3></code> representaria subseccions de cada capítol, i així successivament.</p> + +<pre class="brush: html notranslate"><h1>The Crushing Bore</h1> + +<p>By Chris Mills</p> + +<h2>Chapter 1: The Dark Night</h2> + +<p>It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ...</p> + +<h2>Chapter 2: The eternal silence</h2> + +<p>Our protagonist could not so much as a whisper out of the shadowy figure ...</p> + +<h3>The specter speaks</h3> + +<p>Several more hours had passed, when all of a sudden the specter sat bolt upright and exclaimed, "Please have mercy on my soul!"</p></pre> + +<p>Què representen exactament els elements que intervenen depèn en realitat de tu, sempre que la jerarquia tingui sentit. Només has de tenir en compte un seguit de bones pràctiques a mesura que crees aquest tipus d'estructures:</p> + +<ul> + <li>Preferiblement, només has d'utilitzar un únic <code><h1></code> per pàgina; aquest és el títol de nivell superior, i tots els altres se situen per sota d'aquest en la jerarquia.</li> + <li>Assegura’t que utilitzes els títols en l'ordre correcte de la jerarquia. No utilitzis <code><h3></code> per representar subtítols, seguit per <code><h2></code> per representar subsubtítols; no té cap sentit i condueix a resultats estranys.</li> + <li>Dels sis nivells de títols disponibles, no hauries d’utilitzar-ne més de tres per pàgina, llevat que ho creguis de debò necessari. Els documents amb molts nivells (és a dir, una jerarquia profunda en títols) es tornen difícils de manejar i és difícil de navegar-hi. En aquestes ocasions, és recomanable desplegar el contingut en múltiples pàgines, si és possible.</li> +</ul> + +<h3 id="Per_què_cal_una_estructura">Per què cal una estructura?</h3> + +<p>Per respondre a aquesta pregunta, fem una ullada a <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a>; el punt de partida del nostre exemple d'aquest article (una bona recepta d’humus). Desa una còpia d'aquest arxiu a l'ordinador, el necessitaràs per als exercicis més endavant. El cos d'aquest document actualment conté diversos elements de contingut, que no estan marcats de cap manera, però estan separats per salts de línia (Intro/Retorn picat per a passar a la línia següent).</p> + +<p>No obstant això, quan obres el document en el navegador, observa que el text apareix com gran garbuix!</p> + +<p><img alt="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it." src="https://mdn.mozillademos.org/files/12972/text-no-formatting.png" style="display: block; height: 420px; margin: 0px auto; width: 594px;"></p> + +<p>Això és perquè no hi ha elements que donin estructura als continguts, de manera que el navegador no sap què és un títol i què és un paràgraf. A més:</p> + +<ul> + <li>Els usuaris que busquen en una pàgina web tendeixen a fer-hi una ullada ràpida per a trobar contingut rellevant, sovint només llegint les capçaleres, per començar (<a class="external external-icon" href="http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/">solen passar molt poc temps en una pàgina web</a>). Si no poden veure res útil en uns pocs segons, és probable que se sentin frustrats i vagin a un altre lloc.</li> + <li>Els motors de cerca que indexen les pàgines consideren el contingut dels títols paraules clau importants, que influeixen en la posició de cerca de les pàgines. Sense títols, la vostra pàgina funcionarà malament en termes d’optimització dels motors de cerca (<em>search engine optimization</em>, o {{glossary( "SEO")}}).</li> + <li>Les persones amb discapacitats visuals greus sovint no llegeixen les pàgines web; en lloc d’això, les escolten. Això es fa amb una aplicació de programari anomenada <a class="external external-icon" href="https://ca.wikipedia.org/wiki/Lector_de_pantalla" title="screen readers">lector de pantalla</a>. Aquesta aplicació proporciona maneres d'obtenir un accés ràpid al contingut del text. Entre les diferents tècniques que s’utilitzen, proporcionen un esquema del document a partir de la lectura dels títols, que permet als usuaris trobar la informació que necessiten ràpidament. Si els títols no estan disponibles, es veuen obligats a escoltar tot el document llegit en veu alta.</li> + <li>Per a aplicar estil al contingut amb {{glossary( "CSS")}} o per a fer-li fer coses interessants amb {{glossary("JavaScript")}}, cal tenir elements que delimitin el contingut rellevant, de manera que CSS/JavaScript els puguin localitzar.</li> +</ul> + +<p>Per tant, hem de donar al nostre contingut un etiquetatge estructural.</p> + +<h3 id="Aprenentatge_actiu_donar_estructura_als_continguts">Aprenentatge actiu: donar estructura als continguts</h3> + +<p>Passem directament a un exemple en viu. En l'exemple següent, afegim elements al text sense format en el requadre d’entrada perquè en el requadre de sortida aparegui com un títol i dos paràgrafs.</p> + +<p>Si t’equivoques, sempre pots tornar a començar amb el botó de reinici. Si t’encalles, fes clic al botó <em>Mostra la solució</em> per veure la resposta.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 100px; width: 95%">My short story I am a statistician and my name is Trish. + +My legs are made of cardboard and I am married to a fish.</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<h1>My short story</h1>\n<p>I am a statistician and my name is Trish.</p>\n<p>My legs are made of cardboard and I am married to a fish.</p>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 500) }}</p> + +<h3 id="Per_què_cal_semàntica">Per què cal semàntica?</h3> + +<p>Tot al nostre entorn compta amb la semàntica; comptem amb l'experiència prèvia per a conèixer la funció dels objectes quotidians; quan veiem una cosa, sabem quina és la seva funció. Així, per exemple, esperem que un semàfor en vermell tingui el sentit de «parar», i un semàfor en verd signifiqui «continuar». Si apliquem malament la semàntica, les coses poden complicar-se ràpidament (hi ha cap país en què el vermell signifiqui «continuar»? Esperem que no!).</p> + +<p>En una línia similar, ens hem d’assegurar que utilitzem els elements correctes per a donar al nostre contingut el significat, la funció o l’aspecte correctes. En aquest context, l'element {{htmlelement("h1")}} és també un element semàntic, que dona al text al qual delimita la funció (o el sentit) d'un «nivell superior en la capçalera de la teva pàgina».</p> + +<pre class="brush: html notranslate"><h1>This is a top level heading</h1></pre> + +<p>Per defecte, el navegador hi donarà una mida de cos de lletra gran perquè es vegi com un títol d’encapçalament (encara que amb CSS podries aplicar-hi estil perquè tingui l’aspecte que vulguis). I encara és més important el fet que el seu valor semàntic s’utilitzarà de diverses maneres, per exemple, l’empraran els motors de cerca i els lectors de pantalla (com hem esmentat abans).</p> + +<p>D'altra banda, tu pots fer que qualsevol element sembli un títol de nivell superior. Considera el codi següent:</p> + +<pre class="brush: html notranslate"><span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span></pre> + +<p>Aquest és un element {{htmlelement("span")}}. No té semàntica. Es fa servir per a delimitar el contingut quan vols aplicar-hi CSS (o fer alguna cosa amb JavaScript) sense donar-hi cap significat addicional (en trobaràs més informació més endavant en el curs). Hi hem aplicat una mica de CSS perquè es vegi com un títol de nivell superior, però ja que no té valor semàntic, no aconseguirà cap dels beneficis addicionals que hem esmentat abans. És bo emprar l'element HTML que correspon a cada funció.</p> + +<h2 id="Llistes">Llistes</h2> + +<p>Ara centrarem la nostra atenció en les llistes. Les llistes estan per tot arreu en la vida, de la llista de la compra a la llista de carrers que seguim subconscientment per a arribar a casa cada dia, a les llistes d'instruccions que segueixes en aquests tutorials! Les llistes també estan pertot arreu al web, i n’hi ha tres tipus diferents dels quals ens volem ocupar.</p> + +<h3 id="No_ordenades">No ordenades</h3> + +<p>Les llistes no ordenades s'utilitzen per a marcar les llistes d'elements en què l'ordre dels elements no és important; com a exemple, farem una llista de la compra.</p> + +<pre class="notranslate">milk +eggs +bread +hummus</pre> + +<p>Totes les llistes no ordenades comencen amb un element {{htmlelement("ul")}} que delimita tots els elements de la llista:</p> + +<pre class="brush: html notranslate"><ul> +milk +eggs +bread +hummus +</ul></pre> + +<p>L'últim pas consisteix a delimitar cada element de la llista amb un element {{htmlelement("li")}} (element de llista):</p> + +<pre class="brush: html notranslate"><ul> + <li>milk</li> + <li>eggs</li> + <li>bread</li> + <li>hummus</li> +</ul></pre> + +<h4 id="Aprenentatge_actiu_etiquetatge_duna_llista_no_ordenada">Aprenentatge actiu: etiquetatge d'una llista no ordenada</h4> + +<p>Modifica l'exemple en viu a continuació per a crear la teva llista HTML no ordenada pròpia.</p> + +<div class="hidden"> +<h6 id="Playable_code_2">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 100px; width: 95%">milk +eggs +bread +hummus</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<ul>\n<li>milk</li>\n<li>eggs</li>\n<li>bread</li>\n<li>hummus</li>\n</ul>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', 700, 400) }}</p> + +<h3 id="Ordenades">Ordenades</h3> + +<p>Les llistes ordenades són llistes en què l'ordre dels elements és important. Com a exemple, prendrem un seguit d’instruccions per a arribar a una adreça:</p> + +<pre class="notranslate">Drive to the end of the road +Turn right +Go straight across the first two roundabouts +Turn left at the third roundabout +The school is on your right, 300 meters up the road</pre> + +<p>L'estructura de l’etiquetatge és la mateixa que per a les llistes no ordenades, excepte que cal delimitar els elements de la llista amb un element {{htmlelement("ol")}}, en lloc d’amb un element <code><ul></code>:</p> + +<pre class="brush: html notranslate"><ol> + <li>Drive to the end of the road</li> + <li>Turn right</li> + <li>Go straight across the first two roundabouts</li> + <li>Turn left at the third roundabout</li> + <li>The school is on your right, 300 meters up the road</li> +</ol></pre> + +<h4 id="Aprenentatge_actiu_etiquetatge_duna_llista_ordenada">Aprenentatge actiu: etiquetatge d'una llista ordenada</h4> + +<p>Modifica l'exemple en viu a continuació per a crear la teva llista HTML ordenada pròpia.</p> + +<div class="hidden"> +<h6 id="Playable_code_3">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 200px; width: 95%">Drive to the end of the road +Turn right +Go straight across the first two roundabouts +Turn left at the third roundabout +The school is on your right, 300 meters up the road</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<ol>\n<li>Drive to the end of the road</li>\n<li>Turn right</li>\n<li>Go straight across the first two roundabouts</li>\n<li>Turn left at the third roundabout</li>\n<li>The school is on your right, 300 meters up the road</li>\n</ol>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_3', 700, 500) }}</p> + +<h3 id="Aprenentatge_actiu_etiquetatge_de_la_teva_pàgina_de_receptes">Aprenentatge actiu: etiquetatge de la teva pàgina de receptes</h3> + +<p>En aquest punt de l'article ja tens tota la informació que necessites per a marcar el teu exemple d’una pàgina de receptes. Pots optar per desar una còpia local del nostre arxiu d'inici <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> i fer la feina allà, o fer-ho en l'exemple editable a continuació. Fer-ho de manera local probablement serà millor, perquè aleshores podràs desar la feina que hi facis, mentre que si treballes en l'exemple editable, la perdràs la vegada següent que obris la pàgina. Totes dues coses tenen pros i contres.</p> + +<div class="hidden"> +<h6 id="Playable_code_4">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 200px; width: 95%">Quick hummus recipe + + This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years. + + Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads. + + Ingredients + + 1 can (400g) of chick peas (garbanzo beans) + 175g of tahini + 6 sundried tomatoes + Half a red pepper + A pinch of cayenne pepper + 1 clove of garlic + A dash of olive oil + + Instructions + + Remove the skin from the garlic, and chop coarsely + Remove all the seeds and stalk from the pepper, and chop coarsely + Add all the ingredients into a food processor + Process all the ingredients into a paste + If you want a coarse "chunky" hummus, process it for a short time + If you want a smooth hummus, process it for a longer time + + For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you. + + Storage + + Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you've made it. If it starts to become fizzy, you should definitely discard it. + + Hummus is suitable for freezing; you should thaw it and use it within a couple of months.</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<h1>Quick hummus recipe</h1>\n\n<p>This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.</p>\n\n<p>Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.</p>\n\n<h2>Ingredients</h2>\n\n<ul>\n<li>1 can (400g) of chick peas (garbanzo beans)</li>\n<li>175g of tahini</li>\n<li>6 sundried tomatoes</li>\n<li>Half a red pepper</li>\n<li>A pinch of cayenne pepper</li>\n<li>1 clove of garlic</li>\n<li>A dash of olive oil</li>\n</ul>\n\n<h2>Instructions</h2>\n\n<ol>\n<li>Remove the skin from the garlic, and chop coarsely.</li>\n<li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>\n<li>Add all the ingredients into a food processor.</li>\n<li>Process all the ingredients into a paste.</li>\n<li>If you want a coarse "chunky" hummus, process it for a short time.</li>\n<li>If you want a smooth hummus, process it for a longer time.</li>\n</ol>\n\n<p>For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.</p>\n\n<h2>Storage</h2>\n\n<p>Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you\'ve made it. If it starts to become fizzy, you should definitely discard it.</p>\n\n<p>Hummus is suitable for freezing; you should thaw it and use it within a couple of months.</p>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_4', 700, 500) }}</p> + +<p>Si t’encalles, sempre es pot prémer el botó <em>Mostra la solució</em> o fer un cop d'ull al nostre exemple <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html">text-complete.html</a> que trobaràs en el nostre repositori de GitHub.</p> + +<h3 id="Llistes_imbricades">Llistes imbricades</h3> + +<p>És perfectament correcte imbricar una llista dins d'una altra. És possible que vulguis tenir subvinyetes sota d’una vinyeta de nivell superior. Considera la segona llista del nostre exemple recepta:</p> + +<pre class="brush: html notranslate"><ol> + <li>Remove the skin from the garlic, and chop coarsely.</li> + <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li> + <li>Add all the ingredients into a food processor.</li> + <li>Process all the ingredients into a paste.</li> + <li>If you want a coarse "chunky" humous, process it for a short time.</li> + <li>If you want a smooth humous, process it for a longer time.</li> +</ol> </pre> + +<p>Atès que les dues últimes vinyetes estan molt estretament relacionades amb l'anterior (es llegeixen com a subinstruccions o opcions que s'ajusten per sota d'aquesta vinyeta), podria tenir sentit imbricar-les en una llista desordenada pròpia i posar aquesta llista dins de la quarta vinyeta. Es veuria així:</p> + +<pre class="brush: html notranslate"><ol> + <li>Remove the skin from the garlic, and chop coarsely.</li> + <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li> + <li>Add all the ingredients into a food processor.</li> + <li>Process all the ingredients into a paste. + <ul> + <li>If you want a coarse "chunky" humous, process it for a short time.</li> + <li>If you want a smooth humous, process it for a longer time.</li> + </ul> + </li> +</ol></pre> + +<p>Torna a l'exemple de l'aprenentatge actiu anterior i modifica la segona llista de la mateixa manera.</p> + +<h2 id="Èmfasi_i_importància">Èmfasi i importància</h2> + +<p>En el llenguatge humà, sovint destaquem certes paraules per a alterar el significat d'una oració, i moltes vegades volem ressaltar certes paraules perquè són importants o perquè són diferents d'alguna manera. HTML proporciona diversos elements semàntics que permeten destacar el contingut textual amb aquesta finalitat, i en aquest apartat en veurem alguns dels més comuns.</p> + +<h3 id="Èmfasi">Èmfasi</h3> + +<p>Quan en el llenguatge parlat volem donar èmfasi, accentuem certes paraules de manera que n’alterem subtilment el significat. De la mateixa manera, en el llenguatge escrit tendim a posar en cursiva les paraules que volem emfatitzar. Per exemple, les dues frases següents tenen significats diferents.</p> + +<p>I am glad you weren't late.</p> + +<p>I am <em>glad</em> you weren't <em>late</em>.</p> + +<p>La primera frase expressa alleujament autèntic perquè la persona no arriba tard. Per contra, la segona sona amb sarcasme o agressivitat passiva, que expressa enuig perquè la persona arriba una mica tard.</p> + +<p>En HTML s'utilitza l'element {{htmlelement("em")}} (èmfasi) per marcar aquests casos. Alhora que fa que el document sigui més interessant de llegir, els lectors de pantalla reconeixen aquests elements i hi incorporen un to de veu parlat diferent. Els navegadors hi apliquen per defecte l’estil de lletra cursiva, però aquesta etiqueta no és l’única que podem usar per a donar un estil de lletra cursiva. Per a això també podem utilitzar un element {{htmlelement("span")}} i una mica de CSS, o potser un element {{htmlelement("i")}} (veure més endavant).</p> + +<pre class="brush: html notranslate"><p>I am <em>glad</em> you weren't <em>late</em>.</p></pre> + +<h3 id="Importància_forta">Importància forta</h3> + +<p>Per a destacar la importància de les paraules, en el llenguatge parlat tendim a accentuar-les, i en el llenguatge escrit les posem en lletra negreta. Per exemple:</p> + +<p>This liquid is <strong>highly toxic</strong>.</p> + +<p>I am counting on you. <strong>Do not</strong> be late!</p> + +<p>En HTML s'utilitza l'element {{htmlelement("strong")}} (importància forta) per a destacar aquests casos. A mes de fer el document més útil, de nou els lectors de pantalla reconeixen aquests elements i hi apliquen un to de veu diferent. L'estil per defecte que els navegadors apliquen a aquest text és la lletra negreta, però aquesta etiqueta no és l’única que podem usar per a aplicar l’estil de lletra negreta. Per a això també podem utilitzar un element {{htmlelement("span")}} i una mica de CSS, o potser un element {{htmlelement("b")}} (veure més endavant).</p> + +<pre class="brush: html notranslate"><p>This liquid is <strong>highly toxic</strong>.</p> + +<p>I am counting on you. <strong>Do not</strong> be late!</p></pre> + +<p>Pots imbricar etiquetes d’importància i èmfasi les unes dins de les altres, si ho vols:</p> + +<pre class="brush: html notranslate"><p>This liquid is <strong>highly toxic</strong> — +if you drink it, <strong>you may <em>die</em></strong>.</p></pre> + +<h3 id="Aprenentatge_actiu_ser_important!">Aprenentatge actiu: ser important!</h3> + +<p>En aquesta secció d'aprenentatge actiu, et proporcionem un exemple editable. Per a adquirir una mica de pràctica, afegeix èmfasi i importància a les paraules que penses que ho necessiten.</p> + +<div class="hidden"> +<h6 id="Playable_code_5">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 200px; width: 95%"><h1>Important notice</h1> +<p>On Sunday January 9th 2010, a gang of goths were + spotted stealing several garden gnomes from a + shopping center in downtown Milwaukee. They were + all wearing green jumpsuits and silly hats, and + seemed to be having a whale of a time. If anyone + has any information about this incident, please + contact the police now.</p></textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<h1>Important notice</h1>\n<p>On <strong>Sunday January 9th 2010</strong>, a gang of <em>goths</em> were spotted stealing <strong><em>several</em> garden gnomes</strong> from a shopping center in downtown <strong>Milwaukee</strong>. They were all wearing <em>green jumpsuits</em> and <em>silly hats</em>, and seemed to be having a whale of a time. If anyone has <strong>any</strong> information about this incident, please contact the police <strong>now</strong>.</p>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_5', 700, 500) }}</p> + +<h3 id="Cursiva_negreta_subratllat..."><span class="short_text" id="result_box" lang="ca"><span>Cursiva,</span> <span>negreta</span><span>, subratllat</span><span>...</span></span></h3> + +<p>Els elements que hem tractat fins ara tenen una semàntica associada clara. La situació amb {{htmlelement("b")}}, {{htmlelement("i")}} i {{htmlelement("u")}} és una mica més complicada. Van arribar perquè la gent pogués escriure text en negreta, cursiva o subratllat en una època en què el CSS encara era poc compatible, o gens en absolut. Elements com aquests només afecten la presentació, però no la semàntica; es coneixen com <strong>elements de presentació</strong> i ja no s'haurien d'utilitzar perquè, com hem vist, la semàntica és molt important per a l'accessibilitat, el posicionament SEO, etc.</p> + +<p>HTML5 va redefinir les etiquetes <code><b></code>, <code><i></code> i <code><u></code> amb funcions semàntiques noves, que tanmateix resulten un xic confuses.</p> + +<p>Aquesta és la millor regla d'or: només és apropiat utilitzar <code><b></code>, <code><i></code> o <code><u></code> quan es vol transmetre un significat que tradicionalment s’ha expressat amb lletra negreta, cursiva o subratllat, si no hi ha cap element més adequat. No obstant això, sempre continua sent crític mantenir una mentalitat d'accessibilitat. El concepte de cursiva no és gaire útil per a les persones que utilitzen lectors de pantalla, ni per a les persones que utilitzen un sistema d'escriptura que no sigui l'alfabet llatí.</p> + +<ul> + <li>{{HTMLElement('i')}} s'utilitza per a transmetre un significat que tradicionalment s’ha transmès en lletra cursiva: paraules estrangeres, denominacions taxonòmiques, termes tècnics, un pensament...</li> + <li>{{HTMLElement('b')}} s'utilitza per a transmetre un significat que tradicionalment s’ha transmès en lletra negreta: paraules clau, noms de productes, frases importants...</li> + <li>{{HTMLElement('u')}} s'utilitza per a transmetre un significat que tradicionalment s’ha transmès en lletra subratllat: noms propis, faltes d'ortografia...</li> +</ul> + +<div class="note"> +<p>Una advertència amable sobre el subratllat: <strong>la gent associa en gran mesura el subratllat amb els hipervincles</strong>. Per tant, a la web, és millor posar en subratllat només els enllaços. Utilitza l'element <code><u></code> quan sigui semànticament apropiat, però considera l'ús de CSS per a canviar el valor per omissió del subratllat per alguna cosa més apropiada en la web. L’exemple següent il·lustra com es pot fer:</p> +</div> + +<pre class="brush: html notranslate"><!-- scientific names --> +<p> + The Ruby-throated Hummingbird (<i>Archilocus colubris</i>) + is the most common hummingbird in Eastern North America. +</p> + +<!-- foreign words --> +<p> + The menu was a sea of exotic words like <i lang="uk-latn">vatrushka</i>, + <i lang="id">nasi goreng</i> and <i lang="fr">soupe à l'oignon</i>. +</p> + +<!-- a known misspelling --> +<p> + Someday I'll learn how to <u>spel</u> better. +</p> + +<!-- Highlight keywords in a set of instructions --> +<ol> + <li> + <b>Slice</b> two pieces of bread off the loaf. + </li> + <li> + <b>Insert</b> a tomato slice and a leaf of + lettuce between the slices of bread. + </li> +</ol></pre> + +<h2 id="Resum">Resum</h2> + +<p>Això és tot per ara! Aquest article t’hauria d’haver donat una idea prou bona de com començar a marcar text en HTML i presentat alguns dels elements més importants en aquest àmbit. Hi ha molts més elements semàntics per a exposar en aquest àmbit, i en veurem molts més en el nostre article «Format de text avançat», més endavant en el curs. En el proper article, veurem amb detall com crear hipervincles, possiblement l'element més important en la web.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/ca/learn/html/introducció_al_html/format_de_text_avançat/index.html b/files/ca/learn/html/introducció_al_html/format_de_text_avançat/index.html new file mode 100644 index 0000000000..8163f0b4c3 --- /dev/null +++ b/files/ca/learn/html/introducció_al_html/format_de_text_avançat/index.html @@ -0,0 +1,677 @@ +--- +title: Format de text avançat +slug: Learn/HTML/Introducció_al_HTML/Format_de_text_avançat +tags: + - Beginner + - CodingScripting + - Guide + - HTML + - Learn + - Text + - abbreviation + - description list + - quote + - semantic +translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">Hi ha molts altres elements en HTML per a la formatació del text, que no hem vist en l'article sobre els <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Fonaments_de_text_HTML">elements bàsics de text HTML</a>. Els elements que es descriuen en aquest article són menys coneguts, però són útils de conèixer (i això no és encara en absolut una llista completa). Aquí aprendreu sobre l’etiquetatge de les citacions, de les llistes de descripció, del codi d'ordinador i altres textos relacionats, dels subíndexs i superíndexs, de la informació de contacte, i de molt més.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td>Familiarització amb els elements bàsics de l’HTML, com es tracten en <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Getting_started">iniciació a l’HTML</a>. Aplicació de format a textos amb HTML, com s'explica en els <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Fonaments_de_text_HTML">Elements bàsics de text en HTML</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td><span id="result_box" lang="ca"><span class="alt-edited">Aprendre a utilitzar elements HTML menys coneguts per a etiquetar característiques semàntiques avançades.</span></span></td> + </tr> + </tbody> +</table> + +<h2 id="Llistes_de_descripció">Llistes de descripció</h2> + +<p>En els elements bàsics de text en HTML, hem fet camí pels <a href="https://wiki.developer.mozilla.org/ca/docs/Learn/HTML/Introducci%C3%B3_al_HTML/Fonaments_de_text_HTML#Llistes">elements d’etiquetatge bàsics de les llistes</a> en HTML, però no hem esmentat un tercer tipus de llistes amb que et pots topar de tant en tant, les llistes de descripció. El propòsit d'aquestes llistes és etiquetar un conjunt d'elements i les descripcions associades a aquests, com ara termes i definicions, o preguntes i respostes. Vegem un exemple d'un conjunt de termes i definicions:</p> + +<pre class="notranslate">soliloquy +In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.) +monologue +In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present. +aside +In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of addtional background information</pre> + +<p>Les llistes de descripció utilitzen un etiquetatge diferent dels altres tipus de llistes, l’element {{htmlelement("dl")}}; a més, cada terme es delimita amb un element {{htmlelement("dt")}} (descripció del terme), i cada descripció es delimita amb un element {{htmlelement("dd")}} (definició de la descripció). Acabem d’etiquetar el nostre exemple:</p> + +<pre class="brush: html notranslate"><dl> + <dt>soliloquy</dt> + <dd>In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)</dd> + <dt>monologue</dt> + <dd>In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.</dd> + <dt>aside</dt> + <dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of addtional background information.</dd> +</dl></pre> + +<p>Els estils per defecte del navegador mostren els termes de les llistes de descripció sagnats en certa mesura respecte de les descripcions. Els estils de MDN segueixen aquesta convenció de bastant a prop, però a més, destaquen els termes amb lletra negreta.</p> + +<dl> + <dt>soliloquy</dt> + <dd>In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)</dd> + <dt>monologue</dt> + <dd>In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.</dd> + <dt>aside</dt> + <dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of addtional background information.</dd> +</dl> + +<p>Observa que pots tenir múltiples descripcions per a un mateix terme; per exemple:</p> + +<pre class="brush: html notranslate"><dl> + <dt>aside</dt> + <dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought, or piece of additional background information.</dd> + <dd>In writing, a section of content that is related to the current topic, but doesn't fit directly into the main flow of content so is presented nearby (often in a box off to the side.)</dd> +</dl></pre> + +<dl> + <dt>aside</dt> + <dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of addtional background information.</dd> + <dd>In writing, a section of content that is related to the current topic, but doesn't fit directly into the main flow of content so is presented nearby (often in a box off to the side.)</dd> +</dl> + +<h3 id="Aprenentatge_actiu_etiquetatge_dun_conjunt_de_definicions">Aprenentatge actiu: etiquetatge d'un conjunt de definicions</h3> + +<p>És l’hora de posar a prova la teva destresa amb les llistes de descripció; afegeix elements al text sense format en el camp d'entrada perquè aparegui com una llista de descripció en el camp de sortida. Si vols, pots fer servir termes i descripcions propis..</p> + +<p>Si t’equivoques, sempre pots tornar a començar amb el botó de <em>Reinicia</em>. Si t’encalles, fes clic al botó, <em>Mostra la solució</em> per veure la resposta.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 100px; width: 95%"> +Bacon +The glue that binds the world together. +Eggs +The glue that binds the cake together. +Coffee +The drink that gets the world running in the morning. +A light brown color.</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +const output = document.querySelector('.output'); +const code = textarea.value; +const userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +const htmlSolution = '<dl>\n <dt>Bacon</dt>\n <dd>The glue that binds the world together.</dd>\n <dt>Eggs</dt>\n <dd>The glue that binds the cake together.</dd>\n <dt>Coffee</dt>\n <dd>The drink that gets the world running in the morning.</dd>\n <dd>A light brown color.</dd>\n</dl>'; +const solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + + const front = (textarea.value).substring(0, caretPos); + const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Citacions">Citacions</h2> + +<p>L'HTML també disposa de característiques per a l’etiquetatge de cites; quin element s'utilitza depèn de si s’etiqueta en el nivell de bloc o es fa en el nivell de línia.</p> + +<h3 id="Elements_de_bloc_de_citació_blockquotes">Elements de bloc de citació (<em>blockquotes</em>)</h3> + +<p>Per a indicar que una secció de continguts de nivell de bloc (un paràgraf, diversos paràgrafs, una llista, etc.) se cita des d'un altre lloc l’has d’etiquetar amb un element {{HTMLElement("blockquote")}}, i has d’incloure en un atribut {{htmlattrxref("cite","blockquote")}} una URL que apunti cap a la font de la citació. Per exemple, la línia de codi següent es pren de la pàgina MDN: «L'element <code><blockquote></code>»:</p> + +<pre class="brush: html notranslate"><p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block +Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p></pre> + +<p>Per convertir això en una citació de bloc, has de fer això:</p> + +<pre class="brush: html notranslate"><blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"> + <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block + Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p> +</blockquote></pre> + +<p>L’estil per defecte del navegador mostra això com un paràgraf sagnat per indicar que es tracta d'una citació; MDN fa això, però també hi afegeix una mica més d'estil:</p> + +<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"> +<p>L'<strong>element HTML <code><blockquote></code></strong> (<em>o element de bloc de citació HTML</em>) indica que el text associat és una citació extensa.</p> +</blockquote> + +<h3 id="Elements_de_línia_de_citació">Elements de línia de citació</h3> + +<p>Els elements de línia de citació funcionen exactament de la mateixa manera, només que utilitzen l'element {{htmlelement("q")}}. Per exemple, l’etiquetatge que tens a continuació inclou una citació de la pàgina de MDN sobre <code><q></code>:</p> + +<pre class="brush: html notranslate"><p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended +for short quotations that don't require paragraph breaks.</q></p></pre> + +<p>L'estil per defecte del navegador mostra aquest text com un element normal posat entre cometes per a indicar que és una citació, com això:</p> + +<p>The quote element — <code><q></code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended for short quotations that don't require paragraph breaks.</q></p> + +<h3 id="Citacions_2">Citacions</h3> + +<p>El contingut de l'atribut {{htmlattrxref("cite","blockquote")}} sembla útil, però per desgràcia als navegadors, als lectors de pantalla, etc., no hi fan gaire. No hi ha manera d'aconseguir que el navegador mostri el contingut de <code>cite</code> sense necessitat d'escriure una solució pròpia amb JavaScript o CSS. Si vols que la font de la citació estigui disponible a la pàgina, la millor manera és etiquetar-la amb l'element {{HTMLElement("cite")}} al costat de l'element <code>quote</code>. Això serveix en realitat per a incloure el nom de la font de la citació, és a dir, el nom del llibre o el de la persona de qui és el text que se cita; però no hi ha cap raó per la qual el text no es pugui associar d'alguna manera la font de la cita dins de <code><cite></code>:</p> + +<pre class="brush: html notranslate"><p>According to the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"> +<cite>MDN blockquote page</cite></a>: +</p> + +<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"> + <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block + Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p> +</blockquote> + +<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended +for short quotations that don't require paragraph breaks.</q> -- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"> +<cite>MDN q page</cite></a>.</p></pre> + +<p>Les citacions tenen l'estil en cursiva per defecte.</p> + +<p>{{EmbedLiveSample('Citations', '100%', '179px', '', '', 'hide-codepen-jsfiddle')}}</p> + +<h3 id="Aprenentatge_actiu_Qui_ha_dit_això">Aprenentatge actiu: Qui ha dit això?</h3> + +<p>Temps per a un altre exemple d'aprenentatge actiu! En aquest exemple ens agradaria:</p> + +<ol> + <li>Convertir el paràgraf del mig en un bloc de citació que inclogui un atribut <code>cite</code>.</li> + <li>Convertir una part del tercer paràgraf en una citació de línea que inclogui un atribut <code>cite</code>.</li> + <li>Incloure un element <code><cite></code> per a cada citació</li> +</ol> + +<p>Cerca a Internet per trobar fonts de citacions apropiades.</p> + +<p>Si t’equivoques, sempre pots tornar a l’inici amb el botó de <em>Reinicia</em>. Si t’encalles, fes clic al botó <em>Mostra la solució</em> per veure la resposta.</p> + +<div class="hidden"> +<h6 id="Playable_code_2">Playable code 2</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 150px; width: 95%"> +<p>Hello and welcome to my motivation page. As Confucius' quotes site says:</p> +<p>It does not matter how slowly you go as long as you do not stop.</p> +<p>I also love the concept of positive thinking, and The Need To Eliminate Negative Self Talk (as mentioned in Affirmations for Positive Thinking.)</p> +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +const output = document.querySelector('.output'); +const code = textarea.value; +const userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +const htmlSolution = '<p>Hello and welcome to my motivation page. As <a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>Confucius\' quotes site</cite></a> says:</p>\n\n<blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html">\n <p>It does not matter how slowly you go as long as you do not stop.</p>\n</blockquote>\n\n<p>I also love the concept of positive thinking, and <q cite="http://www.affirmationsforpositivethinking.com">The Need To Eliminate Negative Self Talk</q> (as mentioned in <a href="http://www.affirmationsforpositivethinking.com"><cite>Affirmations for Positive Thinking</cite></a>.)</p>'; +const solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + + const front = (textarea.value).substring(0, caretPos); + const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', 700, 500) }}</p> + +<h2 id="Abreviatures">Abreviatures</h2> + +<p>Un altre element força comú que et trobes quan et passeges per la web és {{HTMLElement ("abbr")}}. Aquesta etiqueta serveix per a delimitar una abreviatura o un acrònim i proporcionar el desenvolupament complet del terme (que s’inclou dins d'un atribut {{htmlattrxref("title")}}). Vegem-ne un parell d'exemples:</p> + +<pre class="notranslate"><p>We use <abbr title="Hypertext Markup Language">HTML</abbr> to structure our web documents.</p> + +<p>I think <abbr title="Reverend">Rev.</abbr> Green did it in the kitchen with the chainsaw.</p></pre> + +<p>Ve a ser una cosa com això (el desenvolupament apareix en un indicador de funció quan passes el cursor per sobre del terme):</p> + +<p>We use <abbr title="Hypertext Markup Language">HTML</abbr> to structure our web documents.</p> + +<p>I think <abbr title="Reverend">Rev.</abbr> Green did it in the kitchen with the chainsaw.</p> + +<div class="note"> +<p><strong>Nota</strong>: Hi ha un altre element, {{HTMLElement ("acronym")}}, que bàsicament fa el mateix que <code><abbr></code> i que estava destinat específicament als acrònims, en lloc de les abreviatures, però que ha caigut en desús; tampoc era compatible amb tots els navegadors, com ho és <code><abbr></code>, i com que les dues etiquetes tenen una funció tan similar, es va considerar inútil tenir-les totes dues. Per tant, fes servir només <code><abbr></code>.</p> +</div> + +<h3 id="Aprenentatge_actiu_etiquetatge_duna_abreviatura">Aprenentatge actiu: etiquetatge d'una abreviatura</h3> + +<p>Per a aquesta senzilla tasca d'aprenentatge actiu, només et proposem de fer l’etiquetatge d'una abreviatura. Pots utilitzar el nostre exemple a continuació, o substituir-lo per un de la teva elecció. </p> + +<div class="hidden"> +<h6 id="Playable_code_3">Playable code 3</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 50px; width: 95%"> +<p>NASA sure does some exciting work.</p> +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +const output = document.querySelector('.output'); +const code = textarea.value; +const userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +const htmlSolution = '<p><abbr title="National Aeronautics and Space Administration">NASA</abbr> sure does some exciting work.</p>'; +const solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + + const front = (textarea.value).substring(0, caretPos); + const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_3', 700, 350) }}</p> + +<h2 id="Etiquetatge_de_les_dades_de_contacte">Etiquetatge de les dades de contacte</h2> + +<p>HTML té un element per a etiquetar les teves dades de contacte: {{htmlelement("address")}}. Aquesta etiqueta senzillament delimita de les dades de contacte; per exemple:</p> + +<pre class="brush: html notranslate"><address> + <p>Chris Mills, Manchester, The Grim North, UK</p> +</address></pre> + +<p>També s'hi pot incloure marcatge més comples, i d'altres formes d'informació de contacte, com ara:</p> + +<pre class="brush: html notranslate line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>address</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span> + Chris Mills<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> + Manchester<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> + The Grim North<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> + UK + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>ul</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span>Tel: 01234 567 890<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>li</span><span class="punctuation token">></span></span>Email: me@grim-north.co.uk<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>li</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>ul</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>address</span><span class="punctuation token">></span></span></code></pre> + +<p><span class="tag token"><span class="punctuation token">Fixeu-vos que una cosa com la següent també seria vàlida, si la pàgina enllaçada contingués informació de contacte:</span></span></p> + +<pre class="brush: html notranslate line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>address</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Page written by <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>../authors/chris-mills/<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Chris Mills<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>a</span><span class="punctuation token">></span></span>.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>address</span><span class="punctuation token">></span></span></code></pre> + +<h2 id="Superíndex_i_subíndex">Superíndex i subíndex</h2> + +<p>De tant en tant hauràs d’utilitzar superíndex i subíndex per a etiquetar correctament elements com ara dates, fórmules químiques o equacions matemàtiques. Els elements {{htmlelement("sup")}} i {{htmlelement("sub")}} gestionen aquesta feina. Per exemple:</p> + +<pre class="brush: html notranslate"><p>My birthday is on the 25<sup>th</sup> of May 2001.</p> +<p>Caffiene's chemical formula is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p> +<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p></pre> + +<p>La sortida d'aquest codi és com això:</p> + +<p>My birthday is on the 25<sup>th</sup> of May 2001.</p> + +<p>Caffeine's chemical formula is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p> + +<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p> + +<h2 id="Representar_codi_informàtic">Representar codi informàtic</h2> + +<p>Hi ha una sèrie d'elements disponibles per a l’etiquetatge de codi informàtic:</p> + +<ul> + <li>{{htmlelement("code")}}: per a etiquetar peces genèriques de codi informàtic.</li> + <li>{{htmlelement("pre")}}: per a etiquetar blocs de text d'amplada fixa, en què es conserven els espais en blanc (en general, blocs de codi)</li> + <li>{{htmlelement("var")}}: per a etiquetar específicament els noms de variables.</li> + <li>{{htmlelement("kbd")}}: per a etiquetar entrades de teclat (i altres tipus d’entrades) a l'ordinador.</li> + <li>{{htmlelement("samp")}}: per a etiquetar la sortida d'un programa d'ordinador.</li> +</ul> + +<p>Vegem-ne uns exemples. Juga amb aquests exemples (fes una còpia del nostre arxiu d'exemple <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/other-semantics.html">other-semantics.html</a>):</p> + +<pre class="brush: html notranslate"><pre><code>var para = document.querySelector('p'); + +para.onclick = function() { + alert('Owww, stop poking me!'); +}</code></pre> + +<p>You shouldn't use presentational elements like <code>&lt;font&gt;</code> and <code>&lt;center&gt;</code>.</p> + +<p>In the above JavaScript example, <var>para</var> represents a paragraph element.</p> + + +<p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p> + +<pre>$ <kbd>ping mozilla.org</kbd> +<samp>PING mozilla.org (63.245.215.20): 56 data bytes +64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre></pre> + +<p>El codi anterior es veuria així:</p> + +<p>{{ EmbedLiveSample('Representar_codi_informàtic','100%',300) }}</p> + +<h2 id="Etiquetatge_dhores_i_dates">Etiquetatge d'hores i dates</h2> + +<p>HTML també proporciona l'element {{htmlelement("time")}} per a etiquetar les hores i les dates en un format llegible per la màquina. Per exemple:</p> + +<pre class="brush: html notranslate"><<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20<span class="pl-pds">"</span></span>>20 January 2016</<span class="pl-ent">time</span>></pre> + +<p>Per què és això útil? Bé, hi ha moltes maneres diferents d’escriure les dates. La data anterior es podria escriure de totes aquestes maneres:</p> + +<ul> + <li>20 January 2016</li> + <li>20th January 2016</li> + <li>Jan 20 2016</li> + <li>20/06/16</li> + <li>06/20/16</li> + <li>The 20th of next month</li> + <li><span lang="fr">20e Janvier 2016</span></li> + <li><span lang="ja">2016年1月20日</span></li> + <li><span lang="ja">And so on</span></li> +</ul> + +<p>Però els ordinadors no reconeixen fàcilment aquesta diversitat de formes. Si vols agafar automàticament les dates de tots els esdeveniments en una pàgina i inserir-los en un calendari, l'element {{htmlelement("time")}} et permet adjuntar una hora/data que una màquina podrà llegir inequívocament .</p> + +<p>L'exemple bàsic anterior proporciona una simple data llegible per una màquina, però hi ha moltes altres opcions que són possibles, per exemple:</p> + +<pre class="brush: html notranslate"><!-- Standard simple date --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20<span class="pl-pds">"</span></span>>20 January 2016</<span class="pl-ent">time</span>> +<!-- Just year and month --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01<span class="pl-pds">"</span></span>>January 2016</<span class="pl-ent">time</span>> +<!-- Just month and day --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>01-20<span class="pl-pds">"</span></span>>20 January</<span class="pl-ent">time</span>> +<!-- Just time, hours and minutes --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>19:30<span class="pl-pds">"</span></span>>19:30</<span class="pl-ent">time</span>> +<!-- You can do seconds and milliseconds too! --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span></span>19:30:01.856<span class="pl-s"><span class="pl-pds">"</span></span>>19:30:01.856</<span class="pl-ent">time</span>> +<!-- Date and time --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20T19:30<span class="pl-pds">"</span></span>>7.30pm, 20 January 2016</<span class="pl-ent">time</span>> +<!-- Date and time with timezone offset--> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20T19:30<span class="pl-pds">+01:00"</span></span>>7.30pm, 20 January 2016 is 8.30pm in France</<span class="pl-ent">time</span>> +<!-- Calling out a specific week number--> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-W04<span class="pl-pds">"</span></span>>The fourth week of 2016</<span class="pl-ent">time</span>></pre> + +<h2 id="Resum">Resum</h2> + +<p>Això marca el final del nostre estudi de la semàntica de text HTML. Tingues present que el que has vist durant aquest curs no és una llista exhaustiva dels elements de text HTML; només hem volgut exposar els elements essencials i alguns dels més comuns que et pots trobar, o si més no, que puguis trobar prou interessants. Per trobar més elements HTML pel camí, pots fer una ullada a la nostra <a href="/ca/docs/Web/HTML/Element">referència d'elements HTML</a> (la secció de la <a href="https://wiki.developer.mozilla.org/ca/docs/Web/HTML/Element#Sem%C3%A0ntica_de_text_en_l%C3%ADnia">semàntica de text en línia</a> seria un bon lloc per on començar). En l’article següent veurem els diversos elements HTML que s'usen per a estructurar les diferents parts d'un document HTML.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/ca/learn/html/introducció_al_html/getting_started/index.html b/files/ca/learn/html/introducció_al_html/getting_started/index.html new file mode 100644 index 0000000000..03b70effc6 --- /dev/null +++ b/files/ca/learn/html/introducció_al_html/getting_started/index.html @@ -0,0 +1,735 @@ +--- +title: Inici en HTML +slug: Learn/HTML/Introducció_al_HTML/Getting_started +tags: + - Attribute + - Beginner + - CodingScripting + - Comment + - Element + - Guide + - HTML + - entity reference + - whitespace +translation_of: Learn/HTML/Introduction_to_HTML/Getting_started +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">En aquest article exposarem els fonaments bàsics de l'HTML, perquè pugueu començar. Definirem els elements, els atributs i tots els altres termes importants que podeu haver sentit, i quina funció compleixen en el llenguatge. També us mostrarem com s'estructura un element HTML, com s'estructura una pàgina HTML típica, i explicarem altres característiques bàsiques importants del llenguatge. Pel camí, jugarem una mica amb l'HTML perquè mantinguis l'interès!</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td>Coneixements bàsics d'informàtica, <a href="/ca/docs/Learn/Getting_started_with_the_web/Instal·lació_bàsica_programari">programari bàsic instal·lat</a> i coneixements bàsics de <a href="/ca/docs/Learn/Getting_started_with_the_web/Tractar_amb_arxius">treballar amb arxius</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Familiaritzar-se amb el llenguatge HTML i obtenir una mica de pràctica escrivint elements HTML.</td> + </tr> + </tbody> +</table> + +<h2 id="Què_és_HTML">Què és HTML?</h2> + +<p>{{glossary("HTML")}} (HyperText Markup Language) no és un llenguatge de programació; és un <em>llenguatge de marcat</em>, que serveix per dir al teu navegador la manera d'estructurar les pàgines web que visites. Pot ser tan complicat o tan simple com el desenvolupador web desitgi que sigui. HTML consisteix en un seguit d'{{glossary("Element", "elements")}}, que s'utilitzen per tancar, delimitar o marcar diferents parts del contingut per fer que aparegui o actuï d'una manera determinada . Les {{glossary("Tag", "etiquetes")}} que el delimiten poden convertir un petit fragment de contingut en un enllaç que connecti amb una altra pàgina en la web, per a posar paraules en cursiva, i així successivament. Per exemple, prenguem la següent línia de contingut:</p> + +<pre class="notranslate">My cat is very grumpy</pre> + +<p>Si volem que la línia es mantingui independent, podem especificar que és un paràgraf delimitant-la amb un element d'etiqueta de paràgraf ({{htmlelement ("p")}}):</p> + +<pre class="brush: html notranslate"><p>My cat is very grumpy</p></pre> + +<h2 id="Anatomia_dun_element_HTML"><span id="result_box" lang="ca"><span>Anatomia</span> <span>d'un</span> <span>element</span> <span>HTML</span></span></h2> + +<p><span id="result_box" lang="ca"><span>Explorem una mica el nostre element paràgraf fins una mica més enllà</span>:</span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p> + +<p>Les parts principals del nostre element són:</p> + +<ol> + <li><strong>L'etiqueta d'obertura</strong>: Consisteix en el nom de l'element (en aquest cas, p), delimitat amb <strong>claus angulars</strong> d'obertura i tancament. Això indica on comença l'element, o comença a tenir efecte; en aquest cas és al començament del paràgraf.</li> + <li><strong>L'etiqueta de tancament</strong>: És la mateixa que l'etiqueta d'obertura, excepte que inclou una barra inclinada abans del nom de l'element. Això indica on acaba l'element; en aquest cas és al final del paràgraf. El fet de no incloure una etiqueta de tancament és un error de principiant comú, i pot conduir a resultats estranys.</li> + <li><strong>El contingut</strong>: És el contingut de l'element, que en aquest cas és només text.</li> +</ol> + +<p>L'element és l'etiqueta d'obertura, seguida del contingut, seguida de l'etiqueta de tancament.</p> + +<h3 id="Aprenentatge_actiu_crea_el_teu_primer_element_HTML">Aprenentatge actiu: crea el teu primer element HTML</h3> + +<p>Edita la línia següent en l'àrea d'<em>entrada</em> delimitant-la amb les etiquetes <code><em></code> i <code></em></code> (posa <code><em></code> abans d'<em>obrir l'element</em>, i <code></em></code> després, per <em>tancar l'element</em>); això hauria de donar una línia en cursiva! Pots veure els canvis actualitzats en viu en l'<em>àrea de sortida</em>.</p> + +<p>Si t’equivoques sempre pots tornar al codi anterior amb el botó de <em>Reinicia</em>. Si et quedes realment encallat, fes clic al botó <em>Mostra la solució</em> per veure la resposta.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"> + This is my text. +</textarea> + +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</pre> + +<pre class="brush: css notranslate">html { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +} +</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<em>This is my text.</em>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 300) }}</p> + +<h3 id="Niar_elements">Niar elements</h3> + +<p>També pots posar elements dins d'altres elements; això s’anomena <strong>imbricar</strong>. Si volem afirmar que el nostre gat està de <strong>molt</strong> mal humor, podem delimitar la paraula «molt» amb un element {{htmlelement("strong")}}, que significa que la paraula es destaca amb força:</p> + +<pre class="brush: html notranslate"><p>El meu gast està de <strong>molt</strong> mal humor.</p></pre> + +<p>No obstant això, us heu d’assegurar que els elements estan correctament imbricats: en l'exemple anterior en primer lloc hem obert l'element <code>p</code> i a continuació l'element <code>strong</code>; per tant, hem de tancar l'element <code>strong</code> en primer lloc i l’element <code>p</code> a continuació. Fer el següent és incorrecte:</p> + +<pre class="example-bad brush: html notranslate"><p>El meu gat està <strong>de molt mal humor.</p></strong></pre> + +<p><strong>Els elements s’han d’obrir obrir i tancar correctament de manera que estiguin clarament dins o fora l’un de l'altre</strong>. Si se superposen, com a dalt, llavors el teu navegador web tractarà de fer l’estimació que li sembli més correcta del que vols dir, i així es poden obtenir resultats inesperats.</p> + +<h3 id="Elements_de_bloc_i_elements_de_línia">Elements de bloc i elements de línia</h3> + +<p>Hi ha dues categories importants d'elements en HTML, que has de conèixer: els elements de bloc i els elements de línia.</p> + +<ul> + <li>Els elements de bloc formen un bloc visible en una pàgina; apareixen en una línia nova després de qualsevol contingut que en vagi davant, i qualsevol contingut que hi vagi després també apareixerà en una línia nova. Els elements de bloc tendeixen a ser elements estructurals de la pàgina. Representen, per exemple, paràgrafs, llistes, menús de navegació, peus de pàgina, etc. Un element de bloc no es pot imbricar dins d'un element de línia, però pot estar imbricat dintre d'un altre element de bloc.</li> + <li>Els elements de línia estan continguts dins d’elements de nivell de bloc i només delimiten petites parts del contingut del document, no paràgrafs sencers ni agrupacions de contingut. Un element de línia no fa aparèixer una línia nova en el document: normalment apareix dins d'un paràgraf de text, per exemple, un element {{htmlelement("a")}} (hipervincle), o elements d'èmfasi com {{htmlelement("em")}} o {{htmlelement("strong")}}.</li> +</ul> + +<p>Prenguem <span>l'exemple següent:</span></p> + +<pre class="brush: html notranslate"><em>first</em><em>second</em><em>third</em> + +<p>fourth</p><p>fifth</p><p>sixth</p> +</pre> + +<p>{{htmlelement("em")}} és un element de línia. Així, com es pot veure a continuació, els tres primers elements són a la mateixa línia l'un i l'altre, sense cap espai entre ells. D'altra banda, {{htmlelement("p")}} és un element de bloc, de manera que cada element apareix en una línia nova, amb un espai per sobre i per sota de cada un (L'espaiat es deu a l'<a href="/ca/docs/Learn/CSS/First_steps">aplicació d’estil CSS</a> que el navegador aplica als paràgrafs per defecte).</p> + +<p>{{ EmbedLiveSample('Elements_de_bloc_i_elements_de_línia', 700, 200) }}</p> + +<div class="note"> +<p><strong>Nota</strong>: HTML5 va redefinir les categories d'elements en HTML5: vegeu <a href="http://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories">Categories d'elements de contingut</a>. Si bé aquestes definicions són més precises i menys ambigües que les anteriors, són molt més complicades d'entendre que «de bloc» i «de línia», per la qual cosa ens quedarem amb aquestes al llarg d'aquest article.</p> +</div> + +<div class="note"> +<p><strong>Nota</strong>: Podeu trobar pàgines de referència útils que inclouen llistes d'elements de bloc i elements de línia; vegeu els <a href="/ca/docs/Web/HTML/Block-level_elements">elements de nivell de bloc</a> i els <a href="/ca/docs/Web/HTML/Elements_en_línia">elements de línia</a>.</p> +</div> + +<h3 id="Elements_buits">Elements buits</h3> + +<p>No tots els elements segueixen el patró anterior d'etiqueta d'obertura, contingut i etiqueta de tancament. Alguns elements consisteixen en una sola etiqueta, que normalment s'utilitza per inserir/incrustar alguna cosa en el document en el lloc on s'inclou. Per exemple, l'element {{htmlelement("img")}} insereix una imatge en una pàgina en la posició en què està inclosa:</p> + +<pre class="brush: html notranslate"><img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"></pre> + +<p>Aquesta sortida mostraria el següent a la vostra pàgina:</p> + +<p>{{ EmbedLiveSample('Elements_buits', 700, 300) }}</p> + +<div class="note"> +<p><strong>Nota</strong>: <span id="result_box" lang="ca"><span>Els</span> <span>elements</span> <span>buits</span> </span> també se'ls anomena de vegades <span lang="ca"> <em> (void elements</em>).</span></p> +</div> + +<h2 id="Atributs">Atributs</h2> + +<p>Els elements també poden tenir atributs, que tenen presenten l’aspecte següent:</p> + +<p><img alt='&lt;p class="editor-note">My cat is very grumpy&lt;/p>' src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p> + +<p>Els atributs contenen informació addicional sobre l'element que no vols que aparegui com a contingut. En aquest cas, l'atribut <code>class</code> permet donar a l'element un nom d'identificació que pot ser posteriorment utilitzat per l'element destí amb informació d'estil i altres coses.</p> + +<p>Un atribut ha de tenir:</p> + +<ol> + <li>Un espai entre ell i el nom de l'element (o l'atribut anterior, si l'element ja té un o més atributs.)</li> + <li>El nom de l'atribut, seguit d'un signe igual.</li> + <li>Un valor d'atribut, amb signes d'obertura i de tancament de cometes que el delimiten</li> +</ol> + +<h3 id="Aprenentatge_actiu_Afegir_atributs_a_un_element">Aprenentatge actiu: Afegir atributs a un element</h3> + +<p>Un altre exemple d'un element és {{HTMLElement ("a")}}; ve d’<em>anchor</em> i delimita la part del text que és un enllaç. Pot prendre un seguit d'atributs, però dos són els següents:</p> + +<ul> + <li><code>href</code>: Aquest atribut especifica, com a valor, l'adreça web que desitgeu que l'enllaç apunti; on el navegador es desplaçarà quan es fa clic a l'enllaç. Per exemple, <code>href="https://www.mozilla.org/"</code>.</li> + <li><code>title</code>: L'atribut <code>title</code> especifica informació addicional sobre l'enllaç, com quina és la pàgina que estem vinculant. Per exemple, <code>title="La pàgina web de Mozilla"</code>. Això apareixerà com un "tooltip" quan planegem per damunt.</li> + <li><code>target</code>: L'atribut <code>target</code> especifica el context de navegació que es farà servir per mostrar l'enllaç. Per exemple, <code>target="_blank"</code> mostrarà l'enllaç en una pestanya nova. Si vols que l'enllaç es mostri a la pestanya actual, omet l'atribut.</li> +</ul> + +<p>Edita la línia següent en l'àrea <em>Input</em> per convertir-la en un enllaç al teu lloc web favorit.</p> + +<ol> + <li>Afegeix l'element <code><a></code>.</li> + <li>Afegeix l'atribut <code>href</code>, i seguidament l'atribut <code>title</code>.</li> + <li>Especifica l'atribut <code>target</code> per obrir l'enllaç en una nova pestanya.</li> +</ol> + +<p>Observa els canvis actualitzats en directe a l'àrea <em>Output</em>. Hauries de veure un enllaç, que en passar-hi per sobre mostrarà el contingut de l'atribut <code>title</code>, i en clicar-hi, va a l'adreça web de l'element <code>href</code>. Recorda que has d’incloure un espai entre el nom de l'element i cada atribut.</p> + +<p>Si t’equivoques, sempre pots restablir el codi anterior amb el botó de reinici. Si et quedes realment encallat, fes clic al botó <em>Mostra la solució</em> per veure la solució.</p> + +<div class="hidden"> +<h6 id="Codi_executable_2">Codi executable 2</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 100px;width: 95%"> + &lt;p&gt;A link to my favorite website.&lt;/p&gt; +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<p>A link to my <a href="https://www.mozilla.org/" title="The Mozilla homepage" target="_blank">favorite website</a>.</p>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Codi_executable_2', 700, 300) }}</p> + +<h3 id="Atributs_booleans">Atributs booleans</h3> + +<p>De vegades veuràs atributs que estan escrits sense valors; això està perfectament permès. S’anomenen atributs booleans, i només poden tenir un valor, que és generalment el mateix que el nom de l'atribut. A tall d'exemple, preneu l'atribut {{htmlattrxref("disabled", "input")}}, que es pot assignar als elements d’entrada de dades d'un formulari, si voleu que estiguin desactivats (en gris) perquè l'usuari no hi pugui entrar cap dada. Per exemple,</p> + +<pre class="notranslate"><input type="text" disabled="disabled"></pre> + +<p>Com a forma abreujada, és perfectament admissible escriure-ho de la manera següent (també hem inclòs un element d’entrada de dades de formulari no desactivat com a referència, perquè tinguis una idea de què passa):</p> + +<pre class="brush: html notranslate"><input type="text" disabled> + +<input type="text"> +</pre> + +<p>Tots dos donaran una sortida com la següent:</p> + +<p>{{ EmbedLiveSample('Atributs_booleans', 700, 100) }}</p> + +<h3 id="Ometre_les_cometes_que_delimiten_els_valors_dels_atributs">Ometre les cometes que delimiten els valors dels atributs</h3> + +<p>Quan navegues per la web, et trobes amb tot tipus d'estils de marcat estranys, inclosos valors d'atributs sense cometes. Això és permissible en algunes circumstàncies, però en d'altres trencarà el codi de marcatge. Per exemple, si reprenem el nostre exemple d'enllaç d'abans, podem escriure una versió bàsica amb només l'atribut <code>href</code>, així:</p> + +<pre class="notranslate"><a href=https://www.mozilla.org/>favourite website</a> +</pre> + +<p>No obstant això, quan afegim a aquest estil l'atribut <code>title</code>, les coses no funcionen:</p> + +<pre class="brush: html notranslate"><a href=https://www.mozilla.org/ title=The Mozilla homepage>favourite website</a> +</pre> + +<p>En aquest punt, el navegador ha interpretat malament el marcatge perquè pensa que l'atribut <code>title</code> té en realitat tres atributs: un atribut <code>title</code> amb el valor «The», i dos atributs booleans, <code>Mozilla</code> i <code>homepage</code>. Això, òbviament, no és el que es pretenia, i causarà errors o un comportament inesperat en el codi, com es veu en l'exemple a continuació. Intenta passar sobre l'enllaç per veure quin és el títol del text!</p> + +<p>{{ EmbedLiveSample('Ometre_les_cometes_que_delimiten_els_valors_dels_atributs', 700, 100) }}</p> + +<p>Inclou sempre les cometes de l'atribut. Evita aquest tipus de problemes, i el codi resulta més llegible.</p> + +<h3 id="Cometes_simples_o_dobles">Cometes simples o dobles?</h3> + +<p>En aquest article t’adonaràs que els atributs estan delimitats per cometes dobles. No obstant això, és possible que vegis cometes simples en algun codi HTML. Això és purament una qüestió d'estil, i ets lliure d'escollir . Les dues línies següents són equivalents:</p> + +<pre class="brush: html notranslate"><a href="http://www.example.com">A link to my example.</a> + +<a href='http://www.example.com'>A link to my example.</a></pre> + +<p>Però t’has d’assegurar que no es barregen. El codi següent no et funcionarà!</p> + +<pre class="brush: html notranslate"><a href="http://www.example.com'>A link to my example.</a></pre> + +<p>Si has utilitzat un tipus de cometes en el codi HTML, pots fer servir l’altre tipus de cometes per als teus valors d’atribut sense tenir problemes:</p> + +<pre class="brush: html notranslate"><a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a></pre> + +<p>Ara bé, si vols imbricar cometes dins de cometes, i són iguals, has d’utilitzar {{anch ("Entitats de referències: incloent caràcters especials en HTML")}}. Per exemple, aquest marcatge trencarà el codi:</p> + +<pre class="example-bad brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">'</span>http://www.example.com<span class="punctuation token">'</span></span> <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">'</span>Isn<span class="punctuation token">'</span></span><span class="attr-name token">t</span> <span class="attr-name token">this</span> <span class="attr-name token">fun?'</span><span class="punctuation token">></span></span>A link to my example.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>a</span><span class="punctuation token">></span></span></code></pre> + +<p>Així, necessites fer el següent:</p> + +<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">'</span>http://www.example.com<span class="punctuation token">'</span></span> <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">'</span>Isn<span class="entity token" title="'">&#39;</span>t this fun?<span class="punctuation token">'</span></span><span class="punctuation token">></span></span>A link to my example.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>a</span><span class="punctuation token">></span></span></code></pre> + +<h2 id="Anatomia_dun_document_HTML">Anatomia d'un document HTML</h2> + +<p>Els elements HTML no són gaire útils per si mateixos. Ara veurem com els elements individuals es combinen per formar una pàgina HTML completa:</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My test page</title> + </head> + <body> + <p>This is my page</p> + </body> +</html></pre> + +<p>Aquí tenim:</p> + +<ol> + <li><code><!DOCTYPE html></code>: El tipus de document. Als inicis, quan HTML era jove (al voltant de 1991/1992), els <code>doctype</code> estaven destinats a actuar com enllaços cap a un conjunt de regles que la pàgina HTML havia de seguir per ser considerat un bon HTML, que podia significar la comprovació automàtica d'errors i altres coses útils. Solien ser alguna cosa com ara això: + + <pre class="notranslate"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></pre> + Avui dia són un llegat històric que cal incloure perquè tot funcioni. <code><!DOCTYPE html></code> és la cadena més curta de caràcters que es considera com un tipus de document vàlid. Això és tot el que realment et cal saber.</li> + <li><code><html></html></code>: L'element <code><html></code> delimita tot el contingut de la pàgina, i de vegades es coneix com l'element arrel.</li> + <li><code><head></head></code>: L'element <code><head></code> actua com un contenidor de totes les coses que vols incloure a la pàgina HTML, però que <strong>no són el contingut</strong> que vols mostrar als visitants de la teva pàgina. Això inclou coses com ara paraules clau i una descripció de la pàgina que vols que aparegui en els resultats de cerca, estil CSS per al teu contingut, declaracions de conjunts de caràcters, i més. N’aprendràs més en el proper article de la sèrie.</li> + <li><code><meta charset="utf-8"></code>: Aquest element especifica que el teu document utilitzarà el conjunt de caràcters <code>UTF-8</code>, que inclou la majoria dels caràcters de tots els idiomes humans escrits coneguts. Si ho poses, en essència pots gestionar qualsevol contingut textual possible. No hi ha cap raó per no establir-lo, i us pot ajudar a evitar alguns problemes més endavant.</li> + <li><code><title></title></code>: Estableix el títol de la pàgina, que és el títol que apareix a la pestanya del navegador quan carrega la pàgina, i s'utilitza per descriure la pàgina quan l’afegeixes als teus marcadors/favorits.</li> + <li><code><body></body></code>: Inclou <em>tot</em> el contingut que es mostra a la teva pàgina, ja sigui text, imatges, vídeos, jocs, reproducció de pistes d'àudio o qualsevol altra cosa.</li> +</ol> + +<h3 id="Aprenentatge_actiu_Afegir_característiques_a_un_document_HTML">Aprenentatge actiu: Afegir característiques a un document HTML</h3> + +<p>Si vols escriure una mica d'HTML en el teu ordinador local per a experimentar, pots:</p> + +<ol> + <li>Copiar l'exemple de la pàgina HTML que apareix a dalt.</li> + <li>Crear un arxiu nou a l'editor de text.</li> + <li>Enganxar el codi en l’arxiu nou de text.</li> + <li>Desar el fitxer com <code>index.html</code>.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: també pots trobar aquesta plantilla bàsica HTML en el <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">repositori Github de l’Àrea d’aprenentatge d’MDN</a>.</p> +</div> + +<p>Ara pots obrir aquest arxiu en un navegador web per veure quina aparença té el codi reproduït, i després editar el codi i actualitzar el navegador per veure quin n’és el resultat. Inicialment es veurà així:</p> + +<p><img alt="A simple HTML page that says This is my page" src="https://mdn.mozillademos.org/files/12279/template-screenshot.png" style="display: block; height: 365px; margin: 0px auto; width: 595px;">En aquest exercici pots editar el codi localment en el teu ordinador, com s’ha indicat abans, o pots editar-lo en la finestra de mostra editable a continuació (la finestra de mostra editable representa només el contingut de l'element <code><body></code>, en aquest cas). Intenta reproduir els passos següents:</p> + +<ul> + <li>Just a sota de l'etiqueta d'obertura <code><body></code>, afegeix un títol principal per al document. Haurà d’estar delimitat per una etiqueta <code><h1></code> d'obertura i una etiqueta <code></h1></code> de tancament.</li> + <li>Edita el contingut del paràgraf per a incloure-hi un text sobre alguna cosa que t’interessi.</li> + <li>Fes que qualsevol paraula important destaqui en negreta delimitant-la amb d'una etiqueta <code><strong></code> d'obertura i una etiqueta <code></strong</code>> de tancament</li> + <li>Afegeix un enllaç al paràgraf, <a href="https://wiki.developer.mozilla.org/ca/docs/Learn/HTML/Introducci%C3%B3_al_HTML/Getting_started#Aprenentatge_actiu_crea_el_teu_primer_element_HTML">com s'ha explicat abans en aquest mateix article</a>.</li> + <li>Afegeix una imatge al document, sota el paràgraf, com <a href="https://wiki.developer.mozilla.org/ca/docs/Learn/HTML/Introducci%C3%B3_al_HTML/Getting_started#Elements_buits">s'ha explicat abans en aquest mateix article</a>. Guanyaràs més punts si aconsegueixes enllaçar-lo a una imatge diferent (ja sigui de manera local a l'ordinador, o d’un altre lloc web.)</li> +</ul> + +<p>Si t’equivoques, sempre pots restablir el codi anterior amb el botó Reinicia. Si realment et quedes encallat, fes clic al botó <em>Mostra la solució</em> per veure la solució.</p> + +<div class="hidden"> +<h6 id="Codi_executable_3">Codi executable 3</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="min-height: 100px;width: 95%"> + &lt;p&gt;This is my page&lt;/p&gt; +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h1 { + color: blue; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +img { + max-width: 100%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +var htmlSolution = '<h1>Some music</h1><p>I really enjoy <strong>playing the drums</strong>. One of my favorite drummers is Neal Peart, who\ plays in the band <a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article">Rush</a>.\ My favourite Rush album is currently <a href="http://www.deezer.com/album/942295">Moving Pictures</a>.</p>\ <img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg">'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Codi_executable_3', 700, 600) }}</p> + +<h3 id="Els_espais_en_blanc_en_HTML">Els espais en blanc en HTML</h3> + +<p>Et deus haver adonat que en els exemples anteriors hi ha una gran quantitat d'espais en blanc i salts de línia en el codi; això no és necessari en absolut; els dos fragments de codi següents són equivalents:</p> + +<pre class="brush: html notranslate"><p>Dogs are silly.</p> + +<p>Dogs are + silly.</p></pre> + +<p>No importa la quantitat d'espais en blanc que utilitzis (pots incloure caràcters d'espai, però també salts de línia), l'intépret HTML ho redueix tot a un sol espai quan el codi es representa. Així, per què utilitzem tant els espais en blanc? La resposta és la llegibilitat.</p> + +<p>És molt més fàcil d'entendre què passa al teu codi si té un format endreçat, que no si està desordenat. En el nostre HTML, cada element imbricat té una sagnia de dos espais més respecte del que el conté. De tu depèn l'estil de format que utilitzis (el nombre d'espais per a cada nivell de sagnat, per exemple), però t’has de plantejar l'ús d'algun tipus de format.</p> + +<h2 id="Referències_a_entitats_inclusió_de_caràcters_especials_en_HTML">Referències a entitats: inclusió de caràcters especials en HTML</h2> + +<p>En HTML, els caràcters <code><</code>, <code>></code>,<code>"</code>,<code>'</code> i <code>&</code> són caràcters especials. Són parts de la sintaxi HTML en si; ara bé, com hem d’incloure un d'aquests caràcters en el text, per exemple, si realment volem emprar un <em>ampersand</em> (&) o el signe <em>menys que</em> (<), i que els navegadors no l'interpretin com codi?</p> + +<p>Hem d'utilitzar referències de caràcters, codis especials que representen caràcters i que es poden utilitzar en aquestes circumstàncies exactes. Tots els caràcters de referència s'inicien amb un signe (&) i acaben amb un punt i coma (;).</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Caràcter literal</th> + <th scope="col">Referència de caràcter equivalent</th> + </tr> + </thead> + <tbody> + <tr> + <td><</td> + <td>&lt;</td> + </tr> + <tr> + <td>></td> + <td>&gt;</td> + </tr> + <tr> + <td>"</td> + <td>&quot;</td> + </tr> + <tr> + <td>'</td> + <td>&apos;</td> + </tr> + <tr> + <td>&</td> + <td>&amp;</td> + </tr> + </tbody> +</table> + +<p>En el següent exemple, pots veure dos paràgrafs, que parlen sobre tecnologies web:</p> + +<pre class="brush: html notranslate"><p>In HTML, you define a paragraph using the <p> element.</p> + +<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p></pre> + +<p>A la sortida en directe que veus a continuació pots observar que el primer paràgraf ha anat malament perquè el navegador pensa que la segona instància de <p> inicia un paràgraf nou! El segon paràgraf es veu bé perquè hem reemplaçat els parèntesis angulars amb referències de caràcters.</p> + +<p>{{ EmbedLiveSample('Referències_a_entitats_inclusió_de_caràcters_especials_en_HTML', 700, 200) }}</p> + +<div class="note"> +<p><strong>Nota</strong>: <span id="result_box" lang="ca"><span>Un gràfic</span> <span>de totes</span> <span>les</span> <span>referències</span> <span>a entitats</span> <span>de caràcters</span> <span>HTML</span> <span>disponibles, es pot</span> <span>trobar</span> <span>en la Viquipèdia</span></span>: <a class="external text" href="http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references" rel="nofollow">Llista de XML i HTML de les referències a entitats de caràcters</a>.</p> +</div> + +<h2 id="Comentaris_HTML">Comentaris HTML</h2> + +<p>En HTML hi ha un mecanisme disponible per escriure comentaris en el codi. El navegador ignora els comentaris, i així també són invisibles per a l'usuari. E·l seu propòsit és permetre que puguis incloure comentaris en el codi per a aclarir-ne el funcionament, explicar què fan les diferents parts, etc. Això pot ser molt útil com a recordatori del treball que has fet si tornes a treballar en un codi amb què no has treballat durant 6 mesos; o si el lliures a una altra persona perquè hi treballi.</p> + +<p>Per a convertir en un comentari una secció de contingut del teu arxiu HTML, l’has de delimitar amb els marcadors especials <code><!--</code> i <code>--></code>. Per exemple:</p> + +<pre class="brush: html notranslate"><p>I'm not inside a comment</p> + +<!-- <p>I am!</p> --></pre> + +<p>Com pots veure a continuació, el primer paràgraf apareix a la sortida en directa, però el segon no ho fa.</p> + +<p>{{ EmbedLiveSample('Comentaris_HTML', 700, 100) }}</p> + +<h2 id="Resum">Resum</h2> + +<p>Has arribat al final de l'article! Esperem que hagis gaudit de la visita als conceptes bàsics d'HTML. En aquest punt, hauries de ser capaç d'entendre el llenguatge i com funciona en un nivell bàsic, i hauries de ser capaç d'escriure alguns elements i atributs. En els articles següents del mòdul ens introduirem amb més detall en algunes de les coses que ja has examinat, i introduirem algunes característiques noves del llenguatge.</p> + +<div class="note"> +<p><strong>Nota</strong>: En aquest punt, a mesura que comences a aprendre més sobre HTML, és possible que també vulguis començar a explorar els fonaments dels fulls d’estil e cascada (cascading style sheets o <a href="/ca/docs/Learn/CSS">CSS</a>). CSS és el llenguatge que s’utilitza per a aplicar estil a les teves pàgines web (per exemple, pots canviar el tipus de lletra o els colors, o alterar el disseny de pàgina). HTML i CSS van alhora, com descobriràs de seguida.</p> +</div> + +<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> diff --git a/files/ca/learn/html/introducció_al_html/index.html b/files/ca/learn/html/introducció_al_html/index.html new file mode 100644 index 0000000000..721a2795f5 --- /dev/null +++ b/files/ca/learn/html/introducció_al_html/index.html @@ -0,0 +1,65 @@ +--- +title: Introducció a l'HTML +slug: Learn/HTML/Introducció_al_HTML +tags: + - CodingScripting + - HTML + - Introduction to HTML + - Landing + - Links + - Structure + - Text + - head + - semantics +translation_of: Learn/HTML/Introduction_to_HTML +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">En el fons, {{glossary("HTML")}} és un llenguatge bastant simple compost d'<a href="/en-US/docs/Glossary/Element">elements</a>, que es poden aplicar a peces de text per donar-los significats diferents en un document (és un paràgraf? És una llista de vinyetes? és part d'una taula?), l'estructura d'un document en seccions lògiques (té una capçalera? tres columnes de contingut? un menú de navegació?) i inserir contingut com imatges i vídeos en una pàgina. Aquest mòdul us presentarà els dos primers d'aquests, i us introduirà en els conceptes fonamentals i la sintaxi que necessiteu saber per entendre HTML.</p> + +<h2 id="Requisits_previs">R<span id="result_box" lang="ca"><span>equisits</span> <span>previs</span></span></h2> + +<p>Abans d'iniciar aquest mòdul, no cal cap coneixement previ d'HTML, però heu de tenir almenys coneixements bàsics en l'ús d'ordinadors, i l'ús de la web de forma passiva (és a dir, simplement mirant, consumint el contingut.) Heu de tenir un entorn de treball bàsic configurat com es descriu en <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Instal.lació de programari bàsic</a>, i entendre com crear i administrar arxius, com es detalla en <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Tractar amb arxius</a> — tots dos són parts del nostre mòdul <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Introducció a la web</a> per a principiants.</p> + +<div class="note"> +<p><strong>Nota</strong>: Si esteu treballant en un ordinador/tauleta/altre dispositiu en el qual no teniu la capacitat de crear els vostres propis arxius, podeu provar (la majoria) els exemples de codi en un programa de codificació en línia, com ara JSBin o Thimble.</p> +</div> + +<h2 id="Guies">Guies</h2> + +<p>Aquest mòdul conté els següents articles, que us portaran a través de tota la teoria bàsica d'HTML, i oferint-vos una gran oportunitat per posar a prova algunes habilitats.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Introducció a HTML</a></dt> + <dd>Cobreix els fonaments absoluts d'HTML, perquè pugueu començar — definirem els elements, atributs i tots els altres termes importants que podeu haver sentit, i mostrarem on encaixen en el llenguatge. També us mostrarem com s'estructura un element HTML, com s'estructura una pàgina HTML típica, i explicarem altres importants característiques bàsiques del llenguatge. En el camí, jugarem amb una mica d'HTML, perquè t'interessi!</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Què hi ha en la capçalera? Metadades en HTML</a></dt> + <dd>La capçalera (head) d'un document HTML és la part que no es mostra en el navegador web quan es carrega la pàgina. Conté informació tal com el {{htmlelement("title")}} de la pàgina, enllaços a {{glossary("CSS")}} (si voleu donar estil el vostre contingut HTML amb CSS), enllaços a favicones personalitzats, i les metadades (que són dades sobre l'HTML, com qui el va escriure, i les paraules clau importants que descriuen el document.)</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fonaments de text HTML</a></dt> + <dd>Un dels treballs principals de l'HTML és donar significat al text (també conegut com la <strong>semàntica</strong>), de manera que el navegador sàpiga com mostrar-lo correctament. En aquest article s'analitza com usar HTML per dividir un bloc de text en una estructura d'encapçalats i paràgrafs, afegir èmfasis/importància a les paraules, crear llistes i molt més.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creació d'hipervincles</a></dt> + <dd>Els hipervincles són realment importants — són el que fan de la web un web. En aquest article es mostra la sintaxi necessària per fer un enllaç, i discuteix les millors pràctiques per als enllaços.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Format de text avançat</a></dt> + <dd>Hi ha molts altres elements en HTML per donar format al text, que no vam veure en l'article de <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">fonaments de text HTML</a>. Els elements que veurem aquí són menys coneguts, però encara així és útil conèixer-los. Aquí aprendreu sobre el marcatge de cites, llistes de descripció, codi de computadora i altre text relacionat, subíndexs i superíndexs, informació de contacte, i més.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document i estructura del lloc web</a></dt> + <dd>Així com es defineixen les parts individuals de la pàgina (per exemple, "un paràgraf" o "una imatge"), HTML també s'utilitza per definir les àrees del vostre lloc web (per exemple, "la capçalera", "el menú de navegació", "la columna de contingut principal"). En aquest article es reflexiona sobre com planificar una estructura bàsica del lloc web, i escriure el codi HTML per representar aquesta estructura.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Depuració HTML</a></dt> + <dd>Escriure HTML està molt bé, però què passa si alguna cosa va malament i no trobes on està l'error en el codi? Aquest article us donarà a conèixer algunes eines que poden ajudar-vos.</dd> +</dl> + +<h2 id="Avaluacions">Avaluacions</h2> + +<p>Les següents avaluacions posaran a prova la vostra comprensió dels conceptes bàsics d'HTML coberts en les guies anteriors.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marcatge d'una carta</a></dt> + <dd>Tots aprenem a escriure una carta, tard o d'hora; també és un exemple útil per posar a prova les vostres habilitats de format de text! Així que en aquesta avaluació se us donarà una carta per marcar.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Estructuració d'una pàgina de contingut</a></dt> + <dd>Aquesta avaluació posa a prova la vsotra capacitat d'utilitzar HTML per estructurar una simple pàgina de contingut, que conté una capçalera, peu de pàgina, el menú de navegació, contingut principal, i la barra lateral.</dd> +</dl> + +<h2 id="Veure_també">Veure també</h2> + +<dl> + <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Conceptes bàsics d'alfabetització Web 1</a></dt> + <dd>Un excel·lent curs de la fundació Mozilla que explora i posa a prova moltes de les habilitats parlades al mòdul <em>Introducció a HTML</em>. Els estudiants es familiaritzaran amb la lectura, l'escriptura i participació en la web en aquest mòdul de sis parts. Descobriran els fonaments del web a través de la producció i col·laboració.</dd> +</dl> diff --git a/files/ca/learn/html/introducció_al_html/marcatge_una_carta/index.html b/files/ca/learn/html/introducció_al_html/marcatge_una_carta/index.html new file mode 100644 index 0000000000..34647eb294 --- /dev/null +++ b/files/ca/learn/html/introducció_al_html/marcatge_una_carta/index.html @@ -0,0 +1,90 @@ +--- +title: Marcatge d'una carta +slug: Learn/HTML/Introducció_al_HTML/Marcatge_una_carta +tags: + - Assessment + - Beginner + - CodingScripting + - HTML + - Links + - Text + - head +translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">Tots aprenem a escriure una carta, tard o d'hora; també és un exemple útil per posar a prova les vostres habilitats de format de text! En aquesta avaluació, se us donarà una carta per al seu marcatge per posar a prova les habilitats bàsiques i avançades de format de text HTML, incloent hipervincles; a més, posareu a prova la vostra familiaritat amb alguns continguts HTML <head>.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits Previs:</th> + <td>Abans de procedir amb aquesta avaluació, ja hauríeu d'haver treballat <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Inici en HTML</a>, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Què hi ha en el head? Metadades in HTML</a>, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">fonaments de text HTML</a>, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Crear hipervincles</a>, i <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">format de text avançat</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Provar el format bàsic i avançat de text HTML i habilitats en hipervincles, i el coneixement del que succeeix en el codi HTML <head>.</td> + </tr> + </tbody> +</table> + +<h2 id="Punt_de_partida"><span class="short_text" id="result_box" lang="ca"><span>Punt de partida</span></span></h2> + +<p>Per obtenir aquesta avaluació inicial, cal anar i agafar el <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/letter-text.txt">text sense format que necessiteu per marcar</a>, i el <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/css.txt">CSS que cal incloure</a> en el codi HTML. Crear un nou arxiu <code>.html</code> amb el vostre editor de text per treballar-ho (o, alternativament, utilitzar un lloc com <a class="external external-icon" href="http://jsbin.com/">JSBin</a> o <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> per fer la avaluació.)</p> + +<h2 id="Resum_del_projecte">R<span id="result_box" lang="ca"><span>esum</span> <span>del projecte</span></span></h2> + +<p>Per a aquest projecte, la tasca consisteix a marcar una carta que ha de ser allotjada en una intranet de la universitat. La carta és una resposta d'un investigador a un futur estudiant doctorat sobre la seva sol·licitud per treballar a la universitat.</p> + +<p>Bloc/semàntica estructural:</p> + +<ul> + <li>S'ha d'estructurar el document general amb una estructura adequada que inclogui doctype, i els elements {{htmlelement("html")}}, {{htmlelement("head")}} i {{htmlelement("body")}}.</li> + <li>La carta, en general, s'ha de marcar amb una estructura de paràgrafs i encapçalats, amb l'excepció dels següents punts. Hi ha un encapçalat de nivell superior (el "Re:" línia) i tres encapçalats de segon nivell.</li> + <li>Les dates d'inici del semetre, els temes d'estudi i balls exòtics han de ser marcats utilitzant un tipus de llista apropiat.</li> + <li>Les dues direccions només es poden posar dins dels paràgrafs, o es pot utilitzar l'element {{htmlelement("address")}} de manera apropiada; cada línia de la direcció ha de seure en una nova línia, però no ha d'estar en un nou paràgraf.</li> +</ul> + +<p>Semàntica en línia:</p> + +<ul> + <li>S'ha de marcar el contingut del cos amb elements apropiats:</li> + <li>Els noms del remitent i receptor (i "Tel" i "Email") han de ser marcats amb una forta (strong) importància.</li> + <li>Les quatre dates en el document han de tenir els elements adequats que continguin dates llegibles per la màquina.</li> + <li>La primera direcció i la primera data en la carta se li ha de donar un valor d'atribut class de "receiver-column"; la CSS s'afegirà més tard, fent que aquests siguin alineats a la dreta, com hauria de ser en el cas d'un disseny de lletres clàssiques.</li> + <li>Els cinc acrònims/abreviatures en el text principal de la carta s'han de marcar per proporcionar expansió de cada acrònim/abreviatura.</li> + <li>Els sis sub/superíndexs han d'estar marcats de forma apropiada.</li> + <li>Els símbols de grau, major que i multiplicació han de ser marcats usant les referències a entitats apropiades.</li> + <li>Intentar marcar almenys dues paraules apropiades en el text amb una forta (strong) importància/èmfasi.</li> + <li>Hi ha dos llocs en què s'ha d'afegir un hipervincle; afegir enllaços adequats amb els títols. Per la ubicació que els enllaços apunten, només s'ha d'utilitzar http://example.com.</li> + <li>La cita del lema de la universitat i la citació s'han de marcar amb elements apropiats.</li> +</ul> + +<p>La capçalera del document:</p> + +<ul> + <li>El conjunt de caràcters del document s'ha d'especificar com UTF-8 utilitzant la etiqueta meta apropiada.</li> + <li>L'autor de la carta ha de ser especificat en una etiqueta meta apropiada.</li> + <li>El CSS proporcionat ha de ser inclòs dins d'una etiqueta propiada.</li> +</ul> + +<h2 id="Consells_i_suggeriments">Consells i suggeriments</h2> + +<ul> + <li>Utilitzar el <a href="https://validator.w3.org/">validador de W3C HTML</a> per validar el codi HTML; obtindreu punts de bonificació si es valida.</li> + <li>No es necessita saber res de CSS per fer aquesta avaluació; només s'ha de posar el CSS, proporcionat, a l'interior d'un element HTML.</li> +</ul> + +<h2 id="Exemple">Exemple</h2> + +<p>La següent captura de pantalla mostra un exemple del que la carta podria ser després del seu marcat.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12291/letter-screengrab.png" style="border: 1px solid black; display: block; margin: 0px auto;"></p> + +<h2 id="Evaluació">Evaluació</h2> + +<p>Si esteu seguint aquesta avaluació com a part d'un curs organitzat, heu de ser capaços de donar al vostre treball al vostre professor/tutor per qualificar-vos. Si sou d'auto-aprenentatge, llavors podeu obtenir la guia de qualificació, amb molta facilitat, preguntan a la llista de correu <a href="https://lists.mozilla.org/listinfo/dev-mdc">dev-mdc</a> o al canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> en <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Proveu el primer exercici - no hi ha res a guanyar amb trampa!</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/ca/learn/html/introducció_al_html/què_hi_ha_en_el_head_metadades_en_html/index.html b/files/ca/learn/html/introducció_al_html/què_hi_ha_en_el_head_metadades_en_html/index.html new file mode 100644 index 0000000000..934377c4ca --- /dev/null +++ b/files/ca/learn/html/introducció_al_html/què_hi_ha_en_el_head_metadades_en_html/index.html @@ -0,0 +1,271 @@ +--- +title: Què hi ha en el head? Metadades en HTML +slug: Learn/HTML/Introducció_al_HTML/Què_hi_ha_en_el_head_Metadades_en_HTML +tags: + - Beginner + - CodingScripting + - Guide + - HTML + - Meta + - favicon + - head + - lang + - metadata +translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">El {{glossary("Head", "head")}} és la part d'un document HTML que no es mostra en el navegador web quan es carrega la pàgina. Conté informació com el {{htmlelement("title")}} de la pàgina, els enllaços a {{glossary("CSS")}} (si voleu aplicar estil al vostre contingut HTML amb CSS), enllaços a favicones personalitzades, i altres metadades (dades sobre l'HTML, com qui l’ha escrit, i les paraules clau importants que descriuen el document). En aquest article exposarem tot això i molt més, per a donar-vos una bona base per a treballar amb el marcatge.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td>Familiaritat amb HTML, respecte dels continguts a <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Getting_started">Inici en HTML</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Aprendre sobre la capçalera HTML, quin propòsit té, quins elements importants pot contenir, i quin efecte que poden tenir en el document HTML.</td> + </tr> + </tbody> +</table> + +<h2 id="Què_és_la_capçalera_dHTML">Què és la capçalera d'HTML?</h2> + +<p>Fem un cop d’ull a aquest document HTML senzill <a href="https://wiki.developer.mozilla.org/ca/docs/Learn/HTML/Introducci%C3%B3_al_HTML/Getting_started#Anatomia_dun_document_HTML">que ja hem vist en l’article anterior</a>:</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My test page</title> + </head> + <body> + <p>This is my page</p> + </body> +</html></pre> + +<p>La capçalera d'un document HTML és el contingut de l'element {{htmlelement("head")}}. A diferència dels continguts de l'element {{htmlelement("body")}}, que es mostren a la pàgina quan es carrega en un navegador, el contingut de la capçalera no es mostra a la pàgina. La funció de la capçalera, en canvi, és contenir {{glossary("Metadata", "metadades")}} sobre el document. En l'exemple anterior, la capçalera és més aviat curta:</p> + +<pre class="brush: html notranslate"><head> + <meta charset="utf-8"> + <title>My test page</title> +</head></pre> + +<p>En pàgines més extenses, però, la capçalera pot arribar a estar força plena d'elements. Ves a alguns dels teus llocs web favorits i utilitza les <a href="/en-US/docs/Learn/Discover_browser_developer_tools">eines del desenvolupador</a> per revisar-ne el contingut de les capçaleres. El nostre objectiu aquí no és mostrar com utilitzar tot el que possiblement es pot posar a la capçalera, sinó ensenyar-te com fer servir els elements principals que hi inclouràs, i que t’hi familiaritzis. Comencem.</p> + +<h2 id="Afegir_un_títol">Afegir un títol</h2> + +<p>Ja hem vist l'element {{htmlelement("title")}} en acció: es pot emprar per a afegir un títol al document. Però aquest element es podria confondre amb {{htmlelement ("h1")}}, que s'utilitza per a afegir un títol d’encapçalament de nivell superior en el contingut del cos (<code>body</code>) del teu document. Això també es coneix de vegades com el títol de la pàgina. Però són coses diferents!</p> + +<ul> + <li>L'element {{htmlelement("h1")}} apareix a la pàgina quan el navegador la carrega. En general, n’hi ha d’haver un per pàgina, per a marcar el títol del contingut de la pàgina (el títol de la història, o el titular de la notícia, o el que escaigui).</li> + <li>L'element {{htmlelement("title")}} és una metadada que representa el títol del document HTML en general (no del contingut del document).</li> +</ul> + +<h3 id="Aprenentatge_actiu_Anàlisi_d’un_exemple_senzill">Aprenentatge actiu: Anàlisi d’un exemple senzill</h3> + +<ol> + <li>Per començar aquest aprenentatge actiu, et proposem d’anar al nostre repositori de GitHub i que et descarreguis una còpia de la nostra pàgina <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html"> title-example.html</a>. Pots fer-ho de diverses maneres: + + <ol> + <li>Copia i enganxa el codi de la pàgina en un arxiu de text nou de l'editor de codi, i a continuació, guarda’l en un lloc adequat.<strong> </strong></li> + <li>Prem el botó «Raw» de la pàgina, selecciona <em>File > Save Page As...</em> del menú del teu navegador, i a continuació escull un lloc per a guardar l'arxiu.</li> + </ol> + </li> + <li>Ara obre l'arxiu al teu navegador. Hauries de veure alguna cosa com això: + <p><img alt="Una pàgina web senzilla amb el títol del document HTML en l’element <title> i el títol d’encapçalament de la pàgina <h1> en l’element <h1>." src="https://mdn.mozillademos.org/files/12323/title-example.png" style="display: block; margin: 0 auto;">Ara, hauries de tenir clar on apareix el contingut de l’element <code><h1></code> i on apareix el contingut de <code><title></code>!</p> + </li> + <li>També pots provar d’obrir el codi en el teu editor de codi, editar-ne els continguts, i a continuació actualitzar la pàgina en el teu navegador. Juga-hi una mica.</li> +</ol> + +<p>El contingut de l'element <code><title></code> també s'utilitza per a altres coses. Per exemple, quan poses a la pàgina un marcador de pàgina (<em>Bookmarks > Bookmark This Page</em>, en Firefox), observa que el nom que se suggereix com a nom del marcador és el contingut de l’element <code><title></code>.</p> + +<p><img alt="Una pàgina web amb un marcador de pagina en Firefox; el nom del marcadode pàgina s’omple automàticament amb el contingut de l’element <title> " src="https://mdn.mozillademos.org/files/12337/bookmark-example.png" style="display: block; margin: 0 auto;"></p> + +<p>El contingut de <code><title></code> també s'utilitza en els resultats de cerca, com es veu a continuació.</p> + +<h2 id="Metadades_lelement_<meta>">Metadades: l'element <code><meta> </code></h2> + +<p>Les metadades són dades que descriuen dades i HTML té una manera «oficial» d'afegir metadades a un document: l'element {{htmlelement("meta")}}. Per descomptat, que altres coses sobre les quals parlem en aquest article també podrien considerar-se metadades. Hi ha una gran quantitat de tipus d'elements <code><meta></code> diferents que es poden incloure en la capçalera (<code><head></code>) de la teva pàgina, però no provarem d'explicar-los tots en aquesta etapa, ja que podria acabaria sent massa confús. En lloc d’això, explicarem algunes coses amb què et pots trobar habitualment, només per a donar-te’n una idea.</p> + +<h3 id="Especificar_la_codificació_de_caràcters_del_document">Especificar la codificació de caràcters del document</h3> + +<p>En l'exemple que hem vist més amunt, s’hi ha inclòs aquesta línia:</p> + +<pre class="brush: html notranslate"><meta charset="utf-8"></pre> + +<p>Aquest element simplement especifica la codificació de caràcters del document: el conjunt de caràcters que el document pot utilitzar. <code>UTF-8</code> és un conjunt de caràcters universal que inclou gairebé qualsevol caràcter de qualsevol idioma humà. Això vol dir que la vostra pàgina web serà capaç de gestionar la visualització de qualsevol idioma. Per tant, és una bona idea establir això a cada pàgina web que creïs! Per exemple, la pàgina podria gestionar anglès i japonès sense problema:</p> + +<p><img alt="Una pàgina web que conté caràcters en anglès i en japonès, amb el conjunt universal de codificació de caràcters, o utf-8. Tots dos idiomes es veuen igual de bé," src="https://mdn.mozillademos.org/files/12343/correct-encoding.png" style="display: block; margin: 0 auto;">En canvi, si configures la teva codificació de caràcters segons <code>ISO-8859-1</code>, per exemple (el conjunt de caràcters de l'alfabet llatí), la representació de la teva pàgina s’esgavellaria del tot:</p> + +<p><img alt="Una pàgina web que conté caràcters en anglès i en japonès, amb el conjunt de caràcters per a l’alfabet llatí. Els caràcters japonesos no es veuen correctament." src="https://mdn.mozillademos.org/files/12341/bad-encoding.png" style="display: block; height: 365px; margin: 0px auto; width: 604px;"></p> + +<h3 id="Aprenentatge_actiu_Experimentar_amb_la_codificació_de_caràcters">Aprenentatge actiu: Experimentar amb la codificació de caràcters</h3> + +<p>Per provar això, torneu a la plantilla HTML que heu obtingut en l'apartat anterior amb el <code><title></code> (la pàgina <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html"> title-example.html</a>), canvieu el valor <code>charset</code> de <code>meta</code> per la norma <code>ISO-8859-1</code>, i afegiu el japonès a la vostra pàgina. Aquest és el codi que fem servir:</p> + +<pre class="brush: html notranslate"><p>Japanese example: ご飯が熱い。</p></pre> + +<h3 id="Afegir_un_autor_i_una_descripció">Afegir un autor i una descripció</h3> + +<p>Molts elements <code><meta></code> inclouen els atributs <code>name</code> i <code>content</code>:</p> + +<ul> + <li><code>name</code> especifica el tipus d'element <code>meta</code> que és; quin tipus d'informació conté.</li> + <li><code>content</code> especifica el contingut concret de l’element <code>meta</code>.</li> +</ul> + +<p>Aquests dos elements <code>meta</code> són útils d’incloure a la teva pàgina perquè defineixen l'autor de la pàgina i proporcionen una descripció concisa de la pàgina. Vegem-ne un exemple:</p> + +<pre class="brush: html notranslate"><meta name="author" content="Chris Mills"> +<meta name="description" content="The MDN Learning Area aims to provide +complete beginners to the Web with all they need to know to get +started with developing web sites and applications."></pre> + +<p>Especificar l’autor de la pàgina és bo en molts sentits: és útil per a esbrinar qui ha escrit la pàgina, per si us hi voleu posar en contacte i fer-li preguntes sobre el contingut. Alguns sistemes de gestió de continguts disposen de funcions que extreuen automàticament la informació de l'autor de la pàgina i la poden a disposició amb aquesta finalitat.</p> + +<p>Especificar una descripció que inclou paraules clau relacionades amb el contingut de la pàgina és útil perquè té el potencial de fer que la pàgina aparegui més amunt en les cerques rellevants que els motors de cerca executen (aquestes activitats es denominen <a href="/en-US/docs/Glossary/SEO">Search Engine Optimization</a>, o {{glossary("SEO")}}.)</p> + +<h3 id="Aprenentatge_actiu_La_utilitat_de_la_descripció_per_als_motors_de_cerca">Aprenentatge actiu: La utilitat de la descripció per als motors de cerca</h3> + +<p>Les pàgines de resultats dels motors de cerca també fan servir aquestes descripcions. Vegem-ho amb un exemple.</p> + +<ol> + <li>Ves a la <a href="https://developer.mozilla.org/ca/">pàgina d’inici de The Mozilla Developer Network</a>.</li> + <li>Ves al codi font de la pàgina (botó dret/<kbd>Ctrl</kbd> + clic sobre la pàgina, selecciona l’opció <em>Veure l’origen de la pàgina</em> del menú contextual).</li> + <li>Busca la descripció en l'etiqueta <code>meta</code>. S'assembla a això: + <pre class="brush: html notranslate"><meta name="description" content="The Mozilla Developer Network (MDN) provides +information about Open Web technologies including HTML, CSS, and APIs for both +Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS."></pre> + </li> + <li>Ara busca «Mozilla Developer Network» amb el teu motor de cerca favorit (nosaltres hem fet servir Yahoo). Observa, a partir del contingut dels elements <code><meta></code> i <code><title></code> utilitzats en el resultat de la cerca que, definitivament, paga la pena tenir aquests elements de descripció! + <p><img alt='A Yahoo search result for "Mozilla Developer Network"' src="https://mdn.mozillademos.org/files/12347/search-result.png" style="display: block; margin: 0 auto;"></p> + </li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: A Google veuràs que a continuació de l'enllaç principal de la pàgina d'inici s'enumeren algunes pàgines secundàries rellevants del projecte MDN; són els anomenats enllaços de llocs web, i es configuren en les <a href="http://www.google.com/webmasters/tools/">Google's webmaster tools</a>; és una manera de millorar els resultats de cerca del teu lloc web en el motor de cerca de Google.</p> +</div> + +<div class="note"> +<p><strong>Nota</strong>: Moltes característiques de <code><meta></code> senzillament ja no s'utilitzen. Per exemple, l'element <code><meta></code> de paraules clau (<code><meta name="keywords" content="posa, les, teves, paraules, clau"></code>) , que se suposa que proporciona als motors de cerca paraules clau per a determinar la rellevància d’aquella pàgina respecte dels termes de cerca, els motors de cerca l’ignoren perquè els <em>spammers</em> omplien la llista de paraules clau amb centenars de paraules clau que esbiaixaven els resultats.</p> +</div> + +<h3 id="Altres_tipus_de_metadades"><span id="result_box" lang="ca"><span>Altres tipus de</span> <span>metadades</span></span></h3> + +<p>Trobareu altres tipus de metadades a mesura que volteu per la web. Una gran quantitat de les funcions que apareixen en els llocs web són creacions propietàries, dissenyades per a proporcionar a certs llocs web (com els llocs web de les xarxes socials) parts específiques d'informació que poden utilitzar.</p> + +<p>Per exemple, <a href="http://ogp.me/">Open Graph Data</a> és un protocol de metadades que Facebook va inventar per proporcionar als llocs web metadades enriquides. En el codi font de MDN Web Docs trobaràs això:</p> + +<pre class="brush: html notranslate"><meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png"> +<meta property="og:description" content="The Mozilla Developer Network (MDN) provides +information about Open Web technologies including HTML, CSS, and APIs for both Web sites +and HTML5 Apps. It also documents Mozilla products, like Firefox OS."> +<meta property="og:title" content="Mozilla Developer Network"></pre> + +<p>Un efecte d'això és que quan a Facebook es fa un enllaç a MDN Web Docs, l'enllaç apareix amb una imatge i una descripció: una experiència més rica per als usuaris.</p> + +<p><img alt="Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description." src="https://mdn.mozillademos.org/files/12349/facebook-output.png" style="display: block; margin: 0 auto;"></p> + +<p>Twitter també té metadades propietàries pròpies, les <a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards">Twitter Cards</a>, que tenen un efecte similar quan a twitter.com es mostra l’URL del lloc web. Per exemple:</p> + +<pre class="brush: html notranslate"><meta name="twitter:title" content="Mozilla Developer Network"></pre> + +<h2 id="Afegir_icones_personalitzades_al_teu_lloc_web">Afegir icones personalitzades al teu lloc web</h2> + +<p>Per enriquir encara més el disseny del teu lloc web, en les metadades pots afegir referències a icones personalitzades, que es mostraran en certs contextos.</p> + +<p>La humil icona de web (favicon), que existeix de fa molts, molts anys, va ser la primera icona d'aquest tipus, una icona de 16 x 16 píxels utilitzada en múltiples llocs.</p> + +<p>Pots afegir una icona de web a la teva pàgina així:</p> + +<ol> + <li>La deses en el mateix directori que la pàgina índex del lloc web, en format <code>.ico</code> (la majoria dels navegadors admetem les icones de web en els formats més comuns, com <code>.gif</code> o <code>.png</code>, però si utilitzes el format ICO t’assegures que funciona en navegadors antics com Internet Explorer 6).</li> + <li>Afegeixes al bloc de codi <code><head></code> de l’HTML la línia següent per a fer-hi referència: + <pre class="brush: html notranslate"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"></pre> + </li> +</ol> + +<p>Els navegadors moderns utilitzen les icones de web en diversos llocs, com en la pestanya de la pàgina activa, i en el panell de marcadors, quan hi ha un marcador de pàgina:</p> + +<p><img alt="The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it." src="https://mdn.mozillademos.org/files/12351/bookmark-favicon.png" style="display: block; margin: 0 auto;"></p> + +<p>Avui dia hi ha un munt d'altres tipus d'icones que també pots tenir en compte. Per exemple, en el codi font de la pàgina MDN trobaràs això:</p> + +<pre class="brush: html notranslate"><!-- third-generation iPad with high-resolution Retina display: --> +<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png"> +<!-- iPhone with high-resolution Retina display: --> +<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png"> +<!-- first- and second-generation iPad: --> +<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png"> +<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --> +<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png"> +<!-- basic favicon --> +<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png"></pre> + +<p>Els comentaris expliquen per a què s'utilitza cada icona; aquests elements cobreixen coses com ara proporcionar una agradable icona en alta resolució quan deses el lloc web a la pantalla principal d'un iPad.</p> + +<p>No et preocupis gaire pel que fa a l'aplicació de tots aquests tipus d'icona en aquest moment; aquesta característica és bastant avançada i no s'espera que en tingueu un coneixement per a poder progressar en el curs. L'objectiu principal aquí és fer-te saber què són aquests tipus de coses, per si te les trobes quan navegues pel codi font d'altres llocs web.</p> + +<h2 id="Aplicar_CSS_i_JavaScript_a_HTML">Aplicar CSS i JavaScript a HTML</h2> + +<p>Gairebé tots els llocs web que utilitzes actualment fan servir {{glossary("CSS")}} perquè presentin un bon aspecte, i {{glossary("JavaScript")}} per a potenciar-hi les funcions interactives, com ara reproductors de vídeo, mapes, jocs, i molt més. Aquests s'apliquen amb més freqüència a una pàgina web amb l'ús dels elements {{htmlelement("link")}} i {{htmlelement("script")}}, respectivament.</p> + +<ul> + <li> + <p>L'element {{htmlelement("link")}} sempre va dins de la capçalera (<code>head</code>) del document. Pot prendre dos atributs, <code>rel="stylesheet"</code>, que indica que es tracta del full d'estil del document, i <code>href</code>, que conté la ruta d'accés al fitxer del full d'estil:</p> + + <pre class="brush: html notranslate"><link rel="stylesheet" href="my-css-file.css"></pre> + </li> + <li> + <p>L'element {{htmlelement("script")}} també hauria d'anar a la capçalera, i hauria d'incloure un atribut <code>src</code> amb la ruta al JavaScript que vols carregar, i <code>defer</code>, que bàsicament li diu al nevegador que carregui el JavaScrpt alhora que l'HTML de la pàgina. Això és útil perquè assegura que l'HTML es carrega abans que s'executi el JavaScript, i així no hi ha errors perquè el JavaScript ha provat d'accedir a un element HTML que encara no existeix. En realitat, hi ha unes quantes maneres de gestionar com es carrega el JavaScript a les vostres pàgines, però aquesta és la més «a prova de bombes» amb els navegadors moderns (per la resta, llegiu <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#Script_loading_strategies">Script loading strategies</a>).</p> + + <pre class="brush: html notranslate"><script src="my-js-file.js"></script></pre> + + <p><strong>Nota</strong>: L'element <code><script></code> pot semblar un element buit, però no ho és, i per tant necessita una etiqueta de tancament. En lloc d'apuntar a un arxiu script extern, també es pot optar per posar el script dins de l'element <code><script></code>.</p> + </li> +</ul> + +<h3 id="Aprenentatge_actiu_Aplicar_CSS_i_JavaScript_a_una_pàgina">Aprenentatge actiu: Aplicar CSS i JavaScript a una pàgina</h3> + +<ol> + <li>Per iniciar aquest aprenentatge actiu, pren una còpia dels arxius <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/script.js">script.js</a> i <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css">style.css</a>, i desa’ls tots tres en el mateix directori del teu ordinador. Assegura’t que es desen amb els noms i les extensions d'arxiu correctes.</li> + <li>Obre el fitxer HTML en el teu navegador i en l’editor de text.</li> + <li>Seguint la informació que et proporcionem aquí, afegeix els elements {{htmlelement("link")}} i {{htmlelement("script")}} al teu HTML perquè els teus CSS i JavaScript s'apliquin a l’HTML.</li> +</ol> + +<p>Si ho fas correctament, quan deses el codi HTML i actualitzes el navegador observaràs que les coses han canviat:</p> + +<p><img alt="Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page." src="https://mdn.mozillademos.org/files/12359/js-and-css.png" style="display: block; margin: 0 auto;"></p> + +<ul> + <li>El JavaScript ha afegit una llista buida a la pàgina. Ara, quan fas clic a qualsevol lloc de la llista, un quadre de diàleg et demana que introdueixis un text per a un element nou a la llista. Quan prems el botó Acceptar, a la llista s'afegeix un element de llista nou que conté aquest text. En fer clic en un element de la llista, un quadre de diàleg et permet canviar el text de l'element.</li> + <li>El CSS ha pintat de verd el fons i ha augmentat la mida del text. També ha aplicat estil a alguns dels continguts que JavaScript ha afegit a la pàgina (la barra vermella amb la vora negra és l'estil del codi CSS que s'ha afegit a la llista que ha generat el JS).</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: Si t’encalles amb aquest exercici i no se t’hi apliquen el CSS/JS, revisa la nostra pàgina d'exemple <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html">css-and-js.html</a>.</p> +</div> + +<h2 id="Establir_lidioma_principal_del_document">Establir l'idioma principal del document</h2> + +<p>Per acabar, paga la pena esmentar que es pot establir (i realment s'hauria d'establir) l'idioma de la teva pàgina. Això es pot fer afegint l'<a href="/ca/docs/Web/HTML/Global_attributes/lang">atribut lang</a> en l'etiqueta d'obertura HTML (com es veu en el <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>).</p> + +<pre class="brush: html notranslate"><html lang="en-US"></pre> + +<p>Això és útil en molts sentits. Els motors de cerca indexen més eficaçment el document si s'hi estableix el llenguatge (permeten que aparegui correctament en els resultats específics de l'idioma, per exemple), i és útil per a les persones amb discapacitat visual que utilitzen lectors de pantalla (per exemple, la paraula «six» hi és tant en francès com en anglès, però es pronuncia diferent).</p> + +<p>També post fer que diverses subseccions del teu document reconeguin idiomes diferents. Per exemple, podem establir que es reconegui una secció de japonès per a la part del nostre document que està escrita en japonès, així:</p> + +<pre class="brush: html notranslate"><p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p></pre> + +<p>Aquests codis els defineix la norma <a href="https://en.wikipedia.org/wiki/ISO_639-1">ISO 639-1</a>. Pots trobar més informació sobre aquests codis en les <a href="https://www.w3.org/International/articles/language-tags/">Language tags in HTML and XML</a>.</p> + +<h2 id="Resum">Resum</h2> + +<p>Arribem al final del nostre recorregut per la capçalera d’un document HTML; s’hi poden fer moltes més coses, però un recorregut exhaustiu seria avorrit i en aquesta etapa podria embolicar, i per ara només volem donar-te una idea de les coses més comunes que s’hi poden trobar! En l’article següent veurem els elements bàsics d’un text HTML.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/ca/learn/html/multimèdia_i_incrustar/afegir_gràfics_vectorials_a_la_web/index.html b/files/ca/learn/html/multimèdia_i_incrustar/afegir_gràfics_vectorials_a_la_web/index.html new file mode 100644 index 0000000000..feaf09c048 --- /dev/null +++ b/files/ca/learn/html/multimèdia_i_incrustar/afegir_gràfics_vectorials_a_la_web/index.html @@ -0,0 +1,287 @@ +--- +title: Afegir gràfics vectorials a la Web +slug: Learn/HTML/Multimèdia_i_incrustar/Afegir_gràfics_vectorials_a_la_Web +tags: + - Beginner + - Graphics + - Guide + - HTML + - Images + - Learn + - Raster + - SVG + - Vector + - iframe + - img +translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</div> + +<div class="summary"> +<p>Els gràfics vectorials són molt útils en moltes circumstàncies - tenen una grandària d'arxiu reduït i són altament escalables, de manera que no pixelen en acostar-ho o ampliar-se a una grandària gran. En aquest article et mostrarem com incloure un en la vostra pàgina web.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td>Conèixer els conceptes <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">bàsics d'HTML</a> i com <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">inserir una imatge en el document</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Aprendre com incrustar una imatge SVG (vector) en una pàgina web.</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Nota</strong>: Aquest article no té la intenció d'ensenyar SVG; just el que és, i com afegir-lo a pàgines web.</p> +</div> + +<h2 id="Què_són_els_gràfics_vectorials">Què són els gràfics vectorials?</h2> + +<p>A la web, treballarem amb dos tipus d'imatges - imatges de trama (raster) i imatges vectorials:</p> + +<ul> + <li>Les imatges de trama es defineixen utilitzant una quadrícula de píxels - un arxiu d'imatge de trama conté informació que mostra exactament on cada píxel es col·locat, i exactament de quin color ha de ser. Els formats populars de trama en la web inclouen mapa de bits (.bmp), PNG (.png), JPEG (.jpg) i GIF (.gif).</li> + <li>Les imatges vectorials es defineixen utilitzant algoritmes - un arxiu d'imatge vectorial que conté definicions de forma i el camí que l'ordinador pot utilitzar per esbrina quin aspecte ha de tenir la imatge quan es representi a la pantalla. El format {{glossary("SVG")}} ens permet crear potents gràfics vectorials per a ús a la web.</li> +</ul> + +<p>Per donar-vos una idea de la diferència entre els dos, veurem un exemple. Podeu trobar aquest exemple en el nostre repositori Github com a <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html">vector-versus-raster.html</a> - mostra dues imatges costat a costat aparentment idèntiques, una estrella vermella amb una ombra negre. La diferència és que el de l'esquerra és un PNG, i la dreta és una imatge SVG.</p> + +<p><img alt="Two star images, one raster and one vector. At their default size they look identical" src="https://mdn.mozillademos.org/files/12866/raster-vector-default-size.png" style="display: block; height: 112px; margin: 0px auto; width: 223px;"></p> + +<p>La diferència es fa evident quan s'amplia la pàgina: la imatge PNG es pixela a mesura que s'amplia, ja que conté informació sobre on ha d'estar cada píxel (i quin color); quan s'amplia, cada píxel augmenta de grandària per emplenar múltiples píxels en la pantalla, per la qual cosa la imatge comença a veure's bloquejada.La imatge vectorial, no obstant això, segueix lluint agradable i nítida, ja que no importa la grandària que sigui, els algorismes s'utilitzen per elaborar les formes en la imatge, amb els valors simplement s'escalen a mesura que es fa més gran</p> + +<p><img alt="Two star images zoomed in. The raster one on the left starts to look pixellated, whereas the vector one still looks crisp." src="https://mdn.mozillademos.org/files/12868/raster-vector-zoomed.png" style="display: block; height: 328px; margin: 0px auto; width: 677px;"></p> + +<p>D'altra banda, els arxius d'imatge vectorial són molt més lleugers que els seus equivalents trama, ja que només necessiten tenir un grapat d'algorismes, en lloc d'informació sobre cada píxel de la imatge individualment.</p> + +<h2 id="Què_és_SVG">Què és SVG?</h2> + +<p>SVG és un llenguatge basat en {{glossary("XML")}} per descriure imatges vectorials. Es bàsicament de marcat, com HTML, excepte que té molts elements diferents per a la definició de les formes que volem que apareguin a la imatge, i els efectes que volem aplicar a aquestes formes. SVG és per marcar els gràfics, no el contingut. Al final de l'espectre més simple, tenim elements per a la creació de formes simples, com {{svgelement("circle")}} i {{svgelement("rect")}}. Més característiques avançades de SVG inclouen {{svgelement("feColorMatrix")}} (transforma colors utilitzant una matriu de transformació,) {{svgelement("animate")}} (animar parts d'un gràfic vectorial,) i {{svgelement("mask")}} (aplicar una màscara sobre la part superior de la imatge.)</p> + +<p><span id="result_box" lang="ca"><span>Com a</span> <span>simple exemple</span><span>, el codi</span> <span>següent</span> <span>crea</span> <span>un cercle</span> <span>i un</span> <span>rectang</span></span></p> + +<pre class="brush: html"><svg version="1.1" + baseProfile="full" + width="300" height="200" + xmlns="http://www.w3.org/2000/svg"> + <rect width="100%" height="100%" fill="black" /> + <circle cx="150" cy="100" r="90" fill="blue" /> +</svg></pre> + +<p><span id="result_box" lang="ca"><span>Això</span> <span>crea el següent</span> <span>resultat</span><span>:</span></span></p> + +<p>{{ EmbedLiveSample('What_is_SVG', 300, 200) }}</p> + +<p>L'exemple anterior, donava la impressió que SVG és fàcil de codifca manualment. Sí, es pot codifca manualment un simple SVG en un editor de text, però per una imatge complexa comença ràpidament a ser molt difícil. Per a la creació d'imatges SVG, la majoria de la gent utilitza un editor de gràfics vectorials com <a href="https://inkscape.org/en/">Inkscape</a> o <a href="https://en.wikipedia.org/wiki/Adobe_Illustrator">Illustrator</a>. Aquests paquets permeten crear una varietat d'il·lustracions utilitzant diverses eines de gràfics, i crear aproximacions de fotos (per exemple, funció Traçar mapa de bits de l'Inkscape).</p> + +<p>SVG té algunes avantatges addicionals a més de les descrites fins al moment:</p> + +<ul> + <li>El text en imatges vectorials roman accessible (la qual cosa també beneficia la seva {{glossary("SEO")}}).</li> + <li>Els SVGs es presten bé a estils/scripts, ja que cada component de la imatge és un element que pot ser dissenyat via CSS o per scripts via JavaScript.</li> +</ul> + +<p>Llavors, per què algú vol utilitzar gràfics de trama sobre SVG? Bé, SVG té alguns desavantatges:</p> + +<ul> + <li>SVG es pot complicar molt ràpidament, el que significa que les mides d'arxius poden créixer; els SVGs complexos poden arribar a ralentir els temps de processament del navegador</li> + <li>EL SVG pot ser més difícil de crear que les imatges de trama, depenent de quin tipus d'imatge estem tractant de crear.</li> + <li> + <p>SVG no és compatible amb els navegadors més antics, pel que pot no ser adequat si cal donar suport a les versions antigues d'Internet Explorer amb el vostre lloc web (SVG començar a ser suportat a partir d'IE9).</p> + </li> +</ul> + +<p>Els gràfics de trama són sens dubte millor per a les imatges de precisió complexes, com ara fotos, per les raons descrites anteriorment.</p> + +<div class="note"> +<p><strong>Nota</strong>: En Inkscape, guardar els arxius com Plain SVG per estalviar espai. També, si us plau referiu-vos a aquest <a href="http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Inkscape.html">article que descriu com preparar SVGs per a la Web</a>.</p> +</div> + +<h2 id="Afegir_SVG_a_les_vostres_pàgines">Afegir SVG a les vostres pàgines</h2> + +<p>En aquesta secció veurem les diferents formes en què es poden afegir gràfics vectorials SVG a les vostres pàgines web.</p> + +<h3 id="La_forma_més_ràpida_htmlelement(img)"><span class="short_text" id="result_box" lang="ca"><span>La forma</span> <span>més</span> <span>ràpida</span></span> : {{htmlelement("img")}}</h3> + +<p>Per incrustar un SVG mitjançant un element {{htmlelement("img")}}, només s'ha de fer referència a ell en l'atribut <code>src</code>, com es podria esperar. Necessitarem un atribut <code>height</code> o <code>width</code> (o tots dos si el SVG no té cap relació d'aspecte inherent). Si no ho heu fet ja, si us plau llegiu les <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">imatges en HTML</a>.</p> + +<pre class="brush: html"><img + src="equilateral.svg" + alt="triangle with all three sides equal" + height="87px" + width="100px" /></pre> + +<h4 id="Pros">Pros</h4> + +<ul> + <li>Sintaxi de la imatge ràpida i familiar amb equivalent de text incorporat en l'atribut <code>alt</code>.</li> + <li>Es pot convertir la imatge en un hipervínculo fàcilment niant el <img> dins d'un element {{htmlelement("a")}}.</li> +</ul> + +<h4 id="Contres">Contres</h4> + +<ul> + <li>No es pot manipular la imatge amb JavaScript.</li> + <li>Si es vol controlar el contingut SVG amb CSS, s'ha d'incloure els estils CSS en línia en el codi SVG. (Les fulles d'estil externes invocades des de l'arxiu SVG no tenen cap efecte).</li> + <li>No es pot canviar l'estil de la imatge amb pseudoclasses CSS (like <code>:focus</code>).</li> +</ul> + +<h3 id="Solució_de_problemes_i_compatibilitat_entre_navegadors">Solució de problemes i compatibilitat entre navegadors</h3> + +<p>Per donar suport als navegadors SVG que no suporten SVG (IE 8 i per sota, Android 2.3 i per sota), es pot fer referència a un PNG o JPG des de l'atribut <code>src</code> i utilitzar un atribut {{htmlattrxref("srcset", "img")}} (que només reconeixen els navegadors recents) per fer referència al SVG. Sent aquest el cas, només els navegadors compatibles carregaran el SVG - els navegadors més antics carregaran el PNG en lloc d'un altre:</p> + +<pre class="brush: html"><img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg"></pre> + +<p>També es pot utilitzar el SVGs com imatges de fons de CSS, com es mostra a continuació. En el codi següent, els navegadors antics es pegaran amb el PNG que entenen, mentre que els nous navegadors carregaran el SVG:</p> + +<pre class="brush: css"><code>background: url("fallback.png") no-repeat center;</code> +background<code>-image: url("image.svg"); +background-size: contain;</code></pre> + +<p>Igual que el mètode <code><img></code> descrit anteriorment, la inserció d'SVGs utilitzant imatges de fons CSS vol dir que el SVG no pot ser manipulat amb JavaScript, i també està subjecta a les mateixes limitacions de CSS.</p> + +<p>Si els SVGs no es mostren en absolut, pot ser que el servidor no estigui configurat correctament. Si aquest és el problema, aquest <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Getting_Started#A_Word_on_Webservers">article us orientarà en la direcció correcta</a>.</p> + +<h3 id="Com_incloure_el_codi_SVG_dins_del_vostre_HTML"><span class="short_text" id="result_box" lang="ca"><span>Com incloure</span> <span>el codi</span> <span>SVG</span> <span>dins del vostre</span> <span>HTML</span></span></h3> + +<p>També es pot obrir el fitxer SVG en un editor de text, copiar el codi SVG, i enganxar-lo en el vostre document HTML - això de vegades es diu posar <strong>en línia SVG</strong>, o <strong>inlining SVG</strong>. Assegureu-vos que el fragment de codi SVG comença i acaba amb les etiquetes <code><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg"><svg></svg></a></code> (no incloure res fora d'aquestes). Aquí hi ha un exemple molt simple del que es pot enganxar en el vostre document:</p> + +<pre class="brush: html"><svg width="300" height="200"> + <rect width="100%" height="100%" fill="green" /> +</svg> +</pre> + +<h4 id="Pros_2">Pros</h4> + +<ul> + <li>Posar SVG en línia estalvia una petició HTTP, i per tant pot reduir el temps de càrrega.</li> + <li>Es pot assignar classes i ids els elements SVG i l'estil d'ells amb CSS, ja sigui dins el SVG o on poseu les regles d'estil CSS per al document HTML. De fet, es pot utilitzar qualsevol <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute#Presentation_attributes">atribut de presentació SVG </a>com una propietat CSS.</li> + <li>Inlining SVG és l'únic enfocament que permet utilitzar les interaccions (com <code>:focus</code>) i animacions CSS en la imatge SVG (Fins i tot en la fulla d'estil regular)</li> + <li> + <p>Es pot convertir el marcat SVG en un hipervincle embolicant-lo en un element {{htmlelement("a")}}.</p> + </li> +</ul> + +<h4 id="Contres_2">Contres</h4> + +<ul> + <li>Aquest mètode només és adequat si s'utilitza el SVG en un sol lloc. La duplicació es fa per el manteniment intensiu de recursos.</li> + <li>El codi extra SVG augmenta la mida del arxiu HTML.</li> + <li>El navegador no pot emmagatzemar en memòria cau SVG en línia, ja que seria emmagatzemar en memòria cau els recursos d'imatges regulars.</li> + <li>Es pot incloure el respatller en un element {{svgelement ("foreignObject")}}, però els navegadors compatibles amb SVG segueixen descarregant les imatges de respatller. Cal sospesar si la sobrecàrrega addicional realment val la pena, només per donar suport als navegadors obsolets.</li> +</ul> + +<ul> +</ul> + +<h3 id="Com_incrustar_un_SVG_amb_un_htmlelement(iframe)">Com incrustar un SVG amb un {{htmlelement("iframe")}}</h3> + +<p>Es poden obrir imatges SVG en el navegador de la mateixa manera que les pàgines web. Així que la incrustació d'un document SVG amb un <code><iframe></code> es fa de la mateixa manera que l'estudiat en <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">Des de <object> a <iframe> - altres tecnologies d'incrustació</a>.</p> + +<p>Aquí teniu una ullada ràpida:</p> + +<pre class="brush: html"><iframe src="triangle.svg" width="500" height="500" sandbox> + <img src="triangle.png" alt="Triangle with three unequal sides" /> +</iframe></pre> + +<p>Això en definitiva no és el millor mètode per triar:</p> + +<h4 id="Contres_3">Contres</h4> + +<ul> + <li>Els <code>iframes</code> tenen un mecanisme de reserva, com es pot veure, però els navegadors només mostraran la reserva si manquen de suport complet per <code>iframes</code>.</li> + <li>D'altra banda, llevat que el SVG i la pàgina web actual tenen el mateix {{glossary('origen')}}, no es pot utilitzar el Javascript a la pàgina web principal per manipular el SVG.</li> +</ul> + +<h2 id="Aprenentatge_actiu_Jugar_amb_SVG">Aprenentatge actiu: Jugar amb SVG</h2> + +<p>En aquesta secció d'aprenentatge actiu ens agradaria que simplement juguéssiu amb una mica de SVG per diversió. A la secció d'entrada de sota veureu que us hem proporcionat algunes mostres perquè pugueu començar. També podeu anar a <a href="/en-US/docs/Web/SVG/Element">SVG Element Reference</a>, per conèixer més detalls sobre altres joguines que es poden utilitzar en SVG, i provar-les també. Aquesta secció és, sobre tot, la pràctica de les vostres habilitats d'investigació, i que té una mica de diversió.</p> + +<p>Si us quedeu encallats i no podeu aconseguir que funcioni el vostre codi, sempre el podeu restablir amb el botó <em>Reset</em>.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input"> +<svg width="100%" height="100%"> + <rect width="100%" height="100%" fill="red" /> + <circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" /> + <polygon points="120,0 240,225 0,225" fill="green"/> + <text x="50" y="100" font-family="Verdana" font-size="55" + fill="white" stroke="black" stroke-width="2"> + Hello! + </text> +</svg></textarea> +<h2>Output</h2> +<div class="output"> +</div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 10em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +.output { + height: 14em; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 600) }}</p> + +<h2 id="Sumari">Sumari</h2> + +<p>En aquest article se us ha proporcionat un viatge ràpid del que són gràfics vectorials i SVG, perquè són útils conèixer-los, i com s'inclouen els SVG dins de les pàgines web. Mai hem tingut la intenció de que fos una guia completa per a l'aprenentatge SVG, només un punter perquè conegueu que és SVG, per si us els trobeu en el vostres viatjes al voltant de la web. Així que no us preocupeu si no us sentiu, encara, com uns experts en SVG. Hem inclòs alguns enllaços, més a baix, que us podria ajudar-vos si voleu anar i esbrinar més sobre com funciona.</p> + +<p>En l'últim article d'aquest mòdul explorarem les imatges sensibles en detall, mirant les eines que té HTML, que us permetin fer que les vostres imatges funcionin millor a través de diferents dispositius.</p> + +<h2 id="Veure">Veure</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Getting_Started">Tutorial SVG</a> en MDN</li> + <li><a href="http://thenewcode.com/744/Making-SVG-Responsive">Conells ràpids per SVGs sensibles</a></li> + <li><a href="http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/">Sara Soueidan's tutorial sobre imatges SVG sensibles</a></li> + <li><a href="http://www.w3.org/TR/SVG-access/">Beneficis d'accessibilitat en SVG</a></li> + <li><a href="https://css-tricks.com/scale-svg/">Com escalar en SVGs </a>(no és tan simple com els gràfics de trama!)</li> +</ul> + +<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</p> diff --git a/files/ca/learn/html/multimèdia_i_incrustar/contingut_de_vídeo_i_àudio/index.html b/files/ca/learn/html/multimèdia_i_incrustar/contingut_de_vídeo_i_àudio/index.html new file mode 100644 index 0000000000..5a8855df2b --- /dev/null +++ b/files/ca/learn/html/multimèdia_i_incrustar/contingut_de_vídeo_i_àudio/index.html @@ -0,0 +1,294 @@ +--- +title: Contingut de vídeo i àudio +slug: Learn/HTML/Multimèdia_i_incrustar/Contingut_de_vídeo_i_àudio +tags: + - Article + - Audio + - Beginner + - Guide + - HTML + - Video + - captions + - subtitles + - track +translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</div> + +<p class="summary">Ara que estem a gust afegint imatges senzilles a una pàgina web, el següent pas és començar a afegir els reproductors de vídeo i àudio als documents HTML! En aquest article veurem com es fa exactament això amb els elements {{htmlelement("video")}} i {{htmlelement("audio")}}; després acabarem mirant com afegir títols/subtítols als vídeos</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td>Coneixements bàsics d'informàtica, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">instal.lació programari bàsic</a>, coneixements bàsics de <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">treballar amb arxius</a>, familiaritzar-se amb els fonaments HTML (com s'explica en <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Inici en HTML</a>) i <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Imatges en HTML</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Aprendre com incrustar vídeo i àudio en una pàgina web, i afegir títols/subtítols a un vídeo.</td> + </tr> + </tbody> +</table> + +<h2 id="Àudio_i_vídeo_a_la_web"><span id="result_box" lang="ca"><span title="Audio and video on the web + +">Àudio i vídeo a la web</span></span></h2> + +<p>Els desenvolupadors web han volgut utilitzar vídeo i àudio a la web des de fa molt de temps, des de la dècada del 2000, quan vam començar a tenir un ample de banda prou ràpid com per suportar qualsevol tipus de vídeo (els arxius de vídeo són molt més grans que els de text o fins i tot les imatges). En els primers dies, les tecnologies web natives com HTML no tenien la capacitat d'integrar vídeo i àudio a la web, per la qual cosa les tecnologies propietàries (basades en el plug-in) com <a href="https://en.wikipedia.org/wiki/Adobe_Flash">Flash</a> (i més tard, <a href="https://en.wikipedia.org/wiki/Microsoft_Silverlight">Silverlight</a>) es van fer populars per al maneig d'aquests continguts. Aquest tipus de tecnologia funcionan bé, però tenen una sèrie de problemes, incloent, que no funcionan bé amb les característiques HTML/CSS, problemes de seguretat i problemes d'accessibilitat.</p> + +<p>Una solució nativa resoldria gran part d'això si es feia bé. Afortunadament, uns anys més tard, l'especificació {{glossary("HTML5")}} havia afegit aquestes característiques, amb els elements {{htmlelement("video")}} i {{htmlelement("audio")}}, i alguns nous i brillants {{Glossary("JavaScript")}} {{Glossary("API","APIs")}} per controlar-los. No estarem veient JavaScript aquí - només els fonaments bàsics que es poden aconseguir amb HTML.</p> + +<p>No estem per ensenyar com produir arxius d'àudio i vídeo - aixó requereix un conjunt d'habilitats completament diferents. Us hem proporcionat unes <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">mostres d'arxiu d'àudio i vídeo i codi d'exemple</a> perquè pugueu experimentar, en cas que no pugueu aconseguir-ho vosaltres mateixos.</p> + +<div class="note"> +<p><strong>Nota</strong>: Abans de començar aquí, també s'ha de saber que hi ha un bon nombre {{glossary("OVP","OVPs")}} (proveïdors de vídeo en línia) com <a href="https://www.youtube.com/">YouTube</a>, <a href="http://www.dailymotion.com">Dailymotion</a> i <a href="https://vimeo.com/">Vimeo</a>, i proveïdors d'àudio en línia com <a href="https://soundcloud.com/">Soundcloud</a>. Aquestes empreses ofereixen una forma còmoda i fàcil d'allotjar i consumir videos, pel que no ha de preocupar l'enorme consum d'ample de banda. OVP, fins i tot, en general, ofereix codi ja preparat per incrustar vídeo/àudio a les seves pàgines web. Si anem per aquest camí, es pot evitar algunes de les dificultats que es discuteixen en aquest article. Estarem discutint aquest tipus de servei, una mica més, en el proper article.</p> +</div> + +<h3 id="L'element_<video>">L'element <video></h3> + +<p>L'element {{htmlelement("video")}} permet incrustar un vídeo molt fàcilment. Un exemple realment senzill és el següent:</p> + +<pre class="brush: html"><video src="rabbit320.webm" controls> + <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> +</video></pre> + +<p>Les característiques de la nota són:</p> + +<dl> + <dt>{{htmlattrxref("src","video")}}</dt> + <dd>De la mateixa manera que l'element {{htmlelement("img")}}, l'atribut src conté una ruta d'accés al vídeo que es vol incrustar. Funciona exactament de la mateixa manera.</dd> + <dt>{{htmlattrxref("controls","video")}}</dt> + <dd>Els usuaris han de poder controlar la reproducció de vídeo i d'àudio (és especialment important per a les víctimes de l'<a href="https://en.wikipedia.org/wiki/Epilepsy#Epidemiology">epilepsia</a>.) S'ha d'utilitzar l'atribut <code>controls</code> per incloure la pròpia interfície de control del navegador, o construir la interfície amb l'<a href="/en-US/docs/Web/API/HTMLMediaElement">API JavaScript</a> apropiat. Com a mínim, la interfície ha d'incloure una manera d'iniciar i aturar els medis i ajustar el volum.</dd> + <dt>El paràgraf dins de les etiquetes <code><video></code></dt> + <dd> + <p>Això es coneix com a <strong>contingut alternatiu</strong> - aquest és mostrat si el navegador per accedir a la pàgina no és compatible amb l'element <code><video></code>, ens permet oferir una alternativa per a navegadors antics. Això pot ser qualsevol cosa; en aquest cas, hem proporcionat un enllaç directe a l'arxiu de vídeo, de manera que l'usuari pogui, almenys, tenir accés a ell, d'alguna manera, independentment de quin navegador estan fent servir.</p> + </dd> +</dl> + +<p>El vídeo incrustat es veurà semblant a això:</p> + +<p><img alt="A simple video player showing a video of a small white rabbit" src="https://mdn.mozillademos.org/files/12794/simple-video.png" style="display: block; height: 592px; margin: 0px auto; width: 589px;"></p> + +<p><span id="result_box" lang="ca"><span>Podeu</span></span> <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">provar l'exemple viu</a> aquí ( <span id="result_box" lang="ca"><span>vegeu</span> <span>també el</span></span> <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">codi font</a>.)</p> + +<h3 id="Suport_de_múltiples_formats">S<span class="short_text" id="result_box" lang="ca"><span>uport</span> <span>de múltiples</span> <span>formats</span></span></h3> + +<p>Hi ha un problema amb l'exemple anterior, el qual us haureu adonat al intentar accedir a l'enllaç directe, anteriorment, amb un navegador com Safari o Internet Explorer. El vídeo no es reprodueix! Això és perquè diferents navegadors suporten diferents formats de vídeo (i àudio).</p> + +<p>Anem a través de la terminologia ràpidament. Formats com MP3, MP4 i WebM es diuen <strong>formats contenidors</strong>. Contenen diferents parts en què es compon la cançó o vídeo - com una pista d'àudio, una pista de vídeo (en el cas del vídeo), i les metadades per descriure els medis en que són presentats.</p> + +<p>Les pistes d'àudio i vídeo estan també en diferents formats, per exemple:</p> + +<ul> + <li>Un contenidor WebM generalment empaqueta àudio Ogg Vorbis amb vídeo VP8/VP9. Això és recolzat principalment en Firefox i Chrome.</li> + <li>Un contenidor MP4 sovint empaqueta àudio AAC o MP3 amb vídeo H.264. Això és recolzat principalment a Internet Explorer i Safari.</li> + <li>El contenidor Ogg més antic tendeix a anar amb àudio Ogg Vorbis i vídeo Ogg Theora . Això estava recolzat principalment en Firefox i Chrome, però bàsicament ha estat substituït pel format WebM de millor qualitat.</li> +</ul> + +<p>Un reproductor d'àudio tendeix a reproduir una pista d'àudio directament, per exemple, un arxiu MP3 o Ogg. Aquests no necessiten contenidors.</p> + +<div class="note"> +<p><strong>Nota</strong>: No és tan senzill, com es pot veure a la nostra <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility">taula de compatibilitat de còdec d'àudio i de vídeo</a>. A més, molts navegadors de plataformes mòbils poden reproduir un format no suportat lliurant-ho al reproductor multimèdia del sistema subjacent per reproduir-ho. Però això ho farà ara com ara.</p> +</div> + +<p>Els formats anteriors existeixen per comprimir video i àudio en arxius manejables (el video i l'àudio en brut són molt grans). Els navegadors contenen diferents <strong>{{Glossary("Codec","Codecs")}}</strong>, com Vorbis o H.264, que s'utilitzen per convertir el so comprimit i el vídeo en dígits binaris i a l'inrevés. Com hem indicar anteriorment, els navegadors per desgràcia no tots suporten als mateixos còdecs, pel que s'haurà de proporcionar diversos arxius per a cada producció de medis. Si falta el còdec adequat per descodificar el medi, simplement no es reproduirà.</p> + +<div class="note"> +<p><strong>Nota:</strong> És possible que ens pregunten per què existeix aquesta situació. <strong>MP3</strong> (per a àudio) i <strong>MP4/H.264</strong> (per a vídeo) són àmpliament recolzats, i de bona qualitat. No obstant això, també són gravats per patents - patents nord-americanes que cobreixen MP3 fins almenys 2017, i H.264 fins 2027 com molt aviat, el que significa que els navegadors que no tenen la patent han de pagar grans summes de diners per recolzar aquests formats. A més, moltes persones eviten el programari restringit en principi, a favor dels formats oberts. Aquesta és la raó per la qual hem de proporcionar múltiples formats per a diferents navegadors.</p> +</div> + +<p>Llavors, com fem això? Fer una ullada a el següent <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">exemple actualitzat</a> (<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">prova-ho qui viu aquí</a>, també):</p> + +<pre class="brush: html"><video controls> + <source src="rabbit320.mp4" type="video/mp4"> + <source src="rabbit320.webm" type="video/webm"> + <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> +</video></pre> + +<p>Aquí hem pres l'atribut <code>src</code> fora de l'etiqueta <code><video> </code>actual, i en el seu lloc hem inclòs elements {{htmlelement("source")}}, per separat, que apunten a les seves pròpies fonts. En aquest cas, el navegador va a través dels elements <code><source></code> i reprodueix el primer còdec que té que donar suport. Incloent les fonts de WebM i MP4 hauria de ser suficient per reproduir els vídeos a la majoria de plataformes i navegadors actuals.</p> + +<p>Cada element <code><source></code> també té un atribut <code>type</code>. Aquest és opcional, però s'aconsella que s'inclogui - conté el {{glossary("MIME type","MIME types")}} dels arxius de vídeo i els navegadors poden llegir aquests i saltar immediatament els vídeos que no entenen. Si no està inclòs, els navegadors carregan i tractan de reproduir cada arxiu fins a trobar un que funcioni, prenent encara més temps i recursos.</p> + +<div class="note"> +<p><strong>Nota</strong>: El nostre <a href="/en-US/docs/Web/HTML/Supported_media_formats">article sobre els formats dels medis compatibles</a> conté alguna cosa en comú {{glossary("MIME type","MIME types")}}.</p> +</div> + +<h3 id="Altres_característiques_de_<video>"><span id="result_box" lang="ca"><span>Altres característiques</span> de <span><</span><span>video</span><span>></span></span></h3> + +<p>Hi ha una sèrie d'altres característiques que es poden incloure en un vídeo HTML5. Fer una ullada al nostre tercer exemple, a continuació:</p> + +<pre class="brush: html"><video controls width="400" height="400" + autoplay loop muted + poster="poster.png"> + <source src="rabbit320.mp4" type="video/mp4"> + <source src="rabbit320.webm" type="video/webm"> + <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> +</video> +</pre> + +<p>Això ens donarà una sortida semblant alguna cosa com això:</p> + +<p><img alt="A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!" src="https://mdn.mozillademos.org/files/12796/extra-video-features.png" style="display: block; height: 731px; margin: 0px auto; width: 653px;"> <span id="result_box" lang="ca"><span>Les</span> <span>noves</span> <span>característiques</span> <span>són</span><span>:</span></span></p> + +<dl> + <dt>{{htmlattrxref("width","video")}} and {{htmlattrxref("height","video")}}</dt> + <dd>Es pot controlar la mida del vídeo, ja sigui amb aquests atributs o amb {{Glossary("CSS")}}. En ambdós casos, els vídeos mantenen la seva relació amplada-alçada nativa - coneguda com la <strong>relació d'aspecte</strong>. Si la relació d'aspecte no es manté per les mides que s'hagin definit, el vídeo creixerà per omplir l'espai horitzontal, i l'espai sense omplir acabarà tinguen un color de fons sòlid per defecte.</dd> + <dt>{{htmlattrxref("autoplay","video")}}</dt> + <dd>Aquest atribut fa que l'inici d'àudio o vídeo es reprodueixi immediatament, mentre que la resta de la pàgina s'està carregant. Es recomana no utilitzar el vídeo en reproducció automàtica (o àudio) en els vostres llocs, ja que els usuaris poden trobar que és realment molest.</dd> + <dt>{{htmlattrxref("loop","video")}}</dt> + <dd>Aquest atribut fa que el vídeo (o àudio) comenci reproduir-se, de nou, cada vegada que acabi. Això també pot ser molest, de manera que només s'utilitzi quan sigui realment necessari.</dd> + <dt>{{htmlattrxref("muted","video")}}</dt> + <dd>Aquest atribut fa que el medi es reprodueixi amb el so desactivat per defecte.</dd> + <dt>{{htmlattrxref("poster","video")}}</dt> + <dd>Aquest atribut pren com a valor l'adreça URL d'una imatge, que es podrà veure abans de reproduir-se el vídeo. Està destinat a ser utilitzat per a una pantalla de presentació o de publicitat.</dd> + <dt>{{htmlattrxref("preload","video")}}</dt> + <dd> + <p>Aquest atribut s'utilitza en l'element per emmagatzemar en búfer arxius grans. Pot prendre un dels 3 valors:</p> + + <ul> + <li><code>"none"</code> no emmagatzema l'arxiu en búfer</li> + <li><code>"auto"</code> emmagatzema l'arxiu multimèdia en búfer</li> + <li><code>"metadata"</code> només emmagatzema en búfer les metadades de l'arxiu</li> + </ul> + </dd> +</dl> + +<p>Es pot trobar l'exemple anterior disponible per <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">reproduir en viu en Github</a> (també <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">veureu el codi font</a>.) Recordeu que no hem inclòs l'atribut de reproducció automàtica en la versió en viu - si el vídeo comença a reproduir-se tan aviat com es carrega la pàgina, no es veurà el cartell!</p> + +<h3 id="L'element_<audio>">L'element <audio></h3> + +<p>L'element {{htmlelement("audio")}} funciona exactament de la mateixa manera que l'element {{htmlelement("video")}}, amb algunes petites diferències com s'indica a continuació. Un exemple típic podria ser així:</p> + +<pre class="brush: html"><audio controls> + <source src="viper.mp3" type="audio/mp3"> + <source src="viper.ogg" type="audio/ogg"> + <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p> +</audio></pre> + +<p>Això produeix alguna cosa, com el següent, en un navegador:</p> + +<p><img alt="A simple audio player with a play button, timer, volume control, and progress bar" src="https://mdn.mozillademos.org/files/12798/audio-player.png" style="display: block; height: 413px; margin: 0px auto; width: 626px;"></p> + +<div class="note"> +<p><strong>Nota</strong>: Es pot <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">executar la demostració d'àudio en viu</a> en Github (també veure el <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">codi font reproductor d'àudio</a>.)</p> +</div> + +<p>Aquest ocupa menys espai que un reproductor de vídeo, ja que no hi ha component visual - només ha de mostrar els controls per reproduir l'àudio. Altres diferències amb el vídeo HTML5 són els següents:</p> + +<ul> + <li>L'element {{htmlelement("audio")}} no suporta els atributs <code>width/height</code> - de nou, no hi ha cap component visual, de manera que no hi ha res per assignar una amplada o l'alçada.</li> + <li>Així mateix, no és compatible amb l'atribut <code>poster</code> - de nou, cap component visual.</li> +</ul> + +<p>A part d'això, <audio> suporta les mateixes característiques que <video> - reviseu les seccions anteriors per obtenir més informació sobre ells.</p> + +<h2 id="Visualitzar_pistes_de_text_de_vídeo">Visualitzar pistes de text de vídeo</h2> + +<p>Ara parlarem d'un concepte una mica més avançat que és molt útil conèixer. Moltes persones no poden o no volen escoltar el contingut d'àudio/vídeo que troben a la web, almenys en determinats moments. Per exemple:</p> + +<ul> + <li>Moltes persones tenen problemes auditius (més comunament coneguda com problemes d'audició o sordesa) pel que no poden sentir l'àudio.</li> + <li>Altres poden no ser capaços d'escoltar l'àudio perquè es troben en ambients sorollosos (com un bar ple de gent quan s'està veient un joc d'esports) o no voldrien molestar a altres persones si estan en un lloc tranquil (com una biblioteca.)</li> + <li>Les persones que no parlen l'idioma del vídeo, pot ser que vulguin una transcripció del text traduït o fins i tot una ajuda per entendre el contingut del medi.</li> +</ul> + +<p>No seria agradable proporcionar a aquestes persones amb una transcripció de les paraules que es parla en l'àudio/vídeo? Bé, gràcies a vídeo HTML5, es pot amb el format <a href="/en-US/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT</a> i l'element {{htmlelement("track")}}.</p> + +<div class="note"> +<p><strong>Nota</strong>: "transcriure" i "transcripció" vol dir escriure les paraules parlades com a text.</p> +</div> + +<p>WebVTT és un format per escriure arxius de text que contenen diverses cadenes de text juntament amb metadades, així com a quina hora volem que en el video, es mostri cada cadena de text i fins i tot informació limitada d'estil/posicionament. Aquestes cadenes de text s'anomenen senyals, i també poden mostrar diferents tipus per a diferents propòsits, sent els més comuns:</p> + +<dl> + <dt>subtitles</dt> + <dd>Traduccions de material estranger, per a persones que no entenen les paraules pronunciades en l'àudio.</dd> + <dt>captions</dt> + <dd>Transcripcions sincronitzades de diàleg o descripcions de sons significatius, permeten a les persones que no poden sentir l'àudio entendre el que està passant.</dd> + <dt>timed descriptions</dt> + <dd>Text per a la conversió a àudio, serveix a les persones amb discapacitat visual.</dd> +</dl> + +<p>Un arxiu típic WebVTT es veurà així:</p> + +<pre class="eval line-numbers language-html"><code class="language-html">WEBVTT + +1 +00:00:22.230 --> 00:00:24.606 +This is the first subtitle. + +2 +00:00:30.739 --> 00:00:34.074 +This is the second. + + ...</code> +</pre> + +<p>Perquè es visualitzi juntament amb la reproducció de medis HTML, cal:</p> + +<ol> + <li>Guardar-ho com un arxiu <code>.vtt</code> en un lloc sensible.</li> + <li>Enllaçar al arxiu <code>.vtt</code> amb l'element {{htmlelement("track")}}. <code><track></code> ha de ser col·locat dins <code><audio></code> o <code><video></code>, però després de tots els <code><source></code>. Utilitzar l'atribut {{htmlattrxref("kind","track")}} per especificar si els senyals són <code>subtitles</code>, <code>captions</code> o <code>descriptions</code>. A més, utilitzar {{htmlattrxref("srclang","track")}} per indicar al navegador l'idioma en què s'han escrit els subtítols.</li> +</ol> + +<p>Heus aquí un exemple:</p> + +<pre class="brush: html"><video controls> + <source src="example.mp4" type="video/mp4"> + <source src="example.webm" type="video/webm"> + <track kind="subtitles" src="subtitles_en.vtt" srclang="en"> +</video></pre> + +<p>Això resultarà un vídeo que mostrarà subtítols, agradable com aixó:</p> + +<p><img alt='Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p> + +<p>Per a més detalls, si us plau llegiu <a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Afegir llegendes i subtitols a video HTML5</a>. Es pot <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">trobar l'exemple</a> que acompanya aquest article a Github, escrit per Ian Devlin (veureu també el codi font .) En aquest exemple s'utilitza una mica de JavaScript per permetre als usuaris triar entre diferents subtítols. Recordeu que per activar els subtítols, cal prémer el botó "CC" i seleccionar una opció - English, Deutch o Español.</p> + +<div class="note"> +<p><strong>Nota</strong>: Les pistes de text també ajudan amb {{glossary("SEO")}}, ja que els motors de cerca prosperen especialment en el text. Les pistes de text, fins i tot, permeten que els motors de cerca enllacin directament a un lloc parcial a través del vídeo.</p> +</div> + +<h2 id="Aprenentatge_actiu_Incrustar_el_nostre_àudio_i_vídeo">Aprenentatge actiu: Incrustar el nostre àudio i vídeo</h2> + +<p>Per a aquest aprenentatge actiu, ens agradaria (idealment) que sortíssiu al món i registréssiu alguns vídeos i àudio - la majoria dels telèfons, avui dia, permeten gravar àudio i vídeo molt fàcilment, i sempre es pot transferir al ordinador, ho podeu fer servir. Podria ser necessari fer una mica de conversió acabant amb un WebM i MP4 en el cas de vídeo, i un MP3 i Ogg en el cas de l'àudio, però hi ha suficients programes que permeten fer això sense masses problemes, com <a href="http://www.mirovideoconverter.com/">Miro Video Converter</a> i <a href="https://sourceforge.net/projects/audacity/">Audacity</a>. Ens agradaria que ho provéssiu!</p> + +<p>Si no podeu tenir qualsevol font de vídeo o d'àudio, llavors sou lliures d'utilitzar els nostres <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">arxius d'àudio i vídeo d'exemple</a> per dur a terme aquest exercici. També es pot utilitzar el nostre codi d'exemple com a referència.</p> + +<p>Ens agradaria que:</p> + +<ol> + <li>Guardar els arxius d'àudio i vídeo en un nou directori a l'equip.</li> + <li>Crear un nou arxiu HTML en el mateix directori, anomenat <code>index.html</code>.</li> + <li>Afegir els elements <code><audio></code> i <code><video></code> a la pàgina; fer que es mostrin els controls del navegador per defecte.</li> + <li>Proporcionar, a tots dos, elements <code><source></code> perquè els navegadors trobin el format d'àudio que millor suportin i carregar-lo. Aquests han d'incloure els atributs <code>type</code>.</li> + <li>Donar a l'element <code><vídeo></code> un cartell que es mostrarà abans que el vídeo comenci a ser reproduït. Divertir-vos creant el vostre cartell gràfic.</li> +</ol> + +<p>Per a un bo addicional, es podria intentar investigar les pistes de text, i trobar la manera d'afegir una mica de subtítols al vídeo.</p> + +<h2 id="Sumari">Sumari</h2> + +<p>I això és un embolcall; esperem que us hagi divertit jugar amb vídeo i àudio en les pàgines web! En el proper article, veurem altres formes d'inserir continguts a la web, utilitzant tecnologies com {{htmlelement("iframe")}} i {{htmlelement("object")}}.</p> + +<h2 id="Veure">Veure</h2> + +<ul> + <li>{{htmlelement("audio")}}</li> + <li>{{htmlelement("video")}}</li> + <li>{{htmlelement("source")}}</li> + <li>{{htmlelement("track")}}</li> + <li><a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Afegir llegendes i subtitols a vídeo HTML5</a></li> + <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Lliurament d'Àudio i Vídeo</a>: Un MUNT de detalls sobre com posar àudio i vídeo en pàgines web utilitzant HTML i JavaScript.</li> + <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation">Manipulació d'Àudio i Vídeo</a>: Un MUNT de detalls sobre la manipulació d'àudio i vídeo mitjançant JavaScript (per exemple, afegir filtres)</li> +</ul> + +<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</p> + +<dl> +</dl> + +<ul> +</ul> diff --git a/files/ca/learn/html/multimèdia_i_incrustar/de_objecte_a_iframe_altres_tecnologies_incrustació/index.html b/files/ca/learn/html/multimèdia_i_incrustar/de_objecte_a_iframe_altres_tecnologies_incrustació/index.html new file mode 100644 index 0000000000..0a69bc1d47 --- /dev/null +++ b/files/ca/learn/html/multimèdia_i_incrustar/de_objecte_a_iframe_altres_tecnologies_incrustació/index.html @@ -0,0 +1,318 @@ +--- +title: De objecte a iframe - altres tecnologies d'incrustació +slug: >- + Learn/HTML/Multimèdia_i_incrustar/De_objecte_a_iframe_altres_tecnologies_incrustació +tags: + - Article + - Beginner + - CodingScripting + - Embedding + - Flash + - Guide + - HTML + - Learn + - Multimedia and embedding + - Object + - embed + - iframe +translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}</div> + +<p class="summary">Per ara, realment, s'aconseguit penjar coses incrustades en les pàgines web, incloent imatges, àudio i vídeo. En aquest punt ens agradaria fer un petit pas a banda, mirant a alguns elements que ens permetin introduir una àmplia varietat de tipus de contingut en les pàgines web: els elements {{htmlelement("iframe")}}, {{htmlelement("embed")}} i {{htmlelement("object")}}. Els <iframe>s són per incrustar altres pàgines web, i els altres dos, permeten incrustar arxius PDF, SVG, i fins i tot, flash - una tecnologia que està en camí de desaparèixer, però que encara es veu semi-regular.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits Previs:</th> + <td>Coneixements bàsics d'informàtica, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">programari bàsic instal.lat</a>, coneixement bàsic de <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">tractar amb arxius</a>, familiaritat-se amb els fonaments d'HTML (com s'explica en <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Inici amb HTML</a>) i els articles anteriors d'aquest mòdul.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Aprendre com inserir elements en pàgines web fent servir {{htmlelement("object")}}, {{htmlelement("embed")}} i {{htmlelement("iframe")}}, com pel·lícules Flash i altres pàgines web.</td> + </tr> + </tbody> +</table> + +<h2 id="Una_breu_història_de_la_incrustació">Una breu història de la incrustació</h2> + +<p>Fa molt de temps, a la web, era popular l'ús de <strong>marcs (frames)</strong> per crear llocs web - petites parts d'un lloc web que s'emmagatzemaven en pàgines HTML individuals. Aquests eran inserits en un document mestre anomenat <strong>conjunt de marcs (frameset)</strong>, el que permetia especificar l'àrea de la pantalla de cada marc ple, com una manera de dimensionar columnes i files d'una taula. Aquests van ser considerats un súmmum de frescor a mitjans i finals dels 90, però no hi havia proves, que tenir la pàgina web dividida en trossos més petits com aquest era millor per la velocitat de descàrrega - sent especialment notable que les connexions de xarxa era tan lentes en aquell temps. Però, van tenir molts problemes, que sobrepassaven els aspectes positius com la velocitat de la xarxa, ara més ràpida, pel que ja no es veu la seva utilització.</p> + +<p>Una mica més tard (finals dels 90, principis de 2000), les tecnologies de plug-in es van fer molt populars, com els <a href="/en-US/docs/Glossary/Java">Java Applets</a> i <a href="/en-US/docs/Glossary/Adobe_Flash">Flash</a> - aixó va permetre els desenvolupadors web incrustar un contingut ric en pàgines web com vídeo i animacions, que simplement no estaven disponibles a través d'HTML. La incrustació d'aquestes tecnologies es va aconseguir mitjançant elements com {{htmlelement("object")}}, i el menys usat {{htmlelement("embed")}}, van ser molt útils a l'hora. Des de llavors, han caigut en desús a causa de molts problemes, inclosa l'accessibilitat, la seguretat, mida del fitxer, i més; avui dia la majoria dels dispositius mòbils no són compatibles amb aquest tipus de plugins, i el suport d'escriptori està en el camí de ser exclòs.</p> + +<p>Finalment, l'element {{htmlelement("iframe")}} va aparèixer (juntament amb altres formes d'inserir contingut, com {{htmlelement("canvas")}}, {{htmlelement("video")}}, etc.) Això va proporcionar una manera de incrustar un document web sencer dins d'un altre, com si es tractés d'un {{htmlelement("img")}} o un altre element, i s'utilitza regularment en l'actualitat.</p> + +<p>Sortint de la lliçó de la història, anem a seguir endavant i veure com utilitzar alguns d'aquests.</p> + +<h2 id="Aprenentatge_actiu_usos_clàssics_d'incrustació">Aprenentatge actiu: usos clàssics d'incrustació</h2> + +<p>En aquest article saltarem directament a una secció d'aprenentatge actiu, per donar-vos immediatament una idea real del que les tecnologies d'incrustació són útils. El món en línia està molt familiaritzat amb <a href="https://www.youtube.com">Youtube</a>, però moltes persones no saben sobre algunes dels mecanismes d'intercanvi que té disponibles. Vegem com Youtube ens permet incrustar un vídeo en qualsevol pàgina que ens agradi, utilitzant un {{htmlelement("iframe")}}.</p> + +<ol> + <li>En primer lloc, anar a Youtube i trobar un vídeo que us agradi.</li> + <li>A continuació en el vídeo trobareu un botó <em>Compartir</em> - seleccioneu aquesta opció per mostrar les opcions d'ús compartit.</li> + <li>Seleccioneu l'opció <em>Inserir</em> i se us donarà un cert codi <code><iframe></code> - copieu aquest.</li> + <li>Inserir-lo en el <em>quadre</em> d'entrada de sota, i veureu quin és el resultat a la <em>sortida</em>.</li> +</ol> + +<p>Per als punts de bonificació, també es podria tractar d'insertar un <a href="https://www.google.com/maps/">Google Map</a> en l'exemple:</p> + +<ol> + <li>Aneu a Google Maps i trobar un mapa que us agradi.</li> + <li>Feu clic al "Hamburger Menu" (tres línies horitzontals) a la part superior esquerra de la interfície d'usuari.</li> + <li>Seleccioneu l'opció <em>Compartir o insetar un mapa</em>.</li> + <li>Seleccionar l'opció insertar un mapa, us donarà un cert codi <code><iframe></code> - copieu aquest.</li> + <li>Inserir-lo en el <em>quadre</em> d'entrada de sota, i veureu quin és el resultat a la <em>sortida</em>.</li> +</ol> + +<p>Si cometeu un error, sempre es pot restablir amb el botó de <em>Reinici</em>. Si aconseguiu realment queda encallats, feu clic al botó <em>Mostra solució</em> per veure una resposta.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input"> +</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 10em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +.output { + height: 14em; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<iframe width="420" height="315" src="https://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" allowfullscreen>\n</iframe>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 600) }}</p> + +<h2 id="Iframes_en_detall">Iframes en detall</h2> + +<p>Per tant, això va ser fàcil i divertit oi? Els elements {{htmlelement("iframe")}} estan dissenyats per permetre inserir altres documents web dins del document actual. Això és molt bó per incorporar continguts de tercers al lloc web en que no es pot tenir control directe sobre i no es vol haver d'implementar la seva pròpia versió - com els vídeo de proveïdors de vídeo en línia, sistemas de comentarios como <a href="https://disqus.com/">Disqus</a>, mapes de proveïdors de mapes en línia, pancartes publicitaries, etc. Els exemples editables en directe que s'han estat usant a través d'aquest curs s'implementen utilitzant <iframe>s.</p> + +<p>Hi ha alguns {{anch("Problemes de seguretat")}} greus a considerar amb els <iframe>s, com veurem més endavant, però això no vol dir que no s'hagin d'utilitzar en els llocs web - només requereix una mica de coneixement i un raonament. Explorarem el codi en una mica més de detall. Digueu que voleu incloure en el glossari MDN en una de les seves pàgines web - podreu intentar alguna cosa com això:</p> + +<pre><iframe src="https://developer.mozilla.org/en-US/docs/Glossary" + width="100%" height="500" frameborder="0" + allowfullscreen sandbox> + <p> <a href="https://developer.mozilla.org/en-US/docs/Glossary"> + Fallback link for browsers that don't support iframes + </a> </p> +</iframe></pre> + +<p>Aquest exemple inclou els elements essencials bàsics necessaris per utilitzar un <code><iframe></code>:</p> + +<dl> + <dt>{{htmlattrxref('allowfullscreen','iframe')}}</dt> + <dd>Si s'estableix, el <code><iframe></code> és capaç de ser col·locat en la manera de pantalla completa amb <a href="/en-US/docs/Web/Apps/Fundamentals/User_notifications/Full_screen_api">Full Screen API</a> (està fora de l'abast per a aquest article).</dd> + <dt>{{htmlattrxref('frameborder','iframe')}}</dt> + <dd>Si s'estableix en 1, això indica al navegador per establir una frontera entre aquest marc i altres marcs, que és el comportament per defecte. 0 elimina la frontera. L'ús d'aquest realment no es recomana més, ja que el mateix efecte es pot aconseguir, millor, mitjançant {{cssxref('border')}}: <code>none</code>; en el {{Glossary('CSS')}}.</dd> + <dt>{{htmlattrxref('src','iframe')}}</dt> + <dd>Aquest atribut, igual que amb {{htmlelement("video")}}/{{htmlelement("img")}}, conté una ruta que apunta a la URL del document per a ser incrustat.</dd> + <dt>{{htmlattrxref('width','iframe')}} i {{htmlattrxref('height','iframe')}}</dt> + <dd>Aquests atributs especifiquen l'amplada i l'alçada que es vol que tingui el iframe.</dd> + <dt>Contingut alternatiu</dt> + <dd>De la mateixa manera que altres elements similars com {{htmlelement("video")}}, pot incloure el contingut alternatiu entre les etiquetes d'obertura i tancament <code><iframe></iframe></code> que apareixeran si el navegador no suporta l'etiqueta <code><iframe></code>. En aquest cas hem inclòs un enllaç a la pàgina en el seu lloc. És poc probable trobar-se amb qualsevol navegador que no sigui compatible amb <code><iframe></code>s avui dia.</dd> + <dt>{{htmlattrxref('sandbox','iframe')}}</dt> + <dd>Aquest atribut, funciona en navegadors una mica més modern que la resta de les característiques <code><iframe></code> (per exemple, Internet Explorer 10 i superior) sol·licita la configuració de seguretat reforçada; direm més sobre això en la següent secció.</dd> +</dl> + +<div class="note"> +<p><strong>Nota</strong>: Per tal de millorar la velocitat, és una bona idea establir l'atribut <code>src</code> de l'iframe amb JavaScript després que el contingut principal s'hagi carregat. Això fa que la pàgina s'utilitzi més aviat i disminueixi el temps de càrrega de la pàgina oficial (una mètrica important {{glossary("SEO")}}).</p> +</div> + +<h3 id="Problemes_de_seguretat">Problemes de seguretat</h3> + +<p>Esmentem abans els problemes de seguretat - Entrarem en això en detall, una mica més, ara. No esperem que es pugui entendre tot aquest contingut perfectament la primera vegada; només volem fer-vos conscients d'aquesta preocupació, i proporcionar una referència per tornar a mesura que tingueu més experiéncia i començar a considerar l'ús de <code><iframe></code>s en els vostres experiments i treball. A més, no hi ha necessitat de tenir por i no utilitza <code><iframe></code>s - només s'ha de tenir cura. Seguiu llegint...</p> + +<p>Els fabricants de navegadors i desenvolupadors web han après per les males que els iframes són un objectiu comú (terme oficial: <strong>attack vector</strong>) per a les persones dolentes a la web (sovint anomenat <strong>hackers</strong>, o més exactament, <strong>crackers</strong>) per atacar, si estan tractant de modificar maliciosament la vostre pàgina web, o enganyar a la gent a fer alguna cosa que no volen fer, com revelar informació sensible com noms d'usuari i contrasenyes. A causa d'això, els enginyers d'especificacions i els desenvolupadors de navegadors han desenvolupat diversos mecanismes de seguretat per fer <code><iframe></code>s més segurs, i també estan les millors pràctiques a tenir en compte - anem a cobrir alguns d'aquests a continuació.</p> + +<div class="note"> +<p>{{interwiki('wikipedia','Clickjacking')}} és un tipus d'atac iframe comú on els pirates informàtics incrustan un iframe invisible en el document (o incrustan el document en el seu propi lloc web maliciós) i el fan servir per capturar les interaccions dels usuaris. Aquesta és una forma comuna de confondre als usuaris o robar dades confidencials.</p> +</div> + +<p>Un exemple ràpid, primer - intenteu carregar l'exemple anterior, mostrat previament, en el vostre navegador - es pot <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html">trobar en Github</a> (<a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html">veure el codi font</a> també). No veureu, realment, res que apareigui a la pàgina, i si ens fixem en la <em>consola</em> en les <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">eines de desevolupament del navegador</a>, veureu un missatge que us indica perquè. En Firefox, se hos dirá, càrrega denegada per<em> X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary, no permet marcs</em>. Això es deu al fet que els desenvolupadors que van construir MDN han inclòs una configuració al servidor que serveix a les pàgines del lloc web de no permetre que siguin incrustades a l'interior de <code><iframe></code>s (veure {{anch("Configure CSP directives")}}, més avall). Això té sentit - una pàgina sencere MDN no té molt sentit incrustar-la en altres pàgines, llevat que es vulgui fer alguna cosa com incrustar-la el vostre lloc i reclamar-les com a propies - o l'intent de robatori de dades a través de clickjacking, que són alhora coses molt dolentes, que es poden fer. A més, si tothom comences a fer això, tot l'ample de banda addicional començaria a costar-li molts diners a Mozilla.</p> + +<h4 id="Només_incrustar_quan_sigui_necessari">Només incrustar quan sigui necessari</h4> + +<p>De vegades té sentit incrustar el contingut de tercers - com vídeos i mapes youtube - però ens podem estalviar molts mals de cap si només incrusten contingut de tercers quan sigui completament necessari. Una bona regla d'or per a la seguretat web és <em>"Mai es pot ser massa cautelós. Si ho heu fet, torneu a comprovar-ho de totes maneres. Si algú més ho ha fet, se suposa que és perillós fins que es demostri el contrari"</em>.</p> + +<div> +<p>A més de la seguretat, també s'ha d'estar al tant de les qüestions de la propietat intel·lectual. La majoria dels continguts té drets d'autor, fora de línia i en línia, fins i tot continguts que no us ho espereu (per exemple, la majoria de les imatges de <a href="https://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a>). Mai mostrar el contingut de la vostra pàgina web a menys que el propietari o els propietaris hagin donat per escrit, l'autorització inequívoca. Les sancions per infracció de drets d'autor són greus. Un cop més, mai es pot ser massa cautelós.</p> + +<p>Si el contingut és llicenciat, s'ha d'obeir els termes de la llicència. Per exemple, el contingut MDN és <a href="/en-US/docs/MDN/About#Copyrights_and_licenses">sota llicència CC-BY-SA</a>. Això vol dir, que s'ha d'<a href="https://wiki.creativecommons.org/wiki/Best_practices_for_attribution">acreditar adequadament</a> quan se cita el nostre contingut, fins i tot si es realitzen canvis substancials.</p> +</div> + +<h4 id="Utilitzar_HTTPS">Utilitzar HTTPS</h4> + +<p>{{Glossary("HTTPS")}} és la versió encriptada de {{Glossary("HTTP")}}. S'h de fer servir, HTTPS, en els vostres llocs web sempre que sigui possible:</p> + +<ol> + <li>HTTPS redueix la possibilitat que el contingut remot hagi estat manipulat en trànsit,</li> + <li>HTTPS impedeix que el contingut incrustat accedeixi al contingut del vostre document principal, i viceversa.</li> +</ol> + +<p>L'ús d'HTTPS requereix un certificat de seguretat, que pot ser car (encara que <a href="https://letsencrypt.org/">Let's Encrypt</a> facilita les coses) - si no es pot aconseguir un, es pot fer servir el document principal amb HTTP. No obstant això, a causa del segon benefici descrit anteriorment sobre HTTPS , <em>no importa el que costi, mai s'ha de incrustar contingut de tercers amb HTTP. </em>(En el millor dels casos, el navegador web de l'usuari donarà un advertiment de por). Totes les empreses de renom que fan que el contingut disponible vagi incrustar a través d'un <code><iframe></code> ho farà disponible a través d'HTTPS - mirar les URL dins de l'atribut <code>src</code> d'<code><iframe></code> quan està incrustant contingut de Google Maps o Youtube, per exemple.</p> + +<div class="note"> +<p><strong>Nota</strong>: <a href="/en-US/docs/Learn/Common_questions/Using_Github_pages">Les pàgines de Github</a> permeten que el contingut se serveixi a través d'HTTPS de forma predeterminada, per la qual cosa és útil per allotjar contingut. Si utilitzeu altre allotjament i no esteu segurs, consulteu al vostre proveïdor d'allotjament, sobre això.</p> +</div> + +<h4 id="Utilitzar_sempre_l'atribut_sandbox">Utilitzar sempre l'atribut <code>sandbox</code></h4> + +<p>Si es vol donar als atacants poc poder, com sigui possible, per fer coses dolentes al vostre lloc web, s'ha de donar els continguts incrustats, només, els permisos necessaris per realitzar-lo. Per descomptat, això també, s'aplica al vostre propi contingut. Un contenidor de codi el qual es pot utilitzar apropiadament - o per a les proves - però no pot causar cap mal a la resta de la base del codi (ja sigui accidental o maliciós) s'anomena <a href="https://en.wikipedia.org/wiki/Sandbox_(computer_security)">sandbox</a>.</p> + +<p>El contingut sense sandbox pot fer molt (l'execució de JavaScript, l'enviament de formularis, finestres emergents, etc.) Per defecte s'ha d'imposar totes les restriccions disponibles mitjançant l'atribut <code>sandbox</code> sense paràmetres, com es mostra en l'exemple anterior.</p> + +<p>Si és absolutament necessari, es pot afegir permisos de tornada un per un (dins del valor d'atribut <code>sandbox</code> ="" ) - veure la referència d'entrada {{htmlattrxref('sandbox','iframe')}} per a totes les opcions disponibles. Una nota important és que <em>mai</em> s'ha d'afegir tant <code>allow-scripts</code> i <code>allow-same-origin</code> al seu atribut <code>sandbox</code> - en aquest cas el contingut incrustat podria passar per alt la mateixa política de seguretat d'origen que deté l'execució de scripts de llocs i l'ús de JavaScript per desactivar completament la sandbox.</p> + +<div class="note"> +<p><strong>Nota</strong>: La Sandboxing no proporciona cap protecció si els atacants poden enganyar a la gent perquè visiti el contingut maliciós directament (fora d'un iframe). Si hi ha alguna possibilitat que cert contingut pot ser maliciós (per exemple, el contingut generat per l'usuari), si us plau feu servir un {{glossary("domini")}} diferent del vostre lloc principal.</p> +</div> + +<h4 id="Configurar_directives_CSP">Configurar directives CSP</h4> + +<p>La {{Glossary("CSP")}} representa la <strong><a href="/en-US/docs/Web/Security/CSP">content security policy</a></strong>, i proporciona <a href="/en-US/docs/Web/Security/CSP/CSP_policy_directives">un conjunt de capçaleres HTTP</a> (metadades enviades juntament amb les seves pàgines web quan es serveixen des d'un servidor web) dissenyades per millorar la seguretat del document HTML. Quan es tracta de protegir <code><iframe></code>s, es pot <em><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options">configurar el servidor per a enviar una capçalera X-Frame-Options apropiada</a></em>. Això pot evitar que altres llocs web incrustin el seu contingut en les vostres pàgines web (el que permetria {{interwiki('wikipedia','clickjacking')}} i una sèrie d'altres atacs), que és exactament el que els desenvolupadors MDN han fet, com hem vist anteriorment.</p> + +<div class="note"> +<p><strong>Nota</strong>: Es pot llegir el post de Frederik Braun <a href="https://blog.mozilla.org/security/2013/12/12/on-the-x-frame-options-security-header/">On the X-Frame-Options Security Header</a> per obtenir més informació d'antecedents sobre aquest tema. Òbviament, està fora de l'abast, per a una explicació completa, d'aquest article.</p> +</div> + +<h2 id="Els_elements_<embed>_i_<object>">Els elements <embed> i <object></h2> + +<p>Els elements {{htmlelement("embed")}} i {{htmlelement("object")}} compleixen una funció diferent a {{htmlelement("iframe")}} - aquests elements de propòsit general són eines d'inserció per a la incrustació de diversos tipus de contingut extern, que inclouen tecnologies de complements com els applets de Java i flash, PDF (es pot mostrar en un navegador amb un plugin PDF), i fins i tot el contingut com vídeos, SVG i les imatges!</p> + +<div class="note"> +<p><strong>Nota</strong>: Un <strong>plugin</strong> és un programari que proporciona accés als continguts del navegador que no pot llegir de forma nativa.</p> +</div> + +<p>No obstant això, és poc probable que utilitzeu molt aquests elements - Els applets no s'han utilitzat durant anys, Flash ja no és molt popular, a causa d'una sèrie de raons (veure {{anch("El cas contra els complements")}}, més endavant), els arxius PDF tendeixen a estar millor enllaçats que incrustats, i altres continguts com a imatges i video tenen elements molt millors i més fàcils de manejar. Plugins i aquests mètodes d'incrustació són realment una tecnologia heretada, i els estem esmentant principalment en cas que us trobeu amb ells en certes circumstàncies com a intranets o projectes empresarials.</p> + +<p>Si necessiteu incorporar contingut de plugin, aquest és el tipus d'informació que necessitareu, com a mínim:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"> </th> + <th scope="col">{{htmlelement("embed")}}</th> + <th scope="col">{{htmlelement("object")}}</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{glossary("URL")}} del contingut incrustat</td> + <td>{{htmlattrxref('src','embed')}}</td> + <td>{{htmlattrxref('data','object')}}</td> + </tr> + <tr> + <td><em>accurate </em>{{glossary("MIME type", 'media type')}} del contingut incrustat</td> + <td>{{htmlattrxref('type','embed')}}</td> + <td>{{htmlattrxref('type','object')}}</td> + </tr> + <tr> + <td>l'altura i l'amplada (en píxels CSS) de la caixa controlada pel complement</td> + <td>{{htmlattrxref('height','embed')}}<br> + {{htmlattrxref('width','embed')}}</td> + <td>{{htmlattrxref('height','object')}}<br> + {{htmlattrxref('width','object')}}</td> + </tr> + <tr> + <td>noms i valors, per alimentar el complement com paràmetres</td> + <td>atributs ad hoc amb els noms i valors</td> + <td>elements d'una sola etiqueta {{htmlelement("param")}}, continguts dins <code><object></code></td> + </tr> + <tr> + <td>Contingut HTML independent com a recurs alternatiu per a un recurs no disponible</td> + <td>No suportat (<noembed> és obsolet)</td> + <td>contingut dins <code><object></code>, després d'elements <code><param></code></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Nota</strong>: <object> requereix un atribut data, un atribut type, o tots dos. Si s'utilitzant ambdòs, també es pot utilitzar l'atribut {{htmlattrxref('typemustmatch','object')}} (només implementat en Firefox, a partir d'aquest escrit). typemustmatch mante l'arxiu incrustat a que s'executi llevat que l'atribut type proporcioni el tipus de medi correcte. Per tant, typemustmatch pot conferir beneficis significatius de seguretat quan està incrustar el contingut d'un {{glossary("origen")}} diferent (pot mantenir els atacants d'executar scripts arbitràries mitjançant el complement).</p> +</div> + +<p>Heus aquí un exemple que utilitza l'element {{htmlelement("embed")}} per incrustar una pel lícula Flash (veure aquest <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html">en Github</a> i <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html">comprovar el codi font</a> també):</p> + +<pre class="brush: html"><embed src="whoosh.swf" quality="medium" + bgcolor="#ffffff" width="550" height="400" + name="whoosh" align="middle" allowScriptAccess="sameDomain" + allowFullScreen="false" type="application/x-shockwave-flash" + pluginspage="http://www.macromedia.com/go/getflashplayer"></pre> + +<p>Bastant horrible, no ho és. El HTML generat per l'eina d'Adobe Flash tendia a ser encara pitjor, l'ús d'un element <code><object></code> amb un element <code><embed></code> incrustat en ell, per cobrir totes les bases (fes un cop d'ull a un exemple). El flaix fins i tot va ser utilitzat amb èxit com a contingut alternatiu a HTML5 de vídeo, per un temps, però això cada vegada es veu més innecessari.</p> + +<p>Ara veurem un exemple <object>, que insereix un PDF en una pàgina (vegeu l'<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html">exemple en viu</a> i el <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html">codi font</a>):</p> + +<pre class="brush: html"><object data="mypdf.pdf" type="application/pdf" + width="800" height="1200" typemustmatch> + <p>You don't have a PDF plugin, but you can <a href="myfile.pdf">download the PDF file.</a></p> +</object></pre> + +<p>Els PDFs eren un pas necessari entre el paper i el digital, però plantegen molts <a href="http://webaim.org/techniques/acrobat/acrobat">reptes d'accessibilitat</a> i poden ser difícils de llegir en pantalles petites. Encara tendeixen a ser popular en alguns cercles, però és molt millor enllaçar-los perquè puguin ser descarregats o llegits en una pàgina separada, en lloc de incrustar-los en una pàgina web.</p> + +<h3 id="El_cas_en_contra_dels_complements_(plugins)">El cas en contra dels complements (plugins)</h3> + +<p>Hi havia una vegada, que els complements (plugins) eran indispensables a la web. Recordeu els dies en què calia instal·lar Adobe Flash Player, només, per veure una pel·lícula en línia? Llavors teníem constantment alertes molestes sobre l'actualització de Flash Player i el seu entorn d'execució de Java. Les tecnologies web han crescut molt més robustes, i aquells dies s'han acabat. Per a la majoria de les aplicacions, és hora que deixin de lliurar contingut que depenguin dels complements (plugins), i comencin a prendre avantatge de les tecnologies web al seu lloc.</p> + +<ul> + <li><strong>Ampliar el seu abast a tot el món. </strong>Tothom té un navegador, però els complements (plugins) són cada vegada mes rars, especialment entre els usuaris mòbils. Atès que la web és en gran part utilitzable sense complements (plugins), la gent prefereix anar als llocs web dels seus competidors, que instal·lar un complement (plugin).</li> + <li><strong>Feu una pausa amb els <a href="http://webaim.org/techniques/flash/">mals de cap d'accessibilitat addicionals </a>que vénen amb Flash i altres complements (plugins).</strong></li> + <li><strong>Mantenir-se allunyat dels riscos de seguretat addicionals</strong>. Adobe Flash és <a href="http://www.cvedetails.com/product/6761/Adobe-Flash-Player.html?vendor_id=53">notoriament insegur,</a> fins i tot després d'un sens fi de pegats. El 2015, Alex Stamos, director de seguretat de Facebook, fins i tot va <a href="http://www.theverge.com/2015/7/13/8948459/adobe-flash-insecure-says-facebook-cso">demanar que se suspengues Adobe Flash.</a></li> +</ul> + +<p>Llavors, què s'ha de fer? Si es necessita interactivitat, HTML i {{glossary("JavaScript")}} ens pot donar fàcilment la feina feta sense necessitat d'applets de Java o tecnologia obsoleta ActiveX/BHO. En lloc de confiar en Adobe Flash, podem utilitzar <a href="/en-US/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage">vídeo HTML5 </a>per les necessitats media, per a gràfics vectorials <a href="/en-US/docs/Learn/HTML/Howto/Add_vector_image_to_a_webpage">SVG</a> i <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas</a> per a imatges i animacions complexes. <a href="https://plus.google.com/+PeterElst/posts/P5t4pFhptvp">Peter Elst escrivia fa uns anys </a>que Adobe Flash no sol ser l'eina adequada per al treball, excepte per a jocs i aplicacions empresarials especialitzades. Pel que fa a ActiveX, fins i tot el navegador Microsoft {{glossary("Microsoft Edge","Edge")}} ja no ho suporta.</p> + +<h2 id="Sumari">Sumari</h2> + +<p>El tema de la incrustació d'altres continguts en els documents web, de forma ràpida, pot arribar a ser molt complex, pel qual en aquest article hem tractat d'introduir d'una manera simple i familiar el que us pogui semblar d'una rellevancia immediata, mentre en seguit fent al·lusió a algunes de les característiques més avançades de les tecnologies involucrades. Per començar, és probable que feu servir la incrustació molt més enllà, inclouent continguts de tercers com mapes i vídeos en les vostres pàgines. A mesura que adquiriu més experiència, és probable que comenceu a trobar més usos per a ells.</p> + +<p>Hi ha moltes altres tecnologies que impliquen la incrustació de continguts externs a més dels que hem tractat aquí. Vam veure alguns, en els articles anteriors, com {{htmlelement("video")}}, {{htmlelement("audio")}} i {{htmlelement("img")}}, però hi ha altres a descobrir, com {{htmlelement("canvas")}} per generar en JavaScript gràfics 2D i 3D, i {{htmlelement("svg")}} per a incrustar gràfics vectorials. Aviat ens ocuparem de <a href="/en-US/docs/Web/SVG">SVG</a> en l'article següent del mòdul.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}</p> diff --git a/files/ca/learn/html/multimèdia_i_incrustar/images_in_html/index.html b/files/ca/learn/html/multimèdia_i_incrustar/images_in_html/index.html new file mode 100644 index 0000000000..839a38b400 --- /dev/null +++ b/files/ca/learn/html/multimèdia_i_incrustar/images_in_html/index.html @@ -0,0 +1,373 @@ +--- +title: Imatges en HTML +slug: Learn/HTML/Multimèdia_i_incrustar/Images_in_HTML +tags: + - Article + - Beginner + - Guide + - HTML + - Image + - alt text + - captions + - figcaption + - figure + - img +translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</div> + +<p class="summary">Al principi, la web era només text, i resultava molt avorrit. Afortunadament, no va passar gaire temps abans que s’afegís la capacitat d'incrustar imatges (i altres tipus de continguts més interessants) dins de les pàgines web. Hi ha altres tipus de mitjans multimèdia a tenir en compte, però és lògic començar amb l'humil element {{HTMLElement("img")}}, que s'utilitza per a incrustar en una pàgina web una imatge simple . En aquest article veurem com utilitzar-lo en profunditat, incloent els conceptes bàsics, com anotar-la amb llegendes amb l’element {{htmlelement("figure")}}, i com es relaciona amb les imatges de fons de CSS.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td>Coneixements bàsics d'informàtica, <a href="/ca/docs/Learn/Getting_started_with_the_web/Instal·lació_bàsica_programari">instal·lació de software bàsic</a>, coneixements bàsics de <a href="/ca/docs/Learn/Getting_started_with_the_web/Tractar_amb_arxius">treballar amb arxius</a>, familiaritat amb els fonaments de l’HTML (que exposen en l’article <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Getting_started">Introducció a l’HTML</a>.)</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Aprendre a incrustar imatges simples en HTML i comentar-les amb llegendes, i com es relacionen les imatges HTML amb les imatges de fons CSS.</td> + </tr> + </tbody> +</table> + +<h2 id="Posar_una_imatge_en_una_pàgina_web"><span id="result_box" lang="ca">P<span>osar una</span> <span>imatge</span> <span>en una pàgina</span> <span>web</span></span></h2> + +<p>Per posar una imatge simple en una pàgina web, s'utilitza l'element {{htmlelement("img")}}. Es tracta d’un element buit (que significa que no té contingut de text o etiqueta de tancament) que requereix un mínim d'un atribut per a ser útil: <code>src</code> (de vegades se l’anomena pel nom complet, <em>source</em>). L'atribut <code>src</code> conté una ruta que apunta a la imatge que es vol incrustar a la pàgina, que pot ser una adreça URL relativa o absoluta, de la mateixa manera que en l'element {{htmlelement("a")}} el valor de l'atribut <code>href</code>.</p> + +<div class="blockIndicator note"> +<p><strong>Nota: </strong>Fes una lectura de la <a href="https://wiki.developer.mozilla.org/ca/docs/Learn/HTML/Introducci%C3%B3_al_HTML/Crear_hipervincles#Una_introducci%C3%B3_r%C3%A0pida_a_les_adreces_URL_i_les_rutes">guia ràpida a les adreces i rutes</a> per refrescar la memòria abans de continuar.</p> +</div> + +<p>Així, per exemple, si la imatge es diu <code>dinosaur.jpg</code> i és en el mateix directori que la pàgina HTML, la imatge es podria incloure d'aquesta manera:</p> + +<pre class="brush: html notranslate"><img src="dinosaur.jpg"></pre> + +<p>Si la imatge és en un subdirectori d'imatges dins del mateix directori que la pàgina HTML (que és el que Google recomana per a propòsits de posicionament en cercadors ({{glossary("SEO")}}) / indexació), llavors s'incrusta així:</p> + +<pre class="brush: html notranslate"><img src="images/dinosaur.jpg"></pre> + +<p>I així succesivament.</p> + +<div class="note"> +<p><strong>Nota</strong>: Els motors de cerca també llegeixen els noms d'arxiu d'imatge i els tenen en compte en termes de SEO; per tant, s'ha de donar a la imatge un nom d'arxiu que sigui descriptiu (<code>dinosaur.jpg</code> és millor que <code>img835.png</code>.)</p> +</div> + +<p>La imatge es pot incloure utilitzant la seva adreça URL absoluta, per exemple:</p> + +<pre class="brush: html notranslate"><img src="https://www.example.com/images/dinosaur.jpg"></pre> + +<p>Però això no té sentit perquè el navegador té més feina a buscar l'adreça IP del servidor de nou, etc. Gairebé sempre, les imatges del lloc web es mantenen en el mateix servidor que l'HTML.</p> + +<div class="warning"> +<p><strong>Atenció:</strong> La majoria de les imatges tenen drets de propietat intelectual. <strong>No</strong> mostris una imatge a la pàgina web si no és que</p> + +<ul> + <li>n’ets el propietari,</li> + <li>has rebut permís explícit per escrit del propietari de la imatge, o</li> + <li>tens proves contundents que la imatge és de domini públic.</li> +</ul> + +<p>Les infraccions dels drets d'autor són il·legals i antiétiques. A més, no incloguis <strong>mai</strong> en l'atribut <code>src</code> una adreça url que apunti cap a una imatge que estigui allotjada en la pàgina web d'algú, si no tens permís per a enllaçar-la. D’això, se’n diu <em>hotlinking</em> i, un cop més, robar ample de banda d'algú altre és il·legal. També redueix la velocitat de la pàgina, i no tens control sobre la imatge si l’eliminen o la substitueixen per alguna altra cosa que et podria resultar enutjosa.</p> +</div> + +<p>El codi anterior donaria el resultat següent:</p> + +<p><img alt="Imatge bàsica d’un dinosaure incrustada en un navegador, amb el text Images in HTML escrit a dalt" src="https://mdn.mozillademos.org/files/12700/basic-image.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p> + +<div class="note"> +<p><strong>Nota</strong>: Els elements com {{htmlelement("img")}} i {{htmlelement("video")}} es denominen de vegades <strong>elements reemplaçats</strong>, perquè el contingut i la mida de l'element el defineix un recurs extern (com una imatge o un arxiu de vídeo), no el contingut propi de l’element.</p> +</div> + +<div class="note"> +<p><strong>Nota</strong>: Pots trobar l'exemple acabat al final d'aquesta secció, <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html">executat a GitHub</a> (consulta’n també el <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html">codi font</a>.)</p> +</div> + +<h3 id="Text_alternatiu">Text alternatiu</h3> + +<p>L’atribut següent que veurem és <code>alt</code>. El valor d’aquest atribut se suposa que és una descripció textual de la imatge, que s’utilitza en situacions en què la imatge no es pot veure/representar. Per exemple, el codi anterior es pot modificar d'aquesta manera:</p> + +<pre class="brush: html notranslate"><img src="images/dinosaur.jpg" + alt="The head and torso of a dinosaur skeleton; + it has a large head with long sharp teeth"></pre> + +<p>La manera més senzilla de provar el text alternatiu és escriure malament el nom de l'arxiu. Si, per exemple, escrius el nom de la imatge així: <code>dinosooooor.jpg</code>, el navegador no mostrarà la imatge; en lloc d’ella, mostrarà el text alternatiu.</p> + +<p><img alt="El títol Images in HTML, però aquesta vegada la imatge del dinosaure no es mostra i en lloc de la imatge apareix el text alternatiu." src="https://mdn.mozillademos.org/files/12702/alt-text.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p> + +<p>Llavors, per què hauries de veure o necessitar mai el text alternatiu? Pot ser útil en diverses situacions:</p> + +<ul> + <li>L'usuari és discapacitat visual, i usa un <a href="https://ca.wikipedia.org/wiki/Lector_de_pantalla">lector de pantalla</a> per a llegir el lloc web; en aquest cas, disposar de text alternatiu per a descriure les imatges és molt útil.</li> + <li>Com ja hem vist, podries haver escrit malament el nom de l'arxiu o la ruta.</li> + <li>El navegador no és compatible amb el tipus d'imatge. Hi ha persones que encara utilitzen navegadors de només text, com <a href="https://ca.wikipedia.org/wiki/Lynx_(navegador_web)">Lynx</a>, que mostra el text alternatiu de les imatges.</li> + <li>Vols proporcionar una mica de text per a ús dels motors de cerca; els motors de cerca poden associar el text alternatiu amb les consultes de cerca, per exemple.</li> + <li>Els usuaris han desactivat les imatges per reduir la transferència de dades i les distraccions (comú sobretot en els dispositius mòbils, en països en què l'ample de banda és limitat i car).</li> +</ul> + +<p>Què s'ha d'escriure exactament dins de l'atribut <code>alt</code>? En primer lloc, depèn de <em>per què</em> la imatge és allà (en altres paraules, què es perd si la imatge no es mostra):</p> + +<ul> + <li><strong>Decoració. </strong>Si la imatge és només de decoració i no forma part del contingut, s'afegeix un espai en blanc <code>alt = ""</code>, de manera que, per exemple, un lector de pantalla no perd el temps llegint un contingut que no té cap utilitat per a l'usuari. De totes maneres, les imatges decoratives no pertanyen realment al codi HTML; per a la inserció de la decoració s’han d’utilitzar imatges de fons CSS ({{anch("CSS background images")}}), però si és inevitable, <code>alt = ""</code> és el millor camí que cal seguir.</li> + <li><strong>Contingut. </strong>Si la imatge proporciona informació important, proporciona la mateixa informació en un text alternatiu <em>breu</em> o, millor encara, en el text principal, i que tothom el pugui veure. No escriguis text alternatiu redundant (no resultaria força molest per a un usuari visual que tots els paràgrafs estiguessin escrits dues vegades en el contingut principal?). Si la imatge ja es descriu adequadament en el cos del text principal, pots simplement utilitzar <code>alt = ""</code>.</li> + <li><strong>Enllaç.</strong> Si poses una imatge dins d’una etiqueta {{htmlelement("a")}} per convertir-la en un enllaç, també has de proporcionar <a href="https://wiki.developer.mozilla.org/ca/docs/Learn/HTML/Introducci%C3%B3_al_HTML/Crear_hipervincles#Fes_servir_un_redactat_clar">text del vincle accessible</a>; en aquest cas, el pots escriure dins del mateix element <code><a></code> o dins de l'atribut <code>alt</code> de la imatge, si va més bé.</li> + <li><strong>Text.</strong> No s'ha de posar el text en imatges (si el encapçalament principal necessita una petita ombra, per exemple, <a href="/en-US/docs/Web/CSS/text-shadow">utilitza CSS</a> en lloc de posar el text en una imatge.) Si <em>realment no es pot evitar fer-ho</em>, s'ha de proporcionar el text dins de l'atribut <code>alt</code>.</li> +</ul> + +<p>La clau està en oferir una experiència d’usabilitat fins i tot quan les imatges no es poden veure, en què els usuaris no perdin cap dels continguts. Desactiva les imatges en el navegador i observa com són les coses. De seguida t’adonaràs de com són d’inútils els textos alternatius com «logo» o «el meu lloc web favorit», si la imatge no es pot veure.</p> + +<div class="note"> +<p><strong>Nota</strong>: WebAIM, <a href="http://webaim.org/techniques/alttext/">guia del text alternatiu</a>, ofereix una orientació més detallada per al text alternatiu, i és una bona lectura per a més informació.</p> +</div> + +<h3 id="Amplada_i_alçada">Amplada i alçada</h3> + +<p>Es poden utilitzar els atributs <code>width</code> i <code>height</code> per a especificar l'amplada i l'alçada de la imatge (es pot trobar l'amplada i l'alçada de la imatge de moltes maneres, per exemple en Mac es pot utilitzar <kbd>Cmd</kbd> + <kbd>I</kbd> per a obtenir la visualització de la informació de l'arxiu d'imatge). Tornant al nostre exemple, poden fer això:</p> + +<pre class="brush: html notranslate"><img src="images/dinosaur.jpg" + alt="The head and torso of a dinosaur skeleton; + it has a large head with long sharp teeth" + width="400" + height="341"></pre> + +<p>Això no dona com a resultat una gran diferència a la pantalla en circumstàncies normals, però si no la imatge es mostra (per exemple, perquè l'usuari acaba d’acccedir a la pàgina i la imatge encara no s'ha carregat) veuràs que el navegador deixa un espai perquè la imatge aparegui:</p> + +<p><img alt="El títol Images in HTML amb el text alternatiu per al dinosaure, que es mostra dins de la caixa que resulta de configurar l’amplada i l’alçada" src="https://mdn.mozillademos.org/files/12706/alt-text-with-width-height.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p> + +<p>Això és bo perquè la càrrega de la pàgina resulta més ràpida i suau.</p> + +<p>La mida de les imatges no s'ha d'alterar utilitzant atributs HTML; si s'estableix la mida massa gran, les imatges es veuran granulades/difuses; si la mida es fa massa petita, es malbarata ample de banda amb la descàrrega d'una imatge que és molt més gran del que cal. La imatge també pot acabar semblant distorsionada, si no es manté la <a href="https://ca.wikipedia.org/wiki/Relaci%C3%B3_d%27aspecte">relació d'aspecte</a> correcta. S'ha d'utilitzar un editor d'imatges per a posar la imatge en la mida correcta abans de posar-la a la pàgina web.</p> + +<div class="note"> +<p><strong>Nota</strong>: Si has d’alterar la mida d'una imatge, utilitza <a href="/ca/docs/Learn/CSS">CSS</a> en lloc d'HTML.</p> +</div> + +<h3 id="Títols_d’imatge">Títols d’imatge</h3> + +<p>De la mateixa manera que <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Crear_hipervincles">amb els enllaços</a>, també es pot afegir l'atribut <code>title</code> a les imatges per a proporcionar informació de suport addicional, si cal. En el nostre exemple, podríem fer això:</p> + +<pre class="brush: html notranslate"><img src="images/dinosaur.jpg" + alt="The head and torso of a dinosaur skeleton; + it has a large head with long sharp teeth" + width="400" + height="341" + title="A T-Rex on display in the Manchester University Museum"></pre> + +<p>Això ens fa aparèixer un indicador de funció (<em>tooltip</em>), igual que amb els títols dels enllaços:</p> + +<p><img alt="La imatge del dinosaure amb un indicador de funció a la part de dalt que diu: Un T-Rex exposat al museu de la Universitat de Manchester" src="https://mdn.mozillademos.org/files/12708/image-with-title.png" style="display: block; height: 341px; margin: 0px auto; width: 400px;"></p> + +<p>Els títols d'imatge no són essencials, i sovint és millor incloure'ls com a informació de suport en el text principal de l'article, en lloc d’associar-los a la imatge. Són útils en algunes circumstàncies, per exemple quan en una galeria d'imatges no hi ha espai per als subtítols.</p> + +<h3 id="Aprenentatge_actiu_incrustar_una_imatge">Aprenentatge actiu: incrustar una imatge</h3> + +<p>Doncs, ara et toca a tu! En aquesta secció d'aprenentatge actiu volem que juguis amb un exercici d'incrustació simple. Disposes d'una etiqueta bàsica {{htmlelement("img")}}, i volem que incrustis la imatge que hi ha en la següent URL:</p> + +<p>https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg</p> + +<p>Sí, ja hem dit que no s’ha de fer <em>hotlink</em> d'imatges a altres servidors. Però això és només a tall de demostració; et deixem fer-ho, només aquesta vegada!</p> + +<p>Potser també voldries:</p> + +<ul> + <li>Afegir una mica de text alternatiu i comprovar que funciona quan l'adreça URL de la imatge està mal escrita.</li> + <li>Establir l'amplada i l'alçada correcta de la imatge (pista: és 200 px d'ample i 171 px d'alt), i experimentar amb altres valors per a veure’n l’efecte.</li> + <li>Establir un <code>title</code> per a la imatge.</li> +</ul> + +<p>Si t’equivoques, sempre pots tornar a començar amb el botó de <em>Reinicia</em>. Si t’encalles, fes clic al botó <em>Mostra la solució</em> per a veure una solució.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Input</h2> +<textarea id="code" class="input"> +<img></textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</pre> + +<pre class="brush: css notranslate">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 10em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"\n title="A T-Rex on display in the Manchester University Museum">'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 500) }}</p> + +<h2 id="Descriure_imatges_amb_figures_i_peus_dimatge">Descriure imatges amb figures i peus d'imatge</h2> + +<p>Hi hauria moltes maneres possibles d’afegir una llegenda associada a la teva imatge. Per exemple, no hi hauria res que impedís de fer això:</p> + +<pre class="brush: html notranslate"><div class="figure"> + <img src="images/dinosaur.jpg" + alt="The head and torso of a dinosaur skeleton; + it has a large head with long sharp teeth" + width="400" + height="341"> + + <p>A T-Rex on display in the Manchester University Museum.</p> +</div></pre> + +<p>Això està bé. Inclou el contingut que necessita, i es fa un ús correcte de l’aplicació d’estil amb CSS. Però hi ha un problema: no hi ha res que vinculi semànticament la imatge a la seva llegenda, i això pot causar problemes als lectors de pantalla, per exemple (quan hi ha 50 imatges i llegendes, quina llegenda va amb quina imatge?).</p> + +<p>Una solució més encertada és utilitzar els elements {{htmlelement("figure")}} i {{htmlelement("figcaption")}} d’HTML5, que s'han creat precisament amb aquest propòsit: proporcionar un contenidor semàntic per a les figures, que vinculi clarament la figura amb la llegenda. El nostre exemple anterior es podria reescriure així:</p> + +<pre class="notranslate"><figure> + <img src="images/dinosaur.jpg" + alt="The head and torso of a dinosaur skeleton; + it has a large head with long sharp teeth" + width="400" + height="341"> + + <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption> +</figure></pre> + +<p>L'element {{htmlelement("figcaption")}} indica als navegadors i la tecnologia d'assistència que la llegenda descriu la resta del contingut de l'element {{htmlelement("figure")}}.</p> + +<div class="note"> +<p><strong>Nota</strong>: Des d'un punt de vista d'accessibilitat, les llegendes i el text alternatiu {{htmlattrxref('alt','img')}} tenen funcions diferents. Les llegendes beneficien fins i tot les persones que poden veure la imatge, mentre que el text alternatiu {{htmlattrxref('alt','img')}} fa la mateixa funció que una imatge, quan aquesta no hi és. Per tant, les llegendes i el text alternatiu no poden dir el mateix, perquè tots dos elements apareixen quan la imatge no hi és. Intenta desactivar les imatges en el navegador i observa com es veuen les coses.</p> +</div> + +<p>Recordeu que una figura no té per què ser una imatge; una figura és una unitat independent del contingut que:</p> + +<ul> + <li>Expressa el seu significat en una forma compacta i d'una manera fàcil d'entendre.</li> + <li>Podria anar en diversos llocs del flux lineal de la pàgina.</li> + <li>Proporciona informació essencial que dona suport al text principal.</li> +</ul> + +<p>Una figura podria ser un conjunt d’imatges, un fragment de codi, àudio o vídeo, equacions, una taula, o alguna altra cosa.</p> + +<h3 id="Aprenentatge_actiu_crear_una_figura">Aprenentatge actiu: crear una figura</h3> + +<p>En aquesta secció d'aprenentatge actiu, et demanarem que agafis el codi acabat de la secció d'aprenentatge actiu anterior, i el converteixis en una figura:</p> + +<ul> + <li>Etiqueta’l amb un element {{htmlelement("figure")}}.</li> + <li>Copia el text de l'atribut <code>title</code>, elimina’n l'atribut <code>title</code>; a continuació, posa el text dins d'un element {{htmlelement("figcaption")}} a sota de la imatge.</li> +</ul> + +<p>Si t’equivoques, sempre pots tornar a començar amb el botó de <em>Reinicia</em>. Si t’encalles, fes clic al botó <em>Mostra la solució</em> per a veure una solució.</p> + +<div class="hidden"> +<h6 id="Playable_code_2">Playable code 2</h6> + +<pre class="brush: html notranslate"><h2>Input</h2> +<textarea id="code" class="input"> +</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</pre> + +<pre class="brush: css notranslate">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 10em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<figure>\n <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171">\n <figcaption>A T-Rex on display in the Manchester University Museum</figcaption>\n</figure>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', 700, 500) }}</p> + +<h2 id="Imatges_de_fons_de_CSS"><span id="result_box" lang="ca"><span title="CSS background images">Imatges de fons de CSS</span></span></h2> + +<p>També pots utilitzar CSS per a incrustar imatges en pàgines web (i JavaScript, però això és una altra història). La propietat {{cssxref("background-image")}} de CSS, i les altres propietats <code>background*</code> s'utilitzen per a controlar la col·locació de la imatge de fons. Per exemple, per a posar una imatge de fons en cada paràgraf d’una pàgina, es podria fer això:</p> + +<pre class="brush: css notranslate">p { + background-image: url("images/dinosaur.jpg"); +}</pre> + +<p>La imatge incrustada que resulta possiblement és més fàcil de posicionar i controlar que les imatges HTML; aleshores, per què ens hem de molestar amb les imatges HTML? Com ja hem insinuat abans, les imatges de fons de CSS són només per a decoració. Si només volem afegir una cosa bonica per a millorar l'aspecte visual de la pàgina, això està molt bé, però aquest tipus d'imatges no tenen cap significat semàntic en absolut —no poden tenir text equivalent—, són invisibles per als lectors de pantalla, etc. Aquí és on destaquen les imatges HTML.</p> + +<p>Per tant, si una imatge té sentit en termes de contingut, s'ha d'utilitzar una imatge en HTML. Si una imatge és purament decorativa, s'han d'utilitzar imatges de fons CSS.</p> + +<div class="note"> +<p><strong>Nota</strong>: Aprendreu molt més sobre <a href="/ca/docs/Learn/CSS/Building_blocks/Fons_i_vores">imatges de fons CSS</a> en el nostre tema <a href="/ca/docs/Learn/CSS">CSS</a>.</p> +</div> + +<h2 id="Sumari">Sumari</h2> + +<p>Això és tot per ara. Hem exposat les imatges i les llegendes amb detall. En l’article següent ens mourem en un nivell superior, i aprendrem com utilitzar HTML per a incrustar vídeo i àudio a les pàgines web.</p> + +<p>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</p> diff --git a/files/ca/learn/html/multimèdia_i_incrustar/imatges_sensibles/index.html b/files/ca/learn/html/multimèdia_i_incrustar/imatges_sensibles/index.html new file mode 100644 index 0000000000..4be56f6248 --- /dev/null +++ b/files/ca/learn/html/multimèdia_i_incrustar/imatges_sensibles/index.html @@ -0,0 +1,254 @@ +--- +title: Imatges sensibles +slug: Learn/HTML/Multimèdia_i_incrustar/Imatges_sensibles +tags: + - Article + - Beginner + - CodingScripting + - Design + - Graphics + - Guide + - HTML + - Image + - Intermediate + - img + - sizes + - srcset +translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</div> + +<div> +<p class="summary">En aquest article aprendrem sobre el concepte de les imatges sensibles - imatges que funcionen bé en dispositius amb diferentes mides de pantalles, resolucions i altres característiques semblants - i veurem les eines que proporciona HTML per ajudar-nos a posar-les en pràctica. Imatges sensibles és només una part del (i prepara l'escenari per) disseny web sensible, un tema que aprendrem molt més en un futur mòdul del <a href="/en-US/docs/Learn/CSS">tema CSS</a>.</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td>Heu de coneixer el fonaments <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">bàsics d'HTML</a> i com <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">afegir imatges estàtiques a una pàgina web</a>.</td> + </tr> + <tr> + <th scope="row">Objectius:</th> + <td>Aprendre com utilitzar funcions com {{htmlattrxref("srcset", "img")}} i l'element {{htmlelement("picture")}} per implementar solucions d'imatges sensibles en els llocs web.</td> + </tr> + </tbody> +</table> + +<h2 id="Per_què_les_imatges_sensibles"><span class="short_text" id="result_box" lang="ca"><span>Per què</span> <span>les</span> <span>imatges</span> <span>sensibles</span></span> ?</h2> + +<p>Llavors, quin problema estem tractant de resoldre amb imatges sensibles? Examinarem un escenari típic. Un lloc web típic, probablement, té una imatge de capçalera perquè es vegi bonic per als visitants, a més, potser algunes imatges de contingut per sota d'aquesta. És possible que vulgueu fer que la capçalera abasti la totalitat de l'amplada de la mateixa, i la imatge de contingut en formi part, en algun lloc, dins de la columna de contingut. Fem una ullada a un exemple senzill d'això:</p> + +<p><img alt="Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"></p> + +<p>Això funciona bé en un dispositiu de pantalla ampla, com ara un ordinador portàtil o de sobretaula (es pot <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">veure l'example en directa</a> i trobar el <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/not-responsive.html">codi font</a> en Github.) No parlarem tant de la CSS, excepte per dir que</p> + +<ul> + <li>El contingut del cos s'ha ajustat a una amplada màxima de 1200 píxels - en la finestra gràfica anterior l'ample del cos es manté en 1200px i es centrat en l'espai disponible. En la finestra gràfica següent l'ample del cos romandre en el 100% de l'amplada de la finestra gràfica.</li> + <li>La imatge de capçalera s'ha establert de manera que el seu centre es manté sempre en el centre de la capçalera, no importa quina és l'amplada de la capçalera. Així que si el lloc s'està veient en una pantalla més estreta, el detall important del centre de la imatge (el poble) encara es pot veure, i l'excés es perd per fora de cada costat. És 200 píxels d'alt.</li> + <li>Les imatges de contingut han estat establertes de manera que si l'element del cos es fa més petit que la imatge, les imatges es comencin a encongir de manera que sempre es quedin a l'interior del cos, en lloc de desbordar-se.</li> +</ul> + +<p>Això està bé, però el problema ve quan es comença a veure el lloc en un dispositiu de pantalla estreta - la capçalera es veu bé, però està començant a ocupar molta alçada de la pantalla d'un dispositiu mòbil; la primera imatge de contingut, d'altra banda, es veu terrible - en aquesta grandària amb prou feines es pot veure a la gent!</p> + +<p><img alt="Our example site as viewed on a narrow screen; the first image has shrunk to the point where it is hard to make out the detail on it." src="https://mdn.mozillademos.org/files/12936/non-responsive-narrow.png" style="display: block; height: 793px; margin: 0px auto; width: 320px;"></p> + +<p>Seria molt millor mostrar una versió retallada de la imatge que fixar-se en els detalls importants de la fotografia quan el lloc es veu en una pantalla estreta, i potser una mica entre els dos per a un dispositiu de pantalla d'amplada mitjana com una tauleta - això es coneix comunament com el <strong> problema direcció d'art </strong>.</p> + +<p>A més, no hi ha necessitat d'integrar aquest tipus d'imatges de grans dimensions a la pàgina si s'està veient en una petita pantalla de mòbil; això es diu <strong>problema canvi de resolució</strong> - una imatge de trama és un nombre fix de píxels d'ample i un nombre fix de píxels d'alt; com vam veure en fixar-nos en els <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">gràfics de vector</a>, una imatge de trama comença a veure's granulada i horrible si es visualitza més gran que la mida original (mentre que un gràfic vectorial no ho fa). I si es mostra significativament més petita que la mida original, és un malbaratament d'ample de banda - en especial els usuaris de mòbils no volen haver de gravar a través del seu ample de banda la descàrrega d'una imatge gran destinada a escritori, quan una imatge petita faria per al dispositiu. Una situació ideal seria tenir múltiples resolucions disponibles i servir mides adequades, depenent dels diferents dispositius que accedeixen al lloc web.</p> + +<p>Per complicar més les coses, alguns dispositius tenen pantalles d'alta resolució que necessiten les imatges més grans del que s'espera que ells necessiten, per mostrar-ho bé. Això és essencialment el mateix problema, però en un context lleugerament diferent.</p> + +<p>Es podria pensar que les imatges de vector resoldrien aquests problemes, i ho fan fins a cert punt - tots dos són petits en grandària d'arxiu i s'escalen bé, i han de ser usats sempre que sigui possible. No són adequats per a tot tipus d'imatges però -si bé són excel·lents per a gràfics simples, patrons, elements d'interfície, etc., comença a ser molt complex per crear una imatge basada en vectors amb el tipus de detall que ens agradaria trobar, diguem, una foto. Els formats d'imatge de trama, com JPEG són més adequats per al tipus d'imatges que hem vist en l'exemple anterior.</p> + +<p>Aquest tipus de problema no existia quan la primera web va existir, a principis de mitjans dels anys 90 - en aquell temps els únics dispositius que existien per navegar per la web eren de sobretaula i portàtils, de manera que els enginyers de navegadors i escriptors d'especificacions ni tan sols pensaven posar en pràctica solucions. <em>Les tecnologies d'imatges sensibles</em> es van dur a terme recentment per resoldre els problemes indicats anteriorment, ja que permetien oferir el navegador diversos arxius d'imatge, ja sigui tots els que mostraven el mateix, però que contenien un nombre diferent de píxels (<em>resolution switching</em>), o diferents imatges adequades per a diferents assignacions d'espai (<em>art direction</em>)</p> + +<div class="note"> +<p><strong>Nota</strong>: Les noves característiques que es descriuen en aquest article - {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} - están totes suportades en les versions pubicades per els escriptoris moderns i navegadors mòbils (incloent el navegador de Microsoft Edge, encara que no amb Internet Explorer.)</p> +</div> + +<h2 id="Com_crear_imatges_sensibles">Com crear imatges sensibles?</h2> + +<p>En aquesta secció, veurem els dos problemes il·lustrats a dalt i mostrarem com resoldre'ls utilitzant les característiques de la imatge sensible d'HTML. S'ha de tenir en compte que ens centrarem en {{htmlelement("img")}}s d'HTML per aquesta secció, com es veu en l'àrea de contingut de l'exemple anterior - la imatge a la capçalera del lloc és només de decoració, i per tant implementat utilitzant imatges de fons CSS. <a href="http://blog.cloudfour.com/responsive-images-101-part-8-css-images/">CSS podria dir-se que té millors eines per el disseny sensible</a>, parlarem d'elles en un futur mòdul CSS.</p> + +<h3 id="Canvi_de_resolució_Diferents_mides">Canvi de resolució: Diferents mides</h3> + +<p>Llavors, quin és el problema que es vol resoldre amb el canvi de resolució? Volem mostrar el mateix contingut d'imatge, major o menor depenent del dispositiu - aquesta és la situació que tenim amb la segona imatge de contingut en el nostre exemple. L'element standard {{htmlelement("img")}} tradicionalment només se li permet apuntar el navegador a un sol arxiu font:</p> + +<pre class="brush: html"><img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"></pre> + +<p>No obstant això, podem utilitzar dos nous atributs - {{htmlattrxref("srcset", "img")}} i {{htmlattrxref("sizes", "img")}} - per proporcionar diverses imatges fonts addicionals, juntament amb consells per ajudar al navegador a triar el més adequat. Es pot veure un exemple d'això en el nostre exemple <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> en Github (vegeu també <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html">el codi font</a>):</p> + +<pre class="brush: html"><img srcset="elva-fairy-320w.jpg 320w, + elva-fairy-480w.jpg 480w, + elva-fairy-800w.jpg 800w" + sizes="(max-width: 320px) 280px, + (max-width: 480px) 440px, + 800px" + src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"></pre> + +<p>Els atributs <code>srcset</code> i <code>sizes</code> es veuen complicats, però no són tan dolents per entendre si es formaten com es mostra a dalt, amb una part diferent del valor de l'atribut en cada línia. Cada valor conté una llista separada per comes. i cada part de les llistes es componen de tres sub-parts. Recorrerem els continguts de cada, ara:</p> + +<p><strong><code>srcset</code></strong> defineix el conjunt d'imatges que permetrà el navegador triar entre, cada mida d'imatge. Abans de cada coma, escrivim:</p> + +<ol> + <li>Un <strong>nom de fitxer d'imatge</strong> (<code>elva-fairy-480w.jpg</code>.)</li> + <li>Un espai.</li> + <li>L'ample de la <strong>imatge inherent en píxels</strong> (480w) - en compte que aquesta utilitza la unitat w, no px com es podria esperar. Aquesta és la mida real de la imatge, que es pot trobar al inspeccionar l'arxiu d'imatge a l'ordinador (per exemple en un Mac es pot seleccionar la imatge en el Finder i preme <kbd>Cmd</kbd> + <kbd>I</kbd> per obrir la pantalla d'informació).</li> +</ol> + +<p><strong><code>sizes</code></strong> defineix un conjunt de condicions de medis (per exemple, amples de pantalla) i indica quina mida de la imatge seria millor triar, quan es compleixin certes condicions en els medis - aquests són els consells que parlàvem anteriorment. En aquest cas, abans de cada coma, escrivim</p> + +<ol> + <li>una <strong>condició de medis</strong> ((<code>max-width:480px)</code>) - aprendrem més sobre això en el<a href="/en-US/docs/Learn/CSS"> tema de CSS</a>, però per ara direm que una condició de medis descriu un possible estat en que la pantalla pot estar. En aquest cas, estem dient "quan l'amplada de la finestra gràfica sigui de 480 píxels o menys".</li> + <li>Un espai.</li> + <li>L'<strong>amplada de l'espai</strong> de la imatge s'ompli quan la condició del medi sigui certa (<code>440px</code>).</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: Per l'ample de l'espai, és possible proporcionar una longitud absoluta (<code>px</code>, <code>em</code>) o una longitud relativa (com un percentatge). Es pot haver notat que l'última amplada de l'espai no té cap condició del medi - Aquest és per defecte el que es tria quan cap de les condicions del medi són certes). El navegador ignora tot després de la primera condició coincident, així que s'ha d'anar amb compte com es demanan les condicions del medi.</p> +</div> + +<p>Així, amb aquests atributs en el seu lloc, el navegador:</p> + +<ol> + <li>Mirar l'amplada del dispositiu.</li> + <li>Calcular quina condició del medi en la llista de <code>sizes</code> (mides) és el primer a ser veritat.</li> + <li>Mirar la mida de l'espai donat a aquesta consulta de medis.</li> + <li>Carregar la imatge de referència en la llista <code>srcset</code> que més s'acosti a la mida de l'espai triat.</li> +</ol> + +<p>I ja està! Així que en aquest punt, si un navegador de suport amb un ample de 480px de finestra gràfica carrega la pàgina, la condició (<code>max-width: 480px</code>) del medi serà veritat, per tant, es triarà l'espai <code>440px</code>, de manera que el <code>elva-fada-480w.jpg</code> serà carregat, ja que el seu ample inherent (<code>480w</code>) és el més proper a <code>440px</code>. La imatge 800px és de 128 KB en el disc mentre que la versió de 480px és només 63KB - un estalvi de 65KB. Ara imaginem si aquesta era una pàgina que tenia moltes imatges. Usant aquesta tècnica es podria estalviar als usuaris de mòbils una gran quantitat d'ample de banda.</p> + +<p>Els navegadors més antics no soportan aquestes característiques, simplement, les ignoran i segueixen endavant i carregan la imatge que es fa referència en l'atribut {{htmlattrxref("src", "img")}} com a normal.</p> + +<div class="note"> +<p><strong>Nota</strong>: En el {{htmlelement("head")}} del document trobarem la línia <code><meta name = "viewport" content = "width = device-width"></code>: això obliga els navegadors mòbils a adoptar l'amplada real de la seva finestra en carregar pàgines web (alguns navegadors mòbils menteixen sobre la seva amplada de la finestra gràfica, i en lloc de carregar pàgines a l'amplada de la finestra gràfica, redueixen la pàgina carregada cap avall, el que no és molt útil per a les imatges o el disseny sensible. Us ensenyarem més sobre això en un mòdul futur).</p> +</div> + +<h3 id="Eines_útils_per_a_desenvolupadors">Eines útils per a desenvolupadors</h3> + +<p>Hi ha algunes <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">eines de desenvolupament</a> útils en els navegadors per ajudar en l'elaboració de les amplades d'espai, etc, que són necessàries utilitzar. Quan els estem treballant, carreguem per primera vegada la versió no sensible del exemple (not-responsive.html), després entreu en <a href="/en-US/docs/Tools/Responsive_Design_Mode">Responsive Design View</a> (<em>Tools > Web Developer > Responsive Design View</em>), que ens permetrà mirar els dissenys de pàgina web com si els veiéssim a través d'una varietat de diferents mides de pantalles de dispositius.</p> + +<p>S'ha establert l'amplada de la finestra gràfica a 320px llavors 480px; per a cada un entrem al <a href="/en-US/docs/Tools/Page_Inspector">Inspector DOM</a>, fent clic a l'element {{htmlelement("img")}} que ens interessa, després mirem la seva grandària en la pestanya de Box Model view en el costat dret de la pantalla. Això ens ha de donar els amples de imatge inherents que necessita.</p> + +<p><img alt="A screenshot of the firefox devtools with an image element highlighted in the dom, showing its dimensions as 440 by 293 pixels." src="https://mdn.mozillademos.org/files/12932/box-model-devtools.png" style="display: block; height: 845px; margin: 0px auto; width: 480px;"></p> + +<p>A continuació, es pot comprovar si el srcset ha treballat mitjançant l'establiment de l'amplada de la finestra gràfica que volem (establint una amplada estreta, per exemple), obrim Network Inspector (<em>Tools > Web Developer > Network</em>), a continuació, tornem a carregar la pàgina. Això ens ha de donar una llista de recursos que s'han descarregat per compondre la pàgina web, i aquí es pot comprovar quin arxiu d'imatge va ser triat per a descarregar.</p> + +<p><img alt="a screenshot of the network inspector in firefox devtools, showing that the HTML for the page has been downloaded, along with three images, which include the two 800 wide versions of the responsive images" src="https://mdn.mozillademos.org/files/12934/network-devtools.png" style="display: block; height: 630px; margin: 0px auto; width: 600px;"></p> + +<h3 id="Canvi_de_resolució_Mateixa_grandària_diferents_resolucions">Canvi de resolució: Mateixa grandària, diferents resolucions</h3> + +<p>Si s'està donant suport a múltiples resolucions de pantalla, però tothom veu la imatge a la mateixa grandària real en la pantalla, es pot permetre que el navegador seleccioni una imatge de resolució apropiada utilitzant <code>srcset</code> amb x-descriptors i sense grandaries (<code>sizes</code>) - una sintaxi una mica més fàcil! Es pot trobar un exemple de com es veu en <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">srcset-resolutions.html</a> (vegeu també <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">el codi font</a>):</p> + +<pre class="brush: html"><img srcset="elva-fairy-320w.jpg, + elva-fairy-480w.jpg 1.5x, + elva-fairy-640w.jpg 2x" + src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy"> +</pre> + +<p><img alt="A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the image" src="https://mdn.mozillademos.org/files/12942/resolution-example.png" style="display: block; height: 425px; margin: 0px auto; width: 480px;">En aquest exemple, el següent CSS s'aplica a la imatge de manera que tindrà una amplada de 320 píxels a la pantalla (també anomenats píxels CSS):</p> + +<pre class="brush: css">img { + width: 320px; +}</pre> + +<p>En aquest cas, la grandària (<code>sizes</code>) no és necessaria - el navegador simplement resol la resolució de la pantalla que es mostra, i serveix la imatge més adequada que es fa referència en el <code>srcset</code>. Així, si el dispositiu que accedeixi a la pàgina té un estàndard/de baixa resolució, amb un píxel de dispositiu que representa cada píxel CSS, la imatge <code>elva-fada-320w.jpg</code> serà carregada (el 1x està implícit, pel que no cal incloure). Si el dispositiu té una alta resolució de dos píxels de dispositiu per píxel CSS o més, es carregarà la imatge <code>elva-fada-640w.jpg</code>. La imatge de 640px té 93KB, mentre que la imatge de 320px té només 39KB.</p> + +<h3 id="Direcció_d'art">Direcció d'art</h3> + +<p>En resum, el <strong>problema de direcció d'art</strong> implica voler canviar la imatge que es mostra per adaptar-se a diferents grandàries de visualització de la imatge. Per exemple, si es mostra un paisatge gran amb una persona al mig en un lloc web quan es veu en un navegador d'escriptori, aquesta es redueix quan es veu el lloc web en un navegador mòbil, es veurà malament, la persona serà molt petita i difícil de veure. Probablement seria millor mostrar una imatge més petita, de retrat en el mòbil, que mostri la persona ampliada. L'element {{htmlelement("picture")}} ens permet implementar exactament aquest tipus de solució.</p> + +<p>Tornant al nostre exemple original <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">not-responsive.html</a> tenim una imatge que necessita molt la direcció d'art:</p> + +<pre class="brush: html"><img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"></pre> + +<p>Arreglarem això, amb {{htmlelement("picture")}}! Igual que <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content"><code><video></code> i <code><audio></code></a>, l'element <code><picture></code> és un contenidor que conté diversos elements {{htmlelement("source")}} que proporcionen diverses fonts diferents que el navegador pot triar, seguit per l'importantíssim element {{htmlelement("img")}}. El codi de <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> es veu així:</p> + +<pre class="brush: html"><picture> + <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"> + <source media="(min-width: 800px)" srcset="elva-800w.jpg"> + <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"> +</picture> +</pre> + +<ul> + <li>Els elements <code><source></code> inclouen un atribut <code>media</code> que conté una condició de medis - igual que amb el primer exemple amb <code>srcset</code>, aquestes condicions són les proves que decideixen quina és la imatge que es mostrarà - el primer que retorna veritable és el que es mostrarà. En aquest cas, si l'amplada de la finestra gràfica és 799px d'ample o menys, es mostrarà la primera imatge de l'element <code><source></code>. Si l'amplada de la finestra gràfica és 800px o més, serà la segona.</li> + <li>Els atributs <code>srcset</code> contenen la ruta de la imatge per mostrar. Recordeu que tal com vam veure amb <code><img></code> a dalt, <code><font></code> pot prendre un atribut <code>srcset</code> amb diverses imatges de referència, i també un atribut <code>sizes</code>. Pel que podria oferir diverses imatges a través d'un element <code><picture></code>, però també podria ofererir múltiples resolucions de cadascuna. Sent realistes, és probable no s'hagin de fer aquest tipus de coses molt sovint.</li> + <li>En tots els casos, s'ha de proporcionar un element <code><img></code>, amb <code>src</code> i <code>alt</code>, just abans de <code></picture></code>, en cas contrari no apareixeran les imatges. Això proporciona un cas per defecte que s'aplicarà quan cap de les condicions de medis retorni cert (en realitat es podria treure el segon element <code><source></code> en aquest exemple), i una alternativa per als navegadors que no suporten l'element <code><picture></code>.</li> +</ul> + +<p>Aquest codi ens permet mostrar una imatge adequada tant en pantalla ampla com en pantalla estreta, com es veu a continuació:</p> + +<p><img alt="Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"><img alt="Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen" src="https://mdn.mozillademos.org/files/12938/picture-element-narrow.png" style="display: block; height: 710px; margin: 0px auto; width: 320px;"></p> + +<div class="note"> +<p><strong>Nota</strong>: S'ha d'utilitzar el atribut <code>media</code> només en escenaris de direcció d'art; quan es fa ús de <code>media</code>, no oferir condicions de medis dins l'atribut <code>sizes</code>.</p> +</div> + +<h3 id="Per_què_no_podem_fer_això_usant_CSS_o_Javascript">Per què no podem fer això usant CSS o Javascript?</h3> + +<p>Quan el navegador comença a carregar una pàgina, s'inicia la descàrrega (precàrrega) d'alguna de les imatges abans que l'analitzador principal hagi començat a carregar i interpretar el CSS i JavaScript de la pàgina. Aquesta és una tècnica útil, que de mitjana ha rebaixat el 20% el temps de càrrega. No obstant això, no és útil per a les imatges sensibles, d'aquí la necessitat d'implementar solucions com <code>srcset</code>. No es podria, per exemple, carregar l'element {{htmlelement("img")}}, després de detectar l'amplada de la finestra gràfica amb JavaScript i canviar dinàmicament la imatge d'origen en una més petita si es desitjes. Per llavors, la imatge original ja hauria estat carregada, i es carregaria també la imatge petita, així, que és encara pitjor en termes d'imatge sensible.</p> + +<ul> +</ul> + +<h3 id="Utilitzar_formats_d'imatge_moderns_audaçment"><span class="short_text" id="result_box" lang="ca"><span>Utilitzar</span> <span>formats</span> <span>d'imatge</span> <span>moderns</span> <span>audaçment</span></span></h3> + +<p>Hi ha diversos nous formats d'imatge emocionants (com WebP i JPEG-2000) que poden mantenir una mida d'arxiu baix i d'alta qualitat al mateix temps. No obstant això, el suport dels navegadors és irregular.</p> + +<p><picture> ens permet continuar atenent els navegadors antics. Es pot subministrar el tipus MIME dins de l'atribut <code>type</code> perquè el navegador pogui rebutjar immediatament tipus d'arxius no compatibles:</p> + +<pre class="brush: html"><picture> + <source type="image/svg+xml" srcset="pyramid.svg"> + <source type="image/webp" srcset="pyramid.webp"> + <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles"> +</picture> +</pre> + +<ul> + <li>No utilitzar l'atribut <code>media</code>, llevat que també es necessiti la direcció d'art.</li> + <li>En un element <code><source></code>, només es pot fer referència a les imatges del tipus declarat en <code>type</code>.</li> + <li>Igual que abans, us convidem a utilitzar llistes separades per comes amb <code>srcset</code> i <code>sizes</code>, segons sigui necessari.</li> +</ul> + +<h2 id="Aprenentatge_actiu_La_implementació_de_les_vostres_pròpies_imatges_sensibles">Aprenentatge actiu: La implementació de les vostres pròpies imatges sensibles</h2> + +<p>Per a aquest aprenentatge actiu, estem esperant que sigueu valents i sobretot actueu independentment.... Volem que implementeu el vostre propi art adequat dirigit a pantalla estreta/pantalla ampla utilitzant <code><picture></code>, i un exemple de canvi de resolució que utilitzi <code>srcset</code>.</p> + +<ol> + <li>Escriure alguna cosa d'HTML senzilla per contenir el codi (usar <code>not-responsive.html</code> com a punt de partida, si es vol)</li> + <li>Troba una bona imatge apaïsada de pantalla ampla amb algun tipus de detalls continguts en ella en algun lloc. Crear una versió en grandària web de la mateixa utilitzant un editor de gràfics, a continuació, retallar-la per mostrar una part més petita que ampliï el detall, i crear una segona imatge (al voltant de 480px d'ample que és bo per a això).</li> + <li>Utilitzeu l'element <code><picture></code> per implementar un selector d'imatge de direcció d'art!</li> + <li>Crear diversos arxius d'imatges de diferents mides, cadascun mostrant la mateixa imatge.</li> + <li>Utilitzeu <code>srcset/size</code> per crear un exemple de canvi de resolució, ja sigui per servir la mateixa imatge a mida en diferentes resolucions, o diferentes mides d'imatges en diferentes amplades de finestra gràfica.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: Utilitzeu el devtools del navegador perquè us ajudi a saber quines mides necessiteu, com es va esmentar anteriorment.</p> +</div> + +<h2 id="Sumari">Sumari</h2> + +<p>Això és un embolcall per a les imatges sensibles - Esperem que hagiu gaudit jugant amb aquestes noves tècniques. Com a resum, hi ha dos problemes diferents que hem estat discutint aquí:</p> + +<ul> + <li><strong>Direcció d'art</strong>: El problema pel qual es volem servir imatges retallades per diferentes disposicions - per exemple, una imatge apaïsada que mostra una escena completa per a un disseny d'escriptori, i una imatge retrat que mostra el tema principal enfocat, estreta per a un disseny mòbil. Això es pot resoldre mitjançant l'element {{htmlelement("picture")}}</li> + <li><strong>Canvi de resolució</strong>: El problema pel qual es volem servir arxius d'imatge més petits a dispositius de pantalla estreta, ja que no necessiten imatges enormes com a pantalles d'escriptori - i també opcionalment servir imatges de resolució diferent a pantalles d'alta/baixa densitat. Això es pot resoldre usant<a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web"> gràfics vectoriasl</a> (imatges SVG) i els atributs {{htmlattrxref ("srcset", "img")}} i {{htmlattrxref ("sizes", "img")}}.</li> +</ul> + +<p>Hem arribat al final de tot, dels mòduls <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia i incrustació</a>! L'única cosa que fer ara, abans de seguir endavant, és provar la vostra avaluació multimèdia i veure com us va. Diverteix-te.</p> + +<h2 id="Veure">Veure</h2> + +<ul> + <li><a href="http://blog.cloudfour.com/responsive-images-101-definitions">Excel·lent introducció a les imatges sensibles, per Jason Grigsby</a></li> + <li>{{htmlelement("img")}}</li> + <li>{{htmlelement("picture")}}</li> + <li>{{htmlelement("source")}}</li> +</ul> + +<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</div> diff --git a/files/ca/learn/html/multimèdia_i_incrustar/index.html b/files/ca/learn/html/multimèdia_i_incrustar/index.html new file mode 100644 index 0000000000..43e0e89c91 --- /dev/null +++ b/files/ca/learn/html/multimèdia_i_incrustar/index.html @@ -0,0 +1,75 @@ +--- +title: Multimèdia i incrustar +slug: Learn/HTML/Multimèdia_i_incrustar +tags: + - Assessment + - Audio + - Beginner + - CodingScripting + - Flash + - Guide + - HTML + - Images + - Landing + - Learn + - SVG + - Video + - iframes + - imagemaps + - responsive +translation_of: Learn/HTML/Multimedia_and_embedding +--- +<div class="textArea" id="destText" style="direction: ltr;"> +<div><span class="highlighted" id="ouHighlight__0_9TO0_9">Multimèdia</span><span id="noHighlight_0.7886620835513062"> </span><span id="ouHighlight__11_13TO11_11">i</span><span id="noHighlight_0.5759707384643681"> </span><span id="ouHighlight__15_23TO13_21">incrustar</span></div> +</div> + +<p>{{LearnSidebar}}</p> + +<p class="summary">Hem vist una gran quantitat de text fins ara en aquest curs. Molt. de. text. Però la web seria molt avorrida sense res més que el text, de manera que anem a començar a buscar la manera de fer que la web cobri vida, amb un contingut més interessant! Aquest mòdul explora com utilitzar HTML per incloure multimèdia en les pàgines web, incloent-hi les diferents formes en què les imatges poden ser inclosos, i com integrar vídeo, àudio i fins i tot altres pàgines web senceres.</p> + +<h2 id="Requisits_previs">Requisits previs</h2> + +<p>Abans d'iniciar aquest mòdul, s'ha de tenir un coneixement raonable dels conceptes bàsics d'HTML, com s'explica en <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>. Si no s'ha treballat a través d'aquest mòdul (o alguna cosa semblant), comenceu a treballar amb ell en primer lloc, i a continuació, tornar!</p> + +<div class="note"> +<p><strong>Nota</strong>: Si esteu treballant en un ordinador/tauleta/altre dispositiu els quals no tenen la capacitat de crear els vostres propis arxius, podeu provar (la majoria) els exemples en un programa de codificació en línia, com ara <a href="http://jsbin.com/">JSBin</a> o <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Guies">Guies</h2> + +<p>Aquest mòdul conté els següents articles, que ens portarà a través de tots els fonaments de la incrustació de multimèdia en pàgines web.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Imatges en HTML</a></dt> + <dd>Hi ha altres tipus de multimèdia a tenir en compte, però és lògic començar amb l'element humil {{htmlelement("img")}}, que s'utilitza per incrustar una imatge en una pàgina web senzilla. En aquest article veurem com utilitzar-lo en profunditat, incloent conceptes bàsics, anotant-ho amb subtítols utilitzant {{htmlelement("figure")}}, i com es relaciona amb les imatges de fons de CSS.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Contingut d'àudio i vídeo</a></dt> + <dd>A continuació, veurem com utilitzar els elements HTML5 {{htmlelement("video")}} i {{htmlelement("audio")}} per incrustar vídeo i àudio a les pàgines, incloent conceptes bàsics, proporcionant accés a diferents formats d'arxiu a diferents navegadors, afegir títols i subtítols, i com afegir alternatives per als navegadors antics.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">De <object> a <iframe> — altres tecnologies d'incrustació</a></dt> + <dd>En aquest punt ens agradaria fer un petit pas al costat, mirant a un parell d'elements que permeten introduir una àmplia varietat de tipus de contingut en les pàgines web: els elements {{htmlelement("iframe")}}, {{htmlelement("embed")}} and {{htmlelement("object")}}. <code><iframe></code>s són per incrustar en altres pàgines web, i els altres dos permeten incrustar arxius PDF, SVG, i fins i tot flash - una tecnologia que està en camí de desapareixa, però que encara es veu semi-regularment.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Afegir gràfics vectorials a la Web</a></dt> + <dd> + <p>Els gràfics vectorials poden ser molt útils en certes situacions. A diferència dels formats habituals com PNG/JPG, que no es distorsionen/pixelen quan s'acostan - poden romandre suaus quan s'escalen. Aquest article és una introducció al que són vectors gràfics, i com incloure el popular format {{glossary("SVG")}} en pàgines web.</p> + </dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Imatges responsive</a></dt> + <dd>Amb tants tipus de dispositius differerents capaços de navegar per la web - des de telèfons mòbils als ordinadors d'escriptori - un concepte essencial per dominar en el món web modern és el disseny sensible. Això es refereix a la creació de pàgines web que poden canviar de forma automàtica les seves característiques per adaptar-se a diferents mides de pantalla, resolucions, etc. Això es veurà amb més detall en un mòdul CSS més endavant, però per ara mirem les eines HTML que tenim a disposició per crear imatges sensibles, incloent l'element {{htmlelement("picture")}}.</dd> +</dl> + +<h2 id="Avaluació">Avaluació</h2> + +<p>Les següents avaluacions posaran a prova la comprensió dels conceptes bàsics HTML coberts en les guies anteriors.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Pàgina de benvinguda de Mozilla</a></dt> + <dd>En aquesta avaluació, posarem a prova el coneixement d'algunes de les tècniques descrites en els articles d'aquest mòdul, aconseguir afegir algunes imatges i vídeo a una pàgina de benvinguda de moda, tot sobre Mozilla!</dd> +</dl> + +<h2 id="Veure">Veure</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Afegir un hitmap a la part superior d'una imatge</a></dt> + <dd>Els mapes d'imatge proporcionen un mecanisme perquè les diferents parts d'una imatge enllaci a diferents llocs (pensem en un mapa, a través del qual amb els enllaços obtenim més informació sobre cada pais en clicar-los.) Aquesta tècnica pot ser útil a vegades.</dd> + <dt><a href="https://teach.mozilla.org/activities/web-lit-basics-two/">Conceptes bàsics d'alfabetització Web 2</a></dt> + <dd> + <p>Un excel·lent curs de la fundació Mozilla que explora i posa a prova algunes de les habilitats parlades en el mòdul <em>Multimèdia i incrustació</em>. Busseig profund en la composició bàsica de les pàgines web, disseny per l'accessibilitat, compartint recursos, utilitzant els medis en línia, i el treball obert.</p> + </dd> +</dl> diff --git a/files/ca/learn/html/multimèdia_i_incrustar/mozilla_pàgina_de_benvinguda/index.html b/files/ca/learn/html/multimèdia_i_incrustar/mozilla_pàgina_de_benvinguda/index.html new file mode 100644 index 0000000000..71e1d3426e --- /dev/null +++ b/files/ca/learn/html/multimèdia_i_incrustar/mozilla_pàgina_de_benvinguda/index.html @@ -0,0 +1,109 @@ +--- +title: Mozilla pàgina de benvinguda +slug: Learn/HTML/Multimèdia_i_incrustar/Mozilla_pàgina_de_benvinguda +tags: + - Assessment + - Beginner + - CodingScripting + - Embedding + - HTML + - Images + - Multimedia + - Video + - iframe + - picture + - responsive + - sizes + - srcset +translation_of: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</div> + +<p class="summary">En aquesta avaluació, posarem a prova els vostres coneixements d'algunes de les tècniques descrites en els articles d'aquest mòdul, fent que afegiu algunes imatges i vídeos a una pàgina, amb un toc de moda, tot sobre Mozilla!</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits Previs:</th> + <td>Abans d'intentar aquesta avaluació ja hauria d'haver treballat el mòdul <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia i incrustació</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Posar a prova els coneixements al voltant de la incrustació d'imatges i de vídeo en pàgines web, marcs i tècniques d'imatge sensible HTML.</td> + </tr> + </tbody> +</table> + +<h2 id="Punt_de_partida">Punt de partida</h2> + +<p>Per començar aquesta avaluació, s'ha de agafar l'HTML i totes les imatges disponibles en el directori <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/">mdn-splash-page-start</a> en github. Desar el contingut d'<a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/index.html">index.html</a> en un arxiu anomenat <code>index.html</code> en la unitat local, en un nou directori. A continuació, desar <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/pattern.png">pattern.png</a> en el mateix directori (botó dret del ratolí sobre la imatge per obtenir l'opció de guardar-lo).</p> + +<p>Accedir a les diferents imatges en el directori de les <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/mdn-splash-page-start/originals">originals</a> i guardar-les de la mateixa manera; voldreu guardar-les en un directori diferent, per ara, ja que necessitareu manipular-les (algunes) usant un editor de gràfics abans de que estiguin llestes per ser utilitzades.</p> + +<div class="note"> +<p><strong>Nota</strong>: L'arxiu HTML d'exemple conté un bon munt de CSS, l'estil de la pàgina. No cal tocar el CSS, només l'HTML dins de l'element {{htmlelement("body")}} - sempre que s'insereix el marcat correcte, l'estil farà que es vegi correcte.</p> +</div> + +<h2 id="Project_brief">Project brief</h2> + +<p>En aquesta avaluació presentem una pàgina de benvinguda de Mozilla gairebé acabada, que pretén dir alguna cosa agradable i interessant sobre el que representa Mozilla, i proporcionar alguns enllaços a altres recursos. Malauradament, no s'han afegit imatges o vídeos - aquesta és la vostre feina! Cal afegir alguns medis perquè la pàgina es vegi bé i tingui més sentit. Les següents subseccions detallan el que s'ha de fer:</p> + +<h3 id="Preparar_imatges">Preparar imatges</h3> + +<p>Usar l'editor d'imatges favorit, per crear versions de 400px d'ample i 120px d'ample:</p> + +<ul> + <li><code>firefox_logo-only_RGB.png</code></li> + <li><code>firefox-addons.jpg</code></li> + <li><code>mozilla-dinosaur-head.png</code></li> +</ul> + +<p>Anomenar-les d'una manera sensata, per exemple, <code>firefoxlogo400.png</code> i <code>firefoxlogo120.png</code>.</p> + +<p>Juntament amb mdn.svg, aquestes imatges seran les vostres icones per enllaçar a altres recursos, dins l'àrea d'<code>informació addiciona</code>l. També s'enllaçarà el logo de Firefox a la capçalera del lloc. Desar les còpies de tot això dins el mateix directori que <code>index.html</code>.</p> + +<p>A continuació, crear una versió apaïsada de 1200 píxels d'ample de <code>red-panda.jpg</code>, i una versió retrat de 600px d'ample que mostri el panda en un primer pla. Una vegada més, anomenar-les d'una manera sensata perquè puguin se identificades fàcilment. Guardar una còpia de tots dues dins del mateix directori que <code>index.html</code>.</p> + +<div class="note"> +<p><strong>Nota</strong>: S'han de optimitzar les imatges JPG i PNG perquè siguin el més petites possible, mentre encara es vegin bé. tinypng.com és un gran servei per fer això fàcilment.</p> +</div> + +<h3 id="Afegir_un_logo_a_la_capçalera">Afegir un logo a la capçalera</h3> + +<p>Dins de l'element {{htmlelement("header")}}, afegir un element {{htmlelement("img")}} que incrustar la petita versió del logo de Firefox a la capçalera.</p> + +<h3 id="Afegir_un_vídeo_al_continut_principal_del_article">Afegir un vídeo al continut principal del article</h3> + +<p>Just dins de l'element {{htmlelement("article")}} (a sota de l'etiqueta d'obertura), incrustar el vídeo de YouTube trobat en <a href="https://www.youtube.com/watch?v=ojcNcvb1olg">https://www.youtube.com/watch?v=ojcNcvb1olg</a>, utilitzant les eines adequades de YouTube per generar el codi. El vídeo ha de ser 400 px d'ample.</p> + +<h3 id="Afegir_imatges_sensibles_als_enllaços_d'informació_addicional">Afegir imatges sensibles als enllaços d'informació addicional</h3> + +<p>Dins de {{htmlelement("div")}} amb la classe <code>further-info</code>, troben quatre elements {{htmlelement("a")}} - cada un dels enllaços amb pàgines interessants relacionades amb Mozilla. Per completar aquesta secció haurem de inserir un element {{htmlelement("img")}} dins de cada un d'ells que continguin els atributs apropiats {{htmlattrxref("src", "img")}}, {{htmlattrxref("alt", "img")}}, {{htmlattrxref("srcset", "img")}} i {{htmlattrxref("sizes", "img")}}.</p> + +<p>En tots els casos (excepte un - quin és inherentment sensible?) volem que el navegador serveixi la versió de 120px d'ample quan l'amplada de la finestra gràfica sigui 480px d'ample o menys, o la versió de 400px d'amplada d'altra manera.</p> + +<p>Assegurar-se de fer coincidir les imatges correctes amb els vincles correctes!</p> + +<div class="note"> +<p><strong>Nota</strong>: Per provar correctament els exemples <code>srcset/sizes</code>, es necessita pujar el lloc a un servidor (usant pàgines <a href="/en-US/docs/Learn/Common_questions/Using_Github_pages">Github pages</a> és una solució fàcil i lliure), a continuació, a partir d'aquí es pot comprovar si s'està treballant adequadament utilitzant les eines de desenvolupador del navegador, com es detalla en les <a href="/en-US/Learn/HTML/Multimedia_and_embedding/Responsive_images#Useful_developer_tools">imatges sensibles: eines útils per a desenvolupadors</a>.</p> +</div> + +<h3 id="Un_art_dirigit_panda_vermell">Un art dirigit panda vermell</h3> + +<p>Dins de {{htmlelement("div")}} amb la classe <code>red-panda</code>, volem inserir un element {{htmlelement("picture")}} que serveixi d'imatge de petit retrat del panda si la finestra gràfica és de 600px d'ample o menys, i la imatge apaïsada, gran, al contrari.</p> + +<h2 id="Exemple">Exemple</h2> + +<p>Les següents captures de pantalla mostren la pàgina de benvinguda que ha de ser similar després d'haver estat marcada correctament, en una àmplia i estreta visualització de la pantalla.</p> + +<p><img alt="A wide shot of our example splash page" src="https://mdn.mozillademos.org/files/12946/wide-shot.png" style="border-style: solid; border-width: 1px; display: block; height: 620px; margin: 0px auto; width: 700px;"></p> + +<p><img alt="A narrow shot of our example splash page" src="https://mdn.mozillademos.org/files/12944/narrow-shot.png" style="border-style: solid; border-width: 1px; display: block; height: 1069px; margin: 0px auto; width: 320px;"></p> + +<h2 id="Avaluació">Avaluació</h2> + +<p>Si esteu seguint aquesta avaluació com a part d'un curs organitzat, heu de ser capaços de donar al vostre treball al professor/tutor per evaluar. Si sou d'auto-aprenentatge, llavors es pot obtenir la guia d'evaluació faciliment preguntan a la llista de correu <a href="https://lists.mozilla.org/listinfo/dev-mdc">dev-mdc</a> o al canal d'IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> en <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Proveu el primer exercici - no hi ha res a guanyar amb trampa!</p> + +<p>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</p> diff --git a/files/ca/learn/html/taules_html/avaluació_estructurar_les_dades_dels_planeta/index.html b/files/ca/learn/html/taules_html/avaluació_estructurar_les_dades_dels_planeta/index.html new file mode 100644 index 0000000000..15d583607f --- /dev/null +++ b/files/ca/learn/html/taules_html/avaluació_estructurar_les_dades_dels_planeta/index.html @@ -0,0 +1,79 @@ +--- +title: 'Avaluació: Estructurar les dades dels planeta' +slug: Learn/HTML/Taules_HTML/Avaluació_Estructurar_les_dades_dels_planeta +tags: + - Assessment + - Beginner + - CodingScripting + - HTML + - Learn + - Tables +translation_of: Learn/HTML/Tables/Structuring_planet_data +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div> + +<p class="summary">En la nostra avaluació de la taula, proporcionarem algunes dades sobre els planetes del nostre sistema solar, per obtenir una estructura en una taula HTML.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits Previs:</th> + <td>Abans de procedir a aquesta avaluació ja s'hauria d'haver treballat a través de tots els articles d'aquest mòdul.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Posar a prova la comprensió de les taules HTML i funcions associades.</td> + </tr> + </tbody> +</table> + +<h2 id="Punt_de_partida">Punt de partida</h2> + +<p>Per obtenir aquesta avaluació començarem per fer còpies locals de <a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/blank-template.html">blank-template.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/minimal-table.css">minimal-table.css</a> i <a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/planets-data.txt">planets-data.txt</a> en un nou directori a l'equip local.</p> + +<div class="note"> +<p><strong>Nota</strong>: Com a alternativa, es pot utilitzar un lloc com <a class="external external-icon" href="https://jsbin.com/">JSBin</a> o <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> per fer l'avaluació. Es pot fer enganxant el codi HTML, CSS i JavaScript en un d'aquests editors en línia. Si l'editor en línia que s'utilitza no té panells separats de JavaScript/CSS, lliurament es poden posar en línia amb els elements <code><script></code>/<code><style></code> dins de la pàgina HTML.</p> +</div> + +<h2 id="Resum_del_projecte">Resum del projecte</h2> + +<p>Estem treballant en una escola; actualment els estudiants estan estudiant els planetes del nostre sistema solar, i volem proporcionar-los un conjunt fàcil de seguiment de dades per buscar dades i xifres sobre els planetes. Una taula de dades HTML seria ideal - cal prendre les dades en brut que tenim disponibles i convertir-les en una taula, seguint els passos a continuació.</p> + +<p>La taula d'acabada ha de tenir aquest aspecte:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14609/assessment-table.png" style="display: block; margin: 0 auto;"></p> + +<p>També es pot <a href="https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html">veure el exemple en viu aquí</a> (sense mirar el codi font - no enganyar!)</p> + +<ul> +</ul> + +<h2 id="Passos_per_completar"><span class="short_text" id="result_box" lang="ca"><span>Passos</span> <span>per completar</span></span></h2> + +<p>Els següents passos descriuen el que s'ha de fer per completar la taula d'exemple. Totes les dades que es necessitan estan contingudes en l'arxiu <code>planets-data.txt</code>. Si hi ha problemes per visualitzar les dades, mirar l'exemple viu de dalt, o tractar de dibuixar un diagrama.</p> + +<ol> + <li>Obrir la còpia <code>blank-template.html</code> i començar la taula per fora, donant-li un recipient exterior, una capçalera i un cos de taula. No cal un peu de taula per a aquest exemple.</li> + <li>Afegir el títol proporcionat a la taula.</li> + <li>Afegir una fila a la capçalera de la taula que contingui tots els encapçalats de columna.</li> + <li>Crear totes les files de contingut dins del cos de la taula, sense oblidar de fer tots els encapçalats de les files en encapçalats semàntics.</li> + <li>Assegureu-vos que tot el contingut s'insereix en les cel·les correctes - amb les dades en brut, cada fila de dades del planeta s'ha de mostrar al costat del seu planeta associat.</li> + <li>Afegir atributs per fer que les capçaleres de fila i columna estiguin inequívocament associades a les files, columnes o grups de files que actuen com capçaleres.</li> + <li>Afegir una vora negre al voltant de la columna que conté tots els encapçalats de fila dels noms del planetes</li> +</ol> + +<h2 id="Consells_i_suggeriments"><span class="short_text" id="result_box" lang="ca"><span>Consells</span> <span>i</span> <span>suggeriments</span></span></h2> + +<ul> + <li>La primera cel·la de la fila de capçalera ha d'estar en blanc, i abasta dues columnes.</li> + <li>Els títols de les files del grup (per exemple <em>Jovian planets</em> ) que se situen a l'esquerra dels encapçalats de les files dels noms dels planetes (per exemple, <em>Saturn</em> ) són una mica complicats de classificar - necessita està segur que cadascun abasti el nombre correcte de files i columnes.</li> + <li>Associar les capçaleres amb les seves files/columnes és molt més fàcil que al revés.</li> +</ul> + +<h2 id="Avaluació">Avaluació</h2> + +<p>Si esteu seguint aquesta avaluació com a part d'un curs organitzat, heu de ser capaços de donar al treball al vostre professor/tutor per avaluar-ho. Si és d'auto-aprenentatge, llavors es pot obtenir la guia d'avaluació facilment preguntan a la llista de correu <a href="https://lists.mozilla.org/listinfo/dev-mdc">dev-mdc</a> o al canal d'IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> en <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Proveu el primer exercici - no hi ha res a guanyar amb trampes!</p> + +<p>{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</p> diff --git a/files/ca/learn/html/taules_html/fonaments_de_la_taula_html/index.html b/files/ca/learn/html/taules_html/fonaments_de_la_taula_html/index.html new file mode 100644 index 0000000000..f21f6fd3ca --- /dev/null +++ b/files/ca/learn/html/taules_html/fonaments_de_la_taula_html/index.html @@ -0,0 +1,618 @@ +--- +title: Fonaments de la taula HTML +slug: Learn/HTML/Taules_HTML/Fonaments_de_la_taula_HTML +tags: + - Article + - Beginner + - CodingScripting + - HTML + - Learn + - Tables + - basics + - cell + - col + - colgroup + - colspan + - header + - row + - rowspan +translation_of: Learn/HTML/Tables/Basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div> + +<p class="summary">Aquest article ens ajuda a començar amb les taules HTML, n’exposa els conceptes bàsics com ara les files i cel·les, les capçaleres, les cel·les que ocupen diverses columnes i files, i la manera d’agrupar totes les cel·les d'una columna per a propòsits d'estil.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td>Fonaments d'HTML (consulta la <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l’HTML</a>).</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Familiaritzar-se amb les taules HTML.</td> + </tr> + </tbody> +</table> + +<h2 id="Què_és_una_taula">Què és una taula?</h2> + +<p>Una taula és un conjunt estructurat de dades compost de files i columnes (<strong>dades tabulars</strong>). Una taula permet buscar de manera ràpida i fàcil valors que indiquen algun tipus de connexió entre els diferents tipus de dades, per exemple, una persona i la seva edat, o un dia de la setmana, o l’horari d'una piscina municipal.</p> + +<p><img alt="Una taula de mostra que presenta els noms i les edats d'algunes persones: Chris 38, Dennis 45, Sarah 29, Karen 47." src="https://mdn.mozillademos.org/files/14583/numbers-table.png" style="display: block; height: 156px; margin: 0px auto; width: 350px;"></p> + +<p><img alt="Un exemple de taula de dades que presenta l'horari d'una piscina" src="https://mdn.mozillademos.org/files/14587/swimming-timetable.png" style="display: block; height: 301px; margin: 0px auto; width: 794px;"></p> + +<p>Les taules s'utilitzen amb molta freqüència en la nostra societat, i hi estan des de fa molt de temps, com ho demostra aquest document del cens dels EUA de 1800:</p> + +<p><img alt="Un document en pergamí molt antic en què les dades no es llegeixen amb facilitat, però presenta clarament l'ús d'una taula de dades." src="https://mdn.mozillademos.org/files/14585/1800-census.jpg" style="display: block; height: 505px; margin: 0px auto; width: 800px;"></p> + +<p>Per tant, no és estrany que els creadors de l'HTML proporcionessin un mitjà d’estructurar i presentar dades tabulars per al web.</p> + +<h3 id="Com_funciona_una_taula">Com funciona una taula?</h3> + +<p>La característica d'una taula és que és rígida. La informació és fàcil d'interpretar a partir d’associacions visuals entre les capçaleres de les files i les columnes. Mira la taula que hi ha a continuació i busca ungegant de gas amb 62 llunes. Trobes la resposta associant els encapçalaments de fila i columna corresponents.</p> + +<table> + <thead> + <tr> + <td colspan="2"></td> + <th scope="col">Nom</th> + <th scope="col">Massa (10<sup>24</sup> kg)</th> + <th scope="col">Diàmetre (km)</th> + <th scope="col">Densitat (kg/m<sup>3</sup>)</th> + <th scope="col">Gravetat (m/s<sup>2</sup>)</th> + <th scope="col">Duració del dia (hores)</th> + <th scope="col">Distància del Sol (10<sup>6</sup>km)</th> + <th scope="col">Temperatura mitja (°C)</th> + <th scope="col">Número de llunes</th> + <th scope="col">Observacions</th> + </tr> + <tr> + <th colspan="2" rowspan="4" scope="rowgroup">Planetes terrestres</th> + <th scope="row">Mercuri</th> + <td>0,330</td> + <td>4.879</td> + <td>5.427</td> + <td>3,7</td> + <td>4.222,6</td> + <td>57,9</td> + <td>167</td> + <td>0</td> + <td>El més proper al Sol</td> + </tr> + <tr> + <th scope="row">Venus</th> + <td>4,87</td> + <td>12.104</td> + <td>5.243</td> + <td>8,9</td> + <td>2.802,0</td> + <td>108,2</td> + <td>464</td> + <td>0</td> + <td></td> + </tr> + <tr> + <th scope="row">La Terra</th> + <td>5,97</td> + <td>12.756</td> + <td>5.514</td> + <td>9,8</td> + <td>24,0</td> + <td>149,6</td> + <td>15</td> + <td>1</td> + <td>El nostre planeta</td> + </tr> + <tr> + <th scope="row">Mart</th> + <td>0,642</td> + <td>6.792</td> + <td>3.933</td> + <td>3,7</td> + <td>24,7</td> + <td>227,9</td> + <td>-65</td> + <td>2</td> + <td>El planeta vermell</td> + </tr> + <tr> + <th rowspan="4" scope="rowgroup">Planetas jovians</th> + <th rowspan="2" scope="rowgroup">Gegants de gas</th> + <th scope="row">Júpiter</th> + <td>1.898</td> + <td>142.984</td> + <td>1.326</td> + <td>23,1</td> + <td>9,9</td> + <td>778,6</td> + <td>-110</td> + <td>67</td> + <td>El planeta més gran</td> + </tr> + <tr> + <th scope="row">Saturn</th> + <td>568</td> + <td>120.536</td> + <td>687</td> + <td>9,0</td> + <td>10,7</td> + <td>1.433,5</td> + <td>-140</td> + <td>62</td> + <td></td> + </tr> + <tr> + <th rowspan="2" scope="rowgroup">Gegants de gel</th> + <th scope="row">Urà</th> + <td>86,8</td> + <td>51.118</td> + <td>1.271</td> + <td>8,7</td> + <td>17,2</td> + <td>2.872,5</td> + <td>-195</td> + <td>27</td> + <td></td> + </tr> + <tr> + <th scope="row">Neptú</th> + <td>102</td> + <td>49.528</td> + <td>1.638</td> + <td>11,0</td> + <td>16,1</td> + <td>4.495,1</td> + <td>-200</td> + <td>14</td> + <td></td> + </tr> + <tr> + <th colspan="2" scope="rowgroup">Planetes nans</th> + <th scope="row">Plutó</th> + <td>0,0146</td> + <td>2.370</td> + <td>2.095</td> + <td>0,7</td> + <td>153,3</td> + <td>5.906,4</td> + <td>-225</td> + <td>5</td> + <td>Desclassificat como planeta el 2006, pero encara és una <a href="http://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/">qüestió polèmica</a>.</td> + </tr> + </thead> +</table> + +<p>Quan es fa correctament, fins i tot les persones cegues poden interpretar les dades tabulades en una taula HTML; una taula HTML ben feta hauria de millorar l'experiència dels usuaris sense discapacitats i amb discapacitats per igual.</p> + +<h3 id="Aplicar_estil_a_una_taula">Aplicar estil a una taula</h3> + +<p>A GitHub pots trobar <a href="https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html">l'exemple en viu</a>. Observa que la taula que hi trobaràs és llegible; això és perquè la taula que apareix més amunt té uns estils mínims, mentre que la de GitHub té força més CSS aplicat.</p> + +<p>No ens enganyem; perquè les taules siguin eficaces en web s'ha de proporcionar alguna informació d'estil amb <a href="/ca/docs/Learn/CSS">CSS</a>, així com una bona estructura sòlida amb HTML. En aquest mòdul ens centrem en la part HTML; si vols saber coses sobre la part CSS, pots visitar el nostre article <a href="/ca/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estil a les taules</a> quan acabis d’aquí.</p> + +<p>En aquest mòdul no ens centrarem en el CSS, però et proporcionem un full d'estil CSS de mínims perquè l’usis per fer les taules més llegibles que amb els valors per defecte que s'obtenen sense afegir cap tipus d'estil. Pots trobar el <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">full d'estil aquí</a> i també hi pots trobar una <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">plantilla HTML</a> on aplicar el full d'estil; tot plegat et donarà un bon punt de partida per a experimentar amb taules HTML.</p> + +<h3 id="Quan_NO_s’han_d’usar_taules_HTML">Quan NO s’han d’usar taules HTML?</h3> + +<p>Les taules HTML s'han d'utilitzar per a presentar dades tabulades; estan dissenyades per a això. Malauradament, molta gent utilitza taules HTML per a fer disseny de pàgines web; per exemple, una fila per a contenir la capçalera, una fila per a contenir les columnes de contingut, una fila per a contenir el peu de pàgina, etc. En pots trobar més detalls i un exemple en l’article <a href="/en-US/docs/Learn/Accessibility/HTML#Page_layouts">Disseny de pàgines web</a> en el nostre <a href="/ca/docs/Learn/Accessibility">mòdul d'aprenentatge de l'accessibilitat</a>. Això es feia servir sovint perquè la compatibilitat CSS dels navegadors solia ser molt precària; avui dia els dissenys de pàgines web amb taules són molt menys comuns, però encara se’n poden veure en alguns racons de la xarxa web.</p> + +<p>En resum, l'ús de taules per al disseny de pàgines web en lloc de les <a href="/ca/docs/Learn/CSS/Disseny_CSS">tècniques de disseny CSS</a> és una mala idea. Les raons principals són les següents:</p> + +<ol> + <li><strong>El disseny de pàgines web amb taules redueixen l'accessibilitat dels usuaris amb discapacitats visuals</strong>: Els <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">lectors de pantalla</a> que fan servir les persones amb discapacitat visual interpreten les etiquetes d’una pàgina HTML i en llegeixen el contingut a l'usuari. Com que les taules no són l'eina adequada per al disseny de pàgines web i l’etiquetatge és més complex que amb les tècniques de disseny CSS, la sortida pels lectors de pantalla serà confusa per a aquests usuaris.</li> + <li><strong>El disseny de pàgines web amb taules genera una sopa d'etiquetes</strong>: Com s’ha dit, els dissenys de pàgines web amb taules en general involucren estructures d’etiquetatge més complexes que les tècniques de disseny adequades. Això pot generar un codi més difícil d'escriure, mantenir i depurar.</li> + <li><strong>Les taules no tenen adaptabilitat automàtica</strong>: Quan s'utilitzen esquemes de contenidors adequats (com ara {{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}} o {{htmlelement("div")}}), els valors per defecte de les amplades són el 100% de la de l’element pare. En canvi, les taules estan dimensionades per defecte d'acord amb el contingut que inclouen, de manera que calen mesures addicionals per a aconseguir aplicar estils de disseny de taula que funcionin de manera eficient en una varietat de dispositius.</li> +</ol> + +<h2 id="Aprenentatge_actiu_Crea_la_teva_primera_taula">Aprenentatge actiu: Crea la teva primera taula</h2> + +<p>Hem parlat de prou teoria sobre les taules; ara ens cabussarem en un exemple pràctic i construirem una taula senzilla.</p> + +<ol> + <li>En primer lloc, fes una còpia local de <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">blank-template.html</a> i <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> en un directori nou del teu equip local.</li> + <li>El contingut de cada taula està delimitat per aquestes dues etiquetes: <strong><code><a href="/en-US/docs/Web/HTML/Element/table"><table></table></a></code></strong>. Afegeix-les al cos del teu codi HTML.</li> + <li>El contenidor més petit que hi ha dins d'una taula és una cel·la de taula, que es crea amb un element <strong><code><a href="/en-US/docs/Web/HTML/Element/td"><td></a></code></strong> ('td' ve de <em>table data</em>, 'dades de la taula'). Afegeix el següent entre les etiquetes de la teva taula: + <pre class="brush: html notranslate"><td>Hi, I'm your first cell.</td></pre> + </li> + <li>Si vols fer una fila de quatre cel·les, has de copiar aquestes etiquetes tres vegades més. Actualitza els continguts de la teva taula perquè et quedi així: + <pre class="brush: html notranslate"><td>Hi, I'm your first cell.</td> +<td>I'm your second cell.</td> +<td>I'm your third cell.</td> +<td>I'm your fourth cell.</td></pre> + </li> +</ol> + +<p>Observa que les cel·les no es col·loquen l’una sota de l'altra, sinó que s'alineen automàticament les unes amb les altres a la mateixa fila. Cada element <code><td></code> crea una sola cel·la, i totes juntes formen la primera fila. Cada cel·la que afegeixes fa la fila més llarga.</p> + +<p>Per evitar que aquesta fila continuï creixent i començar a col·locar les cel·les següents en una segona fila, hem d'utilitzar l'etiqueta <strong><code><a href="/en-US/docs/Web/HTML/Element/tr"><tr></a></code></strong> ('tr' ve de <em>table raw</em>, ’fila de taula'). Ara explicarem això.</p> + +<ol> + <li>Col·loca les quatre cel·les que has creat entre etiquetes <code><tr></code>, d’aquesta manera: + + <pre class="brush: html notranslate"><tr> + <td>Hi, I'm your first cell.</td> + <td>I'm your second cell.</td> + <td>I'm your third cell.</td> + <td>I'm your fourth cell.</td> +</tr></pre> + </li> + <li>Ja has creat una fila, ara intenta fer-ne una o dues més; cada fila ha d’estar etiquetada en un element <code><tr></code> addicional, i cada cel·la ha d’estar continguda entre etiquetes <code><td></code>.</li> +</ol> + +<p>Això hauria de donar com a resultat una taula, com la que es veu a continuació:</p> + +<table> + <tbody> + <tr> + <td>Hi, I'm your first cell.</td> + <td>I'm your second cell.</td> + <td>I'm your third cell.</td> + <td>I'm your fourth cell.</td> + </tr> + <tr> + <td>Second row, first cell.</td> + <td>Cell 2.</td> + <td>Cell 3.</td> + <td>Cell 4.</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Nota</strong>: També la pots trobar a GitHub, com <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/simple-table.html">simple-table.html</a> (i també pots consultar-la en l’<a href="http://mdn.github.io/learning-area/html/tables/basic/simple-table.html">exemple en viu</a>).</p> +</div> + +<h2 id="Afegeix_capçaleres_amb_elements_<th>">Afegeix capçaleres amb elements <th></h2> + +<p>Ara centrem la nostra atenció en les capçaleres de taula; són cel·les especials que van al començament d'una fila o columna i defineixen el tipus de dades que conté la fila o la columna (per exemple, observa les cel·les «Breed» i «Age» en el primer exemple que es mostra en aquest article). Per a il·lustrar per què són útils, dona una ullada a la taula d'exemple següent. Primer, el codi d’origen:</p> + +<pre class="brush: html notranslate"><table> + <tr> + <td>&nbsp;</td> + <td>Knocky</td> + <td>Flor</td> + <td>Ella</td> + <td>Juan</td> + </tr> + <tr> + <td>Breed</td> + <td>Jack Russell</td> + <td>Poodle</td> + <td>Streetdog</td> + <td>Cocker Spaniel</td> + </tr> + <tr> + <td>Age</td> + <td>16</td> + <td>9</td> + <td>10</td> + <td>5</td> + </tr> + <tr> + <td>Owner</td> + <td>Mother-in-law</td> + <td>Me</td> + <td>Me</td> + <td>Sister-in-law</td> + </tr> + <tr> + <td>Eating Habits</td> + <td>Eats everyone's leftovers</td> + <td>Nibbles at food</td> + <td>Hearty eater</td> + <td>Will eat till he explodes</td> + </tr> +</table></pre> + +<p>Ara, la representació de la taula:</p> + +<table> + <tbody> + <tr> + <td></td> + <td>Knocky</td> + <td>Flor</td> + <td>Ella</td> + <td>Juan</td> + </tr> + <tr> + <td>Breed</td> + <td>Jack Russell</td> + <td>Poodle</td> + <td>Streetdog</td> + <td>Cocker Spaniel</td> + </tr> + <tr> + <td>Age</td> + <td>16</td> + <td>9</td> + <td>10</td> + <td>5</td> + </tr> + <tr> + <td>Owner</td> + <td>Mother-in-law</td> + <td>Me</td> + <td>Me</td> + <td>Sister-in-law</td> + </tr> + <tr> + <td>Eating Habits</td> + <td>Eats everyone's leftovers</td> + <td>Nibbles at food</td> + <td>Hearty eater</td> + <td>Will eat till he explodes</td> + </tr> + </tbody> +</table> + +<p>El problema és que, encara que pots anar intuint què passa aquí, fer el creuament de les dades no resulta tan fàcil com podria ser. Seria molt millor si les capçaleres de la columna i de la fila destaquessin d'alguna manera.</p> + +<h3 id="Aprenentatge_actiu_capçaleres_de_taula"><span class="short_text" id="result_box" lang="ca">Aprenentatge actiu: capçaleres de taula</span></h3> + +<p>Intentem millorar aquesta taula.</p> + +<ol> + <li>En primer lloc, fes una còpia local dels fitxers <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table.html">dogs-table.html</a> i <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> en un directori nou del teu equip local. L'HTML conté el mateix exemple Dogs que has vist abans.</li> + <li>Perquè les capçaleres de taula es reconeguin com capçaleres, tant visualment com semànticament, pots utilitzar l'element <strong><code><a href="/en-US/docs/Web/HTML/Element/th"><th></a></code></strong> ('th' ve de <em>table header</em>, 'capçalera de taula'). Funciona exactament de la mateixa manera que un element <code><td></code>, però denota una capçalera, que no és una cel·la normal. Entra al codi HTML i canvia tots els elements <code><td></code> que delimiten les cel·les de capçalera de la taula per elements <code><th></code>.</li> + <li>Desa l'HTML i carrega’l en un navegador; ara hauria de mostrar les cel·les de capçalera amb aspecte de capçaleres.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: En GitHub pots trobar el nostre exemple acabat en <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table-fixed.html">dogs-table-fixed.html</a> (i també el pots consultar en l’<a href="http://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html">exemple en viu</a>).</p> +</div> + +<h3 id="Per_què_són_útils_les_capçaleres">Per què són útils les capçaleres?</h3> + +<p>Ja hem respost parcialment aquesta pregunta; quan busques dades, resulta més fàcil trobar-les quan les capçaleres destaquen clarament i el disseny es veu més bé en general.</p> + +<div class="note"> +<p><strong>Nota</strong>: Les capçaleres de les taules venen amb un estil per defecte fins i tot quan no afegeixes el teu estil de taula propi, perquè destaquin: el text està en negreta i centrat.</p> +</div> + +<p>Les capçaleres de les taules també presenten un altre avantatge: juntament amb l'atribut <code>scope</code> (que veurem en l’article següent), fa les taules més accessibles perquè cada capçalera s’associa amb totes les dades de la mateixa fila o columna. Els lectors de pantalla són capaços de llegir tota una fila o tota una columna de dades alhora, i això és força útil.</p> + +<h2 id="Cel·les_que_ocupen_diverses_files_i_columnes">Cel·les que ocupen diverses files i columnes</h2> + +<p>A vegades volem que les cel·les abastin diverses files o columnes. Prenguem l’exemple senzill següent, que mostra uns quants noms d’animals comuns. Volem que en alguns casos es mostrin els noms dels mascles i els de les femelles al costat del nom de l'animal, però d’altres vegades no ho volem, sinó que volem que el nom de animal abasti tota l’amplada de la taula.</p> + +<p>L’etiquetatge inicial és el següent:</p> + +<pre class="brush: html notranslate"><table> + <tr> + <th>Animals</th> + </tr> + <tr> + <th>Hippopotamus</th> + </tr> + <tr> + <th>Horse</th> + <td>Mare</td> + </tr> + <tr> + <td>Stallion</td> + </tr> + <tr> + <th>Crocodile</th> + </tr> + <tr> + <th>Chicken</th> + <td>Cock</td> + </tr> + <tr> + <td>Rooster</td> + </tr> +</table></pre> + +<p>Però la sortida no ens dona exactament el que volem:</p> + +<table> + <tbody> + <tr> + <th>Animals</th> + </tr> + <tr> + <th>Hippopotamus</th> + </tr> + <tr> + <th>Horse</th> + <td>Mare</td> + </tr> + <tr> + <td>Stallion</td> + </tr> + <tr> + <th>Crocodile</th> + </tr> + <tr> + <th>Chicken</th> + <td>Cock</td> + </tr> + <tr> + <td>Rooster</td> + </tr> + </tbody> +</table> + +<p>Necessitem una manera d'aconseguir que «Animals», «Hippopotamus» i «Crocodile» ocupin l’amplada de dues columnes, i «Horse» i «Chicken» ocupin més de dues files cap avall. Afortunadament, les capçaleres de taula i les cel·les tenen els atributs <code>colspan</code> i <code>rowspan</code>, que ens permeten fer precisament aquestes coses. Totes dues propietats accepten per valor un nombre sense unitats, que és igual al nombre de files o columnes que es vol abastar. Per exemple, <code>colspan="2"</code> fa que una cel·la ocupi dues columnes.</p> + +<p>Utilitzem <code>colspan</code> i <code>rowspan</code> per a millorar aquesta taula.</p> + +<ol> + <li>En primer lloc, fes una còpia local dels fitxers <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table.html">animals-table.html</a> i <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> en un directori nou del teu equip local. L'HTML conté el mateix exemple amb animals que has vist abans.</li> + <li>A continuació, utilitza <code>colspan</code> perquè «Animals», «Hippopotamus» i «Crocodile» ocupin l’amplada de dues columnes.</li> + <li>Finalment, utilitza <code>rowspan</code> perquè «Horse» i «Chicken» ocupin dues files.</li> + <li>Desa el codi i obre’l en el navegador per a veure com millora.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: En GitHub pots trobar el nostre exemple acabat en <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table-fixed.html">animals-table-fixed.html</a> (també el pots consultar en l’<a href="http://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html">exemple en viu</a>).</p> +</div> + +<table id="tabular" style="background-color: white;"> +</table> + +<h2 id="Aplicar_a_les_columnes_un_estil_comú"><span class="short_text" id="result_box" lang="ca">Aplicar a les columnes un estil comú</span></h2> + +<p>Abans de continuar endavant, en aquest article explicarem una darrera característica. HTML té un mètode per a definir la informació d'estil per a tota una columna de dades en un sol lloc; es tracta dels elements <strong><code><a href="/en-US/docs/Web/HTML/Element/col"><col></a></code></strong> i <strong><code><a href="/en-US/docs/Web/HTML/Element/colgroup"><colgroup></a></code></strong>. Aquests elements existeixen perquè pot ser una mica empipador i ineficient haver d'especificar l'estil de les columnes; en general, la informació d'estil s'ha d'especificar per a cada <code><td></code> o <code><th></code> de la columna, o s’ha d’utilitzar un selector complex com {{cssxref(":nth-child()")}}.</p> + +<p>Considerem l’exemple següent:</p> + +<pre class="brush: html notranslate"><table> + <tr> + <th>Data 1</th> + <th style="background-color: yellow">Data 2</th> + </tr> + <tr> + <td>Calcutta</td> + <td style="background-color: yellow">Orange</td> + </tr> + <tr> + <td>Robots</td> + <td style="background-color: yellow">Jazz</td> + </tr> +</table></pre> + +<p>Ens dona el resultat següent:</p> + +<table> + <tbody> + <tr> + <th>Data 1</th> + <th style="background-color: yellow;">Data 2</th> + </tr> + <tr> + <td>Calcutta</td> + <td style="background-color: yellow;">Orange</td> + </tr> + <tr> + <td>Robots</td> + <td style="background-color: yellow;">Jazz</td> + </tr> + </tbody> +</table> + +<p>Això no és l'ideal, perquè hem de repetir la informació d'estil en les tres cel·les de la columna (probablement en un projecte real tindríem un conjunt de classes en totes tres i l'estil especificat en un full d'estil separat). En comptes d’això, podem especificar la informació una vegada en un element <code><col></code>. Els elements <code><col></code> s'especifiquen dins d'un contenidor <code><colgroup></code> just a sota de l'etiqueta d'obertura <code><table></code>. Podem crear el mateix efecte que veiem a dalt si especifiquem la nostra taula de la següent manera:</p> + +<pre class="brush: html notranslate"><table> + <colgroup> + <col> + <col style="background-color: yellow"> + </colgroup> + <tr> + <th>Data 1</th> + <th>Data 2</th> + </tr> + <tr> + <td>Calcutta</td> + <td>Orange</td> + </tr> + <tr> + <td>Robots</td> + <td>Jazz</td> + </tr> +</table></pre> + +<p>De fet, hem definit dues «columnes d'estil», una que especifica la informació d'estil per a cadascuna de les columnes. No volem aplicar estil a la primera columna, per això encara hem d'incloure un element en blanc <code><col></code>; si no ho fem, l'estil s'aplicarà justament a la primera columna.</p> + +<p>Si volem aplicar la informació d'estil a totes dues columnes, podem incloure un element <code><col></code> que inclogui un atribut <code>span</code>, com aquest:</p> + +<pre class="brush: html notranslate"><colgroup> + <col style="background-color: yellow" span="2"> +</colgroup></pre> + +<p>Igual que <code>colspan</code> i <code>rowspan</code>, <code>span</code> pren un valor numèric sense unitats que especifica el nombre de columnes a les quals volem aplicar l'estil.</p> + +<h3 id="Aprenentatge_actiu_colgroup_i_col">Aprenentatge actiu: colgroup i col</h3> + +<p>Ara és el moment de fer-ho tu mateix.</p> + +<p>A continuació pots veure l'horari d'una professora d'idiomes. Divendres té una classe nova d'ensenyament d'holandès durant tot el dia, però també fa classes d’alemany algunes hores el dimarts i el dijous. Vol que destaquin les columnes dels dies que fa classes.</p> + +<table> + <colgroup> + <col> + <col style="background-color: #97DB9A;"> + <col style="width: 42px;"> + <col style="background-color: #97DB9A;"> + <col style="background-color: #DCC48E; border: 4px solid #C1437A;"> + <col style="width: 42px;"> + </colgroup> + <tbody> + <tr> + <td></td> + <th>Mon</th> + <th>Tues</th> + <th>Wed</th> + <th>Thurs</th> + <th>Fri</th> + <th>Sat</th> + <th>Sun</th> + </tr> + <tr> + <th>1st period</th> + <td>English</td> + <td></td> + <td></td> + <td>German</td> + <td>Dutch</td> + <td></td> + <td></td> + </tr> + <tr> + <th>2nd period</th> + <td>English</td> + <td>English</td> + <td></td> + <td>German</td> + <td>Dutch</td> + <td></td> + <td></td> + </tr> + <tr> + <th>3rd period</th> + <td></td> + <td>German</td> + <td></td> + <td>German</td> + <td>Dutch</td> + <td></td> + <td></td> + </tr> + <tr> + <th>4th period</th> + <td></td> + <td>English</td> + <td></td> + <td>English</td> + <td>Dutch</td> + <td></td> + <td></td> + </tr> + </tbody> +</table> + +<p>Tornar a crear la taula seguint aquests passos:</p> + +<ol> + <li>En primer lloc, fes una còpia local de l'arxiu <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable.html">timetable.html</a> en un directori nou del teu equip local. L'HTML conté la mateixa taula que hem vist abans, menys la informació de les columnes d'estil.</li> + <li>Afegeix un element <code><colgroup></code> a la part superior de la taula, just a sota de l'etiqueta <code><table></code>, en què afegirem els elements <code><col>.</code></li> + <li>No apliquem cap estil a les dues primeres columnes.</li> + <li>Afegim un color de fons a les columnes segona i tercera. El valor de l'atribut <code>style</code> és <code>background-color:#97DB9A</code>;</li> + <li>Establim una amplada de separació en la quarta columna. El valor de l'atribut <code>style</code> és <code>width: 42px</code>;</li> + <li>Afegim un color de fons a la cinquena columna. El valor de l'atribut <code>style</code> és <code>background-color:#97DB9A;</code></li> + <li>Afegim un color de fons diferent, més una vora, a la sisena columna, per a indicar que és un dia especial perquè dona una classe nova. Els valors de l'atribut <code>style</code> són <code>background-color:#DCC48E</code>; <code>border:4px solid #C1437A</code>;</li> + <li>Els dos últims dies són dies lliures; el valor de l'atribut <code>style</code> és <code>width: 42px</code>;</li> +</ol> + +<p>Continua tu amb l'exemple i a veure com et va. Si t’encalles o vols revisar-lo, pots trobar la nostra versió en GitHub com <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a> (també el pots consultar en l’<a href="http://mdn.github.io/learning-area/html/tables/basic/timetable-fixed.html">exemple en viu</a>).</p> + +<h2 id="Resum">Resum</h2> + +<p>Amb això concloem gairebé els conceptes bàsics de les taules HTML. En l’article següent veurem algunes característiques una mica més avançades de les taules i començarem a pensar en l'accessibilitat per a les persones amb discapacitat visual.</p> + +<div>{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div> diff --git a/files/ca/learn/html/taules_html/index.html b/files/ca/learn/html/taules_html/index.html new file mode 100644 index 0000000000..add81f874e --- /dev/null +++ b/files/ca/learn/html/taules_html/index.html @@ -0,0 +1,45 @@ +--- +title: Taules HTML +slug: Learn/HTML/Taules_HTML +tags: + - Article + - Beginner + - CodingScripting + - Guide + - HTML + - Landing + - Module + - Tables +translation_of: Learn/HTML/Tables +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Una tasca molt comuna en HTML és estructurar dades tabulars, té una sèrie d'elements i atributs per a aquest propòsit. Juntament amb una mica de CSS per el disseny, HTML fa que sigui fàcil de visualitzar taules d'informació a la web, com ara el pla de lliçó de l'escola, els horaris a la piscina del lloc, estadístiques sobre els dinosaures favorits o equip de futbol. Aquest mòdul us porta a través de tot el que es necessita saber sobre l'estructuració de dades tabulars utilitzant HTML.</p> + +<h2 id="Requisits_previs">Requisits previs</h2> + +<p>Abans d'iniciar aquest mòdul, ja hauria d'haver cobert els conceptes bàsics d'HTML - vegeu <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introducció a HTML</a>.</p> + +<div class="note"> +<p><strong>Nota</strong>: Si es treballa en un ordinador/tauleta/altre dispositiu el qual no té la capacitat de crear els vostres propis arxius, es pot portar a terme (la majoria) els exemples amb un programa de codificació en línia, com ara <a href="http://jsbin.com/">JSBin</a> o <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Guies">Guies</h2> + +<p>Aquest mòdul conté els següents articles:</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Tables/Basics">Taules HTML bàsiques</a></dt> + <dd> + <p>Aquest article ens ajudarà a començar amb les taules HTML, que cobreix els conceptes més bàsics com ara files i cel·les, encapçalats, fent que les cel·les abastin múltiples columnes i files, i com agrupar totes les cel·les d'una columna per a propòsits d'estil.</p> + </dd> + <dt><a href="/en-US/docs/Learn/HTML/Tables/Advanced">Taules HTML característiques avançades i accessibilitat</a></dt> + <dd>En el segon article d'aquest mòdul, ens fixarem en algunes de les característiques més avançades de les taules HTML - com llegendes/resums i agrupament de files en la taula, seccions de cos i peu - així com l'accessibilitat de les taules per als usuaris amb discapacitat visual.</dd> +</dl> + +<h2 id="Avaluació">Avaluació</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Tables/Structuring_planet_data">Estructuració de dades dels planetes</a></dt> + <dd>En la nostra avaluació de la taula, us proporcionarem algunes dades sobre els planetes del nostre sistema solar i aconseguir una estructura dins d'una taula HTML.</dd> +</dl> diff --git a/files/ca/learn/html/taules_html/taula_html_característiques_avançades_i_laccessibilitat/index.html b/files/ca/learn/html/taules_html/taula_html_característiques_avançades_i_laccessibilitat/index.html new file mode 100644 index 0000000000..69b7edf725 --- /dev/null +++ b/files/ca/learn/html/taules_html/taula_html_característiques_avançades_i_laccessibilitat/index.html @@ -0,0 +1,462 @@ +--- +title: 'Taules HTML: característiques avançades i accessibilitat' +slug: Learn/HTML/Taules_HTML/Taula_HTML_característiques_avançades_i_laccessibilitat +tags: + - Accessibility + - Advanced + - Article + - Beginner + - CodingScripting + - HTML + - Headers + - Learn + - caption + - nesting + - scope + - sumary + - table + - tbody + - tfoot + - thead +translation_of: Learn/HTML/Tables/Advanced +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}</div> + +<p class="summary">En el segon article d'aquest mòdul ens fixem en algunes de les característiques més avançades de les taules HTML, com ara les llegendes/resums i l'agrupament de files en seccions de capçalera, cos i peu de taula, i en l'accessibilitat de les taules per als usuaris amb discapacitat visual.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td>Fonaments d'HTML (consulta la <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l’HTML</a>).</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Aprendre les característiques més avançades de les taules HTML i qüestions d'accessibilitat de les taules.</td> + </tr> + </tbody> +</table> + +<h2 id="Afegir_un_títol_a_la_taula_amb_<caption>">Afegir un títol a la taula amb <caption></h2> + +<p>Pots donar a la taula una títol, que es posa dins d'un element {{htmlelement("caption")}} que està imbricat dins de l'element {{htmlelement("table")}}. Aquest títol s'ha de posar just sota l'etiqueta d'obertura <code><table></code>.</p> + +<pre class="brush: html notranslate"><table> + <caption>Dinosaurs in the Jurassic period</caption> + + ... +</table></pre> + +<p>Com es pot deduir del breu exemple anterior, el títol està destinat a contenir una descripció del contingut de la taula. Això és útil per a tots els lectors que volen tenir una idea ràpida de si la taula els és útil a partir de donar una ullada a la pàgina, però ho és en particular per als usuaris cecs perquè, en lloc d’haver-se d’esperar que el lector de pantalla llegeixi el contingut de moltes cel·les per a esbrinar quina informació proporciona la taula, podran decidir a partir del títol si llegeixen la taula amb més detall.</p> + +<p>Un títol es col·loca directament sota l'etiqueta <code><table></code>.</p> + +<div class="note"> +<p><strong>Nota</strong>: Per a proporcionar una descripció també pots utilitzar l'atribut {{htmlattrxref("summary","table")}} en l'etiqueta <code><table></code>, que els lectors de pantalla també poden llegir. Tanmateix, et recomanem que empris l'element <code><caption></code>, perquè l’atribut {{htmlattrxref("summary","table")}} està {{glossary("desaprovat")}} per l'especificació HTML 5, i a més els usuaris vidents no el poden llegir (no apareix a la pàgina).</p> +</div> + +<h3 id="Aprenentatge_actiu_Afegir_un_títol">Aprenentatge actiu: Afegir un títol</h3> + +<p>Tornem al primer exemple de l'article anterior i observem com es fa això.</p> + +<ol> + <li>Obre l’exemple de la taula horària de la professora d'idiomes del final de l’article <a href="https://wiki.developer.mozilla.org/ca/docs/Learn/HTML/Taules_HTML/Fonaments_de_la_taula_HTML#Aprenentatge_actiu_colgroup_i_col">Fonaments bàsics de les taules HTML</a>, o fes una còpia local de l'arxiu <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a></li> + <li>Afegeix un títol adequat a la taula.</li> + <li>Desa el codi i obre’l en el navegador, i observa com es veu.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: Pots trobar a GitHub la nostra versió del fitxer <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/timetable-caption.html">timetable-caption.html</a>; i també el pots consultar en l’<a href="http://mdn.github.io/learning-area/html/tables/advanced/timetable-caption.html">exemple en viu</a>).</p> +</div> + +<h2 id="Afegir_estructura_amb_<thead>_<tfoot>_i_<tbody>">Afegir estructura amb <thead>, <tfoot> i <tbody></h2> + +<p>A mesura que l’estructura de les taules es fa més complexa, és útil aprofundir en la definició estructural. Una manera clara de fer això és amb l'ús de {{htmlelement("thead")}}, {{htmlelement("tfoot")}} i {{htmlelement("tbody")}}, que et permeten etiquetar les seccions de capçalera, peu i cos de la taula.</p> + +<p>Aquests elements no fan la taula més accessible als usuaris de lectors de pantalla, i no proporcionen cap millora visual, però són molt útils per a l'aplicació d’estil i el disseny de pàgina web perquè actuen com «ganxos» amb què s’afegeix CSS a la taula. Podem esmentar com a exemples interessants que es repeteixin en cada pàgina impresa la capçalera i el peu de pàgina d’una taula molt llarga, o que el cos de la taula es mostri en una sola pàgina i el contingut disponible es pugui desplaçar amunt i avall.</p> + +<p><span class="short_text" id="result_box" lang="ca">Per a utilitzar aquests elements cal tenir en compte el següent:</span></p> + +<ul> + <li>L'element <code><thead></code> ha d'etiquetar la part de la taula que és la capçalera; normalment és la primera fila, que conté les capçaleres de columna, però no sempre és així. Si utilitzes els elements {{htmlelement("col")}}/{{htmlelement("colgroup")}}, la capçalera de la taula hi ha de venir just a sota.</li> + <li>L'element <code><tfoot></code> ha d'etiquetar la part de la taula que és el peu, que podria ser la fila del final, que conté la suma dels elements de les files anteriors, per exemple. Pots incloure el peu de taula a la part inferior de la taula, com es podria esperar, o just sota la capçalera de la taula (el navegador la mostrarà a la part inferior de la taula).</li> + <li>L'element <code><tbody></code> ha d'etiquetar les altres parts del contingut de la taula que no estan a la capçalera ni al peu de taula. Apareix a sota de la capçalera de la taula, o de vegades a sota del peu de taula, segons com decideixis estructurar-la (consulta els articles anteriors).</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: <code><tbody></code> sempre s'inclou implícitament en totes les taules, si no s'especifica en el codi. Per comprovar-ho, obre un dels exemples anteriors que no inclogui <code><tbody></code> i observa el codi HTML amb les <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">eines de desenvolupador del navegador</a>; observa que el navegador hi ha afegit aquesta etiqueta. Et podries demanar per què molestar-nos a incloure-la; s’ha de fer, perquè ens proporciona més control sobre l’estructura de la taula i l'estil.</p> +</div> + +<h3 id="Aprenentatge_actiu_afegir_estructura_a_la_taula">Aprenentatge actiu: afegir estructura a la taula</h3> + +<p>Posarem aquests elements nous en acció.</p> + +<ol> + <li>Primer de tot, fes una còpia local de <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record.html">spending-record.html</a> i <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css">minimal-table.css</a> en una carpeta nova.</li> + <li>Obre’l en un navegador; observa que no està malament, però es podria millorar. La fila «SUM» conté una suma de les quantitats que s’han gastat i no sembla que estigui en el lloc adequat, i falten alguns detalls de codi.</li> + <li>Posa les capçaleres òbvies de fila dins d'un element <code><thead></code>, la fila «SUM» dins d'un element <code><tfoot></code>, i la resta del contingut dins d'un element <code><tbody></code>.</li> + <li>Desa i actualitza, i observa que en afegir l'element <code><tfoot></code> la fila «SUM» s’ha col·locat a la part inferior de la taula.</li> + <li>A continuació, afegeix un atribut {{htmlattrxref("colspan","td")}} perquè la cel·la «SUM» ocupi les quatre primeres columnes, de manera que el nombre aparegui a la part inferior de la columna «Cost».</li> + <li>Afegeix una mica d'estil extra a la taula i observa la utilitat d’aplicar CSS a aquests elements. Observa que en la capçalera (<code>head</code>) del document HTML hi ha un element {{htmlelement("style")}} buit. Afegirem dins d'aquest element les línies de codi CSS següents: + <pre class="brush: css notranslate">tbody { + font-size: 90%; + font-style: italic; +} + +tfoot { + font-weight: bold; +} +</pre> + </li> + <li>Desa i actualitza, i dona una ullada al resultat. Si els elements <code><tbody></code> i <code><tfoot></code> no estan a lloc, serà molt més complicat escriure selectors/regles i aplicar-los el mateix estil.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: No esperem que entenguis del tot el CSS en aquest moment. N’aprendràs més en els nostres mòduls dedicats al CSS (<a href="/ca/docs/Learn/CSS/First_steps">Introducció al CSS</a> és un bon lloc per on començar; també hi ha un article concret sobre <a href="/ca/docs/Learn/CSS/Building_blocks/Styling_tables">aplicar estil a les taules</a>).</p> +</div> + +<p>La taula acabada ha de presentar un aspecte semblant a aquest:</p> + +<div class="hidden"> +<h6 id="Hidden_example">Hidden example</h6> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My spending record</title> + <style> + + html { + font-family: sans-serif; + } + + table { + border-collapse: collapse; + border: 2px solid rgb(200,200,200); + letter-spacing: 1px; + font-size: 0.8rem; + } + + td, th { + border: 1px solid rgb(190,190,190); + padding: 10px 20px; + } + + th { + background-color: rgb(235,235,235); + } + + td { + text-align: center; + } + + tr:nth-child(even) td { + background-color: rgb(250,250,250); + } + + tr:nth-child(odd) td { + background-color: rgb(245,245,245); + } + + caption { + padding: 10px; + } + + tbody { + font-size: 90%; + font-style: italic; + } + + tfoot { + font-weight: bold; + } + </style> + </head> + <body> + <table> + <caption>How I chose to spend my money</caption> + <thead> + <tr> + <th>Purchase</th> + <th>Location</th> + <th>Date</th> + <th>Evaluation</th> + <th>Cost (€)</th> + </tr> + </thead> + <tfoot> + <tr> + <td colspan="4">SUM</td> + <td>118</td> + </tr> + </tfoot> + <tbody> + <tr> + <td>Haircut</td> + <td>Hairdresser</td> + <td>12/09</td> + <td>Great idea</td> + <td>30</td> + </tr> + <tr> + <td>Lasagna</td> + <td>Restaurant</td> + <td>12/09</td> + <td>Regrets</td> + <td>18</td> + </tr> + <tr> + <td>Shoes</td> + <td>Shoeshop</td> + <td>13/09</td> + <td>Big regrets</td> + <td>65</td> + </tr> + <tr> + <td>Toothpaste</td> + <td>Supermarket</td> + <td>13/09</td> + <td>Good</td> + <td>5</td> + </tr> + </tbody> + </table> + + </body> +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Hidden_example', '100%', 300) }}</p> + +<div class="note"> +<p><strong>Nota</strong>: Pots trobar el fitxer a GitHub com <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record-finished.html">spending-record-finished.html</a> (i també consultar l’<a href="http://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html">exemple en viu</a>).</p> +</div> + +<h2 id="Taules_imbricades">Taules imbricades</h2> + +<p>És possible imbricar una taula dins d'una altra, sempre que s'hi inclogui l'estructura completa, que inclou l'element <code><table></code>. No és en aconsellable en general perquè dona un marcatge més confús i menys accessible als usuaris de lectors de pantalla, i perquè en molts casos es pot resoldre afegint cel·les/files/columnes addicionals a la taula d’origen. Això no obstant, de vegades és necessari, per exemple, per a importar contingut fàcilment d'altres fonts.</p> + +<p>El marcatge següent mostra una imbricació de taules senzilla:</p> + +<pre class="brush: html notranslate"><table id="table1"> + <tr> + <th>title1</th> + <th>title2</th> + <th>title3</th> + </tr> + <tr> + <td id="nested"> + <table id="table2"> + <tr> + <td>cell1</td> + <td>cell2</td> + <td>cell3</td> + </tr> + </table> + </td> + <td>cell2</td> + <td>cell3</td> + </tr> + <tr> + <td>cell4</td> + <td>cell5</td> + <td>cell6</td> + </tr> +</table></pre> + +<p>La sortida presenta aquest aspecte:</p> + +<table id="table1"> + <tbody> + <tr> + <th>title1</th> + <th>title2</th> + <th>title3</th> + </tr> + <tr> + <td id="nested"> + <table id="table2"> + <tbody> + <tr> + <td>cell1</td> + <td>cell2</td> + <td>cell3</td> + </tr> + </tbody> + </table> + </td> + <td>cell2</td> + <td>cell3</td> + </tr> + <tr> + <td>cell4</td> + <td>cell5</td> + <td>cell6</td> + </tr> + </tbody> +</table> + +<h2 id="Taules_per_a_usuaris_amb_discapacitats_visuals"><span class="short_text" id="result_box" lang="ca">Taules per a usuaris amb discapacitats visuals</span></h2> + +<p>Recapitulem breument sobre com la manera de fer servir les taules de dades. Una taula pot ser una eina molt útil perquè ens dona un accés ràpid a les dades i ens permet buscar-hi valors. Per exemple, només cal un cop d'ull breu a la taula de sota per a esbrinar quants anells es van vendre a Gant (Gent) l'agost passat. Per a entendre la informació, fem associacions visuals entre les dades i les capçaleres de les files i columnes d'aquesta taula.</p> + +<table> + <caption>Items Sold August 2016</caption> + <tbody> + <tr> + <td></td> + <td></td> + <th colspan="3" scope="colgroup">Clothes</th> + <th colspan="2" scope="colgroup">Accessories</th> + </tr> + <tr> + <td></td> + <td></td> + <th scope="col">Trouses</th> + <th scope="col">Skirts</th> + <th scope="col">Dresses</th> + <th scope="col">Bracelets</th> + <th scope="col">Rings</th> + </tr> + <tr> + <th rowspan="3" scope="rowgroup">Belgium</th> + <th scope="row">Antwerp</th> + <td>56</td> + <td>22</td> + <td>43</td> + <td>72</td> + <td>23</td> + </tr> + <tr> + <th scope="row">Gent</th> + <td>46</td> + <td>18</td> + <td>50</td> + <td>61</td> + <td>15</td> + </tr> + <tr> + <th scope="row">Brussels</th> + <td>51</td> + <td>27</td> + <td>38</td> + <td>69</td> + <td>28</td> + </tr> + <tr> + <th rowspan="2" scope="rowgroup">The Netherlands</th> + <th scope="row">Amsterdam</th> + <td>89</td> + <td>34</td> + <td>69</td> + <td>85</td> + <td>38</td> + </tr> + <tr> + <th scope="row">Utrecht</th> + <td>80</td> + <td>12</td> + <td>43</td> + <td>36</td> + <td>19</td> + </tr> + </tbody> +</table> + +<p>Però... i si no pots fer associacions visuals? Com es pot llegir una taula com l'anterior, llavors? Les persones que tenen alguna discapacitat visual sovint utilitzen lectors de pantalla que els llegeixen la informació de les pàgines web. Això no és cap problema quan es llegeix text sense format, però la interpretació d'una taula pot ser tot un repte per a una persona cega. Tanmateix, amb el marcatge adequat, les associacions visuals es poden substituir per unes de programàtiques.</p> + +<p>En aquesta secció de l'article t'oferim tècniques que confereixen a les taules una accessibilitat màxima.</p> + +<h3 class="attTitle" id="Utilitza_capçaleres_per_a_les_files_i_les_columnes"><span class="short_text" id="result_box" lang="ca">Utilitza capçaleres per a les files i les columnes</span></h3> + +<p>Els lectors de pantalla identifiquen totes les capçaleres i les utilitzen per a fer associacions programàtiques entre les capçaleres i les cel·les amb què es relacionen. La combinació de les capçaleres de les files i les columnes identifica i interpreta les dades que hi ha en cada cel·la perquè l'usuari lector de pantalla pugui interpretar la taula de manera similar a com ho fa un usuari sense discapacitats visuals.</p> + +<p>Ja hem exposat les capçaleres en l’article anterior; consulta <a href="https://wiki.developer.mozilla.org/ca/docs/Learn/HTML/Taules_HTML/Fonaments_de_la_taula_HTML#Afegeix_cap%C3%A7aleres_amb_elements_%3Cth%3E">Afegir capçaleres amb elements <th></a>.</p> + +<h3 class="attTitle" id="Latribut_scope">L'atribut scope</h3> + +<p>Un tema nou d'aquest article és l'atribut {{htmlattrxref("scope","th")}}, que s’afegeix a l'element <code><th></code> i informa els lectors de pantalla exactament de quines cel·les són capçalera les cel·les de capçalera; per exemple, la capçalera és de la fila o de la columna en què es troba? Si tornem enrere al nostre exemple de registre de despeses, les capçaleres de columna es podrien definir sense ambigüitats com capçaleres de columna de la manera següent:</p> + +<pre class="brush: html notranslate"><thead> + <tr> + <th scope="col">Purchase</th> + <th scope="col">Location</th> + <th scope="col">Date</th> + <th scope="col">Evaluation</th> + <th scope="col">Cost (€)</th> + </tr> +</thead></pre> + +<p>I cada fila podria tenir una capçalera definida de la mateixa manera (si afegíssim capçaleres a les files, a més de les capçaleres de columna):</p> + +<pre class="brush: html notranslate"><tr> + <th scope="row">Haircut</th> + <td>Hairdresser</td> + <td>12/09</td> + <td>Great idea</td> + <td>30</td> +</tr></pre> + +<p>Els lectors de pantalla reconeixen un marcatge estructurat com aquest i permeten als usuaris llegir tota una columna o tota una fila alhora, per exemple.</p> + +<p><code>scope</code> té dos valors possibles més; <code>colgroup</code> i <code>rowgroup</code>. S'utilitzen per als títols que es col·loquen a la part superior de diverses columnes o files. Si tornem enrere a la taula d’exemple dels articles venuts l’agost del 2016 (Items Sold August 2016) que hi ha al començament d'aquesta secció de l'article, pots observar que la cel·la «Clothes» fa de capçalera de les cel·les «Trousers», «Skirts» i «Dresses». Totes aquestes cel·les haurien de marcar-se com capçaleres (<code><th></code>), però «Clothes» és un títol de nivell superior i defineix els altres tres subtítols. Per tant, «Clothes» ha de tenir un atribut <code>scope="colgroup"</code>, mentre que les altres tindrien un atribut <code>scope="col"</code>.</p> + +<h3 class="attTitle" id="Els_atributs_id_i_headers">Els atributs id i headers</h3> + +<p>Una alternativa a l'ús de l'atribut <code>scope</code> és utilitzar els atributs {{htmlattrxref("id")}} i {{htmlattrxref("headers", "td")}} per a crear associacions entre les capçaleres i les cel·les. La forma en què s'utilitzen és la següent:</p> + +<ol> + <li>Afegeix un <code>id</code> únic per a cada element <code><th></code>.</li> + <li>Afegeix un atribut <code>headers</code> per a cada element <code><td></code>. Cada atribut <code>headers</code> ha d’incloure una llista dels <code>id</code> de tots els elements <code><th></code> que actuen de capçalera per a aquesta cel·la, separats per espais.</li> +</ol> + +<p>Això dona a la taula HTML una definició explícita de la posició de cada cel·la de la taula, definida per les capçaleres de cada columna i de cada fila de què forma part, de manera semblant a un full de càlcul. Perquè funcioni bé, la taula necessita les dues capçaleres, de fila i de columna.</p> + +<p>Tornem al nostre exemple de les despeses; dos fragments anteriors es podrien reescriure així:</p> + +<pre class="brush: html notranslate"><thead> + <tr> + <th id="purchase">Purchase</th> + <th id="location">Location</th> + <th id="date">Date</th> + <th id="evaluation">Evaluation</th> + <th id="cost">Cost (€)</th> + </tr> +</thead> +<tbody> +<tr> + <th id="haircut">Haircut</th> + <td headers="location haircut">Hairdresser</td> + <td headers="date haircut">12/09</td> + <td headers="evaluation haircut">Great idea</td> + <td headers="cost haircut">30</td> +</tr> + + ... + +</tbody></pre> + +<div class="note"> +<p><strong>Nota</strong>: Aquest mètode crea associacions molt precises entre les capçaleres i les cel·les de dades però utilitza <strong>molt</strong> més etiquetatge i no deixa gens d’espai per a errors. L'enfocament de <code>scope</code> sol ser prou per a la majoria de les taules.</p> +</div> + +<h3 id="Aprenentatge_actiu_Juga_amb_l’scope_i_les_capçaleres">Aprenentatge actiu: Juga amb l’scope i les capçaleres</h3> + +<ol> + <li>Per a aquest exercici final, et proposem de fer, primer, còpies locals dels fitxers <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold.html">items-sold.html</a> i <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css">minimal-table.css</a>, en un directori nou.</li> + <li>A continuació, afegeix els atributs <code>scope</code> apropiats per a fer aquesta taula més adequada.</li> + <li>Per acabar, fes una altra còpia dels fitxers inicials i millora l’accessibilitat de la taula utilitzant els atributs <code>id</code> i <code>header</code>.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: Pots verificar el teu treball comparant-lo amb els nostres exemples acabats, que pots consultar a <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-scope.html">items-sold-scope.html</a> (o també consultar l’<a href="http://mdn.github.io/learning-area/html/tables/advanced/items-sold-scope.html">exemple en viu</a>) i <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-headers.html">items-sold-headers.html</a> (o també consultar l’<a href="http://mdn.github.io/learning-area/html/tables/advanced/items-sold-headers.html">exemple en viu</a>).</p> +</div> + +<h2 id="Resum">Resum</h2> + +<p>Es poden aprendre més coses sobre les taules en HTML, però de fet t’hem proporcionat tot el que et cal saber ara mateix. En aquest punt, pot ser que vulguis aprendre com aplicar estil a les taules HTML; ves a l’article <a href="/ca/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estil a les taules</a>.</p> + +<div>{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}</div> diff --git a/files/ca/learn/index.html b/files/ca/learn/index.html new file mode 100644 index 0000000000..f36734c07c --- /dev/null +++ b/files/ca/learn/index.html @@ -0,0 +1,117 @@ +--- +title: Aprendre desenvolupament web +slug: Learn +tags: + - Beginner + - Index + - Intro + - Landing + - Learn + - Web +translation_of: Learn +--- +<div>{{LearnSidebar}}</div> + +<div> +<p class="summary">Us donem la benvinguda a l'Àrea d'Aprenentatge de MDN. Aquest conjunt d'articles té com a objectiu proporcionar als principiants en el desenvolupament web tot el que necessitin per a començar a codificar llocs web senzills.</p> +</div> + +<p>L'objectiu d'aquesta àrea de MDN no és que passeu de "principiant" a "expert", sinó que ho feu de "principiant" a "còmode". A partir d'aquí, hauríeu de poder començar a fer el vostre propi camí, aprenent del contingut de <a href="https://developer.mozilla.org/ca/">la resta del lloc MDN</a> i altres recursos intermedis o avançats que demanin més coneixements previs.</p> + +<p>Si comenceu absolutament de zero, el desenvolupament web pot ser un repte: us agafarem de la mà i us proporcionarem prou detalls perquè us sentiu còmodes i coneixeu els temes adequadament. Us heu de sentir com a casa, tant si esteu estudiant i voleu aprendre a desenvolupar un lloc web (pel vostre compte o com a part d'una classe), com si sou docent i busqueu materials de classe, per afició o com algú que només vol comprendre com funciona la tecnologia web.</p> + +<div class="warning"> +<p><strong>Important</strong>: Regularment, es va afegint nou contingut a l'Àrea d'Aprenentatge. Si teniu preguntes sobre els temes que voleu aprendre o en trobeu a faltar algun, consulteu la secció <a href="#Contacteu amb nosaltres">"Contacteu amb nosaltres"</a> a continuació per obtenir informació sobre com posar-vos en contacte.</p> +</div> + +<h2 id="On_començar"><span class="short_text" id="result_box" lang="ca"><span>On començar</span></span></h2> + +<ul class="card-grid"> + <li><span>Principiant:</span> Si us acabeu d'iniciar en el desenvolupament web, us recomanem que comenceu a treballar a través del nostre mòdul <a href="https://developer.mozilla.org/ca/docs/Learn/Getting_started_with_the_web">Inici en la Web</a>, que proporciona una introducció pràctica al desenvolupament web.</li> + <li><span>Preguntes específiques:</span> Si teniu una pregunta específica sobre el desenvolupament web, la nostra secció de <a href="/en-US/docs/Learn/Common_questions">Preguntes comunes</a> us pot ajudar</li> + <li><span>Més enllà dels conceptes bàsics:</span> Si ja teniu una mica de coneixements, el següent pas és aprendre {{glossary("HTML")}} i {{glossary("CSS")}} detalladament: comenceu amb el nostre mòdul <a href="/ca/Learn/HTML/Introduction_to_HTML">Introducció a HTML</a> i continueu amb el nostre mòdul <a href="/ca/Learn/CSS/Introduction_to_CSS">Introducció a CSS</a>.</li> + <li><span>Passant a les seqüències d'ordres:</span> Si ja us sentiu còmodes amb HTML i CSS, o si esteu interessats principalment en la codificació, voldreu passar a {{glossary("JavaScript")}} o en el desenvolupament del costat del servidor. Comenceu amb els nostres mòduls de <a href="/en-US/docs/Learn/JavaScript/First_steps">Primers passos en JavaScript</a> i <a href="/en-US/docs/Learn/Server-side/First_steps">Primers passos del costat del servidor</a>.</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: <span id="result_box" lang="ca"><span>El nostre <a href="https://developer.mozilla.org/en-US/docs/Glossary">Glossari</a> proporciona definicions terminològiques</span></span>.</p> +</div> + +<p>{{LearnBox({"title":"Random glossary entry"})}}</p> + +<h2 id="Temes_coberts"><span id="result_box" lang="ca"><span>Temes coberts</span></span></h2> + +<p>A continuació es presenta una llista de tots els temes que tractem en l'àrea d'aprenentatge de MDN.</p> + +<dl> + <dt><a href="/ca/Learn/Getting_started_with_the_web">Introducció a la web</a></dt> + <dd>Proporciona una introducció pràctica al desenvolupament web per a principiants.</dd> + <dt><a href="/ca/Learn/HTML">HTML — Estructuració de la web</a></dt> + <dd>HTML és el llenguatge que utilitzem per estructurar les diferents parts del nostre contingut i definir el seu significat o propòsit. Aquest tema ensenya HTML detalladament.</dd> + <dt><a href="/en-US/docs/Learn/CSS">CSS — Donar estil a la web</a></dt> + <dd>CSS és el llenguatge que podem usar per donar estil i dissenyar el nostre contingut web, així com afegir comportaments com l'animació. Aquest tema proporciona una cobertura completa de CSS.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript">JavaScript — Script dinàmic del costat del client</a></dt> + <dd>Javascript és el llenguatge de script utilitzat per afegir funcionalitat dinàmica a les pàgines web. Aquest tema ensenya tot l'essencialment necessari per sentir-se còmode amb l'escriptura i comprensió de Javascript.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility">Accessibilitat — Fer que la web sigui utilitzable per tots</a></dt> + <dd>L'accessibilitat és la pràctica de posar el contingut web a la disposició del major nombre possible de persones independentment de la seva discapacitat, dispositiu, localització o altres factors diferenciadors. Aquest tema us ofereix tot el que necessiteu saber.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing">Eines i proves</a></dt> + <dd>Aquest tema és un lloc per cobrir les eines que els desenvolupadors utilitzen per facilitar el seu treball, com les eines de prova entre navegadors.</dd> + <dt><a href="/en-US/docs/Learn/Server-side">Programació del lloc web del costat del servidor</a></dt> + <dd>Fins i tot si us concentreu en el desenvolupament web del costat del client, segueix sent útil saber com funcionen els servidors i les característiques de codi del costat del servidor. Aquest tema proporciona una introducció general sobre com funciona el costat del servidor i tutorials detallats que destaquen com crear una aplicació del costat del servidor, utilitzant dos marcs de treball populars — Django (Python) i Express (node.js).</dd> +</dl> + +<h2 id="Obtenir_els_nostres_exemples_de_codis">Obtenir els nostres exemples de codis</h2> + +<p>Els exemples de codi que trobareu a l'àrea d'aprenentatge estan <a href="https://github.com/mdn/learning-area/">disponibles a GitHub</a>. Si voleu copiar-les a l'ordinador, la manera més senzilla és:</p> + +<ol> + <li><a href="http://git-scm.com/downloads">Instal·leu Git</a> a la màquina. Aquest és el programari de sistema de control de versions subjacent sobre el qual GitHub funciona.</li> + <li><a href="https://github.com/join">Registreu-vos per obtenir un compte de GitHub</a>. És senzill i senzill.</li> + <li>Una vegada que us hagiu registrat, inicieu sessió en <a href="https://github.com">github.com</a> amb el vostre nom d'usuari i contrasenya.</li> + <li>Obriu el <a href="https://www.lifewire.com/how-to-open-command-prompt-2618089">símbol del sistema</a> del vostre ordinador (Windows) o terminal (<a href="https://help.ubuntu.com/community/UsingTheTerminal">Linux</a>, <a href="http://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line">MacOSX</a>)</li> + <li>Per copiar el repositori de l'àrea d'aprenentatge a una carpeta anomenada àrea d'aprenentatge en la ubicació actual a la qual apunta el símbol del sistema/terminal, utilitzeu l'ordre següent: + <pre class="brush: bash">git clone https://github.com/mdn/learning-area</pre> + </li> + <li>Ara podeu entrar en el directori i trobar els fitxers que busqueu (utilitzant el cercador/explorador de fitxers o l'<a href="https://en.wikipedia.org/wiki/Cd_(command)">ordre cd</a>).</li> +</ol> + +<p>Podeu actualitzar el repositori d'<code>àrea d'aprenentatge</code>, amb qualsevol canvi fet, a la versió mestra en GitHub amb els següents passos:</p> + +<ol> + <li><span id="result_box" lang="ca"><span>En el símbol del sistema/terminal, aneu al directori de l'</span></span><code>àrea d'aprenentatge</code><span lang="ca"><span> usant cd.</span> <span>Per exemple, si es trobeu al directori principal:</span></span> + + <pre class="brush: bash">cd learning-area</pre> + </li> + <li><span id="result_box" lang="ca"><span>Actualitzeu el repositori mitjançant l'ordre següent:</span></span> + <pre class="brush: bash">git pull</pre> + </li> +</ol> + +<h2 id="Contacteu_amb_nosaltres"><a name="Contacteu amb nosaltres">Contacteu amb nosaltres</a></h2> + +<p>Si voleu posar-vos en contacte amb nosaltres sobre qualsevol cosa, la millor manera és deixar-nos un missatge en el <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">fil de discursos de la nostra Àrea d'Aprenentatge</a> o als <a href="https://developer.mozilla.org/en-US/docs/MDN/Community/Conversations#Chat_in_IRC">canals d'IRC</a>. Ens agradaria saber qualsevol cosa que considereu incorrecta o que falta al lloc, sol·licituds de nous temes d'aprenentatge, sol·licituds d'ajuda amb articles que no enteneu o qualsevol altra pregunta o preocupació.</p> + +<p>Si esteu interessats a ajudar a desenvolupar/millorar el contingut, feu un cop d'ull a <a href="https://developer.mozilla.org/en-US/Learn/How_to_contribute">com podeu ajudar</a> i posar-vos en contacte! Estem més que contents de parlar amb vosaltres, tant si sou un estudiant, un professor, un desenvolupador web experimentat o algú més interessat a ajudar a millorar l'experiència d'aprenentatge.</p> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<dl> + <dt><a href="https://www.mozilla.org/en-US/newsletter/developer/">Butlletí per a desenvolupadors de Mozilla</a></dt> + <dd>El nostre butlletí per a desenvolupadors web, és un gran recurs per a tots els nivells d'experiència.</dd> +</dl> + +<dl> + <dt><a href="https://www.codecademy.com/">Codecademy</a></dt> + <dd>Un gran lloc interactiu per aprendre llenguatges de programació des de zero.</dd> + <dt><a href="https://code.org/">Code.org</a></dt> + <dd>Teoria i pràctica bàsica de codificació, dirigida principalment a nens/principiants.</dd> + <dt><a href="https://www.freecodecamp.org/">freeCodeCamp.org</a></dt> + <dd>Lloc interactiu amb tutorials i projectes per aprendre desenvolupament web.</dd> +</dl> + +<dl> + <dt><a href="https://learning.mozilla.org/web-literacy/">Mapa d'Alfabetització Web</a></dt> + <dd>Un marc per a l'alfabetització web a nivell d'introducció i les habilitats del segle XXI, que també proporcionan accés a activitats docents, ordenades per categoria.</dd> + <dt><a href="https://learning.mozilla.org/activities">Activitats docents</a></dt> + <dd>Una sèrie d'activitats docents per a l'ensenyament (i l'aprenentatge) creades per la Fundació Mozilla, que abasten des de l'alfabetització web bàsica i la privadesa, fins a JavaScript i la pirateria de Minecraft.</dd> +</dl> diff --git a/files/ca/learn/javascript/building_blocks/index.html b/files/ca/learn/javascript/building_blocks/index.html new file mode 100644 index 0000000000..b1d2001c25 --- /dev/null +++ b/files/ca/learn/javascript/building_blocks/index.html @@ -0,0 +1,42 @@ +--- +title: JavaScript building blocks +slug: Learn/JavaScript/Building_blocks +translation_of: Learn/JavaScript/Building_blocks +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">En aquest mòdul, continuem la nostra cobertura de totes les funcions fonamentals de JavaScript, centrant la nostra atenció en els tipus de bloc de codi que es troben sovint, com ara declaracions condicionals, bucles, funcions i esdeveniments. Ja heu vist aquestes coses al curs, però només de passada, aquí discutirem tot de manera detallada.</p> + +<h2 id="Prerequisits">Prerequisits</h2> + +<p>Abans de començar aquest mòdul, hauríeu d'estar familiaritzats amb els conceptes bàsics d'<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML</a> i <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS</a>, i hauireu d'haver treballat el mòdul anterior, <a href="/en-US/docs/Learn/JavaScript/First_steps">Primeres PAsses en JavaScript</a>.</p> + +<div class="note"> +<p><strong>Nota: </strong>Si esteu treballant en un ordinador / tauleta / altre dispositiu on no té la capacitat de crear els vostres propis fitxers, podeu provar (la majoria d') els exemples de codi en un programa de codificació en línia com ara <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Prenent decisions al teu codi - condicionals</a></dt> + <dd>En qualsevol llenguatge de programació, el codi necessita prendre decisions i dur a terme accions d'acord amb els diferents inputs. Per exemple, en un joc, si el nombre de vides del jugador és 0, llavors s'acaba el joc. En una aplicació meteorològica, si es mira al matí, mostra un gràfic de la sortida del sol, però mostra estrelles i una lluna si és de nit. En aquest article explorarem com funcionen les estructures condicionals en JavaScript.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Programant bucles</a></dt> + <dd>De vegades necessites realitzar una tasca més d'una vegada. Per exemple, mirant dins una llista de noms. En la programació, els bucles realitzen aquest treball molt bé. Aquí veurem estructures de bucle a JavaScript.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Funcions — blocs de codi reutilitzables</a></dt> + <dd>Un altre concepte essencial de la programació és la funció. Les funcions us permeten emmagatzemar un fragment de codi que fa una única tasca dins d'un bloc definit, i després es crida a aquest codi quan es necessiti utilitzant un únic comandament curt, en lloc d'haver d'escriure el mateix codi diverses vegades. En aquest article explorarem conceptes fonamentals darrere de funcions com la sintaxi bàsica, com invocar i definir funcions, abast i paràmetres.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Construeix la teva pròpia funció</a></dt> + <dd>Amb la majoria de la teoria essencial tractada anteriorment, aquest article proporciona una experiència pràctica. Aquí practicareu amb la creació de la vostra pròpia funció personalitzada. Al llarg del camí, també explicarem alguns detalls útils sobre el tractament de funcions.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Retorn de valors a les funcions</a></dt> + <dd>L'últim concepte essencial que has de saber sobre una funció és el retorn de valors. Algunes funcions no retornen un valor significatiu després de la finalització, però d'altres ho fan. És important entendre quins són els seus valors, com utilitzar-los en el codi i com fer que les nostres pròpies funcions personalitzades retornin valors útils.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introducció als esdeveniments</a></dt> + <dd>Els esdeveniments (Events) són accions que ocorren en el sistema que estam programant, on el sistema ens informa perquè puguem respondre d'alguna manera si ho desitjam. Per exemple, si l'usuari fa clic a un botó d'una pàgina web, potser vulgueu respondre a aquesta acció mostrant un quadre d'informació. En aquest article final anem a parlar sobre alguns conceptes importants que envolten els esdeveniments, i veure com funcionen en els navegadors.</dd> +</dl> + +<h2 id="Avaluacions">Avaluacions</h2> + +<p>La següent avaluació comprovarà la comprensió dels aspectes bàsics de JavaScript que es detallen a les guies anteriors.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></dt> + <dd>Ara que hem examinat els fonaments bàsics de JavaScript, provarem els teus coneixements de bucles, funcions, condicionals i esdeveniments mitjançant la construcció d'un article bastant comú que veureu en molts llocs web: una galeria d'imatges amb Javascript.</dd> +</dl> diff --git a/files/ca/learn/javascript/index.html b/files/ca/learn/javascript/index.html new file mode 100644 index 0000000000..2e6649a258 --- /dev/null +++ b/files/ca/learn/javascript/index.html @@ -0,0 +1,66 @@ +--- +title: JavaScript +slug: Learn/JavaScript +tags: + - Beginner + - CodingScripting + - JavaScript + - JavaScripting beginner + - Landing + - Module + - NeedsTranslation + - Topic + - TopicStub + - 'l10n:priority' +translation_of: Learn/JavaScript +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">{{Glossary("JavaScript")}} is a programming language that allows you to implement complex things on web pages. Every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, or interactive maps, or animated 2D/3D graphics, or scrolling video jukeboxes, and so on — you can bet that JavaScript is probably involved.</p> + +<h2 id="Learning_pathway">Learning pathway</h2> + +<p>JavaScript is arguably more difficult to learn than related technologies such as <a href="/en-US/docs/Learn/HTML">HTML</a> and <a href="/en-US/docs/Learn/CSS">CSS</a>. Before attempting to learn JavaScript, you are strongly advised to get familiar with at least these two technologies first, and perhaps others as well. Start by working through the following modules:</p> + +<ul> + <li><a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the Web</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Introduction">Introduction to HTML</a></li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a></li> +</ul> + +<p>Having previous experience with other programming languages might also help.</p> + +<p>After getting familiar with the basics of JavaScript, you should be in a position to learn about more advanced topics, for example:</p> + +<ul> + <li>JavaScript in depth, as taught in our <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript guide</a></li> + <li><a href="/en-US/docs/Web/API">Web APIs</a></li> +</ul> + +<h2 id="Modules">Modules</h2> + +<p>This topic contains the following modules, in a suggested order for working through them.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a></dt> + <dd>In our first JavaScript module, we first answer some fundamental questions such as "what is JavaScript?", "what does it look like?", and "what can it do?", before moving on to taking you through your first practical experience of writing JavaScript. After that, we discuss some key JavaScript features in detail, such as variables, strings, numbers and arrays.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript building blocks</a></dt> + <dd>In this module, we continue our coverage of all JavaScript's key fundamental features, turning our attention to commonly-encountered types of code block such as conditional statements, loops, functions, and events. You've seen this stuff already in the course, but only in passing — here we'll discuss it all explicitly.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects">Introducing JavaScript objects</a></dt> + <dd>In JavaScript, most things are objects, from core JavaScript features like strings and arrays to the browser APIs built on top of JavaScript. You can even create your own objects to encapsulate related functions and variables into efficient packages. The object-oriented nature of JavaScript is important to understand if you want to go further with your knowledge of the language and write more efficient code, therefore we've provided this module to help you. Here we teach object theory and syntax in detail, look at how to create your own objects, and explain what JSON data is and how to work with it.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs</a></dt> + <dd>When writing client-side JavaScript for web sites or applications, you won't go very far before you start to use APIs — interfaces for manipulating different aspects of the browser and operating system the site is running on, or even data from other web sites or services. In this module we will explore what APIs are, and how to use some of the most common APIs you'll come across often in your development work. </dd> +</dl> + +<h2 id="Solving_common_JavaScript_problems">Solving common JavaScript problems</h2> + +<p><a href="/en-US/docs/Learn/JavaScript/Howto">Use JavaScript to solve common problems</a> provides links to sections of content explaining how to use JavaScript to solve very common problems when creating a webpage.</p> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript">JavaScript on MDN</a></dt> + <dd>The main entry point for core JavaScript documentation on MDN — this is where you'll find extensive reference docs on all aspects of the JavaScript language, and some advanced tutorials aimed at experienced JavaScripters.</dd> + <dt><a href="https://www.youtube.com/user/codingmath">Coding math</a></dt> + <dd>An excellent series of video tutorials to teach the math you need to understand to be an effective programmer, by <a href="https://twitter.com/bit101">Keith Peters</a>.</dd> +</dl> |