Come funzionano HTML, CSS e JavaScript

Ti sei mai chiesto come funzioni la programmazione, ma non hai fatto nulla di più complicato sul web che caricare una foto su Facebook?

Allora sei nel posto giusto.

Per qualcuno che non è mai stato codificato prima, il concetto di creare un sito web da zero – layout, design e tutto – può sembrare davvero intimidatorio. Potresti immaginarti gli studenti di Harvard nel film, Il social networkseduti ai loro computer con gigantesche cuffie e martellando il codice, e pensate a voi stessi: "Non potrei mai farlo".

In realtà, puoi.

Chiunque può imparare a programmare, proprio come chiunque può imparare una nuova lingua. In effetti, programmare è un po 'come parlare una lingua straniera – che è esattamente il motivo per cui si chiama programmazione le lingue. Ognuno ha le proprie regole e sintassi che devono essere apprese passo dopo passo. Queste regole sono modi per dire al tuo computer cosa fare. Più nello specifico, nella programmazione web, sono modi per dirlo i browser Cosa fare.

L'obiettivo di questo post è, in inglese semplice, insegnarti le basi di HTML, CSS e uno dei linguaggi di programmazione più comuni, JavaScript. Ma prima di iniziare, diamo un'idea di cosa sono realmente i linguaggi di programmazione.

Cos'è un linguaggio di programmazione?

Programmare, o programmare, è come risolvere un enigma. Considera una lingua umana, come l'inglese o il francese. Usiamo questi linguaggi per trasformare pensieri e idee in azioni e comportamenti. Nella programmazione, l'obiettivo del puzzle è esattamente lo stesso: stai solo guidando diversi tipi di comportamento e la fonte di quel comportamento non è umana. È un computer.

UN linguaggio di programmazione è il nostro modo di comunicare con il software. Le persone che usano i linguaggi di programmazione sono spesso chiamati programmatori o sviluppatori. Le cose che diciamo che il software utilizza un linguaggio di programmazione potrebbe essere quello di far apparire una pagina web in un certo modo, o di spostare un oggetto sulla pagina se l'utente umano intraprende una determinata azione.

Programmazione nello sviluppo Web

Quindi, quando a un web designer viene dato un obiettivo finale come "creare una pagina web che ha questa intestazione, questo font, questi colori, queste immagini e un unicorno animato che cammina sullo schermo quando gli utenti cliccano su questo pulsante", il lavoro del web designer è quello di prendere quella grande idea e dividerla in piccoli pezzi, e quindi tradurre questi pezzi in istruzioni che il computer può capire – includendo tutte le istruzioni nell'ordine corretto o nella sintassi.

Ogni pagina sul Web che visiti viene creata utilizzando una sequenza di istruzioni separate, una dopo l'altra. Il tuo browser (Chrome, Firefox, Safari e così via) è un grande attore nel tradurre il codice in qualcosa che possiamo vedere sui nostri schermi e persino interagire con. Può essere facile dimenticare che il codice senza un browser è solo un file di testo – è quando si inserisce quel file di testo in un file del browser che la magia accade. Quando apri una pagina web, il browser recupera l'HTML e altri linguaggi di programmazione coinvolti e lo interpreta.

HTML e CSS in realtà non sono tecnicamente linguaggi di programmazione; sono solo struttura di pagina e informazioni di stile. Ma prima di passare a JavaScript e ad altri linguaggi reali, è necessario conoscere le basi dell'HTML e dei CSS, poiché si trovano nella parte frontale di ogni pagina Web e applicazione.

All'inizio degli anni '90, l'HTML era l'unica lingua disponibile sul web. Gli sviluppatori Web dovevano codificare scrupolosamente siti statici, pagina per pagina. Molto è cambiato da allora: ora ci sono molti linguaggi di programmazione per computer disponibili. In questo post parlerò di HTML, CSS e di uno dei linguaggi di programmazione più comuni: JavaScript.

HTML, CSS e JavaScript: un tutorial

Una panoramica:

• HTML fornisce il Struttura basilare di siti, che viene migliorato e modificato da altre tecnologie come CSS e JavaScript.
• CSS è usato per controllare presentazione, formattazione e layout.
• JavaScript è usato per controllare il comportamento di diversi elementi.

Ora, esaminiamo ciascuno di essi individualmente per aiutarvi a capire i ruoli che ciascuno suona su un sito Web e quindi vedremo come si integrano. Iniziamo con il buon vecchio HTML.

HTML

L'HTML è al centro di ogni pagina Web, indipendentemente dalla complessità di un sito o dal numero di tecnologie coinvolte. È un'abilità essenziale per qualsiasi professionista del web. È il punto di partenza per chiunque impari come creare contenuti per il web. E, fortunatamente per noi, è sorprendentemente facile da imparare.

