1 (statikus) HTML (XHTML) oldalak, stíluslapok2 Áttekintés A HTML története HTML oldal felépítése Egymásba ágyazható stíluslapok CSS3 Áttekintés A HTM...
A HTML t¨ort´enete HTML oldal fel´ep´ıt´ese Egym´asba ´agyazhat´ o st´ıluslapok – CSS
CSS
HTML t¨ ort´ enete
HTML oldalak fel´ ep´ıt´ ese
´ Attekint´ es
A HTML t¨ort´enete HTML oldal fel´ep´ıt´ese Egym´asba ´agyazhat´ o st´ıluslapok – CSS
CSS
HTML t¨ ort´ enete
HTML oldalak fel´ ep´ıt´ ese
´ Attekint´ es
A HTML t¨ort´enete HTML oldal fel´ep´ıt´ese Egym´asba ´agyazhat´ o st´ıluslapok – CSS
CSS
HTML t¨ ort´ enete
HTML oldalak fel´ ep´ıt´ ese
Mi a HTML?
HTML (HyperText Markup Language) a World Wide Web ´altal haszn´alt egys´eges nyelv: online dokumentumok l´etrehoz´ asa, c´ımekkel, sz¨ oveggel, t´ abl´ azatokkal, fot´ okkal, stb., online tartalom b¨ ong´esz´ese hypertext linkeken kereszt¨ ul, form-ok (˝ urlapok) haszn´ alata, t´ avoli sz´ am´ıt´ og´epek ´ altal ny´ ujtott szolg´ altat´ asok ig´enybev´etel´ere, mint p´eld´ aul inform´ aci´ o keres´ese, term´ekek megrendel´ese, stb., vide´ ok, zene/hang ´es m´ as multim´edia-elemek csatol´ asa a dokumentumokhoz
CSS
HTML t¨ ort´ enete
HTML oldalak fel´ ep´ıt´ ese
A HTML t¨ort´enete 1990-ben Tim Berners-Lee, a WEB kezdem´enyez˝ oje alkotta Dan Connolly ´ırta meg hozz´a 93-ban a form´alis specifik´aci´ot (DTD) az SGML (Standard Generalized Markup Language, ISO 8879) sablonj´ara (SGML – jel¨ol˝o nyelvek defini´al´as´at lehet˝ ov´e tev˝ o rendszer) p, h1–h6, ul, ol – m´ar kezdett˝ ol fogva benne voltak, a hiperlinkek haszn´alata – saj´at ¨otlete lelkesed˝ok csapata vitatja a tov´abbi fejleszt´esi lehet˝os´egeket Dave Raggett (Bristol-i Hewlett-Packard Lab.) – HTML+ (az eredeti HTML egy kib˝ ov´ıtett v´altozata) a b¨ong´esz˝o-fejleszt˝ok saj´at elk´epzel´eseik szerint implement´alnak u ´jabb tag-eket (pl. Mosaic– IMG tag) IETF (Internet Engineering Task Force) – l´etrehozott egy HTML munkacsoportot (HTML Working Group) → 1995 HTML 2.0 (az els˝o k´ıs´erlet a HTML szabv´anyos´ıt´asa ir´any´aban)
CSS
HTML t¨ ort´ enete
HTML oldalak fel´ ep´ıt´ ese
A HTML t¨ort´enete 1996-t´ol a World Wide Web Consortium (W3C) v´allalja ´at a felel˝oss´eget az u ´jabb HTML specifik´aci´ ok´ert (utolj´ara kiadott szabv´anyuk –1999 HTML 4.01) 1997: HTML 4.0 (ennek apr´ o jav´ıt´asokat tartalmaz´o v´altozata a HTML 4.01) egyes tag-eket “elavult”-nak min˝ os´ıt h´ arom dokumentum t´ıpus: – Strict (szigor´ u specifik´ aci´ o, elavult tag-eket nem enged haszn´ alni) – Transitional (´ atmenet a r´egebb haszn´ alt st´ılus ´es az u ´jabb, szigor´ u k¨ oz¨ ott) – Frameset (frame-eken alapul´ o oldalak)
2000-ben nemzetk¨ozi standardd´a v´alik (ISO HTML, a HTML 4.01 Strict-re alapoz) 2000 – XHTML specifik´aci´ o (a HTML 4.01 specifik´aci´o u ´jrafogalmaz´asa XML-re alapozva)–W3C 2008 – HTML 5 – Working Draft
CSS
HTML t¨ ort´ enete
HTML oldalak fel´ ep´ıt´ ese
Egy HTML dokumentum fel´ep´ıt´ese HTML elemek ´es tag-ek elem: a HTML egy r´esz´et le´ır´ o strukt´ ura r´eszei: kezd˝ o tag, t¨ orzs (content), befejez˝ o tag
tag: egy sz¨ovegr´esz “megjel¨ ol´es´et” szolg´alja “<” ´es “>” hat´ arolja, befejez˝ o tag eset´en pedig “< /” ´es “>”
<EM>ez egy kiemelt sz¨ ovegr´ esz kis- vagy nagybet˝ uk k¨ ozt nincs k¨ ul¨ onbs´eg (<em>, <eM> vagy <EM> ugyanazt jelenti) a tag-ek nem keresztezhetik egym´ast (pl.
<em>sz¨ oveg
- helytelen) . . . a b¨ong´esz˝ok viszont eln´ez˝ oek egyes tag-ek eset´en a befejz˝ o tag elhagyhat´ o (pl. felsorol´asn´al LI) egyes tag-ekhez (amelyeknek nincs tartalmuk) nincs befejez˝o tag: BR, IMG
CSS
HTML t¨ ort´ enete
HTML oldalak fel´ ep´ıt´ ese
Egy HTML dokumentum fel´ep´ıt´ese
Attrib´ utumok egy elem attrib´ utumai az illet˝ o elem k¨ ul¨ onb¨ oz˝ o tulajdons´agait hat´arozz´ak meg a kezd˝o tag-ben adjuk meg ˝ oket alakja: attrib´ utum-n´ ev="attrib´ utum-´ ert´ ek" az attrib´ utum ´ert´eket “,” vagy ’,’ hat´arolja (nem k¨otelez˝o, amennyiben az ´ert´ek csak bet˝ uket, sz´amjegyeket, illetve “-” vagy “.” karaktereket tartalmaz) az attrib´ utum nev´eben a kis-/nagybet˝ u nem sz´am´ıt, az ´ert´ekben viszont sz´am´ıthat (kisbet˝ u haszn´alata aj´anlott).
Egy HTML dokumentum fel´ep´ıt´ese Teljes HTML oldal elmei: DOCTYPE – megadja azt a HTML verzi´ ot, amelynek a dokumentum megfelel HTML HEAD – inform´ aci´ o a dokumentumr´ ol (pl. c´ım, karakterek k´ odol´ asa) BODY – a dokumentum tulajdonk´eppeni tartalm´ at foglalja mag´ aba
HTML oldal ´erv´enyess´eg´enek vizsg´alata a b¨ong´esz˝ok “eln´ez˝ oek” – azaz a maguk m´ odj´an pr´ob´alj´ak megjelen´ıteni a hib´as dokumentumot ´erdemes leellen˝orizni a dokumentum helyess´eg´et – megfelel-e egy adott specifik´aci´onak pl. online ellen˝orz´es: WDG HTML Validator (http://www.htmlhelp.com/tools/validator/), W3C ellen˝orz˝o oldala (http://validator.w3.org/)
CSS
HTML t¨ ort´ enete
HTML oldalak fel´ ep´ıt´ ese
Egy HTML dokumentum fel´ep´ıt´ese pl. <TITLE>A dokumentum c´ ıme
Foc´ ım
Egyik bekezd´ es.
M´ asik bekezd´ es.
Felsorol´ as I. eleme.
Felsorol´ as II. eleme.
CSS
HTML t¨ ort´ enete
HTML oldalak fel´ ep´ıt´ ese
Fontosabb HTML tag-ek
HEAD-en bel¨ ul: TITLE – a dokumentum c´ıme META – k¨ ul¨onb¨oz˝ o (meg nem jelen´ıtett) inform´aci´o a b¨ong´esz˝o illetve keres˝omotrok sz´am´ara P´eld´ ak – l´ asd: meta tag uresHTML.html
LINK – Jelzi a dokumentum kapcsolat´at m´as dokumentumokkal (pl. st´ıluslappal) attrib´ utumok: HREF=“url” MEDIA=“SCREEN” — “PRINT” — “ALL” – meghat´ arozza a dokumentum kimenet´et
CSS
HTML t¨ ort´ enete
HTML oldalak fel´ ep´ıt´ ese
Fontosabb HTML tag-ek BODY-n bel¨ ul: H1 -t˝ol H6-ig – f˝oc´ım, alc´ım, stb. P – bekezd´es (paragrafus) BR – u ´jsor (¨ ures) HR – v´ızszintes vonal (¨ ures) sz¨ovegform´az´o tag-ek: B – vastag´ıtott EM – sz¨ ovegr´esz kiemel´ese I – d˝ oltbet˝ us sz¨ oveg
A – horgony (anchor) – l´asd: anchor.html t´abl´azat (TABLE, TR, TH, TD) felsorol´as (nem sz´amozott: UL, LI, sz´amozott: OL, LI) IMG – k´epbesz´ ur´as DIV – elhat´arol egy r´eszt a dokumentumon bel¨ ul SPAN – HTML elemeket csoportos´ıt (pl. egys´eges st´ılus)
CSS
HTML t¨ ort´ enete
HTML oldalak fel´ ep´ıt´ ese
Attrib´utumok:
Standard attrib´ utumok: class – az elemet egy (st´ılus)oszt´alyba sorolja id – egyedi azonos´ıt´ ot rendel az elemhez style – inline st´ılusdefin´ıci´ o title – helyi s´ ug´o (tooltip) k¨ ul¨onb¨oz˝o tag-ek saj´atos attrib´ utumai – l´asd referencia pl. http://www.w3schools.com/tags/default.asp
CSS
HTML t¨ ort´ enete
HTML oldalak fel´ ep´ıt´ ese
HTML form(˝urlap)-elemek
FORM elemek: lehet˝ov´e teszik, hogy a felhaszn´al´ o adatokat vigyen be form adatok k¨ uld´ese: submit seg´ıts´eg´evel (a form tag action attrib´ utum´aba megadott URL-re) ezen adatok feldolgoz´asa (´altal´aban) szerver oldalon t¨ort´enik P´eld´ak: l´asd: formelemek.html
CSS
HTML t¨ ort´ enete
HTML oldalak fel´ ep´ıt´ ese
Frame-ek (lapkeretek)
a frame-ek haszn´alata lehet˝ ov´e teszi, hogy egyetlen b¨ong´esz˝o ablakban t¨obb HTML oldalt jelen´ıts¨ unk meg mindenik HTML oldalt frame-nek h´ıvunk, ´es ezek f¨ uggetlenek egym´ast´ol Frame-k haszn´alat´anak h´atr´anyai: egyszerre t¨obb HTML oldalt kell nyilv´antartania a fejleszt˝onek, ami neh´ezkes lehet neh´ez kinyomtatni a teljes weboldalt P´eld´ak: l´asd: 4 vizszintes framek.htm, 4 vegyes framek.htm, 4 navigalo pl.htm
CSS
HTML t¨ ort´ enete
HTML oldalak fel´ ep´ıt´ ese
XHTML XHTML – EXtensible HyperText Markup Language a c´el, hogy ´atvegye a HTML szerep´et szinte azonos a HTML 4.01-val (´arnyalatbeli k¨ ul¨ onbs´egek) a HTML egy tiszt´abb, szigor´ ubb v´altozata az XHTML gyakorlatilag a HTML-nek ´erv´enyes XML-k´ent val´o meghat´aroz´asa a W3C tette k¨ozz´e a legfontosabb k¨ ul¨onbs´egek: az az az az
XHTML XHTML XHTML XHTML
elemeket k¨ otelez˝ o m´ odon helyesen kell egym´asba ´ekelni elemeket mindig be kell z´arni elemeket kisbet˝ uvel kell ´ırni dokumentumoknak egyetlen gy¨ ok´er elem¨ uk lehet
CSS
HTML t¨ ort´ enete
HTML oldalak fel´ ep´ıt´ ese
XHTML
egy minim´alis XHTML dokumentum C´ım
CSS
HTML t¨ ort´ enete
HTML oldalak fel´ ep´ıt´ ese
CSS - Cascading Style Sheets le´ır´ onyelv, melynek seg´ıts´eg´evel k¨ ul¨ onb¨ oz˝ o st´ıluslapokat hozhatunk l´etre ´es ´agyazhatunk be HTML oldalakba az egyes HTML tag-ek megjelen´ıt´esi st´ılus´at hat´arozz´ak meg (m´eret, sz´ın, stb.) HTML 4.0-hoz – a HTML standadiz´al´as´a´ert felel˝ os World Wide Web Consortium (W3C) hozta l´etre a legt¨obb mai b¨ong´esz˝ o t´amogatja a CSS-t el˝onyei: egys´eges st´ılust biztos´ıt a HTML dokumentumoknak (pl. ugyanazon honlapon, web-alkalmaz´ason bel¨ ul) r¨ovidebb´e, ´atl´athat´ obb´a teszi a HTML oldalakat megjelen´ıt´esi st´ılus ´es tartalom sz´etv´alaszt´asa rugalmass´ag (el´eg a st´ılus´allom´anyt m´ odos´ıtni)
CSS
HTML t¨ ort´ enete
HTML oldalak fel´ ep´ıt´ ese
CSS St´ılus megad´asa inline m´ odon a st´ılus a tag-en bel¨ ul van megadva
Bels˝o st´ıluslap a st´ılust a dokumentum head elem´eben adjuk meg <style type="text/css"> st´ılus elemek K¨ uls˝o st´ıluslap a st´ılust k¨ ul¨on .css kiterjeszt´es˝ u ´allom´anyban adjuk meg, melyet a dokumentum head elem´ebe “csatolunk”
CSS
HTML t¨ ort´ enete
HTML oldalak fel´ ep´ıt´ ese
CSS egy HTML elem st´ılusa t¨ obbf´elek´eppen adhat´ o meg, ezek v´eg¨ ul egy egys´eges “virtu´alis” st´ıluss´a alakulnak (innen a “cascading” elnevez´es) a k¨ ul¨onb¨oz˝ok´eppen megadott st´ılusok egys´eges´ıt´ese a k¨ov. priorit´asi sorrendben t¨ort´enik: inline m´odon megadott st´ılus (legnagyobb priorit´as´ u) bels˝o st´ıluslap (a head elemben megadott) k¨ uls˝o st´ıluslap b¨ong´esz˝o alap´ertelmez´es szerint meghat´arozott st´ılusa Szintaxis: szelektor {tulajdons´ ag: ´ ert´ ek} pl. body {color: black} p {font-family: "sans serif"} p {text-align:center;color:red}
CSS
HTML t¨ ort´ enete
HTML oldalak fel´ ep´ıt´ ese
CSS
a szelektorok csoportos´ıthat´ ok: h1,h2,h3,h4,h5,h6 { color: green } A class szelektor– st´ılusoszt´aly ugyanannak a HTML elemnek k¨ ul¨ onb¨ oz˝ o st´ılusokat adhatunk meg p.jobb {text-align: right} →
haszn´alhat´o m´ert´ekegys´egek: em (a relev´ans bet˝ ut´ıpus m´erete), ex (a relev´ans bet˝ ut´ıpus x-magass´aga), px (pixel), in (inch), cm (centim´eter), mm (millim´eter), pt (pont), pc ( = 12 pont)
CSS
HTML t¨ ort´ enete
HTML oldalak fel´ ep´ıt´ ese
Bet˝ ut´ıpus bet˝ ut´ıpus csal´ad (font-family) p { font-family: Verdana, Arial, ’Times New Roman’, serif } ´altal´anos t´ıpusok: serif, sans-serif, cursive, fantasy, vagy monospace bet˝ u st´ılus (font-style): italic, normal bet˝ uvastags´ag (font-weight): normal, bold, bolder, lighter, 100,. . . , 900 bet˝ um´eret (font-size): abszol´ ut ´ert´ek (pl. x-small, small, medium, large), relat´ıv (pl. larger, smaller ), hossz, sz´azal´ek sz¨ovegigaz´ıt´as (text-align) lehets´eges ´ert´ekek: left, right, center, justify t´abl´azatok, list´ak l´asd: 2 tabla CSS-el.html l´asd: 3 lista CSS-el.html