wstawiamy obrazek czyli znacznik img - Wersja do druku +- Forum hosting 4un.eu (http://www.4un.eu/forum) +-- Dział: Inne (/Forum-Inne) +--- Dział: Tworzenie stron (/Forum-Tworzenie-stron) +---- Dział: HTML+CSS (/Forum-HTML-CSS) +---- Wątek: wstawiamy obrazek czyli znacznik img (/Thread-wstawiamy-obrazek-czyli-znacznik-img) |
wstawiamy obrazek czyli znacznik img - deros - 03-30-2013 01:59 PM Ten wątek też jest skierowany do osób początkujących Czym byłaby strona bez grafiki? teraz pokaże jak wstawić naszą graficzkę. Zakładam, że mamy przygotowaną grafikę np. zdjęcie w pliku o nazwie fotka.jpg tworzymy dokument html: fotka.html w sekcji body pliku fotka.html wstawiamy : Cytat: <img src="fotka.jpg">po uruchomieniu w przeglądarce pliku fotka.html powinniśmy zobaczyć nasz obrazek. zadziała jedynie w przypadku, gdy oba pliki są w tym samym katalogu. całkowity plik fotka.html w naszym przykładzie powinien wyglądać tak : Cytat:<html><head><title>fotka</title></head><body><img src="fotka.jpg"></body></html>Znacznik img jest znacznikiem, który nie jest zamykany! Jeśli chcemy, dodać w naszym pliku drugą fotkę np fotka2.jpg nasz plik fotka.html będzie wyglądał następujaco: Cytat:<html><head><title>fotka</title></head><body><img src="fotka.jpg"><img src="fotka2.jpg"></body></html>dla każdej kolejnej fotki stosujemy kolejny znacznik img. Oczywiście plik może mieć dowolną nazwę musimy ją wpisać w nawiasy po src= src to skrót od angielskiego słowa source (czyli źródło) i wskazuje na plik Jak już wspomniałem pliki wyświetlą się jeżeli są w tym samym katalogu co plik html. jeżeli w naszym katalogu mamy jedynie plik fotka.html, oraz podkatalog fotki z obrazkami, spotka nas niemiła niespodzianka zamiast obrazka pojawi się w przegladarce krzyżyk. Dzieje się tak dlatego, że przy braku wskazania katalogu domyślnym katalogiem jest ten, co uruchamiany z niego plik. Aby, otworzyć fotki z podkatalogu fotki nasz plik musi wyglądać tak Cytat:<html><head><title>fotka</title></head><body><img src="fotki/fotka.jpg"><img src="fotki/fotka2.jpg"></body></html> RE: wstawiamy obrazek czyli znacznik img - Takao - 03-30-2013 02:14 PM Kolejny dobry tutorial, jednakże w tym doszukałem się małego błędu. Znacznik <img> jest wyjątkiem i posiada znacznik zamykający, bo każdy znacznik trzeba zamknąć. Wygląda on jednak inaczej niż zwykłe. Dla porównania: Sposób I: <b>Treść pogrubiona</b> Sposób II: <img src="ścieżka do obrazka" /> Można także zrobić pare "myków" w wypadku, gdy obrazek nam się nie pojawi, będzie tak zwany krzyżyk oraz treść alternatywna, a oto kod: <img src="ścieżka do obrazka" alt="tutaj treść, gdy obrazek się nie wyświetli" /> Dodatkowo można ustalić wymiary obrazka: <img src="ścieżka do obrazka" alt="tutaj treść, gdy obrazek się nie wyświetli" width="wartość szerokości" height="wartość wysokości" /> Mimo malutkiego błędu poradnik jest przydatny i napisany w "języku zrozumiałym" . Pozdrawiam RE: wstawiamy obrazek czyli znacznik img - deros - 03-30-2013 06:37 PM co do ukośnika nie jest on wymagany, a jest często dodawany, gdy tak na prawdę plik jest pisany w php i często pojawiają się problemy z jego interpretacją przez php w php jest to znak ucieczki. co mają znaczniki pogrubienia czyli b do obrazków? Co do alternatywnej treści to zapomniałem tu napisać należy opisywać obrazki ze względów na wyszukiwarki oraz osoby niewidome, którym komputer czyta. co do opisywania dokładniej dla przeglądarki to miałem zamiar to opisać w osobnym wątku, ponieważ przytoczona metoda jest poprawna, ale stosuje się obecnie arkusze kaskadowe styli (css) więc zgodnie z dzisiejszymi standardami opisuje się to : Cytat:<img src="ścieżka do obrazka" alt="opis obrazka" style="width: x; height: y; ">gdzie za x wstawiamy szerokość oraz jednostkę np. 200 px za y wstawiamy wysokość oraz jednostkę np. 100 px jednostkami moga być px piksele, cm centymetry, mm milimetry, em względem oraz % procenty. Dodam przy okazji że nie ma to wpływu na wielkość pliku w kb, oraz że jest to skalowanie przez przegladarke jezeli podamy za małe rozmiary, dlatego nie należy tego stosować do tworzenia miniatur |