HTML handleiding

HTML TUIS HTML Inleiding HTML-redakteurs HTML Basies HTML elemente HTML-kenmerke HTML-opskrifte HTML paragrawe HTML-style HTML-formatering HTML-aanhalings HTML-kommentaar HTML kleure HTML CSS HTML skakels HTML beelde HTML Favicon HTML-tabelle HTML-lyste HTML-blok en inlyn HTML-klasse HTML ID HTML iframes HTML JavaScript HTML-lêerpaaie HTML kop HTML-uitleg HTML reageer HTML Rekenaarkode HTML semantiek HTML-stylgids HTML-entiteite HTML Simbole HTML Emoji's HTML-tekenset HTML URL enkodeer HTML vs. XHTML

HTML -vorms

HTML-vorms HTML-vorm eienskappe HTML-vormelemente HTML-invoertipes HTML-invoerkenmerke HTML-invoervorm-kenmerke

HTML -grafika

HTML-doek HTML SVG

HTML Media

HTML Media HTML-video HTML oudio HTML-inproppe HTML YouTube

HTML API's

HTML geoligging HTML Sleep/Drop HTML-webberging HTML Web Werkers HTML SSE

HTML voorbeelde

HTML voorbeelde HTML vasvra HTML-oefeninge HTML-sertifikaat HTML Opsomming HTML-toeganklikheid

HTML- verwysings

HTML-merkerlys HTML-kenmerke HTML globale kenmerke HTML-blaaierondersteuning HTML-gebeurtenisse HTML kleure HTML-doek HTML oudio/video HTML Doktipes HTML-karakterstelle HTML URL enkodeer HTML-langkodes HTTP-boodskappe HTTP metodes PX na EM-omskakelaar Sleutelbord kortpaaie

HTML -stylgids


'n Konsekwente, skoon en netjiese HTML-kode maak dit makliker vir ander om jou kode te lees en te verstaan.

Hier is 'n paar riglyne en wenke vir die skep van goeie HTML-kode.


Verklaar altyd dokumenttipe

Verklaar altyd die dokumenttipe as die eerste reël in jou dokument.

Die korrekte dokumenttipe vir HTML is:

<!DOCTYPE html>

Gebruik kleinletterelementname

HTML laat die vermenging van hoofletters en kleinletters in elementname toe.

Ons beveel egter aan om kleinletterelementname te gebruik, want:

  • Om hoofletters en kleinlettername te meng lyk sleg
  • Ontwikkelaars gebruik gewoonlik kleinlettername
  • Kleinletters lyk skoner
  • Kleinletters is makliker om te skryf

Goed:

<body>
<p>This is a paragraph.</p>
</body>

Slegte:

<BODY>
<P>This is a paragraph.</P>
</BODY>


Maak alle HTML-elemente toe

In HTML hoef jy nie alle elemente (byvoorbeeld die <p>element) toe te maak nie.

Ons beveel egter sterk aan om alle HTML-elemente soos volg te sluit:

Goed:

<section>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
</section>

Slegte:

<section>
  <p>This is a paragraph.
  <p>This is a paragraph.
</section>

Gebruik kleinletterkenmerkname

HTML laat die vermenging van hoofletters en kleinletters in kenmerkname toe.

Ons beveel egter aan om kleinletterkenmerkname te gebruik, want:

  • Om hoofletters en kleinlettername te meng lyk sleg
  • Ontwikkelaars gebruik gewoonlik kleinlettername
  • Kleinletters lyk skoner
  • Kleinletters is makliker om te skryf

Goed:

<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

Slegte:

<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

Haal altyd kenmerkwaardes aan

HTML laat kenmerkwaardes toe sonder aanhalingstekens.

Ons beveel egter aan om kenmerkwaardes aan te haal, want:

  • Ontwikkelaars haal gewoonlik eienskapwaardes aan
  • Aangehaalde waardes is makliker om te lees
  • Jy MOET aanhalingstekens gebruik as die waarde spasies bevat

