Creating a Web Page using HTML Tags
(feat. h1- h6, p, br, hr, div tags)
Today's Contents:
• Creating a Web Page using HTML tags
Hi, Radiant Guys! How is everyone doing? I have suffered from a very bad cold for the past two weeks. Fortunately, I have now recovered a lot and started blogging again. Everyone, please be careful not to catch a cold.
In my last post, I created a simple web page using basic coding language on Visual Studio Code. Today, I will create another web page based on what we learned last time. Even if you lack coding knowledge, just follow me, then you would see a great web page completed. Well, then, let's get started.
| <html> <head> <body> <title> tags
⎖ Creating a New Folder & a New File
• Firstly, create a folder titled "testHTML" on the desktop.
• Open "Visual Studio Code." (If you need to install it, see my blogger "HTML: 3. What Program Do I Need to Start Coding?" explore more)
• Click the "File" from the menu bar at the top of the Visual Studio Code editor.
• From the collapsible menu of the "File", select "Open Folder" and choose the folder "testHTML" that you've just created. The selected folder will then be brought to the upper left corner of the editor.
• Right-click in the blank space below where the folder "testHTML" appears and click "New File" to create a new file.
• Put the file name as "'Tags.html in the blank with a proper path for saving.
• Then the file "Tags.html" will open on the right.
⎖ <!DOCTYPE html> <html> tag
• Now let's declare that we want to open the HTML 5 version with <!DOCTYPE html>. All HTML documents must start with a <!DOCTYPE> declaration. This is not an HTML tag. This tells the browser what type of document to expect.
• Then enter a pair of <html> </html> after a line break. The <html> tag represents the root of an HTML document.
⎖ <head> <body> <title> tags
• Insert <head> </head> tags and <body> </body> tags between the <html> </html> tags as shown in the image1 below. The <head> element is a container for metadata. The <body> tag defines the document's body.
<head> </head>
<body> </body>
• Enter <title> </title> tags between the <head> tags. The <title> tag defines the document's title.
<title> </title>
• Write the title that will appear at the top of the web page between <title> tags as follows: Basic HTML Tags
• After a line break, put <meta charset="utf-8">.
π― TIP
UTF-8 (Unicode Transformation Format - 8 bit) is a way to encode text characters so that they can be understood and displayed by computers worldwide. It uses 8 bits (1 byte) to represent characters, but it can expand to use more bytes if needed.
This allows it to represent all characters from all languages, symbols, and emojis, making it very versatile. It is widely used because it is efficient and compatible with most systems.
| <h1> to <h6> tags
• Put <h1> </h1> tags between the <body> tags. Heading tags are used from <h1> to <h6>.
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>
• Then put "Creating a Web Page using HTML Tags" between the <h1> and </h1> tags. As the number of <h1> tag increases, the font thickness and size decrease. Therefore, the <h1> tag is very useful for displaying the most important titles, logos, etc.
 |
| [Image1. Using Basic HTML Tags to creat a web page] |
 |
| [Image2. An example of h1 to h6 tags] |
| <p> <br> <hr> <div> tags
⎖ <p> tag
The <p> tag defines a paragraph. It is expressed as shown in the image3 below.
<p> </p>
⎖ <br> tag
The <br> tag inserts a single line break. This is an empty tag which means it has no end tag. Tags without an end tag can also be written with a slash after the tag name (e.g. <br/>).
<br> or <br/>
⎖ <hr> tag
The <hr> element appears as a horizontal rule on an HTML page to signal a change in topic. This tag is an empty tag which means it has no end tag. Tags without an end tag can also be written with a slash after the tag name (e.g. <hr/>).
<hr> or <hr/>
⎖ <div> tag
The <div> tag defines a division in an HTML page. Titles, paragraphs, and images can be inserted inside the content divided by the <div> tag.
<div> </div>
 |
| [Image3. An example of using basic HTML tags on editor] |
 |
| [Image4. A web page generated by coding using basic HTML tags] Congratulations! Today, we practiced using basic HTML tags on the free coding program "Visual Studio Code" and its extension app, "Live Server" to confirm the output of coding. How is it? It's really excited, right? In the next post, we will practice using <span> tag. See you next time. NEXT POST ➤ How I Use the span tag (feat. step-by-step tutorial) Posted by Ayul |
