Commando om een ​​afbeelding in html te sluiten. Een grafisch bestand in een webpagina invoegen

<тег style="background:url("адрес картинки")">...

Zorg ervoor dat u het afbeeldingsadres tussen enkele aanhalingstekens plaatst, zoals weergegeven. En als je een achtergrondafbeelding voor de hele pagina wilt maken, gebruik dan de stijl in de tag .

<тег style="background:#цвет url("адрес картинки")">...

Houd er rekening mee dat het niet nodig is om een ​​puntkomma in het midden te plaatsen, aangezien beide waarden betrekking hebben op de achtergrond. Wanneer u op deze manier opneemt, toont de browser eerst de achtergrondafbeelding en niet de kleur. Stel je nu voor dat je achtergrondafbeelding een tekening in donkere kleuren is en dat je de tekstkleur op de pagina op wit hebt ingesteld. En alles ziet er geweldig uit... Totdat de gebruiker het weergeven van afbeeldingen in de browser uitschakelt. Dan wordt de achtergrond waarschijnlijk wit, net als uw tekstkleur.

Voorbeeld van het maken van achtergrondafbeeldingen in HTML

Sterrenbeelden in de luchthoge afstand
Velen zijn gedoemd tot nutteloze gedachten.
Denk nog eens na, red je gezond verstand -
De wijste zijn op een dood spoor beland.
Omar Khayyam.

Tafels

Meestal worden tabellen in HTML niet gebruikt voor het beoogde doel: het weergeven van tabelgegevens, maar om een ​​globaal paginaframework te creëren. Dat wil zeggen, er wordt een tabel gemaakt, uitgerekt over de volledige breedte van de pagina, en vervolgens wordt er één menu gemaakt in de linkerkolom, een ander in de rechterkolom, basisinformatie wordt gemiddeld geplaatst, enzovoort.

Er zijn drie soorten lay-out: tabellarisch, waarover ik u hierboven vertelde; lagen (blok), waarvoor een gemiddeld niveau van kennis van stijlen (CSS) vereist is, en gecombineerd. In veel opzichten heeft de blokindeling nog steeds de voorkeur. Als de lay-outontwerper de taak kan voltooien met zowel tabellen als blokken, wordt meestal voor het laatste gekozen.

Het enige dat over deze man bekend is, is
dat hij niet in de gevangenis zat, maar waarom hij niet in de gevangenis zat, is onbekend.
Mark Twain.

Dit is een les over hoe je een afbeelding in HTML invoegt, hoe je het ontwerpt, hoe je tekst rond een afbeelding laat lopen, enz. Het is immers bekend dat afbeeldingen een site aantrekkelijker en anders maken dan andere bronnen, dus de mogelijkheid om een ​​tag en de bijbehorende attributen te gebruiken is erg handig op het moderne internet. Maar het belangrijkste hier is een gevoel voor verhoudingen!

Een teveel aan afbeeldingen zal de HTML-pagina zwaarder maken en daardoor de laadtijd verlengen. Bovendien zal de aanwezigheid van een groot aantal afbeeldingen bezoekers afleiden van de hoofdinhoud van de site (tenzij afbeeldingen natuurlijk de hoofdinhoud van de site zijn). Houd het dus met mate en gebruik het alleen waar het nodig is. En je zult gelukkig zijn!

In de les over heb ik al gesproken over hoe je afbeeldingen kunt gebruiken als achtergrond van een HTML-document. Laten we het nu hebben over hoe afbeeldingen worden gebruikt in de “bovenste laag” van een HTML-pagina.

§ 1. Hoe een afbeelding invoegen

Gebruik de tag om afbeeldingen in HTML in te voegen IMG Met verplicht attribuut SRC. Dit attribuut vertelt de browser het pad naar het afbeeldingsbestand. Die. om een ​​afbeelding in te voegen met de naam logo.jpg naar een bepaalde plaats op de pagina (op voorwaarde dat zowel de pagina als de afbeelding zich bevinden in één map(directory)) moet u op deze plaats de volgende html-code invoegen:

