Når du bruker et nettsted eller applikasjon, kan det hende du må bytte forskjellige sider, dokumenter og alternativer. Mer spesifikt å navigere til spesifikt innhold, “Tabs”Kan brukes. I HTML er faner det klikkbare området i alle applikasjoner som hjelper til med å navigere rundt på siden. Når en fane er klikket, vises det tilhørende innholdet, og andre faner blir skjult.

Denne studien beskriver prosedyren for å lage og style -faner i HTML.

Hvordan lage faner i HTML?

For å opprette faner i HTML, følg instruksjonene nedenfor.

Trinn 1: Opprett grunnleggende HTML -fil

Først legger vi til en divklasse som heter “Myhtmltabs”:

Vi vil lage tre faner for å demonstrere det praktiske eksemplet:

• Inne i ovennevnte div gjør tre radiokontroller for “hjem”,“Om”, Og“kontakt”, Henholdsvis. Disse inngangsradioene er assosiert med etikettelementer. Inngangselementet “id”Attributt skal være det samme som“til”Attributt til etikettelementet.
• Radieknappen til fanen Hjemme er merket som “krysset av”, Som som standard representerer hjemme -alternativknappen, bør sjekkes.

HJEM

OM

KONTAKT

Vi har opprettet tre radioknapper, der standardjekket -knappen er hjemmeknappen:

Trinn 2: Legg til innhold

Neste, legg til innhold i hver knapp. For dette formålet, legg til tre divs under hver alternativknapp. Inne i diven har vi lagt til

Tag for overskriften og

Tag for avsnittet som sett i kodeblokken nedenfor:

HJEM

Hjem

Hjem er utgangsstedet for drømmer og håp!

OM

Om

Vi er et team! Arbeid sammen for en felles visjon ..

KONTAKT

Kontaktinformasjon

Vi kommuniserer med dem, med kjærlighet, med mot, med smil!

Radioknappene med relatert innhold kan sees i utdataene nedenfor:

Trinn 3: Style Main/Parent Div

Lag en ny CSS -fil i prosjektet ditt og sett inn lenken i HTML -filen som gitt nedenfor:

La oss gi litt stil til ovennevnte HTML -struktur. Du kan bruke CSS -styling i henhold til din preferanse.

Her er kroppselementet stylet ved å sette bakgrunnsfargen som “RGBA (173, 202, 171, 0.849)”. Dessuten er fontfamilien satt som "sans serif”:

kropp
Bakgrunnsfarge: RGBA (173, 202, 171, 0.849);
Font-Family: Sans-Serif;

Neste, “.Myhtmltabs”Brukes til å få tilgang til overordnede DIV lagt til i HTML -filen:

.Myhtmltabs

Display: Flex;
Flex-Wrap: Wrap;
Maks bredde: 600px;
Margin: 50px auto;
polstring: 25px;

Beskrivelsen av den ovennevnte koden er beskrevet her:

• “Display: Flex”Eiendom blir lagt til i foreldreelementet slik at barneelementene automatisk blir justert i kolonner og rader og deres bredde og høydemargin som auto.
• “Flex-Wrap: Wrap”Eiendom definerer om flex -elementene er satt inn på en linje eller flere linjer.
• “Maks bredde: 600px”Indikerer at den maksimale bredden på diven skal være 600px.
• “Margin: 50px auto”Gir toppbunnsmargin som 50px og venstre høyre som auto.
• “Polstring: 25px”Gir plassen inne i diven som 25px.

Vi vil ikke synliggjøre radioknappene på websiden. For å gjøre det, sett skjermen som "ingen”:

.myhtmltabs input [type = "radio"]

Display: Ingen;

Trinn 4: Stiletikett

Tilordne noen CSS -egenskaper til bildetekstene eller fanetikettene, for eksempel:

• Sette “polstring" som "25px”
• “Fontvekt" som "dristig”
• “bakgrunnsfarge" som "RGB (220, 207, 233)”
• “markør" som "peker”Å representere et ikon med en pekende hånd for å gjøre samspillet bedre:

.myhtmltabs label
polstring: 25px;
Fontvekt: fet;
bakgrunnsfarge: RGB (220, 207, 233);
Markør: peker;

Trinn 5: Stil H1

Den under-nevnte delen viser skriftstørrelsen på

Taggen er satt som "2em”:

.Myhtmltabs .Tab H1
Font-størrelse: 2em;

Trinn 6: Style Child Divs

Deretter bruker du styling på ".Tab”Div som er barnets div av“Myhtmltabs”Div. Denne diven er for innholdsområdet. Vi vil sette bredde-, høyde-, polstrings- og bakgrunnsfargede egenskaper nedenfor. Sett etter det bestillingen som 1, som vil stille inn fanene på toppen. Deretter er visningsegenskapen satt som ingen:

.Myhtmltabs .Tab
Bredde: 100%;
Høyde: 200px;
polstring: 20px;
bakgrunnsfarge: RGB (228, 216, 171);
Bestilling: 1;
Display: Ingen;

Det kan observeres at styling blir brukt med hell; Innholdet dukker imidlertid ikke opp:

Trinn 7: Vis faner innhold

Elementet ved siden av Plus (+) -tegnet viser at disse elementene vil bli vist i samme rekkefølge når alternativknappen er sjekket. Når inngangen har type radio av .Myhtmltabs div blir sjekket og viser deretter søskenelementene "merkelapp”Og“.Tab”Div Class in Block (hele) linje:

.myhtmltabs input [type = 'radio']: sjekket + etikett + .Tab
Display: Block;

Trinn 8: Stil åpnet fanen

For å skille mellom den åpne fanen og andre, er bakgrunnsfargen på etiketten satt som "RGB (67, 144, 216)”Og tekstfargen er satt som hvit:

.MyHtMlTabs Input [type = 'Radio']: Sjekket + etikett
Bakgrunn: RGB (67, 144, 216);
Farge: Hvit;

Etter å ha tolket all koden beskrevet ovenfor, la oss se resultatet!

Slik kan du opprette faner i HTML.

Konklusjon

HTML -faner er de klikkbare områdene på alle applikasjoner som navigerer brukeren til en bestemt seksjon. Ved å bruke fanene, kan brukere enkelt fortsette til flere deler av applikasjonen. I HTML kan du enkelt opprette faner ved å stille inn inngangstypen som radio og bruke forskjellige CSS -egenskaper. I dette innlegget har vi lært prosedyren for å lage faner i HTML ved hjelp av en praktisk demonstrasjon.