www.weblap.club.hu - weblap készítés

KEZDŐKNEK

HALADÓKNAK

HIRDETÉS

3. A program

Már van tárhelyünk, webcímünk, szoftverünk, és jön az igazán dolgos rész: a program megírása, amely majd megjeleníti weblapunkat.

Az alapok

Programunk parancsok sorozata lesz, amelyet a számítógépnek adunk feladtul, hogy megjelenítse weblapunkat. Az elkészült programot FTP-kliensünkkel kell majd feltöltenünk tárhelyünkre, hogy azt mindenki láthassa.
Az alább leírtak ún. HTML programnyelvben vannak kódolva (ez a legyegyszerűbb weblap-készítő programnyelv), amely egyszerűségének köszönhetően jól használható (persze bizonyos korlátok között). A HTML programokat saját gépünkön is futatthatjuk böngészőnkben, tehát a tárhelyünkön való elhelyezés előtt saját gépünkön is szépíthetjük, javíthatjuk.

Fontos info! Minden tárhelyszolgáltató a webcím beírására automatikusan az ott elhelyezett index.html nevű fájlt indítja el! Mindezért a Te első programodat tartalmazó fájlt is így kell elnevezni. (Vagyis a nyitólapodnak kell az index.html-nek lenni, később további oldalakat is rakhatsz a weblapodra, amiknek már más lesz a neve (persze html kiterjesztésűeknek kell lenniük!))
Első lépésként töltsd le az alábbi fájlt (jobb egérgomb a linken, majd Cél mentése más néven (angolul Save As)) index.html.

Tartalma az alább olvasható, hatása pedig első ránézésre mindössze annyi, hogy kiírja: Halihó!

<html> <head> <title>Halihó!</title> <script type="text/javascript"></script> </head> <body bgcolor=ffffff text=979999 link=f4a16e vlink=f4a16e alink=f4a16e> <br></br> <br></br> <center> <font size=2 face=arial>Halihó!</font> </center> </body> </html>

Ezentúl ezt a fájlt érdemes majd átírnod, bővítgetned (F4-gyel szerkeszve a fájlkezelődben).

És akkor kezdjünk tanulni! Nézd meg a letöltött index.html-t és olvasd az alábbiakat:

A HTML-programokban a parancsok mindig "<" és ">" jelek között találhatók. Minden parancsnak van egy kezdő és egy lezáró része, a lezáró rész a parancs előtti "/" jelből ismerhető fel. A parancsok mindig arra a programrészre vonatkoznak, amely a kezdő és lezáró részük között van. A parancsok lehetnek csupán parancsszavak (pl. a "center" parancs), vagy a parancsszavak mellett egyéb paraméterek (attribútumok) is szerepelhetnek (pl. a "body" parancs).

Minden HTML-program egy html paranccsal kezdődik, és egy html-lezáró paranccsal végződik, valamint egy fej-részből (a két head között) és egy test-részből (a két body között) áll.
A következőkben jöjjenek a legfontosabb parancsok (ahol van kötelező attribútum, ott az aláhúzással van jelölve). Ajánlott próbálgatni őket, egy kis gyakorlás után már egész pofás weblapot fogunk tudni csinálni.

A fej-részben használható parancsok

title
Minden HTML-programnak a fej-részben tartalmaznia kell egy "title" parancsot! A kezdő és lezáró rész között található szöveg a böngészők felső állapotsorában íródik ki.
Példa (a böngésző fenti állapotsorában "Halihó!" lesz kiírva): <title>Halihó!</title>
meta
Ez a parancs segít az internetes keresők (google, yahoo, altavista, stb.) keresőmotorjainak az oldal beazonosításában. Ennek használata javítja a weblap helyezését a keresők találati listájában.
Példa ("weblap", "ingyen" kulcsszavak a keresőmotoroknak): <meta name="keywords" content="weblap, ingyen"></meta> A test-részben használható parancsok

