3E e 3I SIA: spiegazione della pagina Index.html e del file style.css dell'esercizio Responsive assegnato alle classi
1. <!doctype html>: Questo è l'inizio del documento HTML. Dice al browser che il documento è scritto in HTML5, la versione più recente di HTML.
2. <head>: Qui inseriamo le informazioni che non sono visibili direttamente nella pagina ma sono importanti per il funzionamento e l'ottimizzazione del sito.
- <meta charset="UTF-8">: Questa riga imposta il set di caratteri del documento su UTF-8, un tipo comune che supporta la maggior parte dei caratteri delle lingue del mondo.
- <meta http-equiv="Content-type"…>: Assicura che il contenuto del documento è di tipo HTML e specifica di nuovo l'uso del charset UTF-8, una forma ridondante ma può prevenire errori.
- <title>Home - Sito responsive della 3E Sia </title>: Questo è il titolo della pagina. Appare nella scheda del browser.
- <meta name="viewport"…>: Fondamentale per il design responsive. Fa sì che il sito si adatti bene alle dimensioni dello schermo del dispositivo (es. smartphone, tablet).
- <link href="css/style.css" rel="stylesheet" />: Collega un file CSS esterno chiamato "style.css" per dare stile alla pagina.
- <script src="js/jquery-1.7.1.min.js"></script>: Importa la libreria jQuery, che aiuta a semplificare la scrittura di JavaScript.
3. Stile e Script Inline
- <style type="text/css">...</style>: Inserisce uno stile specifico; in questo caso, specifica che qualsiasi testo con la classe `auto-style1` sarà colorato di giallo.
- <script>...</script>: Questo script in jQuery rende cliccabile il "menu" navigazione. Quando clicchi sull'icona del menu (3 barre orizzontali), il menu appare o scompare.
Corpo del Documento (`<body>`)
4. <div id="container">: Questa è la cornice principale che contiene tutto il contenuto visibile del sito.
5. Header (`<div id="header">`):
- Contiene il titolo del sito e l'icona del menu per i dispositivi mobili. Il titolo ha parole colorate di giallo create usando gli stili definiti prima.
6. Menu (`<div id="menu">`):
- Una lista di link alle diverse sezioni del sito: Home, Novità, Chi Siamo, Cosa Facciamo, Contatti. I link sono colorati di blu.
7. Main Content (`<div id="main">`)
- <div id="pagina">Home</div>: Indica che ci troviamo nella sezione Home.
- Colonna Sinistra (`<div id="colonna-sx">`):
- Contiene un saluto, un'immagine di benvenuto e una descrizione dell'azienda "Web3SIA" con le sue competenze. Sono elencati vari servizi come siti responsive e grafica.
- Due sezioni di "Articolo" con testo di esempio in latino (per simulare contenuto reale).
- Colonna Destra (`<div id="colonna-dx">`):
- Immagini con link: due esempi di immagini collegate a pagine 'x' e 'y'.
- Un box con un testo di esempio e una lista di link preferiti.
8. Footer (`<div id="footer">`):
- Un messaggio che invita l'utente a ridimensionare la finestra per vedere il design responsive in azione. Include dettagli sull'anno scolastico corrente e la classe.
Note Conclusive
- <div class="clear"></div>: Questo è solitamente usato per evitare problemi di layout con contenitori flottanti (non direttamente visibile).
Tutto ciò è racchiuso all'interno del contenitore principale `<div id="container">`. Questo layout semplice e commentato è utile per vedere come appare una struttura HTML di base ma completa, inclusa la gestione di uno stile base e funzionalità tramite CSS e JavaScript.
Spiegazione del file style.css
Commenti all'inizio del documento
/*
Esempio di impostazione di un sito web responsive
Classe 3 E SIA 2024-2025 Istituto Bassi di Lodi -
Prof. Paolo Latella
*/
```
- Questi sono commenti e non sono letti dal computer. Servono a spiegare o a dare informazioni su chi ha creato il codice e perché.
Corpo del Documento (`body`)
```css
body {
font: 16px/28px;
font-family: 'Arial';
background: #D2D2D2;
line-height:25px;
}
- font: 16px/28px;`: Imposta la dimensione del testo a 16 pixel con un'interlinea (spazio tra le righe) di 28 pixel.
- font-family: 'Arial': Usa il font Arial.
- background: #D2D2D2;: Sfondo grigio chiaro.
- line-height:25px;: Un altro modo per impostare l'interlinea a 25 pixel (questa riga può essere superflua dato che esiste già `line-height` all'inizio).
Linea Orizzontale (`hr`)
```css
hr {
border-bottom: 1.5px solid #008000;
border-top: none;
margin: 20px 0px 15px 0px;
}
```
- border-bottom: 1.5px solid #008000;: Crea una linea verde di 1.5 pixel di spessore in basso.
- border-top: none;: Non c'è linea in alto.
- margin: 20px 0px 15px 0px;: Margini di 20 pixel sopra e 15 pixel sotto.
Contenitore Generale (`#container`)
```css
#container {
width: 960px;
margin: 0 auto;
background: #FFFFFF;
}
```
- width: 960px;: Larghezza fissa di 960 pixel.
- margin: 0 auto;: Centra il contenitore orizzontalmente nella pagina.
- background: #FFFFFF;: Sfondo bianco.
Header (`#header`)
```css
#header {
width: 920px;
float: left;
padding: 20px;
background: #0000CD;
background-image: linear-gradient(#0000CD, #00FFFF);
}
```
- width: 920px;: Larghezza di 920 pixel.
- float: left;: Si posiziona a sinistra.
- padding: 20px;: Spazio interno di 20 pixel su tutti i lati.
- background: #0000CD;: Colore blu intenso.
- background-image: linear-gradient(#0000CD, #00FFFF);: Crea una transizione dai toni del blu al blu chiaro.
Menu (`#menu`)
```css
#menu {
width: 100%;
float: right;
background: #F0F0F0;
}
```
- width: 100%;: Occupa tutta la larghezza disponibile.
- float: right;: Si posiziona a destra.
- background: #F0F0F0;: Colore di sfondo grigio chiaro.
Main, Footer, Titolo e Altri Elementi
- Questi stili sono ripetuti tra main, footer e altre sezioni, con larghezze e posizionamenti simili a `#header` e `#menu`
- Il titolo (`#titolo`) include caratteristiche come il grassetto, grande dimensione dei caratteri, testo bianco e nessuna decorazione sotto il testo.
Menu di Navigazione
```css
#menu ul {
margin: 0px 0 0px 0px;
float: right;
width: 100%;
list-style: none;
}
```
- float: right;: Il menu si posiziona a destra.
- list-style: none;: Rimuove i punti elenco (bullet) dal menu.
Stile Generale dei Link nel Menu
```css
#menu a {
color: #222;
text-decoration
Stile dei Link nel Menu
```css
#menu a {
color: #222;
text-decoration: none;
display: block;
font: 14px;
padding: 14px 20px;
}
```
- color: #222;: Imposta il colore del testo dei link su un grigio scuro.
- text-decoration: none;: Rimuove la sottolineatura dai link.
- display: block;: Ogni link occupa un blocco intero, consentendo che il link sia cliccabile in tutta l'area del padding.
- font: 14px;: Imposta la dimensione del font su 14 pixel.
- padding: 14px 20px;: Aggiunge 14 pixel di spazio interno sopra e sotto il testo del link e 20 pixel a destra e sinistra.
Effetto Hover sui Link del Menu
```css
#menu a:horver {
background: #F0F0F0;
color: #000;
}
- background: #F0F0F0;: Imposta il colore di sfondo su grigio chiaro quando si passa sopra con il mouse (note: dovrebbe essere `:hover` non `:horver`).
- color: #000;: Cambia il colore del testo in nero durante il passaggio del mouse.
Stile della Pagina e Link
```css
#pagina {
width: 100%;
float: left;
display: block;
font: 14px;
color: #0000CD;
font-weight: bold;
}
```
- width: 100%; float: left;: Imposta il contenuto per occupare tutta la larghezza disponibile posizionandosi a sinistra.
- display: block;: Elemento a livello di blocco.
- font: 14px; color: #0000CD;: Imposta la dimensione del font su 14 pixel e il colore del testo in blu scuro.
- font-weight: bold;: Rende il testo in grassetto.
### Box e Box di Collegamento
```css
#link {
padding: 10px;
margin-top: 20px;
width: auto;
height: auto;
}
```
```css
#box {
margin-top: 10px;
padding: 10px;
border: 1px dashed #0000CD;
width: auto;
height: auto;
}
```
- #link e #box: Entrambi hanno un padding di 10 pixel e larghezza/altezza automatica per adattarsi al contenuto.
- #box ha inoltre un bordo con tratteggio blu.
Colonne di Layout
```css
#colonna50-sx {
float: left;
width: 48%;
margin-right: 2%;
height: auto;
margin-bottom: 10px;
}
#colonna50-dx {
float: left;
width: 48%;
margin-left: 1%;
height: auto;
margin-bottom: 10px;
}
```
- Entrambe le colonne sono fluttuanti a sinistra e occupano quasi metà della larghezza visibile, lasciando uno spazio tra loro tramite marginale destro e sinistro.
Immagini e Testo
```css
.immagine {
width: 100%;
height: auto;
margin-bottom: 10px;
}
.centra {
text-align: center;
}
.giustifica {
text-align: justify;
}
```
- immagine: Le immagini si adattano alla larghezza al 100% del loro contenitore e mantengono proporzioni con altezza automatica.
- .centra e .giustifica: Centrano il testo e lo giustificano, rispettivamente.
```css
.evidenzia {
color: #000;
background: #FFFFA0;
padding: 5px;
border-radius: 4px;
}
```
- .evidenzia: Questa classe è utilizzata per evidenziare degli elementi di testo tramite un colore di sfondo giallo chiaro `#FFFFA0`, rendendo il testo nero. Un padding di 5 pixel crea uno spazio attorno al contenuto, e gli angoli arrotondati con `border-radius: 4px` aggiungono un tocco visivo morbido.
.linkpagina {
width: 100%;
font: 10px;
margin-top: -20px;
background: #777;
color: #FFFFFF;
text-align: center;
}
```
- `.linkpagina`: Questo stile si applica a una sezione di link, tipicamente posizionata in basso, come un "footer" di link per la navigazione tra pagine. Occupa tutta la larghezza del suo contenitore. Il testo è piccolo, a 10 pixel, e allineato centralmente. Il colore di sfondo è un grigio medio `#777`, mentre il testo è bianco, creando un buon contrasto per visibilità.
```css
.clear {
clear: both;
}
```
- .clear`: Questa classe viene utilizzata per risolvere problemi con gli elementi flottanti (`float`). Assicura che l'elemento successivo alla classe `.clear` vada sotto gli elementi fluttuanti precedenti, evitando che adiacenti contenuti si trovino in sovrapposizione.
/* Media queries per il responsive design
- colonna-sx: Posizionata a sinistra, contiene i contenuti più importanti.
- colonna-dx: Posizionata a destra, usata come barra laterale (sidebar).
- colonna-cn: Contiene contenuti disposti in una sola riga.
*/
@media (min-width: 1200px) {
/* Quando lo schermo è largo almeno 1200px */
#container {
width: 1170px; /* Larghezza del contenitore impostata a 1170 pixel */
margin: 0 auto; /* Centra il contenitore nella pagina */
}
#header, #main, #footer {
width: 1130px; /* Elementi intestazione, principale e piè di pagina larghi 1130 pixel */
float: left; /* Ogni elemento allineato a sinistra */
padding: 20px; /* Spazio attorno agli elementi per separare i contenuti dal bordo */
}
#menu {
width: 100%; /* Menu occupa tutta la larghezza disponibile */
float: right; /* Menu allineato a destra */
display: block; /* Visualizza il menu come blocco */
}
#colonna-cn {
width: 98%; /* Larghezza della colonna centrale, quasi tutta disponibile */
float: left; /* Allineato a sinistra */
}
#colonna-sx {
width: 65%; /* La colonna sinistra occupa il 65% della larghezza */
float: left; /* Allineato a sinistra */
}
#colonna-dx {
width: 30%; /* La colonna destra (sidebar) occupa il 30% della larghezza */
float: right; /* Allineato a destra */
}
}
@media (min-width: 980px) and (max-width: 1199px) {
/* Quando lo schermo è largo tra 980px e 1199px */
#container {
width: 960px; /* Larghezza del contenitore impostata a 960 pixel */
margin: 0 auto; /* Centra il contenitore nella pagina */
}
#header, #main, #footer, #colonna-cn {
width: 920px; /* Elementi larghi 920 pixel, includendo la colonna centrale */
float: left; /* Allineati a sinistra */
padding: 20px; /* Spazio attorno agli elementi */
}
#menu {
width: 100%; /* Menu occupa tutta la larghezza disponibile */
float: right; /* Allineato a destra */
display: block; /* Visualizzato come blocco */
}
#colonna-cn {
width: 98%; /* Quasi tutta la larghezza disponibile per la colonna centrale */
float: left; /* Allineato a sinistra */
}
#colonna-sx, #colonna-dx {
width: 65%, 30%; /* Stessa larghezza per le colonne sinistra e destra come nella precedente media query */
float: left, right; /* Allineate rispettivamente a sinistra e destra */
}
}
@media (min-width: 768px) and (max-width: 979px) {
/* Quando lo schermo è largo tra 768px e 979px */
#container {
width: 748px; /* Larghezza del contenitore impostata a 748 pixel */
margin: 0 auto; /* Centra il contenitore */
}
#header, #main, #footer, #colonna-cn {
width: 708px; /* Elementi larghi 708 pixel, includendo la colonna centrale */
float: left; /* Allineati a sinistra */
padding: 20px; /* Spazio attorno agli elementi */
}
#menu {
width: 100%; /* Menu occupa tutta la larghezza disponibile */
float: right; /* Allineato a destra */
display: block; /* Visualizzato come blocco */
}
#colonna-cn {
width: 98%; /* Quasi tutta la larghezza disponibile per la colonna centrale */
float: left; /* Allineato a sinistra */
}
#colonna-sx, #colonna-dx {
width: 65%, 30%; /* Stessa larghezza per le colonne di sinistra.
#colonna-sx {
width: 65%; /* La colonna sinistra continua a occupare il 65% della larghezza */
float: left; /* Allineato a sinistra */
}
#colonna-dx {
width: 30%; /* La colonna destra continua a occupare il 30% della larghezza */
float: right; /* Allineato a destra */
}
}
@media (max-width: 767px) {
/* Quando lo schermo è più stretto di 768px */
body {
padding: 10px; /* Aggiunge un po' di padding intorno al corpo del documento */
background: #FFFFFF; /* Imposta uno sfondo bianco per il corpo */
}
#container {
width: 100%; /* Il contenitore occupa tutta la larghezza disponibile */
margin: 0 auto; /* Centro, ma non rilevante quando la larghezza è 100% */
}
#header, #main, #footer {
width: 100%; /* Questi elementi occupano tutta la larghezza disponibile */
padding: 10px 0 10px 0; /* Imbottitura su e giù di 10px, niente sui lati */
}
#menu {
width: 100%; /* Menu occupa tutta la larghezza disponibile */
float: right; /* Allineato a destra, ma sarà nascosto */
}
#colonna-cn {
width: 100%; /* La colonna centrale occupa tutta la larghezza */
float: left; /* Allineato a sinistra */
padding: 10px 0 0 0; /* Imbottitura solamente sulla parte superiore */
}
#colonna-sx {
width: 100%; /* La colonna sinistra occupa tutta la larghezza */
float: left; /* Allineato a sinistra */
padding: 10px 0 0 0; /* Imbottitura sulla parte superiore */
}
#colonna-dx {
width: 100%; /* La colonna destra occupa tutta la larghezza */
float: right; /* Allineato a destra */
padding: 10px 0 0 0; /* Imbottitura sulla parte superiore */
}
#titolo a {
font-size: 30px; /* Aumenta la dimensione del font del titolo */
margin-left: 10px; /* Margine a sinistra di 10px */
}
#foodter {
width: 100%; /* Elemento occupa tutta la larghezza disponibile */
float: left; /* Allineato a sinistra */
padding: 10px 0 0 0; /* Imbottitura sulla parte superiore */
}
#footer p {
margin-left: 10px; /* Margine a sinistra di 10px */
}
/* Quando viene visualizzato su dispositivi mobili come smartphone */
#menu {
display: none; /* Nasconde il menu classico */
}
#menu ul li {
float: none; /* Elementi di lista non vengono fluttuati */
}
.smartmenu {
display: block; /* Visualizza il menu mobile con l'icona */
float: right; /* Allineato a destra */
padding: 5px; /* Imbottitura intorno al menu */
cursor: pointer; /* Cambia il cursore il puntatore della mano */
margin: -15px 20px 0 0; /* Margine solo a destra */
color: #FFFFFF; /* Testo bianco */
background: #006FFF; /* Sfondo azzurro brillante */
}
.icon-smartmenu {
display: block; /* Visualizza le icone del menu */
width: 18px; /* Larghezza 18px */
height: 2px; /* Altezza 2px */
margin: 5px; /* Margine intorno all'icona */
background-color: #FFFFFF; /* Sfondo bianco per le barre icona */
}
.mostra-smartmenu {
display: block!important; /* Forza la visualizzazione di particolari elementi smartmenu */
}
}
Riassunto: Questo codice CSS utilizza le media queries per modificare il layout di una pagina web a seconda della grandezza dello schermo. Per schermi più grandi (almeno 1200px), le colonne sono allineate e dimensionate per ottimizzare l'uso dello spazio disponibile. Man mano che lo schermo si restringe, il layout cambia per adattarsi.
Commenti
Posta un commento