|
★無料SEO対策ツールで検索エンジン最適化&アクセスアップ
※初心者でも無料でホームページが作成可能 ★FC2 無料ホームページ スペース ※商用利用やアフィリエイト広告の設置制限なく携帯サイトにも対応 ★無料で使える容量無制限レンタルサーバー ※独自のCGI（ホームページを演出するプログラム）設置可能 ★初心者でも安心、容量無制限の格安レンタルサーバー ※月200円＋容量無制限＋初期設定費用無し！ブログも作成可能 |
|
■中高年のためのパソコン講座 - ブログに挑戦してみよう！
 | ▼教育テレビ ※放 送； 毎週火曜日 午後10時00分〜10時25分 ※再放送； 翌週火曜日 午後 0時30分〜 0時55分 ▼ＢＳ2 放送 ※放 送； 毎週土曜日 午前 5時30分〜 5時55分 ◎この番組のテキストの詳細を見る ・ ブログに挑戦してみよう! 日本放送出版協会 |
「ブログ」とは、簡単に自分のホームページがつくれて、発信できる場のようなもの。特別な知識がなくても、誰もがインターネットで日々の思いや、気づいたこと、撮った写真や描いた絵など、作品や日記を世界の人に向けて発信することができるのです。たくさんの人がブログを通じて、趣味を広げたり、毎日をいきいき過ごして元気になれたらいいなぁと思います。さあ、今回も一緒に楽しく挑戦していきましょう！
▼番組スケジュール
第1回 ブログって何？ 放送 6月 6日（火）
第2回 ブログをはじめよう！ 放送 6月13日（火）
第3回 覚えておきたいマナーとルール 放送 6月20日（火）
第4回 写真だって掲載できる！ 放送 6月27日（火）
第5回 手描きの絵も活用しよう 放送 7月 4日（火）
第6回 楽しいテクニックを覚えよう 放送 7月11日（火）
第7回 ブログをどんどん更新しよう！ 放送 7月18日（火）
第8回 自分らしいブログをつくろう 放送 7月25日（火）
第9回 達人に学ぼう！ 放送 8月 1日（火）
※講師；佐々木 博 ※進行；小林 綾子
●特別番組やスポーツ番組などで、放送変更、休止することがあります。
●テキストと番組では、一部内容が異なることがあります。
◆スタイルシート（CSS）の指定方法
スタイルシートには、「インライン要素」（前後で改行されない）と、「ブロック要素」（前後で改行される）があります。
※代表的なタグ <SPAN> <DIV>
◆全ページのタグにスタイルを指定するには
全ページのタグにスタイルを指定するには、<HEAD>〜</HEAD>の間に以下のように表記します。
<HTML>
<HEAD>
<STYLE TYPE="text/css">
<!--
P { color:red; } // <P>で囲まれた中の文字は赤色に指定するという意味です。
-->
</STYLE>
</HEAD>
◆エレメントの属性を一度に指定する
セミコロン（ ; ）で区切って、エレメントに対して複数の属性値を指定することができます。最後の属性値のセミコロンは省略可能
※記載例； H3 {color : red ; background : yellow ; font-weight : bold}
◆クラス指定をする
タグ名に関係なくクラス名を指定することでスタイルを指定する事ができます。
※記載例；
.size30 { width : 30%; color : #008800; background-color : #ccffff; border : 1px solid #5555AA }
<H1 class="size30">これはsize30クラスです。</H1>
<P class="size30">これもsize30クラスです。</P>
◆定義済みクラスの指定をする
A要素とP要素にはいくつかの定義済みクラスを指定することができます。定義済みクラスはピリオド( . )ではなくコロン( : )で指定します。
A:link { color:green; } /* 通常のリンクの状態 */
A:visited { color:blue; } /* 読み込み済みリンクの状態 */
A:active { color:pink; } /* クリックされた瞬間のリンクの状態 */
A:hover { color:red; } /* マウスをその上に乗せた時のスタイル IEのみ */
P:first-line { color:red; } /* 最初の1行を赤い字に指定する */
P:first-letter { font-size:20px; } /* 最初の1文字を20pxに指定する */
/* first-lineと、first-letterは、IE3.0, NN4.0では正常に表示されません */
◆スタイルシートを外部ファイルで定義する
スタイルシートの定義部分を外部ファイルとして読み込む事ができます。
<HEAD>
<TITLE>Style Sheet Test</TITLE>
<LINK REL=STYLESHEET TYPE="text/css" HREF="http://www.css.com/style.css">
</HEAD>
Microsoft社もNetscape社もバージョン4.0から「ダイナミックHTML」をサポートしました。
「画像にマウスが乗ったら震わせる」とか、「ツリー形式で表示されるメニュー」などです。
今まで Java や Shockwave などを必要としていた動的なページを HTML だけで実現しようというものです。しかし、「ダイナミックHTML」という用語は同じなのですが、Netscape社とMicrosoft社ではその表記方法や表現状況が違うものが多くあります。
◎Internet ExplorerのダイナミックHTML
Internet Explorer 5 の「ダイナミックHTML」は以下の技術から構成されます。
詳細情報は、「http://msdn.microsoft.com/workshop/default.asp」を参照してください。
- JScript/VBScript
- Microsoft版のJavaScriptであるJScriptと、Visual BASICに似たVBScriptを用いて、テキストの色や大きさ、さらにはテキスト自身まで、スクリプトを用いてダイナミックに変更することができるため、いろいろなことができます。
（→サンプル） - ポジショニング
- W3Cが標準化を進める仕様（まだ草案の段階）で、ドキュメント中のオブジェクトの位置を指定します。NNの<LAYER>による指定よりも利用範囲は広いです。
（→サンプル） - その他
- IE4.0はこれらの他にもいろいろな機能をサポートしています。
画像をWebに取り入れることが出来ると、見栄えがぐっと良くなる事は事実ですが画像をWebで使用する際にいくつか注意点があります。
※本当にその画像が必要か？
※ファイルサイズ
まず「本当にその画像が必要か？」というのは、その画像を使うことによってデザイン上どんなプラスをもたらすのか、テキストだけでも表現できる情報を提供するだけではないか、など画像を使う理由をしっかり自覚しましょうということです。
次の「ファイルサイズ」に関しては、画像ファイル自体の大きさを考慮してください。画像ファイルの大きさが小さければ小さいほど、ページの転送時間は短くて済みます。ですから画像を使用する際には、出来る限りファイルサイズを小さくするようにしましょう。
HTMLドキュメントは、あなたがドキュメントを置いたサーバからそのドキュメントを見る人のコンピュータまで実際に転送されます。ですから、画像を含んだドキュメントはテキストだけのものより転送に要する時間が長くかかります。また、その転送速度も見る人の環境によってまちまちです。中には、低速なネットワークに接続しているため、１ページを表示するのに何分もかけるのを嫌がる人もいるのです。
画像を使用する際には以上のことを十分検討した上で、使用するようにして下さい。
画像を入手する事が出来たら、あとはWebで表示させるだけです。
画像を表示させるにはHTMLで以下のように記述します。
<IMG SRC="画像までのパス" alt="画像の説明文">
SRC属性では、aaaのところで貼り込みたい画像ファイルのパス名指定します。例えば、image.gif というファイルを張り込む場合、画像ファイルが、ページのあるファイルと同じディレクトリにあれば、
<IMG SRC="image.gif"> また、上にあれば、 <IMG SRC="../image.gif">
のように指定します。画像ファイルのパス指定は絶対パス、相対パスのどちらでも指定できます。パス指定については「絶対パス・相対パスについて」を参照下さい。
使用例；<IMG SRC="../new.gif" alt="NEW!">（相対パスによる指定）
WWW（インターネット）では、どのようなファイル形式の画像ファイルでも扱えるわけではありません。画像ファイルというのは、HTMLドキュメントのように単純なテキストのみで記述されたテキストファイルよりも、そのファイル自身の持つ情報量が多いので、WWWで扱う際にはその画像を圧縮してファイルサイズを小さくしてから、WWWで使用します。
WWWで扱うことのできるイメージには、GIFやJPEG、PNG、BMPなどがあります。
■どうやって画像ファイルを入手するか
WWWではGIFやJPEGなどのファイル形式の画像ファイルを扱うことが出来ると書きましたが、どうやってそのようなイメージファイルを入手するのでしょうか？その方法としては、
- 自分で描く
- スキャナーで読み込む
- デジタルカメラで撮影したものを使う
- 市販のWeb作成用クリップアート集を購入して使用する
- Web上で入手する
などがあります。自分で描いたりスキャナーで読み込んだりする際には自分でファイル形式を変換しなくてはなりませんが、市販のクリップアート集等を用いる場合はすでにファイル形式をGIFやJPEGに変換してあることが多いので簡単に利用することが出来ます。
それでは、公開の手順を紹介します。まず最初にしなければいけないのは、公開用のディレクトリにファイルを転送してあげることです。それでは、ftp（HTMLファイルやimageファイルを転送するためのソフト)をひらいて、みなさん各自のホストにログインしてください。
- ディレクトリを作る
では公開用のファイルを転送します。多くのサーバでは公開用ディレクトリの名前はpublic_htmlです。
これを、自分のホームディレクトリ（ログインしたときにいるディレクトリ）と言います。 - パーミッションの設定をする
次に、そのディレクトリに対して外部からのアクセスの許可を出さなければなりません。パーミッションの設定方法はftpソフトにより異なりますので、ftpソフトの説明を参照してください。。
public_htmlのパーミッションは755に設定します。
ここで、この設定についての説明をしておきます。この755というのは、自分にはrwx（読み込み(read)、書き込み(write)、実行(execute)）、グループとすべてのユーザには、r-x（読み込み、実行）の権限を与えたことになります。
その理由は、自分以外のユーザにはファイルの内容を見ることと、ディレクトリへの進入権（ディレクトリは実行ビット、 x、を立てておかないと「cdコマンド」（change directory）で移動することは出来ません）を与えることによって、 自分にだけ、内容の変更を許し、他人には情報の公開だけを許可するためです。 少し、遠回りな表現をしましたが、よくわからない人はそういうものだと思っておいてください。
以上のようにサーバに公開用ディレクトリを用意したら、次に、作成したHTMLドキュメントをサーバに転送します。
- FTPを起動、ログインする
プロバイダで与えられたログインネームとパスワードを入力して下さい。
先のftpソフトの設定で設定済みの場合は、直に入れるはずです。 - public_htmlに移動する。
ログインに成功したら、先ほど作成した公開用のディレクトリpublic_htmlに移動します。
- ローカルのディレクトリをHTMLドキュメントが保存されているディレクトリ（フォルダ）に移動する
上の手続きでは、転送先のサーバにおいてHTMLドキュメントを保存しておく公開用ディレクトリ（public_html）に移動しました。 今度は自分のローカルのコンピュータで、HTMLドキュメントが保存してあるディレクトリ（フォルダ）に移動します。 ローカルフォルダは保存してあるところによって違います。みなさんの環境に合わせてその部分は変えて下さい。
- ファイルを転送する
いよいよHTMLドキュメントをサーバに転送します。
今までの作業はわかりにくいのですが、転送するのはいたって簡単です。以下のように入力して下さい。
ファイルを転送したら、そのファイルのパーミッションを設定します。先程と同じようにpublic_htmlに移動して下さい
転送したHTMLドキュメントのファイルは、自分は読み込みと書き込み、その他の人は、読み込みのみの許可でいいので、パーミッションは 644を与えれば良いです。
これで設定は、終了しました。実際には、存在するファイルすべてに、パーミッションの設定をしてやる必要があります。ディレクトリには755、ファイルには、644です。
※注意；サーバーの仕様によっては、パーミッションが異なる場合もありますので、事前に必ず確認をしてください。
HTMLドキュメント（ホームページ、Webサイト）をインターネット上で公開するためには HTMLの書き方だけでなく、それを「WWWサーバ」に転送し、いくつかの設定をしなければなりません。それでは「WWWサーバ」とはどういうものなのでしょうか。
■WWWサーバ
WWWサーバとは、ネットワークに接続されたマシン上で稼働し、 Webブラウザが接続してきて要求を出してくるのを待ちかまえているプログラムのことです。WWWサーバはたいていの場合UNIXという OS(Operating System)上で動いています。
■OS(Operating System)
OSとはOperating Systemの略で、コンピュータのハードウェア（ハードディスクやCD-ROMドライブなど）の管理をしたりアプリケーションソフト（ExcelやNetscapeやWordなど）の起動や制御を行うコンピュータの中核をなす基本ソフトウェアのことです。
OSには様々な種類があり、有名なものでは以下のようなものがあります。
※Windows NT
※Windows 95 or 98
※Windows 2000
※Windows xp
※Mac OS
※UNIX（の中にもたくさん種類があります）
■UNIX
UNIXとはAT&Tという会社で開発され、拡張性に富み、好みに合わせて変更を加えやすいため、大学や研究機関などで広く普及しました。インターネットは、もともと研究のために始まったものなのでだいたいのところにおいてその研究にはUNIXが使われていて、今現在も大学や商用プロバイダのサーバにおいては UNIXが使われています。
UNIXというOSの特徴は大まかに言って以下のようなものです
※個人一人だけで使うのではなく、複数の人が同時に使うことが出来る
※ネットワークで接続されていることが前提とされている
※GUI(Graphical User Interface)__マウスを用いて視覚的に操作する方法__でない。
※つまりいろいろなコマンドを打ち込むことによって作業する
HTMLドキュメント（ホームページ、Webサイト）をインターネット上で公開するためには HTMLの書き方だけでなく、それを「WWWサーバ」に転送し、いくつかの設定をしなければなりません。それでは「WWWサーバ」とはどういうものなのでしょうか。
■WWWサーバ
■OS(Operating System)
OSには様々な種類があり、有名なものでは以下のようなものがあります。
・Windows NT
・Windows 95 or 98
・Windows 2000
・Windows xp
・Mac OS
・UNIX （の中にもたくさん種類があります）
■UNIX
UNIXというOSの特徴は大まかに言って以下のようなものです
* 個人一人だけで使うのではなく、複数の人が同時に使うことが出来る
* ネットワークで接続されていることが前提とされている
* GUI(Graphical User Interface)__マウスを用いて視覚的に操作する方法__でない。
つまりいろいろなコマンドを打ち込むことによって作業する
HTMLには標準でブラウザのウィンドウ幅だけ罫線を引くタグが用意されています。この罫線は節が変わる時やタイトルと本文を分ける場合などに用いられ、<HR>タグを使用します。
↓ <HR> ↓■改行 <BR>
HTML文書は改行を明示的に指定しなければなりません。HTML文書で明示的に改行するには <BR> タグを用います。 改行は行間に余分なスペースを入れずに強制的に改行を行います。この<BR>タグは書いた回数だけ改行されます。
２行分改行<BR><BR> １行分改行<BR> 改行後の文章
２行分改行
１行分改行
改行後の文章
関連タグ ： 文字の整形・装飾
HTML 3.0のタグとして、フォントの大きさを指定するタグとして、フォントの サイズを大きくする<BIG>タグと、フォントのサイズを小さくする <SMALL>タグがサポートされました。フォントの大きさを変更するテキ ストを開始タグと終了タグで囲みます。なお、<BIG>、 <SMALL>タグは入れ子にすることが可能です。
<UL> <LI> Normal Font <LI> <BIG>Big Font</BIG> <LI> <SMALL>small font</SMALL> <LI> <BIG>Big <BIG>BIG <BIG>FONT</BIG></BIG></BIG> <LI> <SMALL>small <SMALL>small font</SMALL></SMALL> <LI> <BIG>Big Font <SMALL>Small font</SMALL></BIG> <LI> <SMALL>small Font <BIG>Big font</BIG></SMALL> </UL>
- Normal Font
- Big Font
- small font
- Big BIG FONT
- small small font
- Big Font Small font
- small Font Big font
関連タグ ： 文字の整形・装飾
色は#RRGGBB の16進数で赤緑青の三原色を指定 するか、色の名称を指定します。
| <FONT COLOR="#FF0000">#FF0000のテキスト</FONT> | #FF0000のテキスト |
| <FONT COLOR="#00FF00">#00FF00のテキスト</FONT> | #00FF00のテキスト |
| <FONT COLOR="#0000FF">#0000FFのテキスト</FONT> | #0000FFのテキスト |
| <FONT COLOR="Red">赤色のテキスト</FONT> | 赤色のテキスト |
| <FONT COLOR="Green">緑色のテキスト</FONT> | 緑色のテキスト |
| <FONT COLOR="Blue">青色のテキスト</FONT> | 青色のテキスト |
関連タグ ： 文字の整形・装飾
<FONT> タグはフォントサイズを変更する場合に用います。サイズの有効な範囲は1〜7で指定します。デフォルトフォントサイズは3です。また、サイズに+または-を指定し、直前のフォントサイズの差分(+/-)で指定することもできます。
| □ <FONT SIZE=1>Font Size 1</FONT> | Font Size 1 |
| □ <FONT SIZE=2>Font Size 2</FONT> | Font Size 2 |
| □ <FONT SIZE=3>Font Size 3</FONT> | Font Size 3 |
| □ <FONT SIZE=4>Font Size 4</FONT> | Font Size 4 |
| □ <FONT SIZE=5>Font Size 5</FONT> | Font Size 5 |
| □ <FONT SIZE=6>Font Size 6</FONT> | Font Size 6 |
| □ <FONT SIZE=7>Font Size 7</FONT> | Font Size7 |
■フォントの重ね指定
<I><TT><FONT SIZE=4><B>italic fixed bold text of size 4</B></FONT></TT></I>
italic fixed bold text of size 4
|
<FONT SIZE=+2>T</FONT>HE <FONT SIZE=+2>F</FONT>ONT <FONT SIZE=+2>S</FONT>IZE <FONT SIZE=+2>(5</FONT> SIZE <FONT SIZE=+2>)</FONT> | THEFONTSIZE(5 SIZE) |
|
<FONT SIZE=-2>か</FONT> <FONT SIZE=-1>ん</FONT> <FONT SIZE=+1>た</FONT> <FONT SIZE=+2>ん</FONT> <FONT SIZE=+3>H</FONT> <FONT SIZE=+2>T</FONT> <FONT SIZE=+1>M</FONT> <FONT SIZE=-1>L</FONT> | かんたんHTML |
関連タグ ： 文字の整形・装飾
HTMLには明示的にフォントスタイルを指定する方法もあります。 文字スタイルタグは開始タグと終了タグを持っています。次の4つのタグが あります。ただしいくつかのタグはブラウザによっては表示されないこともありますのであまり多用しないようにしましょう。また、フォントスタイルは入れ子にする(複合フォント)こともできますが、これもブラウザによってはサポートしていない場合があります。
| □ <B>：ボールド体 (太文字) | 太文字 |
| □ <I>：イタリック体 (斜体) | 斜体文字 |
| □ <TT>：タイプライタ体 | タイプライタ文字 |
| □ <U>：アンダーライン(下線付) | 下線付文字 |
| □ <STRIKE> または <S>：取消し線 |
|
| □ <DEL>：削除テキスト |
|
| □ <SUP>：肩付き文字 | 肩付き肩付き |
| □ <SUB>：下付き文字 | 下付き下付き |
■複合フォント
<B><I>アンダーライン付太文字<I><B> アンダーライン付太文字
関連タグ ： 文字の整形・装飾
リストは入れ子にすることができます。但し、入れ子は3レベルまでしかできないので注意して下さい。
どのリストも入れ子は可能で、異なるリストを入れ子しても構いません。
| 書式 | 実行結果 |
|---|---|
|
|
|
関連タグ ： 文字の整形・装飾
dl は Definition List（定義リスト）の略です。
<dl>〜</dl> の間に、<dt>で定義する用語を、<dd>で用語の説明を行います
<dl>
<dt>リスト要素 dl</dt>
<dd>dl は Definition List（定義リスト）の略</dd>
<dt>リスト要素 dt dd</dt>
<dd>dt；定義する用語を表示</dd>
<dd>dd；用語の説明を表示</dd>
</dl>
- リスト要素 dl
- dl は Definition List（定義リスト）の略
- リスト要素 dt dd
- dt；定義する用語を表示
- dd；用語の説明を表示
■固有属性 compact
compact 属性を指定すると、項目名が短い場合、説明が自動的に項目名と同じ行に表示されるようになります。
- 固有属性 compact
- リストを極力コンパクトな形式で表示
- dl
- 固有属性 compact を指定すると、このように表示されます
<dl compact>
<dt>固有属性 compact</dt>
<dd>リストを極力コンパクトな形式で表示</dd>
<dt>dl</dt>
<dd>固有属性 compact を指定すると、このように表示されます</dd>
</dl>
項目名を目立たせたい場合は、スタイルシートを用いると便利です。
例えば、<head>〜</head> の間に次のように指定することにより、項目名を太字で、前の行と 指定したスペースを空けて表示することができます。
<style type="text/css">
<!--
DT { margin-top: 10px; font-weight: bold; }
-->
</style>
◎ブラウザ表示例
- font-weight: bold;
- 項目名を太字で表示
- margin-top: 10px;
- 前の行と 指定したスペースを空けて表示
関連タグ ： 文字の整形・装飾
ul は Unordered List（順序の無いリスト）の略。リストの各項目は li で記述します
※属性
type；項目番号のタイプを指定
disc：黒丸
circle：白丸
square：四角
<ul>
<li>リスト要素 ul（順序の無いリスト）
<li>リストの各項目は li で記述
<li>デフォルトでは disc：黒丸 で表示
</ul>
<ul type="disc">
<li>リスト要素 ul（順序の無いリスト）
<li>type属性に「 type="disc"」を指定
</ul>
<ul type="circle">
<li>リスト要素 ul（順序の無いリスト）
<li>type属性に「 type="circle"」を指定
</ul>
<ul type="square">
<li>リスト要素 ul（順序の無いリスト）
<li>type属性に「 type="square"」を指定
</ul>
- リスト要素 ul（順序の無いリスト）
- リストの各項目は li で記述
- デフォルトでは disc：黒丸 で表示
- リスト要素 ul（順序の無いリスト）
- type属性に「 type="disc"」を指定
- リスト要素 ul（順序の無いリスト）
- type属性に「 type="circle"」を指定
- リスト要素 ul（順序の無いリスト）
- type属性に「 type="square"」を指定
■リストマークに画像を使用する
- リストマークに画像を使用する
- スタイルシートは下記参照
<style type="text/css">
<!--
ul {
list-style:none;
padding: 0px;
margin: 0px;
}
ul li {
padding:0px 2px 0px 12px;
margin: 5px 0px 5px 0px;
background:url(../image.gif) no-repeat top left;
}
-->
</style>
関連タグ ： 文字の整形・装飾
番号付リストは1から順番の番号付のリストが作られます。 ol は Ordered List（順序のあるリスト）の略。
番号付リストは、<OL>〜</OL>で構成されます。リストアイテムのタグは<LI>を使用します。
※属性
start；項目番号の開始番号を指定
type；項目番号のタイプを指定
1 - 1, 2, 3, 4, 5, ..
a - a, b, c, d, e, ..
A - A, B, C, D, E, ...
i - i, ii, iii, iv, v, ...
I - I, II, III, IV, V, ...
<ol>
<li>リスト要素 ol（順序のあるリスト）
<li>リストの各項目は li で記述
<li>デフォルトでは英数字で表示
</ol>
<ol type="a">
<li>リスト要素 ol（順序のあるリスト）
<li>type属性に「type="a"」を指定
</ol>
<ol type="A">
<li>リスト要素 ol（順序のあるリスト）
<li>type属性に「type="A"」を指定
</ol>
<ol type="i">
<li>リスト要素 ol（順序のあるリスト）
<li>type属性に「type="i"」を指定
</ol>
<ol type="I" start="3">
<li>リスト要素 ol（順序のあるリスト）
<li>type属性に「type="I"」を指定し、start属性に「start="3"」を指定
</ol>
- リスト要素 ol（順序のあるリスト）
- リストの各項目は li で記述
- デフォルトでは英数字で表示
- リスト要素 ol（順序のあるリスト）
- type属性に「type="a"」を指定
- リスト要素 ol（順序のあるリスト）
- type属性に「type="A"」を指定
- リスト要素 ol（順序のあるリスト）
- type属性に「type="i"」を指定
- リスト要素 ol（順序のあるリスト）
- type属性に「type="I"」を指定し、start属性に「start="3"」を指定
関連タグ ： 文字の整形・装飾
リンクを作成する上でのいくつかの注意事項をあげてみます。
これは、SEO対策のうえでも非常に重要な項目ですので特に気をつけて下さい。
※リンクテキストをあまり長くしない
※曖昧なリンクを作らない
※リンク先があることを確認する
初めの「リンクテキストをあまり長くしないこと」というのは、Webにおいてリンクテキストの長さには制限がないことから来ています。制限がないためにリンクテキストはいくらでも長くすることが出来ます。しかしリンクテキストは「リンクの作成」でも、すでに説明しましたが、そこがリンクであることを示すために何らかの形で強調されます。ですからあまりに長い部分をリンクテキストにしてしまうとドキュメント全体が見づらくなってしまうのです。
「曖昧なリンクを作らない」とは、そのリンクによってどこを参照するのか読み手が分からないようなリンクテキストでリンクを作るべきではないと言うことです。リンクテキストを読んでそれがなんであるか分かるように書くようにします。ですから「ここ」等という文字をリンクテキストに使うことは避けるべきなのです。
「リンク先があることを確認する」というのは、リンクした先にそのドキュメントがあることを確認した上でリンクを作成するようにすると言うことです。そのリンク先が自分で作成する予定のもので、まだ完成していないのであればそこにはまだリンクを作らずに、そのドキュメントができてから初めてリンクを作るようにします。
■絶対パス・相対パスについて
HREF属性においてどのようにしてリンク先を指定するかについて説明します。リンク先のURLを完全に指定するには、プロトコル名、サーバ名およびパス名も含めたファイル名を指定しなくてはなりません。その指定方法には｢相対パスによる指定｣と｢絶対パスによる指定｣の２種類あります。｢相対パスによる指定｣は、現在の文書の位置を基準としたファイルの相対的な位置を指定する事です。 index.htmlのようにファイル名のみを指定していると、相対パスを使っていることになります。（相対パスは、URLのhttp://などを省略したURLと考えられます）。
この場合ブラウザは、現在の文書が入っているディレクトリの中でファイルを探します。そのディレクトリの中に指定されたファイルがなければ、ファイルを見つけることはできません。以下に相対パスを使った指定の方法とその解釈についての例をあげます。
| パス名 | 意味 |
|---|---|
| HREF="test.htm" | test.htmが現在のドキュメントと同じディレクトリ内に存在する |
| HREF="abc/test.htm" | 現在のドキュメントと同じディレクトリにabcというディレクトリがあり、そのabcというディレクトリにtest.htmが存在する |
| HREF="../abc/test.htm" | 現在のドキュメントの一つ上のディレクトリにabcというディレクトリがあり、そのabcというディレクトリにtest.htmが存在する |
| HREF="../../test.htm" | 現在のドキュメントの二つ上のディレクトリにtest.htmが存在する |
｢絶対パス｣は、最上位レベルのディレクトリから、ファイルの位置を指定するものです。完全なURLを指定するには、絶対パスを使います。すなわち、プロトコル名(Webページであればhttp:)から始まり、//www.を書き、その後ろにサーバ名、そしてスラッシュ（/)ではじまる絶対パス指定のファイル名が続きます（例えば、http://www.yahoo.co.jp/index.htmlのようになります）。
それぞれのディレクトリは、/で区切ります。URLを間違えると、ファイルを見つけることはできません。ディレクトリの名前に変更があれば、文書のなかに書かれているパスも変更する必要があります。
相対パスと絶対パスのどちらを用いるか
自分で作成したHTMLドキュメント同士をリンクさせるときには「相対パス」を利用して指定して下さい。というのは、絶対パスで指定してしまうと、あるディレクトリの名前を変更したりドキュメントを置いているサーバを変えたりした場合に全てのリンクのHREF属性を書き直さなくてはならないからです。
絶対パスで指定した方が簡単ではあるのですが、自分で作成したドキュメント同士でリンクを作成する際には相対パスを用いた方がのちのち自分のサイトを管理する上で楽になります。
また自分のサーバ以外のマシンなどにリンクを貼りたい場合、つまり有名なサイトや友人のサイトなどにリンクを貼りたいという場合にはは絶対パスでそのURLを全て指定しないと、リンクすることが出来ません。
なおWebのURLでは大文字と小文字が区別されますので、注意してください。
HTMLドキュメントでリンクを作成するために使用するタグは <A> タグです。このタグは"Anchor"日本語で言えば"錨"という意味になります。つまり錨を打って他のドキュメントにリンクをすると言うことです。
この <A> タグは前回までの単純なタグとは違って、リンクに関する情報（属性）を指定するためにやや複雑な書き方をします。具体例を示してそれを説明します。
<A HREF="http://weblog29.blog31.fc2.com/">インターネット サービス情報</A>
まず初めの部分<A HREF="http://weblog29.blog31.fc2.com/">でアンカーであることを示した後にHREFという属性でこのリンクが示すファイル名またはURLを示します。AとHREF(Hypertext REFerenceの意味)の間に一つスペースを置きリンク先のファイル名かURLをダブルクォート"で囲みます。
URLとはUniform Resource Locatorの略語で、インターネットのサービス・ファイルの所在地の表記法のことで、画像と情報／資源がインターネット上でどこに存在するか、つまり宛先(住所)を表すものです。
URLはリンク先の資源が、どのようなプロトコル（規格）であるかをまず示します。最もよく使われるURLの形式は"http"です。これはWWWサーバがネットワーク上にドキュメントを送り出すときに使われるプロトコルで、多くのホームページではこの "http"でURLが始まっています。
２番目の「インターネット サービス情報」の部分はブラウザで表示させたときにリンクであることを示すリンクテキストになります。そしてそれが分かるようにように下線が引かれたり赤や青で表示されたりというように強調された文字で表示され、そこをクリックすることによってHREFで指定されたドキュメントへジャンプします。
最後の部分ではこのアンカータグを閉じています。閉じるタグを記述しないとこれ以降の部分が全てリンクテキストとみなされてしまいますので注意が必要です。
実際に上に書いたリンクを実行すると以下のようになります。
インターネット サービス情報
HTMLのドキュメントを書くには、Windowsならばメモ帳やワードパッド、MacintoshならばSimpleTextなどのテキストエディタがあれば十分です。一つ注意してもらいたいのは、HTMLファイルを保存する時には、常にテキスト形式でしなくてはいけないことに注意してください。
■HTMLファイルの保存方法
HTMLファイルはテキスト形式で保存しなくてはいけないのは前述しましたが、このときファイル名の最後に.html または.htmという拡張子（最後のピリオドより後の部分）をつけてください。そうすれば、HTMLのブラウザの多くは、ファイルの拡張子を見てそれがHTMLのファイルか単純なテキストファイルかを判断します。
HTMLの構造
HTMLには３種類の｢ドキュメント構造タグ｣があり、これらを使ってドキュメントの全体的な構造を記述します。
⇒ 「HTMLの構造」の続きはこちら！
見出し・段落・コメント
<Hn>タグ(Header)はそのページの見出しや小見出しを示すために使われます。見出しのレベルには６レベルあり、nのところをそれぞれ１〜６まで変えることによってそれぞれ違うレベルの見出しを示します。
⇒ 「見出し・段落・コメント」の続きはこちら！
HTMLには３種類の｢ドキュメント構造タグ｣があり、これらを使ってドキュメントの全体的な構造を記述します。実際に画面上に影響を与えることはほとんどありませんが、このタグのおかげでどのようなマシンでブラウズしても問題がおこらないクロスプラットフォーム性を実現しています。
<HTML></HTML>
すべてのHTMLドキュメントに表れる最初のドキュメント構造タグは、<HTML>タグです。このタグはこのファイルの内容がHTML言語で書かれていることを示すものです。
全てのHTMLのドキュメントは、下記のように<HTML>タグで囲まれていなければなりません。
<HEAD></HEAD>
<HEAD>タグに囲まれている部分はその文章におけるヘッダ（頭書き）です。
ドキュメントの<HEAD>部分には、ドキュメントのタイトル、制作者の情報、日付などブラウザに現れない情報を記入することが出来ます。ヘッダ内には、けっしてドキュメントの本文は書きません。
<TITLE></TITLE>
すべてのHTMLドキュメントはタイトル（表題）を持ち、<TITLE>タグを使って指定します。
<TITLE>タグはヘッダの中に書きます。
このタグによって記述された内容は多くの場合ブラウザのウインドウのタイトルバーに表示されます。
ドキュメントのタイトルを２つ以上書くことはできません。また、タイトルにはテキスト以外のもの（他のタグやリンクなど）を含むことはできません。
<BODY></BODY>
<HEAD>タグに続いて記述し、HTMLドキュメントのその他の要素すべて（テキスト、リンク、画像、絵など）は<BODY>タグに囲まれます。つまり<BODY>タグに囲まれた部分が本文と言う意味です。
またこの<BODY>タグにはオプションがありそれを指定することでそのページの基本的なレイアウト（背景の色、テキストの色とかリンクの色など）を決めることができます。
◎ <Hn></Hn> 見出し
<Hn>タグ(Header)はそのページの見出しや小見出しを示すために使われます。
見出しのレベルには６レベルあり、nのところをそれぞれ１〜６まで変えることによってそれぞれ違うレベルの見出しを示します。
タグを終了するときに開始したときのレベルと違うレベルで終了してしまうと、修了タグが無いとみなされ表示がおかしくなってしまいます。
この見出しタグを用いると大きい文字や太い文字などで他のテキストよりも目立つように表現されます。
しかし太字で表示させたり、目立たせたりする目的でこのタグを使うべきではありません。
検索エンジンでは、このタグでマークアップされた語句や文章はそのページ内の中でも重要であるとみなし、重要視します。
そのページ内で強調したい部分（本文内で重要と思われる文章や語句）に使うようにしましょう。
※全ての見出しレベルは下記のようになります。
<H1>H1の見出し</H1>
<H2>H2の見出し</H2>
<H3>H3の見出し</H3>
<H4>H4の見出し</H4>
<h5>H5の見出し</h5>
<H6>H6の見出し</H6>
<Hn>タグを使う時の注意点；文章の中でレベル順に<Hn>タグを用いる。
<H4>タグのあとで<H1>タグを使ったりしてはいけません。
フォントサイズを変更するために、<FONT>タグがあります。
視覚的にサイズを変えるのならば、<FONT>タグを使用して下さい。
◎ <P> 段落
<P>タグ(Paragraph)は段落を表し改行すると同時に空行を１行挿入します。
このタグにはHTMLのバージョンによって多少違いがあるので、それぞれ説明します。
その違いというのは<P>タグを閉じるか閉じないかです。
一番古いHTML1.0においては<P>タグは「パラグラフの（初めではなく）終わり」を示すタグと定義していたので、パラグラフの終わるところに<P>と記述していました。
一方HTML2.0以降においては<P>タグは</P>と対で表すように変更されました。
つまり<P>がパラグラフ開始を表し</P>がパラグラフの終わりを示します。
■ HTMLとは
HTMLとはSGML(Simple Generalized Markup Language)という言語から派生した言語です。 SGMLとはマークアップ（写植工やタイピストにテキストがどのように印刷されるか、またはレイアウトされるかを指示するためにつけた注釈のこと）された電子テキスト記述するための国際規格のことで、情報を損失せずに且つ一つのハードウェア・ソフトウェアに依存することなくあらゆる環境で同じように表示することが出来るように開発されたものです。
実際には、SGMLでは文章の特定の部分に関して「以下は段落である」あるいは「ここで箇条書きは終わり」と言ったように文章中におけるその部分の役割・構造を伝えます。そのようなSGMLからの流れをHTMLは引き継いでいるのです。
それでは具体的にHTMLはどのように文章における構造を指定するのかというと、テキストファイルに、そのページでどう表示されるべきかを記述する（マークアップする） ｢タグ｣と呼ばれるものを使って指定します。
｢タグ｣とは、｢<｣と｢>｣という記号で囲まれたコードのことです。そのようにしてHTMLタグを付け加えると、表示用ソフトウェア (Netscape NavigatorやInternet Exploreなどのブラウザと呼ばれるソフト）が、その構造指定を解釈して、ネットワークを介して、あるいはローカルで（自分のコンピュータで）そのファイルを表示してくれ、見ることが出来ます。ほとんどのHTMLタグは一般的に次のように記述します。
<タグ名> 表現したい文字列 </タグ名>
繰り返しになりますが、タグはそれぞれのタグで囲まれるプレーンなテキスト部分（上の例では「表現したい文字列」の部分）に論理的な意味、文中での役割をコンピュータに教えてあげ、そしてブラウザはそのタグが示した文中での役割をを読み取ってHTMLファイルを画面上に構成します。HTMLファイルは、World Wide Webで見ることができる文書だと思ってください。HTMLの長所をまとめると以下のようになります。
・HTMLファイル自体はテキストだけからなるので、
ファイルサイズが小さくネットワーク上ですばやく転送できる
・表示装置に依存しない、つまりコンピュータがなんであっても
ブラウザがあればHTMLドキュメントを表示できる
・覚えるべきコマンドの数が少なく、習得しやすい
■ WWW・インターネットについて
ホームページを作る前にまず、WWW（World Wide Web）とはどういうものかについて知っておく必要があります。
WWWとは、文章を本のように順番に読むのではなく、あちらこちらへ飛び回りながら自分の興味のある、読みたいものだけを拾い読みしていくハイパーテキストと言う概念に基づき、いままで電子テキストをネットワーク上で配布するために使われていた SGML（後述）の精神を受け継ぎ、そしてテキストだけではなく画像や音声などを扱えるようにした1989年にスイスにある CERN（ヨーロッパ素粒子物理学研究所）が開発したインターネット上の情報システムです。
インターネット（Internet）とは1970年代に米国防省高等研究開発局（DAPA）が始めたアーパネット（ARPANET）を源流とする企業や学術施設・商用ネットワーク（プロバイダInternet Service Provider:ISP）などを相互に結んだ世界最大の「ネットワークのネットワーク」のことをいいます。
誤解されがちなことですが「インターネット」という単一のネットワークは存在しません。TCP/IPという共通の言語によって様々なネットワーク間のコミュニケーションが可能になったものがインターネットなのです。
そのようなインターネットに接続し、表示用のソフトウェアであるブラウザを使って表示されるWWWサーバ上で情報ページの中心となっているページのことをホームページと言います。そのページを記述するための言語はHTML言語と呼ばれます。
■ HTMLを覚える前に考えるべき事
Webを使ってどんなことを表現したいか、どういう人に見てもらいたいか等をおぼろげながらも考えておいてから学んでいく方が、ただやみくもに HTMLの書き方を覚えて行くより効率良く学ぶことができますし、またそういう目標設定をしてから作るという習慣を付けておけば、先々実際に自分でホームページを作っていくときにも効率よく、内容の濃いホームページを作っていくことができます。
HTMLの書き方をマスターしたらデザインやレイアウトなどさらにもっと進んだ計画を立てていけるようになりますが、現時点では、ホームページを作る目的を考えておく程度でもかまいません。
「無料ホームページ作成講座ブログ」をご覧になりながら少しずつステップアップして頂けたら幸いです。