Bevezetés a HTML leíró nyelvbe


Hogyan kezdjünk hozzá egy HTML kód elkészítéséhez? Milyen programokat érdemes használnunk és mit kell tudnunk, mielőtt hozzákezdenén egy honlap elkészítéséhez?

Kezdetben a HTML fejlesztők fő célja az volt hogy egy olyan leíró nyelvet hozzanak létre, amelyet minden böngésző képes megjeleníteni. Ekkor a tartalom bevitele és egyszerű megjelenítése volt a lényeg. Az egyes részek a különböző böngészőkben azonban más-más módon jelenetek meg, így egyre inkább kezdtek kialakulni a formázó utasítások is. Az oldalak készítői szerették volna a kezükben tartani az irányítást a megjelenéssel kapcsolatban is.

HTML kód bármilyen szövegszerkesztő program segítségével készíthető. Egyedüli feltétel hogy képes legyen “csak szöveg” formátumban menteni. Én általában az UltraEdit vagy az AceHTML nevű programokat használom a kódok elkészítésére.

Napjainkban már nagyon sok program jelent meg, amivel pár perces munka egy mutatós oldal elkészítése. Ezek a programok nem vagy csak kis mértékben engedélyezik a kódban történő módosításokat. Azért sem javaslom ezeknek a programoknak a használatát, mert általában egy sablon alapján készülnek az oldalak, így természetes, hogy azok sablonosak lesznek, még ha lehetőség is van kisebb beállításokra.

Talán a legjobb megoldás egy olyan program használata, mint az imént említett AceHTML, amelyben megtalálhatók a HTML elemek beillesztésének lehetősége is. Így tulajdonképpen mi készítjük a forráskódot, de jelentősen felgyorsítja a munkát, hogy könnyedén beilleszthetünk új elemeket, vagy pillanatok alatt értéket adhatunk az egyes paramétereknek.

A HTML nyelvben az utasításokat a következő formában használjuk “‹” és “›” között. ‹UTASÍTÁS› Lezáró tag estén egy “/” jel kerül az utasítás elé: ‹/UTASÍTÁS›. Nem minden elemnek van lezáró tagja, sőt van ahol tilos is kitenni. A XHTML esetében viszont minden elemet kötelező lezárni.

Az utasítások paraméterezése a következő módon zajlik. ‹UTASÍTÁS PARAMÉTER=”érték”›Szöveg‹/UTASÍTÁS›. Az utasítás után, de még a lezáró “›” karakter előtt adunk értéket az egyes paramétereknek.

Az egyes utasítások egymásba is ágyazhatóak.
‹b›Ma‹i›HTML‹/i›kódot írok.‹/b›

Eredmény:

Ma HTML kódot írok.

Tipp:

- Több szóköz használata esetén is csak egy jelenik meg. Nem számít, hány szóközt írunk egymás mellé, a böngésző egy szóköznek fogja azt értelmezni, és úgy is jeleníti meg.

- Kis és nagy betűk használata az utasításokban nem változtat a végeredményen. A következő utasítások ugyanazt a hatást érik el.
‹UTASÍTÁS›, ‹UTAsítáS›, ‹utasítás›
Az XHTML esetén kötelezőa csak kisbetűs alak használata.

- A kód készítésében érdemes megjegyzéseket elhelyezni bizonyos sorokba, hogy később is átlássuk a korábban kemény munkával elkészített kódot.
‹!– Ez egy megjegyzés, ami nem jelenik meg a böngészőben. –›

A egyes dokumentumokra azok URL-jével hivatkozhatunk.
Egy URL (Uniform Resource Locator) általában három fő részből épül fel.
1. Protocol – Az objektum elérési módja
2. Hostname – Az objektumot tartalmazó számítógép neve
3. Pathname – Az objektum elérési útja az előbb leírt számítógépen belül.

URL elérési módok:
file://
Egy dokumentum a kliens számítógépén. Általában kapcsolat nélküli munka esetén találkozunk vele, amikor egy a számítógépünkön található dokumentumot tekintünk meg.
ftp://
File Transfer Protocol – A fájl átviteli protokoll rövidítése. Segítségével az erre lehetőséget adó számítógépekről tölthetünk le adatokat, általában bináris formában.
http://
HyperText Transfer Protocol
A böngészők számára nyújt lehetőséget az általuk megjeleníthető dokumentumok szerverről történő letöltésére.

Néhány példa helyes URL-ekre:
file:///C|/MUNKA/PROBA.HTML
ftp://ftp.szerver.hu/public/proba.zip

http://www.szerver.hu

http://www.alapceg.hu/minta/bemutat.html#kezdet

Amennyiben nem egy fájlt, hanem valamilyen más objektumot írunk le.
telnet://szerver.hu
Ezzel a megoldással egy távoli számítógépre jelentkezhetünk be. Fontos hogy legyen hozzáférésünk (felhasználó név és jelszó) az adott szerverhez.
mailto:konrad@szervernev.hu
Ezzel a megoldással általában levélküldési lehetőséget szeretnénk biztosítani. A böngésző egy beépített vagy egy külső levelező programot indít el.

HTML adattípusok

URL– Ez az adattípus értelemszerűen egy URL-t (címet) jelent.

Szöveges adat – Név: Betűvel kell kezdődnie, ezután pedig tetszőleges számú karakter állhat.
Szöveg: Tetszőleges szöveget tartalmazhat, beleértve a speciális karakterkódokat is.

Szín – Kétféle módon adhatunk meg színeket.
Hexadecimális módon. Például #FF00FF
Előre definiált név segítségével. Például blue.

Számadatok – Ezek a számadatok általában valamilyen méretet jelölnek.
Abszolút: Képpontokban adjuk meg. Például “100”
Relatív: A felhasználható terület egy részét szeretnénk kihasználni. Ezt százalékos adatban adhatjuk meg. Például “50%”

Nyelvkódok – Egy emberi nyelvre utaló kódot tartalmaznak ezek a paraméterek.
hu – magyal
de – német
fr – francia
en – angol
en-US – amerikai angol

Egyszerű karakterek – Egyes paramétereknek csupán egyszerű karakterekre van szükségük, amelyek lehetnek szimpla betűk, de ugyanúgy írhatunk ide speciális kódot is.

Dátumok és Idők – Ezzel az értéktípussal időpontot adhatunk meg.
YYYY-MM-DDThh:mm:ssTZD

YYYY – év (négy számjegy)
MM –hónap (01-től 12-ig)
DD – nap (01-től 31-ig)
hh – óra (00-tól 23-ig)
mm – perc (00-tól 59-ig)
ss – másodperc (00-tól 59-ig)
TZD – időzóna jelző

Amennyiben az időpont nem áll rendelkezésünkre pontosan akkor a perc, másodperc, stb. helyére 00-t kell írni.

Keret–nevek – A következő keretneveken kívül minden keretnévnek betűvel kell kezdődnie.
_blank – egy új névtelen ablakba kell betöltődnie
_self – az aktuális dokumentumot tartalmazó keretbe kell betöltődnie
_parent – az aktuális dokumentumot tartalmazó keret szülőkeretébe kell betöltődnie
_top – minden keretet felülírva az eredeti ablakba kell betöltődnie

Médium – leírók – Az aktuális elem milyen médiához készült.
screen – számítógép képernyő
tty – fix karakterkészlettel rendelkező, grafikus képességekkel nem rendelkező eszközök
tv – televízió jellegű berendezések
projection – kivetítő készülékek
handheld – kézi számítógépek
print – nyomtatott oldalak
braille – Braille –írást megjelenítő készülék
aural – felolvasó egységek, beszédszintetizátorok
all – minden eszköz

