Tekst op site soms onder elkaar i.p.v. in gewone regels

[nirwana]

met het weghalen van die breedte is het probleem inderdaad opgelost, alleen snap ik er geen hout van hoe dat dan ontstaan is.

In mijn voorbeeld zie je dat de kolommen aan de bovenkant een breedte van 76 pixels hebben. Zo is ook deze kolom ontstaan. Blijkbaar is die kolom later vergroot en over 3 kolommen verdeeld. Wel is die breedte van 76 pixels blijven staan. Die heb je nu dus alsnog weggehaald en dan wordt de kolom echt over de 3 kolommen verdeeld.

Wat het grotere lettertype betreft: als ik bijvoorbeeld naar de code van http://www.platformnederlandsefolklore.nl/bestuur.html kijk, dan zie ik daar een <big> en een </big> staan. Als je die verwijdert, dan heb je die letters weer op normale grootte.

Sowieso lijkt het me handig als je weer terug bent dat we eens naar 1 stylesheet voor alle pagina's gaan kijken. Dan kun je namelijk de algehele stijl van de diverse webpagina's veel handiger op elkaar afstemmen. Als je dan een ander lettertype (of andere lettergrootte) wilt dan hoef je dat slechts in 1 bestand aan te passen.

[Hannes1]

Beste mensen, het werk aan mijn site heeft wat vertraging opgelopen, o.a. door vakantie en een inbraak, maar ik ben er weer volop mee bezig want ik wil onze oude site eind januari laten stoppen. Ik heb nu nog twee dingen die mij storen en daarnaast nog een aantal dingen die "wel eens een keer later" aan de beurt zullen komen, zoals het contactformulier.
Als iemand met de cursor over de foto's loopt komt er een handje, als je dan aanklikt komt er een scherm dat zegt dat die op de server niets kan vinden. Hoe kan ik dit zo wijzigen dat die foto dan opduikt en zoniet hoe kan ik dan het handje wegkrijgen?
Tweede punt: op mijn pagina "agenda" staan helemaal onderaan twee musea vermeld, Dokkum en Katwijk. De letters zijn daar even groot als de andere op die pagina, alleen op de pagina zoals die op mijn PC staat heb ik die alineaas in kleinere tekst moeten maken. Ik heb deze tekst gekopieerd uit MS Word, door ze eerst te saven als "tekst zonder opmaak" en dan te kopieren en te plakken. Gewoon te plakken, want "plakken zonder opmaak" blijft bij mij inactief.
Wellicht ten overvloede, de URL is http://www.platformnederlandsefolklore.nl

[nirwana]

Hannes,

Ik zou nog een actiepunt op jouw lijstje zetten: elke pagina een duidelijke titel geven.
Nu kom je op de website en heet de pagina "pnf index". Dat komt dan ook in de titelbalk van de browser te staan en ook in bladwijzers als iemand de website als favoriete site toevoegt. Het voorzien van goede titels neemt niet veel tijd in beslag en staat direct een stuk beter.

Op http://www.mozbrowser.nl/web/pnf/agenda.html heb ik de agenda-pagina wat verbouwd.
Ik heb hier vooral code uit gehaald. Eerst heb ik de HTML-code van de agenda door de web-dienst http://wordoff.org/ gehaald.
Deze code was namelijk wat vervuild geraakt door het kopiëren van teksten vanuit Word.

Daarna heb ik nog constructies als <o:p></o:p> uit de code verwijderd. Dat zijn namelijk ook van die dingen die Word meebrengt en waarvan ik de achterliggende gedachte nooit heb begrepen.

Vervolgens heb ik de meeste <small> en </small> codes weer uit de tekst verwijderd.
Er zijn een aantal zaken die je moet zien te vermijden bij het maken van een website:
- het uitlijnen van elementen met een heleboel spaties of Enters
- voor elke alinea bepalen wat de lettergrootte moet zijn
Lettertype en lettergrootte leg je bij voorkeur eenmalig vast voor een website.
Moet daar dan iets aan veranderd worden dan doe je dat weer op die centrale plaats.

Daarom heb ik ook een stylesheet toegevoegd. Met een stylesheet zorg je ervoor dat alle opmaak van de website in 1 centraal bestand vastligt. Dat bestand heb ik nu even style.css genoemd en ik heb agenda.html daarnaar laten verwijzen. Zo kan elke pagina bijvoorbeeld hetzelfde lettertype krijgen en dezelfde lettergrootte. Dan hoef je alleen nog maar bepaalde elementen bijvoorbeeld vetgedrukt te maken of een iets grotere letter te geven als je daar de nadruk wilt leggen.

Met de link onder de afbeelding kun je 2 dingen doen:
1) weghalen
2) naar een foto verwijzen
Als je in Kompozer de eigenschappen van een afbeelding opvraagt, dan heb je ook een tabblad dat Koppeling heet. Daarmee kun je bepalen of er een link onder de afbeelding moet komen en waar deze dan naar verwijst. Ik neem aan dat je daar bijvoorbeeld fotos/kop5 in hebt geplaatst, terwijl de link zou moeten verwijzen naar fotos/kop5.jpg

Helaas kun je met dat venster niet aangeven dat de link naar de afbeelding in een nieuw venster moet openen. Als je dan er op klikt dan wordt de afbeelding in hetzelfde venster geopend. Vooralsnog zou ik de link onder deze afbeeldingen gewoon verwijderen, omdat deze weinig extra toevoegt. Het wekt mogelijk vooral verwarring op als men erop klikt en dan alleen die foto in beeld ziet (en moet bedenken dat ze met de Terug-knop van de webbrowser dan wel weer op de website uit komen).

Als mijn wijzigingen je bevallen dan kun je deze overnemen in je eigen website.
Daarvoor ga je naar het bovenstaande adres en dan vraag je de code van de webpagina op (via het menu Beeld > Bron of CTRL+U). De code die je dan te zien krijgt kun je geheel kopiëren en in de broncode-weergave van jouw Agenda-pagina plakken. Vervolgens kun je de pagina weer in de normale weergave tonen en dan zouden de wijzigingen daarin zichtbaar moeten zijn.

Vergeet echter niet om ook de inhoud van het bestand style.css mee te kopiëren. Daarvoor kun je http://www.mozbrowser.nl/web/pnf/style.css in Firefox (of een andere webbrowser die een CSS-bestand niet direct download) opvragen en vervolgens via het menu Bestand > Pagina opslaan als... het bestand opslaan in de map waar je nu jouw website-bestanden hebt staan. Als je dat gedaan hebt, dan moet de agenda-pagina ook weer de gele achtergrondkleur krijgen. Die heb ik nu vanuit de pagina naar de stylesheet verplaatst.

Als je het voordeel van het gebruik van een centrale stylesheet inziet, dan kan ik je ook wel instructies geven van hoe je met Kompozer aan een bestaande pagina een stylesheet kunt koppelen.

[Hannes1]

Beste Nirwana,

Je antwoord is een heel verhaal, ik ga op mijn gemak je aanbevelingen uitvoeren, het zal even tijd nodig hebben, maar het gaat gebeuren.

Hartelijk bedankt voor je bemoeienissen.
Hannes

[Hannes1]

Hallo Martijn, het ging sneller dan ik dacht, zelfs met mijn 69 jaren. De verwijzing met de foto's snap ik, ik heb het met eentje geprobeerd en dat ziet er beter uit, het schept in elk geval geen valse verwachtingen.
Jouw gecorrigeerde "agenda" ziet er keurig uit, die heb ik gekopieerd, ook de style.css meegenomen en naar de server gebracht, alleen ben ik nu de oranje achtergrond kwijt, hoe krijg ik die er weer in, want dat gaf nu juist dat leuke contrast. Als dat gefixt is leer ik graag het trucje van je om de andere paginaas ook zo te doen.
De homepage "index" noemen was een aanbeveling uit de cursus, dat zouden de meeste zoekmachines prefereren, maar ik geef die mening graag voor een betere, is dan bijvoorbeeld:"plaform index" beter, of "platform home"?
Met hartelijke groet, Hannes (Hans van Buuren)

[nirwana]

Hallo Martijn, het ging sneller dan ik dacht, zelfs met mijn 69 jaren. De verwijzing met de foto's snap ik, ik heb het met eentje geprobeerd en dat ziet er beter uit, het schept in elk geval geen valse verwachtingen.

Ok. Mijn uitleg is overigens niet aan een leeftijd gebonden, dus zou voor iedereen met een beetje goede wil te volgen moeten zijn.

Jouw gecorrigeerde "agenda" ziet er keurig uit, die heb ik gekopieerd, ook de style.css meegenomen en naar de server gebracht, alleen ben ik nu de oranje achtergrond kwijt, hoe krijg ik die er weer in, want dat gaf nu juist dat leuke contrast. Als dat gefixt is leer ik graag het trucje van je om de andere pagina's ook zo te doen.

Het is niet meer dan in de broncode van de pagina tussen <head> en </head> deze code te plaatsen:

Code: Selecteer alles

<link rel="stylesheet" href="style.css" type="text/css">

Overigens kun je dit functioneel ook via Kompozer doen. Daarom zal ik het hier maar beschrijven:
- ga in Kompozer naar het menu Extra > CSS bewerken
- klik op het pijltje naast het palet-icoon en kies voor Link Elt.
- vervolgens kun je aan de rechterkant via de knop Bestand kiezen een bestand selecteren (kies hier voor style.css)
- dan klik je op Stijlblad aanmaken en als alles goed is gegaan dan zie je dat de pagina al een oranje achtergrond krijgt
- klik daarna op Ok om naar de pagina terug te gaan

