HTML言語とホームページ
井上 仁
ホームページ作成講習会
ホームページ作成講習会
平成１８年１１月１２日・１９日
鳥取大学付属図書館医学部分館
鳥取大学総合メディア基盤センター米子サブセンター
講習会の内容
講習会の内容
z
ホームページの発信と閲覧の仕組み
z
ファイル名とファイル拡張子について
z
メモ帳ソフトを用いたＨＴＭＬファイルの作成
z
フリーソフトの入手とインストール
z
ホームページ作成ソフトを利用して簡単にＨＴＭＬファ
イルを作ってみよう。
z
オリジナルホームページを公開しよう。
z
ブログを体験してみよう。
ホームページが表示される仕組み
ホームページが表示される仕組み
インターネット
Webサーバにホームページデータの要求 ホームページデータを送信Wｅｂサーバ
クライントコンピュータ
Webサーバを指定して データを要求し、受け 取ったデータに基づいて ホームページを表示 ホームページを閲覧するソフト の総称をブラウザ
という ホームページ データ ホームページを作るとは このデータを作ることＷｅｂサーバを運用するには
Ｗｅｂサーバを運用するには
Webサーバの要件
z
ホームページを提供する機能（ソフト）が必要
z
提供するデータ（ホームページデータ）が必要
z
インターネットに接続している
z
インターネット上の住所登録（UＲＬ）が必要
z
基本的に２４時間，３６５日運転
z
厳重なセキュリティー対策が必要
個人でホームページを開設するには
ISPのWebサーバを間借りがするのが一般的
ホームページを提供するまでの流れ
ホームページを提供するまでの流れ
z
ホームページの構想と構成の決定、素材の作成・収集
z
手元のパソコンでホームページのデータを作成
z
手元のパソコンで表示・確認
z
Webサーバにホームページを転送
z
ホームページの公開
ホームページデータって
ホームページデータって
何
何
？
？
タグがホームページの表示形式を決定する
タグがホームページの表示形式を決定する
<>で囲まれた記号をタグと
いいます。
タグがホームページの表
示形式を決定します。
ホームページデータとは、
ホームページの表示内容
と表示方法をタグによって
指定したファイルである。
ＨＴＭＬファイル
<HTML> <HEAD> <TITLE>Sample Homepage</TITLE> </HEAD> <BODY><FONT size="6" color="#ff0000">ホーム ページ講習会</FONT> <P> <IMG SRC=“internet.gif"><BR> <H3>楽しくホームページの作り方を学習し ましょう。</H3> </BODY> </HTML>
ホームページデータを表示するのは
ホームページデータを表示するのは
ブラウザの仕事
ブラウザの仕事
HTMLファイル を送るWｅｂサーバ
クライント
ブラウザは受け取っ
たＨＴＭＬファイル内
のタグを解釈して
ホームページを表示
する
HTMLファイル を要求ホームページを作るということは
HTMLファイルを作るということ！！
ホームページを作るということは
HTMLファイルを作るということ！！
HTML ファイルファイル拡張子
ファイル拡張子
Windowsのファイル名は基本的に×××××．△△△という
ように、ピリオドで区切られた名前が付けられる。
ピリオドから
右側の通常３∼４文字をファイル拡張子という。
ピリオドから左
は作成者が任意の名前を付けることができる。ファイル拡張
子は、どのプログラムで作られたのか、どのプログラムに関係
付けられているか（当該ファイルをダブルクリックすると起動す
るプログラムはどれか）を示すものである。
XXX.
doc
・・・Word ファイル
XXX.
jtd
・・・一太郎 ファイル
XXX.
ｘls
・・・ Excelファイル
ＸＸＸ.
html
又はＸＸＸ
.htm
・・・ HTMLファイル
ファイル拡張子の表示
ファイル拡張子の表示
表示 タブの「登録されている 拡張子は表示しない」の チェックをはずす。 任意のフォルダーを開いて、 ツール の フォルダオプション を表示する。HTML
HTML
ファイルの構造
ファイルの構造
<HTML>
<HEAD>
ヘッダー部：タイトル等を書く
</HEAD>
<BODY>
ボディー部：背景の指定、本文等を書く
</BODY>
</HTML>
タグは
半角の英文字
、大文字小文字のどちらでもよい
HTMLファイル名の拡張子は
ｈｔｍｌ
又は
ｈｔｍ
HTMLファイル名は英数字半角で日本語（全角文字）は使わない
メモ帳で
メモ帳で
の
の
HTML
HTML
ファイルの
ファイルの
作成
作成
と
と
ファイルを保存する際の注意事項
ファイルを保存する際の注意事項
①名前を付けて保存 ③すべてのファイル ④ファイル名は 半角英数字 拡張子はhtml <HTML> <HEAD> <TITLE>はじめてのホームページ</TITLE> </HEAD> <BODY> ○○○のはじめてのホームページ </BODY> </HTML> C:¥userxx ②保存先フォルダを c:¥userxxにするメモ帳で作成した
メモ帳で作成した
HTML
HTML
ファイルを確認する
ファイルを確認する
保存したファイルをダブルクリックする
タイトルと文字の大きさ
タイトルと文字の大きさ
<TITLE>
<TITLE>
タグと
タグと
<H>
<H>
タグ
タグ
ファイル名：moji.html <H○>と</H○>で囲まれた文字の大きさを指定します。 ○は１∼６が指定でき、１が最大で６が最小です。 <TITLE>と</TITLE>で 囲まれた文字は ここに表示される改行
改行
<BR>
<BR>
、段落
、段落
<P>
<P>
、水平罫線
、水平罫線
<HR>
<HR>
ファイル名：kaigyou.html <BR>：改行します
<P>： １行空けて改行します <HR>：水平罫線を表示します
FONT
FONT
タグによる文字
タグによる文字
サイズと文字色の指定
サイズと文字色の指定
<HTML> <HEAD> <TITLE>FONTの使い方</TITLE> </HEAD> <BODY><FONT SIZE=“7” COLOR=“#FF0000”>赤</FONT><BR> </BODY> </HTML> ファイル名：font.html 文字の色を指定します 赤”#FF0000” 緑”#00FF00” 青“#0000FF” 桃色”#FF00FF” 黄色”#FFFF00” 黒“#000000” 文字の大きさを指定します。 ７∼１まで指定できます。 ７が一番大きく、１が一番小さい ＜FONT・・・・・・＞と＜/FONT>で囲まれた文字の表示形式を指定します
光の３原色と色の１６進表示
光の３原色と色の１６進表示
COLOR=“#ｘｘｘｘｘｘ”
青成分の強度 緑成分の強度 赤成分の強度 赤、緑、青それぞれ００∼ＦＦの ２５６段階の強度が指定できる すなわち、２５６×２５６×２５６＝１６７０万色が指定できるその他の文字修飾
画像の表示
画像の表示
<IMG>
<IMG>
タグ
タグ
ファイル名：gazou.html
他のファイルへのリンク
他のファイルへのリンク
：
：
<A
<A
HREF>
HREF>
タグ
タグ
<HTML> <HEAD><TITLE>リンク</TITLE></HEAD> <BODY> <H3>私はおサルのモンキチです。<BR> 私の顔を見たい人は<A HREF=“face.html">ここ</A> をクリックして下さい。<BR></H3> </BODY> </HTML>
top.html
<HTML> <HEAD><TITLE>顔</TITLE></HEAD> <BODY> <H3>私の顔だよ∼∼∼ん！！</H3><BR> <IMG SRC=“face.jpg”><A HREF=“top.html”><IMG SRC="back.gif"></A> </BODY>
</HTML>
face.html
ここにリンク先 ファイル名を指定
他のコンピュータへのリンク
背景模様の指定
表形式表示
気に入ったホームページを参考にする
サーバーへの
サーバーへの
データ
データ
転送
転送
Webサーバ
HTMLファイルインターネットでホームページを公開する
には、自分のPCで作成したHTMLファイ
ルをWebサーバに転送せねばならない
手元のパソコン
ホームページで提供できるデータ
ホームページで提供できるデータ
z文字情報・・・テキストエディタやホームページ作成ソフトで入力 zボタンやイラスト・・・画像作成・編集ソフトで作成する z画像情報・・・デジカメ等で撮影した画像を用いる z動画情報・・・ビデオカメラ等で撮影したビデオを用いる zアニメーション・・・FlashやGIFアニメを用いる z音声情報・・・コンピュータに録音した音声データを用いる インターネット上に自由に使えるイラスト、ボタンや画像が提供されている フリー素材以外を借用すると著作権違反に問われます 集団で写っている写真を掲載する際には肖像権に留意しましょう フリー素材サイトの一例 http://www.image-seed.com/archives/8977668.html http://isson.fc2web.com/sozai.htmlホームページで表示できる画像形式
ホームページで表示できる画像形式
z
GIF形式画像
256色表示、イラスト、ボタンやロゴ向き
z
JPEG（JPG）形式画像
フルカラー写真画像向き
z
PNG形式画像
フルカラー。JPEGよりも画像劣化が少ないが
ファイルサイズは大きい。
ホームページの機能で今日の講習
ホームページの機能で今日の講習
では説明しないこと
では説明しないこと
• フレーム表示
• 動的ホームページ
• スタイルシート
ホームページ作成用フリーソフト
ホームページ作成用フリーソフト
hpman
hpman
を用いたホームページの作成
を用いたホームページの作成
zフリーソフトとは 無料で使えるソフトです。 zフリーソフトの使用について スパイウエア等の危険が潜んでいることがあります。 動作が不完全や不安定の場合があります。 フリーソフトの使用に際しては使用者の責任で使用して下さい。 zフリーソフトの入手と解凍 インターネットから入手可能です。一般に多くのファイルを一つのファ イルに圧縮して提供されていますので、使用に際しては解凍処理が必 要です。解凍ソフトのダウンロードとインストール
解凍ソフトのダウンロードとインストール
窓の杜（
http://www.forest.impress.co.jp）
を表示
解凍ソフト
解凍ソフト
Lhasa
Lhasa
のダウンロードと
のダウンロードと
インストール
インストール
hpman
hpman
のダウンロードとインストール
のダウンロードとインストール
hpman
hpman
のインストール
のインストール
を にドラッグ＆ドロップすると以下のフォルダ が作成される
HTML
HTML
ファイル用のフォルダを作成
ファイル用のフォルダを作成
Hpman143フォルダを開き ファイル から 新規作成 、 フォルダ を選択 フォルダ名を HTMLに変更 これから作成するＨＴＭＬファイルを保存するフォルダをまず作りましょうHpman
Hpman
の起動
の起動
これを ダブル クリック
プロジェクトファイルの作成
プロジェクトファイルの作成
ホームページは一般 に複数のHTMLファイ ルで構成されます。 Hpmanではこの構成 ファイルの情報を記 録するファイルを指 定する必要がありま す。先に作成した HTML フォルダに Kousyukaiという名前 のプロジェクトファイ ルを作成します。 HTMLを指定 kousyukaiまずこんなホームページを作ってみよう
まずこんなホームページを作ってみよう
top.html（タイトル：トップページ） face.html （タイトル：モンキチです） kazoku.html （タイトル：家族）top.html
top.html
ファイルの新規作成
ファイルの新規作成
ファイル名は半角英数字で指 定。今回はtop.htmlとする。 OKをクリックすれば これが表示される WYSIWYG を選択 ページのタイトルを指定 今回は トップページ とする ① ① ①③ ① ② ④ ⑤ボタンの機能
ボタンの機能
処理を取り消す
間違えたらこのボタンを押す
文字の入力：大きさと色の指定
face.html
face.html
ファイルの新規作成
ファイルの新規作成
ファイル名は半角英数字で指 定。face.htmlとする。 OKをクリックすれば これが表示される WYSIWYG を選択 ページのタイトルを指定 今回は モンキチです とする ① ① ①③ ① ② ④ ⑤画像の挿入
kazoku.html
kazoku.html
ファイルの新規作成
ファイルの新規作成
ファイル名は半角英数字で指 定。kazoku.htmlとする。 OKをクリックすれば これが表示される WYSIWYG を選択 ページのタイトルを指定 今回は 家族 とする ① ① ①③ ① ② ④ ⑤表の挿入
リンクの設定：リンク先を指定する
リンクの設定：リンク先を指定する
_blank:新しいウインドウにリンク先を表示 _self：自分のウインドウにリンク先を表示 ② ③ ⑥タグはどうなっているんだろう？
Web
Web
サーバへのファイル転送の準備
サーバへのファイル転送の準備
10.15.162.239 指定された ユーザー名 とパスワード を設定 任意な文字：今回はabcと入力 半角で10.15.162.239Web
Web
Web
サーバへ転送したホームページを見てみよう
サーバへ転送したホームページを見てみよう
http://10.15.162.239/∼xｘｘ/top.html
ページ背景の設定
ページ背景の設定
背景に画像を使う場合は ここで設定
