2. Edytory HTML i CSS oraz grafiki

> Dodaj do ulubionych

Jak ju┼╝ wiesz z poprzedniego rozdzia┼éu, do tworzenia stron internetowych teoretycznie wystarczy nawet Notatnik systemu Windows. W przypadku prostych stron rzeczywi┼Ťcie ten program si─Ö sprawdzi, ale je┼Ťli my┼Ťlisz powa┼╝nie o nauce j─Özyk├│w HTML i CSS oraz ewentualnie innych technologii programowania sieciowego, to warto zaopatrzy─ç si─Ö w bardziej zaawansowane narz─Ödzie.

Ponadto ka┼╝dy, kto pracuje nad stronami internetowymi, od czasu do czasu potrzebuje wykona─ç proste prace graficzne. Oczywi┼Ťcie zadaniem webmastera nie jest tworzenie fantastycznych i profesjonalnych grafik, natomiast dobrze jest, kiedy osoba ta potrafi samodzielnie przyci─ů─ç obrazek, zmniejszy─ç jego rozmiar albo zmieni─ç jego format na odpowiedni do umieszczenia na stronie internetowej.

W tym rozdziale zosta┼éy zwi─Ö┼║le przedstawione niekt├│re popularne edytory HTML i CSS oraz edytory grafiki. Niekt├│re z nich s─ů p┼éatne, ale bez problemu znajdziesz te┼╝ doskona┼ée narz─Ödzia wolne od jakichkolwiek op┼éat licencyjnych.

Je┼Ťli nie wiesz, na kt├│re narz─Ödzie si─Ö zdecydowa─ç, mo┼╝esz wypr├│bowa─ç wszystkie, aby sprawdzi─ç w praktyce, kt├│re najlepiej odpowiada Twoim preferencjom. W tym kursie b─Ödziemy u┼╝ywa─ç programu Microsoft Visual Studio Code (VSC), kt├│ry jest zaawansowanym edytorem HTML i CSS, a tak┼╝e wielu j─Özyk├│w programowania. Dlatego nast─Öpny rozdzia┼é zawiera wprowadzenie do podstaw obs┼éugi tego narz─Ödzia. Je┼Ťli nie interesuje Ci─Ö, jakie inne edytory s─ů dost─Öpne do wyboru, mo┼╝esz od razu przej┼Ť─ç do nast─Öpnego rozdzia┼éu, w kt├│rym dowiesz si─Ö, jak pobra─ç, zainstalowa─ç i przygotowa─ç do pracy edytor Visual Studio Code.

Opisy niekt├│rych funkcji edytor├│w, np. kolorowanie sk┼éadni, czy zwijanie kodu, mog─ů si─Ö wydawa─ç niejasne, ale nie przejmuj si─Ö tym. Wszystkie wa┼╝ne poj─Öcia tego typu s─ů obja┼Ťnione w nast─Öpnym rozdziale przy okazji omawiania programu Visual Studio Code.

Edytory HTML i CSS

Istnieje kilka bardzo dobrych i bezp┼éatnych edytor├│w HTML i CSS. Poni┼╝ej znajduje si─Ö opis paru takich program├│w, kt├│re ciesz─ů si─Ö najwi─Öksz─ů popularno┼Ťci─ů.

Notepad++

Zrzut ekranu interfejsu Notepad++

Notepad++ to darmowy edytor kodu źródłowego dostępny na licencji GNU General Public License, który jest doskonałym zamiennikiem dla Notatnika systemu Windows. Obsługuje około 80 języków programowania, tzn. zapewnia dla nich kolorowanie składni, funkcje zwijania kodu itp. Umożliwia otwieranie wielu plików w jednym oknie w postaci kart, ma bardzo mały rozmiar oraz jest niezwykle szybki i efektywny.

Program Notepad++ warto zainstalowa─ç w swoim komputerze nawet, je┼Ťli nie planuje si─Ö u┼╝ywa─ç go jako podstawowego edytora HTML i CSS, poniewa┼╝ mo┼╝na go u┼╝ywa─ç do szybkiej edycji r├│┼╝nego rodzaju plik├│w tekstowych.

Edytor Notepad++ mo┼╝na pobra─ç na stronie https://notepad-plus-plus.org/downloads/. Ten program jest dost─Öpny w polskiej wersji.

Sublime Text

Zrzut ekranu interfejsu Sublime Text

Sublime Text to ┼Ťwietny edytor kodu ┼║r├│d┼éowego dost─Öpny w wersjach dla system├│w Windows, macOS i Linux. Obs┼éuguje HTML i CSS, a tak┼╝e wiele j─Özyk├│w programowania.

Ma bardzo prosty i przejrzysty interfejs oraz obs┼éuguje system wtyczek, dzi─Öki czemu mo┼╝na rozszerza─ç jego funkcjonalno┼Ť─ç. Obs┼éuguje m.in. kolorowanie sk┼éadni, zwijanie kodu, wyszukiwanie za pomoc─ů wyra┼╝e┼ä regularnych i wiele innych funkcji.

Edytor ten mo┼╝na pobra─ç za darmo, aby go wypr├│bowa─ç. Je┼Ťli jednak zamierzasz z niego korzysta─ç w spos├│b ci─ůg┼éy, musisz wykupi─ç licencj─Ö, kt├│ra kosztuje oko┼éo 100 dolar├│w.

Program mo┼╝na pobra─ç na stronie https://www.sublimetext.com/download, a licencj─Ö mo┼╝na wykupi─ç pod adresem https://www.sublimehq.com/store/text.

Dreamweaver

Zrzut ekranu ze strony Dreamweavera

Dreamweaver to legendarny zaawansowany edytor firmy Adobe obs┼éuguj─ůcy mi─Ödzy innymi HTML, CSS, JavaScript i PHP.

Ma bardzo bogat─ů funkcjonalno┼Ť─ç, m.in. ma funkcj─Ö WYSIWYG, czyli pozwala pracowa─ç nad stron─ů w trybie wizualnym, automatycznie generuj─ůc odpowiedni kod HTML, oraz wbudowanego klienta FTP, dzi─Öki czemu strony mo┼╝na wysy┼éa─ç na serwer bezpo┼Ťrednio, bez u┼╝ycia dodatkowego programu.

Niestety Dreamweaver nie jest tani. Na stronie https://www.adobe.com/pl/products/dreamweaver.html mo┼╝na pobra─ç jego wersj─Ö pr├│bn─ů oraz mo┼╝na znale┼║─ç cennik.

Paj─ůk

Zrzut ekranu interfejsu Paj─ůka

Paj─ůk to polski edytor kodu ┼║r├│d┼éowego. Ma bardzo bogat─ů funkcjonalno┼Ť─ç pozwalaj─ůc─ů na tworzenie r├│┼╝nego rodzaju stron internetowych, aplikacji mobilnych oraz program├│w serwerowych. Obs┼éuguje wiele j─Özyk├│w programowania, jak PHP i JavaScript, a tak┼╝e j─Özyki HTML i CSS.

Oferuje funkcje kompresji i formatowania kodu, sprawdzania sk┼éadni, pisowni i odsy┼éaczy, generatory bardziej skomplikowanych struktur i wiele innych narz─Ödzi, w┼é─ůcznie z klientem FTP.

Paj─ůk jest dost─Öpny zar├│wno w wersji darmowej, jak i p┼éatnej. Wersja darmowa ma mniej funkcji. Program mo┼╝na pobra─ç na stronie https://www.creamsoft.com/pl/pajak/, na kt├│rej znajduje si─Ö te┼╝ cennik.

Visual Studio Code

Zrzut ekranu interfejsu Visual Studio Code

Visual Studio Code to bezpłatny edytor kodu typu open source, nad którym pieczę sprawuje Microsoft. Ma wiele przydatnych funkcji, takich jak np. kolorowanie składni, automatyczne uzupełnianie nazw zmiennych, funkcji itp. Jest wyposażony także w bardziej zaawansowane narzędzia, takie jak kontrola wersji Git czy debuger.

Je┼Ťli podstawowa funkcjonalno┼Ť─ç Visual Studio Code jest niewystarczaj─ůca, mo┼╝na j─ů zwi─Ökszy─ç za pomoc─ů licznych dost─Öpnych rozszerze┼ä.

Edytor Visual Studio Code obsługuje HTML, CSS, Sass, Less, JavaScript, PHP, C#, C++, Ruby, Perl, SQL, XML, Python i wiele innych języków komputerowych.

Edytor Visual Studio Code jest dost─Öpny w polskiej wersji j─Özykowej. Mo┼╝na go pobra─ç na stronie https://code.visualstudio.com/.

W nast─Öpnym rozdziale znajduje si─Ö wprowadzenie do podstaw pracy z tym edytorem, poniewa┼╝ b─Ödziemy go u┼╝ywa─ç w dalszej cz─Ö┼Ťci tego kursu.

Malarz

Edytory grafiki

Edytor grafiki nie jest podstawowym narz─Ödziem pracy podczas nauki j─Özyk├│w HTML i CSS, ale warto zna─ç podstawy jednego z tych narz─Ödzi, aby m├│c samodzielnie wykonywa─ç proste czynno┼Ťci, takie jak przycinanie obraz├│w, czy zmiana wymiar├│w i zapisywanie grafiki w formacie odpowiednim do opublikowania na stronie internetowej. Oto trzy popularne edytory grafiki:

  • Adobe Photoshop ÔÇô zaawansowany profesjonalny edytor grafiki firmy Adobe. Ten program jest p┼éatny. Na stronie https://www.adobe.com/pl/products/photoshop.html mo┼╝na pobra─ç jego wersj─Ö oraz znale┼║─ç cennik.
  • GIMP ÔÇô bezp┼éatny edytor grafiki typu open source o bogatej funkcjonalno┼Ťci. Nie jest najprostszy w obs┼éudze, ale za to zapewnia wiele zaawansowanych funkcji. GIMP-a mo┼╝na pobra─ç na stronie https://www.gimp.org/downloads/.
  • Paint.net ÔÇô prosty edytor grafiki o podstawowej funkcjonalno┼Ťci, w kt├│rym mo┼╝na wykona─ç podstawow─ů obr├│bk─Ö grafiki. Jest zdecydowanie prostszy od GIMP-a czy Photoshopa i stanowi ┼Ťwietny wyb├│r, je┼Ťli szukasz programu do wykonywania prostych prac graficznych. Paint.net mo┼╝na pobra─ç na stronie https://www.getpaint.net/.

Pora zainstalować Visual Studio Code. Szczegółowe instrukcje, jak to zrobić, oraz podstawowy kurs obsługi tego edytora znajdziesz w następnym rozdziale.