Hello coders!! This is my first article in my blog and I am pretty much excited to start documenting by sharing articles on the tech I come across among which I find more interesting topics :)
So, Yeah ! Let me get you all to my first topic on Introduction to web and later a royal entry to Html :P
Have you ever wondered , How web works ? How webpage gets rendered from anywhere in the world?
Here you are !! Lets get a higher level picture of how everything is put up to make this web world work.
Websites and server: To have a very basic website , Lines of code with HTML and CSS is required (atleast only html ).
Websites when rendered in Local: So , once the code is written to see the outcome in our machine, We host it in localhost where our system memory is used to store our changes and browsers render the block of code into a user understandable website.
Ok! Now, Make way for live server :
Here is where Live server is used. Instead of manually reload the memory with our changes every single time. We can automate this process using Live server extension in our editor . This plugin automatically reloads the memory when changes are made to the code and we could see the outcome even without reloading.
So, you may be thinking , when does Apache server used when we have our local browser ?
The code in our local cannot stay in the local (if it stays then there is no use of creating website ) and rendered from anywhere.
To make this available all over the web is by hosting it globally. In this case we need a powerful server to render the code into a website in the internet.
The purpose of any server is to provide service to whatever client needs or requests. Thus Apache server is used as it is one of the kind. Many hosting website with user friendly hosting web applications like cpanel , GoDaddy use Apache server to render the web apps. For storing the code , centralised database is used as memory when hosted (replaced system memory when rendered in local).
Now we know high level overview of how web works but it is necessary to understand how HTML is written.
Introduction to HTML :
File name: Always HTML code is stored in a file with .html or .htm extension. The first file is usually stored as index.html or default.html. While most of the developers use index as file name . This first file name cannot be any other name since Apache recognises either of the two file name as the first web page (starter web page ) in the website
Let us see how Apache manages the folder to render first file :
The folder location is stored usually in the following directory path -> /var/html/www/ This folder path is shortened and stored as hc.com . Hence, our first web page to be rendered is stored as hc.com/index.html
Structure:
The structure of HTML file has two section :
<head></head> -> Not much visible inside webpage. Loads even before content in the web page loads. Has icons , title and meta information.
<body></body> -> Has all the necessary information required to be displayed in the web page
Tags:
There are numerous tags that are extremely beneficial. Few of them are ,
P -> used for displaying paragraph of text
Lorem -> When we need some random text to fill up the space instead of actual text which will be added later.
Image -> Images where the only beautifying element to webpage which added colors in the era when internet just started to bloom .
There are many attributes for image like src, alt, srcset which helps us to achieve better results .
Src - Link for a image
Alt - text referring to identify image incase it didn’t load on time.
Anchor -> used to include a link / reference to the other web pages. This tag has attributes such as href to add a link for other website