Korte HTML cursus; reminder

Het ontwerpen en realiseren van een WEB pagina is een kwestie van stap voor stap opbouwen. Een eenvoudige WEB page ontwerpen en opzetten is een kwestie van enkele minuten. Een gecompleceerde WEB page opbouwen kost weken. Een WEB pagina kan eenvoudigweg tekstgeorienteerd zijn maar ook opgetuigd zijn met vele visuals en audiovisuals tot en met dynamische (audio)visuals aan toe.

Een WEB page is een stuk tekst waar een kop en een staart aan moet zitten. De kop kan er heel eenvoudig als volgt uitzien:


De staart ook, namelijk:


Een complete executeerbare (intepreteerbare) file kan er dan als volgt uit komen te zien:


Dit noemen we een HTML-file. Het kenmerk van een dergelijke file is zijn specifieke kop en zijn specifieke staart. Tussen de kop en de staart staat gewoon platte (ascii) tekst. De returns in de tekst worden gewoon als spaties behandeld. Als deze file door Netscape wordt geopend (en geintepreteerd) dan ziet u het volgende op uw beeldscherm, namelijk alleen en uitsluitend de tekst, maar wel als een lange tekst-string:


De tekst-string kan worden afgebroken (zoals dat heet: wordt 'gewrapped') conform die breedte die de gebruiker maar wil. Dat wordt domweg bepaald door de breedte van het Netscape-window zoals de gebruiker dat zelf van te voren heeft ingesteld.

Als u de file getest heeft met Netscape 'open file...' dient u de file ergens op een provider te zetten. Anders kan niemand anders dan alleen uzelf deze HTML-file lezen. Op dat moment wordt deze file een echte WEB-page op Internet en voor iedereen over de hele wereld toegankelijk.

