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是要慢慢記在腦中的(不急,不必立即背)。排名不分先後:

Subscribe to TechRD.in

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
jamie@example.com
Subscribe