Loading...
HTML基礎課題

HTML基礎課題

公開
2018.06.10
更新
2018.10.29
  • 課題

  • HTML

ここまで学んだHTMLの基礎をあなたのものにするため、HTML基礎課題に取り組んでみましょう。

課題

ブログページを作ってください。

課題1

ここまで学んだHTMLタグ・属性を使って、ブログ記事を書いてください。

お題は自由です。
とにかく色々なタグ・属性を使って記事を書いてみましょう。

以下に雛形を用意しました。
これをarticle.htmlという名前で保存し、本文を追加してください。
また、追加した本文に対してCSSで何か1つ、装飾をしてみましょう。

<!doctype html>
<html lang="ja">
<head>
  <title>はじめてのブログ</title>
  <link rel="icon" href="./favicon.ico">
  <!-- ここにstyle要素を配置してHTMLを装飾してみましょう -->
</head>
<body>
<div class="article">
  <!-- ここに本文を追加しましょう -->
</div>
</body>
</html>

課題2

コメント投稿フォームを作ってください。

formタグの属性は以下のように設定してください。

<form action="./article.html" method="post">

続いてフォームに以下の項目を設定してください。

  • 投稿者名入力欄
  • コメント入力欄
  • 返答希望選択欄("する・しない" の二択)
  • 送信ボタン

最後に値を入力し、送信ボタンを押して送信される(=入力した値が消える)ことを確認してください。

解答例

解答例を表示する
<!doctype html>
<html lang="ja">
<head>
  <title>はじめてのブログ</title>
  <link rel="icon" href="./favicon.ico">
  <style>
    .article {
      padding: 15px;
      border: double 4px lightgray;
    }
    .heading {
      background-color: deepskyblue;
      color: white;
      font-size: 16px;
    }
    .subHeading {
      border: solid 1px deepskyblue;
      font-size: 16px;
    }
    .formItem {
      margin-bottom: 15px;
      padding: 7px;
      border-bottom: solid 1px lightgray;
    }
  </style>
</head>
<body>
<div class="article">
  <h1 class="heading">はじめてのブログ</h1>
  <p>
    <a href="https://gieer.tech/" target="_blank">Gieer</a>のHTML講座を始めました。<br>
    この記事はHTML基礎課題で作成したものです。<br>
  </p>
  <h2 class="subHeading">これまで学んだこと</h2>
  <dl>
    <dt>HTMLタグについて</dt>
    <dd>
      HTMLタグには様々なタグがあり、それぞれに意味があることを学びました。<br>
      参考:<a href="https://gieer.tech/article/5ac5ea3e17075e616054fdfe" target="_blank">HTMLタグの意味を知ろう</a><br>
    </dd>
    <dt>HTML属性について</dt>
    <dd>
      HTMLにはタグに機能を追加するための属性というものがあることを学びました。<br>
      また、属性には自由に値を設定できるものから値を省略できるもの、決まった値の中から選ぶものと、種類があることを学びました。<br>
      参考:<a href="https://gieer.tech/article/5aea62d217075e616054fe04" target="_blank">属性値の種類</a><br>
    </dd>
    <dt>HTML装飾について</dt>
    <dd>
      HTMLを装飾できるCSSというものを学びました。<br>
      装飾はstyle属性で行うか、head要素内にstyleタグを配置することで行うことができます。<br>
      また、装飾にはclass属性を行うことで限定的に、効率的に行えることを学びました。<br>
      参考:<a href="https://gieer.tech/article/5a9676bcf4dbc704df712c85" target="_blank">styleタグでHTMLを装飾してみよう</a><br>
    </dd>
    <dt>その他</dt>
    <dd>
      faviconの設定やソースコードのインデントなど、目に見えるもの、見えないものに関わらず、やるべきことがまだまだたくさんあることを知りました。<br>
    </dd>
  </dl>
  <h2 class="subHeading">これから学ぶこと</h2>
  <ul>
    <li>CSS</li>
    <li>javascript</li>
    <li>開発の効率化</li>
    <li>その他たくさん</li>
  </ul>
  <h2 class="subHeading">まとめ</h2>
  <p>
    まだまだたくさん学ぶことはありますが、WEBエンジニアとしての入り口に立ち、確実にスキルは身についています。<br>
    ゆっくり、しかし確実に成長していきます。<br>
  </p>
</div>
<div>
  <h2 class="heading">コメント投稿フォーム</h2>
  <form action="./article.html" method="post">
    <div class="formItem">
      投稿者名:
      <input type="text" name="name">
    </div>
    <div class="formItem">
      コメント:
      <textarea name="comment"></textarea>
    </div>
    <div class="formItem">
      返信希望:
      <input type="radio" name="reply" value="する">する
      <input type="radio" name="reply" value="しない" checked>しない
    </div>
    <div>
      <button type="submit">送信する</button>
    </div>
  </form>
</div>
</body>
</html>

ブログページ表示例

これはあくまで解答例です。
あなたの書いたコードで画面に正常に表示されていれば、それが正解です!
(CSSはまだ詳しく学んでいませんが、回答例を真似して書いてみてください)

お疲れ様でした!

次の記事

これまでの記事

  • ふむふむ・・・

イア

イア(er)
独学する美少女エンジニア

当サイトのナビゲーターであり、あなたと一緒に勉強する同志でもあります。
今はナビゲーターとして未熟のため、ひたすら勉強をさせています。

隠します!