Tryout
3D-Sculpturen
Garageband
3D-Stereo-Fototechniek
Audio-Techniek
BBCBasic
Web-design
Line-Box-drawings
PC-Applicaties
Files2Index
Mouseover
MakeHtml

Web design:

Om snel en gemakkelijk een website te kunnen ontwerpen heb ik het conversie-programma TxtToHtml gemaakt. Bij TxtToHtml wordt een hele website in een makkelijk leesbare textfile mbv. Kladblok (Notepad) geschreven.
Het conversie-programma heb ik in BBC Basic for Windows geschreven, zie BBCBasic.
Het conversie-programma TxtToHtml.exe zet de textfile in een aantal Html-files om (Html = Hyper text markup language = opmaaktaal voor het maken van internet-pagina's). Deze Html-files kunnen vervolgens direct op het internet gezet worden.

TxtToHtml maakt gebruik van een Initialisatie-programma, waarmee oa. kleuren gekozen kunnen worden. Het kiezen van de juiste kleur voor de letters van de tekst, de links, de achtergrond en omgeving is van het grootste belang. omdat met deze kleuren de sfeer van de website bepaald wordt; wordt het een zakelijke, vrolijke, opvallende of ingetogen website?

  • Is er aan de linkerzijde een klikbare indexlijst gewenst?
  • Moet er een kop boven ieder blad?
  • Is er een bladermogelijkheid noodzakelijk (zie Prev en Next rechtsboven).
  • Wil je een uitgebreide navigatie-balk met zoek-mogelijkheden?
  • Moeten er klikbare logo's aan de rechterzijde?
    Al deze mogelijkheden zijn te selekteren in het Initialisatieprogramma.

Onderstaande websites zijn met mijn TxtToHtml-programma gemaakt:
Art-Site Frits de Groot (kpn)
Art-Site Frits de Groot (hccnet)
Spiegelogie (hccnet)
Try-Outs = deze site (kpn)
Art-Site Maria de Groot (kpn)
Art-Site Alberto Valentini (kpn)
Illustraties en strips

In de broncode, die met Kladblok als een textfile wordt bewaard, worden puntcommando's gebruikt. Een puntcommando bestaat uit een punt in de meest links kolompositie met een letter:

.P Index
Een webpagina met de naam Index. Onder .P Index moet de inhoud (content) van de web-pagina Index ingetiept worden. Gebruik betekenisvolle namen. De allereerste pagina van een website heet meestal Index.htm. De extensie .htm zet het programma er automatisch bij.

.I Image0101t Image0101.htm
Maakt een klikbare meestal kleine afbeelding t van thumbnail (foto van postzegelformaat bvb. hxb = 120x90 pixels), die de pagina Image0101.htm toont.

.P Image0101
Een webpagina met de naam Image0101, die een (grote) foto afbeeldt. bijvoorbeeld:

.I Image0101.jpg
Afbeelden van de foto Image Image0101.jpg

.I Image0101t Image0101.htm
Maakt een klikbare meestal kleine afbeelding, die de pagina Image0101.htm toont.

.I Image0101t Image0101.jpg
Maakt een klikbare meestal kleine afbeelding, die de foto Image0101.jpg toont.

.F Lucida Sans Unicode
De volgende tekst wordt in een nieuw font afgebeeld.

.W http://www.google.nl Google
Door klikken op het woord Google, wordt www.google.nl opgeroepen.

  • Als een woord tussen twee slingertjes wordt gezet, dan wordt het woord een link. Als je op dat woord klikt, dan springt je Browser naar de pagina met bijvoorbeeld de naam woord.htm.
  • Als je een woord of zin vooraf laat gaan door ` en dan een cijfer dan wordt dit woord of die zin in een bepaalde kleur afgedrukt, die afhankelijk van het cijfer is. De kleuring wordt gestopt door ` en dan cijfer 0.
.End
Eindig de tekstfile met .End en Enter (Return).

Zoals hier boven verteld maakt het conversie-programma gebruik van een initialisatie-programma om het opmaken van een website makkelijker te maken.
Hier onder het menu van het programma:





Met de knop Show Ini-files kun je de namen van de reeds aanwezige ini-files zien.
Vervolgens kun je in het lege venster links van de Show Ini-files knop de gewenste ini-file invoeren en dan op de Load Ini-file knop klikken.
In een voorbeeldvenster verschijnen de gekozen instellingen en kan je nog wijzigingen aanbrengen en een nieuwe versie van de ini-file met de knop Save Ini-file bewaren.
In het lege venster links van de Show Txt-files knop kun je de naam van de broncode file met de punt-commando's, zoals hier boven uitgelegd, invoeren als je op de Edit Txt knop klikt. In kladblok verschijnt de file en kun je wijzigingen aanbrengen, die je in kladblok onder Bestand moet Opslaan.
Klik dan op de Make Html knop om de html files voor de website te genereren. Het is de bedoeling dat je ook direct de html site te zien krijgt, lukt dit niet klik dan nog een keer op de Make Html knop.


Hieronder het voorbeeldvenster, zodat je de kleuren en het lettertype direct kunt beoordelen:






Overzicht van de Files:

  • Colorini.exe = Opmaak-programma voor ini-txt-file
  • TxtToHtml23.exe = Conversie-programma bron-txt-file (en ini-txt-file) naar html-files (versie 23), (wordt gerund, als je de Make Html knop aan klikt).
  • namen.txt = File met namen van bron-txt-file en ini-txt-file (gebruikt door TxtToHtml23.exe en wordt door Colorini.exe automatisch gemaakt)
  • website.txt = voorbeeld van een bron-txt-file (met de punt-codes)
  • website.ini = voorbeeld van een ini-txt-file (wordt gemaakt door Colorini.exe)
  • website.mta = voorbeeld van een meta-file met de META tags met discription en keywords (de META-tags worden door zoekrobots, zoals google gebruikt)
  • website.tlr = voorbeeld van een teller-file om bvb. de Google teller van Google Analytics te laten werken.
  • *.htm = Alle gegenereerde htm-files staan bvb. in de map website. De htm-files moet je als ze definitief zijn naar je homepage-gebied van je provider uploaden met bvb. FTP.
  • *.jpg en *.gif = Alle image-files moet je zelf in bvb. de map website zetten. De htm-files moet je ook naar je homepage-gebied van je provider uploaden met bvb. FTP.
Maak af en toe een copy van de .txt en .ini files.


Tips en opmerkingen:

  • Verzin betekenisvolle namen voor de pagina's van je website, want die namen komen in de index-lijst te staan.
  • Experimenteer alvast met kleuren en lettertypen.
  • Laat alle plaatjes met de letters img beginnen, dan kunnen alle pagina's, die alleen maar een plaatje bevatten, uit de indexlijst, weg gelaten worden.
  • Noem de plaatjes van de 1e pagina bvb. img1001.jpg, img1002.jpg etcetera. De namen van plaatjes voor de 2e pagina worden dan img1101.jpg, img1102.jpg.
  • Noem de kleine versie van een plaatje img1101t.jpg (t van thumbnail).
  • Gebruik voor een plaatje in een afzonderlijke pagina bvk. max. 640 pixels breed (480 pixels hoog of anders) en voor thumbnails 120 x 90 pixels. Plaatjes meer dan 640 pixels breed kunnen wel, maar veroorzaken verspringing bij overstappen naar een andere pagina.
  • Bedenk een duidelijke korte "discription" voor je site (gebruikt oa. google)
  • Bedenk sleutelzoekwoorden voor je site (gebruikt oa. google).
  • Javascript code voor een google teller kun je afzonderlijk aan de index.htm file toegevoegen.
  • Je kunt gerust html-tags in de text-file opnemen, zoals hier gedemonstreerd is door het gebruik van opsommingen met de zwarte balletjes (bullets) en het vet gedrukte opschrift.


Knoppen:

Accentkleur1 krijg je met cijfer 1 wat vooraf gegaan door het accent-teken linksboven
Kleur2 met cijfer 2
Kleur3 met cijfer 3
Kleur4 met cijfer 4
Kleur5 met cijfer 5
Kleur6 met cijfer 6
Accentkleur7 met cijfer 7
Accentkleur8 met cijfer 8
Accentkleur9 met cijfer 9
Het kleuraccent stoppen met cijfer 0 vooraf gegaan door het accent-teken linksboven

Achtergrondkleur = kleur midden veld
Kleur zijvelden = kleur zijvelden links en rechts
Omgevingskleur = kleur buiten middenveld en zijvelden
Letterkleur = kleur van de tekst in het middenveld
Link-kleur = kleur van tekst waarop geklikt kan worden
Kleur aktieve link = kleur van tekst als je met de muis er op staat
Kleur gebruikte link = kleur van tekst wat eerder als link is gebruikt

Load Ini-file = Laadt de Ini-file, die in het invulvenster ingevoerd is.
Save Ini-file = Bewaart de Ini-file, die in het invulvenster ingevoerd is.
Show Ini-files = Toont alle Ini-files.
Help = Verwijzing naar Internetsite met deze Help-Info.
Edit Txt = Om in kladblok je broncode met de punt-commando's te editten.
Make Html = Genereert Html files voor Internet.
Show Txt-files = Toont alle broncode files.
Exit = Om uit het programma te stappen.

Lettertype = font van tekst in het middenveld
Font grootte = formaat van het font


Simpele Html-codes tussenvoegen:

<B>Vet gedrukt</B>
<U>Onderstreept</U>
<UL type=disc><LI>
  • 1e regel.<LI>
  • 2e regel</UL>

Duidelijke uitleg over html codes:
www.htmlhulp.com/nl/




HomePrevNext