كود انشاء صفحة هبوط بسيطة

الكود الذي قدمته هو مثال بسيط يمكن استخدامه لإنشاء صفحة هبوط (Landing Page)، وهي صفحة تستخدم لاستقبال الزوار وتحفيزهم لاتخاذ إجراء معين، مثل التسجيل في الخدمة أو تنزيل ملف.

كود انشاء صفحة هبوط بسيطة

السلام عليكم ورحمة الله وبركاته

صفحات الهبوط هي صفحات ويب مخصصة لاستقبال الزوار الذين ينقرون على روابط معينة أو يصلون عبر إعلانات. تهدف إلى تحويل الزوار إلى عمليات محددة، مثل تسجيل الدخول، الاشتراك، أو شراء منتج. تصمم بشكل فعّال لزيادة معدل التحويل وتحسين تجربة المستخدم.

دليل مبسّط لتعلم HTML و CSS

إذا كنت تبحث عن طريقة لتعلم تصميم صفحات الويب بشكل بسيط وفعّال، فقد جئت إلى المكان الصحيح! في هذا المقال، سنقدم لك كودًا بسيطًا يستخدم HTML و CSS لإنشاء صفحة ويب جميلة ومفيدة.

تعلم HTML و CSS

HTML و CSS هما لغتان أساسيتان في تطوير الويب. HTML يُستخدم لبناء هيكل الصفحة، بينما يُستخدم CSS لتنسيق وتزيين تلك الهياكل. الكود الذي سنشاركه معك يعتبر مثالًا جيدًا للمبتدئين لفهم كيفية استخدام هاتين اللغتين.

قطعة الكود

لنلقي نظرة على الشيفرة CSS أولاً:

<style>
/*بواسطة الحزازي*/
/*...كود CSS لتنسيق صفحة هبوط بسيط ...*/
.onPg .blogCont {
	max-width:1000px
}
.pBd h1,.pBd h2,.pBd h3,.pBd h4,.pBd h5,.pBd h6 {
	margin:0 0 0
}
h1 {
	font-size:60px;
	text-align:center
}
.ProductLine {
	position:relative;
	margin:50px auto;
	padding:40px 0;
	width:100%;
	box-sizing:border-box
}
.ProductLine:before {
	content:'';
	position:absolute;
	right:50%;
	width:2px;
	height:100%;
	background:var(--linkC)
}
.ProductLine ul {
	padding:0;
	margin:0
}
.ProductLine ul li {
	list-style:none;
	position:relative;
	width:50%;
	padding:20px 40px;
	box-sizing:border-box
}
.ProductLine ul li:nth-child(odd) {
	float:right;
	text-align:left;
	clear:both
}
.ProductLine ul li:nth-child(even) {
	float:left;
	text-align:right;
	clear:both
}
.Product-Ctnt {
	padding-bottom:20px
}
.P-Lnk {
	text-decoration:none;
	color:#08102b;
	transition:all .2s
}
.P-Lnk:hover {
	opacity:.8;
	transition:all .2s
}
.ProductLine ul li:nth-child(odd):before {
	content:'';
	position:absolute;
	width:10px;
	height:10px;
	top:24px;
	left:-6px;
	background:var(--linkC);
	border-radius:50%;
	box-shadow:0 0 0 3px #fad2b8
}
.ProductLine ul li:nth-child(even):before {
	content:'';
	position:absolute;
	width:10px;
	height:10px;
	top:24px;
	right:-4px;
	background:var(--linkC);
	border-radius:50%;
	box-shadow:0 0 0 3px #fad2b8
}
.ProductLine ul li h3 {
	padding:0;
	margin:0;
	color:#fad2b8;
	font-weight:600
}
.ProductLine ul li p {
	margin:20px 0 0;
	padding:0;
	font-size:15px;
	line-height:1.7em
}
.ProductLine ul li .Prct-ctgy h4 {
	margin:0;
	padding:0;
	font-size:14px;
	color:#fff
}
.ProductLine ul li:nth-child(odd) .Prct-ctgy {
	position:absolute;
	top:12px;
	left:-165px;
	margin:0;
	padding:8px 16px;
	background:var(--linkC);
	color:#fff;
	border-radius:18px;
	box-shadow:0 0 0 3px #fad2b8
}
.ProductLine ul li:nth-child(even) .Prct-ctgy {
	position:absolute;
	top:12px;
	right:-165px;
	margin:0;
	padding:8px 16px;
	background:var(--linkC);
	color:#fff;
	border-radius:18px;
	box-shadow:0 0 0 3px #fad2b8
}
@media(max-width:1000px) {
	.ProductLine {
	width:100%
}
}@media(max-width:767px) {
	.ProductLine {
	width:100%;
	padding-bottom:0
}
h1 {
	font-size:40px;
	text-align:center
}
.ProductLine:before {
	right:20px;
	height:100%
}
.ProductLine ul li:nth-child(even),.ProductLine ul li:nth-child(odd) {
	width:100%;
	text-align:right;
	padding-right:50px;
	padding-bottom:50px
}
.ProductLine ul li:nth-child(even):before,.ProductLine ul li:nth-child(odd):before {
	top:-18px;
	right:16px
}
.ProductLine ul li:nth-child(even) .Prct-ctgy,.ProductLine ul li:nth-child(odd) .Prct-ctgy {
	top:-30px;
	right:50px;
	left:inherit
}
}</style>

الآن لنقم بشرح بعض الأمور المهمة:

1. `.onPg .blogCont { max-width: 1000px }`: تحديد أقصى عرض لعنصر يحمل الفئتين `onPg` و `blogCont`، مثلًا تحديد أقصى عرض للمدونة.
2. `h1 { font-size: 60px; text-align: center }`: تنسيق عنوان الصفحة الرئيسي بحيث يكون حجم الخط 60 بكسل ومركز النص.
3. `.ProductLine`: تحديد أنماط لعنصر يحمل الفئة `ProductLine`، وتحديد بعض الخصائص مثل الهامش والسطر الأفقي.
4. `.ProductLine ul li`: تحديد أسلوب للعناصر `li` داخل القائمة التي تحمل الفئة `ProductLine`.
5. `.P-Lnk`: تنسيق الروابط الموجودة في العناصر `li` بحيث تكون بدون تزيين وتغيير لونها عند التحويش.
6. `@media`: تعريف أنماط خاصة بأحجام الشاشة المحددة، مما يسمح بتغيير التصميم بناءً على حجم الشاشة.

الآن، بالنسبة للعلاقة بين CSS و HTML، يتم ربط الكود CSS بصفحة HTML عن طريق وضعه داخل عنصر `<style>` في اول الصفحة HTML. يمكنك أيضًا رؤية أن هناك عناصر HTML تحمل الفئات المستخدمة في CSS، مثل `ProductLine` و `P-Lnk`، مما يجعل الأنماط CSS تؤثر على تلك العناصر بشكل محدد.

بالطبع، دعونا نلقي نظرة على الشيفرة HTML:

<!--[بواسطة الحزازي]-->
                <!--[كود html لانشاء صفحة هبوط بسيطة]-->
		<div class="ProductLine">
			<ul>
				<li>
					<div class="Product-Ctnt">
						<h3><a class="P-Lnk" href="#">تنزيل الملف</a></h3>
						<p>يمكنك تخصيص هذا الزر لتنزيل اي شئ تريد تقديمه بشكل جميل هذا عبارة عن مثال فقط لتوضيح شكل و عمل القطعة، ايضا ان كنت تحتاج لتوضيح اكثر عن هذا الملف يمكنك اضافة رابط مضمن للانتقال للصفحة المعنية كمصدر او وصف مثلا ...<br><a class="extL" href="#">انقر هنا للمزيد</a></p>
					</div>
					<div class="Prct-ctgy">
						<h4>تنزيل ملفات متعددة</h4>
					</div></li>
				<li>
					<div class="Product-Ctnt">
						<h3><a class="P-Lnk" href="#">تنزيل</a></h3>
						<p>هذا النص هو عبارة عن نص وهمي دوره الوحيد هو تقريب لك الشكل المعروض في هذه القطعة<a class="extL" href="#">انقر للمزيد</a></p>
					</div>
					<div class="Prct-ctgy">
						<h4>تنزيلات</h4>
					</div></li>
				<li>
					<div class="Product-Ctnt">
						<h3><a class="P-Lnk" href="#">تعديل كود اون لاين</a></h3>
						<p>HTML,CSS,JS محرر النصوص الترميزية...<a class="extL" href="#">انقر للمزيد</a></p>
					</div>
					<div class="Prct-ctgy">
						<h4>محرر الترميز</h4>
					</div></li>
				<li>
					<div class="Product-Ctnt">
						<h3><a class="P-Lnk" href="#">مولد Qr الخاص بالواتساب</a></h3>
						<p>مثال لشكل القطعة يمكنك تخصيص الشكل على حسب رغبتك و حاجتك<a class="extL" href="#">انقر للمزيد</a></p>
					</div>
					<div class="Prct-ctgy">
						<h4>مولد</h4>
					</div></li>
				<li>
					<div class="Product-Ctnt">
						<h3><a class="P-Lnk" href="#">مولد رابط الامن</a></h3>
						<p>مثلا هذا زر يوصلك لميزة انت تقدمها على مدونتك كتوليد صفحات و اشياء اخرى<a class="extL" href="#/">انقر للمزيد</a></p>
					</div>
					<div class="Prct-ctgy">
						<h4>توليد</h4>
					</div></li>
				<div style="clear:both"></div>
			</ul>
		</div><i class="separate"></i>

هذا الكود يمثل قائمة من العناصر تحتوي على روابط ووصف لكل عنصر. الآن، بالنسبة للمسارات المرتبطة بـ CSS:

1. تظهر الفئة `ProductLine` في العنصر `div` الرئيسي، وهي نفس الفئة المستخدمة في CSS لتحديد الأنماط لهذا العنصر.
2. الفئة `P-Lnk` تستخدم للروابط (`<a>`) داخل العناصر `li`، وهي أيضًا مستخدمة في CSS لتحديد أنماط الروابط.
3. هناك استخدام للعديد من الفئات الأخرى مثل `Product-Ctnt` و `Prct-ctgy`، والتي تستخدم أيضًا في CSS لتحديد أنماط محددة.
4. يتم استخدام `<h3>` و `<p>` لتحديد عناصر العنوان والفقرة، ويتم تخصيص أنماطها في CSS.
5. لإضافة روابط خاصة بك بعد تعديل المحتو. بما يناسبك غير علامة # في عنصر الاستدعاء href="#">انقر للمزيد</a> برابط الاحالة الخاص بك.

لربط هذا الكود مع كود CSS، يجب وضع الكود في عنصر `<style>` داخل صفحة HTML الخاصة بك.

معاينة في صِوانᴜɴPʟᴜɢ

كما ترى، يتيح لك هذا الكود إنشاء قائمة جميلة تحتوي على روابط تحيل إلى محتوى مختلف.

كيف تستفيد من هذا الكود؟

1. تعلم HTML:
   تابع فقرة شرح كود وحاول فهم هيكل الصفحة. HTML هو لغة واجهة المستخدم، ويمثل نصف هيكل يمكنك كتابته في صفحة ثابتة على بلوجر بشكل افتراضي سيظهر الكود بتنسيق واضح مع قالب مدونتك.
2. تعلم CSS:
   شاهد كود CSS المرتبط مع كود html. هنا يتم تحديد الأنماط والتصميم، انتبه على فقرة شرح كود css اعلاه.
3. قم بتخصيصه:
   - حاول تعديل المحتوى والأنماط لتناسب احتياجاتك. ربما ستحتاج الى تجبيق QuickEditor+ افضل محرر النصوص على اجهزة اندرويد، هذا يمكن أن يكون تمرينًا رائعًا لتحسين مهاراتك.
   - الكلمات التي في كود هي توضيحات لك لتفهم الكود بشكل اكبر يمكنك تغير المحتوى بما يتناسب مع حاجتك.
4. على بلوجر اسفله ساترك لك كل الخطوات التي تحتاجها لنشر الصفحة على مشاركة جديدة او صفحة ثابتة.
   
   1. سجل الدخول الى لوحة التحكم بلوجر.
   2. اختر المشاركات او الصفحات.
   3. انشئ مشاركة جديدة او صفحة جديدة.
   4. غير التنسيق من الانشاء الى كود ستجد رمز الانشاء غيره الى رمز التكويد.
   5. الصق كود الذي تعلمناه ثم انشره للجمهور.
