Microsoft Word - 310HTML_b

Size: px

Start display at page:

Download "Microsoft Word - 310HTML_b"

ゆみかたかひ
5 years ago
Views:

10.1 HTML をテキストエディタで編集する第 10 章 HTML HTML(Hyper Text Mark-up Language) とは Web において構造を記述する言語ですカラフルでさまざまにレイアウトされた Web ページもほとんどこの言語で書かれたテキストでできています HTML は同じ記述でも読み手であるブラウザによって表示が違ったり

1 10.1 HTML をテキストエディタで編集する第 10 章 HTML HTML(Hyper Text Mark-up Language) とは Web において構造を記述する言語ですカラフルでさまざまにレイアウトされた Web ページもほとんどこの言語で書かれたテキストでできています HTML は同じ記述でも読み手であるブラウザによって表示が違ったりあるブラウザでは表示できてもほかのものでは表示できないことがありますそれは例えば AI という表記があった場合エーアイと読むかアイと読むか電子頭脳ととるか読み手によって同じ表記でも読み方が違ったり読めなかったりすることと同じですここでは 2 大ブラウザである Netscape Navigator と Internet Explorer の両方でサポートしている基本的な HTML について解説します 1. はじめにどこでもいいので適当な Web ページへアクセスしてソースの表示 ( マウスを右クリックしてメニューを表示させソースの表示をクリックするかメニューバーの表示ソース ) をしてみましょうすると下の図のようなものが出てきます図 10-1 ページのソースこれが Web ページの正体です <~> </~> で一単位としたものをタグと呼びこれの組み合わせによってページは構成されていますですから <~> </~> の示す役割を知れば HTML が理解できることになります基本的には間に挟んだもの ( 文字や画像 ) に効果を与えますまた </ > で閉じず単独で使用するタグも存在します授業で使用する Macromedia Dreamweaver では WYSIWYG 的に ( 見たままに得られる ) 作成をしながらもタグを意識した編集ができるようになっています Dreamweaver オブジェクトウィンドウの左下編集中の文字などのタグが表示されている図 10-2 ウィンドウの左下 2. テキストエディタを起動拡張子が.html や.htm のファイルを HTML ファイルと呼びこれをブラウザで表示させるといつも見ているようなウェブページとなるのですがこれをテキスト形式で表示させソース編集に入るにはまずテキストエディタを起動しておきますテキストエディタとは主に拡張子が.txt のファイルを起動するものでここでは秀丸を使用します ( 詳しくは 11 章さらに使いこなすためにを参照してください ) もちろんメモ帳でもかまいません起動方法 [ スタート ] [ プログラム ] [Soft] と選択し [Hidemaru] をクリック Campus System Guide

