[轉職軟體工程師、自學程式語言]什麼是 Web Development and HTML ? 第一章 : Internet 是如何工作 ?

部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/

我們今天講的主題是， 什麼是 Web Development and HTML ?，大綱如下

第一章 : Internet 是如何工作 ?

第二章 : Web Development ?

第三章 : HTML ?

════════════════

第一章 : Internet 是如何工作 ?

我們每天都在看網頁對不對 ? 舉個例子來講。假設說今天我要在 Google 上面查 Node.js ，我會在網址欄輸入 https://www.wikipedia.org/wiki/Node.js，如下 :


那各位沒有想過，從我按下 Enter 到這個網頁跑出來，背後到底發生了什麼事情呢？

首先，我們可以先把這個 URL 就是我們輸入的這個網址欄，先分成三個部分，如下 :


● 藍色的部分「https://」我們稱為「protocol」，中文的意思就是「通訊協定」，你的 Browser 跟你的 Server 可能要遵守某一些協定，就是要做某一些制式的訊息交換，那我才可以拿到這個網頁。

● 綠色的部分「www.wikipedia.org」，我們稱為「domain address」，你是要連到哪一個「網域」的網站。

● 紅色的部分「/wiki/Node.j」，我們稱為「path」，通常就代表了這個網站所提供的一個resouce，就是一些資源的目錄。

當你按下 Enter 時，URL 裡的「domain address」先拿出來去問   DNS (Domain Name Server)，得知「www.wikipedia.org」所代表的 IP 是什麼，「198.35.26.96」得到之後你的 Browser，就可以連到對應的 Web Server。

再來就是看你是用哪個   protocol   通訊協定來去跟   Web Server   要網頁「www.wikipedia.org」的哪一個path「/wiki/Node.j」。


HTTP 裡面的 P 是 Protocol 的意思，就是上述講的通訊協定，把他想成   machine 講的話，定義為   machine 之間要交換資訊的話，這些資訊要有那些欄位

 

首先，它定義兩種型態的   message ，一種是   request ，一種是   response

 

Request : (送請求給Server)

● GET : 跟   Serve  r   要   resources   ，它就把網頁回傳給你

● POST : 跟   Server   說我要修改   resources   的   path

● PUT : 增加   resources   到   Server   裡面

● DELETE : 刪除   Server   裡面的   resources

Response : (Server回傳)

● 200 OK : 沒問題回傳網頁給你

● 300 moved : 網頁已經移到另一個地方了，再送一個請求去改到新的   path

● 400 Not Found : 你輸入的   path 對   Server 來講是不存在的

● 500 Server Error : 不是   Browser 的錯，是   Server 沒有辦法處理，可能系統出了問題在維修或是有Bug


HTTP 它的 Messages 實際上長什麼樣子呢 ?

基本上可以分成三個部分，initial line，header lines，body

● initial line (橘色): 你要求 (request) 什麼 resources，回傳 (response) 給你 code

● header lines (綠色): 你要求 (request) 什麼 resources 時，其它要包含的東西

● body (紫色): 網頁要的東西放在 body 裡面

最後就由 Browser 顯示出網頁

一個 resources 可以有不同的呈現格式 : HTML，XML，JSON 等。

再來是說明，Chrome Inspector，在一個網頁中按 F12，或按右鍵→檢查，或按Chrome右上方的三點控制列表→更多工具→開發人員工具，如下 :


這個 Chrome Inspector 可以看到這網頁的原始碼，我們先切換到 Network 的部分，可以看到你的 Browser 和 machine 交換了什麼 messages，可以看到上述所提到的 request，response 的所有資訊。

════════════════

第一章 : Internet 是如何工作 ?

第二章 : Web Development ?

第三章 : HTML ?

部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/

════════════════

痞客邦 : https://warlimit.pixnet.net/blog?utm_source=PIXNET&utm_medium=navbar&utm_term=my_blog

隨意窩 : https://blog.xuite.net/warlimit/blog

