Útmutató a Visual Studio Code használatához – utolsó módosítás: 2024.06.01.
Telepítés:
Töltsd le az operációs rendszerednek megfelelő telepítő fájlt a
https://code.visualstudio.com/download oldalról.
A böngészőbe írd be a megadott URL-t, megnyitása: ENTER.
INSERT + F6: Címsorok listája.
Első sor: Download Visual Studio Code: 1.
Kiválasztása: ENTER.
System installer kiválasztása: TAB a második sor, második oszlop elhangzásáig (x64).
Kiválasztása: ENTER.
A Mentés másként párbeszédpanelen add meg a letöltés helyét.
TAB a Mentés gombig, kiválasztása: ENTER.
A program telepítése:
A letöltött exe fájlt indítsd el: ENTER.
Figyelmeztető üzenet hangzik el:
Felhasználói fiókok felügyelete párbeszédpanel:
Engedélyezi, hogy ez az alkalmazás módosításokat hajtson végre az eszközön?
TAB az Igen gombig, kiválasztása: SZÓKÖZ.
Telepítő első ablaka - Licencszerződés:
TAB a Nem fogadom el a szerződést választógombig.
FEL az Elfogadom a szerződést választógombig.
TAB a Tovább gombig, kiválasztása: ENTER.
Telepítő második ablaka - További feladatok:
Az asztali ikon létrehozása jelölőnégyzet, ha nincs bejelölve,
jelöld be: SZÓKÖZ.
TAB a Tovább gombig, kiválasztása: ENTER.
Telepítő harmadik ablaka - Készen állunk a telepítésre:
A Telepít gomb az aktív, kiválasztása: ENTER.
A Visual Studio Code telepítésének befejezése
Az Indítás Visual Studio Code jelölőnégyzet bejelölt állapotban van.
TAB a Befejezés gombig, kiválasztása: ENTER.
VSC program indítása:
Telepítés befejeztével, ha az Indítás Visual Studio Code jelölőnégyzetet bejelölve hagytad,
a Befejezés gomb megnyitásakor automatikusan megnyílik a program.
Egyéb esetben a Start menüből, vagy az Asztali parancsikon kiválasztásával indíthatod a programot.
Bővítmények hozzáadása:
A munka megkönnyítéséhez néhány bővítmény is szükséges.
Bővítmény kereső megnyitása: CTRL+SHIFT+X.
Írd be a keresőmezőbe a keresendő bővítmény nevét,
átlépés a listára: TAB, mozgás a listában: LE-FEL,
ha megtaláltad a megfelelőt, TAB az Install (Telepítés) gombig, kiválasztása: ENTER,
ezzel a telepítés kész is van, a bővítmény hozzáadódik a telepített bővítmények listájához.
Szükséges bővítmények:
1. Hungarian Language Pack for Visual Studio Code.
A menüelemekben ugyan nem sok magyarítás van, de a fő területek neve navigáláskor
magyarul hangzik el.
Bővítmények megnyitása: CTRL+SHIFT+X.
A Search Extensions in Marketplace szerkesztőmezőbe írd be: hungarian.
Ugrás a listára: TAB az Extensions listamező elhangzásáig.
LE az első elemre.
Elhangzik: Hungarian Language Pack for Visual Studio Code. Magyar. Microsoft.
TAB az Install gombig, kiválasztása: ENTER.
Install gomb aktiválása: SZÓKÖZ.
A telepítés végén elhangzik: A Hungarian Language Pack for Visual Studio Code "telepítése befejeződött".
Ezután a programot be kell zárni és újra indítani.
Újraindítás után TAB, amíg elhangzik: Show welcome page on startup jelölőnégyzet bejelölve.
Bejelölés törlése: SZÓKÖZ.
2. htmltagwrap (Brad Gashler).
Segítségével a kijelölt tartalom köré beszúrható egy html jelölő.
Bővítmények megnyitása: CTRL+SHIFT+X.
A Kiegészítők keresése a piactéren szerkesztőmezőbe írd be: htmltagwrap.
Ugrás a listára: TAB a Kiegészítők listamező elhangzásáig.
LE az első elemre.
Elhangzik: htmltagwrap. Wraps selected code with HTML tags. Brad Gashler.
Ugrás a Telepítés gombra: TAB.
Telepítés gomb aktiválása: SZÓKÖZ.
A telepítés végén elhangzik: A htmltagwrap telepítése befejeződött.
Használata gyorsgombbal: ALT+W.
3. Select part of word (Marek Lewandowski).
A jelölők és a tartalom részei közötti navigálást, kijelölést segíti, főleg többsoros kurzor esetén nélkülözhetetlen.
Bővítmények megnyitása: CTRL+SHIFT+X.
A Kiegészítők keresése a piactéren szerkesztőmezőbe írd be: Select part of word.
Ugrás a listára: TAB a Kiegészítők listamező elhangzásáig.
LE az első elemre.
Elhangzik: Select part of word. An extension that allows you to move selection by a word in camel-case string. Marek Lewandowski.
Ugrás a Telepítés gombra: TAB.
Telepítés gomb aktiválása: SZÓKÖZ.
A telepítés végén elhangzik: A Select part of word.. telepítése befejeződött.
Az alapértelmezett gyorsgombok módosítása szükséges, mivel ütközik a JAWS-szal! (Lentebb részletezve!)
4. Open In Default Browser - peakchen90
Megtekintheted az alapértelmezett böngészőben a Fájlkezelőből kiválasztott HTML fájlt.
Gyorsgombja: CTRL+1.
Bővítmények megnyitása: CTRL+SHIFT+X.
A Kiegészítők keresése a piactéren szerkesztőmezőbe írd be: Open In Default Browser.
Ugrás a listára: TAB.
Ugrás az első elemre: LE.
Elhangzik: Open In Default Browser - A VSCode extension to fast open html file in browser - peakchen90.
Ugrás a Telepítés gombra: TAB.
Telepítés gomb aktiválása: SZÓKÖZ.
A telepítés végén elhangzik: A Open In Default Browser... telepítése befejeződött.
Képernyő:
A képernyő területei között az F6 billentyűvel lehet váltani.
A szerkesztő ablakon kívül a képernyő egyéb részeihez a TAB billentyűvel léphetsz.
HTML dokumentum szerkesztésekor javasolt a Zen-mód bekapcsolása: CTRL + K majd Z.
A Zen-mód lehetővé teszi, hogy a kódra összpontosíts azáltal, hogy elrejti az összes felhasználói felület elemet, kivéve a szerkesztő ablakot, átváltja a VS Code-ot teljes képernyőre, és középre állítja a szerkesztőt.
Parancssor:
A munka során a szükséges utasításokat a parancssorba való beírással lehet aktiválni.
Parancssor megnyitása: CTRL+SHIFT+P.
A parancsot a megjelenő szerkesztő mezőbe kell beírni, majd ENTER-t kell ütni.
Amennyiben egy-egy parancsot gyakran kell használni, érdemes gyorsgombot beállítani hozzá.
Gyorsgomb hozzáadása a parancshoz:
A gyorsgombokhoz több betűbillentyű is tartozhat.
Például: CTRL+K, S esetén a CTRL billentyű nyomva tartása mellett először a K, majd az S billentyűt kell leütni.
Ilyen esetben a CTRL és az első betű billentyű között + jel van, az első betűbillentyű után vessző, majd a második betűbillentyű következik a leírásban.
Másik változata a gyorsgomboknak: például: CTRL+K Z, A CTRL lenyomása mellett le kell ütni a K billentyűt, majd a CTRL felengedése után a Z billentyűt. Ilyen esetben a CTRL és az első betű billentyű között + jel van, majd egy SZÓKÖZ után van a másik billentyű a leírásban.
Az alábbiakban bemutatott egyedi gyorsbillentyűket én határoztam meg, van ahol új parancsot vettem fel, van ahol a régit lecseréltem. A feladatok megoldásai ezek alapján vannak megadva, ezért először a gyorsgombok felvétele szükséges!!!
Gyorsgomb lista megnyitása:
Fájl menü megnyitása: ALT+F, majd LE a Beállítások (Preferences) sorig,
JOBBRA majd LE a Billentyűparancsok (Keyboard Shortcuts) sorig, kiválasztása: ENTER,
vagy gyorsgombbal: CTRL+K, S.
A Kezdjen el gépelni a billentyűparancsok kereséséhez szerkesztősorba írd be a keresett parancsot.
TAB amíg elhangzik, Billentyűparancsok listamező.
LE, ekkor már csak a beírt parancs található a listában.
Parancs kiválasztása: ENTER.
Ekkor ismét megjelenik egy szerkesztősor, ekkor nyomd meg azt a billentyűkombinációt, és csak azt,
amit a parancshoz szeretnél rendelni, majd üss ENTER.
Amennyiben a megadott kombináció már foglalt, az nem elhangzik!
ESC leütésére módosítás nélkül zárhatod be a szerkesztőmezőt.
Visszalépés a Kezdjen el gépelni a billentyűparancsok kereséséhez: CTRL+F.
A jelenlegi tartalmat töröld: DELETE.
Keresheted a következő parancsot.
Keyboard Shortcuts ablak bezárása: CTRL+F4.
Az alábbi parancsokhoz kell gyorsgombot rendelni.
Az általam használt billentyűkombinációkat vedd fel!
Emmet: Becsomagolás rövidítéssel (Emmet: Wrap with Abbreviation): CTRL+B, R.
B, mint: becsomagolás, R, mint: rövidítéssel.
A megjelenő szerkesztőmezőbe be kell írni a szükséges jelölőnevet, majd ENTER.
A kurzort tartalmazó sor köré beszúrja a megadott jelölőt.
Emmet: Elem eltávolítása (Emmet: Remove Tag): CTRL+E, E.
E, mint: elem, E, mint: eltávolítása.
A kijelölt tartalom körül törli a HTML jelölőt.
Emmet: Egyensúlyozás (befelé) (Emmet: Balance (inward)): ALT+I.
I, mint: inward.
Minden egyes parancshíváskor szűkíti a kijelölt tartalmat:
Ha a kijelölt rész az elem szülő elemének tartalma és a jelölő nyitó és zárótagja:
a sorrend: az elem szülő elemének tartalma,
elem tartalma és a jelölő nyitó és zárótagja,
elem tartalma.
Emmet: Egyensúlyozás (kifelé) (Emmet: Balance (outward): ALT+O.
O, mint: outward.
Minden egyes parancshíváskor bővíti a kijelölt tartalmat.
Ha a kurzor egy elem tartalmában van:
a sorrend: elem tartalma,
elem tartalma és a jelölő nyitó és zárótagja,
az elem szülő elemének tartalma,
az elem szülő elemének tartalma és a jelölő nyitó és zárótagja...
Emmet: Következő elem kiválasztása (Emmet: Select Next Item): ALT+N.
N, mint: next.
A következő jelölő nevére, attribútumok esetén az attribútumokra is ugrik.
Emmet: Előző elem kiválasztása (Emmet: Select Previous Item): ALT+E.
E, mint: előző.
Az előző jelölő nevére, attribútumok esetén az attribútumokra is ugrik.
Emmet: Ugrás az illeszkedő párra (Emmet: Go To Matching Pair): CTRL + U, P.
U, mint: ugrás, P, mint: párra.
Amennyiben a kurzor egy nyitó- vagy záró jelölő előtt vagy után áll közvetlenül, vagy a jelölőben van,
akkor a billentyűparanccsal átléphetünk a hozzátartozó jelölőpárra.
Egymás alatti sorokhoz multikurzor adható.
Megjegyzés: Nemcsak egymás alatti sorokhoz adható multikurzor, de billentyűvel csak ez kivitelezhető.
Ehhez lépj az első sorba, majd a kurzort bővítheted lefelé vagy felfelé.
Ha elkezded a kijelölést az egyik irányba, akkor az irány megfordításával nem csökkented a kijelölést, hanem a hozzáadódnak a kijelölt sorok a másik irányba is!
Mivel a multikurzor hozzáadása is ütközött a JAWS-szal, ezeknek is módosítottam a gyorsgombjait.
A munka során a Numpad legyen bekapcsolva!
Add Cursor Above: CTRL+ALT+NUMPAD8.
Kurzor bővítése felfelé.
Add Cursor Below: CTRL+ALT+NUMPAD2.
Kurzor bővítése felfelé.
A Select part of word kiegészítő gyorsgombjainak módosítása:
Move left by a part of word: CTRL+NUMPAD4.
Balra mozgatja a kurzort, szavak és jelölőnevek elejére és végére ugrik.
Move right by a part of word: CTRL+NUMPAD4.
Jobbra mozgatja a kurzort, szavak és jelölőnevek elejére és végére ugrik.
Select word on the left: NUMPAD4.
Balra mozgatja a kurzort, szavak és jelölőnevek elejére és végére ugrik, miközben ki is jelöli azokat.
Select word on the right: NUMPAD6.
Jobbra mozgatja a kurzort, szavak és jelölőnevek elejére és végére ugrik, miközben ki is jelöli azokat.
Ez utóbbi két beállítás miatt a kurzormozgatásra a Numpadot ne használd!
Munkafájlok megnyitása:
A munkafájlokban az összetartozó fájlok egy-egy mappában vannak.
Mappa megnyitása:
Fájl menü megnyitása: ALT+F, majd LE az Open Folder... sorig, kiválasztása: ENTER,
vagy ALT+F, F, majd ENTER,
vagy CTRL+K, O.
Az Open Folder párbeszédablakban válaszd ki a szükséges mappát,
majd TAB a Mappaválasztás gombig, kiválasztása: ENTER.
Az első munkafájl mappa megnyitása után:
Figyelmeztető üzenet:
Megbízik az ebben a mappában lévő fájlok szerzőiben?
A Code olyan funkciókat biztosít, amelyek automatikusan végrehajthatják a mappában lévő fájlokat.
Ha nem bízik a fájlok szerzőiben, javasoljuk, hogy folytassa korlátozott módban, mivel a fájlok rosszindulatúak lehetnek. További információért tekintse meg dokumentumainkat.
...a szülőmappában lévő összes fájl szerzőjét jelölőnégyzet nincs bejelölve
bejelölése: SZÓKÖZ.
TAB a Yes, ... gombig, ENTER.
Ezután, a megjelölt mappából választod a munkafájlokat, nem jelenik meg többé a figyelmeztetés.
Fanézet:
A képernyő bal oldalán a megnyitott mappában található fájlok listája van.
A listára az F6 (szükség esetén többszöri) lenyomásával léphetsz, ekkor elhangzik: Fanézet.
Fájl megnyitása:
Fanézetben LE a szükséges fájl nevének soráig, megnyitása: ENTER.
A kurzor átkerül a kép jobboldalára, a szerkesztő ablakba.
Másik fájl megnyitása a mappából:
Másik fájl megnyitása előtt az aktuális fájlt zárd be: CTRL + F4.
CTRL+P leütésére elhangzik: Search files by name szerkesztőmező.
Ide beírhatod a keresett fájl nevét, vagy a LE-FEL nyilakkal választhatsz a listából.
Fájl megnyitása: ENTER.
Fájl átnevezése:
A feladatokban többször kell egy txt fájlból html fájlt készíteni.
F6, amíg elhangzik: Fájlkezelő.
Az átnevezendő fájl során állva nyomd le az F2 billentyűt, ekkor a fájl neve lesz kijelölve.
Kiterjesztés módosításához: Ugrás a sor végére: END.
Kiterjesztés (txt) kijelölése: CTRL+SHIFT+BALRA, írd át a kiterjesztést: html.
Az ilyen feladatoknak már az elején át kell nevezni html-re a fájlt, mert csak így használhatók a html szerkesztési parancsok.
Fájl bezárása:
A megnyitott fájl szerkesztő ablakát a CTRL+F4 leütésével bezárhatod.
Amennyiben módosítás történt a bezárandó fájlban, figyelmeztető üzenet hangzik el:
Szeretné menteni a(z) akarmi.html fájlban elvégzett módosításokat?
Változások mentéséhez: TAB a mentés gombig, kiválasztása: ENTER.
Bezárás a módosítások mentése nélkül: TAB a Don't Save gombig, kiválasztása: ENTER.
ESC leütésére visszatérhetsz a fájl szerkesztéséhez.
Mappa bezárása:
Fájl menü megnyitása: ALT+F, majd LE a Close Folder... sorig, kiválasztása: ENTER,
vagy ALT+F, M.
vagy CTRL+K F.
Visual Studio Code program bezárása: ALT+F4.
A program bezárásával a mappa nem záródik be automatikusan, tehát a VSC következő indításakor a be nem zárt mappa tartalma fog megjelenni a Fanézetben.
Mozgás és kijelölés:
Mozgás és kijelölés a tartalomban szimpla kurzor esetén
Mozgás:
LE-FEL: mozgás a sorok között.
JOBBRA-BALRA: mozgás a soron belül egy karakterrel jobbra, vagy balra.
HOME: Ugrás a sor elejére.
END: Ugrás a sor végére.
Megjegyzés: Az egymásba ágyazott elemek behúzással vannak szerkesztve,
A HOME és az END leütésére a kódsor elejére vagy a végére ugorhatunk.
Kétszer egymásután megnyomva a HOME gombot, az aktuális sor elejére ugorhatunk.
CTRL+JOBBRA , CTRL+BALRA:
Kijelölés:
SHIFT+FEL , SHIFT+LE:
Sorok kijelölése felfelé vagy lefelé. Ehhez érdemes a kezdő sor legelejére ugrani a kijelölés megkezdése előtt.
SHIFT+JOBBRA , SHIFT+BALRA.
Kijelölés egy karakterrel jobbra vagy balra.
Mozgás és kijelölés a tartalomban multikurzor esetén:
A multikurzor - többsoros kurzor - segítségével az azonos módon formázandó részek jelölhetők ki, ezt követően az összes kijelölt rész módosítása egy lépésben megoldható.
Az egymás alatti sorok multikurzorral történő megjelölése attól különbözik a több sor együttes kijelölésétől, hogy itt minden kurzorral megjelölt sor különálló kijelölésnek számít.
Egyéb mozgás és kijelölés gyorsgombok a Select part of word kiegészítőnél!
Sorok mozgatása, másolása:
Az aktuális sort, vagy a kijelölt sorokat mozgathatjuk, másolhatjuk:
Mozgatás lefelé: ALT+LE.
Mozgatás felfelé: ALT+FEL.
Másolás lefelé: ALT+SHIFT+LE.
Másolás felfelé: ALT+SHIFT+FEL.
Kijelölés bővítése, szűkítése:
Bővítés: Emmet: Balance (outward): ALT+O.
Sorrend: aktuális jelölő tartalma, aktuális jelölő, szülő jelölő tartalma, szülő jelölő... Szűkítés: Emmet: Balance (inward): ALT+I.
Sorrend: aktuális jelölő tartalma, gyermek jelölő, gyermek jelölő tartalma...
Elemek és attribútumok kijelölés:
Következő elem vagy attribútum: ALT+N.
Sorrend: nyitó jelölő, attribútum név és érték pár (ha van), attribútum érték..., következő nyitó jelölő...
Előző elem vagy attribútum: ALT+E
Sorrend: attribútum érték...(ha van), attribútum név és érték pár, előző nyitó jelölő...
Becsomagolás rövidítéssel:
Wrap in HTML tags:
Jelöld ki a szükséges tartalmat a megadott HTML fájlban. Az ALT+W leütésére alapértelmezetten elhelyezésre kerül a kijelölt rész köré egy bekezdés nyitó és záró jelölője, a jelölőnév ki van jelölve, átírással módosítható.
Egy szóköz leütésére a kurzor csak a nyitó jelölőnév mögé kerül, ide írhatod a szükséges attribútumokat.
Az attribútumok beírása nem rövidítéssel történik! Multikurzorral is működik!
Emmet: Wrap with Abbreviation:
Kijelölés nélkül az aktuális jelölő köré, kijelölés esetén a kijelölés köré illeszti be a szerkesztőmezőben megadott jelölő nyitó és záró részét.
A szerkesztőmezőben a nyitó jelölő attribútumai is megadhatók, rövidítésekkel.
Multikurzorral is működik!
Szerkesztőmező megnyitása: CTRL+B,R.
Rövidítések:
HTML elemnevek: ul, li, p, b, i...
Az attribútumokat [ és ] közé kell írni: a[href=index.html]
Az attribútumokat szóközzel kell elválasztani: a[href=index.html target=_blank]
Az értékeket csak akkor kell idézőjelbe tenni, ha az érték több szóból áll.
Amennyiben egy e-mail-cím van kijelölve, a rövidítés: a;
eredmény: <a href="mailto:_email-cím_">email-cím</a>
Elem eltávolítása:
Emmet: Remove Tag:
A kurzor pozíciójának megfelelő nyitó és záró jelölő kerül eltávolításra a CTRL+E,E leütésére.
Egyéb billentyűparancsok:
Az aktuális kijelölés következő előfordulásának kijelölése is: CTRL+D.
A kijelölés összes előfordulásának kijelölése:
CTRL+F2 vagy CTRL+SHIFT+L.
Aktuális sor kijelölése: CTRL+L.
Aktuális sor törlése: CTRL+SHIFT+K.
Ugrás a kijelölés következő előfordulására: F3
Ugrás a kijelölés előző előfordulására: SHIFT+F3.
IntelliSense:
Az IntelliSense „kódkiegészítés”, „tartalomsegítő”.
Az IntelliSense bármely szerkesztőablakban aktiválható a CTRL+SPACE billentyűkombináció beírásával.
A listában a FEL és a LE billentyűkkel lépkedhetsz, az aktuális listasor kiválasztása: ENTER leütésével.
Keresés és csere a dokumentumban:
A megoldások során érdemes a keresés és csere funkciót kihasználni, így akár egy lépésben is megoldható az egyébként több lépéses feladatrész.
Előzetes beállítások szükségesek!
Beállítások ablak megnyitása: CTRL + VESSZŐ.
A Beállítások keresése szerkesztőmező az aktív.
1. Auto Find In Selection:
Meghatározza, hogy a keresési művelet a kijelölt szövegen vagy a szerkesztőablakban található teljes fájlon van végrehajtva.
Mivel a keresés csak a kijelölésben (Find In Selection) gomb nehezen érhető el, ezért ennek automatikus bejelöltségét is érdemes kikapcsolni.
A Beállítások keresése szerkesztőmezőbe írd be: Auto Find In Selection.
TAB a Settings fa nézet elhangzásáig, beállítás megnyitása: ENTER.
A kombinált listamező megnyitása: SZÓKÖZ.
Fel a never sorig, kiválasztása: ENTER.
2. Seed Search String From Selection:
Meghatározza, hogy a keresés modulba automatikusan bekerüljön-e a szerkesztőablakban kiválasztott szöveg.
A Beállítások keresése szerkesztőmezőbe írd be: Seed Search String From Selection.
TAB a Settings fa nézet elhangzásáig, beállítás megnyitása: ENTER.
A kombinált listamező megnyitása: SZÓKÖZ.
Fel a never sorig, kiválasztása: ENTER.
Keresés gyorsgomb - CTRL+F.
Csere gyorsgomb - CTRL+H.
Keresés/Csere ablak megnyitásakor a Find mező az aktív, itt kell megadni a keresendő kifejezést.
A keresés intelligens, már beíráskor a kurzor az aktuális kurzorpozíciót követő első találatra ugrik.
Három ikon segítségével további beállításokat adhatsz meg:
Match Case: Kis- és nagybetűk között különbséget tesz.
Match Whole Word: Csak a teljes szavakat veszi figyelembe.
Use Regular Expression: Reguláris kifejezések használata.
A gombok be/kikapcsolhatók gyorsgombokkal, de mivel nem hangzik el, hogy milyen lett az adott gomb állapota, így nem használható.
A gombok között előre a TAB billentyű, visszafelé a SHIFT+TAB billentyűk leütésével lépkedhetsz.
Meg kell hallgatnod, hogy az adott gombnak milyen az állapota. Bejelölés módosítása a SZÓKÖZ billentyűvel.
Az ALT+ENTER leütésére az összes találat ki lesz jelölve, és multikurzor lesz hozzáadva.
Find in Selection: Csak a kijelölt részben keres/cserél.
Ez a gomb nem érhető el a TAB-bal előre lépéskor, de a Close gomb után SHIFT+TAB-bal igen.
Ennek ellenére itt a gyorsgomb használatát javaslom: CTRL + L.
Csere esetén:
A Replace szerkesztőmezőben kell meg adni, hogy a keresett kifejezést mire kell cserélni.
Preserve Case: Megadható, hogy a találatok cseréjekor a találatokban megőrzi a kis- és nagybetűket.
A CTRL+ALT+ENTER leütésére az összes találat ki lesz cserélve.
Dokumentum formázása:
Akár html, akár css fájl esetén a kiválasztott fájl megnyitása után a dokumentum szintaktikailag formázható.
Helyi menü, LE a Format Document sorig, majd ENTER, vagy SHIFT+ALT+F.
HTML gyorskódolás:
Html jelölők könnyen felvehetők a dokumentumba rövidített kódok beírásával.
Cím beszúrása:
title, majd ENTER.
A létrejött kód: <title></title>, a kurzor a jelölők között van.
Stíluslap hozzárendelése:
link:css, majd ENTER.
A létrejött kód: <link rel="stylesheet" href="style.css">, a csatolandó fájl neve van kijelölve.
Kép beszúrása:
img, majd ENTER.
A létrejött kód: <img src="" alt="">, a kurzor az src tulajdonság értékhelyén, a két idézőjel között van.
Táblázat sor és cellák beszúrása:
tr>td*2, majd ENTER.
A létrejött kód: <tr><td></td><td></td></tr>, a kurzor az első cellajelölők között van.
Táblázat cellák beszúrása tartalommal:
td{indulás}+td{érkezés}, majd ENTER.
A létrejött kód: <td>indulás</td><td>érkezés</td>, a kurzor az utolsó záró cellajelölő után van.
FONTOS! A kódok utolsó karakterének beírása után kell ENTER-t ütni, ha már elmozdítjuk a kurzort valamerre, nem fogja végrehajtani az utasítást.
HTML elemek tulajdonságainak módosítása:
Új tulajdonság felvételekor írd be a tulajdonság nevét, egy egyenlőségjelet és egy idézőjelet.
FONTOS: csak egy darab idézőjelet kell írni, mivel a másodikat automatikusan beilleszti, a kurzor pedig a két idézőjel között van, írd be a szükséges értéket.
Szelektorok képezése:
A feladatsorokban pontosan meg vannak határozva, mely szelektorok tulajdonságait kell módosítani.
Jelölő neve szerint: body elem: body, táblázat elem: table.
Azonosító szerint: nav azonosítójú elem: #nav.
Osztály szerint: kiemelt osztályú elem: .kiemelt.
Álosztály szerint: link elemek visited állapota: a:visited.
Attribútum szerint: text típusú input elemek: input[type="text"}.
Vegyes hivatkozás szerint: nav azonosítójú elemen belüli ul elemek: #nav ul,
ajanlat_form azonosítójú elemeken belül a meret osztályú input elem: #ajanlat_form input.meret.
Vissza a feladatsorszámok kiválasztásához