HTML - CSS

A webfejlesztés alapjai

Miért készülnek weboldalak? – Valamit nyújtani szeretnénk a felhasználónak.

A webfejlesztés során elsősorban a felhasználók igényeit vesszük figyelembe.

Nevezhetjük az önkifejezés eszközének, egyesek már-már művészeti ágnak tartják.

A webfejlesztés egy összetett feladat.

A weboldal egy multimédiás eszköz, több médiumot is magában hordoz (foglal): szöveg, kép, mozgókép, hang, animáció

Tervezési fejlesztési szempontok

Egy színvonalas weboldal elkészítését komoly tervezés előzi meg.

Végcél: felhasználók kiszolgálása, ezért is fontos az előbb már említett „felhasználók igényeinek kielégítése”.

A fejlesztés során 7 fontos dologra kell figyelni:1. Honlaptervezés

2. Navigációs struktúra

3. Oldaltervezés

4. Figyeljünk a látogatók visszajelzéseire

5. Milyen monitort használnak a látogatók

6. Milyen böngészőt használnak a látogatók

7. Az oldal akadálymentesítése, sérültek

1. Honlaptervezés

Célok megfogalmazásával kezdődik: kinek szól, mit szeretnénk közölni, mit szeretnénk átadni, a felhasználónak van-e lehetősége interakciókra

Látogató fejével gondolkodjunk, kérjünk segítséget (véleményt) ismerőseinktől a tervezés során.Pl.: egy oktatási célú weblap (információ), egy kormányzati oldal (struktúra) vagy pl. egy webáruház között lényeges eltérés van

Pl.: egy főiskolai, egyetemi oldal kialakítása során fontos szempontok: Szervezeti felépítés

Letölthető dokumentumok

Események

Hallgatói információk

Stb.

Jól látható, hogy egy ilyen általános oldal tervezése a legnehezebb

2. Navigációs struktúra

Az egyik legfontosabb szempont a tartalmi szerkezet, az oldalak közötti navigáció és az egyes oldalakon belüli navigációs lehetőségek egységet alkossanak.

Legyen letisztult és egyszerű, könnyen nyomon követhető.

Zavaros struktúra:

Célszerű a „faszerkezetű” struktúra kialakítása:(egyszintű felépítés)

2. Navigációs struktúra

Azonban ezzel is vigyázni kell:(többszintű felépítés)

Pl. a blog oldalak egyrészt azért is olyan népszerűek, mert ott egy oldalon belül többféle navigáció is megtalálható

2. Navigációs struktúra

Fontos többirányú navigáció az oldal rugalmas használatához:

Hibás navigáció:

Egy lehetséges navigáció:

Gondoskodni kell tehát a vízszintes és függőleges mozgás lehetőségéről!

3. Oldaltervezés

Ha az eddigi szempontok körvonalazódtak, az egyes oldalakra helyeződik át a hangsúly (részleteire bontás)

Az olvasók pásztáznak: a felhasználók kevés időt töltenek az oldalon, amennyiben valami megragadja őket, akkor „maradnak”.

Ezért is fontos az egyértelmű felépítés, és az egyes oldalak „lényegre törősége”.

3. Oldaltervezés

Mi segíti az oldal gyors áttekintését: Kifejező fő és alfejezetcímek

Rövid összefoglaló a cím után (ezt a részt szokás kiemelni: félkövér, dőlt)

Linkekkel és egyéb jelölésekkel kiemelt kulcsszavak, gondolatok

A bekezdéseink legyenek rövidek és lényegre törők

A fejezetek legyenek rövidek és áttekinthetők

Hagyjunk megfelelő távolságot az egyes bekezdések, fejezetek és címek között

A sorok ne legyenek túl zsúfoltak

Amennyiben hosszú az oldalunk, segítsük a navigációt linkekkel, kiemelésekkel

3. Oldaltervezés / oldalnavigáció

A honlap minden oldalán jól áttekinthető és egységes menürendszer legyen.

Ezt általában jól látható helyre rakjuk, az oldal tetejére vagy valamelyik oldalsó részen. Ez az egyes oldalakon ne változzon!

Szokás némely esetekben egy „helyzetjelző felirat” megjelenítése, amely a főoldaltól viszonyított „utat” írja le, ezt nevezik „halszálkás menünek”.

3. Oldaltervezés / oldalnavigáció

Pl. a weblabor.hu oldalt vizsgálva:

A WL logó mindig a kezdőoldalra visz

Kétszintű főmenü segíti az eligazodást

Halszálkás menü

3. Oldaltervezés

Megoszlanak a vélemények az oldal szövegében (tartalmi részében) található linkekről: a fontos dolgok elhelyezkedhetnek a szövegben linkként, vagy legyenek azok is elkülönítve a szövegtől

Az oldal aljára fontos hivatkozást ne rakjunk!

Alternatív navigáció: blog típusú oldalaknál címkék vagy kulcsszavak használata. A betűméretnek is szerepe van.

3. Oldaltervezés / letöltési sebesség

Hiba: fejlesztő saját gépén készíti az oldalt, nem veszi figyelembe az oldal méretét

Napjainkban ez már nem olyan nagy probléma, de ezt is figyelembe kell venni.

Mobil böngészés egy fontos tényező

Egy felmérés szerint a látogatók 7 mp után elhagyják az oldalt, ha az még nem töltődött volna be.

Tippek a lassú kapcsolattal rendelkező látogatók megtartásához: Ne használjunk képeket szövegek megjelenítésére, a képek betöltéséig

is így olvasható lesz az oldal.

Képek méretének megadása az oldal szerkesztésekor

Amennyiben táblázatos oldalfelépítést használunk, figyeljünk arra, hogy ne legyen nagy méretű a táblázat, mert az oldal csak a teljes táblázat betöltődésekor fog összeállni.

Oldaltervezés

4. Figyeljünk a látogatók visszajelzéseire Komolyabb weboldalaknál célszerű ilyen lehetőséget biztosítani a

felhasználóknak

5. Milyen monitort használnak a látogatók A www.ektf.hu/ oldalt alapul véve, a látogatók 43%-a 1024 x 768-as

felbontásban nézi az oldalt, 30%-a 1280 x 1024-es felbontásban, 25%-a 1280 x 960-as felbontásban, a maradék egyéb felbontásban.

Ezt is figyelembe kell venni.

6. Milyen böngészőt használnak a látogatók A felhasználók különböző böngészőket használnak: IE (6,7), Firefox,

Safari, Opera, stb.

Figyelni kell, hogy a különböző böngészőkben megfelelően nézzen ki az oldal

Weblapok ergonómiája

Letöltési méret: lélektani határ (<200 KB)

Letöltési idő: szakirodalmak szerint < 2 mp

Méret nagyságának okai: információk szöveges formában

HTML kód mérete: csökkenthető a CSS kiváltásával, táblázatos oldalfelépítés elhagyásával

Rögzített oldalszélesség: egy-egy oldalt sokan, sokféle eszközön néznek meg az oldalnak alkalmazkodnia kell a különböző felbontásokhoz

Oldalhosszúság: nagy tartalom esetén kategorizáljunk

Rögzített méretű szöveg: a méret változtatása miatt se rakjunk szöveget a képekre

Keretek használatának hátrányai: Nehéz nyomtatás

Nem rugalmas (sok eszközön rosszul jelenhet meg)

A webcím nem ír le állapotot (nem lehet címezni az oldalt link)

Irányelvek weboldal kialakításakor (forrás: weblabor.hu)

A következő pontok hasonlóak az USA-ban kötelező szempontokhoz az állami weboldalak fejlesztésekor, nagy hangsúlyt fektetnek a vakok, gyengénlátók, színtévesztők segítésére.

1. Kezdőlap kialakítása: kerüljük a Flash,Java,Javascript használatát

amennyiben mégis használunk, biztosítsunk lehetőséget a továbblépésre

visszatérve az oldalra fárasztó (unalmas) az állandó kikerülés

keresőrobotok: legyen HTML link az oldalon, hogy a robotok indexelni tudják a tartalmat

Irányelvek weboldal kialakításakor

2. Keret (frame) mentesség Beléptetés bonyolult (Get, Post változók)

