HTML står for Hypertext Markup Language. Flere tagger brukes til å lage en struktur på websider. Disse taggene er også kjent som HTML -elementer. HTML -elementene viser innhold i nettleseren.

Læringsutbyttet til denne artikkelen er:

• Hva er HTML -dokumentstruktur?
• Hva er HTML -tagger?
• Hva er HTML -elementer og attributter?

I den kommende delen vil HTML -dokumentstrukturen bli diskutert.

Hva er en HTML -dokumentstruktur?

Et dokument av HTML -struktur ser slik ut:

Linuxhint

Beste opplæringsnettsted

Elementene som brukes i den ovennevnte koden er forklart nedenfor:

• “”Er erklæringen om et HTML5 -dokument.
• “”Er den primære komponenten på en HTML -side. Lang -attributtet med verdien “no”Representerer det engelske språket.
• “”Holder metainformasjonen om siden.
• “”Spesifiser UTF-8-kodingen når du oversetter koden til menneskelig lesbar tekst til nettleseren eller omvendt.
• “”Inneholder lenken til CSS -stilarket.
• “”Definerer en HTML -sidetittel som vises i nettleserens tittellinje.
• “”Lukking av elementet.
• “”Element inneholder innholdet som er synlig i nettleseren.
• “

  ”Element bestemmer overskriften i dokumentet.

• “

  ”Definerer et avsnitt.

• “”Er det lukkende taggen til kroppselementet.
• “”Er det lukkende taggen til HTML -rotelementet.

Produksjon

I utgangen over representerer den røde pilen tittelen, den blå pilen representerer overskriften, og den grønne pilen representerer avsnittet.

Hva er HTML -tagger?

Det er flere tagger som brukes til å utgjøre en HTML -side. Disse taggene er også kjent som HTML -elementer og er avgjør med en startkode, innhold i taggen og sluttkoden. Taggene er av to typer som er:

• Par tagger
• Tomme tagger

Eksempel 1: Hvordan bruke sammenkoblede tagger i HTML?

HTML -elementer som har en start- og nære tagger kalles sammenkoblede tagger. Noen eksempler på sammenkoblede tagger er nevnt nedenfor:

Overskriften

Avsnittet

Denne teksten er kursiv
En streik tekst

Disse elementene er skrevet inne i kroppselementet i HTML -filen.

Utgangen fra den ovennevnte koden er vist nedenfor:

Så resultatet av

Taggen er pekt av den blå pilen,

Tag er indikert med den grønne pilen, Tag er indikert med den rosa pilen, og den røde pilen peker på et resultat av taggen.

Eksempel 2: Hva er tomme tagger i HTML?

Noen HTML -tagger er kjent som tomme elementer fordi de består av bare startmerker, for eksempel
,

---

Tagger, og mer.

Hva er HTML -elementer og attributter?

HTML -elementene, noen ganger kjent som tagger, kan være assosiert med attributter. Disse attributtene er skrevet i startkoden og brukes til å legge til ytterligere informasjon til elementene. Attributter har navn og verdier.

Eksempel: HTML -sidestruktur

Nedenfor er et eksempel på en HTML -side:

• “”Element spesifiserer en divisjon eller komponent i et HTML -dokument.
• “klasse”Er attributtet som spesifiserer klassenavn for et element som skal brukes i CSS og JavaScript:

Etter at Div -beholderen er lagt til. Nå vil vi spesifisere en overskriftsdel ved å bruke følgende elementer:

• “”Elementet inneholder den innledende introduksjonsdelen.
• “”Er en ankerkode som oppretter en hyperkobling til HTML -filer.
• “href”Er attributtet med taggen som inneholder lenken til andre HTML -filer.
• “
• “
  ”Brukes til å legge til en uordnet liste i HTML -dokumentet, for eksempel en kuleliste.
  • “
  • ”Representerer et element i en liste:

  
  Logo
  
  

  Etter å ha lagt til overskriftselementet, legg til et divelement med klassenavnet "hoved-”Det holder bildet. Å plassere et bilde, en html “”Tag brukes tilknyttet attributtene:

  • “src”Er attributtet som spesifiserer banen til et bilde.
  • “alt”Attributt brukes til å spesifisere noen tekst som vises på skjermen i stedet for bildet hvis bildet ikke klarer å laste inn:

  
  
  

  Legg deretter til en div med klassenavnet "artikkel”. Det inneholder elementene som er oppført nedenfor:

  • “”Element spesifiserer selvforsynt og uavhengig innhold.
  • “

    ”Legges til for å inkludere overskriften.

  • “

    ”Element brukes til å spesifisere et avsnitt i HTML:

  
  

  
  

  Artikkeloverskrift

  
  

  Linuxhint er det beste nettstedet på nettet. Det er utviklet for utdanningsformål. Vi skriver artikler og lager videoer for å lære verden på nettet!

  
  

  
  

  Legg deretter til et bunntekstelement som følger:

  • “”Element legger til et bunntekst til HTML -dokumentet. Det inneholder normalt informasjon om copyright -data, lenker og om forfatteren.
  • “”Element spesifiserer den lille skriftstørrelsen:

  Så vi har lært om flere elementer og attributter som brukes i et HTML -dokument. Lagre endringene i filen og åpne den i nettleseren. Som et resultat vil websiden din se slik ut:

  La oss nå style vår webside ved hjelp av CSS.

  Stil "kropp" -element

  kropp
  Margin: 0;
  polstring: 0;
  Bokstørrelse: Border-Box;
  Font-Family: Verdana, Genève, Tahoma, Sans-Serif;
  

  Nedenfor er egenskapene som brukes på HTML -kroppsseksjonen:

  • “margin”Eiendom brukes til å legge til plass rundt elementet.
  • “polstring”Eiendom som brukes til å sette inn plass inne i elementets grense eller rundt innholdet i elementet.
  • “Bokstørrelse”Med verdien”grenseboks”Utvider dyrets bredde og høyde til grensekantene.
  • “Font-familie”Eiendom er satt med listen over verdier. Denne listen er gitt for å sikre at hvis nettleseren ikke støtter den første stilen, vil den andre bli brukt.

  Stil “container” div

  .container
  Maks bredde: 90%;
  Margin: 0 Auto;
  

  Her:

  • “Maks bredde”Eiendom spesifiserer elementets maksimale bredde.
  • “margin”Eiendom gir plass rundt elementet.

  Stil “Main” Div

  hoved
  Display: Flex;
  Justify-Content: Center;
  

  Hovedelementet er stylet med følgende egenskaper:

  • “vise”Eiendom Flex gjør elementets utforming fleksibel for varene i det.
  • “Justify-Content”Eiendom setter varens innretting av det fleksible elementet vertikalt.

  Stil "header" -element

  Overskrift
  Padding-top: 10px;
  Padding-Bottom: 10px;
  Bakgrunnsfarge: #FFFFFF;
  Display: Flex;
  Justify-Content: Space-mellom;
  Align-elementer: sentrum;
  

  Hodeelementet er dekorert med egenskapene som er nevnt nedenfor:

  • “Padding-top”Eiendom legger plassen øverst på elementet.
  • “Padding-Bottom”Eiendom setter plassen fra bunnen av elementet.
  • “bakgrunnsfarge”Eiendom tildeler elementets bakgrunnsfarge.
  • “vise”Eiendom med verdien”Flex”Vil gjøre elementet fleksibelt for varene i det.
  • “Justify-Content”Med verdien vil rommellom legge til plass mellom varene sine.
  • “Align-elementer”Eiendom setter varens justering horisontalt.

  Stil “ul” av “header” element

  header ul
  Listestil: Ingen;
  Display: Flex;
  

  UL -elementet i topptaggen brukes med disse stylingegenskapene:

  • “Listestil”Eiendom er satt til“ingen”Det vil fjerne den kulede stilen fra listen.
  • “vise”Eiendom vil fungere det samme som omtalt før.

  Stil “et” element

  header ul li a
  Tekstdekorasjon: Ingen;
  polstring: 10px;
  Farge: #000000;
  

  Her:

  • “tekstdekorasjon”Eiendom med verdien”ingen”Fjerner understreken fra teksten.
  • “polstring”Eiendom gir plass inne i grensen til elementet.
  • “farge”Eiendom spesifiserer skriftens farge.

  Stil “IMG” -element

  IMG
  objekt-fit: deksel;
  Bredde: 100%;
  Høyde: 300px;
  

  “img”Element er stylet ved å gi følgende egenskaper:

  • “Objekt-fit”Angir innholdet i det erstattede elementet.
  • “bredde”Eiendom definerer elementets bredde.
  • “høyde”Eiendom brukes til å definere elementets høyde.

  Stil "artikkel" -element

  artikkel
  Bredde: 450px;
  tekst-align: sentrum;
  Margin: Auto;
  

  Artikkelelementet er stylet med egenskapene som er forklart nedenfor:

  • “bredde”Eiendom brukes til innstilling av elementets bredde.
  • “Tekstalign”Definerer tekstjusteringen av elementet.
  • “margin”Eiendom genererer plass rundt elementet.

  Stil “bunntekst” -element

  bunntekst
  Padding-top: 20px;
  Padding-Bottom: 20px;
  bakgrunnsfarge: #000000;
  Farge: #FFFFFF;
  tekst-align: sentrum;
  

  “bunntekst”Element er stylet med egenskapene som er forklart nedenfor:

  • “Padding-top”Eiendom gir plass øverst i elementets innhold.
  • “Padding-Bottom”Eiendom brukes til å legge til det nederste rommet til elementets innhold.
  • “bakgrunnsfarge”Angir elementets bakgrunnsfarge.
  • “farge”Brukes til å spesifisere skriftfargen.

  Stil “H2” av “Article” -elementet

  Artikkel H2
  tekst-align: sentrum;
  

  H2 -elementet i artikkelen blir brukt med “Tekstalign”Eiendom med verdisenteret.

  Stil “P” av “Artikkel” -element

  Artikkel P
  Font-Family: Verdana, Genève, Tahoma, Sans-Serif;
  Font-størrelse: 20px;
  

  Her:

  • “Font-familie”Eiendom er satt med verdiene Verdana, Genève, Tahoma, Sans-serif. Denne listen er gitt for å sikre at hvis den første stilen ikke støttes av nettleseren, vil den andre bli brukt.
  • “skriftstørrelse”Setter størrelsen på skriften.

  Her er det siste utseendet på HTML -siden etter å ha brukt CSS -egenskapene:

  Det var all viktig informasjon relatert til strukturen til en HTML -side.

  Konklusjon

  Et HTML -dokument er en struktur på en webside. Flere elementer brukes i HTML -dokumenter som instruerer nettleseren hva de skal vises på websiden. Disse elementene kan være sammenkoblet med start- og sluttkodene eller kan være tomme, for eksempel
  ,

  ---

  Tagger, og mer. HTML -elementene blir anvendte stylingegenskaper ved bruk av CSS. For bedre forståelse har denne artikkelen forklart HTML -sidestrukturen ved hjelp av et praktisk eksempel.