HTML インスタンス
HTML基本タグの例
- シンプルなHTMLファイル
- この例は非常にシンプルなHTMLファイルで、できるだけ少ないHTMLタグを使用しています。これは、body要素内の内容がブラウザでどのように表示されるかを示しています。
- シンプルな段落
- この例では、段落要素内のテキストがブラウザでどのように表示されるかを示しています。
- さらに多くの段落
- この例では、段落要素の一部のデフォルトの動作を示しています。
- 「詩」の問題
- この例では、HTMLフォーマットの一部の問題を示しています。
- 折り返し
- この例では、HTMLドキュメント内での折り返しの使用を示しています。
- タイトル
- この例では、HTMLドキュメント内でタイトルを表示するタグを示します。
- 中央配置のタイトル
- この例では、中央に配置されたタイトルを示します。
- 水平線
- この例では、水平線を挿入する方法を示します。
- 隠されたコメント
- HTMLソースコード内に隠されたコメントを挿入する方法を示します。
- 背景色
- この例では、HTMLページに背景色を追加する方法を示します。
HTMLテキストフォーマットの例
- テキストフォーマット
- HTMLファイル内でテキストをフォーマットする方法を示します。
- プレ形式テキスト
- この例では、preタグを使用して空行やスペースを制御する方法を示します。
- 「コンピュータ出力」タグ
- 異なる「コンピュータ出力」タグの表示効果を示します。
- 住所
- HTMLファイル内で住所を書く方法を示します。
- 省略形と頭文字の省略形
- 省略形や頭文字の省略形を実現する方法を示します。
- 文字方向
- テキストの方向を変更する方法を示します。
- ブロック引用
- 長さが異なる引用語を実現する方法を示します。
- 削除字効果と挿入字効果
- この例では、削除テキストと挿入テキストをマークする方法を示します。
HTMLリンクの例
- 超级リンクの作成
- HTMLドキュメント内でリンクを作成する方法を示します。
- 画像をリンクにする
- この例では、画像を使用してリンクを作成する方法を示します。
- 新しいブラウザウィンドウでリンクを開く
- この例では、新しいブラウザウィンドウでページを開く方法を示します。これにより、訪問者はあなたのサイトを離れる必要がありません。
- 同じページの異なる場所にリンクする
- この例では、ドキュメントの別の部分にリンクする方法を示します。
- フレームから抜ける
- この例では、ページがフレーム内に固定されている場合にフレームから抜ける方法を示します。
- メールリンクの作成
- この例では、メールにリンクする方法を示します。（この例はメールクライアントプログラムをインストールした後にのみ動作します。）
- メールリンクの作成 2
- より複雑なメールリンクの作成方法を示します。
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 テーブル例
- テーブル
- この例では、HTML文書内にテーブルを作成する方法を示しています。
- テーブル枠
- この例では、様々なタイプのテーブル枠を示しています。
- 枠のないテーブル
- この例では、枠のないテーブルを示しています。
- テーブルの表頭(Heading)
- この例では、テーブルの表頭を表示する方法を示しています。
- 空セル
- この例では、内容のないセルを" "を使用して処理する方法を示しています。
- タイトル付きのテーブル
- この例では、タイトル(caption)付きのテーブルを示しています。
- 行や列を越えるテーブルセル
- この例では、行や列を越えるテーブルセルを定義する方法を示しています。
- テーブル内のタグ
- この例では、異なる要素内に要素を表示する方法を示しています。
- セルパディング(Cell padding)
- セルパディングを使用してセルの内容と枠との間のスペースを作成する方法を示しています。
- セルスペース(Cell spacing)
- セルスペースを使用してセル間の距離を増やす方法を示しています。
- テーブルに背景色または背景画像を追加
- テーブルに背景を追加する方法を示しています。
- テーブルセルに背景色または背景画像を追加
- テーブルセルに背景を追加する方法を示しています。
- テーブルセル内のコンテンツの配置
- この例では、"align"属性を使用してセル内のコンテンツを配置し、美しいテーブルを作成する方法を示しています。
- フレーム(frame)属性
- この例では、"frame"属性を使用してテーブルの周囲の枠を制御する方法を示しています。
HTML リスト例
- 無秩序リスト
- この例では、無秩序リストを示しています。
- 順序リスト
- この例では、順序リストを示しています。
- 異なるタイプの無秩序リスト
- この例では、無秩序リストを示しています。
- 異なるタイプの順序リスト
- この例では、異なるタイプの順序リストを示しています。
- ネストリスト
- この例では、リストをどのようにネストするかを示しています。
- ネストリスト 2
- この例では、より複雑なネストリストを示しています。
- 定義リスト
- この例では、定義リストを示しています。
HTML フォームと入力例
- テキストフィールド(Text fields)
- テキストフィールド(Text fields)
- この例では、HTMLページでテキストフィールドを作成する方法を示します。ユーザーはテキストフィールドにテキストを書き込むことができます。
- パスワードフィールド
- この例では、HTMLのパスワードフィールドを作成する方法を示します。
- チェックボックス
- この例では、HTMLページでチェックボックスを作成する方法を示します。ユーザーはチェックボックスを選択または選択を解除できます。
- ラジオボタン
- この例では、HTMLでシンプルなラジオボタンを作成する方法を示します。
- シンプルなドロップダウンリスト
- この例では、HTMLページでシンプルなドロップダウンリストボックスを作成する方法を示します。ドロップダウンリストボックスはオプションリストです。
- 別のドロップダウンリスト
- テキストエリア(Textarea)
- この例では、テキストエリア（多行テキスト入力コントロール）を作成する方法を示します。ユーザーはテキストエリアにテキストを書き込むことができます。テキストエリアでは、書き込める文字数に制限はありません。
- ボタンを作成する
- この例では、ボタンを作成する方法を示します。ボタン上のテキストはカスタマイズできます。
- データの周りにFieldset
- データの周りにタイトルを持つ枠を描く方法を示します。
フォームの例
- 入力フィールドと確認ボタンのフォーム
- この例では、ページにフォームを追加する方法を示します。このフォームには二つの入力フィールドと確認ボタンがあります。
- チェックボックスのフォーム
- このフォームには二つのチェックボックスと確認ボタンがあります。
- ラジオボタンのフォーム
- このフォームには二つのラジオボタンと確認ボタンがあります。
- フォームから電子メールを送信する
- この例では、フォームから電子メールを送信する方法を示します。
HTML 画像の例
- 画像を挿入する
- この例では、ウェブページに画像を表示する方法を示します。
- 異なる場所から画像を挿入する
- この例では、他のフォルダーやサーバーの画像をウェブページに表示する方法を示します。
- 背景画像
- この例では、HTMLページに背景画像を追加する方法を示します。
- 画像を並べる
- この例では、文字の中で画像を配置する方法を示します。
- 浮遊する画像
- この例では、画像を段落の左側や右側に浮かべる方法を示します。
- 画像サイズを調整する
- この例では、画像のサイズを変更する方法を示します。
- 画像に代替テキストを表示する
- この例では、画像に代替テキストを表示する方法を示します。ブラウザが画像を読み込めない場合、代替テキスト属性が読者に失われた情報を伝えます。ページのすべての画像に代替テキスト属性を追加することは良い習慣です。
- 画像リンクを作成する
- この例では、画像をリンクとして使用する方法を示します。
- 画像マップを作成する
- この例では、クリック可能なエリアを持つ画像マップを作成する方法を示します。各エリアはリンクです。
- 画像をイメージマップに変換する
- この例では、普通の画像をイメージマップに設定する方法を示します。
HTML 背景の例
- バランスの良い背景と色
- 背景色と文字色が良く合った例で、ページの文字が読みやすくなります。
- バランスの取れた背景と色が悪い
- 背景色と文字色の組み合わせが悪く、ページのテキストを読みにくくする例です。
- アクセス性の高い背景画像
- 背景画像と文字色がページのテキストを読みやすくする例です。
- アクセス性の高い背景画像 2
- 背景画像と文字色がページのテキストを読みやすくする別の例です。
- アクセス性の低い背景画像
- 背景画像と文字色がページのテキストを読みにくくする例です。
HTML スタイル (style) 例
- HTML 中のスタイル
- この例では、<head> 部分に追加されたスタイル情報を使用して HTML を整形する方法を示します。
- 下線を付けないリンク
- スタイル属性を使用して下線を付けないリンクを作成する方法を示します。
- 外部スタイルシートにリンクする
- この例では、<link> タグを使用して外部スタイルシートにリンクする方法を示します。
HTML ヘッダー (head) 例
- ドキュメントのタイトル
- ヘッダーアンチャー内のタイトル情報は、ブラウザのウィンドウに表示されません。
- すべてのリンクの target
- この例では、すべてのリンクを新しいウィンドウで開くように base タグを使用する方法を示します。
HTML メタ情報 (meta) 例
- ドキュメントの説明
- メタ要素内の情報は、HTML ドキュメントを説明できます。
- ドキュメントのキーワード
- メタ要素内の情報は、ドキュメントのキーワードを説明できます。
- リダイレクト
- この例では、URLが変更された場合にユーザーを別のアドレスにリダイレクトする方法を示します。
HTML スクリプト (Script) 例
- スクリプトを挿入する
- この例では、HTML ドキュメントにスクリプトを挿入する方法を示します。
- スクリプトをサポートしないブラウザで実行
- この例では、スクリプトをサポートしないブラウザに対処する方法を示します。
