Che Cos'è l'HTML: Definizione e Significato di Hypertext Markup Language

Silvia Carrozza — Mon, 06 Feb 2023 13:54:31 +0000

Articolo originale: What is HTML – Definition and Meaning of Hypertext Markup Language

HTML, o Hypertext Markup Language, è un linguaggio di markup per il web che definisce la struttura delle pagine web.

È uno degli elementi costitutivi di ogni sito web, ed è quindi un linguaggio fondamentale da imparare per intraprendere una carriera nello sviluppo web.

In questo articolo, ti illustrerò in dettaglio di cosa tratta l'HTML e come viene impiegato sulle pagine web; inoltre, toccheremo anche una parte davvero interessante dell'HTML: l'HTML semantico.

Cos'è l'HTML?

Per capire pienamente il significato di "HTML", diamo un'occhiata a ogni parola che compone l'acronimo:

Hypertext: testo (spesso anche con incorporamenti come immagini) organizzato in modo da collegare elementi correlati

Markup: una guida di stile per la composizione di qualsiasi cosa da stampare in formato cartaceo o digitale

Language: una lingua che un computer comprende e utilizza per interpretare i comandi.

L'HTML determina la struttura delle pagine web. Ma questa struttura da sola non è sufficiente per rendere una pagina web graficamente piacevole e interattiva. Quindi è necessario usare altre tecnologie, come CSS e JavaScript, rispettivamente per agire sull'estetica dell'HTML e per aggiungere interattività.

Per farti capire meglio, suddividiamo le tre tecnologie - HTML, CSS e JavaScript - in questo modo: sono come parti del corpo umano.

HTML è lo scheletro,
CSS è la pelle,
e JavaScript è il sistema circolatorio, digestivo e respiratorio che dà vita alla struttura e alla pelle.

Puoi anche guardare HTML, CSS e JavaScript in questo modo: HTML è la struttura di una casa, CSS è l'arredamento interno ed esterno, mentre JavaScript comprende l'elettricità, il sistema idrico e molte altre caratteristiche funzionali che rendono la casa vivibile.

Tag HTML

Poiché l'HTML definisce il markup per una particolare pagina web, è desiderabile che il testo, le immagini o altri contenuti incorporati appaiano in determinati modi.

Ad esempio, potresti volere che un testo sia grande, altro testo piccolo e dell'altro in grassetto, corsivo o come un punto di un elenco.

L'HTML ha dei "tag" che ti consentono di farlo. Ci sono tag per creare: intestazioni, paragrafi, parole in grassetto, parole in corsivo e altro ancora.

L'immagine seguente descrive l'anatomia di un tag HTML:

I tag HTML di apertura (a sinistra) sono costituiti da parentesi angolate contenenti il nome del tag. I tag di chiusura (a destra) contengono anche una barra obliqua.

Elementi HTML

Un elemento è costituito dal tag di apertura, un carattere, il contenuto e un tag di chiusura. Alcuni elementi sono vuoti, ovvero non hanno un tag di chiusura ma hanno invece una fonte o un collegamento al contenuto da incorporare nella pagina web.

Un esempio di elemento vuoto è , usato per incorporare immagini in una pagina web.

Gli elementi HTML sono spesso usati in modo intercambiabile con i tag, ma c'è una piccola differenza tra i due. Un elemento è la combinazione del tag di apertura e di chiusura e quindi del contenuto tra di essi.

Ho creato un'altra immagine per aiutarti a visualizzare l'anatomia di un elemento HTML:

Elemento = tag di apertura + contenuto + tag di chiusura

Attributi HTML

I tag HTML accettano anche quelli che vengono chiamati attributi. Questi attributi vengono inseriti nel tag di apertura e vanno da style e id fino a class. Assumono valori, che trasmettono più informazioni sull'elemento e aiutano a fare cose come definire lo stile e la manipolazione con JavaScript.

Nell'infografica qui sotto, il tag di apertura contiene un attributo class con un valore di “text”. Questo può essere utilizzato per definire lo stile dell'elemento o selezionarlo con JavaScript per l'interattività.

