Accedi come Scuola



Guida HTML: il tuo Curriculum Vitae in HTML e altre Meraviglie

All’inizio di questo tutorial ti ho promesso che avremmo realizzato il tuo curriculum vitae in html e che lo avremmo messo online. Ebbene, questi sono i capitoli in cui mantengo la promessa.
Nel corso di questa lezione realizzeremo il sito-curriculum di una persona fittizia con un nome molto propizio: “Assunta Webber”.

Mentre realizzeremo questo curriculum, tu potrai prenderlo a esempio per realizzare il tuo:

Nota bene: la pagina di esempio qui sopra è anche responsive, ovvero in grado di adattarsi a schermi con diverse dimensioni, prova a restringere ed allargare la finestra del browser per metterla alla prova! 

Cominceremo anche a fare conoscenza coi concetti fondamentali per posizionare un sito sui motori di ricerca e di un altro po’ di tag html (div, span, strong, em e small)

.

Infine, nel corso della prossima lezione, sceglieremo il nome del dominio internet, lo registreremo su un servizio di hosting economico e pubblicheremo il tuo sito online.

Qualche preparativo...

Ogni curriculum vitae che si rispetti comincia con una propria foto, alcuni dati personali e i dati di contatto. Se non lo hai già fatto, procurati una tua immagine adatta per un cv in formato jpeg o png che non pesi più di 1MB (un megabyte), anche se sarebbe meglio che pesasse un centinaio di KB (kilobyte) al massimo.

E’ importante che le immagini sul web abbiano dimensioni contenute perché, dovendo essere trasmesse a ogni visitatore, esse influiscono enormemente sulla velocità di caricamento delle pagine web.

Se la tua immagine dovesse essere troppo grande o “pesante” in termini di memoria puoi utilizzare un qualsiasi programma di grafica per rimpicciolirla. Basta che abbia una larghezza e altezza di almeno 250px (pixel).

Mentre tu cerchi e/o prepari una foto adatta per il tuo curriculum vitae online, io devo trovare una foto per la nostra Assunta Webber. 



Parentesi: Trovare un’immagine che possa essere riutilizzata in un sito web

Mi serve dunque un’immagine di una giovane donna, che sia riutilizzabile.
La necessità di trovare un’immagine da poter riutilizzare in un proprio progetto è una situazione che si verifica spesso, pertanto documenterò brevemente il processo che seguirò.

Tramite Google è possibile effettuare una ricerca mirata a ottenere come risultato solo delle immagini:

Inoltre è possibile specificare che tali immagini debbano poter essere riutilizzate senza doverle acquistare:

La prima immagine non è ideale ma promette bene, mentre la seconda promette fin troppo. Complimenti comunque a entrambe per essere i primi due risultati della ricerca di “woman” (donna). 


Selezionando la prima immagine si scopre che essa è tratta da un sito che offre immagini libere da diritti di riutilizzo, www.pexels.com:

Cliccando su “Visita la pagina” si viene portati su tale sito ed è possibile esplorarlo sino a trovare un’immagine ideale.

Seguendo questo processo un po’ di volte mi sono imbattuto finalmente nell’immagine giusta, ti presento Assunta Webber:

Non male, eh?

Penso abbia alcune caratteristiche valide per una foto da curriculum vitae e io, credimi, ne vedo tante. A parte il fatto che non amo le braccia conserte (denotano una posizione di difesa) la ragazza si presenta bene, non è ammiccante, è vestita in modo professionale ed è su sfondo bianco. L’angolatura dall’alto è un po’ singolare ma aggiunge un tocco di originalità che non guasta mai.
Prendi pure spunto da questi consigli per la tua immagine :-).



Dai dati sotto la foto è possibile verificare che si tratta di una immagine in formato jpeg che pesa solo 58 kilobyte di dimensioni 500x500 pixel.

Prima di utilizzare una foto per i propri scopi è necessario identificarne bene la fonte e assicurarsi che i diritti di utilizzo della stessa lo consentano. Nello specifico questo ritratto è del fotografo Steve Wilson che ne ha autorizzato il riutilizzo secondo la licenza Creative Common linkata dalla sua pagina, a condizione che egli venga citato e linkato come autore (cosa che ho appena fatto :-)).

Presta sempre molta attenzione nell’usare immagini prese da altri siti perché infrangerne il copyright è un reato. Ecco perché, per quanto possibile, è meglio utilizzare immagini creati da noi stessi e quindi di nostra proprietà.

Ma ora basta guardare belle donne, torniamo al lavoro! 

La struttura di un progetto Web

Ora che ti sei procurato una tua foto adatta per il curriculum vitae, siamo pronti a realizzarlo. Per prima cosa crea la cartella “lezione-4” sul tuo workspace e, all’interno di essa, crea la sottocartella “curriculum-vitae”:

