Podczas gdy jeszcze 10 lat temu sukces witryny internetowej zależał w dużej mierze od jakości zastosowanego kodu HTML oraz rodzaju obecnej w niej treści, dziś stworzenie dobrej i efektownej witryny internetowej to bardzo złożony proces, którego podstawą powinna być dogłębna wiedza w tej dziedzinie.
W trakcie projektowania i realizacji nowoczesnych stron internetowych należy zwrócić uwagę na cały szereg ważnych czynników, decydujących o jej sukcesie lub porażce. Z myślą o osobach zamierzających rozpocząć przygodę z projektowaniem i tworzeniem witryn internetowych przygotowałem ten krótki poradnik, w którym postaram się wyjaśnić podstawy projektowania i tworzenia dobrej, nowoczesnej witryny web.
W tym artykule omówię tylko niektóre z tak zwanych dobrych praktyk z zakresu projektowania i tworzenia witryn internetowych, w przeciwnym razie, zamiar szczegółowego opisania każdego tematu wiązał by się z wyzwaniem równym napisania całej książki.
Można potraktować ten materiał jako podstawowy instruktaż z zakresu projektowania dobrych i funkcjonalnych witryn internetowych. Ze względu na obszerność prezentowanych tematów, postanowiłem podzielić materiał na sekcje odpowiadające różnym tematom, które zostaną opublikowane w kolejnych dniach. Dziś zatem przedstawię czytelnikom część pierwszą mojego instruktażu, dedykowaną językowi HTML.
Nowoczesne i funkcjonalne strony www. Część I: język HTML
Podstawą działania każdej witryny internetowej jest kod HTML, który kształtuje wizualny, a także funkcjonalny aspekt witryny po stronie przeglądarki internetowej.
Język HTML
HTML to hipertekstowy język znaczników, służący do tworzenia dokumentów hipertekstowych, takich jakimi są przykładowo strony internetowe.
Nowoczesne witryny internetowe stosują głównie HTML w wersji 5, który oferuje dużo większą funkcjonalność niż jego poprzednie wersje. HTML 5 udostępnia cały szereg nowych znaczników, głównie semantycznych, które wcześniej nie istniały, a które mogą naprawdę uprościć wiele kwestii technicznych, takich jak przykładowo praca ze stylami CSS. Stosowanie nowych znaczników semantycznych umożliwia wdrożenie bardziej przejrzystego kodu HTML, w którym większość znaczników DIV można zastąpić samymi znacznikami semantycznymi. Zaawansowane możliwości jakie oferuje HTML 5 w zakresie formularzy, nie tylko ograniczają, lecz niekiedy całkowicie eliminują konieczność stosowania dodatkowych skryptów js w celu usprawnienia ich funkcjonalności. Kolejnymi przykładowymi atutami HTML 5 jest natywna obsługa geo-lokalizacji oraz możliwość wprowadzania szczegółowych ustawień związanych ze sposobem działania pamięci podręcznej przeglądarki.
Oprócz zalecenia stosowania HTML w wersji 5, na co jeszcze należy zwrócić uwagę w tym zakresie? Otóż przede wszystkim na to, by kod HTML był zgodny z oficjalną składnią. Wydaje się to być prostym zadaniem, lecz w wielu przypadkach jest ono dość trudne do wykonania, a dzieje się tak głównie dlatego, że nieprawidłowa składnia kodu HTML nie przyczynia się do wyświetlania w przeglądarce jakichkolwiek informacji o błędach. Problem ze składnią jest zauważany często tylko wówczas, gdy pojawiają się nieprawidłowości z wyświetlaniem elementów stron. Tylko w takich sytuacjach przeważnie twórca projektu zastanawia się nad sprawdzeniem składni HTML. Czemu jednak naprawdę warto stosować prawidłową składnie HTML? Otóż istnieją uzasadnione podejrzenia iż algorytm wyszukiwarki Google bierze pod uwagę także jakość kodu HTML w celu wyliczenia odpowiedniej dla danej witryny pozycji w wynikach wyszukiwania, ponieważ dobrej jakości kod HTML w pewnej mierze może świadczyć o dobrej jakości witryny.
W przypadku własnoręcznego tworzenia kodu HTML można w prosty sposób przestrzegać reguły trzymania się prawidłowej składni. Jest to nieco pracochłonne, ale zadanie jest do wykonania. Problem pojawia się w przypadku korzystania z popularnych systemów CMS, takich jak Drupal, Joomla, czy nawet WordPress. Wówczas trzymanie się prawidłowej składni HTML staje się trudnym do wykonania zadaniem, które w większości przypadków raczej mija się z celem.
W sieci można znaleźć bardzo dużo narzędzi sprawdzających składnię HTML. Najbardziej godnym zaufania jest tak zwany walidator W3C
Co jeszcze jest ważne jeśli chodzi o sam kod HTML? Otóż gorąco zniechęcam wszystkich do bezpośredniej stylizacji znaczników, czynności która znacznie ogranicza całą gamę korzyści płynących z prawidłowego stosowania arkuszy styli CSS, ale do tego tematu wrócę w następnej części instruktażu, której opublikowanie zaplanowałem na dzień jutrzejszy.