Sjoch op eltse webstee hjoeddedei online en jo sille besjen dat se gewoan dingen yn 'e mienskip diele. Ien fan dy dielde treinen is ôfbyldingen. De rjochtsôfbyldings sakje safolle oan in presintaasje fan in webside. Guon fan dizze bylden, lykas in logo fan 'e bedriuw, helpe merk de side en ferbine dy digitale entiteit oan jo fysike bedriuw.
Om inôfbylding, byldkaikje, of grafyske ta oan jo webside te foegjen, moatte jo de tag yn it HTML-koade brûke. Jo pleatse de IMG-tag yn jo HTML krekt wêr jo de grafyk wolle sjen litte. De webblêder dy't de koade's side werjaan sil dizze tag ferfange troch de passende grafyk as de side besjoen is. Gean werom nei ús bedriuw logo foarbyld, hjir is hoe't jo dit plaatsje oan jo side taheakje kinne:
Image Attributes
As jo de HTML-koade hjirboppe besjen, sille jo sjen dat it elemint twa attributen befettet. Elk fan har is nedich foar it byld.
It earste attribút is it "src". Dit is hiel letterlik de byldbestân dat jo op 'e side werjaan wolle. Yn ús foarbyld brûke wy in bestân mei de namme "logo.png". Dit is de grafyk dy't de webbrowser sjen litte wol as it de side werjûn hat.
Jo sille ek fine dat foardat dizze triemnamme in oantal oanfoljende ynformaasje tafoege, "/ images /". Dit is de triempaad. De earste foarkarren fertelt de server om yn 'e root fan' e map te sjen. It sil dan sykje nei in map dy't "images" neamd wurdt en úteinlik de triem neamd "logo.png". It brûken fan in map mei "ôfbyldings" om alle websites fan in side te bewarjen is in aardich gewoane praktyk, mar jo triempaad soe feroare wurde wat it relevant is foar jo side.
It twadde ferplichte attribút is de "alt" tekst. Dit is de "ôfwikende tekst" dat werjûn wurdt as it byld ûntbrekt inkele reden. Dizze tekst, dy't yn ús foarbyld lêst "Logo fan Firmen" soe werjûn wurde as de ôfbylding net lade. Wêrom soe dat barre? In ferskaat oan oarsaken:
- Unjildich triempaad
- Unjildige triemnamme of mislearre
- Ferbiningsflater
- Triem is wiske fan 'e tsjinner
Dit binne mar in pear mooglikheden foar wêrom't ús bepaalde ôfbylding ûntbrekt kin. Yn dizze gefallen soe ús alt tekst werstelle.
Alt tekst wurdt ek brûkt troch skerm lêzer software om 'e ôfbylding' lêze 'oan in besiker dy't de fyzje beynfloede is. Om't se de ôfbylding lykas wy dogge, kinne dizze tekst se net witte wat it byld sels is. Dêrom is alt tekst nedich en wêrom soe it dúdlik wêze moatte wat it byld is!
In mienskiplik misferstâning fan alt tekst is dat it bedoeld is foar sykmasjinearjen. Dit is net wier. Wylst Google en oare sykmasjines dizze tekst lêze om te bestimmen wat it byld is (tink derom, se kinne jo ek gjin image sjogge), druk alt alt net allinich om te sykjen op moters. Skriuwer dúdlik alt tekst dat betsjutte foar minsken. As jo tagelyk wat keywords tafoegje kinne yn 'e tag dy't tagonklik meitsje op sykmasines, dat fine, mar altyd soargje dat de alt tekst syn primêre doel betsjut troch te jaan wat it byld is foar elkenien dy't de grafyske bestân net sjen kin.
Oare attributen
It IMG-tag hat ek twa oare eigenskippen dy't jo brûke kinne as jo in grafyk op jo webside sette - de breedte en de hichte. As jo bygelyks in WYSIWYG-bewurker brûke as Dreamweaver, addt automatysk dizze ynformaasje foar jo. Hjir is in foarbyld:
De WIDTH en HEIGHT-attributen fertelle de browser de grutte fan it byld. De browser wiist dan krekt hoefolle romte yn 'e layout om te foarkommen, en it kin nei it folgjende elemint fan' e side ferpleatse, wylst it ôfbyldingsladen is. It probleem mei it brûken fan dizze ynformaasje yn jo HTML is dat jo jo altyd net wolle dat jo ôfbylding op dizze krekte grutte werjaan wol. As jo bygelyks in opfreegjende webside hawwe, wêrby't wizigings feroaret op grûn fan in besikers-skerm en apparaatgrutte, dan wolle jo ek jo foto's fleksibel wêze. As jo yn jo HTML besykje wat de fêste grutte is, sille jo it fûn hawwe dat it tige swier is om te passen mei responsive CSS media-fragen . Om dy reden en om in skieding fan styl (CSS) en struktuer (HTML) te hâlden, is it oan te rieden dat jo gjin breedte- en hichte-attributen oan jo HTML-koade taheakje.
Ien notysje: As jo dizze opmaat-ynstruksjes ôfbrekke en gjin grutte yn CSS opjaan, sille de blêder it byld bringe op syn standert, memmetaal.
Edited by Jeremy Girard