IkMijn pagina voor
prettig werken op de PC
www.pcpret.nl		 Homepage Stuur bericht Gastenboek Website Blog Eindhoven

Webdesign, allerlei

Webpagina's maken is een leuke bezigheid, vooral als dit enthousiaste lezers aantrekt. Enerzijds is het leuk om anderen van alles en nog wat te vertellen en/of te laten zien. Anderzijds is het leuk al die onderwerpen op een leuke manier te presenteren.
Ik zelf ga er vermoedelijk te makkelijk aan voorbij dat webpagina's maken niet voor iedereen altijd even makkelijk gaat. Voor mij is het vaak zelfs nogal eens een heel gepuzzel. Daarom een pagina die een en ander vertelt over mijn eigen ervaringen over het maken van webpagina's voor een website of homepage.
  1. Inleiding
  2. De eerste stappen
  3. Title tag
  4. Body tag
  5. De H1, H2, H3 enzovoort tags
  6. Afbeeldingen toevoegen
  7. Koppelingen gebruiken binnen en buiten een HTML pagina
  8. Nog een paar handige tags
  9. Gevonden worden door zoekmachines zoals Google?
  10. Het verzenden van webpagina's
  11. Het gebruik van Php en Mysql
  12. Het gebruik van CSS (Stylesheets)
  13. Voorbeelden van websites

