Introduzione all'html
Gran parte delle funzioni di ammiinistrazione necessitano della
conoscenza di base del linguaggio html.
Questo capitolo vuole essere un introduzone all'html. Non sara' un
corso. Il suo scopo e' quello di dare a chi lo legge alcuni elementi
chiave per potersi orientare.
Se volete qualcosa di piu' esaustivo ripubblichiamo il corso hzml del
LOA hacklab MI, che potete
scaricare e unzippare sul vostro computer, per poi leggerlo comodamente
con il vostro internet explorer, o altri browser.
Ultima nota: il modo piu' semplice per provare a fare degli
esercizi con le cose descritte in questo capitolo
non e'
indymedia, ma e' un semplice file txt che potete creare con il "Blocco
Note" e che dovrete rinominare
esercizi.html e visualizzare con il vostro browser.
Un
browser, termine che troverete spesso, e' un qualsiasi programma che
utilizzate per visitare pagine web (Internet Explorer, Netscape, Opera,
Mozilla, lynx, links, Galeon, Konqueror, ecc ecc).
Cos'e' l'html
L'html, detto brutalmente, e' il linguaggio con cui vengono scritte le
pagine web.
Le pagine web sono in sostanza pagine di testo che contengono sia le
informazioni che vengono visualizzate nei vostri browser che le
informazioni che dicono al browser come visualizzare la pagina.
In pratica esistono delle parole speciali usate dall'html che dicono al
browser se una parola deve essere in grassetto, o se deve essere
inserita in una tabella, ecc ecc.
Queste paroline si chiamano
tag.
Pensate a ogni documento html, a ogni pagina web come un susseguirsi di
testo e tag, il primo e' il contenuto della pagina, i secondi sono
quelli che ne determinano la forma.
Cos'e' un tag
Un tag e' sostanzialmente una parola, che viene interpretata dai browser
come una informazione sulla formattazione e l'aspetto che deve assumere
una pagina web.
Tutti i tag si presentano nella seguente forma:
<TAG>
Quasi tutti i tag determinano una forma per cio' che e' compreso tra un
tag iniziale e un tag di chiusura:
<TAG>parola</TAG>
La parola dell'esempio sara' visualizzata dal browser con le
caratteristiche determinate dal tag.
Tutti i tag possono essere innestati l'uno nell'altro con effetti
cumulativi:
<TAG1><TAG2>parola</TAG2></TAG1>
La parola dell'esempio verra' visualizzata sia con le caratteristiche
determinate dal tag1 che dal tag2.
I tag strettamente necessari per amministrare indymedia italia sono
molto pochi:
Tutti gli atri sono semplicemente utili da conoscere, ma non sono
praticamente mai usati per la gestione di feature e articoli.
Tag chiave per la formattazione
Esistono alcuni tag fondamentali per la formattazione.
Di questi solo alcuni sono quelli che incontrerete abitualmente nelle
vostre funzioni di amministratore per indymedia italia.
In questo paragrafo l'idea e' di mostrarvi tutti i tag che
potreste incontrare, ma per gestire efficacemente una feature o
un articolo non dovreste che aver bisogno dei tag b e
b,i,u
Questi tag definiscono grossolanamente l'aspetto del testo che e'
racchiuso tra il loro inizio e la loro fine.
- b = bold = grassetto
- i = italics = corsivo
- u = underline = sottolineato
In pratica se voi nel vostro file di testo esercizio.html scrivete
<b>pippo</b>
quando visuallizzerete esercizio.html nel vostro browser la parola pippo
vi apparira' in grassetto, cosi':
pippo
p
Questo tag definisce l'inizio e la fine di un paragrafo, separando il
blocco di testo immediatamente precedente e immediatamente successivo
con una doppia interlinea.
br
Le pagine web non riconoscono gli "a capo" del testo semplice.
I browser devono essere informati dal codice html per sapere quando
andare forzatamente "a capo", altrimenti pubblicano il testo tutto di
seguito, senza interruzione se non per la fine dello schermo del vostro
computer :))
.
Dove voi scrivete <br> (break line), il brwoser andra' a capo una
volta.
Ovviamente per ottenere l'effetto di una doppia interlinea e' necessario
ripetere due volte il tag.
Questo tag non ha apertura e chiusura, ma viene usato semplicemente
come descritto, come tag a se' stante.
Se voi nel vostro file di testo esercizio.html scrivete :
pippo<br>antonio<br><br>plutonio<br>
quando visualizzerete esercizio.html nel vostro browser quella riga vi
apparira' cosi':
pippo
antonio
plutonio
font
Questo tag serve a definire caratteristiche specifiche per i font con
cui visualizzare il testo racchiuso tra il tag di inizio e il tag di
conclusione.
Ad esempio se voi scrivete nel vostro file esercizio.html:
<font color="#FF0000" face="courier">prova</font>
quando visuallizzerete esercizio.html nel vostro browser la parola prova
vi apparira' rossa e con il font courier, cosi':
prova
Pe conoscere gli attributi che potete assegnare usando il tag font, vi
rimando al corso del LOA hacklab MI, citato nell'introduzione di questo
capitolo.
div
Questo tag definisce un livello o layer separato della pagina.
In pratica definisce uno spazio, delimitato dal suo tag di inizio e dal
suo tag conlcusivo, indipendente in termini di posizionamento e aspetto
dal resto della pagina, una specie di riquadro sovrapposto al resto dlla
pagina, che puo' essere gestito autonomamente.
L'uso piu' caratteristico di questo tag e' quello di impaginare a destra
o al centro il testo e le immagini racchiuse nel tag.
Ad esempio se voi scrivete nel vostro file esercizio.html:
questo testo sta a sinistra
<div align="center">questo testo sta al centro</div>
quello che verra' visualizzato nel vostro browser aprendo esercizio.html
sara' quanto segue:
questo testo sta a sinistra
questo testo sta al centro
Tag chiave per i collegamenti
I collegamenti sono il cuore dei documenti ipertestuali.
Passare da una pagina all'altra con un click e' cio' che ci sembra cosi'
diverso nelle pagine web, rispetto ad un libro :)
Ogni collegamento e' definito da due elementi principali:
- l'ancora: il nome a cui noi leghiamo un link, la parola su cui
clickiamo.
- il link: il documento a cui una parola clickabile ci porta
Per i fini di amministrazione di indymedia italia dovrete
sostanzialmente gestire solo link veri e propri (
a
href), ma potrebbe esservi utile avere una idea seppur vaga del
concetto di ancora interna a un documento.
a href
Questo tag e' quello che definisce un link vero e proprio.
Se nel vostro file di testo esercizio.html scrivete:
<a href="http://italy.indymedia.org">indymedia
italia</a>
Qunado visualizzerete nel vostro browser il file le parole indymedia
italia vi appariranno come un link che punta a
http://italy.indymedia.org, cosi':
indymedia italia
a name
Questo tag, simile al precedente e abbastanza inutile se non usato
insieme ad esso, definisce una ancora "interna".
In pratica potete definire dei punti linkabili all'interno di un
documento, in modo da poter linkare parti specifiche di un documento
(magari molto lungo).
Un esempio pratico di questo lo vedete nei link "inizio pagina" di
questo paragrafo, che vi rimandano all'inizio della pagina.
Per esempio, scrivete nel vostro file esercizio.html un testo di
qualche riga, seguito da un ancora interna con questa sintassi:
<a name="prova"></a>
e fate seguire quest'ancora da un altro testo di qualche riga.
Il testo verra' visualizzato tutto consecutivamente nel vostro browser,
ma se nella barra dell'indirizzo digitate :
esercizio.html#prova
il browser vi presentera' la pagina esercizio.html a partire dal punto
in cui avete inserito l'ancora "interna".
inizio pagina
Le immagini
Un altro elemento importante delle pagine web e' la possibilita' di
includere immagini nel vostro testo.
L'inclusione di immagini funziona analogamente ai link. Sostanzialmente
utilizzerete un tag specifico che "linka" a un immagine che viene
inclusa nel testo.
img
Il tag img e' come il tag br, e non presuppone una chiusura.
La sintassi con cui viene utilizzato e' la seguente:
<img src="link all'immagine che vi interessa includere">
La cosa forse piu' delicata da comprendere e' quale link usare per
l'immagine.
Distinguiamo sostanzialmente tre casi
- Se volete includere un immagine presente in un altro sito, non
dovete fare nient'altro che andare sul sito, clickare con il pulsante
destro del mouse sull'immagine che vi interessa, e selezionare "copia
indirizzo dell'immagine" (o qualcosa di similie.
A questo punto tornate nel vostro file html e "incollate" l'indirizzo
che avete copiato che punta ad una risorsa di un altro sito.
Il vostro tag img avra' questo aspetto:
<img src="http://www.cheneso.org/immagini/pippo.jpg">
La principale controindicazione e' ovviamente che se quel sito e'
inattivo per manutenzione oppure se l'amministratore di quel sito decide
di spostare l'immagine, il vostro tag img non funzionera' piu'
correttamente.
- Potete inoltre includere un immagine presente in una sottodirectory
del vostro sito.
In questo caso potete usare un percorso relativo.
Per percorso relativo si intende un percorso relativo alla directory del
sito in cui vi trovate.
Il percorso:
<img src="images/pippo.jpg">
vi mostrera' un'immagine diversa a seconda che la pagina che state
editando stia in http://italy.indymedia.org oppure in
http://italy.indymedia.org/archives/.
QUesto evidentemente e' parecchio scomodo su indymedia italia dove le
feature vengono archiviate e mostrate in molte directory differenti.
- Esiste una terza possibilita' che assomiglia visivamente a un link
relativo, ma che sostanzialmente e' un link assoluto indipendente da
molti fattori da cui i link assoluti sono influenzati (ad esempio
funzionamento dei DNS).
Questo tipo di percorso si presenta cosi':
<img src="/images/pippo.jpg">
La / iniziale in realta' viene sostituita dal server di indymedia
italia con http://italy.indymedia.org evitando il problema dello
spostamento di una feature in eventuali sottodirectory di archivio.
inizio pagina
Le tabelle
I tag per visualizzare una tabella in html non sono molti, ma possono
essere difficili da maneggiare.
In questo paragrafo venogno delineati brevemente, ma e' vivamente
consigliato di sperimentarsi con un corso un po' piu' articolato prima
di utilizzare questo tipo di elementi nell'amministrazione di indymedia
italia.
Sostanzialmente una tabella viene creata con tag in maniera sequeziale:
- <table> apre una tabella
- <tr> apre una riga della tabella
- <td> apre una colonna di una riga
- testo della cella
- </td> chiude una colonna di una riga
- </tr> chiude una riga della tabella
- </table> chiude la tabella
Per esempio, il codice qui di seguito:
<table border="1">
<tr>
<td>
testo della cella
</td>
<td>
testo della cella
</td>
</tr>
<tr>
<td>
testo della cella
</td>
<td>
testo della cella
</td>
</tr>
</table>
Produrra il seguente effetto
| testo della cella |
testo della cella |
| testo della cella |
testo della cella |
inizio pagina
I caratteri speciali
Ci sono alcuni caratteri che possono interferire con l'interpretazione
del codice html da parte del vostro browser.
Spesso questi caratteri, chiamati caratteri speciali, devono essere
rappresentati da una sequenza di caratteri.
A titolo di esempio possiamo citare:
- < che si traduce in <
- > che si traduce in >
- & che si traduce in &
Per maggiori informazioni potete consultare il corso del LOA hacklab MI
allegato oppure cercare qualche risorsa in rete, come <A
HREF="http://www.utoronto.ca/webdocs/HTMLdocs/NewHTML/iso_table.html">questo
inizio pagina
Gli stili
Una delle caratteristiche piu' utilizzate negli ultimi anni dell'html e'
la possibilita' di definire dei fogli di stile (style sheets) che
possono cambiare radicalmente l'aspetto della vostra pagina web.
E' oltre lo scopo di questo breve tutorial dettagliare come vengono
definiti i fogli di stile, pero' puo' essere utile riconoscerli quando
li incontrate nel codice html della vostra pagina.
Un foglio di stile viene applicato a un tag usando l'attributo
class. In pratica se all'interno di un tag trovate l'attributo
class, questo sta richiamando le definizioni collegati in un foglio di
stile.
--
ImcItalia - 17 Nov 2005
to top
