0027 编程实现一个最简单的网站要做哪些工作

前面第一部分的教程结束了，很多朋友都催着写后面的教程，可是，学哥也要上班的，也要养家糊口的，所以只能业务时间进行创作，因此更新时间上可能无法保证很及时，请各位朋友们多多谅解。学哥也争取写的更详细一些，方便很多零基础的同学能够跨过第一个门槛，从而进入编程的美妙世界。

002701.jpg

教程规划

第二部分：html+css静态网站和阿里云上线
学习做网站程序，学习html构造网页内容布局，css来控制网页显示效果
学会做好自己的个人简历网站，学习如何设计，开发，测试网页
学会在本地运行网页，以及如何将网站部署到阿里云
详细说明一下规划：
首先介绍一些网站基础原理，将一个网站如何访问的原理说明清楚
然后让大家了解一个最简单的helloworld网页是如何一行一行写出来，并可以呈现在浏览器中
再接着就是介绍关于html当中的各种各样的标签，具体的用法
然后以完成一个个人简历网站为实际例子来做讲解说明
逐渐一个一个页面的完成整个网站的设计，开发，部署
同时引入css将整个网站进行美化和优化，看起来更美观
详细讲解css一些常用的标签属性参数等等
最后是将完成的网站部署到公网上
具体要说明如何在阿里云购买一个服务器，并安装一些必要的服务器软件
然后将代码部署上去，如何进行网站测试
最后说明如何在阿里云购买一个域名，并进行域名备案，然后将域名解析到对应的服务器
最后通过浏览器测试部署好的网站，完成整个项目
当然，系列课程少不了练习题目，练习题目就是模仿实现一个真实的公司网站，如下图：

002702.jpg

什么是网站

网站的概念，绝大多数人应该都理解。在电脑或者手机上，打开一个浏览器软件或者App，然后在地址栏中输入一个网站地址，例如www.toutiao.com，然后输入回车，就可以看到网站的内容了。
网站都有哪些概念或者元素呢？用下面这个图来描述一个经典的网站概念：

002703.jpg

下面，我们按照交互次序来解释对应的概念。
1.客户端系统

要访问一个网站，一般是在某个操作系统里面访问，那这个操作系统一般在某个硬件设备上。
例如可以是一个台式机安装了苹果系统，也可以是一个笔记本安装了windows系统，还可以是一个手机安装的是安卓系统或者苹果手机系统。
一个经典的例子是一个笔记本安装了Windows 7操作系统：

002704.jpg

2.浏览器软件

访问网站，一般都是通过浏览器。
浏览器软件常用的比如windows里面的IE, 或者chrome ，或者Firefox，或者苹果系统里面的safari浏览器。
浏览器软件有很多种，不同的浏览器软件都必须遵循一定的规范，这样可以让网站在不同的浏览器中都能正常显示，但是也有很多浏览器会有自己定义的一些规范，碰到这种规范就一定要小心，要正确尽量使用标准的规范，让自己的网站在尽可能多的浏览器软件中都能正常访问。
有的客户端系统安装的时候会打包带着浏览器，这样就无需安装浏览器软件。
大多数时候，我们都需要下载安装我们喜欢的浏览器软件。
建议大家在自己的电脑上安装Chrome浏览器，因为用它来调试我们开发的网站很方便。

002705.jpg

3.域名

一般要访问一个网站，都是通过域名进行访问。
域名就是网络上一台服务器或者一群服务器对外提供的一个地址索引。
就好比：上海市人民公园 就是一个域名 www.renmingongyuan.com，它具体的地址是 南京西路231号 对应的就是服务器的IP地址，假设是121.38.234.124 ，一般很难记住一个IP地址，但比较容易记住域名。
域名的用途是通过名称进行索引到对应的网络IP地址。

4.网络连接

一般访问网站都不是访问本机操作系统中的程序，都是访问互联网络上的一个机器上的程序，这就需要客户端系统能够和网络进行连接，确保物理连接层面是连接着的，这样浏览器才可以访问对应的机器上的网站程序。
当然，刚开始测试网站的时候，是可以放在自己机器电脑上进行测试，测试完成后再部署到网络机器上进行测试。
网络连接可以简单分为局域网连接和互联网连接。
局域网连接就是电脑和电脑之间组成的网络是一个访问受到限制的网络，也就是一般不能在很远的地方进行访问，基本上都在一个比较靠近的物理空间之中。例如一个公司内部的网络，不能上网的网络。
互联网连接就是电脑和电脑之间可以通过网络运营商提供的互联网接入方式进行连接的网络。例如家里通过光纤和拨号设备进行连接到互联网的网络。俗称可以上网。也就是可以访问公网，也就是互联网公共网络。

