<h1>...</h1> HTML utasítások összefoglalása. Készítette: SaNandor 2010., Veszprém

Átírás

1 HTML utasítások összefoglalása A HTML program több részre tagolható (fejléc, törzs, megjegyzés), utasításai < > jelek közé kerülnek. Az egyes utasításokra jellemző, hogy van egy nyitó és egy záró részük (utasítás zárójel, vagy tag), és a köztük lévőkre vonatkoznak (például a program kezdete <html>, míg a vége </html> utasítás). Maga a lap minden része egy objektum is egyben, amire hivatkozni lehet (például JavaScript utasításokkal, nevével, vagy az oldalon lévő helyével). További objektum típusok például a képek (image[0], image[1]...), linkek (links[0], links[1]...), űrlapok (forms[0]...), űrlapmezők (forms[0].elements[0], forms[0].elements[1]...). Ilyen alapon maga az oldal a "szülő", hivatkozás rá a document kulcsszóval történhet. Lapszerkezet: <html> <head> <meta...> <title>...</title> <link>...</link> <base>...</base> </head> <body>...</body> <body background=(file/url) bgcolor=xxxxxx text=xxxxxx link=xxxxxx vlink=xxxxxx alink=xxxxxx> <! > </html> A lap eleje. Fejlécinformációk: általános szerkesztői információk a documentumról és a webhelyről, fejlécben megjelenő szöveg, documentum kapcsolatok, weblap eredeti URL címe. A lap törzse Az egész lapra, információk helyezhetők el a body tag után: háttérkép neve és elérése (ha mögé írjuk a bgproperties="fixed" utasítást, a háttérkép fixen marad és csak a szöveg mozog az előtérben), háttérszín (pl:ccffff = világoskék, dbf9fd = világoszöld, szövegszín, linkek színe, megnézett link színe, kiválasztott link színe. Megjegyzés elhelyezése a programlistában (ez a képen nem jelenik meg), alkalmas Javascript utasítások elrejtésére. Lap vége. Betű jellemzők és stílusok: <h1>...</h1> Címsor méretek: h1, h2, h3, h4, h5, h6 (előre definiált stílusok). Címsor elhelyezés középre (lehet még: left--balra, right-- <h1 align=center>...</h1> jobbra). <div>...</div> Bekezdés igazítása. <em>...</em> Hangsúlyos betűk. <i>...</i> Dölt betűk. <strong>...</strong> Erősen hangsúlyos betűk. 1. oldal

2 <b>...</b> <big>...</big> <small>...</small> <sub>...</sub> <sup>...</sup> <u>...</u> <strike>...</strike> <font size=+1 color="rrggbb">...</font> <font color=red>...</font> <font face="ariel">...</font> <basefont size=-1>... </basefont> <cite>...</cite> <code>...</code> <samp>...</samp> <kbd>...</kbd> <var>...</var> <center>...</center> Félkövér betűk. Nagyított kiírás. Kicsinyített kiirás. Alsó indexbe írás. Felső indexbe írás. Aláhúzott betűk. Áthúzott betűk. Egyéb szövegformázási lehetőségek: Az alapméretnél nagyobb betűk (itt 1-gyel), melyek színe is megadható kóddal, vagy a szín nevével (a színinformáció el is hagyható). Csak a betűszín változik. Betűtípus megadása. Alapértelmezett betűméret megadása. Idézet. Forráskód. Példa. Begépelt szöveg. Változó neve. Szövegigazítás középre. word-spacing="1" A betűtípus és méret szerinti szóközhöz hozzáad egyet (negatívnál csökkenti). letter-spacing="1" A betűtípus és méret szerinti betűtávolsághoz hozzáad egyet. text-decoration="none/underline/overline/line-through/blink" A szöveg díszítése: nincs/ aláhúzott/ felülhúzott/ áthúzott/ villogó, illetve ezek variációja. text-transform="capitalize/uppercase/lowercase/none" Aszöveg kis és nagybetűit alakítja: szó első betűje nagy/ minden betű nagy/ minden betű kicsi/ marad az eredeti. text-align="left/right/center/justify" Szövegigazítás balra/ jobbra/ középre/ sorkizártra. text-indent="1" Bekezdés első sorának behúzása. vertical-align="baseline/middline/sub/super/text-top/text-bottom/top/bottom" Függőleges igazítás (alap/ sorközéphez egyenlően fel és le/ alsó index/ felső index/ szöveg eleje a szülőével egybe esik/ alul esik egybe/ felfelé igazít/ lefelé igazít) (megadható egy szám is ami a távolság sormagasság százalékban az előzőtöl) Elhatárolók <p>...</p> <p align=center>...</p> <br> <nobr>...</nobr> <wbr>...</wbr> Bekezdésre tördelés (alapesetben a szöveg soronként tördelve jelenik meg), vagy bekezdésre törés elhelyezési információval. Sordobás az eddigi stílus megtartásával és üres sor beillesztés. Nem engedi a lap szélén megtörni a sort, gördítősávot jelenít meg. A szöveg újsor karakterei a hatásosak (szavankénti tördelés, word break). 2. oldal

3 <hr size=x align=center width=y> Vítszintes határoló vonal beszúrása (vastagsága pixelben, elhelyezése, hossza pixelben, vagy %-ban megadható). Táblázatok Jól használhatók szövegek elhatárolására, hasábba rendezésre egy-egy oldalon belül. A táblázaton belül meghatározhatók az egyes cellák minimális szélességei, valamint egy-egy cellán belül elhelyezhetők új táblázatok is (beágyazás). Ez tág felhasználási lehetőséget ad a legkülönfélébb elhelyezési ötleteknek. <table border=x cols=n cellspacing=y width=z>...</table> <caption align=center>...</caption> <tr align=center valign=top>...</tr> <th align=center valign=top nowrap colspan=columns rowspan=rows width=%>...</th> <td align=center valign=top nowrap colspan=c rowspan=r width=5>...<td> Táblázat megadása: X keretszélességgel (0 esetén nincs keret), N oszloppal, Y cellaközzel és Z táblaszélességgel (az ablakhoz mérve pixelben, vagy %-ban). Táblajegyzet és elhelyezése. Sorváltás táblázatban elhelyezés és cellán belüli elhelyezés megadásával (top, middle, bottom, baseline) Oszlopváltás táblázatban kiemelt szöveggel, elhelyezés megadásával, ahol a nowrap nem engedi a tördelést, columns méretű több oszlop széles és rows méretű több sor hosszú bejegyzéssel, %-ban, vagy pixelben megadott cellaszélességgel. Oszlopváltás táblázatban. Kapcsolatok <a href=file/url name=cimke>...</a> <img src=file/url href=link align=center width=x height=y vspace=z hspace=h border=0 usemap=file/url> <link>...</link> <applet>...</applet> <A HREF="callto: itt/ez@sajat.hu">...</a> Kapcsolatjelzés link megagásával (" és, vagy címke megadással Beépített kép jelzése forrás és elérés megadásával, elhelyezéssel, kép szélességgel és magassággal, a kép környezetének szélesség és magasság adataival, keretszélességgel és linktérkép kapcsolattal. Hivatkozás definiálása a bezárt elemekre. Java applet és paramétereinek definiálása. Híváshivatkozást helyezünk a weblapra, hogy például egy más alkalmazással keressen egy címen. A weblapon olyan hivatkozást helyezünk el, melynek <A HREF="mailto: alapján a weblapot megtekintő felhasználók elektronikus nev@sajat.hu">...</a> leveleket küldhetnek nekünk. <A HREF="news: Hivatkozást hozunk létre a hun.famegmunkalas 3. oldal

4 hun.famegmunkalas"> famegmunkálásról</a> hírcsoportra. Keretek A részekre osztott weblap azon részeit, amelyek egyenként is meg tudnak jeleníteni weblapokat, keretnek nevezzük. (A webfelület több, egymástól független területre tagolása). Ezek segítségével elérhető, hogy az egyes "ablakokban" más és más weblapok legyenek megnyitva. A keretek egymásba ágyazhatók és saját nevükkel hivatkozhatunk rájuk. Az egyes ablakok között kapcsolatok létesíthetők, ami tág teret ad a weblap szerkesztőjének. Ha a weblapon kereteket alkalmazunk, az információ rendezetté és könnyen hozzáférhetővé válik. A webhelyek gyakran alkalmaznak kereteket az információ könnyebb elérése, illetve a többlapos webhely tartalmának megjelenítése érdekében. A keretek segítségével elkészíthetjük a webhely fejlécét anélkül, hogy minden egyes alkalommal, amikor a felhasználó lapot vált, újra meg kellene nyitni a fejlécet tartalmazó weblapot. Keret alkalmazásával a webhely különböző lapjain tett látogatás közben mindvégig a képernyőn maradó tartalomjegyzéket is készíthetünk. Rengeteg, különféle kivitelezésű keret létezik, és még ennél is több felhasználási mód. <frameset>... </frameset> <frameset rows="p1,p2,*>... </frameset> <framesetcols="p1%,*>... </frameset> <frameset rows="30,*" frameborder="no" border="0" framespace="0" > <frame src=url name=név marginheight=px marginwidth=px scrolling=yes/no noresize> <noframe> <bady>...</body> </noframe> <a target=név href=url> <ol>...</ol> <ul>...</ul> <menu>...</menu> <dir>...</dir> <li> <li type=a> Keretleírás Keretleírás, ahol vízszintes vonallal a megadott pixeleknél osztjuk az ablakot, a csillag a fennmaradó területet jelöli. Keretleírás, ahol függőleges vonallal a megadott százaléknál osztjuk az ablakot. Példa további lehetőségre: függőlegesen 30%-nál legyen egy felosztás, de a vonal ne jelenjen meg (frameborder, border, framespace: keretvonal, keretméret pixelben, ablakok közti üres terület) Ablak a kereten belül a lap forrásával, az ablak nevével, az ablakon belüli margó magassággal és szélességgel, az ablak görgetést engedélyezve, vagy tiltva, végül pedig az ablak nem méretezhető át. A keretet nem kezelő böngészőknek szóló rész. Egy kattintás után melyik ablakban jelenjen meg, valamint melyik új lap. Számozott lista. Számozatlan lista. Menülista. Könyvtárlista alak Listaelem, vagy listaelem,elemjelölővel (A/a/I/i/1 számozottnál, disc/circle/square számozatlannál). 4. oldal

5 <dl> <dt>...</dd> </dl> <pre width=chars>...</pre> <object>...</object> <bgsound>...</bgsound> <sound>...</sound> <adress>...</adress> Definíció, fejrész... törzsrész, definíció vége. Előre tördelt szöveg (szövegszélességel, betűben). ActiveX objectum behívása. Háttérzene behívása (mid, vagy wav) Levelezési cím. Űrlapok és űrlapelemek: Egy HTML lapot nem csak passzívan megtekintve lehet használni, hanem szabályos kérdőívek, szavazólapok, vendégkönyvek, stb. felhasználásával, aktív résztvevő lehet a böngésző. Az ilyen lap nyomógombokat, adatbeviteli mezőket, menüelemeket tartalmazhat. Ezek leírására szolgálnak az űrlapelemek. Az űrlapra bevitt adatokat a HTML nem tudja feldolgozni, ehhez egy szerver oldali (fogadó) program, vagy Java alkalmazás szükséges. Weblapokon gyakran találkozhatunk űrlapokkal, amelyek segítségével adatokat gyűjtenek és közölnek. Létrehozhatunk a weblapon egy olyan űrlapot, amely például egy adott terméket kereső felhasználóknak lehetővé teszi a webkiszolgálón lévő adatbázisban való keresést (online áruházak). A felhasználó beírja a termék nevét az űrlapba, majd rákattint a Keresés (küldés) gombra. A beírt információ eljut a webkiszolgálóra, majd megtörténik az adatbázisban való keresés (az űrlapban szereplő információk a webkiszolgálóra kerülnek feldolgozásra, későbbi felhasználásig tárolásra). Az eredményt a kiszolgáló visszaküldi a felhasználónak, és az megjelenik a web böngészőben. Weblapokon tizenegy szokásos űrlapvezérlő használható. A weblapon mindig szerepelnie kell egy Küldés vagy egy Küldés képpel vezérlőnek. Ha a weblapon nem szerepel Küldés gomb vagy Küldés képpel vezérlő, nem lehet az információkat a webkiszolgálóra küldeni. Űrlap létrehozása <form>... </form>, vagy <form action="..." method="get/post">...</form> utasításokkal lehetséges, ahol a két form utasítás között helyezkednek el az egyes űrlap elemek. Az utasításban szereplő action után található a használni kívánt szerver oldali (feldolgozás helyén) alkalmazás hivatkozása (általában cgiscript program), míg a get, vagy post a használat módszerére utal (post=postázás). Az űrlapelemek általános alakja: <input type=" " name=" " value=" "> A type akkor használatos, ha a mező típusát is meghatározzuk. Típusok: <input type="buttom" name="g1" value="felirata"> Nyomógomb létrehozása, melynek hivatkozási neve a weblapon g1, a gombon megjelenő felirat pedig a value után található. <input type="submit" name="s" value="leadás"> Űrlap elküldésére szolgáló speciális nyomógomb. <input type="reset" name="r" value="törlés"> Az űrlap beviteli mezőinek törlésére szolgáló speciális nyomógomb. leadás törlés 5. oldal

6 <input type="radio" name="r1" value="v1"> <input type="radio" checked name="r2" value="v2"> Két rádiógomb leírása, az első alaphelyzetben jelöletlen, míg a második jelölt. <input type="checkbox" checked name="c1" value="on"> <input type="checkbox" name="c2" value="on"> Két jelölőnégyzet, melyek közül az első alapértelmezve is jelölt. <input type="text" size="20" name="t1" value="kezdő"> Egysoros szövegbeviteli mező, melynek hossza 20 karakter, alapfelirata pedig "kezdő". kezdő <input type="password" size="10" name="t2" value="**********"> Jelszóbeviteli mező meghatározása. ********** <input type="textarea" name="s2" rows="2" colls="20" value=" "> Gördíthető szövegbeviteli mező két sorban és 20 oszlopban, kezdőszöveg nélkül (elhagyható). <select name="d1" multiple size="1"> <option>első</option> <option>második</option> <option>harmadik</option> </select> Legördülő menü, három választási lehetőségget tartalmazva (itt egyik sincs jelölve), melyek közül több is kijelölhető (multiple), egy sort felhasználva a lapon. Ha valamelyik elemet alaphelyzetben kijelöltté akarjuk tenni, akkor az option-ja után írjuk be, hogy selected. első 6. oldal