Hur Man Bäddar In En Bild På En Webbplats

Innehållsförteckning:

Hur Man Bäddar In En Bild På En Webbplats
Hur Man Bäddar In En Bild På En Webbplats

Video: Hur Man Bäddar In En Bild På En Webbplats

Video: Hur Man Bäddar In En Bild På En Webbplats
Video: Lägga till bilder på en hemsida 2024, November
Anonim

Allt som besökaren ser på sidorna på webbplatsen visas av webbläsaren baserat på detaljerade instruktioner som servern skickar till honom. Dessa instruktioner kallas html-koden för sidan och består av separata "taggar" som beskriver typen, utseendet och platsen för varje element individuellt. För att placera något nytt element (till exempel en bild) på en sida måste du lägga till en motsvarande instruktion - en tagg - till källkoden. Tänk på det enklaste sättet att göra detta.

Infoga en bild på en sida
Infoga en bild på en sida

Instruktioner

Steg 1

Om du använder någon form av innehållshanteringssystem är det mycket troligt att det innehåller en sidredigerare. Först måste du öppna önskad sida i den här redigeraren. Ytterligare - alternativ är möjliga. I bästa fall kommer sidredigeraren att ha ett "visuellt läge", med andra ord - "WYSIWYG-läge" (Vad du ser är vad du får - "vad du ser är vad du får"). I det här läget behöver du inte hantera den ursprungliga html-koden alls! Sidan i redigeraren ser likadan ut som på webbplatsen, det räcker att peka musen på önskad plats och trycka på knappen "infoga bild" på redigeringspanelen.

Steg 2

Som ett resultat öppnas en dialogruta där du måste välja önskad bild. Om du inte har laddat upp den ännu finns det en knapp för att välja en bild på din dator och ladda upp den till servern. Dessutom kan du i den här dialogrutan ställa in ramens färg och bredd runt bilden, avståndet och färgen på fyllningen mellan ramen och bilden, texten för verktygstips. Det är inte nödvändigt att specificera måtten här, men av skäl att påskynda sidladdningen och för att förhindra snedvridning av designen är det fortfarande bättre att göra detta. När alla obligatoriska fält i dialogrutan är ifyllda, klicka på "OK" och spara sedan den redigerade sidan.

Infoga dialogrutan Bild
Infoga dialogrutan Bild

Steg 3

På grund av det faktum att det inte finns någon enda standard för styrsystem kan proceduren för att infoga en bild i det visuella läget i ditt system skilja sig något, men principen kommer att vara densamma. Av samma anledning kanske WYSIWYG-läge inte visas i webbplatsens ledningssystem. Då måste du fortfarande redigera källkoden för sidan i HTML (HyperText Markup Language - "hypertext markup language"). Du måste infoga en tagg på rätt plats i koden som ber webbläsaren att visa bilden här. I sin enklaste form bör det se ut så här: Här är bildens "relativa adress" - vid denna adress ska webbläsaren kontakta servern för att få bildfilen från den. Om adressen är relativ antar webbläsaren att filen finns i samma servermapp som själva sidan (eller i en undermapp). Men för att inte misstas är det bättre att ange den "absoluta adressen" - till exempel så här: Naturligtvis, för att servern ska hitta och skicka bilden till webbläsaren, bör den laddas upp till den angivna plats. Det enklaste sättet att göra detta är genom filhanteraren, som finns i alla innehållshanteringssystem, såväl som i ditt webbhotells kontrollpanel. Du kan också göra detta med FTP-protokollet (File Transfer Protocol - "file transfer protocol"), med ett speciellt program - FTP-klient. Det finns många av dem, både betalda och gratis - till exempel Cute FTP, FlashFXP, WS FTP, etc. Men det går naturligtvis att ta tid att installera, behärska och konfigurera programmet, så en filhanterare för nedladdning av allt du behöver genom en webbläsare är ett enklare alternativ.

Steg 4

Förutom adressen i bildens html-tagg kan du ange ytterligare information - "attribut" för taggen. Till exempel innehåller attributtet alt="Image" texten för verktygstipsen som dyker upp när du håller muspekaren över bilden: Den kan ersättas med attributet title: - Storleken på rektangeln där webbläsaren ska visa bilden är inställd på attributen bredd och höjd: - Gränsattributet anger bredden på kanten runt bilden (i pixlar): Om bilden är en länk, kommer webbläsaren att rita en blå ram runt den. För att bli av med den, ställ in gränsvärdet till noll: - De andra två attributen innehåller information om hur mycket indragningen av bilden är från intilliggande element (från textrader, andra bilder etc.) - hspace anger storleken på indragning horisontellt (vänster och höger), vspace - vertikalt (botten och topp):

Rekommenderad: