Websites met stijl

Na het uitpakken is een map websitesmetstijl aangemaakt met de submappen apollo, sjablonen en terschelling.

Overzicht van het materiaal

1. De mappen

Na het downloaden en uitpakken van het materiaal (wepsitesmetstijl.zip) is de volgende mappenstruktuur gevormd:

Het rode pijltje is alleen van belang bij 'de website van Terschelling in de map org compleet maken', onderaan dit artikel.

De map Apollo

Hierin bevinden zich alle bestanden van de Apollo-website:
- de html-bestanden in de hoofdmap Apollo,
- de afbeeldingen in de submap afbeeldingen,
- het stijlblad in de submap stijlen.

De map sjablonen

Hierin bevinden zich 11 sjablonen (de bestanden sjabloon1.html...sjabloon5.html, sjabloon1a.html...sjabloon5a.html, terschelling.html). Het zijn kale websites die je kan gebruiken als uitgangspunt voor een eigen website.
De bijbehorende stijlbaden (1.css...5.css, 1a.css...5a.css, terschelling.css) staan in de submap css.
In de submap img (sjablonen/img) staan de afbeeldingen voor de sjablonen (achtergrond, afbeelding1.jpg...afbeelding5.jpg, naarboven.png).

De map Terschelling

Hierin zet je de html-bestanden die je in de cursus maakt.
Het stijlblad terschelling.css dat je in de cursus maakt komt in de submap css (terschelling/css).
De voor de website benodigde afbeeeldingen staan al kant en klaar in de submap img (terschelling/img).
De submap org (terschelling/org) bevat de kant en klare bestanden voor de website.
Die heb je eigenlijk niet nodig, want je maakt ze zelf. Maar voor het geval er iets echt niet lukt, kan je de originele bestanden hier vinden.
Org heeft ook een submap css (terschelling/org/css). Daarin staat het complete stijlblad. Ook dat heb je alleen nodig als het maken van je eigen stijlblad niet wil lukken.

De website van Terschelling in de map org compleet maken

Als je in de map org het bestand index.html opent, zal je de website in je browser zien in de goede opmaak, maar zonder de afbeeldingen. Dat komt omdat er geen afbeeldingen in de map org staan.

Wil je de website hier compleet werkend hebben, dan moet je de map terschelling/img naar org kopiëren (zie het rode pijltje in de figuur.) Nodig is het niet. De map org is in principe alleen bedoeld om een origineel bestand op te halen als jouw versie van de website niet werkt.

Tip

Je kan een bestand op je eigen computer in de browser openen door vanuit de verkenner op het bestand te dubbelklikken, of door in de browser op ctrl-O te drukken (de letter O, niet het cijfer 0) en dan naar het bestand te bladeren.
Meer info in de naslag bij lokaal.

Een editor kiezen

Voor het maken van de pagina's van de website heb je een editor van platte tekst (=tekst zonder opmaak) nodig. Twee goede gratis editors zijn Notepad++ en Visual Studio Code. Elk heeft zijn eigen voor- en nadelen.

Notepad++

Ik gebruik Notepad++. Het is een prima programma. Het bestaat al lang, wordt veel gebruikt en wordt goed onderhouden.
De taal van menu en hulpteksten kan worden ingesteld, ook in het Nederlands. Een nadeel: het is alleen beschikbaar voor Windows, niet voor Apple- of Linux computers.

Visual Studio Code

Sinds enkele jaren is er Visual Studio Code, vaak afgekort tot VSC, een gratis editor van Microsoft. Een prima programma dat geschikt is voor Windows, Linux en Mac-OS. Een nadeeltje: het programma is engelstalig.
Naast de volledige versie, die geïnstalleerd moet worden is er een iets eenvoudiger webversie die je simpel start door naar de website https://vscode.dev/ te gaan.

Andere editors

Heb je al een andere editor op je computer staan, bv. HTML-kit? Dan hoef je Notepad++ of Visual Studio Code niet te installeren.

Gebruik echter liever geen Kladblok/Notepad, NVU of KompoZer.
Kladblok/Notepad heeft te weinig mogelijkheden;
NVU en KompoZer zijn verouderd en worden niet meer onderhouden. Ze kunnen niet goed omgaan met de nieuwe tags van HTML5 en erger: ze veranderen bij het opslaan soms de code die je hebt ingetikt.

Opmerking

Editors zetten de codes in een kleurtje, zodat die opvallen.
In de cursus worden de codes getoond in de (standaard) kleuren van Notepad++. Gebruik je een andere editor of een ander kleurenschema van Notepad++ dan zien de kleuren er bij jou wat anders uit. Dat is overigens geen enkel bezwaar.

Let op

Let bij het downloaden van software op dat je geen extra programma's installeert die je eigenlijk niet wilt. Soms is er in de installatieprocedure een scherm waarin een of meer extra programma's staan aangevinkt.

Als je zonder op te letten op OK of Volgende klikt, wordt zo'n programma meegeïnstalleerd. Vaak gaat het om een programma waar je niets aan hebt, of dat zelfs irritant of schadelijk is.

Goed opletten en dergelijke vinkjes weghalen.

Verder

Heb je het cursusmateriaal gedownload en uitgepakt; en heb je een editor geïnstalleerd?