実験学習の仕方

このページは、難解なHTML・CSS・Javascriptを、メモ帳で簡易htmlファイルを作って体験するためのページです。windows10の標準ブラウザであるEdgeと、標準アクセサリのメモ帳を使うことをお勧めします。
●メモ帳の設定
メモ帳は、テキストエディターとしてwindowsに用意されているものです。以前は、日本語版として文字コードはshift-jis(ANSI)を使うことが初期設定でしたが、windows10のメモ帳は現在の国際標準であるUTF-8が標準になっています。従来のshift-jisで作られたファイルも編集できますが、他のソフトからコピー貼り付けする場合、殆どがUTF-8を使っています。もう、shift-jisのページは古いのです。UTF-8を使うための設定は不要ですが、文字コードを意識してください。表示メニューを開き、ステイタスバーにチェックを入れて下さい。

右下に、コードが表示されます。
●初めてのhtmlファイル・リンク集を作る

メモ帳に、リンクタグを書き込んで、ネットアドレス帳を作る。

リンクタグは、<a ref="httpから始まるアドレス">クリックするための文字</a><br>

の書式で、説明のための赤い文字は半角文字です。"で挟んだアドレスは、実際のページを見て、アドレスバーを選択してコピーして貼り付けることもできます。

<a href="http://winboys.net">Win坊のページ</a><br>

メモ帳に、上の一行を書き込みます。

拡張子をhtmlに直して、名前を付けて、デスクトップに保存します。

名前が違いますが、右上が保存されたファイルのアイコンです。Wクリックして開くと、アンダーラインのリンクが見えます。拡張子がhtmlで保存されれば、ブラウザのアイコンになっているはずです。これをWクリックして開くと、ブラウザで開かれます。これが、webの仕組みです。タグの文字は出てきませんが、コピーが不完全でタグの文字が取れていたりすると、タグの文字が出てきます。

メモ帳で追加編集をするときは、右クリック・プログラムから開く・メモ帳を選びます。編集した後、上書き保存します。同じ形式で追加して保存してください。

●コピーしたタグを、メモ帳に張り付けする
ページの中のサンプルタグコードを選択し、ctrl+Cで(コントロールキィを押しながらCのキィ)コピーします。それを、開いたメモ帳にctrl+Vで(コントロールキィを押しながらV)張り付けます。タグは、＜で始まり＞で終わっています。この範囲を選択してコピーし、張り付けます。

この時、タグには改行が無いので、一行で張り付きます。改行が無いことが大事なので、そのままでも良いのですが、見えにくいという場合、表示メニューを開き、右端で折り返しにチェックを入れます。

このように、表示されます。以後、メモ帳の設定は固定されます。

拡張子がhtmlで保存されれば、ブラウザのアイコンになっているはずです。これをWクリックして開くと、ブラウザで開かれます。これが、webの仕組みです。タグの文字は出てきませんが、コピーが不完全でタグの文字が取れていたりすると、タグの文字が出てきます。

●こんな簡単な操作で、webページが作れますが、あくまでこれは実験用のファイルです。実際に公開する場合は、htmlの決まりに従った追加のタグが必要です。「公開するには」を見て下さい。ブラウザによっては、危険と判断され、表示できないものもあります。実験学習には、危険も伴います。基本知識をもち、自己責任で実行してください。

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

HTMLは、webで共有される書式で、HTML5の時代になり、より高機能なwebアプリの環境を実現しています。パソコン・スマホ・タブレットなど、環境やOSの違いを超えた、情報共有の舞台です。webページが高機能になって、今やメモ帳でホームページを作る人はいません。本講座は、htmlを理解するために、実験的にメモ帳でhtmlを書いて確認することを目的としています。

Hyper　Text　Markup　Language　の略で、web上で共有される、共通規格の文書の書き方です。web上で共有されるため、コンピューターの種類・OS・言語を問わない国際規格の書式で、Text（文字）だけで作られた高機能なドキュメントです。インターネット上の文書を記述するために作られました。インターネット上を安全に配送されるため、中身は文字コードだけのものです。

htmlで書かれたテキストファイルは、ブラウザさえあればワードやエクセルなどなくても開くことができます。htmlのバージョンが上がるにつれ、多くの機能が追加され、メールやSNSや動画共有などにも使われ、ゲームなどにも使われています。

インターネットの拡大と共に、規格も進化し、現在はhtml５という時代になっている。30年前に勉強したhtmlの知識は、リニューアルしないといけません。昔の常識は、今の非常識になっているからです。この講座は、初めてではない人のものです。メモ帳一つで、実験しながら勉強できるようになっています。

●ブラウザとは

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

●現在のHLML5のバージョン

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

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

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

●htmlの用途の拡大

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

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