創作內容

60 GP

[達人專欄] 【教學&小說】那些由HTML語法寫成的情詩(原創星球語法教學)

作者:Hikari Yun│2018-07-08 19:30:43│巴幣:120│人氣:2018

  呀哈囉。

  以下文章為尖端出版社小說平台原創星球作者頁面語法所設計。

  前幾課會簡述一些語法概念,後幾課會放上實用案例。

  因為裡面有我高中時期的故事,其實,這也是一篇小說(嗚,我很需要達人專欄曝光啦……)






  最近挺多人詢問我怎麼把原創星球的頁面弄好看,身為程式碼社畜,網頁語法雖然不是吃飯工具,卻有閒暇時餘研究的心得。

  然而──

  一切得從那個女孩說起。

  說到HTML語法,不由想起高中時期的無名小站時光。

  那時候,我暗戀著同班同學,坐在我後座的她,還保持著國中規定的髮型,眼角下有顆痣,臉蛋超可愛。

  但由於礙於太過靦腆不知道如何表達真心,我不知道如何向她表達我喜歡她。

  於是當時的我,把所有的少年愁一鼓作氣地打在無名小站上──那是一個同學們喜歡放上充滿閃字的少女合照的地方,也是一個少年少女寫下心情的地方。

  然而,名網誌支援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><span style=color:red>不換行,卻換顏色</span>

  標題樣式 h1~h6
  我們的文章有大標中標小標,因為在原創星球有該網站套用專屬的CSS格式,使用後應該會出現該站的標題格式。
  範例:
  <h1> 第一層標題</h1>
  <h2> 第二層標題</h2>

  段落 p
  這個標籤最大的特色就是一旦標籤結束就會換行
  範例:
  <p>第一行<p><p>跳到第二行</p>

  超連結 a
  範例:
  可以讓一段文字擁有超連結,以下範例必須修改網址喔!
  <a href=https://goo.gl/QC1tTb>芸光的原創星球,這不是置入行銷</a>

  區塊 div
  裡面可以包很多東西,可以拿來大範圍套用效果,也可以用來當作資料夾
  範例:
  <div style=color:blue>
      <span>卡位</span>
      <p>換行</p>
      <a href=https://goo.gl/QC1tTb>芸光的巴哈姆特,這也不是置入行銷</a>
  </div>

  圖片 img
  自己想要的圖片要改裡面的網址喔!
  <img src=https://goo.gl/dp3JcA></img>

  接著,以下兩標籤比較特殊,不適用於包夾語法原則。只需要開頭標籤就有效果,不需要結尾標籤。

  換行 br
  <br>

  分隔線 hr
  <hr>

  最後附加一個怪招:

  詳細資訊 details
  概要 summary
  這兩個標籤是一組的,可以下收裡面的內容。
  <details>
      <summary>下收物的標題</summary>
      <p>裡面的內容</p>
      <p>同學A的小黃瓜</p>
  </details>


第四課,格式用標籤有哪些?

  ◎HTML要訣:
  格式元素用來疊加,創造變化!

  粗體文字 b
  <b></b>

  斜體文字 i
  <i></i>

  刪除線 s
  <s></s>

  底線 u
  <u></u>

  上 sup
  <sup></sup>

  下 sub
  <sub></sub>

  底色 mark
  <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></班級>

  在上面結構,只在班級元素裡塞了兩個屬性,stylealign,但在style屬性之下又被塞了colorfont-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>


引用網址:https://home.gamer.com.tw/TrackBack.php?sn=4050358
All rights reserved. 版權所有,保留一切權利

相關創作

同標籤作品搜尋:原創星球|這真的是小說|而且也是教學文|也可以是業配文|還是希望對大家有幫助

留言共 13 篇留言

白髮控-戮劍心
優質給推

07-08 19:35

Hikari Yun
謝謝唷07-08 19:50
我素
所以同學A上課帶小黃瓜是要幹嗎? 我一邊看一邊思考這個問題良久

07-08 19:39

Hikari Yun
這個班級是餐飲科07-08 19:49
山梗菜
語法推一下[e12]
但是小說只有一部分而已?

07-08 20:05

Hikari Yun
其實一切都是為了合法上達人專欄硬要(X07-08 20:22
換氣後再潛入
如果A上的是烹飪課,那小黃瓜是適當的食材,然而B帶了數學課本...

07-08 20:33

Hikari Yun
多元教學,也許是下一堂課要用的喔!07-13 10:26
萱弟
原來y大除了作文神,連程式也會喔(⊙﹏⊙)
太神啦!!

07-08 20:33

Hikari Yun
吃飯工具呀!
除了寫作、語法之外,我還會饒舌哦!(不要亂講07-13 10:26
要汙不要優雅ღSuisei
不明覺厲

07-08 21:21

Hikari Yun
這次貼的教學對於沒學過的略有門檻,這邊會盡量寫得老嫗能解~"~07-13 10:27
腦內模擬
json萬歲,xml去死(誤

07-08 23:00

Hikari Yun
json比較瘦,其實我也比較喜歡。
但XML得以生存至今仍是有它無可取代的特性吧。07-13 10:28
夢墨輓歌
無名小站的回憶QuQ

07-09 09:16

Hikari Yun
對QQ
因為回憶,總是美。(《眼淚成詩》07-13 10:29
Tsu Li Gue
好文必須推爆[e38]

07-10 00:55

Hikari Yun
阿癸推爆!
https://emos.plurk.com/64c17b55bfca2eb5170618fd43125e2b_w48_h48.gif07-13 10:31
(๑˘• ¸•)˘〈影ヨ⁆
是無名經典音樂之壹耶! [e12] 過往的故事那裏,真是心有戚戚焉呀── [e29] 說來,在「無名」上的是被稱為 CSS ;那麼就是說「 CSS 在 HTML 的範疇內」這樣囉?還是自個兒弄錯定義了?最後,教學文;讚讚! [e30]

07-12 12:46

Hikari Yun
CSS 在 HTML 的範疇內是正確的喔。
https://goo.gl/ZDhCT8
網路時代最棒的地方就是所有的資料都在身邊唾手可得,等著我們去看XD
大略看過介紹,跟你所說的一致無誤。07-13 10:33
(๑˘• ¸•)˘〈影ヨ⁆
其實,是沒詳細鑽研加上記性弱爆,所以都是憑印象與馬上查詢輔助。 現在因為是正在巴哈,所以變成只剩常用 BBCode 的模式了。 XDD 上述範疇的敘述算是猜測(憑印象);可能也算以前確實有看過這樣的敘述。 [e29]

07-13 10:42

Hikari Yun
https://emos.plurk.com/402589ea56c5a9420e0db2c908fbc314_w48_h48.gif07-19 11:57
餅乾
這好實用XD

07-16 14:13

Hikari Yun
HTML碼開放所帶來的功能雖然強大,但卻有隱憂。
老實說關於這項功能的未來我其實挺擔心的。
orz07-19 11:59
血姬の仁子
小豬太可愛了吧!!!我決定留著了!!!

10-14 00:27

我要留言提醒:您尚未登入,請先登入再留言

60喜歡★MP678922 可決定是否刪除您的留言,請勿發表違反站規文字。

前一篇:[達人專欄] 【短篇】從... 後一篇:[達人專欄] 【恐怖小說...

追蹤私訊切換新版閱覽

作品資料夾

eden8787
加油~看更多我要大聲說3小時前


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】