HTML + CSS

Sposobów na tworzenie stron internetowych jest wiele. Obecnie dostępnych jest wiele gotowych szablonów i systemów, dzięki którym zaprojektowanie strony firmowej staje się proste nawet dla osoby nietechnicznej. Jedną z podstawowych technologii jest język znacznikowy HTML, który wspomagany przez arkusze styli CSS pozwala na stworzenie optymalnej strony internetowej, która dodatkowo będzie wpływała pozytywnie na skuteczne pozycjonowanie stron w wynikach wyszukiwania.

Język HTML

HTML (HyperText Markup Language) jest hipertekstowym językiem znaczników. Dzięki jego uniwersalności możemy określić wygląd dokumentu i wprowadzić nie tylko tekst, ale również listy wypunktowane, tabele, zdjęcia i inne media. Język HTML posiada pewne zasady, których trzeba się trzymać tworząc dokument. Większość znaczników musi posiadać otwarcie i zamknięcie, struktura dokumentu powinna być podzielona na sekcję head oraz ciało dokumentu (znacznik ). Cały dokument należy również rozpocząć ściśle określonym znacznikiem.

HTML a pozycjonowanie

Technologia HTML pozwala nam określić istotne parametry strony wpływające na pozycjonowanie. Treść, która dla wyszukiwarki Google jest kluczowym parametrem, może być odpowiednio zoptymalizowana i sformatowana. W sekcji head każdej podstrony możemy określić tytuł strony, opis meta description czy ustalić kwestię indeksowania. Jeśli chodzi o słowa kluczowe w znaczniki meta keywords, nie są już one brane pod uwagę dlatego nie zaleca się nadmiernego ich wypełniania frazami. Lepszym rozwiązaniem będzie pozostawienie znacznika pustego. Słowa kluczowe w optymalny sposób należy za to umieścić w tytule i opisie strony oraz w treści.

Poza modyfikacją opisu i sekcji head, tworząc strony w technologii HTML możemy zoptymalizować m.in.:

  • Strukturę nagłówków w dokumencie – rozpoczynając dokument od nagłówka pierwszego rzędu (znacznik <h1>), który powinien zawierać istotne słowa kluczowe wpływające na pozycjonowania strony internetowej.
  • Atrybuty alt oraz title odnośników oraz grafik.
  • Treść na stronie, która może zostać rozbudowana o listy wypunktowane, tabele i grafiki.
  • Nawigację w obrębie całego serwisu stosując m.in. menu rozwijane czy dodając nawigację okruszkową (breadcrumbs).
  • Znaczniki danych strukturalnych.

Arkusze Styli CSS

Aby nadać dokumentowi pożądany wygląd, należy zastosować odpowiednie style CSS. Dzięki kaskadowym arkuszom styli, każdy element kodu HTML zostaje zaprezentowany w określony sposób w dowolnej przeglądarce internetowej. Style mogą zostać zadeklarowane na trzy sposoby:

  1. W zewnętrznym pliku .css, dzięki czemu warstwa struktury dokumentu zostaje oddzielona od części prezentacji, która odpowiada za widok strony w Internecie.
  2. W nagłówku dokumentu, w znaczniku <style>.
  3. W tagu html, który zwany jest stylem inline.

Mając na uwadzę pozycjonowanie stron, należy zwrócić uwagę na kilka elementów. Nie jest rekomendowane stosowanie stylu inline, dla określenia np. pisania wyrażeń wyłącznie wielkimi literami (style=”text-transform:uppercase”). W tym przypadku sugeruje się stosowanie stylu w zewnętrznym pliku, a dla znacznika zdefiniowane odpowiedniej klasy lub id.

Należy również zwrócić uwagę na ukrywanie treści w dokumencie, poprzez stosowanie np. białego tekstu na białym tle lub stosowanie stylu display:none. W ogólnym założeniu takie praktyki nie są rekomendowane.

Statyczne strony HTML

Statyczne strony internetowe, oparte o technologię HTML, znajdują zastosowanie głównie w przypadku stron wizytówkowych lub mało rozbudowanych serwisów. Niewątpliwą zaletą takiego rozwiązania jest szybkość i łatwość tworzenia. Należy jednak zwrócić uwagę na fakt, że edycja treści na podstronie wymaga chociaż podstawowych znajomości z zakresu tworzenia i działania strony. Z uwagi na to, statyczne strony www nie są polecana dla witryn, które na bieżąco aktualizują bloga lub stale rozbudowują ofertę o kolejne podstrony.