Felépítés „kusza” lesz

Webcím nem ír le állapotot

3. Töltelék képek használata nem javasolt Pl. táblázatos oldalszerkezet kialakításánál, helyette CSS használata

Használata esetén: alt=”” tulajdonság felolvasó szoftverek figyelmen kívül hagyják

4. Image map-eket ne használjunk A nem látó felhasználók számára használhatatlan lesz az oldal

5. CSS nélkül is használható oldal (extrém esetekben ) Egyes felolvasó szoftverek nem támogatják a CSS formázó elemeit

Irányelvek weboldal kialakításakor

6. Szabványosság Igényeseknek: CSS 2, XHTML 1.0

7. Képek hozzáférhetősége Képeknél kötelező az „alt” tulajdonság használata

Amennyiben a kép szöveget tartalmaz, azt ide kell beírni.

Ha a kép nem elérhető, vagy karakteres böngészőt (Linux: Lynx) használunk, azt „alt” fog megejelenni

8. Tartalmak alternatív formában való közzététele A Flash videók, PowerPoint bemutatók, stb. szöveges információit

tegyük elérhetővé karakteres formában is. Videóknál rövid összefoglaló szöveget írjunk.

Irányelvek weboldal kialakításakor

9. Navigáció Navigációs elemek ne szerepeljenek Flash formában, vagy ne legyen

Javascriptes legördülő menü formában

10. Zavaró elemek mellőzése Fényújság (margue), villogó szövegek (blink), egyéb figyelemelterelő

ábrák

11. Javascript nélkül is használható oldal

12. Hang nélküli oldal Ne legyen háttérzenéje az oldalnak, vagy hang alapú visszajelzés

zavaró, ill. felolvasó szoftvert nem lehet érteni

13. Formázás ne hordozzon információt Az aktív menüt ne csak színnel jelöljük gyengén látók számára

valamilyen plusz karakterrel

Irányelvek weboldal kialakításakor

14. Oldalszerkezet Ne csak vizuálisan jelenjenek meg egymás mellett az egymáshoz

kapcsolódó tartalmak, hanem a forrást tekintve is kapcsolódjanak

15. Helyes kód Az űrlapelemek logikailag kapcsolódjanak egymáshoz, pl.:

<label for="name">Név:</label><input type="text" name="name" id="name"/>

A szövegre kattintva a fókusz a beviteli mezőbe ugrik

Pl.: példa(munkahelyi adatok megadása) és ellenpélda (szállás) AgriaMedia

16. Oldaltérkép A honlap oldalainak logikai struktúráját szemlélteti

17. Táblázatok Oldal kialakításánál kerüljük táblázatok használatát

A HTML (HyperText Markup Language) nyelv

Alapnyelv, amit minden weboldalfejlesztőnek ismernie kell

A HTML szabvány mára már elavultnak tekinthető ( felváltotta az XHTML )

A HTML állomány egyszerű szövegállomány ún. jelölő tagokkal

A tagok alapján tudja megjeleníteni a böngésző az oldalt

A HTML állományok html kiterjesztésűek

Szerkesztésére bármilyen szöveges szerkesztővel lehetséges (pl. jegyzettömb)

WYSIWYG (what you see is what you get) szerkesztők: pl. FrontPage, Word

A HTML tagok jellemzői

Egy html dokumentum felépítése: <html>

<head><title>az oldal címe</title>

</head><body>

ez a honlapom</body>

</html>

A HTML tagot a < és > karakterek veszik körül (így ezek a szövegben nem használhatóak, csak entitással)

