wstawienie obrazka - Kurs HTML i CSS
- HTML dla zielonych / Wstawienie obrazka HTML <img src alt>
...Poniżej znajdziesz przykłady poprawnych ścieżek dostępu, dla różnych struktur katalogów na dysku. We wszystkich przypadkach naszym zamiarem będzie wstawienie obrazka o nazwie plik.gif do dokumentu strona.html - drogę "przejścia" zaznaczono kolorem zielonym i strzałkami. Przy tworzeniu ścieżki zawsze "startujemy" od strona.html i zmierzamy do plik.gif. Plik index.html stanowi stronę główną, którą się teraz nie zajmujemy. Poprawnie: plik.gif Niepoprawnie: C:\www\plik.gif, plik.GIF, plik...
- Odsyłacze HTML / Odsyłacz obrazkowy <a href, img, map, area>
...można umieszczać nie tylko tekst, ale również inne znaczniki - m.in. odpowiadające za zmianę wyglądu tekstu (pogrubienie, pochylenie itd.), czy też wstawienie obrazka. Ważne jest jedynie, aby nie wstawiać tam elementów wyświetlanych w bloku, ponieważ jest to niedozwolone! Podstawowy odsyłacz obrazkowy <a href, img> <a href="adres"><img src="ścieżka dostępu do obrazka" alt="tekst alternatywny"></a> gdzie jako "ścieżka dostępu" należy podać lokalizację na dysku, gdzie znajduje się żądany...
- Tło CSS / Tło obrazkowe {background-image}
...selektor { background-image: url(ścieżka dostępu do obrazka 1), url(ścieżka dostępu do obrazka 2),... } Dzięki powyższej składni możliwe jest wstawienie pod jednym elementem wielu obrazków w tle. Będą ona ułożone jeden pod drugim - na wierzchu wyświetli się pierwsza z wymienionych grafik. Przykład {background-image} To jest akapit z tłem obrazkowym. Zwróć uwagę, że pod tłem pierwszoplanowym ułożony jest drugi obrazek... To jest akapit z tłem obrazkowym. Zwróć uwagę, że pod tłem...
- Galeria zdjęć HTML / Klasyczna galeria zdjęć
...tzn. nie mogą to być oryginalne duże obrazki ze zmniejszonymi rozmiarami wyświetlania za pomocą atrybutów width="..." oraz height="...". Tylko wstawienie naprawdę pomniejszonych obrazków uchroni od niepotrzebnego wczytywania dużych plików. Zmniejszenia wymiarów obrazka można dokonać praktycznie w każdym programie graficznym. Najczęściej ustala się takie same rozmiary dla wszystkich miniatur, ponieważ ułatwia to utrzymanie estetyki strony. Obrazki w galerii zwykle ustawia się w komórkach...
- HTML dla zielonych / Wyśrodkowanie obrazka HTML <div "center", img src alt>
...i odpowiedzi <div "center", img src alt> Jak wycentrować zdjęcie HTML? Najłatwiejszym sposobem umieszczenia obrazka na środku strony jest wstawienie go wewnątrz znacznika z ustawionym atrybutem o odpowiedniej wartości: <div style="text-align: center"><img src="obrazek.jpg" alt="Tu wpisz krótki opis obrazka"></div>. Jak wyśrodkować obraz i tekst HTML? W tym celu zarówno obrazek jak i tekst można umieścić wewnątrz znacznika z ustawionym atrybutem o odpowiedniej wartości: <div...
- 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...
- Oprawa graficzna / Zamiennik obrazkowy
...osób niewidomych, ale również dla robotów indeksujących wyszukiwarek internetowych, co niekorzystanie odbije się na popularności witryny. Poza tym wstawienie pustego elementu uniemożliwia przygotowanie skórki, która w tym miejscu nie będzie miała żadnej grafiki, a jedynie zwykły tekst. Lepszym rozwiązaniem będzie wstawianie normalnego tekstu, a następnie ukrycie go i zastąpienie tłem graficznym. Technika ta nazywana jest zamiennikiem obrazkowym (ang. image replacement) i jest powszechnie...
- Tło CSS / Atrybuty mieszane tła {background}
...tekst, obok którego znajduje się jakaś grafika (np. po lewej stronie). Nie trzeba w takim wypadku dodawać znacznika <img>, odpowiadającego za wstawienie rysunku, ale wystarczy np. zadeklarować odpowiednią klasę w zewnętrznym arkuszu stylów, a grafika zostanie dodana jako tło (bez powtarzania). Dodatkowo tekst będzie przesunięty w prawo, aby nie zasłaniał obrazka. Sposób taki ma tą zaletę, że w każdej chwili możemy usunąć obrazek lub zmienić jego pozycję, bez potrzeby modyfikacji każdej...
- CSS dla zielonych / Tapeta CSS {background-color, background-image, color}
...wzorkiem może mieć małe wymiary, dzięki czemu strona będzie się ładować szybciej. Kiedy mamy już przygotowaną grafikę pojedynczego kafelka tapety, wstawienie go w tle strony jest bardzo proste. Wystarczy w arkuszu stylów dodać następującą regułę stylów: body { background-color: kolor tła; background-image: url(ścieżka dostępu do obrazka); color: kolor tekstu; } W wyróżnionych miejscach należy wpisać odpowiednio: kolor tła Definicja koloru który wyświetli się w tle strony w...
- Wykaz skryptów / Pozostałe skrypty
...Automatyczny skorowidz tematyczny, pozwalający użytkownikowi błyskawicznie odszukać interesujący go temat. Ponadto sposób na wstawienie na stronę własnej wyszukiwarki. Rozwijane menu Rozwijane menu, zajmujące tylko jedną linijkę tekstu, z którego można wybierać strony do wczytania. Menu rozwijane/otwierane System wielopoziomowego menu z odsyłaczami które rozwijają lub otwierają się po kliknięciu albo wskazaniu myszką. Skrypt wyróżnia się bogatymi możliwościami...