Continuiamo il nostro corso di html concentrandoci sulla struttura di una semplice pagina.
La più classica delle strutture è quella che prevede una testata o header, un menù, il contenuto principale e il footer o piè di pagina.
A questi elementi, che costituiscono lo scheletro della nostra pagina web daremo degli attributi che faranno sì che gli elementi abbiano una larghezza, un’altezza, dei margini, dei colori ben precisi.
Tutto ciò si fa inserendo nel codice della pagina degli elementi/contenitori chiamati div e stabilendo delle regole con i fogli di stile/CSS.
Il risultato finale sarà questo:
Il risultato di una pagina HTML associata al CSS
Questa sarà la struttura della pagina senza stile:
La mia semplice pagina web
La prima pagina web
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit nisl eget ligula congue tempor. Sed vitae augue odio. Suspendisse consectetur lobortis convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse odio turpis, vestibulum quis egestas sed, auctor vitae est. Sed ornare, dui ut scelerisque tincidunt, augue tellus ornare sapien, ac sodales leo arcu vel metus. Aenean mattis, ipsum sit amet tincidunt scelerisque, neque nibh fermentum nisl, eu dictum ante erat sed arcu. Nam in lacus odio. Aenean pulvinar metus sed lacus facilisis vitae vestibulum ante lacinia. Phasellus sollicitudin nunc sit amet dolor vehicula ornare. Vestibulum aliquet tempor erat, eget elementum risus congue et. Proin vestibulum purus nec erat vestibulum eget faucibus elit rhoncus.
Proin bibendum ornare purus, in viverra nulla facilisis id. Duis vitae luctus elit. Etiam ligula odio, ornare eu lobortis ullamcorper, sodales ac lorem. Vestibulum nec ullamcorper orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut eu est a enim sodales varius et at velit. Suspendisse lobortis elementum neque nec iaculis. Cras rhoncus, purus sed facilisis tincidunt, nisi ante cursus orci, vitae tristique justo lorem vel elit. Fusce ac erat erat, in luctus tortor. Morbi quis diam urna. Sed orci tortor, rutrum sed scelerisque et, dictum sit amet lacus. Praesent tortor magna, gravida vel sodales at, elementum imperdiet ligula. Nulla facilisi.
Come avrete capito, abbiamo il tag <html> con relativa chiusura </html>, all’interno la <head> con il <title>, infine il body con tutto il contenuto.
Se provate a copiare e incollare questo codice nel vostro editor preferito (Notepad + ad esempio), avrete un risultato un poco deludente, la nostra pagina, infatti, non ha stile, nessuna regola che “abbellisca” il layout.
Struttura di una semplice pagina senza lo stile dei CSS.
Il risultato non ci piace, vero?
Dobbiamo provvedere dando alla pagina un foglio di stile o CSS (cascading style sheet). Non è cosa difficile quando si tratta di pochi elementi da far stare in piedi, ecco come si fa:
Creiamo un nuovo documento nel nostro editor, salviamo con nome (nel nostro caso style.css) sul Desktop.
A questo punto avremo due documenti sul desktop: la pagina con estensione html e il foglio di stile con estensione css;
tasto destro sul Desktop->nuovo->cartella, diamo un nome che potrebbe essere sito web, e tagliamo e incolliamo i due documenti al suo interno.
Così facendo abbiamo fatto un pò d’ordine e sappiamo “l’indirizzo”dell foglio di stile da collegare al documento html.
Adesso, aprite il documento html e portatevi all’interno dei tag <head></head>, è qui che vanno inseriti i collegamenti ai CSS, scrivete così:
La vostra head risulterà esatttamente come questa:
La mia semplice pagina web
Benissimo, adesso abbiamo collegato il documento html al foglio di stile, peccato che sia vuoto!
Niente paura, provvederemo alla prossima puntata (tra pochi giorni).
P.S.: Intanto, esercitatevi 🙂
Scarica i files
