Tag: Corso HTML

Corso PHP: 2. Installiamo Xampp

La necessità di poter disegnare il nostro sito usando strumenti dinamici lato server come e MySQL ci obbliga a costruire un ambiente di test sul nostro PC che possa funzionare esattamente come il server su cui andremo ad installare il nostro sito. Lo strumento che abbiamo scelto noi è Xampp un ambiente comprensivo di e MySQL di facilissima installazione e soprattutto open source. Altre possibilità sono WAMP and MAMP.

Servirà poi un editor di testo.

Dimenticarsi tutti gli editors come Word che introducono caratteri speciali ed utilizzare quindi un banale Notepad oppure editors specializzati come TopStyle, Eclipse PDT o NetBeans.

Ma vediamo innanzitutto come installare Xampp.
Per prima cosa occorre scaricarlo da sito http://www.apachefriends.org/it/xampp.html dove potrete scegliere la versione relativa al vostro sistema operativo.

Continua a leggere…

Il posizionamento dei blocchi con html e css

Torniamo sull’argomento del posizionamento dei blocchi <div> in una pagina html, perché è particolarmente sentito. Una volta un layout veniva disegnato facendo ricorso alle tabelle. Adesso con i css tutto è diventato estremamente più potente ed abbiamo strumenti prima assolutamente impensabili. Peccato che con le tabelle tutto fosse anche assolutamente semplice. Oggi, volete due blocchi con la stessa altezza ed allineati orizzontalmente e sotto di essi altri due con le stesse caratteristiche? Benvenuti all’inferno.

Ci è stato insegnato che i <div> sono elementi che per default si posizionano verticalmente così come i <p>, <ul> ecc. e quindi se vogliamo un immagine affiancata ad un altro blocco possiamo, per esempio, utilizzare la proprietà float: per posizionare l’immagine.

Quindi pensiamo di posizionare nella pagina un’immagine afiancata dalla sua descrizione e in una riga successiva un’altra immagine anch’essa affiancata dalla propria descrizione.

Come creare una mappa interattiva delle regioni italiane


Se in un sito web vi capita di dover far selezionare una regione italiana, potete risolvere il problema in diversi modi. Il più immediato sarà quello di usare una <select> con venti <option> con i nomi delle regioni italiane, ma un altro metodo piuttosto usato è quello di presentare una cartina dell’Italia, di quelle che vengono definite cartine mute, cioè col solo contorno dell’Italia e delle singole regioni. Al passare del mouse su una regione questa si colorerà e naturalmente attiverà un link.
Anche per questa soluzione non c’è ovviamente un metodo unico per risolvere il problema. Ce ne sono di diversa difficoltà, diversa efficacia ed anche di diverso grado di compatibilità con i vari browsers.

Qua vogliamo fornire una soluzione che abbina semplicità alla estrema compatibilità e, a parer nostro, anche di discreto impatto visivo.
Qua sotto vedete subito quello che sarà il risultato finale.

Val d'Aosta Piemonte Lombardia Trentino Veneto Friuli Liguria Emilia Toscana Marche Umbria Lazio Abruzzo Molise Campania Puglia Basilicata Calabria Sicilia Sardegna

Continua a leggere…

Uno script per calcolare il giorno della settimana

Uno dei problemi ricorrenti scrivendo siti web è la manipolazione delle date.

Oggi abbiam pensato di riportare uno script per il calcolo del giorno della settimana. Faremo un form per l’input della data scelta e lo script riporterà il giorno della settimana corrispondente.

Ovviamente i metodi per ottenere questo sono svariati a seconda del linguaggio scelto. Qui per il nostro esempio abbiamo scelto di risolvere il problemino con quanto ci mette a disposizione Javascript.

Il tutto è stato incluso in una pagina html autonoma che può essere scaricata qui.

Continua a leggere…

Lezione 40: Costruiamo un template (Conclusione)

Impariamo a costruire un sito Web

Lezione 40: Costruiamo un template (Conclusione)

Terminiamo la costruzione del nostro template di esempio descrivendo la seconda riga di contenuto ed il footer.

Nell apagina html, come abbiamo visto, il codice sarà:

<div class="ww_contenuto_row">
  <div class="ww_box_content_row">
    <div class="ww_contenuto_item-1" style="width:270px; margin:15px 10px 0 35px; float:left;">
      <ul>
        <li><a href="#">Le ultime notizie da Stintino</a></li>
        <li><a href="#">Il Meteo di Stintino</a></li>
        <li><a href="#">Numeri Utili per i turisti</a></li>
      </ul>
    </div>
    <div class="ww_contenuto_item-1" style="width:400px; margin:5px 5px 0 0"">
      <blockquote style="margin: 10px 0">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt condimentum dolor vel fringilla. Vestibulum eros tellus, laoreet nec malesuada a, luctus id velit. Sed at eros eget enim interdum cursus nec interdum ligula. Nunc sed interdum odio. Nulla accumsan, dolor quis fermentum mattis, metus sapien cursus dolor, quis varius felis lacus at metus. Suspendisse venenatis nunc eu dui fermentum luctus.
      </blockquote>
    </div>
  </div>
</div>

 
Continua a leggere…

Lezione 39: Costruiamo un template (Parte 9^)

Impariamo a costruire un sito Web

Lezione 39: Costruiamo un template (Parte 9^)

Per terminare la costruzione del nostro template di esempio manca la descrizione della parte del contenuto ed infine del footer.

Riprendiamo quello che avevamo definito nella lezione 37 come scheletro del corpo centrale del nostro template:

<div class="ww_corpo_wrapper">
    <div class="ww_corpo_row">
      <div class="ww_corpo_cell ww_sidebar1"> ... </div>
      <div class="ww_corpo_cell ww_contenuto"> ... </div>
    </div>
</div>

Continua a leggere…

Lezione 38: Costruiamo un template (Parte 8^)

Impariamo a costruire un sito Web

Lezione 38: Costruiamo un template (Parte 8^)

Per terminare la descrizione della nostra sidebar occorre vedere in dettaglio il contenuto dei blocchi che noi abbiamo inserito nel nostro esempio. Naturalmente si possono mettere quanti blocchi si vuole ed il contenuto andrà deciso in funzione del vostro web site.
Qualcuno per esempio vuole mettere il menu in verticale in un blocco della sidebar, oppure richiami ad altre pagine in evidenza ecc. Noi abbiamo inserito un blocco per il login/registrazione degli utenti ed un altro blocco per la ricerca su Google.
Continua a leggere…