HTML

課題01
エディタのインストール

Visual Studio Code(VS Code)をインストールしてください。

課題02
作業ディレクトリ

任意の場所にhtml_exercisesという名前のディレクトリを作成してください。

課題03
ファイル作成

html_exercisesの中にhello-world.htmlというファイルを作成してください。

課題04
VS Code

VS Codeでhtml_exercises開いてください。

課題05
VS Code

VS Codeでhello-world.htmlを開いてHello Worldと書いて保存してください。

課題06
ブラウザ表示

hello-world.htmlをブラウザで表示し、そこにHello Worldが表示されていることを確認してください。

課題07
HTMLタグの基本

hello-world.htmlに以下の基本的なタグを追記してください。

<!DOCTYPE html>
<html>
<head>
<title>
<meta charset>
<body>

さらに<body>タグでHello Worldを囲んでください。

編集が完了したらhello-world.htmlを保存してブラウザで表示し、そこにHello Worldが表示されていることを確認してください。

課題08
改行

HelloとWorldの間に改行<br>を挿入してください。

課題09
ブロック要素

HelloとWorldという文字を追記して、HelloとWorldをそれぞれ<div>で囲んで２行で表示して<div>の効果を確認してください。

課題10
インライン要素

HelloとWorldという文字を追記して、HelloとWorldをそれぞれ<span>で囲んでブラウザで表示して、<div>と<span>の違いを確認してください。

課題11
見出し

My Home Pageという見出し<h1>を挿入してください。

課題12
見出し

Sub Titleという見出し<h2>を挿入して、<h1>と<h2>の違いを確認してください。

課題13
段落

以下の文章を段落<p>を使って挿入してください。

HTML (ハイパーテキスト・マークアップ・ランゲージ／Hypertext Markup Language) は、訪れたウェブサイトの構成をブラウザーに対して伝えるために使うマークアップ言語です。 HTML 言語はウェブ開発者が望むこと次第で、複雑なものにも簡単なものにもなります。HTML は要素の集まりからなり、コンテンツの一部を要素で囲む（マークアップする）ことで、特定の見せ方・動かし方に変えられます。囲むためのタグは、コンテンツの一部をハイパーリンク (ウェブ上の別ページへリンクすること) にしたり、単語を斜体にしたりすることができます。たとえば、次の一行を見てください。(MDNより引用)

課題14
リンク

課題13 で挿入した文章の

(MDNより引用)

の部分に

https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started#html_%E3%81%A8%E3%81%AF%EF%BC%9F

へのリンクを貼ってください。

課題15
リスト

以下のようにリスト表示をしてください。

item 1
item 2
item 3

item 4
item 5
item 6

課題16
テーブル

以下のようにテーブル表示をしてください。

head 1	head 2	head 3	head 4
item 11	item 12	item 13	item 14
item 21	item 22	item 23	item 24
item 31	item 32	item 33	item 34
item 41	item 42	item 43	item 44

課題17
セレクトボックス

以下のようにセレクトボックスを表示してください。

課題18
入力

以下のように入力欄を表示してください。

課題19
ボタン

課題18 の入力欄の横に`submit`ボタンを表示してください。

課題20
文章入力

以下のように文章入力欄を表示してください。

課題21
問い合わせフォーム

以下のような問い合わせフォームを表示してください。

メールアドレス:

お問い合わせ内容: