HTML Dokumentumok Írása

Remélhetőleg ez a bevezető elegendő lesz a HTML (Hypertext Markup Language) alapjainak megértéséhez, és a dokumentum végén található hivatkozások (HTML hivatkozások) segítségével további, mélyebb ismereteket lehet szerezni.

Tartalomjegyzék

1. Bevezetés
2. Egyszerű HTML dokumentum készítése
3. Kapcsolódás más dokumentumokhoz (linking)
4. Másik dokumentumra való ugrás
5. Névvel jelzett részekre való ugrás másik dokumentumban
6. Névvel jelzett részekre való ugrás ugyanabban a dokumentumban
7. Számozatlan listák
8. Számozott listák
9. További jelek
10. Képek beillesztése
11. Részletes leírás (A, IMG, FORM)
12. Tablázatok
13. JavaScript
14. HTML hivatkozások

Bevezetés

A HyperText Markup Language (HTML, magyarul hipertext jelölő nyelv) dokumentumok egyszerű, ASCII formátumban írt szövegek. Ez azt jelenti, hogy ezek bármilyen szövegszerkesztővel elkészíthetők és módosíthatók. A HTML nyelve utasításokon (angolul 'tags', magyarul más szavakkal: jelölések, parancsok, elemek) alapul. Ezeket az utasításokat a böngészőprogram értelmezi és végrehajtja. Ezért az utasítás mindig megelőzi a dokumentum azon részét , amelyre vonatkozik. Pl. ilyen jelölések határozzák meg, hogy a következő szöveg milyen formátumban jelenjen meg (pl. vastag, dőlt, stb).

A dokumentumkészítéshez használható HTML utasítások köre állandóan bővül, a nyelv fejlődik. A szabványosítás csak lassan követi a fejlődést. Ezért nem minden böngészőprogram tudja a HTML utasítások mindegyikét értelmezni. A rosszul definiált nyelv miatt a böngésző programok hatalmas méretűek lesznek, nagy erőforrást, sok memóriát fogyasztanak, mert mindenféle hibás írásmódot valahogy (sokszor esetlegesen) le kell kezelniük. Ezért előfordul, hogy az oldal megjelenése attól függ milyen böngészővel nézzük.

Ezért 2000-ben definiáltak egy szigorúbb nyelvet, amelyet xhtml-nek hívnak. További információ itt találaható.

Kézzel is begépelhetjük az utasításokat, de létezik számos kényelmes HTML szerkesztő, amelyek közül néhány megtalálható a Netscape és Microsoft szervereken.

 Az Egyetemi Informatikai Szolgáltató Központ (EISZK) most már a BME intraneten is közzéteszi az általa szervezett, illetve összefogott szoftverbeszerzési akciókat, valamint az egyéb - elsősorban szoftverbeszerzéssel, termékbemutatókkal, tanfolyamokkal, továbbképzésekkel kapcsolatos - híreket.

CAMPUS - felsőoktatási licenc

A Microsoft CAMPUS termékek letölthetőek a rapid.eik.bme.hu ftp szerverrõl.

Intézményi licenc igazolás Otthoni használathoz kitöltendő licenc igénylő lap

A tanfolyam céljaira legjobban a Frontpage használható.

Ezen kívül több jó angol nyelvű oktató anyag is létezik a Web-en, amelyek közül néhányhoz meg is található a kapcsolat, vagy más néven link a jelen szöveg végén. Egy jó, olvasható és esztétikus dokumentum írásához nem szükséges mindjárt mindent tudni a HTML-ről és remélhetőleg a következő néhány lépés elegendő lesz az elinduláshoz.

Lényeges dolog, hogy a magyar nyelvű dokumentumokban az ékezetek helyesen jelenjenek meg. Ezt a következő meta utasítás teszi lehetővé a dokumentum fejlécében:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
 

Egyszerű HTML dokumentum készítése

