Hvordan du bruker div tag i html for å dele siden?

Hvordan du bruker div tag i html for å dele siden?
I HTML er taggen den viktigste taggen og brukes i de fleste av dokumentene. Taggen regnes som beholderen for andre HTML -tagger. Derfor kan den brukes til å bruke flere HTML -koder på en ønsket del av dokumentet.

Taggen kan også brukes til å dele en HTML -side i flere seksjoner. Denne oppskrivningen tar sikte på å veilede deg hvordan DIV-tagger kan brukes til å dele siden. Følgende utfall forventes:

  • Hvordan bruker vi DIV -tagger for å dele HTML -sider i horisontale seksjoner?
  • Hvordan bruker vi DIV -tagger for å dele HTML -sider i vertikale seksjoner?

Hvordan bruker vi DIV -taggen for å dele HTML -siden i horisontale seksjoner?

I HTML fungerer en tag som en seksjon for dataene i HTML -siden. For å dele en side i seksjoner, må du skrive de nødvendige HTML -kodene inne i taggen. La oss se det praktiske eksemplet nedenfor for å forstå inndelingen av HTML -sider med tag.

Html




Første dokument



Deling HTML -side ved å bruke tag


Seksjon 1
Avsnitt 2
Avsnitt 3

I denne koden har vi brukt tre tagger. Disse taggene er tilknyttet de tre CSS -klassene. CSS -koden som brukes i ovennevnte HTML -kode er gitt nedenfor:

CSS

div

tekst-align: sentrum;
Font-størrelse: 30px;
Farge: Hvit;
polstring: 10px;
Display: Flex;
Align-elementer: sentrum;
Justify-Content: Center;
Høyde: 150px;
Bredde: 98%;

.en

Bakgrunnsfarge: Limegreen;

.to

bakgrunnsfarge: oransje;

.tre

Bakgrunnsfarge: Hotpink;

I CSS -delen har vi målrettet alle tre taggene for å formatere innholdet i alle DIV -ene. For å gi forskjellige farger til hver div, tre klasser “en”,“to”, Og“tre”Er opprettet.

Produksjon

Utgangen viser at en webside er delt inn i tre seksjoner ved hjelp av HTML -taggen.

Hvordan bruker vi DIV -taggen for å dele HTML -siden i vertikale seksjoner?

I HTML kan vi bruke tag for å dele en webside i vertikale seksjoner. La oss se det praktiske eksemplet nedenfor for å forstå den vertikale inndelingen av en HTML -side ved å bruke tag.

Html




Første dokument



Deling HTML -side ved å bruke tag


Seksjon 1
Avsnitt 2
Avsnitt 3

I denne koden har vi opprettet tre seksjoner ved hjelp av tag. For bedre presentasjon har vi brukt følgende CSS på DIV -kodene:

CSS

div

tekst-align: sentrum;
Font-størrelse: 30px;
Farge: Hvit;
polstring: 10px;
Display: Flex;
Align-elementer: sentrum;
Justify-Content: Center;
Høyde: 500px;
Bredde: 30%;

.en

Bakgrunnsfarge: Limegreen;
FLOAT: Venstre;

.to

bakgrunnsfarge: oransje;
FLOAT: Venstre;

.tre

Bakgrunnsfarge: Hotpink;
FLOAT: Venstre;

I CSS -delen er vi målrettet mot alle DIV -er og brukte forskjellige egenskaper for å gi høyden, bredden, polstring og bakgrunnsfontstørrelse til DIV -innholdet. Det observeres at de vertikale seksjonene opprettes ved hjelp av flyte Eiendom til CSS og verdien er satt til venstre.

Produksjon

Utgangen viser at en webside er delt inn i tre seksjoner ved hjelp av HTML -taggen.

Konklusjon

I HTML kan vi dele en hel webside i seksjoner ved å bruke TAG sammen med CSS. Som standard deler en tagg en webside i horisontale seksjoner. Du kan imidlertid bruke float -egenskapen til CSS for å lage de vertikale seksjonene på websiden. Ved å følge denne guiden, kan du bruke tag for å dele HTML -siden.