De definitieve HTML-gids voor beginners

Laatst bijgewerkt op 15 mei 2018

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

Het probleem hiermee is dat als je geen enkele basiskennis kent, je gemakkelijk in de problemen kunt komen in je blog en een dure ontwikkelaar moet inhuren om een ​​mogelijk klein probleem op te lossen. Niet alleen dat, maar het maken van wijzigingen in uw blog, zoals het toevoegen van een aangepaste tekstwidget, vereist een beetje kennis.

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 is van al deze websites.

Vragen en antwoorden voor beginners

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 weergegeven met "Elementen". Elementen zijn ook bekend als 'Tags'.

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 Text, 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!


Ga Top

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:

<! DOCTYPE html> <html> <head> <title> Mijn eerste webpagina </ title> </ head> <body> <p> Hello World! </ P> </ body> </ html>

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.

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

  • <! DOCTYPE html> = Het is een verklaring aan de browser dat dit een HTML-bestand is. U moet dit vóór de tag <html> opgeven.
  • <html> </ html> = Dit is het wortelelement van een HTML-bestand. Alles wat je schrijft, gaat tussen <html> en </ html>.
  • <head> </ head> = Dit is het meta-informatiedeel voor een browser. Codes binnen deze tag hebben geen visuele uitvoer.
  • <body> </ body> = Dit is het gedeelte dat een webbrowser weergeeft. Wat u precies op een website ziet, is het weergeven van codes tussen <body> en </ body>.


Ga Top

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 begin- en een eindtag. De openingstag heeft het trefwoord omgeven door een kleiner dan (<) en een groter dan (>) teken. De afsluitende tag heeft alles hetzelfde maar een extra schuine streep (/) na het minder dan (<) teken.

(2a) Hoofdlabels

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

<titel> </ titel>

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:

<title> Mijn eerste webpagina </ title>
Titellabel verschijnt boven in uw browser.

<Link>

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

Code:

<link rel = "stylesheet" type = "text / css" src = "style.css">

<Meta>

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 = "Dit is de korte beschrijving die zoekmachines tonen"

<script> </ script>

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:

<script type = "text / javascript" src = "scripts.js"> </ script>

<noscript> </ noscript>

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:

<Noscript> <p> Helaas! Scripts zijn uitgeschakeld. </ P> </ noscript>

(2b) lichaamstags

Alle body-tags gaan tussen <body> en </ body>. Ze hebben visuele outputs. Dit is waar het meeste werk wordt gedaan. U moet deze tags gebruiken om de inhoud van uw hoofdpagina te structureren.

<h1> </ h1> tot <h6> </ h6>

Dit zijn de heading-tags. De belangrijkste koptekst is getagd met <h1> en het minst belangrijk met <h6>. Gebruik ze in de juiste hiërarchie.

Code:

<h1> Dit is een h1-kop </ h1> <h2> Dit is een h2-kop </ h2> <h3> Dit is een h3-kop </ h3> <h4> Dit is een h4-kop </ h4> <h5 > Dit is een h5-kop </ h5> <h6> Dit is een h6-kop </ h6>

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:

<p> U kunt uw tekst op verschillende manieren markeren. </ p> <p> U kunt <strong> vet </ strong>, <u> onderstrepen </ u>, <em> italic </ em>, <mark > markeer </ mark>, <sub> subscript </ sub>, <sup> superscript </ sup> en meer! </ p>

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:

<! - <p> Je kunt commentaar geven op elke code door ze op deze manier te omringen </ p> ->

(2c) Andere belangrijke HTML-tags

<a> </a>

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

De structuur is hetzelfde. Het heeft een opening <a> en een laatste deel </a>. De tekst die u wilt verankeren, gaat tussen <a> en </a>.

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 in hetzelfde tabblad. target = "_ blank" is voor het nieuwe tabblad en target = "_ self" is voor openen op hetzelfde tabblad.
  • rel = "" = Het definieert de relatie van de huidige pagina met de gekoppelde pagina. Als u de gekoppelde pagina niet vertrouwt, kunt u rel = "nofollow" definiëren.

