IP01-08 WebページとWebサイトの仕組み｜スターAI・情報塾教材

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>学園祭のお知らせ</title>
</head>

<body>
    <main>
       20XX年度 学園祭のお知らせ
            今年の学園祭は、楽しい企画や模擬店がいっぱいです！

        開催概要
            日時：20XX年10月10日〜10月11日
            場所：〇〇高等学校 校舎・グラウンド・体育館
            テーマ：「笑顔あふれる学園祭！」

        主なイベント
                3年生による演劇「時をかける教室」
                模擬店（焼きそば・タピオカ・フランクフルトなど）
                お化け屋敷・射的コーナー
                クイズ大会・ビンゴ大会

        関連リンク
            〇〇高等学校公式サイト

    </main>
</body>

</html>

3. HTMLファイルを編集する準備をしよう

ダウンロードしたファイルはエディタを使って編集します。エディタとは、プログラムやWebページのコードを作成・編集するためのソフトウェアです。HTMLを記述するときも、まずはエディタを使ってファイルを作るところから始まります。WindowsやMac、ラズパイでは、下記のエディタを利用します。

主なテキストエディタや開発ツールには次の物があります。

Windowsの代表的なテキストエディタ及び開発ツール

メモ帳
サクラエディタ
TeraPad(テラパッド)
Visual Studio Code(ビジュアルスタジオコード)

MacOS、Raspberry Piの代表的なテキストエディタ及び開発ツール

テキストエディット
Emacs(イーマックス)
Vim(ヴィム)
Visual Studio Code

ここでは、Windowsのメモ帳を使ってHTMLファイルを開く手順を確認します。

手順1

メモ帳を起動する。

ログインするとブラウザの右上にアカウント情報が表示されます。
手順2

メモ帳にHTMLファイルを読み込む

メモ帳にファイル「ip0108k1.html」をドラックします。

メモ帳などのエディタにHTMLファイルが表示出来たらタグの入力が出来るようになりました。

文化祭のWebページは大きく分けて「ページタイトルセクション」、「開催概要セクション」、「主なイベントセクション」、「関連リンクセクション」の4つのセクションに分かれています。

それぞれのセクションごとにタグを入れ完成させましょう。

4. ページタイトルセクションのタグを定義しよう

ページタイトルセクションは、Webページでどの部分かを確認します。

次のページタイトルセクションでは、どのような内容を表示するか確認できましたか？

ページ全体のタイトルの「20xx年学園祭のお知らせ」と学園祭概要を書いてある文章があります。

タイトルは「hタグ」を使うっていうことですね。でも、概要説明の文章ってどんなタグを使うのだろう？

hタグはタイトルだから違いそうだし。

タイトルはhタグですが、hタグには1～6までのサイズがあるので、どのサイズのものを使うのかに注意しましょう。

概要説明などの他のタグについては順番に説明します。

次の手順でタグを付けていきましょう。

手順1

sectionタグで囲みましょう

ページヘッダセクションの内容に当たる部分を「sectionタグ」で囲みます。

HTMLのファイルでは次の箇所を<section>～</section>で囲みます。

sectionタグで囲むと次のようになります。

sectionタグをhtmlファイルに追加して、ファイルを上書保存しましょう。

1つ記述するごとに、ファイルを保存しておきましょう。
手順2

ヘッダーの設定をする

ページタイトルにあたる「 20XX年度学園祭のお知らせ」にhタグを設定します。

hタグはタイトルの階層順にサイズを割り当てます。

ページタイトルに当たるものはh1タグ、大見出しにあたるものはh2タグ、中見出しに当たるものにはh3タグというように、階層に応じて順番に付けていきます。

ページタイトルにh1タグを付けると次のようになります。

h1タグをhtmlファイルに追加して上書保存して、Webページで確認しましょう。

内容の確認は、ブラウザでファイルの更新をするか、再度ファイルをダブルクリックしましょう。h1タグを付けた箇所が、タイトルとして大きな文字で表示されています。
手順3

段落を設定する

ページタイトルセクションには、ページタイトルに他に文章があります。文章は段落を作るので、この場合はpタグを使います。

文章「今年の学園祭は、楽しい企画や模擬店がいっぱいです！」にpタグを設定すると次のようになります。

pタグをhtmlファイルに追加して上書保存して、Webページで確認しましょう。

手順1～3の順でHTMLファイルを編集したらヘッダーセクションは完成です。Webブラウザで開きなおして出来ているか見本と見比べてみましょう。

5. 開催概要のタグを定義しよう

開催概要セクションが、Webページでどの部分かを確認します。

開催概要セクションは次の構成になっています。

・タイトル項目(ヘッダー)：開催概要

・文章：開催日時、場所、テーマ

それぞれどのようなタグを使えば良いか考えましょう。

「開催概要」はタイトルですからhタグですよね？

h1タグはページタイトルに1回だけしか使えなかったので、h2タグですか？

よく覚えてましたね。h2タグを使います。

文章も1文ずつpタグで囲みます。

これも、セクションだから、sectionタグで囲みますよね？

すごいですね。開催概要もsectionタグで囲みましょう。

それでは、手順通りにタグを記述していきましょう。

手順1

sectionタグで囲みましょう

