Els vincles o enllaços ens permeten saltar a un altre document tot fent clic. L’experiència de l’usuari davant un vincle pot ser diversa, però bàsicament, quan mou el ratolí per sobre d’un enllaç, la fletxa del ratolí es convertirà en una petita mà.
Un enllaç no ha de ser necessàriament text, també pot ser una imatge o qualsevol altre element HTML.
En HTML es fa servir l’etiqueta <a> per crear un vincle. Com en la majoria d’etiquetes, també comptem amb una bona corrua d’atributs que ens permetran millorar l’experiència. A continuació trobareu una llista dels principals atributs i de les seves funcions:
href: Aquest atribut especifica l’adreça de destí (https://blocs.xtec.cat/codify/) del vincle.
target: Aquest atribut especifica el destí on s’ha d’obrir el document enllaçat. Pot tenir un dels valors següents:
target=”_blank” Obre el document enllaçat en una finestra o pestanya nova.
target=”_self” Obre el document enllaçat a la mateixa finestra / pestanya en la que es fa clic (aquesta serà l’opció per defecte en cas d’absència de l’atribut).
target=”_parent” Obre el document enllaçat al frame principal o d’origen.
target=”_top” Obre el document vinculat marc principal la finestra.
target=”framename” El nom d’aquest frame de destí és opcional i Obre el document enllaçat en una finestra / pestanya amb nom determinat.
alt: Aquest atribut especifica un text alternatiu.
title: Aquest atribut especifica un títol pel vincle. L’usuari el pot visualitzar mitjançant un tooltip que apareix si es deixa el ratolí sobre el vincle.
L’etiqueta <map> en HTML serveix per definir àrees clicables dins una imatge. <map> està associat amb l’atribut usemap de <img> i crea una relació entre la imatge i el mapa. L’element <map> conté diversos elements <area>, que deifneix arees quadrades, circulars o poligonals i les associa a un vincle i un títol.
A continuació trobareu un exemple de mapa d’imatges aplicat a una Planta de Creu Llatina del Romànic
01. <img src="planta_creu_llatina.jpg" alt="Planta de Creu Llatina del Romànic" usemap="#plantamap">
NOTA: Passa el cursor per sobre de la Nau Central, l’Absis i les Absidioles de la Planta de Creu Llatina.
Pots trobar més informació i exemples a W3SCHOOLS.
Activitats
Descarrega’t la imatge de la planta de creu llatina fent clic aquí i aplica-hi el codi de l’exemple en un document html.
Busca informació i afegeix dues àrees noves al mapa d’entre els elements arquitectònics característics de la planta de creu llatina del romànic que es llisten a continuació: presbiteri, creuer, transcepte, girola, pilars creuiformes, torre, altar, pilars o contraforts.
Per inserir imatges en un document HTML fem servir l’etiqueta <img/>. Al tractar-se d’una imatge externa, aquesta etiqueta és auto-tancada. També pot anar acompanyada d’alguns atributs que ens permetran controlar diferents paràmetres que controlen com es mostra la imatge al document HTML. Observa l’exemple següent:
01. <img src="directori/imatge.format" alt="títol alternatiu" title="Nom de la imatge"/>
Per incrustar correctament les imatges en un document HTML caldrà fer servir, com a mínim, els atributs alt i title.
L’atribut alt ens permet assignar un nom alternatiu a la imatge. Si aquesta no es carrega es mostrarà la descripció que afegim al valor d’aquest atribut.
L’atribut title assigna un títol a la imatge. Si passem el cursor per sobre la imatge del document HTML, notarem que apareix un tooltip amb el títol que hem assignat al valor d’aquest atribut.
Addicionalment s’hi poden incloure més atributs com ara width i heihgt, per modificar l’amplada i l’alçada de a imatge respectivament. Pots trobar més informació sobre aquesta etiqueta i els seus atributs a la pàgina de W3Schools.
Si copiem el següent codi dins el cos d’un HTML:
01. <img src="http://blocs.xtec.cat/codify/files/2017/01/perfil.png" alt="Logotip de Codify" title="Codify Logo"/>
… el resultat serà el que es mostra a continuació.
Per crear una taula en HTML fem servir l’etiqueta <table>. Cada fila de taula es defineix amb l’etiqueta <tr>. L’encapçalament de la taula es defineix amb l’etiqueta <th>. De manera predeterminada, els encapçalaments de taula són en negreta i centrats. Les cel·les de la taula es defineixen amb l’etiqueta <td>. Veiem un exemple:
En el codi anterior podem observar la incorporació d’alguns atributs a les etiquetes abans esmentades que modifiquen la manera en que es representa una taula. Repassem Algun d’aquests atributs modifiquen l’alçada de la taula o la fila, <table width="150px">
l’amplada <tr height="50px">
i d’altres afecten a la representació de les bores de la taula.
<table border="1px" >
a continuació podeu veure el reusltat que obtindrem d’aplicar els codis i atributs que hem comentat.
Títol de la taula
Atributs Colspan i Rowspan
Per editar taules més complexes, amb cel·les de més d’una columna d’amplada i de cel·les de diverses files d’alçada ens caldrà fer servir els atributs colspan i rowspan respectivament.
Article escrit per Adrian U. i revisat per grigol@xtec.cat
La primera línia no és obligatòria però si recomanable. Serveix per especificar la versió XML (per ara posarem “1.0”) i la taula de codis per a la representació dels caràcters especials (ç, ñ, i vocals accentuades o amb dièresis). Generalment utilitzarem “UTF-8” o “ISO-8859-1”. La codificació especificada en l’atribut encoding ha de coincidir amb la codificació física de l’arxiu de text. Si no
és així, tindrem problemes alhora de visualitzar els caràcters especials.
La sintaxis XML preveu la possibilitat d’incorporar comentaris dintre del document. Els comentaris sempre seran ignorats per qualsevol aplicació informàtica que llegeixi el document, per tant només serviran com a notes, recordatoris o advertències als programadors que editin el document. La forma d’introduir un comentari és la següent:
<!-- Aquesta línia és un comentari -->
Com que no formen part de l’estructura d’arbre XML, podem posar comentaris en qualsevol lloc del document.
Tal com mostra l’exemple, els símbols “>” i “<” s’utilitzen per delimitar les etiquetes. Per tant, aquests símbols són caràcters reservats que no podem utilitzar en els blocs de dades, ja que entrarien en conflicte amb les etiquetes. Si necessitem escriure un d’aquests símbols, haurem d’utilitzar les seqüències d’escapament que ens ofereix la sintaxi XML conegudes com entitats predefinides
Si hem d’escriure una gran quantitat de text amb símbols especials diversos, la utilització d’entitats pre-definides pot resultar poc pràctic. En aquest cas podem utilitzar una secció CDATA. La seva sintaxi és la següent
<![CDATA[ ....................... ]]>
La única restricció és que dintre una secció CDATA no hi podem escriure doble claudàtor ]] ja que aquesta combinació de caràcters s’utilitza per indicar el punt de finalització de la secció.
Activitats
Elabora un document xml ben format que inclogui etiquetes amb entitats predefinides i blocs de dades amb CDATA.
XML, de l’anglès eXtensible Markup Language («llenguatge de marques extensible»), és un metallenguatge extensible, d’etiquetes, desenvolupat pel World Wide Web Consortium (W3C). És una simplificació i adaptació de l’experimentat SGML, i permet de definir la gramàtica de llenguatges específics (de la mateixa manera que HTML és, alhora, un llenguatge definit per SGML). Per tant, XML no és realment un llenguatge en particular, sinó una manera de definir llenguatges per a diferents necessitats.
Emmagatzemar dades mitjançant el llenguatge XML ens proporciona diverses avantatges:
És multi-plataforma, els arxius XML realment són arxius de text que podem editar amb qualssevol editor ASCII (bloc de notes). Per tant podrem accedir a ells des de qualsevol sistema operatiu/aplicació.
Ens permet exportar/importar dades entre aplicacions aparentment incompatibles entre elles.
Sense tenir grans coneixements d’informàtica, podem entendre i llegir fàcilment un document XML degut a que la seva estructura és molt intuïtiva.
És auto-descriptiu, és a dir, les etiquetes ens descriuen el significat del seu propi contingut.
Podem emmagatzemar estructures complexes gràcies a que segueix una estructura d’arbre, cosa que no podem fer amb altes formats més bàsics com per exemple el .csv (comma-separated values).
Un document XML és extensible degut a que es basa en un estructura que pot créixer sense limitacions.
Fàcilment integrable en qualssevol aplicació informàtica.
El llenguatge HTML ens permet crear llistes amb ítems i sub-ítems en diversos formats. Llistes numerades, llistes de pics i llistes personalitzades:
Llistes numerades
Les llistes numerades són llistes que serveixen per ordenar numèricament. Per crear-les en html obrim amb l’etiqueta contenidora <ol> i introduïm els ítems amb l’etiqueta <li>.
També podem afegir alguns atributs a les etiquetes <ol> i <ul> com a l’exemple una llista ordinal alfabètica amb <ol type=”a”>. Pots consultar més detalls a W3schools
Article escrit per Marc T. i revisat per grigol@xtec.cat
L’HTML, o el què és el mateix, L’Hyper Text Markup Language és un llenguatge de marques d’hypertext pensat per crear documents digitals. És a dir, pàgines web que poden ser llegides a través d’un navegador web. S’editen i es codifiquen en text pla, per tant, els podem crear amb un simple Bloc de notes, o editors dedicats com Notepad++, Atom i Brackets, entre altres.
L’html s’escriu i es desenvolupa amb tags o etiquetes, d’obertura i tancament, etiquetes auto-tancades i atributs, valors i informació. A continuació podeu trobar l’exemple d’un document HTML 5 simple, amb les etiquetes i els atributs més habituals.
El color negre s’identifiquen les etiquetes, el color taronja els atributs, que sempre van seguits del signe igual i les cometes d’obertura i tancament. Entre aquestes cometes trobem el valor de l’atribut en color verd.
A continuació podeu trobar una descripció línia a línia.
01. <!DOCTYPE html>Defineix el document com un document HTML versió 5.
02. <html lang="ca">És l’element arrel d’una pàgina HTML. S’obre al princip del document i es tanca al final del mateix. En aquest cas a la línia 11. Aquesta etiqueta incorpora un atribut que indica als rastrejadors l’idioma en que s’ha escrit el document.
03. <head> Aquesta és una etiqueta contenidora metadades, vincles i codificacions del document html.
05. <meta charset="utf-8"/> Aquesta és una etiqueta auto-tancada que descriu una metadada relacionada amb el grup de caràcters en que s’escriu la pàgina web.
04. <title>Nom de la pàgina</title>Aplica un títol de la pàgina web.
07. <body> És l’etiqueta que inclou el contingut visible de la pàgina web. Com que és una etiqueta contenidora cal tancar-la quan s’ha presentat el contingut, just abans de tancar l’etiqueta arrel, línia 10.
08. <h1>Títol d'exemple</h1> Defineix un títol de nivell 1. En html podem descriure fins a sis nivells diferents.
09. <p>Paràgraf d'exemple.</p>Defineix un paràgraf.
Article escrit per Núria O. i revisat per grigol@xtec.cat