Az elkészített dokumentumot .html vagy .htm kiterjesztésű file-ként kell elmenteni. (A Dos felhasználóknak .htm kiterjesztéssel kell elmenteni a file-jaikat.) Ha  WWW szerverre akarod helyezni akkor index.html-nek kell elnevezni. Most hogy készítettél egy üres dokumentumot index.html névvel elkezdhetjük a dokumentum formájának alakítását. 

A HTML eredetileg nem tett különbséget a kis és nagybetű között. Egyaránt használható a kis és nagybetű. A <TITLE> írható így is <title> de akár így is <TitLE>. Mégis talán a jobban látható nagy betűk előnyösebbek lehetnek az oktatás során. De vigyázat, mivel az Internet és a unix megkülönbözteti a kis és nagy betűket a mutatók szerkesztésekor ezt figyelembe kell venni.

Ennek a lazaságnak az xhtml megjelenésével vége, minden alapszót és paramétert kis betűvel kell írni.

Minden HTML dokumentumnak kell legyen egy főcíme. Ez nem látható a lapon, de a képernyő tetején lévő cím sorban megjelenik. Ez hasznos a dokumentum azonosításához.

Lehetőség van a dokumentum megtekintésére az Internetbe való belépés nélkül is. A böngésző program 'File' menűjében az 'Open Local' opcióval az éppen írt dokumentumot megnézhetjük. Ha ezek után a szöveg valamely részét megváltoztatod, akkor a 'Reload' menüpont segítségével az új tartalomnak megfelelő dokumentum jelenik meg a képernyőn.

A html dokumentumok alapszerkezete:

<html>

    <head>

        <title>Ez a dokumentum címe</title>

    </head>

    <body>

  </body>

</html>

A kódot módosíthatod az alábbi ablakban:

Adjunk a dokumentumunknak egy címet, pl. hívjuk 'pelda html'-nek:

<title>Pelda HTML</title>

Ez a megjelenítéskor címsorban jelenik majd meg.

Az alábbiakban bemutatjuk, hogy lehet a szövegben nagy méretű betűvel fejezet címet írni. A H mellett álló szám a cím szintjére utal.

<h1>pelda HTML</h1>

Így lehet 2. szintű fejezet címet írni:

<h2>Példa HTML</h2>

És így tovább. Már van fő és fejezet címünk. Bizonyára észrevetted, hogy a szövegek előtt és után álló jelek, a 'tag'-ok mindíg párban vannak. Van egy nyitó jel és egy záró. A / jel mutatja meg, hogy az adott jelnek megfelelő stílus hol fejeződik be. Más jelek hatásai másképp záródnak le, pl. a bekezdés <P>, ahol nincs záró jel mint pl. </P>. Egy másik példa az üres vízszintes sor, vagy 'Horisontal Rule', <HR>

Itt látható egy minimális HTML dokumentum:

<html>

<title>Pelda HTML</title>

<body>
<h1>Első szintű fejcím</h1>
<p>Ez az első bekezdés.</p>
<p>Ez a második.</p>
Ez egy vízszintes vonal.<hr />
</body>

</html>

Kattints ide, ha kíváncsi vagy, hogy néz ki megformázva.

A bekezdés jelzés <P>, akkor is használható, amikor üres helyeket akarsz a dokumentumba tenni, illetve sorokat akarsz kihagyni.

Kapcsolódás más dokumentumokhoz (linking)

A HTML-ben a legjobb és legédekesebb dolog, hogy lehetőség van más, szintén HTML dokumentumokhoz való kapcsolódásra. Ezeket a kapcsolási pontokat ('hyperlinks') a program színezéssel és/vagy aláhúzással teszi feltűnővé. A HTML írásakor a <A> jelzés jelzi a program számára, hogy most kapcsolódási pont következik. Ahhoz egy kapcsolódási pontot tudjál betenni a dokumentumba a következőket kell tenni:

