Una bona experiència d’usuari a la teva pàgina web es determina a partir de diversos factors com el llenguatge, els colors, la distribució, les fonts, les mides i, en especial, contingut de valor. La factibilitat de l’èxit depèn de l’ús de l’HTML i el CSS. Segurament els termes et sonen, però has de conèixer-los una mica per a poder utilitzar-los i optimitzar el teu lloc web.
Amb què s’escriu una web? Descobreix el codi que hi ha al darrere.
L’HTML o HyperText Markup Language i les CSS o Cascading Style Sheets són alguns dels llenguatges més populars utilitzats per desenvolupadors, dissenyadors i experts en màrqueting. De fet, és possible que tu mateix ja hagis fet servir HTML sense ni tan sols saber-ho, sigui actualitzant la capçalera d’una pàgina o editant una entrada de blog.
Diferències entre l’HTML i el CSS
Els llenguatges de programació habituals són Java, Python i SQL. HTML i CSS defineixen què hi ha a una pàgina web i com hauria de ser: són instruccions escrites que indiquen al programari què ha de fer i com ha de comportar-se.
L’HTML és la base tècnica d’una web, determina l’estructura bàsica de la pàgina. En canvi, el CSS és l’estil, el que es mostra a l’usuari i embelleix la pàgina web: el disseny, la marca, els colors, la font…
HTML
L’HyperText Markup Language o HTML utilitza etiquetes per a modificar l’estructura del text i els elements d’una pàgina web. Les etiquetes HTML t’ajuden a organitzar el contingut, facilitar la lectura o facilitar que els motors de cerca prioritzin les paraules clau.
Tags HTML que has de conèixer
Per a construir HTML es fan servir etiquetes, que s’introdueixen entre “<…>” i “</…>”:
Etiqueta HTML: Especifica que la pàgina és una pàgina HTML. Comença al principi del document i es tanca al final.
Etiquetes de capçalera: Estructuren les publicacions del blog i són útils per a finalitats de SEO a la pàgina. Determinen la importancia de cada títol i el cos: <h1>…</h1> és l’etiqueta que atribuiràs al títol principal de l’inici de cada pàgina, per exemple.
Etiquetes d’hiper-enllaç: És habitual utilitzar-les als correus electrònics, les entrades de blog i altres fitxers HTML. Per exemple: <href>…</href>.
Etiquetes de llista: Ajuden a dividir i organitzar el contingut. Sovint es fa ús de CSS per a canviar els tipus de vinyetes, números o alineació. <i>, <ii>, <iii>, etc.
Etiqueta de paràgraf: Separa un fragment de text d’un altre en format de paràgraf.
Etiquetes de format de text: Determinen la mida de la lletra, la font, el pes, etc. S’indica que una paraula és en negreta de la següent manera: <strong>…</strong>.
Etiqueta de títol: Estableix el títol de la pàgina que apareix a la part superior del navegador web.
Etiqueta de salt de línia: Genera un salt al text. S’indica així: <br>…</br>.
Etiqueta span: Serveix per a aplicar un estil concret al text o agrupar elements en línia. Pots definir que encara que el text de la teva pàgina web sigui tot negre, les paraules que es troben entre les etiquetes <span> i </span> es vegin en color verd, per exemple.
Errors comuns utilitzant HTML
- Oblidar tancar un parèntesi: Per a cada claudàtor obert ha d’haver-n’hi un de tancat coincident.
- Confondre l’editor visual amb l’editor HTML.
CSS
Les Cascading Style Sheets o CSS indiquen al programari com ha de ser l’estil de la pàgina web, tenint en compte el disseny, la gamma de colors i el format. Dit d’una altra manera, és una llista d’indicadors que s’apliquen a l’HTML de la pàgina que determinen els elements (colors de fons, família tipogràfica, interlineat, alineació, etc.)
Errors comuns utilitzant CSS
- Tot i que en alguna ocasió té sentit fer un estil CSS en línia i aplicar un estil a un encapçalament o paràgraf individual, en general, és recomanable generar un full d’estil per a tota la pàgina web amb l’estil que mana a totes les etiquetes.
- Actualitzar un full d’estil sense tenir consciència de quines pàgines afecta.
Com es complementen?
L’HTML és la base tècnica d’una web i el CSS és l’estil, per això, l’HTML sense CSS és funcional, encara que estèticament no és agradable; però el CSS sense l’HTML no funciona.
Entenent el funcionament d’ambdós i aprenent a fer que treballin amb harmonia, estaràs capacitat per a millorar la teva estratègia de màrqueting, incloent-hi el posicionament de la teva pàgina web.
Sabem que l’ús del codi espanta. Al cap i a la fi és un llenguatge amb un funcionament molt diferent al què estem acostumats. Però és necessari a l’hora de construir una pàgina web que funciona, tant a nivell funcional com visual. DeMomentSomTres podem ajudar-te a dissenyar un espai on l’HTML i el CSS treballen plegats per a aconseguir un resultat atractiu, accessible i còmode on navegar. Contacta amb nosaltres i comença a construir-lo.