Beste members, met het studie boek HTML&CSS probeer ik het CSS script onder de knie te krijgen.
Het wil maar niet lukken om dat werkend te krijgen.
Ik heb als eerste oefening een heel simpel script overgenomen voor het gebruik van extern CSS.
Het hele CSS script blijft na de uitvoering als tekst verschijnen, dus iets is er fout.
Ik zal het hele voorbeeld volgens het boekwerk hieronder laten zien, de tekst is natuurlijk niet relevant.

Ook begrijp ik niet de <link> tag, die zou de browser moeten vertellen waar het bestand te vinden is.
Misschien kan mij iemand daar mee helpen?


<DOCTYPE html>

<html>
	<head>
		<title>Externe CSS gebruiken 1</title>
		<link href="css/styles.css" type="text/css"
		rel="stylesheet"/>	
	</head>
	<body>
		<h1>aardappelen</h1>
		<p>veel verschillende</p>
</body>
</html>

body {
	font-family: arial;
	background-color: rgb(185,179,175);}
h1 {
	color: rgb (255,255,255);}


Heb ik een syntax foutje gemaakt of is de plaats van het CSS script verkeerd?
Alvast dank.
Cees
**flameknip**

Wat weet jij nu van mijn situatie om zo'n hard commentaar te geven. Als jij werkelijk wist van de "hoed en de rand", hier, zou jij je schamen voor zulk commentaar, tenminste als het woord schaamte in jouw woordenboek voorkomt. **Knip **

[size=xsmall]Toevoeging op 19/09/2020 20:14:49:[/size]

San The, jazeker, alles in kleine letters.
Misschien wordt het CSS-bestand gecached. Oftewel, alles staat wel op de goede plaats, maar je moet even een "harde refresh" uitvoeren om de laatste stijlregels toegepast te krijgen.

Dat gezegd hebbende, indien je voor het CSS-bestand een relatief pad gebruikt, dan moet je zorgen dat het CSS-bestand zich ook relatief bevindt ten opzichte van het bovenstaande HTML-document.

Een makkelijke check om beide in 1x te controleren is het volgende: druk, terwijl je op de betreffende HTML-pagina zit op Ctrl-U (de sneltoets voor het bekijken van de broncode). De meeste browsers hebben een redelijk geavanceerde broncode-viewer die je toelaat om op links te klikken. Klik in de broncode op /css/styles.css. Als het goed is krijg je nu de broncode van je CSS-bestand te zien. Indien je de nieuwe wijzigingen niet ziet druk je op (Ctrl-)F5, dit zorgt ervoor dat de broncode, en daarmee je CSS, wordt ververst. Indien je niet je CSS-bestand te zien krijgt, maar een standaard "pagina niet gevonden" pagina houdt dit in dat het CSS-bestand zich niet op deze positie bevond, of dat deze een andere naam heeft.
Bedankt voor je reactie Thomas, hopelijk is dat het geval. Ga ik mee aan de slag en heb dan weer wat geleerd.
Cees

[size=xsmall]Toevoeging op 20/09/2020 00:41:07:[/size]

Dat laatste was het geval Thomas, ik zoek verder.
Bedankt, Cees
Hm, waar staat nu het CSS-bestand en waar staat het bovenstaande HTML-document gezien vanaf de publieke webdirectory ($_SERVER['DOCUMENT_ROOT'])?

