Linguaggio HTML

Il linguaggio HTML è quel testo che permette di realizzare le pagine web, l’acronimo HTML sta per HyperText Markup Language, che significa “linguaggio di contrassegno per gli ipertesti”.

Il linguaggio HTML è di pubblico dominio, quindi è liberamente utilizzabile.

Non è quindi un linguaggio di programmazione, come possono esserlo PHP, Ruby, Python e via dicendo, ma è un linguaggio di markup, che indica quindi come posizionare gli elementi all’interno della pagina. Per fare un esempio pratico è come se ci permettesse di predisporre gli elementi di un quadro come vogliamo sulla tela.

Tutte le pagine web html sono formate da dei tag, come può essere il tag “<img>” per mostrare le immagini o il tag “<hr>” o “<table>” per le tabelle, che sono inclusi fra i segni < e > e dai loro relativi attributi, come può essere “src” per il tag “img”.

Quando pensiamo all’html non dobbiamo pensare ad un qualcosa di recente, ma a qualcosa che è nato nel 1991 e si è evoluto fino ad oggi nella sua versione 5.

L’html segue uno standard, che è definito dal W3C, un’organizzazione che si occupa di definire lo sviluppo dello standard con cui scrivere le pagine HTML.

 

Il primo sito web al mondo in HTML

Il primo sito web mai creato si può ritrovare a questo link: http://info.cern.ch/hypertext/WWW/TheProject.html (anche se è stato aggiornato nel 1992 e non è più disponibile la copia originale). Lo scopo era semplice, usare l’ipertesto, cioè i collegamenti per condividere informazioni (a scopo scientifico). Immagina quindi un libro con un indice che riporta subito a quel contenuto scelto, senza i limiti fisici del libro e dello spazio.

Il problema che si è voluto risolvere era che i team di lavoro e gli scienziati erano distanti fra di loro, la posta era lenta, le chiamata telefoniche non erano certamente comode e quindi c’era la necessità di condividere le informazioni in maniera rapida da tutto il mondo. Questo è stato possibile grazie a Tim Berners-Lee e al progetto WWW.

I primi siti web erano testo e link, nulla di più (anche perché con le vecchie connessioni era veramente più veloce farsi inviare un’immagine con un piccione viaggiatore rispetto ad usare internet), nel tempo, grazie anche all’evoluzione della tecnologia, i siti si sono evoluti, così come i sistemi in grado di leggerli (i browser).

 

WorldWideWeb browser testuale

Ovviamente inizialmente non esistevano finestre, account e tutte le funzionalità di oggi, esisteva solo il “WorldWideWeb”, poi rinominato “Nexus” ed era l’unico Browser testuale esistente, nonché un editor del tipo “WYSIWYG“ che permetteva di creare pagine web.

 

Html + CSS

Già dalle prime specifiche il web, oltre al semplice Html, permetteva l’uso dei fogli di stile CSS, ovvero Cascading Style Sheets che tradotto in italiano significa “fogli di stile a cascata”, non si tratta di altro che il modo per fare il testo più grande, piccolo, colorato ed altro, quindi di dargli uno stile.

 

Html o htm

Alcune volte si possono trovare dei file chiamati .htm senza la lettera L finale. Questi file sono perfettamente uguali ai file html e venivano generati da vecchi sistemi in quanto esisteva un limite di 8 caratteri per nome del file e quindi un carattere risparmiato era sicuramente un qualcosa di positivo.

 

Il linguaggio HTML oggi

Oggi il linguaggio HTML, arrivato alla sua versione 5, è cambiato profondamente e permette di fare cose un tempo inimmaginabili. Si parla di gestione di hardware e periferiche, come la webcam o la fotocamera dello smartphone, la gestione dei tocchi sullo schermo, la riproduzione e la cattura dell’audio. Inoltre adesso con l’html è possibile creare APP ibride che funzionano sugli smartphone, tablet e PC.

 

