zdjęcia - Kurs HTML i CSS
Nagłówek i treść HTML / Plik robots.txt...indeksowanie wszystkich zdjęć serwisu, ale jednocześnie zezwolić na indeksowanie samych dokumentów HTML? Najlepiej byłoby umieścić wszystkie zdjęcia w osobnym katalogu: User-Agent: * Disallow: /zdjecia/ Czasem jednak jest to niemożliwe. W takim przypadku pomocne są tzn. wzorce dopasowania, czyli znaki specjalne, które pozwalają dopasować ścieżki na podstawie ogólnych warunków. Googlebot rozpoznaje następujące znaki specjalne w ścieżkach dyrektyw Disallow oraz Allow: * - Zastępuję...
Odsyłacze HTML / Ćwiczenia...małe zdjęcie na dysku pod inną nazwą, ale z tym samym rozszerzeniem nazwy pliku (na przykład: moje-zdjecie-mini.jpg). Aby zapewnić dobrą jakość zdjęcia, zawsze pomniejszaj pełnowymiarową ilustrację, a nigdy nie powiększaj miniaturki. Podmień ilustracje na stronie na ich wersje pomniejszone. Następnie przekształć je w odsyłacze obrazkowe i podlinkuj do pełnowymiarowych wersji zdjęć. Użyj przy tym atrybutu target="_blank", który otworzy zdjęcie w nowym oknie (nowej karcie przeglądarki). Nie...
- Multimedia HTML / Obrazek HTML <img>
...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ść. Format BMP może nie być wcale lub jest bardzo słabo skompresowany, dlatego należy unikać jego stosowania! Nieodpowiedni dobór formatu graficznego może być przyczyną nawet kilkukrotnego zwiększenia rozmiaru pliku albo znacznego pogorszenia jakości obrazu...
- HTML5 / Leniwe ładowanie <iframe loading, img loading>
...załaduje wszystkie tego typu elementy - nawet znajdujące się na samym dole strony, które w tym momencie w ogóle nie są widoczne na ekranie. Jeśli zdjęcia lub widżety mają duży rozmiar, spowolni to wczytywanie całej strony. Dodatkowo może narazić na dodatkowe koszty użytkowników korzystających z połączenia mobilnego. Możemy tego uniknąć stosując atrybut loading="lazy". Pytania i odpowiedzi <iframe loading, img loading> Co to jest leniwe ładowanie w HTML? Leniwe ładowanie w HTML to...
Obramowanie CSS / Atrybuty mieszane zaokrąglenia obramowania {border-radius}...właściwości border-radius i określ promień zaokrąglenia. Przykład: <img src="obraz.jpg" style="border-radius: 50%" alt="Zdjęcie"> zaokrągli rogi zdjęcia na pół obrazu, tworząc efekt zaokrąglonego wycinka.
- Podcast HTML / #6 Multimedia HTML
...klatek, tym większy rozmiar pliku. JPG: przeznaczony dla zdjęć wielokolorowych. Nie obsługuje przezroczystości. PNG: pozwala zapisywać grafiki i zdjęcia z bardzo dobrą jakością. Obsługuje kompresję oraz pełną i półprzezroczystość. Należy unikać formatu BMP, który jest słabo skompresowany, co może kilkukrotnie zwiększyć rozmiar pliku. Multimedia znacząco zwiększają objętość strony, dlatego warto stosować kompresję. Osadzanie multimediów innych niż grafika Znacznik <embed> pozwala...
- Drukowanie CSS / Rozmiar papieru @page {size}
...strony w orientacji pionowej (tzw. portret). Taki układ zwykle najlepiej 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...
- CSS dla zielonych / Tapeta CSS {background-color, background-image, color}
...Tak wstawiona tapeta pozostanie nieruchoma przy przewijaniu strony, a przy tym wypełni całą powierzchnię strony z zachowaniem oryginalnych proporcji zdjęcia. Może być jednak przycięta po bokach albo na górze i na dole, jeśli nie będzie pasować do aktualnych proporcji wymiarów okna przeglądarki.
AutoIFRAME / Skrypt AutoIFRAME...można podać wartość dodatkowego wstępnego "marginesu" pionowego na końcu podstrony. Jest on szczególnie przydatny, jeśli na stronie znajdują się zdjęcia o niezdefiniowanych wymiarach za pomocą atrybutów width="..." oraz height="..." znacznika <img>. W takim przypadku margines ten należy dobrać na tyle duży, aby podczas doczytywania obrazów - a tym samym stopniowej zmiany wysokości treści - nie pojawił się pionowy suwak do przewijania ramki. Jest to tylko wartość wstępna (tymczasowa)...