Webszerkesztés
Visual Studio Code

Letöltések

Töltsd le és telepítsd a szükséges Visual Studio Code szoftvert (mindig a legfrissebbet)
pl. a https://code.visualstudio.com/download/ oldalról.

Töltsd le a webszerkesztés modulhoz tartozó példatárat és a munkafájlokat a
https://njszt.hu/hu/ecdl/modul oldalról.

A feladatok megoldását a Feladatsorok részben találod:

Tesztkérdések gomb: 6-6 kérdés minden feladatsorhoz;
Gyakorlati feladatok gomb: weblapszerkesztési feladatok.

Visual Studio Code képernyő

1. Menüsor.
2. Fájlkezelő ablak megnyitása/bezárása.
3. Kiegészítők ablak megnyitása/bezárása.
4. Kezelés menü megnyitása/bezárása.
5. Megnyitott fájl neve.
6. A megnyitott fájl tartalma.
7. Állapotsor, amely többek között tartalmazza:
- a kurzor aktuális pozícióját (sor, oszlop),
- a megnyitott fájl kódolást (UTF-8),
- a megnyitott fájl nyelvét (HTML)

A képernyő részei között az Ú billentyűvel előre,
a F+Ú billentyűkombinációval visszafelé lehet lépkedni.

Jelölések a VSC programban

HTML kódok színjelölései:

< HTML jelölők >; attribútum nevek ; "attribútum értékek" ;
<kijelölt HTML jelölő nyitó> és <záró eleme>; weblaptartalom

CSS kódok színjelölései:

HTML elem nevek ; #azonosító (id) nevek
.osztály (class) nevek ; látszólagos (pseudo) - szelektálható osztály nevek ;
attribútum nevek ;
szöveges attribútum értékek ; szám attribútum értékek ; ['attribútum választók']

Javasolt kiegészítők

htmltagwrap - Brad Gashler

A kiválasztott tartalmat HTML-címkébe csomagolja.
Becsomagolás: A+w billentyűkombinációval.

Select part of word - Marek Lewandowski

Többsoros kurzor esetén a szavak közötti mozgást és a kijelölést segíti.
C+A+X: Ugrás a következő szóra.
C+A+Y: Ugrás az előző szóra.
C+F+A+X: Kijelölés kibővítése a következő szóra.
C+F+A+Y: Kijelölés kibővítése az előző szóra.

Open In Default Browser - peakchen90

Megtekintheted az alapértelmezett böngészőben a Fájlkezelőből kiválasztott HTML fájlt.
Gyorsgombja: C+1

Az animációkban használt gyorsbillentyűk

Sorok mozgatása, másolása

Az aktuális sort, vagy a kijelölt sorokat mozgathatjuk, másolhatjuk:
Mozgatás lefelé: A+Z
Mozgatás felfelé: A+Q
Másolás lefelé: A+F+Z
Másolás felfelé: A+F+Q

Kijelölés bővítése, szűkítése

Bővítés: Emmet: Balance (outward): A+o
Szűkítés: Emmet: Balance (inward): A+i

Becsomagolás rövidítéssel

Wrap in HTML tags: A+w
Emmet: Wrap with Abbreviation: C+b,r

Elem eltávolítása

Emmet: Remove Tag: C+e,e

Egyéb billentyűparancsok

Az aktuális kijelölés következő előfordulásának kijelölése is: C+d
A kijelölés összes előfordulásának kijelölése: C+Ő
Aktuális sor kijelölése: C+l
Aktuális sor törlése: C+F+k
Ugrás a kijelölés következő előfordulására: Á
Ugrás a kijelölés előző előfordulására: F+Á
Kódsorok összecsukása-kibontása: C+k,l
Hosszú sorok tördelésének be-/kikapcsolása: C+A+z
Automatikus formázás: A+F+f

IntelliSense

Az IntelliSense „kódkiegészítés”, „tartalomsegítő”: C+S

A munka megkezdése

Nyisd meg a szükséges munkamappát: Fájl - Open Folder...
vagy a C+k,o billentyűkombinációra megnyíló Open Folder ablakból.
A Fájlkezelő ablakban láthatod a mappa tartalmát.
A Fájlkezelő ablakból nyisd meg a szükséges fájlt:
dupla kattintás az egérrel a fájl nevén;
vagy Q, Z billentyűvel lépj a fájl nevére, fájl megnyitása: N;
vagy a C+p billentyűkombináció leütésére megjelenő szerkesztőmezőbe írd be a keresett fájl nevét, a fájl megnyitása: N

Az animációk egy kurzor pozíciótól vagy egy kijelölésből indulnak!