制作个人网站从HTML开始.doc

制作个人网站从HTML开始

在当今网络时代，每个人都和互联网之间有着或多或少的联系。但不管你是以开发网页为生，还是想制作个人主页，或仅仅想让评论内容按设想显示，都必须要通晓HTML语言。为使更多的童鞋能读懂网页开发语言，看穿网页的“内幕”。下面教你的第一课就以如何制作网页为题，来介绍网页标记语言——HTML。也许你会问，现在网络这么便利，在博客网站开办个人主页很简单，也好像不需要用HTML语言什么的。是这话没错，但是如果你想制作自己的独立网页，就没那么容易啦。是因为HTML是网页开发的基础，所以不懂HTML语言就只能望洋兴叹了。不过，如果你有兴趣可以跟着果壳从零学起，相信会有所收获的。上面这段视频从选择文本编辑器开始，逐步深入到HTML文件结构，并介绍了一些你可能需要的相关内容。如果认真看下来，你一定会对HTML页面有个大概的认识。另外想要学习HTML??还需要具备以下几个必备条件。我们制作网页需要选择纯文本编辑器想要编写HTML，首先要有一个纯文本编辑器。上述视频中用的纯文本编辑器叫做TextMate，是需要付费的。作为新手，可以先选用免费的编辑器，比如Notepad++ (Windows), Kod (Mac), 或者是Sublime Text(Windows、Mac通用)。如果这几个都不满意，也可以选用其他的编辑器，只要是纯文本的就行。但其实严格意义上讲，纯文本这个术语用在这里不太恰当。纯文本的定义是不包含任何样式的文字、数字和标点。这意味着文字不能加粗、不能倾斜、不能改变尺寸等。而我们所用的这些纯文本编辑器为方便阅读，可能会对语法进行高亮显示，不过它们不会将这些特征存储到文件中。所以我们需要的纯文本编辑器其实是只保存文本的编辑器，而不是Microsoft Word之类的。注：为了能在浏览器中正常显示，你需要把编辑的文档保存为.html格式——如“my_first_web_page.html”。在编辑器里生成的.html文件也可以用浏览器打开。但是显示形式会大不相同。了解一下什么是HTML文档理解了上述内容，就会知道HTML—即超文本标记语言(HyperText Markup Language)只是一簇保存为特殊格式的文本，而浏览器可以根据语言规则对其进行识别。比如网页上显示出的图片，仅仅是被HTML文件引用，而并没有包含在HTML文件中。HTML文档实际所做的工作就是为网页浏览器提供基于文本的可识别指令集。下面会看到，它是如何通过标签来实现各种功能的，比如通过标签在浏览器中显示图片，添加换行符等。还将探讨用于控制HTML样式的CSS(层叠样式表)规则。而现在你只需理解HTML是为浏览器提供指令集的文件即可。那什么是标签标签用于在HTML中标记页面上的特定元素，这样浏览器就能按要求进行显示。标签的样式如下：

这一对是HTML标签。整个HTML文档都要包含在该标签内。你可以看到，所有标签都以小于号开始，以大于号结束。它们之所以这样命名，部分原因正是由于这些符号看起来像是标签。起始标签中仅包含HTML术语，而结束标签中的HTML前还有一个/， 这个/表明它是结束标签。HTML标签会告诉浏览器文档以＜html＞为开头，以＜/html＞为结尾。其他标签也大都如此，比如你想加粗文字时可能会用到下面这个标签：

注：还有其他方法也可以加粗文本，应注意不同方法之间的差异，这些差异有时会非常重要。还有这样的标签：

这是一个图片标签，顾名思义它的作用是让浏览器显示图片。与其他标签相比，图片标签有两处显著的差异。其一，它是一种自关闭标签，在开始标记和结束标记之间没有任何多余的东西，因此它不需要结束标签。不过你会发现图片标签的结尾处也有一个/，其实这就算是它的结束标记了。而实际上即使不在标签末尾添加/，浏览器也能正确进行识别。其二，图片标签中包含有一些属性，如src="" 和height=""，这些属性中携带了更多的信息，不过各项属性的重要程度不尽相同，其中只有源属性(src)是不可或缺的。src=" image.jpg "表明我们想要显示的图像文件是image.jpg。这里给出的仅仅是文件名，浏览器会去存放HTML文档的位置寻找该图片。而假如你把图片存放在一个名为image的文件夹，image文件夹又与HTML文档同目录。此时，你便可以把scr设置为“images/image.jpg”，这里的/表明图片文件在某个文件夹内。如果你想从外部网络上加载图片，那也没问题，只要把scr设置为图片的网络地址即可(如/image.jpg)。图片标签的其他属性定义了图片的高度和宽度。虽然只有scr属性是必须属性，但是定义图片的高、宽属性也很有必要。因为如果不进行定义，浏览器就不知道要为图片预留多大空间，这样就可能造成整个页面