Lascia che ti mostri cosa intendo. Dai un'occhiata all'articolo qui sotto. Se dovessi chiederti di etichettare i tipi di contenuti sulla pagina, probabilmente lo faresti abbastanza bene: c'è l'intestazione in alto, poi un sottotitolo sotto di esso, il testo del corpo e alcune immagini in fondo seguite da un pochi altri bit di testo.

I linguaggi di markup funzionano allo stesso modo di tu lo hai appena fatto quando hai etichettato quei tipi di contenuto, tranne che per usare il codice per farlo – in particolare, usano tag HTML, noti anche come "elementi". Questi tag hanno nomi piuttosto intuitivi: tag di intestazione, tag di paragrafo, tag di immagine e così via.

Ogni pagina Web è composta da un gruppo di questi tag HTML che denotano ogni tipo di contenuto sulla pagina. Ogni tipo di contenuto sulla pagina è "avvolto" in, cioè circondato da tag HTML.

Ad esempio, le parole che stai leggendo in questo momento fanno parte di un paragrafo. Se stavo codificando questa pagina web da zero (invece di usare l'editor WYSIWG nel COS di HubSpot), avrei iniziato questo paragrafo con un apertura tag di paragrafo:

. La parte "tag" è contrassegnata da parentesi aperte e la lettera "p" indica al computer che stiamo aprendo un paragrafo invece di un altro tipo di contenuto.

Una volta che un tag è stato aperto, si presume che tutto il contenuto che segue sia parte di quel tag finché non "chiudi" il tag. Al termine del paragrafo, inserisco un tag di paragrafo di chiusura:

. Si noti che i tag di chiusura hanno lo stesso aspetto dei tag di apertura, tranne che c'è una barra in avanti dopo la parentesi angolare sinistra. Ecco un esempio:

Questo è un paragrafo.

Utilizzando HTML, puoi aggiungere intestazioni, formattare paragrafi, interruzioni di linee di controllo, creare elenchi, enfatizzare il testo, creare caratteri speciali, inserire immagini, creare collegamenti, creare tabelle, controllare alcuni stili e molto altro.

Per saperne di più sulla codifica in HTML, ti consiglio di consultare la nostra guida all'HT di base e di utilizzare le classi e le risorse gratuite su codecademy, ma per ora passiamo al CSS.

CSS

CSS sta per Cascading Style Sheets. Questo linguaggio di programmazione impone come gli elementi HTML di un sito Web dovrebbero effettivamente apparire sul frontend della pagina.

Se HTML è il cartongesso, il CSS è la vernice.

Mentre HTML era la struttura di base del tuo sito web, il CSS è ciò che dà al tuo intero sito web il suo stile. Quei colori chiari, caratteri interessanti e immagini di sfondo? Tutto grazie ai CSS. Questo linguaggio influisce sull'umore e sul tono di una pagina web, rendendolo uno strumento incredibilmente potente e un'abilità importante per gli sviluppatori web. È anche ciò che consente ai siti Web di adattarsi a diverse dimensioni dello schermo e tipi di dispositivi.

Per mostrarti cosa fa il CSS in un sito web, guarda le due schermate seguenti. Il primo screenshot è il post del blog del mio collega, ma mostrato in HTML di base e il secondo screenshot è quello stesso post del blog con HTML e CSS.

Esempio di HTML (senza CSS)

Si noti che tutto il contenuto è ancora lì, ma lo stile visivo non lo è. Questo è ciò che potresti vedere se il foglio di stile non viene caricato sul sito Web, per qualsiasi motivo. Ora, ecco come appare la stessa pagina Web con i CSS aggiunti.

Esempio di HTML + CSS

Non è più carino?

In parole povere, CSS è un elenco di regole che possono assegnare proprietà diverse ai tag HTML, specificati in tag singoli, più tag, un intero documento o più documenti. Esiste perché, come sono stati sviluppati elementi di design come font e colori, i web designer hanno avuto molti problemi ad adattare l'HTML a queste nuove funzionalità.

Vedete, l'HTML, sviluppato nel 1990, non era destinato a mostrare alcuna informazione di formattazione fisica. Originariamente era pensato solo per definire il contenuto strutturale di un documento, come intestazioni contro paragrafi. L'HTML ha superato queste nuove funzionalità di progettazione e il CSS è stato inventato e rilasciato nel 1996: tutta la formattazione può essere rimossa dai documenti HTML e archiviata in file CSS (.css) separati.

Quindi, per cosa stanno esattamente i CSS? Sta per Cascading Style Sheets – e "style sheet" si riferisce al documento stesso. Il browser di sempre ha un foglio di stile predefinito, quindi ogni pagina web là fuori è influenzata da almeno un foglio di stile – il foglio di stile predefinito di qualsiasi browser utilizzato dal visitatore della pagina web – indipendentemente dal fatto che il web designer applichi o meno uno stile . Ad esempio, lo stile di carattere predefinito del mio browser è Times New Roman, dimensione 12, quindi se ho visitato una pagina web in cui il designer non ha applicato un foglio di stile, vedrei la pagina Web in Times New Roman, dimensione 12 .

Ovviamente, la stragrande maggioranza delle pagine web che visito non usa Times New Roman, dimensione 12, perché i progettisti web dietro a quelle pagine hanno iniziato con un foglio di stile predefinito con uno stile di carattere predefinito e quindi hanno annullato il controllo del browser predefinito con CSS personalizzato. È qui che entra in gioco la parola "cascading". Pensa a una cascata – mentre l'acqua precipita giù per la caduta, colpisce tutte le rocce durante il percorso verso il basso, ma solo le rocce in basso influiscono su dove finirà per scorrere. Allo stesso modo, l'ultimo foglio di stile definito informa il mio browser su quali istruzioni hanno la precedenza.

Per imparare le specifiche della codifica in CSS, ti rimanderò alle classi e alle risorse gratuite su codecademy. Ma per ora parliamo un po 'di JavaScript.

JavaScript

JavaScript è un linguaggio più complicato di HTML o CSS e non è stato rilasciato in forma beta fino al 1995. Oggi JavaScript è supportato da tutti i moderni browser Web e viene utilizzato su quasi tutti i siti Web per funzionalità più potenti e complesse.

In breve, JavaScript è un linguaggio di programmazione che consente agli sviluppatori Web di progettare siti interattivi. La maggior parte del comportamento dinamico che vedrai in una pagina Web è grazie a JavaScript, che aumenta i controlli e i comportamenti predefiniti di un browser.

Creazione di caselle di conferma

Un esempio di JavaScript in azione sono le caselle che compaiono sullo schermo. Pensa all'ultima volta che hai inserito le tue informazioni in un modulo online e una finestra di conferma è spuntata chiedendoti di premere "OK" o "Annulla" per procedere. Ciò è stato possibile grazie a JavaScript: nel codice, si trovava una dichiarazione "if … else …" che indica al computer di fare una cosa se l'utente fa clic su "OK" e una cosa diversa se l'utente fa clic su "Annulla".

Attivazione di CTA slide-in

Un altro esempio di JavaScript in azione è un invito all'azione slide-in (CTA), come quelli che inseriamo nei post del nostro blog, che appare in basso a destra sullo schermo quando scorri la fine del barra laterale. Ecco come appare:

Memorizzazione di nuove informazioni

JavaScript è particolarmente utile per l'assegnazione di nuove identità agli elementi del sito Web esistenti, in base alle decisioni che l'utente prende durante la visita della pagina. Ad esempio, supponiamo che stia creando una pagina di destinazione con un modulo che desideri generare lead acquisendo informazioni su un visitatore del sito web. Potresti avere una "stringa" di JavaScript dedicata al nome dell'utente. Quella stringa potrebbe assomigliare a questo:

function updateFirstname () {

let Firstname = prompt ('First Name');

}

Quindi, dopo che il visitatore del sito web ha inserito il suo nome e qualsiasi altra informazione richiesta nella pagina di destinazione e ha inviato il modulo, questa azione aggiorna l'identità dell'elemento "Nome" inizialmente non definito nel codice. Ecco come potresti ringraziare il visitatore del tuo sito web per nome in JavaScript:

para.textContent = 'Grazie,' + Nome + "! Ora puoi scaricare il tuo ebook."

Nella stringa di JavaScript sopra, all'elemento "Nome" è stato assegnato il nome del visitatore del sito web e quindi verrà generato il suo nome proprio sul frontend della pagina web. Per un utente di nome Kevin, la frase sarebbe simile a questa:

Grazie, Kevin! Ora puoi scaricare il tuo ebook.

Sicurezza, giochi ed effetti speciali

Altri usi per JavaScript includono la creazione di password di sicurezza, moduli di controllo, giochi interattivi, animazioni ed effetti speciali. Viene anche utilizzato per creare app mobili e creare applicazioni basate su server. È possibile aggiungere JavaScript a un documento HTML aggiungendo questi "script" o snippet di codice JavaScript nell'intestazione o nel corpo del documento.

Se vuoi saperne di più su JavaScript, codecademy offre anche corsi online gratuiti che puoi seguire.

La parte più difficile della codifica è iniziata, ma una volta apprese le nozioni di base, sarà più facile imparare linguaggi di programmazione più avanzati. E se ti senti mai sopraffatto, vai su hackertyper.net e premi i tasti casuali sulla tastiera.

Fidati di me, ti sentirai meglio.