Ecco un articolo di Blog con alcuni codici HTML base per iniziare ad introdurre nel mondo del linguaggio du programmazione Web.

Se stai iniziando a lavorare con l’HTML, qui ti presentiamo i i codici HTML di base per le pagine web e diversi esempi che ritengo siano essenziali per qualsiasi programmatore.

SPAN

L’esempio seguente usa gli elementi span per indicare i nomi dei prodotti all’interno di un paragrafo. Questi nomi di prodotti possono essere evidenziati con CSS. Un motore di ricerca personalizzato potrebbe anche utilizzare le informazioni fornite dagli elementi span per identificare i prodotti all’interno della pagina.

<title> Titolo principale </title>

<meta http-equiv = «Tipo di contenuto» contenuto = «testo / html; set caratteri=utf-8">

<meta name = «description» content = «Titolo, sottotitoli e immagini»>

<meta name = «parole chiave» content = «Magodelpc, Marketing, Informatica»>

<link rel="stylesheet" type="text/css" href="/style.css">

<link rel="icona di collegamento" href="/favicon.ico">

<h1> TITOLO </h1>

<id div = "mainContent">

  <p> Paragrafo1.  <a href=”mouse.html”> Paragrafo2 </a> paragrafo3 </p>

  <p> Ecco una foto di Lucky: </p>

  <img src = "immagine.jpg" alt = "Magodelpc">

</div>

<id div = "barra laterale">

  <h2> Titolo 2 </h2>

  <p> Alcuni dei nostri prodotti includono <span class = «product»> SuperWidgets </span>, <span class = «product»> MegaWidgets </span> e <span class = «product»> WonderWidgets </span> . </p>

</div>

Come puoi vedere, è possibile creare un intero sito web utilizzando solo questi 10 codici HTML. La prima cosa che dovresti avere è un account di hosting.

Che cos’è un tag HTML?

Un tag HTML è una parola o una lettera speciale racchiusa tra parentesi angolari “< >”. Questi tag vengono utilizzati per creare elementi HTML, come paragrafi o collegamenti.

Molti elementi hanno un tag di apertura e un tag di chiusura; ad esempio, un elemento p (paragrafo) ha un tag seguito dal testo del paragrafo e quindi un tag di chiusura.

Alcuni elementi non hanno un tag di chiusura. Questi sono chiamati elementi vuoti. Ad esempio, l’elemento br per inserire interruzioni di riga viene semplicemente digitato
<br>

Se stai lavorando con XHTML, puoi scrivere elementi vuoti usando tag a chiusura automatica.

Codici HTML di base per le pagine web

– L’elemento radice

Tutti i siti web iniziano con l’elemento html. Viene anche chiamato elemento radice perché è alla radice dell’albero degli elementi che compongono una pagina web.

Per creare l’elemento html, devi scrivere un tag di apertura seguito da un tag di chiusura . Tutto il resto sulla tua pagina web va tra questi 2 tag.

Block-level

<p>...</p>Crea un paragrafo. In HTML il tag di chiusura non è opzionale.<blockquote>...</blockquote>Crea una citazione, convenzionalmente visualizzata indentata ma non realizzata per indentare il testo. Può automaticamente aggiungere delle virgolette.

– L’intestazione del documento

L’elemento head contiene informazioni sulla pagina web, al contrario del contenuto del web stesso. Ci sono molti elementi che puoi inserire all’interno dell’elemento di intestazione, come:

Titolo

Link, che puoi utilizzare per aggiungere fogli di stile e favicon alla tua pagina.

Meta, per specificare cose come set di caratteri, descrizioni di pagina e parole chiave dei motori di ricerca.

Script, per aggiungere codice JavaScript alla pagina.

Ecco un esempio di un tipico elemento di testa:

TITOLO

– Il titolo della pagina

Questo tag contiene il titolo della pagina. Il titolo viene visualizzato nella barra del titolo del browser (nella parte superiore della finestra del browser), nonché nei segnalibri, nei risultati delle tendenze di ricerca di Google e in molti altri luoghi.

Il titolo deve descrivere accuratamente il contenuto della pagina. Prova a dare a ogni pagina del tuo sito un titolo univoco.

Ecco un esempio:

Le avventure del mio gatto fortunato

– Il contenuto della pagina

Il tag del corpo o del contenuto viene visualizzato dopo l’elemento principale della pagina. Deve contenere tutte le informazioni del tuo sito web: testo, immagini, ecc. Tutte le pagine Web hanno un singolo elemento body, ad eccezione delle pagine frameset.

