鱼C论坛

 找回密码
 立即注册
查看: 6902|回复: 18

[技术交流] <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休闲室

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

我们增加了两个指向新页面的链接,一个指向饮料列表,一个指向位置说明
IMG_20150704_204626.jpg
当我们点击"这里供应的饮料"时显示的页面
IMG_20150704_204614.jpg
按下返回键,当我们点击"这里"时显示的页面
IMG_20150704_204602.jpg


改进鱼C休闲室

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



第一步

1. 获取源文件
课件下载: 原版休闲室.zip (34.98 KB, 下载次数: 162)
这是课件里的文件结构,休闲室还没有被改进过。
休闲室.png

第二步

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来指定图片的文件来源


属性的写法
IMG_20150705_125835.jpg


小练习

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


评分

参与人数 1荣誉 +5 鱼币 +5 贡献 +5 收起 理由
小人 + 5 + 5 + 5 热爱鱼C^_^

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2015-7-5 14:04:39 | 显示全部楼层
写的字 有点 看不出是什么   讲得很详细  
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2015-7-5 15:01:14 | 显示全部楼层
建议用百度脑图做思维导向
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2015-7-5 15:10:22 | 显示全部楼层
小人 发表于 2015-7-5 14:04
写的字 有点 看不出是什么   讲得很详细

说明你没有下载课件。。。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2015-7-6 19:20:19 | 显示全部楼层
你确定饮料是给人喝的- -。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2015-7-8 09:00:01 | 显示全部楼层
对于不懂html的人,还是一目了然的!大赞!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2015-7-20 20:59:47 | 显示全部楼层
刷点鱼币 只为下载 路过
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2015-8-24 15:40:53 | 显示全部楼层
刷点鱼币
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2015-9-29 18:03:21 | 显示全部楼层
好评~~~~讲HTML讲的很适合入门
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2015-9-29 18:04:43 | 显示全部楼层
好久没回来了- -,赞赞赞
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2015-9-29 19:11:06 | 显示全部楼层
这饮料 肯定太好喝了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2016-2-23 00:13:08 | 显示全部楼层
讲HTML讲的很适合入门
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2016-6-20 00:36:19 | 显示全部楼层
跟进
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2016-6-21 23:35:26 | 显示全部楼层
下一课005的链接有问题,回到本页面了。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2016-7-18 09:00:35 | 显示全部楼层
望注意,此页的链接到下一课有问题,没有正确连接到下一课
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2016-11-22 09:49:10 | 显示全部楼层
楼主是不是学化学的,饮料喝的恰到好处
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2016-11-24 15:30:08 | 显示全部楼层
这么好的东西当然要支持收下了感谢分享
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2016-12-6 08:44:13 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-3-20 20:52:37 | 显示全部楼层
Hi,Web开发子论坛里, <004>认识超文本,转向下一节的<005>组织你的网站,点开又到了<004>认识超文本 页面
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-11-25 05:08

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表