Ecco l'anatomia di una pagina HTML di base:



  
    
    
    
    Definition of HTML

Diamo un'occhiata alle parti importanti del codice qui:

: specifica che stiamo usando HTML5 in questo codice. Prima dell'introduzione di HTML5, dovevi indicare esplicitamente quale versione di HTML stavi usando con il tag . Ad esempio, HTML4.0, 3.2 e così via. Ma ora non ne abbiamo più bisogno. Quando "html" è scritto nel codice, il browser presuppone automaticamente che tu stia usando HTML5.

: il "root", o elemento di primo livello di ogni documento HTML. Ogni altro elemento deve essere racchiuso al suo interno.

: una delle parti più cruciali del documento HTML. I web crawler guardano all'interno dei tag head per ottenere informazioni importanti sulla pagina. Contiene informazioni come il titolo della pagina, fogli di stile, meta dati per SEO e molto altro.

: questo è un elemento vuoto che trasmette meta-informazioni sulla pagina. Tali informazioni possono includere l'autore, il tipo di codifica utilizzato (quasi sempre UTF-8), la responsività, la compatibilità e molto altro. I web crawler guardano usano i tag meta per ottenere informazioni sulla pagina web, che svolgerà un ruolo cruciale nella SEO.

: definisce il titolo della pagina web. Viene sempre visualizzato nella scheda del browser.

: tutto il contenuto del documento HTML si trova all'interno del tag body. Può esserci un solo tag su tutta la pagina.

Cos'è l'HTML semantico?

HTML semantico significa che i tag HTML trasmettono il significato effettivo di ciò per cui sono utilizzati.

La semantica è stata parte integrante dell'HTML sin dal suo inizio nei primi anni '90. Ma non ha mai acquisito particolare rilevanza fino alla fine degli anni '90, quando il CSS ha iniziato a funzionare nella maggior parte dei browser.

Con l'HTML semantico, tag semanticamente neutri come

e vengono accantonati poiché vengono preferiti tag semanticamente più descrittivi come

Un notevole vantaggio dell'utilizzo dei tag semantici è che i web crawler sono in grado di indicizzare facilmente la pagina web o il sito web, migliorando in cambio la SEO.

Inoltre, un sito web che utilizza la semantica diventa più informativo, adattabile e accessibile a coloro che utilizzano lettori di schermo o tecnologie assistive per accedere al web.

Tag semantici importanti e cosa fanno

Diamo un'occhiata ad alcuni dei tag HTML semantici più comunemente usati:

: l'elemento

definisce la sezione introduttiva di una pagina web. Contiene elementi come il logo, la navigazione, il selettore di temi e la barra di ricerca.

: l'elemento

specifica gli elementi di navigazione della pagina come home, contatti, informazioni, FAQ e così via.

: l'elemento

è trattato convenzionalmente come l'immediato discendente del tag. Contiene le sezioni principali del documento HTML oltre a

. Idealmente, dovrebbe essercene solo uno nell'intero documento HTML.

: l'elemento

definisce una particolare sezione della pagina web. Questa può essere la sezione vetrina, la sezione informazioni, la sezione contatti o altro. Puoi utilizzare numerose sezioni in un singolo documento HTML.

: l'elemento

rappresenta una certa parte di una pagina web che trasmette alcune informazioni particolari. Tali informazioni potrebbero essere una combinazione di testo, immagini, video e contenuti incorporati. Considera questo elemento come un post autonomo di un blog in una pagina contenente estratti di altri post di blog.

: come suggerisce il nome, rappresenta una barra laterale su una pagina web. Di solito è una parte della pagina web che non è direttamente correlata al contenuto principale.

: l'elemento

ospita elementi come collegamenti rapidi, informazioni sul copyright o qualsiasi altro dato relativo all'intero sito web o pagina web.

Inoltre, poiché gli elementi semantici trasmettono il significato effettivo di ciò fa un particolare contenuto (come nav per la navigazione, aside per una barra laterale e così via), questi elementi non vengono posizionati automaticamente dove dovrebbero essere. La loro posizione deve essere stabilita nel CSS.

