Gebruik 'n HTML-skelet

'n Skelet is die ondersteunende raamwerk van 'n organisme.

Dit is tipies gemaak van iets hard, om 'n meer kwesbare liggaam te beskerm.

Ensiklopedie

Elke webontwikkelaar moet 'n HTML-skelet hê.

Dit moet in sy sak gehou word en vir elke werk gebruik word:

Voorbeeld

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="">
<style>
</style>
<script src=""></script>
<body>

<img src="img_la.jpg" alt="LA" style="width:100%">

<div class="">
 <h1>This is a Heading</h1>
 <p>This is a paragraph.</p>
 <p>This is another paragraph.</p>
</div>

</body>
</html>

Klik op die "Probeer dit self"-knoppie om te sien hoe dit werk!

Probeer om die teks "Dit is 'n opskrif" na "Dit is my troue" te verander.

Het jy dit gemaak?

Baie geluk! Nou weet jy hoe om HTML te wysig.


HTML-skelet verduidelik

Die DOCTYPE moet teenwoordig wees. Dit lig die blaaier in dat dit 'n HTML-dokument is:

<!DOCTYPE html>

'n HTML-beginmerker en 'n HTML-eindmerker definieer die begin en einde van 'n HTML-dokument.

Die taal is Engels:

<html lang="en">

</html>

'n Meta-karaktersetmerker definieer die karakterstel (UTF-8):

Die HTML-bladsy ontbreek kopmerkers. Kopmerkers word nie in HTML benodig nie.

In HTML word alles voor die lyfmerker as 'n deel van die kop beskou.

<meta charset="UTF-8">

Die HTML-standaard vereis 'n behoorlike bladsytitel:

<title>Page Title</title>

'n Meta-kykpoort-merker laat die bladsy goed lyk op alle skermgroottes (skootrekenaar, selfoon):

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

Die skakelmerker skakel na 'n stylblad:

<link rel="stylesheet" href="name">

Beginmerker en eindmerker omring toekomstige CSS-stilering:

<style>
</style>

Die script tag skakel na 'n script:

<script src="name"></script>

Beginmerker en eindmerker omring die sigbare liggaam van die HTML-dokument:

<body>
</body>

Beeldmerkers definieer HTML-beelde:

<img src="img_la.jpg" alt="LA" style="width:100%">

Maak dit 'n gewoonte om HTML-afdelings in div-elemente te "pak".

Berei jouself voor om elke afdeling 'n klasnaam te gee:

<div class="class name">
</div>

Opskrifetikette definieer HTML-opskrifte:

<h1>This is a Heading</h1>

Paragraafmerkers definieer HTML paragraps:

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