Creazione dei file di base per una pagina web che è possibile utilizzare più e più volte mantiene web design semplice ed efficiente. \"Template\" si riferisce agli elementi già impostati che si applicano i tuoi contenuti di nella progettazione. Una semplice pagina web è una pagina di una colonna con la formattazione del testo. Questo tutorial vi mostrerà come impostare un modello di pagina web di base. È possibile espandere questa idea per creare tutti i tipi di progetti web per il tuo sito.
Istruzioni
1
Creare due nuovi file nel testo dell'editor. Index. html nome quello primo e il secondo uno Style. CSS. Il primo è la pagina web; il file CSS è il tuo foglio di stile che vi dirà gli elementi HTML come comportarsi.
2
Digitare quanto segue nel tuo file HTML.
< html >
< head >
< title > pagina < / title >
< / head >
< corpo >
< / body >
< / html >
Questa è la struttura di base di un file HTML. Questi tag dire al browser dove cercare il contenuto della pagina (tra i tag body) e dove cercare le informazioni di pagina (tra i tag head).
3
Aggiungere i tag div con ID al file HTML. ID dire al browser dove cercare nel file CSS per gli elementi di stile. Per lo styling contenuto è racchiudere il contenuto nel tag div.
< html >
< head >
< title > pagina < / title >
< / head >
< corpo >
< div id = "colonna" >
Intestazione < h1 > < / h1 >
< / div >
< div id = "main" >
Si tratta di testo.
< / div >
< / body >
< / html >
Il tag h1 denota testo di intestazione e di default più grande rispetto al testo normale.
4
Link file HTML a file CSS. È necessario solo aggiungere un tag link alla sezione di testa.
< html >
< head >
< title > pagina < / title >
< link href="style.css\" rel = \ "stylesheet\" tipo = \ "testo/css\" / >
< / head >
Questo dice al browser dove trovare il file CSS.
5
Aggiungere elementi al file CSS. Nel vostro file CSS, è possibile aggiungere stili per ogni elemento che si desidera a effetto nel file HTML. Digitare quanto segue:
corpo {}
{} colonna
H1 {}
principale {}
È possibile lo stile di tag e ID nel file CSS. Per applicare uno stile ID è necessario aggiungere un # prima del nome dell'ID.
6
Aggiungere gli stili agli elementi nel file CSS. Mentre ci sono molti stili che è possibile utilizzare, qui sono pochi quelli di base che trasformeranno la tua pagina in una pagina web di colonna singola. Iniziare con il tag body.
corpo () {
margin: 0
VAI
padding: 0
VAI
sfondo: #000000
VAI
font-size: 12px
VAI
Color: #000000;}
Il margine e la spaziatura interna sono impostati su 0, quindi lo sfondo della pagina coprirà la finestra del browser intero. Lo sfondo imposta il colore di nero utilizzando il codice esadecimale per il nero. Font-size imposta la dimensione del testo della pagina web e il colore indica il colore del testo che è anche impostato su nero.
colonna () {
margin: 0 auto
VAI
Larghezza: 800px
VAI
sfondo: #ffffff
VAI
}
Impostando la larghezza della colonna, abbiamo creato un corridoio di bianco nel mezzo della pagina. Impostazione del margine su 0 auto-centri la colonna sullo schermo. Sullo sfondo utilizza il codice esadecimale per il bianco, così il testo apparirà sullo sfondo.
H1 {
text-align: center;}
Allineare testo racconta il testo come allineare nella pagina. In questo caso abbiamo scelto il centro, ma è possibile anche utilizzare sinistra, destra e giustificare.
Main {
padding: 20px;}
Imbottitura mantiene il testo da corsa contro il bordo della pagina. Con l'aggiunta di imbottitura, si aggiunge lo spazio tra il bordo della colonna e il testo.
7
Salvare entrambi i file.
Consigli & Avvertenze
- È possibile utilizzare un'applicazione di selettore colore per scegliere diversi colori per la tua pagina web. Il selettore colore vi darà il codice esadecimale che è necessario.