Hozzon létre egy új fájlt az első teszthez az Ön által választott szerkesztőprogramban. Ha a Windows-szerkesztőt használja, nyissa meg a Start>Mindenprogram>Kiegészítők>Editor menüponton keresztül.
Ezután válassza a Fájl>Mentés másként parancsot . A fájltípus mező kulcsfontosságú.
Minden fájlt itt kell beállítani. Ezután írja be az index.htm fájlt a fájlnév mezőbe. Most már elmentheti a fájlt a kívánt helyre. Ez a fájl, amivel most dolgozol, az első HTML fájlod, ami jelenleg még üres. Ez hamarosan meg fog változni.
Ha a Dreamweavert használja, akkor a program indításakor célszerű megadni, hogy HTML fájlt szeretne létrehozni.
A HTML keretrendszer
Mielőtt belekezdenénk a HTML keretrendszerbe, egy fontos megjegyzés az ebben a sorozatban - és a HTML világában is - használt szemantikáról. Folyamatosan találkozni fog a tag és az elem kifejezésekkel, amelyeket sajnos gyakran félreértelmeznek. Egy példa:
<a href="news.htm">A hírekhez</a>
Ez a szintaxis egy a elemet mutat, nevezetesen <a href="news.htm">To the news</a>. Ez az elem egy nyitó a tagből, azaz <a> vagy teljes egészében <a href="news.htm">, az elem tartalmából To the news és a záró a tagből </a> áll. Ezenkívül az a elem rendelkezik a href attribútummal, amelynek attribútumértéke news.htm.
Az előző példa egy hiperhivatkozás meghatározását mutatja be HTML-ben az a elemen keresztül. Ezt az a elemet a nyitó <a> és a záró </a> tag jellemzi. Mint látható, nem olyan nehéz az elem és a tag kifejezéseket helyesen használni.
De most kezdjünk bele. Nyissa meg a korábban elmentett HTML-fájlt a szerkesztőprogramban. Minden HTML-dokumentumnak van egy bizonyos alapszerkezete.
Íme a keretrendszer teljes pompájában:
<!DOCTYPE html> <html lang="en"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> </body> </html> </body> </html>
Mit jelentenek az egyes bejegyzések? Kezdjük a dokumentumtípus deklarációval.
<!DOCTYPE html>
Az ilyen típusú dokumentumtípus-deklaráció közli a böngészővel, amelyben a webhelye később megjelenik, hogy milyen HTML-szabványt használ. Ebben az esetben ez a HTML5. Ha a HTML 4.01-et használnád, a DOCTYPE deklaráció így nézne ki:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
A dokumentumtípus-deklarációk témája különösen a HTML kezdők számára okoz zavart, mivel sokféle változat létezik. A dolog valójában nagyon egyszerű: Gondoljunk úgy a dokumentumtípus-deklarációra, mint egyfajta építési kézikönyvre, amely leírja, hogy milyen elemek szerepelhetnek egy dokumentumban.
Általában azt tanácsolom, hogy használjon rövid HTML5 deklarációt.
<!DOCTYPE html>
A modern böngészők ezt felismerik, és az oldalakat, amelyekben ezt használják, szabványos módban jelenítik meg. Azonban csak olyan HTML-elemeket szabad definiálni, amelyek a HTML5-ben engedélyezettek. Erről bővebben később.
Folytassa a html elemmel.
<html lang="en"> ... </html>
Ez az elem körülveszi a dokumentumot. Ami kiemelkedik, az a lang attribútum. Ez adja meg a dokumentumban használt nyelvet. Itt van néhány lang rövidítés a német nyelvű országok számára.
- de - német (standard)
- de-ch - német (Svájc)
- de-at - német (Ausztria)
- de-lu - német (Luxemburg)
- de-li - német (Liechtenstein)
Egyébként az angol nyelvben még több különböző hosszú rövidítés létezik.
- en-us - angol (USA)
- en-gb - angol (Egyesült Királyság)
- en-au - angol (Ausztrália)
- en-ca - angol (Kanada)
- en-nz - angol (Új-Zéland)
- en-ie - angol (Írország)
- en-z - angol (Dél-Afrika)
- en-jm - angol (Jamaica)
- en - angol (Karib-szigetek)
Hogy a kétjegyű de, gb stb. rövidítéseket használja-e, vagy inkább a fent látható összetett rövidítéseket, végső soron Önön múlik. Én a kétjegyűeket részesítem előnyben.
A dokumentum fejlécének adatait a head elemen belül várjuk.
<head> ... </head>
Igaz, a fejlécadatok kissé nehézkesnek hangzanak, de gyorsan megmagyarázhatóak. Ide olyan dolgokat teszel, amelyek részletesebben leírják a dokumentumot. Ilyen például a cím és a használt karakterkészlet. Szkriptek és stíluslapok is integrálhatók ide, és általános metaadatokat is meg lehet határozni. De erről majd később.
A title elem különösen fontos.
<title>Tutorials for image editing with Photoshop, web design & photography - PSD-Tutorials.de </title>
A cím definiálására szolgál, amelyre több helyen is szükség van.
- A böngésző címsorában.
- Amikor a böngészőben könyvjelzőt állítunk be.
- És természetesen a cím nagyon fontos szerepet játszik a keresőoptimalizálásban.
Láthatod tehát, hogy mennyire fontos a cím. Olyan címet válasszon, amely a lehető legrövidebb és legtömörebb.
Az oldal részletes leírásához használhatsz meta információkat. Erről részletes információk következnek majd.
Folytassa a használt karakterkészlettel.
<meta charset="UTF-8" />
Ez az információ a böngészők számára fontos. Csak így tudják, hogy a karaktereket hogyan kell kódolni ahhoz, hogy helyesen jelenjenek meg. Csak a megfelelő karakterkészlet megadásával jeleníthetők meg helyesen például az umlautok és a speciális karakterek. Itt általában az UTF-8 van megadva.
Most pedig elérkeztünk a weboldal tényleges tartalmához, vagyis ahhoz, amit a látogatók ténylegesen látnak. Mindezt a body elemben határozzuk meg.
<body> ... </body>
Demonstrációs célokra egyszerűen illesszük be a következőket a nyitó és a záró <body>tag közé:
<h1>PSD-Tutorials.de</h1>
A dokumentumnak így kell kinéznie
<!DOCTYPE html> <html lang="en"> <head> <title>Példa HTML5 alapkeret - www.html-seminar.de</title> <meta charset="UTF-8" /> </head> <body> <h1>PSD-Tutorials.de</h1> </body> </html> </html>
Mentse el a változtatásokat, és nyissa meg a fájlt egy böngészőben.
Amint láthatja, a PSD-Tutorials.de most már valóban megjelenik. Létrehozta az első saját HTML-dokumentumát.