Vannak páros (pl. <b></b> és egyszeri (vagy üres) (<br>) tagok

A HTML-ben a tagok kis és nagybetűvel is írhatók, de célszerű a kisbetűs írásmód (XHTML)

Pl.: <b>ez egy félkövér szöveg </b>

A tagok tulajdonságokat is tartalmazhatnak (dupla idézőjelekkel): <body bgcolor=”red”></body>

Alapvető HTML tagok

Címek használatához:

<h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6>

A h1 a legfelsőbb szintű cím, a h6 a legkisebb

Bekezdések: <p>ez egy bekezdés</p>

A HTML-ben a tördelést nem befolyásolhatjuk a kódban elhelyezett szóközökkel és ENTER-ekkel.

Sortöréshez: <br>

Vízszintes elválasztó vaonal: <hr>

Egyéb elemek: <div></div> : blokk szintű, szerepe oldalkialakításnál van

<span></span> : soron belüli

Szerepük: CSS tulajdonságokkal való felruházás, ha nem tudunk más tagot használni

Szövegformázó tagok

<b></b> : félkövér szöveg

<big></big> : nagyobb szöveg

<em></em> : kiemeli a szöveget

<i></i> : dőlt szöveg

<small></small> : kisebb szöveg

<strong></strong> : félkövér kiemelés

 : alsó index

 : felső index

<code></code> : forráskódot definiál

Linkek, képek

Link: <a href=”http://www.weblabor.hu”>Weblabor</a>

A target=”_blank” tulajdonsággal az oldal új ablakban jelenik meg

Képek: <img src=”hatter.jpg”>

Nincs záró tagja

Az src paraméterrel a kép elérési útját kell megadni

Az „alt” paramétert ajánlatos megadni

Célszerű megadni width és height tulajdonságot, ezek a kép méretétől eltérőek is lehetnek

Képek használata linkként: <a href=”index.html”>

<img src=”fooldal.jpg” alt=”vissza a főoldalra” width=”40” height=”40”></a>

Táblázatok

Létrehozása a <table></table> taggal történik, ez páros tag.

A táblázaton belül a sorok létrehozása: <tr></tr>

A sorokon belül az oszlopok létrehozása: <td></td>

Pl. 2 x 3-as táblázat <table>

<tr><td></td><td></td><td></td>

</tr><tr><td></td><td></td><td></td>

</tr></table>

A fejléc sorban az oszlopok megadása <th></th> tagok között

Paraméterek: border, bordercolor, stb.

Listák

Felsorolások: <ul>

<li>alma</li><li>körte</li>

</ul>

A felsorolási szimbólum egy fekete karika, ez CSS-sel változtatható

Számozások: <ol>

<li>alma</li><li>körte</li>

</ol>

Definíciós lista: <dl>

<dt>alma</dt><dd>jonatán, sztarking</dd><dt>szőlő</dt><dd>kékfrankos, leányka, olasz rizling</dd>

</dl>

Fejrész (head)

A head elem olyan információkat tartalmaz, amik a HTML dokumentum egészére vonatkoznak

<title>cím</title> : a böngésző címsorában megjelenő szöveget definiálja

<link> : külső fájlok kapcsolása a dokumentumhoz

<meta> : meta információkat definiál, ezeket használják a keresőrobotok

<style> : stílusleírás az oldal számára

<script> : az oldal interaktív használatát lehetővé tevő programrészek

HTML XHTML

XHTML EXtensible HyperText Markup Language-et jelent

Célja a HTML felváltása

Nagyon hasonló a HTML 4.01 szabványhoz, de az XHTML szigorúbb, letisztultabb

Az XHTML W3C (WWW Consortium) ajánlás

A legfontosabb különbségek a HTML 4.01-hez képest: Az XHTML elemek egymásba ágyazása szigorúbb:

<b><i>szöveg félkövér és dőlt</b></i> ez a kódrészlet hibás

Az XHTML elemeket mindig le kell zárni, pl: <img … />, <br />, <hr />

Az XHTML elemeknek kisbetűseknek kell lenniük

Mindig kell lennie egy gyökérelemnek, ami a <html>, az alap dokumentum struktúra:

<html>

<head> ... </head>

<body> ... </body>

</html>

CSS – HTML dokumentumok formázása

CSS : Cascading Style Sheets

Meghatározza a HTML elemek megjelenését

A stílusokat általában külön css kiterjesztésű fájlokban tároljuk

Kezdetben : csak dokumentumtartalmat definiáló tagok

Aztán : Netscape és Explorer különvált megjelenítést befolyásoló tagok, melyek nem voltak egységesek

A W3C adott megoldást a helyzetre : HTML + CSS eszközpáros

Azonban még így is vannak nehézségek a fejlesztés területén (IE6)

A CSS-sel időt spórolhatunk : több elemhez ugyanazt a stílust rendelve, azt csak egy helyen kell módosítani

A CSS nyelvtana

kiválasztó {tulajdonság1:érték1;tulajdonság2:érték2;

}

body {color:black;text-align: center;

}

Felsorolás:h1, h2, h3 {

color: red;font-weight:bold;

}

Kiválasztó típusok: osztály (class), azonosító (id), elem alapú

Megjegyzés: /* megjegyzés szövege */

Háttér és szöveg tulajdonságok

Háttér: background-color: érték; /*háttér színe */

background-image: url(a háttérkép elérése);

background-repeat: érték; /*háttérkép ismétlődése */

background-position: érték; /*háttérkép pozíciója */

background-attachment: érték; /*háttérkép ragasztása*/

Minden együtt: background: előbbi értékek szóközzel elválasztva;

Szöveg: color: érték;

text-align: érték; /*igazítás*/

text-decoration: érték; /* szöveg megjelenése: aláhúzott, áthúzott, stb.*/

font-family: érték; /*betűtípus */

font-size: érték; /*betűméret */

font-style: érték; /*stílus */

font-weight: érték; /*betű vastagsága */

Szegélyek és térközök

Szegélyek: border-style: érték; /*solid, dotted, dashed, groove, double, stb. */

border-color: érték; /*keret színe*/

border-width: érték; /*px-ben megadva */

Térközök: külső margó:

margin: értékek; /*px, cm, em-ben megadva, sorrend: fel, jobbra, le, balra */

középre igazítás: margin: 0 auto;

belső margó: padding: értékek; /*px, cm, em-ben, sorrend ua. mint a margin-nál */

Listák, méretek, megjelenítés

Listák list-style-type: érték; /*lista jelének típusa: disc, square, circle, none*/

számozott listák esetén: decimal, lower-roman, upper-roman, lower-alpha

list-style-image: url(elérési út); /* ”listajel” helyett kép berakása*/

list-style-position: érték; /*lehet: inside, outside */

list-style: értékek; /*előbbiek közös megadása*/

Méretek width: szélesség;

height: magasság;

csak blokkszintű elemeknél: <p>,<div>,<h1>,<ul>,<ol>,<table>,stb.

Megjelenítés display: érték; /*block, inline, none*/

Lebegtetés, pozícionálás, láthatóság

Lebegtetés (pl. hasábos megjelenés, kép körbefuttatása szöveggel) float: érték; /*left, right */

Pozícionálás position: érték; /*static, relative, absolute, fixed */

static: elemek alapértelmezett tulajdonsága

relative: megadható top és left tulajdonság, de az elem eredeti helye üres elsz, nem kerül oda elem

absolute: hasonló mint a relative, de itt az elem nem tart fenn területet

fixed: rögzített, a képernyőhöz viszonyítva állandó a pozíciója

Láthatóság visibility: érték;

alapértelmezett: visible, de akár el is rejthetjük az elemet: hidden

Linkek

Az <a></a> elem helyzetei:

Alapértelmezett helyzet: a:link { tulajdonság:érték párok megadása }

Már látogatott link: a:visited { tulajdonság:érték párok megadása }

A link fölött van az egér: a:hover { tulajdonság:érték párok megadása }

A linkre kattintunk az egérrel a:active { tulajdonság:érték párok megadása }

Pszeudo osztályok és elemek

Pszeudo osztályok :first-child – arra az elemre lesz érvényes, amelyik a szülő elem első „olyan”

gyermeke, pl.: p:first-child { color:red; } a p-t tartalmazó elemen belül az első p elemre lesz érvényes

<body>

<p>This is some text.</p> //ez lesz piros

<p>This is some text.</p>

<div>

<p>This is some text.</p> //ez lesz piros

<p>This is some text.</p>

</div>

</body>

:focus – ez csak IE8-tól kezdve

Pszeudo elemek

:first-line – az adott elem első sorára lesz érvényes (csak blokkszintű elemnél)

Pl.: p:first-line { color:#ff0000;}

:first-letter – az adott elem első betűje (csak blokkszintű elemnél)

Pl.: p:first-letter {color:#ff0000;font-size:xx-large;}

:before – az adott elem elé tudunk tartalmat berakni

Pl.: h1:before {content:url(smiley.gif);}

Pl.: h1:before {content:”valami ” ”szoveg”;}

:after - az adott elem után tudunk tartalmat berakni

Egy elem attribútumára az attr(attribútumnév) segítségével hivatkozhatunk, ezt használhatjuk a content esetében!

Egyéb lehetőségek

Sablonrendszerek Ezek olyan komplett rendszerek, melyek a fejlesztők munkáját segítik.

2 része van: alkalmazás logika és a megjelenítési rész

Előnye: a komponensek változása esetén a másik részhez nem vagy csak kis mértékben kell hozzányúlni

A két részen dolgozó szakemberek párhuzamosan dolgozhatnak

pl. Smarty

Keretrendszerek Olyan kódgyűjteményt jelent, amely a fejlesztés során előforduló

gyakori problémákra tartalmaz megoldást.

Tipikus funkciók: adatbáziskezelés, munkamenetkezelés, felhasználókezelés, stb.

Tanulása időigényes

Tartalomkezelő rendszerek (CMS) Kevés(a többihez képest) szaktudást igénylő internetes alkalmazás,

mely lehetővé teszi, hogy bárki összetett weboldalt birtokoljon.

Legismertebbek és magyarul is elérhető CMS rendszerek: Joomla, Drupal

Képgaléria készítése (thickbox)

1. Készítsük el az oldalt, amin a galéria fog szerepelni:

2. A galériát tartalmazó táblázat beszúrása az oldalba, sorok és oszlopok számának, illetve a thumbnail-ek méretének eldöntése az oldal szélességének függvényében

3. A cellákba a thumbnail képek beszúrása (Insert/Image)

4. A thumbnail képekre a tényleges (nagy) képek hivatkozását beszúrni

5. Az oldal <head></head> részébe illesszük be a következő kódrészleteket:

1. <script type="text/javascript" src=" a jquery.js fájl útvonala"></script>

2. <script type="text/javascript" src="a thickbox.js fájl útvonala"></script>

3. <link type="text/css" rel="stylesheet" href=" a thickbox.css fájl útvonala"/>

6. Ezt követően a thumbnail képek link részéhez (<a …></a>) paraméterként írjuk be a: class="thickbox" rel="a képcsoport neve„

7. images/loadingAnimation.gif

8. Képeknek cím: title=”kép címe” paraméter megadásával

Képgaléria készítése (flash)

1. Készítsük el az oldalt, amin a galéria fog szerepelni:

2. Az oldal tartalmazó könyvtárba másoljuk be a gallery.swf és az images.xml fájlokat.

3. Az images.xml fájlba írjuk bele az egyes képek jelemzőit: kép helye, kis kép helye, kép címe, szélessége, magassága.

4. Ezt követően Dreamwaever-ben: Insert/Media/Flash, adjuk meg a gallery.swf fájl elérési útvonalát.

5. Ekkor még nem működik a teljes képernyő a galériában, a működéséhez illesszük be a következő kódrészleteket:

az object paraméterei közé:<param name="allowfullscreen" value="true" />

az embed paramétereihez: allowfullscreen="true"

Videó elhelyezése az oldalon

1. Másoljuk be az swfobject.js fájlt a js mappába, és a mediaplayer.swfilletve a lejátszandó flv fájlt (vagy a hangot – mp3) a video mappába

2. Azon az oldalon, ahol a videót el akarjuk helyezni, a <head></head> részbe rakjuk be a következő kódot:

<script type="text/javascript" src="js/swfobject.js"></script>

3. Majd ahova a videót szeretnénk rakni, helyezzük el a következő kódot:

<div id='video1'>Ide rakja be a videót!</div>

<script type="text/javascript">

var s1 = new SWFObject("video/mediaplayer.swf","mediaplayer","640", "500","8");

s1.addParam("allowfullscreen","true");

s1.addVariable("width","640");

s1.addVariable("height","500");

s1.addVariable("file",„lejátszandó flv helye");

s1.write("video1");

</script>