Infoga en bild i HTML. Infoga en grafisk fil på en webbsida
Lägger in en bild
En oparad tagg används för att infoga en bild i ett HTML-dokument
, som placeras på den plats i dokumentet där bilden ska infogas. 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:
Följande rad placeras på rätt plats i dokumentet:
Detta låter webbläsaren veta det rotkatalogen webbplats www.minwebbplats.com det finns en underkatalog img 1.png
Här har vi specificerat hela sökvägen (eller absolut adress) till bilden. Kan du specificera relativ adress Bilder:
Webbläsaren tolkar denna rad enligt följande: i katalogen där detta html-dokument, det finns en underkatalog img, innehåller den en bild med namnet 1.png, som ska placeras på sidan.
Här är ett exempel på hur du anger en relativ bildadress om din webbplats har en mer komplex struktur och det föregående exemplet inte är lämpligt:
Webbläsaren tolkar denna rad enligt följande: en kombination av tecken ../ betyder att du måste gå upp en nivå från katalogen där detta html-dokument finns; och sedan som i föregående exempel: i katalogen där vi befinner oss finns det en underkatalog img, innehåller den en bild med namnet 1.png, som ska placeras på sidan.
Av säkerhetsskäl är det att föredra att ange bildens relativa adress, förutom i de fall du placerar en bild på en annan sida på din sida.
Bildmått
Storleken på varje bild anges av två parametrar: bredd och höjd. Vid taggen
Det finns motsvarande parametrar: bredd Och höjd. Dessa parametrar tar värden i pixlar (px).
Du kan fråga verkliga dimensioner Bilder:
Detta är inte nödvändigt, men det är användbart eftersom... snabbar upp processen att ladda en sida av webbläsaren något (webbläsaren behöver inte beräkna dessa värden oberoende). Om bildmåtten omedelbart anges i taggparametrarna
, då kommer utrymme på sidan att tilldelas för den här bilden, och sidans struktur kommer inte längre att ändras vid laddning - texten hoppar till exempel.
Eller så kan du förstora eller förminska bilden genom att tilldela parametrar bredd Och höjd andra betydelser. Dessutom, om du vill ändra båda parametrarna proportionellt, räcker det att endast ange ett nytt värde för 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 vi skriva:
eller
Resultatet blir detsamma:
Fler alternativ bredd Och höjd kan ta värden i procent. Men! Observera att detta är procentandelar av webbläsarens fönsterstorlek. 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 kommer att få:
Rama runt bilden
Vid taggen
det finns en till valfri parameter gräns. Använd den för att ställa in tjockleken på ramen runt bilden. Som standard är bildramens tjocklek noll, dvs. ingen ram.
Så här kan du till exempel lägga till en 3 pixel tjock ram till vår bild:
Det här är vad webbläsaren kommer att visa oss:
Kantfärgen matchar textfärgen på sidan som anges med parametern text märka (Se lektion 6. Sidegenskaper - parametrar för bodytagg), standardfärgen är 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 visas.
När och om bilden laddas, alternativ text kommer att visas när du håller musen över just den här bilden.
Använd alternativet för att lägga till alternativ text alt märka
, som tilldelas ett strängvärde, 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.
Bildjustering
För en bild, som för ett stycke, finns begreppet anpassning till texten och andra bilder på sidan. Du kan också ställa in uppriktningstypen 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 stå på flyta runt bild.
Vaddering runt bilden
För att förhindra att texten lindas nära bilden kan du ställa in utfyllnad runt bilden. Du kan göra detta med hjälp av parametrarna hspace(vänster och höger stoppning) och vspace(mellanslag högst upp och längst ned) på taggen
.
I följande exempel Påvisat fall där text lindas runt en bild, med bilden riktad till vänster och med 5 pixlar av utfyllnad runt sig:
I Stockholms stad, på den vanligaste gatan, i det vanligaste huset, bor en vanlig svensk familj som heter Svanteson. Den här familjen består av en alldeles vanlig pappa, en alldeles vanlig mamma och tre väldigt vanliga barn – Bosse, Bethan och Baby.
Här är resultatet i webbläsaren:
I Stockholms stad, på den vanligaste gatan, i det vanligaste huset, bor en vanlig svensk familj som heter Svanteson. Den här familjen består av en alldeles vanlig pappa, en alldeles vanlig mamma och tre väldigt vanliga barn – Bosse, Bethan och Baby.Dela upp en bild i delar
Det finns tillfällen då det är nödvändigt att placera på en sida stor bild. Men sedan kommer det att ta lång tid att ladda sidan. Vad ska man göra?
En av de möjliga
Det bästa sättet är att skära bilden i bitar och placera den på sidan med hjälp av en tabell. För att få bilden att se ut som en helhet är det nödvändigt att ta bort bordets kant och all stoppning inuti och mellan cellerna. De där. tilldela motsvarande taggparametrarnollvärden: border="0", cellspaceing="0", cellpadding="0".
I följande exempel delar vi upp bilden i 4 delar. Så här kommer tabellen att se ut:
Och här är resultatet:
När du reser på Internet ser du naturligtvis på många webbplatser olika bilder, banners, fotografier, grafiska bilder. Idag ska vi lära oss hur man infogar bilder på en HTML-sida.
Att lägga till en bild sker i två steg: först, förbered grafisk fil rätt storlek och format, och sedan läggs det till på webbsidan via taggen:
. HTML-dokumentet i sig är endast avsett att visa den önskade bilden, medan utan att ändra det alls.
Det finns några saker att tänka på när du förbereder dina bilder.
1. Eftersom webbsidan laddas över nätverket är en viktig faktor storlek ("vikt") på grafikfilen, inbäddat i ett webbdokument. Ju mindre den är, desto snabbare kommer bilden att visas.
2. Ganska ofta behöver en bilds fysiska dimensioner (bredd och höjd) begränsas (minskas) av bredd och höjd. Ställ till exempel in bredden på högst 700-800 pixlar. Annars kommer inte hela bilden att få plats i webbläsarfönstret och rullningslister visas.
Grafiska format för webbplatser
De två huvudformaten som används mest för webbgrafik är: GIF Och JPEG. Sådana egenskaper som: multifunktionalitet, mångsidighet, liten volym källfiler med tillräcklig bra kvalitet, har tjänat dessa format väl, vilket effektivt definierar dem som standarden för webbbilder.
Det finns också ett format: PNG, som också stöds av webbläsare när du lägger till bilder och finns i två varianter: PNG-8 Och PNG-24. Dock popularitet PNG-format mycket sämre igenkänning till GIF- och JPEG-format.
Vanligtvis för bilder (bilder) de skapar separat mapp i rotkatalogen och alla bilder för webbplatsen lagras i den. Ibland finns det flera sådana mappar (om webbplatsstrukturen kräver det eller om det är lättare för dig att navigera). Denna mapp kallas oftast: img eller bilder (Bilder). I webbsideskoden skriver du hela sökvägen till grafikfilen (där bilden finns), samt namnet den här filen(bilder) som du vill infoga i html-dokumentet.
Vi skriver kod för att infoga en bild på en webbsida
För att infoga bilder i ett HTML-dokument, använd den konstruktion som anges i Lista 8.1. Denna kod insatt i Rätt plats webbsidor (där du vill se bilden).
På vår vi-sida tillägnad bilar förberedde jag och la in två bilder. Du kan se inbäddningskoden för den första bilden i Listing 8.1.
Lista 8.1.
Så här kommer den första infogade bilden på webbplatsens webbsida att se ut:
Och nu ska jag kommentera mer i detalj vad som står i Lista 8.1.
Själva bilden "infogas" med taggen: img src. Hela inlägget ser ut så här: img src="img/mers1.jpg", Var "img/mers1.jpg"– indikerar att vår bild finns i mappen: img, och namnet på grafikfilen (bild): mers1.jpg.
I princip räcker detta redan för att infoga en bild på en webbsida, de återstående parametrarna är valfria, men jag rekommenderar ändå att du alltid registrerar dem, annars kan bilden utsättas för geometriska förvrängningar.
Låt oss titta på de ytterligare alternativen:
border="0"– indikerar att det inte finns någon ram runt bilden, försök att ändra 0 till ett annat nummer, till exempel till 1 , - motsvarar tjockleken på ramen runt bilden i 1 pixel, 2 – motsvarar tjockleken på ramen runt bilden på två pixlar, etc.
Viktig! Om du planerar att göra en bild till en länk, se till att ange värdet: border="0".
width="400"– indikerar att bildens bredd är: 400 pixlar(sätta verklig figur bredden på dina bilder).
höjd = 209"- indikerar att bildens höjd är: 209 pixlar(sätta ett reellt tal för höjden på dina bilder).
Om du inte anger parametrar: bredd Och höjd, då kan bilden få geometriska förvrängningar.
hspace="20"– indikerar en indragning på 20 pixlar av text runt bilden.
align="vänster"– det här är en tagg som du redan känner till... Det stämmer, det betyder vänsterjustering, det kan också ha betydelsen: höger- högeruppriktning.
alt=" Framifrån av bilen" !}– här skrivs alternativ text, som visas när du för musen över bilden.
På exakt samma sätt kommer vi att "infoga" den andra bilden på webbsidan, med den enda skillnaden att den kommer att justeras till höger.
Kommentarer till denna artikel (lektion):
Berätta för mig exakt var jag ska skapa img-mappen?
Img-mappen är bara ett vanligt namn, du kan kalla det vad du vill, så länge du förstår det senare. Du kan skapa den var som helst, för enkelhets skull, skapa den i rotkatalogen och placera alla bilder där.
Saken är att bilden inte visas, bara inskriptionen. Vad kan vara fel? Tack.
Ta en närmare titt på notering 8.1 ovan. Ta allt till dig själv. Skapa en img-mapp i rotkatalogen (där alla HTML-filer på din webbplats finns). Placera alla dina bilder i den här mappen. I listan ändrar du mers1.jpg till namnet på din fil. Ändra även bredd- och höjdvärdena till verkliga storlekar din fil. Lycka till.
Tack så mycket, allt löste sig.
Hej. Jag har samma situation som föregående talare: Jag skriver koden som din, jag ändrar bara filnamnet: istället för mers.1/jpeg infogar jag länken Mercedes/jpeg. Bara ett fönster visas på sidan med inskriptionen längst upp "Framifrån av bilen", och det finns ingen bild. Enligt min mening kan webbläsaren inte hitta vägen till bilden eller så är den inte korrekt skriven.
b
Titta noga på din img/mercedes/jpeg-kod. Du förstår rätt, webbläsaren hittar inte sökvägen till grafikfilen. 2. Filnamnet är felaktigt, se hur jag har mers1.jpg
Jo, jag kopierade koden och klistrade in den, jag har en oval utan bild, i ovalen finns en länk överst!
Hej! Problemet är detsamma, jag skapade en mapp som heter img på samma plats som webbplatsdokumenten, bilder med namnet 1.jpg sparas i denna mapp, jag skriver allt som i ditt exempel.
Om du märkte så finns min bild i img-mappen
En mycket användbar artikel för nybörjare webmasters. Den enda varningen till "alt"-attributet. I förhållande till figuren ger artikeln följande tolkning: "alt="Frontvy av bilen" – здесь прописывается альтернативный текст который высвечивается при наведении мыши на картинку." Не совсем точно: для рисунка - это прорегатива атрибута title. alt - альтернативный текст, который отобразится, если у пользователя графика отключена или картинка не загрузилась; title - атрибут, позволяющий отображать всплывающее пояснение к картинке при наведении на неё курсора.!}
här är min kod
SÅ VARFÖR SÄTTS BILDEN PÅ SIDAN NÄR UPPGIFTEN FÖR DEN ÄR CENTRUM?
Och om jag tar en bild från någon annans sida, kommer det inte att vara ett brott mot upphovsrätten?
Förklara varför när du lägger ut HTML-dokument till servern i stället för bilderna tomma platser i RAM. Fast innan visningen var bilderna som de skulle.
Dmitry, mirakel händer inte, du gjorde ett misstag någonstans, kolla alla vägar till bilderna, d.v.s. hur bilderna skrivs i koden.
detta är min kod, allt visas på sidan utom bilder, jag är hel Jag har försökt varje dag, men ingenting. snälla berätta för mig vad jag ska göra
AndreyK, vänligen kontakta mig i mitt brev. Jag kan inte infoga en bild på något sätt, jag anger allt korrekt men ingenting, bara ramen och inskriptionen visas.
Elvira, jag har läst ditt brev, liksom alla andra kommentarer och brev. Men var ska jag svara... till min farfars by???
Jag vet inte varför alla är så upprörda!? Du behöver bara inte kopiera och sedan klistra in koderna, utan skriv dem själv så fungerar allt... här är texten till min bild
Jag kopierade din lista, klistrade in mina värden - det finns en bild. Sedan skriver jag in samma sak nedan (manuellt) det finns ingen bild - vilket mirakel?
AndreyK snälla berätta för mig var är felet?
Hur många gånger jag än försöker så fungerar det inte ((
Andrey, berätta varför jag inte kan se bilden. Min kod:
Det finns en inskription, men ingen bild. Min adress: [e-postskyddad] Tack.
Jag led också länge, men det gick! Faktum är att imj-mappen måste öppnas i ett HTML-dokument.
Jag ska definitivt prova det, tack
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
Jag led också länge, det visar sig att mappen med bilder borde finnas på samma plats som index.html, tack Elena
Andrey jag lägger in:
Andrey jag lägger in:
min kod...ingen bild heller. Img-mappen finns i samma mapp som index... snälla hjälp. [e-postskyddad] Tack!
Jag vet inte. Jag läste alla kommentarer. Jag provade allt. Jag kopierade och klistrade in min information. Ingenting fungerar. Mappen med bilder (img) finns på samma plats som index.html. Men det finns ingen bild. Istället finns det ett rött kors och en inskription jag arbetar i IE-webbläsaren. Här är vad jag skrev in:
Jag tittade på HTML-koden på sidan istället för fotot i lektionen:
Koden på sidan skiljer sig från den som står i listan. Varför? och, förresten, på sidan är koden "mers1.jpg" understruken. Kopiering med understrykning misslyckades. Jag försökte sätta in den så. Fortfarande ingen bild. Vad är problemet?
Vi frågar oss själva, vi svarar oss själva. Jag led länge och bilden var inte med. Det blev: 1, istället för src-taggen hade jag srk 2. Jag blev förvirrad när jag komponerade vägen till bilden. Jag bytte namn på mappen till IMG och allt fungerade. Jag tillbringade nästan två dagar på detta, men det var värt det.
Älskar, men nu kommer du att komma ihåg detta för resten av ditt liv:) Jag skämtar, naturligtvis, bli inte förolämpad. Men seriöst, om en person inte lämnar en returadress, då är det nästan omöjligt för mig att hjälpa honom.
Hej, berätta för mig hur man placerar en bild överst, den andra nedan till vänster och den tredje längst ner till höger))))
..........vad är felet att bilden saknas?
Allt i koden är korrekt, om inget är trasslat ska allt fungera. Men skriv namnet på filen (bild) med engelska bokstäver. Många servrar accepterar inte det latinska alfabetet.
Men här är det som är konstigt... medan jag kallade mappen olika namn, ville bilden inte dyka upp, även om sökvägen var korrekt skriven. Så fort jag ringde IMG dök hon genast upp. Vad är haken?
Marina, det finns inget trick eller provokation :). I noteringskoden 8.1. det anges att denna bild finns i mappen: img. Om du ändrar namnet på mappen för bilder på din värd och sedan ändrar det i listan, det är hela tricket.
Jag försöker lägga in en bild!!! Jag skriver ner allt med ett anteckningsblock, jag gör allt rätt, det kanske inte är värt att använda ett anteckningsblock??
Och jag öppnar allt i Mozilla Fire Fox senast))
Sökvägen till min bild är C:Documents and SettingsdenisDesktopkoffevinogradwwwImg och själva bilden heter gif, även namnet inkluderar 1.gif...Jag gör detta i anteckningar
cool sida Jag gjorde det och hela vägen kommer inte ut, mozillan ser inte utforskarfotot och markerar det med ett rött kors
Denis, byt namn på Img-mappen till img, dvs. Allt med stora bokstäver, och byt namn på sökvägen till den också. Många servrar visar inte versaler korrekt.
Jag har fortfarande samma fråga: varför inte bilder, utan bara inskriptionen. Jag skapade en separat mapp för webbplatsen: den innehåller en webbsida och en ritning. Infogat:
HJÄLP VAD ÄR MITT E-POSTFEL: [e-postskyddad]
Hur gör man en bild så att den kan förstoras eller förminskas?
Av någon anledning centreras inte bilden för mig heller. Vad är haken?.. Koden är så här:
Taggen är ansvarig för att infoga bilder i ett HTML-dokument.
och dess attribut, varav de viktigaste kan övervägas src, som anger bildens adress. Det krävs för om du inte anger var bilden ska hämtas kommer webbläsaren inte att kunna veta vad den ska lägga till på sidan.
Det enklaste fallet att infoga en bild kommer att se ut så här (bilden heter image.png och ligger i samma mapp som HTML-dokumentet):
Tidigare vid taggen
det fanns ytterligare ett obligatoriskt attribut - alt, men med tillkomsten av HTML 5 förpassades den till kategorin önskvärda. alt ställer in texten som användaren ska se istället för bilden om den plötsligt inte laddas. Vissa optimerare rekommenderar också att man lägger till detta attribut, eftersom man tror att det har en positiv effekt på marknadsföring i sökmotorer.
Om du inte anger några ytterligare attribut till bilden kommer den att visas i full storlek, men detta är inte alltid nödvändigt. Lyckligtvis kan önskad storlek på bilden ställas in med hjälp av attribut bredd(anger bredden) och höjd(bestämmer höjden). Dimensioner kan registreras antingen i pixlar eller i procent. I det andra fallet kommer webbläsaren att beräkna procentandelen från det överordnade elementet (till exempel stycket där bilden infogas).
Låt oss säga att vi måste lägga till en bild på sidan image.png med alternativtexten "Bara en bild", 420 pixlar breda och 280 pixlar långa. Koden i detta fall kommer att vara följande:
Navigationskarta
Vi pratade om hur man gör en bild till en länk i den tidigare artikeln. Men HTML låter dig ställa in inte bara en länk på en bild, utan flera samtidigt. Som ett resultat kommer användaren, som klickar på olika ställen i samma bild, att gå till olika internetadresser. Den här funktionen kan till exempel användas för att skapa iögonfallande menyer, interaktiva tester eller visuella grafiska modeller.
För att skapa en bildkarta (detta är namnet på den beskrivna funktionen), behöver du följande taggar och attribut:
- - en behållare i vilken bildkartan beskrivs.
- - tagga inuti , som beskriver ett område av bilden. Hur många aktiva områden planerar du att dela upp bilden i, så många element och ska leverera. Bunt - fungerar precis som buntar
-
- Och
-
- , skapa listor.
- form- taggattribut , som anger formen på länken. Det aktiva området kan ha formen av en rektangel, polygon eller cirkel.
- sladdar- ett attribut som definierar koordinaterna för ett område. Tillhör också taggen . För en rektangel anges koordinaterna för de övre vänstra och nedre högra hörnen, för en polygon - koordinaterna för hörnen när du definierar en cirkel, måste du ange koordinaterna för dess centrum och radie.
- använd kartan- taggattribut img, som länkar bilden till kartan. Tack vare det förstår webbläsaren vad som finns i behållaren kartan över denna speciella ritning beskrivs.
Exempel bildkarta
För att göra det tydligt hur man använder allt ovanstående kommer jag att ge ett grundläggande exempel. Det finns en ritning map.jpg. Det måste delas upp i två aktiva områden. Om du klickar på den övre delen (grön) öppnas Odnoklassnikis webbplats, medan den nedre delen (blå) leder till VKontakte. Länkar bör öppnas på en ny flik. För att skapa en karta, följ följande steg.
1. Infoga bilden på sidan och länka den till det framtida kortet (det kommer att kallas socialt), för vilket vi skriver följande kod:
2. Vi bestämmer framtida aktiva områden i bilden och deras motsvarande koordinater. Detta kan göras i Paint, Photoshop eller någon annan grafikredigerare. I vårt fall är allt elementärt: rektanglarna är lika i höjd (114 pixlar) och bredd (384 pixlar).
3. Låt oss börja skapa en karta: öppna taggen och skriv dess namn i attributet name, som måste matcha värdet på usemap-egenskapen för själva bilden:
4. Med hjälp av områdestaggar definierar vi aktiva områden:
5. Stäng kortet:
Resultatet av arbetet var en bild som klickar på olika delar leder till att olika sociala nätverk öppnas, och det här är HTML-koden:
Navigationskarta 
