En HTML Tutorial for Legge Venstre Navigasjon
Evnen til å navigere til forrige nettside eksisterer i alle nettlesere som standard. Men ved å gi en del som gir tilgang til flere sider gjennom en nettside fra en praktisk meny, kan en webdesigner forenkle navigasjon for brukere.
Bruksanvisning
1 Åpne Notisblokk, og sette opp HTML-fil med følgende kode:
<Html>
<Head>
</ Style>
</ Head>
<Body>
<Div id = \ "navigasjon \">
<a href=\"\">Navigation item 1</a>
<a href=\"\">Navigation item 2</a>
<a href=\"\">Navigation item 3</a>
<a href=\"\">Navigation item 4</a>
</ Div>
</ Body>
</ Html>
Den <div id = \ "navigasjon \"> </ div> tagger skille navigasjonselementene som spesielt innhold som vil falle i navigasjonsruten.
2 Legg style sheet koden mellom <head> </ head> tags, som følgende:
<Style rel = \ "stylesheet \" type = \ "text / css \">
div # navigasjon {
float: left
GÅ
bredde: 100px
GÅ
height: 100%
GÅ
color: # ffffff
GÅ
background-color: # 666
GÅ
padding: 5px
GÅ
}
</ Style>
Den stilark informasjon dikterer hvordan informasjonen i navigasjons <div> </ div> koder vises. I hovedsak skaper stilarket kode en \ "boksen \" som skal inneholde noe i navigasjons koder. Så vil noen informasjon innenfor disse kodene samsvare med stil stilark informasjon legger ut. Den \ "flyter \" attributtet i stilarket forteller leseren at navigasjons delen vil \ "flyte \" til venstre for noe annet innhold. Den \ "width \" egenskap sørger for at boksen rundt navigasjonselementene vil bo på 100-piksler bredt.
3 Lagre filen som en HTML-fil ved å velge \ "Fil \" og deretter \ "Lagre som ... \" i filnavnet tekstboksen, skriv inn navnet på filen med .html. Filen skal se slik ut:
<Html>
<Head>
<Title> </ title>
<Meta http-equiv = \ "Content-Type \" content = \ "text / html; charset = iso-8859-1 \">
<Style rel = \ "stylesheet \" type = \ "text / css \">
div # navigasjon {
float: left
GÅ
bredde: 100px
GÅ
height: 100%
GÅ
color: # ffffff
GÅ
background-color: # 666
GÅ
padding: 5px
GÅ
}
</ Style>
</ Head>
<Body>
<Div id = \ "navigasjon \">
<a href=\"\">Navigation item 1</a>
<a href=\"\">Navigation item 2</a>
<a href=\"\">Navigation item 3</a>
<a href=\"\">Navigation item 4</a>
</ Div>
</ Body>
</ Html>
4 Åpne filen i en nettleser. Navigasjons elementer skal justere til venstre side. Navigasjons <div> tagger nå tjene som venstre navigasjonspanelet.