E-MAIL 大阪教育大学 国語教育講座 野浪研究室 ←戻る counter

論文のHTML化について

大阪教育大学
野浪正隆

すでにWordや一太郎で論文を書き上げている場合

時間と手間が惜しくて、読み手に負担をかけても良いと考える場合
 すなおに、それぞれのワードプロセッサの「htmlで保存」を使って、html化します。
でも、見にくいし、不要なタグ・決め打ちタグが多くて、サイズがでかい。

時間と手間をかけて、読み手に読んでもらいやすくしようと考える場合
 テキスト形式(改行なし)で保存し、テキストエディタやHTMLエディタ (HeTeMuLu creator が現在ベスト)でタグを挿入します。
 タグの挿入については、次項を参照のこと。

最初から論文をHTMLで書くとき

ヘッダ部

<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Shift_JIS">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>

ここまでは、おきまり。冒頭に書きます。

<META HTTP-EQUIV="Keyword" lang="jp" contents="HTML,論文,読み手,負担">

表示しないが、検索エンジン等がキーワードを収集する場合に役立つかもしれないので、書いておきます。

<TITLE>論文のHTML化について</TITLE>

論文のタイトルを書いておく。ブラウザの最上段に表示されます。
それと、複数のファイルから目次を作る場合の目印になります。

<BASE TARGET="main">

フレームを使う必要が生じたときに書かなければならないので、最初から書いておきます。

<link rel="STYLESHEET" href="150.css" type="text/css">

画面表示をコントロールするスタイルシートを読み込みます。
行間・字間を調節しないと、素のHTMLは、読みにくい。150.cssronbun.css をHTMLファイルと同じディレクトリに入れておきます。(右クリックで「対象をファイルに保存」。別のディレクトリに入れる場合は、「href="150.css"」の部分をパスが通るように書き換えます。)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Shift_JIS">
<META HTTP-EQUIV="Keyword" lang="jp" contents="HTML,論文,読み手,負担">
<TITLE>論文をHTML化するとき</TITLE>
<BASE TARGET="main">
<link rel="STYLESHEET" href="150.css" type="text/css">
</HEAD>

ここまでが、ヘッダ部です。
コピーしておいて、適当に変更して使いましょう。

150.css →
ronbun.css →

<BODY>(本体)部

● <Hn>タグ

文字の大きさが重要なのではなく、論文の論理構造を記述するためだから、 <font size=7> などを使いません。
<H1 ALIGN=CENTER>論文をHTML化するとき</H1>
<H2>すでにWordや一太郎で論文を書き上げている場合</H2>
<H3>時間と手間が惜しくて、読み手に負担をかけても良いと考える場合</H3>

● <P><BR>タグ

 パラグラフを意識して、<P>タグを使うこと。パラグラフ内の形式段落に<BR>タグを使うこと。パラグラフを意識して、<P>と</P>でくくりましょう。

<P>
 論文のタイトルを書いておく。ブラウザの最上段に表示されます。<BR>
 それと、目次を作る場合の目印になります。
</P>

● <ol><ul><li>タグ

 箇条書きで書くことで、順序性や並列性を明示します。

<UL>
<LI> <ol>は番号付リスト
<LI> <ul>は番号なしリスト
</UL>

● 引用タグ

 引用であることを記述するために<BLOCKQUOTE>タグを使います。
 段落ごと字下げするからといって、<ul>タグや<ol>タグを使わないこと。
<BLOCKQUOTE>内に情報源を書いておくと、後々便利かもしれません。

これは、引用部分です。
野浪正隆「論文をHTML化するとき」
<BLOCKQUOTE>
 これは、引用部分です。
<div align="right">野浪正隆「論文をHTML化するとき」</div>
</BLOCKQUOTE>

● テーブルタグ

nonamimasatakahogehoge
英語587796
国語744155
664422

<table border=1 align=right>
<tr><th> <th>nonami<th>masataka<th>hogehoge
<tr><th>hanihani<td align=right>58
          <td align=right>77<td align=right>96
<tr><TH ROWSPAN=2>国<BR>語<td align=right>74
          <td align=right>41<td align=right>55
<tr><td align=right>66<td align=right>44
          <td align=right>22
