Az előző óra végén, a YouTube videó beágyazásával tulajdonképpen már honlapot szerkesztettünk, igaz, nagyon egyszerű módon és kivitelezésben, ráadásul, nem is hibátlanul.
A hibát miattam követtétek el, ha nem is látszik, ugyanis egy régi, szabálytalan index.html volt fent a tárhelyen, én pedig nem néztem meg mielőtt kiadtam volna a feladatot. Már kicseréltem, bocsánat érte.
Fejlesztési módszerek
Mivel a weboldalak készítéséhez használt HTML leírónyelv szöveges alapú, így a webszerkesztéshez tulajdonképpen nincs másra szükség, mint egy egyszerű szövegszerkesztő programra és a HTML leírónyelv ismeretére. A Windows Jegyzettömbjével és egy jó HTML könyvvel a webfejlesztés még nagyon aprólékos és időigényes munka, arról nem is beszélve, hogy igen sok hibalehetőséget rejt magába.
HTML témában sok könyvet fogtok találni, de ha ajánlanom kellene valamit, akkor az nem egy könyv lenne, hanem egy weboldal, a w3schools.com. Ezt az oldalt mindennél jobbnak tartom, az alapoktól, jól felépítve, kipróbálható feladatokkal mutatja be a webszerkesztést.
Egyszerűbben, gyorsabban és pontosabban tudunk dolgozni, ha olyan segédprogramokat használunk, amiket kimondottan webes munkához fejlesztettek. Ezek a továbbfejlesztett szövegszerkesztők még erős HTML ismeretet igényelnek, de jelentősen egyszerűbbé tudják tenni a munkát, ami már a tagek használatánál is észrevehető (prediktív bevitel, menüvezérlés), de a leglátványosabb mégis a vizuális szerkesztés, mellyel a tagek pontos ismerete nélkül is készíthetünk webdokumentumokat.
Tagekről a múlt órán már volt szó, ezek a HTML szintaktikai alapegységei, mint a nyelvnek a szavak. A múltkori videós oldalon a <body> és a </body> tagek közé kellet beszúrni a videó kódját. A tageket szokás elemeknek, címkéknek is nevezni, én mostantól elemeknek fogom hívni őket.
Segédprogramok webszerkesztéshez:
Adobe Dreamweaver (kereskedelmi szoftver)
Notepad++ (szabadon felhasználható szoftver)
Tartalomkezelő rendszerek (CMS, Content Management System) segítségével nemcsak leegyszerűsíthető a webfejlesztés (a HTML ismeretére már nincs is szükség), de összetettebb tartalmak is könnyedén létrehozhatók. Modulokból felépíthető oldalakon lehetővé válik felhasználói profilok kezelése, hozzászólások, fórumok, szavazások indítását, vagy akár online kereskedés működtetését is. A tartalomkezelő rendszerek további előnye, hogy a webtartalom böngészőn keresztül fejleszthető - azonosítás után online szerkeszthető a tartalom, akár több, különböző jogosultsággal rendelkező felhasználónak is.
Tartalomkezelő rendszerek:
WordPress
Joomla
Drupal
Forráskód
Minden HTML dokumentum mögött forráskód áll. A forráskódban az elemekkel utasítások vannak leírva, amiket a böngésző végrehajt, ha a dokumentum betöltésre kerül.
A böngészőbe betöltött HTML dokumentumok forráskódját megnézhetitek, ha a dokumentum egy üres területén (pl. a hátterén) az egér jobb oldali gombjával kattintotok, majd az Oldal forrásának megtekintére (Chrome böngészőnél), vagy az Oldal forrása (FireFox böngészőnél) parancsot választjátok!
Egy összetett oldal forráskódja bonyolult, akár több száz sorból is állhat, ráadásul nemcsak HTML elemeket tartalmazhat, így ismerkedésre nem a legalkalmasabb.
Töltsétek le a kurzus tárhelyéről az _index.html fájlt!
A fájlt úgy tudjátok letölteni, ha az egér jobb oldali gombjával kattintotok rá, majd a Link mentése másként parancsot (Chrome böngészőnél) vagy a Hivatkozás mentése más néven (Firefox böngészőnél) parancsot választjátok.
Nyissátok meg a fájt a Windows Jegyzettömbjével (Notepad)!
A Jegyzettömb automatikusan nem "látja" a HTML formátumú fájlokat, ha a programból szeretnétek betölteni a fájlt, ezért a betöltésnél állítsátok át a Fájlformátumot Minden fájl (*.*) megjelenítésre. A WinSCP az F4-es billentyű lenyomása után megnyitja a fájlt szerkesztésre.
Az első két webszerkesztési feladatot még Jegyzettömbbel fogjuk elkészíteni, de később, a sablon átalakításánál már segédprogrammal dolgozunk.
A Jegyzettömbben most egy, a legújabb HTML 5 szabványnak megfelelő webdokumentum forráskódját látjátok. Nézzük meg a dokumentum felépítését!
A szabványos HTML dokumentumnak három fő része van:
- dokumentumtípus meghatározás
- fejrész
- törzsrész
A dokumentumtípus meghatározás (<!DOCTYPE html>) a böngészőnek szól, a webdokumentum értelmezését határozza meg. A fejrészben, a <head> és </head> elemek között az egész dokumentumot érintő beállítások vannak megadva, például a karakterkészlet (<meta charset="UTF-8">), a dokumentum címe (<title></title> ami jelenleg nincs megadva) vagy a formázás. A törzsrészben, a <body> és </body> elemek között a megjelenített tartalom található, amit honlap betöltése után a képernyőn látunk. A fejrész és a törzsrész a <html> és </html> elemek közé van helyezve.
A példából az is látszik, hogy kétféle elem létezik:
- páros elem, ami nyitó és záró elemmel rendelkezik (pl. <title></title>)
- páratlan elem, aminek nincs külön lezáró eleme (pl. <meta>)
A HTML elemek mindig < és > (kisebb, nagyobb) jelek között találhatók, a záró elem előtt pedig mindig egy / (perjel) van (pl. </body>). Az elemek nevét kis betűvel írjuk.
Nézzük meg egy elem felépítését!
Az elemnév (1) után szóköz következik, majd a tulajdonság (2), egyenlőség jel, utána pedig idézőjelek között a tulajdonság értéke (3). Egy elemhez több tulajdonság is tartozhat, erre jó példa a múlt órán használt YouTube kód:
<iframe width="560" height="315" src="//www.youtube.com/embed/lF8byCyRJ2g"></iframe>
Ebben a sorban az iframe elemhez három tulajdonság is tartozik: width, height és az src. Az értékek itt is a tulajdonságok után, idézőjelben találhatók. Az iframe elem páros elem, a sort a </iframe> zárja.
A HTML kódban szokás a sorokat aszerint beljebb igazítani, hogy milyen részhez tartoznak. Az így kialakított szerkezet jobb áttekinthetőséget ad, főleg összetettebb oldalak esetén.
Saját tartalom fejlesztése
Fejlesszünk ebből az üres HTML dokumentumból egy weboldalt, ami egy tetszőleges zenekar vagy zenész egyik számát mutatja be!
Példa: http://hajnale.web.elte.hu/webszerkesztes/4.ora/
Az előbb letöltött _index.html oldalt fogjuk fejleszteni. Készítsetek egy zene nevű mappát a számítógépeteken, majd másoljátok be az _index.html fájlt, és nevezzétek át index.html-nek! Nyissátok meg a fájlt a Jegyzettömbbel!
- Töltsétek ki a title elemet a fejrészben! Írjátok a nyitó és záró elem közé a zenekar vagy zenész nevét! A title páros elem, a fejrészbe kell elhelyezni.
Példa:
<title>George Ezra</title> - Nagyobb címsorban jelenítsétek meg a zeneszám címét, majd alá, kisebb címsorban a zenész vagy zenekar nevét! Hat előre formázott címsor (heading) áll rendelkezésetekre, h1-től h6-ig, ahol a h1 jelenti a legnagyobb mértékű kiemelést. A címsorok páros elemek, a törzsrészbe kell elhelyezni őket.
Példa:
<h1>Budapest</h1>
<h2>George Ezra</h2> - Mentsétek a változásokat! Az első mentésnél ellenőrizzétek, hogy a HTML kódban beállított UTF-8 karakterkészletnek megfelelően történik-e a mentés. Ezt a legegyszerűbben úgy tudjátok megtenni, ha az első mentést a Mentés másként paranccsal végzitek el, és mielőtt felülírjátok az index.html fájt, ellenőrzitek a karakterkódolást! A későbbiekben elég, ha csak a Mentést (Ctrl+S) használjátok. Folyamatosan mentsétek a munkátokat!
- Ellenőrizzétek a honlapfejlesztés lépésről lépésre! A szerkesztés alatt álló index.html fájlt megnyithatjátok egy böngészővel anélkül, hogy fel lenne töltve bármilyen tárhelyre. Kattintsatok duplán a fájlra, és a Windows a HTML fájlokhoz társított programmal (böngészővel) megnyitja a fájlt! Mostantól kezdve folyamatosan ellenőrizzétek a fejlesztéseket! Mentsétek a változásokat, majd frissítsétek a böngészőt (F5), és nézzétek meg az aktuális állapotot!
Keressetek a YouTube-on a kiválasztott zeneszámhoz videót, majd illesszétek be az oldalatokba!
Az iframe páros elem, a törzsrészbe kell elhelyezni. Töröljétek ki a kódsorból a frameborder tulajdonságot (a hozzá tartozó értékkel együtt) és az allowfullscreen "tulajdonságot". Az előbbi már nem korszerű, az utóbbi pedig nem érvényes tulajdonság. Ahhoz, hogy a videót feltöltés nélkül is le lehessen játszani, illesszétek be a http: kiegészítést az URL elé!
Példa:
<iframe width="560" height="315" src="http://www.youtube.com/embed/qHTmqsXeKL8"></iframe>
- Keressetek dalszöveget a kiválasztott zeneszámhoz, majd az első két szakaszát jelenítsétek meg a honlapon! Bekezdések megjelenítésére a p (paragraph) elem szolgál, sortöréshez pedig a br (brake). A p elem páros, a br páratlan elem, mindkettőt a törzsrészbe kell elhelyezni.
Példa:
<p>My house in Budapest<br>
My, my hidden treasure chest,<br>
Golden grand piano<br>
My beautiful Castillo</p>
A szövegszerkesztésben is használt "enteres" bekezdés készítésnek csak a forráskódban van tagoló hatása, a megjelenített tartalomban nem tudunk vele új bekezdést létrehozni, ott csak a megfelelő elemekkel lehet sortörést, illetve új bekezdést készíteni. - A második dalszöveg-szakasz végére illesszétek be linkként a dalszöveg forrását! Link létrehozására az a (anchor) elem használható, szerkezete a következő:
<a href="url">...</a>
Az a páros elem, a törzsrészbe kell elhelyezni. Az a elem kötelező tulajdonsága a href, melynek értéke a megnyitni kívánt tartalom URL-je. A nyitó és záró elem közé kell elhelyezni azt a tartalmat (pl. szöveget), amit linkként fog megjeleníteni a böngésző.
Példa:
<a href="http://www.azlyrics.com/lyrics/georgeezra/budapest.html">Teljes dalszöveg (azlyrics.com)</a>
A bekezdésbe helyezve:
<p>You<br>
Ooh, you<br>
Ooh, I'd leave it all<br>
<br>
<a href="http://www.azlyrics.com/lyrics/georgeezra/budapest.html">Teljes dalszöveg (azlyrics.com)</a></p>
Az önmagában álló br elem üres sort hoz létre.
- Keressetek szabadon felhasználható képet a választott zenészről vagy zenekarról, és töltsétek le a zene mappátokba! Méretezzétek a képet olyan szélességűre, mint a videó, majd jelenítsétek meg a dalszöveg alatt! A képmegjelenítés eleme az img (image), szerkezete a következő:
<img src="url" alt="szöveg">
Az img páratlan elem, a törzsrészbe kell elhelyezni. Az img elem kötelező tulajdonsága az src, melynek értéke a megnyitni kívánt kép URL-je, valamit az alt. Az alt (alternative text) egy olyan, a kép tartalmára utaló szöveg, ami csak akkor jelenik meg a képernyőn, ha a képet nem sikerül a böngészőnek megnyitnia. Az alt értékeként megadott szöveget a felolvasó szoftverek képesek értelmezni és felolvasni, ezzel segítve a vakokat és gyengén látókat a böngészésben.
Példa:
<img src="GeorgeEzraVFestival2014.jpg" alt="George Ezra, V Festival, 2014">
A fenti példában az URL nem internetes tartalomra mutat, hanem egy letöltött fájlt jelöl. Ilyen esetben mindig figyeljetek, hogy a képfájl és a HTML fájl (ahol hivatkozok rá) azonos mappában legyenek, vagy helyesen legyen a képfájl elérése megadva! A mi esetünkben a zene mappában van a képfájl és a HTML fájl is, így nem kell útvonalat megadni a képhez, elég a fájlnevét használni. - Írjátok a kép alá a forrását!
Példa:
<p>(forrás: wikipedia.org)</p> - A meta-adatként tüntessétek fel a neveteket! A meta elemekkel hasznos kiegészítő információk adhatók meg az oldalról, például rövid oldalleírás, kereső kulcsszavak, vagy az oldal készítője. A meta elem páratlan elem, a fejrészbe kell elhelyezni.
Példa:
<meta name="author" content="Hajnal Ernő">
A meta elemnek itt két tulajdonsága van megadva, a name és content.
- Az elkészült tartalmat töltsétek fel a tárhelyetekre! A teljes zene mappát (benne a képfájllal és az index.html-lel) töltsétek fel, közvetlenül a web mappátokba!
Formázás
Eddig csak tartalmat jelenítettünk meg, formázással nem foglalkozunk, eltekintve a bekezdések és sortörések létrehozásától, amit azért tekinthetünk alapformázásnak.
A HTML dokumentumok formázásához CSS (Cascading Style Sheet) stlíluslapnyelvet használunk. Ezekről bővebben majd a kurzus második felében fogunk tanulni, ebben a példában csak a törzsrészt formázzuk: a hétteret (background-color) feketére, a betűszínt (color) pedig fehérre fogjuk beállítani.
Úgynevezett sorközi formázást fogunk használni, ami azt jelenti, hogy közvetlen az elem neve után írjuk a formázás beállításait, amivel azt érjük el, hogy kizárólag a kiválasztott elem megjelenése fog megváltozni. Ezt a megoldást nagyon ritkán használjuk, mert nem hatékony, ezzel az eljárással ugyanis, ha az összes bekezdést mondjuk, dőlt betűssé szeretnénk formázni, minden egyes p elemet ki kellene egészíteni a beállításokkal.
Példa:
A fenti példában a body elem alapbeállításait változtatjuk meg sorközi formázással. Az elemnév után kerül a style HTML tulajdonság (1), majd a CSS meghatározás(ok) (2, 3). A CSS meghatározások két részből állnak: tulajdonság (4, 6) és érték (5, 7). A meghatározásokat pontosvesszővel választjuk el egymástól, a CSS tulajdonságot és az értéket kettősponttal.
A színeket tizenhatos (hexadecimális) számrendszerű kóddal szokás megadni egy kettős kereszt után. A #000000 kód a fekete, a #ffffff a fehér szín kódja, színkódokat itt tudtok létrehozni: http://www.w3schools.com/tags/ref_colorpicker.asp
Állítsatok be tetszőleges háttérszínt és betűszínt a honlapotoknak, majd frissítsétek a feltöltött tartalmat!
A számítógépeteken tárolt változatot módosítsátok, állítsatok be a megfelelő színeket a színkódok cseréjével! Ügyeljetek a láthatóságra, azaz, a betűszín jó látható egyen a háttérszínen! Ha elkészültetek a módosításokkal, töltsétek fel az index.html fájlt a zene mappába! A felöltés nem lesz automatikus, mert van már ilyen nevű fájl a mappában, ezért a WinSCP rá fog kérdezni a felülírásra - írjátok felül a feltöltött fájlt! Ellenőrizzétek a honlapot!
Házi feladat
- Semmit ne töröljetek a tárhelyetekről! Ezt a házi feladatot úgy készítsétek el, hogy az előző órai házi feladat és a mostani órai munka is maradjon feltöltve!
- Töltsétek le a kurzus tárhelyéről az oslo.zip fájlt, majd csomagoljátok ki a számítógépeteken! Indítsátok el a mappában található index.html fájlt, és nézzétek meg a megjelenő oldalt! Ez az oldal Európa egy fővárosát mutatja be röviden, a feladatotok az lesz, hogy Berlinről is készítsetek egy ilyen oldalt!
- Töltsétek le a kurzus tárhelyéről a berlin_honlap_anyagok.zip fájt, és csomagoljátok ki a számítógépeteken!
- Nyissátok meg az oslo mappában található index.html fájlt a Windows Jegyzettömbjével!
- A berlin_honlap_anyagok mappában található anyagok felhasználásával alakítsátok át az Oslót bemutató oldalt! Folyamatosan ellenőrizzétek a fejlesztést, hogy azonnal észrevehessétek, ha valami nem jól sikerült!
a) Cseréljétek ki a szövegeket és a linkeket! Ne felejtsétek el a title és a meta elemek tartalmát is megváltoztatni! Figyeljetek a copy/paste manőverre: a beszúrásnál ne törjétek le az elemek < vagy > jelét - gyakori hiba szokott lenni!
b) Cseréljétek ki a honlap tetején lévő széles képet és a város címerét az oldal alján! Ezek a képek méretezve vannak, csak a kódot kell átalakítanotok! Ne felejtsétek el, ez a honlap az images mappából tölti be a képeket, az új képek is oda kerüljenek!
c) Készítsétek elő a szöveges részben látható öt képet! Méretezzétek megfelelően, nevezzétek el őket, másoljátok az images mappába és változtassátok meg a forráskódot!
d) A képek alt tulajdonságához írt szövegeket is cseréljétek ki!
e) Töröljétek az images mappából az régi tartalomhoz tartozó képeket! - Ellenőrizzétek az oldal!
a) Minden szöveg és kép megfelelően jelenik meg?
b) Minden link megnyitja a beállított oldalt? (Az oldalak új lapon fognak megnyílni.)
A helyes megjelenésről itt találtok egy képet. - Készítsetek a tárhelyetek web mappájába egy berlin mappát, és töltsétek fel az új honlap anyagait! Szükség lesz a teljes images mappára és az index.html fájlra - a belrin mappában tehát lesz egy images mappa (benne a képekkel) és egy index.html fájl.
