Bilder på webbsidor. Grafik på webbsidan i HTML

För att infoga bilden i texten på webbsidan, använd enstaka tagg (Tabell. P 1). Attribut för den här taggen Ange alla parametrar för bilden som publiceras på sidan. Obligatoriskt är SRC-attributet som bestämmer adressen och namnet på den grafiska filen. Om SRC-attributet inte är installerat visas bara en tom bildikon.

Märkesstruktur SRC-attributet är:

.

Om den grafiska filen som heter Institute är i samma mapp som webbsidan, ska den skrivas till dess placering:

.

Filnamnformat

För att tillgodose en grafisk fil med namnet Minsk, på adressen D: \\ Collection \\ City \\ Minsk.gif, borde du spela in .

Använda tagg Webbsidan är värd för en grafisk fil på en annan dator på den globala Internet "Internet".

För att skapa en webbsida med ett foto av vårt institut, som visas i fig. 4.1, du måste ange följande HTML-kod:

Vårt institut

Fikon. 4.1. Webbsida med fotoinstitut

I det ovanstående exemplet är höjden på fotot (höjd) 200 pixlar, och bredd (bredd) är 300 pixlar. För att tillgodose fotot är en paragraf skapad med anpassning i mitten.

Horisontella linjer

Boende på den horisontella linjens webbsida utförs med en enda tagg

---

. Använda attributen storlek, bredd, färg och justering, tjockleken, bredden, färg och metod för anpassning av linjer ändras i enlighet med detta.

Tänk på några exempel som förklarar placeringen av gori-paraplyerna:

1.

---

- Horisontell linje för hela sidan med en tjocklek av 2 pixlar.

2.

---

Bredd \u003d "200" Justera \u003d "Höger"\u003e - En horisontell linje med grön färg 15 pixlar, en bredd på 200 pixlar och lämnar på höger kant.

3.

---

- Horisontell blå linje på hela sidan med en tjocklek på 25 pixlar.

4.

---

Bredd \u003d "300" Rikta \u003d "Vänster"\u003e - En horisontell linje med röd färg 20 pixlar tjock, 300 pixelbredd och inriktning längs den vänstra kanten.

Visar linjer för fyra inspelade exempel visas i fig. 4,2.

Fikon. 4,2. Linjer på webbsidan

Tabeller

Skapa tabeller

Skapa ett bord utförs med hjälp av en par tagg

… . Denna tagg skapar ett bord på den plats där den läggs till
I HTML-koden.

Varje bord består av linjer, och linjer är från celler. För de form-paring-rader och cellceller används följande taggar:

... - ny linje;

... - Cellhuvud;

... - Normal tabellcell.

Dessa taggar spelas in i paretiketten

… .

Bordets bildning sker på raderna - en rad är specificerad och det önskade antalet celler anges i den, sedan den andra linjen etc.

För att få ett bord på webbsidan som visas i fig. 5.1, du måste ringa nästa HTML-kod:

Fikon. 5.1. Sida med bord

Texten i tabellhuvudcellerna (fig 5.1) visas med halvfetstil med inriktning i mitten av cellen, och i konventionella celler är texten inte markerad och inriktad till den vänstra kanten.

Det bör noteras att i HTML-koden för ovanstående tagg

Bilar	Pris	Vadställe	5000	Golf	6000

Innehåller gränsattributet med värdet "1". Detta innebär att i tabellen som visas i fig. 5.1, är tjockleken på yttergränsen lika med
1 pixel. Om du spelar in

… ,

den yttre gränsens tjocklek kommer att vara lika med 6 pixlar. Till bordsgränserna visas inte, är gränsattributet nödvändigt för att tilldela ett värde som är lika med 0, eller helt enkelt för att utelämna detta attribut.

Hej kära bloggläsare! I den här artikeln lär du dig allt om så här sätter du in en bild på HTML-sidan. Har du flera bilder du vill lägga på din sida eller vill du lägga en logotyp på din webbplats? Allt detta är lätt. Efter att ha läst den här artikeln kan du infoga bilder på dina HTML-sidor utan problem. För att göra detta, låt oss prata i detalj om IMG-tagg Och dess attribut, kortfattat överväga format av grafiska filer, till exempel GIF, JPEG och PNG, såväl som låt oss se de nya funktionerna i HTML5, vilket förenklar införandet av video och ljud till webbplatsen.

På grund av det faktum att grafisk data och HTML-text inte kan kombineras i en fil, används ett annat tillvägagångssätt för att visa dem på webbplatsen, snarare än med andra HTML-sidor. Först och främst lagras grafiska bilder och andra multimediatata i separata filer. Och för deras implementering används speciella taggar på webbsidan som innehåller länkar till dessa enskilda filer. I synnerhet är taggen iMG-tagg. Efter att ha träffat en sådan tagg med adressen, begär webbläsaren först den lämpliga filen med bilden, ljud eller video och visar den bara på webbsidan.

Alla grafiska bilder är i allmänhet några data som lagras i enskilda filer från webbsidan kallas implementerad Sidelement.

Innan du sätter i bilder och överväga "IMG" -taggen i detalj, är det värt ett litet lärande om grafiska format.

Grafiska bildformat.

Det finns många olika grafiska format, men webbläsare stöder bara några. Överväga tre av dem.

1. JPEG-format(Förenade Fotografers Expert Grupp). Ganska populärt format som används för att lagra bilder. Stödjer en 24-bitars färg och behåller all halvton i bilder oförändrade. Men JPEG stöder inte öppenhet och snedvrider små detaljer och text i bilderna. JPEG används huvudsakligen för fotoförvaring. Dessa formatfiler har JPG, JPE, JPEG-tillägg.

2. GIF-format(Grafikutbyteformat.). Den största fördelen med detta format är möjligheten att lagra flera bilder i en fil på en gång. Detta gör att du kan skapa hela animerade rullar. För det andra stöder den insyn. Den största nackdelen är stöd för endast 256 färger, vilket inte är lämpligt för att lagra foton. GIF används huvudsakligen för att lagra logotyper, banderoller, bilder med transparenta platser och innehåller text. Dessa formatfiler har en GIF-förlängning.

3. PNG-format(Bärbar nätverksgrafik.). Detta format utvecklades som att ersätta det föråldrade GIF, liksom till viss del, JPEG. Stöder öppenhet, men tillåter inte att skapa animering. Detta format har en förlängning av PNG.

När du skapar webbplatser brukar använda bilder i JPEG- eller GIF-format, men använd ibland PNG. Det viktigaste att förstå i vilka fall det som format är bättre att använda. Om kort, då:

JPEG används bäst för att lagra foton eller halvtone bilder som inte innehåller text;

• GIF används huvudsakligen för animering;
• PNG är ett format för resten (ikoner, knappar, etc.).

Sätta i bilder på HTML-sidor

Så hur sätter du fortfarande bilden på webbsidan? Infoga bilden tillåter singel iMG-tagg. Webbläsaren lägger bilden på platsen för den webbsida där IMG kommer att träffas.

Sätt i kodbilder i HTML Sidan har detta slag:

Den här HTML-koden kommer att placera bilden som är lagrad i filen image.jpg på webbsidan, som finns i samma mapp med en webbsida. Hur kan du märka adressen till bilden som anges i src attribut. Vad jag redan berättade. Så, SRC-attributet är ett obligatoriskt attribut som tjänar till att ange adressen till filen med bilden. Utan ett attribut av SRC, är IMG-taggen inte meningsfullt.

Jag kommer att ge några fler exempel för att ange adressen till filbilden:

den här HTML-koden kommer att infoga en bild med IMAGE.JPG-namnet till sidan, som lagras i mappen Images som ligger i roten till webbplatsen.

I SRC-attributet kan du inte bara ange relativa länkar till bilder. Eftersom bilderna är lagrade på nätverket tillsammans med HTML-sidor, så har varje fil med bilden sin egen webbadress. Därför kan SRC-attributet du kan infoga bildadressen. Till exempel:

Denna kod kommer att infoga bilden från mysite.ru till sidan. URL ADPEC används vanligtvis om du anger en bild på en annan webbplats. För bilder som är lagrade på din webbplats är det bättre att använda relativa länkar.

IMG-taggen är ett litet fall, så det är bättre att sätta det inuti blockelementet, till exempel inuti "P" -taggen - stycke:

