2004/08/13(金)14:52
【What’s News VOL.16】
■【初心者のためのプチ講座 VOL.6】
今回は、メモ帖を使いまして、HTMLのタグを
自分のPCのブラウザに表示してみましょう。
ページの編集やHTMLのタグの勉強にもってこいだと思います。
まずは、メモ帖を出してみましょう。
もしかして・・・!もしかしてですよ。メモ帖をご存じない方のためにメモ帖の出しかたから。(*^_^*)
「スタート」から「プログラム」そして「アクセサリ」でメモ帖を開けます。
メモ帖は簡単に言いますと、テキストを編集するエリアです。
出ましたでしょうか?
↓下にメモ帖を作って見ました。メモ帖にですね、このようにHTMLのタグを書いてください。
メモ帖 ファイル 編集 表示 お気に入り ツール ヘルプ
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
これは、HTMLをブラウザに表示するための記号だと思ってください。
このとき気をつけるのは、HTMLのタグは半角英数字でないと駄目だという事です。
大文字、小文字はといませんが、必ず半角英数字で書きます。
では、<BODY> から </BODY> の間にテキスト(文字)の場合は、全角で、
画像などのタグの場合は、半角英数でタグを書き込んで見てください。
↓このように!これを丸ごとコピー&ペイストしてもいいですよ。
メモ帖 ファイル 編集 表示 お気に入り ツール ヘルプ
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
例えば画像を表示するのタグを使いまして、書いてみます。<BR><BR>
<IMG SRC="http://plaza.rakuten.co.jp/img/user/65/14/1286514/56.gif" width="400" height="140" alt="ねもりんプレート"><BR><BR>
↑これはねもりんさんから頂いた、プレートです。<BR>
↓こちらはマーキーです。<BR><BR>
<img src=http://plaza.rakuten.co.jp/img/ticker/left.gif ><marquee scrollAmount=2 width=350 height=20><IMG SRC="http://gtone3142.tripod.co.jp/aicnew.gif" BORDER=0><font size=2 color=black>ここにスクロールさせたい文字を書きます。</font></marquee><img src=http://plaza.rakuten.co.jp/img/ticker/right.gif border=0><BR><BR>
●このように書いて見てください。●
</BODY>
</HTML>
書けましたでしょうか。
では、このメモ帖のHTMLのタグをブラウザとして、保存してみましょう。
まずは、メモ帖のメニューバーの「ファイル」をクリックしますと、
「名前を付けて保存」があると思います。
それをクリックしますと、「名前を付けて保存」のフロートパネルが出てきますね。
保存したいフォルダを選択します。マイドキュメントとかがいいのではないでしょうか。
一番下に「ファイルの種類(T)」というのがあると思います。
▼をクリックして、「すべてのファイル」にしてください。
次に、その上に「ファイル名(N)」があると思います。
そこに、ファイルの名前を入れます。これは半角英数字で入れてください。
例えば、「test.html」と入れて見てください。「.html」はHTMLファイルの拡張子です。
このファイルは、HTMLファイルですよ、という事を表示しています。
この拡張子をつけないファイルは表示されません。
画像などのように自動で拡張子が変換されないのです。
そして「保存」をクリックしますと、指定したフォルダにブラウザのアイコンマークが
入っていると思います。
このアイコンをクリックしてみてください。ブラウザは出ましたでしょうか? (*^^)v
しかし、「インターネット」に繋がってませんと、画像は×マークになってしまいますよ。
【ブラウザ画面の編集】
このブラウザ画面の内容を編集する事も出来ます。
まず、ブラウザのメニューバーの「表示」から「ソース(C)」をクリックしますと、
そのブラウザのHTMLのメモ帖テキストが現れます。
そのメモ帖のテキストを編集しまして、メモ帖の「ファイル」から「上書き保存」を
クリックしますと編集できます。
そして、ブラウザのメニューバーの更新をクリックしますと、編集後の画面に変わります。
どうですか、お判りになったでしょうか?
メモ帖を使いまして、自分のページの編集をしまして、それからアップするという事が出来ます。
また、ページのバックアップを取っておく事も出来ますね。
ではではがんばってみてください。(*^_^*)
【おまけ!】(*^_^*)
↑上で使っております、「メモ帖」もどきは、
ボックスのスタイルシートで作っております。
テーブルで作れば、簡単なんですが、日記のページではそれが使えません。
どんな風にやっているか、参考のために乗っけておきますね。(*^^)v
<DIV style="border-style:ridge;background:white; color:black;width:500px;height:300px;"><DIV style="border-style: none;background:#000099; color:white; width: 500px; height: 8px;"><font size="2"> メモ帖 </font></B><div style="border-style: groove;background:#cccccc; color:black; width: 500px; height: 8px;"><font size="2"> ファイル 編集 表示 お気に入り ツール ヘルプ</font></div>
ここに、文字を書きます。
</DIV>