Skip to content

Commit bad3a83

Browse files
committed
نماذج وجداول اتش.تي.إم.إل
1 parent dd52cdd commit bad3a83

11 files changed

Lines changed: 1034 additions & 0 deletions

forms-tables/forms-tables1.html

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<html lang="ar" dir="rtl">
3+
<head>
4+
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta name="description" content="نماذج وجداول اتش.تي.إم.إل | العمل مع النماذج"/>
8+
<link rel="stylesheet" href="style.css">
9+
<link rel="icon" type="image/x-icon" href="../favicon.png">
10+
<title>HTMLverse | النماذج والجداول</title>
11+
<link rel="preconnect" href="https://fonts.googleapis.com">
12+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13+
<link href="https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100..900&display=swap" rel="stylesheet">
14+
15+
</head>
16+
17+
<body>
18+
19+
<header>
20+
<a class="red" href="./index.html#1">X</a>
21+
<h1>نماذج وجداول اتش.تي.إم.إل</h1>
22+
</header>
23+
24+
25+
<main>
26+
27+
<!-- Forms and Tables -->
28+
<section class="box">
29+
<div class="sub-title">
30+
<h2>١. العمل مع النماذج</h2>
31+
<span class="hint">نظري</span>
32+
<p>قريبًا</p>
33+
</div>
34+
35+
<section id="1">
36+
<h3>أ. كيف تعمل النماذج Forms والتسميات Labels وحقول الإدخال Inputs في لغة اتش.تي.إم.إل HTML ؟</h3>
37+
</section>
38+
39+
<section id="2">
40+
<h3>ب. ما هي أنواع الأزرار Buttons المختلفة، ومتى يُنصح باستخدامها؟</h3>
41+
</section>
42+
43+
<section id="3">
44+
<h3>ج. ما هو التحقق من صحة البيانات Form Validation من جانب العميل Client-Side في نماذج اتش.تي.إم.إل HTML Forms ، وما هي بعض الأمثلة؟</h3>
45+
</section>
46+
47+
<section id="4">
48+
<h3>د. ما هي حالات النماذج Form States المختلفة، ولماذا تعد مهمة؟</h3>
49+
</section>
50+
51+
52+
53+
54+
</section>
55+
56+
<!-- Pages -->
57+
<div class="page-nav">
58+
<a class="prev" href="./index.html">&#8594; السابق</a>
59+
<a class="next" href="./forms-tables2.html">التالي &#8592;</a>
60+
</div>
61+
62+
</main>
63+
64+
65+
66+
67+
</body>
68+
</html>

forms-tables/forms-tables2.html

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html lang="ar" dir="rtl">
3+
<head>
4+
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta name="description" content="نماذج وجداول اتش.تي.إم.إل | إنشاء نموذج تقييم الفندق"/>
8+
<link rel="stylesheet" href="style.css">
9+
<link rel="icon" type="image/x-icon" href="../favicon.png">
10+
<title>HTMLverse | النماذج والجداول</title>
11+
<link rel="preconnect" href="https://fonts.googleapis.com">
12+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13+
<link href="https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100..900&display=swap" rel="stylesheet">
14+
15+
</head>
16+
17+
<body>
18+
19+
<header>
20+
<a class="red" href="./index.html#2">X</a>
21+
<h1>نماذج وجداول اتش.تي.إم.إل</h1>
22+
</header>
23+
24+
25+
<main>
26+
27+
<!-- Forms and Tables -->
28+
<section class="box">
29+
<div class="sub-title">
30+
<h2>٢. إنشاء نموذج تقييم الفندق</h2>
31+
<span class="hint">ورشة عمل</span>
32+
<p>قريبًا</p>
33+
</div>
34+
35+
<section>
36+
</section>
37+
38+
39+
40+
41+
42+
43+
</section>
44+
45+
<!-- Pages -->
46+
<div class="page-nav">
47+
<a class="prev" href="./forms-tables1.html">&#8594; السابق</a>
48+
<a class="next" href="./forms-tables3.html">التالي &#8592;</a>
49+
</div>
50+
51+
</main>
52+
53+
54+
55+
56+
</body>
57+
</html>

forms-tables/forms-tables3.html

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html lang="ar" dir="rtl">
3+
<head>
4+
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta name="description" content="نماذج وجداول اتش.تي.إم.إل | العمل مع الجداول"/>
8+
<link rel="stylesheet" href="style.css">
9+
<link rel="icon" type="image/x-icon" href="../favicon.png">
10+
<title>HTMLverse | النماذج والجداول</title>
11+
<link rel="preconnect" href="https://fonts.googleapis.com">
12+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13+
<link href="https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100..900&display=swap" rel="stylesheet">
14+
15+
</head>
16+
17+
<body>
18+
19+
<header>
20+
<a class="red" href="./index.html#3">X</a>
21+
<h1>نماذج وجداول اتش.تي.إم.إل</h1>
22+
</header>
23+
24+
25+
<main>
26+
27+
<!-- Forms and Tables -->
28+
<section class="box">
29+
<div class="sub-title">
30+
<h2>٣. العمل مع الجداول</h2>
31+
<span class="hint">نظري</span>
32+
<p>قريبًا</p>
33+
</div>
34+
35+
<section id="1">
36+
<h3>أ. ما هي استخدامات جداول اتش.تي.إم.إل HTML Tables ، وما هي الاستخدامات التي ينصح بتجنبها؟</h3>
37+
</section>
38+
39+
40+
41+
42+
43+
44+
</section>
45+
46+
<!-- Pages -->
47+
<div class="page-nav">
48+
<a class="prev" href="./forms-tables2.html">&#8594; السابق</a>
49+
<a class="next" href="./forms-tables4.html">التالي &#8592;</a>
50+
</div>
51+
52+
</main>
53+
54+
55+
56+
57+
</body>
58+
</html>

forms-tables/forms-tables4.html

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html lang="ar" dir="rtl">
3+
<head>
4+
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta name="description" content="نماذج وجداول اتش.تي.إم.إل | أنشئ جدولًا للامتحانات النهائية"/>
8+
<link rel="stylesheet" href="style.css">
9+
<link rel="icon" type="image/x-icon" href="../favicon.png">
10+
<title>HTMLverse | النماذج والجداول</title>
11+
<link rel="preconnect" href="https://fonts.googleapis.com">
12+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13+
<link href="https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100..900&display=swap" rel="stylesheet">
14+
15+
</head>
16+
17+
<body>
18+
19+
<header>
20+
<a class="red" href="./index.html#4">X</a>
21+
<h1>نماذج وجداول اتش.تي.إم.إل</h1>
22+
</header>
23+
24+
25+
<main>
26+
27+
<!-- Forms and Tables -->
28+
<section class="box">
29+
<div class="sub-title">
30+
<h2>٤. أنشئ جدولًا للامتحانات النهائية</h2>
31+
<span class="hint">ورشة عمل</span>
32+
<p>قريبًا</p>
33+
</div>
34+
35+
<section>
36+
</section>
37+
38+
39+
40+
41+
42+
43+
</section>
44+
45+
<!-- Pages -->
46+
<div class="page-nav">
47+
<a class="prev" href="./forms-tables3.html">&#8594; السابق</a>
48+
<a class="next" href="./forms-tables5.html">التالي &#8592;</a>
49+
</div>
50+
51+
</main>
52+
53+
54+
55+
56+
</body>
57+
</html>

forms-tables/forms-tables5.html

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html lang="ar" dir="rtl">
3+
<head>
4+
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta name="description" content="نماذج وجداول اتش.تي.إم.إل | إنشاء جدول فهرس الكتب"/>
8+
<link rel="stylesheet" href="style.css">
9+
<link rel="icon" type="image/x-icon" href="../favicon.png">
10+
<title>HTMLverse | النماذج والجداول</title>
11+
<link rel="preconnect" href="https://fonts.googleapis.com">
12+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13+
<link href="https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100..900&display=swap" rel="stylesheet">
14+
15+
</head>
16+
17+
<body>
18+
19+
<header>
20+
<a class="red" href="./index.html#5">X</a>
21+
<h1>نماذج وجداول اتش.تي.إم.إل</h1>
22+
</header>
23+
24+
25+
<main>
26+
27+
<!-- Forms and Tables -->
28+
<section class="box">
29+
<div class="sub-title">
30+
<h2>٥. إنشاء جدول فهرس الكتب</h2>
31+
<span class="hint">مختبر</span>
32+
<p>قريبًا</p>
33+
</div>
34+
35+
<section>
36+
</section>
37+
38+
39+
40+
41+
42+
43+
</section>
44+
45+
<!-- Pages -->
46+
<div class="page-nav">
47+
<a class="prev" href="./forms-tables4.html">&#8594; السابق</a>
48+
<a class="next" href="./forms-tables6.html">التالي &#8592;</a>
49+
</div>
50+
51+
</main>
52+
53+
54+
55+
56+
</body>
57+
</html>

forms-tables/forms-tables6.html

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html lang="ar" dir="rtl">
3+
<head>
4+
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta name="description" content="نماذج وجداول اتش.تي.إم.إل | العمل مع أدوات اتش.تي.إم.إل"/>
8+
<link rel="stylesheet" href="style.css">
9+
<link rel="icon" type="image/x-icon" href="../favicon.png">
10+
<title>HTMLverse | النماذج والجداول</title>
11+
<link rel="preconnect" href="https://fonts.googleapis.com">
12+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13+
<link href="https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100..900&display=swap" rel="stylesheet">
14+
15+
</head>
16+
17+
<body>
18+
19+
<header>
20+
<a class="red" href="./index.html#6">X</a>
21+
<h1>نماذج وجداول اتش.تي.إم.إل</h1>
22+
</header>
23+
24+
25+
<main>
26+
27+
<!-- Forms and Tables -->
28+
<section class="box">
29+
<div class="sub-title">
30+
<h2>٦. العمل مع أدوات اتش.تي.إم.إل</h2>
31+
<span class="hint">نظري</span>
32+
<p>قريبًا</p>
33+
</div>
34+
35+
<section id="1">
36+
<h3>أ. ما هو مدقق اتش.تي.إم.إل HTML Validator ، وكيف يساعدك في تصحيح أخطاء الكود Debug Code ؟</h3>
37+
</section>
38+
39+
<section id="2">
40+
<h3>ب. كيفية استخدام أداة الفحص DOM Inspector وأدوات المطورين DevTools لتصحيح الأخطاء Debug وبناء مشاريعك</h3>
41+
</section>
42+
43+
44+
45+
46+
47+
48+
</section>
49+
50+
<!-- Pages -->
51+
<div class="page-nav">
52+
<a class="prev" href="./forms-tables5.html">&#8594; السابق</a>
53+
<a class="next" href="./forms-tables7.html">التالي &#8592;</a>
54+
</div>
55+
56+
</main>
57+
58+
59+
60+
61+
</body>
62+
</html>

0 commit comments

Comments
 (0)