mirror of
https://gitlab.com/harald.mueller/aktuelle.kurse.git
synced 2024-12-01 06:01:57 +01:00
90 lines
37 KiB
Plaintext
90 lines
37 KiB
Plaintext
|
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Width"/><title>How The Web Works</title><link rel="canonical" href="https://academind.com/tutorials/how-the-web-works"/><meta name="title" content="How The Web Works"/><meta name="description" content="Learn how the web works, which technologies are involved and what you should learn if you're interested in starting a career in web development!"/><meta property="og:url" content="https://academind.com/tutorials/how-the-web-works"/><meta property="og:image" content="https://res.cloudinary.com/academind-gmbh/image/upload/c_fit,w_1600,h_900/v1/academind.com/content/tutorials/how-the-web-works/how-the-web-works"/><meta property=" og:image:secure_url" content="https://res.cloudinary.com/academind-gmbh/image/upload/c_fit,w_1600,h_900/v1/academind.com/content/tutorials/how-the-web-works/how-the-web-works"/><meta property="og:title" content="How The Web Works"/><meta property="og:description" content="Learn how the web works, which technologies are involved and what you should learn if you're interested in starting a career in web development!"/><meta property="og:image:type" content="article"/><meta property="og:image:width" content="1600"/><meta property="og:image:height" content="900"/><meta property="og:locale" content="en"/><meta name="twitter:title" content="How The Web Works"/><meta name="twitter:description" content="Learn how the web works, which technologies are involved and what you should learn if you're interested in starting a career in web development!"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:site" content="@academind_real"/><meta name="twitter:creator" content="@maxedapps"/><meta name="twitter:image" content="https://res.cloudinary.com/academind-gmbh/image/upload/c_fit,w_1600,h_900/v1/academind.com/content/tutorials/how-the-web-works/how-the-web-works"/><script type="application/ld+json">{
|
||
|
|
"@context": "http://schema.org",
|
||
|
|
"@type": "WebSite",
|
||
|
|
"name": "Academind",
|
||
|
|
"url": "https://academind.com/tutorials/how-the-web-works"
|
||
|
|
}</script><script type="application/ld+json">{
|
||
|
|
"@context": "http://schema.org",
|
||
|
|
"@type": "Course",
|
||
|
|
"name": "How The Web Works",
|
||
|
|
"description": "Learn how the web works, which technologies are involved and what you should learn if you're interested in starting a career in web development!",
|
||
|
|
"provider": {
|
||
|
|
"@type": "Organization",
|
||
|
|
"name": "Academind",
|
||
|
|
"sameAs": "https://academind.com"
|
||
|
|
}
|
||
|
|
}</script><script type="application/ld+json">{
|
||
|
|
"@context": "http://schema.org",
|
||
|
|
"@type": "BlogPosting",
|
||
|
|
"mainEntityOfPage": {
|
||
|
|
"@type": "WebPage",
|
||
|
|
"@id": "https://academind.com/tutorials/how-the-web-works"
|
||
|
|
},
|
||
|
|
"headline": "How The Web Works",
|
||
|
|
"image": [
|
||
|
|
"https://res.cloudinary.com/academind-gmbh/image/upload//v1/academind.com/content/tutorials/how-the-web-works/how-the-web-works"
|
||
|
|
],
|
||
|
|
"datePublished": "2019-04-15T17:00:00.000Z",
|
||
|
|
"dateModified": "2019-04-15T17:00:00.000Z",
|
||
|
|
"author": {
|
||
|
|
"@type": "Person",
|
||
|
|
"name": "Maximilian Schwarzmüller"
|
||
|
|
},
|
||
|
|
"publisher": {
|
||
|
|
"@type": "Organization",
|
||
|
|
"name": "Academind",
|
||
|
|
"logo": {
|
||
|
|
"@type": "ImageObject",
|
||
|
|
"url": "https://res.cloudinary.com/academind-gmbh/image/upload/academind.com/site/academind-logo"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
"description": "Learn how the web works, which technologies are involved and what you should learn if you're interested in starting a career in web development!"
|
||
|
|
}</script><script type="application/ld+json">{
|
||
|
|
"@context": "http://schema.org",
|
||
|
|
"@type": "Article",
|
||
|
|
"mainEntityOfPage": {
|
||
|
|
"@type": "WebPage",
|
||
|
|
"@id": "https://academind.com/tutorials/how-the-web-works"
|
||
|
|
},
|
||
|
|
"headline": "How The Web Works",
|
||
|
|
"image": [
|
||
|
|
"https://res.cloudinary.com/academind-gmbh/image/upload//v1/academind.com/content/tutorials/how-the-web-works/how-the-web-works"
|
||
|
|
],
|
||
|
|
"datePublished": "2019-04-15T17:00:00.000Z",
|
||
|
|
"dateModified": "2019-04-15T17:00:00.000Z",
|
||
|
|
"author": {
|
||
|
|
"@type": "Person",
|
||
|
|
"name": "Maximilian Schwarzmüller"
|
||
|
|
},
|
||
|
|
"publisher": {
|
||
|
|
"@type": "Organization",
|
||
|
|
"name": "Academind",
|
||
|
|
"logo": {
|
||
|
|
"@type": "ImageObject",
|
||
|
|
"url": "https://res.cloudinary.com/academind-gmbh/image/upload/academind.com/site/academind-logo"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
"description": "Learn how the web works, which technologies are involved and what you should learn if you're interested in starting a career in web development!"
|
||
|
|
}</script><script type="application/ld+json">{
|
||
|
|
"@context": "http://schema.org",
|
||
|
|
"@type": "BreadcrumbList",
|
||
|
|
"itemListElement": [{
|
||
|
|
"@type": "ListItem",
|
||
|
|
"position": 1,
|
||
|
|
"item": {
|
||
|
|
"@id": "https://academind.com",
|
||
|
|
"name": "Academind"
|
||
|
|
}
|
||
|
|
},{
|
||
|
|
"@type": "ListItem",
|
||
|
|
"position": 2,
|
||
|
|
"item": {
|
||
|
|
"@id": "https://academind.com/tutorials",
|
||
|
|
"name": "Tutorials"
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
}</script><meta name="next-head-count" content="27"/><link as='style' href='https://d33wubrfki0l68.cloudfront.net/css/33775d075812d2e4ecc5af023bb1ed13a91cbbb0/_next/static/css/c5a809736da9d944.css' rel='preload'/><link data-n-g href='https://d33wubrfki0l68.cloudfront.net/css/33775d075812d2e4ecc5af023bb1ed13a91cbbb0/_next/static/css/c5a809736da9d944.css' rel='stylesheet'/><link as='style' href='https://d33wubrfki0l68.cloudfront.net/css/38b2920a3a3cfcc8a7cc859630d0709597f89218/_next/static/css/a3ec866f90f20234.css' rel='preload'/><link data-n-p href='https://d33wubrfki0l68.cloudfront.net/css/38b2920a3a3cfcc8a7cc859630d0709597f89218/_next/static/css/a3ec866f90f20234.css' rel='stylesheet'/><noscript data-n-css=""></noscript></head><body><div id="__next" data-reactroot=""><header class="main-navigation_header__7AoAA"><a class="main-navigation_logo__UtM6v" href="/"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 309.66 178.06"><path style="fill:white" d="M68.6,114.34H51.75l-2.45,6.15H38L54.88,82.88H65.63l16.8,37.61H71.05Zm-8.4-20.92-4.85,12H65Z"></path><path style="fill:white" d="M130.35,115.59c-4.28,4.28-9.34,5.89-15.13,5.89-14.71,0-20.56-9.33-20.56-19.51,0-9.7,6.41-19.93,20.56-19.93a20.36,20.36,0,0,1,14.61,6l-6.58,6.41a11.21,11.21,0,0,0-8-3.23c-7.31,0-10,5.89-10,10.8s2.61,10.43,10,10.43a12.86,12.86,0,0,0,8.87-3.85Z"></path><path style="fill:white" d="M171.32,114.34H154.47L152,120.49H139.55L157.6,82.88h10.74l16.8,37.61H173.77Zm-8.4-20.92-4.85,12h9.65Z"></path><path style="fill:white" d="M211.63,83c13.31,0,19.67,8.24,19.67,18.52s-6.16,19.1-19.67,19.1H195.51V83ZM206,111.64h5.59c6.73,0,9.13-5.06,9.13-10.22s-2.61-9.55-9.13-9.55H206Z"></path><path style="fill:white" d="M272.43,120.61h-30.1V83H271.7v8.92H252.81v5.37h17.79V106H252.81v5.69h19.62Z"></path><path style="fill:white" d="M182.42,155.63l-9.65,11.42h-1.88l-9.39-11.32v22.33H151V140.45h11.11L172,153.18l9.86-12.73H193v37.61H182.42Z"></path><path style="fill:white" d="M206.63,178.06V140.45h10.59v37.61Z"></path><path style="fill:white" d="M254.45,160.63c-.25-4.41-.31-6.18-.31-7.63V140.18h10.64v37.43h-9l-15.62-20.14.15,8.14v12H229.64V140.18h9Z"></path><path style="fill:white" d="M290.08,140.18c13.24,0,19.57,8.2,19.57,18.43s-6.13,19-19.57,19h-16V140.18Zm-5.55,28.49h5.55c6.7,0,9.09-5,9.09-10.17s-2.6-9.5-9.09-9.5h-5.55Z"></path><path style="fill:white" d="M68.6,114.34H51.75l-2.45,6.15H38L54.88,82.88H65.63l16.8,37.61H71.05Zm-8.4-20.92-4.85,12H65Z"></path><path style="fill:white" d="M130.35,115.59c-4.28,4.28-9.34,5.89-15.13,5.89-14.71,0-20.56-9.33-20.56-19.51,0-9.7,6.41-19.93,20.56-19.93a20.36,20.36,0,0,1,14.61,6l-6.58,6.41a11.21,11.21,0,0,0-8-3.23c-7.31,0-10,5.89-10,10.8s2.61,10.43,10,10.43a12.86,12.86,0,0,0,8.87-3.85Z"></path><path style="fill:white" d="M171.32,114.34H154.47L152,120.49H139.55L157.6,82.88h10.74l16.8,37.61H173.77Zm-8.4-20.92-4.85,12h9.65Z"></path><path style="fill:white" d="M211.63,83c13.31,0,19.67,8.24,19.67,18.52s-6.16,19.1-19.67,19.1H195.51V83ZM206,111.64h5.59c6.73,0,9.13-5.06,9.13-10.22s-2.61-9.55-9.13-9.55H206Z"></path><path style="fill:white" d="M272.43,120.61h-30.1V83H271.7v8.92H252.81v5.37h17.79V106H252.81v5.69h19.62Z"></path><path style="fill:white" d="M182.42,155.63l-9.65,11.42h-1.88l-9.39-11.32v22.33H151V140.45h11.11L172,153.18l9.86-12.73H193v37.61H182.42Z"></path><path style="fill:white" d="M206.63,178.06V140.45h10.59v37.61Z"></path><path style="fill:white" d="M254.45,160.63c-.25-4.41-.31-6.18-.31-7.63V140.18h10.64v37.43h-9l-15.62-20.14.15,8.14v12H229.64V140.18h9Z"></path><path style="fill:white" d="M290.08,140.18c13.24,0,19.57,8.2,19.57,18.43s-6.13,19-19.57,19h-16V140.18Zm-5.55,28.49h5.55c6.7,0,9.09-5,9.09-10.17s-2.6-9.5-9.09-9.5h-5.55Z"></path><path style="fill:white" d="M29.2,14.38H0C.15,1.38,13.23,0,14.38,0S29,1.38,29.2,14.38Z"></path><path style="fill:#fa923f" d="M89.42,16.16C87.23,1.19,75,.38,75,.38H17c4.16.93,11.67,4,12.15,13.36l0,0,.31,100.62h4.11l18.5-39h16l18.44,39h2.82S89.82,28.54,89.42,16.16Z"></path></svg></a><nav><ul class="nav-links_items__WvrUP undefined"><li><a class="link-item_link__yW4rL " href="/courses"><span>Premium C
|
||
|
|
</p><address class="metadata_author__6rffw"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"></path></svg> <span>Created by <!-- -->Maximilian Schwarzmüller</span></address><p class="metadata_time__UgN0c"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M256,8C119,8,8,119,8,256S119,504,256,504,504,393,504,256,393,8,256,8Zm92.49,313h0l-20,25a16,16,0,0,1-22.49,2.5h0l-67-49.72a40,40,0,0,1-15-31.23V112a16,16,0,0,1,16-16h32a16,16,0,0,1,16,16V256l58,42.5A16,16,0,0,1,348.49,321Z"></path></svg> <time dateTime="2019-04-15T17:00:00.000Z">April 15, 2019</time></p><p class="metadata_video__jCo0K"><a href="https://youtube.com/watch?v=hJHvdBlSxug"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 576 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M336.2 64H47.8C21.4 64 0 85.4 0 111.8v288.4C0 426.6 21.4 448 47.8 448h288.4c26.4 0 47.8-21.4 47.8-47.8V111.8c0-26.4-21.4-47.8-47.8-47.8zm189.4 37.7L416 177.3v157.4l109.6 75.5c21.2 14.6 50.4-.3 50.4-25.8V127.5c0-25.4-29.1-40.4-50.4-25.8z"></path></svg> Watch Tutorial Video</a></p></div></header><div class="responsive-content_wrapper__go3oM"><div class="box_box__xGNf8 tutorial-content_content__fZ_3a"><p>The web is everywhere!</p><p>We use it more than we ever did before - also in many places where you might not see it. Because "the web" is more than just websites you visit by entering a URL in your browser.</p><p>No matter if you check your e-mails on your mobile phone or if you're sending a tweet - you are using the internet (i.e. "the web").</p><p>How does all that work? Which technologies are involved and what do you need to learn (and to what extent) if you want to become a web developer?</p><div class="info-box_box__nlIHG info-box_info__PuQV3"><p>In this article and video (see above), I will <strong>not</strong> dive into all technical details. This is meant to be a good overview of the web functionality.</p></div><section class="suggestions_suggestions__hQcJt"><h2>Related Premium Courses</h2><ul class="suggestions_suggestionItems__v8WUx"><li><a href="https://acad.link/css" target="_blank" rel="noopener noreferrer"><img src="https://res.cloudinary.com/academind-gmbh/image/upload/f_auto,q_auto:eco/dpr_2.0,w_100,c_limit,g_center/v1/academind.com/content/courses/css-complete-guide/css-course-the-complete-guide" alt="CSS - The Complete Guide" width="100" loading="lazy"/><div class="suggestions_itemContent__ouZRw"><h3>CSS - The Complete Guide</h3><p>Join this comprehensive 20h+ course to master CSS and learn how to create beautiful websites.</p></div></a></li><li><a href="https://acad.link/js" target="_blank" rel="noopener noreferrer"><img src="https://res.cloudinary.com/academind-gmbh/image/upload/f_auto,q_auto:eco/dpr_2.0,w_100,c_limit,g_center/v1/academind.com/content/courses/javascript-complete-guide/javascript-course-the-complete-guide" alt="JavaScript - The Complete Guide" width="100" loading="lazy"/><div class="suggestions_itemContent__ouZRw"><h3>JavaScript - The Complete Guide</h3><p>Learn JavaScript from scratch to build highly interactive and dynamic websites in this hands-on course!</p></div></a></li></ul></section><h1 id="how-websites-work" class="anchored-headline_headline__gBJy5"><a style="text-decoration:none" href="#how-websites-work" class="anchored-headline_anchor__4qPyS">#</a>How Websites Work</h1><p>Let's start with the most obvious way of using the internet: You visit a website like <a href="https://www.academind.com">academind.com</a>.</p><p>The moment you enter this address in your browser and you hit ENTER, a lot of different
|
||
|
|
</span><span><</span><span style="color:#ff6363">p</span><span>>Websites work because browser understand </span><span style="color:#ff6363">HTML</span><span>!</</span><span style="color:#ff6363">p</span><span>></span></code></pre></pre><p><code><h1></code> and <code><p></code> are so called "HTML tags" and if you want to learn more about HTML, <a href="/learn/html/beginner-s-guide/">this series</a> is a great place to go.</p><p>Every HTML tag has some semantic meaning which the browser understands, because HTML is also standardized. Hence there is no guessing about what a <code><h1></code> tag means.</p><p>The browser knows how to parse HTML and now simply goes through the entire response data (also called "the response body") to render the website.</p><h2 id="step-4-page-is-displayed" class="anchored-headline_headline__gBJy5"><a style="text-decoration:none" href="#step-4-page-is-displayed" class="anchored-headline_anchor__4qPyS">#</a>Step 4 - Page Is Displayed</h2><p>As mentioned, the browser goes through the HTML data returned by the server and builds a website based on that.</p><p>Though it is important to know, that HTML does not include any instructions regarding <strong>what</strong> the site should look like (i.e. how it should be styled). It really only defines the structure and tells the browser which content is a heading, which content is an image, which content is a paragraph etc. This is especially important for accessibility - screen readers get all the useful information out of the HTML structure.</p><p>A page that only includes HTML would look like this though:</p><img src="https://res.cloudinary.com/academind-gmbh/image/upload/f_auto,q_auto:eco/dpr_2.0,w_400,c_limit,g_center/v1/academind.com/content/tutorials/how-the-web-works/html-only" alt="Without any styling, a page doesn't look too pretty." width="400" loading="lazy" class="image_image__3pNxh"/><p>Not that beautiful, right?</p><p>That's why there's another important technology (another "programming language", which isn't really a programming language): CSS ("Cascading Style Sheets").</p><p>CSS is all about adding styling to the website. That is done via "CSS rules":</p><pre><pre style="display:block;overflow-x:auto;padding:0.5em;background:#011627;color:#d6deeb;class-name:code-block_codeblock__E0Rga"><code class="language-css" style="white-space:pre"><span style="color:#ff6363">h1</span><span> {
|
||
|
|
</span><span> </span><span style="color:#80cbc4">color</span><span>: blue;
|
||
|
|
</span>}</code></pre></pre><p>This rule would color all <code><h1></code> tags blue.</p><p>Rules like that can be added inside of the HTML code but typically, they're part of separate <code>.css</code> files which are requested separately.</p><p>Without diving into too many details here, that holds one important implication: A website can be made up of more than the data of the first response we get.</p><p>In practice, websites fetch a lot of additional data (via additional requests and responses) which are kicked off once the first response arrived.</p><p>How does that work?</p><p>Well, the HTML code of the first response simply contains instructions to fetch more data via new requests - and the browser understands these instructions:</p><pre><pre style="display:block;overflow-x:auto;padding:0.5em;background:#011627;color:#d6deeb;class-name:code-block_codeblock__E0Rga"><code class="language-html" style="white-space:pre"><span><link </span><span style="color:#7fdbca">rel</span><span>=</span><span style="color:#ecc48d">"stylesheet"</span><span> href=</span><span style="color:#ecc48d">"/page-styles.css"</span><span> /></span></code></pre></pre><img src="https://res.cloudinary.com/academind-gmbh/image/upload/f_auto,q_auto:eco/dpr_2.0,w_400,c_limit,g_center/v1/academind.com/content/tutorials/how-the-web-works/multiple-requests" alt="A browser sends multiple requests to fetch all external resources." width="400" loading="lazy" class="image_image__3pNxh"/><div class="info-box_box__nlIHG info-box_info__PuQV3"><p>Again, I won't dive into more details here. If you want to learn more about CSS, our <a href="https://acad.link/css">Complete Guide</a> will be very useful!</p></div><p>Together with CSS, the browser is able to display webpages like this:</p><img src="https://res.cloudinary.com/academind-gmbh/image/upload/f_auto,q_auto:eco/dpr_2.0,w_400,c_limit,g_center/v1/academind.com/content/tutorials/how-the-web-works/page-with-css" alt="With some CSS added, a page looks a lot nicer." width="400" loading="lazy" class="image_image__3pNxh"/><p>There actually is another programming language involved (this time, it really is a programming language!): JavaScript.</p><p>It's not always visible but all dynamic content you find on a website (e.g. tabs, overlays etc.) is actually only possible because of JavaScript. It allows web developers to define code that runs in the browser (<strong>not</strong> on the server), hence JavaScript can be used to change the website whilst the user is viewing it.</p><p>As before, if you want to learn more, check out <a href="/learn/javascript/">our JavaScript resources</a>, for example <a href="https://acad.link/js">our complete course</a>.</p><hr/><p>These are the four steps that are <strong>always</strong> involved when you enter a page address like academind.com and you thereafter see the website content in your browser.</p><h1 id="server-side-vs-browser-side" class="anchored-headline_headline__gBJy5"><a style="text-decoration:none" href="#server-side-vs-browser-side" class="anchored-headline_anchor__4qPyS">#</a>Server-side vs Browser-side</h1><p>From the four steps above, you learned that we can differentiate two core "sides" when talking about the web: <strong>Server-side</strong> and <strong>Browser-side</strong> (or: <strong>Client-side</strong> since we can also access the internet without a browser - see below!).</p><p>If you're interested in becoming a web developer, it's important to know that you use different technologies and programming languages for these sides.</p><h2 id="server-side" class="anchored-headline_headline__gBJy5"><a style="text-decoration:none" href="#server-side" class="anchored-headline_anchor__4qPyS">#</a>Server-side</h2><p>You need server-side programming languages - i.e. languages that don't work in the browser but that can run on a normal computer (a server is in the end just a normal computer).</p><p>Examples would be:</p><ul><li><a href="/learn/node-js/">Node.js</a></li><li><a href="https://www.php.
|