はじめに
この記事はクイズ形式で自身のHTMLの学習をアウトプットしていきます。
問題文の条件を満たすHTMLを記述してください。
お手元のエディタに解答を入力したうえで
「▶正解」をクリックして回答を確認してください
練習問題
- 1番大きい見出しを追加する
- 見出しの文字列は「はじめに」とする
正解
<h1>はじめに</h1>
問題
第1問
- 段落要素を追加する。
- 段落内の文章は任意とするが、２行とする。※改行用のタグを使用する事
正解
<p>
ここに段落内の文字が入ります。<br>
brタグで改行も可能です。
</p>
2022/08/16追記
改行タグは<br>または<br />のどちらでも認識される。
但し、\HTML5が主流になっている現状<br />を使用するメリットが存在しないため
<br>と短く表記することが好ましい。
参考：https://qumeru.com/magazine/549
第2問
- リンクを追加する
- リンクを押すとGoogleのトップページ( https://www.google.com/ ) に遷移する
- リンクとして表示する文字列は"グーグルへ遷移する"
- リンク先が別タブで開く用に指定する
正解
<a href="https://www.google.com/" target="_brank">グーグルへ遷移する</a>
第3問
- 画像を追加する
- 画像の場所は相対パスでimgフォルダ内のabc.jpgを表示する
- 画像が表示できない場合は"画像が表示できません"の文字列を表示する
正解
<img src="img/abc.jpg" alt="画像が表示できません"/>
第4問
- 順序無しリストを追加する
- 以下のリストを作成する
・第１章
・第２章
・第３章
・前編
・後編
正解
<ul>
<li>第１章</li>
<li>第２章</li>
<li>第３章
<ul>
<li>前編</li>
<li>後編</li>
</ul>
</li>
</ul>
第5問
- htmlタグ、headタグ、bodyタグを使用する
- ページで使用している言語が日本語であることを明示する
- ページのタイトルに「HTML学習ページ」にする
- このページの文字コードを「UTF-8」で指定する
- ページの中身は以下3行の文字列を表示します。※カッコ内のスタイルになるタグを使用してください。
太字（太字）
Naname（斜字）
取消（「取消」に取消線を引く）
正解
<!DOCTYPE html>
<html lang="ja">
<head>
<title>HTML学習ページ</title>
<meta charset="UTF-8" />
</head>
<body>
<!--太字 -->
<b>太字</b>
<!--斜字 -->
<i>Naname</i>
<!--取消線 -->
<s>取消</s>
</body>
</html>
太字、斜字、取消線を適用させるために「正解」で使用しているタグは、HTML4.01以上では
スタイルを指定する用途での仕様は非推奨としています。
（スタイルを指定する場合にはCSSの利用が推奨されています。）