5 stappen om de basis HTML-code te begrijpen

• Programming

Advertentie

HTML is een essentieel onderdeel van het internet zoals we het kennen. En hoewel weinig webontwerpers pagina's maken door HTML handmatig te typen, is het nog steeds handig om er iets over te weten.

We gaan kijken naar enkele basisprincipes van de taal, waaronder wat HTML echt is, enkele fundamentele concepten en hoe het samenwerkt met andere talen. Zie dit als een "HTML voor dummies" -cursus.

HTML-basisprincipes: wat is HTML?

HTML staat voor Hypertext Markup Language . En hoewel het soms wordt samengevoegd met programmeertalen, is dit niet nauwkeurig.

Als opmaaktaal kunt u met HTML 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 vetgedrukt wordt weergegeven, afbeeldingen worden toegevoegd en naar andere pagina's worden gelinkt. We hebben een HTML-veelgestelde vragen De essentiële HTML-veelgestelde vragen U moet een bladwijzer maken De Essentiële HTML-veelgestelde vragen U moet een bladwijzer maken HTML bestaat al een tijdje, dus het wordt tijd dat u de basis leert. Dit is wat het is, hoe het werkt en hoe je vandaag enkele veel voorkomende elementen in HTML kunt schrijven! Lees meer dat meer verklaart.

U kunt met de rechtermuisknop op de meeste webpagina's in uw browser klikken en Paginabron of iets dergelijks kiezen om de HTML erachter te zien. Dit zal waarschijnlijk ook veel code bevatten die geen HTML is, maar je kunt er doorheen bladeren.

Zelfs als je geen ervaring hebt met markup 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. We zullen onderweg voorbeelden geven.

Stap 1: Het concept van tags begrijpen

HTML gebruikt een systeem van tags om verschillende elementen van het document te categoriseren.

De meeste tags worden in paren geleverd om de betreffende tekst erin te omwikkelen. Hier is een eenvoudig voorbeeld (de tag maakt tekst vet ; 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.

Niet alle tags hebben echter een paar. Sommige HTML-elementen, lege elementen genoemd, hebben geen inhoud en bestaan ​​op zichzelf. Een voorbeeld is het
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-indeling van het skelet

Voor een goed HTML-document moeten bepaalde tags zijn gedefinieerd, dus het is correct ingedeeld. Dit zijn de essentiële onderdelen:

• Elk HTML-document moet beginnen met zichzelf als zodanig 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 initiaal 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 vindt u afbeeldingen, links en meer.

Sinds de sectie maakt het grootste deel uit van een HTML-document, de rest van onze walkthrough kijkt naar elementen die erop betrekking hebben.

Stap 3: Basic HTML-tags voor opmaak

Laten we nu eens kijken naar enkele veel voorkomende tags die HTML-documenten vormen. Het is natuurlijk niet mogelijk om elk element te behandelen, dus we zullen enkele van de belangrijkste bespreken. We hebben nog veel meer HTML-voorbeelden behandeld 17 Eenvoudige HTML-codevoorbeelden die u in 10 minuten kunt leren 17 Eenvoudige HTML-codevoorbeelden die u in 10 minuten kunt leren Wilt u een eenvoudige webpagina maken? Leer deze HTML-voorbeelden en probeer ze uit in een teksteditor om te zien hoe ze eruit zien in uw browser. Lees meer als deze u niet bevredigen.

Als deze tags vrij eenvoudig lijken, denk er dan aan dat HTML al in 1993 werd gemaakt. Het web was toen nog erg op tekst gebaseerd.

Eenvoudige tekstopmaak

HTML ondersteunt basistekststijlen zoals je die zou vinden in Microsoft Word:

• tags maken tekst vetgedrukt .
• tags (wat staat voor "nadruk") zullen tekst cursief maken .

HTML ondersteunt ook de oudere tag voor vet en cursief. Het verdient echter de voorkeur om die hierboven te gebruiken.

Kortom, en laat zien hoe iets moet worden begrepen, terwijl de laatste tags u alleen vertellen hoe het eruit moet zien. Deze eerdere tags zijn beter toegankelijk voor schermlezers die worden gebruikt door slechtzienden.

Paragraaf en andere afdelingen

HTML's tag kunt u een gedeelte van het document definiëren. Gewoonlijk wordt dit gekoppeld aan 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, waardoor u op natuurlijke wijze tekst kunt opsplitsen.

U kunt headers toevoegen aan uw document en het gemakkelijker maken om te volgen met behulp van de

door

-tags. H1 is de belangrijkste header, terwijl H6 het minst belangrijk is. Bijna elk MakeUseOf-artikel gebruikt H2- en H3-headers om informatie te ordenen.

Als u op Enter drukt om regeleinden in uw HTML-document toe te voegen, worden ze niet echt weergegeven. In plaats daarvan kunt u gebruiken
om een ​​regeleinde toe te voegen.

Hier is een voorbeeld dat al deze gebruikt:

Voorbeeld kop 
Dit is een paragraaf.
Dit is een seconde 
paragraaf verdeeld over twee regels.

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. Door dit te combineren met het src kenmerk kunt u opgeven waar de afbeelding vandaan moet worden geladen.

Een ander belangrijk kenmerk van tags is alt . 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 elementen width en height om het aantal pixels op te geven waarop de afbeelding wordt weergegeven.

Alles bij elkaar genomen, en een afbeeldingstag ziet er zo uit:

Stap 5: links toevoegen

Het World Wide Web zou geen groot web zijn zonder links naar andere pagina's. De ... gebruiken tag, kunt u linken naar andere pagina's in elke tekst.

Binnen in de tag, geeft het kenmerk href aan waar u naar linkt. Gewoon de URL plakken werkt prima. U kunt het titelelement gebruiken om een ​​stukje tekst toe te voegen dat verschijnt wanneer iemand over de link zweeft.

Een basislink ziet er zo uit:

 Visit Google 

De tag heeft vele andere mogelijke elementen, maar we zullen hier niet in duiken.

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 geschikt voor het moderne web. Eenvoudige HTML-webpagina's waren gebruikelijk in de dagen van "Web 1.0", toen de meeste websites niets meer waren dan statische tekst.

Maar nu hebben we veel meer. CSS (Cascading Style Sheets) De essentiële cheatsheet voor CSS3-eigenschappen De essentiële cheatsheet voor CSS3-eigenschappen Master essentiële CSS-syntaxis met onze cheatsheet voor CSS3-eigenschappen. Meer lezen is een taal die wordt gebruikt om te beschrijven hoe de tekst die u in HTML heeft voorbereid, eruit moet zien. Herinner de tag die we hebben besproken? Hierin (en andere tags) kunt u een class definiëren. Vervolgens kunt u in uw bijbehorende CSS-document instructies schrijven voor hoe die class eruit moet zien.

U kunt deze stijlelementen inline definiëren in uw HTML-code, maar dit wordt als een slechte gewoonte beschouwd omdat het veel moeilijker te onderhouden is. Leer meer met deze eenvoudige CSS-voorbeelden 10 Eenvoudige CSS-codevoorbeelden die u in 10 minuten kunt leren 10 Eenvoudige CSS-codevoorbeelden die u in 10 minuten kunt leren We zullen ingaan op het maken van een inline stylesheet zodat u uw CSS-vaardigheden kunt oefenen. Vervolgens gaan we naar 10 eenvoudige CSS-voorbeelden. Vanaf daar is je verbeelding de limiet! Lees verder .

JavaScript

We hebben gezien dat HTML de inhoud definieert en CSS het uiterlijk bepaalt. Met JavaScript, het laatste lid van het trio dat van vitaal belang is voor internet, kunnen webpagina's reageren op acties van mensen zonder elke keer een nieuwe pagina te laden.

Met JavaScript kan een website u bijvoorbeeld waarschuwen dat het ingevoerde wachtwoord 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 heel veel kan en relatief veel gecompliceerder is dan HTML en CSS. Bekijk ons ​​overzicht van JavaScript Wat is JavaScript en hoe werkt het? Wat is JavaScript en hoe werkt het? Wat is Javascript? Het is een programmeertaal die wordt gebruikt om webpagina's te verbeteren. Het omvat het dynamisch bijwerken van webpagina's, gebruikersinterfaces en meer. Laten we eens kijken waar Javascript om draait. Lees meer voor veel meer.

Het bekijken van het volledige bereik van webontwerp valt buiten het bestek van dit artikel, maar het volstaat te zeggen dat HTML in wisselwerking staat 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, de meest recente is HTML 5. Deze standaard ondersteunt met name het insluiten van video in plaats van te vertrouwen op eigen indelingen zoals Adobe Flash.

Nieuwe iteraties van HTML verklaren ook dat bepaalde archaïsche tags van tijd tot tijd zijn verouderd. Deze bevatten vreselijke tags zoals en (respectievelijk die scroll- en flash-tekst) vaak gezien in het ontwerp van de website van de jaren 1990. 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 gehad over hoe een HTML-document werkt. U kent nu de basisprincipes van hoe webpagina's zijn gestructureerd. Zelfs als u geen webpagina's gaat bouwen, bent u zich meer bewust van het internet dat u elke dag gebruikt.

Voor meer informatie, upgrade je webontwikkelingsvaardigheden met essentiële tools Upgrade je webontwikkelingsvaardigheden met deze 10 essentiële tools Upgrade je webontwikkelingsvaardigheden met deze 10 essentiële tools Ben je klaar om websites te ontwikkelen? Deze online tools voor nieuwe en deskundige webontwikkelaars zullen uw vaardigheden zeker verbeteren! Lees meer en bekijk dan onze gids voor het ontwerpen van uw eerste website. Hoe maak je een website: voor beginners Hoe maak je een website: voor beginners Vandaag zal ik je door het proces leiden om een ​​complete website helemaal opnieuw te maken. Maak je geen zorgen als dit moeilijk klinkt. Ik zal je er elke stap doorheen begeleiden. Lees verder .

Image Credit: Belyaevskiy / Depositphotos

Ontdek meer over: HTML, HTML5, JavaScript, Programming, Web Development, Webmaster Tools.