diff options
Diffstat (limited to 'files/de/learn/common_questions')
3 files changed, 400 insertions, 0 deletions
diff --git a/files/de/learn/common_questions/index.html b/files/de/learn/common_questions/index.html new file mode 100644 index 0000000000..4aafae4a32 --- /dev/null +++ b/files/de/learn/common_questions/index.html @@ -0,0 +1,135 @@ +--- +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/de/learn/common_questions/upload_files_to_a_web_server/index.html b/files/de/learn/common_questions/upload_files_to_a_web_server/index.html new file mode 100644 index 0000000000..39e775db98 --- /dev/null +++ b/files/de/learn/common_questions/upload_files_to_a_web_server/index.html @@ -0,0 +1,170 @@ +--- +title: Wie lädst Du deine Dateien auf einem Webserver hoch? +slug: Learn/Common_questions/Upload_files_to_a_web_server +tags: + - FTP + - GitHub + - Uploading + - rsync + - sftp +translation_of: Learn/Common_questions/Upload_files_to_a_web_server +--- +<div class="summary"> +<p>Dieser Artikel zeigt dir wie Du deine Seite online mithilfe von Dateiübertragungs-Tools veröffentlichen kannst.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Vorraussetzungen:</th> + <td>Du musst wissen <a href="https://developer.mozilla.org/en-US/Learn/What_is_a_web_server">was ein Webserver ist</a> und <a href="https://developer.mozilla.org/en-US/Learn/Understanding_domain_names">wie Domainnamen funktionieren</a>. Du musst ebenfalls wissen wie man eine <a href="/en-US/Learn/Set_up_a_basic_working_environment">einfache Umgebung einrichtet</a> und wie man <a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">eine einfache Webseite schreibt</a>.</td> + </tr> + <tr> + <th scope="row">Ziel:</th> + <td>Lerne wie man Dateien mithilfe von verschiedenen Dateiübertragungs Tools auf einem Server hochlädt.</td> + </tr> + </tbody> +</table> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Falls Du eine einfache Webseite erstellt hast (siehe <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a> für ein Beispiel), willst Du diese wahrscheinlich auf einem Webserver online stellen. In diesem Artikel diskutieren wir darüber wie man dies mit Verwendung verschiedener Optionen wie SFTP-Klienten, Rsync and GitHub macht.</p> + +<h2 id="SFTP">SFTP</h2> + +<p>Es gibt mehrere SFTP-Klienten. Unsere Demo umfasst <a href="https://filezilla-project.org/">FileZilla</a>, da es kostenlos und verfügbar ist für Windows, macOS und Linux. Um FileZilla zu installieren, gehe zur <a href="https://filezilla-project.org/download.php?type=client">FileZilla Download-Seite</a>, klicke auf die große Download-Schaltfläche und installiere dann mithilfe der Installationsdatei auf dem üblichen Weg.</p> + +<div class="note"> +<p><strong>Bemerkung</strong>: Natürlich gibt es eine Menge anderer Möglichkeiten. Siehe <a href="/en-US/Learn/How_much_does_it_cost#Publishing_tools.3A_FTP_client">Publishing tools</a> für mehr Informationen.</p> +</div> + +<p>Öffne das FileZilla Programm. So sollte es in etwa aussehen:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15767/filezilla-ui.png" style="display: block; height: 451px; margin: 0px auto; width: 690px;"></p> + +<h3 id="Einloggen">Einloggen</h3> + +<p>Für dieses Beispiel nehmen wir an, dass unser Hosting-Anbieter (der Service welcher unseren HTTP Web-Server hosten wird) eine fiktive Firma namens "Example Hosting Provider" ist, dessen URLs so aussehen: <code>mypersonalwebsite.examplehostingprovider.net</code>.</p> + +<p>Wir haben soeben einen Account eröffnet und diese Informationen von ihnen erhalten:</p> + +<blockquote> +<p>Gratulation zum Eröffnen eines Accounts bei Example Hosting Provider.</p> + +<p>Ihr Account ist: <code>demozilla</code></p> + +<p>Ihre Webseite wird sichtbar sein unter <code>demozilla.examplehostingprovider.net</code></p> + +<p>Um diesen Account zu veröffentlichen, verbinden Sie sich durch SFTP mit den folgenden Zugangsdaten:</p> + +<ul> + <li>SFTP-Server: <code>sftp://demozilla.examplehostingprovider.net</code></li> + <li>Benutzername: <code>demozilla</code></li> + <li>Passwort: <code>quickbrownfox</code></li> + <li>Port: <code>5548</code></li> + <li>Um etwas im Netz zu veröffentlichen, legen Sie ihre Dateien in den <code>Public/htdocs</code> Ordner.</li> +</ul> +</blockquote> + +<p>Lasse uns zuerst einen Blick auf <code>http://demozilla.examplehostingprovider.net/</code> werfen — wie Du sehen kannst, ist dort bisher nichts:</p> + +<p><img alt="Our demozilla personal website, seen in a browser: it's empty" src="https://mdn.mozillademos.org/files/9615/demozilla-empty.png" style="border-style: solid; border-width: 1px; display: block; height: 233px; margin: 0 auto; width: 409px;"></p> + +<div class="note"> +<p><strong>Bemerkung</strong>: Abhängig von deinem Hosting-Anbieter wirst Du die meiste Zeit eine Seite sehen die so etwas wie “Diese Website wird gehosted von [Hosting Service].” anzeigt, wenn Du deine Webadresse zum ersten mal besuchst.</p> +</div> + +<p>Um deinen SFTP-Klienten mit dem Remoteserver zu verbinden, folge diesen Schritten:</p> + +<ol> + <li>Wähle <em>File > Site Manager...</em> vom Hauptmenü.</li> + <li>Im <em>Site Manager</em> Fenster, klicke auf die <em>New Site</em> Schaltfläche, dann fülle den Seitennamen als <strong>demozilla</strong> im angegebenen Feld aus.</li> + <li>Fülle den SFTP-Server, welcher dein Host bereitgestellt hat in das <em>Host:</em> Feld.</li> + <li>In dem <em>Logon Type:</em> Drop-down-Menü, wähle <em>Normal</em>, dann fülle deinen angegebenen Nutzernamen und Passwort in die entsprechenden Felder.</li> + <li>Fülle den korrent Port aus und andere Informationen.</li> +</ol> + +<p>Dein Fenster sollte nun in etwa so aussehen:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15769/site-manager.png" style="display: block; height: 561px; margin: 0px auto; width: 684px;"></p> + +<p>Klicke jetzt <em>Verbinden</em> um zum SFTP-Server zu verbinden.</p> + +<p>Bemerkung: Stelle sicher, dass dein Hosting-Anbieter eine SFTP (Secure FTP)-Verbindung zu deinem Webspace anbietet. FTP ist grundsätzlich unsicher und Du solltest es nicht verwenden.</p> + +<h3 id="Hier_und_dort_Lokale_und_remote_Ansicht">Hier und dort: Lokale und remote Ansicht</h3> + +<p>Einmal verbunden, sollte dein Bildschirm etwa so aussehen (wir haben uns mit einem eigenen Beispiel verbunden um dir einen Eindruck zu geben):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15768/connected.png" style="border-style: solid; border-width: 1px; display: block; height: 199px; margin: 0px auto; width: 700px;"></p> + +<p>Lasse uns prüfen was du siehst:</p> + +<ul> + <li>On the center left pane, you see your local files. Navigate into the directory where you store your website (e.g. <code>mdn</code>).</li> + <li>On the center right pane, you see remote files. We are logged into our distant FTP root (in this case, <code>users/demozilla</code>)</li> + <li>You can ignore the bottom and top panes for now. Respectively, these are a log of messages showing the connection status between your computer and the SFTP server, and a live log of every interaction between your SFTP client and the server.</li> +</ul> + +<h3 id="Uploading_to_the_server">Uploading to the server</h3> + +<p>Our example host instructions told us "To publish on the web, put your files into the <code>Public/htdocs</code> directory." You need to navigate to the specified directory in your right pane. This directory is effectively the root of your website — where your <code>index.html</code> file and other assets will go.</p> + +<p>Once you've found the correct remote directory to put your files in, to upload your files to the server you need to drag-and-drop them from the left pane to the right pane.</p> + +<h3 id="Sind_sie_wirklich_online">Sind sie wirklich online?</h3> + +<p>So far, so good, but are the files really online? You can double-check by going back to your website (e.g. <code>http://demozilla.examplehostingprovider.net/</code>) in your browser:</p> + +<p><img alt="Here we go: our website is live!" src="https://mdn.mozillademos.org/files/9627/here-we-go.png" style="border-style: solid; border-width: 1px; display: block; height: 442px; margin: 0 auto; width: 400px;"></p> + +<p>Und <em lang="fr">voilà</em>! Unsere Webseite ist live!</p> + +<h2 id="Rsync">Rsync</h2> + +<p>{{Glossary("Rsync")}} is a local-to-remote file synchronizing tool, which is generally available on most Unix-based systems (like macOS and Linux), but Windows versions exist too.</p> + +<p>It is seen as a more advanced tool than SFTP, beause by default it is used on the command line. A basic command looks like so:</p> + +<pre class="brush: bash">rsync [-options] SOURCE user@x.x.x.x:DESTINATION</pre> + +<ul> + <li><code>-options</code> is a dash followed by a one or more letters, for example <code>-v</code> for verbose error messages, and <code>-b</code> to make backups. You can see the full list at the <a href="https://linux.die.net/man/1/rsync">rsync man page</a> (search for "Options summary").</li> + <li><code>SOURCE</code> is the path to the local file or directory that you want to copy files over from.</li> + <li><code>user@</code> is the credentials of the user on the remote server you want to copy files over to.</li> + <li><code>x.x.x.x</code> is the IP address of the remote server.</li> + <li><code>DESTINATION</code> is the path to the location you want to copy your directory or files to on the remote server.</li> +</ul> + +<p>You'd need to get such details from your hosting provider.</p> + +<p>For more information and further eamples, see <a href="https://www.atlantic.net/hipaa-compliant-cloud-hosting-services/how-to-use-rsync-copy-sync-files-servers/">How to Use Rsync to Copy/Sync Files Between Servers</a>.</p> + +<p>Of course, it is a good idea to use a secure connection, like with FTP. In the case of Rsync, you specify SSH details to make the connection over SSH, using the <code>-e</code> option. For example:</p> + +<pre class="brush: bash">rsync [-options] -e "ssh [SSH DETAILS GO HERE]" SOURCE user@x.x.x.x:DESTINATION</pre> + +<p>You can find more details of what is needed at <a href="https://www.digitalocean.com/community/tutorials/how-to-copy-files-with-rsync-over-ssh">How To Copy Files With Rsync Over SSH</a>.</p> + +<h3 id="Rsync_GUI_Tools">Rsync GUI Tools</h3> + +<p>As with other command line tools, GUI tools also exist for Rsync, for those who are not as comfortable with using the command line. <a href="https://acrosync.com/mac.html">Acrosync</a> is one such tool, and it is available for Windows and macOS.</p> + +<p>Again, you would have to get the connection credentials from your hosting provider, but this way you'd have a GUI to enter them in.</p> + +<h2 id="GitHub">GitHub</h2> + +<p>GitHub erlaubt Die Webseiten via <a href="https://pages.github.com/">GitHub pages</a> (gh-pages) zu veröffentlichen.</p> + +<p>We've covered the basics of using this in the <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your website</a> article from our <a href="/en-US/Learn/Getting_started_with_the_web">Getting started with the Web</a> guide, so we aren't going to repeat it all here.</p> + +<p>However, it is worth knowing that you can also host a website on GitHub, but use a custom domain with it. See <a href="https://help.github.com/articles/using-a-custom-domain-with-github-pages/">Using a custom domain with GitHub Pages</a> for a detailed guide.</p> + +<h2 id="Andere_Methoden_um_Dateien_hochzuladen">Andere Methoden um Dateien hochzuladen</h2> + +<p>The FTP protocol is one well-known method for publishing a website, but not the only one. Here are a few other possibilities:</p> + +<ul> + <li><strong>Web interfaces</strong>. An HTML interface acting as front-end for a remote file upload service. Provided by your hosting service.</li> + <li><strong>{{Glossary("WebDAV")}}</strong>. An extension of the {{Glossary("HTTP")}} protocol to allow more advanced file management.</li> +</ul> diff --git a/files/de/learn/common_questions/wie_das_internet_funktioniert/index.html b/files/de/learn/common_questions/wie_das_internet_funktioniert/index.html new file mode 100644 index 0000000000..f780dac8a7 --- /dev/null +++ b/files/de/learn/common_questions/wie_das_internet_funktioniert/index.html @@ -0,0 +1,95 @@ +--- +title: Wie das Internet funktioniert +slug: Learn/Common_questions/Wie_das_Internet_funktioniert +translation_of: Learn/Common_questions/How_does_the_Internet_work +--- +<div>{{LearnSidebar}}</div> + +<div class="summary"> +<p>Dieser Artikel behandelt, was das Internet ist uns wie es funktioniert</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Voraussetzungen:</th> + <td>Keine, aber wir empfehlen dir den Artikel <a href="/en-US/docs/Learn/Thinking_before_coding">setting project goals</a> zuerst zu lesen.</td> + </tr> + <tr> + <th scope="row">Ziel:</th> + <td>You will learn the basics of the technical infrastructure of the Web and the difference between Internet and the Web.</td> + </tr> + </tbody> +</table> + +<h2 id="Summary">Summary</h2> + +<p>Das <strong>Internet</strong> ist das Rückgrat des Webs, die technische Infrastruktur die das Web möglich macht. Grundlegend ist das Internet ein riesiges Netzwerk von Computern, welche untereinander kommunizieren.</p> + +<p><a href="https://en.wikipedia.org/wiki/Internet#History" rel="external">The history of the Internet is somewhat obscure</a>. It began in the 1960s as a US-army-funded research project, then evolved into a public infrastructure in the 1980s with the support of many public universities and private companies. The various technologies that support the Internet have evolved over time, but the way it works hasn't changed that much: Internet is a way to connect computers all together and ensure that, whatever happens, they find a way to stay connected.</p> + +<h2 id="Active_Learning">Active Learning</h2> + +<ul> + <li><a href="https://www.youtube.com/watch?v=7_LPdttKXPc" rel="external">How the internet Works in 5 minutes</a>: A 5 minute video to understand the very basics of Internet by Aaron Titus.</li> +</ul> + +<h2 id="Deeper_dive">Deeper dive</h2> + +<h3 id="A_simple_network">A simple network</h3> + +<p>When two computers need to communicate, you have to link them, either physically (usually with an <a href="http://en.wikipedia.org/wiki/Ethernet_crossover_cable" rel="external">Ethernet cable</a>) or wirelessly (for example with <a href="http://en.wikipedia.org/wiki/WiFi" rel="external">WiFi</a> or <a href="http://en.wikipedia.org/wiki/Bluetooth" rel="external">Bluetooth</a> systems). All modern computers can sustain any of those connections.</p> + +<div class="note"> +<p><strong>Note:</strong> For the rest of this article, we will only talk about physical cables, but wireless networks work the same.</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>Such a network is not limited to two computers. You can connect as many computers as you wish. But it gets complicated quickly. If you're trying to connect, say, ten computers, you need 45 cables, with nine plugs per computer!</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>To solve this problem, each computer on a network is connected to a special tiny computer called a <em>router</em>. This <em>router</em> has only one job: like a signaler at a railway station, it makes sure that a message sent from a given computer arrives at the right destination computer. To send a message to computer B, computer A must send the message to the router, which in turn forwards the message to computer B and makes sure the message is not delivered to computer C.</p> + +<p>Once we add a router to the system, our network of 10 computers only requires 10 cables: a single plug for each computer and a router with 10 plugs.</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="A_network_of_networks">A network of networks</h3> + +<p>So far so good. But what about connecting hundreds, thousands, billions of computers? Of course a single <em>router</em> can't scale that far, but, if you read carefully, we said that a <em>router</em> is a computer like any other, so what keeps us from connecting two <em>routers</em> together? Nothing, so let's do that.</p> + +<p><img alt="Two routers linked together" src="https://mdn.mozillademos.org/files/8447/internet-schema-4.png"></p> + +<p>By connecting computers to routers, then routers to routers, we are able to scale infinitely.</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>Such a network comes very close to what we call the Internet, but we're missing something. We built that network for our own purposes. There are other networks out there: your friends, your neighbors, anyone can have their own network of computers. But it's not really possible to set cables up between your house and the rest of the world, so how can you handle this? Well, there are already cables linked to your house, for example, electric power and telephone. The telephone infrastructure already connects your house with anyone in the world so it is the perfect wire we need. To connect our network to the telephone infrastructure, we need a special piece of equipment called a <em>modem</em>. This <em>modem</em> turns the information from our network into information manageable by the telephone infrastructure and vice versa.</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>So we are connected to the telephone infrastructure. The next step is to send the messages from our network to the network we want to reach. To do that, we will connect our network to an Internet Service Provider (ISP). An ISP is a company that manages some special <em>routers</em> that are all linked together and can also access other ISPs' routers. So the message from our network is carried through the network of ISP networks to the destination network. The Internet consists of this whole infrastructure of networks.</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="Finding_computers">Finding computers</h3> + +<p>If you want to send a message to a computer, you have to specify which one. Thus any computer linked to a network has a unique address that identifies it, called an "IP address" (where IP stands for <em>Internet Protocol</em>). It's an address made of a series of four numbers separated by dots, for example: <code>192.168.2.10</code>.</p> + +<p>That's perfectly fine for computers, but we human beings have a hard time remembering that sort of address. To make things easier, we can alias an IP address with a human readable name called a <em>domain name</em>. For example, <code>google.com</code> is the domain name used on top of the IP address <code>173.194.121.32</code>. So using the domain name is the easiest way for us to reach a computer over the Internet.</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="Internet_and_the_web">Internet and the web</h3> + +<p>As you might notice, when we browse the Web with a Web browser, we usually use the domain name to reach a website. Does that mean the Internet and the Web are the same thing? It's not that simple. As we saw, the Internet is a technical infrastructure which allows billions of computers to be connected all together. Among those computers, some computers (called <em>Web servers</em>) can send messages intelligible to web browsers. The <em>Internet</em> is an infrastructure, whereas the <em>Web</em> is a service built on top of the infrastructure. It is worth noting there are several other services built on top of the Internet, such as email and {{Glossary("IRC")}}.</p> + +<h2 id="Next_steps">Next steps</h2> + +<ul> + <li><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">How the Web works</a></li> + <li><a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine">Understanding the difference between a web page, a web site, a web server and a search engine</a></li> + <li><a href="/en-US/docs/Learn/Understanding_domain_names">Understanding domain names</a></li> +</ul> |