Linguaggi per il WEB
Specifiche HTML5
Specifiche CSS
Linguaggi per il WEB
Specifiche HTML5
Specifiche CSS
Approfondiamo e verifichiamo la conoscenza della property position di CSS realizzando un modello di pagina personalizzato in base alle nostre preferenze di stile.
Colori e bordi sono inseriti solo per mostrare come i diversi contenitori occupino lo spazio in base ai valori delle propietà di stile loro assegnate. Negli eventuali modelli personalizzati che ognuno realizzerà secondo il proprio stile se ne potrà tranquillamente fare a meno.
Da questo punto in avanti il documento è diviso in due sezione di uguale ampiezza.
Le due sezioni possono essere essere utilizzate come caselle di testo affiancate in cui il testo scorre dall'alto in basso e poi da sinistra a destra. Oppure una delle due sezioni può essere utilizzata per commentare o spiegare i contenuti dell'altra.
Come esempio, utilizzo la sezione di sinistra per un testo scritto in italiano, e quella di destra per la sua traduzione in inglese ottenuta con Google Traduttore.
La lunghezza dei due testi sarà, molto probabilmente, diversa. Per mantenere le due sezioni nella stessa schermata potremmo assegnare ad esse una medesima altezza e dotarle di barre di scorrimento verticali.
Creare modelli, a fronte di uno sforzo iniziale, ci consentirà di risparmiare tempo, definire uno stile personale, standardizzare la qualità dei documenti, concentrarsi sul contenuto.
La proprieta di CSS che consente di applicare barre di scorrimento ad un contenitore è overflow. overflow è una scorciatoia per le proprietà overflow-x e overflow-y che consentono rispettivamente l'applicazione di una barra di scorrimento orizzontale e di una barra di scorrimento verticale.
As an example, I use the left section for a text written in Italian, and the right section for its English translation obtained with Google Translate.
The length of the two texts will most likely be different. To keep the two sections on the same screen we could assign them the same height and equip them with vertical scroll bars.
Creating templates, with an initial effort, allows us to save time, define a personal style, standardize the quality of documents, focus on the content.
The property of CSS that allows you to apply scroll bars to a container is overflow . overflow is a shortcut for le overflow-x and overflow-y properties that respectively allow the application of a horizontal scroll bar and a vertical scroll bar.
Nella sezione di sinistra riporto il codice HTML che fornisce la struttura al contenitore doppio oggetto di questo modello e il relativo codice CSS. Nella sezione di destra commento il codice a fronte.
<div class="doppia"> <h2>Intestazione della sezione</h2> <p>Abstract ......</p> <div class="sinistra"></div> <h3>Intestazione</h3> <p>Contenuto ....</p> </div> <div class="destra"></div> <h3>Intestazione</h3> <p>Contenuto ....</p> </div> </div>
.doppia{
clear:both;
padding-top:1em;
margin-top:1em;
background-color:lime;
border-style:solid;
border-width:1px;
height:90vh;
}
.doppia h2, h3{
text-align:center;
}
.doppia p{
padding-left:1em;
padding-right:1em;
text-indent:1em;
font-size:large;
}
.sinistra{
position:relative;
width:50%;
float:left;
overflow:auto;
background-color:aqua;
height:60vh;
}
.destra{
position:relative;
width:50%;
float:left;
overflow:auto;
background-color:teal;
height:60vh;
}
In realtà il codice HTML è piuttosto chiaro: definisce una struttura consistente in un contenitore, l'elemento div di class="doppia" con all'interno due altri contenitori di tipo div di classe rispettivamente sinistra e destra.
Gli elementi di intestazione h2 e h3 e gli elementi di tipo p li ho inseriti come esempio dei contenuti che nella pratica possono essere elementi di tipo qualsiasi.
Un po più interessante è il codice CSS.
I colori e i bordi sono stati assegnati ai diversi contenitori per evidenziarli. Per verificare la propria comprensione delle altre proprietà CSS, lasciando inalterati colori e bordi, si provi a modificarne i valori e a confrontare il risultato atteso con le proprie previsioni.
clear:both; interrompe le eventuali proprietà float assegnate ad oggetti precedentemente visualizzati. In questo caso non serve. Siete in grado di dire perchè in questo caso non serve? Se avete qualche dubbio provate ad eliminare le proprietà height dai contenitori .doppia, .sinistra e .destra e poi togliete la property clear.
Gli oggetti .sinistra e .destra hanno entrambi width:50%;. Siete in grado di prevedere cosa succederebbe aggiungendo ad uno qualsiasi di esso un bordo dello spessore di un solo pixel?
Scarica il file HTML_08.rar nella cartella CorsoHTML che avrai creato in precedenza.
Estrai la cartella HTML_08 e apri in Notepad++ i file HTML_08.html e i file .css.
Esegui gli esercizi proposti.
Se vuoi vedere il file dell'esempio prima di scaricarlo clicca qui.
Il lettore potrà ora fare altre prove ed eventualmente annotare propri appunti nella sezione dedicata.
Un ultima raccomandazione:durante gli esercizi tenere aperti di due strumenti di validazione del codice: W3C Markup Validation Service e W3C CSS Validation Service e verificare i file su cui si è lavorato dopo aver eseguito le modifiche. I browser sono molto tolleranti, e visulizzano bene le pagine anche in presenza di errori, ma gli errori è meglio evitarli.
Nelle specifiche ufficiali del w3 consortium puoi consultare:
Nel sito developer mozilla puoi consultare:
In questo sito gli argomenti della lezione sono stati trattati in: