ΧαδλΫ βμν α έζ δκμν(aεμνβ1κγ)

Transcript

1 Σ χθκζκΰδεσνεεπαδ υ δεσνί λυηανκλά βμ χκζάνσ χθκζκΰδευθνεφαληκΰυθ ΣηάηαΝΕφαληκ ηϋθβμνπζβλκφκλδεάμντνπκζυηϋ ωθ Π υχδαεάν λΰα έα ΕΦ ΡΜΟΓΗΝΠ ΡΟΤ Ι Η ΝΜΟΤ ΙΚΩΝΝΟΡΓ ΝΩΝΝ ΕΝ HTML5 ΧαδλΫ βμν α έζ δκμν(aεμνβ1κγ) ΕπδίζΫπωθΝεαγβΰβ άμνμμαζϊηκμν γαθϊ δκμ Επδ λκπάν ιδκζσΰβ βμνμπαθαΰδω ΪεβμΝ πτλκμ,παχκυζϊεβμνιωϊθθβμ, ΜαζΪηκμΝ γαθϊ δκμ Ηη λκηβθέανπαλκυ έα βμμ β1ννκ ηίλέκυ 2014

2 υ α i

3 Abstract The main objective of the thesis was the creation of a website for the presentation of musical instruments. The ultimate goal was to learn the language HTML 5, the JavaScript and CSS as well as dealing with the process of creating websites. Through the web site, the visitor can explore and learn about the history and construction method of musical instruments, listen features songs and see videos of the instruments that play a musician. Finally, you can play video files from two different instruments (e.g. with lyre and lute) listening to the musical result. ii

4 Σ ΟΝ ία δεσμν σξκμν βμν π υξδαεάμν λΰα έαμν ά αθν βν βηδκυλΰέαν θσμν δε υαεκτν σπκυν ΰδαΝ βθν παλκυ έα βν πθνηκυ δευθνκλΰϊθπθέν ΟΝαπυ λκμν εκπσμνά αθνβν εηϊγβ βν βμνΰζυ αμν HTML 5, βμνjavascript εαδν κυνcss εαγυμνεαδνβν θα ξσζβ βνη Ν βν δα δεα έαν βηδκυλΰέαμν δε υαευθν σππθέν ΜΫ πν πθν δ κ ζέ πθν κυν δε υαεκτν σπκυν κν πδ εϋπ βμ,ν ηπκλ έν θαν π λδβΰβγ έν εαδν θαν θβη λπγ έν ΰδαΝ βθν δ κλέαν εαδν κθν λσπκν εα α ε υάμν πθν ηκυ δευθν κλΰϊθπθ,ν θαν αεκτ δν ξαλαε βλδ δεϊν λαΰκτ δανεαδνθαν δνίέθ κναπσν ανσλΰαθαν ανκπκέανπαέα δνεϊπκδκμνηκυ δεσμένσϋζκμν γαν ηπκλ έν θαν αθαπαλϊΰ δν τκν αλξ έαν video απσν δαφκλ δεϊν ηκυ δεϊν σλΰαθαν ΧπέξέΝ ηααέν ζτλαν εαδν ζακτ κψναεκτΰκθ αμν κνηκυ δεσναπκ Ϋζ ηαέ iii

5 1Ν δ αΰπΰά έ1ΝΠ λέζβοβ έβΝΚέθβ λκνΰδαν βν δ ιαΰπΰάν βμν λΰα έαμ έγΝ εκπσμνεαδν σξκδν λΰα έαμ έ4Ν κηάν λΰα έαμ... 2 βένμ γκ κζκΰέαντζκπκέβ βμ... 3 βέ1νμϋγκ κμν θϊζυ βμνεαδν θϊπ υιβμνπ υξδαεάμ... 3 βέβνθ πλέ μ HTML JavaScript CSS... 4 γέν ξϋ δκν λϊ βμνΰδαν βθν επσθβ βν βμνπ υξδαεάμν λΰα έαμ State of the Art HTML δ αΰπΰά... 6 γέ1έ1έβν τθ αιβ... 7 γέ1έ1έγννϋανelement JavaScript γέ1έβέ1ν δ αΰπΰά γέβέ1έβν τθ αιβ γέβέ1έγνμ αίζβ Ϋμ γέ1έβέ4νσ ζ Ϋμ θ κζϋμ υθαλ ά δμ CSS γέ1έγέ1ν δ αΰπΰά γέ1έγέβν τθ αιβ γέ1έγέγν θ πηϊ π βνcss ΝHTML αλξ έα γέ1έγέ4ν α δεϋμνι δσ β μ γέβν βηαθ δεκέν σξκδνΰδαν βθνκζκεζάλπ βν βμνπ υξδαεάμ γέβέ1νχλκθκ δϊΰλαηηαν λΰα έαμν(gantt chart) έΝΚτλδκΝΜΫλκμΝΠ υξδαεάμ θϊζυ βν κυνπλκίζάηα κμ έ1έβΝ παδ ά δμν υ άηα κμ έβΝ ξ δα ησμντζκπκέβ βμ iv

6 4έγΝΤζκπκέβ β index.html list_instruments.html history.html sounds.html videos.html photos.html synchronization.html instrumentmap.html links.html contact_form.html mycss.css javascript.js έ4ΝΠαλκυ έα β ηέν πκ ζϋ ηα α ηέ1ν υηπ λϊ ηα α ηέβνμ ζζκθ δεάν λΰα έανεαδν π ε Ϊ δμ δίζδκΰλαφέα ΠαλΪλ βηα Παλκυ έα β Κα ΪζκΰκμΝΕδεσθωθ δεσθαν1μνhtml 5 logo (Jeyaganesh, 2011)... 4 δεσθανβμνjavascript logo (Jeyaganesh, 2011)... 4 δεσθανγμνcss 3 logo (Goren, 2014)... 5 δεσθα 4: Σα ηϋζβ κυ World Wide Web Consortium κ MIT (Raggett et.al, 1998)... 6 δεσθανημνπαλϊ δΰηανdom Ϋθ λκυν(w3c,νβί14α)... 8 δεσθα 6: HTML5 parsing (W3C, 2014ί)... 9 δεσθα 7: Ϋθ λκ DOM απσ κθ Internet Explorer (Houssami, 2013) δεσθα 8: Server side VS Client Side (Green Goo, 2010) δεσθανλ: keyword ξλπηϊ πθ (Mozilla, 2014) δεσθαν1ίμνπαλϊ δΰηανfloat (Mozilla, 2014) δεσθαν11μ λξδεάν ζέ α δεσθαν1βμνκα ΪζκΰκμΝΟλΰΪθπθ δεσθαν1γμνι κλέανλακτ κ δεσθαν14μνι κλέανλτλα δεσθαν1ημνι κλέανμαθ κζέθκ v

7 δεσθαν1θμν εκυ δεσντζδεσνλακτ κ δεσθαν1ιμν εκυ δεσντζδεσνλτλα δεσθαν1κμν εκυ δεσντζδεσνμαθ κζέθκ δεσθαν1λμνvideos κνλακτ κ δεσθανβίμνvideos βνλτλα δεσθανβ1μνvideos κνμαθ κζέθκ δεσθανββμνφπ κΰλαφέ μ δεσθανβγμν θκλξβ λυ δμ δεσθανβ4μνμκυ δεκένχϊλ μ δεσθανβημνμκυ δεκένχϊλ μν- Λακτ κ δεσθανβθμνμκυ δεκένχϊλ μν- Λτλα δεσθανβιμνμκυ δεκένχϊλ μν- Μαθ κζέθκ δεσθανβκμν τθ ηκδ δεσθανβλμν πδεκδθπθέα Κα ΪζκΰκμΝΠδθΪεωθ ΠέθαεαμΝ1μΝ ξ δεϋμνμ γκ κζκΰέ μντζκπκέβ βμ... 3 ΠέθαεαμΝβμΝΣ ζ ΫμΝJavaScript Πέθαεαμ 3: ΣδηΫμ border-style (Mozilla, 2014) ΠέθαεαμΝ4μΝΦυζζκη λβ ΫμΝεαδΝ τπκδναλξ έπθνπκυνηπκλκτθνθαναθαπαλαΰϊΰκυθν (W3schools, n.a) ΠέθαεαμΝημΝΦυζζκη λβ ΫμΝεαδΝ τπκδναλξ έπθνvideo πκυνηπκλκτθνθαν αθαπαλαΰϊΰκυθν(wγschools,νnέa) vi

8 1 α κνε φϊζαδκναυ σνγανπαλκυ δϊ κυη Ν δμνΰ θδεϋμνπζβλκφκλέ μν βμνπ υξδαεάμνηαμν λΰα έαμέν ΠδκΝ υΰε ελδηϋθα,ναεκζκυγ ένηδανπ λέζβοβν βμν π υξδαεάμν λΰα έαμ,ναθαπ τ κυη Ν ανεέθβ λανπκυν ηαμν υγβ αθν βθν πδζκΰάν κυν υΰε ελδηϋθκυν γϋηα κμν εαδν ΫζκμΝ παλκυ δϊακυη Ν ηδαν τθ κηβν π λέζβοβν πθνε φαζαέπθν βμνπ υξδαεάμέ 1.1 Π εκπσμν βμν π υξδαεάμν λΰα έαμ ά αθν βν η ζϋ β,ν ξ έα βν εαδν βν υζκπκέβ β θσμν δε υαεκτν σπκυν παλκυ έα βμν ηκυ δευθν κλΰϊθπθέν ΓδαΝ κν εκπσν αυ σ,ν η ζ άγβεαθν υπϊλξκυ μν υζκπκδά δμν Χ σ κν κθν ζζβθδεσναζζϊνεαδν κν δ γθάνξυλκψένηνη ζϋ βναυ άν δϊ βε Ν σ κν βθναλξδ ε κθδεάν αζζϊνεαδν κνπ λδ ξση θκν πθνυζκπκδά πθνεαδνεαγσλδ Ν δμναθϊΰε μν ξ έα βμν κυν δε υαεκτνηαμν σπκυέ ΓδαΝ βθνυζκπκέβ βν κυ δε υαεκτν σπκυνϋΰδθ Νξλά βν βμν HTML 5, JavaScript εαδν βμν CSS ΰδαΝ κθνϋζ ΰξκΝ ηφϊθδ βμν πθν ζέ πθέν ΟΝ δε υαεσμν σπκμνπκυναθαπ τξγβε,νπαλϋξ δν κνξλά βν βν υθα σ β ανκπ δεκπκέβ βμν πθν ηκυ δευθν κλΰϊθπθν η Ν θ δε δεϊν εκηηϊ δαν άξκυν πκυν αθ δπλκ ππ τκυθν κν αθ έ κδξκν ηκυ δεσν σλΰαθκένπζβλκφκλέ μνΰδαν δϊφκλανηκυ δεϊνσλΰαθαέν 1έβ Κ α αυ κτν αθ πθν ΰζπ πζκτ δκδν α α α βθν πκξάν πκυν ακτη Ν κν δα έε υκν Ϋξ δν ΰέθ δν αθαπσ πα κν εκηηϊ δν βμν απάμν ηαμέν ΜΫ πν ζκτηαδν πζβλκφκλέ μν ξ σθν ΰδαΝ σ δν γϋζκυη έν Σαυ σξλκθαν βν πζβλκφκλδεάν η Ν βθν ιϋζδιβν υθν πλκΰλαηηα δ ηκτν έθ δν βν υθα σ β αν κυμν δε υαεκτμν σπκυμν θαν ΰέθκθ αδν πδκν Νσ δναφκλϊν βν υθτπαλιβν δεσθαμ,νάξκυ,νvideo εέζπέν ΗΝ παλκτ αν π υξδαεάν λΰα έαν κξ τ δν θαν έι δν σ δν η Ν βν ξλά βν πθν θϋπθν ξθκζκΰδυθ,ν ηπκλκτη Ν θαν βηδκυλΰά κυη Ν πδκν «απθ αθκτμ»ν δε υαεκτμν σπκυμν κδν κπκέκδν γαν πλκ ζετκυθν π λδ σ λκυμν αθγλυπκυμν εαδν θαν πλκ γϋ κυη Ν ΫθαΝ ζδγαλϊεδν βθν πλκ πϊγ δαν ΰδαΝ βν δϊ π βν βμν πκζδ δ ηδεάμνηαμνεζβλκθκηδϊμέν 1έγ Σ π α Σ α α ΟΝ ετλδκμν σξκμν έθαδν βν βηδκυλΰέαν θσμν δε υαεκτν σπκυν ΰδαΝ βθν παλκυ έα βν ηκυ δευθν κλΰϊθπθν η Ν βν ίκάγ δα δεσθαμ,ν άξκυν εαδν video. ΟδΝ πδ εϋπ μν γαν ηπκλκτθν θαν πζκβΰβγκτθν εαδν θαν ίλκυθνπζβλκφκλέ μν ξ δεϊνη Ν ανηκυ δεϊνσλΰαθα,νθαναεκτ κυθν κθνάξκν κυμ,νθαν κυθνφπ κΰλαφέ μν κυμνεαδνθαν κυθνvideo απσν ανσλΰαθανπκυνγανπαέα δνεϊπκδκμνηκυ δεσμέ ΟΝαπυ λκμν εκπσμν βμ λΰα έαμν έθαδνβν θα ξσζβ βνη Ν βθνhtml5, JavaScript, CSS εαδνβν εηϊγβ άν κυμέ 1

9 1έ4 α α βθν θσ β αναυ άνγανεϊθκυη ΝηδαΝ τθ κηβνπαλκυ έα βν κνπ λδ ξση θκν πθνε φαζαέπθν βμν π υξδαεάμέ Κ φϊζαδκν βκ Μ γκ κζκΰέαν Τζκπκέβ βμμν κν ε φϊζαδκν αυ σν γαν ΰέθ δν αθαφκλϊν ΰδαΝ βν η γκ κζκΰέαν πκυν αεκζκυγά αη Ν ΰδαΝ βθν υζκπκέβ βν βμν π υξδαεάμέν πέ βμν γαν ΰέθ δν ηδαν τθ κηβν παλκυ έα βν πθνΰζπ υθνπλκΰλαηηα δ ηκτνπκυνγανξλβ δηκπκδά κυη έν Κ φϊζαδκνγκ ξϋ δκν λϊ βμνΰδαν βθν επσθβ βν βμνπ υξδαεάμν λΰα έαμμν κνε φϊζαδκναυ σν παλκυ δϊακυη ΝπδκΝαθαζυ δεϊν δμνΰζυ μνπλκΰλαηηα δ ηκτνπκυνξλβ δηκπκδά αη έν Κ φϊζαδκν ζκ ΚτλδκΝ ηϋλκμν Π υξδαεάμμν κν ε φϊζαδκν αυ σν αθαζτκυη Ν κν πλσίζβηαν πκυν πλϋπ δν θαν αθ δη ππέ κυη Ν εαδν πλκ δκλέακυη Ν δμν απαδ ά δμν κυν δε υαεκτν ηαμν σπκυέν ΣΫζκμ,Ν παλκυ δϊακυη Ν ανίάηα ανυζκπκέβ βμν βμνζτ βμνηαμέν Κ φϊζαδκν ηκ πκ ζϋ ηα αμν ΣκΝ ζ υ αέκν ε φϊζαδκν βμν π υξδαεάμν παλκυ δϊακθ αδν αν απκ ζϋ ηα αν βμνπ υξδαεάμν λΰα έαμ,νβνξλβ δησ β ΪΝ βμνεέζπέ 2