Un documento HTML semantico super semplice ha questo aspetto:



  
    
    
    
    Definition of HTML
  

  
    
      LOGO
      
        
          Home
          About
          Contact
          FAQs
        
      
    
    
      
        
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio magni
          est asperiores nemo, adipisci minus itaque quam, rem libero aliquam
          nesciunt, nisi inventore assumenda earum repellat labore ratione
          architecto eos quis. Soluta mollitia cupiditate dolorem. Consequatur a
          soluta laudantium nihil. Molestias, officiis ut! Nobis adipisci
          voluptatem quam at officia beatae!
        
      
      
        You can find me on
        Twitter You can find me on
        Instagram
      
      My Address
    
    © 2020 All Rights Reserved

Ecco come appare nel browser:

Puoi notare che il contenuto all'interno del tag

non è nella barra laterale e il contenuto all'interno del tag

non è automaticamente disponibile come barra di navigazione. Questo è il motivo per cui devi dare le istruzioni per farli apparire correttamente all'interno del CSS.

Conclusione

Spero che questo articolo ti abbia aiutato a imparare le basi dell'HTML e a cosa serve. Ora puoi iniziare a imparare tecnologie più avanzate come CSS e JavaScript, e quindi iniziare a formare le conoscenze necessarie per avere una solida carriera nello sviluppo web.

Grazie mille per aver letto e buon divertimento.

Lo Stile del Font in HTML: Come Modificare il Colore e la Dimensione del Testo in HTML

Silvia Carrozza — Thu, 12 Jan 2023 05:30:00 +0000

Articolo originale: HTML Font Style – How to Change Text Color and Size with an HTML Tag

Quando programmi in HTML e scrivi del testo, sicuramente non lo lascerai così com'è perché vuoi che abbia un bell'aspetto.

Per fare ciò devi cambiare il suo aspetto attraverso le proprietà color e font-size del CSS.

In questo tutorial, ti mostrerò due modi diversi per migliorare l'estetica dei tuoi testi HTML.

Sintassi di base di `font-size`

selettore {
     font-size: valore;
     color: valore;
}

Come modificare la dimensione e il colore del testo all'interno di un tag HTML

Puoi cambiare il colore e la dimensione del testo direttamente all'interno del suo tag modificando le proprietà color e font-size. Questo modalità è detta CSS "inline" e per utilizzarla viene adoperato l'attributo style in HTML.

Nel codice HTML qui sotto, cambieremo il colore e la dimensione del testo freeCodeCamp.

freeCodeCamp

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

Nel browser apparirà così:

Per modificare la dimensione del testo, utilizzeremo l'attributo style, quindi imposteremo un valore con la proprietà font-size in questo modo:

freeCodeCamp

Ora nel browser il testo apparirà così:

Se ti stai chiedendo cosa sia il rem, è un'unità di misura. 4rem equivalgono a 64 pixel, perché 16px equivale a un 1rem, a meno che non cambi la font-size della radice (html) in un altro valore.

Per cambiare il colore del testo, puoi utilizzare l'attributo style, quindi impostare un valore con la proprietà color:

freeCodeCamp

Questo è ciò che ora appare nel browser:

La combinazione delle proprietà font-sizee color ci dà questo nel browser:

Con il codice:

freeCodeCamp

Come modificare la dimensione e il colore del testo in un file CSS esterno

Puoi anche modificare il colore e la dimensione del testo in un foglio di stile esterno. Ricorda però di collegare il CSS esterno nella sezione head del tuo HTML.

La sintassi di base è questa:

Ora, per modificare la dimensione e il colore del testo del testo freeCodeCamp, devi selezionarlo nel foglio di stile e applicargli le proprietà e i valori appropriati.

Ricorda che questo è il nostro codice HTML:

freeCodeCamp

Per modificare il colore e la dimensione del testo seleziona l'elemento (h1) e assegna i valori alle proprietà color e font-size:

 h1 {
    color: #2ecc71;
    font-size: 4rem;
}

Vedrai lo stesso risultato nel browser:

In Conclusione

