岩手県立総合教育センター 情報教育ウェブこのページの本文へ

ここから本文Webページ教材開発テキスト

3-1 Webページのファイルを作る

@ エクスプローラで右クリック「新規作成」→「フォルダ」をしてください。
A エクスプローラで拡張子を表示させます。
B エクスプローラで右クリック「新規作成」→「テキスト ドキュメント」で「新しいテキスト ドキュメント.txt」を作成します。
C 「新しいテキスト ドキュメント.txt」を右クリックして「名前の変更」→「11kyouzai.html」と入力します。
D 右図の注意が出ます。「はい」をクリックします。
E アイコンが「e」に変化します。
F プログラムの「Windowsアクセサリ」から「メモ帳」を起動します。
G メモ帳に、先ほど作成した「11kyouzai.html」をドラッグ&ドロップします。
H メモ帳で次のように記入します。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>教材</title> </head> <body> Web教材ページ </body> </html> ←HTML5で書かれていることの宣言
←HTML文書です
←文書のヘッダ情報、日本語です
←文字コードはUTF-8です
←タイトル
←文書のヘッダはここまで
←文書の本体はここから
← 表示される文
←文書の本体はここまで
←HTML文書はここまで

I メモ帳で「ファイル」→「上書保存」
J 文字コードを「UTF-8」を選んで「保存」をクリックします。
K エクスプローラで「11kyouzai.html」を左ダブルクリックすると、IE(インターネット・エクスプローラ)が起動してWebページが表示されます。記入したように表示されましたか?
●文字が正しく表示されない(文字化けする)ときには文字コードが「UTF-8」になっていない可能性があります。もう一度、メモ帳で「ファイル」→「上書保存」で確認しましょう。

※発展1: 表示している文字を変えてみましょう。
※発展2: メモ帳で文字を2行にして書いてみましょう。
      Webページはどうなりますか?


「.html」はWebページを表示するためのファイルを示す拡張子です。
 ファイル名は必ず半角英数にしてください。全角文字のファイルはインターネットでは基本的に表示できません。