TWI638314B

TWI638314B - 編輯超文件標示語言文件之方法

Info

Publication number: TWI638314B
Application number: TW106127186A
Authority: TW
Inventors: 徐易聖
Original assignee: 易易資設有限公司
Priority date: 2017-08-10
Filing date: 2017-08-10
Publication date: 2018-10-11
Also published as: TW201911037A; CN109388787A

Abstract

一種編輯超文件標示語言（HTML）文件之方法，其包括：提供一編輯介面，其包括至少一代表一元素的電腦圖像及一轉譯按鈕；點擊一所述電腦圖像而使編輯介面顯示一對應於該元素的元素編輯窗格，元素編輯窗格包括至少一輸入欄位及一儲存按鈕；使用者於輸入欄位輸入其值，並點擊儲存按鈕，讓一腳本元素之中的一個對應於該元素的物件的屬性值被所輸入的值覆寫；點擊所述轉譯按鈕，使編輯介面顯示一HTML文件的內容，HTML文件的內容包括所有於編輯介面中顯示的元素，且HTML文件中的元素的內容係取自所述腳本元素中相對應物件的屬性值。

Description

編輯超文件標示語言文件之方法

本發明是關於一種超文件標示語言之編輯方法。

超文件標示語言（Hyper Text Markup Language，以下簡稱為HTML）是一種用於建立網頁的標準標示語言。一份HTML文件往往包括眾多HTML元素，這些元素例如由開始標籤、屬性、內容、結束標籤組成，每個元素中可能包含多個屬性，且每個元素的內容中還可能包括其他子元素，而這使得一份完整的HTML文件通常包括多個由父元素及子元素集合而成的巢狀結構。

目前已有適用於HTML的文字編輯器，這些文字編輯器會自動辨識已知的標籤、屬性，使其以不同顏色表現於文字編輯器中，以資區辨。除此之外，這些文字編輯器通常也會主動對子元素進行縮排，讓編輯者容易區辨各元素在巢狀結構中的階層。

雖然現有的文字編輯器可以協助HTML文件編輯者進行編輯，但是對於剛接觸HTML文件編輯的初學者而言，這些文字編輯器往往無法起到很好的輔助作用。初學者通常對於標籤及屬性的名稱還非常陌生，也尚未熟練專屬於不同標籤或屬性的語法。這導致初學者剛開始學習編輯HTML文件時，首先要先熟記標籤的屬性名稱及其語法，而該範圍的學習過程對於初學者來說往往是枯燥乏味且容易產生挫折的，且現有的文字編輯器通常並未特別著墨此部分的教學。

因此，如何降低設計HTML文件的學習門檻，協助初學者能更輕易、快速地進階到元素的編輯過程，且不需要花太多精力記憶標籤、屬性名稱及其語法，是值得本領域人士思量的。

本發明的主要目的在於提供一種能輔助初學者編輯HTML文件的方法。

為了達成上述及其他目的，本發明提供一種編輯HTML文件之方法，其包括：提供一編輯介面，其包括至少一代表一元素的電腦圖像及一轉譯按鈕；點擊一所述電腦圖像而使編輯介面顯示一對應於該元素的元素編輯窗格，元素編輯窗格包括至少一輸入欄位及一儲存按鈕，所述輸入欄位對應於該元素的元素標籤、元素屬性及元素內容其中一者；使用者於輸入欄位輸入其值，並點擊儲存按鈕，讓一腳本元素之中的一個對應於該元素的物件的屬性值被所輸入的值覆寫；點擊所述轉譯按鈕，使編輯介面顯示一HTML文件的內容，HTML文件的內容包括所有於編輯介面中顯示的元素，且HTML文件中的元素之元素標籤、元素屬性及元素內容至少其中一者的值係取自所述腳本元素中相對應物件的屬性值。

藉由上述設計，使用者通過輸入元素標籤、屬性、內容之值，即可輕易地透過系統將其設定轉譯成符合格式規定的HTML文件，能讓初學者快速上手HTML文件編輯，得到成就感，從而提升學習效果。

本發明係有關編輯HTML文件的方法，一份HTML文件通常包括多個元素（element），這些元素通常用包含於尖括弧「＜＞」中的元素標籤（tag）表示，在一般的情況下，一個元素由一對元素標籤表示：即「開始標籤」及「結束標籤」，結束標籤的名稱前有一個斜槓「/」，元素也可以含有元素內容（text），這些文字內容被放置在開始標籤與結束標籤之間。在開始標籤與結束標籤之間也可以封裝其他元素，被封裝的元素屬於子元素，相對地，封裝有該子元素者為其父元素。一個父元素內可以封裝複數個子元素，一個子元素內也可以再封裝其他以其為父元素的子元素。

