Week 02:

More about vim:

 If you still cannot input Chinese characters after you define $LANG as zh_TW.utf8, add the following lines to your ~/.vimrc
" comments start with double-quote in vimrc 
set encoding=utf8
" the next line highlights the pattern that matches the search
set hlsearch
" stop autoindent
set noautoindent
To change the message of vim to English, add also in ~/.vimrc
:language mes C
Do
cp /etc/passwd ~/password
and edit it with
vim ~/password
  1. search with / and ? ; replace with :s
  2. ^ and $ are beginning and end of line, respectively.
  3. Brackets [] define the range. For example, numbers are [0-9] while alphabets are [A-Za-z].
  4. ^ inside [] after [ refers to inverse match. For example, [^0-9] means NOT numbers.
  5. Escape with \ and ^V (Ctrl-V).
    1. \s \t \r \n
    2. Shorthand character classes:\d, \a and \w , matches [0-9], [A-Za-z] and [A-Za-z0-9_] , respectively.
      \D , \A and \W are the inverse matches of them.
  6. Pattern starts with \< and ends with \>
  7. Pattern recurrs n times with \{n\} (defined in ViRegex and ERE)
  8. & is the pattern that matched.
  9. . denotes anything except \n, for example, p.p matches pip, pap, p2p or even p口p.
  10. * denotes for "appears zero or more times". For example, pis* matches pi, pis, piss, pisss and more s.
    .* matches anything that appears for any times or not at all.

    Note that . and * are the wildcard characters (萬用字元、通配字符) in RE.
    For filenames, the wildcard characters are ? and *.
  11. Change uppercase/lowercase with ~, or gu gU in block mode.
  12. Convert /etc/passwd at ukko into an HTML file that points to all of the student users' websites. Pre-filter the data with:
    grep "[udg][0-9a][0-9]\{6\}\|\{8\}" /etc/passwd > ~/public_html/draft.html
    and start from the ~/public_html/draft.html file, then rename the final output to the ~/public_html/home.html file. The content of your final output html file should look like this.
    ASCII code table
    ASCII code printable characters




Hyper-Text Markup Language : HTML

Simple styles:

Headers:

Week 01-03, 3/3

Reference links:

Lists:

Tables:

Writing math equations in the HTML file using $\LaTeX$ format to be rendered by Mathjax.js javascript:

See also this article in Mandarin-Chinese for a short tutorial, and the reference in Chapter 8 of the book The LaTeX Companion .

First, insert the following script in the beginning for the HTML file, but after the headers:
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js" type="text/javascript">
<script type="text/javascript" async
    src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML">
MathJax.Hub.Config({
 extensions: ["tex2jax.js","TeX/AMSmath.js","TeX/AMSsymbols.js"],
 jax: ["input/TeX", "output/HTML-CSS"],
 tex2jax: {
     inlineMath: [ ['$','$'], ["\\(","\\)"] ],
     displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
 },
 "HTML-CSS": { availableFonts: ["TeX"] }
});
</script>

Lennard-Jones potential:
$$  V_{LJ}=\varepsilon\left [ \left (  \frac{r_{m}}{r} \right )^{12} - 2\left (  \frac{r_{m}}{r} \right )^{6} \right ]  $$
The $\LaTeX$ code for the above equation in display mode is:
$$ V_{LJ}=\varepsilon\left [ \left ( \frac{r_{m}}{r} \right )^{12} - 2\left ( \frac{r_{m}}{r} \right )^{6} \right ] $$

If you remove the var in the above $\LaTeX$ code, it becomes:
$$V_{LJ}=\epsilon\left [ \left ( \frac{r_{m}}{r} \right )^{12} - 2\left ( \frac{r_{m}}{r} \right )^{6} \right ] $$


此處$\varepsilon$不是介電常數，而是平衡位置時的potential energy；$r_{m}$則是此Lennard-Jones potential能量最低點的時候兩個粒子的距離，$r$是兩個粒子之間的距離。

You can also write something like $\sqrt[5]{a+\sqrt{b}}$ inside the text, which is the inline mode.

Practice: Write the Parseval's Theorem

in $\LaTeX$ format inside an HTML file.

Note: If you want to copy the $\LaTeX$ equation into Microsoft® WORD, copy the equation as MathML code, then paste into WORD by Ctrl-V, then Ctrl, then t.


Practice:
  1. Convert /etc/passwd at ukko into an HTML file named ~/public_html/userlist.html that points to all of the student users' websites.
  2. HTML in HTML
    Convert ~/public_html/userlist.html into ~/public_html/userlistsrc.html, of which content is shown in HTML source code in the browser.
    3.
References:
參考網頁:
HTML5 reference
Special symbols in Unicode



In class example: HTML in HTML

Make your homework of previous week shown in HTML format:
If you could not finish it yet, practice to copy and paste from following file.