src = "logo.jpg">

Als de afbeelding en de pagina zich in verschillend mappen (mappen), dan moet u het pad naar de afbeelding opgeven relatief pagina's. Als een html-pagina zich bijvoorbeeld in de map (map) site bevindt, bevindt zich in dezelfde map (map) een submap (map) afbeeldingen, waarin onze afbeelding logo.jpg zich bevindt. Om deze in te voegen, moet u schrijf zo:

afbeeldingen/logo.jpg">

Of je hoeft je geen zorgen te maken en erop te wijzen volledig adres van de foto. Bijvoorbeeld zoals dit:

http://www..png">

In het laatste geval zal de browser de code als volgt weergeven:

Opmerking. Als de foto zich bevindt op uw computer, maar u wilt het invoegen naar de internetpagina, dan komt er niets van terecht. Om dit te doen, moet u de afbeelding eerst ergens naartoe verplaatsen op internet(Bijvoorbeeld, ). En geef het volledige adres aan in de paginacode tot nu toe met een foto.

Naast het vereiste attribuut SRC bij het etiket IMG Er zijn nog een paar optionele attributen. Laten we ze eens nader bekijken.

§ 2. Specificatie van de grootte van de afbeelding

Laten we beginnen met de attributen die u kunt instellen afmetingen van de afbeelding(preciezer: zet ruimte voor deze afmetingen uit op de pagina's). Hier zijn ze:

• breedte- afbeeldingsbreedte in pixels of percentage;


• hoogte- de hoogte van de afbeelding in pixels of percentages.

Als deze attributen worden gebruikt, zal het eerst ruimte toewijzen aan de afbeeldingen, de documentlay-out voorbereiden, de tekst weergeven en pas daarna de afbeelding laden. Tegelijkertijd wordt de afbeelding in een rechthoek van de geselecteerde grootte geplaatst, zelfs als de werkelijke breedte en hoogte van de afbeelding groter (comprimeren) of kleiner (uitrekken) zijn. In het geval dat deze attributen niet worden gebruikt, zal de browser de afbeelding onmiddellijk laden en zal de uitvoer van de tekst en andere elementen die erop volgen worden vertraagd.

De breedte en hoogte van afbeeldingen kunnen zowel in pixels worden opgegeven (de grootte van de afbeelding zal constant zijn, ongeacht de schermresolutie) als in percentages (de grootte van de afbeelding zal afhangen van de resolutie van het scherm van de gebruiker). Bijvoorbeeld:

breedte = "50" hoogte = "20">

breedte = "10%" hoogte = "5%">

§ 3. Alternatieve tekst

Als de gebruiker de weergave van afbeeldingen in de browserinstellingen heeft uitgeschakeld, kan in plaats van de afbeelding alternatieve tekst worden weergegeven die uitlegt wat voor soort afbeeldingen er zouden moeten zijn. Dit wordt bereikt door het attribuut te gebruiken ALT:

In dit geval reserveert de browser ruimte op de pagina voor de afbeelding, maar in plaats van de afbeelding zelf wordt de tekst weergegeven die u in de attribuutwaarde schrijft ALT:

Ik herhaal: dit zal gebeuren als de gebruiker de weergave van afbeeldingen heeft uitgeschakeld. Als dit niet het geval is, verbergt de afbeelding de alternatieve tekst.

§ 4. Het beeld uitlijnen

Een attribuut gebruiken dat u al kent uitlijnen u kunt de uitlijning van afbeeldingen ten opzichte van andere elementen van de HTML-pagina bepalen. Bij attribuut uitlijnen Er zijn verschillende betekenissen, maar op dit moment zijn we het meest geïnteresseerd in twee:

• links- de afbeelding bevindt zich aan de linkerrand van de pagina en de tekst loopt rechts rond de afbeelding;


• rechts- de afbeelding bevindt zich aan de rechterrand van de pagina en tekst en andere elementen vloeien links rond de afbeelding.

Bijvoorbeeld HTML-code

de browser zal er zo uitzien

En deze HTML-code:

zal er als volgt uitzien:

Om te voorkomen dat tekst rond een afbeelding loopt, kunt u de tag gebruiken BR(bekend bij ons uit het vorige gedeelte over). Bij het label BR er is een attribuut duidelijk, die drie waarden kan aannemen:

• links- stop tekstomloop rond links uitgelijnde afbeeldingen;


• rechts- stop tekstomloop rond rechts uitgelijnde afbeeldingen;


• alle- stop tekstomloop rond afbeeldingen die zowel links als rechts zijn uitgelijnd.

Het is moeilijk om op internet een website te vinden die geen afbeeldingen bevat, en dat is niet verrassend, omdat deze het grootste deel van het ontwerp van de website vormen, waardoor de afbeelding er gedenkwaardig uitziet. Een goed website-ontwerp is de sleutel tot een succesvolle ontwikkeling ervan. Om afbeeldingen in html weer te geven is er slechts één tag .

1. Tag-syntaxis

Beschrijving van de afbeelding" src="URL" [attributen ]>

Houd er rekening mee dat deze tag enkelvoudig en is vereist niet afsluitende tag .

Het src-attribuut is vereist. Het wordt gebruikt om het adres van de weergegeven afbeelding op te geven. U kunt een absolute of relatieve URL opgeven. Als u het adres niet opgeeft of het met een fout schrijft, wordt de afbeelding niet weergegeven.

Attribuut alt="description" - не является обязательным, но лучше сразу себя приучить к тому, чтобы прописывать его каждому изображению, поскольку это нужно как для пользователей, так и для поисковых систем.!}

De overige attributen zijn optioneel, we zullen ze hieronder bekijken. Laten we eerst een eenvoudig voorbeeld geven van het uitvoeren van een afbeelding naar HTML.

2. Hoe een afbeelding in HTML in te voegen

Gebruik de tag om een ​​afbeelding in HTML in te voegen . We hebben de syntaxis iets hoger bekeken. Laten we praktische voorbeelden geven.

Voorbeeld 2.1. Een label gebruiken

... ...

Deze code

26.06.2015

Hallo allemaal!
We blijven de basisbeginselen van HTML ijverig bestuderen.
In deze les vertel ik je: hoe je een afbeelding in HTML invoegt-document, hoe je een afbeelding als achtergrond maakt, afbeeldingsgrootte, tekstomloop rond een afbeelding, hoe u een afbeelding uitlijnt. Ik zal alle genoemde mogelijkheden ondersteunen met voorbeelden en resultaten.
Afbeeldingen op webpagina's kunnen dus zowel op de achtergrond als normaal zijn. Wat is het verschil tussen een achtergrondafbeelding en een gewone afbeelding?

Achtergrondafbeelding geplaatst als achtergrond waarop u andere afbeeldingen, tekst, tabellen, enz. kunt invoegen.

Normaal beeld zal andere elementen van de pagina afstoten (andere afbeeldingen, tekst, tabellen, enz.). Aan de hand van het voorbeeld zul je dan alles zien en begrijpen.
Voor webpagina's wordt aanbevolen om de afbeeldingsformaten JPEG (JPG), GIF en PNG te gebruiken.

○ Hoe maak je een afbeelding als achtergrond inHTML

Om van een afbeelding de achtergrond voor een tag te maken u moet het attribuut “background” specificeren:

Laten we nu naar het volledige voorbeeld kijken. Voeg het afbeeldingsbestand “fon.jpg” in naast het HTML-bestand.

en plaats deze code in het HTML-bestand:

Jpg">

Het resultaat zal als volgt zijn:

Aandacht

Verkeerde naam:

Juiste naam:

○ Hoe u een afbeelding invoegtHTML

Gebruik de tag om een ​​afbeelding in een HTML-document in te voegen met de parameter “src”, die het pad of adres naar de afbeelding specificeert.