フォーム部品をグループ化します。部品のグループにキャプション（fieldset内の見出しみたいなもの）を付けたい場合は、fieldset要素内の先頭にlegend要素を配置します。実際にlegend要素を含めて書いてみましょう。
入力フォームを作成するため、この要素内に各部品を配置していきます。入力した値は送信されることになります。テキスト形式でもできますが送信を簡単に盗むこともできるため,action="******.cgi"を利用することをお勧めします。私はcgiを作るソフトを持っていますのでそれを使っています。簡単な例ですが、作ってみましょう。
method属性：データの送信方法を指定する際に指定します。指定できるのは以下の2通りです。
get …… 送信内容がURLとして渡される（初期値）
post …… 本文（本体）として送信される
getでは、長い文章などを送信するのには向いていません。通常postに切り替えます。
action属性：送信先の指定で送信先のURLをcgiの中に書きます。
input type="text"：一行テキストボックスを作成する（初期値）。
textareaタグは複数行のテキスト入力欄を作成します。
cols属性：入力欄の横幅で文字数で指定（初期値は20）
rows属性：入力欄の高さを行数で指定（初期値は2）
maxlength属性：入力できる最大文字数を指定
type="submit"：type属性の値にsubmitを指定すると、フォームの送信ボタンを作成します。
value属性：ボタンに表示する文字を決めます。このボタンを押すことでメール送信されます。
autofocus：このページの読み込み時に自動的にフォーカスをあてるかどうかを指定します。具体的には指定した入力欄でカーソルが点滅します。
このページも指定していますがフレーム分割では有効ではありません。右側のページのみ新しいタブで表示させてみますので、autofocusを確認してください。
cgi、phpが使える無料レンタルサーバーは、
XREA（エクスリア）
land.to
『TOK2.com』
hはheading（ヘディング）の略で見出しを意味します。見出しの大きさに合わせて<h1>タグから<h6>タグまで設定でき、<h1>タグが一番大きな見出しで、以下数字が増えるほど小さな見出しになっていきます。また、文字の大きさも変化します。
pタグと同様で、改行して1行空けて終わります。
<h1>
head要素はメタデータの集まりを表します。主に、title要素、meta要素、link要素などをこの要素内に配置します。基本的には、この要素の内容はブラウザ上には表示されません。（ただし、一部の情報はブラウザのタイトルバーなどに表示されます）
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="*******">
<link href="*****.css" rel="stylesheet">
</head>
meta要素：他のメタデータ・コンテンツ（title要素、base要素、link要素、style要素、script要素）では表現できない、様々なメタデータを表します。
charset：ページで使用している文字エンコーディングを指定します。（HTML5ではutf-8がいいです）
<title>～</title>：タイトルを書くこと（検索エンジンに表示される）
<meta name="description" content="このページの要約">：このページの要約を書く（検索エンジンに表示される）
link要素：「そのページ」と「別のファイルやページ」を関連づけるためのタグです。hrefでファイルやページを指定、relは指定したファイルやページは＊＊＊＊＊でできています。（上記の場合はスタイルシートでできている）
link要素を使わずにスタイルシートを使うために、<head>～</head>内に書くことができます。
<head>
････
<style>
<!--
div {
background-color:#eef;
}
-->
</style>
････
</head>
これ以外にも沢山ありますが、重要なのはこれだけです。
作らないといけないのは<title>、name="description"のcontent、link href="*****.css"だけです。あとはコピペになります。
hr要素は段落レベルのテーマの区切りを表します。（水平線で表示されます）
形状、サイズ、色等をスタイルシートで指定できます。
破線、太さ３ピクセル、薄い青色の線が下記。
html要素はhyper text markup language（ハイパーテキスト・マークアップ・ランゲージ）の略。コンピュータが理解できる、マークアップをするための言葉です。
htmlという言葉を使うと、<h1>～</h1>で囲まれているのが見出し、<p>～</p>で囲まれているのが本文、という文章構成を、コンピュータが理解できるようになります。 このhtmlを表示するときは、<h1>や<p>は見えませんが、<h1>に囲まれている見出しは大きい文字に、<p>に囲まれている本文は小さめの文字になります。
inline frame（インラインフレーム）の略。ページの中に別のページをはめ込むことができます。
上は「１．ホームページを作るには」のページ（p01.html）を埋め込んだものです。
src（ソースの略）では埋め込むページのURLを指定します。widthとheightはそれぞれ横幅と高さでピクセルですが単位は書きません。
image（イメージ）の略。画像を文書内に埋め込みます。
<img src="image/st10.gif" alt="エディタを開いた状態">
src：source（ソース）の略。画像のURLを指定します。
このファイルとst10.gif画像が同じフォルダにあるのなら、src="st10.gif"でOK。同じフォルダには「image」というフォルダがあり、この中にst01.gifが入っているのでsrc="image/st10.gif"という記載になります。
alt：alternate text（代替テキスト）の略。画像を説明します。今回は「エディタを開いた状態」と書きました。これ以外にもwidthやheightなど属性はありますが、スタイルシートの利用がいいでしょう。
画像には一般的に、gif、jpg（jpeg）、pngの3タイプになります。
以下に表示します。
≪HTML LS≫
<img>の遅延読み込みを行うloadingの追加。
<img src="image.jpg" loading="lazy" alt="">
loading：eager（遅延ロードしない）、lazy（遅延ロードする）、auto（ブラウザに判断を委ねる）
大量の画像を含むページは、一般に表示速度が遅くなりがちです。imgタグを使って普通に書くと次のような現象が起きてしまいます。
・画像の読み込みが終わるまでブラウザが重くなり、画面操作に支障が出る
・ネットワークやサーバーの負荷が瞬間的にひっ迫する
フォームの各種部品（入力欄・選択肢・ボタン）を作成します。
cgiが作れる有料ソフト「Dicre送信フォームメイカー」で対応していて手打ちではほとんど使ったことがありませんので<input>の説明ができません。「送信フォームメイカー」は自動的に「.cgi」が組み込まれるソフトです。
このチェックボックスは「syumi」と名前が付いていて、例えばパソコンにチェックを入れて送信すると、value（値）が「PC」で送られます。
送信された結果は、syumi PC となります。