Bemutató kódolása

Nem folytathatod...
A profil oldalra írt bemutatkozásodat nem tudjuk közzétenni, mert a HTML címkék helytelenek. Ha ezzel a problémával találkozol, az azt jelenti, hogy fájlodat HTML módban próbáltad közzétenni. Figyelj oda a szöveg formázásakor!


Sajnos gyakran találkoztok a fenti hibaüzenettel bemutatótok szerkesztése során.

Mint ahogy a hibaüzenet is írja, nagy valószínűséggel nem megfelelőek a HTML tagek formátumai.

Első körben próbáld meg innen ismételten elmenteni. Ugyanis ilyenkor a Howrse bemutatószerkesztője megpróbálja a "saját szájíze" szerint átalakítani a kódot, és az esetek többségében másodszorra gond nélkül elmenti.

Ha továbbra is gond van, akkor ha jártas vagy a HTML-ben, akkor nézd meg a HTML kódot, és javítsd ki a hibákat. Ha alapból nem volt jó a kód, és így próbálod elmenteni a bemutatódat, akkor emellett a hibaüzenet mellett némi "krix-kraxot" is odabiggyeszt  a Howrse bemutató generátora, ahol a hibás kifejezés volt.

Ha nem ismered a HTML-t, akkor sajnos nem tudok segíteni, mert ez nem olyan dolog, amit egyszerűen el lehetne magyarázni.
Azonban vannak, akik szerint némi frissítés, esetleges újra másolás megoldja a problémát. Próbáld ki.

Végső soron, ha sehogy se tudod megoldani a problémát, akkor küldd el nekem levélben a bemutatód HTML kódját, én kijavítom, és visszaküldöm. (Ha viszont nagyon komplex, és sok időt igényelne a hibás részlet(ek) megtalálása, akkor nem tudom garantálni, hogy lesz időm megcsinálni.) Ez esetben kérlek megfelelő tárgyat adj a levelednek, és az elején fogalmazd meg, hogy miért is írsz.

Címkék:

A háttérképpel rendelkező, görgethetős szövegdobozos bemutatók HTML elemekből épülnek fel, amelyeket aztán CSS tulajdonságokkal formázunk kedvünkre.

Nem célom taglalni, mi az a HTML és mi az a CSS, ezek teljes körű használatára se fogok kitérni. Itt csak azokat az információkat osztom meg ezzel kapcsolatban, amelyek feltétlenül szükségesek egy bemutató elkészítéséhez.
(Amennyiben mélyebben érdekel a HTML, és a CSS, keress rájuk a keresőben. Rengeteg weboldal foglalkozik velük.)

1. Hogyan láss neki

Először is szükséged lesz egy háttérképre (ha nem egyszínű hátteret szeretnél használni, hanem egy képet). Erre kell ráhúzni a HTML kódot, amit javasolt valamilyen forráskód-szerkesztő programban megírni, de igazából bármilyen szövegszerkesztő alkalmas a célra.
Akár a legegyszerűbb Jegyzettömb is alkalmas a HTML kód megírására, de egy forráskód-szerkesztő segítségével átláthatóbb lesz a kód. Egy ilyen programot tudok ajánlani: Notepad++. Tökéletesen megfelel a célra. De akinek nem megfelelő, az nyugodtan keressen az Interneten más forráskód-szerkesztőt.
Ha megvan a kiszemelt program, amelyben megírod a kódot, akkor nyisd meg a programot, nyiss egy új, üres dokumentumot, és kezdd el megírni bemutatód kódját. Mentéskor a .html fájltípust válaszd.
Ha ez megvan, nyisd meg (egy fájlkezelőből vagy az Asztalról) az elmentett .html fájlt (kattints rá 2x, és megnyílik az alapértelmezettként használt böngésződben). Így láthatod, hogy hogyan is néz ki a bemutatód.
Ha szükséges, módosíts a kódon, mentsd el, majd frissítsd a már megnyitott .html fájlt (Frissítés vagy F5). Így nyomon követheted bemutatód alakulását, hogyan is fog kinézni, ha kész lesz.

2. Röviden a HTML kódról

Egy weboldal, illetve egy bemutató HTML kódja különböző elemekből épül fel. Minden elem rendelkezik nyitó, illetve záró taggel (ejtsd: teg), és minden tag nyitó kacsacsőrrel (<) kezdődik, és záró kacsacsőrrel (>) végződik, a nyitó és záró tag között pedig található maga az elem, illetve annak tulajdonságai. A záró tagben található egy perjel is.
Példa: <div>szöveg</div>
Ezzel létrehoztunk egy dobozt, amelybe a "szöveg" feliratú szöveget helyeztük.
A bemutatókészítés során ez a <div> elem az egyetlen HTML elem, amire szükségünk lesz.

3. A HTML kód felépítése

Ezek a bemutatók dobozokból, úgynevezett div-ekből állnak, és úgy épülnek fel, hogy van egy nagy doboz - ez alkotja a bemutató háttérképét - és ezen belül, illetve e fölött helyezkednek el a kisebb dobozok - ezek a szövegdobozok.

Egy bemutató alapfelépítése a következőképpen néz ki:
(A // mögött található rész a kommentár.)
<div> // bemutató kezdete
   <div> // első szövegdoboz kezdete
      szöveg szöveg szöveg // első szövegdobozban található szöveg
   </div> // első szövegdoboz vége
   <div> // második szövegdoboz kezdete
      szöveg szöveg szöveg // második szövegdobozban található szöveg
   </div> // második szövegdoboz vége
</div> // bemutató vége

Még egyszer a felépítés, az átláthatóság kedvéért kommentár nélkül:
<div>
   <div>
      szöveg szöveg szöveg
   </div>
   <div>
      szöveg szöveg szöveg
   </div>
</div>

(A behúzásoknak nincsen jelentősége, ez csupán programozói szokás a könnyebb átláthatóság érdekében. Általában beljebb kezdjük a beljebb ágyazott elemeket.)

Így van egy dobozunk, amiben van 2 másik doboz, benne szöveg. Jelenleg A bemutatónk struktúrája így néz ki:

De mivel semmi semmi formázás nincs a <div> elemeken, ezért valójában csak ennyi látszik belőle:


Ezzel gyakorlatilag fel is építettük a bemutatónkat. Már csupán csak nincsenek pozicionálva a szövegdobozaink, nincsenek méretezve (így pontosan akkora méretet vesz fel, mint amekkora a benne található szövegnek szükséges, a lehető legjobban elterülve), nincsen beállítva se szín, se betűtípus...
Itt jön képbe a CSS, melynek segítségével személyre szabhatjuk szövegdobozainkat.

4. Röviden a CSS-ről

A CSS egy úgynevezett stílusleíró nyelv, amely arra szolgál, hogy mindenféle módon formázhassuk a weboldal elemeit. Méretezhetjük, pozicionálhatjuk, színezhetjük, betűtípust és betűméretet adhatunk meg, forgathatjuk, stb...
A CSS-ben tulajdonságok vannak, és ezeknek a tulajdonságoknak adhatunk meg különféle paramétereket.
Példa: color: #ea0e0e;
Itt a color (betűszín) a tulajdonság, a #ea0e0e pedig a paraméter. Ez azt jelenti, hogy az elem betűszínét beállítjuk arra a színre, amely a #ea0e0e hexa színkódot viseli.
További példák:
font-family: Arial → A betűtípust beállítjuk Arial-ra.
width: 200px → Az elem szélessége 200 pixel.
height: 300px → Az elem magassága 300 pixel.

Röviden a hexa kódról

Ne menjünk bele a részletekbe. Ami számotokra fontos az az, hogy a számítástechnikában minden színárnyalatnak megvan a maga hexa kódja. Ezeket a kódokat kell használni egy weboldal (esetünkben bemutató) felépítése során a színezéshez.
Ha rákerestek arra, hogy hexa kód, vagy hexa code, vagy hexa color, akkor számos oldalt fogtok találni, amelyen kiválaszthatjátok a kívánt színt, és megkapjátok vele együtt annak hexa kódját is, de a komolyabb képszerkesztőprogramok is kiírják a szín hexa kódját a színválasztáskor.

Innen is kiválaszthatjátok a kívánt színt, majd a Hex szövegmezőben található színkódot használhatjátok:

 
/forrás: 2 Create a Website/

Röviden az RGB színkeverésről és az rgba() paraméterről:

A kijelzővel rendelkező készülékek RGB színkeveréssel állítják elő a színeket, vagyis 3 alapszín, a piros (Red)zöld (Green)kék (Blue) összekeverésével.
Ezért a számítástechnikában a színeket a hexa kód mellett megadhatjuk rgb kóddal, amelyre itt egy...
Példa: rgb(19,91,21)
Az első szám jelzi a piros mértékét, a második a zöld mértékét, a harmadik a kék szín mértékét, és mindegyik szám 0 és 255 közötti értéket vehet fel. A fekete az rgb(0,0,0), a fehér pedig az rgb(255,255,255).
A fenti színválasztóban szintén megtaláljátok az adott szín piros (Red), zöld (Green), illetve kék (Blue) értékét, de ezt már akár az egyszerű Paintben is megnézhetitek színválasztás során.
S most jön az, amiért ezzel a színkóddal is szeretnélek titeket megismertetni.
Ezzel a kóddal beállíthatjuk az elem úgynevezett alfáját is, más szóval az áttetszőségét változtathatjuk. Az áttetszőséget jelző érték 0-tól 1-ig terjedő érték lehet, mely tartományban a 0 a teljesen átlátszó, az 1 teljesen átlátszatlan (vagyis eredeti formájában meglévő) elemet jelenti. Ehhez csupán egy "a" betűt kell az rgb mögé írni, majd 4. adatként megadni az áttetszőség mértékét.
Példák:
rgba(19,91,21,0.5)
Ez azt jelenti, hogy az elem rgb(19,91,21) színezetű és 50%-osan áttetsző.
rgba(220,34,52, 0.1) - az elem rgb(220,34,52) színezetű és csak 10%-osan áttetsző, ekkor már alig látszik.
rgba(220,34,52,0.8) - az elem rgb(220,34,52) színezetű és 80%-osan áttetsző, az elem háttérszíne teljesen jól látható, de látható, ha van mögötte más is.

5. A CSS kód felépítése

A következő lépésben bele ágyazzuk a HTML elemünkbe a CSS kódot. Ez a style HTML tulajdonság alkalmazásával tehetjük meg. A CSS tulajdonságokat a style="" kifejezés 2 idézőjele közé kell írni. A tulajdonságok sorrendje mindegy, de minden egyes tulajdonság-paraméter páros után pontosvesszőt (;) kell írni!

Példa:
<div style="width:400px; height: 200px; font-family:Arial;"> // Ez egy 400 pixel széles, és 400 pixel magas bemutató lesz, melynek minden eleme Arial betűtípust használ (hacsak valamelyik elem másképp nem rendelkezik)
   <div style="width: 300px; height: 100px; color: #ea0e0e;"> // Ez egy 300 pixel széles és 100 pixel magas szövegdoboz, melynek betűi #ea0e0e színkódú színnel vannak írva, Továbbra is Arial betűtípussal.
      szöveg szöveg szöveg // Az itt található szöveg mind #ea0e0e színárnyalattal és Arial betűtípussal van szedve
   </div> // első szövegdoboz vége
   <div style="width: 200px; height: 70px; color: #24B528; font-family: Tahoma;"> // Ez egy 200 pixel széles és 70 pixel magas szövegdoboz, melynek betűi már #24B528 színkódú színnel vannak írva, és már nem Arial, hanem Tahoma betűtípussal
      szöveg szöveg szöveg // Ez már #24B528 színű és Tahoma betűtípussal van írva.
   </div> // második szövegdoboz vége
</div> // bemutató vége

Még egyszer a kommentár nélkül:
<div style="width:400px; height: 200px; font-family:Arial;">
   <div style="width: 300px; height: 100px; color: #ea0e0e;">
      szöveg szöveg szöveg
   </div>
   <div style="width: 200px; height: 70px; color: #24B528; font-family: Tahoma;">
      szöveg szöveg szöveg
   </div>
</div>

Jelenleg a bal oldali módon épül fel a bemutatónk, de mivel körvonalat nem adtunk meg a dobozoknak, ezért csak a jobb oldali képet látjuk.
  


Így épül fel egy bemutató.
Most, hogy már a módszert megtanultuk, megosztom a bemutatókészítés során leggyakrabban alkalmazott CSS tulajdonságokat és lehetséges paramétereit.

6. CSS tulajdonságok

FONTOS! A float: left; tulajdonságot mindig adjuk hozzá az elemhez, különben nem fogjuk tudni megfelelően pozicionálni az elemeket.

width - elem szélessége pixelekben kifejezve
Lehetséges érték: bármely 0 vagy pozitív, egész szám.
Példa: width: 534px;
Próbáld ki itt!

height - az elem magassága pixelekben kifejezve
Lehetséges érték: bármely 0 vagy pozitív, egész szám.
Példa: height: 728px;
Próbáld ki itt!

margin-left - az elem bal oldali külső margója (az elemtől balra lévő üres rész szélessége) pixelekben kifejezve
Külön szeretnék említést tenni erről a tulajdonságról, ugyanis a szélesség és magasság mellett a külső margók mérete a legfontosabb tényező.
Ez a tulajdonság az elem bal oldali külső margóját adja meg. Minél nagyobb ez a szám, annál nagyobb lesz az üres hely az elem bal oldalán, az elem mellett balra, tehát annál inkább jobbra lesz eltolva az elem.
Lehetséges érték: bármely 0 vagy pozitív, egész szám.
Példa: margin-left: 25px;
Próbáld ki itt! (Pixelt használj centiméter helyett!)

margin-top - az elem felső külső margója (az elem feletti üres rész magassága) pixelekben kifejezve
Hasonlóan működik, mint a bal oldali külső margó. Minél nagyobb ez az érték, annál több üres hely lesz az elem felett, tehát annál inkább lejjebb fog csúszni az elem.
Lehetséges érték: bármely 0 vagy pozitív, egész szám.
Példa: margin-top: 25px;
Próbáld ki itt!

(A jobb oldali és alsó külső margókra nincs szükségünk.)

background - az elem háttere
Lehetséges érték:
háttérkép esetén: url(http://www.valami.hu/kep-neve.jpg) - a zárójelek között a kívánt kép pontos URL-jét (linkjét) kell megadni.
háttérszín esetén: bármely érvényes hexa kód, vagy rgb()/rgba() kód
Példa:
background: url(http://hunhowrse.hu/0-bemutatok/header-bm2.png);
background: #24B528;
background: rgb(20,53,123);
background: rgba(32,43,56,0.9);
A background tulajdonságnak meg lehet adni egyszerre háttérszínt és háttérképet is. Így alul lesz a háttérszín, fölötte helyezkedik el a háttérkép.
Példa:
background: url(http://hunhowrse.hu/0-bemutatok/header-bm2.png) #b5d276;
Próbáld ki itt! (A többi adattal - pl. top, left, fixed, center, repeat, no-repeat, stb... - nem kell törődnöd.)

color - az elemben található szövegezés színe
Lehetséges érték: bármely érvényes hexa kód vagy rgb()
Példa:
color: #24B528;
background: rgb(20,53,123);
background: rgba(32,43,56,0.9);
Próbáld ki itt!

font-family - az elemben található szövegezés betűtípusa
Lehetséges érték: bármely létező betűtípus
(Megjegyzendő: A számítógép csak azokat a betűtípusokat jeleníti meg, amely a személy számítógépére fel van telepítve. Tehát például ha te olyan betűtípust adsz meg, ami a te számítógépedre fel van telepítve, de egy másik ember gépére nincsen, akkor - bár te rendesen látod a betűket a saját gépeden - az ő gépe valamilyen alap rendszer betűtípussal fogja azt helyettesíteni. Ezért érdemes csak olyan betűtípust megadni, amely megtalálható az alap rendszer betűtípusok között.)
Példa:
font-family: Arial, sans-serif; → Elsődlegesen Arial betűtípust próbál használni a rendszer, ha az nincs feltelepítve a felhasználó gépére, akkor valamilyen nem talpas betűtípust használ.
font-family: Georga, Times New Roman, serif; → Elsődlegesen Georga betűtípust próbál használni, ha az nincs telepítve a felhasználó számítógépére, akkor Times New Romant, ha az sincs, akkor valamilyen talpas betűtípust.

font-size - az elemben található szövegezés betűmérete pixelekben kifejezve
Lehetséges érték: bármely 0 vagy pozitív, egész szám
Példa: font-size: 12px;
Próbáld ki itt! (Pixeleket használj százalék helyett!)

padding - az elem belső margója pixelekben kifejezve
Azt adja meg, hogy a szöveg milyen távolságra helyezkedjen el az elem szélétől (befele). Ez a klasszikus értelemben vett margó.
Lehetséges érték: bármely 0, vagy pozitív egész szám
Példa: padding: 10px;
Ez esetben az elem mindegyik margója körben rendre 10-10 pixel lesz.
Azonban a margókat lehet egyesével is állítani, ha több értéket adunk meg.
Példa: padding: 10px 20px;
Ez esetben 10 pixel lesz az alsó és a felső margó, és 20 pixel lesz a bal oldali és a jobb oldali margó.
Példa: padding: 10px 15px 20px 30px;
Ez esetben 10 pixel lesz a felső margó, 15 pixel a jobb oldali margó, 20 pixel az alsó margó, és 30 pixel a bal oldali margó.
Tehát ha 1 adatot adunk meg (padding: 10px;), akkor mind a 4 margó körben ezzel az értékkel fog rendelkezni. Ha 2 adatot adunk meg (padding: 10px 20px;), akkor a felső-alsó, illetve bal-jobb margó párokat együtt tudjuk állítani. Ha 4 adatot adunk meg (padding: 10px 15px 20px 30px;), akkor pedig egyesével, külön-külön tudjuk állítani a margókat a felső-jobb-alsó-bal sorrendet tartva.
Próbáld ki itt! (Pixeleket használj centiméter helyett!)

overflow - az elem szövegének és az elem görgetősávjának viszonyát fejezi ki
Lehetséges értékek:
visible - ha a szöveg több, mint a rendelkezésre álló hely (vagyis az elem mérete), akkor egyszerűen túlfolyik az elemen
auto - automatikusan érzékeli, hogy kell-e vagy nem kell-e görgetősáv
scroll - mindig van görgetősáv
hidden - a görgetősáv rejtve marad akkor is, ha a szöveg túllóg az elemen, és a túlfolyó szöveg nem látható
Példa: overflow: auto;
Próbáld ki itt és nézd meg itt az eredményt.
Figyelem! Ezt érdemes mindig auto-ra állítani a szövegdobozok esetén (a háttér esetén nem kell megadni)

border - az elem körvonala
Ennek 3 paramétert kell megadni: vastagság, típus, szín
Lehetséges értékek (csak a leggyakrabban használtakat írom le):
vastagság - bármely 0 vagy pozitív, egész szám
típus - solid (sima), dotted (pontozott), dashed (szaggatott vonal), double (dupla)
szín - bármely érvényes hexa vagy rgb/rgba kód
Példa:
border: 1px solid #24B528; (1 pixel vastagságú, sima, #24B528 színű)
border: 3px dotted #135B15; (5 pixel vastagságú, pontozott, #135B15 színű)
border: 2px dasehd rgb(20,53,123);
border: 5px double rgba(32,43,56,0.9);
Próbáld ki itt és nézd meg itt az eredményt.

-webkit-transform
-moz-transform
-o-transform
Az elem elforgatásának mértéke, fokban kifejezve.
Ez a 3 elem gyakorlatilag teljesen ugyanazt csinálja, de a különböző böngészőkben történő megjelenítés miatt szükség van mind a 3 tulajdonságra. (A -webkit-transform tulajdonság a Mozilla Firefox böngészőnek ad utasításokat, a -moz-transform a Google Chrome-nak és a Safarinak, az -o-transform pedig az Operának. Az Internet Explorerben nem lehet ilyen finom mértékű forgatásokat generálni.)
Lehetséges értékek: bármely egész szám
Példa:
-webkit-transform:rotate(5deg); -moz-transform:rotate(5deg);-o-transform:rotate(5deg);
-webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg);-o-transform:rotate(-3deg);
Az első esetben 5 fokkal jobbra forgattuk el az elemet, a második esetben 3 fokkal balra.
Próbáld ki itt!


Most, hogy minden szükséges információ a birtokodban van, javaslom, kezdj el gyakorolni.
Használhatod akár a Howrse-t is, és a bemutatószerkesztőben gyakorolsz a Normál és a HTML mód között váltogatva. (Módosítasz kódon HTML módban, majd megnézed Normál módban, hogy mi változott, ismét módosítasz - ha szükséges - a kódon, megnézed, mi változott, illetve mit kellene változtatni.)

Ne felejtsétek el a style esetén az egyenlőségjelet, idézőjeleket, a CSS tulajdonság-paraméter párosok után pedig a pontosvesszőt.

Itt van egy szövegdobozos sablon egy, amely tartalmazza a legfontosabb CSS tulajdonságokat. Neked csak ki kell tölteni a megfelelő értékekkel. 

<div style="width:px;height:px;background:url('');font-family:;font-size:12px;">
   <div style="width:px;height:px;margin-left:px;margin-top:px;float:left;overflow:auto;">
      text text text
   </div>
   <div style="width:px;height:px;margin-left:px;margin-top:px;float:left;overflow:auto;">
      text text text
   </div>
   <div style="width:px;height:px;margin-left:px;margin-top:px;float:left;overflow:auto;">
      text text text
   </div>
   <div style="width:px;height:px;margin-left:px;margin-top:px;float:left;overflow:auto;">
      text text text
   </div>
   <div style="width:px;height:px;margin-left:px;margin-top:px;float:left;overflow:auto;">
      text text text
   </div>
   <div style="width:px;height:px;margin-left:px;margin-top:px;float:left;overflow:auto;">
      text text text
   </div>
   <div style="width:px;height:px;margin-left:px;margin-top:px;float:left;overflow:auto;">
      text text text
   </div>
</div>

Címkék:

Aki nem ért a CSS (és egy picit a HTML) nyelvhez, annak előbb ajánlom a HTML alapú bemutató készítése című bejegyzést. Ameddig meg nem tanulod a CSS (és a legalapabb szinten a HTML) nyelv használatát, addig érdemtelen ezzel a cikkel foglalkoznod.

A szövegdobozok görgetősávját az alábbi módszerrel lehet eltüntetni.

Egy szövegdoboz helyett kettőre lesz szükségünk, melyeket egymásba ágyazunk. A külső doboz overflow tulajdonsága hidden, a belső doboz overflow tulajdonsága auto kell legyen. A belső szövegdoboznak azonos méretekkel kell rendelkeznie, és 17 pixelnyi jobb oldali, illetve alsó paddingot kell adni, mint a külső dobozé.

Íme egy konkrét példa:

<div style="width:300px; height:200px; overflow:hidden;">
   <div style="width:300px; height:200px; overflow:auto; padding: 0 17px 17px 0;">
      szöveg
   </div>
</div>


Ez pedig a mindenkor érvényes sablon:

<div style="width:Xpx; height:Ypx; overflow:hidden;">
   <div style="width:Xpx; height:Ypx; overflow:auto; padding: 0 17px 17px 0;">
      szöveg
   </div>
</div>

 

Pozícionálni a külső szövegdobozt kell, vagyis a külső szövegdobozt kell ellátni a megfelelő margókkal.

Erre is egy példa:

<div style="width:300px; height:200px; overflow:hidden;
margin-top:50px; margin-left:20px;">
   <div style="width:300px; height:200px; overflow:auto; padding: 0 17px 17px 0;">
      szöveg
   </div>
</div>


(A szövegdobozok további tulajdonságai nem mérvadóak.)

Címkék:

Az alábbi cikkben elmagyarázom, mi okozza a túl hosszú bemutatót, miközben "alig van" valami a bemutatóban, csupán 1-2 kép, és egy kis rövid szöveg.

Röviden: Van egy vagy több kép a bemutatódban, aminek rettentően hosszú a hivatkozási útvonala (linkje). Távolítsd el ez(eke)t a képe(ke)t.

Magyarázat:

A rendszer a bemutatóban található – HTML – karaktereket számolja, nem pedig az egyes objektumokat (mint pl. a kép). A bemutató mérete/hosszúsága 20.000 karakterre van korlátozva (maximálisan 19.999 karaktert írhatsz), s ebbe beletartozik minden egyes betű, szóköz, írásjel, nyitó és záró tagek, formázások szövege, speciális jelek. (A speciális jelek pedig valójában több karakterből – kódból – állnak.)

A karakterek számolása során nem a Normál módban látható karakterek kerülnek megszámolásra, hanem a HTML módban látható teljes HTML kód, s annak minden egyes kacsacsőre, pontosvesszője, idézőjele...

Éppen ezért a problémát bizonyos képek, illetve annak URL-címe (linkje) szokta jelenteni.
Akkor szokott előfordulni, hogy túl hosszú a bemutató - miközben "alig van" benne valami, ha egy olyan képet illesztünk be, aminek linkként nem is a kép URL-jét adjuk meg, hanem magát a képet, bizonyos kódolt formában.

Például itt van ez a kép:

Ennek az elérési útvonala (linkje), ami igazából maga a fájl:

data:image/jpeg;base64,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"

Láthatjuk, hogy ez egy elég hosszú karakterlánc; egészen pontosan 10.983 karakterből áll.

Ha beillesztünk egy ilyen képet, azzal máris a bemutatónk több, mint felét elfoglaltuk.

Megoldás

1. Egyszerűen töröld ki ezt a képet a bemutatódból.

Lépj a bemutatód szerkesztési oldalára, kattints a HTML kód gombra, és nézd meg, van-e benne egy ehhez hasonló bődületesen hosszú karakterlánc. Ha van, akkor töröld, s a hozzá tartozó teljes  taget.
Ha nem értesz a HTML-hez, akkor HTML módban törölj bele a hosszú karakterláncba (törölj 5-10 sort), majd válts át Normál nézetre, keresd ki a bemutatódból azt a képet, amelyik hibásan vagy egyáltalán nem jelenik meg, és töröld.
Íme a fenti kép hibás megjelenése, miután beletöröltem pár helyen.

 

2. Ha meg szeretnéd tartani a képet, akkor a következőket csináld:

Másold ki a vágólapra a kép linkjét (kijelölöd, Ctrl+C).
Nyisd meg a Google képkeresőjét. Kattints a keresőmezőben található fényképezőgépre  (Keresés kép alapján). Illeszd be az előugró szövegmezőbe a kép linkjét (Ctrl+V), majd nyomd le aKeresés kép alapján gombot.
A találati oldalon lejjeb tekerve olvashatod, hogy "Ezt a képet tartalmazó oldalak". Kattins valamelyik képre (a képek alatt jelzi, hogy melyiknek mekkora a mérete), majd a megjelenő oldalon kattintsjobb egérgombbal a képre, és válaszd a Kép másolása opciót.
Innen már egy egyszerű beillesztéssel (Ctrl+V) beillesztheted a bemutatódba Normál módban a képet.

Címkék:

Az alábbiakban láthattok néhány szövegdobozt, megadva bennük a szélességüket és magasságukat, segítve ezzel azt, hogy könnyebben megadhassátok a megfelelő méreteket a HunHowrse Layout Generátorában.

A méretek szélesség x magasság formában lesznek megadva, természetesen pixelekben.

100x100
100x150
150x100
200x100
300x100
400x100
200x300
300x200
500x200
325x187
410x120
 

Remélem ennyi referencia elegendő ahhoz, hogy a megfelelő méretet sikerüljön beállítani a szövegdobozoknak, és ne legyenek se túl nagyok, se túl kicsik.

A margók méretei pontosan ugyanígy néznek ki.

Címkék:

Bemutatód szerkesztésénél HTML módban (ehhez kattints a HTML kód feliratú zöld gombra jobb oldalt) bemutatód legelejére írd be az alábbi kódrészletet:

<div style="cursor:url(),default;">

A zárójelek közé másold be a kurzor URL-címét.

Bemutatód legvégére (továbbra is HTML módban) pedig az alábbi kódrészletet:

</div>

Mentsd el a bemutatód.

Hol találsz kurzorokat

Lépj a Cursors-4U oldalra. Itt rengeteg kurzor között tudsz válogatni. Válaszd ki a neked leginkább tetsző kurzort. A Option #1 - Universal CSS/HTML Code címmel rendelkező szövegdobozból jelöld ki és másold ki a kurzor URL-címét, amely http://-vel kezdődik, és .cur a vége. Pl. http://ani.cursors-4u.net/nature/nat-11/nat1046.cur
Ezt az URL-t másold a fenti kódban a zárójelek közé.

Saját készítésű kurzor

A választott képet nyisd meg egy képszerkesztővel, és kicsinyítsd le akkorára, amekkorában szeretnéd kurzorként viszont látni. Nem ajánlatos 35×35 pixel méretűnél nagyobbra állítani, mert az élezhetetlenné teszi a bemutató böngészését. Ha beállítottad a kívánt méretet, mentsd el .png formátumban. Innentől a Képfeltöltés - Kép linkjének kinyerése c. cikk Ha egy a számítógépeden lévő képet szeretnél alkalmazni... bekezdés lépéseit kövesd.
Az így kapott URL-t másold a fenti kódban a zárójelek közé.

Címkék:

Gyorslinkek

Bejelentkezés

Facebook – a hírhordozó

Ha értesülni szeretnél minden új hírről és cikkről, valamint a cikkekben történt frissítésekről, akkor KÖVESD (ne csak "Tetszik"-eld, kövesd) a HunHowrse Facebook oldalát. Így abszolút minden újdonságról értesítőt kapsz.
Ehhez a FB oldalon kattints a "Tetszik" gombra, majd vidd vissza az egeret a "Tetszik" gomb fölé, és az "Értesítések" blokkban kattints "Az összes bekapcsolása" opcióra.

 
 
 
 
 

Legutolsó hozzászólások

Vendég - chenlixiang
2018.4.17chenlixianghttp://www.adidassoccer.in.net
http://www.nikekyrie2.us.com
http://www.supra...
Vendég - chenlixiang
2018.4.17chenlixianghttp://www.adidassoccer.in.net
http://www.nikekyrie2.us.com
http://www.supra...

Bemutatókészítés

 
 
Copyright© 2012 HunHowrse | createdy by: melvicia
A weboldalon található cikkek a HunHowrse tulajdonát képezik. Ellopni vagy sajátodként feltűntetni szigorúan tilos.
A weboldal semmilyen része sem áll kapcsolatban ~HunHorse6 felhasználónevű játékossal, vagy bármelyik más moderátorral, illetőleg a Howrse magyar vagy külföldi szerkesztőségével.

A weboldal cookie-kat használ, hogy a lehető legjobb felhasználói élményt nyújthassa.

Ennek elfogadásával beleegyezel a cookie fájlok teljes weboldalon történő használatába.

Elfogadom