在網頁中顯示HTML碼

以下是記錄在製作網頁時，怎樣在網頁中顯示程式碼：
使用工具有(1)Visual Studio Code(用作網頁編輯） , (2)code-prettify(使程式碼有顏色顯示，就像在IDE中的程式碼一樣)。

1. 在VS code中開啟一個新的檔案(此以index.html 作記錄)，並在編輯區輸入'html',此時VS code 會有一些選擇提供，請選擇'html:5',VS code就會自動把html的結構載入:
2. 在HTML程式碼中加入欲顯示的程式碼，此處以<pre><code>...</code></pre>括着欲顯示之程式碼：
3. 用瀏覽器打開剛剛的網頁，會發現欲想顯示的程式碼會被瀏覽器編譯出來：
4. 現開始把欲想顯示的程式碼使用code-prettify加入顏色及使用VS code中的replace功能把程式碼顯示。
5. 先Search 'code-prettify',GitHub網諳的那個google/code-prettify就對了:
6. 在github中按Clone and Download ZIP：
7. 儲存在與剛剛建立的網頁檔案中並解壓：
8. 在GitHub的網站上有教怎樣使用code-prettify的，其實可以在不Download的情況下使用，但現在只是自行測試，所以download下來使用，根據指示，是要導入run_prettify.js的JavaScript檔案，並在<pre>中加入class="prettyprint"：
9. 由於run-prettify的檔案在自己的電腦內，所以src的path也要改改，在<head></head>內加入<script src="code-prettify-master/loader/run-prettify.js"></script>，並在<pre>加入class="prettyprint"：
10. 那顯示程式碼色彩的部份便完成，接下來是把html 碼的 '<' 轉成 '&lt;' 以讓瀏覽器不認定那些是html 標籤，做法是先把那段程式碼選起來：
11. 再在VS Code 中選擇Edit > Replace :
12. 先按下右手邊那3橫(Find in selection),再在左手邊的Find鍵入 '<', Replace 鍵入' &lt;'  :
13. 之按下Replace那行最右手的那個鍵 Replace all :
14. 此時所選的那段程式碼中的 '<' 己更換成 '&lt;' 了：
15. 現在回到瀏覽器再重新載入測試頁，便會顯示那段程式碼了：
16. 如想在顯示的程式碼中加入行號，只需要在<pre>中那多個class 'linenums' 便行：
17. 儲存檔案後再重新載入測試頁：

~~ 完成 ~~
＊＊ 本文同時會張貼在rohole.com:  https://rohole.com ＊＊

PHP,MySQL,JavaScript入門好書介紹

 

圖片來源： http://lpmj.net/4thedition/

今次想介紹一本好書,就係O'Reilly出版,Robin Nixon寫嘅 "Learning PHP, MySQL, & JavaScript" 已經出到第四版,依本書可以話係我對PHP及MySQL網頁編程嘅啟蒙書,我係在公共圖書館借返黎的,當時係借中文譯版第二版,而點解我會覺得依本書係一本好書呢? 因為佢會由教用server開始,裝XAMMP(windows,Mac,Linux都有提點裝),介紹編輯器,PHP與MySQL的互動,當然仲有介紹JavaScript, Ajax, HTML5, CSS, JQuery等等,最重要佢有提一啲編程資安的資訊,跟住本書一步一步做到最後會做咗成個網站出黎(資質所限,我當然還沒有做到),所以一本咁全面嘅書係好值得介紹比想學及初學網頁編程嘅朋友們.當然我己經在灣仔電腦城二樓賣電腦書嗰間舖頭買咗第四版中譯本返屋企喇XD.

相關連結:
書本網站連結: http://lpmj.net/4thedition/

Amazon網站連結: https://www.amazon.com/gp/product/1491918667/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1491918667&linkCode=as2&tag=lephmyanja-20&linkId=EB4KF46RFKL4PXWM

博客來網站連結: http://www.books.com.tw/products/0010685274

＊＊ 本文同時會張貼在rohole.com:  https://rohole.com ＊＊

Godaddy hosting加入Let's Encrypt發行的certificate(https)

近期收到Let's Encrypt的電郵通知話我嘅cert就快到期，咁今日親有時間就動手搞搞自己個Rohole.com，在我兩個多月前申請使用Let's Encrypt時其實都搞咗成日，到今次更新張cert諗住有經驗會容易啲，但都搞咗幾個鐘(其實係自己唔記得點做啫XD)，所以要係呢到做個記錄，同時又分享下我嘅做法：

 1) 去到Let's Encrypt 網站: https://letsencrypt.org/ 按下首頁中間大大隻字既Get Started，跟住就會見到建議使用Certbot


 2）入到去好簡單美觀嘅Certbot首頁，選擇Software係用Apache on Other Unix，跟住會有教在Shell中download certbot-auto及更改為可執行檔案。(ps. 因為我係用自己嘅蠢方法，將cert放在自己電腦再手動upload上godaddy，因為其他方法都唔識所以咁做XD）  

3）Download 咗certbot-auto及更改為可執行檔案之後，就可以用佢網站內documention 內既command，即係: $sudo ./certbot-auto certonly --manual ，(留意: manual前係兩個 - , copy 時會變成一個)跟住佢會叫你入domain，咁我就更係入rohole.com
   

4）再之後會Note你話個IP address會公開記錄咗話係要求過取得certificate，選Y:

（ *** ps. cPanel就唔cap圖了 *** ) 

5）跟住就會要你確定server有個file，內裡有一串字，而我是用godaddy的linux server(最平嗰個)，進入到cPanel後選擇“檔案管理員"，跟住會彈咗個視窗出黎，選擇"Web Root (public_html)"及“顯視隱藏檔案 (名稱開頭是 . 的檔案)“ 

6）去到檔案管理員的版面，按下左上角"+資料夾"，跟住shell(step 5)中的指示新增".well-known"資料夾(記得有一點係前面)，後再double click".well-known" 再按 "+資料夾" 以新增 "acme-challenge"資料夾 

7）我自己用Fedora的，所以用gedit把shell(step 5)中所指示的那句約80多個英數字copy到gedit，存檔時記得file name是根據shell(step 5)的指引，即係那句約80多個英數字的開首約40多個英數字作為檔名 

8）回到cPanel中把剛剛的約40多個英數字作為檔名的檔案上傳到"acme-challenge"資料夾內 

9）又回到自己的shell(step 5)按Enter鍵，等一會就會Congratulations!你及說明幾時到期及張cert放在那裡

10）在shell中鍵入"su"(為方便直接用root身份)及輸入蜜碼，再鍵入"cd /etc/letsencrypt/archive"，再鍵入"ll"(兩個L)，會見到自己個domain，再鍵入"cd rohole.com"(當然係根據返自己個情況），進入自己domain個folder裡面，會見到4個file都係".pem"尾  

11）輸入"gedit cert.pem"，佢會用gedit開個file出黎，內容就係certificate，按"Ctrl + a"張內容全選，再按"Ctrl + c" copy自選內容，再去到cPanel中的“安全性"中有"SSL/TLS"並按下  

12）在"安裝並管理網站的 SSL (HTTPS)" 下，按下 "管理 SSL 網站"

13）在"安裝 SSL 網站"下的網域選取需要安裝cert的domain

14）在“憑證:(CRT)"中貼上剛剛copy出來的certificate.(Step 11) 

15）關閉Step11的gedit後，再在shell中鍵入"gedit privkey.pem"以開啟私蜜金鑰，同樣的把內容全都copy 

16）又回到cPanel中，在入了Step14的"憑證:(CRT)"之下的"Private Key(KEY)"中貼上剛剛copy的privkey.pem的內容

 17）最後在cPanel的底部按下“安裝憑證”，等一會便成功裝好憑證。 相關網站： https://letsencrypt.org/ https://certbot.eff.org/ https://hk.godaddy.com/ 

PS: 其實網上有好多教學，有啲用windows攞cert，有啲會比較簡單，希望依編文都有啲啲啲啲參考價值 XDD。

 PS2:＊＊ 本文同時會張貼在rohole.com: https://rohole.com ＊＊

網頁中的框中框的位置

曾幾何時,在學習html 的時候,經常想將 div 內的 div 放到指定位置,但總是不成功,如下圖:

外框往往縮到上面,無法框着內裡的框,而我的作法是內框的css定了 float: left; 或 float: right; 外框就唔設定overflow, 我明明html是這樣寫的:

<div id="box1">
   <div id="in_box1"></div>
   <div id="in_box2"></div>
   <div id="in_box3"></div>
</div>

div內div, 但係個外框點解會縮咗上去呢? 以前我的做法是唔要外框,直接將內框定位,但有時真係想加返個框框都無辦法,一路學下學下,睇下睇下,終於知到點做到, 只要在box1的css力加上 overflow: auto; (當然,係唔係auto 就自己決定) 咁就得.

上面例子網頁: https://rohole.com/exercise/box.html (原始碼加咗說明)

＊＊ 本文同時會張貼在rohole.com:  https://rohole.com ＊＊

HTML,Javascript,CSS,小習作

前幾個月都一直在網上自學Python,http://automatetheboringstuff.com/ 都係因為個人比較懶散,所以3～4個月都係睇到第11課，不過都真係獲益不少，又但係之前一直學習的網頁開發進度又慢咗落黎，算喇，Python都係睇到第11課後先放一邊，再來温一温習HTML，一直諗下有啲咩習作可以做一做，等自己記返啲啲啲啲HTML5啲嘢，就做一個用Javascript黎運算bit,byte,kilobyte...的轉換器喇，因為係電腦有時都見到啲用byte黎做單位嘅嘢，咁我心算又計唔到，又懶開個計數機出黎計，咁不如自己做一個轉換器喇(其實以上都係借口黎)，作為Javascript練習都幾好呀，咁就用咗1個星期嘅工餘時間黎搞依個頁面，好簡單，以我能力暫時係比到依啲出黎，希望有人見到都覺得有啲啲啲啲用。 

個Converter頁面: https://rohole.com/exercise/converter1.html

參考網站:
鳥哥的 Linux 私房菜: http://linux.vbird.org/
Will保哥： http://blog.miniasp.com/post/2010/04/08/unit-information-Bit-Byte-KB-MB-GB-TB-PB-EB-ZB-YB.aspx
W3school: http://www.w3schools.com/default.asp

 ＊＊ 本文同時會張貼在我的網站:  https://rohole.com ＊＊