– Intestazione della sezione

Le intestazioni ti consentono di suddividere il contenuto della pagina in blocchi leggibili. Funzionano in modo molto simile ai titoli e ai sottotitoli di un libro o di un rapporto.

HTML supporta 6 elementi di intestazione: h1, h2, h3, h4, h5 e h6. Di questi, h1 è per i titoli più importanti, h2 è per i sottotitoli meno importanti e così via. In generale, non dovrai usare più di h1, h2 e h3, a meno che la tua pagina non sia molto lunga e complessa.

Questo è un esempio di un elemento di intestazione h1:

TITOLO

– Un paragrafo

L’elemento p consente di creare paragrafi di testo. La maggior parte dei browser visualizza i paragrafi con uno spazio verticale tra ciascuno, separando bene il testo.

Sebbene tu possa creare “paragrafi” di testo semplicemente usando i tag
per inserire righe vuote tra parti di testo, nella maggior parte dei casi è meglio usare elementi p. Non solo è più ordinato, ma offre ai browser e ai motori di ricerca un’idea migliore di come è strutturata la tua pagina.

Ecco un esempio di paragrafo:

<p> Paragrafo </p>

Il mio gatto Lucky ha molte avventure. Ieri ha catturato un topo e stamattina ne ha presi due!

Una buona regola pratica quando si scrive testo per il Web è assicurarsi che ogni paragrafo contenga un singolo punto, argomento o pensiero. Se vuoi parlare di 2 cose diverse, usa 2 paragrafi.

• – Un collegamento

Uno degli elementi più importanti di una pagina web è l’elemento a perché permette di creare collegamenti ad altri contenuti. Il contenuto può essere sul tuo sito o altrove.

Per creare un collegamento, utilizza i tag e attorno al contenuto a cui desideri collegarti e fornisci l’URL a cui collegarti nell’attributo href del tag .

• – Un’immagine

L’elemento img permette di inserire immagini in una pagina web. Per incorporare un’immagine, carica prima l’immagine sul tuo server, quindi usa un tag per fare riferimento al nome del file dell’immagine caricata.

Ecco un esempio:

L’attributo alt è obbligatorio per tutti i tag img. Viene utilizzato dai browser che non visualizzano immagini per offrire al visitatore testi alternativi.

• – Un contenitore a livello di blocco per il contenuto

Elemento Div

L’elemento div è un contenitore generico che puoi utilizzare per aggiungere più struttura al contenuto della tua pagina. Ad esempio, puoi raggruppare più paragrafi o intestazioni che hanno uno scopo simile in un elemento div. In genere, gli elementi div vengono utilizzati per:

• • Intestazioni e piè di pagina
• • Colonne dei contenuti e barre laterali.
• • Evidenzia le caselle all’interno del flusso di testo
• • Aree della pagina con uno scopo specifico, come annunci pubblicitari.
• • Gallerie di immagini.

Aggiungendo attributi class e/o id ai tuoi elementi div, puoi utilizzare CSS per definire lo stile e posizionare i div. Questa è la base per creare layout di pagina basati su CSS.

Intestazione barra laterale

Testo della barra laterale

Altro testo nella barra laterale

• – Un elemento inline per il contenuto

L’elemento span è simile a un div in quanto viene utilizzato per aggiungere struttura al contenuto. La differenza è che div è un elemento a livello di blocco, mentre span è un elemento inline:

• Gli elementi a livello di blocco, come div, h1 e p, sono progettati per contenere blocchi di contenuto relativamente grandi o autonomi, come paragrafi di testo. Un elemento a livello di blocco inizia sempre su una nuova riga.

• Gli elementi inline, come span, a e img, sono progettati per contenere contenuti più piccoli, come poche parole o una frase, all’interno di un blocco di contenuti più grande. L’aggiunta di un elemento inline non provoca la creazione di una nuova riga e, inoltre, gli elementi a livello di blocco possono contenere elementi inline; tuttavia, gli elementi inline non possono contenere elementi a livello di blocco

Gli elementi inline, ad esempio STRONG, ITALIC e UNDERLINE”) non creano blocchi, vengono visualizzati sulla stessa linea con i contenuti del tag adiacenti. La larghezza e l’altezza dell’elemento “in linea” dipende solo dal suo contenuto, non si possono specificare le sue dimensioni con i CSS.