HTML & CSS per principianti

Chi vuole creare siti web entra prima o poi in contatto con l'HTML. Perciò nei prossimi video di formazione esploreremo insieme il bellissimo mondo dell'HTML. Passo dopo passo vedrete cosa questa lingua ha da offrire e come è possibile creare siti web combinandola con i fogli di stile. All'inizio, tuttavia, c'è una domanda: cosa c'è in realtà dietro all'HTML e ai fogli di stile? Alla fine di questi video di formazione, scoprirete inoltre di quale software avete bisogno per creare e testare siti web.

Al contrario dei linguaggi di programmazione come ad esempio Java, è possibile ottenere rapidamente i primi risultati in HTML senza dover imparare molto. Tutto ciò di cui avete bisogno per iniziare sono un editor e un browser. In questo video corso imparerete a creare il vostro primo documento HTML e otterrete immediatamente un'anteprima nel browser. E così, nel frattempo, scoprirete come sono strutturati i documenti HTML, ovvero le pagine web, e a quali principi di base seguono.

Il collegamento tra i concetti di elemento, tag e attributo lo conoscete già dalla prima parte di questa serie. Ora si tratta di capire come utilizzare queste cose praticamente nei documenti HTML. Infine, concludendo questo video training, scoprirete come verificare la correttezza sintattica del vostro codice HTML.

Le vostre pagine web sicuramente non saranno fatte solo di immagini, ma anche di testo. E i testi, già solo per una buona leggibilità, dovrebbero essere strutturati in modo sensato. A tale scopo, HTML mette a disposizione numerosi elementi. In questo video corso verranno presentati gli elementi di strutturazione più importanti per i testi. Inoltre, scoprirete come mascherare i caratteri HTML-specifici e come stampare le liste di programmi.

Per una buona leggibilità dei testi è necessaria una formattazione adeguata. E ciò va oltre gli elementi di strutturazione pura come titoli e paragrafi di testo. Ad esempio, in HTML è possibile evidenziare le citazioni e rendere grassetto o corsivo determinati passaggi. Questo video corso fornisce gli strumenti necessari per farlo.

Gli elementi che incontrerai spesso in HTML sono le liste. Questo non vale solo per le liste di attività, i dati di contatto, ma anche per la definizione dei menu. Le liste svolgono quindi un ruolo centrale in HTML. È abbastanza importante dare un'occhiata approfondita ad esse. In questo video di formazione imparerai tutte le varianti di liste che HTML ha da offrire. Queste includono liste puntate, liste numerate, liste di definizione e liste di menu. Inoltre, riceverai indicazioni su come adattare visivamente le liste quando necessario.

Le tabelle continuano a svolgere un ruolo importante sui siti web. Tuttavia, ciò vale solo per la presentazione dei dati. Quando ancora non c'era CSS o questo non era supportato dai browser, le tabelle servivano anche a un altro scopo: venivano utilizzate per il layout. All'interno delle celle delle tabelle venivano posizionati gli elementi della pagina. I mostri dei layout delle tabelle risultanti appartengono fortunatamente al passato grazie al CSS. Oggi le tabelle nel web design vengono utilizzate esclusivamente per ciò a cui sono destinate: per mostrare chiaramente i dati.

Tabelle armoniose non devono necessariamente consistere in un numero identico di celle all'interno di una riga della tabella. In questo video di formazione viene mostrato come è possibile connettere le celle della tabella tra loro. Nella seconda parte, si apprenderà qualcosa sull'etichettatura delle tabelle. Questo aspetto è importante, poiché consente di mostrare immediatamente ai visitatori di che dati si tratti. Il video di formazione si conclude con un'attenta analisi della progettazione delle tabelle in HTML. Infatti, in questo settore si è verificato un notevole cambiamento rispetto alle versioni HTML precedenti.

Quasi nessun sito web può fare a meno di grafiche. Non sorprende quindi che il tema delle grafiche occupi un posto importante anche in questa serie. In questo e nei prossimi video di formazione verrà mostrato come potete inserire grafiche nei vostri siti web. Tuttavia, all'inizio un altro aspetto è prioritario: quali formati di immagini sono adatti per l'uso online? Nel secondo video si tratterà invece di come si possono referenziare i percorsi delle immagini.

Come vengono fondamentalmente referenziate le immagini è stato mostrato nella parte precedente. Ma questo non significa che si sia già raggiunto il limite per quanto riguarda le immagini. Infatti, le immagini possono essere descritte più dettagliatamente attraverso attributi specifici. Di questo si tratta all'inizio di questo video. Nella seconda parte viene descritto come realizzare le didascalie delle immagini utilizzando la sintassi HTML5.

