Esercizio 1: Introduzione

Keywords: HTML, headers, paragraphs, lists, text decoration

Ultimo Esercizio Esercizio successivo

Per fare pratica con HTML possiamo usare varie risorse online, ad esempio Codepen, W3School etc. Useremo spesso Codepen per fare pratica con CSS, dato che fornisce un ambiente molto comodo sia per testare che per trarre ispirazione dai lavori altrui.

Per lavorare in locale, VSCode, Notepad++ e Atom sono buone ottime opzioni. Per macOS KomodoEdit o Atom. Usate quella che preferite. Per l'esame, userete in ogni caso Notepad++.

Come documentazione per HTML fate principalmente affidamento a MDN. Potrete consultarla anche durante l'esame scritto, ma è bene fare pratica sin da principio.

Ripassiamo insieme:

Vedremo insieme gli elementi di HTML più comuni, principalmente utilizzati per dare una struttura a contenuti testuali. Sono elementi tipografici: con questi possiamo rendere sul web titoli, paragrafi, liste per suddividere un documento. Oltre gli elementi di layout, abbiamo degli elementi che possono dare uno stile diverso al testo.

Alcuni elementi di layout

  • L'elemento <h*> rappresenta un'intestazione di livello * (da 1 a 6).
  • L'elemento <p> rappresenta un paragrafo di testo.
  • L'elemento <a> rappresenta un collegamento ipertestuale. L'attributo href specifica l'URL di destinazione.
  • L'elemento <ul> rappresenta una lista non ordinata (bullet point), ovvero una lista di elementi che non hanno un ordine specifico.
  • L'elemento <ol> rappresenta una lista ordinata, ovvero una lista di elementi che hanno un ordine specifico (.1, .2, .3...).
  • Ogni elemento delle liste è rappresentato dall'elemento <li>.

Alcuni elementi di stile

  • Elemento <strong> (semantico) oppure <b> (grafico)
  • Elemento <em> (semantico) oppure <i> (grafico)
  • Elemento <u>
  • Elemento <s>

Esercizio di oggi

Riproduciamo insieme il testo che vediamo qui sotto. Vedremo insieme la soluzione tra 10 minuti.



© Andrea Schimmenti & Fabio Vitali. TW 2022-2023.