為了定義各元素的屬性（attribute），可在元素標籤內放置元素屬性，一個元素標籤內可以放置複數個元素屬性。大多數的元素屬性是以「名稱=值」的形式表現，值一般由單引號或雙引號包圍，有些元素屬性無需成對出現，僅存在於開始標籤中即可影響元素。常見的元素屬性包括id屬性、class屬性及style屬性。id屬性為元素提供了全文件內的唯一標識，用於識別元素。class屬性提供一種將類似元素分類的方式，常被用於語意化或格式化。style屬性可以賦予元素特定的表現性質，比起使用id屬性或class屬性從樣式表中選擇元素，style屬性被認為是一個更好的作法。

因此，一個HTML元素的一般形式為：＜元素標籤元素屬性=”值”＞元素內容＜/元素標籤＞

有些特別的元素沒有元素內容，為空元素，其僅包含一開始標籤，例如＜img＞及＜br＞，這類空元素不會成為其他元素的父元素。

本發明所提供的方法涉及提供一編輯介面及允許使用者利用該編輯介面編輯HTML文件的步驟，第1圖所繪示者即為本發明第一實施例所提供的編輯介面，該編輯介面包括兩個電腦圖像1a、1b及一轉譯按鈕2，每個電腦圖像1a、1b即代表一個元素，使用者可點擊其中一電腦圖像1a、1b而使編輯介面顯示對應於該元素的元素編輯窗格3。在可能的實施方式中，元素編輯窗格常駐於編輯介面中；在其他可能的實施方式中，使用者點擊任一電腦圖像時，元素編輯窗格才自編輯介面中彈出。元素編輯窗格3包括三個輸入欄位4a、4b、4c及一儲存按鈕5，輸入欄位4a、4b、4c分別對應於元素標籤、元素屬性及元素內容，輸入欄位4a、4b、4c可供使用者輸入其值；以元素標籤為例，使用者可於代表元素標籤的輸入欄位4a中輸入div、h1、h2、script等元素標籤，可於代表元素屬性的輸入欄位4b中設定id、class、style等屬性，並可於代表元素內容的輸入欄位4c中輸入文字內容。使用者可藉由點擊儲存按鈕5來將輸入欄位4a、4b、4c中所輸入的值加以儲存，儲存是藉由執行一腳本元素（script element），使腳本元素中多個分別對應元素標籤、元素屬性及元素內容的物件的屬性值被所輸入的值覆寫。

前述腳本元素被嵌入一份編輯用的HTML文件中，所述「嵌入」包括直接嵌入及以外部javascript檔案的形式嵌入，這份編輯用的HTML文件被用來被網頁瀏覽器讀取，因此前述編輯介面可在網頁瀏覽器中呈現，可用的網頁瀏覽器包括但不限於Mozilla Firefox、Internet Explorer、Microsoft Edge、Google Chrome、Opera及Safari，其好處在於，使用者通常不需要額外安裝HTML編輯程式，即可執行本發明所提供的功能；以下例示性地說明前述物件： elements = { ele_001: { tag: 'div', attr: 'x', text: 'y' }, ele_002: { tag: 'h1', attr: 'm', text: 'n' }, }

上述例示中，共有兩個子物件被建立：「ele_001」及「ele_002」，這兩個物件個別包含三個屬性：「tag」、「attr」、「text」，其後的兩個單引號內所封裝者為其屬性值，其中「ele_001」例示性地對應於電腦圖像1a所代表的元素，「ele_002」例示性地對應於電腦圖像1b所代表的元素，「tag」例示性地對應於輸入欄位4a所代表的元素標籤，「attr」例示性地對應於輸入欄位4b所代表的元素屬性，「text」例示性地對應於輸入欄位4c所代表的元素內容。

前述「覆寫」的功能例示性地可由下列腳本元素中的函式執行： $(document).on('click', '#tag_ok', function() { var vId = $("#tag_id").children('span').text(), vTag = $("#tag_tag").children('span').text(), vAttr = $("#tag_attr").children('span').text(), vText = $("#tag_text").children('span').text(); elements[vId]['tag'] = vTag; elements[vId]['attr'] = vAttr; elements[vId]['text'] = vText; });

上述函式包括一個「onclick」函式，其中「tag_ok」例示性地代表元素編輯窗格3中的儲存按鈕5，亦即儲存按鈕5被點擊時，觸發其後所記載的事件。接著，利用「var」函數來宣告變數，首先宣告「vId」變數的值為該元素編輯窗格正在顯示的物件的id，例如「ele_001」；接著，宣告「vTag」變數的值為名為「tag_tag」的元素的值，其中「tag_tag」例示性地代表輸入欄位4a；接著，宣告「vAttr」變數的值為名為「tag_attr」的元素的值，其中「tag_attr」例示性地代表輸入欄位4b；接著，宣告「vText」變數的值為名為「tag_text」的元素的值，其中「tag_text」例示性地代表輸入欄位4c。藉由上述宣告，輸入欄位4a、4b、4c的值分別被暫存於「vTag」、「vAttr」及「vText」變數中。最後，令「ele_001」物件的「tag」、「attr」及「text」屬性的值等於前述「vTag」、「vAttr」及「vText」變數的值，即等同於原本「ele_001」物件的「tag」、「attr」及「text」屬性的值被輸入欄位4a、4b、4c的值覆寫。

