aboutsummaryrefslogtreecommitdiff
path: root/files/el/learn
diff options
context:
space:
mode:
authorRyan Johnson <rjohnson@mozilla.com>2021-04-29 16:16:42 -0700
committerGitHub <noreply@github.com>2021-04-29 16:16:42 -0700
commit95aca4b4d8fa62815d4bd412fff1a364f842814a (patch)
tree5e57661720fe9058d5c7db637e764800b50f9060 /files/el/learn
parentee3b1c87e3c8e72ca130943eed260ad642246581 (diff)
downloadtranslated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz
translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2
translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip
remove retired locales (#699)
Diffstat (limited to 'files/el/learn')
-rw-r--r--files/el/learn/common_questions/how_does_the_internet_work/index.html98
-rw-r--r--files/el/learn/common_questions/index.html135
-rw-r--r--files/el/learn/common_questions/pages_sites_servers_and_search_engines/index.html128
-rw-r--r--files/el/learn/common_questions/what_are_hyperlinks/index.html92
-rw-r--r--files/el/learn/forms/form_validation/index.html870
-rw-r--r--files/el/learn/forms/index.html84
-rw-r--r--files/el/learn/getting_started_with_the_web/index.html58
-rw-r--r--files/el/learn/html/index.html58
-rw-r--r--files/el/learn/index.html124
-rw-r--r--files/el/learn/javascript/first_steps/index.html67
-rw-r--r--files/el/learn/javascript/index.html55
11 files changed, 0 insertions, 1769 deletions
diff --git a/files/el/learn/common_questions/how_does_the_internet_work/index.html b/files/el/learn/common_questions/how_does_the_internet_work/index.html
deleted file mode 100644
index de72dbcd54..0000000000
--- a/files/el/learn/common_questions/how_does_the_internet_work/index.html
+++ /dev/null
@@ -1,98 +0,0 @@
----
-title: Πώς δουλεύει το Διαδίκτυο;
-slug: Learn/Common_questions/How_does_the_Internet_work
-tags:
- - Αρχάριος
- - Εκμάθηση
- - Μηχανισμοί Ιστού
-translation_of: Learn/Common_questions/How_does_the_Internet_work
-original_slug: Learn/Common_questions/Πώς_δουλεύει_το_Διαδίκτυο
----
-<div class="summary">
-<p>Αυτό το άρθρο συζητά τι είναι το Διαδίκτυο και πώς δουλεύει.</p>
-</div>
-
-<table class="learn-box standard-table">
- <tbody>
- <tr>
- <th scope="row">Προαπαιτούμενα:</th>
- <td>Κανένα, αλλά σας παροτρύνουμε να διαβάσετε το <a href="/en-US/docs/Learn/Thinking_before_coding">Άρθρο στη θέσπιση στόχων</a> πρώτα.</td>
- </tr>
- <tr>
- <th scope="row">Ζητούμενο:</th>
- <td>Θα μάθετε τα βασικά για την τεχνική υποδομή του Ιστού και τη διαφορά μεταξύ Διαδικτύου και Ιστού.</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Περίληψη">Περίληψη</h2>
-
-<p>Το Διαδίκτυο είναι η ραχοκοκαλιά του Ιστού, η τεχνική υποδομή που καθιστά τον Ιστό δυνατό. Στη βάση του, το Διαδίκτυο είναι ένα μεγάλο δίκτυο από υπολογιστές που επικοινωνούν όλοι μεταξύ τους.</p>
-
-<p><a href="http://en.wikipedia.org/wiki/Internet#History" rel="external">Η ιστορία του Διαδικτύου είναι κάπως ασαφής</a>. Ξεκίνησε στα 1960 ως ένα ερευνητικό έργο χρηματοδοτούμενο απ' τον στρατό των ΗΠΑ, μετά εξελίχθηκε σε μια δημόσια υποδομή στα 1980 με την υποστήριξη πολλών δημοσίων πανεπιστημίων και ιδιωτικών εταιριών. Οι διάφορες τεχνολογίες που υποστηρίζουν το Διαδίκτυο έχουν εξελιχθεί με το χρόνο, αλλά ο τρόπος που δουλεύει δεν έχει αλλάξει και πολύ: Διαδίκτυο είναι ένας τρόπος να συνδέεις υπολογιστές όλους μεταξύ τους, και να εξασφαλίζεις ότι, ό,τι κι αν συμβεί, βρίσκουν ένα τρόπο να παραμένουν συνδεδεμένοι.</p>
-
-<h2 id="Διαδραστική_Μαθηση">Διαδραστική Μαθηση</h2>
-
-<ul>
- <li><a href="https://www.youtube.com/watch?v=7_LPdttKXPc" rel="external">Πώς δουλεύει το διαδίκτυο, σε 5 λεπτά</a>: Ένα 5 λεπτών βίντεο για την κατανόηση των πολύ βασικών εννοιών του Διαδικτύου απ' τον Άαρον Τίτους.</li>
-</ul>
-
-<h2 id="Βαθύτερη_κατάδυση">Βαθύτερη κατάδυση</h2>
-
-<h3 id="Ένα_απλό_δίκτυο">Ένα απλό δίκτυο</h3>
-
-<p>Όταν δύο υπολογιστές χρειάζεται να επικοινωνήσουν, πρέπει να τους ενώσεις, είτε φυσικά (συνήθως με ένα <a href="http://en.wikipedia.org/wiki/Ethernet_crossover_cable" rel="external">καλώδιο Ethernet</a>) είτε ασύρματα (για παράδειγμα με <a href="http://en.wikipedia.org/wiki/WiFi" rel="external">WiFi</a> ή <a href="http://en.wikipedia.org/wiki/Bluetooth" rel="external">Bluetooth</a> συστήματα). Όλοι οι σύγχρονοι υπολογιστές μπορούν να υποστηρίξουν οποιεσδήποτε από αυτές τις συνδέσεις.</p>
-
-<div class="note">
-<p><strong>Σημείωση:</strong> Για το υπόλοιπο αυτού του άρθρου, θα μιλήσουμε μόνο για φυσικά καλώδια, αλλά τα ασύρματα δίκτυα δουλεύουν παρόμοια.</p>
-</div>
-
-<p><img alt="Two computers linked together" src="https://mdn.mozillademos.org/files/8441/internet-schema-1.png" style="height: 152px; width: 600px;"></p>
-
-<p>Ένα τέτοιο δίκτυο δεν είναι περιορισμένο σε δύο υπολογιστές. Μπορείτε να συνδέσετε όσους υπολογιστές επιθυμείτε. Αλλά γίνεται πολύπλοκο γρήγορα. Εάν προσπαθείτε να συνδέσετε, πείτε, δέκα υπολογιστές, χρειάζετε 45 καλώδια, με εννέα πρίζες σε κάθε υπολογιστή!</p>
-
-<p><img alt="Ten computers all together" src="https://mdn.mozillademos.org/files/8443/internet-schema-2.png" style="height: 576px; width: 600px;"></p>
-
-<p>Για να λυθεί αυτό το πρόγραμμα, κάθε υπολογστής σε ένα δίκτυο είναι συνδεδεμένος σε ένα ειδικό μικρό υπολογιστή που ονομάζεται <em>δρομολογητής</em> (<em>router</em>). Αυτός ο <em>δρομολογητής</em> έχει μόνο μια δουλειά: σαν ένα σηματοδότη σε σιδηροδρομικό σταθμό, εξασφαλίζει ότι ένα μήνυμα σταλμένο από έναν υπολογιστή φθάνει στο σωστό υπολογιστή προορισμού. Για να στείλει ένα μήνυμα στον υπολογιστή Β, ο υπολογιστής Α πρέπει να στείλει το μήνυμα στο δρομολογητή, ο οποίος με τη σειρά του προωθεί το μήνυμα στον υπολογιστή Β και σιγουρεύεται ότι το μήνυμα δεν παραδώθηκε στον υπολογιστή C.</p>
-
-<p>Μόλις προσθέσουμε ένα δρομολογητή στο σύστημα, το δίκτυο μας των 10 υπολογιστών απαιτεί μόνο 10 καλώδια: μία μονή πρίζα για κάθε υπολογιστή και ένα δρομολογητή με 10 βύσματα.</p>
-
-<p><img alt="Ten computers with a router" src="https://mdn.mozillademos.org/files/8445/internet-schema-3.png" style="height: 576px; width: 600px;"></p>
-
-<h3 id="Ένα_δίκτυο_δικτύων">Ένα δίκτυο δικτύων</h3>
-
-<p>Μέχρι εδώ καλά. Αλλά τι γίνεται με εκατοντάδες, χιλιάδες, εκατομμύριους υπολογιστές; Φυσικά ένας μόνος <em>δρομολογητής</em> δεν κλιμακώνεται τόσο πολύ, αλλά, αν διαβάσετε προσεκτικά, είπαμε ότι ένας<em> δρομολογητής</em> είναι ένας υπολογιστής όπως όλοι οι άλλοι, οπότε τι μας αποτρέπει απ' την ένωση δύο <em>δρομολογητών</em> μαζί; Τίποτα, οπότε ας το κάνουμε.</p>
-
-<p><img alt="Two routers linked together" src="https://mdn.mozillademos.org/files/8447/internet-schema-4.png"></p>
-
-<p>Συνδέοντας υπολογιστές σε δρομολογητές, είμαστε ικανοί να κλιμακώσουμε απεριόριστα.</p>
-
-<p><img alt="Routers linked to routers" src="https://mdn.mozillademos.org/files/8449/internet-schema-5.png" style="height: 563px; width: 600px;"></p>
-
-<p>Ένα τέτοιο δίκτυο έρχεται πολύ κοντά σε αυτό που ονομάζουμε το Διαδίκτυο, αλλά μας λείπει κάτι. Φτιάξαμε ένα δίκτυο για τους δικούς μας σκοπούς. Υπάρχουν και άλλα δικτύα εκεί έξω: οι φίλοι σας, οι γείτονές σας, όλοι μπορούν να έχουν το δικό τους δίκτυο από υπολογιστές. Αλλά δεν είναι πραγματικά εφικτό να εγκαταστήσετε καλώδια μεταξύ του σπιτιού σας και του υπόλοιπου κόσμου, όποτε πώς το διαχειρίζεστε; Λοιπόν, υπάρχουν ήδη καλώδια συνδεδεμένα με το σπίτι σας, για παράδειγμα, ηλεκτρικής ενέργειας και τηλεφώνου. Η τηλεφωνική υποδομή ήδη συνδέει το σπίτι σας με οποιονδήποτε στον κόσμο οπότε είναι το τέλειο καλώδιο που χρειαζόμαστε. Για να συνδέσουμε το δίκτυό μας στην τηλεφωνική υποδομή, χρειαζόμαστε ένα ειδικό κομμάτι εξοπλισμού που λέγεται <em>μόντεμ.</em> Αυτό το <em>μόντεμ</em> μετατρέπει την πληροφορία από το δίκτυό μας σε πληροφορία διαχειρίσιμη απ' την τηλεφωνική υποδομή και τούμπαλιν.</p>
-
-<p><img alt="A router linked to a modem" src="https://mdn.mozillademos.org/files/8451/internet-schema-6.png" style="height: 340px; width: 600px;"></p>
-
-<p>Οπότε είμαστε συνδεδεμένοι στην τηλεφωνική υποδομή. Το επόμενο βήμα είναι να στείλουμε μηνύματα από το δίκτυό μας στο δίκτυο που θέλουμε να συνδεθούμε. Για να το κάνουμε αυτό, θα συνδέσουμε το δίκτυό μας σε έναν Πάροχο Διαδικτυακών Υπηρεσιών (Internet Service Provider). Ένας Πάροχος Διαδικτυακών Υπηρεσιών (ISP) είναι μια εταιρία που διαχειρίζεται μερικούς ειδικούς <em>δρομολογητές</em> που συνδέονται όλοι μεταξύ τους και μπορούν επίσης να προσπελάσουν τους δρομολογητές άλλων Παρόχων. Οπότε το μήνυμα απ' το δίκτυό μας μεταφέρεται μέσω του δικτύου των δικτύων των Παρόχων στο δίκτυο προορισμού. Το Διαδίκτυο αποτελείται από όλη αυτήν την υποδομή των δικτύων.</p>
-
-<p><img alt="Full Internet stack" src="https://mdn.mozillademos.org/files/8453/internet-schema-7.png" style="height: 1293px; width: 340px;"></p>
-
-<h3 id="Εύρεση_υπολογιστών">Εύρεση υπολογιστών</h3>
-
-<p>Εάν θέλετε να στείλετε ένα μήνυμα σε έναν υπολογιστή, πρέπει να διευκρινίσετε σε ποιον. Επομένως οποιoσδήποτε υπολογιστής συνδεδεμένος σε ένα δίκτυο έχει μια μοναδική διεύθυνση για την αναγνώρισή του, που λέγεται «διεύθυνση IP» (όπου το IP σημαίνει <em>Πρωτόκολλο Διαδικτύου - Internet Protocol</em>). Είναι μια διεύθυνση αποτελούμενη από μια σειρά τεσσάρων αριθμών χωριζόμενων από τελείες, για παράδειγμα: <code>192.168.2.10</code>.</p>
-
-<p>Αυτό είναι απολύτως φυσιολογικό για υπολογιστές, αλλά εμείς τα ανθρώπινα όντα δυσκολευόμαστε στη θύμηση τέτοιων διευθύνσεων. Για να γίνουν τα πράγματα ευκολότερα, μπορούμε να δώσουμε ψευδώνυμο σε μια διεύθυνση IP με ένα ανθρωπίνως αναγνώσιμο όνομα που λέγεται <em>όνομα τομέα</em> (<em>domain name</em>)<em>. </em>Για παράδειγμα, <code>google.com</code> είναι το όνομα τομέα που χρησιμοποιείται έναντι της IP διεύθυνσης <code>173.194.121.32</code>. Οπότε χρησιμοποιώντας το όνομα τομέα είναι ο ευκολότερος τρόπος για εμάς να συνδεόμαστε με έναν υπολογιστή μέσω του Διαδικτύου.</p>
-
-<p><img alt="Show how a domain name can alias an IP address" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p>
-
-<h3 id="Διαδίκτυο_και_ο_Ιστός">Διαδίκτυο και ο Ιστός</h3>
-
-<p>Όπως μπορείτε να παρατηρήσετε, όταν περιηγούμαστε στον Ιστό με έναν Περιηγητή Ιστού (Web browser), συνήθως χρησιμοποιούμε το όνομα τομέα για να συνδεθούμε σε έναν ιστότοπο. Αυτό σημαίνει ότι το Διαδίκτυο και ο Ιστός είναι το ίδιο πράγμα; Δεν είναι τόσο απλό. Όπως είδαμε, το Διαδίκτυο είναι η τεχνική υποδομή που επιτρέπει εκατομμύριους υπολογιστές να είναι συνδεδεμένοι όλοι μεταξύ τους. Μεταξύ αυτών των υπολογιστών, μερικοί υπολογιστές (ονομαζόμενοι (<em>Διακομιστές Ιστού - Web Servers</em>) μπορούν να στείλουν μηνύματα κατανοητά μόνο σε περιηγητές ιστού.<em> </em>Το <em>Διαδίκτυο </em>είναι μια υποδομή, ενώ ο Ιστός είναι μια υπηρεσία δημιουργημένη πάνω στην υποδομή.  Αξίζει να σημειωθεί ότι υπάρχουν αρκετές άλλες υπηρεσίες δημιουργημένες μέσα στο Διαδίκτυο, όπως το η-ταχυδρομείο (email) και το  {{Glossary("IRC")}}.</p>
-
-<h2 id="Επόμενα_βήματα">Επόμενα βήματα</h2>
-
-<ul>
- <li><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">Πώς δουλεύει ο Ιστός</a></li>
- <li><a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine">Κατανοώντας τη διαφορά μεταξύ ιστοσελίδας, ιστοτόπου, και μηχανής αναζήτησης</a></li>
- <li><a href="/en-US/docs/Learn/Understanding_domain_names">Κατανοώντας τα ονόματα τομέα</a></li>
-</ul>
diff --git a/files/el/learn/common_questions/index.html b/files/el/learn/common_questions/index.html
deleted file mode 100644
index 4aafae4a32..0000000000
--- a/files/el/learn/common_questions/index.html
+++ /dev/null
@@ -1,135 +0,0 @@
----
-title: Common questions
-slug: Learn/Common_questions
-tags:
- - CodingScripting
- - Infrastructure
- - Learn
- - NeedsTranslation
- - TopicStub
- - Web
- - WebMechanics
-translation_of: Learn/Common_questions
----
-<div>{{LearnSidebar}}</div>
-
-<p class="summary">This section of the Learning Area is designed to provide answers to common questions that may come up, which are not necessarily part of the structured core learning pathways (e.g. the <a href="/en-US/docs/Learn/HTML">HTML</a> or <a href="/en-US/docs/Learn/CSS">CSS</a> learning articles.) These articles are designed to work on their own.</p>
-
-<h2 id="How_the_Web_works">How the Web works</h2>
-
-<p>This section covers web mechanics —questions relating to general knowledge of the Web ecosystem and how it works.</p>
-
-<dl>
- <dt>
- <h3 id="How_does_the_Internet_work"><a href="/en-US/docs/Learn/Common_questions/How_does_the_Internet_work">How does the Internet work?</a></h3>
- </dt>
- <dd>The <strong>Internet</strong> is the backbone of the Web, the technical infrastructure that makes the Web possible. At its most basic, the Internet is a large network of computers which communicate all together. This article discusses how it works, at a basic level.</dd>
- <dt>
- <h3 id="What_is_the_difference_between_webpage_website_web_server_and_search_engine"><a href="/en-US/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">What is the difference between webpage, website, web server, and search engine?</a></h3>
- </dt>
- <dd>In this article we describe various web-related concepts: webpages, websites, web servers, and search engines. These terms are often confused by newcomers to the Web, or are incorrectly used. Let's learn what they each mean!</dd>
- <dt>
- <h3 id="What_is_a_URL"><a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">What is a URL?</a></h3>
- </dt>
- <dd>With {{Glossary("Hypertext")}} and {{Glossary("HTTP")}}, URL is one of the key concepts of the Web. It is the mechanism used by {{Glossary("Browser","browsers")}} to retrieve any published resource on the web.</dd>
- <dt>
- <h3 id="What_is_a_domain_name"><a href="/en-US/docs/Learn/Common_questions/What_is_a_domain_name">What is a domain name?</a></h3>
- </dt>
- <dd>Domain names are a key part of the Internet infrastructure. They provide a human-readable address for any web server available on the Internet.</dd>
- <dt>
- <h3 id="What_is_a_web_server"><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">What is a web server?</a></h3>
- </dt>
- <dd>The term "Web server" can refer to the hardware or software that serves web sites to clients across the Web — or both of them working together. In this article we go over how web servers work, and why they're important.</dd>
- <dt>
- <h3 id="What_are_hyperlinks"><a href="/en-US/docs/Learn/Common_questions/What_are_hyperlinks">What are hyperlinks?</a></h3>
- </dt>
- <dd>In this article, we'll go over what hyperlinks are and why they matter.</dd>
-</dl>
-
-<h2 id="Tools_and_setup">Tools and setup</h2>
-
-<p>Questions related to the tools/software you can use to build websites.</p>
-
-<dl>
- <dt>
- <h3 id="How_much_does_it_cost_to_do_something_on_the_Web"><a href="/en-US/docs/Learn/Common_questions/How_much_does_it_cost">How much does it cost to do something on the Web?</a></h3>
- </dt>
- <dd>When you're launching a website, you may spend nothing or your costs may go through the roof. In this article we discuss how much everything costs and what you get for what you pay (or don't pay).</dd>
- <dt>
- <h3 id="What_software_do_I_need_to_build_a_website"><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">What software do I need to build a website?</a></h3>
- </dt>
- <dd>In this article we explain which software components you need when you're editing, uploading, or viewing a website.</dd>
- <dt>
- <h3 id="What_text_editors_are_available"><a href="/en-US/docs/Learn/Common_questions/Available_text_editors">What text editors are available?</a></h3>
- </dt>
- <dd>In this article we highlight some things to think about when choosing and installing a text editor for web development.</dd>
- <dt>
- <h3 id="What_are_browser_developer_tools"><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools?</a></h3>
- </dt>
- <dd>Every browser features a set of devtools for debugging HTML, CSS, and other web code. This article explains how to use the basic functions of your browser's devtools.</dd>
- <dt>
- <h3 id="How_do_you_make_sure_your_website_works_properly"><a href="/en-US/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly">How do you make sure your website works properly?</a></h3>
- </dt>
- <dd>So you've published your website online — very good! But are you sure it works properly? This article provides some basic troubleshooting steps.</dd>
- <dt>
- <h3 id="How_do_you_set_up_a_local_testing_server"><a href="/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">How do you set up a local testing server?</a></h3>
- </dt>
- <dd>
- <div>
- <p>This article explains how to set up a simple local testing server on your machine, and the basics of how to use it.</p>
- </div>
- </dd>
- <dt>
- <h3 id="How_do_you_upload_files_to_a_web_server"><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">How do you upload files to a web server?</a></h3>
- </dt>
- <dd>This article shows how to publish your site online with <a class="glossaryLink" href="https://developer.mozilla.org/en-US/docs/Glossary/FTP" title="FTP: FTP (File Transfer Protocol) is the standard network protocol for transferring files from one host to another over the Internet through TCP.">FTP</a> tools — one of the most common ways to get a website online so others can access it from their computers.</dd>
- <dt>
- <h3 id="How_do_I_use_GitHub_Pages"><a href="/en-US/docs/Learn/Common_questions/Using_GitHub_Pages">How do I use GitHub Pages?</a></h3>
- </dt>
- <dd>This article provides a basic guide to publishing content using GitHub's gh-pages feature.</dd>
- <dt>
- <h3 id="How_do_you_host_your_website_on_Google_App_Engine"><a href="/en-US/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">How do you host your website on Google App Engine?</a></h3>
- </dt>
- <dd>Looking for a place to host your website? Here's a step-by-step guide to hosting your website on Google App Engine.</dd>
- <dt>
- <h3 id="What_tools_are_available_to_debug_and_improve_website_performance"><a href="/en-US/docs/Tools/Performance">What tools are available to debug and improve website performance?</a></h3>
- </dt>
- <dd>This set of articles shows you how to use the Developer Tools in Firefox to debug and improve performance of your website, using the tools to check the memory usage, the JavaScript call tree, the amount of DOM nodes being rendered, and more.</dd>
-</dl>
-
-<h2 id="Design_and_accessibility">Design and accessibility</h2>
-
-<p>This section lists questions related to aesthetics, page structure, accessibility techniques, etc.</p>
-
-<dl>
- <dt>
- <h3 id="How_do_I_start_to_design_my_website"><a href="/en-US/docs/Learn/Common_questions/Thinking_before_coding">How do I start to design my website?</a></h3>
- </dt>
- <dd>This article covers the all-important first step of every project: define what you want to accomplish with it.</dd>
- <dt>
- <h3 id="What_do_common_web_layouts_contain"><a href="/en-US/docs/Learn/Common_questions/Common_web_layouts">What do common web layouts contain?</a></h3>
- </dt>
- <dd>When designing pages for your website, it's good to have an idea of the most common layouts. This article runs thorugh some typical web layouts, looking at the parts that make up each one.</dd>
- <dt>
- <h3 id="What_is_accessibility"><a href="/en-US/docs/Learn/Common_questions/What_is_accessibility">What is accessibility?</a></h3>
- </dt>
- <dd>This article introduces the basic concepts behind web accessibility.</dd>
- <dt>
- <h3 id="How_can_we_design_for_all_types_of_users"><a href="/en-US/docs/Learn/Common_questions/Design_for_all_types_of_users">How can we design for all types of users?</a></h3>
- </dt>
- <dd>This article provides basic techniques to help you design websites for any kind of user — quick accessibility wins, and other such things.</dd>
- <dt>
- <h3 id="What_HTML_features_promote_accessibility"><a href="/en-US/docs/Learn/Common_questions/HTML_features_for_accessibility">What HTML features promote accessibility?</a></h3>
- </dt>
- <dd>This article describes specific features of HTML that can be used to make a web page more accessible to people with different disabilities.</dd>
-</dl>
-
-<h2 id="HTML_CSS_and_JavaScript_questions">HTML, CSS and JavaScript questions</h2>
-
-<p>For common solutions to HTML/CSS/JavaScript problems, try the following articles:</p>
-
-<ul>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto">Use HTML to solve common problems</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Howto">Use CSS to solve common problems</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Howto">Use JavaScript to solve common problems</a></li>
-</ul>
diff --git a/files/el/learn/common_questions/pages_sites_servers_and_search_engines/index.html b/files/el/learn/common_questions/pages_sites_servers_and_search_engines/index.html
deleted file mode 100644
index 6ad88733ae..0000000000
--- a/files/el/learn/common_questions/pages_sites_servers_and_search_engines/index.html
+++ /dev/null
@@ -1,128 +0,0 @@
----
-title: >-
- Ποια είναι η διαφορά μεταξύ ιστοσελίδας, ιστότοπου, διακομιστή ιστού, και
- μηχανής αναζήτησης;
-slug: Learn/Common_questions/Pages_sites_servers_and_search_engines
-tags:
- - Αρχάριος
- - Μηχανισμοί Ιστού
- - Χρειάζεται Διαδραστικό Μάθημα
-translation_of: Learn/Common_questions/Pages_sites_servers_and_search_engines
-original_slug: Learn/Common_questions/Σελίδες_τόποι_διακομιστές_και_μηχανές_αναζήτησης
----
-<div class="summary">
-<p><span class="seoSummary">Σε αυτό το άρθρο περιγράφουμε διάφορες έννοιες σχετικά με τον ιστό: ιστότοποι, ιστοσελίδες, διακομιστές ιστού, και μηχανές αναζήτησης. Αυτοί οι όροι συχνά μπερδεύονται απ' τους νεοφερμένους στον ιστό, ή χρησιμοποιούνται λανθασμένα. Ας μάθουμε τι σημαίνει ο κάθε ένας.</span></p>
-</div>
-
-<table class="learn-box standard-table">
- <tbody>
- <tr>
- <th scope="row">Προαπαιτούμενα:</th>
- <td>Θα πρέπει να γνωρίζεις <a href="/en-US/Learn/How_the_Internet_works">πώς δουλεύει το Διαδίκτυο</a>.</td>
- </tr>
- <tr>
- <th scope="row">Ζητούμενο:</th>
- <td>Ικανοί να περιγράψετε τις διαφορές μεταξύ μιας ιστοσελίδας, ενός ιστότοπου, ενός διακομιστή ιστού, και μιας μηχανής αναζήτησης.</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Περίληψη">Περίληψη</h2>
-
-<p>Όπως με κάθε πεδίο γνώσης, ο ιστός έρχεται με πολλές ασυναρτησίες. Μην ανησυχείτε, δε θα σας κατακλύσουμε με όλες αυτές (έχουμε ένα <a href="/en-US/docs/Glossary">γλωσσάρι</a> αν είστε περίεργοι). Ωστόσο, υπάρχουν μερικοί βασικοί όροι που πρέπει να καταλάβετε στο ξεκίνημα, αφού θα ακούσετε αυτές τις εκφράσεις συνεχώς καθώς συνεχίζετε να διαβάζετε. Είναι εύκολο να μπερδέψετε αυτούς τους όρους μερικές φορές, αφού αναφέρονται σε σχετικές μα διαφορετικές λειτουργικότητες. Στην πραγματικότητα, θα δείτε μερικές φορές αυτούς τους όρους να καταχρώνται σε δελτία ειδήσεων και αλλού, οπότε το να τους μπερδέψετε είναι κατανοητό.</p>
-
-<p>Θα καλύψουμε αυτούς τους όρους και τεχνολογίες με περισσότερη λεπτομέρεια καθώς προχωρούμε κι άλλο, αλλά αυτοί οι γρήγοροι ορισμοί θα είναι μια σπουδαία αρχή για σας:</p>
-
-<dl>
- <dt>ιστοσελίδα</dt>
- <dd>Ένα έγγραφο που μπορεί να απεικονιστεί σε ένα πρόγραμμα περιήγησης όπως το Firefox, το Google Chrome, το Opera, το Microsoft Internet Explorer ή Edge, ή το Safari της Apple. Αυτές επίσης συνηθίζεται να λέγονται απλά «σελίδες».</dd>
- <dt>ιστότοπος</dt>
- <dd>Μια συλλογή ιστοσελίδων που είναι ομαδοποιημένες και συνήθως συνδεδεμένες με διάφορους τρόπους. Συνήθως λέγεται ένας «ιστότοπος» ή απλά ένας «τόπος».</dd>
- <dt>διακομιστής ιστού</dt>
- <dd>Ένας υπολογιστής που φιλοξενεί έναν ιστότοπο στο Διαδίκτυο.</dd>
- <dt>μηχανή αναζήτησης</dt>
- <dd>Ένας ιστότοπος που σας βοηθάει να βρείτε άλλες ιστοσελίδες, όπως η Google, η Bing, η Yahoo.</dd>
-</dl>
-
-<p>Ας δούμε μια απλή αναλογία — μια δημόσια βιβλιοθήκη. Αυτά είναι που κάνετε γενικά όταν επισκέπτεστε μια βιβλιοθήκη:</p>
-
-<ol>
- <li>Βρίσκετε ένα ευρετήριο αναζήτησης και ψάχνετε τον τίτλο του βιβλίου που θέλετε.</li>
- <li>Σημειώνετε τον αριθμό καταλόγου του βιβλίου.</li>
- <li>Πηγαίνετε στο συγκεκριμένο τμήμα που περιέχει το βιβλίο, βρίσκετε το σωστό αριθμό καταλόγου, και παίρνετε το βιβλίο.</li>
-</ol>
-
-<p>Ας συγκρίνουμε τη βιβλιοθήκη με ένα διακομιστή ιστού:</p>
-
-<ul>
- <li>Η βιβλιοθήκη είναι σαν έναν εξυπηρετητή ιστού. Έχει διάφορα τμήματα, τα οποία είναι παρόμοια με έναν εξυπηρετητή ιστού που φιλοξενεί πολλαπλούς ιστότοπους.</li>
- <li>Τα διαφορετικά τμήματα (φυσική, μαθηματικά, ιστορία, κ.λπ.) στη βιβλιοθήκη είναι σαν τους ιστότοπους. Κάθε τμήμα είναι σαν ένας μοναδικός ιστότοπος (δύο τμήματα δεν περιέχουν ίδια βιβλία).</li>
- <li>Τα βιβλία στα τμήματα είναι σαν τις ιστοσελίδες. Ένας ιστότοπος μπορεί να έχει πολλές ιστοσελίδες, π.χ., το τμήμα Φυσικής (ο ιστότοπος) θα έχει βιβλία περί θερμοκρασίας, ήχου, θερμοδυναμικής, στατικές, κ.λπ. (οι ιστοσελίδες).</li>
- <li>Το ευρετήριο αναζήτησης είναι σα μια μηχανή αναζήτησης. Κάθε βιβλίο έχει τη δική του μοναδική θέση στη βιβλιοθήκη (δύο βιβλία δε γίνεται να είναι στο ίδιο μέρος) που καθορίζεται απ' τον αριθμό καταλόγου.</li>
- <li>Ομοίως, οι ιστοσελίδες έχουν κι αυτές μοναδικές διευθύνσεις. Αυτές οι μοναδικές διευθύνσεις χρησιμοποιούνται για την ανάκτηση μιας ιστοσελίδας από ένα διακομιστή ιστού πληκτρολογώντας τη διεύθυνση στη γραμμή διεύθυνσης ενός φυλλομετρητή (Mozilla Firefox, Safari, Google chrome, κ.λπ.).</li>
-</ul>
-
-<dl>
- <dt> </dt>
-</dl>
-
-<h2 id="Διαδραστική_μάθηση">Διαδραστική μάθηση</h2>
-
-<p><em>Δεν υπάρχει διαδραστική μάθηση ακόμα. <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">Παρακαλούμε, σκεφτείτε να συνεισφέρετε</a>.</em></p>
-
-<h2 id="Βαθύτερη_κατάδυση">Βαθύτερη κατάδυση</h2>
-
-<p>Λοιπόν, ας σκάψουμε βαθύτερα στο πώς αυτοί οι τέσσερις όροι σχετίζονται και γιατί συγχέονται μερικές φορές μεταξύ τους.</p>
-
-<h3 id="ιστοσελίδα">ιστοσελίδα</h3>
-
-<p>Μια ιστοσελίδα είναι απλά ένα έγγραφο απεικονιζόμενο από έναν {{Glossary("φυλλομετρητή")}}. Τέτοια έγγραφα είναι γραμμένα σε {{Glossary("HTML")}} γλώσσα (την οποία θα εξετάσουμε περαιτέρω με περισσότερη λεπτομέρεια σε <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">άλλα άρθρα</a>). Μια ιστοσελίδα μπορεί να ενσωματώσει μια ποικιλία από διαφορετικούς τύπους πόρων όπως:</p>
-
-<ul>
- <li><em>πληροφορία στυλ (style information)</em> — ελέγχοντας την εμφάνιση και την αίσθηση μιας σελίδας</li>
- <li><em>δέσμες ενεργειών (scripts</em>) — που προσθέτουν διαδραστικότητα στη σελίδα</li>
- <li><em>πολυμέσα (media</em>) — εικόνες, ήχους, και βίντεο.</li>
-</ul>
-
-<div class="note">
-<p><strong>Σημείωση: </strong>Οι φυλλομετρητές μπορούν ακόμη να εμφανίσουν άλλα έγγραφα όπως {{Glossary("PDF")}} αρχεία ή εικόνες, αλλά ο όρος <strong>ιστοσελίδα</strong> αναφέρεται συγκεκριμένα σε HTML έγγραφα. Αλλιώς, χρησιμοποιούμε μόνο τον όρο<strong> έγγραφο</strong>.</p>
-</div>
-
-<p>Όλες οι ιστοσελίδες διαθέσιμες στο διαδίκτυο είναι προσβάσιμες στον ιστό μέσω μιας μοναδικής διεύθυνσης. Για να προσπελάσετε μια σελίδα, απλά πληκτρολογείτε τη διεύθυνσή της στη γραμμή διεύθυνσης του προγράμματος περιήγησής σας:</p>
-
-<p style="text-align: center;"><img alt="Example of a web page address in the browser address bar" src="https://mdn.mozillademos.org/files/8529/web-page.jpg" style="height: 239px; width: 650px;"></p>
-
-<p>Ένας <em>ιστότοπος</em> είναι μια συλλογή συνδεδεμένων ιστοσελίδων (μαζί με τους σχετικούς της πόρους) που μοιράζονται ένα μοναδικό όνομα τομέα. Κάθε ιστοσελίδα δοθείσης του ιστότοπου παρέχει ρητούς συνδέσμους—τις περισσότερες φορές στη μορφή κομματιών κειμένου που είναι δυνατό να γίνει κλικ—που επιτρέπουν το χρήστη να μετακινηθεί από μία σελίδα του ιστότοπου σε μία άλλη.</p>
-
-<p>Για να προσπελάσετε έναν ιστότοπο, πληκτρολογήστε το όνομα τομέα του στη γραμμή διεύθυνσης του φυλλομετρητή σας, και το πρόγραμμα περιήγησης θα εμφανίσει την κύρια ιστοσελίδα του ιστότοπου, ή  <em>αρχική σελίδα - homepage </em>(ανεπίσημα αναφέρεται ως «η αρχική - the home»):</p>
-
-<p><img alt="Example of a web site domain name in the browser address bar" src="https://mdn.mozillademos.org/files/8531/web-site.jpg" style="display: block; height: 365px; margin: 0px auto; width: 650px;"></p>
-
-<p>Οι έννοιες της <em>ιστοσελίδας</em> και του <em>ιστότοπου</em> είναι ιδιαίτερα εύκολο να μπερδευτούν σε έναν ιστότοπο που περιέχει μόνο μια ιστοσελίδα. Ένας τέτοιος ιστότοπος μερικές φορές καλείται <em>μονοσέλιδος ιστότοπος ή single-page website.</em></p>
-
-<h3 id="Διακομιστής_ιστού">Διακομιστής ιστού</h3>
-
-<p>Ένας <em>διακομιστής ιστού </em>είναι ένας υπολογιστής που φιλοξενεί έναν ή περισσότερους ιστότοπους. «Φιλοξενώ» σημαίνει ότι όλες οι <em>ιστοσελίδες</em> και τα υποστηριζόμενα αρχεία τους είναι διαθέσιμα σε αυτόν τον υπολογιστή. Ο <em>διακομιστής ιστού</em> θα στείλει οποιαδήποτε ιστοσελίδα από τον ιστότοπο που φιλοξενεί σε οποιοδήποτε πρόγραμμα περιήγησης του χρήστη, ανά αίτηση του χρήστη.</p>
-
-<p>Μην μπερδεύετε τους <em>ιστότοπους </em>και τους <em>διακομιστές ιστού</em>. Για παράδειγμα, αν ακούσετε κάποιον να λέει, «Ο ιστότοπός μου δεν ανταποκρίνεται», στην πραγματικότητα σημαίνει ότι ο <em>διακομιστής ιστού</em> δεν ανταποκρίνεται και επομένως ο <em>ιστότοπος</em> δεν είναι διαθέσιμος. Πιο σημαντικά, αφού ένας διακομιστής ιστού μπορεί να φιλοξενήσει πολλαπλούς ιστότοπους, ο όρος <em>διακομιστής ιστού</em> δε χρησιμοποιείται ποτέ για να καθορίσει έναν ιστότοπο, μιας και θα προκαλούσε μεγάλη σύγχυση. Στο προηγούμενο μας παράδειγμα, αν λέγαμε, «Ο διακομιστής ιστού μου δεν ανταποκρίνεται», σημαίνει ότι δεν υπάρχει κανένας διαθέσιμος ιστότοπος σε αυτόν τον διακομιστή ιστού.</p>
-
-<h3 id="Μηχανή_αναζήτησης">Μηχανή αναζήτησης</h3>
-
-<p>Οι μηχανές αναζήτησης είναι μια κοινή πηγή σύγχυσης στον ιστό. Μια μηχανή αναζήτησης είναι ένα ειδικό είδος ιστότοπου που βοηθά τους χρήστες να βρουν ιστοσελίδες από <em>άλλους</em> ιστότοπους.</p>
-
-<p>Υπάρχουν πολλές εκεί έξω:<a href="https://www.google.com/"> Google</a>, <a href="https://www.bing.com/">Bing</a>, <a href="https://www.yandex.com/">Yandex</a>, <a href="https://duckduckgo.com/">DuckDuckGo</a>, και πολλές ακόμα. Μερικές είναι γενικού σκοπού, άλλες είναι εξειδικευμένες για συγκεκριμένα θέματα. Χρησιμοποιείστε οποιαδήποτε προτιμάτε.</p>
-
-<p>Πολλοί αρχάριοι του ιστού μπερδεύουν τις μηχανές αναζήτησης με τα προγράμματα περιήγησης. Ας το ξεκαθαρίσουμε: Ένα <strong><em>πρόγραμμα περιήγησης</em></strong> είναι ένα κομμάτι λογισμικού που ανακτά και εμφανίζει ιστοσελίδες· μια <em><strong>μηχανή αναζήτησης</strong></em> είναι ένας ιστότοπος που βοηθά τους ανθρώπους να βρουν ιστοσελίδες από άλλους ιστότοπους. Η σύγχυση προκύπτει επειδή, τη πρώτη φορά που κάποιος ανοίγει ένα πρόγραμμα περιήγησης, ο φυλλομετρητής δείχνει την αρχική σελίδα μιας μηχανής αναζήτησης. Αυτό βγάζει νόημα, γιατί, προφανώς, το πρώτο πράγμα που θέλετε να κάνετε με ένα πρόγραμμα περιήγησης είναι να βρείτε μια ιστοσελίδα για να δείτε. Μην συγχέετε την υποδομή (π.χ., το πρόγραμμα περιήγησης) με την υπηρεσία (π.χ., τη μηχανή αναζήτησης). Η διάκριση θα σας βοηθήσει αρκετά, αλλά ακόμα και μερικοί επαγγελματίες μιλάνε αόριστα, οπότε μη νιώθετε ανήσυχα γι' αυτό.</p>
-
-<p>Εδώ βλέπετε ένα στιγμιότυπο του Firefox που δείχνει την περιοχή αναζήτησης της Google ως την προκαθορισμένη σελίδα έναρξης:</p>
-
-<p><img alt="Example of Firefox nightly displaying a custom Google page as default" src="https://mdn.mozillademos.org/files/8533/search-engine.jpg" style="display: block; height: 399px; margin: 0px auto; width: 650px;"></p>
-
-<h2 id="Επόμενα_βήματα">Επόμενα βήματα</h2>
-
-<ul>
- <li>Σκάψτε βαθύτερα: <a href="/en-US/docs/Learn/What_is_a_web_server">Τι είναι ένας διακομιστής ιστού</a></li>
- <li>Δείτε πώς οι ιστοσελίδες είναι συνδεδεμένες σε έναν ιστότοπο: <a href="/en-US/docs/Learn/Understanding_links_on_the_web">Κατανοώντας τους συνδέσμους στον ιστό</a></li>
-</ul>
-
-<p> </p>
diff --git a/files/el/learn/common_questions/what_are_hyperlinks/index.html b/files/el/learn/common_questions/what_are_hyperlinks/index.html
deleted file mode 100644
index 8c52def6d0..0000000000
--- a/files/el/learn/common_questions/what_are_hyperlinks/index.html
+++ /dev/null
@@ -1,92 +0,0 @@
----
-title: Τι είναι οι υπερσύνδεμοι;
-slug: Learn/Common_questions/What_are_hyperlinks
-translation_of: Learn/Common_questions/What_are_hyperlinks
-original_slug: Learn/Common_questions/Τι_είναι_οι_υπερσύνδεσμοι
----
-<div class="summary">
-<p>Σ' αυτό το άρθρο, θα εξετάσουμε τι είναι οι υπερσύνδεσμοι και γιατί έχουν σημασία.</p>
-</div>
-
-<table class="learn-box standard-table">
- <tbody>
- <tr>
- <th scope="row">Προαπαιτούμενα:</th>
- <td>Θα πρέπει να ξέρετε <a dir="ltr" href="https://developer.mozilla.org/el/docs/Learn/Common_questions/%CE%A0%CF%8E%CF%82_%CE%B4%CE%BF%CF%85%CE%BB%CE%B5%CF%8D%CE%B5%CE%B9_%CF%84%CE%BF_%CE%94%CE%B9%CE%B1%CE%B4%CE%AF%CE%BA%CF%84%CF%85%CE%BF" lang="el">πώς δουλεύει το Διαδίκτυο</a> και να είστε οικίοι με τη <a dir="ltr" href="https://developer.mozilla.org/el/docs/Learn/Common_questions/%CE%A3%CE%B5%CE%BB%CE%AF%CE%B4%CE%B5%CF%82_%CF%84%CF%8C%CF%80%CE%BF%CE%B9_%CE%B4%CE%B9%CE%B1%CE%BA%CE%BF%CE%BC%CE%B9%CF%83%CF%84%CE%AD%CF%82_%CE%BA%CE%B1%CE%B9_%CE%BC%CE%B7%CF%87%CE%B1%CE%BD%CE%AD%CF%82_%CE%B1%CE%BD%CE%B1%CE%B6%CE%AE%CF%84%CE%B7%CF%83%CE%B7%CF%82" lang="el">διαφορά μεταξύ ιστοσελίδας, ιστότοπου, διακομιστή ιστού, και μηχανής αναζήτησης</a>.</td>
- </tr>
- <tr>
- <th scope="row">Ζητούμενο:</th>
- <td>Μάθετε για τους συνδέσμους στον ιστό και γιατί έχουν σημασία.</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Περίληψη">Περίληψη</h2>
-
-<p>Οι Υπερσύνδεσμοι, συνήθως λέγονται σύνδεσμοι, είναι μια θεμελιώδης έννοια πίσω απ' τον Ιστό. Για να εξηγήσουμε τι είναι οι σύνδεσμοι, πρέπει να κάνουμε ένα βήμα πίσω στα πολύ βασικά της αρχιτεκτονικής του Ιστού.</p>
-
-<p>Πίσω στο 1989, ο Τιμ Μπέρνερς-Λι, ο εφευρέτης του Ιστού, μίλησε για τους τρεις πυλώνες που στέκεται ο Ιστός:</p>
-
-<ol>
- <li>{{Glossary("URL")}}, ένα σύστημα διευθύνσεων που καταγράφει τα έγγραφα Ιστού</li>
- <li>{{Glossary("HTTP")}}, ένα πρωτόκολλο επικοινωνίας για να βρίσκει έγγραφα όταν δίνονται με το URL τους.</li>
- <li>{{Glossary("HTML")}}, μια μορφή εγγράφου που επιτρέπει τους ενσωματωμένους <em>υπερσυνδέσμους</em>.</li>
-</ol>
-
-<p>Όπως μπορείτε να δείτε στους τρεις πυλώνες, όλα στον Ιστό περιστρέφονται γύρω από έγγραφα και πώς να τα προσπελάσουμε. Ο αρχικός σκοπός του Ιστού ήταν να παρέχει έναν εύκολο τρόπο να φτάνετε, να διαβάζετε, και να πλοηγήστε σε έγγραφα κειμένου. Από τότε, ο Ιστός έχει εξελιχθεί για να παρέχει πρόσβαση σε εικόνες, βίντεο, και δυαδικά δεδομένα, αλλά αυτές οι βελτιώσεις έχουν αλλάξει ελάχιστα τους τρεις πυλώνες.</p>
-
-<p>Πριν τον Ιστό, ήταν αρκετά δύσκολο να προσπελάσετε έγγραφα και να μεταφέρεστε από το ένα σε άλλο. Όντας ανθρωπίνως αναγνώσιμα, τα URL έκαναν τα πράγματα ευκολότερα, αλλά είναι δύσκολο να πληκτρολογήσετε ένα μακρύ URL όποτε θέλετε να προσπελάσετε ένα έγγραφο. Εδώ είναι που οι υπερσύνδεσμοι άλλαξαν τα πάντα. Οι σύνδεσμοι μπορούν να συσχετίσουν οποιαδήποτε συμβολοσειρά κειμένου με ένα URL, έτσι ώστε ο χρήστης να μπορεί ακαριαία να φτάσει το έγγραφο προορισμού ενεργοποιώντας το σύνδεσμο.</p>
-
-<p>Οι σύνδεσμοι ξεχωρίζουν από το περιβάλλοντα κείμενο με το να είναι υπογραμμισμένοι και σε μπλε κείμενο. Χτυπήστε ελαφρά ή κάντε κλικ σε έναν σύνδεσμο για να τον ενεργοποιήσετε, ή αν χρησιμοποιείτε ένα πληκτρολόγιο, πατήστε Tab μέχρι ο σύνδεσμος να είναι στο επίκεντρο και πατήστε Enter ή το πλήκτρο κενού (Spacebar).</p>
-
-<p><img alt="Example of a basic display and effect of a link in a web page" src="https://mdn.mozillademos.org/files/8625/link-1.png" style="height: 492px; width: 477px;"></p>
-
-<p>Οι σύνδεσμοι είναι η πρωτοπορία που έκανε τον Ιστό τόσο χρήσιμο και πετυχημένο. Στο υπόλοιπο αυτού του άρθρου, συζητάμε τους διάφορους τύπους συνδέσμων και την σημασία τους στη σύγχρονη σχεδίαση Ιστού (Web design).</p>
-
-<h2 id="Deeper_dive">Deeper dive</h2>
-
-<p>As we said, a link is a text string tied to a URL, and we use links to allow easy jumping from one document to another. That said, there are some nuances worth considering:</p>
-
-<h3 id="Types_of_links">Types of links</h3>
-
-<dl>
- <dt>Internal link</dt>
- <dd>A link between two webpages, where both webpages belong to your website, is called an internal link. Without internal links, there's no such thing as a website (unless, of course, it's a one-page website).</dd>
- <dt>External link</dt>
- <dd>A link from your webpage to someone else's webpage. Without external links, there is no Web, since the Web is a network of webpages. Use external links to provide information besides the content available through your webpage.</dd>
- <dt>Incoming links</dt>
- <dd>A link from someone else's webpage to your site. It's the opposite of an external link. Note that you don't have to link back when someone links to your site.</dd>
-</dl>
-
-<p>When you're building a website, focus on internal links, since those make your site usable. Find a good balance between having too many links and too few. We'll talk about designing website navigation in another article, but as a rule, whenever you add a new webpage, make sure at least one of your other pages links to that new page. On the other hand, if your site has more than about ten pages, it's counter-productive to link to every page from every other page.</p>
-
-<p>When you're starting out, you don't have to worry about external and incoming links as much, but they are very important if you want search engines to find your site. (See below for more details.)</p>
-
-<h3 id="Anchors">Anchors</h3>
-
-<p>Most links tie two webpages together. <strong>Anchors </strong>tie two sections of one document together. When you follow a link pointing to an anchor, your browser jumps to another part of the current document instead of loading a new document. However, you make and use anchors the same way as other links.</p>
-
-<p><img alt="Example of a basic display and effect of an anchor in a web page" src="https://mdn.mozillademos.org/files/8627/link-2.png" style="height: 492px; width: 477px;"></p>
-
-<h3 id="Links_and_Search_Engines">Links and Search Engines</h3>
-
-<p>Links matter both to your users and to search engines. Every time search engines crawl a webpage, they index the website by following the links available on the webpage. Search engines not only follow links to discover the various pages of the website, but they also use the link's visible text to determine which search queries are appropriate for reaching the target webpage.</p>
-
-<p>Links influence how readily a search engine will link to your site. The trouble is, it's hard to measure search engines' activities. Companies naturally want their sites to rank highly in search results.  We know the following about how search engines determine a site's rank:</p>
-
-<ul>
- <li>A link's <em>visible text</em> influences which search queries will find a given URL.</li>
- <li>The more <em>incoming links</em> a webpage can boast of, the higher it ranks in search results.</li>
- <li><em>External links </em>influence the search ranking both of source and target webpages, but it is unclear by how much.</li>
-</ul>
-
-<p><a href="http://en.wikipedia.org/wiki/Search_engine_optimization">SEO</a> (search engine optimization) is the study of how to make websites rank highly in search results. Improving a website's use of links is one helpful SEO technique.</p>
-
-<h2 id="Next_steps">Next steps</h2>
-
-<p>Now you'll want to set up some webpages with links.</p>
-
-<ul>
- <li>To get some more theoretical background, learn about <a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">URLs and their structure</a>, since every link points to a URL.</li>
- <li>Want something a bit more practical? The <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a> article of our <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module explains how to implement links in detail.</li>
-</ul>
diff --git a/files/el/learn/forms/form_validation/index.html b/files/el/learn/forms/form_validation/index.html
deleted file mode 100644
index 05df49e7cf..0000000000
--- a/files/el/learn/forms/form_validation/index.html
+++ /dev/null
@@ -1,870 +0,0 @@
----
-title: Επικύρωση δεδομένων φόρμας
-slug: Learn/Forms/Form_validation
-translation_of: Learn/Forms/Form_validation
-original_slug: Learn/HTML/Forms/Επικύρωση_δεδομένων_φόρμας
----
-<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms/How_to_build_custom_form_widgets", "Learn/HTML/Forms")}}</div>
-
-<p class="summary">Η επικύρωση των δεδομένω σε φόρμα, εξασφαλίζει ότι οι χρήστες θα συμπληρώσουν τα πεδία της στην σωστή τους μορφή, ώστε να είνα ιβέβαιο πως τα δεδομένα που θα υποβληθούν θα είναι λειτουργήσουν με επιτυχία από τις άλλες εφαρμογές μας. Αυτό το άρθρο, θα διαπραγματευθεί όλα όσα πρέπει να γνωρίζετε σχετικά με την επικύρωση των δεδομένων.</p>
-
-<table class="learn-box standard-table">
- <tbody>
- <tr>
- <th scope="row">Προαπαιτούμενα:</th>
- <td>Γνώση όρων πληροφορικής, επαρκής κατανόηση των  τεχνολογιών <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, και <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>.</td>
- </tr>
- <tr>
- <th scope="row">Σκοπός:</th>
- <td>Η κατανόηση της σπουδαιότητας της επικύρωσης δεδομένων και πως γίνεται η εφαρμογή της.</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Τι_είναι_η_επικύρωση_δεδομένων_φόρμας">Τι είναι η επικύρωση δεδομένων φόρμας;</h2>
-
-<p>Αν επισκεφτείτε οποιαδήποτε δημοφιλή ιστοσελίδα με φόρμα εγγραφής, θα διαπιστώσετε ότι σας ενημερώνει όταν δεν εισαγάγετε στη σωστή μορφή τα δεδομένα που απαιτεί. Σας ενημερώνει πως:</p>
-
-<ul>
- <li>«Αυτό το πεδίο είναι υποχρεωτικό»  (δεν επιτρέπεται να μείνει κενό)</li>
- <li>«Παρακαλώ εισάγετε τον τηλεφωνικό σας αριθμό στην μορφή xxx-xxxx" (υποχρεωτικά τρεις αριθμοί, μετά παύλα και μετά τέσσερις αριθμοί)</li>
- <li>«Παρακαλώ εισάγετε μια έγκυρη ηλεκτρονική διεύθυνση» (αν η μορφή της διεύθυνσης δεν είναι της μορφής «κάποιος@παράδειγμα.com»)</li>
- <li>«Ο κωδικός ασφαλείας πρέπει να είναι από 8 εως 30 χαρακτήρες, και να περιλαμβάνει κατ' ελάχιστον, ένα κεφαλαίο γράμμα, ένα σύμβολο και έναν αριθμό»</li>
-</ul>
-
-<p>Αυτό καλείται <strong>επικύρωση δεδομένων φόρμας</strong> — όταν εισάγονται δεδομένα, η εφαρμογή ελέγχει ότι τα δεδομένα είναι σωστά. Αν είναι σωστά, η εφαρμογή επιτρέπει τα δεδομένα να υποβληθούν στον εξυπηρετητή και (συνήθως) να αποθηκευτούν σε μια βάση δεδομένων. Αν δεν είναι σωστά τα δεδομένα, ενημερώνει με μήνυμα, εξηγώντας τις διορθώσεις που απαιτούνται. Η επικύρωση δεδομένων φόρμα μπορεί να εφαρμοστεί με διαφορετικούς τρόπους.</p>
-
-<p>Επιδίωξη είναι η εισαγωγή των δεδομένω να είναι όσο το δυνατόν ευκολότερη. Τότε γιατί επιμένουμε να επικυρώνουμε τα δεδομένα στις φόρμες; Για τους τρεις παρακάτω κυρίως λόγους:</p>
-
-<ul>
- <li><strong>Θέλουμε τα σωστά δεδομένα, στην σωστή μορφή</strong>— οι εφαρμογές θα δυσλειτουργήσουν αν τα δεδομένα των χρηστών αποθηκευτούν σε λανθασμένη μορφή, αν δεν έχουν τις σωστές πληροφορίες ή αν έχουν παραλειφθεί πληροφορίες που απαιτούνται.</li>
- <li><strong>We want to protect our users' accounts</strong> — by forcing our users to enter secure passwords, it makes it easier to protect their account information.</li>
- <li><strong>We want to protect ourselves</strong> — there are many ways that malicious users can misuse unprotected forms to damage the application they are part of (see <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Website security</a>).</li>
-</ul>
-
-<h3 id="Different_types_of_form_validation">Different types of form validation</h3>
-
-<p>There are two different types of form validation which you'll encounter on the web:</p>
-
-<ul>
- <li><strong>Client-side validation</strong> is validation that occurs in the browser, before the data has been submitted to the server. This is more user-friendly than server-side validation as it gives an instant response. This can be further subdivided:
-
- <ul>
- <li><strong>JavaScript</strong> validation is coded using JavaScript. It is completely customizable.</li>
- <li><strong>Built-in form validation</strong> using HTML5 form validation features.  This generally does not require JavaScript. Built-in form validation has better performance, but it is not as customizable as JavaScript.</li>
- </ul>
- </li>
- <li><strong>Server-side validation</strong> is validation which occurs on the server, after the data has been submitted.  Server-side code is used to validate the data before it is saved into the database. If the data fails authentication, a response is sent back to the client to tell the user what corrections to make. Server-side validation is not as user-friendly as client-side validation, as it does not provide errors until the entire form has been submitted.  However, server-side validation is your application's last line of defense against incorrect or even malicious data. All popular <a href="/en-US/docs/Learn/Server-side/First_steps/Web_frameworks">server-side frameworks</a> have features for <strong>validating</strong> and <strong>sanitizing</strong> data (making it safe).</li>
-</ul>
-
-<p>In the real world, developers tend to use a combination of client-side and server-side validation.</p>
-
-<h2 id="Using_built-in_form_validation">Using built-in form validation</h2>
-
-<p>One of the features of <a href="/en-US/docs/HTML/HTML5">HTML5</a> is the ability to validate most user data without relying on scripts. This is done by using <a href="/en-US/docs/HTML/HTML5/Constraint_validation">validation attributes</a> on form elements, which allow you to specify rules for a form input like whether a value needs to be filled in, the minimum and maximum length of the data, whether it needs to be a number, an email address, or something else, and a pattern that it must match. If the entered data follows all those rules, it is considered valid; if not, it is considered invalid.</p>
-
-<p>When an element is valid:</p>
-
-<ul>
- <li>The element matches the {{cssxref(":valid")}} CSS pseudo-class; this will let you apply a specific style to valid elements.</li>
- <li>If the user tries to send the data, the browser will submit the form, provided there is nothing else stopping it from doing so (e.g., JavaScript).</li>
-</ul>
-
-<p>When an element is invalid:</p>
-
-<ul>
- <li>The element matches the {{cssxref(":invalid")}} CSS pseudo-class; this will let you apply a specific style to invalid elements.</li>
- <li>If the user tries to send the data, the browser will block the form and display an error message.</li>
-</ul>
-
-<h3 id="Validation_constraints_on_input_elements_—_starting_simple">Validation constraints on input elements — starting simple</h3>
-
-<p>In this section, we'll look at some of the different HTML5 features that can be used to validate {{HTMLElement("input")}} elements.</p>
-
-<p>Let's start with a simple example — an input that allows you to choose your favorite fruit out of a choice of banana or cherry. This involves a simple text {{HTMLElement("input")}} with a matching label, and a submit {{htmlelement("button")}}. You can find the source code on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a>, and a live example below:</p>
-
-<div class="hidden">
-<h6 id="Hidden_code">Hidden code</h6>
-
-<pre class="brush: html">&lt;form&gt;
- &lt;label for="choose"&gt;Would you prefer a banana or cherry?&lt;/label&gt;
- &lt;input id="choose" name="i_like"&gt;
- &lt;button&gt;Submit&lt;/button&gt;
-&lt;/form&gt;</pre>
-
-<pre class="brush: css">input:invalid {
- border: 2px dashed red;
-}
-
-input:valid {
- border: 2px solid black;
-}</pre>
-</div>
-
-<p>{{EmbedLiveSample("Hidden_code", "100%", 50)}}</p>
-
-<p>To begin with, make a copy of <code>fruit-start.html</code> in a new directory on your hard drive.</p>
-
-<h3 id="The_required_attribute">The required attribute</h3>
-
-<p>The simplest HTML5 validation feature to use is the {{htmlattrxref("required", "input")}} attribute — if you want to make an input mandatory, you can mark the element using this attribute. When this attribute is set, the form won't submit (and will display an error message) when the input is empty (the input will also be considered invalid).</p>
-
-<p>Add a <code>required</code> attribute to your input, as shown below:</p>
-
-<pre class="brush: html">&lt;form&gt;
- &lt;label for="choose"&gt;Would you prefer a banana or cherry?&lt;/label&gt;
- &lt;input id="choose" name="i_like" required&gt;
- &lt;button&gt;Submit&lt;/button&gt;
-&lt;/form&gt;</pre>
-
-<p>Also take note of the CSS included in the example file:</p>
-
-<pre class="brush: css">input:invalid {
- border: 2px dashed red;
-}
-
-input:valid {
- border: 2px solid black;
-}</pre>
-
-<p>This causes the input to have a bright red dashed border when it is invalid, and a more subtle black border when valid. Try out the new behaviour in the example below:</p>
-
-<p>{{EmbedLiveSample("The_required_attribute", "100%", 50)}}</p>
-
-<h3 id="Validating_against_a_regular_expression">Validating against a regular expression</h3>
-
-<p>Another very common validation feature is the {{htmlattrxref("pattern","input")}} attribute, which expects a <a href="/en-US/docs/JavaScript/Guide/Regular_Expressions">Regular Expression</a> as its value. A regular expression (regex) is a pattern that can be used to match character combinations in text strings, so they are ideal for form validation (as well as variety of other uses in JavaScript). Regexs are quite complex and we do not intend to teach you them exhaustively in this article.</p>
-
-<p>Below are some examples to give you a basic idea of how they work:</p>
-
-<ul>
- <li><code>a</code> — matches one character that is a (not b, not aa, etc.)</li>
- <li><code>abc</code> — matches <code>a</code>, followed by <code>b</code>, followed by <code>c</code>.</li>
- <li><code>a*</code> — matches the character a, zero or more times (<code>+</code> matches a character one or more times).</li>
- <li><code>[^a]</code> — matches one character that is <strong>not</strong> a.</li>
- <li><code>a|b</code> — matches one character that is a or b.</li>
- <li><code>[abc]</code> — matches one character that is a, b, or c.</li>
- <li><code>[^abc]</code> — matches one character that is <strong>not</strong> a, b, or c.</li>
- <li><code>[a-z]</code> — matches any character in the range a–z, lower case only (you can use <code>[A-Za-z]</code> for lower and upper case, and <code>[A-Z]</code> for upper case only).</li>
- <li><code>a.c</code> — matches a, followed by any character, followed by c.</li>
- <li><code>a{5}</code> — matches a, 5 times.</li>
- <li><code>a{5,7}</code> — matches a, 5 to 7 times, but no less or more.</li>
-</ul>
-
-<p>You can use numbers and other characters in these expressions too, such as:</p>
-
-<ul>
- <li><code>[ -]</code> — matches a space or a dash.</li>
- <li><code>[0-9]</code> — matches any digit in the range 0 to 9.</li>
-</ul>
-
-<p>You can combine these in pretty much any way you want, specifying different parts one after the other:</p>
-
-<ul>
- <li><code>[Ll].*k</code> — A single character that is an upper or lowercase L, followed by zero or more characters of any type, followed by a single lowercase k.</li>
- <li><code>[A-Z][A-Za-z' -]+</code> — A single upper case character followed by one or more characters that are an upper or lower case letter, a dash, an apostrophe, or a space. This could be used to validate the city/town names of English-speaking countries, which need to start with a capital letter, but don't contain any other characters. Examples from the UK include Manchester, Ashton-under-lyne, and Bishop's Stortford.</li>
- <li><code>[0-9]{3}[ -][0-9]{3}[ -][0-9]{4}</code> — A simple match for a US domestic phone number — three digits, followed by a space or a dash, followed by three digits, followed by a space or a dash, followed by four digits. You might have to make this more complex, as some people write their area code in parentheses, but it works for a simple demonstration.</li>
-</ul>
-
-<p>Anyway, let's implement an example — update your HTML to add a <code>pattern</code> attribute, like so:</p>
-
-<pre class="brush: html">&lt;form&gt;
- &lt;label for="choose"&gt;Would you prefer a banana or a cherry?&lt;/label&gt;
- &lt;input id="choose" name="i_like" required pattern="banana|cherry"&gt;
- &lt;button&gt;Submit&lt;/button&gt;
-&lt;/form&gt;</pre>
-
-<div class="hidden">
-<pre class="brush: css">input:invalid {
- border: 2px dashed red;
-}
-
-input:valid {
- border: 2px solid black;
-}</pre>
-</div>
-
-<p>{{EmbedLiveSample("Validating_against_a_regular_expression", "100%", 50)}}</p>
-
-<p>In this example, the {{HTMLElement("input")}} element accepts one of two possible values: the string "banana" or the string "cherry".</p>
-
-<p>At this point, try changing the value inside the <code>pattern</code> attribute to equal some of the examples you saw earlier, and look at how that affects the values you can enter to make the input value valid. Try writing some of your own, and see how you get on! Try to make them fruit-related where possible, so your examples make sense!</p>
-
-<div class="note">
-<p><strong>Note:</strong> Some {{HTMLElement("input")}} element types do not need a {{htmlattrxref("pattern","input")}} attribute to be validated. Specifying the <code>email</code> type for example validates the inputted value against a regular expression matching a well-formed email address (or a comma-separated list of email addresses if it has the {{htmlattrxref("multiple","input")}} attribute). As a further example, fields with the <code>url</code> type automatically require a properly-formed URL.</p>
-</div>
-
-<div class="note">
-<p><strong>Note</strong>: The {{HTMLElement("textarea")}} element does not support the {{htmlattrxref("pattern","input")}} attribute.</p>
-</div>
-
-<h3 id="Constraining_the_length_of_your_entries">Constraining the length of your entries</h3>
-
-<p>All text fields created by ({{HTMLElement("input")}} or {{HTMLElement("textarea")}}) can be constrained in size using the {{htmlattrxref("minlength","input")}} and {{htmlattrxref("maxlength","input")}} attributes. A field is invalid if its value is shorter than the {{htmlattrxref("minlength","input")}} value or longer than the {{htmlattrxref("maxlength","input")}} value. Browsers often don't let the user type a longer value than expected into text fields anyway, but it is useful to have this fine-grained control available.</p>
-
-<p>For number fields (i.e. <code>&lt;input type="number"&gt;</code>), the {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} attributes also provide a validation constraint. If the field's value is lower than the {{htmlattrxref("min","input")}} attribute or higher than the {{htmlattrxref("max","input")}} attribute, the field will be invalid.</p>
-
-<p>Let's look at another example. Create a new copy of the <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a> file.</p>
-
-<p>Now delete the contents of the <code>&lt;body&gt;</code> element, and replace it with the following:</p>
-
-<pre class="brush: html">&lt;form&gt;
- &lt;div&gt;
- &lt;label for="choose"&gt;Would you prefer a banana or a cherry?&lt;/label&gt;
- &lt;input id="choose" name="i_like" required minlength="6" maxlength="6"&gt;
- &lt;/div&gt;
- &lt;div&gt;
- &lt;label for="number"&gt;How many would you like?&lt;/label&gt;
- &lt;input type="number" id="number" name="amount" value="1" min="1" max="10"&gt;
- &lt;/div&gt;
- &lt;div&gt;
- &lt;button&gt;Submit&lt;/button&gt;
- &lt;/div&gt;
-&lt;/form&gt;</pre>
-
-<ul>
- <li>Here you'll see that we've given the <code>text</code> field a <code>minlength</code> and <code>maxlength</code> of 6 — the same length as banana and cherry. Entering less characters will show as invalid, and entering more is not possible in most browsers.</li>
- <li>We've also given the <code>number</code> field a <code>min</code> of 1 and a <code>max</code> of 10 — entered numbers outside this range will show as invalid, and you won't be able to use the increment/decrement arrows to move the value outside this range.</li>
-</ul>
-
-<div class="hidden">
-<pre>input:invalid {
- border: 2px dashed red;
-}
-
-input:valid {
- border: 2px solid black;
-}
-
-div {
- margin-bottom: 10px;
-}</pre>
-</div>
-
-<p>Here is the example running live:</p>
-
-<p>{{EmbedLiveSample("Constraining_the_length_of_your_entries", "100%", 70)}}</p>
-
-<div class="note">
-<p><strong>Note</strong>: <code>&lt;input type="number"&gt;</code> (and other types, like <code>range</code>) can also take a {{htmlattrxref("step", "input")}} attribute, which specifies what increment the value will go up or down by when the input controls are used (like the up and down number buttons).</p>
-</div>
-
-<h3 id="Full_example">Full example</h3>
-
-<p>Here is a full example to show off usage of HTML's built-in validation features:</p>
-
-<pre class="brush: html">&lt;form&gt;
- &lt;p&gt;
- &lt;fieldset&gt;
- &lt;legend&gt;Title&lt;abbr title="This field is mandatory"&gt;*&lt;/abbr&gt;&lt;/legend&gt;
- &lt;input type="radio" required name="title" id="r1" value="Mr"&gt;&lt;label for="r1"&gt;Mr.&lt;/label&gt;
- &lt;input type="radio" required name="title" id="r2" value="Ms"&gt;&lt;label for="r2"&gt;Ms.&lt;/label&gt;
- &lt;/fieldset&gt;
- &lt;/p&gt;
- &lt;p&gt;
- &lt;label for="n1"&gt;How old are you?&lt;/label&gt;
- &lt;!-- The pattern attribute can act as a fallback for browsers which
- don't implement the number input type but support the pattern attribute.
- Please note that browsers that support the pattern attribute will make it
- fail silently when used with a number field.
- Its usage here acts only as a fallback --&gt;
- &lt;input type="number" min="12" max="120" step="1" id="n1" name="age"
- pattern="\d+"&gt;
- &lt;/p&gt;
- &lt;p&gt;
- &lt;label for="t1"&gt;What's your favorite fruit?&lt;abbr title="This field is mandatory"&gt;*&lt;/abbr&gt;&lt;/label&gt;
- &lt;input type="text" id="t1" name="fruit" list="l1" required
- pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range"&gt;
- &lt;datalist id="l1"&gt;
- &lt;option&gt;Banana&lt;/option&gt;
- &lt;option&gt;Cherry&lt;/option&gt;
- &lt;option&gt;Apple&lt;/option&gt;
- &lt;option&gt;Strawberry&lt;/option&gt;
- &lt;option&gt;Lemon&lt;/option&gt;
- &lt;option&gt;Orange&lt;/option&gt;
- &lt;/datalist&gt;
- &lt;/p&gt;
- &lt;p&gt;
- &lt;label for="t2"&gt;What's your e-mail?&lt;/label&gt;
- &lt;input type="email" id="t2" name="email"&gt;
- &lt;/p&gt;
- &lt;p&gt;
- &lt;label for="t3"&gt;Leave a short message&lt;/label&gt;
- &lt;textarea id="t3" name="msg" maxlength="140" rows="5"&gt;&lt;/textarea&gt;
- &lt;/p&gt;
- &lt;p&gt;
- &lt;button&gt;Submit&lt;/button&gt;
- &lt;/p&gt;
-&lt;/form&gt;</pre>
-
-<pre class="brush: css">body {
- font: 1em sans-serif;
- padding: 0;
- margin : 0;
-}
-
-form {
- max-width: 200px;
- margin: 0;
- padding: 0 5px;
-}
-
-p &gt; label {
- display: block;
-}
-
-input[type=text],
-input[type=email],
-input[type=number],
-textarea,
-fieldset {
-/* required to properly style form
- elements on WebKit based browsers */
- -webkit-appearance: none;
-
- width : 100%;
- border: 1px solid #333;
- margin: 0;
-
- font-family: inherit;
- font-size: 90%;
-
- -moz-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-input:invalid {
- box-shadow: 0 0 5px 1px red;
-}
-
-input:focus:invalid {
- outline: none;
-}</pre>
-
-<p>{{EmbedLiveSample("Full_example", "100%", 420)}}</p>
-
-<h3 id="Customized_error_messages">Customized error messages</h3>
-
-<p>As seen in the examples above, each time the user tries to submit an invalid form, the browser displays an error message. The way this message is displayed depends on the browser.</p>
-
-<p>These automated messages have two drawbacks:</p>
-
-<ul>
- <li>There is no standard way to change their look and feel with CSS.</li>
- <li>They depend on the browser locale, which means that you can have a page in one language but an error message displayed in another language.</li>
-</ul>
-
-<table>
- <caption>French versions of feedback messages on an English page</caption>
- <thead>
- <tr>
- <th scope="col">Browser</th>
- <th scope="col">Rendering</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Firefox 17 (Windows 7)</td>
- <td><img alt="Example of an error message with Firefox in French on an English page" src="/files/4329/error-firefox-win7.png" style="height: 97px; width: 228px;"></td>
- </tr>
- <tr>
- <td>Chrome 22 (Windows 7)</td>
- <td><img alt="Example of an error message with Chrome in French on an English page" src="/files/4327/error-chrome-win7.png" style="height: 96px; width: 261px;"></td>
- </tr>
- <tr>
- <td>Opera 12.10 (Mac OSX)</td>
- <td><img alt="Example of an error message with Opera in French on an English page" src="/files/4331/error-opera-macos.png" style="height: 83px; width: 218px;"></td>
- </tr>
- </tbody>
-</table>
-
-<p>To customize the appearance and text of these messages, you must use JavaScript; there is no way to do it using just HTML and CSS.</p>
-
-<p>HTML5 provides the <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#the-constraint-validation-api" rel="external">constraint validation API</a> to check and customize the state of a form element. Among other things, it's possible to change the text of the error message. Let's see a quick example:</p>
-
-<pre class="brush: html">&lt;form&gt;
- &lt;label for="mail"&gt;I would like you to provide me an e-mail&lt;/label&gt;
- &lt;input type="email" id="mail" name="mail"&gt;
- &lt;button&gt;Submit&lt;/button&gt;
-&lt;/form&gt;</pre>
-
-<p>In JavaScript, you call the <a href="/en-US/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()"><code>setCustomValidity()</code></a> method:</p>
-
-<pre class="brush: js">var email = document.getElementById("mail");
-
-email.addEventListener("input", function (event) {
- if (email.validity.typeMismatch) {
- email.setCustomValidity("I expect an e-mail, darling!");
- } else {
- email.setCustomValidity("");
- }
-});</pre>
-
-<p>{{EmbedLiveSample("Customized_error_messages", "100%", 50)}}</p>
-
-<h2 id="Validating_forms_using_JavaScript">Validating forms using JavaScript</h2>
-
-<p>If you want to take control over the look and feel of native error messages, or if you want to deal with browsers that do not support HTML's built-in form validation, you must use JavaScript.</p>
-
-<h3 id="The_HTML5_constraint_validation_API">The HTML5 constraint validation API</h3>
-
-<p>More and more browsers now support the constraint validation API, and it's becoming reliable. This API consists of a set of methods and properties available on each form element.</p>
-
-<h4 id="Constraint_validation_API_properties">Constraint validation API properties</h4>
-
-<table>
- <thead>
- <tr>
- <th scope="col">Property</th>
- <th scope="col">Description</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td><code>validationMessage</code></td>
- <td>A localized message describing the validation constraints that the control does not satisfy (if any), or the empty string if the control is not a candidate for constraint validation (<code>willValidate</code> is <code>false</code>), or the element's value satisfies its constraints.</td>
- </tr>
- <tr>
- <td><code>validity</code></td>
- <td>A {{domxref("ValidityState")}} object describing the validity state of the element.</td>
- </tr>
- <tr>
- <td><code>validity.customError</code></td>
- <td>Returns <code>true</code> if the element has a custom error; <code>false</code> otherwise.</td>
- </tr>
- <tr>
- <td><code>validity.patternMismatch</code></td>
- <td>Returns <code>true</code> if the element's value doesn't match the provided pattern; <code>false</code> otherwise.<br>
- <br>
- If it returns <code>true</code>, the element will match the {{cssxref(":invalid")}} CSS pseudo-class.</td>
- </tr>
- <tr>
- <td><code>validity.rangeOverflow</code></td>
- <td>Returns <code>true</code> if the element's value is higher than the provided maximum; <code>false</code> otherwise.<br>
- <br>
- If it returns <code>true</code>, the element will match the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} and CSS pseudo-class.</td>
- </tr>
- <tr>
- <td><code>validity.rangeUnderflow</code></td>
- <td>Returns <code>true</code> if the element's value is lower than the provided minimum; <code>false</code> otherwise.<br>
- <br>
- If it returns <code>true</code>, the element will match the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} CSS pseudo-class.</td>
- </tr>
- <tr>
- <td><code>validity.stepMismatch</code></td>
- <td>Returns <code>true</code> if the element's value doesn't fit the rules provided by the step attribute; otherwise <code>false</code> .<br>
- <br>
- If it returns <code>true</code>, the element will match the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} CSS pseudo-class.</td>
- </tr>
- <tr>
- <td><code>validity.tooLong</code></td>
- <td>Returns <code>true</code> if the element's value is longer than the provided maximum length; else it wil be false<br>
- <br>
- If it returns <code>true</code>, the element will match the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} CSS pseudo-class.</td>
- </tr>
- <tr>
- <td><code>validity.typeMismatch</code></td>
- <td>Returns true if the element's value is not in the correct syntax; otherwise false.<br>
- <br>
- If it returns <code>true</code>, the element will match the {{cssxref(":invalid")}} CSS pseudo-class.</td>
- </tr>
- <tr>
- <td><code>validity.valid</code></td>
- <td>Returns true if the element's value has no validity problems; false otherwise.<br>
- <br>
- If it returns <code>true</code>, the element will match the {{cssxref(":valid")}} CSS pseudo-class; the {{cssxref(":invalid")}} CSS pseudo-class otherwise.</td>
- </tr>
- <tr>
- <td><code>validity.valueMissing</code></td>
- <td>Returns true if the element has no value but is a required field; false otherwise.<br>
- <br>
- If it returns <code>true</code>, the element will match the {{cssxref(":invalid")}} CSS pseudo-class.</td>
- </tr>
- <tr>
- <td><code>willValidate</code></td>
- <td>Returns <code>true</code> if the element will be validated when the form is submitted; <code>false</code> otherwise.</td>
- </tr>
- </tbody>
-</table>
-
-<h4 id="Constraint_validation_API_methods">Constraint validation API methods</h4>
-
-<table>
- <thead>
- <tr>
- <th scope="col">Method</th>
- <th scope="col">Description</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td><code>checkValidity()</code></td>
- <td>Returns <code>true</code> if the element's value has no validity problems; <code>false</code> otherwise. If the element is invalid, this method also causes an {{event("invalid")}} event at the element.</td>
- </tr>
- <tr>
- <td><code>setCustomValidity(<em>message</em>)</code></td>
- <td>Adds a custom error message to the element; if you set a custom error message, the element is considered to be invalid, and the specified error is displayed. This lets you use JavaScript code to establish a validation failure other than those offered by the standard constraint validation API. The message is shown to the user when reporting the problem.<br>
- <br>
- If the argument is the empty string, the custom error is cleared.</td>
- </tr>
- </tbody>
-</table>
-
-<p>For legacy browsers, it's possible to use a <a href="https://hyperform.js.org/" rel="external">polyfill such as Hyperform </a> to compensate for the lack of support for the constraint validation API. Since you're already using JavaScript, using a polyfill isn't an added burden to your Web site or Web application's design or implementation.</p>
-
-<h4 id="Example_using_the_constraint_validation_API">Example using the constraint validation API</h4>
-
-<p>Let's see how to use this API to build custom error messages. First, the HTML:</p>
-
-<pre class="brush: html">&lt;form novalidate&gt;
- &lt;p&gt;
- &lt;label for="mail"&gt;
- &lt;span&gt;Please enter an email address:&lt;/span&gt;
- &lt;input type="email" id="mail" name="mail"&gt;
- &lt;span class="error" aria-live="polite"&gt;&lt;/span&gt;
- &lt;/label&gt;
- &lt;/p&gt;
- &lt;button&gt;Submit&lt;/button&gt;
-&lt;/form&gt;</pre>
-
-<p>This simple form uses the {{htmlattrxref("novalidate","form")}} attribute to turn off the browser's automatic validation; this lets our script take control over validation. However, this doesn't disable support for the constraint validation API nor the application of the CSS pseudo-class {{cssxref(":valid")}}, {{cssxref(":invalid")}}, {{cssxref(":in-range")}} and {{cssxref(":out-of-range")}} classes. That means that even though the browser doesn't automatically check the validity of the form before sending its data, you can still do it yourself and style the form accordingly.</p>
-
-<p>The <a href="/en-US/docs/Accessibility/ARIA/ARIA_Live_Regions"><code>aria-live</code></a> attribute makes sure that our custom error message will be presented to everyone, including those using assistive technologies such as screen readers.</p>
-
-<h5 id="CSS">CSS</h5>
-
-<p>This CSS styles our form and the error output to look more attractive.</p>
-
-<pre class="brush: css">/* This is just to make the example nicer */
-body {
- font: 1em sans-serif;
- padding: 0;
- margin : 0;
-}
-
-form {
- max-width: 200px;
-}
-
-p * {
- display: block;
-}
-
-input[type=email]{
- -webkit-appearance: none;
-
- width: 100%;
- border: 1px solid #333;
- margin: 0;
-
- font-family: inherit;
- font-size: 90%;
-
- -moz-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-/* This is our style for the invalid fields */
-input:invalid{
- border-color: #900;
- background-color: #FDD;
-}
-
-input:focus:invalid {
- outline: none;
-}
-
-/* This is the style of our error messages */
-.error {
- width : 100%;
- padding: 0;
-
- font-size: 80%;
- color: white;
- background-color: #900;
- border-radius: 0 0 5px 5px;
-
- -moz-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.error.active {
- padding: 0.3em;
-}</pre>
-
-<h5 id="JavaScript">JavaScript</h5>
-
-<p>The following JavaScript code handles the custom error validation.</p>
-
-<pre class="brush: js">// There are many ways to pick a DOM node; here we get the form itself and the email
-// input box, as well as the span element into which we will place the error message.
-
-var form = document.getElementsByTagName('form')[0];
-var email = document.getElementById('mail');
-var error = document.querySelector('.error');
-
-email.addEventListener("input", function (event) {
- // Each time the user types something, we check if the
- // email field is valid.
- if (email.validity.valid) {
- // In case there is an error message visible, if the field
- // is valid, we remove the error message.
- error.innerHTML = ""; // Reset the content of the message
- error.className = "error"; // Reset the visual state of the message
- }
-}, false);
-form.addEventListener("submit", function (event) {
- // Each time the user tries to send the data, we check
- // if the email field is valid.
- if (!email.validity.valid) {
-
- // If the field is not valid, we display a custom
- // error message.
- error.innerHTML = "I expect an e-mail, darling!";
- error.className = "error active";
- // And we prevent the form from being sent by canceling the event
- event.preventDefault();
- }
-}, false);</pre>
-
-<p>Here is the live result:</p>
-
-<p>{{EmbedLiveSample("Example_using_the_constraint_validation_API", "100%", 130)}}</p>
-
-<p>The constraint validation API gives you a powerful tool to handle form validation, letting you have enormous control over the user interface above and beyond what you can do just with HTML and CSS alone.</p>
-
-<h3 id="Validating_forms_without_a_built-in_API">Validating forms without a built-in API</h3>
-
-<p>Sometimes, such as with legacy browsers or <a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">custom widgets</a>, you will not be able to (or will not want to) use the constraint validation API. In that case, you're still able to use JavaScript to validate your form. Validating a form is more a question of user interface than real data validation.</p>
-
-<p>To validate a form, you have to ask yourself a few questions:</p>
-
-<dl>
- <dt>What kind of validation should I perform?</dt>
- <dd>You need to determine how to validate your data: string operations, type conversion, regular expressions, etc. It's up to you. Just remember that form data is always text and is always provided to your script as strings.</dd>
- <dt>What should I do if the form does not validate?</dt>
- <dd>This is clearly a UI matter. You have to decide how the form will behave: Does the form send the data anyway? Should you highlight the fields which are in error? Should you display error messages?</dd>
- <dt>How can I help the user to correct invalid data?</dt>
- <dd>In order to reduce the user's frustration, it's very important to provide as much helpful information as possible in order to guide them in correcting their inputs. You should offer up-front suggestions so they know what's expected, as well as clear error messages. If you want to dig into form validation UI requirements, there are some useful articles you should read:
- <ul>
- <li>SmashingMagazine: <a href="http://uxdesign.smashingmagazine.com/2012/06/27/form-field-validation-errors-only-approach/" rel="external">Form-Field Validation: The Errors-Only Approach</a></li>
- <li>SmashingMagazine: <a href="http://www.smashingmagazine.com/2009/07/07/web-form-validation-best-practices-and-tutorials/" rel="external">Web Form Validation: Best Practices and Tutorials</a></li>
- <li>Six Revision: <a href="http://sixrevisions.com/user-interface/best-practices-for-hints-and-validation-in-web-forms/" rel="external">Best Practices for Hints and Validation in Web Forms</a></li>
- <li>A List Apart: <a href="http://www.alistapart.com/articles/inline-validation-in-web-forms/" rel="external">Inline Validation in Web Forms</a></li>
- </ul>
- </dd>
-</dl>
-
-<h4 id="Example_that_doesn't_use_the_constraint_validation_API">Example that doesn't use the constraint validation API</h4>
-
-<p>In order to illustrate this, let's rebuild the previous example so that it works with legacy browsers:</p>
-
-<pre class="brush: html">&lt;form&gt;
- &lt;p&gt;
- &lt;label for="mail"&gt;
- &lt;span&gt;Please enter an email address:&lt;/span&gt;
- &lt;input type="text" class="mail" id="mail" name="mail"&gt;
- &lt;span class="error" aria-live="polite"&gt;&lt;/span&gt;
- &lt;/label&gt;
- &lt;p&gt;
- &lt;!-- Some legacy browsers need to have the `type` attribute
- explicitly set to `submit` on the `button`element --&gt;
- &lt;button type="submit"&gt;Submit&lt;/button&gt;
-&lt;/form&gt;</pre>
-
-<p>As you can see, the HTML is almost the same; we just removed the HTML validation features. Note that <a href="/en-US/docs/Accessibility/ARIA">ARIA</a> is an independent specification that's not specifically related to HTML5.</p>
-
-<h5 id="CSS_2">CSS</h5>
-
-<p>Similarly, the CSS doesn't need to change very much; we just turn the {{cssxref(":invalid")}} CSS pseudo-class into a real class and avoid using the attribute selector that does not work on Internet Explorer 6.</p>
-
-<pre class="brush: css">/* This is just to make the example nicer */
-body {
- font: 1em sans-serif;
- padding: 0;
- margin : 0;
-}
-
-form {
- max-width: 200px;
-}
-
-p * {
- display: block;
-}
-
-input.mail {
- -webkit-appearance: none;
-
- width: 100%;
- border: 1px solid #333;
- margin: 0;
-
- font-family: inherit;
- font-size: 90%;
-
- -moz-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-/* This is our style for the invalid fields */
-input.invalid{
- border-color: #900;
- background-color: #FDD;
-}
-
-input:focus.invalid {
- outline: none;
-}
-
-/* This is the style of our error messages */
-.error {
- width : 100%;
- padding: 0;
-
- font-size: 80%;
- color: white;
- background-color: #900;
- border-radius: 0 0 5px 5px;
-
- -moz-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-.error.active {
- padding: 0.3em;
-}</pre>
-
-<h5 id="JavaScript_2">JavaScript</h5>
-
-<p>The big changes are in the JavaScript code, which needs to do much more of the heavy lifting.</p>
-
-<pre class="brush: js">// There are fewer ways to pick a DOM node with legacy browsers
-var form = document.getElementsByTagName('form')[0];
-var email = document.getElementById('mail');
-
-// The following is a trick to reach the next sibling Element node in the DOM
-// This is dangerous because you can easily build an infinite loop.
-// In modern browsers, you should prefer using element.nextElementSibling
-var error = email;
-while ((error = error.nextSibling).nodeType != 1);
-
-// As per the HTML5 Specification
-var emailRegExp = /^[a-zA-Z0-9.!#$%&amp;'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
-
-// Many legacy browsers do not support the addEventListener method.
-// Here is a simple way to handle this; it's far from the only one.
-function addEvent(element, event, callback) {
- var previousEventCallBack = element["on"+event];
- element["on"+event] = function (e) {
- var output = callback(e);
-
- // A callback that returns `false` stops the callback chain
- // and interrupts the execution of the event callback.
- if (output === false) return false;
-
- if (typeof previousEventCallBack === 'function') {
- output = previousEventCallBack(e);
- if(output === false) return false;
- }
- }
-};
-
-// Now we can rebuild our validation constraint
-// Because we do not rely on CSS pseudo-class, we have to
-// explicitly set the valid/invalid class on our email field
-addEvent(window, "load", function () {
- // Here, we test if the field is empty (remember, the field is not required)
- // If it is not, we check if its content is a well-formed e-mail address.
- var test = email.value.length === 0 || emailRegExp.test(email.value);
-
- email.className = test ? "valid" : "invalid";
-});
-
-// This defines what happens when the user types in the field
-addEvent(email, "input", function () {
- var test = email.value.length === 0 || emailRegExp.test(email.value);
- if (test) {
- email.className = "valid";
- error.innerHTML = "";
- error.className = "error";
- } else {
- email.className = "invalid";
- }
-});
-
-// This defines what happens when the user tries to submit the data
-addEvent(form, "submit", function () {
- var test = email.value.length === 0 || emailRegExp.test(email.value);
-
- if (!test) {
- email.className = "invalid";
- error.innerHTML = "I expect an e-mail, darling!";
- error.className = "error active";
-
- // Some legacy browsers do not support the event.preventDefault() method
- return false;
- } else {
- email.className = "valid";
- error.innerHTML = "";
- error.className = "error";
- }
-});</pre>
-
-<p>The result looks like this:</p>
-
-<p>{{EmbedLiveSample("Example_that_doesn't_use_the_constraint_validation_API", "100%", 130)}}</p>
-
-<p>As you can see, it's not that hard to build a validation system on your own. The difficult part is to make it generic enough to use it both cross-platform and on any form you might create. There are many libraries available to perform form validation; you shouldn't hesitate to use them. Here are a few examples:</p>
-
-<ul>
- <li>Standalone library
- <ul>
- <li><a href="http://rickharrison.github.com/validate.js/" rel="external">Validate.js</a></li>
- </ul>
- </li>
- <li>jQuery plug-in:
- <ul>
- <li><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" rel="external">Validation</a></li>
- </ul>
- </li>
-</ul>
-
-<h4 id="Remote_validation">Remote validation</h4>
-
-<p>In some cases it can be useful to perform some remote validation. This kind of validation is necessary when the data entered by the user is tied to additional data stored on the server side of your application. One use case for this is registration forms, where you ask for a user name. To avoid duplication, it's smarter to perform an AJAX request to check the availability of the user name rather than asking the user to send the data, then send back the form with an error.</p>
-
-<p>Performing such a validation requires taking a few precautions:</p>
-
-<ul>
- <li>It requires exposing an API and some data publicly; be sure it is not sensitive data.</li>
- <li>Network lag requires performing asynchronous validation. This requires some UI work in order to be sure that the user will not be blocked if the validation is not performed properly.</li>
-</ul>
-
-<h2 id="Conclusion">Conclusion</h2>
-
-<p>Form validation does not require complex JavaScript, but it does require thinking carefully about the user. Always remember to help your user to correct the data they provide. To that end, be sure to:</p>
-
-<ul>
- <li>Display explicit error messages.</li>
- <li>Be permissive about the input format.</li>
- <li>Point out exactly where the error occurs (especially on large forms).</li>
-</ul>
-
-<p>{{PreviousMenuNext("Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms/How_to_build_custom_form_widgets", "Learn/HTML/Forms")}}</p>
-
-<h2 id="In_this_module">In this module</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Your first HTML form</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li>
-</ul>
diff --git a/files/el/learn/forms/index.html b/files/el/learn/forms/index.html
deleted file mode 100644
index 03f1ed316c..0000000000
--- a/files/el/learn/forms/index.html
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: HTML forms
-slug: Learn/Forms
-tags:
- - Beginner
- - Featured
- - Forms
- - Guide
- - HTML
- - Landing
- - Learn
- - NeedsTranslation
- - TopicStub
- - Web
-translation_of: Learn/Forms
-original_slug: Learn/HTML/Forms
----
-<div>{{LearnSidebar}}</div>
-
-<p class="summary">This module provides a series of articles that will help you master HTML forms. HTML forms are a very powerful tool for interacting with users; however, for historical and technical reasons, it's not always obvious how to use them to their full potential. In this guide, we'll cover all aspects of HTML forms, from structure to styling, from data handling to custom widgets.</p>
-
-<h2 id="Prerequisites">Prerequisites</h2>
-
-<p>Before starting this module, you should at least work through our <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>. At this point you should find the {{anch("Basic guides")}} easy to understand, and also be able to make use of our <a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">Native form widgets</a> guide.</p>
-
-<p>The rest of the module however is a bit more advanced — it is easy to put form widgets on a page, but you can't actually do much with them without using some advanced form features, CSS, and JavaScript. Therefore, before you look at the other sections we'd recommend that you go away and learn some <a href="/en-US/docs/Learn/CSS">CSS</a> and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> first.</p>
-
-<div class="note">
-<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
-</div>
-
-<h2 id="Basic_guides">Basic guides</h2>
-
-<dl>
- <dt><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Your first HTML form</a></dt>
- <dd>The first article in our series provides your very first experience of creating an HTML form, including designing a simple form, implementing it using the right HTML elements, adding some very simple styling via CSS, and how data is sent to a server.</dd>
- <dt><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></dt>
- <dd>With the basics out of the way, we now look in more detail at the elements used to provide structure and meaning to the different parts of a form.</dd>
-</dl>
-
-<h2 id="What_form_widgets_are_available">What form widgets are available?</h2>
-
-<dl>
- <dt><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a></dt>
- <dd>We now look at the functionality of the different form widgets in detail, looking at what options are available to collect different types of data.</dd>
-</dl>
-
-<h2 id="Validating_and_submitting_form_data">Validating and submitting form data</h2>
-
-<dl>
- <dt><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></dt>
- <dd>This article looks at what happens when a user submits a form — where does the data go, and how do we handle it when it gets there? We also look at some of the security concerns associated with sending form data.</dd>
- <dt><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></dt>
- <dd>Sending data is not enough — we also need to make sure that the data users fill out in forms is in the correct format we need to process it successfully, and that it won't break our applications. We also want to help our users to fill out our forms correctly and don't get frustrated when trying to use our apps. Form validation helps us achieve these goals — this article tells you what you need to know.</dd>
-</dl>
-
-<h2 id="Advanced_guides">Advanced guides</h2>
-
-<dl>
- <dt><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></dt>
- <dd>You'll come across some cases where the native form widgets just don't provide what you need, e.g. because of styling or functionality. In such cases, you may need to build your own form widget out of raw HTML. This article explains how you'd do this and the considerations you need to be aware of when doing so, with a practical case study.</dd>
- <dt><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></dt>
- <dd>This article looks at ways to use a form to assemble an HTTP request and send it via custom JavaScript, rather than standard form submission. It also looks at why you'd want to do this, and the implications of doing so. (See also Using FormData objects.)</dd>
- <dt><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></dt>
- <dd>Article covering feature detection, etc. This should be redirected to the cross browser testing module, as the same stuff is covered better there.</dd>
-</dl>
-
-<h2 id="Form_styling_guides">Form styling guides</h2>
-
-<dl>
- <dt><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></dt>
- <dd>This article provides an introduction to styling forms with CSS, including all the basics you might need to know for basic styling tasks.</dd>
- <dt><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></dt>
- <dd>Here we look at some more advanced form styling techniques that need to be used when trying to deal with some of the more difficult-to-style elements.</dd>
- <dt><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></dt>
- <dd>This last article provides a handy reference allowing you to look up what CSS properties are compatible with what form elements.</dd>
-</dl>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/HTML/Element#Forms">HTML forms element reference</a></li>
- <li><a href="/en-US/docs/Web/HTML/Element/input">HTML &lt;input&gt; types reference</a></li>
-</ul>
diff --git a/files/el/learn/getting_started_with_the_web/index.html b/files/el/learn/getting_started_with_the_web/index.html
deleted file mode 100644
index f40626603a..0000000000
--- a/files/el/learn/getting_started_with_the_web/index.html
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: Ξεκινώντας με τον Παγκοσμιο Ιστό
-slug: Learn/Getting_started_with_the_web
-translation_of: Learn/Getting_started_with_the_web
----
-<div>{{LearnSidebar}}</div>
-
-<div class="summary">
-<p>To <em>Ξεκινώντας με τον Παγκόσμιο Ιστό </em>αποτελεί μια συνοπτική, εισαγωγική σειρά άρθρων που παρουσιάζει τις πρακτικές πτυχές της ανάπτυξης ιστοσελίδων. Θα στήσετε τα εργαλεία που χρειάζεστε για να δημιουργήσετε μια απλή ιστοσελίδα και για να δημοσιεύσετε τον δικό σας απλό κώδικα.</p>
-</div>
-
-<h2 id="Η_ιστορία_του_πρώτου_σας_ιστότοπου">Η ιστορία του πρώτου σας ιστότοπου</h2>
-
-<p>Χρειάζεται πολύ δουλειά για να δημιουργήσετε έναν επαγγελματικό ιστότοπο, οπότε αν δεν έχετε καθόλου εμπειρία στην ανάπτυξη ιστοσελίδων, σας ενθαρρύνουμε να ξεκινήσετε από κάτι μικρό. Δεν θα δημιουργήσετε ένα νέο Facebook αμέσως, αλλά από την άλλη δεν θα είναι δύσκολο να δημιουργήσετε τον δικό σας απλό ιστότοπο online, οπότε θα ξεκινήσουμε από εκεί.</p>
-
-<p>Ακολουθώντας τα άρθρα που παρατίθενται παρακάτω, θα πάτε από το μηδέν στην πρώτη σας ιστοσελίδα online. Ας ξεκινήσουμε!</p>
-
-<h3 id="Εγκατάσταση_βασικού_λογισμικού"><a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Εγκατάσταση βασικού λογισμικού</a></h3>
-
-<p>Υπάρχουν πολλά εργαλεία που μπορείτε να διαλέξετε για την ανάπτυξη ενός ιστοτόπου. Εάν μόλις ξεκινάτε, ίσως να μπερδευτείτε από την πληθώρα προγραμμάτων επεξεργασίας κώδικα, από τα πλαίσια και τα εργαλεία ελέγχου που υπάρχουν εκεί έξω. Στην ενότητα <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Εγκατάσταση βασικού λογισμικού</a>, σας παρουσιάζουμε βήμα προς βήμα τον τρόπο εγκατάστασης μόνον του λογισμικού που χρειάζεστε για να ξεκινήσετε με τη βασική ανάπτυξη ιστοσελίδων.</p>
-
-<h3 id="What_will_your_website_look_like"><a href="/en-US/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">What will your website look like?</a></h3>
-
-<p>Πριν ξεκινήσετε να γράφετε κώδικα για τον ιστότοπό σας, θα πρέπει πρώτα να τον σχεδιάσετε. Τι πληροφορία θα παρουσιάσετε; Ποιές γραμματοσειρές και ποιά χρώματα θα χρησιμοποιήσετε; <a href="/en-US/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Πως θα φαίνεται ο ιστότοπός σας;</a> Περιγράφουμε μια απλή μέθοδο που μπορείτε να ακολουθήσετε για να σχεδιάσετε τόσο το περιεχόμενο όσο και την εμφάνιση του ιστότοπού σας. </p>
-
-<h3 id="Ενασχόληση_με_τα_αρχεία"><a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Ενασχόληση με τα αρχεία</a></h3>
-
-<p>Ένας ιστότοπος αποτελείται από πολλά αρχεία: περιεχόμενο κειμένου, κώδικα, φύλλα στυλ, περιεχόμενο πολυμέσων κ.ο.κ. Όταν χτίζετε έναν ιστότοπο, πρέπει να συγκεντρώσετε όλα αυτά τα αρχεία σε μια λογική δομή και να βεβαιωθείτε ότι μπορούν να "μιλούν" μεταξύ τους. Η ενότητα <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Ενασχόληση με αρχεία</a> εξηγεί πώς να οργανώσετε μια λογική δομή αρχείων για τον ιστότοπό σας και ποια θέματα θα πρέπει να γνωρίζετε.</p>
-
-<h3 id="Τα_βασικά_της_HTML"><a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">Τα βασικά της HTML</a></h3>
-
-<p>Η γλώσσα HTML (Hypertext Markup Language, Γλώσσα Σήμανσης Υπερκειμένου) είναι ο κώδικας που χρησιμοποιείτε για να δομήσετε το περιεχομένό σας στον Παγκόσμιο Ιστό και με τον οποί του δίνετε νόημα και σκοπό. Για παράδειγμα, το περιεχόμενό μου είναι ένα σύνολο παραγράφων ή μια λίστα με κουκκίδες; Έχω τοποθετήσει εικόνες στη σελίδα μου; Έχω έναν πίνακα δεδομένων; Η ενότητα <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">Τα βασικά της HTML</a> παρέχει αρκετές πληροφορίες για να εξοικειώθείτε με τη γλώσσα HTML, χωρίς να σας κουράσει.</p>
-
-<h3 id="Τα_βασικά_των_CSS"><a href="/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics">Τα βασικά των CSS</a></h3>
-
-<p>Τα Cascading Stylesheets (CSS, Επικαλυπτόμενα Φύλλα Στυλ ή αλλιώς Φύλλα Διαδοχικού Στυλ) είναι ο κώδικας που χρησιμοποιείτε για να δώσετε στυλ στον ιστότοπό σας. Για παράδειγμα, θέλετε το κείμενο να είναι μαύρο ή κόκκινο; Πού πρέπει να εμφανισθεί το περιεχόμενο στην οθόνη; Ποιες εικόνες φόντου και ποια χρώματα θα πρέπει να χρησιμοποιηθούν για να διακοσμήσετε τον ιστότοπό σας; Η ενότητα <a href="/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics">Τα βασικά των CSS</a> σας μεταφέρουν σε αυτό που χρειάζεστε για να ξεκινήσετε.</p>
-
-<h3 id="Τα_βασικά_της_JavaScript"><a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Τα βασικά της JavaScript</a></h3>
-
-<p>Η JavaScript είναι η γλώσσα προγραμματισμού που χρησιμοποιείτε για να προσθέσετε διαδραστικές λειτουργίες στον ιστότοπό σας. Μερικά παραδείγματα θα μπορούσαν να είναι τα παιχνίδια, τα πράγματα που συμβαίνουν όταν πιέζονται κουμπιά ή εισάγονται δεδομένα σε φόρμες, τα δυναμικά εφέ styling, τα κινούμενα σχέδια και πολλά άλλα. Η ενότητα <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Τα βασικά της JavaScript</a> δίνουν μια ιδέα για το τι είναι δυνατό με αυτή τη συναρπαστική γλώσσα και πώς να ξεκινήσετε.</p>
-
-<h3 id="Δημοσίευση_του_ιστότοπού_σας"><a href="/en-US/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Δημοσίευση του ιστότοπού σας</a></h3>
-
-<p>Μόλις τελειώσετε με τη σύνταξη του κώδικα και την οργάνωση των αρχείων που αποτελούν τον ιστότοπό σας, πρέπει να τα δημοσιεύσετε όλα online, ώστε να μπορούν να τα βρουν οι χρήστες. Η ενότητα <a href="/en-US/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Δημοσίευση του κώδικα </a>περιγράφει τον τρόπο με τον οποίο μπορείτε να ανεβάσετε το δείγμα του απλού κώδικα σας στον παγκόσμιο ιστό με την ελάχιστη δυνατή προσπάθεια.</p>
-
-<h3 id="Πως_λειτουργεί_ο_Παγκόσμιος_Ιστός"><a href="/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Πως λειτουργεί ο Παγκόσμιος Ιστός</a></h3>
-
-<p>Όταν επισκέφτεσθε τον αγαπημένο σας ιστότοπο, συμβαίνουν πολλά και περίπλοκα πράγματα στο παρασκήνιο, τα οποία μπορεί να μην γνωρίζετε. Η ενότητα <a href="/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Πώς λειτουργεί ο Παγκόσμιος Ιστός</a> περιγράφει συνοπτικά το τι συμβαίνει όταν βλέπετε μια ιστοσελίδα στον υπολογιστή σας.</p>
-
-<h2 id="Δείτε_επίσης">Δείτε επίσης</h2>
-
-<p><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web Demystified</a>: Μια εξαιρετική σειρά βίντεο που εξηγεί τα θεμελιώδη στοιχεία του ιστού και που στοχεύει σε πλήρως αρχάριους στην ανάπτυξη ιστού. Δημιουργήθηκε από τον <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a>.</p>
-
-<div class="note">
-<h2 id="Feedback">Feedback</h2>
-
-<p>Βοηθήστε μας να βελτιώσουμε τους οδηγούς και τα tutorials σαν και αυτό εδώ συμπληρώνοντας το σχετικό <a href="https://www.surveygizmo.com/s3/4871248/MDN-Guides-Survey">ερωτηματολόγιο</a>.</p>
-</div>
diff --git a/files/el/learn/html/index.html b/files/el/learn/html/index.html
deleted file mode 100644
index e2fcdc4043..0000000000
--- a/files/el/learn/html/index.html
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: 'Learning HTML: Guides and tutorials'
-slug: Learn/HTML
-tags:
- - Beginner
- - Guide
- - HTML
- - Intro
- - Learn
- - NeedsTranslation
- - Topic
- - TopicStub
-translation_of: Learn/HTML
----
-<div>{{LearnSidebar}}</div>
-
-<p class="summary">To build websites, you should know about {{Glossary('HTML')}} — the fundamental technology used to define the structure of a webpage. HTML is used to specify whether your web content should be recognized as a paragraph, list, heading, link, image, multimedia player, form, or one of many other available elements or even a new element that you define.</p>
-
-<h2 id="Learning_pathway">Learning pathway</h2>
-
-<p>Ideally you should start your learning journey by learning HTML. Start by reading <a href="/en-US/docs/Web/Guide/HTML/Introduction">Introduction to HTML</a>. You may then move on to learning about more advanced topics such as:</p>
-
-<ul>
- <li><a href="/en-US/docs/Learn/CSS">CSS</a>, and how to use it to style HTML (for example alter your text size and fonts used, add borders and drop shadows, layout your page with multiple columns, add animations and other visual effects.)</li>
- <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, and how to use it to add dynamic functionality to web pages (for example find your location and plot it on a map, make UI elements appear/disappear when you toggle a button, save users' data locally on their computers, and much much more.)</li>
-</ul>
-
-<p>Before starting this topic, you should have at least basic familiarity with using computers, and using the web passively (i.e. just looking at it, consuming the content). You should have a basic work environment set up as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, and understand how to create and manage files, as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> — both are parts of our <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> complete beginner's module.</p>
-
-<p>It is recommended that you work through <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web </a>before attempting this topic, however it isn't absolutely necessary; much of what is covered in the <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a> article is also covered in our <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module, albeit in a lot more detail.</p>
-
-<h2 id="Modules">Modules</h2>
-
-<p>This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one.</p>
-
-<dl>
- <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a></dt>
- <dd>This module sets the stage, getting you used to important concepts and syntax, looking at applying HTML to text, how to create hyperlinks, and how to use HTML to structure a webpage.</dd>
- <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding</a></dt>
- <dd>This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages.</dd>
- <dt><a href="/en-US/docs/Learn/HTML/Tables">HTML Tables</a></dt>
- <dd>Representing tabular data on a webpage in an understandable, {{glossary("Accessibility", "accessible")}} way can be a challenge. This module covers basic table markup, along with more complex features such as implementing captions and summaries.</dd>
- <dt><a href="/en-US/docs/Learn/HTML/Forms">HTML Forms</a></dt>
- <dd>Forms are a very important part of the Web — these provide much of the functionality you need for interacting with web sites, e.g. registering and logging in, sending feedback, buying products, and more. This module gets you started with creating the client-side parts of forms.</dd>
-</dl>
-
-<h2 id="Solving_common_HTML_problems">Solving common HTML problems</h2>
-
-<p><a href="/en-US/docs/Learn/HTML/Howto">Use HTML to solve common problems</a> provides links to sections of content explaining how to use HTML to solve very common problems when creating a webpage: dealing with titles, adding images or videos, emphasizing content, creating a basic form, etc.</p>
-
-<h2 id="See_also">See also</h2>
-
-<div class="document-head" id="wiki-document-head">
-<dl>
- <dt><a href="/en-US/docs/Web/HTML">HTML (HyperText Markup Language)</a> on MDN</dt>
- <dd>The main entry point for HTML documentation on MDN, including detailed element and attribute references — if you want to know what attributes an element has or what values an attribute has, for example, this is a great place to start.</dd>
-</dl>
-</div>
diff --git a/files/el/learn/index.html b/files/el/learn/index.html
deleted file mode 100644
index fb5979aa99..0000000000
--- a/files/el/learn/index.html
+++ /dev/null
@@ -1,124 +0,0 @@
----
-title: Μάθετε προγραμματισμό web
-slug: Learn
-tags:
- - CSS
- - HTML
- - Web
- - Αρχάριος
- - Βασικά
- - Εισαγωγή
- - Εκμάθηση
- - Οδηγός
- - Προγραμματισμός-ιστού
-translation_of: Learn
----
-<p>{{LearnSidebar}}</p>
-
-<p class="summary">Καλώς ορίσατε στην περιοχή εκμάθησης του MDN. Αυτή η σειρά άρθρων απευθύνεται σε αρχάριους και έχει ως σκοπό να σας προσφέρει όλες τις γνώσεις που θα χρειαστείτε για να ξεκινήσετε με την ανάπτυξη ιστοσελίδων.</p>
-
-<p>Στόχος της περιοχής εκμάθησης του MDN δεν είναι να σας κάνει "επαγγελματίες", αλλά να σας βοηθήσει να αποκτήσετε κάποια εξοικείωση. Από εκεί και πέρα, θα μπορέσετε να εξελιχθείτε με τη <a href="https://developer.mozilla.org/el">βοήθεια του MDN</a> και άλλων πηγών που αναλύουν πιο σύνθετα θέματα, τα οποία απαιτούν βασικές γνώσεις.</p>
-
-<p>Αν είστε εντελώς αρχάριοι, ο προγραμματισμός web μπορεί να σας φανεί δύσκολος — εμείς όμως θα σας καθοδηγήσουμε και θα σας παρέχουμε αρκετές λεπτομέρειες, ώστε να αισθανθείτε άνετα και να μάθετε σωστά τα περιεχόμενα. Δεν θα έχετε κανένα πρόβλημα, είτε αν σπουδάζετε ήδη αυτό το αντικείμενο, είτε αν διδάσκετε και ψάχνετε υλικό για την τάξη σας, είτε αν το κάνετε σαν χόμπι, είτε αν θέλετε απλά να μάθετε τον τρόπο λειτουργίας των τεχνολογιών web.</p>
-
-<h2 id="Τι_νέο_υπάρχει">Τι νέο υπάρχει;</h2>
-
-<p>Το περιεχόμενο στην περιοχή εκμάθησης εμπλουτίζεται τακτικά. Εκδίδουμε <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Release_notes">σημειώσεις έκδοσης για την περιοχή εκμάθησης</a> για να ενημερώνεστε σχετικά με τις αλλαγές — μην ξεχνάτε να ελέγχετε τακτικά για νέο περιεχόμενο!</p>
-
-<p>Αν έχετε απορίες όσον αφορά τα θέματα που θέλετε να καλύψουμε ή αυτά που θεωρείτε ότι απουσιάζουν, ενημερώστε μας στο <a href="https://discourse.mozilla.org/c/mdn">φόρουμ μας στο Discourse</a>.</p>
-
-<h2 id="Από_πού_να_ξεκινήσετε">Από πού να ξεκινήσετε</h2>
-
-<ul class="card-grid">
- <li><span>Για αρχάριους:</span> Αν είστε αρχάριοι στον προγραμματισμό web, θα σας προτείναμε να ξεκινήσετε με την ενότητα <a href="/en-US/docs/Learn/Getting_started_with_the_web">Ξεκινώντας με το web</a>, η οποία παρέχει μια εισαγωγή στον προγραμματισμό web.</li>
- <li><span>Πέρα από τα βασικά:</span> Αν έχετε ήδη μερικές γνώσεις, το επόμενο βήμα είναι να μάθετε λεπτομερώς {{Glossary("HTML")}} και {{Glossary("CSS")}}. Ξεκινήστε με την ενότητα <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">Εισαγωγή στην HTML</a> και έπειτα, συνεχίστε στην ενότητα <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/First_steps">Εισαγωγή στην CSS</a>.</li>
- <li><span>Προχωρώντας σε σενάρια:</span>Αν έχετε ήδη εξοικειωθεί με τις HTML και CSS, ή σας ενδιαφέρει κυρίως η συγγραφή κώδικα, μπορείτε να προχωρήσετε στην {{Glossary("JavaScript")}} ή στον προγραμματισμό από την πλευρά του διακομιστή. Ξεκινήστε με τις ενότητες <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps">Πρώτα βήματα στη JavaScript</a> και <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps">Πρώτα βήματα στην πλευρά του διακομιστή</a>.</li>
- <li><span>Πλαίσια και εργαλεία:</span>Αφού κατακτήσετε τις βασικές γνώσεις σε HTML, CSS και JavaScript, θα πρέπει να μάθετε τα <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools">εργαλεία προγραμματισμού από την πλευρά του πελάτη</a> και έπειτα, εμβαθύνετε στα <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">πλαίσια JavaScript από την πλευρά του πελάτη</a> και στον <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side">προγραμματισμό ιστοσελίδων από την πλευρά του διακομιστή</a>.</li>
-</ul>
-
-<div class="note">
-<p><strong>Σημείωση</strong>: Το <a href="/en-US/docs/Glossary">γλωσσάρι</a> μας παρέχει ορισμούς όρων. Επίσης, αν έχετε μια συγκεκριμένη απορία σχετικά με τον προγραμματισμό web, η ενότητα <a href="/en-US/docs/Learn/Common_questions">Συχνές ερωτήσεις</a> ίσως μπορεί να σας βοηθήσει.</p>
-</div>
-
-<p>{{LearnBox({"title":"Τυχαίο λεξιλόγιο"})}}</p>
-
-<h2 id="Καλυπτόμενα_θέματα"><span>Καλυπτόμενα θέματα</span></h2>
-
-<p>Ακολουθεί μια λίστα με όλα τα θέματα που καλύπτονται στην περιοχή εκμάθησης του MDN.</p>
-
-<dl>
- <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Ξεκινώντας με το web</a></dt>
- <dd>Παρέχεται μια ουσιαστική εισαγωγή στον προγραμματισμό web για αρχάριους.</dd>
- <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML">HTML — Κατασκευή του web</a></dt>
- <dd>Η HTML είναι η γλώσσα που χρησιμοποιούμε για να κατασκευάσουμε τα διάφορα μέρη του περιεχομένου μας και να καθορίσουμε τη σημασία ή το σκοπό τους. Αυτό το άρθρο εξηγεί την HTML σε βάθος.</dd>
- <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS — Διακόσμηση του web</a></dt>
- <dd>Η CSS είναι η γλώσσα που χρησιμοποιούμε για να διακοσμήσουμε και να διατάξουμε το περιεχόμενο, καθώς και να προσθέσουμε συμπεριφορές, όπως εφέ κίνησης. Αυτό το άρθρο σας παρέχει βασική εκπαίδευση της CSS.</dd>
- <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript — Δυναμικά σενάρια από την πλευρά του πελάτη</a></dt>
- <dd>Η JavaScript είναι μια γλώσσα προγραμματισμού σεναρίων που χρησιμοποιούμε για να προσθέσουμε δυναμική λειτουργικότητα σε ιστοσελίδες. Αυτό το άρθρο εξηγεί όλα όσα χρειάζεστε για να εξοικειωθείτε με τη σύνταξη και την κατανόηση της Javascript.</dd>
- <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility">Προσβασιμότητα — κάντε το web χρήσιμο για όλους</a></dt>
- <dd>Η προσβασιμότητα είναι η πρακτική με την οποία κάνετε το διαδικτυακό περιεχόμενο διαθέσιμο για όσους περισσότερους χρήστες γίνεται, ανεξαρτήτως αναπηρίας, συσκευής, τοποθεσίας ή άλλων παραγόντων. Αυτό το άρθρο παρέχει όλες τις απαραίτητες πληροφορίες.</dd>
- <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Performance">Επιδόσεις web — γρήγορες και ανταποκρίσιμες ιστοσελίδες</a></dt>
- <dd>Οι επιδόσεις web είναι η τέχνη του να επιτυγχάνει κανείς υψηλή ταχύτητα λήψης των εφαρμογών web, καθώς και καλή ανταποκρισιμότητα κατά την αλληλεπίδραση με το χρήστη, ανεξάρτητα από το εύρος ζώνης του χρήστη, το μέγεθος της οθόνης, το δίκτυο ή τις ικανότητες της συσκευής.</dd>
- <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing">Εργαλεία και δοκιμή</a></dt>
- <dd>Αυτό το άρθρο καλύπτει τα εργαλεία που χρησιμοποιούν οι προγραμματιστές για να διευκολύνουν τη δουλειά τους, όπως εργαλεία δοκιμής για διαφορετικά προγράμματα περιήγησης, linters, formatters, εργαλεία μεταμόρφωσης, συστήματα ελέγχου εκδόσεων, εργαλεία ανάπτυξης και πλαίσια JavaScript από την πλευρά του πελάτη.</dd>
- <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side">Προγραμματισμός ιστοσελίδων από την πλευρά του διακομιστή</a></dt>
- <dd>Ακόμα κι αν επικεντρώνεστε στον προγραμματισμό web από την πλευρά του πελάτη, είναι χρήσιμο να γνωρίζετε πώς λειτουργούν οι διακομιστές και οι λειτουργίες του κώδικά τους. Αυτό το άρθρο παρέχει μια γενική εισαγωγή στον τρόπο λειτουργίας του διακομιστή, καθώς και λεπτομερείς οδηγούς, οι οποίοι δείχνουν πώς να αναπτύξετε μια εφαρμογή από πλευράς διακομιστή με τη βοήθεια δύο γνωστών πλαισίων — Django (Python) και Express (node.js).</dd>
-</dl>
-
-<h2 id="Απόκτηση_παραδειγμάτων_κώδικα">Απόκτηση παραδειγμάτων κώδικα</h2>
-
-<p>Τα παραδείγματα κώδικα που θα συναντήσετε στην περιοχή εκμάθησης είναι όλα <a href="https://github.com/mdn/learning-area/">διαθέσιμα στο GitHub</a>. Αν θέλετε να τα αντιγράψετε όλα στον υπολογιστή σας, ο πιο εύκολος τρόπος είναι να <a href="https://github.com/mdn/learning-area/archive/master.zip">κάνετε λήψη του ZIP του πιο πρόσφατου κύριου branch κώδικα</a>.</p>
-
-<p>Αν προτιμάτε να αντιγράψετε το αποθετήριο με έναν πιο ευέλικτο τρόπο, που επιτρέπει αυτόματες ενημερώσεις, μπορείτε να ακολουθήσετε τις πιο σύνθετες οδηγίες:</p>
-
-<ol>
- <li><a href="https://git-scm.com/downloads">Κάντε εγκατάσταση του Git</a> στον υπολογιστή σας. Αυτό είναι το λογισμικό συστήματος ελέγχου εκδόσεων, πάνω στο οποίο λειτουργεί το GitHub.</li>
- <li>Ανοίξτε τη <a href="https://www.lifewire.com/how-to-open-command-prompt-2618089">γραμμή εντολών</a> (Windows) ή το τερματικό (<a href="https://help.ubuntu.com/community/UsingTheTerminal">Linux</a>, <a href="https://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line">macOS</a>) στον υπολογιστή σας.</li>
- <li>Για να αντιγράψετε το αποθετήριο της περιοχής εκμάθησης σε ένα φάκελο με όνομα "learning-area" στην τοποθεσία που δείχνει η γραμμή εντολών ή το τερματικό σας, χρησιμοποιήστε την εξής εντολή:
- <pre class="brush: bash notranslate">git clone https://github.com/mdn/learning-area</pre>
- </li>
- <li>Μπορείτε πλέον να ανοίξετε τον κατάλογο και να βρείτε τα αρχεία που ψάχνετε (είτε μέσω Finder/Εξερεύνησης αρχείων είτε μέσω της <a href="https://en.wikipedia.org/wiki/Cd_(command)">εντολής</a> <a href="https://en.wikipedia.org/wiki/Cd_(command)"><code>cd</code></a>).</li>
-</ol>
-
-<p>Μπορείτε να ενημερώσετε το αποθετήριο <code>learning-area</code> μετά από τυχόν αλλαγές που έγιναν στην κύρια έκδοση στο GitHub, ακολουθώντας τα εξής βήματα:</p>
-
-<ol>
- <li>Στη γραμμή εντολών/τερματικό, μπείτε στον κατάλογο <code>learning-area</code> με την εντολή <code>cd</code>. Για παράδειγμα, αν βρίσκεστε στον γονικό κατάλογο:
-
- <pre class="brush: bash notranslate">cd learning-area</pre>
- </li>
- <li>Ενημερώστε το αποθετήριο με την ακόλουθη εντολή:
- <pre class="brush: bash notranslate">git pull</pre>
- </li>
-</ol>
-
-<h2 id="Επικοινωνήστε_μαζί_μας">Επικοινωνήστε μαζί μας</h2>
-
-<p>Αν θέλετε να επικοινωνήσετε με εμάς για οτιδήποτε, ο καλύτερος τρόπος είναι να μας αφήσετε ένα μήνυμα στο <a href="https://discourse.mozilla.org/c/mdn">φόρουμ μας στο Discourse</a>. Θα θέλαμε να μας πείτε αν θεωρείτε ότι κάτι είναι λάθος ή λείπει από την ιστοσελίδα, αν έχετε αιτήματα για νέα θέματα εκμάθησης, αν έχετε αιτήματα για βοήθεια με ό,τι δεν κατανοείτε, ή οποιαδήποτε άλλη απορία/ανησυχία.</p>
-
-<p>Αν σας ενδιαφέρει να βοηθήσετε με την ανάπτυξη/βελτίωση του περιεχομένου, ρίξτε μια ματιά στο <a href="/en-US/docs/Learn/How_to_contribute">πώς να μπορέσετε να βοηθήσετε</a> και να έρθετε σε επικοινωνία μαζί μας! Θα χαρούμε ιδιαίτερα να μιλήσουμε μαζί σας, είτε είστε μαθητής, είτε είστε δάσκαλος, είτε είστε έμπειρος προγραμματιστής web, είτε απλά ενδιαφέρεστε να συμβάλλετε στη βελτίωση της εμπειρίας εκμάθησης.</p>
-
-<h2 id="Δείτε_επίσης">Δείτε επίσης</h2>
-
-<dl>
- <dt><a href="https://www.mozilla.org/en-US/newsletter/developer/">Mozilla newsletter για προγραμματιστές</a></dt>
- <dd>Το newsletter μας για προγραμματιστές web, το οποίο αποτελεί μια εξαιρετική πηγή πληροφοριών για όλα τα επίπεδα εμπειρίας.</dd>
- <dt><a href="https://learnjavascript.online/">Learn JavaScript</a></dt>
- <dd>Μια εξαίσια πηγή πληροφοριών για νέους προγραμματιστές web — Μάθετε JavaScript σε ένα διαδραστικό περιβάλλον, με σύντομα μαθήματα και διαδραστικά τεστ, ενώ παρέχεται αυτοματοποιημένη αξιολόγηση. Τα πρώτα 40 μαθήματα είναι δωρεάν και μπορείτε να αποκτήσετε ολόκληρη τη σειρά μαθημάτων με μια μικρή εφάπαξ πληρωμή.</dd>
- <dt><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web demystified</a></dt>
- <dd>Μια θαυμάσια σειρά βίντεο που εξηγεί τα θεμελιώδη θέματα του web και απευθύνεται σε αρχάριους. Δημιουργήθηκε από τον <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a>.</dd>
- <dt><a href="https://www.codecademy.com/">Codecademy</a></dt>
- <dd>Μια εξαιρετική, διαδραστική ιστοσελίδα για εκμάθηση γλωσσών προγραμματισμού από την αρχή.</dd>
- <dt><a href="https://www.bitdegree.org/learn/">BitDegree</a></dt>
- <dd>Βασική θεωρία κώδικα με μια διασκεδαστική διαδικασία εκμάθησης. Απευθύνεται κυρίως σε αρχάριους.</dd>
- <dt><a href="https://code.org/">Code.org</a></dt>
- <dd>Βασική θεωρία και εξάσκηση κώδικα, απευθύνεται κυρίως σε παιδιά/αρχάριους.</dd>
- <dt><a href="https://exlskills.com/learn-en/courses">EXLskills</a></dt>
- <dd>Δωρεάν μαθήματα ανοικτού κώδικα για τεχνολογικές ικανότητες. Παρέχεται καθοδήγηση και η εκμάθηση επιτυγχάνεται μέσω εργασιών.</dd>
- <dt><a href="https://www.freecodecamp.org/">freeCodeCamp.org</a></dt>
- <dd>Διαδραστική ιστοσελίδα με οδηγούς και εργασίες για να μάθετε προγραμματισμό web.</dd>
- <dt><a href="https://foundation.mozilla.org/en/initiatives/web-literacy/core-curriculum/">Web literacy map</a></dt>
- <dd>Ένα πλαίσιο για βασικές γνώσεις σχετικά με το web και ικανότητες, ενώ παρέχει επίσης πρόσβαση σε διδακτικές δραστηριότητες, ταξινομημένες σε κατηγορίες.</dd>
- <dt><a href="https://edabit.com/challenges/javascript">Edabit</a></dt>
- <dd>Χιλιάδες διαδραστικές προκλήσεις JavaScript.</dd>
-</dl>
diff --git a/files/el/learn/javascript/first_steps/index.html b/files/el/learn/javascript/first_steps/index.html
deleted file mode 100644
index f9f0e1e060..0000000000
--- a/files/el/learn/javascript/first_steps/index.html
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: Τα Πρώτα Βήματα στη JavaScript
-slug: Learn/JavaScript/First_steps
-tags:
- - JavaScript
- - Άρθρο
- - Αξιολόγηση
- - Αριθμοί
- - Αρχάριος
- - Ενότητα
- - Μεταβλητές
- - Οδηγός
- - Πίνακες
- - Συμβολοσειρές
- - μαθηματικά
- - προγραμματισμός
- - τελεστές
-translation_of: Learn/JavaScript/First_steps
-original_slug: Learn/JavaScript/Πρώτα_βήματα
----
-<div>{{LearnSidebar}}</div>
-
-<p class="summary">Στην πρώτη ενότητα της JavaScript, απαντούμε πρώτα σε μερικές θεμελιώδεις ερωτήσεις όπως "τι είναι η JavaScript;", "πώς μοιάζει;" και "τι μπορεί να κάνει;", προτού προχωρήσουμε στην πρώτη σας πρακτική εμπειρία συγγραφής JavaScript. Μετά από αυτό, συζητάμε λεπτομερώς μερικά βασικά δομικά στοιχεία , όπως μεταβλητές, αλφαριθμητικά, αριθμούς και πίνακες.</p>
-
-<h2 id="Προϋποθέσεις">Προϋποθέσεις</h2>
-
-<p>Πριν ξεκινήσετε αυτήν την ενότητα, δεν χρειάζεστε προηγούμενη γνώση της JavaScript, αλλά θα πρέπει να έχετε κάποια εξοικείωση με την HTML και το CSS. Συνιστάται να εργαστείτε μέσω των παρακάτω ενοτήτων πριν ξεκινήσετε με τη JavaScript:</p>
-
-<ul>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Ξεκινώντας με τον Ιστό</a> (που περιλαμβάνει μια πραγματικά  <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">βασική εισαγωγή JavaScript</a>).</li>
- <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Εισαγωγή στην HTML</a>.</li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Εισαγωγή στο CSS</a>.</li>
-</ul>
-
-<div class="note">
-<p><strong>Σημείωση</strong>: Εάν εργάζεστε σε έναν υπολογιστή / ταμπλέτα / άλλη συσκευή όπου δεν έχετε τη δυνατότητα να δημιουργήσετε τα δικά σας αρχεία, μπορείτε να δοκιμάσετε (τα περισσότερα) παραδείγματα κώδικα σε ένα online πρόγραμμα κωδικοποίησης όπως το <a href="http://jsbin.com/">JSBin</a> ή το <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
-</div>
-
-<h2 id="Οδηγοί">Οδηγοί</h2>
-
-<dl>
- <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">Τί είναι η JavaScript</a>;</dt>
- <dd>Καλώς ορίσατε στο μάθημα JavaScript για αρχάριους του MDN! Σε αυτό το πρώτο άρθρο θα εξετάσουμε τη JavaScript από ένα υψηλό επίπεδο, απαντώντας σε ερωτήσεις όπως "τι είναι;" και "τι κάνει;" και να βεβαιωθείτε ότι είστε άνετοι με το σκοπό της JavaScript.</dd>
- <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">Μια πρώτη ματιά στη JavaScript</a></dt>
- <dd>Τώρα που έχετε μάθει μερικά πράγματα σχετικά με τη θεωρία της JavaScript και τι μπορείτε να κάνετε με αυτή, θα σας δώσουμε μια σειρά μαθημάτων με τα βασικά χαρακτηριστικά της JavaScript μέσω ενός πλήρως πρακτικού οδηγού. Εδώ θα δημιουργήσετε ένα απλό παιχνίδι "Μάντεψε τον αριθμό", βήμα προς βήμα.</dd>
- <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">Τι πήγε λάθος; Αντιμετώπιση προβλημάτων στη JavaScript</a></dt>
- <dd>Όταν δημιουργήσατε το παιχνίδι "Μάντεψε τον αριθμό" στο προηγούμενο άρθρο, μπορεί να διαπιστώσατε ότι δεν λειτούργησε. Μην φοβηθείτε - αυτό το άρθρο στοχεύει να σας εξοικονομήσει από το βγάλσιμο των μαλλιών σας πάνω από τέτοια προβλήματα, παρέχοντάς σας μερικές απλές συμβουλές για το πώς μπορείτε να βρείτε και να διορθώσετε σφάλματα σε προγράμματα JavaScript.</dd>
- <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Αποθήκευση των πληροφοριών που χρειάζεστε - Μεταβλητές</a></dt>
- <dd>Αφού διαβάσατε τα τελευταία άρθρα, πρέπει τώρα να είστε σε θέση να γνωρίζετε τι είναι η JavaScript, τι μπορεί να κάνει για εσάς, πώς την χρησιμοποιείτε παράλληλα με άλλες τεχνολογίες ιστού και ποια είναι τα βασικά χαρακτηριστικά της από ένα υψηλό επίπεδο. Σε αυτό το άρθρο θα φτάσουμε στα πραγματικά βασικά, εξετάζοντας πώς να δουλέψουμε με τα πιο βασικά δομικά στοιχεία της JavaScript - Μεταβλητές.</dd>
- <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Βασικά μαθηματικά σε JavaScript - αριθμοί και τελεστές </a></dt>
- <dd>Σε αυτό το σημείο του μαθήματος συζητάμε για τα μαθηματικά στη JavaScript - πώς μπορούμε να συνδυάσουμε τους τελεστές και άλλα χαρακτηριστικά για να χειριστούμε επιτυχώς τους αριθμούς.</dd>
- <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Χειρισμός κειμένου - συμβολοσειρές στη JavaScript</a></dt>
- <dd>Στη συνέχεια θα στρέψουμε την προσοχή μας σε συμβολοσειρές - έτσι λέγονται κομμάτια κειμένου στον προγραμματισμό. Σε αυτό το άρθρο θα εξετάσουμε όλα τα συνηθισμένα πράγματα που πρέπει να γνωρίζετε σχετικά με τις συμβολοσειρές κατά την εκμάθηση της JavaScript, όπως η δημιουργία συμβολοσειρών, η διαφυγή εισαγωγικών σε συμβολοσειρές και η σύνδεσή τους μαζί.</dd>
- <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Χρήσιμες μέθοδοι συμβολοσειρών</a></dt>
- <dd>Τώρα εξετάσαμε τα βασικά στοιχεία των συμβολοσειρών, ας ανεβάσουμε ταχύτητα και ας αρχίσουμε να σκεφτόμαστε τι χρήσιμες λειτουργίες μπορούμε να κάνουμε σε συμβολοσειρές με ενσωματωμένες μεθόδους, όπως η εύρεση του μήκους μιας συμβολοσειράς κειμένου, η ένωση και η διαίρεση των συμβολοσειρών, αντικαθιστώντας ένα χαρακτήρα σε μια συμβολοσειρά με έναν άλλο και πολλά άλλα.</dd>
- <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Πίνακες</a></dt>
- <dd>Στο τελευταίο άρθρο αυτής της ενότητας, θα εξετάσουμε τους πίνακες - ένας τακτικός τρόπος αποθήκευσης μιας λίστας στοιχείων δεδομένων κάτω από ένα ενιαίο όνομα μεταβλητής. Εδώ εξετάζουμε γιατί αυτό είναι χρήσιμο, στη συνέχεια θα διερευνήσουμε πώς να δημιουργήσουμε ένα πίνακα, να ανακτήσουμε, να προσθέσουμε και να αφαιρέσουμε στοιχεία που είναι αποθηκευμένα σε έναν πίνακα και πολλά άλλα.</dd>
-</dl>
-
-<h2 id="Αξιολόγηση">Αξιολόγηση</h2>
-
-<p>Η παρακάτω αξιολόγηση θα ελέγξει την κατανόησή σας στα βασικά της JavaScript που καλύπτονται στους παραπάνω οδηγούς.</p>
-
-<dl>
- <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Ανόητη γεννήτρια ιστοριών</a> </dt>
- <dd>Σε αυτήν την αξιολόγηση, θα είστε επιφορτισμένοι με τη χρήση κάποιων από τις γνώσεις που έχετε πάρει στα άρθρα αυτής της ενότητας και την εφαρμογή της στη δημιουργία μιας διασκεδαστικής εφαρμογής που δημιουργεί τυχαίες ανόητες ιστορίες. Καλα να περνατε!</dd>
-</dl>
diff --git a/files/el/learn/javascript/index.html b/files/el/learn/javascript/index.html
deleted file mode 100644
index 1730d9953f..0000000000
--- a/files/el/learn/javascript/index.html
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: JavaScript
-slug: Learn/JavaScript
-translation_of: Learn/JavaScript
----
-<div class="note"><span style="background-color: #ffffff; font-size: 14px;">Κατά τη μετάφραση αυτού του κειμένου η ορολογία δεν μεταφράζεται, όταν κάποιος όρος στην αγγλική δεν είναι κατανοητός μπορείται να τον αναζητήσετε στο  internet ή στο Glossar**.                           **Θα υλοποιηθεί σταδιακά.</span></div>
-
-<p class="summary">Η JavaScript είναι μια γλώσσα προγραμματισμού που επιτρέπει να υλοποιήσετε σύνθετες ενέργειες σε ιστοσελίδες - κάθε φορά που μια ιστοσελίδα κάνει περισσότερα από το να προβάλει στατικό περιεχόμενο - περιέχει δηλαδή έγκαιρα ενημερωμένο περιεχόμενο,  ή χάρτες με αλληλεπίδραση ή κινούμενα 2D/3D γραφικά ή κυλιόμενα βίντεο, jukeboxes, κλπ. - μπορείται να στοιχηματίσεται ότι είναι πολύ πιθανό να περιλαμβάνει javascript.</p>
-
-<h3 id="Διαδρομές_μάθησης"><strong>Διαδρομές μάθησης</strong></h3>
-
-<p>Η εκμάθηση της JavaScript είναι αποδεδειγμένα δυσκολότερη από άλλες σχετικές τεχνολογίες όπως <a href="/en-US/docs/Learn/HTML">HTML</a> και <a href="/en-US/docs/Learn/CSS">CSS</a>. Πριν προσπαθήσετε να μάθετε JavaScript, πρέπει να είστε εξοικοιωμένοι τουλάχιστο με αυτές τις 2 τεχνολογίες (HTM, CSS), ή και άλλες.  Ξεκίνηστε δουλεύοντα στις παρακάτω ενότητες:</p>
-
-<ul>
- <li><a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the Web</a></li>
- <li><a href="/en-US/docs/Web/Guide/HTML/Introduction">Introduction to HTML</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a></li>
-</ul>
-
-<p>Προηγούμενη εμπειρία με άλλες γλώσσες προγραμματισμού μπορεί να σας βοηθήσει.</p>
-
-<p>Αφού εξοικιωθείται  με τα βασικά της javascript, θα είστε σε θέση να μάθεται περισσότερα για πιο προχωρημένα θέματα, πχ:</p>
-
-<ul>
- <li>JavaScript in depth, as taught in our <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript guide</a></li>
- <li><a href="/en-US/docs/Web/API">HTML5 APIs</a></li>
-</ul>
-
-<h3 id="ΕΝΟΤΗΤΕΣ"><strong>ΕΝΟΤΗΤΕΣ</strong></h3>
-
-<p>Αυτό το θέμα περιέχει τις ακόλουθες ενότητες και προτείνεται να ακολουθήσετε την σειρά τους κατά τη μελέτη σας. </p>
-
-<dl>
- <dt><a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a></dt>
- <dd>Στην πρώτο κεφάλαιο, απαντούνται κάποιες βασικές ερωτήσεις όπως "Τι είναι η javascript;" , "Πως εμφανίζεται;", και "Τι μπορείται να κάνετε με αυτήν;", πριν ξεκινήσετε με τα πρώτα παραδείγματα κώδικα.  Μετά από αύτό θα αναφερθούν κάποιες βασικά χαρακτηριστικά της γλώσσας με λεπτομέρειες, όπως μεταβλητές (variables), συμβολοσειρές (strings), αριθμοί (numbers) και λίστες (arrays). </dd>
- <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript building blocks</a></dt>
- <dd>Σε αυτό το κεφάλαιο συνεχίζεται η κάλυψη των βασικών χαρακτηριστικών της γλώσσας με έμφαση στους συχνότερα συναντώμενους τύπους μποκ κώδικα όπως είναι  υποθέσεις (conditional statements), επαναλήψει (loops), συναρτήσεις (functions), και συμβάντα (events). Εάν έχετε ήδη συναντήσει τα παραπάνω, εδώ θα αναπτυχθούν με λεπτομέρεια.</dd>
- <dt><a href="/en-US/docs/Learn/JavaScript/Objects">Introducing JavaScript objects</a></dt>
- <dd>Στη javascript πολλά πράγματα είναι αντικείμενα (objects), από βασικά στοιχεία της γλώσσας όπως string και arrays μέχρι τα APIs του browser. Μπορείτε επίσης να δημιουργήσετε δικά σας αντικείμενα στα οποία να βάλετε συναρτήσεις και μεταβλητές δημιουργώντας αποτελεσματικό κώδικα. Η αντικειμενοστρεφής φύση της γλώσσας πρέπει να γίνει κατανοητή για να επεκτείνεται τις γνώσεις σας και να γράψετε αποτελεσματικό κώδικα. Γιαυτό έχει δημιουργηθεί και αυτό το κεφάλαιο για να σας βοηθήσει. Εδώ θα διδαχθείται τη θεωρία των αντικειμένων τη σύνταξή τους λεπτομερειακά, θα δείτε πω να κάνετε τα δικά σας αντικείμενα και επεξηγείται τι είναι τα JSON data και πως να δουλεύετε με αυτά.</dd>
- <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs</a></dt>
- <dd>When writing client-side JavaScript for web sites or applications, you won't go very far before you start to use APIs — interfaces for manipulating different aspects of the browser and operating system the site is running on, or even data from other web sites or services. In this module we will explore what APIs are, and how to use some of the most common APIs you'll come across often in your development work. </dd>
-</dl>
-
-<h2 id="Solving_common_JavaScript_problems">Solving common JavaScript problems</h2>
-
-<p><a href="/en-US/docs/Learn/JavaScript/Howto">Use JavaScript to solve common problems</a> provides links to sections of content explaining how to use JavaScript to solve very common problems when creating a webpage.</p>
-
-<h2 id="See_also">See also</h2>
-
-<dl>
- <dt><a href="/en-US/docs/Web/JavaScript">JavaScript on MDN</a></dt>
- <dd>The main entry point for core JavaScript documentation on MDN — this is where you'll find extensive reference docs on all aspects of the JavaScript language, and some advanced tutorials aimed at experienced JavaScripters.</dd>
- <dt><a href="https://www.youtube.com/user/codingmath">Coding math</a></dt>
- <dd>An excellent series of video tutorials to teach the math you need to understand to be an effective programmer, by <a href="https://twitter.com/bit101">Keith Peters</a>.</dd>
-</dl>