What is a webpage?

Follow a webpage’s journey from a browser request to the screen. Explore how servers deliver files, HTML describes the page, CSS controls its appearance, and JavaScript adds interaction.

Use the mouse wheel over the diagram to move forwards or backwards through the guide.

A step-by-step visual guide showing a request travelling from a computer through a router and internet service provider to a web server, the response returning to the browser, and the roles of HTML, CSS and JavaScript in the displayed page. <!DOCTYPE html> <html> <head> <style> img { height: 35px; width: 42px; } p { font-size: 14px; colour: grey; } button { border: dashed 2px #633: } </style> </head> <body> <article> <h1>            </h1> Latest <p> In this article we explore the pos... </p> <button id="b1">                  </button> Click here <image src="image1.png"> </article> </body> <script> const MAX_REP = 15; let el=document.getElementById('b1'); el.onclick = loadForm2(evt) if (window.indexedDB) {... </script> </html> Plain text { } CSS CSS (Cascading Style Sheet) allows for styling and layout control over the labelled content of an HTML document. HTML HTML labels common parts of a document's content so it can be structured and presented consistently across different displays. JavaScript Javascript can modify HTML, CSS, and content after the web page has been loaded. router ISP WWW P age RIJ HTML + CSS = Web page design Allows fully dynamic and interactive web pages https://www.cityroadcode.com Turn on your computer Open a web browser Connect to a local network (by WIFI or cable) The router of the local network can communicate with an service provider (ISP) The ISP has access to the Word Wide Web (WWW) Enter a WWW address The destination computer holding the webpage that you requested can be found using the WWW address you typed in That computer is one of millions of computers that are running server software that accepts incomming requests and responds to them The response is sent back to you in several digital packages Your computer re-assembles those packages into one. Part of that package contains HTML (HyperText Markup Language) code that represents a web page. Your browser interprets the HTML code.. ..then displays the webpage Using your browser you can open a HTML file already on your computer Shown here is the basic outline of a HTML file. What you see here are HTML tag pairs. Their intendation has no functional purpose. <!DOCTYPE html> identifies a file as containing HTML. The rest of the code is surrounded by the <html>...</html> tag pair. Most of the 'working' code that makes a web page unique is found between three HTML tag pairs. <style>...</style> <body>...</body> <script>...</script> HTML code inside the <body>...</body> tags represents the elements meant to be displayed. Notice that CSS code is different from HTML code. PageRIJ contains an advanced HTML editor that allows you to rapidly build the structure of your webpage. PageRIJ also has an advanced CSS editor that allows you easy access to thousands of styling possibilities with live updates.