Hvad er HTML?

HTML står for Hyper Text Markup Language, som er et sæt af foruddefinerede elementer, også kendt som tags, der fortæller en browser, hvilket indhold der skal vises, og hvordan det indhold vises. Det betyder, at jeg kan tage en tom tekstfil, tilføje nogle HTML-tags, og browseren vil vide, hvordan jeg viser min webside.

Hvad er et mærke?

Et tag er en instruktion til at fortælle browseren, hvordan det skal vise bestemt indhold på skærmen. Undertiden refererer udviklere til tags som elementer. Her er et eksempel på, hvad et mærke med tekst inde.

Dette tag er kendt som et overskrifttag. H i tagnavnet lader os og browseren vide, at vi arbejder med et overskrifttag. Den, der følger h, angiver størrelsen på den header, der bruges. I dette tilfælde er 1 den største standardtekst, du kan have vist i browseren. Outputet af dette tag i browseren viser Hello World!

Hvad er en attribut?

En attribut er en ekstra værdi, der kan konfigurere et tag, eller som kan justere tagets opførsel. Her er et perfekt eksempel på, hvordan et tag ser ud med en attribut tilføjet

Tilføj pizza

Værdien af ​​id-attributten kan være alt, hvad du vil have den til, selvom den ikke kan have nogen plads i sig. Den anden attribut er klasseattributten. Klasseattributten kan tage flere værdier, som kan være, hvad du vil have dem til at være.

Global attribut

Global attribut kan indstilles på alle tags. Lad os gennemgå de fire mest almindeligt anvendte globale attributter.

  • id: Først er id-attributten. Dette tilføjer ingen visuel ændring af selve tagget. Det bruges mest til JavaScript og styling med CSS (Cascading Style Sheets). Værdien for id-attributten skal være unik på en given side. Det betyder, at ingen to tags kan have den samme værdi i en id
  • klasse: klasseattribut ligner id-tagget, medmindre attributten af ​​attributten kan gentages flere gange på en given side. Du finder disse brugt mest med CSS og undertiden med JavaScript.
  • stil: stilattribut bruges til Inline CSS. Det bør om muligt undgås.
  • title: title giver en identifikation eller en værktøjstip af sortering for tagget. Når musen er svævet hen over et mærke, hvor titlen har vist.

For eksempel

Velkommen!

Block Level Element vs Inline Element

Følgende er attributterne for Block level element og Inline element.

Blokniveauelement

  • Optager hele bredden af ​​deres overordnede beholder.

Inline Element

  • Optager det aktuelle rum, der findes i.

Her er en grundlæggende illustration.

Dette grønne område repræsenterer overordnet beholder. I vores tilfælde er det browservinduet. Browsens bredde, vores overordnede tag, vil være bredden på blokniveauelementet.

Disse lyserøde områder repræsenterer vores elementer eller tags på blokniveau. Som du kan se, optager de hele bredden af ​​den overordnede beholder. Dette betyder, at alle tags skal starte på den næste linje.

Disse næste tre blå områder er Inline tags. Som du kan se, at de er placeret side om side, tager de kun den nødvendige bredde, der er nødvendig for det indhold, de har. Dette giver mere mening, når vi ser disse tags i handling

Forskellige grundlæggende HTML-tags

Lad os lære de forskellige HTML-tags.

1) Tag - DOCTYPE

DOCTYPE fortæller browseren, hvilken type fil der åbnes. Da vi koder i HTML5. HTML5 er den seneste version af HTML Markup sprog, vores DOCTYPE er ekstremt enkel. Bemærk, der er intet afsluttende tag.

DOCTYPE er ligesom et almindeligt tag og starter med et beslag, og derefter lægger vi udråbstegn, og derefter skriver vi DOCTYPE. Vi har plads, og derefter skriver vi html. Dette tag fortæller dybest set browseren, hej disse dokumenter skal serveres som HTML.

2) Tag - html

HTML-mærket, også kaldet rodelementet, følger DOCTYPE-mærket. Dette tag kan have de normale globale attributter plus attribut kaldet manifest. HTML-tagget kan kun bruges én gang på en HTML-side.

Alt HTML-relateret er indlejret inde i dette tag. Dette betyder, at alle vores tags vil være placeret mellem åbningen og lukningen af ​​HTML-tags.

3) Tag - hoved

Hovedtaggen indeholder generelle oplysninger om den webside, der vises. Et individuelt tag tilføjes inde i hovedmærket, der lader browseren kende bestemte detaljer, f.eks. Titlen på siden, forfatteren af ​​siden og andre sådanne oplysninger.

Intet i dette headtag vil blive vist på websiden. Nogle oplysninger vises dog i det aktuelle browserprogram, f.eks. Fanen. Det er standard globale attributter er tilgængelige for dette tag.

4) Tag - krop

Body-mærket lader browseren vide, hvad der skal vises på siden. Inde i kroppen er mærket, hvor vi vil placere alt vores indhold, f.eks. Tags og tekst. Alt, der er placeret inde i kropsmærket, vises på websiden.

Body-mærket placeres efter hovedmærket inde i HTML-mærket. Der er kun et kropsmærke pr. Side. Body-mærket kan have globale globale attributter.

5) Tag - span

Vores første tag er span-tagget. Dette tag er en generisk Inline-container. Det betyder, at den ikke har nogen standardstil tilknyttet den. Du ønsker at bruge dette tag, hvis du har brug for at gruppere tekster, du vil holde sammen inline.

6) Tag - s

Paragrafmærket eller p-mærket bruges, når du vil holde et afsnit af tekst sammen. Dette element er blokniveauelement, hvilket betyder, at det tager bredden af ​​sin overordnede beholder. Den ideelle anvendelse ville være, når du har en masse tekst at vise. Kun globale attributter er tilladt for dette bestemte element.

