APP下载

基于HTML语言的网页制作方法探析

2021-03-07曹丹

电脑知识与技术 2021年36期
关键词:网页设计制作方法

曹丹

摘要:HTML是一种文本语言,可以满足用来描述和制作网页,执行一般网页制作工具所无法满足的特殊需求,从而制作出一种特殊的网页效果。该文将以HTML语言为基础,对网页制作的方法进行一系列的介绍,总结并概括HTML语言网页制作时特殊注意事项,希望可以为相关行业工作者或学习者提供有价值的参考。

关键词:HTML;网页设计;制作方法

中图分类号:TP37      文献标识码:A

文章编号:1009-3044(2021)36-0083-03

开放科学(资源服务)标识码(OSID):

随着网络技术的不断发展,人们的生活逐渐与网络密不可分,现阶段人们对互联网资源的需求量越来越大,网页成为人们学习知识和获取信息的重要手段,如何设计和制作吸引人们眼球的网页,成为现阶段相关领域研究的重点课题。网络与用户之间的交互行为依赖于一个个单独的网页单元,现阶段实现网页制作的工具有许多,例如Dreamweaver、FrontPage等,但大部分网页制作工具实现的功能都具有一定的相似性,从而导致制作出来的网页千篇一律,无法满足用户的特殊需求,难以达到吸人眼球的目的。为了更好地开发和设计出与众不同的网页,实现网页的特殊性,采用HTML语言进行网页的设计和制作,弥补一般网页制作工具的缺陷和不足。

1 HTML概述

1.1 HTML的发展历史

HTML即超文本标记语言,是由Web的发明者Tim Berners Lee. 及其同事Daniel w. Connolly在1900年共同创建的,采用HTML语言编写的超文本文档一般被称为HTML文档,可以独立应用于各种操作平台,通过专用的浏览器进行内容的识别和呈现,而且呈现出的结果也就是大家所熟悉的网页。1900年以来,HTML语言得到了万维网的广泛的应用,浏览器通过将语言的内容以影像声音、图片、文字、动画等形式,呈现给浏览者,为人们提供所需要的服务。HTML是一种静态的网页文件,其所包含的指令代码也仅仅为网页中资料显示位置和排版的位置标记,简单易懂,操作便捷,HTML是广泛的一种应用为超链接,用户通过单击页面中的某一位置或内容,即可跳转到另一界面,在浏览器的运行环境下,世界各地的文件达成了超文本传输协议,就可以实现网络的网页页面的跳转和内容的搜索查询。

1.2 HTML的定义

HTML超文本标记语言不仅仅是一种应用,更是一种范围和标准。它通过标签等实现了网页中内容的标记和链接,使页面在浏览器运行模式下可以相互链接和跳转,浏览器在对网页文件进行阅读的过程中是按照顺序逐句阅读的,根据其中的标记进行内容的显示,因此对书写中存在的错误标记不能给予提示,亦不可停止其执行的过程。用户在进行HTML环境下的网页设计制作时只能通过页面的显示效果来分析语句中存在的问题和错误部位,且在不同的浏览器中,同一标记也可能有完全不同的解释,因此出现显示效果方面的差异。

1.3 HTML的版本

1989年Tim Berners Lee和他的团队开发出的HTML语言在一定程度上延续了古老的SGML语言定义,并在其基础上进行了一系列的语言简化和功能的优化,对浏览器在屏幕上显示的数据展示功能进行了优化,得到了各个浏览器厂商的广泛支持和应用。

在历史上,HTML有1.0、2.0、3.2等多个版本,值得一提的是HTML 5是现阶段公认的下一代Web语言,它在媒体内容和应用的方面有着极强的应用能力,对于推动互联网发展有着重要的作用。

随着电子商务行业的兴起和发展,HTML的地位也得到了显著提高,尤其在Web迅速发展的过程中起到了助推的作用。

1.4 HTML的特点

HTML语言的制作较为简单,但其有着强大的功能,可以支持各种格式的数据文件在浏览器界面中的显示,而这也就进一步推动了万维网的发展和普遍应用。下面,文章将对HTML的主要特点进行简述。

1) 简易性。HTML超文本标记语言,在版本升级的过程中采用的是超集方式,使得其应用更加灵活和便捷。

