方法-HTMLブックを作成する
すべてのデバイス、PC、ラップトップ、タブレット、および電話で機能するHTMLブックを作成する方法を学びます。
まず、基本的なHTMLページを作成します
HTMLはWebサイトを作成するための標準のマークアップ言語であり、CSSはHTMLドキュメントのスタイルを記述する言語です。
HTMLとCSSを組み合わせて、基本的なHTMLブックを作成します。
まず、HTMLスケルトンから始めます。
例
<!DOCTYPE html>
<html>
<head>
<title>My Book</title>
<meta charset="UTF-8">
</head>
<body>
<h1>My Book</h1>
<p>HTML book created by me.</p>
</body>
</html>
例の説明
<!DOCTYPE html>
ドキュメントタイプはHTMLです<html> </html>
ドキュメントの最初と最後<head> </head>
ドキュメント情報の最初と最後<title>
本のタイトル(「私の本」)<meta charset="UTF-8">
使用される文字セット(UTF-8)<body> </body>
表示されるコンテンツの開始と終了<h1> </h1>
見出しの始まりと終わり<p> </p>
段落の始まりと終わり
上で説明したコードはHTMLタグです。
HTMLタグは、HTMLドキュメントのコンテンツを定義するために使用されます。
タグは<
(小なり記号)で始まり、(大なり記号)で終わり
>
ます。
このよう<p>
に</p>
、段落の最初と最後をマークアップするために使用されます。
注: HTMLを詳細に学習したい場合は、HTMLチュートリアルをお読みください。
完全に正確に<html>
するには、本で使用されている言語を定義するために、タグに言語属性を追加する必要があります。
<html lang="en">
次のメタ情報を追加すると、すべてのデバイス、PC、ラップトップ、タブレット、および電話で書籍が正しく表示されます。
<meta name="viewport" content="width=device-width, initial-scale=1">
例
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Book</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>My Book</h1>
<p>HTML book created by me.</p>
</body>
</html>
目次を作成する
要素内<body> </body>
に、目次を追加します。
<body>
<h1>Philosopy</h1>
<h3>Table of Contents</h3>
<p>1. Metaphysics</p>
<p>2. Epistemology</p>
<p>3. Logics</p>
<p>4. Ethics</p>
<p>5. Aesthetics</p>
</body>
いくつかのスタイルを追加する
あなたの本にstyleheetを追加してください:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
注: CSSについて詳しく知りたい場合は、CSSチュートリアルをお読みください。
第1章のHTMLページを作成する
ファイル:philosophy_chapter1.htm
<body class="w3-content">
<div class="w3-container">
<h1>1. Metaphysics</h1>
<h3>The nature of reality.</h3>
<p>Metaphysics is the part of philosophy that studies the nature of reality.</p>
<p>When we look around, we can see:</p>
<ul>
<li>Nature</li>
<li>Animals</li>
<li>People</li>
<li>Houses</li>
<li>Cars</li>
<li>and much more</li>
</ul>
<p>Is this Virtual Reality real?</p>
<p>In Metaphysics, the questions is:</p>
<ul>
<li>What is real?</li>
<li>Is what we see real?</li>
<li>Is there more than we see?</li>
<li>Is there more than we sence?</li>
<li>Is there something else?</li>
<li>Is there something more?</li>
<li>Is there another dimension?</li>
</ul>
</div>
</body>
第1章へのリンクを追加する
<body>
<h1>Philosopy</h1>
<h3>Table of Contents</h3>
<p><a href="philosophy_chapter1.htm">1. Metaphysics</a></p>
<p>2. Epistemology</p>
<p>3. Logics</p>
<p>4. Ethics</p>
<p>5. Aesthetics</p>
</body>
上記の例では、本の最初の章に次の名前を付けました。
「philosophy_chapter1.htm」。
使用する名前はあなた次第です。多分それは「形而上学」と呼ばれるべきです。
とにかく、上記のように続けて、他の章を作成します。
"philosophy_chaper2.htm"
"philosophy_chaper3.htm"
"philosophy_chaper4.htm"
"philosophy_chaper5.htm"
各章へのリンクを追加する
<body>
<h1>Philosopy</h1>
<h3>Table of Contents</h3>
<p>
<a href="philosophy_chapter1.htm">1. Metaphysics</a>
</p>
<p>
<a href="philosophy_chapter2.htm">2. Epistemology</a>
</p>
<p>
<a href="philosophy_chapter3.htm">3. Logics</a>
</p>
<p>
<a href="philosophy_chapter5.htm">4. Ethics</a>
</p>
<p>
<a href="philosophy_chapter4.htm">5. Aesthetics</a>
</p>
</body>