Il sale nella minestra di Internet è la possibilità di collegare i contenuti tra loro tramite collegamenti ipertestuali. Se non ci fossero questi collegamenti ipertestuali, Internet non sarebbe concepibile nella sua forma attuale. Scoprirete in questo e nel prossimo video training le diverse opzioni che l'HTML vi offre riguardo alle definizioni dei collegamenti ipertestuali.

HTML offre molte più possibilità in merito ai collegamenti ipertestuali rispetto a quanto mostrato nel video di formazione precedente. Ad esempio, è possibile definire link e-mail e offrire file per il download. Queste e altre varianti di collegamenti ipertestuali verranno illustrate in questo video di formazione.

Per anticipare: Proprio nell'HTML5 i moduli hanno fatto un balzo in avanti. Grazie a numerosi nuovi tipi di campo è possibile creare moduli molto interessanti. Naturalmente, in questo corso video imparerete ancora a conoscere queste nuove possibilità. Ma cominciamo con gli strumenti necessari per definire i moduli. All'inizio si tratta di creare campi di input monolinea. Vedrete come definirli, come preimpostarli con valori e come renderli non modificabili. Inoltre, imparerete la definizione dei campi password. Infatti, si tratta di un tipo di campo che può sempre tornare utile.

In questo video imparerete a conoscere ulteriori tipi di campi, con i quali potrete equipaggiare i vostri moduli. Nello specifico si tratta di campi di scelta, pulsanti radio e caselle di controllo. Tutti questi sono elementi importanti che si utilizzano spesso nei moduli. Motivo sufficiente, quindi, per dare un'occhiata più approfondita a questi e ad altri elementi.

Con HTML5 si sono verificate molte novità, specialmente per quanto riguarda i moduli. Un motivo sufficiente per esaminare attentamente le numerose nuove funzionalità del modulo che possono essere utilizzate, che sono ora disponibili. Infatti, basta con i noiosi campi di input. Finalmente è possibile definire anche slider, campi data, ecc. - e tutto ciò senza l'uso di JavaScript.

L'inizio nel mondo dei moduli HTML5 è stato preparato dal video training precedente. Tuttavia, questo non significa che sia stato raggiunto il limite massimo. Infatti, HTML5 ha molto altro da offrire in questo ambito.

In HTML5, oltre ai tipi di campo presentati, ci sono anche molti altri aspetti interessanti. Ad esempio, ora è possibile implementare con molto poco sforzo una funzione di autocompletamento per i campi del modulo sul modello di Google. Queste e altre cose verranno mostrate in questo video training.

Chiunque si occupi di HTML5 non può ignorare l'argomento della semantica. In questo e nei prossimi video di formazione, imparerete gli elementi più importanti che HTML5 offre, con i quali potrete strutturare i documenti in modo sensato. Infatti, questa strutturazione logica è imprescindibile se si vuole garantire la futura compatibilità delle proprie pagine web.

HTML5 porta con sé numerosi nuovi elementi di strutturazione. Quali siano in generale, è stato mostrato nel video di formazione precedente. Ora si tratta di utilizzare praticamente questi elementi. Infatti, questi elementi sono quelli che garantiscono una strutturazione semantica dei documenti. In questo video di formazione, scoprirete principalmente i due elementi article e section. Questi garantiscono la struttura di base dei documenti HTML. Alla fine di questo video, verrà anche dato un'occhiata alle differenze tra div, article e section.

In HTML5 i documenti possono essere suddivisi non solo in articoli e sezioni. Infatti, ci sono ancora molti elementi aggiuntivi come header, footer & Co. per una strutturazione semantica. Questi elementi sono sicuramente degni di essere esaminati più attentamente.

In questo ultimo video di formazione della serie sugli elementi semantici, imparerete ulteriori elementi di strutturazione. Infatti, HTML5 offre anche elementi per aree di navigazione, margine e sintesi.

Nelle versioni precedenti di HTML, l'inclusione di contenuti multimediali era un incubo. Con una combinazione di elementi object ed embed si cercava di portare video e audio sul sito web. La riproduzione effettiva del video incluso era incerta. Anche in questo campo, in HTML5 è stato fatto molto.

Come potete vedere, vi ho mostrato come integrare i video. Naturalmente, i video non sono l'unica cosa che si può presentare ai visitatori del sito web. In questo video di formazione viene descritto quali opzioni HTML5 offre per integrare file audio e filmati Flash. Perché a volte è necessario mostrare anche queste cose sulla propria pagina.

I frame in HTML5 non esistono più. I loro cugini, gli iFrame, sono però riusciti a sopravvivere all'era HTML5 e sono a disposizione in HTML5. Mentre i frame classici dividono una pagina in aree indipendenti, tramite gli iFrame è possibile incorporare risorse arbitrarie nelle pagine web.

