Edició amb HTML

Les pàgines web que nosaltres editem estan escrites amb un llenguatge que es diu HTML (HyperText Markup Language), això vol dir que quan escrivim un web fem un text pla amb etiquetes (tags), que els navegadors interpreten.

Per exemple:

HTMLEs visualitzaComentari
paraulaparaulaSi no hi ha cap etiqueta, llegim el text que hem escrit
emparaula/emparaula em significa “èmfasi”. Tot el que apareix entre emi /emel navegador ens ho mostra en cursiva. També té el mateix valor i
strongparaula/strongparaula strong s'interpreta en negreta. També b
Equival a un espai en blanc. Si volem forçar més d'un espai, ho hem d'escriure així, ja que els navegadors redueixen molts espais a un de sol.

El Houdini està pensat perquè no calguin coneixements d'HTML per crear o editar pàgines web. Tenim una eina que ens permet escriure amb format i de forma no visible codifica les característiques de format a etiquetes HTML. Si pretenem fer un ús més avançat del Houdini, però, és convenient saber alguna cosa d'HTML, ja que aquest editor no és perfecte, i sovint cal saber netejar els codis que escriu o simplement podem fer més coses si escrivim codi HTML directament. Un altre dels motius és que sovint enganxem text que hem copiat d'un editor de textos, com el MS Word o l'OpenOffice Write. El problema és que aquests programes treballen amb una codificació molt semblant a l'HTML (una meba d'XML comprimit), i quan enganxem el text al Houdini, molts dels codis originals també passen. Això sobrecarrega la web i sovint produeix efectes indesitjats, ja que amb les eines de l'editor resulta impossible arreglar-ho.

Abans de posar-nos a netejar codi, val la pena recordar com fer-nos-ho per evitar que es transportin tots aquests codis, especialment greu en el cas de l'OpenOffice:

  • Entrar a editar la notícia
  • Seleccionar i copiar tot el contingut del camp en qüestió (Text)
  • Enganxar el text al bloc de notes (control+v), tornar a seleccionar-lo tot (control+a) i copiar-lo de nou (control+c)
  • Enganxar (control+v) el text
  • Editar-lo

Hi ha diversos tipus d'etiquetes HTML. És important saber-los identificar, ja que cada etiqueta té la seva funció i, com en tot, l'economia i la simplicitat són uns valors importants:

  1. Etiquetes de bloc: serveixen per diferenciar elements de bloc, els uns dels altres. Visualment els blocs se separen dels altres amb una línia en blanc entremig.
    • div: és l'element de bloc per excel·lència. Tot allò que queda a dins d'un element d'aquests (és a dir, entre divi /div) queda separat amb espai abans i després.
    • p: significa paràgraf, i és una etiqueta que s'utilitza des de la primera versió de l'HTML. A efectes nostres, és equivalent de l'anterior.
    • h1: títol principal. Hi ha fins a 6 nivells de títols (de h1a h6).
    • blockquote: cita
  2. Etiquetes de línia: serveixen per donar una característica de format a una línia, un tros de línia o diverses línies contingudes en un bloc.
    • span: és l'element per defecte. Ell sol no té cap valor, s'utilitza per incloure'l amb atributs que donin format al text (bàsicament amb style span style=“background-color: #000;”posaria un fons negre a la línia fins que ens trobéssim un /span). Vegeu les etiquetes de format.
    • em: cursiva (també i)
    • strong: negreta (també b, obsolet)
    • u: subratllat
  3. Etiquetes de format: s'utilitzen per donar format a un caràcter, una paraula, una línia, un bloc, etc. Generalment no s'expliciten a la pàgina web, sinó en un fitxer extern que només inclou el format (anomenat estils.css). Qualsevol element de bloc o de línia pot portar un atribut style amb una o diverses etiquetes de format. Si n'hi ha més d'una, s'han de separar amb punt i coma (;):
    • font-family: permet establir la tipografia
    • font-size: permet establir la mida de la lletra
    • text-align: permet justificar el text (left, right, center, justify)
  4. Llistes: si volem crear llistes, tenim dues possibilitats, les ordenades i les no ordenades. Les ordenades queden numerades automàticament, mentre que les no ordenades apareixen amb un cercle negre (bullet) a l'esquerre de cada entrada:
    • ol: llista ordenada
    • ul: llista no ordenada
    • li: element d'una llista (això vol dir que una llista ha de tenir una estructura com ara ullielement 1/lilielement 2/li/ul)
  5. Taules: si ens interessa afegir una informació tabulada, ens pot anar bé utilitzar una taula. Una taula s'estructura, primer, en files, i a cada fila hem de definir cada columna.
    • table: inicia una taula
    • tr: defineix una fila
    • td: defineix una columna
    • border: atribut que utilitzem a dins l'etiqueta table per definir si volem que tingui una línia als contorns (border=“1”) o que no en tingui (border=“0”). Va a dins de l'etiqueta table (table border=“1”)
  6. Classes: serveixen per categoritzar elements. Se'n poden posar a moltíssimes etiquetes, però en veurem, sobretot, als elements de bloc, de línia, taules i llistes. El que fan és donar un nom a l'element, i al full d'estils s'estableix quines característiques de format té tot aquest element:
    • id: estableix un identificador únic per a l'element (per exemple div id=“paragraf1”)
    • class: estableix un identificador que es pot utilitzar en molts elements (per exemple span class=“nom”)

Recordeu que:

  • Les etiquetes s'escriuen totes amb minúscules
  • Les etiquetes s'han de tancar en el mateix ordre en què s'han obert
  • Totes les etiquetes s'han de tancar. En el cas que una etiqueta no en tingui una de tancament, s'ha de posar la barra invertida al final de tot. És el cas d'aquestes dues:
    • br /: salt de línia
    • img /: inserció d'una imatge


 
houdini/html.txt · Darrera modificació: 14/12/2017 12.46 per Joan Vilarnau
 
Excepte on es digui una altra cosa, el contingut d'aquest wiki està subjecte a la llicència següent: CC Attribution-Share Alike 4.0 International
Consorci per a la Normalització Lingüística

Els continguts d'aquest lloc estan subjectes a una llicència de Creative Commons Creative Commons

Seguiu-nos a:

  • Facebook
  • YouTube
  • Twitter
  • Netvibes