10 βέ Μ αυ βέ1 Μ υ π α π υ Π υ α ΟΝ σξκμν βμν λΰα έαμν ηαμν έθαδν βν βηδκυλΰέαν θσμν δε υαεκτν σπκυν ΰδαΝ βθν παλκυ έα βν ηκυ δευθνκλΰϊθπθνη Ν βνίκάγ δαν δεσθαμ,νάξκυνεαδνvideoέν πκηϋθπμνγαν βηδκυλΰά κυη ΝΫθαΝ τθκζκν απσνδ κ ζέ μ,νκδνκπκέ μνπλϋπ δνθανπλκίϊζκυθν κν υΰε ελδηϋθκνπ λδ ξση θκν κθν πδ εϋπ βέν Μ γκ κζκΰέα HTML 5 θαφκλϊν βν δίζδκΰλαφέα JavaScript CSS Πέθαεαμ 1μ χ δεϋμ Μ γο οζοΰέ μ Τζοποέβ βμ βέβ Θ βθν θσ β αν αυ άν γαν π λδΰλϊοκυη Ν θν υθ κηέαν δμν ΰζυ μν πλκΰλαηηα δ ηκτν πκυν γαν ξλβ δηκπκδά κυη Ν ΰδαΝ βν βηδκυλΰέαν κυν δε υαεκτν ηαμν σπκυέν κν πση θκν ε φϊζαδκν γαν π λδΰλϊοκυη Ναθαζυ δεϊν βθνεϊγ Νηέαέ HTML5 ΗΝ ώtεδην ΧώypertextΝ εarkupν δanguageψν έθαδν κν θϋκν πλσ υπκν βμ ΰζυ αμ HTML. Οδ ία δεϋμν δ Ϋ μν ΰδαΝ βν βηδκυλΰέαν βμν ηφαθέ βεαθν κν βίίζν απσν βθν κηϊ αν Web Hypertext Application Technology Working Group (WHATWG)έΝ β υθϋξ δα κ 2007 κ World Wide Web Consortium (W3C) βηδκτλΰβ ηδα κηϊ α λΰα έαμνη Ν εκπσν βθναθϊπ υιάν βμένμ Ν βνθϋανϋε κ βν εαδν βθνυπκ άλδιβνθϋπθνapi, ξθκζκΰδυθνεαδνθϋπθνtag, κδνdeveloper ηπκλκτθνθανξ έακυθνεαζτ λ μν εαδνπδκν κηβηϋθ μν φαληκΰϋμ,νι φ τΰκθ αμναπσν β ζκΰδεάν πθναυ σθκηπθν ΰΰλΪφπθέΝ ΠαλΫξ δν βν υθα σ β αν ΰδαΝ απ υγ έαμν θ πηϊ π βν άξκυν εαδν ίέθ κν ξπλέμν βν ξλά βν ΪζζπθΝ ίκβγβ δευθν πλκΰλαηηϊ πθν σππμν Quick Time εαδν κυν Flash Player. πέ βμν ηπκλ έν θαν παλαεϊηπ δν δμν υ ζ δ κυλΰέ μν πθνπλκΰλαηηϊ πθνπ λδάΰβ βμ,νκδνκπκέκδνηπκλ ένθανηβθναθαΰθπλέακυθνσζκυμν κυμν τπκυμναλξ έπθνίέθ κν άξκυ,νη Ν βθν θ πηϊ π βν κναθ έ κδξκνtag πκζζαπζυθν πδζκΰυθέ 3

11 πέ βμν έθ δν βν υθα σ β αν δμν δ κ ζέ μν θαν απκγβε τκυθν πζβλκφκλέ μν κπδεϊν κθν υπκζκΰδ άν κυνπ ζϊ βνι π λθυθ αμν κνσλδκνπκυνσλδααθν αν cookies. ΣαΝ κηϋθαναυ ΪΝηπκλκτθΝθαΝ πλκ π ζα κτθνΰδαναθϊΰθπ βνάν ΰΰλαφάΝησθκΝαπσΝ βθνδ κ ζέ ανπκυν αν βηδκτλΰβ έ δεσθα 1: HTML 5 logo (Jeyaganesh, 2011) JavaScript ΗΝ ΰζυ αν JavaScript, έθαδν ηδαν ληβθ υση θβν ΰζυ αν θαλέκυν (script language) πκυν ξλβ δηκπκδ έ αδνΰδαν βν βηδκυλΰέαν δα λα δευθν ζέ πθένμ Ν κθνσλκν ληβθ υση θβ,ν θθκκτη Νσ δνκν ευ δεαμν βμν ζέ αμν θν Ϋξ δν π λϊ δν απσν η αΰζυ δ βέν ΟΝ ευ δεαμν JavaScript, υθάγπμν θ πηα υθ αδν κθνhtml ευ δεαέν δεσθα 2: JavaScript logo (Jeyaganesh, 2011) CSS ΣκΝCSS έθαδνϋθαμναπζσμνηβξαθδ ησμ,νη Ν βνίκάγ δαν κυ κπκέκυνηπκλκτη ΝθαΝπλκ γϋ κυη,ν η Ν αφάθ δαν εαδν υ ζδιέα,ν υζν Χΰλαηηα κ δλϋμ,ν ξλυηα α,ν απκ Ϊ δμν εέζπέψν αν ΫΰΰλαφαΝ κυν Ι κτέν βζα άν ηπκλκτη Ν θαν αζζϊικυη Ν βθν ηφϊθδ βν εαγυμν εαδν βν δϊ αιβν πθν δ κ ζέ πθέν ΟΝ 4

12 ία δεσμν εκπσμν κυν έθαδνθαν δαξπλέ κυη Ν κ π λδ ξση θκνηδαμνδ κ ζέ αμναπσν βθν ηφϊθδ άν βμέν Μ Ν κθν λσπκν αυ σ,ν κν π λδ ξση θκν έθαδν υεκζσ λαν πλκ ίϊ δηκν εαδν βν ηφϊθδ βν ηπκλ έν θαν λκπκπκδβγ έν τεκζανξπλέμνθαν πβλ Ϊ δν κνπ λδ ξση θκέν δεσθα 3: CSS 3 logo (Goren, 2014) 5

13 γέ Σ α π Π υ α α α 3.1 State of the Art HTML Εισα ω ή ΗΝ HTML (Hyper Text Markup LanguageΨΝ έθαδν βν ετλδαν ΰζυ αν κυν δα δε τκυέ ΌππμΝ αθαφϋλ δν εαδν κν σθκηϊν βμ θν έθαδν ηδαν ΰζυ αν πλκΰλαηηα δ ηκτ,ν αζζϊν ηδαν ΰζυ αν βν κπκέαν π λδΰλϊφ δν βθν κηάνηδαμνδ κ ζέ αμέν υ άν βν δΰηάνβν HTML ίλέ ε Ν βθνπϋηπ βνϋε κ βν βμν σπκυνϋξ δν κγ ένϋηφα βν δμν φαληκΰϋμν δα δε τκυνεαδν βθναπκ αφάθδ βν πθνπλκ δαΰλαφυθνυ Ν κδνεα α ε υα ΫμΝθαΝηπκλΫ κυθνθανπαλϊΰκυθνbrowsers απσζυ αν υηία κτμνη αιτν κυμέ H HTML ίλέ ε αδν ΝηδαΝ δαλεάν ιϋζδιβναπσν σ ΝπκυΝ δ άζγ Ν κν δα έε υκν κν1λλίν κν CERN. H HTML πλκϋευο ΝαπσΝ βθνsgml (Standard Generalized Markup Language), βνκπκέαν έθαδν ηδαν π λέπζκεβν ξθδεάν πλκ δαΰλαφά,ν ηϋ πν βμν κπκέαμν π λδΰλϊφκθ αδν ΰζυ μν άηαθ βμ,ν δ δαέ λαν αυ ΫμΝ πκυν ξλβ δηκπκδκτθ αδν βθν αθ αζζαΰά,ν δαξ έλδ βν εαδν βηκ έ υ βν ΰΰλΪφπθέΝ ΗΝ ώtεδν πκηϋθπμν βηδκυλΰάγβε,ν ΰδαΝ θαν πδ λϋο δν Ν σ κυμν θν ά αθν ι δ δε υηϋθκδν βθν SGML θαν βηκ δ τ κυθνεαδνθαναθ αζζϊικυθν πδ βηκθδεϊν ξθδεϊνεαδνϊζζανϋΰΰλαφαένηνhtml δ υεσζυθ Ν βθν αθ αζζαΰάν αυ άν ΰδα έν έξ Ν θ πηα πηϋθβ βθν δεαθσ β αν ΰδαΝ βν τθ βν πθν βζ ε λκθδευθν ΰΰλΪφπθΝη αιτν κυμνη Ν βνξλά βνυπ λ υθ Ϋ ηπθέν Κα ΪΝ βν δϊλε δαν κυν 1λλγΝ εαδν δμν αλξϋμν κυν 1λλζ,Ν πκζζϊν πλκΰλϊηηα αν π λδάΰβ βμν έξαθν πλκ γϋ δν αν δεϊν κυμν ηάηα αν βθν HTML η ΝΪη κνεέθ υθκνβνΰζυ ανθανΰέθ δν α αφάμέν ΝηδαΝ πλκ πϊγ δανθανι π λα έν κν υΰε ελδηϋθκνπλσίζβηανκν Dan Connolly εαδνβνκηϊ αν κυν υθϋζ ιαθν σζ μν δμν δεϋ μν (tag) πκυν ξλβ δηκπκδκτθ αθν ηϋξλδν ε έθβν βν δΰηάν Ν ΫθαΝ ξϋ δκν ΰΰλΪφκυ,Ν κν κπκέκν κθκηϊ βε Ν HTML 2. υ υξυμ,ν βν ΪθαλξβΝ αθϊπ υιάν βμν υθ ξέ βε Ν η Ν βθν ηφϊθδ βν κυν θϋκυνφυζζκη λβ άν κν1λλζν κυνnetscape. αν ΫζβΝ κυν1λλζνδ λτγβε Ν κ World Wide Web Consortium,Ν κνκπκέκναθϋπ υι ΝΫθαΝδ ξυλσν θ δαφϋλκθνΰδαν βθνhtml. δεσθα 4: Σα ηϋζβ ου World Wide Web Consortium ο MIT (Raggett et.al, 1998) 6

14 ΣκΝ1λληΝκΝDave Raggett βηκ έ υ ΝΫθαΝinternet draft κνκπκέκνεϊζυπ Νσζ μν δμν υθα σ β μν βμν HTML εαδν κθκηϊ βε Ν HTML γέίέν υ υξυμν σηπμν κν υΰε ελδηϋθκν draft ζσΰπν κυν η ΰΫγκυμΝ κυμν Χπ λέπκυν 1ηίΝ ζέ μψν ά αθν τ εκζκν θαν πδευλπγ έν απσν βθν IETF. Η HTML 3.0 πϋλα Ν απσν πκζζϋμν αθαγ πλά δμν ΰδαΝ θαν πλκετο δν βν πδκν ΰθπ άν Ϋε κ βν βμν HTML βν γέβέν ΗΝ 3.2 Ϋε κ βν βμν HTML ΰελέγβε Ν πέ βηαναπσν κθνw3c κθνιαθκυϊλδκν κυν1λλι,νπμνhtml πλκ δαΰλαφά,νϋξκθ αμν αυ σξλκθαν αιδκζκΰά δμν απσν η ΰΪζ μν αδλ έ μν π λδβΰβ υθν σππμν βν Netscape εαδν βν Microsoft (Raggett et.al, 1998). ΗΝ πση θβνϋε κ βνζέίν βμνhtml πλκ Ϊγβε ΝαπσΝ κθνw3c κθν εϋηίλδκν κυν1λλινεαδνϋΰδθ Ν πέ βηκν Ϊθ αλν κθν πλέζδκν κυν1λλκένηνϋε κ βναυ άν λκπκπκδάγβε ΝεαδΝ δκλγυγβε Ν Νκλδ ηϋθαν βη έανεαδνπλκϋευο ΝβΝ ζδεάνϋε κ βνζέί1έν βν υθϋξ δανκνw3c πλκ πϊγβ ΝθαΝ βηδκυλΰά δνηδανθϋανΰζυ ανία δαση θκμν βθνhtml εαδν βθν XML,Ν βθν XHTML. ΟδΝ πλκ δαΰλαφϋμν βμν ε σγβεαθν κθν ΙαθκυΪλδκΝ κυν βίίί,ν ξπλέμν θαν π λδζαηίϊθκυθν πκζζϋμν εαδθκ κηέ μέν αθν ευλέπμν ηδαν αθα δκλΰϊθπ βν βμν HTML η Ν εκπσν βθν ατιβ βν βμν πλκ ία δησ β αμν εαδν ζ δ κυλΰδεσ β αμέν ΣκΝ βίίβν βηκ δ τ βε Ν βν XHTML 2.0 ξπλέμν η ΰΪζβΝ πδ υξέα,ναφκτνκδνπ λδ σ λκδνφυζζκη λβ ΫμΝ θν βθνυπκ άλδααθέν Μ Ϊ απσ Ϋθα λΰα άλδκ κυ W3C κ 2004, κδ Apple, κ Mozilla Foundation, εαδ κ Opera Software υθϋ β αθ ηδα δεά κυμ κηϊ α λΰα έαμ βθ Web Hypertext Application Technology Working Group (WHATWG). ΗΝκηΪ αν λΰα έαμνι εέθβ ΝθαΝ λΰϊα αδν ΝηδαΝί ζ έπ βν βμνhtml η Ν εϊπκδαν ξαλαε βλδ δεϊν πκυν ξ έακθ αθν ευλέπμν η Ν φσλη μέν ΟδΝ πλκ πϊγ δϋμν κυμν απκλλέφγβεαθν απσν κθνw3c εαδνκνwhatwg υθϋξδ ΝησθκμΝ κυν βθναθϊπ υιβν βμνhtml 5. ΗΝία δεάναλξάν βμν ά αθνσ δνϋπλ π ΝθαΝ έθαδν υηία άνη Ν δμνπλκςπϊλξκυ μν ξθκζκΰέ μέ ΣκΝ βίίθ,ν κν W3C θ δαφϋλγβε Ν θαν υηη Ϊ ξ δν βθν αθϊπ υιβν βμν HTML 5 εαδν κθν πση θκνξλσθκν βηδκτλΰβ ΝΫθαΝworking group ΰδαΝθα κυζϋο δναπσνεκδθκτνη Ν κθνwhatwg βθν αθϊπ υιβν βμν ΰζυ αμέν ΣκΝ W3C Ϋε κ Ν δμν πλκ δαΰλαφϋμν βμν ΰζυ αμν εϊ πν απσν κν δεσν κυν copyright αζζϊν κνwhatwg ελϊ β αθνϋθαν τθκζκνπλκ δαΰλαφυθνζδΰσ λκνπ λδκλδ δεσνχreynen, 2009) ύ α η ΗΝία δεάν κηάν θσμνhtml ΰΰλΪφκυΝ έθαδμ <!DOCTYPE html> <html lang="en"> <head> <title>sample page</title> </head> <body> <h1>sample page</h1> <p>this is a <a href="demo.html">simple</a> sample.</p> <!-- this is a comment --> </body> </html> 7

15 ΣαΝ HTML ΫΰΰλαφαΝ απκ ζκτθ αδν απσν ΫθαΝ Ϋθ λκν απσν elements εαδν ε έη θκέν ΚΪγ Ν element βζυθ αδν απσν ΫθαΝ tag ΫθαλιβμΝ ΧπέξέΝ <body>) εαδν ΫθαΝ tag ζάιβμν ΧπέξέΝ ξήbody>). ΣαΝ tag πλϋπ δν θαν έθαδνφπζδα ηϋθανεαδνθανηβθν πδεαζτπ κθ αδέν ΣαΝ elements ηπκλκτθν θαν ΫξκυθΝ attributes (δ δσ β μψν αν κπκέαν εαγκλέακυθν κθν λσπκν ζ δ κυλΰέαμν κυν element. κναεσζκυγκνπαλϊ δΰηα,νϋξκυη Ν βζυ δν βθνδ δσ β αν attribute θανϋξ δν δηάνdemo.html κνelement a <a href="demo.html">simple</a> ΣαΝattribute έθαδν βμνηκλφάμνσθκηανον δηάέ ΗΝ δηάνηπκλ ένθανηβθν έθαδναθϊη αναπσν δπζϊν δ αΰπΰδεϊναθν θνπ λδϋξ δνε θϊνάνεϊπκδκνξαλαε άλανσππμν ξρ εέζπέ ΟδΝ φυζζκη λβ ΫμΝ έθαδν αυ κέν πκυν γαν π ι λΰα κτθν κν HTML ΫΰΰλαφκΝ εαδν γαν κν η α λϋοκυθν Ν ΫθαΝ DOM (Document Object Model) Ϋθ λκ,ν κν κπκέκν έθαδν βν αθαπαλϊ α βν κυν ΰΰλΪφκυΝ βν ηθάηβέν ΣαΝ DOM Ϋθ λαν π λδϋξκυθν πκζζϊν έ βν απσν εσηίκυμν σππμν DocumentType, Element,Ν TextΝ εέζπέν ΣκΝ HTML απσ πα ηαν πκυν παλκυ δϊ αη Ν βθν αλξάν βμν θσ β αμν γαν Ϋξ δν κν αεσζκυγκνdom Ϋθ λκέν δεσθα 5μ ΠαλΪ δΰηα DOM Ϋθ λου (W3C, 2014α) ΌππμΝίζΫπκυη ΝβΝλέααΝ έθαδνϋθανhtml element κνκπκέκνπ λδϋξ δνϋθανhead element, ΫθαΝbody element εαδν ΫθαΝ εσηίκν text. κν παλαπϊθπν Ϋθ λκν ίζϋπκυη Ν σ δν υπϊλξκυθν εαδν ΪζζκδΝ εσηίκδν text π δ άνκνhtml ευ δεαμνπ λδϋξ δνξαλαε άλ μναζζαΰάμνΰλαηηάμνεαδνε θκτνχw3c, 2014α). μν κτη ΝζέΰκΝπδκΝαθαζυ δεϊν αν Ϊ δαναθϊζυ βμνχparsing) θσμνhtml ΰΰλΪφκυέΝΗΝ έ κ κμν βν δα δεα έαν απκ ζ έ αδν απσν ΫθαΝ λ τηαν (stream) απσν Unicode ξαλαε άλ μ,ν πκυν έθαδν κν HTML Ϋΰΰλαφκ. ΗΝ έ κ κμν αυ άν γαν π λϊ δν απσν κν Ϊ δκν tokenization κν κπκέκν η Ν ζ ε δεάν αθϊζυ βν γαν ξπλέ δν βθν έ κ κν Νtoken (start tags, end tags, attribute names, attribute values). ΣαΝtoken αυ ΪΝγαΝ 8

16 κγκτθν κθνtree Constructor κνκπκέκμνγανεα α ε υϊ δν κναθ έ κδξκ Ϋθ λκένηνϋικ κμναυ κτν έθαδν ΫθαΝobject Document. π δ άν σηπμν υπϊλξκυθν π λδπ υ δμ δμν κπκέ μ αν κηϋθαν πκυν έθαδν αθν έ κ κμν κν Ϊ δκνtokenizer θανπλκϋλξκθ αδναπσνεϊπκδκνscript βθνπζ υλϊν κυνπ ζϊ β,νΰδαν κνζσΰκναυ σνυπϊλξ δν κνίάηανscript Execution ΧWγω,Νβί1ζίΨ. δεσθα 6: HTML5 parsing (W3C, 2014ί) μν κτη Ν ΫθαΝ απζσν παλϊ δΰηαν βηδκυλΰέαμν κυν Ϋθ λκυέν html ευ δεαμ πν σ δν Ϋξκυη Ν κθν αεσζκυγκν <body> <p>this is a sample test document.</p> a <em> b <address> c </em> d </address> e </body> ΟΝ Internet Explorer γαν βηδκυλΰά δν κν αεσζκυγκν Ϋθ λκ, σπκυν πέξέν κν tag <p> έθαδν παδ έν κυν<body> εέζέπν(houssami, 2013). 9

17 δεσθα 7: Ϋθ λο DOM απσ οθ Internet Explorer (Houssami, 2013) έα element βθν θσ β αναυ άνπαλκυ δϊακυη Ν ανθϋανelements πκυνπαλκυ δϊ βεαθνη Ν βθνhtml5. SectionμΝ ξλβ δηκπκδ έ αδν ΰδαΝ θαν κηα κπκδά δν γ ηα δεϊν έ δκν π λδ ξση θκ,ν υθάγπμν εϊ πν απσν πδε φαζέ μν σππμν αν elementsν h1,ν hβ,ν hγ,ν hζ,ν hη,ν andν hθέν Καγκλέα δν βν κηάν κυν ΰΰλΪφκυέ ArticleμΝΝαθ δπλκ ππ τ δνϋθαναθ ιϊλ β κνεκηηϊ δν κυνπ λδ ξκηϋθκυν θσμν ΰΰλΪφκυ,Ν σππμνηδανεα αξυλβ βν κνblog άνϊλγλκν φβη λέ αμέ MainμΝ αθ δπλκ ππ τ δν κν ετλδκν π λδ ξση θκν κυν υηα κμν θσμν ΰΰλΪφκυΝ άν ηδαμν φαληκΰάμέ AsideμΝαθ δπλκ ππ τ δνϋθανεκηηϊ δν κυνπ λδ ξκηϋθκυνπκυν ξ έα αδνζδΰσ λκ η Ν βθν υπσζκδπβν ζέ α,νπέξένϋθανη θκτν πδζκΰυθ. Header: αθ δπλκ ππ τ δν ΫθαΝ κδξ έκν ΰδαΝ απ δεσθδ βν δ αΰπΰδεκτν π λδ ξκηϋθκυν άν ίκβγάηα κμνπζκάΰβ βμ. Footer: απ δεκθέα δ κ υπκ Ϋζδ κ Ϋθα section εαδ ηπκλ έ θα π λδϋξ δ πζβλκφκλέ μ σππμ κθ υΰΰλαφϋα, copyright εέζπέν Nav: έθαδν κν ηάηαν κυν ΰΰλΪφκυΝπκυΝξλβ δηκπκδ έ αδνΰδανη θκτνπζκάΰβ βμέν Figure: αθ δπλκ ππ τ δν εϊπκδκν π λδ ξση θκνλκάμ,ν πλκαδλ δεϊν η Ν ηδανζ αϊθ α,νπκυν έθαδν αυ σθκηαν ΧσππμΝ ηδαν πζάλβν πλσ α βψν εαδν υθάγπμν αθαφϋλ αδν πμν ηέαν θδαέαν ηκθϊ αναπσν βθνετλδανλκάν κυν ΰΰλΪφκυέ ΓδαΝπαλΪ δΰηαμ <figure> <video src="example.webm" controls></video> <figcaption>example</figcaption> </figure> Σκ figcaption ηπκλ έ θα ξλβ δηκπκδβγ έ αθ ζ αϊθ α εαδ έθαδνπλκαδλ δεσέν 10

18 Template: ηπκλ έν θαν ξλβ δηκπκδβγ έν ΰδαΝ θαν βζυ δν ηάηα αν βμν HTML πκυν ηπκλκτθνθανεζπθκπκδβγκτθνεαδνθαν δ αξγκτθν κνϋΰΰλαφκνη Ν βνίκάγ δαν θσμνscript. video and audio ΰδαΝπ λδ ξση θκνπκζυηϋ πθέ ΚαδΝκδΝ τκνπλκ φϋλκυθνϋθανχpi,νυ Ν πλκΰλαηηα δ ΫμΝ φαληκΰυθν WebΝ θαν ηπκλκτθν θαν βηδκυλΰά κυθν βν δεάν κυμν δ παφάν ξλά βν άν θαν ξλβ δηκπκδά κυθν βθν ά βν υπϊλξκυ αέν π δ ά,ν σζκδν κδν φυζζκη λβ ΫμΝ θν υπκ βλέακυθν σζκυμν κυμν τπκυμν πκζυηϋ πθ,ν ηπκλ έν θαν ΰέθ δν ξλά δν πκζζαπζυθν κδξ έπθν sourceν ηϋ αν Ν αυ ΪΝ αν κδξ έα, αθν υπϊλξ δν κν αθ έ κδξκμν πσλκμν Χαλξ έκν άξκυ,ν ίέθ κψν παλαπϊθπν απσν ηέαν φκλϋμ εαδν κν φυζζκη λβ άμνγανξλβ δηκπκδά δν κνπλυ κνπκυν έθαδν υηία σέ TrackμΝΰδαΝ βθναθαπαλαΰπΰάν ιπ λδευθναλξ έπθνε δηϋθκυνχσππμνυπσ δ ζκδψνη Νvideo element. Embed: ΰδαΝ βθν θ πηϊ π βν δα λα δεκτν π λδ ξκηϋθκυν ΰδαΝ κν κπκέκν απαδ έ αδν βν ξλά βνplugin. Mark: πδ άηαθ βνε δηϋθκυν ΝΫθαΝΫΰΰλαφκέ <pρδο α ό ή υ α γ α ο <mark>mark</mark></p> progress αθαπαλδ ΪΝΰλαφδεΪΝ βθνπλσκ κνΰδαν βθνκζκεζάλπ βνηδαμν δ λΰα έαμέ θνβν δα δεα έαν απαδ έν Ϊΰθπ κν ξλσθκν έξθ δν σ δν ΰέθ Ν πλσκ κμ,ν θυν σ αθν έθαδν π π λα ηϋθκυνξλσθκυν έξθ δνεα ΪΝπλκ Ϋΰΰδ βν βθνπλσκ κνπκυνϋξ δν ε ζ έέ Downloading progress: <progress value="22" max="100"> </progress> Meter: αθ δπλκ ππ τ δν ηδαν ηϋ λβ βν σππμν βν ξλά βν κυν έ εκυέν ΓδαΝ παλϊ δΰηαν κν αεσζκυγκν ηάηανευ δεανυανϋξ δν κνπαλαεϊ πναπκ Ϋζ ηα <h3>suggested groups</h3> <ul> <li> <p><a href="/group/comp.infosystems. mp.infosystems. <a href="/group/comp.infosystems. e">join</a></p> <p>group description: <strong>layout/presentation on the <p><meter value="0.5">moderate activity,</meter> Usenet, 618 subscribers</p> 11

19 </li> Time: ξλβ δηκπκδ έ αδνΰδαναπ δεσθδ βνβη λκηβθέαμνάνυλαμ. ruby, rt, εαδ rp: ΰδα βθ φπθβ δεά απ δεσθδ β ξαλαε άλπθέ bdi αθ δπλκ ππ τ δν ΫθαΝ εκηηϊ δν ε δηϋθκυν κν κπκέκν πλϋπ δν θαν δαξπλδ έν απσν κ υπσζκδπκνε έη θκνΰδαν βθνπ λέπ π βνε δηϋθκυνη Ν δαφκλ δεσνπλκ αθα κζδ ησέ ΓδαΝ παλϊ δΰηανπαλκυ δϊακυη Ν κθναεσζκυγκνευ δεανεαδν κναπκ Ϋζ ηαμ <p dir=auto class="u1"><b><bdi>student</bdi>:</b> How do you write "What's your name?" in Arabic?</p> <p dir=auto class="u2"><b><bdi>teacher</bdi>:</b> ما <ا سمك /p> wbr: αθ δπλκ ππ τ δν ΝΫθαΝε έη θκν βν υθα σ β ανΰδαναζζαΰάνΰλαηηάμ κν βη έκν πκυνϋξ δν κπκγ βγ έ. ΓδαΝπαλΪ δΰηανκναεσζκυγκμνευ δεαμνγανϋξ δν βθνϋικ κμ <p>this is a veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery veryvery<wbr>longwordthatwillbreakatspecific<wbr>placeswhenthebr owserwindowisresized.</p> θν υλανηδελτθκυη Ν κνπαλϊγυλκν κυνφυζζκη λβ άνβν δλϊν πθνΰλαηηϊ πθνγαν πϊ δν αν βη έανπκυνϋξ δν κπκγ βγ έν κνwbr. Canvas: κδξ έκ ΰδα βθ απ δεσθδ β ΰλαφδευθ bitmap η βθ ξλά β scripts, ηπκλ έ θα ξλβ δηκπκδβγ έ ΰδα ΰλαφάηα α, παδξθέ δα ε.α is used for rendering dynamic bitmap graphics on the fly, such as graphs or games. 12

20 DatalistμΝηααέΝ η Ν κνεαδθκτλΰδκν κδξ έκνinput list ηπκλκτθνθανξλβ δηκπκδβγκτθνΰδαν βθν βηδκυλΰέαν combo boxesέν ΓδαΝ παλϊ δΰηαν κν αεσζκυγκμν ευ δεαμν γαν Ϋξ δν αθν απκ Ϋζ ηαμ <input type="url" name="location" list="urls"> <datalist id="urls"> <option label="mime: Format of Internet Message Bodies" value=" <option label="html 4.01 Specification" value=" <option label="form Controls" value=" <option label="scalable Vector Graphics (SVG) 1.1 Specification" value=" <option label="feature Sets - SVG " value=" <option label="the Single UNIX Specification, Version 3" value=" </datalist> KeygenμΝ απ δεκθέα δν ΫθαΝ κδξ έκν ζϋΰξκυν ΰδαΝ βθν Ϋε κ βν δ δπ δεκτ- βηκ έκυν εζ δ δκτ,νηπκλ ένθα ξλβ δηκπκδβγ ένΰδανπδ κπκδά δμ represents control for key pair generation. Output: απ δεκθέα δν κναπκ Ϋζ ηαν θσμνυπκζκΰδ ηκτ. ΓδαΝπαλΪ δΰηα,νκναεσζκυγκμν ευ δεαμνγανϋξ δν αθναπκ Ϋζ ηαμ <input name="a" type="number" step="any"> + <input name="b" type="number" step="any"> = <output name="o"></output> ΣκΝ κδξ έκνinput Ϋξ δνκλδ ηϋθανθϋανattribute. o Tel: π έκνε δηϋθκυνΰδαν δ αΰπΰάναλδγηυθν βζ φυθκυ o SearchμΝπ έκνε δηϋθκυνΰδανσλκυμναθααά β βμ 13

