Introduction to Web Server and HTML

What is a Web Server?

Simply, A web server is a PC that stores, processes and delivers website documents to the web browser. A web server is a PC that runs websites. The main job of a server is to display the website content. It's a PC program that disperses website pages as they are demanded. The essential goal of the web server is to store, process and deliver web pages to the clients. It works as software and hardware.

How does Web Server work?

A web server that stores web server programming and a site's files (for instance, HTML files, images, CSS stylesheets, and JavaScript documents). A web server interfaces with the Web and supports data interchange with different devices associated with the web.

A web server incorporates a few sections that control how web clients access hosted files. A Web server is an HTTP (the protocol your browser uses to view webpages) server that figures out URLs (web addresses). An HTTP server can be gotten to through the domain names of the sites it stores, and it delivers the substance of these hosted sites to the end client's device.

In simple terms, If a browser needs a file that is hosted on a web server, it starts searching for the IP address of the website. Once the site's IP address is found, it requests the server via an HTTP request. Once the request is reached the server, it will start processing. If the content is available, the server returns the status code "200 OK" through HTTP. If the content is not available, the server returns a 404 error. The browser then displays the content of the website.

Static vs Dynamic Web Server

A static web server consists of a computer with an HTTP server. It sends the website files as it is to the browser without any changes.

A dynamic web server consists of a static web server and some extra software like a database and an application server. It updates the hosted files before delivering the files to the web browser.

Examples of Web Servers

There are several common web servers available, some of which are

Apache HTTP Server
Microsoft Internet Information Services (IIS)
Nginx
Lighttpd
Sun Java System Web Server

HTML Basics

What is HTML?

HTML stands for HyperText Markup Language. It is the standard markup language for creating web pages. it creates a structure for the web pages. it consists of a series of elements.

Suppose we have some content, the content may be in the form of a set of paragraphs, a list of bulleted points, or using images and data tables. HTML elements tell the browser how to display the content.

Example of an HTML document

<!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>Document</title>
</head>
<body>

</body>
</html>

<!DOCTYPE html>:All HTML documents must start with a document-type declaration.

The HTML document itself begins with <html> and ends with </html>. It represents the root of the HTML document.

<head>:The element contains meta-information about the HTML page like scripts and stylesheets.

<title>:The element specifies a title for the HTML page.

The visible part of the HTML document is between <body> and </body>.

Commonly used HTML Tags

Heading Tags: HTML has six types of heading tags. That is <h1> to <h6> where <h1> have highest font and <h6> have lowest one.

    <body>
    <h1>This is my first heading</h1>
    <h2>This is my second heading</h2>
    <h3>This is my third heading</h3>
    <h4>This is my fourth heading</h4>
    <h5>This is my fifth heading</h5>
    <h6>This is my sixth heading</h6>
</body>

Output

<p> : The <p> HTML element represents a paragraph. The paragraph always starts in a new line with some margin before and after.

<br>: The <br> tag uses to create a line break in the paragraph.

<pre>: The <pre> tag defines preformatted text. If we use a <pre> tag to some content, it is displayed in a fixed-width font, and it preserves both spaces and line breaks.

Lorem: Lorem ipsum is a placeholder text that is commonly used in the visual form of a document. Lorem ipsum may be used as a placeholder before the final copy is available.

<p>This is my Paragraph</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolores, dolor, modi reiciendis dolorem iusto natus aliquid<br>
         blanditiis unde neque maiores vel sed voluptatem delectus nisi eligendi corporis placeat cupiditate omnis iure sapiente <br>
         nihil fuga! At ea architecto quaerat harum alias repellat qui, deserunt consequatur eveniet sequi dolorum eum debitis veritatis.</p>
        <pre>
            Twinkle, twinkle, little star,
            How I wonder what you are!
            Up above the world so high,
            Like a diamond in the sky.
        </pre>

HTML Attributes

HTML attributes give us some additional data for HTML elements. All HTML elements can have attributes. Attributes are always specified in the HTML starting tag only.

<a>: <a> element is called an Anchor element which defines a hyperlink. The href attribute creates a hyperlink to web pages, files, email addresses, locations on the same page, or anything else a URL can address.

Link to another web page:

<a href="https://www.flipkart.com/">Click here for shopping</a>

It shows the output like this "Click here for shopping" on a web page. If we click on the link it will open the web page of the given URL address.

Link to files:

If we want to call a local system file on our web page we simply use this:

<a href="./index.html">Index</a>

Note that ./ represents the current directory. It shows the output like this "Index" on a web page. If we click on the link it will open that local file.

<img>: The <img> HTML element embeds an image into an HTML document.

The <img> element have attributes like:

src: It contains the path of the image that you want to embed. The src attribute is mandatory to the <img> element.
alt: It describes the name of the image. Suppose if for some reason the image can't load the text is displayed on the page so we can read it.
height: It gives height to the image that we want to embed.

width: It gives width to the image that we want to embed.

<img src="https://images.pexels.com/photos/1741231/pexels-photo-1741231.jpeg?auto=compress&cs=tinysrgb&w=600" alt="story photo" height="500px" width="500px">

It shows the output of the embedded image in the given height and width.

Thank you for reading my article. Have a good day :-)

Mounika's Blog