حل الوحدة الثالث البرمجة المتقدمة باستخدام لغة ترميز النص التشعبي

حل الوحدة الثالثة: البرمجة المتقدمة باستخدام لغة ترميز النص التشعبي (HTML)
التنسيق باستخدام وسوم HTML
الصفحة رقم (103)
لنطبق معًا – تدريب 1
السؤال:
نسق القائمة التالية باستخدام وسوم HTML: تغميق النص الأول في قائمة التعداد النقطي، إمالة النص الثاني في قائمة التعداد النقطي، وضع خط تحت النص الثالث في قائمة التعداد النقطي.
الجواب:
<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
<title>Examples</title>
<meta charset="UTF-8"/>
</head>
<body>
<h1>المواد الدراسية</h1>
<ul>
<li><b>الرياضيات</b></li>
<li><i>اللغة العربية</i></li>
<li><u>التاريخ</u></li>
</ul>
</body>
</html>
الصفحة رقم (104)
تدريب 2
السؤال:
نسق النص التالي باستخدام وسوم HTML: ميز نص الوسم <h1> باستخدام الوسم المناسب، ولون نص الوسم <p>.
الجواب:
<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
<title>Example</title>
<meta charset="UTF-8"/>
</head>
<body>
<h1><mark>لائحة المحافظة على الذوق العام:</mark></h1>
<p><font color="green">لا يجوز الكتابة أو الرسم على الجدران أو وسائل النقل مالم يكن مرخصاً من الجهة المعنية</font></p>
</body>
</html>
الصفحة رقم (105)
تدريب 3
السؤال:
أنشئ صفحة إلكترونية مختصرة عن الذوق العام تحتوي على ما يلي: عنوان باسم "آداب الذوق العام"، فقرة تصف فيها سلوكيات الذوق العام، نسق نص الفقرة باستخدام الوسوم التي تعلمتها في الدرس، صورة معبرة ثم أضف خطاً حولها، وبعد الانتهاء احفظ الصفحة الإلكترونية.
الجواب:
<html>
<head>
<title> آداب الذوق العام </title>
</head>
<body>
<h1> <font color="red"> آداب الذوق العام </font></h1>
<hr/> <big>
<p>الذوق العام في السعودية هو مجموعة الآداب السلوكية والاجتماعية التي تنطوي تحت إطار اللياقة التي يفرضها المكان والزمان وعاداته، وشبهها الثقافة الإنسانية والسلوكيات المتعارف عليها، وتحكمها لائحة تنظيمية بدأ تنفيذها في سبتمبر 2019 تمنع كل ما من شأنه المساس بالذوق العام والتقليل من احترام الثقافة والتقاليد السعودية أو الإساءة إليها، وتضم 19 مخالفة يعاقب مرتكبها بغرامات مالية، أدناها 50 ريالاً وأعلاها 3000 ريال. وتلزم بتغطية تكاليف الإصلاح وإزالة الأضرار الناتجة على أي مخالفة</p> </bigs>
<hr/>
<img src="BB.jpg" border="30" width="350px" height="350px" />
<hr/>
</body>
</html>
صفحات التنسيق النمطية CSS
الصفحة رقم (120)
لنطبق معًا – تدريب 1
السؤال:
عدد طرق إدراج ملف CSS داخل مستند HTML.
الجواب:
صفحات التنسيق النمطية المضمنة (Inline CSS)
صفحات التنسيق النمطية الداخلية (Internal CSS)
صفحات التنسيق النمطية الخارجية (External CSS)

تدريب 2
السؤال:
املأ الفراغات بقيمة زخرفة النص (text-decoration) طبقاً للصورة.
الجواب:
h1 {
  font-size: 20px;
  text-decoration: Underline;
}
h2 {
  color: #9682ee;
  font-size: 50%;
  background-color: rgb(224, 242, 241);
  text-decoration: Line-through;
}
p {
  color: rgb(244,124,64);
  text-decoration: overline;
}
الصفحة رقم (121)
تدريب 3
السؤال:
في كود HTML التالي، أضف قاعدة CSS الداخلية وكود HTML المناسبين لتغيير لون كل خط من القائمة غير المرتبة إلى لون مختلف.
الجواب:
<html dir="rtl" lang="ar">
<head>
<meta charset="UTF-8"/>
</head>
<body>
<ul>
<li style="color:green;">واحد</li>
<li style="color:blue;">اثنين</li>
<li style="color:red;">ثلاثة</li>
<li style="color:yellow;">أربعة</li>
<li style="color:purple;">خمسة</li>
<li style="color:orange;">ستة</li>
</ul>
</body>
</html>
الصفحة رقم (122)
تدريب 4
السؤال:
في كود HTML التالي استخدم صفحة الأنماط الداخلية (Internal style sheet) لتحرير الكود بحيث يتغير لون جميع عناصر <p> إلى اللون الأحمر (red).
الجواب:
<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
<meta charset="UTF-8"/>
<style>
p {
  color: red;
}
</style>
</head>
<body>
<h1>هذا عنوان.</h1>
<p>هذه فقرة.</p>
<p>هذه الفقرة الثانية.</p>
</body>
</html>
الصفحة رقم (123)
تدريب 5
السؤال:
في كود HTML التالي، أضف ورقة تصميم خارجية برابط "mystyle.css"، ثم حرر الكود لتغيير لون جميع العناصر تحت فئة "colortext" class إلى اللون الأزرق (blue).
الجواب:
<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href="mystyle_ex5.css">
</head>
<body>
<h1>هذا عنوان.</h1>
<p>هذه فقرة.</p>
<p class="colortext">هذه الفقرة الثانية.</p>
<p class="colortext">هذه الفقرة الثالثة.</p>
</body>
</html>
إنشاء موقع إلكتروني
الصفحة رقم (142)
لنطبق معًا – تدريب 1
السؤال:
اختر إحدى خطوات إنشاء موقع إلكتروني واذكر الآثار المترتبة على عدم تنفيذها؟
الجواب:
التخطيط: يجب تحديد الهدف والغرض من الموقع ورسم بنيته العامة وذلك قبل البدء في التصميم وفي حالة عدم تنفيذها يفقد الموقع الإلكتروني إحدى الخصائص الهامة وهي المحتوى الواضح.