21 o o o o o o o urlμνπ έκνε δηϋθκυνΰδαν δ αΰπΰάν θσμνurl π έκνε δηϋθκυνΰδαν δ αΰπΰάν θσμν ένγέθ αδνϋζ ΰξκμΝ πθνεαθσθπθν κυν . Date: κδξ έκν ζϋΰξκυνΰδαν πδζκΰάνβη λκηβθέαμ TimeμΝ κδξ έκν ζϋΰξκυνΰδαν βθν πδζκΰάνυλαμ NumberμΝ π έκν ε δηϋθκυν ΰδαΝ δ αΰπΰάν αλδγηκτέν ΤπΪλξκυθΝ π λδκλδ ηκέν ΰδαΝ κθναλδγησνεαδνεαθσθ μνΰδαν κυμναλδγηκτμνεδθβ άμνυπκ δα κζάμέ RangeμΝ βηδκυλΰ ένslider η Νπ λδκλδ ηκτμνΰδαν κνίάηαέ ColorμΝ κδξ έκν ζϋΰξκυνΰδαν βθν πδζκΰάνξλυηα κμέ πέ βμν βθν HTML 5 ΫξκυθΝ πλκ κτη η λδεϊ απσ αυ Ϊ: γ έν εαδν αλε ΪΝ θϋαν attribute Ν υπϊλξκθ αν element. μ placeholder attribute: ηπκλ έ θα κλδ έ α input εαδ textarea elements. ΠαλΫξ δνηδαν ιάΰβ βνΰδαν βνηκλφάνπκυνπλϋπ δνθανϋξ δνβν έ κ κμ. required attribute: φαλησα αδ α elements input ( ε σμ αθ έθαδ hidden, image ά button σππμ κ submit), select εαδν textarea. Τπκ βζυθ δν σ δν κν ξλά βμν πλϋπ δν θαν υηπζβλυ δνηδαν δηά. input element: Ϋξ δ ηδα δλϊ απσ θϋα attributes ΰδα κθ εαγκλδ ησ π λδκλδ ηυθ: autocomplete, min, max, multiple, pattern εαδ step. textarea element:ϋξ δ α maxlength εαδν minlength ΰδα κθ εαγκλδ ησ κυ ηϋΰδ κυ/ ζϊξδ κυ ηάεκυμ εαδ κ wrap ΰδαΝ κθνϋζ ΰξκΝ βμναθα έπζπ βμέ form element: Ϋξ δ κ attribute novalidate πκυ ξλβ δηκπκδ έ αδ ΰδα θα απ θ λΰκπκδά δ κ validation βμνφσληαμνπλδθν βθνυπκίκζάέ Σα elements input εαδ button Ϋξκυθ α attribute formaction, formenctype, formmethod, formnovalidate, εαδ formtarget. θ υπϊλξκυθ σ παλαεϊηπ κυθ α action, enctype, method, novalidate, εαδ target attributes βμ φσληαμ. script element: Ϋξ δ Ϋθα θϋκ attribute κ async πκυ πβλ Ϊα δ β φσλ π β εαδ ε Ϋζ β κυ script. ol element: Ϋξ δ κ attribute reversed,ν κνκπκέκ γα κ βΰά δ βθ ηφϊθδ β βμ ζέ αμ η αθ έ λκφβ δλϊέ ΣΫζκμΝ υπϊλξκυθν εαδν εϊπκδαν attribute αν κπκέαν ΫξκυθΝ εα αλΰβγ έν ΰδα έν βν ζ δ κυλΰέαν κυμν ηπκλ ένθανΰέθ δνεαζτ λανηϋ αναπσν βνcss άνΰδα ένβνζ δ κυλΰέαν κυμνεα Ϋ λ φ Ν βθν υξλβ έανεαδν πλκ ία δησ β α αέ basefont big center font strike tt frame frameset noframes 14

22 3.1.2 JavaScript Εισα ω ή Η JavaScript ά αθ απκ Ϋζ ηα βμ απσ εκδθκτ πλκ πϊγ δαμ βμ Netscape Communications Cosporation εαδ βμ Sun Microsystems Inc. ηφαθέ βε,ν βθν Ϋε κ βν 1έί,Ν Ν κν 1λληΝ η Ν βθν αυ σξλκθβν ηφϊθδ βνεαδν κυνφυζζκη λβ άνnetscape Navigator. ΠλδθΝ πλκξπλά κυη Ν βθν παλκυ έα βν βμν ΰζυ αμ,ν πλϋπ δν θαν ι εαγαλέ κυη Ν σ δν βν JavaScript εαδν βν Java έθαδν τκν δαφκλ δεϋμν ΰζυ μέν ΗΝ Java έθαδν ηδαν πζάλβμν ΰζυ αν πλκΰλαηηα δ ηκτνπκυνπλϋπ δνθανη αΰζπ δ ένπλδθν ε ζ έ,ν θυνβν JavaScript έθαδνπδκν τεκζβν βνξλά β,νπδκνΰλάΰκλβν βθν ε Ϋζ βνεαδν Νξλ δϊα αδνη αΰζυ δ βέν ΌππμΝΫξκυη ΝαθαφΫλ δν βνjavascript έθαδνηδανΰζυ αν script ία δ ηϋθβν Ναθ δε έη θαναπσν βθνπζ υλϊν κυνπ ζϊ βένμ Ν κθνσλκνία δ ηϋθβν Ναθ δε έη θαν θθκκτη Νσ δνβνjavascript ηπκλ έννθαν ξλβ δηκπκδά δν κδξ έαν πκυν κθκηϊακθ αδν αθ δε έη θαέν ΣαΝ αθ δε έη θαν αυ Ϊ,Ν Ν ία έακθ αδν Ν εζϊ δμ,νσππμνΰέθ αδνπέξέν βνjava. ΟΝ σλκμν απσν βθν πζ υλϊν κυν π ζϊ βν βηαέθ δν σ δν βν υΰε ελδηϋθβν ΰζυ αν λϋξ δν κν ζκΰδ ηδεσνπκυνξλβ δηκπκδ ένκνπ ζϊ βμνΰδανπλσ ία βν κν δε υαεσν σπκνεαδνσξδν κθνweb Server πκυν κθν ιυπβλ έέν βζα άν κν φυζζκη λβ άμν κυν π ζϊ β,ν δαίϊα δν εαδν δ ληβθ τ δν κθν ευ δεαν εαδν ηφαθέα δν αν απκ ζϋ ηα αν κθν π ζϊ βέν ΟδΝ υΰε ελδηϋθ μν ΰζυ μν ΫξκυθΝ δμν αεσζκυγ μν υθα σ β μ ΝαΝΫξκυθΝπλσ ία βν Ν δ δεϋμνζ δ κυλΰέ μν θσμνπαλαγτλκυν κυνφυζζκη λβ άέν ΝαΝ πδευλυθκυθν πζβλκφκλέ μν πλδθν απκ αζκτθν Ν ΫθαΝ πλσΰλαηηαν απσν βθν πζ υλϊν κυν δαεκηδ άέ ΣαΝαπκ ζϋ ηα αν ηφαθέακθ αδναηϋ πμν κνξλά βέ ΣαΝη δκθ ε άηα αν πθν υΰε ελδηϋθπθνΰζπ υθν έθαδμ ΛσΰπΝ π λδκλδ ηυθν α φϊζ δαμ,ν υθάγπμν θν ΫξκυθΝ βν υθα σ β αν πλσ ία βμν Ν αλξ έαν κνηβξϊθβηαν κυνπ ζϊ βέ πβλ Ϊακθ αδν απσν παλαηϋ λκυμν κυν κπδεκτν π λδίϊζζκθ κμ,ν ΰδαΝ παλϊ δΰηαν αθν βν βη λκηβθέαν κυν υπκζκΰδ άν έθαδν ζϊγκμ,ν αν JavaScript λκζσΰδαν γαν έξθκυθν ζϊγκμν βη λκηβθέαέ Ν ηπκλ έν θαν Ϋξ δν πλσ ία βν Ν κηϋθαν πκυν έθαδν απκγβε υηϋθαν Ν ηδαν Ϊ βν κηϋθπθν κθνκ θ λδεσντπκζκΰδ άέ 15

23 δεσθα 8: Server side VS Client Side (Green Goo, 2010)... ύ αη ΓδαΝ θαν δ Ϊΰκυη Ν θ κζϋμν JavaScript Ν ΫθαΝ αλξ έκν HTML πλϋπ δν θαν δμν θ πηα υ κυη Ν αθϊη αν Ν δεϋ μν<script> </script>. ΟδΝ δεϋ μναυ Ϋμ,ΝζΫθ Ν κθνφυζζκη λβ άνπκυναλξέα δνεαδν πκυν ζ δυθ δνκνευ δεαμν βμνjavascript ηϋ αν κνhtml ΫΰΰλαφκέΝΟ δ άπκ Ν έθαδναθϊη αν Ναυ ΫμΝ δμν δεϋ μνγαν ε ζ ένεαδν κναπκ Ϋζ ηανγαν ηφαθδ έν βθνκγσθβν κυνπ ζϊ β,ν δαφκλ δεϊνκν φυζζκη λβ άμνγαν δμναθ δζβφγ έν αθναπζσνε έη θκνεαδνγαν δμν ηφαθέ δέ ΤπΪλξκυθΝ τκν λσπκδνπλκ γάεβμνευ δεανjavascriptν ΝηδαΝώTεδΝ ζέ αμ Μ Ν ξλά βν πθν δε υθν <script> εαδν κπκγϋ β βν κυν ευ δεαν ηϋ αν βθν HTML ζέ αν έ Ν κν ηάηαν<head> έ Ν κν ηάηαν<body> Μπκλ ένθανΰλαφ έν ΝΫθαΝι ξπλδ σναλξ έκ,νη Νεα ΪζβιβΝjs σπκυν ΝγαΝπ λδϋξκθ αδν κδν δεϋ μνscript. ΣκΝαλξ έκναυ σν κν θ πηα υθκυη Ν κνhtml αλξ έκνη Ν βνξλά βν βμναεσζκυγβμν θ κζάμμνξscript srcο myfile.js ρξήscript>. μν κτη ΝΫθαΝαπζσΝπαλΪ δΰηα, η Ν βνξλά βν κυνπλυ κυν λσπκυ: <html> < body> < pρμ α πα άγ αφο </p> <script type="text/javascript"> //... ώδ α javascript... 16

24 document.write( JavaScript Code )ν < /script> </body> </html> ΌππμΝ ίζϋπκυη Ν κδν θ κζϋμν JavaScript ζ δυθκυθν η Ν ζζβθδεσν λπ βηα δεσ,ν σππμν εαδν κδν θ κζϋμν βμνΰζυ αμνc. κνπαλϊ δΰηαναυ σνεαζκτη Ν βνηϋγκ κνdocument.write η Ν βνίκάγ δαν βμν κπκέαμν ηπκλκτη Ν θαν ηφαθέ κυη Ν ηδαν αεκζκυγέαν ξαλαε άλπθν βθν κγσθβέν Όζ μν κδν αεκζκυγέ μν ξαλαε άλπθνπλϋπ δνθανπ λδεζ έκθ αδναθϊη αν Ν δπζϊν δ αΰπΰδεϊέ ζϋπκυη Ν πέ βμν σ δν ΰδαΝ θαν κπκγ ά κυη Ν ξσζδαν Ν ηδαν ΰλαηηάΝ κυν ευ δεϊν ηαμν ξλβ δηκπκδκτη Ν ΫθαΝ α υΰϊλδν εαγϋ πθν πλδθν απσν κν ξσζδκέν Ό δν αεκζκυγ έν κν α υΰϊλδν εαγϋ πθν εαδν ηϋξλδν κν ΫζκμΝ βμν ΰλαηηάμΝ γ πλ έ αδν ξσζδκέν ΤπΪλξ δν βν υθα σ β αν θαν κλέ κυη Ν ξσζδκν πκζζυθν ΰλαηηυθΝη Ν βνξλά βν πθνή*ν*ήνχσππμν βνΰζυ ανc).... αβ η ές ΜδαΝ η αίζβ άν αθ δπλκ ππ τ δν άν π λδϋξ δν ηδαν δηάέν ΟδΝ η αίζβ Ϋμ βμν JavaScript έθαδν παλσηκδ μν η Ν αυ ΫμΝ πκυν ξλβ δηκπκδκτθ αδν αν ηαγβηα δεϊέν βζα ά,ν έθκυη Ν ΫθαΝ σθκηαν Ν ηδαν η αίζβ άνεαδνεα σπδθν βμν έθκυη Ν δηϋμναθϊζκΰανη Ν βθναθϊΰεβέ ΓδαΝ θαν βζυ κυη Ν ηδαν η αίζβ ά,ν ξλβ δηκπκδκτη Ν βν ζϋιβν var βν κπκέαν θβη λυθ δν κν φυζζκη λβ άνσ δν κνε έη θκνπκυναεκζκυγ έν έθαδν κνσθκηανηδαμνη αίζβ άμνπέξέ var sum; Μ Ν βθν θ κζάναυ άνκλέ αη Ν βνη αίζβ άνsum βνκπκέαν θνϋξ δναεσηαν δηάένσδηϋμνηπκλκτη Ν θαν υ κυη Ν ΝηδαΝη αίζβ άνσ αθν βν βζυθκυη ΝάΝαλΰσ λαν κνscript η Ν κθναεσζκυγκν λσπκμ sum = 0; ΘαΝ πλϋπ δν θαν κγ έν δ δαέ λβν πλκ κξάν εα ΪΝ βθν πδζκΰάν κυν κθσηα κμν ηδαμν η αίζβ άμένην JavaScript έθαδν case sensitive αν κθσηα αν βζα άν γ πλ έν δαφκλ δεϊν αν ε φαζαέαν απσν αν π αϊν ΰλΪηηα αν κν σθκηαν βμν η αίζβ άμέν πέ βμ πλϋπ δν θαν απκφ τΰκυη Ν θαν αλξέακυη Ν κν σθκηαν η Ν αλδγησ,νθανπ λδϋξ δν δ δεκτνξαλαε άλ μνχσππμνπ$σνεέζπέψνάνθαν έθαδνεϊπκδαν η υηϋθβνζϋιβέ ΤπΪλξκυθΝ λ δμν τπκδν η αίζβ υθν κλέακυη Ν κθν τπκν βμνεα ΪΝ βν άζπ άν βμέ βν JavaScript, αθν εαδν βν έ δαν θν ηαμν αθαΰεϊα δν θαν λδγηκέμνηπκλ ένκδνη αίζβ ΫμΝθαΝπ λδϋξκυθναε λαέκυμ,νεδθβ άμνυπκ δα κζάμνεέζπέν υηίκζκ δλϋμμν ηπκλκτθν θαν π λδϋξκυθν ΰλΪηηα α,ν ζϋι δμ,ν ε θϊ,ν αλδγηκτμν τηίκζαν εέζπέν ΛκΰδεΫμμΝηπκλ ένθανϋξκυθν δηϋμνtrue άνfalse. 17

25 σ ές βθν θσ β αν αυ άν γαν παλκυ δϊ κυη Ν Ν ΫθαθΝ πέθαεαν κυμν ζ ΫμΝ πκυν ξλβ δηκπκδκτη Ν βθνjavascript. ΟδΝ ζ ΫμΝξπλέακθ αδν Ν λ δμνεα βΰκλέ μμναλδγηβ δεκέ,ν τΰελδ βμνεαδνζκΰδεκέέ Σ ζ άμ Π λδΰλαφά ΠαλΪ δΰηα λδγηβ δεκέ + Πλσ γ β - φαέλ β Πκζζαπζα δα ησμ * δαέλ β / % ΤπσζκδπκΝ δαέλ βμ ++, -- Μκθα δαέανατιβ βνήνη έπ β τΰελδ βμ == κνη === πσζυ κνέ κνχ δηάνεαδν τπκμψ!= δϊφκλκ > Μ ΰαζτ λκν < Μδελσ λκ >= Μ ΰαζτ λκνάν κ <= Μδελσ λκνάν κ Λκΰδεκέ && And Or! Not Πέθαεαμ 2μ Σ ζ Ϋμ JavaScript Ε ο ές ΟδΝία δεϋμν θ κζϋμ,νσππμνεαδν δμνπ λδ σ λ μνΰζυ μνπλκΰλαηηα δ ηκτνπ λδζαηίϊθκυθμ 18