002706.jpg

5.Http网络协议

从客户端系统的浏览器上，输入一个域名，然后浏览器通过一个数据协议向互联网络进行索引定位到对应的服务器。
然后服务器上面的web服务程序根据访问请求，找到对应的网站页面程序，解释运行之后，将生成的网站内容数据通过网络返回给浏览器。
浏览器收到这些数据之后，按照html语法进行描绘并显示在浏览器当中，就是我们看到的网站内容了。
这当中计算机浏览器和服务器web服务程序之间进行通讯，遵循的协议就叫Http协议。
当然，这只是一个最简单的解释，真正的计算机网络协议一共有7层，适用于不同的理解模式。
具体大家可以去搜索“分层网络协议”，进行学习。这里我们只要知道http网络协议即可。

002707.jpg

6.服务器

服务器就是一台能提供网站服务的机器设备。
它可以是一台物理机器，也可以是一台虚拟机器。
关键在于它上面安装了操作系统，操作系统提供了一些服务程序，对外提供web服务。
操作系统可能是Windows系统，也可能是linux系统，也可能是unix系统。
一个经典的服务器是阿里云的一台安装了ubuntu操作系统的虚拟机。

002708.jpg

7.web服务程序

在服务器上一般要对外提供网站访问服务，都需要安装web服务程序。
比如windows系统上的IIS服务程序，linux系统上的Apache服务程序。
将网页代码部署到www服务程序规定的目录下，我们就可以从互联网访问这些网页了。
一个经典的web服务程序是Nginx服务程序。

002709.jpg

8.网站程序文件

不同的网站页面，意味着是用不同的网站程序文件来实现的。
一个登录网站页面，和一个产品详细介绍网站页面，肯定是不一样的文件。
将这些网站程序文件部署到www服务程序规定的目录下，才能对外提供网站服务。
然后不同的客户端通过浏览器访问该网站时，看到的才是一样的内容。
网站程序文件，一般分为静态程序文件和动态程序文件。
静态程序文件，就是里面的输出内容是固定的，主要是以.html文件结尾的程序文件。例如 index.html 或者 product.html。
动态程序文件，就是根据情况输出的内容是变化的，主要是根据web服务程序提供的可用程序语言来实现。
例如login.php文件 或者 logout.aspx文件 等等。
一个经典的网站程序文件就是用helloworld.html。

002710.png

9.html语法

浏览器收到服务器web服务程序返回的结果数据之后，要按照html语法格式进行分析，然后将对应的页面元素描绘到浏览器当中，就是我们看到的内容了。
例如<title>网页标题</title>，在浏览器的标题栏就是现实“网页标题”。
例如<table><tr><td>表格元素</td></tr></table>，在浏览器里面就会出现一个表格。
后面，我们主要就是要学习通过html语法，将我们要呈现的页面按照html语法写成网站程序文件。
综合上面的说明，一个经典的网站原理图就是下面这样的：

002711.jpg

实现一个最简单的静态网站要做哪些工作

根据不同的需求，要做的事情不同。

如果这个静态网站只需要本机访问：
1.用编辑器软件编写html网页文件
2.打开浏览器访问这个文件

如果这个静态网站只需要局域网访问：
1.用编辑器软件编写html网页文件
2.在本机安装web服务程序
3.将html网页文件复制到web服务程序指定目录下
4.在局域网中任何一台电脑，打开浏览器访问本机IP地址的这个文件

如果这个静态网站需要互联网访问：
1.用编辑器软件编写html网页文件
2.在一台具有公网地址的服务器上安装web服务程序，例如购买一个阿里云服务器
3.将html网页文件复制到该服务器的web服务程序指定目录下
4.任何一台能上互联网的电脑，打开浏览器访问公网IP地址的这个文件

如果这个静态网站需要互联网域名访问：
1.用编辑器软件编写html网页文件
2.在一台具有公网地址的服务器上安装web服务程序，例如购买一个阿里云服务器
3.将html网页文件复制到该服务器的web服务程序指定目录下
4.任何一台能上互联网的电脑，打开浏览器访问公网IP地址的这个文件
5.购买一个域名，将域名解析到具有公网地址的服务器IP地址
6.任何一台能上互联网的电脑，打开浏览器访问域名的这个文件

后续，这4种形式，都会进行详细讲解说明。