Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Info voor aspirant 'Webdesigners'

None
7 antwoorden
  • Zo, versie 0.7:

    Er zijn genoeg websites te vinden met basale (en ook wat minder basale) uitleg over het maken van een website. Maar aangezien er hier veel vergelijkbare vragen worden gesteld die toch redelijk makkelijk te googlen zijn of in een oud topic aan bod zijn gekomen, hier een topic met bondige informatie voor mensen met website plannen, inclusief links naar meer informatie.


    [b:655fa43b50][u:655fa43b50]Code of WYSIWYG[/u:655fa43b50][/b:655fa43b50]
    Als je van plan bent om een (eenvoudige) website te maken kan dat ruwweg op twee manieren. Je kan met een text editor code gaan schrijven die beschrijft hoe je pagina eruit gaat zien, of je kan een WYSIWYG (What You See Is What You Get) programma gebruiken voor het maken van je website. De eerste optie vereist kennis van de computer talen (x)html en css, voor de tweede optie heb je een WYSIWYG programma nodig waarmee je op een MS Word/PaintShop achtige manier een website maakt en je niet met code hoeft te werken. Het programma maakt zelf de code naar aanleiding van wat je doet.
    Er zijn verschillende redenen dat je de moeite zou doen om de computer talen html/css te leren: (i) omdat je dan absolute controle hebt over de code waarmee je website wordt opgebouwd; (ii) WYSIWYG programma's maken vaak een beetje een rotzooi van de code, hierdoor kan je website moeilijker te indexeren zijn, staan er vaak overbodige elementen in je code waardoor de tijd die nodig is om de pagina in de browser weer te geven langer is; (iii) goede WYSIWYG programma's zijn heel duur, en dus is het voor simpele sites goedkoper om ze te [i:655fa43b50]laten[/i:655fa43b50] maken; (iv) je zit vast aan het WYSIWYG programma dat je gebruikt, als je code leert kan je in een willekeurige tekst editor een website maken. Hier volgt een lijst met programma's, zowel voor tekst als voor WYSIWYG (vooral voor MS Windows).

    [b:655fa43b50][u:655fa43b50]Programma's[/u:655fa43b50][/b:655fa43b50]
    [i:655fa43b50]Code[/i:655fa43b50][list:655fa43b50][*:655fa43b50] Notepad++ (gratis, ook nl)
    [*:655fa43b50] Context (gratis)
    [*:655fa43b50] textpad (try before you buy)
    [*:655fa43b50] homesite (betaalbaar)
    [*:655fa43b50] UltraEdit (30 day trail dan $50)
    [*:655fa43b50] Dreamweaver (duur, 600 euro)[/list:u:655fa43b50][i:655fa43b50]WYSIWYG[/i:655fa43b50][list:655fa43b50][*:655fa43b50] Dreamweaver (duur, 600 euro)
    [*:655fa43b50] Nvu (gratis, wordt niet meer ontwikkeld sinds 2005)
    [*:655fa43b50] KompoZer (gratis, bugfix edition van Nvu)
    [*:655fa43b50] BlueGriffon (gratis, in beta)
    [*:655fa43b50] MS SharePoint Designer 2007 (duur, 370 euro)[/list:u:655fa43b50]Lijst van HTML editors

    [b:655fa43b50][u:655fa43b50]html/css[/u:655fa43b50][/b:655fa43b50]
    Als je een website wilt maken die aan de huidige standaarden voldoet en je wilt zelf de code ervoor schrijven, dan zul je een scheiding moeten maken tussen structuur en presentatie. Structuur regel je met [u:655fa43b50]html[/u:655fa43b50] ([b:655fa43b50]H[/b:655fa43b50]yper[b:655fa43b50]T[/b:655fa43b50]ext [b:655fa43b50]M[/b:655fa43b50]arkup [b:655fa43b50]L[/b:655fa43b50]anguage) of [u:655fa43b50]xhtml[/u:655fa43b50] (de X staat voor E[b:655fa43b50]x[/b:655fa43b50]tensible, maar xhtml bied voorlopig weinig ruimte tot uitbreiding) en de presentatie word met [u:655fa43b50]css[/u:655fa43b50] ([b:655fa43b50]C[/b:655fa43b50]ascading [b:655fa43b50]S[/b:655fa43b50]tyle [b:655fa43b50]S[/b:655fa43b50]heets) geregeld. Dit zijn twee computer talen die je jezelf eigen zult moeten maken. Gelukkig zijn deze talen relatief eenvoudig te leren via een boek of door gebruik te maken van online tutorials (links onder aan post). Door gebruikt te maken van een strickte scheiding van structuur en presentatie creïer je code die kleiner is, makkelijker leesbaar is en beter te beheren.
    meer...

    [b:655fa43b50][u:655fa43b50]html/xhtml[/u:655fa43b50][/b:655fa43b50]
    Als je code schrijft voor een website kan je dat doen in html of xhtml, het verschil is klein, xhtml is strikter in de scheiding tussen structuur en presentatie(sommige elementen die je in html nog mag gebruiken mogen in xhtml niet meer) en beiden talen worden goed ondersteun door alle huidige browsers. Al lijkt xhtml de toekomst, er is vooralsnog maar weinig reden om ervan gebruik te maken (ook al komt er een html 5 aan, maar dat kan nog jaren duren). Je kan de talen niet door elkaar gebruiken. In je website geef je met een DOCTYPE declaratie aan welke taal je gebruikt, deze regel code staat helemaal bovenin je markup, nog voor de <html> tag.
    meer... | html naar xhtml convetor | meer over doctype

    [b:655fa43b50][u:655fa43b50]Frames/iframes[/u:655fa43b50][/b:655fa43b50]
    Het gebruik van frames is een manier om je webpagina op te delen in meerdere html bestanden. Een voordeel van het gebruik van frames is dat je bijvoorbeeld 1 bestand hebt voor een menu en dat je alleen dat ene bestand hoeft aan te passen als er iets in je menu moet veranderen. Maar er hangen meer nadelen aan frames dan voordelen. Er kunnen geen bookmarks worden gemaakt naar unieke pagina's binnen je website, spiders hebben moeite om pagina's binnen je site te indexeren en frames worden uitgefaseerd uit de webstandaarden, toekomstige versies van HTML en XHTML zullen geen frames bevatten (iframes wel in html5).
    Daarnaast zijn er betere oplossingen voor het opdelen van onderdelen van je pagina's in afzonderlijke bestanden, in plaats van het gebruik van frames zijn er Server Side Inludes (SSI), via bijvoorbeeld PHP (<?php Include("bestand.php";); ?>;) of CGI (<!–#include file="bestand"–>;). Deze technieken kunnen op dezelfde manier een bestand invoegen in je pagina.
    Nadelen van frames (Why frames suck) | SSI (PHP include, CGI include)

    [b:655fa43b50][u:655fa43b50]Semantiek[/u:655fa43b50][/b:655fa43b50]
    Gerelateerd aan het scheiden van structuur en presentatie verhaal: Dit gaat misschien al een beetje ver voor beginnende website bouwers maar semantiek is iets om rekening mee te houden en goed om het meteen aan te leren, daarnaast is het ook gewoon good practice. Semantiek houd zich bezig met de betekenis van woorden en zinnen, maar in relatie tot html gaat het om de betekenis van een html element in je pagina. Het houd je code overzichtelijk/netjes en limiteert het aantal id's en classen die je hoeft toe te kennen maar vooral is dit belangrijk voor [i:655fa43b50]programma's[/i:655fa43b50] die je site bekijken, bijvoorbeeld een google bot/spider maar ook screen readers voor blinden. Deze programma's kunnen natuurlijk niet de tekst op je website begrijpen maar kijken naar de elementen waar de tekst zich in bevindt en geven de tekst in het element op die manier betekenis, bijv: tekst in een <h1></h1> is de belangrijkste koptekst; een tekstkop in op deze manier: <b style="font-weight:bold;font-size:24px">Koptekst</b>, zal er misschien op het oog uitzien als een koptekst maar door een programma niet als zodanig worden herkent (Google uitleg). Dit gaat op voor heel veel elementen, tekst in een <p></p> element is een paragraaf, en tekst in een <abbr></abbr> is een afkorting enz, gebruik html elementen waar ze voor bedoeld zijn.
    meer...

    [b:655fa43b50][u:655fa43b50]Browsers[/u:655fa43b50][/b:655fa43b50]
    Mensen bekijken je website via een browser, maar niet iedere browser is gelijk (sommige zijn meer gelijk dan andere;)). Er zijn 3 browser smaken die gebruikt worden door het overgrote deel van de interneters (>95%); InternetExplorer (IE6, 7 en 8), Firefox en Safari (Chrome en Opera doen (nog) niet zo mee). Niet alle browsers houden zich even goed aan de geldende regels en geven daarom html/css op een andere manier weer dan eigenlijk hoort. Vooral IE6 is in dit respect een probleem en wordt toch nog door bijna een kwart van de internetters gebruikt. Het is daarom belangrijk om je website tijdens ontwikkeling te checken met een browser die zich aan de regels houd zoals Firefox of Opera (daarnaast heeft firefox hele handige plugins voor webdev), ook al is dit misschien niet de browser die je dagelijks gebruikt. Als je ontwerp klaar is kijk je of hij er hetzelfde uitziet in andere browsers (IE). Als dat niet het geval is dan kan je hem nog aanpassen. Andersom is veel moeilijker. De vuistregel is: ziet je site er goed uit in firefox maar niet in IE dan is dit een IE bug, ziet de site er goed uit in IE maar niet in Firefox dan zit er een fout in je code.
    Omdat MS eigenlijk ook wel door heeft dat IE slecht scoort met betrekking tot ondersteuning van de standaarden hebben ze "conditionele comments" bedacht, hiermee kan je stuken in je website zetten die alleen door IE wordt gelezen en door andere browsers wordt genegeerd (bv een link naar een IE specifieke style sheet). Grote sites (zoals youtube en tweakers) hebben reeds aangekondigd de ondersteuning voor Internet Explorer 6 (de nagel in de doodskist van iedere webontwikkelaar/webdesigner) te stoppen, dus misschien komt er [i:655fa43b50]eindelijk[/i:655fa43b50] een einde aan deze abominatie en hoeft er slechts nog met IE7 en 8 rekening gehouden te worden, aangezien de rest van de browsers onderling geen of slechts minimale verschillen laten zien.
    IE6 en IE7 tegelijkertijd op je compu | IEtester voor IE5.5 t/m IE8 | [i:655fa43b50]"Must have"[/i:655fa43b50] Firefox add-ons: Web Developer Toolbar, Firebug

    [b:655fa43b50][u:655fa43b50]Handige links (nl)[/u:655fa43b50][/b:655fa43b50]
    [list:655fa43b50][*:655fa43b50] Modern Markup; :Op Modern Markup geven we je de gelegenheid om HTML samen met CSS te leren zoals volgens de officiele standaarden hoort."
    [*:655fa43b50] Sceneone; Vergelijkbaar wat inzet betreft met Modern Markup, uitvoering is redelijk anders.
    [*:655fa43b50] Netters.nl; "Netters.nl is een community voor de bouwers van het web." Website met artikelen en een forum gericht op webontwikeling. (Lijstje handige artikelen)
    [*:655fa43b50] Webrichtlijnen; Richtlijnen voor het ontwerp en ontwikkeling van een website zodat deze toegeankelijk is en aan de standaarden voldoet inclusief onderbouwing.[/list:u:655fa43b50]
    [b:655fa43b50][u:655fa43b50]Handige links (en)[/u:655fa43b50][/b:655fa43b50]
    [list:655fa43b50][*:655fa43b50] A list appart; Website met gerichte tutorials en web georïnteerde artikelen. [i:655fa43b50](misschien meer voor de wat gevorderden)[/i:655fa43b50]
    [*:655fa43b50] CSSplay; "Experiments with Cascading Style Sheets", site met allerhande CSS gerelateerde oplossingen/voorbeelden.
    [*:655fa43b50] Smashing Magazine Site voor website makers met overzichten van de huidige stand van zaken op webdesign gebied.
    [*:655fa43b50] Digital Web Magazine "Digital Web Magazine is an online magazine intended for professional web designers, web developers and information architects." Zoals er staat voor de wat gevorderden. [/list:u:655fa43b50]

    Aanvullingen/verbeteringen zijn welkom, maar [u:655fa43b50]gelieve geen vragen stellen over het maken van een website in dit topic![/u:655fa43b50] Als je een vraag heb en niet genoeg hebt aan de informatie die hier wordt gegeven maak dan een nieuw topic aan.
  • [b:968b73cf1b]Software[/b:968b73cf1b]

    [i:968b73cf1b]Grafische software[/i:968b73cf1b]
    [list:968b73cf1b]
    [*:968b73cf1b]CorelDraw
    [*:968b73cf1b]Gimp / Gimpshop
    [*:968b73cf1b]Photoshop
    [/list:u:968b73cf1b]

    [i:968b73cf1b]Webpage-editors[/i:968b73cf1b]
    [list:968b73cf1b]
    [*:968b73cf1b]Lijst van HTML-editors
    [*:968b73cf1b]Lijst van voornamelijk WYSIWYG-editors
    [/list:u:968b73cf1b]

    [i:968b73cf1b]Contentmanagement[/i:968b73cf1b]
    [list:968b73cf1b]
    [*:968b73cf1b]Vergelijking van cms'sen
    [*:968b73cf1b]Vergelijking van cms'sen
    [/list:u:968b73cf1b]

    [i:968b73cf1b]Forumsoftware[/i:968b73cf1b]
    [list:968b73cf1b]
    [*:968b73cf1b]Lijst van forumsoftware
    [*:968b73cf1b]Vergelijking van forumsoftware
    [/list:u:968b73cf1b]

    [i:968b73cf1b]FTP[/i:968b73cf1b]
    [list:968b73cf1b]
    [*:968b73cf1b]Lijst van FTP-software
    [/list:u:968b73cf1b]

    [i:968b73cf1b]Nog meer lijstjes[/i:968b73cf1b]
    [list:968b73cf1b]
    [*:968b73cf1b]Lijst met nuttige links naar softwarevergelijkingen
    [/list:u:968b73cf1b]
  • Een aantal Firefox Add Ons die ik gebruik bij het maken van sites:
    [list:1b732e12b8][*:1b732e12b8]IE Tab - Bekijk hoe je site eruit ziet in IE vanuit Firefox
    [*:1b732e12b8]Firebug - Grote verzameling handige ontwerp-hulpprogramma's (split screen/sneltoetsen)
    [*:1b732e12b8]Web Developer Toolbar - Grote verzameling handige ontwerp-hulpprogramma's (werkbalk/sneltoetsen)
    [*:1b732e12b8]HTML Validator - Valideert HTML direct bij het laden, je ziet in één oogopslag of een pagina correct is
    [*:1b732e12b8]Live HTTP Headers - Bekijk welke http-headers worden verstuurd bij het bezoeken van een site
    [*:1b732e12b8]DOM Inspector - Bekijk snel en eenvoudig de opbouw van een document (standaard bij Firefox)
    [/list:u:1b732e12b8]
    - Bas
  • Om de website in verschillende browsers te bekijken / testen:

    http://browsershots.org/

    Soms laat de pagina prima en soms lijk ik er niet op te kunnen komen.
    Maar als je op de site bent, echt een super pagina!

    Succes!

    Groetjes, Klimop
  • [quote:3dac510fa6="BasHamar"]Een aantal Firefox Add Ons die ik gebruik bij het maken van sites:
    [list:3dac510fa6][*:3dac510fa6]IE Tab - Bekijk hoe je site eruit ziet in IE vanuit Firefox
    [*:3dac510fa6]Firebug - Grote verzameling handige ontwerp-hulpprogramma's (split screen/sneltoetsen)
    [*:3dac510fa6]Web Developer Toolbar - Grote verzameling handige ontwerp-hulpprogramma's (werkbalk/sneltoetsen)
    [*:3dac510fa6]HTML Validator - Valideert HTML direct bij het laden, je ziet in één oogopslag of een pagina correct is
    [*:3dac510fa6]Live HTTP Headers - Bekijk welke http-headers worden verstuurd bij het bezoeken van een site
    [*:3dac510fa6]DOM Inspector - Bekijk snel en eenvoudig de opbouw van een document (standaard bij Firefox)
    [/list:u:3dac510fa6]
    - Bas[/quote:3dac510fa6]

    Misschien handig om te vermelden dat Firebug niet meer werkt op de nieuwste FF versie.
    Ik persoonlijk maakte er veel gebruik van, maar kan dat nu niet meer met de nieuwse versie van FF. ERG jammer!

    Groetjes Nelleke
  • Nou ja, ik gebruik Ff 3.0.8, en firebug werkt hier nog prima…

    Daarnaast het ik nog een zeer handige plugin gevonden: EditCSS
  • Gecko/20100722 Firefox/3.6.8 ( ) + Firebug 1.5.4 gebruik ik hier ook wel eens.

    Handige beginners editor
    Nog een ie6, 7, 8 checker zonder wachttijden !!

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.