はげちゃんの世界

人々の役に立とうと夢をいだき、夢を追いかけてきた日々

中級講座2

 Webページの原版作成

あなたと一緒につくるウエブページは、日本史の謎を推理する本です。日本史は日本人の先祖である人々の成功と失敗の記録集です。歴史を学ぶというのは年号や事項を記憶するのではなく、なぜそのようなことが起き、その結果はどうなり、それは後にどのような影響を与えたか、という日本人の考えや行いの流れを学ぶことです。

あなたのパソコン内にウエブページをつくる作業を開始します。専用のフォルダーを作成し、ホームページをつくるためのソース原版をエディタにコピーして保存します。ソースの解説を読みながら、最少必要事項を入力してウエブページの原版を完成します。

1 専用フォルダーの作成

あなたのパソコンのドキュメントにあなたが作成するHTML5のウエブページに必要なものすべてを収納するフォルダーを作ります。

マイドキュメント内で右クリックして、「新規作成」で「フォルダー」を作成します。「新しいフォルダー」の上にマウスのポインタを重ねて右クリックし、「名前の変更」を選択して「home」と入力します。この「home」フォルダー内に、表紙やテキストファイルと、写真類を保管するフォルダーを収納することになります。

では、マイドキュメント内に作成された「home」フォルダーをダブルクリックで開きます。「home」のフォルダー内で右クリックして、「新規作成」で「フォルダー」を作成します。「新しいフォルダー」をポイントして右クリックし、「名前の変更」を選択して「shasin」と入力します。homeフォルダーの内容

「home」フォルダー内に表紙やテキストファイルを収納し、「shasin」フォルダーに写真などを収納します。

トップへ戻る

2 ソースの原版作成

ウエブページを作成するには専用の「エディタ」があると便利です。高機能のものは必要ありませんが、あなたが使いこなしているエディタがあればそれをお使いください。初級講座ではフリーソフトの「Crescent Eve」を紹介しました。インストールしていればそのままお使いください。

Webページはどのページにも共通する約束事があります。あなたが使いこなすW3Cの「文法」や、表示順序などを示す「ダグ」などがこれに該当します。共通している部分は「コピー&ペースト」でテキストファイルを作成するので、毎回スペル(アルファベットの綴り)で悩むことはありません。

中級講座の2 基本技術の利用」で紹介した「Webページのソース」を基に、あなたが使用する「ソースの原版」をつくりました。作業が必要な個所に「◆」の記号を入れてあります。初級講座のように「ソースの原版」を「エディタ」にコピーして利用します。

トップへ戻る

 2-1 エディタの調整

エディタはUTF-8に対応していない場合があるので、「Crescent Eve」を例にして対応のさせ方を説明します。起動させたら「ツール」を開いて「Crescent Eve起動時の設定」をクリックします。表示されたダイアログの「文字コード」をクリックして「デフォルト文字コード」で「UTF-8」を選択して閉じます。

再起動させると「Crescent Eve」の設定が保存させます。分かれば簡単なことですが、中級講座を何度作り直しても文字化けが起こり、解決方法を思い出すまで相当な時間を費やしました。

トップへ戻る

 2-2 ソースのコピー

エディタを起動して無地の画面を表示させます。エディタの画面は、ブラウザの画面と重ならない位置に配置し、ブラウザに表示された「Web頁作成法」を読みながらエディタで作業を行います。

まず最初に、ソースの原版を右下の図のように<!doctype html>から</html>まで選択してコピーします。選択した部分は青色になります。

初級講座で説明しましたが、エディタで行う作業は一区切りつくたびに「上書き保存」をします。これを忘れるとそれまでの努力はすべて無駄になります。

トップへ戻る

 2-3 ソースの原版

以下は、HTML5で書かれたWebページ作成講座で利用するソースの原版です。

<!doctype html>
<html lang="ja">
<head>
<meta name="keywords" content="◆">
<meta name="description" content="◆">
<meta charset="utf-8">
<title>◆</title>
<link rel="stylesheet" href="styles.css" >
<!--[if Lt IE 9 ]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
<![endif]-->コピーする範囲の例示
</head>
<body>
<header>
<h1>◆</h1>
<h2>◆</h2>
</header>
<nav>
<div class="menu">
<ul>
<li><a href="◆">◆</a></li>
</ul>
</div>
</nav>
<div id="main">
<article id="content">
<section>
<h1>◆</h1>
<h2 id="site01">◆</h2>
<p>◆</p>
<p class="top"><a href="◆">トップへ戻る</a></p>
</section>
</article>
<aside>
<section id="sidebar">
<h3><strong>目次</strong></h3>
<ul>
<li><a href="#site01">◆</a></li>
</ul>
<h3><strong>推薦情報</strong></h3>
<ul>
<li><a href="◆">◆</a></li>
</ul>
</section>
</aside>
<footer>
<div class="foot">
<p class="foot">Copyright 2017 ◆. All rights reserved.</p>
</div>
</footer>
</div>
</body>
</html>

トップへ戻る

 2-4 ペーストと保存

ディスクトップに表示されている「エディタ」画面の白地部分をクリックすると、画面左上にカーソルが点滅します。エデイタのメニューバーで「編集」から「貼り付け」を選ぶと、エディタにブラウザ画面と同様アルファベットの文字列が表示されます。

エディタのメニューバーで「ファイル」から「名前を付けて保存」を選びます。保存場所はマイドキュメントの「home」を指定し、ファイル名を「index.txt」として「保存」をクリックします。保存が済んだエディタは、メニューバー右端の「×」ボタンで閉じます。

トップへ戻る

3 付加情報の整備

 3-1 フォルダー内の確認

マイドキュメントの「homepage」フォルダーに「index.txt」ファイルと「shasin」homepageフォルダー内のファイルのフォルダーがあります。「index.txt」ファイル上で右クリックし、 「プログラムから開く」から「Crescent Eve」を選択して開き、ソースに「付加情報(meta)」を入力していきます。

トップへ戻る

 3-2 キーワードの入力

ソースの「"keywords"」の「◆」の位置にキーワードとなる単語を入力します。 次の文字を選択して、メニューバーの「編集」から「コピー」をクリックします。

日本史の謎,奇跡の列島と民族,過酷で美しい自然,私たちの祖先,歴史は断続する,珍しい民族

エディタに表示されているソース、「"keywords"」の「◆」を選択してエデイタのメニューバーで「編集」から「貼り付け」を選ぶと、「before」と「after」は次のようになります。

<meta name="keywords" content="◆">

<meta name="keywords" content="日本史の謎,奇跡の列島と民族,過酷で美しい自然,私たちの祖先,歴史は断続する,珍しい民族">

トップへ戻る

 3-3 説明文の入力

あなたと一緒に作るウエブページは日本史の謎を推理する本です。「"description"」の「◆」の位置に、発信する情報の説明文を百字以内で入力します。次の文章を選択してメニューバーの「編集」から「コピー」をクリックします。

日本史は私たちの先祖である人々の成功と失敗の経験集です。原因があるから結果が生まれます。結果は新たな原因を生み出し再び結果をつくります。日本民族の考えや努力がどのように培われてきたかを尋ねましょう。

エディタに表示されているソース、「"description"」の「◆」を選択してエデイタのメニューバーで「編集」から「貼り付け」を選ぶと、「before」と「after」は次のようになります。

<meta name="description" content="◆">

<meta name="description" content="日本史は私たちの先祖である人々の成功と失敗の経験集です。原因があるから結果が生まれます。結果は新たな原因を生み出し再び結果をつくります。日本民族の考えや努力がどのように培われてきたかを尋ねましょう。">

トップへ戻る

 3-4 タイトルの入力

Webページは一冊の本のような情報のかたまりですから、タイトルは書名と同じ意味を持ちます。「<title>」の「◆」を選択し、あなたがつくるWebページのタイトルを全角文字でキーボードから「日本史の謎」と入力すると、「before」と「after」は次のようになります。

<title>◆</title>

<title>日本史の謎</title>

付加情報の「キーワード・説明文・タイトル」などはロボット検索エンジン用の情報です。ロボット検索エンジンは世界中のありとあらゆるWebページを巡回して検索用データベースを作成しています。

