Introduction to Web and HTML

Introduction to Web and HTML

What is web development?

Web development is the field wherein you can develop a website with HTML, CSS, and Javascript. The skeleton or the structure of a web page, which arranges the contents in sequence, is referred to as HTML. CSS is used to give your website a better appearance, or, to put it another way, to give the website some style. To breathe life into a web page, or to give activity to an element that HTML and CSS have generated, Javascript is used.

Additionally, database management and website publishing are included for the user to use the website in their everyday lives and make their lives easier. We already regularly use numerous websites like Amazon, Flipkart, and those from other domains.

An overview of the different types of web servers

Web servers are nothing but process the requests of clients and serve them files that are used for creating web pages. To do this it uses HTTP (Hypertext Transfer Protocol).
Let's understand the above sentences with an example.
If you want to open an Instagram on your Laptop, you enter the URL in the search bar of google. your laptop will send the HTTP request to view the Instagram webpage to the web server (understand this as a different computer where you have sent the request). webserver contains all the files necessary to load the page such as text, images, video, audio, links, etc. After processing the request it will send all the required files to the client's computer (Laptop).

1. Apache HTTP server

The most used web server is this one. The Apache Software Foundation created the Apache HTTP web server. Because it is open-source software, we have access to it and can modify its code to suit our preferences. Almost all operating systems, including Linux, MacOS, Windows, etc., allow for the simple installation and use of the Apache Web Server.

2. Nginx web server

It is another popular server. Nginx was designed to have high concurrency and little memory utilization. Nginx employs an asynchronous, event-driven strategy where requests are handled in a single thread rather than starting new processes for each web request.

A brief about HTML and a few of its elements.

HTML stands for Hyper Text Markup Language. It describes the structure of the webpage. It consists of a series of elements

Structure of HTML

<!DOCTYPE html>
<html lang='en'>
    <head>
        <title>Namaste Bharat!!</title>
    </head>
    <body>
        <p>Kaise ho aap sab?</p>
    </body>
</html>

Let's understand each of the components one by one.

  • <!Doctype html> : It specifies the version of HTML to the browser.

  • <html lang='en'> : It is the container of all the other HTML elements. It is also known as a root element. here lang='en' is the attribute that specifies the language of the web page.

  • <head> : It gives the information about the page (i.e. metadata) such as title, author name, content, description, etc. Which helps in SEO ( Search Engine Optimization).

  • <body> : It is the main element where all the content is written and this content we can see on the actual web page.

  • </> : this '/' specifies the closing of the tag.

Here are a few of the Tags

1. Paragraph Tag

The <p> the tag defines a paragraph.

Browsers automatically add a single blank line before and after each <p> element.

<p>This is paragraph element/tag</p>

2. Heading Tag

It is used to specify a heading. we have a total of 6 heading tags in the HTML

<h1>Largest heading</h1>
<h2>second largest heading</h2>
<h3>third largest heading</h3>
<h4>fourth largest heading</h4>
<h5>fifth largest heading</h5>
<h6>sixth largest heading</h6>
<p>use this snippet by clicking copy button and try in your editor and see visual changes on browser</p>

3. Image Tag

It is used to put images on the web page.

<img src="my_image.jpg" />

We can use different image attributes to specify sizes for the image such as height and width attributes.

4. Anchor Tag

It is to link the web pages with each other.

<a href="hello_page.html" />

Here href attribute contains the reference to another page.

to learn more about HTML tags and elements click here.

What are Elements, Tags, and Attributes in HTML?

Elements

The HTML element is everything from the start tag to the end tag.

Example:

Heading Elements such as <h1>, <h2>, <h3>,.....<h6> and paragraph element <p>.

<h1>My First Blog.</h1> 
<p>Read more learn more.</p>

Note: Some elements in HTML do not have content in them.

Example:

<br> or <hr> These are called empty elements.

<p>Hi my name is sachin <br> I love exploring </p>
<hr>
<p>I hope you like my first blog on HTML and web development</p>

I was very much confused at this time that the main difference between Tags and HTML
Here is the answer I found: HTML tags are used to hold the HTML element. HTML element holds the content. But it is OK to say either element or tag.

Tags

It holds the other HTML elements.

<div>
    <h1>My Favourite sport is cricket.</h1>
    <section>
        <p>I love playing cricket.</p>
    </section>
</div>

In the above code snippet, we have both Tags and Elements.

By looking at this we can easily say that <div> and <section> are the Tags and <h1> and <p> are the Elements.

Attributes

It adds additional information to the Tags or the Elements in HTML.

<img src="my_profile.png" alt="This is my profile picture.">

Here <img> is another HTML tag that is self-closing and we can see it contains 2 different attributes in it.

src : where we can provide the source of the image. we have provided my_profile.png as the source for the image.

alt : It is to provide a piece of alternative information for the image if in case the image failed to load successfully.

We have learned a little bit about HTML, web programming, and web servers in this article. Hope it's useful to you. Please comment on the article with your thoughts on this.