「HTMLタグ記入で、ホームページを作成」その準備

  「キーボードの操作」

 普通の和文とアルハベットが打てれば大丈夫です。
 htmlで使用する記号もそんなに多くはありません。
 以下は全部「半角」のものを使用します。
 直接入力か半角英数モードで入力すればOKです。
 書き出して見ます。記号は全部Shiftと一緒に打つものばかりでした。

   < はShift + <  (ひらがなの「ね」の所)
   > はShift + >  (ひらがなの「る」の所)
   = はShift + =  (ひらがなの「ほ」の所)
   " はShift + "   (数字2の所)
   # はShift + #  (数字3の所)
   _ はShift + −  (右側Shiftの左隣です)
   % はShift + %  (数字の5の所)
の7つ位しか心当たりありません。上の5つは兎に角頻繁に使用します。

 下はインターネト・サーフィンで使用するもので覚えておいて損はありま
せん。
   /         (スラッシュ)
   @         (アットマーク)
   ~ はShift + 々  (チルダと呼びます)


  マウス操作で必要とする「用語」の解説です。

 スタートボタン    :
スタートメニューを表示させるためのボタンです。Windows
                を終了する時は必ず、ここから終了を選択して終わります。


 メニューバー     :
 開いたソフトによって表示項目が異なりますが「フアイル」
                「編集」「表示」・・・「ヘルプ」などと表示されるバーです。
                このシリーズで使用するメモ帳には「表示」は有りません。


 プルダウン・メニュー :
 上の各項目をクリックした時に「ぶら下がった」メニュー
                のことを言います。右クリックで現れるメニュー(
ショート
                カットメニュー
)も、その場面で予想されるメニューに絞ら
                れて表示されますが、基本的には前者と同じものです。


 クリック       :
 ダブルクリック    :

 コピー        : 
複製を作ることです。パソコンで文書を作成する最大のメ
                リットは「文書の編集が簡単に出来る」ことにあります。
                 文章の前後を入れ替えたり、別の文書を挿入したりする際
                には、この「コピー&ペースト」または「切り取り&貼り付
                け」を最大限活用することで能率UPが図れます。

                 コピーの最も簡単な方法は対象物を右クリックして、その
                ショートカトメニュー
からコピーを選び、目的の場所で、
                また右クリ
ックして、そのショートカットメニューで「ペー
                スト」します。

                 編集している文書だけでなく、画像、フアイル、ホルダー
                もコピーすることができ、更に、インターネット上の文書や
                画像など様々な対象を
コピーすることができます

 切り取り       :
 主に対象を移動させる時に用います。「コピー」は対象を
                 残しますが「切り取り」では残さず「貼り付け」で移動します。


 ペースト(=貼り付け):
「コピー」または「切り取り」で一時的にハードデスク内の
                クリップボードに記憶してから、目的の場所に貼り付けます。
                新たに「コピー」行為をしない限り何度でも何処にでもできま
                す。

 ドラッグ&ドロップ  :
 マウス操作で対象を捕らえ、そして移動先まで運ぶ行為。
                対象文字列を選択し文字を反転させたら、その上で左ボタンを
                押したままにします。カーソルの下に点線の四角が表示された
                ら、ボタンを押したままカーソルを動かして、移動先で指を離
                して完了

                 同じことを右クリックで行うと、ご丁寧に「ここに移動」と
                確認のメッセージが出ます。「フアイル」や「ホルダー」の場合に
                起こし易い迷子等の操作ミスは無くなります。お勧めします。

 フォルダを作成    :
方法は「準備その1」に記載。

 フアイルを開く    :
右上の折れた長四角のアイコンの形でフルダー内に保存されて
                います。いろいろありますが主なフアイルは下記のとおりです。
                  1.アプリケーションソフト この場合は起動すると呼び
                ます。
                  2.自作、他作の画像(jpg,gif,png)フアイル
                  3.文書(doc,txt)フアイル
                  4.音声、楽曲(wav,mid,mp3)
                  5.HTML(htm,html)フアイル
                開き方もいろいろあります。
                  1.マイコンピュータからホルダーを辿って行き、フアイル
                   をダブルクリックします。
                  2.作成した「アプリケーションソフト」から開きます。
                  3.「最近使ったフアイル」から開きます。
                  4.予めデスクトップに作成しておいた「ショートカット・
                   アイコン」から開きます。・・・などがあります。

 フアイルを保存    :
 保存するに当たって最も重要なことはデータの保存先をしっか
                り確認したり指示したりして覚えておくことです。


 メモ帳        :
スタート→プログラム→アクセサリー→メモ帳にあるワープ
                ロソフトで、字色は黒、文字サイズは3、文字種はMS明朝に
                限定されたもの。
                 インターネットのホームページ上では「表示」メニューか
                ら「ソース」で開き、そのページの内容をHTML形式で表示す
                る。


 ソフト
(またはソフトウエア): コンピュータを動かすためのデータの集まり。アプリケー
                ションもソフトウエアの一つ。


 ダウンロード     :
 インターネットから画像データやソフトなどを自分のパソ
                コンに取り込むことを言う。

  この位の操作がわかればOKです。


   HTMLタグ記入で、ホームページを作成 その準備2に入ります。
1.先ず、ホームページ閲覧ソフト(ブラウザ・ソフト)が必要です。
  
大抵パソコンに組み込まれています。例えば、IEでしたらIE5.5とか現在はIE6.0
   です。その他ではネットスケープ・コミュニケーターのNC5.7、6.0が有名ですが、
   導入は各自がおこないます。無料です。



2.ホ−ムページ・エディタ。これはホームページ作成ソフトのことです。
  
いろいろあります。ご参考までに私が使ったことの有るソフトを列挙して見ますと。

  イ)Netscappe Composer(無料)使い易いが、表示がIEとズレが有る。
  ロ)Hotall Win95用   (有料)ーWin98では使えなくなりました。

  ハ)MS-Word97     (使い易くhtmlソースもスッキリしていた。)
  ニ)MS-Frontpage Express2.0   (Win98までは付属品で使い易い。
              Win98 SEには有りません。「SP2」お奨めの時
              代どうかと思いますが[SP1]に入っています)
  ホ) MS-Wora2000    XNL仕様のソースで見ずらく、フアイル容量も
              重くなるので敬遠しています。)
  へ)IBM-Homepage Builder V6.0.1 (有料) 使い易く現在使用中
   
という経過を辿ってまいりました。

 上述のホームページ作成ソフトは「html」の知識がなくとも完成されたホームペ
ージが出来上がります。


3.今回の試みは「ホームページ・エディタ」でなく、「テキスト・エディタ」
というソフト(Windows付属のメモ帳)を使って「html」タグを打ち込んでの
作業になります。
  
(余談になりますが、このメモ帳、機能は最小ですがその分不思議な浄化作用を発揮し
   ます。文字だけを抽出したいとき、一旦このメモ帳に貼り付けた後、そこからコピー
   して他に流用すると、文字化けなども防げます。ワードなどと違い、単純な文字情報
   しか持っていないからです。このシリーズでIEの画面から直接コピー(いろいろな
   情報を含んでいる文字を)ソースのメモ帳に貼り付けすることで浄化されているので
   す。そういうこたがあって、安心して以下の作業が出来ることになるのです。)


 ということで皆さん既にお持ちの「1」と「3」を使用してのページ作りになり
ます。

  (私の感想ですが、
  1.htmlタグ操作を一寸覚えたあと「2」のソフト等と併用すると作業効率
   が格段に良くなると思います。

  2.また、HTMLの装飾部門を受け持つ「カスケーデング・スタイルシート」
   (CSS)は、html操作の延長と考える事が出来るのではないでしょうか。

  3.そして、いろいろと表現に変化を与えるジャバスクリプトの使用もHTML
   の知識なしでは不可能です。

  4.さらに近い将来「html」に代わり、オールマイテイ的な「XML」仕様に
   変更される動きもあるようです。”現在既にWord2000でWebページを作る
   とXML仕様になっています。”

    そのソースたるや、複雑怪奇で、何処どう直したら良いのか手の施しよ
   うがありません。ですからそれまでに「htmlを習得しておかないと、何が
   何んだか見当もつかない事態に陥ってしまいます。勿論それなりのホーム
   ページエジターが出来てくるでしょうが、中味をいじくる楽しみ、便利さ
   が失われかねません。ですからそれに対処出来るように今頑張りましょう。

   ここでは、プロバイダーと契約が完了して、そのサーバー内に自分のレンタル
  スペース(自分の私書箱と考えて下さい。)が出来、またパソコンがインターネ
  ットに繋がったと仮定し、そこに送り込むフアイルを作成するという段階からの
  話として進めます。勿論送り込むフアイルを完成してから諸手続き、設定しても
  一向差し支えありません。


 
それでは
 
HTMLソース記入(=貼り付け)用原稿を作ります。

 これから実習で作成された何枚ものフアイルが出来てきます。
 また、予め予備フイアルを作っておいたほうが能率的です。
 そこで、それ等のフアイルの保管場所として「ホルダー」を作ります。

 
例えば、My Documentの中にホルダーを置いた場合で考えます。
 まず、マイドキュメントを開きます。マイドキュメントの画面の空白部分
を右クリックして新規作成です。上のほうにフォルダというのがあるので、
これを選択。

 出来たフォルダに名前を記入します。例えば、ローマ字で××××と自分
に分かり易い名称で結構です。


 
次に、テキスト文書を作ります。
 先ほど新しく作ったフォルダを開いてもらいまして、その中で先ほどと同
じように右クリック、新規作成で今度は「テキスト文書」を選択してくださ
い。

 すると新規「テキスト.txt」というファイルが出来ているはずです。

 【ここで、「.txt」は拡張子といってフアイルの種類を表示しています。
例えば.txt:テキスト文書のことでメモ帳で作った文書がこれになります。
    .docドキュメント文書のこと、ワードで作ると、これになります。

「.txt」が表示されていない人は、表示されるようにパソコンの設定を変更
してもらう必要があります。

 やり方は、いま開いているフォルダの上のほうにあるメニューの「表示」
というところを押してもらって、フォルダオプションを選択します。そして表
示というタブを押します。そこに「登録されている拡張子は表示しない」と
いうところにチェックマークが入っていると思います。

  

 そのチェックマークを外してください。外したら、OKというボタンを
押します。これで拡張子が表示できるようになったと思います。
 
 ファイル名を変えてみます。先ほど、フォルダの名前を変えた時のよう
にするのですが、「新規テキスト文書.txt」という文字全てを消去します
。そのうえで、index.htm」か「index.htm」という文字を入力する。
ホームページのトップのページは必ずこれか、index.htmにする決まりに
なっているからです。

 ここで、今出来たindex.htmlをダブルクリックして開いて見ましょう。
 
真っ白な画面が現れます。「表示」→「ソース」とクリックして下さい。
 
矢張り真っ白な画面になっています。これは作り立てのほやほやで何の
入力もしていないからなのです。

 このシリーズではこのフアイルを原稿とします。

   約束事
   名称は
「HTMLソース原稿」とします。HTML原稿
      と言ったらこの原稿を開きソースを開いて下さい。


 1枚目の「index.html」または「index.htm」から,何枚ものページへリ
ンクが張られ全ページへ展開して行くことになるのです。
 
 このフアイルを開いたまま。名前を変えて保存します。(例えばA1.A2.A3.・・・
のようにすれば、沢山の原稿が出来ます。)
 その1枚、1枚に、これから学習するhtmlタグをペタペタ貼っていくこと
で、ホームページの何枚かが出来、それが1頁、2頁、3頁になって行くの
です。

 ここで、1つの例題をやってみます。

 例題1.赤い文字をやや大きめに中央に書きましょう。
 作業1.上で作った原稿のhtmlフアイルを開きソースを開いておきます。
 作業2.「htmlタグの基本形」をそのままコピーします。・・・・線内の
     <html>から</html>までをそのままコピーして下さい。それを

「HTMLフアイル原稿」の「ソース」
       に貼り付けます。

 ・・・・・・

  <html>
  <head>
  <meta>
  <meta>
  <meta>
  <title>タスクバーに表示されます</title>
  </head>

  
<body>



  
</body>
  </html>
 ・・・・・


 
作業3.そうしてから下記をコピーして原稿ソースの<body> </body>
に貼り付けます。
(下記は「文字列入力」についての「htmlタグ」の一般形式です。)

 
<p align="center"><font color="xxx" size="xxx" face="xxx">
文字を入力</font></p>


 「 > < 」の間の「文字入力」の位置に好きな文章を記入した上で、
そして×××を下記のように書き換えます。

 "center"   センターを指示 
(若し、左寄せの場合は「left」になります。)
 color="xxx" ×××を「red」にするか、またはカラーNo.の#ff0000を。
 size="xxx"  ×××を「6」にする。
(3が標準ですのでタイトルなどは大きく)
 face="xxx"> ×××を「MS Pゴジック」にする。
(MS 明朝が標準のようです)

 このとき、MS Pは半角でゴジックは全角カタカナで入力します。記入が
不正確な場合は自動的に、MS 明朝になるはずです。

 書き込んだメモ帳を「上書き保存」し、閉じてから「htmlフアイル」も
閉じます。そうしてから、また開いて下さい。第1作目がうまくいったでし
ょうか。

 説明は長いがだんだんと操作は簡単になっていくはずです。コピーして
ちょん、コピーしてちょんという風にしたいものです


 
私は作業3のような「htmlモデル」をいろいろな場面を予想して沢山
用意するつもりです。今後是非トライしてみて下さい。  以上です。



 以下余分ながら、拡張子のことがでてきましたので、書いてみました。
 本文には影響しませんので飛ばしても結構です。
 インターネットのホームページ上で使われる、殆んど大部分のフアイル
の種類は次の4つ位で、夫々下記の拡張子が付きます。
    .html(又は.htm):IEとかNCのブラウザで読み取れる文書です。
    .mid:音楽用のフアイルで、メデア・プレーヤが起動します。
    .jpg:JPEG方式で圧縮された画像の形式です。
    
.gif:GIF方式で圧縮された画像の形式で、上のjpgと共にホーム
       ページ上の画像の主役で、沢山の素材やアニメが出回って
       います。】

 要注意ところが、最近画像表示形式「.png」が多く使用されるようになって
まいりました。「.gif」は米国Unisys 社が著作権を主張し、大手では損害賠償
問題が発生しているのです。ネット上の素材屋さんも減少の傾向にあります。ま
たは「.png」に切り替えしているようです。「.gif」と同様の性質(画像の以外
の台紙を透過出来る性質)が魅力なのです。

米 Unisys 社のガイドラインによりますと、
ライセンスを取得していないツー
ルで作成した GIF 画像を貼り付けた Web の管理者は、米 Unisys 社に対し、
lower-cost, one-time license fee(低価格で、しかも一回だけ払えば済むラ
イセンス料)最低65万円(為替レート1$130円で)
とのことです。では正式
に使用許可をと取ろうとしても、一般人でもやはり65万円はかかるとのことで
す。しかし、ご安心下さい。有名なところではMicrosoftMacromediaAdobe
はライセンスを取得しているので、ここのソフトで作成したGIF画像は大丈夫
とのことです。 詳しくは、こちら 及び こちら をご覧下さい。

 実際は我々下々までは裁判沙汰になっていませんが、用心にこしたことは有
りません。「.gif」の特許についてはIBMも著作権を所有しているのでビル
ダーの「.gif」素材なら安心して使用できます。他の素材を使用する際、私は
「.jpg」→「.png」の順序で透過画像を処理しております。表紙のお月様は
「.png」で貼り付け、.jpg仕上げしたものです。そしてIBMとmacromedia
以外の「.gif」アニメは全部削除しました。

 国外ダイヤルQ2にように、いきなり多額の請求書が舞い込んで来たのでは
困ってしまいます。このことで、「.gif」著作権に抵触するか否かを判定する
ホームページさへあるくらいです。心にとめておいて下さい。
 余談がながびいてしましました。    m(_ _)m)



    トップへ戻る    総目次へ戻る    HP作成キットへ戻る

inserted by FC2 system