検索エンジンを使うと、あなたのWebページの住所を知らない人でも「キーワード」と「説明文」と「タイトル」を組み合わせることであなたが作成したWebページを見つけ出す手助けができるようになります。

トップへ戻る

 3-5 CSSの保管位置

Webページに必要なものはすべて「home」フォルダーに保管します。スタイルシートのファイルは「style.css」という名前にし、「index.txt」ファイルと同じ位置に保管します。ここではすでに「style.css」と入力してあります。

<link rel="stylesheet" href="style.css">

スタイルシートが適用されない古いインターネットエクスプローラ9(略称:IE9)以下のために用意されたスクリプトが次のソースです。

<!--[if IE ]>
 <link rel="stylesheet" type="text/css" href="ie.css">
 <![endif]-->

そして、「head」の領域を閉じます。

</head>

ここまでエディタに入力した結果は以下のようになります。

入力結果

トップへ戻る

 3-6 入力内容の保存

エディタのメニューバーで「ファイル」から「上書き保存」を選択してから、エディタを閉じます。エディタに入力したままで閉じると、入力した内容はすべて消えて努力は無駄になります。エディタを使うときは「上書き保存」を絶対に忘れず、ちょっと席を離れる時やコーヒーなどを飲むときにも必ず「上書き保存」を実行してください。

トップへ戻る

4 共通データの入力

マイドキュメントの「home」フォルダーに、「index.txt」ファイルと「shasin」のフォルダーがあります。「index.txt」ファイル上で右クリックし、「プログラムから開く」で「Crescent Eve」を選択して開きます。

ユーザビリティは「使いやすさの重視」ですから、読者が迷わないようにすべてのページを同じレイアウトにします。では、「ホーム,卑弥呼の謎,蒙古軍撃退の謎,北海道米の謎」に共通するデータを入力していきます。

トップへ戻る

 4-1 表示用タイトル

ブラウザへ表示させる情報は「<body>」と「</body>」の間に入力します。まず、<header>と</header>の領域は、これから作成する情報のタイトルを入力します。

ここで入力したタイトルは、Webページの最上段の位置に表示されます。このページを例にとると、「はげちゃんの世界」と表示されている位置に「日本史の謎」と表示されます。

「<h1>◆</h1>」の「◆」を選択し、情報の表題を「日本史の謎」と入力します。「<h2>◆</h2>」の「◆」を選択して、サブタイトル「私たちに知らされなかった世界を尋ねます」と入力します。「before」と「after」は次のようになります。

<body>
<header>
<div class="head">
<h1>◆</h1>
<h2>◆</h2>
</div>

<body>
<header>
<div class="head">
<h1>日本史の謎</h1>
<h2>私たちに知らされなかった世界を尋ねます</h2>
</div>

入力内容に間違いがないか確認し、メニューバーの「ファイル」をクリックして「上書き保存」を選択します。これを忘れると入力内容は消えてしまいます。あなたの作るウエブページでサブタイトルが不要であれば「<h2>◆</h2>」を削除してください。

トップへ戻る

 4-2 ナビゲーション

ナビゲーション用の簡単なボタンをつくります。ボタンは6つで、「ホーム」「卑弥呼の謎」「蒙古軍撃退の謎」「北海道米の謎」の各ページへ移動できるようにします。

「<nav>と</nav>」の中の「<div class="◆">と</div>」の領域に、あらかじめmenuという名を付けておきました。「<ul>と</ul>」内の「<li><a href="◆">◆
</a></li>」にはファイルの名前とリンク先のボタンの名前を入力します。

ホームから移動できる情報は5種類あるので、メニューを5種類増やします。「<ul>から</ul>」の行をコピーし、「</ul>」の後ろでエンターキーを押してペーストします。これを3回繰り返すと「before」と「after」は次のようになります。

<nav>
<div class="menu">
<ul>
<li><a href="◆">◆</a></li>
</ul>
</div>
</nav>

