Introductie

XS4ALL logo

XS4ALL handleidingen:

WinSCP
PuTTY
FileZilla

Bij de meeste providers (XS4ALL, Ziggo, KPN 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 en / 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 in windows WinSCP gebruiken... (vroeger!)
Tegenwoordig is FileZilla gebruikelijk!: zie ook hoofdstuk upload.

Soms is het nodig om zelf op de server van de website in te loggen. Hiervoor kan men in Windows het beste PuTTY gebruiken.
Opmerking: In Linux worden standaard al terminals geïnstalleerd.
Voor het 'beheer' van de website (met een Linux server!) is enige basis kennis van Linux handig.

Zowel WinSCP, Putty als FileZilla gebruiken een beveiligde 'geëncrypte' 'SSH' verbinding.

  Wikipedia: Website
Nederlands:Engels:
 PuTTY  PuTTY  PuTTY
 FileZilla  FileZilla  FileZilla
 WinSCP  WinSCP  WinSCP

smily Sinds het voorjaar van 2020 wordt ook een nieuwe Asus Chromebook gebruikt voor de website.
Deze nieuwe Chromebook is geschikt om met Linux-Debian te werken.
Op de Asus praktijk pagina staat de volgende Debian software voor de website beschreven: Bluefish html editor, Filezilla ftp client, Firefox browser


TIP Een aandachtspunt bij het maken van een website... begin direct met het checken van de website!
Zie: Validatie: html, links en css checks!

TIP Standaard gebruik ik .html  als extensie voor de webpagina's.
In een (nieuwe) testfase kan ook .htm  gebruikt worden om de wijzigingen te controleren... en om het effect te vergelijken.

smiley-sad Helaas... bij een controle met de html validator merkte ik dat er veel fouten in de voorbeelden zitten, wordt aan gewerkt!

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

HandleidingHTML-logo

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: Opmerking: een witte achtergrond is het meest neutraal, met een kleur moet men rekening houden met andere harmoniërende kleuren.
Tip: check: W3Schools: Colors Tutorial

Om in Windows te testen kan men op een PC een C:\www directory maken.

Voorbeeld structuur:

Voorbeeld www map:

www-map

Voorbeeld doc  map met .html   bestanden:

doc-map

smiley

Op mijn website heb ik bovenstaand voorbeeld staan: zie voorbeeld. (opent in nieuw venster)

smiley-sad

Helaas... een probleempje... bovenstaand voorbeeld heeft nog de oude html-code van 12 jaar geleden:

<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">

Beter de moderne UTF-8:

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

smiley Wordt binnenkort aangepast!

Opmerkingen:

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' directory kan het beste geplaats worden in C:\

downloadvoorbeeld
zipwww.zip

Opmerking:
Indien de zipfile 'standaard' in Windows wordt uitgepakt, komt deze in de 'Documents and Settings' map.
Daardoor werken de links in het menu niet, opgepast!

putty Om de website bij XS4ALL te checken ... even inloggen met Putty (in Windows smiley ... of Linux!)
Website van Putty a free SSH and Telnet client (by Simon Tatham) voor Windows.

inhoud: van de bestanden

smiley Op mijn website heb ik bovenstaand voorbeeld staan: zie voorbeeld. (opent in nieuw venster)

Linux commando's:

knop buttons 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

top

index bestand geeft indeling website: links menu, rechts tekst

knop buttons 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>

top

menu: (links)

knop buttons 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:arial,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>

top

inhoud: welkom pagina (rechts)

knop buttons 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>

top

voorbeeld: "style sheet" style.css

knop buttons 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:arial,sans-serif; font-size:12pt; }

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

Voor de upload naar de webserver worden de html pagina's eerst op de PC gecontroleerd door ze via bestandsbeheer te openen in een browser.
In dit geval bij voorbeeld, open "html-file" met firefox: file:///home/frits/WWW/doc/website.html

