Tutorial HTML (per principianti)

Tutorial HTML per principiantiTi piacerebbe imparare un po ‘di HTML?


Sembra un’ottima idea. Da qui il motivo per cui abbiamo messo insieme questo tutorial HTML per principianti.

Oggi ci sono almeno 1,7 miliardi di siti Web nel mondo. Praticamente tutti questi siti Web utilizzano HTML in un modo o nell’altro.

P.S: Se non vuoi imparare l’HTML e iniziare subito a costruire il tuo sito Web, senza la codifica richiesta, dai un’occhiata a questa guida: Come creare un sito web GRATIS (senza imparare l’HTML).

Introduzione all’HTML


Che cos’è l’HTML?

Che cos'è l'HTMLHTML, acronimo di HyperText Markup Language, è un linguaggio informatico per la creazione di siti Web e applicazioni Web. Composto principalmente da una serie di codici solitamente scritti in un file di testo e salvati come HTML, il codice scritto in linguaggio HTML si traduce in un bellissimo testo ben formattato o in una combinazione di testo e media quando visualizzato attraverso un browser.

L’HTML è stato sviluppato per la prima volta dal fisico britannico Tim Berners-Lee nel 1990 e da allora ha subito così tante evoluzioni che la versione più recente può ottenere molto più di quanto si potesse immaginare quando il linguaggio è stato inventato per la prima volta.

In questo tutorial, esamineremo le basi del linguaggio HTML e tutto ciò che devi sapere per iniziare con HTML come principiante.

Versioni HTML

Innanzitutto, una rapida carrellata di tutte le versioni HTML dall’invenzione dell’HTML.

  • HTML 1.0: Questa era la versione barebone di HTML e la prima versione del linguaggio.
  • HTML 2.0: Questa versione è stata introdotta nel 1995. Si è gradualmente evoluta, consentendo funzionalità extra tra cui upload di file basato su moduli, tabelle, mappe immagine lato client e internazionalizzazione.
  • HTML 3.2: Nel tentativo di garantire lo sviluppo di standard per il World Wide Web, il World Wide Web Consortium (W3C) è stato fondato da Tim Berners-Lee nel 1994. Nel 1997 hanno pubblicato HTML 3.2.
  • HTML 4.0: Più tardi nel 1997, il W3C ha rilasciato HTML 4.0, una versione che ha adottato molti tipi e attributi di elementi specifici del browser.
  • HTML 4.0 è stato successivamente ristampato con modifiche minori nel 1998.
  • HTML 4.01: Nel dicembre 1999, è stato rilasciato HTML 4.01.
  • XHTML: Le specifiche sono state introdotte nel 2000 ed è stato raccomandato di essere utilizzato come standard congiunto con HTML 4.01. Ha incorporato XML per garantire che il codice sia scritto correttamente e per garantire l’interoperabilità tra i linguaggi di programmazione.
  • HTML5: Il W3C ha pubblicato HTML5 come raccomandazione nell’ottobre 2014 e successivamente ha rilasciato HTML 5.1 a novembre 2016.

Scelta dell’editor HTML

Scegli l'editor HTMLSe stai pensando di creare pagine Web in HTML, hai bisogno di un editor HTML. Ci sono molti vantaggi nell’uso di un editor HTML.

Un buon editor HTML manterrà il tuo codice pulito e organizzato. Rileverà anche quando apri un nuovo tag e lo chiuderà automaticamente per evitare di avere un codice errato e di conseguenza ridurre la quantità di digitazione che devi fare. La maggior parte degli editor HTML oggi ti consente di visualizzare l’anteprima della tua pagina web per vedere come apparirà in un browser Web usando la loro funzione WYSIWYG.

Esistono molti editor HTML gratuiti ea pagamento, di seguito sono elencate alcune delle migliori opzioni tra cui puoi scegliere:

Elementi di base dell’HTML