另一方面，在可能的實施例中，當使用者點擊電腦圖像1a、1b時，元素編輯窗格3中的輸入欄位4a、4b、4c可預先載有前述腳本元素中相對應物件的屬性值。所述預載功能例示性地可由下列腳本元素中的函式執行： (document).on('click', '#tag＞div', function() { var vId = $(this).attr('id'), vTag = elements[vId]['tag'], vAttr = elements[vId]['attr'], vText = elements[vId]['text']; $("#tag_id").children('span').text(vId); $("#tag_tag").children('span').text(vTag); $("#tag_attr").children('span').text(vAttr); $("#tag_text").children('span').text(vText); });

上述函式包括一個「onclick」函式，其中「tag＞div」例示性地代表電腦圖像1a，亦即電腦圖像1a被點擊時，觸發其後所記載的事件。接著，利用「var」函數來宣告變數，首先宣告「vId」變數的值為該電腦圖像1a的物件的id，本實施例中電腦圖像1a的id例示性地被設定為「ele_001」；接著，宣告「vTag」變數的值為前述「ele_001」物件的「tag」屬性的值，其值在前述0017段中被例示性地預設為「div」；接著，宣告「vAttr」變數的值為前述「ele_001」物件的「attr」屬性的值，其值在前述0017段中被例示性地預設為「x」；接著，宣告「vText」變數的值為前述「ele_001」物件的「text」屬性的值，其值在前述0017段中被例示性地預設為「y」。最後，分別將「vTag」、「vAttr」及「vText」變數的值分別覆寫為id為「tag_tag」、「tag_attr」及「tag_text」的元素的內容，其中「tag_tag」元素例示性地代表輸入欄位4a，「tag_attr」元素例示性地代表輸入欄位4b，「tag_text」元素例示性地代表輸入欄位4c。如此，即可將暫存於「ele_001」物件中各相對應屬性的值預載於輸入欄位4a、4b、4c。

最後，當使用者完成所有元素的編輯作業之後，可藉由點擊轉譯按鈕2而在編輯介面其中一窗格6中顯示一份經過編輯的HTML文件的內容，這份HTML文件中的元素之元素標籤、元素屬性及元素內容的值是取自前述腳本元素中相對應物件的屬性值。此過程涉及將使用者所輸入的值轉譯為符合HTML規範的格式，其例示性地可由下列腳本元素中的函式執行： $(document).on('click', '#tag_code', function() { var vCode = ""; for (var key in elements) { var vTag = elements[key]['tag'], vAttr = elements[key]['attr'], vText = elements[key]['text']; vCode = vCode + '＜' + vTag + " Attr =" + vAttr + '＞' + vText + '＜/' + vTag + '＞\n'; } $("#text").children('pre').text(vCode); });

上述函式包括一個「onclick」函式，其中「tag_code」例示性地代表轉譯按鈕2，亦即轉譯按鈕2被點擊時，觸發其後所記載的事件。接著，利用「var」函數來宣告變數，首先宣告「vCode」變數為一內容空白的編碼變數。接著，執行一「for」函數，該「for」函數所記載事件的執行次數依「element」物件內含的子物件的數量而定，例如本實施例中，「element」物件中含有「ele_001」及「ele_002」兩個子物件，則執行兩次「for」函數所記載的事件，所述事件首先宣告「vTag」變數的值為前述「ele_001」物件的「tag」屬性的值，宣告「vAttr」變數的值為前述「ele_001」物件的「attr」屬性的值，並宣告「vText」變數的值為前述「ele_001」物件的「text」屬性的值。

接著，宣告原為空白「vCode」編碼變數的值為「vCode」編碼變數的原值加上「＜」字串、加上「vTag」變數的值、加上「 Attr =」字串、加上「vAttr」變數的值、加上「＞」字串、加上「vText」變數的值、加上「＜/」字串、加上「vTag」變數的值，最後加上「＞\n」字串，其中「\n」在後續網頁瀏覽器讀取的過程中會被視為換行指令。

當與「ele_001」物件相關的宣告均被執行完畢後，所述事件接著宣告「vTag」變數的值為前述「ele_002」物件的「tag」屬性的值，宣告「vAttr」變數的值為前述「ele_002」物件的「attr」屬性的值，並宣告「vText」變數的值為前述「ele_002」物件的「text」屬性的值，最後再依與前述0025段相似的步驟宣告「vCode」編碼變數。

