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
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
Donar format bàsic a un text significa enriquir-lo mínimament. Parlem d’aplicar negretes, cursives i subratllats. A continuació trobareu el detall de com aplicar aquest enriquiment textual en llenguatge html:
Aquesta paraula està en negreta Aquesta paraula està en <b>negreta</b>
Aquesta paraula està en cursiva Aquesta paraula està en <i>cursiva</i>
Aquesta paraula està subratllada Aquesta paraula està <u>subratllada</u>
També existeix l’opció de combinar les etiquetes per tal d’obtenir una formatació especial. Cal mantenir l’ordre jeràrquic d’obertura i tancament.
Aquesta és una formatació combinada Aquesta és una <b><i><u>formatació combinada</u></i></b>
Article escrit per Stefan T. i revisat per grigol@xtec.cat
