1 1. A HTML leíró nyelv 2. Stíluslapok - CSS 3. HTML sablonok Tartalom 1. A HTML leíró nyelv Stíluslapok - CSS HTML sablonok A HTML megjelenítő nyelv ...
1. A HTML leíró nyelv 2. Stíluslapok - CSS 3. HTML sablonok Tartalom 1. A HTML leíró nyelv .......................................................................................................................1 2. Stíluslapok - CSS..............................................................................................................................1 3. HTML sablonok ..............................................................................................................................1 1. A HTML megjelenítő nyelv ............................................................................................................3 1.1. Bevezető....................................................................................................................................3 1.1.1. HTML verziók..................................................................................................................3 1.1.2. Címkék és elemek.............................................................................................................3 1.1.3. HTML dokumentum felépítése.........................................................................................4 1.1.4. A dokumentum típusa.......................................................................................................6 1.1.5. A HTML nyelv adattípusai ..............................................................................................6 1.1.6. Karakter kódolás és karakter entitások.............................................................................8 1.1.7. Az elemek tulajdonságai.................................................................................................10 1.2. HTML elemek........................................................................................................................10 1.2.1. A fejléc fontosabb elemei...............................................................................................10 1.2.2. A dokumentum törzsében használt fontosabb elemek...................................................12 1.2.3. A blokk és sorközi elemek (block, inline) .....................................................................12 1.2.4. A
és <span> elemek.............................................................................................12 1.2.5. Az legtöbb elemre alkalmazható közös tulajdonságok...................................................13 1.2.6. Megjegyzések..................................................................................................................14 1.3. Fontosabb blokk elemek.........................................................................................................14 1.4. Szövegek megjelenítése..........................................................................................................16 1.5. A horgony elem .....................................................................................................................17 1.6. Képek és multimédia objektumok..........................................................................................18 1.6.1. Képek..............................................................................................................................18 1.6.2. Külső objektumok...........................................................................................................20 1.7. Listák......................................................................................................................................21 1.8. Táblázatok...............................................................................................................................23 1.9. Keretek ...................................................................................................................................27 1.10. Űrlapok.................................................................................................................................27 2. A CSS stíluslapok ..........................................................................................................................34 2.1. Bevezetés, CSS verziók .........................................................................................................34 2.2. A CSS szabályok megadása....................................................................................................34 2.3. A CSS szöveg megadása a HTML oldalakban.......................................................................35 2.4. Alapvető CSS adattípusok......................................................................................................36 2.4.1. CSS hossz mértékek........................................................................................................36 2.4.2. CSS színek......................................................................................................................37 1
Sapientia Egyetem, Marosvásárhely, SzLZs
Webtechnológia előadás, 2009/10-II. félév
2.5. Külső URL-ekre való hivatkozás............................................................................................37 2.6. CSS kiválasztók (szelektorok)................................................................................................37 2.6.1. Az univerzális szelektor .................................................................................................37 2.6.2. Az elem kiválasztó .........................................................................................................37 2.6.3. Az azonosító kiválasztó (id) ...........................................................................................38 2.6.4. Az osztály kiválasztó (class)...........................................................................................38 2.6.5. A leszármazott kiválasztó .............................................................................................38 2.6.6. A csoportosító szelektor..................................................................................................39 2.6.7. Más szelektorok .............................................................................................................40 2.6.8. A látszólagos osztályok...................................................................................................41 2.7. A CSS deklarációk prioritása..................................................................................................41 2.7.1. A !important direktíva.....................................................................................................43 2.8. A CSS szöveg írása.................................................................................................................43 2.9. A doboz modell.......................................................................................................................44 2.10. Az elemek elhelyezése..........................................................................................................46 2.10.1. Az elemek egymás mellé kerülésének szabályai..........................................................47 2.10.2. A position tulajdonság..................................................................................................47 2.10.3. A lebegés és a float tulajdonság ...................................................................................49 2.10.4. A clear tulajdonság........................................................................................................51 2.10.5. Az overflow tulajdonság ..............................................................................................53 2.10.6. A z-index ......................................................................................................................53 2.11. Színek és hátterek meghatározása.........................................................................................54 2.12. Fontok kiválasztása...............................................................................................................55 2.13. Szövegek formázása.............................................................................................................57 3. Sablonok és összetett weblapok tervezése.....................................................................................59 3.1. A navigáció tervezése.............................................................................................................59 3.2. A megjelenítés felosztása és a pozicionálás ..........................................................................62 3.3. A float tulajdonság felhasználása..........................................................................................66 3.3.1. A weblap vázlata.............................................................................................................66 3.3.2. A felosztás megvalósítása...............................................................................................66
2
Sapientia Egyetem, Marosvásárhely, SzLZs
Webtechnológia előadás, 2009/10-II. félév
1. A HTML megjelenítő nyelv 1.1. Bevezető 1.1.1. HTML verziók A HTML leíró nyelv első változatát a web alkotója Tim Berners Lee fejlesztette (1990), és egyike volt annak a három komponensek ami a web-et meghatározta: •
egy új hálózati protokoll (HTTP - Hypertext Transfer Protocol)
•
egy megjelenítő nyelv (HTML - HyperText Markup Language)
•
a weben alkalmazott címzés: URL (Universal Resource Locator)
Tim B. Lee első HTML nyelve egyszerű volt. A HTML 1 és 2 verziókat az SGML nevű dokumentum leíró nyelv egyszerűsített változataként tervezték. A nyelv 1991-1997 között (HTML 3.2) igen sokat fejlődött, és jelentősen meghatározta a nagy befolyással rendelkező cégek versengő nyelv alakítási kísérletei, amelyet "HTML háború"-nak is nevezünk. Ezt elkerülendő, Berners Lee egy konzorciumot alapított: W3C (World Wide Web Consortium, http://www.w3c.org) melynek feladata technológiák fejlesztése, amelyek maximálisan elősegítik, megkönnyítik a web működését (HTML, HTTP, XML, SVG stb.). Jelenleg a HTML és utódnyelveinek standardjait ez a konzorcium definiálja. A W3C által fejlesztett standardok nyílt szabványok – bárki alkalmazhatja őket, illetve aki nem alkalmazza őket az kompatibilitási gondokkal küzd. A standardok fejlesztésében a W3C csoport mellett a legnagyobb ipari cégek és kutatóintézetek vesznek részt. A konzorcium 1998 adta ki a nyelv HTML 4.0. standardját: ez számított az első letisztult változatnak. A HTML (Hypertext Markup Language) az SGML-nek nyelvtanára épülő, böngészőben megjeleníthető dokumentumokat leíró nyelv. A mark szó jelölést is jelent, ezért fordítjuk jelölőnyelvnek is. 1999 -ben XML alapú definíciót készített, az XHTML 1.0 verziót, mely tovább bővítette a nyelv lehetőségeit. Jelenleg a W3C HTML munkacsoportja a nyelv HTML 5 változatán dolgozik, melynek első, "working draft" változatát a konzorcium 2008 januárjában publikálta. Bizonyos lehetőségei már használhatók egyes böngészőkben, de elterjedése a gyakorlatban még kezdetén van. Az XHTML változatok szigorú szintaxisra és elemzésre épülnek, így olyan esetekben, amikor a dokumentumok pontos elemzés fontos, előnyt jelentenek. Ugyanakkor ezek a változatok bővíthetőek is, tehát nyelvi elemeik nem rögzítettek. Jelen tananyag a HTML 4.01 verziót használja, és a webprogramozó szempontjából próbál közelíteni a nyelvhez. Így szinte egyáltalán nem foglalkozik esztétikai elemekkel, amelyek egy más típusú megközelítés tárgyát jelentik.
1.1.2. Címkék és elemek Strukturált dokumentumok esetében – ilyen a HTML is - gyakran használt módszer a struktúrát alkotó elemek címkékkel való bejelölése. Az alábbi példában, egy paragrafusokból álló dokumentumban a paragrafusokat úgy különítjük el, hogy címkézzük őket egy p nevű címkével. Azért, hogy ez jól elkülönüljön az ilyen szövegekben a címkéket valamilyen szintaktikai elemmel veszik körül: ebben az esetben ezek a < és > jelek, amelyek így a szövegben nem lesznek 3
Sapientia Egyetem, Marosvásárhely, SzLZs
Webtechnológia előadás, 2009/10-II. félév
használhatóak.
Ez egy paragrafus
Ez pedig egy másik
A HTML is ilyen címkéket (angol: tag) használ a dokumentum strukturális elemeinek (element) bejelölésére. A legtöbb elem nyitó és zárócímkével rendelkezik, mint a fenti paragrafus elem, de vannak olyanok amelyek csak egy nyitó címkével rendelkeznek, pl. az alábbi, vízszintes vonalat (horizontal line) megjelenítő elem:
Megjegyzés: az XHTML-ben nincsenek csak nyitó címkével rendelkező elem, mindig van zárócímke. Ebben a dokumentumban külön fel fogjuk hívni a figyelmet, ha az elem csak nyitó címkével rendelkezik HTML 4 esetében. A többi elemnél, ahol jelen van a zárócímke is, erre nem fogjuk külön felhívni a figyelmet. Az elemeket egymásba lehet ágyazni. Bár a HTML 4 elfogad olyan beágyazásokat ahol az egymásba ágyazott elemek "egymásra" ágyazódnak, ajánlott mindig betartani a helyes beágyazást: helytelen:
szövegkiemelt szöveg
helyes:
szövegkiemelt szöveg
Ilyenként a HTML egy "laza" nyelv: a böngésző nem akad ki ha a HTML szövegben nyelvi hibák vagy következetlenségekre akad. Ilyenkor esetleg nem jeleníti meg jól a HTML szöveget. Az XHTML szigorúbb, ott nem lehet nyelvi hibákat elkövetni: a böngésző nem jelenít meg nyelvi hibákat tartalmazó oldalakat.
1.1.3. HTML dokumentum felépítése A HTML dokumentum egy szöveges dokumentum, amely elemek sorozatából épül fel. Egy HTML oldal 3 részből áll. Mindhárom részt egy-egy elemmel adjuk meg. •
a dokumentum típusának megadása (DTD, Document Type Description)
•
a fejléc (header)
•
a dokumentum törzse (body)
Ezen kívül, a HTML több külső dokumentumra is hivatkozhat, ezeket a hivatkozásokat a fejlécben adjuk meg. A hivatkozásokat jelentő dokumentumok megjelenítéshez szükséges stílus definíciókat, szkripteket tartalmazhatnak. 4
Sapientia Egyetem, Marosvásárhely, SzLZs
Webtechnológia előadás, 2009/10-II. félév
Egy egyszerű példa (body.html): Itt áll a dokumentum címe
Ez egy kis paragrafus.
Megjelenítése böngészőben:
Az első elem a a dokumentum típusát adja meg: milyen HTML "dialektusban" írtuk meg. A fejléc (a head elem) olyan elemeket tartalmaz amelyek nem jelennek meg az oldalon megjelenítéskor, de fontos leíró (meta) információkat, illetve különböző, a dokumentumhoz csatolt más dokumentumokat adnak meg. A dokumentum törzse (a body elem) tartalmazza a böngészőben tulajdonképpen megjelenített tartalmat. Az is látható, hogy a következő szinten levő paragrafus elem, a
beágyazódik a
elembe. Így a HTML dokumentum úgy épül fel, mint egy egymásba ágyazott elemekből álló fastruktúra. A
elem nyitó címéjében álló align="center" az elem egy tulajdonságát határozza meg. A HTML elemek tulajdonságait név – érték párokkal adjuk meg: jelen esetben a paragrafus szövegét középre igazítottuk. A HTML elemek megjelenítéshez kötődő tulajdonságait ma már ritkán használjuk. A tulajdonságokat többnyire egy másik nyelv, a rangsorolt stíluslapok (CSS - Cascading Style Sheet) 5
Sapientia Egyetem, Marosvásárhely, SzLZs
Webtechnológia előadás, 2009/10-II. félév
segítségével tesszük.
1.1.4. A dokumentum típusa A nevű elem egy másik dokumentumra mutat, az un. DTD-re (Document Type Definition). Ez írja le azokat az elemeket amelyeket a HTML dokumentumban használhatunk (tulajdonképpen megadja a HTML dokumentum elemkészletét és nyelvtanát). A DTD-vel gyakorlatilag nem kell foglalkoznunk, csak a megfelelő hivatkozást kell megadnunk a HTML elején. Az érdeklődők számára, egy HTML DTD itt olvasható: http://www.w3.org/TR/html401/sgml/loosedtd.html . A HTML 4.01 dokumentumainál háromféle DTD-t adhatunk meg: •
strict
•
transitional
•
frameset
A strict (pontos) dokumentum nem ismeri fel azokat a HTML elemeket illetve tulajdonságokat amelyeket a W3C elavultnak tekint. Az elavulás egy nyelv esetén azt jelenti, hogy időnként a nyelv bizonyos elemeit megjelölik (elavult - deprecated), és nem ajánlják használatra: később ki is veszi a standardból őket. A strict típusú dokumentum esetében a megjelenítés milyenségét csak a stíluslapok (CSS) használatával együtt lehet vezérelni. A transitional (átmeneti) megenged régi jelöléseket is, és akár stíluslap nélkül is lehet használni. A frameset (frame: keret) pedig megenged egy bizonyos HTML oldalfelosztás, a keretek használatát. A szintaxis:
"http://www.w3.org/TR/html4/loose.dtd">
1.1.5. A HTML nyelv adattípusai Az elemek leírása során a nyelv különböző adattípusokat használ az elemek tulajdonságainak megadásánál. A HTML nyelvben használt adatok részben az SGML nyelv adatai, részben HTML-re jellemzőek. A fontosabbak az alábbiak, egy-egy rövid példával:
6
Sapientia Egyetem, Marosvásárhely, SzLZs
CDATA
Webtechnológia előadás, 2009/10-II. félév
character data: egy karaktersorozatot, szöveget értünk alatta amely a dokumentum karakterkészletéből épül fel. A HTML a szövegben átírja a karaktersorozatokat: a többször, egymásután előforduló szóköz és return karaktereket egy szóközzel helyettesíti, az újsor karaktereket kiszűri. Ilyen szövegeket tartalmaznak például a paragrafusok:
Ez itt egy szöveg – itt újsor itt 4 szököz , itt pedig 8 HTML szóköz: eddig.
Megjelenítéskor a a böngészőben ezt látjuk:
URI
Egységes forrásazonosítók: lásd még részletesen a HTTP protokoll segédletet, tulajdonképpen webcímet jelent, mint: http://www.google.com
színek
A színeket az alábbi formátumok egyikében lehet megadni: -három hexadecimális színkód egymás után, az RGB értékekre: #ff0000 a piros, #00ff00 a zöld stb. 16 szín esetében ezekre szimbólumokat is deklarál a nyelv: black, silver, red, green, blue, stb. A színeket ajánlatos stíluslapokon keresztül megadni, és nem az elemek tulajdonságaiként.
távolságok
Az elemek szélességet, egymástól való távolságát háromféleképpen lehet megadni: 1. pixelekben: ha a távolságra csah egy számot adunk meg akkor pixel értendő, pl.: width="10"
2. százalékban: ez az elem rendelkezésére álló hely egy részét fejezi ki, pl: width="80%" azt jelenti, hogy az elem szélessége a rendelkezésére álló hely 80%a 3. relatív hossz: pl. ha három elemet kell elhelyezni egy területen, akkor azt így adhatjuk meg: 1*, 2*, 1* , és akkor a rendelkezésre álló hely 4 észre oszlik és ebből pl. a második elem kettőt kap. tartalom típusok
Angol neve Content-Type: ez a használható MIME (Multipurpose Mail Extension) típusok neve (lásd HTTP protokoll segédlet). Pl. az image/jpg típus jpg formátumú képet jelent, a text/css típus pedig CSS szöveget tartalmazó állományt.
karakterek
A használt karakterkészlet egyedi karakterei, pl. az ISO-8859-2 -es készleté. 7
Sapientia Egyetem, Marosvásárhely, SzLZs
idő
Webtechnológia előadás, 2009/10-II. félév
Az idő megadására az alábbi formátumú sztringet használja a nyelv: YYYY-MM-DDThh:mm:ssTZD, pl: 2008-02-11T22:56:23EET
HTML Angol neve link: milyen szerepekkel kötődnek egymáshoz a dokumentumok. hivatkozások Értékei: alternate, appendix, bookmark, chapter, contents, copyright, glossary, help, home, index, next, prev, section, start, stylesheet.
szkriptek
A szkriptek nyelvén írt szövegek et a <script> elem tartalmazza. Leggyakrabban a JavaScript nevű nyelvvel találkozunk HTML-be ágyazva.
Egy bevezető & jel után a karakter entitás neve következik, majd egy záró pontosvessző jel. A numerikus referenciák szintaxisa:
Á
A bevezető & jel után a karakter kódja áll, előtte egy #. A kód jelen esetben tízes számrendszerben értendő. A kódok megadhatóak hexadecimális számrendszerben is. pl.: Á A példa a nagy Á betű karakterkódját jelenti. A biztosan megjelenítendő szóköz karakterének entitása a non breaking space karakter: amit gyakran használunk. Pl. az alábbi szöveg megjelenítéskor biztosan 2 szóköz jelenik meg a szavak között:
két szóköz
A HTML specifikáció ezeket táblázatokban adja meg. Egy ilyen táblázatot találunk például az alábbi webcímen: http://www.ms.sapientia.ro/~lszabo/webtechnologia/eloadas/latin1_entitasok.xhtml . LATIN1 karakterkészletre. Sok szövegben használunk referenciákat UNICODE karakterekre. Ilyenek vannak pl. az alábbi táblázatban: Karakter
Numerikus refrencia
Entitás referencia
–
–
–
—
—
—
“
“
“
”
”
”
1.1.7. Az elemek tulajdonságai A HTML elemeket tehát a címkék, a kezdő és zárócímke veszi körül. Az elemeknek tulajdonságai lehetnek, ezeket a nyitócímkén belül adjuk meg. A tulajdonságok név-érték párokat jelentenek, amelyek kifejeznek valamit az elemről. 9
Sapientia Egyetem, Marosvásárhely, SzLZs
Webtechnológia előadás, 2009/10-II. félév
A tulajdonság neve általában egy programozási nyelvekben használt azonosító, az értéke egy sztring, amellyel HTML adatot fejezünk ki. Példák:
src="kep.gif" width="100" height="50">
Szöveg
1.2. HTML elemek 1.2.1. A fejléc fontosabb elemei A fejléc elemei nem lesznek megjelenítve a böngészőben. Itt olyan elemeket találunk, amelyek különböző, a dokumentum megjelenítéséhez szükséges információkat tartalmaznak, vagy a dokumentumhoz kapcsolódó, más dokumenyumokra vagy állományokra utalnak. A fejléc fontosabb elemei: ,, , , <meta>, ,