vikitanya
Fejléc

2017. szeptember 15. 

 

 

 

 

Bejelentkezem

Felhasználónév:

Jelszó:
SúgóSúgó
Regisztráció
Elfelejtettem a jelszót
 
M*E*N*Ű
 
SELTECO GIF ANIMATIOR LETÖLTÉS

Kattints a szövegre és töltsd le a Selteco Gif Animátort, amivel szerkeszthetetet bannered, fejléced. KATT IDE

 
Képkezelő

Itt töltheted fel fotóid

 
HTML KEZDŐKNEK

 1.Lecke
Minden kezdet nehéz ?

 Szeretnénk egy honlapot az internetre feltölteni, de nem tudjuk hogyan kezdjünk bele ? Egyszerű, kell egy weblap és egy kiszólgáló/szerver ahova regisztráljuk magunkat ez lehet ingyenes, vagy fizetős (domain név ) Itt találsz egy kis linkgyűjteményt ingyen tárhelyekről.  

Elsőnek kell egy weblap amit fel szeretnénk tölteni.

Nézzünk egy példát. Tölts le egy üres lapot  html szerkezettel. Ha ezt átnevezed index.html - nek akkor ez lesz a kezdőlapod. Nem kell külön beírni semmit, csak amit regisztráltál nevet, mondjuk Jani.uw.hu akkor az index.html fog bejönni mint kezdőlap és a rajta lévő tartalom. Az index.html fájl-t ne mappába töltsd fel, hanem a gyökérkönyvtrába.
Gyökérkönyvtár: Amit közvetlenül töltesz fel a szerverre és nincs külön mappában. A gyökérkönyvtár jön be ha csatlakozol total commanderrel, amit ide teszel, azt közvetlen eléréssel tudod elérni. Ha például feltöltesz egy képet aminek a neve 1.gif akkor az elérése 1.gif lesz. Ha a gyökérkönyvtárba töltesz fel egy images mappát és abba teszed a képet, akkor az elérése: images/1.gif lesz. Ha ezt az üres lapot átnevezted és feltöltötted a regsiztrált oldaladra be kell jönnie a rajta lévő tartalomnak.

