Narzędzia – edytory stron internetowych.

I. Wprowadzenie do tematu

1. Co to jest edytor stron internetowych?

  • Narzędzie służące do tworzenia, edycji i zarządzania kodem stron internetowych (HTML, CSS, JavaScript).
  • Pozwala na szybkie i efektywne tworzenie stron dzięki podświetleniu składni, autouzupełnianiu, podpowiedziom oraz integracji z narzędziami do debugowania.

2. Rodzaje edytorów stron internetowych:

  • Edytory tekstowe:

  • Przykłady: Notepad++, Sublime Text, Visual Studio Code, Atom.

  • Funkcje: podświetlenie składni, autouzupełnianie kodu, integracja z kontrolą wersji (Git), możliwość instalowania wtyczek.

  • Używane przez programistów do ręcznego pisania kodu.

  • Edytory WYSIWYG (What You See Is What You Get):

  • Przykłady: Adobe Dreamweaver, Brackets, Wix, WordPress.

  • Funkcje: tworzenie stron za pomocą graficznego interfejsu bez konieczności znajomości kodu.

  • Umożliwiają wizualne projektowanie stron, jednak dają mniejszą kontrolę nad kodem.

3. Zastosowanie edytorów:

  • Edytory tekstowe są używane do pełnej kontroli nad kodem i są preferowane przez doświadczonych deweloperów.
  • Edytory WYSIWYG mogą być przydatne dla początkujących, pozwalając na szybką budowę stron bez potrzeby ręcznego pisania kodu.

Visual Studio Code

Przydatne skróty
  • Ctrl + S: Zapisanie aktualnie edytowanego pliku.
  • Ctrl + P: Szybkie otwarcie pliku po jego nazwie.
  • Ctrl + F: Wyszukiwanie tekstu w aktualnym pliku.
  • Ctrl + H: Wyszukiwanie i zastępowanie tekstu w aktualnym pliku.
  • Ctrl + Shift + F: Wyszukiwanie tekstu we wszystkich plikach w projekcie.
  • Ctrl + Shift + P: Otwarcie palety poleceń, gdzie można wykonywać różnorodne zadania i komendy.
  • Ctrl + Shift + L: Zaznaczenie wszystkich wystąpień aktualnie zaznaczonego słowa.
  • Alt + ↑/↓: Przenoszenie linii kodu w górę lub w dół.
  • Ctrl + /: Komentowanie lub odkomentowanie zaznaczonych linii kodu.
  • Ctrl + X: Wytnij zaznaczony fragment kodu.
  • Ctrl + C: Skopiuj zaznaczony fragment kodu.
  • Ctrl + V: Wklej skopiowany lub wycięty fragment kodu.
  • Ctrl + D: Zaznacza kolejny taki sam zaznaczony fragment kodu - multikursor.