Δπγαζηήπιο 1: html - Εύδοξος 1... · λ ίλαη θααξνηθά –fatal. tags...
TRANSCRIPT
![Page 1: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/1.jpg)
Γικηςοκενηπικα Σςζηήμαηα
Μαπίνορ Θεμιζηοκλέοςρ
Email: [email protected]
Αλδξνύηζνπ 150
Γξαθείν 206
Τει. 210 414 2723
Ώξεο Γξαθείνπ: Γεπηέξα 11-12 AM
Δπγαζηήπιο 1: HTML
![Page 2: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/2.jpg)
Πεπιεσόμενα
Html
Δηζαγσγή ζηελ XML
Δξγαζηήξηα Πέκπηε 10-12 πκ
![Page 3: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/3.jpg)
HTML
![Page 4: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/4.jpg)
Πεπιεσόμενα
Τί είλαη ε HTML?
Tags
Φξήζε notepad
Πξνζζήθε
– Δηθόλσλ
– Σπλδέζκσλ
– Λίζηαο
![Page 5: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/5.jpg)
Βιβλιογπαθία
Σεκεηώζεηο
Web Resources
Βηβιηνζήθε
![Page 6: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/6.jpg)
Βιβλιογπαθία από ηο Internet
Υπάξρνπλ ρηιηάδεο websites κε ζέκα ηελ HTML.
Μεξηθά από απηά είλαη θαη ηα αθόινπζα
http://www.w3.org/
http://www.w3.org/markup/
http://www.w3.org/TR/html401/
http://www.ncsu.edu/it/edu/html_trng/html_basics.html
http://www.htmlgoodies.com/
http://builder.cnet.com/webbuilding/
http://www.w3schools.com/html/
http://www.htmlhelp.com
![Page 7: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/7.jpg)
Δκπαιδεςηικόρ Σηόσορ
Μέρξη ην ηέινο ηνπ καζήκαηνο ζα είζηε ηθαλνί λα:
Καηαλνήζεηε ηα βαζηθά δνκηθά ζηνηρεία HTML
Φξεζηκνπνηήζεηε ηηο βαζηθέο εληνιέο ηεο HTML
Γεκηνπξγήζεηε ην δηθό ζαο web site
![Page 8: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/8.jpg)
HTML
HTML = Hypertext-Markup language
HTML: Γιώζζα πξνγξακκαηηζκνύ πνπ ιέεη ζηνλ
web browser ηη πιεξνθνξίεο λα πξνβάιεη θαη πσο
Πσο λα εληνπίζεη αξρεία κε θείκελν, ήρν,
γξαθηθά, video ή multimedia
Πσο λα ηα εκθαλίζεη ζηελ ηζηνζειίδα
Γεκηνπξγία ηζηνζειίδσλ κε HTML ή κε ρξήζε
web authoring εξγαιείσλ όπσο
FrontPage (Intermediate Level),
Dreamweaver (Advanced).
![Page 9: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/9.jpg)
HTML
H HTML δελ είλαη γιώζζα πξνγξακκαηηζκνύ
Πνπ ζηεξίδεηαη ζε δηαδηθαζίεο-ξνπηίλεο όπσο ε
Pascal, C ή ε Fortran
Αξρεία πνπ πεξηέρνπλ θώδηθα HTML έρνπλ ηελ
θαηάιεμε .htm ή .html
Σε αληίζεζε κε άιιεο γιώζζεο πξνγξακκαηηζκνύ
ηα ιάζε πνπ ζπκβαίλνπλ ζην θώδηθα ηεο ΗΤΜL
δελ είλαη θαηαζηξνθηθά – Fatal
![Page 10: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/10.jpg)
Tags
Γειώλνπλ ηελ αξρή θαη ην ηέινο κηαο εληνιήο
HTML
Τα Tags ζπληάζζνληαη σο εμήο:
< > Γειώλεη ηελ αξρή ελόο tag
</> Γειώλεη ην ηέινο ηνπ tag
Σύληαμε
<ενηολή> κείμενο </ενηολή>
![Page 11: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/11.jpg)
Μεπικά Παπαδείγμαηα Tags
<title> θείκελν </title>
<p> θείκελν </p>
<h1> θείκελν </h1>
<h2> θείκελν </h2>
<b> θείκελν </b> ή <strong> </strong>
<u> θείκελν </u>
<em> θείκελν </em>
![Page 12: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/12.jpg)
Δπεξήγηζη Tags
Δνηολή Απσή Τέλορ
Κώδηθαο HTML <html> </html>
Τίηινο Ιζηνζειίδαο <title> </title>
Νέα Παξάγξαθνο <p> </p>
Κεθαιίδα επηπέδνπ 1 <h1> </h1>
Κεθαιίδα επηπέδνπ 2 <h2> </h2>
Ένηονο – bold <b> ή <strong> </b> ή </strong>
Υπνγξάκκηζε <u> </u>
Πλάγια – Italics <em> </em >
Σρόιηα <! -- -->
Πξνζνρή ζηελ ηειεπηαία εληνιή ππάξρνπλ δύν παύιεο όρη κία
![Page 13: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/13.jpg)
Γομή Κώδικα HTML
1. Πξνζδηόξηζε ηελ έθδνζε ηεο HTML πνπ ρξεζηκνπνηείο
2. Δλεκέξσζε ηνλ κεηαθξαζηή-compiler όηη αθνινύζεί
θώδηθαο html
3. Γξάςε ζρόιηα (πξναηξεηηθά) γηα ην ηη θάλεη ην πξόγξακκα
4. Μνξθνπνίεζε ηελ θεθαιίδα (head, title)
5. Κιείζε ηελ θεθαιίδα
6. Πξόζζεζε ην θπξίσο κέξνο ηνπ θώδηθα (body)
7. Κιείζε ην θπξίσο κέξνο
8. Δλεκέξσζε ηνλ κεηαθξαζηή-compiler όηη ηειείσζε ν
θώδηθαο html
![Page 14: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/14.jpg)
Γημιοςπγία ΗΤΜL
Αλνίμηε ην πξόγξακκα Notepad
Απνζεθέπζεηε ην αξρείν - θαηάιεμε HTM ή
HTML
Γξάςηε ηνλ θώδηθα
Απνζεθέπζεηε θαη πάιη
Γηα λα ην ηξέμεηε, εληόπηζηε ην αξρείν πνπ
δεκηνπξγήζαηε θαη θάληε δηπιό θιηθ πάλσ ζε
απηό
![Page 15: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/15.jpg)
Παπάδειγμα 1 - HTML
<! DOCTYPE HTML PUBLIC "-//W3C// DTD HTML 4.01 // EN“
"http://www.w3.org/TR/html4/strict.dtd">
<!-- COMMENTS for example 1 -->
<html>
<head>
<title> COURSE ON XML - HTML example 1 </title>
</head>
<body>
<p> WELCOME TO OUR SITE! </p>
</body>
</html>
![Page 16: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/16.jpg)
Παπάδειγμα 1
![Page 17: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/17.jpg)
Αποηέλεζμα
Καη απηό είλαη ην θείκελν
ηνπ θπξίνπ κέξνπο (body)
Απηό είλαη ην θείκελν
ηνπ ηίηινπ (title)
![Page 18: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/18.jpg)
Γημιοςπγήζηε ηο ππώηο ζαρ
ππόγπαμμα ζε ΗΤΜL
Τν πξόγξακκα ζα πξέπεη λα :
Να δίλεη έλα ηίηιν ζηε ζειίδαο ζαο θαη λα
Δκθαλίδεη έλα κήλπκα ζηελ νζόλε
![Page 19: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/19.jpg)
Παπάδειγμα 2 –Κεθαλίδερ
Φξεζηκνπνηώληαο ηηο εληνιέο h1, h2, ... h6
δεκηνπξγήζηε έλα HTML πξόγξακκα πνπ λα
παξάγεη ηελ παξαθάησ ηζηνζειίδα
![Page 20: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/20.jpg)
Παπάδειγμα 2 - Κεθαλίδερ<! DOCTYPE HTML PUBLIC "-//W3C// DTD HTML 4.01 // EN“
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<!-- COMMENTS for example 2 - header.html -->
<!-- HTML headers -->
<head>
<title> COURSE ON XML - HTML example 2 - Headers</title>
</head>
<body>
<h1>Level 1 Header</h1> <!-- Level 1 header -->
<h2>Level 2 header</h2> <!-- Level 2 header -->
<h3>Level 3 header</h3> <!-- Level 3 header -->
<h4>Level 4 header</h4> <!-- Level 4 header -->
<h5>Level 5 header</h5> <!-- Level 5 header -->
<h6>Level 6 header</h6> <!-- Level 6 header -->
</body>
</html>
![Page 21: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/21.jpg)
Γημιοςπγία Σςνδέζμων-Eνηολή <a href>
Σύληαμε 1νο ηξόπνο: Σύλδεζε Ιζηνζειίδαο
<a href = “Link - Ηιεθηξνληθή Γηέπζπλζε Internet” > Όλνκα </a>
Παξάδεηγκα
<a href = "http://www.Google.gr"> Google </a>
Σύληαμε 2νο ηξόπνο: Σύλδεζε Ηιεθηξνληθήο Γηεύζπλζεο email
<a href = “mailto: Ηιεθηξνληθή Γηέπζπλζε email” > Όλνκα </a>
Παξάδεηγκα
<a href = "mailto:[email protected]"> [email protected]</a>
![Page 22: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/22.jpg)
Παπάδειγμα 3 – Υπεπζύνδεζμοι
Φξεζηκνπνηώληαο ππεξζπλδέζκνπο δεκηνπξγήζηε
κία ηζηνζειίδα πνπ λα πεξηέρεη 5 links ζε κεραλέο
αλαδήηεζεο.
Αθνινύζσο πξνζζέζηε έλα link πξνο ην
ειεθηξνληθό ζαο ηαρπδξνκείν.
![Page 23: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/23.jpg)
Παπάδειγμα 3 – Υπεπζύνδεζμοι
![Page 24: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/24.jpg)
Παπάδειγμα 3 – Υπεπζύνδεζμοι
![Page 25: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/25.jpg)
Πποζθήκη Δικόνων
Βαζικά Γομικά Σηοισεία
<img src=“picture1.jpg" width="200"
height="150">
Η ιδιόηηηα alt
<img src=“picture1.jpg" width="200" height="150"
alt="My Picture">
Alt = Ιδηόηεηα Rollover – όηαλ ην mouse βξίζθεηαη
πάλσ από ηελ εηθόλα, ηόηε εκθαλίδεη ην όλνκα ηεο
εηθόλαο
![Page 26: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/26.jpg)
Παπάδειγμα 4 – Δικόνερ
Γεκηνπξγήζηε έλα πξόγξακκα ην νπνίν εκθαλίδεη
εηθόλεο νη νπνίεο βξίζθνληαη
Α) ζην ίδην επξεηήξην κε ην πξόγξακκα ζαο.
Β) ζην desktop
Γ) C:\html_photos
![Page 27: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/27.jpg)
Παπάδειγμα 4 – Δικόνερ
![Page 28: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/28.jpg)
Πποζθήκη Δικόνων
Πποζοσή :
Για εικόνα πος βπίζκεηαι ζηο ίδιο εςπεηήπιο
<img src= “ όλνκα εηθόλαο” π.ρ. picture1.jpg
Για εικόνα πος βπίζκεηαι ζηο desktop
<img src="file://C:/Users/.../Desktop/όλνκα εηθόλαο"
Για εικόνα πος βπίζκεηαι ζε άλλο εςπεηήπιο
<img src="file://C:\...\ όλνκα εηθόλαο"
![Page 29: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/29.jpg)
ΛίζηερΣηελ HTML ππάξρεη 3 είδε ιίζησλ:
Μη απιθμημένη (σπήζη bullet)
• Item A
• Item B
Απιθμημένη λίζηα
1. Item A
2. Item B
Λίζηα οπιζμών
Item A
Ο νξηζκόο ηνπ Α
Item B
Ο νξηζκόο ηνπ Β
![Page 30: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/30.jpg)
Μη Απιθμημένη Λίζηα
Σύνηαξη
<ul>
<li> Σηνηρείν Α </li>
<li> Σηνηρείν B </li>
<li> Σηνηρείν Γ</li>
</ul>
![Page 31: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/31.jpg)
Σύνηαξη
<ol>
<li> Σηνηρείν Α </li>
<li> Σηνηρείν Β </li>
<li> Σηνηρείν Γ </li>
</ol>
Απιθμημένη Λίζηα
![Page 32: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/32.jpg)
Σύνηαξη
<dl>
<dt> Σηνηρείν Α </dt>
<dd> Οξηζκόο Σηνηρείνπ Α </dd>
<dt > Σηνηρείν Β </dt>
<dd> Οξηζκόο Σηνηρείνπ Β </dd>
<dt > Σηνηρείν Γ </dt>
<dd> Οξηζκόο Σηνηρείνπ Γ </dd>
</dl>
Λίζηα Οπιζμών
![Page 33: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/33.jpg)
Παπάδειγμα 5
![Page 34: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/34.jpg)
Παπάδειγμα 5
![Page 35: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/35.jpg)
Παπάδειγμα 5 –
Μη Απιθμημένη Λίζηα
Γεκηνπξγήζηε έλα πξόγξακκα ην νπνίν εκθαλίδεη
κηα κε αξηζκεκέλε ιίζηα κε ηα logo 3 εηαηξεηώλ
αζιεηηθώλ εηδώλ. Τα logo ζα είλαη ηα εκπνξηθά
ζήκαηα ησλ εηαηξεηώλ (εηθόλεο) θαη θάλνληαο θιηθ
πάλσ ζε απηά ζα πξέπεη λα πεγαίλεηε ζηελ
αληίζηνηρε ζειηδα.
![Page 36: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/36.jpg)
Παπάδειγμα 5 –
Μη Απιθμημένη Λίζηα
![Page 37: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/37.jpg)
Παπάδειγμα 6
![Page 38: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/38.jpg)
Παπάδειγμα 6
![Page 39: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/39.jpg)
Γιασωπιζμόρ Τμημάηων
Δληνιή hr: Πξνζζέηεη κία δηαρσξηζηηθή
γξακκή
Σύληαμε
<hr>
![Page 40: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/40.jpg)
Πίνακερ – Διζαγωγικέρ Έννοιερ<TABLE><CAPTION>My Table </CAPTION>
<TR><TD> Value 1 </TD><TD> Value 223 </TD><TD> Value 34 </TD></TR>
<TR><TD> Value 49 </TD> <TD> Value 5423 </TD><TD> Value 6.1 </TD></TR>
</TABLE>
<TR>
Γπαμμή πίνακα
<TD>
Γεδομένα
<Table>
Απσή Πίνακα
<Caption>
Τίηλορ Πίνακα
![Page 41: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/41.jpg)
Tags Πίνακα
Δνηολή Απσή Τέλορ
Κώδηθαο πίλαθα <table> </table>
Τίηινο πίλαθα <caption> </caption>
Κεθαιίδεο πίλαθα <thead> </thead>
Σώκα πίλαθα <tbody> </tbody>
Γξακκή πίλαθα <tr> </tr>
Τίηινο θεθαιίδαο <th> </th>
Γεδνκέλα γξακκήο <td> </td >
<Table Border = “1”> Δκθάληζε πεξηγξάκκαηνο πίλαθα
<Table Border = “0”> Δκθάληζε πίλαθα ρσξίο πεξίγξακκα
![Page 42: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/42.jpg)
<h1>Table Example - MARKS </h1>
<table border = "1">
<caption> MARKS DISTRIBUTION </caption>
<thead>
<tr>
<th> GRADE </th>
<th> MALE </th>
<th> FEMALE </th>
<th> TOTAL </th>
</tr>
</thead>
Παπάδειγμα 7a
![Page 43: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/43.jpg)
<tbody>
<tr>
<th> A </th>
<td> 10 </td>
<td> 12</td>
<td> 22</td>
</tr>
...
</tbody>
</table>
Παπάδειγμα 7b
![Page 44: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/44.jpg)
Παπάδειγμα 7
![Page 45: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/45.jpg)
Διζαγωγή ζηιρ Φόπμερ - Forms
• Basic Form tag:
<FORM></FORM>
• Naming the Form
<FORM name=“formtest”>
• Form Type
<form method="POST" action="mailto:[email protected]?subject=test" enctype="text/plain">
![Page 46: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/46.jpg)
• Input Type
<INPUT TYPE="TEXT" NAME="item1" SIZE="15">
• Radio Button:
<INPUT TYPE="RADIO" NAME="Question1”>
• Check Box:
<INPUT TYPE="checkbox" NAME=“Question2">
Διζαγωγή ζηιρ Φόπμερ - Forms
![Page 47: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/47.jpg)
Basic Forms
• Text Box:
<TEXTAREA name=“comments" rows=10
cols=55></TEXTAREA>
• Submit Form:
<input type=submit value="Submit
Form">
• Reset Form:
<input type=reset value="Erase And
Start Over">
![Page 48: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/48.jpg)
XML
![Page 49: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/49.jpg)
Παπάδειγμα XML
<note>
<to> Tom </to>
<from> Jerry </from>
<heading> Reminder </heading>
<body> Do not forget our meeting this weekend! </body>
</note>
Πεξηγξάςηε ηη θάλεη απηό ην κήλπκα
![Page 50: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/50.jpg)
Άζκηζη XML
![Page 51: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/51.jpg)
Όνομα Κώζηαρ
Φύιν Άξξελ
Ηκ.
Γέλλεζεο
21.10.80
ΑΦΜ 046782931
Adapter
XML
XML XML
Όνομα Κώζηαρ
Φύιν Α
Ηκ.
Γέλλεζεο
21 ΟΚΤ 1980
ΑΦΜ 046782931
XML
![Page 52: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/52.jpg)
Από Κώζηα
Πξνο Pizzeria
Δίδνο Pizza Special
Πνζόηεηα 2
Από Ππορ
Κώζηα Pizzeria
Pizzeria Supermarket
Message Broker
XML
XML
XMLXML
Από Ππορ
Κώζηα Pizzeria
XML Based Integration
![Page 53: Δπγαζηήπιο 1: HTML - Εύδοξος 1... · λ ίλαη θααξνηθά –Fatal. Tags Γειώλνπλ ελ αξρή θαη ν έινο κηαο λνιήο HTML Τα Tags](https://reader031.vdocuments.site/reader031/viewer/2022021818/5aa488867f8b9a7c1a8c45a7/html5/thumbnails/53.jpg)
Web Application
Web Services
Web Service