Op dit moment kan ik jouw website erg lastig bereiken, maar dat zal ergens aan de hosting-provider liggen.

De homepage "index" noemen was een aanbeveling uit de cursus, dat zouden de meeste zoekmachines prefereren, maar ik geef die mening graag voor een betere, is dan bijvoorbeeld:"plaform index" beter, of "platform home"?

Waarschijnlijk ging die aanbeveling over de bestandsnaam en niet zozeer over de titel van de pagina. Dat zijn 2 losse zaken. Als Titel van de beginpagina zou ik kiezen voor "Platform Nederlandse Folklore". Dit kun je per pagina in Kompozer aanpassen in het menu Opmaak > Paginatitel en eigenschappen.

[nirwana]

Op dit moment kan ik jouw website erg lastig bereiken, maar dat zal ergens aan de hosting-provider liggen.

Inmiddels is de snelheid weer als vanouds, dus kan ik de website weer goed bereiken. Dan blijkt dat je het bestand style.css nog niet naar de webserver hebt gestuurd: www.platformnederlandsefolklore.nl/style.css

[Hannes1]

Hallo Martijn,

Het vordert met horten en stoten. Ik had de style pagina wel naar de server gebracht, maar de naam gekopieerd als "style(1).css" (je ziet ik kan zelfs het goede haakje niet vinden) nu heb ik deze 1 tussen haken weggehaald en staat het er correct.

Deze zelfde verwijzing voor de andere pagina's doen lukt me niet. Als ik de pagina open in Kompozer en dan via "extra" naar "CSS bewerken" ga krijg ik het schermpje "CSS stijlbladen" en daar kan ik dan niet dezelfde URL inzetten die er bij het blad "agenda" in staat.

Ik zou dat wel graag voor elkaar krijgen want de pagina "agenda" ziet er nu strakker uit dan alle andere, compact en goed leesbaar. De namen van de pagina's heb ik gecorrigeerd en je tip voor de foto's gevolgd, je ziet ik ben geen snelle leerling, maar wel een brave................

Met hartelijke groet, Hans

[nirwana]

Het vordert met horten en stoten. Ik had de style pagina wel naar de server gebracht, maar de naam gekopieerd als "style(1).css" (je ziet ik kan zelfs het goede haakje niet vinden) nu heb ik deze 1 tussen haken weggehaald en staat het er correct.

Dat is heel mooi.

Deze zelfde verwijzing voor de andere pagina's doen lukt me niet. Als ik de pagina open in Kompozer en dan via "extra" naar "CSS bewerken" ga krijg ik het schermpje "CSS stijlbladen" en daar kan ik dan niet dezelfde URL inzetten die er bij het blad "agenda" in staat.

In het schermpje "CSS stijlbladen" zie je ook een werkbalk. Als eerste icoon staat daar een schilderspalet met daarnaast een pijltje. Als je op dat pijltje klikt dan zie je diverse opties. Daaruit kies je Link Elt. en dan zie je het scherm aan de rechterkant veranderen. Vervolgens kun je daar de stappen volgen die ik gisteren heb aangegeven. Na het kiezen van een bestand komt er dan een wat vreemde verwijzing in de vorm file:/// te staan, maar daar weet Kompozer wel raad mee.

Ik zou dat wel graag voor elkaar krijgen want de pagina "agenda" ziet er nu strakker uit dan alle andere, compact en goed leesbaar. De namen van de pagina's heb ik gecorrigeerd en je tip voor de foto's gevolgd, je ziet ik ben geen snelle leerling, maar wel een brave................

Daar houd ik wel van
Wel kan het zijn dat de andere pagina's nadat je deze stylesheet eraan hebt gekoppeld er minder mooi uit zien dan de huidige agenda-pagina. Dat is omdat ik de code van de agenda-pagina eerst door WordOff heb gehaald om deze zoveel mogelijk te zuiveren van ongewenste code.

Mocht je aan die andere pagina's ook een stylesheet gekoppeld hebben en die zien er minder mooi uit, dan zullen we moeten bekijken waar dat door veroorzaakt wordt. Overigens heeft Kompozer onder het menu Extra ook een functie HTML opschonen, maar volgens mij kan die slechts bepaalde zaken corrigeren.

[nirwana]

Hans,

Op http://www.mozbrowser.nl/web/pnf/ heb ik nu ook de begin-pagina in de nieuwe stijl geplaatst.
Daarbij heb ik ook de YouTube-filmpjes in de pagina opgenomen. Daarvoor ben ik bij YouTube naar de filmpjes gegaan en heb daar op de knop Embed geklikt. Dan hoef ik slechts die code te kopiëren en op de juiste plaats in de webpagina in te voegen.

