求html语言制作一张网页 分上中下三部分,要求有文字,图片,链接。
具体步骤如下:
静态网页现阶段主要采用DIV+CSS+Javascript来实现,
第一步:在桌面上创建一个文本文件;
第二步:将文本名改为"test.html"(扩展名为.html或者.htm即可,看不见扩展名可以到);
第三步:文件名改好后,右击打开方式,选择记事本;
第四步:写代码。
html代码写成下图这样即可:
2.css代码写在下图区域内:
3.javascript代码写在下图区域内:
第五步:在这些代码区域内写上你的代码;
第六步:保存该文本文件;然后右击打开选择一个浏览器打开;如果出现“已限制网页运行脚本。。。”点击允许。
代码如下:
Document
这里输入你想要输入的文字
说先,做一个普通的网页,并且在网页中插入一张图片。
代码入下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
无标题文档
2
那么,如何添加超链接呢?这就要用到标签来完成。
那么,如何给图片添加超链接呢?只要把标签放在和之间就可以了。
而a标签又有一个参数:href.该参数用来指定链接的地址,假设我们要链接到百度。那么更改代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
无标题文档
3
保存后点击该网页。之后,点击网页上图片。看,成功连接到了百度。
4
上诉步骤,有一个要点!
href的值不能使www.baidu.com。否则会出错。必须要写绝对地址;http://www.baidu.com才可以!
END
二.热区链接
上诉时最普通的链接方式,其实要有一种更高级的连接方法。
在HTML中,可以把图片划分为多个热点区域,然后让每一个热点区域分别链接到不同的地方!
厉害吧!
首先看代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
无标题文档
下面来分析代码:
1)
意思是,在该图片中,使用名为mymap的映射图像名称。
2)
意思是,定义热区图像,名称为mymap
3)
意思是,对map的一个热区点进行定义。rect代表矩形,coords代表热区图标,href为需要连接的地址。
OK,剩下的语法都没什么好说的了。
接着,打开网页,可以发现,当把鼠标放在左上角的时候,鼠标会变成“手”的形状。点击,变会进入相应的链接。
当然,下图标的并不太准确,但大概是这么个位置,供参考。
5
这里再补充一点:
shape的取值可以有多个:
1)rect:刚用了,代表矩形,他后面的坐标为4个,前两个为坐上坐标(x,y),后两个为右下坐标
2)circle:圆形的坐标。后面的坐标为3个。前两个为圆形的坐标,最后一个为半径。
当然,还有许多其他的,就不列举了,所谓边越多,则坐标越多,不难理解吧。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HEAND</title>
<style>
#Content{
width:100%;
}
#Heand{
height: 136px;
width:100%;
background-color: #0000FF;
}
#Center{
height: 250px;
width: 100%;
background-color: #CCFFCC;
}
#Bottom{
height: 100px;
width: 100%;
background-color: #00aaaa;
}
</style>
</head>
<body>
<div id="Content">
<div id="Heand"><img src="logo.gif" / ></div>
<div id="Center"><a href="www.baidu.com">baidu</a></div>
<div id="Bottom">bottom</div>
</div>
</body>
</html>
上端部分也就是top menu
"> 连接1 连接2 连接3
html怎么制作网页
1、html文件是最常见的网页文件,所谓HTML是超文本标记语言(HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。2、html文件的编辑非常简单,使用文本编辑器就可以打开,也可以使用editplus,vim,notepad++,ultraEdit 等等编辑工具打开,打开就可以直接看到源码,也可以进行编辑修改。3...
如何编写一个html文件?
若扩展名是.txt,系统会使用记事本打开而无法看到浏览效果。某些计算机上可能设置了隐藏扩展名,则还需要在操作系统的文件夹选项中设置不隐藏已知文件的扩展名。超文本标记语言或超文本链接标示语言(标准通用标记语言下的一个应用)HTML(HyperText Mark-up Language)是一种制作万维网页面的标准语言,是万维网...
4,用html语言编写出一个简单的网页,标题为"新网站",内容为"我的第一...
<html><head><title>新网站<\/title><\/head><body>我的第一个网页<\/body><\/html>标题为新网站,内容为我的第一个网页的简单代码
如何制作HTML页面
1、首先我们需要在桌面上,新建一张记事本 2、然后我们需要打开记事本,编写代码 3、然后我们需要把记事本修改后缀名为.html 4、然后我们需要在桌面上就会有一张网页,这一点很重要。5、最后我们需要需要在浏览器上运行该网页
h5制作是干什么的
H5是指第5代HTML,也指用H5语言制作的一切数字产品。所谓HTML是“超文本标记语言”的英文缩写。我们上网所看到的网页多数都是由HTML写成的。“超文本”是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。而“标记”指的是这些超文本必须由包含属性的开头与结尾标志来标记。浏览器通过解码HTML,...
用HTML语言手工制作网页时怎么设置网页页边距
body里写上左边距,上边距,边距宽度。
我想做一个简单的html语言做的网页,高手给代码
<html> <head> <meta http-equiv="Content-Type" content="text\/html; charset=gb2312"> <title>新用户注册<\/title> <style> body,td{font-size:12px} .bk {color: #f78d00; border:1px #f78d00 solid;} .Tips_bo { FONT-FAMILY: "Arial", "宋体";BORDER: 0px #f78d00 solid;...
html是什么意思
HTML是超文本标记语言的缩写,它是一种用于创建网页结构和内容的标记语言,介绍如下:一、HTML的起源和发展:HTML最早由蒂姆伯纳斯李在1989年发明并提出,他是万维网的创始人之一。最初的HTML标准比较简单,只包含一些基本的标签和属性。随着互联网的迅猛发展,HTML也不断演化和完善。经过多个版本的更新,...
如何编写html语言会使下面途中的图片往下移一点到正常位置?
如何编写html语言会使下面途中的图片往下移一点到正常位置的方法。如下参考:1.首先,打开HTML编辑器并创建一个新的HTML文件,比如index。html,来填充有问题的代码。2.在index.html中的<img>标签,输入html代码:style="margin: 15px 20px 25px 30px;"如下图。3.当浏览器运行index.html页面时...
用html 语言做出下列网页,要求写出代码…求帮助
大致给你列一下:<div class="buju"> <img src="tupian.jpg"\/> <p> wenzi <\/p> <div> .buju{ margin:0px;border:1px;}
鱼帖了哥: < frame > frame cols=">/frameset> >right;50%;< src="cols="<< 20%; >top; >rigth1;src=" <> .html" src="/frameset><20%,*"frame /frameset>src=".html" frameset > .html"frame .html" rows="left1;frame <left,*" ,60%;frameset ,20%" <<src="<>  .html"frameset < 
玉树县13016232868: 用HTML语言作一个网页,它被框架分成了两部分,上部分有一个按钮,单击它后,下部分能打开一个网页,请问该怎么写??
鱼帖了哥: <html><head><title>9-1</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <SCRIPT LANGUAGE="JavaScript"><!-- Begin //在名字为'right'的frame中打开19-1-1.htmfunction frameNavig() {frames['right'].window....
玉树县13016232868: 用html语言制作网页第一步是什么 - ?
鱼帖了哥: 用软件,dreamweaver,新建--html网页--你再输入.最简单的是,右键--新建一个文本文档---输入你的东西---另存为---文件名后缀为 .html,保存类型选择所有文件.
玉树县13016232868: html求制作一个简单网页代码,只需要一些文字加张图片 - ?
鱼帖了哥: 完整的代码如下:简单网页制作练习1.文字内容,直接输入文...
玉树县13016232868: 用HTML语言作一个网页,它被框架分成了两部分,上部分有一个按钮,单击它后,下部分能打开一 - ?
鱼帖了哥: <script type="text/javascript" language="javascript"> function show() { var desc=document.getElementById("desc").value; if (desc=="点击查看") { document.getElementById("agreement").style.display="block"; document....
玉树县13016232868: HTML 语言编制一个网页,满足以下要求,需要有代码哦 - ?
鱼帖了哥: <!DOCTYPE html><br><html><br> <head><br> <meta charset="UTF-8"><br> <meta name="Generator" content=""><br> <meta name="Author" content=""><br> <meta name="Keywords" content=""><br> <meta name="...
玉树县13016232868: 用HTML语言建立一个简单的网页?
鱼帖了哥: 新建一个文本文档 把下面的代码拷贝进去 保存 然后把后缀名改为.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=" http://www.w3.org/...
玉树县13016232868: 利用HTML语言设计制作网页文件 速度~一会下课交作业~跪求,QQQ!!!! - ?
鱼帖了哥:...
玉树县13016232868: 怎样使用HTML语言编写一个小网站 - ?
鱼帖了哥: photoshop cs3 http://www.xdowns.com/soft/31/93/2007/Soft_39370.html dreamwaver cs3 http://www.xdowns.com/soft/1/95/2007/Soft_37526.html flash mx cs3 http://www.xdowns.com/soft/31/93/2007/Soft_39623.html制作网页用Dreamweaver,flash...