Esercizio - Creare una pagina HTML

  • 5 minuti

In questo esercizio si inizia a creare la pagina Web per il curriculum. Si inizia aggiungendo alcune informazioni di alto livello, ad esempio il nome e le intestazioni delle sezioni. Si aggiungono anche alcuni commenti, che vengono usati come indicatori per aggiungere informazioni in un esercizio successivo.

Questo esercizio usa vscode.dev , una versione basata sul Web di Visual Studio Code e CodeSwing. Questi strumenti consentono di semplificare il processo di sviluppo. Non è necessaria alcuna installazione locale per completare gli esercizi che seguono.

Creare una pagina HTML con CodeSwing

Si inizia creando una cartella, configurando gli strumenti e creando uno "swing" usando CodeSwing in vscode.dev. Uno swing visualizza automaticamente i risultati del codice creato in vscode.dev. In questo modo è possibile apportare rapidamente modifiche e gli aggiornamenti vengono eseguiti in tempo reale.

Il video seguente illustra come installare CodeSwing in Visual Studio Code. Questi passaggi si trovano anche nei passaggi dell'esercizio.

  1. Creare una cartella sul desktop denominata resume.
  2. Aprire vscode.dev.
  3. Selezionare Apri cartella.
  4. Passare alla cartella resume creata in precedenza e selezionare Seleziona cartella.
  5. Quando viene richiesto di consentire la visualizzazione dei file del sito, selezionare Visualizza file.
  6. Selezionare il pulsante Estensioni .

    Schermata dell'icona delle Estensioni.

  7. Nella casella di testo Cerca estensioni nel Marketplace digitare CodeSwing.
  8. Selezionare Installa per installare CodeSwing.
  9. Aprire il riquadro comandi selezionando Ctl-Shift-P o Cmd-Shift-P in un Mac.
  10. Digitare CodeSwing nel riquadro comandi e selezionare CodeSwing: New Swing in Directory....
  11. Selezionare Seleziona cartella per usare la directory corrente, ovvero quella creata in un passaggio precedente.
  12. Selezionare Basic: Solo HTML.
  13. Quando viene richiesto di salvare le modifiche per riprendere , selezionare Salva modifiche.

Visual Studio Code crea due finestre affiancate. Il lato sinistro è l’editor, dove puoi inserire il tuo HTML. Quella a destra si comporta come un browser, che visualizza i risultati del codice HTML.

Aggiungere HTML per creare la struttura della pagina

Si aggiunge quindi il codice HTML per creare la struttura della pagina. Vengono creati i tre elementi principali di html, head e body. All'interno di body, si aggiunge una sezione che contiene informazioni generali sull'utente, ad esempio il nome e le informazioni relative ai social media. Si aggiungono quindi sezioni che elencano la formazione e l'esperienza acquisite.

Il video seguente illustra come creare codice HTML in Visual Studio Code e come eseguire il rendering del codice in CodeSwing. Questi passaggi si trovano anche nei passaggi dell'esercizio.

È possibile sostituire Il tuo nome con il tuo nome. In altri esercizi, si creano elenchi e collegamenti all'indirizzo di posta elettronica, agli handle dei social media, alla formazione e all'esperienza.

Dopo aver aggiunto il codice, esaminerai il codice aggiunto.

  1. All'interno diindex.htmlaggiungere il codice HTML seguente:
<html>
<head>
  <title>Your Name resume</title>
</head>
<body>
  <h1>My Name</h1>
  <!-- email address -->
  <h2>Social Media</h2>
  <!-- social media -->
  <h2>Education</h2>
  <!-- education -->
  <h2>Experience</h2>
  <!-- experience -->
</body>
</html>

Ognuno degli elementi nel codice HTML esegue operazioni specifiche. La tabella seguente descrive i tag usati nel codice HTML e il modo in cui il browser li riconosce.

Tag Descrizione
<html> Tag "contenitore" per l'intero documento HTML. Tutti gli altri tag vengono scritti all'interno dell'elemento HTML.
<head> Contenitore dell’intestazione. L'intestazione include in genere riferimenti ad altri file necessari alla pagina o al sito. Può anche includere dati che motori di ricerca e siti di social media utilizzano per trovare meglio il tuo sito Web.
<body> Questo tag crea il contenitore del corpo della pagina Web. La maggior parte degli elementi di visualizzazione viene inserita nell'elemento body.
<div> Il tag divisione crea una sezione in HTML. Le sezioni in genere hanno contenuto o contenuto simile correlato l'uno all'altro.
<h1> - <h6> Questi sono i tag di intestazione. Forniscono una struttura al documento HTML. Indicano al browser di formattare il testo tra di essi in modo specifico per mostrare la gerarchia.
<!-- comment text --> Questi tag sono commenti in HTML. Non creano output renderizzato. Vengono usati dagli sviluppatori per semplificare la ricerca, la condivisione e la comprensione del codice.
/* CSS comment */ I tag di commento vengono usati nei fogli di stile CSS.
  1. Durante la digitazione, la pagina viene aggiornata automaticamente; il risultato finale sarà simile alla seguente immagine:

Screenshot della struttura del curriculum.

Revisione del codice

Ogni pagina HTML ha html come elemento principale radice, con tutto il contenuto contenuto al suo interno. html in genere ha due elementi figlio diretti, head che contiene metadati e body che contiene le informazioni da visualizzare.

Nota come si usa un solo h1 elemento per il nome e gli h2 elementi per le intestazioni di ciascuna delle sezioni. Ciò consente di evidenziare le parti più importanti della pagina. Il tuo nome è l'informazione più importante sulla pagina; per questo riceve la massima priorità con h1.

Infine, ci sono commenti per l'indirizzo di posta elettronica, i social media, l'istruzione e l'esperienza. Vengono usati come segnaposto e vengono sostituiti in un esercizio successivo di questo modulo.