Opmerking: bovenstaande is handig in Linux... NU met de Chromebook en de Caret editor worden de html files gecontroleerd door in de "filer" te klikken op de html-file, en opent een "view" mode in de browser.

Nadat de 'website' op de PC werkt, moeten de files naar de provider worden gekopieerd.
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 [17 augustus 2009]

Informatie uit de Wikipedia:
Voor het uploaden naar een website kan met het beste Secure Copy of FTPS (secure ftp) gebruiken.

filezilla logo Tegenwoordig gebruik ik in Linux FileZilla, the free FTP solution voor de upload naar XS4ALL.
Door het instellen van poort 22 voor de transfer, wordt secure FTP gebruikt.
Er is nu ook een FileZilla Pro, met protocol support for WebDAV, Dropbox, en Google Drive.

Vroeger ... in Windows gebruikte ik WinSCP.

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 windows

Indien meerdere files worden gekopieerd, kan men de rechten ook via het menu instellen:
via Menu | Options | Preferences | Transfer | Upload options
kan de set permissions ingesteld worden:

voorbeeld:

WinSCP

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.

knop 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

Het plan om een eigen server te installeren gaat niet door. we leven nu in 2020...

Doordat de server bij XS4ALL wordt gehost, is er een zeer snelle response, door de bandbreedte van de internet verbinding.
Dit kan niet bij een eigen server, waar de laatste kilometer een ADSL verbinding is. Dit beperkt de upload snelheid.
Ook een voordeel van XS4ALL is de "https" server, met certificaten. Door de certificaten komen de pagina's hoger in de Google "page-ranking".

Oude informatie:
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

Voor een overzicht: zie Wikipedia (Engels) List of Apache MySQL PHP packages

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

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": (jaren geleden in Windows XP)

screenprint