Låt oss träna och sätta in bilden till vår sida från tidigare artiklar på HTML-bilden. Jag skapar bredvid HTML-filen på mappen för din sida "och lägger filen med bilden" BMW.JPG ", som ser ut så här:

Då är HTML-sidan på sidan med den infogade bilden så här:

Och vi tittar på visningsresultatet i webbläsaren:

Som vi ser inget komplicerat i placeringen av bilder på webbsidor. Därefter, överväga flera andra viktiga attribut av "IMG" -taggen.

Alt Attribut - som ett extra alternativ

Eftersom bildfiler lagras separat från webbsidor, måste webbläsaren göra separata önskemål. Och vad om bilderna på sidan kommer det att finnas mycket och hastigheten på anslutningen till nätverket är liten, kommer nedladdningen av ytterligare filer att kräva stor tid. Och värre om bilden avlägsnades från servern utan din kunskap.

I dessa fall kommer själva webbsidan att vara framgångsrikt laddad, endast vita rektanglar visas istället för bilder. Därför, för att informera användarinformationen som bilden används. Med det här attributet anges den så kallade ersättningstexten, som kommer att visas i en tom rektangel medan bilden inte startar:

Och det ser ut så här:

Ställ in bildens storlek

Det finns fortfarande ett par IMG-taggattribut som du borde veta om. Detta är ett par attribut bredd. och höjd. Du kan använda dem för att ange bilddimensioner:

I båda attributen anges storleken pixlar. Breddattributet indikerar webbläsaren vilken bredd ska vara en bild och höjdattributet på vilken höjd. Dessa två attribut kan appliceras tillsammans och separat. Till exempel, om du bara anger bredden attributet, väljer webbläsaren höjden automatiskt proportionell mot den angivna bredden och även om endast höjdattributet används. Om du inte anger dessa attribut alls, kan webbläsaren automatiskt bestämma bildens storlek före utmatningen på den på skärmen. Det är värt att bara notera att bildstorleken specificerar något accelererar webbläsarens arbete när sidan visas.

Om det här om att sätta in bilder på sidorna, överväga sedan hur du lägger in ljud eller video till webbplatsen ...

Sätt in video och ljud med HTML 5

I den nya HTML5-specifikationen uppträdde flera nya taggar med vilka du enkelt kan infoga multimediafiler. Detta gäller främst video och ljud.

För inlägg audio HTML5 ger en par tagg Audio.. Adressen till filen där ljudringen är lagrad, indikeras av SRC-attributet som redan är bekant för oss:

"Audio" -taggen skapar ett blockelement på sidan. Som standard kommer webbläsaren inte att reproducera ljudringen. Vad han än gjorde, i ljudet, måste du ange ett speciellt attribut autospela. Speciell, eftersom det inte spelar någon roll. En av närvaron av detta attribut i taggen så att han började agera.

Som standard visas ljudringen inte på webbsidan. Men om i "Audio" -taggen sätter ett attribut utan mening kontroller.Webbläsaren visas på platsen för webbsidan där ljudetiketten är placerad, uppspelningskontrollerna för ljudringen. De inkluderar startknappen och paus uppspelning, uppspelningsskalor och volymkontroll.

Definition 1.

Webbsida är en textfil som skapats i HTML och ligger i World Wide Web (www). Webbsidan utom text kan innehålla hypertextlänkar, för vilka du kan övergå till andra webbsidor och visa dem, såväl som insatser i form av grafik, animationer, videoklipp och musik.

Med hjälp av HTML-språket kan du:

1. Skapa och redigera webbsidor.
2. Redigera HTML-formatdokument från Internet, med beaktande av funktionerna för alla objekt som implementeras i dokumentet (bilder, animeringar etc.).
3. Använda hypertext-länkar och förmågan att introducera i ett dokument HTML-format, diagram, animationer, videoklipp, musikaliska och tal ackompanjemang, text specialeffekter, skapa multimediapresentationer, bildspel, demonstrationsprojekt.

Anteckning 1.

Grafiska bilder lagras vanligtvis i separata filer. I HTML finns det speciella taggar, med hjälp av vilka i koderna på webbsidor är föreskrivna länkar som är faktiska adresser till dessa filer på Internet. Möte Sådana taggar, webbläsaren Gör en begäran till webbservern till lämplig fil med bilden, ett ljud eller video och tar den till webbsidan i läget för den här taggen. Alla data (bilder, ljud och videor etc.), som lagras i enskilda filer från webbsidan, kallas inbäddade webbsidor. Tänk på en läs mer om processen att lägga till en bild på webbsidan.

