第12回(1月13日) 文書処理 久野禎子
今日の実習:webページ作成 作ったことがない 作ったことがある ・ htmlタグを自分で書いた ・ webページ作成ツールを使った
文書処理技術 ワープロの文書処理技術 - もともと紙に印刷する文書をきちんと綺麗に - もともと紙に印刷する文書をきちんと綺麗に - WYSIWYG(ウィジウィグ:What You See Is What You Get )方式 で作成 Webページの文書処理技術 - ブラウザで取り扱うwebページとそのリンク機能 - マークアップ言語(html)で作成
ワープロによる文書作成: WYSIWYG方式
Webページの作成: マークアップ方式 Webページ作成には、文書マークアップ言語htmlを使って文書中に印(タグ)をつける。するとタグの働きによって文書が整形される。 タグを解釈して機能させて文書を表示させるのがブラウザソフトの役割。
(プレーン)テキストから整形文書へ プレーンテキスト hiroshima.txt WYSIWYG方式 Wordで読込む → 飾りや書式を付けて、Word形式の文書(.doc)に マークアップ方式 ブラウザで読込む → タグを記入してhtml形式のファイル(Webページのこと)に
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でページ要素にスタイルを付ける 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ページの飾り:cssでページ要素にスタイルを付ける ● hiroshima.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サーバマシン上に置かれ公開されているWebページのもとであるhtmlファイルを調べ、ページ中に現れる単語で検索用の索引を生成している。 <h1>などの見出しに現れる単語は検索用の索引語として的確と見なせ、重要度が増す あるページから他のページへの参照リンクがあることは参照先のページが有用であると見なす(多くの他のページから参照されるページほど重要)
マークアップ方式による文書作成 (利点)文書中にマーク(タグなどの印)が明示されるため、そのマークを利用して高度な文書処理が可能 (不利)印付けをするための知識がないと文書を作れない、出来上がりの文書の様子を見ることがWYSIWYG方式ほど容易ではない Cf. WYSIWYG方式でも(タグ方式ほど明確で容易ではないが)文書処理技術の応用例はある
アウトラインモードのWord文書生成 スタイルシートの利用 単発の文字飾りではなく、文書の要素レベルを指定し、要素レベルごとに統一した書式や飾りを付けるが可能 → 要素レベルごとの表示や目次生成が可能 書式や飾りに名前が付いている。 → 書式や飾りの統一的変更が可能
Wordからのweb文書生成 生成されるhtmlコードは過度に複雑であり、あまりお奨めしない。