著 作 権 について 1 このレポートは 著 作 権 法 で 保 護 されている 著 作 物 です 2 このレポートの 著 作 権 はパトモスに 属 します 3 著 作 権 者 の 許 可 なく 無 断 でこのレポートの 全 部 又 は 一 部 をいかなる 手 段 においても コピー 編 集 加 工

これからプロになる 人 が 最 初 に 知 っておきたい HTML 7 個 こんな HTML の 基 礎 知 らない 方 がよかったかも パトモス

著 作 権 について 1 このレポートは 著 作 権 法 で 保 護 されている 著 作 物 です 2 このレポートの 著 作 権 はパトモスに 属 します 3 著 作 権 者 の 許 可 なく 無 断 でこのレポートの 全 部 又 は 一 部 をいかなる 手 段 においても コピー 編 集 加 工 転 載 流 用 転 売 等 することを 禁 じます 4 このレポートに 書 かれた 情 報 は 作 成 時 点 での 著 者 の 見 解 等 です 著 者 は 事 前 許 可 を 得 ずに 誤 りの 訂 正 情 報 の 最 新 化 見 解 の 変 更 等 を 行 う 権 利 を 有 します 5 このレポートの 作 成 には 万 全 を 期 しておりますが 万 一 誤 り 不 正 確 な 情 報 等 がありましても 著 者 パートナー 等 の 業 務 提 携 者 は 一 切 の 責 任 を 負 わない ことをご 了 承 願 います 6 このレポートの 利 用 により 生 じたいかなる 結 果 につきましても 著 者 パートナー 等 の 業 務 提 携 者 は 一 切 の 責 任 を 負 わないことをご 了 承 願 います URL と PDF 閲 覧 ソフト 1 このレポートに 記 載 されている URL はクリックできます 2 PDF 形 式 の 文 書 を 読 む 場 合 には 閲 覧 ソフト Adobe Reader が 必 要 です お 持 ちでない 場 合 は 下 記 アイコンをクリックして 最 新 の Adobe Reader を ダウンロードしてください( 無 料 ) 2/26

Contents はじめまして...4 1 普 段 から 使 っている HTML...6 2 タグの 大 原 則...7 3 利 用 頻 度 が 高 い HTML 7 個...10 1 文 字 を 強 調 する...10 2 文 字 サイズを 指 定 する...14 3 文 字 に 色 をつける...15 4 改 行 する...17 5 リンクを 張 る/ハイパーリンク...17 6 1つのまとまりにする...18 7 画 像 を 表 示 する...19 4 終 わりに 1 円 もかけずに HTML に 強 くなる 方 法...21 パトモスの 初 心 者 必 読 マニュアル シリーズ...25 発 行 者 情 報...26 [アドビリーダーで 読 む 場 合 ] 本 レポートを 読 む 場 合 画 像 を 鮮 明 に 見 るには 縮 小 率 75%をオススメします 画 像 がボヤける 人 はこれで 読 んでみてください 3/26

はじめまして このたびは パトモスの 無 料 レポート 初 心 者 必 読 マニュアル 第 6 弾! これからプロになる 人 が 最 初 に 知 っておきたい HTML 7 個 こんな HTML の 基 礎 知 らない 方 がよかったかも をダウンロードしていただき ありがとうございます このレポートが アフィリエイトを 始 めたばかりのあなたに 少 しでも お 役 に 立 てれば うれしい 限 りです 最 小 限 の HTML だけで 十 分 です あなたはすでに HTML という 言 葉 を 聞 いたことがあると 思 います そうですね ブログやサイトを 作 るときに 使 われる 言 語 です グーグルやインターネット エクスプローラなどのブラウザでホームページを 表 示 させるためには HTML 言 語 で 書 かれていなければなりません これは 全 世 界 共 通 のルールです 4/26

