Categorie
Ads
Html #2: Div e CSS
Continuiamo la nostra rubrica per Imparare l’HTML. Nella lezione precedente avevamo parlato dei Tag e abbiamo un pò introdotto in modo molto semplice l’uso dell’html. In questo secondo Tutorial invece, proveremo a fare qualcosa di diverso, tremite l’uso dei div e dei Css.
Cosa sono i Div? I div non sono altro che dei contenitori, che hanno un proprio nome ed è personalizzabile via css. Ecco la sua struttura:
<html>
<head></head>
<body>
<div id=”NOME”> ..Contenuto.. </div>
</body>
</html>
Ma al posto di “<div id=”NOME”> ..Contenuto.. </div>” avremmo potuto anche mettere “<div class=”NOME”> ..Contenuto.. </div>”. In questo modo, avremmo specificato una classe. Sia i Div che le classi, sono personalizzabili appunto via CSS. Colleghiamo il nostro file index.html al nostro foglio di stile.
Per farlo, dobbiamo creare all’interno di una stessa cartella due file, uno chiamato index.html e uno style.css, e all’interno dell’index scriveremo questo codice:
<html>
<head>
<title>NOMESITO</title> // Ricordi le informazioni all’interno del tag <head> Che ti dicevo nel primo articolo?:)
<link rel=”stylesheet” type=”text/css” href=”style.css”> // Colleghiamoci al CSS
</head>
<body>
<div id=”box”><h1>DirettoreGeek.com</h1></div> // Definiamo un Div e lo chiamiamo “box” ( Occhio alle maiscuole/minuscole )
</body> </html>
Nota: per creare dei titoli in HTML, si possono utilizzare diversi tag ( H1, H2, H3, H4, H5, H6 ) che vanno dal più grande al più piccolo.
Abbiamo appena creato una pagina html, a cui abbiamo dato come titolo “NOMESITO” ( vedi tag head ), successivamente ci siamo collegati al css, e nel corpo del sito, abbiamo creato un contenitore chiamato box, con dentro un titolo ( H1 ) con scritto DirettoreGeek.com. Niente di complicato.
Adesso Passiamo al CSS. Una cosa importante da dire, è che prima di iniziare a programmare, bisogna azzerare gli stili assegnati alla pagina e che variano da browser a browser, questo si fa per ottenere così una visualizzazione del sito uguale su tutti i browser, maggiori info qui:
@charset “UTF-8″;
/* CSS Document */
body { background-color: #aaa; font-family:Arial, Helvetica, sans-serif; } // Abbiamo assegnato delle proprietà al Tag Body, come colore di sfondo e i Caratteri da utilizzare
#box { width: 960px; margin: 0 auto; padding: 0; background-color: #EEE; border: 1px dotted #CCC; } // Parte importante, abbiamo tramite css definito lo stile che dovrà avere il Div Box, ovvero 960px di larghezza, margin 0 e padding 0, e 1px di bordo di colore Grigio.
#box h1 { text-align: center; } // Abbiamo centrato il titolo ( H1 ) che si trova all’interno del div box.
Come hai potuto vedere nel css, il div viene definito con il “#”, invece la classe viene definita con il “.”, prima del nome del div/della classe.
Spero di averti fatto ben capire alcune nozioni fondamentali dell’html, senza approfondire troppo perchè questo tutorial come ho detto nella prima lezione, è dedicato alle persone alle prime armi.
TUTORIAL HTML