Hva er HTML?

HTML står for Hyper Text Markup Language, som er et sett med forhåndsdefinerte elementer, også kjent som koder, som forteller en nettleser hvilket innhold som skal vises og hvordan det innholdet skal vises. Det betyr at jeg kan ta en tom tekstfil, legge til noen HTML-koder, og nettleseren vil vite hvordan jeg viser websiden min.

Hva er et merke?

En tag er en instruksjon for å fortelle nettleseren hvordan den skal vise bestemt innhold på skjermen. Noen ganger kan utviklere referere til koder som elementer. Her er et eksempel på hva en tag med tekst inne.

Denne koden er kjent som en topptekst. H-en i taggenavnet lar oss og nettleseren vite at vi jobber med en overskrifttagg. Den som følger h angir størrelsen på overskriften som blir brukt. I dette tilfellet er 1 den største standardteksten du kan ha vist i nettleseren. Utgangen til denne taggen i nettleseren vil vise Hello World!

Hva er en attributt?

Et attributt er en tilleggsverdi som kan konfigurere en tag eller som kan justere atferden til taggen. Her er et perfekt eksempel på hvordan en tagg ser ut med et attributt lagt til

Legg til Pizza

Verdien av ID-attributtet kan være hva du vil at den skal være, selv om den ikke kan ha noen plass i seg. Det andre attributtet er klasseattributtet. Klasseattributtet kan ta flere verdier, som kan være hva du vil at de skal være.

Global attributt

Global attributt kan settes på alle tagger. La oss gå over de fire mest brukte globale attributtene.

  • id: Først er ID-attributtet. Dette gir ingen visuell endring i selve taggen. Det brukes mest til JavaScript og styling, med CSS (Cascading Style Sheets). ID-attributtverdien må være unik på en gitt side. Det betyr at ingen to tagger kan ha samme verdi i en ID
  • class: class attribute ligner på id-taggen, bortsett fra at verdien til attributtet kan gjentas flere ganger på en gitt side. Du finner disse brukt mest med CSS og noen ganger med JavaScript.
  • stil: stilattributt brukes for Inline CSS. Det bør unngås om mulig.
  • title: title gir en identifikasjon, eller en verktøytips av sortering, for taggen. Når musen har svevet over en tag, hvor tittelen har vist.

For eksempel

Velkommen!

Block Level Element vs Inline Element

Følgende er attributtene til Block level element og Inline element.

Blokknivåelement

  • Tar opp hele bredden på foreldrebeholderen.

Inline Element

  • Tar opp det nåværende rommet som finnes i.

Her er en grunnleggende illustrasjon.

Dette grønne området representerer overordnet beholder. I vårt tilfelle er det nettleservinduet. Nettbredden på nettleseren, vår overordnede kode, vil være bredden på blokkenivåelementet.

Disse rosa områdene representerer elementene eller taggene på blokknivå. Som du ser tar de hele bredden på foreldrebeholderen. Dette betyr at eventuelle tagger må starte på neste linje.

Disse tre neste blå områdene er Inline-koder. Som du ser er de plassert side om side, og tar bare den nødvendige bredden som trengs for innholdet de har. Dette vil være mer fornuftig når vi ser disse taggene i aksjon

Ulike grunnleggende HTML-tagger

La oss lære de forskjellige HTML-kodene.

1) Merk - DOCTYPE

DOCTYPE forteller nettleseren hva slags fil som skal åpnes. Siden vi koder i HTML5. HTML5 er den siste versjonen av HTML Markup-språket, vår DOCTYPE er ekstremt enkel. Legg merke til, det er ingen lukkekode.

DOCTYPE er akkurat som en vanlig tagg og starter med en brakett og så legger vi inn utropstegn, og deretter skriver vi DOCTYPE. Vi har plass og så skriver vi inn html. Denne taggen forteller i utgangspunktet nettleseren, hei, disse dokumentene må serveres som HTML.

2) Merk - html

HTML-koden, også kalt rotelementet, følger DOCTYPE-koden. Denne taggen kan ha normale globale attributter pluss attributt kalt manifest. HTML-koden kan bare brukes en gang på en HTML-side.

Alt HTML relatert er nestet i denne taggen. Dette betyr at alle taggene våre vil være plassert mellom åpningen og lukkingen av HTML-kodene.

3) Tagg - hode

Hodelappen gir generell informasjon om websiden som vises. En individuell tagg legges til i hodetaggen, som lar nettleseren kjenne til visse detaljer, for eksempel tittelen på siden, forfatteren av siden og annen slik informasjon.

Ingenting i denne hodemerken vil vises på websiden. Noe informasjon vises imidlertid i selve nettleserapplikasjonen, for eksempel fanetittelen. Det er standard globale attributter som er tilgjengelige for denne taggen.

4) Tag - body

Body-taggen lar nettleseren vite hva den skal vises på siden. Inne i kroppen er koden der vi vil plassere alt innholdet vårt, for eksempel koder og tekst. Alt som er plassert på kroppen, vises på websiden.

Body-taggen er plassert etter head taggen inne i HTML-taggen. Det er bare en kroppsmerke per side. Body-taggen kan ha standard globale attributter.

5) Tag - span

Den første taggen vår er span-koden. Denne taggen er en generell Inline-beholder. Det betyr at den ikke har noen standardstil knyttet til den. Du ønsker å bruke denne taggen hvis du hadde behov for å gruppere tekster du vil holde sammen på linje.

6) Merk - s

Paragrafkoden, eller p-koden, brukes når du vil holde et avsnitt med tekst sammen. Dette elementet er blokkenivåelement, noe som betyr at det tar opp bredden på foreldrebeholderen. Den ideelle bruken vil være når du har mye tekst å vise. Bare globale attributter er tillatt for dette elementet.

