17 eenvoudige HTML-codevoorbeelden die u in 10 minuten kunt leren

• Programming

Advertentie

Hoewel moderne websites over het algemeen zijn gebouwd met gebruiksvriendelijke interfaces, is het handig om wat basis-HTML te kennen. Als je de volgende 17 HTML-voorbeeldtags kent (en een paar extra's), kun je een eenvoudige webpagina maken of de code aanpassen die is gemaakt door een app zoals WordPress.

We hebben HTML-codevoorbeelden voor de meeste tags uitgevoerd. Als u ze in actie wilt zien, download dan het HTML-voorbeeldbestand aan het einde van het artikel. Je kunt ermee spelen in een teksteditor en laden in een browser om te zien wat je wijzigingen doen.

1.

U hebt deze tag nodig aan het begin van elk HTML-document dat u maakt. Het zorgt ervoor dat een browser weet dat het HTML leest en dat het HTML5 verwacht, de nieuwste versie.

Hoewel dit eigenlijk geen HTML-tag is, is het toch een goede om te weten.

2.

Dit is een andere tag die een browser vertelt dat hij HTML leest. De tag gaat direct na de DOCTYPE-tag en u sluit deze met een tag aan het einde van uw bestand. Al het andere in uw document bevindt zich tussen deze tags.

3.

De tag begint het kopgedeelte van uw bestand. Het spul dat hier binnenkomt, verschijnt niet op uw webpagina. In plaats daarvan bevat het metagegevens voor zoekmachines en informatie voor uw browser.

Voor basispagina's bevat de tag uw titel, en dat is het zowat. Maar er zijn een paar andere dingen die u kunt opnemen, die we zo meteen zullen bespreken.

4.

Met deze tag wordt de titel van uw pagina ingesteld. Het enige wat u hoeft te doen is uw titel in de tag te plaatsen en deze als volgt te sluiten (ik heb ook de header-tags opgenomen):

  My Website 

Dat is de naam die wordt weergegeven als de titel van het tabblad wanneer deze in een browser wordt geopend.

5.

Net als de titeltag worden metagegevens in het kopgedeelte van uw pagina geplaatst. Metagegevens worden voornamelijk gebruikt door zoekmachines en zijn informatie over wat er op uw pagina staat. Er zijn een aantal verschillende metavelden, maar dit zijn enkele van de meest gebruikte:

• description —Een basisbeschrijving van uw pagina.
• trefwoorden: een selectie trefwoorden die op uw pagina van toepassing zijn.
• auteur —De auteur van uw pagina.
• viewport —Een tag om ervoor te zorgen dat uw pagina er op alle apparaten goed uitziet.

Hier is een voorbeeld dat op deze pagina van toepassing kan zijn:

De tag 'viewport' moet altijd 'width = device-width, initial-scale = 1.0' als inhoud hebben om ervoor te zorgen dat uw pagina goed wordt weergegeven op mobiele apparaten en desktop-apparaten.

6.

Nadat u het kopgedeelte hebt gesloten, komt u bij de body. U opent dit met de tag en sluit het met de tag. Dat gaat precies aan het einde van uw bestand, net voor de tag.

Alle inhoud van uw webpagina bevindt zich tussen deze tags. Het is zo simpel als het klinkt:

  Everything you want displayed on your page. 

7.

De

tag definieert een koptekst van niveau 1 op uw pagina. Dit is meestal de titel en er is idealiter slechts één op elke pagina.

definieert niveau twee headers zoals sectie headers,

niveau-drie sub-headers, enzovoort, tot

. Als voorbeeld zijn de namen van de tags in dit artikel headers van niveau twee.

 Grote en belangrijke koptekst 
Iets minder grote koptekst 
Subheader 

Resultaat:

Zoals je kunt zien, worden ze op elk niveau kleiner.

8.

Met de alineatag wordt een nieuwe alinea gestart. Dit voegt meestal twee regeleinden in.

Kijk bijvoorbeeld naar de pauze tussen de vorige regel en deze. Dat is wat een

tag volstaat.

Je eerste paragraaf.
Uw tweede paragraaf.

Resultaat:

Je eerste paragraaf.

Uw tweede paragraaf.

U kunt ook CSS-stijlen gebruiken in uw alineatags, zoals deze die de tekstgrootte wijzigen:

20% grotere tekst

Resultaat:

20% grotere tekst

Bekijk deze HTML- en CSS-zelfstudies om te leren hoe u CSS kunt gebruiken om uw tekst op te maken.

9.

De regeleinde-tag voegt een enkele regeleinde in:

De eerste regel. 
De tweede regel (dicht bij de eerste).

Resultaat:

De eerste regel.
De tweede regel (dicht bij de eerste).

Op een vergelijkbare manier werken is het

10.

Deze tag definieert belangrijke tekst. Over het algemeen betekent dit dat het vet is. Het is echter mogelijk om CSS te gebruiken om tekst anders weer te geven.

U kunt echter gerust vetgedrukte tekst gebruiken.

 Very important things you want to say. 

Resultaat:

Zeer belangrijke dingen die u wilt zeggen.

Als u bekend bent met de tag voor het vet maken van tekst, kunt u deze nog steeds gebruiken. Er is geen garantie dat het zal blijven werken in toekomstige versies van HTML, maar voor nu werkt het.

11.

Graag en , en zijn gerelateerd. De tag identificeert benadrukte tekst, wat doorgaans betekent dat deze cursief wordt weergegeven. Nogmaals, er is de mogelijkheid dat CSS benadrukte tekst anders weergeeft.

 An emphasized line. 

Resultaat:

Een benadrukte lijn.

De tag werkt nog steeds, maar nogmaals, het is mogelijk dat deze in toekomstige versies van HTML wordt afgeschaft.

12.

Met de tag of anker kunt u links maken. Een eenvoudige link ziet er zo uit:

 Go to MakeUseOf 

Resultaat:

Ga naar MakeUseOf

Het kenmerk "href" identificeert de bestemming van de link. In veel gevallen zal dit een andere website zijn. Het kan ook een bestand zijn, zoals een afbeelding of een PDF.

Andere nuttige attributen zijn "target" en "title". Het targetkenmerk wordt bijna uitsluitend gebruikt om een ​​link in een nieuw tabblad of venster te openen, zoals hier:

 Go to MakeUseOf in a new tab 

Resultaat:

Ga naar MakeUseOf op een nieuw tabblad

Het kenmerk 'titel' maakt een knopinfo. Beweeg over de onderstaande link om te zien hoe het werkt:

 Hover over this to see the tool tip 

Resultaat:

Beweeg hier over om de tooltip te zien

13.

Als u een afbeelding op uw pagina wilt insluiten, moet u de afbeeldingstag gebruiken. Normaal gesproken gebruikt u het in combinatie met het kenmerk 'src'. Dit geeft de bron van de afbeelding aan, zoals deze:

Resultaat:

Andere attributen zijn beschikbaar, zoals "hoogte", "breedte" en "alt". Zo ziet dat eruit:

Zoals je zou verwachten, bepalen de kenmerken "hoogte" en "breedte" de hoogte en breedte van de afbeelding. Over het algemeen is het een goed idee om er slechts één zo in te stellen dat de afbeelding correct wordt geschaald. Als u beide gebruikt, kunt u een uitgerekt of platgedrukt beeld krijgen.

De 'alt'-tag vertelt de browser welke tekst moet worden weergegeven als de afbeelding niet kan worden weergegeven en is een goed idee om bij elke afbeelding op te nemen. Als iemand een bijzonder trage verbinding of een oude browser heeft, kunnen ze nog steeds een idee krijgen van wat er op uw pagina moet staan.

14.

Met de geordende lijsttag kunt u een geordende lijst maken. Over het algemeen betekent dit dat u een genummerde lijst krijgt. Elk item in de lijst heeft een lijstitemtag nodig (

Ten eerste
Tweede ding
Derde ding