Homepages maken en meer.

het begin   HTML   homepage maken   eigen startpagina

editors   dreamweaver   foto-albums   CMS   flash/javascript



Het Begin

Hoe maak ik nou eigenlijk een homepage met behulp van coderen?
Om pagina's op je webruimte te zetten moet je eerst die pagina's maken, gewoon op je eigen computer.
Met Kladblok (een programma wat op elke windows computer zit) of Editpad-lite maak je eerst je beginpagina (met bijvoorbeeld de tekst: Hallo, dit is mijn site) en die noem je hallo.html.
Met html-codes kun je deze pagina verfraaien en van links en andere website attributen voorzien zoals kleurtje.html.
Als je dit bestand naar onze DeDS-server transporteert (zie verder voor meer), is deze door iedereen te bekijken via een browser.

Om een html-pagina te maken welke door alle browsers goed wordt weegegeven moeten er een aantal codes worden toegevoegd, Zie het index-voorbeeld bestand (hier de codes als tekst-bestand) met links naar enkele bestanden in je mappen en uitleg van de benodigde codes. In html kun je als volgt kommentaar opnemen wat niet wordt vertoond:
<!-- hiermee kun je reacties toevoegen die geen invloed hebben op je webpagina -->
Voor enkele veel gebruikte html-codes zie onderaan bij startpagina maken


HTML

In 1993 werdHTML (HyperText Markup Language) voor het eerst geïntroduceerd als standaard code voor webpagina's op het internet en heeft daarna een aantal ontwikkelingen meegmaakt.
Zo kwam in 1998 HTML versie 4 (html4) welke eenvoudig te gebruiken was voor hobbyisten en beginners om webpagina's te maken.
In 2014 kwam HTML versie 5 (html5) als standaard met veel meer mogelijkheden. De grootste verandering is dat inhoud en layout sterk van elkaar gescheiden zijn. Meer over html4 en 5 vind je op html4-html5.


Homepage maken

Wanneer je je bestand kleurtje.html naar je webruimte op onze server upload is deze in een browser voor iedereen te bereiken als
http://home.deds.nl/~accountnaam/kleurtje.html en als je lid bent van Vereniging Open Domein http://accountnaam.deds.nl/kleurtje.html
Noem je een bestand index.html dan wordt dit meteen zichtbaar in de browser met
http://home.deds.nl/~accountnaam/ en als lid zijnde http://accountnaam.deds.nl/.

In plaats van een enkel bestand bevat een home- of webpagina vaak uit meerdere bestandenen. Deze worden gemakshalve in een of meerdere mappen gezet.
Maak op je pc een map aan met als naam bv mijnhomepage.. Construeer een of meer html-pagina's zoals hierboven omschreven en zet ze in deze map. Kijk op je pc met je browser of deze pagina's goed tevoorschijn komen.
Upload vervolgens de map met de bestanden naar je webruimte op onze server.
Bij een ftp programma staan in het linker venster de bestanden en folders van je eigen systeem en in het rechter die van je homepage op onze server. Uploaden houdt in het transporteren van je folders en bestanden in het linker venster naar het rechter venster (zie ftp).

Je pagina is dan in je browser te bereiken als http://home.deds.nl/~accountnaam/mijnhomepage/bestand1.html
en als je lid bent van Vereniging Open Domein http://accountnaam.deds.nl/mijnhomepage/bestand2.html
Om je homepage meteen als accountnaam.deds.nl in een browser te laten zien moet je een bestand met de naam index.html aanmaken en naar je webruimte op onze DeDS-server uploaden.
In dit bestand zet je een of meer links naar je pagina's, zie index-voorbeeld (met de codes)

Kontroleer of al je homepagina's goed zichtbaar zijn in je browser: een bestand of foto met de naam in hoofdletters die op je html-pagina in kleine letters aangegeven staat, wordt wel lokaal op je eigen pc getoond, maar niet op de DeDS-server. Dit omdat de DeDS-server onder Unix draait, wat onderscheid maakt in hoofd- en kleine letters, in tegenstelling tot windows.

Wil je je homepage updaten, wijzig de betreffende homepage pagina's op je pc, upload deze naar de server en overschrijf de bestaande pagina's op de server. Wil je de bestaande pagina's op de server bewaren hernoem deze alvorens te uploaden door bijvoorbeeld het woord 'oud' erachter te zetten.
Vergeet niet te controleren of de pagina's goed op de browser te zien zijn.

Let wel
Onze server (en die van de meeste providers) is hoofdletter-afhankelijk, in tegenstelling tot je eigen pc. Dit geldt voor zowel de mapnamen als de bestanden. Wen je dus aan om zowel mappen, images en bestanden als de links ernaar toe allemaal in kleine letters te benoemen. Ook de extensies ! Mocht een image of bestand wel op je eigen pc te zien zijn en niet op je website op de server, dan ligt de oorzaak waarschijnlijk aan het hoofdlettergebruik. Gebruik ook nooit samengestelde tekens (á, ë) of symbolen (#, €, $, %, @) in benamingen van je mappen, images of andere bestanden.


Mijn eigen startpagina voor de browser

Een startpagina is een homepagina die bij je ziet bij het openen van je browser. Op een startpagina staan veelal links naar allerlei plekken welke je meteen na het openen van je browser wilt bezoeken.
Nieuwsgierigen kunnen hun eigen startpagina voor je browser op je pc, laptop of telefoon van scratch maken met html-codes. Hierop kun je je eigen geliefde zoekmachine's zetten en een link naar je eigen homepage op DeDS. Je kunt er nog van alles bijzetten, zoals links naar plattegronden en vervoer. Kortom, een hele riks "dagelijkse" links naast je favorietenlijst in je browser.
Het is relatief eenvoudig te maken. In het kort:
  • maak (makkelijkst met je laptop) een webpagina in HTML code (de extensie moet zijn .html)
  • Zet het bestand in je telefoon of laptop (lokaal), or upload het naar een webruimte-provider (extern).
  • Maak dan een snelkoppeling van deze webpagina op je laptop of zet hem op je scherm van je telefoon.
Je kunt een startpagina in HTML maken met Kladblok waarbij je zelf alle controle behoudt, of je kunt een programma gebruiken wat kant-en-klare startpagina genereert (of zelfs een kant-en-klare startpagina downloaden).
Letwel: Voor de meeste van deze online programma's moet je een account aamaken of met een google account inloggen. Je bent dan wel gebonden aan hun voorwaarden en jouw privacy is in hun handen waarmee ze kunnen doen wat ze willen.

Je startpagina zal er op je pc anders uitzien dan op je telefoon vanwege het verschil in schermgrootte.. Je kunt een aparte startpagina voor je pc en een voor je telefoon maken.
Zie voor meer over het maken van een startpagina voor je browser.

In plaats van een startpagina kun je tegenwoordig ook de tabs van je browser groeperen. Zoek hiervoor met DuckDuckGo.


Homepage Editors

Handmatig coderen met kladblok of editpad wordt nog steeds gedaan. Een tip is om op je startpagina een link naar je website op je pc te zetten en deze zo in je browser openen. Echter-1 je kunt dit tegenwoordig alleen door deze met de rechtermuisknop te openen in een nieuw tabblad (of window), vervolgens in het nieuwe venster op de adresknop te klikken en dan op de link die eronder verschijnt.
Echter-2 met de rechtermuis de code bekijken en bewerken gaat niet zomaar: hiervoor moet je eerst in Firefox de default editor wijzigen in eentje die op je pc staat en dat doe je als volgt:
• Type about:config in het adrsveld van je firefox browser en klik op enter
• Accepteer de waarschuwing die verschijnt, je word naar een lijst van preferenties geleid
• In de filter box type view_source
• Dubbelklik op view_source.editor.external en wijzig de waarde in true
• Dubbelklik op view_source.editor.path en zet deze naar je editor op je pc,
    bijvoorbeeld C:\Program Files (x86)\JGsoft\EditPadLite\EditPadLite.exe
• Sluit de pagina

Er zijn echter op het internet ook veel Wysiwyg html editers te vinden, waarmee je zonder enige kennis van html of javascript prachtige webpagina's kunt maken. Het niet gratis dreamweaver wordt bijvoorbeeld vaak geroemd.
Verder kun je op opensourcecms.com een aantal interessante programma's online uitproberen, zoals het Image-Galleries programma Coppermine.
En dan zijn er altijd nog CMS programma's die het opzetten en onderhouden zeer makkelijk maken.


Dreamweaver

Dreamweaver is niet gratis maar wordt vaak geroemd.
Het 'edit sites' werkt volgens de gebruiksaanwijzing. Via 'site' vult u de 'edit sites' wizard in volgens de gebruiksaanwijzing. Bij 'edit sites' kiest u 'edit' en vult u een naam in. Kies in het volgende scherm 'no' (als uw site PHP gebruikt, dan ondersteunen wij dit niet. Ik neem aan, dat u een enkelvoudige site opzet). Kies in scherm 3 voor een kopie op uw computer te houden. Dan komt het scherm 'sharing files'. Kies connect to remote server: ftp
Vul in hostnaam = ftp.deds.nl
Map of folder = leeg laten
FTP Login = uw accountnaam
Password = uw password
Test hier uw verbinding. (dat werkt natuurlijk alleen als u verbonden bent met het internet). De rest invullen volgens de gebruiksaanwijzing tot 'done'. Dan in het rechtse schermpje 'files' de juiste map uitzoeken (met de index.htm er in) en met het blauwe pijltje omhoog worden de benodigde files in uw www-map gezet (dat werkt natuurlijk alleen als u verbonden met met het internet).


Foto-albums voor op je homepage

Op opensourcecms.com kun je een aantal interessante programma's online uitproberen, zoals het Image-Galleries programma Coppermine en Webalbum.
Met het gratis Jalbum genereer je eenvoudig mooie fotoalbums op je eigen pc die je dan via een ftp-programma overzet naar je website.
Zie ook onze fototips pagina.


CMS

Tegenwoordig wordt het opzetten en onderhouden van een website veelal gedaan met behulp van een systeem genaamd CMS (Content Management System). Door een CMS programma op de server van je hostingprovider te installeren kun je op een eenvoudige manier je website maken, aanpassen en onderhouden.

Om deze dienst op onze servers te kunnen draaien zullen we deze moeten upgraden.
Wil je meer informatie hierover, stuur dan een mail naar bestuur@opendomein.nl


Flash en Javascript

Hiermee kun je prachtige animaties en presentaties maken voor op je website.
Meer hiervoor op onze Flash en Javascript pagina.




terug naar de doeners pagina