2)可扩展性。HTML在普及的過程中,逐渐对其自身进行改进,尤其在功能方面得到了极大的加强,通过增加了标识符等要求,HTML在网页设计的过程中,采用了子类元素的显示和应用方式,因此对系统扩展提供了稳固的保障。

3)平台无关性。现阶段,虽然互联网和网页的应用得到了极大的普及,个人计算机得到了广泛的盛行,但在一些大型实验研究或其他有相关需求的机构中Mac等机器的使用者仍大有人在。在此背景下,HTML超文本标记语言有着更加广泛的平台服务能力,不受计算机种类的限制,不仅为自身的发展铺设了长远的道路,更推动了万维网的普遍盛行。

4)通用性。HTML语言是网络范围内一种通用的语言,它可以通过简单的语言实现制作人与浏览器的信息传递,建立文本与图片、视频、音频等相结合的复杂界面,并可以实现超链接的强大功能,而这些网络页面被上传至网络后,可以被其他人广泛浏览和阅读,不受电脑型号或浏览器种类的限制,具有广泛的通用性。

2 HTML语言的编辑方式

HTML实际上是文本文件在浏览器中的显示,因此它的编辑实质上是对语言文字内容的编辑,现阶段HTML常用的编辑器有以下几种类型:

1)文本编辑是HTML语言编辑中最简单的一种,它可以使用一般的文本编辑器或文档编辑器。例如,微软系统自带的记事本或写字板均可以进行HTML语言的编辑,WPS或word亦可进行,但在保存时,若想要制作出的文件为网页文件,则需要将其扩展名改为“.htm”或“.html”,只有这种类型的文件可以被浏览器识别和执行,否则将显示原有的文本文档。

2)半所见即所得软件,例如FCK-Editer等在线网页编辑器。

3)所见即所得软件是现阶段最广泛应用的网页编辑器,一般供对HTML的相关知识缺乏一定了解的用户使用,虽然这种软件与前面两种相比具有更加简便,且网页制作效率更高,直观表现性更强,但其生成代码结构复杂,在大型网站的多人协作和精准定位等高级功能方面表现得极为无力。

HTML的字符集包含ASCII字符和汉字和大量的特殊字符,而特殊字符的使用一般现在网页中特殊意义字符的显示或键盘上不存在的字符,这些字符的表现一般是通过代码来实现的,而代码又包括字符代码和数字代码两种不同的形式。

在HTML语言定义中,有许多种类型的元素内容,例如脚本数据、样式表中的数据、属性值,如id、名称、数字单位等,而上述所有的数字类型均隶属于专业的字符数据。

3 HTML的整体结构

通常情况下,一个网页可能由多个HTML文件构成,而每个HTML都具有一个基本的整体结构,其中的标记一般为成双成对出现的,它们分别叫作开头,标记和结尾标记。

<html>标记是用来对文本形式进行说明的标记,表示该文件是采用超文本标记语言进行描述的,为浏览器识别和显示文件做出提示,它可以被认为是整个HTML文件的开头。而对应的,</html>则为文件的结尾标记,它用于提示浏览器文件的结尾。

<head>和</head>标记为头部标记的开头标记和结尾标记,文件的头部标记是对整个页面标题的叙述和说明,并不作为页面的主体内容显示。文件头部一般包括标题(<title>/</title>),序言、说明等,有时还包括链接的默认地址(<base>/</base>)、文档与外部资源之间的关系(<link/</link>)、文档中的元数据(<meta>、</meta>)等。

<body>和</body>是对网页主题内容范围界定的标记,网页中所包括的实际内容即位于这两个标记所显示的内容之间,一般称为“正文标记”或“实体标记”。

4 基于HTML语言的网页制作方法

现阶段常用于制作HTML语言网页的软件有许多,比较主要的是Dreamweaver、Frontpage等,为了丰富网页的内容和表现形式,经常还使用Photoshop、Flash、Fireworks等软件,进行各种常规编辑、文字编辑、表格编辑等工作,使得设计出来的页面可以包含大量文字、图案、图标、影视、音频等内容,使其更具有交互性和实现各种强大的功能。

4.1 常规编辑

网页的常规编辑就是利用HTML专用的标记对网页页面的布局和展示进行设计和规划,通过将标记置于特定的位置而进行网页内容的布局。正如上文所提到的,绝大部分网页的内容都在<html>和</html>的字符之间,<head>和</head>之间则是文件的头部内容,包括标题、网址等内容,在<body>和</body>之间的则是文件的主体部分,也就是页面中所显示的内容。若制作的网页中包括视频或音频等内容,可以通过<a>、</a>标记对音频或视频文件的地址进行标记,以达到在网页中插入相关文件的目的。

4.2 表格编辑

表格是网页设计和开发中非常重要的一种元素,在HTML语言环境下将进行网页制作时,一般通过<table>、</table>两个标记来实现网页区域的划分。关于表格编辑,还可以通过<td>和</td>两个标记对其进行参数的定义,以<th>、</th>实现对表头的定义。

4.3 文字编辑

HTML语言环境下对网页内的文字内容进行编辑时,一般通过以下几种源代码实现内容的定义和文字格式的定义:

1)<hn>、</hn>n=1~6是对内容标题等级的定义,类似于word文档中的文字标题等级;

2)align是对文字对齐方式的定义,包括left、center、right三种对齐方式,例如,<h1 align = “center”所表示的内容是一级标题的居中对齐形式;

3)<p>和</p>是一对段落标记,实现文字内容以段落的方式进行显示,两个标记之间的内容可以被认为是一个自然段;

4)<br>和</br>是一对换行标记,实现文字内容以行的方式进行显示,两个标记之间的内容为一行;

……

4.4 音频编辑

在网页制作的过程中,不可避免地会使用到音频文件作为网页的背景音乐,也就是我们俗称的“BGM”,现阶段常用的网页音频文件主要为mid格式的文件,这种格式的音频文件占用的空间非常小,在网络环境下可以缩短页面加载的时间,提高网页浏览的速度,有效避免了BGM卡顿现象的发生,从而提高了页面设计的质量。背景音乐在<body>中的应用格式为:<bgsound src =”BGM文件路径”loop =”BGM播放次数”>,有些设计师为了确保BGM在网页中的循环播放会设计一個较大的循环值。

5 网页制作的注意事项

网页设计和制作工作是一个综合性的网络工程,包括了美工设计、后台编程等多个领域的工作,网页设计者在页面的设计和开发时要充分考虑网页制作的目的,明确受众群体,有针对性地设计网页的内容。同时,在设计过程中,要确保页面在干净正切的前提下有自己的风格,并具有一定的美观性。此外,还要保证网页中链接的便捷性和实用性,尽可能满足广大使用者的需求,减少没必要的点击次数。

6 总结

本文对HTML的发展历史和特点进行了一系列的概述,总结了HTML语言下的网页制作基本方法和技巧。虽然网页制作的入门较为简单,但由于其在开发的过程中关联了大量相关领域,在一些大型的、综合性较强的网页的开发和设计中,仍然需要大量的团队合作,对开发者的HTML语言技巧也有极大的需求,因此,为了开发制作出理想的网页文件,仍需要对相关知识进行进一步的学习和总结。

参考文献:

[1] 张丽霞.基于HTML语言的网页制作方法[J].电子测试,2018(Z1):86-87.

[2] 张铁红,邵波.浅谈HTML语言的网页制作方法与技巧[J].通讯世界,2016(1):189.

[3] 柳汨.基于HTML语言的网页制作浅析[J].中小企业管理与科技,2016(1):258.

[4] 匡成宝.HTML语言的网页制作方法与技巧探讨[J].电脑迷,2017(3):190-191.

[5] 青华.HTML语言的网页制作技巧与方法[J].电脑知识与技术,2017,13(30):209-210.

[6] 朱向富.HTML语言的网页制作方法和技巧[J].电子技术与软件工程,2016(19):67.

[7] 茹先古丽·吾守尔,艾合买提·阿布拉.基于HTML语言的网页制作方法[J].经贸实践,2015(9):267.

[8] 王闯.HTML语言的网页制作技巧与方法分析[J].无线互联科技,2015(11):38-39.

【通联编辑:唐一东】

猜你喜欢

网页设计制作方法
叶腊石聚合成型及其旋转磁盘的制作方法
青贮饲料的优点及制作方法
石岩里9号墓出土金制带扣的制作方法考察
能量矿物的选择及强磁按摩器的制作方法
视觉传达艺术与中韩网页艺术设计的比较研究
谈计算机网页设计中的布局
少数民族文化艺术元素在网页设计中的运用探讨
一种自制铠装电缆装置及制作方法介绍