Photo by Su San Lee on Unsplash
Web, Servers, and HTML: Things you should know!
Get to know what web, servers, and HTML is and start your journey of exploring!
What is the Web?
According to Google, the web is
a network of fine threads constructed by a spider from fluid secreted by its spinnerets, used to catch its prey.
Well, it's kind of similar to a spider's web, the World Wide Web —commonly referred to as WWW, or W3, is an interconnected system of public web pages through the Internet.
Simply, the Web, or the World Wide Web is a collection of documents that will be requested by a browser from a server.
Many people assume that the Web is the same as the Internet, and uses these terms interchangeably. The Web is one of many applications built on top of the Internet. The Web is just one of the ways that information is shared over the Internet, others include email, instant messaging, and File Transfer Protocol (FTP).
Tim Berners-Lee proposed the architecture of what became known as the World Wide Web. He created the first web server, web browser, and webpage on his computer at the CERN physics research lab in 1990. In 1991, he announced his creation on the alt.hypertext newsgroup, marking the moment the Web was first made public.
So your web browser, e.g. Opera, Google Chrome, or Microsoft Edge, requests the server for a particular collection of documents. The server receives the request and returns these documents to the browser. Now, your browser mixes these documents to render web pages.
Web page
The document which is displayed by your browser is known as a Web Page, often called just "pages". Such documents are written in HTML language, that's why they're also known as, hypertext documents.
All web pages available on the web are reachable through a unique address. This unique address is entered in the browser's address bar to access a web page. This unique address is known as URL(Uniform Resource Locator).
URL
URL stands for Uniform Resource Locator. A URL is nothing more than the address of a given unique resource on the Web. Such resources can be an HTML page, CSS documents, images, etc. URL can be entered in your web browser's address bar to access resources present in the web servers.
Some examples of URLs:
https://www.youtube.com
https://www.facebook.com
https:// developer.mozilla.org
For more information about URLs: https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_URL
Difference between website and webpage
A website refers to a central location containing more than one web page. Or, the collection of linked webpages, simply referred to as "website" or "site".
For example, Wikipedia is considered a website, which includes thousands of different web pages on different topics.
To access a website, type its domain name in your browser address bar, and the browser will display the website's main web page, or homepage (casually referred to as "the home").
What is a Server?
A server is a computer program or device that provides a service to another computer program and its user, also known as the client.
A server can be Hardware or Software:
On the hardware side, a server is a computer that stores server software and component files. For example, a web server stores HTML documents, images, CSS stylesheets, and JavaScript files.
On the software side, a server includes several parts that control how users access hosted files. For example, in the case of web servers, this is an HTTP server.
What are they used for?
The server manages network resources. For example, a user may set up a server to host a website, send/receive an email, etc.
How does the server works?
A server stores send and receive data. In short, a server is there to "serve" or to provide services. For example, when you type a URL in your Internet browser, your computer communicates with the server hosting the website to get the data to pull the site up on your machine.
Some examples of servers:
- Web server: A computer program that serves requested HTML pages or files. In this case, a web browser acts as the client.
- Email server: An application that receives incoming emails from local users -- people within the same domain -- and remote senders and forwards outgoing emails for delivery.
- Print server: The management of print files and printer tasks is done through a print server.
- Game server: Loading an online game requires you to connect to a server.
- Proxy server: Software that acts as an intermediary between an endpoint device, such as a computer, and another server from which a user or client is requesting a service.
- Streaming Video Server: When you open Netflix, youtube to stream videos on your device. All those videos are hosted on these servers.
Web server
A web server is a server that is used to host websites.
At the most basic level, whenever a browser needs a file that is hosted on a web server, the browser requests the file via HTTP. When the request reaches the correct (hardware) web server, the (software) HTTP server accepts the request, finds the requested document, and sends it back to the browser, also through HTTP. (If the server doesn't find the requested document, it returns a 404 response instead.)
To publish a website you either need a static or dynamic web server:
A static web server, or stack, consists of a computer (hardware) with an HTTP server (software). We call it "static" because the server sends its hosted files as-is to your browser.
A dynamic web server consists of a static web server plus extra software, most commonly an application server and a database. We call it "dynamic" because the application server updates the hosted files before sending content to your browser via the HTTP server.
Most popular Web Servers
Apache – 38.7% of the top one million sites
Apache is free, open-source web server software. It has been around since 1995. Due to its early development, the Apache web server played a major key role in the initial growth of the web. For a long time, it was the most popular and widely used web server.
Apache is well known for its suitability and is able to serve small and large websites alike. It features over 60 official and many other unofficial modules that enable a rich set of features.
Due to its open-source nature, it is easy to make configurations in these servers.
Some of the most popular sites using Apache are Ebay.com, Adobe.com, Shopify.com, spotify.com, etc.
Nginx – 32.1%
Nginx (pronounced “engine X”) is free and open-source software developed by Igor Sysoev and was first publicly released in 2004. It’s known for its high performance, stability, simple configuration, and low resource usage.
It’s regarded as an all-around great web server. While most traditional servers use so-called “threads” to handle requests, an Nginx server uses a more scalable, event-driven architecture.
This significantly improves the amount of memory the server needs, even if the data load is relatively small. Nginx powers well-known sites such as Netflix, Pinterest, Airbnb, Soundcloud, Zappos, and WordPress.
Microsoft-IIS – 8.1%
IIS, or “Internet Information Services,” is a high-performance web server developed and maintained by Microsoft.
Can my computer be a server?
Yes, any computer, for example, your home desktop or laptop computer can become a server with the right software. You could install an FTP server program on your computer to share files with other users on your network.
When you start to make your own web pages, you can launch a local development server with a live reload feature for static & dynamic pages in vs code. For example, using Ritwick Dey's live server extension. This saves time for previewing the changes made to your source code by just making the changes in the VS code and saving the file.
When you run a live server in any IDE, a script gets executed to view the changes made to the source code. For example, in the case of Ritwick Dey's Live server extension to view web pages, this script is executed to view web-page in a browser:
// <![CDATA[ <-- For SVG support
if ('WebSocket' in window) {
(function () {
function refreshCSS() {
var sheets = [].slice.call(document.getElementsByTagName("link"));
var head = document.getElementsByTagName("head")[0];
for (var i = 0; i < sheets.length; ++i) {
var elem = sheets[i];
var parent = elem.parentElement || head;
parent.removeChild(elem);
var rel = elem.rel;
if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
}
parent.appendChild(elem);
}
}
var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
var address = protocol + window.location.host + window.location.pathname + '/ws';
var socket = new WebSocket(address);
socket.onmessage = function (msg) {
if (msg.data == 'reload') window.location.reload();
else if (msg.data == 'refreshcss') refreshCSS();
};
if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
console.log('Live reload enabled.');
sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
}
})();
}
else {
console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
}
// ]]>
Let's create a basic Web page!
As we know, a Web page is a document written in HTML. So, first, we need to have a basic understanding of HTML.
HTML: HyperText Markup Language
HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript).
"Hypertext" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web.
How to create a Webpage?
The HTML code to create a basic web page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gym Website</title>
</head>
<body>
<h1 title="Hello World!">This is heading one</h1>
<h2>This is heading two</h2>
<a href="./research_internet.html">Read my research here</a>
<p title="aditya">This is another paragraph</p>
<p>Lorem ipsum dolor sit, amet <br>
consectetur adipisicing elit. Quaerat odio rem cupiditate, quos optio ipsam sunt nobis in iste magni.</p>
<img src="https://images.pexels.com/photos/7775640/pexels-photo-7775640.jpeg" alt="code photo" width="200px">
</body>
</html>
Here, <! DOCTYPE html> indicates the browser to render the file type, which here is HTML.
In the "head" tag, the information about the webpage is provided including the title of the page.
In the "body" tag, all the text, images, etc you're watching on the web page is included in this tag.
The "p" tag is used to write paragraphs on the web page.
The "h1" is the heading one tag, which is the largest heading of all the other five "h" tags.
The "h2" is the second largest heading tag.
The "a" tag is the Anker tag, used to provide the links to direct.
The "img" tag is used to include images on the web page.
The "href" as you can see in the a tag is known as an attribute, these are used to provide extra information about the tags.
Here, you can see the "Lorem ipsum" text, these are used to include sample text. These can be used using emmet, using "lorem50" emmet, this will include 50 words of lorem ipsum in your code.
Now you've to write the above text in any note editor or IDE, and save it as a .html file.
Now go to the saved file and open it, Wallah!!! your first web page. It will open in your default browser.
HTML is the language that doesn't restrict you from anything, so you can have an independent environment. HAVE FUN DEVELOPER!!!