7) Merk - div

Divisjons taggen, eller ofte kjent som div tag, er en generisk blokkbeholder. Dette betyr at du kan gruppere mange tagger for å utgjøre en del av nettstedet ditt. Denne taggen er globale attributter.

8) Tag - sub

Abonnementskoden, eller underkoden, gjør at den neste kan ligge under normal tekstlinje. Det er et Inline-element som bruker globale attributter. Et perfekt eksempel på bruk ville være å få de to i H2O til å virke lite.

Eksempel: H20

9) Tag - sup

Superscript-taggen, eller sup-taggen, som er et inline-element, gjør at teksten kan være over normal tekstlinje. Et eksempel vil være når du arbeider med en matematisk ligning. Legg merke til at de to er høyere enn resten av teksten i denne ligningen.

Eksempel: E = mc 2

Dette er en global attributt.

10) Merk - u

  • U står for understrekingen. Dette vil understreke all tekst i de åpne og lukkede taggene. Det er et inline element og global attributt.

11) Merk - em

Em-taggen står for vektlegging. I dette tilfellet vil ideen om å vektlegge hvilken som helst tekst gjøre teksten ser kursiv eller skrå ut. Dette innebygde elementet brukes når du vil uttrykke en viss vekt på deler av teksten. Dette er en global attributt.

12) Tagg - sterk

Hvis du noen gang vil gjøre noen tekst fet, bruker du den sterke koden. Denne inline-koden er plassert rundt teksten du ønsker å gjøre fet. Akkurat som vektkoden. Den sterke merkelappen gir mer vekt på tekst på nettstedet ditt.

13) Tag - br

BR-taggen står for en pause. Det er noen få koder som ikke trenger en lukkende kode. Det er verken blokkerings- og inlineelement. Det er et globalt attributt.

14) Tagg - hr

Hr-koden trenger heller ikke en lukkekode for å fullføre den. Hr-taggen, som står for den horisontale regelen, vil opprette en linje på websiden. Det er et blokknivåelement. Det er et globalt attributt.

Nested Elements / Tags

  • Hekkelagger
  • Hvor en tag er inne i en annen tag

Eksempel

16) Tag - li

Li-koden som står for en listeelement er koden som blir nestet. Inne i li-koden vil du legge alle typer innhold som er en liste.

17) Tag - ol

Ol-taggen, som står for den bestilte listen, er en beholder med det nestede li-tagget. Du vil aldri se disse to taggene, li- eller ol-taggen, av seg selv. Siden dette er en liste over ordrer som betyr ved siden av hvert element i listen vil det være en verdi.

Som standard bruker listen numre.

Attributter

Globalt, reversert, start, skriv (a, A, I, i)

18) Tagg - ul

Ul-taggen, eller den uordnede listen, er en beholder for den nestede li-koden akkurat som ol-taggen. Men i motsetning til ol-taggen, som viser en tallverdi ved siden av hvert av elementene i listen, gir denne ul-koden bare kulepunkter ved siden av listeelementene i listen.

19) Merk - h1, h2, h3, h4, h5, h6

Det er seks totale koder. Hver av disse med sitt eget nummer som starter fra 1 til 6. H1-taggen og alle de andre header-kodene gir en kort beskrivelse av en seksjon av tekst eller innhold. Disse taggene er globale attributter.

20) Merkelapp - a

Koden, eller ankeretiketten, er en populær tagg fordi den oppretter lenker til andre sider på et nettsted, og den kan opprette lenker til nettsteder utenfor. Koden er et inline element og har en mengde attributter foruten de globale attributtene som er knyttet til den.

Hei Verden!

Det ene ekstraattributtet vi vil nevne er href. Dette står for Hypertext Reference. Det viktigste å huske er at href er attributtet der vi oppgir banen slik at vi kan koble til en annen side eller et annet nettsted.

Attributtet, href. Og vi vil alltid legge den avsluttende taggen vår. Link tilbake til nettstedet Google.com.

Produksjon

21) Merkelapp - img

Img-koden, eller bildekoden, gir oss muligheten til å vise bilder på siden vår.

Nå vil du merke i eksemplet her at bildekoden ikke har en lukkekode. Dette er en av de håndfull kodene. Men i motsetning til br-koden og hr-koden, betegner vi slutten av denne koden med et skråstrek. Noen kan faktisk referere til dette som den korte måten å skrive en avslutningskode.

Src-attributtet og alt-attributtet. Src, eller kildeattributtet, som du ser i eksemplet, er påkrevd.

Nå er verdien av dette attributtet banen til bildet vi ønsker å vise. Stien kan være enten en absolutt bane eller en relativ bane. Det andre attributtet er alt attributtet. Dette står for et alternativ. Altverdien skal beskrive bildet. Alt-teksten vises i nettleseren som nedenfor.

Konklusjon - Grunnleggende HTML-tagger

HTML er bokstavelig talt utrolig enorme fagområder, som man antar å ha. Når du har klart å få til så mye, selv om du er mye mer enn perfekt i stand til front-end evolusjonskraft. Du må være mye mer sikker på å dele opp en webside i elementelementene deres, og etter den koden assosiert med HTML og CSS.

Anbefalte artikler

Dette har vært en guide til grunnleggende HTML-tagger. Her diskuterer vi også Hva er en tag? og forskjellige grunnleggende HTML-tagger, sammen med betydningen av et attributt ?. Du kan også se på følgende artikler for å lære mer -

  1. Introduksjon til HTML
  2. Lær begrepet XHTML
  3. Hva er HTML-attributtene?
  4. Bruksområder for HTML
  5. Introduksjon av HTML-listestiler
  6. HTML-rammer
  7. HTML-blokker

Kategori:

Nettutviklingsverktøy