مقدمة سريعة
من اين احصل على البرنامج ؟
لو كنت تستخدم انترنت اكسبلورر Ineternet Explorer فالإحتمال الاغلب انك تملك البرنامج.. و لو لم تكن متاكد
ان كنت تملكه او لا جرب التالي ..
لفتح برنامج فرونت بيج انتقل إلى Start> Program > Accessories > Internet Tools او Start>
Program > Internet Explorer
إذا كنت تستخدم متصفح انترنت اكسبلورر و لم تجد برنامج فرونت بيج اتبع الخطوات التالية ..انتقل إلى Control
Panel>add remove programs اختر internet explorer ثم add a component> Install
Minimal component>web authoring.
لو اتبعت السابق و لم تجد البرنامج يمكنك تحميله من هنا .
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]مقدمة
اعتقد انك يجب أن تقرأ محتويات هذه الصفحة جيدا حتى تبدأ.. لنتعرف على مقدمة سخيفة و مملة عن تصميم
الصفحات و مع انها مملة ألا انه عليك ان تقرأها .
تصميم صفحات الويب يتم بإستخدام لغة الاتش تي ام الhtml او كما يحلو لكثير من العرب تسميتها الهتمل ..وهي
ليست لغة برمجة بالمعنى المتعارف عليه فلغة البرمجة تعتمد على الإبتكار و الكثير من التفكيير.. هذا ما يجعلنا نحن
المبرمجين مميزين) أما لغة الهتمل . فهي لا تحتاج إلى ابتكار بل حس فني و تنسيق و ترتيب فالأوامر بها ثابته ..
كل ما عليك هو تنسيقها و ترتيبها .. لتظهر للعيان بصورة جميلة. الكتابة أو التصميم في لغة الهتمل لا تحتاج إلى
برامج خاصة لكتابتها ..انت كل ما تحتاجه برنامج هو معالج نصوص عادي مثل مثلا برنامج NOTEPAD الملحق
بالويندوز..
و لكن من يحتاج اليوم لكل هذا .. فاليوم يمكنك ان تبدأ موقعك دون ان تعرف اي مما سبق... فقط صمم و البرنامج
يكتب لك الشفرة.. و انتهى.. لكن ما رايك في تعلم بعض اوسمة الhtml فقط من باب العلم..
ملاحظات هامة
عليك تسمية الصفحة الرئيسية للموقع دائما بأسم Index.htm أو Index.html .
بالنسبة للصور و الملفات عليك الاهتمام بالأسماء فالحروف الصغيرة ليست كالحروف الكبيرة ..فملف page.html
ليس مثل Page.html و ليس مثل pAge.html .
اسماء الصفحات يجب ان تكون بالحروف اللاتينية.
ماذا عليك ان تفعل هذا ما انصحك به.. في جهازك انشأ مجلد جديد اما على قرصك الصلب مباشرة او مثلا داخل مجلد
My Documents و اسمه مثلا web او اي اسم اخر .. و بالتالي سيكون هذا هو المجلد الذي سيحتوي على كل
محتويات موقعك .. الملفات و الصورو غيرها .
و الان هيا لمتابعة الدروس.
الدرس الاول : تعلم بعض شفرات الhtml
افتح اي برنامج لمعالجة النصوص ..مثلا الNotepad الملحق بنظام الوينودوز اختر File > Save As و في
نافذة الحفظ اكتب اسم الملف ملحقا بنقطة و من ثم HTML او HTM لا فرق.
سنحاول تخييل الصفحة كحبة بصلة و سننزع القشور واحدا تلو الآخر ( تشبيه جميل لاه هههههه )
القشرة الأولى
الصفحة تبدأ بـ<html> و تنتهي بـ</html>ـ في النوتباد اكتب هاذين الامرين .حيث الثاني يحتوي على الشرطة
المائلة (/). جيد جدا .
<html>
</html>
القشرة الثانية
بالداخل تنقسم الصفحة إلى قسمين الرأس Head و الجسم Body. محتويات الرأس تبدأب و تنتهيب و الجسم يبدأ بو
بنتهي ب
<html>
<head>
محتويات الرأس هنا
</head>
<body>
محتويات الجسم هنا
</body>
</html>
القشرة الثالثة
محتويات الرأس في الأسفل ما يمكن ان يحتوية الرأس مثلا تعريف بالصفحة( العنوان) و هي العنوان الذي سيظهر
في أعلى شريط المتصفح
<html>
<head>
<title> عنوان الصفحة هنا </title>
</head>
<body>
محتويات الجسم هنا
</body>
</html>
القشرة الرابعة
كل ما سيظهر للعيان في الصفحة سيظهر يجب ان يكتب في الجسم . مثلا :لإضافة الصورة
<img border="0" src="myimage.gif" width="30" height="30">
لإضافة وصلة
<a ****************="interface.htm"> عنوان الوصلة </a>
الدرس الثاني : تعرف على واجهة البرنامج
هناك 3 قوائم اساسية تحتاج التعرف عليها
أولا : شريط الإدوات في الأعلى :
أيقونة جديد لإنشاء ملف جديد
لفتح ملف قمت بحفظه من قبل
للحفظ السريع لملفك
لطباعة الصفحة
على الترتيب من اليسار قص ، نسخ ، لصق
أعد الخطوة السابقة
أرجع الخطوة اللاحقة
إنشاء الجداول
لإضافة خاصية الوصلة التشعيبية على النص
لإدراج صورة في الصفحة
ثانيا : قائمة الإدراج Insert:
هذه القائمة لإدراج المحتويات في الصفحة :
break : فاصل لتقليل المسافة بين كل سطر و آخر يمكن وضعة في نهاية كل سطر .
Horizontal Line : لإدراج خط أفقي في الصفحة
Symbol : إدراج مجموعة من الرموز التي قد تحتاجها مثل رمز حفظ الحقوق
comment : لإدراج الملاحظات و التي تكون مخفية تظهر للمصمم فقط .
Componenet : محتويات من برامج أخرى
Image : إدراج صورة
Vidoe : إدراح ملف فيديو
Background sound :إدراج صوت في الخلفية
File : إدراج ملف صفحة آخر ى داخل هذه الصفحة
Form Feilds : إضافة محتويات الإستمارات مثل الازرة و الحقول .
Marquee : إدراج أشرطة نصوص متحركة.
Html Markup : إدراج شفرة Html
************************ : إدراج شفرة جافا او v************************
Hyperlink : إدراج خاصية الوصلة التشعيبية على النص
ثالثا : قائمة التشكيل Format:
Font : الخط التحكم في نوع الخط .
Paragraph :التحكم في شكل الفقرة .
Bullets and Numbering: ترقيم أو إضافة دوائر او مربع إلى جانب أي قائمة .
Background :شكل الخلفية .
Remove Formatting : إزالة أي تغيير قمت به على الشكل الاصلي للنص او الصورة.
كيف تبدأ ملف جديد
إبدأ مستند جديد ..و ذلك بالذهاب إلى File > New
اختر File >Page Proparties
من الأعلى وفي نفس النافذه اختر Background..
الدرس الثالث : كيف تحفظ الصفحة
من قائمة File اختر save as ..و منها ستظهر نافذة اختر منها save as file...و من ثم تابع بشكل عادي..
حدد المكان الذي تريد تخزين الصفحة فيه مثلا المجلد الذي انشأناه في مجلد my document و اسميناه web
صفحتك الرئيسية دائما اسمها Index.html او index.htm ..و ذلك حتى تظهر اوماتيكيا في موقعك..مثلا لوكان
عنوان موقعك
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] ..عندما يضغط المستخدم على هذا العنوان سينتقل مباشرة
للصفحة الرئيسية و هي index.html او index.htm ...
لنفترض ان صفحتك مقسمة كالتالي..
من أنا
عائلتي
جيراني
خطر
تريد للزائر عندما يضغط على من انا؟ ينتقل إلى صفحة من أنا..
أنشأ ملفا خزنه من قائمة File اختر Save asو خزنه مثلا بأسم me.htm في عنوان الوصلة -ستتعرف على هذا
فيما بعد -ضع me.htm وهكذا..
بالنسبة للصور عليك أيضا بنقلها للمجلد ذاته الذي ستحتفظ فيه بملفاتك ..
الدرس الرابع : إضافة الوصلة التشعيبية
ما هي الوصلة يا ترى؟
ماهي الوصلة أو الوصلة التشعيبية.. هي النص التي عندما يضغط عليها الزائر.. تنقله إلى صفحة أخرى أو مكان
آخر...
كيف يمكنني إضافتها ..؟؟
من اسهل الأشياء اللتي تستطيع القيام بها في هذا البرنامج هو إضافة الوصلات ...
مثلا أنت تريد إضافة وصلة لموقع الشبكة في موقعك ..إبدأ كما يلي إكتب في الصفحة شبكة بيسان .. ظلل الكتابة عن
طريق المرور عليها بالفأرة و الضغط على زر الفأرة .. ثم من شريط الأدوات في الأعلى إذهب إلى و ستظهر لك
النافذة التالية :
Hyperlink Type http
نوع الوصلة
URL: http
عنوان الوصلة
Target Frame
خصائص
هناك أربع أنواع من الوصلات..:
وصلة لموقع على الشبكة::إذا كنت مثلا تريد أن تصل لموقع الشبكة اختر نوع الوصلة http و اكتب العنوان في
المربع التالي ..
وصلة لصفحة في موقعك أنت ::مثلا إذا كنت تريد أن تصل لصفحة أخرى في موقعك فلنتخيل أن اسم الصفحة الأخرى
في موقعك arabic.htm من نوع الوصلة اختر Other و اكتب في العنوان arabic.htm ويجب ان تتأكد أن
عنوان الوصلة اللذي كتبته مطابق لإسم الصفحة اللتي تريدها إذا كان اسم الموقع بالحروف الكبيرة فيجب أن تكتبه
بالحروف الكبيرة و العكس..
وصلة لبرامج أو ملف صوتي مثلا:: الأمر هنا بسيط ..مثلا الملف الصوتي عنوانه عنوانها love.mid..اكتب في
عنوان الوصلة love.mid.. و النوع other...و بنفس الطريقة البرامج.
وصلة لمكان في نفس الصفحة::اضغط هنا
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] و ستجد
نفسك الاعلى . هذا ما يسمى بالبوك مارك ..أولا ظلل المكان اللذي تريد لوصلتك أن تذهب إليه..اختر
edit>bookmark ثم اختر أي اسم للوصلة مثلا top أو اي شئ يمثلها ..و الآن اذهب للوصلة نفسها اي اللتي
تريد للزائر أن يضغط عليها.. ظلل و اضغط زر الوصلة كما في كل المراحل السابقة و اختر نوع الوصلة Other و
في عنوان الوصلة اكتب علامة ******** و من ثم الاسم اللذي اخترته في البداية لها..بسيطة اليست كذلك.
ما هي خصائص الوصلة؟؟
ليس عليك أن تضع اي شئ هنا إلا إذا احببت .. إذا لم تضع في هذا المكان شئ.. فسوف..تفتح الوصلة الجديدة في
نفس النافذة.
ضع هذه العلامة _ و اتبعها بـــ
blank :إذا اردت للصفحة الجديدة أن تظهر في نافذة جديدة.
Top :إذا كنت تستخدم الإطارات و اردت للصفحة أن تفتح في نفس النافذة و لكن كصفحة كاملة و ليس في الإطار.
إذا كنت تستخدم الإطرات ضع اسم الأطار الذي تريد للصفحة ان تفتح فيه.
الدرس الخامس : إضافة الصور
ضع الفأرة في المكان الذي تريد أن تضع الصورة فيه...اضغط عى الايقونة التالية من شريط الادوات ستظهر النافذة
التالية :
from File يعني صورة من ملف في جهازك
********************************
موضوع: درس خفيف في ال html والفرونت بيج 
الجمعة مايو 22, 2009 5:45 pm
