ＨＴＭＬのイ・ロ・ハ -2ページ目

チョット便利な小技

★キーボード・ショートカット★

今はまだ、コーディングも短いので、マシンに不具合が起きて
強制終了を食らったとしても、書き直しも楽ですよね？

けれど、実際にＨＰを作り始めると、１時間・２時間なんて
あっという間に過ぎてしまいます。

「…それが、何にも無くなったら？」
考えただけでも、ぞっとしますよね？(笑)
こまめに『上書き保存』を掛けてください。

保存の方法は、タイトルバーの下に、[メニューバー]がありますね？
[ファイル]→[上書き保存]からできます。

が、ここでも『キーボードで操作する方法』（キーボードショートカット）
を学んでくださぁ～い♪
右手を一々マウスに持ち替える事が無いので、覚えると楽です。

　[Alt] ＋ [Ｆ] / [Ｓ]

[Alt]キーを押しながら、キーボードの[Ｆ](ひらがな「は」のキー）を
押した後、一旦指を離して[Ｓ]（ひらがな「と」のキー）を押します。
どうですか？

マウスでやった時と同じように、
メニューバーの[ファイル]が開いたでしょう？
で[Ｓ]をタイプする事で、上書き保存が出来るのです。

メニューバーの[ファイル]をクリックして『上書き保存』のところを
よぉ～～く、見てみて下さい。

『上書き保存（Ｓ）』ってなっていませんか？
この、お尻についてる（Ｓ）が、さっき押した[Ｓ]なんです。

『名前を付けて保存』のお尻には（Ａ）がついてますね？
ですから、[Alt] ＋ [Ｆ] / [Ａ]をすると『名前を付けて保存』が出来ます。
試しに、　[Alt] ＋ [Ｅ]　をしてみて下さい。
今度は、[メニューバー]の[編集]が開いたでしょう？

マシンに保存するだけでなく、CD－R(W)や外付けHDDなどにも
ちょくちょく保存するように心がけてくださいね♪

私は、２台のマシンが同時期に死んで（壊れて）しまい、
息子も、パソコンが壊れただけでなく、WEBも吹っ飛んでしまって
全てのデータを一瞬にして失った事があります。

「近い内に保存しよう♪」と思っていた時に、壊れるんですよね！
なので、私も、この記事を書きながら･･･
全てのファイルを外付けHDDに上書き保存いたしましたぁ～♪

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
今の仕事は好きだし、やりがいもそこそこある！
が、生涯収入を計算して、愕然とした。(;^_^A アセアセ
ベースアップや老後の年金も期待できない今・・・
家を買って、子供を育てたら、飯も食えないじゃん！(;°°)ウッ!
　　　http://winsome.sakura.ne.jp/nrt/itt/new.htm
将来の不安を解消したくて始めた副業で、今はW給料！(^。^)v
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

★二つのファイルをデスクトップに並べて表示する方法★

２つのファイルを比較する際、並んでいたら便利なのに！って
思われた事は無いですか？

並べちゃいましょう♪　(^。^)v

タスクバー（スタートボタンのあるバー）に表示されている
それぞれのボタン『メモ帳のファイル』をクリックした後に
[Ctrl]キーを押しながら『ブラウザのファイル』をクリックします。

そうすると、二つのボタンが『凹んだ状態』になっていると思います。
どちらかのボタンの上で『右クリック』します。
ポップアップメニュー（ボタンを押す事によって出現する操作メニュー）
が出てきましたね？

そこで、『上下に並べて表示』か『左右に並べて表示』のどちらかを
選択します。　　表示方法は、お好みで構いません。
これで、容易に複数のファイルを比較する事ができますね♪

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　『健康』のために、ダイエットしたかった！
　　　　　　　　　　　『キレイ』のために、ダイエットしたかった！
ただ今、パンフレット無料進呈中♪　⇒ http://z.la/n82k9
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

フォントカラー（２）

前回の『カラーネーム（色名）指定』に対して
『ＲＧＢ（色指定値）指定』というのがあります。

それでは、『ＲＧＢ（色指定値）指定』を試してみましょう。

[font_color.html]の続きに記述します。
[font_color.html]を開いてください。

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

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

******[font_color.html]ファイル******

<HTML>
<HEAD>
<TITLE>フォントカラー</TITLE>
</HEAD>
<BODY>

赤色です。 
黄色です。 
緑色です。 
青色です。 
紺色です。 
紫色です。 



 
 
赤色です。 
黄色です。 
緑色です。 
青色です。 
紺色です。 
紫色です。 



</BODY>
</HTML>

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

面倒だとおっしゃる方は、
　　　
　　　
の中身をそっくりコピーしてメモ帳の[font_color.html]ファイルに
貼り付けて下さい。上書き保存をします。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
若い頃…「人生は長い」と思っていた。

『夢』とか『希望』をいう言葉を封印して…家族の為に働いた。

それはそれで幸せだった。それでいいと思っていた。

人生の先が見えてきたこの頃…

会社を辞めてしまったら何も残らない事に気がついた。

　　＜ http://winsome.sakura.ne.jp/nrt/LW/index.htm ＞

会社では得られなかった充実感と収入を手にして新たな人生スタート！
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

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

http://z.la/d20wy

これと同じにできましたか？
カラーネーム指定と同じものが下に出来ましたね？

『ＲＧＢ指定』というのは、その名の通り、ＲＧＢ値で指定する方法です。
「ＲＧＢって何？」ですよね？
ＲＧＢは、Ｒ＝Red（赤）、Ｇ＝Green（緑）、Ｂ＝Blue（青）
この３つの頭文字をとって、ＲＧＢ（アールジービー）といいます。
『光の３原色』といって、この３色を混ぜ合わせる事によって、
様々な色を表現できます。

その混ぜ具合を、16進数によって記述する方法です。
数字の前に『＃』（半角）をつけるのを忘れないで下さい。
この『＃』が、「ＲＧＢ指定だよ」の合図になります。
付け無くても、発色いたしますが、思っていた色とは
別の色になる事があります（苦笑)
「あれ？色が違う！」と思った時には、『＃』がきちんとついているか
確認してみてください。

では、ここで…簡単に『16進法』について簡単に説明します。

チョコレートが12コで１ダースになりますね？
それと同じで、16個で１繰り上がるという考え方です。＜16進法
単純に考えると、数字としては1～15まで必要なのですが、
ここで、ちょっと･･･見てくださいね♪

1～15までを列記すると…
『10進法』（普段、私たちが数と認識している方法）では
1、2、3、4、5、6、7、8、9、10、11、12、13、14、15、16
となりますが、『16進法』では、
1、2、3、4、5、6、7、8、9、a、b、c、d、e、f、10となります。

16進法では・・・１～９までは、そのまま１～９で表します。
「では、10からは？」
これは、10進法のように『10』とは表しません。
10＝ａ、11＝ｂ、12＝ｃ、13＝ｄ、14＝ｅ、15＝ｆで表します。
で、「16」は、「10」となるんですね♪

と言う事で、先ほどコーディングして戴いたＲＧＢ指定のところで
数字の他に『ｆ』が出てきたのです。

先ほど『混ぜ具合を、16進数によって記述する方法』と申し上げました。
それについて、少々解説を。
その混ぜ具合なのですが、Ｒ、Ｇ、Ｂ、それぞれ1～255までの割合で
混ぜます。　『パレットに１滴～255滴ずつ滴らす』と考えてください。

この『255』は、最大値で、これ以上の値はありません。
255を16進数で表すと『ＦＦ』になります。
『ＦＦ』が最大値なので、ＲＧＢ値で指定する場合は
それぞれ２桁あれば足りることになります。
黒の場合は『000000』ですので、Ｒを０滴、Ｇを０滴、Ｂを０滴、
白の場合は『ｆｆｆｆｆｆ』ですので、Ｒを255滴、Ｇを255滴、Ｂを255滴、
そんな風に考えてください。
このＲＧＢの並び順ですが、左からＲ、Ｇ、Ｂで
これは『決まり』なので、変わる事はありません。

ＩＴ技術者の検定試験ではないので…
『16進法』の考え方については、これ以上詳しく調べなくてもいいです！
忘れてください。(笑)
ただ、『16進法で表現する』とだけ覚えて置いて下さい。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　『健康』のために、ダイエットしたかった！
　　　　　　　　　　　『キレイ』のために、ダイエットしたかった！

ただ今、パンフレット無料進呈中♪　⇒ http://z.la/n82k9
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

フォントカラー（１）

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

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

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

******ココから******

<HTML>
<HEAD>
<TITLE>フォントカラー</TITLE>
</HEAD>
<BODY>

赤色です。 
黄色です。 
緑色です。 
青色です。 
紺色です。 
紫色です。 

</BODY>
</HTML>

******ココまで******

面倒だとおっしゃる方は、
　　　******ココから******
　　　******ココまで******
の中身をそっくりコピーしてメモ帳の[font_color.html]ファイルに
貼り付けて下さい。上書き保存をします。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　私は、本当にやりたい事をやっているだろうか？

生活の為だけに働いている自分を見つけてしまった。
　　　　　「悲しいが、これが現実だ！」
　　そう諦めかけた時に、このＨＰと出会った。

＜ http://winsome.sakura.ne.jp/nrt/LW/index.htm ＞

家族の喜びと共に…本当の自分を取り戻す事が出来た！
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

★[kihon.html]を起動して、直ぐに[名前を付けて保存]していますので
　 [kihon.html]を別ファイル（新たに名前を付けて）保存した事に
　なります。　ですから、ここでは『別ファイル』に[上書き保存]を
　しているんですね。

　[kihon.html]の内容が変わってしまった方は、[名前を付けて保存]を
　しなかったためです。
　直し方は、その内容が変わってしまった[kihon.html]を起動して
　[名前を付けて保存]をします。ここで、付けたかった名前に変更
　します。　これで、必要なファイルが出来ました。

　ですが、コレだけですと、[kihon.html]は、まだ治っていません。
　[kihon.html]を直します。　再度、[kihon.html]を起動して下さい。
　その後に、書き加えてしまった部分を削除[Delete]します。
　元の[kihon.html]の内容に戻ったところで[上書き保存]します。

それでは見てみましょう。
[ＨＰ]フォルダの中の[text]フォルダの中の[font_color.html]ファイルを
ブラウザで起動します。ダブルクリックをすれば、開きます。

http://z.la/rit39

このページと同じモノが出来上がっていますか？
出来てない方は、『上書き保存』しましたか？
色が違ってしまった方、スペルは間違っていませんか？
タグを全角で記述してしまっていませんか？

このフォントカラーの設定方法を『カラーネーム（色名）指定』と
いいます。
殆どの文字色は、カラーネームで指定できますが、問題があります。
まずは、下のＵＲＬ（Uniform Resource Locator の略）をご覧下さい。
ＵＲＬは『ユーアールエル』と読み、ＨＰ（ホームページ）の住所と
考えて頂ければいいと思います。

http://z.la/twpf5

ココでごらん戴きたいのは、左から２行目までです。
（『Color』の行と『Color Name』の行です）
（右の『"#○○"』の部分は、後日ご説明いたします。）

このページには、16種類の色見本とカラーネームを記載しています。
この16色に関しては、WindowsのＶＧＡ（Video Graphics Array）に
準拠した色なので、色指定でも使ったとしても、見る側にもこちらが
思った色で見て貰う事が出来ます。

では、その「16色以外でカラーネームを使ったらどうなるか？」ですが、
先ほど申しました『問題』は、この『16色以外』で発生するという事
なんです。こちらが思ったような色で見てもらえない可能性があります。

例えば、ピンクを指定したつもりが、見る側の環境で（例えば）『緑』に
見える事もあり得るのです。
もし、バック（背景）の色を緑にしていたとしたら、緑色のバックに
緑色の文字だったら、何を書いているかわからないですよね？

難しい表現を使っていますが、よぉ～するに色指定する場合は、
『この16色』の中であれば問題なく『見せたい色で表現できる』と
いう事なんです。ですから、
「この『16色』以外は、カラーネーム指定はしない方がいい」です♪

フォントサイズ（相対指定）

それでは、『相対指定』を試してみましょう。

前回の[font_size.html]ファイルの続きに記述してみましょう。
メモ帳で[font_size.html]を起動します。

開き方がわからない方は、「基本のページを作る（１）」の
【メモ帳を閉じてしまった！！】の項を見てください。
または、開きたいファイル、今回は[font_size.html]ですね？！
このアイコンを右クリックします。
[アプリケーションから開く]→[Notepad]でも開けます。

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

******[font_size.html]ファイル******

<HTML>

<HEAD>

<TITLE>フォントサイズ

</TITLE>

</HEAD>

<BODY>

サイズ１です。

サイズ２です。

サイズ３です。

サイズ４です。

サイズ５です。

サイズ６です。

サイズ７です。

２サイズ小さくなります。

１サイズ小さくなります。

ベースフォントサイズは、これです。

１サイズ大きくなります。

２サイズ大きくなります。

３サイズ大きくなります。 
４サイズ大きくなります。

</BODY>

</HTML>

******[font_size.html]ファイル、ここまで******

面倒だとおっしゃる方は、
　　　******ココから******
　　　******ココまで******
の中身をそっくりコピーしてメモ帳の[font_size.html]ファイルに
貼り付けて下さい。上書き保存をします。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
借金を返すために借金をする。そんな生活がイヤだった。

まとまった貯金が無い。そんな不安から抜け出したかった。

　http://winsome.sakura.ne.jp/nrt/LW/index.htm

あと５万欲しくて始めた副業で、旦那の給料そのまま貯金！
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

前回のレッスンの『絶対指定』に対して『相対指定』というのがあります。

これは、ベースフォントサイズ（基本になるフォントサイズ）に対して

『大きくする・小さくする』で設定します。

ベースフォントサイズは、デフォルト（何もしない状態）では、

フォントサイズ"３"に設定されている事が多いです。

「相対指定」は、上記の様に、『＋』『－』で指定します。

『－』を指定すると、ベースフォントより『指定した数字分』小さくなります。

が、ベースフォントが３ですから、『－3』を指定しても、

フォントサイズ１より小さくなる事はありません。

『＋』を指定すると、ベースフォントより『指定した数字分』大きくなります。

これも、ベースフォントが３ですので、『＋5』を指定しても、

フォントサイズ７より大きくなる事はありません。

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

[HP]フォルダの中の[Text]フォルダの中にある[font_size.html]を
開きます。Wクリックで開く事が出来ます。

http://z.la/3jw2v

これと同じにできましたか？

出来ていない方は、メモ帳の[font_size.html]を上書き保存しましたか？

今一度、上書き保存をして、ブラウザを再読み込みしてください。
上書き保存をしても、再読み込みをしないと、表示されません。

ＦＯＮＴタグの中のFONTという部分を要素名、
SIZE=""という部分を属性といいます。
属性の＝の後ろの部分で、その属性に対しての設定を""の間に
指定します。
要素名も、属性も全て直接入力で入力します。
全角で入力するとそれはタグだと認識されないので注意して下さい。
とのように大文字と小文字での違いは特にありません。

のように、要素と属性を両方指定して作用するタグもあれば、
 のように、要素だけで作用するタグもあります。

サイズ１です。

これで見てみましょう。
（要素）の部分で、『ここからフォントの設定をします』
SIZE=""（属性）の部分で『サイズは１』という設定をしています。

ですから、は、
『ここから、フォントサイズを１に設定します』という意味になります。

は、『フォントの設定はここまで』という意味になります。

で、実際にそのタグが作用するのは、

の間に挟まれた『サイズ１です。』の部分になります。

フォントサイズを指定しても、閲覧者の設定で変わる事もあります。

先ほどの　http://z.la/3jw2v 　を開いてみて下さい。

それから、ブラウザの[表示]→[文字のサイズ]で
文字サイズを変更してみてください。如何ですか？

見る側でフォントのサイズを変更されてしまっては
折角レイアウトとか考えたのに。。。と溜息が出ちゃいますね？！
これを防ぐ方法（フォントサイズを変更できないようにする）のには
スタイルシートという方法で記述します。
スタイルシートについては、かなり後になりますが解説しますので
お楽しみになさっていてくださいね♪

フォントサイズ（絶対指定）

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

******ココから******

<HTML>
<HEAD>
<TITLE>フォントサイズ
</TITLE>
</HEAD>
<BODY>

サイズ１です。 
サイズ２です。 
サイズ３です。 
サイズ４です。 
サイズ５です。 
サイズ６です。 
サイズ７です。 

</BODY>
</HTML>

******ココまで******

面倒だとおっしゃる方は、
　　　******ココから******
　　　******ココまで******
の中身をそっくりコピーしてメモ帳の[font_size.html]ファイルに
貼り付けて下さい。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
借金を返すために借金をする。そんな生活はイヤだった。

まとまった貯金が無い。そんな不安から抜け出したかった。

　http://winsome.sakura.ne.jp/nrt/go1/index.htm

あと５万欲しくて始めた副業で旦那の給料、そのまま貯金！
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

★『コピー＆ペースト』『カット＆ペースト』を覚えよう♪
ＨＰを作成するに当たり、同じタグを沢山使うことがあります。
上のタグを見てください。

サイズ○です。 

というのを、７回も書いてますね？

これを毎回タイプするのは大変です。
では、どうしたら効率よく出来るでしょう？

そうです。『コピー＆ペースト（貼り付け）』をすればいいんです。
マウスを使った『コピー＆ペースト』『カット＆ペースト』は
Windowsの参考書をご覧になってくださいネ♪
ここでは、キーボードを使った『コピー＆ペースト』
『カット＆ペースト』をご紹介します。覚えると便利ですよ♪

　『コピー』

範囲選択は、マウスをドラッグ（開始位置をポイントして、
ズルズルっと引っ張る）するか・・・
選択開始位置にマウスポインタを移動した後に
「Cｔｒｌ（コントロール）」キーを押しながら、「→」または「←」を押す。

若しくは、選択開始位置にマウスポインタを移動した後に
「Shift（シフト）」キーを押して選択終了位置をポイントする。
この方法は、広範囲をコピーする時に便利です。
いかがですか？範囲選択が出来ましたね？

では、コピーをしましょう。
「Ｃｔｒｌ」＋「Ｃ」・・・
　　　「Ｃｔｒｌ」キーを押しながら「（キーボードの）Ｃ」をタイプする。
これで、目には見えませんが、コピーが出来ました。
（実際には、クリップボードと呼ばれる所に保存されています）

『ペースト（貼り付け）』

貼り付けたい位置にマウスポインタを移動します。
「Ｃｔｒｌ」＋「Ｖ」・・・
　　　　「Ｃｔｒｌ」キーを押しながら「（キーボードの）Ｖ」をタイプする。

いかがですか？　貼り付けが出来ましたね？
何度も貼り付けたい時は、この「Ｃｔｒｌ」＋「Ｖ」を繰り返せばＯＫ！

『カット（切り取り）』

範囲選択は、『コピー』と一緒です。
「Ｃｔｒｌ」＋「Ｘ」・・・
　　　　「Ｃｔｒｌ」キーを押しながら「（キーボードの）Ｘ」をタイプする。
これで、切り取りは出来ました。ペーストしてみて下さい。
最後に『やり直し』も覚えてしまいましょう。

『やり直し』　

「Ｃｔｒｌ」＋「Ｚ」・・・　
「Ｃｔｒｌ」キーを押しながら「（キーボードの）Ｚ」をタイプする。

では、話を戻しましょう♪

１行目の

　　　サイズ１です。 

をコピーして、６回ペーストします。
その後に、コピー元と違う部分を直します。
この場合は、それぞれの数字ですね？
タグの中は、直接入力で入力する事を忘れないで下さい。

それでは、出来上がりを見てみましょう。
[ＨＰ]フォルダの中の[text]フォルダの中の[font_size.html]ファイルを
ブラウザで起動します。　ダブルクリックをすれば、開きます。

http://z.la/8zfv5

このページと同じモノが出来上がっていますか？
出来てない方、『上書き保存』しましたか？

このフォントサイズの設定方法を『絶対指定』といいます。
フォントサイズは、１～７まであります。
数字が大きくなると、文字が大きくなります。
フォントサイズ"８"以上に設定しても、"７"よりは大きくなりません。

次回は、フォントサイズの相対指定を解説します♪

改行

いきなり『改行』ですか？
・・・と思われるかもしれませんが・・・
これから色々なタグをお勉強していく上で、それぞれを比較して頂くのに
改行を知って戴かないと、比較が困難になってしまうからです。
それでは、早速始めましょう♪

[kihon.html]を起動します。
『名前を付けて保存』をします。
保存場所は、[ＨＰ]フォルダの中の[text]フォルダです。
ファイル名は[br.html]とつけてください。
起動の方法・保存方法は、創刊号でご確認下さい。

******ココから******

<HTML>
<HEAD>
<TITLE>改行
</TITLE>
</HEAD>
<BODY>

むかしむかし、
あるところにおじいさんとおばあさんが住んでおりました。
ある日、おじいさんは山へ芝刈りに
おばあさんは、川へ洗濯に行きました。

</BODY>
</HTML>

******ココまで******

面倒だとおっしゃる方は、
　　　******ココから******
　　　******ココまで******
の中身をそっくりコピーしてメモ帳の[br.html]ファイルに
貼り付けて下さい。　　『上書き保存』をします。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

この子が生まれた時、何でもさせてあげたいと思った。
現実の我が家は･･･赤字！　子供に諦めさせていた私。
そんなダメ母ちゃんだった私が出会ったホームページ。
　http://winsome.sakura.ne.jp/nrt/go1/index.htm
今では、子供の笑顔と毎月パート収入２ヵ月分ＧＥＴ！！
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

では、出来上がりを見てみましょう♪

http://z.la/xmrht

このページと同じモノが出来上がっていますか？
え？　違う？
そうなんです。改行のタグを使っていませんので、
皆さんの[br.html]は･･･と１行に見えますよね？

（開いているブラウザの大きさで、改行されているように見えるかと
思いますが、ウィンドウの大きさを変えて下さい。
改行されていないのがわかると思います）

では、下記のように　 　というタグを追加してみて下さい。

******ココから******
<HTML>
<HEAD>
<TITLE>改行
</TITLE>
</HEAD>
<BODY>

むかしむかし、 
あるところにおじいさんとおばあさんが住んでおりました。 
ある日、おじいさんは山へ芝刈りに 
おばあさんは、川へ洗濯に行きました。 

</BODY>
</HTML>

******ココまで******

『上書き保存』をします。

では、出来上がりを見てみましょう♪
いかがですか？　今度は同じになりましたね？

『・・・住んでおりました』の後ろを見て下さい。
 が２つ入っていますね？
 １つで改行１回。
ですから、 が２つなので、改行を２回した事になります。
で、１行の空きが出来たのですね♪

コーディング（プログラムを記述する事を言います）上
改行しているように見えても が入っていないと、
ブラウザで見ると１行で表示されます。

新しいページを作る

[kihon.html]ファイルを開いてください。
開き方は、【基本のページを作る（１）】をご覧下さいね♪

新しいページを作りますので、『名前を付けて保存』しましょう。
ファイル名は no1.html にしましょう♪
ファイル名には、必ず『.html』の拡張子を付けて下さいネ♪
メモ帳のタイトルバーを確認して下さい。
『no1.html－メモ帳』になっていますか？

なっていたら、下記をご参考に、文字を付け加えてください。
付け加える場所は、
<TITLE>と</TITLE>の間に『初めてのホームページ』
<BODY>と</BODY>の間に『これからどんなページにしていこう？』
です。

******ココから******

<HTML>
<HEAD>
<TITLE>初めてのホームページ
</TITLE>
</HEAD>
<BODY>
これからどんなページにしていこう？
</BODY>
</HTML>

******ココまで******

上書き保存して下さい。
[ＨＰ]フォルダの中の[text]フォルダの中の[no1.html]ファイルを
開いてみて下さい。

このページと同じモノが出来上がっていますか？
出来てない方は、『上書き保存』しましたか？

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

不況･･･不況･･･って、あと何年続くんだろう？！

我が家の家計は赤字続き。あと５万欲しくて副業始めました。

　http://winsome.sakura.ne.jp/nrt/itt/new.htm

旦那に秘密の借金も、内緒のまま【完済】しちゃったぁ～！

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

では、昨日の続きのタグを説明しますね♪
<HEAD>と</HEAD>、これも１対で作用するタグです。
<HEAD>と</HEAD>に挟まれた部分には、文書のタイトルや特徴、
製作者の情報などの『文書に関する情報』を記述します。
ココに記述された内容は、基本的に<TITLE>と</TITLE>タグで
挟まれたテキスト以外はブラウザには表示されません。
この記述の仕方は、やはり決まりがあります。
でも、チョット難しいのでもう少しお勉強が進んだところで解説します♪

最後に<BODY>タグと</BODY>タグに挟まれた部分には
実際にブラウザに表示させたい文書を記述します。

ですから、『これからどんなページにしていこう？』がブラウザで
見ることが出来たのですね♪　(*^_^*)

では『初めてのホームページ』はドコ？

ブラウザのタイトル・バーを見てください。　　　どうですか？

『初めてのホームページ』になっていますね？
<TITLE>と</TITLE>タグに挟まれたテキストは、ココに表示されます。

基本のページを作る（２）

[kihon.html]ファイルを開いてください。

開き方は、【基本のページを作る（１）】をご覧下さいね♪

もう1つの開き方は･･･

[ＨＰ]フォルダの中の[text]フォルダの中の [kihon.html]ファイルを

右クリックします。

ポップアップメニューの中の[アプリケーションから開く]をポイントして

[Ｎｏｔｅｐａｄ]を選択してください。

では、続きを始めましょう♪

[kihon.html]ファイルに下記のように文字をタイプして下さい。

全て『直接入力』で記述します。

大文字、小文字はどちらでも構いません。

面倒だとおっしゃる方は、

　　　******ココから******

　　　******ココまで******

の中身をそっくりコピーして

メモ帳の[kihon.html]ファイルに貼り付けて下さい。

******ココから******

<HTML>

<HEAD>

<TITLE>

</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

******ココまで******

出来た方は、『上書き保存』して下さい。

[メニューバー]→[ファイル]→[上書き保存]

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

[ＨＰ]フォルダの中の[text]フォルダの中の[kihon.html]をＷクリック♪

「何も無いじゃないっ！！」って？

そうです、まだ…何も無いんです。　でも、安心して下さい。

では、ご説明いたします♪

まず、<HTML>や<HEAD>などの『< >』にはさまれているモノを

『タグ』と言います。

殆どのタグは、<HTML></HTML>などの様に１組で構成されます。

<HTML>を開始タグ、『/』が付いている</HTML>を終了タグといい

開始タグは「ここから始めます」、終了タグは「その命令はココまで」の

意味です。

ですから<HTML>は、「ここからＨＴＭＬファイルを記述します」

</HTML>は、「ＨＴＭＬファイルはここまでです」という意味になります。

先ほど、[kihon.html]ファイルに記述して頂いた４種類・８つのタグは

ＨＰを構成する最も基本になるタグです。

<HTML>から</HTML>の８つのタグの順番は変わる事はありません。

また、新しいページを作るたびに、この８つは記述する必要があります。

ですから、新しいページを作る時は、この[kihon.html]を起動して

直ぐに『名前を付けて保存』をするようにすると、

チョットではありますが、手間を省く事が出来ます♪

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
あと10万！･･･せめて５万。　私も働きに出たいと思った。
だけど何の資格も技能も無い私。年齢制限って何よ？！
そんな私が見つけたＨＰ！！ ⇒ Life Style Revolution
在宅で稼いで･･･もう直ぐ旦那の給料追い抜くぞっ！
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

基本のページを作る（１）

【メモ帳を起動する】

[スタート]→[（すべての）プログラム]→[アクセサリ]→[メモ帳]
どうですか？　『無題－メモ帳』が開きましたか？
では、名前を付けて保存しましょう♪

新しいファイルを起動したら、直ぐに名前を付ける習慣をつけましょう。
特に、既存のファイルを元にして新しいページを作る場合
うっかりして『上書き保存』をしてしまうのを防ぐ意味もあります。
では、『名前を付けて保存』しましょう♪

【名前を付けて保存】

[メニューバー]→[ファイル]→[名前を付けて保存]
[名前を付けて保存]のダイアログボックスが開きましたね？
[保存をする場所]を見てください。
【フォルダを作る】の回で作った[ＨＰ]フォルダの中の[text]フォルダ
になって居ない場合は、[text]のフォルダになるようにして下さい。
▼をクリック（若しくは、保存する場所の右の[デスクトップの表示]）で
デスクトップを表示して、[ＨＰ]フォルダを開くと[text]フォルダが
ありますのでＷクリックして開きます。
ファイル名は kihon.html 若しくは、 kihon.htm として下さい。

【.html】の様にファイル名の後につく３文字若しくは４文字の符号の
事を拡張子（かくちょうし）といいます。
これは、Windowsがファイルの種類を認識する為に必要ですので
必ずつけるようにします。
ココ解説では、全て[.html]に致しますが、どちらでも構いません。
「わからなくなりそうだなぁ～？」という方は、『.html』にしておいてね♪
ｈtmlの前にある「．」は、キーのひらがな「る」のところにあります。
保存できましたか？

確認してみましょう♪
[ＨＰ]フォルダの中の[text]フォルダを開いてみて下さい。
その中に、『Internet Explorer』や『Netscape』などのアイコンの
[kihon.html]というファイルがあれば成功です！

もし、アイコンが「メモ帳のアイコン」だったら…
残念ながら『保存』は失敗です（＾＾；
失敗してしまったファイルを削除してから、新たに名前を付けて保存
してください。
失敗した原因は、拡張子だと思われますので、再度保存する前に
タイプミスが無いかもう一度見てくださいね♪
拡張子が合っているのに失敗？
ファイル名にスペースが入っていませんか？

【メモ帳を閉じてしまった！！】

『Internet Explorer』や『Netscape』などのアイコンの
[kihon.html]ファイルをいくら開こうとしても、メモ帳が開いてこない・・・
大丈夫ですっ！！
ＨＰは、２つのソフトで作っていくお話は致しましたよね？
　★メモ帳・・・ＨＰを記述する
　★ブラウザ…出来上がりを見る
ところが？！？！できたファイルは１コ？！
１コでいいんですっ！！
１コのファイルを、２つのソフトで操りながら作成していくんですよ♪

では･･･一番最初にメモ帳を起動した時のように[スタート]ボタンから
メモ帳を起動して下さい。　『無題－メモ帳』が開きましたね？！

その何も書いてないメモ帳のメニューバーの[ファイル]→[開く]
ファイルの場所は[ＨＰ]フォルダの中の[text]フォルダでしたね？

ファイルが無い？！？！ビックリしないで下さい♪
[開く]のダイアログボックスの下の方に
[ファイルの種類]というのがありますね？
そこを、[全てのファイル]に変更してください♪
どうですか？　あったでしょう？
それを開いて下さい♪
この開き方は、毎回行いますので習得して下さいね♪

フォルダを作る

これからＨＰを作成していく訳ですが、時が経つにつれ
画像やテキストの数が知らず知らずの内に増えてきます。

いざそれを使おうと思っても、
膨大なファイルの中から探すのは至難の業。
ですから、まず初めに『専用のフォルダ』を作ります♪
フォルダを作っていただくのは、任意の場所で構いませんが…
今後の説明の為に、今回はデスクトップに作る事にします。

【フォルダの作り方】
デスクトップのアイコンが無い所で
　　　　　　　　　[右クリック]→[新規作成]→[フォルダ]

フォルダが出来上がり、文字が反転（青い背景に白文字）になって
いますので、フォルダ名[ＨＰ]とつけます。

フォルダ名、ファイル名は日本語でも構いませんが、
記述は直接入力（半角英数）で致します。
　　　　　　　　　　　＜日本語の場合でもローマ字表記する
これは、後程サーバにＵＰ（アップ）する際に、
日本語を認識しない、サーバに対しての配慮です。

　　例）　　×日本語　　⇒　○ nihongo

フォルダの名前を変更する前に確定してしまった場合は、
そのフォルダの上にマウスポインタを合わせ…
[右クリック]→[名前の変更]でいつでも変える事が出来ます。

後々ご説明いたしますが、ＨＰを作成し始めてからフォルダ名や
ファイル名を変更すると、それに関連付けしたファイルに不具合が
起こりますので、『作成を始めたら、変更しない』ようにしてくださいネ♪

※このブログでは、記号で操作を表しますね♪
Ａ→Ｂ …Ａをクリック後、その指を離さずＢまでの経路をたどり離す。
Ａ＋Ｂ …Ａをタイプ（押した）後、その指を離さずにＢをタイプする（押す）
Ａ/Ｂ …Ａをタイプ（押した）後、その指を離してからＢをタイプする。

デスクトップに、[ＨＰ]というフォルダが出来ました。
次に、その[ＨＰ]というフォルダの中に
[image]と[text]という２つのフォルダを作ります。

ますは[ＨＰ]フォルダをダブルクリックで開いて下さい。
[ＨＰ]フォルダを作った時と同様にして作成してください。
　　★[image]（イメージ）フォルダ…画像を保存します。
　　★[text]（テキスト）フォルダ…文書を保存します。

<< 前のページへ最新 | 1 | 2 | 3 | 最初次のページへ >>

ブログ画像一覧を見る

このブログをフォローする

～初めてＨＴＭＬに触れる方へ～