Spero che questo tutorial ti dia le conoscenze per poter cambiare la dimensione e il colore del tuo testo HTML in modo che abbia l'aspetto che desideri.

Grazie per aver letto e continua a programmare.

Casella di Testo in HTML – Creare un Campo di Testo in HTML con il Tag Input

Silvia Carrozza — Thu, 22 Dec 2022 14:13:28 +0000

Articolo originale: Text Box in HTML – The Input Field HTML Tag

In questo articolo imparerai come creare un campo di testo usando il tag input in HTML. Imparerai anche cosa sono i moduli web e otterrai una panoramica di come funzionano, poiché le caselle di testo sono una caratteristica fondamentale dei moduli.

Cominciamo!

Cosa sono i Moduli Web ?

I moduli sono un modo efficiente per raccogliere informazioni.

In molte occasioni potrebbe capitarti di compilare un modulo fisico, un documento stampato e fornire informazioni personali.

Per esempio, potresti compilare un modulo e consegnarlo a qualcuno quando stai iniziando un nuovo lavoro, o quando stai andando a fare un controllo medico, o quando sei in procinto di affittare/acquistare una casa – o in genere quando è necessario fornire delle informazioni.

Proprio come i moduli fisici, i moduli web sono un modo per ricevere e raccogliere input, informazioni e dati importanti da utenti e visitatori, ma utilizzando una combinazione di tecnologie web.

Un modulo web imita un modulo fisico contenendo spazi in cui gli utenti possono inserire le proprie informazioni.

I moduli web utilizzano una varietà di strumenti, o controlli del modulo, per raccogliere l'input dell'utente.

Un sito web può disporre di una casella di ricerca o di un campo di immissione del testo per l'immissione di una singola riga di testo. Ciò consente agli utenti di cercare qualcosa di specifico.

Un sito web può anche contenere un modulo di registrazione che consente agli utenti di iscriversi a una newsletter o ad altri aggiornamenti.

In questo caso, conterrebbe un campo di immissione del testo per l'inserimento del nome, del cognome e dell'indirizzo e-mail dell'utente.

Molti siti web dispongono anche di moduli di iscrizione/accesso quando si effettua un acquisto online, ad esempio, in cui gli utenti inseriscono il nome utente in un campo di testo e la password in un campo separato. Sebbene il campo della password sia anche un campo di testo, ogni carattere di testo è coperto da un punto nero per nascondere ciò che viene digitato.

Un sito web può anche avere un'area di testo più ampia per consentire agli utenti di inserire passaggi di testo più lunghi, utile per lasciare un commento sotto il post di un blog.

Molti moduli consentono inoltre all'utente di scegliere una particolare opzione tra una serie di alternative selezionando un pulsante di opzione.

I moduli web possono inoltre consentire all'utente di scegliere più di un'opzione selezionando/deselezionando una casella di spunta.

Infine, tutti i moduli hanno un pulsante di invio, per inviare i dati a un server dove verranno archiviati o elaborati.

Come Funzionano i Moduli Web

Internet è una grande rete globale che collega milioni di computer in tutto il mondo.

I computer che fanno parte della rete comunicano tra di loro inviando e ricevendo informazioni.

Questo avviene grazie all'architettura di richiesta/risposta client/server del web.

Il client, che in genere è un browser come Google Chrome, invia una richiesta a un server web.

Un server web è un componente hardware o software del computer che memorizza i file che compongono i siti web e li distribuisce ogni volta che riceve una richiesta.

La richiesta potrebbe essere quella di visualizzare un modulo che fa parte di una pagina web.

Il server restituisce i file che compongono il modulo web come risposta. Il browser quindi assembla i file e l'utente visualizza il modulo nel browser.

Questo ciclo di richiesta/risposta è strutturato da un protocollo, chiamato HTTP (che sta per HyperText Transfer Protocol).

Pertanto, quando si utilizza un modulo web, l'utente inserisce i dati richiesti dal modulo. Quindi, dopo la convalida lato client che controlla se tutti i campi obbligatori sono stati compilati e se i dati sono nel formato corretto, l'utente fa clic sul pulsante di invio.

