Honlap - mindenki vágya!


Itt újabb próbálkozás történik a fontoskodásra. Megkísérlek egy mindenki számára érthető stílusú oktatólapot csinálni. Tárgyunk a honlap, kevésbé magyarosan Home Page. Az alapoktól egy némi jóindulattal közepesnek mondható szintig evickélünk.

Az alább szereplő példák jó része nem igényli, hogy az oldal ténylegesen be legyen kötve az Internetre. Fő célunk mégiscsak az, hogy tudjon rólunk a wwwilág, tehát tégy úgy, amint itt írva vagyon. Ha az ott leírtakat követed, másnapra már lesz egy saját honlapod a WWW-n. Persze ehhez még meg is kell csinálnod. (Ha tudsz angolul,használhatod ezt is, de akkor minek jöttél ide? :)


Mi kell ahhoz, hogy ezt olvasd? Célszerű egy Xterminál. Kell egy szövegszerkesztő (mondjuk xedit), meg egy Mosaic. A saját, frissen irt oldaladat, ha még nincs bekötve a Hallgatói címlapok közé, a File menü Open Local... menüpontjával töltheted be. A megjelenő ablakban keresd meg a file-dat, és Open. Ha változtattál rajta, mentsd el a szövegszerkesztővel és töltsd be újra, ez a felső ikonok közül a saját farkába harapó nyíllal lehetséges. Ha a képeken változtatsz, a File-n belül a Reload Images vár rád.
Tartalomjegyzék
Elsőként annyit, mi az a minimális oldal, ami már látszik. Kell hozzá az ún. head, ami ilyen:
 <html> <head> <title> Hello wwworld! </title>
A <html> jelzi, hogy itten HTML file kezdődik, a <title> és </title> közti szöveg kerül a címsorba. Következzék maga a szöveg:
 <body>
 Szia apu! Képzeld fent vagyok az Interneten!
 </body>
 </html>
Elvben ezt látod most. Ha nem, akkor szóközt hagyhattál egy < előtt vagy után, nem tettél ki egy / jelet, hasonló csacskaságok.

Általában megfigyelhető, hogy ha egy parancs, mondjuk a <parancs> egy tartomány kezdetét jelzi, akkor a </parancs> fogja bezárni. Tehát a <html> paranccsal indított oldalt </html>-el kell lezárni.

fel


Rögtön jön is néhány ilyen parancs. Ezek a betűtípust változtatják:
 
 <html> <head> <title> Betűk </title>
 Betűk </title>
 <body>
 Betűtípusok: <br>
 <b> Teltkarcsú (bold) </b> <br>
 <tt> Írógép (monospaced, teletype) </tt> <br>
 <i> Dőlt (italic) </i> <br>
 <h1> Nagyobbacska (header, mint fejléc, cím)</h1>  <br>
 <h6> (ilyen 1-6-ig van!) </h6>  <br>
És néhány parancs a szöveg tagolására:
 Ez, ami a sor végén van, a sor végét jelenti (BReak line): <br>
 Ez még egy üres sort is kirak (Paragraph, bekezdés): <p>
 Ez pedig még vonalat is húz (Horizontal Rule): <hr>
 </body>
 </html>
Utóbbiakat persze nem kell lezárni. Most ezt fogod látni.

Az új HTML szabvány ismer még jónéhány ilyesfélét, mint pl. center, de ezeket a Mosaic jelen verziója nem kezeli. Ha erre sor kerül, lesz szó azokról is.

fel


A HTML azért HyperText Markup Language, hogy a szövegből lehessen más oldalakra utalni, úgynevezett linkeket tenni. Ezt a találó nevű <a> (a, mint anchor=horgony) parancs valósítja meg. Azért persze, meg kell adni azt is, hová mutasson, ennek módja a következő:
 <html> <head> <title> Első linkek... a nagy kaland! </title>
 <body>
 <a href="elso.html"> Első linkünk </a> mutasson az első oldalra!
 </body>
 </html>
