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種形式,都會進行詳細講解說明。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,949評論 18 139
  • 先討論許多應用協議都要使用的域名系統。在介紹了文件傳送協議和遠程登錄協議后,就重點介紹萬維網的工作原理及其主要協議...
    dmmy大印閱讀 1,107評論 0 1
  • 1、二叉樹的數據結構 2、二叉樹的創建 樹的結構: 輸入:AB#C##D## ; 3、二叉樹的遍歷 二叉樹的遍歷分...
    xiaoyanhan閱讀 908評論 0 0