完成イメージ

CSSを使用していないため、文字の大きさや、色は再現できていない。また、レスポンシブなページにもなっていない。
後々CSSも追加して参考Webページと同じようにする予定

参考Webページ
https://www.au-okinawa.com/a/j3/

事前準備

必要な画像ファイルを参考Webページから取得する（6ファイル）

取得方法

対象の画像にカーソルを当て右クリックし、「名前を付けて画像を保存」を選択。
ファイルはリサイズしているのでこのページから取得しないこと
ただし、6つ目のタイトルのアイコンは取得方法が異なるためこのページから取得しても良い。

1．ヘッダー

2．メイン画像１

3．メイン画像２

4．メイン画像３

5．フッター

6. タイトルのアイコン
ブラウザのタブに画像があるためそのまま保存できない。デベロッパーツールを開きheadタグ内のlinkタグから.ionファイルを開き保存する

本文

UQのWebページを表示し、デベロッパーツールを開く。どのタグに何が設定されているかを確認し、それを参考にしながらコーディングしていく。

headタグ

文書の作者情報、サーチエンジン向けのキーワードや説明、文書のタイトル、利用するスタイルシート等その文書に関する情報を記述します。

titleタグ

ブラウザのタブに表示する文言を記述します。

<title>
  UQ mobileご利用のみなさま!auでんき申し込み開始しました!｜沖縄セルラー
</title>

linkタグ

その文書ファイルと関連する別の文書ファイルを指定し、その関係を定義するもの。
CSSのスタイルシートを設定する時などに使用します。

ブラウザのタブのアイコンは属性名relにiconを指定して使用する。
hrefには参照したいファイルの相対パスを記載。

<link rel="icon" href="./images/favicon.ico" />

bodyタグ

文章や画像など、実際にブラウザの画面上に表示される内容を指定するタグです。

タグの中に書かれたテキストや画像などがブラウザの画面上に表示されます。

headerタグ

HTML5から新たに追加され、セクションの目次や検索フォーム、あるいは、関連ロゴをまとめるために使用されます。

<header>
  <img src="./images/UQ_header_logo.jpeg" alt="UQ mobile" />
</header>

mainタグ

HTML5で追加された新しい要素です。Webサイト内の各ページで繰り返し使われるヘッダーやナビゲーション、検索フォームやフッター情報などを除いた、文書内の主要なコンテンツを表します。

<main>
  ここにメイン画像などを記述していきます
</main>

imgタグ、mapタグ、areaタグ

この３つのタグを組み合わせて使用することで画像に対して、指定する範囲内にリンクを設定することができる。（クライアントサイドイメージマップ）

imgタグ：画像を表示するタグ（この上にマップがのせられる）
mapタグ：ひとつの画像に複数のリンクを作成するタグ（マップ全体の範囲を表す）
areaタグ：イメージマップの領域を設定するタグ（マップ中のリンクを表す）

詳細は以下ページ参照。
https://code-kitchen.dev/html/map-area/

<img
  src="./images/UQ_img_01.jpeg"
  usemap="#image-map1"
  alt="auでんきお申し込み開始!!でんきセット割にエントリーしている方はお申し込みをお忘れなく"
/>
<map name="image-map1">
  <area
    target="_blank"
    alt="auでんきの詳細はこちら"
    title="auでんきの詳細はこちら"
    href="https://www.au-okinawa.com/audenkicp/"
    coords="679,1688,336,1633"
    shape="rect"
  />
</map>

上記「クライアントサイドイメージマップ」を簡単に作成できるWebサイト。基本このサイトで作成することをおすすめします。仮に座標の指定などがあってもareaタグの属性cordesを手動で修正したらいいので。
https://www.image-map.net/

3.2 HTMLだけでWebページを作ってみよう