Kijk naar een webpagina en je ziet een combinatie van tekstinhoud en afbeeldingen. Beide elementen zijn essentiële ingrediënten voor het succes van een website. Tekstinhoud is wat bezoekers van de site zullen lezen en welke zoekmachines zullen gebruiken als onderdeel van hun ranking-algoritmen. Afbeeldingen zullen visueel interessant zijn voor de site en helpen de tekstinhoud te accentueren.
Het toevoegen van tekst en afbeeldingen aan websites is eenvoudig. Tekst wordt toegevoegd met standaard HTML-tags zoals alinea's, kopjes en lijsten, terwijl afbeeldingen op een pagina worden geplaatst met de element. Nadat u echter een afbeelding aan uw webpagina hebt toegevoegd, wilt u mogelijk de tekst naast de afbeelding laten stromen in plaats van eronder uitlijnen (de standaardmanier waarop een aan de HTML-code toegevoegde afbeelding wordt weergegeven in de browser). Technisch gezien zijn er twee manieren om deze look te bereiken, door CSS te gebruiken (aanbevolen) of door de visuele instructies rechtstreeks in de HTML te plaatsen (niet aanbevolen, omdat je de scheiding van stijl en structuur voor je website wilt behouden).
CSS gebruiken
De juiste manier om de lay-out van de tekst en afbeeldingen van een pagina te wijzigen en hoe hun visuele stijlen in de browser worden weergegeven, is met CSS. Bedenk, aangezien we het hebben over een visuele verandering op de pagina (waardoor de tekst rond een afbeelding stroomt), betekent dit dat het het domein van Cascading Style Sheets is.
-
Voeg eerst uw afbeelding toe aan uw webpagina. Vergeet niet om visuele kenmerken (zoals breedte- en hoogtewaarden) uit die HTML uit te sluiten. Dit is belangrijk, vooral voor een responsieve website waarbij de afbeeldingsgrootte kan variëren op basis van de browser. Bepaalde software, zoals Adobe Dreamweaver, voegt informatie over breedte en hoogte toe aan afbeeldingen die met dat hulpmiddel zijn ingevoegd, dus zorg ervoor dat u deze informatie uit de HTML-code verwijdert! Zorg ervoor dat u echter de juiste alternatieve tekst invoert. Hier is een voorbeeld van hoe uw HTML-code eruit kan zien:
-
Voor stijldoeleinden kunt u ook een klasse aan een afbeelding toevoegen. Deze klassenwaarde is wat we zullen gebruiken in ons CSS-bestand. Merk op dat de waarde die we hier gebruiken arbitrair is, hoewel we voor deze specifieke stijl de neiging hebben om de waarden "links" of "rechts" te gebruiken, afhankelijk van de manier waarop we willen dat onze afbeelding wordt uitgelijnd. We vinden die eenvoudige syntaxis om goed te werken en gemakkelijk te zijn voor anderen die misschien een site in de toekomst moeten beheren om het te begrijpen, maar je zou dit elke leswaarde kunnen geven die je wilt.
Op zich zal deze klassewaarde niets doen. De afbeelding wordt niet automatisch links van de tekst uitgelijnd. Hiervoor moeten we ons nu wenden tot ons CSS-bestand.
-
In je stylesheet kun je nu de volgende stijl toevoegen:
.links {
zweven: links;
opvulling: 0 20px 20px 0;
}
Wat je hier hebt gedaan, is de CSS "float" -eigenschap gebruiken, die het beeld uit de normale documentenstroom trekt (de manier waarop dat beeld normaal zou worden weergegeven, met de tekst eronder) en het uitlijnt naar de linkerkant van de container . De tekst die erachter komt in de HTML-markup met zich er nu omheen. We hebben ook een aantal opvullingswaarden toegevoegd, zodat deze tekst niet rechtstreeks tegen de afbeelding aankijkt. In plaats daarvan heeft het een paar mooie tussenruimten die visueel aantrekkelijk zijn in het ontwerp van de pagina. In de CSS-afkorting voor opvulling hebben we 0-waarden toegevoegd aan de boven- en linkerkant van de afbeelding en 20 pixels aan de linker- en onderkant. Let op: u moet wat opvulling toevoegen aan de rechterkant van een links uitgelijnde afbeelding. Een rechts uitgelijnde afbeelding (waar we in een moment naar zullen kijken) zou op de linkerkant zijn opgevuld.
-
Als u uw webpagina in een browser bekijkt, zou u nu moeten zien dat uw afbeelding aan de linkerkant van de pagina is uitgelijnd en de tekst eromheen loopt. Een andere manier om dit te zeggen is dat het beeld "naar links zweeft".
-
Als u deze afbeelding wilt wijzigen om hem aan de rechterkant uit te lijnen (zoals in het foto-voorbeeld dat bij dit artikel hoort), zou het eenvoudig zijn. Ten eerste moet je ervoor zorgen dat, naast de stijl die we zojuist aan onze CSS hebben toegevoegd voor de klassenwaarde 'links', we ook een hebben voor rechts uitlijning. Het zou er als volgt uitzien:
.recht {
zweven: rechts;
opvulling: 0 0 20px 20px;
}
Je kunt zien dat dit bijna identiek is aan de eerste CSS die we schreven. Het enige verschil is de waarde die we gebruiken voor de "float" -eigenschap en de opvullingswaarden die we gebruiken (een aantal toevoegen aan de linkerkant van onze afbeelding in plaats van aan de rechterkant).
-
Ten slotte zou u de waarde van de klasse van de afbeelding wijzigen van "links" naar "rechts" in uw HTML:
-
Kijk nu naar uw pagina in de browser en uw afbeelding moet rechts uitgelijnd zijn met tekst die er netjes omheen wikkelt. We hebben de neiging om beide stijlen toe te voegen, "links" en "rechts" voor al onze stylesheets, zodat we deze visuele stijlen kunnen gebruiken wanneer we webpagina's maken. Deze twee stijlen worden leuke, herbruikbare functies die we kunnen gebruiken wanneer we afbeeldingen moeten stijlen met tekstterugloop eromheen.
HTML gebruiken in plaats van CSS (en waarom zou u dit niet moeten doen)
Hoewel het mogelijk is om tekst om een afbeelding met HTML te laten draaien, bepalen webstandaarden dat CSS (en de hierboven beschreven stappen) de manier is om te gaan, zodat we een scheiding van structuur (HTML) en stijl (CSS) kunnen behouden. Dit is vooral belangrijk als u bedenkt dat, voor sommige apparaten en lay-outs, die tekst mag niet moet rond het beeld stromen. Voor kleinere schermen kan de lay-out van een responsieve website vereisen dat de tekst inderdaad onder de afbeelding wordt uitgelijnd en dat de afbeelding over de volle breedte van het scherm wordt uitgerekt. Dit is eenvoudig te doen met mediaquery's als uw stijlen los staan van uw HTML-markup.In de hedendaagse wereld met meerdere apparaten, waar afbeeldingen en tekst er anders uitzien voor verschillende bezoekers en op verschillende schermen, is deze scheiding essentieel voor het succes op lange termijn en het beheer van een webpagina.
