下左近研究室　ゼミ資料ホームページの作り方（基礎編）

下左近研究室　ゼミ資料ホームページの作り方（基礎編）下左近研究室　ゼミ資料ホームページの作り方（基礎編）７０２－２５４　竹下　拓郎

『html』とは • 『html』というのは、簡単にいうと『ホームページ』を作ることの出来る言語。ホームページだけを見るとまるでカラーのワープロ文章のように表示されていますが、実際は『html』で指定するコード（タグと呼ばれている）に従って表示されているのです。『言語』というと、いかにも難しそうに聞こえますが、仕組と簡単なルールさえ分かれば簡単なホームページが、すぐにでも出来ます。とはいえ、『html』だけが分かれば、良いというわけでは無く、他にも知っておかなければならない事もあります。

『html』の作成に使うもの　 • Windowsを利用している人は、『メモ帳』（場所はスタートメニューから『プログラム』≫『アクセサリ』≫『メモ帳』と選択していけばいいです） • Macintoshを利用している人は、『Simple Text』 • このほかにも『一太郎』や『word』等でも構いませんが、単に文字を入力するだけなので、『メモ帳』での作成をお勧めします。また、今上げた他に『htmlエディタ』といって簡単に『html』を作るソフトがあります。

『ブラウザ』について • 『ブラウザ』というのは、インターネットを利用するために、必要なソフトの事です。代表的なのは下記の３つです。 • Netscape Navigator（ネットスケープ　ナビゲーター） • Netscape Communicator（ネットスケープ　コミュニケーター　） • Internet Explorer（インターネット　エクスプローラ）

タグについて • 画面に『このように表示しなさい』と指定するコード（パソコンに分かる言葉のようなもの）のことをタグと言います。１．タグはすべて半角の英数字で入力する（重要） • 全角で入力したものは、コンピュータが文字として判断するので、命令が実行されない２．タグは基本的には、２つ１組で使う。（重要） • 表示の指定する範囲が「どこから、どこまで」かをコンピュータに、分かってもらうために『開始タグ』と『終了タグ』がセットになっている。が、範囲等が関係ないものなどで単独で使うものもある。３．ファイル名は、半角の大文字か小文字のどちらかに統一する。 • ファイル名は日本語にしないようにする。

『拡張子を表示しよう』 • Windowsには、『拡張子を表示しない』という設定があります。もし、ここにチェックがついたままになっていると、メモ帳ではhtmlの保存が出来ないので、チェックを外します。１．マイコンピュータをダブルクリックします。２．『表示』から『フォルダオプション』を選択する。３．『登録されている拡張子は表示しない』にチェックがついている場合は、チェックを外し、『適用』ボタンをクリックします。出来たら、この画面は閉じます。

『html』構造 １．『html』の指定をする。<html>～</html> この中がWEB上に表示される。２．タイトルをつける。<head><title>～</title></head> タイトルとして表示される部分。３．本文の指定をする。<body>～</body> 本文の内容。 • 基本的なのはこの3つです。これだけ分かれば、ただの文章だけなら、ホームページが出来ます。

『html』の保存方法 • Windows版の保存方法 • １．それぞれの利用したワープロ等の保存選択する。 • ２．『ファイル名』を入力する。 • ３．『ファイル名』の後ろに『拡張子.htmlまたは.htm』をつける。ファイル名がindexなら、保存名は『index.html』となります • Macintosh版の保存方法 • １．それぞれの利用したワープロ等の保存選択する。 • ２．『ファイル名』を入力する。 • ３．『ファイル名』の後ろに『拡張子.htmlまたは.htm』をつける。ファイル名がindexなら、保存名は『index.html』となります。（Windowsと同じ）

『ブラウザ』に表示してみよう • Windows版のブラウザでの表示方法 • １．『ブラウザ』起動する。（インターネットには接続しなくていいです） • ２．『ファイルを開く／ファイルの参照』または、それと同等の機能を探し、自分で作ったHTMLのファイルを開く。 • ３．表示出来たものを見る。 • Macintosh版のブラウザでの表示方法 • １．『ブラウザ』起動する。（インターネットには接続しなくていいです） • ２．『ファイルを開く／ファイルの参照』または、それと同等の機能を探し、自分で作ったHTMLのファイルを開く。 • ３．表示出来たものを見る。

