出席

リモートにログイン

% ssh j060XX@pw0XX.st.ie.u-ryukyu.ac.jp
  • X Windowを用いてアプリケーションウィンドウを,ローカルに出したい場合
    % ssh -X -Y j060XX@pw0XX.st.ie.u-ryukyu.ac.jp
    (X11.appのターミナル(kterm,xterm等)からである必要があります.)

ネットワーク越しのファイルのコピー

% scp
% scp <ファイル名> <アカウント名>@<サーバー名>:<ディレクトリ>

例:

% scp test.txt pw0XX:
% scp test.txt j060XX@pw0XX.st.ie.u-ryukyu.ac.jp:
% scp test.txt pw0XX.st.ie.u-ryukyu.ac.jp:/net/home/y06/j060XX/public_html

第28章 WWW (World Wide Web)

ページのアップロードと公開

テキスト 上巻p.536 第28章 28.6.3 インターネットに公開

WWWサーバー

URL (Uniform Resouce Locator)

http://www.ie.u-ryukyu.ac.jp
http://www.ie.u-ryukyu.ac.jp/ie/students/students.html
http://www.ie.u-ryukyu.ac.jp/ie/students/~j060XX (j060XXのホームページ)
http://www.ie.u-ryukyu.ac.jp/~j060XX

実機:

shongane.ie.u-ryukyu.ac.jp

サーバー:

apache

サーバーの設定ファイル:

/etc/httpd/conf/httpd.conf

ユーザーディレクトリ:

~/public_html
例:
http://www.ie.u-ryukyu.ac.jp/~koji/test.txt
は,ユーザーのホームディレクトリの
~/public_html/test.txtというファイルを参照する

学生のみなさんのユーザーディレクトリは,pwにログイン後,

/net/home/y06/j06xxxx/public_html

です.


ディレクトリがあるかどうか確認しましょう

  • pwにログイン
    % ssh j060XX@pw0XX.st.ie.u-ryukyu.ac.jp
    
    % cd /net/home/y06/j060xx/
    % ls
    public_htmlがない場合:
    % mkdir public_html

ファイル,ディレクトリのパーミッション:

公開するファイルは,

-rwxr-xr-x ファイル
drwxr-xr-x ディレクトリ

であることが必要.そうでない場合,

chmod 755 <ファイル名>

で,モードの変更が必要.

ファイル転送:

scp <ファイル名> <アカウント名>@<サーバー名>:<ディレクトリ>
scp test.txt pw0XX.st.ie.u-ryukyu.ac.jp:/net/home/y06/j060XX/public_html
sftp <サーバー名>
rsync -e ssh [オプション] <ディレクトリ> <サーバー名>:<ディレクトリ>
rsync -auvz -e ssh --exclude '*~' ~/Sites/ pw0XX:/net/home/y06/j060XX/public_html

オプション:

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

注意:

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

HTML

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


% cd Sites
% emacs -nw index2.html

上記で編集したファイルは,

http://localhost/~j040XX/index2.html

でブラウザで見ることができます.


HTMLの文書の構造

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

 <BODY>
  ページ本文
 </BODY>
</HTML>
  • サンプルページ
  • ヘッダには,METAタグを用いて,文字コードなどを追加定義します.

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

    <META http-equiv="Content-Type" content="text/html; charset=EUC-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タグでの設定が必要です.
  • 一般に,どのブラウザでも誤判読しにくいISO-2022-JP(JISコード)が勧められているようです.

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=EUC-JP">
  <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>

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

参考となるページ

課題10

  • 以下の作業を8/3午後0時までに行いなさい.
  • 学科にホームページを設置しなさい. pwにログインし,
    /net/home/y06/y060XX/public_html
    の下に,
    index.html
    というファイルをつくり,トップページとする.
  • 写真とその説明文を張ること.
  • 学科トップページへのリンクを張ること.
確認には,
http://www.ie.u-ryukyu.ac.jp/ie/students/students.html
http://www.ie.u-ryukyu.ac.jp/~j060XX/
で見ることができます.


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2013-06-20 (木) 14:45:26 (2281d)