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
 

Karácsonyra szép AJÁNDÉK egy Személyre szóló asztrológiai elemzés! Kinyomtatva és bekötve örök emlék marad!    *****    ***MUNKALEHETÕSÉG!*** Új cég, új lehetõség, ingyenes regisztráció! Ugye tudod, mit jelent elsõk között lenni...?!    *****    A legfrissebb videojátékokról olvashatsz híreket! Elemezzük a Call of Duty sorozat legújabb részét World War II    *****    A RENDKÍVÜLI horoszkóp akciók Karácsonyig tartanak,most rendelj saját illetve szeretteid részére elemzéseket. Kattints    *****    Blog, Videojátékok, Szórakozás, Technika! Call of Duty: WWII és sok más!    *****    Légy te is egy Új Márka Elsõ tagjai között ahol Azonnali 28%haszonhoz juthatsz!Részletek:huncalifeandme@gmail.com    *****    Nyerj akár 1 millió forint értékû bitcoint. A játék ingyenes.    *****    Tudtátok, hogy a Csiga-biga gyerekdalban eredetileg szó sincs tûzrõl?    *****    LEGYÉL FARMASI TANÁCSADÓ VAGY VEZETÕ! OTTHONI MUNKA, MAGAS KERESETI LEHETÕSÉGGEL! HA MOST CSATLAKOZOL, MÉG NYERHETSZ IS!    *****    Mi mennyi 2018 - Árak, változások 2018 - minimálbér, családi pótlék, adókedvezmények 2018    *****    Légy te is a Farmasi csapaom tagja!!!    *****    Születési,baba,hold horoszkóp,elõrejelzés,párkapcsolati elemzés,fogamzási képlet! Ingyenes tanácsadás!Várlak!Kattints!    *****    A Dynasty és a TVD 8.évadából megismert színésznõ, Nathalie Kelley elsõ hazai rajongói lapja. KATT! KATT! KATT!    *****    WISE-VOGUE | SZISSZ ÉS KLAU BEAUTY-FASHION BLOGJA TERMÉKTESZTEKKEL, TIPPEKKEL, ÖTLETEKKEL A MINDENNAPOKRA // WISE-VOGUE    *****    Charmed - Új külsõ - Még több tartalom - Még több információ, érdekesség - CHARMED - Bûbájos boszorkák - Varázslat - Cha    *****    Karácsonyra AJÁNDÉKOZZ szeretteidnek, barátaidnak SZEMÉLYRE SZÓLÓ HOROSZKÓP ELEMZÉST 3 ÉVES ELÕREJELZÉSSEL!    *****    Szerinted melyik könyvet kellene elolvasnom? Melyik film érdemes arra, hogy megnézzem? - Mementoim.Blogspot.hu    *****    Születési horoszkóp + 3 év elõrejelzés + Felszálló holdcsomópont,Chiron, Lilith 2000 Ft. + ingyenes konzultáció. Most!    *****    Szerinted melyik könyvet kellene elolvasnom? Melyik film érdemes arra, hogy megnézzem? - Mementoim.Blogspot.hu    *****    Exkluzív Karácsonyi Ajándékok - Exkluzív Karácsonyi Ajándékok - Exkluzív Karácsonyi Ajándékok