Set a file or image to be downloaded from user
Here I will tell you how you can make your user to access some of your files and download them.

For example- you want to make your user to download an image then you can use Anchor Tag for this(Image should be present in your server)

lets say you want to make your user access or download Thankyou.jpeg, you will use this:

<a href="Thankyou.jpeg" download>download image here </a>



Download image here


 

Add Contact option which redirect them directly to respected apps
 
1. MAIL
   You can add mail to your HTML Page
   
   Code-
   

   
   <a href="mailto:example@gmail.com">Mail me </a>

   
   
   Here this is how it will show on Page
   

   
   Mail me


 
2. PHONE NUMBER
   You can add phone number to your HTML Page
   
   Code-
   

   
   <a href="tel:+919958675577">Phone number </a>

   Here this is how it will show on Page

   
   Phone number

   
   
   
   

Now you might want to add images too in your html page like i have done above, So lets go

<img src="img/img.png" alt="Showing how to add image to HTML Page"
width="378" height="353" loading="lazy">

 
This is what the result will be
 

<figure>
<br><img src=" img/img.png"
alt="Showing how to add image to HTML Page"
width="440" height="178" loading="lazy">
</figure>
<figcaption>
<caption>This is caption of an image </caption>
</figcaption>


Image given above is an examle of adding image with caption to HTML.
There are many elements we can use in <img>
I will be listing some of them.

1. alt
   The alt attribute specifies an alternate text for an area, if the image cannot be displayed. The alt attribute provides alternative information for an image if a user for some reason cannot view it because of slow connection, an error in the src attribute, or if the user uses a screen reader.
   
   You can see in the above image, the alt attribute I have used.


2. width,height
   The height and width properties are used to set the height and width of an element. The height and width properties do not include padding, borders, or margins.
   
   Well this was like googled answer but why we really need to give width and height?
     We give width and height of an image because of cumulative layout shift.
   
   What is cumulative layout shift?
   Well in simple word it helps how often users experience unexpected layout shifts. For more insight on this you can refer to this article.
   cumulative layout shift


3. loading
   The loading attribute specifies whether a browser should load an image immediately or to defer loading of off-screen images, loading by default is active(loading="active") for example the user scrolls near them. Tip: Add loading="lazy" only to images which are positioned below the fold.
   
   What is fold?
   Fold is the border line between the content you can see on your screen and the content you can't which is present on same page. Simply put the part of website which will come on screen after scrolling scroll bar is called below the fold. Now from this you can understand what is fold.


4. Caption
   Caption is used to give a caption to a image here in the above image. you can see <caption></caption> attribute under <figcaption> </figcaption> attribute.
   <figcaption>The <figcaption> HTML element represents a caption or legend describing the rest of the contents of its parent <figure> element.
   
   
   <figure> <img src="img/img.png" alt="Showing how to add image to HTML Page" width="378" height="353" loading="lazy"> </figure>
 
<figcaption> <caption> This is caption of an image </caption> <figcaption>

 

In this section you will learn about how to add tables to your HTML page.
What are the uses of tables in HTML?
Google it (:
Table starts from <table></table> element But as like table have many blocks- row, column,Table header, footer.I will talk about all of them.

An HTML form is used to collect user input. The user input is most often sent to a server for processing.
We start making form in HTML by <form> </form> element
<form> consist of input elements such as text fields, checkboxes, radio buttons,submit buttons, etc.

• <input> element

  The HTML <input> is the most used form element
  
  

  Uage of input element

  Type	Description
  <input type="text">	Displays a single-line text input field
  <input type="radio">	Displays a radio button (for selecting one of many choices)
  <input type="checkbox">	Displays a checkbox (for selecting zero or more of many choices)
  <input type="submit">	Displays a submit button (for submitting the form)
  <input type="button">	Displays a clickable button




• <label> element

  1. <label> tag defines a label for many form elements
  2. The <label> element is useful for screen-reader users

Now using <input> and <label> I will make a part of a form
 

First name:

Last name:



 
The code I used to make this part of form



<form >
<label for="fname">First name:</label>
<br><input type="text" id="fname" name="fname">
<br><label for="lname">Last name:</label>
<br><input type="text" id="lname" name="lname">
</form>




• Radio Buttons

  The <input type="radio"> defines a radio button.Radio buttons let a user select One of a limited number of choices.
  
  

  Lets see how Radio button work...
  
  Will you contribute to this project?
  

  Yes No Not Sure

  
  Code for this:
  

  
  <form > <input type="radio" id="yes" name="Will you contribute to this project?" name="yes">
<label for="yes">Yes</label>
<input type="radio" id="no" name="Will you contribute to this project?" value="no">
<label for="no">No</label>
<input type="radio" id="notsure" name="Will you contribute to this project?" value="notsure">
<label for="notsure">Not Sure</label>
</form>

• Checkboxes

  The <input type="checkbox"> defines a checkbox.Checkboxes let a user select ZERO or MORE options of a limited number of choices.

  Lets see how Checkbox work...

  
  
  Where do you found about this project?
  

  Github Twitter Discord Server Others

  
  
  Code for this:

  <form>
  <input type="checkbox" id="Github" name="Where do you found about this project?" value="Github">
  <label for="Gihub">Github</label>
  <input type="checkbox" id="twitter" name="Where do you found about this project?" value="twitter">
  <label for="twitter">Twitter</label>
  <input type="checkbox" id="discord" name="Where do you found about this project?" value="discord">
  <label for="discord">Discord Server</label>
  <input type="checkbox" id="others" name="Where do you found about this project?" value="others">
  <label for="others">Others</label>
  </form>

• Submit Button

  The submit button is used for submitting the form data to a form-handler
  
  What is form-handler?
  The form-handler is a file on the server with a script for processing input data. form-handler is specified in the form's "action" attribute.
  
  Submit
  
  Code for the Submit button
  <button type="submit">Submit</button>

• Reset Button

  Reset button is used for resetting the form
   
  Reset
  <button type="reset">Reset</button>

Adding Videos in HTML

The video tag is used to embed video content in a document, such as a movie clip or other video streams.
We start adding video attribute in HTML by <video> </video> element

<video> consist of input elements such as width, height,controls and so on.

There are three supported video formats in HTML: MP4, WebM, and OGG.

Now let's see how to add video to html page


Now lets see how I added this video

<video src="img/videohtmlpage.mp4" width="200px" height="120px" type="video/mp4">example video</video>

The audioelement is used to play an audio file on a web page.

There are three supported audio formats in HTML: MP3 and OGG.

Now let's see how to add audio to html page


Now lets see how I added this audio

<audio controls autoplay muted> <source src="bird.ogg" type="audio/ogg"> <source src="bird.mp3" type="audio/mpeg"> Your browser does not support the audio element.>

Text Formatting in HTML is done by using these elements.

• Bold by using <strong></strong> or <b></b> elements.


• Italics by using <em></em> or <i></i> elements.


• Smaller Text by using <small></small> elements.


• Highlighted Text by using <mark></mark> elements.


• Strikethrough by using <s></s> elements.


• Underline Text by using <u></u> elements.


• _Subscripted Text by using  elements.
  For example : 2H₂ + O₂ -> H₂O


• ^{Superscripted} Text by using  elements.
  For example : 2⁴ = 16