صفحة HTML جاهزة دليلك لإنشاء أول صفحة ويب بسهولة
إذا كنت مبتدئًا في تطوير الويب أو تبحث عن نموذج صفحة HTML جاهزة لاستخدامها في موقعك، فقد وصلت إلى المكان الصحيح. HTML هي اللغة الأساسية لإنشاء صفحات الويب، وهي سهلة التعلم والتطبيق. في هذا المقال، سنقدم لك صفحة HTML جاهزة يمكنك نسخها واستخدامها مباشرة، مع شرح مكوناتها الأساسية.
ما هي HTML؟
HTML (HyperText Markup Language) هي لغة ترميز تُستخدم لإنشاء صفحات الويب. تعتمد على الوسوم (Tags) لتنظيم المحتوى، مثل العناوين، الفقرات، الصور، والروابط.
مكونات صفحة HTML الأساسية
كل صفحة HTML تتكون من العناصر التالية:
- إعلان نوع المستند (<!DOCTYPE html>)
يُخبر المتصفح بأن الصفحة مكتوبة بلغة HTML5.
2. وسم <html>
يُعتبر الجذر الرئيسي لكل صفحة ويب.
3. وسم <head>
يحتوي على معلومات الصفحة مثل العنوان (<title>) والميتا (<meta>).
4. وسم <body>
يحتوي على محتوى الصفحة الفعلي، مثل النصوص والصور والأزرار.
كود صفحة HTML جاهزة
يمكنك نسخ الكود التالي واستخدامه لإنشاء صفحة ويب أساسية تحتوي على عنوان، نص، صورة، وزر رابط:
👇👇👇👇👇👇👇👇👇
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="صفحة HTML جاهزة للاستخدام في موقعك">
<title>صفحة HTML جاهزة</title>
<style>
body {
font-family: Arial, sans-serif;
direction: rtl;
text-align: right;
margin: 20px;
padding: 20px;
background-color: #f4f4f4;
}
.container {
max-width: 800px;
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
}
p {
font-size: 18px;
line-height: 1.6;
}
img {
max-width: 100%;
height: auto;
border-radius: 10px;
margin-top: 10px;
}
a {
display: inline-block;
margin-top: 15px;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
text-decoration: none;
border-radius: 5px;
}
a:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<h1>مرحبًا بك في صفحتنا الجاهزة!</h1>
<p>هذه صفحة HTML بسيطة يمكنك استخدامها كأساس لموقعك الإلكتروني. تحتوي الصفحة على عنوان، نص، صورة، وزر للانتقال إلى صفحة أخرى.</p>
<img src="https://via.placeholder.com/800x400" alt="صورة توضيحية">
<p>يمكنك تعديل هذا الكود وإضافة المزيد من المحتوى حسب احتياجاتك.</p>
<a href="https://www.example.com">انتقل إلى موقعنا</a>
</div>
</body>
</html>
👆👆👆👆👆👆👆👆👆👆
كيفية استخدام هذا الكود؟
1. افتح محرر نصوص مثل Notepad++، VS Code، أو Sublime Text.
2. انسخ الكود أعلاه والصقه في محرر النصوص.
3. احفظ الملف بامتداد .html، مثلاً: index.html.
4. افتح الملف في متصفح الويب (Chrome أو Firefox).
خاتمة
هذه صفحة HTML جاهزة يمكن استخدامها كنموذج أولي لموقعك. يمكنك تعديلها وإضافة المزيد من العناصر مثل الأزرار، الجداول، والنماذج لإنشاء موقع احترافي بسهولة. إذا كنت ترغب في تطوير موقع متكامل، يمكنك دمج CSS و JavaScript لتحسين التصميم والتفاعل مع المستخدمين.
🔹 هل لديك أي استفسارات حول HTML؟ شاركنا في التعليقات!
🔒 يرجى تسجيل الدخول لكتابة تعليق.
💬 أخر التعليقات
لا توجد تعليقات حتى الآن. كن أول من يعلق!