<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Unlock the Power of Online Learning</h1>
<p>Master 1000+ Tools & Technologies.</p>
<img src="C:\Users\Demo2\Desktop\HTML\webimage.PNG">
<ul>
<li>Python</li>
<li>Artificial Intelligence</li>
<li>Java</li>
</ul>
<a href="https://www.educba.com">View All 1000 Skills</a>
</body>
</html>
登录后复制
第 4 步：保存 HTML 文件
使用 .html 扩展名 将文件保存在您之前创建的文件夹中。
为您的文件选择一个描述性名称，例如我的网页.html（通常用作网站的主页）。
第 5 步：查看您的网页
在 Chrome、Firefox 或 Safari 等网络浏览器中打开 HTML 文件。
您应该会在浏览器中看到以下网页，显示我们添加的内容。
输出：
第 6 步：继续增强您的网页
探索其他 HTML 标签和属性，以进一步增强网页的结构和设计。
学习 CSS（层叠样式表）来设计您的网页并使其具有视觉吸引力。
尝试更高级的 HTML 功能，例如表单、表格和多媒体元素。
网页设计的 HTML 标签和元素
这里列出了对于 HTML 网页设计至关重要的基本 HTML 标签和元素。
HTML Tag/Element
Purpose
to
Define different levels of headings
Define paragraphs of text
Create line breaks
Create an ordered list
Create an unordered list
Define items within a list
Create hyperlinks
Insert images
Create structured tabular data
Define the table header section
Define the table body section
Define the table footer section
Define a table row
Define a table data cell
Create input forms
Create different types of form input fields
Create a dropdown menu for selecting options
Define individual options within a dropdown menu
Define the header section of a web page
Define the navigation section of a web page
Define a generic section within a web page
Define an independent, self-contained content within a page
Define content that is tangentially related to the main page
Define the footer section of a web page
Examples of Design Web Pages in HTML
Let’s create some web pages to see the resultant web page.
Example #1: Travel Webpage
Here, we will create an amazing travel webpage showcasing places to visit in Switzerland. We will set one background image and add some text using HTML Code and Styling.
In this instance, we will design a simple game where users have to guess the number generated by the system.
<!DOCTYPE html>
<html>
<head>
<title>Guessing Game</title>
<style>
body {
text-align: center;
padding-top: 100px;
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
h1 {
color: #333333;
}
p {
color: #666666;
}
input {
padding: 10px;
font-size: 16px;
border-radius: 4px;
border: 1px solid #cccccc;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border-radius: 4px;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
#result {
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Guessing Game</h1>
<p>Guess a number between 1 and 10:</p>
<input type="number" id="guess" min="1" max="10">
<button onclick="checkGuess()">Submit</button>
<p id="result"></p>
<script>
function checkGuess() {
var guess = parseInt(document.getElementById("guess").value);
var randomNumber = Math.floor(Math.random() * 10) + 1;
if (guess === randomNumber) {
document.getElementById("result").innerHTML = "Congratulations! You guessed the correct number.";
} else {
document.getElementById("result").innerHTML = "Wrong guess. The correct number was " + randomNumber + ".";
}
}
</script>
</body>
</html>
登录后复制
Output:
Conclusion
From all the above discussion, we can say that Web pages are created by using HTML code in a very simplified manner. Just simply put your HTML code in any one editor, save it with the .html extension, and open it within any browser.