開催概要セクションの内容に当たる部分を「sectionタグ」で囲みます。

HTMLのファイルでは次の箇所を<section>～</section>で囲みます。

sectionタグで囲むと次のようになります。

sectionタグをhtmlファイルに追加して保存しましょう。
手順2

ヘッダーの設定をする

項目タイトルにあたる「開催概要」にhタグを設定します。

ページタイトルの次の階層にあたるので、h2タグを使います。

h2タグを付けると次のようになります。

h2タグを追加したら保存してWebページで確認しましょう。h2タグを付けた箇所が、タイトルとして大きな文字で表示されています。

ただし、h2タグなので、h1タグのページタイトルより少し小さい文字でタイトルが付けられています。
手順3

段落を設定する

開催概要セクションには、日時、場所、テーマの3つの文章があります。今回は、それぞれの行をpタグで囲みます。

pタグをhtmlファイルに追加して上書保存して、Webページで確認しましょう。

手順1～3の順でHTMLファイルを編集したら開催概要セクションは完成です。Webブラウザで開きなおして出来ているか見本と見比べてみましょう。

6. 主なイベントのタグを定義しよう

主なイベントセクションが、Webページでどの部分かを確認します。

主なイベントセクションは次の構成になっています。

・タイトル項目(ヘッダー)：主なイベント

・文章：イベントの告知内容

イベントの告知内容をよく見ると、各文章の前に「・」があり、箇条書きになっています。

セクションの設定、ヘッダーの設定、文章の設定を同じように設定します。

手順通りにタグを記述していきましょう。

手順1

sectionタグで囲みましょう

主なイベントセクションの内容に当たる部分を「sectionタグ」で囲みます。

HTMLのファイルでは次の箇所を<section>～</section>で囲みます。

sectionタグで囲むと次のようになります。

sectionタグをhtmlファイルに追加して保存しましょう。
手順2

ヘッダーの設定をする

項目タイトルにあたる「主なイベント」にhタグを設定します。

「開催概要」と同じようにページタイトルの次の階層にあたるので、h2タグを使います。

h2タグを付けると次のようになります。

h2タグを追加したら保存して、Webページで確認しましょう。
手順3

段落を設定する

主なイベントの各項目は「箇条書き」なので、ulタグとliタグで記述します。

箇条書きのタグの書き方は次のとおりです。

<ul>
    <li>リスト項目1</li>
    <li>リスト項目2</li>
    <li>リスト項目3</li>
</ul>

箇条書きのタグを記述すると次のようになります。

箇条書きのulタグとliタグを追加したら保存して、Webページで確認しましょう。

手順1～3の順でHTMLファイルを編集したら主なイベントセクションは完成です。Webブラウザで開きなおして出来ているか見本と見比べてみましょう。

7. 関連リンクのタグを定義しよう

関連リンクセクションが、Webページでどの部分かを確認します。

関連リンクセクションは次の構成になっています。

・タイトル項目(ヘッダー)：関連リンク

・文章：学校へのリンク

学校へのリンクは、外部のWebサイトへのリンクです。学校でなくてもよいですが、リンクしたいサイトを見つけておきましょう。

セクションの設定、ヘッダーの設定、文章の設定を同じように設定します。

手順通りにタグを記述していきましょう。

手順1

sectionタグで囲みましょう

主なイベントセクションの内容に当たる部分を「sectionタグ」で囲みます。

HTMLのファイルでは次の箇所を<section>～</section>で囲みます。

sectionタグで囲むと次のようになります。

sectionタグをhtmlファイルに追加して保存しましょう。
手順2

ヘッダーの設定をする

項目タイトルにあたる「関連リンク」にhタグを設定します。

「開催概要」と同じようにページタイトルの次の階層にあたるので、h2タグを使います。

h2タグを付けると次のようになります。

h2タグを追加したら保存して、Webページで確認しましょう。
手順3

段落を設定する

関連リンクの項目は「ハイパーリンク(リンク)」なので、aタグで記述します。

ハイパーリンク(リンク)のタグの書き方は次のとおりです。

<a href="リンク先">表示するリンクテキスト</a>

他のサイトへのリンクでWebブラウザの別ウインドウや別のタブでリンク先のページを開きたい場合は「target="_blank"」をaタグに追記します。

例えば、Webブラウザの別タブ(別ウインドウ)にYahooページにリンクをしたい場合は次のように記述します。

<a href="https://www.yahoo.co.jp" target="_blank">Yahoo!へ移動する</a>

ハイパーリンク(リンク)のタグを記述すると次のようになります。

実在するWebページのURLを設定してください。Webページで開くとリンクをクリックすると指定したWebページへジャンプします。

参考のリンクは「Yahoo!」のWebサイトになっています。このリンク先は、自由に設定しましょう。

手順1～3の順でHTMLファイルを編集したら主なイベントセクションは完成です。Webブラウザで開きなおして出来ているか見本と見比べてみましょう。

作成したファイル(ip0108k1.html)を提出しましょう。

ファイルを選択選択されていません

対応形式：.html

※この再現版では提出は行いません（送信先は未接続です）

Well done!

次のステップに進みましょう！

次のステップに進む

← 前のステップにもどる