"Εθαρμογές Διαδικηύοσ" Εηζαγωγή ζηελ HTML Ιωάλληλα 2008 Ι. Παπαδόπνπινο 1
Internet WWW website webpage HTML HypetText Markup Language Ιωάλληλα 2008 Ι. Παπαδόπνπινο 2
HypetText Markup Language Γιώζζα Σήκαλζεο Υπεξ-Κεηκέλνπ Φαξαθηεξίδεηαη από ην ππεξθείκελν απνζεθεύεηαη ωο απιό αξρείν θεηκέλνπ εκπεξηέρεη θωδηθνύο κνξθνπνίεζεο ηνπ θεηκέλνπ πεξηιακβάλεη ππεξζπλδέζκνπο ηελ θαζνιηθόηεηά ηεο είλαη δηαζέζηκε ζε θάζε είδνο ππνινγηζηή θαη ιεηηνπξγηθνύ ζπζηήκαηνο Ιωάλληλα 2008 Ι. Παπαδόπνπινο 3
ηξόπνο εκθάληζεο ηεο HTML εμαξηάηαη από ην θπιινκεηξεηή αλάγθε πξνηππνπνίεζεο W3C WWW consortium Οη θπιινκεηξεηέο κπνξνύλ λα δηαθέξνπλ ωο πξνο ηελ ηαρύηεηά ηνπο ηελ επθνιία ρξήζεο ηα ηδηαίηεξα ραξαθηεξηζηηθά ηνπο όρη όκωο ωο πξνο ηα πξόηππα ηεο HTML Ιωάλληλα 2008 Ι. Παπαδόπνπινο 4
HTML 4 XML extensible markup language HTML + XML XHTML απζηεξόο ηξόπνο ζύληαμεο Ιωάλληλα 2008 Ι. Παπαδόπνπινο 5
ζήκαλζε κε ηε ρξήζε εηηθεηώλ: <img src="myimage.jpg" /> Σηνηρεία img Ιδηόηεηεο src Τηκέο "myimage.jpg" Ιωάλληλα 2008 Ι. Παπαδόπνπινο 6
Σηνηρεία παξέρνπλ ηε δνκή δηαθνξεηηθώλ ηκεκάηωλ επηθεθαιίδα <h1> παξάγξαθνο <p> εηθόλα <img> ζύλδεζκνο <a> κπνξνύλ λα έρνπλ ηδηόηεηεο πεξηγξάθνπλ ιεπηνκέξεηεο γηα ην ζηνηρείν κπνξνύλ λα πεξηέρνπλ θείκελν π.ρ. <p>θείκελν κίαο παξαγξάθνπ </p> Ιωάλληλα 2008 Ι. Παπαδόπνπινο 7
Ιδηόηεηεο θαη ηηκέο πεξηέρνπλ πιεξνθνξίεο ζρεηηθά κε ηα δεδνκέλα ηνπ εγγξάθνπ Η ηηκή κίαο ηδηόηεηαο πεξηθιείεηαη ζε δηπιά εηζαγωγηθά (ππνρξεωηηθό ζηελ XHTML) <img src="img/file.gif" width="200px" /> Γηα ηηο πεξηζζόηεξεο ηδηόηεηεο νη ηηκέο πξνέξρνληαη από πξνθαζνξηζκέλα ζύλνια <td align="left"> <td align="center"> <td align="right"> Ιωάλληλα 2008 Ι. Παπαδόπνπινο 8
παξαδείγκαηα εδώ ην θείκελν είλαη <em>έληνλν</em>. <img src="myimage.jpg" border="3" /> <td colspan="3" >θεβξνπάξηνο</td> <link rel="stylesheet" type="text/css" media="screen" href="myfile.css" /> Ιωάλληλα 2008 Ι. Παπαδόπνπινο 9
Σηνηρεία επηπέδνπ κπινθ (block-level) εκθαλίδνληαη πάληα ζε λέα γξακκή π.ρ. <p>, <div> Εκβόιηκα ζηνηρεία (inline) εκθαλίδνληαη εληόο ηεο ηξέρνπζαο γξακκήο π.ρ. <b>, <span> Ιωάλληλα 2008 Ι. Παπαδόπνπινο 10
π.ρ. block-level inline <div><img src="file.png" width="100px"> <p>απηή είλαη κία παξάγξαθνο.</p> <p>απηή είλαη κία άιιε παξάγξαθνο ζηελ νπνία ρξεζηκνπνηνύληαη θαη <em>έληνλα</em> γξάκκαηα </p> </div> Ιωάλληλα 2008 Ι. Παπαδόπνπινο 11
Γνληθά θαη ζπγαηξηθά ζηνηρεία Αλ έλα ζηνηρείν πεξηέρεη έλα δεύηεξν ην πξώην ιέγεηαη γνληθό θαη ην δεύηεξν ζπγαηξηθό <p>απηή είλαη κία άιιε παξάγξαθνο ζηελ νπνία ρξεζηκνπνηνύληαη θαη <em>έληνλα</em> γξάκκαηα </p> Τν <p> </p> είλαη γνληθό ηνπ <em> </em> Τν <em> </em> είλαη ζπγαηξηθό ηνπ <p> </p> Ιωάλληλα 2008 Ι. Παπαδόπνπινο 12
θαηάιιειε έλζεζε (nesting) Σωζηό: <p>απηή είλαη κία άιιε παξάγξαθνο ζηελ νπνία ρξεζηκνπνηνύληαη θαη <em>ένηονα γράμμαηα </em></p> Λάζνο: <p>απηή είλαη κία άιιε παξάγξαθνο ζηελ νπνία ρξεζηκνπνηνύληαη θαη <em>ένηονα γράμμαηα </p></em> Ιωάλληλα 2008 Ι. Παπαδόπνπινο 13
περιετόμενο κειμένοσ <p>απηή είλαη κία άιιε παξάγξαθνο ζηελ νπνία ρξεζηκνπνηνύληαη θαη <em>έληνλα</em> γξάκκαηα </p> κπνξεί λα αθνινπζεί θωδηθνπνίεζε ASCII (όρη γηα ειιεληθά ) ISO (π.ρ. ISO8859-1 γηα γαιιηθά, ISO8859-7 γηα ειιεληθά) Unicode (utf-8 γηα όιεο ηηο γιώζζεο!) Ιωάλληλα 2008 Ι. Παπαδόπνπινο 14
άλλα είδη περιετομένοσ εηθόλεο <img src="myimage.jpg" border="3" /> ζύλδεζκνη <a href="http://www.uoi.gr">uoi</a> java applets <object codetype="application/java"> classid="myjavaapplet.class" width="400" height="300" </object> Ιωάλληλα 2008 Ι. Παπαδόπνπινο 15
δήλωζη DOCTYPE Δηάθνξεο εθδόζεηο HTML αλάγθε δηάθξηζήο ηνπο εηζαγωγή ηνπ DOCTYPE DOCTYPE: δειώλεηαη ζηελ αξρή ηωλ αξρείωλ HTML απζηεξή XHTML (strict) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> κεηαβαηηθή XHTML (transitional) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> XHTML πιαηζηνζπλόιωλ (frameset) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd"> Ιωάλληλα 2008 Ι. Παπαδόπνπινο 16
εμθάνιζη αρτείων πξνεπηιεγκέλε εκθάληζε εμαξηάηαη από ην θπιινκεηξεηή δπλαηόηεηα θαζνξηζκνύ από ην ρξήζηε κε ηε ρξήζε Επάιιειωλ Φύιιωλ Σηπι CSS (Cascading Style Sheets) Η XHTML θαζνξίδεη ηε δνκή Η ηερλνινγία CSS θαζνξίδεη ηελ εκθάληζε Ιωάλληλα 2008 Ι. Παπαδόπνπινο 17
εμθάνιζη αρτείων: CSS παξάδεηγκα: http://pc-24.physics.uoi.gr/~std_user Ιωάλληλα 2008 Ι. Παπαδόπνπινο 18
εμθάνιζη αρτείων: CSS Επαιιειία CSS επίιπζε δηελέμεωλ CSS: p {color: red; } p.mypar {color: blue; } p#par1 {color: green; } p#par1 {color: magenta; } HTML: <p>here starts a paragraph </p> <p class="mypar">μία άιιε παξάγξαθνο</p> <p class="mypar" id="par1">καη κία ηειεπηαία παξάγξαθνο πνπ ζα απνθηήζεη κωβ ρξώκα ζύκθωλα κε ηα παξαπάλω </p> Ιωάλληλα 2008 Ι. Παπαδόπνπινο 19
εμθάνιζη αρτείων: CSS Ιδηόηεηεο θαη ηηκέο CSS ρωξίδνληαη κε : ηηκέο πξνθαζνξηζκέλεο γπκλνί αξηζκνί αξηζκνί κε κνλάδεο κέηξεζεο δηαθνξεηηθά δεύγε ηδηνηήηωλ/ηηκώλ ρωξίδνληαη κε ; Ιωάλληλα 2008 Ι. Παπαδόπνπινο 20
εμθάνιζη αρτείων: CSS παξαδείγκαηα: border: none; font-size: 24px; font-size: 80%; line-height: 1.5; background: url(images/cheese.jpg); color: red; color: rgb(89, 0, 127); color: rgb(35%, 0%, 50%); color: #59007f; Ιωάλληλα 2008 Ι. Παπαδόπνπινο 21
δημιοσργία νέας ιζηοζελίδας ζρεδηαζκόο δνκήο αξρείωλ θξνληίδνπκε λα ηαθηνπνηνύληαη ζε θαθέινπο (θαηαιόγνπο) ηα νκνεηδή αξρεία παξάδεηγκα δέληξνπ κίαο ηζηνζειίδαο: mywebpage -- index.html -- images -- bg-image.gif `-- picture1.jpg -- css `-- scripts Ιωάλληλα 2008 Ι. Παπαδόπνπινο 22
δημιοσργία νέας ιζηοζελίδας δεκηνπξγία ηωλ αξρείωλ HTML, CSS: κε θεηκελνγξάθνπο όπωο ν emacs εηθόλεο: κε ινγηζκηθό δεκηνπξγίαο θαη επεμεξγαζίαο εηθόλωλ Πνιύ ρξήζηκε ε ρξήζε ζηνηρείωλ από άιιεο ηζηνζειίδεο κέζω ηεο ιεηηνπξγίαο "view source" κέζω ηεο ιεηηνπξγίαο "page info" Ιωάλληλα 2008 Ι. Παπαδόπνπινο 23