ＨＴＭＬのイ・ロ・ハ

2006年06月04日

下付添字（SUBscript）にする

[text.html]ファイルにコーディングを追加します。

開き方がわからない方は、「基本のページを作る（１）」の
【メモ帳を閉じてしまった！！】の項を見てください。
　　　　　　　　　　　　　　　　　　　　　　　　（2006/3/8参照）

では、コーディング（記述）してみましょう♪

******ココから、[text.html]ファイル******

<HTML>
<HEAD>
<TITLE>テキスト（１）</TITLE>
</HEAD>
<BODY>



普通の位置　上付添字　普通の位置 

２の三乗は　２3　　のように書きます。 





 
 
 


普通の位置　下付添字　普通の位置 

化学式で「水」は　Ｈ2Ｏ　　と書きます。 





</BODY>
</HTML>

******ココまで、[text.html]ファイル******

コーディングが出来ましたら、[text.html]を上書き保存します。

出来上がりを見てみましょう。

http://z.la/l438i

これと同じにできましたか？
出来ていない方、タグは半角英数で記述しましたか？
上書き保存しましたか？

「下付添字」または、「２」の後の文字も下付添字になってしまっている
場合は、終了タグ「」が抜けていますよ！

訂正後は、もう一度「上書き保存」して下さいね♪
その後に、ブラウザーの「更新」をしましょう♪

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

子どもの塾代、住宅ローン・・・収入は減るのに増える支出。
そんな家計のアンバランスに、不安だらけの毎日でした！！
あと５万あったら･･･！！　専業主婦の私が、自宅で起業！
http://winsome.sakura.ne.jp/nrt/LW/index.htm
旦那に秘密の借金も、内緒のままもう直ぐ【完済】　v(^o^)

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

ランキングに参加しています♪　クリックで応援してね♪　(^_-)-☆

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

ニックネームさと at 08:12| Comment(7) | テキスト

2006年05月15日

フォントのまとめ♪

[kihon.html]を起動します。
『名前を付けて保存』をします。
保存場所は、[ＨＰ]フォルダの中の[text]フォルダです。
ファイル名は[shotai3.html]とつけてください。

開き方がわからない方は、「基本のページを作る（１）」の
【メモ帳を閉じてしまった！！】の項を見てください。
　　　　　　　　　　　　　　　　　　　　　　　　（2006/3/8参照）

では、まず、下のURLをクリックしてページを開いて見て下さい。

http://z.la/bfkf2

では、上のページと同じになるようにコーディング（記述）してください♪
それぞれの指定は、下記のようになっています。

　　・ホームページ　･･･　“フォントサイズを５”にします。
　　　　　　　　　　　　　　　“フォントの色は赤”にします。
　　　　　　　　　　　　　　　“書体をＭＳ明朝”にします。
　　　　　　　　　　　　　　　“太字”にします。
　　　　　　　　　　　　　　　“斜体”にします。
　　　　　　　　　　　　　　　“アンダーライン”を設定します。
　　・作　･･･　“フォントサイズを５”にします。
　　　　　　　　“フォントの色を緑”にします。
　　・ろ　･･･　フォントサイズは“５”で、フォントの色を“青”にします。
　　・う　･･･　フォントサイズは“５”で、フォントの色を“茶色”にします。
　　・♪　･･･　フォントサイズは“５”で、フォントの色を“ピンク”にします。

コーディングが出来ましたら、[shotai3.html]を上書き保存します。

ブラウザを開いて、出来上がりを見てみましょう。

見本のページと同じにできましたか？
出来ていない方、タグは半角英数で記述しましたか？
上書き保存しましたか？

では、エディター（メモ帳）の方で、タグを見てみましょう♪
下記のコーディングと同じに出来ていますか？

******ココから、[shotai3.html]ファイル******

<HTML>
<HEAD>
<TITLE>書体の変更（３）</TITLE>
</HEAD>
<BODY>


ホームページ
を
作
ろ
う
♪


</BODY>
</HTML>

******ココまで、[shotai3.html]ファイル******

それぞれのタグは、解説しやすいように改行していますが、
実際のコーディングでは改行は必須ではありません。

先ずは、「ホームページ」の部分から見てみましょう♪

「ホームページ」には、フォントサイズとフォントの色とフォントの種類を
設定するんでしたね？！

　と
　と
　を

それぞれ指定してもいいのですが、COLORもSIZEもFACEも
全て、FONTの属性になりますので、まとめて記述する事が出来ます。

まとめる事によって、ファイルサイズを小さくする事も期待できます。

「斜体」「太字」「下線」の順番は、どれが先でも後でも構いません。

開始タグ（例： や）と終了タグ（例： や）の順番が
違っていても、ブラウザへの表示には影響しません。

が、外・外、内・内、のように、まるで、ディナーのカトラリー（フォークや
ナイフなど）のように順に並べておく事によって、後から見直した時に、
間違いがあった場合などに、その部分を容易に見つけることが出来る
ようになりますので、なるべく、記述の順番は「初めに記述したタグは、
一番最後）」･･･のようになさって置く事をお勧めします。

「を」については、何も指定していません。

「作ろう♪」の部分を見てみましょう。
「ろう♪」には、「SIZE=”5”」の指定がなされていませんね？

これは、「作」の部分で「SIZE=”5”」に指定していますので、
「その後はサイズは５のままで“色だけ○色に変更する」という記述に
なっています。

これも、その度に「SIZE=”5”」を指定するより、ファイルサイズの縮小に
期待が持てます。

終了タグ（）は、「♪」の後にまとめて記述しています。
これは、先に述べた「その後は･･･○○のままで」の「ままで」を
有効にするためにそのようにしています。

これを、「作」の後、「ろ」の後･･･に終了タグ（）を記述すると
フォントサイズの指定も、文字毎にする必要があります。

　　例：　

　　　　　作
　　　　　ろ　･･･

開始タグと終了タグ（終了タグが必要ないタグ（例： など以外）は、
全てが対になっている必要があります。

ですから、開始タグ（例：）が４つある場合は、
終了タグ（例：）も４つ必要になります。

作
ろ
う
♪


上記の記述を例にとって解説しますと、
開始タグ（例：）が４つに対して、
終了タグ（）が３つしかありませんね？

５行目の１番目の終了タグ（）は「♪」に掛かる
開始タグに対する終了タグになります。
同様に、５行目の２番目の終了タグ（）は「う」に掛かる
開始タグに対する終了タグになります。
３番目の終了タグ（）は「ろ」に掛かる開始タグに対する
終了タグになります。

よって、「作」に対する終了タグ（）が欠如している事に
なりますので、「♪」の後に何らかのテキストがあった場合には、
の開始タグの影響を受け
そのテキストは、「緑色のサイズ５のフォント」で表示されます。

「・・・と解説されても、頭の中ぐちゃぐちゃ！」　ですか？
大丈夫です！！
私も、慣れるまでは、皆さんと同じでした。
いや、慣れてからも･･･同じかな？（笑）

こんな時には、コーヒーブレイクを取るか。。。
アナログ的ではありますが、ご自身の書かれたタグをプリントアウトし
マーカーや色鉛筆を数色用意して、開始タグと終了タグを対にしながら
塗りつぶしていくようにすると、原因のタグが見つかりますよ♪(*^。^*)

専門学校の職員室でもね、よぉ～～くあるんです！！
授業を終えて、職員室に戻ってみると、授業前に開いていたウィンドウと
同じウィンドウを開いて固まっている先生がいるんですよね。(笑)

何が原因なのか、どこが間違っているのか皆目見当がつかない！

本人は、自分のコーディングに間違いは無い筈だ！と、
少なからずとも自信を持っていますからね。(笑)

そんな時、ふと通りかかった先生の･･･
「先生、ココ･･･カンマ（，）が抜けてますよ？！」のひと言で
解決しちゃったりするんです。

これは、先生同士だから･･･では無いんですよ？！
私のお教室では、生徒さん同士でこれをやって貰っています。
隣の人って、凄く冷静ですからね？！(笑)
「あっ、ココですよ？！」って瞬時に見つけてくれちゃったりするんです。

行き詰まってしまった時は、その部分は「こっちにおいておいて」
画像を探してみたり、他の部分を作ってみたりして、時間を置いてから
再度見てみると、容易に見つかったりするものです。
焦れば焦るほど、深みにはまりますから･･･
　　　「まっ、いっか。。。あとでやろう！」の精神ですよぉ～！(笑)

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

長引く不況でお客様が減り、開店休業状態の自営業でした。
借金がかさみ、返済もできず、閉店・倒産も時間の問題！！
ネット初心者の私が、お客待ちの空いた時間に始めた副業。
http://winsome.sakura.ne.jp/nrt/itt/new.htm
【借金完済】の目処が立ち、女房との喧嘩も減りました！

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

ランキングに参加しています♪　クリックで応援してね♪　(^_-)-☆

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

ニックネームさと at 23:52| Comment(1) | フォント

2006年05月10日

フォントの種類を指定する

[shotai2.html]ファイルにコーディングを追加します。

開き方がわからない方は、「基本のページを作る（１）」の
【メモ帳を閉じてしまった！！】の項を見てください。
　　　　　　　　　　　　　　　　　　　　　　　　（2006/3/8参照）

では、コーディング（記述）してみましょう♪

******ココから、[shotai2.html]ファイル******

<HTML>
<HEAD>
<TITLE>書体の変更（２）</TITLE>
</HEAD>
<BODY>



強調したい場所に、 
アンダーライン（下線）を引くと　 
こんな風になります♪ 　　



 
 
 



抹消線を指定すると、 

<S>￥9,800._</S>　⇒　￥7,800._ 

こぉ～～んな使い方が出来ます♪ 



 
 
 



等幅フォントにしましょう♪ 
<TT>等幅フォントにしましょう♪</TT> 





 
 
 



明朝体（みんちょうたい）です♪ 

ポップ体です♪ 

Happy Birthday! 





</BODY>
</HTML>

******ココまで、[shotai2.html]ファイル******

コーディングが出来ましたら、[shotai2.html]を上書き保存します。

出来上がりを見てみましょう。

http://z.la/ifvaf

これと同じにできましたか？
出来ていない方、タグは半角英数で記述しましたか？
上書き保存しましたか？

出来ていない方、削除するのは、ちょっと待ってください！
下の、説明を読まれて、今一度、コーディングを見直して下さい。

フォントの種類は、face属性で使用するフォントの指定をします。
複数の候補を並べる時は、それぞれ、半角のカンマ（ , ）で区切ります。

その場合は、並べた順に先頭から優先順位がつきます。
閲覧者（見る側の人）のマシンに、第１候補のフォントが無ければ
第2候補…のようになります。
また、閲覧者側で、指定したどのフォントも表示できない場合は、
閲覧者が指定しているフォントで表示されます。

フォントの名前は、文字の全角、半角、スペースなども含めて
フォント名を正しくコーディング（記述）しないと表示されません。

ポップ体のところにある『Osaka』は、Macintoshで使用されている
フォント名です。

以上のところを、見直して見て下さい。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

パート時給≪700円≫の『普通の主婦』が自宅で起業！？
風呂なし生活からの脱出！年収30倍アップのヒミツとは？
http://winsome.sakura.ne.jp/nrt/tml/index.htm

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

ランキングに参加しています♪　クリックで応援してね♪　(^_-)-☆

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

ニックネームさと at 01:37| Comment(0) | フォント

2006年05月04日

等幅フォント（Tele Type指定）にする

[shotai2.html]ファイルにコーディングを追加します。

開き方がわからない方は、「基本のページを作る（１）」の
【メモ帳を閉じてしまった！！】の項を見てください。
　　　　　　　　　　　　　　　　　　　　　　　　（2006/3/8参照）

では、コーディング（記述）してみましょう♪

******ココから、[shotai2.html]ファイル******

<HTML>
<HEAD>
<TITLE>書体の変更（２）</TITLE>
</HEAD>
<BODY>



強調したい場所に、 
アンダーライン（下線）を引くと　 
こんな風になります♪ 　　



 
 
 



抹消線を指定すると、 

<S>￥9,800._</S>　⇒　￥7,800._ 

こぉ～～んな使い方が出来ます♪ 





 
 
 



等幅フォントにしましょう♪ 
<TT>等幅フォントにしましょう♪</TT> 





</BODY>
</HTML>

******ココまで、[shotai2.html]ファイル******

コーディングが出来ましたら、[shotai2.html]を上書き保存します。

出来上がりを見てみましょう。

http://z.la/az0qc

これと同じにできましたか？
出来ていない方、タグは半角英数で記述しましたか？
上書き保存しましたか？

出来てるみたいだけど･･･チョット違う？！

では、次の解説を読まれてくださいね♪　(^_^)ｖ

皆さんの環境では、どのように見えているでしょうか？
ココでは、閲覧環境についてお話したいと思います。

『Internet Explorer（インターネットエクスプローラ）』で見たのと、
『Netscape（ネットスケープ）』で見たのとでは、見え方が違います。

これから、ＨＰをお作りになられる方は、両方で見比べて頂けるのが
宜しいかと思います。

ブラウザは、『Internet Explorer』や『Netscape』の他にも、色々あります。
が、日本では、この２つの使用割合が高いので、
この２つでの見え方を確認しておけば、大方、自分の描いた通りの
ページを『閲覧者にも、見てもらえる』と言うことになります。

この『等幅フォント』もそうですが、『Internet Explorer』と『Netscape』では
表現（出来上がりの見栄え）が違うのがいくつかあります。

また、バージョン（ソフトウェアの改訂番号）によっても、
表現できたり、出来なかったりするものがあります。

マシンの容量が許すのであれば、両方を起動して確認できるように
下記のページからダウンロードして、インストールして下さい。

【『Internet Explorer』ダウンロードサイト】
http://www.microsoft.com/japan/ie/downloads/default.asp

【『Netscape』ダウンロードサイト】
http://wp.netscape.com/ja/downloads/index.html

『等幅フォント』に話を戻しましょう♪

等幅フォントとは、
文字と文字の間隔を『等間隔（同じ幅）にする』ものです。

指定していない場合は、
文字は、見やすくするために間隔を縮めています。
促音（そくおん）等の前後の文字間隔が狭まるのがそれです。
　　（促音：立った、待った、などの小さい"っ"）

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

ランキングに参加しています♪　クリックで応援してね♪　(^_-)-☆

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

ニックネームさと at 14:21| Comment(0) | フォント

2006年05月02日

抹消線（Strike through指定）を引く

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

旦那の会社もリストラ続き。減給・ボーナスカットは当たり前！
我が家の家計は赤字続き。あと５万欲しくて副業始めました！
http://winsome.sakura.ne.jp/nrt/K2/index.htm
パート２ヵ月分Ｇｅｔ！で、貯金をする余裕が出来ました♪(*^。^*)

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

ランキングに参加しています♪　クリックで応援してね♪　(^_-)-☆

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

ニックネームさと at 13:24| Comment(0) | フォント