Keresd meg a címét annak a HTML dokumentumnak, ahova a kapcsolatot szeretnéd. Ezt a cimet Universal Resource Locator-nak, URL-nek, magyarul Altalanos Forras Mutatonak hivjak. Ez nem egyszerűen a dokumentum elérési útvonala (internet cim, konyvtarnev, filenev), hanem meg kell adni az elereshez hasznalt protokoll nevet is. Vigyázat, mert az URL címeknél meg kell különböztetni a kis és nagybetűket. Egy URL cím cszerkezete a következő:

protocol://host.domain/directory/filename

Ennek a dokumentumnak az URL címe ezek szerint:

http://www.ch.bme.hu/inc/csg/oktat/www/hhtmltut.html

Az URL-lel kapcsolatos további információkhoz, a kék szövegrészre való kattintással kapcsolódj egy másik HTML dokumentumhoz, NCSA, amely a "Beginner's Guide to URL's" című, angol nyelvű dokumentum.

Egy másik példa, amely segítségével bemutatjuk a kapcsolódás lehetőségét a CERN-ben lévő WWWVirtual Library-hoz.

<A HREF="http://info.cern.ch/hypertext/DataSources/bySubject/Overview.html">A WWWVirtual Library CERN-ben </A>

A kifejezés, <A HREF=, jelenti a program számára, hogy kapcsólódás ('link') következik. Aztán meg kell adni az URL címet, ahogy azt az előbbiekben bemutattuk: scheme://host.domain/directory/filename. Ezt követi egy nagyobb jel, >, amelynek az a jelentése, hogy az utána következő szöveg lesz kiemelve és aláhúzva a dokumentumban. A példánkban ez 'A WWWVirtual Library CERN-ben'. (Az URL cím ugyanis a dokumentumban nem feltétlenül látható.) És végül a bekezdést a </A> jellel zárjuk le. Az alábbiakban láthatjuk, hogy az így megírt kapcsolódási pont hogyan jelenik meg a HTML dokumentum futásakor:

A WWWVirtual Library CERN-ben

Érdemes néhány szót szólnunk a szerver típusáról, amelyen lévő HTML dokumentumhoz kívánunk kapcsolódni a saját dokumentumunkban. A 'scheme' kifejezés utal a típusra, amely lehet például WWW szerver, amelynél 'http://'-t kell írni típusként. Ha FTP szerverről van szó, akkor 'ftp://'-t. Minden szerver fajtának megvan a neve, amelyet az alábbiakban foglalunk össze:

ftp:// FTP szerverhez.
telnet:// Telnet alapú kapcsolathoz.
news: Usenet newsgroup-hoz.

Másik dokumentumra való ugrás

Tegyük fel, hogy szeretnél egy második oldalt is készíteni ugyanabban a dokumentumban, és valahol az első oldalon hivatkozni erre, úgy hogy a hivatkozástól egyből a második oldalra lehessen ugrani illetve kapcsolódni. Nevezzük ezt a második oldalt 'document2.html'-nek. Ekkor szintén a '<A' jelet kell használni a kapcsolat definiálásához:

<a href="document2.html">szöveg</a>

Amikor később a dokumentum olvasója a 'szöveg' mezőre klikkel, akkor a program rögtön a document2 nevű szövegrész elejére fog ugrani és ez jelenik meg a képernyőn.

Névvel jelzett részekre való ugrás másik dokumentumban

Ha a saját dokumentumodból egy másik dokumentum adott részéhez akarsz kapcsolatot építeni, akkor először el kell nevezned az adott részt, amelyre a kapcsolat irányulni fog. Ehhez a következő jelzéseket kell használni a másik dokumentumban a hivatkozni kívánt résznél. (A "sirocco" lesz az azonosító neve a dokumentum adott részének, a 'szöveg' pedig az adott rész.)

<a name="sirocco">szöveg</a>

A kapcsolat ezután a saját dokumentumunkban a következőképpen néz ki:

<a href="document2.html#sirocco">ugrás a document2-re</a>

Amikor a felhasználó az 'ugrás a document2-re' klikkel a program azonnal elugrik a második dokumentum 'szöveg' részére, amely a "sirocco" névre lett elkeresztelve.

