rozmiar strony - Kurs HTML i CSS
Tabele CSS / Rozplanowanie tabeli {table-layout}...efektywny. Najpierw wyznaczane są tzw. minimalne i maksymalne możliwe szerokości poszczególnych kolumn. Minimalna możliwa szerokość to najmniejszy rozmiar, do którego można ścieśnić komórkę tak, aby jej zawartość mieściła się jeszcze w jej obrębie. Jeżeli w komórce znajduje się tylko obrazek lub inny element o ustalonych rozmiarach, to określa on minimalną możliwą szerokość takiej komórki. Natomiast w przypadku tekstu będzie to zwykle szerokość najdłuższego wyrazu (biorąc pod uwagę, że tekst...
Indeks, wyszukiwarka / Skrypt indeksu, wyszukiwarki...else this.ramka = ramka; this._szukaj = { html: '', haslo: '', i: 0 }; } Indeks.prototype.wstaw = function(hasla, adres_bazowy, rozmiar, sortuj) { if (typeof sortuj != 'undefined' && sortuj) { hasla.sort( function(a, b) { if (a[0] == b[0]) return 0; return a[0].compare() < b[0].compare() ? -1 : 1; } ); } if (typeof sortuj != 'undefined' && sortuj < 0) { document.write("<pre>"); for (var i = 0; i < hasla.length; i++)...
Podcast HTML / #1 HTML dla zielonych...tekst</s> Indeks górny: x<sup>2</sup> (np. x2) Indeks dolny: H<sub>2</sub>O (np. H2O) Zmiana stylu czcionki (znacznik <span>) Do zmiany stylu (rozmiar, kolor, rodzaj) fragmentu tekstu używa się znacznika <span> z atrybutem style. Wartości atrybutów dla tego samego znacznika można łączyć, rozdzielając je średnikami. Rozmiar: <span style="font-size: large">Tu wpisz tekst</span> Kolor: <span style="color: red">Tu wpisz tekst</span> (np. na czerwony) Rodzaj czcionki: <span...
- Podcast HTML / #6 Multimedia HTML
...i height: określają szerokość i wysokość obrazka w pikselach ("x") lub w procentach ekranu ("x%"). Jest to dobry nawyk, ponieważ jeśli nie wstawimy rozmiarów, treść może się "rozjeżdżać" podczas wczytywania. Formaty graficzne Obrazki powinny być zapisane w jednym z trzech zalecanych formatów: GIF: używany dla rysunków składających się z mniej niż 256 kolorów (np. przyciski menu). Obsługuje przezroczystość. Animowane bannery to specjalne pliki GIF, ale pamiętajmy, że im więcej klatek, tym...
- Media CSS / Zapytania mediów
...wyższą rozdzielczość ekranu, możemy wyświetlić mu dodatkową kolumnę treści. Co więcej, można płynnie dopasowywać wygląd strony przy przeciąganiu rozmiaru okna przeglądarki przez użytkownika. Zapytania mediów wpisuje się dokładnie w tych samych miejscach, co przy tradycyjnym wyborze medium, np.: @import url(kolor.css) screen and (color); @media screen and (color) { /* Arkusz dla urządzeń z kolorowym ekranem */ } <link rel="stylesheet" media="screen and (color)" href="kolor.css">...
- Oprawa graficzna / "Duszki" CSS
...aby czekać nawet kilka minut, na załadowanie od razu wszystkich pełnowymiarowych zdjęć. Formaty graficzne Kluczowe znaczenie dla zmniejszenia rozmiaru plików zdjęć, a zatem równocześnie przyspieszenie wczytywania strony, ma dobranie odpowiedniego formatu oraz stopnia kompresji. Popularne formaty internetowe oferują wbudowane algorytmy kompresji danych. W przypadku kompresji bezstratnej nie ma żadnej utraty jakości na wynikowej grafice. Kompresja stratna co prawa powoduje utratę jakości...
- Widżety HTML / Ramki lokalne <iframe>
...przeglądarkach, które nie obsługują ramek lokalnych. Ramki lokalne są umieszczane bezpośrednio na stronie w postaci pojedynczych okienek o różnych rozmiarach. Dzięki temu możemy do takiej ramki wczytywać inne dokumenty [zobacz: Wstęp]. Jeśli nie określimy koloru tła dokumentu wczytywanego do ramki lokalnej, przeglądarka może przyjąć dla niego kolor tła strony, na której wstawiona jest ramka. Pomiędzy znacznikiem otwierającym <iframe...> a zamykającym </iframe> można umieścić dowolny kod...
- Rozmiary CSS / Szerokość i marginesy automatyczne
...szerokość jest obliczana poprzez próbę przełamania wierszy w każdym możliwym miejscu, czyli po każdym wyrazie. Dostępna szerokość to poziomy rozmiar bloku obejmującego pomniejszony o marginesy, obramowanie, marginesy wewnętrzne i ewentualne paski przewijania elementu. Preferowana szerokość jest obliczana bez przełamywania wierszy, chyba że w kodzie znajduje się element <br>. Z powyższego równania wynika w szczególności, że dwa bloki z oblewaniem, bez ustalonej szerokości lub z...
- HTML5 / Leniwe ładowanie <iframe loading, img loading>
...elementy - nawet znajdujące się na samym dole strony, które w tym momencie w ogóle nie są widoczne na ekranie. Jeśli zdjęcia lub widżety mają duży rozmiar, spowolni to wczytywanie całej strony. Dodatkowo może narazić na dodatkowe koszty użytkowników korzystających z połączenia mobilnego. Możemy tego uniknąć stosując atrybut loading="lazy". Pytania i odpowiedzi <iframe loading, img loading> Co to jest leniwe ładowanie w HTML? Leniwe ładowanie w HTML to technika optymalizacji wydajności...
- Multimedia HTML / Uniwersalny sposób odtwarzania plików <a "jpg, avi, wav, txt, doc, rtf, xls, pdf", object>
...zaletę, że skojarzony z nim plik będzie odtwarzany bezpośrednio na stronie. Niestety jest to również jego wadą. Pliki multimedialne mają zwykle duże rozmiary, dlatego wczytywanie takiej strony może trwać potwornie długo. Poza tym polecenie <embed> nie zawsze działa poprawnie, szczególnie jeśli chodzi o jego atrybuty dodatkowe. Odsyłacz do pliku <a "jpg, avi, wav, txt, doc, rtf, xls, pdf"> Najbardziej uniwersalną metodą odtwarzania plików multimedialnych, która działa w każdej przeglądarce...