#navi(プログラミング演習I/18)

#contents
*WWW [#z6ce9dd4]
-Webの利用法:http://ie.u-ryukyu.ac.jp/?p=458
-シェルでのリモートログイン:http://ie.u-ryukyu.ac.jp/?p=4022

*Sitesディレクトリを作って公開するファイルをローカルに作る [#g849dea8]
 $ cd
 $ mkdir Sites
test.htmlファイルを作る
 $ echo "Hello" > test.html

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

**リモートにファイルを送ろう [#hc8976f2]
***ファイル同期 [#ce7e7e58]
 rsync -e ssh [オプション] <ディレクトリ> <サーバー名>:<ディレクトリ>
 rsync -auvz -e ssh --exclude '*~' ~/Sites /  shell.ie.u-ryukyu.ac.jp:~/public_html
 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


**リモートにログインしよう [#k83439b7]

 $ ssh e1857XX@shell.ie.u-ryukyu.ac.jp
ローカルのコンピュータのアカウントがリモートログイン先と同じなら,アカウント名を省略できます.
 $ ssh shell.ie.u-ryukyu.ac.jp

*HTML [#l51ac8ff]
テキスト 上巻p.525 第28章 28.6 HTMLによるWWWページ作成
----
 % mkdir www_dir
 % cd www_dir
 % emacs -nw index2.html
//上記で編集したファイルは,
// http://localhost/~e1457XX/index2.html
//でブラウザで見ることができます.
----
**HTMLの文書の構造 [#hc16eb8b]
全体は,HTMLタグで囲まれ,<HEAD>タグで囲まれたヘッダ部,<BODY>タグで囲まれたボディ部からなります.
 <HTML>
  <HEAD>
   <TITLE>
    ページウィンドウタイトル
   </TITLE>
  </HEAD>
 
  <BODY>
   ページ本文
  </BODY>
 </HTML>
-[[サンプルページ:http://www.ie.u-ryukyu.ac.jp/~koji/soft1/index.html]]
**文字コードについて [#b5fbfaf3]
-ヘッダ部には,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:http://www.yatex.org/]]やyahtmlがインストールされているため,htmlファイルを編集する際,yahtmlモードになります.このとき自動的にJISコードになるようになっています.
~編集中の文章がEUCの場合,emacsのモードラインの表示は,
 -かんな-EEE:-
編集中の文章がJISの場合,
 -かんな-EEJ:-
になります.文字コードにあったMETAタグでの設定が必要です.
**emacsの文字コードの設定 -- (C-x <RET> f) [#ub67abbe]
|キー入力|動作|h
|C-x <RET> f|文字コードをかえる|
エコーエリアに次にように表示されるので,下記の文字コード設定値を入力する
 Coding system for visited file (default, nil):

|文字コード|設定値|h
|JIS|iso-2022-jp-unix|
|EUC|euc-japan-unix|
|UNIX用Shift-JIS	|sjis-unix|
|MS-DOS用Shift-JIS|sjis-dos|
|Macintosh用Shift-JIS|sjis-mac|


**HTMLのテンプレート [#cc48cfff]
 <HTML>
  <HEAD>
   <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
   <TITLE>
    ページウィンドウタイトル
   </TITLE>
  </HEAD>
 
  <BODY>
   ページ本文
  </BODY>
 </HTML>

----
**見出し(Heading):<H1> ~ </H1> [#f16c2a63]
 <H1>見出し1</H1>
 <H2>見出し2</H2>
 <H3>見出し3</H3>
 <H4>見出し4</H4>
 <H5>見出し5</H5>
 <H6>見出し6</H6>
-[[サンプルページ:http://www.ie.u-ryukyu.ac.jp/~koji/soft1/heading.html]]
**段落(パラグラフ):<P> ~ </P> [#v156fbba]
**リスト(箇条書き) [#ddef0bbc]
-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>


-[[サンプルページ:http://www.ie.u-ryukyu.ac.jp/~koji/soft1/list.html]]
**ハイパーリンク:<A HREF="~~~">リンク名</A> [#f948e30f]
 例:
 <A HREF="http://www.ie.u-ryukyu.ac.jp">琉球大学情報工学科</A>
-[[サンプルページ:http://www.ie.u-ryukyu.ac.jp/~koji/soft1/link.html]]
**イメージ(画像):<IMG SRC="picture.jpg"  ALT="画像名"> [#cab4cb41]
**整形済みテキスト:<PRE> ~ </PRE> [#y585c59e]
空白,タブ,改行を有効にする.コンピュータ出力や,プログラミングソースをそのまま表示する場合に使う.
*参考となるページ [#u638cc79]
-[[とほほのWWW入門:http://www.tohoho-web.com/www.htm]]

**本学科システムの利用法: [#g0492ae8]
-学科システムの利用法:http://ie.u-ryukyu.ac.jp/?p=474
-Webの利用法:http://ie.u-ryukyu.ac.jp/?p=458
-シェルでのリモートログイン:http://ie.u-ryukyu.ac.jp/?p=4022
-学生のページ http://ie.u-ryukyu.ac.jp/?p=69


//*課題1 
//-学科にホームページを設定しなさい.
//-[[学科学生のページ>http://ie.u-ryukyu.ac.jp/?p=69]]からアクセスできること.
//-ホームページ形式は問いません.
//-また,moodleページの課題欄にURLを記述すること


#navi(プログラミング演習I/18)

トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS