Close Menu
iSpazioiSpazio
  • Notizie
  • Offerte
  • Downloads
  • Recensioni
  • Sconti Amazon
Menu Espanso
  • Home
  • Forum
  • Notizie
  • Offerte
  • iOS 18
  • iPhone 16
  • Downloads
  • Guide
  • Sconti Amazon
  • Contatti
  • Pubblicità
Facebook X (Twitter) Instagram YouTube TikTok
iSpazioiSpazio
  •  Forum
  • Scontiamolo
  • Wallpapers Central
  • Teslers
Scarica l'App
  • W W D C 2 5
  • Offerte
  • 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. View All

    iPhone 16e entra nella Top 10 in Europa, ma non convince come gli SE

    3 Giu 2025

    WhatsApp interrompe il supporto per alcuni modelli di iPhone

    3 Giu 2025

    iPhone 17 e 17 Air con schermo a 120Hz, ma senza ProMotion | Rumor

    3 Giu 2025

    iPhone 17 delude già prima del lancio: ancora un chip A18 e solo 8GB di RAM

    2 Giu 2025

    iPadOS 26 apre la strada all’iPad gigante: tutto ruota intorno al nuovo modello pieghevole

    13 Giu 2025

    iPadOS 26, watchOS 26 e macOS Tahoe: Ecco quali sono i dispositivi compatiibili sui quali potremo installarli

    10 Giu 2025

    iPadOS 26 migliora il multitasking con le applicazioni che diventano finestre in stile desktop

    10 Giu 2025

    iPadOS 26 rivoluzionerà il multitasking su iPad

    8 Giu 2025

    Apple migliora l’AutoFill dei codici di verifica su iOS 26 e macOS Tahoe

    13 Giu 2025

    iPadOS 26, watchOS 26 e macOS Tahoe: Ecco quali sono i dispositivi compatiibili sui quali potremo installarli

    10 Giu 2025

    Apple presenta macOS Tahoe 26 che rende il Mac più versatile, produttivo ed intelligente che mai

    10 Giu 2025

    macOS 26 potrebbe chiamarsi “macOS Tahoe” | Rumor

    2 Giu 2025

    watchOS 26 introduce una nuova gesture del polso: ecco i modelli compatibili

    12 Giu 2025

    iOS 26 introduce le Notifiche per il Meteo estremamente avverso e widget dedicati per le tue prossime destinazioni

    11 Giu 2025

    Apple rimuove 5 quadranti da Apple Watch con l’arrivo di watchOS 26: ecco a quali dovremo dire addio

    11 Giu 2025

    iPadOS 26, watchOS 26 e macOS Tahoe: Ecco quali sono i dispositivi compatiibili sui quali potremo installarli

    10 Giu 2025

    CarPlay si rinnova con iOS 26: Ecco tutte le 9 novità in arrivo tra nuovo design, widget, video in sosta ed altro

    14 Giu 2025

    tvOS 26 ed iOS 26 offrono la funzione di Login Automatico per le applicazioni su Apple TV

    14 Giu 2025

    Problemi di spazio in memoria per gestire gli aggiornamenti software automatici? iOS 26 pensa anche a questo!

    14 Giu 2025

    Apple apre ai codici promozionali per tutti gli acquisti in-app, non solo abbonamenti

    14 Giu 2025

    CarPlay si rinnova con iOS 26: Ecco tutte le 9 novità in arrivo tra nuovo design, widget, video in sosta ed altro

    14 Giu 2025

    tvOS 26 ed iOS 26 offrono la funzione di Login Automatico per le applicazioni su Apple TV

    14 Giu 2025

    Problemi di spazio in memoria per gestire gli aggiornamenti software automatici? iOS 26 pensa anche a questo!

    14 Giu 2025

    Apple apre ai codici promozionali per tutti gli acquisti in-app, non solo abbonamenti

    14 Giu 2025
  • iPhone 16
  • iOS 26
  • Sconti Amazon
Contatti
Pubblicità
iSpazioiSpazio
  • Notizie
  • Offerte
  • Downloads
  • Recensioni
  • Sconti Amazon
Notizie

iSpazio DevResources 03: Nozioni Generali di HTML

Francesco SciutiBy Francesco Sciuti28 Mar 2011Commenta9 Mins Read
Condividi Facebook Twitter Telegram WhatsApp Copy Link Threads Email
Share
Facebook Twitter WhatsApp Telegram Threads Email Copy 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.

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
Share. Facebook Twitter Telegram WhatsApp Threads Email Copy Link
Previous ArticleCondividi con i tuoi amici la musica in riproduzione via WiFi o Bluetooth, grazie a Eavesdrop!
Next Article L’Apple Design Awards 2011 riguarderà sia le applicazioni Mac che quelle iOS

Articoli correlati

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

Apple prepara il più grande restyling software dai tempi di iOS 7 e coinvolgerà tutti i suoi sistemi operativi

26 Mag 2025Commenta

Sicurezza mobile 2025: le 7 minacce più pericolose per smartphone e tablet e come proteggersi

22 Mag 2025Commenta

Leggi o Aggiungi Commenti

Advertising

Da non perdere!

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

9 Giu 2025

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

9 Giu 2025

Apple presenta iOS 26 con nuovo design “Liquid Glass” e tantissime novità!

10 Giu 2025

Apple prepara il più grande restyling software dai tempi di iOS 7 e coinvolgerà tutti i suoi sistemi operativi

26 Mag 2025
Advertising

Gli articoli più letti

watchOS 26 introduce una nuova gesture del polso: ecco i modelli compatibili

iOS 18.6 sarà uno degli ultimi aggiornamenti prima dell’arrivo di iOS 26, ecco cosa aspettarsi

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 Smart 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.