zdjęcia - Kurs HTML i CSS
Galeria zdjęć HTML / Skrypt galerii zdjęć...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ą zaletą skryptu galerii zdjęć jest automatyczne wczytywanie w tle od razu poprzedniego i następnego zdjęcia z galerii. Dzięki temu kiedy...
- Przeglądarka zdjęć
...</form>' ); if (auto) this.przewin(); } Na początku, w wyróżnionym miejscu, można dodatkowo zmienić czas przejścia do następnego zdjęcia w trybie pokazu slajdów (liczony w sekundach). Czas ten jest liczony od momentu pełnego załadowania zdjęcia. Następnie na stronie, gdzie ma być umieszczona przeglądarka zdjęć, należy w nagłówku dokumentu (wewnątrz <head>...</head>) wstawić: <script src="przegladarka_zdjec.js"></script> W wyróżnionym miejscu oczywiście należy podać...
HTML5 / Załącznik <figure, figcaption>...Jest to element służący do wstawiania podpisów ilustracji bądź diagramów i innych tego typu załączników w dokumentach HTML5. Jak dodać opis do zdjęcia HTML? Najlepszym sposobem dodania krótkiego opisu pod zdjęciem jest umieszczenie na stronie znacznika FIGURE, a wewnątrz niego IMG i FIGCAPTION. Na przykład jeśli plik zdjęcia nazywa się "zdjecie.jpg" i znajduje się w tym samym katalogu co dokument *.html, w którym chcemy go wstawić, można się posłużyć następującym kodem: <figure> <img...
- HTML dla zielonych / Odsyłacz obrazkowy HTML <a href, img src alt "border">
...Odnośniki obrazkowe można tworzyć dla wszystkich typów odsyłaczy: do podstrony, do adresu internetowego i pocztowych. Na przykład jeśli plik zdjęcia nazywa się "obrazek.jpg" i znajduje się w tym samym katalogu na dysku komputera co dokument *.html, w którym chcemy wstawić odsyłacz obrazkowy, można się posłużyć odpowiednio następującymi znacznikami: <a href="podstrona.html"><img src="obrazek.jpg" alt="Przejdź do podstrony" style="border: 0"></a> (odsyłacz do podstrony), <a...
Dobre praktyki / Przykazania webmastera...kompresji oraz wiele stopni półprzezroczystości. W żadnym razie nie używaj formatu BMP, gdyż jest on wyposażony w bardzo słabą kompresję, a więc zdjęcia tak zapisane będą się ładowały koszmarnie długo. Stosuj fizycznie pomniejszone miniatury zdjęć Jeśli masz na stronie galerię zdjęć, zadbaj, aby pełnowymiarowe zdjęcia ładowały się dopiero po kliknięciu w miniaturę. Miniatury w żadnym razie nie mogą być tymi samymi plikami graficznymi co duże zdjęcia, a jedynie pomniejszone przy pomocy...
- Nagłówek i treść HTML / Dokumenty prawne <link "license, privacy-policy, terms-of-service">
Spis treści <link "license, privacy-policy, terms-of-service"> Licencja (prawa autorskie) <link "license"> Licencja na zdjęcia Polityka prywatności (przetwarzanie danych osobowych) <link "privacy-policy"> Warunki świadczenia usług (regulamin) <link "terms-of-service"> Licencja (prawa autorskie) <link "license"> <head> <link rel="license" href="ścieżka dostępu"> </head> Jeżeli aktualny dokument jest chroniony prawami autorskimi, warto wskazać ścieżkę dostępu do dokumentu z licencją...
- HTML5 / Responsywny obrazek <picture, source>
...z wysokim limitem danych, to i tak może się zdarzyć, że znajdą się akurat w miejscu o słabym zasięgu sieci. Wtedy wyświetlenie strony z ciężkimi zdjęciami może trwać bardzo długo. Rozwiązaniem tego problemu mogłoby być używanie nowoczesnych formatów zdjęć - np. WEBP lub JXR - które zapewniają lepszy stopień kompresji danych. Dzięki temu pliki w nich zapisane mogą być nawet kilkukrotnie lżejsze niż np. w tradycyjnym formacie JPG. Niestety starsze przeglądarki nie obsługują takich formatów...
- HTML dla zielonych / Wstawienie obrazka HTML <img src alt>
...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ść. 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...
- Szablon strony na DIV-ach / Stały szablon
...formą rozplanowania serwisów internetowych, ponieważ jest to szablon niezależny od rozdzielczości ekranu. Wszystkie elementy w jego obrębie (tekst, zdjęcia, elementy nawigacyjne itp.) zawsze pozostają ułożone dokładnie tak samo względem siebie. Inaczej mówiąc: jeśli np. w wybranym miejscu wstawimy zdjęcie oblane tekstem, to mamy pewność, że w każdej rozdzielczości ekranu efekt będzie taki sam, dzięki czemu unikniemy nieestetycznego ułożenia, gdy pod zdjęciem znalazłaby się tylko jedna linijka...
- Oprawa graficzna / Zamiennik obrazkowy
...pomocą CSS - obrazki. Można co prawda zmieniać rozmiary grafiki, dodawać obramowanie, ustalać pozycję i marginesy, ale nie da się wyświetlić innego zdjęcia bez modyfikacji kodu HTML. Jednak czy to stanowi jakiś problem? W pewnych sytuacjach tak: Przygotowując kilka alternatywnych arkuszy CSS, możesz udostępnić użytkownikom możliwość wyboru skórki, która najbardziej im odpowiada. Problem w tym, że w ten sposób nie uda Ci się podmienić statycznie wstawionych obrazków, tworzących szablon...