A lenti példa egy egyszerű példa a html szerkezet felépítésére. A <html> a böngészőnek mutatja meg, hogy ez nem egy szövegfájl, hanem egy html szerkezetű weblap.. a <head> ez a nyitótag. <title>...</title> Ez az oldalad címe amit adsz a weblapodnak, célszerű olyat  megadni ami jellemzi a honlapodat. Felül a fejlécen fog megjelenni.</head>fejléc vége.<body bgcolor=... a háttérszín, betűszin, hivatkozás szine és a már látogatott link szine határozható meg. ( black helyett használhatsz pl #000000 szinkódot is.
<body> Innen követketzik a tartalma a honlapnak.
Ez egy példa ez fog megjelenni. </body> a szöveg/törzs vége.</html> Így végződik a html dokumentumod.

<html>
<head>
<title>Az oldal címe</title>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">

<body>
Ez egy példa
</body>
</html>

  Kész is van az index.html azaz a kezdőlapunk, de ez így túl üres.....

 

 

 1.Lecke
Minden kezdet nehéz ?


 2.Lecke
Táblázatok, cellák.

Miért van szükségünk táblázatokra ? Mert sokan más más képernyőfelbontást használunk és ha nem    szeretnénk, hogy egy szöveg szétcsússzon, mindenkinél máshol jelenjen meg, akkor táblázatot kell    alkalmaznunk. Egy egyszerű példa táblázat. Ha a magasságot akarod megadni egyszerűen hozzáírod    az első sorhoz, így fog kinézni: <table border="1" width="300" height="40">

<table border="1" width="300">
<tr>
<td>
<p>1sor/1cella</p>
</td>
<td>
<p>1sor/1cella</p>
</td>
</tr>
<tr>
<td>
<p>2sor/1cella</p
</td>
<td>
<p>2sor/2cella</p>
</td>
</tr>
</table>

Eredmény::

1sor/1cella

1sor/1cella

2sor/1cella

2sor/2cella

 


   Nézzük középre igazítva a szöveget.

<table border="1" width="300">
<tr>
<td>
<p align="center">1sor/1cella</p>
</td>
<td>
<p align="center">1sor/1cella</p>
</td>
</tr>
<tr>
<td>
<p align="center">2sor/1cella</p>
</td>
<td>
<p align="center">2sor/2cella</p>
</td>
</tr>
</table>

Eredmény:

1sor/1cella

1sor/1cella

2sor/1cella

2sor/2cella

 


  Nézzük ugyanazt a táblát kicsit másképp: Ha nem px(pixelt) adsz meg méretnek hanem üresen         hagyod, akkor az opera és mozilla másképp jeleníti meg !

<table width="300" style="border-width:1px; border-color:black; border-style:solid;" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="##66CCFF" style="border-width:1px; border-color:red; border-style:solid;">
<p align="center">1sor/1cella</p>
</td>
<td bgcolor="#6699FF" style="border-width:1px; border-color:red; border-style:solid;">
<p align="center">1sor/1cella</p>
</td>
</tr>
<tr>
<td>
<p align="center">2sor/1cella</p>
</td>
<td>
<p align="center">2sor/2cella</p>
</td>
</tr>
</table>

Eredmény:

1sor/1cella

1sor/1cella

2sor/1cella

2sor/2cella

 


  Vagy kombinálhatjuk is:

<table width="300" style="border-width:1px; border-color:black; border-style:none;" cellpadding="0" cellspacing="0">
<tr>
<td style="border-top-width:1px; border-right-width:0px; border-bottom-width:1px; border-left-width:1px; border-color:black; border-style:dashed;">
<p align="center">1sor/1cella</p>
</td>
<td style="border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:0px; border-color:black; border-style:dashed;">
<p align="center">1sor/1cella</p>
</td>
</tr>
<tr>
<td bgcolor="#6699FF" style="border-width:1px; border-color:black; border-style:solid;">
<p align="center">2sor/1cella</p>
</td>
<td bgcolor="#6699FF" style="border-width:1px; border-color:black; border-style:solid;">
<p align="center">2sor/2cella</p>
</td>
</tr>
</table>

Eredmény:

1sor/1cella

1sor/1cella

2sor/1cella

2sor/2cella

  Nézzünk egy táblázatot, amelyben a szöveget igazitjuk.

<table width="300" style="border-width:1px; border-color:black; border-style:solid;" cellpadding="0" cellspacing="0" height="100">
<tr>
<td bgcolor="#6633FF" style="border-width:1px; border-color:red; border-style:solid;" align="left" valign="baseline">
<p>1sor/1cella</p>
</td>
<td bgcolor="#6699FF" style="border-width:1px; border-color:red; border-style:solid;" align="center" valign="middle">
<p>1sor/1cella</p>
</td>
</tr>
<tr>
<td align="left" valign="bottom" bgcolor="#CC6600">
<p>2sor/1cella</p>
</td>
<td align="right" valign="bottom" bgcolor="#6666FF">
<p>2sor/2cella</p>
</td>
</tr>
</table>

 Eredmény:

 

1sor/1cella

1sor/1cella

2sor/1cella

2sor/2cella

 

 


Igazítsuk a táblát a táblázatban.

<table border="1" width="300" align="center">
<tr>
<td>
<p>1sor/1cella</p>
</td>
<td>
<p>1sor/1cella</p>
</td>
</tr>
<tr>
<td>
<p>2sor/1cella</p>
</td>
<td>
<p>2sor/2cella</p>
</td>
</tr>
</table>

Eredmény:

A kéka  főtáblánk. Ezen belül is a táblákát, cellákat lehet helyezni. Ez a tábla Default azaz balra van igazítva a tábla benne pedig középre.( Center)

A kéka  főtáblánk. Ezen belül is a táblákát, cellákat lehet helyezni. Ez a tábla Default azaz balra van igazítva a tábla benne pedig középre.( Center)

1sor/1cella

1sor/1cella

2sor/1cella

2sor/2cella

 

 

 

 

 

 


 Egyszerű gombhatású navigáló tábla. Egy példáját itt is (a letölthető weblapoknál ) megnézheted.

Alapban van egy ötrészes táblánk. Ami jelen esetben 500x20 pixel. Ahoz, hogy ne keljen mindig a gif-et, vagy jpeg gombot cserélni feliratozni, úgy is megoldhatjuk, hogy csinálunk egy ilyen kis táblát, és az elkészített gombot háttérként alkalmazzuk a táblába felirat nélkül

 500x20 tábla:

<table align="center" border="0" cellpadding="0" cellspacing="0" width="500" height="20" bgcolor="#6699FF">
<tr>
<td width="100" style="border-top-width:1px; border-right-width:0px; border-bottom-width:1px; border-left-width:1px; border-color:black; border-style:solid;">
<p align="center">Link1</p>
</td>
<td width="100" style="border-top-width:1px; border-right-width:0px; border-bottom-width:1px; border-left-width:1px; border-color:black; border-style:solid;">
<p align="center">Link2</p>
</td>
<td width="100" style="border-top-width:1px; border-right-width:0px; border-bottom-width:1px; border-left-width:1px; border-color:black; border-style:solid;">
<p align="center">Link3</p>
</td>
<td width="100" style="border-top-width:1px; border-right-width:0px; border-bottom-width:1px; border-left-width:1px; border-color:black; border-style:solid;">
<p align="center">Link4</p>
</td>
<td width="100" style="border-width:1px; border-color:black; border-style:solid;">
<p align="center">Link5</p>
</td>
</tr>
</table>

A táblák: ( Lehet hosszabb, vagy szélesebb is a tábla, vagy a celálk méretét is változtathatod. )

Link1

Link2

Link3

Link4

Link5

 

Link1

 Link2

 Link3

 

Link1

Link2

Link3

Link4

Link5

Ahoz, hogy ezt a táblát kajuk a giffel a háttérben, ahoz ezt a sort kell megváltoztatni :
Erről
<table align="center" border="0" cellpadding="0" cellspacing="0" width="500" height="20" bgcolor="#6699FF">
Erre
<table align="center" border="0" cellpadding="0" cellspacing="0" width="500" height="20" bgcolor="#6699FF" background="gomb1.gif">

Igaz, hogy így nem változik a gomb színe (onmouseover) csak a link, a felirat szine, de így egyszerű a feliratcsere egy gombon, és nem kell előtöltés a képeknek.

              Így fognak kinézni háttérgiffel a táblák:

Link1

Link2

Link3

Link4

Link5

Link1

 Link2

 Link3

Link1

Link2

Link3

Link4

Link5

 A gif pedig egy egyszerű photoshoppal készített kis gif, felirat nélkül. Ha háttérként tesszük   be,  tudjuk gyorsan könnyen cserélni a feliratot. Itt most csak azért félkövér a betű ha rámész az egérrel  mert az oldal alapja.

                        

Természetesen bármilyen alakú giffet tehetsz háttérként, teheted cellánként is, akár más   és más giffet.

  A szöveg szinének változtatását az egérrel való találkozáskor az alapokban megtalálod   részletesen.

  Alkalmazhatod a lenti gomsor szerint is (onmouseover) Ha egérrel rámész, akkor más gif   töltődik be. Erről majd a képek beillesztése  leckében lesz szó.

 Gombháttereket találsz a letöltések menüpont alatt, vagy kattints ide.

 

 

 

 2.Lecke
Táblázatok, cellák.?


 3.Lecke
Szövegformázás.

Célszerű olyan betűtípust választanunk ami a legtöbb ember gépén telepítve van. Ha nem adunk mekhjkg. Ha nem adunk meg típust, akkor a látogató böngészőjének alapbeállításai szerint jelennek meg és az lehet, hogy nem ugyanaz mint ahogy a lapot tervezted. <FONT face="Arial, Verdana, Times New Roman, sans-serif"> Így megadhatod az alapot, de adhastz minden szövegtörzsnek betűtipust betűmértet.

<p><font size="3" face="Arial">ez Arial</font></p>
<p><font size="2" face="Verdana">ez Verdana</font></p>
<p><font size="3" face="Times New Roman">ez Times New Roman</font></p>

Eredmény:
ez Arial
ez Verdana
ez Times New Roman


Szövegdíszítés: 
<b> félkövér lesz. ez Arial
<u> aláhúzott  ez Arial
<i> dőlt  ez Arial
<strike> középen áthúzott  ez Arial

Tehát akkor a teljes sor így fog kinézni: <p><font size="3" face="Arial"><b>ez Arial</font></p>


Adhatunk meg heading azaz <h1>Ide a szöveg<h1> díszitést is.

<h1><font face="Times New Roman">ez Arial</font></h1>

Eredmény:

ez Arial


Színek.

<font color="red">Piros</font>

vagy

<font color="#FF0000">Piros</font>

Mind a kettő ugyanaz, csak az egyík # jellel kezdődik és a hat számmal végződik míg a másik az alapszínek szavait adja meg.


Szöveg hátterének szinezése:

<span style="background-color:red;">Most ez a piros</span>

Eredmény:

 Most ez a piros


Szét is tolhatjuk:

<span style="letter-spacing:10px;">Toljuk sz&eacute;t</span>

Eredmény:

Toljuk szét


<span style="word-spacing:21; letter-spacing:0px;">Toljuk sz&eacute;t de csak a sz&oacute;k&ouml;zt.</span>

Eredmény:

Toljuk szét de csak a szóközt.

 

Szöveg formázása:

Ahogy töbször leírtam a szöveget célszerű formázni, hogy mindig mindenkinek úgy jelenjen meg a veblapunk ahogy mi képzeltük el. Erre egy egyszerű kód amit a forrásba illeszthetünk:

<FONT face="Verdana, Arial, Tahoma, sans-serif" FONT size="2">

 Formázás másképp: Css.

Egy öszetett de egyszerű példa a css hivatkozása:

<style>
<!--
A.type1:link    {color:#000000; text-decoration:none;}
A.type1:visited {color:#000000; text-decoration:none;}
A.type1:active  {color:#FFDD00; text-decoration:none;}
A.type1:hover   {color:#990000; text-decoration:underline;}
A.type2:link    {color:#6600FF; text-decoration:underline;}
A.type2:visited {color:#6600FF; text-decoration:underline;}
A.type2:active  {color:#6600FF; text-decoration:underline;}
A.type2:hover   {color:#000080; text-decoration:underline;}
A.type3:link    {color:##FF9900; text-decoration:none;}
A.type3:visited {color:##FF9900; text-decoration:none;}
A.type3:active  {color:#00CCFF; text-decoration:none;}
A.type3:hover   {color:#FF8000; text-decoration:underline;}
A.type4:link    {color:#FF5577; text-decoration:underline;}
A.type4:visited {color:#FF2234; text-decoration:underline;}
A.type4:active  {color:#445566; text-decoration:underline;}
A.type4:hover   {color:#334455; text-decoration:underline;}
//-->
</style>
<style> script above.
<font size="2">
</font>
</style>
<a class="type1" href="#">hivatkozás</a>
<a class="type2" href="#">hivatkozás</a>
<p><a class="type4" href="#">hivatkozás</a>
<p><a class="type3" href="#">hivatkozás</a>

 Eredménye.( Megnézem )

A hivatkozásnál a megfelelő részre kell hivatkozni: <a class="type1" href="#">hivatkozás</a>
 Ilyenkor az 1-essel jelölt rész szinei érvényesülnek !

 Mi van olyankor ha nem megy a hivatkozás ha átírod a szöveget, nem fog változni a színe ha rámész egérrel ?

Ennek az az oka, hogy törlöd a szöveget a hivatkozásnál, akkor törlöd a hivatkozáshoz tartozó dolgokat is. pl: az én lapjaim esetében a hivatkozás így néz ki:
<a class="type1" href="elérési út">ide írod a hivatkozást.</a>
Ehez tartozik egy style rész is:
<style>
<!--
A.type1:link    {color:#000000; text-decoration:none;}
A.type1:visited {color:#000000; text-decoration:none;}
A.type1:active  {color:#FFDD00; text-decorati0on:none;}
A.type1:hover   {color:#990000; text-decoration:underline;}
//-->
</style> 
Tehát ha nem teszed ezt bele: <a class="type1", akkor nem fog érvényesülni  a css.A teljes sor így fog kinézni:
<a class="type1" href="http://weboldaladcíme.hu">hivatkozás</a> Ha ez nagyon nem megy akkor egy nagyon egyszerű tipp, hogy megtartsd a hivatkozásoknak az eredeti css részeit (pl: ha rámész a szövegre, akkor elszineződik, vagy aláhúzott lesz) A legegyszerűbb ha fogod a szerkesztő programodat ( lehet notepad is ) és a hivatkozást úgy írod át, hogy nem törlöd. Ezt, hogy lehet ? Egyszerű. Van egy hivatkozásod, mondjuk: Fotóalbum. Akkor ezt ne töröld, hanem írj bele a közepébe, monjuk a Fotó-után írd be a te szövegedet legyen: Zenéim: Így fog kinézni:FotóZenéiamalbum. Ezek után töröld a Fotó részt és az album részt és a css megmaradt.  Ezek után csak írd át az elérési utat, ahol a zenéid vannak :))

 3.Lecke
Szövegformázás.


 3.Lecke
Szövegformázás.

Célszerű olyan betűtípust választanunk ami a legtöbb ember gépén telepítve van. Ha nem adunk mekhjkg. Ha nem adunk meg típust, akkor a látogató böngészőjének alapbeállításai szerint jelennek meg és az lehet, hogy nem ugyanaz mint ahogy a lapot tervezted. <FONT face="Arial, Verdana, Times New Roman, sans-serif"> Így megadhatod az alapot, de adhastz minden szövegtörzsnek betűtipust betűmértet.

<p><font size="3" face="Arial">ez Arial</font></p>
<p><font size="2" face="Verdana">ez Verdana</font></p>
<p><font size="3" face="Times New Roman">ez Times New Roman</font></p>

Eredmény:
ez Arial
ez Verdana
ez Times New Roman


Szövegdíszítés: 
<b> félkövér lesz. ez Arial
<u> aláhúzott  ez Arial
<i> dőlt  ez Arial
<strike> középen áthúzott  ez Arial

Tehát akkor a teljes sor így fog kinézni: <p><font size="3" face="Arial"><b>ez Arial</font></p>


Adhatunk meg heading azaz <h1>Ide a szöveg<h1> díszitést is.

<h1><font face="Times New Roman">ez Arial</font></h1>

Eredmény:

ez Arial


Színek.

<font color="red">Piros</font>

vagy

<font color="#FF0000">Piros</font>

Mind a kettő ugyanaz, csak az egyík # jellel kezdődik és a hat számmal végződik míg a másik az alapszínek szavait adja meg.


Szöveg hátterének szinezése:

<span style="background-color:red;">Most ez a piros</span>

Eredmény:

 Most ez a piros


Szét is tolhatjuk:

<span style="letter-spacing:10px;">Toljuk sz&eacute;t</span>

Eredmény:

Toljuk szét


<span style="word-spacing:21; letter-spacing:0px;">Toljuk sz&eacute;t de csak a sz&oacute;k&ouml;zt.</span>

Eredmény:

Toljuk szét de csak a szóközt.

 

Szöveg formázása:

Ahogy töbször leírtam a szöveget célszerű formázni, hogy mindig mindenkinek úgy jelenjen meg a veblapunk ahogy mi képzeltük el. Erre egy egyszerű kód amit a forrásba illeszthetünk:

<FONT face="Verdana, Arial, Tahoma, sans-serif" FONT size="2">

 Formázás másképp: Css.

Egy öszetett de egyszerű példa a css hivatkozása:

<style>
<!--
A.type1:link    {color:#000000; text-decoration:none;}
A.type1:visited {color:#000000; text-decoration:none;}
A.type1:active  {color:#FFDD00; text-decoration:none;}
A.type1:hover   {color:#990000; text-decoration:underline;}
A.type2:link    {color:#6600FF; text-decoration:underline;}
A.type2:visited {color:#6600FF; text-decoration:underline;}
A.type2:active  {color:#6600FF; text-decoration:underline;}
A.type2:hover   {color:#000080; text-decoration:underline;}
A.type3:link    {color:##FF9900; text-decoration:none;}
A.type3:visited {color:##FF9900; text-decoration:none;}
A.type3:active  {color:#00CCFF; text-decoration:none;}
A.type3:hover   {color:#FF8000; text-decoration:underline;}
A.type4:link    {color:#FF5577; text-decoration:underline;}
A.type4:visited {color:#FF2234; text-decoration:underline;}
A.type4:active  {color:#445566; text-decoration:underline;}
A.type4:hover   {color:#334455; text-decoration:underline;}
//-->
</style>
<style> script above.
<font size="2">
</font>
</style>
<a class="type1" href="#">hivatkozás</a>
<a class="type2" href="#">hivatkozás</a>
<p><a class="type4" href="#">hivatkozás</a>
<p><a class="type3" href="#">hivatkozás</a>

 Eredménye.( Megnézem )

A hivatkozásnál a megfelelő részre kell hivatkozni: <a class="type1" href="#">hivatkozás</a>
 Ilyenkor az 1-essel jelölt rész szinei érvényesülnek !

 Mi van olyankor ha nem megy a hivatkozás ha átírod a szöveget, nem fog változni a színe ha rámész egérrel ?

Ennek az az oka, hogy törlöd a szöveget a hivatkozásnál, akkor törlöd a hivatkozáshoz tartozó dolgokat is. pl: az én lapjaim esetében a hivatkozás így néz ki:
<a class="type1" href="elérési út">ide írod a hivatkozást.</a>
Ehez tartozik egy style rész is:
<style>
<!--
A.type1:link    {color:#000000; text-decoration:none;}
A.type1:visited {color:#000000; text-decoration:none;}
A.type1:active  {color:#FFDD00; text-decorati0on:none;}
A.type1:hover   {color:#990000; text-decoration:underline;}
//-->
</style> 
Tehát ha nem teszed ezt bele: <a class="type1", akkor nem fog érvényesülni  a css.A teljes sor így fog kinézni:
<a class="type1" href="http://weboldaladcíme.hu">hivatkozás</a> Ha ez nagyon nem megy akkor egy nagyon egyszerű tipp, hogy megtartsd a hivatkozásoknak az eredeti css részeit (pl: ha rámész a szövegre, akkor elszineződik, vagy aláhúzott lesz) A legegyszerűbb ha fogod a szerkesztő programodat ( lehet notepad is ) és a hivatkozást úgy írod át, hogy nem törlöd. Ezt, hogy lehet ? Egyszerű. Van egy hivatkozásod, mondjuk: Fotóalbum. Akkor ezt ne töröld, hanem írj bele a közepébe, monjuk a Fotó-után írd be a te szövegedet legyen: Zenéim: Így fog kinézni:FotóZenéiamalbum. Ezek után töröld a Fotó részt és az album részt és a css megmaradt.  Ezek után csak írd át az elérési utat, ahol a zenéid vannak :))

 3.Lecke
Szövegformázás.


 4.Lecke
Képek beillesztése, méretezése.

   Nagyon sok weblap használ képeket. Céljuk többféle is lehet. De a lényeg, az esztétikus elhelyezés. Célszerű a képeket is táblákba(cellákba) helyezni így más képernyőfelbontásnál sem csúszik szét a képünk.

Ez egy kép.  A beillesztendő kódok pirossal vannak kiemelve !
Ez itt egy sima kép, keret nélkül.
Kép beillsztése: <img src="minta.jpg" width="120" height="100">
widht="120" - szélesség, height="100" magasság, vagy hosszúság.
Alt szöveg megadása: Ha az egeret a kép fölé viszed, ez a szöveg fog megjelenni:
<img src="minta.jpg" width="120" height="100" border="0" alt="Ide a szövegeedet írjad ami megjelenik ha az egeret a képre viszed.">

A minta.jpg a kép neve. Ezt kell átírni a te képed nevére.

 


Vagy adhatsz neki egyszeű keretet. <img src="minta.jpg" width="120" height="100" border="1">

border="1"- keretet adhatsz meg neki. 

 

 

 

 Vagy egy bonyolultabb keretet.
<img src="minta.jpg" width="120" height="100" style="border-width:1px; border-color:black; border-style:solid;">

 

 

 

 Vagy adhatjuk meg így is: Minden oldalnak külön megadhatjuk a keretvastagságot.. Ilyenkor ha 0-van valamelyik érték azon az oldalon nem lsz keret.
<img src="minta.jpg" width="120" height="100" border="0" style="border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-color:black; border-style:solid;">

 Itt a képen el van túlozva 5px van megadva, hogy látszodjon. Láthatod baloldalt és alul a keret vastagabb.

 

A keretek lehetnek: none:(nincs), dotted:(pontok), dashed(vonal), solid: (folyamatos vonal), double: (dupla). VAgy lehet még: groove, ridge, inset, outset.

Megadhatjuk, hogy minden oldalnak más témájú kerete legyen.

<img src="minta.jpg" width="120" height="100" border="0" style="border-width:1px; border-color:black; border-top-style:dotted; border-right-style:double; border-bottom-style:dashed; border-left-style:solid;">
Itt minden oldalanak külön külön lehet adni keretvastagságot, vagy stílust.
Adhatunk neki külön keretet külön színt minden oldalnak: <img src="minta.jpg" align="left" width="120" height="100" border="0" style="border-width:1px; border-top-color:blue; border-right-color:red; border-bottom-color:white; border-left-color:black; border-top-style:dotted; border-right-style:double; border-bottom-style:dashed; border-left-style:solid;">

 

Hivatkozások. Adhatunk meg a képeknek hivatkozást. Ez arra jó, ha rákattintunk, akkor bejön egy oldal, vagy a kép teljes méretben.

Tehát a kép beillesztése:  <img src="minta.jpg" width="120" height="100">

 Ha ráklikkelünk kijön egy új ablakban a teljes kép:
<a href="minta.jpg" target="_blank"><img src="minta.jpg" width="120" height="100">
Ha nem akarod, hogy külön ablakban nyiljon meg, akkor hagyd el a target="blank" részt, vagy ki is javíthatod self-re.
<a href="minta.jpg"><img src="minta.jpg" width="120" height="100">

 

 

 Táblázatba való beszúrás/fotóalbum.

Készítsünk egy táblázatot

Kép neve

Kép neve

Kép neve

Kép neve

Kép neve

Kép neve

Kép neve

Kép neve

Kép neve

Kép neve

 

 

 


JÓ GYAKORLÁST ÉS TANULÁST

 
Chat
Név:

Üzenet:
:)) :) :@ :? :(( :o :D ;) 8o 8p 8) 8| :( :'( ;D :$
 
Boldog Karácsonyt
 
Üzenő
 
Üzenőfal
 

Eddig voltál itt


 

Online látogatók

látogató van itt
 

Forditó

 

Klikkeltetek

free web counters


 
 
Névnapok

 

 

 
Kurzorom
Free Viki Cursors at www.totallyfreecursors.com
 
?????
 
Lábléc
 

Farmasi - Antiallergén szépségápolás, babaápolás, háztartási szerek, bio kozmetikumok    *****    Mit gondolsz a Valentin napról? Ünnepled? Felháborodsz? Ajándékozol? Posztoltál már róla? Mutasd meg!    *****    Versenyeznél? Építenél új portált? Milyen témában? Milyen nyeremény motiválna? A TE ötleteidre is kíváncsiak vagyunk!    *****    A karma megnyilvánulásai    *****    MARGOT ROBBIE HUNGARY! MARGOT ROBBIE AUSZTRÁL OSCAR JELÖLT SZÍNÉSZNÕ MAGYAR RAJONGÓI HONLAPJA! MARGOT ROBBIE HUNGARY!    *****    Lovak szerelmeseinket itt a helye! Tartozz te is közénk! KATT!KATT!KATT!MEGÉRI!KATT!KATT!KATT!    *****    Részletes személyiség és sors analízis,ajándék 3 év elõrejelzés,ingyenes konzultáció,ahol megbeszéljük a kérdéseid Katt!    *****    Születési horoszkóp + 3 éves elõrejelzés + biotérkép, 3000 Ft.Az ajándék,teljesen ingyenes konzultáció,rendeld meg KATT!    *****    Aktív videojáték honlap! Ingyen G-portál kreditek csak a készlet erejéig! Ne maradj ki te se belõle! Kattints ide! <3    *****    Kapható a VÖRÖS HÓ címû regény. Kaland és rejtély az örök fagy birodalmában. VÖRÖS HÓ. Részletek a weboldalon!    *****    Új letölthetõ olvasmányok:28 nap varázslatban A fénytest A kulcs A titok A tizedik felismerés A lélek anatómiája A csend    *****    Még nagyon az év elején járunk, most rendelj születési horoszkópot az ajándék 3 év elõrejelzés és ingyenes konzultáció!!    *****    Pánikenyhítõ poszt a Histórián. Superuser jelen. És TE merre jársz? Kattints!    *****    SIMONA | az Isten áldjon, Esperanza! Lolájának fõszereplésével | SIMONA | a jelenleg futó legsikeresebb argentin sorozat    *****    Marculábi cica tíz éves lett! Ünnepeljétek meg a születésnapját a Mesetárban Marculábis ujjbábokkal! Boldog szülinapot!    *****    ***Munkalehetõség! Magyarországról, Szlovákiából, Csehországból keresünk, MLM vezetõket és tanácsadókat! ***    *****    LÉGY A MAGAD ASZTROLÓGUSA! A tanulásod nálam az ASZTRO-suliban teljesen INGYENES! Fordulj hozzám bizalommal!    *****    Aktív Videojáték honlap!! Friss újdonság: Call of Duty: WWII és WoW: Battle for Azeroth!    *****    Legyél te is Farmasi tanácsadó! Antiallergén, természetes kozmetikumok, tisztítószerek. Keress vele pénzt otthonról!    *****    kattkattkattkattkattkattkattkattkattkattkattkattkattkattkattkattkattkattkattkattkattkattkattkattkattkattkattkattkattkatt