kt3k · April 30, 2020 15:20
diff --git a/html.txt b/html.txt
 よしやせんせいの授業 1日目

 1章
 HTML とは

 HTML は Hyper-Text Markup Language の頭文字を取ったものです。(覚えなくても大丈夫)

 Language に注目してください。Language = 言語ですね。HTML は言語の一種のようなものです。

 HTML 言語を書いて保存したものを HTML ファイルといいます。(ファイルは分かりますか? ファイルの種類には jpg ファイル(画像)、word ファイル(文書)、pdf ファイル(印刷物) などがありますね)

 HTML ファイルを保存して、そのファイルを「Web ブラウザ」で開くと、「Web ページ」が表示されます。HTML は Web ページを表示させるための言語です。

 2章
 HTML の書き方

 メモ帳を開いてください。

 HTML は タグ を積み重ねて書いていきます。タグは三角カッコで「タグの名前」を囲んで作ります。例を見てみましょう

 例: p タグ (↓ p タグの書き方です)

 <p>こんにちは、いよです</p>

 <p> は開始タグといいます、</p> は終了タグと言います。<p> と </p> で囲まれた部分が「タグの中身」になります。

 p タグは paragraph という意味で、「文章」を表すタグです。上の p タグは全体で、「こんにちは、いよです」という内容の文章があることを表しています。

 3章

 とほほの HTML リファレンスです
 http://www.tohoho-web.com/html/

 このページにはいろんなタグが載っています。たくさん載っていますが全部を覚える必要はありません。必要な時に必要なものだけをちょっとずつ覚えましょう。

 ちなみに全ての html タグは 100以上ありますが、実際に使うタグは20個ぐらいです(よしや調べ)。

 ここからは特によく使うタグを紹介します。

 a タグ - リンクを作るためのタグです。href で指定した URL のページに行くためのリンクを作れるタグです。

 <a href="https://google.com/">Google</a>

 注: a は anchor (錨) の a です。他のページへの anchor 錨 (つながり) みたいな意味だと思う。

 img タグ - image (画像) を表示するのに使う。src に指定した URL にある画像をページ内に表示する。

 <img src="" />

 注: img タグは閉じるタグがありません。閉じるタグが無いタグは、タグの最後に /> と書いて、自分で閉じている事を表します。

 ul, ol, li - リスト項目を表示するタグ

 <ul>
  <li>カップヌードル</li>
  <li>ペヤング</li>
  <li>どん兵衛</li>
 </ul>

 <ol>
  <li>カップヌードル</li>
  <li>ペヤング</li>
  <li>どん兵衛</li>
 </ol>

 p タグ - パラグラフ (paragraph, 文章) を作るためのタグです。まとまりの文章を p タグで囲います。

 <p>こんにちは、いよだよ</p>

 table タグ - 表を表すタグ。tr、td、th タグと組み合わせて表を作ります。tr は table row (表の1行)、td は table data (表の1マス)、th は table header (表の見出し) を表すタグです

 <table>
  <tr>
    <th>名前</th>
    <th>値段</th>
    <th>カロリー</th>
  </tr>
  <tr>
    <td>アイス</td>
    <td>100円</td>
    <td>200kcal</td>
  </tr>
  <tr>
    <td>プリン</td>
    <td>150円</td>
    <td>250kcal</td>
  </tr>
 </table>

 div タグ - division (領域) を表すタグ。ページの中の領域を区切るのに使います。後で説明する CSS と組み合わせて、div タグにいろいろなスタイルを指定することで、ページのデザインを変えることが出来ます。

 <div>
  <p>こんにちは</p>
  <p>さようなら</p>
  <hr />
  <ul>
    <li>メロンパン</li>
    <li>あんパン</li>
    <li>おにぎり</li>
  </ul>
 </div>

 span タグ - 文字の範囲を表すタグ。後で説明する CSS と組み合わせて span タグにいろいろなスタイルを指定することで、文字のデザインを変えることが出来ます。

 <span>こんにちは</span>

 **ページの構造を表すタグ**

 html タグ - html ページ全体を表すタグ。ページの全体は html タグで囲みます。

 <html>...ページの内容...</html>

 head タグ, body タグ - html の中には head タグと body タグを書きます。

 <html>
  <head>...</head>
  <body>...</body>
 </html>

 head タグの中にはページのメタ情報 (ページのタイトルなど)
 body タグの中にはページの内容 ()
 を書きます。

 **特別な効果を持ったタグ**

 title タグ - ページのタイトルを指定するタグ。head タグの中に書きます。

 <head>
  <title>いよのページだよ</title>
 </head>

 style タグ - 後で説明する CSS を書くためのタグです。style タグで囲った中に CSS 言語で記述したページのデザインを記述します。

 <style>
  body { background-color: red; }
 </style>

 script タグ - 後で説明する JavaScript を書くためのタグです。script タグで囲った中に JavaScript 言語で記述したページの動きを記述します。
	よしやせんせいの授業 1日目

	1章
	HTML とは

	HTML は Hyper-Text Markup Language の頭文字を取ったものです。(覚えなくても大丈夫)

	Language に注目してください。Language = 言語ですね。HTML は言語の一種のようなものです。

	HTML 言語を書いて保存したものを HTML ファイルといいます。(ファイルは分かりますか? ファイルの種類には jpg ファイル(画像)、word ファイル(文書)、pdf ファイル(印刷物) などがありますね)

	HTML ファイルを保存して、そのファイルを「Web ブラウザ」で開くと、「Web ページ」が表示されます。HTML は Web ページを表示させるための言語です。

	2章
	HTML の書き方

	メモ帳を開いてください。

	HTML はタグを積み重ねて書いていきます。タグは三角カッコで「タグの名前」を囲んで作ります。例を見てみましょう

	例: p タグ (↓ p タグの書き方です)

	<p>こんにちは、いよです</p>

	<p> は開始タグといいます、</p> は終了タグと言います。<p> と </p> で囲まれた部分が「タグの中身」になります。

	p タグは paragraph という意味で、「文章」を表すタグです。上の p タグは全体で、「こんにちは、いよです」という内容の文章があることを表しています。

	3章

	とほほの HTML リファレンスです
	http://www.tohoho-web.com/html/

	このページにはいろんなタグが載っています。たくさん載っていますが全部を覚える必要はありません。必要な時に必要なものだけをちょっとずつ覚えましょう。

	ちなみに全ての html タグは 100以上ありますが、実際に使うタグは20個ぐらいです(よしや調べ)。

	ここからは特によく使うタグを紹介します。

	a タグ - リンクを作るためのタグです。href で指定した URL のページに行くためのリンクを作れるタグです。

	<a href="https://google.com/">Google</a>

	注: a は anchor (錨) の a です。他のページへの anchor 錨 (つながり) みたいな意味だと思う。

	img タグ - image (画像) を表示するのに使う。src に指定した URL にある画像をページ内に表示する。

	<img src="" />

	注: img タグは閉じるタグがありません。閉じるタグが無いタグは、タグの最後に /> と書いて、自分で閉じている事を表します。

	ul, ol, li - リスト項目を表示するタグ

	<ul>
	<li>カップヌードル</li>
	<li>ペヤング</li>
	<li>どん兵衛</li>
	</ul>

	<ol>
	<li>カップヌードル</li>
	<li>ペヤング</li>
	<li>どん兵衛</li>
	</ol>

	p タグ - パラグラフ (paragraph, 文章) を作るためのタグです。まとまりの文章を p タグで囲います。

	<p>こんにちは、いよだよ</p>

	table タグ - 表を表すタグ。tr、td、th タグと組み合わせて表を作ります。tr は table row (表の1行)、td は table data (表の1マス)、th は table header (表の見出し) を表すタグです

	<table>
	<tr>
	<th>名前</th>
	<th>値段</th>
	<th>カロリー</th>
	</tr>
	<tr>
	<td>アイス</td>
	<td>100円</td>
	<td>200kcal</td>
	</tr>
	<tr>
	<td>プリン</td>
	<td>150円</td>
	<td>250kcal</td>
	</tr>
	</table>

	div タグ - division (領域) を表すタグ。ページの中の領域を区切るのに使います。後で説明する CSS と組み合わせて、div タグにいろいろなスタイルを指定することで、ページのデザインを変えることが出来ます。

	<div>
	<p>こんにちは</p>
	<p>さようなら</p>
	<hr />
	<ul>
	<li>メロンパン</li>
	<li>あんパン</li>
	<li>おにぎり</li>
	</ul>
	</div>

	span タグ - 文字の範囲を表すタグ。後で説明する CSS と組み合わせて span タグにいろいろなスタイルを指定することで、文字のデザインを変えることが出来ます。

	<span>こんにちは</span>

	ページの構造を表すタグ

	html タグ - html ページ全体を表すタグ。ページの全体は html タグで囲みます。

	<html>...ページの内容...</html>

	head タグ, body タグ - html の中には head タグと body タグを書きます。

	<html>
	<head>...</head>
	<body>...</body>
	</html>

	head タグの中にはページのメタ情報 (ページのタイトルなど)
	body タグの中にはページの内容 ()
	を書きます。

	特別な効果を持ったタグ

	title タグ - ページのタイトルを指定するタグ。head タグの中に書きます。

	<head>
	<title>いよのページだよ</title>
	</head>

	style タグ - 後で説明する CSS を書くためのタグです。style タグで囲った中に CSS 言語で記述したページのデザインを記述します。

	<style>
	body { background-color: red; }
	</style>

	script タグ - 後で説明する JavaScript を書くためのタグです。script タグで囲った中に JavaScript 言語で記述したページの動きを記述します。