HTML er grunnlaget for stort sett alt på internett. Det er hjørnesteinen som internett-innhold er bygget på, og det har vært i flere tiår. Uten en solid forståelse AV HTML, vil alt du gjør Med WordPress eller annen webdesign og utvikling bli stunted. Heldig for deg, det er en rekke grunnleggende HTML-koder som Hver WordPress-bruker fra nybegynner til veteran bruker nesten daglig. La oss bryte dem ned og få deg opp til fart.
Abonner På Vår Youtube-Kanal
HVA ER HTML?
HER er den raske versjonen: HTML står for hypertext markup language, noe som betyr at DET ikke er et programmeringsspråk. HTML befaler ikke datamaskinen din til å kjøre ting via skript. Snarere tar det teksten du har på siden din, og den markerer den opp. Kursiv, fet, justering, størrelse og så videre. HTML gir deg også muligheten til å inkludere bilder og lenker, OG MED HTML5 manipulerer den nyeste versjonen dem og teksten på spennende nye måter.
HTML-koden finnes i flagg og er ganske lett å lese. EN ENKEL HTML-side kan se slik ut:
når gjengitt i en nettleser, vil det se slik ut:
SOM du kan se, ER HTML ikke så forvirrende. Faktisk, selv om du aldri har sett NOEN HTML-kode før, vedder jeg på at du kan finne ut hva hver av disse kodene betyr bare ved kontekst. Med det ut av veien, la oss se på de vanligste, grunnleggende HTML-kodene du vil bruke gjennom hele din karriere på nettet.
Fet
når du pakker inn teksten i< strong > – kodene, ber du nettleseren om å utheve teksten. Du kan også bruke bare < b >, men Med Google og andre søkemotorer som har en preferanse for semantisk koding, er du tryggere med < sterk>
You can make <strong>text bold</strong> by using this tag.
Kursiv
< Em > står for vekt, og det er den semantiske måten å bruke kursiv I HTML. Du kan også bruke <i > for å gjøre det.
You can put <em>text in italics<em> by using this tag.
Understreking
det samme gjelder for< u > og understreking. Generelt får denne svært lite bruk fordi koblinger er understreket og understreket tekst som du ikke kan klikke på, gir en dårlig brukeropplevelse.
You can <u>underline</u> by using this tag.
Overskrifter
Pass på at du bruker Dem i hierarkisk rekkefølge. Google vil at du skal nest overskrifter, så sørg for å bruke < h2> bare under < h1>, ikke under < h3 >.
mens de fleste sider bare har en enkelt < h1 >, straffer Google deg ikke lenger for å ha mer. Bare husk at du bruker en< h1 > tilbakestiller nestingen for siden (eller i det minste den delen av siden).
<h2>H2 is the most commonly used header tag.</h2>
alle overskriftene FOR HTML-elementer på denne siden er h2.
Bilde
Sette inn bilder er en AV DE mest nyttige tingene SOM HTML gjør. Det brøt internett ut av sine brutalistiske stiler og på veien til hvor den er i dag. Alt du trenger å gjøre er Å ha NETTADRESSEN til bildet du vil ha, og sett en enkelt <img src> (står for image source tag. Som dette:
<img src="https://elegantthemes.com/picture.png" alt="a picture from elegant themes">
Vær oppmerksom på at du ikke trenger å lukke bildetaggen, og anførselstegnene er ikke nødvendig for at bildet skal vises. Mange bruker dem fortsatt til å gjøre koden mer lesbar.
<alt> attributtet er teksten som vises for tilgjengelighetsformål, og den er også indeksert av søkemotorer. For personer med skjermlesere og andre enheter er alternativ tekst helt nødvendig for å bruke internett. Det er alltid en god praksis å ha alternativ tekst for bildene dine.
Lenker
Ok. Link. Det er mye som skjer med linker. Eller rettere sagt, det er mye du kan gjøre med linker. På sitt mest grunnleggende, vil du sette den sammen med en < en href > tag. < a >indikerer at det er en lenke, og < href> er bokstavelig talt hypertekstreferansen (NETTADRESSEN) til hvor du kobler.
<a href="http://elegantthemes.com/divi">A link to our Divi page, and this is the anchor text.</a>
du lukker lenkekoden med bare en </a>, og du kan bruke hvilken som helst tekst du vil ha mellom der. Det vil være den klikkbare lenken selv og kalles ankertekst.
det gjør på siden slik: en lenke til Vår Divi-side, og dette er ankerteksten.
I Tillegg kan DU også neste HTML-kode. Du kan gjøre et bilde klikkbart ved å sette inn en < img src > tag mellom linkflaggene.
<a href="http://elegantthemes.com"><img src="https://elegantthemes.com/picture.png"""></a>
Du kan se hvordan en klikkbar bildelink gjør det her:
Flere Koblingsattributter
du kan også inkludere ganske mange forskjellige attributter til koblinger slik at de oppfører seg på bestemte måter (for eksempel å skjule NETTADRESSEN din fra å være en referrer eller for å åpne lenken i et nytt vindu). Noen av de mest nyttige for deg vil være
- rel indikerer en slags forhold for lenken og dens mål. Slik som noreferrer for å hindre at henvisningstrafikk spores tilbake til deg.
- target forteller nettleseren hvor du skal åpne linken: _blank vil åpne den i en tom fane, for eksempel.
- nofollow går sammen med rel og forteller søkemotorer at du ikke ønsker å passere på noen link juice til målet området. Dette er bra når du kobler til kontroversielt innhold og så videre. Det holder også folk fra å spamme koblinger i kommentarene dine, og gjør det slik at innholdet ditt kan ses som upartisk, siden du ikke gir noen bonus til å bli omtalt annet enn eksponering og klikk.
Det er flere, men det er de du sannsynligvis vil se oftest.
Gjennomstreket Tekst
hvis du er som meg, trenger du noen ganger å lage en vits ved å bruke slemme ord. Eller kanskje du må merke ting av en liste(eller slette, som selve koden sier). Eller noe annet som du trenger å ha en linje som går gjennom tekst for.
det er når du bruker < del > rundt teksten du vil slå gjennom. For noen mennesker er dette utrolig vanlig kode, mens andre kanskje aldri bruker den. Uansett, det er lett å huske.
You can use <del>this code</del> for strikethrough text in HTML.
Lister
Lister er en annen stor del av webinnhold i disse dager. Ikke bare gir de deg tonnevis av hvitt rom og bryter opp tekstvegger, men de lar deg også organisere tankene dine i fordøyelige stykker.
det finnes to typer lister du kan lage med grunnleggende HTML-koder. Bestilte lister som er nummerert 1, 2, 3 og så videre. Uordnede lister bruker punktmerking eller symboler (avhengig av områdeutformingen) i stedet for tall.
du pakker inn hver liste med enten <ul> eller <ol> for henholdsvis uordnede eller ordnede lister. Og hvert element på listen skal pakkes inn i < li >.
og disse kodene gjengis som dette for å vise forskjellen:
- dette er en del av en uordnet liste.
- Så er dette.
- Slik setter du opp en ordnet liste
- dette er en lenke i en liste.
- og denne lenketeksten er fet, men denne delen er ikke.
Du kan også neste andre koder i listene, også. Så du kan fet tekst, sette inn lenker, og så videre.
Block Quotes
du vil på et tidspunkt i WordPress-karrieren din måtte sitere andres nettsted. Det er her <blockquote > kommer inn. Bare omgir hvilken tekst du kopierer/limer inn (og attributt) med <blockquote > åpne og lukke koder, og du er god til å gå.
<blockquote>This text will appear with special styling to indicate that it's a quote./blockquote>
Slik ser det ut på en side:
denne teksten vises med spesiell styling for å indikere at det er et sitat.
Avsnitt
Avsnitt HTML er litt rart. Avhengig AV CMS og byggmester du bruker, kan det automatisk gjengi hvert linjeskift som et eget avsnitt. WordPress gjør dette når DU skriver INN HTML. Men ikke alt gjør det. Så hvis du trenger å holde avsnittene dine separate og ikke ha en vegg med tekst, pakk hver i < p >. Nettleseren vil da vite for å vise hver blokk med tekst som et eget avsnitt i stedet for en kontinuerlig blokk. Som standard ignorerer nettlesere linjeskift med mindre annet er sagt.
<p>This is my first paragraph.</p><p>This is my second paragraph.</p>
Linjer Og Linjeskift
du vil kanskje ha andre separasjoner mellom avsnitt og inndelinger. Det er da du kan bruke <hr> og <br/> kodene.
< hr> setter inn en separatorlinje uansett hvor den er. Mange bruker dette til å skille widgets i en sidebar eller store deler av en nettside.
< br/ > – taggen er et linjeskift. Du kan bruke< br/>midt i en< p > for å bryte en linje uten å gå inn i et nytt avsnitt(for blokkstyling og organisasjons skyld). < br / > er en selvlukkende tag, noe som betyr at ingen innhold kan være innenfor den. Dette er angitt med skråstrek på slutten av koden.
mens du kan bruke den til å bryte opp tekst og avsnitt ved å sette dem inn der du vil ha pauser, er det ikke en god praksis å komme inn på, og etter hvert som DU blir mer avansert MED HTML og CSS og JavaScript, må du målrette avsnittselementet for å gjøre visse ting. Du kan lese mer om forskjellen her.
Innpakning
HTML er absolutt nødvendig for å samhandle med internett. Alle bruker Dem på samme måte, enten du kommer i gang med webutvikling og design eller en veteran fra dagene Før JavaScript var en ting. VI bruker fortsatt GRUNNLEGGENDE HTML-koder for å kjøre grunnlaget for alle våre nettsteder. Uansett hvor fancy nettstedet er eller hvor avansert dets funksjoner, når en kobling bryter eller ting er dristige som ikke burde være, vil du fortsatt grave rundt for å se om< en href > eller < sterke> – kodene gjør det bra.
Hva er dine mest brukte grunnleggende HTML-koder i disse dager?
artikkel utvalgt bilde av enterlinedesign/. com