在這個年代，網頁開發技術愈加成熟繁複。互聯網上有不少應用程式提供網頁設計工具，透過方便易用的界面讓不懂網頁開發的人輕易設計出一個簡單的網站。不過，網頁技術的發展多變萬化，這些工具往往需要不少時間才能追趕最新的網頁技術標準，方便用戶。你有沒有想過趁空學習一下網頁開發？為什麼這個學習會對很多人都很受用呢？
學習網頁開發，可以讓你：
- 瞭解網頁技術的可行性: 如果你是從事市場推廣，你得要理解一個良好設計的網頁對客戶會有正面的用戶體驗或會留下深刻的印象。你好不要被一些守舊的開發人員騙你架上一個過時失色的網頁或是推翻你天馬行空的創意喔。
- 編寫 HTML 電郵: 純文字的電郵十分沉悶，就算你有精彩絕倫的文筆，都未能吸引別人的眼睛。編寫 HTML 電郵可以把你的設計天分套用在電郵當中，引人注目，加強電郵的宣導效果。
- 強化你的自傳或網誌: 你可能使用一些網誌發佈工具去建設屬於你的網頁空間，而學習一些 HTML 和 CSS 的技術可以令網頁脫離一式一樣的樣本設計，創出獨特和具個人風格的網頁。
如果你是網頁開發的新丁，在 Dexterux，你會閱讀 15 篇章的主要網頁開發技術，好好嘗試一下喔。
基本網頁架構
在前端網頁開發來說，這有三個方面的：
- HTML: 建立網頁的標示語言，內裡包括網頁資訊、文字內容和網頁架構等。
- CSS: 樣式表的語言，籍以進行畫面上的佈局、樣式設計，和指定各種網頁元素的視覺效果。
- JavaScript: 以 ECMAScript 基準定義下的程式語言，建立網頁中動態的邏輯，提供網頁、用戶、儲存資料、外部網頁或系統數據之間的互動。
前端/後端開發
- 前端開發：編緝用戶端的網頁，而這是直接由瀏覽器處理的。三個主要的範圍 - HTML, CSS, JavaScript 正是網頁前端開發的重要語言，提供相關的文件至瀏覽器轉譯成用戶看見的網站。這個網頁開發基本班會主要討論前端開發。
- 後端開發: 主要是有關伺服器的開發工作，包括數據庫運算、伺服器管理、系統性運算等
在哪裡寫程式碼？
因為前端網頁技術所使用的三款原始碼基本上只是純文字檔案，所以其實你可以直接使用記事本來編寫 HTML 網頁和儲存成 .html 檔案，再使用瀏覽器如 Firefox 或 Edge 就可以直接開啟觀看網頁了。
不過，使用記事本並不是一個很好的開發工具，因為記事本不能把各種開發語言好好標記顯示，未能有效和有系統地整理和閱讀程式碼。
程式語法就像你我對話寫字的語言文法，當你使用時，就得要跟從相關語法，瀏覽器才會明白和正確地處理你提供的原始碼，再向用戶顯示成網頁。
因此，你可以下載免費開源的程式碼編輯程式，如 Notepad++。而 OneDrive 則是一個雲端服務提供者，且支援網上編輯你儲存的原始檔。
IDE (整合開發環境)
在這個基本班，我會建議你下載一個 IDE ，方便學習。因為我們會需要設訂多個檔案，並互相參考，上述的程式碼編輯器未能如 IDE 提供的功能，讓我們設立一個虛擬的伺服器，仿如我們的網頁架構在網絡上，讓別人觀看。
Microsoft Visual Studio 是我個人推薦的 IDE 軟體。"Visual Studio 2017 Community"是可以讓學生、開源程式開發人員，和小型團體免費下載並進行開發工作 (下載時謹記閱讀相關的使用條款喔)。這個 IDE 更不只局限於網頁開發，亦適用於 Windows 桌面和 iOS、Android 和 Windows 應用程式，所以如果你之後有興趣的便可以繼續使用這個 IDE 的。
開始囉!
現在，讓我們創建一個新網站嘍。一個網站的架構，就像一個資料夾，所以你可以先在你的電腦建立一個新資料夾。這個資料夾將會儲存你的 HTML 網頁 (.html)、樣式表 (.css)、JavaScript 編碼 (.js)，跟其他網站需要的檔案，比如是圖片。
在建立新資料夾後，你可以建立一個新的純立字檔案，命名為"index.html"。這個檔案，將會是你網站的入口網頁。你可以在 Notepad++ 或任何你喜歡的 IDE 編輯這個檔案。因為你未有在這個檔案寫入東西，如果你以瀏覽器開啟這個檔案，網頁就是空白一片的。
如果你使用 Visual Studio，你可以跟隨以下的步驟去創建那個 HTML 網頁檔案：
- 在檔案總管建立一個新資料夾
- 開啟 Visual Studio，在上側工具列點選 File ▸ Open ▸ Web Site...
- 選取剛剛你新建立的資料夾，按下 Open
- 一個空的 Visual Studio 網站開發環境已經準備好囉。在右側欄的 Solution Explorer ，你可以找到你的資料夾的喔。
- 在上側工具列點選 File ▸ New ▸ File...
- 選取 HTML Page，並命名成 "index.html"，接著按下 "Add"
- "index.html" 會在 Visual Studio 中開啟了，你可以編輯這個檔案了
- 在上側工具列點選 Debug ▸ Start Debugging... (F5) ，或按下工具列上那個寫有瀏覽器名稱的綠色箭頭，你就可以看見在瀏覽器上的這個網頁，因為沒有寫上東西，這是空白頁。
- 在你離開 Visual Studio 前，他會詢問你是否儲存 "[你的資料夾名稱].sln"。當你儲存後，在下次開啟 Visual Studio 時，在上側工具列點選 File ▸ Recent Project and Solutions ，你就可以自動找到你的網站了。
網站資料夾 / URIs
你新建立的資料夾，將會代表你的網站。當你使用 IDE 開始除錯 (debug)，網站會透過本機伺服器 (Local Host) 以 "http://localhost:XXXX" 的網址建立了一個臨時網站。這只有你可以看到，當你稍後取得網址和透過 FTP 上傳網站後，你的網址就會是 "http://www.[你的網址].com"。怎樣去找網址、去寄存你的網站將會在基本班的最後簡介一下。
以 localhost 為例，如果你日後再在你的資料夾建立新資料夾名為 "img"，這個資料夾的位置將會是 "http://localhost:XXXX/img/"。
明白 URIs (Uniform Resource Identifier) 是十分重要的，因為當你要連接網頁與網頁、或加入相片等情況時，這種檔案之間的連結需要以 URI 來指明另一個檔案的位置。
- URI 絕對位置：這種位置需要是完整列出的，如："http://localhost:XXXX/img/icon.png" 或 "http://localhost:XXX/food/search.html"。這需要列出你的網址及所有資料𡙁的位址。
-
URI 參考 - 同一資料夾：如果你需要連結的檔案在現時網頁的檔案的同一個資料夾或以下，你可以直接列出這個檔案的名稱或屬下位址。
如果你在編輯這個網頁 "http://localhost:XXXX/category/index.html"，URI："drinks/juice.html" 即是代表 "http://localhost:XXXX/category/drinks/juice.html"。 -
URI 參考 - 根資料夾 (root): 如果你需要連結的檔案是在另一個資料夾內，你可以不需寫下網址，而先寫上 "/" ，再寫下那個檔案的位址。
如果你在編輯這個網頁 "http://localhost:XXXX/category/index.html"，URI: "/img/hotdog.jpg" 即是代表 "http://localhost:XXXX/img/hotdog.jpg"。
如何學習網頁開發？
以上是由 CSS 動畫製作的。
可能有些人曾經想過透過上課學習網頁開發。不過我個人認為不必要浪費這些金錢。網頁技術是千變萬化，你需要謹記的就是自學能力。學習網頁開發就如學習其它編程，很大程度你需要自行學習，你更需要多點吸收新的資訊和適應新的變化。 in a fast pace.
網絡上有很多資源可以讓你自學。Mozilla Development Network (MDN) 是一個免費優質的地方，讓你深入參考各種網頁技術。例如，你可能曾經聽問 CSS Filter，當你想深入瞭解時，搜尋 "CSS Filter mdn"，即可以在 MDN 看到有關 CSS Filter 的詳細說明和相關實例。
在 Dexterux，我會提供輕易的路程，讓新丁們嘗試開始你們網頁開發的道路。接下來的 14 篇章，你會閱讀和嘗試一些基本的 HTML, CSS 和 JavaScript。
通常這些個人網站提供的導覽都會比 MDN 或官方技術說明文件容易閱讀，但網絡上提供的很多都已在 90 年代或 00 年代初期編寫了，而近年的網誌多只零碎地提供最新技術的個別分享。我會讓你接觸很多基本的開發方法和接觸最新的技術和概念。
希望你會使用約一個月的時間，慢慢接觸和嘗試網頁開發吧。