バナー

この教材は「ギャクサン」というWeb制作学習カリキュラムの一部です。

はじめての方はこちらからご覧ください👉

更新日

#05  HTMLの課題|シンプルなWEBページを作ろう

web兄さん

「鉄は熱いうちに打て!」ということで、ここまで学習したことを早めに頭に定着させていきましょう。

冒頭で紹介した通り、以下のようなHTMLだけで作られたWEBページを自力でコーディングしていってもらいます。

web兄さん
非常にシンプルですが、HTMLを学習し始めた人にとってかなり丁度良いレベルです。

ただ、最初から自分でどのタグを使うかの判断は難しいと思うので、こちらでどのタグを使うかの指示だけはさせてもらいます。

課題の条件

課題の条件を整理

  • こちらから指定したタグを使って上記と同じ見た目のページをブラウザで出力する
  • 画像のsrc属性はhttps://placehold.jp/0B78D7/ffffff/360x120.png?text=imgを設定
  • 画像のalt属性はimgと書かれた画像と設定
  • <a>のリンクにはにはhttps://www.google.com/intl/ja_jp/chrome/を設定
  • 指定のない文章は<p>とする

今回使うタグはどれも前回の講座で学習したものです。

タグを忘れていても大丈夫!

以下の早見表や前回の講座振り返ったり、調べながらでもOKですので、とにかく最後まで書き切ることを意識しましょう。この講座ではタグの種類とそれぞれどんな意味を持っているかを理解もらえればOKです。

web兄さん
いきなり何も見ずに書けなくて当然!書きながら理解を深めていく気持ちで取り組もう。ただ、みなさんの今後を考えて必ず最後まで書き切ることは意識してください!

HTMLタグの早見表

web兄さん
前回の講座を見ずにチャレンジしたい方はこちらの早見表を見て取り組んでみましょう!
プロパティ読み方用途
<h1><h6>エイチ〇〇見出し
<p>ピー段落、通常の文章
<br>ビーアール 、ブレイク改行
<strong>ストロング強調(太字になる)
<img src="~~" alt=" ~~">イメージ画像の表示、src属性に画像のパス、alt属性に画像の代替テキストを書く
<a href="~~">エーリンクの設定、href属性にリンク先を書く
<ol> <ul><li>オーエル、ユーエル、リストリスト
<table> <tr> <th> <td>テーブル、ティーアール、ティーエイチ、ティーディー
<div>ディブグループ分け(次回学習)
<span>スパングループ分け(次回学習)

課題に取り組む準備をしよう

【Macの方必見】さらに効率的にコーディングできる方法を解説します

Macを使っている方は課題に取り組む前にぜひ以下の動画もチェックしてみてください!

準備01

デスクトップに「webliker」>「kadai-html」という課題用のフォルダを作成する

デスクトップに課題用のフォルダを作成する

デスクトップに毎回「index.html」という名前でファイルを作成することはできません。

そのためwebliker>kadai-htmlというフォルダを作りましょう。

準備02

VS Codeで「index.html」を作成し「kadai-html」の中へ保存する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTMLの課題</title>
</head>
<body>
  <!-- ここにコードを書く -->
</body>
</html>
  1. VS Codeで新規ファイルを作成し「左のコード」をコピペ
  2. index.htmlというHTMLファイルを作成
  3. デスクトップ > webliekr > kadai-htmlへ保存

とコードを書ける状態にしておこう。

作成したフォルダの中にindex.htmlを保存する

web兄さん
上記の流れは以下の動画でも解説しているので一緒に取り組んでみましょう!

正解のコード

正解のコード( ※必ず一回自力で書き切ってから見ましょう )

どうでしたか?みなさんが書いたコードとピッタリ一致していたでしょうか?

ピッタリ合っていなかった人は、もう一度「課題の条件」や「前回の講座」を見直して、何が違ったかを理解しましょう。

何が違うかを理解できたのであればもう一度書く必要はありません。

忘却曲線に基づいて復習しよう

ドイツの心理学者、ヘルマン・エビングハウスの発表した「エビングハウスの忘却曲線」では

  • 1時間後には56%忘れる
  • 1日後には67%忘れる
  • 6日後には75%忘れる
  • 31日後には79%忘れる

と言われています。

そして記憶の定着についてですが、学習後、24時間以内に10分間の復習をした場合、記憶率は100%に回復するのですが、そこから間隔をあけて1週間以内に5分復習することで記憶は復活し、次の復習はさらに間隔をあけて1ヶ月以内に4分程度復習すれば良いとされています。

web兄さん
タグ自体を暗記する必要はありませんが、理解を定着させるためには復習をすることが必須となってきます。2回目の復習はできる限り早めにやっておくとベストです!