wstawianie strony - Kurs HTML i CSS
Dobre praktyki / Przykazania webmastera...elementów ani atrybutów zdeprecjonowanych Unikaj stosowania ramek - zarówno tradycyjnych jak i lokalnych Nie stosuj tabelek do budowania układu strony Nawigacja musi być intuicyjna i wygodna Unikaj używania atrybutu target="..." dla odsyłaczy Nie używaj znaczników img do wstawiania grafiki tworzącej oprawę graficzną strony Zawsze wypełniaj atrybut alt="..." dla ilustracji Zapisuj ilustracje we właściwych formatach graficznych Stosuj fizycznie pomniejszone miniatury zdjęć Strona...
- Oprawa graficzna / Zamiennik obrazkowy
...połączeń np. w przypadku telefonii komórkowej, może być sporym obciążeniem finansowym, a już na pewno znacząco wydłuży ładowanie strony. Statyczne wstawianie obrazków, tworzących oprawę graficzną, jest niepoprawne semantycznie. Każdy znacznik IMG obowiązkowo musi posiadać atrybut alt="...", który jest przydatny np. dla osób niewidomych. Jednak w takim przypadku będzie on kompletnie pozbawiony sensu, ponieważ nie ułatwia, tylko utrudnia odbiór treści. Syntezator mowy, używany przez osobę...
- Tło CSS / Usunięcie tła {background: none, background-color: transparent}
...zwykłe tło, a jednocześnie na innych pozostawić nadal obrazkowe, może to uczynić na dwa sposoby: Nie dołączać zewnętrznego arkusza do wybranej strony. Takie rozwiązanie nie jest jednak zbyt dobre, ponieważ musimy ręcznie wpisywać wszystkie inne deklaracje, które znajdują się w arkuszu (np. kolor tekstu na stronach), pomijając przy tym tą, która odpowiada za tło. Chociaż początkowo osiągniemy żądany efekt, jednak przy każdej modyfikacji szaty graficznej serwisu, będziemy zmuszeni...
Menu rozwijane, otwierane, wysuwane / Wygląd menu rozwijanego, otwieranego, wysuwanego...Akapit Tekst pogrubiony Tekst pochylony Tekst podkreślony Wielkość czcionki Kolor czcionki Rodzaj czcionki Nagłówek i treść Tytuł strony Deklaracja strony kodowej Opis zawartości strony Wyrazy kluczowe Język strony Tekst Akapit Tytuł Blok Koniec linii Pogrubienie CSS Czcionki Tekst Tło Marginesy Obramowanie Wykazy Rozmiary new Menu('menu8', 'menu8', true, false, 0, 0, -1, -1, true); należy użyć kodu HTML: <dl id="menu0"> <dt>Kurs</dt>...
- Selektory specjalne CSS / Klasy selektorów <... class>
...elementów - umieścisz w zewnętrznym arkuszu stylów, tym szybciej przebiegnie późniejsza ewentualna modyfikacja stron! Dobrym pomysłem jest również wstawianie komentarza przed każdą deklaracją klasy w arkuszu (znaki: /* ... */), w którym opisuje się jej przeznaczenie. Po jakimś czasie w Twoim arkuszu stylów może znaleźć się tyle klas, że zapomnisz, do jakich elementów się one odnosiły. Wtedy właśnie bardzo przydatny może się okazać wpisany wcześniej komentarz. Przykład <... class> Jeżeli w...
- Drukowanie CSS / Linijki na stronie {widows, orphans}
(interpretuje: Internet Explorer 8.0, Opera, Chrome) Na górze strony: selektor { widows: liczba } Na dole strony: selektor { orphans: liczba } Selektorem może być znacznik wyświetlany w bloku [zobacz: Wstawianie stylów]. Natomiast jako "liczba" należy podać minimalną ilość linijek akapitu, które muszą znaleźć się odpowiednio: na górze lub na dole strony. Powyższe polecenia nie blokują przełamania strony ani go nie wywołują. Mogą być jednak przydatne ze względów estetycznych. Na przykład...
- Pozycjonowanie CSS / Pozycja statyczna {position: static}
...Jest to przydatne np. w celu usunięcia ogólnej deklaracji pozycjonowania, umieszczonej w arkuszu stylów. Wystarczy wtedy, dla wybranych elementów strony, umieścić powyższe polecenie w stylu inline. Spowoduje to usunięcie pozycjonowania dla tych elementów, a jednocześnie utrzymanie dla innych (tego samego typu). Przykład {position: static} Gdyby w arkuszu stylów tej strony [zobacz: Wstawianie stylów], została umieszczona taka linijka: h1 { position: relative; left: 50% } to teraz wszystkie...
Multimedia HTML / Obrazek HTML <img>...nie wczytają się (nawet jeśli na Twoim komputerze wszystko jest w porządku)! Edytory HTML posiadają często specjalny generator, który wspomaga wstawianie multimediów na strony WWW (nie tylko obrazków). Należy jednak pamiętać, że multimedia bardzo wyraźnie zwiększają objętość strony, a co za tym idzie, wydłużają czas wczytywania. Większość bardziej zaawansowanych programów graficznych udostępnia funkcję kompresji obrazów, co pozwala zmniejszyć ich objętość bez wyraźnego spadku jakości...
- Tło CSS / Zaczepienie tła obrazkowego {background-attachment}
...elementu (jeśli posiada on suwaki), ale przewijane względem okna przeglądarki (CSS 3) [Zobacz także: Wstawianie stylów] Normalnie jeśli tłem strony jest grafika, przesuwa się ona razem z tekstem, w miarę przewijania treści okna za pomocą suwaka. Możemy jednak sprawić, że tło będzie przez cały czas nieruchome, nawet jeśli będziemy przewijali zawartość strony. Wtedy w wewnętrznym arkuszu stylów strony należy użyć polecenia: body { background-image: url(obrazek.jpg)...
- CSS dla zielonych / Wstawienie arkusza stylów CSS <link "stylesheet">
W zasadzie aby rozpocząć przygodę z językiem CSS, wystarczy wstawić w nagłówku strony - tzn. w dowolnym miejscu pomiędzy znacznikami <head> oraz </head> - jedną dodatkową linijkę: <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="description" content="Tu wpisz opis zawartości strony"> <title>Tu wpisz tytuł strony</title> <link rel="stylesheet" href="style.css"> </head> <body> Tu wpisuje się treść strony </body> </html> Dzięki znacznikowi <link> do dokumentu zostanie...