什么是HTML?网页设计概念，开始使用HTML制作网页

HTML简介

HTML与XML的区别

而XML是由W3C所发展出的一种网页语言规格，是SGML的精简版本，特别用来设计网页文档，XML可以让用户自己定义所需要的标签，并且任意启动定义、转换、验证等工作，同时可以在网页和应用程序间读取数据和传递数据。

所以HTML与XML的差别在于HTML无法自订标签，但是基本上全世界的浏览器都可以看到他写出来的网页，而XML则是一种可以自由转换信息以及定义标签的方式，可以让其他网页自己去转换分享者的标签，并转为自己的标签，进而直接读取跟引用。

开始

1. 您想要怎么访问所有的文档？所有的文档都存在相同的文档夹或路径（directory）吗？假如您有大量不同的图片与文档，我建议您将页面、文档和图片分别保存在不同的路径里。

2. HTML文档都会被保存为.HTM还是.HTML？用.htm or .html.都可，没有任何影响，但最好可以使用相同的扩展名。

3. 网页打算使用相同的版型吗？是否要有相同的外观与感觉？

4. 主导览列要怎么做？放在每个网页的左侧、下方还是上方好？

小提示：请意识到您设计网页时，网页会随着您的想法而不断变化。就像是这个网站“新视野网页设计公司” 从开始到现在，已经被改过数十次一样。

编写基本的HTML

上面的编码是一个非常基本、帮助每个网页组成的例子。如您所见，这个编码以＜html＞开始，而这代表着＜html＞里面的所有内容都是HTML编码。接着是＜head＞，这是HTML文档的标题。再来是＜title＞，这是会显示在浏览器上方的网页标题。最后则是＜body＞，包含网页内所有的内文。

下面则是一些可放在＜body＞里额外的编码，可帮助您熟悉一些较常使用的HTML指令。

从上面的编码您会发现基本的HTML指令（HTML commands）使用起来相当简单。首先，从＜center＞开始，而这代表着告诉浏览器从这里开始的内文都置中表示。接着＜h1＞和一个句子，告诉浏览器这列是标题，且需要用最大的字体大小。再来是＜hr＞，是一条分隔线，水平横向全部页面。第三行的＜br＞是换行。＜p＞则是每段落的换行。＜b＞标签是粗体的缩写，用以加粗标签中内文的文本。接着的＜ul＞是项目清单符号，连接着的每个项目都是由＜li＞标签标示。最后的 “＜a href="路径"＞＜/a＞ 是非常链接，从网站内部链接到外部网站的方式。在这里则是链接到Google。

查看网站

现在您已经有一个基本的网站，也想要查看网站的样子。由于您把文档保存在您的电脑里，您将不需要经由连接互联网来查看您的网页。

您只要打开您的电脑浏览器并输入您的网页位置。比如说，您若是使用IBM兼容的电脑，且把index.htm或 index.html放在一个名为 "网站（website）" 的文档夹里，您只要在浏览器上输入c:websiteindex.htm或c:websiteindex.html就可预览您的网站。若您是使用微软或苹果，您只要双击网页文档，它就会自动用您的电脑浏览器打开网页。

上传网页到服务器前，在自己的电脑查看网页可让您试验网页的功能并确保页面的正常运作。若您没有保存网页的空间，这也很有用。

图片显示

现在您已经有一个基本的网站，您可以通过添加图片的方式来增加网站的美观度和气氛。显示图片在您的网页上有两种方式。第一种方式是通过下方的编码链接到另个网站的图片。

＜img src="https://www.computerhope.com/logo.gif" alt="logo"＞

借由使用上面的HTML标签，您可以显示位于其他网站上的图片，这也称作是热链接（直接链接）。然而，我们建议您不要使用这种类型的链接，因为它会导致您的网页加载速度变慢。若放置图片的网站删除了图片，您的网页也就无法正常显示图片。下方的编码为建议与替代的方式：

＜img src="mypic.gif" alt="My picture"＞

或着若您有个名为"图片（images）" 的文档夹：

＜img src="images/mypic.gif" alt="My picture"＞

您把mypic.gif文档存在那里，图片则将显示在你的网站上。添加图片是美化网站的最好方式。然而，若增加过多图片（尤其是动态图片），这将使网页过于俗不可耐且增加了网页加载所需的时间。请记住，浏览者平均浏览网站的时间是10秒，所以您必须让您的网页加载速度越快越好。

最后，永远不要在首页放置文档太大的图片。大文档的图片会大大的降低网页的加载速度而导致于浏览者离开您的网站。若您想在网站上放文档大的图片，我们建议您创建一个小一点的缩略图（thumbnail）。若浏览者真的想看大文档的图片，就可以透过点击缩略图来观看原图。

了解路径

当在包含图片与HTML文档的电脑创建其它目录（文档夹）时，了解路径的结构是非常重要的。很多时候，用户误建一个错误的链接，让页面只能脱机工作，而并不能在网络或其他电脑上显示。

image/mypic.gif

请注意，在上面的路径中，是先指定目录，然后再指定该文档。

接着，若您想回到上一层目录的图档mypic.gif，则可以使用下面的例子：

../mypic.gif

在这个例子里，请注意有两个点（..），而这是告诉浏览器说您想要回到上一层目录。但若您想回到上一层，然后再到名为 “other” 的同层目录内的图档，您可以先输入../，再输入想去的那个目录和文文档名，下面为例子：

../other/mypic.gif

这个规则可以使用多次。假如若您想到3层外的目录内的图片，那您可以使用下面的例子：

../../../image/mypic.gif

最后，请记住，指定路径时，需使用 “/” 而不是 “＼” 。

大小写区隔性

非常重要，请切记，许多网络浏览器使用Linux或*nix。而Linux和Unix对文文档名的大小写非常敏感。若您想链接到 “Mypage.htm”，但这个文档在服务器上的名称却是“mypage.htm”，那服务器就会因为大写的 “M” 而无法找到这份文档。因此我们强烈建议把所有的文档档，图档文档名全用小写显示。

发布网站

对大多数人而言，上传文档到网络上是设置网站中最复杂的步骤之一。为了让其他人可顺利看到网站，您必须将网站发布在可让网络上每个人看到的服务器里。

由于网站发布的方法很多，我们将会解释其中一种最常使用的方式。

互联网服务供应商（Internet Service Providers）和虚拟主机商（web hosting companies）可用FTP（File Transfer Protocol）让您把自己电脑中的文档复制到它们的服务器里。PC用户有两种可用的方式上传，一种是使用Windows内置的FTP程序，而另一种比较建议的方式则是下载FTP软件。不管使用这两种之中的哪一种，都可让您用FTP的方式传输文档到服务器。

一旦服务器连接到您放置网页的文档夹或路径。通常这个文档夹为public_html。假如您使用Windows内置的FTP，可输入cd public_html或dir来查看文档夹的名称。或是您可使用CUTEFTP或是其他FTP client软件打开文档夹。当您打开这个文档夹后，您可以经由发送您的HTML文档到服务器来发布网站在网际网络上。若您使用Windows内置的FTP来发送文档，举例来说，可输入send index.htm。

注册网域

请参考我们的 “我该如何注册网域” 页面内的步骤来设置网域。

网站托管

网站托管商允许用户让其他公司保存和维护您或是您公司的网站。且依据您的互联网服务供应商可提供的服务，您不一定需要一个网站托管商。您可以与您的互联网服务供应商询问，看他们提供的服务是否可媲美网站托管商所提供的。当您准备与网站托管商合作时，我们建议您先与他们查看以下的消息：

网域注册－询问他们是否可让您的公司有自己的域名，比如：www.newscan.com.tw，并看看他们是否可以为您设置以及费用。

邮件转发－看看他们是否可提供邮件转发，将邮件从username@yourdomain.com转发到另一个邮件位址，比如说，您的私人邮箱。

技术支持－询问技术支持的时间与电话，并确认该电话是否为免付费电话。

换托管商－查看他们关于换托管商的政策，若未来有需求的话，该怎么进行。

网站统计－这虽然不是必要的，但这是一个很好的功能，看看他们是否可提供网页的网站统计数据，让您监控网站的运作情况。

带宽限制－询问他们是否有严格的带宽限制，因为这很可能会限制您能够接受的流量。您必须要知道所有托管商都会限制流量，但您必须确定它的流量不会让您的网站爆掉。

CGI、Perl和PHP编程语言－虽然您可能不会马上用CGI、Perl和PHP写网站，但您将来也许会用到，这时先跟他们确认是否支持此技术非常重要。这些程序可让您设置记数器、留言板，留言簿和其他功能。

结语

设计网页比这里的网页基础介绍更深奥。当您了解HTML和FTP后，您就可以用CSS来编排设计您的网页版面。接着，若您想让网站拥有更高端的功能，例如：论坛、网页计数器或电子邮件表单，您就必须要熟悉CGI编程语言，例如：Perl和PHP。

若对您来说，这些基本知识让您不知所措，网络上有很多CMS服务，例如：WordPress和博客服务，这些都可以让全部流程变得简单。然而，请记住这些服务通常都有既定的版型和插件，能修改的地方不多。若您想要拥有自己的网站，您还是需要了解一些网页制作的基本知识。

本文网址： https://www.mamioo.com/seo-jichu/nv25821w7943