تدريب 2
السؤال:
أنشئ موقعاً إلكترونياً خاصاً بوصفات الطعام حسب التعليمات التالية: سيكون لكل وصفة اسم وقائمة من المكونات وقسم خاص بالتعليمات، أنشئ صفحة خاصة بوصفة لعمل شطيرة صحية من الخضار والدجاج، قدم الصفحة بحيث يعرض المكونات خلفية بلون أخضر فاتح ومنتجات الألبان بخلفية بلون أصفر فاتح، اختر الخط من نوع sans serif للعنوان وتكون تعليمات الوصفة تحت عنوان الترويسة Instructions بخط مائل Italic، وفي النهاية أضف صورة للطعام الذي ستعده باتباع الوصفة.
الجواب:
<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
<title>وصفات الطعام</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div class="menu">
<ul>
<li><a href="فطيرة_بالخضار.html" target="_blank">صفحة فطيرة بالخضار</a></li>
<li><a href="5_تدريب.html" target="_blank">وصفات متعددة</a></li>
<li><a href="5_تدريب.html" target="_blank">وصفات متعددة</a></li>
</ul>
</div>
<div>
<ul>
<li><a href="فطيرة_بالخضار.html" target="_blank">فطيرة شهية بالخضار</a></li>
<li><a href="#history">تاريخ</a></li>
<li><a href="#gallery">كشاف</a></li>
</ul>
</div>
<div class="photos">
ألبوم الصور<br><br>
<a href="فطيرة_بالخضار.html"><img src="Images/2022_1.JPG" width="300" height="200"></a>
<img src="Images/2022_2.JPG" width="300" height="200">
<img src="Images/2022_3.JPG" width="300" height="200">
<img src="Images/2022_4.JPG" width="300" height="200">
</div>
<div class="footer">
<br>
حقوق محفوظة لإدارة الموقع
</div>
</body>
</html>

<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
<title>فطيرة بالخضار</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>إرشادات تنفيذ الوصفة</h1>
<ul>
<h3>المقادير</h3>
<li>مكونات فطيرة بالخضار</li>
<p>نفذ وصفة صحية من الخضار والمكونات المتاحة.</p>
<p class="rid_1">نفذ كما هو موضح</p>
<p class="yll_1">تعليمات الوصفة</p>
</ul>
<img src="Images/2022_1.JPG" width="300" height="300"><br>
<br>
حقوق محفوظة لإدارة الموقع
</body>
</html>

h3 {
  color: #1b29ce;
  font-size: 100%;
  font-family: Arial,sans-serif;
  font-style: italic;
}
p {
  color: rgb(4, 6, 4);
  font-family: Verdana, Times, sans-serif;
  background-color: rgb(60, 242, 28);
}
.rid_1 {
  color: rgb(12, 4, 12);
  font-family: Verdana, Times, sans-serif;
  background-color: rgb(109, 24, 24);
}
.yll_1 {
  color: rgb(12, 4, 12);
  font-family: Verdana, Times, sans-serif;
  background-color: rgb(253, 253, 18);
}
.menu { background-color: #426C35; }
.main {
  overflow: auto;
  text-align: center;
  background-color: #f5f5f5;
  padding-top: 20px;
  padding-bottom: 20px;
}
.photos {
  overflow: auto;
  padding-top: 100px;
  padding-bottom: 140px;
  text-align: center;
}
.menu li {
  display: inline-block;
  text-align: center;
}
.menu li a {
  display: inline-block;
  height: auto;
  width: 150px;
  color: #333333;
  background-color: #f5f5f5;
  padding: 10px;
  margin: 4px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 4px;
}
.menu li a:hover { background-color: #d6d399; }

حل وحدة البرمجة المتقدمة باستخدام لغة ترميز النص التشعبي تقنية رقمية 2

حل وحدة البرمجة المتقدمة باستخدام لغة ترميز النص التشعبي ، حل الوحدة الثالثة البرمجة المتقدمة والتي تحتوي درس التنسيق باستخدام الوسوم

دعونا نتعرف على جميع الدروس في هذه الوحدة :-

البرمجة المتقدمة بإستخدام لغتة ترميز النص التشعبي HTML

  1. الدرس الاول: التنسيق باستخدام وسوم
  2. الدرس الثاني: تصميم صفحات التنسيق النمطية
  3. الدرس الثالث: تصميم الموقع الإلكتروني

إقرأ أيضا : حل وحدة الذكاء الإصطناعي تقنية رقمية 2

كتب متعلقة

الحل حل الوحدة الأولى علم البيانات
الحل حل كتاب التقنية الرقمية 2
كتاب كتاب التقنية الرقمية 2
الحل حل الوحدة الثاني الذكاء الاصطناعي
شارك الحل مع اصدقائك