Informatica

Fondamenti di Sviluppo Web

HTML

Informatica1942Aggiornato 26 set 202610 pagine

Introduzione ad HTML: Guida Completa con Esempi

Segnala

Elisa@nxctis

Aggiungi alle fonti Google

Vuoi creare le tue prime pagine web ma non sai da dove iniziare? L'HTML è il linguaggio base che rende possibile ogni sito che vedi online. È più semplice di quanto pensi: non è un linguaggio di programmazione complesso, ma un sistema di "etichette" che dice al browser come mostrare i contenuti.

Iscriviti per mostrare il contenuto.
È gratis!

Iscrivendosi si accettano i Termini di servizio e la Informativa sulla privacy.

Le basi dell'HTML

Ogni pagina web che visiti è scritta in HTML (HyperText Markup Language). Non farti spaventare dal nome tecnico: è semplicemente un modo per dire al browser "mostra questo testo in grassetto" o "crea un collegamento qui".

L'HTML funziona con dei tag racchiusi tra parentesi angolari. Ogni tag ha un inizio e una fine, tipo <p>Questo è un paragrafo</p>. Il testo tra i tag viene modificato secondo le istruzioni che dai.

Per creare una pagina HTML ti basta un editor di testo come il Blocco Note! Scrivi il codice, salva il file con estensione .html e aprilo con qualsiasi browser. È davvero così semplice.

Ricorda: Ogni documento HTML deve iniziare con <!DOCTYPE html> e avere la struttura base con i tag <html>, <head> e <body>.

Iscriviti per mostrare il contenuto.
È gratis!

Iscrivendosi si accettano i Termini di servizio e la Informativa sulla privacy.

Struttura e annidamento degli elementi

Un documento HTML ha una struttura precisa che devi rispettare. La sezione <head> contiene informazioni nascoste come il titolo della pagina, mentre <body> contiene tutto quello che gli utenti vedranno.

Gli elementi HTML possono essere annidati, cioè un tag può contenerne altri. È come le scatole cinesi: puoi mettere un paragrafo dentro una sezione, e del testo in grassetto dentro il paragrafo.

Gli attributi forniscono informazioni extra agli elementi. Si scrivono sempre nel tag di apertura con la sintassi nomeAttributo="valore". Le intestazioni vanno da <h1> (più importante) a <h6> (meno importante).

Trucco: L'HTML ignora spazi e a capo che fai con la tastiera. Per andare a capo usa <br/>, per aggiungere spazi usa  .

Iscriviti per mostrare il contenuto.
È gratis!

Iscrivendosi si accettano i Termini di servizio e la Informativa sulla privacy.

I tag HTML essenziali

Ecco i tag HTML che userai più spesso e che devi assolutamente conoscere. <p> crea paragrafi, <b> rende il testo grassetto, <i> lo mette in corsivo.

Per le liste usa <ul> per elenchi puntati e <ol> per quelli numerati, sempre con <li> per ogni elemento. Le immagini si inseriscono con <img src="nome.jpg">.

I collegamenti si creano con <a href="pagina.html">testo del link</a>. Per le tabelle hai bisogno di <table>, <tr> per le righe e <td> per le celle.

Consiglio: Non cercare di memorizzare tutti i tag subito. Inizia con paragrafi, intestazioni e link, poi aggiungi il resto man mano che ti servono.

Iscriviti per mostrare il contenuto.
È gratis!

Iscrivendosi si accettano i Termini di servizio e la Informativa sulla privacy.

Creare e stilizzare la tua prima pagina

Aprire il Blocco Note, digitare il codice HTML base e salvare con estensione .html - ecco fatto, hai creato la tua prima pagina web! Un doppio click sull'icona e si aprirà nel browser.

L'attributo style ti permette di cambiare l'aspetto degli elementi. Puoi modificare colori, font, dimensioni e allineamento direttamente nel tag HTML usando la sintassi style="proprietà:valore".

Le proprietà di stile più utili sono color per il colore del testo, background-color per lo sfondo, font-family per il tipo di carattere e text-align per l'allineamento.

Esempio pratico: <body style="background-color:yellow; color:blue"> ti darà uno sfondo giallo con testo blu.

Iscriviti per mostrare il contenuto.
È gratis!

Iscrivendosi si accettano i Termini di servizio e la Informativa sulla privacy.

Immagini e link dinamici

Le immagini HTML si inseriscono con il tag <img> che non ha tag di chiusura. L'attributo src indica dove si trova l'immagine, mentre width e height ne controllano le dimensioni.

Puoi usare immagini dalla tua cartella, da sottocartelle o anche da altri siti web. Se il browser non trova l'immagine, mostrerà un'icona rotta.

I link ipertestuali sono il cuore del web! Il tag <a href="destinazione">testo cliccabile</a> può portare a pagine locali, siti esterni o punti specifici della stessa pagina.

Trucco avanzato: Puoi usare un'immagine come link mettendo il tag <img> dentro il tag <a>. Perfetto per creare pulsanti grafici!

Iscriviti per mostrare il contenuto.
È gratis!

Iscrivendosi si accettano i Termini di servizio e la Informativa sulla privacy.

Link avanzati e liste strutturate

I colori dei link cambiano automaticamente: blu per quelli non visitati, viola per quelli già cliccati, rosso quando sono attivi. Puoi personalizzare questi colori con gli stili CSS per adattarli al design della tua pagina.

Le liste HTML sono perfette per organizzare informazioni. <ul> crea elenchi puntati, <ol> elenchi numerati. Puoi anche annidare le liste mettendo una lista dentro un elemento <li> di un'altra lista.

Combinare liste ordinate e non ordinate ti permette di creare strutture complesse e ben organizzate, ideali per menu di navigazione o indici dei contenuti.

Suggerimento: Le liste annidate sono ottime per creare menu a cascata o strutture gerarchiche di informazioni.

Iscriviti per mostrare il contenuto.
È gratis!

Iscrivendosi si accettano i Termini di servizio e la Informativa sulla privacy.

Tabelle HTML per organizzare i dati

Le tabelle HTML sono essenziali quando devi presentare dati in righe e colonne. La struttura base prevede <table> per la tabella, <tr> per le righe, <th> per le intestazioni e <td> per le celle normali.

L'attributo border="1" aggiunge i bordi visibili alla tabella. Senza questo attributo, la tabella sarà invisibile ma manterrà la sua struttura di organizzazione dei contenuti.

Puoi formattare le tabelle con diversi attributi per controllare larghezza, spaziatura e allineamento. Ogni riga e ogni cella può avere i propri stili personalizzati.

Nota importante: Le tabelle moderne si usano principalmente per dati tabulari, non per il layout delle pagine (per quello si usa CSS).

Iscriviti per mostrare il contenuto.
È gratis!

Iscrivendosi si accettano i Termini di servizio e la Informativa sulla privacy.

Form HTML per raccogliere dati

I form HTML sono moduli che permettono agli utenti di inserire e inviare informazioni. Il tag <form> racchiude tutti gli elementi di input come caselle di testo, pulsanti e menu di selezione.

Gli elementi principali sono <input> (che cambia comportamento secondo l'attributo type), <label> per le etichette, <select> per i menu a tendina e <textarea> per testi lunghi.

Un form base include campi di testo per nome, cognome ed email, più un pulsante di invio creato con <input type="submit">. Le etichette <label> rendono il form più accessibile e professionale.

Consiglio pratico: Usa sempre le etichette <label> associate ai tuoi campi di input per migliorare l'usabilità del form.

Iscriviti per mostrare il contenuto.
È gratis!

Iscrivendosi si accettano i Termini di servizio e la Informativa sulla privacy.

Introduzione ai CSS - Stili interni

CSS (Cascading Style Sheets) trasforma le tue pagine HTML da semplici documenti di testo in siti web attraenti. Ci sono tre modi per applicare gli stili: inline, interni ed esterni.

Lo stile interno si definisce nella sezione <head> con il tag <style>. Qui scrivi regole che si applicano a tutti gli elementi di quel tipo nella pagina, usando la sintassi elemento {proprietà:valore}.

Gli stili interni sono perfetti quando vuoi uno stile specifico per una singola pagina. Puoi definire colori, font e dimensioni per intestazioni, paragrafi e qualsiasi altro elemento HTML.

Vantaggio: Con un solo stile interno puoi modificare l'aspetto di tutti i paragrafi o tutte le intestazioni della pagina contemporaneamente.

Iscriviti per mostrare il contenuto.
È gratis!

Iscrivendosi si accettano i Termini di servizio e la Informativa sulla privacy.

CSS esterni per progetti professionali

I fogli di stile esterni sono la soluzione professionale per progetti con più pagine. Crei un file .css separato e lo colleghi alle tue pagine HTML con il tag <link> nella sezione <head>.

Questo approccio separa completamente il contenuto dalla presentazione. Cambiando il file CSS puoi modificare l'aspetto di tutte le pagine del sito istantaneamente, senza toccare il codice HTML.

Gli stili esterni rendono il codice più pulito, facilitano la manutenzione e permettono di riutilizzare gli stessi stili su più pagine. È il metodo che usano tutti i siti web professionali.

Best practice: Usa sempre fogli di stile esterni per progetti con più di una pagina - ti farà risparmiare ore di lavoro!

Pensavamo che non l'avreste mai chiesto....

Il nostro assistente AI è costruito specificamente per le esigenze degli studenti. Sulla base dei milioni di contenuti presenti sulla piattaforma, possiamo fornire agli studenti risposte davvero significative e pertinenti. Ma non si tratta solo di risposte, l'assistente è in grado di guidare gli studenti attraverso le loro sfide quotidiane di studio, con piani di studio personalizzati, quiz o contenuti nella chat e una personalizzazione al 100% basata sulle competenze e sugli sviluppi degli studenti.

È possibile scaricare l'applicazione dal Google Play Store e dall'Apple App Store.

Sì, hai accesso completamente gratuito a tutti i contenuti nell'app e puoi chattare o seguire i Creatori in qualsiasi momento. Sbloccherai nuove funzioni crescendo il tuo numero di follower. Inoltre, offriamo Knowunity Premium, che consente di studiare senza alcun limite!!

Introduzione ad HTML: Guida Completa con Esempi

Le basi dell'HTML

Struttura e annidamento degli elementi

I tag HTML essenziali

Creare e stilizzare la tua prima pagina

Immagini e link dinamici

Link avanzati e liste strutturate

Tabelle HTML per organizzare i dati

Form HTML per raccogliere dati

Introduzione ai CSS - Stili interni

CSS esterni per progetti professionali

Pensavamo che non l'avreste mai chiesto....

Che cos'è l'assistente AI di Knowunity?

Dove posso scaricare l'applicazione Knowunity?

Knowunity è davvero gratuita?

Contenuti simili

HTML

HTML

Algebra Booleana - operatori logici

Diagrammi di flusso

I Database

sistemi e reti

Contenuti più popolari: HTML

HTML

Contenuti più popolari: Informatica

Segnali integrativi

PATENTE AM

I prodotti notevoli

Linguaggio C

il romanico

Cos'è L'informatica, software e hardware ~ riassunto

La struttura del Computer

Informatica 1

Hardware e software

Contenuti più popolari

Teoria patente di guida B: Segnali stradali

Riassunto patente B

Patente

appunti patente

Patente B

Prima parte programma biologia test professioni sanitarie

Tutta la patente B

MANUALE PATENTE A & B SCHEMATICO

Programma chimica test professioni sanitarie

Recensioni dei nostri utenti. Ci adorano - e anche tu, vedrai .