ＨＴＭＬで表現できること ホームページ基本 リンク指定 と リンク状態表示 文字 ・ 色 の表示 テーブル・フレーム・フォーム ホームページを作っているプログラムの基本構成 ■ＨＴＭＬ文を見る・作る ： ホームページを表示するプログラムであるＨＴＭＬ文は ブラウザ（ホーム ページを見るもの）でも ソース表示機能を使うことにより見られます。 また、 テキストエディタ・ワード・ホームページソフトなどを使用すれば、 その ＨＴＭＬ文を修正したり、作成して行くことができます。 ■ＨＴＭＬの言語構造 ： ＜＞〜＜／＞で囲む言語 このタグによって 各種操作を指定出来ます。 タグは 基本的には 開始タグと終了タグのペアで使用されます。 ただ、 段落・改行を指示する ＜Ｐ＞＜ＢＲ＞タグでは 終了タグは不要です。 ＨＴＭＯは非常に分かり易い言語で ＨＴＭＬの意味するところは 辞典を使用 すると分ります。 ■ＨＴＭＬ文の基本構成： ＜ＨＴＭＬ＞ ・・・ここからＨＴＭＬでの記述がはじまる。 ＜ＨＥＡＤ＞ ・・・ 〃 ヘッダ情報の記述をする ＜ＴＩＴＬＥ＞〜＜／ＴＩＴＬＥ＞ ・・・タイトルの記述をする ＜／ＨＥＡＤ＞ ・・・ヘッダ終了 ＜ＢＯＤＹ＞ 〜 ・・・ここから プログラムの本文はじまる ＜／ＢＯＤＹ＞ ・・・ここで 〃 〃 終了 ＜／ＨＴＭＬ＞ ・・・ここで ＨＴＭＬ終了 ■ヘッダーにＨＰ管理情報： ホームページの内容、使用文字のコード種類、ページタイトルほかＨＰの 管理情報を記述します。 ＭＥＴＡ・ＢＡＳＥ・ＴＩＴＬＥ・ＳＴＹＬＥなどで記述。 ＭＥＴＡ ・・・・・ ページの様々の情報を記述・文字化けなく・検索を可能にしておける。 ＢＡＳＥ ・・・・・ リンク先などをしていするときなどに 基準ＵＲＬを指定しておく ＴＩＴＬＥ ・・・・・ ヘッダーへの唯一の必須入力情報 ・ タイトルバーに表示されるもの ＳＴＹＬＥ・・・・・ 参照先にファイルの情報等を記入する ホームページの 文字 ・ 色 の指定 ■文字に設定できる書式 ： 文字サイズ（７段階） ・ 色（１６７０万色） ・ 形状（太字他） ・ 書体（明朝体他） ■画面表示の解像度 ： パソコン画面の解像度に２種類あり、それぞれで指定文字の大きさは異る。 １０×１０ピクセルの文字は （１０２４×７６８ピクセル）画面よりも （６４０×４８０ピクセル）画面の方が表示が大 ■Ｓｈｉｆｔ-ＪＩＳが一般 ： Ｓｈｉｆｔ-ＪＩＳはＷｉｎｄｏｗｓ・Ｍａｃの通常の文書で使用 ・ Ｕｎｉｘ系はＥＵＣ-ＪＰ ＪＩＳ（ＩＳＯ-２０２２-ｊＰ）は電子メールやネットニュースでの送信に使用 ■ＭＥＴＡ情報への記述 ： 文字コード情報をＭＥＴＡ情報に記述しておくと ブラウザがその情報を読取り 正しい文字コードを選択するので 文字化けを防ぐことが出来る。 ■色の指定方法 ： 色の名前を指定する・ＲＧＢ（赤・緑・青：夫々２５６色づつある）で指定する 色の名前は１６蝕･････navy blue ・ lime green ・ aqua(水色） ・ maroon(栗色） ・ purpul(紫) 他 ＲＧＢ各256色組合････Ｒｅｄ・Ｇｒｅｅｎ・Ｂｒｕｅ三色を それぞれ2桁の数字で示す ・ 最初に＃を付ける ■ハード・ソフトによる影響 ： ブラウザによる影響・・・残念ながら ブラウザの種類・バージョンによって 指定色とは異なってしまう パソコンによる影響・・・ＨＴＭＬでは基本的には １６００万色 ・ ＰＣは可能であっても 制限している リンクの指定方法 と リンク状態の表示 ■リンク先には２種類ある ： ページとページのリンク・・・文字や画像をクリックすると 異なるページを表示する 特定の位置へリンク・・・・・ 同様に クリックすると ページの頭ではなく 指定の位置を表示する これをラベル機能と呼びます ■リンク状態を 色分けできる ： リンクへ クリックする文字・・・リンクが設定されているもの・・・クリック前の状態 クリックし検索中状態 既にクリックされているもの 〃 されていないもの 〃 画像・・・上記同様に 識別設定できる ■絵図の部分によい リンク先を変える ： （クリッカブルマップ ・ イメージマップ と呼ぶ） リンクの受付位置の設定・・・画像ファイル上に 円、四角形、多角形などでクリック領域を設定 設定する画像にマップ名を付け 左上を原点にしてピクセル座標で 画像の中を多数の領域に分け 複数のリンク先を指定できる サーバー側でも 動作可能・・サーバーサイド・クリッカブルマップ （ＮＣＳＡ形式・ＣＥＲＮ形式） リンク先に於いて 高度な作業を 行うときなどに使用 ＣＧＩなどのプログラムを使用する クライアントサイド・クリッカブルマップ （ＣＳＩＭ形式） ＨＴＭＬ記述で処理できる ・ リンク先表示などの処理 テーブル・フレーム・フォームの仕組み ■テーブルを使って綺麗にレイアウト ： テーブルとは ・・・・・・・・・・・・表として見せるだけでなく レイアウト枠としての利用も増えている 線を表示せずに 文字を奇麗に揃えるためにも利用できる 文頭を揃えての箇条書き・・・各行文字入力において 表の1列目を空白にして ２列目から入力 各行、文頭が２列目左端に揃い 見やすくなる 文字列や画像を並べる ・・・・ＨＴＭＬの表は ワープロなどの表とは異なり 何行何列の指定が要 各セルについて サイズを設定し 文字・画像などをはめ込む ■フレームはＷｉｎｄｏｗを分割する ： フレームとは・・・・・・・・・・・・・一つのページを複数のページに分割して表示するようなもの リンク先をフレームに・・・・・・・Ｗｉｎｄｏｗ内に分割されている各フレームに名前を付け リンク先をフレームに 目次ページを残し フレーム内情報を 相互表示すると見やすくできる ■フォームを使用してインタラクティブに ： フォームで情報やりとり・・・・・掲示板・チャット・アンケート収集などのページによく 使われる ただし、ＨＴＭＬフォームでできるのは 入力枠をつくり 入力してもらうまで その先のデータ送信は ＣＧＩプログラムまたは Ｅメールによって行う １行テキスト領域・・・・・・・・・・改行不可 ・ アンケートなどの 名前欄・メールアドレス欄などに使用する 複数行テキスト領域・・・・・・・ 改行可能 ・ アンケートなどのご意見欄・ご質問欄などに使います ラジオボタン・・・・・・・・・・・・・ 多数項目から １項目を選ぶ ・ 性別で男性・女性を選択入力するときなど チェックボックス・・・・・・・・・・・複数項目で複数選択をする ・ 興味のある項目を選択するときなど リスト（コンボ）ボックス・・・・・・チェックボックスと同様な選択 ・ 項目が固定でなく変化するときに使用 プルダウンメニュー・・・・・・・・・リストボックスで１項目選択 ・ アンケートでの年齢入力などで使えます プッシュボタン・・・・・・・・・・・・ フォームに入力されたデータの処理をする ・ 「送信」・「書直し」など |