Web Design | 網頁設計小筆記（一）
一個網頁設計需要的基本要件是什麼呢？
Mar 18, 2023
本次的學習重點：
一、WWW與主從式架構
二、網頁設計需要學習的程式語言 — 前端（Front-End）與 後端（Back-End）語言
一、WWW與主從式架構
WWW（World Wide Web）又稱全球資訊網，也是我們口中常說的Web，是一個透過網際網路（Internet）存取，由許多互相連結的超文字組成的資訊系統[1]。
那全球資訊網是一種主從式（Client-Server）系統：
- 主端是指伺服端（Server）的Web伺服器，存取HTML網頁、圖片、資料庫和相關檔案。
- 從端是指客戶端（Client），意即使用者執行瀏覽器的電腦，負責與伺服器溝通，和讀取伺服器的資料，它傳送的內容是HTML網頁原始程式、圖片、資料庫和相關檔案。
- HTTP 通訊協定（Hypertext Transfer Protocol）是一種在伺服端（Server）和客戶端（Client）之間傳送的通訊協定，而 HTTPS（Hypertext Transfer Protocol Secure）也是一種在伺服端（Server）和客戶端（Client）之間傳送的通訊協定，但他們最大差異是在於加入了SSL加密協定，讓資料傳遞時更具安全性。
- 而資料加密/解密的工作，則在 OSI 7層中在表達層（Presentation Layer）處理。
二、網頁設計需要學習的程式語言
網頁設計需要學習的程式語言分兩大類型，一類是前端（又稱前台，Front-End）的程式語言，另一類是後端（又稱後台，Back-End）的程式語言。
前端程式語言：HTML、CSS、Javascript(簡稱JS)、XML
- 靜態網頁（Static Webpage）：僅能呈現文字、圖片跟連結和簡單的互動功能。
HTML：是一種用於建立網頁的標準標記(tag)語言，可以內嵌多種語言指令，如以下範例：
- CSS，可以使用 <style> 的 tag 包住CSS指令[3]：
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>- Javascript，可以使用 <script> 的 tag 包住JS指令[4]:
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>- PHP，可以使用 <?php ?> 的 tag 包住PHP指令[5]:
<!DOCTYPE html>
<html>
<body>
<?php
echo "My first PHP script!";
?>
</body>
</html>若網頁僅使用前端程式語言(如：CSS、JS)，檔案存取以.htm/.html存檔；而網頁除了有使用前端程式語言外，還有使用後端程式語言(如：PHP)，檔案存取則以.php存檔，否則含有後端程式語言的網頁則無法順利開啟。
更多關於這些程式語言的介紹，可以參考MDN這份文件。
後端程式語言：PHP、ASP.NET、Java、JavaScript、Python
- 動態網頁（Dynamic Webpage）：提供伺服器及使用者溝通功能，伺服器會依使用者輸入資料產生變化，如：Facebook、Google
- 後端負責資料庫的存取
- 選擇使用哪種資料庫管理系統（Database Management Systems，DBMS），如：MySQL、SQL Server、Oracle
- 學會SQL（ Structured Query Language）指令
select *
from stud
where name="張三"3. PHP、ASP…