Una volta deciso l’editor HTML che si desidera utilizzare, il passaggio successivo è comprendere i mattoni dell’HTML. Quando si codifica in HTML, è essenziale comprendere questi elementi costitutivi. Includono tag, attributi ed elementi. Daremo uno sguardo di base qui sotto:

Introduzione ai tag

Una volta che sei in HTML, la prima cosa che devi capire sono i tag. In sostanza, i tag separano il testo normale dal codice HTML.

Di conseguenza, quando si tratta di HTML, i tag fanno la differenza tra il fatto che il documento sia visualizzato come testo normale o “testo trasformato” che è fondamentalmente un codice di testo che sembra mostrare una serie di cose (collegamenti ipertestuali, immagini, media o altro metodi di formattazione) in base a ciò che viene richiesto di visualizzare in base ai tag.

Diamo un’occhiata alla parola “He is a boy” come esempio:

  • Nel normale formato di testo, ottieni: È un ragazzo.
  • In grassetto, ottieni: Lui è un ragazzo

Per ottenere ciò che abbiamo nel formato grassetto devi usare il etichetta.

rendere il testo in grassetto in html

In HTML grezzo abbiamo Lui è un ragazzo che il browser traduce quindi in questo: Lui è un ragazzo.

“He is a boy” potrebbe anche venire in corsivo.

Questo si ottiene usando il etichetta.

rendere il testo in corsivo in html

Abbiamo: Lui è un ragazzo che poi viene fuori come Lui è un ragazzo.

Il collegamento ipertestuale si ottiene utilizzando il etichetta.

rendere il collegamento ipertestuale in HTML

In HTML non elaborato abbiamo: è un ragazzo che mostra come è un ragazzo.

Ci sono alcune cose che dovresti capire sui tag:

  • I tag sono praticamente i mattoni di HTML – non puoi fare HTML senza tag! Se sei bloccato su quale tag utilizzare, controlla la nostra tabella periodica HTML.
  • Quasi ogni tag aperto deve essere chiuso. Tieni presente che ci sono eccezioni. Un esempio di tag che non deve essere chiuso è un tag vuoto, come l’interruzione di riga:
    .
  • I tag sono contenuti in meno di (“<”) and greater than (“>“) Parentesi angolare. I tag di chiusura contengono una barra finale che diventa prima della chiusura del nome del tag. Esempio di tag aperto: . Esempio di tag chiuso .
  • Ogni file HTML inizia con il tag di apertura e termina con il tag di chiusura. La prima riga del file HTML dovrebbe dichiarare il tipo di documento in modo che il browser sappia che sapore HTML usi. Ecco perché vedi le pagine HTML che iniziano con ““Prima dell’inizio del codice HTML.

Prima di aggiungere il contenuto, la maggior parte dei file HTML assomiglia sostanzialmente a questo:

HTML--

La sezione che segue il Il tag di solito contiene informazioni sul documento come titolo, meta tag e dove individuare il suo file CSS – contenuto che non è visibile direttamente sulla pagina del browser. La sezione tra “ e“(Che abbiamo rappresentato con” CONTENUTO PRINCIPALE “) è dove si trova il contenuto principale del file HTML, che lo spettatore vedrà nel browser. Ciò include tutto, dal primo paragrafo ai collegamenti ipertestuali alla formattazione multimediale e tutto il resto.

Introduzione agli elementi

introduzione agli elementi

In HTML, un “elemento” è costituito dal tag di apertura e chiusura, nonché dal contenuto tra i tag.

Nel “Lui è un ragazzo“(In grassetto) esempio, abbiamo questo in HTML: Lui è un ragazzo. Il testo “He is a boy” è circondato da un tag aperto e chiuso. Tutto, incluso il tag di apertura, il contenuto e il tag di chiusura è un elemento.

Quando viene aperto un tag, viene introdotto il contenuto e il tag viene chiuso, abbiamo un elemento.

