HTML DIV Tutorial

July 4

Den <div> tag i HTML er generisk måte å bryte nettsidene dine i seksjoner eller \ "divisjoner. \" For å bruke <div> tag til full effekt, må du kombinere det med \ "id \" eller \ "class \" attributter, som tillater deg å gi hvert <div> et unikt navn, og deretter bruke CSS for å gjøre hver <div> se ut akkurat slik du vil ha det til. Bruke <div> tag definitivt faller inn under riket av avansert HTML-koding, men med litt trening, vil du sannsynligvis finne at <div> er verktøyet du trenger for å lage alle typer siden du ønsker.

Syntaks og Naming

Den <div> tag funksjoner som de fleste andre koder i HTML: den bruker en åpning tag, <div>, og en avsluttende koden, </ div>. Du kan kalle individuelle sett med <div> tagger hva du vil bruke \ "id \" og \ "class \" attributter som så:

Forskjellen mellom \ "id \" og \ "class \" er at det bare kan være en id per side, men det kan være så mange klasser som du vil. Så mens sidene kan bare ha en sidebar, kanskje de har en rekke forskjellige bokser med artikler i dem. Og husk, du kan kalle IDer og klasser alt du vil; du kan ringe din sidebar \ "bigtallsectionontheright \" hvis du virkelig vil.

Block vs. Inline

<Div> koder er \ "blokk \" elementer, noe som betyr at hver gang du oppretter en <div>, den finnes på en egen linje som standard. Inline-elementer, på den annen side, kan eksistere som standard på samme linje som noe annet. Den innebygde versjonen av <div> heter <span>. In-line elementer kan gå inn blokkelementer, men det kan ikke være omvendt; du kan ikke stikke <span> koder rundt en <div> blokk, for eksempel.

CSS

Kombinere <div> tagger med din stil ark er der du virkelig kan begynne å tilpasse. Cascading Style Sheets (eller CSS), hvis du ikke vet, er regler for HTML-dokumenter som du kan feste på hver side <head> -delen. Her er en enkel stilark skrevet i CSS:

div {
font-weight: bold
GÅ
}

div # sidebar {
bredde: 200px
GÅ
font-family: Arial
GÅ
float: right
GÅ
}

div.articlebox {
bredde: 500px
GÅ
border: 1px solid svart
GÅ
}

</ Style>

Som du ser, kan du lage spesielle regler for alle de ulike elementene på siden din. Først erklærer stilark som teksten i alle de <div> koder på siden din må være dristige. Deretter erklærer det at \ "sidebar \" <div> element må være 200 piksler bred, bruke Arial font, og \ "flyter \" på høyre side av siden. Til slutt, erklærer det at \ "articlebox \" <div> elementer må være 500 piksler bred og har en svart ramme rundt dem.

Hvis du erklære regler for en id, bruker du et nummertegn for å skille elementet fra navnet (\ "div # sidebar \"). Hvis du erklære regler for en klasse, bruker du en periode for å skille element fra navnet (\ "div.articlebox \").

Den eneste virkelig merkelig del er \ "flyter \" regelen. Husk hvor <div> er en blokk element? Det betyr at ingenting kan vises til høyre eller venstre for <div>. Bruke \ "flyter \" regelen, du sier at i stedet for å vises i sin egen blokk, det \ "flyter \" til venstre eller høyre, slik at andre ting skal vises ved siden av den. Det er et vanskelig begrep å bli vant til; se Ressurser for mer informasjon.