Zaloguj się do konta

Jak wstawiać zdjęcia w tekst we wpisie na blogu?

utworzono: 2012/12/27 22:38
okiem_sandacza

Pytanie takie jak tytuł. [2012-12-27 22:38]

Imatyta

Aby wkleić zdjęcie czy to na forum czy też blogu, musisz użyć kodu html. Do zdjęć wykorzystujesz komende <img src="">, a w cudzysłowie wklejasz link do zdjęcia. Oczywiście możesz jeszcze dodać do tego inne parametry typu wielkość, umiejscowienie itd., ale to nie jest konieczne. [2012-12-28 07:40]

grisza-78

Przejdź do treści

Najpopularniejsze PoradyNa forumPoradyNa forum Polecane strony

HTML dla zielonych

Wstawienie obrazka

<img src="Tu podaj względną ścieżkę dostępu do obrazka" alt="Tu podaj tekst alternatywny" /> Zamiast tekstu: "Tu podaj względną ścieżkę dostępu do obrazka", należy podać miejsce na dysku, gdzie znajduje się nasz obrazek, który chcemy umieścić na stronie. Jeżeli obrazek znajduje się w tym samym katalogu co strona, na której chcemy go wstawić, wystarczy wpisać tutaj samą nazwę pliku obrazka, nie zapominając przy tym o podaniu rozszerzenia (".jpg" lub ".gif").
Natomiast w miejsce "Tu podaj tekst alternatywny" wpisuje się krótką informację, która pojawi się w przypadku, kiedy obrazek nie zostanie wyświetlony (np. jeśli użytkownik wyłączy wyświetlanie grafiki w swojej przeglądarce internetowej).

UWAGA!
Znacznik <img /> nie posiada w jezyku HTML znacznika zamykającego!

Przykład:


Poniżej znajdziesz przykłady poprawnych ścieżek dostępu, dla różnych struktur katalogów na dysku. We wszystkich przypadkach naszym zamiarem będzie wstawienie obrazka o nazwie plik.gif do dokumentu strona.html - drogę "przejścia" zaznaczono kolorem czerwonym i strzałkami. Przy tworzeniu ścieżki zawsze "startujemy" od strona.html i zmierzamy do plik.gif. Plik index.html stanowi stronę główną, którą się teraz nie zajmujemy.

  1. Poprawnie: plik.gif
    Niepoprawnie: C:\www\plik.gif, plik.GIF, plik

    Jak widać obrazek plik.gif oraz dokument strona.html znajdują się w tym samym katalogu. Nie ma przy tym znaczenia czy oba pliki są w katalogu głównym serwisu czy w jakimś podkatalogu - ścieżka dostępu jest taka sama. W takim przypadku wystarczy podać nazwę pliku bez żadnych dodatków. Jest to najprostsza struktura katalogów (szczególnie pierwsza - wszystko w jednym katalogu). Stosuje się ją szczególnie w serwisach składających się z niewielu podstron. Jeśli masz problemy ze swobodnym tworzeniem bardziej skomplikowanych ścieżek dostępu, polecam Ci właśnie ten model, ponieważ możliwość pomyłki jest tutaj naprawdę niewielka.

  2. Poprawnie: katalog/plik.gif
    Niepoprawnie: C:\www\katalog\plik.gif, katalog\plik.gif, katalog/plik.GIF, katalog/plik

    W przypadku kiedy plik.gif znajduje się w jakimś podkatalogu, a dokument strona.html nie, przed nazwą pliku trzeba podać nazwę tego podkatalogu oraz ukośnik (zwykły, nie odwrócony!). Taka struktura jest stosowana np. gdy mamy dużo plików (np. zdjęć) i dla utrzymania porządku chcemy je trzymać w osobnym podkatalogu.

  3. Poprawnie: ../plik.gif
    Niepoprawnie: C:\www\plik.gif, katalog/plik.gif, ..\plik.gif, ../plik.GIF, ../plik

    Sytuacja analogiczna jak poprzednio, lecz teraz plik.gif jest w katalogu głównym, a strona.html w podkatalogu. W takim przypadku przed nazwą pliku trzeba wstawić ../ co oznacza "wyjście" do katalogu nadrzędnego, czyli z katalog/ do www/ Struktura przydatna w przypadku wielu działów w serwisie, z których każdy składa się z dużej ilości podstron umieszczonych w osobnych katalogach.

  4. Poprawnie: ../katalog2/plik.gif
    Niepoprawnie: C:\www\katalog2\plik.gif, katalog2/plik.gif, ..\katalog2\plik.gif, ../katalog2/plik.GIF, ../katalog2/plik

    Jest to nieco zmodyfikowany poprzedni wariant. Teraz również plik.gif znajduje się w podkatalogu - podobnie jak strona.html z tym, że są to dwa różne katalogi. Budowanie ścieżki w tym przypadku rozpoczynamy w podkatalogu o nazwie katalog1/, w którym znajduje się nasza strona.html. Następnie wychodzimy do katalogu nadrzędnego www/ co jest realizowane przez wstawienie ../ na początku ścieżki dostępu. Teraz możemy swobodnie wejść do drugiego podkatalogu katalog2/ (realizuje się to przez podanie jego nazwy), w którym znajduje się nasz plik.gif, a na końcu - jak zawsze - podajemy nazwę pliku. Struktura przydatna w przypadku wielu działów w serwisie oraz dużej ilości plików. Wtedy w katalogu głównym znajduje się zazwyczaj jedynie strona główna index.html, a wszystkie podstrony oraz pliki są umieszczone w katalogach podrzędnych.

  5. Poprawnie: ../../katalog2/katalog2a/plik.gif
    Niepoprawnie: C:\www\katalog2\katalog2a\plik.gif, katalog2/katalog2a/plik.gif, ../katalog2/katalog2a/plik.gif

    Ten przykład jest już dość zaawansowany. Jeśli go zrozumiesz, możesz powiedzieć, że ścieżki dostępu "masz w małym palcu" :-)
    "Znajdujemy się" w katalogu: katalog1a/ (bo tutaj jest nasza strona, na której chcemy wstawić obrazek). Pierwsze dwie kropki w ścieżce dostępu powodują wyjście o jeden poziom wyżej - czyli do katalogu: katalog1/. Kolejne dwie kropki odpowiadają za wyjście o następny poziom wyżej, czyli do katalogu: www/. Teraz możemy już wejść do katalogu podrzędnego: katalog2/, a potem do: katalog2a/, który znajduje się wewnątrz niego. Na końcu wystarczy podać nazwę pliku.


Powyższe sposoby podawania ścieżki dostępu obowiązują dla wszystkich rodzajów plików - również dla podstron. Częstym błędem popełnianym przez osoby początkujące, jest podanie bezwzględnej ścieżki dostępu, np.:

C:\www\katalog2\katalog2a\plik.gif      (BŁĄD!)

Jest to karygodny błąd!!! Po wprowadzeniu strony do Internetu, zostaje ona zapisana na dysku komputera-serwera (nie na Twoim). Struktura (wygląd) drzewa katalogów będzie tam z całą pewnością inna niż na Twoim dysku lokalnym. Dlatego podana ścieżka bezwzględna tam nie istnieje. Co gorsze, błędu możesz nie wykryć od razu, ponieważ na Twoim komputerze obrazek wczyta się poprawnie, ale już znajomy nic nie zobaczy! Zauważ również, że w ścieżkach używamy ukośników ("/"), a nie odwróconych ukośników ("\").

Jest jeszcze jeden rodzaj poważnego błędu:

Obie ścieżki wyglądają poprawnie, ale są absolutnie niedopuszczalne! Nie wolno wstawiać do dokumentu plików z innego dysku. W ogóle nie można się odwoływać do plików, które znajdują się "powyżej" katalogu głównego serwisu - u nas jest to www/ (katalog główny serwisu można rozpoznać po tym, że bezpośrednio w nim znajduje się strona główna index.html).

Pamiętaj: stosuj zawsze względne, a nie bezwzględne ścieżki dostępu! Używaj również zwykłych, a nie odwróconych ukośników. Wszystkie pliki Twojej strony powinny znajdować się w obrębie katalogu głównego serwisu, w żadnym razie powyżej niego!

Niektóre edytory HTML umożliwiają automatyczne wstawienie względnej ścieżki dostępu (dopiero po zapisaniu strony na dysku), poprzez wybranie pliku w specjalnym selektorze. Dzięki temu tworzenie zawiłych ścieżek, może być dużo łatwiejsze.
Z takiego generatora możesz skorzystać również tutaj.

Przy okazji zwracam uwagę, że strona startowa index.html (patrz powyżej) musi znajdować się w głównym katalogu publicznym na serwerze. Podczas umieszczania strony w Internecie, na serwer wysyłamy wszystkie pliki znajdujące się w katalogu www/, ale nie sam katalog. index.html musi bezwzględnie znajdować się w katalogu głównym na Twoim koncie WWW, w przeciwnym razie Twoja strona w ogóle się nie wyświetli! Podczas umieszczania strony w Internecie, nie zapomnij przekopiować na serwer również wszystkich plików obrazków!

UWAGA!
Bardzo ważne: w nazwach plików lepiej nie używać:
  • wielkich liter
  • znaków, np.: \ / : * ? " < > |
  • spacji (jeśli musisz, w zamian używaj podkreślnika "_")
  • polskich liter (ą, ć, ę, ł, ń... itd.)

Jeśli nie zastosujesz się do tych zaleceń, może się okazać, że po wprowadzeniu strony do Internetu, pliki takie nie wczytają się (nawet jeśli na Twoim komputerze wszystko jest w porządku)!


Na koniec jeszcze jedna rada: obrazki wstawione na stronę, wydatnie zwiększają jej objętość, a co za tym idzie, wydłużają czas wczytywania strony. Jeśli na Twoim dysku lokalnym strona wczytuje się błyskawicznie, nie myśl, że będzie tak samo po wprowadzeniu jej do Internetu. Oczywiście im większy jest obrazek, tym więcej miejsca zajmuje na dysku. Poza tym zbyt wiele nieprzemyślanej grafiki tylko zaciemnia treść. Dlatego staraj się z tym nie przesadzać. Należy również pamiętać, aby najlepiej wszystkie obrazki były zapisane w jednym z trzech formatów:

  • GIF - dla rysunków składających się z mniej niż 256 kolorów, np. przyciski menu i inne "ręcznie" rysowane ozdobniki. Format ten obsługuje przezroczystość.
  • JPG - dla zdjęć wielokolorowych. Nie obsługuje przezroczystości.
  • PNG - pozwala zapisywać z bardzo dobrą jakością zarówno ręcznie rysowane grafiki jak i zdjęcia. Obsługuje kompresję oraz zarówno pełną przezroczystość jak i półprzezroczystość. Niestety zwłaszcza ta ostatnia własność może nie być interpretowana przez starsze przeglądarki (np. MSIE 6.0).

W żadnym wypadku nie należy stosować formatu BMP, gdyż nie posiada on żadnej lub bardzo słabą kompresję i w związku z tym grafika zapisana w tym formacie ma dużo większą objętość.

Grafikę przydatną dla stron WWW możesz znaleźć bezpośrednio w Internecie. Istnieje wiele serwisów internetowych dla webmasterów, oferujących darmowo gotowe przyciski menu i inne przydatne dodatki. Wystarczy trochę poszukać.

Zobacz także

obrazek (28), grafika (23), zdjęcie (23), fotografia (23), dysk (2), plik (12)

Komentarze

  • Gość

    15.09.2012 16:59
    Też nie działa i nie wiem cały czas dla czego.

  • Gość

    06.09.2012 11:21
    Miałam podobny problem i zauważyłam, że pierwszy musi być w kolejności po <body>
    <body text="purple" bgcolor="silver>
    Jak wstawiałam najpierw bgcolor a potem text to nie działało.

  • Gość

    05.09.2012 13:40
    @Gość z problemami koloru
    Nie wiem czy tak to działa, ale może zamiast pisać blue wpisz #0000ff a zamiast red #ff0000
    Jak to nie tak się robi to nie bić :P

  • pieczar92

    05.09.2012 13:23
    Klikam podgląd i mnie to działa.

  • Gość

    05.09.2012 13:15
    <body bgcolor="red" text="blue">
    Komando smoki to nie ćwoki.
    </body>
    Wklejam to na stronkę, a pojawia m się sam napis, a tła nie ma.

  • Luke

    05.09.2012 13:08
    Fusów do wróżenia nie mam. Musiałbyś dać całość, to przeanalizujemy.

  • Gość

    05.09.2012 13:04
    Dobra a czemu tła nie mogę zmienić? Robię wszystko tak jak trzeba i nic.

  • Luke

    05.09.2012 12:30
    Załóż sobie konto na jakimś darmowym hostingu (yoyo.pl, cba.pl) albo daj całość kodu tu na forum w znaczniku [code].

  • Gość

    05.09.2012 12:24
    Czyli jak mam to wrzucić?

Zobacz więcej komentarzy

Dotacje

Pomogła Ci ta strona? Chcesz, aby dalej się rozwijała?
Wpłać dobrowolną dotację...

Share on facebook Share on google Share on naszaklasa Share on wykop Share on twitter Share on blip Share on email More Sharing Services9 © 2002-2012 Sławomir Kokłowski Kopiowanie treści bez zgody autora zabronione (zasady korzystania)! Strona sponsorowana przez serwis www.boo.pl [2012-12-28 09:20]

grisza-78

Oj coś chyba nie tak wkleiłem, ale znajdziesz tu odpowiedz na twoje pytanko.
[2012-12-28 09:21]

Imatyta

Oj coś chyba nie tak wkleiłem, ale znajdziesz tu odpowiedz na twoje pytanko.


To było dobre :) [2012-12-28 09:24]

