April 10
Creare i file di base per una pagina web che è possibile utilizzare più e più volte mantiene il web design semplice ed efficiente. \ "Template \" si riferisce ad elementi già impostato che si applica i propri contenuti per la progettazione. Una pagina web di base è una pagina di una colonna con la formattazione del testo. Questo tutorial vi mostrerà come impostare un modello di base pagina web. È possibile espandere su questa idea di creare tutti i tipi di progetti web per il sito.
1 Creare due nuovi file nel vostro editor di testo. Assegnare un nome al primo index.html e la seconda style.css. Il primo è la tua pagina web; il file CSS è il tuo foglio di stile che racconterà gli elementi HTML come comportarsi.
2 Digitare il seguente nel file HTML.
<Html>
<Head>
<Title> A pagina </ title>
</ Head>
<Body>
</ Body>
</ Html>
Questa è la struttura di base di un file HTML. Questi tag indicano al browser dove cercare il contenuto della pagina (tra i tag body) e dove cercare le informazioni della pagina (tra i tag head).
3 Aggiungere tag div con ID al file HTML. ID indicano al browser dove cercare nel file CSS per gli elementi di stile. Per i contenuti styling racchiudere il contenuto nei tag div.
<Html>
<Head>
<Title> A pagina </ title>
</ Head>
<Body>
<Div id = "colonna">
<H1> Intestazione </ h1>
</ Div>
<Div id = "principale">
Questo è un testo.
</ Div>
</ Body>
</ Html>
Il tag h1 denota dirigendo il testo ed è per difetto più grande di testo normale.
4 Collega il tuo file HTML a file CSS. Hai solo bisogno di aggiungere un tag link alla sezione testa.
<Html>
<Head>
<Title> A pagina </ title>
<Link href = rel = \ tipo "style.css \" "stylesheet \" = \ "text / css \" />
</ Head>
Questo dice al browser dove trovare il file CSS.
5 Aggiungere elementi al file CSS. Nel vostro file CSS, aggiungere stili per ogni elemento che si desidera effettuare nel file HTML. Digitare quanto segue:
corpo{}
colonna {}
h1 {}
principale {}
È possibile lo stile tag e ID nel file CSS. Per gli ID di stile è necessario aggiungere un # prima del nome della ID.
6 Aggiungere stili per gli elementi nel file CSS. Mentre ci sono molti stili che è possibile utilizzare, qui ci sono un paio di quelli di base che trasformerà la tua pagina in una pagina web a colonna singola. Inizia con il tag body.
corpo{
margin: 0
ANDARE
padding: 0
ANDARE
background: # 000000
ANDARE
font-size: 12px
ANDARE
color: # 000000;}
Il margine e padding sono impostati a 0 in modo che la pagina di sfondo coprirà la finestra intera del browser. Lo sfondo imposta il colore al bianco utilizzando il codice esadecimale per il nero. Font-size imposta la dimensione del testo per la pagina web e colore indica il colore del testo che è anche impostato al nero.
colonna {
margin: 0 auto
ANDARE
Larghezza: 800px
ANDARE
sfondo: #ffffff
ANDARE
}
Impostando la larghezza della colonna, abbiamo creato una fascia di bianca al centro della pagina. Impostare il margine a 0 auto-centri colonna sullo schermo. Lo sfondo utilizza il codice esadecimale per il bianco in modo che il testo verrà visualizzato sullo sfondo.
H1 {
text-align: center;}
Text-align dice il testo come allineare sulla pagina. In questo caso abbiamo scelto il centro, ma è anche possibile utilizzare sinistra, a destra e giustificare.
principale {
padding: 20px;}
Imbottitura mantiene il testo di correre contro il bordo della pagina. Aggiungendo padding, si aggiunge lo spazio tra il bordo della colonna e il testo.
7 Salvare entrambi i file.