dokidoki
logo
はじめに
★ インターネットとWWW
入門の前に
★ HTMLについて
〜ファイル名と拡張子〜
〜タグの記述方法とルール〜
★ 用意するもの
★ 主な操作の手順
入門
LESSON 1 文字を表示させる
2 簡単にレイアウトする
3 文字をデザインする
4 色を設定する
5 画像を表示させる
6 リンクする
7 テーブル（表）を作成する
8 フレームを作る
★ おまけ
公開する
★ 用意するもの
★ FFFTPの使い方
★ Fetchの使い方
索引
★ タグ辞典
★ カラー見本表
HTML入門
Lesson5　画像を表示させる
下の画像をダウンロードしてください。
HTML例文---Lesson5-1　画像を表示させる
<HTML>
<HEAD>
<TITLE>
旅行の思い出
</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFCC" TEXT="#333333" LINK="#0000FF" VLINK="#9933FF" ALINK="#CC33FF">
<CENTER><H2>私の旅行の思い出サイト</H2></CENTER>
<HR>
<IMG SRC="chikyugi.gif" ALT="地球儀" WIDTH="110" HEIGHT="150"><BR>
<FONT SIZE="4" COLOR="#0066CC"><B>最近行ったところ</B></FONT><BR>
<FONT SIZE="3" COLOR="#FF0000"><I>NEW</I> </FONT><FONT SIZE="2">愛媛県の朝倉村に、蛍を見に行きました。</FONT><BR>
<P>
<FONT SIZE="4" COLOR="#0066CC">海外</FONT><BR>
<FONT SIZE="2">海外に行くたびに、視野が広がり人生観がかわりますね。</FONT>
<P>
<FONT SIZE="4" COLOR="#0066CC">国内</FONT><BR>
<FONT SIZE="2">国内旅行は温泉付きにこだわります。</FONT>

</BODY>
</HTML>
解説
画像を表示させるには、<IMG SRC="ファイル名" ALT="画像の説明など" WIDTH="イメージの幅" HEIGHT="イメージの高さ">となります。
WIDTHとHEIGHTは省略したときは、表示させる画像のサイズと同じサイズで表示されますが、ブラウザの動作が遅くなることがあります。
HTML例文---Lesson5-2　となりに文字を配置する
<HTML>
<HEAD>
<TITLE>
旅行の思い出
</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFCC" TEXT="#333333" LINK="#0000FF" VLINK="#9933FF" ALINK="#CC33FF">
<CENTER><H2>私の旅行の思い出サイト</H2></CENTER>
<HR>
<IMG SRC="chikyugi.gif" ALT="地球儀" WIDTH="110" HEIGHT="150" ALIGN="left">
<FONT SIZE="4" COLOR="#0066CC"><B>最近行ったところ</B></FONT><BR>
<FONT SIZE="3" COLOR="#FF0000"><I>NEW</I> </FONT><FONT SIZE="2">愛媛県の朝倉村に、蛍を見に行きました。</FONT><BR>
<P>
<FONT SIZE="4" COLOR="#0066CC">海外</FONT><BR>
<FONT SIZE="2">海外に行くたびに、視野が広がり人生観がかわりますね。</FONT>
<P>
<FONT SIZE="4" COLOR="#0066CC">国内</FONT><BR>
<FONT SIZE="2">国内旅行は温泉付きにこだわります。</FONT>

</BODY>
</HTML>
解説
画像と文字を横に並べる時はALIGN属性を使います。LEFTを指定すると画像が文字列の左側に表示されます。
パスの設定について
パス設定とは画像の貼り付けや、リンク設定の時にファイルの居場所を指定する方法の事で、「絶対パス」と「相対パス」があります。「パス」は英語の「PATH」で「小道」や「経路」という意味です。ファイルの住所ともいえます。

絶対パス…画像やリンクしたいファイルがあるURLを指定します。
例）http://www.dokidoki.ne.jp

相対パス…HTMLファイルがあるフォルダ（ディレクトリ）から見て、ファイルがどこにあるかを相対的に指定します。フォルダの階層を１つ上に上がりたい時（フォルダから出たい時）は「..」と指定します。フォルダの階層を１つ入りたい時は「/」を指定します。
例）image/photo.gif　../image/image.gif

copyright