さて アフィリエイトビジネスにブログ 作 成 サイト 作 成 は 絶 対 に 避 けて 通 る ことはできません 初 心 者 の 方 は 遅 かれ 早 かれブログ 作 成 に 関 わっていくことになりますが ウェブデザイナーになるわけではありませんので 専 門 的 に HTML を 学 ぶ 必 要 はありません しかし 全 然 知 らないでいるよりも 今 の 段 階 で 基 本 的 な HTML だけでも 知 って おけば ブログ 作 成 や HTML に 対 する 苦 手 意 識 が 格 段 に 少 なくなるばかりでなく 今 後 のブログ 作 業 を 進 めるにあたって 大 きな 力 になることは 間 違 いありません 月 々わずかな 収 益 で 満 足 なら 全 然 覚 える 必 要 はないでしょう しかし ゆくゆくはアフィリエイトを 大 きな 収 益 源 にしたいのでしたら 基 本 の HTML は 必 ず 学 んでおくべきです HTML はたくさんありますが 全 部 を 覚 える 必 要 はなく 必 要 最 小 限 のものだけで 十 分 です 本 レポートでは とくに 利 用 頻 度 の 高 い7つの HTML に 焦 点 を 当 てて 詳 しく 紹 介 しています たったの7 個 ですから 1 日 でマスターできるでしょう 人 によっては 1 時 間 もあれば 十 分 かもしれません 5/26

1 普 段 から 使 っている HTML 無 料 ブログでおなじみの[seesaa ブログ]や[FC2 ブログ] あなたも 使 っているかもしれませんね 実 はブログで 記 事 を 書 くときには 多 くの 人 が 意 識 しないで HTML を 使 っています 記 事 の 作 成 画 面 を 見 てみましょう [seesaa ブログ] [FC2 ブログ] このように 編 集 画 面 の 上 部 にはいろんなアイコンが 並 んでいますね 実 はこれらのアイコンが それぞれ[HTML]を 意 味 しているのです たとえば 上 のアイコンの 中 に[B]とありますね この[B]というアイコンは 文 字 が 太 いという bold(ボールド)の 頭 文 字 です たとえば あなたが 書 いている 文 章 のある 個 所 を 太 字 にしたい 強 調 したい というときには 対 象 の 文 章 用 語 などをカーソルで 選 択 してから [B]をク リックしますよね 6/26

そうすると 自 動 的 に <strong>~</strong>という HTML タグ( 記 号 符 号 ) がその 対 象 文 章 用 語 につけられます <strong> というのは 強 調 する という 意 味 の HTML タグで このタグで 挟 まれた 文 章 用 語 を 強 調 しなさいという 命 令 指 示 なのです [B]のアイコンをクリックするだけで <strong>という HTML タグが 挿 入 されます このように アイコン 操 作 だけで 自 動 的 に HTML が 記 述 されて ブログが 作 成 されるようになっていて HTML はほとんど 意 識 されることはありません これが HTML や CSS(スタイルシート)を 知 らなくても 魔 法 のようにブログが 書 けるという 正 体 なのです 2 タグの 大 原 則 HTML タグを 記 述 するときの 原 則 を 見 ておきましょう タグというのは < >~< /> という 記 号 符 号 のことです もともとは 荷 物 につける 荷 札 とか 名 札 という 意 味 なのですが これが HTML に 転 用 されて 用 語 言 語 につける 名 札 (タグ)になりました HTML(エイチ ティー エム エル)は すでにご 存 知 のように Hyper Text Markup Language といって 言 語 をマークアップします 7/26

このタグをつけることを マークアップ Markup といっているのです (1)タグは 必 ず < > という 記 号 を 使 います そして < > の 中 に 具 体 的 な 命 令 指 示 を 書 きます たとえば <strong>とか <u> <h1> というように (2)タグは < >~</> のように2つ 1 組 (セット)で 使 うのが 原 則 です ただし わずかですが 単 独 で 使 うタグもあります セットで 使 うという 原 則 は 非 常 に 重 要 で 決 して 忘 れてはいけません < > タグを 開 始 タグ </> タグを 終 了 タグといいます この 2 つで 1 セットですから うっかり</> 終 了 タグを 忘 れたりすると タグとして 認 識 されません たとえば <strong>~</strong> と 書 くべきところを <strong>~<strong> とすると /(スラッシュ)が 欠 けているため ブラウザは <strong> を 解 釈 できず したがって 強 調 という 結 果 は 表 示 されま せん /(スラッシュ)を 忘 れたりする 人 が 多 いので くれぐれも 注 意 してください 8/26

