第4课:制作自己的第一个网站

学完前几节课,现在只需再花几分钟时间,你就能学会如何制作自己的第一个网站了。

如何做呢?

通过第一课,我们知道制作一个网页需要有浏览器和记事本程序(或者类似的文本编辑器)。
请打开记事本程序(Notepad):依次选择“开始菜单→程序→附件→记事本”即可。 如何找到记事本

然后呢?

我们先从简单的做起吧。先试着做一个显示如下内容的网页:“哇!这是我的第一个网站。

”继续学习,你就知道这是多么容易了。
你首先要做的是告诉浏览器,你将采用HTML语言来“对话”。这是通过<html>标签来实现的(这是容易理解的)。所以,在做

所有其他事之前,先在记事本的第一行敲入“<html>”。
也许你记得前面课程中我们说过,这里的<html>是首标签,在HTML文档结尾处必须有相应的尾标签与之对应。好的,为了防止

最后忘记写这个尾标签,我们现在就输入“</html>”,然后在<html>和</html>之间留些空行,用于书写其余代

码。
下面,我们需要为HTML文档写一个“头部(head)”,它提供关于当前文档的信息;然后写一个“主体(body)”,它提供文档的内

容。HTML最重要的就是简单——在这里,我们只需把头部(<head>和</head>)放到主体(<body>和</body>

)的前面就行了。
如下所示:

<html>  
    <head>  </head>  
    <body>  </body>
</html>

用换行(用Enter键)与缩进(用Tab键)令代码具有层次感。理论上,你如何书写HTML文档,这无关紧要。但为了便于阅读代码,和

保持良好的概貌,我们强烈建议你采用换行与缩进来层次化HTML代码,就像上面的例子一样。
上面这个文档便构成了你的第一个网站——它只包含一个网页,而且内容很单调,可能与你的想象相去甚远,但在一定程度上它仍是

一个网站。你可以将它用作其他HTML文档的基本模版。

不错不错,但我如何添加更多内容?

前面我们学到过,HTML文档有两个部分:头部(head)和主体(body)。你在头部(head)提供关于网页的信息,你在主体

(body)部分提供网页的具体内容。
比如,如果你要指定HTML文档的网页标题(title)(它将显示在浏览器窗口顶部),你就要在头部(head)提供有关信息。用title

元素来指定网页标题:即在首标签<title>与尾标签</title>之间写上网页标题:

<title>我的第一个网站</title>

注意,网页标题(title)不是显示在网页里,而是显示在浏览器窗口的标题栏上的。网页里显示的所有内容都必须放在body元素里。
比如,我们要在网页里显示“哇!这是我的第一个网站。”这行文字,它属于主体(body)部分,所以我们在body元素里输入:

<p>哇!这是我的第一个网站。</p>

标签<p>里的p是“段落(paragraph)”的意思,也就是一个文本段落。
现在,你的HTML文档应该是这样:

</html>
    <head>
        <title>我的第一个网站</title>
    </head>
    <body>
        <p>哇!这是我的第一个网站。</p>
    </body>
</html>

搞定! 你已经完成了自己第一个真正的网站(尽管它只包含一个网页)!
接着,你需要将它保存到你的硬盘上,然后在浏览器中打开它:

  • 在记事本的“文件”菜单下选择“另存为…”。
  • 这时会弹出一个对话框,在“保存类型”右边的下拉菜单里选择“所有文件”。这一点很重要——否则,它将被保存为文本文档,而不是HTML文档。
  • 现在将这个文档保存为“page1.htm”(后缀名“htm”表明它是一个HTML文档。后缀名用“html”也可以,但我比较习惯使用“htm”,你可以根据自己的喜好选用二者中的任一个)。将HTML文档保存在硬盘上的哪个文件夹无关紧要——只要你记得保存位置,并能再次找到它就行。

保存文档

现在打开浏览器,这时,浏览器中应显示 “哇!这是我的第一个网站。”。
恭喜!如果你迫切希望自己的杰作能被全世界看到,你可以先去第14课学习一下如何把自己的网页上传到因特网(Internet)上。如果你不着急的话,那么请继续往下学习。乐趣才刚刚开始。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/497.html

(7)
上一篇 2018年1月20日 下午3:26
下一篇 2018年1月20日 下午3:47

99%的人还看了以下文章

  • CSS 实现水平、垂直居中布局代码大全

    CSS实现水平居中 若是行内元素,则直接给其父元素设置text-align: center即可 若是块级元素,则直接给该元素设置margin: 0 auto即可 若子元素包含浮动元素,则给父元素设置width:fit-content并且配合margin .parent { width: -webkit-fit-content; width: -moz-fit…

    2019年11月26日
    2.4K0
  • 第7课:HTML标签的属性

    许多元素都可以设置属性。 属性是什么? HTML通过标签告诉浏览器如何展示网页(比如告诉浏览器显示一个换行)。你可以为某些元素附加一些信息,这些附加信息被称为属性(attribute)。例1: <h2 style=”background-color: #ff0000;”>上125jz.com学网页制作</h2> 属性应写在元素的首标签…

    2018年1月20日
    2.0K0
  • 网页制作常用正则表达式大全、正则表达式在线测试工具

    正则表达式,用一段非常简短的表达式语句,便能够快速实现一个非常复杂的业务逻辑。正则表达式经常被用于字段或任意字符串的校验。熟练地掌握正则表达式的话,能够使你的开发效率得到极大的提升。 正则表达式在线测试工具 regex101是一个非常不错的正则表达式在线测试工具,你可以直接在线测试你的正则表达式。 网页制作常用正则表达式 1 用户名正则 //用户名正则,4到…

    2018年9月12日
    2.9K0
  • 纯CSS制作热门文章排行,且前3名背景不同

    要制作文章排行前10、或评论排行榜1、2、3、4…,还要给前三名加上不同的背景,可以用纯css实现(用Ol,li),但通常网页制作中使用ul的比较多,因为不同浏览器对ol li有序列表默认自带的序号列表有着不同显示,容易引起浏览器兼容问题,所以遇到这样的有序排版布局,最简单是将序号切成背景图片! 使用ul li实现文章排行有序排版布局。   htm…

    2018年7月14日
    2.9K0
  • 第8课:如何做各种超链接?

    在这一课,你将学习如何在网页之间做超链接。 如何做超链接? 做链接只需一个元素<a>和一个属性href就行了。下面是一个例子,它是一个指向www.125jz.com的链接: 例1: <a href=”http://www.125jz.com/”>指向www.125jz.com的链接</a> 该例在浏览器中将显示如下: 指向…

    2018年1月20日
    2.5K0
  • 太赞了!推荐2个多彩渐变配色网站

    1、根据心情和情绪生成的渐变色 https://gradienmood.posandu.me/ 色彩是拥有情绪的,但是有情绪的色彩有不一定仅仅只有一种颜色。这个名为 Gradien Mood 的渐变色网站会将不同感觉和渐变色搜集起来,其中有的渐变色甚至拥有极为复杂的情绪,而你需要做的,就是输入你想传递的情绪,然后就能搜到相关的情绪和色彩,包括渐变的 CSS …

    2023年1月18日
    9470

发表回复

登录后才能评论