L’home page della sezione istituzione

Si hanno ha disposizione un testo di cinque capoversi da impaginare e alcuni dati statistici sull’azienda. E’ necessario impostare una sorta di barra di navigazione con i link all’home page e alla mappa del sito, oltre che a tutte le home page delle sezioni principali.

    Prima di tutto è necessario creare il file: nell’editor di testo prescelto creare un nuovo file e salvarlo come index.htm all’interno della directory istituzionale. Per visualizzare la pagina nel browser, si può può aprire il file in una finestra di Internet Explorer e tenerla aperta. Ogni volta che si apportano delle modifiche alla pagina, per visualizzare è sufficiente effettuare il refresh con l’apposito pulsante o premendo F5 sulla tastiera (ovviamente le modifiche saranno visibili solo nel momento in cui i file è salvato). Per prima cosa si imposta l’header della pagina:

     

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Acme Spa, occhiali da vista e da sole</title>
    <meta name="description" content="Acme Spa: produzioni di occhiali da sole e da vista per uomo, donna e bambino, talmente made in Italy." lang="it">
    <meta name="keywords" content="occhiali,occhiale,occhiali da vista, occhiali da sole,in italy,moda" lang="it">
    <meta name="description" Content="AcmeSpa:Optical frames and sunglasse for women, men and children, 100% made in Italy." lang="en">
    <meta name="keywords" content="frame,frames,optical frame,sunglasses,italian design,italian ffashion,fashion sunglasses" lang="en">
    </head>

    L’intestazione del file è stata creata sulla traccia dell’intestazione dell’index.htm, in cui già erano presenti i vari tag meta per le parole chiave,la descrizione, il title e le definizioni del documento.
    Ora si può passare al corpo della pagina. Con l’obiettivo di realizzare un sito sobrio, è bene mantenere uno sfondo di pagina bianca, con testo nero e link blu.

    <body bgcolor="#ffffff" text="#000000" link="#003399">
    </body>

    Per dare una coerenza al layout si può inserire un’intestazoone, contenente il nome dell’azienda, che nei prossimi capitoli sarà sostituita da alcuni elementi grafici.


    <body bgcolor="#ffffff" text="#000000" link="#003399">
    <!-- inizio intestazione -->
    <p>
    <font size="+3" face="Arial,sans-serif"><b>Acme Spa</b></font>
    <font face="Arial,sans-serif" color="#0000ff">Occhiali da vista e da sole</font>
    <hr noshade>
    </p>
    <!-- fine intestazione -->
    </body>

    Dovendo inserire i link principali all’interno della pagina, si può creare una sorta di barra orizzontale al di sotto dell’intestazione. Inserire i link nella parte alta della schermata è una scelta grafica che permette di avere subito a disposizione, ben visibili,gli strumenti di navigazione. Se la pagina è molto lunga è bene ripetere tali strumenti anche al fondo. Nella costruzione dei collegamenti è bene avere lo schema dell’albero dei file visto negli articoli precedenti


    <!-- barra di navigazione -->
    <p><hr noshade>
    <a href="../index.htm">home page</a> -
    <a href="../mappa.htm">mappa</a> -
    <b>presentazione istituzionale</b>
    <a href=".../catalogo/">catalogo vista / sole </a>
    <a hef="..,/istituzionale/contatto.htm>contattaci</a>
    <hr noshade></p>
    <!-- fine barra di navigazione -->

    In questo codice si possono notare due cose:

    • si è lasciata la scritta presentazione istituzionale senza link. Infatti, ci si trova esattamente in quella pagina: è un segnale di orientamento chiaro per l’utente;
    • i link alle home page delle sezioni principali possono essere creati inserendo il percorso completo del nome del file o soltanto l’indicazione della direcotory se il file è index.htm, è sufficiente indicare il nome della directory e automaticamente il server capirà dell’home page.
    A questo punto si può procedere direttamente a inserire il contenuto vero e proprio della pagina:
    • un titolo principale;
    • i titoli dei paragrafi;
    • il testo dei paragrafi;
    • eventuali link ad altre pagine.
    Sotto il titolo principale inseriamo dei link interni per raggiungere le varie parti.


    <!-- titolo principale -->
    <h1>Acme: i migliori occhiali sul mercato</h1>
    <!-- elenco link interni -->
    <ul>
    <li><a href="#par1">Il successo di un marchio</a></li>
    <li><a href="#par2">Un'azienda leader in una filiera in espansione</a></li>
    <li><a href="#par3">Ricerca tecnica all'avanguardia</a></li>
    <li><a href="#par4">Materiale tecnologicamente avanzati</a>
    <li><a href="#par5">Personale selezionato e specializzato</a></li>
    </ul>
    <!-- fine elenco link interni -->
    &nbsp:
    <!-- paragrafo 1 -->
     
    <a name="par1><h2>Il successo di un marchio</h2></a>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
    elit. Ut orci erat, viverra ac, pretium ut, placerat
    sed,nibh. Vestibulum abnte ipsum primis in faucibus
    viverra.</b> Vestibulum ante ipsum primis in faucibus
    orci luctus et ultrices <b> posuere cubilia</b> Curae;
    Vivamus turpis lectus, eleifend non, facilisis non <a href="storia/">
    adipiscing</a> at,dui. Integer risus eros, laoreet vel, vehicula sed,
    gravida a, nauris- Vivamus eusmod <i>erat vitaee odio</i>. In pharetra
    nisl sit amet ante. Maecenas rutrum enim non nunc. Donec Luctus fringilla
    <br>Vedi: <a href="storia/">La storia dell'azienda</a> </p>
     
    <!-- paragrafo 2 -->
     
    <a name="par2"><h2>Un'azienda leader in una filiera in espansione</h2></a>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
    elit. Ut orci erat, viverra ac, pretium ut, placerat sed,
    nibh. Vestibulum gravida elementum neque. Nunc viverra.
    <blockquote>Vestibulum ante ipsum primis in fancibus orci luctus
    et ultrices posuere cubilia Curae; Vivamus turpis lectus,
    eleifend non, facilisis non <a href="#par5>adipiscing</a> at,
    sed, gravida a, mauris. Vivamus eusmod <i>erat vitae odio</i>.
    In pharetra nisl sit amet ante.Maecenas rutrum enim non nunc.
    Donec luctus fringilla mauris. Fusce condimentum accumsan nibh.
    Donec congue.
    </p>
     
    <!-- paragrafo 3 -->
     
    <a name="par3><h2>Ricerca tecnica all'avanguardia </h2></a>
    <p>Lorem ipsum dolor sit amet, consectetuer adiscing
    elit. Ut orci erat, viverra ac, pretium ut, placerat sed,
    nibh. Vestibulum gravida elementum neque. Nunc viverra.
    <dl>
    <dt><b>Vestibulum ante</b></dt>
    <dd>ipsum primis in faucibus orci luctus et
    ultrices posuere cubilia Curae; Vivamus turpis
    lectus.</dd>
    <dt><b>Eleifend non</b></dt>
    <dd>facilisis non, adipiscing at, dui, Integer
    risus eros, laoreet vel, vehicula sed, gravida a, mauris.
    </dd></dl>
    Vivamus euismod erat vitae odio. In pharetra nisl sit
    amet ante. Maecenas rutrum enim non nuc. Donec luctus
    fringilla mauris. Fusce condimentum accumsan nibh. Donec congue.
    </p>
    &bsp;
    <!-- paragrafo 4 -->
    <a name="par4><h2> Materiali tecnologicamente avanzati</h2></a>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
    elit. Ut orci erat, viverra ac, pretium ut, placerat sed,
    nibh. Vestibulum gravida elementum neque. Nunc viverra.
    Vestibulum <i>ante ipsum primis in faucibus orci luctus </i>
    et ultrices posuere cubilia Curae; Vivamus turpis
    lectus, eleifend non, faclisis non, adipiscing at, dui.
    Integer risus eros, laoreet vel, vehicula sed, gravida a,
    mauris.
    <br><a href="../catalogo/">Il nostro catalogo prodotti</a>.
    </p>
     
    <!-- paragrafo 5 -->
     
    <a name="par5><h2>Personale selezionato e specializzato</h2></a>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
    elit. Ut orci erat, viverra ac, pretium utl, placerat sed,
    nibh. Vestibulum gravida elementum neque. Nunc viverra.
    </p>

    Ora può essere essere inserita la tabella dei dati statistici. A questo scopo si utlizza un testo preformattato:


    <!-- dati statistici -->
    <pre>
     
    <b>Anno</b> <b>Occhiali venduti</b><b>Fatturato lordo</b>
    2000 720.000 36 ml di euro
    2001 1.440.000 72 ml di euro
    2002 2.880.000 144 ml di euro
    2003 5.760.000 288 ml di euro
     
    </pre></code>

    la pagina si chiude ripetendo la barra di navigazione.

    Lascia un commento

    Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

    Logo WordPress.com

    Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

    Foto Twitter

    Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

    Foto di Facebook

    Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

    Google+ photo

    Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

    Connessione a %s...