- Credo che conoscere un po’ di html sia utile (anche) ai fini della seo. T’interessa impararlo un po’?
- Volentieri.
- Sai di che cosa si tratta?
- So solo che è il linguaggio con cui vengono scritti i siti.
- Più o meno, ma per adesso può andare. Ci ritorniamo dopo.
- Ok.
- E sai che cos’è un browser?
- Certo! È un’applicazione che serve per entrare sul Web.
- Perfetto! Qualche esempio?
- Chrome, Edge, Opera, Safari, FireFox, Tor.
- Esatto. Da non confondere con i motori di ricerca. Ma i browser fanno anche altre cose, tra cui tradurre i codici HTML per farci vedere i siti così come appaiono.
- Wow! Sembra molto filosofico, essenza e fenomeno.
- Lo sai che la filosofia è arrivata prima di altre discipline, soprattutto quella presocratica. Ma non divaghiamo.
- Esatto. In che modo traduce il codice?
- Poi te lo spiego. Partiamo con l’unità fondamentale del linguaggio HTML, i tag. Non li vediamo tutti i tag ma solo quelli più rilevanti per il nostro lavoro. Se t’interessa conoscere anche gli altri, ti rimando a questo sito.Un tag si scrive così. < Tag></tag>.Questi segni < > si chiamano parentesi angolari, ma quasi tutti dicono “segno di minore e segno di maggiore”, mutuando i termini dalla matematica. Questo /, invece, si chiama slash e si utilizza per la chiusura del tag. Se un tag rimane aperto il suo effetto di protrae fino alla fine del testo. Tra un tag e la sua chiusura, mettiamo la parola o le parole interessate. Il lettore non vede i tag ma solo il loro effetto sul testo. In questo senso traduce. Stai capendo?
- È ancora tutto molto teorico.
- Abbi pazienza. Ho detto che avremmo visto i tag più importanti. Ho preparato uno schema.
I TAG
Un tag si scrive così.
< Tag> Parola/Parole </tag>.
Naturalmente, al posto di tag bisogna mettere il tag che ci interessa. E invece di parola/parole ci sarà il testo effettivo. Userò dei testi fittizi anche nel resto dell’ articolo. Per esempio, il lorem ipsum.
Formattazione del testo
<b>Lorem ipsum</b>: testo in grassetto (Lorem ipsum); <strong>Lorem Ipsum </srong>
<i>Lorem ipsum </i>: testo in corsivo (Lorem ipsum); <em>Lotem Ipsum </em>
Più avanti, spiegherò la differenza tra <strong> e <b> tra <em> e <i>.
<u>Lorem ipsum </u>: testo sottolineato (Lorem ipsum)
ATTENZIONE: TUTTI GLI ESPERTI SCONSIGLIANO DI UTILIZZARE QUES’ULTIMO TAG perché le persone potrebbero pensare che si tratti di un link e quindi, non trovando nessun collegamento, rimanere deluse.
Elenchi
<ul>: elenco puntato </ul>
<ol> elenco numerato </ol>:
<li> : singole voci dell’elenco </li>
Puntati
<ul>
<li> gatto; </li>
<li> cane. </li>
</ul>
Effetto
- gatto;
- cane.
Numerati
<ol>
<li> gatto </li>;
</li> cane >/li>
Effetto
- gatto;
- cane.
Titoletti
<H1> Titolo </H1>
<H2> Titolo </h2>
<H3> Titolo </h3>
<h4> Titolo </h4>
<h5> Titolo </h5>
<h6> Titolo </h6>
Altri tag di formattazione
Hr
<hr>: Crea un linea sotto la riga della parola dopo cui viene messa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar mattis tincidunt. Etiam nec purus vel risus scelerisque varius. Morbi vulputate, est a pharetra dapibus, velit lorem cursus augue, ut consectetur arcu enim sit amet mi. Ut semper pretium ullamcorper. Suspendisse ornare neque vel massa pulvinar, ac pretium urna mattis. <hr>
Nunc sed tortor malesuada, rhoncus metus a, auctor purus. In hac habitasse platea dictumst. Curabitur fringilla turpis malesuada nulla mollis volutpat. Nullam placerat, leo eget lobortis mattis, libero felis tristique arcu, nec rutrum nibh nisl vitae sem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar mattis tincidunt. Etiam nec purus vel risus scelerisque varius. Morbi vulputate, est a pharetra dapibus, velit lorem cursus augue, ut consectetur arcu enim sit amet mi. Ut semper pretium ullamcorper. Suspendisse ornare neque vel massa pulvinar, ac pretium urna mattis.
Nunc sed tortor malesuada, rhoncus metus a, auctor purus. In hac habitasse platea dictumst. Curabitur fringilla turpis malesuada nulla mollis volutpat. Nullam placerat, leo eget lobortis mattis, libero felis tristique arcu, nec rutrum nibh nisl vitae sem.
Br
<br> Crea uno spazio sotto la riga della parola dopo cui viene messa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar mattis tincidunt. Etiam nec purus vel risus scelerisque varius. Morbi vulputate, est a pharetra dapibus, velit lorem cursus augue, ut consectetur arcu enim sit amet mi. Ut semper pretium ullamcorper. Suspendisse ornare neque vel massa pulvinar, ac pretium urna mattis. <br> Nunc sed tortor malesuada, rhoncus metus a, auctor purus. In hac habitasse platea dictumst. Curabitur fringilla turpis malesuada nulla mollis volutpat. Nullam placerat, leo eget lobortis mattis, libero felis tristique arcu, nec rutrum nibh nisl vitae sem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar mattis tincidunt. Etiam nec purus vel risus scelerisque varius. Morbi vulputate, est a pharetra dapibus, velit lorem cursus augue, ut consectetur arcu enim sit amet mi. Ut semper pretium ullamcorper. Suspendisse ornare neque vel massa pulvinar, ac pretium urna mattis.
Nunc sed tortor malesuada, rhoncus metus a, auctor purus. In hac habitasse platea dictumst. Curabitur fringilla turpis malesuada nulla mollis volutpat. Nullam placerat, leo eget lobortis mattis, libero felis tristique arcu, nec rutrum nibh nisl vitae sem.
ATTENZIONE: NON OCCORRE CHIUDERE QUESTI DUE TAG.
Link
<a href=”Url></a>
Questo tag te lo spiego a voce è un po’ complesso e perché è importantissimo Forse il più i serve: per inserire i link.
Come puoi vedere, dopo a href devi mettere l’indirizzo della pagina di destinazione.
Il lettore vede una parte di testo sottolineata e/o di un colore diverso dal resto e, se ci clicca sopra, si apre o un’altra pagina dello stesso sito o una pagina di un altro sito. Naturalmente, più avanti chiudo il tag a sarà lungo l’anchor text.
Possiamo anche mettere il collegamento a una sessione precisa di un articolo. Ad esempio, in questo caso il lettore non vedrà tutto il post ma solo la parte interessata. Questo avviene se si usa la tabella dei contenuti: se si clicca su un titoletto dell’indice si può notare che nella barra degli indirizzi (la striscia bianca in alto) si vede un url ancor più dettagliato.
Vi ricordo (perché ne ho già parlato) che la parte di testo su cui c’è il collegamento ipertestuale si chiama anchor text.
Rel
All’interno del tag a href possiamo inserire dei meta tag che servono da indicazione ai bot dei motori di ricerca. Queste indicazioni si danno tramite i rel,
I più importanti sono i rel ugc, no follow, sponsored, Target=”_blank” e canonical.
- Il primo si usa per indicare che si tratta di un contenuto creato da un utente. Di solito, lo mettiamo quando un lettore inserisce un link in un commento.
- Il no follow dice ai motori di ricerca di non seguire quel link, che non vogliamo passare del link juice a quella pagina. Qualcuno inserisce il rel follow, ma secondo me (e non solo) è superfluo perché i motori di ricerca compiono quelle due azioni di default.
- Sponsored indica che abbiamo ricevuto un compenso per mettere il link. È obbligatorio. Si può utilizzare insieme al rel no follow.
- Target=”_blank” fa sì che la pagina di destinazione si apra in una nuova scheda affianco a quella che l’utente sta leggendo. Nel caso contrario, si sovrappone. Chi utilizza un cms può farlo selezionando la voce “apri in una nuova scheda.
- Canonical.
METANAME
Ci sarebbe anche il tag meta name robots, ma lo vediamo un’altra volta perché merita un discorso a sé approfondito. Anche lui serve a dare indicazioni ai bot dei motori di ricerca.
AZIONE PASSIVA
Vai su una qualsiasi pagina web e digita Ctrl U. Si apre la schermata della sua sorgente, in cui trovate anche la struttura html della pagina. Potete fare anche così: tasto destro e seleziona la voce visualizza sorgente pagina.
A questo punto, puoi controllare che sia tutto a posto. Per aiutarti a orientarti meglio, ti consiglio di fare Ctrl F. Si apre una maschera in cui inserire l’elemento da ricercare. Per esempio, puoi copiare e incollare un titoletto per verificare che sia stato scritto con un head e non semplicemente in grassetto (capita!) e che sia stato scritto con l’head giusto.
AZIONE ATTIVA
Cms
Se utilizziamo piattaforme come Blogspot o WordPress, abbiamo la possibilità di entrare nell’html e di fare degli interventi. Chi usa WordPress deve cliccare su “testo” (in alto a destra). Chi usa Blogspot deve cliccare sull’icona della penna che si trova in alto a sinistra e selezionare “visualizzazione di html”.
Divertiamoci (Index.html)
Tuttavia, secondo me il modo migliore è creare una pagina in html. Se una cosa la sappiamo fare, probabilmente la sappiamo anche riconoscere.
Ecco le fasi più importanti.
- Creiamo una cartella e salviamola con il nome index.
- Cerchiamo e apriamo il blocco note. Se non lo troviamo, possiamo usare Word.
- Scriviamo <html>.
- Facciamo le prove con i tag.
- Salviamo prima come .txt-testo normale e poi come .html-tutti i file.
- A questo punto, dovresmmo vedere due icone, di cui una uguale a quella del browser. Clicchiamo sulla seconda per fare le verifiche.
- Ripetiamo le operazioni 5 e 6 dopo ogni modifica.
L’HTML NON BASTA
Naturalmente, per costruire una pagina web, anche simulata, non basta l’html. Occorre conoscere anche altri linguaggio come il java script e il CSS, che servono anche a darle la forma estetica. Conosco il CSS, ma non bene come l’html. Inoltre, li ho appresi insieme e quindi per me costituiscono un tutt’uno e non vorrei confondermi. In più, questo è un sito che si occupa di scrittura e non di creazione di siti. Infine, dobbiamo innanzitutto saper utilizzare i cms.
Come ho detto prima, l’html non è un linguaggio di programmazione ma un linguaggio di mark up. Significa che serve a formattare i testi e a creare collegamenti ipertestuali e che è riconosciuto universalmente. Pertanto, per fare, mettiamo, un testo in grassetto, tutti utilizzano il tag <b>. E il browser traduce quel tag mostrando al lettore un testo boldato.
L’html è stato creato da Tim Berners Lee, l’inventore del Web insieme a Robert Cailleau.
Non è l’unico linguaggio di mark up. Ne esistono anche altri. Un esempio è quello dei segni utilizzati dai correttori di bozze.
ACRONIMO
-
- Che cosa vuol dire html?
- Hypetext markup language.
- Che cos’è un hypertext?
- L’ipertesto è il testo tipico del Web, con i collegamenti tra le varie pagine o a documenti in formato pdf. Senza l’idea di ipertesto non esisterebbe il Web. Un testo scritto per un blog è diverso dal testo per il cartaceo. Anche quando le parole sono identiche. In primo luogo, per la formattazione. Ma soprattutto per la presenza dei link che portano ad altre risorse. Anche la lettura è diversa: sul web non è lineare come sul cartaceo perché. di click in click, possiamo visitare altre pagine. E quindi allontanarci completamente dal testo che stavamo leggendo. Ma anche ritornarci. In ogni caso, anche solo potenzialmente, i due tipi di approccio al testo sono molto diversi.
- In effetti. Mi viene in mente Wikipedia.
- Esattto.
- Wow.
- Paolo D’Alessandro, docente di Filosofia Teoretica alla Statale di Milano, ha detto che è la seconda rivoluzione più importante nella storia dell’unanità.
- La prima?
- La scrittura.
- Ok. Vedi che la Filosofia vince sempre?
- Infatti Ted Nelson è un filosofo, Nel 1965 formulò l’idea di un sistema software capace di archiviare documenti, articoli, annotazioni e varie informazioni per consentire sia agli autori che ai lettori di creare percorsi personalizzati e di navigare velocemente attraverso la rete informativa composta da documenti interconnessi. Va notato che i concetti fondamentali dei sistemi ipertestuali erano già stati teorizzati dagli anni ’50, mentre la prima applicazione pratica di dimensioni limitate, chiamata “augment”, fu proposta nel 1960 da Douglas Engelbart.