July 6
Le pagine Web utilizzano una combinazione di HTML e CSS (Cascading Style Sheets) del codice. Il codice HTML per una pagina definisce gli elementi di contenuto e la struttura complessiva pagina. Il codice CSS determina la comparsa di questi elementi all'interno della struttura della pagina. Molti siti utilizzano i layout standard contenenti intestazioni, piè di pagina e contenuti. Quando si utilizza HTML e CSS, sviluppatori a volte incontrano difficoltà con sovrapposizione. Utilizzando particolari proprietà CSS può contribuire ad affrontare queste difficoltà.
Un tipico layout di pagina Web interessa un'area di intestazione nella parte superiore, alcuni contenuti sotto di questo e una zona piè sul fondo. Ognuna di queste sezioni possono includere i menu e altri elementi di contenuto. L'area di intestazione spesso contiene un'immagine e un testo che indica il titolo della pagina e il sito. Se l'area di intestazione contiene più di un elemento HTML, lo sviluppatore può essere necessario applicare un layout che presenterà questi elementi utenti nel modo desiderato.
markup HTML utilizza strutture con tag per implementare struttura della pagina. Il seguente codice HTML di esempio illustra uno schema di base della pagina:
<Html>
<Head> </ head>
<Body>
<Div id = "container">
<Div id = "header">
<Div id = "headerOne"> Ecco una parte dell'intestazione </ div>
<Div id = "headerTwo"> Qui è l'altra parte dell'intestazione </ div>
</ Div>
<Div id = "content">
Ecco il contenuto della pagina
</ Div>
<Div id = "footer"> Ecco il piè di pagina </ div>
</ Div>
</ Body>
</ Html>
Questa pagina include una sezione per l'intestazione, in cui due elementi figli definiscono due parti distinte dell'area dell'intestazione. L'intestazione può contenere più elementi per le immagini, testo e link come richiesto.
Il codice CSS per una pagina Web determina come gli elementi appariranno nel browser dell'utente. Il codice CSS può apparire all'interno di un file CSS separato o direttamente all'interno della sezione head HTML come segue:
<Style type = "text / css">
/ Codice CSS /
</ Style>
Tra l'apertura e la chiusura di script tag, lo sviluppatore può includere dichiarazioni CSS che determinano il layout e l'aspetto di ogni elemento della pagina. Ad esempio, per specificare che ciascuno dei principali elementi della pagina dovrebbe occupare l'intera larghezza della pagina, il codice può essere aggiunto:
intestazione, #content, #footer {
width: 100%;
}
Il seguente codice specifica la larghezza totale della pagina:
contenitore {width: 800px; margin: auto;}
codice CSS può dettare come deve apparire ogni parte dell'intestazione. Il seguente CSS dimostra:
headerOne, #headerTwo {
float: left;
}
Questo codice applica una struttura galleggiante a entrambi gli elementi di intestazione secondari, indicando che dovrebbero apparire sulla stessa linea orizzontale all'interno dell'elemento intestazione principale. Quanto segue indica le proprietà CSS per ogni elemento secondario:
headerOne {width: 50%; padding: 5%;} headerTwo {width: 30%; padding: 4%;}
Questa specifica la percentuale dell'elemento genitore che ogni elemento bambino dovrebbe occupare. A volte, quando si usano le proprietà float, gli sviluppatori ritengono che gli elementi appaiono stipati insieme. La struttura chiara può aiutare, in quanto indica al browser di non rendere pubbliche eventuali altri elementi sulla stessa linea come un elemento particolare. Il codice esteso di seguito viene illustrato:
intestazione, #content, #footer {
width: 100%; clear: both;
}
Ciò dovrebbe garantire che i tre principali elementi della pagina appaiono in modo efficace, con una interruzione di linea tra di loro.