Concetti Chiave

  • HTML è il linguaggio fondamentale per la creazione di pagine web, consentendo l'inserimento di testo e oggetti multimediali.
  • La struttura di un file HTML si divide in intestazione e corpo, con tag specifici per ogni sezione.
  • È possibile creare un file HTML utilizzando il Blocco Note, cambiando l'estensione da *.txt a *.html al momento del salvataggio.
  • HTML è case-unsensitive, permettendo l'uso di tag sia in maiuscolo che in minuscolo senza alterare il funzionamento del codice.
  • I tag di apertura e chiusura definiscono l'inizio e la fine di ciascuna sezione all'interno di un file HTML.

1.

HyperText Markup Language: Linguaggio di

Formattazione (o Marcatura) per Ipertesti

● Ipertesto: è un insieme di documenti messi in

relazione tra loro per mezzo di collegamenti.

All'interno di un ipertesto si possono inserire

anche oggetti multimediali, come le immagini,

video, etc.

● Un file *.doc creato con Microsoft Word è un

esempio di ipertesto.

2.

Pagine web

Creazione di pagine web

● Gli ipertesti ci consentono di realizzare anche

pagine web

● Il linguaggio necessario per creare una pagina

web è il linguaggio HTML

● Per creare un file *.html è sufficiente il Blocco Note

● Per visualizzare un file *.html è necessario un

Browser (Internet Explorer, Mozilla Firefox, Google

Chrome, Safari, Opera, etc..).

3.

Struttura di un file HTML

Struttura base di un file *.html

● Il codice base, comune a tutti i file *.html, è

composto da una serie di parole chiave (detti tag)

● La struttura si suddivide in una parte di intestazione

e in un corpo

● Nell'intestazione indichiamo, ad esempio, il titolo

della pagina che verrà visualizzato nella Barra del

Titolo del Browser

● Nel corpo inseriamo testo, immagini e quant'altro da

visualizzare nel Browser.

4.

Struttura base di un file *.html

● Il codice base è:



Il titolo della pagina





5.

TAG

● = tag di apertura del file HTML

● = tag di chiusura del file HTML

= tag di apertura dell'intestazione

● = tag di chiusura dell'intestazione

= tag di apertura del titolo all'interno dell'intestazione<br><p> ● </p> = tag di chiusura del titolo all'interno dell'intestazione

= tag di apertura del corpo

● = tag di chiusura del corpo

6.

HTML è CASE-UNSENSITIVE

Case sensitivity in HTML

● Case-unsensitive: è indifferente se scrivo i tag

HTML in maiuscolo oppure in minuscolo

Posso scrivere:

– oppure .

7

Come salvare un file *.html
● Per creare un file *.html, basta utilizzare il Blocco Note.

● Al primo salvataggio è necessario però modificare

l'estensione del file da quella di default del Blocco Note

(*.txt) a *.html

● Cliccando su “Salva con nome” dal menu File del Blocco

Note, si apre una finestra di dialogo. Inserire

nomefile.html, dal menu a tendina sottostante selezionare

la voce “Tutti i file”, quindi cliccare sul pulsante “Salva”

● I successivi salvataggi del file *.html potranno essere

effettuati cliccando solo su “Salva” dal menu File.

8

Come salvare un file *.html

Cliccando sul menu a tendina, selezionare l'altra voce “Tutti i file”

Specificare,

oltre al nome

del file,

anche

l'estensione

.html

9

Primo esempio di pagina web

Esempio di pagina web

● Nel Blocco Note riportare il codice seguente:



La mia prima pagina



Ciao mondo!



● Salvare il file con nome (esempio1.html)

● Visualizzare il file esempio1.html nel browser.

10

Tag per la formattazione del testo
Tag di apertura Tag di chiusura Derivazione del

nome

Azione

B = bold (in inglese

significa grassetto)

La parola o frase

racchiusa tra e

viene

visualizzato in

grassetto

I = italic (in inglese

significa corsivo)

La parola o frase

racchiusa tra e

viene

visualizzato in

corsivo

U = underline (in

inglese significa

sottolineato)

La parola o frase

racchiusa tra e

viene

visualizzata con una

sottolineatura.

11

Tag per la formattazione del testo

● Nel Blocco Note riportare il codice seguente:



La mia prima pagina



Ciao mondo! Questa è una pagina di prova



● Salvare il file con nome (esempio2.html)

● Visualizzare il file esempio2.html nel browser

Domande da interrogazione

  1. Cos'è l'ipertext e come si relaziona con il linguaggio HTML?
  2. L'ipertext è un insieme di documenti collegati tra loro tramite link, e il linguaggio HTML è utilizzato per creare pagine web che possono contenere ipertesti e oggetti multimediali (come immagini e video).

  3. Qual è la struttura base di un file HTML?
  4. La struttura base di un file HTML è composta da tag di apertura e chiusura, suddivisi in un'intestazione e un corpo, dove nell'intestazione si indica il titolo della pagina e nel corpo si inseriscono contenuti visibili nel browser.

  5. Come si crea e si salva un file HTML utilizzando il Blocco Note?
  6. Per creare un file HTML con il Blocco Note, è necessario scrivere il codice e salvare il file cambiando l'estensione da *.txt a *.html, selezionando "Tutti i file" nel menu a tendina durante il salvataggio.

  7. Qual è la caratteristica di case sensitivity in HTML?
  8. HTML è case-unsensitive, il che significa che non importa se i tag sono scritti in maiuscolo o minuscolo; entrambi i formati sono accettati.

  9. Come si possono formattare i testi in una pagina web?
  10. I testi in una pagina web possono essere formattati utilizzando tag specifici come <b> per il grassetto, <i> per il corsivo e <u> per il sottolineato, che racchiudono il testo da formattare.

Domande e risposte

Hai bisogno di aiuto?
Chiedi alla community