Előadást letölteni
Az előadás letöltése folymat van. Kérjük, várjon
1
WEBOLDALFEJLESZTÉS http://www.w3schools.com/
2
Mi a webtárhely? Ha közzé szeretnénk tenni weboldalunkat az interneten, szükséges az, hogy egy webszervernek egy bizonyos területére töltsük fel a teljes munkakönyvtárunkat, azaz a site mappájánknak a tartalmát. A webszerverek ezen területeit nevezzük webtárhelynek , ezek használata egyes szolgáltatók esetében reklámozási felületért cserében ingyenes, mások esetében fenntartásukért borsos árat kell fizetni. Egy webszerveren általában több weboldal is található, a minőségi szolgáltatásokért, azaz nagyobb méretű tárhelyért, az adataink védelméért és a stabil, biztonságos működésért érdemes fizetni. Az igényelt webtárhelyekhez való hozzá regisztrálás után egy accounttal (hozzáféréssel) fogunk rendelkezni, amivel kapunk egy megadott méretű webtárhelyet, kapunk egy FTP elérést és egy webcímet.
3
Miként fest egy site mappa/munkakönyvtár?
4
A weblapfejlesztés eszközei (Tools of the Web Development)
5
A weblapfejlesztés eszközei
A weblapfejlesztés egy összetett folyamat, mely számos, jól elkülöníthető részfolyamatra osztható, az egyes részfolyamatok végrehajtásához más-más eszközökre, más-más jellegű szoftverekre van szükség. Böngészők: Mozzilla Firefox, Safari, Opera, Google Chrome és az Internet Explorer. Editor vagy weblapszerkesztő programok: a. karakterese, b. grafikus (WYSIWYG). Adobe Dreamweaver Médiaelemek előállítására szolgáló programok: a. képszerkesztés, b. hangok szerkesztése, c. videók szerkesztése. Fájlkezelők: Mozzilla Filezilla Total Commander
6
A weblapfejlesztés alapelvei (The Principles of the Web Development)
7
Fájlszerkezettel kapcsolatos alapelvek
A weblapfejlesztés alapelvei Fájlszerkezettel kapcsolatos alapelvek A site-hoz hozzunk létre egy munkakönyvtárat, ezen belül helyezzük el az összes site-hoz kapcsolódó fájlt és könyvtárat. A site-on lévő fájlok és könyvtárak nevében csak az alábbiakat használjuk: - angol ábécé kisbetűit, - poz. egész számokat és - alulvonást ( _ ). Ne használjunk: nagybetűket, hosszú ékezetes betűket, speciális karaktereket (pl.: / ? . : ~ *), <SPACE> -t a fájlok közti linkelések esetében használjuk relatív elérési utat
8
A weblapfejlesztés alapelvei
2. Felbontással kapcsolatos alapelvek Cél: a vízszintes gördítősávok megjelenésének elkerülése. a. Fix szélességű design-tervezés esetén max. 950 px széles layoutot tervezzünk. (Ebben az esetben 1024x768-as felbontásra optimalizáljuk oldalunkat =994, szokás 990-re is optimalizálni.) b. A weboldalakra helyezett táblázatok és képek szélessége szintén max. 950 px legyen (kivéve a háttérképeket).
9
A HTML leírónyelv (The HTML Description Language)
10
Mi a HTML? A HTML olyan jelölőnyelv, mellyel definiálható a weboldal:
HTML (HiperText Markup Language) egy leírónyelv, jelölőnyelv. Nem programozási nyelv, azaz nincsenek benne ciklusok és szelekciók, csak szekvencia. (HTML jelölőnyelvben nem programozunk, csak kódolunk!!!) A HTML leírónyelv utasításai <> jelek között írandók. Ezeket tag-eknek, elemeknek vagy jelölőknek nevezzük. A HTML olyan jelölőnyelv, mellyel definiálható a weboldal: tartalma (szövegek, képek táblázatok stb.) és struktúrája (főcím, alcím, bekezdés, lista, kiemelések stb.).
11
A HTML tag-ek/jelölők/elemek példa
Páros jelölők (tag-ek/elemek) pl.: <body>…</body> <h1>…</h1> <p>…</p> Páratlan, önálló jelölők, üres (tag-ek/elemek) pl.: <img … /> <hr /> <br />
12
A jelölők felépítése Páros jelölők (tag-ek/elemek)
<jelölő ˽attribútumnév1=”érték1”˽attribútumnév2=”érték2” … > … </jelölő> Páratlan, önálló jelölők, üres (tag-ek/elemek) <jelölő˽attribútumnév1=”érték1”˽attribútumnév2=”érték2” … /> ˽ = <SPACE>
13
Egy páratlan jelölőre/üres tag-re példa
<img src="vmilyen_kep.jpg" alt=" Virág" … > jelölő attribútum érték
14
Böngészőprogramok A böngészők értelmezik a HTML kódokat és abból előállítják a formázott, kész weboldalt.
15
A HTML miért jelölőnyelv? (akadálymentesítés a kód szintjén)
A jelölők (tagek) segítségével jelöljük meg a dokumentum egyes részeit: hierarchia + formátum
16
Egy HTML/XHTML/HTML5-ös dokumentum szerkezete
1. A Dokumentum Típus Definíció az állomány legelején, ami a használni kívánt DTD-t adja meg. 2. A HTML fejléc <head> </head>, ami technikai és dokumentációs adatokat tartalmaz, ezeket az internet böngésző nem jeleníti meg. (magyar nyelvű, karakterkódolás, CSS link) 3. A HTML törzs <body> </body> tag párok, amely a megjelenítendő információkat tartalmazza.
17
A HTML5-ös dokumentum minimum szerkezete
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Title of the document</title> <!- - ez jelenik meg a TAB-on - - > </head> <body> The content of the document </body> </html>
18
A HTML5-ös dokumentumban a fejlécinformáció, a tartalominformáció, a karakterkódolás és a stílusfájl nevének megadása <!DOCTYPE html> <html lang=”hu”> <html> <head> <title>Title of the document</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" rel="stylesheet" media="all" href=”style.css" /> </head> <body> The content of the document </body> </html>
19
Az a jó ha a tartalmat és a megjelenítést különválasztják!
Formázás HTML-attribútumokkal (nem jó megoldás): Többször kell leírni ugyanazt a formátumot → több munka, nagyobb esély a tévesztéshez
20
A tartalom és a megjelenítés szétválasztása
Válasszuk külön a tartalmat és a formátumot! HTML = tartalom, struktúra CSS = formátum Cascading Style Sheets
Hasonló előadás
