Introduction to Web and HTML

Introduction

Hello there! Welcome to my very first blog. In this brief article, we are going to discuss what the web is, how it works, and a few HTML tags.

What is the Web?

The Web is a commonly used term for the World Wide Web, abbreviated as WWW. The Web is simply a collection of websites that are accessible through the Internet. To access the websites, we need web browsers.

The Web was created in 1989 by CERN (European Library for Nuclear Research) under the direction of Tim Berners Lee, aka the father of the web. It was actually created for researchers at CERN to work effectively by sharing information easily around the world.

How does the Web work?

The Web consists of two kinds of computers -> Clients and Servers.

Clients are the computers or devices which is trying to access the web by sending a request to servers. These devices need to have web browsers to access the requested websites.

A Server is a computer or a computer program that serves the clients. The server stores the websites and when the client wants to access a website, a copy of that website gets downloaded from the server onto the client machine and displayed in the web browser.

Apache2 is currently the most popular web server on the internet. It's an open-source HTTP server that is maintained by developers worldwide.

cPanel provides a graphical user interface (GUI) that can be used as a control panel for managing the server. It allows the user to manage domains, publish websites, organize web files, etc.

What is live-server?

Live-server is a web extension that acts as a local server to make the development process easy. The files like HTML, CSS & JS inside a computer don't need a server to be opened by your browser. What live-server does is that it reloads the browser when it detects any changes in these files.

Introduction to HTML

HTML (Hyper Text Markup Language) is a markup language used in creating a web page. It's used for defining the structure of a webpage and its content. It consists of various elements aka tags. Here's a simple HTML file containing some basic 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>Web Page</title>
</head>
<body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate,
      eaque?
    </p>
    <img
      src="https://images.pexels.com/photos/879109/pexels-photo-879109.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
      alt="a developer holding a sticky note"
    />
    <a href="./projects.html">Projects</a>
</body>
</html>

<!DOCTYPE html> just tells the browser the type of document.

<html></html> is known as the root element. It wraps the whole page content. It contains an attribute lang that determines the language being used in the web page.

<head></head> contains all the content that you want to include in your HTML file but do not want to display to the user.

<meta charset="UTF-8"> sets the character set your document should use.

<title></title> determines the title of the web page. The title is displayed on the tab of the browser in which the web page is loaded.

<body></body> element contains all the content that you want to display to the user.

<h1></h1> & <h2></h2> are the heading elements. They are used to set the headings of the web page.

<p></p> is the paragraph element.

<img /> tag is used when you want to display an image. It usually consists of at least two attributes, src and alt. The src attribute contains the source or address of the image to be displayed. The alt attribute contains some brief information about the image which is displayed when the image is not loaded or for accessibility purposes.

<a></a> is called the anchor tag. It is the hyperlink tag. It has an attribute href that contains the link to other pages that you want to navigate the user to.

Junaid Hashmi's Blog