I dati vengono quindi inviati al server in coppie nome-valore in una richiesta HTTP. Questo metodo di organizzazione delle informazioni in coppie nome-valore assicura che i dati corretti corrispondano all'elemento del modulo corretto.

Quindi viene utilizzato un linguaggio lato server come PHP, Ruby o Python per elaborare le informazioni e memorizzarle in un database per un uso successivo o il recupero.

Come Creare Moduli Web in HTML

Per creare un modulo in HTML, è necessario utilizzare l'elemento




    
    
    
    Web form

L'elemento

accetta due attributi:

L'attributo action , che specifica l'URL in cui si desidera inviare ed elaborare i dati.
L'attributo method che accetta come valore uno dei due verbi HTTP, GET o POST. Se non è incluso alcun attributo method, per impostazione predefinita viene utilizzato il metodo GET.




    
    
    
    Web form

Tuttavia, questo da solo non raccoglie alcun input dell'utente.

Cosa è l'elemento `input` in HTML?

L'elemento è più comunemente usato per raccogliere e recuperare i dati utente da un modulo web.

È dove gli utenti inseriscono i propri dati.

È annidato all'interno dell'elemento

ed è un elemento che si chiude automaticamente. Ciò significa che non richiede un tag di chiusura (i tag di chiusura hanno una barra, ).

Si usa per creare diversi stili di campi di input, o controlli di input del modulo, per consentire agli utenti di inserire una varietà di informazioni diverse.

Crea campi di testo, campi e-mail, campi password, caselle di spunta, pulsanti di opzione, menu a tendina, pulsanti di invio, inoltre offre la possibilità di selezionare e caricare file e immagini dal computer dell'utente e molto altro.

Il modo per determinare il tipo di campo di input, o controllo di input del modulo, consiste nell'impostare l'attributo type e assegnargli un valore.

La sintassi generale di è simile a questa:

Ad esempio, per creare un campo che consenta agli utenti di caricare un file, l'elemento avrà il seguente aspetto:




    
    
    
    Web form

L'attributo type determina che tipo di dati può accettare l'elemento input.

Come Creare un Campo di Input di una Casella di Testo HTML

Il valore predefinito dell'attributo type di un input, quando non specificato è text. Quindi l'input di testo è lo stile di input più comune.

La riga crea un campo di input di testo a riga singola, in cui l'utente può digitare qualsiasi input di testo.




    
    
    
    Web form


    
        Please enter some text below:

Quando visualizzi la pagina nel browser, vedrai che è stato creato un campo di input di testo a riga singola:

Come Aggiungere Testo Segnaposto a un Campo di Testo

Il testo segnaposto, chiamato anche testo di riempimento, è un modo per richiedere e fornire un suggerimento agli utenti sul tipo di informazioni di cui hanno bisogno per compilare il modulo. Può anche offrire un valore predefinito prima che inizino a digitare.




    
    
    
    Web form


    
        Please enter your first and last name:

Il codice qui sopra viene visualizzato così:

L'Importanza dell'Attributo `name` nei Campi di Testo

Quando si invia il modulo e questo viene trasmesso al server, il server deve distinguere e differenziare tra i diversi tipi di dati inviati che deve raccogliere.

Ad esempio, deve sapere qual è il nome utente, qual è la password e qual è l'indirizzo e-mail.

Ciò significa che ogni campo di testo necessita di un attributo name e di un valore per rendere più chiari i tipi di dati inviati.

Ad esempio, puoi utilizzare quanto segue per chiedere a qualcuno di inserire il proprio nome completo in un campo di testo:




    
    
    
    Web form


    
        Please enter your full name:

Supponiamo che l'utente inserisca il nome "John Bexley" nel campo di testo. Questo diventerà quindi il valore dell'attributo name.

Come accennato in precedenza, i dati nei moduli vengono inviati in coppie nome-valore. In questo caso, il server saprebbe che il nome (name) dell'utente è John Bexley, in particolare sarebbe name=John Bexley.

Per fare un altro esempio:




    
    
    
    Web form


    
        Please enter your first  name:
        
        Please enter your last  name:

Il codice sopra ha due campi di testo separati in cui l'utente può inserire il proprio nome e cognome separatamente.

Se ha inserito "John" come nome, la coppia nome-valore inviata al server sarà first_name=John".

Se ha inserito "Bexley" come cognome, la coppia nome-valore inviata al server sarà last_name=Bexley.

Come Rendere Obbligatorie le Informazioni di Testo

Puoi fare in modo che determinati campi siano obbligatori e debbano essere compilati dagli utenti.

HTML5 ha introdotto la convalida lato client.

Questa è una funzione grazie alla quale viene visualizzato un messaggio se l'utente non ha compilato i campi richiesti o non ha inserito le informazioni correttamente. Significa anche che non sarà in grado di inviare il modulo.

Tutto quello che devi fare per abilitare questa funzione è aggiungere l'attributo required all'elemento . Questo attributo non deve avere un valore.

Tieni a mente che quando aggiungi più attributi all'elemento , non è necessario aggiungere gli elementi in un certo ordine.




    
    
    
    Web form


    
        Please enter your first  and last name:

Guarda cosa succede se un utente non compila uno dei campi:

Apparirà un messaggio e l'utente non sarà in grado di inviare il modulo se i campi richiesti non sono stati compilati.

Come Impostare un Numero Minimo e Massimo di Caratteri in una Casella di Testo

È possibile specificare il numero minimo e massimo di caratteri che un utente può immettere in un campo di testo.

Per creare un numero minimo di caratteri, utilizzare l'attributo minlength.

Ad esempio, puoi impostarlo in modo che il nome utente sia lungo almeno tre caratteri:




    
    
    
    Web form


    
        Please enter your username

L'utente non sarà in grado di inviare il modulo se il nome utente è più corto di tre caratteri:

Per limitare il numero di caratteri immessi da un utente in un campo di testo, utilizza l'attributo maxlength.

Un esempio di combinazione degli attributi minlength e maxlength potrebbe essere simile al seguente:




    
    
    
    Web form


    
        Please enter your username

Nell'esempio qui sopra, il nome utente deve essere lungo almeno 3 caratteri e non più di 20 caratteri.

Come Etichettare i Controlli del Modulo con l'Elemento `label`

Finora ho utilizzato un elemento

per scrivere del testo prima di usare la casella di testo, in modo da dare un'indicazione all'utente sulla compilazione.

Ma questa non è una buona pratica e non è accessibile.

Ogni controllo del modulo, in questo caso ogni campo di testo, dovrebbe avere il proprio elemento .

Ciò rende il modulo accessibile agli utenti ipovedenti che utilizzano tecnologie assistive come i lettori di schermo.

Un modo per usarlo è annidare qualsiasi testo introduttivo e in un elemento in questo modo:




    
    
    
    Web form


    
        
            Please enter your username

Un altro modo per utilizzare e ottenere lo stesso risultato è separarlo dall'elemento .

In questo caso, l'attributo for deve essere aggiunto a e l'attributo id aggiunto a , per poterli associare tra loro.

Il valore di for sarà lo stesso di id.




    
    
    
    Web form


    
         Please enter your username:

In Conclusione

Riassumendo, per creare un campo di input di testo in HTML, è necessario almeno:

Un elemento , che in genere va all'interno di un elemento
.
Impostare l'attributo type in modo che abbia il valore di text. Questo creerà un campo di input di testo a riga singola.
Non dimenticare di aggiungere un attributo name. Questo identifica le informazioni per ogni controllo del modulo che viene creato e rende le cose più chiare per il server.

Per saperne di più su HTML e CSS, dai un'occhiata alla certificazione Responsive Web Design di freeCodeCamp, dove imparerai in modo interattivo mentre costruisci progetti divertenti lungo il percorso.

Grazie per la lettura e buona programmazione!

Silvia Carrozza - freeCodeCamp.org

Che Cos'è l'HTML: Definizione e Significato di Hypertext Markup Language

Cos'è l'HTML?

Tag HTML

Elementi HTML

Attributi HTML

Cos'è l'HTML semantico?