Introduction to web and HTML

web:

world wide web(www) is commonly called the web, it is a collection of websites or webpages stored in a web server and connected to a local computer via the internet.

webserver:

A server is like this- We store some data on the server when we want that data then we make a request to the server and it reverts it back.

Leading web servers include Apache, Microsoft's Internet Information Services (IIS), and Nginx -- pronounced engine X. Other web servers include Novell's NetWare server, Google Web Server (GWS), and IBM's family of Domino servers.

The server gives a folder to store our build\=> /var/html/www

A server takes file to show the website=> index.html source

HTML:

Html or Hypertext Markup Language is the basic building block of any webpage or it is used to structure a webpage and its content. Basically, it makes plain text readable for web browsers.

HTML boilerplate code

<!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>
    <h1>welcome to JS Bootcamp</h1>
</body>
</html>

Let me explain:

<!DOCTYPE html> => It is an indicator that indicates to the parser of the browser what type of file is it. In this case, here it indicates that the file type is HTML.

<html>\=> HTML tag represents the root of the HTML document. All other tags are present in this tag.

<head>\=> The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag. Metadata is data about the HTML document. Metadata is not displayed. Metadata typically defines the document title, character set, styles, scripts, and other meta information.

<body>\=> The <body> tag defines the document's body. The <body> element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc

HTML tags

click here to see All HTML tags

<!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>Title of HTML Document</title>
</head>
<body>
<!--heading tag h1 to h6 -->
<h1>Headline 1</h1>
<h2>Headline 2</h2>
<h3>Headline 3</h3>
<h4>Headline 4</h4>
<h5>Headline 5</h5>
<h6>Headline 6</h6>
<!-- paragraph tag -->
<p>Lorem, ipsum dolor sit amet consectetur</p>
<!-- anchor tag which generate link -->
<a href="https://google.com">Go to google</a>
<!--image tag which shows the image -->
<img src="./image.png" alt="image description">
<!--The <div> tag defines a division or a section in an HTML document -->
<div>
  <h2>heading</h2>
  <p>paragraph</p>
</div>
</body>
</html>

The HTML tags contain attributes also for enhancing the functionality/usability of the relevant tags like <img> tag has src and alt attribute.

Click here to see the Attribute

Here we come to the end of this article, hope you like it. Happy Coding

Shubham Khatik's Blog