以前述0017段所列的「element」物件內容直接進行轉譯為例，經過轉譯後的「vCode」編碼變數的值將成為：＜div x＞y＜/div＞\n＜h1 m＞n＜/h1＞\n。「for」函數執行完畢後，執行最後一個事件，亦即將「vCode」編碼變數的值覆寫為id為「text」的元素的內容，其中「text」元素例示性地代表窗格6，此時窗格6將顯示下列內容：＜div x＞y＜/div＞＜h1 m＞n＜/h1＞

如此，使用者只需填寫元素標籤、元素屬性及元素內容的值，藉由上述方法可將使用者所輸入的值轉譯成符合HTML規範的格式，相較於習用的文字編輯器，本發明的編輯過程顯得十分簡易。

請接著參考第2圖，所繪示者為本發明第二實施例所提供的編輯介面。本實施例中，編輯介面預設地將HTML文件中必然存在的文頭元素（＜head＞）及文體元素（＜body＞）區隔顯示，並以階狀圖表現父、子元素之間的階層關係。此外，在元素編輯窗格3中，另將常用的id屬性、class屬性、樣式屬性設定為各別獨立的輸入欄位，且元素編輯窗格3還可包括一顯示為「╳」的關閉視窗功能鈕7，當使用者點擊關閉視窗功能鈕7時，元素編輯窗格3被關閉；在可能的實施方式中，關閉視窗功能鈕7可被賦予與儲存按鈕5相同的儲存功能。前述輸入欄位可以預設由使用者自行填入內容；對於部份屬性來說，其能夠輸入的值僅為有限選擇，此時該輸入欄位可為下拉式選單、彈出式選單或附帶選項的彈出式選單，第3圖例示性地表現一種附帶選項的彈出式選單，該彈出式選單中有可供使用者輸入內容的欄位A、分別代表編碼分類的多個分類按鈕B1、對應於其中一分類的分類編碼內容B2，讓使用者更輕易地藉由在此選單中點擊或輸入數值，使用者點選這些選單中的選項、並點擊確認按鈕後，即等同於已在輸入欄位中填入相應的值。

在其他可能的實施方式中，本發明所提供的方法被封裝成一個可獨立執行的電腦程式，而不藉由網頁瀏覽器開啟。

1a、1b‧‧‧電腦圖像
2‧‧‧轉譯按鈕
3‧‧‧元素編輯窗格
4a、4b、4c‧‧‧輸入欄位
5‧‧‧儲存按鈕
6‧‧‧窗格
7‧‧‧關閉視窗功能鈕
A‧‧‧欄位
B1‧‧‧分類按鈕
B2‧‧‧分類編碼內容

第1圖為本發明第一實施例所提供的編輯介面。

第2圖為本發明第二實施例所提供的編輯介面。

第3圖例示性地表現一種附帶選項的彈出式選單。

Claims

一種編輯超文件標示語言文件之方法，包括：提供一編輯介面，該編輯介面包括至少一代表一元素的電腦圖像及一轉譯按鈕；點擊一所述電腦圖像而使該編輯介面顯示一對應於該元素的元素編輯窗格，該元素編輯窗格包括至少一輸入欄位及一儲存按鈕，所述輸入欄位係對應於該元素的元素標籤、元素屬性及元素內容其中一者；使用者於所述輸入欄位輸入其值，並點擊該儲存按鈕，讓一腳本元素之中的一個對應於該元素的物件的屬性值被所輸入的值覆寫；點擊所述轉譯按鈕，使編輯介面顯示一超文件標示語言文件的內容，該超文件標示語言文件的內容包括所有於該編輯介面中顯示的元素，且該超文件標示語言文件中的元素之元素標籤、元素屬性及元素內容至少其中一者的值係取自所述腳本元素中相對應物件的屬性值。
如請求項1所述編輯超文件標示語言物件之方法，其中所述編輯介面係由網頁瀏覽器所呈現。
如請求項1所述編輯超文件標示語言物件之方法，其中當點擊所述轉譯按鈕時，該腳本元素執行一轉譯指令而創造一內容空白的編碼變數，而後在該空白編碼變數中依序加上於編輯介面中所顯示的元素之元素標籤、元素屬性及元素內容之值，而後產生所述超文件標示語言文件。
如請求項1所述編輯超文件標示語言物件之方法，其中當使用者點擊所述電腦圖像時，該元素編輯窗格中的輸入欄位會載入該腳本元素中對應於該元素的物件的屬性值。
如請求項1所述編輯超文件標示語言物件之方法，係由一網頁瀏覽器透過讀取一嵌有所述腳本元素的編輯用超文件標示語言文件而實現。