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ó mutatók segítségével további, mélyebb ismereteket lehet szerezni angol nyelven.
Tartalomjegyzék
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 a jelöléseken ('tags') alapul. Ezek a jelek határozzák meg, hogy a következő szöveg milyen formátumban jelenjen meg (pl. vastag, dőlt, stb). Kézzel is begépelhetjük ezeket, de már létezik számos kényelmes HTML szerkesztő, amelyek közül néhány megtalálható a Netscape és Microsoft szervereken. Bő választék talalható a program szervereken, pl. a Dave Central-ban. Ezek a szerkesztő programok a HTML-re való konvertálást gyorsan elvégzik. Nézd meg őket és válaszd ki a számodra legkényelmesebbet közülük.
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">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 nem tesz 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 a szerkesztésnél. De igyá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.
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>Ez a dokumentum törzse
<
/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>Példa HTML</TITLE>
<body>
<H1>Első szintű fejcím</H1>
Ez az első bekezdés.<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.
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:
É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:
gopher:// Gopher szerverhez.
ftp:// FTP szerverhez.
telnet:// Telnet alapú kapcsolathoz.
WAIS:// WAIS szerveren lévő dokumentumhoz.
news: Usenet newsgroup-hoz.
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.
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.
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>
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>Második adat
<LI>Harmadik adat
</UL>
Az eredmény így néz ki:
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é.
A sorszámozott vagy sorrendbe tett lista nagyon egyszerűen működik:
<OL>
<LI>Első adat
<LI>Második adat
<LI>Harmadik adat
</OL>
Az eredmény így néz ki:
A definíció lista felváltva tartalmaz egy kifejezést rövidítve <DT> és a meghatározását <DD>. Ezek az elemek alkotnak egy listát amely így bekezdésekkel lesz írva.
<DL>
<DT>EuroNet Internet Inc.
<DD>EuroNet a leggyorsabban növekvő szolgáltató aki Internet hozzáférést
biztosít Európában. Ez a fiatal de állandóan gyarapodó cég 1994. júniusában
alakult.
<DT>NCSA, the National Center for Supercomputing Applications.
<DD>NCSA az Illinoisi Egyetem területén helyezkedik el. ők a Mosaic fejlesztői.
</DL>
A formázott definíció lista a következő:
A képek tesznek igazi különbséget a kész oldalak megjelenésében a képernyőn. A legtöbb böngészőprogram (Netscape, Mosaic stb.) tud képeket megjeleníteni, amelyek általában X Bitmap (XBM) vagy GIF formátumban vannak. A memóriában tartani a képeket, főleg a nagyobbakat, hosszú időt vehet igénybe a feldolgozásnál és a letöltésnél, ezért jó gondolat ezeket a képeket meglehetősen kis méretben tartani.
Egy kép beillesztése:
<IMG SRC="URL/képnév.formátum">
A kép helyének megadása, URL mutató, ugyanúgy működik, mint a HREF megadásánál. A fájl formátumot mindig meg kell adni egy ponttal elválasztva. Ha a kép formátuma például GIF, akkor a kép helyének megadásánál a fájlnév .gif-re végződik.
Ez a legegyszerűbb módja egy kép beillesztésének. A kép a beállítástól függően igazodik a szomszédos szöveggel. Az utána következő szöveg igazodhat a kép tetejével, közepével vagy az aljával a következők megadásával:
<IMG ALIGN=TOP SRC="URL/képnév.formátum">
A szöveg igazodása a kép tetejéhez.
<IMG ALIGN=BOTTOM SRC="URL/képnév.formátum">
A szöveg igazodása a kép aljához.
Megadható egy képre hivatkozás is a HREF segítségével, ha egy kép nincsen a könyvtárunkban:
<A HREF="URL/képnév.formátum">kiemelt utalás</A>
Külső animáció és zene ugyanilyen módon adható meg. például egy Quick Time Movie megadása:
<A HREF="URL/filmcím.mov">kiemelt utalás</A>
Egy AU hang fájl megadása:
<A HREF="URL/hangfájlnév.au">kiemelt utalás</A>
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" |
R | lime="#00FF00" |
G | blue="#0000FF" |
B | purple="#800080" |
p |
silver="#C0C0C0" |
s | gray="#808080" |
gray | olive="#808000" |
o | teal="#008080" |
t |
white="#FFFFFF" |
w | yellow="#FFFF00" |
y | maroon="#800000" |
m | fuchsia="#FF00FF" |
f |
black="#000000" |
a | navy ="#000080" |
n | aqua="#00FFFF" |
a | green="#080000" |
g |
Egyéb jelek
<PRE> az előformázottat jelenti, a szöveg állandó szélességű betűkészlettel fog megjelenni. Szóköz, új sor és tabulátor lényeges lesz.
Az összes előző jelölésnek van egy lezáró jele pl. <PRE> és </PRE>.
<P> új paragrafus kezdése és lezárása . </P>
A következő jelöléseknek nincsen lezárása:
<HR> megmondja a böngészőnek, hogy jelenítsen meg egy vízszintes vonalat a böngésző ablak szélességében.
<BR> sortörés.
Teszt oldal. Ha ide kattintasz szabadon kísérletezhetsz
Táblázatok:
Ha ide kattintasz, a táblázatok készítésérôl olvashatsz.
Ez egy nagyon egyszerű és tömör bevezető a HTML alapjaiba, reméljük tud neked segíteni. Sok más jó konzultációs anyag található a Web hálózaton (angol nyelven) néhányat az előbbiekben közlünk, olvasd el őket. Ez azoknak készült. akik a saját home page-üket akarják az EuroNet Web szerverre felrakni. Reméljük sikerül is, de ha bármi kérdésed, hozzáfűznivalód van evvel az anyaggal kapcsolatban, kérjük írd meg nekünk:
csonka@web.inc.bme.huA dokumentum megírása óta fontos változásokon estek át a böngészők. A Netscape lehetővé tesz igen sokféle megjelenítést, mint a képek és szöveg illesztése, középpontosítás, túlnyúlás jobbra és balra. A vízszintes vonalak is változóak, mind vastagságban, mind szélességben. A betűtípusok változhattak, a háttér színekkel és a sablonokkal most látják el őket. Ezek a kiterjesztések túl hosszúak ahhoz, hogy itt felsoroljuk őket, így ezek megismeréséhez használjuk az alábbi linkeket:
Hogyan tegyük fel kész home page-ünket egy szerverre (pl. goliat.eik.bme.hu)?
1. Mentsd el a fájlt mint index.html (vagy index.htm ha Dos-t használsz).
2. Készits egy public_html konyvtarat goliat.eik.bme.hu gepen es masold ebbe ftp-vel az index.html file, valamint az osszes egyeb szukseges, altalad keszitett file-t, amire az index.html mutat.
3. Ezután hozzáférhetsz a home page-hez az URL mutató használatával.
http://goliat.eik.bme.hu/~<login név>/
Lábjegyzet
Ezek izgalmas idők, ahogy a Web terjedésével egyre több és több embernek lesz lehetősége, hogy saját információit felrakja rá. Mire vársz még! Szórakozz!
Egyike a legjobb tanulási módoknak mások oldalainak tanulmányozása. Ha látsz valami érdekeset, egy jó szöveget, egy érdekes képet, töltsd le és nézd meg hogyan készült. Netscape-pel 'View' menűből válaszd a 'Page Source' parancsot.