Code:

<p> <a target="_blank" href="https://www.google.com/"> Klik hier </a> om naar Google te gaan. Het wordt geopend in een nieuw tabblad. </ P> <p> <a target="_self" href="https://www.google.com/"> Klik hier </a>. U wordt ook naar Google geleid, maar wordt geopend op het huidige tabblad. </ P>

Output:

<img />

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

<img /> is een zelfsluitende tag. Het heeft geen traditionele afsluiting nodig zoals </img>. Er zijn enkele attributen die u moet weten voordat u het 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:

<p> Dit is de Googleplex in augustus 2014. </ p> <p> Deze afbeelding heeft een breedte van 500 pixels en een hoogte van 375 pixels. </ p> <img src = "https: //upload.wikimedia. org / wikipedia / commons / 0 / 0e / Googleplex-Patio-Aug-2014.JPG "alt =" Hoofdkwartier van Google in augustus 2014 "width =" 500 "height =" 375 "/>

Output:

Tips: Wilt u een klikbare afbeelding invoegen? Wikkel de afbeeldingscode in met een tag <a>. Zien hoe het gaat.

<ol> </ ol> of <ul> </ ul>

Lijstlabel is voor het maken van een lijst met items. <ol> staat voor geordende lijsten (genummerde lijst) en <ul> staat voor ongeordende lijsten (opsommingstekens).

De lijstitems binnen de <ol> of <ul> zijn getagd met <li> </ li>. li staat voor lijst. U kunt zoveel <li> gebruiken als u wilt in de bovenliggende <ol> - of <ul> -tag.

Code:

<p> Dit is een geordende lijst: </ p> <ol> <li> Artikel 1 </ li> <li> Artikel 2 </ li> <li> Artikel 3 </ li> </ ol> <p> Dit is een ongeordende lijst: </ p> <ul> <li> Artikel 1 </ li> <li> Artikel 2 </ li> <li> Artikel 3 </ li> </ ul>

Output:

<tabel> </ table>

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

<table> </ table> is de buitenste parent-code. In deze tag staat <tr> voor tabelrij, <td> staat voor tabelkolom en <th> staat voor tabelkop.

Code:

<table> <tr> <th> Naam </ th> <th> Leeftijd </ th> <th> Beroep </ th> </ tr> <tr> <td> Jo <td> 27 </ td> < td> Zakenman </ td> </ tr> <tr> <td> Carol </ td> <td> 26 </ td> <td> Verpleegster </ td> </ tr> <tr> <td> Simone < / td> <td> 39 </ td> <td> Professor </ td> </ tr> </ table>

Output:

Opmerking: waarden binnen de eerste <tr> zijn rubrieken. Dus we gebruikten <th> wat een vet 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:

  • <thead> </ thead> = Voor het omwikkelen van de titels van een tafel. Het wordt afgedrukt naar elke gesplitste pagina van de tabel.
  • <tbody> </ tbody> = Voor het omwikkelen van de hoofdgegevens van een tabel. U kunt zoveel <tbody> hebben als u nodig heeft. Een <tbody> -tag betekent een afzonderlijke gegevensgroep.
  • <tfoot> </ tfoot> = 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 exemplified table in <thead>, <tbody> en <tfoot> kunnen groeperen:

Code:

<table> <thead> <tr> <th> Naam </ th> <th> Leeftijd </ th> <th> Beroep </ th> </ tr> </ thead> <tbody> <tr> <td> John </ td> <td> 27 </ td> <td> Zakenman </ td> </ tr> <tr> <td> Carol </ td> <td> 26 </ td> <td> Verpleegster </ td> </ tr> <tr> <td> Simone </ td> <td> 39 </ td> <td> Professor </ td> </ tr> </ tbody> <tfoot> <tr> <td> Totaal aantal personen: </ td> <td> 3 </ td> </ tr> </ tfoot> </ table>

