HTML文書の作り方(3)


前回までで、


<html>

<title>
S太郎の創作折紙
</title>

<body>
S太郎の創作折紙。略して、オレンジ。
</body>
</html>


という中身のファイルを作りました。
このコーナーでは、とにかく折紙の作品を
展示するページを作るのが目的なので、
実は、ここまでできたら、あとは

<body>
</body>

の間(つまり本文)の内容を充実させる
だけです。

具体的には、

・写真を貼る
・リンクを張る

の二つができたら、とりあえずは目標達成です。


・画像を貼る


まず、画像ファイルを用意します。
(前章の写真のデータでよい)
例えば、そのファイルのファイル名が、

gazou.jpg

だったとします。
ちなみに、
この「.jpg」というのは、拡張子といって、
データの保存の形式を示しています。
デジカメで取り込んだ方は、大抵「.jpg」
もしくは、「.jpeg」になっていると思います。
そうでない場合は、画像編集ソフトで、
「.jpeg」形式に変換してください。
(やり方はソフトによって違うので、割愛)
その「gazou.jpg」を、いま作っている
「memo.html」と同じフォルダに保存します。
同じフォルダでなくても、画像表示は
できますが、ファイルの場所の指定が
面倒なので、始めのうちは、全ての
ファイルを同じフォルダに置くようにします。

できたら、「memo.html」の、

<body>
</body>

のあいだに、

<img src="gazou.jpg">

という1行を追加します。


<html>

<title>
S太郎の創作折紙
</title>

<body>

S太郎の創作折紙。略して、オレンジ。
<img src="gazou.jpg">

</body>
</html>


そこまでできたら、例によって、
保存してから表示してみましょう。
上手く画像が表示できたでしょうか。
いま書いた、

<img src="gazou.jpg">

の、「""」のあいだに、画像ファイルの
名前を指定するわけです。

リンクを張る


次はリンクです。

リンクを張るためには、リンク先のページ
が必要です。ですから、HTMLファイルを
もう一つ作りましょう。

できたファイル(仮に「memo2.html」とする)は、
今までと同じフォルダに 保存です。

次に、やはり「memo.html」の
<body>
</body>

のあいだに、

<a href="memo2.html"></a>

という1行を追加します。
さらに、入力を日本語に切り替えて、
<a href="memo2.html">と</a>
のあいだに、「リンク」と書きます。



<html>

<title>
S太郎の創作折紙
</title>

<body>

S太郎の創作折紙。略して、オレンジ。

<a href="memo2.html">
リンク
</a>

<img src="gazou.jpg">

</body>
</html>


ここまでできたら、保存して表示してみましょう。
リンクの文字部分にリンクが張られている はずです。

今書いた、

<a href="memo2.html">
リンク
</a>

の、「""」のところに、リンク先を指定し、
<a href="memo2.html">と</a>の
あいだに、リンクする文字を書くわけです。


次の章
メニューに戻る