foto publiceren

Vragen over html, css en aanverwante onderwerpen die met het maken van 'n site te maken hebben. In principe, vanwege tijdgebrek, alleen over code op deze site, maar je kunt natuurlijk altijd proberen...
Plaats reactie
Stientje1!
Berichten: 2
Lid geworden op: di 14 jun 2022, 08:19

foto publiceren

Bericht door Stientje1! »

ik ben net begonnen aan mijn eerste site, ik heb geen achtergrond in de ict, en ben in het diepe gesprongen door een cursus javascript te gaan volgen.
Dat was iets te ambitieus, ik zat tussen allemaal ict ers...vreselijk
Maar goed, ik ben dus maar begonnen met html, maar ik krijg iets simpels al niet voor elkaar. ik krijg een foto niet gepubliceerd.
Ik maak een schrijffout maar ik zie hem niet. ik moet de foto uit het mapje halen, moet ik dan beginnen bij Dezepc/Documenten/foto? Of is Documenten genoeg? Ik zie overigens wel dat er een plaatje staat maar het is niet groot genoeg.
Voor jullie zal het wel iets simpels zijn, maar ik heb echt geen idee. Kan iemand even meekijken?
Dank.
Stientje


<!DOCTYPE html>
<html>
<head>
<title>eindopdracht</title>
<b>VISWINKEL</b><img src="Dezepc/Documenten/foto/viskopen.jpg"
alt="viswinkel" style="width ="175" "height" = "300">

</head>
Goeroeboeroe
Beheerder
Berichten: 298
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: foto publiceren

Bericht door Goeroeboeroe »

Hallo Stientje,

Eigenlijk is dit forum meer bedoeld voor vragen over de voorbeelden op deze site. Dat is verder geen enkel probleem, maar omdat dit forum héél stil is, kan het daardoor langer duren voor je 'n reactie krijgt. Op https://www.css-voorbeelden.nl/links.html#a-css-forums staan 'n paar forums, waar het wat drukker is. Maar dit is dus niet bedoeld om je af te schrikken.
Trouwens hartstikke leuk dat je zelf iets probeert. Vrijwel iedereen gebruikt tegenwoordig iets als Facebook of een kant-en-klaar systeem.
Mogelijk gaat het je duizelen bij dit antwoord, maar daarvoor komt aan het eind 'n suggestie.

In jouw code lopen twee dingen door elkaar: css en html. html is voor de inhoud (tekst, afbeeldingen, links, enz.). Hoe dat er uit komt te zien, bepaal je met css. Zonder css zou een site nog steeds horen te werken, maar het ziet er dan heel 'saai' uit.
Naar jouw code vertaald is de html:

Code: Selecteer alles

<!DOCTYPE html>
<html>
<head>
<title>eindopdracht</title>
	VISWINKEL<img src="Dezepc/Documenten/foto/viskopen.jpg" alt="viswinkel" width ="175" height = "300">
</head>
De <b> met bijbehorende </b> is verdwenen, want dat is voor het uiterlijk.
Bij de <img> is 'style=' verdwenen.
Vroeger waren uiterlijk en inhoud niet gescheiden. css bestond nog niet. Toen gebruikte je 'n code als <b> voor vet. Dat werkt nog steeds, want bij elke verandering van html en css (en de meeste andere talen) blijven oude dingen gewoon werken. Anders zou driekwart van internet niet meer toegankelijk zijn.
Tegenwoordig zou je het als volgt doen:
<span class="belangrijk">VISWINKEL</span>
Dan staat er nog steeds gewoon VISWINKEL, maar niet meer vet. Om de css (voor het uiterlijk) te kunnen koppelen aan het woord 'VISWINKEL', zet je dat woord in een <span>. Omdat de css moet weten, om welke <span> het gaat (je kunt er honderden hebben), moet het beestje 'n naam hebben: 'belangrijk'.
In je css zet je dan: .belangrijk {font-weight: bold;}
De . voor belangrijk geeft aan, dat het om een class="belangrijk", een class met de naam 'belangrijk' gaat. font-weight: bold; wil zeggen: vette tekst.
Nu is VISWINKEL vet.
Het enorm grote voordeel boven de oude methode: als je in de css bij .belangrijk iets veranderd, vind die wijziging bij elke class="belangrijk" plaats. Je hoeft maar op één plaats iets te wijzigen.
Ik heb nog sites gemaakt, waar dat niet zo was. Als je dan waarschuwingen in rood weergaf met <font color="red">Waarschuwing</font>, en rood moest oranje worden, moest je dat overal aanpassen, op tig plaatsen. Nu gebruik je gewoon <span class="waarschuwing">Waarschuwing</span>, en in je css verander je op één plaats de kleur. (En de lettergrootte, een randje, de achtergrondkleur, ...)

Dat de grootte van de afbeelding niet werkt, komt ook door een vermenging van css en html
'style=' wordt gebruikt om het begin van css aan te kondigen, die binnen de html staat, niet in een apart bestand. Maar dan moet je de regels voor css gebruiken, en jij hebt binnen die style= de regels voor html gebruikt.
Met html zou het zijn:

Code: Selecteer alles

