メモ帳で作るWEBページ index

はじめに

本ページは、インターネットの出来る環境で Windows パソコン(IE5.5かIE6)での説明になります。 第1回目ではありますが本ページの本体部分に当たる body 部(上下の罫線間)の記述では下記11個の タグを使用し、多少のメリハリを付けました。
(第1〜2回は文字装飾は一切施さずデフォルト設定で進行しますので、多少読みずらいですがご辛抱ください。)

  開始タグ <center>  終了タグ </center> 対象物を中央に配置します。
  開始タグ <h1>    終了タグ </h1>    見出し規格No.1です。
  開始タグ <h2>    終了タグ </h2>    見出し規格No.2です。
  開始タグ <h3>    終了タグ </h3>    見出し規格No.3です。
  開始タグ <h4>    終了タグ </h4>    見出し規格No.4です。
  開始タグ <h5>    終了タグ </h5>    見出し規格No.5です。
  開始タグ <h6>    終了タグ </h6>    見出し規格No.6です。
  開始タグ <p>     終了タグ </p>     段落(文字列の集合体、一群)を表します。
  開始タグ <a>     終了タグ </a>     リンクを張るときに用い、書き出しは <a href="フアイル名">になります。ソースの最下段をご覧ください。
  開始タグ <hr>     終了タグ不要     罫線を引きます。
  開始タグ <br>     終了タグ不要     改行させます。(強制改行と言います。)

「文字実体参照」について

HTML文書で、「<」や「>」を使用すると、タグの開始および終了と認識されてしまいます。 「<」と「>」で「要素」を挟んだものをタグ(マークアップ記号です。)と言いますが、<要素>〜</要素>の形で「〜部分」 をマークアップする以外には使用できないのです。『マークアップ以外の目的で記述する場合には、文字実体参照と呼ばれる方法で記述しなければなりません。 』

ソースを見て頂くと、奇異に感じる「 &lt; &gt; 」の記号は、その「文字実体参照」で画面上では夫々 「 < 」、「 > 」の形で表示される仕組みになっています。若し直接メモ帳に例えば「 <b> 」 と書いた場合には画面に表示されなくなります。お試しください。
(但しそれ以降の文章にbタグの効力が生じ、太字体に変化しますのでご注意ください。)

その他にダブルクォーティションで囲むための「 &quot; &quot; 」記号は 「 " " 」と表示します。 また、&の小文字形の[&]は、全て、&ampの小文字形で記述しなければなりません。 HTML文書(ソース)に直接記入してはならい記号が沢山存在していますが、取り敢えず、上記の4っつを覚えていれば十分です。
(HTML文書の裏方であるソースをご覧ください。開き方:[表示(V)]メニューから[ソース(C)]です。)

Web ページを作成し、インターネット上で公開するには

パソコンがインターネットに接続されている環境であれば、あとは無料で実現できます。
(インターネットに接続するには、何れかのプロバイダーと契約しなければなりません。)

Web ページとは

Webページは,HTMLという言語で書かれています。インターネット上で情報を公開・閲覧するには、 このHTMLの規則に従って記述されたHTML文書でなければなりません。HTMLはHyperText Markup Language (ハイパーテキスト・マークアップランゲージ)の略です。

HTMLとは

「<」と「>」で「要素」を挟んだものをタグと言います。、そのタグと終了形の</要素>のタグで 記述内容を挟んでマークアップします。その、マークアップされた部分は、要素に従ってレンダリング (理解可 能な表現)されます。ブラウザで画面表示される「文字列」「画像」等全てのものは、この<要素>タグの 影響によりレンダリングされたものです。
(実際には、「要素」だけでは内容が不十分なので、細分化した「属性」と具体的な数値・仕様を示す「属性値」の 3つを書き込むことが殆んどです。)

WEBページを作っていく上での準備です。

Windows 機にプリインストールされているソフトで、WEBページを作ることができます。

使用するソフト

テキストエディター

HTMLを記述し、ページを作成するには、テキストエディターが必要です。Windows の付属のソフト「メモ帳」を使用します。 [メモ帳]の起動:「スタート→プログラム→アクセサリ→メモ帳」という手順です。

ブラウザ

ブラウザは、インターネット上のHTML形式のデータを表示するために必要なソフトです。現在一番使われている 「ブラウザ」に、[InternetExplorer(以下I.E)]があります。(その他は省略させていただきます。) これだけで、HTML文書を作成することができてしまいます。

拡張子を表示する設定

フアイルの種類を表示する「拡張子を表示する設定」が必要です。パソコンのフアイルを操作すする上で、 イの一番に設定すべき作業です。 エクスプローラを起動し[ツール]→[フォルダオプション]→[表示タブ]をクリックします。 下のほうに、[登録されている拡張子は表示しない]のチェックを外します。 これで、フアイル名に拡張子が付くようになります。例えば、「HTML文書名.html」になります。

Webページ専用フォルダの作成

Webページ専用フォルダの作成Webページの作成の前に、任意の場所(デスクトップやマイドキュメント内など)に、 HTMLファイ)や画像フアイルを保存するフォルダを作ります。 デスクトップ内なら、画面のなにもない所で「右クリック」→[新規作成] →[フォルダ]。 マイドキュメント内でも、画面のなにもない所で「右クリック」→[新規作成] →[フォルダ] で新規フォルダが作成できます。名前は例えば、[homepage]とか、分かりやすい名前で任意の場所に置きます。 フォルダの名前は「半角英数小文字」を使用すると、後々困ることは無くなります。

作成した「HTMLフアイル」および、使用したい「画像フアイル」等、全て、同一フォルダ内に格納します。 なお、「ファイル名」も「半角英数小文字」を使用することです。 以上で、自分のコンピュータ内での「HTML関係ファイル」の作成・保存が完了しました。

Webページをインターネットで公開する

公開用スペースの確保(アドレス取得)

Webページをインターネット公開するための、スペースの確保する。 プロバイダーに入会すると大抵は自動的にサービスされます。

FTP ソフトの入手

Webページを公開するのに、作成したHTMLファイルを自分のプロバイダ(サーバ)にアップロード (ファイルを送る)をします。そのときにFTP(File Transfer Protocol)ソフトが必要です。 FFFTP(フリーソフト) が無料でダウンロードできます。

閑話休題
■文字装飾、配置については「メモ帳」でタグを書き込むだけで十分です。■
HTML記述法入門に直接関係はないのですが、やっていくうちに、より高度なページにしたくなったら、画像処理、音楽シーケ ンスソフト(無料版有)やFlashソフトなどを調達すれば良いでしょう。 更に、ハード面で写真・画像の採り入れにデジカメ、スキャナが有ればベターです。

出てきた用語の解説

▲W3C;     World Wide Web Consortium の略称で、World Wide Web(つまり、インターネットのこと。) で利用される技術の標準化をすすめる団体。

▲WEBページ: 通称ホームページのことです。

▲タグ:      メモ帳等エディタで特定の行や場所に印を付けるなどマークアップするための記号で、 大抵開始タグ「<要素>」と終了タグ「</要素>」をセットで使用します。

▲見出し:    「HTML」では、「<hn>」を見出しに使う決まりなっています。( n は1〜6までの数値です。)

▲要素:     一つの文書を書くうえで、夫々決まった表現が使われていることと思います。 例えば、文書名、第一章本文、第2章本文、画像挿入、箇条書き、引用文、奥付け・・・等があり、 洋の東西を問わず文書の構造は同じ様なものと言えることができます。そこで「HTML」では、夫々の 「意味を持った言葉」の略語(英語名の)を数十個を用意して「要素(element)」と名付けています。 要素を「 < 」「 > 」で挟んだものを「タグ」と称します。HEML文書では、このタグの適正使用が要求されています。

▲ブラウザ:   ウェブページ閲覧ソフトで、代表的なものに「インターネットエクスプローラ (IE)」や 「ネットスケープナビゲータ(NN)」「モジラ(Mozilla)」などが挙げられます。

▲プロバイダー: インターネットへの接続サービスを行う業者

▲サーバー:   インターネット上で各種のサービスを提供しているコンピュータ

▲アップロード: ローカルのコンピュータから、ホストコンピュータにファイルを転送し、他のユーザーにそれを公開すること。

その他、実体参照: HTMLソース: 拡張子: フォルダ: FTP ソフトは記事の中で説明済み。

注意書き:

このページで使用した<center>タグは、非常に便利なタグですが、W3Cでは現在「非推奨」タグ になっており、近い将来消滅することになっています。しかし、このHTML入門段階では、簡潔で意味が分かり易いので、 敢えて使用しました。(2005.2.10記)

トップへ戻る     スタイルシート目次へ戻る
メモ帳で作るWEBページ1へ

inserted by FC2 system