Tryb drzewa | Tryb normalny

deros · (Ten post był ostatnio modyfikowany: 03-30-2013 02:08 PM przez deros.)

Ten wątek też jest skierowany do osób początkujących Uśmiech

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 Oczko

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>

Takao · (Ten post był ostatnio modyfikowany: 03-30-2013 02:15 PM przez Takao.)

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 Uśmiech

deros · (Ten post był ostatnio modyfikowany: 03-30-2013 06:40 PM przez deros.)

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ć Smutny

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