-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathbasic10.html
More file actions
171 lines (125 loc) · 7.55 KB
/
Copy pathbasic10.html
File metadata and controls
171 lines (125 loc) · 7.55 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="أساسيات لغة ترميز النص الفائق اتش.تي.إم.إل | إنشاء صفحة وكالة سفر"/>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="../favicon.png">
<title>HTMLVerse | الأساسيات</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100..900&display=swap" rel="stylesheet">
</head>
<body>
<header>
<a class="red" href="./index.html#10">X</a>
<h1>أساسيات اتش.تي.إم.إل</h1>
</header>
<main>
<!-- BASIC 10 -->
<div class="box">
<div class="sub-title">
<h2>١٠. إنشاء صفحة وكالة سفر</h2>
<span class="hint">مختبر</span>
<p>الهدف: استيفاء قصص المستخدم أدناه والحصول على جميع الاختبارات اللازمة لإكمال المختبر.</p>
</div>
<section>
<h3>قصص المستخدم :</h3>
<h4>١. يجب أن يكون لديك إعلان <code class="br">DOCTYPE</code>.</h4>
<h4>٢. يجب أن يكون لديك عنصر <code class="br">html</code> مع تعيين <code class="br">lang</code> إلى <code class="br">ar</code> و <code class="br">dir</code> إلى <code class="br">rtl</code>.</h4>
<h4>٣. يجب أن يكون لديك عنصر "هاد" <code class="br">head</code> يحتوي على عنصر "ميتا" <code class="br">meta</code> "ڢويد" <em>void</em> مع مجموعة أحرف <code class="br">charset</code> مضبوطة على <code class="br">utf-8</code> وعنوان <code class="br">title</code> يحتوي على نص "صفحة وكالة سفر".</h4>
<h4>٤. يجب أن يكون لديك علامة تعريفية <code class="br">meta</code> في عنصر الرأس <code class="br">head</code> الخاص بك تحتوي على وصف قصير <em>short description</em> لموقع الويب الخاص بك لتحسين محركات البحث <em>SEO</em>.</h4>
<h4>٥. يجب أن يكون لديك عنصر <code class="br">h1</code> لتقديم وجهات سفرك.</h4>
<h4>٦. يجب أن يكون لديك فقرة <code class="br">p</code> أسفل عنصر <code class="br">h1</code> تقدم لك فرص السفر.</h4>
<h4>٧. يجب أن يكون لديك عنصر <code class="br">h2</code> مع النص "الحزم".</h4>
<h4>٨. يجب أن يكون لديك عنصر <code class="br">p</code> يقدم مقدمة موجزة للحزم المختلفة.</h4>
<h4>٩. يجب أن يكون لديك عنصر قائمة <code class="br">ul</code> غير مرتب يحتوي على عنصرين <code class="br">li</code>. يجب أن يحتوي العنصران على النص "رحلات جماعية" و"رحلات خاصة"، على التوالي. يجب أن يكون نص كل عنصر قائمة محاطًا بعنصر ربط <code class="br">a</code>.</h4>
<h4>١٠. يجب أن يكون لديك عنصر <code class="br">h2</code> مع النص أفضل المسارات.</h4>
<h4>١١. يجب أن يكون لديك ثلاثة عناصر شكلية <code class="br">figure</code> على الأقل، يحتوي كل منها على عنصر مرساة <code class="br">a</code> وعنصر تسمية توضيحية <code class="br">figcaption</code>.</h4>
<h4>١٢. يجب أن تحتوي عناصر المرساة الثلاثة <code class="br">a</code> على عنصر <code class="br">img</code> مع سمة "الت" <code class="br">alt</code> مناسبة وسمة "اس.ار.سي" <code class="br">src</code> مضبوطة على صورة صالحة كمحتوى لها. يمكنك استخدام:
<br><div><div class="long-link"><code class="br">https://openarabtech.github.io/HTMLVerse/basic/assets/colosseo.jpg</code> <br> <code class="br">https://arabiverse.github.io/HTMLverse/basic/assets/alps.jpg</code> <br> <code class="br">https://arabiverse.github.io/HTMLverse/basic/assets/sea.jpg</code></div> <br>
إذا أردت.</h4>
<h4>١٣. يجب أن تحتوي جميع عناصر المرساة <code class="br">a</code> الخمسة لديك على سمة <code class="br">href</code> بقيمة <code class="br">https://arabiverse.github.io/HTMLverse</code> وسمة <code class="br">target</code> بقيمة <code class="br">blank_</code>.</h4>
<h3>الحل :</h3>
<div class="sourcecode">
<pre><span>code <br></span><code>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8" />
<title>صفحة وكالة سفر</title>
<meta name="description" content="سافر بأمان وحرية"/>
</head>
<body>
<h1>وجهات سفر</h1>
<p>فرص السفر</p>
<h2>الحزم</h2>
<p>مقدمة موجزة للحزم المختلفة</p>
<ul>
<li><a href="https://openarabtech.github.io/HTMLVerse" target="_blank">رحلات جماعية</a></li>
<li><a href="https://openarabtech.github.io/HTMLVerse" target="_blank">رحلات خاصة</a></li>
</ul>
<h2>أفضل المسارات</h2>
<figure>
<a href="https://openarabtech.github.io/HTMLVerse" target="_blank">
<img src="https://openarabtech.github.io/HTMLVerse/basic/assets/colosseo.jpg" alt="الحضارات">
</a>
<figcaption>الحضارات</figcaption>
</figure>
<figure>
<a href="https://openarabtech.github.io/HTMLVerse" target="_blank">
<img src="https://openarabtech.github.io/HTMLVerse/basic/assets/alps.jpg" alt="الجبال">
</a>
<figcaption>الجبال</figcaption>
</figure>
<figure>
<a href="https://openarabtech.github.io/HTMLVerse" target="_blank">
<img src="https://openarabtech.github.io/HTMLVerse/basic/assets/sea.jpg" alt="الجزر">
</a>
<figcaption>الجزر</figcaption>
</figure>
</body>
</html>
</code></pre>
</div>
<h3>معاينة :</h3>
<div class="preview" role="presentation">
<h1>وجهات سفر</h1>
<p>فرص السفر</p>
<h2>الحزم</h2>
<p>مقدمة موجزة للحزم المختلفة</p>
<ul>
<li><a href="https://openarabtech.github.io/HTMLVerse" target="_blank">رحلات جماعية</a></li>
<li><a href="https://openarabtech.github.io/HTMLVerse" target="_blank">رحلات خاصة</a></li>
</ul>
<h2>أفضل المسارات</h2>
<figure>
<a href="https://openarabtech.github.io/HTMLVerse" target="_blank">
<img src="assets/colosseo.jpg" alt="الحضارات">
</a>
<figcaption>الحضارات</figcaption>
</figure>
<figure>
<a href="https://openarabtech.github.io/HTMLVerse" target="_blank">
<img src="assets/alps.jpg" alt="الجبال">
</a>
<figcaption>الجبال</figcaption>
</figure>
<figure>
<a href="https://openarabtech.github.io/HTMLVerse" target="_blank">
<img src="assets/sea.jpg" alt="الجزر">
</a>
<figcaption>الجزر</figcaption>
</figure>
</div>
</section>
</div>
<div class="page-nav">
<a class="prev" href="./basic9.html">→ السابق</a>
<a class="next" href="./basic11.html">التالي ←</a>
</div>
</main>
<!-- Pages -->
</body>
</html>