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

Introduction to web and HTML

Table of contents