HTML serve per la strutturazione dei contenuti. Una volta entrati nel design della pagina, entrano in gioco i fogli di stile in cascata (CSS). Infatti, è solo la combinazione di CSS e HTML che permette di trasformare una banale struttura HTML in pagine web accattivanti. Motivo sufficiente quindi per dare uno sguardo più attento a CSS.

Un concetto che vi troverete spesso ad affrontare in relazione al CSS è quello dei "selettori". Attraverso questi selettori si definiscono gli elementi che dovranno essere formattati con il CSS. In questo video training, imparerete i primi selettori. Vi verranno presentati i selettori di elemento, ID e universali. Con essi vi troverete ad avere a che fare quotidianamente nel momento in cui progettate i vostri siti web con CSS.

Alcuni selettori sono stati presentati nel video di formazione precedente. Naturalmente, CSS offre comunque numerosi altri selettori.

In questo ultimo video training sui selettori, vi presento una forma molto speciale di selettori. Si tratta di cosiddette pseudoclassi e pseudoelementi. Questi sono selettori che non si riferiscono a specifici elementi HTML, ma vengono generati dal dispositivo di output.

In questo e nei prossimi video di formazione vi presenterò le più importanti proprietà del CSS. In questo contesto, non si tratta di presentarvi un riferimento CSS, ma piuttosto di farvi capire cosa si può fare con il CSS. Cominceremo con la formattazione del testo. In questo video di formazione verranno presentate tutte le cose direttamente correlate ai cosiddetti fonts. Tenete presente che ci sono altre proprietà relative alla formattazione del testo che verranno mostrate nel prossimo video di formazione.

Le proprietà CSS presentate in questo video training consentono di personalizzare otticamente testi e caratteri. Ad esempio, è possibile modificare gli spazi tra le singole lettere e allineare i testi. Anche queste proprietà vi aiuteranno quindi a presentare testi in modo accattivante.

Naturalmente, nel CSS non possono mancare le definizioni dei colori e gli sfondi grafici. Le proprietà corrispondenti vengono presentate in questo video-training. Infatti, il CSS offre numerose possibilità anche in questo campo. Si possono definire non solo semplicemente colori e immagini, ma anche sfondi grafici ripetuti.

Proprio quando si tratta di progettare il layout delle pagine web, vi troverete a che fare con la definizione di margini esterni e spazi. Nei video di formazione di questa serie, verrà realizzato un progetto esemplare completo, nel quale saranno mostrati in modo pratico l'utilizzo di queste e altre proprietà CSS.

Il CSS offre alcune proprietà interessanti per paragrafi e blocchi di testo che non voglio nascondermi. Ad esempio, è possibile allineare i paragrafi di testo a sinistra e a destra.

Quando si parla di cornici, la maggior parte pensa certamente in primo luogo alle tabelle. E in effetti, le cornici svolgono un ruolo importante in relazione alle tabelle. Tuttavia, attraverso il CSS è possibile applicare cornici anche ad altri elementi. E come queste cornici appaiono alla fine, può anche essere determinato esplicitamente tramite definizioni CSS.

Come definire le liste, probabilmente lo sapete da tempo. Infatti, è stato ampiamente dimostrato all'interno di questa serie. Tuttavia, le liste non sono necessariamente eleganti di per sé. Per renderle esteticamente gradevoli, ci sono apposite proprietà CSS. Quale siano e come utilizzarle, lo scoprirete in questo video training. Nel secondo parte si tratta poi dei cosiddetti contatori, che consentono di implementare numerazioni più complesse.

Quando si tratta di progettare il layout di siti web, il cosiddetto box model sarà il vostro compagno costante. Infatti, attraverso di questo si stabilisce alla fine come e dove posizionare gli elementi.

Per poter posizionare gli elementi all'interno del sito web nei punti desiderati, dovete fare ricorso a proprietà CSS specifiche.

Nel video di formazione precedente è stato accennato brevemente al cosiddetto principio di floating. Tuttavia, l'argomento è così complesso che verrà ora dato uno sguardo più dettagliato a quel float. Infatti, si tratta di un concetto fondamentale in CSS. Infatti, solo se si comprende questo argomento, è possibile creare effettivamente siti web.

Nei precedenti video di formazione sono stati illustrati i concetti di base per lavorare con HTML e CSS. Ora, naturalmente, arriverà il momento di raccogliere i primi frutti. Nei prossimi video di formazione, verrà quindi costruito passo dopo passo un sito web di esempio. Tuttavia, in questo video di formazione, inizierete per prima cosa a conoscere le varie varianti di layout. Perché la scelta della forma di layout più adatta dovrebbe sempre essere il punto di partenza nei vostri pensieri per la progettazione di un sito web.

Nel nostro progetto pratico, parto da un layout a colonne tipico. Tuttavia, prima di presentare questo progetto dal vivo e a colori, voglio mostrarvi in modo molto concreto come potete implementare voi stessi layout a colonne. Il focus sarà su layout a due e tre colonne, poiché questi continuano ad essere la base per la maggior parte dei siti web.

Nei prossimi training video vi mostrerò come realizzare passo dopo passo un layout web. Ci sono approcci molto diversi per farlo. Spesso i layout vengono creati in Photoshop. Successivamente si tagliano gli elementi di ogni pagina e si riuniscono di nuovo come un unico sito web utilizzando CSS e HTML. Anche qui il procedimento è lo stesso. Tuttavia, anziché utilizzare Photoshop, uso il software gratuito GIMP. I passaggi descritti possono comunque essere riprodotti anche in Photoshop.

I primi passi verso il proprio layout sono stati compiuti nel video di formazione precedente. Ovviamente mancano ancora numerosi elementi. Questi verranno aggiunti in questo video di formazione. Una volta che il layout è pronto, si passerà al taglio, il cosiddetto "slicen". Poiché questo è fondamentalmente il passaggio, tramite il quale diventa possibile implementare praticamente il design creato tramite HTML e CSS.

Avete creato il layout. Ora passeremo alla sua implementazione pratica. In questo video training creeremo insieme la struttura di base in HTML del sito web.

La struttura di base della pagina è pronta, ma appare ancora piuttosto spartana. In questo video corso il contenuto della pagina sarà ulteriormente ampliato. Al centro dell'attenzione ci sarà innanzitutto il menu che si trova nella parte superiore della pagina. A questo seguono il menu destro e inferiore.

Un aspetto fondamentale per un sito web esteticamente piacevole è naturalmente il suo carattere tipografico. Nel corso di questa serie avete già conosciuto le possibilità che HTML e CSS offrono per la formattazione del testo. In questo video training, queste verranno utilizzate per aggiornare la pagina. A proposito, non ci limiteremo solo alle varianti classiche. La parola magica per l'uso di font "esotici" è @font-face.

Di solito, si dovrebbe offrire ai visitatori la possibilità di contattarci. Nel modo più semplice, si può annotare un numero di telefono e/o un indirizzo email. Si può fare in questo modo, ma non è particolarmente comodo per i visitatori. Perciò in questo video corso creeremo un modulo attraverso il quale i visitatori possono contattarci in modo molto semplice. E naturalmente sfrutteremo le opportunità offerte da HTML5 e CSS3.

La struttura di base e il design fondamentale del modulo sono definiti e completati. E infatti il modulo si presenta già abbastanza attraente. Grazie al CSS3, però, c'è ancora molto di più quando si tratta di migliorare l'aspetto visivo del modulo. Pertanto, in questo video-training il modulo sarà ancora un po' personalizzato.

Già in questo momento avrete sicuramente investito molto tempo e lavoro nello sviluppo del vostro sito web. Dalla concezione alla progettazione del layout fino alla sua implementazione in HTML e CSS. Motivo sufficiente, quindi, per presentare finalmente il vostro sito web al mondo. Ecco di cosa si tratta in questo video training. Vi mostrerò come potete mettere online il sito web. Per prima cosa, scoprirete come ottenere il provider giusto e il pacchetto di spazio web adatto. Successivamente, i dati verranno caricati sul server utilizzando il popolare FileZilla. E poi, beh, a quel punto il sito web sarà effettivamente online.

In questo video corso voglio darvi un piccolo sguardo sull'ambiente di sviluppo corretto per la creazione di siti web. Chi ha già scritto interi siti web o pagine web più piccole, di solito dispone già di questi editor e può saltare questo video.

Verranno mostrati:
DreamWeaver
Panic Coda
Panic Transmit: http://panic.com/transmit/
Filezilla: http://filezilla.de/

L'HTML5-Boilerplate è un potente modello per siti web HTML5 e CSS3; rende l'HTML5 il più compatibile possibile con i browser e include alcuni ottimi modelli di codice per JavaScript, CSS3 e naturalmente anche HTML.

In questo video training voglio presentarvi queste stesse funzioni. Attualmente non c'è un modello migliore per iniziare con HTML5 e CSS3.

In questo video training vorrei presentarvi alcuni strumenti molto utili con cui è possibile sviluppare HTML5 e CSS3.

Questi includono:
html5css3box.com
kuler.adobe.com (ora https://color.adobe.com/de/create/color-wheel)
css3generator.com
typetester.org
google.com/webfonts
cufon.shoqolate.com
videojs.com