كيف - اصنع كتاب HTML
تعرف على كيفية إنشاء كتاب HTML يعمل على جميع الأجهزة ، وأجهزة الكمبيوتر ، والكمبيوتر المحمول ، والجهاز اللوحي ، والهاتف.
أولاً ، قم بإنشاء صفحة HTML أساسية
HTML هي لغة الترميز القياسية لإنشاء مواقع الويب و 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">
ستؤدي إضافة المعلومات الوصفية التالية إلى عرض كتابك بشكل صحيح على جميع الأجهزة ، وأجهزة الكمبيوتر ، والكمبيوتر المحمول ، والجهاز اللوحي ، والهاتف:
<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>
أضف بعض الاسلوب
أضف ورقة أنماط إلى كتابك:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
ملاحظة: إذا كنت ترغب في دراسة CSS بالتفصيل ، فيرجى قراءة دروس CSS الخاصة بنا .
قم بإنشاء صفحة HTML للفصل الأول
ملف : فلسفة_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>
في المثال أعلاه ، قمنا بتسمية الفصل الأول من الكتاب:
" الفلسفة_شافتر1 .htm ".
الاسم الذي يجب استخدامه متروك لك. ربما ينبغي أن يطلق عليه "الميتافيزيقيا".
على أي حال ، استمر على النحو الوارد أعلاه وقم بإنشاء الفصول الأخرى:
"فلسفة_chaper2.htm "
" فلسفة_شافير 3.htm "
" فلسفة_شافير 4.htm "
" فلسفة_شافير5.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>