Névvel jelzett részekre való ugrás ugyanabban a dokumentumban

A kapcsolási jelek segítségével nemcsak másik dokumentumban, de az adott dokumentumon belül is mozoghatunk, ugrálhatunk. Először itt is el kell nevezni az egyes hivatkozni kivánt szövegrészeket, mint ahogy ezt az előbb is tettük. Azonban a hivatkozásnál (kapcsolásnál) itt nem szügséges a dokumentum nevének megadása, elég csupán a szövegrész azonosító neve. Így például egy dokumentumból ugyanazon dokumentum "sirocco" nevű részére a kapcsolást a következő módon lehet megoldani:

<A HREF="#ide"> Ugrás a ide nevű részre</A>

Számozatlan listák

Beilleszthetünk egy listát a dokumentumunkba. A HTML támogat néhány listázási formát. Számozatlan lista készítése:

<ul>
<li>Első adat </li>
<li>Második adat </li>
<li>Harmadik adat </li>
</ul>

Az eredmény így néz ki:

• Első adat
• Második adat
• Harmadik adat

A számozatlan listák bármilyen hosszúak lehetnek és mindegyik adatot el lehet választani új bekezdés jellel <P>, így üres sort beszúrni az egyes adatok közé.

Számozott listák

A sorszámozott vagy sorrendbe tett lista nagyon egyszerűen működik:

<ol>
<li>Első adat </li>
<li>Második adat </li>
<li>Harmadik adat </li>
</ol>

Az eredmény így néz ki:

1. Első adat
2. Második adat
3. Harmadik adat

További jelek

Karakterformázás

Van rá lehetőség, hogy a böngésző egyes szavakat, vagy akár egész mondatokat is az általunk kívánt stílusban jelenítsen meg pl. bold vagy italic. Erre két lehetőség is kínálkozik, a logikai és a fizikai stílusok, de a logikai stílus ajánlott. Ez fontos, mert nem minden böngésző képes megjeleníteni italic stílusban, és a nyomatékosítás <EM> jobban érthető és fordítható mint az <I> italic.

Logikai stílusok a következők:

<EM> nyomatékosításra. Általában a megjelenítés italic.

<STRONG> a megjelenítés általában bold lesz.

Fizikai stílusok:

<I> megjelenítés italic.

<B> megjelenítés bold.

<TT> gépelt szöveghez, állandó szélességű betűkészlet.

A karakterek méretének és szinének beállítására szolgáló kulcsszó a font.

Átméretezés:

<font size=+3>Ez nagy.</font><font size=-3>Ez kicsi.</font>

Színezés:

<font color=#FF0000>Ez piros.</font>

Egy színt 3 komponensből keverünk ki, vörösből, zöldből és kékből (Red, Green, Blue = RGB), és mindegyik színnek 1 byte (8bit) helyet tartunk fent. Ez 24 bites színmélységet tesz lehetővé (16,8 milló különböző színárnyalat). A hipertext a karakterek és háttér szinezésére hexadecimális kódokat használ. 1 byte leírásához 2 hexadecimális kódra van szükség, így a három szín arányát 2-2, összesen 6 kóddal tudjuk megadni. 00 jelenti a teljes szín kikapcsolt állapotát, FF jelenti a teljes fényerőt. Az alábiakban néhány gyakran használt szín kódját és kulcsszavát mutatom be egy táblázatban ("RRGGBB"' jelölés esetén RR a vörös, GG a zöld és BB a kék szinösszetevők hexadecimális értéke):

red="#FF0000"

lime="#00FF00"

blue="#0000FF"

purple="#800080"

silver="#C0C0C0"

gray="#808080"

olive="#808000"

teal="#008080"

white="#FFFFFF"

yellow="#FFFF00"

maroon="#800000"

fuchsia="#FF00FF"

black="#000000"

navy ="#000080"

aqua="#00FFFF"

green="#080000"