Learn HTML In Arabic 2021 - #34 - iFrame, Pre, Code

In the name of God, the Most Gracious, the Most Merciful, and peace and blessings be upon the most noble of messengers, the Master of Muhammad. Today, we have three elements that you will love and are very good at. The first element is called "code". This element is computer code. If you have a computer code that you want to write in programming language, you write it here. You will ask me where I can use this. Let's see this page together.

This is a lesson that made something You will notice that this lesson has a code This code does not write like HTML or something like that No, this code is written like this and it has syntax and colors that are different from each other and it has an organization and the distances that you make are saved like this On the contrary, if we wrote in HTML and put the distances that you remember in the syntax lesson These distances were ignored Here the topic, let's talk about it a little bit

we will make an example about the code I will make an example about any computer code or any programming language code like JavaScript for the experience of the idea only

var x = 10 and var y = 20 and we will add them together x + y if you want to see the code you will find it next to each other and it is the computer code you will find that the code doesn't have any combinations and you can do whatever you want to do look here to explain the idea you will find that there is a code and you can do whatever you want to do

Now, let's come to the most important point and element which is the pre-formatted text The pre-formatted text, our element today, preserves the things that you do inside it. Meaning, if I put a space or anything, it preserves it. Very nice. Let's see what it preserves. I'll make a paragraph and write "This is" then "be" for example. Of course, then "new line"

and then new line as you can see we will see all of this as we agreed in syntax lesson on the same line if we change this paragraph to pre preformatted text look what happened the preformatted text keeps what you do inside, distances and all of that even if I did this

I clicked on "save" and you will see that the text is in front of you so the preformatted text will contain everything that appears in the HTML as it is exactly do we use it for the reason that I did this? of course not, we use it for something like this this code for example, let's leave this and put a new precode

You can see the difference between the two codes, they are pre-formatted They keep the distance and the new line so the code will look like this This is the pre-formatted, of course there are some adjustments in the future when you learn CSS You can adjust the background and everything else

There is another element that is very important in some applications and apps and it is called the I-frame You can use it to create a page from a website and load it on the page you are in

So, I can have a small box here, with a page from another place. This page can be a page in your device, or in your project, or it can be a whole website that you can put in this place. Let's try a website called "Zero.org" like this. We will add it here in the source, and we will look at our page.

This is our page guys, you will find the square part of the I-frame in the whole zero position as you can see Of course there is a very important point, the ring or the haloc

First, there are sites that prevent iframes. People who have learned the old course used to say that they tried Google and it was not good. There are sites that prevent iframes or that you can use iframes. Like Facebook, Google, and W3Schools. These sites can change the policy, but I want to understand you. If you want to use some sites, you may not use them.

The iframe has many elements, you can give it width and height, for example, I can give it 800px, and the height is 400px We will learn the pixels and dimensions of this design when you go into the CSS This is our website

I set the size of the box and placed the frame inside Don't try to build a dream on this iframe because it's not useful I just wanted to tell you that there are more beautiful ways to place the frame than to place the frame in another place and display the data in this way Using something called API but this has another story

I hope you liked this simple and easy lesson. See you in a new lesson. Peace be upon you.