PC・タブレットなどでブラウザーの横幅が大体960px以上の時：リンクをクリックすると、画面左下に"タグ解説ページ"が"別窓で並行表示"されます
横幅が960px未満の時：リンクをクリックすると、"タグ解説ページ"が新規ウインドウで表示されます
"how-to HTML files"
- Windowsでは、デフォルトで"ファイルの拡張子を表示しない"になっていますが、チェックをはずして拡張子を表示させる(チェックのはずし方: フォルダ(フォルダであればどれでもOK)のメニューから"表示→オプション(フォルダオプション)→表示"(WindowsME、Windows2000及びWindowsXPの場合は、"ツール→フォルダオプション→表示")を選択し、'登録されているファイルの拡張子を表示しない'のチェックをはずす)
- "HP作成用のフォルダ"を"C￥(98(NECの"キューハチ"の方)の場合はA￥)"以下のディレクトリ(階層)に作り、デスクトップにはショートカットを置く(フォルダやファイルをデスクトップに置くと、転送(HPをWWWサーバにUPすること・・・詳しくは upload を見て下さい)の際にどこのディレクトリ(階層)にあるか分かりにくいので、避けた方がいいでしょう)
(ここではとりあえず、作成したファイル(HTMLファイル、jpegファイル、gifファイル)はすべて、(階層を付けずに)同フォルダ内に"並べて"保存して下さい)
(ここでは"メモ帳"でのHTML作成について解説しますが、"SimpleText"やワープロソフトなどで書く場合も、基本的には同じです)
WWW上でHPを公開するには、HTMLファイル(HTMLで書かれたテキストファイル)をUPしなければなりません。
・・・というと、何だか難しそうですが、要は、本文にタグタグを加えていって、拡張子".html"(または".htm")で保存するだけのことです。
それも、(極端に言ってしまえば)絶対必要なタグはわずかで、残りは広い意味での"レイアウト系"です。
HTMLファイルを書くのは、"メモ帳"(または"SimpleText")でOKですが、もちろんワープロソフトなどでも書けます(保存の際は、必ず「テキスト形式」を選択して下さい。さもないと、"文字化け画面が出て呆然"というハメになります)。
まず、これから説明する手順通りに書いてみて下さい。
その後、この作ったばかりのHTMLファイル(これでも立派なHTMLファイルです・・・簡単でしょう？)のアイコンをダブルクリックするか、ブラウザを起動してメニューの"ファイル→ファイルを開く"からHTMLファイルを読み込んで下さい(こちらもウインドウは閉じないでおいて下さい)。
たった今書き写した"文章"がブラウズされているはずです。
次に、"サンプル"の後に、"その1"と入力して下さい。
画面を見ておわかりのように、"メモ帳"を書き替えただけではブラウザ画面は変わりません。
修正結果を反映させるには、
- HTMLファイル: "ファイル→上書き保存"をクリック
- ブラウザ: ネットスケープは"再読込"ボタン、IEは"更新"ボタンをクリック
ブラウザ画面に"サンプルその1"と表示されるはずです。
(確認したら、"メモ帳"、ブラウザ共ウインドウを閉じて下さい)
お気づきになっているかもしれませんが、HTMLファイルは一度ウインドウを閉じてしまうと、書き直すためにアイコンをダブルクリックしても("メモ帳"は起動せずに)ブラウザが立ち上がってしまいます(PCの方で、HTMLファイルのアイコンをダブルクリックすると"メモ帳"が起動する、という設定にでもなっていない限りは)。
・・・そこで、HTMLファイルをライティング可能な状態にするには、"メモ帳"の方からファイルを開かなければなりません。
HTMLファイルを"メモ帳"から開くにはいくつかの方法がありますが、- デスクトップに"メモ帳"のショートカットを作り、そのアイコンの上に、再編集したいHTMLファイル(のアイコン)をドラッグ＆ドロップする
- スタートメニューでメモ帳を起動し、ウインドウの中にHTMLファイル(のアイコン)をドラッグ＆ドロップ
- 再編集したいHTMLファイル(のアイコン)を右クリックしてショートカットメニューを出し、"送る→Notepad.exeへのショートカットNotepad.exeへのショートカット"をクリック
- IEを起動してHTMLファイルを表示した後、画面の何もない部分を右クリックしてショートカットメニューを出し、"ソースの表示"を選択してクリック(またはメニューから"表示"→"ソース表示"をクリック)
(この方法は、ファイルが空の時は使えません)
の4つがいちばん簡単でしょう。
(3.の方法はWindowsのみ。それ以外はMacでも可能だと思いますが、もし、これでうまくいかなかった場合は、こちらの方法こちらの方法で開いて下さい)
まず、以下の"サンプル"をブラウザの画面通りに"メモ帳"に書き写し、文章の前に<HTML><BODY>、後に</BODY></HTML>と入力してファイル名"sample2.html"で保存して下さい。
最近売ってるWin98のPCって、IE4しかインストールされてないものばかり・・・IE派の人が多いといっても、ネットしている人の半数近くはネットスケープ使ってるというのに・・・
ところで、私と同じ頃(97年前半)かそれ以前にネット始めたWinな人が"ネットスケープ派"と"IE派"に分かれるのは、最初のPCが98だったかDOS/Vだったかによるのかも・・・？
(その頃、ちょうどネットスケープもIEもVer.2からVer.3に移行する時期で、NNの方がIEより機能的に上だったので、"一太郎の付属品"としてNNがプレインストールされていることが多かった(当時、NNは有料)98を買った人は"ネットスケープ派"に、そうでないDOS/V買った人は"IE派"に、というのが、(私の)推論)
ブラウザで"sample2.html"を開いて見てみると、文章の内容自体は正しくブラウズされているはずですが・・・
ブラウザは、"メモ帳"での改行は無視してしまうのです。また、"メモ帳"で改行した箇所の後は、半角スペース分空いてしまいます。
ブラウザ上で改行させるには、改行タグ"<BR><BR>"か段落変えタグ"<P><P>"を使います。
では、サンプル文を下のように書き直してみて下さい。(ただし"メモ帳"の方では<BR>または<P>を入れる箇所以外改行しないで下さい(横にスクロールして書きにくい場合は、"書式→右端で折り返す"(Windowsのバージョンによっては"編集→右端で折り返す")をチェックすると楽に書けます))
ところで、私と同じ頃(97年前半)かそれ以前にネット始めたWinな人が"ネットスケープ派"と"IE派"に分かれるのは、最初のPCが98だったかDOS/Vだったかによるのかも・・・？<BR>
(その頃、ちょうどネットスケープもIEもVer.2からVer.3に移行する時期で、NNの方がIEより機能的に上だったので、"一太郎の付属品"としてNNがプレインストールされていることが多かった(当時、NNは有料)98を買った人は"ネットスケープ派"に、そうでないDOS/V買った人は"IE派"に、というのが、(私の)推論)
今度は、サンプル文どおりにブラウズされていると思います。
文章を途中で"上下に分割"したい時は、罫線タグ"<HR><HR>"を使います(いろいろオプションがありますが、詳しくはtagsを見て下さい)。
・・・<P>の代わりに(あるいは前か後に)入れてブラウズしてみて下さい(IE3とそれ以外のブラウザでスペースの間隔が異なります)。
ただ画像を表示させたいだけなら、イメージタグ"<IMG SRC="ファイル名"><IMG SRC="ファイル名">"と書けば左側(文章を行変えしている時。デフォルトの場合、イメージの横には、テキストは一行しか表示されず、残りはイメージの下に回り込んでしまう)に表示されますが、それではレイアウト上ちょっと・・・という場合が多く、通常はオプションを使用します(詳しくはtags、またはdefault layoutを見て下さい)。
HPに絶対欠かせないのが、この"リンク"です。
リンクの書き方は、ファイルが同じディレクトリにあれば簡単ですが、異なるディレクトリにあると途端にややこしくなります(文頭で、"ファイルはすべて同じディレクトリに置いて下さい"と念を押したのはこのためです)。
- <A HREF="ファイル名">～</A>
同一ディレクトリ内のファイルにリンクします。(試しに、先ほど作成した"sample.html"に"<A HREF="sample2.html">リンク</A>"と書いてみて下さい。・・・"リンク"をクリックすると"sample2.html"にジャンプするはずです。 - <A HREF="URL">～</A>
他のURL(ホームページアドレス)のファイルにリンクします。(もし、お気に入りのHPがあったら、そのURLを記入して"～"("～"は任意のテキスト)をクリックしてみて下さい。・・・ブラウザにそのHPのキャッシュが残っていれば、接続しなくても表示されます) - <A HREF="mailto:e-mail address">～</A><A HREF="mailto:e-mail address">～</A>
自分のメールアドレスを入れておくと、メールアドレス入りのメールウインドウが開かれます。HPの読者との交流には不可欠のタグですね。
HPの"トップページ"のファイル名を"index.xxx"(xxx: 拡張子； 多くの場合"html")以外にしたい場合、WWW上でディレクトリ内を公開したい時以外は必ずWWW上に作成したすべてのディレクトリ内に"index.html"(中身は空(何も記述しない)で構いません)をアップロードして下さい。
("index.html"がないと、通常、ディレクトリの中身の一覧が表示されてしまいます(中身が丸見えになり、セキュリティ上問題))
これだけ覚えれば、一応最低限のHPは書けます("美しいレイアウト"とは言い難いですが)。
・・・後は、"default layout"以下のページを参考に実践していって下さい。
("タグ"は、書いているうちに自然に覚えてしまうものです・・・"Coolest Moment"程度のレベルのHPであれば、ですが)
また、(私もそうしてきているのですが)人のHPのソースを研究する人のHPのソースを研究するのも大変勉強になります。
(私のHPのソースを見ると、一見難しそうに見えるかもしれませんが、単にタグと"記号記号"が多いだけです)。
でも、無理には詰め込まないようにして下さい・・・ページ書くのがいやになってしまったりしますから。
ごく基本的なタグのみを使ったサンプルです。("オプション"を使わないと"美しくない"ということを示すために、あえて"デフォルト"で書いています。また、実際に"バリエーションサンプル"と互いにリンクします。(メールはこちらからは送れません))
(見終わった後は、(立ち上がった)画面を閉じて下さい)