PowerPoint プレゼンテーション

第12回（1月13日）
文書処理
久野禎子
今日の実習：webページ作成


作ったことがない
作ったことがある
・ htmlタグを自分で書いた
・ webページ作成ツールを使った
今回は、htmlタグを手で書き入れてみることによ
り、webページの成り立ち、および電子化文書一
般の処理技術について学びます
文書処理技術
ワープロの文書処理技術
- もともと紙に印刷する文書をきちんと綺麗に
- WYSIWYG（ウィジウィグ：What You See Is
What You Get ）方式で作成
 Webページの文書処理技術
- ブラウザで取り扱うwebページとそのリンク機能
- マークアップ言語（html）で作成

ワープロによる文書作成：
WYSIWYG方式

WYSIWYG方式のエディタ（画面で見たものそ
のままが印刷される文書になる）を使って文書作
成する。
Webページの作成：
マークアップ方式


Webページ作成には、文書マークアップ言語
htmlを使って文書中に印（タグ）をつける。すると
タグの働きによって文書が整形される。
タグを解釈して機能させて文書を表示させるの
がブラウザソフトの役割。
（プレーン）テキストから整形文書へ

プレーンテキスト hiroshima.txt
WYSIWYG方式
 Wordで読込む → 飾りや書式を付けて、Word
形式の文書（.doc）に
マークアップ方式
 ブラウザで読込む → タグを記入してhtml形式
のファイル（Weｂページのこと）に
htmlファイルを作ってみよう




メモ帳（notepad）のhiroshima.txtにタグを書き
込む
タグは半角英数字モードで書きこむ
タグを記入したら、「なんとか.htm」または「なん
とか.html」というファイル名で新規保存する。
たとえば「hiroshima.html」
保存したhtmlファイルをブラウザで（ローカルファ
イル）表示する
htmlファイルの基本





タグは、<タグ名>
そのタグ名の働きの適用範囲を囲むときは
<タグ名>・・・</タグ名>
（対にしないで）単独で用いるタグもある
http://home.t04.itscom.net/kuno/ko2007/html-intro/sam11.html
http://home.t04.itscom.net/kuno/ko2007/html-intro/sam12.html
<html>
<head>
<title>ひろしま</title>
</head>
<body>
<h1>広島の名産品</h1>
<p>新宿のアンテナショップで見つけた広島の名産品を紹介します。</p>
<h2>らーめん</h2>
<p>ラーメンはいろいろありました。広島らーめん、尾道らーめんは有名どころだそう
ですね。しっかり置いてありました。</p>
<p>でも私の眼に留まったのは、鞆の浦の鯛塩らーめんですかね。以前夏に鞆の浦
を訪れた時は、鯛そうめん、美味しかったです。</p>
<h2>瀬戸田のレモネード（粉末）</h2>
<p>一番の売れ筋だそうです。ショップの前に山積みで、値段も手頃。熱いお湯で溶
かして飲むのでしょうね。美容に良さそうです。</p>
<h2>カープかつ</h2>
<p>なんともまあ、どでかい赤い袋ですが、中は小分けになってます。多分あの有名
なおたふくソースの味付きのカツなのでしょう。でもその中身は、一体何のカツかとい
うと、、、歯ごたえあります。</p>
<h2>でびら、でべら</h2>
<p>カレイの干したの、と説明してもちょっと違う気がします。でびらの食べ方を知っ
ている人は広島の人だと思います。私の家ではトンカチで叩いていました。</p>
</body>
</html>
Webページの飾り：
ｃｓｓでページ要素にスタイルを付ける

CSS(直列スタイルシート)
htmlタグごとに表示の様子を統一指定することができる
＋
局所的な飾り、webページ上の要素のレイアウト指定



http://home.t04.itscom.net/kuno/ko2007/html-intro/sam13.html
http://home.t04.itscom.net/kuno/ko2007/html-intro/sam14.html
http://home.t04.itscom.net/kuno/ko2007/html-intro/sam15.html
Webページの飾り：ｃｓｓでページ要素にスタイルを付ける
● hiroshima.htmlのスタイル指定
<html>
<head>
<title>ひろしま</title>
<style type="text/css">
h1 { text-align: center; width: 60%; margin: 5mm auto }
h1 { border: ridge blue 4px; padding: 3mm }
h2 { text-decoration: underline }
p { text-indent: 1ex; margin: 5px 20px }
p { padding: 2mm }
p { background: rgb(200,255,240) }
</style>
</head>
・・・
Webページ文書処理技術
htmlとWebページ検索



検索エンジンは、世界中のwebサーバマシン上に
置かれ公開されているＷebページのもとである
htmlファイルを調べ、ページ中に現れる単語で検
索用の索引を生成している。
<h1>などの見出しに現れる単語は検索用の索引
語として的確と見なせ、重要度が増す
あるページから他のページへの参照リンクがある
ことは参照先のページが有用であると見なす（多く
の他のページから参照されるページほど重要）
マークアップ方式による文書作成


（利点）文書中にマーク（タグなどの印）が明示さ
れるため、そのマークを利用して高度な文書処
理が可能
（不利）印付けをするための知識がないと文書を
作れない、出来上がりの文書の様子を見ること
がWYSIWYG方式ほど容易ではない
Cf. WYSIWYG方式でも（タグ方式ほど明確で容
易ではないが）文書処理技術の応用例はある
アウトラインモードのWord文書生成
スタイルシートの利用
単発の文字飾りではなく、文書の要素レベルを
指定し、要素レベルごとに統一した書式や飾りを
付けるが可能
→ 要素レベルごとの表示や目次生成が可能
 書式や飾りに名前が付いている。
→ 書式や飾りの統一的変更が可能

Wordからのweb文書生成


生成されるｈｔｍｌコードは過度に複雑であり、あ
まりお奨めしない。
生成されるｈｔｍｌコードでのタグの意味は適切に
解釈されていないのが普通であり、この方法で
webページを作成してもマークアップ方式の利点
は得られない。

Download Report