#navi(ソフトウェア基礎I/08)
*内容 [#c60613e4]
#contents
*HTML [#g4762b34]
テキスト 上巻p.525 第28章 28.6 HTMLによるWWWページ作成
----
 % cd Sites
 % emacs -nw index2.html
上記で編集したファイルは,
 http://localhost/~e0757XX/index2.html
でブラウザで見ることができます.
----
**HTMLの文書の構造 [#u79f8388]
全体は,HTMLタグで囲まれ,<HEAD>タグで囲まれたヘッダ部,<BODY>タグで囲まれたボディ部からなります.
 <HTML>
  <HEAD>
   <TITLE>
    ページウィンドウタイトル
   </TITLE>
  </HEAD>
 
  <BODY>
   ページ本文
  </BODY>
 </HTML>
-[[サンプルページ:http://www.ie.u-ryukyu.ac.jp/~koji/html.html]]
**文字コードについて [#dad6d217]
-ヘッダ部には,METAタグを用いて,文字コードなどを追加定義します.
~日本語を使う場合,HTML文書の文字コードが,~
ユニコード(EUC-8)なら,
 <META http-equiv="Content-Type" content="text/html; charset=EUC-8">
ユニコード(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) [#gbd6dc93]
|キー入力|動作|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のテンプレート [#u1952b3d]
 <HTML>
  <HEAD>
   <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
   <TITLE>
    ページウィンドウタイトル
   </TITLE>
  </HEAD>
 
  <BODY>
   ページ本文
  </BODY>
 </HTML>

----
**見出し(Heading):<H1> ~ </H1> [#j1cfe599]
 <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/heading.html]]

**段落(パラグラフ):<P> ~ </P> [#zeff4fef]
**リスト(箇条書き) [#b9bfd32c]
-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/list.html]]

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

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

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