Step-By-Step Coding for 100% Beginners
feat.Visual Studio Code
Today's Contents:
• Installation of Visual Studio Code
• Installation of Live Server
• Creation of a Folder & File
• Starting Coding
Hi, Radiant Guys! How is everyone? Last time, we practiced creating a web page by coding in Windows Notepad. it was pretty enjoyable. Today, we will practice coding using a free coding program called "Visual Studio Code." Well, I hope you also enjoy today’s post.
| Install Visual Studio Code
Search "Visual Studio Code" in your search engine. Download the program from the website and install it on your computer. Please refer to the previous post for further details regarding the installation. Look up details at "3. What program do I need to start coding" in my blogger.
| Install an Extension "Live Server"
• Run the installed program, Visual Studio Code. On the left sidebar of the screen, there are buttons for "Explorer," "Search," "Source Control," "Run & Debug," and "Extensions."
• Click the Extensions, then a search window opens.
• Type “Live Server” in the search box and install the app. Please refer to the previous post for further details regarding the installation. Look up details at "3. What program do I need to start coding?" Live Server is a very convenient app because you can check the results that appear on the web browser screen in real time while coding.
| Create a Folder & File
• Create a new folder titled "testHTML" on the desktop.
• Get back to Visual Studio Code and click the "File" in the top menu bar.
• Select the "Open Folder".
π― TIP
When opening a file type like .html, select the “Open File” in the collapsible menu.
• Right-click on the folder title or in the empty space below the file title and select "New File" or you can also click the icon for the "New File."
• Enter the title of the new file as 01TitleParagraphTag.html (FYI, you can enter the file title as you want).
| Start Coding
⎖ HTML Version 5; <!DOCTYPE html>
• First, enter <!DOCTYPE html> in the code input window. This is a declaration that the user will choose HTML version 5 and click the ''Enter" on the keyboard.
⎖ An HTML Document; <html> ··· </html>
• I will put html tags in it to create an HTML document. Enter <html>. When you enter <html>, </html> is created automatically. Click the ''Enter" on the keyboard between tags.
⎖ Head; <head> ··· </head>
• Enter <head> between the html tags, as seen in the image below, using the Enter key for proper indentation. When you enter <head>, an automatically </head> is created. As seen in the image below, click the Enter key for proper indentation.
⎖ Body; <body> ··· </body>
• Enter <body> in the same column as the head tags. When you enter <body>, </body> is created automatically.
⎖ Title; <title> ··· </title>
• Enter <title> between the head tags. When you enter the opening <title> tag between the head tags, automatically, the closing </title> is created. Put the post title as 01 Title Paragraph Tags between the title tags. As seen in the image below, click the Enter key for proper indentation.
⎖ A type in encoding language; <meta charset="utf-8">
• Put <meta charset="utf-8"> in the row just below the opening <title> tag. It tells the browser to use UTF-8 character encoding when displaying the page.
• Then, as seen in the image below, click the Enter key for proper indentation. you enter <h1> in a new row between body tags, creating </h1> automatically. Enter the title as Hello AI between <h1> tags. Then, place the cursor behind <h2/> and click the Enter key to change the line.
π― TIP
There are two ways to open the file titled 01TitleParagraphTag that has been created through the coding: One is to open the file in the folder created on the desktop, and the other is to open it on the web browser by clicking on the installed Go Live in the bottom right of the code input window of the Visual Studio Code.
To sum up, the space between html tags consists of head tags and body tags. The space between head tags consists of title tags and a meta tag. Additionally, the screen that appears in the web browser is displayed based on the content entered in the body tags.
π― TIP
<h1> to <h6> tags are mainly used to set headings in HTML documents.
• If you enter <h2> between body tags, a closing tag </h2> is created automatically.
• Write Hello AI in between the tags.
• As seen in the image below, after clicking the Enter key for proper indentation, enter <h3>, then </h3> is automatically created.
• Write Hello AI in between them as well.
• Try creating <h4> </h4>, <h5> </h5>, and <h6> </h6> tags and set the headings as Hello AI in the same way as above.
π― TIP
<h1> to <h6> tags are useful when displaying headings. The larger the number, the smaller the size. (i.e., <h1> ··· <h6>)
⎖ A paragraph; <p> ··· </p>
• When you enter <p>, the closing </p> is automatically created. Between these, enter "p tags are paragraph tags."'
⎖ A line brake; <br/>
• While writing sentences between paragraph tags, to break lines, you can use a line break tag <br/>. At this time, even if the line break tag does not include a slash, there is no problem with the function (e.g. <br>). Since this tag exists as a single rather than a pair, the slush is placed after the letter.
π― TIP
A paragraph can be referred to as a corpus of several sentences explaining a single context. The P tags display a paragraph on the web browser and are written as <p> ··· </p> in the code input window.
⎖ A horizontal Rule; <hr/>
<hr/> is a tag that displays a horizontal rule on the web browser and exists as a single tag.
Congratulations! Today, we practiced basic coding using the free coding program "Visual Studio Code" and its extension app, "Live Server." How is it? It's really fun, right? In the next post, we will create a web browser one more time based on what we covered today. See you next time.
NEXT POST ➤ Creating a WebPage Using HTML Tags (feat. h1-h6, p, br, hr, div tags)
Posted by Ayul
