HTML EP.1 Desert

本課教學附件:HTMLBD.pdf (269KB)

HTML看似複雜,其實是你不想學而已,HTMLBD.pdf現今,我們日常生活中,程式已經變成我們不可或缺的一部分了。簡而言之,程式就是我們的未來,不要去逃避。歡迎來到HTML的教學,這是第一章,我們將會學到HTML最最…最基礎的知識,則在下一章,才會漸漸地詳細了解。

第一課 認識HTML

HTML長什麼樣子,如何去辨認它?


HTML看起來非常簡單,就像這樣:

<p>文字</p>

以上程式碼在瀏覽器會顯示成「文字」。

其實並不難吧!讓我們來解析吧!<p>與</p>裡面的P都是由「<」與「>」所包起來的,以此類推,看見由「<」與「>」所組成的程式,我們可以粗略地分辨為,這應該是HTML。則P這個英文字,在「<」與「>」裡面,代表的是,要告訴瀏覽器說,我是顯示文字的HTML。

可是,另一個問題又來了…,HTML不是由「<」與「>」其中包著英文字母,但是…在範例中,其中一段HTML是</p>,這不是多了一條斜線嗎?

不用太擔心,讓我們從瀏覽器的角度來看,假如,瀏覽器正在看你的HTML把你的程式呈現在你的螢幕上,當瀏覽器一個一個程式碼看過去,可是瀏覽器很笨,它不知道要從哪一邊開始看你的HTML。

為了幫助瀏覽器這個白癡,因此,我們在剛剛範例中其中一段<p>後面加上斜線,也就是「/」,再告訴瀏覽器,只要有加斜線的HTML片段(也就是剛剛的</p>),就是那段HTML的結尾,好讓瀏覽器看得懂。反之,沒加斜線的<p>是開頭。

另外還有非常重要的一點,<p>與</p>裡面的「文字」在瀏覽器會變成「文字」。

第二課 非常基礎


現在,我們會辨認HTML,知道為什麼HTML長這樣,現在,繼續讓我們深入一點點的了解HTML的最基礎。

在第一課,我們學到了<p>與</p>,為了方便解釋,我們稱<p>與</p>為<p>標籤。通常<p>標籤,是用來顯示文字的。接下來,我們會學到各種顯示文字大小不同的方式。

如果是標題文字的話,我們會用<h1>標籤來顯示,副標題我們會用<h2>標籤來顯示。<h3>,是小標題,以此類推,每當H後面的數字越多,文字越小,逐到了<h6>。

要如何運用<h1>到<h6>呢?看看以下範例:

<h1>大標題</h1>

以此類推,使用<p>標籤的方法。

從這些重點,我們知道了,HTML的標籤內,被包著的是會在瀏覽器中顯示的內容,但是在下一課中,我們會知道,其實,不一定是所有東西會顯示在網頁上。

第三課 運用基礎


我們在這一課,會運用到第一課、第二課的基礎,現在,就讓我們開始學習吧!

其實,HTML裡面的所有東西,不一定全部都會顯示在網頁中,有一部分是你看不到的地方。讓我們把HTML的檔案,譬喻成一個人,人的什麼地方,會被看見呢?當然是Body,也就是身體,因此HTML裡面,也是同樣道理,放在<body>裡面的東西,是可以被顯示在網頁上的。

等等!!標籤內只能放文字嗎?才沒有這一回事情!你可以在標籤內,放置標籤,在標籤內,再放入標籤,直到無限…,想放幾個標籤都可以,只要你開心就好。

回到正題,Body是可以被看到的,那…不能被看到的是在哪裡?在程式中,不能被看到的東西,應該是程式在處理資訊的地方,反過來想,人類處理資訊的部位在哪裡?當然是在頭部,所有,在HTML裡面,處理資訊的標籤是在<head>裡面。

<body>是HTML的身體,<head>是HTML的頭,可是,這個時候,瀏覽器又笨得像智障一樣了,他只知道你給他檔案的副檔名是.html,他卻不知道這個檔案要用什麼語言來讀取,我們也拿瀏覽器沒辦法,只好再告訴瀏覽器這是用HTML寫的。需要一個「宣告」,與標籤,告訴瀏覽器,此時,告訴瀏覽器的「宣告」,與標籤要如何在HTML程式碼裡面顯示呢?

宣告的語法,我們使用<!DOCTYPE HTML>來宣告。使用<html>包起來。

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *