Introduction to Web & HTML

Somewhere or the other, we have a little bit of WEB but no one knows what exactly the web is

So, let's take out some time and understand

what is Web?

The web, which is also known as the World Wide Web, is a collection of websites or web pages stored in web servers and connected to local computers through the internet.
When we build a website we need to publish it so that the entire world could be aware of it, otherwise what is the point of creating a website
The tool which is used to publish the website is known as Web Server
Web server is the software that is responsible for hosting the website and returning it to the user when he requests for the information

Now let's understand

what is Web Server?

A server is a software or hardware device that accepts and responds to requests made over a network. The device that makes the request, and receives a response from the server, is called a client.
On the Internet, the term "server" commonly refers to the computer system that receives requests for web files and sends those files to the client.
There are many examples of web servers. Let's Read About them

Apache Server

Apache HTTP server is the most popular HTTP client on the web.
The Apache HTTP Server is a free and open-source cross-platform web server software
Apache is developed and maintained by an open community of developers

client (i.e Web browser) connects to a server (i.e Apache HTTP Server), with the specified protocol, and makes a request for a resource using the URL path.
The server will send a response consisting of a status code and a response body (which could be optional).
The status code indicates whether the request was successful, and, if not, what kind of error condition there was. This tells the client what it should do with the response.

The default page for apache server is index.html or default.html
The index.html is the primary page that will be returned to the browser in case of non-availability of the web page.

Though index.html and default.html are the entry points of the web page, per the current industry standards, it is the index.html that is mostly used to define any web project.
Having said that, default.html is not deprecated and can still be used

Nginx Server:

Nginx is a web server that can be used as a

reverse proxy, load balancer, mail proxy, and HTTP cache.

Nginx is free and open-source software. A large fraction of web servers uses Nginx, often as a load balancer.

Now, At this point, we have enough knowledge about the Server, now let's see how we Publish the Web Page

How to publish the web page on localhost?

The first way of publishing your web page to your browser (i.e localhost) is by double-clicking on the index.html file which will open up your web page.
However, it comes with a few issues as well. When you serve your web page to the browser, the web page is loaded into your memory (RAM) and then is served to the browser.
Thereby, when you modify the content you cannot see your changes reflecting until or unless you refresh your web page which inline refreshes your memory and serves the new page.
To Resolve this problem we have life Saver known as

Live Server

Live server is a little extension that is created by the developers.
It holds the capacity of detecting the new changes done in your HTML file and informs the in-memory(RAM) about that changes.
The memory when informed about the change loads it again and serves it to the browser.
Now, there is no necessity for the developer to reload the webpage in the browser. He can see the changes incorporated into the browser which saves him/ her a lot of time.

So far we have learned about how the web works, 
what is the Server and how we can host our website, 
now it's time how we build the website

How to build a Web Page

We can build the webPage with the help of HTML. HTML stands for Hypertext Markup Language.
HyperText Means text which could be understandable by the browser
HTML is divided into 2 portions: The Head and The Body
Head tag consists of metadata i.e information about information
Body Consists of all the content that needs to displayed on the browser
Let's have some talk about HTML Tags

HTML TAGS

1. Heading:

An HTML heading tag is used to define the headings. There are six levels of headings defined by HTML.
These 6 heading elements are h1 to h6
<h1> is used for Big Heading
<h2> is used for subheadings, if there are further sections under the subheadings then the <h3> elements are used.
<h6> for the small heading (smallest one).

   <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>

2. Paragraph:

The <p>tag in HTML defines a paragraph.
These have both opening and closing tags.
So anything mentioned within<p> and </p> is treated as a paragraph.

 <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      Lorem Ipsum has been the industry's standard dummy text ever since the
      1500s, when an unknown printer took a galley of type and scrambled it to
      make a type specimen book.
    </p>

3. Images:

To add an image to the Web page use <img> </img> tag along with the src attribute and alt attribute.
The image can be either on the internet or can be in your local computer.
You can specify the URL or path respectively based on your requirement.
The alt tag specifies the description of the image.
Alternative text is important to specify as it helps us identify the image element on the web page when there are tonnes of images in case the image URL or path breaks.
In absence of alternative text and the URL not working or moved or broken, the image will not be rendered on the web page.
The additional attributes that can be added are image srcset
image scrset is used to display images based on the screensize

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

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

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

Thanks, for reading the Article, Please give your valuable Feedback