اساسيات HTML | تعلم البرمجة | onemoka

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

HTML دي إيه؟

HTML هي اختصار لـ HyperText Markup Language، وهي اللغة الأساسية لبناء المواقع.
ببساطة، HTML بتكون الهيكل أو “الهيكل العظمي” لأي موقع إلكتروني.
كل اللي بتشوفه على المواقع (نصوص، صور، فيديوهات، أزرار) بيكون مكتوب بـ HTML.

على سبيل المثال، الكود التالي يوضح اساسيات HTML في صفحة بسيطة:

إزاي تكتب كود HTML؟

الكود بتاع HTML بيكون مكون من “tags”، وكل “tag” بيكون له وظيفة معينة.

مثال:

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    بسم الله الرحمن الرحيم
</body>
</html>

مثال اخر

				
					<h1>أهلاً بيك في عالم HTML!</h1>
<p>دي فقرة بسيطة مكتوبة بـ HTML.</p>

<h1>: علشان تكتب عنوان رئيسي.
<p>: علشان تكتب فقرة نصية.

أهم الـ tags اللي هتحتاجها:

<html>: دا الـ tag الأساسي اللي بيبدأ فيه أي كود HTML.
<head>: الجزء دا بيحتوي على معلومات عن الصفحة، زي العنوان اللي بيظهر في tab المتصفح.
<body>: الجزء الرئيسي اللي بيظهر للمستخدم، وبيحتوي على كل المحتوى (نصوص، صور، إلخ).
<a>: علشان تضيف لينك.

				
					<!DOCTYPE html>
<html>
<head>
<title>عنوان الصفحة</title>
</head>
<body>
<!-- محتوى الصفحة يأتي هنا -->
</body>
</html>

عناصر النصوص في HTML

لو بدأت تتعلم HTML، فأكيد لاحظت إن النصوص جزء كبير من أي موقع إلكتروني. علشان كدا، في مقال النهاردا هنعرفك على عناصر النصوص في HTML والـ tags اللي هتساعدك تتحكم في شكل المحتوى وتنسيقه بالشكل اللي يناسبك.

1. العناوين (Headings):

العناوين في HTML بتكون من <h1> لـ <h6>.
<h1> بيكون العنوان الرئيسي والأكبر حجمًا، وكل ما الرقم يزيد (زي <h2>، <h3>) الحجم بيقل.
مثال:

				
					<h1>أهلاً بيك في موقع ونموكة!</h1>
<h2>هنعرفك على أساسيات HTML</h2>
<h3>عناصر النصوص</h3>

2. الفقرات (Paragraphs):

علشان تكتب فقرة نصية، استخدم <p>.
مثال:

				
					<p>دي فقرة نصية بسيطة مكتوبة بـ HTML.</p>

3. الروابط (Links):

علشان تضيف لينك، استخدم <a> مع attribute اسمه href علشان تحدد عنوان اللينك.
مثال:

				
					<a href="https://onemoka.com">زور موقع ونموكة</a>

4. الصور (Images):

علشان تضيف صورة، استخدم <img> مع attribute src علشان تحدد مصدر الصورة، و alt علشان تكتب وصف للصورة.
مثال:

				
					<img decoding="async" src="صورة.jpg" alt="وصف الصورة" title="اساسيات HTML 3">

5. النصوص الغامقة والمائلة:

علشان تكتب نص غامق، استخدم <strong> أو <b>.
علشان تكتب نص مائل، استخدم <em> أو <i>.
مثال:

				
					<p>دي <strong>نص غامق</strong> ودي <em>نص مائل</em>.</p>

6. القوائم (Lists):

علشان تعمل قائمة مرتبة (مرقمة)، استخدم <ol>.
علشان تعمل قائمة غير مرتبة (نقط)، استخدم <ul>.
كل عنصر في القائمة بيكون داخل <li>.
مثال:

				
					<ul>
    <li>قهوة</li>
    <li>شاي</li>
    <li>عصير</li>
</ul>

7. الأسطر الجديدة (Line Breaks):

علشان تضيف سطر جديد، استخدم <br>.
مثال:

				
					<p>دي أول سطر.<br>دي سطر جديد.</p>

8. الخطوط الأفقية (Horizontal Rules):

علشان تضيف خط أفقي، استخدم <hr>.
مثال:

				
					<p>دي نص فوق الخط.</p>
<hr>
<p>دي نص تحت الخط.</p>

9. الفورم

				
					<form action="عنوان الإرسال" method="نوع الطريقة">
<label for="اسم">الاسم:</label>
<input type="text" id="اسم" name="اسم">
<input type="submit" value="إرسال">
</form>

				
					<table>

<tr>

<th>عنوان العمود 1</th>

<th>عنوان العمود 2</th>

</tr>

<tr>

<td>البيان في الصف 1، عمود 1</td>

<td>البيان في الصف 1، عمود 2</td>

</tr>

</table>

11.النماذج والحقول

حقل نصي

				
					<a href="رابط الصفحة">نص الرابط</a>
<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>

إزاي تعمل صفحة HTML بسيطة؟

افتح أي برنامج لكتابة الكود (زي Notepad أو VS Code).
اكتب الكود دا:

				
					<!DOCTYPE html>
<html>
<head>
    <title>أول صفحة ليا</title>
</head>
<body>
    <h1>أهلاً بيك في موقعي!</h1>
    <p>دي أول صفحة HTML بعملها.</p>
    <img decoding="async" src="صورة.jpg" alt="صورة تجريبية" title="اساسيات HTML 4">
</body>
</html>

save الملف بـ extension .html، وافتحه بأي متصفح.

نصائح علشان تبدأ:

خليك دايماً بتستخدم أدوات المطورين (Developer Tools) في المتصفح علشان تفهم ازاي المواقع الكبيرة بتكون مكتوبة.
جرب تعدل على الكود وشوف التغييرات إزاي بتظهر.
HTML هي أول خطوة في عالم البرمجة، بعد كدا هتقدر تتعلم CSS و JavaScript علشان تعمل مواقع تفاعلية أكتر

هذه مجرد لمحة سريعة، ويمكنك استكشاف المزيد حسب احتياجاتك.

ومن افضل برامج كتابة الاكواد visual studio code ويمكنك تنزيلة من هنا

حاول فهم محتويات الصفحة الاتية وستكون بداية جيدة لك بالتوفيق

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>عناصر النصوص في HTML</title>
    <style>
        h1 {
            color: blue;
        }
        span.highlight {
            background-color: yellow;
            font-weight: bold;
        }
        div.container {
            border: 1px solid #ccc;
            padding: 10px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <h1>العنوان الرئيسي (H1)</h1>
    <h2>العنوان الفرعي (H2)</h2>
    <p>
        هذا مثال على <strong>نص قوي (bold)</strong> و
        <em>نص مائل (italic)</em>.
    </p>
    <p>
        يمكننا استخدام <br> لإضافة سطر جديد هنا.
    </p>
    <div class="container">
        <p>هذا جزء من قسم يحتوي على عناصر متعددة.</p>
        <p>
            نصوص داخل <span class="highlight">span مميز</span>.
        </p>
    </div>
</body>
</html>

Post Views: 1٬848