[HTML] Introduzione all’HTML

1.1 Introduzione.

Se tu hai voglia di creare il tuo sito web usando l’HTML e CSS, oppure stai semplicemente cercando un supporto aggiuntivo perché pensi che le lezioni di HTML e CSS che ricevi all’università non sono abbastanza chiare, allora questo è il posto giusto. Se invece usi l’HTML e il CSS al lavoro, anche in quel caso, il corso è strutturato in modo da aiutarti a mantenere aggiornate le tue conoscenze, o può essere usato come manuale di riferimento in quanto include varie esercitazioni di laboratorio ed ‘esempi pratici. In questo corso cercherò di ridurre quanto possibile i livelli di astrazione e di teoria al fine di agevolare l’auto-apprendimento.  Se pensi invece di avere una solida base in HTML e cerchi un approfondimento, ti invito a seguire direttamente il Corso HTML Livello Avanzato.

In questo corso imparerai a usare L’HTML 5 e il CSS3 che sono alla base di ogni siti web, indipendentemente dalla tecnologia utilizzata (che il sito sia basato su ASP.NET, CMS vari, etc.. andiamo sempre a parare sull’HTML e il CSS).  Ti anticipo subito che è difficile oggigiorno scrivere riga per riga, e a mano il codice HTML, perché nella maggioranza delle situazioni viene auto-generato o ci sono già pacchetti pronti all’utilizzo all’occorrenza di Bootstrap per esempio; ciò non toglie il fatto che è comunque necessario avere le basi in HTML.

[mc type=’int’ theme = 1]Ma scusa cosa centra il CSS3 quando volevo solo studiarmi l’HTML5?  [/mc]

 

Non ti preoccupare. I CSS o fogli di stile permettono di definire separatamente le caratteristiche grafiche o stili di una pagina, è un linguaggio quasi indissociabile dall’HTML e ne riparleremo ampiamente.

1.2 Prerequisiti

I prerequisiti per questo corso sono:

  • Demistificare la programmazione;
  • Avere la volontà di portare a termine gli obbiettivi. (Tutte le volte che cominci a studiare e lasci a metà rappresenta uno spreco di tempo e risorse perché poi, dimentichi tutto e riparti da zero con una probabilità alta di abbandonare)
  • Mentalità aperta;
  • Dimestichezza nell’uso del computer;
  • Non è richiesta la conoscenza di algoritmi.
  • Non è richiesta nessuna base in HTML o altri linguaggi di programmazione.
  • Il corso potrebbe essere seguito da chi non ha una laurea

1.3. Come funzionano le pagine web.

Quando apri un sito web con il tuo browser, devi sapere che ci sono molti meccanismi che di nascosto si attivano per permetterti di vedere a video il contenuto della pagina nel formato desiderato. Il computer si basa quindi su ciò che gli è stato spiegato in HTML e in CSS per sapere cosa stampare, a quale posizione dello schermo. Quindi per poter creare una pagina web devo dare le istruzioni al computer. Per fare ciò, non basta solo inserire il testo che verrà stampato ma devo specificare dove, come, con quale font e in che colore verrà stampato quel testo, devo indicare come verranno visualizzate le immagini,  gestire l’audio  fare dei  link su altre pagine, o altri siti web eccetera. Per questo motivo, l’HTML viene definito come un linguaggio di make-up o di marcatura. Tutto il codice scritto viene tradotto/interpretato da un browser.

introduzionehtml

L’HTML e il CSS sono la chiave del funzionamento di tutti i siti web, in particolare il linguaggio HTML è stato creato dal creatore  stesso  della   World Wide Web  Consortium (W3C)  il  sig.  Tim Berners-Lee  nel 1991, E sin dalla seconda versione dell’HTML, è compito della W3C seguire e definire  nuove versioni del linguaggio più usato del web. Per la sua storia, evoluzione e il successo ci sarebbe molto da dire ma questo esula dallo scopo di questo corso.

1.4. Importanza dei browser

Un Browser o Navigatore web è un programma che installato su di un computer permette di visualizzare i siti web.  E’ compito del browser interpretare i codici HTML e CSS e stampare a video il risultato. Per esempio posso definire nel foglio CSS che tutti i miei titoli saranno sempre il blu, o definire il font di un paragrafo ecc. Il browser è un programma estremamente complesso, e i vari browser, solitamente non interpretano le cose esattamente nello stesso modo, quindi è compito tuo verificare che il tuo codice funzioni correttamente nei vari browser esistenti all’occorrenza di Chrome,  Explorer, Safari, Opera, Firefox, ecc..

1.5. Codice sorgente di una pagina web.

Supponiamo di volere vedere il codice sorgente di una pagina:  Apri Google Chrome, vai per esempio su www.yahoo.it, dalla home page fai clic destro e dal menu a tendina scegli codice sorgente pagina. Otterrai la seconda schermata qui sotto.

introduzione_html

 

freccia

introduzione_html1

 

Con questo esempio, vedi che, qualunque sia la complessità di un sito, il codice che sta sotto è comunque l‘html. Chrome ha tradotto il codice sopra nella home page di Yahoo!.

 

1.6. Definizioni

  • HTML (HyperText Markup Language) : Fu usato per la prima volta nel 1991, Contemporaneamente al lancio del Web, il suo ruolo è di gestire i contenuti,  definire tutto quello che verrà visualizzato sulla pagina, link, testo, immagini, definire la disposizione relativa degli elementi. Potresti per esempio definire che questo sarà il mio titolo, quello  il mio menu e cosi via.
  • HTML1: Primissima Versione dell’HTML creata nel 1991.
  • HTML2: Seconda versione dell’HTML dal ’94 al ’96, questa versione con cambiamenti maggiori fissa le basi per le successive versioni dell’HTML, è stato compito della W3C definire le regole in questa versione.
  • HTML3: Versione introdotta nel 1996, con l’apparizione di nuove funzionalità, quali per esempio uso di script.
  • HTML4:   Nato nel 98, e molto usata nel 2000, propone l’uso di frame, tabelle complesse, miglioramento di formulari e consente  di usufruire dei fogli di stile CSS.
  • HTML5:  Ultima versione usata fino ad oggi,  tieni presente  che non è una riformulazione delle versioni precedenti, bensì,  include tutti gli elementi validi in quelle ultime, e integra anche l’XHTML 1.0,  porta con se molti miglioramenti, nuove gestione dei formulari, Gestione dei video,  ed’ è molto più espressivo con l’aggiunta degli elementi quali  article, footer, section, header  e la possibilità di usare gli API JavaScript. Nelle lezioni successive vedremo insieme tutte quelle novità dell’HTML5 rispetto ad’altre versioni la cui conoscenza è comunque  necessaria .
  • CSS (Cascading Style Sheets) come già accennato permette di definire gli stili. Anche il CSS così come l’HTML è evoluto nel tempo, passando dalla prima versione CSS 1 al lancio nel 1996 al CSS3 di oggi che è pieno di nuove  funzionalità che andremo a scoprire in questo coso.
  • XML:  Naturalmente l’HTML non è unico linguaggio di make-up, esiste anche l’XML,  e l’XHTML (XML + HTML) che sono tutt’oggi poco usati per il web rispetto all’HTML5.

1.7. Conclusione/riassunto

Per costruire un sito Web hai bisogno di scrivere un codice in HTML e CSS, di un browser per testare il tuo sito e un editor di testo. Nella prossima lezione ti dirò quali sono i migliori editor presenti e realizzerai finalmente il tuo primo sito web.