<nav>
<div class="menu">
<ul>
<li><a href="◆">◆</a></li>
<li><a href="◆">◆</a></li>
<li><a href="◆">◆</a></li>
<li><a href="◆">◆</a></li>
</ul>
</div>
</nav>

メニューの最初の行は「ホーム」です。続いて「卑弥呼の謎」「蒙古軍撃退の謎」「北海道米の謎」の順になります。また、「ホーム」のファイルは「index.html」、以下「01.html」、「02.html」、「03.html」とします。

最後に、「ホーム」と「<」の間にカーソルを表示して、「全角のスペースを二つ」入れます。これは表示位置の調整です。すると「after」は次のようになります。

<nav>
<div class="menu">
<ul>
<li><a href="index.htmll">ホーム  </a></li>
<li><a href="01.html">卑弥呼の謎</a></li>
<li><a href="02.html">蒙古軍撃退の謎</a></li>
<li><a href="03.html">北海道米の謎</a></li>
</ul>
</div>
</nav>

ホームページの「ホーム」で「卑弥呼の謎」のボタンをクリックすると「01.html」のファイルが開きます。「01.html」で「ホーム」ボタンをクリックすると「index.html」ファイルが開きます。これでウエブページ内の各ファイルへ移動できる仕掛けです。

エデイタの画面が下図のように表示されているか確認し、メニューバーの「ファイル」をクリックして「上書き保存」を選択します。これを忘れると入力内容は消えてしまいます。

入力結果

トップへ戻る

 4-3 メインメニュー1

情報を入力する領域を「メインメニュー」に確保します。まず、文章を入力する部分である5行目の「<p>◆</p>」をコピーし、「Enter」キーを押してペーストします。次に「Enter」キーを押してペーストする動作を3回繰り返すと「before」と「after」は次のようになります。

<div id="main">
<article id="content">
<section>
<h1">◆</h1>
<h2 id="site01">◆</h2>
<p>◆</p>
<p class="top"><a href="◆">トップへ戻る</a></p>
</section>
</article>

<div id="main">
<article id="content">
<section>
<h1">◆</h1>
<h2 id="site01">◆</h1>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p class="top"><a href="◆">トップへ戻る</a></p>
</section>
</article>

文章入力部分が5ヶ所となった上記「after」で、「<section>」から「</section>」までをコピーし、「Enter」キーを押してペーストすると第二の情報を入力する領域ができました。ペーストした「"site01"」を「"site02"」に変更します。第二グループの「<h1 id="site01">◆</h1>」は不要なので削除すると次のようになります。

<section>
<h1">◆</h1>
<h2 id="site01">◆</h2>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p class="top"><a href="◆">トップへ戻る</a></p>
</section>
<section>
<h2 id="site02">◆</h2>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p class="top"><a href="◆">トップへ戻る</a></p>
</section>
</article>

次に、第二グループの「<section>」から「</section>」までをコピーし、「Enter」キーを押してペーストすると第三グループができます。もう一度「Enter」キーを押してペーストすると第四グループができます。同様にして第七グループまでつくります。

第二から第七グループまでの索引となる「site02」を、連番となるように「03」「04」「05」「06」「07」に変更すると次のようになります。

<div id="main">
<article id="content">
<section>
<h1>◆</h1>
<h2 id="site01">◆</h2>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p class="top"><a href="◆">トップへ戻る</a></p>
</section>
<section>
<h2 id="site02">◆</h2>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p class="top"><a href="◆">トップへ戻る</a></p>
</section>
<section>
<h2 id="site03">◆</h2>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p class="top"><a href="◆">トップへ戻る</a></p>
</section>
<section>
<h2 id="site04">◆</h2>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p class="top"><a href="◆">トップへ戻る</a></p>
</section>
<section>
<h2 id="site05">◆</h2>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p class="top"><a href="◆">トップへ戻る</a></p>
</section>
<section>
<h2 id="site06">◆</h2>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p class="top"><a href="◆">トップへ戻る</a></p>
</section>
<section>
<h2 id="site07">◆</h2>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p class="top"><a href="◆">トップへ戻る</a></p>
</section>
</article>

