We hopen dat dit artikel nuttig voor u zal zijn. Veel leesplezier!
Afbeeldingen laten ons meteen begrijpen hoe interessant een bepaalde site of artikel voor ons kan zijn, ze creëren een sfeer en kunnen een onderwerp op een nieuwe manier onthullen. Soms zegt één foto meer dan duizend woorden.
Maar je moet er niet aan deelnemen als je niet op Instagram of een online winkel zit. Het is raadzaam dat de afbeeldingen:
- waren informatief
- correspondeerde kleurenschema jouw site
- waren passend
Als je dat niet hebt geschikte foto, kunt u gebruik maken van de zogenaamde fotostock (fotobank) - een plek waar veel foto's, illustraties en vectorafbeeldingen. Er zijn veel van dergelijke bronnen, je hebt misschien zelfs gehoord van een van de grootste: Shutterstock, maar downloads daar worden betaald.
Voor degenen die niet graag te veel betalen, hebben we aan het einde van het artikel voorbereidingen getroffen bonus- een lijst met verschillende fotobanken waar je een enorme hoeveelheid prachtige materialen van hoge kwaliteit helemaal gratis kunt downloaden :)
Afbeeldingsformaten
In Wereld wijde web Er worden hoofdzakelijk 3 soorten afbeeldingen gebruikt:
GIF(Grafisch uitwisselingsformaat - formaat voor beelduitwisseling)
Dit is het eerste formaat dat op internet werd gebruikt. De voordelen van dit formaat zijn de beschikbaarheid animaties en klein formaat, de pagina laadt snel. Bovendien ondersteunt het de transparantie. Nadeel - alleen gebruikt 256 kleuren(dat is eigenlijk de reden waarom het formaat klein is), d.w.z. het kan niet worden gebruikt voor afbeeldingen in kleur.
jpeg, oftewel jpg(Gezamenlijke groep fotografische deskundigen - Gezamenlijke groep fotografische deskundigen - dit is de naam van de ontwikkelingsorganisatie)
geschikt voor het maken van full-colour afbeeldingen van hoge kwaliteit, foto's. De grootte van dergelijke foto's is groot, dus ze geven meestal zware belasting naar de server. Als u een jpeg moet comprimeren (voor een kleiner beeldgewicht), raden wij u aan het formaat van de uiteindelijke afbeelding te nemen veelvoud van acht , waardoor het kwaliteitsverlies minimaal zal zijn.
png(Draagbare netwerkvideokaart - Draagbaar netwerkafbeeldingen . Op dezelfde manier uitgesproken als ping, d.w.z. )
dit formaat is oorspronkelijk ontwikkeld voor internet, d.w.z. De afbeelding weegt doorgaans weinig en vertraagt de pagina niet bij het laden. Dit formaat is gemaakt om het verouderde gif te vervangen, maar in tegenstelling tot dit formaat ondersteunt het geen animatie. PNG-8, net als gif, gebruikt slechts 256 kleuren. Formaat png-24 ondersteunt 16 miljoen kleuren, hoewel het al behoorlijk zwaar is. PNG-32 bevat hetzelfde aantal kleuren als png-24, en bovendien kun je een afbeelding krijgen Met transparante achtergrond en u kunt de mate van transparantie aanpassen. Bij het verkleinen van de png-grootte is er geen verlies aan kleurkwaliteit.
Laten we het samenvatten
GIF- voor animatie
jpeg- voor foto's
png- voor iconen, knoppen, achtergronden, logo's, screenshots, tekeningen, teksten, foto's met een transparante achtergrond
Een afbeelding in een HTML-bestand invoegen
Gebruik om een afbeelding aan de pagina toe te voegen label
(van de Engelse afbeelding - afbeelding, afbeelding). Dit is een enkele tag en er is geen afsluitende tag nodig. Deze tag bevat attributen erin.
Attribuut src(van de Engelse bron - bron) geeft het pad naar het bestand aan (de plaats waar de afbeelding zich bevindt). Als de afbeelding op uw computer staat (de site is nog in ontwikkeling) of op uw server, gebruik dan relatieve link. Als de afbeelding van het netwerk komt, dan heb je dit nodig absolute referentie. Hoe u dit doet, leest u in het artikel ‘Links’.
Om een afbeelding aan uw webpagina te koppelen, moet u dus de volgende code schrijven:
alt-attribuut(van het Engelse alternatief - alternatief) geeft de tekst aan die de gebruiker te zien krijgt als de afbeelding niet wordt geladen. Het pad is onjuist, de afbeelding is verwijderd, slecht internet- er kunnen veel redenen zijn, en het is raadzaam dat iemand begrijpt wat er achter dit gehate icoon schuilgaat.
Zoekmachines letten er goed op dat dit kenmerk wordt ingevuld. En de html-validator (een hulpmiddel voor het controleren van code op juistheid) zal de afwezigheid van het alt-attribuut als een fout ervaren. Als alle attributen
In het onderstaande voorbeeld hebben we bewust een niet-bestaand pad voor de afbeelding opgegeven, zodat je kunt zien hoe het alt-attribuut werkt
Hoogte en breedte van afbeeldingen
U kunt ook de hoogte en breedte van de afbeelding instellen als de originele afbeelding b.v. meer dan je nodig hebt.
In HTML5 wordt aanbevolen om dit te doen met behulp van CSS of stijl attribuut
, zoals dit:
In dit voorbeeld hebben we 30% van de breedte genomen, niet van de originele afbeelding, maar van de grootte van het browservenster. Wanneer breedte = 100%, wordt de afbeelding over de volledige breedte van de browser geopend. Onthoud deze functie procent, als meeteenheden.
Trouwens, als we alleen de breedte hadden geschreven, zou het resultaat hetzelfde zijn geweest, probeer:
< img src = "https://site/tutorials/wp-content/uploads/2016/07/panda.jpg" alt = "panda in de boom" stijl = "breedte:30%;" > |
U kunt ook de breedte en hoogte instellen pixels. In het geval van onze panda, waarvan de oorspronkelijke afmetingen 1196 x 796 pixels zijn, zodat het dier niet lijdt onder compressie, moeten we de verhoudingen behouden, en hier kun je niet zonder een rekenmachine. Laten we zeggen dat we de grootte van de afbeelding drie keer willen verkleinen, dan moeten we de afmetingen instellen op 399 x 265 pixels.
Houd er rekening mee dat als we de afbeelding proportioneel vergroten, het voldoende is om bijvoorbeeld slechts één parameter op te geven. breedte. De slimme browser berekent zelf de volledige grootte van de afbeelding.
Probeer deze code uit te voeren en bekijk het resultaat:
< img src = "https://site/tutorials/wp-content/uploads/2016/07/panda.jpg" alt = "panda in de boom" stijl = "breedte:399px;" > |
Stel altijd de afmetingen van de afbeelding in. Normaal gesproken duurt het laden van afbeeldingen langer dan de rest van de html-code. Als de browser weet hoeveel ruimte hij moet reserveren voor afbeeldingen, kan hij doorgaan met het laden van de site zonder te wachten tot de afbeeldingen zijn geladen.
Een kleine mottenbal
Als u toevallig sleutelt aan de code van een site die in HTML-4 of zelfs eerder is gemaakt, zult u merken dat de afbeeldingsformaten worden ingesteld met behulp van speciale breedte attributen En hoogte. Dit is een verouderde methode, hoewel nog steeds geldig in HTML5. We raden echter aan om stijl te gebruiken, omdat De breedte- en hoogtekenmerken kunnen worden beïnvloed door interne of externe stijlen die in de browser of uw CSS-bestand aanwezig zijn. We zullen hier meer in detail op ingaan als we naar CSS kijken, maar kijk nu alleen naar een voorbeeld van hoe stijlen de hoogte- en breedte-attributen beïnvloeden.
Er zijn 3 tabbladen in dit venster: op de eerste zie je de html-code, op de 2e CSS-code en op de laatste - zoals altijd, het resultaat. Dit werkt alsof het eerste tabblad een index.html-bestand is, het tweede een style.css-bestand en het derde een browser. Dus nu zegt onze CSS dat alle elementen met de img-tag een breedte van 100% hebben. De standaardgrootten van de attributen width en height zijn in pixels, dus het is niet nodig om hier eenheden toe te voegen.
Het verschil in resultaten is duidelijk :)
Ook in oudere versies van html werden de volgende attributen gebruikt:
uitlijnen, die werd gebruikt om de afbeelding horizontaal of verticaal uit te lijnen.
hruimte- inspringing aan de linker- en rechterkant van de afbeelding ten opzichte van de omringende inhoud (bijvoorbeeld tekst of een aangrenzende afbeelding)
vruimte- inspringing boven en onder van de afbeelding naar de inhoud eromheen.
grens- stel de dikte van het kader rond de afbeelding in (standaard is dit nul)
Tegenwoordig wordt al deze manipulatie (en nog veel meer) gedaan met behulp van CSS, dus hebben we besloten je er hier niet mee lastig te vallen. Als je nog steeds geïnteresseerd bent in hoe je met deze attributen kunt werken, schrijf dan in de reacties, we zullen dit item toevoegen :)
Een afbeelding in de code plaatsen
Van waar we onze tag plaatsen hangt af van hoe het in de browser wordt weergegeven.
Voorbeeld nr. 1 - vóór de paragraaf:
Elementen zoals
EN
verwijzen naar blok elementen
. Ze beginnen altijd op een nieuwe regel en beslaan de gehele beschikbare breedte van het browservenster. Als je op de eerste plaats staat ![]()
, en daarna een blokelement, bijvoorbeeld een alinea, wordt deze naar de volgende regel verplaatst.
Voorbeeld nr. 2 - aan het begin van de paragraaf
Dit is een inline-element, het past in een blokelement en begint geen nieuwe regel. In het bovenstaande voorbeeld loopt de tekst rond de afbeelding omdat de code
binnen geregistreerd
Bijschriften voor illustraties
Gebruik om een foto op een pagina te markeren of te ondertekenen label
Label
Houd er rekening mee dat de browser standaard enkele stijlinstellingen voor de tag heeft
Dus jij en ik hebben geleerd
- voeg een afbeelding toe aan de pagina: met behulp van label
- heb de vereiste attributen voor deze tag geleerd: src om het pad aan te geven en alt om de foto te beschrijven
- Begrijp welk formaat beter is en wat u moet gebruiken: jpeg voor foto's, png voor logo's en screenshots, GIF voor animatie
- hoe u de afmetingen van de afbeelding het beste kunt instellen: gebruiken stijl attribuut met parameters breedte En hoogte
- We hebben uitgezocht hoe de afbeelding wordt weergegeven, afhankelijk van de plaats in de code: afzonderlijk als deze voor een blokelement staat en met een wrap als deze zich in een blokelement bevindt (bijvoorbeeld
)
En om iets te hebben om mee te werken, moeten we deze afbeeldingen ergens vandaan halen, zonder iemands auteursrechten te schenden.
Dus het is tijd voor een bonus :)
Lijst met gratis fotobanken
Voordat we beginnen, houd er rekening mee dat elke schermafbeelding hier een link naar de site is. Hoe je afbeeldingen als links kunt maken, lees het artikel "Links".
Op pixabay vindt u 680.000 gratis afbeeldingen over elk onderwerp, die worden verspreid onder de Creative Commons CCO (CC Zero)-licentie, d.w.z. ze kunnen worden gebruikt, gedistribueerd en aangepast voor elk doel, zelfs commercieel.
De fotobank bevat 390 duizend gratis foto's en afbeeldingen. Het is lastiger om hier een coole afbeelding te vinden, maar er zijn ook goede voorbeelden. De reclame voor betaalde fotobanken leidt behoorlijk af. We hebben deze bron op de tweede plaats gezet vanwege het aantal afbeeldingen, maar qua vriendelijkheid zal deze waarschijnlijk de laatste zijn in onze ranglijst.
Photostock heeft meer dan 250.000 gratis foto's, meestal van hoge kwaliteit. U kunt zelfs zonder registratie downloaden. Alleen beschikbaar in het Engels.
Veel stijlvolle foto's onder CC Zero-licentie. Je kunt downloaden zonder registratie. Deze fotobank begrijpt u ook alleen in het Engels.
De site is gemaakt door een Indiase webontwerper die begrijpt hoe moeilijk het kan zijn om foto's van hoge kwaliteit te vinden. Alle foto's zijn door hem persoonlijk gemaakt en je kunt er mee doen wat je wilt. Fotografeert graag voedsel, desktop, computers en allerlei soorten objecten. Zoeken - alleen in het Engels.
Afbeeldingen zijn misschien wel degenen die ons algemene idee van het World Wide Web vormen. Ben het ermee eens dat mensen grafische informatie over het algemeen veel beter onthouden dan tekstinformatie. Daarom zijn afbeeldingen een belangrijk onderdeel van elke website en elke webpagina. En daarom wil ik je vertellen hoe je een afbeelding in HTML invoegt.
Een afbeelding in HTML invoegen met behulp van een tag
Je weet vast wel dat alle commando's in HTML worden uitgevoerd met behulp van tags. Dus bedachten we onze eigen tag voor de afbeeldingen: . Het is enkelvoudig, dat wil zeggen dat het geen afsluitend deel heeft.
Het belangrijkste attribuut van de img-tag is src (source) – het pad naar de afbeelding. Daarin noteer je het adres waar de afbeelding zich bevindt. Het kan worden geschreven als absoluut ( website/images/images2/image.jpg) of als relatief ( afbeeldingen/afbeeldingen2/afbeelding.jpg).
Beide paden leiden naar hetzelfde image.jpg-bestand, dat zich in de map image2 bevindt. Dat staat op zijn beurt in de map afbeeldingen, en die bevindt zich in de hoofdmap. Als u alles relatief opschrijft, blijft alles operationeel als u de domeinnaam van uw site wijzigt. De WordPress-editor voegt bijvoorbeeld standaard absolute adressen in. Maar persoonlijk ga ik het domein niet veranderen en dat past bij mij.
Extra attributen en ontwerp via css
Laten we dus even van het onderwerp afwijken. Om een afbeelding weer te geven, volstaat het om het src-attribuut te specificeren, maar er zijn nog veel meer attributen voor het ontwerp ervan.
- breedte en hoogte – de breedte en hoogte van de afbeelding. Het kan worden ingesteld in de overeenkomstige attributen in de img-tag
- uitlijnen – uitlijning van de afbeelding ten opzichte van de tekst. Standaard is deze links uitgelijnd. Je kunt hem ook rechts en in het midden plaatsen (rechts, midden)
- alt – alternatieve tekst die wordt weergegeven als de gebruiker de weergave van afbeeldingen in de browser heeft uitgeschakeld. Het is handig om deze in te vullen
- titel is bijna hetzelfde. Een soort beschrijving van de afbeelding die wordt weergegeven als u er met de cursor overheen beweegt
- vspace en hspace – verticale en horizontale ruimte van de afbeelding ten opzichte van de rest van de inhoud. Aandacht! Attributen zijn al verouderd en het is beter om deze inspringingen via een stylesheet in te stellen
- klasse – een stijlklasse die aan de afbeelding is gekoppeld en er enkele stijlen op toepast
Plaats zo'n schattige foto. Ik wil heel graag zingen als ik ernaar kijk. Hier hebben we een voorbeeldklasse aan de afbeelding toegevoegd en nu hebben we met CSS toegang tot de afbeelding.
Preview( Opvulling: 20px; Marge: 10px; Rand: 5px effen oranje; Transformeren: skewX(10deg); box-shadow: 0 0 15px 10px paars )
Goed? Is dit duidelijk cooler dan het formatteren met alleen HTML?
Laat ik het samenvatten
Om een afbeelding weer te geven hoeft u dus alleen maar een img-tag te schrijven en daarin het src-attribuut op te nemen, dat het pad naar de afbeelding specificeert. Al het andere zijn extra functies: uitlijning, afmetingen, alternatieve tekst, rotaties, kaders, enz.
En tot slot zou dit idealiter allemaal via CSS moeten worden geschreven. Dat wil zeggen: stel de afmetingen niet in de attributen in, maar voeg een extra stijlklasse toe aan de afbeelding, die de afmetingen bepaalt. Hetzelfde geldt voor uitlijning, wat in CSS kan worden gedaan met behulp van de eigenschap text-align, maar ook voor zwevende blokken.
Ik denk dat je nu een idee hebt hoe je een afbeelding in HTML kunt invoegen en deze normaal kunt opmaken. Tot ziens in de volgende artikelen.
Werken met afbeeldingen in HTML (hoe u een afbeelding invoegt, de grootte ervan wijzigt, van de afbeelding een link maakt).Een afbeelding invoegen
Een ongepaarde tag wordt gebruikt om een afbeelding in een HTML-document in te voegen
, die wordt geplaatst op de locatie in het document waar de afbeelding moet worden ingevoegd. Deze tag heeft een vereiste parameter src, waarvan de waarde het pad naar de gewenste afbeelding in de directory van uw site specificeert.
Om bijvoorbeeld een afbeelding op een pagina te plaatsen:
De volgende regel wordt op de juiste plaats in het document geplaatst:
Hierdoor weet de browser dat de hoofdmap van de site is www.mijnsite.com er is een submap afb 1.png
Hier hebben we het volledige pad (of absoluut adres) naar de afbeelding. Kunt u dit specificeren? relatief adres afbeeldingen:
De browser interpreteert deze regel als volgt: in de map waar dit html-document zich bevindt, bevindt zich een submap afb, het bevat een afbeelding met de naam 1.png, die op de pagina moet worden geplaatst.
Hier is een voorbeeld van het opgeven van een relatief afbeeldingsadres als uw site een complexere structuur heeft en het vorige voorbeeld niet geschikt is:
De browser interpreteert deze regel als volgt: een combinatie van tekens ../ betekent dat u één niveau omhoog moet gaan vanaf de map waar dit html-document zich bevindt; en dan zoals in het vorige voorbeeld: in de map waarin we ons bevinden, bevindt zich een submap afb, het bevat een afbeelding met de naam 1.png, die op de pagina moet worden geplaatst.
Om veiligheidsredenen verdient het de voorkeur om het relatieve adres van de afbeelding aan te geven, behalve in gevallen waarin u een afbeelding op een andere site op uw pagina plaatst.
Afmetingen afbeelding
De grootte van elke afbeelding wordt gespecificeerd door twee parameters: breedte en hoogte. Bij het label
Er zijn overeenkomstige parameters: breedte En hoogte. Deze parameters hebben waarden in pixels (px).
U kunt de werkelijke afmetingen van de afbeelding instellen:
Dit is niet nodig, maar wel handig omdat... versnelt enigszins het proces van het laden van de pagina door de browser (de browser hoeft deze waarden niet onafhankelijk te berekenen). Als de afbeeldingsafmetingen onmiddellijk worden opgegeven in de tagparameters
, dan wordt er ruimte op de pagina toegewezen voor deze afbeelding en verandert de structuur van de pagina niet meer tijdens het laden - de tekst springt bijvoorbeeld.
Of u kunt de afbeelding vergroten of verkleinen door parameters toe te wijzen breedte En hoogte andere betekenissen. Als u bovendien beide parameters proportioneel wilt wijzigen, volstaat het om slechts voor één ervan een nieuwe waarde aan te geven en de tweede eenvoudigweg weg te laten. De browser berekent dit automatisch.
Om onze afbeelding bijvoorbeeld 1,5 keer te vergroten, kunnen we schrijven:
Het resultaat zal hetzelfde zijn:
Meer opties breedte En hoogte kan waarden in procenten aannemen. Maar! Houd er rekening mee dat dit percentages zijn van de grootte van het browservenster. In dit geval kunt u ook slechts één parameter opgeven en de tweede weglaten.
Als we bijvoorbeeld willen dat de afbeelding precies de helft van onze pagina in de breedte beslaat, moeten we het volgende schrijven:
En we zullen krijgen:
Kader rond de afbeelding
Bij het label
er is nog een optionele parameter grens. Gebruik het om de dikte van het kader rond de afbeelding in te stellen. Standaard is de dikte van het beeldframe nul, d.w.z. geen kader.
Zo kunt u bijvoorbeeld een kader van 3 pixels dik aan onze foto toevoegen:
Dit is wat de browser ons zal laten zien:
De randkleur komt overeen met de tekstkleur op de pagina die is opgegeven met de parameter tekst label (Zie les 6. Pagina-eigenschappen - body-tagparameters), de standaardkleur is zwart.
En als u het frame niet wilt zien, forceert u de parameter grens nulwaarde:
Alternatieve tekst
Alternatieve tekst wordt door de browser weergegeven in plaats van de afbeelding totdat deze wordt geladen. Of in plaats van een afbeelding, als deze om wat voor reden dan ook niet wordt weergegeven.
Wanneer en of de afbeelding is geladen, alternatieve tekst wordt getoond wanneer u met uw muis over deze afbeelding beweegt.
Gebruik de optie om alternatieve tekst toe te voegen alt label
, waaraan een tekenreekswaarde wordt toegewezen, die tussen aanhalingstekens moet worden geplaatst.
U kunt alternatieve tekst met meerdere regels maken.
Om dit te doen, voegt u gewoon een regeleinde in het HTML-document in.
Beelduitlijning
Voor een afbeelding geldt, net als voor een alinea, het concept van uitlijning met de tekst en andere afbeeldingen op de pagina. U kunt het uitlijningstype ook instellen met behulp van de parameter uitlijnen label
.
Hieronder vindt u een tabel met mogelijke parameterwaarden uitlijnen:
Opties teksttop, bovenkant, midden, onderbuik, basislijn, onderkant stel de verticale uitlijning van de afbeelding in. En de parameters links En rechts laat de browser weten aan welke kant de tekst moet staan rondstromen afbeelding.
Opvulling rond de afbeelding
Om te voorkomen dat de tekst dicht bij de afbeelding komt, kunt u opvulling rond de afbeelding instellen. U kunt dit doen met behulp van de parameters hruimte(linker en rechter opvulling) en vruimte(spaties boven en onder) van de tag
.
In het volgende voorbeeld ziet u tekstomloop rond een afbeelding, met de afbeelding links uitgelijnd en met 5 pixels opvulling eromheen:
In de stad Stockholm, in de meest gewone straat, in het meest gewone huis, woont een gewoon Zweeds gezin genaamd Svanteson. Dit gezin bestaat uit een heel gewone vader, een heel gewone moeder en drie heel gewone kinderen: Bosse, Bethan en Baby.
Hier is het resultaat in de browser:
In de stad Stockholm, in de meest gewone straat, in het meest gewone huis, woont een gewoon Zweeds gezin genaamd Svanteson. Dit gezin bestaat uit een heel gewone vader, een heel gewone moeder en drie heel gewone kinderen: Bosse, Bethan en Baby.Een afbeelding in delen splitsen
Er zijn momenten waarop u een grote afbeelding op een pagina moet plaatsen. Maar dan duurt het lang voordat de pagina is geladen. Wat te doen?
Een van de mogelijke
De beste uitweg is om de afbeelding in stukjes te knippen en deze met behulp van een tabel op de pagina te plaatsen. Om de afbeelding er als één geheel uit te laten zien, is het noodzakelijk om de rand van de tabel en alle opvulling binnen en tussen de cellen te verwijderen. Die. toewijzen aan de overeenkomstige tagparametersnul waarden: rand = "0", cellenafstand = "0", cellpadding = "0".
In het volgende voorbeeld splitsen we de afbeelding in 4 delen. Dit is hoe de tabel eruit zal zien:
En hier is het resultaat:
HTML-afbeeldingen toegevoegd aan webpagina's met behulp van een tag
. Het gebruik van afbeeldingen maakt webpagina's visueel aantrekkelijker. Afbeeldingen helpen de essentie en inhoud van een webdocument beter over te brengen.
HTML-tags gebruiken
Afbeeldingen invoegen in een HTML-document
1. Labelen
Element
vertegenwoordigt een afbeelding en de fallback-inhoud ervan, die wordt toegevoegd met behulp van het alt-attribuut. Sinds het element
kleine letters is, wordt het aanbevolen om deze in een blokelement te plaatsen, bijvoorbeeld
Of
.Label
heeft een vereist src-attribuut waarvan de waarde het absolute of relatieve pad naar de afbeelding is:
Voor label
De volgende attributen zijn beschikbaar:
Tabel 1. Tagattributen
![]()
Attribuut Beschrijving, geaccepteerde waarde alt Het alt-attribuut voegt alternatieve tekst toe aan een afbeelding. Wordt weergegeven waar de afbeelding verschijnt voordat deze wordt geladen of wanneer afbeeldingen zijn uitgeschakeld, en wordt ook weergegeven als tooltip wanneer u met de muis over de afbeelding beweegt.
Syntaxis: alt="afbeeldingsbeschrijving" . !}kruisoorsprong Met het crossorigin-attribuut kunt u afbeeldingen laden uit bronnen op een ander domein met behulp van CORS-verzoeken. Afbeeldingen die met behulp van CORS-verzoeken in canvas zijn geladen, kunnen opnieuw worden gebruikt. Toegestane waarden:
anoniem: het cross-originele verzoek wordt gedaan met behulp van een HTTP-header en er worden geen inloggegevens verzonden. Als de server geen inloggegevens verstrekt aan de server waarvan de inhoud wordt opgevraagd, raakt de afbeelding beschadigd en wordt het gebruik ervan beperkt.
use-credentials — Cross-origin-verzoek wordt uitgevoerd door inloggegevens door te geven.
Syntaxis: crossorigin="anoniem" .hoogte Het height-attribuut specificeert de hoogte van de afbeelding. Kan worden opgegeven in px of %.
Syntaxis: hoogte: 300px.iskaart Het ismap-attribuut geeft aan dat de afbeelding deel uitmaakt van een kaartafbeelding die zich op de server bevindt (een kaartafbeelding is een afbeelding met klikbare gebieden). Wanneer u op een kaartafbeelding klikt, worden de coördinaten als een URL-queryreeks naar de server verzonden. Het ismap attribuut is alleen toegestaan als het element is een afstammeling van het element met een geldig href-attribuut.
Syntaxis: ismap.lange afsch Uitgebreide afbeeldingsbeschrijvings-URL, complementair alt-attribuut.
Syntaxis: longdesc="http://www.example.com/description.txt" .src Het src-attribuut specificeert het pad naar de afbeelding.
Syntaxis: src="bloem.jpg" .maten Stelt de afbeeldingsgrootte in, afhankelijk van de weergaveopties. Werkt alleen als het kenmerk srcset is opgegeven. De attribuutwaarde bestaat uit een of meer tekenreeksen, gescheiden door komma's. srcset Creëert een lijst met afbeeldingsbronnen die worden geselecteerd op basis van de schermresolutie. Kan samen met of in plaats van het src-attribuut worden gebruikt. De attribuutwaarde bestaat uit een of meer tekenreeksen, gescheiden door komma's. 
gebruikskaart Het usemap attribuut specificeert de afbeelding als een image map. De waarde moet beginnen met het #-symbool. De waarde is gekoppeld aan de waarde van het name- of id-attribuut van de tag breedte Het breedte-attribuut specificeert de breedte van de afbeelding. Kan worden opgegeven in px of %.
Syntaxis: breedte: 100% .1.1. Afbeelding adres
Het afbeeldingsadres kan volledig worden opgegeven (absolute URL), bijvoorbeeld:
url(http://anysite.ru/images/anyphoto.png)Of via een relatief pad van document of hoofdmap website:
url(../images/anyphoto.png) - relatief pad vanuit het document,
url(/images/anyphoto.png) - relatief pad vanuit de hoofdmap.Dit wordt als volgt geïnterpreteerd:
../ - betekent één niveau omhoog gaan, naar de hoofdmap,
afbeeldingen/ - ga naar de map met afbeeldingen,
anyphoto.png - verwijst naar een afbeeldingsbestand.1.2. Afmetingen afbeelding
Zonder de afmetingen van de afbeelding in te stellen, wordt de tekening op ware grootte op de pagina weergegeven. U kunt de afmetingen van de afbeelding bewerken met behulp van de attributen breedte en hoogte. Als slechts één van de attributen is opgegeven, wordt de tweede automatisch berekend om de verhoudingen van de tekening te behouden.
1.3. Grafische bestandsformaten
JPEG-formaat (Gezamenlijke groep fotografische deskundigen). JPEG-afbeeldingen zijn ideaal voor foto's en kunnen miljoenen verschillende kleuren bevatten. Afbeeldingen worden beter gecomprimeerd dan GIF's, maar tekst en grote vlakken met effen kleuren kunnen vlekkerig worden.
GIF-formaat (Grafisch uitwisselingsformaat). Ideaal voor het comprimeren van afbeeldingen met gebieden met effen kleuren, zoals logo's. Met GIF's kunt u instellen dat een van de kleuren transparant is, zodat de achtergrond van een webpagina door een deel van de afbeelding heen zichtbaar is. GIF's kunnen ook eenvoudige animaties bevatten. GIF-afbeeldingen bevatten slechts 256 tinten, waardoor de afbeeldingen er vlekkerig en onrealistisch van kleur uitzien, zoals posters.
PNG-formaat (Draagbare netwerkvideokaart). Bevat de beste functies van GIF- en JPEG-formaten. Bevat 256 kleuren en maakt het mogelijk om een van de kleuren transparant te maken, terwijl afbeeldingen worden gecomprimeerd tot een kleiner formaat dan een GIF-bestand.
APNG-formaat (Geanimeerde draagbare netwerkafbeeldingen). Een afbeeldingsformaat gebaseerd op het PNG-formaat. Hiermee kunt u animaties opslaan en ondersteunt ook transparantie.
SVG-formaat (Schaalbare vectorafbeeldingen). Een SVG-tekening bestaat uit een reeks geometrische vormen beschreven in XML-formaat: lijn, ellips, veelhoek, enz. Zowel statische als geanimeerde afbeeldingen worden ondersteund. De reeks functies omvat verschillende transformaties, alfamaskers, filtereffecten en de mogelijkheid om sjablonen te gebruiken. SVG-afbeeldingen kunnen worden vergroot of verkleind zonder kwaliteitsverlies.
BMP-formaat (Bitmapafbeelding). Het is een ongecomprimeerde (originele) bitmapafbeelding waarvan de sjabloon een rechthoekig raster van pixels is. Een bitmapbestand bestaat uit een header, een palet en grafische gegevens. De header slaat informatie op over de grafische afbeelding en het bestand (pixeldiepte, hoogte, breedte en aantal kleuren). Het palet wordt alleen aangegeven in bitmapbestanden die paletafbeeldingen (8 of minder bits) bevatten en uit niet meer dan 256 elementen bestaan. Grafische gegevens vertegenwoordigen de afbeelding zelf. De kleurdiepte in dit formaat kan 1, 2, 4, 8, 16, 24, 32, 48 bits per pixel zijn.
ICO-formaat (Windows-pictogram). Opslagformaat voor bestandspictogrammen in Microsoft Windows. Ook wordt het Windows-pictogram gebruikt als pictogram op websites op internet. Het is een afbeelding van dit formaat die naast het siteadres of de bladwijzer in de browser wordt weergegeven. Eén ICO-bestand bevat één of meer iconen, waarvan de grootte en kleur afzonderlijk kunnen worden ingesteld. De pictogramgrootte kan elke grootte hebben, maar de meest voorkomende zijn vierkante pictogrammen met zijden van 16, 32 en 48 pixels.
2. Labelen
Label
Voor de tag is een naamattribuut beschikbaar, dat de naam van de kaart specificeert. De waarde van het naamkenmerk voor de tag
Element
3. Labelen
Label beschrijft slechts één actieve regio als onderdeel van een image map aan de clientzijde. Het element heeft geen afsluitende tag. Als een actief gebied een ander actief gebied overlapt, wordt de eerste link uit de lijst met gebieden geïmplementeerd.
Tabel 2. Tagattributen
Attribuut Korte beschrijving alt Stelt alternatieve tekst in voor het actieve kaartgebied. coördinaten Bepaalt de positie van het gebied op het scherm. Coördinaten worden gespecificeerd in lengte-eenheden en gescheiden door komma's:
Voor cirkel— coördinaten van het middelpunt en de straal van de cirkel;
Voor rechthoek— coördinaten van de linkerboven- en rechteronderhoek;
Voor veelhoek— coördinaten van de veelhoekhoekpunten in de vereiste volgorde. Het wordt ook aanbevolen om de laatste coördinaten aan te geven, gelijk aan de eerste, voor de logische voltooiing van de figuur;downloaden Vult het href-attribuut aan en vertelt de browser dat de bron moet worden geladen op het moment dat de gebruiker op de link klikt, in plaats van deze bijvoorbeeld eerst te moeten openen (zoals een PDF-bestand). Door een naam voor een attribuut op te geven, geven we dus een naam aan het geladen object. Het is toegestaan om een attribuut te gebruiken zonder de waarde ervan te specificeren. href Specificeert de URL voor de link. Er kan een absoluut of relatief linkadres worden opgegeven. hreflang Specificeert de taal van het bijbehorende webdocument. Wordt alleen gebruikt in combinatie met het href-attribuut. Geaccepteerde waarden zijn een afkorting bestaande uit een paar letters die de taalcode aangeven. media Bepaalt voor welke typen apparaten het bestand wordt geoptimaliseerd. De waarde kan elke mediaquery zijn. rel Breidt het href-attribuut uit met informatie over de relatie tussen het huidige en gerelateerde document. Geaccepteerde waarden:
alternatief - link naar een alternatieve versie van het document (bijvoorbeeld een gedrukte vorm van de pagina, een vertaling of een spiegel).
auteur — link naar de auteur van het document.
bladwijzer - Permanente URL die wordt gebruikt voor bladwijzers.
help - link naar hulp.
licentie - link naar copyrightinformatie voor dit webdocument.
volgende/vorige - geeft de relatie aan tussen individuele URL's. Dankzij deze markup kan Google vaststellen dat de inhoud van deze pagina's in een logische volgorde met elkaar in verband staat.
nofollow - voorkomt dat de zoekmachine links op een bepaalde pagina of een specifieke link volgt.
noreferrer - geeft aan dat de browser bij het volgen van een link geen HTTP-verzoekheader (Referrer) mag verzenden, die informatie registreert over van welke pagina de bezoeker van de site kwam.
prefetch - geeft aan dat het doeldocument in de cache moet worden opgeslagen, d.w.z. De browser op de achtergrond downloadt de inhoud van de pagina naar de cache.
zoeken - Geeft aan dat het doeldocument een zoekfunctie bevat.
tag - specificeert het trefwoord voor het huidige document.vorm Specificeert de vorm van het actieve gebied op de kaart en de coördinaten ervan. Kan de volgende waarden aannemen:
rect — rechthoekig actief gebied;
cirkel — actief gebied in de vorm van een cirkel;
poly — actief gebied in de vorm van een veelhoek;
standaard — het actieve gebied beslaat het gehele gebied van de afbeelding.doel Geeft aan waar het document wordt gedownload wanneer op de koppeling wordt geklikt. Accepteert de volgende waarden:
_self — de pagina wordt in het huidige venster geladen;
_blank — de pagina wordt geopend in een nieuw browservenster;
_parent — de pagina wordt in het bovenliggende frame geladen;
_top - de pagina wordt in het volledige browservenster geladen.type Specificeert het MIME-type van de linkbestanden, d.w.z. bestandsextensie. 4. Voorbeeld van het maken van een imagemap
1) Markeer de originele afbeelding in actieve gebieden met de gewenste vorm. De coördinaten van de gebieden kunnen worden berekend met behulp van bijvoorbeeld een fotoverwerkingsprogramma: Adobe Photoshop of Verf.
Rijst. 1. Voorbeeld van afbeeldingsopmaak om een kaart te maken
2) Stel de naam van de kaart in door deze aan de tag toe te voegen
Jpg" alt="bloemen_foto" width="680" height="383" usemap="#flowers"> !}
Rijst. 2. Een voorbeeld van het maken van een image map: wanneer u met de muiscursor op een bloem klikt, gaat u naar een pagina met een beschrijving
Hallo, Beste lezers van de sitesite. Laten we vandaag verder gaan met meer interessant onderwerp, namelijk invoegen afbeeldingen. Om ervoor te zorgen dat onze browser snel een pagina met een afbeelding kan laden en openen, hebben we een GEOPTIMALISEERDE afbeelding nodig (over waarom en hoe afbeeldingen te optimaliseren). Om zo'n vooraf geoptimaliseerde afbeelding te downloaden, gaat u naar en slaat u deze afbeelding op door met de rechtermuisknop te klikken en 'Afbeelding opslaan als' te selecteren.
Label
en locatie van de map met afbeeldingen
Om afbeeldingen op te slaan, maken we een andere map “Afbeeldingen” aan in onze HTML-map en plaatsen we de afbeelding daar.
Laten we proberen onze afbeelding in te voegen met de afbeelding tussen de titel en de eerste alinea. Om dit te doen, zullen we onze tag in de code schrijven
. Dit is een afkorting voor het Engelse woord image - image en het is een enkele tag.
Het label zelf
vertelt de browser eigenlijk niets. Daarom moeten we zeker de attributen voor de tag specificeren. Het belangrijkste kenmerk is het attribuut src – bron. We moeten de bron van ons beeld aangeven. In ons geval bevindt de afbeelding zich in de map afbeeldingen ten opzichte van de HTML-map. Die. we moeten aangeven dat onze afbeelding alarm.jpg zich in de map afbeeldingen bevindt. En dit is hoe het eruit ziet.
Met dit attribuut gespecificeerd voor de tag
, zal de browser, wanneer hij deze code tegenkomt, naar de map afbeeldingen gaan en het bestand nemen: de afbeelding alarm.jpg.
Maar dat is niet alles. Het is ook raadzaam om de breedte en hoogte van deze afbeelding op te geven, omdat de browser precies moet weten hoeveel ruimte hij voor deze afbeelding moet toewijzen, en het volledige laden sneller zal gebeuren en, belangrijker nog, zonder blokverschuivingen.
De breedte- en hoogtekenmerken
Als we de afmetingen niet opgeven, geeft de browser de afbeelding ook correct weer, maar dat duurt even meer tijd omdat hij eerst de afbeelding moet uploaden en pas dan kan hij bepalen hoeveel ruimte hij moet toewijzen. Als u in eerste instantie de afmetingen voor de afbeelding opgeeft, wordt de taak voor de browser eenvoudiger. Door de afbeeldingsgrootte in code te wijzigen, zal de browser bovendien de grootte ervan aanpassen aan de opgegeven afmetingen.
Om de grootte van de afbeelding te zien, klikt u erop klik met de rechtermuisknop muis en selecteer het menu-item “Eigenschappen”. Ga vervolgens naar het tabblad ‘Details’.
Zoals u kunt zien, is de breedte van de afbeelding 307 pixels en de hoogte 450 pixels. Laten we de afmetingen in code schrijven:
Alt-attribuut voor alternatief bijschrift
Nog een tag-attribuut
, wat raadzaam is aan te geven bij het toevoegen van een afbeelding, is alt. Het is bedoeld voor internetgebruikers die de weergave van afbeeldingen in hun browser hebben uitgeschakeld. Die. als afbeeldingen zijn uitgeschakeld in de browser, ziet de gebruiker in plaats van onze afbeelding het woord of de zin die we voor het alt-attribuut schrijven. Daarnaast, zoekmachines Bij het bepalen van de waarde van uw site richten ze zich op het alt-attribuut van afbeeldingen, dus de opname ervan is verplicht.
Deze vier attributen voor een tag
Het is raadzaam om dit aan te geven bij het toevoegen van afbeeldingen aan de pagina. Ik zal deze vier attributen nogmaals benadrukken: bron, breedte, hoogte en alternatieve tekst.
Laten we het display controleren:
Onze tekening verscheen precies waar hij moest verschijnen. Maar als het je opvalt, wijst de browser, hoewel de afbeelding slechts 307 pixels breed is, de hele regel eraan toe. Heel vaak ontstaat de taak om de tekst na het beeld eromheen te laten vloeien, d.w.z. stond met haar op één lijn. Deze mogelijkheid bestaat. Het wordt geïmplementeerd met behulp van een bekende attribuut uitlijnen- uitlijning.
Het align-attribuut om een afbeelding uit te lijnen
Dit kenmerk is van toepassing op onze tag
. Voor deze afbeelding kunnen we de juiste uitlijning opgeven ( rechts), dan gaat de afbeelding naar rechterkant scherm en de tekst loopt links rond. Of we kunnen de linkeruitlijning specificeren ( links) – dan gaat de afbeelding naar linkerkant scherm en de tekst loopt er naar rechts omheen. Laten we de linkeruitlijning voor onze tag instellen
.
Laten we nu eens kijken wat er in de browser is gebeurd.
Je kunt zien dat de tekst rond de afbeelding loopt rechterkant, omdat we de afbeelding links hebben uitgelijnd. Laten we nu de uitlijning naar de rechterrand wijzigen.
Wij raden aan
Wat is Windows-bitdiepte?
Er zijn verschillende eenvoudige manieren om de editie, versie, build en bitness van Windows 10 te achterhalen. Met release bedoelen we varianten van Windows 10, en dit...
