Mijn website ziet er anders uit in andere webbrowsers

[csshunter]

Welke web-editor?
Met Kompozer als web-editor zal je een heel eind kunnen komen voor het bouwen van een goede site, denk ik. Je kan makkelijk naar de code-weergave om dingen met de hand aan te passen.
Zelf hou ik er geen WYSIWYG-editor op na. Ik tik alle code er gewoon met de hand in. Daarvoor heb je alleen maar Kladblok nodig, d.w.z. iets als de gratis Notepad++ (geavanceerder en met mooie kleurtjes om snel tags, eigenschappen enz. te kunnen herkennen).
Preview´s heb je toch niet nodig, die zijn vaak onbetrouwbaar, en pagina's testen in echte browsers gaat net zo snel. Voor php moet je tussendoor nog even uploaden, maar als je je FTP-programma stand-by hebt staan, is dat ook met 1 klik gebeurd.

Kennis van html, css en wat javascript moet je sowieso hebben.

• In de www.web-garden.be/cursus-html/cursus-html staat zo ongeveer de basis.
• Op die pagina kan je onderaan op het groene boek klikken, en dan kan je gratis een compleet handboek downloaden (duurt even, want een pdf van > 500 pagina's).
  
• Doornemen van de Webrichtlijnen is ook erg instructief.
• Er is ook nog bv. w3schools.com met een heleboel tutorials en "Try is yourself" voorbeelden, waarmee je online aan de slag kunt.
• En tal van andere tips-pagina's op internet (zoals de Golden Rules of CSS).
• Voor het opzetten van een php-site (heel makkelijk om de herhalende onderdelen op de pagina's er niet steeds volledig identiek in te hoeven zetten; zonder frames!) kan je deze eens doornemen: Mini-tutorial: de opzet van een php-site.

In het begin zal het best even doorbijten zijn (vooral bij css: daar komt nogal veel tegelijk op je af). Mijn ervaring: hoe verder je komt, des te leuker het wordt.
In elk geval: binnen 2 weken lach je de makers van de Webpagemaker en soortgelijke allesbelovers vierkant in hun gezicht uit. :d

Succes!
Met vriendelijke groet,
CSShunter

 

[Mickel1982]

Dank je wel CSShunter

Ik heb notepad++ net gedownload v5.9.3. Ik heb nu ook al de html validation logo links onderin mijn index geplaatst, zodat bezoekers kunnen zien dat de pagina een goede html bron heeft.Ik ga me nu bezig houden met het beter maken van mijn andere pagina's.Heb veel van je geleerd CSShunter en ik doe mijn best om meer te leren over het maken van echte en goede webpagina's zoals mijn index nu is, mischien nog wel beter

Vriendelijke Groet Mickel

 

[csshunter]

O, het Doctype nog!
De Transitional-variant was in 1999 bedoeld om met de toenmalige browsers de toen in omloop zijnde oude sites nog op de been te houden.
Voor nieuwe sites is de Strict-variant aan te bevelen: daarin zijn een aantal tags en eigenschappen verboden, die beter met css kunnen worden gerealiseerd.
De Strict-variant valideert weliswaar niet, als je persé externe links in een nieuw venster wilt laten openen (met de "target"-eigenschap). Maar tijdens de bouw kan je het beste toch de Strict variant gebruiken, dan is de rest tenminste in orde. Op het allerlaatste moment, als de site helemaal in kannen en kruiken is, zet je het Doctype dan om naar Transitional, en zit je op 100% valid.

Dan is er nog de keus tussen html4.01, xhtml1.0 en html5.
Html5 is nog geen echte standaard, en html5-eigenschappen moeten voorzichtig gebruikt worden (met terugval-mogelijkheid voor browsers die een bepaalde html5-eigenschap niet aan kunnen).
Ik zou voorlopig nog xhtml1.0 gebruiken, die is (terecht) kritischer in de code-structuur dan html4.01, maar voor de rest hetzelfde.
Voor overeenkomsten en verschillen kan je bij w3.org terecht: html5-html4, xhtml-html.

Leesvoer genoeg!

PS:
Het toevoegen van logo'tjes "valid html" en "valid css" is voor een beetje professionele sites in onbruik geraakt: zou ik niet doen.
Voor de doorsnee-surfer heeft het geen enkele toegevoegde waarde: die wil gewoon weten wat er op de site staat, en als de site doet wat ie verwacht, is het genoeg.
De niet-doorsnee surfer, die graag wil weten of de pagina valid is, weet precies op wel knopje hij/zij in zijn/haar Webdeveloper Toolbar moet klikken, en heeft allang de Tidy validatie add-on binnengehaald, die geïntegreerd is bij het bekijken van de broncode. En met Firebug kan hij/zij de rest wel analyseren.
- Zo, heb je ook nog wat onmisbaar spul voor in de smidse.

 

[Mickel1982]

Ik heb het logo tje toch maar verwijdert, Ik ben nu bezig met css, ik heb mijn website getest en krijg 3 errors, dit gaat over mijn 3 logo's in het midden de computers and internet, how to create website, travel and holiday logo's. Ik weet niet precies wat ze bedoelen met:
46 img.c23 Parse Error opacity=100)
46 img.c23 Property -moz-opacity doesn't exist : 1.0 1.0
46 img.c23 Property opacity doesn't exist in CSS level 2.1 but exists in : 1.0 1.0

 

[csshunter]

Wat ze bedoelen is dit:

• filter: alpha(opacity=100); is geen standaard-css (dus niet valid), maar alleen geschikt voor Internet Explorer.
• -moz-opacity: 1.0; is een eigenschap die alleen door Mozilla/Firefox begrepen wordt, en eveneens invalid;
• opacity: 1.0; is een eigenschap die niet in css2.1 zit (waarop de css-validator standaard test). Maar de opacity zit wel in css3, en wordt door een aantal browsers al goed begrepen, ook zonder browser-specifieke extra css (eigenlijk een soort hacks).
  De css-validator zegt "but exists in ", en laat verder in het midden waar het dan wel in bestaat.
  Dat is een validator-foutje. Er had moeten staan: "but exists in CSS version 3".

Nu is het aardige, dat in deze stijlregel de "opacity" (ondoorschijnendheid) van de drie afbeeldingen op de waarde 1 (=100%) gezet wordt als ze voor het eerst op de buis komen.
Maar ... de beginwaarde van opacity is standaard al 1 (resp. 100%), alle afbeeldingen op een webpagina worden normaal gesproken niet doorzichtig gemaakt.
Dus de hele regel 46:

img.c23 {FILTER: alpha(opacity=100);-moz-opacity: 1.0; opacity: 1.0;}

kan je er uit wissen.
De pagina blijft dan gewoon werken (de opacity bij hoveren wordt geregeld met javascript), en is meteen valid css.


Met vriendelijke groet,
CSShunter

 

[Mickel1982]

Bedankt CSS hunter, ik heb het aangepast en nu is mijn index html en css goed,nu nog de rest van mijn pagina's.Ik zal me meer bezig houden met het leren van html,css, en java, ik weet al hoe je een share this button moet plaatsen op pagina's, en heb toch al veel geleerd in een korte tijd,dankzij jou CSShunter

Vriendelijke groet
Mickel