Introduction to web and HTML

Table of contents

Brief About Web

The web consists of different connections between many clients and servers with the use of wired or wireless networks. So basically client requests URLs and the server responds to those requests and provides resources over the web browser. HTML in the web plays a major role because whatever the client request from the server it responds with the instructions which are written in the form of HTML. Talking about servers the most powerful and commonly used server is apache where all the services are hosted and are called when required by the client with help of a URL.

To Create any website the most common technologies used are HTML, CSS, and JAVASCRIPT. HTML is used to create the structure of the website, CSS is used to style that structure, and JAVASCRIPT is used to add functionality to the website.

HTML

HTML stands for Hyper Text Markup Language which is the base required to write the structure of the web page. It starts with <! DOCTYPE html> which gives instructions to the web browser about the version of the HTML. Most HTML tags come with a pair consisting of a start tag and an end tag, for example < html >< /html >. But not all tags have an ending tag, some tags only have the start tag, for example < br >,< img >.

Below is the basic structure of HTML.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Blog</title>
</head>

<body>
  <h1>This is my first Blog </h1>
</body>

</html>

The web browser reads the code from top to bottom. The content written only within the body tag will be displayed by the browser when the html file is loaded. Unlike the content from the head tag which is present but is not displayed over the browser.

Tags

There are different tags available that also have something called attributes. Every tag has a role and is specifically used for that role. For < p > tag is used to write paragraph or text in it, similarly, there are heading tags like < h1> and < h2 > which are used to write headings in the web page which makes the text looks big and bolder. < h1 > is lager following by < h2 > .

We can also add an image to the web page with the help of < img > tag. We can specify the URL for the image in the src="" attribute which is nothing but the source where the path of the image can be provided , the path can be from local storage or it can be a URL from the web. It also has an attribute called alt="" which displays the text written in it in case the image fails to load. Similarly, we can set the height and width of the image using the height="" and width="" attributes.

An anchor tag, that is < a > tag is a hyperlink that is used to create a link from one page to another page. The attribute used to specify the path of the other page is href="".

In order to run the HTML file it must be saved with the extension of .html or .htm . By default, the server searches for an index.html file, but default.html can also be used.

Emmet

To write HTML more efficiently EMMET is used which helps to auto-suggests and generate code with the help of some keywords which is very handy for the developers. It has many keyboard shortcuts which generate code automatically which saves a lot of time.

We can also generate dummy text just to fill the content of a specific tag with the help of lorem.

Live server

Nowadays text editors come with different types of extensions that the developers can use for writing efficient code. One of the extensions is live server which shows live changes on the browser when we make any changes in the html file.