För att lägga till en bild på en HTML-sida, använd taggen IMG... Bildformat som stöds är PNG, GIF och JPEG. De obligatoriska taggattributen inkluderar attributet src, som anger adressen till filen med bilden.

Ett enkelt sätt hur man bäddar in en bild på en HTML-webbplats:

Men i det här formuläret kommer bilden att visas med sina ursprungliga mått, utan justering, utan ytterligare information. Därför, för att lägga till en bild vackrare och korrektare, måste du använda ytterligare parametrar. Låt oss överväga dem mer i detalj.

IMG-taggattribut

För att visa en bild med en tagg IMG följande parametrar används:

• bredd höjd- indikerar bildens bredd/höjd (i procent eller pixlar);
• justera- justering av bilden (höger, vänster, mitten);
• gräns- bestämmer tjockleken på ramen runt bilden (i pixlar). Om attributet inte är explicit inställt, används standardvärdet (kant = 0);
• hspace / vspace- indikerar storleken på den horisontella / vertikala utfyllnaden från bilden till det omgivande innehållet.

Låt oss nu se hur man gör en bild i html-kod:

Måtten här är i pixlar.

Responsiva bildstorlekar med HTML

Om du skriver en "gummi" eller "responsiv" webbplatsdesign, bör du ange storleken i procent i html-koden för bilden. Försök att skapa en HTML-sida med koden nedan (efter att ha placerat en bild med namnet "img.jpg" bredvid html-filen) och ändra storlek på webbläsarfönstret. Du kommer att se att storleken på bilden kommer att ändras beroende på storleken på fönstret.

Paragraf 1

Punkt 2

Du kan lägga till en bild i Nubex webbplatsbyggare med hjälp av redigeringsverktygen. Du kan lära dig mer om detta i artikeln.

26.06.2015

Hej alla!
Vi fortsätter att flitigt lära oss grunderna i HTML.
I den här handledningen kommer jag att berätta hur man infogar en bild i HTML-dokumentera, hur man gör en bildbakgrund, storleken på bilden, textflödet runt bilden, hur man justerar bilden. Alla angivna möjligheter kommer att konsolideras med exempel och resultat.
Så bilder på webbsidor kan vara både bakgrund och normala. Vad är skillnaden mellan bakgrund och vanlig bild?

Bakgrundsbild placeras som bakgrund, ovanpå vilken du kan infoga andra bilder, text, tabell etc.

Normal bild kommer att trycka bort andra delar av sidan från sig själv (andra bilder, text, tabell, etc.). Med hjälp av ett exempel kommer du att se och förstå allt senare.
För webbsidor är de rekommenderade bildformaten JPEG (JPG), GIF och PNG.

○ Hur man gör en bildbakgrund iHtml

För att ställa in en bild som bakgrund, för en tagg du måste registrera "background"-attributet:

Låt oss nu se ett komplett exempel. Klistra in bildfilen "fon.jpg" bredvid HTML-filen.

och klistra in den här koden i HTML-filen:

Jpg ">

Resultatet blir så här:

Uppmärksamhet

Felaktigt namn:

Rätt namn:

○ Hur man infogar en bild iHtml

För att infoga en bild i ett HTML-dokument, använd taggen med parametern "src", som definierar sökvägen eller adressen till bilden.

Låt oss nu se ett komplett exempel. Infoga bildfilen "kartinka.jpg" bredvid HTML-filen och skriv denna kod i HTML-filen:

Hej, detta är min första sida på sidan.

Resultatet blir så här:

Uppmärksamhet: Namnet på bilden måste skrivas på latin, annars kommer bilden inte att visas.

Felaktigt namn:

Rätt namn:

Jag tror att du har förstått allt hittills. Låt oss nu försöka kombinera de två exemplen tillsammans. Låt oss göra en bakgrund på webbsidan, infoga en bild och text.

Jpg ">

○ Hur man infogar en bild om den finns i mappen "img" eller "bilder "?

Om bilden finns i mappen "img" eller "images", måste du ange sökvägen från HTML-filen till mappen "img" eller "images", och sedan bara skriva namnet på bilden med tillägget. Det kommer att se ut så här:

Om bilden finns på en annan sida eller blogg måste du ange webbplatsens adress och vid behov mappen där bilden finns. Jo, naturligtvis måste du ange namnet på bilden med dess förlängning.

Tidigare inlägg
Nästa inlägg

Lektion nummer 5
Lägg till ett foto i ett HTML-dokument

I den här handledningen kommer vi att titta på vägen lägga till ett foto på en HTML-sida.