Goed:

<table class="striped">

Slegte:

<table class=striped>

Baie sleg:

Dit sal nie werk nie, want die waarde bevat spasies:

<table class=table striped>

Spesifiseer altyd alt, breedte en hoogte vir prente

Spesifiseer altyd die altkenmerk vir beelde. Hierdie kenmerk is belangrik as die beeld om een ​​of ander rede nie vertoon kan word nie.

Definieer ook altyd die widthen heightvan beelde. Dit verminder flikkering, want die blaaier kan spasie vir die prent reserveer voordat dit gelaai word.

Goed:

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Slegte:

<img src="html5.gif">

Ruimtes en Gelyke Tekens

HTML laat spasies rondom gelyke tekens toe. Maar spasieloos is makliker om te lees en groepeer entiteite beter saam.

Goed:

<link rel="stylesheet" href="styles.css">

Slegte:

<link rel = "stylesheet" href = "styles.css">

Vermy lang kodelyne

Wanneer 'n HTML-redigeerder gebruik word, is dit NIE gerieflik om regs en links te blaai om die HTML-kode te lees nie.

Probeer om te lang kodelyne te vermy.


Leë lyne en inkeping

Moenie leë reëls, spasies of inkepings sonder 'n rede byvoeg nie.

Vir leesbaarheid, voeg leë reëls by om groot of logiese kodeblokke te skei.

Vir leesbaarheid, voeg twee spasies van inkeping by. Moenie die tab-sleutel gebruik nie.

Goed:

<body>

<h1>Famous Cities</h1>

<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</p>

</body>

Slegte:

<body>

  <h1>Famous Cities</h1>

  <h2>Tokyo</h2>

  <p>
    Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.
    It is the seat of the Japanese government and the Imperial Palace,
    and the home of the Japanese Imperial Family.
  </p>

</body>

Goeie tabel voorbeeld:

<table>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>A</td>
    <td>Description of A</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Description of B</td>
  </tr>
</table>

Goeie lys voorbeeld:

<ul>
  <li>London</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ul>

Moet nooit die <titel>-element oorslaan nie

Die <title>element word vereis in HTML.

Die inhoud van 'n bladsytitel is baie belangrik vir soekenjinoptimalisering (SEO)! Die bladsytitel word deur soekenjinalgoritmes gebruik om die volgorde te bepaal wanneer bladsye in soekresultate gelys word.

Die <title>element:

  • definieer 'n titel in die blaaiernutsbalk
  • verskaf 'n titel vir die bladsy wanneer dit by gunstelinge gevoeg word
  • vertoon 'n titel vir die bladsy in soekenjinresultate

Probeer dus om die titel so akkuraat en betekenisvol as moontlik te maak: 

<title>HTML Style Guide and Coding Conventions</title>

Laat u <html> en <body> weg?

'n HTML-bladsy sal bekragtig sonder die <html>en <body>-merkers:

Voorbeeld

<!DOCTYPE html>
<head>
  <title>Page Title</title>
</head>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

Ons beveel egter sterk aan om altyd die <html>en <body>etikette by te voeg!

Weglating <body>kan foute in ouer blaaiers veroorsaak.

Welaat <html>en <body> kan ook DOM- en XML-sagteware ineenstort.


Verlaat jy <kop>?

Die HTML <head> tag kan ook weggelaat word.

Blaaiers sal alle elemente voor <body>, by 'n verstekelement voeg <head> .

Voorbeeld

<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Ons beveel egter aan om die <head>merker te gebruik.


Maak leë HTML-elemente toe?

In HTML is dit opsioneel om leë elemente toe te maak.

Toegelaat:

<meta charset="utf-8">

Ook toegelaat:

<meta charset="utf-8" />

As jy verwag dat XML/XHTML-sagteware toegang tot jou bladsy sal kry, hou die sluitingsstreep (/), want dit word in XML en XHTML vereis.


Voeg die lang kenmerk by

Jy moet altyd die langkenmerk in die <html>merker insluit om die taal van die webblad te verklaar. Dit is bedoel om soekenjins en blaaiers te help.

Voorbeeld

<!DOCTYPE html>
<html lang="en-us">
<head>
  <title>Page Title</title>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Meta data

Om behoorlike interpretasie en korrekte soekenjinindeksering te verseker, moet beide die taal en die karakterkodering so vroeg as moontlik in 'n HTML-dokument gedefinieer word:<meta charset="charset">

<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
</head>

Stel die uitsigpoort

Die viewport is die gebruiker se sigbare area van 'n webblad. Dit verskil met die toestel – dit sal kleiner wees op 'n selfoon as op 'n rekenaarskerm.

Jy moet die volgende <meta>element by al jou webblaaie insluit:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Dit gee die blaaier instruksies oor hoe om die bladsy se afmetings en skaal te beheer.

Die width=device-widthdeel stel die breedte van die bladsy in om die skermwydte van die toestel te volg (wat sal wissel na gelang van die toestel).

Die initial-scale=1.0deel stel die aanvanklike zoomvlak in wanneer die bladsy die eerste keer deur die blaaier gelaai word.

Hier is 'n voorbeeld van 'n webbladsy sonder die viewport-metamerker, en dieselfde webbladsy met die viewport-metamerker:

Wenk: As jy deur hierdie bladsy met 'n foon of tablet blaai, kan jy op die twee skakels hieronder klik om die verskil te sien.



HTML-kommentaar

Kort opmerkings moet op een reël geskryf word, soos volg:

<!-- This is a comment -->

Opmerkings wat oor meer as een reël strek, moet soos volg geskryf word:

<!--
  This is a long comment example. This is a long comment example.
  This is a long comment example. This is a long comment example.
-->

Lang opmerkings is makliker om waar te neem as hulle met twee spasies ingekeep is.


Gebruik stylblaaie

Use simple syntax for linking to style sheets (the type attribute is not necessary):

<link rel="stylesheet" href="styles.css">

Short CSS rules can be written compressed, like this:

p.intro {font-family:Verdana;font-size:16em;}

Long CSS rules should be written over multiple lines:

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
  • Place the opening bracket on the same line as the selector
  • Use one space before the opening bracket
  • Use two spaces of indentation
  • Use semicolon after each property-value pair, including the last
  • Only use quotes around values if the value contains spaces
  • Place the closing bracket on a new line, without leading spaces

Loading JavaScript in HTML

Use simple syntax for loading external scripts (the type attribute is not necessary):

<script src="myscript.js">

Accessing HTML Elements with JavaScript

Using "untidy" HTML code can result in JavaScript errors.

These two JavaScript statements will produce different results:

Example

getElementById("Demo").innerHTML = "Hello";

getElementById("demo").innerHTML = "Hello";

Visit the JavaScript Style Guide.


Use Lower Case File Names

Some web servers (Apache, Unix) are case sensitive about file names: "london.jpg" cannot be accessed as "London.jpg".

Other web servers (Microsoft, IIS) are not case sensitive: "london.jpg" can be accessed as "London.jpg".

If you use a mix of uppercase and lowercase, you have to be aware of this.

If you move from a case-insensitive to a case-sensitive server, even small errors will break your web!

To avoid these problems, always use lowercase file names!


File Extensions

HTML files should have a .html extension (.htm is allowed).

CSS files should have a .css extension.

JavaScript files should have a .js extension.


Differences Between .htm and .html?

There is no difference between the .htm and .html file extensions!

Both will be treated as HTML by any web browser and web server.


Default Filenames

When a URL does not specify a filename at the end (like "https://www.w3schools.com/"), the server just adds a default filename, such as "index.html", "index.htm", "default.html", or "default.htm".

If your server is configured only with "index.html" as the default filename, your file must be named "index.html", and not "default.html".

However, servers can be configured with more than one default filename; usually you can set up as many default filenames as you want.