What are webserver??

In simple terms web server is a computer that stores, processes, and delivers website files to users browser. Here they uses Hypertext Transfer Protocol (HTTP) to respond to user's request via internet.

What is a web server made of?

It consists of a Hardware & Software side, were each of those playing different roles in processing files.
On the hardware side, a web server connected to the internet 24/7, which enables it to exchange data or files between other devices which are likewise connected. This data can come in different forms, such as HTML files, images, JavaScript files, or CSS stylesheets. Web server hardware also stores web server software.

Web server software controls how web users access hosted files. It consists of several components, housing at least an HTTP server. An HTTP server is software that can understand HTTP requests and URLs.

Working of web server

When a web user wants to load a website’s content, their web browser requests access through the internet. Which is called an HTTP request. Now the web browser looks for the requested website’s IP address by translating the URL of the web pages via the Domain Name System (DNS). This process locates the web server where the site’s files are hosted.
As the web server receives the HTTP request and processes it through its HTTP server. Once its HTTP server accepts the request, it will search through server files to obtain the relevant data.
After that, web server returns the site files to the web browser that sent the request. Then, the web user sees the website content.
That's all the about it all this process take few milliseconds to complete.
Some of most commonly used web server are Apache, Nginx, Microsoft Internet Information Services (IIS), etc.

What Is Apache?

Apache is a free and open-source software that allows users to deploy their websites on the internet. It is one of the oldest and most reliable web server software maintained by the Apache Software Foundation, with the first version released in 1995.

Although we call Apache a web server, it is not a physical server, but rather a software that runs on an HTTP server. Its job is to establish a connection between a server and the browsers of website visitors (Firefox, Google Chrome, Safari, etc.) while delivering files back and forth between them (client-server structure). The Apache software is also compatible with any operating system, from Windows to Unix.

Live server

If you are web developer you'll be knowing the pain to reload your index.html in browser to see what things are going on after you change certain file right?

What Is Live Server And Working of It??

This is the heroic extension for the developer to solve this problem. In simple terms this is a small app which serves your working directory and it's sub directory, basically this watches for files change and whenever that happens, it sends a message to your browser instructing it to reload. This extensions puts small piece of javascript code to your html files and listen to the reload requests. One of the most famous live server extension available today it's by ritwick dey it's pretty easy to use don't forget to read those docs available while installing it.

What is HTML??

HTML stands for hypertext markup language, which you probably might be aware of already it was first created to solve the problem of RESERCHERS to share & collaborate on their work, But Today html is the standard language that is used for creating web application. Every time you visit any website, a server will send you an HTML file to your computer and browser will render and display the information included in that file.

So Let’s write our first HELLO WORLD!!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h1>Hello world!!!</h1>
</body>
</html>

Well here lot thing are going on and hell lot confusing for beginner to digest don’t worry everyone goes through same, so let's burst your fear.

<!DOCTYPE html> This is use to define the document you are giving to browser to load, you’ll be most probably using HTML5 as per industry standards todays. Infact it’s essential to use this if you won’t then your browser might give you uncommon output.

<html> This is kind of sign that from here onward we are going to write in HTML code. Inside here you’ll see two elements which are basically the foundation of any webpage.

<head> This is a part of a document which is basically not expose on the webpage but it’s a backbone of any website.

Title tag – The title which you’ll see on the google search results.
Meta tags- The information provided in this is useful for search engines to rank website.
CSS- This is used for styling html page and bring life to your boring webpage.

<body> This is where your all your website contents goes such as heading, images etc whatever you’ll be writing here will we render on user computer.

Let's make a look some TAGS

HEADING TAGS

HTML has total six heading tag from h1 which is the greatest of all of them then till h6 which is smallest of all them this tag are used for giving heading in page and commonly used by search engine for the purpose of website ranking in search results.

<h1>This is first heading</h1>

Paragraph Tag

The <p></p> tag usually used to represented as a block of text which simply a detail description on a topic which you are writing on, and this is also separating from the above block.

<p>This is used to declare paragraph</p>

Image Tag

In order to put image on a web page, will need to use the <img> element, which is also knows as void elements which simply means it does not need any kind of content to putted upon and does not required a ending tag. Let's have a look on how to add images on web copy the below code snippet.

<img src="" alt="" />

what are this other 2 things added to our elements those are know as attributes which gone help us to add our first Image. As like this there are multiple attributes goes into img let's have a look on them

src="" This specifies the path to the image in local directory or you can place a image link so it will load that image from web.
alt="" It's used to give the a textual description of the image will help the user if in case our image won't be load due to any problem, and this is also read by screen reader will help people who are having low vision or blind.

width="" height="" This is used to define our images size in pixel.

srcset=""This is used to make a responsive images by providing same image in multiple size separated with coma like 1500px, 800px, 600px, 500px long and let the browser decide which to display according to size of window .

sizes="" to provide several additional source images along with hints to help the browser pick the right one.

That's all for today😄😄

Kalp Patel's Blog