rozmiar strony - Kurs HTML i CSS

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++)...
Szablon strony na DIV-ach / Stały szablon
Stały szablon (ang. fixed layout) charakteryzuje się odgórnie ustaloną szerokością w pikselach. Jeśli użytkownik zmieni rozdzielczość ekranu lub rozmiar okna przeglądarki, taki szablon będzie zajmował inną powierzchnię szerokości ekranu. Aby zapewnić komfortowe przeglądanie strony, szerokość szablonu nie powinna być szersza od najmniejszej przewidzianej rozdzielczości ekranu, z której mają korzystać czytelnicy serwisu - w przeciwnym razie w oknie przeglądarki pojawi się poziomy suwak 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">...
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...
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...
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...

« 1 2 3 4 5 »