1. Εισαγωγή
• Οι ιστοσελίδες αποτελούν τη βάση
του διαδικτύου. Από την απλή
παρουσίαση κειμένων και εικόνων
μέχρι τις σύνθετες διαδραστικές
εφαρμογές, οι ιστοσελίδες έχουν
εξελιχθεί σημαντικά. Σήμερα,
χρησιμοποιούνται για ευρεία γκάμα
λειτουργιών, από ενημέρωση και
εκπαίδευση έως διασκέδαση και
ηλεκτρονικό εμπόριο.
2. HTML - Η Βάση
της Δομής
• Παράδειγμα Κώδικα:
<!DOCTYPE html>
<html>
<head>
<title>Τίτλος Σελίδας</title>
</head>
<body>
<h1>Κεντρικός Τίτλος</h1>
<p>Παράγραφος με κείμενο.</p>
<a
href="https://www.example.com">Σύνδεσμος</a
>
</body>
</html>
3. CSS - Στυλ και
Εμφάνιση
• Παράδειγμα κώδικα:
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: navy;
margin-bottom: 20px;
}
p {
line-height: 1.5;
color: #333;
}
5. Τεχνικές για τη Δημιουργία
Ανταποκρίσιμων Σχεδίων
(Responsive Designs)
• Παράδειγμα Media Query:
@media screen and (max-width: 600px)
{
body {
background-color: lightblue;
}
}
6. JavaScript - Δυναμική
Συμπεριφορά
• Βασική Διαχείριση Στοιχείων με
JavaScript:
document.getElementById("demo").innerHTM
L = "Καλώς ήρθατε στην ιστοσελίδα μας!";
• Αλληλεπίδραση με τον Χρήστη:
if (confirm("Θέλετε να συνεχίσετε;")) {
alert("Ευχαριστούμε για τη συνέχεια!");
} else {
alert("Ακυρώσατε την ενέργεια.");
}
7. Πώς το JavaScript
Βελτιώνει την Εμπειρία
του Χρήστη
Το JavaScript επιτρέπει τη δημιουργία διαδραστικών ιστοσελίδων που ανταποκρίνονται στις ενέργειες του
χρήστη με τον εξής τρόπο:
Διαχείριση Συμβάντων (Event Handling):
• Το JavaScript μπορεί να ανιχνεύει συμβάντα όπως το κλικ του χρήστη σε ένα κουμπί, το υποβολή μιας
φόρμας, η αλλαγή του περιεχομένου ενός πεδίου εισόδου και άλλα.
• Όταν συμβεί ένα συμβάν, μπορούμε να εκτελέσουμε κώδικα JavaScript που αντιδρά σε αυτό το συμβάν.
• Παράδειγμα: Ένα κλικ σε ένα κουμπί ενεργοποιεί μια λειτουργία, όπως την υποβολή μιας φόρμας.
Δυναμική Αλλαγή Περιεχομένου:
• Με το JavaScript, μπορούμε να αλλάξουμε δυναμικά το περιεχόμενο μιας ιστοσελίδας χωρίς την ανάγκη
φόρτωσης μιας νέας σελίδας από τον διακομιστή.
• Αυτό επιτρέπει τη δημιουργία αναδυόμενων μενού, διαφορετικών παραθύρων και άλλων στοιχείων που
αλλάζουν δυναμικά χωρίς ανανέωση της σελίδας.
• Παράδειγμα: Ένα αναδυόμενο μενού που εμφανίζεται όταν ο χρήστης κάνει κλικ σε ένα κουμπί.
Επικοινωνία με τον Διακομιστή (AJAX):
• Το JavaScript μπορεί να επικοινωνεί δυναμικά με τον διακομιστή, χωρίς να ανανεώνει τη σελίδα, για να
λάβει ή να στείλει δεδομένα.
• Αυτό επιτρέπει την ανανέωση τμημάτων της σελίδας χωρίς τον πλήρη επαναφορτωμένο της.
• Παράδειγμα: Φόρτωση νέων δεδομένων στη σελίδα χωρίς να χρειάζεται η ανανέωση της σελίδας.
8. Σύνδεση των Αρχείων HTML, CSS και
JavaScript
Σύνδεση του Αρχείου HTML:
• Ξεκινάμε με το αρχείο HTML, το οποίο πρέπει να έχει την επέκταση ".html".
• Στο <head> του HTML, χρησιμοποιούμε την ετικέτα <link> για να συνδέσουμε το
αρχείο CSS.
• Επίσης, χρησιμοποιούμε την ετικέτα <script> για να συνδέσουμε το αρχείο
JavaScript.
<!DOCTYPE html> <html lang="en"> <head> <meta
charset="UTF-8"> <meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Εκπαιδευτική Πλατφόρμα</title> <link rel="stylesheet"
href="styles.css"> <!-- Σύνδεση με το αρχείο CSS --> </head>
<body> <!-- Περιεχόμενο σελίδας --> <script
src="script.js"></script> <!-- Σύνδεση με το αρχείο JavaScript --
> </body> </html>
9. Παράδειγμα
Εφαρμογής
Σελίδα Επιχειρηματικής Παρουσίασης:
• Παρουσίαση ενός παραδείγματος
ιστοσελίδας επιχειρηματικής
παρουσίασης που χρησιμοποιεί HTML
για τη δομή, CSS για την εμφάνιση και
JavaScript για δυναμικές λειτουργίες.
Αυτή η ιστοσελίδα μπορεί να
περιλαμβάνει κινούμενα στοιχεία,
φόρμες επικοινωνίας, και
αλληλεπίδραση με τον χρήστη.
12. // script.js
document.addEventListener("DOMContentLoaded",
function () { const contactForm =
document.getElementById("contact-form");
contactForm.addEventListener("submit", function (event) {
event.preventDefault(); // Εδώ μπορείτε να προσθέσετε
τον κώδικα για την επεξεργασία της φόρμας και την
αποστολή των δεδομένων. alert("Το μήνυμά σας
αποστάλθηκε επιτυχώς!"); }); });
JavaScript
13. Παράδειγμα
Εφαρμογής
Διαδραστική Εκπαιδευτική Πλατφόρμα:
• Παρουσίαση μιας εκπαιδευτικής
ιστοσελίδας που χρησιμοποιεί
ταυτόχρονα HTML για τη δομή των
μαθημάτων, CSS για το στυλ και τη
διάταξη, και JavaScript για τις
διαδραστικές εκπαιδευτικές
δραστηριότητες. Αυτό το παράδειγμα
μπορεί να περιλαμβάνει δυναμικά quiz,
προβολή πολυμέσων και
παρακολούθηση της προόδου του
χρήστη.
16. // script.js
document.addEventListener("DOMContentLoaded",
function () { const startQuizButton =
document.querySelector(".start-quiz"); const quizForm =
document.getElementById("quiz-form");
startQuizButton.addEventListener("click", function () { //
Εδώ μπορείτε να προσθέσετε τον κώδικα για την έναρξη
του Quiz. alert("Ξεκινά το Quiz!"); });
quizForm.addEventListener("submit", function (event) {
event.preventDefault(); // Εδώ μπορείτε να προσθέσετε
τον κώδικα για την αξιολόγηση του Quiz. alert("Το Quiz
ολοκληρώθηκε!"); }); });
JavaScript
![/* styles.css */ body { font-family: Arial, sans-serif; margin: 0;
padding: 0; background-color: #f0f0f0; } header {
background-color: #333; color: white; text-align: center;
padding: 20px; } nav ul { list-style-type: none; padding: 0; }
nav li { display: inline; margin-right: 20px; } nav a { text-
decoration: none; color: #333; } main { max-width: 800px;
margin: 0 auto; padding: 20px; } .lesson, .quiz { margin-
bottom: 30px; } .lesson h2, .quiz h2 { color: #333; } .start-
quiz, button[type="submit"] { background-color: #333; color:
white; padding: 10px 20px; border: none; cursor: pointer; }
.start-quiz:hover, button[type="submit"]:hover { background-
color: #555; }
CSS3](https://image.slidesharecdn.com/newmicrosoftpowerpointpresentation-231225224321-d99beef6/85/New-Microsoft-PowerPoint-Presentation-pptx-15-320.jpg)