Come iniziare con il linguaggio HTML

Creare una pagina HTML è abbastanza semplice, tutto quello che dobbiamo fare è aprire il blocco note, scriverci qualcosa e salvarlo con il nome test.html, dopodiché apriamolo con un browser (come Chrome) ed il gioco è fatto, vedremo il nostro testo. Peccato che non sia tutto così semplice…

Infatti abbiamo bisogno di alcune cose:

 

TIPS: come browser consiglio chrome, in quanto ha ottimi strumenti integrati per chi deve lavorare con il web.

 

Editor HTML

Il più semplice e basilare editor HTML è sicuramente come il blocco note di windows. Ovviamente esistono diversi editor che permettono di semplificare il nostro lavoro. Un editor di testo leggermente più evoluto è notepad++, gratuitamente scaricabile per windows.

Alcuni web editor che offrono anche un server locale sono:

Questi due web editor sono moderni ed open source, compatibili sia con Windows che con Linux e sono ovviamente gratuiti.

Ovviamente esistono altre IDE (è così che viene chiamato un programma per scrivere il codice), come:

 

Web Hosting Gratuiti

Per iniziare a lavorare ci serve, come detto in precedenza, un hosting web, ovviamente dato che si tratta solo di alcune prove possiamo iniziare con degli hosting Gratuiti come:

per poi passare successivamente a quelli a pagamento che sono sicuramente migliori ed offrono qualcosa in più.

 

Il file iniziale del linguaggio HTML

Come fare per fare in modo che appena aperto un indirizzo web si veda il nostro codice HTML? Semplice basta chiamare la pagina index.html, ovviamente questa impostazione è modificabile ma dobbiamo avere un po’ di competenza con la gestione del server, quindi per il momento è meglio usare sempre il nome index.html per la nostra prima pagina del sito web.

 

Creiamo la nostra prima pagina web con il codice HTML

Ed è arrivato il momento di creare la nostra prima pagina web con il linguaggio HTML, apriamo quindi il nostro editor e scriviamo questo codice:

<!doctype html>
<html lang="">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="apple-touch-icon" href="icon.png">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <p>Prova</p>
  <script src="js/main.js"></script>
</body>
</html>

Ora andiamo ad analizzarlo:

 

TIPS: se vogliamo visualizzare tutto il contenuto html di una pagina possiamo premere CTRL+U oppure click destro e selezionare “ispeziona elemento”.

 

Come visualizzare il nostro file HTML

Aprire il nostro file HTML è abbastanza semplice, facciamo click destro e selezioniamo “Apri con Chrome (il il browser scelto)”.