Az <a> után a href= segítségével adhatjuk meg a cél címét. Működik e? Igen!

Ilyen rövid csak akkor lehet egy cím, ha saját alkönyvtárunkban van. Távolabbi címek tekintélyes hosszúságot is elérhetnek, mint például ez:

 <a href="http://www.ferrari.it/ferrari/vetture/ieri.e/ieri.html">Ferrari</a>
Sajnos ezt már könnyű beírásnál eltéveszteni, ezért figyelni kell. Egy hosszú címet egy elütött karakter vagy egy rossz helyen levő szóköz megtalálhatatlanná tehet. A cím úgy kezdődik, hogy http:// . Ez jelzi, hogy HTTP protokollal kell a dokumentumot letöltenünk. Léteznek más protokollok is, ezeknek persze más kezdetük van. Előfordul még a gopher://, ftp:// és file://. Az ftp: a hallgatói szerverekről csak Szegeden belül elérhető, ha mégis kellene a külvilágból anyag, fordulj Illés Tamáshoz, aki majd segít. A file: csak olyankor fordulhat elő, ha a Mosaic Open Local.. funkcióját használod.

Oldaladba belinkelhetsz képet vagy hangot is. Ilyenkor a href= után a file nevét kell írni. Ha a linkre kattintasz, a browser letölti, és a megfelelő formátumban megjeleníti a file-t.

fel


Képeket is lehet illeszteni az oldalakba. Erre az <img> parancs szolgál. Kell hozzá természetesen a kép címe is:
 <html> <head> <title> Kezdődik a dizájn </title>
 <body>
 <img src="nmoslog.gif"> <p>
Az src= után kell megnevezni a képet. Többféle opciót is megadhatunk. Hasznos az align=, amely lehet top, middle és bottom. Ez határozza meg, hogy a kép után hova írja a szöveget, a kép tetejéhez, közepéhez vagy az aljához.
 <img src="nmoslog.gif" align=bottom> Alulra <p>
 <img src="nmoslog.gif" align=middle> Középre <p>
 <img src="nmoslog.gif" align=top> A tetejére. Csak az első sort illeszti, a
                                       <br> többi már a kép alá megy!
 </body>
 </html>
Ezt kell most látnod.

fel


A képeket is használhatod linknek. Célszerű ezt tenni, ha egy nagy képed van. Nem kell a 1.2 Mb-os képet beilleszteni az oldalba, hanem annak egy kicsinyített, mondjuk 10 Kb-os változatát, és ez mint link mutat a nagy képre. Ez a gyakorlatban:
 <html> <head> <title> Képre kép </title>
 <body>
 <a href="nmoslog.gif"> <img src="kmoslog.gif" align=bottom> </a> <p>
 <a href="nmoslog.gif"> <img src="kmoslog.gif" align=bottom border=0> </a>
 </body>
 </html>
Ezen a példán látható az, hogyan tölt le a browsered egy képet. Ez a megoldás kíválóan alkalmas az oldal esztétikussá tételéhez. A border=0 opció eltünteti a keretet, ami a kép körül egyébként látszana.

fel


A háttér és a színek - ezzel lehet igazán feldobni egy oldalt. A <body> parancs opcióiként adhatod meg:
 <html> <head> <title> Backgorund </title>

 <body bgcolor=white text=red vlink=green alink=cyan link=magenta>

 És ha már meg adtál egy színkombinációt,<p> 
 <a href="nmoslog.gif">ez </a> egy link, csak hogy lássuk, milyen,<p>
 <a href="nincs_is_ijen.html">ez</a> meg egy olyan link, ahol még nem voltál
 </body>
 </html>
E beállítással elég csúf oldalt kapsz, de példának jó.

Mi mit jelent?
bgcolor - a háttér színe (background color),
text - a szövegé,
link - olyan link, ahol még nem voltál,
vlink - olyan link, ahol már voltál,
alink - az a link, amelyre éppen kattintasz.
Ha színt adsz meg, nem célszerű a nevén nevezni. Nem biztos, hogy minden browser felfogja, vagy ugyanazt érti rajta. Megbízhatóbb RGB-kóddal megadni, #rrggbb alakban. RR a vörös szín (red) mennyisége, hexadecimális alakban, 00-tól ff-ig, GG a zöld (green), BB a kék (blue. Igy a vörös #ff0000, a zöld #00ff00, a kék #0000ff, pl. a sárga #ffff00, egy szörke #f0f0f0, a fekete #000000, a fehér #ffffff lesz. Előző példasorunk pedig ilyen:
  <body bgcolor="#ffffff" text="#ff0000" vlink="#00ff00" alink="#00ffff" link="#ff00ff">

fel


Ha mintát akarsz a háttérbe, ezt még meg kell toldanod azzal, hogy background= és a mintát tartalmazó file neve. A mintának nem kell egészoldalasnak lennie, a browser annyiszor ismétli, ahányszor kell. A példánk:
 <html> <head> <title> Backgorund Image</title>
 <body background="nmoslog.gif">
 </body>
 </html>
Egész jó, nem? Az előbb látott háttér felhívja figyelmünket arra, hogy óvatosan bánjunk a kiválasztott mintával. A színeket is válasszuk úgy, hogy a szemnek kellemes és használható legyen. Az én oldalaim ilyen szempontból nem tökéletesek, mert a használt linkek nem ugranak ki a szövegből, és ha a szöveg a téglaminta egyik vonalára kerül, nem látható jól. De nekem így tetszik.

Általános szempont, hogy túl nagy képeket ne tegyünk az oldalra. Vonatkozik ez persze a háttér mintájára is. Elég unalmas egy 100 Kb-os hátteret megvárni...

fel


Most lássuk a listákat. Háromfélét ismer most a Mosaic, de el tudom képzelni, hogy lesz még pár.
 <html> <head> <title> Listák </title>
 <body>
 <hr>
 DL lista:
 <dl> <lh> <b> Lista feje </b> </lh>
 <dt> Kint 1.sor
  <dd> Bent 1.sor
 <dt> Kint 2.sor
  <dd> Bent 2.sor
  <dd> Bent 3.sor
 </dl> Lista vége
 <hr>
 UL lista:
 <ul> <lh> <b> Lista feje </b> </lh>
  <li> 1.sor
  <li> 2.sor
 </ul> Lista vége
 <hr>
 OL lista:
 <ol> <lh> <b> Lista feje </b> </lh>
  <li> 1.sor
  <li> 2.sor
 </ol> Lista vége
 </body>
 </html>
Magyarázat helyett nézzük meg, mit csinálnak. A különböző listák egymásba ágyazhatók.

fel


Illik az általad írt oldalak valamelyikén, vagy akár mindegyiken feltüntetni az e-mail címedet. Ezt javítja a mailto parancs, amellyel közvetlenül küldhet neked levelet az, aki éppen az oldaladat nézi:
 <html> <head> <title> Levél </title>
 <body>
 <a href="mailto:sajatneved@domainod.altalaban.e-mail.cimed">sajátneved@domainod.altalaban.e-mail.cimed
 </body>
 </html>
A megfelelő helyekre természetesen az adataidat írd be. A példában az én címem szerepel.

fel


Apróságok, amelyek segítségedre lehetnek:
Egy részletes leírás meg mindenféle a HTTP-ről.
A Mosaic program konfigurálása
Néhány keresetlen szó az NCSA Mosaic browserről
Képek hátterének átlátszóvá tétele
Egy fontos felhívás
Az érzékeny képek

Jó szórakozást! Ha nem jó, amit írtam, hozzáfűzni valód, kérdésed van, írj! A továbbiakban (és általában mindig) használd egészséggel a FILE menü View Source menüpontját, és kérdezz! A pesszimista bevezető ellenére már sok ember járt itt!
És ezzel visszamehetsz a nyitólapra.
Tomka Gergely és Illés Tamás h430935@stud.u-szeged.hu