wat leren voor een goede website te bouwen? xhtml of html, css en javascript?

[djeric]

hallo.

ik wil graag een website bouwen die dan voor iedereen goed leesbaar blijft.
dus als men een andere scherm resolutie gebruiken, of andere windows en andere browsers type zoals ie6, ie7, ie8 firefox, etc etc....
dat het dan allemaal overzichtelijk blijft?

ik heb een goede site gevonden waar ik veel kan leren, maar heb veel keus. en weet niet goed wat ik moet leren? op: http://www.mijnhomepage.nl/index.php vind ik veel informatie over een website bouwen, maar is dit wel een goede site om het te leren???

ik wil alles in kladblok uit typen en de codes leren.
maar ik lees dat je:

xhtml, html, css en javascript kan leren.

maar welke van de 4 moet ik leren??? ik neem aan dat css belangrijk is en makelijk is om zelf dingen te bewerken. dus dat leer ik al.
javascript weet ik niet of ik dit moet leren? want twijfel of andere browsers type's en mensen met andere scherm resoluties alles goed bij werkt?

en xhtml en html welke van de 2 moet ik gebruiken??? mij lijkt dat xhtml meer kan. maar houd dit in dat iedere type gebruiker ook alles goed te zien krijgt?
niet dat een windows 98 gebruiker met ie 6 van een scherm resolutie van 800x600 allemaal vreemde figuren ziet staan als een gebruiker die windows 7 ie 8 met een scherm resolutie van 1024x768 te zien krijgt????


kortom:
is A: wat moet ik leren? xhtml of html ??? en javascript en css???
is B: die website van mijnhomepage een goede site om het te leren???

Ik wil een site maken die voor de meeste mensen dan goed leesbaar blijft, het bevalt veel pagina's dus moet kijken welke menu e.d. ik dan wil nemen.
maar weet niet een goede start om te leren wat wel alle type browsers e.d. ondersteunt?

 

[Goeroeboeroe]

In ieder geval 'n goed begin om eerst wat te vragen
mijnhomepage is in het algemeen 'n prima site, alleen is hun deel over html wel wat verouderd. Ze zeggen bijvoorbeeld dat je niet om frames heen kunt ('n techniek met heel veel nadelen). Dat was tot voor 'n tijdje ook zo, maar inmiddels niet meer.

Als je alles met de hand wilt doen: prima! Handwerk is nog steeds veel en veel beter dan de duurste wysiwyg-editor. En je weet wat je doet, kunt ook corrigeren en zo.
Om je op te vrolijken: naast html, xhtml, JavaScript en PHP zijn er desgewenst nog vele tientallen andere talen om je op te storten.

Als je 'n site goed opbouwt, is die altijd te zien op elke maat scherm. (Nou ja, elke...) Meestal ook zonder dat er 'n horizontale scrollbar verschijnt. Andere lettergrootte en zoomen zou ook geen probleem moeten zijn. Mobieltjes en zo is 'n heel apart verhaal, dat ligt veel ingewikkelder.
Als een site goed in elkaar zit, maakt het geen enkel verschil welk besturingssysteem of welke browser iemand gebruikt. Hooguit dat 'n oud kreng als IE 6 gewoon bepaalde dingen niet kán, omdat hij te oud is. Maar dan zie je nog steeds alles wel. Op mijn eigen site bijvoorbeeld is er 'n handige (vind ik) inhoudsopgave bij lange pagina's. Die werkt niet in IE 6. Maar ze kunnen wel de hele pagina lezen.

Wat je eerst moet leren is html en css.
html is de inhoud, de tekst zeg maar, van de site. En de structuur: wat is belangrijk, wat minder belangrijk, wat is 'n menu, dat soort dingen.
css zorgt voor de opmaak, de lay-out.
'n Uitstekende cursus, verreweg de beste vind ik, staat op http://www.web-garden.be/
Gratis.

Als je 'n site maakt volgens de standaard, waarbij je css gebruikt voor de lay-out en geen tabellen of frames, dan past hij overal op. Als je dan ook nog volgens de 'strict' standaard werkt, dan is je site probleemloos over te zetten naar html5, de nieuwe versie. 'n Goede cursus, zoals die Belgische, werkt al alleen volgens de 'strict' methode. (De oude methode gooide css en html door elkaar heen. Vroeger had je geen andere manier, tegenwoordig gelukkig wel.)

