iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 3
1
Modern Web

讓0基礎的你也能製作簡單wordpress主題系列 第 3

【Day3】Html基本結構大分析,讓新手的你也能簡單了解(前篇)

之前也有說過吧,html就是網頁的基本架構。不過html,究竟有什麼基本規則,html的基本結構,又是長什麼樣子呢?這篇文章將會為您一一分析。雖說這篇文章是說html,但為了希望大家之後更能學以致用,我們主要會集中提及一些與製作或改寫wordpress主題關聯較大的知識點作介紹。

好,廢話少說,我們立即開始吧/images/emoticon/emoticon08.gif

基本規則

由外走到內

我們可以把html的世界,想像成是自己家 ,我們要回到自己家,理所當然, 要經過自己家門吧,而在html的世界,越上代表越外,所以瀏覽器在讀取時,永遠是又上至下的

鑰匙鑰匙與鑰匙孔

html裏鑰匙鑰匙與鑰匙孔,可以把程式碼關起來

為了避免家中的財物被盜取,當你出門時,當然就要把門關上、鎖上。在html,每當你開了一段編碼時,你也必需要鎖上的。不過,鎖門是需要一條鑰匙與鑰匙孔匹配的鑰匙,才能鎖上的,那麼htm的鑰匙又是怎樣?

每一個在html裏的鑰匙孔,都是像這樣子的: <p>
那麼鑰匙當然也是很像, 他就只是在內裡加了個/: </p>

所以一個完整的編碼就是這樣啦
<p>……………… </p>

當然內裡不一定是p,可以是其他,當內裡不同,裡面代表的內容也就不同
更多例子:

<h1> ……</h1>
<head>……<head>

先鎖內,再鎖外

假設你外出時,是需要先經過一道木門,接著經過一道閘門,才能出到街外。好了,你現在需要在離開前,把所有門鎖上,那麼你會怎樣做,當然是先鎖內面的再鎖外邊的,對吧?不然根本鎖不到呀

在html也是一樣,一定要先把內面的鎖好,再來才把外邊的鎖上:

正確的
<div> 
   <h1>   </h1>
</div>

錯誤的
<div>
   <h1>    </div> 
</h1>

至於html的基本結構是長什麼樣子?我們先來張圖吧:

html的基本架構

上面這張圖是html的基本架構。看不懂?不用擔心,某程度上你可以把html的基本結構,想像成一個速遞包裹。一個速遞包裹,通常都會具有這些:

  1. 貨品名稱,讓顧客簡單知道接收的貨品,是什麼來的
  2. 包裝,要來包裹著貨物
  3. 電腦條碼,不過這通常不是給予顧客用的,而是方便速遞公司分類、點算貨物用的
  4. 當然是你訂購了的貨物啦

速遞包和html相似

很有趣的是,html也是包括上述這四項:

<!DOCTYPE html>

看起來好像很複雜,其實可以把它看成貨品名稱:html,簡單而言,他其實就是要來告訴瀏覽器: 「這裡是html來的喔 」

<html></html>

可以把它看成是速遞包裹的包裝,要來把內裡的html編碼包裹著裡面的內容

不過,你可能又會問? 我通常看到都會像這個樣子的:<html lang=" en-us">,那麼後面那串lang=" en-us",又代表著什麼?/images/emoticon/emoticon13.gif

不錯啊,找到這個例子的一個bug呢!

其實是這樣子的,在html的世界裡,<html></html>除了充當著包裝箱的功能,其實他還有個很重要的職責,也就是告訴搜尋系統,這個網站,究竟是用什麼語言寫的,幫助搜尋器,用正確的語言,去解讀你的網站,這對於提升網站在搜尋器的排名,也就是我們俗稱的seo,是有幫助的。

提供所屬語言,對html有幫助

我們把lang=" en-us這串字翻譯成人看得懂的文字,就會變成這樣:語言:英文,地方:美國
是不是立即看懂呢?其實就只是這麼簡單

<head></head>

可以把它看成是速遞包裹上的條碼,和條碼一樣<head></head>主要並不是給用家看,而是協助瀏覽器、搜尋系統分類的,不過我們還是可以在一些地方看到他們的蹤影,最常見就是網頁搜尋器了

不過,問題來了,我們都知道條碼一般會提供貨物資訊、郵遞地址、收件者等資料html的<head></head>通常又提供什麼資料?

它的功能,可多呢!

1 加入網頁標題

可以在這裡加入網頁標題</title>。這樣搜尋器才能在用家搜尋網站時,根據你的網站標題,介紹給用家。這個我們通常都可以在搜尋器搜尋網站時看到,另外在分頁欄位也會看到的網頁名稱喔

搜尋器
搜尋結果裡面看到的網頁標題

分頁欄位
在分頁欄位看到的網頁標題

在html裏的寫法會是怎樣?通常是:<title>你的網頁名稱</title>
前後的<title>< /title>,就是這段碼的主要核心,他能夠告訴到搜尋系統,『這是網頁標題啊』

2 為搜尋引擎提供一個網站指引

可以在這裡加入一個給搜尋引擎系統看的網站指引,告訴搜尋系統,希望你的網站,在搜尋結果裏,是怎樣出現。常見而又還是有用的,大概有這三個:

標題

