A principis de gener us parlem de Markdown, el que probablement sigui la millor manera per prendre apunts amb un PC. És un llenguatge que literalment s'aprèn a mitja hora o menys, i ens permet crear documents lleugers amb cert format i estructura. També existeix LaTeX, però la corba daprenentatge és més pronunciada i la instal lació de programari no és fútil. Hi ha una altra opció, i és crear documents de text usant HTML i CSS.
Els HTML i CSS no són llenguatges que es van dissenyar pensant en l'edició de documents de text, però també pot servir. Combinats fan molt més que això, però coneixent unes poques etiquetes i regles podem fer més que a Writer i molt més que amb Markdown o LaTeX. Aquí explicarem aquestes bases, i també alguns trucs perquè la impressió quedi bé.
HTML i CSS per a textos: una opció vàlida
El primer que cal saber és que per poder veure un document .html cal un navegador web. És aquest el que s'encarrega de renderitzar-lo i mostrar-ne el contingut, i també el que ens permetrà imprimir el document. No és programari que hàgim d'instal·lar a part, ja que ja en tenim algun a qualsevol PC o dispositiu mòbil.
Una altra cosa que cal conèixer és com crear els documents: només cal obrir un processador de text pla (com Kate), afegir el contingut i guardar-lo amb extensió .html. Podem, i de fet jo aconsello, crear també les parts del cap i el body, a la primera per a seccions com els estils generals ia la segona per al document en si.
També recomano utilitzar Visual Studio Code o qualsevol editor similar, però que vingui amb el que es coneix com Intellisense, és a dir, això que permet obrir i tancar etiquetes i que no les hàgim d'escriure totalment. A més, a Code podem prémer posar un símbol “!”, prémer el tabulador i ens crearà l'estructura bàsica.
Totes les etiquetes s'obren i es tanquen amb els símbols «més gran que» (<) i «menor que» (>), però la de tancament sol tenir una barra (/) davant.
Explicat això, anem amb allò més important.
El sagnat en HTML i CSS
A HTML i CSS, el sagnat no és necessari. Es podria posar tot en una línia, però és més fàcil de llegir si té un bon sagnat i tot això del mateix nivell a la mateixa alçada. L'element fill se sol posar uns quatre espais més a la dreta, o el que doni el tabulador.
Encapçalats en HTML
Les capçaleres d'HTML es posen amb una h seguida d'un número de l'1 al 6. Per exemple, l'anterior text de Capçaleres en HTML és un h2 i el text complet seria:
Encapçalats en HTML
Negreta, cursiva, ratllat i ressaltat
Seguint l'ordre de l'article sobre Markdown, el següent són les negretes, cursives, ratllat i ressaltat. Serien així:
Text en negreta Text ratllat Text ressaltat
Mostrarà això:
Text en negreta
Text en cursiva
text ratllat
Text ressaltat
Potència i subíndex
Si volem posar un nombre petit i una mica aixecat (potència) o un a la part contrària (subíndix), podem amb aquestes etiquetes:
Potència Subíndex
paràgrafs
Estem seguint l'ordre de l'article sobre Markdown, però potser no és el millor per a HTML i CSS. A Markdown, els paràgrafs s'escriuen sense cap etiqueta, i per això es va posar en aquest punt, però en HTML sí que se'n fa servir una. Tot el que hi ha entre l'etiqueta d'obertura i tancament serà un bloc i tindrà aquesta sintaxi:
Tot el que fiquem entre aquestes dues etiquetes serà un paràgraf. Si després en posem un altre, hi haurà un salt de línia entre tots dos. Dins de les etiquetes de bloc n'hi pot haver d'altres, com les del punt de negretes, etc, i altres etiquetes en línia. En teoria, tot el que hi hagi aquí a dins serà un paràgraf continu. Si volem separar-lo cal afegir-ne d'altres o fer servir etiquetes que esmentarem més endavant.
Llistes
Les llistes, si més no les més bàsiques en HTML, són les ordenades i desordenades. Poden ser confuses per a qui no les conegui, però un editor com el Visual Studio Code facilita les coses. La seva sintaxi seria aquesta:
Element 1 sense ordre Element 2 sense ordre Element 3 sense ordre Element 1 ordenat Element 2 ordenat Element 3 ordenat
Mostrarà això
- Element 1 sense ordre
- Element 2 sense ordre
- Element 3 sense ordre
- Element 1 ordenat
- Element 2 ordenat
- Element 3 ordenat
Les llistes s'obren i es tanquen amb unes etiquetes, les ul si són desordenades, i per defecte mostrarà una bola davant, i les ol si són ordenades i per defecte posarà un número davant. Les numerades s'ordenen automàticament, és a dir, el primer element després de l'etiqueta d'obertura anirà predit d'un 1, segon d'un 2 i així successivament.
Per a combinacions de llistes, cal iniciar sublistes amb les mateixes etiquetes («ul» o «ol»).
També hi ha les llistes de definició, que s'inicien i es tanquen amb l'etiqueta «dl» i dintre van els termes (dt) i definicions (dd) amb aquesta sintaxi:
Linux Sistemes que estimem Windows Sistemes que no fem servir molt per aquí
Mostrarà això:
- Linux
- Sistemes que estimem
- Windows
- Sistemes que no fem servir molt per aquí
Llistes de tasques
No hi ha llistes de tasques en HTML, però es poden crear. Per aconseguir-ho caldrà afegir una caixa de verificació, i quedaria així:
Primer element Segon element Tercer element
Mostrarà això:
Aquí hem introduït una regla de CSS per eliminar els discs que apareixen per defecte a les llistes. I ho hem complicat una mica, però es pot simplificar. La part de l'etiqueta (label) es pot ometre, però si es posa com a l'exemple, el text també servirà per marcar la casella quan feu clic.
Enllaços en HTML
Els enllaços es creen amb l'etiqueta a, i tenen aquesta estructura:
<a href="https://linuxadictos.com/">El teu bloc sobre Linux (i HTML?)
Mostrarà això:
El teu bloc sobre Linux (i HTML?)
Després de l'atribut «href» hi va l'enllaç i entre les etiquetes d'obertura i tancament va el text.
Els enllaços poden apuntar a un identificador. Per exemple, si a un element us afegim a l'etiqueta d'obertura id=»prova», podem fer servir l'enllaç #prova perquè en fer-hi clic ens porti fins a aquest element, sempre que estigui a la mateixa pàgina. En cas contrari, es posaran coixinet i identificador darrere de .html.
Imatges en HTML
Les imatges en HTML s'afegeixen a l'etiqueta img d'aquesta manera:
Ara bé, si volem que tot quedi en un document, les podem convertir a base64 i afegir-les d'aquesta altra manera
Si volem que la imatge ens porti a una altra pàgina web, només l'hem d'envoltar d'una «a» amb el seu «href» corresponent.
cites
Hi ha dos tipus de cites, però la que més es fa servir és la de bloc. Combinada amb un paràgraf d'introducció, quedaria així:
I Pablinux va dir: Anem a explicar com crear documents de text usant HTML i CSS.
Mostrarà això:
I Pablinux va dir:
Anem a explicar com crear documents de text usant HTML i CSS.
Podem incloure cites en línia amb l'etiqueta «cite», cosa que per defecte sol posar-ho en cursiva. Si el document és per a nosaltres, podem fer servir també «i» o «em» i obtindrem el mateix efecte. Es recomana posar aquest text entre cometes.
Si volem niar cites, només hem de posar una blocquote dins d'una altra.
Codi en HTML
El codi en HTML es posa entre etiquetes «code», i no té gaire més misteri. Sol presentar-lo amb font monoespaiada, i usant les etiquetes aconseguirem ser correctes semànticament (això és un tema d'HTML) i també podem donar-li a tot el codi un format especial. No quedarà tan bonic com en alguns editors de Markdown, tret que li donem nosaltres un format que aquí no serà automàtic.
taules
Com les llistes, les taules també poden ser una mica complicades de fer, però afegint aquest punt podrem fer més als nostres documents de text amb HTML i CSS. La manera correcta de fer-la tindrà tres parts: thead, tbody i tfoot que aniran dins de l'etiqueta table, però es poden ometre totes tres si les taules són simples i no necessitem separar-ne el contingut.
Dins les taules hem de crear línies (tr) amb dades (td) i l'estructura seria així:
Una capçalera Una altra capçalera Tercera capçalera Una dada a primera línia Una altra dada a primera línia Tercera dada a primera línia Una dada a segona línia Una altra dada a segona línia Tercera dada en segona línia Una dada a tercera línia Una altra dada a tercera línia Tercera dada en tercera línia Primer resultat Segon resultat Tercer resultat
Mostrarà això (el format no hauria d'aparèixer per defecte):
| Una capçalera | Una altra capçalera | Tercera capçalera |
|---|---|---|
| Una dada a primera línia | Una altra dada a primera línia | Tercera dada a primera línia |
| Una dada a segona línia | Una altra dada a segona línia | Tercera dada en segona línia |
| Una dada a tercera línia | Una altra dada a tercera línia | Tercera dada en tercera línia |
| Primer resultat | Segon resultat | Tercer resultat |
Les taules es poden complicar molt més, i no ens podem centrar en com es fan o ocuparíem molt de temps i espai. Sí que podem dir que cal anar amb compte que encaixin bé i que es pot fer que una casella ocupi més d'un d'ample afegint-li al seu corresponent td l'atribut colspan seguit del nombre de caselles que volem que ocupi (exemple, colspan=»2″). Per al mateix però en vertical, es fa servir «rowspan» (exemple rowspan=»3″).
Línies horitzontals i salts de línia
Si volem fer una línia horitzontal, que vagi de part a part del document, farem servir l'etiqueta , i si volem fer un salt de línia .
Donant estils al nostre document amb HTML i CSS
Fins ara, el que tenim no és res més que un Markdown però complicat, no? Tot això no tindria cap sentit si no fos perquè podem utilitzar també CSS, i aquí van alguns consells.
Si volem que tot estigui en un mateix document, el CSS s'ha d'afegir dins d'una etiqueta style o dins d'una etiqueta HTML a l'atribut del mateix nom, com per exemple hem fet servir per evitar que la llista desordenada mostrés el disc per defecte.
CSS ens permet fer moltíssim, i fins i tot diversos elements alhora. Si volem que totes les capçaleres de tipus 2 (h2) estiguin centrades i de color vermell, hem d'afegir a l'etiqueta «style» dins de «head» això:
h2 { text-align:center; color:xarxa; }
Amb això estem dient: «a totes les etiquetes h2 aplica-li la regla de text centrat i el color vermell». Si volem que siguin totes les capçaleres, abans de la clau hauríem d'afegir el selector «h1, h2, h3, h4, h5, h6». Tot és a l'esquerra per defecte, i també es pot posar a la dreta si fem servir «right» en comptes de «center».
Altres regles recomanades
- background-color: color_escollit;, on «color_elegit» serà un color amb una paraula que existeixi, com a «xarxa», o un codi RGB o HSL, entre d'altres. Dóna un color de fons a l'element.
- border-radius: corba_elegida, on «corba_elegida» serà en píxels o tant per cent. Li dóna una corba a les cantonades, i es poden posar valors independents per a cadascuna.
- text-shadow: 1px 2px 2px black;, on els valors poden ser uns altres. Li dóna una ombra al text, el primer valor a l'eix X, el segon a l'Y, el tercer és el desenfocament i el quart el color.
- box-shadow: 1px 2px 2px black;, el mateix que el punt anterior, però a tota la caixa i no només al text.
- font-size: un_mida;, on «un_mida» serà una mida que pot ser de diferents unitats, habitualment en píxels.
- font-weight: un_grossor;, on «un_grossor» serà el gruix de la font. Podem fer servir paraules com bold o bolder o unitats de 100 a 900 si el tipus de font les suporta.
- font-family: tipus_de_lletra;, on «tipus_lletra» serà un tipus de lletra.
- border: 1px solid blue;, sent el primer un gruix, el segon un tipus i el tercer un color que poden ser diferents. Això afegirà una vora a l'element.
- padding y margin ens donen ambdós marges al voltant de l'element, però amb una diferència: padding és part de l'element en si, mentre que marging és espai que ocupa, però no de l'element. Es poden posar diferents tipus de mides, sent del més habitual els píxels.
- width y height serveixen per indicar ample i alt dels elements. S'usen menys als de tipus text (per a això està font-size), però més als contenidors (que no hem vist aquí) i en elements com les imatges. S'usen diferents tipus de mides, com els píxels.
- més en DND.
Consell per imprimir un document en HTML i CSS
Un problema amb què ens podem trobar en crear documents amb HTML i CSS és que els navegadors no imprimeixen les coses com ens agradaria. Per exemple, ens dividirà elements com les llistes, i això és una cosa que probablement no vulguem veure.
El meu consell és que, en donar-lo a imprimir amb el navegador (Ctrl+P en la majoria de casos), hi afegim marges personalitzats almenys amunt i avall. Això corregirà la decisió que els textos poden quedar molt enganxats a les vores superior i inferior (també es pot fer que no mostri capçalera i peu de pàgina).
Això dels elements partits se soluciona afegint aquesta regla a l'apartat del CSS:
@media print{ body { background-color: white; } ul, ol{ break-inside: avoid; /* No talla les llistes en imprimir* } }
Això li diu que, en imprimir, el fons sigui tot blanc i que les llistes no les separi als salts de pàgina. Es poden posar altres elements al selector, com pot ser «table» si veiem que ens les talla. Crec que està de més posar-ne aquí alguns com els paràgrafs, ja que aquests si està bé que els divideixi.
Una altra cosa que podem fer és fer servir el següent per forçar els salts de pàgina on nosaltres vulguem, vàlid, per exemple, per acabar un capítol i que això de després aparegui a la següent pàgina (si no funciona, feu servir page-break-after, el que diuen que deixarà de funcionar en el futur):
Una opció més
I això seria tot. Amb HTML i CSS tenim més control que amb Markdown i és més senzill, des del meu punt de vista, que LaTeX, encara que juguen en lligues diferents. És una opció més.