Jeśli zastanawiasz się jak zrobić stronę internetową www samodzielnie i nie masz o tym zielonego pojęcia, to w tym artykule postaram się chociaż trochę odsłonić rąbka tych tajemniczych czarów.

Jak zrobić stronę internetową nie ucząc się niczego

Jeśli nie chcesz niczego się uczyć, to znajdź kogoś kto zrobi to Tobie odpłatnie ;)

Jak zrobić stronę internetową samemu, ale niekoniecznie zagłębiając się we wszystkie technologiczne czary

Jeśli jednak chcesz trochę poznać tematu i raczej wyklikać swoją stronę, to dobrym rozwiązaniem może być zrobienie swojej strony w oparciu o darmowy system zarządzania treścią np. najpopularniejszy na świecie WordPress, który będzie można dostosować do swoich preferencji. Co może w tym rozwiązaniu być wyzwaniem dla Ciebie? Będziesz musiał samodzielnie wybrać i wykupić hosting, czyli przestrzeń dyskową na Twoją stronę, następnie wybrać i kupić domenę, zainstalować WordPress – chociaż z tym wiele hostingów pomaga udostępniając autoinstallatory. Dalej będziesz musiał wybrać/kupić i zainstalować szablon WordPress, a następnie dostosować swoją stronę do swoich potrzeb używając panelu administracyjnego WordPress.

Jak zrobić stronę internetową, własnoręcznie i od zera

Ale jeśli naprawdę poznać technologie używane do tworzenia stron internetowych to czeka Ciebie trochę więcej nauki. Strony internetowe zbudowane są jako dokumenty HTML. HTML to skrót od Hypertext Markup Language. Obecnie używaną wersją jest HTML5. HTML to znaczniki, czyli takie specjalne słowa, które trzeba poznać, żeby tworzyć strony internetowe. Jednak HTML to język opisujący tylko strukturę strony internetowej. Żeby strona wyglądała ładnie i posiadała płynne animacje, konieczne są tzw. „style”. Style stron internetowych „mówią”, gdzie i jak znaczniki HTML mają zostać wyświetlone w oknie przeglądarki internetowej. Do definiowania wyglądu strony HTML przeglądarki używają CSS, czyli Cascading Style Sheets. Obecną wersją jest CSS3. W CSS używamy tzw. selektorów, żeby ostylować tylko te znaczniki, które chcemy.

Przykład dokumentu HTML5:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"><!-- Kodowowanie znaków, potrzebe żeby się nie wyświetlały dziwne krzaczki zamiast polskich liter -->
<title>Tytuł dokumentu - ten sam co widoczny w Google i tytule zakładki przeglądarki</title>
</head>
<body>
Treść strony internetowej. <strong>Pogrubiony tekst.</strong>
<img src="obrazek.jpg" alt="Tekst widoczny kiedy obrazek się nie załaduje"/>
<a href="https://farmastron.pl">Link do FarmyStron</a>
</body>
</html>

Przykład CSS3:

html {
  background-color: #000; /*Tło strony będzie czarne*/
}

img {
  width: 200px; /*Wszystkie obrazki będą miały szerokość 200 pikseli*/
  height: 200px; /*Wszystkie obrazki będą miały wysokość 200 pikseli*/
}

a {
  color: #f00; /*Wszystkie linki na stronie będą czerwone*/
}

a:hover {
  color: #fff; /*Wszystkie linki po najechaniu na nie myszką będą białe*/
}

Oprócz HTML5 i CSS3, konieczne często jest poznanie języka programowania JavaScript. JavaScript pozwala pisać na stronach takie funkcjonalności jak:

  • doładowywanie treści bez przeładowania
  • automatycznie rotujące się bannery
  • sprawdzanie poprawności pól formularzy
  • itp.

HTML5, CSS3 i JavaScript pozwoli Tobie robić tzw. strony statyczne, czyli takie których treść NIE jest generowania w momencie w którym internauta chce ją wyświetlić. Czyli takie jakie się robiło około roku 2000. Żeby zrobić strony generowane dynamicznie potrzebne jeszcze będą języki wykonywane nie w przeglądarce, a po stronie serwera www, który „serwuje” strony HTML. Takim językiem jest np. PHP, Python, czy JavaScript. Tak ten sam JavaScript, który jest odpalany w przeglądarce może być wykorzystany wraz serwerem o nazwie Node.js do pisania „backendu”.

Jeśli chcesz zgłębić te technologie zacznij od darmowych kursów online np. na www.codecademy.com.

Jeśli chcesz się dowiedzieć więcej o WordPressie, to przejdź do kategorii WordPress.