切換
舊版
前往
大廳
主題

給初學者看的【網頁-介紹】

深海異音 | 2015-03-21 21:35:51 | 巴幣 117 | 人氣 2482


這是一篇【介紹文】,而非【教學文】

適用對象:
完全不知道網頁是啥的初學者。




網頁簡單來說就是一個的文字檔,瀏覽器會解析這個的文字檔,然後就變成現在看到的界面。
在瀏覽器按下【F12】就可以看到網頁的原始碼。


網頁可以簡單分成3個部分:html、css、javascript


【html】
說明:網頁主要的內容,是一種標籤語言。
例如:我在網頁原始碼打:
<table>
  <tr>
    <td>123</td>
    <td>456</td>
  </tr>
</table>

瀏覽器就會知道這是一個表格,而使用者看起來就會像這樣的一個表格
123 456


例如:我在網頁原始碼打:
<img src="https://i.imgur.com/p1v4FTX.jpg">
瀏覽器就會知道這是一個圖片,而使用者看起來就會像這樣的一張圖片





【css】
說明:html的樣式。
例如:文字顏色、版面寬度、圖片的大小 等等...





【javascript】
說明:可以在網頁運行的腳本指令。
例如:按鈕點下去後彈出一個對話方塊。




簡單描述一下大致上運作的流程,以巴哈姆特為例:

  
使用者用瀏覽器訪問一個網頁
  ↓
巴哈姆特的伺服器收到請求
  ↓
巴哈伺服器用【後台的資料庫】計算出要給使用者的【網頁原始碼】
  ↓
使用者的瀏覽器接收到回傳的【網頁原始碼】並做了3件事情:
依照【html】顯示基本的內容。
根據【css】把【html】套上漂亮的樣式。
根據【javascript】瀏覽器就可以知道網頁上需要做的指令是那些。
  ↓
最後便是使用者看到的巴哈姆特網頁




如果還是覺得很難理解沒關係,至少記得下面2句話:

css = 網頁的樣式
javascript = 網頁的指令碼


送禮物贊助創作者 !
0
留言

創作回應

Kantai
網大進不去怎麼退選
2015-03-22 19:49:25
麻糬口魚
老師我想學 該如何起手
2017-04-06 10:06:57
深海異音
去圖書館找入門的書,有基礎後再從網路找資源。網路的資源雖然多,但與其說是教學,不如說是字典,不適合初學者
2017-04-06 11:53:49
深海異音
一開始一定要會切板,任何版面都能輕易做出來才算是有良好基礎。
2017-04-06 11:56:01
麻糬口魚
是要找網頁的書嗎?像是dreamweaver那種?
2017-04-06 12:02:15
深海異音
找HTML的書就好,Dreamweaver要錢,而且很多書交了一堆軟體操作方式,看完語法也是一知半解
2017-04-06 13:05:58
阿杰
大大你覺得Expression Web好用嗎
2019-04-06 22:24:23
深海異音
用 visual studio code。
網頁很多東西都是運行在Linux上面,而且很多是圖形界面沒辦法處理的,所以只推薦用vscodr之類的純文字編輯器。
所見即所得沒有太大幫助,更別提是一個已經停止維護好幾年的軟體
2019-04-06 22:29:23
阿杰
明白 那VS Code大大有什麼推薦的插件來幫助寫網頁嗎 因為目前導師都叫我們用Expression Web內建代碼來用Table和Form所以我想說VS Code有沒有類似的插件
2019-04-06 22:36:21
深海異音
要學的是快速產生程式碼的技巧
例如在vscord裡面輸入「table>tr*3>td*2」,然後按「tab」
就會直接產生一個3列2欄的table
2019-04-06 22:40:13
深海異音
其實非常不建議用圖形化界面來開發網頁,現在網頁跟伺服器的技術都已經不是10年前能夠比擬,不是滑鼠點一點拉一拉就能處理。
如果要用那種沒有彈性的東西,直接開一個google協作平台就行了,一行程式碼都不能寫就能產生網站
2019-04-06 22:45:39

更多創作