Chiudi il Menu
iSpazioiSpazio
  • Prime Day
  • Notizie
  • Offerte iSpazio
  • Sfondi
  • Downloads
  • Recensioni
  • iOS 26
  • Sconti Amazon
Menu Espanso
  • Home
  • Forum
  • Notizie
  • Offerte iSpazio
  • iOS 26
  • iPhone 16
  • Downloads
  • Guide
  • Sconti Amazon
  • Contatti
  • Pubblicità
Facebook X (Twitter) Instagram YouTube TikTok
iSpazioiSpazio
  •  Forum
  • Offerte iSpazio
  • Wallpapers Central
  • Teslers
Scarica l'App
  • Prime Day
  • Offerte
  • Sfondi
  • Guide
    • Personalizzazione
    • Video Guide TikTok
  • Recensioni
  • Downloads
    • Sfondi
    • Suonerie
    • Comandi Rapidi
    • Sfondi Personalizzati
    • Widget e Altro
    • iOS
    • iTunes
  • Dispositivi Apple
    1. iPhone
    2. iPad
    3. Mac
    4. Apple Watch
    5. iOS 26
    6. Vedi tutto

    iPhone 17 Air: primo video hands-on del modello ultra-sottile in nero

    9 Lug 2025

    iPhone 17, l’Isola dinamica cambia volto: redesign per tutta la gamma in arrivo

    8 Lug 2025

    iPhone 17e si farà, lancio previsto in primavera 2026

    8 Lug 2025

    Apple sceglie un blu esclusivo per l’iPhone 17 Air, ecco i dettagli

    8 Lug 2025

    iPadOS 26 porta quattro nuove app su tutti gli iPad compatibili

    26 Giu 2025

    Apple avvia la produzione dei nuovi iPad Pro OLED, lancio previsto in autunno

    26 Giu 2025

    iPad Pro verso cornici più sottili: Apple valuta nuovi chip driver LG

    24 Giu 2025

    iPadOS 26 porta Stage Manager su molti più modelli di iPad

    23 Giu 2025

    BOE diventa il principale fornitore di display per i MacBook

    8 Lug 2025

    Apple ha già definito i piani per 15 nuovi Mac: M5 entro il 2025, M6 e redesign nel 2026. Bonus: un MacBook economico

    4 Lug 2025

    Il MacBook Pro con display OLED arriverà nel 2026 e potrebbe dire addio al notch

    3 Lug 2025

    Trovati i primi riferimenti al MacBook con chip A18 Pro nel codice Apple

    1 Lug 2025

    Apple Watch Ultra 3, la nuova generazione arriva con 5G e messaggi satellitari

    4 Lug 2025

    Apple Watch e AirPods guidano ancora il mercato, ma Huawei riduce il divario

    3 Lug 2025

    watchOS 26 avvisa se la batteria dell’Apple Watch si scarica più velocemente del solito

    3 Lug 2025

    watchOS 26 introduce i suggerimenti sui quadranti dell’Apple Watch

    2 Lug 2025

    Ecco le imperdibili offerte KUXIU sui supporti, caricatori e batterie allo stato solido per i vostri dispositivi Apple!

    10 Lug 2025

    Prime Day: Terza giornata di sconti. Ecco la nostra selezione dei migliori prodotti del 10 Luglio | LIVEBlog

    10 Lug 2025

    🔥 Gli imperdibili del Prime Day 2025

    9 Lug 2025

    Tutti i prodotti Apple in sconto per il Prime Day 2025: AGGIORNATO con ulteriori ribassi!

    9 Lug 2025

    Ecco le imperdibili offerte KUXIU sui supporti, caricatori e batterie allo stato solido per i vostri dispositivi Apple!

    10 Lug 2025

    Prime Day: Terza giornata di sconti. Ecco la nostra selezione dei migliori prodotti del 10 Luglio | LIVEBlog

    10 Lug 2025

    🔥 Gli imperdibili del Prime Day 2025

    9 Lug 2025

    Tutti i prodotti Apple in sconto per il Prime Day 2025: AGGIORNATO con ulteriori ribassi!

    9 Lug 2025
  • iPhone 16
  • iOS 26
  • Sconti Amazon
Contatti
Pubblicità
iSpazioiSpazio
  • Prime Day
  • Notizie
  • Offerte iSpazio
  • Sfondi
  • Downloads
  • Recensioni
  • iOS 26
  • Sconti Amazon
Segui il Prime Day in diretta su iSpazio

Segui il Prime Day in diretta su iSpazio

Clicca per aprire la nostra pagina LIVE!
Notizie

iSpazio DevResources 03: Nozioni Generali di HTML

Francesco SciutiDi Francesco Sciuti28 Mar 2011Commenta9 min di lettura
Condividi Facebook Twitter Telegram WhatsApp Copia Link Threads Email
Share
Facebook Twitter WhatsApp Telegram Threads Email Copia Link
In qualità di Affiliato Amazon, iSpazio riceve un guadagno dagli acquisti idonei (info). Vedi le offerte su Telegram.
Icona Cerchi Prodotti Apple ed accessori Tech in sconto?

Cerchi Prodotti Apple ed accessori Tech in sconto?

Segui il nostro canale @scontiamolo su Telegram!

Benvenuti ad un nuovo appuntamento per la programmazione web di iSpazio DevResources!

Advertising

Questa volta faremo una panoramica sulle caratteristiche generiche del linguaggio HTML ed in particolare sui “mattoni” che lo costruiscono direttamente secondo le direttive che lo standard ci propone.
Questa lezione quindi, vuole essere uno spunto per consentire agli utenti di conoscere le caratteristiche fondamentali del linguaggio HTML, descrivendo solo gli aspetti utili per un approfondimento successivo.

Ma iniziamo subito…

Come abbiamo precedentemente detto, il linguaggio HTML (che è acronimo di Hypertext Markup Language) è un linguaggio di Markup, cioè un linguaggio che consente di “descrivere” il contenuto della nostra pagina web, ben diverso da quello che è un linguaggio di programmazione (in quanto, per esempio, l’HTML non ci consente di gestire operazioni condizionali come il classifo if, then, else).

Lo scopo del linguaggio è quello di consentire ad uno “user-agent” (nel nostro caso il browser) di leggere ed interpretare correttamente la nostra pagina, rappresentandola in tutte le sue caratteristiche indipendentemente da quale sia il dispositivo che lo “valuta”. I documenti HTML possono essere difatti interpretati da un enorme numero di dispositivi video, attraverso un sintetizzatore vocale, o anche su un display braille.

I documenti HTML normalmente hanno un estensione .html o .htm (per la compatibilità con i tempi dei sistemi operativi con supporto ad estensioni file da 3 caratteri), ed è possibile crearli o editarli per mezzo di un semplice editor di testo, nonostante siano presenti sul mercato numerosissimi editor specifici sia commerciali che open source.

E’ possibile approfondire l’argomento e vedere un elenco di software alla pagina: http://it.wikipedia.org/wiki/Lista_di_editor_HTML


La struttura dei documenti

Ogni documento HTML è costituito da una struttura ad albero di elementi e testi che definiscono la struttura della pagina che deve essere interpretata dal browser.

Gli elementi HTML che compongono la struttura ad albero possono rappresentare intestazioni, paragrafi, collegamenti ipertestuali, elenchi, immagini, oggetti multimediali e tanti altri tipi di strutture utili a descrivere e popolare al meglio la nostra pagina web.

Ognuno di questi elementi deve essere rappresentato sul documento HTML per mezzo di Tag, che sono gli “ormai famosi” descrittori indicati dalle parentesi acute < e >
I tag possono essere scritti indistintamente sia in minuscolo che in maiuscolo e, consentono al browser di interpretare correttamente i singoli elementi della pagina e la struttura gerarchica che li correla.

Per chiarire un pò questi concetti è sicuramente più semplice vedere come si presenta un documento HTML base:

<!DOCTYPE html>
<html>
<head>
<title>Titolo per la barra titolo del browser</title>
</head>
<body>
<h1>Titolo della pagina</h1>
<p>Questo è un paragrafo</p>
<!– e questo invece è un commento –>
<p>Questo è un paragrafo
<a href=”test2.html”>con un link contenuto in esso</a>
</p>
</body>
</html>

L’elemento radice di questo albero è l’elemento <html>, che è l’elemento sempre presente nei documenti HTML, e che contiene due elementi ulteriori <head> e <body> che tratteremo meglio in seguito.

 

Descrivere Elementi HTML con i Tag

La tipologia degli elementi HTML è suddivisa in 5 macro categorie a seconda del tipo di tag da utilizzare per la pagina web:

  • Normali: ritentrano in questa categoria gli elementi che consentono di contenere al loro interno ulteriori dati che vanno dal semplice contenuto testuale sino ad arrivare ad altri elementi HTML.

Normalmente questo tipo di elementi sono descritti per mezzo di un tag di apertura (ad esempio <p> che è il tag di apertura per i paragrafi) ed uno di chiusura (ad esempio </p> che è il tag di chiusura per i paragrafi).
Nell’esempio su riportato possiamo notare tra i tag normali gli elementi <p> (uno di essi ad esempio contiene a sua volta un tag collegamento ipertestuale <a>, le intestazioni <h1>, etc…).

<p>Questo è un paragrafo</p>

  • Vuoti: rientrano in questa categoria gli elementi che non consentono di contenere nulla al loro interno e sono descritti per mezzo di tag cosi detti ‘vuoti’.

In questo caso non esiste un tag di apertura ed uno di chiusura, bensì vengono indicati con un tag unico, come ad esempio <img> che consente di definire le immagini:

<img src=”foto.jpg” alt=”questa è una foto” />

o evitando lo slash finale e quindi:

<img src=”foto.jpg” alt=”questa è una foto” >

  • Contenuto “Foreign” (Estraneo): rientrano in questa categoria gli elementi che fanno parte di altre specifiche esterne ad HTML (come SVG, MathML, etc…), ma che possono essere incluse nelle pagine web HTML.
  • Testo “Raw” (Grezzo): rientrano in questa categoria gli elementi che consentono di includere script <script> e stili <style> nella pagina HTML.

Questi elementi sono anch’essi descritti con tag di apertura e chiusura.

  • RCDATA: rientrano in questa categoria gli elementi di tipo titolo <title> e Area di testo <textarea>. Questi elementi consentono di avere un testo incluso trattato come “testo letterale”, in modo da ignorare ciò che altrimenti potrebbe essere interpretato come un tag o un carattere speciale.

E’ utile sapere che è possibile includere nei documenti anche dei commenti testuali (non valutati dai browser) inserendoli tra la combinazione di caratteri <!– e –>.
I commenti possono essere anche distribuiti su più righe.

N.B. Nonostante sia possibile in casi particolari poter omettere la chiusura di tag, o l’omissione di interi tag (come ad esempio lo stesso <html> tag di apertura della pagina) si ritiene fortemente sconsigliato utilizzare queste scorciatoie  sia per migliorare la leggibilità del codice, sia per l’interpretazione da parte dei browsers.

 

Nidificazione di Elementi HTML con i Tag

Tralasciando momentaneamente il significato dei singoli tag (che verranno man mano snocciolati con il divenire delle lezioni) è comunque possibile notare dall’esempio su riportato e dalla distinzione per tipologia degli elementi che un file HTML è composto da una serie di tag che descrivono la struttura del documento stesso, ed alcuni dei tag (quelli su descritti come “Normali” ad esempio) consentono di nidificare ulteriori elementi, offrendo così elevatissime possibilità di realizzazione dei contenuti e la creazione della struttura ad albero della pagina.

La possibilità di nidificare ha in ogni modo alcune regole:

  • E’ importante sapere che la nidificazione dei tag non deve avere sovrapposizioni tra di essi, e cioè che ogni tag deve essere completamente all’interno dell’elemento che lo contiene.
  • E’ inoltre necessaria una distinzione tra gli elementi  di tipo block-level ed inline.

Un elemento di tipo block-level può contenere altri elementi dello stesso tipo, elementi testuali ed elementi inline. All’interno di una pagina un elemento di tipo block-level verrà sempre mostrato su una nuova riga, prenderà tutta la larghezza disponibile del suo tag “contenitore”, mentre l’altezza cambierà a seconda del suo contenuto.

Alcuni esempi di elementi HTML di tipo block-level sono: <div>, <h1>…<h6>, <p>, <ul>, <ol>, <dl>, <table>, <blockquote>, <form>

  • Un elemento di tipo inline potrà contenere solo ulteriori elementi dello stesso tipo.
  • Un elemento di tipo inline si disporrà orizzontalmente sulla riga corrente e prenderà la dimensione (sia in larghezza che in altezza) minima per il suo contenuto.

Alcuni esempi di elementi HTML inline sono: <span>, <a>, <strong>, <em>, <img />, <abbr>.


Gli Attributi

Ogni elemento può avere degli attributi che descrivono come deve comportarsi all’interno della pagina web stessa, come ad esempio consentire di avere un nome univoco per essere identificato, specificare l’appartenenza ad una specifica “classe” di elementi, essere visibile o meno, essere editabile o meno, e così via.

Gli attributi dei tag vanno indicati all’interno dell’apertura del Tag, e vanno indicati nel seguente modo Attributo=”valore attributo”.

Le virgolette (o eventualmente gli apici) possono essere omesse nel caso in cui il valore non contenga spazi, mentre sono obbligatorie in caso di stringhe vuote o di  alcuni  caratteri particolari come “, ‘, =, parentesi acute, etc…

<!-- Esempi di Attributi vuoti -->

<input name=ragsociale disabled>

<input name=ragsociale disabled="">

<!-- Esempi di Attributi con valore -->

<input name=ragsociale maxlength=50>

<input name=ragsociale maxlength='50'>

<input name=ragsociale maxlength="50">

E’ necessario fare una distinzione. Esistono degli attributi di carattere Globale (cioè applicabili indistintamente a tutti gli elementi HTML) ed alcuni di carattere specifico (cioè applicabili solo ad alcuni specifici elementi HMTL).

Sono inoltre disponibili con l’avvento di HTML 5 anche degli attributi di tipo custom, che saranno comunque trattati al momento opportuno mentre inizieremo dal prossimo appuntamento a trattare gli attributi Globali.


Stili di una pagina HTML

Risulta necessario chiarire che in HTML viene descritta la struttura della pagina, mentre la gestione della formattazione viene delegata ai CSS (Cascading Style Sheets), cosi da rendere possibile la corretta visualizzazione  su un enorme numero di dispositivi differenti.
Difatti la distinzione tra le due tecnologie rende possibile separare nettamente i contenuti della pagina, dalla formattazione grafica degli stessi consentendo uno sviluppo più semplice ed efficace anche su dispositivi di differente natura.

N.B. L’argomento CSS è estremamente ampio ed in questo corso non verrà trattato, ma si accennerà spesso a delle caratteristiche dello stesso per consentire un corretto svolgimento del corso.

 

Scripting

Come anticipato la scorsa volta il browser al momento del caricamento di un documento HTML si occuperà di valutare la struttura del documento per creare il DOM del documento stesso, che è una API di programmazione che offre una collezione di oggetti di tutti gli elementi che compongono la pagina stessa (oltre a degli oggetti globali) e che possono essere “gestiti” per mezzo di un linguaggio di scripting “DOM Oriented” come javascript.

Il DOM può essere manipolato dagli script nella pagina, che sono piccoli programmi (tipicamente in JavaScript) che possono essere incorporate utilizzando l’elemento <script>.

N.B. L’argomento Script e Javascript è estremamente importante per poter conoscere la specifica HTML 5, che basano moltissime delle novità proprio sullo scripting.
Il linguaggio Javascript risulta inevitalbimente un requisito fondamentale per la corretta comprensione del corso, anche se proveremo il più possibile ad essere chiari negli esempi.


Conclusioni

Concludiamo questo appuntamento sperando di aver saziato i palati di più lettori possibile facendo degli accenni generali al linguaggio ed ai “mattoni fondamentali” per la costruzione di pagine web.

Dal prossimo appuntamento comincieremo a fare sul serio iniziando ad analizzare i tag fondamentali presenti su ogni pagina (come su anticipato i vari <html>, <body>, etc…) ed i nuovissimi tag strutturali e semantici! Spero di esservi stato utile!

Alla prossima…

Francesco Sciuti

P.S. Per i più curiosi e studiosi vi suggerisco alcuni links dove poter trovare un’analisi dettagliata di ogni singolo tag presente nel nuovo standard HTML 5, ed anche dei tag ormai in disuso e deprecati.

  • http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/html5-cheat-sheet/html5-cheat-sheet.pdf
  • http://www.quackit.com/html_5/tags/
  • http://www.w3schools.com/html5/default.asp

 

Sai che siamo anche su Telegram? Unisciti al nostro canale iSpazio per ricevere le notifiche oppure Apple Italia per chattare con altri utenti. Scopri i migliori prodotti Tech in sconto su Amazon con il nostro canale OFFERTE iSpazio.
Icona dell'applicazione Le Migliori Offerte selezionate da iSpazio disponibile su App Store

Le Migliori Offerte selezionate da iSpazio

VEDI TUTTE

  • Filtra:
  • Tutte
  • Minimo Storico
  • Alimentari e cura della casa
  • Bellezza
  • Cancelleria e prodotti per ufficio
  • Casa e cucina
  • Dispositivi amazon
  • Elettronica
  • Fai da te
  • Giardino e giardinaggio
  • Giochi e giocattoli
  • Illuminazione
  • Moda
  • Prodotti per animali domestici
  • Salute e cura della persona
  • Software
67%  
In Evidenza
114,98€37,99€
In Evidenza
104,00€Gratis
57%  
In Evidenza
134,98€37,99€
20%  
In Evidenza
729,00€584,00€
32%  
In Evidenza
279,00€189,00€
15%  
In Evidenza
52,95€45,00€
49%  
In Evidenza
69,99€35,99€
49%
In Evidenza
64,99€32,99€
58%  
In Evidenza
291,19€121,28€
21%
02:29
55,39€43,50€
51%  
02:29
54,99€26,99€
36%
02:28
19,31€12,44€
8%
01:33
5,99€5,50€
8%
01:31
18,50€17,03€
41%  
01:27
202,80€119,00€
63%  
00:59
149,90€54,76€
47%
00:51
7,90€4,19€
27%
00:51
44,99€32,66€
15%
00:51
19,74€16,78€
5%  
00:40
1.279,00€1.209,00€
47%
00:40
45,00€23,65€
33%  
00:40
8,99€5,99€
10%  
00:38
2.319,00€2.083,00€
61%  
00:31
38,16€14,99€
37%
00:29
25,74€16,29€
32%  
00:29
1.299,00€889,00€
10%  
00:29
34,90€31,41€
43%  
00:23
41,99€23,99€
37%  
00:21
25,99€16,37€
30%  
00:21
24,40€16,99€
29%  
00:21
42,16€29,99€
40%  
00:21
49,99€29,99€
17%  
00:21
6,36€5,27€
40%  
00:16
249,00€149,00€
29%
00:16
39,99€28,49€
30%  
00:16
369,99€258,99€
48%
00:12
1.199,00€627,79€
53%  
00:12
15,56€7,36€
53%  
00:12
299,99€139,99€
80%  
00:12
132,35€26,84€
24%  
00:12
24,45€18,51€
64%  
00:12
269,98€96,49€
43%  
00:12
34,99€19,99€
63%  
00:12
189,98€69,49€
30%  
00:12
22,99€15,99€
37%
00:12
26,99€16,99€
19%
00:09
20,95€16,95€
64%  
00:09
26,00€9,36€
39%  
00:09
89,95€55,00€
15%  
00:09
35,00€29,75€
6%  
00:09
52,60€49,21€
6%  
00:09
52,60€49,21€
15%
00:09
35,00€29,75€
7%  
00:06
52,50€48,99€
42%
00:06
44,99€25,99€
5%  
00:06
2.319,00€2.199,00€
29%  
00:06
1.214,00€859,00€
45%
00:06
150,00€82,07€
22%  
00:06
114,99€89,99€
81%  
00:06
35,92€6,67€
24%
00:06
139,90€106,00€
5%  
00:06
45,50€43,22€

