はじめに
≪----　TOP　----　文　----　遊　----　先行者　----　交　----≫
≪contents≫ next≫
HTMLとは ホームページを作るのに使うものです。 基本的には、これを使ってホームページを作成していきます。 これだけ分かっていれば、十分かな？ これ以上のことは、考えなくていいです（￣▽￣） 分からなくてもできるし、実際にやっていくうちに覚わります。 小難しく考えると、無駄に構えてしまうので、気楽にいきましょう。 パソコンが壊れたりなんてしませんから。 これ、結構大事です。 以後の説明で、わからない用語や部分があっても、どんどん飛ばしていってください。 （と言っても、読まずに飛ばさないでくださいね（＾＾； 分からないところは、何が書いてあるかだけ確認しておいて、 実際に使うときに見返すと、案外簡単に理解できたりします。 ただ、私の説明の下手さが原因でわからないこともあるので、 どうしても分からなかったら、質問してください（＾＾； 用語や内容の暗記も必要ありません。忘れたら読み返せばいいだけです。 読みながら試して、分からなくなったら読み返す。 やりながら覚えるのが一番です。 コツは、とにかく、ある程度分かるようになるまで、いろいろ実験してみること、 最初っから完成品を作ろうとしないことですね。
ツール HTMLファイルを作るための、ツール（道具）を紹介します。 まずは、メモ帳。 大体、windowsなら、画面の左下のスタートってとこをクリックして、 →プログラム→アクセサリ→メモ帳 とやると出てくると思います。 （Macは……知りませんごめんなさい（汗） これを左クリックしてメモ帳を開き、白い部分にデータを書いていきます。 HTMLを書くなら、これで十分足ります。 ソフトウェアに強い人なら、各種フリーソフトを使うのもいいでしょう。 ここはこれを使ってます。 ……まぁ、そんな人は、此処見ないでも出来そうですが（＾＾； もう一つ必要なのが、できたデータを確認するのに使うブラウザです。 ブラウザというのは、ホームページ見るのにいつも使ってる奴のこと。 基本的には、今このページを見るのに使ってるもので十分でしょう。 ブラウザが違うと、ページの見え方が微妙に違ってきたりしますが、 今の時点では、そこまで気にする必要もないと思います。
HTMLファイルの扱い方 ≪HTMLファイルの作成法≫ 『HTMLファイルを作る』と聞くと、 特別な事をしないと出来ないように思ってしまうかもしれませんが、 （現に私がそうでした） そうではありません。実に簡単です。 メモ帳に、ホームページで表示させたい内容を書き込んで （どう書くかは次ページから順に説明）、 メモ帳の左上の「ファイル」をクリック、「名前を付けて保存」を選択、 好きな名前を英数字で付けて、その後に「.html」とつけて、 保存するだけです。 試しに、何も書かなくていいので、メモ帳の「ファイル」をクリックして、 「名前を付けて保存」を選択、「test.html」と名前をつけて、保存してみてください。 「test」と言う名前のHTMLファイルができたはずです。 ただ、まだ中身を書いてないので、 開いても真っ白（ブラウザによって色は違います）です。 次ページから、中身（ソース）の書き方を説明していきますので、 やりながら覚えていきましょう。 保存先は、後述の≪HTMLファイルの並べ方（リンク構造）≫を参考にしてください。 ≪HTMLファイルの閲覧法≫ いつも使っているブラウザを開いて、左上の「ファイル」をクリック、「開く」を選択し、 出てきたウインドウ内の「参照」ボタンを押して、自分の保存したファイルを選べばOKです。 （私の使ってるブラウザを参考にしているので、違ってたらすいません（汗） 勿論、ネットに保存した物を見るときは、URLを入力してくださいね。 ≪HTMLファイルの修正法≫ メモ帳を開いて、左上の「ファイル」をクリック、「開く」を選択し、 下側「ファイルの種類」の右の方にある「▼」ボタンをクリックして、 「すべてのファイル｣を選択すると、メモ帳でHTMLファイルが開けるようになります。 後は、自分の保存したHTMLファイルを開けば、修正が可能です。 修正後は、「上書き保存」で保存すれば良いでしょう。 修正前のファイルを消したくない場合は、 「名前を付けて保存｣で、別の名前を付けましょう。 勿論、名前は英数字で。 ≪HTMLファイルの並べ方（リンク構造）≫ 特別な事は必要ありません。 基本的に、普段皆さんが行っている、通常のパソコンデータの整理方法と同じです。 まず、ホームページのデータを入れるフォルダを、好きな場所に作ります。 そして、その中で項目別（日記、ゲーム、先行者など）にフォルダを作っていき、 そこに各HTMLファイルを振り分けていくだけです。 （* フォルダの名前は英数字で付けましょう） 参考に、ページ構造の一例を記載しておきます。 第一階層 第二階層 第三階層 diaryフォルダ ┬diary_logフォルダ ─log.html ├news_logフォルダ ─log.html ├diary.html └news.html historyフォルダ ┬histry_logフォルダ ─log.html └history.html linkフォルダ ┬bannerフォルダ ─各種バナー画像 └link.html humiフォルダ ┬longフォルダ ├shortフォルダ ├etcフォルダ └index.html index.html
タグについての予備知識 ≪タグ（TAG）って何？≫ タグと言うのは、HTMLを書くのに使う、 <○○>〜</○○> と言った物のことです。 これには二種類あって、 <○○> と単独で使うものと、 <○○>〜</○○> と二つセットで使うものがあります。 （「<○○>」を開始タグ、「</○○>」を終了タグ・閉じタグなどと呼びます） このうち、二つセットで使う方は、少し規則があります。 タグと言うのは、よく重ねて使う事があるのですが、 その重ね方は、必ず <○○><××><△△>〜</△△></××></○○> と入れ子にしなければなりません。 もし、間違って <○○><××><△△>〜</○○></××></△△> と言う重ね方をすると、正常に表示されなくなりますので、注意してください。
≪contents≫ next≫