zdjęcie - Kurs HTML i CSS
Przeglądarka zdjęć...stronie w wybranym miejscu przykładowy kod: <script> var przegladarka_zdjec = new PrzegladarkaZdjec('przegladarka_zdjec', new Array( new Array('zdjęcie', 'Tytuł', 'Opis'), new Array('zdjęcie', 'Tytuł', 'Opis'), new Array('zdjęcie', 'Tytuł', 'Opis') )); </script> zdjęcie Lokalizacja pliku zdjęcia Tytuł Tytuł zdjęcia Opis Szerszy opis zdjęcia (opcjonalnie) UWAGA! Zwróć uwagę, że po każdym elemencie, wprowadzającym do przeglądarki kolejne zdjęcie ("zdjęcie, Tytuł, Opis")...
- Galeria zdjęć HTML / Skrypt galerii zdjęć
...zdjęć Ochrona przed kopiowaniem zdjęć Wymagana wiedza Konstruowanie ścieżek dostępu do obrazków Przykład galerii zdjęć Kliknij wybrane zdjęcie lewym przyciskiem myszki, aby zobaczyć powiększenie: Zwróć uwagę, że po otworzeniu powiększenia możesz nawigować pomiędzy kolejnymi zdjęciami z galerii również za pomocą klawiatury - klawiszami strzałki w lewo (poprzednie zdjęcie) i w prawo (następne zdjęcie). Ponadto możesz zamknąć powiększenie przy pomocy klawisza Escape. Dodatkową...
HTML dla zielonych / Odsyłacz obrazkowy HTML <a href, img src alt "border">...Hiperłącze to inaczej odsyłacz, odnośnik lub po prostu link hipertekstowy. Wewnątrz hiperłącza możemy umieścić nie tylko zwykły tekst, ale również zdjęcie, a nawet jednocześnie zdjęcie np. z jego podpisem tekstowym. Dzięki temu odsyłacz zadziała bez względu na to, czy użytkownik kliknie bezpośrednio w zdjęcie czy może w jego podpis. Na przykład: <a href="duze-zdjecie.jpg"><img src="male-zdjecie.jpg" alt="Zobacz duże zdjęcie" style="border: 0"><br> Tu wpisz podpis zdjęcia</a>.
Odsyłacze HTML / Ćwiczenia...ilustracji z Twojej strony. Pierwsza powinna mieć rozmiary dokładnie takie jak widoczne bezpośrednio na stronie. Natomiast druga wersja może być zdjęciem w wysokiej rozdzielczości. W tym celu otwórz duże zdjęcie w dowolnym programie graficznym - może to być nawet aplikacja Paint, która jest dostępna w systemie Windows - i pomniejsz go (w prorgamie Paint należy użyć opcji "Zmień rozmiar"). Następnie zapisz małe zdjęcie na dysku pod inną nazwą, ale z tym samym rozszerzeniem nazwy pliku (na...
- HTML5 / Responsywny obrazek <picture, source>
...Niestety istnieją przypadki, kiedy jest on niewystarczający. Najczęściej ma to związek z urządzeniami mobilnymi. Trudno spodziewać się, że to samo zdjęcie będzie równie dobrze wyglądać zarówno na dużym ekranie laptopa i na niewielkim smartfonie. Ponadto urządzenia mobilne są również częściej narażone na niestabilną prędkość transferu danych. Właśnie z tych powodów do specyfikacji HTML5 wprowadzono nowy element: PICTURE. Dopasowanie formatu <picture, source type> (interpretuje: Firefox 38...
- HTML dla zielonych / Wyśrodkowanie obrazka HTML <div "center", img src alt>
...zobacz rozdział: Multimedia / Obrazek. Przykład <div "center", img src alt> Pytania i odpowiedzi <div "center", img src alt> Jak wycentrować zdjęcie HTML? Najłatwiejszym sposobem umieszczenia obrazka na środku strony jest wstawienie go wewnątrz znacznika z ustawionym atrybutem o odpowiedniej wartości: <div style="text-align: center"><img src="obrazek.jpg" alt="Tu wpisz krótki opis obrazka"></div>. Jak wyśrodkować obraz i tekst HTML? W tym celu zarówno obrazek jak i tekst można...
Drukowanie CSS / Rozmiar papieru @page {size}...sprawdza się przy drukowaniu tekstu. Na stronie możemy mieć jednak także zdjęcia np. krajobrazów, które typowo mają układ poziomy. W takiej sytuacji zdjęcie nie zostanie automatycznie obrócone, a więc zajmie tylko niewielki fragment kartki papieru. Użytkownik może co prawda samodzielnie zmienić orientację papieru przed uruchomieniem wydruku, ale nie wszyscy potrafią to zrobić. W takiej sytuacji wygodniej będzie podpowiedzieć drukarce, aby użyła poziomej orientacji papieru (tzw. krajobraz)...
- Pozycjonowanie CSS / Obcinanie {clip}
...50px 40px 10px): position: absolute; clip: rect(5px, auto, 40px, 10px): Dla porównania bez wycinania: Pytania i odpowiedzi {clip} Jak przyciąć zdjęcie w CSS? W CSS, aby przyciąć zdjęcie, można użyć właściwości clip. Przykładowo, "clip: rect(0, 100px, 100px, 0)" określa obszar do przycięcia, gdzie wartości to kolejno: górny, prawy, dolny i lewy margines przycinania. Jak wyciąć fragment obrazu w CSS? Aby wyciąć fragment obrazu w CSS, używa się właściwości clip. Na przykład, jeśli...
- Pozycjonowanie CSS / Ustawienie {float, vertical-align}
...do elementu zawierającego obraz i ustawić ją na left lub right w zależności od tego, po której stronie chcemy umieścić obraz. Jak ustawić zdjęcie po prawej stronie CSS? Aby ustawić zdjęcie po prawej stronie w CSS, można użyć właściwości float z wartością right, na przykład: "float: right". To spowoduje, że obraz zostanie przesunięty na prawą stronę i tekst lub inne elementy będą wyświetlane obok niego z lewej strony. Jak ustawić elementy obok siebie CSS? Aby ustawić elementy...
- Układ elastyczny CSS / Kolejność {order}
...opis. Zdjęcie jest w tym przypadku zupełnie nieważne, dlatego najlepiej jest wstawić je na końcu. Jednak dla użytkowników z dobrym wzrokiem właśnie zdjęcie może okazać się najważniejsze. Umieszczając je w kontenerze elastycznym, a następnie określając dla niego styl "order: -1", wyświetlimy go na początku, podczas gdy syntezator mowy trafi na niego dopiero na końcu. W ten sposób potrzeby obu grup użytkowników zostaną spełnione. Przykład {order} blok 1 blok 2 blok 3 (order: -1) blok 4...