#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)