Html πŸ‘Œ

Html πŸ‘Œ

Β·

3 min read

Hello,πŸ‘‹ I had recently joined the javascript bootcamp with INeuron and attended the very first class of Hitesh chaudhary sir.Here is some info on different topics which I understood,

Web server :

  1. Apache:

    • Generally web servers work with protocol called HTTP which is developed by apache community.
    • It is a open source project and does not cost any fee to access its services. It provides a level playing field for all.
  2. How it works :

    • Generally browser send request to the web server for file that will be hosted via http protocol.
    • As soon as request reaches to web server http accepts it ,search the requested document and send back it to the browser and finally we get landing page.
    • All the documents which have to load on web server are generally located in /var/www/html directory.

By using web server we get lots of benefits as,

  • They work more efficiently.
  • They are always connected to internet except during system troubles and downtime.
  • They are maintained by third parties so we can focus on other important tasks.

Live Server Preview :

It is an awesome extention in v.s.code which loads your codes output side by side in editor . As it lowers down our efforts from switching between editor and browser repeatedly.

h1 , h2 , p tags :

  1. The h1 and h2 tags are one of the heading tags in html . Font sizes of tags are always default to the browser and we should always keep one h1 tag in one page . We should not have to skip any "h" tag while nesting as it may create confusion for normal clients and clients with screen reader techology.
  2. The paragraphs are block of text generally denoted by "p" tag in html. If 2 or more "p" tags are comming consecutively they are seperated by blank lines. web page becomes more accessible on breaking content into paragraphs.
  3. Some people use p tag for adding white spaces between two paragraphs but this could cause problems for clients with screen reader technology . As it will read a tag but on screen to content found it may create confusion.

Lorem ipsum :

It is an emmet abbreviation which fills out dummy text in the "p" tag to see how original web page will look like. We must have to give some suitable space on both sides of "lorem" inside the p tag and it will generate dummy words of no we given before it.

  • By default it gives para. of 30 words but we can specify it as,
<p> lorem100 </p>

img tag :

  1. It provides images when address of the image is provided in src attribute .
  2. The "alt" attribute provides alternate meaningful text for image . In some error case if image is unable to load then this text is shown with distorted image.
    < img src = "address of img"  alt =" " >
    
  3. This tag supports various types of image formats like APNG,AVIF,GIF, JPEG, PNG, SVG WebP.
  4. Currently the most popular and used formate is JPEG( Joint Photographic Expert Group image).
  5. Though AVIF and WebP are widely supported formates but AVIF(AV1 Image file formate) lags on saffari.
  6. Also supports various attributes like srcset, height, width, crossorigin, fetchpriority,figure ,figcaption, etc

    • The src and alt attributes are default to the img tag.
    • When we want to use high resolution image for high resolution devices then we use "srcset" attribute with the address of that image.
    • "figure" and "figcaption" are the elements which are used when some important information has to be given along with image and title attribute is not sufficient for it.We can provide it after the img tag.

        ```
         <figcaption> image caption </figcaption>
        ``` 
      

THANKS FOR READING πŸ™‚ and give suggetions

Β