Com heu vist en l'apartat «Estructura bàsica», les etiquetes <p></p> ens indiquen el començament i el final d'un paràgraf.
Ara donarem estils al paràgraf amb el paràmetre style.
Com podeu veure en el primer exemple de codi font que acompanya aquest text, dins l'etiqueta <p> (inicial), s'inclou el paràmetre style="text-align: left;". Sempre s'ha d'escriure style=" per començar a enumerar els estils que volem aplicar a l'etiqueta. Després, si sabeu un poc d'anglès, veureu que es fan servir una sèrie de paraules que signifiquen «alineació del text», però amb un format en concret (text-align) seguit de dos punts. A continuació, i després d'un espai (no és totalment necessari però ens ajuda a llegir millor el codi), s'escriu un dels valors left, right, center o justify (esquerra, dreta, centrat i justificat, segons el que necessitem). Per acabar es tanca amb punt i coma seguit de cometes.
IMPORTANT: aquesta estructura del paràmetre style la trobareu a moltes més etiquetes, a més de <p>, i amb molts més valors, com ja anirem veient.
Paràgraf amb alineació esquerra
Codi HTML |
<p style="text-align: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur velit sit amet eleifend suscipit. Ut luctus accumsan consequat. Cras eu magna eu orci vestibulum pellentesque. Mauris ut purus luctus, porta ligula non, mattis tellus. Nulla nec nunc mattis, vehicula neque nec, elementum orci. Pellentesque porta ligula vel nisl vestibulum mollis. Aliquam sit amet metus sodales, ullamcorper est posuere, malesuada velit. Aenean malesuada orci nisl. Ut lobortis libero vitae lacus dapibus, sed facilisis nunc faucibus. Duis tincidunt euismod justo, ac rhoncus elit ullamcorper a. Donec ut diam non nibh ultrices interdum a vel orci.</p>
Visualitzat en el navegador |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur velit sit amet eleifend suscipit. Ut luctus accumsan consequat. Cras eu magna eu orci vestibulum pellentesque. Mauris ut purus luctus, porta ligula non, mattis tellus. Nulla nec nunc mattis, vehicula neque nec, elementum orci. Pellentesque porta ligula vel nisl vestibulum mollis. Aliquam sit amet metus sodales, ullamcorper est posuere, malesuada velit. Aenean malesuada orci nisl. Ut lobortis libero vitae lacus dapibus, sed facilisis nunc faucibus. Duis tincidunt euismod justo, ac rhoncus elit ullamcorper a. Donec ut diam non nibh ultrices interdum a vel orci.
Paràgraf amb alineació dreta
Codi HTML |
<p style="text-align: right;">Pellentesque a feugiat diam. Donec molestie diam quam, eu aliquet purus hendrerit vitae. Proin sit amet libero non dui scelerisque rhoncus eu ut lectus. Cras et erat vitae nisi tristique imperdiet. Morbi nunc magna, tincidunt quis odio sit amet, vestibulum tempus orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque pretium neque vel nunc imperdiet, non convallis velit fermentum. Etiam id odio id ligula consequat egestas vel eu enim. Donec tristique malesuada ex vel pellentesque. Nam sed gravida orci, et convallis odio. Nulla mattis tincidunt enim at ornare. Nullam iaculis iaculis elit non sodales. Etiam ac lorem consequat, maximus magna ac, molestie felis. Etiam viverra elit eget leo venenatis porttitor.</p>
Visualitzat en el navegador |
Pellentesque a feugiat diam. Donec molestie diam quam, eu aliquet purus hendrerit vitae. Proin sit amet libero non dui scelerisque rhoncus eu ut lectus. Cras et erat vitae nisi tristique imperdiet. Morbi nunc magna, tincidunt quis odio sit amet, vestibulum tempus orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque pretium neque vel nunc imperdiet, non convallis velit fermentum. Etiam id odio id ligula consequat egestas vel eu enim. Donec tristique malesuada ex vel pellentesque. Nam sed gravida orci, et convallis odio. Nulla mattis tincidunt enim at ornare. Nullam iaculis iaculis elit non sodales. Etiam ac lorem consequat, maximus magna ac, molestie felis. Etiam viverra elit eget leo venenatis porttitor.
Paràgraf centrat
Codi HTML |
<p style="text-align: center;">Vestibulum interdum malesuada fermentum. Aenean facilisis, risus id lacinia pretium, elit mi elementum nunc, sed semper tortor eros eu nisl. Suspendisse potenti. In id sem vitae tortor dictum viverra. Nulla vestibulum in eros a fermentum. Mauris et varius augue. Morbi congue nisl id quam efficitur, sed facilisis dui scelerisque. Quisque in finibus lacus. Suspendisse iaculis mollis lectus, a pharetra enim mattis eget. Nullam tortor augue, sodales et pulvinar et, lacinia et dui. Nulla sed viverra arcu. Maecenas ultricies vel leo porta auctor. Integer ornare congue sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;</p>
Visualitzat en el navegador |
Vestibulum interdum malesuada fermentum. Aenean facilisis, risus id lacinia pretium, elit mi elementum nunc, sed semper tortor eros eu nisl. Suspendisse potenti. In id sem vitae tortor dictum viverra. Nulla vestibulum in eros a fermentum. Mauris et varius augue. Morbi congue nisl id quam efficitur, sed facilisis dui scelerisque. Quisque in finibus lacus. Suspendisse iaculis mollis lectus, a pharetra enim mattis eget. Nullam tortor augue, sodales et pulvinar et, lacinia et dui. Nulla sed viverra arcu. Maecenas ultricies vel leo porta auctor. Integer ornare congue sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
Paràgraf justificat
Codi HTML |
<p style="text-align: justify;">Maecenas ac enim ac mauris egestas pretium a non massa. Maecenas erat enim, sagittis laoreet posuere ut, consectetur sed augue. Praesent quis pulvinar libero. Aliquam erat volutpat. Donec congue, arcu ac congue scelerisque, lorem augue scelerisque erat, et bibendum nisl purus quis leo. Sed eu vestibulum purus, at consequat magna. Donec placerat vehicula massa ut porttitor. Proin porttitor erat felis, eu accumsan mauris malesuada quis. Suspendisse pharetra nulla velit, aliquam volutpat leo suscipit ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies congue mattis.</p>
Visualitzat en el navegador |
Maecenas ac enim ac mauris egestas pretium a non massa. Maecenas erat enim, sagittis laoreet posuere ut, consectetur sed augue. Praesent quis pulvinar libero. Aliquam erat volutpat. Donec congue, arcu ac congue scelerisque, lorem augue scelerisque erat, et bibendum nisl purus quis leo. Sed eu vestibulum purus, at consequat magna. Donec placerat vehicula massa ut porttitor. Proin porttitor erat felis, eu accumsan mauris malesuada quis. Suspendisse pharetra nulla velit, aliquam volutpat leo suscipit ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies congue mattis.