3．HTML の基本構文（1） 1．インターネット・エクスプローラの使い方

’02 コンピュータ初級 C,D
3.HTML 基本構文
Web ページを作ろう!!
３．HTML の基本構文（１）
１．インターネット・エクスプローラの使い方
Web ページを閲覧するソフトとして，マイクロソフトインターネット・エクスプロ
ーラ (Internet Explorer)を利用します．（Netscape Navigator も利用可能です．）
タイトルバー
メニューバー
ツールバー
Web ページ
アドレス
スクロールバー
1.1
図 1-1：インターネット・エクスプローラの画面
各種バーとアイコン
u タイトルバー：現在表示している Web ページのタイトルが表示されます．
u メニューバー：メニューにマウスの矢印(=マウスポインタ)をあわせてクリックすると，
選択したメニューの項目が表示されます．行わせたい命令を選択します．
u ツールバー：よく使う命令のボタン(=アイコン)の集まりです．クリックすると命令を
実行できます．
u Web ページアドレス：現在表示中の Web ページのアドレス(http://www.○○○○.○○
○.○○)やファイル名が表示されます．ここに直接，アドレスやファイル名を入力す
ると，その Web ページを表示できます．
Web 基礎- 1
’02 コンピュータ初級 C,D
3.HTML 基本構文
Web ページを作ろう!!
u スクロールバー：文書が大きすぎて，1 ページに収まりきらない場合に表示されます．
バーのところで，マウスのボタンを押したまま動かすと上下の部分が表示(=スクロー
ル)されます．上向き三角▲，下向き三角▼ボタンをクリックしてもスクロールします．
ボタン
表 1-1：ツールバーのボタン
機能
直前に見た Web ページに戻ります．
「戻る」ボタンで戻った場合，直前に見た Web ページに戻ります．
表示途中の Web ページの読み込みを中止します．
Web ページを読み込みし直します．
起動時に最初に表示した Web ページ(大学の Web ページ)を表示します．
Web ページを検索することができます．
現在表示している Web ページを印刷します．
文字を大きくしたり，小さくしたりします．
Web 基礎- 2
’02 コンピュータ初級 C,D
1.2
3.HTML 基本構文
Web ページを作ろう!!
リンク
Web ページにはリンク(下マウスポインタが「ã」から「人差し指」に変わる線の引いて
ある部分，他の Web ページにつながっていること)がはられており，簡単に他の Web ページ
に切り替えることができます．
① スクロールバーの下向きの三角▼ボタンをクリックして，画面を下にスクロールさ
せ，青い文字で下線の引いてある部分を表示させます．
② 下線の引いてある部分の真上にマウスポインタを合わせてください．すると，マウ
スポインタが「ã」から「人差し指」に変わります．これは，ここに他の Web ページ
へのリンクがはられていることを表わしています．クリックすると，リンクしている
他の Web ページに切り替わります．
③ ツールバーの｢戻る｣または「ホーム」をクリックすれば，元のページに戻ることが
できます．
1.3 その他の操作
u 「ファイル」「新しいウインドウ」：もう一つインターネット・エクスプローラの
画面を表示します．
u 「ファイル」「開く」
：Web ページのファイル名やアドレスを入力して，表示します．
参照ボタンによって，ファイルを探すことができます．
u 「ファイル」「終了」：インターネット・エクスプローラを終了します．
Web 基礎- 3
’02 コンピュータ初級 C,D
3.HTML 基本構文
2.
Web ページを作ろう!!
Web ページの作り方
Web ページは HTML(Hyper-Text Markup Language)という決められた書式にしたがっ
て記述されています．コンピュータ・ソフトウエアがプログラミング言語で書かれている
ように，Web ページも HTML という一種の言語を使用しています．といっても難しいも
のではなく，「タグ」という記号を用いて，文字や画像などの形式を指定するだけという
簡単なものです
2.1 Web ページのファイルと作成の流れ
●
HTML ファイル
HTML ファイルはテキスト（文字）形式のファイルですので，テキスト・エディタ（秀丸
やメモ帳など）で簡単に作成できます．また，最近ではタグなどの HTML の命令を直接使用
しないで，Web ページを作ることができるソフトウエアやワープロも発売されています．
Word などでは，作成した文書を HTML 形式で保存することによって，HTML ファイルを作成
することができます．授業ではタグを用いて直接編集する方法を学習しています．
HTML ファイルには，「○○○○○.html」または「○○○○○.htm」といったファイル名
がつきます．「○○○○○」の部分は自由ですが，半角英数字文字を使用します．また，
「.html」の部分も半角文字です．
●
Web ページの中身を見よう
インターネット・エクスプローラに表示されている Web ページの中身を見ましょう．<>
のような記号が含まれているものが，HTML ファイルです．
インターネット・エクスプローラで Web ページを表示しておく．
②
メニューバーにある「表示」をクリックし，「ソース」を選択する．
●
①
Web ページ作成の流れ
エディタ(秀丸)
Web ページを作成/修正して
保存
インターネットエクスプローラ
更新
する
図 2-1：Web ページ作成の流れ
Web 基礎- 4
して確認する
’02 コンピュータ初級 C,D
3.HTML 基本構文
Web ページを作ろう!!
2.2 使用するファイルとフォルダ
HTML ファイルは MO ドライブの public_html フォルダに保存します．雛型が教材ドライ
ブの井川のフォルダに準備されているのでそちらからコピーします。
ﾏｲｺﾝﾋﾟｭｰﾀにあるリムーバブルディスクドライブの’public_html’フォルダに，必要な
ファイルを準備します．主なファイルの構成を示しておきます．
ﾏｲｺﾝﾋﾟｭｰﾀ− リムーバブルディスクの中の’public_html’フォルダ
index-j.html：自分の Web ページの雛形です．
link.html：興味のページのリンク集の雛形です．
2.3 エディタ（秀丸）を使った Web ページの作成と修正
● 秀丸を起動する
秀丸は，高機能テキストエディタでシェアウェアです．文字コードの変換など HTML フ
ァイルを作成するためのにべんりなエディタです．
スタート，プログラム，ツールの中に「秀丸」があります．これを「クリック」して，
秀丸を起動します．
● 基本操作
u 新しく作る
「ファイル」の「新規作成」または
(新規作成ボタン)を選びます．はじめは，す
でに新規作成モードになっています．新規作成では，無からすべてタグを作成するこ
とになります．
u 既に作ってあるファイルを直す
「ファイル」の「開く」または
(開くボタン)を選びます．
ファイルのあるフォルダは，ﾏｲｺﾝﾋﾟｭｰﾀ，’リムーバブルディスク’ ，public_html で
す．「ファイルの場所」の右にある下三角ボタン▼を「クリック」して，フォルダを
「ダブルクリック」（または「クリック」して開く）で選択し，開くファイルをダブ
ルクリック」（または「クリック」して開く）で選択して，開きます．
u 作成／修正して保存
・新しく作ったとき：「ファイル」の「名前を付けて保存」または
(上書保存ボタ
ン)を選びます．保存するフォルダは，ﾏｲｺﾝﾋﾟｭｰﾀ， ’リムーバブルディスク’，
Web 基礎- 5
’02 コンピュータ初級 C,D
3.HTML 基本構文
Web ページを作ろう!!
public_html です．「保存する場所」の右にある下三角ボタン▼を「クリック」し
て，保存するフォルダを「ダブルクリック」（または「クリック」して開く）で選
択し，「○○○○○○.html」などと名前を付けて保存ボタンを「クリック」しま
す．
・直したとき：「ファイル」の「上書き保存」または
(上書保存ボタン）を選び，
保存します．
u ファイル表示の切り替え
複数のファイルを開いている場合には，これらのうちの１つのファイルしか表示され
ません．メニューバーにある「ウィンドウ」をクリックすると，現在開いているファ
イルが表示されますので，表示するファイルを選択してください．
u 日本語入力，全角文字と半角文字の切り替え
日本語入力ツールバー
の左端の「A」の部分をクリックしま
す．日本語や全角文字は「ひらがな」を選び，あにします．半角文字やアルファベッ
トは「直接入力」を選び，A(細い A)にします．また，「ALT キー」を押しながら「半
角/全角キー」を押しても，全角文字と半角文字が切り替わります．
u 文字の削除
マウスの左ボタンをクリックしたり，カーソルキー（矢印のキー）を使って，消した
い文字にカーソル（点滅する｜）を合わせます．「Back Space キー」を押すとカーソ
ルの 1 つ前の文字が削除されます．「Delete キー」を押すとカーソルの 1 つ後の文字
が削除されます．
u 文字の挿入
文字を入力するとカーソルキーの後に文字が入力されます．
u 文字列の削除
マウスの左ボタンを押したまま右（上下左右）にマウスを移動すると，その部分の色
が反転します．これを文字列の「選択」と呼びます．「Delete キー」を押すと文字列
が削除されます．
u 文字列の移動
上の要領で文字列を選択して，色を反転させます．「切り取りボタン」
クすると，その部分が削除されます．次に，「貼り付けボタン」
と切り取った部分が貼り付けられ，文字列が移動できます．
Web 基礎- 6
をクリッ
をクリックする
’02 コンピュータ初級 C,D
3.HTML 基本構文
Web ページを作ろう!!
u 文字列のコピー
上の要領で文字列を選択します．「コピーボタン」
が記憶されます．次に，「貼り付けボタン」
をクリックすると，その部分
をクリックすると記憶した部分が貼
り付けられ，文字列をコピーできます．
u やり直し
操作を間違えたときには，「元に戻すボタン」
をクリックすると，前の状態に戻
すことができます．
2.4 作成したファイルをインターネット・エクスプローラで表示する
●
作成した Web ページを新たにインターネット・エクスプローラで見るとき
「ファイル」，「開く」を選びます．参照のボタンをクリックして，作成した HTML フ
ァイルを探してクリックし，開くをクリックします．OK をクリックします．
参照の後に，「ファイルの場所」の右横にある下三角ボタン▼をクリックして，保存
してあるファイルのフォルダを「ダブルクリック」して指定してください．
使用するフォルダは，，ﾏｲｺﾝﾋﾟｭｰﾀ，’リムーバブルディスク’，public_html です．
「ファイルの場所」の右にある下三角ボタン▼を「クリック」して，「ダブルクリック」
で選択してください．
●
既にインターネット・エクスプローラでファイルを見ているとき
タスクバー上にすでにインターネット・エクスプローラが起動されているときは
クリックしてこのウィンドウを前面に出します．そして，
インターネット・エクスプローラの
(更新ボタン)をクリックします．
Web 基礎- 7
’02 コンピュータ初級 C,D
3.HTML 基本構文
3.
Web ページを作ろう!!
Web ページの基本的なタグ
3.1 Web ページの基本型
Web ページでは，<命令>という形をした「タグ」を使います．はじめに，簡単な HTML フ
ァイル index-j.html を示します．エディタで index-j.html を開いてください．
<HTML>
<HEAD>
<TITLE>MyHomepage</TITLE>
</HEAD>
<BODY>
○○○○○の Web ページ
はじめての Web ページです．
</BODY>
</HTML>
HTML の始まりです．
Web ページのタイトルです．
本文の始まりです．
この間に本文を書きます
本文の終わりです．
HTML の終わりです．
全角は横に長い文字で
す．タグには使えません
u <命令>は，半角（全角ではなく）で書きます．
正<H1>
誤＜H１＞
u <命令>は，大文字でも小文字でも OK です．
正<H1>
正<h1>
u 「Enter キー」を押すとエディタ上では次の行に（改行）移動します．また，「space
キー」を押すと空白が挿入されますが，Web ページ上では無視されてしまいます．
u <命令>∼</命令>の形が数多くあります．この∼のところが命令に従います．
3.2 Web ページでできること
インターネット・エクスプローラで「ファイル」，「開く」から index-j.html を開いてお
いてください．エディタ「秀丸」上で，index-j.html を修正していきましょう．
●
文字の大きさや字体，色を変えることができます．
<H1>ここが見出しになります</H1>
数字は１(大きな見出し)∼６(小さな見出し)
Web 基礎- 8
’02 コンピュータ初級 C,D
3.HTML 基本構文
<HTML>
<HEAD>
<TITLE>MyHomepage</TITLE>
</HEAD>
<BODY>
<H1>○○○○○の Web ページ</H1>
はじめての Web ページです．
</BODY>
</HTML>
Web ページを作ろう!!
この部分が１番大きな見出
し文字になります．
<FONT SIZE=6>この文字の大きさが変わります</FONT>
数字は１(小さな字)∼7(大きな字)
<FONT COLOR=”Blue”>この文字の色が変わります</FONT>
文字の色は下の表から選んでください．
表 2-1：色の対応表
White
白 Black
黒 Red
赤 Green
Blue
青 Yellow
黄 Purple
紫 Aqua
Maroon
Gray
栗 Navy
灰 Silver
濃紺 Olive
銀 Lime
緑 Teal
ライム Fuchsia
緑
藍緑
青緑
赤紫
表 2-2：その他の色
Snow Linen Bisque Seashell Ivory Azure LightGrey RoyalBlue
SkyBlue Cyan DarkGreen Aquamarine Beige Wheat Tan Gold
Orange Peru Senna Salmon Tomato Coral Pink Violet Plum
Indigo
<FONT COLOR=”Indigo”>この文字の色が変わります</FONT>
文字の色がインディゴ・ブルーになります．
色は，赤，緑，青の３原色で表わすことができます．「#○○○○○」の形で，２桁ずつ
Web 基礎- 9
’02 コンピュータ初級 C,D
3.HTML 基本構文
Web ページを作ろう!!
で赤，緑，青に対応します．数値は２桁の 00 から FF までの 16 進数を使います．数字が小
さい（00）と色が薄く，数字が大きい（FF）と色が濃くなります．
例：#FF0000 赤が FF，緑が 00，青が 00→まっ赤（Red）
#0000FF 赤が 00，緑が 00，青が FF→まっ青（Blue）
#FF00FF 赤が FF，緑が 00，青が FF→ま紫
#A52A2A 赤が A5，緑が 2A，青が 2A→茶
#808000 赤が 80，緑が 80，青が 00→オリーブ
<FONT COLOR=”#0000FF”>この文字の色が変わります</FONT>
文字の色が青くなります．
<H1>○○○○○のホームページ</H1>
<FONT SIZE=5>はじめてのホームページです.</FONT>
この部分の文字の大き
さが変わります．
<H1>○○○○○のホームページ</H1>
<FONT COLOR=”Blue”>はじめてのホームページです．</FONT>
この部分の文字の
色が青に変わりま
す．
● 背景に色をつけたり，画像を背景にすることができます．
<BODY>の部分を次のように置き換えます．
<BODY BGCOLOR=”Yellow”>
背景が黄色に変わります．色は表から選びます．
<BODY BACKGROUND=”back1.gif”>
背景が”back1.gif”という画像が背景になります．
index-j.html を修正しましょう．
画像ファイルが必要です．
<BODY BGCOLOR=”Yellow”>
<H1>○○○○のホームページ</H1>
背景の色が黄色に
なります．
Web 基礎- 10
’02 コンピュータ初級 C,D
3.HTML 基本構文
フォルダ pic にある画像
<BODY BACKGROUND=”pic/back1.gif”>
<H1>○○○○のホームページ</H1>
●
“back1.gif”を使います.
表組や枠をつけることができます．
<TABLE>
<TR><TD>A</TD><TD>B</TD></TR>
<TR><TD>C</TD><TD>D</TD></TR>
</TABLE>
<TABLE>∼</TABLE>
BORDER
<TR>∼</TR>
<TD>∼</TD>
Web ページを作ろう!!
表になります．
表の始まりと終わりです．
枠です．
１行の始まりと終わりです．
１枠の始まりと終わりです．
<TABLE BORDER=5>
<TR><TD>○○○○のページ</TD></TR>
</TABLE>
○○○○のページの周囲に
太さ“５”の枠を作ります．
index-j.html を修正しましょう．
周囲に太さ“10”の枠を
作ります.
<BODY BACKGROUND=”pic/back1.gif”>
<TABLE BORDER=10>
<TR><TD>
<H1>○○○○のホームページ</H1>
</TD></TR>
</TABLE>
Web 基礎- 11
’02 コンピュータ初級 C,D
3.HTML 基本構文
Web ページを作ろう!!
画像ファイルが必要です．
写真や絵などの画像を表示できます．
<IMG SRC=”welcome1.gif”>
画像”welcome1.gif”が表示されます．
<IMG SRC=”photo.jpg”>
画像” photo.jpg”が表示されます．
●
index-j.html を修正しましょう．
<IMG SRC=”pic/welcome1.gif”>
<H1>○○○○のホームページ</H1>
<IMG SRC="pic/anime1.gif">
画像ファイルが必要です．
フォルダ pic にある画像
“welcome1.gif”を表示します.
“anime1.gif”を表示します.
“welcome1.gif”を
表示します.
“anime1.gif”を表示します.
●
音声や動画を扱えます．（参考）
音声ファイルが必要です．
<A HREF=”sound.wav”>音がなる</A>
クリックすると”sound.wav”が再生されます．
動画ファイルが必要です．
<IMG DYNSRC=”movie.avi”>ビデオ</A>
クリックすると”movie.avi”が再生されます．
● 他のページをリンクすることができます．
<A HREF=”sample2.html”>sample2</A>
クリックすると sample2.html を表示します．
この部分が青くなり，
下線が付きます
この部分が青くなり，下線が付きます
<A HREF=”http://www.waseda.ac.jp/index-j.html”>早稲田大学</A>
クリックすると http://www.waseda.ac.jp/index-j.html に切り替わります．
Web 基礎- 12
’02 コンピュータ初級 C,D
3.HTML 基本構文
Web ページを作ろう!!
<HTML>
<HEAD>
<TITLE>MyHomepage</TITLE>
</HEAD>
<BODY>
<H1>○○○○○のホームページ</H1>
はじめてのホームページです．
<A HREF=”link.html”>リンクへ行く</A>
</BODY>
</HTML>
“link へ行く”に下線が表示
され，クリックするとファイル
”link.html”にリンクします．
リンク先のファイル link.html をエディタで開いて，確認しましょう．
<HTML>
<HEAD>
<TITLE>私のリンク集</TITLE>
</HEAD>
<BODY>
<H1>私のリンク集</H1>
<A HREF=”index-j.html”>目次へ戻る</A>
</BODY>
</HTML>
Web 基礎- 13
“目次へ戻る”に下線が表示され，クリッ
クするとファイル
”index-j.html”に戻ります．
’02 コンピュータ初級 C,D
3.HTML 基本構文
Web ページを作ろう!!
index-j.html を修正しましょう．
<BR>は改行です．
<HTML>
<HEAD>
<TITLE>MyHomepage</TITLE>
</HEAD>
<BODY>
<H1>○○○○○の Web ページ</H1>
はじめての Web ページです．
<BR>
<A HREF=”sample2.html”>sample2 へ行く</A>
<BR>
<A HREF=”http://www.tfm.co.jp/”>東京 FM</A>
</BODY>
</HTML>
“東京 FM”に下線が表示
され，クリックするとファイル
”www.tfm.co.jp/”にリンクします．
改行しています
“東京 FM”にリンクします
●
箇条書の作成
サーバーからコピーした index-j.html では，前述のリンクが箇条書リスト内に入って
います．
<OL>∼</OL> 番号つきリスト
<UL>∼</UL> 番号なし（記号）リスト
∼のなかに<li>ではじめてリスト項目を記入します．
● その他の主なタグ
<P>
段落を変えます．幅の広い改行です．
<BR>
改行します．
<HR>
区切りの水平線を引きます．
<CENTER>∼</CENTER> ∼の部分を真ん中によせます．
 ∼の部分はコメント／説明文となり，Web ページに表示されません．
Web 基礎- 14
’02 コンピュータ初級 C,D
3.HTML 基本構文
Web ページを作ろう!!
●
フリー画像を利用しよう
インターネット上で，自由に使える画像が数多く公開されていますので，利用しよう．
u 取り込みたい画像にマウスを合わせ，「マウスの右ボタン」をクリック，「名前を付
けて画像を保存」で画像を取り込むことができます．ﾏｲｺﾝﾋﾟｭｰﾀ，
ﾏｲｺﾝﾋﾟｭｰﾀ，’リムーバブルディスク’，public_html フォルダの中の画像収集用に作
成した pic フォルダに保存します．この場合，public_html フォルダにある HTML ファ
イルのタグには，相対パス指定で，
<IMG SRC=”pic/welcome1.gif”>
<BODY BACKGROUND=”pic/back1.gif”>
のように記入します．ファイル拡張子”.gif”と”.jpg”の部分を間違えないようにしまし
ょう．
u 取り込んだ画像のファイル名をメモしておきましょう．
u 著作権の問題がありますので，作者の注意・指示にしたがって利用してください．
Web 基礎- 15
’02 コンピュータ初級 C,D
3.HTML 基本構文
4.
Web ページを作ろう!!
少し複雑な Web ページ
4.1 もろもろのタグ
● 全体の文字の色を変更します．
<BODY BGCOLOR=”Black” TEXT=”White” LINK=”Red” VLINK=”Yellow”>
背景を黒，文字を白，リンクの文字を赤，既に利用したリンクの文字を黄色にします．
● 画像をクリックすると，リンク先に飛ぶようにします．
<A HREF=”ongaku.html”><IMG SRC=”pic/anime1.gif></A>
画像”anime1.gif”がリンクボタンになります．
● メイルアドレスをクリックするとメールソフトが起動する．
<A HREF=”mailto:[email protected]”>[email protected]</A>
メールアドレスが必要です．
● 文字を横にスクロールする．
<MARQUEE>ようこそ○○○○の Web ページへ</MARQUEE>
「ようこそ○○○○の Web ページへ」の部分が横に移動します．
●
ページ内でリンク（ジャンプ）する
一つの Web ページが長い場合などに使います．リンク（青い下線部分）をクリックす
ると，指定した場所に移動することができます．
・リンク元の記述
<AHREF=”#ongaku”>音楽</A>
“音楽”に下線が引かれます．
・リンク先（飛び先）の記述
<ANAME=”ongaku”>音楽の話題</A>
リンク元の“音楽”の部分をクリックすると，“音楽の話題”の場所に移動します．
#ongaku と ongaku が対応します
Web 基礎- 16
’02 コンピュータ初級 C,D
3.HTML 基本構文
Web ページを作ろう!!
4.2 フレームを使う
フレームは，１画面を複数の画面に分割して，それぞれの画面を１つのHTMLファイルで記
述する手法です．１画面を２画面に分割するときには，メインのファイルと，各画面ファ
イルの合計３つのHTMLファイルが必要になります．
左のフレームです．
右のフレームです．
図 4-1：フレームのイメージ図
● メインの HTML ファイルの記述
ここでは，ファイル名を frame.html とします．
<HTML>
<HEAD>
<TITLE>Frame</TITLE>
</HEAD>
<FRAMESET COLS="20%,80%">
<FRAME SRC="left.html" NAME="F1">
<FRAME SRC="right.html" NAME="F2">
</FRAMESET>
</HTML>
<BODY>∼</BODY>はありません．
Web 基礎- 17
縦（COLS）2 つに分割し，左フ
レームの幅を全体の 20％，右の
フレームの幅を 80％とします．
左フレームを”left.html”に
します．このフレームの名前を
“F1”とします．
右フレームを”right.html”に
します．このフレームの名前を
“F2”とします．
’02 コンピュータ初級 C,D
●
3.HTML 基本構文
Web ページを作ろう!!
left.html と right.html の記述
left.html と right.html の内容は，普通の HTML ファイルと同じです．
left.html の例を示します．
<HTML>
<HEAD>
<TITLE>LeftFrame</TITLE>
</HEAD>
<BODY>
ここに，左のフレームに表示する内容を書きます．
</BODY>
</HTML>
right.html の例を示します．
<HTML>
<HEAD>
<TITLE>RightFrame</TITLE>
</HEAD>
<BODY>
ここに，右のフレームに表示する内容を書きます．
</BODY>
</HTML>
Web 基礎- 18
ここに，左のフレームに表示
する内容を書きます．
ここに，右のフレームに表示す
る内容を書きます．
’02 コンピュータ初級 C,D
3.HTML 基本構文
5.
Web ページを作ろう!!
自分の Web ページを作ろう
index.html と index2.html に自己紹介の Web ページの雛形を用意しました．必要な場
所に記入したり，変更すると自己紹介の Web ページが完成します．
もちろん，雛形にこだわらず Web ページを作成して構いません．
u 背景，Welcome ロゴ，動物などのアニメ，区切り線やボタンなどの画像を選択できま
す．好みのものを選んでください．picute.html を開くと，利用できる画像データが確
認できます．これらは，インターネットで見つけたフリーの画像です．“freelink.html”
に画像のリンクを用意しました．このリンクをたどると，素敵な背景や画像を探すこ
とができます．
u お気に入りのリンクを探しておいて，その Web ページのアドレスを記録してくださ
い．リンクを張るとクリックするだけでお気に入りのページに飛ぶことができます．
u index2.html にフレームを用いた雛形を用意しました．frame1.html が右フレーム，
frame2.html が左フレームのファイルになります．ongaku2.html と kyoumi2.html は，
フレーム用のリンクファイルです．
Web 基礎- 19
’02 コンピュータ初級 C,D
3.HTML 基本構文
Web ページを作ろう!!
● 基本的な Web ページ
index.html の内容
<HTML>
<HEAD><TITLE>My Home page</TITLE></HEAD>
背景です．
back1∼30 から選びます
<BODY BACKGROUND="pic/back1.gif">
<CENTER>
中央揃えの始まりです．
ようこその画像です．
welcome1∼20 から選びます．
<IMG SRC="pic/welcome1.gif">
<MARQUEE>○○○○の Web ページへようこそ</MARQUEE>
ようこその文字がスクロール
改行です．
<P>
します．
<P>
<TABLE BORDER=6>
<TR><TD><H2>○○○○の Web ページ</H2></TD></TR>
</TABLE>
表の枠を使って，強調します．
<IMG SRC=="pic/photo00.jpg" height=20% width=20%>
<P>
自分の写真が入ります．Photo00 の部分
を変更します．数字を変えると大きさが
<IMG SRC="pic/line1.gif">
変わります．
<P>
区切り線です．
line1∼15 から選びます．
<IMG SRC="pic/animal1.gif">
<IMG SRC="pic/animal1.gif">
<P>
<IMG
<IMG
<IMG
<IMG
<IMG
SRC="pic/button1.gif">名前：○○○○<P>
SRC="pic/button1.gif">出身：○○○○<P>
SRC="pic/button1.gif">星座：○○座<P>
SRC="pic/button1.gif">血液型：○型<P>
SRC="pic/button1.gif">趣味：○○○○<P>
<IMG SRC="pic/anime1.gif">
<HR>
動物の画像です．
animal1∼30 から選びます．
ボタンの画像です．
button1∼15 から選びます．
アニメの画像です．
anime1∼30 から選びます．
Web 基礎- 20
’02 コンピュータ初級 C,D
3.HTML 基本構文
Web ページを作ろう!!
ここに，近況の報告，趣味の話や，主張したいことがらを書いてください．
<P>
<IMG SRC="pic/button2.gif">
<A HREF="kyoumi.html">最近興味のあること</A>
<P>
<IMG SRC="pic/button2.gif">
<A HREF="ongaku.html">好きな音楽</A>
<P>
自分で作成したファイルを
リンクします．
<HR>
お気に入りのリンク <P>
外部の Web ページへのリンクで
す．
<IMG SRC="pic/button2.gif">
<A HREF="http://www.waseda.ac.jp/index-j.html">大学のページへ</A>
<P>
<IMG SRC="pic/button2.gif">
<A HREF="http://www.isize.com/">リクナビ</A><BR>
<P>
</CENTER>
中央揃えの終わりです．
<HR>
</BODY>
</HTML>
Web 基礎- 21
’02 コンピュータ初級 C,D
3.HTML 基本構文
Web ページを作ろう!!
● フレームを使った Web ページ
index2.html の内容
<HTML>
<HEAD>
<TITLE>Frame</TITLE>
</HEAD>
<FRAMESET COLS="20%,80%">
<FRAME SRC="frame1.html" NAME="F1">
<FRAME SRC="frame2.html" NAME="F2">
</FRAMESET>
</HTML>
P19 と同じ内容です．
frame1.html（左のフレーム）の内容
<HTML>
リンクしたときに，右側のフレーム
<HEAD>
(F2)にページを表示します．
<TITLE>Left Frame</TITLE>
<BASE TARGET="F2">
背景を青色，リンク文字を白色，リンク後の文字を黄色にします．
</HEAD>
<BODY BGCOLOR="blue" TEXT="white" LINK="white" VLINK="yellow">
<A HREF="frame2.html#profile">プロフィール</A><BR>
<A HREF="kyoumi2.html" TARGET="F2">興味</A><BR>
<A HREF="ongaku2.html" TARGET="F2">音楽</A><BR>
<A HREF="frame2.html#link">リンク</A><BR>
</BODY>
「プロフィール」をクリックすると，frame2.html の profile の所を
</HTML>
表示します．
「興味」をクリックすると，ongaku2.html を表示します．
Web 基礎- 22
’02 コンピュータ初級 C,D
3.HTML 基本構文
Web ページを作ろう!!
frame2.html（右のフレーム）の内容
<HTML>
<HEAD><TITLE>My Home page</TITLE></HEAD>
<BODY BACKGROUND="pic/back1.gif">
ここは，index.html と同じ内容です．
<A NAME="profile">
私のプロファイル
<P>
frame1.html の「プロファイル」をクリックすると，
ここを表示します．
ここは，index.html とだいたい同じ内容です．
<HR>
<A NAME="link">
お気に入りのリンク <P>
frame1.html の「リンク」をクリックすると，ここを
表示します．
ここは，index.html と同じ内容です．
</BODY>
</HTML>
Web 基礎- 23
’02 コンピュータ初級 C,D
6.
3.HTML 基本構文
Web ページを作ろう!!
自分で画像や写真を作る
6.2 画像ファイルの形式
写真や絵は，画像形式のファイルとしてコンピュータに格納(保存)されます．しかしな
がら，これら写真や絵は，文字だけのデータに比べ，けた違いに“記憶容量”を必要とし
ます．そこで，これら画像ファイルをコンパクトにするためにいくつかの圧縮形式が提案
され，使用されています．
u ビットマップ形式(BitMap)
「*******.bmp」というファイル名がつくファイル形式で，基本的には無圧縮の画像ファ
イルです．これは，無圧縮なので非常に緻密に元画像を表現しますが，使用色数が増え
ると飛躍的に必要とされる”記憶容量”も増えます．Web ページには使いません．
u ジフ形式(GIF) Graphic Interchange Format
「*******.gif」というファイル名がつくファイル形式で，上記のビットマップ形式から
圧縮され，生成されることも多いです．ただし，使用色数は 256 色となりますが，必要
とされる記憶容量も少なくてすみます．デジタル・カメラの画像や簡単な絵にも利用さ
れています．特に Web ページの画像素材としても一般的に使用されています．背景が透
き通る透過性の gif ファイルもあります．
u ジェイペグ形式(JPEG) Joint Photographic Exports Group File Interchange Format
「********.jpg」というファイル名がつくファイル形式で，動画の圧縮形式である MPEG
の第 1 段階で設定されたもので，その圧縮形式の特性により主に写真などに用います．
6.2 写真の画像を使う
写真をスキャナーで取り込んだり，デジタルカメラを使って撮影すると，jpg ファイル
や gif ファイルを作成することができます．他人の作成した写真は著作権を侵害しますの
で，注意してください．
Web 基礎- 24
’02 コンピュータ初級 C,D
3.HTML 基本構文
Web ページを作ろう!!
6.3 絵の画像を作る
絵は「ペイント」を使って簡単に作成することができます．絵の周囲の設定や透過性処
理は，「Photo Editor」を使います．
●
ペイントを使った絵の作成
①
ペイントの起動
画面下の「スタート」「プログラム」「アクセサリー」「ペイント」を選択します．
②
絵を書く
消しゴム
塗つぶし
鉛筆
はけ
ｴｱﾌﾞﾗｼ
文字
直線
色の指定
丸や四角
作画の手順：
道具（鉛筆，ｴｱﾌﾞﾗｼなど）をクリックして選ぶ
修正の手順：
間違えたら
→
→
色を選ぶ
→
マウスで書く
「編集」「元に戻す」を選ぶ．
③
絵を保存する
「ファイル」「名前を付けて保存」を選び，名前を付けて保存します．「ファイルの
種類」は，GIF 形式を選びます．
●
Photo
Editor を使った絵の変換
Web 基礎- 25
’02 コンピュータ初級 C,D
3.HTML 基本構文
① Photo Editor の起動
画面下の「スタート」「プログラム」「Photo
Web ページを作ろう!!
Editor」を選択します．
② ファイルを開く
「ファイル」の「開く」または
(開くボタン)をクリックし，「ペイント」で作成し
たファイルを開きます．
③ 透過性にする
透過色ボタン
をクリックし，透過性にしたい背景の所をクリックします．透過色が網
目上に変化します．
④ 範囲の指定
選択ボタン
をクリックして，保存したい範囲を指定して，コピーボタン
をクリッ
クします．「編集」「新しいイメージとして貼り付け」を選ぶとコピーした部分だけの
画像になります．
⑤ ファイルの保存
「ファイル」「名前を付けて保存」を選びます．「ファイルの種類」は GIF 形式を選び，
名前を付けて保存します．
⑥ Web ページに取り込む
タグは，
<IMG SRC=” ○○○○.gif”>
<BODY BACKGROUND=” ○○○○.gif”>
のようにします．ファイル名の”.gif”と”.jpg”の部分を間違えないようにしましょう．
Web 基礎- 26
’02 コンピュータ初級 C,D
3.HTML 基本構文
7.
Web ページを作ろう!!
動く画像を作る
7.1 D-Pixed を使ったアニメの作成
●
ペイントソフト(D-Pixed)を起動します．
D-Pixed は，絵を描いたり，簡単なアニメーションを作成できるソフトで，一般にはペ
イント(paint)ソフトと呼ばれるものの一種です．このソフトは，DOIchan!(土井淳)氏が
中心となって開発したソフトウェアで，フリーソフトとして，無料で使用することがで
きます．ﾏｲｺﾝﾋﾟｭｰﾀ ,’ntfile1’のｻﾏｰｾｯｼｮﾝ 00(Y:) , 自分の名前のなかの D-Pixed です．ダ
ブルクリックして，D-Pixed を起動します．
●
基本操作
◆ 新しく作るとき：「ファイル(F)」-「新しい絵(N)」を選び，クリックします．
◆ 既に作ってあるファイルを直すとき：「ファイル(F)」-「絵を開く(O)」を選びクリ
ックします．
ファイルのあるフォルダは，ﾏｲｺﾝﾋﾟｭｰﾀ ,’ntfile1’のｻﾏｰｾｯｼｮﾝ 00(Y:) , 自分の名前です．
｢ファイルの場所｣の右にある下三角ボタン▼をクリックして，編集したいファイル名
を指定(クリック)し，開く(O)をクリックします．
◆
作成／修正して保存します：
・新しく作ったとき：
◇「ファイル(F)」-「名前を付けて保存(A)」を選び，クリックします．｢保存する
場所(I)｣の右にある下三角ボタン▼をクリックして，保存するフォルダを指定
します．保存するフォルダは，ﾏｲｺﾝﾋﾟｭｰﾀ ,’ntfile1’のｻﾏｰｾｯｼｮﾝ 00(Y:) , 自分の
名前です．
◇次に，「ファイル名(N)」に保存するファイル名をキーボードから入力します．
◇さらに「ファイルの形式(T)」の右にある下三角ボタン▼をクリックして，ファ
イル形式を指定します．今回は，「GIF イメージ (*.GIF)」を選択します．
◇最後に，「保存」をクリックします．
・編集し直したとき：「ファイル(F)」-「絵を保存(S)」を選び，クリックします．
◆
ファイル(ウィンドウ)の切り替え：複数の画像ファイルを画面に表示している場合
は，画面が重なって表示され，一番上にある画像の編集しかなされません．他の画像
を編集するには，「ウィンドウ(W)」をクリックし，編集対象としたい画像ファイル
を指定し，クリックしてください(または，直接，編集対象としたい画像(のタイトル
バー)をクリックしてください)．
Web 基礎- 27
’02 コンピュータ初級 C,D
3.HTML 基本構文
Web ページを作ろう!!
図 7-1：D-Pixed の画面
7.2 写真を動かそう
デジタルスチルカメラで撮った数枚の写真を組み合わせて，動きのある写真を作ってみま
しょう．
手順は，写真を「レイヤ」と呼ばれるものに貼り付け，1 つのファイルにすればできあが
りです．レイヤとは，日本語で言うと「層」のことで，複数の画像を重ね合わせて 1 枚の
画像を表現するテクニックです．
．．．．．．．
D-Pixed では，レイヤを利用したぱたぱたアニメを作ることができます．
例 <自分の HP で使用する場合>
自分の HP の適当な位置に，以下の文を挿入します．
<IMG SRC=”../pic/mini.gif”>
<手順>
① 写真の取込み
ファイルのあるフォルダは，ﾏｲｺﾝﾋﾟｭｰﾀ， ‘ntfile1’のｻﾏｰｾｯｼｮﾝ 00(Y:) ，自分の名前で
す．｢ファイルの場所｣の右にある下三角ボタン▼をクリックして，「photo01.gif」を指
Web 基礎- 28
’02 コンピュータ初級 C,D
3.HTML 基本構文
Web ページを作ろう!!
定し，開く(O)をクリックします．
さらに，同じ手順で，「photo02.gif」，「photo03.gif」の計 3 つの画像を取り込みま
す．
②
編集対象の表示
一番最初に取り込んだ「photo01.gif」を編集対象にするために，「ウィンドウ(W)」を
クリックし，「photo01.gif」を指定し，クリックしてください(または，直接，編集対
象としたい画像「photo01.gif」をクリックしてください)．
③
「レイア管理」ウィンドウの表示
もし，画面 6.1 のように，「レイア管理」ウィンドウが表示されていなかったら，「ウ
ィンドウ(W)」をクリックし，「レイア管理(L)」を指定し，クリックしてください．も
う一度，同じことをすると，「レイア管理」ウィンドウは，消去されます．
④ レイア管理ウィンドウの編集
「photo01.gif」の「レイア管理」ウィンドウの「はたはたアニメ」-「表示時間」にキ
ーボードから「500」を入力します．この値は，「photo01.gif」の表示時間を表してい
ます．
つぎに，「描画方法」-「・前に重ねる」をクリックします．
さらに，「新規レイア」をクリックし，新しいレイア(フレーム 02)を生成します．
⑤
画像の複写(コピー)
②と同じ手順で，編集対象を「photo02.gif」にします．
次に，メニューの「編集(E)」の「全選択(A)」をクリックします．さらに今度は，メニ
ューの「編集(E)」の「コピー(C)」をクリックします．
さらに，②と同じ手順で，編集対象を「photo01.gif」に戻し，「レイア管理」ウイン
ドウで，新規の「フレーム 02」となっていることを確認し，メニューの「編集(E)」の
「貼り付け(P)」をクリックし，複写を完了します．
⑥
繰り返し
④∼⑤の手順を繰り返し，「photo01.gif」にもう 1 枚の画像も貼り付けます．
⑦
保存
メニューの「ファイル(F)」-「名前を付けて保存(A)」を選び，クリックします．｢保存
する場所(I)｣の右にある下三角ボタン▼をクリックして，保存するフォルダを指定します．
保存するフォルダは，ﾏｲｺﾝﾋﾟｭｰﾀ，’ntfile1’のｻﾏｰｾｯｼｮﾝ 00(Y:) ，自分の名前です．
次に，「ファイル名(N)」に保存するファイル名「photo.gif」をキーボードから入力し
ます．
さらに「ファイルの形式(T)」の右にある下三角ボタン▼ をクリックして，ファイル形
Web 基礎- 29
’02 コンピュータ初級 C,D
3.HTML 基本構文
Web ページを作ろう!!
式を指定します．今回は，「GIF イメージ (*.GIF)」を選択します．
最後に，「保存」をクリックします．
すると，「GIF 形式で保存」ウィンドウが表示されるので，「・動画 GIF」をクリッ
クし，「OK」をクリックします．なお，「リピート数」を「0」以外に設定すると，設
定した回数だけ，動画の表示を繰り返すように設定できます．「 0」の場合は，無限回で
す．
⑧ GIF 動画の表示
自分の HP の適当な位置に，以下の文を挿入します．
<IMG SRC=”photo.gif”>
7.3 アニメを作ろう
．．．．．
今までにいくつかのできあいの“動く絵”を HP で使用してきましたが，D-Pixed を使用
すれば，自分で簡単に”動く絵(アニメ GIF，動画 GIF とも言います)”を作成することがで
きます．
<手順>
新しく絵を作る場合：メニューから「ファイル(F)」-「新しい絵(N)」を選びます．すると
絵のサイズを聞かれますので，ピクセル単位で絵の大きさを指定します．
ファイルから絵を開く場合：メニューから，「ファイル(F)」-「絵を開く(O)」を選びます．
ここで編集したいファイルを選択して OK を押すと絵が開けます．ここ
で開ける絵は，ビットマップファイル(BMP)，D-Pixed 形式(DPX)，GIF
ファイル(GIF)，D-Pixed グリッド形式(DGR)，PostPet 部屋またはおや
つ(PAC)と，アドインで登録されているファイル形式のファイルです．
上記のいずれかの方法で編集する画像が D-Pixed に表示されます．この
状態で，ツールダイアログ（図 6-2）から描画ツールおよび描画モードを
選んで描画をします．
図 7-2：ツールダイアログ
さて，描画を行うときにパレットというものを使って色
を選びます．メニューから「ウィンドウ(W)」-「パレット
(P)」を選ぶと，パレットウィンドウ（図 6-3）が表示され
ます．
D-Pixed では，２つの色を使って線などを描きます．上
の図のパレットウィンドウで，「左」，「右」と書かれて
Web 基礎- 30
’02 コンピュータ初級 C,D
3.HTML 基本構文
Web ページを作ろう!!
いて，それぞれ赤，黒が選択されています．この２色を利用しますが，ここでは，それぞ
れ，「左の色」，「右の色」と呼ぶことにします．
実際に描画ツールを使って描画するとき，この２色を混合させて色を塗ります．パレット
ウィンドウの下の部分にスライダがついていてその上に２色をだんだん混ぜていったよう
なものが表示されています．ここでスライダのさしている図 7-3：パレットウィンドウ
色が，実際に塗られる色になります．つまり，２色を混ぜ
ないで「左の色」で塗りたいとしたら，スライダを一番左にします．
さて，この２色ですが，２色それぞれを選択するには，パレットウィンドウに縦横１６個
ずつ計２５６個のパレットの中から，選びます．「左の色」を選ぶにはその色の上で左ク
リック，「右の色」を選ぶには，その色の上で右クリックです．選ばれた色は，それぞれ，
「赤」，「青」の枠で囲まれます．また，色は，編集中の絵からスポイトすることもでき
ます．吸い取りたい色のところで右クリックで「左の色」が選択できます．
また，D-Pixed では，この２色のほかに，「透明色」と「背景色」があります．「透明色」
はレイヤで後ろの絵が透ける色のことで，描画方法によっては描画時に透明色は塗られな
い色になります．もちろん，この場合，透明色と他の色を混合させて塗ることもできます．
「背景色」は，範囲を指定して削除したりしたときに削除後の色になる色です．アドイン
ツール「消しゴム」で消された後の色もこの色です．
絵を保存する：D-Pixed で描いた絵をファイルに保存するには，メニューから「ファイル
(F)」-「名前をつけて保存(A)」を選びます．今回は，「GIF イメージ (*.GIF)」を選択し
ます．また，編集中の絵はこまめに保存することをお勧めします．
Web 基礎- 31
’02 コンピュータ初級 C,D
8.
3.HTML 基本構文
Web ページを作ろう!!
ジャバスクリプト (JavaScript)入門
．．．．．．
HTML(Web ページを書いている広い意味での言語)は，簡単に Web ページを作成できま
すが，それだけで作った Web ページは，情報の(静的な)提示は得意なのですが，受け手の
側の操作に合わせて，表示位置を移したり，データの入力やマウスのクリックにより処理
の流れを変えるといった動的(アクティブ)な動作はできません．これを補うものとして，
Netscape 社で JavaScript が開発されました．これは，HTML 内に付け足すことによって，
．．．．．．．
インタラクティブな動作を可能にするスクリプト言語といわれるものです．
なお，JavaScript は，ブラウザ(Web ページを表示するソフト)であるマイクロソフトイ
ンターネットエクスプローラーやネットスケープナビゲーターなど最新版には，あらかじ
め組み込まれていますので，特別なソフトを入手する必要はありません．
● 簡単な JavaScript の例
【警告メッセージの表示】(java01.html)
JavaScript の主な用途のひとつに，Web ページを訪れる人への「フィードバック」があ
ります．Web ページを読む前に訪問者へ知ってほしい情報を表示する警告メッセージを作
ってみましょう．
<HTML>
<HEAD><TITLE>警告ウィンドウのサンプル</TITLE>
<SCRIPT LANGAGE = JAVASCRIPT>
alert("私のWebページへようこそ!")
JavaScript の命令をここから「使う」
という宣言文です．
</SCRIPT>
</HEAD>
<BODY>
JavaScript の命令です． ” ” で囲まれた文字
が「警告ウィンドウ」に表示されます．
…
</BODY>
</HTML>
JavaScript の命令は，ここで終了．
Web 基礎- 32
’02 コンピュータ初級 C,D
3.HTML 基本構文
Web ページを作ろう!!
【ステータスバーに説明表示】(java02.html)
リンク(他の Web ページの呼び出し)にマウスの矢印(ポインタ)を合わせると，そのリンク
先の説明がステータスバー(画面下の説明文)に表示されます．
<HTML>
<HEAD><TITLE>ステータスバーに説明表示のサンプル</TITLE>
<SCRIPT LANGUAGE = JAVASCRIPT>
function setStatus(msg) {
status = msg
}
</SCRIPT>
</HEAD>
<BODY>
…
<A HREF="java01.html" onMouseOver="setStatus('警告ウィンドウのサンプルを表示します');return
true">java01.html</A>
</BODY>
</HTML>
【日付の表示】(java03.html)
JavaScript では,コンピュータから現在の時刻を番号として読み取ることができます．
<HTML>
<HEAD>
<TITLE>日付表示のサンプル</TITLE>
<SCRIPT LANGAGE = JAVASCRIPT>
var dayName = new Array ("日","月","火","水","木","金","土")
var monName = new Array ("1","2","3","4","5","6","7","8","9","10","11","12")
var now = new Date
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGAGE = JAVASCRIPT>
document.write("<H2>今日は，" + now.getYear() + "年"
+ monName[now.getMonth()] + "月"
+ now.getDate() + "日"
+ "(" + dayName[now.getDay()]
+ "曜日)です</H2>")
</SCRIPT>
</BODY>
</HTML>
Web 基礎- 33
’02 コンピュータ初級 C,D
3.HTML 基本構文
Web ページを作ろう!!
【参考資料】
u フリーソフトのダウンロード
フリーソフトは、free(無料)で使用できるソフトの総称です。本講座で使用しました
StgPro(秀丸)や D-Pixed などがそうです。これらのソフトの入手する方法は、パソコン
雑誌の付録などにもついていたりしますが、一番確実で、新しいものを入手するには、
インターネットを通じて手に入れる方法です。これをダウンロード(down load)といいま
す。以下にダウンロード可能な Web ページのアドレスを記載します。
-秀丸http://download.yahoo.co.jp/vector/win/net/htmledit/
-D-Pixedhttp://download.yahoo.co.jp/vector/win/art/graphics/edit/
ダウンロードしたソフトは、通常、ファイルの容量を小さくするために”圧縮”というこ
とがなされており、そのままでは使用できません。”解凍”をしてご使用ください。解凍
方法は、それぞれのソフトに“readme.txt”として、ヘルプ(HELP)ファイルに記載され
ていますのでそちらをご参照ください。
u フリーソフトの使用上の注意
・フリーソフトは、無料だけあって、多少の不具合やバグが見られる場合があります。
・フリーソフトとは別に、シェアウェア(shareware)という有料なソフトもありますのでご
注意ください。
・フリーソフトには、ソフトにより利用規定がありますので、それぞれの利用規定を遵
守.して、自己責任のもとでご利用ください。
Web 基礎- 34
’02 コンピュータ初級 C,D
3.HTML 基本構文
Web 基礎- 35
Web ページを作ろう!!
’02 コンピュータ初級 C,D
3.HTML 基本構文
１.
Web ページを作ろう!!
LaTeX による文書作成
Tex とは
スタンフォード大学の Knuth 博士によって開発された組版（活字を組んで版を作ること）
用のソフトウェアである TeX は，高機能で高品位なデスクトップパブリッシング用ソフト
として,主に出版業界や教育・研究分野で広く指示されている．
TeX に組み込んで利用される LaTeX の新バージョンである pLaTeX2e は，コンピュータ
のパワーユーザや社会科学・理工系，人文系学生，研究者が論文等を作成するために，
なくてはならないソフトウェアとなっている．
従来，UNIX 上での利用が中心であるが，この授業では，コンピュータ利用経験が浅い利
用者でも容易に利用できる．
Windows 上の pLaTeX2e 環境で（GUI ベース）これを学習する．
以下,文献［１］をもとに（必要個所は引用，コピーで紹介）して説明する．
使い方
1.
ソースファイルの作成
Tex もHTML，すなわちマークアップ言語である．
したがってまずソースファイルを秀丸エディタで作成する．
ファイル拡張子は***.tex とする.
2.
コンパイル
HTML 文書はブラウザで表示することによって成果を得た.
Tex は,”
コンパイル（翻訳）
”処理を実施する．この処理が NG であれば
ソースを修正する．OK であればプレビューを実施する．
コンパイルは GUI-Shell を用いる.
成果物のプレビュー（印刷）は DVIout を用いる.
関連リンク集
1. 山中氏のページ
2. 勇氏のページ
3. 楽譜の作成
TeX サンプル
TeX サンプル
TeX サンプル
4. おもしろ WWW
−TeX 関連−
5. LaTeX 情報
6. Japanese TeX FAQ
Web 基礎- 36
’02 コンピュータ初級 C,D
3.HTML 基本構文
Web ページを作ろう!!
引用文献
【１】乙部巌己，江口庄英著,『 pLaTeX2e for Windows Another Manual』,
(ソフトバンク，1998 年)
【２】藤田眞作著,『 pLaTeX2e 階梯』, (アジソンウェスレイ，1996 年)
【３】藤田眞作著,『続 pLaTeX2e 階梯・縦組編』, (アジソンウェスレイ，1998 年)
【４】藤田眞作著,『 pLaTeX2e 入門・縦横文書術』,
(ピアソン・エデュケーション，2000 年)
【５】「藤田眞作個人ページ」
http://imt.chem.kit.ac.jp/fujita/fujitas/RD/chosho.html
演習１
1. コンパイル、プレビューの練習
o
NT サーバ井川の教材フォルダの Tex-text サブフォルダをMO にコピーせよ
o
Gui-Shell をスタートメニューから起動して，”ファイル”，”開く”で
”ex01.tex”
を選択せよ
o
コンパイルが成功すると（OK)をクリックするかどうかの窓が出るから,OK をクリック
o
コンパイルが成功すると,
リムーバブルディスク上に*.tex ファイル以外に
*.aux（補助ファイル）
,*.dvi（DVI ファイル）
,*.log（ログファイル）
, *.tag,と
４つのファイルができる．
ここで DVI ファイルというデバイス（プリンタやモニタなどの装置）に
依存しない（
DeVice Independent）形式のファイルが出力される．
このファイルをDVIOUT というソフト（のメニュー）を利用して，成果物を
モニタ（プレビュー）やプリンタ（印刷）装置へ出力することができる．
o
スタートメニューからDVIOUT を起動して”ファイル”,”
開く”で
”ex01.dvi”
を選択してプレビューを実施せよ．
o
他のファイルについても上記を実施せよ．
Web 基礎- 37
’02 コンピュータ初級 C,D
3.HTML 基本構文
Web ページを作ろう!!
演習２
2. コンパイル、プレビューの復習
o
NT サーバ井川の教材フォルダの Tex-text サブフォルダをMO にコピーせよ
o
Gui-Shell をスタートメニューから起動して，”ファイル”，”開く”で
”ex01.tex”
を選択せよ
o
コンパイルが成功すると（OK)をクリックするかどうかの窓が出るから,OK をクリック
o
コンパイルが成功すると,
Web 基礎- 38

Download Report