warto - Kurs HTML i CSS
HTML dla zielonych / Jak zrobić dobrą stronę HTML...wczuć się w sposób myślenia internautów. Pamiętaj, że nie znają oni serwisu tak dobrze jak Ty i mogą nie chcieć zagłębiać się w szczegóły. Dlatego warto w widocznym miejscu umieścić hiperłącza do najciekawszych działów, jakiś system wyszukiwania lub indeks. W przypadku obszerniejszych witryn wskazane jest podzielenie ich na działy tematyczne. Sposób nawigacji powinien być przede wszystkim wygodny, praktyczny, logiczny i łatwo dostępny. Dbaj o poprawność ortograficzną i stylistyczną tekstu...
Wykazy CSS / Automatyczna numeracja wykazu {counter-reset, counter-increment}...licznik posiada swój unikalny identyfikator (nazwę), za pomocą którego można się do niego odnosić w arkuszu CSS. Dodatkowo każdy licznik przechowuje wartość, która jest liczbą określającą wartość licznika dla aktualnego punktu wykazu (1, 2, 3,...). Zasada tworzenia automatycznej numeracji jest prosta: Najpierw określany nazwę licznika dla danego wykazu, od razu zerując go: ol { counter-reset: nazwa_licznika } Usuwamy domyślne numerowanie wykazu, aby nie kolidowało z automatycznym: ol li...
- Rozmiary CSS / Szerokość i marginesy automatyczne
...Elementy pozycjonowane absolutnie, zastępowane Elementy inline-block, nie-zastępowane Elementy inline-block, zastępowane Wstęp Podanie wartości auto dla własności określającej szerokość elementu (width) lub jego marginesy (margin-left, margin-right) pozwala dopasować wybrany tą metodą wymiar w taki sposób, aby element poprawnie wyświetlił się w każdych warunkach. Poniżej znajdziesz opis wyznaczania szerokości i marginesów automatycznych dla różnych typów elementów w różnych...
Menu rozwijane, otwierane, wysuwane / Skrypt menu rozwijanego, otwieranego, wysuwanego...elementy (<dd>...</dd>), przynależące do kolejnych, poprzedzających nagłówków menu (<dt>...</dt>). Tutaj również nie ma ograniczeń, co do zawartości, którą można umieścić wewnątrz. Mogą to być po prostu odsyłacze ale też inne elementy. Poniżej wystarczy już tylko umieścić wywołanie skryptu: <script> new Menu('menu0'); </script> ...i to wszystko 🙂. Zwróć tylko jeszcze uwagę na wyróżniony identyfikator menu0 w dwóch ostatnich fragmentach kodu: musi być on w obu miejscach...
- Menu drzewiaste / Skrypt menu drzewiastego
...kodu menu musi się znajdować blok <script>...</script>. Zauważ, że wyróżniony w nim identyfikator tree0 musi być identyczny z tym, co wpisano jako wartość atrybutu id="..." na początku menu! UWAGA! Wewnątrz wszystkich znaczników <li>...</li> muszą znajdować się znaczniki odsyłaczy, czyli: <a>...</a>. Odsyłacze znajdujące się w węzłach menu (czyli tworzące otwierane i zamykane foldery) nie powinny posiadać atrybutu href="...". Alternatywnie można wpisać tam href="javascript:void(0)". W...
- Skórki
...Z doświadczenia mogę poradzić, że semantyczny kod znacznie łatwiej się stylizuje, co jest kolejnym argumentem, aby zgłębić to zagadnienie. Ponadto warto dodać, że jeśli szkielet Twojej strony albo np. elementy menu będą zbudowane w oparciu o tabele, zmiana wyglądu będzie możliwa tylko w ograniczonym zakresie. Natomiast jeżeli strukturę oprzesz o elementy <div>...</div>, a przy budowaniu menu skorzystasz z wykazów (<ul>...</ul>) oraz list definicyjnych (<dl>...</dl>), to bez większego trudu...
- Dobre praktyki / CSS Zorientowane Obiektowo
...inaczej od swojego pierwowzoru (klasy bazowej)? Wybrane deklaracje z klasy bazowej można przesłonić (ang. override), przypisując im zmienione wartości w klasie pochodnej. Na przykład: .Article { color: black; background-color: white; /* ... */ } .Review { color: green; font-size: 12px; /* ... */ } Pamiętaj jednak, że kolejność wymieniania nazw klas w atrybucie class="..." z punktu widzenia kaskadowości stylów nie ma znaczenia, dlatego należy zadbać, aby w arkuszu...
- Dobre praktyki / Przykazania webmastera
...podstrony Rozbudowane artykuły długo się ładują. Użytkownik po prostu może się szybko zniecierpliwić i w ogóle nie doczekać się, aż zobaczy pełną zwartość strony, tylko opuścić serwis. Poza tym przecież może wcale nie być zainteresowany całością artykułu, a jedynie jego fragmentem. Dlatego obszerne treści staraj się dzielić na podrozdziały albo w ostateczności na numerowane strony i umieszczać w osobnych dokumentach. Nie zakładaj, że wszyscy użytkownicy posiadają tak szybkie łącze jak Twoje...
- Nagłówek i treść HTML / Struktura dokumentu HTML
...<meta> stanowi tzw. metainformację, pozwalającą określić pewne ogólne wiadomości dotyczące dokumentu, m.in. sposób kodowania znaków, opis zawartości strony, jej autora czy język, w którym została napisana. Metainformacje nie wpływają bezpośrednio na wygląd dokumentu, lecz cechy które podają, są równie ważne. Chociaż nie są one wymagane, warto je stosować, ponieważ może to np. pomóc w odszukaniu strony przez wyszukiwarki sieciowe. Każdy dokument powinien zawierać obowiązkowo...
- Nagłówek i treść HTML / Ikona strony <link "shortcut icon">
...przeglądarki pobierają ikonę strony tylko raz, a później rzadko jest ona odświeżana (albo nawet wcale). Dlatego zanim wprowadzimy taki dodatek, warto go wcześniej dobrze dopracować. Ikony na stronę do pobrania znajdziesz w rozdziale: Ikony (symbole). Potrzebujesz pomocy? Przy tworzeniu ikony strony HTML możesz również skorzystać ze specjalnego generatora zamieszczonego tutaj. Dzięki niemu w kilka minut skonfigurujesz własną grafikę na podstawie dowolnej emotikony (emoji). ✅ Rozpocznij...