1.HTMLとはWebページのソース

Hyper Text Markup Language の略で、web上で共有される、共通規格の文書の書き方です。web上で共有されるため、コンピューターの種類・OS・言語を問わない国際規格の書式で、Text(文字)だけで作られた高機能なドキュメントです。インターネット上の文書を記述するために作られました。インターネット上を安全に配送されるため、中身は文字コードだけのものです。
htmlで書かれたテキストファイルは、ブラウザさえあればワードやエクセルなどなくても開くことができます。htmlのバージョンが上がるにつれ、多くの機能が追加され、メールやSNSや動画共有などにも使われ、ゲームなどにも使われています。
インターネットの拡大と共に、規格も進化し、現在はhtml5という時代になっている。30年前に勉強したhtmlの知識は、リニューアルしないといけません。昔の常識は、今の非常識になっているからです。この講座は、初めてではない人のものです。メモ帳一つで、実験しながら勉強できるようになっています。

●ブラウザとは
 HTML書式で書かれたソースを、埋め込まれたタグという命令語を判断し、画面を作るアプリです。インターネットエクスプローラー・エッジ(windows10以降、インターネットエクスプローラーの代わりに使われる)・グーグルクロム・ファイヤーフォックスなど、多くの種類があるが、基本的にはどれを使っても、同じようにページが表示される。それぞれ、性能を競って改定され、シェア争いをしているが、2020年現在グーグルクロムが50%以上のトップのシェアを占めている。htmlドキュメントの表示のためのブラウザですが、htmlが出来ることが増えている今、ブラウザはOSにもなっています。スマホは、殆どがブラウザで動くアプリです。そのため、windowsでないChromeBookというパソコンも登場しています。ブラウザで出来ないことをするのがパソコンの役割ですが、メールもSNSも、ワードもエクセルも、すべてブラウザで出来ます。ブラウザとは、オペレーションシステムで、htmlはそのオペレーションシステムで動くファイルです。ブラウザの動かないコンピューター環境はありません。従って、データの共有は、ブラウザを通して行われます。ブラウザを動かすファイルが、htmlです。

●現在のHLML5のバージョン
もともと、htmlのソースは、ファイルサイズを小さくするためのものだったので、数KBの小さなページ単位で作られていたが、現代は、数MBの巨大なものになっていて、基本的なHTMLタグの他に、CSSJAVASCRIPTなどのスクリプトが混じり、とてもテキストエディターだけでは作成できない巨大なソースになっている。


ページのソースを見たければ、ページ内を右クリックし、メニューの中の「ソースの表示」を選ぶ。左がedgeのメニュー 右がchromeのメニュー 背景が、表示されたソースの一部



このソースを作ることが、かつては「ホームページを作る」という作業でした。htmlの機能が拡大され、ソースを手書きしてhtmlを作ることは不可能になりましたが、ソースを理解できれば、コピペして編集することもできます。

●htmlの用途の拡大
htmlは、blogやホームページだけでなく、webアプリといわれる殆どで使われています。メールやfacebook・twitter・youtubeなども、中身はhtmlで作られています。htmlで作れば、パソコンでもスマホでも、windowsでもmacでも同じように使えます。言語や、コンピューター環境によらず、使えるものになります。

ポイント htmlは半角の記号英数文字の、英語のスクリプトで作られている。

14.JavascriptとCSSを組み合わせる


 htmlタグに、CSSを追加してより見栄えの良いページの作成を解説してきましたが、これにJavascriptを組み合わせると、より高機能のページになります。CSSは奥が深く、まだまだCSSで出来ることがありますが、これ以上は簡易な説明で使えるものではありません。そこで、ここからは、もう一つのJavascriptの基本に進みます。Javascriptは強力なので、嫌われることもあり、「Javascriptを有効にする」許可をもともるブラウザもあります。ページにも、「Javascriptを有効にして見て下さい」と表示するページもあります。エクセルのマクロプログラムと同じです。Javascriptを使わないでCSSだけで機能を実現するよう、CSSは進化していますが、Javascriptを追加する方が、シンプルにhtmlを作れます。

●javascriptと組み合わせた、lightbox
blogや通販サイトなどでも使われているのがlightboxというCSSとJavascriptを組み合わせたもので、公開されているので無料で使えます。lightbox.cssと、jquery.jsなどの拡張子jsのジャバスクリプトというファイルを使っています。
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js" type="text/javascript"></script>
<a href="gazou1.jpg" data-lightbox="group"><img src="gazou1.jpg" width="300"></a>
これも、そのまま動くので、確認してください。こちらは、クリックして拡大画像を別ウインドウで表示するものです。htmlは、最後の一行だけです。
ここまで来ると、素人は、使い方だけ覚えて、CSSやJavascriptは丸ごとリンク先から使います。これらが、UTF-8の文字コードなので、S-jisのページで使うときに注意が必要です。もう、ページをS-jis作るのをやめたほうが良いのです。
http://www.winboys.net/digicame/csstest/lessonlb.html
サンプルは、上のリンクで確認してください。画像をクリックすると、別ウインドウが開きます。


2.HTMLファイルはテキストファイル

 テキストファイルは、メモ帳で作成できます。タグを含むテキストを書いて、拡張子をhtmlにして保存すれば、ブラウザで開くhtmlファイルができます。拡張子は、昔はhtmの3文字でしたが、windowsも4文字拡張子を使うようになりました。今後はhtmlを使いましょう。
●メモ帳を開き、テキストファイルを作って保存する
メモ帳は、windowsアクセサリにあります。これを開いて、メモ帳で作ります の全角8文字を書いてそのまま、デスクトップにhtml練習1のファイル名で保存します。このとき、メモ帳と保存の画面の矢印を見てください。なんと、メモ帳がutf-8に対応しています。これまで、メモ帳はANSI・シフトJISにしか対応していませんでしたが、世界標準のutf-8にも対応しているのです。これで保存すると、拡張子はtxtのテキストファイルとして保存されます。
・ 題 - メ モ 
フ ァ イ ル ( F ) 編 第 ( 印 き 式 0 
メ モ 帳 で 作 り ま す 
1 行 、 9 列 
ロ 
表 示 (M 
ヘ ル 7(H ) 
1 [ 0 % 
X 
コ 名 前 を 付 け て 保 
↑ ・ , PC , デ ス ク ト ッ プ , 
に i 司 に 
0 阡 に ~ 加 16P 
町 F -8 
0 
れ ( に n ( 色 ー 
promotion 
月 
デ ス ク ト ッ プ の 検 第 
新 し ワ ォ ル ダ 
目 お 気 に 入 り 
冨 ド キ ュ メ ン ト 
新 ビ ク チ ャ 
目 共 有 の お 第 に 入 り 
ロ 公 ま 動 画 
目 電 子 メ ー ル の 添 げ 
6 。 内 に ド ラ 
イ プ 
0 に を 2016 ・ 
Wndows (CRLF) CITE-8 
フ ァ イ ル 名 ( N ) : 第 第 習 
フ ァ イ ル の 種 第 「 ) : テ キ ス ト 文 番 「 t ) 
^ フ ォ ル タ - の 非 表 丁 
文 手 コ - ド 旧 : 
を ョ 33. tx ー 
保 に ) 
0 を に 02013 ( 
き 14-7-1 & 
ー 日 ⅱ 1k 
キ ャ ン セ ル
●テキストファイルの知識
保存されたテキストファイルは、拡張子txtなので、メモ帳が関連付けられており、アイコンは「メモ帳」になっています。アイコンの上に、マウスを置くとファイルの概要が表示されています。これをWクリックで開き、名前を html練習2 として保存し直します。その際に、保存画面の文字コードを開き、ANSIに変えます。ANSIというのは、従来のwindowsの日本語の文字コードである、シフトJISコードのことです。
•ht 雨 蓍 習 1 い メ モ 第 
テ ク ス チ ャ 
フ ァ イ ル 旧 旧 き 式 0 
ヘ ル ス H ) 
表 示 (V) 
コ 名 前 を 付 け て 保 戸 
メ モ 帳 で 作 り ま す 
↑ ■ , PC , デ ス ク ト ッ プ , 
0 
刄 
デ ス ク ト ッ プ の 検 
新 し い 方 ル ダ - 
整 理 ・ 
ロ 
誓 有 の お 气 に 入 り 
」 公 動 画 
ロ 電 子 メ ー ル の ま は 
3D オ プ ジ ェ ク ト 
↓ タ ウ ン ロ ド 
・ デ ス ク ト ッ プ 
htn 第 習 2.t に 
フ ァ イ ル 名 ( N ) : 
ッ キ ス ト 文 書 に txt) 
18 % 
Windows(CRLF) 
い ト 8 
フ ァ イ ル の 種 物 ( 第 : 
文 字 コ - 
保 謇 
キ ャ ン セ ル 
へ N 
^ フ ォ ル ダ - の 非 表 示 
類 : テ キ ス ト ド キ コ メ ン ト 
サ イ ス : 24 バ イ ト 
20 ~ 0 ・ 06 ・ 10 
(2)•png 
更 新 辷 時 : 取 ′ 10 14 : 49

テキストファイルは、何の書式もありませんが、文字コードの種類があるのです。従来のwindowsでは、テキストファイルの文字コードはシフトJISと決まっていました。しかし、これは日本だけの規格で、世界の標準ではありません。インターナショナルなWebページも、アジア圏ではそれぞれの漢字文字コードがあり、文字コードの異なるページを見るときに、いわゆる「文字化け」という現象が生じていました。半角文字は1バイト、全角文字は2バイトというシフトJISの世界は、すべての国の文字が1文字3バイトというユニコードになりました。1バイトだと、256種の文字が、2バイトだと32000種の文字が、3バイトだと84000種の文字がコード化され、アルファベットやひらがななど世界中の文字が、同じコード体系で表示できます。テキストファイルのサイズは増えますが、それでも、コードの種類の違いが無くなり、文字化けのないテキストが見られます。
ちなみに、utf-8で保存した日本語8文字のファイルは、ファイルサイズ24バイトですが、ANSIで保存したものは、16バイトになっています。昔の作ったテキストファイルは、ANSIなので、開いて編集して保存しても、コードは変わりません。htmlを作るには、この、文字コードの違いにも気を付けなければいけません。

テ キ ス ト ト : キ ュ メ ン ト 
サ イ ズ 16 バ イ ト 
更 新 日 時 : 却 20 / ( ′ 1015 : 師
ANSIで保存したテキストファイルは、ファイルサイズ以外違いはありません。テキストファイルの文字コードの違いは、基本的には開くソフトが自動認識するので、ユーザーは取り敢えず意識しなくて済みますが、編集者は理解しておく必要があります。

●htmlファイルにする
メモ帳で作ったテキストファイルを、htmlファイルにするには、ファイルの拡張子をtxtからhtmlに直せば良いです。拡張子を、ファイル名の一部なので、名前の変更で直すこともできますが、windowsに怒られます。いったん開いて、保存し直すと良いでしょう。また、最初から拡張子付きで保存します。
拡張子を変更すると、関連付けが変わって、開くソフトが変わり、アイコンが変わります。
名 前 の 変 更 
第 張 子 を 変 更 す 0 と 、 フ ァ イ ル が え な く な 0 可 能 住 が あ り ま す . 
変 更 し ま す が ? 
ー い い え 間

画像ファイルの拡張子を変えて、テキストファイルにしたら、わけのわからない文字が並んだり、大きすぎて開けなかったりして、windowsが壊れたようになりますが、同じテキストファイルは、壊れることはありません。拡張子が変わった、このファイルを開くと、新しいedgeブラウザが開いてくれます。
h を 第 蓄 2 物 
0 
メ モ 第 で 作 り ま す 
〇 フ ァ イ ル ー C:/Users/nobsz/Desktop/htmlAE2.html
タグもなく、文字しかないので、画面はメモ帳と同じですが、ファイルのアドレスが表示されています。
htmlファイルは、それがどこにあるかという、アドレスという属性があります。
ポイント htmlは、メモ帳で、拡張子htmlで、文字コード utf-8 で作る