obraz - Kurs HTML i CSS
Aktualizacja / System newsów...Wystarczy spojrzeć i już można szybko przenieść się do nowych stron, klikając odpowiednie odsyłacze. Wymagana wiedza: Odsyłacze Wstawianie obrazków Podstawy stylów CSS (m.in. arkusze stylów) Aby wprowadzić system newsów, należy skopiować poniższy kod i zapisać go w pliku z rozszerzeniem *.css - np. news.css: /* Tytuł: */ .news dt { font-size: 14px; /* rozmiar czcionki */ text-align: left; /* wyrównanie tekstu: left, right, center, justify */ padding: 5px; /* margines...
Pozycjonowanie CSS / Ustawienie {float, vertical-align}...danego elementu względem elementów, które z nim sąsiadują. Dzięki temu możemy ustalić sposób "oblewania" tekstem elementu pływającego (np. obrazka). Przykład {float} float: left... float: left... float: left... float: left... float: left...float: left... float: left... float: left... float: left... float: left...float: left... float: left... float: left... float: left... float: left...float: left... float: left... float: left... float: left... float: left...float: left... float...
- Media CSS / Zapytania mediów
...Zapytania mediów Kompatybilność wstecz Cechy mediów Szerokość Wysokość Szerokość urządzenia Wysokość urządzenia Orientacja Proporcje obrazu Proporcje obrazu urządzenia Głębia koloru Paleta kolorów Urządzenia monochromatyczne Rozdzielczość Technika wyświetlania Siatka Zapytania mediów (CSS 3 - interpretuje Internet Explorer 9, Firefox, Opera, Chrome) W dobie rozkwitu różnorakich urządzeń mobilnych, proste przygotowanie osobnych arkuszy CSS dla każdego medium może...
HTML5 / Filmy i dźwięk <video, audio, source>...w którym został zapisany plik. Szczególnie dla formatów wideo powinno się dodatkowo podać nazwę kodeków, za pomocą których został skonwertowany obraz i dźwięk (zobacz przykłady poniżej: Kodeki MP4, Kodeki OGG/OGV). Różnica pomiędzy odtwarzaczem wideo a audio jest tylko taka, że ten drugi nie udostępnia okna do wyświetlania obrazu. W odtwarzaczu wideo swobodnie można odgrywać również samą muzykę. Może to być przydatne np. aby wraz z dźwiękiem wyświetlić dodatkowe napisy zsynchronizowane...
- 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...
- HTML5 / Dekodowanie obrazków <img decoding>
...dekodowanie Jedna z następujących wartości: sync - przeglądarka powinna wstrzymać przetwarzanie reszty strony, dopóki nie wyświetli obrazka. async - przeglądarka może wyświetlać pozostałe elementy strony w trakcie przetwarzania obrazka. auto - wartość domyślna (zależy od przeglądarki) Podpowiada przeglądarce, w jaki sposób najlepiej wyświetlić dany obrazek. Nadanie atrybutu decoding="sync" może spowolnić wyświetlanie całej strony - zwłaszcza w przypadku dużych...
- Typy MIME / Multipurpose Internet Mail Extensions
...określa nazwę programu, dla którego są przeznaczone dane) audio Dane audio (podtyp określa format audio) image Jeden lub więcej indywidualnych obrazów (podtyp określa format obrazu) text Materiały mające głównie formę tekstową video Zmienny w czasie obraz, możliwe że z dźwiękiem Podtypy mediów Każdy typ mediów definiuje określone podtypy, które może przyjmować. Drzewa rejestracji Nazwa podtypu może się rozpoczynać specjalnym przedrostkiem, który określa jego rodzaj (drzewo)...
- Multimedia HTML / Obrazek HTML <img>
...<img src="ścieżka dostępu" alt="Tekst alternatywny"> gdzie jako "ścieżka dostępu" należy podać lokalizację na dysku, gdzie znajduje się żądany obrazek. Natomiast w miejsce "Tekst alternatywny" wpisuje się krótką informację, która pojawi się w przypadku, kiedy obrazek nie zostanie wyświetlony (np. jeśli użytkownik wyłączy wyświetlanie grafiki w swojej przeglądarce internetowej). Informacja alternatywna jest przydatna w przeglądarkach, które nie wyświetlają grafiki lub kiedy użytkownik...
- Obramowanie CSS / Atrybuty mieszane obramowania {border}
...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.
- Obramowanie CSS / Atrybuty mieszane zaokrąglenia obramowania {border-radius}
...rogi w zdjęciu? Aby zaokrąglić rogi w zdjęciu (<img>) w CSS, użyj 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.