Próbálom idézni a forrás szövegét sorról sorra, ahogy értelmezi a böngésző, és magyarázom!

1.

"Egy sor!"

<p><font color="#ffff00">Egy sor!

A < és a > mindig kell, a böngésző ezek alapján tudja, hogy ez forráskód!
A <p> az a szöveg kezelő parancs. Mindig le kell zárni egy </p>-vel. A lezáró kód tehát a "/" jel.
A <font color="#ffff00"> az az általad megadott szöveg színét takarja az ffff00 a sárga színe, az ff0000 a piros színt. Próbálj beírni 0-f-ig különböző kódokat, és úgy változik majd a szín!
Ez után következik a megjelenítendő szöveg!

2.

"Egy sor!
Új sor!
Új, utolsó sor!"

<p><font color="#ffff00">Egy sor!
<br>
<font color="#ffff00">Új sor!
<br>
<font color="#ffff00">Új, utolsó sor!</p>

Ez hasonló szövegkiírás, mint az előbb, csak a sorokat új sorba írjuk! Ennek jelölője a <br> Ha bármi után beírod, hogy <br>, akkor mindig új sorba kezdi a szöveget, ha több <br>-t írsz be, akkor annyi sort hagy ki, ahányat beírtál.


3. Kép beillesztése!

<p><font color="#ffff00">Ez egy kép! </p>

Ez az olyan szöveg, mint az előbb. Csak azért illesztettem be, hogy gyakoroljad! A továbbiakban erről már nem szólok, csak ha változás van.

A beillesztett kép forráskódja:

<img src="18.jpg">

Csak ennyi az egész!
Az <img src= után kell megadnod a kép elérhetőségi útját, majd lezárod a >-vel. 

4. Középre, és jobbra helyezés:

"Ez már középen van!"
"Ez pedig már jobb oldalt van!"


<p align="center"><font color="#ffff00" >Ez már középen van!</center>
<p align="right"><font color="#ffff00" >Ez pedig már jobb oldalt van!

A <p align="center">, center a középrehelyező kód. 
Right pedig a jobbra helyező kód. Ezeket a <p jelölő után kell mindig beírnod, majd zárod: > .
A centert mindig le kell zárni, mint a </p>-t is, ezt úgy, hogy </center>. Tehát látod, hogy a lezárás csak annyiban különbözik, hogy egy per jelet teszel elé a kacsacsőr után. Ha nem zárjuk le, akkor nem úgy jelenik meg ahogyan akarjuk, hanem végig értelmezi a böngésző a többi forrásra is, és mindegyik középen lenne.

5. Link, vagy hivatkozás:

"Kattints ide azonnal!"

<p><a href="2.htm">
<font color="#33ffff">Kattints ide azonnal!</font></a> 

A <p> azért kell ide, mert ezzel választjuk külön a többi megjelenő dolgoktól az alábbit. Ha ezt nam használnál, folytonosan jelenne meg közvetlen az előző szöveggel, vagy képpel, esetleg csak egy szóköz lenne. Így viszont új sorba teszi. Különbsége a <br>-től annyi, hogy a <p> nem egy sort, hanem két sornak megfelelő helyet hagy ki.

Az "a" jelölő az mindig kell, ha hivatkozást használunk. (a <p>< után találod!)

Link megadásának fontos jelölője a "href" 

<p><a hreh=" után írod be azt a html oldal nevét, vagy címet, amit meg akarsz hogy nyíljon, ha a "Kattints ide azonnal!" -ra kattintol.

A többit már tudnod kell! A fontot is érdemes lezárni, mert nem mindig működik jól, ha nincs lezárva. Valamint idézőjelet sem muszáj használnod, de nem árt, ha már ezzel írod meg a forrást, mert a későbbiek során az idézőjel nélkülözhetetlen. Itt még nem nagyon veszi figyelembe a böngésző.

6.

Ez egy olyan kép középen, amire ha rákattintassz, megjelenik valmi egy új oldalon , amit csak Internetre csatlakozás közben tud megnyitni (per pillanat a legfrissebb műholdkép egy megadott cím alapján):

<p align="center">
<a href="http://iris.elte.hu/meteosat/ce_curr_ir_col.jpg">
<img src="muhold.jpg"></center></a></p>

<p align="center"> a középre helyezést eredményezi!

<a href="http://iris.elte.hu/meteosat/ce_curr_ir_col.jpg"> Ez az a cím, egy hivatkozás, amire a képre kattintás után hivatkozunk, vagyis megjelenik az eredmény. Tehát ha rákattintasz a képre, akkor az alábbi címen lévő akármi nyílik meg neked.

<img src="muhold.jpg"> Ez pedig a képbeillesztés formátuma.

5.

Egy olyan kép, hogy ha rákattintasz, megnyílik valami, egy új oldal.
Nem szövegre kell kattintani, hanem képre!

<p align=right><a href=18.jpg><img src="18.jpg" hight=20 width=50 </p></a>

<p align=right> a jobbra helyezést eredményezi!
A ><a href=18.jpg> hasonló az előző 5.-ös példához, link, vagy hivatkozás megjelenítése. (link=hivatkozás, ugyan azt jelenti a kettő).
Tehát, ez a cím , vagy elérési út fog neked megjelenni, ha a kis képre kattintassz.

<img src="18.jpg" -ez a beillesztett kép. Ez majdnem ugyan olyan, mint pl: 

<p><a href="2.htm">
<font color="#33ffff">Kattints ide azonnal!</font></a> , csak a 
<font color="#33ffff">Kattints ide azonnal!</font> helyett <img src="18.jpg"

-t írod be, mert most nem szövegre kell kattintanod, hogy megnyíljon valami, hanem egy képre.

hight=20 width=50 az oldalon megjelenő kép nagyságát tudod állítani az egyenlőségjelek után írt tetszőleges számmal.

A / lezárásokat, és említett jelölőkről már nem szólok.

Ha ezt, és az előzőt még egyszer megnézed, ugyan az a kettő. Csak ennél ugyan azt a képet nyitod meg, mint amit beillesztettél, tehát a beillesztett kép, és a link, amire hivatkozunk, az egyenlő.
Csupán annyi a különbség, hogy a beillesztett kép kicsinyítve van.

8. E-mail cím megadása:

<p><font color="#ffff00">E-mail címem: 
</font><a href="mailto:LM386@fbi.hu"><font color="#33ffff">LM386@fbi.hu</font></p></a>

Ha jól megnézed, ugyan az, mint a szöveges link hivatkorás, csak annyi a különbség, hogy a font><a href=" után mailto:van és utána az email cím. Ezzel hivatkozol az e-mail küldőre, pl. outlukra, hogy nyíljon meg.


Az itt leírtak alapján talán első látásra bonyolultnak tűnik, de valójában nem az. Ez a html szerkesztés legegyszerűbb része.
A könnyed elsajátításhoz legegyszerűbb, ha megnyitod magát a forrást. Ezt a következő képpen teheted meg:
A böngészőben: Nézet-forrás! Ekkor megnyílik jegyzettömbben a forráskódja a nyitva lévő html oldalnak. Tökéletesen ugyan az jelenik meg, amit én neked ide beillesztgettem soronként, vagy részletenként. Onnan másoltam ide!

Nézd meg alaposan. Csináld azt, hogy mentsd el másként a megnyitott forráskódot, és egyenként kezd kitörölgetni a forráskódokat. Közben mindig mentsd el, és figyeld a változást!
Szép lassan rájössz, hogy melyik formátum mire szolgál, mit csinál.

Itt azok hogy pl. href ne érdekeljen különösen. 

Neked az a lényeg, hogy a címeket, elérési utakat, változtasd arra, amire te akarod, és a beillesztendő képet. Változtasd meg a beírt szöveget, de a körülötte lévő forráskódot hagyd úgy, ahogy van!

A futószövegre nem tértem rá, de most igen!

9. Futószöveg. 

Ez már elég bonyolult egy kicsit, de a lényeg a szöveg. Azt bizonyára meg tudod állapítani, hogy hol kezdődik, és hol fejeződik be. Meg tudod állapítani a szöveg, vagy cím és a forráskód határát. Ha igen, akkor minden rendben, hiszen ez a lényeg. 
Ha egyszerre több hasonlót (forráskódot, pl. sok képet), szeretnél a html oldalba beilleszteni, akkor csak másold át még egyszer az oda tartozó forráskódot, és csak a címet, vagy szöveget, vagy kép elérési utat változtasd meg!

Tehát íme a futószöveg:

