HTMLオブジェクト
HTMLオブジェクトは、HTMLのタグを直接ドリトルプログラム内に記述し、Webページの要素としてそのまま扱うことができるオブジェクトである。「数値」や「文字列」と同様に扱え、動的な画面更新や双方向コンテンツの開発が容易になる。
HTMLオブジェクトは、角括弧（<>）で囲まれたタグを直接記述することで生成する。タグは開始タグ（<>）と終了タグ（</>）をセットで使用する。次のプログラムを実行すると、画面に「テキスト」という文字が表示される。
段落＝<span>テキスト</span>。
生成されたオブジェクトは「root:dom:タグ名」の子オブジェクトとなり、プログラム中のタグの部分は実行時には「root:dom:タグ名!“文字列”create」のように変換されて実行される。
HTMLオブジェクトはメソッドやプロパティを持ち、タートルと同様に操作できる。既存のHTMLオブジェクトから新しいオブジェクトを作ることもできる。
テスト＝<span>テキスト</span>。 テスト！"red" backgroundColor。 テスト２＝テスト！作る。
HTMLオブジェクトに属性、プロパティ、CSSを設定する方法は2種類ある。
- タグに直接記述する方法
要素＝<span id="hoge" style="color: blue;"></span>。
- メソッド呼び出しで設定する方法
要素＝<span></span>。 要素！"hoge" id。 要素！"blue" color。
設定した属性やプロパティを参照するには、名前の後ろに「?」を付ける。
要素＝<span id="hoge"></span>。 値＝要素！id?。
ドリトルでは多数のHTMLタグを使用できる。一部は次の通りである： input, textarea, p, h1, div, span, button, a, ul, ol, li, table, tr, td, img, form, iframe, canvas など。
HTMLオブジェクトの内容を変更するには「テキスト」メソッドを使う。次のプログラムを実行すると、段落に「こんにちは」という内容が設定される。
段落＝<p></p>。 段落！"こんにちは" テキスト。
HTMLオブジェクトの中に別のHTMLオブジェクトを入れるには「入れる」メソッドを使う。これにより、複雑な階層構造を持つHTMLを構築できる。
リスト＝<ul></ul>。 項目１＝<li>りんご</li>。 項目２＝<li>みかん</li>。 リスト！（項目１）入れる。 リスト！（項目２）入れる。
タグの中身をすべて削除するには「クリア」メソッドを使う。これはinnerHTMLごと削除するため、子ノードもテキストも消える。
コンテナ＝<div><p>テキスト</p></div>。 コンテナ！クリア。
イベント処理には「動作」プロパティを定義する。要素の種類によって異なるイベントが発生する。
- inputタグ（type=“text”など）：エンターキーが押されたとき
- 特定のinputタグ（checkboxなど）：値が変更されたとき（onchange）
- それ以外のタグ：クリックされたとき
ボタン＝<button>送信</button>。 ボタン：動作＝「 ラベル！"ボタンがクリックされました" 作る。 」。 テキスト入力＝<input type="text">。 テキスト入力：動作＝「 ラベル！（テキスト入力：value）テキスト。 」。
HTMLオブジェクトは条件分岐と組み合わせて使うことで、状態に応じて異なる表示を行うことができる。
「条件」！ なら 「 ボタン＝<button>実行</button>。 」そうでなければ「 <span>実行できません</span>。 」実行。
HTMLのID属性を使って要素を取得するには「#」を使用する。これにより、ページ内の特定の要素に簡単にアクセスできる。
<div id="output"></div>。 出力＝#output。 出力：テキスト＝"ID指定で取得した要素に内容を設定"。
フォーム要素には様々な種類があり、テキスト入力、選択肢、チェックボックスなどを使ってユーザーからの入力を受け付けることができる。
テキスト入力＝<input type="text">。 選択肢＝<select> <option value="1">選択肢1</option> <option value="2">選択肢2</option> </select>。 チェックボックス＝<input type="checkbox">。
外部コンテンツを表示するには「iframe」を使うことができる。これにより、他のWebページをドリトルの画面内に埋め込むことができる。
フレーム＝<iframe></iframe>。 フレーム：src＝"https://example.com/"。
ハイパーリンクを作成するには「a」タグを使う。これにより、他のページへの移動を実現できる。
リンク＝<a href="https://example.com/">リンクテキスト</a>。
HTMLオブジェクトを使うことで、Web開発の基本的な考え方や技術を学ぶことができる。HTMLとCSSの基本を理解し、ドリトルのプログラミング機能と組み合わせることで、ボタンのクリックやフォームの送信などのイベント処理、データの表示や入力フォームの作成など、多様なWebアプリケーションの機能を実装できる。また、サーバとの通信（WebAPI）を組み合わせることで、より実践的なアプリケーションを構築することができる。
HTMLオブジェクトはWebプログラミングの入門として最適であり、プログラミングの基本構造（変数、条件分岐、繰り返し）とHTML/CSSの基本を同時に学べる環境を提供している。
