Kyk vandag na enige webblad en jy sal sien dat hulle sekere dinge in gemeen het. Een van daardie gedeelde eienskappe is beelde. Die regte beelde voeg soveel by tot die aanbieding van 'n webwerf. Sommige van die beelde, soos 'n maatskappy se logo, help om die webwerf te merk en die digitale entiteit aan te sluit by jou fisiese maatskappy.
Om 'n prent, ikoon of grafika by jou webblad te voeg, moet jy die kode in die HTML-kode van 'n bladsy gebruik. Jy plaas die IMG-tag in jou HTML presies waar jy die grafiese wil hê. Die webblaaier wat die kode van die bladsy lewer, sal hierdie merker vervang met die toepaslike grafiek sodra die bladsy besigtig word. Gaan terug na ons maatskappy logo voorbeeld, hier is hoe jy die prentjie by jou webwerf kan voeg:
Beeld eienskappe
As u na die HTML-kode hierbo kyk, sal u sien dat die element twee eienskappe bevat. Elkeen van hulle word benodig vir die beeld.
Die eerste kenmerk is die "src". Dit is letterlik die prentlêer wat u op die bladsy wil vertoon. In ons voorbeeld gebruik ons 'n lêer genaamd "logo.png". Dit is die grafiese weergawe wat die webblaaier sou vertoon wanneer dit die werf gelewer het.
U sal ook daarop let dat ons voor hierdie lêernaam nog addisionele inligting, "images /" bygevoeg het. Dit is die lêerpad. Die aanvanklike voorste skuinsstreep vertel die bediener om na die wortel van die gids te kyk. Dit sal dan soek na 'n gids genaamd "beelde" en uiteindelik die lêer genaamd "logo.png". Die gebruik van 'n gids genaamd 'beelde' om al die grafika van 'n werf te stoor, is 'n baie algemene praktyk, maar u lêerpad sal verander word na wat relevant is vir u webwerf.
Die tweede vereiste kenmerk is die "alt" teks. Dit is die "alternatiewe teks" wat getoon word as die prent om een of ander rede nie laai nie. Hierdie teks, wat in ons voorbeeld 'Maatskappy Logo' genoem word, sal vertoon word as die prent nie laai nie. Hoekom sal dit gebeur? 'N Verskeidenheid redes:
- Verkeerde lêerpad
- Verkeerde lêernaam of spelfout
- Oordrag fout
- Lêer is van die bediener verwyder
Dit is slegs 'n paar moontlikhede waarom ons gespesifiseerde prent dalk ontbreek. In hierdie gevalle sal ons alt teks in plaas daarvan vertoon.
Alt-teks word ook gebruik deur skermleserprogrammatuur om die beeld te "lees" na 'n besoeker wat gesiggestremd is. Aangesien hulle die prentjie nie kan sien soos ons dit doen nie, laat hierdie teks hulle weet wat die beeld self is. Dit is waarom alt teks benodig word en hoekom dit duidelik moet aandui wat die beeld is!
'N Algemene misverstand van alt-teks is dat dit bedoel is vir soekenjins. Dit is nie waar nie. Terwyl Google en ander soekenjins hierdie teks lees om te bepaal wat die prentjie is (onthou, hulle kan nie jou prentjie "sien nie" nie), moenie alt-teks skryf om slegs op soekenjins te appelleer nie. Skrywer duidelike alt-teks wat vir mense bedoel is. As jy ook sleutelwoorde by die soektog kan voeg, is dit goed, maar maak seker dat die alt-teks sy primêre doel dien deur te sê wat die beeld is vir enigiemand wat nie die grafiese lêer kan sien nie.
Ander eienskappe
Die IMG-tag het ook twee ander eienskappe wat jy dalk in gebruik sal sien wanneer jy 'n prentjie op jou webblad plaas - die breedte en die hoogte. Byvoorbeeld, as jy 'n WYSIWYG-redakteur soos Dreamweaver gebruik, voeg dit outomaties hierdie inligting vir jou toe. Hier is 'n voorbeeld:
Die WIDTH en HEIGHT eienskappe vertel die blaaier die grootte van die prent. Die blaaier weet dan presies hoeveel ruimte in die uitleg toegeken moet word, en dit kan na die volgende element op die bladsy beweeg terwyl die prent afgelaai word. Die probleem met die gebruik van hierdie inligting in u HTML is dat u nie altyd wil hê dat u prentjie op daardie presiese grootte moet vertoon nie. Byvoorbeeld, as jy 'n reageer webwerf het waarvan die grootte verander, gebaseer op 'n besoekers skerm en toestel grootte, wil jy ook hê dat jou beelde buigsaam moet wees. As jy in jou HTML staat wat die vaste grootte is, sal jy dit baie moeilik vind om te verontagsaam met responsiewe CSS-media navrae . Om hierdie rede, en om 'n skeiding van styl (CSS) en struktuur (HTML) te handhaaf, word aanbeveel dat u nie breedte- en hoogte-eienskappe by u HTML-kode voeg nie.
Een opmerking: As jy hierdie grootte instruksies verlaat en nie 'n grootte in CSS spesifiseer nie, sal die blaaier die beeld in sy verstek, inheemse grootte in elk geval vertoon.
Geredigeer deur Jeremy Girard