制作网站基础的两个规范分别称为HTML和CSS,它们在网站中起着不同的作用。圭谷设计正是围绕着这两个内容进行讲解的,今天首先对HTML进行讲解,这里将介绍HTML的基本概念以及一些简单的应用。此外,Dreamweaver是目前流行的网站制作软件之一,因此今天的稳重中圭谷设计还会对Dreamweaver软件的使用进行一些简单的介绍。通过学习,大家将会清楚地了解HTML语言在网络中所处的位置,这样从总体上把握HTML,并熟悉Dreamweaver软件的基本操作。
一.HTML简介
前面提到过网站的基础是HTML,全称为Hypertext Markup Language,译为超文本标记语言。首先应该明确一个概念,HTML不是一种编程语言,而是一种描述性的标记语言,用于描述超文本中内容的显示方式。比如如何在网站中定义一个标题、一段文本或者一个表格等,这些都是利用一个个HTML标记完成的。其基本的语法就是:<标记>内容</标记>。
标记通常都是成对使用的,有一个开头标记就对应有一个结束标记。结束标记只是在开头标记的前面加一个斜杠“/”。当浏览器从服务器接收到HTML文件后,就会解释里面的标记符,然后把标记符相对应的功能表达出来。青岛网站建设美学体验的原则
例如,在HTML中以<p></p>标记来定义一个文本段落,以<table></table>标记来定义一个表格。当浏览器碰到<p></p>标记时,就会把<p></p>标记之间的所有文字以一个段落的样式显示出来。再进一步,上面说的<p>标记和<table>标记都属于结构标记,也就是它们用于定义网站内容的结构。此外,还有一类标记,称为形式标记,用于定义网站内容的形式。比如浏览器遇到<b></b>标记时,就会把<b></b>标记中的所有文字以粗体样式显示出来。或者,有“<i>网站</i>”这样一个HTML语句,其显示结果就是斜体的“网站”两个字。大家可以看到,HTML就是这样易学易用。
总的原则就是,用什么样的标记就能得到什么样的效果。希望获得什么效果,就用相应的标记即可。因此,学习HTML实际上就是学习如何使用各种HTML的标记。
二.创建第一个HTML文件
人们经常在有意无意中使用网站这个概念,那么网站的本质是什么呢?实际上网站就是一个文件,只不过这个文件是利用HTML写成的,所以又被称为HTML文件。HTML文件的本质就是一个文本文件,只是扩展名为“.htm”或“.html”的文本文件。所以,可以利用任何文本编辑软件创建、编辑HTML文件。在Windows操作系统中,简单的文本编辑软件就是NotePad(记事本)。
现在我们来创建自己的第一个HTML文件。HTML文件的创建方法非常简单。具体的操作步骤如下。
1.选择“开始”,然后依次选择“程序→附件→记事本”命令。
2.在打开的记事本窗口中写入如下代码。
3.编写完成后保存该文档。选取记事本菜单栏中的“文件→保存”命令,弹出“另存为”对话框。要特别注意,应首先在“保存类型”下拉列表中选择“所有文件”选项,然后再在“文件名”文本框中输入一个文件名,并以“.htm”或者“.html”作为文件名的后缀。修改后缀名注意如果这里不改成“所有文件”,记事本程序会自动在文件名后面加上“.txt”后缀,这样浏览器就不会把这个文件当做网站文件对待了。
4.设置完成后单击“保存”按钮,这时该文本文件就变为了HTML文件,在Windows中,可以看到它的图标就是网站文件的图标了。
5.这时双击该HTML文件,就会自动打开浏览器,并显示该文件的内容。这就是我们制作的第一个HTML文件,尽管它只有一行文字,但这就标志着我们已经迈出了走进互联网世界的第一步!
说明
由于HTML文件本质上就是文本文件,因此使用任何文本编辑软件都可以对它进行编辑。当然Dreamweaver是常用的专业网站建设编辑软件之一,但是在这一节中,我们仍然使用简单的记事本,来编写和编辑HTML文档,目的是通过基本的操作,尽可能深入地掌握HTML的原理。
三、HTML文件结构
在上面的HTML文件里用到了5个HTML标记,下面就依次讲解它们的作用。实际上,它们构成了简单的完整的HTML文件结构。
1.<html>标记<html>标记放在HTML文件的开头,并没有什么实质性的功能,只是一个形式上的标记,但还是希望大家形成一个良好的编写习惯,在HTML文件开头使用<html>标记来做一个形式上的开始。
2.<head>标记<head>也称为头标记,一般放在<html>标记里,其作用是放置关于此HTML文件的信息,如提供索引、定义CSS样式等。
3.<title>标记<title>称为标题标记,包含在<head>标记内,它的作用是设定网站标题,可以看见在浏览器左上方的标题栏中显示这个标题,此外,在Windows任务栏中显示的也是这个标题。
4.<body>标记<body>又称为主体标记,网站所要显示的内容都放在这个标记内,它是HTML文件的重点所在。在后面的新闻中所介绍的HTML标记都将在这个标记内。然而它并不仅仅是一个形式上的标记,它本身也可以控制网站的背景颜色或背景图像,这将在后面的圭谷官网新闻中进行介绍。另外在构建HTML框架的时候要注意一个问题,标记是不可以交错的,否则将会造成错误。
Copyright All Rights GreatGoal Design co.,ltd. 鲁ICP备16002128号-3 技术支持: @圭谷设计