![[PukiWiki]](image/yama1.png "[PukiWiki]")
#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>リスト１ <LI>リスト２ <LI> リスト３ </UL> -OL (Orderd List)：番号付きリスト <OL> <LI>リスト１ <LI>リスト２ <LI> リスト３ </OL> -DL (Definition List)：定義リスト <DL> <DT>リスト１ <DD>答え１ <DT>リスト２ <DD>答え２ <DT> リスト３ <DD>答え３ </DL> 階層を作れる： <UL> <LI>リスト１ <LI>リスト２ <UL> <LI>リストA <LI>リストB <LI>リストC </UL> <LI> リスト３ </UL> <OL> <LI>リスト１ <LI>リスト２ <OL> <LI>リストA <LI>リストB <LI> リストC </OL> <LI> リスト３ </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 //*課題１ //-学科にホームページを設定しなさい． //-[[学科学生のページ>http://ie.u-ryukyu.ac.jp/?p=69]]からアクセスできること． //-ホームページ形式は問いません． //-また，moodleページの課題欄にURLを記述すること #navi(プログラミング演習I/18)
