<!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>

<!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>

<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>

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;
}

<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>

<!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>

<!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>

<!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; }