Corso HTML5 e CSS

Trascrizione della lezione:

La tipografia

Ciao a tutti, sono Andrea Ruggieri e in questa lezione affronteremo il concetto di tipografia. La scrittura è uno dei pilastri di un sito web. Il motivo è legato al fatto che il contenuto testuale che viene proposto, oltre ad essere ben strutturato ed organizzato, deve essere presentabile. Un testo scritto in maniera accattivante e pertinente al contesto che viene proposto rende il contenuto più fruibile e garantisce una maggiore attenzione da parte del lettore. Per far fronte a questa esigenza, ci viene incontro la tipografia che ci aiuta a migliorare l’aspetto, il colore e altre caratteristiche del nostro testo.

Fatta questa opportuna premessa illustriamo alcuni concetti di base: i caratteri, ad esempio, possono cambiare la loro visualizzazione a seconda del dispositivo o del browser nel caso in cui il sito sia responsive, cioè quando l’interfaccia del sito si adegua allo schermo del dispositivo, ma noi ci concentreremo su cose molto semplici e basilari come, stili, grandezze e formattazione.

Aumentare la leggibilità del testo in una pagina è molto importante, magari ad esempio sottolineando determinate parole e frasi, ingrandire il testo per evidenziarlo, ecc. .

I vari tipi di tipografia

Ci sono diversi tag HTML per far si che il testo si veda in un determinato modo:

• Grassetto » Il grassetto è utilizzato per mettere in risalto il testo.
  Il tag che si utilizza è il <b>, ad esempio: <b>Grassetto</b>

• Corsivo » Il corsivo non è più molto utilizzato perché si è notato che non migliora affatto la leggibilità del testo ma, anzi la peggiora. Questo tag HTML è chiamato Italic per ricordare la torre di Pisa che è pendente da un lato. Il tag in questione è <i> ed è mostrato nel seguente esempio : <i>Corsivo</i>

• Sottolineato » Il sottolineato è utilizzato per sottolineare il testo, ad esempio: <u>Sottolineato</u>

• Barrato » Il barrato viene utilizzato ad esempio per rimuovere un elemento da una lista, senza però cancellarlo. Il tag HTML corrispondente è <s>, ad esempio:
  <s>strike</s>

Fatta questa prima infarinatura di concetti legati alla tipografia, nella prossima lezione affronteremo il concetto di paragrafo. A presto!

Trascrizione della lezione:

Stili e grandezze

Headings, i titoli h1, h2, h3, etc.

Salve a tutti ragazzi, bentornati e benvenuti in questa seconda lezione. Nella lezione precedente abbiamo visto come vengono utilizzate le tipografie. Quest’oggi invece, vedremo come il testo può avere dimensioni differenti. A tale scopo, avete mai visto quei titoli molto grossi e ben evidenziati sulle prime pagine dei giornali? Bene, nelle pagine web funziona proprio allo stesso modo! Segui attentamente questa lezione, in cui vedrai come poter impostare al meglio i tuoi titoli.

I titoli (headings) sono elementi di tipo block a cui le dimensioni e il margine, applicato per default dal browser, sono proporzionali all’importanza del titolo.

Infatti come si intuisce dai numeri i titoli sono gerarchici. Questo significa che h1 sarà il titolo principale della pagina. Se ci serviranno altri titoli per specializzare alcune sezioni importanti del testo (le “main sections”) è consigliato scegliere prima h2, per le sottosezioni utilizzeremo h3 e così via con una suddivisione sempre più granulare fino ad utilizzare l’h6 che è l’ultimo headers disponibile.

Ad esempio:

<h1>Casa</h1>

<h2>Acquistare la casa</h2>

<h3>Le pratiche per l'acquisto di casa</h3>

<h3>Agenzie immobiliari, quali scegliere</h3>

<h2>Arredare la casa</h2>

<h3>Come scegliere la cucina per la nuova casa</h3>

<h3>Lampadari, tipologie e differenze</h3>

Gerarchia degli headings nelle home page

Cerchiamo di fare un po di chiarezza. Se stiamo parlando della home page del sito è buona norma utilizzare l’h1 per il nome del sito, l’h2 per le categorie e h3 per i titoli degli ultimi contenuti pubblicati (o i più importanti). L’h4 può essere utile per i titoli di altri contenuti correlati e h5 per cose meno importanti, meno correlate con la struttura della pagina. Ovviamente tutto questo non è da prendere alla lettera, in quanto potrebbero sorgere determinate esigenze che vi mettono nelle condizioni di utilizzo di grandezze differenti.

Bene, con questo possiamo concludere la lezione sugli headers ed ora potrai anche tu creare la tua pagina web con il tuo titolo da prima pagina di giornale! Ci rivediamo nella prossima lezione, dove affronteremo la realizzazione dei paragrafi. A presto ragazzi!

Trascrizione della lezione:

I paragrafi in HTML

Ciao ragazzi e bentornati in questa video lezione sull’HTML.
In questa lezione affronteremo il concetto di paragrafo. Ma cos’è un paragrafo? Sicuramente saprai già cosa significa. In HTML non cambia nulla, bisogna soltanto specificare in quale tag inserire il tuo bel paragrafone!

Il paragrafo <p> è un elemento contenitore che al suo interno prevede l’inserimento di testo e di altri tag qualora fosse necessario. Ecco un esempio:

<p>Nel primo paragrafo di questa trattazione, ci occuperemo

dell'importanza del testo nel Web. Grazie ad un semplice esempio

possiamo sperimentare molte cose.</p>

<p>Per default il browser manderà a capo il contenuto di questo

secondo paragrafo.</p>

Si tratta peraltro di un elemento di tipo block, ossia intendiamo che il comportamento di base del browser sarà sempre quello di andare a capo al termine del paragrafo stabilendo margini per il testo.

A questo punto è doveroso dover parlare di come poter impostare altre importanti caratteristiche di una pagina web. Alla prossima lezione allora!

Trascrizione della lezione:

Cos'è un attributo HTML

In questa video lezione affronteremo il concetto di attributo. Gli attributi nell’HTML sono una componente dei tag e sono definiti da un nome. Ogni attributo fornisce delle caratteristiche uniche e aggiuntive al tag in cui viene inserito. Sono seguiti dal simbolo uguale (=) e da un valore definito tra virgolette.

<nome_del_tag attributo="valore”>

A cosa servono gli attributi HTML

Gli attributi permettono di ottenere effetti diversi, ad esempio l'attributo “bgcolor” consente di cambiare il colore dello sfondo, l'attributo “color” assegna il colore del testo, l'attributo “href” assegna un indirizzo URL in un collegamento ipertestuale, ecc. .

Un esempio pratico per la creazione di un paragrafo potrebbe essere:

<p>Questo è il nostro primo paragrafo</p>

Sul browser il testo del paragrafo viene visualizzato a partire da sinistra, in quanto tutti i browser in occidente hanno la visualizzazione di default a sinistra.

