HTML e CSS Terza Lezione
- 1. Se abbiamo la necessità di realizzare un elenco possiamo usare due tipi di TAG i quali determinano: gli elenchi ordinati gli elenchi non ordinati.
- 2. Gli elenchi ordinati sono contraddistinti dall’enumerazione degli elementi che compongono la lista ossia una serie progressiva ordinata e individuata da lettere o numeri. Il TAG per aprire l’elenco è: <ol> (“ordered list”) mentre quello per determinare gli elementi (“list item”) è: <li> Esempio: HTML Effetto <ol> 1. primo elemento <li>primo elemento</li> 2. secondo elemento <li>secondo elemento</li> 3. terzo elemento <li>terzo elemento</li> </ol>
- 3. Lo stile di enumerazione visualizzata di default dal browser è quello numerica, ma è possibile indicare uno stile differente specificandolo per mezzo dell’attributo type: Valori Stile di Numerazione type = 1 Numeri arabi 1. Primo elemento (default) 2. Secondo type = “a” Alfabeto a. Primo elemento minuscolo b. Secondo elemento type = “A” Alfabeto A. Primo elemento maiuscolo B. Secondo elemento type = “i” Numeri romani i. Primo elemento minuscolo ii. secondo elemento type = “I” Numeri romani I. Primo elemento maiuscolo II. Secondo elemento
- 4. Il TAG da utilizzare per aprire un elenco non ordinato (elenchi puntati) è: <ul> (“unordered list”) e gli elementi sono individuati dal TAG: <li> Esempio: HTML Effetto <ul> • primo elemento <li>primo elemento</li> • secondo elemento <li>secondo elemento</li> • terzo elemento <li>terzo elemento</li> </ul>
- 5. Il tipo di simbolo grafico visualizzato di default dal browser è un “pallino pieno”, ma è possibile indicare uno stile differente specificandolo per mezzo dell’attributo type: Valori Stile di Numerazione type =“disc” Pallino Pieno • Primo elemento (default) • Secondo elemento type = “circle” Cerchio vuoto o Primo elemento o Secondo elemento type = “square” Quadrato Pieno Primo elemento Secondo elemento
- 6. I link sono dei ponti che consentono di passare da un testo all’altro e sono formati da due componenti: Contenuto È la parte visibile del link che nasconde il collegamento sia che si tratti di immagine che di testo Risorsa È l’oggetto verso cui il collegamento punta che potrebbe essere un’altra pagina (sullo stesso server o su un server diverso), oppure un collegamento interno a un punto della pagina stessa
- 7. Il TAG che definisce un link è il seguente: <a>…</a> Il TAG che definisce un link deve essere ovviamente dotato dell’attributo che si riferisce alla risorsa a cui esso è collegato. L’attributo che gli assegniamo è il seguente: href=“nomerisorsa” Dove quindi nomerisorsa indica la destinazione del link. Esempio: <a href=“nomerisorsa”>collegamento…</a> Collegamento… indica la parte di testo che compare sottolineata e di colore blu per rappresentare un link. Ovviamente il colore del link può essere cambiato con alcuni attributi.
- 8. Collegamento ad una pagina interna del sito: <a href=“prova.html”>Clicca Qui</a> In questo caso cliccando sul testo Clicca Qui verremo spostati sulla pagina “prova.html” del nostro sito web. Collegamento ad una pagina esterna del sito: <a href=“http://html.it”> Clicca Qui </a> In questo caso cliccando sul testo Clicca Qui verremo reindirizzati al sito web “html.it”.
- 9. Creare due pagine HTML con tutti i TAG che conosci e con i rispettivi nomi: “index.html” “info.html” Collega le due pagine con i rispettivi TAG che si chiameranno: Home Info Nella “index” parlerai della tua pagina e perché l’hai creata mentre nella info parlerai di te, del tuo corpo e della tua vita.