Webszerkesztés

Emmet rövidítések használata

Az Emmet egy automatikus kódkiegészítő, ami meggyorsítja a HTML és CSS kódolást.

A rövidítés beírása után a rövidítés feloldása a T billentyűvel történik.

Emmet rövidítések szintaxisa HTML fájlban

Meta elemek

Karakterkódolás:

meta:utf ⇒

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

Stíluslap csatolása:
link:css vagy

css ⇒

<link rel="stylesheet" href="styles.css">

Body elemek

Az elemre a nevével lehet hivatkozni: a, p, div, option, body
Gyerek elem létrehozásához egy > jelet kell elé írni: b>i, div>p
Testvér elem létrehozásához egy + jelet kell írni: br+input
A * operátorral megadható, hogy az adott elemet hányszor kell kiírni:
option*2 ⇒

<option value=""></option>
<option value=""></option>

A $ operátorral számozható az elem szövege, vagy akár value attribútuma is:
option[value=$] ⇒

<option value="1"></option>

A @ operátorral megadható a számozás kezdő értéke:
option[value=$@3]*3 ⇒

<option value="3"></option>

<option value="4"></option>

<option value="5"></option>

Az elem szöveges tartalmát kapcsos zárójelek között kell megadni:
p{Email} ⇒

<p>Email</p>

Az elem attribútumait szögletes zárójelek között kell megadni, először a tulajdonság, majd egy egyenlőségjel után az érték szerepel;
(Idézőjelet csak többszavas meghatározásoknál szükséges megadni!) input[name=email] ⇒

<input type="text" name="email">

Néhány kódrövidítés minta a feladatmegoldásokból:

option[value=egyéb]

option elem létrehozása, melynek value értéke egyéb.

option[value=Szo]{szombat}

option elem létrehozása, melynek value értéke: Szo, tartalma: szombat.

input:s[name=ok value="Űrlap küldése"]

submit gomb létrehozása, melynek name értéke: ok; value értéke: Űrlap küldése.

option[value=$]*2

option elem létrehozása, melynek value értéke 1-gyel kezdődő számozás, és ebből 2 db legyen.

option[value=$@3]{$@3}*4

option elem létrehozása, melynek value értéke 3-mal kezdődik, valamint tartalma is 3-mal kezdődik, és ebből legyen 4 darab.

tr>td{Szombat}+td

Táblázatsor létrehozása, mely tartalmaz egy táblázatcellát, melynek tartalma: Szombat, és egy másik táblázatcellát, melynek tartalmát utólag lehet megadni.

p{Email cim}>br+input[name=email]

Egy bekezdés (p) elem létrehozása, melynek tartalma: Email cim, tartalmaz egy sortörést és egy text típusú input elemet, mely name jellemzője: email.

p>div{E-mail cim:}+div>input[name=email]

Egy bekezdés (p) elemen létrehozása, melyen belül van két div elem. Az első divben a felirat (E-mail cim:), a második divben pedig egy text típusú beviteli mező van, melynek name értéke: email.

szepirodalom

