HTML er grundlaget for stort set alt på internettet. Det er hjørnestenen, som internetindhold er bygget på, og det har det været i årtier. Uden en solid forståelse af HTML vil alt, hvad du gør med HTML eller anden hjemmeside design og udvikling blive forkrøblet. Heldigvis er der en masse grundlæggende HTML-koder, som hver bruger fra Begynder til veteran bruger næsten dagligt. Lad os bryde dem ned og få dig op i fart.
Abonner på vores Youtube-kanal
Hvad er HTML?
her er den hurtige version: HTML står for hypertekst markup language, hvilket betyder, at det ikke er helt et programmeringssprog. HTML befaler ikke din computer til at køre ting via script. Det tager snarere den tekst, du har på din side, og den markerer den. Kursiv, fed, justering, størrelse og så videre. HTML giver dig også mulighed for at inkludere billeder og links, og med HTML5 manipulerer den nyeste version dem og teksten på spændende nye måder.
HTML-kode er indeholdt i Flag og er ret let at læse. En simpel HTML-side kan se sådan ud:
når det gengives i en bro. ser, ville det se sådan ud:
som du kan se, er HTML ikke så forvirrende. Faktisk, selvom du aldrig har set nogen HTML-kode før, ved jeg, at du kan finde ud af, hvad hver af disse tags betyder bare efter kontekst. Med det ude af vejen, lad os se på de mest almindelige, grundlæggende HTML-koder, som du vil bruge i hele din karriere på nettet.
fed
når du pakker din tekst ind i< strong > tags, fortæller du bro.sereren at Fed teksten. Du kan også bruge simpelthen < b >, også, men med Google og andre søgemaskiner, der har en præference for semantisk kodning, er du sikrere med <strong>
You can make <strong>text bold</strong> by using this tag.
kursiv
< Em > står for vægt, og det er den semantiske måde at bruge kursiv i HTML. Du kan også bruge < i > til at gøre det.
You can put <em>text in italics<em> by using this tag.
understregning
det samme gælder for < u> og understregning. Generelt får denne meget lidt brug, fordi links er understreget og understreget tekst, som du ikke kan klikke på, giver en dårlig brugeroplevelse.
You can <u>underline</u> by using this tag.
overskrifter
sørg for at bruge dem i hierarkisk rækkefølge. Google vil have dig til at rede overskrifter, så sørg for at bruge <h2> kun under <h1>, ikke under <h3>.
mens de fleste sider kun har en enkelt< h1 >, straffer Google dig ikke længere for at have mere. Bare husk at bruge en <h1> nulstiller din nesting til siden (eller i det mindste den del af siden).
<h2>H2 is the most commonly used header tag.</h2>
alle overskrifter til HTML-elementer på denne side er h2.
billede
indsættelse af billeder er en af de mest nyttige ting, som HTML gør. Det brød internettet ud af dets brutalistiske stilarter og på vejen til, hvor det er i dag. Alt du skal gøre er at have URL ‘ en til det ønskede billede, og sæt en enkelt <img src> (står for image source tag. Sådan her:
<img src="https://elegantthemes.com/picture.png" alt="a picture from elegant themes">
Bemærk, at du ikke behøver at lukke billedmærket, og anførselstegnene er ikke nødvendige for, at billedet kan vises. Mange mennesker bruger dem stadig til at gøre koden mere læsbar.
attributten< alt > er den tekst, der vises til tilgængelighedsformål, og den indekseres også af søgemaskiner. For personer med skærmlæsere og andre enheder er alt-tekst absolut nødvendigt for at bruge internettet. Det er altid en bedste praksis at have alternativ tekst til dine billeder.
Links
Okay. Link. Der sker meget med links. Eller rettere, der er meget, du kan gøre med links. På deres mest grundlæggende, vil du sætte det sammen med en <en href> tag. < a >angiver, at det er et link, og < href> er bogstaveligt talt hypertekstreferencen (URL ‘ en) til, hvor du linker.
<a href="http://elegantthemes.com/divi">A link to our Divi page, and this is the anchor text.</a>
du lukker linkkoden med blot en </a>, og du kan bruge enhver tekst, du vil have imellem der. Det vil være selve det klikbare link og kaldes ankertekst.
det gengiver på siden sådan: et link til vores Divi-side, og dette er ankerteksten.
derudover kan du også rede HTML-kode. Du kan gøre et billede klikbart ved at indsætte et <img src> tag mellem linkflagene.
<a href="http://elegantthemes.com"><img src="https://elegantthemes.com/picture.png"""></a>
du kan se, hvordan et klikbart billedlink gengiver her:
flere Linkattributter
du kan også inkludere en hel del forskellige attributter til links, så de opfører sig på bestemte måder (f.eks. Nogle af de mest nyttige for dig vil være
- rel angiver en slags forhold til linket og dets mål. Såsom noreferrer for at forhindre, at henvisningstrafik spores tilbage til dig.
- target fortæller brugeren, hvor linket skal åbnes: _blank åbner det i en tom fane, for eksempel.
- nofølg følger med rel og fortæller søgemaskiner, at du ikke ønsker at videregive nogen linkjuice til målstedet. Dette er godt, når du linker til kontroversielt indhold og så videre. Det forhindrer også folk i at spamme links i dine kommentarer og gør det sådan, at dit indhold kan ses som upartisk, da du ikke giver nogen bonus til at blive vist andet end eksponering og klikgennemgange.
der er flere, men det er dem, du sandsynligvis vil se oftest.
gennemtrukket tekst
hvis du er som mig, har du nogle gange brug for at lave en vittighed ved hjælp af ramte ord. Eller måske skal du markere ting fra en liste (eller slette, som koden selv siger). Eller noget andet, som du skal have en linje, der løber gennem tekst til.
det er, når du bruger< del > omkring den tekst, du vil slå igennem. For nogle mennesker er dette utroligt almindelig kode, mens andre måske aldrig bruger den. Uanset hvad, det er let at huske.
You can use <del>this code</del> for strikethrough text in HTML.
lister
lister er en anden stor del af indholdet i disse dage. Ikke kun giver de dig masser af hvidt rum og opdeler tekstvægge, men de giver dig også mulighed for at organisere dine tanker i fordøjelige stykker.
der er to slags lister, du kan lave med grundlæggende HTML-koder. Bestilte lister, der er nummereret 1, 2, 3 og så videre. Uordnede lister bruger kugler eller symboler (afhængigt af dit site design) i stedet for tal.
du pakker hver liste med enten< ul >eller< ol > for henholdsvis uordnede eller ordnede lister. Og hvert element på listen skal pakkes ind i < li >.
og disse koder gør som dette for at vise forskellen:
- dette er en del af en uordnet liste.
- sådan er det også.
- Sådan opretter du en ordnet liste.
- dette er et link i en liste.
- og denne linktekst er fed, men denne del er ikke.
du kan også rede andre koder i listerne, også. Så du kan fed tekst, indsætte links osv.
blok citater
du vil på et tidspunkt i din karriere nødt til at citere en andens hjemmeside. Det er her < Blokcitat> kommer ind. Bare Omgiv den tekst, du kopierer / indsætter (og attribut) med <Blokcitat> åbning og lukning af tags, og du er god til at gå.
<blockquote>This text will appear with special styling to indicate that it's a quote./blockquote>
Sådan ser det ud på en side:
denne tekst vises med speciel styling for at indikere, at det er et tilbud.
afsnit
afsnit HTML er lidt underligt. Afhængigt af CMS og builder, du bruger, kan det automatisk gengive hver linjeskift som et separat afsnit. Dette gør du, når du skriver HTML. Imidlertid, ikke alt gør det. Så hvis du har brug for at holde dine afsnit adskilt og ikke have en tekstvæg, skal du pakke hver enkelt ind <p>. Bro.ser ved derefter at vise hver tekstblok som et separat afsnit i stedet for en kontinuerlig blok. Som standard ignorerer bro.Serere linjeskift, medmindre andet er fortalt.
<p>This is my first paragraph.</p><p>This is my second paragraph.</p>
linjer og linjeskift
du vil måske have andre adskillelser mellem dine afsnit og sektioner. Det er, når du kan bruge <hr> og <br/> tags.
< hr > indsætter en separatorlinie, uanset hvor den er. Mange bruger dette til at adskille kontroller i en sidebjælke eller store dele af en hjemmeside.
tagget < br/ > er et linjeskift. Du kan bruge <br/> midt i en <p> til at bryde en linje uden at gå ind i et nyt afsnit (til blok styling og organisations skyld). < br / > er et selvlukkende tag, hvilket betyder, at intet indhold kan være inden i det. Dette er angivet med skråstreg i slutningen af koden.
mens du kan bruge den til at opdele tekst og afsnit ved at indsætte dem, hvor du vil have pauser, er det ikke en god praksis at komme ind på, og når du bliver mere avanceret med HTML og CSS og JavaScript, skal du målrette afsnitselementet for at gøre visse ting. Du kan læse mere om sondringen her.
indpakning
HTML er absolut nødvendigt for at interagere med internettet. Alle bruger dem på samme måde, uanset om du kommer i gang med internetudvikling og design eller en veteran fra dagene før JavaScript var en ting. Vi bruger stadig de grundlæggende HTML-koder til at køre grundlaget for alle vores sider. Uanset hvor fancy siden er, eller hvor avancerede dens funktioner, når et link går i stykker eller ting er dristige, der ikke burde være, vil du stadig grave rundt for at se, om <a href> eller <strong> tags klarer sig okay.
Hvad er dine mest anvendte grundlæggende HTML-koder i disse dage?
artikel featured billede af enterlinedesign/. com