Impara Creazione di un Sito Web Completo con HTML

Abbiamo ora affrontato i concetti fondamentali di HTML e siamo pronti a realizzare un sito portfolio one-page completo da zero.

Puoi provare a costruirlo autonomamente oppure seguire questa guida dettagliata con il codice per ogni sezione.

Guida Passo-Passo

1. Piano della Struttura del Sito

La nostra pagina portfolio includerà:

Header: titolo del sito e link di navigazione;
About: breve introduzione sul proprietario;
Portfolio: progetti con immagini, titoli e brevi descrizioni;
Contact: modulo per permettere ai visitatori di contattare;
Footer: copyright e link di contatto/social.

2. Strutturare il contenuto con HTML semantico

Crea un nuovo file index.html e aggiungi la struttura di base HTML con <!DOCTYPE html>, <html>, <head> e <body>.

index.html

3. Sezione Header

Aggiungi un <header> con il nome del proprietario e un <nav> contenente collegamenti che portano alle sezioni About, Portfolio e Contact.

index.html

4. Sezione About

Crea un <section id="about"> con un'intestazione e un breve paragrafo che descriva il proprietario.

index.html

5. Sezione Portfolio

Aggiungere una <section id="portfolio"> che elenca i progetti con immagini, titoli e brevi descrizioni.

index.html

6. Sezione Contatti

Creare una <section id="contact"> con un semplice modulo di contatto che raccoglie nome, email e messaggio.

index.html

7. Sezione Footer

Completa la pagina con un <footer> che includa il testo di copyright e collegamenti a social media, telefono ed email.

index.html

Bonus

Per rendere la pagina più gradevole visivamente, è possibile collegare un file CSS e stilizzare l'HTML. Il CSS gestisce colori, spaziature, font e layout, permettendo alla stessa struttura di apparire molto più rifinita.

Per ora, confrontare semplicemente l'aspetto della pagina con solo HTML e come cambia una volta applicati gli stili CSS di base.

index.html

index.css

Ecco il link al sito web completo realizzato in questo capitolo: Sito di Julia

Tutto è chiaro?

Grazie per i tuoi commenti!

Sezione 5. Capitolo 4

Chieda ad AI

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

Suggested prompts:

Can you show me the full HTML code for the portfolio website?

What are some tips for customizing the sections for my own portfolio?

How can I add more projects or sections to the website?

Scorri per mostrare il menu

Abbiamo ora affrontato i concetti fondamentali di HTML e siamo pronti a realizzare un sito portfolio one-page completo da zero.

Puoi provare a costruirlo autonomamente oppure seguire questa guida dettagliata con il codice per ogni sezione.

Guida Passo-Passo

1. Piano della Struttura del Sito

La nostra pagina portfolio includerà:

Header: titolo del sito e link di navigazione;
About: breve introduzione sul proprietario;
Portfolio: progetti con immagini, titoli e brevi descrizioni;
Contact: modulo per permettere ai visitatori di contattare;
Footer: copyright e link di contatto/social.

2. Strutturare il contenuto con HTML semantico

Crea un nuovo file index.html e aggiungi la struttura di base HTML con <!DOCTYPE html>, <html>, <head> e <body>.

index.html

3. Sezione Header

Aggiungi un <header> con il nome del proprietario e un <nav> contenente collegamenti che portano alle sezioni About, Portfolio e Contact.

index.html

4. Sezione About

Crea un <section id="about"> con un'intestazione e un breve paragrafo che descriva il proprietario.

index.html

5. Sezione Portfolio

Aggiungere una <section id="portfolio"> che elenca i progetti con immagini, titoli e brevi descrizioni.

index.html

6. Sezione Contatti

Creare una <section id="contact"> con un semplice modulo di contatto che raccoglie nome, email e messaggio.

index.html

7. Sezione Footer

Completa la pagina con un <footer> che includa il testo di copyright e collegamenti a social media, telefono ed email.

index.html

Bonus

Per ora, confrontare semplicemente l'aspetto della pagina con solo HTML e come cambia una volta applicati gli stili CSS di base.

index.html

index.css

Ecco il link al sito web completo realizzato in questo capitolo: Sito di Julia

Tutto è chiaro?

Grazie per i tuoi commenti!

Sezione 5. Capitolo 4