『改行』をするには？ • 今までタグは、２つ１組とお話してきましたが、『改行』のように範囲を指定しないタグは単独で利用します。 • 改行タグ

文字サイズをかえたい part１ • 『文字のサイズ』を変更するためには、『フォントサイズ指定タグ』を使用します。文字のサイズを変更したい部分を『フォントサイズ指定タグ』で囲うだけでいい。 • フォントサイズ指定タグ ~ 数字が大きいほどフォントサイズが大きくなっていきます。

『文字を飾る』 • 斜体~ • 太字~ • 下線~ • 強調強調文字（斜体）~ 強調文字（太字）~

『文字に色をつける』 • フォントカラー指定タグ ~ • RGBカラーとは？簡単にいうと、コンピュータが色を判断するための『色番号』の様なもの。ホームページに色を付けるために使用されるRGBカラーは、6桁の英数字で、最初の２桁が『R／赤』、次の　２桁が『G／緑』、最後の２桁が『B／青』を表わしています。各２桁の数値をかえることで様々な色を作ることが出来ます。 • 『RGBパレット』へのリンク http://www.tamano.or.jp/takara/takarahtml/rgb.htm

『背景色と見出しを付ける』 • 背景色指定タグ <body bgcolor=#RGBカラー >～</body> 色は文字の時と同様で『RGBパレット』を参考にする。 • 見出しタグ <h数字>~</h数字> １．数字はフォントのサイズを指定するもので１～６までが利用出来ます。見出しのタグ<h数字>は数字が小さいほど字が大きくなる。２．見出しのタグを利用すると改行タグ を使わなくても自動的に改行される。３．表示されるフォントの書体が違う。

『センタリングをする』 • センタリングのタグ<center>テキスト／写真等</center> 　　これはワープロの機能でいう『センタリング』『中央寄せ』というものです。

『罫線を引いてみる』 • 罫線の基本タグ<hr> １．太さを変える。　　<hr size=数字> ２．幅を変える。　　　<hr width=数字%> 　　基本は画面一杯に線が引けるのですが、width=数字%を設定することで画面に対して数字%の線が引けるようになります。３．幅を変える。その２<hr width=数字> 　　画面に対して何%という引き方ではなく、直接数字（単位：ピクセル）を入れて長さを指定できます。４．黒い線を引く。　　<hr noshade> 　　基本の罫線は、透明でくぼんで見える（エンボス調）線ですが、hrの後に半角のスペース noshadeと入力することで、黒い線になります。５．右寄せ　　<hr width=数字% align=right> ６．左寄せ　　<hr width=数字% align=left>

『絵／写真を貼ってみる』 • イメージ貼り付けのタグ<img src="ファイル名"> タグの前後に<center>～</center>を指定すると、イメージを中央に表示出来ます。◇　注意　◇ • 上記の様に<img src="ファイル名">と記述できるのは、表示する画像ファイルが、htmlと同じフォルダの中にあるときだけで、違うフォルダにある場合は、"ファイル名"のところの記述が変わってきます。 • img src=の後のファイル名というのは、もちろん、絵や写真のファイルのことです。拡張子は「gif（ジフ）」「jpg,jpeg（ジェーペグ）」「png（ピング）」というものもう。

『リンクする』 • テキスト、リンクの色を指定するタグ<body ①～④>～</body> ①text=#rgbカラー････テキストの文字の色 ②link=#rgbカラー････リンクする部分の色 ③vlink=#rgbカラー････リンクした後の色　　 ④alink=#rgbカラー････リンクする瞬間の色

リンクするためのタグ • リンクするためのタグ【文字をリンクさせる場合】<a href="ファイル名またはアドレス（URL）">文字列</a> • 【画像をボタンとして使う場合】<a href="ファイル名またはアドレス（URL）"><img src="画像ファイル"></a><a href="ファイル名またはアドレス（URL）"><img src="画像ファイル" border="数値" ></a>

これで終わります ご静聴ありがとうございました。

下左近研究室　ゼミ資料ホームページの作り方（基礎編）