エデイタの画面が下図のように表示されているか確認し、メニューバーの「ファイル」をクリックして「上書き保存」を選択します。これを忘れると入力内容は消えてしまいます。

メインの部分

トップへ戻る

 4-4 メインメニュー2

メインメニューの「<h2 id="site07">◆</h2>」のグループのみ、5ヶ所にサブタイトルを追加します。

サブタイトルは「<h3>・ ◆</h3>」です。

サブタイトルをコピーして、2行目の「<h2 id="site07">◆</h2>」の右端をクリックして「Enter」キーを押して行を挿入してペーストします。

続いて、3行目の「<p>◆</p>」の右端をクリックして「Enter」キーを押し、サブタイトルをペーストします。6行目まで同様にサブタイトルをペーストすると、「before」と「after」は次のようになります。

<section>
<h2 id="site07">◆</h2>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p>◆</p>
<p class="top"><a href="◆">トップへ戻る</a></p>
</section>

<section>
<h2 id="site07">◆</h2>
<h3>・ ◆</h3>
<p>◆</p>
<h3>・ ◆</h3>
<p>◆</p>
<h3>・ ◆</h3>
<p>◆</p>
<h3>・ ◆</h3>
<p>◆</p>
<h3>・ ◆</h3>
<p>◆</p>
<p class="top"><a href="◆">トップへ戻る</a></p>
</section>

エデイタの画面が下図のように表示されているか確認し、メニューバーの「ファイル」をクリックして「上書き保存」を選択します。これを忘れると入力内容は消えてしまいます。

メインの部分2

トップへ戻る

 4-4 メインメニュー3

メインメニューの二ヶ所に、すべてに共通するタイトルをあらかじめ入れておきます。

「<h2 id="site06">◆</h2>」には「推理の根拠資料

「<h2 id="site07">◆</h2>」には「あなたの推理

タイトルをペーストすると「after」は次のようになります。

メインの部分2

トップへ戻る

 4-4 サイドメニュー

  4-4-1 目次

ナビゲーションのボタンは、Webページ内のリンクで他のページへ移動することができます。開いているページ内でも移動できるように「そのページの目次」をつくります。開いたページごとにメニューが異なるので、使いまわしができるひな形にしました。

「aside」は傍らにという意味です。「section」に「sidebar」と言う名前を付けました。「<h3>◆</h3>」の◆は目次で、太文字にすると見栄えが良くなります。太文字にするには、開始タグの「<strong>」と終了タグの「</strong>」を使います。

<section id="sidebar">

<strong>目次</strong>

「<li><a href="#site01">◆</a></li>」の行をコピーし、エンターキーを押してペーストします。これを5回繰り返すと「before」と「after」は次のようになります。

<aside>
<section id="sidebar">
<h3>目次</h3>
<ul>
<li><a href="#site01">◆</a></li>
</ul>

<aside id="sidebar">
<h3><strong>目次</strong></h3>
7<ul>
<li><a href="#site01">◆</a></li>
<li><a href="#site02">◆</a></li>
<li><a href="#site03">◆</a></li>
<li><a href="#site04">◆</a></li>
<li><a href="#site05">◆</a></li>
<li><a href="#site06">◆</a></li>
<li><a href="#site07">◆</a></li>
</ul>

ペースト後はすべて「#site01」となっています。「after」画面を見ながら、二行目以降は「#site02」「#site03」「#site04」「#site05」「#site06」「#site07」と数字のみを順に修正してください。

目次にはそのページ内のリンクを作成しますが、原稿ができるまでなにも入力しないで次へ進みます。目次の内容はページごとに異なるのでページごとに作成します。

入力内容に間違いがないか確認し、メニューバーの「ファイル」をクリックして「上書き保存」を選択します。これを忘れると入力内容は消えてしまいます。

トップへ戻る

  4-4-2 推薦情報

読者が便利なようにサイドバーへ「推薦情報」をつくり、リンク先は三種類とします。「<li><a href="#site01">◆</a></li>」行をコピーし、エンターキーを押してペーストします。これを2回繰り返すと「before」と「after」は次のようになります。

<h3>推薦情報</h3>
<ul>
<li><a href="◆">◆</a></li>
</ul>

