rockos/small_animal.html

## small_animal.html
<!DOCTYPE html>

<!--
このプロジェクトではオリジナルの生物を創ります。
http://thimble.mozillafactory.org/ja/projects/zoo-small/edit
-->

<!--
さあ、始めよう!

1) まずコメント文を読みましょう。コメント文は <!-- と -- > で囲まれた部分のことです。
CSSでは /* と */ で囲まれた部分になります。
コメント文に、このプロジェクトでやること(TODO)やヒントなどが書かれています。

2) HTMLやCSSのタグに慣れましょう。タグとは <p></p>などのことで、タグで囲まれた部分に、
そのタグでやることを書きます。これを属性(Attribute)と呼びます。
<タグ 属性=値></タグ>の形式で指定します。

例えば、<html lang="en-gb" dir="ltr">の場合は、htmlがタグでlangとdirが属性になります。
langはhtmlで使う国と言語を指定します。値は"en-gb"です。
enは言語コードで英語を表し、gbは国コードで英国(Great Britain)を表しています。
日本語の場合は、"ja-jp"です。

dirはhtml文書内で使用する言語の記述方向を指定します。英語や日本語は左から右に書くので値に"ltr" を指定します。
Left to Right(左から右)という意味。アラビア語やヘブライ語は逆に右から左に書くので rtl を指定します。
-->

<!--
  ==============
  TODO
  ==============

  1. 日本語対応にするために、htmlタグのlang属性を変更してみよう。
-->

<html lang="en-gb" dir="ltr">
  <head>
    <title>Awesome Animal Builder - Small Animals</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://thimble.mozillafactory.org/s/zoo-small/style.css">
  </head>

 <!--
右のページの下の方にある絵を見てみて。これらは3つのパーツからできているね。
君のオリジナル生物も、このパーツを組み合わせて作ってみよう。
-->
  <body>

    <h1>Small Awesome Animals</h1>

<!--
  ==============
  TODO
  ==============
  1. オリジナル生物の名前をつけましょう。サブヘッダ<h2>をその名前に書き変えてね。
  2. <h1>や<h3>に変えると、どう変化するかな?閉じるタグも忘れずに。

-->
    <h2>Your own awesome animal</h2>

<!--
  ==============
  TODO
  ==============
  1. 生き物の環境を変えることができるよ。class属性の値を"ocean"、"rainforest" 、 "desert" に変えてみよう。

-->

    <figure class="changeme">

<!--
  ==============
  TODO
  ==============
  1. <img>タグのsrc属性を下の絵の部分に変えてみよう。src属性の値はURLが指定されている。
  URLはデータのありか(住所)のことだよ。<img>には閉じるタグはいらないんだ。

-->

      <img src="http://thimble.mozillafactory.org/s/zoo-small/unknown.png">
      <img src="http://thimble.mozillafactory.org/s/zoo-small/unknown.png">
      <img src="http://thimble.mozillafactory.org/s/zoo-small/unknown.png">

<!--
  ==============
  TODO
  ==============
  1. 生物の名前を変更してみよう。
-->
      <figcaption><span>Your own awesome animal</span></figcaption>
    </figure>

    <h3>About your Awesome Animal</h3>

<!--
  ==============
  TODO
  ==============
1. 君が作った生物の説明を書いてみよう。君が選んだパーツから想像して、どんな性質かな?
<p>と</p>に説明文を書いてみて。最初の文は強調タグ<strong>を使おう。
-->
    <p><strong>Write the description of your own animal here.</strong> Use the descriptions of the other animals below to help you, or make up something completely different!</p>

    <h4>My animal's cool features</h4>
<!--
  ==============
  TODO
  ==============
  1. 生物の特徴を3つ挙げてみよう。番号がついた箇条書きにするには <ol>タグを使う。それから <li>タグで囲んだ中に特徴を書く。
  2. <ol>タグを<ul>タグに変えて違いを見てみよう。
-->

    <p>What are the interesting features and facts about your new animal?</p>
    <ol>
      <li>Feature one</li>
      <li>Feature two</li>
      <li>Feature three</li>
    </ol>

<!--
おめでとう!君はオリジナルの動物を作りながら HTML タグの使いかたを学んだね
もう WebMakerと言えるよ。

