forfattere har mulighed for at oprette sider og indlæg i en visuel Editor eller en teksteditor. Mens den visuelle Editor gør et rimeligt godt stykke arbejde med sine værktøjslinjeindstillinger og let redigeringsmiljø, giver brugen af teksteditoren maksimal fleksibilitet til, hvordan man organiserer indhold.

lad mig forklare ikke bare hvorfor du vil bruge teksteditoren (i stedet for den visuelle Editor), men hvor nemt det kan være at bruge.

hvorfor foretrækker du måske teksteditoren?

• dit indhold vil give mere mening for dine læsere og søgemaskiner.
• du behøver kun at kende et par HTML-tags for at gøre teksteditoren meget nyttig.
• du kan anvende CSS stil egenskaber direkte til din HTML-kode.

Hvad Sker Der, Når Du Bruger Den Visuelle Editor?

når du tilføjer kopi, medier eller links til din visuelle Editor, tilføjer du virkelig HTML til din side eller dit indlæg. Det hele foregår under hætten.

Ikke sikker på hvad jeg mener? Prøv det her.

Tilføj noget kopi i den visuelle Editor. Vælg derefter fanen Tekst. Hvad du vil se på er HTML. Ligesom med den visuelle Editor kan du redigere din HTML-kode direkte med teksteditoren.

faktisk kan du gøre meget mere med teksteditoren, end du kan med den visuelle Editor. Dette gør arbejdet i teksttilstand ikke kun mere produktivt, men også mere tilfredsstillende. Du vil være i stand til mere præcist markup dit indhold, som vil gavne dine læsere og øge din SEO indsats.

HTML er omtrent lige så ligetil som det bliver. Hver hjemmeside, herunder dem, der genereres af , bruger den.

at lære HTML vil have fordele langt ud over at bruge det med ordtryk!

hvad er HTML?

kendt som lingua franca på internettet, hypertekst Markup Language (HTML) er et system, der giver forfattere mulighed for at tildele indhold mening. Ved hjælp af HTML-elementer (bedre kendt som tags) kan du definere indhold som afsnit, overskrifter, lister, links og andre strukturer.

HTML er meget ligesom grammatik.

det har intet at gøre med, hvordan en hjemmeside ser ud, eller hvordan den er stylet. Spørgsmålet om hjemmeside design-layout, typografi og farve – er taget op med CSS (Cascading Style Sheets), sproget i Internet design stil.

HTML udvikles af verdens Netkonsortiet (V3C). Den nyeste version er HTML5.

de Tags, du mest sandsynligt vil bruge

HTML er et containeriseret markeringssystem. For hvert åbent tag er der et matchende lukkemærke.

for eksempel, for det vigtigste indhold på en side eller et afsnit af en side, du vil bruge en Overskrift 1 tag som dette.

<h1 >alt om HTML< / h1 >
det åbne tag er<h1 > og beholderen er lukket med< /h1>

tilsvarende er her, hvordan et afsnit er markeret:

<p > for flere år siden foreslog en klient og en god ven, at jeg lærte ordtryk. På det tidspunkt var jeg imod enhver form for CMS. Lidt vidste jeg, at jeg ville komme til at elske det og lære det til mange mennesker i nye klasseværelser.< / p>

alt du skal gøre er at skrive dit indhold i teksteditoren, tilføje dine tags enten som du går, eller efter du har skrevet i kopien.

her er en forklaring på de mest almindelige tags, du vil bruge, når du skriver HTML. De er overskriften, listen, linket, grupperingen og et par forskellige tags.

overskrift TAGS

<h1></h1>

<h2></h2>

<h3></h3>

• der er også H4 -, h5-og h6-overskriftsmærker, som i praksis sjældent bruges.
• Brug aldrig en overskrift tag med det formål at ændre skriftstørrelse.

LIST TAGS

du kan oprette 3 typer lister med HTML. De 2 mest populære er bestilte og uordnede lister.

en uordnet liste bruges, når rækkefølgen af varerne ikke er vigtig.

<ul>

<li>blomster < / li>