testo da allineare a destra

Ora voglio allineare a destra il testo compreso in un tag <p>. Per farlo devo soltanto inserire nel tag <p> l'attributo ALIGN con il valore RIGHT.

L'effetto sullo schermo del browser è il seguente:

testo da allineare a destra

Tramite l'uso dell'attributo ho modificato la formattazione del paragrafo e ho forzato la visualizzazione del testo a partire da destra. Ovviamente, la modifica vale soltanto per il testo in quel paragrafo <p> e non per gli altri tag della pagina.

Come combinare l'effetto di diversi attributi in un tag

Per combinare più proprietà è possibile definire attributi diversi all'interno di uno stesso tag HTML. Per ognuna di queste informazioni esiste un apposito attributo. Quando gli attributi da specificare in un tag HTML sono più di due, è sufficiente separarli tra loro da uno spazio, ricordandosi sempre di porre il valore di ogni attributo tra virgolette.

<nome-tag attributo1="valore1" attributo2="valore2">

Un caso pratico potrebbe consistere nella visualizzazione di un'immagine nel linguaggio HTML dove è necessario indicare il nome del file, la larghezza e l'altezza dell'immagine, ecc.

Il risultato visualizzato a schermo sarà il seguente:

*immagine mostrata a video*

Nella prossima lezione vedremo come gestire delle immagini. A presto!

Trascrizione della lezione:

Immagini in HTML

Ciao a tutti, riprendendo l’argomento delle immagini lasciato in sospeso nella lezione precedente, in questa lezione lo approfondiremo dettagliatamente.

Partiamo subito col dire che il tag <img> rappresenta il principale elemento per inserire un’immagine in una pagina HTML. La sintassi minima è la seguente:

<img src="http://miosito.it/miaImmagine.png" alt="Mia Immagine">

Anzitutto notiamo che il tag <img> è un tag senza un contenuto, per questo non ha un elemento </img> di chiusura. Esaminiamo il significato delle keyword e degli attributi principali:

• La keyword img è il nome del tag, abbreviazione di image (immagine)

• Il termine src sta per source (origine), è l’indirizzo (URL) del file che vogliamo mostrare

• Infine abbiamo la parola alt che rappresenta il testo alternativo, ovvero il testo che appare se, per qualche motivo, il browser non riesce a mostrare l’immagine. Possiamo anche omettere questo attributo, ma risulta utile per l’accessibilità e per i motori di ricerca

Grazie al tag img possiamo inserire nella pagina una foto o un grafico. Questo è un elemento di tipo “inline”, ovvero, quando inseriamo un’immagine in un testo, il browser in genere la mostra a piena risoluzione e la considera in linea con il testo, ovvero come parte del testo stesso.

Per esempio un markup come il seguente:

<p>Ciao questo <img src="logo_facebook.png"> è il logo di Facebook</p>

Viene interpretato in questo modo:

Ciao questo è il logo di Facebook

Ovviamente il tag img può essere usato anche all’esterno di un paragrafo, come semplice riga di codice a se stante:

<p>Ciao questo</p>

<img src="logo_facebook.png">

<p>è il logo di Facebook</p>

Ci sono molti altri modi per personalizzare le immagini, agendo direttamente con il CSS. Questo argomento però, lo affronteremo molto più avanti. Per ora cerchiamo di utilizzare soltanto i tag e gli attributi.

Come abbiamo detto, nell’attributo src specifichiamo qual è l’origine dell’immagine. Tipicamente inseriamo un URL, o un percorso che punti ad un file.

Abbiamo già intravisto nella lezione precedente come inserire un’immagine quando il file si trova nella stessa cartella del file HTML:

<img src="smile.gif" alt="immagine di un sorriso">

Ci sono vari modi per specificare la posizione del file immagine tramite percorsi relativi o assoluti (questo argomento sarà più chiaro quando approfondiremo l’argomento sui link). Sarà quindi possibile riferirsi a file che si trovano su cartelle o siti diversi ad esempio, in questo modo:

<img src="https://motori.quotidiano.net/wp-content/uploads/2018/02/1969-Dodge-Charger-Bullitt-2.jpg">

<img src="https://upload.wikimedia.org/wikipedia/commons/2/2c/Rotating_earth_%28large%29.gif">

Attraverso l’attributo src possiamo caricare diversi tipi di immagine con diversi formati. Quelli più importanti sono: JPG, PNG e GIF. La differenza sostanziale tra i 3 è che PNG e JPG differiscono di qualità, compressione e trasparenza, invece il formato GIF è utilizzato per immagini animate.

Adesso analizziamo al meglio l’attributo alt, utile per specificare un testo alternativo (alt sta quindi per alternative text), questo testo non viene mostrato se non in alcune occasioni:

• Quando l’immagine non può essere caricata;

• A volte durante il caricamento dell’immagine (se ad esempio la connessione è troppo lenta o il file è troppo grande e quindi impiega diverso tempo per essere caricata);

• Nei browser testuali (come lynx) che non mostrano per niente le immagini;

• Nei dispositivi per ipovedenti (sistemi screen-reader cioè, in grado di leggere lo schermo).

È facile comprendere come l’attributo alt sia di estrema utilità per rendere il sito accessibile a tutti gli utenti anche quando le loro condizioni fisiologiche o le loro possibilità di connessione non permettano di fruire delle immagini.

Gli ipovedenti e i non-vedenti sono infatti in grado di comprendere il contenuto delle immagini grazie a software appositi (appunto, gli screen reader) che “leggono” lo schermo tramite un programma di sintesi vocale. Non specificare il testo alternativo significa rendere parziale la fruizione del contenuto. E poi, Ehi, aiutano molto i motori di ricerca nell’individuare il tuo sito!

Detto questo risulta logico che l’attributo alt non dovrebbe contenere mai il titolo dell’immagine o la legenda. Esso deve contenere un testo che effettivamente possa supplire all’assenza dell’immagine per rendere il testo altrettanto fruibile. Per questo è inutile inserire l’attributo alt se abbiamo già una descrizione simile nel testo intorno all’immagine.

Esiste un altro attributo, cioè title. Utilizzato su alcuni browser desktop e non mobile che mostrano un tooltip con il testo contenuto in questo attributo, se l’utente vi ci si sofferma sopra con il mouse. Aggiungere attributi title è comunque un’opzione per aggiungere maggior informazione all’immagine.

<img src="logo.gif" title="Facebook.com" alt="Logo di Facebook" />

È possibile modificare la larghezza e l’altezza delle immagini rispettivamente con gli attributi width ed height.

<img src="logo.gif" alt="Logo di Facebook" width=”20px” height=”15px”/>

Il valore di questi due attributi può essere espresso in pixel o in percentuale (ad esempio, width=”10%” height=”20%”). La differenza tra i due è che la seconda si adatta alla grandezza della finestra del browser.

