المصطلحات الهامة في لغة HTML

من طرف manal kamal الثلاثاء فبراير 09, 2010 2:10 pm

المصطلحات الهامة في لغة HTML :
مصطلح URL : وهذا المصطلح هام جدا فعن طريقة نستطيع تحديد مكان صفحة والربط بينها وبين صفحة أخرى او نستطيع تحديد ملف والربط بينة وبين الصفحة او الربط بين صفحة والموقع وهكذا اي بدون هذا المصطلح تفقد لغة html وظيفتها يعتبر مسار وهو مايسمى URL ومثلا [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] يعتبر عنوان لموقع وهو في نفس الوقت URL .
ما هي الادوات اللازمة لإنشاء صفحة على الانترنت؟
1- محرر نص مثل word bad or not bad .
2- متصفح إنترنت مثل internet explorer or netscape.
3- مودم أو فاكس أتـصال لانة بدون الفاكس لن نستطيع الاشتراك في الانترنت وبذلك لن نستطيع إدخال الصفحة.
كيف نقوم بإنشاء صفحة على الانترنت؟
1- اولا نقوم بفتح محرر نصوص وهو إما word bad or not bad لكتابة الاكواد فية ومن المعروف ان محررات النصوص تحفظ الملفات بإمتداد txt ولذلك عند كتابة الاكواد نقوم بحفظ الملف بإمتداد htm عن طريق الاتي:
الذهاب الى قائمة file ثم إختيار save as
سيظهر لنا مربع حوار نقوم بكتابة أسم الملف فية ولنفرض ان نسمية الاتي
My frist page.htm ونلاحظ هنا وضع الامتداد htm بعد كتابة الاسم
وهذا حتي يمكننا عند فتح الملف فتحة على متصفح للانترنت لانها تتعامل مع الامتداد htm .
2- ثانيا نقوم بكتابة الاكواد والكود الذي يكتب في محرر النصوص يكون لة قاعدة اساسية تكتب في جميع الصفحات وهي كالاتي:
<html>
<head>
<title>my home page</title>
</head>
<body>
My home page
</body>
</html>
نلاحظ هنا بداية الصفحة بـــ <html> ونهايتها بــ</html>
وياتي بعد الامر <html> الامر <head> وينتهي أيضا بـ</head>
والاوامر التي تكتب بين هذا الامر تكون متعلقة بــ title bar وهو الشريط الازرق بأعلي الصفحة ففى المثال السابق تم كتابة my home page وعند حفظ هذة الصفحة بالطريقة السابق ذكرها وفتحها ثاني سنلاحظ ظهور جملة my home page في الركن الايسر من الشريط الازرق باعلى الصفحة وهو title bar.
ونلاحظ هنا ان كل أمر يوضع بين <> وينتهي بــــ </> وهذة العلامة تسمى tag .
اما الامر <body> </body> فإن كل مابكتب بينة يظهر في جسم الصفحة اي يظهر في الصفحة نفسها فند تطبيقك المثال السابق سوف تلاحظ ظهور كلمة my Home Page في الصفحة نفسها والان سوف نقوم بشرح الاوامر التي تكتب داخل الامر<body> </body> وكل أمر سوف يكون لة مجموعة من الخصائص وهذة الاوامر تكون هي المسئولة عن ظهور الكلمات والصور والاصوات بالطريقة التي نريدها.
الامر <body>
خواص الأمر
Bgcolor
Background
Text
Alink
Vlink
لتغيير لون ارضيةالصفحة BGCOLOR تستخدم خاصية
مثال
<BODY BGCOLOR="RED">
أو
<BODY BGCOLOR="#FF0000">
وكلا الامرين يؤدى لتغيير لون خلفية الصفحةهو FF0000للون الاحمر حيث أن الكود html فى لغة RED المكافىء اللونى للون
لتحديد صورة كخلفية للصفحة BACKGROUND تستخدم خاصية
مثال:
أكتب بيديك الامر التالى ولاحظ النتيجة
<BODY BACKGROUND="graphics/uni.jpg">
مع ملاحظة ان المسار بعد العلامة = يتغير حسب مكان الصورة على الجهاز
لتحديد اللون العام للنص المكتوب TEXTتستخدم خاصيةلتحديد لون كلمات الربط النشطة ALINKتستخدم خاصيةلتحديد لون كلمات الربط غير النشطةVLINK:تستخدم خاصية
Font الامر
الخواص
Size
Color
face
لتحديد مقاس النص بدايةًمن1 وحتى 7 SIZE تستخدم خاصيةلتحديد لون النص فى الصفحة COLOR تستخدم خاصية
لتحديد شكل الخط مثل خطوط ـ FACE خاصيةتستخدم
ARIAL, COURIER, ANDALUS ,kofi ,....إلخ
هى على سبيل التمثيل
<FONT SIZE=3 COLOR= RED FACE="kofi">
<HR> الامر
الخواص:
Width
Align
Size
noshade
لتحديد عرض الخط مقارنةً بعرض WIDTH تستخدم خاصية
الصفحة الكلىلتحديد محاذاة الخط الافقي ALIGN تستخدم خاصيةبالنسبة للصفحةلتحديد سمك الخط بالمليمترات SIZE تستخدم خاصية لجعل لون الخط داكناNOSHADE تستخدم خاصية
مثال
قم بكتابة الامر التالى ولاحظناتج التنفيذ
< HR WIDTH=50% ALIGN=CENTER>
الامر<B> </B>
يستخدم هذا الامر لجعل النص يظهر بخط سميك
مثال:
<B>my best site</B>
الامر<I>
italicيستخدملإظهار حروف الكلمة بشكل مائل
<I> النص </I> : الصيغة العامة
الامر<br>
يستخدم لعمل سطر خالى خلال سطور النص
<BR>النص </BR> : الصيغة العامة
العنصر<center>
يستخدم لتوسيط أى عنصر فى الصفحة
سواء كان جدول أونص أوصورة أو غيره ــ الصيغة العامة
<CENTER> النص </CENTER>
الامر<H1>
يستخدم لعمل العناوين الرئيسية للصفحة
وذلك بتكبير كلمة العنوان
<H1> النص </H1> : الصيغة العامةحيث الرقم التالى للأمريتراوح من 1إلى 7حسب نسبة التكبيروكلما زاد الرقم
كلما قل حجم الخطالمطلوبة للعنوان
<div>
الخواص
<DIV ALIGN=RIGHT> لجعل محاذاة الفقرة الى اليمين<DIV ALIGN=LEFT>
محاذاة الفقرة الى اليسار<DIV ALIGN=CENTER>
محاذاة الفقرة الى المنتصف
الامر<p>
يستخدم هذا الامر لتقسيم النص الى فقرات
الامر<SUP>
يستخدم هذا الامر لجعل النص يظهر ببنط صغير فوق النص المكتوب
مثل الاس في المعادلات الرياضية
الصيغة العامة </SUP> النص <SUP>
الامر <SUB>
يستخدم لجعل النص يظهر ببنط صغير
أسفل الكلمة أوالرقممثل الأسس فى المعادلات الرياضيةالصيغة العامة
<SUB> النص</SUB>
الامر<marquee>
يستخدم لجعل النص يتحرك على الشاشة فى مساحةمحددةالصيغة العامة
<MARQUEE> النص</MARQUEE>
الامر<Meta>
يستخدم لتقديم معلومات عن المستند ومحتواه تفيدلفهرسة هذا المستند على الشبكة وتسهيلالتعرف عليه وفهم محتواه عند البحث عنهالصيغة العامة
>وصف الصفحة ومحتوياتها<meta name=
خواص الامر
Keywords
Description
Generator
Auther
Copyright
Expire
<META NAME="KEYWORDS"
"توضع كلمات مفتاحية ومصطلحات من واقع موضوعالصفحة يفصل بينها بفاصلة< "
<META NAME=" DESCRIPTION" يوضع وصف موضوعى مختصر لموضوع الوثيقة< "
<META NAME="GENERATOR"
يكتب إسم اللغةأو البرنامج المستخدم فى تحرير الوثيقة< "
<META NAME="AUTHOR"
يكتب إسم مصممالوثيقة المعروضة< "
<META NAME="COPY RIGHT"
تكتب حقوق التأليف والنشر والنسخ ـ ـ ـ< "
<META NAME="EXPIRE" يكتب التاريخ الذىبمقتضاه يتم إستبعاد الوثيقةمن أرشيف البحث على الشبكة لتقادمها< "
الامر<Img>
خواص الامر
Src
Align
Width
Height
Vspace
Hspace
Alt
Border
تفيد خاصية src في تحديد مكان الصورة مثل<img src="c:\windows\mo'men.gif">
تستخدم خاصيةALIGN لضبط موقع الصورة بالنسبةللصفحةمثل:
<img src="c:\windows\mo'men.gif" align=center>
تستخدمخاصيةWIDTHلتحديد عرض الصورة
<img src="c:\windows\mo'men.gif" align=center width=230>
تستخدم خاصيةHEIGHTلتحديد ارتفاع الصورة مثل
<img src="c:\windows\mo'men.gif" align=center width=230 height=100>
لتحديد البعد الرأسى للصورة بالنسبة للصفحةتستخدم خاصيةVSPACE
<img src="c:\windows\mo'men.gif" align=center width=230 height=100 vspace=200>
لتحديد البعد الأفقى للصورةبالنسبةللصفحةتستخدم خاصية HSPACE
<img src="c:\windows\mo'men.gif" align=center width=230 height=100 vspace=200 hspace=400>
لوضع تعليق على الصورة يظهر
عندالإشارة إليها بالماوس تستخدم خاصيةALT
<img src="c:\windows\mo'men.gif" align=center width=230 height=100 vspace=200 alt="my picture">
تستخدمخاصية BORDERلعمل إطار حول الصورة
<img src="c:\windows\mo'men.gif" align=center width=230 height=100 vspace=200 alt="my picture" border=2>
الامر<EMBEDO>
يستخدم هذا الامر لإضافة ملف صوت الى الصفحة بإمتداد wav ; mp3
مثال :<EMBED SRC="glide.wav" CONTROLS=CONSOLE AUTOSTART=TRUE LOOP=11 VOLUME=15 WIDTH=35 HEIGHT=32>
شرح الامر السابق
Src وهي لتحديد مكان الصوت على الجهاز
Controls
تستخدم للتخيير ما بين عرض مفتاح للتحكم فى عرض الصوت أو عدم عرضه
CONTROLS=CONSOLEففى حالة سيتم عرض مفتاح للتحكم فى الصوت
CONTROLS=NONEأما فى حالة لن يعرض مفتاح للتحكم فى الصوت: AUTOSTARTخاصيةتستخدم للتخيير ما بين عرض ملف الصوت تلقائياً مع بداية ظهور الصفحة أو عدم عرضه
AUTOSTART=TRUEففى حالة سيتم عرض الصوت فور إنتهاء تحميل الصفحة
AUTOSTART=FALSEأما فى حالة لن يعرض الصوت فور إنتهاء تحميل الصفحة: LOOPخاصيةتستخدم لتحديد عدد مرات عرض ملف الصوت واذا اردنا عرض ملف الصوت بشكل لا نهائينقوم بجعل
Loop= -1
Menu
orderd list "ol" المرتبةالقوائمتستخدم لعمل ترتيب أو ترقيم لعناصر القائمة
<OL></OL> :الصيغة العامةمثال:<OL TYPE=A START=2>
<LI> عنصر القائمة الاول
<LI> عنصر القائمة الثانى
</OL>
السطر الأول قائمة مرتبة ترتيب حرفى ـ حيث هناك عدة أنواع :من الترتيب وهىالرقمى : وفيه تستخدم الارقام الصحيحة لترتيب العناصرـ الترتيب(1,2,3,4,..............)
الحروف الابجدية لترتيب العناصرـ الترتيب الحرفى : وفيه تستخدم(A,B,C,D..............)أو(a,b,c,d..............)
الرموز اللاتينية لترتيب العناصرـ الترتيب الرمزى : وفيه تستخدم(i,iii,iv,v,..............)
: خاصيتي نوفى السطر الاول نجد أيضاًوتستخدم لتحديد نوع الترقيم بتحديد أول حرف فيهTYPEخاصيةوتستخدملتحديد أول رقم أو حرف سيبدأ به STARTخاصية الترقيم وهو فى هذا المثال الحرفB
السطر الثانى القائمة وكذلك الامر بالنسبة للسطر الثالثيستخدم لعمل أول عنصر فى الاخيرالسطرنهاية القائمةunorderd list "ul" القوائم غير المرتبةالسابق ولكن بإستخدام علامات نقطية بدلاً من الترقيمترتب العناصر بنفس الشكل مثال
<MENU>
<LI> عنصر القائمة الاول
<LI> عنصرالقائمة الثانى
</MENU>
definition list قوائم التعريفاتشكل عنصر وتعريفهتستخدم لترتيب عناصر النص فى مثال
<DL>
<DT>
المصطلح أو العنصر الاول
<DD>
تعريفه
<DT>
المصطلح أو العنصر الثانى
<DD>
تعريفه
</DL>
Link
الامرlink يستخدم للربط بين النصوص والصفحات مما يتيح التفرعوالتشعب داخل الشبكةالصيغة العامة></a>"اسم او مسار الملف"<a href=link to fileالربط من ملف لآخر فى نفس نطاق موقعه على الشبكة وفيها يتم الربط بين مستند وآخر
مثال :
<A HREF="c_text.html"> كلمة ربط </A> ومن الممكن أيضاً الربط إلى صورة
مثال:
<A HREF="graphics/center.jpg"> كلمة ربط </A> الربط من ملف لنفسة في هذا النوع يتم الربط بين كلمة في بداية الصفحة وكلمة أخرى في نهاية الصفحة
أولاً ـ ضع الكلمة الواردة فى بداية الصفحة داخل أمر الربط :بالشكل الآتى
<A HREF="#X">الكلمة ></A>: حيث: X
أى مسمى إختيارى يمكن إختياره للدلالة على الربط: #
علامة ثابتة يجب وضعها بجوار مسمى الربط للدلالة على الربط الداخلى
ثانياًـ ضع الامر التالى فى سطر خالى يسبق مباشرةً الكلمة المراد الربط إليها
<A NAME="X"> </A>الربط لموقع على الشبكة وهو للربط بين مستند في موقع معين بموقع أخر على الشبكة: الصيغة العامة
</a>كلمة<A HREF=http://www.compunet4arab.com>
مع مراعاة تغيير العنوان.www.compunet4arab.com الى العنوان المطلوب
الرابطة البريدية mailto
تتم بالربط الى عنوان بريدى وكنتيجة لعمل هذه الرابطة يقوم برنامج التصفح بفنح نافذة خاصةبتحرير الرسائل البريدية الالكترونية: الصيغة العامة
</A>كلمة<A HREF="mailto:mail@mail.net">
مع مراعاة تغيير العنوان
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] الي العنوان المطلوب