strony - Kurs HTML i CSS
Tryb Quirks / Tryb niecałkowitej zgodności ze standardamiTen rozdział dotyczy starszych przeglądarek i języka HTML 4.01. Jeśli tworzysz strony w HTML 5 na współczesne przeglądarki, nie musisz się tym przejmować. Interpretacja pewnych elementów wyglądu strony w Internet Explorerze 5 w dużym stopniu różniła się od obowiązujących standardów. Inne przeglądarki często się do tego dostosowywały. W Internet Explorerze 6 ta sytuacja uległa zmianie. Jednak, aby nie powodować poważnych błędów wyświetlania na starszych stronach WWW, które poprawnie wyświetlały...
Galeria zdjęć HTML / Klasyczna galeria zdjęć...się od wczytywania wszystkich dużych obrazków jednocześnie (użytkownik powiększa tylko te, które mu odpowiadają), a także zachowuje estetykę strony. Uwaga! Miniaturki grafik muszą być pomniejszone fizycznie, tzn. nie mogą to być oryginalne duże obrazki ze zmniejszonymi rozmiarami wyświetlania za pomocą atrybutów width="..." oraz height="...". Tylko wstawienie naprawdę pomniejszonych obrazków uchroni od niepotrzebnego wczytywania dużych plików. Zmniejszenia wymiarów obrazka można...
- Indeks, wyszukiwarka / Wyszukiwarka
...pomocne dla użytkowników może okazać się wstawienie formularza wyszukiwania na wszystkich stronach serwisu. Aby to zrobić, należy wstawić w nagłówku strony (<head>...</head>) odwołanie do pliku indeks.js: <script src="indeks.js"></script> Nie trzeba natomiast wstawiać odwołania do skryptu indeks_hasla.js, w którym znajduje się lista haseł. Następnie w wybranym miejscu strony wystarczy wkleić: <script> var indeks = new Indeks('indeks'); indeks.wstawWyszukiwarke('adres'); </script> Godne...
Formularze HTML / Wysłanie formularza bez programu pocztowego...tym, że część użytkowników w ogóle takiego programu nie posiada, ponieważ swoją pocztę odczytują za pomocą tzw. aplikacji webmail, czyli specjalnej strony WWW. Takie strony-aplikacje udostępniają wszystkie duże portale oferujące darmowe konta e-mail. Użytkownicy, którzy nie posiadają skonfigurowanego programu pocztowego, ponieważ np. korzystają z systemu webmail, nie będą w stanie wysłać formularza pocztowego. Jak się przed tym zabezpieczyć? W języku HTML ani nawet JavaScript nic nie da się...
- Wstawianie stylów CSS / Alternatywny arkusz stylów <link "alternate stylesheet">
...spowoduje dołączenie wszystkich takich arkuszy jednocześnie. Alternatywny arkusz stylów pozwala udostępnić użytkownikowi kilka wersji wyglądu strony do wyboru. Projektuje się wtedy kilka zewnętrznych arkuszy CSS, a następnie osadza w specjalny sposób, dzięki czemu w przeglądarce użytkownika pojawi się możliwość wyboru jednego spośród przygotowanych wyglądów. Jest to namacalny dowód potęgi języka CSS. Nie trzeba tworzyć, a potem aktualizować kilku wersji witryny, aby zapewnić...
- Rozmiary CSS / Przeciąganie {resize}
...zmienić rozmiaru elementu Zdarza się, że treść elementu nie mieści się w ustalonych dla niego wymiarach. Może to spowodować zaburzenie estetyki strony - np. kolumna menu może w takiej sytuacji opaść na dół (pod treść). Można się przed tym zabezpieczyć blokując przepełnienie elementu ("overflow: hidden"). Co jednak, jeśli czytelnik mimo wszystko będzie chciał zobaczyć przyciętą treść? Można mu to umożliwić, poprzez udostępnienie specjalnego uchwytu do przeciągania narożnika elementu...
- HTML5 / Stopka <footer>
...wstawienie znacznika FOOTER nawet na samym początku sekcji. A jeśli umieścimy stopkę w ogóle poza znacznikami sekcji, będzie się ona odnosić do strony jako całości. Przykład <footer> <article> <h1>Mój artykuł</h1> <p>To jest mój artykuł...</p> <footer> Autor: <address>Jan Kowalski (jan.kowalski@example.com)</address> <p>wszelkie prawa zastrzeżone</p> </footer> </article> Warto przy okazji zauważyć, że gdyby w informacjach o autorze nie podano danych kontaktowych (tutaj adresu...
- HTML5 / Artykuł <article>
...innego niż sam artykuł). Natomiast cała lista komentarzy nie pasuje do ewentualnego kanału RSS, ponieważ taki kanał sam stanowi już listę. Z drugiej strony widzimy, że grupuje ona na stronie ewidentnie powiązane ze sobą tematycznie elementy - komentarze do tego samego wpisu na blogu. Dlatego właśnie została ona oznaczona znacznikiem SECTION, a nie ARTICLE ani tym bardziej DIV. Pytania i odpowiedzi <article> Co to jest ARTICLE w HTML? Jest to znacznik tworzący wewnętrznie kompletną sekcję...
- HTML5 / Załącznik <figure, figcaption>
...możemy co najwyżej przenieść na inną podstronę, bo inaczej dokument utraciłby spójność. Przykład <figure> <p>Język HTML5 upraszcza deklarowanie strony kodowej dokumentu. Na <a href="#listing1">przykładzie 1</a> możemy się przekonać, jak to zrobić.</p> <figure id="listing1"> <pre><code> <meta charset="UTF-8"> </code></pre> </figure> <p>Krótszą formę ma również deklaracja typu dokumentu.</p> Warto zwrócić uwagę, że gdyby tekst akapitu był sformułowany w inny sposób, użycie...
- Tło CSS / Gradient liniowy {background: linear-gradient repeating-linear-gradient}
...z dołu do góry (odpowiednik 0deg) to right top - ukośnie z lewego-dolnego do prawego-górnego narożnika to right - poziomo z lewej do prawej strony (odpowiednik 90deg) to right bottom - ukośnie z lewego-górnego do prawego-dolnego narożnika to bottom - pionowo z górny do dołu (odpowiednik 180deg - domyślnie) to left bottom - ukośnie z prawego-górnego do lewego-dolnego narożnika to left - poziomo z prawej do lewej strony (odpowiednik 270deg) to left top - ukośnie z prawego-dolnego...