zdjęcia - Kurs HTML i CSS
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...
- Tło CSS / Tło obrazkowe {background-image}
...i podać ścieżkę dostępu do obrazka jako wartość. Na przykład: "background-image: url('sciezka/do/obrazka.jpg')". Jak dodać tło do zdjęcia? Aby dodać tło do zdjęcia z elementami przezroczystymi w CSS, można jednocześnie użyć właściwości background-image do ustawienia obrazka jako tła oraz background-color do określenia koloru tła. Na przykład, jeśli obrazek ma format GIF lub PNG z elementami przezroczystymi i chcesz dodać kolor tła, możesz użyć: "background-image...
- Obramowanie CSS / Atrybuty mieszane obramowania {border}
...2px solid black">...</div> tworzy czarną ramkę o grubości 2 pikseli wokół elementu. Zobacz również: Ramki z tekstem. Jak zrobić ramkę wokół zdjęcia CSS? Aby stworzyć ramkę wokół zdjęcia (<img>) w CSS, można użyć właściwości border i określić grubość, styl i kolor obramowania. Na przykład: <img src="obraz.jpg" style="border: 2px solid black" alt="Zdjęcie"> tworzy czarną ramkę o grubości 2 pikseli wokół obrazka.
Galeria zdjęć HTML / Klasyczna galeria zdjęć...nowych przeglądarek potrafi automatycznie otworzyć obrazek w nowym oknie, jednaki nie będzie wtedy możliwości szybkiej nawigacji pomiędzy kolejnymi zdjęciami z galerii. Natomiast starsze przeglądarki po kliknieciu przez użytkownika takiego linka często najpierw wyświetlały okienko z pytaniem co zrobić z obrazkiem, tzn. otworzyć czy zapisać, a po wybraniu pierwszej opcji, następowało wczytanie pliku w zewnętrznym programie (jeśli użytkownik miał taki zainstalowany), co mogło potrwać kilka...
HTML dla zielonych / Wyśrodkowanie obrazka HTML <div "center", img src alt>...atrybutem o odpowiedniej wartości: <div style="text-align: center"><img src="obrazek.jpg" alt="Tu wpisz krótki opis obrazka"><br> Tu wpisz podpis zdjęcia</div>. Pomiędzy obrazkiem a tekstem dobrze jest umieścić znacznik końca linii. W przeciwnym razie jeśli zdjęcie będzie za wąskie, pierwsza linijka tekstu może się wyświetlić obok obrazka, a nie pod nim.
- Nagłówek i treść HTML / Roboty <meta "robots, googlebot">
...strony docelowej? Aby uniknąć takich sytuacji, użyj dyrektywy "max-video-preview:0". Z drugiej strony być może właśnie możliwość otworzenia podglądu zdjęcia w trybie pełnoekranowym zachęci użytkownika do poznania innych naszych prac? Jeśli tak uważasz, użyj dyrektywy: "max-image-preview:large". Aby połączyć dyrektywy standardowe z niestandardowymi, nie należy wpisywać kilku osobnych znaczników <meta name="robots">, ale podać pełną listę po przecinku, np.: <meta name="robots...
- Czcionki CSS / Wielkość czcionki {font-size}
...im wymiary przy użyciu jednostek "em", ale może to wywołać konieczność ich przeskalowania przez przeglądarkę, co zawsze skutkuje utratą jakości zdjęcia - nawet przy pomniejszaniu. Wartości pikselowe zupełnie nie nadają się do ustalania czcionki w arkuszu dla wydruku. Jednostka "pt" Jednostka "pt" (punkty) miała być dobrym kompromisem między trudnymi do przewidzenia konsekwencjami używania "em" a sztywnym blokowaniem rozmiaru za pomocą "px". Jeśli z komputera korzysta osoba słabowidząca...
- Oprawa graficzna / "Duszki" CSS
...nie zawsze znaczy lepiej. Tworząc galerię zdjęć zadbaj, aby miniatury były fizycznie pomniejszonymi grafikami, a nie tymi samymi plikami co duże zdjęcia, a jedynie zmniejszone za pomocą atrybutów HTML lub CSS. Weź pod uwagę, że użytkownik niekoniecznie będzie chciał obejrzeć powiększenia wszystkich zdjęć z galerii, a nawet jeśli, raczej nie będzie tak cierpliwy, aby czekać nawet kilka minut, na załadowanie od razu wszystkich pełnowymiarowych zdjęć. Formaty graficzne Kluczowe znaczenie...
- Odsyłacze HTML / Odsyłacz obrazkowy <a href, img>
...niemu możemy stworzyć np. efektowne przyciski odsyłaczowe w menu strony. Obrazki przycisków najlepiej zapisywać w formacie GIF bądź PNG, a większe zdjęcia - JPG. Jeśli nie masz zacięcia artystycznego, nie musisz samodzielnie rysować wszystkich grafik. W Internecie na pewno znajdziesz wiele stron, gdzie możesz darmowo pobrać gotowe przyciski. Darmowe ikony graficzne do pobrania, które możesz wykorzystać przy tworzeniu odsyłaczy obrazkowych, znajdziesz w rozdziale: Ikony (symbole). Jeśli...
- 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.