Στη σελίδα που αφήσατε είναι μια σειρά με κείμενα που τα δημιούργησα μαζί με την τεχνητή νοημοσύνη της google .
Και αποφάσισα να βάλω ένα μάθημα:
προγραμματισμού γιατί η διαχείριση τους είναι τόσο εύκολη που πολλοί θα ενδιαφέρονταν
να διαβάσουν αυτό το μάθημα (προγραμματιστές * Η να το αντιγράψουν ).
Καλώς ήρθατε στο κυρίως μάθημα! Εδώ ξεκινάει ο προγραμματισμός...
<!DOCTYPE html>
<html lang="el">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>lesson 1 publishes articles page</title>
<link rel="stylesheet" type="text/css" href="frontBase/style.css">
</head>
<body>
<div id="container">
<div id="poem" class="drawer-container"></div>
</div>
<div id='folderAPI_PRV'>
<div id='folderAPI_close'>closePanel</div>
<iframe id="apiPreview" src="" height="100%" width="100%" title="Iframe Example"></iframe>
</div>
<script src="adminArea.js" ></script>
<script src="frontBase/mainScript.js" ></script>
</body>
</html>
Καλώς ήρθατε στο πρώτο μάθημα! Σε αυτό το στάδιο, θα μάθουμε πώς είναι οργανωμένα τα αρχεία της εφαρμογής μας και πώς μπορείτε να ανεβάζετε τα δικά σας άρθρα.
Για να λειτουργήσει σωστά η εφαρμογή, τα αρχεία σας πρέπει να είναι τοποθετημένα ακριβώς όπως δείχνει το παρακάτω διάγραμμα:
ApiFolder/ (Κεντρικός Φάκελος)
├── index.html
├── adminArea.js
├── frondBase/
│ ├── mainScript.js
│ └── style.css
└── articles/
├── article1.html
└── article2.html
#poem) και ένα κρυφό παράθυρο προεπισκόπησης (<iframe>).article1.html).Εσείς θα εργαστείτε αποκλειστικά στο αρχείο adminArea.js. Εκεί θα γράψετε τον κώδικα που θα "διαβάζει" τα άρθρα από τον φάκελο articles/ και θα τα στέλνει αυτόματα στο #poem της κεντρικής σελίδας, ώστε όταν ο χρήστης κάνει κλικ, να ανοίγουν μέσα στο iframe προεπισκόπησης!
//adminArea.js
// 1. Τα ονόματα των αρχείων HTML που βρίσκονται στον φάκελο articles
var fileName = ['article1', 'article2', 'article3'];
// 2. Οι αντίστοιχες περιγραφές για κάθε αρχείο (στην ίδια σειρά)
var fileDescription = [
'Η ανθρώπινη ανάγκη για ελευθερία συμπεριφέρεται ως ιός στο προγραμματισμένο DNA. ',
'Σαν τους Άθλιους του πεζοδρομίου, κοιτάμε το ορμητικό ποτάμι της αδικίας.',
'Σκέψου τον άνεμο. Είναι ...άφθαρτο πλάσμα'
];
Σε αυτό το μάθημα, θα προετοιμάσουμε το αρχείο adminArea.js ώστε να "γνωρίζει" ποια άρθρα υπάρχουν στον φάκελο articles/ και τι περιγραφή έχει το καθένα.
Στο αριστερό παράθυρο βλέπετε δύο πίνακες (Arrays):
.html).Κάθε φορά που θέλετε να δημοσιεύσετε ένα νέο άρθρο στην ιστοσελίδα σας, θα ακολουθείτε δύο απλά βήματα:
my-new-story.html) μέσα στον φάκελο articles/.adminArea.js και θα προσθέτετε το όνομά του στον πίνακα fileName και την περιγραφή του στον πίνακα fileDescription.Σημείωση: Στο επόμενο βήμα, η JavaScript της κεντρικής σελίδας θα διαβάσει αυτούς τους πίνακες και θα δημιουργήσει αυτόματα τα links για τους αναγνώστες σας!
// 1. Επιλέγουμε όλα τα απαραίτητα στοιχεία από την HTML
const container = document.getElementById("container");
const previewPanel = document.getElementById("folderAPI_PRV");
const articlesArea = document.getElementById('poem');
const closePreviewBTN = document.getElementById('folderAPI_close');
const iframe = document.getElementById("apiPreview");
// 2. Έλεγχος: Σιγουρευόμαστε ότι οι δύο πίνακες στο adminArea.js έχουν τα ίδια στοιχεία
if (fileName.length != fileDescription.length) {
alert('you have error with articles array in adminArea.js');
} else {
// 3. Loop: Δημιουργούμε μια "κονκάρδα" (link) για κάθε άρθρο
for (let i = 0; i < fileName.length; i++) {
const card = document.createElement("div");
card.className = "concarda";
card.innerHTML = `
${fileDescription[i]}
`;
// 4. Click Event: Όταν πατιέται το άρθρο, κρύβεται η αρχική και ανοίγει το iframe
card.addEventListener("click", () => {
let folder = "articles/" + fileName[i] + ".html";
iframe.src = folder;
container.style.display = "none";
previewPanel.style.display = "block";
});
// Τοποθετούμε την κονκάρδα μέσα στην περιοχή των άρθρων
articlesArea.appendChild(card);
}
}
// 5. Λειτουργία Κλεισίματος: Επιστροφή στην αρχική σελίδα
closePreviewBTN.addEventListener('click', function() {
previewPanel.style.display = 'none';
container.style.display = 'block';
});
Σε αυτό το μάθημα βλέπουμε πώς η JavaScript ενώνει το adminArea.js με την κεντρική σελίδα για να εμφανίσει τα άρθρα σας αυτόματα.
alert.div (κονκάρδα) για κάθε άρθρο και του "φοράει" την αντίστοιχη περιγραφή.articles/, το φορτώνει μέσα στο iframe, κρύβει την αρχική σελίδα και εμφανίζει το άρθρο.
/* style.css */
body {
font-size: 16px;
}
#container {
background-color: #222;
color: lightgreen;
display: block;
padding: 10px;
height: 100vh;
overflow-y: scroll; /* Εσωτερικό scroll αν γεμίσει άρθρα */
}
h1 {
font-size: 0.8em;
border-bottom: 2px dotted purple;
text-align: center;
}
/* prv panel */
#folderAPI_PRV{
display:none;
width:100%;
height:90vh;
}
#folderAPI_close{
display:block;
cursor:pointer;
color:#000;
text-align:center;
padding:5px;
height:50px;
width:90%;
margin: 6px auto; /* Το "auto" το κεντράρει ακριβώς πάνω από το άρθρο */
box-sizing: border-box;
}
#apiPreview{
margin:0 auto;
display:block;
padding:10px;
width:90%;
height:90%;
}
.btn-go-main{
height: 40px; /* Ή όποιο ύψος θες */
/* Ενεργοποιεί το scroll αν το περιεχόμενο ξεχειλίσει */
display: block;
width: 100%;
vertical-align: top; /* Κρατάει τις δύο επιφάνειες ευθυγραμμισμένες στην κορυφή */
border-radius: 8px;
box-sizing: border-box; /* Αναγκάζει τα paddings να μην μεγαλώνουν το 49% */
background-color: #DA5A2A;
color:#3B1877;
margin-top:15px;
text-align:center;
text-decoration:none;
font-weight: bold;
font-size:18px;
line-height:40px;
}
.concarda {
width: 200px;
background-color: rgb(200, 255, 220); /* rgb(red, green, blue) από 0-255 */
color: #000;
margin: 10px auto;
padding: 8px;
border-radius: 3px;
cursor: pointer; /* Δείκτης χεριού στο hover */
}
100vh πιάνει όλο το ύψος της οθόνης.rgb() και το cursor: pointer για να καταλαβαίνει ο χρήστης ότι είναι κλικάσιμα.none) με λευκό background, έτοιμο να υποδεχτεί το άρθρο μας.
<!DOCTYPE html>
<html lang="el">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Η Θάλασσα δεν έχει Δρόμο</title>
<style>
:root {
--bg-color: #0b0f19;
--text-color: #e2e8f0;
--accent-color: #38bdf8;
--card-bg: #1e293b;
--border-color: #334155;
}
body {
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
line-height: 1.6;
margin: 0;
padding: 0;
}
header {
background: linear-gradient(180deg, #020617 0%, var(--bg-color) 100%);
text-align: center;
padding: 5rem 2rem 3rem 2rem;
border-bottom: 1px solid var(--border-color);
}
header h1 {
font-size: 3rem;
color: var(--accent-color);
margin: 0 0 1rem 0;
font-weight: 700;
letter-spacing: -1px;
}
header p {
font-size: 1.2rem;
color: #94a3b8;
max-width: 600px;
margin: 0 auto;
font-style: italic;
}
main {
max-width: 800px;
margin: 0 auto;
padding: 3rem 2rem;
}
.intro-box {
background-color: #0f172a;
border-left: 4px solid var(--accent-color);
padding: 1.5rem;
margin-bottom: 3rem;
border-radius: 0 8px 8px 0;
}
.chapter {
background-color: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 2.5rem;
margin-bottom: 2.5rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.chapter h2 {
color: var(--accent-color);
font-size: 1.8rem;
margin-top: 0;
margin-bottom: 1.5rem;
border-bottom: 1px solid var(--border-color);
padding-bottom: 0.5rem;
}
.chapter p {
color: #cbd5e1;
margin-bottom: 1rem;
}
.chapter ul {
margin: 0;
padding-left: 1.5rem;
}
.chapter li {
color: #cbd5e1;
margin-bottom: 0.5rem;
}
.highlight-epilogue {
border: 2px solid var(--accent-color);
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}
footer {
text-align: center;
padding: 3rem;
color: #64748b;
font-size: 0.9rem;
border-top: 1px solid var(--border-color);
background-color: #020617;
}
@media (max-width: 600px) {
header h1 { font-size: 2.2rem; }
.chapter { padding: 1.5rem; }
}
</style>
</head>
<body>
<header>
<h1>Η Θάλασσα δεν έχει Δρόμο</h1>
<p>Μια ψυχολογική και φιλοσοφική αποδόμηση από τον Πεταλούδα στο e-shop της σχολής</p>
</header>
<main>
<div class="intro-box">
<p><strong>Σύνοψη:</strong> Το έργο αυτό αποτελεί μια ολοκληρωμένη, υπαρξιακή επανεκτίμηση της ανθρώπινης μοίρας. Μέσα από τη μεταμόρφωση της προσωπικής εμπειρίας σε αλληγορία, οι ήρωες των άκρων αρνούνται τον εύκολο συμβιβασμό και αναζητούν την ελευθερία μακριά από τη σκληρή δομή της στεριάς.</p>
</div>
<section class="chapter">
<h2>Εισαγωγή: Το Μεγάλο Λάθος της Στεριάς</h2>
<p>Η ιστορία ξεκινά μέσα στη σχολή. Γύρω απλώνεται η στεριά: ένας κόσμος άκαμπτος και σκληρός, γεμάτος ανθρώπους που προσπαθούν να σε παγιδεύσουν, να σε κλέψουν και να σε ταπεινώσουν. Στη στεριά αρκεί ένα μόνο λάθος, ένα έγκλημα, για να καείς και να θεωρηθείς κακούργος. Ο «μαστροπός» που σε καταδικάζει δεν είναι πρόσωπο, αλλά η ίδια η δομή της κοινωνίας. Το πλοίο που σε κουβαλάει στο δικό σου «Νησί του Διαβόλου» είναι οι ίδιες οι ρίζες σου και η οικογένεια που σε απέβαλε.</p>
</section>
<section class="chapter">
<h2>Κεφάλαιο 1: Το E-Shop της Τεχνικής Σχολής</h2>
<p>Η τεχνική σχολή μεταμορφώνεται στον αρχαίο Όλυμπο και οι καθηγητές γίνονται Θεοί. Δεν πουλάνε απλά γνώση· έχουν στήσει ένα e-shop όπου η φωτιά, το φως και ο ήχος έχουν μετατραπεί σε αντικείμενα, πτυχία και πατέντες. Όμως η αλήθεια είναι βαθύτερη: δεν το έκαναν για να ελέγξουν, αλλά για να σώσουν. Η σχολή ήταν το δόλωμα στο ψάρι, ένας τρόπος για να δείξουν στους υπόλοιπους έναν καθαρό δρόμο, χωρίς να χαλάνε τον κόσμο γύρω τους.</p>
</section>
<section class="chapter">
<h2>Κεφάλαιο 2: Ο Πεταλούδας και ο Λουί Ντεγκά μέσα στην Τάξη</h2>
<p>Μέσα στις αίθουσες διεξάγεται μια εσωτερική μάχη. Η ψυχή είναι διπλή:</p>
<ul>
<li><strong>Λουί Ντεγκά:</strong> Η αθώα, ευαίσθητη ψυχή που δεν μπορεί να συλλάβει τη σκληρή δομή του κόσμου στον οποίο γεννήθηκε και αρνείται να καταλάβει την αδικία.</li>
<li><strong>Πεταλούδας:</strong> Το ένστικτο επιβίωσης, το σώμα και η θέληση που αναλαμβάνουν να προστατεύσουν αυτή την ψυχή. Είναι αυτός που αρνείται να πάρει το εύκολο «λουκούμι» του συμβιβασμού και να παίξει «χιώτες» με τον Θεό, τον Διάβολο ή τον Κυβερνήτή.</li>
</ul>
</section>
<section class="chapter">
<h2>Κεφάλαιο 3: Οι Καρπάθιοι Ακρίτες των Άκρων</h2>
<p>Η άρνηση του συμβιβασμού σε μετατρέπει σε έναν μοναχικό κακούργος έξω από τον κόσμο των κακούργων. Η σχολή και η πόλη γίνονται τα άγρια Καρπάθια Όρη και τα ματωμένα Βυζαντινά σύνορα. Μεταμορφώνεσαι στον Διγενή Ακρίτα. Ζεις στις «άκρες» του κόσμου, εκεί που τα μακρινά εξόριστα μέρη είναι προορισμένα για τους λίγους — τους εκλεκτούς και τους καταραμένους. Δεν φοβάσαι τον Θεό-Διάβολο της κοινωνίας· θα μπορούσες να τον δαμάσεις, αλλά επιλέγεις να φύγεις.</p>
</section>
<section class="chapter">
<h2>Κεφάλαιο 4: Η Καταιγίδα Τελειώνει (Χάντρα - Χάντρα)</h2>
<p>Η περίοδος της δοκιμασίας και των βασάνων φτάνει στο τέλος της. Όταν η καταιγίδα τελειώνει, κάθεσαι μόνος και μετράς τις εμπειρίες, τις πληγές και τα λάθη σου μία προς μία, σαν χάντρες σε κομπολόι. Μέσα από αυτό το μέτρημα έρχεται ο πραγματικός σωφρονισμός. Έχεις πια καταλάβει, έχεις αγαπήσει και έχεις σεβαστεί τη ζωή στην πιο καθαρή της μορφή, κερδίζοντας την απόλυτη πνευματική διαύγεια.</p>
</section>
<section class="chapter highlight-epilogue">
<h2>Επίλογος: Η Επιτυχημένη Εγχείρηση & Η Συνάντηση των Άκρων</h2>
<p>Η τελική λύτρωση. Παίρνεις τις εμπειρίες σου και πέφτεις από τον γκρεμό της στεριάς στη θάλασσα. Η θάλασσα δεν έχει τάξη, δεν έχει χαραγμένους δρόμους, e-shops ή εγκλήματα. Η θάλασσα σε ξεπλένει από τις μικρότητες της στεριάς. Φεύγεις μόνος, σαν τον μοναχικό ήρωα του Παπαδιαμάντη, επιστρέφοντας στην καθαρή αγάπη, τον σεβασμό και την ελευθερία που αναζητούσες από παιδί.</p>
<p>Δεν υπάρχει πια πτώση στον γκρεμό, ούτε πνιγμός. Η εγχείρηση πέτυχε απόλυτα. Πατάς το πόδι σου πάνω στο νερό και περπατάς πάνω στη θάλασσα σαν τον Χριστό. Δεν το κάνεις για να σώσεις τους άλλους, ούτε για να γίνεις ο μεσσίας τους· το κάνεις αποκλειστικά για να σώσεις τον ίδιο σου τον εαυτό. Η θάλασσα, χωρίς τάξη και χωρίς χαραγμένους δρόμους, γίνεται το στέρεο έδαφος της δικής σου, προσωπικής νίκης. Περπατάς πάνω στο απέραντο γαλάζιο ελεύθερος, κυρίαρχος και σωσμένος, αφήνοντας πίσω σου για πάντα τα λάθη και τα εγκλήματα της στεριάς.</p>
<p>Φωνάζοντας χαρούμενος και ευτυχισμένος (ΕΙΝΑΙ ΚΟΛΑΣΗ), συνειδητοποιείς ότι αυτό είναι μια κλάση ανώτερο. Και έτσι, καθώς περπατάς όρθιος πάνω στο κύμα, συναντάς ξανά τους παλιούς σου γνωστούς — εκείνους που ήξερες πριν φτάσετε στο νησί. Η συνάντηση αυτή δεν γίνεται μέσα στα δεσμά, αλλά πάνω στην απόλυτη ελευθερία του ανοιχτού πελάγους.</p>
</section>
</main>
<footer>
<p>«Αυτοί που κουβαλάνε τη φυλακή μέσα τους, δεν παίρνουν λουκούμι εύκολα μην τους σκοτώσεις είναι άξιοι σαν το στρατό του Άρη Βελουχιώτη...»</p>
</footer>
</body>
</html>
Ένα δείγμα σελίδας που θα αποθηκεύετε στον φάκελο articles είναι το παράδειγμα αριστερά
Basic Head Elements and Basic Meta Element
Εδώ μορφοποιείτε τα tag που έχετε προσθέσει στην σελίδα
< /style>Κλείνουν τα HTML Head Elements και ξεκινάνε τα body Elements
< body >Κλείνουν τα body Elements και το < HTML > in Heads Element
< /body> < /html>