<h3><strong>推薦情報</strong></h3>
<ul>
<li><a href="◆">◆</a></li>
<li><a href="◆">◆</a></li>
<li><a href="◆">◆</a></li>
</ul>
</section>
</aside>

推薦情報はインターネット上にアップされているサイト、「はげちゃんの世界」を例にしてリンクを作成します。

一行目の◆は「http://yukimiti.com/」、◆は「はげちゃんの世界」です。

二行目の◆は「http://yukimiti.com/40.web/40.guidance.html/」、◆は「Web頁作成法」です。

三行目の◆は「http://yukimiti.com/40.web/401.01.html」、◆は「Webページの予備知識」です。

「」内をコピーして貼り付けつると、「after」は次のようになります。

<h3><strong>推薦情報</strong></h3>
<ul>
<li><a href="http://yukimiti.com/">はげちゃんの世界</a></li>
<li><a href="http://yukimiti.com/40.web/40.guidance.html">Web頁作成法</a></li>
<li><a href="http://yukimiti.com/40.web/401.01.html">Webページの予備知識</a></li>
</ul>
</section>
</aside>

「sidebar」の領域を閉じるために、「</section>と</article>」を入力します。

入力結果

トップへ戻る

 4-5 フッター

著作権表示は現在慣習として残っているだけで、「著作者を明示できる・著作物の消滅の時期などを知ることができる・善意の著作権侵害を予防できる」といった程度の目的で使われているようです。

フッタの「<div class="footer">と</div>」には、慣習に従うと「Copyright 2017 ◆. All rights reserved.」という文字列が入ります。「Copyright」は著作権、著作権が発生したのは「2017年」で、著作権者の氏名は「◆」、そして「All rights reserved=権利を留保します」という意味になります。

「◆」にてヘボン式ローマ字で「あなたの名前と姓」を入力します。「はげちゃんの世界」では「 Copyright © 2016 Osamu Yamazaki. All rights reserved.」と表示しています。このページの下段最終部をご覧ください。

<footer>
<div class="foot">
<p class="foot">Copyright 2017 ◆. All rights reserved.</p>
</div>
</footer>

<footer>
<div class="foot">
<p class="foot">Copyright 2017 あなたの名前と姓. All rights reserved.</p>
</div>
</footer>

入力結果

入力内容に間違いがないか確認し、メニューバーの「ファイル」をクリックして「上書き保存」を選択します。これを忘れると、入力内容は消えてしまいます。

トップへ戻る

 4-6 最終処理

サイドメニューの入力が終わりましたので、ソースを閉じる作業を行います。

<head>は</head>で閉じました。<header>は</header>で、<nav>は</nav>で閉じました。<article>は</article>で閉じました。このように順序だてて調べると閉じられていないのは「<div id="main">」、「<body>」と「<html lang="ja">」の3つでした。

そこで、「<div id="main">」を「</div>」、「<body>」を「</body>」で、「<html lang="ja">」を「</html>」で閉じます。

トップへ戻る

5 写真の準備

 5-1 写真の選定

ウエブページに掲載される写真やイラストは、文章の補足をしたり内容の理解を深めさせてくれます。あなたがつくるウエブページ「日本史の謎」に写真を掲載します。他人が撮影した写真や他人が写っている写真は著作権や肖像権があるので、あなたが撮影した風景写真などを利用するのが最善です。

あなたのパソコンに保管されている風景などが写ったデジタル写真(拡張子が「.jpg」の写真)を3枚選択し、その写真のコピーを「home」の「shasin」フォルダーに保管します。写真の縮小方法と掲載方法を覚えるのが目的ですから、写真の選択に時間をかけるのはやめましょう。

適当な写真が見つからない場合は、はげちゃんが撮影した写真を使います。下のリンクボタンをクリックすると3枚の写真が表示されます。説明を読んでからディスクトップにダウンロードしてください。

     デジタル写真がない方  ⇒  講座で使用する写真

トップへ戻る

 5-2 写真を保管する

ダウンロードした写真に名前をつけます。写真をポイントして右クリックし、「名前の変更」を選択します。写真の名前は次のように半角英数で入力してください。