body
Maga a body parancs is tartalmazhat attribútumokat. Ezek az egész oldal alapvető színeit határozzák meg, az ún. hexadecimális színkódokkal (a színkódok "#" nélkül is használhatók), vagy a színek angol megfelelőjével (black, white, red, blue, pink, yellow,...). A hexadecimális kódok vizuális jelentését itt nézheted meg:
Az attribútumok:
bgcolor (=háttérszín)
background (=háttérkép)
text (=szövegszín)
link (=hivatkozások színe)
vlink (=a már látogatott hivatkozások színe)
alink (=a legutoljára látogatott hivatkozás színe)
Példa (a háttérkép a hatter.jpg lesz!): <body bgcolor=ffffff background="hatter.jpg" text=979999 link=f4a16e vlink=f4a16e alink=f4a16e>
a
A parancs kezdő és lezáró része közötti rész hivatkozás (link) lesz (rákattintva egy másik oldalra juthatunk el). A hivatkozás lehet szöveg vagy kép, a szöveg automatikusan aláhúzást, a kép keretet kap. Az elérési út lehet ún. abszolút (http://www.weblap.club.hu/kezdet.html), vagy relatív (kezdet.html). Utóbbit akkor tudjuk alkalmazni, ha a hivatkozást tartalmazó fájl és a meghívandó fájl is egy helyen van (mindkettő a tárhelyünk azonos könyvtárában).
A használható attribútumok:
href (=hivatkozás célja)
target (=megnyitás helye, ha _blank, akkor új ablakban nyílik)
Példa (a "Halihó!" hivatkozás lesz, amelyre kattintva egy új ablakban a www.weblap.club.hu/kezdet.html nyílik meg): <a target=_blank href="http://www.weblap.club.hu/kezdet.html">Halihó!</a>
b
A parancs kezdő és lezáró része közötti szöveg vastagon lesz szedve.
Példa (a "Halihó!" vastagon lesz szedve): <b>Halihó!</b>
br
Sortörés (pl. szövegszerkesztőknél egy enter hatása).
Példa (egy sortörés): <br></br>
center
Középre igazítás (vízszintesen).
Példa (a sor közepén lesz kiírva, hogy "Halihó!"): <center>Halihó!</center>
font
A parancs kezdő és lezáró része közötti szövegnek egyedi formát adhatunk.
Az attribútumok:
color (=szín)
size (=méret 1-5-ig)
face (=betűtípus pl. arial, verdana)
Példa (a "Halihó!" szöveg fehér színnel, 2-es betűmérettel, arial betűtípussal lesz kiírva): <font color=ffffff size=2 face=arial>Halihó!</font>
hr
A parancs vízszintes vonalat húz.
Az attribútumok:
color (=szín)
size (=vastagság pixelben)
width (=szélesség pixelben vagy az oldalszélesség százalékában(1-100%))
align (=a vonal elhelyezkedése - értéke: left (bal szélre húz), right (jobb szélre húz), middle (középre helyez))
noshade (=nem lesz árnyékolva)
Példa (1 pixel vastag, fekete vízszintes vonal, árnyék nélkül): <hr color=black size=1 noshade></hr>
i
A parancs kezdő és lezáró része közötti szöveg dőlt betűvel lesz szedve.
Példa (a "Halihó!" dőlt betűvel lesz szedve): <i>Halihó!</i>
iframe
A paranccsal egy ablakban másik weblapot szúrhatunk be weblapunkba.
A használható attribútumok:
src (=a beszúrandó weblap elérési útvonala)
width (=az ablak szélessége pixelben vagy az oldalszélesség százalékában(1-100%))
height (=az ablak magassága pixelben)
border (=az ablak körüli keret vastagsága pixelben - ha 0, akkor nics keret)
align (=az ablak elhelyezkedése - értéke: left (bal szélre húz, a szöveg körbefut mellette), right (jobb szélre húz, a szöveg körbefut mellette), middle (középre húz), top (az ablak tetetje a mellette futó szöveg tetejével kerül egyvonalba), bottom (az ablak alja a mellette futó szöveg aljával kerül egyvonalba))
Példa (a www.weblap.club.hu weblap kerül egy ablakban a weblapra; az ablak adatai: 300 pixel széles, 200 pixel magas, keret nélküli és jobbra van húzva): <iframe width=300 height=200 border=0 align=right src="http://www.weblap.club.hu/kezdet.html"></iframe>
img
A paranccsal képet (vagy mozgóképet) helyezhetünk el az oldalon. Figyelem! A lezáró részt tilos használni! A kép kerete alapesetben 0 (vagyis nincs), de ha a kép hivatkozás, akkor értéke 1!
A használható attribútumok:
src (=a kép elérési útvonala)
dynsrc (=a mozgókép (pl. avi fájl) elérési útvonala)
loop (=mozgókép esetén az ismétlések száma)
Ha az src-t és a dynsrc-t egyszerre használjuk, akkor a mozgókép lejátszása után a kép jelenik meg!
border (=keret vastagsága pixelben - ha a kép hivatkozás, és nem akarunk keretet, legyen értéke 0)
width (=a kép szélessége pixelben)
height (=a kép magassága pixelben)
align (=a kép elhelyezkedése - értéke: left (bal margóhoz húz, a szöveg körbefut mellette), right (jobb margóhoz húz, a szöveg körbefut mellette), middle (középre húz), top (a kép tetetje a mellette futó szöveg tetejével kerül egyvonalba), bottom (a kép alja a mellette futó szöveg aljával kerül egyvonalba))
Példa 1 (a kep.jpg kép jelenik meg keret nélkül, a jobb margóhoz húzva): <img border=0 align=right src="kep.jpg"> Példa 2 (a film.avi mozgókép jelenik meg kétszer lejátszva, majd utána a kep.jpg lesz látható): <img dynsrc="film.avi" src="kep.jpg" loop=2>
pre
A parancs kezdő és lezáró része közötti szöveg ugyanúgy fog megjelenni, ahogy a programban szerepel (az összes sortörés és szóköz meg fog jelenni).
Példa: <pre>Halihó! Halihó!</pre>
u
A parancs kezdő és lezáró része közötti szöveg alá lesz húzva (a hivatkozások automatikusan alá vannak húzva).
Példa (a "Halihó!" alá lesz húzva): <u>Halihó!</u>
ul
Lista készítése. A lista pontjait az "li" paranccsal adjuk meg.
A használható attribútum:
type (=a lista-pontokat jelző elemek formája - értéke: disc (pont), circle (karika), square (négyzet))
Példa (három pontból álló lista): <ul type=circle> <li>Első pont</li> <li>Második pont</li> <li>Harmadik pont</li> </ul>
table
Táblázat készítése. A sorokat a "tr" parancs, az oszlopokat a "td" parancs jelzi. Keret nélküli táblázatokkal szépen tagolt weblap készíthető (érdemes próbálkozni)!
A használható attribútumok (a "table", a "tr" és a "td" parancsokhoz is!):
bgcolor (=háttérszín)
background (=háttérkép)
width (=a táblázat/sor/oszlop szélessége pixelben vagy az oldalszélesség százalékában(1-100%))
height (=a táblázat/sor/oszlop magassága pixelben)
border (=a táblázat/sor/oszlop körüli keret vastagsága pixelben - ha 0, akkor nics keret)
bordercolor (=a keret színe)
align (=a cellákban a szövegek, képek elhelyezkedése - értéke: left (bal szélre húz), right (jobb szélre húz), center (középre húz), top (felülre húz), bottom (alulra húz))
colspan (=oszlopok egyesítésére, csak td-nél használható, értéke megadja, hogy az adott sorban hány oszlopot egyesítsünk)
rowspan (=sorok egyesítésére, csak tr-nél használható, értéke megadja, hogy az adott oszlopban hány oszlopot egyesítsünk)
Példa 1 (két sorból, két oszlopból álló táblázat): <table> <tr> <td>Első sor első oszlop</td> <td>Első sor második oszlop</td> </tr> <tr> <td>Második sor első oszlop</td> <td>Második sor második oszlop</td> </tr> </table> Példa 2 (egy keret nélküli táblázat, az első sorban két oszlop, a második sorban egy oszop; az első sor első oszlopa fekete háttérrel, a második sor egyetlen oszlopában a szöveg középre igazítva): <table border=0> <tr> <td bgcolor=000000>Első sor első oszlop</td> <td>Első sor második oszlop</td> </tr> <tr> <td colspan=2 align=center>Második sor oszlop</td> </tr> </table>
Megjegyzések

1. Ha a test-részben parancsok nélkül írsz, akkor az kiíródik a képernyőre.

2. A programban akárhány helyközt (space-t) teszel ki, a program csak egyet fog megjeleníteni. Ha több helyközt akarsz megjeleníteni, akkor az alábbi karaktersort kell használnod (helyközönként):   3. Ajánlott link programozáshoz: HTML leírás (ssikiss diplomamunka).

HIRDETÉS

Ide írhatsz: weblapclub@freemail.hu