Download presentation
Presentation is loading. Please wait.
1
下左近研究室 ゼミ資料 ホームページの作り方（基礎編）
下左近研究室 ゼミ資料 ホームページの作り方（基礎編） ７０２－２５４ 竹下 拓郎
2
『html』とは 『html』というのは、簡単にいうと『ホームページ』を作ることの出来る言語。 ホームページだけを見るとまるでカラーのワープロ文章のように表示されていますが、実際 は『html』で指定するコード（タグと呼ばれている）に従って表示されているの です。 『言語』というと、いかにも難しそうに聞こえますが、仕組と簡単なルールさえ分かれば 簡単なホームページが、すぐにでも出来ます。 とはいえ、『html』だけが分かれば、良いというわけでは無く、他にも知っておかなければ ならない事もあります。
3
『html』の作成に使うもの Windowsを利用している人は、『メモ帳』 （場所はスタートメニューから『プログラム』≫『アクセサリ』≫『メモ帳』と選択していけばいいです） Macintoshを利用している人は、『Simple Text』 このほかにも『一太郎』や『word』等でも構いませんが、単に文字を入力する だけなので、『メモ帳』での作成をお勧めします。 また、今上げた他に『htmlエディタ』といって簡単に『html』を作るソフトがあります。
4
『ブラウザ』について 『ブラウザ』というのは、インターネットを利用するために、必要なソフトの 事です。代表的なのは下記の３つです。
Netscape Navigator（ネットスケープ ナビゲーター） Netscape Communicator（ネットスケープ コミュニケーター ） Internet Explorer（インターネット エクスプローラ ）
5
タグについて 画面に『このように表示しなさい』と指定する コード（パソコンに分かる言葉のようなもの）のことをタグと言います。
１．タグはすべて半角の英数字で入力する（重要） 全角で入力したものは、コンピュータが文字として判断するので、命令が実行されない ２．タグは基本的には、２つ１組で使う。（重要） 表示の指定する範囲が「どこから、どこまで」かをコンピュータに、分かってもらう ために『開始タグ』と『終了タグ』がセットになっている。 が、範囲等が関係ないものなどで単独で使うものもある。 ３．ファイル名は、半角の大文字か小文字のどちらかに統一する。 ファイル名は日本語にしないようにする。
6
『拡張子を表示しよう』 Windowsには、『拡張子を表示しない』という設定があります。もし、ここにチェックがついたままになっていると、 メモ帳ではhtmlの保存が出来ないので、チェックを外します。 １．マイコンピュータをダブルクリックします。 ２．『表示』から『フォルダオプション』を選択する。 ３．『登録されている拡張子は表示しない』にチェックがついている場合は、チェックを外し、『適用』ボタンをクリックします。 出来たら、この画面は閉じます。
7
『html』構造 １．『html』の指定をする。<html>～</html>
この中がWEB上に表示される。 ２．タイトルをつける。<head><title>～</title></head> タイトルとして表示される部分。 ３．本文の指定をする。<body>～</body> 本文の内容。 基本的なのはこの3つです。これだけ分かれば、ただの文章だけなら、ホームページが 出来ます。
8
『html』の保存方法 Windows版の保存方法 Macintosh版の保存方法 ２．『ファイル名』を入力する。
１．それぞれの利用したワープロ等の保存選択する。 ２．『ファイル名』を入力する。 ３．『ファイル名』の後ろに『拡張子.htmlまたは.htm』をつける。 ファイル名がindexなら、保存名は『index.html』となります Macintosh版の保存方法 ３．『ファイル名』の後ろに『拡張子.htmlまたは.htm』をつける。 ファイル名がindexなら、保存名は『index.html』となります。（Windowsと同じ）
9
『ブラウザ』に表示してみよう Windows版のブラウザでの表示方法 Macintosh版のブラウザでの表示方法
１．『ブラウザ』起動する。（インターネットには接続しなくていいです） ２．『ファイルを開く／ファイルの参照』または、それと同等の機能を探し、自分で作ったHTMLのファイルを開く。 ３．表示出来たものを見る。 Macintosh版のブラウザでの表示方法
10
『改行』をするには？ 今までタグは、２つ１組とお話してきましたが、『改行』のように範囲を指定しないタグは単独で利用します。
改行タグ<br>
11
文字サイズをかえたい part１ <font size=数字>~</font>
『文字のサイズ』を変更するためには、『フォントサイズ指定タグ』を使用します。文字のサイズを変更したい部分を『フォントサイズ指定タグ』で囲うだけでいい。 フォントサイズ指定タグ <font size=数字>~</font> 数字が大きいほどフォントサイズが大きくなっていきます。
12
『文字を飾る』 斜体<i>~</i> 太字<b>~</b>
下線<u>~</u> 強調 強調文字（斜体）<em>~</em> 強調文字（太字）<strong>~</strong>
13
『文字に色をつける』 フォントカラー指定タグ <font color=#RGBカラー>~</font>
RGBカラーとは？簡単にいうと、コンピュータが色を判断するための『色番号』の様なもの。 ホームページに色を付けるために使用されるRGBカラーは、6桁の英数字で、最初の２桁 が『R／赤』、次の ２桁 が『G／緑』、最後の２桁 が『B／青』を表わしています。各２桁の数値をかえることで様々な色を作ることが出来ます。 『RGBパレット』へのリンク
14
『背景色と見出しを付ける』 背景色指定タグ <body bgcolor=#RGBカラー >～</body>
見出しタグ <h数字>~</h数字> １．数字はフォントのサイズを指定するもので１～６までが利用出来ます。見出しのタグ<h数字>は数字が小さいほど字が大きくなる。 ２．見出しのタグを利用すると改行タグ<br>を使わなくても自動的に改行される。 ３．表示されるフォントの書体が違う。
15
『センタリングをする 』 センタリングのタグ <center>テキスト／写真等</center>
これはワープロの機能でいう『センタリング』『中央寄せ』というものです。
16
『罫線を引いてみる 』 罫線の基本タグ<hr> １．太さを変える。 <hr size=数字>
２．幅を変える。 <hr width=数字%> 基本は画面一杯に線が引けるのですが、width=数字%を設定することで画面に対して数字%の線が引けるようになります。 ３．幅を変える。その２<hr width=数字> 画面に対して何%という引き方ではなく、直接数字（単位：ピクセル）を入れて長さを指定できます。 ４．黒い線を引く。 <hr noshade> 基本の罫線は、透明でくぼんで見える（エンボス調）線ですが、hrの後に半角のスペース noshadeと入力することで、黒い線になります。 ５．右寄せ <hr width=数字% align=right> ６．左寄せ <hr width=数字% align=left>
17
『絵／写真を貼ってみる』 イメージ貼り付けのタグ<img src="ファイル名">
タグの前後に<center>～</center>を指定すると、イメージを中央に表示出来ます。 ◇ 注意 ◇ 上記の様に<img src="ファイル名">と記述できるのは、 表示する画像ファイルが、htmlと同じフォルダの中にあるときだけで、 違うフォルダにある場合は、"ファイル名"のところの記述が変わってきます。 img src=の後のファイル名というのは、もちろん、絵や写真のファイルのことです。 拡張子は「gif（ジフ）」 「jpg,jpeg（ジェーペグ）」「png（ピング）」というものも う。
18
『リンクする』 テキスト、リンクの色を指定するタグ <body ①～④>～</body>
①text=#rgbカラー････テキストの文字の色 ②link=#rgbカラー････リンクする部分の色 ③vlink=#rgbカラー････リンクした後の色 ④alink=#rgbカラー････リンクする瞬間の色
19
リンクするためのタグ リンクするためのタグ 【文字をリンクさせる場合】 <a href="ファイル名またはアドレス（URL）">文字列</a> 【画像をボタンとして使う場合】 <a href="ファイル名またはアドレス（URL）"><img src="画像ファイル"></a> <a href="ファイル名またはアドレス（URL）"><img src="画像ファイル" border="数値" ></a>
20
これで終わります ご静聴ありがとうございました。
Similar presentations