<li>grønsager < / li>

<li> træer< / li>

</ul>

• blomster
• grøntsager
• træer

en ordnet liste bruges, når rækkefølgen af varerne er relevant.

< ol>

<li> Californien< / li>

<li> Italien < / li>

<li> Florida < / li>

</ol>

1. Californien
2. Florida

( i dette eksempel er ordren relevant og bestemt af de største befolkninger i amerikanske stater.)

Bemærk: lister kan også indlejres for at oprette et hierarki af listeelementer. Dette er svært at gøre, når du bruger den visuelle Editor.

LINK TAG

du kan omdanne tekst eller et billede til et link ved at indpakke teksten eller billedet inde i et anker (link) tag. Mens syntaksen til oprettelse af et link altid er den samme (<a href=”url”>linktekst</a>), er der 2 meget almindelige måder at gøre det på.

for et link til en:

<a href=”http://domain.com/this-is-the-page-title”>link til en Ordtryksside</a>

for et link til en hvilken som helst side eller ressource, ikke bare en Ordtryksside, brug:

<a href= ” http://domain.com/about.html”>link til en HTML-side</a>

Bemærk: Der er faktisk en tredje vej. Du kan bruge den specielle måde, hvorpå du opretter links med følgende syntaks:

<et href=”indeks.php?page_id=356 “>link til en side på din side</a

i dette tilfælde skal du kende siden eller post-id ‘ et for den side, du linker til på din side. (Hver side eller post har et unikt id-nummer).

gruppering af TAGS

teknisk set er der ikke sådan noget som “gruppering af tags”, men det er den bedste måde at beskrive et sæt HTML-tags, der indeholder andre elementer. Formålet med disse tags er at mere præcist beskrive betydningen af dit indhold.

for eksempel kan tagget <header> bruges til at definere den del af din side, der indeholder førende oplysninger som denne:

<header>

<h1>en hovedlinie< / h1>

<img src= “url til billedfil”>

<p > et afsnit af oplysninger efter overskriften og billedet, som logisk holder sammen som en gruppe af oplysninger.< / p>

</header>

her er nogle meget almindelige gruppering tags

<main>

<section>

<article>

<aside>

<header>

<footer>

<nav>

<div>

andre TAGS
udover tagget finder du disse tags meget nyttige, når du arbejder med teksteditoren.

<img src="url of image file">

<br>

<!-- hidden code or info here -->

<blockquote> or <q>

mens disse tags vil få dig en lang vej, her er et par ressourcer til at hjælpe dig.

Christ du behøver kun 10 HTML-Tags (tutorial)
list HTML-Elementreference i Alfa-rækkefølge
list HTML-Elementreference

reglerne

skønheden i HTML er, at der kun er nogle få regler at følge, og de er nemme at huske.

* HTML er store og små bogstaver

store, små eller blandede bogstaver – skriv HTML som du vil. Den almindelige praksis er små bogstaver.

* for hvert åbent Tag skal der være et tæt Tag

der er undtagelser fra dette, men for at gøre det rigtigt nemt, skal du vane med at lukke alle åbne tags.

* Tags lukkes i omvendt rækkefølge, hvor de åbnes inden for en blok

dette kan være lidt svært at forstå, så her er et eksempel.

<p>her er et <strong>afsnit med <a href=”url her”>et link</a></strong> inde og noget af teksten fremhæves.</p>

Bemærk ordren: < p > <stærk><a>….< / a > < / stærk> < / p>

* nogle elementer har ikke et afsluttende Tag

Tags som < br>og < img > har ingen afsluttende tag, da der ikke er nogen grund til en.

* brug HTML korrekt og ikke til at Style din side

brug f.eks. ikke< br > tags, når du har en liste. Eller brug ikke< tabel > tags til at oprette et gitter til layout.

Tekstredigeringsværktøjslinjen

