obrazka - Kurs HTML i CSS
HTML dla zielonych / Wstawienie obrazka HTML <img src alt><img src="Tu podaj względną ścieżkę dostępu do obrazka" alt="Tu podaj tekst alternatywny"> Zamiast tekstu: "Tu podaj względną ścieżkę dostępu do obrazka", należy podać miejsce na dysku, gdzie znajduje się nasz obrazek, który chcemy umieścić na stronie. Jeżeli obrazek znajduje się w tym samym katalogu co strona, na której chcemy go wstawić, wystarczy wpisać tutaj samą nazwę pliku obrazka, nie zapominając przy tym o podaniu rozszerzenia (".jpg" lub ".gif"). Natomiast w miejsce "Tu podaj tekst...
- HTML dla zielonych / Wyśrodkowanie obrazka HTML <div "center", img src alt>
<div style="text-align: center"><img src="Tu podaj względną ścieżkę dostępu do obrazka" alt="Tu podaj tekst alternatywny"></div> gdzie zamiast: "Tu podaj względną ścieżkę dostępu do obrazka" należy podać lokalizację na dysku, gdzie znajduje się żądany obrazek, a w miejsce "Tu podaj tekst alternatywny" wpisuje się krótką informację, która pojawi się w przypadku, kiedy obrazek nie zostanie wyświetlony. Polecenie pozwala wyśrodkować obrazek, czyli ustawić go na środku ekranu. Dla...
- HTML dla zielonych / Ustawienie obrazka HTML <img src alt "float">
<img src="Tu podaj względną ścieżkę dostępu do obrazka" alt="Tu podaj tekst alternatywny" style="float: ustawienie"> gdzie zamiast: "Tu podaj względną ścieżkę dostępu do obrazka" należy podać lokalizację na dysku, gdzie znajduje się żądany obrazek, a w miejsce "Tu podaj tekst alternatywny" wpisuje się krótką informację, która pojawi się w przypadku, kiedy obrazek nie zostanie wyświetlony. Natomiast jako: "ustawienie" należy wpisać: left Obrazek będzie ustawiony po lewej stronie względem...
Komendy CSS3 / Maskowanie CSS...Zastosowanie wszystkie elementy Dziedziczenie nie Procenty zobacz cechy indywidualne Media visual mask-border Atrybuty mieszane maski obrazka obramowania Wartość <'mask-border-source'> || <'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]? || <'mask-border-repeat'> || <'mask-border-mode'> Inicjalizacja zobacz cechy indywidualne Zastosowanie zobacz cechy indywidualne Dziedziczenie nie Procenty nie Media visual mask-border-mode Tryb maski...
- Odsyłacze HTML / Mapa odsyłaczy <img usemap, map, area>
...map, area> Mapa odsyłaczy <img usemap, map, area> Nakładanie obszarów Mapa odsyłaczy <img usemap, map, area> <img src="ścieżka dostępu do obrazka" alt="tekst alternatywny" usemap="#nazwa_mapy"> <map id="nazwa_mapy" name="nazwa_mapy"> <area shape="kształt" coords="współrzędne" href="adres" alt="tekst alternatywny"> <area shape="kształt" coords="współrzędne" href="adres" alt="tekst alternatywny"> (...) </map> ścieżka dostępu do obrazka Lokalizacja na dysku, gdzie znajduje się...
- Tło CSS / Tło obrazkowe {background-image}
...Tło obrazkowe {background-image} (interpretuje Internet Explorer 6, Firefox, Opera, Chrome) selektor { background-image: url(ścieżka dostępu do obrazka) } Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Natomiast jako "ścieżka dostępu do obrazka" należy podać miejsce, gdzie znajduje się obrazek, który chcemy wstawić jako tło. Wpisanie "none" usunie obrazek. Ścieżkę dostępu należy konstruować względem...
Aktualizacja / Nowość...nowości, poprzez umieszczenie w spisie treści (bezpośrednio obok danej pozycji) albo obok daty aktualizacji (na każdej ze stron) specjalnego obrazka lub napisu, wskazującego, że pozycja ta została ostatnio zaktualizowana. W ten sposób użytkownik już podczas przeglądania spisu treści odnajdzie wszystkie nowości. Zaletą użycia skryptu jest to, że nie musimy pamiętać o usunięciu obrazka (napisu) nowości, ponieważ po nadejściu podanego dnia (i godziny), obrazek sam zniknie z ekranu. Potem...
- Galeria zdjęć HTML / Klasyczna galeria zdjęć
...ona tworzona w ten sposób, że na głównej stronie umieszcza się pomniejszone kopie obrazków oraz odsyłacze, po kliknięciu których następuje wczytanie obrazka w pełnych rozmiarach. Pozwala to uchronić się od wczytywania wszystkich dużych obrazków jednocześnie (użytkownik powiększa tylko te, które mu odpowiadają), a także zachowuje estetykę strony. Uwaga! Miniaturki grafik muszą być pomniejszone fizycznie, tzn. nie mogą to być oryginalne duże obrazki ze zmniejszonymi rozmiarami wyświetlania za...
- Odsyłacze HTML / Odsyłacz obrazkowy <a href, img>
<a href="adres"><img src="ścieżka dostępu do obrazka" alt="tekst alternatywny"></a> adres Wartość tworzona analogicznie jak w przypadku odsyłaczy do: podstrony, etykiety, adresu internetowego, poczty e-mail czy dowolnych innych odsyłaczy (w zależności od wybranego typu odsyłacza). ścieżka dostępu do obrazka Lokalizacja na dysku, gdzie znajduje się żądany plik obrazka. tekst alternatywny Informacja prezentowana, jeśli obrazek nie zostanie wyświetlony. Do tej pory w tym rozdziale...
- HTML5 / Responsywny obrazek <picture, source>
...source type> Dopasowanie kadru <picture, source media> Wstęp (interpretuje: Firefox 38, Opera 25, Chrome 38) Znamy już sposób wstawienia obrazka na stronę za pomocą znacznika IMG. 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...