stronie - Kurs HTML i CSS
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...
- 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...
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...
HTML dla zielonych / Pozioma linia HTML <hr><hr> Pozwala wstawić na stronie poziomą linię (ang. horizontal rule), za pomocą której np. można rozdzielić sąsiednie grupy akapitów wyraźnie różniące się między sobą tematycznie. UWAGA! Znacznik <hr> nie posiada w języku HTML znacznika zamykającego! Przykład <hr> <p>Akapit...</p> <p>Akapit...</p> <hr> <p>Akapit...</p> <p>Akapit...</p> Pytania i odpowiedzi <hr> Jak napisać poziomą linię w HTML? W celu dodania poziomej linii na stronie WWW należy posłużyć się znacznikiem <hr>. Jak...
- 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">
...if (opis) document.write(opis + ''); else document.write(uzytkownik + '\x40' + domena + ''); 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...
Odsyłacze HTML / Ćwiczenia...stworzoną w ramach ćwiczeń z poprzedniego rozdziału. Utwórz spis treści dodając etykiety do tytułów poszczególnych sekcji tematycznych na stronie głównej, a następnie umieszczając na początku wykaz z listą odsyłaczy do tych etykiet. Przygotuj po dwie wersje ilustracji z Twojej strony. Pierwsza powinna mieć rozmiary dokładnie takie jak widoczne bezpośrednio na stronie. Natomiast druga wersja może być zdjęciem w wysokiej rozdzielczości. W tym celu otwórz duże zdjęcie w dowolnym...
- 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...