Blogspot : https://warlimit.blogspot.com/

如果您喜歡我的文章，請幫我在下方拍手區按圓圈圈裡的拍手圖案5次!
我將得到 Likecoin 的回饋:)

回饋由 Likecoin 基金會出資，您只要註冊/登入帳號(fb、google帳號都可以註冊，不超過1分鐘)，按五次左鍵，可以贊助我的文章且完全不會花到錢！若願意成為讚賞公民那是十分感激。
支持創作，正向交流:)

位置： 台灣

留言

張貼留言

這個網誌中的熱門文章

如何開始 Podcast 製作教學 5大步驟 ! 不需任何成本方法

圖片
  部落格轉移，給讀者更好的閱讀體驗， 本文網址 :   https://pse.is/3klspx   如何開始 Podcast 製作教學 5大步驟 ! 如果您正在尋找指導您 如何開始 Podcast 的指南 ，那麼您絕對來對地方了…… 開始播客並不難，但您需要執行許多步驟才能啟動播客。 在本 Podcast 製作教學 中，我們將引導您完成該過程的每一步： 選擇主題和名稱 節目和劇集格式 封面藝術創作 前奏和後奏音樂 設備選擇 錄音和編輯 提交給 Apple 播客 (iTunes) 促銷提示 以及更多… 與 Youtube 相比，播客是一個不那麼擁擠和競爭激烈的領域，因此 現在 是開始的最佳時機。 截至 2021 年 6 月，播客數量剛剛超過 175 萬，但博客數量超過 6 億！ 如果你想知道，在過去的幾年裡，我已經幫助成千上萬的人開始播客，並且我自己也在不同的行業開始了一些節目。 想要快速開始播客？註冊 Firstory 、 SoundOn ，上傳您的音頻文件，然後平台會幫你自動提交給各個播放平台 Spotify 、 KKBOX 、 Apple Podcast 、 Google Podcast 、 Pocket Casts 。 讓我們開始吧： 規劃 這是 Podcast 製作教學 的初始（經常被忽視）階段。在您繼續前進之前，您會想在這裡度過大量時間。 隨時拿出筆記本或白板，這樣您就可以像專業人士一樣開始計劃您的播客。 選擇一個主題 您希望您的播客專注於特定主題或細分市場。 嘗試將範圍縮小到您可以在多集（100 多集）中談論的內容，但范圍不會太廣，以至於您不會吸引潛在觀眾。 例如，與其進行“戶外”播客，不如談論遠足——或者更具體的，比如遠足。 隨著您越來越受歡迎，您可以隨時擴展您的主題。 重要提示： 請參閱有關選擇名稱的部分，以確保您不會限制自己。 選擇共同主持人（不一定需要） 您有想要共同主持的朋友、商業夥伴或同事嗎？ 如果您有共同主持人，開始播客會容易得多。 如果你們就某個話題分享自己的觀點，自然會進行更吸引人的對話。讓某人保持正軌也很有幫助。 此外，您可以拆分編輯、推廣等其他任務。 不過也有缺點。 你要確保你們都長期致力於它。它有助於從一開始就設置時間表，這樣您就知道每週什麼時候開...
閱讀完整內容

[Udemy推薦課程] Day 2 The Web Developer Bootcamp 2021 [轉職軟體工程師，自學程式語言]

