HTML-zelfstudie (voor beginners)

HTML-zelfstudie voor beginnersWil je wat HTML leren?


Het klinkt als een geweldig idee. Daarom hebben we deze HTML-tutorial voor beginners samengesteld.

Er zijn vandaag de dag minstens 1,7 miljard websites. Vrijwel al deze websites gebruiken HTML op de een of andere manier.

P.S: Als u geen HTML wilt leren en meteen wilt beginnen met het bouwen van uw website, zonder codering vereist, bekijk dan deze handleiding: Een GRATIS website maken (zonder HTML te leren).

Inleiding tot HTML


Wat is HTML?

Wat is HTMLHTML, een afkorting voor HyperText Markup Language, is een computertaal voor het maken van websites en webapplicaties. Bestaande uit voornamelijk reeksen codes die meestal in een tekstbestand zijn geschreven en als HTML zijn opgeslagen, vertaalt code die in de HTML-taal is geschreven zich in een mooie, goed opgemaakte tekst of een combinatie van tekst en media wanneer deze via een browser wordt bekeken.

HTML werd voor het eerst ontwikkeld door de Britse natuurkundige Tim Berners-Lee in 1990 en heeft sindsdien zoveel evoluties ondergaan dat de meest recente versie veel meer kan bereiken dan voor mogelijk werd gehouden toen de taal voor het eerst werd uitgevonden.

In deze tutorial bespreken we de basis van de HTML-taal en alles wat je moet weten om als beginner aan de slag te gaan met HTML.

HTML-versies

Allereerst een snel overzicht van alle HTML-versies sinds HTML is uitgevonden.

  • HTML 1.0: Dit was de barebones-versie van HTML en de allereerste versie van de taal.
  • HTML 2.0: Deze versie werd geïntroduceerd in 1995. Het evolueerde geleidelijk, waardoor extra mogelijkheden mogelijk werden, waaronder het uploaden van bestanden op basis van formulieren, tabellen, client-side image maps en internationalisering.
  • HTML 3.2: In een poging de ontwikkeling van standaarden voor het World Wide Web te verzekeren, werd het World Wide Web Consortium (W3C) in 1994 opgericht door Tim Berners-Lee. In 1997 publiceerden ze HTML 3.2.
  • HTML 4.0: Later in 1997 bracht de W3C HTML 4.0 uit – een versie die vele browserspecifieke elementtypes en attributen overnam.
  • HTML 4.0 werd later opnieuw uitgegeven met kleine aanpassingen in 1998.
  • HTML 4.01: In december 1999 werd HTML 4.01 uitgebracht.
  • XHTML: De specificaties zijn geïntroduceerd in 2000 en het werd aanbevolen om te worden gebruikt als de gezamenlijke standaard met HTML 4.01. Het bevatte XML om ervoor te zorgen dat de code correct is geschreven en om de interoperabiliteit tussen programmeertalen te waarborgen.
  • HTML5: Het W3C heeft HTML5 als aanbeveling gepubliceerd in oktober 2014 en later HTML 5.1 uitgebracht in november 2016.

Uw HTML-editor kiezen

Kies HTML-editorAls u overweegt webpagina’s in HTML te maken, heeft u een HTML-editor nodig. Het gebruik van een HTML-editor heeft verschillende voordelen.

Een goede HTML-editor houdt uw code schoon en georganiseerd. Het zal ook detecteren wanneer u een nieuwe tag opent en deze automatisch sluit om te voorkomen dat u een buggy-code heeft en als gevolg daarvan het aantal typen dat u moet doen verminderen. Met de meeste HTML-editors van vandaag kunt u een voorbeeld van uw webpagina bekijken om te zien hoe deze eruit zal zien in een webbrowser met behulp van hun WYSIWYG-functie.

Er zijn veel gratis en betaalde HTML-editors, hieronder staan ​​enkele van de beste opties waaruit je kunt kiezen:

Basisbouwstenen van HTML


Als u eenmaal heeft besloten welke HTML-editor u wilt gebruiken, is de volgende stap het begrijpen van de bouwstenen van HTML. Bij het coderen in HTML is het essentieel om deze bouwstenen te begrijpen. Ze bevatten tags, attributen en elementen. We zullen ze hieronder in het kort bekijken:

Inleiding tot tags

Als je eenmaal van HTML houdt, is het eerste dat je moet begrijpen tags. In wezen scheiden tags normale tekst van HTML-code.

Als het dus om HTML gaat, maken tags het verschil tussen of uw document wordt weergegeven als gewone tekst of ‘getransformeerde tekst’, wat in feite een tekstcode is die een reeks dingen lijkt te tonen (hyperlinks, afbeeldingen, media of andere methoden voor formatteren) op basis van wat de instructie is om weer te geven op basis van tags.

Laten we eens kijken naar het woord ‘Hij is een jongen’ als voorbeeld:

  • In gewoon tekstformaat krijg je: Hij is een jongen.
  • In vetgedrukte tekst krijg je: Hij is een jongen

Om te bereiken wat we hebben in het vetgedrukte formaat, moet je de gebruiken label.

tekst vet maken in html

In ruwe HTML hebben we Hij is een jongen wat de browser vervolgens vertaalt naar: Hij is een jongen.

‘Hij is een jongen’ zou ook cursief kunnen uitkomen.

Dit wordt bereikt met de label.

tekst cursief maken in html

Wij hebben: Hij is een jongen die dan uitkomt als Hij is een jongen.

Hyperlinked wordt bereikt met behulp van de label.

tekst hyperlink maken in html

In ruwe HTML hebben we: Hij is een jongen die laat zien zoals Hij een jongen is.

Er zijn een paar dingen die u moet weten over tags:

  • Tags zijn praktisch de bouwsteen van HTML – je kunt HTML niet gebruiken zonder tags! Als je vastzit op welke tag je moet gebruiken, bekijk dan zeker ons HTML periodiek systeem.
  • Bijna elke geopende tag moet worden gesloten. Houd er rekening mee dat er uitzonderingen zijn. Een voorbeeld van een tag die niet gesloten hoeft te worden is een lege tag, zoals de regeleinde:
    .
  • Tags staan ​​in minder dan (“<”) and greater than (“>”) Hoekbeugel. Afsluitende tags bevatten een slash die achter de naam van de te sluiten tag komt. Voorbeeld van een open tag: . Voorbeeld van een gesloten tag .
  • Elk HTML-bestand begint met de openingstag en eindigt met de afsluitende tag. De eerste regel van het HTML-bestand moet het type document aangeven, zodat de browser weet welke HTML-smaak u gebruikt. Daarom zie je dat HTML-pagina’s beginnen met ‘‘Voordat de HTML-code begint.

Voordat inhoud wordt toegevoegd, zien de meeste HTML-bestanden er in principe als volgt uit:

HTML--

De sectie die volgt op de tag bevat meestal informatie over het document, zoals de titel, metatags en waar het CSS-bestand te vinden is – inhoud die niet direct zichtbaar is op de browserpagina. Het gedeelte tussen ‘ en”(Die we vertegenwoordigden met“ HOOFDINHOUD ”) is waar de hoofdinhoud van het HTML-bestand, dat de kijker in de browser te zien krijgt, zich bevindt. Dit omvat alles van de eerste alinea tot hyperlinks tot opmaak tot multimedia en al het andere.

Inleiding tot elementen

inleiding tot elementen

In HTML bestaat een “element” uit de openings- en sluitingstag en de inhoud tussen de tags.

In de “Hij is een jongen”(Vetgedrukt) voorbeeld, we hebben dit in HTML: Hij is een jongen. De tekst “Hij is een jongen” is omgeven door een open en gesloten label. Alles, inclusief de openingstag, de inhoud en de sluitingstag is een element.

Wanneer een tag wordt geopend, inhoud wordt geïntroduceerd en de tag wordt gesloten, hebben we een element.

Een element kan een basisvorm of een complexe vorm hebben. Waarom? Omdat alles tussen een open tag en een afsluitende tag evenals die tags een element is. Het betekent dat we elementen binnen een element kunnen hebben. In ons huidige voorbeeld, “hij is een jongen” (Hij is een jongen) is een element.

U zult merken dat we eerder zeiden dat de HTML-documenten de tag voordat de inhoud begint. De inhoud kan honderden verschillende elementen bevatten, maar al deze elementen maken deel uit van het “body” -element (aangezien het body-element open is, inhoud bevat en vervolgens wordt gesloten).

Inleiding tot attributen

Hoewel HTML-documenten in feite tags gebruiken voor alles, willen we soms aanvullende informatie binnen een element communiceren. In dit geval gebruiken we een attribuut. Het attribuut wordt gebruikt om de kenmerken van een element te definiëren, het wordt gebruikt binnen de openingstag van het element. Attributen bestaan ​​uit een naam en een waarde.

Merk op dat de waarde van een attribuut binnen een aanhalingsteken wordt geplaatst met de notatie Je berichtje.

voorbeeld van een attribuut

Voorbeeld:

Hij is een jongen

In dit voorbeeld instrueren we dat “Hij is een jongen” is uitgelijnd in het midden van het document.

Aan de slag met HTML


Aan de slag met HTMLErvan uitgaande dat u vandaag uw eigen eenvoudige HTML-document wilt maken, hoe begint u dan? Van het maken van paginatitels tot het maken van formulieren, we zullen u helpen om aan de slag te gaan met HTML hieronder.

De HTML maken Element

Bij het maken van een HTML-document is een van de eerste dingen die u gaat maken de element. Dit bevat metagegevens (of gegevens over het HTML-document). Dit omvat informatie zoals de karakterset, documenttitel, documentstijlen, scripts, enz.

Enkele elementen in de voeg de titel toe, die is gemaakt met de label.</p><p><strong>Voorbeeld</strong>:</p><pre><title>Dit is onze paginatitel

Deze titel wordt weergegeven op het browsertabblad. Het is ook wat wordt geïndexeerd als titel voor de pagina wanneer de bots van zoekmachines uw website crawlen.

Dit omvat ook de element, dat vaak wordt gebruikt om informatie op te geven die zoekmachines kunnen gebruiken om de inhoud in hun vermeldingen te beschrijven. Dit omvat de beschrijving, trefwoorden, informatie over de auteur, enz element specificeert ook de karakterset die het HTML-document gebruikt.

Koppen maken in HTML

koppen maken in html

Koppen spelen een grote rol in het succes van een website. Ten eerste maken ze het voor lezers gemakkelijk om de inhoud van uw pagina’s te scannen. Ten tweede, en misschien nog belangrijker, ze communiceren de structuur van uw webpagina’s aan zoekmachines en hebben daarom vaak invloed op hoe uw inhoud wordt gerangschikt in de resultaten van zoekmachines.

Dat gezegd hebbende, is het belangrijk om geen koptags te gebruiken om uw tekst groot of vet te maken. Er zijn andere tags die daarvoor kunnen worden gebruikt (die komen we verderop in deze sectie aan de orde). In plaats daarvan mogen koptags alleen worden gebruikt voor structuur.

Er zijn zes koptags in HTML:

naar
, met de

tag die de belangrijkste kop en de
tag die de minst belangrijke kop aangeeft.

Als u koppen wilt maken, bepaalt u eenvoudig welke kop u maakt, opent u de kop met de gewone koptag en vergeet u niet de tags te sluiten als u klaar bent.

Voorbeeld HTML-koppen:

  • Dit is uw eerste HTML-kop

    (de grootste)

  • Dit is uw tweede HTML-kop

  • Dit is uw derde HTML-kop

  • Dit is uw vierde HTML-kop

  • Dit is uw vijfde HTML-kop
  • Dit is uw zesde HTML-kop

Alinea’s maken

paragrafen maken in HTML

De volgende stap is om te beginnen met het maken van alinea’s. Alinea’s kunnen worden gemaakt met de

label.

