歡迎來到網頁技術的世界！
你有沒有想過，瀏覽器是如何將一堆程式碼變成精美的網頁？或者 Google 是如何能在不到一秒的時間內，精確地找到你想要的資訊？在這一章節，我們將揭開網頁技術（Web Technologies）的神秘面紗。我們將探討網頁的基礎結構、搜尋引擎如何對網頁進行排名，以及當你點擊按鈕時，「思考」過程究竟發生在哪裡。
如果覺得資訊量太大也別擔心，我們會將其拆解為四個簡單的部分。讓我們開始吧！
1. 三大支柱：HTML、CSS 與 JavaScript
製作網頁就像蓋房子一樣。要建造一棟實用且美觀的房屋，你需要三樣東西：結構、裝飾，以及公用設施（如水電系統）。在網頁開發中，我們也使用三種特定的語言來達成這些目的。
A. HTML (超文本標記語言) - 結構
HTML 是網頁的「骨架」。它定義了網頁中「有什麼」。它使用標籤 (tags) 來告訴瀏覽器：「這是標題」、「這是段落」或「這是一張圖片」。沒有 HTML，網頁就沒有內容。
B. CSS (串接樣式表) - 外觀
CSS 是網頁的「油漆與裝飾」。它告訴瀏覽器 HTML 應該「看起來怎樣」。你可以使用 CSS 來調整顏色、字體、邊距和版面配置。將內容 (HTML) 與樣式 (CSS) 分離是一個核心原則，因為它讓你只需更新一個 CSS 檔案，就能改變整個網站的外觀。
C. JavaScript - 行為
JavaScript 增加了「互動性」。如果 HTML 是骨架，CSS 是油漆，那麼 JavaScript 就是電力系統。它處理如圖片輪播、表單驗證，或是當你按下「讚」按鈕時會發生什麼事。它讓靜態網頁變得動態 (dynamic)。
房屋比喻：
- HTML： 磚塊、牆壁與木樑。
- CSS： 壁紙、地毯與牆面油漆顏色。
- JavaScript： 電燈開關、門鈴與智慧溫控系統。
快速回顧： 記住，HTML 提供內容，CSS 提供樣式，而 JavaScript 提供功能。
2. 搜尋引擎索引 (Search Engine Indexing)
網際網路上有數十億個網頁，搜尋引擎是如何找到正確的那一個呢？它們並不會在你每次輸入搜尋指令時才去搜尋「即時」的網路，那樣太慢了！相反地，它們會搜尋一個索引 (index)。
索引是如何建立的：
1. 爬取 (Crawling)： 搜尋引擎會使用名為蜘蛛 (spiders) 或爬蟲 (crawlers) 的軟體。這些程式會造訪網頁，讀取內容，並追蹤網頁上的每一個連結以發現新頁面。
2. 索引 (Indexing)： 蜘蛛找到的資訊（關鍵字、元數據和內容）會被儲存在一個龐大的資料庫中，稱為索引 (index)。
3. 搜尋 (Searching)： 當你搜尋某個項目時，搜尋引擎會在它的索引中尋找符合的內容，而不是直接在真實的網際網路上搜尋。
關鍵點： 如果一個網站沒有被索引，那麼無論它內容多好，都不會出現在搜尋結果中！
3. PageRank 演算法
如果有 1,000 個網頁都在討論「巧克力蛋糕」，Google 是如何決定誰排第一呢？他們使用一種稱為 PageRank 的演算法（以 Google 共同創辦人 Larry Page 的姓氏命名）。
運作原理：
PageRank 將從 A 頁面連到 B 頁面的連結視為一項信任投票。然而，並非所有投票的權重都相同！
- 來自高排名網站（如 BBC）的連結，比來自全新部落格的連結更有價值。
- 指向某個頁面的連結越多，該頁面的權威性 (authority) 就越高。
- 如果一個頁面有太多連出的連結，那麼它分配給每個連結的「價值」就會被稀釋。
（簡化後的）公式：
頁面 \( A \) 的 PageRank 是透過此邏輯計算的：
\( PR(A) = (1-d) + d \left( \frac{PR(B)}{L(B)} + \frac{PR(C)}{L(C)} + ... \right) \)
其中：
- \( PR \) 是該頁面的 PageRank 值。
- \( d \) 是「阻尼係數」(damping factor)（通常設定為 0.85），代表使用者停止點擊連結的機率。
- \( L \) 是該頁面上的外部連結數量。
你知道嗎？
PageRank 不僅僅看有多少人連結到你，它還看是「誰」連結到你。這代表品質與數量同樣重要。
4. 客戶端 (Client-Side) 與伺服器端 (Server-Side) 處理
當你使用網頁應用程式時，程式碼會在兩個不同的地方執行。理解「工作」發生在哪裡對於考試至關重要。
A. 客戶端處理 (Client-Side Processing)
客戶端 (Client) 指的是你筆電或手機上的網頁瀏覽器（如 Chrome、Safari 等）。客戶端處理意味著程式碼被下載並在你的裝置上執行。
- 用途： 初步表單驗證（例如檢查電子郵件是否有「@」符號）、動畫效果以及本地互動元素。
- 優點： 速度快（無需等待數據在網際網路上傳輸），並減輕伺服器的負載。
- 缺點： 可能會被使用者竄改（對於密碼檢查等安全性事務來說並不安全）。
B. 伺服器端處理 (Server-Side Processing)
伺服器 (Server) 是遠端那台強大的電腦，負責「託管」網站。伺服器端處理意味著數據會被發送到該電腦進行處理，處理結果再回傳給你。
- 用途： 資料庫查詢（如搜尋產品）、處理付款以及安全登入。
- 優點： 安全性高得多，並且可以存取無法塞進你手機的大型資料庫。
- 缺點： 數據來回傳輸需要時間（延遲 latency）。
餐廳比喻：
想像你在餐廳裡：
- 客戶端： 你在餐桌上自己加鹽。你自己動手，馬上就能完成，廚師不需要操心。
- 伺服器端： 你請廚師煎牛排。你不能在餐桌上自己煎（你沒有烤架），這樣更「安全」（廚師知道如何處理生肉），但你必須等待服務生把餐點送回來。
要避免的常見錯誤： 不要假設所有事情都發生在伺服器上！例如滑鼠移到按鈕上時按鈕變色，這類簡單的互動幾乎都是在客戶端處理的。
最終重點回顧
1. HTML/CSS/JS： 分別負責結構、外觀與行為。
2. 索引 (Indexing)： 蜘蛛爬取網路以建立可搜尋的資料庫。
3. PageRank： 一種基於連結品質與數量，以數學方式為網頁排名的機制。
4. 處理 (Processing)： 使用客戶端處理以追求速度與介面效果；使用伺服器端處理以確保安全性並處理資料庫。
恭喜你讀完了網頁技術的筆記！休息一下吧，然後試著向別人解釋「房屋比喻」——這是確保你真正理解的最棒方法！