Just nu i M3-nätverket
Gå till innehåll
Eforum är stängt för nya inlägg och svar sedan 20 juni 2022. Klicka för att läsa vad som hände och om alternativ.

Mina bilder syns inte på min webbsida

fattarnoll97

Startad av fattarnoll97,
i Webbutveckling

 Share

Rekommendera Poster

fattarnoll97

fattarnoll97

Postad
Postad

Hej! Jag har nu kollat runt på youtube, bloggar, artiklar ja överallt för att försöka hitta en lösning eller anledning till varför mina bilder inte syns på webbsidan som jag jobbar med just nu. Jag har inte publicerat den än så bilderna borde vara synliga internt även om jag inte laddat upp dem på servern. Bilderna jag har för en annan webbplats fungerar perfekt så uppenbarligen har jag gjort något fel denna gången. Jag har inte gjort några stavfel, varken i html-koden, bildnamnet eller filnamnet(dubbelkollat cirka 100gånger), min index-sida och bilderna befinner sig i samma mapp så det borde ju räcka att endast skriva namnet på bilden + filnamnet(t.ex. myface.jpg). De är inte skadade heller, jag kollade det genom att öppna dem i webbläsaren. VAD ÄR FELET! jag fattar ingenting... H1 texten syns men bilderna kan inte läsas in. 
ungefär såhär ser det ut: 

<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<link rel="stylesheet" type="text/css">
<title>Martina Andersson</title>
<nav id="navbar"></nav>
</head>
<body>
<header id="header">
<h1>Martina Andersson Artist Page</h1>
</header>
<img src="images/icon.jpg" alt="Vase with smiling face">
<section>
<div id="slider">
 
<img src="isculpturegrowing1.jpg" alt="Vase with old face">
<img src="painting-baby.jpg" alt="Painting of young girl">
<img src="ipainting-keepquiet.jpg" alt="Painting of girl with covered mouth">
<img src="ipainting-waterfall.jpg" alt="Painting of waterfall from girls mouth">
</div>
</section>
</body>
<footer></footer>
</html>
Länk till kommentar
Dela på andra webbplatser
Cluster

Cluster

Postad
Postad

Lite oklart vad du menar när du säger att du "inte publicerat den än så bilderna borde vara synliga internt även om jag inte laddat upp dem på servern"

 

Var/hur tittar du på den sidan? 

 

Om du bara visar sidan lokalt, dvs. i webbläsaren direkt från filsystemet, typ: file:///F:/webbsites/361330/index.htm 
vad händer om du då byter ut index.htm (eller vad din html-fil nu heter) mot isculpturegrowing1.jpg? Ser du bilden då?

 

 

F.ö. så bör du kolla:
1. Du har nav-tagg i head (bör vara i body)
2. Du har ingen länk till css-fil trots en link-tagg.
3. Du har nav-tagg utanför body (bör vara i body)

Länk till kommentar
Dela på andra webbplatser
ChromaWoods

ChromaWoods

Postad
Postad

Om trycker på F12-tangenten när du har din webbläsare öppnad så brukar det finnas en flik som heter Network eller Nätverk. Om du laddar om sidan medan du har den fliken öppen, hur ser det ut då? Du borde se alla resurser som webbläsaren försökt hämta, inklusive bilder. Om de inte kan hämtas så blir de rödmarkerade. Ta en skärmdump och visa så kanske vi kan lura ut vad som är galet.

  • .M reagerade på detta
  • Gilla 1
Länk till kommentar
Dela på andra webbplatser
Laso

Laso

Postad
Postad

Hej och välkommen @fattarnoll97 .

 

Det är länge sedan jag knackade html kod, men de enda jag tycker mig se, är att det nog saknas ett / i slutet av raderna med bilder.

Du skriver raderna såhär med bilden som images.

 

<img src="images/icon.jpg" alt="Vase with smiling face">

 

Men det borde se ut så här i stället.

 

