HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<body>
<nav id="navbar">
<header>Internet, the fundamentals</header>
<ul>
<li><a class="nav-link" href="#Introduction">Introduction</a></li>
<li>
<a class="nav-link" href="#How_internet_works">How internet works</a>
</li>
<li>
<a class="nav-link" href="#Internet_and_the_web">Internet and the web</a>
</li>
<div class="dropdown">
<li><a class="nav-link" href="#How_the_web_works">How the web works</a></li>
<ul class="dropdown-content">
<li><a class="nav-link" href="#Big_picture">The big picture</a></li>
<li>
<a class="nav-link" href="#What_is_involved">What is involved?</a>
</li>
<li>
<a class="nav-link" href="#Whole_process">The whole process</a>
</li>
<li><a class="nav-link" href="#Dns_explained">DNS explained</a></li>
<li><a class="nav-link" href="#Packets_explained">Packets explained</a></li>
</ul>
</div>
<div id="ref">
<li><a class="nav-link" href="#Reference">Reference</a></li>
</div>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="Introduction">
<header>Introduction</header>
<article>
<p>
The Internet is the backbone of the Web, the technical infrastructure that brings the Web into existence. In essence, the Internet is a large network of computers which communicate all together.
</p>
<p>
The history of the internet began in the 1960s as a US-army-funded research project, which 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>
</article>
</section>
<section class="main-section" id="How_internet_works">
<header>How internet works</header>
<article>
<p>When two computers need to communicate they link either physically (usually with an Ethernet cable) or wirelessly (for example with WiFi or Bluetooth systems). All modern computers can sustain any of those connections</p>
<figure>
<img src="https://mdn.mozillademos.org/files/8441/internet-schema-1.png" alt="a depiction of two computers connected via cable">
<figcaption>A simple example showing two computers connected via cable</figcaption>
</figure>
<p>Such a network is not limited to two computers. As many computers can be connected as desired. But it gets complicated quickly. If you're trying to connect, say, ten computers, you need 45 cables, with nine plugs per computer!</p>
<figure>
<img src="https://mdn.mozillademos.org/files/8443/internet-schema-2.png" alt="a tangled network of computers connected physically via cable">
<figcaption>What a gigantic mess, right?</figcaption>
</figure>
<p>To solve this problem, each computer on a network is connected to a special tiny computer called a <em>router</em>. This router 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>
<figure>
<img src="https://mdn.mozillademos.org/files/8443/internet-schema-2.png" alt="a network of 10 computers are interconnected using a router in between">
<figcaption>Sticking to the example above, once we add a router to the system, our network of 10 computers only requires 10 cables</figcaption>
</figure>
<p>So far so good. But what about connecting hundreds, thousands, billions of computers? Of course a single router can't scale that far, but by connecting computers to routers, then routers to routers, we are able to scale infinitely. </p>
<figure>
<img src="https://mdn.mozillademos.org/files/8449/internet-schema-5.png" alt="an intricate network of computers by making use of router to router interconnection">
<figcaption>Network of networks</figcaption>
</figure>
<p>Such a network is very close to what is called the <em>Internet</em>, but something's missing here. 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. 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 modem turns the information from our network into
information manageable by the telephone infrastructure and vice versa.</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 <em>Internet Service Provider</em> (ISP). An ISP is a company
that manages some special routers 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>
<figure>
<img src="https://mdn.mozillademos.org/files/8453/internet-schema-7.png" alt="the internet network">
</figure>
<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>
</article>
</section>
<section class="main-section" id="Internet_and_the_web">
<header>Internet and the web</header>
<article>
<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 Web servers) can send messages intelligible to <em>web browsers</em>. The Internet is an infrastructure, whereas the Web 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 <a href="https://developer.mozilla.org/en-US/docs/Glossary/IRC" target="_blank">IRC</a>.</p>
</article>
</section>
<section class="main-section" id="How_the_web_works">
<header>How the web works</header>
<h1 id="Big_picture">The big picture</h1>
<article>
<p>Computers connected to the web are called <strong>clients</strong> and <strong>servers</strong>.</p>
<div id="diagram" style="height:160; width:430;">
<svg width="100%" height="100%" viewBox="-2 -2 430 160" preserveAspectRatio="xMidYMid meet">
<circle cx="75" cy="75" r="75" stroke="black" stroke-width="3" fill="azure" />
<text x="50" y="78" fill="black">CLIENT</text>
<circle cx="350" cy="75" r="75" stroke="black" stroke-width="3" fill="azure" />
<text x="325" y="78" fill="black">SERVER</text>
<g transform="translate(20,0)">
<line x1="180" y1="60" x2="245" y2="60" style="stroke:rgb(0,0,0);stroke-width:3" />
<path d="M 237 47
A 18.3847763 18.3847763, 0, 0, 1, 237 73
L 250 60 Z" fill="black" />
<animateMotion path="M 0 0 L -20 0 Z" dur="2s" fill="freeze" repeatCount="indefinite" />
</g>
<g transform="translate(-20,0)">
<line x1="185" y1="100" x2="250" y2="100" style="stroke:rgb(0,0,0);stroke-width:3" />
<path d="M 193 113
A 18.3847763 18.3847763, 0, 0, 1, 193 87
L 180 100 Z" fill="black" />
<animateMotion path="M 0 0 L 20 0 Z" dur="2s" fill="freeze" repeatCount="indefinite" />
</g>
<text x="165" y="50" fill="black">responses</text>
<text x="195" y="118" fill="black">requests</text>
</svg>
</div>
<ul>
<li>Clients are the typical web user's internet-connected devices (for example, your computer connected to your Wi-Fi, or your phone connected to your mobile network) and web-accessing software available on those devices (usually a web browser like
Firefox or Chrome).</li>
<li>Servers are computers that store webpages, sites, or apps. When a client device wants to access a webpage, a copy of the webpage is downloaded from the server onto the client machine to be displayed in the user's web browser.</li>
</ul>
</article>
</section>
<section class="main-section" id="What_is_involved">
<h1>What is involved?</h1>
<article>
<p>
The client and server we've described above don't tell the whole story. There are many other parts involved, and we'll describe them below.
</p>
<p>
For now, let's imagine that the web is a road. On one end of the road is the client, which is like your house. On the other end of the road is the server, which is a shop you want to buy something from.
</p>
<p>
In addition to the client and the server, we also need to say hello to:
</p>
<ul>
<li><strong>Your internet connection</strong>: Allows you to send and receive data on the web. It's basically like the street between your house and the shop.</li>
<li><strong>TCP/IP</strong>: Transmission Control Protocol and Internet Protocol are communication protocols that define how data should travel across the web. This is like the transport mechanisms that let you place an order, go to the shop, and
buy your goods. In our example, this is like a car or a bike (or however else you might get around).</li>
<li><strong>DNS</strong>: Domain Name Servers are like an address book for websites. When you type a web address in your browser, the browser looks at the DNS to find the website's real address before it can retrieve the website. The browser needs
to find out which server the website lives on, so it can send HTTP messages to the right place (see below). This is like looking up the address of the shop so you can access it.</li>
<li><strong>HTTP</strong>: Hypertext Transfer Protocol is an application protocol that defines a language for clients and servers to speak to each other. This is like the language you use to order your goods.</li>
<li><strong>Component files</strong>: A website is made up of many different files, which are like the different parts of the goods you buy from the shop. These files come in two main types:</li>
<ul>
<li><strong>Code files</strong>: Websites are built primarily from HTML, CSS, and JavaScript, but not exclusively.</li>
<li><strong>Assets</strong>: This is a collective name for all the other stuff that makes up a website, such as images, music, video, Word documents, and PDFs</li>
</ul>
</ul>
</article>
</section>
<section class="main-section" id="Whole_process">
<h1>The whole process</h1>
<article>
<p>
When you type a web address into your browser (for our analogy that's like walking to the shop):
</p>
<ol>
<li>The browser goes to the DNS server, and finds the real address of the server that the website lives on (you find the address of the shop).</li>
<li>The browser sends an HTTP request message to the server, asking it to send a copy of the website to the client (you go to the shop and order your goods). This message, and all other data sent between the client and the server, is sent across
your internet connection using TCP/IP.</li>
<li>If the server approves the client's request, the server sends the client a "200 OK" message, which means "Of course you can look at that website! Here it is", and then starts sending the website's files to the browser as a series of small chunks
called data packets (the shop gives you your goods, and you bring them back to your house).</li>
<li>The browser assembles the small chunks into a complete website and displays it to you (the goods arrive at your door, awesome!).</li>
</ol>
</article>
</section>
<section class="main-section" id="Dns_explained">
<h1>DNS explained</h1>
<article>
<p>
Domain Name Servers are special servers that match up a web address you type into your browser (like "google.com") to the website's real (IP) address (see example below).
<figure>
<img src="https://mdn.mozillademos.org/files/8405/dns-ip.png" alt="relationship between domain name and IP adress">
</figure>
</p>
</article>
</section>
<section class="main-section" id="Packets_explained">
<h1>Packets explained</h1>
<article>
<p>
The term "packets" was used earlier to describe the format in which the data is sent from server to client. What does it mean? Basically, when data is sent across the web, it is sent as thousands of small chunks, so that many different web users can download
the same website at the same time. If websites were sent as single big chunks, only one user could download one at a time, which obviously would make the web very inefficient and not much fun to use.
</p>
</article>
</section>
<section class="main-section" id="Reference">
<h1>Reference</h1>
<article>
<ul>
<li>
All the technical information in this page is taken from
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide" target="_blank">MDN</a>
</li>
</ul>
</article>
</section>
</main>
</body>
html,
body {
min-width: 290px;
color: #4d4e53;
background-color: #ffffff;
font-family: "Open Sans", Arial, sans-serif;
line-height: 1.5;
}
code {
padding: 0 2px;
word-wrap: break-word;
display: inline-block;
text-align: center;
line-height: inherit;
background-color: #f7f7f7;
border-radius: 5px;
}
#navbar {
position: fixed;
min-width: 230px;
top: 0px;
left: 0px;
width: 230px;
height: 100%;
border-right: solid;
border-color: rgba(0, 22, 22, 0.4);
}
header {
color: black;
margin: 10px;
text-align: center;
font-size: 1.8em;
font-weight: thin;
}
#main-doc header {
text-align: left;
margin: 0px;
}
#navbar ul {
height: 95%;
padding: 0;
overflow-y: auto;
overflow-x: visible;
}
#navbar li {
color: #4d4e53;
border-top: 1px solid;
list-style: none;
position: relative;
width: 100%;
}
#navbar ul ul {
height: auto;
padding: 0;
overflow-y: auto;
overflow-x: visible;
}
#navbar ul ul li {
border-top: 0;
}
#ref {
border-bottom: 1px solid;
}
figcaption {
text-align: center;
font-family: 'Share Tech Mono', monospace;
font-size: 0.9em;
}
.dropdown-content {
display: none;
position: absolute;
background-color: beige;
margin: 0;
text-align: end;
width: 100%;
right: 0;
}
.dropdown:hover .dropdown-content {
display: block;
z-index: 1;
}
.dropdown-content li:hover a {
background-color: aquamarine;
}
#navbar a {
display: block;
padding: 10px 30px;
color: #4d4e53;
text-decoration: none;
cursor: pointer;
}
#main-doc {
position: absolute;
margin-left: 230px;
padding: 20px;
margin-bottom: 50px;
}
section article {
color: #4d4e53;
margin: 15px;
font-size: 0.96em;
}
section li {
margin: 15px 0px 0px 20px;
}
#diagram {
display: inline-block;
}
img {
max-width: 100%;
height: auto;
}
@media only screen and (max-width: 815px) {
/* For mobile phones: */
#navbar ul {
height: 250px;
}
#navbar {
background-color: white;
position: absolute;
top: 0;
padding: 0;
margin: 0;
width: 100%;
max-height: 275px;
border: none;
}
.dropdown-content {
position: absolute;
background-color: hsla(60, 56%, 91%, 0.9);
top: 10%;
left: 200px;
text-align: start;
width: 50%;
z-index: -1;
}
#main-doc {
position: relative;
margin-left: 0px;
margin-top: 320px;
}
}
@media only screen and (max-width: 400px) {
#main-doc {
margin-left: -10px;
}
@media only screen and (max-width: 400px) {
code {
margin-left: -20px;
width: 100%;
padding: 15px;
padding-left: 10px;
padding-right: 45px;
min-width: 233px;
}
}
Also see: Tab Triggers