HTML編 01/51
| 目的別 index | タグ別 index | カラーチャート | images | SAMPLE |
はじめに
はじめに
ページの見方




はじめに

ここでは実際にホームページを作る手順を解説します。最終的にはこんなView(ここをクリック)ページを作ってみます。あくまでこれは練習用の課題として作ってありますので、内容の不出来については突っ込まないでください(笑)。また、もちろんこの通り作る必要はありませんので、自分なりに改造してもらって結構です。
ここでは、ブラウザのバージョンがNN3、IE3で表示される基本的なタグのうち、一部だけを解説します。それ以外にも色々なタグがありますし、最新のブラウザをターゲットとするなら、もっと面白い機能を付けることも出来ます。それらを使ってみたい方は、書籍や他のサイトなどをご覧になってください。
ただ基本的なタグだけとはいえ、ここで解説するものだけでも、アイデア次第でかなりなことが出来るはずです。
また、最初からタグを一つ一つ覚える必要もありません。例えば英語を思い出してください。英語は文法力と単語力が必要です。しかし、文法、つまり単語の並べ方さえ知っておけば、あとは辞書を片手にある程度は読み書きが出来るはずです。HTMLも同じです。いや、英語に比べれば、はるかに簡単です。英語を「数学」とすればHTMLは「算数」と言ったところでしょうか(笑)。
ですので、ここでは基本的なタグの「使い方」を中心に説明します。「タグでこういうことが出来る」と言うことだけ知っておけば、あとはその都度、HTML辞書で調べればいいだけのことですし、英語を覚えるのと違い、一度ひとつのHPを作ってしまえば、次からは必要な部分だけコピー・ペーストして作ることが出来るのです。慣れてくれば頻繁に出てくるタグは自然と覚えてしまうでしょうし、それに大した時間はかからないはずです(私は頻繁に使うタグはIMに単語登録しています)。新しくホームページ作成ソフトを買ってきて、その操作方法を覚えるより、よっぽど早いのでは?と私は思いますがいかがでしょう?
ホームページ制作ソフトを使って作るにしろ、思い通りのものを作り込んで行くには、結局HTMLの知識も必要になってきます。何より、WINユーザーならメモ帳、Macユーザーならシンプルテキストだけで、お金を使わずに作ることが出来るのです(画像とFTPソフトは別ですけど…)。メモ帳やシンプルテキストではいくら何でも…とおっしゃる方は、HTMLエディタをお勧めします。嬉しいことにフリーウェアの優れたHTMLエディタが、Webにはたくさんあります。私は「mi(旧ミミカキエディット)」というエディタを愛用しています。ダウンロードはこちらから。DAISUKE Kamiyama Home Page(Macintosh専用)
http://www.asahi-net.or.jp/~gf6d-kmym/index.html
とりあえずは、ザッと覗いてみて下さい。タグを書くのが面倒なら、ここからコピー・ペーストしても構いません。とにかく「タグを書いてホームページを作るのは簡単だ」と言うことだけでも解ってもらえれば私としては嬉しいです。




このページの見方

上のグレーのバーにある「目的別index」をクリックすると、目的別の目次へジャンプします。これから行う練習の順序にはなっていませんが、「こうしたいときは何のタグを使うんだっけ?」という場合にご覧ください。
「タグ別index」をクリックするとタグ別の目次ページへジャンプします。タグ別一覧にしてありますので、タグで引きたい場合は、こちらをご利用ください。
「カラーチャート」をクリックすると色見本のページへジャンプします。色指定をする場合の目安にしてください。
「images」をクリックすればサンプルページで使っている画像のファイル名、サイズ、ALTの一覧が、「SAMPLE」をクリックすると最終目的の(?)サンプルページが見られます。

所々に出てくるViewマークは、そこで解説しているHTMLなどを実際に作った場合の例を別ウィンドウに表示させるボタンです。
文中グレー地の部分は、そのページで解説しているタグの例が書いてあります。例)
<HTML>
<HEAD>
<TITLE>練習</TITLE>
</HEAD>
<BODY>
こんにちは
</BODY>
</HTML>
タグを書き込むことが面倒な場合は、グレー地の部分からコピーペーストしても構いませんが、ページの都合上、途中で省略したり、またタグの途中で改行されたりしていますのでご注意ください。また、最初は出来るだけ入力するようにしてください。その方が覚えますから…(笑)。

まとめ読みをダウンロードしてご覧になっている方は、下の「index」ボタンは無効になっています。ご了承ください。
backindexnext