Intro to web development

hi;
I am Surendra Babu Vunnam I started to learn web development I am writing this blog to share my learnings from today's class

how come index.html has become standard in writing html and why is index.html is widely used

before we learn answer to the above question we need to learn meaning to following words

• webserver: imagine that you have written a web app and there are lot of people you want to serve so you put it on a computer and web server is a piece of software which is sitting beside your app. when people request for the services of your app via the browser this software i.e. Webserver makes it possible that your code is being delivered in your browser and information is fetched and based on the inputs that you have given data is taken back to computer hardware or required state of page in your browser is altered in a predetermined manner

in laymen terms webserver is a piece of software that helps the code written by you is to do the job is been intended to do which is on same computer as the your code and raw materials(eg: images etc.) of the app

• apache: is the one of the popular webserver software that is readily available

• c-panel: is short form of control panel is a piece of software that is used to manage your hosting account.

now let us see how index.html became standard

in the beginning of the internet era developers used to deploy code into the folders provide by hosting companies and on top of code is where you have webserver and on top of which you have interface c-panel

there was a default serving which is set which is

/var/html/www

and this is where you placed your website. let us say you page is images.html

now if you want to go to website you have to type surendra.com/images.html which takes you to website page now let us consider a possibility.

if you just enter just surendra.com/ you can't just show an empty page so server guys said hey if you create a page index.html or default.html we will take your users to those page in above scenario.

slowly default.html became obsolete and we now have index.html but default.html is still supported in apache and nginx.

in short we use index.html to keep up with server standards.

how does a live server work while writing html

who ever is writing html may have come across live server and most popular live server is ritwick dey.

live server is piece of software that helps you to change the state of html elements instantaneously without reloading the browser again and again

it is possible because this tracks the elements in your code and changes the elements without reloading the browser.

what is html tag

• html tag is special words wrapped in and angular bracket eg:<h1>,<h2>;

• these tags tell the browser how the content associated with those tags are to be shown.

what is html element
let us take an example
<h1 title="hello world">this is second web page</h1>.

everything that exist in this above example is html element. the html tag, the content, and the attribute.

what is an html attribute
it is a key word which when used in a html element gives extra properties to the tag

let us take this example
<h1 title="hello world">this is second web page</h1>

here the word 'title' is attribute when you hover cursor on the above heading it shows you the word hello world.

what are heading tags in html

these are the tags which are used for the headings section of the article. They lie between ranges from <h1>-<h7>.
with h1 being with highest font h7 being lightest heading tag. It is recommended to not to nest h1 tags.

what is p tag in the html
p tag generically called as paragraph tag is generally used for the description of the content to be shown in the web page

a note about lorem: while creating a web page a dummy text may be required for checking of the website look, feel and functioning of the website .
in order to generate lorem in vs-code type lorem and number of words required and hit tab eg: lorem59 and hit tab.
this produces a dummy paragraph of 59 words.

a brief play with img tag

the syntax of the img tag is :
<img src="./apple.png" alt="apple_red">

• here src is a attribute is required to load the image and it contains the path where image is present.

• *alt * is a attribute which plays important role when image is not able to load due to some problems or it is while it is loaded in browser for visually impaired.

other attributes of img tag

• srcset is an attribute which is used for to load image from multiple resources.
  this is particularly helpful in loading multiple images according to size of the screen and capability of the device .

• crossorigin :there are times when sometimes you want the image to load from other domain this is where crossorigin comes into the picture.it exist to protect browser data from the domain requesting the image. most of the time it is better to keep it anonymous

• decoding: when html page is read by the browser it is done from top to bottom one element after the other but sometimes that can be a problem because if a large image is present in between it can take long time to load the image.
  thus rest of the content is not available until the image is loaded.
  thus where decode attribute comes in. this tells the browser how to load the media. let us look with example.

<img src="very_and_expensive_img_to_load" decoding="async" />.

from the above example we can see that decoding attribute is set to async this means this attribute will tell the browser to load the image later when other parts of image is loaded.

sync value tells the browser to load other elements only after the image is loaded.

auto will let the browser to determine the best approach.

• fetchpriority: there are times when you want to load image or video or some resource to load quickly hence this is where fetchpirority comes in this attribute has two values they are high and low .
  high value indicate that this resource should be given high priority when fetched by browser same vice versa with low

• ismap: it is a html attribute that is used to indicate that is image is a server-side image map.
  now what is a server-side image map?
  a server-side image map is a map that is sends the coordinates of a clicked area on image by the user to the server as request of information
  
  <img src="image.gif" alt="Image Map" ismap>.

In this example, the img element displays the image stored in the file "image.gif", and the ismap attribute indicates that the image is part of a server-side image map. When a user clicks on the image, the coordinates of the clicked area will be sent to the server as a request for information.

• loading:The loading attribute is an HTML attribute that is used to specify how an image should be loaded. It is used with the img element and can take three values.

1. lazy: indicates that the image should be loaded only when it is visible in the viewport. this can improve the performance of the page by reducing the number of images that need to be loaded upfront.
   visibility in the viewport in this context means the area of the browser currently visible to the user

2. eager: indicates that the image should be loaded as soon as possible regardless of whether it is visible in the viewport or not.

3. auto: indicates that the browser should decide how to load the image based on its own heuristics. this is the default value