iT邦幫忙

2021 iThome 鐵人賽

DAY 3
0
Modern Web

你阿嬤成為網頁前端工程師的第一步系列 第 3

[Day 3] 阿嬤都看得懂的 HTML 在幹嘛

阿嬤都看得懂的 HTML 在幹嘛

If a picture paints a thousand words, Then why can't I paint you? - If, lyrics

昨天我們提到前後端的分別,讓我們稍微回憶看看。呃,好,我知道你阿嬤的記憶力可能沒那麼好,不過應該還算可以記得

  • 前端......瀏覽器............
  • 後端......伺服器............
    吧!? 忘記也沒關係,現在你阿嬤記得了!

昨天也提到,儘管網頁看起來像是張很長的海報,但是網頁本身並不是張很大的圖片!網頁看起來像圖片,是因為前端工程師對瀏覽器下了文字指令,讓瀏覽器按照這些文字指令,畫出--沒錯,術語叫作「渲染」出--這張很長的海報。

在深入介紹渲染的細節以前,讓我們來玩這個遊戲:畫海報版的比手畫腳!小劉先當畫的人,手上有張空白的海報;而我們這些劉姥姥手上有張畫好的海報,嗯,我們就先挑這張好了:

但是我們只能用說話的方式,告訴小劉怎麼畫出這張海報。

我們可能會說:

在畫面左邊有個滑雪的女人,佔了整個海報的一半。
畫面上方 5/8 是藍色的天空。
然後剩下底部的畫面都是白色的,是個滑雪場。
右上角有 6 行白色的文字,第一行是 "Montreal";
第二、三行是 "Winter Sports"。
剩下三行是日期,分別是 "JAN 19"、"FEB 23"、"1924"。......

讓我們仔細看看上面我們說的這段話,會發現我們很常先跟小劉說說「」某個東西,再說這個東西大概長怎樣,例如:

在畫面左邊有個滑雪的女人,佔了整個海報的一半。......
右上角有 6 行白色的文字,第一行是 "Montreal"......

更精確地,這句話其實是在說:

有個圖片,這個圖片長得像這樣--寬大概佔海報的一半,位置在整個海報的左邊,圖片內容是個滑雪的女人。

還有這句話也符合上面的這個格式:

右上角有 6 行白色的文字,第一行是 "Montreal";

這句話其實是再說:

有個區塊,這個區塊長得像這樣--位置在整個海報的右上角,內容是 6 行文字,其中有行文字,這行文字長得像這樣--位置在這個區塊的最上方,文字的顏色是白色,而文字的內容是 "Montreal"。

這句話甚至提到有兩個東西,其中一個包著另一個!

你可能會說,其他幾句話看不出這樣的格式啊!沒關係,讓我們挑幾句來仔細看看:

畫面上方 5/8 是藍色的天空。

仔細想想,這句話是不是其實是在說:

有個區塊,這個區塊長得像這樣--高度大概是整張海報的 5/8,位置在整個海報的上方,顏色是藍色的。(至於是不是天空,其實這是看的人自己的解讀了。)

呢?

而這句話可能更複雜了:

然後剩下底部的畫面都是白色的,是個滑雪場。

這句話應該是在說:

有個區塊,這個區塊長得像這樣--高度大概是整張海報的 3/8,位置在整個海報的下方,顏色是白色的。這個區塊中,有張圖片,這張圖片長得像這樣--它的內容是個滑雪場。

對上述語句分析感興趣的阿嬤可以參考英國哲學家羅素的 On Denoting 這篇文章。

我們在「畫海報版的比手畫腳」這個遊戲當中,告訴小劉怎麼畫出海報的方式,其實就是各位阿嬤變成前端工程師後,告訴瀏覽器怎麼渲染出網頁的方式。我們會先告訴瀏覽器什麼,然後再告訴瀏覽器這個東西長怎樣

那麼,你阿嬤會怎麼告訴瀏覽器,底下這張網頁長怎樣呢?

你阿嬤大概會這樣說:

整個網頁有 2 個主要區塊,第一個區塊長得像這樣--高度大概 8%,底色是白,位置在最上方,這個區塊裡面又有 3 個區塊,其中第一個區塊長得像這樣--寬度大概是 1/3,位置在最左邊,裡面又有 2 個東西,其中第一個是個圖片,圖片內容是 Facebook 的 Logo............

沒錯,我們都會先告訴瀏覽器在這個網頁上,哪些東西,像是文字啦、區塊啦、表格啦、按鈕啦......然後再告訴瀏覽器這些東西長怎樣,像是寬度高度、位置、和其他東西的距離、內容、顏色、字體......

當然,我們和瀏覽器溝通的時候,並不是用中文或英文,而是使用特殊的語言。我們會使用 HTML 這個語言告訴瀏覽器,這個網頁中哪些東西--或者用蝦趴的術語來說,告訴瀏覽器這個網頁中有哪些「元素」(element);再使用 CSS 這個語言告訴瀏覽器,這些元素長怎樣--或者用蝦趴的術語來說,告訴瀏覽器這些元素的「樣式」(style)。

我們會在後面的章節,告訴各位阿嬤 HTML 和 CSS 具體而言怎麼寫。不過,讓我們來做個有趣的實驗。讓我們開啟電腦,使用 Chrome 這個瀏覽器,點開蘋果的網頁

蘋果的網頁以設計精緻著稱,是不是非常美呢?

那麼,我們要開始窺探這位美人的內在秘密了。

讓我們按下 F12,開啟發展者工具 (DevTool)。在這裡,我們可以看見前端工程師告訴瀏覽器怎麼渲染畫面的指令,也就是 HTML 與 CSS 怎麼寫。

左半邊就是發展者工具,在點選上方我畫紅圈的 "Element" 後,底下紅框中的,就是 HTML。目前看不懂是很正常的,我們在後面的章節中,會介紹 HTML 怎麼寫喔!

那麼,我們怎麼知道網頁中的哪個東西,對應到這些 HTML 的哪些段落,或用專業術語說,對應到哪些 HTML 「標籤」呢?很簡單,只要按下左上角的我畫紅圈中的按鈕:

再把滑鼠游標移到網頁的某個元素上,在發展者工具中,就會直接把這個元素對應的 HTML 標籤反白:

怎麼知道這個反白的 HTML 標籤,就是我們指到的那個 "iPhone" 的按鈕呢?很簡單,讓我們刪掉這個 HTML 標籤看看。在那個 HTML 標籤上面按右鍵,再跳出的選單中點選 "Delete element",就可以刪掉這個 HTML 標籤了。

然後,我們就會發現,網頁中的 "iPhone" 這個按鈕也跟著消失囉!

因此,我們可以發現,HTML 確實是前端工程師告訴瀏覽器,網頁上什麼元素的語言喔!


上一篇
[Day 2] 阿嬤都看得懂的前端與後端怎麼分
下一篇
[Day 4] 阿嬤都看得懂的 CSS, JavaScript 在幹嘛
系列文
你阿嬤成為網頁前端工程師的第一步30

尚未有邦友留言

立即登入留言