I den här artikeln visar jag hur du lägger in bilder och hur du kan formatera dessa med CSS.
Lägg in en bild
Öppna upp som du jobbar med sedan tidigare. I div-behållaren huvudtext och före första stycket lägger du in följande kod.
Kanske hade det blivit snyggare om texten flyter kring bilden istället?
Skapa en CSS-class med float och marginaler
För att få detta snyggare så vore det bra om vi kunde få texten att flyta runt bilden och detta kan vi åstadkomma genom att använda CSS float.
1. Börja med att tilldela bilden en egen class. Vi kan kalla den för "floatRight" eftersom bilden kommer att flyta till höger om texten som kommer direkt efter bilden.
Denna kod ska alltså in i din -fil precis innan första stycket:
Koden för CSS-klassen som du just skapat lägger du i din CSS-fil:
Vi använder oss även av marginaler eftersom vi vill ha ett utrymme mellan bildens vänsta sida samt ett utrymme mellan den undre kanten av bilden och text som kommer att befinna sig nedanför.
Och ja, du gissade rätt. Du kan naturligtvis även använda float: left; om du hellre vill att bilden ska flyta till vänster.
CSS Clear
Bra att veta om du vill att text ska sluta flyta kring
#Bilder
Taggen används för att visa upp bilder på en sida. Detta görs med hjälp av ett attribut där man anger länken till själva bilden. Attributet heter . När man ska ange för en bild så behöver man länka den så att länken utgår från samma katalog som html-dokumentet ligger i. Antag att din fil ligger i en katalog som heter . I den katalogen har du sedan ytterligare en katalog som heter vari bilden på dig ligger, och den heter . Det ser alltså ut ungefär såhär:
me/ images/Eftersom att -taggen ligger i dokumentet så behöver länken alltså se ut såhär:
images/Ett annat attribut för -taggen som ska anges är . Denna är till för att ange en alternativ text om bilden inte skulle laddas. Det är vikigt att den finns med, så att om något går fel så kan den som tittar på sidan ändå förstå vad där skulle ha varit för något.
Slutligen så ser det alltså ut såhär:
<imgsrc="images/"alt="En bild på mig" />#Revision history
- (A, lew) Första versionen.
Document source.
I den här artikeln lär du dig hur du lägger in bilder på din webbsida.
Taggen <img> står för image, och används för att lägga till bilder på din webbsida.
Img-taggen börjar med <img och avslutas med />. Se den som en typ av kombinerad öppnings- och avslutningstagg.
Exempel, bild
Så här skulle XHTML-koden för en bild kunna se ut:
Bild-taggen img avslutas alltså med /> och inte med </img>.
Förklaringar
src=""
Talar om var bilden ligger på din server eller hos ditt webbhotell.
width="bredd" | Bredden i pixlar. Ange bara ett värde (utan "px"), ingenting annat.
height="höjd"
Höjden i pixlar. Ange bara ett värde (utan px), ingenting annat.
alt="text"
Här skriver du in den text som ska ersätta bilden om bilden av någon anledning inte skulle laddas korrekt.
Kommentar: Width och height kan även ersättas med CSS.
Isåfall skulle det se ut så här:
title ="text"
När du för muspekaren över bilden så visas titeln som text. Detta fungerar inte i alla webbläsare.
Så här ser resultatet ut:
länka bild i HTML: hur man skapar länkar från bilder
november 30, admin
Vi kommer att ta en nybörjare vänlig titt på hur man skapar bildlänkar på din webbplats.
Vi kommer att titta på vilka HTML-taggar du behöver använda i koden.
om du aldrig har gjort det här tidigare, oroa dig inte! Jag kommer att vägleda dig genom hela processen.
i slutet av den här artikeln kommer du att skapa bildlänkar över hela din webbsida och Internet.,
Vi kommer också att titta på några mer avancerade tekniker mot slutet av artikeln om du känner dig modig.
ta en kaffe, låt &#; s dyka in!
Hur skapar du en hyperlänk?
för att få länkar på din hemsida måste du skapa en hyperlänk. För att göra detta i HTML måste du använda en &#; tagg. Varje &#; tagg har två delar öppnings-och stängningstaggen.,
här är ett exempel:
i ovanstående kan du se att den öppna taggen:
skapar början på hyperlänken. Sedan stänger vi taggen med:
all text som vi skriver mellan den öppna och stäng taggen är din länktext. Till exempel:
för att göra detta till en länk måste vi lägga till en URL. För att göra detta lägger vi till webbadressen till href-attributet., Webbadressen kan peka på var som helst på internet. I
.