Unbelievable Things we can do with Html

Unbelievable Things we can do with Html

In this article, I share some of my mini-project that can make with only html and also we see what things we can do with html instead of javascript. Everyone knows html is a very short language 😁 also many times we see people make fun of html and that’s the reason we make this blog post to show people that our html does many things that we do a lot of code in javascript do lets start with the 1st things that we make by html.

1. Send Email Using Html

Yes, you read correct, we can send emails using Html. And not even just email vo can also add a subject and already message also. And we achieve this thing with A herf attributes, not any form elements or by email input.

<a href = "mailto: cwrprojects@gmail.com">Send Email</a>

We have our link attributes a herf so in this tag we have attributes for email also, attributes are mailto, you can see in this code we write a link tag then mailto and write email id of that person who we want to send an email by clicking on this link. So when anyone clicks on this link on a user’s mobile phone Gmail opens, and for sending mail id there’s already a mail id that we write into mailto.

In email Subject

<a href = "mailto:cwrprojects@gmail.com?subject = AWESOMEbody = Thank you">
Send Feedback
</a>

In this code, you can easily see we add new attributes in our herf tag, so actually, these tags are Email Subject and Also body message. Before this tag When the user clicks on the email link there is just an Email fill into the To email section and another field empty so we add new two attributes so basically what we want in the email subject write it and also in the body tag write any text. So after these 2 new attributes when anyone clicks on this link there is an email, subject, and body message already filled. just click ok send 😄.

2. Call Using Html

Yes, you can create an html tag so that when users click on the link or link text, that automatically dial number. If you do not understand let’s learn by example.

<a href="tel:+916565XXXXXX">Call Us</a>

In this a herf link you understand we use this same tag in our Html email so here we change only our attributes otherwise link tag is the same. In this tag we use tel attributes for dial number, we use our country code ae +91 and write our number, and when any user clicks on this text that opens call dial. Hope you understand how our call works with html and don’t forget to add country code so that there is no possibility of errors.

3. Send Whatsapp Message Using Html

Yes, it’s also possible to send a WhatsApp message, by the way, it’s not a message we call this contact with WhatsApp. Let’s understand when a user clicks on link tag chat on WhatsApp that page automatically redirects to the WhatsApp page and there is like chat with this number and when you click on that button your WhatsApp opens with this number chat. Now you can send messages to this person also without saving that person’s number. Let’s understand by an example

<a href="https://wa.me/+911234567890">Chat On Whatsapp</a>

Send Whatsapp Message Using Htm

Let’s understand our code and how this is all possible in just a herf tag. So we use href tag and in this tag, we do not use any attributes like as we use in calls or email using in html. We use a link Https://wa.me/Number that’s it for our function when you add this code in our link tag.

We did our work when anyone clicks on the link it’s going for the Whatsapp web page that says chat with this number and you can use this as a trick like if you don’t want to save anyone’s number and chat this that person so you can do this😁.

4. Disable Zoom on pinch

Yes, I guarantee that you have not heard about this tag, with this tag you can off Or disable zoom in a pinch. If you do not understand what I say so understand it in the local language when we open our browser and we do not see exactly what is on the page so we zoom with our finger on our mobile so we see it.

And in some case we want a feature that the user can’t zoom on, that’s mean we do disable the pinch option so here is the code for that function. First, see the code and then understand how this code work.

  <meta name="viewport" content="width=device-width, initial-scale=1.0 ,
    maximum-scale=1.0 , user-scalable=no"/>

Yes, this is our html meta tag and it’s included in our html head section. so in this line of code, there are many tags but we talk about user-scalable tags because this tag enables or disables pinch on zoom. If can change its value no to 0 and it works like the same. Yes if you put the number above 0 then it enables otherwise if you write 0 or No then it tells the web browser that enables or disables pinch on zoom in our website. That’s it for this awesome feature.

5. download files using HTML

You visit many websites for downloading Vs code studio to Git/GitHub. So you don’t have an idea how this download happened (I also don’t know 😁) but when we click on the link there is a pop and we press enter and files in our computer. So we today finally understand how this download thing works with single-word attributes yes only single words. You see this code then we talk more about the download attributes.

               <a href="projectfreecode.png" download>Download</a>

We put our file into a href tag and then we use a simple attributes Download and what these attributes do?. These attributes find what they have in href tag and it’s downloaded when anyone clicks on our link text. It’s a very simple and very important attribute of our html.

6. Form Validation In Html

In Every Updated html version We have new tags every time and today we have almost every html input tag for validation. We just use an html tag and it validates user input if they entered wrong it shows the input type so let’s understand by example.

  1. In form 1st we use name Or last name type input for this type of field we have an input tag required so it must be filled.

