Web 開發入門之1 用Text Edit寫一頁能在Browser 打開的 html

不日更新

到最最最後，用戶接觸的是Browser（你所看見的網頁），Browser的視覺傳達是受html/css約束，而一切的開發，便是怎樣組織及更新html/css的內容。

記著這句說話，Web的（目前）本質，是讓Browser畫出你的內容。

那麼如何指揮Browser繪畫呢？html

HTML是一種所謂Markup Language，所以老生常談的論調，在嚴格意義，用HTML並不是編程。但請不要低估了認識HTML的重要程度，因為到最後Bowser能按你所想地繪畫出網頁，都要經過HTML。

什麼是HTML

本質上，HTML是個純文字檔（純粹儲存文字的文件），一種按特定格式編排的文檔。
記得中文作文段首要空兩格、句終要寫句號、開引號關引號啊這些規則嗎？HTML大概便是另一套作格式。當然為了讓你的網頁更具風格，HTML加了很多獨特的規則，但從本質上來說也不過如此。

僅記：寫網頁，只是用特別的格式，指揮Browser作畫。

HTML 速速速成

HTML最最重要的一條規則便是<XXX>和</XXX> (或<XXX/>)。

記得，接下來你會學到很多<XXX> <YYY> <ZZ> <WWWW> <TT>, 這些一個個的被稱作html tag。你把他理解作開引號，Browser會按它們決定被「括」著的部分刻如何作畫。當然他們有些已經約定俗成，被大部分Browser良好支持，也有可能只是你為特定目的自行創作，但無論如何，Browser會處理他們。

而帶 </XXX>你只要看作關引號吧，你總要關引號來定義「作用域」（發揮作用的區域）。關引號也有一種樣式 <XXX abc='bbb' />，你可以理解作當一個開引號沒有東西要「引」著時，立刻關閉。

當你了解了這重中之重，對你來說，便具備了閱讀html文檔的條件。網頁，便是這樣一步一步構建起來。

小試牛刀

第一個網頁，不能免俗，必需由「Hello World」作起點（以便你日後看見Hello World便知其含義）。

我們會編寫一個最簡單的網頁，在Browser上顯示出「Hello World」。

第一步是打開任何純文字編輯軟件，例如「記事本」或「TextEdit」，如果條件允許，現在便搜索並下載Visual Studio Code以使用。

然後新建一個純文字文件並保存作index.html。這名字很重要，因為當你輪入一個網址，Browser會默認嘗試存取index.html，而在開發一個網站時，便約定俗成以此為入口。

當你保存完之後，便正式書寫吧。
輸入以下內容：

<html>
  <h>Hello World</h>
  <p>Hi, it’s me</p>
</html>

現在將文檔拖至Chrome開啟（嗯，你要接受Chrome霸權）。
怎樣，開心不開心，歡喜唔歡喜你的第一個網頁算是跑起來了。

這裡有兩個層次：
第一層，你向Browser說明了了「這中間的都是html的內容，請繪畫」
第二層你聲明了兩個內容，第一個內容是用 <h> tag 包起的 Hello World ，而第二個是用 <p> tag 包起的 Hi, it’s me （略顯孤單）。看得見他在Browser裡顯示的樣式不一樣嗎？這便是一些早已定義，公認的html標準標籤了。現在的主流標準是html5，有一個網站（更準確應稱其為組織）叫w3c，你可以在那裡查看所有早已定義好的tag。但先不用急著去做，只要收藏好，在路上無聊才看看，現在首要是繼續看下去。

接下來我會列出一堆最主要接觸的tag，這些tag是要慢慢記在腦中的（不急，不必立即背）。排名不分先後：