Webdesign docent: Aart Jan Bergshoeff Het internet



Dovnload 47.82 Kb.
Datum18.12.2017
Grootte47.82 Kb.

Webdesign




docent: Aart Jan Bergshoeff

Het internet


Internet (het world wide web) is een wereldwijd netwerk van computers. Als je twee computers naast elkaar heb staan wil je al gauw dat er gegevens van de ene naar de andere overgezet kunnen worden. Om dat te doen worden de computers via de ethernetkaart (netwerkkaart) verbonden. De computers “praten” dan met elkaar via een afgesproken taal (een “protocol”).
Helaas liggen er geen ethernetkabels tussen alle huizen. Maar er liggen wel overal telefoondraden of tv-kabels! Via deze draden kan je een wereldwijd netwerk leggen. Het computersignaal moet dan wel vertaald worden naar een telefoon- of tvkabel-signaal. Dat doet de modem. Modem staat voor modulator-demodulator, ofwel coderen-decoderen. De “taal” (protocol) die hierbij gebruikt wordt heet HTTP (HyperText Transfer Protocol). Vandaar dat web-adressen altijd beginnen met http://www. WWW staat voor world wide web. Daarachter tik je dan de domeinnaam met een toplevel-domein erachter (aartjan.nl of .com etcetera).
Als er mapjes (directories) staan kun je daar naar toe door een slash te tikken gevolgd door de mapnaam, of de naam van het document: http://www.aartjan.nl/index.htm

Een Homepage of website


De homepage is de eerste pagina van een website, de openingspagina dus. Het is een bestandje dat altijd index.htm heet en op een webserver staat. De HTML-code (Hyper Text Markup language) die in het bestandje staat wordt ingelezen, vertaald en opgemaakt getoond door de web-browser (Explorer).

HTML: HyperText Markup Language


Met HTML kan je tekst ordenen en structureren door middel van code. Je kunt aangeven dat iets “Kop 1” is of “Kop 2” (er zijn 7 kop-niveaus), waar een paragraaf begint en eindigt, of er een genummerde of ongenummerde opsomming is en of een woord nadruk krijgt of nog meer nadruk. Er zijn er nog een aantal, maar echt veel meer zijn er niet en dit zijn de belangrijkste. De basis-HTML kun je in een middag leren.
In het html-bestand staan teksten, plaatjes en links naar andere pagina’s (andere html-bestanden). Er kunnen bestanden in de pagina staan zoals audio en video. Die bestanden kunnen overal op internet staan. Het webadres van het plaatje of pagina moet je dan volledig overnemen (http://www etc). Meestal zet je de gebruikte bestanden gewoon op je eigen server.

Elke pagina bestaat uit een apart html-bestand, en de plaatjes staan er in een apart mapje bij.



CSS (Cascading Style Sheets)


De HTML-taal is niet heel geschikt voor visuele opmaak zoals kleur, lettertype, marges en inspringers et cetera; dat doe je met CSS (Cascading Style Sheets). Deze css (opmaakdefinitie) zet je in een los bestandje op de server, het liefst ook in een apart mapje.

Servers en hostingproviders


Een webserver is een computer die 24 uur per dag aanstaat en verbonden is met internet. Bedrijven die zulke servers hebben staan noem je hosting-providers. Jouw site staat dan te gast op hun server, zij zijn je “host”. Een voorbeeld van zo’n provider is www.protagonist.nl of www.ladot.nl
Je zou zelf ook een server thuis neer kunnen zetten. Die moet dan 24 uur per dag aanstaan, een vast ip-nummer hebben, server-software geïnstalleerd hebben en een snelle upload-verbinding hebben.

Je kunt voor voor weinig geld je site bij een hostingprovider neerzetten. Kijk op www.internetten.nl om er een te zoeken. Ook bij je eigen internet-provider kun je meestal je site neerzetten. Kijk in de specificaties van jouw internet-aanbieder.



Access(toegang)-provider


Een access provider verzorgt de toegang tot internet. Xs4all, planet, zonnet, wanadoo et cetera. Deze providers bieden je meestal bij het abonnement ook gratis een aantal Megabyte op hun server aan waar jij je homepage neer kan zetten. In de online help van de providers vindt je vaak uitgebreide hulp.

Domeinnamen, ip-nummers


Elke aangesloten modem (en bijbehorende computer) heeft een publiek ip-nummer, bijv. 80.89.239.20. Je kan door het intikken van dat nummer in je browser contact maken met die modem of computer. Maar het is veel handiger om een naam te gebruiken, zoals aartjan.nl.

Die naam moet dan door wel vertaald worden naar je echte ip-nummer. Dat doen de DNS-servers (Dynamic Name Servers, er staan er een paar in Nederland).

Het is belangrijk om een goede domeinnaam te hebben. Kijk hier of je gewenste domeinnaam nog vrij is: http://protagonist.nl/content.php?content=domein
Een domeinnaam kun je registreren bij vrijwel elke provider en kost ongeveer 20 euro per jaar.

FTP: file transfer protocol: uploaden


Via het ftp-protocol kun je “uploaden”: jouw files op de webserver zetten.

In een ftp-programma zie je 2 vensters: de bestanden op jouw eigen computer, en de bestanden op de server. Bestanden die klaar zijn sleep je van jouw computer naar de server. Frontpage heeft een ingebouwd ftp-programma (zie Remote Web site).

Je hebt 3 gegevens nodig om in te kunnen loggen (kijk in je papieren van je provider):


  • De naam van de server (bijv websites.xs4all.nl/~jenaam)

  • Je login-naam (voor ftp soms anders dan voor je mail)

  • Je password (ook voor ftp soms anders dan voor je mail)



Downloaden


Downloaden betekent: bestanden van internet naar je eigen computer overbrengen. Een bezoek aan een website is eigenlijk ook downloaden: de bestanden die je bekijkt staan dan (tijdelijk) op je eigen computer.

Zoek via Google > afbeeldingen eens naar een bepaald plaatje. Download dit plaatje met rechtsklik > save target. Download een hele webpagina (of zelfs een hele site) in Explorer via File (Bestand) > save as.



Statistieken


Het analyseren van de website-statistieken kan interessante informatie opleveren. Je weet dan waar de bezoekers van de website vandaan komen, wat ze bekijken en misschien zelfs waarom ze weggaan. En hoe komen deze bezoekers eigenlijk op de website terecht? Welke zoekwoorden typen ze in?
Algemene uitleg statistieken:

http://www.microsoft.com/netherlands/ondernemers/ondernemen_verkoop_en_marketing/internet/statistieken.aspx - 4
Voorbeeld statistieken:

http://www.ladotstats.nl Klik op “Premium” en dan op “demo”.

Probeer alles uit.

Bijna elke hostingprovider geeft zulke statistieken.

Google en zoekmachines


Je website moet goed gevonden kunnen worden, en goed geïndexeerd (doorzocht en gecategoriseerd) kunnen worden. Dit begint een echte wetenschap te worden: SEO, search engine optimization. Bedrijven hebben er groot belang bij om hoog in de zoekresultaten te komen.

Een zoekmachine (search engine) zoals Google zoekt dagelijks het internet af en indexeert alle nieuwe pagina’s die het vindt. Het recept van Google is geheim en wordt voortdurend aangepast, maar er zijn wel enkele tips te formuleren:



  • Zorg dat er naar je site gelinkt wordt vanaf relevante toonaangevende sites

  • Neem in je site links op naar belangrijke relevante sites

  • Zet belangrijke keywords behalve in de meta-tags ook regelmatig in de echte, leesbare tekst

  • Zet de allerbelangrijkste keywords zo mogelijk in de titelbalk

  • Gebruik geen framesets, want dan vindt een zoekmachine misschien een apart frame in plaats van de totale site

  • Gebruik geen Flash, een zoekmachine kan dan de inhoud niet (of moeilijk) indexeren

  • Extra zoektip: zoeken in een lange pagina kan altijd met Ctrl-F (Apple-F)



Zoek-functionaliteit toevoegen


Er is een gratis, open source mogelijkheid: http://search.mnogo.ru

Een goede programmeur kan deze gratis zoekfunctionaliteit toevoegen aan een site, zoals op http://www.mediamatic.net/ is gedaan.

Betaald kan het uiteraard ook: http://www.google.com/enterprise

Hoe maak je een website


  • Een website is HTML-code die door een browser wordt ingelezen/vertaald.

  • HTML-code kun je met elk tekstpragramma maken zoals Notepad, Word etc.

  • Dreamweaver is een voorbeeld van een wysiwyg html editor: what you
    see is what you get: je ziet niet alleen de code maar ook het voorbeeld.

  • Je kan het voorbeeld meteen wijzigen.

  • andere software: Frontpage (niet zo goed in stylesheets)

Een website is meestal gemaakt in HTML, maar soms in Flash, een andere code:

Flash: voordelen


  • Cross browser, cross platform

  • Met geluid (en nu ook video), goed en snel

  • Snelle vloeiende animaties »

  • Werkt ook goed via trage modem

  • Oneindig scalable (vector)

  • Totale controle over typografie, mooi en flitsend »

  • Interactieve presentaties »



Flash: nadelen


  • Je weet niet of de bezoeker de (juiste) plugin heeft

  • Wachten voordat je kan beginnen

  • Shockwave of Flash? Nog meer plugins

  • Browser-backbutton en bookmark werkt niet

  • Toegankelijkheid: letters kun je niet vergroten, spraakondersteuning ontbreekt

  • Google (e.a.) vind je niet of doorzoekt je niet

  • Tip: gebruik stukjes Flash binnen HTML



Waarom ziet het er soms anders uit?


Dezelfde HTML-code kan er anders uitzien in verschillende browsers en op verschillende systemen. En er zijn ook grote monitoren en kleine, waar de rechter- en onderkant van de site buiten beeld kan vallen (en er scrollbalken ontstaan) Er zijn zelfs browsers die alleen tekst laten zien, zonder de plaatjes (Lynx). Hier moet je rekening mee houden.

De grootste browser is Explorer (90%), de grootste nieuweling is Firefox (8%), verder zijn er Safari, Opera, Netscape, Lynx, Mozilla. Cijfers over internetgebruik



Plug-ins


Plugins zijn programma’s die extra functionaliteit toevoegen aan de browser.

  • Flash, altijd de nieuwste (Macromedia, Adobe)

  • Shockwave, nieuwste (Macromedia, Adobe)

  • Quicktime 7 (Apple)

  • Windows Media Player (Microsoft)

  • RealOne player (real.com, zoek de gratis versie)

  • Acrobat Reader (om pdf’s te tonen, eventueel direct in de browser)

  • Javascript /Java (voor interactieve scripting. Javascript heb je altijd, maar Java niet meer)



HTML




HyperText Markup Language


HTML is ontwikkeld om de inhoudelijke structuur van een tekst weer te geven; om tekst te ordenen met behulp van code. Het is niet zo geschikt voor visuele opmaak; dat gebeurt via de stylesheets (CSS).

De browser kan mede de vormgeving bepalen, bijvoorbeeld als de browser een telefoon of voorlees-software is.

De organisatie die de standaardisatie van HTML regelt is het World Wide Web Consortium (W3c) http://www.w3c.org.

Een goede site om HTML en CSS te leren is http://handleidinghtml.nl/


HTML bestaat uit elementen en attributen. Gebruik daar bij voorkeur kleine letters (dat is in de nieuwe standaard XHTML zelfs verplicht).

Elementen

De belangrijkste elementen voor tekststructuur zijn:


Heading1. Wordt gebruikt voor koppen. H1 t/m H7
Alles wat tussen deze tags staat wordt een Kop 1



Paragraph. Einde paragraaf. Harde return ofwel enter


Break. Breekt een tekst af en gaat verder op de

volgende regel. Zachte return dus: shift-enter



    Unordered list: een bulleted lijstje

      Ordered list: een genummerd lijstje

    1. List item. Elk item in een lijst staat tussen deze code.

      Cursief. Alles wat tussen deze tags staat wordt cursief.

      Vet.
      Elk element wordt dus afgesloten met een slash/, ook al is het een enkel element: een
      in plaats van
      .
      Er zijn 2 types: inline en block. Inline elementen kunnen in een regel tekst staan, zoals een cursief woord, block-elementen vormen een blok, zoals de paragraaf. Block-elementen worden vaak standaard ook nog voorafgegaan door een witregel. Dat kun je veranderen in de css.

      De belangrijkste elementen voor vormgeving zijn:



      Een block-element waarmee je een block kunt vormgeven, bijvoorbeeld een menu, een header of een kolom tekst

      Een inline-element waarmee je een inline tekst kunt vormgeven, bijvoorbeeld een rood woord.


      Attributen


      Een voorbeeld van attributen (let op de aanhalingstekens, verplicht in XHTML):


      Deze tekst lijnt rechts.

      De meeste attributen zijn overigens verouderd, want alle visuele opmaak gebeurt niet meer in de html maar via het stylesheet (de css). Attributen gebruik je dus niet voor visuele vormgeving, maar voor het leggen van een link naar de css:




      Deze paragraaf wordt opgemaakt volgens de definitie van “.rechtslijnend” in het stylesheet. (De punt ervoor geeft aan dat dit een “class” is.)

      Deze div (divider ofwel een layer) wordt opgemaakt volgens de definitie van “#menu” in het stylesheet. (Het hekje ervoor geeft aan dat dit een “id” is.).

      Later gaan we css-code verder bekijken, voor nu zijn deze twee dus al bekend:



      .stijl = class (komt vaker voor, zoals een rood woord)

      #stijl = id (komt maar eenmalig in het document voor, zoals een menu)

      De opbouw van een html-document


      html. Staat in iedere HTML-pagina. Stelt browser in

      staat om te begrijpen dat het hier om html-code gaat.







      De database wordt beschermd door het auteursrecht ©opleid.info 2017
      stuur bericht

          Hoofdpagina