About
In this article we will learning that how we could create a webpage only with the help of HTML. This particular article will also give you a basic working of some of the common HTML tags.
Step1: Creating the folder
Create a new folder on your system to hold your webpage files. Name it something like "MyWebPage". This folder will be the root directory for your webpage.
Step2: Setting up the HTML file
Create a HTML file with .html extension in the editor. I’ll be using Virtual Studio Code as my editor. Give the file a meaningful name like index.html.
Step3: Add the basic HTML structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyWebPage</title>
</head>
<body>
</body>
</html>
Paste the following code in the editor and our system is ready to a create webpage.
NOTE
Shortcut for Step3 which works only in VS Code is:
html:5 and you get the same basic HTML structure written.
HTML doctype declaration tells the browser that this is an HTML document. Followed by the <head> tag which will contain the title which is displayed in the browser’s title bar, and meta data of our webpage. Then comes the <body> tag, which can be divided into many sub parts like the header, main and footer which together forms a webpage.
Step4: Add content to the webpage
Inside the <body> section, you can add various elements which will make up our webpage. It may include a paragraph tag <p>, a heading tag <h1>, inline tags, etc. Let's add a heading followed by paragraph of text to our webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Page</title>
</head>
<body>
<h1>
About Me
</h1>
<p>
Welcome to my About Me page! Here's some information about who I am.
<h3>[your name]</h3>
<h3>[your favourites]</h3>
</p>
</body>
</html>
In the code above, <h1> tag is used to give the heading, while the <h3> tag is used to give subheading. Then, we have used <p> for paragraph.
Step5: Our basic webpage is ready!
Save the changes you made to the "index.html" file. Now, you can open it in a web browser to see your webpage. Simply double-click the "index.html" file, and it should open in your default web browser.
Output
Top comments (0)