Home-theater-designers
HTML is een essentieel onderdeel van het web zoals wij het kennen. En hoewel maar weinig webontwerpers pagina's maken door handmatig HTML te typen, is het toch handig om er een beetje over te weten.
We gaan kijken naar enkele basisprincipes van de taal, inclusief wat HTML werkelijk is, enkele fundamentele concepten en hoe het samenwerkt met andere talen. Zie dit als een spoedcursus 'HTML voor dummies'.
HTML-basisprincipes: wat is HTML?
HTML staat voor Hypertext-opmaaktaal . En hoewel het soms op één hoop wordt gegooid met programmeertalen, is dit niet juist.
Als een opmaaktaal , Met HTML kunt u alleen de weergave-indeling van pagina's maken. een echte programmeertaal , zoals Java of C++, bevat logica en opdrachten die worden uitgevoerd.
Hoewel het eenvoudig is, vormt HTML de ruggengraat van elke pagina op internet. Het is verantwoordelijk voor welke tekst vet wordt weergegeven, afbeeldingen toevoegt en naar andere pagina's linkt. We hebben een HTML FAQ die meer uitleg geeft.
U kunt met de rechtermuisknop op de meeste webpagina's in uw browser klikken en kiezen voor Bekijk paginabron of iets dergelijks om de HTML erachter te zien. Dit zal waarschijnlijk ook veel code bevatten die geen HTML is, maar daar kun je doorheen bladeren.
Zelfs als je geen ervaring hebt met opmaaktalen of programmeertalen, zal het leren van een beetje over HTML je een beter geïnformeerde webgebruiker maken. Laten we vijf basisstappen doorlopen om u te helpen begrijpen hoe HTML werkt. Onderweg geven we voorbeelden.
Stap 1: Het concept van tags begrijpen
HTML gebruikt een systeem van tags om verschillende elementen van het document te categoriseren.
De meeste tags komen in paren om de betreffende tekst erin te wikkelen. Hier is een eenvoudig voorbeeld (de
tag maakt tekst stoutmoedig ; we zullen dit zo meteen bespreken.)
This is some bold text .Merk op hoe de afsluitende tag begint met een schuine streep (/). Dit betekent een afsluitende tag, wat belangrijk is. Als u een tag niet sluit, heeft alles vanaf het begin dat kenmerk.
hoe je je doel in het leven kunt vinden quiz
Niet alle tags hebben echter een paar. Sommige HTML-elementen, genaamd lege elementen , hebben geen inhoud en bestaan op zichzelf. Een voorbeeld is de
tag, wat een regeleinde is. U kunt dergelijke tags 'sluiten' door een schuine streep toe te voegen (zoals
) maar het is niet strikt noodzakelijk.
Stap 2: De HTML-lay-out van het skelet
Een juist HTML-document moet bepaalde tags hebben, zodat het correct is ingedeeld. Dit zijn de essentiële onderdelen:
- Elk HTML-document moet beginnen met |__+_| zichzelf als zodanig te verklaren. Dus de afsluitende tag, |__+_| , is het laatste item in een HTML-bestand.
- Vervolgens de |__+_| sectie bevat informatie zoals de paginatitel, verschillende scripts die op de pagina worden uitgevoerd en dergelijke. Zoals de naam al doet vermoeden, komt dit meestal direct na de eerste |__+_| label. De eindgebruiker ziet niet veel van de inhoud in deze tags.
- Eindelijk, de |__+_| tag bevat de tekst van de pagina die de lezer ziet (plus nog veel meer). Hier vind je afbeeldingen, links en meer.
sinds de
sectie vormt het grootste deel van een HTML-document, de rest van onze walkthrough kijkt naar elementen die erop betrekking hebben.
Stap 3: Basis HTML-tags voor opmaak
Laten we nu eens kijken naar enkele veelvoorkomende tags die deel uitmaken van HTML-documenten. Het is natuurlijk niet mogelijk om elk element te behandelen, dus we zullen enkele van de belangrijkste bespreken. We hebben gedekt veel meer HTML-voorbeelden als deze u niet bevredigen.
Als deze tags vrij eenvoudig lijken, onthoud dan dat HTML helemaal in 1993 is gemaakt. Het web was toen in de beginfase erg op tekst gebaseerd.
Eenvoudige tekstopmaak
HTML ondersteunt basistekststijlen zoals u die in Microsoft Word zou vinden:
- |__+_| tags maken tekst stoutmoedig .
- |__+_| tags (wat staat voor 'emphasis') zal cursief maken tekst.
HTML ondersteunt ook de oudere
tag voor vet en
voor cursief. Het verdient echter de voorkeur om de bovenstaande te gebruiken.
Kortom,
en
laten zien hoe iets moet worden begrepen, terwijl de laatste tags alleen vertellen hoe het eruit moet zien. Deze voormalige tags zijn beter toegankelijk voor schermlezers die worden gebruikt door slechtzienden.
Paragraaf en andere afdelingen
HTML's
tag kunt u een sectie van het document definiëren. Meestal gaat dit gepaard met CSS (zie hieronder) om een sectie op een bepaalde manier op te maken.
De
tag kunt u tekst in alinea's verdelen. Browsers zullen automatisch wat ruimte voor en na deze plaatsen, zodat u tekst op natuurlijke wijze kunt opsplitsen.
U kunt koppen aan uw document toevoegen en het gemakkelijker maken om het te volgen met behulp van de
door
labels. H1 is de belangrijkste koptekst, terwijl H6 het minst belangrijk is. Bijna elk MakeUseOf-artikel gebruikt H2- en H3-headers om informatie te ordenen.
slaan Binnenkomen als u regeleinden in uw HTML-document toevoegt, worden ze niet echt weergegeven. In plaats daarvan kunt u
om een regeleinde toe te voegen.
Hier is een voorbeeld dat al deze gebruikt:
Stap 4: Afbeeldingen invoegen
Afbeeldingen zijn een essentieel onderdeel van de meeste webpagina's. Je kunt ze eenvoudig toevoegen met HTML en er zelfs verschillende eigenschappen voor instellen.
U voegt een afbeelding in met de
label. Dit combineren met de
attribuut laat u specificeren waar u de afbeelding wilt laden.
Een ander belangrijk kenmerk van
hoe maak je een symbolische link in windows
tags is
. Met Alt-tekst kunt u de afbeelding beschrijven voor schermlezers of voor het geval de afbeelding niet correct wordt geladen. U kunt met de muis over een afbeelding gaan om de alt-tekst te zien.
Gebruik de
en
elementen om het aantal pixels op te geven waarop de afbeelding wordt weergegeven.
Zet alles bij elkaar en een afbeeldingstag ziet er als volgt uit:
Example Heading
This is one paragraph.
This is a second
paragraph split between two lines.
Stap 5: Koppelingen toevoegen
Het World Wide Web zou niet echt een web zijn zonder links naar andere pagina's. De ... gebruiken
![]()
tag, kunt u bij elke tekst naar andere pagina's linken.
Binnen in de
srctag, de
![]()
attribuut vertelt waar je linkt. Gewoon plakken van de URL werkt prima. U kunt de
altelement om een stukje tekst toe te voegen dat verschijnt wanneer iemand de muisaanwijzer op de link houdt.
Een basislink ziet er als volgt uit:
widthDe
heighttag heeft veel andere mogelijke elementen, maar we zullen er hier niet op ingaan.
Hoe HTML verbinding maakt met CSS en JavaScript
We hebben gekeken naar de basis van HTML en hoe het een webpagina tot stand brengt. Maar zoals u zich kunt voorstellen, is HTML alleen niet voldoende voor het moderne web. Eenvoudige HTML-webpagina's waren gebruikelijk in de tijd van 'Web 1.0', toen de meeste websites niets meer waren dan statische tekst.
Maar nu hebben we veel meer. CSS (Cascading Style Sheets) is een taal die wordt gebruikt om te beschrijven hoe de tekst die u in HTML hebt voorbereid eruit zou moeten zien. Herinner de
tag die we hebben besproken? Binnen deze (en andere tags), kunt u een . definiëren
attribuut. Vervolgens kunt u in uw begeleidende CSS-document instructies schrijven over hoe dat moet
zou moeten kijken.
U kunt deze stijlelementen inline in uw HTML-code definiëren, maar dit wordt als een slechte gewoonte beschouwd omdat het veel moeilijker te onderhouden is. Leer meer met deze eenvoudige CSS-voorbeelden . Bekijk ook hoe u uw CSS-bestanden kunt optimaliseren .
JavaScript
We hebben gezien dat HTML de inhoud definieert en CSS het uiterlijk. JavaScript, het laatste lid van het trio dat van vitaal belang is voor het web, stelt webpagina's in staat te reageren op de acties van mensen zonder elke keer een nieuwe pagina te laden.
Met JavaScript kan een website u bijvoorbeeld waarschuwen dat het wachtwoord dat u hebt ingevoerd niet aan de vereisten voldoet voordat u het probeert in te dienen. Een webdesigner kan JavaScript gebruiken om door afbeeldingen in een diavoorstelling te bladeren of de gebruiker om invoer vragen.
Dit zijn slechts enkele elementaire voorbeelden. JavaScript is een scripttaal die veel kan en relatief veel gecompliceerder is dan HTML en CSS. Zien ons overzicht van JavaScript voor veel meer.
Kijken naar de volledige reikwijdte van webdesign valt buiten het bestek van dit artikel, maar het volstaat te zeggen dat HTML samenwerkt met andere talen om de webpagina's te maken die we vandaag kennen.
De evolutie van HTML
Het is belangrijk op te merken dat HTML niet statisch is. HTML heeft verschillende revisies ondergaan, waarvan de meest recente HTML 5 is. Deze standaard ondersteunt met name native video-insluiting in plaats van te vertrouwen op propriëtaire formaten zoals Adobe Flash.
Nieuwe iteraties van HTML verklaren ook van tijd tot tijd bepaalde archaïsche tags als verouderd. Deze omvatten vreselijke tags zoals
hrefen
title(die respectievelijk scroll- en flash-tekst) vaak gezien in het ontwerp van websites uit de jaren negentig. Houd er dus rekening mee dat normen in de loop van de tijd veranderen.
Een beetje HTML-kennis gaat een lange weg
We hebben een korte rondleiding gegeven over hoe een HTML-document werkt. Nu kent u de basisprincipes van hoe webpagina's zijn gestructureerd. Zelfs als u niet doorgaat met het bouwen van webpagina's, bent u zich iets meer bewust van het internet dat u elke dag gebruikt.
app voor draadloze camerasignaal ophalen
Voor meer informatie, upgrade je vaardigheden op het gebied van webontwikkeling met essentiële tools en bekijk dan onze gids voor het ontwerpen van uw eerste website .
Afbeelding tegoed: Belyaevskiy/ Depositphotos
Deel Deel Tweeten E-mail 5 tips om uw VirtualBox Linux-machines een boost te gevenBen je de slechte prestaties van virtuele machines beu? Dit is wat u moet doen om uw VirtualBox-prestaties te verbeteren.
Lees volgende Gerelateerde onderwerpen- Programmeren
- HTML
- Webontwikkeling
- JavaScript
- Webmasterhulpprogramma's
- Programmeren
- HTML5
Ben is adjunct-redacteur en de onboarding-manager bij MakeUseOf. Hij verliet zijn IT-baan om fulltime te schrijven in 2016 en heeft nooit meer achterom gekeken. Als professionele schrijver behandelt hij al meer dan zeven jaar technische tutorials, aanbevelingen voor videogames en meer.
Meer van Ben StegnerAbonneer op onze nieuwsbrief
Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!
Klik hier om je te abonneren