Articles

MarkoSaric

denne artikel er en one-stop-shop for dine HTML-koder. Her er listen over HTML-tags og koder, der oftest bruges til at oprette indhold. Gem listen og brug den som reference, når du skriver dine blogindlæg og sider.

HTML i Gutenberg editor

er en af de bedste blogging platforme. Millioner af mennesker og mærker bruger det til at skabe flotte sider.

denne vejledning gælder både for den hostede og den hostede version af . Se forskellen mellem WordPress.com eller WordPress.org.

5.0 med den nye Gutenberg editor udgivet i December 2018 har dramatisk forbedret og lettet den måde, du arbejder med HTML-tags på dine blogindlæg og sider.

Hvordan viser du HTML-kode i Gutenberg redigerede indlæg? Du tilføjer blot” kode ” – blokken og skriver din kode. Det vil vise koden til dine besøgende.

Hvordan redigerer du dine Gutenberg-indlæg ved hjælp af HTML? Du skal blot klikke på” Rediger som HTML ” i indstillingsmenuen for den bestemte blok, du gerne vil redigere.

du kan også tilføje “Classic” – blokken eller “Classic Editor” – plugin ‘ et for at få den tidligere EDITORREDAKTØR, som jeg beskriver længere nede i dette indlæg.

klassisk Editor: Hvad er forskellen mellem visuel og tekst?

du har to redigeringsmuligheder, når du skriver et blogindlæg eller en side i den klassiske editor. Du kan bruge standardvisningen “visuel” eller “tekst” – tilstanden.

i visuel tilstand kan du se dit indhold som det er. Den visuelle tilstand kaldes den visuelle tilstand, som står for præcis, hvad den visuelle tilstand gør: hvad du ser, er hvad du får.

du ser dit indhold på den måde, dine besøgende vil se det i deres bro.Serere, og du har enkle knapper til at hjælpe dig med at redigere. De fleste bruger denne” visuelle ” posteditor, når de opretter deres indhold.

i teksttilstand kan du se koden og HTML-tags. Denne teksttilstand giver dig mulighed for at tilføje enhver HTML-kode til et af dine blogindlæg eller sider. Den HTML-baserede teksteditor ser skræmmende ud og er ikke så populær blandt begyndere.

men hvad nu hvis du ved, hvordan du koder eller vil have lidt mere kontrol over layout og struktur, når du opretter dine indlæg eller sider? Du skal bruge” tekst ” editoren.

Hvordan redigerer jeg HTML?

så hvordan kommer du til HTML-teksteditoren? Klik på fanen “Tekst” i dit admin-indlæg eller sideskrivningsafsnit. Det er i teksteditoren, at du tilføjer og redigerer alle dine HTML-tags.

hvordan tilføjes HTML-kode til et indlæg eller en side?

du kan blot skrive eller indsætte en HTML-kode direkte i din “tekst” editor. Prøv det med en af de mest anvendte tags fra min liste nedenfor.

kopier det her på siden, indsæt det i teksteditoren og “forhåndsvisning” dit indlæg eller din side for at se, hvordan dine besøgende vil se det.

nogle gange sker det, at koden bliver fjernet, når du skifter fra tekst til visuelle tilstande.

vær forsigtig og kontroller, at dette ikke er sket med dig. Eller prøv kun at holde dig til teksteditoren, hvis du planlægger at skrive kode for ikke at støde på dette problem.

for dem, der er komfortable med kodning, kan du endda deaktivere den “visuelle” editor. Gå ind i” brugere “i din navigationsmenu, klik på” din profil “og vælg”Deaktiver den visuelle editor, når du skriver”.

Kopier og indsæt mellem Google Docs, Microsoft-ord og ordtryk

5.0-udgivelsen har gjort det nemt og nemt at kopiere ethvert indhold fra Google Docs eller Microsoft-ord og indsætte det i dine indlæg og sider.

dette var ikke altid let. Når du arbejder med HTML i den klassiske Editor, kan du bemærke nogle gibberish tegn nogle gange.

dette kan ske, hvis du kopierer/indsætter fra Microsoft. En nyttig kilde, når du indsætter HTML-kode fra ord til editoren, kan posteres.

