WWW

Sitesディレクトリを作って公開するファイルをローカルに作る

$ cd
$ mkdir Sites

test.htmlファイルを作る

$ echo "Hello" > test.html

ローカルにあるSitesディレクトリを公開サーバーに同期する

リモートにファイルを送ろう

ファイル同期

rsync -e ssh [オプション] <ディレクトリ> <サーバー名>:<ディレクトリ>
rsync -auvz -e ssh --exclude '*~' ~/Sites/  shell.ie.u-ryukyu.ac.jp:~/public_html

オプション:

-a   archive (ファイルについての情報を保つ)
-u   update  (新しければ更新しない)
-v   verbose (-vv より詳細なverbose)
-z   compress with zlib (圧縮して転送)
-b   backup  (古いファイルは ~ の付いた名前になる)
--exclude 指定したファイルを転送しない
-e ssh sshで転送

注意:

  • 上記の例は,~/Sites ディレクトリ下のファイルを,shellの~/public_htmlディレクトリ以下に転送する
    rsync -auvz -e ssh ~/Sites shell.ie.u-ryukyu.ac.jp:~/public_html
    とすると,shellの/~public_htmlの下にSitesディレクトリを作ってしまう.
  • すなわち,
    ~/public_html/Sites
    ができる
    $ rsync -auvz ~/Sites shell.ie.u-ryukyu.ac.jp:~/public_html

リモートにログインしよう

$ ssh e1857XX@shell.ie.u-ryukyu.ac.jp

ローカルのコンピュータのアカウントがリモートログイン先と同じなら,アカウント名を省略できます.

$ ssh shell.ie.u-ryukyu.ac.jp

HTML

テキスト 上巻p.525 第28章 28.6 HTMLによるWWWページ作成


% mkdir www_dir
% cd www_dir
% emacs -nw index2.html

HTMLの文書の構造

全体は,HTMLタグで囲まれ,<HEAD>タグで囲まれたヘッダ部,<BODY>タグで囲まれたボディ部からなります.

<HTML>
 <HEAD>
  <TITLE>
   ページウィンドウタイトル
  </TITLE>
 </HEAD>

 <BODY>
  ページ本文
 </BODY>
</HTML>

文字コードについて

  • ヘッダ部には,METAタグを用いて,文字コードなどを追加定義します.

    日本語を使う場合,HTML文書の文字コードが,
    ユニコード(UTF-8)なら,

    <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
    シフトJISなら,
    <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
    EUCなら,
    <META http-equiv="Content-Type" content="text/html; charset=EUC-JP">
    JISなら,
    <META http-equiv="Content-Type" content="text/html; charset=ISO-2022-JP">
    を入れておきましょう.
  • 注意:もちろん,METAタグで指定した文字コードと実際のHTML文書の文字コードが違っていれば,ブラウザは文字化けします.
  • 情報工学科のpwでは,YaTeXやyahtmlがインストールされているため,htmlファイルを編集する際,yahtmlモードになります.このとき自動的にJISコードになるようになっています.

    編集中の文章がEUCの場合,emacsのモードラインの表示は,

    -かんな-EEE:-
    編集中の文章がJISの場合,
    -かんな-EEJ:-
    になります.文字コードにあったMETAタグでの設定が必要です.

emacsの文字コードの設定 -- (C-x <RET> f)

キー入力動作
C-x <RET> f文字コードをかえる

エコーエリアに次にように表示されるので,下記の文字コード設定値を入力する

Coding system for visited file (default, nil):
文字コード設定値
JISiso-2022-jp-unix
EUCeuc-japan-unix
UNIX用Shift-JISsjis-unix
MS-DOS用Shift-JISsjis-dos
Macintosh用Shift-JISsjis-mac

HTMLのテンプレート

<HTML>
 <HEAD>
  <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
  <TITLE>
   ページウィンドウタイトル
  </TITLE>
 </HEAD>

 <BODY>
  ページ本文
 </BODY>
</HTML>

見出し(Heading):<H1> ~ </H1>

<H1>見出し1</H1>
<H2>見出し2</H2>
<H3>見出し3</H3>
<H4>見出し4</H4>
<H5>見出し5</H5>
<H6>見出し6</H6>

段落(パラグラフ):<P> ~ </P>

リスト(箇条書き)

  • UL (Unorderd List):番号なしリスト
    <UL>
    <LI>リスト1
    <LI>リスト2
    <LI> リスト3
    </UL>
  • OL (Orderd List):番号付きリスト
    <OL>
    <LI>リスト1
    <LI>リスト2
    <LI> リスト3
    </OL>
  • DL (Definition List):定義リスト
    <DL>
    <DT>リスト1
    <DD>答え1
    <DT>リスト2
    <DD>答え2
    <DT> リスト3
    <DD>答え3
    </DL>

階層を作れる:

<UL>
<LI>リスト1
<LI>リスト2
 <UL>
 <LI>リストA
 <LI>リストB
 <LI>リストC
 </UL>
<LI> リスト3
</UL>
<OL>
<LI>リスト1
<LI>リスト2
<OL>
 <LI>リストA
 <LI>リストB
 <LI> リストC
</OL>
<LI> リスト3
</OL>

ハイパーリンク:<A HREF="~~~">リンク名</A>

例:
<A HREF="http://www.ie.u-ryukyu.ac.jp">琉球大学情報工学科</A>

イメージ(画像):<IMG SRC="picture.jpg" ALT="画像名">

整形済みテキスト:<PRE> ~ </PRE>

空白,タブ,改行を有効にする.コンピュータ出力や,プログラミングソースをそのまま表示する場合に使う.

参考となるページ

本学科システムの利用法:



トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2018-05-24 (木) 16:35:39 (543d)