*画像を使う*・・・のつづき
2-1.タイトルロゴと写真
今度は、画像をページ内に貼り付けます。
「ななたぐのへや」のタイトルロゴと、セピア色の写真を例として解説します。
画像を貼り付けるのは、
<IMG SRC="画像ファイル名">です。
"画像ファイル名"は、さっきと同じく
相対パスで書きますよ。
また、
このタグは閉じません。
ここではタイトルロゴ画像のファイル名は「title.gif」にしてあります。みなさんは自分のファイル名に書きなおしてくださいね。
では、さっそくはりつけてみましょう！
さっきまであったタイトル文字
<H1><FONT color=red>ななたぐのへや</FONT></H1>
は
削除して、新たにタイトルロゴを貼り付けます。
（略）
<CENTER>
<IMG SRC="img/title.gif">
</CENTER>
<FONT size=5>「ななたぐのへや」</FONT>へようこそ！<BR>
初めてのホームページです。
（略）
|
では、
ブラウザで確認してみましょう！
よければ、次は写真です。写真画像のファイル名は「photoimg.gif」にしてあります。
（途中略）
<FONT size=5>「ななたぐのへや」</FONT>へようこそ！<BR>
初めてのホームページです。
<BR><BR>
<IMG SRC="img/photoimg.gif">
<A HREF="profile.html">自己紹介</A><BR>
<A HREF="diary.html">日記</A><BR>
<A HREF="bbs.html">掲示板</A><BR>
<A HREF="link.html">リンク</A><BR>
</BODY>
</HTML>
|
書けたら、
ブラウザで確認！
・・・あら。
こんなふうになっちゃった・・・↓
「日記」以下が、写真の下に行っちゃってますね。
これを回避するには、「文字の回りこみ」を設定しなければなりません。
<IMG SRC="画像名">の属性として、「
align="left"」と書いてください！
（途中略）
<FONT size=5>「ななたぐのへや」</FONT>へようこそ！<BR>
初めてのホームページです。
<BR><BR>
<IMG SRC="img/photoimg.gif" align="left">
<A HREF="profile.html">自己紹介</A><BR>
<A HREF="diary.html">日記</A><BR>
<A HREF="bbs.html">掲示板</A><BR>
<A HREF="link.html">リンク</A><BR>
</BODY>
</HTML>
|
今度はうまくいったでしょ？(^-^)
じゃあ、「align=
"right"」だったら？「align=
"center"」だったら？
ためしてみてください(^-^)
2-2.自ホームページのバナー
さっきバナーも作ったので、これも載せましょう！
※「
リンクフリー」・・・リンクを張るのにいちいち許可や連絡は必要ないですよ、という意味。
こう書いておけば、私たちが「Yahoo!JAPAN」などにリンクを張ったように、
いろんな人が私たちのホームページにリンクを張ってくれます。
テキストエディタで「link.html」を開き、以下のソースを追加してください！
<HR>は、「横線を引く」タグです。
<HTML>
<HEAD>
<TITLE>リンクのページ</TITLE>
</HEAD>
<BODY bgcolor="pink" text="purple">
<center><h1>リンク</h1></center>
<A HREF="http://www.yahoo.co.jp/">Yahoo!JAPAN</A>・・・検索サイト。<BR>
（途中略）
<BR><BR>
<CENTER>
<HR>
当ホームページはリンクフリーです。<BR>
バナーは下のものをお使いください。<BR>
リンク先は「http://（あなたのホームページURL）/」にお願いします。<BR>
<IMG src="img/banner.gif">
</CENTER>
</BODY>
</HTML>
|
※あなたのホームページURLは、１日目で申し込んだレンタルサーバーからお知らせがきていると思います。
Copyright (C) 7tag project dv
こんなふうにGO!!