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.
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!
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):
<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!
Koszonom, tudtal segiteni!!!:)