To create a simple webpage you have to have knowledge of basic HTML. HTML (HyperText Markup Language) is the code that is used to structure a web page and its content.
Anatomy of an HTML document.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>My test page</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="My test image" />
</body>
</html>- Document Type Declaration (<!DOCTYPE>): This tells the web browser which version of HTML the document is using.
- HTML element (<html>): This element defines the start and end of the HTML document.
- Head section (<head>): This section contains information about the document, such as the title of the page, metadata, and links to stylesheets and scripts.
- Title element (<title>): This element sets the title of the web page, which appears in the browser’s title bar and in search results.
- Body section (<body>): This section contains the main content of the web page, such as headings, paragraphs, images, links, and other elements.
- Heading elements (<h1> to <h6>): These elements are used to create headings of different levels of importance.
- Paragraph element (<p>): This element is used to create paragraphs of text.
- Anchor element (<a>): This element is used to create links to other web pages or resources.
- Image element (<img>): This element is used to display images on the web page.
- List elements (<ul>, <ol>, <li>): These elements are used to create unordered lists, ordered lists, and list items.
- Div element (<div>): This element is used to group related content together and apply styles to the group as a whole.
Create a simple web page using HTML Example
Use TextEdit plain or Open Sublime Text editor. After coding or before coding you have to save the HTML extension file.
Click->File->Save as->Desktop->HTML->index.html
1. Add the following basic HTML code to create a basic HTML webpage.
<!DOCTYPE html>
<html>
<head>
<title>My Basic HTML Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first HTML page.</p>
</body>
</html>
Output:
This page includes a basic HTML structure with a head section containing a title for the page and a body section with some simple content. The content includes a header (h1) that says “Hello, World!” and a paragraph (p) that says “This is my first HTML page.”
2. Another basic HTML page you can use as a starting point:
<!DOCTYPE html>
<html>
<head>
<title>My Simple Web Page</title>
</head>
<body>
<h1>Welcome to my web page!</h1>
<p>This is my first attempt at creating a web page using HTML.</p>
<p>Here are some things I'm excited to learn:</p>
<ul>
<li>More about HTML</li>
<li>CSS styling</li>
<li>JavaScript programming</li>
</ul>
<p>Thanks for visiting!</p>
</body>
</html>
Output:
Do comment if you have any doubts or suggestions on this Basic HTML topic.
Note: The All HTML Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version