～1、HPを作る～

さてHPページ？などと思う人もいるでしょう
まずHPページのことについて説明しましょう。

HPページとはHTMLという言語でかかれています。
HTML言語とは命令を書いてその命令をブラウザが
処理してくれます。

さてHPページのこともわかったと思うので
早速作ってみましょう。

1－1

HPページを作る準備をしましょう。
まずどこか適当なところに"HTML"というフォルダ
を作りましょう。

次はホームページエディターをダウンロードしましょう。
今回は"へてむるクリエイタ～"を使って話をすすめて
いきます。
参照アドレス
http://www.hosiken.com/

そしたらへてむるクリエイタ～を開きます。

1-2

さてこれからHTMLを組みます。
HPを作るにあたって一番大変なところです。

まず必ず付けなければ行けないのは。

<HTML> ：HTMLを開きします。
<>HEAD> ：HEADを開きします。
 ：コメントを閉じます。
</HEAD> ：HEADを閉じます。
<BODY> ：BODYを開きます。
～～～：BODYの内容を記述します。
～～～：BODYはHPの内容を記述します。
</BODY> ：BODYを閉じます。
</HTML> ：HTMLを閉じます。

ここではわかりやすく開くや閉じると記述しています。

さて<xxxx>などとかかれていますが、この事を"タグ"
といいます。
"<"でタグを開き">"でタグを閉じます。

もうひとつ決まりごとがあります。
先に記したタグを見て気づくと思いますが
タグの命令を使ったらその範囲を決めなければ
いけません。
そこで範囲を決めるには"<英数文字列>"で範囲の最初
を決めます。
範囲の最後には"</英数文字列>"で範囲の最後
を決めます。

このタグの集まりがHTMLなのです。

1-3

ここでよく使われる基本的はタグを説明します。

<H1>文字列</H1> 文字のでかさを変えます。↑大きい
<H2>文字列</H2> 文字のでかさを変えます。｜
<H3>文字列</H3> 文字のでかさを変えます。｜
<H4>文字列</H4> 文字のでかさを変えます。｜
<H5>文字列</H5> 文字のでかさを変えます。｜
<H6>文字列</H6> 文字のでかさを変えます。↓小さい

改行する。
<BR> 一行あけて改行する

<P> <IMG SRC="画像のアドレス"> 画像を表示させます。

<A HREF="アドレス">表示させる画像や文字列</A> 文字や画像をリンクさせる。

<FONT COLOR="英語,REDなど">文字列</FONT> 文字の色を変えます。

 コメントを書きますどこでもつかえてHPへの影響はありません。

アドレス？
などと思う人もいるでしょう、ここでアドレスの説明をします。

アドレスとは住所のようなものです。
全てのファイルやフォルダにあります。
例えば

html(フォルダ)
　　|
　　|--test(フォルダ)
　　|　　　|
　　|　　　|--photo.html
　　|
　　|--index.html

このような構造のフォルダがあるとします。

ここでは相対リンクを説明します。
相対リンクについてはあまり考えないで
こうすればできると覚えてください。

相対リンクは二つの種類があります。

/名前そのフォルダにあるファイルを指定します。
/名前/名前最初に指定したフォルダの中にあるファイルを指定します。

../名前ひとつ前のフォルダの中にあるファイルを指定します。
../名前/名前ひとつ前のフォルダの中にあるフォルダの中にあるファイルを指定します。
../../名前二つ前のフォルダの中にあるファイルをしています。
../../名前/名前二つ前のフォルダの中にあるフォルダの中にあるファイルを指定します。

このようにフォルダの中にあるファイルを指定するのと
前のフォルダの中のものを指定するのがあります。

-----------------HP作りを便利にする技-----------------

HP作りをするにあたってファイルの拡張子やアドレスを見えないと色々
不便なことがあります。
なのでここではファイルの拡張子の表示のしかたを説明します。

拡張子の表示
スタート→設定→コントロールパネル→フォルダオプション→表示→登録されているファイルの拡張子は表示しない。
のチェックをはずします。
アドレスの表示
スタート→設定→コントロールパネル→フォルダオプション→表示→アドレスバーにファイルのパス名を表示する。

------------------------------------------------------
すこし例題を出してみましょう。

photo.htnlからindex.htmlへリンクしたいときは
<A HREF="../index.html">BACK INDEX</AA>
とすればいいのです。

index.htmlからphoto.htmlへリンクしたいときは
<A HREF="/test/photo.html">GOTO MY PHOTO</A>
とすればいいのです。

1-4
タグの説明もしたので早速タグを組んでみましょう。
まず基本ののタグを組んだあと。
HEADに情報を書いてBODYにタグを組みましょう。

まずためしとして
"TEST1"をでかく表示させて
"TEST2"の色を赤色にしましょう。


<HTML>
<HEAD>
<!--
TEST1をでかく表示させる
TEST2を赤色で表示させる
-->
</HEAD>
<BODY>
<H1>TEST1</H1><BR>
<FONT COLOR="RED">TEST2</FONT><BR>
</BODY>
</HTML>

こうなります、早速結果を見てみようとしてもまず
"保存"をしなければ行けません。
保存場所は先ほど作ったHTMLフォルダです
名前はindexとでも付けときましょう。

先ほどひらいたHTMLフォルダにindexというhtml
ファイルを開きましょう
どうです、うまくいってますか？
もしうまくいっていたら次はリンクをさせましょう。

htmlフォルダにpage1というフォルダを作りましょう
次にpage1フォルダの中に"リンク成功"と書いた
test.htmlファイルを保存しましょう。

そして先ほど作ったindexファイルにこのタグを追加
しましょう。

<A HREF="/page1/test.html">GOTO TEST </A>

そしてhtmlファイルを開いて、GOTO TESTが青色に
なっていれば成功です。
早速GOTO TESTを押して成功しているか確かめてみま
しょう。

もしこれで失敗したらアドレスが間違えているからです。

1-5

次は画像を表示する方法です。

それではまず画像ファイルを作りましょう。
使うツールはペイントです。
スタート→プログラム→アクセサリー→ペイント
にあります。

ペイントを起動させて何か適当に画像を書きましょう。
保存するときはHTMLフォルダ中に保存しましょう。
このとき注意してほしいのが画像の保存形式です。
基本的には画像はJPGかGIFを使います。

---------------ペイント豆知識---------------
ペイントはあまり多機能ではないが初心者には使い
やすいツールです。

ペイントにはショートカットキーといってキーボードの
キーを押すだけで効果が現れます。
僕がいつも使っているのは
CTRL+Z
ですこの機能は一個前に戻るです。
この機能を使うだけで作業効率はぐんとアップします。
-------------------------------------------
画像を表示させるには
<IMG SRC="アドレス">
これだけで画像を表示してくれます。

さて挑戦してみましょう
index.htmlにこの行を追加しましょう。
<IMG SRC="/名前.拡張子">
で表示させます。

画像が表示されたら成功です。

さてHPの基本はほとんど学びました。

画像の表示
文字の表示

あとはさまざまなレイアウトなどを使えば
立派なHPになるでしょう。

タグの説明をしているHPはたくさんあります
そこに行けばさまざまなタグを学べるでしょう。

BACK