HTMLについて

HTML(HyperText Markup Language)は普段みなさんが使っているウェブサイトの構造を書き表すための言語のひとつです。右の画像のようにHTMLは入れ子構造で書かれます。

HTML要素

HTMLでは、タグを使うことで文章に意味を持たせることができます。
タグとは<と>で囲まれた英数字のまとまりで、<tag>内容</tag>のように書かれた場合<tag>を開始タグ、</tag>を終了タグと呼びます。そしてこの開始タグから終了タグまでをまとめて要素と呼びます。
また、開始タグと終了タグの間にはテキストや別の要素を入れることができます。

要素の変更

まずは実際に要素の中身を書き換えてみましょう。このポップアップを一度閉じ、Hello World! と書かれている部分を好きなように書き換えてみましょう。
文章の書き換えに応じて、右側のプレビューも変わることを確認してください。
書き換えることに成功したら右上のヘルプをクリックしてもう一度この画面に戻ってきてください。

ここで使われている要素の説明

• html要素：この文章がHTMLであることを表します。
• head要素：ウェブサイトのタイトルやリンク情報を入れることができます。
• title要素：この文章のタイトルを表します。
• body要素：ウェブサイトの中身を表す要素です。この中に書いた要素がページ上に表示されます。
• h1要素：見出しを表します。数字を大きくするにつれて見出しの大きさが小さくなります。

持ち物リストを作ろう

ではさっそく右の画像のような持ち物リストを作ってみましょう。
今回使用するのは、<h>で囲まれたブロック、”で囲まれたブロック、<ul>で囲まれたブロックと<li>で囲まれたブロックです。左上のHTML要素の部分をクリックするとブロックが出てきます。
<ul>で表されるul要素は箇条書きで表示させたいときに使われます。そして<li>で表されるli要素はlist itemの略で、ul要素の中に入れることで、li要素に書かれた文字を箇条書きで表示させることができます。
まずはヒントを見ないでやってみましょう。わからなくなったらヒントを見てみましょう。

ヒント

<h1>ブロックの中には”で囲まれたテキストブロックのみを入れます。
<ul>ブロックは<h1>ブロックの下にくっつけて、<li>ブロックは右の写真のように<ul>ブロックの中に入れます。