Introductie
Bij de meeste providers (XS4ALL, Casema, het Net etc.) kan iedereen een eigen 'home' pagina maken.
Bij de providers heeft men standaard geen mogelijkheid om een database te gebruiken.
Voor een uitgebreide site kan een database of php-perl-python programmeertaal nodig zijn.
In dit geval is een 'hosting' provider nodig, of moet men zelf een webserver installeren.
Om de pagina's naar de website van de provider te kopiëren, kan men het beste WinSCP gebruiken.
Soms is het handig om zelf op de server van de website in te loggen. Hiervoor kan men PuTTY gebruiken.
Voor het 'beheer' van de website (met een Linux server!) is enige basis kennis van Linux nodig.
Zowel WinSCP als Putty gebruiken een beveiligde 'geëncrypte' 'SSH' verbinding.
N.B.:
Bij de hieronder genoemde links naar de WikipediA is in de Engelse versie meer informatie te lezen, vooral 'WinSCP'!
(selecteer links onder bij in andere talen Engels.)
Zie ook WikipediA: PuTTY en
WinSCP.
Informatie over beveiligde geëncrypte verbinding: SSH = Secure Shell
Voor het leren schrijven van html documenten kan ik de Handleiding HTML aanbevelen.
In de volgende hoofdstukken: layout en voorbeeld staat een eenvoudige website met enkele pagina's beschreven.
Het voorbeeld kan ook als zip file gedownload worden.
In het hoofdstuk upload staan wat aanwijzingen om de bestanden naar de provider te kopiëren.
Layout
Om te beginnen, kan men met eenvoudige html al een site maken.
Het belangrijkste is het 'index.html' bestand dat layout van de website bepaald.
Dit staat goed beschreven in de handleiding html: zie 'frames' in
Handleiding HTML: frames
Voor de inrichting moet men denken over:
- layout: menu en inhoud
- (directory) structuur van de files
- en over de gebruikte kleuren (leesbaarheid, achtergrond)
opmerking: een witte achtergrond is het meest neutraal, met een kleur moet men rekening houden met andere harmonieerende kleuren.
Om in Windows te testen kan men op een PC een C:\www directory maken.
Voorbeeld structuur:
- maak directory C:\www voor index.html en menu en startpagina
- maak subdirectory "doc" voor alle overige pagina's
- maak subdirectory "plaatjes" voor alle afbeeldingen
Voorbeeld www map:
Voorbeeld doc map:
Op mijn website heb ik bovenstaand voorbeeld staan: zie voorbeeld (opent in nieuw venster)
Zie volgende pagina voor de 'bron' code (tekst) van de bestanden!
opmerkingen:
- de tekst het volgende voorbeeld kan ook in windows gebruikt worden: kopiëren en plakken
- met een html-editor ziet de tekst er 'vrolijker' uit met kleuren: handig bij het zoeken naar fouten! ('syntax-highlighting')
- voor menu is externe "css" 'style sheet' niet nodig: voor één file voldoet een interne stijl in de 'head',
voor de overige pagina's is dit wel sterk aanbevolen!
- kleine foutjes kunnen grote gevolgen hebben, regelmatig checken met browser!
Om de inhoud naar de provider te kopiëren gebruikte men vroeger ftp, voor een betere veiligheid kan men beter 'versleuteld' kopiëren met b.v. WinSCP.
Bij het inloggen gebruikt men dezelfde naam en wachtwoord als voor email.
In het geval van XS4ALL komen de pagina's in een 'WWW' directory.
Meer informatie staat in de hoofdstukken: internet, Linux, Windows
Voorbeeld
In het vorige hoofdstuk staat een eenvoudige statische website beschreven.
Om de inhoud te controleren is het in dit geval niet nodig om een webserver te gebruiken.
De structuur (menu) en de tekst kan direct met een browser bekeken worden.
De bestanden van het voorbeeld staan in onderstaande zip file,
de 'www' directorie kan het beste geplaats worden in C:\.
opmerking:
Indien de zipfile 'standaard' in Windows wordt uitgepakt, komt deze in de 'Documents and Settings' directorie.
Daardoor werken de links in het menu niet, opgepast!
inhoud: van de bestanden
Linux commando's:
- in het voorbeeld is ls -lr het (Linux) commando om de directory lijst te zien
- cat index.html het commando ('catalog') om de inhoud van een file te zien
- in het voorbeeld is rood gebruikt voor de commando's om onderscheid te maken met de systeem prompt
xs4all.nl - PuTTY
leeuwef@xs3:~/WWW/doc/www% ls -lr
total 16
drwxr-xr-x 3 leeuwef user 4096 Mar 22 08:40 doc
-rw-r--r-- 1 leeuwef user 290 Aug 14 2008 index.html
-rw-r--r-- 1 leeuwef user 992 Aug 15 2008 inhoud.html
-rw-r--r-- 1 leeuwef user 744 Aug 14 2008 menu.html
index bestand geeft indeling website: links menu, rechts tekst
xs4all.nl - PuTTY
leeuwef@xs3:~/WWW/doc/www% cat index.html
<!DOCtype HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head
<title>Mijn HOME pagina</title>
</head>
<frameset cols="20%,80%" frameborder="no">
<frame name="menu" src="menu.html">
<frame name="inhoud" src="inhoud.html">
</frameset>
<noframes>
<body>
To view this page, your browser must support frames.
</body>
</noframes>
</html>
xs4all.nl - PuTTY
leeuwef@xs3:~/WWW/doc/www% cat menu.html
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<style type="text/css">
body { background-color: #000066; font-family: sans-serif; font-size: 12pt; }
a { text-decoration: none; color:white; }
a:visited { color:white; }
a:active { color:red; }
a:hover { color:red; }
</style>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
<base target="inhoud">
</head>
<body>
<P>
<center><a href="index.html" target="_top">home</a></center>
<p>
<hr color=yellow>
<b>
<a href="doc/pagina1.html">Hoofdstuk 1</a><br>
<a href="doc/pagina2.html">Hoofdstuk 2</a><br>
<a href="doc/software.html">software</a><br>
<a href="doc/voorbeeld.html">html voorbeeld</a><br>
</b>
<hr color=yellow>
</font>
</body>
</html>
xs4all.nl - PuTTY
leeuwef@xs3:~/WWW/doc/www% cat inhoud.html
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>start pagina</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="doc/stijl.css">
</head>
<body>
<h1>Welkom op mijn website!</h1>
<p>
Hier komt een omschrijving van de inhoud.<br>
via het menu kan je verschillende hoofdstukken bekijken!
<p>
<img src="doc/plaatjes/new.gif" border="0" WIDTH=32 HEIGHT=24>
<p>
<p>
Hier komt een omschrijving van de wijzigingen.
<p>
<p>
<!--
email contact: <img src="doc/plaatjes/email.gif" border="0"> webmaster
-->
<img src="doc/plaatjes/contact.jpg" title="mail is welkom!" border="0">
<!--
dit is een commentaar regel, die zie je niet op de website
Het is aan te bevelen, om je email adres in een plaatje "contact.jpg" op te slaan,
hierdoor is de kans kleiner, dat je spam krijgt!
Zie voorbeeld.
-->
</body>
</html>
xs4all.nl - PuTTY
leeuwef@xs3:~/WWW/doc/www% cat stijl.css
/* stijlblad */
H1, H2, H3, H4 { font-family: sans-serif; font-weight: bold }
H1 { font-size: 18pt; }
H2 { font-size: 14pt; }
H3 { font-size: 13pt; }
H4 { font-size: 13pt; }
HTML,BODY { color: #000099; background-color: #FFFFDD; }
BODY, P, TD, TH, div { font-family: sans-serif; font-size: 12 pt; }
A:link { text-decoration: none; font-weight: normal; color: #0000FF; }
A:visited { text-decoration: none; font-weight: normal; color: blue; }
A:hover { text-decoration: underline; font-weight: normal; color: red; }
A:active { text-decoration: none; font-weight: normal; color: red; }
Upload
Nadat de 'website' in de PC werkt, moeten de files naar de provider worden gekopiërd.
Vroeger werd vaak het ftp protocol gebruikt om de files te uploaden. Een nadeel van ftp is, dat de data niet versleuteld is.
Ook het user-id (logon) en wachtwoord is niet versleuteld tijdens inloggen. Dit is geen probleem in een 'lokaal' thuis-netwerk.
Zie ook artikel: www.security.nl: ftp ongeschikt
Informatie uit de WikipediA:
Voor het uploaden naar een website kan met het beste Secure Copy
of FTPS (secure ftp) gebruiken.
Voor Windows kan men WinSCP gebruiken.
Na de 'upload' met WinSCP moeten de rechten van de files gecontroleerd worden.
Uit veiligheids overwegingen, kan het zijn, dat alleen de eigenaar 'lees/schrijf-rechten'( 600 = -rw------- )
heeft, het doel is echter, dat iedereen de pagina kan lezen!
Opmerking: de rechten van nieuwe bestanden moeten gecheckt worden.
Dit kan met met WinSCP hersteld worden: met de rechter muisknop op de remote file kunnen de rechten aangepast worden, zie
handleiding xs4all WinSCP
Indien meerdere files worden gekopiërd, kan men de rechten ook via het menu instellen:
via Menu | Options | Preferences | Transfer | Upload options
kan de set permissions ingesteld worden:
voorbeeld:
Het aanpassen van de rechten kan eenvoudig met een PuTTY terminal op de webserver bij de provider worden uitgevoerd.
Met het chmod 'change mode' commando kan dit voor alle bestanden in een keer uitgevoerd worden.
voorbeeld:
aanpassen van de lees-rechten in de Aldfaer directory met de 'persoonskaarten': chmod 644 * = -rw-r--r--.
met het ls -l commando voor en na chmod maakt de verschillen duidelijk.
xs3.xs4all.nl - PuTTY
leeuwef@xs3:~/WWW/doc/aldfaer% ls -l
-rw------- 1 leeuwef user 2615 Sep 27 07:15 zevenbergen_ariaantje_668.html
-rw-r--r-- 1 leeuwef user 2580 Sep 27 07:15 zomeren_arie_587.html
-rw-r--r-- 1 leeuwef user 3528 Sep 27 07:15 zomeren_cornelia_291.html
-rw-r--r-- 1 leeuwef user 4004 Sep 27 07:15 zonnevijlle_adriaan_102.html
-rw-r--r-- 1 leeuwef user 3017 Sep 27 07:15 zonnevijlle_janna_470.html
-rw-r--r-- 1 leeuwef user 2716 Sep 27 07:15 zonnevijlle_loureijns_173.html
-rw-r--r-- 1 leeuwef user 5076 Sep 27 07:14 zonnevijlle_sara_66.html
-rw------- 1 leeuwef user 2310 Sep 27 07:15 zuidendorp_maria_747.html
-rw-r--r-- 1 leeuwef user 4622 Sep 27 07:15 zwiep_chris_106.html
-rw------- 1 leeuwef user 3310 Sep 27 07:15 zwiep_willem_698.html
-rw-r--r-- 1 leeuwef user 3294 Sep 27 07:15 zwier_jacob_336.html
-rw-r--r-- 1 leeuwef user 2154 Sep 27 07:15 zwier_jacob_337.html
leeuwef@xs3:~/WWW/doc/aldfaer% chmod 644 *
leeuwef@xs3:~/WWW/doc/aldfaer% ls -l
-rw-r--r-- 1 leeuwef user 2615 Sep 27 07:15 zevenbergen_ariaantje_668.html
-rw-r--r-- 1 leeuwef user 2580 Sep 27 07:15 zomeren_arie_587.html
-rw-r--r-- 1 leeuwef user 3528 Sep 27 07:15 zomeren_cornelia_291.html
-rw-r--r-- 1 leeuwef user 4004 Sep 27 07:15 zonnevijlle_adriaan_102.html
-rw-r--r-- 1 leeuwef user 3017 Sep 27 07:15 zonnevijlle_janna_470.html
-rw-r--r-- 1 leeuwef user 2716 Sep 27 07:15 zonnevijlle_loureijns_173.html
-rw-r--r-- 1 leeuwef user 5076 Sep 27 07:14 zonnevijlle_sara_66.html
-rw-r--r-- 1 leeuwef user 2310 Sep 27 07:15 zuidendorp_maria_747.html
-rw-r--r-- 1 leeuwef user 4622 Sep 27 07:15 zwiep_chris_106.html
-rw-r--r-- 1 leeuwef user 3310 Sep 27 07:15 zwiep_willem_698.html
-rw-r--r-- 1 leeuwef user 3294 Sep 27 07:15 zwier_jacob_336.html
-rw-r--r-- 1 leeuwef user 2154 Sep 27 07:15 zwier_jacob_337.html
Server
Indien men een database wil gebruiken kan men beter een web-server-pakket installeren.
Voor Linux en Windows zijn verschillende pakketten beschikbaar, die eenvoudig en snel een server installeren.
Het voordeel is, dat apache, php en mysql al geconfigureerd zijn, en eenvoudig gestart kunnen worden.
Opmerking:
De genoemde software zit standaard al in Linux / FreeBSD.
De configuratie van de onderdelen vergt enige studie!
voorbeeld:
apachefriends xampp (website)
Sourceforge: XAMPP is a very easy to install Apache Distribution for Linux, Solaris, Windows and Mac OS X
Zie ook: IBM developerworks XAMPP
Voor Windows zijn er nog een aantal mogelijkheden: zie WikipediA (Engels) Comparison of WAMPs
Voor internet kan men beter een server gebruiken die Linux of FreeBSD gebruik als operating systeem.
Thuis ga ik werken met een FreeBSD server, zie ook nieuwe pagina FreeBSD
Om veilig te werken, worden op de server zo min mogelijk processen gestart.
Voor de webserver is alleen tcp poort 80 nodig voor het weergeven van de html pagina's.
Om wat ervaring te krijgen wordt eerst een 'statische' website gemaakt, zonder stript talen (php, perl, python)
beveiliging netwerk en server
- router instellingen: alleen poort 80 naar webserver
- voorkeur: FreeBSD - Linux webserver
- zo min mogelijk 'services' starten
- geen 'root' login gebruiken
- 'sterk' wachtvoord kiezen, hoofd en kleine letters, cijfers en tekens. (zie ook: tips: keepass)
zie ook: Webwereld: wachtwoorden
- logon alleen met ssh
- sudo installeren voor root rechten (Linux), bij FreeBSD: "wheel" groep
- checken op aanvallers:
- een Intrusion detection system installeren.
- NB: FreeBSD heeft een commando 'mtree' dat gebruikt kan worden om een moment-opname te maken van directories en bestanden.
Door nieuwe moment-opname te vergelijken met een oude, kunnen wijzigingen aan bestanden snel en eenvoudig opgespoord worden!
- NB: sourceforge: DenyHosts python script om aanvallers te blokkeren.
- eventueel: ssh poort wijzigen, niet de 'standaard' ssh poort gebruiken.
zie ook: DenyHost: FAQ: Q 1.3 en A 1.3
- een Honeypot gebruiken door de 'standaard' ssh poort op een andere computer gebruiken.
- eventueel: processen in een 'jail' draaien: FreeBSD
- security scanner gebruiken: zie WikipediA: nmap ,
nessus ,
SAINT
Als de beveiliging onvoldoende is, kan de server 'gekraakt' worden, zie:
website stegeman gehackt
informatie:
ssh: beveiligde verbinding: Wikipedia: (Engels) ssh
sudo: voor 'root' rechten: Wikipedia: (Engels) sudo
FreeBSD: IBM: (Engels) Why FreeBSD
Jail: Webwereld: jail in FreeeBSD
Software: 1st Page 2000 html-editor
Voor het bewerken van html kan men het beste een speciale editor gebruiken,
géén 'tekst' processor.
Het voordeel van een speciale editor is 'syntax highlighting':
door gebruik van verschillende kleuren, kunnen fouten eerder gevonden worden.
Voorbeeld "1st Page 2000":
Informatie in wikipedia: Syntaxiskleuring
(Engels): syntax highlighting
Hoewel de "1st Page 2000" free edition wel op de website genoemd word, is op de download pagina alleen de commerciële "1st Page 2006" te vinden.
Alternatieven, zijn:
- Arachnophilia
- Amaya van het W3C Worlde Wide Web Consortium
- Notepad++, website: Sourceforge: notepad-plus
Notepad++ is een source code editor met de programmeur in gedachten. Het is een 'betere' tekst editor voor iedere gebruiker die het Windows platform gebruikt.
- Crimson Editor website: Crimsoneditor
Crimson Editor is a professional source code editor for Windows. This program is not only fast in loading time, but also small in size.
- Vim website: vim
Vim is a highly configurable text editor built to enable efficient text editing. It is an improved version of the vi editor distributed with most UNIX systems.
software: Jalbum
Voor het publiceren van foto´s op de website gebruik ik Jalbum.
Jalbum zorgt er voor dat alle afbeeldingen een standaard formaat krijgen, en maakt kleine plaatjes voor navigatie.
Voor het maken van een album zijn verschillende layouts 'skins' beschikbaar, zodat het kleurenschema aan de website kan worden aangepast.
De website is gemaakt met versie 7.1, met als layout 'Chamelion' (gray). Er is wel al een nieuwere versie 8.x beschikbaar.
(Bij versie 6.x had ik een probleem met de jpg compressie: teksten op een plaatje waren niet goed leesbaar.)
Jalbum is gemaakt door David Ekholm uit Zweden in 2002,
zie ook:WikipediA: Jalbum (en)
De instellingen voor het album zitten in een configuratie file. Jalbum gebruikt een 'bron' map, met hoge resolutie foto´s, en
een 'doel' map, met geschaalde (kleinere) foto´s.
Voor de website ga ik nu nog uit van een scherm-resolutie van 1024x768 pixels (afgaande op Google: analytics, 27%)
in de toekomst kan dit aangepast worden. Voor het maken van een album, 36 mappen en ongeveer 270 bestanden is ca. 12 minuten nodig.
De originele foto´s in de 'bron' zijn hoge resolutie scans, 400 DotPerInch, waardoor de afbeeldingen in de toekomst ook voor een geprinte publicatie geschikt zijn.
Ook kan overwogen worden om een 'EBook' te maken, die ook zonder internet verbinding te lezen is.
Voor een schermafbeelding is c.a. 100 dpi de standaard op een PC, op mobiele smartphones en tablets etc. wordt een hogere pixel dichtheid gebruikt.
software: Aldfaer
De software Aldfaer staat in de pagina genealogie: Aldfaer.
Links
Enkele websites om html te leren:
aanbevolen: handleiding html
html-site
webmees
websitemaken
leerhtml
nationalemediasite
anouksweb
mijnhomepage
verzamelgids
htmlophetnet
leejoo
htmlhelp-nl
Engels talige sites:
van harte aanbevolen: w3schools quote: educate yourself!
w3schools: 'colorpicker' ook met 'Darker/lighter shades'
htmlhelp-en
htmlcodetutorial
yourhtmlsource
pageresource
So, you want to make a Web Page!
Interessante informatie staat ook op de site van de overheid: Kwaliteitsmodel Webrichtlijnen
Zie ook: Ben Wilbrink: Een website genealogie bouwen:
website bouwen