La cartella “curriculum-vitae” che hai appena creato, essendo la cartella preposta a contenere tutti i file del progetto, prende il nome di cartella “ROOT”(radice).
Per convenzione la pagina principale di un progetto deve trovarsi all’interno della sua cartella ROOT e chiamarsi “index”(indice), quindi crea il file "index.html" all'interno di "curriculum-vitae" con tutta l’ormai consueta struttura:

Nota bene: quando visiti un sito web, per esempio caratterispecialihtml.com, dopo che hai inserito il suo indirizzo nella barra degli indirizzi del browser e premuto invio, “dietro le quinte” accade, in estrema sintesi, quanto segue:

  1. Il browser effettua una richiesta alla rete internet tramite il protocollo HTTP (HyperText Transfer Protocol il protocollo o “insieme di regole” per il trasferimento di ipertesti attraverso ) per ottenere l’indirizzo fisico del server richiesto (il computer remoto sul quale si trova il sito che vuoi visitare, in questo caso: "caratterispacialihtml.com")
; 
  2. La rete internet, mediante il servizio noto come DNS (Domain Name System) recupera l’indirizzo IP (Internet Protocol address) del server su cui si trova caratterispecialihtml.com
; 
  3. La richiesta del browser viene instradata dalla Rete Internet in modo tale che raggiunga il server che ospita il sito caratterispecialihtml.com;

  4. Il server di caratterispecialihtml.com riceve la richiesta di visualizzare la prima pagina della ROOT del sito e, se non è programmato diversamente, per convenzione risponderà inviando al browser il contenuto del file caratterispecialihtml.com/index.html

  5. Il browser elabora il file html ricevuto e renderizza la pagina web (trasforma il codice html ricevuto nel risultato finale che vedi).


Questi concetti saranno approfonditi in seguito, per ora ti basti sapere che la pagina index.html è per convenzione la prima che sarà mostrata ai visitatori del tuo sito.

Un pizzico di SEO: definizioni e concetti indispensabili


Un progetto che ambisca a posizionarsi ai primi posti dei risultati Google per la ricerca di alcune parole chiave ben precise, tuo nome in primis, non può prescindere da alcune prioritarie considerazioni sul funzionamento dei motori di ricerca e sulle tecniche per posizionarsi in alto sugli stessi.



La disciplina che si occupa del posizionamento sui Motori di Ricerca (Google, Bing, Yahooo etc.) prende il nome di SEO, da Search Engine Optimization, letteralmente: “ottimizzazione dei motori di ricerca”, nome abbastanza strano perché, in realtà, sono i siti a essere ottimizzati, non i Motori di Ricerca (di seguito indicati con la sigla: MdR).

La prima cosa da valutare bene quando si inizia un progetto web con l’intento di posizionarlo sui MdR sono le keyword (parole chiave).

Questo perché, in estrema sintesi, i MdR funzionano visitando tutte le pagine web che riescono a trovare e creandosi un indice degli argomenti trattati in ciascuna di esse.
Puoi immaginare che l'indice all'interno di un MdR sia una tabella con tre colonne principali:

  1. URL: indirizzo di ciascuna pagina web conosciuta dal MdR

  2. Keywords: parole chiavi o argomenti trattati in ordine di importanza in ciascun URL

  3. Rank: importanza della pagina rispetto alle altre che trattano gli stessi argomenti

Indice del MdR (es. Google)
URL Keywords Rank
http://nemboweb.com/corsi/webmaster-tutorial
  • webmaster
  • tutorial
  • html
  • corso gratuito
  • guida
  • seo
  • css
  • etc...
5
http://nemboweb.com/corsi/webmaster-tutorial/guida-html
  • guida html
  • tutorial
  • corso
  • imparare html
  • etc...
4
http://altrositoacaso.com/blog/articolo-su-sintassi-html
  • html
  • sintassi html
  • come scrivere html corretto
  • etc...
4
...milioni e milioni di altre pagine web...

I motori di ricerca sono in grado di crearsi un simile indice interno grazie all’impiego di alcuni programmini, conosciuti generalmente come  “crawler” o “bot” in grado di visitare un enorme numero di pagine web seguendo tutti i link che le collegano fra loro e raccogliendo una serie di informazioni su ciascuna di esse.

Quando vai su Google e cerchi, per esempio, le parole: “webmaster tutorial guida html”, Google non farà altro che controllare nel proprio indice i risultati più appropriati per rispondere alla tua richiesta, quindi te li presenterà in una pagina in cui sono ordinati in ordine di importanza. Tale pagina dei risultati prende il nome di SERP da Search Engine Result Page (Pagina dei Risultati del Motore di Ricerca) mentre le parole che hai digitato per ottenerla prendono il nome di query (richiesta).

Un esempio di SERP in risposta alla query “webmaster tutorial guida html” è la seguente:

Il funzionamento descritto è davvero molto semplificato, in realtà i criteri presi in considerazione da Google per stabilire l’importanza di una keyword all’interno di una pagina web e l’importanza della pagina web stessa sono attualmente oltre 200 e il loro funzionamento preciso è ovviamente segreto.

Nel corso di questo progetto i concetti SEO saranno accennati al solo scopo di spiegare il perché di alcune scelte effettuate nel realizzare il curriculum vitae online; avremo modo di approfondirli più nel dettaglio più avanti, nel capitolo a essi dedicato. Intanto però, prima di proseguire, ti suggerisco di guardare questi brevi video sul funzionamento di Google (e dei MdR in generale). 

SEO: Tutto inizia dalle keyword

Vogliamo che il tuo curriculum vitae si posizioni in alto nelle SERP per la ricerca del tuo nome completo e per quello che stai imparando a fare: il webmaster. 

Quelle appena sottolineate sono le keyword principali di cui tener conto nel corso di tutto il progetto.

Altre keyword molto utili in questo caso sono il nome della città e della provincia in cui ti trovi, perché spesso gli utenti dei motori di ricerca vogliono assicurarsi di trovare delle risorse vicine anche dal punto di vista geografico.

Nel mio caso, ipotizzando che Assunta Webber sia una milanese, desidero che la mia pagina si posizioni bene per le seguenti query (in ordine di importanza):

  • assunta webber

  • assunta webber milano

  • assunta webber webmaster

  • assunta webber curriculum vitae

  • assunta webber cv


….e tutte le altre combinazioni possibili.

SEO: Il Titolo della Pagina 


La prima cosa da impostare bene è il titolo della pagina nel tag title. Esso è un dato preso molto in considerazione dai motori di ricerca, pertanto deve contenere le keyword principali. Se vuoi comparire nei risultati per la ricerca del tuo nome, è bene impostarlo di conseguenza.

Inoltre il contenuto del tag title è proprio il titolo che compare nei risultati di ricerca di Google, pertanto è bene che sia conciso (massimo 70 caratteri) e descrittivo.

Per esempio, per la ricerca di “webmaster tutorial nemboweb” compare questo risultato:

Il titolo del risultato “WebMaster Tutorial - NemboWeb” è esattamente il contenuto del tag title di quella pagina (nemboweb.com/corsi/webmaster-tutorial).

Per il mio progetto ho impostato come title della pagina: “Assunta Webber | WebMaster CV”.

Ho preferito non scrivere “Curriculum Vitae” per esteso perché è una keyword poco utilizzata dagli utenti che cercano informazioni su una persona, inoltre i motori di ricerca sono abbastanza intelligenti da capire che “cv”, in determinati contesti, voglia dire “curriculum vitae”.

Non ho aggiunto anche la keyword “Milano” perché la ritengo una keyword meno importante: dopotutto voglio che Assunta Webber possa ricevere richieste anche da altre città. Uno dei lati positivi del lavoro di Webmaster è che si può farlo da qualsiasi paese del mondo dotato di una connessione internet e, comunque, città e provincia troveranno spazio nei dati di contatto. 



Sezioni ‘Profilo e Dati di Contatto’

Crea una cartella “immagini” sotto a “curriculum-vitae” e in essa carica la tua foto. Per caricare un file nel tuo workspace, ti ricordo che ti basta spostarlo con un drag and drop nella cartella che desideri… come abbiamo fatto nel precedente tutorial.

Inoltre ti consiglio di rinominare il file in modo tale che contenga solo caratteri minuscoli e trattini, perché le lettere maiuscole e gli spazi nei nomi dei file delle applicazioni web possono causare problemi di compatibilità.

Ecco la struttura che devi ottenere:

Finalmente possiamo iniziare a scrivere codice HTML.

Il codice all’interno del body è diviso in due sezioni.

La prima sezione, dalla riga 10 alla riga 15, contiene un profilo sintetico, la seguente tabella contiene una serie di considerazioni SEO per ciascuna riga.

# Descrizione Considerazioni SEO
10 Immagine del profilo inserita con tag img Il MdR prende in considerazione il nome del file “assunta-webber.jpg” e l’attributo alt del tag img “assunta webber webmaster”.
11 Nome Completo in tag h1 Il MdR sa che il tag h1 è quello riservato ai titoli principali, quindi la keyword “assunta webber” è presa in particolare considerazione.
12 La tua qualifica in tag h2 il tag h2 è poco meno importante del tag h1, pertanto la qualifica di “webmaster junior” sarà sicuramente presa in considerazione, seppur in misura inferiore al tuo nome completo (nell'esempio, "assunta webber"). Inoltre la keyword “webmaster” compare anche nel title alla riga 4, il che gli conferisce una importanza o, come si dice, un peso ulteriore.
14 Luogo e data di Nascita in tag p Il paragrafo contiene la keyword “milano” che è di nostro interesse. Tuttavia bisognerà trovare il modo di conferirgli un peso maggiore.

 

La seconda sezione contiene invece i dati di contatto.

Dal punto di vista SEO l’unico dato interessante è quello dell’indirizzo postale perché i MdR sono in grado di riconoscere gli indirizzi postali completi e utilizzarli per mettere in relazione il contenuto di una pagina web con un’area geografica. Ciò conferisce un peso maggiore alla keyword “milano”.



Per questo motivo, a meno di controindicazioni, ti consiglio di pubblicare il tuo indirizzo completo. Ovviamente, però, valuta bene quali dati rendere pubblici!

Considera anche che, purtroppo, le email e i numeri di cellulare che pubblichi potrebbero essere oggetto di spam. Questo avviene perché scrivere dei programmini simili a quelli utilizzati dai motori di ricerca (i “crawler” o “bot”) in grado di ricavare informazioni personali allo scopo di inondare il malcapitato di pubblicità indesiderata è fin troppo facile.

Tutti questi “spam bot” hanno in comune la capacità di riconoscere e raccogliere i dati sensibili sulla base di come sono scritti. Tale principio di funzionamento presenta dei punti deboli o “vulnerabilità” che possono essere utilizzati per difendersi. Un classico esempio sono i test CAPTCHA per “dimostrare di essere un umano” prima di poter accedere a determinate funzioni di un sito web come, ad esempio, quello già incontrato per registrarsi su Cloud9.

Nel capitolo-tutorial su Javascript impareremo a sfruttare tale vulnerabilità per proteggere i nostri dati personali.

Il risultato che abbiamo ottenuto finora è il seguente:

Nota bene:

  • Alla riga 24 ti ho fatto vedere come puoi inserire anche un numero di cellulare, se lo desideri. Negli esempi di seguito sarà eliminato.

  • Nelle immagini di anteprima lo sfondo potrebbe essere bianco o grigio a seconda che il file venga effettivamente aperto in una scheda del browser o come anteprima all’interno del tuo workspace.


Style: una immagine più proporzionata

Nel capitolo precedente ti ho mostrato come utilizzare l’attributo style all’interno di un tag img per definire la dimensione dell’immagine. Agendo in tal senso sulla riga 10 è possibile impostare una dimensione più appropriata per la foto profilo, qualora essa lo richieda. Per la nostra Assunta ho impostato una width (larghezza) di 250 px:

Ottenendo questo risultato più proporzionato:

Sarebbe ancora più gradevole poter posizionare i contatti alla destra del profilo o, in altre parole, affiancare alla sezione 1 la sezione 2.

Nel precedente tutorial abbiamo posizionato gli elementi di una pagina web utilizzando una tabella, tuttavia ti ho già accennato che tale modo di fare è caduto in disuso a seguito dell’introduzione di un tag html apposito, il div.

DIVidi e impera

Ipotizziamo di voler spostare affiancare la sezione dei contatti a quella del profilo, così:

Certamente la strada verso una pagina graficamente gradevole è ancora lunga, ma questo è il primo passo.

Per ottenere questo effetto senza utilizzare le tabelle ci serve un modo per identificare una sezione del documento HTML e poterne successivamente definire la posizione e altre sue proprietà.

Il tag HTML che serve proprio a questo scopo si chiama div, da “Document Division Element” (Elemento di Divisione del Documento). 

Possiamo utilizzare il div per suddividere il documento nelle due sezioni che abbiamo identificato, così:

Nota bene:

  • i tag div di apertura e chiusura alle righe 9, 17, 19 e 31;
  • l’indentazione del codice all’interno dei div.

Ora possiamo assegnare, tramite il linguaggio CSS, delle regole di stile a ciascuno dei due div.
 
Per adesso non cercare di imparare il linguaggio CSS (le regole di stile scritte all’interno dell’attributo style), esso sarà trattato nel dettaglio più avanti, nei capitoli a esso dedicati. Ora sarà utilizzato solo per mettere in evidenza il funzionamento dei tag HTML, che è l’unica cosa su cui devi concentrarti adesso.

Il primo desidero che si posizioni sulla sinistra del documento, mentre il secondo deve posizionarsi a destra. Pertanto, al primo assegnerò la regola di stile “float:left”, mentre al secondo la regola “float:right”.

Osservando il risultato col browser noterai che la prima sezione si posiziona effettivamente a sinistra mentre la seconda sezione a destra della pagina:

Per tenere i due div insieme posso definire un terzo div che contenga tutto il documento e assegnargli una larghezza massima, quindi posso definire quanto spazio deve occupare ciascuna delle due sezioni. Ecco un esempio:

In esso è stabilito che il contenitore principale abbia una larghezza di 500px (riga 8) e che i due div al proprio interno ne occupino rispettivamente il 60% (riga 10) e il 40% (riga 22). Salva e apri il file in anteprima per verificare di aver ottenuto il risultato desiderato.

Per mettere in maggiore evidenza i div possiamo assegnare loro due colori di sfondo diversi: al primo assegnerò il colore di sfondo giallo e al secondo il colore di sfondo arancione.

Prima di proseguire crea il file “dividi-e-impera.html” all’interno della cartella “lezione-4” e copia al suo interno il contenuto attuale del file index.html:

In esso effettua le seguenti modifiche:

  • riga 4: aggiorna il title in “Esempio di utilizzo dei DIV”
  • riga 10: aggiungi al div la regola di stile “background-color:yellow” separandola dalle regole precedenti con un “;”
  • riga 21: aggiungi al div la regola di stile “background-color:orange”

Salvando e aprendo il file col browser si potrà osservare il seguente risultato:

In cui i due div appaiono con colori di sfondo diversi.

Nota: se il browser non è in grado di trovare un’immagine (perché magari il percorso non è corretto) la sostituisce con il testo alternativo, ovvero il contenuto del suo attributo alt.
Ad esempio, se modifichiamo il percorso della nostra foto profilo con un uno errato:

Otteniamo questo risultato:

Ti ricordo che il codice completo del file è consultabile nella repository del materiale didattico

Modifiche a SPANne

Oltre ai div esiste un altro tag HTML fondamentale per identificare e agire su porzioni diverse di codice: lo span, parola che in inglese significa molte cose. A differenza dei div, che agiscono su blocchi di codice HTML composti da diversi elementi, gli span agiscono solo su porzioni di testo in linea. 

Ipotizziamo, per esempio, di voler scrivere la seguente frase colorando con colori diversi alcune parole:

 In un cielo arancione e rosa un rosso sole tramonta su un mare blu.


Per prima cosa crea il file “modifiche-a-span.html” nella “lezione-4” coi seguenti contenuti:

Per colorare la parola “arancione” di arancione possiamo inserirla all’interno di uno span…

...e poi assegnargli la regola di stile “color:orange”:

Il risultato in anteprima è il seguente:

Esercizio 1.4.2

Sapendo che in inglese:

  • “rosa” si dice “pink”,
  • “rosso” si dice “red”,
  • “blu” si dice “blue”.

Utilizza gli span e le opportune regole di stile per ottenere il seguente risultato:

(Se sei daltonico sappi che ho semplicemente colorato i nomi dei colori coi rispettivi colori)

 


SOLUZIONE



Il file modifiche-a-span.html con la soluzione è disponibile anche qui.

Fatta la conoscenza dei tag div e span, torniamo a lavorare sul curriculum.
Per prima cosa elimina tutti gli stili aggiunti temporaneamente ai tag div; in altre parole, cancella tutti gli attributi “style” che abbiamo inserito nei tag div, in modo da tornare a questa situazione:

<!DOCTYPE html>
<html>
  <head>
    <title>Assunta Webber | WebMaster CV</title>
    <meta charset="utf-8"/>
  </head>
  <body>
    <div> <!-- Contenitore Principale -->
      <!-- Sezione 1: Il Profilo -->  
      <div> 
        <img style="width:250px;" src="immagini/assunta-webber.jpg" 
          alt="Assunta Webber WebMaster" />
        <h1>Assunta Webber</h1>
        <h2>WebMaster Junior</h2>
        <p>
         Nata a Milano il 01 maggio 1990
        </p>
      </div> <!-- fine Sezione 1 -->
      
      <div>
        <!-- Sezione 2: I dati di Contatto --> 
        <h2>Contatti</h2>
        <p>
          Tel.: 800 98 46 81 
        </p>
        <p>
          Email: [email protected]
        </p>
        <p>
          Domicilio: Via Paolo Sarpi 8, 20154 Milano (MI) 
        </p>
      </div> <!-- fine Sezione 2 -->
      
    </div> <!-- fine Contenitore Principale -->    
  </body>
</html>

 


Sezione ‘Chi Sono’

Ogni CV che si rispetti inizia con una breve presentazione.
Aggiungi una sezione all’interno di un div e racconta brevemente di te:

All’interno di questo testo potrebbero esserci delle parole utili dal punto di vista della SEO. Nel mio caso vorrei che il MdR notasse particolarmente le seguenti parole chiave:

  • assunta webber
  • curriculum vitae in html
  • corso gratuito

Posso farlo utilizzando i tag strong ed em.

SEO: Sii forte o audace, enfatico o italico

Il tag strong (forte) si comporta in modo del tutto simile al già noto tag b (iniziale di bold, che in inglese vuol dire sia grassetto, sia audace) ma, a differenza del tag b esso ha anche una valenza semantica. In altre parole, mentre il tag b serve solo a comunicare al browser che alcune parole vanno rese in grassetto, il tag strong serve anche a comunicare che quelle parole sono particolarmente importanti.

Lo stesso principio vale per il tag em (da emphasis, enfasi) e il già noto tag i (iniziale di italic, italico o corsivo).

Con ogni probabilità i MdR sono in grado di cogliere la differenza.

Ricordati pertanto che quando vuoi solo segnalare una modifica tipografica a un browser devi utilizzare i tag b e i, mentre quando vuoi anche segnalare che determinate parole sono particolarmente importanti, utilizza i tag strong ed em.

Alla luce di quanto appena appreso, puoi modificare la sezione “chi sono” nel modo seguente:

Lo stesso principio può essere applicato alle prime due sezioni, in cui ho aggiunto alcune parole in grassetto ed enfatizzato delle altre.

Segue una tabella con la spiegazione delle modifiche in ottica SEO:
 

Analisi delle Modifiche
Riga Descrizione Considerazioni SEO
16 Aggiunti tag b e strong Le parole “Nata a” sono state rese in grassetto, mentre la parola “Milano” è stata marcata col tag strong per segnalarla ai MdR. 
24
27
30
Aggiunti tag b Nessuna considerazione, l’aggiunta del tag b ha un effetto puramente stilistico nel rendere determinate parole in grassetto.
30 Aggiunto tag em Essendo “milano” una keyword importante, la parte finale dell’indirizzo è stata marcata col tag em.

Il risultato a Browser è il seguente:

Particolarmente significativa è la stringa di testo “Nata a Milano”, relativa alla riga 16. Si noti come dal punto di vista del browser l’utilizzo del tag b o del tag strong è indistinguibile, eppure dal punto di vista semantico è stato sottolineato che “Milano” è più importante di “Nata a”. 

Sezione ‘Esperienze Professionali e Formazione’

Per descrivere le tue esperienze professionali e la tua formazione puoi aggiungere due sezioni con questa struttura:

Nota bene:

  • “lorem ipsum…” è un testo segnaposto che si utilizza quando si vuole presentare come sarà l’aspetto di un lavoro, per esempio di una pagina web, ma non si hanno ancora a disposizione i testi definitivi. Maggiori informazioni sono disponibili qui. Ovviamente al posto delle frasi “lorem ipsum” puoi già scrivere le tue informazioni.
  • Alla riga 67 ho inserito un commento utilizzando la dicitura “TODO” che in inglese significa (da fare) ed è una convenzione usata nel mondo dell’informatica come promemoria di un lavoro che sarà completato in seguito. Nello specifico stai per inserire una tabella relativa alla tua conoscenza delle lingue straniere

Esercizio 1.4.4 TODO tabella

Alla riga 67, al posto del commento, puoi inserire una tabella, utilizzando il tag table come appreso nel precedente tutorial, con lo scopo di ottenere un risultato simile a questo:


POSSIBILE SOLUZIONE


Sezione ‘Portfolio Lavori’

Se hai già realizzato dei lavori in passato che vuoi citare, puoi inserire una sezione con una struttura simile a questa:

Ovviamente le immagini linkate devono essere prima caricate nella cartella “immagini”.

Sezione ‘Interessi e Progetti futuri’

Puoi inserire una sezione per parlare dei tuoi interessi e dei tuoi progetti futuri simile a questa:

Nell’aggiungere tutte queste informazioni ricordati di utilizzare correttamente i tag di cui hai appena fatto conoscenza, per sottolineare le parole chiave di particolare importanza.

Sezione ‘Disclaimer’

Affinchè tutti i tuoi potenziali datori di lavoro possano utilizzare i dati contenuti nel tuo curriculum vitae, devi inserire la dichiarazione che segue in calce allo stesso:

“Autorizzo il trattamento dei dati personali contenuti nel mio curriculum vitae in base art. 13 del D. Lgs. 196/2003”

Puoi farlo copiando il seguente codice e inserendola come ultima sezione del tuo cv:

<div>
  <small>Autorizzo il trattamento dei dati personali contenuti nel mio curriculum vitae in base art. 13 del D. Lgs. 196/2003.</small>
</div>

Esso fa uso del tag small (piccolo) che ha una funzione inversa rispetto ai tag strong ed em, infatti serve a marcare un testo come meno importante e a renderlo più piccolo.

Ultimi ritocchi: miglioriamo i contatti

E’ molto importante che il tuo curriculum vitae renda il più semplice possibile contattarti.
Nel cv abbiamo inserito il tuo numero di telefono e la tua email, sarebbe utile renderli cliccabili in modo che basti un click per far partire una telefonata o per aprire il programma di posta col tuo indirizzo email già impostato come destinatario.

Email cliccabile

E’ possibile rendere l’email cliccabile utilizzando il tag a e impostando il suo attributo href in questo modo:

La sintassi da utilizzare è la seguente:

<a href=”mailto:[indirizzo email]”>[testo cliccabile]</a>


Prova a rendere cliccabile la tua email allo stesso modo, poi apri la pagina in anteprima e cliccaci sopra per verificare che il tuo computer apra (o ti proponga di aprire) il tuo client di posta per inviare un’email all’indirizzo impostato nell’attributo href.

Numero di telefono cliccabile

E’ possibile rendere cliccabile anche il numero di telefono utilizzando nuovamente tag a e impostando il suo attributo href in questo modo:

La sintassi è la seguente:

<a href=”tel:[numero di telefono senza spazi]”>[testo cliccabile]</a>

Puoi applicare questa migliorìa ai numeri di telefono che hai inserito, quindi prova a visitare la pagina di anteprima con un cellulare e a cliccare sul numero di telefono per verificarne il funzionamento.
Per visitare la pagina con un cellulare assicurati di seguire gli stessi passaggi utilizzati nel primo tutorial HTML.

Un po’ di magia!

Complimenti per essere arrivato fin qui, per premiarti voglio mostrarti la potenza del linguaggio CSS regalandoti un foglio di stile che abbiamo preparato per il tuo curriculum vitae. 
Devi sapere, infatti, che le regole di stile, oltre a poter essere inserite all’interno degli attributi style come abbiamo fatto finora, possono anche essere scritte in un file a parte, che prende il nome di “foglio di stile” e che può essere richiamato da ogni file HTML.

Per applicare il nostro foglio di stile assicurati innanzitutto di rimuovere tutti gli stili impostati, in particolare:

  • la dimensione dell’immagine del profilo;
  • l’attributo “border dal tag table;
  • ogni altro attributo style in qualsiasi tag.

In pratica devi assicurarti di avere una struttura del file del tutto simile alla seguente, con un elemento div che contiene tutte le altre sezioni, ciascuna delle quali è a sua volta contenuta in un elemento div:

<!DOCTYPE html>
<html>
  <head>
    <title>Assunta Webber | WebMaster CV</title>
    <meta charset="utf-8"/>
    <meta name="description" 
    content="Quello che scrivo qui va a finire direttamente nella SERP appena sotto al TITLE" />

  </head>
  <body>
    <div> <!-- Contenitore Principale -->
      <!-- Sezione 1: Il Profilo -->  
      <div> 
        <img src="http://nemboweb.github.io/WebMaster-Tutorial-Files/HTML/lezione-4/curriculum-vitae/immagini/assunta-webber.jpg" alt="Assunta Webber WebMaster" />
        <h1>Assunta Webber</h1>
        <h2>WebMaster Junior</h2>
        <p>
          <b>Nata a</b> <strong>Milano</strong> il 01 maggio 1990
        </p>
        <p><small>Picture by <a href="https://www.flickr.com/photos/[email protected]/14365668676/">Steve Wilson</a>.</small></p>
      </div> <!-- fine Sezione 1 -->
      
      <div>
        <!-- Sezione 2: I dati di Contatto --> 
        <h2>Contatti</h2>
        <p>
          <b>Tel.:</b> <a href="tel:800984681">800 98 46 81</a> 
        </p>
        <p>
          <b>Email:</b> <a href="mailto:[email protected]">[email protected]</a>
        </p>
        <p>
          <b>Domicilio:</b> Via Paolo Sarpi 8, 20154 <em>Milano (MI)</em> 
        </p>
      </div> <!-- fine Sezione 2 -->
      <!-- Altre Sezioni -->
      <div> 
        <h2>Chi sono</h2>
        <p>
          <strong>Assunta Webber</strong> è un personaggio fittizio creato allo scopo di illustrare
          il processo di realizzazione di un <em>curriculum vitae in HTML</em> nell'ambito del
          <strong>corso gratuito</strong> 
          "<a href="http://nemboweb.com/corsi/webmaster-tutorial">WebMaster Tutorial</a>" a cura di 
          <a href="http://nemboweb.com">NemboWeb</a>.<br />
        </p>
      </div>
      
      <div>
        <h2>Esperienze professionali</h2>
        <h3>2015</h3>
        <p>lorem ipsum dolor sit amet lorem ipsum dolor sit amet orem ipsum 
        dolor sit amet lorem ipsum dolor sit amet </p>
        <h3>2013-2014</h3>
        <p>lorem ipsum dolor sit amet lorem ipsum dolor sit amet </p>
        <h3>2009-2013</h3>
        <p>lorem ipsum dolor sit amet lorem ipsum dolor sit 
        amet lorem ipsum dolor sit amet </p>
        <h3>2008</h3>
        <p>lorem ipsum dolor sit amet lorem ipsum dolor sit amet </p>
      </div>

      <div>
        <h2>Formazione</h2>
        <h3>2015</h3>
        <p>lorem ipsum dolor sit amet lorem ipsum dolor sit amet </p>
        <h3>2013-2014</h3>
        <p>lorem ipsum dolor sit amet lorem ipsum dolor sit amet </p>
        
        <h3>Lingue Straniere</h3>
        <table>
          <tr>
            <th>Lingua</th>
            <th>Livello</th>
          </tr>
          <tr>
            <td>Inglese</td>
            <td>Buono</td>
          </tr>
          <tr>
            <td>Spagnolo</td>
            <td>Base</td>
          </tr>
        </table>
      </div>
      
      <div>
        <h2>Portfolio lavori</h2>
  
        <div>
          <img src="immagini/progetto.jpg" />
          <h3>Sito in portfolio</h3>
          <h4>Nome cliente</h4>
          <p>lorem ipsum dolor sit amet lorem ipsum dolor sit amet </p>
          <a href="#" target="_blank">Vai al sito</a>
        </div>
  
  
        <div>
          <img src="immagini/progetto.jpg" />
          <h3>Sito in portfolio</h3>
          <h4>Nome cliente</h4>
          <p>lorem ipsum dolor sit amet lorem ipsum dolor sit amet </p>
          <a href="#" target="_blank">Vai al sito</a>
        </div>
  
  
        <div>
          <img src="immagini/progetto.jpg" />
          <h3>Sito in portfolio</h3>
          <h4>Nome cliente</h4>
          <p>lorem ipsum dolor sit amet lorem ipsum dolor sit amet </p>
          <a href="#" target="_blank">Vai al sito</a>
        </div>
      </div>

      <div>
        <h2>Interessi</h2>
        <ul>
          <li>Interesse 1</li>
          <li>Interesse 2</li>
          <li>Interesse 3</li>
          <li>Etc... </li>
        </ul>
        
        <h2>Progetti futuri</h2>
        <p>
          lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem 
          ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor
          dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet. 
        </p>
      </div>

      <div>
        <small>Autorizzo il trattamento dei dati personali contenuti nel mio 
        curriculum vitae in base art. 13 del D. Lgs. 196/2003.</small>
      </div>
    </div> <!-- fine Contenitore Principale -->    
  </body>
</html>

Ora, nella sezione head della pagina aggiungi solo queste due righe di codice:

<link rel="stylesheet" type="text/css" href="https://nemboweb.github.io/WebMaster-Tutorial-Files/risorse/style.css">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

La prima riga serve a richiamare le regole di stile contenute nel file che abbiamo preparato per te, mentre la seconda riga si occupa di impostare alcuni parametri utili a rendere la pagina responsive ovvero visualizzabile al meglio anche sugli schermi di piccole dimensioni, come quelli dei cellulari.

Ecco un esempio:

(L'ordine in cui si inseriscono le righe di cui sopra non è importante)

Sempre per il fatto che stiamo operando in locale, non potrai vedere effettivamente il risultato con i css. Ma puoi vedere un esempio di come verrebbe visualizzato qui: curriculum vitae con una bella grafica e uno stile del tutto simile a questo.

Nota bene: lo stile applicato è responsive, ovvero si adatta alla dimensione dello schermo del visitatore; prova a restringere e allargare la finestra del browser per vedere come cambia la disposizione delle prime due sezioni.

Facci sapere se ci sei riuscito condividendo questa pagina oppure nei commenti!

Grazie mille!

Note Conclusive

In questo capitolo abbiamo messo in pratica tutte le nozioni finora apprese di HTML, sono stati introdotti i primi concetti SEO e gli ultimi tag HTML fondamentali che mancavano: div, span, strong, em e small. Inoltre è stata data una dimostrazione della potenza del linguaggio CSS, che sarà approfondito in seguito.

Ti ricordo che tutti i file della lezione sono disponibili qui. Se sei curioso e vuoi vedere com’è fatto il foglio di stile che ti ho fatto linkare alla fine del capitolo, puoi trovarlo qui.

Nel corso del prossimo tutorial vedremo come scegliere un nome di dominio adatto al tuo progetto, come registrarlo su un servizio di hosting e come utilizzarlo per mettere online il curriculum appena realizzato. 

»Vai al prossimo Tutorial: Scelta e Registrazione del tuo Dominio Internet.

Che ne dici?

Scritto da

Duccio Armenise

Founder Corsidia & co-Founder WorldBridge

Aiuto solo i migliori Maestri a trovare i loro prossimi Studenti. Come? Così! :)

Per

Corsidia

I tuoi prossimi Studenti ti stanno già cercando, tu ci sei?