かならずお読みください→
今ご覧になっている、モニターに表示されたページのことを「Webページ」と言います。 いくつかのWebページが集まって一冊の本のようになっている Webページ群を「Webサイト」と言います。またその表紙にあたるWebページを「トップページ」と言います。
ところが、これらをぜんぶひっくるめて「ホームページ」と呼ぶことがよくあります。厳密にはこれは正しくありませんが、特に話の本筋に影響が少ない場合には、わかりやすさを優先するために、本文でも「ホームページ」の言葉を適宜使っています。
インターネットで検索すると一瞬のうちに何百万ものページがヒットすることがあります。このように世の中にはかなりたくさんのウェブページがあります。
1990年頃の初期のウェブページは文章と簡単な写真やイラストくらいしかありませんでしたが、その後色彩豊かになり、動画を表示し、音がでるようになり表現が豊かになりました。最近ではマイクに話しかけると返事をしたり、計算したり、翻訳したりいろいろできます。買い物をしていると、商品の最中にお勧め商品が表示されることもあります。
この30年間で様々な技術が開発され、ウェブサイトでいろいろなことができるようになりました。そしてついにアプリ（アプリケーションソフト）にかなり近いこともできるようになってきました。これがウェブアプリのはじまりになります。
このようにウェブアプリはウェブページの改善により誕生したため、ウェブページの技術が基本になっています。そのためウェブアプリの作り方の話は、まずウェブページの作り方から始めるのが良いと思います。
ただ、長い話ばかりでは退屈ですので、すこし作業と体験をしながら進めていこうと思います。また、初心者の方にはわかりにくい言葉はその都度説明しますので、知っている方はどうか読み飛ばしてください。
html（hyper text markup langurage）はウェブページをつくるために使用する『ことば』（langurage）です。言い換えるならパソコンやスマホの画面にどんな文字や画像を表示するのか、そして何をどう表現するのかをhtmlという言葉をつかって書き記していきます。これは建築家が図面で建物を表現するのとよく似ています。 このhtmlで書き記したhtmlファイルをブラウザが解読して、画面に文章が表示され、画像が表示され、スピーカーからは音が聞こえてくるのです。
ブラウザ ウェブページを閲覧するために使用するアプリケーションです。例えばchromeやedgeやfirefoxやoperaやsafariなどいくつか種類があります。これらをまとめてブラウザと呼びます。
幸いなことに、私達が日常的に使用している『言葉』とはことなり、htmlは世界共通で、多くの人が同じやり方でウェブページを作っています。このため知識や経験がインターネット上に沢山蓄積されていて、これらを利用したり参考にしたりできます。よその国の言葉はわからなくても、その人が作ったhtmlやプログラムは読むことができます。 たとえば、test.html とい名前のファイルを次のように作り保存します。
拡張子 ファイル名のピリオドより後ろの文字を拡張子といいます。主にファイルの種類を表示します。拡張子htmlはhtml言語で書かれたファイルであることを示しています。
通常windowsでは、ファイルの拡張子は表示されません。 表示させる手順は、『拡張子の表示方法』と検索してください。 Windowsの種類により手順が異なりますので記憶するより検索するほうがうまくいくようです。ただし拡張子などのキーワードは覚える必要があります。検索をうまく使えると記憶力を節約できます。
さて、test.htmlファイルを以下のように作ります。
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>
このファイル作成には通常テキストエディタを使います。Windowsのメモ帳をはじめ、各種のテキストエディタがありますので、皆さんお好みに合わせて選ぶのがいいでしょう。 ここ を右クリック、名前をつけてリンク先を保存でファイルはダウンロードもできます。
さて、上記の文字を入力してtest.htmlという名称で保存します。そしてこのファイルのアイコンをダブルクリックするとブラウザが起動し、真っ白な画面が表示されます。真っ白なのは中身が何もないからです。
次に、以下のように<body>と</body>の間に、『こんにちは』と入力し保存します。
<!DOCTYPE html> <html> <head> </head> <body> こんにちは </body> </html>
先程と同じようにこのhtmlファイルのアイコンをダブルクリックしてブラウザで開くと、さきほど真っ白だった画面に、『こんにちは』の文字が下のように表示されます。
htmlファイルを書き換えて保存し、ブラウザで開くと、書き換えた部分がきちんと表示されます。あなたの操作に従ってパソコンが動いているのです。（あなたの命令どおりにパソコンが動いているとも言えます）
またブラウザの画面上で右クリックすると、『ページのソースを表示する』メニューが表示されこれで自分が作ったhtmlファイルを見ることができます。同じことがほかのウェブページでできます。このようにすればよそのウェブページがどんな作り方をしているのか知ることができます。
このように、<body>と</body>の間には、文字や記号や画像などのモニターに表示される事柄について記入します。つまり<body>はカッコ開く、</body>はカッコ閉じるのように範囲を表していることがわかります。 片や<head>と</head>の間には画面に表示されない、例えばページのタイトルやメタデータ（HTML を誰が書いたのかとかその HTML を表現する重要なキーワードなど）の情報などを記載します。
そして<html>と</html>は、全体の始まりと終わりを示します。一番上の、<!DOCTYPE html>はこのファイル全体がhtml形式であることを表現しています。
『ありがとう』の代わりに別の言葉を入力し保存しダブルクリックするとそのようにブラウザに表示されます。さあこれで、文章を書けるようになりました。おめでとうございます。
でも実際に長い文章を書いてみるとあることに気がつきます。そう読みにくいのです。このやり方では、文字が並びますが改行しません。また一行が画面の左から右までいっぱいになります。文字サイズも小さくメリハリがありません。 まず下のように文章を<p>と</p>で区切って見ましょう。
<!DOCTYPE html> <html> <head> </head> <body>こんにちは
</body> </html>
本来なら下のように<p>と</p>の間には段落が入ります。
<!DOCTYPE html> <html> <head> </head> <body>1番目の段落
2番目の段落
</body> </html>
そうです、ｐはパラグラフ（Paragraph）のｐです。 段落のはじめに一文字下げないとか前後で行の間隔が広がるなどいくらか日本語のルールとはことなりますがこれで段落ごとに配置される様になります。
さてここで『ワープロでやるようなフォントや書式の設定はどうやるのか』と思っている方もおいでのことと思います。
書式設定は、<head>と</head>の間にさらに<style>と</style>をつくりそこに記載します。
<!DOCTYPE html> <html> <head> </head> <body>こんにちは
</body> </html>
これをブラウザで表示すると
と表示されます。`color:red;`で、フォントの色が赤く、`font:“メイリオ”;`で、フォントがメイリオに、また`font-size:20px;`で、フォントサイズが20ピクセルに指定しています。これらがpに関する指定事項としてまとめられています。これでフォントの色、種類、大きさを自由に変更できるようになりました。
他の設定について知りたいという方は、「styleタグ」や「style属性」で検索してください。ただし量が多いですので全部しっかり覚えてから次に進むのはお勧めしません。（辞書を暗記しなくても語学の勉強はできます）必要になったらその都度調べて使って行くのがお勧めです。
さてここにいぬの画像があります。
次はこのいぬの画像を表示してみましょう。 まずtest.htmlファイルに14行目を追記します。
<!DOCTYPE html> <html> <head> </head> <body>こんにちは
</body> </html>
そして上のいぬの画像にマウスを合わせて、右クリックして「名前をつけて画像を保存」でこの画像ファイルをdog.jpgで保存してください。ブラウザの設定によって保存場所を訪ねて来ますので適切に対応してください。何も出ないときは、ダウンロードに保存されます。 このdog.jpgをtest.htmlと同じ場所（フォルダ）にコピーします。 そこでtest.htmlをダブルクリックすると以下のように表示されます。
これで文章も画像も表示できるようになりました。
さて次は、10行から13行を追加し、18行目を書き換えます。
<!DOCTYPE html> <html> <head> </head> <body>こんにちは
またtest.htmlをダブルクリックすると今度は以下のように表示されます。
ダックスフンドになりました。（ちがいます）
18行でいぬの画像にimage1と名前をつけました。そしてstyleで、image1は幅300ピクセル高さ150ピクセルと寸法を指定しました。
画像のスタイル指定も文字に劣らずたくさんあります。色々と凝ったことをしようとしすると、styleがどんどん行が増えていき、読みにくくなります。そうなったら、拡張子.cssのファイルを別に作って、htmlファイルから読み込むようにしますがこれはまた別の機会にお話いたします。
さて今回は、htmlを最低限の方法でつくるやり方をご紹介しました。また皆さんには実習のようなことをやっていただきました。いかがだったでしょうか。 この実習の目的は、パソコンは人間の命令どおりに動かすことができる機械だということを体験して頂くことです。ご紹介したようにhtmlを書くことで多様な表現が可能になるのです。
世界中の人たちが今回ご紹介したやり方をでホームページを作っています。なかには色々な工夫を考えつく人たちがいたり、困ったときはこうすればいいとか、間違えやすい文法を整理してまとめようなどと考えたりします。 そしてそれを自分がいつでも簡単に見られる方法で記録しようとします。どうやって？もちろんそんなホームページをつくるわけです。
このような理由で、ホームページを作るために参考になる情報は、ネット上にたくさん存在します。私も、『html 〇〇のやり方』などと検索をよくします。簡単な説明から詳しい説明までたくさん見つけることができるのでとても助かります。
もしこれらの作業を自分でやらずに誰かに依頼するとしたら、かなり高額の請求が届くことでしょう。こんなやりかたではお金がいくらあっても足りません。
また開発というものは失敗がつきもので、結果はある意味で運次第です。そのため努力しても報われないことはよくあります。 このような取り組みを維持し継続するには、はじめからお金がかからないようなやり方を工夫する必要があります。
ここでご紹介する方法は、時間はかかります。苦労はします。すべてが水の泡になるかもしれませんが、お金はあまりかかりません。 大金持ちになる可能性はとても低いですが、どん底におちる可能性も低いです。
例えば生活するための収入があり、空いた時間を使って、困っている人の助けになるとか、そのほかの目的のために何事かを企画実行しようとする人には、ここでご紹介するような方法が適していると思います。
今回ご紹介したのは、初めての方々を対象とした最低限でhtmlをつくるやり方です。 そのため <html lang="ja"> や <meta charset="utf-8"> は、省略しました。初めての方々も自分で勉強を進めていけば、まもなくこれらも学ぶことになるでしょう。最初はゆっくりあるきだすのが長続きするコツだと思います。
2023/09/15 公開
研究企画課リハ工学科にもどる
←もくじはこちらです