Er du en blogger? Så får du fordel af at kende en HTML-kode

Forvirret over HTML-kode? Du er ikke den eneste.


Jeg skal indrømme det. Da jeg begyndte at skrive til internettet, vidste jeg zilch om HTML-kode. Og jeg skal indrømme det igen. Jeg ved stadig ikke meget.

Jeg har dog fundet ud af, at en lille smule HTML-viden kan gøre tingene meget lettere, når jeg skriver til internettet.

lær sprog for hypertekstmarkering

Selvfølgelig, jeg ved ikke, hvordan man opretter et websted, men jeg ved hvordan man justerer små komponenter, og når jeg står over for et redigeringssystem, der kræver HTML-kode – som du sandsynligvis også vil køre over – jeg ved nok til at formatere min tekst korrekt.

Vil du fjerne den forvirring og lære lidt om HTML-kodning? Lad os komme igang.

Hvad er HTML-kode?

Du har set det rundt, men du ved sandsynligvis ikke, hvad alt det HTML-gibberish betyder.

Det står for Hypertext Markup Language. HTML er et standardiseret system, der bruges til formatering af dokumenter. De anvendte koder – kaldet markup tags – kan formatere skrifttype, tekststørrelse, farve, hyperlinks, afsnit og mere.

Webbrowsere læser HTML og bruger tags til at bestemme, hvordan indholdet skal vises. Et eksempel på et tag er det, der opretter fed skrift, der ser sådan ud:

Dette er en fed skrift.

På siden ser det sådan ud:

Dette er en fed skrift.

Der har været mange versioner af HTML gennem årene, men fra oktober 2014 er HTML5 det standardiserede markeringssprog på nettet.

Hvorfor det er godt for bloggere at vide

Selvom du muligvis kan komme forbi uden at kende HTML som blogger og udføre lidt snyd i stedet – f.eks. At bruge et program, der konverterer din formatering til HTML-sprog, kan det at vide et par grundlæggende tags virkelig hjælpe, mens du blogger.

Her er nogle situationer, hvor jeg personligt har fundet det nyttigt:

  • Når gæsteblogging vil nogle steder have din forfatterbio skrevet i HTML-formatering. Med lidt viden kan du tilføje links og kursiv, hvor det er nødvendigt.
  •  Når noget ser væk, kan du se på HTML på siden og se, hvad der forårsager problemet.
  •  I online netværk kan du bruge HTML-tags til at formatere kommentarer til blogindlæg og forumkommentarer.
  •  Hvis du lærer nok om HTML, kan du begynde at lære lidt om CSS og lave mindre justeringer til dit websted uden at ansætte en designer.

Almindelige koder Bloggere bruger

Før vi hopper ind for dybt, skal du vide, at HTML-tags er nøgleord, der er indkapslet i vinkelplader. Disse tags kommer parvis, og teksten mellem starttagget og slutkoden er det, der vil blive påvirket. Sluttagget er skrevet det samme som starttagget, men det bruger en skråstreg før tagnavnet.

Lyder forvirrende? Det er lettere, hvis jeg giver et par eksempler. Lad os se på nogle af de almindelige HTML-tags, du skal kende som blogger.

Skeletal tags

Først kommer skelet-tags. Dette er dem, du ikke nødvendigvis vil bruge, men det hjælper med at kende dem. Disse tags lægger grundlaget for dokumentet, derav udtrykket “skelet-tags”. De læses af websiden, men oversættes ikke til visuelle elementer.

Alligevel er det godt at vide det. Har du for eksempel nogensinde arbejdet med et program, der beder dig om at indsætte en kode i dit websteds “hoved” -afdeling? Du kan finde det med en smule HTML-viden. Så her er et par skeletmærker, du skal vide:

  • : Dette afsnit beskriver HTML-dokumentet.
  •   : Dette afsnit indeholder oplysninger om dokumentet.
  •   : Dette giver dokumentets titel.
  •   : Dette beskriver visuelle sideelementer. Det er i kropsdelen af ​​siden, at bloggere ofte laver HTML-justeringer, når det er nødvendigt. Resten af ​​de nævnte tags findes i dokumentets krop.
  •  

    : Dette tag beskriver et afsnit.

Husk, at din sidetekst er indkapslet i start- og slutkoder. Her er et eksempel:

Dette er afsnitstekst.

Overskrift tags

Overskrifttags bruges til at vise dokumenthierarki. Du bruger sandsynligvis allerede overskrifter i din blogs formatering, men forskellen mellem overskrifter 1-6 betyder mere end bare tekststørrelse og fontvægt. De formidler også en følelse af hierarki til webbrowsere og søgemaskine-bots.

Udgiftsområde 1 skal bruges til dokumentets hovedoverskrift, f.eks. Titlen på dit blogindlæg. Udgiftsområde 2 skal være sekundære oplysninger, f.eks. Dine primære underhoved. Brug overskrift 3 til underunderskrifter osv. Gennem overskrift 6. Disse tags ser sådan ud:

Her er et eksempel på, hvordan det oversættes:

Dette er udgiftsområde 5

Dette er udgiftsområde 5

Inline tekstmærker

Inline tekstmærker er dem, du vil bruge til at formatere tekst inden for tags på blokniveau som

og

. Her er eksempler på, hvad du ofte bruger.
  • : Dette definerer fremhævet tekst, som de fleste browsere kursiverer.
  •   : Dette definerer stærkt fremhævet tekst, som de fleste browsere er fed.
  •   : Dette formaterer et tilbud.
  •   : Dette viser slettet tekst, som ofte oversættes som en gennemgang som denne.

Liste tags

Som du har bemærket, har jeg brugt flere kuglelister i hele dette blogindlæg. Men hvordan gjorde jeg det? Her er de tags, du har brug for at vide:

  • : Dette definerer et listeelement.
  •  
      : Dette tag går rundt på en uordnet liste, der vises som kuglepunkter.
    •  
        : Dette tag går rundt på en ordnet liste, der vises som numre.

    Her er et eksempel på, hvordan HTML-koden for en ordnet liste ser ud:

    1. Liste 1
    2. Listepost 2
    3. Listepost 3

    Sådan vises det på siden:

    1. Liste 1
    2.  Listepost 2
    3.  Listepost 3

    Billed- og linkmærker

    Lad os tage et hurtigt kig på, hvordan du indsætter billeder og links, før vi skiller os ud. Det er måske lettere at se koden og derefter udfylde dine oplysninger, når du bruger tags:

    Link

    DIN ANKERTEKST

    Fjern ikke anførselstegn omkring din URL. Indsæt blot din URL mellem anførselstegnene. Din ankertekst er den tekst, der vises på siden.

    Lad os se på et eksempel. Hvis jeg ville linke til en tidligere artikel om Hosting Kingdom, ville koden se sådan ud:

    Skal du registrere et domæne via din webhost?

    Linket vises sådan på siden:

    Skal du registrere et domæne via din webhost?

    Billede

    Koden til et billede ser sådan ud:

    Bemærk, at dette er et ikke-containertag, så det har ikke slutmærket, men du har brug for src-attributten. Du kan tilføje ekstramateriale til dette tag, f.eks. Alternativ tekst eller en størrelsesdefinition. Det ser sådan ud:

    ”YOUR

    Igen, sørg for, at du ikke fjerner anførselstegn.

    Bemærk: Du kan se forskellige koder, der kan bruges til den samme ting. For eksempel har jeg set , , og tags, der bruges til at udtrykke fed tekst, selvom de kan vises forskelligt på forskellige browsere.

    HTML behøver ikke være så forvirrende, som det ser ud. Hvis du vil øve HTML og få en bedre fornemmelse af det, skal du bruge interaktive websteder som Code Academy, og lad os vide, hvordan det går i kommentarafsnittet.

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map