fordi jeg finder det effektivt at skrive kode i teksteditoren, bruger jeg generelt ikke værktøjslinjen. Men hvis du kommer i gang med HTML, kan du finde nogle af værktøjerne nyttige som en måde at lære dig selv noget HTML på. I sidste ende vil du indse, at der er flere tags, som du kan bruge til korrekt markering af dit indhold, end hvad værktøjslinjen tillader.

HTML Plugins

før eller senere vil du bemærke, at hvis du opretter et afsnit i den visuelle Editor, vil du ikke se en< p > tag indpakning omkring din kopi, når du ser det i teksteditoren. Lad det ikke genere dig. Du vil stadig generere et< p > tag, når kopien vises på din side.

hvis du har dette eller andre problemer med din kode, kan du bruge disse plugins.

Rediger altid i HTML

dette garanterer, at når du går til at oprette eller redigere side eller sende indhold, åbnes din editor altid som en teksteditor og ikke en visuel Editor. Dette kan være meget nyttigt, da ordtryk kan fjerne dine tags under nogle omstændigheder, hvor den visuelle Editor bruges.

Bevar HTML Editor Markup Plus

hvis du har problemer med at få tags fjernet, kan dette være din løsning.

HTML Editor syntaks Highlighter

dette er et vidunderligt plugin, der gør den intetsigende teksteditor til en farvekodet overflødighedshorn. Det kan også skifte til en sort baggrund og større skrifttyper. Det er bedst at bruge dette plugin med fuldskærmsindstillingen.

Bemærk: Jeg har ikke testet to eller flere af disse plugins på samme tid, så inkompatibiliteter kunne eksistere.

hvordan kortkoder passer ind i billedet

kortkoder er, hvad mange plugins bruger til at tilføje en formular, oprette kolonner eller tilføje en anden funktion til en side eller et indlæg. Det er en nem måde at tilføje kode som HTML, javascript, CSS og PHP uden at skulle vide noget om disse sprog.

brug kortkoder i teksteditoren, ligesom du ville gøre i den visuelle Editor.

til de uindviede kan kortkoder se ud som HTML, men de er det ikke.

du kan enten indsætte en kortkode på denne måde, hvis du f.eks. tilføjer en kontaktformular med det populære plugin Contact Form 7,

eller du kan bruge den sådan til et plugin,

indhold til venstre side af kolonnen

indhold til højre side af kolonnen

som opretter to kolonner på en side.

denne kortkode ligner HTML med et åbent og tæt tag, men det er ikke

tilføjelse af CSS-Styling ved hjælp af teksteditoren

du kan give CSS-stilegenskaber til det indhold, du tilføjer i teksteditoren. Dette kan ikke gøres med standard visuel Editor.

med teksteditoren kan det gøres på 2 måder.

en måde er at tilføje et id eller en klasseattribut til et HTML-element som i dette eksempel:

<p id=”bly” > dette er hovedafsnittet i mit indlæg.< / p>

derefter i din stil.css-fil du vil tilføje stilegenskaberne for #lead. Måske noget som dette:

#bly

{font-vægt:fed;

tekstjustering:center;

farve:#f00;}

den anden måde er at tilføje inline styling. (Den bedste tilgang er dog at holde din HTML og CSS adskilt som i ovenstående scenario.) Du kan tilføje inline styling som denne:

<p style=”font-family:arial,helvetica,sans-serif” >skrifttypen for dette afsnit er Arial.< / p>

bemærk: dette tilsidesætter enhver regel for skrifttypefamiliestil for dette afsnit, der kan være til stede i en ekstern fil eller i beholderen< hoved > på siden.

konklusion

teksteditoren giver dig total kontrol over, hvordan du vil formatere din side eller sende indhold. Du kan bruge ethvert HTML-tag, ikke kun dem i værktøjslinjen teksteditor. Resultatet vil være indhold, der er lettere at læse og forstå af mennesker og søgemaskinespiders. Det kan tage lidt tid at vænne sig til at skrive HTML, men i sidste ende finder du det meget tilfredsstillende.

forfatter Bio

Bud Kraus [email protected] er en erfaren instruktør og underviser for enkeltpersoner og grupper. Han arbejder også på steder for små virksomheder. http://joyofwp.com