Introduction to Web and Html

Web

Web (WWW or World Wide Web) is a collection of web pages or websites that are hosted on servers to be accessed online by the user through web browsers like Google Chrome, Firefox,Brave ...etc.

Some might ask how are these websites available online when ever we search for them or where are they located..? Here comes the job of a Webserver.

Webservers

In simple way, webserver is a computer software that stores the content of websites and display them when ever they are requested.

For example: when we open a website and we try to click on a link that leads to another page in that website it opens so fast, How did that happen? the behind seen is when we clicked that link, a request is sent to the webserver Via HTTP (Hypertext Transfer Protocol) and the webserver serves and handles that request and the page opens up.

Examples of webservers:

  • Apache HTTP Server: is a free and open source web server, it can work on Windows, Mac OS X, Linux and other operating systems; it needs the Apache license.

  • Microsoft Internet Information Services (IIS): is not open sourced, but widely used, it runs on Windows OS.

  • Nginx: it's light resource utilization and scalability made it one of the popular open source webservers. it can be used as a proxy server and load balancer.

Live server:

when we write our html code and then we run it in the browser it works perfectly, but if we make changes to that html file and we go back to the browser, it is not reflected, until we refresh the page. this could be an annoying task for most of us, but now thereis an extension or plugin that does that automatically, its called Live server developed by Ritwick Dey. it helps in Launching a local development server with live reload feature for static & dynamic pages.

Html

have you ever wondered how all these webpages displayed in a structured and designed way?

The Superman behind that is HTML.

HTML stands for hypertext markup language, it is used to create webpages. It is used to structure the content of the webpage and how elements are placed in that page.

Structure or Syntax of Html:

Structure of html.png

Side Note: we might have seen in tutorial video's that a lot of people save the html first page file as an index.html and the reason behind that is to follow the server slandered as the index.html is the default value the server will serve this page first.

Html Tags :

  • h1,h2 (Header tags): are used for writing main headings in html page. they improve the readability and SEO of a webpage. h1,h2 rank in order of importance, h1 is more important than h2 by means that h1 is bolder or thicker than h2.

  • p tag : p tag is simply used for defining a paragraph in an html document. While I was exploring the p tag I have come across an an amazing Filler or dummy text called Lorem Ipsum. we use Lorem Ipsum because it doesn't make sense. It's simply a placeholder, so doesn't need to hold any meaningful messaging. it help us in generating words as much as required like 20 words or 100 words or 500 words.. as much as you want.

here is an example declaring how to use p tag along with lorem ipsum:

Lorem ipsum1.png

and here how it looks:

Lorem ipsum2.png

  • Image tag : img tag is used when we want to insert an image in our html documents. what is does basically is holding a space for the image.
  • img tage attributes:
  • src attribute: is required, and contains the path to the image you want to embed.
  • alt attribute : is required, and holds a text description of the image when its not loaded in the webpage.
  • width and height attributes : they are used to set the width and the height of the iamge.
  • ismap attribute: Specifies an image as a server-side image map.
  • loading (eager-lazy) attributes : it tells the broweser load an image immediately or to defer loading of images until some conditions are met.
  • sizes attribute : Specifies the image sizes for different page layouts, like when the the screen is at specific size the img will be displayed accordingly

sizes.png