圖片
  部落格轉移，給讀者更好的閱讀體驗，本文網址 :  https://janstockcoin.com/blog/ 今天大綱如下 : ➤ 了解Inline Elements 和 Block Elements ➤ - div & span ➤ - hr & br ➤ - sup & sub ➤ - em & strong ➤ HTML 符號實體代碼 ➤ - header & footer ➤ - main & nav ➤ 快速縮寫 ➤ 了解 Inline Elements 和 Block Elements 接下來，我們介紹兩個新元素，Divs 和 Span，但首先要介紹兩個重要的  Inline Elements 和 Block Elements 。這些術語指的是給定元素如何實際適應文檔中的內容流。 Block Elements : Block Elements始終從新行開始。Block Elements始終佔用可用的全部寬度（盡可能向左和向右伸展）。Block Elements具有頂部和底部邊距，而Inline Elements則沒有。 Inline Elements : Inline Elements不會從新線路上啟動。Inline Elements僅佔用必要的寬度。 ​ 部落格轉移，給讀者更好的閱讀體驗，本文網址 :  https://janstockcoin.com/blog/ ➤ - div & span <div> HTML <div> 元素（或是 HTML 文件  Block Elements ）是本質上不特別代表任何東西的通用内容流容器。它可以成為樣式化用途（使用 class 或 id 屬性）、或是共享如 lang 同一個屬性的元素集合。它應該在沒有其他適合的語義元素（例如<article> 或 <nav> ）可用時才用。 ​ ​ <span> HTML <span> 元素是短語内容的通用   Inline Elements ，並没有任何特殊語義。可以使用...
閱讀完整內容

2021年一夜致富，市值60億美元， 什麼是以太坊經典 ETC

圖片
部落格轉移，給讀者更好的閱讀體驗， 本文網址 :   https://pse.is/3j2ys3 什麼是以太坊經典 ？ 什麼是以太坊經典 ？以太坊經典（ETC）是一個去中心化、基於區塊鏈的開源計算平台，也是一種加密貨幣。它允許開發人員構建和部署智能合約——自主、自動執行的代碼塊，根據預定義的條件觸發某些操作。 ETC 網絡是無需許可的，這意味著任何人都可以加入和執行交易，只要他們擁有兼容的加密錢包。在臭名昭著的 DAO 攻擊之後，由於以太坊社區內的意識形態和技術分裂，它於 2016 年成立。 概括 什麼是以太坊經典 ？以太坊經典 (ETC) 源於以太坊社區中的意識形態和道德裂痕，至今仍引發爭議。2016 年，對運行在以太坊 (ETH) 區塊鏈上的第三方應用程序進行了重大黑客攻擊，導致價值數百萬美元的以太幣或 ETH 被盜。作為回應，以太坊區塊鏈經歷了一次硬分叉，從本質上扭轉了官方分類賬中的黑客行為，並將被盜的 ETH 歸還給其原始所有者。 相比之下，這個分叉的另一個分支保持了包括黑客在內的官方賬本不變——旨在保留一個 100% 不可變的賬本。換句話說，由此產生的兩個區塊鏈只有一個方面不同：一個仍然包含黑客攻擊和被盜 ETH 的記錄，而另一個本質上倒轉時間，就好像黑客從未發生過一樣。編輯後的區塊鏈保留了以太坊 (ETH) 的綽號，而原始/未更改的區塊鏈被稱為以太坊經典 (ETC)。 以太坊經典的起源 區塊鏈經歷硬分叉並將自己分成不同的區塊鏈的原因有很多。有時分叉是技術升級的結果。其他分叉源於社區對擬議協議變更的深刻分歧，最終將項目及其支持者分裂為不可調和的派系。此類協議更改可能來自改進現有功能的前瞻性努力，也可能是對錯誤和黑客攻擊造成的損害的反應。後一個實例導致了以太坊分叉，從而導致了以太坊經典（ETC）區塊鏈的創建。 2016 年，以太坊區塊鏈（稱為The DAO）上的一個應用程序遭到黑客攻擊，導致大約 360 萬個以太幣 (ETH) 被盜——2016年價值約 5000 萬美元——隨後價值數十億美元。為了進一步說明這次黑客攻擊的嚴重性，當時流通的 ETH 大約為 7200 萬個，因此黑客竊取了現有所有 ETH 的 5% 左右。 為了從以太坊的賬本中清除黑客行為並將資金返還給其原始所有者，以太坊核心開發人員選擇實施硬分叉。新創建的賬本逆轉了黑...
閱讀完整內容