Scarica la nostra app e leggi le notizie in mobilità. Porta iSpazio sempre con te, anche su Telegram.
| Applicazione iOS
Con l'applicazione ufficiale di iSpazio resterai sempre aggiornato sulle notizie Apple, video tutorial per iPhone e tanto altro. riceverai una notifica per ogni nuovo articolo. Puoi utilizzare anche i Widget per tenere le novità sott'occhio nella Home o nella Lockscreen.
Scaricala subito!
| Canale Telegram 10.700+ Utenti
Su Telegram invece, segnaliamo soltanto le notizie più importanti ed urgenti oppure i nostri nuovi video su YouTube. E' un canale molto interessante, assolutamente non invasivo perchè non inviamo troppe push, e vi consigliamo di seguirci anche lì.
Unisciti a noi!
ispazio notifiche
Seguici su Google News
Condividi Facebook Twitter Telegram WhatsApp Threads Email Copia Link
Articolo precedenteCondividi con i tuoi amici la musica in riproduzione via WiFi o Bluetooth, grazie a Eavesdrop!
Articolo successivo L’Apple Design Awards 2011 riguarderà sia le applicazioni Mac che quelle iOS

Articoli correlati

Apple sogna il suo cloud per sviluppatori con chip proprietari: la vera sfida a AWS e Google Cloud?

4 Lug 2025Commenta

Phone 17 Air, la fotocamera frontale cambia posizione

27 Giu 2025Commenta

visionOS 26 abbraccia il gaming: supporto nativo per controller PlayStation, Xbox e dispositivi spaziali

4 Giu 2025Commenta

iPhone: rivoluzione continua fino al 2027, Apple prepara tre restyling consecutivi

27 Mag 2025Commenta

Leggi o Aggiungi Commenti

Advertising

Da non perdere!

Ecco la lista degli iPhone sui quali è possibile installare iOS 26

9 Giu 2025

iOS 26 Beta 1 è disponibile: Ecco come scaricarlo ed installarlo su iPhone

9 Giu 2025

iOS 26 nasconde tantissime novità utili e inaspettate: ecco tutte le funzioni “minori” che miglioreranno l’esperienza quotidiana [26]

13 Giu 2025

iOS 26 beta 3: Tutte le novità raccolte in un solo articolo in continuo aggiornamento! [10]

7 Lug 2025
Advertising

Gli articoli più letti

Apple Ring, l’anello intelligente che potrebbe cambiare il futuro degli indossabili

Apple Watch Ultra 3, la nuova generazione arriva con 5G e messaggi satellitari

Info su iSpazio
Info su iSpazio

iSpazio è il punto di riferimento italiano per tutti gli appassionati Apple. Dal 2007, sul nostro sito trovi notizie, recensioni e guide per imparare ad utilizzare al meglio iOS, l'iPhone e tutti gli altri dispostivi dell'azienda.

Contattaci
Pubblicità

Il Network
Il Network

L'esperienza maturata su iSpazio ci ha portati, con il tempo, a realizzare altri progetti ed aprire nuovi siti con tematiche strettamente correlate al nostro Blog principale.

Oggi, siamo i fieri proprietari di un Network composto da: iSpazio, Scontiamolo, Wallpapers Central e Teslers.

Link Rapidi
  • Chi siamo
  • Contattaci
  • Legal
  • Privacy Policy
  • Pubblicità su
© Copyright 2025 iSpazio SRL | Partita IVA: 10137091210
  • Chi siamo
  • Contattaci
  • Legal
  • Privacy Policy
  • Pubblicità su

Type above and press Enter to search. Press Esc to cancel.