Unit 9
Basic Steps to Create a Simple Web Design Using HTML
1. Prepare Your Tools
Install a text editor (e.g., Notepad, Notepad++, VS Code, Sublime
Text).
Have a web browser (Chrome, Firefox, Edge, etc.) ready for
testing.
2. Create Your Project Folder
Make a folder on your computer, e.g., my-website.
This will store your HTML file and other assets like images or CSS.
3. Start a New HTML File
Open your text editor and create a new file.
Save it in your folder as [Link] (this is the default homepage
name).
4. Add Basic HTML Structure
Type the basic HTML boilerplate:
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
* tells the browser which character encoding to use when reading your
web page.
Breaking it down
<meta> → a tag for metadata (information about the document,
not shown directly on the page).
charset → short for character set, it defines how characters are
represented in bytes.
UTF-8 → a universal encoding that can represent almost every
character from every language (letters, numbers, symbols, emojis,
etc.).
Why it matters
If you don’t specify a charset:
1
Unit 9
Browsers may guess incorrectly.
Special characters like é, ©, or 😊 might show up as weird symbols
(� or other junk).
Multilingual pages may break.
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first paragraph in HTML!</p>
</body>
</html>
5. Add More Content
Use HTML tags to add content:
Headings: <h1> to <h6>
Paragraphs: <p>
Images: <img src="[Link]" alt="Description">
Links: <a href="[Link] here</a>
Example:
html
<h2>About Me</h2>
<p>I am learning how to build a simple web page using HTML.</p>
<img src="[Link]" alt="My photo" width="200">
<a href="[Link] Google</a>
6. Add Some Style (Optional)
You can add basic CSS styling inside the <head> section:
<style>
body {
2
Unit 9
font-family: Arial, sans-serif;
background-color: #f0f0f0;
text-align: center;
}
h1 {
color: navy;
}
</style>
7. Save and View Your Page
Save the file (Ctrl + S).
Open the [Link] file in your browser by double-clicking it.
8. Edit and Refresh
Make changes in your text editor.
Save the file and refresh your browser to see updates.
Parts of the HTML Structure
1. <!DOCTYPE html>
Definition: This declaration tells the browser that the document is
an HTML5 file.
Explanation: It is not an HTML tag but an instruction to ensure the
page is rendered correctly.
Example:
<!DOCTYPE html>
2. <html> … </html>
Definition: The root element that contains all the HTML code for
the page.
Explanation: Everything in your webpage is written inside this tag.
Example:
<html>
<!-- All page content goes here -->
3
Unit 9
</html>
3. <head> … </head>
Definition: The section that contains metadata (data about the
webpage) and resources.
Explanation: Includes the page title, character encoding, CSS
styles, scripts, and more. This content is not shown directly on the
webpage.
Example:
<head>
<meta charset="UTF-8">
<title>My First Webpage</title>
</head>
4. <title> … </title>
Definition: Sets the title of the webpage shown in the browser tab.
Example:
<title>My First Webpage</title>
5. <body> … </body>
Definition: Contains all the visible content of the webpage (text,
images, links, etc.).
Explanation: Everything inside <body> is displayed in the browser
window.
Example:
<body>
<h1>Welcome to My Website</h1>
<p>This is my first paragraph.</p>
</body>
6. Headings (<h1> to <h6>)
Definition: Headings define titles and subtitles, with <h1> being
the largest and <h6> the smallest.
Example:
<h1>Main Title</h1>
4
Unit 9
<h2>Section Title</h2>
<h3>Subsection</h3>
7. Paragraphs (<p>)
Definition: Used to display blocks of text.
Example:
<p>This is a paragraph of text.</p>
8. Links (<a>)
Definition: Used to create hyperlinks to other pages or websites.
Example:
<a href="[Link] Google</a>
9. Images (<img>)
Definition: Used to insert images into a webpage.
Explanation: The src attribute specifies the image file, and alt
provides alternative text.
Example:
<img src="[Link]" alt="A sample photo" width="200">
10. Lists (<ul>, <ol>, <li>)
Definition:
o <ul>: Unordered (bulleted) list.
o <ol>: Ordered (numbered) list.
o <li>: List item inside either type of list.
Example:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
5
Unit 9
How to Run an HTML Program
1. Write Your HTML Code
Open a text editor like Notepad (Windows), TextEdit (Mac in plain
text mode), or VS Code, Sublime Text, etc.
Type your HTML code, for example:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first HTML program.</p>
</body>
</html>
2. Save the File as .html
Click File → Save As.
Name it something like: [Link]
Make sure the Save as type is set to “All Files” (in Notepad) and
Encoding is UTF-8.
3. Locate the File on Your Computer
Go to the folder where you saved [Link].
4. Open in a Web Browser
Method 1: Double-click the file — it will open in your default
browser.
Method 2: Right-click the file → Open With → choose Chrome,
Firefox, Edge, or another browser.
5. View the Output
The browser will display your HTML page exactly as you coded it.
6
Unit 9
If you make changes, save the file again and refresh the browser
(F5) to see updates.