(3) 必 ず 半 角 英 数 小 文 字 で 書 く HTML や < > は 必 ず 半 角 英 数 小 文 字 で 記 述 します これは 全 世 界 共 通 の 原 則 です 1 字 でも 全 角 で 入 力 すると タグとして 認 識 されません (4)< > タグは 複 合 して 使 われることが 多 く それぞれ 対 照 になっている 1 <p><span style="font-size:10pt"> 外 国 人 対 応 改 善 </span></p> 2 <strong><span style="color:#0000ff">ブログ 作 成 </span></strong> 12ともに 次 のように 内 側 外 側 のタグはキチンと1セットになっています 1 <p> <span>~</span> </p> 2 <strong> <span>~</span> </strong> このように HTML タグは 複 合 的 に 記 述 されるため これが HTML を 複 雑 にして いる 一 因 です しかし タグの 基 本 を 理 解 しておけば 読 み 解 くことはそれほど 難 しい 作 業 ではありません (5) 単 語 と 単 語 のアキ 間 隔 は 半 角 font color div style span style a href 半 角 アキ 半 角 アキ HTML は 半 角 英 数 小 文 字 で 記 述 されますから アキも 半 角 というわけです 9/26

3 利 用 頻 度 が 高 い HTML 7 個 まず 押 さえておきたいのは 利 用 頻 度 が 高 い 次 の7 個 の HTML です 1<strong> 2<font size> 3<font color> 4<br /> 強 調 する 文 字 サイズを 指 定 する 文 字 カラーを 指 定 する 改 行 する 5<a href> ~ </a> リンクを 張 る/ハイパーリンク 6<div> ~ </div> 7<img src /> 1つのまとまりにする 画 像 を 表 示 する ほかにもたくさんありますが いまはこの7つです 説 明 は 次 のようにしています 先 ほどの<strong>タグを 例 にみておきましょう 1 文 字 を 強 調 する [HTML] <strong> ~ </strong> [ 意 味 ] ~ を 強 調 する [ 記 述 例 ] <strong> お 問 い 合 わせはこちら </strong> [ 表 示 結 果 ] お 問 い 合 わせはこちら 10/26

文 字 を 強 調 するときに 使 う[HTML]は <strong>です <strong>で 囲 んだ ~ の 部 分 を 強 調 して 太 く 表 示 せよという 命 令 指 示 です [ 記 述 例 ]というのは メモ 帳 などの テキストエディタ とか [ブログ]で 書 く 場 合 の 記 述 の 仕 方 です ブログでは seesaa ブログの リッチテキスト 画 面 とか ライブドアブログ の HTML タグ 編 集 などで HTML 編 集 をする 場 合 の 書 き 方 になります [ 表 示 結 果 ]というのは 実 際 にブラウザで 見 たときの 状 態 たとえば インターネット エクスプローラ( 以 下 I E)で 閲 覧 したときに どのように 表 示 されるかという 表 示 結 果 を 示 しています [ 記 述 例 ]をもう 少 し 具 体 的 に 説 明 しますと たとえば メモ 帳 や TeraPad(テラパッド)のような[テキストエディタ]を 使 って 文 章 を 書 くとします そして お 問 い 合 わせはこちら の 文 章 を 強 調 するために<strong>タグで 囲 んだとします 下 図 を 見 てください こんな 感 じです 11/26