Vedremo così il nostro primo risultato. Ora posizioniamoci sulla barra degli url (quella in alto con su scritto http://...), esistono 2 tipi di URL:

Il primo è pubblicamente accessibile da tutti, il secondo è visibile solo da noi. Dobbiamo prestare attenzione a non usare includere file con il nome composto da un url locale o altrimenti una volta online non lo vedrà nessuno.

 

Le nostre scelte per scrivere il codice HTML

Come abbiamo detto esistono diversi browser ed editor, noi, per semplicità, faremo riferimento a Brackets come editor e Chrome come Browser.

 

TIPS: se accedi al sito caniuse.com puoi vedere se la proprietà che è in uso è compatibile con i maggiori browser e quindi decidere se usarla o meno.

Chrome, modifiche live e visualizzazione mobile

Usare gli strumenti per sviluppatore di Chrome è abbastanza semplice, facciamo click destro sulla pagina e selezioniamo “ispeziona”, od in alternativa CTRL+SHIFT+I.

Il primo strumento utile è alla voce “elements” e ci consente di vedere tutto il codice HTML e di apportarne modifiche, facendo click destro su una riga e selezionando “EDIT as HTML”, mentre tutto a destra dell’elemento selezionato abbiamo il codice CSS che ha tale elemento.

Per selezionare un elemento singolo sulla pagina clicchiamo il simbolo con la freccia, il primo in alto a sinistra e poi clicchiamo sull’elemento che vogliamo selezionare, come per magia questo verrà evidenziato.

Infine premendo il simbolo del cellulare (il secondo) potremo visualizzare l’anteprima del nostro sito da cellulare o tablet.

Siccome un'immagine può aiutare tanto ecco una GIF

Brackets uso base

Questo è uno degli editor che preferisco per creare HTML e CSS ed offre alcune ottime funzionalità anche a chi è alle prime armi.
Infatti Brackest permette di:

Ed ovviamente è gratuito ed open source

Per scaricare brackets accediamo a brackets.io e scarichiamo il programma installandolo come un qualunque programma.
Per provare l'anterpima live apriamo semplicemente brackets e dal menu file e selezioniamo semplicemente "anteprima live"

Nella parte a sinistra di brackets abbiamo una piccola casella che se selezionata ci consente di aprire una cartella, dove esisterà il nostro progetto. Selezionando tale cartella abremo, in basso a questa selezione, tutti i nostri file e la nostra cartella, mentre in alto quelli selezionati.

Quindi creiamo sulla nostra scrivania una cartella chiamata sito e creiamo al suo interno un file denomnato index.html con il codice mostrato prima, apriamo la cartella come spiegato adesso e visualizziamo l'anteprima live.

Stile CSS

In realizzazione...

Tabelle html

In realizzazione...

Colori html - Tabella colori html

Nell'html si usano i colori nel valore esadecimale, cioè nel formato #RRGGBB. Dove RR sta per il colore rosso GG significa colore verde e BB sta per il colore blu (da qui la sigla RGB, ovviamente perché abbia un senso bisogna leggere i nomi in inglese). Si usano due numeri interi esadecimali compresi tra 00 e FF, la variazione di questi numeri indica l'intensità del colore, da qui si formano e si possono vedere tutti i colori.

Ad essere precisi i colori standard sono solo 16, ma lo standard X11 ne ha portati molti di più, cioè tutti quelli che puoi vedere qui sotto. Nel nostro codice HTML possiamo scrivere i colori in diversi modi, nel loro nome riportato qui sotto, quello convenzionale, oppure nella versione RGB oppure nella versione #RRGGBB.
Il metodo più diffuso è il codice #RRGGBB.

Esiste una variazione del codice R,G,B, cioè RGBA, dove A sta per alpha ed indica l'opacità, potremo quindi usare un colore e farlo un po' più trasparente, questo valore parte da 1, che sifnifica completamente visibile, ed arriva a 0, che sigifica che non sarà visibile.

Colori rossi
Colore HTML / CSS
Nome Colore
#RRGGBB (R,G,B)
  lightsalmon #FFA07A rgb(255,160,122)
  salmon #FA8072 rgb(250,128,114)
  darksalmon #E9967A rgb(233,150,122)
  lightcoral #F08080 rgb(240,128,128)
  indianred #CD5C5C rgb(205,92,92)
  crimson #DC143C rgb(220,20,60)
  firebrick #B22222 rgb(178,34,34)
  red #FF0000 rgb(255,0,0)
  darkred #8B0000 rgb(139,0,0)

Colori in tinta arancione
Colore HTML / CSS
Nome Colore
#RRGGBB (R,G,B)
  coral #FF7F50 rgb(255,127,80)
  tomato #FF6347 rgb(255,99,71)
  orangered #FF4500 rgb(255,69,0)
  gold #FFD700 rgb(255,215,0)
  orange #FFA500 rgb(255,165,0)
  darkorange #FF8C00 rgb(255,140,0)

Colori gialli
Colore HTML / CSS
Nome Colore
#RRGGBB (R,G,B)
  lightyellow #FFFFE0 rgb(255,255,224)
  lemonchiffon #FFFACD rgb(255,250,205)
  lightgoldenrodyellow #FAFAD2 rgb(250,250,210)
  papayawhip #FFEFD5 rgb(255,239,213)
  moccasin #FFE4B5 rgb(255,228,181)
  peachpuff #FFDAB9 rgb(255,218,185)
  palegoldenrod #EEE8AA rgb(238,232,170)
  khaki #F0E68C rgb(240,230,140)
  darkkhaki #BDB76B rgb(189,183,107)
  yellow #FFFF00 rgb(255,255,0)

Colori verdi per CSS ed HTML
Colore HTML / CSS
Nome Colore
#RRGGBB (R,G,B)
  lawngreen #7CFC00 rgb(124,252,0)
  chartreuse #7FFF00 rgb(127,255,0)
  limegreen #32CD32 rgb(50,205,50)
  lime #00FF00 rgb(0.255.0)
  forestgreen #228B22 rgb(34,139,34)
  green #008000 rgb(0,128,0)
  darkgreen #006400 rgb(0,100,0)
  greenyellow #ADFF2F rgb(173,255,47)
  yellowgreen #9ACD32 rgb(154,205,50)
  springgreen #00FF7F rgb(0,255,127)
  mediumspringgreen #00FA9A rgb(0,250,154)
  lightgreen #90EE90 rgb(144,238,144)
  palegreen #98FB98 rgb(152,251,152)
  darkseagreen #8FBC8F rgb(143,188,143)
  mediumseagreen #3CB371 rgb(60,179,113)
  seagreen #2E8B57 rgb(46,139,87)
  olive #808000 rgb(128,128,0)
  darkolivegreen #556B2F rgb(85,107,47)
  olivedrab #6B8E23 rgb(107,142,35)

Colori azzurri
Colore HTML / CSS
Nome Colore
#RRGGBB (R,G,B)
  lightcyan #E0FFFF rgb(224,255,255)
  cyan #00FFFF rgb(0,255,255)
  aqua #00FFFF rgb(0,255,255)
  aquamarine #7FFFD4 rgb(127,255,212)
  mediumaquamarine #66CDAA rgb(102,205,170)
  paleturquoise #AFEEEE rgb(175,238,238)
  turquoise #40E0D0 rgb(64,224,208)
  mediumturquoise #48D1CC rgb(72,209,204)
  darkturquoise #00CED1 rgb(0,206,209)
  lightseagreen #20B2AA rgb(32,178,170)
  cadetblue #5F9EA0 rgb(95,158,160)
  darkcyan #008B8B rgb(0,139,139)
  teal #008080 rgb(0,128,128)

Colori in tinta blu
Colore HTML / CSS
Nome Colore
#RRGGBB (R,G,B)
  powderblue #B0E0E6 rgb(176,224,230)
  lightblue #ADD8E6 rgb(173,216,230)
  lightskyblue #87CEFA rgb(135,206,250)
  skyblue #87CEEB rgb(135,206,235)
  deepskyblue #00BFFF rgb(0,191,255)
  lightsteelblue #B0C4DE rgb(176,196,222)
  dodgerblue #1E90FF rgb(30,144,255)
  cornflowerblue #6495ED rgb(100,149,237)
  steelblue #4682B4 rgb(70,130,180)
  royalblue #4169E1 rgb(65,105,225)
  blue #0000FF rgb(0,0,255)
  mediumblue #0000CD rgb(0,0,205)
  darkblue #00008B rgb(0,0,139)
  navy #000080 rgb(0,0,128)
  midnightblue #191970 rgb(25,25,112)
  mediumslateblue #7B68EE rgb(123,104,238)
  slateblue #6A5ACD rgb(106,90,205)
  darkslateblue #483D8B rgb(72,61,139)

Colori viola
Colore HTML / CSS
 Nome Colore
 #RRGGBB (R,G,B)
  lavender #E6E6FA rgb(230,230,250)
  thistle #D8BFD8 rgb(216,191,216)
  plum #DDA0DD rgb(221,160,221)
  violet #EE82EE rgb(238,130,238)
  orchid #DA70D6 rgb(218,112,214)
  fuchsia #FF00FF rgb(255,0,255)
  magenta #FF00FF rgb(255,0,255)
  mediumorchid #BA55D3 rgb(186,85,211)
  mediumpurple #9370DB rgb(147,112,219)
  blueviolet #8A2BE2 rgb(138,43,226)
  darkviolet #9400D3 rgb(148,0,211)
  darkorchid #9932CC rgb(153,50,204)
  darkmagenta #8B008B rgb(139,0,139)
  purple #800080 rgb(128,0,128)
  indigo #4B0082 rgb(75,0,130)

Colori rosa per siti web
Colore HTML / CSS
Nome Colore
#RRGGBB (R,G,B)
  pink #FFC0CB rgb(255,192,203)
  lightpink #FFB6C1 rgb(255,182,193)
  hotpink #FF69B4 rgb(255,105,180)
  deeppink #FF1493 rgb(255,20,147)
  palevioletred #DB7093 rgb(219,112,147)
  mediumvioletred #C71585 rgb(199,21,133)

Scala di bianchi
Colore HTML / CSS
Nome Colore
#RRGGBB (R,G,B)
  white #FFFFFF rgb(255,255,255)
  snow #FFFAFA rgb(255,250,250)
  honeydew #F0FFF0 rgb(240,255,240)
  mintcream #F5FFFA rgb(245,255,250)
  azure #F0FFFF rgb(240,255,255)
  aliceblue #F0F8FF rgb(240,248,255)
  ghostwhite #F8F8FF rgb(248,248,255)
  whitesmoke #F5F5F5 rgb(245,245,245)
  seashell #FFF5EE rgb(255,245,238)
  beige #F5F5DC rgb(245,245,220)
  oldlace #FDF5E6 rgb(253,245,230)
  floralwhite #FFFAF0 rgb(255,250,240)
  ivory #FFFFF0 rgb(255,255,240)
  antiquewhite #FAEBD7 rgb(250,235,215)
  linen #FAF0E6 rgb(250,240,230)
  lavenderblush #FFF0F5 rgb(255,240,245)
  mistyrose #FFE4E1 rgb(255,228,225)

Scala di grigi HTML CSS
Colore HTML / CSS
Nome Colore
#RRGGBB (R,G,B)
  gainsboro #DCDCDC rgb(220,220,220)
  lightgray #D3D3D3 rgb(211,211,211)
  silver #C0C0C0 rgb(192,192,192)
  darkgray #A9A9A9 rgb(169,169,169)
  gray #808080 rgb(128,128,128)
  dimgray #696969 rgb(105,105,105)
  lightslategray #778899 rgb(119,136,153)
  slategray #708090 rgb(112,128,144)
  darkslategray #2F4F4F rgb(47,79,79)
  black #000000 rgb(0,0,0)

Colori Marroni
Colore HTML / CSS
Nome Colore
#RRGGBB (R,G,B)
  cornsilk #FFF8DC rgb(255,248,220)
  blanchedalmond #FFEBCD rgb(255,235,205)
  bisque #FFE4C4 rgb(255,228,196)
  navajowhite #FFDEAD rgb(255,222,173)
  wheat #F5DEB3 rgb(245,222,179)
  burlywood #DEB887 rgb(222,184,135)
  tan #D2B48C rgb(210,180,140)
  rosybrown #BC8F8F rgb(188,143,143)
  sandybrown #F4A460 rgb(244,164,96)
  goldenrod #DAA520 rgb(218,165,32)
  peru #CD853F rgb(205,133,63)
  chocolate #D2691E rgb(210,105,30)
  saddlebrown #8B4513 rgb(139,69,19)
  sienna #A0522D rgb(160,82,45)
  brown #A52A2A rgb(165,42,42)
  maroon #800000 rgb(128,0,0)