Kopier/indsæt din HTML fra ord (eller en anden kilde) i værktøjet for at få en venlig og ren version af koden, som du derefter kan indsætte i dit indhold.

Hvordan viser jeg HTML-koder på mine blogindlæg som normal tekst?

hvad med, hvis du ville indsætte og vise HTML-tags og andre koder i dit indlæg, så dine besøgende kan se dem som normal tekst?

lidt ligesom jeg gør her i min artikel? Du bruger stadig teksteditoren, men du pakker din kode sådan:

<code><div class="header"></code> 

for en pænere visning af kode

der er nogle plugins, der kan hjælpe dig med denne proces og også give dig mulighed for at redigere layoutet og den måde, koden præsenteres på din blog for dine besøgende.

jeg anbefaler følgende to. Syntakshighlighter Evolved er den mere populære mulighed, mens Pastacode er den, der fungerer bedst for dem, der bruger sidebyggere, når de designer en blog.

mest anvendte HTML koder og tags

Indsæt et billede

<img src="https://markosaric.com/essential-html-tags-wordpress/Image-URL" alt="Description of the image">

gør billedet klikbart til en ny destination

<a href="Destination-URL"><img alt="Description of the image" src="https://markosaric.com/essential-html-tags-wordpress/Image-URL" /></a>

Indsæt et link

Bemærk, at ankerteksten er den synlige del af dit link. Det er ordet eller sætningen, som dine besøgende klikker på for at komme til den side, du linker til.

<a href="Destination-URL">Anchor text</a>

lav linket nofølg

til SEO-formål skal du muligvis lave noget af dit link nofølg. Sådan gør du:

<a href="Destination-URL" rel="nofollow">Anchor text</a>

gør linket åbent i et nyt bro.ser-vindue

<a href="Destination-URL" target="_blank">Anchor text</a>

Link til et specifikt afsnit på en lang side

disse kaldes sidespring. Dine besøgende kan klikke på et link og blive flyttet et sted længere nede eller op i artiklen.

dette er især nyttigt for de længere guider, som du vil opdele i forskellige kapitler ved hjælp af indholdsfortegnelsen.

den første del af oprettelsen af et sidespring er at tildele en sektion (eller et mål), som du vil linke til.

Placer denne kode til det afsnit på din side, du vil linke til. Den anden del er faktisk at linke til det tildelte afsnit fra din introduktion eller din indholdsfortegnelse.

<a></a><a href="#Specific-section">Anchor text</a>

dette fungerer også, hvis du vil linke til et bestemt afsnit på din side fra en anden artikel på din blog. Du kan indsætte et link til dette mål: https://yourblog.com/yourpost/#Specific-section.

Sådan fungerer også disse “tilbage til toppen” – links. Tildel et sektionsnavn øverst i dit indlæg, og inkluder en “gå til toppen” – knap i bunden af dit indlæg, der linker til det øverste afsnit.

Opret fremtrædende titler og underpositioner

<h1>This is a heading H1</h1> <h2>This is a heading H2</h2> <h3>This is a heading H3</h3>

Indsæt et linjeskift

<p>This is<br>a paragraph</br> with a line break</p>

Opret et nyt afsnit

<p>This is the first paragraph</p> <p>This is the second paragraph</p>

lav en punktliste

<ul> <li>list item with a bullet point</li><li>another item with a bullet point</li></ul>

lav en nummereret liste

<ol><li>list item with number 1</li><li>list item with number 2</li></ol>

fremhæv tekst i et indlæg med gul (eller en hvilken som helst anden farve) baggrund

<span style="background-color:yellow;">Your text</span>

tildel nummeret til et element i din nummererede liste

<ol start="7"><li>List item number 7</li></ol>

lav en bogstavliste

<ol type="A"><li>Item A</li><li>Item B</li><li>Item C</li><li>Item D</li></ol>

lav en romersk talliste

<ol type="I"><li>Item I</li><li>Item II</li><li>Item III</li><li>Item IV</li></ol>

centrer din tekst

<center>to be centered</center>

gør din tekst fed

<strong>to be bold</strong>

gør din tekst kursiv

<em>to be italic</em>

Skift farve på teksten

<span style="color: #000000;">Your text</span>

Indsæt et Blokcitat

<blockquote>Your quote</blockquote>

Opret en tabel

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.