</table>

● 画像とグラフ

 表計算ソフトなどを使ってグラフを書いて、画像ファイルで保存するとき、ペイント(アクセサリの中にある)などの画像処理ソフトを使って、PNGファイルにしましょう。
 色数が少なくてべた塗りの画像をPNGファイルにすると、とても小さなファイルサイズになります。
 例えば、次のグラフは、

PNGファイルだと5376バイト
JPGファイルだと22864バイト
BMPファイルだと92702バイトです。
円グラフ

 表を使ってグラフを書くこともできます。上記の円グラフのデータを積算棒グラフで示すと次のようになります。(色は違います)

凡 
例 
否定・禁止表現語りかけ語意を強めるその他
   

文末表現
(子ども向け)
28%8%64%

文末表現
(大人向け)
10%7%83%

 写真の場合は、色々な色が使われているので、PNGファイルにするよりもJPGファイルにする方が、ファイルサイズが小さくなります。ファイルサイズが大きいと、表示に時間がかかりますから、画像内容に見合ったファイルサイズになるようにしましょう。
(いくらブロードバンド時代が来つつあるといっても、400kbもある画像をページに使うのはやめましょう)
「くじらぐも」の授業風景この画像で、6362バイトです。
元もとの画像は、640*480で、80000バイトあったのですが、縮小しました。「くじらぐもの授業だな」とわかればいいし、「誰がどんな子ども達に」という情報は不要なので、このサイズにしました。

<IMG SRC="graph.gif" BORDER=1>
<IMG SRC="1018045.jpg" ALIGN=LEFT HSPACE=20
 alt="「くじらぐも」の授業風景">

alt="「くじらぐも」の授業風景">
は、画像が見えない場合用です。視力障害を持つ人が読み上げブラウザを使っている場合などに、ことばで情報を伝えることができます。

● ハイパーリンク

別のhtmlファイルを呼び出す(「リンク先に飛ぶ」と言ったりもします)仕組みです。
<a id="top">
  ……同一文書内に飛ぶときに、飛び先に名前をつけておく
<a href="#top" class="deko">↑ページTop</a>
  ……同一文書内の飛び先「top」に飛びます
<a href="http://www.cc.osaka-kyoiku.ac.jp/~kokugo/nonami/nonamiken.html#bbs" >野浪研究室</a>
  ……飛び先は 野浪研究室トップページ内の掲示板のトップ

<a href="http://www.osaka-kyoiku.ac.jp" class="deko">大阪教育大学</a>
  ……飛び先は大阪教育大学のトップページ
<a href="http://www.osaka-kyoiku.ac.jp/~kokugo/index.html" >国語教育講座</a>
  ……飛び先は大阪教育大学国語教育講座
<a href="http://www.cc.osaka-kyoiku.ac.jp/~kokugo/nonami/nonamiken.html" >野浪研究室</a>
  ……飛び先は大阪教育大学国語教育講座野浪研究室
<a href="#" onclick="history.back(); return false;" class="deko">←戻る</a>
  ……このページに飛んでくる前のページに戻ります。
「class="deko"」というのは、このページで使っている http://www.cc.osaka-kyoiku.ac.jp/~kokugo/nonami/css/ronbun.css で
.deko {
	padding-right: 0.5em;
	padding-left: 0.5em;
	background-color: #CCDDDD;
	border-width: 6;
	border-style: outset;
}
と設定してあるもので、このページの最後にあるように 凸っ とした表示になります。

最後に

基本的なHTMLファイルの構造
<html>
<head>
<title></title>
</head>
<body>
内容
</body>
</html>

HTMLの最後には、
</BODY>
</HTML>
を書きます。

 論文をHTML化するときの考え方と方法について、簡単に説明しました。まだ、触れていないところがありますが、これだけで、論文のHTML化ができると思います。
 さらに、スキルアップしたい時は、ブラウザの「表示→ソースの表示」を使って、いろいろなHTMLファイルでどんなタグがどんな目的で使われているかを見てください。

E-MAIL 大阪教育大学 国語教育講座 野浪研究室 △ ページTop ←戻る
mailto: nonami@cc.osaka-kyoiku.ac.jp