2. Then we Password Or any type of a number field. So we use required attributes and min length number so the user must type min length number if we type 8 so the user must enter an 8-character password or number it totally depends on you how you make your input. We have a patterned tag for password input or number input but it’s advanced so we talk in a separate article so we go more deep input learning.

3. In our input field, there is email input also if we do this whole thing with javascript it takes a lot of time and lines of code. But we just use input type email and everything is done, now users can’t type name Or number in email input they enter original email, original means name with @gmail and com extension.

The final summary is you can do form validation with our superior HTML. We just don’t have proper knowledge about html tags. There is many validation tags left but we cover them in the next article, and it’s all about the form so you gain more knowledge.

7. Disable right-click

You can disable right-click on a single line of code in the website or separate elements. Yes, we have attributes for disabled right-click, you visit some websites where you can’t copy text or can’t press right-click. Also, we have some separate elements where our cursor is disabled so let’s understand our code in 2 different ways.

Disable On Element

<div oncontextmenu="return false" class="container">
</div>

In this code we write an element that’s oncontextmenu=”return false”, by using this code we disabled right-click on this div only otherwise right-click works on other website elements but when it’s come to this div cursor disabled. This code meaning is we disabled right-click to control website copying or other things. Also if you want to enable the right-click just remove these attributes and right-click to start working.

Disable On Whole Website (Body)

<body oncontextmenu="return false">
</body>

If you put this code line into starting body tag, then you can’t right-click on any elements. Because we add this code for our whole website so our cursor is disabled so if you want to enable you can remove this and everything working fine. And this is short line code so you can try it now.

Collect Form Data Without Backend

8. Emojis Using HTML

You think how we use emojis😄 with html. You just know that we just put our emoji to any paragraph tag or heading but this is the wrong way html already made a tag for emoji and that’s the right way to use emoji in html. So here is some example code of how html emoji work😄.

<p>&#128512;</p>
<p>&#129412;</p>
<p>&#129512;</p>

Yes, we use this emoji code in our paragraph tag. Actually this all code happens by our heading tag meta charset=UTF-8″> so we using this UTF-8 Number using &# you can try using this code and you completely understand😉.

Output

Emojis Using HTML

9. Add Music With Html

Yes you can add music with html audio tag and the main feature is you get default control of music like playback speed pause and play and music forward with a sliding music line also you have an option for mute or unmute and you get just control of all music control with just a simple html tag.

<audio controls>
  <source src="horse.ogg" type="audio/mpeg">
</audio>

Here you can quickly see how this code like 1st we have an audio tag and there are control attributes that show the music file and control music control. And then have source tag so we select our path of music and add a attributes that type we choose audio tag then close audio tag.

Output

Add Music With Html

Music(Audio) Autoplay

You can see in this output, that there is music with some control but currently music Is off if you want you can play music. But in some cases, we want that when users load website audio to start automatically so we have an html attributes that is autoplay. It’s just a single tag we add with control and everything is done.

<audio controls autoplay>
  <source src="horse.ogg" type="audio/mpeg">
</audio>

10. Custom File Value

You think about what this is this na actually I am also confused that what I write ✍️in the heading so I chose it. Actually, this tip is all About form tag input. In this topic, you see how we accept only a selected file if you do not understand😉 till now let’s understand by example

Best Web Developer Portfolio | must Visit Once

when you visit any website and they say upload an image so you only upload .png Or .jpeg files you can’t upload pdf Or any other things so this is now possible with html that’s we learn today 🎉.you see the below code and you understand if you do not understand b theory.

     <input type="file" accept=".png, .jpeg">

In this code we have an input type, this is form elements. And we have attributes of the file so user uploads any type of files but in next step, we add accept this means we want only a selected file and we add the name into accepting value so this tag working correctly we add .png and .jpeg so user can upload this type of files only otherwise any wrong file can’t be supported or not uploaded.

Thank you❤ for reading our lengthy and boring😑 article. I know I am not a professional writer but I want that share something that people use in their daily life coding❤. We share many useful things in our article like we can send an email, Whatsapp messages, and calls using html. Also.

We learn how we disabled zoom on pinch and how we disabled right-click using only on html use. After all, we learn that form validation is possible with html5 new update tags. Also, we learn how to download files work when any user clicks on download. Then we learn how we collect specific files from users and in the end how to add music with full control using only html.

If you want a free frontend project or informative tutorial visit our website completely!

My name is ankit Dungawat Know as codewithrandom, I am frontend developer and run a Instagram page over 140k followers so I daily share new tutorial or project on this website. I run more then 3 website or 2 Instagram pages.

Leave a Comment