26 θ κζϋμν ζϋΰξκυμν έθαδν βν θ κζάν πκυν ξλβ δηκπκδκτη Ν ΰδαΝ θαν ε ζϋ κυη Ν εϊπκδκν ηάηανευ δεανη ΝίΪ βνηδαν υθγάεβνάνΰδανθανΰέθ δνεϊ δνϊζζκναθναυ άνβν υθγάεβν θν δεαθκπκδ έ αδέν ΗΝ θ κζάν ζϋΰξκυν έθαδν βν if εαδν αηϋ πμν η ΪΝ αεκζκυγ έ αδν απσν βν υθγάεβν ζϋΰξκυναθϊη αν Νπαλ θγϋ δμέν ηϋ πμνη ΪΝ βν υθγάεβνεαδναθϊη αν Ν Ϊΰεδ λαν Χ{}ΨΝ πλϋπ δν θαν ΰλΪοκυη Ν δμν θ κζϋμν πκυν γϋζκυη Ν θαν ε ζϋ κυη Ν αθν βν υθγάεβν έθαδναζβγάμέν θνβν υθγάεβν έθαδνο υ άμ,νγαναΰθκβγ ένκνευ δεαμναυ σμνεαδν γαν ε ζ έν βν ΰλαηηάΝ κυν ευ δεαν η ΪΝ κν ιέν Ϊΰεδ λκέν βν υΰε ελδηϋθβν π λέπ π βνηπκλκτη ΝθαΝξλβ δηκπκδά κυη ΝηδαΝζΫιβΝεζ δ ένelse ΰδαΝθαΝπ λδΰλϊοκυη Ν δμν θ κζϋμνπκυνγϋζκυη ΝθαΝ ε ζ κτθναθνβν υθγάεβν έθαδνο υ άμέν if (sbutton = = "A" ) { alert ("Πα α ε ο ου π \'Α\'") alert ("Πα α ε ο ου π \'B\'") } else { } Μ λδεϋμνφκλϋμ,νηπκλ ένβνζκΰδεάν κυνπλκΰλϊηηα κμνθανηαμνκ βΰά δν βνξλά β,ν Ϋθγ πθν θ κζυθνif,ν βζα άνηδαν θ κζάνif ηϋ αν ΝηδαΝΪζζβέΝΜ Ν κθν λσπκναυ σν ηπκλκτη ΝθαΝεαγκλέ κυη ΝηδαΝθΫαΝ υθγάεβ,ναθνβναλξδεάν υθγάεβν έθαδνζϊγκμέ if (time < 10) { greeting = "Good morning"; } else if (time < 20) { greeting = "Good day"; } else { greeting = "Good evening"; } θ κζϋμν παθϊζβοβμ ΧίλσξκδΨ: ΫθαμΝ ίλσξκμν έθαδν ΫθαΝ ηάηαν ευ δεα,ν κν κπκέκμν ηαμν πδ λϋπ δν θαν παθαζϊίκυη Ν ΫθαΝ τθκζκν θ κζυθν κλδ ηϋθ μν φκλϋμέν ΤπΪλξκυθΝ λέαν έ βνίλσξπθμ o for: βν κηάν κυνίλσξκυνfor έθαδνσππμνβναεσζκυγβν θ κζάν for (varname=1; varname<10; varname++) σππμνίζϋπκυη ΝηΫ αν δμνπαλ θγϋ δμνϋξκυη Ν λ δμνπλκ Ϊ δμνπκυνξπλέακθ αδν η Ν ζζβθδεσν λπ βηα δεσέν ΟδΝ πλκ Ϊ δμν αυ ΫμΝ ζϋθ Ν κν ίλσξκν πσ μν φκλϋμν πλϋπ δν θαν παθαζβφγ έέν ΗΝ πλυ βν πλσ α βν έθ δν αλξδεάν δηάν βν η αίζβ άν 19

27 κυν ίλσξκυέν ΗΝ πση θβν πλσ α βν θβη λυθ δ κν ίλσξκν πσ Ν θαν αηα ά δν βθν παθϊζβοβένην υθγάεβν Ναυ άν βθνπ λέπ π β,ν θβη λυθ δν κνίλσξκνσ δν σ κν βν η αίζβ άν Ϋξ δν δηάν ηδελσ λβν απσν 1ίΝ πλϋπ δν θαν ε ζ έ αδέν ΗΝ ζ υ αέανπλσ α βνεαγκλέα δν κθν λσπκνη Ν κθνκπκέκνγαναζζϊα δνβνη αίζβ άν κυν ίλσξκυέν βν υΰε ελδηϋθβν π λέπ π βν Ϋξκυη Ν εαγκλέ δν σ δν η ΪΝ απσν εϊγ Ν παθϊζβοβν γαν αυιϊθ αδν εα ΪΝ 1έΝ μν κτη Ν ΫθαΝ κζκεζβλπηϋθκν παλϊ δΰηαμ for (i= 1; i<4; i++) { alert ( " Η η i ε α " +i ) } o while: κνίλσξκμναυ σμν ε ζ ένϋθαθνϋζ ΰξκΝηδαμΝ υθγάεβμνεαδνσ κνβν υθγάεβν έθαδναζβγάμνκνίλσξκμν παθαζαηίϊθ αδένγδανπαλϊ δΰηαμ while (varname<11) ΗΝ θ κζάν αυ άν γαν ζϋΰξ δν βν η αίζβ άν varname εαδν σ κν αυ άν έθαδν ηδελσ λβναπσν11ν σ ΝγαΝ παθαζαηίϊθ δν δμν θ κζϋμναηϋ πμνη ΪΝ βνwhile. Όηπμ,ΝσππμΝπαλα βλκτη,νη Ν βθν θ κζάνwhile Ν βζυθ αδνηδανη αίζβ άν varname εαδνθαν βμναπκ έ αδναλξδεάν δηά,νσππμνΰέθ αδνη Ν βνfor. πέ βμν Ν έθ αδν κν λσπκμν η αίκζάμν βμν η αίζβ άμ,ν σππμν ΰέθ αδν η Ν βθν λέ βν πλσ α βν βμν θ κζάμν for. Γδ Ν αυ σν πλϋπ δν πλδθν απσν βθν θ κζάν while θαν βζυθκυη Ν βν η αίζβ άν πκυν γϋζκυη Ν θαν ξλβ δηκπκδά κυη Ν εαδν θαν βμν απκ έ κυη Ν αλξδεάν δηάέν πέ βμ,ν κν ηπζκεν πθν θ κζυθν πκυν παθαζαηίϊθκθ αδν η Ν βν while πλϋπ δν θαν π λδϋξ αδν βν θ κζάν ΰδαΝ βν η αίκζάν βμνη αίζβ άμέν μν κτη ΝΫθαΝκζκεζβλπηΫθκΝπαλΪ δΰηαμ var i=1; while (i<4) { alert(" Η η i ε α "+i ); i++; } o do while: βν θ κζάν αυ άν ηκδϊα δν πκζτν η Ν βθν πλκβΰκτη θβν θ κζάν η Ν ησθβν δαφκλϊ,ν σ δν κν ηπζκεν θ κζυθν γαν ε ζ έν κυζϊξδ κθν ηδαν φκλϊ,ν θυν βθν πλκβΰκτη θβν θ κζάν Χwhile) αθν βν υθγάεβν έθαδν false σ Ν κν ηπζκεν πθν θ κζυθν Ν γαν ε ζ έν εαηέαν φκλϊέν μν κτη Ν ΫθαΝ κζκεζβλπηϋθκν παλϊ δΰηαμ var i=1; do { alert(" Η η i ε α "+i ); i++; 20

28 } while (i<4) αρ ήσ ις ΜδαΝ υθϊλ β βν έθαδνϋθανηδελσνscript ηϋ αν ΝΫθαΝη ΰαζτ λκένον εκπσμν βμν έθαδνθαν ε ζ έν ηδαν λΰα έανχάνηδαν δλϊν λΰα δυθψένμαμνίκβγκτθνθανκλΰαθυθκυη Ν αν δϊφκλανηϋλβν θσμν script η Ν ίϊ βν δμν δϊφκλ μν λΰα έ μνπκυνπλϋπ δνθαν πδ υξγκτθέν ΓδαΝ θαν ηπκλϋ κυη Ν θαν ξλβ δηκπκδά κυη Ν ηδαν υθϊλ β βν πλϋπ δν θαν βν βζυ κυη έν υ σν ΰέθ αδν ΰλΪφκθ αμν κν σθκηϊν βμν εαδν κθν ευ δεαν πκυν π λδζαηίϊθ δέν ΗΝ άζπ βν ΰέθ αδν η Ν κθν αεσζκυγκν λσπκμν function Ό ο α υ ο ε ο η η (){ που ε ε ε η υ η η } ΌππμΝίζΫπκυη ΝΰλΪφκυη ΝαλξδεΪΝ βν η υηϋθβνζϋιβν function βνκπκέαναεκζκυγ έ αδνη Ν κν σθκηαν βμν υθϊλ β βμνεαδναθϊη αν δμνπαλ θγϋ δμν κναθνγαν Ϋξ αδνκλέ ηα ανάνσξδέν θϊη αν αν Ϊΰεδ λανΰλϊφκυη Ν δμν θ κζϋμνπκυνπ λδζαηίϊθ δέν μν κτη ΝΫθαΝπαλΪ δΰηαμ function print_bold() { documentέwrite( <BρThis is bold text<ήbρ )ν } ΓδαΝ θαν εαζϋ κυη Ν βθν παλαπϊθπν υθϊλ β β,ν ηπκλκτη Ν θαν ΰλΪοκυη Ν κν σθκηϊν βμν αεκζκυγκτη θκναπσν δμνπαλ θγϋ δμνεαδν κν ζζβθδεσν λπ βηα δεσ,ν βζα άνprint_bold(); μν κτη,ν υλα,ν πυμν ηπκλκτη Ν θαν π λϊ κυη Ν παλαηϋ λκυμν Ν ηδαν υθϊλ β βέν π σ δν γϋζκυη ΝθαΝ υ κυη Ν βν υθϊλ β βν τκναλδγηκτμ,ν κυμνκπκέκυμνθανπλκ γϋ δνεαδνθανηαμν πδ λϋο δν κναπκ Ϋζ ηαέν function add(var1, var2) { var result = var1 + var2; return result; } ΌππμΝίζΫπκυη,ΝαθΪη αν δμνπαλ θγϋ δμ,νϋξκυη ΝΰλΪο δν ανκθσηα αν τκνη αίζβ υθνvar1 εαδνvar2, ανκπκέανσ αθνεαζϋ κυη Ν βθν υθϊλ β βνγανπϊλκυθνη Ν δμν δηϋμνπκυνγϋζκυη ένμϋ αν βν υθϊλ β βνϋξκυη Ν βζυ δν βνη αίζβ άνresult,νβνκπκέανδ ξτ δνησθκνεα ΪΝ βν δϊλε δανπκυν ε ζ έ αδν βν υθϊλ β βένην ζ υ αέαν θ κζάν έθαδνβνreturn result βνκπκέαν θβη λυθ δν βν υθϊλ β βνσ δνβν δηάν βμνη αίζβ άμνresult πκυνυπκζσΰδ,νπλϋπ δνθαναπκ αζ ένπέ πν κνscript πκυν βθνεϊζ έν μν κτη Ν ΫθαθΝ λσπκνεζά βμν βμμ 21