Concludiamo col dire che possiamo inserire un’immagine direttamente in un link per rendere più chiaro il significato. Farlo a questo punto risulta veramente banale:

<a href="http://www.facebook.com">

<img src="logo.png">

</a>

Con questo possiamo chiudere la lezione sulle immagini in HTML. Interessante vero? Adesso anche tu potrai inserire tutte le immagini che vorrai nella tua pagina web!

Ci vediamo quindi nella prossima lezione, dove approfondiremo l’argomento della formattazione. A presto!

Trascrizione della lezione:

Formattazione

Ciao! In questa lezione approfondiremo il capitolo riguardante la formattazione della pagina, ovvero di come impostare i contenuti al suo interno, quindi di come verranno disposti tali contenuti.

Allineare il testo nella pagina

Abbiamo già visto una parte di questo argomento qualche lezione fa. Certe volte sarà necessario muovere il testo in zone differenti del documento, ad esempio se si vuol spostare tutto il testo al centro o sulla sinistra della pagina, sarà necessario:

• Spostamento a destra » Per spostare il testo a destra, sarà necessario utilizzare l’apposito attributo align=”right”. Un esempio è:
  
  <p align=”right”>Non so parlare l’arabo</p>

• Spostamento al centro » Per spostare il testo al centro del documento, sarà necessario utilizzare l’apposito attributo align=”center” oppure direttamente il tag HTML <center>, ad esempio:
  
  <p align=”center”>Questo è un testo centrato</p>
  <center><p>Questo è un testo centrato</p></center>
  
  

• Spostamento a sinistra » Per spostare il testo sulla sinistra, sarà necessario utilizzare l’apposito attributo align=”left” nell tag di testo. È importante sottolineare il fatto che questo attributo è di default, quindi non sarà sempre necessario inserirlo. Ecco un esempio del suo utilizzo:

<p align=”left”>Questo è un testo a sinistra</p>

Ma oltre all’allineamento potrebbe risultare necessario definire delle spaziature. È possibile andare a capo tra un tag e l’altro utilizzando l’apposito tag <br>. A differenza degli altri tag, questo non dev’essere chiuso come vale per il tag <img> quindi, non esiste un tag </br> di chiusura. Vedremo più avanti che questa regola vale anche in altri rari casi, come ad esempio per il tag <img>.

Ad esempio:

<p>Testo 1</p>

<br>

<p>Testo 2</p>

Con questo terminiamo l’argomento della formattazione. Nella prossima lezione vedremo i commenti in HTML. Alla prossima lezione!

Trascrizione della lezione:

Cos’è un commento in HTML

Ciao! Eccoci qua con una nuova lezione. Parleremo dei commenti, ovvero del testo che non viene visualizzato nella pagina web, ma che serve più che altro a descrivere il funzionamento del codice scritto.

I commenti in HTML, come in altri linguaggi, permettono di aggiungere al markup una serie di annotazioni che non incidono sul contenuto visualizzato nella pagina. I browser comunque leggono queste annotazioni e grazie ad esse possiamo agire anche attivamente sulla resa comprensiva del codice che scriviamo.

Per essere meno criptici definiamo le funzioni più comuni svolte dai commenti in HTML:

• Scrivere annotazioni generiche al markup;

• Rendere inattive porzioni di codice in fase di debug o per effettuare dei test;

• Segnalare la chiusura di blocchi di codice per evitare confusione;

Aggiungere un commento in HTML

Passiamo subito alla pratica. Per aggiungere un commento la sintassi è piuttosto semplice, si racchiude il testo tra <!-- e -->:

<!-- questo è un commento -->

Possiamo racchiudere in un commento anche molte righe e, spesso, i commenti sono utilizzati per disattivare alcune parti del markup: inserendo un tag in un commento lasciamo infatti che esso sia ignorato dal browser. Ad esempio:

<p>Questo paragrafo si vede</p>

<!--

<p>Questo paragrafo non si vede</p>

-->

Tra le pratiche più usate, c’è quella di sfruttare i commenti per contrassegnare l’inizio e la fine di un blocco: spesso si tratta di elementi blocco come i <div> (un tag che vedremo nello specifico più avanti nel corso) che definiscono la struttura (layout) della pagina.

Aggiungendo un commento che ne riporti la classe o l’id, ad esempio, sappiamo sempre in che area stiamo posizionando il nostro codice e rendiamo più leggibile il markup della pagina:

<div id="main">

<article>contenuto</article>

<div class="mybox">

</div><!--mybox-->

</div><!--main-->

Bene, con questo possiamo concludere anche questa lezione. Adesso potrai anche tu descrivere cosa succede all’interno del tuo codice HTML senza dover rileggere ogni singola riga di codice!

Ci vediamo nella prossima lezione, dove parlerò del tag <div>.

Trascrizione della lezione:

Il tag div

Ciao! In questa lezione andremo a vedere il tag div. Premetto che questo tag è uno dei più importanti se non il più importante. Infatti, grazie ad esso è possibile creare lo scheletro della nostra pagina web. Come suggerisce il termine da cui prende il nome ossia “divide”(letto in inglese), lo scopo è proprio quello di dividere la pagina in sezioni.

Andiamo a vedere nel dettaglio, facendo un esempio pratico realizzando la struttura della nostra pagina web.

Il tag <div> dev’essere utilizzato come contenitore di altri tag della pagina. Nel codice di esempio, puoi osservare che ci sono diversi <div> che hanno lo scopo di suddividere la pagina in macro e micro sezioni. Vedremo molto più avanti come poter gestire questo tag in modo tale che pagina venga correttamente visualizzata.

Prima di concludere questo argomento, parleremo anche del tag <span> che rappresenta un contenitore inline generico per il contenuto di frasi e non solo. Può essere utilizzato per raggruppare gli elementi per scopi di stile (usando gli attributi class o id), o perché condividono valori di attributo, come lang. Questo tag è molto simile ad un elemento <div>.

Ecco un esempio di codice:

<label class="radio">

<input type="radio" name="gender" value="Donna">

<span>Donna</span>

</label>

Con questo terminiamo la lezione sul tag div. Nella prossima parleremo dei link in HTML. Ci vediamo nella prossima lezione allora, a presto!

Trascrizione della lezione:

Link (e collegamenti) in HTML

Ciao a tutti ragazzi! Eccoci qui con un nuovo ma già incontrato argomento. In questa lezione parleremo dei link. Ma cos’è un link?

Sicuramente ne avrai già sentito parlare: i link possono essere visti come dei “ponti” che consentono di passare da un testo all’altro. In quanto tali, i link sono formati da due componenti:

• La parte visibile del link, ovvero una stringa (di solito colorata in blu e sottolineata)

• La risorsa, ovvero un’altra pagina (presente sullo stesso server o su un server diverso, o anche direttamente sulla propria macchina), oppure potrebbe essere anche un collegamento interno a un punto della pagina stessa. Indica la direzione cui punta il collegamento