Inleiding

  1. Het maken van een webpagina begint met een idee, zoals "Webdesign, allerlei". Daarna volgt het nadenken over de vormgeving (ik kies dan snel voor saai wit), vervolgens gauw door naar de inhoud. Dat lijkt makkelijk alleen ja, ik dat is best moeilijk omdat elk onderwerp al eens ergens is beschreven. Of vergis ik me nu?
  2. Een webpagina bevat speciale codes en uiteraard de informatie die gelezen en/of bekeken moet gaan worden. Deze webpagina kan leesbaar worden gemaakt met een internet browser, zoals Internet Explorer of Firefox. Die speciale codes zijn in het algemeen HTML codes, in bijzondere gevallen is het Css, Php, en javascripts. Letterlijk betekent HTML: HyperText Markup Language. De term HyperText duidt op de koppeling. Even klikken en de volgende webpagina komt eraan. De term Markup geeft aan dat HTML een opmaaktaal is. Het gebruik van HTML is een vorm van programmeren.
    Een hulpmiddel om de webpagina te maken, zoals een webeditor, is reuze handig. Dit omdat dan vaak minder kennis nodig is over al die speciale codes. Hoewel er veel software bestaat om webpagina's te maken, werk ik zelf voornamelijk met Frontpage, soms met Nvu en soms zelfs met kladblok ...
  3. Een hulpmiddel om de webpagina('s) te versturen naar de website is de laatste stap. Het meest gebruikte hulpmiddel is ftp of een webeditor die hiervoor ondersteuning biedt, zoals Frontpage en Nvu. Een webeditor is vrijwel zeker het makkelijkste in het gebruik om.

De reden om deze pagina te gaan schrijven, had te maken met het programma Nvu. Dit lijkt namelijk een fantastisch stuk gereedschap. Na er wat meegewerkt te hebben, verdween mijn enthousiasme. Eigenlijk is het programma alleen geschikt voor het gewone werk, met HTML. Ik had mijn pagina's voorzien van Php scripts, alleen bleek Frontpage en Nvu daar niet echt handig mee om te gaan. Nu laat Frontpage de Php voor wat het is, helaas maakt Nvu er een complete chaos van. Dit programma is dus voor sommige situaties een keiharde afrader.

De eerste stappen

Hoe? Start Frontpage op: klik op Start, Klik op Programma's, klik op Microsoft Frontpage. Vervolgens verschijnt er een venster met de naam "nieuwe_pagina_1.htm". Daarbij zijn een drietal tabbladen te zien. Bekijk deze eens goed, klik eens op HTML, Voorbeeld en Normaal. Met Nvu gaat het nog makkelijker, hoewel? Gewoon proberen!
Voorbeeld geeft de pagina weer zoals die weergegeven gaat worden. Het is wel verstandig de werkelijke weergave te controleren met een echte internet browser. Het tabblad Normaal biedt een grafische werkomgeving om de pagina vorm te geven. Dit is min of meer te vergelijken met de mogelijkheden van de tekstverwerker Wordpad of Word. HTML toont de werkelijke HTML code die ervoor zorgt dat de pagina er leesbaar uitziet. 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Voorbeeld pagina </title>
</head>
<body>
<H1>Hello world!</H1>
</body>
</html>
Het eindresultaat is dat de tekst "Hello world!" op het scherm verschijnt. De code tussen < en de > tekens wordt een tag genoemd.

Title tag

De tekst in de title tag is de naam van de pagina. Deze naam verschijnt in de titelbalk van Internet Explorer.

Body tag

Binnen de Body tag <Body> zomaar wat tekst </Body> komt de eigenlijke internet informatie te staan. Dit kunnen HTML opdrachten zijn maar ook gewoon tekst. Er is in ieder geval veel mogelijk. De kleur code wordt in de volgende table weergegven met "x", hier volgt eerst wat uitleg over deze code. Als voorbeeld neem ik: BGCOLOR="#ffffcc" 
Eerste FF = Rood in 256 variates: 0-FF (hexadecimaal)
Tweede FF = Groen in 256 variaties
Derde FF = Blauw in 256 variaties

De body tag kan ondermeer de volgende kleur kenmerken bevatten:
bgcolor="x"Deze waarde stelt de achtergrondkleur voor.
text="x"Deze waarde creëert de kleur voor alle niet gekoppelde tekst.
link="x"Deze waarde geeft de kleur van de koppelingen (URL).
vlink="x"Deze waarde geeft de kleur van een bezochte koppeling.
alink="x"Een actieve koppeling (daar waar op wordt geklikt) krijgt de kleur met deze waarde.
Background="x"De informatie in een plaatje (bestand) stelt de achtergrond voor.

De H1, H2, H3 enzovoort tags

Dit is een hoofdstuk tag. Deze kan op de volgende wijze worden gebruikt: 
<H3>Dit is een voorbeeld!</H3>

Afbeeldingen toevoegen

Een afbeelding toevoegen kan met de de <img src= ... > tag: 
<IMG src="afbeelding.jpg" title="omschrijving afbeelding" alt="altenatieve tekst afbeelding">>
Aanvullende opties zijn: 
align="left", andere waardes voor align zijn "right","top", "bottom", "middle"
width="150", de waarde voor width mag ook in procenten
height="100", de waarde voor height mag ook in procenten
nosave

Koppelingen gebruiken binnen en buiten een HTML pagina

De A tag met de href optie <A href="x.htm">Voorbeeld</A> verwijst naar een bestand. Zo'n A tag stelt een koppeling voor. De zichtbare tekst is Voorbeeld. Het leuke van deze A tag is dat een goed leesbare en begrijpelijke tekst kan worden ingevuld terwijl het bestand (met pad) een heel complexe en onleesbare naam kan zijn. Het voorgaande voorbeeld is geschikt voor koppelingen naar pagina's buiten de HTML pagina. Het is ook mogelijk om koppelingen binnen een HTML pagina te gebruiken. Dat is best handig om een submenu aan het begin van de pagina te plaatsen om zo een snelle keuze van een bepaald onderwerp mogelijk te maken. Deze functionaliteit is te gebruiken via de A tag.

Dit is de koppeling: 

<A href="ditbestand.htm#onderwerp">Omschrijving onderwerp</A>
De koppeling verwijst naar de plek waar de naam in de A tag is geplaatst: 
<A name="onderwerp">Tekst waar de koppeling naar verwijst</A>
In dit voorbeeld is het "onderwerp" het centrale woord van de koppeling binnen het bestand. Oh ja, de name en de A tag staan normaliter in hetzelfde bestand. In dit voorbeeld moet de name tag met "onderwerp" in "ditbestand.htm" staan. De A tag mag eventueel in een ander bestand staan. In een A tag mag een afbeelding ook als omschrijving van het onderwerp worden gebruikt. Met optie border=0 in de IMG tag kan je aangeven om de koppeling kleuren te verbergen. Bijvoorbeeld: 
<A href="ditbestand.htm"><IMG src="omschrijving.gif"></A>

Nog een paar handige tags

Maak tekst vet (bold): 
Maak tekst <B>vet (bold)</B>
Maak scheve (italic) tekst: 
Maak <I>scheve (italic)</I> tekst
Maak een nieuwe paragraaf met <P> en breek een regel af met <BR>.

Gevonden worden door zoekmachines zoals Google?

Het is leuk als je eigen webpagina makkelijk is te vinden met Google. Dat kan dan twee dingen betekenen, of het zoekwoord is erg uniek of het onderwerp is erg populair. Middels een metatag 'keywords' kunnen zoekwoorden worden opgegeven die te maken hebben met het beschreven onderwerp. Een toepasselijk voorbeeld: 
<meta Name="keywords" Content="Webdesign, Frontpage, Nvu, gastenboek, weblog, tips">
Verder schijnt het dat veel links naar een specifieke website de kans op een gunstige plaats in de Google zoeklijst vergroot.

Het verzenden van webpagina's

Het verzenden van webpagina's kan middels een programma als ftp (file transfer protocol), in gewoon Nederlands is dat dus bestand overdrachts protocol. Er bestaan veel handiger apps dan ftp, zoals WinSCP, FileZilla Ftp die op overzichtelijke wijze bestanden kunnen verzenden naar of op te halen van uw website. Verder bieden deze apps vaak de mogelijkheid om de webbestanden op eenvoudige te bewerken. Dit gaat veel makkelijker dan met bijvoorbeeld het standaard ftp programma. Het mooiste programma om webpagina's te maken is ongetwijfeld Dreamweaver, maar dit programma kost toch wel wat. Het verzenden van webpagina's kan ook middels een webeditor zoals nvu of Composer en er zijn nog veel meer/ Composer is leuk om even te proberen omdat dit programma erg geschikt is voor html pagina's. Het voordeel van een webeditor is dat al spelenderwijs een leuke pagina gemaakt kan worden. Eventueel kan een webpagina of een reeks webpagina's ook met Microsoft PowerPoint of Publisher gemaakt worden. Helaas kunnen deze programma's zelf geen webpagina's versturen.

Het plaatsen van een website of homepage bij uw internet provider lijkt makkelijk maar levert nogal eens problemen op. Niet zozeer vanwege de software maar vooral om de informatie die ingevuld moet worden. Het gebruik van dit soort software is daarom best wel lastig, zeker voor de eerste keer. Onlangs moest ik iemand helpen die de probeerversie van ws_ftp gebruikte. Helaas was de proefperiode verstreken, gelukkig kent Windows (of Linux) dus ook het standaard programma ftp. Eenvoudig doch enigszins beperkt in de mogelijkheden. Hoe ftp te gebruiken? Het eenvoudigste is om een Opdrachtprompt venster op te starten (in Linux is dat een Console venster). Ga van daaruit naar de map waar de te versturen bestanden staan. Eventueel kan ook sftp of WinSCP gebruikt worden om bestanden te uploaden of te downloaden.p Mogelijke upload adressen zijn bijvoorbeeld home.hccnet.nl of members.ziggo.nl Daarna moet de opgegeven gebruikersnaam en wachtwoord ingevuld worden. Als die vraag niet komt, dan klopt het opgegeven adres niet.
Met de opdracht ? kan een lijst met mogelijke ftp opdrachten worden opgevraagd. Tja, daarna dus uitzoeken wat er met een ftp opdracht allemaak gedaan kan worden ...
Met de opdracht Dir kan een overzicht van de huidige bestanden worden gemaakt.
Met de opdracht Put bestandsnaam wordt een bestand met de naam bestandsnaam op de site geplaatst.
Met de opdracht Get bestandsnaam wordt een bestand met de naam bestandsnaam van de site opgehaald.
Verlaten van ftp kan met Quit ...

Er zijn nog veel meer opdrachten. Het lijkt hocus pocus maar echt, het werkt dan ook echt. Tja, ftp is echt een basis programma, niet prettig te gebruiken voor een website met veel bestanden en mappen. Anderzijds, met ftp zijn de basis principes van het bestand overdrachts protocol wel wat beter te begrijpen.

Belangrijk om te weten, is nog wel dat er twee soorten bestanden bestaan. Het eerste soort is een tekst of een Ascii bestand. Veelal is dat dus een HTM, HTML, CSS of JS bestand. Het tweede soort is een ander bestand, zoals een plaatje of een foto. Veelal is dat dus een JPG, JPEG, GIF of PNG bestand.
Dit onderscheidt is nogal belangrijk. Het eerste soort bestand mag/moet als Ascii bestand worden verstuurd of worden opgehaald. Het tweede soort bestand moet als binair (Binary) bestand worden verstuurd of worden opgehaald. Ftp kent hiervoor dus de opdrachten ASC en BIN, deze opdrachten spreken voor zich, toch?

Het gebruik van Php en Mysql

Dit is een heel erg lang verhaal. Ik ben begonnen met het boek 'Webdesign met Php5' geschreven door Ward van der Put. Bij dit boek zit een CD met voorbeelden, dus alles overtikken dat hoeft niet. Alleen ja, van kant en klare voorbeelden leer je weinig, dus ga wel echt aan de slag.
Om gebruik te kunnen maken van Php (en Mysql), moet er nog wel een geschikte werkomgeving worden gecreëerd. Dit kan bijvoorbeeld met WAMP, LAMP, XAMPP, XAMPPLite en vermoedelijk nog veel meer verzamelpakketten. Mocht u nu aan de slag gaan, let er dan wel op dat je gaat voor de nieuwste versie Php, bijvoorbeeld versie 7.4 en Mysql versie 8.0.

Een goed startpunt om Php en Mysql te leren gebruiken, is bijvoorbeeld WAMP of XAMPPLite. Beide programma's bieden een verzameling programma's die tesamen een interessante ontwikkelomgeving bieden. Als test heb ik recent beide programma's uitgeprobeerd. Hoewel beide versies stellen dat men gelijk een werkende omgeving heeft, zet ik daar voor beiden een vraagteken achter. Ongetwijfeld zal ergens in een handleiding wel staan hoe bijvoorbeeld phpadmin gebruikt moet worden. Echter met beide programma's werd ik gelijk doorverwezen naar de configuratie bestanden. Tja, dat is zogezegd van de wal in de sloot. Verstandiger is de vraag aan Google stellen. Het resulterende antwoord was in mijn geval een stuk bruikbaarder. Verder ontdekte ik daarna dat WAMP al heel wat meer had te bieden dan vijf jaar geleden, toen deze pagina voor het eerst werd geschreven. Hoewel de eerste stappen met WAMP bijna net zo rampzalig verliepen als met XAMPPLite, had ik met WAMP wel als eerste de ontwikkel omgeving daadwerkelijk werkend met mijn eigen databases. Ik kon nu ook mijn oorspronkelijke website pcpret.nl geschikt maken voor de nieuwste php versie.

Vandaag het ik mijn recente ervaringen aan deze pagina toegevoegd. Ik hoef nu niet meer allerlei log bestanden door te pluizen om php problemen op te sporen. De ontwikkelomgeving toont de problemen vanzelf. Verder wordt er ook een syntax controle gedaan, dus mocht er ergens foutieve code zitten, dat 5 jaar terug nog geen problemen gaf, nou dan kunnen er vrij verrassende resultaten worden bereikt.

Het gebruik van CSS (Stylesheets)

CSS is het heden en de toekomst hoor ik velen zeggen. Tot voor kort maakte ik er zelf minimaal gebruik van omdat mijn huidige website toch al vrij groot is geworden. Zomaar iets veranderen, heeft dan toch wel wat gevolgen. Over dit onderwerp valt heel veel te vertellen. Gelukkig hebben er al velen over CSS geschreven dus daar wil ik dan ook graag naar verwijzen, bijvoorbeeld deze: CSS (stylesheets), www.html-site.nl

Voorbeelden van websites

Ik gebruik mijn eigen zelf gebouwde websites als oefenmateriaal. Het zijn websites die informatie geven over allerlei onderwerpen. Alles sites bieden een gastenboek en de mogelijkheid om een bericht te versturen!
  1. De site waar deze webontwerp pagina is te vinden heet PcPret, informatie over mijn interesses en hobbies. Deze site wordt vernieuwd, door op nieuwe PcPret website te klikken.
    PcPret geeft informatie over allerlei computer onderwerpen zoals thuisnetwerk, fotobewerking (digitale fotografie, foto/dia's scannen), eenvoudige videobewerking, audio restauratie, geluidsweergave. Verder veel fotomateriaal, zoals foto's van de natuur, foto's van Almere, foto's en informatie over wandelingen, foto's van mijn vakantie. En ja, dan is er dus ook nog een gastenboek, een weblog en de mogelijkheid om mij een bericht te sturen. En ja, ik ontvang dus zeer veel berichten, met name vragen over thuisnetwerk, scanners en audio.
  2. De site Natuurspoor, informatie over wandelen en beschermde natuur geeft informatie over met name de beschermde natuur in Almere. Mede dankzij het recente ontstaan van Almere (Almere bestaat sinds 1974), heeft Almere veel bijzondere natuur te bieden. Deze site toont foto's van vele wilde orchideeën, paddenstoelen en alles wat ik nog verder tegenkom tijdens mijn dagelijkse bezigheden. Verder geeft deze site informatie over wandelen in en om Almere en in Flevoland.
    Op dit moment ontbreekt er nog informatie over wandelingen buiten Almere, deze staan dus (nog) op PcPret: Wandelen, dansen en fotografie.
  3. Deze site De wereld van Jasmijn geeft informatie over een jonge schilderes met een verstandelijk handicap. Zij maakt schitterend schilderijen in sprekende kleuren. Deze leuke site heb ik bijna volledig in php geschreven. De site bestaat uit globaal vier delen: een winkel (met winkelwagentje), een museum, een nieuwspagina en een contactpagina (gastenboek, bericht versturen).
    Interessant om te weten is dat oorspronkelijk het DigiOz gastenboek is gebruikt voor deze site. Dit was een specifieke wens van de opdrachtgeefster omdat dit gastenboek gebruik maakte van smilies. De toen gebruikte DigiOz variant moest overigens behoorlijk aangepast worden voordat deze echt bruikbaar was. De wijzigingen hadden met name betrekking op de kleurinstellingen en de ondersteuning van meerdere talen. De kleurinstellingen waren van belang omdat voor deze website specifieke kleuren waren gekozen, het gastenboek moest natuurlijk dezelfde kleuren gebruiken. Het gastenboek zou ook voor niet Nederlandse lezers bruikbaar moeten zijn en daarom was er een taalkeuze optie (Nederlands of Engels) toegevoegd. DigiOz ondersteunt in zekere zin wel het gebruik van meer talen, alleen was die keuze niet met 1 simpele klik te wijzigen. Verder waren vele teksten nog niet vertaald. Ondanks deze kritiek, blijft DigiOz een aanrader voor een ieder die snel een leuk gastenboek aan zijn of haar site wil toevoegen.

Terug naar het begin.

Terug naar de Software Development pagina,
of terug naar de Welkom pagina of Hobby activiteiten.

Email? Ga naar de Software Development pagina ... /9 juni 2020