Cominciamo aprendo un programma adibito alla programmazione, nel nostro caso CoffeCup.
La prima cosa da fare è aprire una New Blank Page che sarà la nostra HOME, salvarla con il nome "index.html" (tutto minuscolo e senza spazi), e dovrà essere sempre questo il nome con cui si salva una Home Page ; successivamente si apre un'altra New Blank Page che va chiamata "stile.css".
Bisogna cancellare tutto il code editor in entrambe le New Blank Page e copiare il codice di partenza sia per HTML che per il foglio di stile: nel caso della pagina "index.html" il codice da incollare tra <body> e </body> è:
<div id="container">
<div id="header">TESTATA</div>
<div id="navigation">NAVIGAZIONE</div>
<div id="content">CONTENUTO</div>
<div id="footer">PIEDE</div>.
Per quanto riguarda la pagina "stile.css" invece, il codice da incollare è un altro:
html, body {margin: 0; padding: 0}
#container {width: 960 px; margin: 0 auto;}
#header {background-color: red;}
#navigation {background-color: blue; color: white;}
#content {background-color: green;}
#footer {background-color: black;}
E ' importante ricordare che vanno creati tanti file HTML quante sono le pagine del sito MA un solo foglio di stile CSS ad esse collegato: salvati tutti esclusivamente nella stessa cartella del sito chiamata anche RADICE. In ogni pagina HTML devo mettere il link al foglio di stile esterno, va copiato nella "head".
<head>
<link href="stile.css" rel="stylesheet" type="text/css">
</head>
Una volta salvato tutto, aprendo la pagina nel browser si vede la struttura con 4 box colorati che è esattamente il nostro punto di partenza.
Nessun commento:
Posta un commento