#navi(ソフトウェア演習I/14)
#contents
//*moodle [#f9347c3f]
//-https://tarkus.eva.ie.u-ryukyu.ac.jp/moo/


//*WebClass 
//-https://webclass.cc.u-ryukyu.ac.jp/
*ローカルとリモート [#t25d1704]
-ローカル
--ネットワークにおいて,手元のコンピュータ
-リモート
--ネットワークにつながった,離れたところのコンピュータ
**リモートにログインしよう [#r8c299f6]

 $ ssh e1457XX@shell.ie.u-ryukyu.ac.jp
**ローカルにファイルを作ろう [#y9c87663]

 $ cd
 $ mkdir public_html
 $ cd public_html
 $ emacs -nw index.html
**リモートにファイルを送ろう [#o0de147f]

 $ rsync -auvz ~/public_html shell.ie.u-ryukyu.ac.jp:
*WWW [#lc7f0819]
-Webの利用法:http://ie.u-ryukyu.ac.jp/?p=458
-シェルでのリモートログイン:http://ie.u-ryukyu.ac.jp/?p=4022
*HTML [#k08c86c8]
テキスト 上巻p.525 第28章 28.6 HTMLによるWWWページ作成
----
 % mkdir public_html
 % cd public_html
 % emacs -nw index2.html
上記で編集したファイルは,
 http://localhost/~e1457XX/index2.html
でブラウザで見ることができます.
----
**HTMLの文書の構造 [#sacdf6aa]
全体は,HTMLタグで囲まれ,<HEAD>タグで囲まれたヘッダ部,<BODY>タグで囲まれたボディ部からなります.
 <HTML>
  <HEAD>
   <TITLE>
    ページウィンドウタイトル
   </TITLE>
  </HEAD>
 
  <BODY>
   ページ本文
  </BODY>
 </HTML>
-[[サンプルページ:http://www.ie.u-ryukyu.ac.jp/~koji/soft1/index.html]]
**文字コードについて [#t0565e14]
-ヘッダ部には,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) [#c45262d6]
|キー入力|動作|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のテンプレート [#vdd1b32b]
 <HTML>
  <HEAD>
   <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
   <TITLE>
    ページウィンドウタイトル
   </TITLE>
  </HEAD>
 
  <BODY>
   ページ本文
  </BODY>
 </HTML>

----
**見出し(Heading):<H1> ~ </H1> [#z2e54473]
 <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> [#v3a192b2]
**リスト(箇条書き) [#w3ab6701]
-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> [#m9060896]
 例:
 <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="画像名"> [#j645f2d5]
**整形済みテキスト:<PRE> ~ </PRE> [#x08c8965]
空白,タブ,改行を有効にする.コンピュータ出力や,プログラミングソースをそのまま表示する場合に使う.
*参考となるページ [#t90f569f]
-[[とほほのWWW入門:http://www.tohoho-web.com/www.htm]]

*情報工学科のページ公開法 [#na7ef5ef]
-http://ie.u-ryukyu.ac.jp/
-http://ie.u-ryukyu.ac.jp/?p=458
-学生のページ http://ie.u-ryukyu.ac.jp/?p=69


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


#navi(ソフトウェア演習I/14)


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