<img src="images/icon.jpg" alt="Vase with smiling face"/>

 

En rad med en bild "image" måste stängas, och det gör man normalt med detta />

Du börjar ju raden med ett < , då måste du stänga med ett /> också, blir det bara > i slutet, så blir inte raden stängd.

 

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.

Och normalt så brukar man sluta med just denna /> för dom flesta rader som man börjar med <

 

T.ex

En öppningstagg ser ut så här: <>
En stängningstagg ser ut så här: </>

Lägg in någon av taggarna mellan vinkelparanteserna "<>" och "</> för att ge taggen olika egenskaper.

Exempel:

 

Body

<body> Information som ska visas i webbläsaren </body>
Användning: Body omsluter alla andra taggar som har med struktureringen av sidan att göra och som bestämmer vad som ska visas i webbläsaren.

 

Heading 1-6

<h1> Din rubrik </h1>

Användning: Rubriker där 1 är huvudrubrik och 6 är den minsta underrubriken. Endast 1 och 2 är "nödvändiga". Orsak: Om en rubrik innehåller ett visst sökord så ökar chanserna för att din webbsida ska visas på just den sökningen. Google bryr sig bara om h1 för att bestämma relevans. Bing bryr sig även om h2.

 

Paragraph

<p> Stycke-text </p>

Användning: Taggen p används för att skapa stycken och är den tagg som används flitigast när du skriver text till din hemsida.

 

<p>Det här är ett stycke</p>

 

Så kommer jag ihåg att det borde vara.

Ett litet tecken som blir fel eller fattas, kan störa mycket.

Du kan ju testa och se om det händer något?

Länk till kommentar
Dela på andra webbplatser
Mr Andersson

Mr Andersson

Postad
Postad
2 timmar sedan, skrev Laso:

 

Och normalt så brukar man sluta med just denna /> för dom flesta rader som man börjar med <

 

T.ex

En öppningstagg ser ut så här: <>
En stängningstagg ser ut så här: </>

Lägg in någon av taggarna mellan vinkelparanteserna "<>" och "</> för att ge taggen olika egenskaper.

 

IMG är en av några taggar som inte behöver "stängas" (om du menar xhtml, korrekt, men i vanlig html, behövs det inte). Dessutom är dagens webbläsare förlåtande (de flesta antar att det är html5 om man inte anger annat), så det är inte problemet.

 

Jag tror problemet är att bilderna finns i mappen "images/", detta med tanke på att TS hänvisar till images/ för en fil med namnet icon.jpg, och jag då antar att även övriga bilder finns där. 

 

Såsom koden är skriven nu måste bilderna finnas i samma mapp som .htm(l)-filen som ska visa bilderna.

 

  • .M reagerade på detta
  • Gilla 1
Länk till kommentar
Dela på andra webbplatser
fattarnoll97

fattarnoll97

Postad
  • Trådskapare
Postad

Hej alla. Tack för hjälpen! Jag la till "/" i slutet av taggen men det gjorde ingen skillnad, det har inte behövts i mina andra html-filer när jag har lagt till en bild men det kanske beror på programmet jag använder för att skriva koden(jag använder för övrigt visual studio code).
 

Jag menade lokalt, inte internt(Jag är ny med att skriva koder så jag är inte proffs på alla begrepp). Jag flyttade också nav-taggen. Om jag gör om filen till en jpg-fil så är det ju inte längre en webbplats? eller hur menar du? Jag försökte ändå men den gick inte med på att sparas som en jpg-fil. Det stod typ: "det gick inte att spara det här dokumentet med .jpg. The required extension is .asp." Menar du att jag ska spara den som .jpg.html?

 

Jag både tryckte och höll ned f12 knappen men inget hände(det kan bero på att jag har en Mac). Finns det något annat sätt att få upp "Network"?

 

Så här ser det ut efter de ändringar jag gjorde:
 

