Emacs の HTML mode を使ってみよう。

ここでは、Emacs の HTML mode を使って、手っ取り早くページを書く方法を説明します。(ここで読者は、あるていど、Emacs が使えることを前提に書いています。)

  1. まずは、Emacs で HTML mode が使えるようにしましょう。
  2. 以下の部分を .emacs に追加して下さい。
    ;;;
    ;;; Put the following code in your .emacs file:
    ;;;
    (autoload 'html-mode "html" "HTML major mode." t)
    (or (assoc "¥¥.html$" auto-mode-alist)
        (setq auto-mode-alist (cons '("¥¥.html$" . html-mode) 
                                    auto-mode-alist)))
    
    
    上田研の人は、これで Emacs 上で HTML mode が使えるようになります。
    1. もし、うまくいかなかった場合は自分で HTML をインストールしてみましょう。 ここを押すと、html.el が手に入ります。
    2. html.el をまず手に入れて、html.el をパスの通っている場所に置きましょう。 (例).emacs に 以下の記述がある場合、‾/elisp に置けば良いでしょう。
      (setq load-path (cons (expand-file-name "‾/elisp") 
                                   load-path))
      
    3. これで、うまくいかない場合は Emacs の詳しい人に聞いて下さい。

  3. では、早速 HTML mode を使ってみましょう。
  4. ここでは、‾/public_html/demo.htmlを編集することにしましょう。(なにゆえ、‾/public_html/なのかは、 これを見るとわかります。)
  5. まず、{N}Emacs でファイルを編集するいつもの手順 C-x C-f ‾/public_html/demo.html をやってみましょう。(ここで、画面の下の方が (HTML) となっていなかったら、最初に戻りましょう。)

    1. Title をつける。
    2. 一番始めに、このページのタイトルをつけましょう。ここでは、"DEMO" とします。 タイトルをつけるには、C-c t と入力します。すると、下のミニバッファに、 Title: と出てきますので、"DEMO" と入力しましょう。

    3. Header をつける。
    4. こんどは、このページの概要でも書きましょう。こうすることで、内容がはっきりします。ここでは"HTML mode の練習"と書きましょう。 ヘッダをつけるにはC-c h と入力します。すると、下のミニバッファに Size (1-6; 1 biggest):と出てきますので、サイズ(1が一番大きい)を入力した後、 "HTML mode の練習"と書きましょう。日本語を入力するのは、いつもと同じようにやれば良いはずです。(egg を使っている場合は、C-¥ で入力できます。)

    5. 文章を書く。
    6. 後は適当に、文章を書きましょう。注意しなければならないのは、改行をしたい場合は 文章内に、<P> を書かなければならないことです。これはC-c p で入力できます。

    7. メニューを書く。
    8. 箇条書で何かを書きたい場合は、C-c mと入力すると、
      <MENU>
      <LI> (ここにカーソルがある)
      </MENU>
      
      と出てくるでしょう。そしてそのまま、書きたいことを書きましょう。 さらに、項目を増やしたい時は、C-c iと入力すると項目を増やせます。 (例)
      <MENU>                             <MENU>
      <LI> こんな感じ                        <LI> こんな感じ
      (ここにカーソルがある)------------>   <LI>
      </MENU>                            </MENU>
      

    9. 説明書きを書く
    10. 何かを説明したいような時には、C-c dと入力すると、
      <DL>
      <DT> (ここにカーソルがある)
      <DD>
      </DL>
      
      と出てくるでしょう。<DT> に説明したいことを、<DD> にその説明を書きます。項目を増やしたい時は、C-c eと入力すると項目を増やせます。(例)
      <DL>                                  <DL>
      <DT>                                  <DT>
      <DD>                                  <DD>
      (ここにカーソルがある)--------------->  
      </DL>                                 <DT>
                                            <DD>
                                            </DL>
      

    11. 絵を取り込む
    12. 絵(gif,jpeg)やアイコン(xbm)を取り込みたい時は、C-c gとやると、 ミニバッファにImage URL:と出てくるので、絵がある URL を入力して下さい。 例えば、こんなアイコンが使いたい場合は、 "/icons/index.xbm"の様に入力した下さい。 (これは、"http://ホスト名"が省略されたものと考えることができます。)

    13. ハイパーリンクを張る
    14. おまたせしました、HTMLの最大の特徴である、ハイパーリンクの張り方です。 ハイパーリンクを張りたい時は、C-c lとやると、ミニバッファに Link to:と出てくるので、リンクを張りたい URL を入力して下さい。 例えば、今あなたが読んでいるこのページにリンクを張りたい場合は、 "http://www.ueda.info.waseda.ac.jp/HowTo/html_mode.html" と入力して下さい。すると、こんな感じになるでしょう。
      <A HREF="http://www.ueda.info.waseda.ac.jp/HowTo/html_mode.html"></A>
      
      そして、そのままクリックする部分を書き込みます。ここでは、”HTML mode の使い方”と入力しましょう。
      <A HREF="http://www.ueda.info.waseda.ac.jp/HowTo/html_mode.html">
      HTML mode の使い方</A>
      

    15. 最後に自分のメールアドレスを書く
    16. ページを書き終えたら、自分のメールアドレスを書いておきましょう。 C-c aとやると、
      <ADDRESS></ADDRESS>
      
      と出てくるので、そのまま自分のメールアドレスを書きましょう。

    と、ここまで書いたことを順にやっていくとこんな 感じになるかも知れません。

  6. 最後に
  7. ここまで書いてきたのは、HTML mode の機能のほんの一部です。でも、これだけのことを知っていれば、いろいろと機能を組み合わせることでかなり凝ったレイアウトが可能になります。

    とりあえず、まずは使ってみることです。きっと HTML を書くのが楽しくなるでしょう。


上田研ホームページへ Return to Parent Directory
asahi@ueda.info.waseda.ac.jp