下記、画像実験用に空きスペースくを作りました。

メモ帳で作るWEBページリンク編・画像編２

画像挿入２

画像の入手法

クリップアートからの場合

第１段階

Wordを起動します。

Meの場合：メニューバー[挿入(I)]をクリック→[図(p)]をポイント→[クリップアート(P)]をクリック→ [好きな画像を選択」して右クリックします。
出てきたショーカット・メニューから[プロパティー]を選択→ [サイズ]タブをクリック。
[画像のサイズ]を読み取ってメモしておきます。
XPの場合：メニューバー[挿入(I)]をクリック→[図(p)]をポイント→[クリップアート(P)]をクリック→作業フォオルダ内の[クリップの整理]をクリック→ [Officeコレクション]をクリックして[好きな画像を選択」→[オンマウス]で画像サイズが表示されます。メモします。
両者共画像上で右クリックし、現れたショートカット・メニューから[コピー]を選択してクリップボードに保存しておきます。

第２段階

ペイントを使用します。

[スタート]をクリック[アクセサリー]をポイント→「ペイント]をクリックします。
[変形(I)]メニューから、[キャンバスの色とサイズ(A)]をクリックします。
現れたダイアログに先ほど読み取った幅、高さを記入します。
[編集(E)]をクリック→[貼り付け(P)]をクリック→余分な白画面なしに画像が貼り付けられます。
[フアイル]をクリック→[名前を付けて保存]をクリック。このときフアイルの種類に[ .jpg]を選択し保存場所を指定して完了します。
ペイントの場合画像フアイルの拡張子が[ .JPG]と大文字になります。そのままでも良いのですが将来を見透いて、私の場合は[名前の変更]で[ ,jpg]と小文字に訂正しています。

下の画像は、それで採り入れたものです。左側が[jpg]画像（16.8Kb）。中央が[png]画像(13.5Kb)　右側が[jpg]写真(6.4Kb)です。（なお、この写真は Office Online クリップアートー(何百種有)ーよりダウンロードした写真です。元画は600x397ピクセル、60Kbでしたが、ペイントで縦横30％に縮小してあります。）

湖畔の風景画です。　　教会の風景画です。　　世界の風景写真です。

ハイパーリンクとは

1965年にTed Nelson という人が提唱した概念で、「欲しい情報・文献を手元に呼び出すことができる機能」で、最初は大学・学術団体・軍事目的として、夫々のネットワーク間で用いられていたものがWorld Wide Webで一般化したものです。 HTML（HyperText Markup Language）の機能の内でも「HyperText」の名を冠する程最大の特徴です。

詳しくはこちらhtmlとはをご覧ください。

他所のWebページへジャンプする

[A]要素を使います。

要素名をアンカー（anchor）といいます。（アンカーは錨を意味し、２つのリソース（資源＝ここでは、フイアル同士）を結び付けています。[A]要素、半角スペース[href]属性で始まるのが「始点アンカー」で「終点アンカー」はHTMLフアイルになります。
必要属性に href 属性と name 属性があります。

href 属性は「リンク元アンカー（始点アンカー）」で使用し、リンク先を指定します。(hrefはHyper Referenceの略です。HTMLの冠詞に HyperText「テキストを超えた（Hyper）」があるように、「超参照」を意味しています。
name 属性の場合は、[A]要素、半角スペース[name]属性で「リンク先アンカー（終点アンカー）」で使用し、リンク元の「name 名」を指定します。（ただし、よそ様のページに記述は出来ませんので手持ちのフアイル内で、特定の行を指定するときに使用します。）
<A>タグは別名リンクタグとも言われています。タグに囲まれた文字列はボタンになります。画像にもリンクボタンを付けることができます。

href 属性を使用

他所のページへリンク

<a href="移動先WebページのURL（絶対バス）">移動先フアイル名</a>

「http://www.・・・index.html」とインターネットの「URL(住所)」全てを記述することです。
絶対バスとは：コンピュータにおけるのデータの通路のこと。バス上を行き来する信号の内容や、結び付けるものの位置によっていくつかの種類に分けられる。（アスキーデジタル用語辞典より）

同一フォルダー内の、別フアイルへのリンク

別のフアイルを[sample.html]としたとき、単にフアイルを入れれば良い。相対バスといいます。

相対バスとは：フォルダのツリー構造から、現在のフアイルとの位置関係を考えて[同列のフアイル]か [１つ上位のフアイル]か[１つ下位のフアイル]かを相対的に判断したデータの通路。

同一フォルダーに有る、フォルダに包まれたフアイルへのリンク

フアイルをサーバーのWebページスペースにアップロードする際、剥き出しでおくるか、フォルダーに包んで送るか２つの方法がありす。今ご覧のページは、[newhtml]というフォルダに包んであり、トップページの[index.html」に対して１つ下位に位置しています。
[index.html」からの案内（ナビゲート）は記述は下記になります。

トップページのコンテンツにマウスを乗せると、下段ステータスバーに絶対バスで[http://www.・・・newhtml/gazo_link.html]と表示されます。

フォルダーに包まれたフアイルから、剥き出しのフアイルへのリンク

上の場合と逆の場合です。[gazo_link.html]から[index.html]へ戻る場合です。下記になります。

<a href="../index.html">文字列</a> 　と、[ ../]を付けます。

[ ../]はフォルダの殻を破って外への意味があるそうです。

メールソフトを起動させるリンク(メール送信用)

HTML文は下記です。
<a href="mailto:address">　[address]欄にあなたのアドレスを記入します。

私のトップページの下段に<a>タグを使用して、
<a href="mailto:toyo_shimajpjp@yahoo.co.jp">ご意見ご感想のメールをお待ちしております。</a>
があります。クリックするとメールソフトが起動します。メールの宛先部分には、このアドレスで指定したメールアドレスが既に入力済みになっていますので、件名や本文を入入力するだけになります。

実例（下記をクリックしてみてください。）
ご意見ご感想のメールをお待ちしております。

▲ name 属性を使用

同一サイト内で、任意の文字列へのジャンプ

リンク元のページに「ジャンプ先のフアイル名」とそれに、くっつけて、例えば #hyper と記述します。
<a href="sample2.html#hyper">参照：＊＊＊</a>
ジャンプ先のフアイルのお目当ての文字列に、<a name="hyper">お目当ての文字列 </a>と記述します。

同一ページ（フアイル）内で任意の文字列へのジャンプ

リンク元に<a href="#inline">インライン要素一覧を参照</a>と、 #付きキーワードで文字列を挟みます。
　　　　サンプルです。インライン要素一覧を参照
リンク先に<a name="inline">インライン要素一覧</a>と、キーワードのみで文字列を挟みます。

画像にリンクを貼り付ける

急遽、Wordオートシェイブで３っつのボタンを作りました。

左矢印　　上矢印　　右矢印

「前のページに戻る」には

上述の「同一フォルダー内の、別フアイルへのリンク」使用します。

<a href="sample.html">文字列</a>　です。

前のページのフアイル名は、[page_gazo,html]ですので、[sample.html]と入れ替えました。また、ボタン（画像）のフアイル名は[mae.png]です。

文字列と書いてあるところに、前ページで学習の「<img>タグを使用する。」の基本のタグ文
<img src="画像フアイル名" alt="画像を説明するテキスト。">
を挿入すれば前のぺーじに戻ります。HTML文は下記になります。<img>タグの場合、枠線が表示されますので、border="0"を付け足します。

実例１です。(私のページ内での例ですが、応用してみてください。）

「トップへ戻る」には

私の場合「フォルダーに包まれたフアイルから、剥き出しのフアイルへのリンク」を使用しました。

<a href="../index.html">文字列</a> 　と、[ ../]を付けます。

なお、トップのフアイル名は[index.html]でそのままです。ボタン名は[top.png]になります。HTML文は、

<a href="../index.html">文字列</a> になります。

文字列と書いてあるところに、前ページで学習の「<img>タグを使用する。」の基本のタグ文
<img src="画像フアイル名" border="0" alt="画像を説明するテキスト。">
を挿入すれば前のぺーじに戻ります。HTML文は下記になります。

<a href="../index.html"><img src="top.png" border="0" alt="トップへの矢印です。"></a>になります。

実例２です。(私のページ内での例ですが、応用してみてください。）

「次のページへ」進む

今度は他所さまのサイトへリンクさせました。非常にためになるサイトです。

トップにあります「他所のページへリンク」

<a href="移動先WebページのURL（絶対バス）">移動先フアイル名</a> です。

この後に、<img>タグを使用の基本のタグ文

<img src="画像フアイル名" border="0" alt="画像を説明するテキスト。">
を追記するだけです。なお、移動先WebページのURLは、[http://www.ne.jp/asahi/minazuki/bakera/html/book/]です。画像のフアイル名は[tugi.png]です。HTML文は

<a href="http://www.ne.jp/asahi/minazuki/bakera/html/book"><img src="tugi.png" border="0" alt="のけぞるサイトへの矢印です。"></a>になります。

実例３です。(外部サイトの「のけぞる」ページでHTMLの非常識を鋭く突いています。）

注釈：上のHTML文例では、「移動先フアイル名」が書いてありません。（属性[alt]で記述した、”のけぞるサイトへの矢印です。 ”は画像が見られない環境の方への説明文です。この説明文を削除しても立派に繋がります。）画像が「移動先フアイル名」に取って替っているのです。即ち画像＝文字列なのです。「１つの画像は１文字の大きなものだ。」と解釈すると全てが理解できます。
なお、[alt]の説明文は必須となっていますが、文章で説明があり誰もが理解できる場合には・・・alt="">でも良いことになっています。

３つ並べました。

小画像から大画像へりンクする方式

小さいサンプル画像を表示しておいて、気に入ったら大写しで見てください。という場合に使用します。

サンプル画像と大写しの画像の２種類用意します。
下の小さい画像にリンクを設定します。(なお、この画像の場合、枠線があっても良いと判断し、border="5"としました。)

(１)画像挿入のHTML文は、<img src="fukei_sho.jpg" width="180" height="120" border="5">

(２)リンクのHTML文は、<a href="sample.html">文字列</a>

大きい画像[fukei.jpg]は[(2)]の「<a href=・・」の次にいれます。文字列の所に[(1)]の「<img src=の小さい画像」を入れます。

リンクのHTML文は、下記になります。コピーして[sample.html]に貼り付け、お手持ちの画像２枚のフアイル名に直してご使用ください。
<a href="fukei.jpg" width="600" height="397"><img src="fukei_sho.jpg" width="180" height="120" border="5" alt="世界の風景写真です">

実例

画像を少しずらせて重ねます。

style 属性を使用します。

画像２枚用意します。style 属性を使用する場合、記述はスタイルシート記述になります。

構文：
<img src="画像フアイル名" style="position: absolute; （前面用には：top: 130px; left:140px;とか記述する）z-index: 数値">

奥の方の画像は[z-index: 1]。トップからのピクセル距離は[top:5px」。前面の画像は[z-index: 2]。topに続き、left からのピクセル距離適宜試してみてください。

実例：
下記をコピーして、「メモ帳で作るWEBページ１」のトップで作ったsample.htmlフアイルのソース body 下に貼り付けてみてださい。

おことわり：表示する場所はどこにでも（此処でも）選べるのですが、Ｙ座標のピクセルを合わせるのが大変で、途中項目を増やすと座標位置が狂ってきますので、body 直下を選びました。お手持ちの画像２枚（３枚以上でも可）とすり替えてご使用ください。

画像をページ内の任意の場所に挿入する。

　出来ないことはないのですが、問題が山積しています。（１）これより上には行を増やすことはできません。（２）更に困ることは、見る人の環境設定によって位置がずれることです。（文字サイズが標準の中で丁度の位置でに設定して有りますが、画面左側にエクスプローラやお気に入りフレームが有ると300～400px位上になります。）結局一人よがりの設定でしかありません。（３）このまま、印刷する場合には有効かも知れませんが、また、プリンタの問題が残ります。このような方法が有り何かに利用できないか？というだけ、ご記憶願います。（４）<table>タグを使用するのが正解のようです。

style 属性を使用します。

スタイルシート属性の[position、top、left]を使います。

「値」に夫々absolute、**px、**pxを使います。（記述はソースをご覧ください。）

画面topからのピクセル距離（[7230px]とし）画面leftからのピクセル距離（[490px]とし）下の水平線は横幅「800ピクセル」と[50px]の２つを用意しました。これを基準に「画面上、上からの位置を凡そ判断して数値を決め、２～３度修正すれば、挿入場所が掴めると思います。
下図は水平線の中央下に合わせた例です。

(画像がずれたりすると、他の文字が見ずらくなりますのでサイズを小さくしてあります。
「お気に入り」表示を消して、[表示]メニュー[文字サイズ]を[大]にしてご覧下さい。「下図はその証明です。」が実際の位置の図です。)

下図はその証明です。

参考図 --------------------------------------------

------------------------------------------------------までが図です。

HTMLに関する参考文献

内田　明氏の「タグと要素の違い」の引用

要素はタグではない。例えば「Pタグ」といった具合に、要素のことをタグという人もいる。しかし、要素は要素であり、タグはタグである(開始タグであれ終了タグであれ)、ということを覚えていただきたい。例えば、開始HEADタグも終了HEADタグもマーク付け上不在であり得るが、それでもなおHEAD要素は常に存在する。

矢野啓介氏著

参照⇒HTMLにおける「段落」をめぐって

水無月ばけら氏著

参照⇒水無月ばけらの HTMLリファレンス

続きます。

DTDについて

現在世界で最も使用されていると思われる「HTML4.01」では、使用する要素や属性の種類に応じて以下の３種類の「DTD（Document Type Definitionの略）」が利用可能です。

HTML4.01 Strict DTD
廃止予定の要素や属性とフレーム関連を除く、すべての要素と属性が定義されています。
HTML4.01 Transitional DTD
フレーム関連を除いて、廃止予定の要素や属性を含んだすべての要素と属性が定義されています。
HTML4.01 Frameset DTD
フレーム関連と廃止予定の要素や属性を含むすべての要素と属性が定義されています。

第２回 body 要素のDTD

□HTML4.01 Transitional DTD より

△要素宣言

要素宣言の記述は下記の方法です。

<!ELEMENT 要素型名 - - (内容モデル) 　-- コメント -->

<!--===== Document Body ===（HTML4.01 Transitional DTD より===========-->

<!ELEMENT BODY O O (%flow;)* +(INS|DEL) -- document body -->

解説
「<」で開始します。
キーワード『!ELEMENT』で宣言されている『要素型』は[body]であることを表します。
[O(Omitの略)]とその後の[O]は、[開始タグ]と[終了タグ]が省略可能なことを示しています。

この要素型の（内容モデル）の『(%flow;)*』」で、子要素として０個以上の %flow; を持ちます。（下記、出現・順序参照）


(...)     　 ：括弧内の...で示す要素をグループ化します。
要素A        ：要素A が１回のみ出現しなければなりません。
要素A+       ：要素A は１回以上出現しなければなりません。
要素A?       ：要素A が現れないか、1回のみ出現する。
要素A*       ：要素A が現れないか、任意回数出現しても良い。
+(要素A)     ：要素A はその子孫にわたって出現して良い。
-(要素A)     ：要素A はその子孫にわたって出現してはなりません。
要素A | 要素B    ：要素A と要素B のどちらかが出現しなければなりません。双方同時に出現してはいけません。
要素A , 要素B    ：要素A と要素B がこの順序で出現しなければなりません。
要素A & 要素B    ：要素A と要素B が必要だが、任意の順序で出現して良い。

%flow; の内容は、ブロック要素とインライン要素を網羅しています。
<!ENTITY % flow "%block; | %inline;">
ブロック要素一覧
<!ENTITY % block
     "  P | DL | DIV  | CENTER |
      NOSCRIPT | NOFRAMES  | BLOCKQUOTE | FORM | ISINDEX | HR |
      TABLE    | FIELDSET  | ADDRESS">
<!ENTITY % heading "  H1 | H2 |  H3 | H4  | H5 | H6 ">
<!ENTITY % list "     UL | OL | DIR | MENU ">
<!ENTITY % preformatted "PRE">

キーワード!ENTITYの属性
<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
    
インライン要素一覧
<!ENTITY % fontstyle
   "      TT  | I | B | U | S | STRIKE | BIG  | SMALL">
<!ENTITY % phrase " EM | STRONG | DFN  | CODE |
                   SAMP | KBD |    VAR | CITE | ABBR | ACRONYM">
<!ENTITY % special
   "   A    | IMG | APPLET | OBJECT | FONT | BASEFONT  | BR    | SCRIPT |
    MAP | Q | SUB | SUP    | SPAN   | BDO  | IFRAME">
<!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">

この要素型の（内容モデル）『+(INS|DEL)』」で要素として０個以上のINS 要素や DEL 要素を持ちます。
「-- 　--」間はコメントで、body 要素型の使用法を解説しています。DTDのコメントは参考情報に過ぎません。
「>」で終了します。

△属性定義

キーワード『!ATTLIST』が属性定義。続いて属性を定義する要素の名前[BODY]と書かれてます。
以下属性のリストです。

属性リスト

キーワード『%attrs;』は属性リストの「～を見よ」参照です。（%はDTD前段で予め定義済の[%(半角空行)attrs;]項を参照せよの意味です。）

パラメータ実体参照。キーワードは『!ENTITY』

<!ENTITY % attrs "%coreattrs; %i18n; %events">の属性については、前ページをご覧ください。

その外属性

　onload      %Script;       #IMPLIED　読み込みを終了時のイベント
  onunload    %Script;       #IMPLIED　文書除去時点のイベント
  background  %URI;          #IMPLIED　背景画像のURI名

  %bodycolors; 
<!ENTITY % bodycolors
 "bgcolor     %Color;        #IMPLIED　背景色
  text        %Color;        #IMPLIED　文字色
  link        %Color;        #IMPLIED　未リンク状態の文字色
  vlink       %Color;        #IMPLIED　既にリンク済みの文字色
  alink       %Color;        #IMPLIED　リンクをクリックした際の文字色 
  ">
となっています。

□参考：HTML4.01 Strict DTD　による「body 要素」

<!--===== Document Body =====HTML4.01 Strict DTD より=================-->

<!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body -->
<!ATTLIST BODY
  %attrs;                              -- %coreattrs, %i18n, %events --
  onload          %Script;   #IMPLIED  -- the document has been loaded --
  onunload        %Script;   #IMPLIED  -- the document has been removed --
  >
改正点
１．body要素の直下に「インラインレベル要素」([a]とか[img]等) が使用できません。
２．background 属性 　　　　　　　　　　　　　　　           が使用できません。  
３．%bodycolors; （text、link、vlink、alink各属性）          が使用できません。
４．<!ENTITY % fontstyleの「TT | I | B | U | S | STRIKE | BIG | SMALL」
　　　　　　　　　　　　　　　　　　　                 各要素が使用できません。

第３回Ａ要素のDTD

□HTML4.01 Transitional DTD より

△要素宣言

要素宣言の記述は下記の方法です。

<!ELEMENT 要素型名 - - (内容モデル) 　-- コメント -->

<!--================== The Anchor Element ================================-->

<!ENTITY % Shape "(rect|circle|poly|default)">
<!ENTITY % Coords "CDATA" -- comma separated list of lengths -->

<!ELEMENT A - - (%inline;)* -(A)       -- anchor -->
<!ATTLIST A
  %attrs;                              -- %coreattrs, %i18n, %events --
  charset     %Charset;      #IMPLIED  -- char encoding of linked resource --
  type        %ContentType;  #IMPLIED  -- advisory content type --
  name        CDATA          #IMPLIED  -- named link end --
  href        %URI;          #IMPLIED  -- URI for linked resource --
  hreflang    %LanguageCode; #IMPLIED  -- language code --
  target      %FrameTarget;  #IMPLIED  -- render in this frame --
  rel         %LinkTypes;    #IMPLIED  -- forward link types --
  rev         %LinkTypes;    #IMPLIED  -- reverse link types --
  accesskey   %Character;    #IMPLIED  -- accessibility key character --
  shape       %Shape;        rect      -- for use with client-side image maps --
  coords      %Coords;       #IMPLIED  -- for use with client-side image maps --
  tabindex    NUMBER         #IMPLIED  -- position in tabbing order --
  onfocus     %Script;       #IMPLIED  -- the element got the focus --
  onblur      %Script;       #IMPLIED  -- the element lost the focus --
  >
となっています。

解説

<!ELEMENT A - - (%inline;)* -(A) -- anchor -->
[ELEMENT]：要素型[は[A]要素である。[-]：開始タグ、[-]：終了タグ必須。[(%inline;)*]：内容モデルは、他の「インライン要素(%inline;)」を０以上の回数出現（記述）しても良いが、[-(A)]：インライン要素である[A]要素はその子孫にわたって出現してはなりません。（即ち、入れ子は禁止の意味になります。）
<!ATTLIST A　：　[!ATTLIST]：属性定義。続いて属性を定義する要素の名前[A]です。
%attrs;　（実体名attrsのパラメータ実体参照）　-- %coreattrs, %i18n, %events --
[%attrs;]を[%]と[;]で挟まれた[attrs]を「実体名」といいます。DTD前段で、既に定義済の属性リストの「～を見よ」参照です。このことを、『パラメータ実体定義』といい、キーワード[!ENTITY ]で始まり下記のような構文になります。
<!ENTITY %***"***">
％記号に続いてパラメータ実体名，そして"その定義である実体文"。この定義実体文は[" "]でくくられます。それ以降，その名前によって参照されるパラメータは[" "]でくくられた文字列に展開されます。
分かり易い例をあげてみますと、[heading]があります。「HTML 4.01 Specification 22.Transitional Document Type Definition」の[heading]項目で「実体名」 (%heading;)をクリックすると、

<ENTITY % heading "H1|H2|H3|H4|H5|H6">と表示されます。今度は、% とheading の間に半角スペースが開いていることに注目ください。

[%attrs;]をクリックすると、メモ書きにある%coreattrs, %i18n, %eventsの３っつの属性が展開されます。（３っつの属性に就いては前ページをご覧ください。）
charset %Charset; #IMPLIED　：　charset以下直接記述の属性です。「#IMPLIED」は省略可能で、省略された場合はアプリケーションに依存することになります。ちなみに、「#REQUIRED」は省略不可です。


  type        %ContentType;  #IMPLIED　　（リンク先のMIMEタイプ指定）
  name        CDATA          #IMPLIED　　（終点アンカーの識別名）
  href        %URI;          #IMPLIED　　（リンクボタンを作り、リンク先のURIを指定 ）
  hreflang    %LanguageCode; #IMPLIED　　（href属性で示されるリンク先の言語を指定）
  target      %FrameTarget;  #IMPLIED　　（リンク先ページの表示ウィンドウを指定）
  rel         %LinkTypes;    #IMPLIED　　（リンクする側からみた文書間の関係 順方向）
  rev         %LinkTypes;    #IMPLIED  　（リンク先からみた文書間の関係 逆方向）
  accesskey   %Character;    #IMPLIED　　（任意の１文字でショートカット・キーを割り当）
  shape       %Shape;        rect　　　　（クライアントサイド・イメージマップの領域の形を指定）
     [shape]と[coords]については、こちら「イメージマップ」を参照ください。
  coords      %Coords;       #IMPLIED 　 （クライアントサイド・イメージマップの領域の座標を指定）
  tabindex    NUMBER         #IMPLIED　　（Tabキーによる移動順位）
  onfocus     %Script;       #IMPLIED　　（要素がフォーカスを受けた時のイベント）
  onblur      %Script;       #IMPLIED

トップへ戻るスタイルシート目次へ戻る
 メモ帳で作るWEBページ画像編へ戻るメモ帳で作るWEB-P画像編３＆テーブルへ進む

メモ帳で作るWEBページ リンク編・画像編２

画像挿入２

画像の入手法

クリップアートからの場合

第１段階

第２段階

ハイパーリンクとは

他所のWebページへジャンプする

[A]要素を使います。

href 属性を使用

他所のページへリンク

同一フォルダー内の、別フアイルへのリンク

同一フォルダーに有る、フォルダに包まれたフアイルへのリンク

フォルダーに包まれたフアイルから、剥き出しのフアイルへのリンク

メールソフトを起動させるリンク(メール送信用)

▲ name 属性を使用

同一サイト内で、任意の文字列へのジャンプ

同一ページ（フアイル）内で任意の文字列へのジャンプ

画像にリンクを貼り付ける

「前のページに戻る」には

上述の「同一フォルダー内の、別フアイルへのリンク」使用します。

実例 １です。(私のページ内での例ですが、応用してみてください。）

「トップへ戻る」には

私の場合「フォルダーに包まれたフアイルから、剥き出しのフアイルへのリンク」を使用しました。

実例 ２です。(私のページ内での例ですが、応用してみてください。）

「次のページへ」進む

今度は他所さまのサイトへリンクさせました。非常にためになるサイトです。

実例 ３です。(外部サイトの「のけぞる」ページでHTMLの非常識を鋭く突いています。）

３つ並べました。

小画像から大画像へりンクする方式

実例

画像を少しずらせて重ねます。

style 属性を使用します。

画像をページ内の任意の場所に挿入する。

style 属性を使用します。

スタイルシート属性の[position、top、left]を使います。

HTMLに関する参考文献

内田 明氏の「タグと要素の違い」の引用

矢野啓介氏著

水無月ばけら氏著

DTDについて

第２回 body 要素のDTD

□HTML4.01 Transitional DTD より

△要素宣言

<!ELEMENT 要素型名 - - (内容モデル) -- コメント -->

ブロック要素一覧

キーワード!ENTITYの属性

インライン要素一覧

△属性定義

属性リスト

パラメータ実体参照。キーワードは『!ENTITY』

その外属性

□参考：HTML4.01 Strict DTD による「body 要素」

第３回 Ａ要素のDTD

□HTML4.01 Transitional DTD より

△要素宣言

<!ELEMENT 要素型名 - - (内容モデル) -- コメント -->

メモ帳で作るWEBページリンク編・画像編２

実例１です。(私のページ内での例ですが、応用してみてください。）

実例２です。(私のページ内での例ですが、応用してみてください。）

実例３です。(外部サイトの「のけぞる」ページでHTMLの非常識を鋭く突いています。）

内田　明氏の「タグと要素の違い」の引用

<!ELEMENT 要素型名 - - (内容モデル) 　-- コメント -->

□参考：HTML4.01 Strict DTD　による「body 要素」

第３回Ａ要素のDTD

<!ELEMENT 要素型名 - - (内容モデル) 　-- コメント -->