Lägga till bilder på en webbsida

Webbsidorna attraktiviteten är exakt i grafiken och andra olika objekt som används på dem. Lägg till bild på sidan är inte svår. Och lägga till grafik som kan göra utseendet på webbsidan Mer presenterbara och professionella, mycket svårare, är speciell kunskap att krävas.

Lägg till en bild på sidan kan använda en källkod av en bild som ser ut:

var - själva taggen och SCR är hans attribut. Eftersom SCR-attributet är obligatoriskt kan det sägas att all denna post är en vanlig tagg. I källkoden används inte den motsvarande stängningsfesten, eftersom källkoden är självförsörjande, och därför är det nödvändigt att lägga till en stängningsblind linje i slutet :.

Lägga till alternativa inskriptioner

På Internet kan du mycket ofta hitta olika inskriptioner som visas när du svävar muspekaren till ett grafiskt objekt på webbsidan. Dessa inskriptioner innehåller vanligtvis ytterligare information om själva bilden eller om området på sidan där den är belägen.

Nedan är den NTML-koden där Alt-attributet läggs till i taggen. Detta attribut liknar attributet SRC informerar webbläsaren för ytterligare information om bilden och den kan också användas tillsammans med TEG.

alt \u003d "(! Lang: Det är en bild!" />!}

Attributfunktionen ALT är att bestämma för det grafiska elementet av alternativt text som läggs till på webbsidan. Det kallas alternativ eftersom det visas på skärmen som ett alternativ för själva bilden. ALT-attributet utför en annan viktig funktion. Det gör det möjligt för webbdesignern att vara säker på att om sidbesökaren inte ser bilden på hans skärm, kan han ändå åtminstone bekanta sig med den textinformation som läggs till i bilden.

När du använder ALT-attributet för varje tagg är det viktigt att vara uppmärksam på att inte tilldela textmeddelanden i grafiska element. Det är till exempel ingen mening att lägga till alternativa textinskriptioner på elementen i utseendet på sidan. För att undvika sådana fel kan du tilldela ett tomt värdeattribut för dessa element (ALT \u003d "). Om du inte anger värdena till andra attribut, kommer webbläsaren att reproducera bilden i originalstorleken, medan linjer den övre kanten av bilden med den övre kanten av en serie textsträng. Du kan dock ändra båda dessa parametrar med hjälp av stilkoderna.

Bildattribut

Taggen har attribut som låter dig ändra storleken på bilderna. Här är några av dem:

• höjd - med den bestäms det av bildens höjd i pixlar eller procentandelar;
• bredd - Använd den bredden på bilden i pixlar eller procentandelar.

Justera höjden och bredden på bilden

Dimensionerna för bilderna som publiceras på webbsidorna kan ställas in med ovanstående attribut. Dessutom anges deras värden antingen som ett fast antal pixlar eller i procent i förhållande till storleken på sidan. I HTML-koden nedan innehåller den första taggen storleken på den ursprungliga bilden i pixlar (60 pixlar vertikalt och 60 pixlar horisontellt), den andra taggbredden på samma bilduppsättningar som motsvarar 6% av sidan av sidan och Höjden är 10% i förhållande till sidan på sidan.

alt \u003d "Det här är en bild!" Vikt \u003d "60" Bredd \u003d "60" /\u003e

alt \u003d "Det här är en bild!" Höjd \u003d "10%" Bredd \u003d "6%" /\u003e

Anteckning 2.

När du spelar bilder i ditt fönster är webbläsaren lika bra att hantera behandlingen av värdena för båda arten. Det är dock nödvändigt att komma ihåg att besökare på webbsidor på datorer kan installeras på andra sidan för skärmens upplösning än din. Därför, när bildstorleken ändras måste du definitivt ställa in båda bildvärdena (höjd och bredd). När du bara ändrar ett av dessa värden kan bilden sträckas på skärmen eller horisontellt.

Du kan använda skapandet av en illusion av en snabbare bildbelastning. För att göra detta bör du alltid ange värdena på höjd- och breddattributen oavsett om bilddimensionerna ändras eller inte. Eftersom de informerar webbläsaren viktig information om hur många utrymmen som krävs för att placera bilden på sidan. Som svar anger webbläsaren det utrymme du behöver för bilden och fortsätter att bygga andra delar av sidan, utan att stoppa nedladdningen av bilden själv. I detta avseende verkar det som om sidan är laddad snabbare, eftersom besökarna inte behöver vänta på en full belastning av bilden för att se annan information på sidan.

För att bilden på någon skärm, oavsett tillstånd, tog det exakt ett visst utrymme över sidan av sidan, måste du använda procentuella värden. Om det är nödvändigt att det permanenta är tillståndet för ritningen (dess storlek i pixlar), är det nödvändigt att använda värden i pixlar.

Nivelleringstext och grafik

För att anpassa bilden till höger (höger) eller vänster (vänster) använder kanten på textsträngen för attributet Aligrible Tag. Till exempel:

alt \u003d "Det här är en bild!" Vikt \u003d "60" Bredd \u003d "60" Justera \u003d "Höger" /\u003e

För att anpassa bilden vertikalt i förhållande till textsträngen kan du också använda det här attributet som kan ta topp, botten och mittvärden. Det övre värdet indikerar inriktningen av bildens övre kant längs den övre kanten av dess omgivande text. Det nedre värdet indikerar inriktningen av den nedre kanten av bilden längs den nedre kanten av den omgivande texten. Centrumvärdet indikerar bildcenterinriktningen i textsträngcentret.

Använda bilder som referenser

Bilder används också för att designa hyperlänkar till andra dokument. I HTML, blir bilden till en hyperlänk såväl som inskriptionen. För att göra detta används TEG där elementet på sidan är (i vårt fall, bilden), som ska vara en referens. Följande länk kommer att bytas till den här bilden.

Miniatyrer av bilder

Förutom ovanstående metod, där bilden fungerar som en hyperlänk, kan den också användas som en hyperlänk som övergår från en bild till en annan. Detta är nödvändigt i de fall den bildstorlek som vill publicera på webbsidan är ganska stor och kommer att laddas under mycket lång tid, vilket är oacceptabelt för många besökare. Skapa därför en reducerad kopia av den här bilden (thumbnail) och representerar den hyperlänken. Om sidans besökare är intresserad av den här bilden, kommer han, genom att klicka på miniatyren, kunna gå för att se den fullfjädrade bilden. Vi ger ett exempel på kod:

alt \u003d "Klicka för att se den normala bilden."

vikt \u003d "60" Bredd \u003d "60" /\u003e

Hemligheter med framgångsrik användning av bilder

Bilder har mycket visuell information för besökare, och det gör dem attraktiva, dessutom är de ganska vackra att lägga till webbsidan, men samtidigt måste du följa vissa regler för att skapa webbplatsen, om vi vill ha det att bli populär på nätverket.

När du skapar sidor måste du försöka placera bilder av små storlekar på dem, eftersom stora dimensionella bilder kommer att kräva mycket tid att ladda ner, och vissa användare använder fortfarande låga bandbreddskanaler för att komma åt nätverket och därmed den nedladdade storleken Filer har för dem grundläggande betydelse.

Not 3.

Den totala storleken på hela HTML-dokumentfilen är viktig, vilket i sin tur beror inte bara på storleken på de bilder som finns i den, men också på deras kvantitet. Du måste vara uppmärksam när du använder alt-attributet så att textmeddelandesinnehållet alltid motsvarar själva bilden. Och i motsatt fall: Det är nödvändigt att se till att bilden motsvarar textinformationen som presenteras på sidan.

När du använder bilder som lånas på Internet, måste du kontrollera om dessa bilder är skyddade av upphovsrätten.

HTML-bilder läggas till webbsidor med en tagg . Användningen av grafik gör webbsidor visuellt mer attraktiva. Bilder hjälper till att bättre förmedla kärnan och innehållet i webbdokumentet.

Med hjälp av HTML-taggar

Infoga bilder i HTML-dokument

1. Tag

Element Representerar bilden och dess backuphalt som läggs till med hjälp av ALT-attributet. Som föremål är en linje, då rekommenderas att placera den inuti blockelementet, till exempel,

Eller