Introduction to Web and HTML

Introduction to Web and HTML

as my first article here, let us get started with basics, take dive into web and html.

The Web

web-cat ok, we know what is web ? it's just the internet right ?, it all the the Facebook, Mail, Gpay, Reels, YouTube cat videos and stuff let's skip to the good part and see how it actually works what are it's engine and fuel ? on which it is running.

Server

servers-img let us get started with servers, the servers are basically as the name suggests something that serves, In the case of web(i.e. Internet) serves the "web pages". so let us see how it works ? basically our browser makes request to the server(a computer located somewhere, the request can be HTTP(come on don't do this) or HTTPS and yep, you got your page served to you, now you can watch hours of stand up videos. let take some examples like legendary apache2 Apache is an free and open source server which basically as previously told delivers you web pages when you request them it was structured on LAMP stack (Linux, Apache, MySQL, and PHP).

Live server

live-server-img so, server is basically computer located somewhere which is located somewhere and sends back response, but what about the live servers , this magical extensions from Ritwik Dey how this programming alchemy works ??, to explain it in simple language it is a program that checks for changes in your current working file if there is any changes it will trigger an script which makes the browser to reload and your fresh changes are served to you.

ok, now let's move on to the "H1" in the room the HTML (hypertext markup language).

HTML

HTML-img the hypertext markup language is everything that make sures the web page is what is meant to be structured. it is an markup language which as it means marks up what should look like as marked up by the elements like h1, h2, p, b, and etc. will see brief introduction to this elements.

H1

h1-tall the h1 tag marks the text inside it to be an Heading, making it stand out then other text so we can use it for heading line for any article or show something that we want to stand out from other text.

<h1>Hello World</h1>

which will be displayed on page as

Hello World

H2

h2-text the h2 tag similarly to the h1 tag will show an heading text which can be used to show use cases as h1, but should be used for heading for sub sections and break up the content, h2 is relatively displays smaller text

<h1> Hello World from H1  </h1>
<h2> Hello World from H2 </h2>

which will be displayed on page as, here I also added h1 tag for the difference between both

Hello World from H1

Hello World from H2

P

p-img Nope, "P" is not here just because its my initial, p tag or (paragraph tag)serves a good purpose in HTML it displays the regular size text in web page

<h1> Hello World from H1  </h1>
<h2> Hello World from H2 </h2>
<p> Hello World from P </p>

and the output would be

Hello World from H1

Hello World from H2

Hello World from P

IMG

the img tag (image embed element tag) is used to display or embed images in web page, lets check it out with following code snippet

<img
     src="./apple.jpg"
     alt="apple image">

which will display

SeekPng.com_apple-png-transparent_7612395.png

so lets break that code line by line & get an idea what is happening here, how suddenly there is an apple appeared on my web page,

"src" basically means source, where you getting this image from ? "alt" means what should be alternate text to be shown if that image is not accessible to the user.