Archivio dei tag HTML

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:

1. Apri l’elaboratore testi (Blocco Note)
2. Copia e incolla il testo 
3. Salva il file con il nome ciao.html
4. 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:

1. align=right – allineamento a destra;
2. align=center – allineamento al centro;
3. align=left – allineamento a sinistra;

Spero che questo articolo vi abbia fatto entrare nel mondo Html sorridendo e senza sbadigliare troppo.

Alla prossima!

Le 12 fatiche d’Er…Copy.

Le dodici fatiche del copywriter, poi Er..copy nella mitologia romana, sono il racconto mitologico delle imprese compiute dall’eroe Er…copy per espiare il fatto di essersi reso colpevole della morte della sua famiglia. (cosa che potrebbe succedere ai vostri famigliari una volta comunicata l’intenzione di diventare copywriter). Er…copy è un lavoratore come tutti gli altri, come er grattacheccaro er monnezzaro, er gelataro, solo che loro non sono mitologici e non hanno un nome inglese, quindi sono meno fighi.

• Prima fatica: domare la fiera grammatica italiana.

La strada per il nostro eroe è subito in salita, comunque se le fatiche sono 12 le prime 11 le passa sicuro. Si non c’è molta suspance, ma Pisandro da Rodi era un poeta mica un copy, niente titoli ad effetto. Dato che ci ha rovinato le imprese la faccio breve, il nostro eroe sconfisse la temuta bestia restando seduto sulla sedia a leggere e scrivere di tutto per diversi anni.

• Seconda fatica: catturare il mostro a 3 teste SEO.

La seconda impresa fu meno faticosa, essendo già seduto continuò a studiare come si ottimizzano delle pagine web per i motori di ricerca: iniziò a disseminare la strada di pezzi di pane e… ok questa cosa della mitologia e della fiabe forse sta scappando di mano, sta di fatto che il copy pollicino riempì i suoi testi di pezzi di pane di cui i motori di ricerca andavano ghiotti e li catturò. Non è proprio questa la storia, vero?

Goolll
Copy 2 fatiche 0.
Poo popopo popo po…

• Terza fatica: riportare vivo, al cospetto del re datore di lavoro, il temutissimo Titano Utente. La fatica anche in questo caso fu più mentale che fisica. Er…Copy messo davanti a questa ardua sfida iniziò a pensare, rimase giorni a pensare, fino al giorno ultimo imposto dal re. Una folgorazione gli indicò la strada, gli dei Fantasia e Creatività corsero in suo aiuto. L’utente, un essere annoiato e anestetizzato dal mondo monotono in cui viveva, fu folgorato dal richiamo seducente ed ammaliante ideato dalla nostra sirena Copy, e non essendo legato all’albero della nave, anche perché non solo non possedeva una nave, ma neanche un pedalò, fu catturato e portato al cospetto del re.

• Quarta fatica: cavalcare la cugina lontana della grammatica italiana, terribilmente chiamata Inglese.

Nella mitologia del web, domina questa strana creatura, snob e superba, dall’ultimo referendum anche poco propensa all’unione con altre genti, ma che è riuscita a colonizzare il mondo. Il nostro amico per superare questa prova passò 2 anni a lavare piatti in un ristorante Italiano in cui servivano la carbonara fatta con la panna e senza uovo.
Fu l’impresa più ardua.

• Quinta fatica: riprendersi dalla quarta.

• Sesta fatica: rinchiudere il gigante Pensiero dentro una scatola di 3 parole. Qui usò le maniere forti. Alcmena, madre d’Er…Copy, consapevole dell’ardua impresa che il figlio si accingeva ad affrontare, preparò premurosamente la valigia del ragazzo, riempiendola di tutti i Pensieri di cui avrebbe avuto bisogno. Facendola breve, al momento di rientrare Alcmeda non c’era e per richiudere la valigia Er…Copy dovette comprimerla con tutta la sua forza.

• Settima fatica: catturare il Toro di Creta

• Ottava fatica: convincere un’agenzia di pubblicità ad assumerlo.

• Nona fatica: impossessarsi della cintura di Ippolita, regina delle Amazzoni

• Decima fatica: convivere con i momenti di delirio ed essere fermamente convinto di non essere pazzo.

• Undicesima fatica: arrivare all’ultima fatica che supera sicuro e avere il dubbio se c’è o no il lieto fine.

• Dodicesima fatica: far capire ad amici e parenti il suo lavoro.

Nessun lieto fine pare.

Alle sovrumane imprese si può attribuire anche un significato filosofico e allegorico che supera quello immediato di semplice narrazione di gesta eroiche: la figura d’Er…Copy può essere vista come un professionista della comunicazione, un pubblicitario, un ideatore di slogan. Infatti nonostante il nome
( copywriter), più che scrivere lui pensa e quando arriva il momento di scrivere deve farlo in modo conciso, diretto, semplice ed accattivante. Il copy deve inoltre saper indicizzare le pagine web, in modo che i suoi testi vengano trovati facilmente dai motori di ricerca: se non stai nella prima pagina di google con tutta probabilità, qualcosa è andato storto.

Queste doti, accompagnate da un’ottima conoscenza dell’italiano, sono le basi per intraprendere la carriera di Web Copywriter, ma non bastano. Serve tanta curiosità, essere informati su tutto, leggere e scrivere il più possibile e non guastano tra le skills , una buon livello d’Inglese, di linguaggio HTML, perché sapere come funziona un sito torna sempre utile e last but not least, una infarinatura dei CMS (tipo WordPress, Drupal, Joomla etc.).