HTML -layoutelementer og teknikker
HTML-layoutelementene definerer utformingen av siden som hvordan elementene skal ordnes for å få en godt strukturert side. Mens HTML -layout -teknikker forskjønner elementene for å få en side i et presentabelt format. Når man viser viktigheten av HTML -elementer og HTML -teknikker, har denne guiden til hensikt å gi følgende læringsresultater:
- Hva er HTML -layoutelementer
- CSS -rammer
- Nettoppsett
- Flexbox Layout
- Float Property
HTML -layoutelementer
HTML5 har kommet med støtte fra forskjellige semantiske elementer som kan brukes til å designe utformingen av HTML -siden. Man kan bruke de semantiske elementene på en organisert måte for å få ønsket oppsett. Følgende HTML -elementer er satt til å angi utformingen av siden deretter.
: Hoveddelen definerer overskriftsdelen av dokumentet
: Dette elementet brukes til å lage en ny seksjon på en side
De
: En artikkel på en HTML -side kan defineres ved hjelp av denne taggen.
De
: Dette elementet skaper en overskrift for å oppsummere all informasjon eller detaljer om den overskriften. Når du klikker på den overskriften, vises informasjonen som er lagret inne i den.
: Taggen brukes til å nevne detaljert informasjon om noen spesifikke ting/objekt.
: Det representerer bunnteksten i en seksjon/dokument.
Klikk her for å lære mer om HTML -semantiske elementer.
HTML Layout Techniques
HTML -layout -teknikkene hjelper til med å lage en multikolumnoppsett, og teknikkene kan velges fra ett av følgende som er gitt her.
CSS -rammer
CSS -rammer vil hjelpe til med å lage en responsiv og attraktiv utforming av en webside. Disse rammene inkluderer forskjellige innebygde klasser utstyrt med stiler, og du trenger ikke å lage dine egne stiler. Blant forskjellige CSS -rammer, W3.CSS og Bootstrap er mye brukt.
Hvordan bruke W3.CSS -rammeverk
Det er et veldefinert moderne CSS-ramme som skal gi høy funksjonalitet av stiler for en webside. Hensikten er å gi et mangfoldig alternativ til bootstrap -rammeverket. Å bruke W3.CSS -klasse, du må bare sette inn følgende lenke til HTML -siden din.
Hvordan du bruker bootstrap -rammeverket
Bootstrap-rammeverket er et annet CSS-ramme som også har innebygde klasser for å gi forskjellige typer stiler til HTML-sider. For å bruke bootstrap -rammeverket, har du to muligheter:
- Last ned bootstrap
- Bruk CDN -lenken direkte i HTML -dokumentet ditt (anbefalt)
Følgende CDN -lenker hjelper deg med å importere bootstrap -forekomster for å style websiden din.
Lim inn følgende lenke i hodemerket ditt (anbefalt)
Plasser følgende skript på slutten (anbefalt) av taggen til dokumentet
Ved å plassere koblingene ovenfor, vil du kunne bruke forskjellige bootstrap -klasser for å style HTML -siden din deretter.
CSS Float
Denne teknikken er ganske nyttig i å plassere HTML -elementer. Som standard plasseres elementene etter hverandre. Du kan imidlertid bruke float/Clear -egenskapen til å manipulere standardplassering av elementer. Den klare eiendommen brukes til å bryte kontinuiteten til float -egenskapen, slik at hvis du vil plassere elementet på neste linje, så må du bruke den klare eiendommen.
Funksjonaliteten til CSS Float og Clear Properties er lett å lære, men vanskelig å implementere. Følgende eksempel refererer til bruk av float og klare egenskaper.
Html
Html
CSS
JavaScript
Ovennevnte HTML -kode oppretter tre divisjoner med klassenavn “Prim1“,“Prim2”Og“Prim3“.
CSS
.prim1FLOAT: Venstre;
Bredde: 33%;
bakgrunnsfarge: oransje;
.prim2
FLOAT: Venstre;
Bredde: 33%;
bakgrunnsfarge: LightskyBlue;
.prim3
klart: til venstre;
Bredde: 66%;
Bakgrunnsfarge: Lysgrønn;
Hovedingrediensen i dette eksemplet er CSS som viser hvordan float- og klare egenskaper brukes. Float = ”venstre”Eiendom brukes i de to første Divs mens den tredje div har det klare = ”venstre“.
Produksjon
Flexbox Layout
CSS Flexbox (fleksibel boks) modul hjelper med å lage en fleksibel layoutstruktur uten å bruke flottøren eller noe posisjoneringselement. Dessuten kan elementene ordnes på rad eller en kolonne (bare en dimensjon). For å bruke CSS Flexbox -teknikken, må du legge til klasse = ”Flex-Container”Til elementet og“vise”Eiendom til flex-container må være satt til“Flex“. Barneelementene krever ingen klasse, de er nettopp justert med foreldreklassen.
Eksemplet gitt nedenfor viser bedre bruken av en fleksibel utforming.
.flex-containerDisplay: Flex;
Html
CSS
I koden ovenfor, a div er opprettet med klasse = ”Flex-Container”Og visningseiendommen er satt til“flex ”.
Produksjon
Nettoppsett
Nettoppsettet gjør det mulig å ordne forskjellige barneelementer på en presentabel måte. Rutenettet oppsett gir arrangementet i to dimensjoner (med rad og kolonne samtidig). For å bruke dette, klassen = ”Rutenett-Container”Brukes til overordnet element, mens klassen =”rutenett”Brukes til barneelementene. Dessuten vise Eiendom til nettbeholderen kan settes til Nett eller til Inline-nett.
.rutenett-containerDisplay: rutenett;
Html
CSS
JavaScript
I koden ovenfor, klassen av foreldre div er satt til "Rutenett-Container”Og barneartiklene har klasser”rutenett“.
Produksjon
Utgangen viser den primære forskjellen mellom rutenett og flexoppsett. Nettoppsettet er utvidet i flerdimensjon, mens flex-oppsettet ordner elementene i en enkelt dimensjon.
Konklusjon
HTML -layoutelementer og HTML -layout -teknikker gir funksjonaliteten til å designe en webside på en presentabel måte. For dette er det gitt forskjellige HTML -semantiske elementer og HTML -oppsett i denne artikkelen. De semantiske elementene tjener best formålet med bruken av dem og anses dermed for å være en viktig ingrediens på websiden. HTML -layout -teknikkene kan omfatte CSS -rammer (Bootstrap eller W3.CSS), CSS Float, CSS fleksibel boks og CSS -rutenett.