|
■このページについて
これまでメールマガジンで取り上げてきた内容をまとめています。
例文をコピー＆ペーストして、タグ練習場で試してみてください。
|
＃１ ＨＴＭＬの基本構文 |
＃６ 画像の取り込み‥２ |
|
＃２ 文字の修飾‥１ |
＃７ リンクボタンの設定 |
|
＃３ マーキー |
＃８ 表の作成‥１ |
|
＃４ 表紙の作成 |
＃９ ランキング表 |
|
＃５ 画像の取り込み‥１ |
＃１０ 表の作成‥２ |
■ ＨＰ解説の手順
一口でいうと、ＩＤ取得→ＨＰの内容作成→データをサーバーへ転送
これだけです。単純な内容のＨＰであれば、いわゆる、超速、１日で自分のＨＰを自分の
パソコンで眺めることができます。
１．ＩＤ取得
（ＨＰのアドレスと関係します。http//:www.‥‥/を決めるということです）
まず、どこから発行するのかを決める（自分の利用しているプロバイダーでもいいし、
無料で提供してくれる、その他たくさんのどこかのプロバイダー）。そして、専用のＩＤを
取得する。このＩＤが、いわゆる、ＵＲＬとなります。ＩＤの名前は、好きな名前を登録
できるのですが、一般的にみなさんが好むような名前はすでに、登録されていることが多い
ので、ちょっと、ひねる必要があるかもしれません。とにかく、ＩＤが取得できれば
あとは、比較的簡単です（ただし、単純な内容のＨＰの場合です）
２．ＨＰの中味の作成
いったい、どうやって作るの？って思われるでしょうが、みなさんのパソコンに必ず
はいっているメモ帳で内容を作成します。ここからが、少し戸惑います。どうすればいいの？
最小限のＨＴＬＭという言語を勉強してください。
１時間あれば、表を作って、その中に色のついた文字を貼り付けることができます。最小限の
ＨＴＭＬ言語を示します。
ある程度理解できるようになれば、HTMLのポケットリファレンスを購入すると便利です。
３．ＨＰデータのアップロード
Yahooなどの無料HPページには、データ転送ソフトも付属しているので、その操作方法を
説明します。
Yahooジオシティーズでの開設方法はこちらです。
┏━━━━━━━━━━━━┓
┃■ＨＰ作成初級講座‥＃１
┗━━━━━━━━━━━━┛
さて、ホームページはＨＴＭＬ（HyperText Markup Language）と呼ばれるマークアップ
言語を使って記述されています。この言語は、文書の一部を「タグ」（*1）と呼ばれる特別な
文字列で囲うことにより、文章の構造(見出し
やハイパーリンクなど)や、修飾情報(文字
の大きさや組版の状態など)を、文章中に記述していくものです。
この言語を使用して書かれた文書はテキストファイルになるため、テキストエディタ（一般的
には、メモ帳が使われています）を使って、読んだり、編集したりすることができます。
（*1）タグの例
<BODY>＃＃＃</BODY>。＃＃＃の部分にテキストを記述します。
<BODY>を開始タグ、</BODY>を終了タグといい、このタグ間にはさまれた内容を制御
します。タグは必ず、ペアで使用します。
それでは、基本となるＨＴＭＬ構文を使って、簡単なＷｅｂページを作ってみましょう。
１．メモ帳を新規で開いて下記の点線で囲まれた部分をコピー＆ペーストしてください
（点線は不要です）。
（メモ帳は、スタート→すべてのプログラム→アクセサリ→メモ帳で起動できます）
２．ｉｎｄｅｘ．ｈｔｍｌという名前（全て半角文字）を付けて保存してください。
（ＩｎｔｅｒｎｅｔＥｘｐｌｏｒｅｒと同じアイコンのファイルが生成しているはずです）
３．ｉｎｄｅｘ．ｈｔｍｌをダブルクリックしてください。「ＨＰ作成の基本」という文字が
書かれたＷｉｎｄｏｗの画面が表示されたと思います。これが、Ｗｅｂページの基本です。
このデータをサーバに転送すれば（その前に、ＩＤを取得しなければなりませんが）、
そのまま、ＨＰになります。さまざまなタグを使って文章を構成すれば、みなさんが日頃、
目にされている鮮やかなページに変身するというわけです。
どうですか？ なーんだ、そうなのかという感じですよね。
ＨＴＭＬの基本構文（*タグはすべて半角文字です）
┌────────────────────┐
<HTML>
<HEAD>
<TITLE>ＨＰ作成の基本</TITLE>
<HEAD>
<BODY>
ＨＰ作成の基本
</BODY>
</HEAD>
</HTML>
└────────────────────┘
今回のタグ
・<HTML></HTML> → この文章がＨＴＭＬであることを宣言
・<HEAD>ヘッダー</HEAD> → ヘッダーと呼ばれる情報を記述します。
この文章のﾌﾟﾛﾌｧｲﾙを記述する。
・<TITLE>タイトル名</TITLE> → 文章のタイトルを記述します。
ブラウザのアクティブバーに表示されます。
・<BODY>テキストなど</BODY> → この部分が、画面に表示されます
（いわゆる、本文です）。
┏━━━━━━━━━━━━━┓
┃■ＨＰ作成初級講座‥＃２
┗━━━━━━━━━━━━━┛
今回は文字に関するタグの説明です。
文字のサイズを小さくしたり、大きくしたり、あるいは、赤色にしたり、などなど、タグを
利用することで自由自在に文字を制御することができます。
基本構文は次のようになります。制御したい文字列：###を、以下のように
<Font>###</Font>で囲みます。faceによってフォントを変えます。
┌────────────────────────┐
│<Font face="X" size="Y" color="Z">###</Font>
└────────────────────────┘
・X→フォントの種類（ＭＳ 明朝など）
・Y→文字のサイズ、１〜７
・Z→文字の色。色の名前か16進数で指定します。
このサイトに詳しく説明されています。↓
http://www1.odn.ne.jp/artistic/color/
・＃＃＃→表示させたいテキスト
・サイズだけ変更したい場合は、<Font size="5">###</Font>となります。
それでは、文字のタグを練習してみましょう。
１．メモ帳を新規で開いて下記の点線で囲まれた部分をコピー＆ペーストしてください
（点線は不要です）。
２．index.htmlという名前（全て半角文字）を付けて保存してください。（InternetExplorer
と同じアイコンのファイルが生成しているはずです）
３．index.htmlをダブルクリックしてください。
「愛」という少し大き目の赤い文字が画面上に表示されたと思います。
ＨＴＭＬの基本構文（*タグはすべて半角文字です）
┌────────────────────┐
<HTML>
<HEAD>
<TITLE>ＨＰ作成の基本</TITLE>
<HEAD>
<BODY>
<Font size="6" color="red">###</Font>
</BODY>
</HEAD>
</HTML>
└────────────────────┘
┏━━━━━━━━━━━━━┓
┃■ＨＰ作成初級講座‥＃３
┗━━━━━━━━━━━━━┛
文字サイズや色の変更はできましたか？ 文字ついては、まだ
いろいろなタグがありますが（次回、取り上げます）、今回は、
文字に動きを加えて楽しんでみましょう！
いろいろな人のホームページを訪問すると、文字が右から左へ、
あるいは上から下へと少しずつ移動するのを見かけることがある
と思います。これは、マーキーによって制御することができます。
基本構文は次のようになります。制御したい文字列を、
以下のように<Marquee>###</Marquee>で囲みます。
┌────────────────────────┐
│<Marquee direction="#">文字</Marquee>
└────────────────────────┘
・#→スクロールの方向を指定します。
right：右→左、left：左→右
up：上→下、downn：下→上
・背景の色を制御したい場合は、direction="#"のとなりに、
bgcolor="blue"などを追加します（例文１）。
・文字の色、サイズも変更する場合は、前回のタグを
併用してください（例文２）。
┏━━━━━━━━━━━━━┓
┃■ＨＰ作成初級講座‥＃４
┗━━━━━━━━━━━━━┛
さて、今回は、新しく２つのタグを説明します。そして、これまで
の知識を応用して、ＨＰの表紙を作成してみたいと思います。
まずは新しいタグの説明です。
１．全体の背景の色を設定する。何も設定しないときは白です。
┌──────────────────┐
│<BODY bgcolor="##">本文</BODY>
└──────────────────┘
・使い方：##の部分に、色の名前（Blueなど）か16進数を
記述します。
＊色の指定は、こちらを参考にしてください。
→ http://www1.odn.ne.jp/artistic/color/
２．文字を強調する。
┌──────────┐
│<b>テキスト</b>
└──────────┘
・使い方：強調したいテキストを囲んでください。
「b」はboldの「b」だと思います。
それでは、早速、表紙（らしきもの）を作ってみましょう。
１．メモ帳を新規で開いて下記の点線で囲まれた部分を
コピー＆ペーストしてください（点線は不要です）。
２．index.htmlという名前（全て半角文字）を付けて保存してください。
（InternetExplorerと同じアイコンのファイルが
生成しているはずです）
３．index.htmlをダブルクリックしてください。
いかがですか？非常にシンプルですが、ＨＰの表紙ができました。
お好みに合わせて、文字の色やサイズを変えてみて下さい。
例文１．ホームページの表紙（*タグはすべて半角文字です）
┌────────────────[ここから]──────┐
<HTML>
<HEAD>
<TITLE>Welcome to my Home Page</TITLE>
</HEAD>
<BODY bgcolor="Aliceblue">
<Font size="6" color="violet">
<b>Welcome to my Home Page</b>
</Font>
<Font size="3" color="violet">
<Marquee direction="left" bgcolor="linen">
ホームページを作りました 2004.12.1
</Marquee>
</Font>
<br>
<br>
<Font size="2" color="violet">
このページは私の英語学習日記です。
・プロファイル
・お気に入り
・リンク
・更新記録
<br>
・（ここに図を挿入する予定）
</Font>
</BODY>
</HEAD>
</HTML>
└────────────────[ここまで]──────┘
＊<br>は、改行命令です。
┏━━━━━━━━━━━━━┓
┃■ＨＰ作成初級講座‥＃５
┗━━━━━━━━━━━━━┛
さて、今回は、画像の取り込みです。
画像がはいると、一段とＨＰらしくなります。
基本構文は次のようになります。
（この他にも細かな設定がありますが、次回以降に
説明いたします。）
┌────────────────────┐
│<IMG src="##" width="XX" height="YY">
└────────────────────┘
・##→image.jpgなどの画像ファイル名を記述します。
GIF形式、PNG形式でもOKです。
ファイルサイズが大きくなりすぎると、表示に時間
がかかります。30KB程度までがお勧めです。
＊GIF：Graphics Interchange Format
＊PNG：Portable Network Graphics
＊JPG：Joint Photographic Coding Experts Group
・XX→画像の幅方向を設定します。ピクセル数かウインドウ
に対する％で指定できます。
・YY→画像の高さ方向を設定します。ピクセル数かウインドウ
に対する％で指定できます。
それでは、早速、練習してしましょう！。
１．メモ帳を新規で開いて下記の点線で囲まれた部分を
コピー＆ペーストしてください（点線は不要です）。
２．index.htmlという名前（全て半角文字）を付けて保存して
ください。（InternetExplorerと同じアイコンのファイルが
生成しているはずです）
３．デスクトップ上に新規にホルダーを作成して、このホルダー
の中に、index.htmlファイルを移してください。
ホルダー名は”HP練習”などでOKです。
４．画像ファイルを準備をして（サイズは〜30KB以下）、この
ファイルを３．で作成したホルダーに移してください。
また、例文１のimage.jpgの部分を準備いただいたファイル名に
変更してください（準備したファイル名が、image.jpgの場合
はそのままでOKです）。
（＊画像ファイルは、index.htmlと同じホルダーになければ
いけません。）
５．index.htmlをダブルクリックしてください。
いかがですか？少し小さめの画像が表示されているはずです。
width、heightの値を変えて試してください。
また、前回の例文と組み合わせるとそれなりのホームページ
の完成です（前回の例文の中に、ここに図を挿入 という部分に
画像取り込みのタグを記述してください）。
例文１．画像の取り込み（*タグはすべて半角文字です）
┌────────────────[ここから]──────┐
<HTML>
<HEAD>
<TITLE>Welcome to my Home Page</TITLE>
</HEAD>
<BODY bgcolor="Aliceblue">
<Font size="6" color="navy">
<b>Welcome to my Home Page</b>
</Font>
<Font size="2" color="royalblue">
・ここに画像を取り込みます。
</Font>
<IMG src="image.jpg" width="100" height="100">
</BODY>
</HEAD>
</HTML>
└────────────────[ここまで]──────┘
＊<br>は、改行命令です。
┏━━━━━━━━━━━━━┓
┃■ＨＰ作成初級講座‥＃６
┗━━━━━━━━━━━━━┛
画像の取り込みはできましたか？
今回は、画像に関連するもので、何らかのトラブルで画像が読み込めないとき
や画像表示に対応していないブラウザで見ている人が、その内容を理解するた
めに役立つものです。
基本構文は次のようになります。
┌───────────────┐
│<IMG src="##" alt="XX">
└───────────────┘
・##→image.jpgなどの画像ファイル名を記述します。
・XX→画像の代わりに表示させたいテキストを記述します。
たとえば、画像がサンタクロースであれば、ここに「サンタクロース」
と記述することにより、画面上に、「サンタクロース」が表示されます。
それでは、早速、練習してしましょう！。
１．メモ帳を新規で開いて下記の点線で囲まれた部分を
コピー＆ペーストしてください（点線は不要です）。
２．index.htmlという名前（全て半角文字）を付けて保存して
ください。（InternetExplorerと同じアイコンのファイルが
生成しているはずです）
３．デスクトップ上に新規にホルダーを作成して、このホルダー
の中に、index.htmlファイルを移してください。
ホルダー名は”HP練習”などでOKです。
画像ファイルは、別のホルダーに移してください（画像ファイルを
読み込めないようにします）
４．index.htmlをダブルクリックしてください。
いかがですか？ 画像が表示される位置に「サンタ」という文字が
表示されているはずです。
例文１．画像の取り込み（*タグはすべて半角文字です）
┌────────────────[ここから]──────┐
<HTML>
<HEAD>
<TITLE>Welcome to my Home Page</TITLE>
</HEAD>
<BODY bgcolor="Aliceblue">
<Font size="6" color="navy">
<b>Welcome to my Home Page</b>
</Font>
<Font size="2" color="royalblue">
・ここに画像を取り込みます。
</Font>
<IMG src="image.jpg" alt="サンタ" width="100" height="100">
</BODY>
</HEAD>
</HTML>
└────────────────[ここまで]──────┘
＊<br>は、改行命令です。
┏━━━━━━━━━━━━━┓
┃■ＨＰ作成初級講座‥＃７
┗━━━━━━━━━━━━━┛
今回は、リンクボタンの設定方法です。リンクとは、テキストや
画像をクリックすると、別のページやサイトにジャンプできる機能
のことです。
基本構文は次のようになります。
┌────────────────────┐
│<A href="###" target="blank">XXX</A>
└────────────────────┘
・###→リンク先のURLを記述します。
たとえば、YahooのHPにジャンプする場合は、
http://www.yahoo.co.jp/ と記述します。
＊URL：Uniform Resource Locatorの略で、Webページの
ファイルの場所を表すものです。
＊URLを指定する２つの方法：下の例文でも２つの方法を取り上げて
いますが、１つは、絶対パス（httpなどから始まるURL）ともう
１つは、相対パス（ファイル名のみ）です。相対パスは、自分の
サイト内にファイルがある場合に使うことができます。
・XXX→リンクボタン（テキストや画像など）です。自由に
設定できます。
・target="blank"：新しいウィンドウを開いて表示する場合
に記述します。これを省略すると、元のページと同じ
ウィンドウにそのまま表示されます。
それでは、早速、練習しましょう！
１．メモ帳を新規で開いて下記の点線で囲まれた部分を
コピー＆ペーストしてください（点線は不要です）。
２．index.htmlという名前（全て半角文字）を付けて保存して
ください。index-2.htmlという名前でも保存してください。
（InternetExplorerと同じアイコンのファイルが生成している
はずです）
３．デスクトップ上に新規にホルダーを作成して、このホルダー
の中に、index.htmlとindex-2.htmlファイルを移してください。
ホルダー名は”HP練習”などでOKです。
４．index.htmlをダブルクリックしてください。Yahooの文章中の
「こちら」という文字をクリックしてください。元のウィンドウに
そのまま、Yahooのページが表示されたはずです。
次に、その下の行の「こちら」をクリックしてください。今度は、
新しいウィンドウに、全く同じ内容のページが表示されたはずです。
いかがですか？ 絶対パスと相対パスの違いはわかりましたか？
これまでの内容をうまく利用すれば、ホームページはすぐに開設
できますよ。是非、一度、お試しください！
例文１．リンクの練習（*タグはすべて半角文字です）
┌────────────────[ここから]──────┐
<HTML>
<HEAD>
<TITLE>Welcome to my Home Page</TITLE>
</HEAD>
<BODY bgcolor="Aliceblue">
<Font size="6" color="navy">
<b>Welcome to my Home Page</b>
</Font>
<Font size="2" color="royalblue">
・リンクの練習
・YahooのHPは、<A href="http://www.yahoo.co.jp/">
こちら</A>です。
・ホームページNo2は、<A href="index-2.html" target="blank">
こちら</A>です。
</Font>
</BODY>
</HEAD>
</HTML>
└────────────────[ここまで]──────┘
＊<br>は、改行命令です。
＊文字および背景の色を変更したい場合は、こちらを参考にしてください。
→ http://www1.odn.ne.jp/artistic/color/
┏━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃■ＨＰ作成初級講座‥＃８（カラーサンプルの作成）
┗━━━━━━━━━━━━━━━━━━━━━━━━━┛
今回は、簡単なカラーサンプルを作ってみましょう。
その前に、表全体の配置を指定するタグを１つ、示します。
┌────────────────────────┐
│ <TABLE align="X" >###</TABLE>
└────────────────────────┘
・X：以下の3つより選択します。
left：画面の左端に表示
center：画面の中央に表示
right：画面の右端に表示
それでは、早速、練習しましょう！
１．メモ帳を新規で開いて下記の点線で囲まれた部分をコピー＆ペースト
してください（点線は不要です）。
２．index.htmlという名前（全て半角文字）を付けて保存してください。
（InternetExplorerと同じアイコンのファイルが生成しているはずです）
３．デスクトップ上に新規にホルダーを作成して、このホルダーの中に、
index.htmlファイルを移してください。ホルダー名は”HP練習”などで
OKです。
４．index.htmlをダブルクリックしてください。
２行３列のカラーサンプルが表示されていると思います。
３行５列のカラーサンプルを作ってみましょう。
（＊カラーは数値で指定しましたが、カラーネームでも同じ結果に
なります。）
例文１．カラーサンプルの作成（*タグはすべて半角文字です）
┌────────────────[ここから]────────┐
<HTML>
<HEAD>
<TITLE>Welcome to my Home Page</TITLE>
</HEAD>
<BODY bgcolor="#ffeaff">
<Font size="6" color="#950095">
<b>カラーサンプルの作成</b>
</Font>
<TABLE align="center" bgcolor="beige" border="1">
<TR>
<TD bgcolor="#ffbfdf" width="120" height="20">
#ffbfdf
</TD>
<TD bgcolor="#ffbfff" width="120" height="20">
#ffbfff
</TD>
</TR>
<TR>
<TD bgcolor="#ff80c0" width="120" height="20">
#ff80c0
</TD>
<TD bgcolor="#ff80ff" width="120" height="20">
#ff80ff
</TD>
</TR>
<TR>
<TD bgcolor="#ff0080" width="120" height="20">
#ff0080
</TD>
<TD bgcolor="#ff00ff" width="120" height="20">
#ff00ff
</TD>
</TR>
</TABLE>
<Font size="3" color="#ffeaf4">
<Marquee direction="left" bgcolor="#ff99ff">
カラーサンプルです。 2005.1.16
</Marquee>
</Font>
</BODY>
</HEAD>
</HTML>
└────────────────[ここまで]────────┘
＊
は、改行命令です。
＊文字および背景の色を変更したい場合は、こちらを参考にしてください。
→ http://www1.odn.ne.jp/artistic/color/
＊不明な点などありましたら、遠慮なくご質問ください。みなさんの疑問
を基に、よりわかりやすい説明を目指したいと思います。
┏━━━━━━━━━━━━━━━━━━━━━━━┓
┃■ＨＰ作成初級講座‥＃９（ランキング表の作成）
┗━━━━━━━━━━━━━━━━━━━━━━━┛
カラーサンプルはできましたか？ 全色そろったカラーサンプルを
作っておくと便利ですよ。
さて、今回は、ランキング表を作ってみましょう。
その前に、まず、表題(キャプション)を設定するタグを示します。
＊この表題タグは、<table>タグの直後に指定します（例文１参照）。
┌──────────────┐
│ <caption>###</caption>
└──────────────┘
・###：「ランキング」などの表題を設定します。
そして、もう１つ、表に見出し項目をつけるタグです。
┌─────────┐
│ <th>&&&</th>
└─────────┘
・&&&：「順位」などの見出しを設定します。項目の数だけ連続して
書き込みます。
それでは、早速、練習しましょう！（下表１を作成します）
１．メモ帳を新規で開いて下記の点線で囲まれた部分をコピー＆ペースト
してください（点線は不要です）。
２．index.htmlという名前（全て半角文字）を付けて保存してください。
（InternetExplorerと同じアイコンのファイルが生成しているはずです）
３．デスクトップ上に新規にホルダーを作成して、このホルダーの中に、
index.htmlファイルを移してください。ホルダー名は”HP練習”などで
OKです。
４．index.htmlをダブルクリックしてください。
DVDの売上ランキングが表示されていると思います。
例文では、1〜3位までですが、1〜10位までのランキングを作って
みましょう。
表１ DVD売り上げランキング
-----------------------------------------------------------------------
順位 タイトル 出演
-----------------------------------------------------------------------
1 キング・アーサー ディレクターズカット版 クライヴ・オーウェン
2 シングルV「THE マンパワー!!!」 モーニング娘
3 劇場版 仮面ライダー剣(ブレイド) 劇場版 椿 隆之
-----------------------------------------------------------------------
例文１．ランキングの作成（*タグはすべて半角文字です）
┌────────────────[ここから]────────┐
<HTML>
<HEAD>
<TITLE>Welcome to my Home Page</TITLE>
</HEAD>
<BODY bgcolor="#ffeaff">
<Font size="6" color="#950095">
<b>ランキングの作成</b>
</Font>
<TABLE align= "center" bgcolor="beige" border="1">
<caption表１ DVD売り上げランキング</caption>
<th> 順位 </th>
<th> タイトル </th>
<th> 出演 </th>
<TR>
<TD bgcolor="#ffbfdf" width="40" height="20">１</TD>
<TD bgcolor="#ffbfdf" width="350" height="20">
キング・アーサー ディレクターズカット版 </TD>
<TD bgcolor="#ffbfff" width="200" height="20">
クライヴ・オーウェン</TD>
</TR>
<TR>
<TD bgcolor="#ffbfdf" width="40" height="20">２</TD>
<TD bgcolor="#ffbfdf" width="350" height="20">
シングルV「THE マンパワー!!!」 </TD>
<TD bgcolor="#ffbfff" width="200" height="20">
モーニング娘</TD>
</TR>
<TR>
<TD bgcolor="#ffbfdf" width="40" height="20">３</TD>
<TD bgcolor="#ffbfdf" width="350" height="20">
劇場版 仮面ライダー剣(ブレイド) 劇場版 </T>
<TD bgcolor="#ffbfff" width="200" height="20">
椿 隆之</TD>
</TR>
</TABLE>
<Font size="3" color="#ffeaf4">
<Marquee direction="left" bgcolor="#95004a">
DVD売上げランキングです。 2005.1.29
</Marquee>
</Font>
</BODY>
</HEAD>
</HTML>
└────────────────[ここまで]────────┘
＊
は、改行命令です。
＊文字および背景の色を変更したい場合は、こちらを参考にしてください。
→ http://www1.odn.ne.jp/artistic/color/
＊不明な点などありましたら、遠慮なくご質問ください。みなさんの疑問
を基に、よりわかりやすい説明を目指したいと思います。
|
|
