<004>认识超文本

戴宇轩 · 发表于 2015-7-5 13:01:15

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由戴宇轩于 2015-7-8 10:26 编辑

上一课答案
<html>   <head> <title>Mission</title> <style type="text/css">    body {       background-color: #d7d2be;       margin-left: 20%;       margin-right: 20%;       border: 1px dotted black;       padding: 10px 10px 10px 10px;       font-family: sans-serif;    } </style>   </head>   <body> <h1>宗旨</h1> <p>鱼C工作室致力于完全免费编程视频教学,主要推出的课程有零基础入门学习C语言,零基础入门学习汇编语言,Win32汇编语言,零基础入门学习Delphi,零基础入门学习Python,Windows程序设计,SDK编程,解密系列,OD使用教程,密码学</p>   </body> </html>
在001 ~ 003课中，我们简单认识了HTML，用它描述网页的结构。现在我们再来了解HTML的"HT"------超文本，有了它，我们就能把各个页面联系起来。
我们还会了解一个强大的元素------<a>。好了，我们要开始学习超文本了！

改进后的鱼C休闲室

还记得我们的休闲室吧?那是个不错的网站，如果用户能看到饮料的列表就好了。甚至，我们还可以加一些位置说明，让他们能知道休闲室的位置。

我们增加了两个指向新页面的链接，一个指向饮料列表，一个指向位置说明

当我们点击"这里供应的饮料"时显示的页面

按下返回键，当我们点击"这里"时显示的页面

改进鱼C休闲室

创建这个全新的休闲室只要3步……

1. 我们已经创建好了原版的休闲室，在课件中找到这些文件。
2. 编辑index.html和directions.html
3. 最后测试这个页面，看看是否工作正常。然后我们再看看这是如何工作的

第一步

1. 获取源文件
课件下载: 原版休闲室.zip (34.98 KB, 下载次数: 162)

2015-7-4 20:56 上传
点击文件名下载附件

这是课件里的文件结构，休闲室还没有被改进过。

第二步

2. 编辑index.html
黄色背景表示增加的内容
<html>
  <head>
<title>鱼C休闲室</title>
  </head>
  <body>
<h1>欢迎来到改进后的鱼C休闲室!</h1>
<img src="drinks.gif">
<p>写了一整天代码，一身疲倦?来休闲室喝杯饮料吧!</p>
<p>看看<a href="elixir.html">这里供应的饮料</a>!</p>
<h1>我们的位置</h1>
<p>想找到我们?点击<a href="directions.html">这里</a>查看我们的位置</p>
  </body>
</html>

第三步

3. 保存index.html，再做个测试

我们做了什么?

<a>链接文字</a>
1. 我们用一对a元素包围了链接文字，在浏览器中，超链接文本会带有下划线，指示这是可单击的。

<a href="目标文件">链接文字</a>
2. 有了链接文本，就可以用href属性告诉浏览器这个链接指向哪个文件。

了解属性

利用属性，我们可以制定一个元素的附加信息，我们之前也见过几个例子:
<style type="text/css">
用type来指定用哪一种样式
<a href="elixir.html">
用href来指定超文本链接的目标文件
<img src="drinks.gif">
用src来指定图片的文件来源

属性的写法

小练习

想一想
休闲室的规模在扩大，你觉得把所有文件放在一个目录下能很好地管理网站吗?你有什么办法?
尝试组织这个网站，让网站更有秩序!
课件下载: 带有超链接的休闲室.zip (35.03 KB, 下载次数: 123)

2015-7-5 12:52 上传
点击文件名下载附件

下一课
<005>组织你的网站

小人 · 发表于 2015-7-5 14:04:39

写的字有点看不出是什么讲得很详细

黑夜 · 发表于 2015-7-5 15:01:14

建议用百度脑图做思维导向

戴宇轩 · 发表于 2015-7-5 15:10:22

小人发表于 2015-7-5 14:04
写的字有点看不出是什么讲得很详细

说明你没有下载课件。。。

wei_Y · 发表于 2015-7-6 19:20:19

你确定饮料是给人喝的- -。

煈愛 · 发表于 2015-7-8 09:00:01

对于不懂html的人，还是一目了然的！大赞！

哥哥123 · 发表于 2015-7-20 20:59:47

刷点鱼币只为下载路过

羊圈圈 · 发表于 2015-8-24 15:40:53

刷点鱼币

DeV丶莫问 · 发表于 2015-9-29 18:03:21

好评~~~~讲HTML讲的很适合入门

DeV丶莫问 · 发表于 2015-9-29 18:04:43

好久没回来了- -，赞赞赞

黑龍 · 发表于 2015-9-29 19:11:06

这饮料肯定太好喝了

爱你没错 · 发表于 2016-2-23 00:13:08

讲HTML讲的很适合入门

乌托邦_遥远的 · 发表于 2016-6-20 00:36:19

跟进

JANGOC · 发表于 2016-6-21 23:35:26

下一课005的链接有问题，回到本页面了。

zhuxiaoxi · 发表于 2016-7-18 09:00:35

望注意，此页的链接到下一课有问题，没有正确连接到下一课

梅兰竹菊 · 发表于 2016-11-22 09:49:10

楼主是不是学化学的，饮料喝的恰到好处

fcow · 发表于 2016-11-24 15:30:08

这么好的东西当然要支持收下了感谢分享

流月飞星 · 发表于 2016-12-6 08:44:13

xuanmao · 发表于 2017-3-20 20:52:37

Hi，Web开发子论坛里， <004>认识超文本，转向下一节的<005>组织你的网站，点开又到了<004>认识超文本页面

[技术交流] <004>认识超文本

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐:

账号		自动登录	找回密码
密码			立即注册