#navi(ソフトウェア基礎I/11)
*WebClass [#p530bdde]
-https://webclass.cc.u-ryukyu.ac.jp/
*WWW [#x4f309aa]
#contents
*HTML [#t09059ec]
テキスト 上巻p.525 第28章 28.6 HTMLによるWWWページ作成
----
 % cd Sites
 % emacs -nw index2.html
上記で編集したファイルは,
 http://localhost/~e1057XX/index2.html
でブラウザで見ることができます.
----
**HTMLの文書の構造 [#a27185d7]
全体は,HTMLタグで囲まれ,<HEAD>タグで囲まれたヘッダ部,<BODY>タグで囲まれたボディ部からなります.
 <HTML>
  <HEAD>
   <TITLE>
    ページウィンドウタイトル
   </TITLE>
  </HEAD>
 
  <BODY>
   ページ本文
  </BODY>
 </HTML>
-[[サンプルページ:http://www.ie.u-ryukyu.ac.jp/~koji/soft1/index.html]]
**文字コードについて [#xa155e6d]
-ヘッダ部には,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) [#b6538947]
|キー入力|動作|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のテンプレート [#ke9e1073]
 <HTML>
  <HEAD>
   <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
   <TITLE>
    ページウィンドウタイトル
   </TITLE>
  </HEAD>
 
  <BODY>
   ページ本文
  </BODY>
 </HTML>

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

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


#navi(ソフトウェア基礎I/11)

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