Code-along: creare una semplice pagina web
Segua le istruzioni passo passo per creare una pagina divertente
Code-along: creare una semplice pagina web è una lezione HTML for Kids gratuita su CoddyKit. Questa è la lezione 1 di 2. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML for Kids, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML for Kids include 2 lezioni in totale.
Creazione della prima pagina web
Programmazione guidata: crei una semplice pagina web
Benvenuto nel suo primo progetto di programmazione! In questa lezione creeremo passo dopo passo una semplice pagina web. Segua l’esempio per vedere come HTML, CSS e gli elementi di base del design si combinano.
Obiettivo: Creare una pagina del profilo personale.
Configurazione del file
Passaggio 1: configurazione del file
Per prima cosa, crei una cartella per il progetto e aggiunga un file HTML:
- Crei una nuova cartella sul computer chiamata MyWebPage.
- All’interno della cartella, crei un file denominato
index.html. - Apra il file nell’editor di codice (ad esempio, Visual Studio Code).
Suggerimento: Il nome del file index.html viene comunemente usato per la pagina principale di un sito web.
Aggiunta della struttura di base
Passaggio 2: aggiunta della struttura di base
Ora aggiunga al file la struttura HTML di base. Include i tag <!DOCTYPE html>, <html>, <head> e <body>.
Esempio:
<!DOCTYPE html>
<html>
<head>
<title>My Profile Page</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is my personal profile page.</p>
</body>
</html>
Aggiunta della sezione del profilo
Passaggio 3: aggiunta della sezione del profilo
Aggiungiamo una sezione per visualizzare il nome e una breve descrizione.
Esempio:
<body>
<h1>Welcome to My Page</h1>
<p>This is my personal profile page.</p>
<!-- Profile Section -->
<h2>About Me</h2>
<p>Hi, I’m [Your Name]. I’m learning web development, and this is my first project!</p>
</body>
Aggiunta di un’immagine
Passaggio 4: aggiunta di un’immagine
Ora aggiungiamo una foto del profilo utilizzando il tag <img>. Salvi un’immagine nella cartella del progetto e la colleghi al file HTML.
Esempio:
<!-- Profile Picture -->
<img src="profile.jpg" alt="My Profile Picture" width="200" />
Aggiunta di un elenco di hobby
Passaggio 5: aggiunta di un elenco di hobby
Crei un elenco non ordinato dei suoi hobby utilizzando i tag <ul> e <li>.
Esempio:
<!-- Hobbies Section -->
<h2>My Hobbies</h2>
<ul>
<li>Reading books</li>
<li>Playing video games</li>
<li>Coding projects</li>
</ul>
Aggiunta di un collegamento
Passaggio 6: aggiunta di un collegamento
Aggiunga un collegamento al suo sito web preferito utilizzando il tag <a>.
Esempio:
<!-- Favorite Website -->
<h2>My Favorite Website</h2>
<p>Check out my favorite website: <a href="https://example.com" target="_blank">Example</a>.</p>
Aggiunta di stili inline
Passaggio 7: aggiunta di stili inline
Aggiungiamo alcuni stili di base direttamente nell’HTML utilizzando l’attributo style.
Esempio:
<h1 style="color: blue; text-align: center;">Welcome to My Page</h1>
<p style="font-size: 16px; color: gray;">This is my personal profile page.</p>
Ripasso del progetto della pagina web
Ottimo lavoro!
Congratulazioni! Ha creato la sua prima pagina web passo dopo passo. In questo progetto ha imparato a strutturare l’HTML, aggiungere contenuti e applicare stili inline. Continui a sperimentare e ad aggiungere nuove sezioni alla pagina!
Suggerimento: Provi a pubblicare la pagina su GitHub Pages per condividerla con gli amici!
Domande Frequenti
La lezione «Code-along: creare una semplice pagina web» è gratuita?
Sì — il testo completo di «Code-along: creare una semplice pagina web» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML for Kids, passa a CoddyKit PRO. Il corso HTML for Kids include 2 lezioni in totale.
Cosa imparerò in «Code-along: creare una semplice pagina web»?
Segua le istruzioni passo passo per creare una pagina divertente Eserciti HTML for Kids con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare HTML for Kids?
Non è richiesta alcuna esperienza precedente. HTML for Kids su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 2.
Quanto tempo richiede la lezione «Code-along: creare una semplice pagina web»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione HTML for Kids?
Sì. Ogni lezione HTML for Kids include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Code-along: creare una semplice pagina web
- Caccia al tesoro HTML