2 10.2 骨格を成すタグ HTML でページを作成するに当たって必ず書かねばならないものやページの付加情報の指定というページの骨格とも言うべきタグがありますここではそれらのタグについて解説します終タグ </~> は / を書き忘れるとそこで閉じずに延々とタグの指定が続くことになりますまた HTML は必ず半角英数で記述します大文字と小文字は区別しないのでタグを大文字で書こうが小文字で書こうがまったく問題ありませんが自分や他人がソースを見たとき一定の統一性があると見やすいことも確かです 1.<HTML>~</HTML> このタグはページが HTML ファイルであるということを表すものですよって基本的にページのソースの一番外側 ( 一番上と一番下 ) に書きますあらゆるタグはこの <HTML>~</HTML> の間に挟まれることによりその効果を発揮します 2.<HEAD>~</HEAD> <HEAD> はページのタイトルや使用している文字コード製作者などのページ自体の情報 ( ヘッダー情報と呼ぶ ) を示すタグですこれ単独では何の意味もなく間に各情報を示すタグを挟むことによりその効果を発揮します <TITLE>~</TITLE> ページのタイトル ( 名前 ) を示します <HEAD>~</HEAD> 内に記述します IE などのブラウザでタイトルバーやタスクバーに表示されますこれを指定しない場合ページの URL などがタイトルとして表示されます 3.<BODY>~</BODY> 図 10-3 ページタイトル実際にブラウザで表示される部分をこのタグの間に挟みますこの <BODY> 自体に指定するオプションが存在しこれによりページの基本色 ( テキストリンククリックした状態のリンク以前に行ったことのあるリンク背景 ) や壁紙となる画像ファイルの指定をしたりします TEXT= 普通の文章の色を指定します LINK= リンクを設定した文章の色を指定します ALINK= リンク部分をクリックしているときの色を指定します VLINK= 既に行ったことのあるページに設定されたリンクの色を指定します BGCOLOR= 背景色を指定します BACKGROUND= 壁紙となる画像ファイルの場所を指定しますの部分にはカラーコード (16 進数の数字 ) やカラーネームを指定しますネームで示すとわかりやすいのですがブラウザによっては表示できないカラーネームもありますからなるべくカラーコードで指示をしましょう [ 例 ] カラーネーム ( カラーコード ) 色 BLACK(#000000) 黒 BLUE(#0000FF) 青 GREEN(#007F00) 緑 PURPULE(#7F007F) 紫 RED(#FF0000) 赤 WHITE(#FFFFFF) 白カラーコードは 00~FF までの 16 進数で RGB( 赤緑青 ) の色の出力具合をそれぞれ指定したものですこれらは光の三原色ですつまりすべての色を最大出力 FF にすれば真っ白になります (#FFFFFF) Campus System Guide 2014

第 10 章 HTML LINK( リンクの色 ) と VLINK( 一度行ったリンク ) の色をまったく違う系統のものに指定すると見ている側はどっちがどっちだかわからなくなってしまいますですから同系色にして VLINK のほうは LINK を暗めにしたような感じの色にするとわかりやすいでしょう BGCOLOR は画面の背景となる色です

3 第 10 章 HTML LINK( リンクの色 ) と VLINK( 一度行ったリンク ) の色をまったく違う系統のものに指定すると見ている側はどっちがどっちだかわからなくなってしまいますですから同系色にして VLINK のほうは LINK を暗めにしたような感じの色にするとわかりやすいでしょう BGCOLOR は画面の背景となる色ですここにあまり派手な色を指定すると読む側は目が疲れてしまいます意図として派手目を指定する場合を除きテキストの色との兼ね合いも考え見やすい色 ( パステルカラーと呼ばれる薄めの色を指定するとうまくいきます ) を指定するようにしましょう BACKGROUND とは画像を背景として貼り込むためのオプションで画像ファイルのある場所を相対パスないし絶対パスで指定します ( ページ下参照 ) 画像のサイズが見る側のウィンドウサイズより小さくても縦横に繰り返し表示され一面に敷き詰められます画像はテキストよりも多くの容量をとるのであまり大きな画像ファイルを指定したりすると結果としてページが重くなり見る側の負担となってしまいますので注意が必要ですまた画像をこれで指定すると BGCOLOR で指定した背景色の上に画像が表示されますこの場合背景色の指定は無駄なように思われますしかし画像が読み込まれるまでは背景色が表示されテキストの色の指定によってはそれまで文章が読めない事もありますし画像ファイルが読み込めないといった状況も起こりえますまた背景に透過 GIF 画像を使うといったこともできるため BACKGROUND を指定していても BGCOLOR の指定はすることにします 4. 実際にどう書くか実際に右の図のように入力してみましょう保存するときは拡張子を.html にするのを忘れないようにして下さい ( 詳しくは 11 章の秀丸の項を参照) カラーコードなどを書き換えていろいろ実験してみましょう図 10-4 ページ作成の例絶対パスと相対パスファイルの場所の指定として絶対パスと相対パスがあります絶対パスとは住所で言えば日本国神奈川県都築区牛久保西というようにどこからでも唯一の場所指定を指しますですからネット上ではのように場所を指定する方法です対する相対パスですがこれは相対的なパスつまりそのファイルを指定するファイル自身から見た別のファイルの位置の指定方法ですですから住所で言えばお隣のさんや隣町の八百屋さんといったような他の場所へ行けば違うものを指すことになってしまうような指定方法でローカル上でリンクチェックをするときに便利です相対パスの書き方として以下のような方法があります 1 基準となる HTML ファイルの置かれている階層と同じ階層にあるファイルを指定するには単にファイル名のみを書く [ 例 ] onaji.html 2 基準となる HTML ファイルより下層ディレクトリにあるファイルを指定するには./ 下層ディレクトリ名 / ファイル名. 拡張子 [ 例 ]./down/shita.html 基準 3 基準となる HTML ファイルの置かれている階層と同じ階層にあるファイルを指定するには../ ファイル名. 拡張子 [ 例 ]../ue.html../ が一つ上のディレクトリを表します ( ここでは up) 図 10-5 ディレクトリ構造 Campus System Guide

10.3 テキスト装飾段落指定普通のテキストはただの文字の列 HTML ではその文字列に変化を加えることが出来ます例えば文字のサイズを大きくする小さくする色をつけるイタリック体 ( 斜め文字 ) や太字にするといったことが出来ます他にもいろいろなタグがありますが順次見ていくことにしましょう 1.

4 10.3 テキスト装飾段落指定普通のテキストはただの文字の列 HTML ではその文字列に変化を加えることが出来ます例えば文字のサイズを大きくする小さくする色をつけるイタリック体 ( 斜め文字 ) や太字にするといったことが出来ます他にもいろいろなタグがありますが順次見ていくことにしましょう 1. フォントタグ <FONT> タグは間に挟んだ文字列に効果を与えるタグです最初の <FONT> の中にそれぞれの指定が入ります <FONT SIZE= >~</FONT> 文字のサイズ指定ですサイズは全部で 7 段階ありそれの指定方法は 2 通り 1~7 までの数字を指定するか BASEFONT を指定していない場合 3 を基準と見た場合にそれより何段階大きい小さいと言うことを + や - で指定するかですただし大きく指定する場合はいいとして小さい文字を指定する場合は見る側の環境によっては文字がつぶれ読み取ることが出来ない可能性があることに注意しましょうなお相対指定する場合 <BASEFONT SIZE= > というタグを <HEAD>~</HEAD> の中に指定しておくことによりもととなるサイズを指定することも出来ますこの場合でサイズ 7 を標準とした場合相対指定は -1 から -6 ということになりサイズ 5 を標準とした場合であれば +2~-4 という範囲となります相対指定は +2 等という指定を ( ダブルクォーテーション ) で囲うと 2 として読み取るブラウザもありますので囲まないようにしてくださいこのような相対指定ですがわけがわからなければ普通に数字で指定し相対指定を使わなくとも差し支えありません図 10-6 フォントの大きさ <FONT COLOR= >~</FONT> 間に挟んだ文字の色を指定します色の指定には背景と同じくカラーコードやカラーネームを使います [ 例 ]<FONT COLOR= #FF0000 > 赤色 </FONT> <FONT COLOR= RED > 赤色 </FONT> <FONT COLOR= #0000FF > 青色 </FONT> <FONT COLOR= BLUE > 青色 </FONT> <FONT COLOR= # > 緑色 </FONT> <FONT COLOR= GREEN > 緑色 </FONT> 2. 段落区切りの指定題名の通り段落や区切りの指定です <P>~</P> パラグラフ段落の指定ですこのタグで囲まれた部分は一つの段落として認識され後が一行空きの状態となります本来は段落を指定するタグですが一行空きの特性を利用し空欄を空けるためにも使われたりします Campus System Guide 2014

5 <BR> 第 10 章 HTML ソースで文章に改行を入れていたとしても実際にブラウザに表示する場合その改行は無視 ( ブラウザによっては半角のスペースとして認識 ) されますブラウズした時に文章に改行を入れたい場合はこのタグを使います </~> で閉じることなく単独で使用し指定した位置に改行が入ります <P> タグも改行が入りますが <BR> タグの場合は空き行が入らず即座に次の行がきます <HR> これはページに区切り線を入れるタグです区切り線と同じ行にテキストは入らず前後に改行が入りますこのタグは単独で使用しオプションもありますあくまでオプションで無理に指定する必要はありません SIZE ~ 線の太さを指定ピクセル数で指定します指定しない場合 2 として認識されます WIDTH ~ 線の横の長さを指定ピクセル数かウィンドウサイズに対するパーセンテージで指定します ALIGN= ~ 線の位置を指定します左よりなら LEFT 右なら RIGHT 中央なら CENTER です NOSHADE これを書き込むと影無しの単なる線となります [ 例 ]<HR SIZE= 5 WIDTH= 80% ALIGN= RIGHT NOSHADE> 太さ5ピクセルウィンドウに対して80% の長さ右寄せ影なしの仕切り線 <CENTER>~</CENTER> 普通の文章や画像は左よりですがこのタグで囲った部分は中央寄せになります <DIV ALIGN= >~</DIV> <P ALIGN= >~</P> <CENTER> タグのように文章や画像の位置を指定しますの部分に LEFT CENTER RIGHT と書くことにより間に挟んだ文字列をそれぞれ左中央右に指定します DIV と P の違いは前後に空き行が入るのが P で入らないのが DIV であるということです 3. 文字列の形状指定文字列の見た目を変化させるタグです次のような種類があります <B>~</B> 間に挟んだ文字列を太字にします <I>~</I> 間に挟んだ文字列をイタリック体にします <S>~</S> 間に挟んだ文字列に抹消線をかけます <U>~</U> 間に挟んだ文字列に下線をつけます <SUP>~</SUP> 間に挟んだ文字列を上付添付にします <SUB>~</SUB> 間に挟んだ文字列を下付添付にします図 10-7 文字列の物理的形状 Campus System Guide

6 10.4 ハイパーリンク HTML において最大の特徴といわれるものがハイパーリンクですリンクとは別のファイルを呼び出す指定でこれの連結により Web 上ではいろいろなところへ簡単に移動することができるのです呼び出すファイルは基本的には HTML ファイルですが画像ファイルや音声ファイルも指定することでリンクをかけることができます 1. ハイパーリンクの指定ネット上を周っていて部分的に色が変わってアンダーラインの引いてある文章に出会いますこの文字の部分にマウスのポインタを合わせクリックするとそこで指定されているページにジャンプしますこれの指定方法は <A HREF= >~</A> というようなタグで文章を囲いますすると間に挟んだ文章にリンクがかかりますの部分にはリンクをかけたい URL ファイルを絶対パスないし相対パスで指定します [ 例 ]<A HREF= > 東京都市大学環境情報学部のページ </A> 2. ターゲットリンク基本的には上記だけでも良いのですが時折リンクの部分をクリックすると新たにウィンドウが開きそこに指定したファイルが開くようなものを見かけますこれはターゲットというものを上記タグに記述することで実現します <A HREF= TARGET= _BLANK >~</A> 新たにブラウザウィンドウを開きそこに指定したファイルを開きます 3. メールアドレスの指定リンクはリンクでもメールアドレスのようなものにかかっていてクリックするとメーラーが起動するようなリンクもありますこれの記述方法です <A HREF= mailto: メールアドレス >~</A> mail と to の間は離す必要はありません続けて : と送り先のメールアドレスを書きますこうするとメーラーのあて先に指定したアドレスを入れた状態で立ち上げることができるようになります [ 例 ] メールは <A HREF= mailto:g1131xxx@tcu.ac.jp > こちら </A> 4. アンカーリンク普通リンクを貼っただけでは指定したファイルの冒頭部分にしかリンクさせることが出来ませんが縦に長いページなどで文章の途中にリンクをかけたい場合もありますそういうときは最初にリンク先の文章で任意の場所にアンカーと呼ばれるタグを書いておきますそして今までのようにリンクタグを書くときに少し記述を加えます <A NAME= 任意のキーワード ></A> これがアンカータグです任意にリンクをかけたい文章の部分にこう書いておきます <A HREF= # キーワード >~</A> その後リンクタグの中でファイル名 # キーワードと記述すると指定した部分にリンクをかけることが出来ますリンクタグとアンカータグが同じファイルにある場合単に # キーワードでかまいません [ 例 ]<A NAME= test ></A> 任意の場所アンカータグのキーワードに # は必要ありません <A HREF= document.html#test > アンカーリンク </A> Campus System Guide 2014

7 10.5 画像の貼り付け第 10 章 HTML Web 上では単に文字列のテキストのみならずさまざまな画像が貼りこんであるページを見かけますこれは見ている HTML ファイルとは別の画像ファイルを呼び出し同ドキュメント内に表示させることによって実現していますしかし画像は大概ファイルサイズが大きいため読み込むのに時間がかかってしまいます最近は一般家庭でも高速回線が普及していますがそれでも自分のページ内でやたらと画像ファイルを貼りつけないようにしましょう 1. イメージの表示画像を貼り付けたい場所にタグを記述ファイルの場所は絶対パスか相対パスで指定します <IMG SRC= ~ > このタグには終タグ (</ >) は必要無く単独で機能します画像ファイルの指定ですが画像ファイルならなんでも良いというわけではありません画像ファイルには諸形式があり Web 上で使える形式は GIF 形式 ( 拡張子が *.gif) や JPEG 形式 (*.jpg もしくは *.jpeg) または PNG 形式 (*.png) です 2. アトリビュート上記タグだけで画像の貼り付けはできますが同タグ内にアトリビュートと呼ばれる画像の付加情報を記述することでページを見る側により快適に見てもらうことが出来ます付加情報の内容として画像の縦横のサイズ指定や代替テキストの指定があります前者はブラウザが画像の縦横サイズを最初に把握できるため他のテキスト表示速度が上がります後者は画像の読み込みに失敗したときや読み込む前に変わりに表示するテキストで画像の内容を把握できる文字列や画像ファイルのサイズ等を記述しておきますこれらの記述は一種のマナーだとされています <IMG SRC= ~ WIDTH= HEIGHT= ALT= > の部分に画像の横幅をの部分に縦幅を記述します単位はピクセルでこれは画像編集時にグラフィックエディタ (Photoshop など ) 画像情報を参照することで得られますまた実際のサイズとは変えて記述することも可能ですが表示時間が余計にかかってしまいますし縦横の比率を間違えると画像はゆがんで表示されてしまいますには画像の代わりに表示させたい文字列を記述しますなおブラウザで表示する際画像の上にポインタを合わせるとこのテキストが表示されます 3. 画像にリンクをかける前項で紹介したリンクは画像にもかけることができますですが普通にかけるだけでは下図のように画像の周りに <BODY> タグで指定したリンクカラーで枠線が引かれてしまいますこれを取り除くためには <A HREF= ><IMG SRC= ~ BORDER= 0 ></A> BORDER はアトリビュートの一種で画像の枠線の太さを単位ピクセルで指定しますここでは 0 と指定することで枠線を取り除くことが出来ますボーダーありボーダーなし図 10-8 画像へのリンク Campus System Guide

8 10.6 表組みの作成 HTML では表組みをテーブルと呼びます一概に表組みというと枠線を表示する以外にあまり活用手段がないように思いますが HTML でのテーブルはページレイアウトを行う上でとても便利です表の格子内 ( セル ) にテキストや画像を配置し表自体は枠線を消すと言った処理をすることで見ている側にはそこに表があることを意識させず配置のみをみてもらえるといった使い方やセル内の背景色を指定同じく枠線を消すことでページの一部分だけ背景色を変えるといったこともできます 1. 表組みの基本設定単純に表を作ってみますまずここに表があるということを示すために <TABLE BORDER= ~ ALIGN= ~ >~</TABLE> と書きますこの指定は <HTML> のときと似ており間にセルの指定タグなどを挟み一つの表として出来上がります BORDER は枠線の太さを単位ピクセルで指定するオプションですが書き込まない場合は枠線無しとして認識され BORDER とだけ書けば 1 ピクセルとして認識されます ( もちろん 0 と書いても枠線なしとなります ) ALIGN は表の位置指定 LEFT と RIGHT を指定することで左や右に表をよせることが出来ます指定しない場合は LEFT と判断されますまた CENTER と指定して中央に揃えることも出来ますが認識しないブラウザもあるためその場合はテーブル全体を <CENTER> タグで囲った方が無難です次に表内部のセルの指定ですセルを構成する境界線は縦横に区切られますがそれぞれ記述方法があります <TD>~ ~</TD> <TD> タグがたての境界線 ( 左右に区切る ) を表します <TD>~</TD> のひとまとまりによりセルが一つ出来ますよってよこにセルを 3 つ作りたいのであればこのひとまとまりを 3 つ並べて書けばよいのです <TR>~ ~</TR> こちらは横の境界線 ( 上下に区切る ) セルを 2 段にわたって作りたいのであればこれを二つ書きますまた碁盤の目のように左右にも上下にも仕切りを作りたい場合 <TR> タグで <TD> タグを囲うという形になりますセル内に表示させたいテキストや画像はの部分に記述します [ 例 ] 以下のようなタグを記述した場合 <TABLE BORDER> <TR> <TD> 情報処理入門 </TD><TD> 基礎体育 </TD><TD> 応用数学入門 </TD> </TR> <TR> <TD> 東京と横浜 </TD><TD> 環境情報学 </TD><TD> 地球の科学 </TD> </TR> </TABLE> 右図のように表示されますなお表組みはごちゃごちゃしてくるので上記のようにインデント ( 左側のスペース ) を入れると見やすくなりますただしインデントは実際の表示には一切関係ありませんあくまでもソースの見易さの問題です図 10-9 表のサンプル Campus System Guide 2014

9 2. 表やセルの詳細設定第 10 章 HTML これまでの範囲で十分に表組みを作れますがもう少し細かいことをやってみましょうたとえば枠線やセルの余白をどれくらい取るかといったことやセル背景に色をつけるセル内でのテキストや画像の位置指定等です表全体の設定 (<TABLE> タグ ) のオプションとして既に BORDER と ALIGN を紹介しましたがオプションは他にもあります <TABLE WIDTH= HEIGHT= CELLSPACING= CELLPADDING= ></TABLE> WIDTH( 横幅 ) と HEIGHT( 縦幅 ) は表全体の大きさの指定ですこれらは指定しなくてもブラウザ側で適当な大きさにしてはくれますが何らかの理由で表の大きさを指定したい場合に用いますの部分に大きさを単位ピクセルかもしくはウィンドウサイズの何 % であるかということを記述しますとくにピクセル数で縦横両方を記述した場合で表内のドキュメントが収まりきらない場合この指定は無視されます ( フォントサイズ等見ている環境によって違いますたとえ自分の環境で納まる場合でもある程度余裕を設けるとよいでしょう )CELLSPACING と SELLPADDING はそれぞれ枠線とセル内でのドキュメントと線の間隔の指定ですの部分に単位ピクセルで指定します指定しない場合 CELLSPACING は 2 CELLPADDING は 1 として認識されます図 CELLSPACING&PADDING 次はセル内のドキュメントに関する指定です指定したセルごとに設定がかかります <TD ALIGN= VALIGN= NOWRAP>~</TD> <TR ALIGN= VALIGN= > ~</TR> ALIGN と VAILGN はセル内のドキュメントの位置を指定するものです ALIGN は横の位置でに LEFT CENTER RIGHT と記述することでそれぞれ左寄せ中央寄せ右寄せとなります対する VALIGN はたての位置関係でにそれぞれ TOP MIDDLE BOTTOM と記述すると上部中央部下部という位置指定となりますこれらを指定しない場合 ALIGN は LEFT で VALIGN は MIDDLE として認識されます NOWRAP とは指定したセル内のテキストの改行を禁止します普通はブラウザがウィンドウサイズに合わせてセルの大きさを決めその中にテキストがおさまるように改行されますこれを禁止しようというものです最後はセル内の背景色の指定です <TD BGCOLOR= >~</TD> の部分にカラーコード ( 数字 ) やカラーネームを指定することでそのセルの背景色を決められます上に来るテキストカラーとの兼ね合いを考えて色指定をしましょう Campus System Guide

10 10.7 フォームの設置フォームはアンケート欄や訪問者登録等ページ製作者側に何らかのアクションが帰ってくるようなシステムを作る際にもちいられます難しい所になると CGI というサーバ上で動くプログラムで処理が出来たりしますが CGI を使えないサーバも多く設置に特別な知識が必要だったりとハードルは高めですここではメールという形でアクションを受け取るフォームについて解説しますこちらは電子メールについての知識があれば大丈夫です 1. フォームの宣言テーブルタグの時と同じようにまずここがフォームであるという宣言 ( 記述 ) が必要ですこの宣言のオプションとして送り先や処理方法 ( ここではメールアドレス ) を指定します <FORM METHOD= POST ACTION= mailto: メールアドレス ENCTYPE= TEXT/PLAIN >~ </FORM> <FORM>~</FORM> の間にフォームの諸形式 ( 下で解説 ) が入りその内容が ACTION で指定したアドレスに電子メールで送られることになりますですがそのままでは全角文字が化けて読解不能となってしまいます ENCTYPE= TEXT/PLAIN という記述を入れることによって日本語でも読解可能な状態で送られてきますがこれは送った側の環境によっては正しく働かない場合があります ( 大抵は大丈夫です )ENCTYPE= TEXT/PLAIN を入れないでデコードソフトで読解するという方法もあります無料のソフトが入手できます Clip Decoder 2. 入力欄の諸形式 <INPUT TYPE="TEXT" SIZE=" " VALUE=" " NAME=" "> 主に名前やアドレスの入力に使われる一行の入力欄を作りますの部分には入力欄の長さを文字数 ( 半角文字 ) で指定します 20 と書けば半角文字は 20 文字全角文字は 10 文字入る欄が出来ると言うわけですですがこれは一度に表示できる文字数でこれを超えて入力させることは出来ますはその欄にデフォルトとして入力しておく文字をにはメールとして送られてきた場合にどの項目かを判別するための記述で自分がわかりやすいような名前をつけます [ 例 ]<INPUT TYPE="TEXT" SIZE="30" VALUE=" アドレスを入れてください " NAME="ADDRESS"> 図一行入力欄 <TEXTAREA COLS=" " ROWS=" " NAME=" "> デフォルト表示文字列 </TEXTAREA> コメント等を書いてもらう複数行にまたがる欄をつくります ROWS には入力欄の行数を COLS には横の文字数を指定し間に挟んだ文字列がデフォルトで表示されている文字となりますなお NAME には一行入力欄の時と同じで自分で判別がつくような名前をつけます [ 例 ]<TEXTAREA COLS="30" ROWS="3" NAME="COMMENT"> 何かコメントを (^-^</TEXTAREA> Campus System Guide 2014 図テキストエリア

<INPUT TYPE="RADIO" VALUE=" " NAME=" "> <INPUT TYPE="CHECKBOX" VALUE=" " NAME=" "> 第 10 章 HTML アンケートなどで用いられるチェックボタンを作ります普通はこれらをいくつか並べてその中から選択してもらうようにします TYPE= RADIO だと単数回答しか出来ないラジオボタン TYPE=

11 <INPUT TYPE="RADIO" VALUE=" " NAME=" "> <INPUT TYPE="CHECKBOX" VALUE=" " NAME=" "> 第 10 章 HTML アンケートなどで用いられるチェックボタンを作ります普通はこれらをいくつか並べてその中から選択してもらうようにします TYPE= RADIO だと単数回答しか出来ないラジオボタン TYPE= CHECKBOX はいくつでも選べるチェックボックスを作ります VALUE はその項目がチェックされた場合に送られてくるテキストです送られてきた時に内容がわかるようにつけましょう NAME はチェック項目の名前ですひとまとまりのグループに同じ名前をつけるようにします [ 例 1] この解説は解り易いですか?<BR> 良い <INPUT TYPE="RADIO" VALUE="GOOD" NAME="IKAGA"> 普通 <INPUT TYPE="RADIO" VALUE="NORMAL" NAME="IKAGA"> 悪い <INPUT TYPE="RADIO" VALUE="BAD" NAME="IKAGA"> 図ラジオボタン [ 例 2] この学校に入学した理由は?( いくつでも )<BR> <INPUT TYPE="CHECKBOX" VALUE="KANKYOU" NAME="REASON"> 環境に興味が <BR> <INPUT TYPE="CHECKBOX" VALUE= JOUHOU" NAME="REASON"> 情報化の時代だから <BR> <INPUT TYPE="CHECKBOX" VALUE="AKOGARE" NAME="REASON"> あこがれ (^-^<BR> <INPUT TYPE="CHECKBOX" VALUE="(^^;;" NAME="REASON"> なんとなく (^^;;<BR> 図チェックボックス 3. 送信ボタンリセットボタンを作るこれまでのことを駆使すればフォーム自体はできますが送信するためのボタンを設置しなければ全く意味がありませんまた一度入力した内容をデフォルトに戻すリセットボタンも作りましょう <INPUT TYPE="SUBMIT" VALUE=" " onclick="alert(' 文字列 ')"> まずは送信ボタンですにはボタン上に表示させる文字列を書き込みますそして onclick 以下の記述ですがこれは JavaScript といい HTML ではありません JavaScript といってもこれは簡単なものでボタンを押したときに右図のようなメッセージを出します普通送信ボタンを押しただけでは何も表示が出ず ( ブラウザの設定によってはセキュリティに関する注意メッセージが出ます ) 送信側は何度もボタンを押してしまうといった事態が起こり得ますこれを防ぐためと送ってくれた人に感謝の意を表そうというわけですただし JavaScript は HTML と違い大文字と小文字を区別しなければなりませんうまくいかないようであれば onclick 以下の記述はしなくても動作に問題はありません図アラートウィンドウ <INPUT TYPE="RESET" VALUE=" "> リセットボタンですこれを押すことによりすべてのフォームの内容はデフォルトに戻ります送信ボタンの時と同じくにはボタン上で表示される文字列を書き込みます [ 例 ]<INPUT TYPE="SUBMIT" VALUE=" 送信 " onclick="alert(' ありがとうございます!')"> <INPUT TYPE="RESET" VALUE=" 消去 "> 図送信消去ボタン Campus System Guide

10.8 フレームを使ってページを作るフレームとは 1 つのウィンドウを区切って同時に複数のページを表示させるものです主にメインフレームとそれに付随するメニューフレームといった使い方がされこの場合は常にメニューが表示されるといった利点がありますまたフレームの表示にはフレームを指定するファイルそこから呼び出すファイル群が一度に表示されますので

12 10.8 フレームを使ってページを作るフレームとは 1 つのウィンドウを区切って同時に複数のページを表示させるものです主にメインフレームとそれに付随するメニューフレームといった使い方がされこの場合は常にメニューが表示されるといった利点がありますまたフレームの表示にはフレームを指定するファイルそこから呼び出すファイル群が一度に表示されますので当然フレームを使わないページよりもサイズが大きくなりますまた一つのウィンドウを区切るわけですから表示されるファイルのスペースも小さくなりページ構成が乱れたりしますがそれらの欠点を補って余りある利点がフレームにはあります欠点を把握しそれに対処するようにページを作っていきましょう 1. フレームの基本設定まずはフレームを指定するファイルを作りますこのファイルからフレーム内に表示するファイルを指定します <FRAMESET >~</FRAMESET> これがフレームの宣言ですの部分にフレームの分け方の設定が入ります縦分割 ( 左右に区切る ) は COLS= と指定横分割 ( 上下に区切る ) は ROWS= と指定の部分には各フレームのサイズを指定します単位ピクセルもしくはウィンドウサイズの何 % であるかということを指定します指定は,( カンマ ) で区切りウィンドウを区切る数だけ並べますこの指定は縦分割であれば左から横分割であれば上からという順番で並べます [ 例 ] 図のこの部分のソースは <FRAMESET COLS="25%,*"> 縦分割フレームサイズ左が 25% で右はその残りここでの * は残りのすべてという意味です見る側の環境によりウィンドウサイズが異なるため % 指定の場合は特に必要ありませんがピクセル指定の場合はこのような記述が必要です次はフレーム内に呼び出すファイルの設定です <FRAMESET >~</FRAMESET> の間に記述します <FRAME SRC= NAME= > 区切った数の分だけこれを並べます (3 つに区切ったら 3 つ書く ) 並べ方は COLS や ROWS で区切ったときと同じく縦分割であれば左から右横分割であれば上から下への順に書きますの部分にはこのフレームに呼び出すファイルを絶対パスないし相対パスで指定しますそして NAME ですがこれはそこのフレームウィンドウに名前をつけますウィンドウの名前はあとでリンクを指定するときに必要になりますそれぞれ独自の名前をつけておきます [ 例 ] 図のこの部分のソース <FRAME SRC="menu.html" NAME="MENU"> <FRAME SRC="top.html" NAME="MAIN"> 左側のフレームには MENU 右側のフレームには MAIN という名前がついています基本設定の最後はフレームを表示できないブラウザに対する設定ですフレームタグをサポートしていないブラウザで見た場合フレームの表示が出来ずブランクページとなってしまいますそういった場合に変わりに表示する部分を指定しますここに断り書きなり代わりのページを作っておきます <NOFRAME>~</NOFRAME> この中に普通の HTML で書く <BODY> タグ以下の記述をしますフレーム対応ブラウザでは表示できませんので確認しようがありませんが未対応ブラウザではこの部分が表示されます [ 例 ] 図フレーム未対応ブラウザ用タグソース <NOFRAME> <BODY TEXT="#000000" BGCOLOR="#FFFFFF" LINK="#0000EE"> 申し訳ありませんがこのページはフレーム機能を利用しています対応ブラウザでご覧下さい </BODY> </NOFRAME> フレーム未対応のブラウザでは申し訳ありませんがこのページはフレーム機能を利用しています対応ブラウザでご覧下さいという部分が上記 <BODY> タグ内で設定したカラーで表示されます Campus System Guide 2014 図フレームを使ったページ

13 第 10 章 HTML バラバラに書いてきたソースを一括して載せますこれを参考にフレームを作ってみましょう本来 <BODY> タグのあるべき場所に <FRAMESET> タグが来るという特殊な構造になっていますそして <BODY> タグは <NOFRAME> タグの中にあります一方フレーム内に呼び出されるファイル menu.html と top.html は普通に HTML ファイルを作れば大丈夫ですがリンクには気を配らねばなりません後で解説しますまたフレームの内部にフレーム指定ファイルを呼び出すといった入れ子構造にも出来たりします <HTML> <HEAD> <TITLE> フレームを使ったページ </TITLE> </HEAD> <FRAMESET COLS="25%,*"> <FRAME SRC="menu.html" NAME="MENU"> <FRAME SRC="top.html" NAME="MAIN"> <NOFRAME> <BODY TEXT="#000000" BGCOLOR="#FFFFFF" LINK="#0000EE"> 申し訳ありませんがこのページはフレーム機能を利用しています対応ブラウザでご覧下さい </BODY> </NOFRAME> </FRAMESET> </HTML> 2. フレーム内でのリンクフレーム内で普通にリンクをかけるとそのリンクのあったウィンドウ内に指定したファイルが表示されますがこれを別のフレームウィンドウ内に表示させる必要がでてきますこれはリンクタグのオプション TARGET とフレームの設定時にウィンドウにつけておいた NAME によって実現しますまた他人のページにリンクをかける場合など自分のページのフレーム内に表示させてはいけませんこういった場合は同じく TARGET でフレームを破棄するといったことや新たにウィンドウを開くようにしてそこに表示させることにします <A HREF= ~ TARGET= >~</A> 以前にでてきたリンクタグとそのオプションターゲットですこの部分にフレームの設定でつけた名前を記述することにより別のフレーム内に指定したファイルを表示させることが出来ますまた他人のページにリンクをかける場合などでフレームを破棄する必要が生じた場合の部分に _TOP と記述します _( アンダーバー ) を書き忘れると違った機能 (_BLANK と同じく新たにウィンドウを開き表示 ) になりますこのターゲットのオプションですが大量のリンクがある場合等一つ一つに書き込んでいくのは面倒以外のなにものでもありませんこうした場合にそのページのもととなるターゲットを指定できます <BASE TARGET= > 終タグは必要なく単独で使用し <HEAD>~</HEAD> 内にページの基本設定として指定します別段ページのどこに書いても機能しますがなるべく上の方に書かないと読み込むまで働きません基本は <HEAD> 内部ですそしての部分にターゲットを指定しますこの BASETARGET とリンクタグ内オプションの TARGET が同時に存在する場合はそのリンクに限り後者が優先されます Campus System Guide

(3) 本文を書く実際にページを開いたときに表示される本文を書いてみましょうからの間に書きます <html > <head > <title > 武のホームページ </title > </head > </html > (4) ページを保存するここで一度ページを保存してみましょうテキストエ

(3) 本文を書く実際にページを開いたときに表示される本文を書いてみましょうからの間に書きます <html > <head > <title > 武のホームページ </title > </head > </html > (4) ページを保存するここで一度ページを保存してみましょうテキストエ 1. はじめの準備 (1) フォルダの作成ホームページ作成の基礎これから作るホームページのデータをホームページ用として保存 ( 保管 ) するフォルダを作成しますホームページで使う作成したファイル画像写真音楽などファイルはすべて同じフォルダに保存しますデスクトップやマイドキュメントの中 ( 任意 ) で右クリック新規作成 (N) フォルダ (F) で新しいフォルダができます (