Un elemento potrebbe essere in una forma base o in una forma complessa. Perché? Perché qualsiasi elemento tra un tag aperto e un tag di chiusura, nonché quei tag è un elemento. Significa che possiamo avere elementi all’interno di un elemento. Nel nostro esempio attuale, “è un ragazzo” (Lui è un ragazzo) è un elemento.

Noterai che abbiamo detto prima che i documenti HTML contengono il file tag prima dell’inizio del contenuto. Il contenuto potrebbe includere centinaia di elementi diversi, ma tutti questi elementi fanno parte dell’elemento “body” (poiché l’elemento body è aperto, contiene contenuto e viene quindi chiuso).

Introduzione agli attributi

Mentre i documenti HTML utilizzano sostanzialmente i tag per tutto, a volte vogliamo comunicare informazioni aggiuntive all’interno di un elemento. In questo caso, utilizziamo un attributo. L’attributo viene utilizzato per definire le caratteristiche di un elemento, viene utilizzato all’interno del tag di apertura dell’elemento. Gli attributi sono costituiti da un nome e un valore.

Si noti che il valore di un attributo viene inserito tra virgolette utilizzando il formato Il tuo testo.

esempio di un attributo

Esempio:

Lui è un ragazzo

In questo esempio, stiamo dicendo che “He is a boy” è allineato al centro del documento.

Introduzione a HTML


Iniziare con HTMLSupponendo che tu voglia creare il tuo documento HTML di base oggi, come iniziare? Dalla creazione di titoli di pagina alla creazione di moduli, ti guideremo attraverso come iniziare con HTML di seguito.

Creazione di HTML Elemento

Quando crei un documento HTML, una delle prime cose che creerai è la elemento. Questo contiene metadati (o dati sul documento HTML). Ciò include informazioni come il set di caratteri, il titolo del documento, gli stili del documento, gli script, ecc.

Alcuni degli elementi nel includere il titolo, che viene creato con etichetta.</p><p><strong>Esempio</strong>:</p><pre><title>Questo è il titolo della nostra pagina

Questo titolo verrà visualizzato nella scheda del browser. È anche ciò che verrà indicizzato come titolo della pagina quando i robot dei motori di ricerca eseguono la scansione del tuo sito web.

Questo include anche il elemento, che viene spesso utilizzato per specificare le informazioni che i motori di ricerca possono utilizzare per descrivere il contenuto nei loro elenchi. Ciò include la descrizione, parole chiave, informazioni sull’autore, ecc L’elemento specifica anche il set di caratteri utilizzato dal documento HTML.

Creazione di intestazioni in HTML

creazione di intestazioni in html

I titoli svolgono un ruolo importante nel successo di un sito Web. In primo luogo, semplificano la lettura dei contenuti delle tue pagine da parte dei lettori. In secondo luogo, e forse ancora più importante, comunicano la struttura delle tue pagine Web ai motori di ricerca e quindi spesso incidono sul modo in cui i tuoi contenuti sono classificati nei risultati dei motori di ricerca.

Detto questo, è importante evitare l’uso di tag di intestazione per rendere il testo grande o grassetto. Ci sono altri tag che possono essere utilizzati per questo (che vedremo più avanti in questa sezione). Invece, i tag di intestazione dovrebbero essere usati esclusivamente per la struttura.

Esistono sei tag di intestazione in HTML:

per
, con il

tag che indica l’intestazione più importante e il
tag che indica l’intestazione meno importante.

Per creare intestazioni, decidi semplicemente quale intestazione stai creando, apri l’intestazione con il tag di intestazione normale e ricordati sempre di chiudere i tag una volta terminato.

Esempio di intestazioni HTML:

  • Questa è la tua prima intestazione HTML

    (il più grande)

  • Questa è la tua seconda intestazione HTML

  • Questa è la tua terza intestazione HTML

  • Questa è la tua quarta rubrica HTML

  • Questa è la tua quinta rubrica HTML
  • Questa è la tua sesta voce HTML

Creare paragrafi

