HTML インスタンス
HTML基本タグの例
- 簡単なHTMLファイル
- この例は非常にシンプルなHTMLファイルであり、できるだけ少ないHTMLタグを使用しています。これは、body要素内の内容がブラウザでどのように表示されるかを示しています。
- 簡単な段落
- この例では、段落要素内のテキストがブラウザでどのように表示されるかを示しています。
- もっとの段落
- この例では、段落要素の一部のデフォルトの動作を示しています。
- 「詩」の問題
- この例では、HTMLフォーマットの一部の問題を示しています。
- 折り返し
- この例では、HTMLドキュメントでの折り返しの使用を示しています。
- タイトル
- HTMLドキュメント内でタイトルを表示するためのタグを示します。
- 中央配置のタイトル
- この例では、中央に配置されたタイトルを示します。
- 水平線
- この例では、水平線を挿入する方法を示します。
- 隠されたコメント
- HTMLソースコード内に隠されたコメントを挿入する方法を示します。
- 背景色
- この例では、HTMLページに背景色を追加する方法を示します。
例の説明
HTMLフレームの例
- 垂直フレーム
- この例では、3つの異なるドキュメントを使用して垂直フレームを作成する方法を示します。
- 水平フレーム
- この例では、3つの異なるドキュメントを使用して水平フレームを作成する方法を示します。
- <noframes>タグの使用方法
- この例では、<noframes>タグの使用方法を示します。
- 混在フレーム構造
- この例では、3つのドキュメントを持つフレーム構造を作成し、それらを行と列に混在させる方法を示します。
- noresize="noresize"属性を持つフレーム構造
- この例では、noresize属性を示します。この例では、フレームはサイズを変更できません。フレーム間の枠にマウスをドラッグすると、枠が移動できないことがわかります。
- ナビゲーションフレーム
- この例では、ナビゲーションフレームの作成方法を示します。ナビゲーションフレームには、2番目のフレームをターゲットとするリンクリストが含まれています。"contents.htm"というファイルには3つのリンクが含まれています。
- インラインフレーム
- この例では、インラインフレーム（HTMLページ内のフレーム）の作成方法をデモンストレーションします。
- フレーム内の指定されたセクションにジャンプする方法
- この例では、2つのフレームを使用します。そのうちの1つのフレームは、別のファイル内の指定されたセクションにリンクする設定がされています。"link.htm"ファイル内の指定されたセクションは<a name="C10">を使用して識別されています。
- 指定されたセクションにフレームを使用してナビゲートする方法
-
この例では、2つのフレームを使用します。左側のナビゲーションフレームにはリンクリストが含まれており、これらのリンクは第2つのフレームをターゲットとしています。第2つのフレームはリンクされたドキュメントを表示します。ナビゲーションフレーム内のリンクは、ターゲットファイル内の指定されたセクションにリンクしています。
例の説明
HTML フォームと入力例
- テキストフィールド(Text fields)
- この例では、HTMLページでテキストフィールドを作成する方法を示しています。ユーザーはテキストフィールドにテキストを書き込むことができます。
- パスワードフィールド
- この例では、HTMLのパスワードフィールドを作成する方法を示しています。
- チェックボックス
- この例では、HTMLページでチェックボックスを作成する方法を示しています。ユーザーはチェックボックスを選択または解除選択できます。
- ラジオボタン
- この例では、HTMLでシンプルなラジオボタンを作成する方法を示しています。
- シンプルなドロップダウンリスト
- この例では、HTMLページでシンプルなドロップダウンリストボックスを作成する方法を示しています。ドロップダウンリストボックスはオプションリストです。
- 別のドロップダウンリスト
- 別のドロップダウンリスト（訳者注：プレセレクト値は事前に指定された首選値を指します。）
- テキストエリア(Textarea)
- テキストエリア（複数行のテキスト入力コントロール）を作成する方法を示しています。ユーザーはテキストエリアにテキストを書き込むことができます。テキストエリアでは、書き込める文字数に制限はありません。
- ボタンの作成
- ボタンを作成する方法を示しています。ボタンのテキストはカスタマイズできます。
- データ周りのFieldset
- データの周りにタイトル付きのボックスを描画する方法を示しています。
フォーム例
- 入力フィールドと確認ボタンのフォーム
- この例では、ページにフォームを追加する方法を示しています。このフォームには二つの入力フィールドと確認ボタンがあります。
- チェックボックスのフォーム
- このフォームには二つのチェックボックスと確認ボタンがあります。
- ラジオボタンのフォーム
- このフォームには二つのラジオボタンと確認ボタンがあります。
- フォームから電子メールを送信
- この例では、フォームから電子メールを送信する方法を示しています。
例の説明
HTML画像例
- 画像の挿入
- この例では、ウェブページに画像を表示する方法を示しています。
- 異なる場所から画像を挿入
- この例では、他のフォルダーやサーバーの画像をウェブページに表示する方法を示しています。
- 背景画像
- この例では、HTMLページに背景画像を追加する方法を示しています。
- 画像の配置
- この例では、文字の中で画像を配置する方法を示しています。
- 浮遊画像
- この例では、画像を段落の左側や右側に浮遊させる方法を示しています。
- 画像サイズの調整
- この例では、画像のサイズを変更する方法を示しています。
- 画像に代替テキストを表示
- この例では、画像に代替テキストを表示する方法を示しています。ブラウザが画像を読み込めない場合、代替テキスト属性は読者に失われた情報を伝えます。ページのすべての画像に代替テキスト属性を追加することは良い習慣です。
- 画像リンクの作成
- この例では、画像をリンクとして使用する方法を示しています。
- 画像マップの作成
- この例では、クリック可能なエリアを持つ画像マップを作成する方法を示しています。各エリアはリンクです。
- 画像をイメージマップに変換
- この例では、普通の画像をイメージマップに設定する方法を示しています。
例の説明
HTML メタ情報 (meta) 例
- ドキュメントの説明
- メタ要素内の情報は、HTML ドキュメントを説明できます。
- ドキュメントのキーワード
- メタ要素内の情報は、ドキュメントのキーワードを説明できます。
- リダイレクト
- この例では、URLが変更された場合にユーザーを別のアドレスにリダイレクトする方法を示します。
例の説明
