logó Nyílt forráskódú
blogmotor projekt

Formázási lehetőségek

A W3Suli blogmotor formázókódjai használatának bemutatása.

Képek beillesztése szöveges tartalomba

Minden cikk tartalmazhat összesen 10 db képek, amelyeket a „Cikk képei" oldalon lehet feltölteni és méreteiket valamint megjelenítési módjaikat is itt lehet beállítani.

A cikk képei a tartalom alatt kis méretben mindig megjelennek. Később a felhasználóknak lehetősége lesz ezek nagy méretben történő megtekintésére is. Ezek a képek „Cikk képei” oldalon beállított módon megjeleníthetők a cikk tartalmába ágyazva is.

A beágyazáshoz szüksége kód: #sorszám
Pl.
Kép beillesztése
az első képet jeleníti meg a kiválasztott helyen.
A beágyazáshoz szüksége kódot a szöveges tartalom azon pontján kell elhelyezni, ahol a hozzá tartozó képet kívánjuk megjeleníteni.

Ha a sorszám=1, akkor az első kép kerül beillesztésre.

Megj. Megjelenítésnél a beállított értékektől függetlenül a sorszámok mindig 1-el kezdődnek. A legnagyobb sorszám pedig megegyezik az illesztett képek számával. Ha a képek beállításánál a sorszám mezőben 0 marad, akkor a rendszer automatikusan állítja a megjelenítésnél használt sorszámokat. A sorszám mező beállításakor a megjelenítés sorrendje a beállított értékek növekvő sorrendjével lesz azonos.
Kép beillesztése

Szerző: tesztelek

Közzétéve: 2016-06-23 08:14:53

Címsorok használata

Címsorokat sose használjunk azért mert kitűnik a szövegből!

Weboldalakon a címsoroknak fontos szemantikai jelentése van. Hasonlókép kell kezelni őket, mint egy könyv fejezeteinek és alfejezeteinek címeit.
A blogmotor cikkeiben 2. és 3. szintű címsorok hozhatók létre. Ügyeljünk a struktúrára! A 2. szintű címsorral kezdődő tartalomblokkba létre lehet hozni 3. szintű címsorral kezdődő belső blokkokat (alfejezeteket), de fordítva ne használjuk.

A címsort kijelölő kód:
A címsort kijelölő kód 2

Eredmény:

Címsor 2. szint

Címsor 3. szint

Minden címsor új sorba kerül. Két illetve három egyenlőségjelet kell használni a címsor elejének és végének kijelöléséhez, egy-egy szóközzel elválasztva a címsor szövegétől.
A címsort kijelölő kód 1
A címsort kijelölő kód 2

Szerző: tesztelek

Közzétéve: 2016-05-25 13:45:30

Karakterformázás

Lehetőség van a karakterek megvastagítására, megdöntésére és áthúzására, valamin alsó és felső indexek beállítására.
Karakterformázás kódjai
Így néz ki:
Vastag szöveg: pl. ' Vastag szöveg ' (előtte és utána szóköz)
Dőlt szöveg: pl. ' Dőlt szöveg ' (előtte és utána szóköz)
Felső index: pl. m2 = 'm2'
Alsó index: pl. H2O = 'H2O'
Áthúzott szöveg: pl. 'Áthúzott szöveg
Karakterformázás kódjai

Szerző: tesztelek

Közzétéve: 2016-05-25 13:46:55

Felsorolások készítése

Ha egy ismeretanyagnak a vázlatát kívánjuk, összefüggéseit, vagy egy tevékenységnek az egyes lépéseit kívánjuk bemutatni, akkor gyakran felsorolásokat használunk.
A blogmotor formázókódjai talán a felsorolások készítésében jelentik a legtöbb segítséget, még a HTML nyelvet jól ismerő rendszergazdák számára is.

Számozatlan listák

A számozatlan listaelemeket jelölő kód:
Számozatlan lista kódja
A számozatlan listaelemek megjelenítése:
  • Első szintű listaelem
    • Második szintű listaelem
    • Második szintű listaelem
  • Első szintű listaelem
Minden listaelem új sorba kerül.
A 2 db szóköz után elhelyezett * jelzi, hogy első szintű listaelem következik, amelyet a * -tól szintén szóközzel kell elválasztani.
A 4 db szóköz után elhelyezett * jelzi, hogy második szintű listaelem következik, amelyet a * -tól szintén szóközzel kell elválasztani.

Számozott listák

A számozott listaelemeket jelölő kód:
Számozott lista kódja
A számozott listaelemek megjelenítése:
  1. Első szintű listaelem
    1. Második szintű listaelem
    2. Második szintű listaelem
  2. Első szintű listaelem
Minden listaelem új sorba kerül.
A 2 db szóköz után elhelyezett # jelzi, hogy első szintű listaelem következik, amelyet a #-tól szintén szóközzel kell elválasztani.
A 4 db szóköz után elhelyezett # jelzi, hogy második szintű listaelem következik, amelyet a #-tól szintén szóközzel kell elválasztani.
Számozatlan lista kódja
Számozott lista kódja

Szerző: tesztelek

Közzétéve: 2016-05-26 07:52:02

Linkek beillesztése

Honlapok készítésénél gyakori feladat a forrásra vagy hasznos, ill. érdekes tartalmakra történő hivatkozás.
A W3Suli oldalain HTML kód használata nélkül is lehetőség van linkek elhelyezésére. A felhasználó egy-egy linkre kattintva eljuthat az ajánlott weboldalra, megtekintheti annak tartalmát.
A linkeket a szöveges tartalom megfejelő helyére szögletes zárójelek között a hivatkozott oldal címét függőleges vonallal elválasztva a link feliratát megadva lehet beilleszteni.
Példa: Webfejlesztés
Link beillesztése

* A URL megadásánál használható relatív és abszolút címzés. Abszolút címzésnél szükséges a „https://” ill. „http://” is. pl. „https://w3suli.hu/” Relatív címzéssel csak a belső oldalak érhetők el. Formája: „/?f0=Felhasznaloi_kezikonyv”
Link beillesztése

Szerző: tesztelek

Közzétéve: 2016-05-26 08:49:15

Táblázatok kialakítása

A HTML5 szabvány szerint készülő weblapoknál a táblázatok csupán az adatok rendezett megjelenítésére szolgálnak. (Korábban az oldal szerkezet kialakítására használták.)
A W3Suli oldalain HTML kód használata nélkül is lehetőség van táblázatok kialakítására.
A cellák határolására ekkor két függőleges vonalat kell használni (AltGr + w). A közvetlen utána elhelyezett j betűvel balra, k-val pedig középre lehet igazítani a cella tartalmát.
A táblázat első sorának kiemelt szerepe van. Ez lesz a táblázat fejléce, ami vastagított karakterek használatát is eredményezi.
FONTOS! Minden sorban azonos számú cellák kell elhelyezni!
1 példa:
Táblázat kialakítása 1
A táblázat fejlécének 1. cellája A táblázat fejlécének 2. cellája
Középre igazított cella Balra igazított cella;
Középre igazított cella Jobbra igazított cella;
2 példa:
Táblázat kialakítása 2
Termékkód Megnevezés Ár
B101234 Búgócsiga 2100 Ft
CSL2314 Csapkodó lepke 1821 Ft
Táblázat kialakítása 1
Táblázat kialakítása 2

Szerző: tesztelek

Közzétéve: 2016-05-26 09:23:49