Layouts Τα layouts ζε κία ηζηνζειίδα είλαη πνιύ ζεκαληηθά ώζηε ε ζειίδα λα έρεη κία ωξαία εκθάληζε. Ο ζρεδηαζκόο ηωλ layouts πξέπεη λα γίλεηαη κε πνιύ πξνζνρή. Τα πεξηζζόηεξα websites ηνπνζεηνύλ ην πεξηερόκελό ηνπο ζε πνιιαπιέο ζηήιεο (όπωο ηα πεξηνδηθά θαη νη εθεκεξίδεο). Οη πνιιαπιέο ζηήιεο δεκηνπξγνύληαη κε ηε ρξήζε ηωλ tags <table> ή <div>. HTML Layouts - Χπήζη πινάκων: Ο απινύζηεξνο ηξόπνο γηα ηελ δεκηνπξγία layout είλαη ρξεζηκνπνηώληαο ην tag <table>. Τν αθόινπζν παξάδεηγκα ρξεζηκνπνηεί έλαλ πίλαθα κε 3 γξακκέο θαη 2 ζηήιεο: <table width="500" border="0"> <tr> <td colspan="2" style="background-color:#ffa500;"> <h1>main Title of Web Page</h1> </td> <tr valign="top"> <td style="background-color:#ffd700;width:100px;text-align:top;"> <b>menu</b><br /> HTML<br /> CSS<br /> JavaScript </td> <td style="background-color:#eeeeee;height:200px;width:400px;text-align:top;"> Content goes here</td> <tr> <td colspan="2" style="background-color:#ffa500;text-align:center;"> Copyright 2011 MyWeb.com</td> </table> HTML Layouts - Χπήζη ηος ζηοισείος <div>: Τν ζηνηρείν div ρξεζηκνπνηείηαη γηα ηελ νκαδνπνίεζε ηωλ ζηνηρείωλ ηεο HTML. Τν αθόινπζν παξάδεηγκα ρξεζηκνπνηεί πέληε div ζηνηρεία γηα λα δεκηνπξγήζεη έλα layout πνιιαπιώλ ζηειώλ, δεκηνπξγώληαο ην ίδην απνηέιεζκα κε ην πξνεγνύκελν παξάδεηγκα: <div id="container" style="width:500px"> <div id="header" style="background-color:#ffa500;"> <h1 style="margin-bottom:0;">main Title of Web Page</h1></div> <div id="menu" style="background-color:#ffd700;height:200px;width:100px;float:left;"> <b>menu</b><br /> HTML<br /> CSS<br /> JavaScript</div> <div id="content" style="background-color:#eeeeee;height:200px;width:400px;float:left;"> WEB: http://ekoletsou.gr Page 1
Content goes here</div> <div id="footer" style="background-color:#ffa500;clear:both;text-align:center;"> Copyright 2011 MyWeb.com</div> </div> Doctypes Η δήιωζε doctype παξαπέκπεη ζηνπο θαλόλεο γηα ηε γιώζζα ζήκαλζεο, ώζηε νη browsers λα κπνξνύλ λα αλαθηήζνπλ ζωζηά ην πεξηερόκελν. Τν doctype δελ είλαη tag ηεο HTML, αιιά κία νδεγία γηα ηνλ web browser ζρεηηθά κε ηελ έθδνζε ηεο γιώζζαο ζηελ νπνία είλαη γξακκέλε ε ζειίδα. Τν doctype ζα πξέπεη λα είλαη ην πξώην πξάγκα πνπ είλαη γξακκέλν ζην HMTL document, πξηλ αθόκα θαη από ην tag. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <title>title of the document</title> The content of the document... Styles - CSS Σηελ HTML 4.0, όιεο νη κνξθνπνηήζεηο κπνξνύλ λα κεηαθηλεζνύλ από ην HTML document, θαη λα απνζεθεπηνύλ ζε έλα πεδίν πνπ θαζνξίδεη ηα ζηπι. Όηαλ ν browser δηαβάδεη ην ζπγθεθξηκέλν πεδίν, κνξθνπνηεί ηε ζειίδα ζύκθωλα κε απηό. Υπάξρνπλ 3 ηξόπνη γηα ηελ εηζαγωγή ελόο ηέηνηνπ πεδίνπ, εηηε εμωηεξηθά (external style), είηε εζωηεξηθά (internal style), είηε κέζα ζηελ ίδηα ηε γξακκή (inline style). Πην αλαιπηηθά: Καθοπιζμόρ Σηςλ Εξωηεπικά: Ο θαζνξηζκόο ζηπι ζε έλα εμωηεξηθό πεδίν είλαη ηδαληθόο όηαλ ην ζηπι αλαθέξεηαη ζε πνιιέο ζειίδεο. Με έλα ηέηνην πεδίν κπνξείηε λα αιιάμεηε ηελ εκθάληζε νιόθιεξνπ web site κε ηελ αιιαγή κόλν ελόο αξρείνπ. Σε θάζε ζειίδα ζα πξέπεη λα ππάξρεη έλα link πνπ λα παξαπέκπεη ζε απηό ην αξρείν θάλνληαο ρξήζε ηνπ tag <link>, ην νπνίν ηνπνζεηείηαη κέζα ζηελ πεξηνρή ηνπ : <link rel="stylesheet" type="text/css" href="mystyle.css" /> WEB: http://ekoletsou.gr Page 2
Καθοπιζμόρ Σηςλ Εζωηεπικά: Ο θαζνξηζκόο ζηπι ζε έλα εζωηεξηθό πεδίν κπνξεί λα ρξεζηκνπνηεζεί εάλ κόλν κία ζειίδα έρεη κνλαδηθό ζηπι. Τα εζωηεξηθά απηά πεδία γηα ηνλ θαζνξηζκό ηνπ ζηπι ηνπνζεηνύληαη ζην κέζα ζην πεδίν ηεο ελ ιόγω HTML ζειίδαο, ρξεζηκνπνηώληαο ην tag <style>: <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style> Καθοπιζμόρ Σηςλ Μέζα ζηη Γπαμμή: Μπνξεί λα γίλεη θαζνξηζκόο ζηπι κνξθνπνίεζεο αθόκε θαη κέζα ζηελ ίδηα γξακκή θώδηθα ζηελ νπνία ζέινπκε λα εθαξκόζνπκε κνλαδηθά ην ζπγθεθξηκέλν ζηπι. Γηα ηε ρξήζε ηέηνηνπ πεδίνπ, ρξεζηκνπνηνύκε ηα ραξαθηεξηζηηθά γλωξίζκαηα ηνπ ζρεηηθνύ tag: <p style="color:blue;margin-left:20px;">this is a paragraph.</p> Head Μέζα ζην ζηνηρείν κπνξνύλ λα εζωθιείνληαη scripts, νδεγίεο γηα ηνλ browser γηα ην πνπ λα βξεη ηα πεδία ηνπ ζηπι, παξέρνληαη meta πιεξνθνξίεο, θ.ά. Τα αθόινπζα tags κπνξνύλ λα πξνζηεζνύλ ζηελ κέζα ζηελ πεξηνρή ηνπ : <title>, <base>, <link>, <meta>, <script>, and <style>. <title>: Τν tag <title> αλαθέξεηαη ζηνλ ηίηιν ηεο ζειίδαο θαη απαληάηαη ζε όια ηηο HTML/XHTML ζειίδεο. Καζνξίδεη έλα ηίηιν ζην toolbar ηνπ browser, παξέρεη έλα ηίηιν γηα ηε ζειίδα όηαλ απηή πξνζηίζεηαη ζηα Αγαπεκέλα, θαζνξίδεη έλα ηίηιν γηα ηε ζειίδα όηαλ απηή αλαθηάηαη από κία κεραλή αλαδήηεζεο. <title>title of the document</title> The content of the document... <base>: Τν tag <base> θαζνξίδεη κία ζπγθεθξηκέλε δηεύζπλζε ή έλα ζπγθεθξηκέλν ζηόρν γηα όια ηα links ζε κία ζειίδα: <base href="http://www.blablabla.com/images/" /> <base target="_blank" /> <link>: Τν tag <link> θαζνξίδεη ηε ζρέζε κεηαμύ κηαο ζειίδαο θαη κηαο εμωηεξηθήο πεγήο. <link rel="stylesheet" type="text/css" href="mystyle.css" /> <style>: Τν tag <style> ρξεζηκνπνηείηαη γηα λα θαζνξίζεη ηελ πιεξνθνξία ζρεηηθά κε ην ζηπι γηα κία HTML ζειίδα: <style type="text/css"> body {background-color:yellow} p {color:blue} </style> <meta>: Τν tag <meta> παξέρεη κεηαδεδνκέλα ζρεηηθά κε ηελ HTML ζειίδα. Τα κεηαδεδνκέλα ρξεζηκνπνηνύληαη από ηνπο browsers (γηα ην πώο λα εκθαλίζνπλ ην πεξηερόκελν), ηηο κεραλέο αλαδήηεζεο (παξέρνληαο ιέμεηο-θιεηδηά), ή από άιιεο web ππεξεζίεο. Τν αθόινπζν meta ζηνηρείν θαζνξίδεη ηε πεξηγξαθή κίαο ζειίδαο: WEB: http://ekoletsou.gr Page 3
<meta name="description" content="web technologies: HTML, CSS, XML" /> Τν αθόινπζν meta ζηνηρείν θαζνξίδεη ιέμεηο-θιεηδηά κίαο ζειίδαο: <meta name="keywords" content="html, CSS, XML" /> <script>: Τν tag <script> ρξεζηκνπνηείηαη γηα λα θαζνξίζεη έλα script από ηελ πιεπξά ηνπ ρξήζηε, π.ρ. έλα JavaScript. Τν ζηνηρείν script είηε πεξηέρεη κία script δήιωζε είηε δείρλεη ζε έλα εμωηεξηθό script αξρείν κέζω ηεο κεηαβιεηήο src. <script type="text/javascript"> document.write("hello World!") </script> Media Χπήζη Plugins: Έλα plugin είλαη έλα κηθξό πξόγξακκα πνπ κπνξεί λα ρξεζηκνπνηεζεί γηα πνιινύο ζθνπνύο επεθηείλνληαο ηηο δπλαηόηεηεο ηνπ browser. Γηα παξιαδεηγκα, κπνξεί λα ρξεζηκνπνηεζεί γηα λα παίμεη κνπζηθή, λα δείμεη έλα ράξηε, λα ειέγμεη έλα input θ.ά. Τα plugins πξνζηίζνληαη ζηελ HTML ζειίδα κε ηε ρξήζε ηνπ tag <object> ή <embed>. Παπάδειγμα: Παίδνληαο Audio ζε HTML <!DOCTYPE HTML> <audio controls="controls"> <source src="song.mp3" type="audio/mpeg" /> <source src="song.ogg" type="audio/ogg" /> <embed height="50px" width="100px" src="song.mp3" /> </audio> Χπήζη ηος Yahoo Media Player: <p><a href="song.mp3">play Song</a></p> <script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script> Χπήζη ηος Google: <embed type="application/x-shockwave-flash" wmode="transparent" src="http://www.google.com/reader/ui/3523697345-audio-player.swf?audiourl=song.mp3" height="27" width="320"></embed> Παίζονηαρ MP4 Video με σπήζη QuickTime: <object width="420" height="360" classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" codebase="http://www.apple.com/qtactivex/qtplugin.cab"> <param name="src" value="movie.mp4" /> <param name="controller" value="true" /> </object> WEB: http://ekoletsou.gr Page 4
Παίζονηαρ SWF Videos με σπήζη ηος Flash: <object width="400" height="40" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#versio n=8,0,0,0"> <param name="src" value="bookmark.swf"> <embed src="bookmark.swf" width="400" height="40"></embed> </object> Παίζονηαρ ένα YouTube Video ζε HTML: <iframe width="420" height="345" src="http://www.youtube.com/watch?v=7vzuh_55x2m"> </iframe> <embed width="420" height="345" src="http://www.youtube.com/watch?v=7vzuh_55x2m" type="application/x-shockwave-flash"> </embed> Ειζάγoνηαρ έναν σάπηη από ηο Google Maps: <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=el&geocode=&q=ioann ina&aq=&sll=37.0625,- 95.677068&sspn=60.158465,135.263672&vpsrc=6&ie=UTF8&hq=&hnear=%CE% 99%CF%89%CE%AC%CE%BD%CE%BD%CE%B9%CE%BD%CE%B1,+%CE%95%CE%BB%CE%BB%CE%AC%CF%82&ll=39.674495,20.840141&spn=0.11619,0.264187&t=h&z=13&output=embed"> </iframe><br /><small><a href="http://maps.google.com/maps?f=q&source=embed&hl=el&geocode=&q=io annina&aq=&sll=37.0625,- 95.677068&sspn=60.158465,135.263672&vpsrc=6&ie=UTF8&hq=&hnear=%CE% 99%CF%89%CE%AC%CE%BD%CE%BD%CE%B9%CE%BD%CE%B1,+%CE%95%CE%BB%CE%BB%CE%AC%CF%82&ll=39.674495,20.840141&spn=0.11619,0.264187&t=h&z=13" style="color:#0000ff;text-align:left">προβολή μεγαλύτερου χάρτη</a></small> WEB: http://ekoletsou.gr Page 5