مختصر كتابي: Introduction to HTML
ما هي لغة HTML؟
HTML اختصار Hypertext Markup Language، وهي من اللغات الأساسية لبناء المواقع مع CSS وJavaScript. يستخدمها مطورو الويب (Web Developers) لبناء الهيكل (Structure) أو الأساس لأي موقع، ولوصف المحتوى (Content) الموجود فيه.
لغة علامات وليست لغة برمجة
- HTML لغة علامات (Markup Language) وليست لغة برمجة، لأننا نستخدمها لكي نصف شيئًا.
- نصف المحتوى من خلال العناصر (Elements)، ونسميها أيضًا الوسوم (Tags).
- المتصفح يقرأ كود HTML ويحوّله إلى صفحة أو موقع تتصفحه وتتفاعل معه.
عناصر مختلفة لمحتوى مختلف
لكل نوع من المحتوى عنصر يصفه. مثلًا عنصر p لعمل فقرة (Paragraph)، وعناصر للعناوين (Headings)، وعناصر لعرض الفيديوهات والصور:
<p>content</p>
<h1>content</h1>
<video>content</video>
<img/>وسترى عناصر أخرى كثيرة خلال هذا القسم من الكورس.
مم يتكون العنصر؟
لنأخذ عنصر الفقرة مثالًا. السطر كله على بعضه هو العنصر (Element):
<p><strong>Hello!</strong></p>ويتكون من ثلاثة أجزاء:
- الفتحة (Opening Tag): اسم العنصر بين علامتي أصغر من وأكبر من، وهنا
<p>. - المحتوى (Content): ما يعرضه العنصر. الفقرة تعرض نصًا (Text)، وقد يكون المحتوى عنصرًا آخر. العنصر الذي بالداخل نسميه الابن (Child)، والعنصر الذي بالخارج هو الأب (Parent). في المثال
strongهو الابن وpهو الأب. - القفلة (Closing Tag): مثل الفتحة تمامًا، لكن فيها شرطة مائلة (Slash). نفتح بـ
<p>ونقفل بـ</p>.
بعض العناصر ليس لها محتوى ولا قفلة، مثل عنصر الصور: فيه الفتحة فقط مع Slash في آخرها. هذا النوع اسمه Self Closing Tag:
<img src="cat.jpg" />لا تقلق إن بدا لك هذا كثيرًا، فهذه الأشياء ستصبح بديهية جدًا عندما نكتب HTML معًا كثيرًا خلال الكورس.
الخلاصة
- HTML لغة علامات تبني هيكل الموقع وتصف محتواه.
- نصف المحتوى بالعناصر (Elements) أو الوسوم (Tags).
- العنصر = فتحة + محتوى + قفلة، والقفلة فيها Slash.
- بعض العناصر مثل
imgتُكتب بفتحة فقط (Self Closing Tag).
مصطلحات الدرس
| المصطلح | بالإنجليزية | المعنى |
|---|---|---|
| لغة علامات | Markup Language | لغة نستخدمها لوصف المحتوى، وليست لغة برمجة |
| العنصر / الوسم | Element / Tag | الوحدة التي نصف بها نوعًا من المحتوى |
| الفتحة | Opening Tag | اسم العنصر بين < و > |
| القفلة | Closing Tag | مثل الفتحة لكن فيها Slash |
| الابن / الأب | Child / Parent | عنصر داخل عنصر آخر / العنصر الذي يحتويه |
| وسم يقفل نفسه | Self Closing Tag | عنصر بفتحة فقط تنتهي بـ Slash مثل img |