Transcript HTML

BEVEZETÉS A
WEBLAPFEJLESZTÉSBE
Kvaszingerné Prantner Csilla, EKF
A mai haladó technológia
2
http://www.w3schools.com/
http://www.w3schools.com/html/html5_intro.asp
http://www.w3schools.com/css3/default.asp
Mi a webtárhely?
3
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.
Miként fest egy site mappa/munkakönyvtára?
4
5
A STATIKUS WEBLAPFEJLESZTÉS
ESZKÖZEI
(TOOLS OF THE WEB DEVELOPMENT)
A statikus weblapfejlesztés eszközei
6

Böngészők:
Mozzilla Firefox,
Safari,
Opera,
Google Chrome és az
Internet Explorer.


Editorok vagy weblapszerkesztő programok:
a. Karakteres szerkesztők,
b. grafikus (WYSIWYG) szerkesztők
http://www.textpad.com/
http://www.editplus.com/
http://www.oxygenxml.com/
http://www.crimsoneditor.com/
http://notepad-plus.sourceforge.net/hu/site.htm (!!!)
Adobe Dreamweaver
Microsoft SharePointDesigner 2007 (!!!)
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
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.
7
A WEBLAPFEJLESZTÉS ALAPELVEI
(THE PRINCIPLES OF THE WEB
DEVELOPMENT)
A weblapfejlesztés alapelvei, szabályok
8
1. Fájlszerkezettel kapcsolatos alapelvek
a. 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.
b. 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 ( _ ).
c. Ne használjunk: nagybetűket, hosszú ékezetes betűket, speciális karaktereket (pl.: / ?
. : ~ *), <SPACE> -t
d. A fájlok közti linkelések esetében használjuk relatív elérési utat
A weblapfejlesztés alapelvei
9
2. Felbontással kapcsolatos alapelvek
(FIX SZÉLESSÉGŰ LAYOUT ESETÉN)
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. 1024-30=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).
10
MILYEN WEBOLDAL
ELRENDEZÉSEK VANNAK?
(WEB LAYOUT DESIGNS)
Weboldal megjelenítésének tervezése,
layout megoldások
11




Static webdesign layout (Fixszélességű, merev)
Liquid/fluid layout (Folyékony, százalékosan megadva)
Adaptive (Alkalmazkodó, illeszkedő layout)
Responsive (rugalmas, alkalmazkodó)
Forrás: http://www.rocketmill.co.uk/the-difference-between-adaptive-liquid-responsive-and-static-web-design
Korábbi megoldások
12
• Static webdesign layout (Fixszélességű, merev)
Előnyök:
Gyorsabban és olcsóbban létrehozható.
Kisebb erőfeszítést és kevesebb gondolkodást igényel.
Hátrányok:
Szegényes felhasználói élmény. Nem követi az optimális megejelenítést különböző
eszközökön s kijelzőkön. Külön layout készítendő mobilokra.
• Liquid layout (Folyékony, százalékosan megadva)
Előnyök:
Vízszintes alkalmazkodás a kijelzőhöz. Követi a jó felhasználói élmény elveit asztali
számítógépeken, alkalmazkodik a változó ablakméretekhez.
Hátrányok:
Nem számol a mobileszközökkel, a kisebb méretű tabletekkel továbbá a
nagykijelzős számítógépekkel, mint pl. a iMac-ek.
Kisebb eszközökön szétcsúszik a layout, amely a tartalombefogadás rovására
mehet.
Újabb technológiák
13
•
Adaptive (Alkalmazkodó, illeszkedő layout)
Adaptív webdesign esetében különböző felbontásokra különböző megoldások vannak.
Lényege: Ha a képernyőfelbontás kisebb az előre definiáltnál, akkor a lap elrendezése (layout-ja) megváltozik.2
Előnyök:
Mivel különböző eszközökre szabható vele a megjelenítés, így tudja követni a jó felhasználói élmény elveit többféle eszköz
esetében is.
Egy webhely kezeli az összes eszközön való megjelenítést
Hátrányok:
Felépítése hosszabb időt vesz igénybe.
Nem ad optimális megoldást a speciális méretű eszközökre.
(Vagy egy kisebb képernyőn kisebb ablakméret beállítására.)
•
Responsive (rugalmas, alkalmazkodó)
A reszponzív megjelenítés a legjobb megoldás, ez a liquid és az adaptív ötvözése, így mindkettő megoldás előnyeit magában
foglalja.
Lényege: A tartalmat a felbontáshoz igazítja, de ha a felület (akár az ablakméret, amiben a weblap látszik) túlságosan kicsinek
bizonyul a tartalom helyes megjelenítéséhez, akkor azt átrendezi egy másik layoutba, amelyen már jól látszódnak és
kényelmesen befogadhatóak a tartalmak.
Ez azt jelenti, hogy a megjelenítés nem különböző eszközre van szabva, hanem magára atartalomra.
Előnyök:
Vízszintes alkalmazkodás a kijelzőhöz. Követi a jó felhasználói élmény elveit asztali számítógépeken, alkalmazkodik a változó
ablakméretekhez.
Hátrányok:
Nem számol a mobileszközökkel, a kisebb méretű tabletekkel továbbá a nagykijelzős számítógépekkel, mint pl. a iMac-ek.
Kisebb eszközökön szétcsúszik a layout, amely a tartalombefogadás rovására mehet.
Részletek: http://liquidapsive.com/
Példák:
2: Ez a működés hasonló ahhoz, mintha több statikus oldalunk lenne, különböző eszközökre,
viszont könnyebség a liquid-hez képest az, hogy csak egy webhelyen kell lennie a tartalomnak.
Reszponzív weboldalak
14




