時間と手間が惜しくて、読み手に負担をかけても良いと考える場合 ↓
すなおに、それぞれのワードプロセッサの「htmlで保存」を使って、html化します。でも、見にくいし、不要なタグ・決め打ちタグが多くて、サイズがでかい。 | 時間と手間をかけて、読み手に読んでもらいやすくしようと考える場合
↓
テキスト形式(改行なし)で保存し、テキストエディタやHTMLエディタ
(HeTeMuLu creator が現在ベスト)でタグを挿入します。タグの挿入については、次項を参照のこと。 |
<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.css や ronbun.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 →
<H1 ALIGN=CENTER>論文をHTML化するとき</H1> <H2>すでにWordや一太郎で論文を書き上げている場合</H2> <H3>時間と手間が惜しくて、読み手に負担をかけても良いと考える場合</H3>
パラグラフを意識して、<P>タグを使うこと。パラグラフ内の形式段落に<BR>タグを使うこと。パラグラフを意識して、<P>と</P>でくくりましょう。
<P> 論文のタイトルを書いておく。ブラウザの最上段に表示されます。<BR> それと、目次を作る場合の目印になります。 </P>
箇条書きで書くことで、順序性や並列性を明示します。
<UL> <LI> <ol>は番号付リスト <LI> <ul>は番号なしリスト </UL>
引用であることを記述するために<BLOCKQUOTE>タグを使います。
段落ごと字下げするからといって、<ul>タグや<ol>タグを使わないこと。
<BLOCKQUOTE>内に情報源を書いておくと、後々便利かもしれません。
これは、引用部分です。野浪正隆「論文をHTML化するとき」
<BLOCKQUOTE> これは、引用部分です。 <div align="right">野浪正隆「論文をHTML化するとき」</div> </BLOCKQUOTE>
nonami | masataka | hogehoge | |
---|---|---|---|
英語 | 58 | 77 | 96 |
国語 | 74 | 41 | 55 |
66 | 44 | 22 |
nona mi | masa taka | hoge hoge | |
---|---|---|---|
英語 | 58 | 77 | 96 |
国語 | 74 | 41 | 55 |
66 | 44 | 22 |
<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="「くじらぐも」の授業風景">
は、画像が見えない場合用です。視力障害を持つ人が読み上げブラウザを使っている場合などに、ことばで情報を伝えることができます。
<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ファイルでどんなタグがどんな目的で使われているかを見てください。