Eftersom vår artikel, från förra lektionen, talade om en snöleopard, kommer bilden att vara det:

Du måste kopiera det här fotot till ditt skrivbord, du kan göra det så här:

1. högerklicka på fotot
2. sedan längs linjen: Spara bild som ...

Spara ditt foto på skrivbordet

På ditt skrivbord har du redan en index.html-fil, nu finns det ett foto av en snöleopard, en fil irbis.jpg

För att infoga ett foto på en HTML-sida finns det en tagg , denna tagg har en egenskap (attribut) src = "", vars värde är adressen till fotot:

Var:
- en tagg som indikerar att det kommer att finnas ett foto här,
src = "" - taggenskap som anger adressen till bilden,
fotoadress - egenskapsvärde src = "", fotoadress.

Eftersom filerna index.html och irbis.jpg finns i samma mapp, nämligen på skrivbordet, för att ange adressen till filen irbis.jpg behöver du bara skriva dess namn irbis.jpg

Genom att klistra in denna kod under rubriken

, kommer vårt HTML-dokument att se ut så här:

Snöleopard

Snöleoparden (irbis, ak leopard) är ett stort rovdjur av kattfamiljen. Den lever i bergskedjorna i Afghanistan, Burma, Bhutan, Indien, Kazakstan, Kirgizistan, Kina, Mongoliet, Nepal, Pakistan, Ryssland, Tadzjikistan och Uzbekistan. Irbisen kännetecknas av en tunn, lång, flexibel kropp, relativt korta ben, ett litet huvud och en mycket lång svans. Längden på snöleoparden med sin svans är 200-230 cm, vikt upp till 55 kg. Färgen på pälsen är ljus, rökgrå med ringformade eller fasta mörka fläckar.

Snöleoparden jagar främst bergsgetter och baggar, vildsvin, fasaner och till och med gophers finns också i dess diet. På grund av otillgängligheten för artens livsmiljö är snöleoparder fortfarande dåligt förstådda. Men enligt grova uppskattningar varierar deras antal i området omkring 10 tusen individer. Från och med 2013 är det generellt förbjudet att jaga snöleoparder.

Spara dina ändringar i Anteckningar genom att trycka på Ctrl + S på ditt tangentbord eller Arkiv> Spara.

Öppna din index.html-fil med en webbläsare, bör du se

Allt som är känt om den här personen är
att han inte satt i fängelse, men varför han inte satt i fängelse är okänt.
Mark Twain.

Det här är en lektion om hur man infogar en bild i HTML, hur man ordnar det, hur man får text att flyta runt en bild osv. När allt kommer omkring är det känt att bilder gör en webbplats mer attraktiv och skiljer sig från andra resurser, så möjligheten att använda taggen och dess attribut är mycket användbar på det moderna internet. Men det viktigaste här är en känsla för proportioner!

Ett överflöd av grafik kommer att göra HTML-sidan tyngre och följaktligen öka dess laddningstid. Dessutom kommer närvaron av ett stort antal bilder att distrahera besökare från huvudinnehållet på webbplatsen (såvida inte grafiken är det huvudsakliga innehållet på webbplatsen). Så var försiktig och använd bara där du behöver det. Och du kommer att bli glad!

I lektionen om har jag redan pratat om hur du kan använda bilder som bakgrund i ett html-dokument. Låt oss nu prata om hur grafik används i det "översta lagret" på en HTML-sida.

§ 1. Hur man infogar en bild

För att infoga bilder i HTML, använd taggen IMG med obligatorisk attribut SRC... Det här attributet berättar för webbläsaren sökvägen till bildfilen. De där. för att infoga en bild med namnet logo.jpg till en viss plats på sidan (förutsatt att både sidan och bilden finns i en mapp(katalog)) måste du infoga följande html-kod på denna plats:

src = "logo.jpg">

Om bilden och sidan finns i annorlunda kataloger (mappar), då måste du ange sökvägen till bilden relativt sidor. Till exempel, om html-sidan finns i webbplatskatalogen (mappen), underkatalogen för bilder (mappen) finns i samma katalog (mapp), som vår logo.jpg-bild finns i, och för att infoga den måste du skriva så här:

bilder / logo.jpg ">

Och du kan inte lida och indikera bildens fullständiga adress... Till exempel, så här:

http://www..png ">

I det senare fallet kommer webbläsaren att visa koden så här:

Notera. Om bilden finns på din dator, och du vill infoga den till en sida på Internet, då blir det inget av det. För att göra detta måste bilden först flyttas till någon plats. på internet(till exempel, ). Och ange hela adressen i sidkoden till denna plats med en bild.

Förutom det obligatoriska attributet SRC vid taggen IMG det finns några fler valfria attribut. Låt oss överväga dem mer i detalj.

§ 2. Ange bildens storlek

Låt oss börja med de attribut som låter dig ställa in bildstorlek(mer exakt, sätt ut en plats för dessa storlekar på sidorna). Här är de:

• bredd- bildens bredd i pixlar eller procent;


• höjd- bildens höjd i pixlar eller procent.

Om dessa attribut används kommer den först att tilldela utrymme för grafiken, förbereda dokumentlayouten, visa texten och först sedan ladda bilden. Samtidigt kommer den att placera bilden i en rektangel av den valda storleken, även om bildens faktiska bredd och höjd är större (krympa) eller mindre (sträcka ut). Om dessa attribut inte används kommer webbläsaren att ladda bilden omedelbart, och utmatningen av texten efter den och andra element kommer att försenas.

Bredden och höjden på bilderna kan anges både i pixlar (bildens storlek kommer att vara konstant oavsett skärmupplösning), och i procent (bildens storlek beror på användarens skärmupplösning). Till exempel:

bredd = "50" höjd = "20">

bredd = "10%" höjd = "5%">

§ 3. Alternativ text

Om användaren har inaktiverat visningen av bilder i webbläsarens inställningar kan du istället för bilden visa en alternativ text som skulle förklara vilken typ av grafik som ska finnas här. Detta uppnås genom att använda attributet ALT:

I det här fallet kommer webbläsaren att reservera utrymme på sidan för bilden, men istället för själva bilden kommer den att visa texten som du skriver i attributvärdet ALT:

Återigen kommer detta att hända om användaren har inaktiverat visningen av grafik. Om inte, kommer bilden att dölja alt-texten.

§ 4. Bildjustering

Med hjälp av ett attribut du redan känner till justera du kan styra justeringen av bilder i förhållande till andra delar av HTML-sidan. Attributet justera det finns flera värden, men vi är mest intresserade av två för tillfället:

• vänster- bilden är placerad till vänster på sidan, och texten flyter runt bilden till höger;


• höger- bilden är placerad i högerkanten av sidan, och text och andra element flyter runt bilden till vänster.

Till exempel HTML-kod

webbläsaren kommer att visas så här

Och denna HTML-kod:

kommer se ut så här:

För att stoppa text som flödar runt bilden kan du använda taggen BR(bekant för oss från det sista avsnittet om). Märka BR det finns ett attribut klar, som kan ha tre värden:

• vänster- sluta flöda text runt bilder riktade till vänster;


• höger- Avslutning av text som flödar över högerjusterade bilder;


• Allt- sluta flöda text runt bilder som är justerade både till vänster och till höger.

Arbeta med bilder i HTML (hur man infogar en bild, ändrar dess storlek, gör en bild till en länk).

Lägger in en bild

En oparad tagg används för att infoga en bild i ett HTML-dokument som placeras där bilden ska infogas i dokumentet. Den här taggen har en obligatorisk parameter src, vars värde anger sökvägen till den önskade bilden i katalogen på din webbplats.

Till exempel, för att placera en bild på en sida:

raden är placerad på rätt plats i dokumentet:

Detta gör att webbläsaren förstår det i rotkatalogen på webbplatsen www.minwebbplats.com det finns en underkatalog img 1.png

Här har vi specificerat hela sökvägen (eller absolut adress) till bilden. Och du kan specificera relativ adress Bilder:

Webbläsaren tolkar en sådan rad enligt följande: i katalogen där detta html-dokument finns finns det en underkatalog img, innehåller den en bild som heter 1.png, som ska placeras på sidan.

Och här är ett exempel på att specificera den relativa adressen till en bild om din webbplats har en mer komplex struktur och det föregående exemplet inte fungerar:

Webbläsaren tolkar en sådan rad enligt följande: en kombination av tecken ../ betyder att från katalogen där det givna html-dokumentet finns måste du gå upp en nivå; och sedan som i föregående exempel: i katalogen där vi hamnade finns en underkatalog img, innehåller den en bild som heter 1.png, som ska placeras på sidan.

Av säkerhetsskäl är det att föredra att ange bildens relativa adress, såvida du inte placerar en bild på din sida som finns på en annan sida.

Bildmått