JavaScript wordt gebruikt voor 'extra' dingen. Leuke menu's, bewegende poppetjes die over je scherm rennen, dat soort dingen. Maar 'n goede site werkt nog steeds als er geen JavaScript aanwezig is. Dan is 't menu misschien minder flitsend, maar het werkt nog wel.
Dat is belangrijk voor spraakbrowsers van blinden, voor mensen die geen muis kunnen gebruiken, enz., maar ook voor zoekmachines. De spider van 'n zoekmachine is te vergelijken met 'n blinde die wordt voorgelezen. Als voor 'n spraakbrowser je menu niet werkt, kan de zoekmachine 't ook niet volgen en kom je dus (veel) lager in de zoekindex.

PHP (in samenwerking met JavaScript vaak) wordt gebruikt voor dingen als formulieren die worden verzonden. Het wordt ook vaak gebruikt om iets wat steeds terugkomt op elke pagina in te voegen.
PHP hoef je eigenlijk niet te leren, want er zijn tig scripts voor formulieren en zo, en invoegen is heel simpel. Tenzij je 't leuk vindt om te leren natuurlijk.

Ik zou beginnen met css en html, dat is de basis. JavaScript, daar loop je dan vanzelf wel tegenaan. Ook daarvan is trouwens vrijwel alles te vinden, als je iets nodig hebt. Maar css en html moet.
xhtml is precies het zelfde als html, maar met 'n paar extra regeltjes. Tot zo'n twee jaar geleden leek het erop dat html zou verdwijnen en xhtml de opvolger zou worden. Inmiddels is het voor websites precies omgekeerd: xhtml is de komende tig jaar nog niet bruikbaar en aan html wordt juist weer heel hard gewerkt. Dus dat scheelt al 'n taal om te leren. (De redenen voor dat gedoe zal ik je maar besparen.)

Wat ook belangrijk is, nou ik kennelijk toch even 'n complete roman weg wil schrijven :
Houdt vanaf het allereerste begin rekening met 'n goede structuur. Dat wordt meestal vergeten. Het is belangrijk voor spraakbrowsers e.d., en dús voor zoekmachines. De belangrijkste titel in 'n <h1>, iets minder belangrijk in 'n <h2>, enz.
Voor zoekmachines kun je op http://css-voorbeelden.nl/links.html#a-zoek links vinden.
Vooral de vertaalde beginnersgids van Google met aantekeningen van 'n ervaren zoekmachine-figuur kan ik je aanraden. Dit is dus niet alleen van belang voor zoekmachines, het is ook van belang voor spraakbrowsers e.d. Hier gaat sociaal gedrag heel mooi samen met eigenbelang.
'n Goed gestructureerde site is ook veel makkelijker te onderhouden. Mede omdat de lay-out volkomen is losgekoppeld en in de css staat.