Hivatkozás–típusok – Különböző hivatkozási típusok.
Alternate – Valamiben (például más nyelv) különböző, ám lényegében hasonló információkat tartalmazó dokumentumra mutat
Stylesheet – Egy külső stíluslap-leírásra mutat
Start – Egy aktuális dokumentumrendszer első oldalára mutat
Next – Egy dokumentumsorozat következő oldalára mutat
Pre – Dokumentumsorozat előző oldalára mutat
Contets, ToC – Dokumentum(ok) tartalomjegyzéke ként szolgáló dokumentumra hivatkozik
Index – A dokumentum indexére mutató hivatkozás
Glossary – A dokumentum szójegyzékét tartalmazó dokumentumra mutat
Copyright – Az adott dokumentumra vonatkozó jogvédelmi információt tartalmazó dokumentumra mutat.
Chapter – Egy fejezetre utaló hivatkozás
Section – Egy bizonyos részletre mutató hivatkozás
Subsection – Egy alrészletre mutató hivatkozás
Appendix – A dokumentum hozzáfűzéseit tartalmazó dokumentumra mutat
Help – Segítséget nyújtó dokumentumra mutat
Bookmark – Egy könyvjelzőre mutató hivatkozás. Lehetnek például kulcspontok egy nagyobb dokumentumon belül.

Kapcsolódó bejegyzések:
  • Az alapvető HTML elemek leírása; HTML, HEAD, TITLE, SCRIPT és STYLE, ISINDEX, BASE, META, LINK, BODY.1. HTML verzióformációA dokumentum elsõ sorában a …

  • A karakterszintű HTML elemek leírása; tt, i, b, u, s, big, small, sub, sup, em, strong, cite, code, dfn, kbd, samp, var, a, img, font, basefont, br1. Fizik …

  • A speciális karakterek használata bizonyos esetekben fontos lehet. Számomra elsősorban a tananyagok készítésekor volt jelentősége. Ha például egy kódot szeretnék …

  • Az bekezdésszintű HTML elemek leírása; H1-H6, ADDRESS, P, UL LI és OL, DL DT és DD, PRE, DIR és MENU, DIV és CENTER, BLOCKQUOTE, HR1. Fejlécek ‹H1› – ‹H6› …

  • Backlink ellenőrzéshez már volt is a lapon tipp és lesz is még, de azt mindenképp szeretném már az elején elmondani, hogy a sok-sok online eszköz közül az alábbi …

A cikket beküldte: GD (http://www.gdportal.hu/)

3 hozzászólás

  1. gatto says:

    Tudna nekem segiteni valaki? xhtml-ben kezdtem honlapot kesziteni, es be szeretnek illeszteni 1 galeriat, csak nem jovok ra, h hogyan kell.
    Talaltam 1 hasonlot, kuldom az oldal cimet. Arra szeretnek rajonni, h ha kattintok 1 kepre hogy jon be a galeria, es egyaltalan hogy kell letrehozni a galeriat.
    http://www.szoteklub.hu/main.php?page=galeria_showone&galid=535
    KOszonom a segitseget!

  2. Fefy says:

    gatto: ha jól emlékszem, akkor az xhtml szabványból a w3c kivette a target=”_blank” lehetőséget, így csak javascript segítségével lehet új ablakban megnyitni a dolgokat.

    Az új oldal megnyitását így tudod megcsinálni (egy példa kép segítségével mutatom be):

    6
    
    <img src="kep1.jpg" onclick="window.open('galeriat_tartlmazo_oldal.html','megnyitando_oldal_azonositoja','egyéb paraméterek')" alt="1. kép" style="cursor: hand;"/>

    Az open függvény paramétereit itt nézneheted meg: http://www.kando-kkt.sulinet.hu/mirror/jshu/04/ablakok.htm

    Viszont ennél szerintem elegánsabb a clearbox használata. Ha az oldal keresőjébe beírod, hogy clearbox, akkor találsz egy kis segítséget hozzá :)

    Remélem tudtam segíteni. További sok sikert a weboldaladhoz!

  3. gatto says:

    Koszonom, tudtal segiteni!!!:)

Szólj hozzá
a Bevezetés a HTML leíró nyelvbe c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>