المقدمة
مرحبا بكم في مرشد لغة - HTML
(HTML -Hyper Text Markup Language)
وما معناه: لغة الوصف الفوقية وتصميم صفحات للإنترنت .
ولكل أمر من هؤلاء تنفيذ خاص له ، مثل تغيير شكل الخط أو إدراج صورة .
وهناك أكثر من 100 أمر ، ولكن ألمهم منها لا يزيد عن 50 أمرا ، وإذا تعلمنا أهمهم وهم 20 فيمكننا أن نحرر صفحات "الويب" بطلاقة وبصورة كاملة للإنترنت.
أُعد هذا المرشد باللغة سهلة وبشكل بسيط ، لكي يستطيع المستعمل كتابة صفحات الإنترنت "الويب" خلال أو بعد قراءة الدليل مباشرة .
--------------------------------------------------------------------------------
1- إدخال نص لغة -HTML
أن لغة -HTML تتكون من أوامر بشكل نص يبدأ وينتهي بعلامة مميزة وهي علامات "أصغر/أكبر"
" < > "
أي كل أمر يبدأ وينتهي بهذا العلاماتين .
وهذه العلامتان تجدهما في لوحة الأزرار الانكليزية عند استعمال زر الرفع ثم حرفي "زين " و "واو " .
مثل : <b > و < u >
--------------------------------------------------------------------------------
2 - معالج النص
كل ما نحتاجه في الكتابة هو برنامج يعالج النص ، والبرنامج المتوفر لدى الجميع هو "دفتر" ويندوز ، - حيث أن المحترفين في تصميم الصفحات يدعوا أنه بدفتر ويندوز يصمموا أدق وأجمل الصفحات - بالطبع إذا كان لدينا برنامج "فرونت بيج" فذلك يكون أفضل ،
ولفتح "الدفتر ويندوز" ( أنقر على "ابدأ " ثم "البرامج" ثم "البرامج الملحقة" ثم فتح "الدفتر" ) .
يجب الانتباه عند الكتابة بأن الوثيقة تخزن كنص عادي بسيط .
ثم كتابة التالي :
<b> أول صفحاتي في الويب </b> تجربة
الشرح :
حرف b ميعني خط عريض والخط المائل إلى اليسار " / " يعني إبطال أو توقف الأمر . النتيجة:
أول صفحاتي في الويب
تجربة
مبروك !!
--------------------------------------------------------------------------------
3 - التخزين
عملية التخزين أو الحفظ لابد ان تكون بالأحرف اللاتينية وأن تكتب نهاية الاسم أي بعد النقطة في الاسم الأحرف الثلاثة وهي :
htm
مثلا :
"first.htm"
بعد ذلك عليك أن تفتح الملف بأحد مستكشفي(المتصحف) الويب مثل :
(Netscape Navigator أوInternet Explorer)
وإذا فتحت الملف فيكون كالتالي :
أول صفحاتي في الويب
تجربة
ويستحسن أن نفتح برنامج "الدفتر" وفي نفس الوقت و Internet Explorer لكي نتفحص نتيجة العمل .
--------------------------------------------------------------------------------
4 - التحديث
عملية التحديث أو إعادة تحميل للوثيقة هي عبارة عن إضافة لجميع التعديلات التي ليتضمنه الملف . وفي مستكشفي الإنترنت أمرا مباشرا لهذه الخطوة بصور الأوامر(إيكون ) وعلى الأزرار : في Netscape Navigator ينفذ الأمر بزر
"R + control"
بينما في Internet Explorer
"F5"
--------------------------------------------------------------------------------
5 - تنسيق الخطوط
من الآن فصاعدا سوف نستعمل الكلمة "Tag" وهي في هذا السياق تعني ُملحق
وبالتالي ثلاثة من أهمهم :
خط عريض
<b>
نهاية الخط العريض
<b/>
خط مائل
<i>
نهاية الخط مائل
<i/>
تسطير
<u>
نهاية التسطير
<u/>
-------------------------------------------------------------------------------
6 - تنسيق في أوامر "Tag"
معظم أوامر "Tag" (إضافة أو لافتة ) قابلة للتنسيق مع بعضها البعض ولنبدأ بمثل نعرفه :
<u><b> أول صفحاتي في الويب<b/> تجربة <u/>
والنتيجة لابد أن تكون كالتالي :
أول صفحاتي في الويب
تجربة
--------------------------------------------------------------------------------
7 - الأسُـس
يفضل أن تبدأ صفحاتك للويب بالآمرين التاليين :
<html> <body>
<html>
معناه تعريف واضح للمستكشف أن الملف هو ملف الويب ،
<body> معناه تنسيق وتخطيط الصفحة مثل لون الخلفية ، ألوان الخطوط ..الخ
كما يستحسن أن تنتهي الصفحة بهم
</html> </body>.
--------------------------------------------------------------------------------
8 - صورة الخلفية
بمساعدة الملحق (Tag) ال - body تستطيع إدراج صورة خلفية تغطي جميع الصفحات حيث تتكرر في إملائها . وأمر الملحق الموسع هو كالتالي :
< أسم الصورة body background =>
وعليك فقط دمج أسم الصورة التي تريد إدخالها .
ويجب أن تكون الصورة مخزنة في نفس دليل صفحة الويب .
ويستحسن أن تكون الصورة من طراز ال - JPG أو GIF ، حيث أن الصيغتان يوفرا بالتخزين وسريعا التحميل .
ويمكن كتابة عنوان وجود الصورة في الشبكة ، على أن كتابة عنوان بصيغة الإنترنت لابد أن يكون كاملا مثل :
http:\\ أسم الصورة \اسم العنوان .gif
بدون حروف خالية .
--------------------------------------------------------------------------------
9 - اللون الخلفي
وبملحق (Tag) ال - body يمكن بدلا من الصورة المكررة أن تحدد اللون الخلفي
ولون النص :
<"لون الخط"=text"اللون الخلفي"=body bgcolor>
بدون حروف خالية .
وبدلا من النص العربي " لون الخط" و "اللون الخلفي" لابد أن تضع الألوان بالغة الإنكليزية الذي سوف نتطرق لها في الصفحة القادمة .
مثال :
<body bgcolor="blue" text="Silber">
النتيجة :
أول صفحاتي في الويب
تجربة
--------------------------------------------------------------------------------
10 - تحديد الألوان
الأسود = black
البني الكستني = maroon
الأخضر = green
الأزرق = blue
البرتقالي = orange
أصفر = yellow
فضي = silver
أبيض = white
وبملحق (Tag) ال - body يمكن بدلا من الصورة المكررة أن تحدد اللون الخلفي
ولون النص :
<"لون الخط" text "اللون الخلفي"body bgcolor = "اللون الخلفي">
بدون حروف خالية .
وبدلا من النص العربي " لون الخط" و "اللون الخلفي" لابد أن تضع الألوان بالغة الإنكليزية الذي سوف نتطرق لها في الصفحة القادمة .
--------------------------------------------------------------------------------
11 - تشكيل السطر
عندما نغير السطر في أي وثيقة عادية فذلك لا يسري على صفحات ال - HTML لأن متصفح الإنترنت له مقياس أخر لطول السطور . وأمر تغير السطر في هذه اللغة هو كالتالي :
<br>
br = break= قطع أو فاصل أو استراحة
وإذا رغبت بكتابة بندا جديدا أي سطران فلابد من استعمال أمر :
<p>
p بمعنى استراحة (pause)
وإذا رغبت بمسافات أكبر في السطور مثل الآلة الكاتبة فعليك أن تستعمل الأمر التالي :
<pre>
معلومات أثر عن هذا الأمر في تنسيق شكل "الآلة الكاتبة"
--------------------------------------------------------------------------------
12 - انسياب
عملية انسياب الخط أو صور أو كائن أخر في لغة ال - HTML تتم كالتالي :
</div>
انسياب الخط إلى اليسار
<div align=left>
<div/>
انسياب الخط إلى الوسط
<div align=center>
<div/> انسياب الخط إلى اليمين<div align=right>
--------------------------------------------------------------------------------
13- حـجـم الخـط
يمكنك في لغة ال - HTML أيضا أن تحدد حجم خط النص التي تكتبه
، فلو أردت كتابة عنوان بحجم معيّّن عليك استعمال الأمر التالي :
</font> "العنوان"< x font size=>
وبدلا من حرف ال-x يمكنك وضع الأحجام من 1 إلى 7 . أن الحجم العادي هو 3 ، أصغر الأحجام هو 1 وأكبرها 7 والجدير بالذكر هنا أنه لا ضمان لحجم النصوص التي تكتب أن تُعرض أيضا في نفس الحجم ، لأن ذلك يتعلق بأسباب مختلفة ، منها حجم شاشة العرض ، تعريف أو درجة وضوح الشاشة ، أوتعيير متصفح الإنترنت .
--------------------------------------------------------------------------------
14 - لون الخـط
يمكنك تحديد لون خط النص التي تكتبه :
<font/> "النص" <"لون النص" font color =>
وبدلا من لون النص يمكنك وضع اللون باللغة إنكليزية كما سبق وذكر . أنظر "تحديد الألوان"
ملاحظة :
يمكنك أن تربط أمرين في أمر واحد مثل حجم ولون الخط :
<font size= 6 color=red>
--------------------------------------------------------------------------------
15 - نوع الخط
نوع الخط أيضا يمكنك تحديده :
< "نوع الخط" font face>
ولكن الخط الذي اخترته يُعرض في متصفح الشبكة الدولية إذا كان الخط نفسه مهيأ مسبقا في المتصفح . وإذا لم يكن مهيئاً في المتصفح فالخط الذي يظهر حسب اللغة هو الخط النظامي
ملاحظة : يجب تجنب الخطوط الغير عادية لأنها لا تظهر بوضوح .
--------------------------------------------------------------------------------
16 - خط أفقي
يمكن إدخال خط أفقي لفصل فقرات النص .
<hr>
وهو مختصر من :
horizontal rule = خط أفقي
--------------------------------------------------------------------------------
17 - خطوط الآلة الكاتبة
يمكنك صياغة نص باللاتينية يكون شكله مثل شكل نصوص الآلة الكاتبة . وفي العادة يظهر الخط "Courier"
لأن جميع العلامات في نفس الطول والعرض .
<pre> "الخط " </pre>
ويمكن في هذا الخط أن يكون تباعد أكبر بين السطور وذلك بعدد الفراغ بين حروف الأمر .
-------------------------------------------------------------------------------
18 - التعداد النقطي والرقمي
يتم التعداد في لغة ال- HTML بالأمر التالي :
<ul>
من اختصارا ل- list unnumbered = (لائحة غير رقمية)
مثال :
<ul>
لائحة رقم 1 <li>
لائحة رقم 2 <li>
<ul/>
النتيجة :
لائحة رقم 1
لائحة رقم 2
--------------------------------------------------------------------------------
19 - إدراج صور
لقد حان الوقت لإدراج صور إلى صفحاتنا في لغة ال- HTML وذلك بالأمر التالي :
img scr = "اسم الصورة"alt ="وصف الصورة" >
وبدلا من أسم الصورة يجب إدخال أسم الصورة مثل "tree.gif" والتي تكون موجودة في نفس دليل صفحة ال- HTML . كما لابد أن تكون الصورة بطراز GIF أو JPG . ويمكن كتابة عنوان صورة موجودة في الإنترنت ، حيث يكون العنوان كاملا مثل :
<
http://www.arab.com/ tree.gif>
وفي مكان وصف الصورة يمكن كتابة وصف قصير للصورة يظهر هذا الوصف عندما ننقر بالفأر على الصورة ( نص مصـدري ) .
--------------------------------------------------------------------------------
20 - حـجـم الصور
يُحـدد طول وعرض الصورة بلغة ال- HTML بالأوامر التالية :
<height =X width=X "أسم الصورة"image scr=>
الطول =height
العرض = width
وبدلا من حرف X يمكن كتابة الحجم المطلوب وهو وحدة البيكسل (Pixel = خلية رسم)
وإذا كُـتب أحد الحـجمين فـقط ، فيأخذ الحجم الثاني حجما متناسبا لأول .
وإذا كُـتب الحـجـمين ، فينتج عنه تقلص وتمدد للصورة وتـفـقـد الصورة أصولية حجمها .
هذه الرسالة تفيد بأنك غير مشترك في صدى الاهات. لتسجيل الرجاء اضغط هنـا 
الإهداءات
دليل لغة Html 
من جديد 
