前回までで、
<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>の
あいだに、リンクする文字を書くわけです。
次の章
メニューに戻る