Eenvoudige HTML-gids voor dummies

Laatst bijgewerkt op 17 november 2021


Twintig jaar geleden, zelfs als je gewoon een hobbyblogger bent, moest je wat webcodering kennen om jezelf te beschermen of om een ​​eenvoudige functie aan je site toe te voegen. Maar nu zijn er zoveel editors en plug-ins beschikbaar dat zelfs kennis van de basisprincipes van HTML niet langer nodig is.

Het probleem hiermee is dat als je een paar basisprincipes niet kent, je gemakkelijk echte problemen kunt krijgen in je blog en een dure ontwikkelaar moet inhuren om een ​​mogelijk klein probleem op te lossen. Niet alleen dat, maar het aanbrengen van wijzigingen in uw blog, zoals het toevoegen van een aangepaste tekstwidget, vereist enige kennis.

HTML code.
HTML "codes".

En als u ondervindt dat de lay-out van de inhoud er niet goed uitziet, kan HTML-kennis u weer op het goede pad brengen.

Hier zijn enkele versies van onze HTML-handleiding voor bloggers en niet-techneuten voor online bedrijfseigenaren.

HTML is de ruggengraat van het internet van vandaag. Miljoenen websites vormden samen het internet. Waar HTML de bouwsteen van al deze websites.

Voor we beginnen…

1. Wat is HTML?

HTML is de afkorting van HYper Text MArkupe Laal. Het is de standaardtaal voor het labelen van inhoud voor webbrowsers.

HTML wordt vertegenwoordigd door "Elementen". Elementen worden ook wel "Tags" genoemd.

2. Waarom is HTML nodig?

Webbrowsers kunnen een website alleen weergeven als deze in de ondersteunde taal is geschreven. HTML is de meest voorkomende opmaaktaal en heeft de hoogste acceptatie voor webbrowsers.

Daarom heb je HTML nodig.

3. Is HTML hoofdlettergevoelig?

HTML is niet hoofdlettergevoelig. Maar de beste werkwijze is om HTML te schrijven met de juiste cases.

Stappen voor het maken van uw eerste HTML-bestand

U kunt een eenvoudig HTML-bestand maken met Kladblok op uw computer. Maar het zal pijnlijk zijn om vele regels codes te schrijven.

U hebt een codereditor nodig. Een goede code-editor maakt het gemakkelijker om grote codes te schrijven en te ordenen.

Ik gebruik en adviseer notepad ++ (gratis en open-source) voor het schrijven van webtalen. Er zijn andere editors die u misschien gebruikt Sublime Tekst, Atoom enz.

Dit is wat je moet doen:

  1. Installeer een code-editor
  2. Maak het open
  3. Maak een nieuw bestand
  4. Sla het op als een .html-bestand

Je bent klaar om te gaan!

Voorbeeld van code-editor Atom
Code-editor - Atom

1. Hallo wereld!

Kopieer en plak de volgende code in uw nieuwe HTML-bestand en sla het op. Voer het nu uit in uw webbrowser.

Code:

Mijn eerste webpagina Hallo Wereld!

Output:

Proficiat! U hebt uw allereerste HTML-bestand gemaakt. Je hoeft het op dit moment niet te begrijpen. We zullen het binnenkort behandelen.

HTML-structuur begrijpen

Elk HTML-bestand heeft een gemeenschappelijke naakte structuur. Dit is waar alles begint. En elke grote pagina met codes komt na het trimmen naar deze structuur.

Dus laten we proberen het te begrijpen vanuit de "Hallo wereld!" code. De volgende elementen zijn de verplichte onderdelen voor elk HTML-bestand.

  • = Het is een verklaring aan de browser dat dit een HTML-bestand is. U moet het opgeven vóór het label.
  • = Dit is het root-element van een HTML-bestand. Alles wat je schrijft, gaat tussen en .
  • = Dit is het meta-informatiedeel voor een browser. Codes binnen deze tag hebben geen visuele uitvoer.
  • = Dit is het deel dat een webbrowser weergeeft. Wat je precies op een website ziet, is de weergave van codes tussen en .