<p align="center"><font color="#ff0000" size="6">
<marquee height="36" scrollamount="8" scrolldelay="55" width="60%">Ez futószöveg, melynek színét, sebességét, betűméretét, középre, vagy oldalra helyezését a forrásban adhatod meg!</marquee>
</font>

Nyílván már sok ismerős dolog van benne a számodra. 
Ami ismeretlen: marquee - ez a futószöveg kódja. olyan, mint a linknél a <a>, vagy a href. Csak itt marquee.
vigyázat! A végén ezt is le kell zárni / jellel!!!
Arra is ügyelj, hogy ha több mindent kell egyszerre lezárni mindig ügyelj a szimmetrikusságra. 

scrollamount="8"

Ezzel a szöveg gyorsaságát tudod beállítani. Változtasd meg a számot, és változik a futószöveg sebessége!

scrolldelay="55" 

Ez is a szöveg gyorsaságát szabályozza, mégpedig az előzővel ellentétesen, ha növeled a szám értékét, csökken a sebesség.

width="60%

A futószöveg szélességét adhatod meg, és mindenütt, ahol találkozol ezzel, a szélességet adhatod meg, a hight-el pedig a magasságot, de itt nincs ilyen!


Amikor újjal találkozom, mindig megváltoztatok benne valamit, pl. számot, vagy kitörlöm egy részletét, és úgy rájövök, hogy hogyan kell kezelni.

A képek helyére tegyél be másikat, általad kiválasztottat.
ennél jobban nem lehet gyakorolni. Ha így csinálod, akár holnap már fel is rakhatod az internetre a honlapodat!

Most pedig nézzünk vissza oda, amire talán még fel sem figyeltél annyira!

10. Háttér

<BODY background="kek.jpg">

Egyszerűen az a kód, neked csak azt kell megjegyezni, hogy ha ezeket a szavakat látod, akkor az a háttérrel kapcsolatos! Mindig a forrás elején található.

A kék.jpg a beillesztett gép.

Hogyha nem képet akarsz beilleszteni háttérnek, hanem egyszerűen akarod megadni a színét, akkor bgcolor="ff00ff" !

<BODY background="kek.jpg" VLink=1155FF ALink=00FFFF>

A BODY az a html jelölője, enélkül nincs oldal.

Link=ff2222 -a link színe, amíg nem kattintassz rá!

VLink=1155FF - link színe rákattintás előtt, de akkor ,amikor már előzőleg valamikor rákattintottál!

ALink=00FFFF - a link színe, amikor aktív, azaz rá vagy éppen kattintva!


11. , de valójában ezekkel kellett volna kezdenem már a legelején is.

<HTML>
<HEAD>
<TITLE>tanulmány</TITLE>
</HEAD>
<BODY >
.
.
.
.
.
</BODY>
</HTML>

Ez a néhány sor a html oldal alapja. Ekkor még nem jelenik meg benne semmi, csak az üres oldal van. Ha ezek nincsenek jelen, ebben a sorrendben, akkor nincs html oldal sem. Egyszerűen hibát ír ki a böngésző, és nem tudja megnyitni.
<title>tanulmány</title>
Ez az oldal címe, ami a böngésző bal alsó sarkában jelenik meg. Le kell zárni </title>-vel!

Nagyon remélem, hogy tudsz boldogulni!

A következőkben pedig majd a táblázatkezelésről lesz szó!
Ennek lényege, az, hogy ha egymás mellé szeretnél bármit (szöveget, képet, linkeket) elhelyezni, ennek segítségével tudod majd megtenni!
Jelölője a <table>, </table> Ezen belül <tr>, ha új sorba akarod kezdeni, <td> pedig, ha egymás mellé akarod helyezni a kívánt dolgokat. Egyszerű a szerkesztése.
Valamint külön kóddal kell meghatározni a táblázat keretét, színét és vastagságát, méretét, stb.
De ezekről majd a következőkben, egyenlőre ennyit jegyezz meg, amiket a fentiekben írtam!

Próbálj meg megnyitni más oldalak forráskódját, és kezd el tanulmányozni.
Ha felismered az eddig tanultakat bennük, akkor kezded elsajátítani a html szerkesztés alapjait.

Oldal: Ide írhatod a weboldalad új lapjának a címét
Klikfel.hu - © 2008 - 2024 - klikfel.hupont.hu

A HuPont.hu az ingyen weblap készítés központja, és talán a legjobb. Ingyen weblap

ÁSZF | Adatvédelmi Nyilatkozat