下のサンプルコードを消せば君のオリジナルページとしてインターネットにアップロードできるよ。
-->
	<!DOCTYPE html>

	<!--
	このプロジェクトではオリジナルの生物を創ります。
	http://thimble.mozillafactory.org/ja/projects/zoo-small/edit
	-->

	<!--
	さあ、始めよう!

	1) まずコメント文を読みましょう。コメント文は <!-- と -- > で囲まれた部分のことです。
	CSSでは /* と */ で囲まれた部分になります。
	コメント文に、このプロジェクトでやること(TODO)やヒントなどが書かれています。

	2) HTMLやCSSのタグに慣れましょう。タグとは <p></p>などのことで、タグで囲まれた部分に、
	そのタグでやることを書きます。これを属性(Attribute)と呼びます。
	<タグ属性=値></タグ>の形式で指定します。

	例えば、<html lang="en-gb" dir="ltr">の場合は、htmlがタグでlangとdirが属性になります。
	langはhtmlで使う国と言語を指定します。値は"en-gb"です。
	enは言語コードで英語を表し、gbは国コードで英国(Great Britain)を表しています。
	日本語の場合は、"ja-jp"です。

	dirはhtml文書内で使用する言語の記述方向を指定します。英語や日本語は左から右に書くので値に"ltr" を指定します。
	Left to Right(左から右)という意味。アラビア語やヘブライ語は逆に右から左に書くので rtl を指定します。
	-->

	<!--
	==============
	TODO
	==============

	1. 日本語対応にするために、htmlタグのlang属性を変更してみよう。
	-->

	<html lang="en-gb" dir="ltr">
	<head>
	<title>Awesome Animal Builder - Small Animals</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="http://thimble.mozillafactory.org/s/zoo-small/style.css">
	</head>

	<!--
	右のページの下の方にある絵を見てみて。これらは3つのパーツからできているね。
	君のオリジナル生物も、このパーツを組み合わせて作ってみよう。
	-->
	<body>

	<h1>Small Awesome Animals</h1>

	<!--
	==============
	TODO
	==============
	1. オリジナル生物の名前をつけましょう。サブヘッダ<h2>をその名前に書き変えてね。
	2. <h1>や<h3>に変えると、どう変化するかな?閉じるタグも忘れずに。

	-->
	<h2>Your own awesome animal</h2>

	<!--
	==============
	TODO
	==============
	1. 生き物の環境を変えることができるよ。class属性の値を"ocean"、"rainforest" 、 "desert" に変えてみよう。

	-->

	<figure class="changeme">

	<!--
	==============
	TODO
	==============
	1. <img>タグのsrc属性を下の絵の部分に変えてみよう。src属性の値はURLが指定されている。
	URLはデータのありか(住所)のことだよ。<img>には閉じるタグはいらないんだ。

	-->

	<img src="http://thimble.mozillafactory.org/s/zoo-small/unknown.png">
	<img src="http://thimble.mozillafactory.org/s/zoo-small/unknown.png">
	<img src="http://thimble.mozillafactory.org/s/zoo-small/unknown.png">

	<!--
	==============
	TODO
	==============
	1. 生物の名前を変更してみよう。
	-->
	<figcaption><span>Your own awesome animal</span></figcaption>
	</figure>

	<h3>About your Awesome Animal</h3>

	<!--
	==============
	TODO
	==============
	1. 君が作った生物の説明を書いてみよう。君が選んだパーツから想像して、どんな性質かな?
	<p>と</p>に説明文を書いてみて。最初の文は強調タグ<strong>を使おう。
	-->
	<p><strong>Write the description of your own animal here.</strong> Use the descriptions of the other animals below to help you, or make up something completely different!</p>

	<h4>My animal's cool features</h4>
	<!--
	==============
	TODO
	==============
	1. 生物の特徴を3つ挙げてみよう。番号がついた箇条書きにするには <ol>タグを使う。それから <li>タグで囲んだ中に特徴を書く。
	2. <ol>タグを<ul>タグに変えて違いを見てみよう。
	-->

	<p>What are the interesting features and facts about your new animal?</p>
	<ol>
	<li>Feature one</li>
	<li>Feature two</li>
	<li>Feature three</li>
	</ol>

	<!--
	おめでとう!君はオリジナルの動物を作りながら HTML タグの使いかたを学んだね
	もう WebMakerと言えるよ。

	下のサンプルコードを消せば君のオリジナルページとしてインターネットにアップロードできるよ。
	-->