下左近研究室 ゼミ資料 ホームページの作り方（基礎編） ７０２－２５４ 竹下 拓郎 『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のファイルを開く。 – ３．表示出来たものを見る。 『改行』をするには？ • 今までタグは、２つ１組とお話してきました が、『改行』のように範囲を指定しないタグ は単独で利用します。 • 改行タグ<br> 文字サイズをかえたい part １ • 『文字のサイズ』を変更するためには、『フォント サイズ指定タグ』を使用します。文字のサイズを 変更したい部分を『フォントサイズ指定タグ』で囲 うだけでいい。 • フォントサイズ指定タグ <font size=数字>~</font> 数字が大きいほどフォントサイズが大きくなっ ていきます。 『文字を飾る』 • 斜体<i>~</i> • 太字<b>~</b> • 下線<u>~</u> • 強調 強調文字（斜体）<em>~</em> 強調文字（太字）<strong>~</strong> 『文字に色をつける』 • フォントカラー指定タグ <font color=#RGBカラー>~</font> • RGBカラーとは？簡単にいうと、コンピュータが色を判断するための 『色番号』の様なもの。 ホームページに色を付けるために使用されるRGBカラーは、6桁の 英数字で、最初の２桁 が『R／赤』、次の ２桁 が『G／緑』、最後の ２桁 が『B／青』を表わしています。各２桁の数値をかえることで 様々な色を作ることが出来ます。 • 『RGBパレット』へのリンク http://www.tamano.or.jp/takara/takarahtml/rgb.h tm 『背景色と見出しを付ける』 • 背景色指定タグ <body bgcolor=#RGBカラー >～</body> 色は文字の時と同様で『RGBパレット』を参考にする。 • 見出しタグ <h数字>~</h数字> １．数字はフォントのサイズを指定するもので１～６までが利用出来ま す。見出しのタグ<h数字>は数字が小さいほど字が大きくなる。 ２．見出しのタグを利用すると改行タグ<br>を使わなくても自動的に改 行される。 ３．表示されるフォントの書体が違う。 『センタリングをする 』 • センタリングのタグ <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> これで終わります ご静聴ありがとうございました。
© Copyright 2024 ExpyDoc
