<004>认识超文本
本帖最后由 戴宇轩 于 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. 获取源文件
课件下载:
这是课件里的文件结构，休闲室还没有被改进过。
第二步
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来指定图片的文件来源
属性的写法
小练习
想一想休闲室的规模在扩大，你觉得把所有文件放在一个目录下能很好地管理网站吗?你有什么办法?尝试组织这个网站，让网站更有秩序!
课件下载:
下一课
<005>组织你的网站 写的字 有点 看不出是什么 讲得很详细 建议用百度脑图做思维导向 小人 发表于 2015-7-5 14:04
写的字 有点 看不出是什么 讲得很详细
说明你没有下载课件。。。 {:9_219:}你确定饮料是给人喝的- -。 对于不懂html的人，还是一目了然的！大赞！ 刷点鱼币 只为下载 路过 刷点鱼币 好评~~~~讲HTML讲的很适合入门 好久没回来了- -，赞赞赞 这饮料 肯定太好喝了{:5_107:} 讲HTML讲的很适合入门 跟进 下一课005的链接有问题，回到本页面了。 望注意，此页的链接到下一课有问题，没有正确连接到下一课 楼主是不是学化学的，饮料喝的恰到好处 这么好的东西当然要支持收下了感谢分享 {:10_256:} Hi，Web开发子论坛里， <004>认识超文本，转向下一节的<005>组织你的网站，点开又到了<004>认识超文本 页面
页:
[1]