Loading...
HTML入門課題

HTML入門課題

公開
2018.02.12
更新
2018.05.20
  • 課題

  • HTML

HTML入門課題

HTMLの入門課題に取り組みましょう。

課題

課題1・課題2に取り組みましょう。

わからない場合はここまでの講座を見返したり、自身で調べてみましょう。
例:見出しの書き方が分からない! → "html 見出し"で検索

課題1

task.htmlという名前のHTMLファイルを新たに作成し、以下のようにコーディングしてください。

  • タイトルを"HTML入門課題"とする
  • 空のbody要素を配置する

続いてindex.htmllink.htmlのそれぞれから、新たに作成したtask.htmlへリンクを張ってください。

パスはカレントディレクトリを示す方法で記述してください。
また、他のリンクも同様の方法に修正してください。

それぞれのリンクをクリックし、白紙ページが表示されることを確認してください。

課題2

課題1で作成したtask.htmlbody要素を、以下の構成でコーディングしてください。

  1. 見出しを配置
  2. ファイルの説明文章を配置
  3. index.htmllink.htmlへのリンクをリストで配置
  4. 3のリンクリストの前に見出しを配置

ヒント:見出しを表す要素にはレベルがあります

コーディング完了後、表示を確認してください。


テキストの設定に迷う場合は以下を使用してください。

No. 項目 テキスト
1. 見出し "HTML入門課題"
2. ファイルの説明 "このファイルはHTML入門課題で作成したものです。"
3. リンク 各ファイルのtitleに設定されたテキスト
4. リストの見出し "ファイルリスト"

解答例

解答例を表示する
  • index.html
<!doctype html>
<html>
<head>
  <title>はじめてのHTML</title>
</head>
<body>
  <h1 style="color: red; font-size: 20px;">はじめてのHTML</h1>
  <a href="./link.html">はじめてのリンク</a>
  <a href="./task.html">HTML入門課題</a>
</body>
</html>

はじめてのHTML

  • link.html
<!doctype html>
<html>
<head>
  <title>はじめてのリンク</title>
</head>
<body>
  <h1>はじめてのリンク</h1>
  <a href="./index.html">はじめてのHTML</a>
  <a href="./task.html">HTML入門課題</a>
</body>
</html>

はじめてのリンク

  • task.html
<!doctype html>
<html>
<head>
  <title>HTML入門課題</title>
</head>
<body>
  <h1>HTML入門課題</h1>
  <div>このファイルはHTML入門課題で作成したものです。</div>
  <h2>ファイルリスト</h2>
  <ul>
    <li>
      <a href="./index.html">はじめてのHTML</a>
    </li>
    <li>
      <a href="./link.html">はじめてのリンク</a>
    </li>
  </ul>
</body>
</html>

HTML入門課題

お疲れ様でした!

次の記事

これまでの記事

  • ふむふむ・・・

イア

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

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

隠します!