リンクのページの作成

次のページを作ってゆきます。

このページを作る上でのポイントは

1,インデントをする。
2,文字飾りをする
3,他のWEBページ(自分のものでないページ)にリンクする

 

の3点です。
先程のページからすると、新しいことは少ないですが、
いままでのこともすべて利用します。


1、準備 と

このページでも、画像を使います。その画像を準備します。
このページで利用する画像は

[hosi_kiiro.gif] と
[hosi_kiiro2.gif] と

[hosi_kabe.gif] の3つです。

この3つをpage4.htm と同じフォルダ(マイドキュメント)に用意します。

なお、このサンプルページのソースを見ると、スペースで調整していますが、
Hyper Editでは、ブラウザの様子を逐一チェックしながらするのが大変なので
インデントを利用することによって、 代わりとします。


2、作成編

(画像をクリックすると、大きい画像が出てきます)

1,復習

わからないところがでてきたら、page2の作り方の部分を参考にしながら作りましょう。

ランチャーから、「開く」を選択し、フォルダを移動して、page4.htmを開きます。
タイトルを「リンク集」と設定します。

HEADとBODYの設定をします。
BODYの設定で背景画像は、 「hosi_kabe.gif」を選択します。
BODYの中身の文章を入力して、改行をします。

また、画像をそれぞれ張り付けます。

そこまでを終えたら、右のようになっていることでしょう。


2,インデント

このページは、インデントをつかって文字を下げています。

ページの内容(文字のみ)

文字の位置

リンク集

    お友達

       はるちゃん
          高校時代

       かねごん
          同じく

       これから増えていく予定です

Back

CENTER

インデント1段階

インデント2段階
インデント3段階

インデント2段階
インデント3段階

インデント2段階

CENTER

インデントは<UL></UL>に囲まれた部分が一段階インデントされます。
Hyper Editでは、インデントしたい範囲を選択して「段落付け」ボタンでできます。

このページでは、
画像を含めた「お友達 〜 これから増えていく予定です」
を一段階インデントします。


次に「はるちゃん〜これから増えていく予定です」全体を
一段階インデントして、

最後に、「高校時代」、「同じく」のそれぞれを
もう一回インデントしましょう。

右の画像は、インデントを施した後のソースです。


その後は、「リンク集」 、「(画像+)Back」をセンタリングしましょう。


 


3,文字飾り

FONTを使って、文字の大きさや色を変える以外に、太字にしたり、斜体にする方法があります。

違いを表してみます

文字の表示

使っているタグ

ホームページ

ホームページ

ホームページ

ホームページ

フォントのみ

太字(<B></B>

斜体(<I></I>

太字+斜体

Hyper Editでは、太字や斜体にしたい部分を選択した状態で下のボタンを押します。


このページでは、

ページの内容(文字のみ)

文字飾り

FONTの設定

リンク集

    お友達

       はるちゃん
          高校時代

       かねごん
          同じく

       これから増えていく予定です

Back

無し

太字+斜体

太字
太字

太字
太字

太字+斜体

無し

サイズ 7 色 FFFF00

サイズ 5 色 FFFF00

サイズ 5 色 FFFF80
サイズ 5 色 FFFF80

サイズ 5 色 FFFF80
サイズ 5 色 FFFF80

サイズ 4 色 FFFF00

サイズ 6 色 FFFF00

となってます。
インデントの時を参考にして、文字飾りと、FONTの設定をしましょう。

BODY部分はこのようになります。

人によって、タグの数(及び位置)が違うことでしょう。


4,他のWEBページにリンクする

ハイパーリンクを貼ります。リンクを貼りたい部分を選択している状態で「他の文章にリンク」ボタンを押します。
つまり、自分のページへのリンクとすることはほとんど同じです。

他のページへのリンクを張るときには、
http://」 から始まる。絶対パスと呼ばれるもので指定しなければいけません。

(絶対パスに対して、自分のいる場所からリンクを指定する事を相対パスと言う)

「はるちゃん」には、
http://www.its.hiroshima-cu.ac.jp/~haruko/

「かねごん」には
http://www.ritsumei.ac.jp/se/~rs006978/

にします。


あとは、最後の一行の「Back」に「index.html」へのリンクを張ると、page4の作成は終了です。

最終的なソースの例