mirror of
https://gitlab.com/harald.mueller/aktuelle.kurse.git
synced 2024-10-19 09:55:03 +02: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 Courses</span><span class="badge_badge__NOJp6 undefined">3</span></a></li><li><a class="link-item_link__yW4rL " href="/tutorials"><span>Tutorials</span></a></li><li><a class="link-item_link__yW4rL " href="/community"><span>Community</span></a></li><li><a href="https://pro.academind.com" target="_blank" rel="noopener noreferrer" class="button_btn__SPBtM button_raised__hJTRh button_accent__d7HIV "><span class="button_icon__500pb"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" height="20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M622.34 153.2L343.4 67.5c-15.2-4.67-31.6-4.67-46.79 0L17.66 153.2c-23.54 7.23-23.54 38.36 0 45.59l48.63 14.94c-10.67 13.19-17.23 29.28-17.88 46.9C38.78 266.15 32 276.11 32 288c0 10.78 5.68 19.85 13.86 25.65L20.33 428.53C18.11 438.52 25.71 448 35.94 448h56.11c10.24 0 17.84-9.48 15.62-19.47L82.14 313.65C90.32 307.85 96 298.78 96 288c0-11.57-6.47-21.25-15.66-26.87.76-15.02 8.44-28.3 20.69-36.72L296.6 284.5c9.06 2.78 26.44 6.25 46.79 0l278.95-85.7c23.55-7.24 23.55-38.36 0-45.6zM352.79 315.09c-28.53 8.76-52.84 3.92-65.59 0l-145.02-44.55L128 384c0 35.35 85.96 64 192 64s192-28.65 192-64l-14.18-113.47-145.03 44.56z"></path></svg></span><span>Academind Pro</span></a></li></ul></nav><div class="main-navigation_menuButton__1gNUL"><button class="mobile-menu-toggle_button__J1cJL" aria-label="Menu"><div></div><div></div><div></div></button></div></header><main class="layout_main__E22hH"><article><header class="tutorial-header_header__1DSok"><div class="main-media_media__w3bTI"><iframe width="400" src="https://www.youtube.com/embed/hJHvdBlSxug?origin=https://academind.com" frameBorder="0"></iframe></div><div class="metadata_meta__lDO75"><h1>How The Web Works</h1><p class="metadata_description__NcLLZ">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!
|
|
</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 things happen:</p><ol><li>The URL gets resolved</li><li>A Request is sent to the server of the website</li><li>The response of the server is parsed</li><li>The page is rendered and displayed</li></ol><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/how-the-web-works-big-picture" alt="A server receives a request by the browser and responds with data - typically an HTML file which then can be parsed by the browser." width="400" loading="lazy" class="image_image__3pNxh"/><p>Actually, every single step could be split up in multiple other steps, but for a good overview of how it all works, that's something we can ignore here. Let's have a look at all four steps.</p><h2 id="step-1-url-gets-resolved" class="anchored-headline_headline__gBJy5"><a style="text-decoration:none" href="#step-1-url-gets-resolved" class="anchored-headline_anchor__4qPyS">#</a>Step 1 - URL Gets Resolved</h2><p>The website code is obviously not stored on your machine and hence needs to be fetched from another computer where it is stored. This "other computer" is called a "server". Because it serves some purpose, in our case, it serves the website.</p><p>You enter "academind.com" (that is called "a domain") but actually, the server which hosts the source code of a website, is identified via IP (= Internet Protocol) addresses. The browser sends a "request" (see step 2) to the server with the IP address you entered (indirectly - you of course entered "academind.com").</p><div class="info-box_box__nlIHG info-box_info__PuQV3"><p>In reality, you also often enter <code>"academind.com/learn"</code> or anything like that. <code>"academind.com"</code> is the <strong>domain</strong>, <code>"/learn"</code> is the so-called <strong>path</strong>. Together, they make up the <strong>"URL"</strong> ("Uniform Resource Locator").</p><p>In addition, you can visit most websites via <code>"www.academind.com"</code> or just <code>"academind.com"</code>. Technically, <code>"www"</code> is a <strong>subdomain</strong> but most websites simply redirect traffic to <code>"www"</code> to the main page.</p></div><p>An IP address typically looks like this: <code>172.56.180.5</code> (though there also is a more "modern" form called IPv6 - but let's ignore that for now). You can learn more about IP addresses <a href="https://en.wikipedia.org/wiki/IP_address">on Wikipedia</a>.</p><p>How is the domain "academind.com" translated to its IP address?</p><p>There's a special type of server out there in the internet - not just one but many servers of that type. A so called "name server" or "DNS server" (where DNS = "Domain Name System").</p><p>The job of these DNS servers is to translate domains to IP addresses. You can imagine those servers as huge dictionaries that store translation tables: <strong>Domain => IP address</strong>.</p><p>When you enter "academind.com", the browser therefore first fetches the IP address from such a DNS server.</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/dns-ip-translation" alt="A DNS server translates the domain in the URL to an IP address." width="400" loading="lazy" class="image_image__3pNxh"/><p>In case you're wondering: The browser knows the addresses of these domain servers by heart, they're programmed into the browser so to say.</p><p>Once the IP address is known, we advanced to step 2.</p><h2 id="step-2-request-is-sent" class="anchored-headline_headline__gBJy5"><a style="text-decoration:none" href="#step-2-request-is-sent" class="anchored-headline_anchor__4qPyS">#</a>Step 2 - Request Is Sent</h2><p>With the IP address resolved, the browser goes ahead and makes a request to the server with that IP address.</p><p>"A request" is not just a term. It really is a technical thing that happens behind the scenes.</p><p>The browser bundles up a bunch of information (What's the exact URL? Which kind of request should be made? Should metadata be attached) and sends that data package to the IP address.</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/request-package" alt="A request is a bunch of information sent to a server." width="400" loading="lazy" class="image_image__3pNxh"/><p>The data is sent via the "HyperText Transfer Protocol" (known as "HTTP") - a standardized protocol which defines what a request (and response) has to look like, which data may be included (and in which form) and how the request will be submitted. You can learn more about HTTP <a href="https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol">here</a>.</p><div class="info-box_box__nlIHG info-box_info__PuQV3"><p>Because HTTP is used, a full URL actually looks like this: <a href="http://academind.com">http://academind.com</a>. The browser auto-completes it for you.</p><p>And there also is <strong>HTTPS</strong> - it's like HTTP but <strong>encrypted</strong>. Most modern pages (including <a href="https://www.academind.com">academind.com</a>) use that instead of HTTP. A full URL then becomes: <a href="https://academind.com">https://academind.com</a>.</p></div><p>Since the whole process and format is standardized, there is no guessing about how that request has to be read by the server.</p><p>The server then handles the request appropriately and returns a so called "response". Again, a "response" is a technical thing and kind of similar to a "request". You could say it's basically a "request" in the opposite direction.</p><p>Like a request, a response can contain data, metadata etc. When requesting a page like academind.com, the response will contain the code that is required to render the page onto the screen.</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/response-package" alt="A response also includes metadata as well as the data sent back by the server - often, that's HTML" width="400" loading="lazy" class="image_image__3pNxh"/><p>What happens on the server?</p><p>That's defined by web developers. In the end, a response has to be sent. That response doesn't have to contain "a website". It can contain any data - including files or images.</p><p>Some servers are programmed to generate websites dynamically based on the request (e.g. a profile page that contains your personal data), other servers return pre-generated HTML pages (e.g. a news page). Or both is done - for different parts of a webpage. There also is a third alternative: Websites that are pre-generated but that change their appearance and data in the browser.</p><div class="info-box_box__nlIHG info-box_info__PuQV3"><p>The different kinds of websites are not really the focus of this article. If you want to learn more about that, <a href="/learn/web-dev/dynamic-vs-static-vs-spa/">check out this article + video</a>.</p></div><p>For our simple case we have a server that returns the code to display a website. So let's continue with step 3.</p><h2 id="step-3-response-is-parsed" class="anchored-headline_headline__gBJy5"><a style="text-decoration:none" href="#step-3-response-is-parsed" class="anchored-headline_anchor__4qPyS">#</a>Step 3 - Response Is Parsed</h2><p>The browser receives the response sent by the server. This alone, doesn't display anything on the screen though.</p><p>Instead, the next step is that the browser parses the response. Just as the server did it with the request. Again, the standardization enforced by HTTP helps of course.</p><p>The browser checks the data and metadata that's enclosed in the response. And based on that, it decides what to do.</p><p>You might've had cases where a PDF opened in your browser. That happened because the response informed the browser that the data is <strong>not</strong> a website but a PDF document instead. And the browser tries to pick the best handling mechanism for any data type it detects.</p><p>Back to our website scenario.</p><p>In that case, the response would contain a specific piece of metadata, that tells the browser that the response data is of type <code>text/html</code>.</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/content-type-html" alt="A browser sends a Content-Type text/html header if it wants HTML content." width="400" loading="lazy" class="image_image__3pNxh"/><p>This allows the browser to then parse the actual data that's attached to the response as HTML code.</p><p>HTML is the core "programming language" (technically, it's not a programming language - you can't write any logic with it) of the web. HTML stands for "Hyper Text Markup Language" and it describes the structure of a webpage.</p><p>The code looks like this:</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><</span><span style="color:#ff6363">h1</span><span>>Breaking News!</</span><span style="color:#ff6363">h1</span><span>>
|
|
</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.net/">PHP</a></li><li><a href="/learn/python/">Python</a></li></ul><p><strong>Important:</strong> With the exception of PHP, you can also use these programming languages for other purposes than web development.</p><p>Whilst Node.js is indeed primarily used for server-side programming (though it's technically not limited to that), Python is also very popular for data science and machine learning.</p><h2 id="browser-side" class="anchored-headline_headline__gBJy5"><a style="text-decoration:none" href="#browser-side" class="anchored-headline_anchor__4qPyS">#</a>Browser-side</h2><p>In the browser, there are exactly three languages/ technologies you need to learn. But whilst the server-side languages were alternatives, these three browser-side languages are all mandatory to know and understand:</p><ul><li><a href="/learn/html/">HTML</a> (for the structure)</li><li><a href="/learn/css/">CSS</a> (for the styling)</li><li><a href="/learn/javascript/">JavaScript</a> (for dynamic content)</li></ul><h1 id="-behind-the-scenes-internet" class="anchored-headline_headline__gBJy5"><a style="text-decoration:none" href="#-behind-the-scenes-internet" class="anchored-headline_anchor__4qPyS">#</a>"Behind the Scenes" Internet</h1><p>Thus far, we discussed websites. I.e. the case where you enter a URL (e.g. "academind.com/learn") into the browser and you get a website in return.</p><p>But the internet is more than that. Indeed, you use it for more than just that every day!</p><p>The core idea of requests and responses is always the same. But not every response is necessarily a website. And not every request wants a website.</p><p>The metadata which is attached to requests and responses controls which data is wanted and returned. Of course both parties that are involved (i.e. client and server) need to support the requestes and sent data.</p><p>You can't request a PDF from <code>"academind.com"</code> for example. You could send such a request but you wouldn't get back a PDF - simply because we don't support this kind of requested data for this specific URL.</p><p>But there are many servers that specialize in providing URLs that return certain pieces of data. Such services are also referred to as "APIs" ("Application Programming Interface").</p><p>For example, mobile apps send "invisible" HTTP requests to such APIs (to specific URLs which are known to them) to get or store data. Twitter is fetching the tweet feed for example.</p><p>And even on webpages, such "invisible" requests are sent. If you sign up for our newsletter (which you of course should!), no new page will be loaded. Because data is exchanged behind the scenes. Even though the client is the browser in this case, the request which is sent wants no website in return. And the server URL that receives it offers no website - instead, the server knows how to handle your email address.</p><hr/><p>We could go into way more detail here but this is already a long article. You should now have a good understanding of how the web works and which core technologies are involved.</p><p>If you do want to dive deeper, explore <a href="/learn/">the many resources</a> we have on our page, sign up to our newsletter and of course subscribe to <a href="https://youtube.com/c/academind">our YouTube channel</a> for more in-depth tutorials and content! :)</p><div class="info-box_box__nlIHG info-box_info__PuQV3"><p><strong>Definitely also check out the video you find at the top of the page!</strong>. Whilst it includes generally the same content, you'll find some extra information there.</p></div></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></div></article></main><footer class="main-footer_footer__HFhak"><a class="button_btn__SPBtM button_flat__zUXCv button_accent__d7HIV " href="/impressum">Impressum & Datenschutz (DE)</a><span class="divider">| </span><a class="button_btn__SPBtM button_flat__zUXCv button_accent__d7HIV " href="/impressum/en">Imprint & Data Privacy (EN)</a></footer></div></body></html> |