<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<link rel="stylesheet" type="text/css" href="martinaandersson-stylesheet.css">
<title>Martina Andersson</title>
</head>
<body>
<header id="header">
<h1>Martina Andersson Artist Page</h1>
</header>
<nav id="navbar"></nav>
<img src="images/icon.jpg" alt="Vase with smiling face"/>
<section>
<div id="slider">
 
<img src="images/sculpturegrowing1.jpg" alt="Vase with old face"/>
<img src="images/painting-baby.jpg" alt="Painting of young girl"/>
<img src="images/painting-keepquiet.jpg" alt="Painting of girl with covered mouth"/>
<img src="images/painting-waterfall.jpg" alt="Painting of waterfall from girls mouth"/>
</div>
</section>
</body>
<footer></footer>
</html>
Länk till kommentar
Dela på andra webbplatser
Cluster

Cluster

Postad
Postad
21 minuter sedan, skrev fattarnoll97:

[...] Om jag gör om filen till en jpg-fil så är det ju inte längre en webbplats? eller hur menar du? Jag försökte ändå men den gick inte med på att sparas som en jpg-fil. Det stod typ: "det gick inte att spara det här dokumentet med .jpg. The required extension is .asp." Menar du att jag ska spara den som .jpg.html?
[...]

Nej, kanske var lite otydligt. Menar att du i webbläsaren försöker se om bilden visas därifrån du anger att att den skall finnas. dvs.  /Users/martinaandersson/desktop/Privata%20Webbsidor/isculpturegrowing1.jpg

 

Precis som Mr Andersson skriver ovan så kräver din kod att bilderna ligger i samma mapp som filen

index.html, alltså i mappen Privata Webbsidor på Desktop (och inte i någon undermapp till den).

Länk till kommentar
Dela på andra webbplatser
Mr Andersson

Mr Andersson

Postad
Postad

Kan det vara så enkelt att Mac (Liksom Linux) är känsligt för stora/små bokstäver, tex om din fil heter bild.JPG men att du i din kod skriver bild.jpg ?

 

Länk till kommentar
Dela på andra webbplatser
Cluster

Cluster

Postad
Postad

Ja, då ligger ju inte bilderna i samma mapp som index.html

Du måste alltså uppdatera img-taggarna med rätt sökväg (lägga till images/ i början) 

<img src="images/isculpturegrowing1.jpg" alt="Vase with old face">
<img src="images/painting-baby.jpg" alt="Painting of young girl">
<img src="images/ipainting-keepquiet.jpg" alt="Painting of girl with covered mouth">
<img src="images/ipainting-waterfall.jpg" alt="Painting of waterfall from girls mouth">

 

Länk till kommentar
Dela på andra webbplatser
.M

.M

Postad
Postad

Verkar också som att i html-koden så står det ipainting-waterfall.jpg. Men bland filerna så verkar filen heta painting-waterfall.jpg, så passa på att kolla stavningen.

Länk till kommentar
Dela på andra webbplatser
ChromaWoods

ChromaWoods

Postad
Postad
På 2020-06-22 på 17:52, skrev Laso:

<img src="images/icon.jpg" alt="Vase with smiling face">

 

Men det borde se ut så här i stället.

 

<img src="images/icon.jpg" alt="Vase with smiling face"/>

 

En rad med en bild "image" måste stängas, och det gör man normalt med detta />

Du börjar ju raden med ett < , då måste du stänga med ett /> också, blir det bara > i slutet, så blir inte raden stängd.

 

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 />.

 

 

Njaeej.. Hon använder en doctype som motsvarar HTML5, i vilket slash i självstängande taggar inte fyller någon funktion. <img src="images/icon.jpg" alt="Vase with smiling face"> är med andra ord korrekt i detta fall, precis som med taggarna <meta>, <br> och <input> t.ex.

Länk till kommentar
Dela på andra webbplatser
 Share
Gå till ämneslista


×
×
  • Skapa nytt...