Skip to content

Commit 9f3ab15

Browse files
authored
Merge pull request #31 from d3j1x/main
تحديث الصفحة الرئيسية
2 parents 27e4b16 + 3af6955 commit 9f3ab15

2 files changed

Lines changed: 184 additions & 137 deletions

File tree

index.html

Lines changed: 175 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -1,150 +1,190 @@
11
<!DOCTYPE html>
22
<html lang="ar" dir="rtl">
3-
<head>
4-
5-
<!-- Primary Meta Tags -->
6-
<link rel="stylesheet" href="style.css">
7-
<title>HTMLverse | عالم اتش.تي.إم.إل</title>
8-
<meta name="description" content="مشروع HTMLverse لتعليم لغة HTML بالعربية بطريقة بسيطة ومجانية. تعلم أساسيات تطوير الويب خطوة بخطوة.">
9-
<meta name="version" content="0.0.1">
10-
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-
<!-- Canonical URL -->
16-
<link rel="canonical" href="https://arabiverse.github.io/HTMLverse/">
17-
18-
<!-- Language & Charset -->
19-
<meta charset="UTF-8">
20-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
21-
<meta name="robots" content="index, follow">
22-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
23-
<meta name="language" content="ar">
24-
<meta name="author" content="Arabiverse Team">
25-
26-
<!-- Open Graph / Facebook -->
27-
<meta property="og:type" content="website">
28-
<meta property="og:url" content="https://arabiverse.github.io/HTMLverse/">
29-
<meta property="og:title" content="HTMLverse — تعلم HTML بالعربية">
30-
<meta property="og:description" content="مشروع HTMLverse لتعليم لغة HTML بالعربية بطريقة بسيطة ومجانية.">
31-
<meta property="og:image" content="https://arabiverse.github.io/HTMLverse/assets/HTMLverseCover.png">
32-
33-
<!-- Twitter -->
34-
<meta name="twitter:card" content="summary_large_image">
35-
<meta name="twitter:url" content="https://arabiverse.github.io/HTMLverse/">
36-
<meta name="twitter:title" content="HTMLverse — تعلم HTML بالعربية">
37-
<meta name="twitter:description" content="تعلم لغة HTML بالعربية بطريقة ممتعة ومجانية.">
38-
<meta name="twitter:image" content="https://arabiverse.github.io/HTMLverse/assets/HTMLverseCover.png">
39-
40-
<!-- Favicon -->
41-
<link rel="icon" type="image/png" href="favicon.png">
42-
43-
<!-- Keywords (optional, not heavily used by Google but useful for other engines) -->
44-
<meta name="keywords" content="HTML, تعلم HTML, arabic html course, arabiverse, htmlverse, web development, لغة اتش تي ام ال, تعليم البرمجة">
45-
46-
<!-- Structured Data (JSON-LD Schema.org for Google) -->
47-
<script type="application/ld+json">
48-
{
49-
"@context": "https://schema.org",
50-
"@type": "WebSite",
51-
"name": "HTMLverse",
52-
"url": "https://arabiverse.github.io/HTMLverse/",
53-
"description": "مشروع HTMLverse لتعليم لغة HTML بالعربية بطريقة بسيطة ومجانية.",
54-
"publisher": {
55-
"@type": "Organization",
56-
"name": "Arabiverse",
57-
"url": "https://github.com/arabiverse"
3+
<head>
4+
5+
<!-- Primary Meta Tags -->
6+
<link rel="stylesheet" href="style.css">
7+
<title>HTMLverse | عالم اتش.تي.إم.إل</title>
8+
<meta name="description" content="مشروع HTMLverse لتعليم لغة HTML بالعربية بطريقة بسيطة ومجانية. تعلم أساسيات تطوير الويب خطوة بخطوة.">
9+
<meta name="version" content="0.0.1">
10+
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+
<!-- Canonical URL -->
16+
<link rel="canonical" href="https://arabiverse.github.io/HTMLverse/">
17+
18+
<!-- Language & Charset -->
19+
<meta charset="UTF-8">
20+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
21+
<meta name="robots" content="index, follow">
22+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
23+
<meta name="language" content="ar">
24+
<meta name="author" content="Arabiverse Team">
25+
26+
<!-- Open Graph / Facebook -->
27+
<meta property="og:type" content="website">
28+
<meta property="og:url" content="https://arabiverse.github.io/HTMLverse/">
29+
<meta property="og:title" content="HTMLverse — تعلم HTML بالعربية">
30+
<meta property="og:description" content="مشروع HTMLverse لتعليم لغة HTML بالعربية بطريقة بسيطة ومجانية.">
31+
<meta property="og:image" content="https://arabiverse.github.io/HTMLverse/assets/HTMLverseCover.png">
32+
33+
<!-- Twitter -->
34+
<meta name="twitter:card" content="summary_large_image">
35+
<meta name="twitter:url" content="https://arabiverse.github.io/HTMLverse/">
36+
<meta name="twitter:title" content="HTMLverse — تعلم HTML بالعربية">
37+
<meta name="twitter:description" content="تعلم لغة HTML بالعربية بطريقة ممتعة ومجانية.">
38+
<meta name="twitter:image" content="https://arabiverse.github.io/HTMLverse/assets/HTMLverseCover.png">
39+
40+
<!-- Favicon -->
41+
<link rel="icon" type="image/png" href="favicon.png">
42+
43+
<!-- Keywords (optional, not heavily used by Google but useful for other engines) -->
44+
<meta name="keywords" content="HTML, تعلم HTML, arabic html course, arabiverse, htmlverse, web development, لغة اتش تي ام ال, تعليم البرمجة">
45+
46+
<!-- Structured Data (JSON-LD Schema.org for Google) -->
47+
<script type="application/ld+json">
48+
{
49+
"@context": "https://schema.org",
50+
"@type": "WebSite",
51+
"name": "HTMLverse",
52+
"url": "https://arabiverse.github.io/HTMLverse/",
53+
"description": "مشروع HTMLverse لتعليم لغة HTML بالعربية بطريقة بسيطة ومجانية.",
54+
"publisher": {
55+
"@type": "Organization",
56+
"name": "Arabiverse",
57+
"url": "https://github.com/arabiverse"
58+
}
5859
}
59-
}
60-
</script>
60+
</script>
6161

62-
</head>
62+
</head>
6363

64-
<body>
65-
66-
<!--Start Header-->
67-
<header>
68-
<div class="open-source">
69-
<h5>"عالم اتش.تي.إم.إل" منصة تعليمية عربية حرة و <a href="https://github.com/arabiverse/HTMLverse" target="__blank"><strong>مفتوحة المصدر</strong></a>.</h5>
70-
</div>
71-
<div dir="ltr" class="opens">
72-
<img id="logo" src="assets/HTMLverseLogo.png" alt="HTMLverse logo">
73-
</div>
74-
75-
</header>
76-
<!--Ends Header-->
77-
78-
79-
80-
81-
<!--Start Navbar-->
82-
<nav>
83-
<ul class="nav-links">
84-
<li>
85-
<a href="basic/index.html" target="_blank">الأساسيات</a>
86-
</li>
87-
</ul>
88-
</nav>
89-
<!--End Navbar-->
90-
91-
<main>
92-
93-
<section>
94-
<div class="blur-box">
95-
<h1>🌐 لغة اتش.تي.إم.إل</h1>
96-
<p>
97-
لغة <strong>اتش.تي.إم.إل</strong> هي اختصار لـ
98-
<em>HyperText Markup Language</em>،
99-
وتعني "لغة ترميز النص الفائق".
100-
تُعد هذه اللغة الأساس الذي تُبنى عليه جميع صفحات الويب،
101-
حيث تُستخدم لوصف هيكل الصفحة وتنظيم محتواها مثل العناوين، الفقرات، الصور، والروابط.
102-
</p>
103-
104-
<p>
105-
تم ابتكار لغة اتش.تي.إم.إل عام 1991 على يد
106-
<a href="https://www.w3.org/People/Berners-Lee/" target="_blank" rel="noopener">
107-
تيم بيرنرز-لي
108-
</a>،
109-
أثناء عمله في المنظمة الأوروبية للأبحاث النووية (CERN).
110-
وكان الهدف منها هو تسهيل مشاركة المعلومات بين العلماء عبر الشبكة.
111-
</p>
112-
113-
<p>
114-
تطورت اتش.تي.إم.إل عبر السنوات لتصبح أكثر قوة ومرونة،
115-
حيث أُضيفت إليها وسوم جديدة لدعم الوسائط المتعددة،
116-
التفاعل، وتحسين تجربة المستخدم.
117-
</p>
118-
119-
<p>
120-
اليوم تُشرف <a href="https://www.w3.org/" target="_blank" rel="noopener">منظمة W3C</a>
121-
على تطوير معايير اللغة لضمان توافقها عبر جميع المتصفحات والمنصات.
122-
</p>
123-
124-
<p>
125-
🔍 اكتشف في هذا المشروع رحلة <strong>اتش.تي.إم.إل</strong> من فكرة بسيطة إلى العمود الفقري لعالم الويب.
126-
</p>
127-
</div>
128-
</section>
129-
130-
</main>
131-
132-
133-
64+
<body>
13465

66+
<!--Start Header-->
67+
<header>
68+
<div class="open-source">
69+
<h5>"عالم اتش.تي.إم.إل" منصة تعليمية عربية حرة و <a href="https://github.com/arabiverse/HTMLverse" target="__blank"><strong>مفتوحة المصدر</strong></a>.</h5>
70+
</div>
71+
<div dir="ltr" class="opens">
72+
<img id="logo" src="assets/HTMLverseLogo.png" alt="HTMLverse logo">
73+
</div>
74+
75+
</header>
76+
<!--Ends Header-->
13577

13678

13779

80+
81+
<!--Start Navbar-->
82+
<nav>
83+
<ul class="nav-links">
84+
<li>
85+
<a href="basic/index.html" target="_blank">الأساسيات</a>
86+
</li>
87+
</ul>
88+
</nav>
89+
<!--End Navbar-->
90+
91+
<main>
92+
93+
<section>
94+
<div class="blur-box">
95+
<h1>🌐 لغة اتش.تي.إم.إل</h1>
96+
<p>
97+
لغة <strong>اتش.تي.إم.إل</strong> هي اختصار لـ
98+
<em>HyperText Markup Language</em>،
99+
وتعني "لغة ترميز النص الفائق".
100+
تُعد هذه اللغة الأساس الذي تُبنى عليه جميع صفحات الويب،
101+
حيث تُستخدم لوصف هيكل الصفحة وتنظيم محتواها مثل العناوين، الفقرات، الصور، والروابط.
102+
</p>
103+
104+
<p>
105+
تم ابتكار لغة اتش.تي.إم.إل عام 1991 على يد
106+
<a href="https://www.w3.org/People/Berners-Lee/" target="_blank" rel="noopener">
107+
تيم بيرنرز-لي
108+
</a>،
109+
أثناء عمله في المنظمة الأوروبية للأبحاث النووية (CERN).
110+
وكان الهدف منها هو تسهيل مشاركة المعلومات بين العلماء عبر الشبكة.
111+
</p>
112+
113+
<p>
114+
تطورت اتش.تي.إم.إل عبر السنوات لتصبح أكثر قوة ومرونة،
115+
حيث أُضيفت إليها وسوم جديدة لدعم الوسائط المتعددة،
116+
التفاعل، وتحسين تجربة المستخدم.
117+
</p>
118+
119+
<p>
120+
اليوم تُشرف <a href="https://www.w3.org/" target="_blank" rel="noopener">منظمة W3C</a>
121+
على تطوير معايير اللغة لضمان توافقها عبر جميع المتصفحات والمنصات.
122+
</p>
123+
124+
<p>
125+
🔍 اكتشف في هذا المشروع رحلة <strong>اتش.تي.إم.إل</strong> من فكرة بسيطة إلى العمود الفقري لعالم الويب.
126+
</p>
127+
</div>
128+
</section>
129+
130+
<br>
131+
132+
<section>
133+
<div class="blur-box">
134+
<h1>🎯 الهدف</h1>
135+
<p>يهدف مشروع <strong>عالم اتش.تي.إم.إل</strong> <strong>HTMLverse</strong> إلى إنشاء مصدر عربي مفتوح لتعلّم لغة ترميز النص الفائق من الأساسيات إلى الاحتراف، مع التركيز على التطبيق العملي والتصميم الدلالي للصفحات.</p>
136+
</div>
137+
</section>
138+
139+
<br>
140+
141+
<section>
142+
<div class="blur-box">
143+
<h1>📘 المحتوى</h1>
144+
<div class="mr">
145+
<ul>
146+
<li>أمثلة تطبيقية جاهزة</li>
147+
<li>نصائح لتحسين الظهور في محركات البحث</li>
148+
<li>إرشادات تصميم صفحات تراعي سهولة الوصول</li>
149+
<li>موارد وأدلة للمطورين المبتدئين</li>
150+
</ul>
151+
</div>
152+
</div>
153+
</section>
154+
155+
<br>
156+
157+
<section>
158+
<div class="blur-box">
159+
<h1>💡 المصدر المفتوح</h1>
160+
<p>هذا المشروع مفتوح للجميع للمشاركة، والتطوير، والمساهمة في نشر المعرفة التقنية باللغة العربية.</p>
161+
</div>
162+
</section>
163+
164+
<br>
165+
166+
<section>
167+
<div class="blur-box">
168+
<h1>🧩 الترخيص </h1>
169+
<p>مرخّص وفق <strong>رخصة المصادر المفتوحة</strong> <strong>MIT</strong> التي تتيح الاستخدام والتعديل والمشاركة بحرّية.</p>
170+
</div>
171+
</section>
172+
173+
174+
</main>
175+
176+
177+
138178

139179

140180

141181

142-
<!--Start Footer-->
143-
<footer>
144-
<p>جميع الحقوق محفوظة. © 2025 HTMLverse</p>
145-
<p class="support"><strong>مدعومة من منظمة <a href="https://github.com/arabiverse" target=__blank>العالم العربي</a>.</strong></p>
146-
</footer>
147-
<!--Ends Footer-->
182+
<!--Start Footer-->
183+
<footer>
184+
<p>جميع الحقوق محفوظة. © 2025 HTMLverse</p>
185+
<p class="support"><strong>مدعومة من منظمة <a href="https://github.com/arabiverse" target=__blank>العالم العربي</a>.</strong></p>
186+
</footer>
187+
<!--Ends Footer-->
148188

149189

150190

@@ -154,5 +194,5 @@ <h1>🌐 لغة اتش.تي.إم.إل</h1>
154194

155195

156196

157-
</body>
197+
</body>
158198
</html>

style.css

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ nav {
6363

6464
.nav-links a {
6565
text-decoration: none;
66-
color:black;
66+
color:#071023;
6767
font-weight: bold;
6868
transition: color 0.3s;
6969
font-size: 1.3rem;
@@ -81,12 +81,14 @@ main {
8181
margin: 10px auto; /* centers horizontally */
8282
}
8383

84+
85+
8486
main a {
8587
color: #7c3aed;
8688
}
8789

8890
.blur-box {
89-
border:#7c3aed 2px solid;
91+
border:#7c3aed 1px solid;
9092
background: #0b1220; /* semi-transparent background */
9193
box-shadow: 0 1px 2px white;
9294
border-radius: 12px;
@@ -113,4 +115,9 @@ footer .support a{
113115
padding: 0px;
114116

115117

118+
}
119+
120+
121+
.mr {
122+
margin-right: 30px;
116123
}

0 commit comments

Comments
 (0)