2. HTML-tags

HTML is de samenwerking van honderden verschillende tags. Je moet leren hoe ze werken. Je moet er ook voor zorgen dat ze op de juiste manier zijn gebruikt.

HTML-tags hebben meestal een openingstag en een afsluitende tag. De openingstag heeft het trefwoord omgeven door een kleiner dan (<) en een groter dan (>) teken. De afsluitende tag heeft alles hetzelfde, maar een extra slash (/) na het kleiner dan (<) teken.

(2a) Hoofdlabels

Alle head-tags gaan tussen en . Ze bevatten meta-informatie voor webbrowser en zoekmachines. Ze hebben in principe geen visuele output.

Titeltag definieert de titel van een webpagina die zichtbaar is op het browsertabblad. Deze informatie wordt gebruikt door webprogramma's en zoekmachines. U kunt het hoogste één titel per HTML-bestand hebben.

Code:

Mijn eerste webpagina
Title Tag - HTML-voorbeelden
Titellabel verschijnt boven in uw browser.

Link-tag linkt uw HTML-pagina met externe bronnen. Het belangrijkste gebruik ervan is het koppelen van HTML-pagina's aan CSS-stylesheets. Het is een zelfsluitende tag en heeft geen einde nodig . Hier staat rel voor relatie met het bestand en betekent src de bron.

Code:

Meta is een andere zelfsluitende tag die meta-informatie biedt over een html-bestand. Zoekmachines en andere webservices gebruiken deze informatie. Meta-tags zijn een must als u uw pagina voor zoekmachines wilt optimaliseren.

Code:

<meta name="description" content="This is the short description that search engines show"

De scripttag wordt gebruikt voor het opnemen van een server-side script of het maken van een koppeling naar een extern scriptbestand. Het kan twee kenmerken hebben in de openingstag. De ene is het type en de andere is de bron (src).

Code:

Noscript-tag werkt wanneer scripts zijn uitgeschakeld in een webbrowser. Het maakt een pagina compatibel voor hen die geen scripts toestaan ​​in hun webbrowser.

Code:

Helaas! Scripts zijn uitgeschakeld.

(2b) lichaamstags

Alle body-tags gaan tussen en . Ze hebben visuele outputs. Hier wordt het meeste werk verricht. U moet deze tags gebruiken om de inhoud van uw hoofdpagina te structureren.

naar

Dit zijn de koptags. De belangrijkste kop is getagd met en het minst belangrijk met . U moet ze in de juiste hiërarchie gebruiken.

Code:

Dit is een H1-kop Dit is een H1-rubriek Dit is een H1-kop Dit is een H2-kop Dit is een H2-koers Dit is een H2-koers

Output:

Tags opmaken

Tekst in een html-bestand kan worden opgemaakt met behulp van veel opmaaktags. Dit is nodig wanneer u een woord of regel uit uw inhoud wilt markeren.

Code:

U kunt uw tekst op veel manieren markeren. U kunt vet , onderstrepen , cursief , Mark , subscript , superscript en meer!

Output:

U kunt sommige codes afwijken van rending met behulp van de commentaartag. De code verschijnt in de broncode maar wordt niet weergegeven. Het belangrijkste gebruik van deze tag is voor het maken van documentatie van html-bestanden voor toekomstig gebruik.

Voorbeeld:

You can comment out any code by surrounding them in this way -->

(2c) Andere belangrijke HTML-tags

Anchor is een onbetaalbaar label dat bijna overal wordt gebruikt. U ziet geen webpagina online zonder ten minste één ankerlink.

De opbouw is hetzelfde. Het heeft een openings- en een sluitgedeelte . De tekst die u wilt verankeren, staat tussen en .

Er zijn een aantal kenmerken die bepalen waar en hoe de gebruiker naartoe gaat nadat erop is geklikt.

  • ahref = "" = Het definieert de bestemmingslink. De link gaat tussen de dubbele aanhalingstekens.
  • target = "" = Het bepaalt of de URL wordt geopend in een nieuw browsertabblad of op hetzelfde tabblad. target = ”_ blank” is voor het nieuwe tabblad en target = ”_ self” is voor het openen op hetzelfde tabblad.
  • rel = "" = Het definieert de relatie van de huidige pagina met de gekoppelde pagina. Als u de gelinkte pagina niet vertrouwt, kunt u rel = ”nofollow” definiëren.

Code:

Klik hier om naar Google te gaan. Het wordt geopend in een nieuw tabblad. Klik hier . Het brengt u ook naar Google, maar wordt geopend op het huidige tabblad.

Output:

Afbeeldingstag is een andere belangrijke tag, zonder welke je je niet veel op afbeeldingen gebaseerde websites kunt voorstellen.

is een zelfsluitende tag. Het heeft niet de traditionele sluiting nodig zoals . Er zijn enkele attributen die u moet weten voordat u deze correct kunt gebruiken.

  • src = "" = Dit is voor het definiëren van de bronlink van de afbeelding. Zet de link rechts tussen de dubbele aanhalingstekens.
  • alt = "" = Het staat voor alternatieve tekst. Wanneer uw afbeelding niet wordt geladen, geeft deze tekst gebruikers een idee over de ontbrekende afbeelding.
  • width = "" = Het bepaalt de breedte van een afbeelding in pixels.
  • Hoogte = "" = Het bepaalt de hoogte van een afbeelding in pixels.

Voorbeeld:

Dit is de Googleplex in augustus 2014. Deze afbeelding heeft een breedte van 500 pixels en een hoogte van 375 pixels.

Output:

Tips: Wilt u een klikbare afbeelding invoegen? Omwikkel de afbeeldingscode met een tag. Zien hoe het gaat.

of

Lijst-tag is voor het maken van een lijst met items. staat voor geordende lijsten (genummerde lijst) en staat voor ongeordende lijsten (bulletpoints).

De lijstitems in het of is getagd met . li staat voor lijst. U kunt er zoveel hebben zoals je wilt in de ouder of label.

Code:

Dit is een geordende lijst: Item 1 Punt 2 Punt 3 Dit is een ongeordende lijst: Item 1 Punt 2 Punt 3

Output:

Tabellabel is voor het maken van een gegevenstabel. Er zijn een paar tags op het innerlijke niveau die tabelkoppen, rijen en kolommen definiëren.

is de buitenste oudercode. In deze tag, staat voor tafelrij, staat voor tafelkolom en staat voor table header.

Code:

Naam Leeftijd Beroep Jo 27 Zakenman Carol 26 Verpleegster Simone 39 Professor

Output:

Opmerking: waarden binnen de eerste zijn koppen. Dus we gebruikten die een vetgedrukt teksteffect op de tekst toepast.

Tabel groeperen

U kunt de functionaliteit van een tabel uitbreiden met behulp van tabelgroeperingselementen. Er zullen momenten zijn waarop u grote tabellen moet maken die opgesplitst zijn in meerdere pagina's.

Door uw tabelgegevens te groeperen in koptekst, hoofdtekst en voettekst, kunt u onafhankelijk scrollen toestaan. De koptekst en het hoofdgedeelte worden afgedrukt naar elke pagina waar uw tabel is gespannen.

De tags voor tabelgroepering zijn:

  • = Voor het omwikkelen van de titels van een tafel. Het wordt afgedrukt naar elke gesplitste pagina van de tabel.
  • = Voor het omwikkelen van de belangrijkste gegevens van een tabel. U kunt er zoveel hebben zoals je nodig hebt. EEN tag betekent een aparte groep gegevens.
  • = Voor het omwikkelen van de voettekstinformatie van een tabel. Het wordt afgedrukt naar elke gesplitste pagina van de tabel.

Houd er rekening mee dat het niet verplicht is om groeperen te gebruiken. Je kunt het gebruiken om grotere tabellen leesbaarder te maken. Hoewel sommige speciale ontwikkelaars deze tags duidelijk gebruiken als CSS-kiezers.

Hier is hoe we onze voorbeeldtabel kunnen groeperen in , en :

Code:

Naam Leeftijd Beroep John 27 Zakenman Carol 26 Verpleegster Simone 39 Professor Totaal Personen: 3

Output:

Formulierelement wordt gebruikt voor het maken van interactieve formulieren voor webpagina's. Een HTML-formulier bevat meerdere opeenvolgende elementen. Bijvoorbeeld:, , enzovoort.

Het actiekenmerk in vorm is erg belangrijk. Het verwijst naar een pagina aan de serverzijde of een pagina van een derde partij voor het verwerken van de informatie. Voor verwerking moet u eerst een methode definiëren.

U kunt een van de volgende twee methoden gebruiken: ophalen of posten. Krijg alle informatie in de URL-indeling waar Post de informatie in de berichttekst verstuurt.

Er zijn veel soorten invoer voor formulieren. Het meest basale invoertype is tekst. Het is geschreven als . Typen kunnen ook radio, selectievakje, e-mail enzovoort zijn. Er moet onderaan een invoer type invoer zijn om een ​​verzendknop te maken.

tag wordt gebruikt voor het maken van labels en deze te associëren met invoer. De regel voor het associëren van labels met de invoer is dat deze dezelfde waarde hebben in for = ”” attribuut van label en id = ”” attribuut van invoer.

Code:

Voornaam: Achternaam: Korte biografie: Geslacht: Mannetje Vrouw

Output:

Opmerking: ik heb gerichte actie uitgevoerd naar een null-waarde omdat deze niet was verbonden met een server om de informatie te verwerken.

3. HTML-kenmerken

Attributen zijn een type modifiers voor HTML-tags. Ze voegen nieuwe configuraties toe aan de HTML-tags.

Een attribuut ziet eruit als attribuutnaam = ”” en zit in de openings-HTML-tag. De waarde van het attribuut staat tussen de dubbele aanhalingstekens.

id = ”” en class = ””

id en class zijn de ID's van HTML-tags. Verschillende namen worden met behulp van ID's aan verschillende HTML-elementen toegewezen. U kunt één klasse-ID gebruiken voor meerdere elementen. U kunt echter niet één id-ID gebruiken voor meerdere elementen.

Code:

Dit is de hoofdtitel

href = ""

href staat voor Hypertext Reference. Ze verwijzen gebruikers naar verwijzingslinks. Anchor-tag gebruikt href om gebruikers naar een bestemmings-URL te sturen.

Code:

Google

src = ””

src staat voor bron. Het definieert de bron van een medium of bron die u gebruikt in het HTML-bestand. De bron kan een lokale of een externe URL zijn.

Code:

alt = ""

alt staat voor alternatief. Het is een back-uptekst die wordt gebruikt wanneer een HTML-element niet kan worden geladen.

Code:

style = ””

stijlattribuut wordt vaak gebruikt in HTML-tags. Het doet het werk van CSS binnen de HTML-tag. Uw stijlkenmerken gaan tussen de dubbele aanhalingstekens.

Code:

Dit is een andere titel

4. Codeweergave: blok versus inline

Sommige elementen beginnen altijd op een nieuwe regel en nemen de volledige beschikbare breedte in beslag. Dit zijn "Block" -elementen.

Ex: , , - , vorm etc.

Sommige elementen nemen alleen de vereiste ruimte in beslag en beginnen niet op een nieuwe regel. Dit zijn "Inline" -elementen.

Ex: ,, ,, enzovoort.

U moet blokelementen differentiëren van inline wanneer u CSS-stijlen gaat gebruiken. In deze HTML-gids is het niet erg noodzakelijk.

Code:

Mijn eerste webpagina Dit is een H2-kop. Het heeft een blokweergave. Dit is een andere H2-kop. Hier heeft de onderstrepingstag Inline-weergave.

Output:

5. Dubbel aanhalingsteken versus enkel aanhalingsteken in HTML

Deze vraag ligt voor de hand. Wat moet je gebruiken in HTML? Eén citaat of een dubbel aanhalingsteken? Mensen lijken beide te gebruiken, maar welke is juist?

In HTML zijn enkele aanhalingstekens en dubbele aanhalingstekens hetzelfde. Ze maken geen verschil in de uitvoer.

U kunt iedereen gebruiken die u wilt. Maar het combineren van beide in een pagina met codes wordt als een slechte praktijk beschouwd. Je moet consistent zijn met een van hen.

6. Semantische HTML versus niet-semantische HTML

Semantic HTML is de nieuwste versie van HTML, die ook HTML5 wordt genoemd. Het is de ontwikkelde versie van niet-semantische HTML en XHTML.

Waarom is HTML5 beter? In eerdere versies werden HTML-elementen geïdentificeerd door id / class-namen. Bijvoorbeeld: werd als een artikel beschouwd.

In HTML5, tag vertegenwoordigt zichzelf als een artikel zonder een id / class-ID nodig te hebben.

In het belang van HTML5 kunnen zoekmachines en andere webtoepassingen een webpagina beter begrijpen. Semantische websites hebben bewezen het beter te doen voor SEO.

Hier is een lijst met enkele populaire HTML5-tags:

  • = Dit is voor het omwikkelen van de hoofdinhoud die u uw kijkers wilt laten zien.
  • = Dit is voor het markeren van het kopgedeelte van een inhoud zoals titel of auteur-meta.
  • = Het specificeert een door de gebruiker gedefinieerde of onafhankelijke inhoud voor uw kijkers.
  • = Het kan elke code groeperen zoals koptekst, voettekst of zijbalk. Je kunt zeggen, het is de semantische vorm van een div.
  • = Dit is waar uw footer-inhoud, disclaimer of copyright-tekst thuishoort.
  • = Hiermee kunt u audiobestanden invoegen zonder een probleem met de plug-in.
  • = Vind ik leuk , kunt u video's met deze tag invoegen zonder problemen met de plug-in.

Een eenvoudige HTML5-structuur ziet er als volgt uit:

Mijn eerste webpagina Menu 8 Menu 1 Dit is de titel van het artikel Geplaatst door John Doe De inhoud van het artikel komt hier Copyright 2 John Doe

7. HTML-validatie

De meeste webprofessionals valideren hun code nadat ze zijn voltooid. Waarom is het nodig om een ​​code te valideren als deze goed werkt?

Er zijn twee mogelijke redenen om uw codes te valideren:

  1. Het zal u helpen om uw code compatibel te maken tussen verschillende browsers en platforms. De code geeft mogelijk geen fout weer in uw huidige browser, maar in een andere browser. Codevalidatie lost het op.
  2. Zoekmachines en andere webprogramma's kunnen stoppen met het crawlen van uw pagina als er fouten in voorkomen. U kunt door middel van validatie bevestigen dat u geen grote fout heeft.

W3C Validator is de meest populaire service voor codevalidatie. Ze hebben verschillende methoden voor het valideren van codes. U kunt een bestand uploaden of de code rechtstreeks invoeren in hun validatie-engine.

8. Andere nuttige bronnen

HTML is een onderwerp dat je voortdurend leert. Meer bijgewerkte versies van HTML komen misschien eerder. Dus je moet op de hoogte blijven en blijven oefenen. De praktijk is wat azen HTML.

Hier zijn enkele nuttige bronnen voor u: