Learn HTML In Arabic 2021 - #03 - First Project And First Page

In the name of Allah, the Most Gracious, the Most Merciful, and peace and blessings be upon the most noble of messengers, our master Muhammad. Today, inshallah, we will start together to build our first page. When you are building any new project or any idea, you must learn some professional skills before you start working on it.

First of all, don't try to create a folder on your desktop with cash on your pocket These folders are for recycling in the future, no This is your project and your career that you will continue with You have to get your device in a respectable place and start creating a folder with the name of your project

Try to avoid the Arabic names and try to avoid distances In the future when you learn commands and become a hacker user And learn how to deal with routes and all that You will face problems in the space and the Arabic names and all that So I can write here my project

My project will contain all my files that I will create, deal with and do my work with Now you have chosen a project that you will do a book store for example You will do a book library, your mother is a doctor or anything else and you want to start the journey from the beginning To do something related to the festival, write the name of the festival here, it will be your project I will do a book store, so I will write here book store like this

Then we will go to our program, Visual Studio Code or Atom that you have chosen And you will tell it "Open Folder" What does open folder do? It opens your project that has all your files here in the program so you can deal with all the files So don't just take one file and deal with it and that's it, no You will learn the correct project system Here is open folder like this and I will enter the "D" and I will tell it

then select folder, now I have selected the folder and I will start adding my files and everything I need to do in my project

The first file is the main file of our HTML page that we need to create the elements and learn the language with. You have a choice here called add file or new file here and you can right click on new file. The same thing, the two are the same. We will call our file index.html. Index, guys, comes to the name and comes to the extension. This .html is called extension, the extension of the file that identifies

the file's operating system and its content each extension will define the file's operating system and its content index.pdf means the pdf file that you know .mb3 means a voice file .html means a file made in HTML language

The word index is an advanced information, if you don't like it or found a problem with it, forget it The servers that you will be proud of and take care of your settings or default settings You search for a file called index regardless of the language index.js, index.html, index.php, any extension You just search for a file called index That's why you will always find this common name for the file Great

Let's start with the first element that we create the page with, which is HTML, which is our first element. The elements that we saw in the previous video and we created on the websites, these elements are called HTML Tag. HTML Tag, this is its name.

How do we do this? We start with a smaller sign than which is the "Shift" and the "W" in the keyboard and write the name of the element like this then a bigger sign than which is also the "Shift" and the "W"

Notice that the editor will immediately create the closing tag for the HTML text The elements have an opening tag and a closing tag Some elements don't have a closing tag The HTML text will contain a lot of content You open the text and close it with the same name but with a slash before it

This is how it looks in line here to see this shape and here we will press enter to start putting elements inside Here we need to learn some advanced information, God willing, because it will be very useful. The first thing in Visual Studio Code, there are very great things. If you go and open the element like this, it will bring you some information about it. This is a very great thing and it will help you when you learn. It wrote HTML element represents the root of an HTML document. Our HTML page

This is the root of the whole thing. This is the beginning of the whole thing. When you connect all the elements, you will notice that when you press enter, a step will appear in front of you. This step is called the tab. Why does it do this? Because you will put elements inside elements inside elements. If you didn't do this,

you will find all the elements on the same line and you won't know where the beginning and the end are. One moment, I want to see an example for this. I'll show you. Let's do a page source here. You will see that you have many elements like this. If each of these elements is on the same line, these elements are not connected. I'll show you something very simple. If we took all of this, we put it on the same page, an experiment, I'll call it a test.

I will show you the idea to start the demonstration. This is our shape. You will see that the elements are now aligned. I made a coordinate. And it remained as you see. The element inside is an element. Inside is an element. Inside is an element. You see? Everything in the level increases our age in front of it. If you came now. I don't want you to get angry with this shape. If you came now. You didn't do this movement.

you will find that there is an element at the beginning and you don't know where it ends because they are all on the same line. That's why you need to format the code. This is called formatting. So that your code is formatted and clean and the next one will understand when he sees the code. How do we do this formatting if he didn't do this? By tabbing. If you click tab here, it will take you to the tab.

Shift + Tab to move you back. That's the coordination. Great. Inside the HTML page, we have two most important elements. You can remember them with your body. We have the Head element. Like this. And we have the Body element.

The body is the body of our page, it contains all the content that the person sees, it contains all the words that you see in front of you Everything from the beginning of the image to the end is in the body What is the head? The head contains something called Metadata, information about the page

These are instructions for the user to see how to deal with the page The name of the page that is written on top of the page is in the head The information about the page when Google takes information from the page, it takes it from this part Not from the content of the page here We will talk about some information in detail in the head video

Today we want to start our page after some information we learned I don't want to go out without a page We will start with the first page called title The title is the name of the page here You have book store right? We will write here book store The book store is the title of the page that you will see when you click on it to see it Then inside the page we will write this is my book store

store and write welcome. That's it for the example of the experiment and we will save and go to look at our first page. This is the bookstore and this is our page we will open it. He wrote above it bookstore in the title and here this is my bookstore welcome. This is the first thing, thank God, we did it. We only understood from it what it means to create a new page. We only understood the first tips for building a project from scratch.

to be able to enter the information that's coming. Notice that we tried it quickly. Here, I press the "Shift" tab and it shows the same thing. Here, the same thing. I found the "Boys" configuration, I press the tab here, and here, I press the tab, and it shows the same thing. I press all of this to show the same thing. That's how the configuration is correct. It stops on this body, and ends here. This head ends here. Now I know where everything ends.

To write a code for your text, so congratulations on starting like the experts I hope you liked the lesson, see you in the next video, peace be upon you