HTML - Die Hoofelement
Die HTML- <head>element is 'n houer vir die volgende elemente:
<title>, <style>,
<meta>, <link>, <script>, en <base>.
Die HTML <head> Element
Die <head>element is 'n houer vir metadata (data oor data) en word tussen die <html>merker en die <body>merker geplaas.
HTML-metadata is data oor die HTML-dokument. Metadata word nie vertoon nie.
Metadata definieer tipies die dokumenttitel, karakterstel, style, skrifte en ander meta-inligting.
Die HTML <title> Element
Die <title>element definieer die titel van die dokument. Die titel moet slegs teks wees, en dit word in die blaaier se titelbalk of in die bladsy se oortjie gewys.
Die <title>element word vereis in HTML-dokumente!
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 soekenjin-resultate
Probeer dus om die titel so akkuraat en betekenisvol as moontlik te maak!
'n Eenvoudige HTML-dokument:
Voorbeeld
<!DOCTYPE html>
<html>
<head>
<title>A Meaningful Page
Title</title>
</head>
<body>
The content of the document......
</body>
</html>
Die HTML <style> Element
Die <style>element word gebruik om stylinligting vir 'n enkele HTML-bladsy te definieer:
Voorbeeld
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
Die HTML <skakel> Element
Die <link>element definieer die verhouding tussen die huidige dokument en 'n eksterne hulpbron.
Die <link>
merker word meestal gebruik om te skakel na eksterne stylblaaie:
Voorbeeld
<link rel="stylesheet" href="mystyle.css">
Wenk: Om alles oor CSS te leer, besoek ons CSS-tutoriaal .
Die HTML <meta> Element
Die <meta>element word tipies gebruik om die karakterstel, bladsybeskrywing, sleutelwoorde, outeur van die dokument en viewport-instellings te spesifiseer.
Die metadata sal nie op die bladsy vertoon word nie, maar word gebruik deur blaaiers (hoe om inhoud te vertoon of bladsy te herlaai), deur soekenjins (sleutelwoorde) en ander webdienste.
Voorbeelde
Definieer die karakterstel wat gebruik word:
<meta charset="UTF-8">
Definieer sleutelwoorde vir soekenjins:
<meta name="keywords" content="HTML, CSS, JavaScript">
Definieer 'n beskrywing van jou webblad:
<meta name="description" content="Free Web tutorials">
Definieer die skrywer van 'n bladsy:
<meta name="author" content="John Doe">
Herlaai dokument elke 30 sekondes:
<meta http-equiv="refresh" content="30">
Stel die viewport om jou webwerf goed te laat lyk op alle toestelle:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Voorbeeld van <meta>etikette:
Voorbeeld
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John
Doe">
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.
Die HTML <script> Element
Die <script>element word gebruik om kliënt-kant JavaScripts te definieer.
Die volgende JavaScript skryf "Hallo JavaScript!" in 'n HTML-element met id="demo":
Voorbeeld
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
Wenk: Om alles oor JavaScript te leer, besoek ons JavaScript-tutoriaal .
Die HTML <basis> Element
Die <base>element spesifiseer die basis-URL en/of teiken vir alle relatiewe URL's in 'n bladsy.
Die <base>merker moet óf 'n href óf 'n teikenkenmerk teenwoordig hê, óf albei.
Daar kan net een enkele <base>
element in 'n dokument wees!
Voorbeeld
Spesifiseer 'n verstek-URL en 'n verstekteiken vir alle skakels op 'n bladsy:
<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>
<body>
<img src="images/stickman.gif" width="24" height="39"
alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>
Hoofstuk Opsomming
- Die
<head>element is 'n houer vir metadata (data oor data) - Die
<head>element word tussen die<html>merker en die<body>merker geplaas - Die
<title>element word vereis en dit definieer die titel van die dokument - Die
<style>element word gebruik om stylinligting vir 'n enkele dokument te definieer - Die
<link>merker word meestal gebruik om te skakel na eksterne stylblaaie - Die
<meta>element word tipies gebruik om die karakterstel, bladsybeskrywing, sleutelwoorde, outeur van die dokument en viewport-instellings te spesifiseer - Die
<script>element word gebruik om kliënt-kant JavaScripts te definieer - Die
<base>element spesifiseer die basis-URL en/of teiken vir alle relatiewe URL's in 'n bladsy
HTML kop Elemente
| Tag | Description |
|---|---|
| <head> | Defines information about the document |
| <title> | Defines the title of a document |
| <base> | Defines a default address or a default target for all links on a page |
| <link> | Defines the relationship between a document and an external resource |
| <meta> | Defines metadata about an HTML document |
| <script> | Defines a client-side script |
| <style> | Defines style information for a document |
Vir 'n volledige lys van alle beskikbare HTML-merkers, besoek ons HTML-merkerverwysing .