stronie - Kurs HTML i CSS
Menu rozwijane, otwierane, wysuwane / Skrypt menu rozwijanego, otwieranego, wysuwanego...dalej w tym rozdziale). Wszystkie czasy są podane w milisekundach (1 s = 1000 ms). Wartości te zostaną przypisane wszystkim takim blokom menu na stronie, dla których nie określimy inaczej. Następnie na stronie, gdzie ma być umieszczone menu, należy w nagłówku dokumentu (wewnątrz <head>...</head>) wstawić: <script src="menu.js"></script> W wyróżnionym miejscu oczywiście należy podać lokalizację utworzonego wcześniej pliku menu.js. Dalej trzeba na stronie w wybranym miejscu osadzić blok...
Szablon strony na DIV-ach / Płynny szablon...ustalonej szerokości, dlatego jego rozszerzanie mogłoby być niewskazane. Ustalenie oblewania (float: left) powoduje, że kolumna ustawia się po lewej stronie następnego bloku. Deklaracja pozycjonowania relatywnego (position: relative) została dodana tylko ze względu na możliwy błąd w bardzo starych przeglądarkach, który objawiał się znikaniem z ekranu oblewanego bloku menu nawigacyjnego. Dla bloku treści strony tym razem nie ustalamy własności oblewania ani szerokości, dzięki czemu w miarę...
- Oprawa graficzna / Zamiennik obrazkowy
...element blokowy można, a nawet należy, opatrzyć klasą lub identyfikatorem, aby nie naruszyć sposobu wyświetlania innych bloków na tej samej stronie. Wady: Konieczny dodatkowy element (SPAN) Syntezatory mowy nie odczytują zastąpionego tekstu Po wyłączeniu wyświetlania grafiki, w przeglądarce nie widać tekstu ani obrazka Przykład Tak wygląda czysty kod HTML bez zamiennika obrazkowego: Zamiennik obrazkowy a w ten sposób już z podstawioną grafiką (zwróć uwagę, że ponad obrazkiem...
- Wykazy CSS / Niestandardowy typ stylu wykazu @counter-style
...algorytm; cecha: wartość; } Typ określa nazwę, którą potem będziemy się posługiwać przypisując tak zdefiniowany typ stylu do wybranych wykazów na stronie - np.: ol { list-style-type: typ; } Warto pamiętać, że jeśli chcemy przypisać tak utworzony typ stylu do wielu wykazów na stronie, wystarczy zdefiniować go tylko raz (pierwsze polecenie powyżej), a następnie można przypisywać go dowolną liczbę razy (drugie polecenie). Nazwa typu stylu nie może kolidować ze słowami kluczowymi używanymi...
Nagłówek i treść HTML / Deklaracja strony kodowej <meta charset>...<meta charset="utf-8"> </head> Polecenie jest deklaracją strony kodowej, czyli sposobu w jaki będą zapisane w formie cyfrowej znaki na naszej stronie WWW. Więcej na ten temat możesz dowiedzieć się w rozdziale pt.: Strony kodowe. UWAGA! Absolutnie nie należy pomijać tego wpisu i powinna to być koniecznie deklaracja kodowania UTF, a nie WINDOWS, gdyż wtedy mogą wystąpić problemy z wyświetlaniem polskich znaków (nawet jeśli na Twoim komputerze wszystko jest w porządku)! Pytania i...
- Nagłówek i treść HTML / Język strony <html lang, link hreflang>
...wersji językowej wskazujący na aktualny dokument. Przykład <link hreflang> Poniższy kod powinien się znaleźć w nagłówku dokumentu zarówno na stronie https://www.example.com/pl/index.html jak i https://www.example.com/en/index.html: <link rel="alternate" hreflang="pl" href="https://www.example.com/pl/index.html"> <link rel="alternate" hreflang="en" href="https://www.example.com/en/index.html"> Wszystkie wersje językowe muszą wskazywać na siebie nawzajem. W przeciwnym razie powiązania...
- Odsyłacze HTML / Odsyłacz pocztowy <a "mailto">
...do mnie. Tylko proszę, jeśli nie masz nic konkretnego do napisania, nie przysyłaj mi pustych listów 😉 Pamiętaj, że podanie swojego adresu na stronie WWW, może spowodować, że zaczną do Ciebie przychodzić niechciane wiadomości - reklamówki (tzw. spam). Dobrym pomysłem może być założenie sobie darmowego konta pocztowego w dowolnym portalu internetowym i podanie adresu takiego konta na swojej stronie - darmowe konto zawsze można zmienić. Zakładając stronę WWW na darmowym serwerze, często...
- Multimedia HTML / Obrazek HTML <img>
...warto się tym zainteresować. Przed wstawieniem obrazka radzę zastanowić się, czy jest on absolutnie konieczny. Jeżeli chcesz umieścić na swojej stronie grafikę o znacznych rozmiarach, zawsze staraj się wcześniej pokazać miniaturkę, aby użytkownik mógł ocenić, czy chce czekać na załadowanie pełnowymiarowego obrazu (można to zrobić np. za pomocą galerii zdjęć). Przy przeglądaniu większej liczby dużych obrazków, pomocne mogą okazać się galeria lub przeglądarka zdjęć. Dla zainteresowanych...
- Widżety HTML / Wczytywanie strony do ramki lokalnej <a target>
...i target="_parent" działają bardzo podobnie. Różnice można zauważyć dopiero w przypadku większej liczby zagnieżdżonych ramek - np. strona w stronie w stronie. Załóżmy, że mamy plik "index.html", w którym umieszczamy taką ramkę: <iframe src="ramka1.html"></iframe> Jak widać, spowoduje to osadzenie na stronie ramki i załadowanie do niej dokumentu "ramka1.html". Załóżmy teraz, że w pliku "ramka1.html" znajduje się m.in. taki kod: <iframe src="ramka2.html"></iframe> Tutaj znowu...
- Formularze HTML / Hasło <input "password">
...(disabled). Strona na hasło Wykorzystując pole typu "password" można w prosty sposób zabezpieczyć wybraną stronę hasłem. W tym celu wystarczy na stronie głównej, do której wszyscy mają normalny dostęp, wstawić następujący kod: <form action="?" onsubmit="window.location.href = this.password.value + '.html'; return false"> <input type="password" name="password"> <input type="submit" value="OK"> </form> Hasłem w tym przypadku jest nazwa strony bez rozszerzenia, którą chcemy zabezpieczyć...