怎么用记事本创建简单的网页

我们每天都要使用和浏览网页,它已经成为生活中必不可少的一部分。但是,制作一个网页究竟有多难呢?在这篇文章里,我们会向你介绍如何用记事本程序来编写简单的HTML网页。

方法 1 的 1:

创建属于自己的网页

  1. {"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/3\/32\/Create-a-Simple-Webpage-Using-Notepad-Step-1-Version-2.jpg\/v4-460px-Create-a-Simple-Webpage-Using-Notepad-Step-1-Version-2.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/3\/32\/Create-a-Simple-Webpage-Using-Notepad-Step-1-Version-2.jpg\/v4-728px-Create-a-Simple-Webpage-Using-Notepad-Step-1-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 1 打开记事本程序。所有Windows电脑都会自动安装记事本程序。你可以在“开始”菜单中找到它。打开记事本后,点击“文件”,然后从下拉菜单中选择“另存为”选项。在文件类型菜单中选择“所有文件”。将文件另存为HTML文件。一般来说,一个网站的首页叫做“index.html”,它也是网站的导航页,可以从这个导航页上访问网站的所有内容(它基本包含了网站上所有的链接)。
  2. {"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/e\/ef\/Create-a-Simple-Webpage-Using-Notepad-Step-2-Version-2.jpg\/v4-460px-Create-a-Simple-Webpage-Using-Notepad-Step-2-Version-2.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/e\/ef\/Create-a-Simple-Webpage-Using-Notepad-Step-2-Version-2.jpg\/v4-728px-Create-a-Simple-Webpage-Using-Notepad-Step-2-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 2 HTML(超文本标记语言)使用标签来编写网页。基本上,标签的格式是<尖括号>中带有一些文字。
    你需要使用各种各样的标签来创建网页。代码的末尾还有“结束标签”,如:</text>。这些结束标签就像加粗字体或段落一样。
  3. {"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/8\/85\/Create-a-Simple-Webpage-Using-Notepad-Step-3-Version-2.jpg\/v4-460px-Create-a-Simple-Webpage-Using-Notepad-Step-3-Version-2.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/8\/85\/Create-a-Simple-Webpage-Using-Notepad-Step-3-Version-2.jpg\/v4-728px-Create-a-Simple-Webpage-Using-Notepad-Step-3-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 3 一般来说,网页的第一个标签是:<html> 你可以把它放在记事本文件的顶部。
  4. {"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/7\/73\/Create-a-Simple-Webpage-Using-Notepad-Step-4-Version-2.jpg\/v4-460px-Create-a-Simple-Webpage-Using-Notepad-Step-4-Version-2.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/7\/73\/Create-a-Simple-Webpage-Using-Notepad-Step-4-Version-2.jpg\/v4-728px-Create-a-Simple-Webpage-Using-Notepad-Step-4-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 4 下一个标签是<head>
    这个标签<title>定义了文档的头部,告诉浏览器把什么内容放在窗口的顶部。“元标签”(可选)会告诉搜索引擎(如谷歌)网站的属性和信息。
  5. {"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/7\/70\/Create-a-Simple-Webpage-Using-Notepad-Step-5-Version-2.jpg\/v4-460px-Create-a-Simple-Webpage-Using-Notepad-Step-5-Version-2.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/7\/70\/Create-a-Simple-Webpage-Using-Notepad-Step-5-Version-2.jpg\/v4-728px-Create-a-Simple-Webpage-Using-Notepad-Step-5-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 5 在“head”标签的下一行,放上网站标题,如:<title>wikiHow HTML</title>
  6. {"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/4\/49\/Create-a-Simple-Webpage-Using-Notepad-Step-6-Version-2.jpg\/v4-460px-Create-a-Simple-Webpage-Using-Notepad-Step-6-Version-2.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/4\/49\/Create-a-Simple-Webpage-Using-Notepad-Step-6-Version-2.jpg\/v4-728px-Create-a-Simple-Webpage-Using-Notepad-Step-6-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 6 输入</head>标签,结束网页“头部”的内容。
  7. {"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/4\/4a\/Create-a-Simple-Webpage-Using-Notepad-Step-7-Version-2.jpg\/v4-460px-Create-a-Simple-Webpage-Using-Notepad-Step-7-Version-2.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/4\/4a\/Create-a-Simple-Webpage-Using-Notepad-Step-7-Version-2.jpg\/v4-728px-Create-a-Simple-Webpage-Using-Notepad-Step-7-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 7 接下来就到了<body>标签部分。请注意,浏览器并不能支持所有颜色,如大部分浏览器不支持显示深灰色。
  8. {"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/6\/69\/Create-a-Simple-Webpage-Using-Notepad-Step-8-Version-2.jpg\/v4-460px-Create-a-Simple-Webpage-Using-Notepad-Step-8-Version-2.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/6\/69\/Create-a-Simple-Webpage-Using-Notepad-Step-8-Version-2.jpg\/v4-728px-Create-a-Simple-Webpage-Using-Notepad-Step-8-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 8 在两个“body”标签的中央,添加网页的内容,这里的内容会呈现给浏览的用户。让我们从标题入手。我们选择用大一点的文字来显示标题,在HTML中用<h1><h6>标签来编辑内容,其中<h1>标签里的文字字体最大。在网页的顶部、“body”标签的后面,输入欢迎语,如:<h1>欢迎来到xx网站!</h1>。确保在最后加上结束标签, 否则你的整个页面会变得巨大!
  9. {"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/6\/6f\/Create-a-Simple-Webpage-Using-Notepad-Step-9-Version-2.jpg\/v4-460px-Create-a-Simple-Webpage-Using-Notepad-Step-9-Version-2.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/6\/6f\/Create-a-Simple-Webpage-Using-Notepad-Step-9-Version-2.jpg\/v4-728px-Create-a-Simple-Webpage-Using-Notepad-Step-9-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 9 在网页的正文部分还可以添加<p>标签或段落标签。在标题后方,可以加上<p>网站正文内容

    。如果你想要另起一行,可以使用<br>标签或停顿标签。
  10. {"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/5\/56\/Create-a-Simple-Webpage-Using-Notepad-Step-10-Version-2.jpg\/v4-460px-Create-a-Simple-Webpage-Using-Notepad-Step-10-Version-2.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/5\/56\/Create-a-Simple-Webpage-Using-Notepad-Step-10-Version-2.jpg\/v4-728px-Create-a-Simple-Webpage-Using-Notepad-Step-10-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 10 你可能不希望创建一个纯文本网页,所以请考虑加入不同的格式。<b>代码来加粗文本,用<i>来倾斜文字,用<u>加入下划线。记住,不要忘记结束标签。
  11. {"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/0\/09\/Create-a-Simple-Webpage-Using-Notepad-Step-11-Version-2.jpg\/v4-460px-Create-a-Simple-Webpage-Using-Notepad-Step-11-Version-2.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/0\/09\/Create-a-Simple-Webpage-Using-Notepad-Step-11-Version-2.jpg\/v4-728px-Create-a-Simple-Webpage-Using-Notepad-Step-11-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 11 事实上,让网站内容变得丰富多彩的是各种各样的图片。就算给文字加上很多不同的格式,图片还是比文字更能吸引人们的眼球,带来更多的阅读兴趣。使用<img>标签来加入图片。跟正文标签一样,它还需要更多的信息。图片标签可以像这样编辑:<img alt=dog src="dog.jpg" width=200 height=200>。其中,src(来源)是图片的名字,宽度和高度是图片的宽和高(单位是像素)。
  12. {"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/2\/23\/Create-a-Simple-Webpage-Using-Notepad-Step-12-Version-2.jpg\/v4-460px-Create-a-Simple-Webpage-Using-Notepad-Step-12-Version-2.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/2\/23\/Create-a-Simple-Webpage-Using-Notepad-Step-12-Version-2.jpg\/v4-728px-Create-a-Simple-Webpage-Using-Notepad-Step-12-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 12 快完成啦!你可能希望网站的访客能看到不止一个网页。你可以通过创建链接来丰富网站内容。例如,使用:<a href="otherpage.html">Another page</a>代码创建链接。标签之间的文字是到达另一个网页的链接名称,“href”部分则是链接到的目的网页。创建网页链接可以提高用户浏览效率。
  13. {"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/3\/36\/Create-a-Simple-Webpage-Using-Notepad-Step-13-Version-2.jpg\/v4-460px-Create-a-Simple-Webpage-Using-Notepad-Step-13-Version-2.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/3\/36\/Create-a-Simple-Webpage-Using-Notepad-Step-13-Version-2.jpg\/v4-728px-Create-a-Simple-Webpage-Using-Notepad-Step-13-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 13 最后,在正文部分的末尾加上</body>,整个网页的末尾加上</html>
  14. {"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/f\/fd\/Create-a-Simple-Webpage-Using-Notepad-Step-14-Version-2.jpg\/v4-460px-Create-a-Simple-Webpage-Using-Notepad-Step-14-Version-2.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/f\/fd\/Create-a-Simple-Webpage-Using-Notepad-Step-14-Version-2.jpg\/v4-728px-Create-a-Simple-Webpage-Using-Notepad-Step-14-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 14 保存文件,将文件保存成“.html”格式。然后在常用的浏览器中打开.html文件,看看网站是什么样子的。祝贺你!你已经创建好一个网页了。
  15. {"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/1\/15\/Create-a-Simple-Webpage-Using-Notepad-Step-15-Version-2.jpg\/v4-460px-Create-a-Simple-Webpage-Using-Notepad-Step-15-Version-2.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/1\/15\/Create-a-Simple-Webpage-Using-Notepad-Step-15-Version-2.jpg\/v4-728px-Create-a-Simple-Webpage-Using-Notepad-Step-15-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 15 如果你想要把网页放到网站上,可以查看如何在自己的域名上发布网站。

小提示

  • 要记得添加结束标签。
  • 你可以在网络上搜索更多标签。网络上有很多不错的网站可以指导你创建网页。其中,W3Schools网站就很不错。
  • 在第一行、第一个<HTML>标签前,输入<!DOCTYPE html>。它会告诉浏览器,你的网页属性是HTML5。
  • 你可以在<html>的前面、</html>的后面输入<font face="N"></font>,来更改字体。用一种字体来代替其中的“N”,如:“Verdana”。
  • 如果想在网页上使用尖括号,请使用< 和 > 。符号是&amp。
  • 根据HTML教程,用小写字母(不带空格和标点符号)来命名网页文件夹和文件。尽管Windows系统允许你使用空格,但是许多网站服务器都不允许出现空格。规范命名文件将给你省去很多麻烦、节约大量时间。

<<:  怎么不通过中介买房

>>:  怎么焯芦笋

怎么辨认狼蛛

跟我们普遍认识的蜘蛛不一样,狼蛛并不依靠结网捕食。狼蛛之所以得此大名,是因为它们通过追踪潜伏捕食猎物...

怎么烹饪鳕鱼排

鳕鱼是最受欢迎的白色鱼种,它的肉质丰富并包含很少的骨头。它是可以被用于多种烹饪方法的万能鱼,包括煎,...

怎么做到无痛挤痘

不管你有多么心急,都不应该在青春痘生成的初期就把它们挤掉。如果痘痘还没成熟,挤压的时候不仅会很疼,你...

怎么彻底忘掉一个人

我们都曾有过这样的经历:即使已经与对方桥归桥路归路,但那人还总是在脑海中挥散不去。在和某人分手或断交...

怎么治疗甲癣

甲癣,临床上被称为‘甲真菌症’。70岁的人有一半都患过甲癣。患甲癣是一件很尴尬的事情。脚趾会裂开,甚...