29 res = add(2,3); Μ Ν βθν θ κζάναυ άνηϋ αν κν script,νγανεαζϋ κυη Ν βν υθϊλ β βν add έθκθ αμν βθν δηάνβν βν η αίζβ άν var1 εαδν βθν δηάν γν βν η αίζβ άν var2. ΣκΝ απκ Ϋζ ηαν βμν πλσ γ βμν γαν πδ λϋο δ,νη ΪΝ βθνκζκεζάλπ βν βμν υθϊλ β βμνεαδνγαν έθαδνβν δηάν βμνη αίζβ άμνres CSS Εισα ω ή Όππμ αθαφϋλαη Ν κν βέβέγν κν CSS ηαμν ίκβγϊν θαν κλέακυη Ν τεκζαν εαδν η Ν αφάθ δαν κθν λσπκνπκυνγαναπ δεκθέακθ αδν αν κηϋθανηαμν ΝηδαΝδ κ ζέ α,ναθ ιϊλ β αναπσν κνφυζζκη λβ άέ μν κτη Ν ανπζ κθ ε άηα ΪΝ κυν Ν τΰελδ βνη Ν δμνπαλα κ δαεϋμνηκλφκπκδά δμνhtml: Μ ΰαζτ λβ υ ζδιέαέ Μ Ν κν CSS ηπκλκτη Ν θαν πδ τξκυη Ν ηκλφκπκδά δμ κδ κπκέ μ ά αθ α τθα μ ά πκζτ τ εκζκν θαν ΰέθκυθ η βθ εζα δεά HTML. υεκζσ λβ υθ άλβ β πθ δ κ ζέ πθέ Μ Ν κν CSS ηπκλκτη Ν θαν ζϋΰξκυη Ν βθν ηφϊθδ β θσμ κζσεζβλκυ δε υαεκτν σπκυν απσν Ϋθα ησθκ ιπ λδεσ αλξ έκ. δ, ε λ έακυη Ν Ν ξλσθκν εαδν Ν εσπκ,ν αφκτν εϊγ αζζαΰά κ υζ βμ δ κ ζέ αμ ΰέθ αδ η ηδα ηκθα δεά αζζαΰά κν ιπ λδεσναλξ έκνcss εαδνσξδν ΝεΪγ Ναλξ έκνhtml. Μδελσ λκ ηϋΰ γκμ αλξ έπθν εαδν δε υαεκτν σπκυ,ν φσ κθν κδν ηκλφκπκδά δμν ΰλΪφκθ αδνηδανφκλϊν ΝΫθαΝ ιπ λδεσναλξ έκνεαδνσξδν ΝεΪγ Ναλξ έκνhtml. Καζτ λκ SEO (Search engine optimization). ΟδΝ ηβξαθϋμν αθααά β βμν ΫξκυθΝ πλσ ία βν κνπ λδ ξση θκν κυν δε υαεκτν σπκυέν Γλβΰκλσ λ μ ζέ μέ Μ Ν βνξλά βν ιπ λδεκτνcss αλξ έκυ,νκνφυζζκη λβ άμνσ αθν εα ίϊ δν εϊπκδαν ζέ αναπσν κν δε υαεσν ηαμν σπκν απκγβε τ δν εαδν κν CSS αλξ έκν βθνηθάηβν κυνεαδν Νξλ δϊα αδνθαν κνεα ίϊ δνεϊγ ΝφκλΪέ 3... ύ αη ΗΝ τθ αιβν κυνcss Ϋξ δν βθναεσζκυγβνηκλφάμ selector { property1: value1; property2: value2; property3: value3; } σπκυ κ selector κνκπκέκμν ξ έα αδνη Ν κν δνγϋζκυη ΝθαΝηκλφκπκδά κυη,ν κνproperty έθαδν κν ξαλαε βλδ δεσν κυν ( βζα άν πυμν γϋζκυη Ν θαν ηκλφκπκδά κυη ΨΝ εαδν κν value έθαδν βν δηάν πκυν γϋζκυη ΝθαΝπΪλ δν κνproperty. 22

30 Μ Ν κν selector εαγκλέακυη Ν πκδαν ηκλφϋμνπκυνηπκλ ένθανπϊλκυθμ κδξ έαν γαν ηκλφκπκδά κυη έν μν κτη Ν δμν πκδκν απζϋμν *Ν μν σ αθν κν selector έθαδν *,Ν σ Ν κδν δ δσ β μν κυν εαθσθαν γαν φαληκ κτθν Ν εϊγ Ν κδξ έκν βμν ζέ αμέν κδξ έκμνσ αθνκνselector έθαδνεϊπκδκν σθκηανhtml tag,ν σ ΝκδΝ δ δσ β μν κυνεαθσθαν φαλησακθ αδν Ν εϊγ Ν Ϋ κδκν tag ηϋ αν κν html ΫΰΰλαφκέΝ ΓδαΝ παλϊ δΰηαν αθν κν selector Ϋξ δ δηάνh1 σ ΝκδΝδ δσ β μνπκυνϋξκυη Νεαγκλέ δνγαν φαληκ κτθν ΝεΪγ Ν tag Η1Ν κν HTML ΫΰΰλαφκέΝ θν κν selector Ϋξ δν δηάν BODY σ Ν κδν δ δσ β μν γαν φαληκ κτθν ΝκζσεζβλβΝ βν ζέ αέ έσθκηα_εζϊ βμμν σ αθν κν σθκηαν κυν selector αλξέα δν η Ν ζ έαν ΧέΨΝ σ Ν κδν δ δσ β μν φαλησακθ αδν ΝσζαΝ αν κδξ έαν κυνhtml ΰΰλΪφκυΝπκυΝΫξκυθΝ βθνδ δσ β ανclass δηάνέ βνη Ν κνσθκηα_εζϊ βμένγδανπαλϊ δΰηαναθνκνselector Ϋξ δν δηάν.emphasis σ Ν κδν δ δσ β μν γαν φαληκ κτθν Ν σζαν αν κδξ έαν βμν HTML πκυν ΫξκυθΝ classο emphashis έ κδξ έκέσθκηα_εζϊ βμμν έθαδν υθ υα ησμν πθν τκν παλαπϊθπν π λδπ υ πθέν ΓδαΝ παλϊ δΰηαν κν selector η Ν δηάν p.emphasis γαν φαληκ έν αν κδξ έαν html πκυν γαν έθαδν<p classο emphasis ρν έέν</p>. #σθκηα_id: σ αθν κν selector αλξέα δν η Ν ΠΝ σ Ν βηαέθ δν σ δν κδν δ δσ β ΫμΝ κυν γαν φαληκ κτθν Ν σζαν αν html tagν πκυν ΫξκυθΝ κλέ δν δ δσ β αν id η Ν δηάν έ βν η Ν σθκηα_id. Φ υ κεζϊ δμμν ξλβ δηκπκδκτθ αδν σ αθν γϋζκυη Ν θαν πδζϋικυη Ν εϊπκδ μν δ δσ β μν άν εα α Ϊ δμν θσμνhtml tag εαδνσξδν κνέ δκν κνhtml tag. ΓδαΝπαλΪ δΰηαμ o a:link: ξλβ δηκπκδ έ αδνΰδανtag τπκυνa Χ βζα άνΰδανυπ λ υθ Ϋ ηκυμψνπλδθνκν ξλά βμν κυμν πδ ε φγ έέ o a:visited: αφκλϊν υθ Ϋ ηκυμνπκυνκνξλά βμνϋξ δν πδ ε φγ έέν o κδξ έκμhoverμναφκλϊν κδξ έανσ αθνκνξλά βμνϋξ δν κνπκθ έεδν κυνπϊθπναπσν αυ Ϊέ o κδξ έκμfocusμν ξλβ δηκπκδκτθ αδν ευλέπμν ΰδαΝ κδξ έαν φκληυθν σ αθν πδζϋΰκθ αδνχκνξλά βμνεϊθ δνεζδεν Ναυ ΪΨέ selector1, selectorβν,ν μν σ αθ α κθσηα α πθ selector ξπλέακθ αδν η Ν,Ν σ Ν κδν δ δσ β μνγαν φαληκ κτθν ΝεΪγ Ν κδξ έκν κυνhtml ΰΰλΪφκυΝπκυΝεαγκλέα αδναπσν κθν πδζκΰϋα1νάν κθν πδζκΰϋαβνάν έ selector1 selectorβν έ selectorn: σ αθ κδ selector ΰλαφκτθ η ε θσναθϊη ΪΝ κυμ,ν σ Ν κδνδ δσ β ΫμΝ κυμνγαν φαληκ κτθν ΝεΪγ Ν κδξ έκν κυνhtml ΰΰλΪφκυΝπκυΝπζβλκέΝ δμν πλκςπκγϋ δμν κυνselectorn κνκπκέκμνπ λδϋξ αδνηϋ αν ΝΫθαθΝselectorn-1 ΝκΝκπκέκμΝ π λδϋξ αδν ΝΫθαθΝselector Ε σω ά ωση CSS σ HTML αρχ ία ΓδαΝθαΝξλβ δηκπκδά κυη ΝCSS ΝHTML αλξ έα,νυπϊλξκυθν τκν λσπκδμ inline: βν ηϋγκ κμν αυ άν ξλβ δηκπκδ έ αδν αθν γϋζκυη Ν θαν ηκλφκπκδά κυη Ν ησθκν ΫθαΝ κδξ έκν ΝΫθαΝαλξ έκν HTMLέΝΣσ Ν ΝγαΝξλβ δηκπκδά κυη Ν κθν selector,νκτ Ν δμν αΰετζ μνεαδνγανξλβ δηκπκδά κυη Ν βθνδ δσ β ανstyle βμνhtmlένγδανπαλϊ δΰηα,ναθν γϋζκυη Ν θαν εϊθκυη Ν αν ΰλΪηηα αν ηδαμν παλαΰλϊφκυν εσεεδθαν σ Ν γαν ΰλΪοκυη Ν <p styleο color:redν ρν έν ξήp>. ΤπΪλξ δν σηπμν π λέπ π βν σπκυν η Ν εϊπκδκν ΰ θδεσν CSS ΫξκυθΝ κγ έν υΰε ελδηϋθκδνεαθσθ μνηκλφκπκέβ βμν κνtag p εαδνυπϊλξ δν τΰελκυ βν εαθσθπθέν βθν π λέπ π βν αυ ά,ν βν HTML γαν πδζϋι δν θαν φαλησ δν κθν πδκν υΰε ελδηϋθκνεαθσθανχαυ σνπκυνξλβ δηκπκδ έν βθνδ δσ β ανstyle). π λδεσμν βθν π λέπ π βν αυ ά,ν ΰλΪφκυη Ν κυμν εαθσθ μν CSS πκυν αφκλκτθν ηδαν HTML ζέ αν βθναλξάν βμν ζέ αμν βμ,νηϋ αν κνtag <head> </head>. ΓδαΝθαΝ 23

31 ΰλΪοκυη Ν κυμν εαθσθ μν ξλβ δηκπκδκτη Ν κν tag style εαδν βθν δ δσ β ΪΝ κυν typeο text/css έν ΓδαΝ παλϊ δΰηαν γαν ηπκλκτ αη Ν θαν ΰλΪοκυη, αθν γϋζκυη Ν θαν ηκλφκπκδά κυη ΝσζαΝ ανtag p ηδαμνhtml ζέ αμνη ΝξλυηαΝηπζ μ <head> <style type= text/css ρ p { color:blue; } </style> </head> ιπ λδεσν αλξ έκν CSS: έθαδν εαδν βν πδκν κλγάν ξλά βν κυν CSS. Μ Ν κθν λσπκν αυ σ,ν ΰλΪφκυη ΝσζκυμΝ κυμνεαθσθ μν ΝΫθαΝαλξ έκνη Ν πϋε α βνcss ΧπέξέΝmycss.css)έΝΓδαΝθαΝ βζυ κυη Ν ΝΫθαΝHTML αλξ έκνσ δνγϋζκυη ΝθαΝξλβ δηκπκδά κυη Ν κν υΰε ελδηϋθκν css, ΰλΪφκυη Ν κναεσζκυγκν κνtag <head>. <link href="mycss.css" type="text/css" /> Μ Ν κθν λσπκναυ σνηπκλκτη ΝθαΝ θ πηα υ κυη ΝπκζζΪΝcss αλξ έαν ΝΫθαΝHTML. Πλκ λαδσ β αν κυμνεαθσθ μνγανϋξ δν κν ζ υ αέκνπκυν θ πηα υγβε έ... Βασι ές Ι ιό η ς βθν θσ β αν αυ ά,ν γαν παλκυ δϊ κυη Ν δμν ία δεϋμν δ δσ β μν ΰδαΝ βν ηκλφκπκέβ βν tag βμν HTML. λξέακυη Νη Ν δμνδ δσ β μνπκυναφκλκτθν βνηκλφκπκέβ βν κυνε δηϋθκυμ color: έθαδν κνξλυηαν κυνε δηϋθκυ,ναζζϊναθν θνκλέ κυη ΝξλυηαΝπ λδΰλϊηηα κμν σ Ν κν φυζζκη λβ άμν γαν ξλβ δηκπκδά δν κν ξλυηαν πκυν κλέ αη Ν αθν ε έη θκέν ΟδΝ δηϋμν πκυνηπκλκτη ΝθαΝκλέ κυη Ν ανξλυηα αν έθαδμ o η keyword: πέξνcolor:red; 24

32 δεσθα 9: keyword χλωηϊ ωθ (Mozilla, 2014) RGB ηκλφά π.ξ. color: rgb(128, 0,0); To ξλυηα αυ σ έθαδ maroon (dark red). o Ν εα ια δεάνηκλφάμνπέξένcolor: #ff801e; font-size: Υλβ δηκπκδ έ αδνΰδανθανκλέ δν κνηϋΰ γκμν βμνΰλαηηα κ δλϊμένμπκλκτη Ν θανκλέ κυη Ν κνηϋΰ γκμνη Ν δαφκλ δεκτμν λσπκυμνη Ν υθβγϋ λκυμμν ανpixel (fontsize:12px;) εαδν δμν δΰηϋμνχfont-size:12pt;). font-familyμν η Ν κθν λσπκν αυ σν κλέακυη Ν βν ΰλαηηα κ δλϊν πκυν γϋζκυη Ν θαν ξλβ δηκπκδά κυη έν π δ ά,νσηπμνυπϊλξ δνεέθ υθκμ,νθανηβθνυπϊλξ δνβνΰλαηηα κ δλϊν πκυνκλέ αη Ν κθνυπκζκΰδ άν κυνξλά β,νηπκλκτη ΝθαΝκλέ κυη ΝεαδΝ θαζζαε δεϋμν πδζκΰϋμέν font-style: η Ν βθνδ δσ β αναυ άνκλέακυη ΝαθΝΫθαΝε έη θκνγϋζκυη ΝθαΝ ηφαθδ έν η Ν ΰλΪηηα ανitalic, εαθκθδεϊνάνoblique. font-weight:εαγκλέακυη ΝαθΝ ανΰλϊηηα ΪΝηαμΝγαΝ έθαδνnormal άνbold. text-decoration: εαγκλέακυη ΝαθΝγΫζκυη ΝθαΝ φαλησ κυη ΝεΪπκδκΝ υΰε ελδηϋθκν φϋν σππμμ o none: ΚαθΫθα o underline: ΤπκΰλΪηηδ β o overline: Γλαηηά πϊθπ απσ κ ε έη θκ o line through: δαΰλϊηηδ β o blinkμν θαίκ ίάθ δν κνε έη θκ text-align: αφκλϊν βν κέξδ βν κυνε δηϋθκυνεαδνηπκλ ένθανπϊλ δν δηϋμμ o left o center o right o justify font: ηαμν πδ λϋπ δν θαν κλέ κυη Ν πκζζϋμν δ δσ β μν κυν ε δηϋθκυν ξλβ δηκπκδυθ αμν ησθκν αυ άέν ΘαΝ πλϋπ δν θαν πλκ Ϋικυη,Ν αθν θν κλέ κυη Ν εϊπκδαν δ δσ β α,ν σ Ν κν φυζζκη λβ άμν γαν κλέ δν βθν πλκ πδζ ΰηΫθβΝ δηάν ΰδαΝ βθν δ δσ β αν αυ άέν ΟδΝ πλκ πδζ ΰηΫθ μν δηϋμν έθαδμ o font-style: normal o font-weight: normal o font-size: medium o line-height: normal o font-family: αθϊζκΰανη Ν κθνυπκζκΰδ άν κυνξλά β o δλϊνϋξκυθνκδνδ δσ β μνπκυναφκλκτθν κνφσθ κμ 25

33 background colorμνξλβ δηκπκδ έ αδνΰδανθανκλέ κυη Ν κνξλυηαν κυνφσθ κυένσκνξλυηαν ηπκλ ένθανΰλαφ ένη Νκπκδκθ άπκ ΝαπσΝ κυμν λσπκυμνπκυνϋξκυη Νπ λδΰλϊο δέ background imageμν ξλβ δηκπκδ έ αδν ΰδαΝ θαν κλέ κυη Ν ηδαν δεσθαν πμν φσθ κέν ΓδαΝ παλϊ δΰηαν ηπκλκτη Ν θαν ΰλΪοκυη μν background-image: url(" y_color.png"); σπκυν κλέακυη Ν βθν δεσθαν κυν φσθ κυν θαν έθαδν βν δεσθαν mdn_logo_only_color.png πκυνυπϊλξ δν ΝΫθαΝ υΰε ελδηϋθκνurl. background repeat: ξ έα αδνη Ν βθνπλκβΰκτη θβνδ δσ β ανεαδναφκλϊναθνγϋζκυη ΝθαΝ παθαζαηίϊθ αδνεαδνπυμνβν δεσθαν κυνφσθ κυένοδν δηϋμνπκυνηπκλ ένθανπϊλ δν έθαδμ o no repeat: Καηέα παθϊζβοβ o repeat x: παθϊζβοβν κθ κλδασθ δκ Ϊικθα o repeat y: παθϊζβοβν κθ εϊγ κ Ϊικθα o repeat: Η δεσθα παθαζαηίϊθ αδ εαδ κλδασθ δα εαδ εϊγ α background position: ξλβ δηκπκδ έ αδνΰδανθανκλέ κυη ΝπκτΝγΫζκυη ΝθαΝ κπκγ βγ ένβν δεσθαν πκυν πδζϋιαη ΝΧ υθάγπμν σ αθνϋξκυη Ν πδζϋι δν θαν ηβθν παθαζαηίϊθ αδψέν ΟδΝ δηϋμνπκυνηπκλ ένθανπϊλ δν έθαδμ o left, center, right ΰδα βθνκλδασθ δα γϋ β βμ δεσθαμ o top, center, bottom ΰδα βθ εϊγ β γϋ β βμ δεσθαμ ΓδαΝπαλΪ δΰηαναθνΰλϊοκυη μ exampleone { background: url(" /startransparent.gif") #FFEE99 2.5cm bottom no-repeat; } ΘαΝΫξκυη Ν αθναπκ Ϋζ ηαμ background: έθαδν βν αθ έ κδξβν βμν font ΰδαΝ κν φσθ κέν Μ Ν βθν δ δσ β αν αυ άν ηπκλκτη Ν θαν κλέ κυη Ν πκζζϋμν δ δσ β μν Ν ηδαέν ΘαΝ πλϋπ δν θαν πλκ Ϋικυη,Ν αθν θν κλέ κυη ΝεΪπκδα,Ν σ ΝγαΝπΪλ δν βθνπλκ πδζ ΰηΫθβΝ δηάνπκυν έθαδμ o background-image: none o background-position: 0% 0% o background-size: auto auto o background-repeat: repeat o background-color: transparent εκζκυγκτθνκδνδ δσ β μνπκυναφκλκτθν ανπ λδΰλϊηηα αμ border-color: κλέα δν κνξλυηαν κυνπ λδΰλϊηηα κμέν 26

34 border-width: εαγκλέα δν κν πϊξκμν κυν π λδΰλϊηηα κμν εαδν η λδϋ αδν υθβγϋ λαν Ν pixel πέξένborder-width: 6px; border styleμν εαγκλέα δν κν υζν κυν π λδΰλϊηηα κμν εαδν ηπκλ έν θαν πϊλ δν ηδαν απσν δμν αεσζκυγ μν δηϋμμ Σδηά Ειάΰβ β ΠαλΪ δΰηα none ΚαθΫθαΝπ λέΰλαηηα solid ΰδα θαν βζυ δν ΫθαΝ υηπαΰϋμ π λέΰλαηηα, ηδαν θδαέανΰλαηηά dashed Π λέΰλαηηα πκυ απκ ζ έ αδ απσ πατζ μ dotted Π λέΰλαηηα πκυ απκ ζ έ αδ απσ double παλσηκδκν η Ν κν solid ησθκν πκυν κν π λέΰλαηηαν έθαδν δπζσ ζ έ μ π δεκθέα δνϋθανπζϊ δκνη Ν3D effect. ridge inset ΣκΝπ λέΰλαηηαν ηφαθέα αδνη Ν Ϋ κδκν λσπκνϋ δν υ Ν κν π λδεσνθανφαέθ αδνίυγδ ηϋθκ outset ΣκΝαθ έγ κν κυνπλκβΰκτη θκυ Πέθαεαμ 3: ΣδηΫμ border-style (Mozilla, Ϋ 2014) border: ηδαν υθ ση υ βνΰδαν θαν ηπκλκτη Ν θαν κλέ κυη Ν σζ μν δμν παλαπϊθπν δ δσ β μν η ΝηέαέΝ Οζκεζβλυθκθ αμν βθν παλκυ έα βν πθν ία δευθν δ δκ ά πθν γαν πλϋπ δν θαν αθαφϋλκυη Ν Ϊζζ μν λδμνία δεϋμνδ δσ β μμ 27

35 padding: ΰδαΝ θαν κλέ κυη Ν κν ε θσν η αιτν πθν κλέπθν θσμν κδξ έκυ εαδν πθν π λδ ξκηϋθπθν κυέν Μπκλκτη Ν θαν κλέ κυη Ν δαφκλ δεσν padding ΰδαΝ εϊγ Ν πζ υλϊν έθκθ αμν δηϋμν αν padding top, padding right, padding bottom, padding leftέν θν ΰλΪφαη Νpadding: 5%; γαν θθκκτ αη Νσ δνγϋζκυη ΝηΣΝpadding Νσζ μν δμνπζ υλϋμέν θυναθνΰλϊφαη Νpadding: 1em 3px 30px 5px; γαν θθκκτ αη Νσ δνγϋζκυη Ν1Νem βθν εκλυφά,νγpx ιδϊ,νγίνpx εϊ πνεαδνηνpx αλδ λϊέν margin: έθαδν ξ σθν κν αθ έγ κν κυν padding. ΘαΝ κλέ δν κν ε θσν πκυν γϋζκυη Ν θαν αφά κυη ΝαπσΝ κνσλδκν κυν κδξ έκυνεαδναπσναυ ΪΝπκυΝ κνπ λδίϊζζκυθένόππμ εαδ κ padding ηπκλκτη θα κλέ κυη margin top, margin right, margin bottom, margin left. width, height: Υλβ δηκπκδκτθ αδν ΰδαΝ θαν κλέ κυθν κν πζϊ κμν εαδν κν τοκμν θσμν κδξ έκυένοδν δηϋμνηπκλκτθνθαν κγκτθν έ Ν πέν βμν εα σνάν Νpixel. float: πδ λϋπ δν αν κδξ έανπκυνπ λδίϊζζκυθν κν κδξ έκν ΰδαΝ κνκπκέκν κλέ βε Ν κν float θανλϋκυθ λδΰτλπν κυέν ΟδΝ δηϋμνπκυνηπκλ έν θανπϊλ δν έθαδνleft, right εαδνnone. ΓδαΝ βθνεαζτ λβνεα αθσβ β,ναεκζκυγ ένϋθανπαλϊ δΰηαμν βθν δεσθανπκυναεκζκυγ έν υπϊλξκυθν λέανεσεεδθαν λϊΰπθαένσαν τκν έθαδνfloated left εαδν κν λέ κνfloated right. ΣκΝ τ λκν λϊΰπθκν πκυν Ϋΰδθ Ν floated left πβΰαέθ δν αν ιδϊν κυν πλυ κυέν θν πλκ γϋ αη Ν εδν ΪζζαΝ λϊΰπθαν γαν κπκγ κτθ αθν ιδϊν κυν ηϋξλδν θαν ΰ ηέ δν κν πζαέ δκνπκυν ανπ λδίϊζ δνεαδνθαν υθ ξέ κυθν βθν πση θβνΰλαηηά (Mozilla, 2014). δεσθα 10μ ΠαλΪ δΰηα float (Mozilla, 2014) 3.2 Σ α Σ α π υ α Οζκεζάλπ βν βμνϋλ υθαμνstateνofνtheνartν 30 Οζκεζάλπ βν βμναθϊζυ βμν κυνπλκίζάηα κμν 30 Οζκεζάλπ βν κυν ξ δα ηκτναθϊπ υιβμν βμνπ υξδαεάμν 30 Οζκεζάλπ βν βμνυζκπκέβ βμν κυν ξθδεκτνηϋλκυμν βμνπ υξδαεάμν 90 ζ ΰξκμΝζ δ κυλΰέαμν ξθδεκτνηϋλκυμν 5 υΰΰλαφάν θαφκλϊμν λΰα έαμν 30 ΤπκίκζάΝαέ β βμναιδκζσΰβ βμν λΰα έαμν 1 Πλκ κδηα έανπαλκυ έα βμναθαφκλϊμν 5 Παλκυ έα βμναθαφκλϊμν 1 28

36 γέβέ1νχλκθκ δϊΰλαηηαν λΰα έαμν(gantt chart) 29

37 4. Κ 4έ1 Μ Π υ α υ υπ α ΓδαΝ βθν πέζυ βν κυνπλκίζάηα κμ,νπλϋπ δναλξδεϊνθαναπκε ά κυη ΝεΪπκδ μνία δεϋμνΰθυ δμν βν υΰΰλαφάν δ κ ζέ πθν η Ν ξλά βν βμν HTML 5. Σαυ σξλκθαν σηπμ,ν ΰδαΝ θαν πδ τξκυη Ν βν ηκλφκπκέβ βν πκυν γϋζκυη Ν εαδν θαν πλκ γϋ κυη Ν παλαπϊθπν ζ δ κυλΰέ μν βθν πζ υλϊν κυν π ζϊ βν πλϋπ δνθαναπκε ά κυη Νΰθυ δμν βνcss εαδν βνjavascript. π δ ανπλϋπ δνθανεαγκλδ κτθνκδνπζβλκφκλέ μνπκυνγϋζκυη ΝθαΝπλκίΪζκυη Ναπσ κν δε υαεσν ηαμν σπκέν ΓδαΝ παλϊ δΰηα,ν πκδαν ηκυ δεϊν σλΰαθαν γαν αθαφϋλκθ αδ,ν δν πζβλκφκλέ μν γαν υπϊλξκυθν ΰδαΝ εϊγ Νηκυ δεσνσλΰαθκ,νπκδανεαδνπσ ανβξβ δεϊνεκηηϊ δανεαδνίέθ κνγανξλβ δηκπκδά κυη έ ε σμναπσν κνπ λδ ξση θκ,νπκυναθαφϋλαη,νπλϋπ δνθανπλκ Ϋικυη ΝκΝ δε υαεσμνηαμν σπκμνθαν έθαδν φδζδεσμν πλκμν κν ξλά βν εαδν κδν πδ εϋπ μν ηαμν θαν ηπκλκτθν θαν ίλκυθν τεκζαν εαδν τθ κηαν δμν πζβλκφκλέ μνπκυναθααβ κτθέ 4έ1έβΝ παδ ά δμν υ άηα κμ ΗΝ ησθβν απαέ β βν κυν υ άηα κμν έθαδν βν τπαλιβν web server πκυν γαν ηπκλ έν θαν Ϋξ αδν αδ άηα ανξλβ υθνεαδνθαν κυμν Ϋζθ δν δμνδ κ ζέ μνπκυναά β αθένγδαν βθνεαζτ λβνπλκ κηκέπ β,ν πδζϋιαη Ν βνξλά βν κυνπαεϋ κυνxampp πκυνπ λδϋξ δν κνweb server apache. ΘαΝπλΫπ δνθαν κγ ένπλκ κξά,νσ αθνκν δε υαεσμν σπκμνίΰ δν Νπλαΰηα δεσνπ λδίϊζζκθ,νΰδα έν γαν εα αθαζυθ δν αλε σν bandwidth κυν web server ζσΰπν βμν απκ κζάμν άξκυν εαδν ίέθ κν κυμν ξλά μέ 4έβ Σ α Υ π εκζκυγκτθν ανίάηα ανπκυναεκζκυγά αη ΝΰδαΝ βθνυζκπκέβ βν κυν δε υαεκτν σπκυμ 4έγ Υ εηϊγβ βν πθνhtml5, CSS, JavaScript λ υθαν κν δα έε υκνΰδαν δε υαεκτμν σπκυμνπαλσηκδκυμνη Ν κν δεσνηαμέν λ υθανΰδανπζβλκφκλέ μνπκυνηπκλκτθνθαν θ αξγκτθν κν δε υαεσνηαμν σπκέ πδζκΰάν πθνπζβλκφκλδυθνπκυνγϋζκυη ΝθαΝ ηφαθέ κυη ΝεαδΝ υζζκΰάναυ υθέ ξ έα βνεαδντζκπκέβ βν πθνδ κ ζέ πθέ π βθν θσ β αν αυ άν γαν παλκυ δϊ κυη Ν θν υθ κηέαν κθν λσπκν εα α ε υάμν εαδν βν ξλβ δησ β αν πθνδ κ ζέ πθνπκυναπαλ έακυθν κν δε υαεσνηαμν σπκέ index.html 30

38 έθαδνβναλξδεάν ζέ αν κυν δε υαεκτνηαμν σπκυέν ξ δνξπλδ έν Ν Ϋ λα ηάηα αμ top_headerμνπκυν έθαδνβνε φαζέ αν βμνδ κ ζέ αμ top_menuμνπκυνπ λδϋξ δν κνία δεσνη θκτν πδζκΰυθν κυν δε υαεκτνηαμν σπκυ main_sectionμν έθαδν κν ετλδκν ηϋλκμν βμν εαζπ κλέ ηα κμέν ζέ αμν ηαμ,ν σπκυν ηφαθέα αδν κν ηάθυηαν ηϋ πμν η ΪΝ κν main_section υπϊλξ δν βν δεσθαν πκυν αεκζκυγ έ,ν βν κπκέαν σ αθν πα βγ έν αθαεα υγτθ δν βθναλξδεάν ζέ αένην δεσθαναυ άνϋξ δν κπκγ βγ ένη Νξλά βν κυνtag aside, κ κπκέκν σ αθν κπκγ έ Ν ε σμν κυνtag article,ν σ Ν ανπ λδ ξση θϊν κυν ξ έακθ αδνη ΝκζσεζβλβΝ βν ζέ αν εαδν σξδν αν π λδ ξση θαν κυν article. πκηϋθπμν βν κπκγϋ β βν βμν δεσθαμν ΰέθ αδν η Ν βν ίκάγ δαν κυν CSS η Νid music_samples. footer: η id the_footer σπκυ ηφαθέακθ αδνπζβλκφκλέ μν ξ δεϋμνη Ν κνcopyright list_instruments.html ΗΝ ζέ αν αυ άν Ϋξ δν παλσηκδαν κηάν η Ν βθν πλκβΰκτη θβέν δαφϋλκυθν κπκέκν ηφαθέα δν κθνεα ΪζκΰκΝ πθνκλΰϊθπθέν κν main_section, κν ΣαΝ ηκυ δεϊν σλΰαθαν ηφαθέακθ αδν η Ν βν ίκάγ δαν θσμν table. ΚΪγ Ν ΰλαηηάΝ π λδϋξ δν κν τηίκζκν βμν θσ αμ,ν κθν έ ζκν κυν ηκυ δεκτν κλΰϊθκυν εαδν βν φπ κΰλαφέαν κυέν ΗΝ φπ κΰλαφέαν παλκυ δϊα αδν ηϋ πν βμν εζϊ βμν CSS bouncingimage βν κπκέαν πδ υΰξϊθ δν βθν εέθβ βν βμν φπ κΰλαφέαμνσ αθν κνπκθ έεδνίλ γ ένπϊθπν βμέ history.html H υΰε ελδηϋθβν ζέ αν παλκυ δϊα δν βθν δ κλέαν πθν ηκυ δευθν κλΰϊθπθέν ΗΝ δ κλέαν εϊγ Ν ηκυ δεκτνκλΰϊθκυν έθαδνηϋ αν ΝΫθαΝtag article,ν κνκπκέκνπ λδϋξ δν κθν έ ζκν κυνηκυ δεκτνκλΰϊθκυ,ν βθν δεσθαν κυνεαδν βθνδ κλέαν κυέν κν ΫζκμΝ βμνδ κλέαμ υπϊλξ δν τθ ηκμνΰδανβξβ δεσν έΰηαν κυν εαδνΰδαν πδ λκφάν βθναλξάν βμν ζέ αμέ 31

39 4.3.4 sounds.html Π λδϋξ δν αν βξβ δεϊν έΰηα αν πθν ηκυ δευθνκλΰϊθπθέν κ main_section υπϊλξκυθ λέα tag article ΫθαΝ ΰδαΝ εϊγ Ν ηκυ δεσν σλΰαθκέν ΓδαΝ βθν εαζτ λβν κέξδ βν πθ π λδ ξκηϋθπθν Ϋξ δν ξλβ δηκπκδβγ ένtableένκϊγ ΝΰλαηηάΝπ λδϋξ δνϋθανηκυ δεσνεαδν βν υθϋξ δαν κν tag audio controls κν κπκέκν έθαδνθϋκν βθνhtml 5. Μ Ν κν υΰε ελδηϋθκνtag ηπκλκτη ΝθαΝαθαπαλαΰΪΰκυη Ναλξ έανάξκυν βθνhtml. ΣκΝε έη θκνπκυνυπϊλξ δναθϊη αν κνtag audio γαν ηφαθδ ένησθκναθνκνφυζζκη λβ άμν ηαμν θν κν υπκ βλέα δέν Μ Ν κν tag αυ σ,ν πλκ έγ θ αδν αυ σηα αν εαδν αν κδξ έαν ζϋΰξκυν ΰδαΝ αθαπαλαΰπΰά,ν πατ βν εαδν Ϋθ α βμν άξκυέν Μ Ν κν type εαγκλέακυη Ν κθν τπκν κυν αλξ έκυν ΧκΝ ησθκμν ζσΰκμν πκυν ΰέθ αδν έθαδν ΰδαΝ θαν πδ αξτθκυη Ν βν δα δεα έαν πκυν φκλ υθ δν βν ζέ αψέν Μπκλκτη Ν θαν ξλβ δηκπκδά κυη Ν πκζζϊν δαφκλ δεϊν source elements ΰδαΝ άξκυμν δαφκλ δευθν τππθν (mp3, wav, oggψέν ΟΝ φυζζκη λβ άμν γαν ξλβ δηκπκδά δν κν πλυ κν πκυν γαν αθαΰθπλέ δέν κθν πέθαεαν πκυν αεκζκυγ έν ηπκλκτη Ν θαν κτη Ν κυμν τπκυμν πθν αλξ έπθν πκυν ηπκλκτθν θαν αθαπαλαΰϊΰκυθν κδν φυζζκη λβ Ϋμέ Πέθαεαμ 4: Φυζζοη λβ Ϋμ εαδ τποδ αλχ έωθ που ηπολοτθ θα αθαπαλαΰϊΰουθ (W3schools, n.a) κν ΫζκμΝ εϊγ Ν tag article υπϊλξ δν τθ φπ κΰλαφέ μνεαδν βθναλξάν βμν ζέ αμέ ηκμν ΰδαΝ αν video κυν ηκυ δεκτν κλΰϊθκυ,ν δμν videos.html βν ζέ αν αυ άν παλκυ δϊακθ αδν αν video απσν εϊγ Ν ηκυ δεσν σλΰαθκέν ΚαδΝ βθν π λέπ π βν αυ άν σππμν εαδν βθν πλκβΰκτη θβν ξλβ δηκπκδκτη Ν κν tag article ΰδαΝ βθν εαζτ λβν κλΰϊθπ βν εαδν δαξπλδ ησν πθνηκυ δευθνκλΰϊθπθνη αιτν κυμένγδαν βθνεαζτ λβν ηφϊθδ βν πθνπζβλκφκλδυθν βθν κγσθβν ξλβ δηκπκδκτη Ν table σπκυν εϊγ Ν ΰλαηηάΝ π λδϋξ δν κν θϋκν tag βμν HTML 5 video. Μ Ν κν attribute width εαδνheight εαγκλέακυη Ν κντοκμνεαδν κνπζϊ κμνπκυνγϋζκυη ΝθαΝεα αζαηίϊθ δν κνvideo. ΣκΝ attribute controls ηφαθέα δν αν δεκθέ δαν ζϋΰξκυν κυν video σππμν αθαπαλαΰπΰά,ν πατ β,ν άξκμέν Μπκλκτη Ν θαν ξλβ δηκπκδά κυη Ν π λδ σ λαν απσν ΫθαΝ source αλξ έαέν ΟΝ φυζζκη λβ άμν γαν ξλβ δηκπκδά δν κν πλυ κν πκυν γαν αθαΰθπλέ δέν ΣκΝ ε έη θκν πκυν υπϊλξ δν αθϊη αν αν tag video γαν ηφαθδ ένησθκναθνκνφυζζκη λβ άμν θν κνυπκ βλέα δέ κθνπέθαεανπκυναεκζκυγ ένίζϋπκυη Ν κυμν τπκυμν πθναλξ έπθν video πκυνυπκ βλέακυθν αν πλκΰλϊηηα ανπ λδάΰβ βμέ 32

40 Πέθαεαμ 5: Φυζζοη λβ Ϋμ εαδ τποδ αλχ έωθ video που ηπολοτθ θα αθαπαλαΰϊΰουθ (Wγschools, nέa) κν ΫζκμΝεΪγ Νtag article υπϊλξ δν τθ δμνφπ κΰλαφέ μνεαδν βθναλξάν βμν ζέ αμέ ηκμνΰδαν κνβξβ δεσν έΰηαν κυνηκυ δεκτνκλΰϊθκυ,ν photos.html ΗΝ ζέ αν αυ άν παλκυ δϊα δν δμν δεσθ μν απσν αν ηκυ δεϊν σλΰαθαέν ΟδΝ φπ κΰλαφέ μν ηφαθέακθ αδν η Ν βν ξλά βν κυν id gallery,ν κν κπκέκν κλέα δν κν αλξ έκν css πζϊ κμ,ν τοκμν εαδν ΪζζαΝ ξαλαε βλδ δεϊέν ΚΪγ Ν φπ κΰλαφέα,ν απ δεκθέα αδν αθν υπ λ τθ ηκμν η Ν ξλά βν βμν εζϊ βμν galleryimage, βνκπκέανπλκ φϋλ δν βν υθα σ β ανεέθβ βμνσ αθν κνπκθ έεδνίλ γ ένπϊθπναπσν βθν δεσθαέ Ό αθνεϊθκυη ΝεζδεΝβΝ δεσθα,ν σ Ν ηφαθέα αδνβνφπ κΰλαφέαν Νη ΰΪζκΝηΫΰ γκμέ synchronization.html ηφαθέακυη Ν λέαν ίέθ κν κν ιέν ηϋλκμν βμν κγσθβμν η Ν ξλά βν κυν tag video,ν κν κπκέκν υπϊλξκυθν λ δμν πδζκΰϋμνsource. κναλδ λσν ηάηανϋξκυθν βηδκυλΰβγ έν λ δμνγϋ δμνχθϋ βν1,νθϋ βν β,ν ΘΫ βν γψν δμν κπκέ μν ηπκλκτη Ν θαν κπκγ ά κυη Ν αν ίέθ κν πκυν γϋζκυη έν Ό αθν πα ά κυη Ν κν υΰξλκθδ ησμνvideo σ Νεαζ έ αδνβν υθϊλ β βνjavascript synchronize εαδν ηφαθέακθ αδν αν κδξ έαν ζϋΰξκυνεαδν αν λέανίέθ κένμπκλκτη ΝθαΝ πδζϋικυη ΝπκδκΝίέθ κνγανπαέα δ,νπκδκνγαν αηα ά δ,ν βθν Ϋθ α βναπσν κνεαγϋθανεέζέπέ instrumentmap.html ηφαθέακυη ΝηδαΝαλδγηβηΫθβΝζέ ανη Ν ανηκυ δεϊνσλΰαθα,ν κνσθκηϊν κυμ,νεαδν βθ δεσθαν κυν κλΰϊθκυν η Ν κν ηκυ δεσν ξϊλ βν η Ν πλκεαγκλδ ηϋθκν ηϋΰ γκμέν βν υθϋξ δαν η Ν κν tag audio πλκ γϋ κυη Ν βξβ δεϊν εκηηϊ δαν η Ν πλκεαγκλδ ηϋθκν id. Κα σπδθν η Ν κν tag map κλέακυη Ν π λδκξϋμν πϊθπν βθν δεσθα,νη Ν βνξλά βν κυνattribute coords εαδνη Ν βνίκάγ δαν ΪλπθΝ υθ αΰηϋθπθνπκυν κλέακυθ δμνΰπθέ μναλδ λϊ,νπϊθπ,ν ιδϊνεαδνεϊ π θσμν λαΰυθκυ. Ό αθνπα βγ έν κνπζάε λκν κυν πκθ δεδκτν Ν εϊπκδαν π λδκξάν σ Ν εαζκτη Ν βν υθϊλ β βν playsound πκυν ίλέ ε αδν κν αλξ έκν javascript.js εαδνΰέθ αδναθαπαλαΰπΰάν κυναθ έ κδξκυναλξ έκυνπκυνϋξ δνκλδ ένη Ν κνtag audio. 33

41 4.3.9 links.html ΣκΝαλξ έκναυ σνπ λδϋξ δν υθ Ϋ ηκυμν ΝΪζζκυμΝ δε υαεκτμν σπκυμέν contact_form.html ΗΝ ζέ αν ηφαθέα δνηδανφσληαν πδεκδθπθέαμ,νσπκυνκνξλά βμνπλϋπ δνθαν υηπζβλυ δν τκνtext box εαδν ΫθαΝ text area. Ό αθν πα βγ έν κν πζάε λκν ΤπκίκζάΝ βμν φσληαμ,ν σ Ν κν action κλέα δν σ δν αν κηϋθαν βμνγαναπκ αζκτθνη Ν βν δ τγυθ mycss.css ΣκΝαλξ έκναυ σνπ λδϋξ δν δμνηκλφκπκδά δμν πθν ζέ πθνΰδαν βθνεαζτ λβνπαλκυ έα άν κυμ,ν πκυνϋξκυθναθαφ λγ ένπαλαπϊθπέ ΓδαΝθαΝ υθ γκτθν ανhtml αλξ έανη Ν κνcss αλξ έκν θ πηα υθκυη Ν βθναεσζκυγβνΰλαηηάν ΝεΪγ Νhtml αλξ έκμ <link rel="stylesheet" href="my.css"> </link> javascript.js Σκ αλξ έκ αυ σ π λδϋξ δ function βμ javascript. ΓδαΝ θαν υηπ λδζβφγκτθν κδν function πκυν ξλ δαασηα Ν ανhtml αλξ έα,νΰλϊφκυη Ν βθναεσζκυγβνΰλαηηάν βθναλξάν κυμμ <script type="text/javascript" src="javascript.js"> 4.4 Πα υ α βθν θσ β αναυ άνγανεϊθκυη ΝηδαΝπαλκυ έα βν βμνζ δ κυλΰέαμν κυν δε υαεκτνηαμν σπκυέν θν αθκέικυη ΝΫθαθΝφυζζκη λβ άνεαδν υ κυη Ν αθν δ τγυθ βνlocalhost/web_page/index.html γαν κτη Ν βθν αλξδεάν ζέ αν κυν δε υαεκτν ηαμν σπκυέν ΗΝ ζέ αν αυ ά,ν εαζπ κλέα δν κθν πδ εϋπ βν κυν δε υαεκτν ηαμν σπκυν εαδν παλκυ δϊα δν θν υθ κηέαν κν εκπσν βμν υζκπκέβ άμν κυέν ΟΝ κπκέκμ,ν σππμν Ϋξκυη Ν αθαφϋλ δν έθαδν θαν παλϋξ δν βν υθα σ β αν κπ δεκπκέβ βμν ηκυ δευθν κλΰϊθπθν η Ν θ δε δεϊν εκηηϊ δαν άξκυν πκυν αν αθ δπλκ ππ τκυθέν πέ βμν παλϋξ δν δ κλδεϋμν εαδν Ϊζζ μν πζβλκφκλέ μν ΰδαΝ αν σλΰαθαέν ΣΫζκμΝαθαφΫλκθ αδν ανπδγαθϊν θϊλδανξλά βμν κυ,ν ανκπκέαν έθαδμ ΟΝ ξλά βμν γαν ηπκλ έν θαν δαίϊ δν πζβλκφκλέ μν ΰδαΝ αν σλΰαθαν ΧπξΝ λσπκμν εα α ε υάμ,νδ κλδεϊν κδξ έαψ. ΟΝ ξλά βμν γαν ηπκλ έν θαν αεκτ δν αν σλΰαθαν ι ξπλδ ΪΝ ε ζυθ αμν εϊπκδαν αλξ έανάξκυνεαδναεκτΰκθ αμνεϊπκδκνηκυ δεσνγϋηαέ 34

42 ΟΝξλά βμνγανηπκλ ένθαν δνφπ κΰλαφέ μν πθνκλΰϊθπθ. ΟΝ ξλά βμν γαν ηπκλ έν θαν δν ίέθ κν απσν αν σλΰαθαν αν κπκέαν γαν παέα δν ΫθαμΝ ηκυ δεσμέ ΟΝ ξλά βμν γαν ηπκλ έν θαν εϊθ δν dragν andν dropν εαδ θαν αθαπαλϊΰ δν βν αλξ έαν videoν παλϊζζβζαν απσν δαφκλ δεϊν σλΰαθαν ΧπξΝ ζτλα,ν ζακτ κν ηααέν άν εαδν παλαπϊθπψν βηδκυλΰυθ αμν Ϋ δν βθν αέ γβ βν βμν παλα κ δαεάμν αυΰδϊμν αζζϊν εαδν θαν π δλαηα δ έν η Ν δϊφκλαν βξβ δεϊν απκ ζϋ ηα αν υθ υϊακθ αμν δαφκλ δεϊνσλΰαθανχπξνζτλα,νζακτ κ,νεδγϊλανάνηαθ κζέθκ,νεδγϊλανε ζψ. δεσθα 11:Αλχδεά ζέ α θν πδζϋικυη Ν εα ΪζκΰκμΝ κλΰϊθπθν γαν κτη Ν αν σλΰαθαν πκυν ΫξκυθΝ πδζ ΰ έν ΰδαΝ βθν παλκυ έα άν κυμν κν δε υαεσνηαμν σπκέν υ ΪΝ έθαδμν Κλβ δεσνζακτ κ Κλβ δεάνζτλα Κλβ δεσνηαθ κζέθκ 35

43 δεσθα 12μ Κα Ϊζοΰομ ΟλΰΪθωθ θν πα ά κυη,ν η Ν κν πκθ έεδν ηαμ,ν πϊθπν δμν δεσθ μν πθν κλΰϊθπθ,ν γαν η αφ λγκτη Ν βθν αθ έ κδξβν ζέ αν η Ν βθν Ι κλέαν κυν εϊγ Ν κλΰϊθκυ,ν σππμν ηπκλκτη Ν θαν κτη Ν δμν δεσθ μν πκυν αεκζκυγκτθέν βθνέ δαν ζέ ανηπκλκτη ΝθαΝη αφ λγκτη ΝαθΝπα ά κυη Ν κν τθ ηκνδ κλέα. 36

44 δεσθα 13μ Ι ολέα Λαοτ ο 37

45 δεσθα 14μ Ι ολέα Λτλα 38

46 δεσθα 15μ Ι ολέα Μαθ οζέθο 39

47 πδζϋΰκθ αμν κν τθ ηκν εκυ δεσνυζδεσνγαν κτη Ν δμν λ δμναεσζκυγ μν δεσθ μνηϋ πν πθν κπκέπθνηπκλκτη ΝθαΝαεκτ κυη Ν ε ζϋ δμνη Ν αναθ έ κδξανηκυ δεϊνσλΰαθαέ ΝεΪγ ΝηδαΝ ε Ϋζ βν ηπκλκτη ΝθαΝ πδζϋικυη ΝθαΝαυικη δυ κυη Ν βθνϋθ α βν κυνάξκυ,νλυγηέακθ αμναθ έ κδξαν κν ξ δεσν δεκθέ δκέ δεσθα 16μ Αεου δεσ Τζδεσ Λαοτ ο δεσθα 17μ Αεου δεσ Τζδεσ Λτλα 40

48 δεσθα 18μ Αεου δεσ Τζδεσ Μαθ οζέθο θν πδζϋικυη Ν κν Videos γαν η αίκτη Ν βν ζέ αν σπκυν παλκυ δϊακθ αδν λέαν θ δε δεϊν video απσνεϊγ Νηκυ δεσνσλΰαθκ,νσππμνηπκλκτη ΝθαΝ κτη Ν δμν δεσθ μνπκυναεκζκυγκτθέν 41