Output:

<form> </ form>

Formulierelement wordt gebruikt voor het maken van interactieve formulieren voor webpagina's. Een HTML-formulier bevat verschillende opeenvolgende elementen. Bijvoorbeeld: <label>, <input>, <textarea> etc.

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 allerbelangrijkste invoertype is tekst. Het is geschreven als <input type = "text">. Typen kunnen ook radio, selectievakje, e-mail enzovoort zijn. Onderaan moet een submittype-invoer worden ingevoerd om een ​​submit-knop te maken.

<label> -tag wordt gebruikt voor het maken van labels en het koppelen ervan aan invoer. De regel van het associëren van labels met de ingangen is dat ze dezelfde waarde hebben voor het kenmerk "" "van het label en id =" "attribuut van de invoer.

Code:

<form action = "#"> <label for = "firstname"> Voornaam: </ label> <input type = "text" id = "firstname"> <br> <label for = "lastname"> Achternaam: </ label> <input type = "text" id = "lastname"> <br> <label for = "bio"> Short Bio: </ label> <textarea id = "bio" rows = "10" cols = " 30 "placeholder =" Vul hier je bio in ... "> </ textarea> <br> <label> Geslacht: </ label> <br> <label for =" mannetje "> Man </ label> <input type = "radio" naam = "geslacht" id = "mannetje"> <br> <label voor = "vrouw"> Vrouw </ label> <input type = "radio" naam = "geslacht" id = "vrouw"> <br > <input type = "submit" value = "Submit"> <form>

Output:

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


Ga Top

3- HTML-attributen

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

Een attribuut lijkt op attributename = "" en bevindt zich in de eerste HTML-tag. De waarde van het kenmerk gaat 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:

<h1 class = "heading"> Dit is de hoofdtitel </ h1>

href =””

href staat voor Hypertext Reference. Ze wijzen gebruikers naar verwijzingslinks. Anker-tag <a> gebruikt href om gebruikers naar een bestemmings-URL te sturen.

Code:

<a href="https://www.google.com/"> Google </a>

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:

<img src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" />

alt =””

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

Code:

<img src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" alt = "Hoofdkwartier van Google" />

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:

<h2 style = "color: red"> Dit is een andere titel </ h2>


Ga Top

4-codeweergave: blok vs inline

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

Vb .: <div>, <p>, <h1> - <h6>, formulier etc.

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

Bijvoorbeeld: <a>, <span>, <br>, <strong>, <img> etc.

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

Code:

<! DOCTYPE html> <html> <head> <title> Mijn eerste webpagina </ title> </ head> <body> <h2> Dit is een H2-kop. Het heeft Block-weergave. </ H2> <h2> Dit is een <u> andere </ u> H2-kop. Hier heeft de onderstrepingstag Inline-weergave. </ H2> </ body> </ html>

Output:


Ga Top

5- Dubbelcitaat 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.


Ga Top

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 vorige versies werden HTML-elementen geïdentificeerd door id / klassenamen. Bijvoorbeeld: <div id = "article"> </ div> werd als een artikel beschouwd.

In HTML5 stelt de tag <article> </ article> zichzelf voor als een artikel zonder dat er een id / klasse-ID voor nodig is.

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:

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

Een eenvoudige HTML5-structuur ziet er als volgt uit:

<! DOCTYPE html> <html> <head> <meta charset = "utf-8" /> <titel> Mijn eerste webpagina </ title> </ head> <body> <header> <nav> <ul> < li> Menu 1 </ li> <li> Menu 2 </ li> </ ul> </ nav> </ header> <main> <article> <header> <h2> Dit is de titel van het artikel </ h2> <p> Geplaatst door John Doe </ p> </ header> <p> Inhoud van het artikel komt hier </ p> </ article> </ main> <footer> <p> Copyright 2017 John Doe </ p> </ footer> </ body> </ html>


Ga Top

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.


Ga Top

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: