HTML هي لغة وسم تستخدم لتصميم وإنشاء صفحات الويب. تعني “لغة توصيف النص الفائق”، وتستخدم لتعريف هيكل صفحة الويب وعرض المحتوى الموجود عليها، مثل النصوص والصور والروابط والفيديوهات وغيرها. يتم استخدام HTML بالتعاون مع لغات أخرى مثل CSS لتنسيق وتصميم صفحات الويب بشكل أفضل، وJavaScript لإضافة تفاعلية لصفحات الويب. يمكن كتابة الكود الخاص بلغة HTML باستخدام محرر نصوص أو برنامج تحرير النصوص المفضل.
من هو مخترع لغة Html ؟
دعونا فى هذا المقال على موقعنا فريق الدعم الاليكترونى نحدثكم عن هذه اللغه .
تم اختراع لغة HTML من قبل العالم البريطاني تيم برنرز لي في العام 1989م، وهو عالم حاسوب وفيزيائي حائز على جائزة الحاسوب العالمي. وقد تم تطوير HTML بالتعاون مع روبرت كايلو وبيرنرز لي كجزء من مشروع الوورلد وايد ويب (WWW) الذي بدأ في مركز الأبحاث الأوروبي للفيزياء النووية (CERN) في سويسرا. ومنذ ذلك الحين، تطورت HTML لتصبح أحد أساسيات الويب الحديث وهي لغة ترميز مفتوحة المصدر وتستخدم على نطاق واسع في تصميم وتطوير صفحات الويب.
[ads2]
ملخص لأهم أوامر HTML ووظيفة كل أمر وطريقة كتابتة
HTML هي لغة وسم تستخدم لبناء صفحات الويب. وهناك العديد من الأوامر المختلفة المستخدمة في HTML ومن بينها:
<!DOCTYPE html>: هذا الأمر يحدد نوع المستند HTML الذي يستخدمه المتصفح لعرض صفحة الويب. ويتم وضعه في بداية كل صفحة HTML.<html>: هذا الأمر يشير إلى بداية المستند HTML ويتضمن جميع العناصر الأخرى الموجودة في الصفحة.<head>: هذا الأمر يتضمن المعلومات الوصفية للصفحة، مثل عنوان الصفحة والملفات المرتبطة بها، وغيرها.<title>: هذا الأمر يستخدم لوضع عنوان لصفحة الويب ويتم وضعه داخل عنصر head.<body>: هذا الأمر يحدد جسم صفحة الويب ويتضمن جميع العناصر المرئية التي يتم عرضها على الصفحة.<h1>–<h6>: هذه الأوامر تستخدم لوضع عنوان في صفحة الويب وتتفاوت في الحجم والأهمية. يتم كتابتها على النحو التالي:<h1>عنوان</h1>.<p>: هذا الأمر يستخدم لإدراج فقرة في صفحة الويب ويتم كتابتها على النحو التالي:<p>فقرة</p>.<a>: هذا الأمر يستخدم لإنشاء رابط في صفحة الويب ويتم كتابتها على النحو التالي:<a href="https://example.com">نص الرابط</a>.<img>: هذا الأمر يستخدم لإدراج صورة في صفحة الويب ويتم كتابتها على النحو التالي:<img src="image.jpg" alt="نص بديل">.<ul>و<li>: هذه الأوامر تستخدم لإنشاء قائمة غير مرتبة وتتضمن<ul>جميع العناصر التي يجب وضعها في
و هناك العديد من الأوامر المستخدمة في HTML وأدناه بعض الأمثلة على بعض الأوامر الأخرى:
<div>: هذا الأمر يستخدم لتقسيم صفحة الويب إلى أقسام مختلفة ويتم كتابته على النحو التالي:<div>محتوى القسم</div>.<span>: هذا الأمر يستخدم لتنسيق جزء صغير من النص ويتم كتابتها على النحو التالي:<span>نص</span>.<form>: هذا الأمر يستخدم لإنشاء نموذج يمكن للمستخدمين ملءه وإرسال البيانات إلى الخادم. يتم كتابتها على النحو التالي:
- <input>: هذا الأمر يستخدم لإنشاء حقل لإدخال البيانات في نموذج ويتم كتابتها على النحو التالي:
<input type=”text” name=”full-name” placeholder=”Full Name”>
- <button>: هذا الأمر يستخدم لإنشاء زر داخل نموذج ويتم كتابتها على النحو التالي:
<button type=”submit”>Submit</button>
- <table> و <tr> و <td>: هذه الأوامر تستخدم لإنشاء جدول ويتم كتابتها على النحو التالي:
<table>
<tr>
<td>عنوان الخلية 1</td>
<td>عنوان الخلية 2</td>
</tr>
<tr>
<td>المحتوى في الخلية 1</td>
<td>المحتوى في الخلية 2</td>
</tr>
</table>
- <select> و <option>: هذه الأوامر تستخدم لإنشاء قائمة منسدلة في نموذج ويتم كتابتها على النحو التالي:
<select name=”cars”>
<option value=”volvo”>Volvo</option>
<option value=”audi”>Audi</option>
<option value=”bmw”>BMW</option>
</select>
- <header> و <footer>: هذه الأوامر تستخدم لإن
كيفية إنشاء صفحة ويب في لغة HTML خطوة بخطوة؟
<!DOCTYPE html>
<html>
<head>
<title>مثال تصميم صفحة ويب</title>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
nav {
background-color: #eee;
padding: 10px;
text-align: center;
}
nav a {
color: #333;
display: inline-block;
margin: 0 10px;
text-decoration: none;
}
main {
margin: 10px;
padding: 10px;
}
h1 {
font-size: 36px;
margin-bottom: 20px;
text-align: center;
}
p {
line-height: 1.5;
margin-bottom: 20px;
text-align: justify;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>عنوان الصفحة</h1>
</header>
<nav>
<a href=”#”>الرئيسية</a>
<a href=”#”>من نحن</a>
<a href=”#”>اتصل بنا</a>
</nav>
<main>
<h2>عنوان الفقرة</h2>
<p>هذه هي النص الخاص بالفقرة الأولى في الصفحة. يمكنك إضافة نص آخر هنا إذا كنت تريد.</p>
<h2>عنوان آخر لفقرة</h2>
<p>هذه هي النص الخاص بالفقرة الثانية في الصفحة. يمكنك إضافة نص آخر هنا إذا كنت تريد.</p>
</main>
<footer>
<p>حقوق الطبع والنشر © 2023</p>
</footer>
</body>
</html>
ستنتهي هذه الصفحة بتصميم بسيط يشمل عنوان الصفحة وقائمة التنقل وبعض الفقرات. يمكنك تغيير الألوان والخطوط والأنماط والمزيد لتخصيص المظهر وفقًا لاحتياجاتك.
[ads2]
نموذج تسجيل حساب جديد html
<!DOCTYPE html>
<html>
<head>
<title>تسجيل حساب جديد</title>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
form {
background-color: #fff;
margin: 50px auto;
padding: 20px;
max-width: 500px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
h1 {
font-size: 36px;
margin-bottom: 20px;
text-align: center;
color: #333;
}
input[type=”text”], input[type=”email”], input[type=”password”] {
display: block;
width: 100%;
margin-bottom: 20px;
padding: 10px;
border: none;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
font-size: 16px;
color: #333;
font-family: Arial, sans-serif;
}
input[type=”submit”] {
display: block;
width: 100%;
padding: 10px;
border: none;
border-radius: 5px;
background-color: #333;
color: #fff;
font-size: 18px;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
input[type=”submit”]:hover {
background-color: #555;
}
</style>
</head>
<body>
<form>
<h1>تسجيل حساب جديد</h1>
<label for=”name”>الاسم:</label>
<input type=”text” id=”name” name=”name” required>
<label for=”email”>البريد الإلكتروني:</label>
<input type=”email” id=”email” name=”email” required>
<label for=”password”>كلمة المرور:</label>
<input type=”password” id=”password” name=”password” required>
<input type=”submit” value=”إنشاء الحساب”>
</form>
</body>
</html>
ستنتهي هذه الصفحة بنموذج تسجيل حساب جديد يحتوي على حقول لاسم المستخدم والبريد الإلكتروني وكلمة المرور. سيطلب من المستخدم تعبئة كل الحقول وسيتمكن من إرسال النموذج إذا تم استيفاء جميع الحقول المطلوبة. يمكنك تخصيص الألوان والخطوات
مثال لصفحة تسجيل دخول شاملة Captcha للتحقق باستخدام HTML و CSS:
<!DOCTYPE html>
<html>
<head>
<title>تسجيل الدخول</title>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
form {
background-color: #fff;
margin: 50px auto;
padding: 20px;
max-width: 500px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
h1 {
font-size: 36px;
margin-bottom: 20px;
text-align: center;
color: #333;
}
input[type=”text”], input[type=”password”], input[type=”submit”] {
display: block;
width: 100%;
margin-bottom: 20px;
padding: 10px;
border: none;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
font-size: 16px;
color: #333;
font-family: Arial, sans-serif;
}
input[type=”submit”] {
background-color: #333;
color: #fff;
font-size: 18px;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
input[type=”submit”]:hover {
background-color: #555;
}
.captcha {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.captcha img {
margin-right: 10px;
cursor: pointer;
}
.captcha p {
font-size: 16px;
color: #333;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<form>
<h1>تسجيل الدخول</h1>
<label for=”username”>اسم المستخدم:</label>
<input type=”text” id=”username” name=”username” required>
<label for=”password”>كلمة المرور:</label>
<input type=”password” id=”password” name=”password” required>
<div class=”captcha”>
<img src=”captcha.php” alt=”Captcha”>
<p>انقر فوق الصورة لتحديث Captcha</p>
</div>
<label for=”captcha”>Captcha:</label>
<input type=”text” id=”captcha” name=”captcha” required>
<input type=”submit” value=”تسجيل الدخول”>
</form>
</body>
</html>
كيفية إنشاء جدول أنيق بـ HTML و CSS
يمكنك استخدام هذا الكود البسيط كنموذج لجداول HTML:
<!DOCTYPE html>
<html>
<head>
<title>جدول HTML</title>
</head>
<body>
<table>
<thead>
<tr>
<th>الاسم</th>
<th>العمر</th>
<th>البريد الإلكتروني</th>
</tr>
</thead>
<tbody>
<tr>
<td>أحمد</td>
<td>25</td>
<td>ahmed@example.com</td>
</tr>
<tr>
<td>محمد</td>
<td>30</td>
<td>mohamed@example.com</td>
</tr>
<tr>
<td>سارة</td>
<td>28</td>
<td>sara@example.com</td>
</tr>
<tr>
<td>نور</td>
<td>22</td>
<td>nour@example.com</td>
</tr>
</tbody>
</table>
</body>
</html>
يحتوي هذا النموذج على جدول يحتوي على 3 عمود رئيسي، الأسماء والأعمار والبريد الإلكتروني، بالإضافة إلى بعض البيانات كأمثلة. يمكنك تعديله واستخدامه وفقًا لاحتياجاتك.
يمكنك استخدام هذا النموذج الأكبر لجدول HTML:
<!DOCTYPE html>
<html>
<head>
<title>جدول HTML</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
th {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<h2>قائمة الطلاب</h2>
<table>
<thead>
<tr>
<th>الاسم</th>
<th>العمر</th>
<th>البريد الإلكتروني</th>
<th>رقم الهاتف</th>
</tr>
</thead>
<tbody>
<tr>
<td>أحمد</td>
<td>25</td>
<td>ahmed@example.com</td>
<td>1234567890</td>
</tr>
<tr>
<td>محمد</td>
<td>30</td>
<td>mohamed@example.com</td>
<td>2345678901</td>
</tr>
<tr>
<td>سارة</td>
<td>28</td>
<td>sara@example.com</td>
<td>3456789012</td>
</tr>
<tr>
<td>نور</td>
<td>22</td>
<td>nour@example.com</td>
<td>4567890123</td>
</tr>
<tr>
<td>أميرة</td>
<td>26</td>
<td>amira@example.com</td>
<td>5678901234</td>
</tr>
<tr>
<td>أحمد</td>
<td>25</td>
<td>ahmed@example.com</td>
<td>1234567890</td>
</tr>
<tr>
<td>محمد</td>
<td>30</td>
<td>mohamed@example.com</td>
<td>2345678901</td>
</tr>
<tr>
<td>سارة</td>
<td>28</td>
<td>sara@example.com</td>
<td>3456789012</td>
</tr>
<tr>
<td>نور</td>
<td>22</td>
<td>nour@example.com</td>
<td>4567890123</td>
</tr>
<tr>
<td>أميرة</td>
<td>26</td>
<td>amira@example.com</td>
<td>5678901234</td>
</tr>
<tr>
<td>أحمد</td>
<td>25</td>
<td>ahmed@example.com</td>
<td>
مقالات ذات صلة : لغة HTML الوسوم الأساسية لبناء صفحة ويب
كود تغيير مكان الصورة html
يمكن تغيير مكان الصورة في صفحة HTML باستخدام عنصر الصورة <img> وخاصية CSS المسؤولة عن تحديد مكان العنصر position. يمكن استخدام position بالاشتراك مع الخواص top, right, bottom, و left لتحديد مكان العنصر.
فيما يلي مثال بسيط لتحديد موضع الصورة في الصفحة:
<!DOCTYPE html>
<html>
<head>
<title>تحديد مكان الصورة</title>
<style>
img {
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<img src=”example.jpg” alt=”صورة مثالية”>
</body>
</html>
في هذا المثال، تم استخدام الخاصية position: absolute لتحديد مكان الصورة بالنسبة لنقطة الصفحة العلوية اليسرى، واستخدمنا الخواص top و left لتحديد المسافة بين الصورة والنقطة العلوية اليسرى للصفحة. يمكن تغيير القيم لتحديد موقع الصورة بشكل أكبر أو أصغر، حسب الحاجة.
كود الكتابة على الصورة HTML
يمكن كتابة النص على الصورة في صفحة HTML باستخدام العنصر <figure> و <figcaption> وخاصية CSS المسؤولة عن تحديد مكان العنصر position. يتم وضع الصورة داخل العنصر <figure>، ثم يتم وضع النص داخل العنصر <figcaption>.ومكنك الاستفادة من افكار أخرى على موقع باور تكنولوجى – Power Tec
فيما يلي مثال بسيط لكتابة النص على الصورة:
<!DOCTYPE html>
<html>
<head>
<title>كتابة النص على الصورة</title>
<style>
figure {
position: relative;
display: inline-block;
}
figcaption {
position: absolute;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<figure>
<img src=”example.jpg” alt=”صورة مثالية”>
<figcaption>نص مثالي على الصورة</figcaption>
</figure>
</body>
</html>
في هذا المثال، تم استخدام العنصر <figure> للحفاظ على صورة ونص مترابطين مع بعضهما البعض، واستخدمنا العنصر <figcaption> لكتابة النص على الصورة. تم استخدام الخاصية position: relative للعنصر <figure> لتحديد موضع النص بالنسبة للصورة، واستخدمنا الخواص bottom و left لتحديد المسافة بين النص والصورة. تم استخدام خصائص CSS أخرى لتنسيق النص وإضفاء الأسلوب المناسب عليه، حسب الحاجة.
المزيد : لغة HTML أوامر إضافة القوائم و الجداول وتنسيقها