Zander51

Prosto i przejrzyście. Talent pedagogiczny jak nic...
[2012-12-28 10:27]

ZanderHunter

Prosto i przejrzyście. Talent pedagogiczny jak nic...



 Ja już nic nie wiem całkiem się w tym pogubiłem...:)
[2012-12-28 13:18]

ryukon1975

Prosto i przejrzyście. Talent pedagogiczny jak nic...



 Ja już nic nie wiem całkiem się w tym pogubiłem...:)









Uczcie mnie tak dalej a do końca życia głupi zostanę.:)))
[2012-12-28 13:27]

Jurant

[2012-12-28 17:49]

Uuuuuuu.................. a ja myślałem że tylko ja mam taki talent :)) szkoda :)
[2012-12-28 18:15]

Michal8300

ja też sie pogubiłem mi wyskakuje:  Brak uprawnień. Dostęp zabroniony. a co chodzi?
[2013-08-26 13:40]

ryukon1975

Nie wiem. [2013-08-26 14:44]

ryukon1975

[2013-08-26 14:46]

ryukon1975

<img src="http://imageshack.us/a/img138/6274/pu8e.jpg" alt="Image Hosted by ImageShack.us"/> [2013-08-26 15:09]

ryukon1975

I nie wchodzi.:( [2013-08-26 15:12]

ryukon1975

[2013-08-26 15:15]

ryukon1975

Po kilku próbach już chyba wszystko wiem.:) [2013-08-26 15:17]