・ 青空      を  00_00.jpg  に変更。

・ 紅葉      を  00_01.jpg  に変更。

・ シマリス    を  00_02.jpg  に変更。

写真を3枚ともディスクトップへダウンロードし終わったら、マイドキュメント内に作成された「home」フォルダーをダブルクリックで開き、「shasin」フォルダーをダブルクリックで開きます。

「Ctrl」キーを押しながら3枚の写真を次々にクリックしてから、「Ctrl」キーを放して「shasin」フォルダー内へ3枚の写真をドラッグ&ドロップ(引きずり落と)します。ダイアログがでたときは「移動」をクリックしてください。

「home」の「shasin」フォルダー内に、「00_00.jpg、00_01.jpg、00_02.jpg」と半角英数で名前が付けられた写真が3枚保管されました。

トップへ戻る

6 ファイルの作成

 6-1 ホームページファイル

マイドキュメントの「home」フォルダーにはと「index.txt」ファイルと「syasin」フォルダーがあります。「index.txt」ファイルを基にして、ホームページとなるファイルをつくります。

「index.txt」ファイルの拡張子「txt」の三文字を「html」の四文字に変更します(プロバイダが「htm」を指示している場合は「htm」とします)。 「index.txt」ファイルをポイントして右クリックで「名前の変更」を選択し、「txt」の三文字を消し「html」の四文字を入力します。ファイル名は「index.html」となりました。

入力が終わったら何もないところをクリックします。「拡張子を変更すると、ファイルが使えなくなる可能性があります。変更しますか。」という「確認」画面が現れます。「はい」をクリックします。すると、ファイルは「ブラウザと同様のアイコン」にかわります。

トップへ戻る

 6-2 複数のファイル作成

「index.html」ファイルで情報を発信する3ファイルをつくります。「index.html」ファイルをポイントして、右クリックで「コピー」を選択し、「home」フォルダー内の何もないところを右クリックして「貼り付け」を選択すると「index - コピー.html」ができます。

再びフォルダー内の何もないところを右クリックして「貼り付け」を選択すると「home - コピー (2).html」ができます。更にこれをもう一度繰り返すと3つファイルができました。

トップへ戻る

 6-3 ファイル名の変更

「index - コピー.html」をポイントして右クリックし、「名前の変更」で「10」と入力すると「10.html」に変更されます。

同様に「home - コピー (2).html」を「20.html」に、「home - コピー (3).html」を「30.html」に変更します。

トップへ戻る

 6-4 ファイルの確認

マイドキュメントの「homepage」フォルダー内に、4つのファイルと1つのフォルダーがそろいました。

  shasin   写真の保管フォルダーです。
  10.html   卑弥呼の謎のページになります。
  20.html   蒙古軍撃退の謎のページになります。
  30.html   北海道米の謎のページになります。
 index.html   ホームページ(表紙)になります。

トップへ戻る

 6-5 ブラウザの操作

ブラウザには「現在見ている説明」が表示され、ブラウザ最上段の「タブ」に「はげちゃんの世界」と表示されています。この状態で「home」フォルダーの「index.html」をダブルクリックすると、下の画面が現れます。

ブラウザの最上段、「はげちゃんの世界」の横に「日本史の謎」という「タブ」が表示されます。タブの背景が「明るく」なっているのは、見出しが選択されてその内容が表示されているからです。

背景が暗くなっている「はげちゃんの世界」のタブをクリックすると明るくなって「現在見ている説明」が表示されます。このように、見出しをクリックして画面を切り替えながら作業を行います。

講座の説明を読むときは「はげちゃんの世界」のタブをクリックして表示させ、作業を行うときは「日本史の謎」のタブをクリックして表示させます。作業結果を確認するときは「日本史の謎」を表示させ、ブラウザの最上段左側、データが保存されているサイトやフォルダーの場所を表示する長方形の窓にある「時計の針状回転の矢印(最新の情報に更新)」をクリックします。

トップへ戻る

     「 中級講座1 」 ←  中級講座2 → 「 中級講座3