内容

HTML

テキスト 上巻p.525 第28章 28.6 HTMLによるWWWページ作成


% cd Sites
% emacs -nw index2.html

上記で編集したファイルは,

http://localhost/~e0757XX/index2.html

でブラウザで見ることができます.


HTMLの文書の構造

全体は,HTMLタグで囲まれ,<HEAD>タグで囲まれたヘッダ部,<BODY>タグで囲まれたボディ部からなります.

<HTML>
 <HEAD>
  <TITLE>
   ページウィンドウタイトル
  </TITLE>
 </HEAD>

 <BODY>
  ページ本文
 </BODY>
</HTML>

文字コードについて

  • ヘッダ部には,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やyahtmlがインストールされているため,htmlファイルを編集する際,yahtmlモードになります.このとき自動的にJISコードになるようになっています.

    編集中の文章がEUCの場合,emacsのモードラインの表示は,

    -かんな-EEE:-
    編集中の文章がJISの場合,
    -かんな-EEJ:-
    になります.文字コードにあったMETAタグでの設定が必要です.

emacsの文字コードの設定 -- (C-x <RET> f)

キー入力動作
C-x <RET> f文字コードをかえる

エコーエリアに次にように表示されるので,下記の文字コード設定値を入力する

Coding system for visited file (default, nil):
文字コード設定値
JISiso-2022-jp-unix
EUCeuc-japan-unix
UNIX用Shift-JISsjis-unix
MS-DOS用Shift-JISsjis-dos
Macintosh用Shift-JISsjis-mac

HTMLのテンプレート

<HTML>
 <HEAD>
  <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
  <TITLE>
   ページウィンドウタイトル
  </TITLE>
 </HEAD>

 <BODY>
  ページ本文
 </BODY>
</HTML>

見出し(Heading):<H1> ~ </H1>

<H1>見出し1</H1>
<H2>見出し2</H2>
<H3>見出し3</H3>
<H4>見出し4</H4>
<H5>見出し5</H5>
<H6>見出し6</H6>

段落(パラグラフ):<P> ~ </P>

リスト(箇条書き)

  • 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>

ハイパーリンク:<A HREF="~~~">リンク名</A>

例:
<A HREF="http://www.ie.u-ryukyu.ac.jp">琉球大学情報工学科</A>

イメージ(画像):<IMG SRC="picture.jpg" ALT="画像名">

整形済みテキスト:<PRE> ~ </PRE>

空白,タブ,改行を有効にする.コンピュータ出力や,プログラミングソースをそのまま表示する場合に使う.

参考となるページ



トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2013-06-20 (木) 14:45:26 (2280d)