[[ソフトウェア基礎I/03]]
#navi(ソフトウェア基礎I/03)
*7月11日 [#i1ecf0da]

小テスト
----
*HTML [#kc0f1552]
テキスト 上巻p.525 第28章 28.6 HTMLによるWWWページ作成
----
 % cd Sites
 % emacs -nw index.html
上記で編集したファイルは,
 http://localhost/~j030XX
でブラウザで見ることができます.
----


**HTMLの文書の構造 [#gc034aa4]
 <HTML>
  <HEAD>
   <TITLE>
    ページウィンドウタイトル
   </TITLE>
  </HEAD>
 
  <BODY>
   ページ本文
  </BODY>
 </HTML>
-[[サンプルページ:http://www.ie.u-ryukyu.ac.jp/~koji/html.html]]
-ヘッダには,METAタグを用いて,文字コードなどを追加定義します.
~日本語を使う場合,HTML文書の文字コードが,~
シフト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タグでの設定が必要です.
-一般に,どのブラウザでも誤判読しにくいISO-2022-JP(JISコード)が勧められているようです.


テンプレート:
 <HTML>
  <HEAD>
   <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-2022-JP">
   <TITLE>
    ページウィンドウタイトル
   </TITLE>
  </HEAD>
 
  <BODY>
   ページ本文
  </BODY>
 </HTML>

----
**見出し(Heading):<H1> ~ </H1> [#a9f32965]
 <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> [#b0bfdd79]
**リスト(箇条書き) [#ud362f52]
-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> [#ha439d3c]
 例:
 <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="画像名"> [#mcfafa03]
**整形済みテキスト:<PRE> ~ </PRE> [#ief56096]
空白,タブ,改行を有効にする.コンピュータ出力や,プログラミングソースをそのまま表示する場合に使う.

**表 [#qe452ace]
*受講者リンク [#e6ab753e]
-[[ソフトウェア基礎I/受講者リンク]]

*参考となるページ [#ubc0cc2c]
-[[とほほのWWW入門:http://tohoho.wakusei.ne.jp/www.htm]]

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

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