web程序设计(1)——制作个人静态网页

实验要求

模仿 http://ccs.scu.edu.cn/jscc/201610/84.html创建一个个人主页,要求:
有照片;
有表格;
有列表;
有超级链接

实验目的

熟悉掌握html的标签使用(添加图片,表格,列表和超链接等)

实验内容

  1. 打开visual studio core,创建一个文件夹。在文件夹中增添html文件,记得加上后缀名.html
    在这里插入图片描述

  2. 打出‘!’+tab键,使用emmet插件进行自动补齐

  3. 写'title'标签,命名网页名;在body中写段落,注意使用换行标签‘br’

  4. 插入图片'img\',注意附上图片的路径,为方便可把图片和代码放在同一文件夹下,如下示例:

>
>朱砂痣的个人主页>idle>

>>Character>>>Dr. Linghe Kong  >孔令和>>Research Professor (特别研究员)>Ph.D. Advisor (博士生导师)>>Department of Computer Science and Engineering (计算机科学与工程)>Shanghai Jiao Tong University (上海交通大学)>>Office:> Rm. 3-522, SEIEE Building, No. 800, Dongchuan Road, Shanghai, 200240>Phone: >021-34208292>> Email: >linghe.kong [AT] sjtu.edu.cn>>Homepage:>:blue;"> http://www.cs.sjtu.edu.cn/~linghe.kong/>>>

5.写自定义列表'dl',如下示例:

-size:25px;">>>专业>>>- 计算机>>>家乡>>>- 广东广州>>> 成就>>>- 一事无成>>>
专业
- 计算机
家乡
- 广东广州
成就
- 一事无成

6. 写表格'table',注意表头'th',单元格'td'的使用,加上'caption'标注表格名称,如下示例:
>>成绩表>>>科目>>信安>>离散>>数电>>数构>>大物>>大英>>体育>>>>成绩>>100>>100>>100>>100>>100>>100>>100>>>
成绩表
科目信安离散数电数构大物大英体育
成绩100100100100100100100
7. 插入超链接——课程中心,川大教务处,PPT的个人主页模板, 如下示例:
://cc.scu.edu.cn/G2S/Showsystem/CourseDetail.aspx?fCourseID=36225&OrgID=165" target="_blank">-size:25px;">课程中心>>>://jwc.scu.edu.cn/" target="_blank">-size:25px;">教务处>>>
://wirelesslab.sjtu.edu.cn/~klh/#stu" target="_blank">个人主页模板

课程中心

教务处

个人主页模板
8. 为了使页面看来更有条理,插入小标题来分类内容——‘Character’,’ Information’,’Grade’,’Link’,如:

-size:40px;color: greenyellow">Character>>

Character

10. 美化页面,比如修改主页背景颜色,调整字体大小,字体颜色,调整照片大小等

实验效果

在这里插入图片描述
在这里插入图片描述

实验完整代码

<!DOCTYPE html>://www.w3.org/1999/xhtml">
>-8" />>我的网页>
>
>>朱砂痣的个人主页>idle>-size:25px;">-size:40px;color: greenyellow">Character>>-size:30px;">Dr. Linghe Kong  >孔令和>>Research Professor (特别研究员)>Ph.D. Advisor (博士生导师)>>Department of Computer Science and Engineering (计算机科学与工程)>Shanghai Jiao Tong University (上海交通大学)>>Office:> Rm. 3-522, SEIEE Building, No. 800, Dongchuan Road, Shanghai, 200240>Phone: >021-34208292>> Email: >linghe.kong [AT] sjtu.edu.cn>>Homepage:>:blue;"> http://www.cs.sjtu.edu.cn/~linghe.kong/>>>>-size:40px;color: greenyellow">Information>>-size:25px;">>>专业>>>- 计算机>>>家乡>>>- 广东广州>>> 成就>>>- 一事无成>>-size:40px;color: greenyellow">Grade>>> -size:25px;" >>成绩表>>>科目>>信安>>离散>>数电>>数构>>大物>>大英>>体育>>>>成绩>>100>>100>>100>>100>>100>>100>>100>>>>-size:40px;color: greenyellow">Link>>>://cc.scu.edu.cn/G2S/Showsystem/CourseDetail.aspx?fCourseID=36225&OrgID=165" target="_blank">-size:25px;">课程中心>>>://jwc.scu.edu.cn/" target="_blank">-size:25px;">教务处>>>://wirelesslab.sjtu.edu.cn/~klh/#stu" target="_blank">个人主页模板
>
>                        


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章