Het kenmerk van een HTML-file is dat het een lange tekst-string is van bij wijze van spreken 30.000 woorden of meer die achter elkaar - gewrapped en aaneengesloten - door Netscape in een beeldscherm-window wordt gezet. Er bestaan nu allerhande codes die in deze (in principe oneindig lange) tekst-string kunnen worden opgenomen. Daarvan zijn er een kleine twintig van primair belang. In werkelijkheid bestaan er inmiddels (dd. okt. 1996) wel honderd soorten codes (of zo men wilt commando's) varierend van een code voor het presenteren van een plaatje tot een code voor het presenteren van een animatie-filmpje.

Codes

Het opnemen van visuele elementen kan overal in de tekst plaatsvinden. Op woordnivo en zelfs op letternivo. De tekst BLIJFT (desondanks) EEN lange tekst-string. Dat is dan ook het geheim - of te wel HET kenmerk - van de HTML-taal: de tekst wordt onderbroken door codes. Die codes worden met < en > tekens gemarkeerd. Een code bestaat meestal uit twee delen. Meestal geeft een code - tussen <> - het begin aan en een tweede code - tussen < > - het eind van de eigenlijke code. Er tussen in staat een naam of een stukje tekst. Er staat dan een slash voor in de tweede code, zoals deze hiervolgend: <aaa>xxxxxxxx</aaa>.

De codes zijn een soort opmaak-codes en een beetje te vergelijken met de TUTOR taal (1977) en TenCore (1980) in de jaren zeventig tot tachtig ontwikkeld voor het maken van eenvoudige courseware op eenvoudige computers. In die tijd werden deze zogenaamde talen dan ook 'auteurstalen' genoemd. HTML kan daar dan ook prima mee omschreven worden: auteurstaal of opmaaktaal.

Visuele elementen opnemen

Er zijn een groot aantal mogelijkheden voor het opmaken van een WEB-page. In de tekst kan op willekeurig welke plaats een vreemd element worden opgenomen: een plaatje, een geluidje, een videoclip, een formulier, een (lineaire) animatie, maar ook de mogelijkheid voor het verzenden van een e-mail naar een voorgeprogrammeerd adres, etc. We noemen er hier een paar:

Teksten:

  1. Een WEB-page met alleen tekst en een enkele keer een nieuwe regel. Daarvoor zijn de codes <BR> en <P> van belang;
  2. Een WEB-page met (enkele) opgemaakte woorden of tekststrings (bold, cursief, onderstreept, etc.). Daarvoor zijn bijvoorbeeld de codes <B>, <I> en <U>.
  3. Een WEB-page met een link (een hyperlink, een keuzemoment) op een willekeurige plaats in een regel of waar dan ook in de tekst. Daarvoor zijn/is de code nodig. Als de gebruiker op het woord yyyyy klikt springt Netscape naar de WEB-page met de filenaam xxxxx.

Externe elementen:

  1. Een WEB-page met een plaatje op een willekeurige plaats in de tekst. Daarvoor zijn/is de code met daarin de filenaam waarin het plaatje zich bevindt. Het plaatje moet van het JPEG-format of TIFF-format zijn anders leest Netscape het niet.

  2. Een WEB-page met een geluidje op een willekeurige plaats in de tekst. Hiervoor heeft u helaas (nog steeds) een plug in nodig. En de code ziet er als volgt uit: met daarbinnen de filenaam waarin het geluidje zich bevindt. Het geluidje moet van het .wav-format zijn anders speelt Netscape het niet af.

  3. Een WEB-page met een animatie filmpje op een willekeurige plaats in de tekst. Hiervoor heeft u helaas (nog steeds) een plug in nodig. En de code ziet er als volgt uit: met daarbinnen de filenaam waarin het animatiefilmpje zich bevindt. Het plaatje moet van het ....-format zijn anders leest Netscape het niet.

  4. Een WEB-page met een video clip op een willekeurige plaats in de tekst. Hiervoor heeft u helaas (nog steeds) een plug in nodig. En de code ziet er als volgt uit: met daarbinnen de filenaam waarin de video-clip zich bevindt. Het videobestand moet van het .mov-format zijn anders leest Netscape het niet.

  5. Een WEB-page met een applet op een willekeurige plaats in de tekst. De code ziet er als volgt uit: met daarbinnen o.a. de filenaam van de applet (hier: 'aaa.class'). Het bestand moet van het type .class-format zijn anders leest en opent Netscape de applet niet. Er kunnen ook parameters aan applets worden toegevoegd. Zie elders.

Rest ons te blijven onderzoeken wat nieuwe, moderne WEB-tools allemaal kunnen en wat feitelijk beter 'met de hand' - in HTML - kan worden geprogrammeerd? That is the question...

Het vroegere vak 'COO-technieken' (van ondergetekende) was feitelijk precies hetzelfde van opzet als de ontwerpers van het WEB, HTML en Java het bouwen van een WEB-page in hun gedachte hadden: Met losse tools worden mono-(multi-)mediale losse componenten gemaakt en daar na in gehangen in een (source-) file. Bij HTML is dat een tekst (source-) file; bij 'COO-technieken' was dat anders. Maar het principe was hetzelfde: 'contents' scheiden van de 'intelligentie' (de programmatuur).

Het (leren) scheiden van (de) losse elementen, los gekoppeld van de source en los gekoppeld van de tekst - met de contents - is een uitvinding van ons, educatieve software specialisten, en was - toendertijd - echt een essentiele breuk met de andere software engineers. Bij traditionele software engineerings-vakken werd (te) vaak gewerkt met geintegreerde systemen, waarbij je aan de goden en de luimen van de fabrikant werd overgeleverd en aan de andere kant waren er software-vakken waarbij monomediale (statische) componenten geheel en al 'in een taal moesten worden geprogrammeerd' (bijvoorbeeld in pascal; bijvoorbeeld graphics, geluid, teksten stap voor stap programmeren (zonder slimme editors). Teksten werden in de begindagen van multimedia-programmeren nog al te vaak - domweg - in de source opgenomen en niet in losse tekst-files.

Bij 'COO-technieken' hoefde (ook) niet echt goed geprogrammeerd te kunnen worden; dat is bij HTML-pages bouwen ook het geval. TO-studenten leerden al vroeg om te gaan met libraries. Vandaag de dag kunnen WEB-pagina-bouwers standaard Java-applets aanroepen - als black-boxes - (bijvoorbeeld 'WebLib') terwijl bij het vak 'COO-technieken', in de (source) tekst, op een eenvoudige wijze, black-boxes uit libraries (bijvoorbeeld 'CaiLib'), konden worden aangeroepen middels een eenvoudige code, waar vaak niet meer in hoefde te staan dan de file-naam van de losse component of van het effect dat moest worden nagestreefd. De ontwerper leerde tegelijkertijd goed op het instellen van parameters te letten.

Het tweede jaars TO-vak 'COO-technieken' - de voorloper van 'multimedia programmeren' en 'productie van ondrwijssystemen' - is daarom altijd een goede kennis- en inzichts-basis geweest (om later; on the job; haast automatisch) ook WEB-pages mee te (kunnen) bouwen en nog later (1996); om het nut te zien van 'dynamische' pages - als vaak essentieel onderdeel van veel leer- , instructie- en werk-omgeving te zien. Ook was het een goed basis - en haast dè manier - waarop men het Java- en javascript-gebeuren moet zien; en hoe men nieuwe technieken moet beoordelen en 'handle-en'.

Optimize your web site

By Brian D. Chmielewski
mailto:newsletter@webpromote.com

At one time or another, I have discussed the importance of optimizing your HTML code for the major search engines. Today I will bring several ideas together in an attempt to crystallize them for improving search ranking.

Between 70 and 80 percent of traffic that is driven to your web site originates from the major search engines. That metric indicates traffic, not sales. If most people share my surfing behaviors, they would type in a keyword at a search engine and then sort through the top ten to twenty results, actually clicking through an even smaller percentage. So, listing near the top and speaking to your target audience in the proper way are very important. There are six components of the web page that you should pay strict attention to when preparing a page for listing in a search engine.

The first step toward improved listing is selecting the best keywords to do the job. Keywords are the foundation for your presence in the search engines. Applying the same keywords throughout each component is very important, so converging upon a specific collection of keywords is very important.

How do I choose effective keywords?

You should already have some idea of the keywords or keyword combinations (keyword phrases) that you will want to use. To get a comprehensive idea of all of the keywords that could assist you with your optimization, there are two things that you should do. First grab an online or print Thesaurus. Investigate synonyms for your original keywords. Write these words down on a sheet of paper. Next, perform searches at each of the major engines for your original keywords and keyword phrases. Pay close attention to the web sites that rank 1 through 10. You will notice that the sites do not always rank in the same location and some do only appear on one engine. View the source code of these pages, looking for patterns and placement of keywords in the <TITLE>, <META> <BODY> and <ALT> tags. Next, search for your known competitor's web sites and view the HTML source code and their site text. Noticing patterns is your key to advanced ranking above them. Rather than visiting each engine and performing a search, you can simply use RankThis! <http://www.rankthis.com>. RankThis! allows URL searching of all of the major search engines by keyword or keyword phrase - all at one location.

Title Tag

Since the title tag is the first thing that a user sees if your web site is returned for their keyword query, it is a very important. Place those keywords that are most pertinent to your business in the title tag. When you select title tag keywords, you should be thinking of them like the words on a nameplate on the entrance to a business. Effective title tags include relevant keyword or keyword phrases only. They also avoid non-indexing filler words, such as a, an, the, welcome and home page.

Example: <TITLE>WebPromote - Intelligent Internet Marketing</TITLE>.

META keywords tag

These tags are HTML code that permit a web site developer to tell search engine algorithms what keywords are relevant to their site. The META keywords tag is your location in the HTML code for the placement of keywords and keyword phrases. Presently, META Tags are supported by AltaVista, Infoseek and HotBot. Example: <META Name="keywords" Content="web marketing, online promotions, promote, internet marketing, search engine submissions…...">

Find out more about META description, ALT Tags, and Body Text optimization at: <http://www.webpromote.com/wpweekly/aug98vol4/optimize.html>

Enschede, updated 7 dec. 2000