首页 > 代码库 > html运用以及工具

html运用以及工具

对于这个教程,我建议你只使用最简单的工具。例如:Notepad(在windows里),TextEdit(在Mac上)或是KEdit(在KDE里)就可以了。一旦你了解这个原理,你就会想要切换到更高级的工具,甚至是商业程序,如Style Master,Dreamweaver或GoLive。但对于你的第一个CSS样式表,最好不要因为使用太多的高级功能而分心。
不要使用文字处理器,如Microsoft Word或OpenOffice。它们通常制作出网络浏览器不能读取文件。对于HTML和CSS,我们需要简单的纯文本文件.
第一步打开你的文本编辑器(Notepad,TextEdit,KEdit,或是任何你喜欢的文本编辑器),在一个空的窗口开始,输入以下的内容:
<!DOCTYPE html PUBLIC“-//W3C//DTD HTML 4.01//EN”>
<html>
<head>
<title>我的第一个样式页面</title>
</head>
<body>
<!--目录-->
<ul class=“navbar”>
<li><a href=http://www.mamicode.com/“index.html”>首页
<li><a href=http://www.mamicode.com/“musings.html”>连接1
<li><a href=http://www.mamicode.com/“town.html”>连接2
<li><a href=http://www.mamicode.com/“links.html”>连接3
</ul>
<!--主要内容-->
<h1>我的第一个样式页面</h1>
<p>欢迎来到我的样式页面!
<p>这里没有图片,但至少有CSS样式.有连接,但只是为了举例和演示,并不能带你到任何地方…
<p>这只是个例子,好像没什么好写.
<!--签名和日期-->
<address>2004年4月5日制作</address>
</body>
</html>
事实上,你不需要输入它:你可以从这个网页复制并粘贴进编辑器。
(如果你在Mac上使用TextEdit,不要忘记告诉TextEdit文本确实是纯文本,通过转到格式菜单并选择“Make plain text”。)
Alert!Advanced:上面HTML文件的第一行告诉浏览器HTML的类型(DOCTYPE意思是文档类型)。在这个案例中,它是HTML 4.01版本。
在<和>里的单词叫标签,像你看能到的,这文档包含<html>和</html>标签。

在<head>和</head>间有一个位置是给没有显示在屏幕上各个种类的信息的。目前为止,它包含文档的标题,但之后我们也会在这里加上CSS样式表。
<body>是实际文档文本所在之处。原则上,除了在<!--和-->里作为对它们本身注释的内容不会显示,这里的所有内容都会被显示。浏览器会忽略它。
在该示例中的标签,<ul>介绍了一个“无次序列表”,例如:条目没有编号的列表。<li>是“列表条目”的开始。<p>是“段”。还有<a>是创建超链接的“锚点”。
the HTML source shown inside KEdit
编辑器展示了HTML源。
Alert!Advanced:如果你想知道在<…>里的名字是什么意思,一个好的开始地方是着手从HTML开始。但是只有一些关于我们示例HTML页面的单词。
“ul”是一个每个条目都有一个超链接的列表。这会作为我们的“站点导航菜单”连接到我们(超链接)网站的其它页面。想必,我们网站的所有页面都有一个类似的菜单。
“h1”和“p”元素形成这个页面独特的内容,而底部的签名(“address”)也是和网站上所有的页面是类似的。
注意,我没有关闭“li”和“p”元素。在HTML里(但不是在XHTML里),允许忽略</li>和</p>标签,这就是我在这里做的,为了使得文本稍微容易读一点。但是你可以加上它们,如果你喜欢的话。
让我们假设这是要成为一个有许多类似页面的网站上的一个页面。对当前网页来说很普通,此页面有一个菜单,在超链接站点,一些独特的内容和签名上炼接到其它页面上去。
现在从文件菜单里标明“另存为……”,导入你想把它放入的一个目录/文件夹里(桌面也可以),再把文件存为“mypage.html”。先不要关掉编辑器,我们还会需要它。
(如果你在Mac OS X 10.4前的版本上使用TextEdit,你会看到一个选项“不要附加保存.txt扩展名”的存档对话框。标明那个选项,因为名字“mypage.html”已经包含了一个扩展名。更新的版本的TextEdit会让.html自动扩展。)
接下来,在浏览器里打开文件。你可以按照下面的做:用你的文件管理器(Windows Explorer,Finder或Konqueror)找到文件,再点击或双击“mypage.html”文件。它就会在你默认的网络浏览器里打开。(如果不可以,就打开你的浏览器,把文件拖进来。)
像你看到的那样,页面看起来非常沉闷……
第二步,添加一些颜色
你可能看到一些白色背景里的黑色文本,但它是取决于浏览器如何配置的。所以,我们能做的让页面更加时新的一件简单的事情就是添加一些颜色。(让浏览器开着,我们之后会再用到它。)
我们从嵌在HTML文件里的样式表开始。然后,我们会把HTML和CSS放进单独的文件里。单独的文件很好,因为相对于复合的HTML文件,它让相同的样
第二步,添加一些颜色
你可能看到一些白色背景里的黑色文本,但它是取决于浏览器如何配置的。所以,我们能做的让页面更加时新的一件简单的事情就是添加一些颜色。(让浏览器开着,我们之后会再用到它。)
我们从嵌在HTML文件里的样式表开始。然后,我们会把HTML和CSS放进单独的文件里。单独的文件很好,因为相对于复合的HTML文件,它让相同的样式表使用起来更简单:你只需要编写样式表一遍。但是对于该步骤,我们仅仅保持所有的内容在一个文件里。
我们需要添加一个<style>元素到HTML文件中。样式表会在此元素里。所以回到编辑器窗口,再在HTML文件的抬头部分添加下面的五行。要添加的行用红色的显示出来了。
<!DOCTYPE html PUBLIC“-//W3C//DTD HTML 4.01//EN”>
<html>
<head>
<title>我的第一个样式页面</title>
<style type=“text/css”>
body {
color: purple;
background-color: #d8da3d }
</style>
</head>
<body>
[etc.]
第一行说的是,这是一个样式表,并且它是用CSS(“text/css”)编写的。第二行说的是,我们为“body”元素添加了样式。第三行设定了文本的颜色是紫色,还有接下来一行设定了背景是一种泛绿的黄色。
Alert!Advanced:CSS里的样式表是由规则组成。每条规则有三个部分:
选择器(在示例里:“body”),告诉浏览器文档的哪个部分受规则影响了;
属性(在示例里:‘color‘‘和‘background-color‘都是属性),规定了布局的什么方面被设置了;
还有值(‘purple‘和‘#d8da3d‘)给出了样式属性的值。
我们要设置两个属性,因此我们要做两个单独的规则:
body { color: purple }
body { background-color: #d8da3d }
但是因为两个规则都都会影响主体,我们只要输入一次“body”,再把属性和值放在一起。更多的选项,请看第2章Lie & Bos。
主体元素的背景也就是整个文档的背景。我们没有把任何明确的背景给任何其它的元素(p,li,address……),所以默认它们会没有(或,会是透明的)。‘color ‘属性设置body元素文本的颜色,但是主体内的其它元素都要沿袭那种颜色,除非明确的覆盖。(我们之后会添加其它颜色。)
现在保存文件(从菜单里选用“保存”)再回到浏览窗口。如果你按“刷新”键,显示就会从“沉闷”的页面变成有色彩(虽然还是相当沉闷)的页面。除了顶端的连接列表,文本应该是带有泛绿的黄色背景的紫色文本。
Screenshot of the colored page in Konqueror

一个浏览器在添加了一些颜色后是如何显示页面的。
Alert!Advanced:在CSS里颜色有多种方法来规定。此示例展示了它们的两种方法:通过名称(“purple”)和通过十六进制代码(“#d8da3d”)。颜色的名称大约有140种,而十六进制代码有超过16,000,000种颜色。添加一种样式表解释了更多关于代码的详情。
第三步:添加字体
另外一件容易做的事情是,为页面多种元素的字体制造一些区别。因此让我们设置文本为“Georgia”字体,但除了h1标题,我们会用“Helvetica”。
在网上,你不能确定你的读者电脑上用的是什么字体,所以,我们也添加一些替代方案:如果没有Georgia,Times New Roman或Times也可以,如果所有的都不行,浏览器会使用任何衬线字体。如果Helvetica缺失,Geneva,Arial和sunSans-Regular在形状上是很相似的,又如果没有这些运作,浏览器会选择任何其它无衬线的字体。

 

html运用以及工具