Lezione 5 - HTML 5 - Blog di informaticaopensource

L’argomento della lezione sono i tag per gli elenchi puntati e numerati, il tag <div>, il tag <span> e i tag per la scrittura di codice e per i pedici e gli apici, con quale introduzione agli stili.
I tag per l’elenco non ordinato possono essere strutturati nel seguente modo all’interno di un documento HTMLL:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>…..</li>
<li>Item N</li>
<ul>

Il tag <li> rappresenta un elemento e il tag <ul> con la sua chiusura indica l’inizio di un elenco non ordinato.
In html è:

Item 1
Item 2
…..
Item N

Per un elenco ordinato è presente il tag <ol> con la relativa chiusura pertanto un esempio di elenco ordinato è:

la cui visualizzazione html è:

Item 1
Item 2
…..
Item N

La numerazione è definita da alcuni attributi del tag <ol> così come la forma del punto elenco è suscettibile di variazioni con l’attributo list-style=”valore” che permette di scegliere fra vari valori ad esempio “square” è il quadratino. Applichiamo questo stile di punto elenco al primo esempio:

Item 1
Item 2
…..
Item N

L’elenco ordinato ha poi altri attributi come “start” che indica da quale valore partire la numerazione o ordinamento (nel caso in cui sono scelte le lettere dell’alfabeto).
Un esempio di elenco ordinato è:

l’anteprima in HTML è:

Item 1
Item 2
….
item N<

come è possibile notare l’elenco parte dal numero 3.
Esiste anche la possibilità di definire per un elenco non ordinato un’immagine personalizzata come punto elenco mediante l’attributi list-style-image: url(sorgente) ove il valore sorgente rappresenta l’url di un’immagine in formato png, jpeg, gif o webp.

Il tag <div>

il tag <div> permette di creare dei riquadri che possono essere posizionati nel documento html.
Ad esempio è possibile creare una pagina web con 4 immagini e in quattro riquadri ove poi aggiungere del testo.
il tag <div> è personalizzabile con gli attributi di stile ad esempio immaginiamo di voler creare una pagina di 4 riquadri distinti con ciascuno dei quali ha poi un’immagine e un testo.
La struttura di questa pagina potrebbe essere:

        <main>
        <body bgcolor="red"></body>
        <div>
        <h2>Internet e Le Reti
        </h2>
             <p>
            <center><img src="/img/lezione_5_html5/img/rete1.png" width="25%" height="25%" alt="Rete"></center><br>
             Insieme di nodi che sono collegati mediante un mezzo di trasmissione per:<br>
             Condividere informazioni e Condividere risorse hardware e software<br>
             Velocizzare la comunicazione <br>

            </p>
        </div>        
        <div>
            <h3>Mezzi di trasmissione</h3>
            <p>
                Doppino telefonico<br>
                Utilizzato per le reti telefoniche e per le comunicazioni
                dati a bassa velocità<br>
                
                    <img src="/img/lezione_5_html5/img/doppino.png" width="25%" height="25%" alt="Doppiono">
                </p>
        </div>
        <div>
                <h3>  Cavo coassiale</h3>
                <p>
                    Cavo per la trasmissione dati su reti geografiche o metropolitane<br>
                    <img src="/img/lezione_5_html5/img/cavocoassiale.png" width="25%" height="25%" alt="Cavo Coassiale">
                </p>
        </div>
         <div>
               <h3>Cavo UTP/FTP/STP</h3>
               <p></p>
               Cavo a 4 coppie utilizzato per le reti LAN con connessione Ethernet<bR>
                    <img src="/img/lezione_5_html5/img/cavorame.png" width="25%" height="25%" alt="Doppini di rame">
               </p>

       </div>
       <div>
                <h3>Fibra Ottica</h3>
                <p>
                Etere (Onde Radio ad alta frequenza tecnologie GSM/GPRS/UMTS,<bR>
                     satellite, Wi-fi, Wimax)
                </p>
            </div>
        </body>
    </main>

Anteprima

Il risultato è disponibile a questo link

Fine Anteprima

La pagina è costituita da blocchi <div> uno sotto l’altro indipendenti all’iterno del quale è presente un paragrafo <p> e un immagine.
Introduciamo degli stili CSS all’interno della pagina nella sezione <head> come segue:

  <style>
            div{
                display: block;
                align-content: center;
                float:left;
                margin: 0.3em;
                background-color: aqua;
                width: 40%;
                height:300px;
                border-radius:10%;
                border-style: double;
                border-color: green;
                border-width: 0.1em;
            }
        </style>

Questo stile definisce un’altezza fissa e una larghezza in percentuale del blocco div così come un bordo con riquadro arrotondato “border-radius:10%; ” con colore di bordo verde e tipo bordo doppio. Inoltre il riquadro mediante l’attributo display è visualizzato come un blocco mentre mediante l’attributo “float” lo scorrimento dei blocchi avviene in orizzontale a partire dall’angolo superiore sinistra ovvero il flusso dei blocchi è impaginato in orizzontale da sinistra attraverso un riempimento della pagina prima in orizzontola. E’ stato definito anche un margine in unità relative.
L’effetto applicato alla nostra pagina web

Per la pagina completa in anteprima qui