1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
|
---
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>
|
