Secondo un recente sondaggio degli sviluppatori di Stack Overflow, lo strumento di sviluppo più popolare in tutte le categorie è VS Code. Molti sviluppatori preferiscono altri editor o notebook come Atom. Entrambi hanno estensioni di terze parti: VS Code ha un numero piccolo ma significativo di estensioni e temi, mentre per Atom ne sono state pubblicate 11K-12K.
Sia Atom, sia VS Code, sono liberamente scaricabili. I nostri esempi useranno quest’ultimo.
È il momento di scaricare un ambiente di sviluppo!
Questo notebook è disponibile per Windows, Linux e Mac, gratuitamente, a questo indirizzo.
Una volta scaricato il software ed eseguita l’installazione, si può aprire una nuova pagina e scegliere il linguaggio di programmazione che s’intende adottare.
Ecco la parte della lista, più lunga, dove compare anche il linguaggio HTML.
Lista linguaggi
Si dovrà creare un directory nel quale registrare tutti i file generati. Lo si può fare all’inizio, oppure aspettare che sia lo stesso VS Code a chiederlo, come normalmente accade alla generazione delle prime linee di codice.
Si parte sempre da un file index.html. La creazione di questo file può essere fatta, tra gli altri modi, cliccando sulla prima icona a destra dell’indicazione del workspace.
Finestra di comando, in alto a sinistra
Una volta cliccato, l’area editor a destra si predispone all’aggiunta di codice. La base da cui partire viene generata automaticamente da VSC premendo, in successione, il punto esclamativo e il tab. Personalizza il codice fino ad ottenere questa versione:
Se ti è difficile individuare le piccole differenze tra il codice nell’immagine e quello che ti viene fornito da VSC, per questa volta ecco il software pronto per copiare ed incollare:
<!DOCTYPE html> <html lang="it"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>Guida AULAB a Bootstrap</h1> </body> </html>
Bootstrap lavora in linguaggio HTML, ovviamente con le sue aggiunte come possono essere degli script del linguaggio JavaScript.
Se vuoi sapere di più su questi argomenti, non ti preoccupare! Abbiamo creato per te delle guide ad hoc, tra le quali la nostra guida html e css in italiano e la nostra nuova guida JavaScript
.
Lavorare in HTML vuol dire che il motore di esecuzione è già contenuto in un qualsiasi browser, per cui il risultato del tuo lavoro sarà mostrato direttamente da VSC, che aprirà una finestra dedicata del tuo browser di riferimento. Per questa guida utilizzeremo Chrome su PC, ma non cambia molto con qualsiasi altro browser o piattaforma.
Osserva, ora, la riga 5:
<meta http-equiv="X-UA-Compatible" content="chrome=1">
Questa riga di codice HTML indica che il sito web viene visualizzato in modalità di compatibilità con la versione più recente di Chrome.
Per indicare che un sito web deve essere visualizzato solo in modalità di compatibilità con Internet Explorer, nella versione più recente (Edge), è possibile impiegare questa riga di codice HTML:
<meta http-equiv="X-UA-compatible" content="IE=edge">
Metterai il valore “IE=Edge,chrome=1” per ottenere i migliori risultati sia con Internet Explorer (Edge), sia con Google Chrome.
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
L’azione in HTML avviene tra i due tag <body>, ora in riga 9 e 10. Se qui in mezzo aggiungiamo una riga di testo e ripetiamo il right-click su index.html, la pagina si aggiornerà, mostrando la scritta. Se inseriamo il testo tra i tag che indicano un titolo (headings) molto grande e aggiorniamo, beh…è facile intuirlo! La scritta sarà molto grande.
Ora salva il file index.html.
PS: le funzioni di salvataggio si ottengono cliccando sulla voce “file” in alto a sinistra.