そして これを I E で 見 ると 下 図 のように 表 示 されます TeraPad の <strong> タグで 囲 んだ お 問 い 合 わせはこちら が I E では お 問 い 合 わせはこちら のように 太 く 強 調 されてますね すべてブラウザは HTML タグを 解 釈 してこのように 表 示 します ブログで 記 事 を 書 く 場 合 も 仕 組 みは 同 じです たとえば seesaa ブログの 記 事 作 成 画 面 ( 通 常 エディター 画 面 )で 同 じように 記 事 を 書 き お 問 い 合 わせはこちら を 選 択 して [B]をクリックします そうするとこのように 強 調 されました こんな 感 じですね [seesaa の 通 常 エディター 画 面 ] 12/26

これを[リッチテキスト] 画 面 (HTML 画 面 )に 切 り 替 えて 見 ると 下 図 のようになっています ちゃんと<strong>タグで 囲 まれてますね [seesaa のリッチテキスト 画 面 ] そしてこれを I E で 見 ると 下 図 のように 表 示 されるわけです ( 以 下 の 説 明 では I E でパトモスのテストブログで 表 示 結 果 を 見 ることにします) [ I E で 見 た 表 示 結 果 ] 13/26

それでは 順 次 みていきましょう 2 文 字 サイズを 指 定 する [HTML] <font size= 文 字 サイズ > ~ </font> [ 意 味 ] ~ を 指 定 の 文 字 サイズにする [ 記 述 例 ] <font size= pt > ~ </font> 実 際 のブログでは 次 のように 記 述 されます <div><span style="font-size:10pt"> 案 内 板 や</span> <span style="font-size:18pt">パンフレット</span></div> <div> とか <span> タグが 書 いてありますが これはタグが 複 数 セットで 使 われるからで とくに 気 にすることはありません なお ブログによっては font-size のように 半 角 アキではなく ハイフン を 使 っている 場 合 があります [ 表 示 結 果 ] 14/26

10pt(10 ポイント)に 指 定 した 案 内 板 や が 小 さく 18pt に 指 定 した パンフレット が 大 きく 表 示 されていますね 補 足 1 サイズの 表 記 方 法 は pt(ポイント) px(ピクセル) medium(ミディアム) など ブログによっていろいろパターンがあります 2 <span style="font-size:12px"> などのタグの 中 で 使 われている = とか " " とか : などの 記 号 は 絶 対 に 省 略 してはいけません 1つでも 欠 けるとタグとして 認 識 されません 長 いタグをコピーして 使 うとき つい 見 落 としてしまいますので 要 注 意 3 文 字 に 色 をつける [HTML] <font color= #カラーコード > ~ </font> [ 意 味 ] ~ の 文 字 に 指 定 の 色 をつける 色 指 定 の 基 本 スタイルです 色 は カラーコード で 決 められて いますので それを 使 って 指 定 します [ 記 述 例 ] ブログでは 通 常 このように 記 述 されます 1 <div><span style="color:#ff0000"> 文 字 の 色 </span>を 変 えてみよう </div> 2 <div><span style="color:#008000"> 文 字 の 色 </span>を 変 えてみよう </div> 3 <div><span style="color:#0000ff"> 文 字 の 色 </span>を 変 えてみよう </div> 15/26

コード 番 号 の 前 についている # (シャープ)を 忘 れてはいけません 1が 赤 2が 緑 3が 青 の 指 定 です [ 表 示 結 果 ] いま 覚 えておくのは 次 の3 色 だけです 黒 (black) #000000 白 (white) #ffffff 青 (blue) #0000ff(リンクの 色 ) ほかの 色 は 必 要 なときに カラーコード を 調 べれば OK です [カラーコードの 一 例 ] [WEB 色 見 本 ] http://www.colordic.org/ 16/26

4 改 行 する [HTML] <br /> [ 意 味 ] 改 行 する このタグがあるところで 文 字 列 が 改 行 されます <br />タグは 単 独 で 使 い br と / の 間 隔 は 半 角 にします [ 記 述 例 ] 実 績 がなくても <br /> 実 績 がある 人 以 上 に<br />くわしく 解 説 することが 大 事 です [ 表 示 結 果 ] 5 リンクを 張 る/ハイパーリンク [HTML] <a href= リンク 先 の URL > ~ </a> [ 意 味 ] リンク 先 を 指 定 する <a>タグを 使 って 記 述 します ~ をクリックするとリンク 先 のウェブページが 開 きます リンクが 張 られると 自 動 的 に 下 線 が 引 かれます 17/26

[ 記 述 例 ] <a href="http://www.tokyodisneyresort.jp"> 東 京 ディズニーランドへようこそ </a> TDL の URL [ 表 示 結 果 ] 東 京 ディズニーランドへようこそをクリックするとホームページが 開 きます 6 1つのまとまりにする [HTML] <div> ~ </div> [ 意 味 ] 1つのまとまり <div>タグは 1つのまとまった 内 容 を 示 します ~ の 部 分 が1つのまとまった 内 容 です ひとまとまりである というだけで ほかに 特 別 な 意 味 はありません [ 記 述 例 ] <div> 東 京 五 輪 へ 外 国 人 対 応 改 善 </div> <div> 案 内 板 やパンフレットの 多 言 語 表 記 へ </div> <div>お 問 い 合 わせはこちら</div> 18/26

[ 表 示 結 果 ] 補 足 <div>タグに 似 たものに<p>タグがあります これも1つのまとまった 内 容 を 示 しますが 段 落 (paragraph パラグラフ)の ことで 文 章 の 1 ブロックを 意 味 します したがって <p> ~ </p>の 前 後 は 1 行 空 けられます 7 画 像 を 表 示 する [HTML] <img src= 画 像 の 場 所 alt= 画 像 の 説 明 テキスト /> [ 意 味 ] 画 像 を 表 示 する <img />タグは 単 独 タグです HTML はテキストデータですから 画 像 データを 持 つことが できません したがって 画 像 データを 別 途 用 意 して HTML で そのファイルを 呼 び 出 すようにします alt= 画 像 の 説 明 テキスト は 画 像 を 表 示 できないときに 代 わりに 表 示 する いわゆる 代 替 テキスト です 検 索 エンジンのクローラーは 画 像 のようなバイナリデータを 認 識 することができません 19/26

つまり 検 索 しても 画 像 は 見 つからないってことで これって SEO には 不 利 なのです 検 索 エンジンは alt で 囲 まれているテキストを 読 んで どういう 画 像 かを 読 みとりますので SEO 対 策 に 必 須 です [ 記 述 例 ] <img src="http://patmos1833.up.seesaa.net/image/efbc95e4bd9cthumbnail2.png" alt="アフィリエイト パソコン 用 語 集 " /> [ 表 示 結 果 ] 20/26

4 終 わりに 1 円 もかけずに HTML に 強 くなる 方 法 最 後 に HTML に 強 くなる 方 法 をご 紹 介 します コストは1 円 もかかりません またまた~ という 声 が 聞 こえそうですが 決 して 誇 大 表 現 ではありません HTML に 強 くなる 唯 一 の 方 法 は より 多 く HTML に 触 れることです そしてより 多 く HTML に 触 れる 方 法 は ブログを 書 くことです FC2 ブログや seesaa ブログなどの 無 料 ブログでどんどん 適 当 にテスト 記 事 を 書 いてください そしてその 記 事 を HTML 画 面 で 見 てください それを 比 較 します 記 事 を 書 く HTML を 見 る この 繰 り 返 しです 1 日 30 分 もやれば 十 分 です 1ヵ 月 もすれば 基 礎 力 は 確 実 についています ひょっとしてタッチタイピングをマスターするよりも 簡 単 かもしれません 間 違 っても 書 店 で HTML 入 門 書 を 買 って 独 学 してはダメです ほぼ 100% 挫 折 します ブログで 練 習 する これです 具 体 的 には 次 のように 練 習 します seesaa ブログでやってみましょう 21/26

1 ブログに( 適 当 に) 記 事 を 書 く 練 習 ですから 何 でもかまいません 2 適 当 にアイコンを 操 作 する たとえば[フォントサイズ]をクリックして 文 字 を[14pt]にしてみます 22/26

3 [ 通 常 エディター]をクリックして[リッチテキスト]に 切 り 替 える 4 [リッチテキスト]で HTML タグを 確 認 する [14pt]に 指 定 した[ 大 きなゴール]が HTML ではどのように 記 述 されたかを 確 認 します こういうふうに 自 分 が 書 いた 文 章 と HTML を 比 較 して どう 変 化 しているかを みるのです こういう 作 業 をいろんなアイコンで 確 かめていきます ブログを 書 くって ほとんどが 文 字 の 色 を 変 えたり サイズを 変 えたり リンクを 張 ったり 画 像 を 貼 り 付 けたりですよね つまり ブログには 最 小 限 の HTML しか 書 いていないわけです 23/26

だったら これで 練 習 すれば 最 小 限 の HTML はマスターできるというわけ ねっ 1 円 もかからないでしょ なお それでもさらにくわしく 勉 強 したい 人 は こちらのサイトがお 勧 めです 1 時 間 で 作 るホームページ http://www.shoshinsha.com/hp/ HTML タグボード とほほのWWW 入 門 http://www.dspt.net/ http://www.tohoho-web.com/www.htm 以 上 で これからプロになる 人 が 最 初 に 知 っておきたい HTML7 個 のレポートを 終 わります お 疲 れさまでした 24/26

パトモスの 初 心 者 必 読 マニュアル シリーズ このシリーズは アフィリエイト 初 心 者 のみなさん 向 けに 書 かれたものです ぜひ 身 につけておきたい 基 本 的 なスキルや 知 識 をわかりやすくまとめています 今 後 も 続 編 を 発 行 していく 予 定 ですので ご 期 待 ください 第 1 弾 超 初 心 者 なら 真 っ 先 にマスターしておきたい 画 面 キャプチャーソフト WinShot 1 度 使 ったら もう 手 放 せない 直 接 ダウンロードURL http://patmos1833.up.seesaa.net/pdf/firstreport.pdf Xam ザムからのダウンロードURL http://xam.jp/get.php?r=34300 第 2 弾 編 集 長 が 驚 いた 文 書 統 合 ソフト 最 新 版 OpenOffice をインストールしよう 初 心 者 のあなたも 楽 々レポート 作 成 の 達 人 に 変 身! 直 接 ダウンロードURL http://patmos1833.up.seesaa.net/pdf/second.pdf Xam ザムからのダウンロードURL http://xam.jp/get.php?r=34358 第 3 弾 すぐできるたった15 分 の 簡 単 作 業 で あなたのオリジナルキャラクターをデビューさせよう! 似 顔 絵 アバター みんなと 同 じじゃつまんない 直 接 ダウンロードURL http://patmos1833.up.seesaa.net/pdf/avatar.pdf メルぞうからのダウンロードURL http://mailzou.com/get.php?r=75849&m=30920 25/26

第 4 弾 全 アフィリエイターのための 無 料 レポート 編 集 の 教 科 書 あなたのレポートが 抜 群 に 読 みやすくなる7つの 編 集 ルール 直 接 ダウンロードURL http://patmos1833.up.seesaa.net/pdf/report4sec20.pdf メルぞうからのダウンロードURL http://mailzou.com/get.php?r=76813&m=30920 第 5 弾 これからプロになる 人 のためのアフィリエイト&パソコン 基 本 用 語 集 図 解 入 りでわかりやすい 直 接 ダウンロードURL http://patmos1833.up.seesaa.net/image/reportshinsei.pdf メルぞうからのダウンロードURL http://mailzou.com/get.php?r=79091&m=30920 Contents へ 発 行 者 情 報 発 行 者 名 パトモス 発 行 者 メールアドレス patmos1225@mail.com メルマガ 名 アフィリエイトで 老 後 も 月 収 50 万! 国 も 会 社 もあなたを 守 らない メルマガ 解 除 URL http://mail.os7.biz/m/xwwn 26/26