Hello friends,
You all are welcome to this HTML series. We have learned about HTML elements in our last segment and how can we use HTML layout, What is HTML layout, and how can we design or develop a webpage using HTML layout structure, and its different tags like Header section, Nav section, Section, Article, Aside, Footer. We have developed a webpage using all these portions of the tags available in semantic level layouts. In which we have identified where which portion and section has to come from. And we have tried it by running that.
I hope all of you have tried that. And if you have faced any issues or difficulties in running that goal, then you can let us know on forum.learnvern.com. We will try to resolve and revert to your issues as soon as possible.
Our today's segment is on the entities of HTML.
Now very first look at what are HTML entities?
Under HTML, We have alphabets available on the keyboard, when we write something under HTML. Also, we have numbers and special characters available.
So when we are having special characters available on the keyboard then there are some signs given on the numbers from 1 to 0. Like Exclamation mark (!), @sign, # tag, etc.
Just like some codes and semi-columns are given. Some signs are available on the default keyboard. But as you know, We write HTML code under the tag at the time of writing the program, when we write an HTML program.
Now for making a tag we already use two signs like angular and brackets.
Now, if I am using angular brackets in making the tags and I want to show angular brackets in my webpage then in that case what we will do is that will probably appear as an issue.
So, today's session is on HTML entities, how can we show up all entities in HTML. How can we special characters and symbols on our webpage?
So, let's start today's segment.
Our first question is the same which I have just explained. We can easily show all the things present on our keyboard on our webpage but we use many signs in tags and in other ways when we make a webpage.
As the example here shows that we can make a tag when we use less than (<) or greater than (>) symbol. So, what can I do if I want to show the same symbols on my webpage?
Then the solution is Entities and with the help of reserved characters.
Now the question arrives: what are reserved characters?
The characters we want to show up are not alphabets or numbers but are the signs that are called reserved characters. And we will learn how to show those reserved characters today.
This is my program, when I set this HTML editor in sublime text by typing HTML then
The title we give is "HTML special characters' ' Save! specialcharacters.html. Now I run this program.
So, here my program ran. Currently, it is blank.
So, I am writing something in body tag (I am giving heading)
under h1 "This is a sign: after that adding a sign (I want to give space) so I am not giving any space now. So, when I run this "This is a sign" comes here.
Now, when the same thing I want to do (Place exclamation mark) then save and run the page.
So, nowhere you can see that I only pressed the space bar key a single time so I got this portion as space.
Same, this portion I am getting in my browser as space.
But is this the right way?
So, if I add space anywhere as you have seen in the form when we add something in the form like space etc then it gets replaced by %2 and can be shown in the URL bar.
So, We can add special characters like space, greater than or less than, etc in HTML if it is available on our keyboard.
But what about the signs which are not present on our keyboard.
For example, We have taken some examples here in which less than (<) greater than (>) ampersand (&) all these are available for use on the keyboard but exactly after that we are provided with values like Cent, Pound, Yen, Euro, Copyright, a Registered trademark that are not available on our keyboard.
So, here we have taken Syntax.
If we want to show any entity on our webpage, then we can either write it with the ampersand entity or after ampersand, we can write the number of that entity with #tag.
So, here two ways are available for us. Either we can write entity names or we can write entity numbers.
If I want to add a sign of greater than in my webpage then, what I will do is, I am using the symbol of greater than (<) which is available on the keyboard, under h1 "This is greater than a sign:" Because this key is available on my keyboard so we have taken that icon. Now we will save and run this!
So, here we are getting the sign of greater than > like this way.
But if I want this greater than a sign I am also getting the tag.
So here are the chances of these inbuilt signs which we are putting from the keyboard cannot pass or show error in our browser while running it.
Because when we use greater or less than in tag, then there are huge changes that our old browsers like google's old browser, Internet Explorer old versions like 9 and 10, Old Microsoft edge versions can not pass these characters at run time if the same way I use to place greater than sign for this.
So, In that case, Rather than placing it by keyboard, we will write the code or entity code.
Let's say ">". So, this is our way, & defines that some entities are starting and gt is our code of greater than and then; is to over the code or to end the code.
So, if we want to print greater than then we will write like this.
Save and Run!
So, here I am reloading it and getting my sign.
In the same way, I am adding less than "This is less than a sign:" and my code will be "<" Save and run!
So, here is the less than sign
So, we have tried our sign in both ways.
The first way is to enter from the keyboard and the second way is to enter from the entity code but the proper way of enabling these signs while coding is entity code. There are many chances that our browser may not pass or run the character if we directly enter it from the keyboard. In that case, the proper way is to run from code.
Others are also available as the space is given. So, for space, we use " ".
Here "This is blank space:" I am writing abcd, so "a "
So, this is our code for blank space then "b " then comes "c " and then "d ".
So, here I have used " " to separate these (abcd) from each other or to give space between them.
Save and run!
Here we can see that we are having space between a b c and d.
So, We have given space by using nbsp not by using the spacebar.
Let's say we are reusing the content given here (abcd) somewhere using javascript then there is a trim function of java.
If I apply the trim function then my space will get removed if I have given the space from the space bar but I will use   to keep the space between the characters. My space will not get trimmed using  .
So, here we are looking at an advantage of what difference can be generated when we place space from the spacebar key and  .
Next is our cent, many cents, pounds we have given here.
Now here we are writing, Under h1 I am adding "This is some currency signs:"
So, the first one is Cent. It's like "¢" after that pound comes, so for that "£" then yen, so it's like "¥" and the last is euro so it's like "&euro". Save and run the program!
So, Every sign is visible to us when we write the codes of the sign.
As You can see, these signs (currency signs) are not available on the keyboard. So we can use entity code every time we want to enter these types of signs in our webpage or website and with the use of this, we can enable this in our website.
Next, is copyright written here. These all are just examples. Signs are not only these, there are more than these signs available.
When you use these signs, let's say you require more signs from these then you can find that sign by google. You get the HTML code directly from there.
So, this is how we can use different signs using entities by & and then the code.
Now Symbols arrive.
How many symbols can we use?
So, as you all know when we use Math on our webpage when we want to show any mathematical equation or operation, then in that case symbols are very useful.
Plus, Minus, Multiply and divide like basic symbols are available but when we go in-depth and use scientific values then in that case we don't have detailed symbols available on the normal keyboard.
Let's look at how we can get those symbols to our webpage.
Now, How can we get if I want greek symbols like Alpha, Beta, Gamma.
Here are two ways I have given, The first one is entity code and the other one is entity numbers.
As we have seen in the syntax we can get this with the help of entity codes and entity numbers.
So, let's make some codes with the help of these names and numbers.
As six greek alphabets are given here (Alpha, Beta, Gamma, Delta, Epsilon, Zeta). For example; if we want to show up these alphabets then
h1 tag "Below are some Greek alphabets:" and add it under h2
We have seen how we can add by entity name. Now we will add it by number to how to add symbols through numbers. The number for alpha is 913.
let's say "Α" so this is the Alpha
So, all other Greek numbers are increasing by one.
"Α" "⎮" then "Γ" "Δ" "Ε" and "Ζ"
We have added this and now we are running this.
So, here we are having some greek alphabets (Alpha, Beta, Gamma, Delta, Epsilon, Zeta). So, these are in capitals. We have seen how we can add Greek alphabets in the capital on our webpage.
So, Alpha and Beta are the same (A, B) as we can enter them by keyboard but in the case of gamma, this issue can arise. In that case, we can add it both ways by either using the entity name or entity number.
In the same way, how can we add the arrow signs up, down, right, and left?
Here the code of the arrow key is given if we want to add the arrow key. So, let's say under the h1 tag "Below are the Arrow keys;" Then h2
Here we can see that our code for arrow keys starts from 8592 and if we see in words then left arrow, upward arrow, right arrow, and down arrow. So, by using these ways we can get them up, down, left, and right arrows.
Let's try both ways. So, the first one is the entity number starting from 8592. So, "←" and we have one number in this. So, after "←"there is "↑", "→" and "↓". Save and run!
So, here we are having all arrows of arrow keys.
But if we generate in the same way by entity numbers then, here "&larr" then &uarr (Upward arrow) then for rightward "&rarr" and for downward "&darr". Save and run!
So, as you have seen in the output, we are getting the same output if we can write this by entity name or by number.
So, all these signs or symbols are not directly available to us when we use keyboards.
So, Today we learned how to add those signs on our HTML page which are not available on the keyboard.
Guys make sure, Only these are not there in HTML which has been shown to you in today's segment. There are a number of signs.
You can use any number of signs as per your need. You just have to search. If you want to add a particular sign as the copyright sign is given here in the last and you don't know the entity name or entity number then you can search it simply by Copyright HTML code or Copyright HTML Entity name and you will get the answer as here "©" given.
In the same way, you can get the number.
Because we can not list out all the signs in one segment. So, it's a better way to search for the sign as per the requirement of that place. So, you can search for that sign and place it on your webpage.
Because it is difficult to remember all the symbols and you can even memorize them. So, search and place it on the webpage.
So, in today's segment, we learned what the entities are.
What are the entity's codes and symbols?
How can we enable or place special characters on our webpage?
Along with that, By using the number and name we learned how to place the entity.
So, for today's session including the special characters on the webpage, I request you guys to try it yourself and include it in different ways.
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.
We will revert by solving your issues as soon as possible.
We will learn about Event Attributes in the next topic, how many different types of events we can enable when we develop a webpage.
Thank you, Guys!
Share a personalized message with your friends.