Op die pagina waarnaar ik hierboven link staan trouwens heel veel links die met het maken van 'n site te maken hebben. Je vindt ook 'n aantal keren mijnhomepage, over bepaalde onderwerpen. De links op die pagina leiden in ieder geval naar kwalitatief goede sites. (Dat weet ik zeker, ahem, want het is m'n eigen linkpagina, zei hij onbescheiden...) Niet onbelangrijk, want er is echt ongelooflijk veel bagger in omloop op 't gebied van handleidingen en zo. Of zwaar verouderd, zoals 't tien jaar geleden gebeurde. Niet erg, maar vaak staat dat er niet bij, en dan is 't wel vervelend. Kom je na weken werk hier op 't forum met 'n probleem en dan is 't enige wat we kunnen zeggen: "Sorry, begin maar helemaal opnieuw."

Edit: kladblok is masochisme (hoewel er hier 1 iemand rondhuppelt die dat niet vindt ) Ik werk zelf op Linux, dus ik ken niet veel goede programma's voor Windows meer. Maar Notepad++ (gratis), zeg maar Kladblok met groeihormonen, is prettiger. Dat kleurt bijvoorbeeld je code, waardoor fouten eerder opvallen.

Nog nog wat algemene tips: test je site heel erg vaak in IE 6, 7 en 8, Opera, Safari, Google Chrome en Firefox. Op die pagina met links vind je ook mogelijkheden om meerdere versies van IE naast elkaar te laten draaien.
Maak je site in Firefox. Dat heeft de meeste hulpmiddelen. Vind je ook op die pagina met links, die hulpmiddelen (extensies).
En test alles wat je doet voortdurend in de validator (css en html) op fouten. Links daarnaar vind je ook al op die pagina. Ik ga ze niet allemaal hier zetten, want dit is al 'n heel klein beetje langer geworden dan ik plande
Ja, als opa eenmaal begonnen is met kleppen...

 

[csshunter]

Paar aanvullingen bij de genoemde links-pagina:

ad Validators:

• Cynthia Says
  Toetst op de automatisch testbare toegankelijkheidseisen van de WCAG (prioriteit 1,2,3) of de Amerikaanse 508-richtlijnen voor toegankelijkheid. Met uitgebreide waslijst van gevonden voorwerpen en suggesties voor verbeteringen.

ad Online wijzigingen uitproberen:

• Web Developer Toolbar
  Onmisbare toolbar (add on) voor Firefox. Kan o.a. online wijzigingen in een pagina laten zien van css en html. Daarmee ook: images vervangen door een ander img dat ergens online staat. En nog veel meer: absolute aanrader!

ad CSS/Overzicht eigenschappen (properties), cursussen

• Golden Rules Of CSS
  Dertien praktische attentiepunten voor het aanmaken van een gezonde css/html-pagina (Engels). Met lijstje "Golden Links" voor verwijzingen naar betrouwbare bronnen. (Dat weet ik zeker, ahem, want ... afijn, je kent dat).

Met vriendelijke groet,
CSShunter

 

[Goeroeboeroe]

En dan nog 'n aanvulling van mij: er zitten natuurlijk fouten in die pagina met links. Ze werken wel, dat is automatisch te controleren. Maar laatst bijvoorbeeld bleek er eentje voor gratis plaatjes opeens veranderd in 'n pornosite. Tja, 't waren wel. plaatjes, dat wel.
Bedankt voor de aanvullingen! Cynthia says stond er wel, maar onder de officiële naam (ik werd gek van al die namen, dus ik noem vrijwel alleen maar de link.) Toegevoegd, want Cynthia says kent iedereen en de officiëlen naam niemand.

Web Developer en Firebug heb ik nog 'ns neergezet bij online wijzigingen proberen. Nooit aan gedacht.

Ook maar 'n link naar je Golden Rules aangebracht. Heb 't wel veranderd in Bronzen Regels, want er moet wel enige rangorde zijn
(Ik hoor 'm denken: zou hij dat nou echt hebben gedaan...)

Da's 't leuke van 'n forum: kijkt er nog 'ns iemand kritisch naar wat je doet.

 

[djeric]

En dan nog 'n aanvulling van mij: er zitten natuurlijk fouten in die pagina met links. Ze werken wel, dat is automatisch te controleren. Maar laatst bijvoorbeeld bleek er eentje voor gratis plaatjes opeens veranderd in 'n pornosite. Tja, 't waren wel. plaatjes, dat wel.

(Ik hoor 'm denken: zou hij dat nou echt hebben gedaan...)

Da's 't leuke van 'n forum: kijkt er nog 'ns iemand kritisch naar wat je doet.

juist ja

maar begrijp dat ik met html en css aan de slag moet.

en ben zelf al redelijk bekend met de bassis van html. nu nog de css.

het gaat er mij ook om, dat ik een website heb die door de meeste internetters probleemloos kan worden bekeken. zonder dat bv een plaatje of menu op een verkeerde plek staan.

en kan wel nuttige tips gebruiken uit je links.

toppie:thumb:

 

[csshunter]

(
@Goeroeboeroe:

... Bronzen Regels ...

Geen enkel bezwaar: als het maar bling-bling is.
"IJzeren Regels" zouden trouwens ook niet misstaan hebben, die zijn onbuigzamer en zitten nog vóór het bronstijdperk.
Jammer dat ik op 't moment niet bij de site kan komen, dan had ik css-voorbeelden.nl schielijk toegevoegd aan de Golden (sorry: Bronzen ) Links.
Maar staat op de to-do lijst!
)