creazione di paragrafi in HTML

Il prossimo passo è iniziare a creare paragrafi. I paragrafi possono essere creati con

etichetta.

Esempio:

Questo è il tuo primo paragrafo.

Questo è il tuo secondo paragrafo e creerai molti più paragrafi.

Tieni presente che la scrittura in HTML è molto diversa dalla scrittura in puro testo. Pertanto, se si interrompe il testo all’interno di HTML senza iniziare un nuovo paragrafo, non importa quando il testo viene visualizzato dal browser. Invece, si desidera utilizzare un’interruzione di riga, che è rappresentata da
etichetta.

Esempio:

Questo è un nuovo paragrafo. E voglio usare un numero di nuove righe. Quindi lo sto distruggendo.

Questo non verrà fuori come il seguente:

Questo è un nuovo paragrafo.
E voglio usare un numero di nuove righe.
Quindi lo sto distruggendo.

Invece, uscirà così:

Questo è un nuovo paragrafo E voglio usare un numero di nuove righe. Quindi lo sto distruggendo.

Quindi, come suddividere i testi in nuove righe in modo che mostrino così:

Questo è un nuovo paragrafo.
E voglio usare un numero di nuove righe.
Quindi lo sto distruggendo.

Usando le interruzioni di riga.

Esempio:

Questo è un nuovo paragrafo.
E voglio usare un numero di nuove righe.
Quindi lo sto distruggendo.

Detto questo, è importante notare che l’interruzione di linea (
) è un tag vuoto, quindi non è necessario chiuderlo.

Formattazione del testo in HTML

formattazione del testo in HTML

Il prossimo passo è formattare il testo in HTML. È qui che puoi indicare se vuoi che il tuo testo venga visualizzato in grassetto, corsivo, sottolineato, sottoscritto, sostituito, ecc. Questa è una guida di base, quindi questa sezione non sarà la più completa per la formattazione. Invece, includeremo solo alcuni tag di formattazione di base. Il processo per l’utilizzo di altre forme di formattazione è semplice: basta trovare il tag desiderato e andare avanti:

Usando grassetto: Lui è un ragazzo viene fuori come Lui è un ragazzo

Usando il corsivo: Lui è un ragazzo viene fuori come Lui è un ragazzo

Sottolineatura del testo: Lui è un ragazzo viene fuori come Lui è un ragazzo. Vale la pena notare che il il tag è stato deprecato in HTML 4.01 ed è stato ridefinito per rappresentare il testo stilisticamente diverso in HTML5. Di conseguenza, si consiglia di utilizzare i CSS per indicare il testo da sottolineare. Poiché questo articolo è una guida di base, lo stiamo mantenendo semplice.

Usando il pedice: Lui è un ragazzo viene fuori come Lui è un ragazzo

Usando l’apice: Lui è un ragazzo viene fuori come Lui è un ragazzo

Per altri tag che possono essere utilizzati per formattare, potresti voler dare un’occhiata al glossario alla fine di questa risorsa in cui abbiamo incluso molti tag HTML pertinenti.

Elenchi ordinati e non ordinati

Prima o poi dovrai creare elenchi. Le liste possono essere ordinate (cioè numerate) o non ordinate (cioè non numerate).

Ecco un esempio di un elenco ordinato:

  1. Articolo 1
  2. Articolo 2
  3. Articolo 3

Ecco come crearlo:

  1. Articolo 1
  2. Articolo 2
  3. Articolo 3

Ecco un esempio di un elenco non ordinato:

  • Articolo 1
  • Articolo 2
  • Articolo 3

Ecco come crearlo:

  • Articolo 1
  • Articolo 2
  • Articolo 3

Se non è già ovvio. Ecco una ripartizione:

Il

  • tag viene utilizzato per indicare ogni elemento nell’elenco. Quando si crea un elenco, è possibile utilizzare il
      tag per indicare un elenco ordinato (“o” = ordinato e “l” = elenco) o il