5. انشرها!:
   إذا كنت راضيًا عن الصفحة التي أنشأتها، فشاركها مع الأصدقاء أو المجتمع ليستفيدوا منها أيضًا.

يمكنك انشاء صفحة هبوط مستقلة بانشاء ملف واحد و رفعه مثلا على مستودع جيتهب او جيتلاب او اي منصة تدعم ميزة الصفحات.

انتباه ضروري ان تكون لك قاعدة هيكلية كاملة حتى يتسنى لك معاينة الصفحة بتنسيق اكبر الكود المستعمل ينسق فقط الازرار و الوان الازرار و لكن قاعدة body غير مدرجة في هيكل الصفحة بشكل كامل

اذا كنت تريد نشره على صفحة مستقله على اي سحابة تمتلكها مثل وورد بريس او جيتهب في حالة ما اردت ان تقوم بهذه العملية تأكد من اضافة كل العناصر الهيكيلية على الصفحة، مع التأكد ان مسار الملف يكون index.html و الكود مكتوب كما المثال اسفله.

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>عنوان الصفحة</title>
    <style>
/*بواسطة الحزازي*/
/*...كود CSS لتنسيق صفحة هبوط بسيط ...*/
.onPg .blogCont {
	max-width:1000px
}
.pBd h1,.pBd h2,.pBd h3,.pBd h4,.pBd h5,.pBd h6 {
	margin:0 0 0
}
h1 {
	font-size:60px;
	text-align:center
}
.ProductLine {
	position:relative;
	margin:50px auto;
	padding:40px 0;
	width:100%;
	box-sizing:border-box
}
.ProductLine:before {
	content:'';
	position:absolute;
	right:50%;
	width:2px;
	height:100%;
	background:var(--linkC)
}
.ProductLine ul {
	padding:0;
	margin:0
}
.ProductLine ul li {
	list-style:none;
	position:relative;
	width:50%;
	padding:20px 40px;
	box-sizing:border-box
}
.ProductLine ul li:nth-child(odd) {
	float:right;
	text-align:left;
	clear:both
}
.ProductLine ul li:nth-child(even) {
	float:left;
	text-align:right;
	clear:both
}
.Product-Ctnt {
	padding-bottom:20px
}
.P-Lnk {
	text-decoration:none;
	color:#08102b;
	transition:all .2s
}
.P-Lnk:hover {
	opacity:.8;
	transition:all .2s
}
.ProductLine ul li:nth-child(odd):before {
	content:'';
	position:absolute;
	width:10px;
	height:10px;
	top:24px;
	left:-6px;
	background:var(--linkC);
	border-radius:50%;
	box-shadow:0 0 0 3px #fad2b8
}
.ProductLine ul li:nth-child(even):before {
	content:'';
	position:absolute;
	width:10px;
	height:10px;
	top:24px;
	right:-4px;
	background:var(--linkC);
	border-radius:50%;
	box-shadow:0 0 0 3px #fad2b8
}
.ProductLine ul li h3 {
	padding:0;
	margin:0;
	color:#fad2b8;
	font-weight:600
}
.ProductLine ul li p {
	margin:20px 0 0;
	padding:0;
	font-size:15px;
	line-height:1.7em
}
.ProductLine ul li .Prct-ctgy h4 {
	margin:0;
	padding:0;
	font-size:14px;
	color:#fff
}
.ProductLine ul li:nth-child(odd) .Prct-ctgy {
	position:absolute;
	top:12px;
	left:-165px;
	margin:0;
	padding:8px 16px;
	background:var(--linkC);
	color:#fff;
	border-radius:18px;
	box-shadow:0 0 0 3px #fad2b8
}
.ProductLine ul li:nth-child(even) .Prct-ctgy {
	position:absolute;
	top:12px;
	right:-165px;
	margin:0;
	padding:8px 16px;
	background:var(--linkC);
	color:#fff;
	border-radius:18px;
	box-shadow:0 0 0 3px #fad2b8
}
@media(max-width:1000px) {
	.ProductLine {
	width:100%
}
}@media(max-width:767px) {
	.ProductLine {
	width:100%;
	padding-bottom:0
}
h1 {
	font-size:40px;
	text-align:center
}
.ProductLine:before {
	right:20px;
	height:100%
}
.ProductLine ul li:nth-child(even),.ProductLine ul li:nth-child(odd) {
	width:100%;
	text-align:right;
	padding-right:50px;
	padding-bottom:50px
}
.ProductLine ul li:nth-child(even):before,.ProductLine ul li:nth-child(odd):before {
	top:-18px;
	right:16px
}
.ProductLine ul li:nth-child(even) .Prct-ctgy,.ProductLine ul li:nth-child(odd) .Prct-ctgy {
	top:-30px;
	right:50px;
	left:inherit
}
}</style>
       </head>
       </body>
       <!---[بواسطة الحزازي]--->
       <!---[كود html لانشاء صفحة هبوط بسيطة]--->
       <div class="ProductLine">
	<ul>
		<li>
			<div class="Product-Ctnt">
				<h3>
					<a
						class="P-Lnk"
						href="#">تنزيل الملف</a>
				</h3>
				<p>يمكنك تخصيص هذا الزر لتنزيل اي شئ تريد تقديمه بشكل جميل هذا عبارة عن مثال فقط لتوضيح شكل و عمل القطعة، ايضا ان كنت تحتاج لتوضيح اكثر عن هذا الملف يمكنك اضافة رابط مضمن للانتقال للصفحة المعنية كمصدر او وصف مثلا ...<br>
						<a
							class="extL"
							href="#"> انقر هنا للمزيد</a>
					</p>
				</div>
				<div class="Prct-ctgy">
					<h4>تنزيل ملفات متعددة</h4>
				</div>
			</li>
			<li>
				<div class="Product-Ctnt">
					<h3>
						<a
							class="P-Lnk"
							href="#">تنزيل</a>
					</h3>
					<p>هذا النص هو عبارة عن نص وهمي دوره الوحيد هو تقريب لك الشكل المعروض في هذه القطعة <a
							class="extL"
							href="#">انقر للمزيد</a>
					</p>
				</div>
				<div class="Prct-ctgy">
					<h4>تنزيلات</h4>
				</div>
			</li>
			<li>
				<div class="Product-Ctnt">
					<h3>
						<a
							class="P-Lnk"
							href="#">تعديل كود اون لاين</a>
					</h3>
					<p>HTML,CSS,JS محرر النصوص الترميزية... <a
							class="extL"
							href="#">انقر للمزيد</a>
					</p>
				</div>
				<div class="Prct-ctgy">
					<h4>محرر الترميز</h4>
				</div>
			</li>
			<li>
				<div class="Product-Ctnt">
					<h3>
						<a
							class="P-Lnk"
							href="#">مولد Qr الخاص بالواتساب</a>
					</h3>
					<p>مثال لشكل القطعة يمكنك تخصيص الشكل على حسب رغبتك و حاجتك <a
							class="extL"
							href="#">انقر للمزيد</a>
					</p>
				</div>
				<div class="Prct-ctgy">
					<h4>مولد</h4>
				</div>
			</li>
			<li>
				<div class="Product-Ctnt">
					<h3>
						<a
							class="P-Lnk"
							href="#">مولد رابط الامن</a>
					</h3>
					<p>مثلا هذا زر يوصلك لميزة انت تقدمها على مدونتك كتوليد صفحات و اشياء اخرى <a
							class="extL"
							href="#/">انقر للمزيد </a>
					</p>
				</div>
				<div class="Prct-ctgy">
					<h4>توليد</h4>
				</div>
			</li>
			<!-- تكرار العناصر السابقة مع تغيير المحتوى -->
			<div style="clear:both">
			</div>
		</ul>
	</div>
	<i class="separate">
	</i>
</body>
</html>

الختام

منشورات ذات صل

هذا الكود هو نقطة انطلاق رائعة لتعلم HTML و CSS. لا تتردد في تخصيصه واستخدامه كأساس لمشاريعك الشخصية. الويب مليء بالموارد لتعلم وتحسين مهاراتك، لذا استمتع برحلتك في عالم تطوير الويب!

شكرًا لمساعدة ChatGPT في إعداد هذا المقال

المصادر:
SiwaneXYZ©
https://www.siwane.xyz/2023/11/blog-post_12.html