How do I encode a URL in HTML?

Hello guys,

You are welcome to our HTML series,

In the last session we learned about canvas in HTML, we learned how we can add canvas in html, how we used canvas to draw different shapes through JavaScript, we added graphics like line, circle and text in the canvas.

So I hope you performed all the practicals shown in that yourself.

The last topic was about the canvas.

The topic today is based on URL encode, which means how we encode or encrypt URLs when they are submitted through HTML form.

Before learning URL encode, we have to learn what URL is.

The full form of URL is written here in the slide, Uniform Resource Locator which is a web address.

The house we live in has a particular address through which the posts, couriers etc. reach our house.

So, to reach a person or a location, it's important that we must have the address of that location.

Similarly, if we want to reach a web page, it's important that we must have the web address or URL of that web page.

Through URL we can be redirected to a particular page.

In other terms, a URL is a web address or any page.

How are URLs usually written?

So, a URL can contain words and numbers, if the URL is made of numbers it is called an IP address that is internet protocol as written here Internet Protocol, IP address.

IP addresses are usually of this type, divided into four segments, three numbers in the first segment then three numbers, then two and two, here it can be three numbers but currently here are two numbers only.

So, it's like

One two three dot

one two three dot

one two three dot

one two three, so this is the form and IP addresses are written as 3.3.3.3 form.

Here an example is given, like this is the address 195.201.68.81, this can be the address of any site but ideally as humans, when we want to remember something we cannot remember this many numbers.

So if in that case if it's the domain name in the place of IP address, domain name means if it contains words, we can remember them easily

So, if I want to visit learnvern's website and I have words like "learnvern.com", I can easily remember and redirect.

There are possibilities of making mistakes in numbers but we cannot make mistakes in words due to the spelling generation, so that's why in the URL compared to IP address if we type words and redirect it is much more effective but for the system, whether we use numbers or words it redirects us on the same website.

The words are for our feasibility.

So, here we saw what URLs are, usually URL is an address.

There's a particular syntax for URL as shown here.

The scheme, then a colon followed by a double forward slash then prefix dot domain colon port, path after the port again after the forward-slash File name.

So this is a normal syntax of the URL.

We will one by one see the things in it.

Let's say the first is the scheme, the scheme is the protocol or provider of the internet service.

We have two schemes available: the first is HTTP and second is the HTTPS.

Let's say I go to chrome.

HTTPS colon double slash learnvern dot com.

Okay

So when I click the URL bar, I get HTTPS which indicates this is our scheme, which means this is the protocol of the internet service provider.

This means which protocol we are using, we are using HTTPS ( HyperText Transfer Protocol Secure), HTTP is also available in its place that is less secure as compared to HTTPS.

So we have two methods, either we go with HTTP or we can go with HTTPS, so we can use any one of them.

Then it is the prefix, what is a prefix?

Like, normally we have WWW which is defined as the World Wide Web, so mostly all the sites start with WWW.

Let's say www.learnvern.com or www.google.com or any other site.

Usually, what's added before is the prefix it's www or something else.

After that it is the domain, domain means if I open learnvern's website the domain is learnvern.com.

I am repeating,

If I open the site of learnvern the domain will be learnvern.com, if I open any other site the domain can be something else or some other name.

If we are opening an India related site, dot in, comes in the place of dot com, if we are opening a UK based site dot UK shows up.

For example, learnvern.uk or learnvern.in

But those domains should exist, if we randomly open the website by typing dot com or dot in, the possibilities are that the website might not exist.

So, firstly you must be clear that the website you are visiting exists or not.

So that was the example of the domain.

After that, it is the Port.

Port means, on which port or port number our website has been defined, or on which port number the site is hosted.

So let's say, it can be any port like 8080, 5442 any number of ports are available.

Port numbers usually are between 0 to 65535.

This means it can be any one from 0 to six thousand five thirty-five in which few ports numbers are reserved.

Like 0, is a port number that is reserved and we cannot use it, so apart from that we can use any one but there are certain that we might not be able to use.

So the port number is an unsigned integer, and through its help, we can open and see where our site has been hosted.

So, the Port number ranges between 0 to 65535.

After that it's Path,

As there was an example in the slide, that first was the prefix dot domain then port and after that, the path means at what place we want to go on the website.

For example, if I open the learnvern's website then initially it is showing me learnvern.com, HTTPS and the www dot learnvern dot com.

Then if I click on any course here, it is showing me the path of the webpage, that I have selected digital marketing from a course under the learnvern dot com, so the portion after the slash becomes the path.

The page of the digital marketing tutorial is stored under the folder named course and I am showing that page bringing up from there.

So that was the path.

After that, it is the file name, that is the name of my document.

So slash course slash is my path, but digital marketing tutorial is my file name.

Because this is a web page, if it was made in asp its extension can be aspx.

So either the file is dot html or dot aspx or with any other extension because this is a file.

So this is our URL and the portion I have highlighted here (slash course slash) is the path and then the name (digital marketing tutorial) so that is my file.

The file means if I open a program among which we created

Let's say I open the form program

So here are the programs in the path, as the file is stored in my system this is the complete path.

So till here, "d Joel html programs" is the path and form dot html is the file.

So that was the URL, and we understood what the URL was.

These are the different portions and elements of the URL, scheme, prefix, domain, port, path and file name.

So this is how a URL is.

Until now we saw what a URL is, how it works and its different elements.

Now, we have to encode the URL.

As I opened the program, that is of the form

We saw this in the session of "form" and we generated the form also.

So we added first name, last name, contact number and a button click me that is a submit button and then we added an email.

So when I click it the form is getting submitted, and "this is the submitted form" is shown.

The moment I clicked the submit button, after this question mark I got something written like "first name equals the last name equals & contact number".

Let's say I load this, in the first name I will write abcd, XYZ in the last name, and then 123 any number and here let's say I add abcd at mail dot com.

Now, the moment I click it and submit

Here, the first name equals abcd and then & sign is shown

What is & sign?

The & sign is added to concat or join the first and the last name.

Then it's the last name equals XYZ, then again the & sign is used to join the contact number

After that, it is the phone number 1 2 3 4 5 6 7 8 9 0

And then the email, now here in the email you will see some change.

The email I added was [email protected] but the @ sign is replaced with a percentage 40.

I am repeating,

The email address I entered in the email text field was abcd @ sign mail dot com but that @ sign is encoded with percentage and 40 when the form is submitted.

So why did this happen??

This is the encoding, encoding means the special characters we pass, let's say we passed space or hashtag or @ sign, then the URL bar doesn't transfer the special characters but in the place of special characters, it passes them by encoding.

So, this encode means changing the special characters to an understandable character by the URL bar is called URL encoding.

For example, let's go to the slide.

We have written the same definition in the slide also, that the process of converting the ASCII (aaski) characters is called URL encoding.

Normally, all the non-ASCII characters will convert to percentages followed by a hexadecimal digit.

As you saw, the at (@) sign is converted to % 40, similarly, the other signs will also convert and change but there will be some respective number for that

For example,

Here we have taken the example that the space in the space bar when we convert or encode space then it gets converted with a plus sign based on the encryption method and if we haven't defined the encryption method then it will change with a percentage 20.

This means the conversion of the space bar during the encoding will be by a percentage 20.

Same way, we have taken the example

If this is the sign of copyright, if I pass the copyright sign it will be replaced with percentage C2 percentage E9.

So let's say, in the email

Abcd..

Okay let's leave the email. In the first name, I will pass some at(@), hashtag and dollar sign.

So, the moment I passed @, hashtag and dollar, three of them are changed @ with percentage 40, # with percentage 20 and dollar sign with percentage 24.

This means, all these are encoded with some respective hexadecimal codes.

Let's say if I also pass the space, and click

Then + sign shows after 24, which means the encoding method which I didn't define but is a default encoding method is changing or encoding space bar with a plus sign.

So that was the URL encode.

This means, when we submit any form, the non-ASCII characters, non-ASCII means it encodes all the special characters other than a to z, 0 to 9 etc, to pass on the internet.

So, the numbers we get at the time of encoding are called encoded numbers, for that, we saw an example like for @ it was percentage 40, plus (+) for space. After that we saw some differences like percentage 23, percentage 24 for hashtag and dollar sign.

So, that was the URL encode

Concluding, URL encoding means converting an URL to such a character set such that it can be passed to the internet.

We need URL encode because we have to pass the data or the URL on the internet and transfer it from one portion to another.

That was the segment of URL encode, in the next segment we are going to see the difference between HTML and XHTML.

We have learned HTML in almost the complete session. Next we will first learn what is XHTML and what is the difference between HTML and XHTML.

So guys, like the session today I request you to generate a form like this in your system and at the time submitting of submitting you enter and pass various signs given on numbers, and then the space bar and click submit button.

When you click submit, all the special characters you have added will be shown converted and you will get a number with a percentage.

So this is the URL encode and it is for our data so that it can be successfully transferred on the internet.

I request you to perform this practical, If you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to solve your query.

So see you in the next segment,

Thank you.