input:r[name=$# value=$# id=$#]+{ }+label[for=$#]{Szépirodalmi mű}

Egy rádió gomb létrehozása, melyhez tartozik címke is. Mivel a name, a value, az id, és a for attribútumok értéke azonos, ezt a szót beírjuk a kódba, majd kijelöljük. Az Emmet kód kicsomagoláskor a $# értékeket behelyettesíti a szepirodalom szóval.

Emmet rövidítések szintaxisa CSS fájlban

A rövidítés első része a tulajdonság nevének rövidítése, majd egy kettőspont után (közvetlenül!) az érték rövidítése következik.
Néhány esetben nincs külön érték megadása, ekkor nem kell a kettőspont!
A legtöbb esetben a kettőspont elhagyása nélkül is megtörténik a rövidítés feloldása, de lehet, hogy nem megfelelő lesz az eredmény, ezért érdemesebb használni!
Számértékek megadása:
Amennyiben egész számot írsz be, pixelben jelenik meg az érték,
ha tizedes törtet írsz, em lesz a mértékegység. A tizedesjel a pont.
Ha egész szám esetén az em mértékegységet szeretnéd használni, akkor a beírt szám után írj egy e-betűt, vagy tizedes alakban add meg a számot.
Ha százalékos értéket szeretnél megadni, akkor a szám után írj egy p-betűt, vagy egy %-jelet.
A rövidítés beírása után a rövidítés feloldása a T billentyűvel történik.

Az alábbiakban csak a feladatsorok megoldásához szükséges kódokat ismertetem!

Háttér formázása

Háttérszín rövidítése: bgc - background-color
A kettőspont után írd be a szükséges szín nevét vagy kódját, a kód feloldása után módosítás már nem szükséges:
bgc:red ⇒ background-color: red;
bgc:#f99 ⇒ background-color: #f99;
Háttérkép rövidítése: bgi - background-image
bgi ⇒ background-image: url('|');
A kód feloldása után a kurzor az url értéknél van, ide kell beírnod a megadott kép elérési útját, nevét, kiterjesztését.
Háttérkép ismétlése: bgr - background-repeat
A kettőspont után írd be a szükséges tájolás kódját, a kód feloldása után módosítás már nem szükséges:
bgr:ry ⇒ background-repeat: repeat-y;
bgr:rx ⇒ background-repeat: repeat-x;

Szöveg formázása

Szövegszín rövidítése: c - color
A kettőspont után írd be a szükséges szín nevét vagy kódját, a kód feloldása után módosítás már nem szükséges:
c:red ⇒ color: red;
c:#066 ⇒ color: #066;
Szövegigazítás rövidítése: ta - text-align
A kettőspont után írd be a szükséges igazításirány rövidítését, a kód feloldása után módosítás már nem szükséges:

ta:l ⇒ text-align: left;

ta:r ⇒ text-align: right;

ta:c ⇒ text-align: center;

Szövegdíszítés rövidítése: td - text-decoration
A kettőspont után írd be a díszítés megnevezésének rövidítést, a kód feloldása után módosítás már nem szükséges:

td:n ⇒ text-decoration: none;

td:u ⇒ text-decoration: underline;

Szövegátalakítás rövidítése: tt - text-transform
A kettőspont után írd be az átalakítás rövidítést, a kód feloldása után módosítás már nem szükséges:
tt:u ⇒ text-transform: uppercase;
Betűköz rövidítése: lts - letter-spacing
A kettőspont után egy számot kell beírnod:

lts:10 ⇒ letter-spacing: 10px;

lts:3e ⇒ letter-spacing: 3em;

lts:2.0 ⇒ letter-spacing: 2em;

lts:5p ⇒ letter-spacing: 5%;

lts:15% ⇒ letter-spacing: 15%;

Karakterek formázása

Betűtípus rövidítése: ff - font-family
Két fő betűtípus családot egyszerű rövidítéssel meg lehet adni, itt nem kell kettősponttal elválasztani a név-érték párt!

ffa ⇒ font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

fft ⇒ font-family: 'Times New Roman', Times, Baskerville, Georgia, serif;

Ha más betűtípust szeretnél megadni:
ff ⇒ font-family: serif;
az érték lesz kijelölve, majd a C+S leütése után megjelenő betűtípus listából választhatsz.
Betűstílus rövidítése: fs - font-style
A kettőspont után írd be a stílus rövidítését, a kód feloldása után módosítás már nem szükséges:
fs:i ⇒ font-style: italic;
Betűvastagság rövidítése: fw - font-weight
A kettőspont után írd be a vastagítás nevének rövidítést, a kód feloldása után módosítás már nem szükséges:
fw:b ⇒ font-weight: bold;
Betűváltozat rövidítése: fv - font-variant
A kettőspont után írd be a betűváltozat nevének rövidítést, a kód feloldása után módosítás már nem szükséges:
fv:sc ⇒ font-variant: small-caps;
Betűméret rövidítése: fz - font-size
A kettőspont után egy számot kell beírnod:

fz:36 ⇒ font-size: 36px;

fz:1.3 ⇒ font-size: 1.3em;

fz:2e ⇒ font-size: 2em;

fz:40% ⇒ font-size: 40%;

fz:10p ⇒ font-size: 10%;

Listajelek rövidítése: list - list-style-type
A kettőspont után írd be a listajelnév rövidítését, a kód feloldása után módosítás már nem szükséges:

list:n ⇒ list-style-type: none;

list:c ⇒ list-style-type: circle;

list:s ⇒ list-style-type: square;

Listajelkép rövidítése: lisi - list-style-image
A kód feloldása után a kurzor pozíciójába írd be: url(''), az aposztrófok között add meg a szükséges kép elérési útját, nevét, kiterjesztését:
lisi ⇒ list-style-image: |;

Táblázatok formázása

Szélesség rövidítése: w - width
A kettőspont után egy számot kell beírnod:

w:70 ⇒ width: 70px;

w:100p ⇒ width: 100%;

w:10e ⇒ width: 10em;

Minimális szélesség rövidítése: miw - min-width
miw:100 ⇒ min-width: 100px;
Függőleges igazítás rövidítése: va - vertical-align
A kettőspont után írd be az igazítás rövidítését, a kód feloldása után módosítás már nem szükséges:
va:t ⇒ vertical-align: top;
Szegély rövidítése: bd - border
A border összetett tulajdonság, az első értéke a vonalvastagság, a második a vonal díszítése, harmadik a vonal színkódja, az egyes értékeket kötőjellel kell elválasztani:
bd:1-dt-red ⇒ border: 1px dotted red;
Szegélyszín rövidítése: bdc - border-color
Oldalanként eltérő szegély esetén a border értéknél meg kell adni az állandó értékeket, vonalvastagság, vonal díszítése:
bd:1-dt ⇒ border: 1px dotted;
A szegélyszínnél pedig meg kell adni az oldalankénti színeket.
Sorrend: felső, jobb, alsó, bal.
bdc:red-#345678-red-#345678 ⇒ border-color: red #345678 red #345678;
Oldalankénti szegélyek rövidítése: b/bd - border
A b rövidítés után az oldalak, top (t), bottom (b), right(r) és left(l) angol szavak rövidítését kell megadni.
A kettőspont után adható meg az értékek rövidítése kötőjellel elválasztva.

bdt:1-s-red ⇒ border-top: 1px solid red;

bdl:2-s-#fff ⇒ border-left: 2px solid #fff;

bdl:1-dotted-#666 ⇒ border-left: 2px dotted #666;

A dt rövidítést nem tudja kibontani, ha nem jelenik meg az Emmet sávban a kibontás, írd ki teljes szóval!
Másik megoldás: snippets.json

Margók beállításai

Margó rövidítése: m - margin
A feladatsorokban sokféle margóbeállítás szerepel, ezek típusait sorolom fel.
Ha weblap minden oldalára 0px méretű margó beállítása szükséges:
m:0 ⇒ margin: 0;
Ha a weblap alsó és felső margója 0 px, jobb és bal margója pedig annyi legyen, hogy a szöveg az oldal közepére kerüljön:
m:0-a ⇒ margin: 0 auto;
Ha a weblap alsó és felső margója megadott px kell legyen, jobb és bal margója pedig annyi legyen, hogy a szöveg az oldal közepére kerüljön. A ? helyére a szükséges számadatot kell beírni:
m:?-a ⇒ margin: ?px auto;
Ha a weblap minden oldalára ugyanazt a megadott értékű margót kell beállítani. A kettőspont után egy számot kell beírnod:
m:10 ⇒ margin: 10px;
Ha a weblap alsó és felső margójának, valamint a bal és jobb margójának egy-egy megadott értéket kell beállítani. A ?-ek helyére két különböző számadatot kell beírni:
m:?-? ⇒ margin: ?px ?px;
Ha a weblap minden oldalára külön-külön meg van adva a margó értéke. A ?-ek helyére négy (különböző) számadatot kell beírni:
m:?-?-?-? ⇒ margin: ?px ?px ?px :px;
Ha a weblap egy oldalára kell beállítani a megadott margót:
A margin rövidítés után a szükséges oldal angol nevének rövidítését kell megadni. A kettőspont után egy számot kell beírnod:
ml:30 ⇒ margin-left: 30px;

Bélés beállításai

Bélés rövidítése: p - padding
Ha weblap minden oldalára ugyanaz megadott méretű bélés beállítása szükséges. A kettőspont után egy számot kell beírnod:
p:10 ⇒ padding: 10px;
Ha a weblap alsó és felső bélésének, valamint a bal és jobb bélésének egy-egy megadott értéket kell beállítani. A ?-ek helyére két különböző számadatot kell beírni:
p:?-? ⇒ padding: ?px ?px;
Ha a weblap egy oldalára kell beállítani a megadott margót:
A padding rövidítés után a szükséges oldal angol nevének rövidítését kell megadni. A kettőspont után egy számot kell beírnod:
pl:30 ⇒ padding-left: 30px;

Kódok összekapcsolása

Egy kódsorban több emmet kód is írható, ezeket +-jellel kell összekapcsolni, az egyes kódok kibontva külön-külön sorba kerülnek:
c:red+fw:b ⇒ color: red;↵ font-weight: bold;

Automatikus kiegészítés

Nem azonos az Emmet rövidítésekkel!
Automatikus kiegészítés engedélyezése vagy tiltása a Beállítások között adható meg.
A Beállítások ablak megnyitása: C+*

Általában ez a funkció nagyon hasznos, de a feladatok megoldása során többször kell egy bekezdést két bekezdéssé alakítani, ekkor először meg kell adni az első bekezdés rész záró jelölőjét, majd az új bekezdés rész nyitó jelölőjét, itt bekapcsolt automatikus kiegészítés esetén megjelenik a záró jelölő is, melyet vissza kell vonni.
A visszavonás történhet a C+z billentyűkombináció leütésével, vagy a felesleges karakterek törlésével.

Ha beírod a HTML fájlba a <p (bekezdés) jelölő elejét, bekapcsolt automatikus kiegészítés esetén a T billentyű leütésére a nyitó és záró jelölő is megjelenik, a kurzor a nyitó és a záró jelölő között lesz.
Emmet rövidítés esetén a p karakter beírása, majd a T billentyű leütésére a nyitó és záró bekezdés jelölő jelenik meg, a kurzor itt is a nyitó és a záró jelölő között lesz. A rövidítés előtt mindenképpen kell egy szóköznek vagy egy írásjelnek lenni!

snippets.json

A gyakran használt, de az Emmet rövidítések között nem szereplő kódjaidhoz, akár HTML-ben, akár CSS-ben saját rövidítéseket hozhatsz létre.
A 21. feladatsortól kezdve alkalmazom az animációkban a saját rövidítéseket!

A Fájlkezelőben egy általad választott mappába vegyél fel egy snippets mappát.
Nyisd meg a VSC-ot, majd a választott mappádat is.
Fájl létrehozásához válaszd a New file... ikont, a szerkesztőmezőbe írd be: snippets.json, majd nyomj Enter-t.

A snippets.json fájlba írd be az alábbi kódsorokat:

A kódokat vesszővel kell elválasztani, az utolsó kódsor után nem kell vessző!

HTML rövidítések

Egy bekezdés kétfelé választása: "pp": "</p>\n<p>"
A kurzor aktuális pozíciójában lezárja az aktuális bekezdést, majd egy sortörés után a kurzor utáni tartalom elé egy újabb, nyitó bekezdés jelölőt szúr be.

Stíluslap: "css": "<link rel=\"stylesheet\" href=\"styles.css\">"
Alapértelmezetten a css rövidítés feloldásakor style.css fájlnevet ad meg a stíluslapnak, de a feladatok során styles.css fájlnevet kell megadni, ezért módosítottam a css rövidítést.

CSS rövidítések

Betűcsaládok:
"fft": "font-family: 'Times New Roman', Times, Baskerville, Georgia, serif", "ffv": "font-family: Verdana, Geneva, Tahoma, sans-serif"
A feladatok szerinti betűcsaládok megadása rövidítéssel.

Szegély:

Amennyiben valamelyik oldal szegélyét állítod be, akkor a dt rövidítést nem tudja feloldani, ezt az alábbi kódok beírásával javíthatod:

"br": "border-right: ${1} ${2:dotted} ${3}",

		"bl": "border-left: ${1} ${2:dotted} ${3}",

		"bt": "border-top: ${1} ${2:dotted} ${3}",

		"bb": "border-bottom: ${1} ${2:dotted} ${3}"

A kód meghívása pl.: bl:2-dt-red, kibontva: border-left: 2px dotted red;

Beállítás

A saját snippets.json fájlodat elérhetővé kell tenned a VSC számára.
A Beállítások ablakban keresd ki az Emmet: Exstensions Path részt.
Nyomd meg az Add Item gombot, és a szerkesztőmezőbe írd be a saját snippets.json fájlod teljes elérési útját, majd nyomd meg az OK gombot.

A ceruza gombra kattintva bármikor módosíthatod, az X-gombra kattintva bármikor törölheted ezt a beállítást.
Módosítás után érdemes újraindítani a VSC programot!