Honlap - mindenki vágya!
Honlap - mindenki vágya!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? :)
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.
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.
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.
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.
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.
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ó.
<body bgcolor="#ffffff" text="#ff0000" vlink="#00ff00" alink="#00ffff" link="#ff00ff">
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...
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.
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.
Apróságok, amelyek segítségedre lehetnek: