6.1.2.2 Consola de redacció HTML ~ Els blogs a la classe de Religió

Tot i que per norma general en la redacció de les nostres entrades farem servir la consola de redacció "Redacta", convé que coneguem la consola de redacció HTML (HyperText Markup Language) [Llenguatge de marques d'hipertext], atès que potser qualque vegada haurem de fer-la servir per canviar qualque cosa que és "complicada" de fer a l'altra consola o perquè volem aferrar un codi que un servei extern ens dóna per poder incrustar un element aliè dins la nostra entrada (per exemple, un presentació Slideshare, una presentació Prezi, una activitat Jclic...). En tot cas, aquest curs no està destinat a conèixer aquest llenguatge (tanmateix, és impossible amb la seva càrrega lectiva!).

Per poder accedir a la consola d'edició HTML només hem de clicar sobre el botó HTML que es troba devora el botó "Redacta", a la part superior esquerra:

Una vegada hagis clicat, la consola de redacció canviarà la seva aparença (comprovaràs que el menú d'opcions de redacció es disminuirà considerablement).

Si encara no has afegit contingut a l'entrada veuràs que "la zona del contingut" està en blanc:

Però si ja has afegit contingut des de la consola "Redacta", observaràs que aquest contingut se'ns mostra de forma diferent a com ho fa a "Redacta" (i més complicat d'entendre!). Per exemple, observa la següent imatge, la qual es correspon amb l'inici d'aquest post vist des de la consola de redacció HTML:

Els elements d'HTML d'un lloc web estan especificats per etiquetes, que bàsicament s'identifiquen amb els símbols < (per obrir) i > (per tancar) l'etiqueta. Ex: <Exempleetiqueta>. Així mateix, habitualment és necessari indicar on volem que comenci la funció desitjada i on volem que acabi. En aquest sentit, la funció conclourà amb la inclusió d'una barra inclinada després del símbol d'obertura de l'etiqueta que tanca el comandament. Ex. </Exemplefidel'etiqueta>. En resum, ambdues etiquetes marquen on comença i on acaba la indicació que volem que s'executi.

Aquí et mostro algunes de les etiquetes més usuals, per a què puguis identificar-les i modificar-les si ho necessites.

Tipus de lletra, color i mida:

<font face="nomdelletra" color="nomdelcolorenanglès" size=10 (mida numèrica)>Text amb aquestes característiques</font>

Ex.: <font face="Helvetica" color="black" size=10>Text amb lletra Helvetica, de color negre i mida 10</font>, es veurà així:

Text amb lletra Helvetica, de color negre i mida 10.

Sobre els colors... A més de la designació en anglès del color, també és possible adjudicar-lo mitjançant codificacions. Per exemple, la codificació del color black és #000000. En aquesta web podràs trobar les codificacions pels principals colors: HTML Color Codes. Això sí... és molt important que escriguis el símbol # abans de la codificació i sense espais, sinó el codi no tindrà efectes.

Ex.: <font face="Arial" color="#FFFF66" size=12>Text amb lletra Arial, de color groc i mida 12</font>, es veurà així:

Text amb lletra Arial, de color groc i mida 12

Negreta:

<b>Text en negreta</b>

Cursiva:

<i>Text en cursiva</i>

Subratllat:

<u>Text subratllat</u>

Alineació del text:

<left>Text a l'esquerra</left>
<center>Text centrat</center>

<right>Text a la dreta</right>

<justify>Text justificat</justify>

[de vegades aquest comandament ho trobaràs sota l'etiqueta: <span style="text-align: xxxx;"> on només cal substituir les XXXX per la posició que desitgis: left, center, right o justify].

Inclusió d'una línia visible:

<hr>

Si vols que la línia no ocupi tot el llarg de la pàgina és necessari incloure la mida d'aquesta:

Ex.: <hr width= "100">

Si a més a més, vols afegir un color i un gruix determinat a la línia, hauràs d'indicar-ho abans de tancar l'etiqueta:

Ex. <hr color="red" size="9" width="200">

Inserir una imatge:

<img src="adreçawebdelaimatge">

[recorda que, tal i com ja hem vist al punt anterior (6.1.2.1), cada imatge té una adreça url pròpia, i aquí hem d'incloure aquesta, no l'url de la pàgina on es troba la imatge]

Ex.:

Alinear la imatge: abans de l'etiqueta d'inserir imatge, afegirem l'etiqueta d'alineació (les mateixes que hem vist per alinear el text).

<center><img src="adreçawebdelaimatge"></center>

Canviar la mida de la imatge (o d'un vídeo o un altre recurs) i/o incloure un marc en aquesta:

<img border="0" height="200" src="adreçawebdelaimatge" width="150" /></div>

[en aquest cas border="0" ens indica que no volem emmarcar-la, height="200" fixa una mida de 200px d'alçada i width="150" fixa una amplada de 150 px]

Ex: imaginem que volem incloure la imatge anterior en una mida molt més petita de la que ens permet la consola de redacció (per exemple 30px):

Afegir un enllaç a la imatge: (és a dir, que quan cliquin damunt porti a un lloc web):

<a href="adreçawebonvolemqueenllaci"><img src="adreçawebdelaimatge"></a>

Si volem que l'enllaç de la imatge s'obri dins una nova finestra haurem d'incloure el comandament target="_blank":

<a href="adreçawebonvolemqueenllaci" target=-"_blank"><img src="adreçawebdelaimatge"></a>

Inserir un enllaç:

<a href="http://adreçaweb">Text que inclou l'enllaç</a>

Ex. <a href="http://urkocuevasgomez.blogspot.com.es/">El Calaix de n'Urko</a>, es mostrarà així: El Calaix de n'Urko.

Si volem que l'enllaç s'obri dins una nova finestra, abans del tancament de l'etiqueta haurem d'incloure el comandament target="_blank". Per obrir el blog anterior en una nova pestanya seria:

Text en moviment:

<marquee>Exemple text en moviment</marquee>

Hola! Aquest és un exemple de text en moviment

Separar en línies:

<br>

Ex: <br>Separar<br>en<br>línies, es veurà així:

Separar

línies

Inserir una taula:

[tot plegat, si trobes que això és molt complicat, pots crear la taula a un document "word" i fer un copy-paste d'aquesta dins la consola "Redacta"!].

Una columna i una filera:

<table border=0><td>Contingut de la taula</td></table>

El nombre 0 indica en aquest cas el gruix de la línia (si indicam 0 no es mostrarà).
Ex: <table border=1><td>Hola!</td></table>, es veurà així:

Hola!

Si volem afegir una altra columna:

<table border=0><td>Contingut columna 1</td><td>Contingut columna 2</td></table>

Contingut columna 1

Contingut columna 2

Si volem afegir una altra filera: (afegirem <tr> allà on vulguem que comenci la nova filera):

Ex.: Taula de 2 columnes i 2 fileres:

<table border=0><td>Contingut columna 1 filera 1</td><td>Contingut columna 2 filera 1</td><tr><td>Contingut columna 1 filera 2<td>Contingut columna 2 filera 2</td></table>

Contingut columna 1 filera 1	Contingut columna 2 filera 1
Contingut columna 1 filera 2	Contingut columna 2 filera 2

Si volem afegir més columnes o més fileres, és tan fàcil com anar afegint els codis <td></td> per les columnes i <tr> per les fileres (en aquest cas no és necessari tancar el <tr>, simplement indicar on vols que comenci la següent filera.

Ex: Taula de 3 columnes i 3 fileres:

<table border=0><td>Contingut columna 1 filera 1</td><td>Contingut columna 2 filera 1</td><td>Contingut columna 3 filera 1</td><tr><td>Contingut columna 1 filera 2<td>Contingut columna 2 filera 2</td><td>Contingut columna 3 filera 2</td><tr><td>Contingut columna 1 filera 3<td>Contingut columna 2 filera 3</td><td>Contingut columna 3 filera 3</td></table>

Contingut columna 1 filera 1	Contingut columna 2 filera 1	Contingut columna 3 filera 1
Contingut columna 1 filera 2	Contingut columna 2 filera 2	Contingut columna 3 filera 2
Contingut columna 1 filera 3	Contingut columna 2 filera 3	Contingut columna 3 filera 3

També és possible canviar el color de la línia de la taula i el color de fons d'aquesta:

Ex: <table border=1 bordercolor="red" bgcolor="black"><td><font color="white">Taula amb línia de color vermell i fons negre . El color de la lletra és blanc.</font></td></table>

Taula amb línia de color vermell i fons negre . El color de la lletra és blanc.

Els blogs a la classe de Religió

Curs de formació en TIC - Palma, març 2018.

dimecres, 24 de gener del 2018