Le vacanze sono finite ed è ora di tornare sui banchi.
Fatta la scorta di grasso per affrontare il freddo inverno, the winter is coming…da un pezzo, siamo prontissimi, forse, a buttarci, con un po’ di nostalgia, nel mare del web. Nel mare della rete? Ma che vuol dire? Io ho sempre visto le reti a mare, ma…stop. Facciamo i seri. Ci tuffiamo nel web, senza mare, no nostalgia, no amarcord… pesci suicidi.
Cosa tiriamo fuori dalla rete? Una lingua nuova.
Oggi impareremo a parlare html. Solo le nozioni base, quelle necessarie alla sopravvivenza del turista.
Il linguaggio nasce in terra elvetica (CERN di Ginevra) tra la fine degli anni 80 e inizi 90 del XX secolo
(quando Ligabue portava i capelli lunghi, gilet muccati e gli stivali, Will Smith era il principe di Bel Air e per chiamare un amico si suonava al campanello di casa), ma oggi è parlato in tutto il web e la gente gira col risvoltino. I Padri dell’Html sono Tim Berners-Lee e Daniel Connolly che nel 1993 ne pubblicarono la prima definizione. Anche l’html ha la sua Accademia della Crusca, chiamata W3C (World Wide Web Consortium) che a partire dal 1994 ha la prerogativa sullo sviluppo del linguaggio… e il mondo divenne selvaggio.
L’HTML (Hyper Text Markup Language = Linguaggio di marcatori per ipertesti) è un linguaggio di formattazione (evolutosi nel tempo, oggi siamo all’html5), che descrive le modalità di impaginazione o visualizzazione grafica (layout) del contenuto, testuale e non, di una pagina web attraverso tag di formattazione (l’ho preso da wikipedia).
In parole semplici l’html, non è altro che una serie di indicazioni o elementi (tag) che indicano dove e come deve essere visualizzata una pagina web: la foto a destra, il testo a sinistra, lo stile da utilizzare, quando andare a capo, il grassetto, i colori etc, creando così un documento multimediale.
I documenti HTML sono in grado di incorporare molte tecnologie, linguaggi come CSS, JavaScript, XML, JSON e altre applicazioni multimediali, che permettono di aggiungere al documento ipertestuale controlli più sofisticati sulla resa grafica, interazioni dinamiche con l’utente, animazioni interattive e contenuti multimediali.
Non lo si può definire comunque un linguaggio di programmazione sebbene supporti l’inserimento di script e oggetti esterni quali immagini o filmati, ma più di impaginazione ipertestuale. Iper(testuale) perché la lettura può non essere lineare, è possibile cioè saltare da un documento all’altro o da un punto all’altro dello stesso documento, attraverso parole chiave usate come collegamenti ipertestuali (hyperlink). Di solito queste parole sono colorate di blu o in grassetto o sottolineate per renderle riconoscibili: html
Divago un attimo, ma neanche troppo:
In contemporanea all’html nasce anche l’http L’HyperText Transfer Protocol (protocollo di trasferimento ipertesto), che è il protocollo utilizzato per il trasferimento dati tra server e browser. (la pagina web scritta in html viene trasportata dal server al browser utilizzando questo protocollo)
E’ come se ti trovassi in Giappone in visita da un amico.
Tu sei tu, fin qui tutto bene e in Giapponese sai dire solo arigatò, che manco lo sai scrivere. Chiedi al tuo amico di andare a comprare il pesce
Il tuo amico (browser) si reca in pescheria (il server) per domandare il pesce (pagina web) al commesso che lavora in pescheria (server web: software in funzione sul server). Il serverwebpescivendolo consegnerà la merce imbustata (protocollo http). A questo punto devo forzare un po’ l’esempio. solo il tuo amico sa come scartare il pesce. Il tuo browseramico tornerà a casa e tolto l’involucrohttp ti consegnerà il tuo bel pescefrescopaginaweb. Forse era meglio l’esempio del traduttore.
Invertendo: tu digiti la pagina che vuoi raggiungere (pesce), il browser (il tuo amico) raggiunge il server (la pescheria), e chiede al server web (il pescivendolo) la pagina web desiderata (pesce). Il server web(pescivendolo) consegna la paginaweb(pesce) al tuo browser(amico), httpimbustataeimpacchettata per portarla sullo schermo del tuo pc(casa). Il browser(amico) elaborando le informazioni scritte in html ti mostrerà una pagina semplice ed ordinata ( se lo sviluppatore è stato bravo) in modo che tu possa usufruirne facilmente.
Togliendo, il pescivendolo, il tuo amico, il Giappone (lo so ti piaceva l’idea della vacanza nipponica)… rimane quanto segue:
I documenti HTML vengono immagazzinati sui dischi rigidi di macchine elaboratrici (computer–server) costantemente collegate e connesse alla rete Internet. Su queste macchine è installato un software specifico (web server) che si occupa di produrre e inviare i documenti ai browser degli utenti che ne fanno richiesta usando il protocollo HTTP per il trasferimento dati. (anche questo preso da wiki). Scusate se il lavoro è già fatto, e fatto bene, perché non sfruttarlo. Furbo come un vecchio lupo di mare, o forse quella era la volpe.
Nella definizione abbiamo detto che l’html determina la disposizione della pagine attraverso tag di formattazione, ma cosa sono questi tag (contrassegni)?
I tag sono una serie di contrassegni appunto, rappresentati tra parentesi uncinate o angolari, i segni di minore “<” e maggiore “>”, e solitamente ne troviamo uno di apertura es. <B> e uno di chiusura </B> , costituito da una sbarra che precede il nome del tag ( in questo caso B, che sta per bold = grassetto).
esempio: <b> ciao </b> la parola ciao viene visualizzata in grassetto sul tuo pc o smartphone.
I tag possono anche essere racchiusi l’uno dentro l’altro, in questo caso si dice che sono annidati.
Es. <b><I> ciao<I> </b>
I sta per italic = corsivo quindi vedremo scritto ciao.
Alcuni tag come <img>, che serve per inserire un’immagine in un determinato punto della pagina, o <br>, che serve per andare a capo, non necessitano del tag di chiusura; in questo caso si parla di tag a chiusura implicita.
In XHTML, una variante di HTML4, invece, la chiusura implicita è proibita e tutti i tag devono essere sempre chiusi, in questi casi usando il carattere ‘/’ alla fine del tag stesso ( <img />; <br />).
Per realizzare un documento HTML non c’è bisogno di un particolare programma, ma è sufficiente un semplice elaboratore testi come il Blocco Note.
Anche se oggi è possibile delegare la scrittura del codice HTML ad applicazioni specifiche, gli editor html come WYSIWYG, che generano il codice vero e proprio automaticamente permettendo al designer di occuparsi dell’aspetto grafico finale della pagina.
La struttura del documento html viene detta ad albero annidato. I tag <html> e</html> delimitano tutto il documento. Questo tag serve a comunicare al browser che tutto quello che è compreso in questo intervallo è stato redatto secondo il linguaggio di contrassegno HTML.
All’interno dei tag <html> troviamo tutte le informazioni su come sarà la nostra pagina web.
Lo standard prevede che siano sempre presenti due sezioni ben distinte e disposte in sequenza ordinata:
- L’header=intestazione, delimitata tra i tag <head> e </head>, che contiene informazioni di controllo normalmente non visualizzate dal browser, con l’eccezione di alcuni elementi come La coppia di tag <TITLE> e </TITLE> che delimitano il titolo.
Tutto ciò che viene digitato tra questi due tag appare nella barra del titolo (è la barra che si trova più in alto nella finestra del browser). - Il body=corpo, delimitata tra i tag <body> e </body>, che contiene la parte informativa vera e propria, ossia il testo, le immagini e i collegamenti che costituiscono la parte visualizzata dal browser e racchiude quindi tutti gli altri tag che verranno utilizzati per dar vita al documento HTML.
<HTML>
<HEAD>
<TITLE>marketingacolori</TITLE>
</HEAD>
<BODY>
<H1 align=center>A scuola di html</H1>
<P>Spero che l’articolo vi sia piaciuto.</BR>Continuate a seguirci.
<P>Ciao a tutti.
<P>Alla prossima <BR> Francesco Degortes
</BODY>
</HTML>
Per vedere il risultato:
- Apri l’elaboratore testi (Blocco Note)
- Copia e incolla il testo
- Salva il file con il nome ciao.html
- Apri il file in questione.
H sta per Header = titolo che può avere un valore da 1 a 6
P sta per Paragraph = paragrafo
Br sta per Break = interruzione
I tag <P> e <Br> non necessitano tag di chiusura </P> e </BR>
I tag <P> e <H> supportano l’attributo align=allineamento, che ha tre parametri:
- align=right – allineamento a destra;
- align=center – allineamento al centro;
- align=left – allineamento a sinistra;
Spero che questo articolo vi abbia fatto entrare nel mondo Html sorridendo e senza sbadigliare troppo.
Alla prossima!