Web Server

Photo by Ben White on Unsplash

Web Server

Most famous web server

# WEB SERVER The web server is comprised of both hardware and software part. In Hardware side, it is a computer that stores website files and helps to render that website when it is addressed by the software. when a user addresses a website using "eg:- https://", then software commands the hosted files from the hardware and delivers back to the user pc.

Most famous web server:-

Apache is the most famous web server. Let's see how apache server work:- when we buy a domain from eg;- hostinger,bigrock, godaddy, they provide us a default root i.e "/var/html/www", to place our file and when requested by us through web browser then it can be rendered.

In the backend, these web hosting servers are having Apache2 server installed upon them. And apache 2 server is having a interface as a Cpanel. And this Cpanel is having that default root ""/var/html/www",.

we can conclude that Cpanel is having a default directory/root "/var/html/www", these root is with the apache server as interface and the hosting websites are using apache server in backend. so when we write dump our file it get dumped to that "/var/html/www" directory and when requested it is rendered to us.

Index.html and default.html

we can name our file dumped to the root ("/var/html/www") as research.html means any name. this file is mapped to some domain like for example digital.com, so the url becomes digital.com/research.html. when requested this is served by the browser. when a user is knowing about research.html then he/she is able to land at this page. when user is typing only digital.com a page should open (default page) by the server, but as their is no standard so it is difficult to land at the default.

So a standard comes out to provide a name to default landing page as Index.html or default.html, so the server can render the data by default when requested by the user.

Vs Code, sublime , jetbrain Fleet

These are some of the famous integrated development environment (IDE) for writing code. we use Emmet extension for writing Code efficiently and quickly.

when we write code and open this is web browser the browser shows th ecurrent state of that page from the memory i.e RAM. when we update something it doesnot get updated and displayed on the browser we need to refresh the browser to change its state or to get the lated updated code from the RAM.

We want a software that continuously tell my ram memory that sth got updated/or state of the page has changed. so that we can get the latest changes displayed on the web browser.

There is an extension in vscode editor to do that work "Live Server". how this live server is able to do this?

when live server is installed an automated localhost (:5500) is created and when anything is changed and saved it detects it and updates the browser.

live server injects some code in our browser to use the above feature. like websocket, console.log('live reload enabled.') etc.

how to create a web page

we use a editor vs code

In html5 webpage: 2 parts are their head (this is not visible on the page) and body (main content visible on the browser) head part is having meta tags like : -charset 'UTF-8/16/32"

meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0"

Body tag:-

heading tag:- H1 ... H6 paragraph tag:-

img tag, anchor tag, etc. to fill the tag with dumpy content we us "lorem5, lorem 520 etc".

Img tag-

<img src="" alt="">

src is the source it can be local or from web alt:- it is description of the image in concise way/very short in 1-2 words.

<img src="" alt="" sizes="" srcset="">

Here, we can specify the source set (srcset) and size attribute to display the high resolution/low resolution as per the display of the device.