Voorbeeld:

Dit is je eerste alinea.

Dit is uw tweede alinea en u zult nog veel meer alinea's maken.

Houd er rekening mee dat schrijven in HTML heel anders is dan schrijven in pure tekst. Dus als u tekst in HTML opsplitst zonder een nieuwe alinea te beginnen, maakt het niet echt uit wanneer de tekst door de browser wordt weergegeven. In plaats daarvan wilt u een regeleinde gebruiken, die wordt weergegeven door de
label.

Voorbeeld:

Dit is een nieuwe paragraaf. En ik wil een aantal nieuwe regels gebruiken. Dus ik verbreek het.

Dit komt niet als volgt uit:

Dit is een nieuwe paragraaf.
En ik wil een aantal nieuwe regels gebruiken.
Dus ik verbreek het.

In plaats daarvan ziet het er als volgt uit:

Dit is een nieuwe paragraaf. En ik wil een aantal nieuwe regels gebruiken. Dus ik verbreek het.

Dus, hoe breek je teksten in nieuwe regels zodat het er als volgt uit zou zien:

Dit is een nieuwe paragraaf.
En ik wil een aantal nieuwe regels gebruiken.
Dus ik verbreek het.

Door gebruik te maken van regeleinden.

Voorbeeld:

Dit is een nieuwe paragraaf.
En ik wil een aantal nieuwe regels gebruiken.
Dus ik verbreek het.

Dat gezegd hebbende, is het belangrijk op te merken dat de regeleinde (
) tag is een lege tag, dus u hoeft deze niet te sluiten.

Tekst opmaken in HTML

tekst opmaken in HTML

De volgende stap is het opmaken van uw tekst in HTML. Hier kunt u aangeven of u wilt dat uw tekst vetgedrukt, cursief, onderstreept, geabonneerd, superscript, enz. Wordt weergegeven. Dit is een basisgids, dus dit gedeelte is niet het enige voor opmaak. In plaats daarvan nemen we alleen enkele basisopmaaktags op. Het proces voor het gebruik van andere vormen van opmaak is eenvoudig – zoek gewoon de gewenste tag en ga verder:

Vet gebruiken: Hij is een jongen komt uit als Hij is een jongen

Cursief gebruiken: Hij is een jongen komt uit als Hij is een jongen

Tekst onderstrepen: Hij is een jongen komt uit als Hij is een jongen. Het is vermeldenswaard dat de tag was verouderd in HTML 4.01 en werd opnieuw gedefinieerd om stilistisch verschillende tekst in HTML5 weer te geven. Daarom wordt aanbevolen om CSS te gebruiken om tekst aan te geven die onderstreept moet worden. Aangezien dit artikel een basisgids is, houden we het simpel.

Subscript gebruiken: Hij is een jongen komt uit als Hij is een jongen

Superscript gebruiken: Hij is een jongen komt uit als Hij is een jongen

Voor andere tags die kunnen worden gebruikt om te formatteren, kunt u de woordenlijst aan het einde van deze bron bekijken, waar we veel relevante HTML-tags hebben opgenomen.

Geordende en ongeordende lijsten

Vroeg of laat zul je lijsten moeten maken. Lijsten kunnen worden besteld (d.w.z. genummerd) of ongeordend (d.w.z. ongenummerd).

Hier is een voorbeeld van een geordende lijst:

  1. Item 1
  2. Punt 2
  3. Punt 3

Hier ziet u hoe u het kunt maken:

  1. Item 1
  2. Punt 2
  3. Punt 3

Hier is een voorbeeld van een ongeordende lijst:

  • Item 1
  • Punt 2
  • Punt 3

Hier ziet u hoe u het kunt maken:

  • Item 1
  • Punt 2
  • Punt 3

Als het niet al duidelijk is. Hier volgt een overzicht:

De

  • tag wordt gebruikt om elk item in de lijst aan te geven. Bij het maken van een lijst kunt u de gebruiken
      tag om een ​​geordende lijst aan te geven (“o” = geordend en “l” = lijst) of de