|
Wat je nu al geleerd hebt is de manier waarop
HTML werkt met het
tagsysteem. Nu gaan we onze eerste pagina maken.
HTML, HEAD en BODY
Elk HTML-document begint met de tag
<html>
en eindigt met
</html>
Alle tekst die buiten deze tags staat wordt niet zichtbaar (en
hoort daar eigenlijk ook niet te staan). Deze tags geven aan dat het om een
HTML-bestand gaat.
De code
<html></html>
draagt altijd twee verplichte elementen
met zich mee, te weten
<head></head>
en
<body></body>
Tussen de HEAD tags komt informatie te staan over het document en de titel,
terwijl tussen de BODY tags de eigenlijke tekst, beeld, audio en video wordt geplaatst met alle
opmaak- en indelingscodes.
De HEAD code op zich kan een hele reeks elementen bevatten,
waarvan alleen deze tag verplicht is :
<title></title>
De tekst die
tussen deze TITLE tags wordt ingetikt zal in de titelbalk van de browser zichtbaar zijn.
De
tekst in de titel wordt ook gebruikt als de pagina bij de favorieten (bookmarks)
wordt opgeslagen.
De start van een nieuw HTML-document ziet er altijd zo uit:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Deze tekst verschijnt in de titelbalk en in de bookmarks</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>Hier komt de tekst van je webpagina te staan
</body>
</html>
DOCTYPE en META zijn niet echt noodzakelijk, maar voeg je best toe omdat
je dan later je HTML-codes automatisch kunt laten controleren op fouten.
- De eerste regel is de zogenaamde doctype en vertelt de
browser welke versie van HTML
je gebruikt. In dit geval is dit versie 4.01, de recentste (en laatste)
versie.
- META bevat hier de zogenaamde tekenset.
De tekenset hangt samen met de taal die je gebruikt en speciale tekens die
je kunt invoegen zoals €, ©, ß, ... De West-Europese talen zijn vastgelegd
in de standaard
iso-8859-1. Je kan met META ook nog allerlei andere extra informatie meegeven. Later meer hierover.
Je pagina opslaan
Typ bovenstaande HTML-codes in je teksteditor (bijvoorbeeld Kladblok) en sla het bestand op, dan zie je in de Verkenner iets in de aard van bestandsnaam.txt staan.
De 3 (of 4) letters na de bestandsnaam en punt heet een extensie.
Zie je de extensie (.txt) niet, dan moet je eerst in Windows de extensies
zichtbaar maken:
- Open het Configuratiescherm.
- Ga naar Mapopties (bij Vormgeving) .
- Kies het tabblad Weergave.
- Vink daar Bestandsextensies verbergen voor bekende
bestandstypes uit.
Verander de extensie van je opgeslagen pagina in .html (of .htm). Dit doe je door te klikken met de
rechtermuisknop op het bestand en Naam wijzigen te kiezen in
het snelmenu dat verschijnt. De vraag of je zeker weet dat je de extensie wilt wijzigen beantwoord je met
Ja.
Je kan natuurlijk ook meteen vanuit je teksteditor opslaan als .html. Selecteer als bestandstype bij het opslaan "alle bestanden" in plaats van .txt, en geef je document direct handmatig een .html extensie, bijvoorbeeld "pagina-1.html".
Het maakt niet veel uit of je je bestand als .htm of als .html opslaat. Beide types worden gewoon door je browser als HTML-document herkend. Toen alles nog op DOS werkte kregen bestanden extensies van 3 letters mee omdat het systeem niet meer letters aankon. Tegenwoordig kan elk besturingssysteem ook langere extensies aan.
Als je de pagina goed hebt opgeslaan, zal ze in je verkenner het icoon van je standaard browser krijgen. Als je er op dubbelklikt, zal de webpagina openen in je browser.
Je pagina wijzigen
Wil je je broncode weer zichtbaar maken om wijzigingen aan de pagina aan te
brengen ? Je kan in de menubalk van je browser Beeld kiezen, en vervolgens
Bron . Je kan ook op de pagina gaan staan in je geopende browser, en met je rechtermuisknop de Bron opvragen in het snelmenu. De pagina zal dan in beide gevallen automatisch in Notepad openen. Dit werkt wel enkel in Internet Explorer !
Zowiezo kan je de pagina natuurlijk ook altijd gewoon openen in je teksteditor zelf. Vergeet na de wijzigingen in elk geval niet op te slaan !
Je wijzigingen bekijken
In de browser klik je op Vernieuwen om de wijzigingen zichtbaar te
maken. Dit werkt natuurlijk alleen voor pagina's die op je PC staan. Online
websites kun je op deze manier natuurlijk niet aanpassen, want anders zou
iedereen met een beetje HTML-kennis je website kunnen saboteren.
Voorlopig weet je genoeg om je eerste eenvoudige webpagina met wat tekst te
maken.
Het volgende gedeelte van de HTML cursus is Inhoud structureren
in HTML
, wat je uitlegt over hoe je kleuren kunt toevoegen, randen weergeven enzovoort.
|
Ontwerp je site