標題,在編碼裏又稱為meta title tags ,相比起前面提及的title,meta title tags 並不是必要的,通常搜尋系統都會使用title , 而較少使用meta title
通常在html裏的寫法是這樣的:
<meta name="title" content ="我是標題^^">
meta name="title"這部分是在告訴系統,這是標題來的。
content ="我是標題^^"部分就是要來放你要的標題

文字簡述

文字簡述,在編碼裏又稱為meta description,通常我們會在搜尋結果裡見到。雖然不會直接影響到搜尋排名,不過,因為一個好的meta discription ,它的存在,就好像書的內容簡介,能夠幫助您瞭解處的內容,是否合適你看,並能夠吸引到用家打開網站。

搜尋結果會看到的文字簡述

meta description tags在html裏的寫法和title分別不大,就只是把title改成 discription:
<meta name="discription" content ="我是描述Zzzz">

設定某網頁版面該不該出現在搜尋系統

好,到最後那點了。在編碼裏,稱為meta robots tags。,透過meta robots tags,就能夠讓那個版面,在搜尋結果裏,不會出現,也能夠讓你的網站頁面,不會連去。

通常是長這樣子的:
<meta name=”robots” content=”noindex , follow“>

當中:nonindex,能令系統不把你網頁頁面放到搜尋結果裏,若改成index,則變成允許。

Follow,允許反向鏈結。您可以把反向鏈結理解成推薦信,當你的網站有越多其他網站引用,或者被一些知名度高的網站引用,這代表網站有很多人推薦,可信度高。若改成unfollow,則不允許你的網站推薦其他人和被任何人推薦。通常這個設定只有一些大型討論網、社交網絡平台才會這樣做,例如facebook,twitter,付費連結、留言區也可加入。

3 控制你網站,在不同裝置上的畫面

meta viewport,讓您的網站能夠隨著裝置的螢幕大小,而適當去調適

在現在這個隨時隨地都用手機的世界,網頁能夠隨著裝置的螢幕大小,而適當去調適,網頁版面,即我們說的響應版設計,已經變得不可或缺

不過要注意響應版設計(RWD)和手機版設計(AWD),其實不盡相同,因為手機版設計通常是會另開一個網址,給手機用的,也因為這樣,每次需要更新時,都需要兩邊同時更新,極不方便。而響應式設計,則只需要一個網址就能夠做到。
具體編碼如下:

<meta name="viewport" content="width=device-width, initial-scale=1" >
width=device-width:螢幕寬度設置為裝置寬度
initial-scale=1 讓用家進入網頁時,讓縮放比例在100%

當然並不是只需要這個編碼就能夠做到響應式設計,還需要其他編碼的配合,不過這個還是重要的一步。如果沒有任可指示,哪怕你之後把所有事情設定好,瀏覽器還是會按照自己的想法,去調整你網站,在不同裝置的大小。這樣就會導致一個問題,也就是最終出來的結果,會和你原先設計的,有很大出入。

4連接其他檔案

在html內的head ,可以在裡面連接其他檔案

你們應該還記得吧,html只是網頁的基本架構,我們要為html,變得多樣化,就需要把css,javascript等檔案連接入去了。不過當然,除了css和javascript,還有不少檔案,外部連結,或者資源的伺服器(cdn)都可以連進去,常見的例如有google font , 一個常用的字體網站,fontawesome,一個常用的icon網站等

編碼例子:

<link rel="stylesheet" href="styles.css">

編碼拆解:

Link-告訴電腦這是連結
rel:"stylesheet "- 告訴電腦這是什麼類型的連結,""中間就是在說他屬於的類型,不過因為種類蠻多,這裡就不詳細列出了,只列出比較常見的吧:

Pingback : 在網誌裡頗常見到,當你的網站被其他網站使用時,就會收到通知,這樣你的網站連結,被人家連結時,您可以先查看那個網站,對於您網站的搜尋結果排名,有沒有幫助,在決定是否允許他去連接

Stylesheet: 只要需要連接任何的css、javascript檔案,就會用到

Icon: 就是連接icon

Profile: 雖然我們一般不會用到,但當你查看wordpress自家製作的主題時,就會看到,而通常都是連接去XHTML Friends Network 。雖然這個系統的原意,是希望你的能夠標籤到和其他人的關係,特別是有高地位的人,透過這樣,提升你網站的地位,藉此去影響您seo的排名,不過暫時這個技術並不純熟,用途不大

Href-告訴瀏覽器需要去什麼連結找檔案,””裏就是那個連結,連結可以是需要找的檔案位置、外連結或者資源的伺服器(CDN)

5 解碼方法

雖說你打了一堆html,但電腦還是需要選擇合適的解碼方法,才能夠把你打的html,解讀出來,最後把網頁呈現給您。一般現在的html,都是用UTF-8解讀的。

編碼如下:
<meta charset="UTF-8">

假如沒設定,亂碼就會出現了。

好,今天就到這裡了。很多謝大家這麼耐心地看完。至於body的部分,我將會在明天為你解釋。/images/emoticon/emoticon29.gif


上一篇
[DAY2] Wordpress主題結構大解構,讓你從wordpress的角度看網頁
下一篇
【Day 4】Html基本結構大分析,讓新手的你也能簡單了解(後篇)
系列文
讓0基礎的你也能製作簡單wordpress主題30

尚未有邦友留言

立即登入留言