تعلم اساسيات HTML يعتبر خطوة مهمة لفهم كيفية بناء صفحات الويب وتنظيم المحتوى عليها.
ما هي HTML
HTML (لغة توصيف النصوص الفائقة) هي لغة برمجة تستخدم لبناء وتنظيم الصفحات الويب. تمثل HTML الجزء الأساسي من هيكل الويب وتعتبر لغة وصفية تعبر عن المحتوى والبنية الأساسية للصفحة. إن HTML تتيح للمطورين تحديد العناصر المختلفة على الصفحة، مثل العناوين، الفقرات، الروابط، الصور، الجداول، وغيرها من العناصر.
تتألف صفحة HTML من عناصر متنوعة، ويتم تحديدها باستخدام علامات (tags) تشير إلى بداية ونهاية كل عنصر. مثلاً، علامة <html> تحدد بداية الصفحة، <head> تحتوي على المعلومات التي لا تظهر مباشرة على الصفحة مثل عنوان الصفحة، بينما <body> تحتوي على المحتوى الذي يظهر على الصفحة.
على سبيل المثال، الكود التالي يوضح اساسيات HTML في صفحة بسيطة:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>عنوان الصفحة</title>
</head>
<body>
<h1>مرحبًا بك في صفحة HTML!</h1>
<p>هذه نموذج بسيط لصفحة HTML تحتوي على عنوان وفقرة.</p>
<img src=”صورة.jpg” alt=”وصف للصورة”>
<a href=”https://www.example.com”>رابط موقع مثال</a>
</body>
</html>
يساعد استخدام HTML المطورين في إنشاء صفحات ويب تفاعلية ومتوافقة مع متصفحات الويب المختلفة، وتعتبر أساسًا أساسيًا لبناء وتصميم الواجهات الرقمية على الإنترنت.
اساسيات HTML
إليك بعض الأساسيات في HTML:
1.الهيكل الأساسي:
في HTML، يتكون الهيكل الأساسي للصفحة من مجموعة من العناصر التي تعرف ترتيب وتنظيم محتوى الصفحة. الهيكل الأساسي يسمح لمحركات البحث والمتصفحات بفهم كيفية ترتيب وعرض المحتوى. هذا هو الهيكل الأساسي لصفحة HTML:
<!DOCTYPE html>:- هذا العنصر يحدد نوع الوثيقة والإصدار الذي يتبعه المستعرض.
<html>:- يعرف بداية ونهاية الوثيقة الHTML بأكملها.
<head>:- يحتوي على المعلومات الرئيسية حول الوثيقة مثل عنوان الصفحة والروابط بين الوثائق ووصف الصفحة لمحركات البحث.
<title>:- يحدد عنوان الصفحة الذي يظهر في شريط عنوان المتصفح.
<body>:- يحتوي على جميع محتوى الصفحة المرئي مثل النصوص والصور والروابط والفيديوهات.
هذا الهيكل الأساسي يوفر إطارًا لبناء صفحات الويب، وهو أساسي لضمان التنظيم وتفاعلية الصفحة وقابليتها لمحركات البحث والتصفح السليم ويتم ادخال الاكواد داخل محرر نصوص VSC مثلا او اي محرر نصوص تفضلة واستخدام CSS للتعديل علية و في الدروس القادمة تفاصيل اكثر
<!DOCTYPE html>
<html>
<head>
<title>عنوان الصفحة</title>
</head>
<body>
<!– محتوى الصفحة يأتي هنا –>
</body>
</html>
2.عناصر النصوص:
- في HTML، تتيح عناصر النصوص إضافة وتنسيق النصوص والمحتوى النصي على صفحات الويب. إليك بعض العناصر الأساسية:
- عناوين الصفحة
<h1>إلى<h6>:- تُستخدم لتحديد عناوين الصفحة بأحجام مختلفة، حيث
<h1>هو الأكبر و<h6>هو الأصغر.
- تُستخدم لتحديد عناوين الصفحة بأحجام مختلفة، حيث
- عناوين الصفحة
- فقرات
<p>:- تستخدم لتقديم النصوص في فقرات منفصلة.
- فقرات
- نصوص مهمة
<strong>و<em>:<strong>: تستخدم لتمييز النصوص بشكل قوي أو عريض.
<em>: تستخدم لإبراز النص بشكل مائل لإظهار التأكيد أو الأهمية.
- نصوص مهمة
- الترتيب الفراغي
<br>:- يستخدم لإدخال فراغ (سطر جديد) دون إنشاء فقرة جديدة.
- الترتيب الفراغي
- التنسيق
<span>و<div>:<span>: تُستخدم لتطبيق تنسيقات على جزء صغير من النص.
<div>: تُستخدم لتجميع مجموعة من العناصر معًا لتطبيق تنسيقات وتنظيمات أو لإنشاء أقسام في الصفحة.
- التنسيق
3.الصور:
<img src=”رابط الصورة” alt=”وصف للصورة”>
4.الروابط:
<a href=”رابط الصفحة”>نص الرابط</a>
5.النماذج:
<form action=”عنوان الإرسال” method=”نوع الطريقة”>
<label for=”اسم”>الاسم:</label>
<input type=”text” id=”اسم” name=”اسم”>
<input type=”submit” value=”إرسال”>
</form>
6.الجداول:
<table>
<tr>
<th>عنوان العمود 1</th>
<th>عنوان العمود 2</th>
</tr>
<tr>
<td>البيان في الصف 1، عمود 1</td>
<td>البيان في الصف 1، عمود 2</td>
</tr>
</table>
7.النماذج والحقول:
- حقل نصي:
<input type=”text” id=”username” name=”username”>
- حقل كلمة مرور:
<input type=”password” id=”password” name=”password”>
- حقل اختيار:
<select id=”cars” name=”cars”>
<option value=”volvo”>Volvo</option>
<option value=”saab”>Saab</option>
</select>
8. التعليقات:
<!– هذا تعليق –>
هذه مجرد لمحة سريعة، ويمكنك استكشاف المزيد حسب احتياجاتك.
ومن افضل برامج كتابة الاكواد visual studio code ويمكنك تنزيلة من هنا
Sharing to
Как правильно выбрать материал для перетяжки мебели, стильных
Преображаем вашу мебель с помощью перетяжки, новый взгляд на привычную мебель
Топ-3 причины для перетяжки мебели в доме, закажите услугу профессионалов
Вдохновляющие идеи для перетяжки мебели, которые понравятся каждому
Перетяжка мебели: секреты мастеров, которые стоит выслушать
Мебель “КакСвоим”.