<img src="Dezepc/Documenten/foto/viskopen.jpg" alt="viswinkel" width ="175" height = "300">
Nu is de afbeelding 175 px breed en 300 px hoog.
Met css zou het zijn:

Code: Selecteer alles

<img src="Dezepc/Documenten/foto/viskopen.jpg" alt="viswinkel" style="width: 175px"; height: 300px;">
Dit geeft hetzelfde resultaat. Alleen moet je dit nooit doen, want het is volledig nutteloos. Als je de maat wilt aangeven, doe je dat gewoon op de eerste manier: in de html. Als je honderden afbeeldingen hebt in deze maat, en je besluit die afbeeldingen twee keer zo groot te maken, kun je dat in een apart bestand met css regelen (op één plaats, voor alle afbeeldingen). Breedte en hoogte opgegeven in css 'winnen' van breedte en hoogte opgegeven in html, dus dat spaart zeeën van tijd. En je wilt niet weten hoe eentonig het was, als je op tig honderd plaatsen dezelfde stupide wijziging moest aanbrengen...

Bijkomende voordelen: voor zoekmachines en hulpmiddelen als schermlezers is ook beter te begrijpen, wat er op 'n site staat.

(Terzijde: ik gok dat je met Windows werkt. Windows maakt geen verschil tussen hoofd- en kleine letters in namen voor afbeeldingen e.d. Maar alle andere besturingssystemen wel. En op internet draait het overgrote deel van de servers op Linux. Daar is "Dezepc/Documenten/fofo.viskopen.jpg" een compleet ander pad dan "dezepc/documenten/foto.viskopen.jpg', zonder hoofdletters. Ik zou me gelijk aanwennen alleen kleine letters te gebruiken. En om min of meer dezelfde reden ook geen spaties in de naam zoals 'mijn viswinkel', maar 'mijn-viswinkel' of 'mijn_viswinkel'.)

Goed, dacht je 'n simpele vraag te hebben, krijg je 'n halve schoolmiddag als antwoord.
Als je met sites begint, is het geen goed idee om met JavaScript te beginnen. Je hebt helemaal niets aan JavaScript, als je niet eerst html en css hebt geleerd. Dat hadden ze op die cursus moeten zeggen. Logisch dat je tussen ict'ers zat, want de anderen hadden vermoedelijk dus al veel meer geleerd.
Met alleen html en css kun je prima 'n fantastische site maken. Deze site ben ik begonnen toen css nog nauwelijks bestond, en veel voorbeelden werken met alleen html en css. Alleen voor extra dingen, voor toegankelijkheid (schermlezers voor blinden), en voor mobieltjes wordt soms gebruik gemaakt van wat JavaScript. Maar in principe werkt alles nog steeds zonder JavaScript. Niet dat ik tegenwoordig iets tegen JavaScript heb, maar toen deze site werd begonnen was dat 'n nog volstrekt onderontwikkelde vrijwel onbruikbare taal.

html en css zijn in de loop der jaren enorm uitgebreid. (Vandaar dat iets als <b> ook niet meer nodig is.) Vroeger leerde je eerst html, en daarna css. Tegenwoordig is het veel beter om die twee talen in samenhang te leren. Maar het is - volgens mij - vrijwel onmogelijk om dat zonder 'n cursus of zo te doen, of 'n lesboek. Dat hoeft beslist geen school of zo te zijn. Op internet zijn zat goede (gratis) cursussen te vinden. 'n Lesboek heeft als nadeel dat het meestal duur is en bovendien is het na 'n jaar al verouderd, omdat de ontwikkelingen zo snel gaan.
Op internet zoeken naar een cursus is ook lastig, omdat het overgrote deel is verouderd en/of ronduit slecht. Op https://www.css-voorbeelden.nl/links.ht ... -cursussen staat een lijst met niet al te oude en kwalitatief goede cursussen. Die Vlaamstalige cursus bijvoorbeeld is echt uitstekend. Die cursussen hebben allerlei verschillende vormen, dus je kunt kijken welke vorm je ligt. Ze geven wel allemaal de mogelijkheid html en css op een systematisch opgebouwde manier te leren.

Je kunt het natuurlijk ook op eigen houtje doen, maar dat lijkt me echt heel lastig. Want dan krijg je dingen als het vermengen van html en css, vrees is.

'n Andere mogelijkheid zou zijn een voorbeeld op deze site uit te zoeken. De uitleg bij die voorbeelden is ook 'n soort cursus. Dat wil zeggen: het is absoluut geen stap-voor-stap cursus, maar als je de code en de uitleg samen bekijkt, steek je er wel heel wat van op. Alleen is dat, denk ik, alleen maar aantrekkelijk als je echt iets in de richting van zo'n voorbeeld wilt maken, anders lijkt het me nogal saai.
Mocht je nog vragen of zo hebben, dan hoor ik het wel
Groet
Peter
Stientje1!
Berichten: 2
Lid geworden op: di 14 jun 2022, 08:19

Re: foto publiceren

Bericht door Stientje1! »

Beste Peter,

Superdankjewel voor je vriendelijke lange antwoord. En de tips. Ga ik zeker doen. Nogmaals dank. Groetjes stientje
Plaats reactie