Leírások:
http://liquidapsive.com/
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-webdesign/
http://blog.mobilstrategia.hu/reszponziv-weboldal-megvalto (kép forrása)
Példák:
http:// egreirege.hu
http://stephencaver.com
http://colly.com
15
A HTML LEÍRÓNYELV
(THE HTML DESCRIPTION LANGUAGE)
Mi a HTML?
16
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 olyan jelölőnyelv, mellyel definiálható a
weboldal:
1. tartalma (szövegek, képek táblázatok stb.) és
2. struktúrája (főcím, alcím, bekezdés, lista,
kiemelések stb.).
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 tag-ek/jelölők/elemek példa
17


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 />
A jelölők felépítése
18

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>
Egy páratlan jelölőre/üres tag-re példa
19
<img src="vmilyen_kep.jpg" alt=" Virág" … >
jelölő
attribútum
érték
Böngészőprogramok
20
A böngészők
értelmezik a HTML
kódokat és abból
előállítják a
formázott, kész
weboldalt.
A HTML miért jelölőnyelv?
(akadálymentesítés a kód szintjén)
21
A jelölők (tagek) segítségével jelöljük meg a
dokumentum egyes részeit:
hierarchia + formátum
Egy HTML/XHTML/HTML5-ös
dokumentum szerkezete
22


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.
A HTML5-ös dokumentum
minimum szerkezete
23
<!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>
A HTML5-ös dokumentumban
a fejlécinformáció, a tartalominformáció, a karakterkódolás
és a stílusfájl nevének megadása
24
<!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>
Az a jó ha a tartalmat és a megjelenítést
különválasztják!
25
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
A tartalom és a megjelenítés szétválasztása
26




Válasszuk külön a tartalmat és a formátumot!
HTML = tartalom, struktúra
CSS = formátum
Cascading Style Sheets
Lássunk egy példát!
27

Nyissuk meg a következő weboldalt:
Test (bad, not accessibility): http://www.ektf.hu/~csilla/gyak_html/bad.html
Test (good, accessibility, html5): http://www.ektf.hu/~csilla/gyak_html/
Test (good, accessibility, html5, css):
http://www.ektf.hu/~csilla/gyak_html/index_css.html és
http://people.ektf.hu/kvcsilla/sites/oktatas/style_alap.css

Nézzük meg a forrásokat!!!
Minden böngésző képe megjeleníteni a forráskódot,
de a legjobb eszköz erre a Firefoxhoz telepíthető
FireBug kiegészítő!
Telepítsük a Notepad++ alkalmazást!
28

http://notepad-plusplus.org/download/v6.5.3.html
Telepítsük a Ms SharePoint Designer 2007-es
alkalmazást!
28

http://www.microsoft.com/huhu/download/details.aspx?id=21581
A weboldal szerkezetének a felépítése
29
HTML4-ben erre a célra a <div> jelölőket használtuk, HTML4-ben
például a következőképpen fest a fejléc megadása:
<div id="header">fejléc</div>
HTML5-ben viszont ezek helyett az un. oldalszerkezet tageket vezették
be, melyek a következők:
 header, <header>fejléc</header>
 section,
 article,
 footer
A nevek magukban foglalják a képernyőterület meghatározását, így
már az id, illetve a class attribútumok használata nem szükséges az
oldal felépítéséhez.
A beszédes elnevezések szemantikai szempontból jók, áttekinthetőbbé
válik tőlük a kód.