R.I.B.H.U. Academy^®

Let't write html code in VSCode software?

Check List

1. VSCode is installed and working.
2. XAMPP is installed and working.
3. http://localhost/ is showing welcome page when you open it in a web browser.
4. http://localhost/phpmyadmin/ is also showing database page.

Congratulations!

    If all of above things are working properly, then you are ready to create a PROJECT FOLDER, and other files and folders inside it. If you have any problem regarding any of above checklists, go to previous pages.

    Now open the C:\XAMPP\htdocs folder. The htdocs folder is in C:\xampp\ folder, or where you have installed XAMPP software. If you can not find it, then go to Start menu and select or search XAMPP Control Panel and click with Right-Mouse-Button and select [ More ⇒ Open file location ]. It will locate the shortcut file and once again, click with Right-Mouse-Button on it and select [ Open file location ]. Now, you are in the C:\xampp\ folder.

    Caution: Now, you should delete or remove all files and folder in C:\XAMPP\htdocs\ folder, by CUT and PASTE them in another folder, for example, Documents. This will clean your C:\XAMPP\htdocs\ folder and you will be ready to create a PROJECT FOLDER. Do not delete or remove any other folder or file from C:\xampp\ folder.

Open VSCode Editor

    Now, search and open VSCode Editor similarly, from C:\vscode2023\ or other folder, where you have installed it. code.exe file will open VSCode Editor. You should make a shortcut of code.exe on Desktop because you will use VSCode Editor daily and regularly. Now with left-mouse-button, click on File menu at the top-left of the VSCode Editor Software.

    Then select Open Folder... option and in the [Open Folder] dialog box, (1) find and select C:\xampp\htdocs\ folder. (2) When htdocs is shown in [Folder:] field, then (3) click with left-mouse-button on the Select Folder button.

    Congratulations, you have created / selected your PROJECT FOLDER. You can choose any other folder as your project folder, but it will not help you to learn PHP along with other scripting languages.

    PHP files with .php extension will run only when they are inside the C:\xampp\htdocs\ folder. Therefore, you should choose this as your root folder. In the HTDOCS folder, you can create as many folders and files as you want, and as more projects, you will create.

Writing HTML code

    Now, move your mouse on the word HTDOCS at the top-left side of your VSCode Editor, and click with left-mouse-button on the [New File...] icon as explained in image above. Do not click anywhere else. Now, you can create a new file, namely, index.html in the rectangular field appeared. You can also create this file with File menu ⇛ New File... option. The three dots (…) after every option in any Menu will open a dialog box.

    Similarly, you can create a folder by moving your mouse on the word HTDOCS and clicking with left-mouse-button on the [New Folder...] icon as explained in image above. Write my_project in the rectangular field, and a new folder will be created. If you type, my_project.html in the field after clicking [New Folder...] option, folder's name will be my_project.html and it is not a file!

Careful: Since you are creating first file and first folder, and later you will create more files and folders, you should select current folder in which you want the files and folders to be created. For example, click on my_project word, and again click with left-mouse-button on the [New File...] icon at the top-left side of VSCode Editor to create second file inside my_project folder, namely, home.html.

Why index.html or index.php ?

    When any person requests on the web browser, a website's name, the first and default file requested is index.html or index.php. Some SERVERs are also configured to open default.html or default.php, or home.html or home.php. You can check on your web browser, by typing http://localhost/ after this first file has been created.

    Now, either in index.html or home.html file, you can write HTML code. Press Shift key and type ! (it will be typed, when you press Shift key and 1 key). Do not release Shift key. You will see some CODE generated by Emmet Abbreviation. When you type ! three times, only first line will be created. So, only type ! once, and press Shift Enter key simultaneously.

    Now, basic HTML CODE is created in your index.html or home.html file. You can save this file with Ctrl S keys. Don't worry. I will explain you every line created, that why, I enclosed them with colored rectangles and double-arrows, in image above.