EDIT
Met die initiële slash geeft je aan dat het CSS-bestand zich direct onder de webroot bevindt, onder het mapje /css, dus bijvoorbeeld onder C:\htdocs\css\styles.css. Maar als je zowel het HTML-bestand alsook het CSS-bestand in een testmap zet (bijvoorbeeld C:\htdocs\test\index.htm en C:\htdocs\test\css\styles.css) dan klopt de verwijzing niet meer, want dit is geen relatieve verwijziging vanaf het HTML-document, maar een relatieve verwijziging vanaf de webroot. Wat je dus bij wijze van test nog zou kunnen proberen (indien het CSS-bestand tov het HTML-bestand in de submap css zit) is het verwijderen van de initiële slash van de href, dus css\styles.css in plaats van [color=#ff0000]\[/color]css\styles.css. Vervolgens kun je de broncode van HTML+CSS inspecteren (en verversen) op de eerder beschreven wijze.

En anders zul je iets anders moeten proberen, bijvoorbeeld het instellen van een basisdirectory voor je documenten met behulp van de base-tag. Of ons wat meer uitleg moeten geven waar alles staat.
Eindelijk gevonden, probleem opgelost.
Al eerder heb ik het eens geprobeerd met een interne CSS code en dat gaf wel het goede resultaat.
Met de externe css code zag ik al gauw in de broncode dat het css\styles.css bestand niet gevonden werd.
Jouw duidelijke informatie gaf de oplossing en bij mij ziet het er nu zo uit:

C:\HDMI_CSS\css_exp.html
C:\xampp\htdocs\css\"de css code"

HDMI:

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

Fijn is het, te constateren, dat mijn editor, XAMPP, en eigen website de css code verwerken.

Bedankt Thomas, en alle andere members, voor de tijd die aan mij besteed is.

Cees.
Maar op deze manier staat dat HTML-bestand toch buiten de webdirectory?
Hoe roep je dit bestand aan in je browser? Waarschijnlijk niet met http://localhost/etc want via die weg is dat HTML-bestand waarschijnlijk niet vindbaar.

Waarom zet je beide bestanden niet gewoon onder C:\xampp\htdocs en roep je de webpagina aan via localhost zodat ook alles via je lokale webserver geserveerd wordt? Dat lijkt mij een stuk logischer en weerspiegelt ook beter de situatie wanneer je dit alles op een gegeven moment online zet.

Op die manier kun je ook alles beter testen, waar uiteindelijk deze webserver mede voor bedoeld was?
Sorry Thomas type foutje.
Beide bestanden stonden en staan in :

C:\xampp\htdocs\css\"css code"
C:\xampp\htdocs\css_exp02.html

Ik activeer het opgeslagen .html bestand om het resultaat te zien.
file:///C:/xampp/htdocs/css_exp02.html, maar dat is is niet correct.

Wil je mij nog even "leren" op hoe ik in de browser http://localhost/??? kan aanroepen.
Gewoon openen via die link? Het is een URL, die je altijd boven in je browser invoert.

Piece of cake!
Als je http://www.phphulp.nl kan invoeren dan lukt http://localhost ook. Enige verschil is dat 'localhost' lokaal is, en enkel op jouw eigen pc benaderbaar is.

En dat geldt ook voor je bestanden in /htdocs: http://localhost/bla.html. Maar zulke absolute URL's moet je altijd vermijden, tenzij je het in de base-tag definieert.
Ik ga er vanuit dat C:\xampp\htdocs het (interne) pad voor de publieke webdirectory is.

Deze is via configuratie gekoppeld aan (de externe URL) http://localhost/.

Indien je dus een HTML-document genaamd css_exp02.html direct onder deze publieke webdirectory hebt staan kun je deze via je webserver opvragen/laten serveren via http://localhost/css_exp02.html.

De begrippen "intern pad" en "extern pad" zul je waarschijnlijk wel vaker gaan tegenkomen.

Een intern pad (of directory) is het (vaak volledige) pad via welke bestanden en directories bereikbaar zijn voor de eigen interne/lokale programmatuur en configuratie.

Het externe pad is het pad via welke bestanden via de webserver toegankelijk/opvraagbaar zijn voor externe programma's zoals browsers.

Het "via de webserver" is hier van belang. Sommige bestanden, zoals een PHP-bestand, dienen aan de webserverkant nog verwerkt te worden zodat deze (meestal) omgezet worden naar (delen van) HTML-documenten. Maar wanneer je deze bestanden dus rechtstreeks opvraagt via het interne pad dan sla je de webserver over en ontvang je de rauwe PHP-documenten, en niet de verwerkte variant.

Om dit alles te stroomlijnen is het handig en vaak ook wenselijk om alles via de webserver te laten lopen. Zelfs als je platte HTML-documenten hebt die geen verdere verwerking aan de webserverkant nodig hebben, lijkt het mij toch verstandiger -als je toch al een webserver gebruikt- om deze via de webserver zelf (http://localhost) te serveren / op te vragen, en dit niet via file:// of wat dan ook te doen.

NB Normaal gesproken heb je vanaf een externe locatie sowieso geen rechtstreekse toegang tot de machine waarop de webserver actief is, dus op dat apparaat bestanden proberen te benaderen via een interne directory-aanroep is dan uberhaupt geen optie.

Reageren