Dat invoegen kun je in Kompozer doen via het menu Invoegen > HTML. Dan krijg je een invoerscherm waarin je deze code kunt plakken. Overigens zie je deze filmpjes niet direct in Kompozer verschijnen. Je ziet alleen een placeholder met daarin een object-tag vermeld staan. Maar zo weet je wel hoeveel ruimte deze innemen en waar deze straks op de website zullen verschijnen. Als je wilt weten hoe dat er uit komt te zien dan open je de webpagina in een webbrowser (via het menu Bestand > Pagina bekijken in Kompozer).

[Hannes1]

Martijn, alweer bedankt voor het snelle en uitgebreide commentaar.
Hans

[nirwana]

Hans,

Overigens heb ik de tekst van de index-pagina niet door WordOff gehaald. Die was dus vrij snel goed.

Wel moest ik nog iets bijschaven in het menu aan de linkerkant. Dat menu staat namelijk vol met allemaal small-instructies die daar waarschijnlijk ook niet echt nodig zijn. Met CSS-regels kun je namelijk ook bepalen wat de grootte van linkjes in een bepaald blok zou moeten zijn. Maar goed, laten we eerst maar alle pagina's aan de stylesheet koppelen en dan kunnen we het altijd nog verder optimaliseren.

[nirwana]

Als ik met Google zoek op Platform Nederlandse Folklore dan kom ik overigens eerst een website bij Steigan tegen. Vervolgens komen de eigenlijke pagina van de website met pnf in de titel. Overigens neem ik aan dat Google ook de nieuwe titels wel zal overnemen. Vooralsnog heeft Google jouw site op 21 november voor het laatst geïndexeerd (als ik op de pagina in hun cache af mag gaan).

Ook zie je daar het belang van de titel van de pagina, want die wordt door Google overgenomen. De website bij Steigan heeft vooralsnog een hogere pagerank dan jouw PNF-website. Pagerank bepaalt onder andere hoe hoog een pagina in de zoekindex van Google komt te staan. Toch neem ik aan dat uiteindelijk de Steigan-website gaat verdwijnen en dat die functie wordt overgenomen door de website waar je nu mee bezig bent.

Ook zie je dat Google mijn kopie-pagina al heeft geïndexeerd. Daarom heb ik nu maar enkele noindex, nofollow-tags aan deze pagina's toegevoegd. Die kopieën mag Google namelijk best vergeten. Mocht dat niet vanzelf gebeuren, dan kan ik alsnog die kopie-pagina's weer verwijderen.

[Hannes1]

Martijn, ik heb nu alle pagina's met style.css gekoppeld en ik zie maar een paar rare dingen gebeuren. Het meest storend de foto's op blad "links". Met name de 4 foto's van Yduna, Maroesjka, Marnix en Orient krijg ik niet meer netjes in het gelid. Op pagina "ondersteuning" is de tekst te vet. Twee dingen vallen mij dus maar op en dat valt me reuze mee.
Ik heb geprobeerd een pagina te corrigeren met extra>HTML opschonen, maar toen kwamen de verwijzingen aan de linkerzijde naar de andere pagina's op een kluitje te staan i.p.v. netjes onderelkaar, dus daar ben ik maar vanaf gestapt.
Jouw voorstel voor de voorpagina heb ik even ter beoordeling aan mede bestuursleden gegeven, het ziet mij er een beetje te vet uit, maar dat kan men ook positief waarderen, dus dat zet ik even in de ijskast.
Hans

[nirwana]

De pagina's ondersteuning en links heb ik inmiddels aangepast:
www.mozbrowser.nl/web/pnf/ondersteuning.html
www.mozbrowser.nl/web/pnf/links.html

Bij de ondersteuning-pagina heb ik diverse font- en small-tags verwijderd.

Bij de links-pagina heb ik ook veel uit de pagina verwijderd. Je had de afbeeldingen links en rechts laten "floaten", maar volgens mij is dat niet nodig. Door dat floaten kan het voorkomen dat je de effecten krijgt zoals je ze beschrijft. Ook heb ik diverse linebreaks ( <br> ) verwijdert. Nu ik dat floaten uit heb gezet, zijn die linebreaks ook niet meer nodig.

Overigens is de webserver waarop de PNF-website staat op dit moment weer erg traag. Dit lijkt me iets om eens naar te informeren bij de hosting-provider. Het komt allemaal wel, maar met een zeer grote vertraging. Ik neem aan dat het net als gisteren later op de avond wel weer goed is. Maar eigenlijk mag dit niet optreden. De afbeeldingen die je gebruikt zijn niet bijzonder groot en de webpagina is ook niet bijzonder groot, dus daar kan het niet aan liggen.