7) Tag - div

Opdelingsmærket, eller almindeligt kendt som div-mærket, er en generisk blokbeholder. Dette betyder, at du kan gruppere en masse tags sammen for at udgøre en del af dit websted. Dette tag er globale attributter.

8) Tag - sub

Subskriptmærket eller subtaggen tillader, at det næste er under den normale tekstlinie. Det er et Inline-element, der bruger globale attributter. Et perfekt eksempel på brug ville være at få 2 i H2O til at se lidt ud.

Eksempel: H20

9) Tag - sup

Superscript-taget eller sup-tagget, som er et inline-element, gør det muligt for teksten at være over den normale tekstlinie. Et eksempel ville være, når man beskæftiger sig med en matematisk ligning. Bemærk, at 2 er højere end resten af ​​teksten i denne ligning.

Eksempel: E = mc 2

Dette er en global attribut.

10) Tag - u

  • U står for understregning. Dette vil understrege enhver tekst inden for de åbne og lukkede tags. Det er et inline element og global attribut.

11) Tag - em

Em-mærket står for vægt. I dette tilfælde vil ideen om at fremhæve enhver tekst få teksten til at se kursiv eller skråt. Dette inline-element bruges, når du vil udtrykke en vis vægt på dele af din tekst. Dette er en global attribut.

12) Tag - stærk

Hvis du nogensinde vil gøre nogen tekst fed, bruger du det stærke tag. Dette inline-tag placeres omkring den tekst, du gerne vil gøre fed. Ligesom vægtmærket. Det stærke tag giver ekstra betydning for teksten på dit websted.

13) Tag - br

BR-mærket står for en pause. Der er et par tags, der ikke har brug for et lukningskode. Det er hverken blok og inline-element. Det er en global attribut.

14) Tag - hr

Hr-tagget behøver heller ikke et lukningskode for at fuldføre det. Hr-tagget, der står for den vandrette regel, opretter en linje på websiden. Det er et blokniveauelement. Det er en global attribut.

Indlejrede elementer / mærker

  • Indlejrings tags
  • Hvor et tag er inde i et andet tag

Eksempel

16) Tag - li

Li-mærket, der står for en liste, er det mærke, der bliver indlejret. Inde i li-mærket lægger du enhver type indhold, der er en liste.

17) Tag - ol

Ol-tagget, der står på den bestilte liste, er en container med det indlejrede li-tag. Du vil aldrig se disse to tags, li- eller ol-tagget af sig selv. Da dette er en liste over ordrer, der betyder ved siden af ​​hvert element på listen, vil der være en værdi.

Som standard bruger listen numre.

Egenskaber

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

18) Tag - ul

Ul-tagget eller den ikke-sorterede liste er en beholder til det indlejrede li-tag, ligesom ol-tagget. Men i modsætning til ol-tagget, der viser en talværdi ved siden af ​​hvert af elementerne på listen, giver dette ul-tag bare kuglepunkter ved siden af ​​listepunkterne på listen.

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

Der er seks samlede header tags. Hver af disse med deres eget nummer, der starter fra 1 ned til 6. H1-tagget og alle de andre header-tags giver en kort beskrivelse af et afsnit af tekst eller indhold. Disse tags er globale attributter.

20) Tag - a

Mærkatet eller ankermærket er et populært tag, fordi det opretter links til andre sider på et websted, og det kan oprette links til eksterne websteder. Mærket er et inlineelement og har en overflod af attributter udover de globale attributter, der er knyttet til det.

Hej Verden!

Den ene yderligere attribut, vi vil nævne, er href. Dette betyder Hypertext Reference. Den vigtigste ting at huske er, at href er den attribut, hvor vi leverer stien, så vi kan linke til en anden side eller et andet websted.

Attributten, href. Og vi vil altid sætte vores afsluttende tag. Link tilbage til Google.com-webstedet.

Produktion

21) Tag - img

Img-tagget eller billedmærket giver os muligheden for at vise billeder på vores side.

Nu vil du i eksemplet her bemærke, at billedtagget ikke har et lukningskode. Dette er en af ​​de håndfulde tags. Men i modsætning til br-mærket og hr-mærket, betegner vi afslutningen af ​​dette tag med en skråstreg. Nogle kan faktisk henvise til dette som den kortfattede måde at skrive et afsluttende tag på.

Src-attributten og alt-attributten. Src eller kildeattributten, som du ser i eksemplet, er påkrævet.

Værdien af ​​denne attribut er nu stien til det foto, vi gerne vil vise. Stien kan enten være en absolut sti eller en relativ sti. Den anden attribut er alt-attributten. Dette er et alternativ. Altværdien skal beskrive billedet. Alt-teksten vises i browseren som nedenfor.

Konklusion - Grundlæggende HTML-tags

HTML er bogstaveligt talt utroligt store emneområder, som man antager at have. Når du har formået at få så meget, selvom du er meget mere end perfekt i stand til front-end evolutionskraft. Du skal være meget mere sikker på at dele en webside ned i deres elementelementer og efter den kode, der er knyttet til HTML og CSS.

Anbefalede artikler

Dette har været en guide til grundlæggende HTML-tags. Her diskuterer vi også Hvad er et mærke? og forskellige grundlæggende HTML-tags sammen med betydningen af ​​en attribut ?. Du kan også se på de følgende artikler for at lære mere -

  1. Introduktion til HTML
  2. Lær konceptet med XHTML
  3. Hvad er HTML-attributterne?
  4. Anvendelser af HTML
  5. Introduktion af HTML-listestiler
  6. HTML-rammer
  7. HTML-blokke

Kategori:

Webudviklingsværktøjer