Informatie in wikipedia: Syntaxiskleuring en (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.

software: Jalbum

Jalbum logo 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 -toen!- 'Chameleon' (gray).
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.

Chromebook software: "Caret" html-editor

Voor de HTML bewerking wordt nu in hoofdzaak de Chromebook gebruikt. (BlogPagina September 2014)
Zie ook: Chromebook Caret.

Caret-updated Caret

In een artikel van How-To Geek zag ik: How to Work Offline on a Chromebook [DECEMBER 30, 2013].
Hierin stond een link: Caret, an offline graphical text and code editor with syntax highlighting.
It will allow you to work with code files offline or just have an powerful text editor for editing files stored on your Chromebook.

Een feature van Caret, is de 'automatische' upgrade in de achtergrond.
Na een upgrade zie je even een pop up, die je op de hoogte brengt.

Website van de ontwikkelaar van de software: Thomas Wilburn.net
Quote: Professional Text Editing for Chrome and Chrome OS, a serious editor for local files, aimed at working programmers.
Handig: Retained mode: Caret will remember your open tabs and re-open them for you. You won't have to take five minutes to find all your work again after taking a break or rebooting for a system update.

Een handige feature van Caret is, dat bij het openen van een html tag, automatisch de afsluit tag wordt gegenereerd.
Voorbeeld: bij het openen van <p> komt automatisch </p> tevoorschijn!
Hiervan maak ik gebruik voor onder andere een nieuwe paragraph, bold tekst ( <b> ) en voor tabellen ( <ul> en <li> ).

TIPS:

Voorbeeld: veel gebruikte code

help
====
<div align="justify"></div>
<center></center>
<blockquote></blockquote>
ge&iuml;nstalleerd

<a href="onderzoek.html#januari2020">onderzoek</a>
<a href="BlogPagina.html#januari2020">BlogPagina</a>

<a href="https://www.site.nl/" target="_new"><b>site.nl</b> tekst</a>

<img src="image/smiley.jpg" width="16" height="16" alt="smiley" title="happy">
<img src="image/smiley.jpg" width="16" height="16" alt="smiley" title="happy" border="0" align="right" hspace="7" vspace="7">

<div class="fs">Bron: <a href="https://www.zeeuwsarchief.nl/zeeuwen-gezocht/" target="_new" title="naar: Archief">Zeeuws Archief</a></div>

<span style="color:red">Systeemprogrammaprobleem</span>
<span style="color:blue">link</span>

valign="top"
colspan="2"

Handig: voor een overzicht van speciale characters, zie: Handleiding HTML.nl: Overzicht karakters.
Quote: In het volgende overzicht worden voor de verschillende groepen code-posities uit de ISO 8859-1 en Unicode karaktersets enkele voorbeelden gegeven.

Omdat de code met de Caret editor nog enigszins expirimenteel was, is deze eerst gecheckt met de W3C HTML validator.
Hiervoor is de "test.html" file eerst ge-upload naar de website.
Opmerking: ik gebruik " .html " files voor de website. Om te testen kan ook " .htm " gebruikt worden!
Een probleempje was, dat ik een eenvoudige versie in de "head" in de html code gebruikte.

Voorbeeld eenvoudig html5 "head" van de testpagina:
<html><head>
<link href="doc.css" rel="stylesheet" type="text/css">
<title>Test Pagina</title>
</head><body>

Hierdoor dacht de html validator, dat de code html5 was, ipv html versie 4.
Een foutmelding was:
1. Warning: This document appears to be written in Dutch. Consider adding lang="nl" (or variant) to the html start tag. From line 1, column 121; to line 2, column 6

De normale html4 versie begint met op de eerste regel:
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/1998/REC-html40-19980424/loose.dtd">

Een ander probleem zijn wel de diakritische letters (met 'accenten'), die in de namen van de genealogie voorkomen. Dit is een gevolg van de 'Windows-1252' character set in Aldfaer software.

Zie voorbeeld 'foute' html code:

Caret-Chromebook

Probleem:
Hendrik trouwde, ten hoogste 34 jaar oud, v qmqm r 1798 met ...

benodigde aanpassingen ... geeft 'goede' html:

ó = &oacute; in vóór
é = &eacute; in de naam Elisabeth / Jannis Miné

In het verleden gebruikte ik een script, die de tekens aanpast naar html stijl. (zie: tips: MobaXterm script)
In deze tip ook: het aanpassen: http://nl.wikipedia naar https://nl.wikipedia in alle html bestanden.

Opmerking: in bovenstaande voorbeeld in de tips gebruikte ik toen nog Windows... om linux opdrachten uit te voeren!
Nu in Linux zijn scripts meer vanzelfsprekend om teksten met 'streaming' editors te bewerken.

Introductie: Caret de versie in 2014:

Het voordeel van een speciale html editor, in dit geval Caret, is 'syntax highlighting': door gebruik van verschillende kleuren, kunnen fouten eerder opgemerkt en hersteld worden.

Caret versie Linux

Handig is, dat Caret de html syntax checkt, zie voorbeeld informatie melding:

Caret-html-info

In dit geval ontbreekt een stuk van het header deel van de html pagina. Ik gebruik de editor in dit geval om de tekst te checken die toegevoegd wordt aan de computer blog, of de tekst voor het genealogie onderzoek. Hiervoor is het niet nodig om de hele pagina te laden.

Voorbeeld van een niet goed geopende 'italic' tag: <i moet zijn <i> in de html bron (rood, onder)

html-foutje

Het resultaat is, dat een stuk van de tekst (blauw aangegeven) weg valt in het bovenste weergave deel.

Een html fout wordt aangegeven met een rood kruis in de kantlijn:

Caret-HTML-error

In dit geval gaat Caret uit van HTML5, terwijl mijn pagina nog HTML versie 4 gebruikt.

Linux Software: Bluefish html-editor

bluefish

Om de 'oude' blogpagina aan te vullen met de nieuwe 'test' html code, is op de Lubuntu computer de Bluefish html editor geïnstalleerd.
Quote: Bluefish is a powerful editor targeted towards programmers and webdevelopers.
Omdat ik op plaatjes in de website soms met een rood kader of rode streep accenten toe voeg, is op Lubuntu XPaint geïnstalleerd.

Zie voorbeeld op: LubuntuHowto install XPaint
Zowel Bluefish als XPaint zijn met de command prompt geïnstalleerd. Bij het opstarten van XPaint miste ik een "file" in het menu. De procedure is, om via het context menu in de filer een bestand te openen met XPaint.

Met Bluefish kon de nieuwe blog tekst aan de bestaande BlogPagina worden toegevoegd.
Bluefish heeft ook de optie om teken codering aan te passen naar UTF-8.
Dit was ook een mooie gelegenheid om het bestand in de moderne UTF-8 standaard op te slaan in plaats van de verouderde ISO-8859-1.
De Bluefish gaf bij het opslaan een foutmelding over een "open" quote teken. Dit is vervangen door een accent.
Opmerking: de editor neemt zelf het initiatief om in de head van de html de aan te passen, zie: charset en generator content

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="generator" content="Bluefish 2.2.10">
Een slordigheid is, dat de oude generator content regel er bleef staan:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 

Daarna is het tijd voor een html check met de validator! De vorige html check was in november 2015.
De validator kwam met een onverwachte foutmelding:

 Sorry! This document cannot be checked. 

Jump To: Error(s) blocking validation geeft:
Sorry, I am unable to validate this document because on line 973 it contained one or more bytes that I cannot interpret as utf-8.

The error was: utf8 "\xEF" does not map to Unicode.
De tekst van het probleem was: "geïnstalleerd"

Google levert op: stackoverflow: encoding - x00, xEF, xC8 - what type of format are these?.
They look like hex numbers but they could be unicode characters ... \xEF as unicode = ï == u"\u00ef".
Deze pagina verwijst naar: fileformat: unicode geeft: Unicode Character 'LATIN SMALL LETTER I WITH DIAERESIS' (U+00EF)
Op deze website zijn ook andere unicode characters op te zoeken.
Een leuk voorbeeld geeft de Unicode Character Search: Query: "e": Are you looking for Unicode character U+0065: LATIN SMALL LETTER E? ... geeft 527 hits.

Meer informatie over Unicode:

Op de BlogPagina november 2011 kwamen de zogenaamde diakritische tekens met accenten ook al ter sprake bij een html check. Deze tekst staat ook op Validatie: html.
Dit is een goede leerschool om volgende pagina's van de website om te zetten naar utf8. Op de twee blogpagina's staat ruim 20 keer "geïnstalleerd", en in de genealogie pagina's komen ook accenten voor in de namen.
Gelukkig (vanzelfsprekend) heeft de Bluefish editor search en replace, maar controle is nodig!

Opmerking: er is ook nog een Linux "cli" command-line-interface!
Zie volgende hoofdstuk, voor een cli search en replace

Tips Linux: de terminal en de command-line

Handig bij Linux is de command-line interface: veel gebruikt onder andere:

Opmerking: binnenkort ga ik de diakritische tekens in de genealogie (Aldfaer) html export corrigeren met een Linux script naar correcte HTML code.
Door een script kunnen de verschillende letters in één keer aangepast worden in de verschillende "parenteel" pagina's.

Voorbeeld: diakritische tekens met accenten.
Voor correcte html moeten letters met accenten aangepast worden.

Op de pagina Tips stonden al de volgende twee voorbeelden van de Linux prompt:
Aanpassen: een paar keer Nederlands-Indië, e met "trema" (wikipedia), de ë wordt omgezet naar de &euml;  html versie.
Zie: Willem Ruys voor resultaat.

frits@giga:~/WWW/doc$ perl -pi -e's/ë/&euml;/' Willem_Ruis.html

Toelichting:

Voorbeeld: aanpassen links naar websites.
Een paar jaar geleden startte de aanpassing van websites van http naar https (secure) webservers.
aanpassen: http://nl.wikipedia  naar  https://nl.wikipedia  in alle html bestanden, en ook in de Engelse wikipedia links (met MobiXterm)
Zie ook: BlogPagina november 2015: Behalve de Wikipedia gebruiken steeds meer andere sites tegenwoordig ook https (secure!) in plaats van http.


[2015-06-30 10:01:48]:~/LauncherFolder/www
Frits@amd:perl -pi -e 's/http:\/\/nl.wikipedia/https:\/\/nl.wikipedia/' *.html

[2015-06-30 10:12:00]:~/LauncherFolder/www
Frits@amd:perl -pi -e 's/http:\/\/en.wikipedia/https:\/\/en.wikipedia/' *.html

Opmerking: in het bovenstaande voorbeeld wordt een "slash" = / gebruikt op de commando regel als "seperator" voor de substitute "s" opdracht.
Aangezien de slash ook in het web-adres van de wikipedia voorkomt, moet deze slash vooraf gegaan door een "escape", de back-slash.

Voorbeeld: voor de Asus webpagina wilde ik een FileZilla logo toevoegen.
Ik zocht met de Linux "grep" commando naar de tekst "filezilla.png" in alle html bestanden:

frits@giga:~/WWW/doc$ grep filezilla.png *.html
website.html: <img src="image/filezilla.png" width="74" height="74" alt="filezilla logo" align="right"></a>

Voorbeeld: ImageMagick.
Linux "command line" beeldbewerking, aanpassen van breedte of hoogte van afbeeldingen.
voor de Asus webpagina wilde ik van een aantal afbeeldingen de breedte instellen op 1000 pixels.

fritsvleeuwen@penguin:~/WWW/doc/image$ convert Asus-Firefox-software -resize 1000 Asus-Firefox-software
fritsvleeuwen@penguin:~/WWW/doc/image$ convert Asus-Filezilla-XS4ALL.jpg -resize 1000 Asus-Filezilla-XS4ALL.jpg

Behalve in de breedte kan ook de hoogte van plaatjes aangepast worden.
Voorbeeld: aanpassen hoogte van twee Chromebook software "launcher" plaatjes: -resize x186 optie is hoogte 186 pixels.
Zie resultaat bij de Chromebook: "Shelf" Launcher

fritsvleeuwen@penguin:~/WWW/doc/image$ convert FileZilla-launcher.jpg -resize x186 FileZilla-launcher.jpg
fritsvleeuwen@penguin:~/WWW/doc/image$ convert Firefox-launcher.jpg -resize x186 Firefox-launcher.jpg

Opmerking: bij het "convert" commando wordt twee keer een bestandsnaam gebruikt: bron en doel.
Indien deze namen identiek zijn wordt de "oude" (bron) file overschreven.
De naam van het doelbestand moet aangegeven worden, anders komt een foutmelding: "missing an image filename".

Links

HandleidingHTML-logo

Enkele websites om html te leren:

van harte aanbevolen: Handleiding HTML
websitemaken
htmlophetnet
homepage-maken
leejoo
htmlhelp-nl Nederlandse vertalingen van "Web Design Group" documenten

w3schools

Handig: Handleiding HTML accenten

Engels talige sites:

van harte aanbevolen: w3schools quote: educate yourself!
THE WORLD'S LARGEST WEB DEVELOPER SITE

htmlhelp-en
html.com Starting Coding Today With Free HTML Tutorials... Welcome! You've Found the Easiest Way to Learn HTML and CSS.
yourhtmlsource
pageresource
So, you want to make a Web Page!

Interessante informatie staat ook op de site van de overheid: DigiToegankelijk

Zie ook: Ben Wilbrink: Een website genealogie bouwen: website bouwen

W3Ccss W3Chtml