メインコンテンツまでスキップ

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
  1. item 4
  2. item 5
  3. item 6

課題16
テーブル
​

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

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

課題17
セレクトボックス
​

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

課題18
入力
​

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

課題19
ボタン
​

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

課題20
文章入力
​

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

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

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

メールアドレス:
お問い合わせ内容: