HTML is de basis van vrijwel alles op het internet. Het is de hoeksteen waarop internet-inhoud is gebouwd, en dat is het al tientallen jaren. Zonder een solide begrip van HTML, alles wat je doet met WordPress of een ander webdesign en ontwikkeling zal worden belemmerd. Gelukkig voor u, is er een hoop basis HTML-codes die elke WordPress gebruiker van beginner tot veteraan gebruikt op een bijna-dagelijkse basis. Laten we ze uit elkaar halen en je op de hoogte brengen.
abonneer u op ons Youtube-kanaal
Wat is HTML?
hier is de snelle versie: HTML staat voor hypertext markup language, wat betekent dat het niet echt een programmeertaal is. HTML niet de opdracht van uw computer om dingen uit te voeren via script. Integendeel, het neemt de tekst die je hebt op uw pagina, en het markeert het op. Cursief, vet, uitlijning, grootte, enzovoort. HTML geeft je ook de mogelijkheid om afbeeldingen en links op te nemen, en met HTML5, de nieuwste versie manipuleert ze en de tekst in spannende nieuwe manieren.
HTML-code is opgenomen in vlaggen en is vrij gemakkelijk te lezen. Een eenvoudige HTML pagina zou er ongeveer zo uit kunnen zien:
wanneer weergegeven in een browser, zou dat er zo uitzien:
zoals je kunt zien, is HTML niet zo verwarrend. In feite, zelfs als je nog nooit een HTML-code eerder hebt gezien, Ik wed dat je kunt achterhalen wat elk van deze tags betekent gewoon door context. Met dat uit de weg, laten we eens kijken naar de meest voorkomende, basis HTML-codes die u zult gebruiken tijdens uw carrière op het web.
vet
wanneer u uw tekst in de tags <strong> wikkelt, vertelt u de browser de tekst vet te zetten. U kunt ook gewoon <b> gebruiken, maar met Google en andere zoekmachines die een voorkeur hebben voor semantische codering, bent u veiliger met <strong>
You can make <strong>text bold</strong> by using this tag.
cursief
<Em> staat voor nadruk, en het is de semantische manier om cursief te gebruiken in HTML. U kunt hiervoor ook <i> gebruiken.
You can put <em>text in italics<em> by using this tag.
onderstrepen
hetzelfde geldt voor <u> en onderstrepen. In het algemeen, deze krijgt zeer weinig gebruik omdat links zijn onderstreept en onderstreepte tekst die je niet kunt klikken op geeft een slechte gebruikerservaring.
You can <u>underline</u> by using this tag.
Headers
zorg ervoor dat ze in hiërarchische volgorde worden gebruikt. Google wil dat u nestkoppen gebruikt, dus zorg ervoor dat u <h2> alleen gebruikt onder <h1>, niet onder <h3>.
terwijl de meeste pagina ‘ s slechts een enkele <h1> hebben, bestraft Google u niet langer voor het hebben van meer. Houd er rekening mee dat het gebruik van een <h1> uw nesting reset voor de pagina (of tenminste dat gedeelte van de pagina).
<h2>H2 is the most commonly used header tag.</h2>
alle headers voor HTML-elementen op deze pagina zijn h2.
afbeelding
afbeeldingen invoegen is een van de meest nuttige dingen die HTML doet. Het brak het internet uit zijn brutalistische stijlen en op de weg naar waar het nu is. Het enige wat u hoeft te doen is de URL van de afbeelding die u wilt, en zet een enkele <img src> (staat voor image source tag. Zoals dit:
<img src="https://elegantthemes.com/picture.png" alt="a picture from elegant themes">
merk op dat u de afbeeldingstag niet hoeft te sluiten en dat de aanhalingstekens niet nodig zijn om de afbeelding weer te geven. Veel mensen gebruiken ze nog steeds om de code leesbaarder te maken.
het kenmerk <alt> is de tekst die wordt weergegeven voor toegankelijkheidsdoeleinden en wordt ook geïndexeerd door zoekmachines. Voor mensen met schermlezers en andere apparaten is alt-tekst absoluut noodzakelijk om het internet te gebruiken. Het is altijd een beste praktijk om alternatieve tekst voor uw afbeeldingen.
Links
OK. Link. Er is veel aan de hand met links. Of liever gezegd, Er is veel dat je kunt doen met links. Op de meest eenvoudige manier zal je het samenvoegen met een <a href> tag. De <a> geeft aan dat het een link is, en de <href> is letterlijk de hypertekstverwijzing (de URL) naar waar u linkt.
<a href="http://elegantthemes.com/divi">A link to our Divi page, and this is the anchor text.</a>
u sluit de koppelingscode met gewoon een < / a>, en u kunt elke gewenste tekst tussen daar gebruiken. Dat zal de klikbare link zelf zijn en wordt anchor text genoemd.
het maakt op de pagina als volgt: een link naar onze Divi pagina, en dit is de ankertekst.
Daarnaast kunt u ook HTML-code nestelen. U kunt een afbeelding klikbaar maken door een <img src> tag tussen de linkvlaggen in te voegen.
<a href="http://elegantthemes.com"><img src="https://elegantthemes.com/picture.png"""></a>
u kunt hier zien hoe een klikbare afbeeldingsverwijzing wordt weergegeven:
meer Link attributen
u kunt ook een aantal verschillende attributen toevoegen aan links zodat ze zich op bepaalde manieren gedragen (zoals het verbergen van uw URL om een referrer te zijn of om de link in een nieuw venster te openen). Enkele van de meest bruikbare voor u zijn
- rel geeft een soort relatie aan voor de link en zijn doel. Zoals noreferrer om te voorkomen dat verwijzingsverkeer naar u wordt getraceerd.
- doel vertelt de browser waar de link moet worden geopend: _blank zal het openen in een leeg tabblad, bijvoorbeeld.
- nofollow gaat samen met rel en vertelt zoekmachines dat u geen link juice wilt doorgeven aan de doelsite. Dit is goed bij het linken naar controversiële inhoud en ga zo maar door. Het voorkomt ook dat mensen links spammen in uw opmerkingen, en maakt het zo dat uw inhoud kan worden gezien als onbevooroordeeld, omdat u geen bonus aan wordt gekenmerkt anders dan blootstelling en clickthroughs.
er zijn er meer, maar deze zult u waarschijnlijk het vaakst zien.
doorgestreepte tekst
Als u net als ik bent, moet u soms een grap maken met doorgestreepte woorden. Of misschien moet je dingen van een lijst markeren (of verwijderen, zoals de code zelf zegt). Of iets anders waarvoor je een regel door de tekst moet laten lopen.
dat is wanneer u <del> gebruikt rond de tekst die u wilt doorhalen. Voor sommige mensen, dit is ongelooflijk veel voorkomende code, terwijl anderen het nooit kunnen gebruiken. Hoe dan ook, het is een makkelijk te onthouden.
You can use <del>this code</del> for strikethrough text in HTML.
lijsten
lijsten zijn een ander belangrijk onderdeel van webinhoud deze dagen. Ze geven je niet alleen tonnen witte ruimte en breken muren van tekst op, maar ze laten je ook je gedachten organiseren in verteerbare stukken.
er zijn twee soorten lijsten die u kunt maken met basis HTML-codes. Geordende lijsten die genummerd zijn 1, 2, 3 enzovoort. Ongeordende lijsten gebruiken kogels of symbolen (afhankelijk van uw site ontwerp) in plaats van nummers.
u wikkelt elke lijst in met <ul> of <ol> voor respectievelijk ongeordende of geordende lijsten. En elk item in de lijst moet worden verpakt in <li>.
en deze codes geven het verschil weer:
- Dit is onderdeel van een ongeordende lijst.
- zo is dit.
- en zo maak je een geordende lijst.
- dit is een link in een lijst.
- en deze link tekst is vet, maar dit deel is niet.
u kunt ook nest andere codes in de lijsten, te. Dus je kunt vetgedrukte tekst, links invoegen, enzovoort.
blok aanhalingstekens
u zult op enig moment in uw WordPress-carrière de website van iemand anders moeten citeren. Dat is waar <blockquote> in het spel is. Omring de tekst die je kopieert/plakt (en het attribuut) met <blockquote> openings-en sluit tags, en je bent klaar om te gaan.
<blockquote>This text will appear with special styling to indicate that it's a quote./blockquote>
zo ziet het eruit op een pagina:
deze tekst zal verschijnen met speciale styling om aan te geven dat het een citaat.
alinea ‘ s
alinea HTML is een beetje vreemd. Afhankelijk van het CMS en de builder die u gebruikt, kan het automatisch elke regeleinde als een aparte alinea weergeven. WordPress doet dit wanneer u typt in HTML. Maar niet alles doet dat. Dus als je je alinea ‘ s apart wilt houden en geen tekstwand hebt, wikkel ze dan in <p>. De browser zal dan weten om elk blok tekst weer te geven als een aparte paragraaf in plaats van een continu blok. Standaard negeren browsers regeleinden, tenzij anders aangegeven.
<p>This is my first paragraph.</p><p>This is my second paragraph.</p>
regels en regeleinden
mogelijk wilt u andere scheidingen tussen uw alinea ‘ s en secties. Dan kunt u de tags <hr> en <br/> gebruiken.
< hr> voegt een scheidingslijn in waar deze zich ook bevindt. Veel mensen gebruiken dit om widgets te scheiden in een zijbalk of belangrijke secties van een webpagina.
het<br/ > label is een regelafbreking. U kunt <br/> in het midden van een <p> gebruiken om een regel te breken zonder in een nieuwe alinea te gaan (omwille van blokstijl en organisatie). <br/ > is een zelfsluitende tag, wat betekent dat er geen inhoud in kan zitten. Dit wordt aangegeven door de schuine streep aan het einde van de code.
hoewel u het kunt gebruiken om tekst en alinea ‘ s op te splitsen door ze in te voegen waar u pauzes wilt, is dat geen goede gewoonte om in te gaan, en naarmate u verder gevorderd bent met HTML en CSS en JavaScript, MOET u het alineaelement richten om bepaalde dingen te doen. Lees hier meer over het onderscheid.
HTML inpakken
is absoluut noodzakelijk voor interactie met het internet. Iedereen gebruikt ze op dezelfde manier, of je nu aan de slag in webontwikkeling en design of een veteraan uit de dagen voordat JavaScript was een ding. We gebruiken nog steeds de basis HTML-codes om de fundamenten van al onze sites te runnen. Het maakt niet uit hoe mooi de site is of hoe geavanceerd de functies zijn, als een link breekt of dingen vet zijn die niet zouden moeten zijn, zul je nog steeds rondspitten om te zien of de <a href> of <strong> tags het goed doen.
wat zijn uw meest gebruikte HTML-codes tegenwoordig?
article featured image by enterlinedesign /. com