呀哈囉。
以下文章為尖端出版社小說平台原創星球作者頁面語法所設計。 前幾課會簡述一些語法概念，後幾課會放上實用案例。
因為裡面有我高中時期的故事，其實，這也是一篇小說（嗚，我很需要達人專欄曝光啦……）
最近挺多人詢問我怎麼把原創星球的頁面弄好看，身為程式碼社畜，網頁語法雖然不是吃飯工具，卻有閒暇時餘研究的心得。
然而──
一切得從那個女孩說起。
說到HTML語法，不由想起高中時期的無名小站時光。
那時候，我暗戀著同班同學，坐在我後座的她，還保持著國中規定的髮型，眼角下有顆痣，臉蛋超可愛。
但由於礙於太過靦腆不知道如何表達真心，我不知道如何向她表達我喜歡她。
於是當時的我，把所有的少年愁一鼓作氣地打在無名小站上──那是一個同學們喜歡放上充滿閃字的少女合照的地方，也是一個少年少女寫下心情的地方。
然而，名網誌支援HTML語法，可以放一些酷炫小時鐘、看文一定要配的哀傷音樂（強制播放）（也需要使用HTML語法）。
總之為了經營那邊、為了表達我的心情，我去學了點HTML語法。
我的單戀都透由HTML語法隱藏在網誌。
那無法訴說的情懷，透由HTML語法，讓我得以吶喊。
HTML語法，是我的詩。
當所有事物隨著青春之流而逝去，留在我身邊的只剩HTML語法。
如今，已不再青春的我在原創星球經營作者專頁，靠著這些經驗，得以使用HTML語法編織出一個風騷頁面。隱藏在我頁面的語法，隱約呈現我年輕時的歡笑、眼淚、夢想。
但我知道，不能一直把HTML語法留在身邊。
我一直很清楚……把他自私地留在我身邊……只會侷限他的未來。
時候到了。
只能，努力面帶微笑。
將自己珍貴的事物，託付……大家。
哦，對了
這是我在原創星球的版面
第一課，ＨＴＭＬ基本結構說明。
Html是一種包夾語法。這種包圍概念承襲自Xml架構，源自於第二次世界大戰的列寧格勒圍城戰，用元素(Element)的包夾戰術將目標狠狠地包起來使其無法逃離掌控，更化身為類似恐怖情人的存在，讓裡面的子元素被外圍元素的控制慾影響，於是──
◎HTML要訣：
一個元素有起頭，就得有結尾。
<html> ←左邊沒反斜符號的是起頭，右邊有反斜符號的是結尾→ </html>
◎HTML要訣：
必須注意階層結構！
因為有包夾系統，會使它擁有階層結構的概念，以下先用抽象概念解釋。
<班級>
<同學A>
<小黃瓜>
</小黃瓜>
</同學A>
<同學B>
<數學課本>
</數學課本>
</同學B>
</班級>
上面的結構很明顯可以看見裡頭有一個班級，班級裡有兩位同學，兩位同學身上各帶一個物品。
因為有階層關係，假設我們移動整個班級，兩位同學跟他們身上的物品也會跟著被移動，這種父級會影響子級的概念非常重要。
如果沒注意到這個，可能會發生「奇怪我明明沒有加這個效果，為什麼他會出現這個效果？」的問題，因為有可能是子級被父級影響。
第二課，屬性(Attributes)的說明。
一個元素，能被塞很多屬性到身上，可以塞得滿滿滿，整、整個都變成屬性的形狀了……❤
於是正經的這邊，再次利用上個抽象概念繼續說明──
◎HTML要訣：
元素後面可以用屬性塞爆塞滿！
<班級 width=100px height=100px align=center>
<同學A>
<小黃瓜>
</小黃瓜>
</同學A>
<同學B>
<數學課本>
</數學課本>
</同學B>
</班級>
注意，屬性間要用半形空白隔開喔！
以上的範例，這班級共被塞了三個屬性：寬度100像素、高度100像素、對齊置中。
於是這個班級會變成100px乘以100px的空間。因為置中對齊的套用，所有的同學老實會排隊到教室中間，然而所有同學的物品也會有被放到中間的概念──例如同學B的數學課本也會在他身上置中，也許像超人力霸王那樣卡在頭上；同學A的小黃瓜會被怎麼影響？大家也可以舉一反三。
第三課，基礎的標籤有哪些？
在此先介紹一個網站w3schools，基本上裡頭的教學會比我這篇文完整千百倍。如果您比較喜歡這邊，直接到裡頭學習會有更正確、更棒的學習效果。 以下教學也會依附該站的教學連結做說明，並且也請大家使用該站的Tryit Editor v3.5編輯器，這是一個能夠馬上得到語法效果的工具，可以用來練習語法技巧。練習方法很簡單，把該網址內的工具預設文字刪光光再貼文字上去，並且按下Run>>。 （因為本文在巴哈姆特，無法使用tab做出縮排效果。為了版面美觀，在此故使用全形空白替代tab，如果要把我的碼複製到網站工具測式，請務必把全形空白刪除乾淨避免影響實際效果。）
◎HTML要訣：
請先了解用基本元素！
可以用這個標籤在一個段落內，給文字換上不同屬性
範例：
<span>內容可以放一般文字</span><span style=color:red>不換行，卻換顏色</span>
我們的文章有大標中標小標，因為在原創星球有該網站套用專屬的CSS格式，使用後應該會出現該站的標題格式。
範例：
<h1> 第一層標題</h1>
<h2> 第二層標題</h2>
這個標籤最大的特色就是一旦標籤結束就會換行
範例：
<p>第一行<p><p>跳到第二行</p>
範例：
可以讓一段文字擁有超連結，以下範例必須修改網址喔！
<a href=https://goo.gl/QC1tTb>芸光的原創星球，這不是置入行銷</a>
裡面可以包很多東西，可以拿來大範圍套用效果，也可以用來當作資料夾
範例：
<div style=color:blue>
<span>卡位</span>
<p>換行</p>
<a href=https://goo.gl/QC1tTb>芸光的巴哈姆特，這也不是置入行銷</a>
</div>
自己想要的圖片要改裡面的網址喔！
<img src=https://goo.gl/dp3JcA></img>
接著，以下兩標籤比較特殊，不適用於包夾語法原則。只需要開頭標籤就有效果，不需要結尾標籤。
<br>
<hr>
最後附加一個怪招：
這兩個標籤是一組的，可以下收裡面的內容。
<details>
<summary>下收物的標題</summary>
<p>裡面的內容</p>
<p>同學A的小黃瓜</p>
</details>
第四課，格式用標籤有哪些？
◎HTML要訣：
格式元素用來疊加，創造變化！
<b></b>
<i></i>
<s></s>
<u></u>
<sup></sup>
<sub></sub>
<mark style=background-color:red></mark>
因為顏色可以做許多變化，所以多了屬性標籤要調整
以上所有樣式都可以疊加。
例如：
<b>
<i>
<s>
我擁有粗體加斜體加刪除線的格式！
</s>
</i>
</b>
第五課，style屬性是魔法咒語。
雖說這次要介紹的style也是屬性(Attributes)之一，但它能容納的內容更是包羅萬象，之所以稱它為魔法咒語，因為它神奇，也因為它複雜。
而它運作的概念則是用裡面的值覆蓋掉元素所套用的CSS樣式；因此，如果要精通style屬性操作，可能還得去觸碰CSS語法。講到這邊還沒碰過相關知識的朋友可能覺得我在講外星咒語了，但別怕，如果仔細去了解也會發現好用的CSS屬性就那幾個，不會複雜到像一本超大字典。
這裡姑且先用常用、簡單的方式說明。
<班級 style=color:#FFFFFF;font-size:14px; align=center></班級>
在上面結構，只在班級元素裡塞了兩個屬性，style、align，但在style屬性之下又被塞了color、font-size兩種CSS描述（改變顏色與字級）。
而在CSS描述中，兩個是用冒號（:）當作屬性名稱與值的區隔、用分號（;）當作敘述結尾。
因此格式大略是──
style=屬性A:值;屬性B:值;
依此類推。以這原則，能夠在裡頭無限制地疊加效果描述。
如果是對HTML整體架構比較熟練的朋友，在此可以查看看CSS屬性表，會發現打開了新天地；如果還不熟悉可以先別急著去試，之後會提供一些範例。
第六課，實用範例，把div變成框，框中加框完整架構。
現在開始就是變化招式了，這些招式都會是以上所講過的東西的組合技能，我們姑且使用div加上style屬性來製作一個框。
（碼會長到有點不好閱讀請見諒）
<div align=center>
<div style=background-color:#FFE8BF80;border-radius:24px;color:white;width:200px;height:200px;>我是一個框</div>
</div>
以上範例用了兩層div，第一層是置中，第二層則是用style屬性加入效果。
style效果如下：
改變背景色票(十六進位色碼如果不懂,可以用這個工具找你喜歡的顏色) background-color:#FFE8BF80;
把邊框改為圓角，並指定為24像素
border-radius:24px;
將內容文字改變顏色(如果要用字串指定顏色，可以查詢這邊) color:white;
改變寬高為200像素
width:200px;
height:200px;
使用以上語法就可以畫好一個基本的框，於是我再用同樣的招式，在框內多塞幾個框──
（碼會長到有點不好閱讀請見諒）
<div align=center>
<div style=background-color:#FFE8BF80;border-radius:24px;color:white;>
<div style=background-color:#ccccff;border-radius:24px;width:200px;>
</div>
<div style=background-color:#cce6ff;border-radius:24px;width:200px;>
</div>
</div>
</div>
只要用上以上招式，就可以用框畫出些自己想要的版面框架了。
目前所教的招式，可以做出大部分的網頁效果，至於如何排列組合也請各位多多思考，這是非常有趣的過程喔！
第七課，原創星球的作者介紹欄，並不是純正的網頁程式碼編輯環境。
因為考慮更多普通使用者（不會語法的用戶）能使用該站的編輯功能，網站有強制改變一些習慣。
例如我們在上面提供的測試網頁的換行必須用<br><p>等等的標籤才會有效果，但網站上的換行卻會因為我們按下Enter出現的段落標紀而有效用。
因此我們複製別人的碼，可能會出現很多莫名其妙的空行，這些都是因為多餘的段落標記（Enter）導致，要好好檢查並且刪除乾淨，語法才會出現我們預期的效果。
另外原創星球也不支持"符號，如果不小心用到也會出現問題，但只要刪光即可正常，要多加注意。
然而為了網頁安全性，站方也不可能將一些有風險的功能開放給使用者使用。
例如執行Script、廣域CSS宣告之類的功能，都可能造成大規模排版破壞、使用者被惡意引導到奇怪的網站等等的問題。
開放HTML給使用者更高的編輯權限相對的也會換來許多風險，當初也因為當初與一些朋友玩語法玩太over，一度導致站方考慮關閉這項功能，所以在獲得這項方便的同時，也請不要拿來做出太過破壞版面的惡作劇，如此才可安定地用續使用這項功能。
最終課，請善用別人的智慧。
這邊置負責引入門以及說明一些基礎概念，因為針對原創星球語法，其實不是相當純正的HTML課程。
如果要查詢更多功能，也可以利用GOOGLE關鍵字來獲得方法。
例如我們想要找置中功能，就直接在GOOGLE打「HTML 置中」這類關鍵字，搜尋結果會一狗票。
然而我剛提供的網站w3schools如果有耐心看完，大概就擁有架設一整個美麗的靜態網站的技術了。 另外HTML的花招真的是多到爆炸。關於影片、噗浪、GOOGLE插入的方法，哩哩那邊已經有一個教學了，這邊就不多加說明囉。 如果你擁有強烈的好奇心觀察別人的招式，在Chrome瀏覽器也可以按下F12耐心地把碼給翻出來。
大家如果要分享自己設計的版面，也歡迎在留言區放大家的網址哦。
以下是我專頁的完整語法，歡迎複製修改
使用前請記得備份原版
<div style=background-color:#FFE8BF80;padding:8px;border-radius:24px;color:white align=center><b>自我介紹</b></div><div style=background-color:#FFFFFF80;padding:24px;border-radius:24px align=center><a style=color:#505050>呀哈囉，我是芸光！
基本上我寫的文看起來都很舒壓～
可以配茶看。
但要小心別噴茶哦！
屬性：光屬性 ， 天賦：被吐槽
</a>
</div>
<div style=background-color:#FFE8BF80;padding:8px;border-radius:24px;color:white align=center><b>哪裡找得到我？</b></div><div style=background-color:#FFFFFF80;padding:24px;border-radius:24px align=center><a style=border:none;background-color:#4267B2;border-radius:24px;font-size:16px;margin:4px2px;color:white;padding:15px; href=https://goo.gl/FJQC3J>粉專</a> <a style=border:none;background-color:#039CAD;border-radius:24px;font-size:16px;margin:4px2px;color:white;padding:15px; href=https://goo.gl/7anxXo>巴哈</a> <a style=border:none;background-color:#CF682E;border-radius:24px;font-size:16px;margin:4px2px;color:white;padding:15px; href=https://goo.gl/iLupnp>噗浪</a></div>
<div style=background-color:#FFE8BF80;padding:8px;border-radius:24px;color:white align=center><b>Other</b></div><div style=background-color:#FFFFFF80;padding:24px;border-radius:24px align=center><img src=https://getez.info/uploads/1496208673-PIfIl.jpg><details>您發現隱藏資訊了！
但在隱藏資訊裡並沒有有用處的訊息！</details></div>
創作內容
【寫作相關】 (0)