Storleken på varje bild ställs in av två parametrar: bredd och höjd. Märka det finns motsvarande parametrar: bredd och höjd... Dessa parametrar tar värden i pixlar (px).

Du kan ställa in bildens verkliga mått:

Detta är valfritt, men användbart eftersom snabbar upp processen att ladda sidan av webbläsaren något (webbläsaren behöver inte beräkna dessa värden på egen hand). Om bildens dimensioner omedelbart ställs in i parametrarna för taggen , då kommer ett utrymme på sidan att tilldelas för denna bild, och sidans struktur kommer inte att ändras vid laddning - texten hoppar till exempel.

Eller så kan du förstora eller förminska bilden genom att tilldela parametrarna bredd och höjd andra värden. Dessutom, om du vill ändra båda parametrarna proportionellt, räcker det att ange det nya värdet för endast en av dem och helt enkelt utelämna den andra. Webbläsaren beräknar det automatiskt.

Till exempel, för att förstora vår bild med 1,5 gånger kan du skriva:

eller

Resultatet blir ett:

Fler parametrar bredd och höjd kan ta värden i procent. Men! Observera att detta är en procentandel av storleken på webbläsarfönstret. I det här fallet kan du också ange bara en parameter och utelämna den andra.

Till exempel, om vi vill att bilden ska uppta exakt hälften av vår sida i bredd, måste vi skriva följande:

Och vi får:

Rama runt bilden

Märka det finns ytterligare en valfri parameter gräns... Den kan användas för att ställa in tjockleken på ramen runt bilden. Som standard är tjockleken på bildramen noll, d.v.s. ingen ram.

Så här kan du till exempel lägga till en 3-pixel ram till vår bild:

Här är vad webbläsaren kommer att visa oss:

Färgen på ramarna matchar färgen på texten på panelen med parametern text märka (Se lektion 6. Sidegenskaper - Parametrar för huvudtagg), som standard är den svart.

Och om du inte vill se ramen, tvinga fram parametern gräns nullvärde:

Alternativ text

Alternativ text visas av webbläsaren i stället för bilden tills den laddas. Eller istället för en bild, om den av någon anledning inte visades.

När och om bilden laddades, alternativ text kommer att visas när du håller muspekaren över just den här bilden.

För att lägga till alternativ text, använd parametern alt märka som ett strängvärde tilldelas, som måste omges av citattecken.

Du kan skapa alternativ text med flera rader.

För att göra detta, infoga bara en radbrytning i html-dokumentet.

text ">

Bildjustering

För en bild, som för ett stycke, finns begreppet justering med avseende på text och andra bilder på sidan. Du kan också ställa in typen av inriktning med parametern justera märka .

Nedan finns en tabell över möjliga parametervärden justera:

alternativ texttop, topp, mitten, absmitta, baslinje, botten ställ in bildens vertikala justering. Och parametrarna vänster och höger låt webbläsaren veta vilken sida texten ska vara vira runt bild.

Vaddering runt bilden

För att förhindra att text flödar nära bilden när den lindas kan du ställa in utfyllnad runt bilden. Detta kan göras med hjälp av parametrar hspace(vänster och höger stoppning) och vspace(top och botten stoppning) tag .

Följande exempel visar ett fall där text flyter runt en bild, med bilden vänsterjusterad och utfyllnad runt 5 pixlar:

I Stockholms stad, på den vanligaste gatan, i det vanligaste huset bor den vanligaste svenska familjen vid namn Svanteson. Den här familjen består av den vanligaste pappan, den vanligaste mamman och tre vanligaste killar - Boss, Bethan and the Kid.

Här är resultatet i webbläsaren:

I Stockholms stad, på den vanligaste gatan, i det vanligaste huset bor den vanligaste svenska familjen vid namn Svanteson. Den här familjen består av den vanligaste pappan, den vanligaste mamman och tre vanligaste killar - Boss, Bethan and the Kid.

Dela upp en bild i delar

Det finns tillfällen då en stor bild måste placeras på en sida. Men sedan kommer det att ta lång tid att ladda sidan. Vad ska man göra?

En av de möjliga vägar ut ur situationen - skär bilden i delar och placera den på sidan med hjälp av en tabell. Och för att bilden ska se ut som en helhet är det nödvändigt att ta bort gränsen från tabellen och alla indrag inuti och mellan cellerna. De där. tilldela motsvarande taggparametrar

nollvärden: kant = "0", cellmellanrum = "0", cellpadding = "0".

I följande exempel har vi delat upp bilden i 4 delar. Så här kommer tabellen att se ut:

Och här är resultatet: