実験学習の仕方

このページは、難解な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の決まりに従った追加のタグが必要です。「公開するには」を見て下さい。ブラウザによっては、危険と判断され、表示できないものもあります。実験学習には、危険も伴います。基本知識をもち、自己責任で実行してください。