obrazek - Kurs HTML i CSS
HTML dla zielonych / Jak zrobić dobrą stronę HTML...czytelności strony, dlatego należy pamiętać o doborze odpowiedniego koloru tekstu. Nie przesadzaj z grafiką. Fakt, że wiesz jak wstawić na stronę obrazek nie oznacza, że musi się od nich roić. Pamiętaj, że to właśnie grafika najbardziej wpływa na szybkość ładowania strony, dlatego ogranicz jej ilość oraz rozmiary. Jeśli już musisz coś umieścić, postaraj się, aby było to naprawdę dobrej jakości. Tworząc samodzielnie obrazy używaj antialiasingu, czyli wygładzania poszarpanych krawędzi. Cechą...
HTML dla zielonych / Ćwiczenia...pogrubienia. Dodaj do strony ilustracje. W przypadku zdjęć i grafik należy szczególnie pamiętać o poszanowaniu praw autorskich! Nie każdy obrazek można sobie swobodnie skopiować na swoją stronę, jeżeli autor nie wyraził na to zgody. Jeśli tworzysz stronę o sobie, może to być po prostu Twoje zdjęcie. Stwórz podstronę o nazwie linki.html (nowy plik HTML w edytorze) i umieść do niej odsyłacz na stronie głównej (czyli w pliku index.html). O tym co to są i jak się tworzy podstrony...
- Nagłówek i treść HTML / Ikona strony <link "shortcut icon">
(interpretuje: Internet Explorer, Firefox, Opera 7, Chrome) <head> <link rel="shortcut icon" href="ścieżka dostępu"> </head> gdzie jako "ścieżka dostępu" należy podać lokalizację, w której znajduje się plik ikony - np.: favicon.ico Polecenie to pozwala dodać ikonkę (favicon.ico), która będzie widoczna w przeglądarce przy adresie naszej strony. Typowy rozmiar ikony to 16x16 pikseli. W systemie Windows jest dodatkowa możliwość umieszczenia skrótu na pulpicie - wtedy przydatna może być ikona o...
- HTML5 / Dekodowanie obrazków <img decoding>
...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 obrazków. Pytania i odpowiedzi <img decoding> Co to znaczy "dekodowanie"? Dekodowanie odnosi się do procesu przekształcania danych z jednego formatu na inny, zrozumiały dla docelowego systemu lub aplikacji. W kontekście...
- Komendy HTML 4.01 / Wykaz elementów
...dokumentu I wymag/wymag w linii Tekst pochylony IFRAME wymag/wymag w linii Ramka lokalna (pływająca) IMG wymag/zabr Osadzony obrazek INPUT wymag/zabr w linii Kontrolka formularza INS wymag/wymag Wstawiony tekst ISINDEX wymag/zabr w bloku Jednoliniowe pole tekstowe KBD wymag/wymag w linii Tekst do wprowadzenia przez użytkownika LABEL wymag/wymag w linii Etykieta LEGEND wymag/wymag Legenda LI wymag/opcj Punkt listy LINK...
- HTML5 / Priorytet ładowania <img fetchpriority, link fetchpriority, script fetchpriority>
(interpretuje: Opera 87, Chrome 101) Obrazek: <img src="lokalizacja" fetchpriority="priorytet"> Zewnętrzny zasób: <link href="lokalizacja" fetchpriority="priorytet"> Zewnętrzny skrypt JavaScript: <script src="lokalizacja" fetchpriority="priorytet"></script> lokalizacja Ścieżka dostępu albo adres URL wskazujące na miejsce, skąd ma zostać załadowany zewnętrzny zasób priorytet Należy wybrać jedną z następujących wartości: high - wskazany zasób załaduje się wcześniej względem innych...
- HTML5 / Rozmiary przycisku obrazkowego <input "image" width height>
...specyfikacji HTML 4.01. Od teraz można już ustawiać rozmiary przycisku obrazkowego służącego do wysyłania formularza. Jeśli tego nie zrobimy, zanim obrazek się załaduje, przeglądarka zarezerwuje dla niego na stronie domyślną wolną przestrzeń. Zwykle nie będzie ona dokładnie odpowiadać rzeczywistym rozmiarom grafiki. Dlatego po załadowaniu obrazka, elementy strony w pobliżu i poniżej niego mogą przeskoczyć w dół lub na bok. Jeśli użytkownik dokładnie w tym czasie próbował kliknąć w coś na...
Selektory pseudoklas CSS / Łączenie selektorów...wskazaniu go myszką: img.przyklad_selektory3 { border: 5px solid black } a:hover img.przyklad_selektory3 { border: 5px solid red } Wskaż poniższy obrazek myszką: Inny ciekawy przykład - tym razem z automatycznym generowaniem zawartości: a.przyklad_selektory4:hover:after { content: "Rollover"; position: absolute; color: #000; background-color: #eee; font-size: 10px; border-width: 1px 2px 2px 1px; border-style: solid; border-color: #888; padding: 1px 5px } Jeśli wskażesz ten odsyłacz...
- Tekst CSS / Tryb pisania {writing-mode}
...poziomej. Jest to celowy zabieg, ponieważ jeśli chcemy, aby tekst w takich elementach był ułożony pionowo, możemy po prostu przygotować taki obrazek albo nadać taki tryb dla dokumentu HTML wyświetlanego wewnątrz ramki lokalnej. Inaczej sprawa się ma w przypadku elementów zastępowanych powiązanych z tekstem, które nie są ładowane z zewnętrznego pliku. W takiej sytuacji ułożenie tekstu w ich obrębie powinno być zgodne z ustalonym trybem pisania. To zachowanie nie jest jednak wymagane...
- Tło CSS / Przycinanie tła {background-clip}
...się tylko pod właściwą zawartością elementu Możliwe jest również określenie kilku wartości przycinania - kiedy wstawiamy w tle więcej niż jeden obrazek: selektor { background-clip: przycinanie obrazka 1, przycinanie obrazka 2,... } Przykład {background-clip} border-box padding-box content-box