HTML
المقدمة :
سمع جميعنا بالإنترنت ( Internet ) ( أو الشبكة
العالمية ) التي لها استخدامات عديدة مثل : البريد
الإلكتروني (E-mail ) – نقل الملفات (مثل ملفات
الصوت – الفيديو ... ) وغيرها , ولكن يبقى الاستخدام
الأبرز للإنترنت هو تصفح المواقع (أو عرض صفحات
) الويب .
ظهرت فكرة الويب والتي هي مجموعة كبيرة من الوثائق
المرتبطة مع بعضها البعض أول مرة
عام 1989 م ويعود الفضل في ذلك ل Tim Berners lee
وكان يعمل في تلك الفترة في
( CERN ) وهو مختبر أبحاث أوروبي .
كان الهدف منها في البداية تنظيم عمله من خلال ربط
الوثائق ببعضها البعض , ونتيجة للنجاح
الذي حققته هذه الفكرة قام Tim باختراع أول مخدم
ويب (web server ) و أول متصفح ويب ,
كما أن حاجته لطريقة يستطيع بها عرض هذه الوثائق
دفعته لاختراع لغة HTML ( لغة تأشير النص التشعبي
) تقوم هذه اللغة بإرشاد المتصفحات ( مثل Internet
Explorer ) إلى كيفية عرض صفحة الويب لدى المستخدم
و إنشاء ارتباطاتها مع صفحات الويب الأخرى .
تمهيد لHTML :
يوجد للغة HTML عدة إصدارات أحدثها
HTML4.1 .
تعتبر لغة HTML لغة بسيطة يسهل التعامل معها فهي
ليست بحاجة لأي برنامج خاص فنحن نستطيع كتابة صفحة
HTML باستخدام أي محرر نصوص حتى المفكرة (notepad)
لكن يجب
مراعاة قواعد محددة و أن تكون لاحقة (امتداد ) الملف
.html أو .htm .
بنية صفحة HTML:
تتضمن صفحة HTML مجموعة من التأشيرات
(Tags ) – تشكل تعليمات اللغة – وغالبا ما تتكون
كل تأشيرة من زوج تأشيرة افتتاح و تأشيرة إغلاق
.
تبدأ صفحة HTML دوما بالتأشيرة <html> , وتنتهي
بتأشيرة الإغلاق لها </html> وتقسم الصفحة
إلى قسمين :
ترويسة الصفحة head : تبدأ بالتأشيرة <head>
تحوي معلومات عن الصفحة ( عنوانها <title>Welcome
to Web</title> يظهر النص في شريط العناوين....)
وتنتهي الترويسة بالتأشيرة </head>.
جسم الصفحة body : يبدأ بالتأشيرة <body>
و يحوي النص والارتباطات مع المعطيات و الصفحات
الأخرى وينتهي بالتأشيرة </body> , قد تأخذ
بعض التأشيرات متحولات تحدد صفاتها
فمثلا يمكن أن نحدد لون الخلفية لجسم ا لصفحة عن
طريق تمرير المتحول bgcolor مع اللون المطلوب للتأشيرة
<body> كما يلي :
<body bgcolor=”lightgreen”>
ضمن الجسم نجد تأشيرات عديدة لكل
منها وظيفة خاصة سنذكر أشهر هذه التأشيرات وأكثرها
استعمالا :
العناوين (headers):
يوجد في HTML عدة مستويات من العناوين كل مستوى
أصغر في الحجم من المستوى السابق
<h1> مستوى أول عنوان </h1>
<h2> مستوى ثاني عنوان </h2>
.
.
<h6> مستوى سادس عنوان </h6>
المقاطع (paragraphs):
وذلك لإظهار مجموعة من الأسطر صمن مقطع واحد كما
يلي :
<p> المقطع </p>
الخط (font ) :
باستخدام متحولات التأشيرة <font > نستطيع
التحكم بلون الخط color وحجمه size كما يلي:
<font size=”4” color=”red”> النص </font>
تأشيرة للكتابة بخط عريض (bold)
: </b> النص <b>
تأشيرة للكتابة بخط مائل (Italic) : </I>
النص <I>
الصور (image ):
إن إظهار الصور على الويب ميزة هامة ويتم ذلك من
خلال ربط ملف الصورة مع الصفحة كما يلي
<img src=” موقع واسم الصورة “>
نلاحظ هنا أن هذه التأشيرة أغلقت نفسها بنفسها هنالك
عدد من التأشيرات تتمتع بهذه الصفة وتدعى (self
closing tags ) .
مثال آخر على هذا النوع من التأشيرات تأشيرة ترك
سطر فارغ <br>
الجداول (tables ) :
للجداول أهمية كبير في تنسيق النص ضمن صفحة HTML
كما أن بنية الجدول لا غنى عنها في كثير من الحالات
يبدأ الجدول بالتأشيرة <table> التي تأخذ
متحولات مثل عرض إطار الجدول ولون الإطار وعرض الجدول
بالنسبة للصفحة كما يلي:
<table border="1" bordercolor="#111111"
width="100%">
لتحديد سطر نستخدم التأشيرة <tr> ضمنها نحدد
الأعمدة بالتأشيرة <td> ثم نكتب( نص.. ) ونغلق
العمود </td>, بعد الانتهاء من الأعمدة نغلق
السطر </tr> ونكرر ذلك قدر حاجتنا.
الارتباطات ( link ):
أهم تأشيرة والتي تعتبر أساس تصميم الويب هي التأشيرة
<a> والتي من متحولاتها href ونستطيع بواسطته
ربط صفحات الويب مع بعضها البعض , كما يلي :
<a href="page2.htm">click to see
Page2</a>
<a herf=” موقع الصفحة”> النص الذي سوف يظهر
على الصفحة </a>
إعداد صقر اصلان |
