zdjęcia - Kurs HTML i CSS
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...
- Odsyłacze HTML / Odsyłacz obrazkowy <a href, img, map, area>
...Dzięki niemu możemy stworzyć np. efektowne przyciski odsyłaczowe w menu strony. Obrazki przycisków najlepiej zapisywać w formacie GIF, 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. Tekst alternatywny (atrybut alt="..." dla znacznika <img>) może pojawić się w "dymku" narzędziowym po wskazaniu obrazka myszką (Microsoft Intetnet...
- 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...
- HTML dla zielonych / Gotowiec HTML
...szablonu Jednak nawet jeśli zdecydujesz się skorzystać z gotowego szablonu WWW, nadal zapewne będziesz chcieć wstawić na swojej stronie zdjęcia, odnośniki czy choćby pogrubić tekst albo poukładać go w osobne akapity bądź po prostu przenieść do nowej linii (w języku HTML klawisz Enter "nie działa"). Informacje jak to zrobić i wiele więcej są oczywiście zawarte w tym rozdziale. Darmowe szablony WWW (gotowce) do pobrania Gotowce w postaci darmowych szablonów WWW możesz pobrać w...
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...