ryukon1975

Po kilku próbach już chyba wszystko wiem.:)


 

Ale nie wklejaj takiego dużego zdjęcia bo nie przejdzie musisz zmniejszyć o 700/500. Sto prób nieudanych i jesteś mistrzem.:)

[2013-08-26 17:25]

Michal8300

wielkie dzięki  [2013-08-26 19:36]

Michal8300

ale nawet zmniejszone nie weszło dalej to samo piszą nwm czemu nie mogę dodac  [2013-08-26 19:48]

ryukon1975

ale nawet zmniejszone nie weszło dalej to samo piszą nwm czemu nie mogę dodac 


  Wklejasz przez stronę ImageShack ? A dokładnie prze dodanie z niej linku? [2013-08-26 19:54]

ryukon1975

Ja wklejam przez ImageShack tylko te rozmiary trzeba opanować. :)

 

 

[2013-08-26 19:59]

CZzesio

Cześć :) Nie znam się na "blogach" bo nie posiadam  ale spróbuj zmienić nazwę fotki,żeby była jak najprostsza ,bez znaków typu : ?*&^%$#@!_+
[2013-08-26 21:03]

ryukon1975

Cześć :) Nie znam się na "blogach" bo nie posiadam  ale spróbuj zmienić nazwę fotki,żeby była jak najprostsza ,bez znaków typu : ?*&^%$#@!_+


 

Rzecz w tym Czesio że zdjęcie nie może być szersze jak artykuł,jak wychodzi na boki w reklamy to jest źle.:)

[2013-08-26 21:07]

ryukon1975

Na obcej ziemi

Tu jest przykład złego zdjęcia czyli szerszego od artykułu.\

 

PS

Tylko ja potrafię takie wklejać.:)

[2013-08-26 21:12]

CZzesio

Na obcej ziemi

 Tu jest przykład złego zdjęcia czyli szerszego od artykułu.\

 PS

Tylko ja potrafię takie wklejać.:)



Rozumiem o co chodzi :) Ale ta "księżniczka" z foty jest warta nawet bilbordu ;)

ps. Ja też ;) [2013-08-26 21:20]