Per spiegare che cosa sono i link si utilizza anche la metafora dell’ancora con “la testa” all’interno del documento stesso, e la “coda” in un altro documento (o all’interno di un altro punto del documento stesso).

Bene, adesso vediamo come crearne subito uno, tenendo conto della sintassi da seguire.

Ecco la sintassi per creare un link con riferimento a un sito web:

<!--Clicca qui per visitare la tua pagina di -->

<a href="https://www.facebook.com/">Facebook</a>

Come si può intuire la testa della nostra àncora è il testo Facebook, mentre la coda, cioè la destinazione (specificata dall’attributo href) è il sito web verso cui il link punta, cioè https://www.facebook.com/ .

È indifferente che la destinazione dell’ancora sia una pagina HTML di un sito, un’immagine, un file pdf, un file zip, o un file exe: il meccanismo del link funziona allo stesso modo indipendentemente dal tipo di risorsa; poi il browser si comporterà in modo differente a seconda della risorsa. Ad esempio:

• Le immagini vengono visualizzate direttamente nel browser

• I documenti vengono visualizzati nel browser

• Per file zip e exe viene chiesto all’utente di scaricare il file (attenzione però, per diversi motivi il download di un file potrebbe essere bloccato da un antivirus per motivi di sicurezza che lo stesso antivirus reputa necessarie)

Potremmo anche specificare un indirizzo email come link. In questo caso si aprirà direttamente il client di posta dell’utente con l’indirizzo email preimpostato. La sintassi è la seguente:

<!--Invia una e-mail all’indirizzo specificato come valore dell’attributo href-->

<a href="mailto:tuaMail@nomeTuoSito.it">Invia una e-mail</a>

Finora abbiamo visto l’inserimento di un link attraverso il così detto percorso assoluto, che significa indicare per esteso l’indirizzo di un certo documento, elencando tutte le directory e sottodirectory che dobbiamo attraversare per raggiungerlo. Per comprendere meglio esaminiamo questo indirizzo.

Per semplificare possiamo anche dire che un collegamento assoluto è l’url che normalmente troviamo nella barra degli indirizzi.

I percorsi assoluti si usano per lo più quando si scrivono link a risorse situate nei siti di terze parti (che non appartengono al progetto).

Spesso ci capita tuttavia a fare riferimento a documenti situati all’interno del progetto (o del sito), e ‐ sviluppando sul nostro computer (cioè “in locale”) ‐ magari non abbiamo ancora un indirizzo web e non sappiamo di conseguenza come impostare i percorsi. È utile allora capire come funzionano i percorsi relativi.

I percorsi relativi fanno riferimento alla posizione degli altri file rispetto al documento in cui ci si trova in quel momento. Per linkare due pagine che si trovano all’interno della stessa directory è sufficiente scrivere:

<a href="paginaDaLinkare.html">

Collegamento alla pagina da linkare nella stessa directory della pagina presente

</a>

NOTA: articola il discorso mostrando un esempio in tempo reale. Sei libero

VA INSERITO L’ANCORAGGIO ALL’INTERNO DELLA PAGINA ALLE VARIE SEZIONI

<a href="#contact">

Collegamento alla pagina da linkare nella stessa directory della pagina presente

</a>

E con questo terminiamo anche questa lezione. Adesso potrai “linkare” tutte le pagine web che vorrai direttamente sulla tua pagina! Nella prossima lezione parleremo delle liste e di come poterle gestire all’interno di una pagina. A presto allora!

Trascrizione della lezione:

Liste

Ciao! In questa videolezione andremo ad affrontare il tema delle liste. Come ben sapete le liste in un testo sono importanti qualora sorge l’esigenza di mostrare una sequenza di passi o stilare un semplice elenco di oggetti. Non sono una componente da sottovalutare perché in alcune circostanze le liste possono agevolare l’utente nella lettura del contenuto, soprattutto rendendo il contenuto stesso più gradevole da leggere. Ma come si definiscono? Prima di passare a questa fase occorre precisare che esistono:

• Elenchi ordinati

• Elenchi non ordinati

Vediamoli nel dettaglio. Per cominciare abbiamo gli elenchi ordinati. Gli elenchi ordinati (ordered list) sono contraddistinti dalla enumerazione degli elementi che compongono la lista. Il tag da utilizzare per aprire un elenco ordinato è <ol> e anche in questo caso gli elementi sono individuati dal tag <li>:

Testo che precede la lista

<ol>

<li>primo elemento</li>

<li>secondo elemento</li>

<li>terzo elemento</li>

</ol>

Testo che segue la lista

Il risultato sarà

A seguire abbiamo gli elenchi non ordinati. L’elenco non ordinato (unordered list) è forse il più usato e si descrive utilizzando il tag <ul>. Al suo interno possiamo inserire gli elementi della lista (list item) utilizzando il tag <li>. Ecco un semplice esempio

<ul>

<li>primo elemento</li>

<li>secondo elemento</li>

<li>terzo elemento</li>

</ul>

Risultato:

La domanda che potrebbe sorgere arrivati a questo punto e se effettivamente posso creare più livelli all’interno di una lista. La risposta è ovviamente sì. In quel caso si parla di lista annidata come nel seguente caso:

<ul>

<li>primo della 1a lista</li>

<li>secondo della 1a lista

<ul>

<li>primo della 2a lista</li>

<li>secondo della 2a lista

<ul>

<li>primo della 3a lista</li>

</ul>

</li>

<li>terzo della 2a lista</li>

</ul>

</li>

</ul>

Ovviamente è possibile anche combinare le 2 tipologie di liste per ottenere un risultato differente. Ora che conosci le varie tipologie di liste, per il nostro piccolo progetto andremo ad utilizzare quelle non ordinate per realizzare un menù di navigazione.(ad esempio, fare richiami ai dei link di ancoraggio per le varie sezioni della pagina). Benissimo, nella prossima lezione vedremo come funzionano le tabelle in HTML.

Trascrizione della lezione:

Tabelle in HTML

Le tabelle sono componenti importanti in HTML: nate agli inizi del Web per impaginare dati aggregati, si sono poi trasformate in uno strumento indispensabile per gestire i layout grafici.

Come sempre in questa guida HTML ci rifacciamo allo standard attuale, per cui l’elemento <table> serve alla rappresentazione di dati, anche “in più dimensioni”, sotto forma di tabelle.

Per definire una tabella “minimale”, che sia comunque interpretata correttamente dai browser possiamo riprodurre un esempio simile al seguente:

<table>

<tr><td>Colonna 1</td><td>Colonna 2</td></tr>

<tr><td>Dato 1,1</td><td>Dato 1,2</td></tr>

<tr><td>Dato 2,1</td><td>Dato 2,2</td></tr>

<tr><td>Dato 3,1</td><td>Dato 3,2</td></tr>

</table>

Nell’esempio riusciamo a definire una griglia formata da righe e colonne, il risultato però è piuttosto povero a livello semantico cioè, non riusciamo a distinguere il nome di una colonna dai suoi valori. Analizziamo per ora i tag che abbiamo a disposizione:

• Il tag table è il contenitore di tutta la tabella e la definisce

• Il tag tr è il “table row” che contiene una riga della tabella

• Il tag td è il “table data” ovvero una cella che contiene i valori all’interno di una riga

Potremmo migliorare la visualizzazione della tabella aggiungendo una riga con un tag speciale cioè il tag th che è il “table header” ovvero una cella che contiene il nome della colonna.

È inoltre possibile aggiungere un contorno chiamato bordo con l’attributo border=”1px” per delimitare i vari spazi della tabella. Questo però verrà meglio analizzato nelle lezioni dedicate al css.

Questo tipo di tabella era un elemento predominante nel “vecchio Web” (ed è ancora presente in quello attuale), perché è utile alla suddivisione degli spazi, oltre che alla rappresentazione dei dati.

Bene, con questo possiamo concludere anche questa lezione. Molto facile e veloce. Adesso divertiti a creare le tue tabelle in tutti i modi possibili, inserendo magari un paragrafo in una riga, oppure un’immagine. Ci vediamo nel prossimo tutorial, dove parleremo del form.

Trascrizione della lezione:

Form

Introduzione di un Form

L'HTML mette a disposizione una serie di importanti tag il cui scopo è quello di creare moduli per l’invio di dati con tanto di caselle di testo, opzioni, pulsanti di invio e altro.

Il termine tecnico che riassume tutti questi elementi è form ed il loro scopo è quello di creare interazione e scambio dati tra gli utenti ed il sito. Più precisamente, attraverso un form HTML (o modulo che dir si voglia) è possibile "raccogliere" gli input degli utenti per poi inviarli ad un qualche sistema di elaborazione (normalmente uno script lato server che però non affronteremo in questo corso).

I form HTML, da soli non offrono il minimo controllo e la minima gestione sui dati inseriti dagli utenti. Per far ciò, come detto, sarà necessario utilizzare degli script in grado di ricevere i dati raccolti dal form per poi eseguirne una qualche elaborazione o controllo (ad esempio inserirli all'interno di un database oppure utilizzarli per inviare una mail).

Vediamo ora di capire come si creano form completi, quali tag ed elementi vengono coinvolti e quali sono le loro specifiche caratteristiche.

Per la creazione di un form utilizziamo l'omonimo tag form, come nell'esempio che segue:

<form method="" action="" target="">

...

</form>

Lo scopo di questo tag è di fare da contenitore ad una serie di altri tag (che vedremo tra poco) che costituiranno gli specifici controlli del modulo.

I principali attributi del tag form, come visto nell'esempio, sono i seguenti:

• method - specifica il metodo di invio dei dati;

• action - specifica lo script che riceverà, controllerà ed elaborerà i dati.

• target - specifica se il frutto dell'elaborazione (effettuata dallo script indicato in action) verrà mostrata nella stessa finestra oppure in un altra.

Una piccola precisazione che occorre fare è sull’attributo method è che determina come il modo in cui i dati vengono mandati al server e può assumere due valori:

get – valore di default che passa i parametri che saranno visibili in alto nell’url della barra degli indirizzi.

post – invia i dati in modo che non possono essere tracciati nella barra degli indirizzi del browser.

Ora che abbiamo introdotto i form nella prossima lezione andremo a vedere i vari tag che potranno essere inseriti all’interno di un form per creare il nostro modulo.

Trascrizione della lezione:

Popolamento di un Form

Una volta definito un form mediante l'omonimo tag sarà necessario "popolarlo" con una serie di tag annidati al suo interno. Attraverso i singoli tag infatti, sarà possibile creare i vari elementi per l'interazione con l'utente come, ad esempio, caselle di testo o menu di selezione.

Passiamo adesso in rassegna in maniera rapida i singoli tag che generano gli elementi dei form HTML:

• input - genera la maggior parte degli elementi dei form HTML, a seconda dell’attributo type specificato. I tipi più utilizzati sono:

  • text - è utilizzato per creare caselle di testo in cui l'utente può scrivere del contenuto su "singola linea";

  • file - è utilizzato per creare caselle di selezione di file in locale al fine di poterli trasmettere al server remoto;

  • radio - permette di creare un gruppo di opzioni al cui interno deve essere fatta una scelta (non ammette scelte multiple);

  • checkbox - permette di creare un gruppo di opzioni al cui interno devono essere fatta delle scelte (ammette scelte multiple);

  • button - permette di creare bottoni "neutri" ai quali, cioè, può essere associata un'azione mediante Javascript;

  • submit - permette di creare bottoni di invio attraverso i quali viene, appunto inviato e processato il form;

  • image - permette di inserire immagini "attive" all'interno del modulo che fungeranno da bottoni;

  • reset - permette di creare bottoni per il reset del form (in sostanza vengono cancellate le scelte effettuate dall'utente ed il modulo torna al suo stato iniziale).

• select - crea una casella di riepilogo a scorrimento, chiamata in gergo selectbox;

• textarea - genera un'area di testo in cui è possibile andare a capo e viene utilizzata per permettere di inserire descrizioni, commenti o comunque testi piuttosto lunghi.

Vediamo un esempio di un ipotetico form HTML per la raccolta di dati da inviare tramite email nella sezione contatti:

<form method="post" action="mailto:io@me.te" enctype="text/plain"> <!-- CASELLE DI TESTO →
Nome<br><input type="text" name="nome"><br>
Cognome<br><input type="text" name="cognome"><br>
<!-- SELECTBOX →
Paese<br>
<select name="paese">
<option value="I">Italia</option>
<option value="E">Estero</option>
</select><br>
<!-- RADIO →
Sesso<br>
<input type="radio" name="sesso" value="M"> M<br>
<input type="radio" name="sesso" value="F"> F<br>
<!-- CHECKBOX →
Motivazione:<br>
<input type="checkbox" name="hobby" value="S"> Supporto tecnico<br>
<input type="checkbox" name="hobby" value="L"> Semplice consulenza<br>
<!-- TEXTAREA →
Note<br>
<textarea name="commento" rows="5" cols="30"></textarea>
<br><br>
<!-- SUBMIT →
<input type="submit" name="invia" value="Invia i dati">
</form>

Trascrizione della lezione:

Classi e Id

Ciao! Questa lezione sarà un’anticipazione, o per meglio dire la base, attorno a cui ruota il css che vedremo nelle prossime videolezioni. Infatti In HTML esistono due attributi globali applicabili a tutti gli elementi: sono id e class.

Specificare questi attributi a prescindere dai CSS non ha alcun senso e non modifica in alcun modo la presentazione della pagina come abbiamo visto nelle lezioni precedenti sui div. Andiamo a vedere però cosa succede se creo un file css in cui definisco uno stile ai div con quegli id che abbiamo specificato. Come si può notare in questo particolare esempio abbiamo assegnato il colore di sfondo al div… . Qual è la differenza però tra id e class?

In un documento HTML l’attributo id è usato per identificare in modo univoco un elemento. In pratica, se assegno ad un paragrafo l’id testobianco, non potrò più usare questo valore nel resto della pagina. Di conseguenza, l’id #testobianco dichiarato nel CSS trasformerà solo quel paragrafo specifico.

Una singola classe, al contrario, può essere assegnata a più elementi, anche dello stesso tipo.

In un documento potremo avere senza problemi questo scenario:

<p class="testobianco">....</p>

<div class="testobianco">....</div>

<ul class="testobianco">...</ul>

La classe .testobianco presente nel CSS formatterà allo stesso modo il testo del paragrafo, del div e della lista.

Per definire una classe nel css si usa far precedere il nome da un semplice punto:

.nome_della_classe

Questa è la sintassi di base. Un selettore di classe così definito può essere applicato a tutti gli elementi di un documento HTML.

La sintassi per il selettore id è leggermente diversa. Basta far precedere il nome dal simbolo di cancelletto #:

#nome_id

Con questa regola

#titolo {color: blue;}

assegniamo il colore blue all’elemento che presenti questa definizione nel codice HTML:

<h1 id="titolo">...</h1>

E con questa breve introduzione a ciò che poi andremo a costruire nelle lezioni del css.

Trascrizione della lezione:

Introduzione al CSS

Ciao! Ora che hai le basi dell'HTML sorge un problema o meglio una necessità. Rendere il contenuto che hai realizzato presentabile. Per presentabile non intendiamo solo che che abbia una forma ma che sia bello da vedere e che aiuti l’utente nella comprensione di ciò che fa. Ci serve quindi uno strumento in grado di dare una forma a ciò che abbiamo realizzato. Per farlo ci serve uno strumento che già abbiamo accennato in qualche lezione. Parliamo del CSS. La sigla che sta per Cascading Style Sheets, in italiano fogli di stile a cascata, e nello specifico i CSS servono per gestire tutto il layout di un sito Web. Grazie ad essi è possibile intervenire sulla formattazione del testo, sul posizionamento degli elementi grafici e sulla disposizione che questi elementi avranno rispetto ai diversi dispositivi. Ti consiglio inoltre di sfruttare le potenzialità del web per imparare nuove regole da incorporare nel tuo foglio di stile. Fatta questa opportuna premessa nelle prossime video lezioni andremo ad affrontare le basi che ti aiuteranno nella creazione di un foglio di stile utile per la tua landing page. A presto!

Trascrizione della lezione:

Colori in HTML

Ciao! Eccoci finalmente a parlare dei colori in HTML. Dopo questa lezione potrai anche tu creare tutte le combinazioni di colori possibili per poter arricchire la tua pagina, modificando magari il colore del testo, o di una tabella, o anche di un intero paragrafo! Vediamo subito come si fa.

Come li rappresentiamo in formato di codice HTML?

Ci sono due modi per poterli rappresentare: il più comune è quello in cui il codice del colore è in esadecimale. Spieghiamo questo primo approccio.

Ogni codice HTML contiene il simbolo "#" e 6 lettere o numeri. Questi numeri sono in sistema numerico esadecimale. Ad esempio "FF" in esadecimale rappresenta il numero 255 in decimale, mentre 00 rappresenta il numero 0.

I primi due simboli nel codice colore HTML rappresentano l'intensità del colore rosso (R).

I valori quindi oscillano fra 00 (che è il minimo corrispondente a colore assente) e FF (che è il valore massimo che rappresenta appunto l’intensità massima del colore). Tutti i valori intermedi rappresentano quindi le sfumature del colore preso in considerazione.

Procedendo con i valori , il terzo e il quarto rappresentano l'intensità del verde (G) e il quinto e il sesto rappresentano l'intensità del blu (B).

Quindi, combinando l'intensità di rosso, verde e blu, possiamo mescolare quasi tutti i colori a tutte le intensità che desideriamo, per ottenere tutti i colori che vorrai.

Ad esempio: #FF0000, con questo codice HTML diciamo al browser di mostrare il massimo di rosso e nessun verde e nessun blu.

Un altro esempio è il colore nero, il quale codice è: #000000 (ovvero nessun colore, quindi appunto nero).

Adesso però dobbiamo capire come riportare tutto ciò sul nostro codice HTML, e lo faremo introducendo degli esempi che ti faranno subito capire la semplicità di implementazione.

Ecco un esempio:

<body>

<p style="color:#FF0000";>Paragrafo rosso</p>

</body>

Avrai sicuramente notato la presenza di una parola all’interno del tag del paragrafo, ovvero la parola “style”. Cosa significa? Abbiamo già affrontato l’argomento degli attributi, e infatti questo “style” non è nient’altro che un attributo, che quindi deve essere valorizzato. Con cosa deve essere valorizzato? Come si evince dall’esempio, proprio con il codice che rappresenta il colore che voglio utilizzare per colorare il mio paragrafo. Semplice no?

Questa lezione è dedicata anche alla gestione del colore nei CSS. Esamineremo prima le diverse possibilità per definire i valori dei colori, per poi analizzare usi e sintassi della proprietà color.

Definizione dei colori

I colori possono essere espressi in vari modi nel contesto di una regola CSS.

Si tratta di sedici keyword che definiscono i colori della palette VGA standard di Windows, ed ecco qui la lista completa:

black | navy | blue | maroon | purple | green | red | teal | fuchsia |

olive | gray | lime | aqua | silver | yellow | white

Anche con il CSS si usufruisce del codice esadecimale per definire uno dei qualsiasi colori tu voglia rappresentare. Un esempio:

color: #CC0000

Visti i sistemi per rappresentare i colori, dobbiamo ora chiarire un aspetto importante. Per ogni elemento si possono definire almeno tre colori:

1. Colore di primo piano

2. Colore di sfondo

3. Colore del bordo

La proprietà color definisce esclusivamente:

• Il colore di primo piano, ovvero quello del testo

• Il colore del bordo di un elemento quando non si imposti esplicitamente quest’ultimo con le proprietà border o border-color

La proprietà color si applica a tutti gli elementi ed è ereditata. Significa che se si imposta il colore per un elemento esso sarà ereditato da tutti gli elementi discendenti per cui non si definisca esplicitamente un altro colore.

Ecco un esempio di questa sintassi: selettore {color: valore;}

Bene, adesso vediamo come impostare le proprietà relative alla gestione dello sfondo, in particolare analizzeremo la proprietà del background-color.

Background-color

Definisce il colore di sfondo di un elemento. Questa proprietà non è ereditata.

I valori che può assumere sono essenzialmente due:

• Un qualunque colore

• La parola chiave transparent

Usando transparent come valore un elemento avrà come colore quello dell’elemento parente.

Ecco alcuni esempi:

body { background-color: white; }

p { background-color: #FFFFFF; }

.classe1 { background-color: rgb(0, 0, 0)

Adesso vediamo il secondo metodo con cui poter rappresentare un codice di un qualsiasi colore in HTML.

Esso si basa sul modello RGB (Red, Green, Blue): è altrettanto facile come i codici esadecimali, usato anche nel CSS. Purtroppo questo secondo metodo non verrà approfondito in questo corso. Ti invitiamo magari a fare una ricerca personale riguardo a questo argomento. Ricorda che è importante effettuare delle ricerche individuali per varie curiosità.

Detto questo termina qui la lezione sui colori. Ci vediamo nel prossimo modulo dove parleremo di come poter impostare le varie grandezze degli elementi con l’ausilio del CSS. A presto!

Trascrizione della lezione:

Impostare larghezza e altezza (minima e massima) sugli elementi CSS in HTML

Per un maggiore controllo dei layout spesso si ha la necessità di impostare sugli elementi della pagina una dimensione minima o massima, in altezza e/o in larghezza.

I CSS mettono a disposizione quattro proprietà:

• min-width: (min wif) larghezza minima dell’elemento

• min-height: (min hait) altezza minima dell’elemento

• max-width: (max wif) larghezza minima dell’elemento

• max-height: (max hait) altezza massima dell’elemento

Tutti e quattro i valori assumono valori in pixel, percentuale o qualunque altra unità di misura:

div {

/* ... */

min-width: 500px;

min-height: 500px;

max-width: 1000px;

max-height: 1000px;

}

Il codice appena visto imposta una dimensione minima, sia in altezza che in larghezza di 500px. A seconda delle dimensioni della finestra e degli altri elementi che verranno inseriti nella pagina, le sue dimensioni massimo si estendono fino a 1000px. Oltre questa dimensione il box non si allargherà.

Bene, credo che la lezione possa fermarsi qui, non abbiamo visto molto, perché vogliamo che sia tu a sperimentare questi parametri sul tuo personale sito web. Detto questo ci vediamo nella prossima lezione, dove tratteremo degli stili tipografici. Alla prossima lezione!

Trascrizione del video:

Stili tipografici in CSS

Eccoci finalmente con una nuova lezione sul CSS. Adesso parleremo della gestione del testo e della tipografia, aspetti essenziali del CSS.

Iniziamo quindi dalle proprietà di base. Sono quelle che definiscono i seguenti aspetti:

• Il font da usare

• La sua dimensione

• La sua consistenza

• L’interlinea tra le righe

• L’allineamento del testo

• La sua decorazione (sottolineature, etc.)

Font-family

La proprietà font-family serve a impostare il tipo di carattere tipografico per una qualunque porzione di testo.

Il meccanismo funziona così:

p {font-family: Arial, Verdana, sans-serif;}

Quando la pagina viene caricata, il browser tenterà di usare il primo font della lista. Se questo non è disponibile sul dispositivo dell’utente userà il secondo. La spiegazione di tutto ciò è semplice: ovviare al problema dei diversi font presenti sulle varie piattaforme.

Dunque: quando si imposta la proprietà font-family si possono usare tutti i font che desideriamo, valutando la loro presenza sui vari sistemi e non dimenticando mai di inserire alla fine l’indicazione di una famiglia generica. Esse sono cinque (tra parentesi riportiamo i caratteri predefiniti su ciascuna sui sistemi Windows):

• serif (Times New Roman);

• sans-serif (Arial);

• cursive (Comic Sans);

• fantasy (Allegro BT);

• monospace (Courier).

I nomi dei font della lista vanno separati dalla virgola. I caratteri con nomi composti da più parole vanno inseriti tra virgolette.

Ad esempio:

div {font-family: Georgia, "Times New Roman", serif;}

Font-size

Insieme a font-family è la proprietà considerata essenziale nella definizione dell’aspetto del testo, di cui definisce le dimensioni. È applicabile a tutti gli elementi ed ereditata.

selettore {font-size: valore;}

Ecco adesso degli esempi di codice:

p {font-size: 12px;}

div {font-size: 50%;}

Abbiamo visto che l’acronimo px sta per “pixel”, ovvero l’unità di misura utilizzata per specificare appunto la dimensione del testo. Lo stesso vale per il valore espresso in percentuale. Vi sono tante altre unità di misura utilizzabili in CSS, ma non saranno argomento del corso.

Font-weight (font weit)

Serve a definire la consistenza o “peso” visivo del testo.

selettore {font-weight: valore;}

Il “peso” visivo di un carattere può essere espresso con le seguenti parole chiave:

• Normal: Testo normale, nessun cambiamento

• Bold: Testo in grassetto come il tag <b>

• valore da 100 a 900, più alto è e più "grasso" sarà il testo

Ad esempio: div {font-weight: bold;}

Font-style

Imposta le caratteristiche del testo in base ad uno di questi tre valori:

• Normal: il testo mantiene il suo aspetto normale

• Italic: formatta il testo in corsivo

• Oblique: praticamente simile a italic

Line-height

Grazie a line-height è possibile usare nelle nostre pagine un sistema di interlinea. La proprietà, in realtà, serve a definire l’altezza di una riga di testo all’interno di un elemento blocco. Ma l’effetto ottenuto è appunto quello di impostare uno spazio tra le righe.

Esempio di sintassi: selettore {line-height: valore;}

È possibile utilizzare valori numerici: usando valori numerici tipo 1.2, 1.3, 1.5 si ottiene che l’altezza della riga sarà uguale alla dimensione del font moltiplicata per questo valore.

Esempio: p {line-height: 1.5;}

Text-align

La proprietà serve a impostare l’allineamento del testo.

La sintassi è la seguente: selettore {text-align: valore;}

I valori possono essere rappresentati da una delle seguenti keyword:

• Left: allinea il testo a sinistra

• Right: allinea il testo a destra

• Center: centra il testo

• Justify: giustifica il testo

Ecco alcuni esempi:

p {text-align: center;}

div {text-align: justify;}

Proprietà Float

Prima di chiudere questo argomento, parleremo della proprietà float, con il quale è possibile rimuovere un elemento dal normale flusso del documento e spostarlo su uno dei lati (destro o sinistro) del suo elemento contenitore. Il contenuto che circonda l’elemento scorrerà intorno ad esso sul lato opposto rispetto a quello indicato come valore di float.

La sintassi generica è questa:

selettore {float: valore;}

Tale proprietà può assumere i seguenti valori:

• Left: l’elemento viene spostato sul lato sinistro del box contenitore, il contenuto scorre a destra

• Right: l’elemento viene spostato sul lato destro, il contenuto scorre a sinistra

• None: valore iniziale e di default in mancanza di una dichiarazione esplicita; l’elemento mantiene la sua posizione normale

Gli elementi con float, di qualsiasi natura essi siano, possono avere margini, bordi e padding come tutti gli altri elementi blocco. Per esempio:

div {

width: 200px;

float:right;

}

img {float: left;}

Bene, con questo abbiamo terminato anche tutta questa lunga lezione. Ci vediamo nella prossima, dove continueremo a parlare di altre pillole di CSS, in particolare tratteremo la gestione dei bordi in CSS. Alla prossima lezione allora!

Trascrizione della lezione:

Border e outline: gestire i bordi con i CSS

Salve a tutti ragazzi, bentornati In questa lezione dove vedremo una importante caratteristica degli oggetti HTML e che possiamo modificare a nostro piacimento per rendere l’effetto visivo degli stessi più accattivante. Nello specifico parliamo della proprietà dei bordi. In linea di massima possiamo suddividere le proprietà relative ai bordi in due categorie: proprietà singole e proprietà a sintassi abbreviata. Le prime definiscono singoli aspetti di ciascuno dei quattro bordi. Le seconde consentono di riunire in una sola regola le diverse impostazioni.

Sono proprietà singole:

border-top-color, border-top-style, border-top-width, border-bottom-color,

border-bottom-style, border-bottom-width, border-right-color, border-right-style,

border-right-width, border-left-color, border-left-style, border-left-width

Sono proprietà a sintassi abbreviata:

border, border-bottom, border-top, border-right, border-left, border-color, border-style, border-width

Overflow

Adesso introduciamo velocemente una particolare proprietà, ovvero l’overflow. Esso serve per regolare la gestione del contenuto eccedente in un riquadro (box).

Di default, infatti, il contenuto eccedente esce fuori dai limiti del box, un comportamento che tante volte potrebbe essere non voluto.

Per evitare che il contenuto eccedente sbordi dai limiti del riquadro andando a rovinare un layout in cui, per esempio, si abbia necessità di inserire box a dimensioni fisse, abbiamo a disposizione due valori per overflow:

• Il valore hidden, il contenuto eccedente viene ritagliato, diventando di fatto invisibile

• Il valore scroll, il contenuto viene sì ritagliato, ma continua ad essere fruibile perché il browser provvede ad aggiungere una barra di scorrimento

Tratteremo solo il valore hidden con il seguente esempio:

#box2 {

background: #4c74be;

width: 300px;

height: 200px;

margin-bottom: 40px;

overflow-x: hidden; }

Per quanto concerne i valori, come si vede dall’elenco delle proprietà, di ciascun lato si possono definire per il bordo tre aspetti:

• Colore (color)

• Lo stile (style)

• Lo spessore (width)

I valori possibili per il colore sono:

• Un qualsiasi colore

• La parola chiave inherit

Il colore può essere espresso in uno qualunque dei modi presentati nella lezione sulla gestione dei colori. Se non si imposta un valore specifico, il colore sarà quello di primo piano impostato con la proprietà color.

Infine abbiamo lo spessore. Esso può essere modificato secondo i seguenti valori:

• un valore numerico con unità di misura;

• thin: bordo sottile;

• medium: bordo di spessore medio;

• thick: bordo di spessore largo.

Nel caso delle parole chiave la dimensione esatta non è specificata dal linguaggio.

Come scrivere, dunque, una regola per impostare uno solo dei bordi?

div {

border-left-color: black;

border-left-style: solid;

border-left-width: 1px;

}

Trascrizione del corso:

Le spaziature: le proprietà margin e padding

Ciao! In questa video lezione analizzeremo le proprietà padding e margin ovvero, rispettivamente, la spaziatura interna ed esterna ad un oggetto HTML.

Tramite il padding viene definito uno spazio tra l'area dei contenuti ed il confine interno del box. Il suo utilizzo è frequente in due circostanze ben precise:

• quando il box ha un bordo (per creare un po' di distanza tra il contenuto interno al box ed il suo bordo);

• quando il box ha uno sfondo colorato (in modo da creare un effetto visivamente più gradevole in cui il contenuto "non tocca" il perimetro dell'area colorata).

Il valore del padding può essere espresso mediante un numero (accompagnato da un'unità di misura) oppure in percentuale.

Vediamo un primo esempio:

div.box { padding: 10px; }

Con questa regola abbiamo applicato un padding di 10 pixel su tutti i lati del contenuto: superiore, inferiore, destro e sinistro.

Volendo, però, è anche possibile prevedere valori differenti, per farlo si utilizza la proprietà padding specificando quattro valori in questo modo:

div.box { padding: 10px 5px 15px 30px; }

L'ordine (da sinistra verso destra) è il seguente:

• padding superiore = 10px

• padding destro = 5px

• padding inferiore = 15px

• padding sinistro = 30px

In pratica il primo valore corrisponde al padding superiore e poi si prosegue muovendosi in senso orario.

Un altra modalità prevista da CSS per la definizione di padding distinti per i singoli lati è quella che prevede l'utilizzo delle proprietà specifiche:

• padding-top (padding superiore)

• padding-bottom (padding inferiore)

• padding-left (padding sinistro)

• padding-right (padding destro)

Il loro funzionamento è intuitivo, vediamo qualche esempio:

div.box {

padding-top: 10px;

padding-left: 20px;

}

Per certi versi molto simile a padding è la proprietà margin. A differenza della prima (che come abbiamo detto definisce una spaziatura interna al box), la proprietà margin assegna un margine esterno al box, quindi "al di fuori" del suo perimetro.

Normalmente margin è utilizzata per distanziare i vari elementi della pagina tra loro.

Vediamo un esempio:

div.box { margin: 10px; }

Mediante questa semplice regola CSS, il nostro box avrà un margine di 10 pixel su tutti i lati.

Esattamente come accade con padding, è possibile prevedere per margin quattro valori diversi:

div.box { margin: 10px 5px 15px 30px; }

L'ordine (da sinistra verso destra) è il seguente:

• margine superiore = 10px

• margine destro = 5px

• margine inferiore = 15px

• margine sinistro = 30px

Anche qui il primo valore corrisponde al margine superiore e poi si prosegue muovendosi in senso orario.

Qualora vengano definiti due valori numerici come in questo esempio:

div.box { margin: 10px 20px; }

il primo valore (10px) si riferisce ai margini superiore ed inferiore mentre il secondo valore (20px) a quelli destro e sinistro.

Anche i margini, come i padding, possono essere definiti mediante quattro proprietà specifiche:

• margin-top (margine superiore)

• margin-bottom (margine inferiore)

• margin-left (margine sinistro)

• margin-right (margine destro)

Conclusione corso

E siamo arrivati alla conclusione del corso sulle basi dell’HTML. Adesso possiamo dire che anche tu sei un web designer junior. C’è tanta strada da fare e tanti argomenti da scoprire che ti aiuteranno a lavorare in maniera più performante e a realizzare un prodotto più di alta qualità, ti ringrazio per aver preso atto nella visualizzazione di questo corso. Tanti saluti e a presto!