‫بدأ بسم الله ‪‬‬

‫هي لغة مستخدمة في انشاء صفحات الويب على شبكة‪ HTML :‬ما معنى *‬
‫‪ Tags‬المعلومات او االنترنت وهي مكونة من اوامر‬

‫او لغة ترميز النصوص التشعبية ‪ Hyper Text Markup Language‬وتعني‬

‫مميزات اللغة ‪-:‬هي لغة بسيطة وسهلة غير مرتبطة بنظام تشغيل ‪* ،‬‬
‫تستطيع استخدامها على لينوكس او ويندوز او ماك او اي نظام تشغيل في‬
‫العالم‬

‫ال يوجد قيود بهذه اللغة ألنها بسيطة‪-‬‬

‫تستطيع ادراج صور ونصوص وفيديو‪-‬‬

‫الي صفحة على شبكة االنترنت مما يزيد ‪HTML‬بإمكانك االطالع على كود‪-‬‬
‫من خبرتك بهذه اللغة‬

‫لن تحتاج اال الى محرر نصوص (ايا كان) ‪ ،‬مستعرض لالنترنت مثل فاير *‬
‫فوكس (ايا كان)‬
‫إلستخدامها ‪ Tags‬معرفتك باوامر اللغة ‪،‬‬

‫ال يشترط اتصالك باالنترنت الستخدام اللغة وفتح الصفحات التي ستصممها*‬

‫=========================‬
‫> تكتب بين < االمر ‪ Tags:‬األوامر‬
‫يوجد نوعين من األوامر‬
‫‪ /‬لها فتح فقط < االمر > وال تغلق عن طريق وضع ‪1- Empty Tags:‬‬
‫لها فتح <االمر > وغلق‪ ،‬الغلق يكون بوضع ‪ /‬حتى يكون ‪2- Container Tags:‬‬
‫>‪/‬شكل االمر هكذا <االمر‬

‫‪ Attributes‬معظم اوامر هذه اللغة لها خصائص تسمى*‬

‫كيف نضيف الخصائص لألوامر؟؟ *‬

‫نقوم بوضع اسم الخاصية بعد االمر داخل < > ونفصل بينهما بمسافة ثم‬
‫نكتب = ثم قيمة الخاصية بين عالمتي تنصيص " " فتكون كالشكل التالي‬
‫‪:‬من اليسار الى اليمين‬
‫>قيمة الخاصية"=الخاصية االمر"<‬
 ‫==========================‬
‫‪***:‬مالحظات مهمة***‬
‫هذه اللغة ليست حساسة لألحرف لذلك نستطيع الكتابة فيها بأحرف ‪1-‬‬
‫‪ Small‬أو ‪Capital‬‬
‫بحرية‬
‫يمكنك ترك اي عدد من المسافات فسيتم التعامل معها على انها مسافة‪2-‬‬
‫واحدة‬

‫============================‬

‫يحتوي على جزئين هما ‪ HTML‬ملف‬

‫‪Head - 1‬‬
‫ويحتوي على معلومات خاصة بالصفحة مثل العنوان وبعض المور الخاصة‬
‫بالصفحة‬
‫‪Body - 2‬‬
‫ويحتوي على المحتوى الذي سيراه المستخدم‬
‫===================‬

‫في بداية الصفحة >‪<HTML‬لنبدأ تصميم اي صفحة البد من كتابة االمر‬

‫>‪ <HTML/‬وانهائها باألمر >‪ <body‬و >‪ <head‬وتقسيمها الى‬
‫فتكون على الشكل‬
‫>‪<html‬‬

‫>‪<head‬‬

‫‪............‬‬
‫>‪<head/‬‬

‫>‪<body‬‬

‫‪...........‬‬
‫>‪<body/‬‬
 ‫>‪<html/‬‬
‫================‬
‫‪ .html‬تحفظ الملفات بصيغة‬

‫الدرس انتهى‬
‫للدرس بقية باذن الله‬

‫انصح المبتدئين باالطالع على الموقع التالي‬

‫‪Introduction to HTML‬‬
‫في رعاية الله‬

‫رد مع اقتباس‬

‫األعضاء التالية أسماءهم وعددهم ‪ 23‬يشكرون ‪‬‬

‫‪:‬على هذه المشاركة القيمة ‪Comet‬‬
‫آالء محمد‪ ,‬مجالد السبيعي‪ ,‬محمد مجدي‪ ,‬محمد أسامة‪ ,‬محمد ‪7L!nux,‬‬
‫الجميعابي‪ ,‬محمد شعبان‪ ,‬محمد هاني صباغ‪ ,‬مصعب الزعبي‪ ,‬مؤمن عبد‬
‫‪, falcon 87, lord-zk, MinaSoft, Mohamed Nasser,‬القادر‪ ,‬ابوسراج عمر‬
‫سمير الجعبة‪ ,‬سمير رشيد‪ ,‬علي بن محمد بن ‪Mustafa Refaey, noor,‬‬
‫عبدالله‪ ,‬فتحي القدسي‪ ,‬هشام زيتون‪ ,‬نورالدين المغربي‬
‫‪ 08-01-2010, 11:29 PM #2‬‬
‫‪Comet‬‬

‫لينكساوي‬
‫التوزيعة‬
‫‪Kubuntu 11.04‬‬
‫واجهة النظام‬
‫‪KDE‬‬
‫محل اإلقامة‬
 ‫مصر‬

‫تاريخ التسجيل‬
‫‪Dec 2009‬‬
‫المشاركات‬
‫‪26‬‬
‫شكرًا‬
‫‪68‬‬
‫ُش كر ‪ 62‬مرة في ‪ 15‬موضوع‬

‫الدرس الثاني ‪ html‬تعلم‬

‫السالم عليكم ورحمة الله وبركاته‬
‫‪ HTML‬اخواني سوف نكمل االن بإذن الله الدرس تعلم‬
‫بسم الله‬
‫‪ HEAD‬خاصة بمنطقة ‪ Tags‬األوامر *‬
‫امر العنوان >‪ <title> </title‬االمر ‪1-‬‬
‫امر العنوان هو االمر الذي ستحدد به عنوان الصفحة الذي سيظهر في‬
‫شريط العنوان بالمتصفح‬

‫مثال*‬
‫‪ PHP:‬كود‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪<title‬‬
‫‪I Love Linux‬‬
‫>‪<title/‬‬
‫>‪<head/‬‬
‫>‪<html/‬‬
‫‪ BODY :‬الخاصة بمنطقة ‪ TAGS‬األوامر *‬
‫لعناوين الفقرات ‪ Heading‬االمر ‪1-‬‬
‫والثالث االصغر قليال ‪ h2‬والثاني االصغر قليال ‪ h1‬له‪ 6‬احجام االول الكبير هو‬
‫‪ h6‬وهكذا حتى ‪ h3‬من الثاني هو‬
‫‪ PHP:‬كود‬
‫>‪<html‬‬
‫>‪<body‬‬
‫>‪<h1>I Love Linux</h1‬‬
‫>‪<h2>I Love Linux</h2‬‬
‫>‪<h3>I Love Linux</h3‬‬
 ‫>‪<h4>I Love Linux</h4‬‬
‫>‪<h5>I Love Linux</h5‬‬
‫>‪<h6>I Love Linux</h6‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫‪ :‬الفقرات ‪ paragraph‬االمر ‪2-‬‬
‫>‪<P> </P‬‬
‫يستخدم لكتابة فقرات في صفحة الويب‬
‫مثال‬
‫‪ PHP:‬كود‬
‫>‪<html‬‬
‫>‪<body‬‬
‫>‪<p‬‬
‫‪This is my first paragraph‬‬
‫>‪</p‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫المحاذاة في الفقرة تكون جهة اليسار اوتوماتيكيا لضبطها نستخدم الخاصية‬
‫‪align‬‬

‫>‪<P align=Right‬‬

‫>‪<P align=Center‬‬

‫>‪<P align=left‬‬

‫‪line break‬لترك سطر فارغ بين الفقرات او ‪3-‬‬

‫>‪ <br‬نستخدم االمر‬

‫ركزوا معي الن الجزء القادم مهم‬

‫‪ <font></font>:‬امر تنسيق النصوص ‪4-‬‬

‫له عدة خصائص منها‬
‫‪ size:‬حجم الخط *‬
‫تستخدم لتغيير حجم الخط وتاخذ قيما من‪ 1‬الى‪ 7‬حيث ‪ 1‬هو الصغير و‪ 7‬هي‬
‫اكبر قيمة‬
‫‪ size‬ودائما تكون قيمة حجم الخط ‪3‬مالم تقم بتغييره باستخدام الخاصية‬
‫مثال‬
‫‪ PHP:‬كود‬
 ‫>‪<html‬‬
‫>‪<body‬‬
‫>‪<p‬‬
‫>‪<font size=7>This is my first paragraph</Font‬‬
‫>‪</p‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫لتحديد نوع الخط ‪ face‬الخاصية *‬
‫= تضع نوع الخط الذي تريده بعد عالمة‪،‬‬
‫مثال‬
‫‪ PHP:‬كود‬
‫>‪<html‬‬
‫>‪<body‬‬
‫>‪<p‬‬
‫>‪<font face=andalus>This is my first paragraph</Font‬‬
‫>‪</p‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫لتحديد لون الخط ‪ color‬الخاصية*‬
‫= تضع اللون الذي تريده بعد عالمة‬
‫مثال‬
‫‪ PHP:‬كود‬
‫>‪<html‬‬
‫>‪<body‬‬
‫>‪<p‬‬
‫>‪<font color=red>This is my first paragraph</Font‬‬
‫>‪</p‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫‪ bold‬لجعل النص عريض >‪<b/‬ضع هنا ما تريد كتابته >‪ <b‬امر ‪5-‬‬

‫‪ italic‬لجعل النص مائل >‪<i/‬ضع هنا ما تريد كتابته >‪ <i‬امر ‪6-‬‬

‫لوضع خط تحت النص >‪<u/‬ضع هنا ما تريد كتابته >‪ <u‬امر ‪7-‬‬

‫انتهى الدرس الثاني بحمد لله‬

‫في رعاية الله‬

‫رد مع اقتباس‬
‫األعضاء التالية أسماءهم وعددهم ‪ 10‬يشكرون ‪‬‬
‫‪:‬على هذه المشاركة القيمة ‪Comet‬‬
‫‪,‬مجالد السبيعي‪ ,‬محمد شعبان‪ ,‬مصعب الزعبي‪ ,‬مؤمن عبد القادر ‪7L!nux,‬‬
‫هشام زيتون‪ ,‬نورالدين المغربي ‪MinaSoft, Mohamed Nasser, noor,‬‬
‫‪ 09-01-2010, 01:41 PM #3‬‬
‫‪Mohamed Nasser‬‬

‫لينكساوي‬
‫التوزيعة‬
‫‪Ubuntu 12.04‬‬
‫واجهة النظام‬
‫‪GNOME‬‬
‫محل اإلقامة‬
‫مصر‬

‫تاريخ التسجيل‬
‫‪Dec 2008‬‬
‫المشاركات‬
‫‪530‬‬
‫شكرًا‬
‫‪379‬‬
‫ُش كر ‪ 645‬مرة في ‪ 219‬موضوع‬

‫‪ bold‬لجعل النص عريض >‪<b/‬ضع هنا ما تريد كتابته >‪ <b‬امر ‪-‬‬

‫‪ italic‬لجعل النص مائل >‪<i/‬ضع هنا ما تريد كتابته >‪ <i‬امر ‪6-‬‬

‫لوضع خط تحت النص >‪<u/‬ضع هنا ما تريد كتابته >‪ <u‬امر ‪7-‬‬
‫لجعل النص مشطوب >‪ <s/‬ضع هنا ما تريد كتابته >‪ <s‬امر ‪8-‬‬
‫‪My Web Design Portfolio | Simplicity is the ultimate sophistication -‬‬
‫‪Leonardo da Vinci‬‬
‫رد مع اقتباس‬

‫األعضاء التالية أسماءهم وعددهم ‪ 7‬يشكرون ‪‬‬

‫‪:‬على هذه المشاركة القيمة ‪Mohamed Nasser‬‬
‫فتحي ‪, Comet, noor,‬مجالد السبيعي‪ ,‬محمد شعبان‪ ,‬مصعب الزعبي‬
‫القدسي‪ ,‬هشام زيتون‬
‫‪ 09-01-2010, 03:45 PM #4‬‬
‫مصعب الزعبي‬

‫‪ :.‬مراقب عام ‪.:‬‬

‫التوزيعة‬
‫أعجوبة ‪35‬‬
‫واجهة النظام‬
‫‪GNOME‬‬
‫محل اإلقامة‬
‫سورية‬

‫تاريخ التسجيل‬
‫‪Apr 2008‬‬
‫المشاركات‬
‫‪5,861‬‬
‫شكرًا‬
‫‪5,974‬‬
‫ُش كر ‪ 12,485‬مرة في ‪ 3,517‬موضوع‬
‫مقاالت المدونة‬
‫‪8‬‬
 ‫بسم الله الرحمن الرحيم‬

‫وهي مضمنة منذ االصدار الرابع ‪ html‬ال ننسى الماركوي أجمل تعليمات ال‬
‫‪ ،‬منها‬
‫اَل َتْح َس َبَّن اَّلِذيَن َيْف َر ُح وَن ِبَم ا َأَتوا َّو ُيِح ُّبوَن َأن ُيْح َم ُدوا ِبَم ا َلْم (‬
‫َأ‬
‫)َيْف َع ُلوا َف اَل َتْح َس َبَّنُه م ِبَم َف اَز ٍة ِّمَن اْلَع َذاِب َو َلُهْم َعَذاٌب ِليٌم‬
‫آل عمران ‪188‬‬
‫‪ :‬قال رسول الله صلى الله عليه و سلم‬
‫}ال يشكر الله من ال يشكر الناس{‬
‫}من كان يؤمن بالله واليوم اآلخر‪،‬فليقل خيرًا أو ليصمت{‬
‫جميع المساهمات الحاملة لهذا التوقيع تخضع لرخصة وقف‬
‫أسأل الله العظيم رب العرش العظيم أن يحسن من حال أمتي‬
‫رد مع اقتباس‬

‫األعضاء التالية أسماءهم وعددهم ‪ 3‬يشكرون ‪‬‬

‫‪:‬مصعب الزعبي على هذه المشاركة القيمة‬
‫‪, noor‬مجالد السبيعي‪ ,‬محمد شعبان‬
‫‪ 09-01-2010, 04:12 PM #5‬‬
‫‪Comet‬‬

‫لينكساوي‬
‫التوزيعة‬
‫‪Kubuntu 11.04‬‬
‫واجهة النظام‬
‫‪KDE‬‬
‫محل اإلقامة‬
‫مصر‬

‫تاريخ التسجيل‬
‫‪Dec 2009‬‬
‫المشاركات‬
‫‪26‬‬
‫شكرًا‬
‫‪68‬‬
 ‫ُش كر ‪ 62‬مرة في ‪ 15‬موضوع‬

‫لجعل النص مشطوب >‪ <s/‬ضع هنا ما تريد كتابته >‪ <s‬امر ‪8-‬‬
‫علي اضافتك واتمنى من كل من لديه اضافة على‪boy90‬اشكرك اخي‬
‫الموضوع اال يتردد في وضعها حتى تكون االستفادة عامة‬
‫وهي مضمنة منذ االصدار الرابع ‪ html‬ال ننسى الماركوي أجمل تعليمات ال‬
‫‪ ،‬منها‬
‫او النص المتحرك ‪،‬سأتطرق له ان ‪ marquee‬أخي مصعب اظن انك تقصد‬
‫شاء الله في الدرس القادم‬
‫رد مع اقتباس‬

‫األعضاء التالية أسماءهم وعددهم ‪ 3‬يشكرون ‪‬‬

‫‪:‬على هذه المشاركة القيمة ‪Comet‬‬
‫‪, Mohamed Nasser, noor‬مجالد السبيعي‬
‫‪ 09-01-2010, 04:20 PM #6‬‬
‫مصعب الزعبي‬

‫‪ :.‬مراقب عام ‪.:‬‬

‫التوزيعة‬
‫أعجوبة ‪35‬‬
‫واجهة النظام‬
‫‪GNOME‬‬
‫محل اإلقامة‬
‫سورية‬

‫تاريخ التسجيل‬
‫‪Apr 2008‬‬
‫المشاركات‬
 ‫‪5,861‬‬
‫شكرًا‬
‫‪5,974‬‬
‫ُش كر ‪ 12,485‬مرة في ‪ 3,517‬موضوع‬
‫مقاالت المدونة‬
‫‪8‬‬

‫بسم الله الرحمن الرحيم‬

‫‪ ،‬بالضبط هذا ما قصدته‬

‫جامدة ومهترئة ما لم نضيف لها اللمسات الجمالية ‪ html‬فكا تعلم تعليمات‬
‫‪ ،‬مثل ماركوي‬
‫اَل َتْح َس َبَّن اَّلِذيَن َيْف َر ُح وَن ِبَم ا َأَتوا َّو ُيِح ُّبوَن َأن ُيْح َم ُدوا ِبَم ا َلْم (‬
‫َأ‬
‫)َيْف َع ُلوا َف اَل َتْح َس َبَّنُه م ِبَم َف اَز ٍة ِّمَن اْلَع َذاِب َو َلُهْم َعَذاٌب ِليٌم‬
‫آل عمران ‪188‬‬
‫‪ :‬قال رسول الله صلى الله عليه و سلم‬
‫}ال يشكر الله من ال يشكر الناس{‬
‫}من كان يؤمن بالله واليوم اآلخر‪،‬فليقل خيرًا أو ليصمت{‬
‫جميع المساهمات الحاملة لهذا التوقيع تخضع لرخصة وقف‬
‫أسأل الله العظيم رب العرش العظيم أن يحسن من حال أمتي‬
‫رد مع اقتباس‬

‫األعضاء التالية أسماءهم وعددهم ‪ 3‬يشكرون ‪‬‬

‫‪:‬مصعب الزعبي على هذه المشاركة القيمة‬
‫‪, Comet, noor‬مجالد السبيعي‬
‫‪ 09-01-2010, 06:00 PM #7‬‬
‫‪Mohamed Nasser‬‬

‫لينكساوي‬
‫التوزيعة‬
 ‫‪Ubuntu 12.04‬‬
‫واجهة النظام‬
‫‪GNOME‬‬
‫محل اإلقامة‬
‫مصر‬

‫تاريخ التسجيل‬
‫‪Dec 2008‬‬
‫المشاركات‬
‫‪530‬‬
‫شكرًا‬
‫‪379‬‬
‫ُش كر ‪ 645‬مرة في ‪ 219‬موضوع‬

‫لجعل النص اعلى من >‪ <sup/‬ضع هنا ما تريد كتابته >‪ <sup‬امر‬
‫السطر‬
‫لجعل النص منخفض عن >‪ <sub/‬ضع هنا ما تريد كتابته >‪ <sub‬امر‬
‫السطر‬
‫أقتباس >‪<blockquote/‬ضع هنا ما تريد كتابته >‪ <blockquote‬امر‬
‫أقتباس بين عالمتين تنصيص >‪<q/‬ضع هنا ما تريد كتابته >‪ <q‬امر‬
‫ألستخدام التنسيق السابق >‪<pre‬‬
‫‪My Web Design Portfolio | Simplicity is the ultimate sophistication -‬‬
‫‪Leonardo da Vinci‬‬
‫رد مع اقتباس‬

‫األعضاء التالية أسماءهم وعددهم ‪ 4‬يشكرون ‪‬‬

‫‪:‬على هذه المشاركة القيمة ‪Mohamed Nasser‬‬
‫‪, Comet, noor‬مجالد السبيعي‪ ,‬محمد شعبان‬
‫‪ 10-01-2010, 02:32 AM #8‬‬
‫‪noor‬‬

‫لينكساوي‬
 ‫التوزيعة‬
‫‪PCLinux‬‬
‫واجهة النظام‬
‫‪KDE‬‬
‫محل اإلقامة‬
‫العراق‬

‫تاريخ التسجيل‬
‫‪Mar 2008‬‬
‫المشاركات‬
‫‪651‬‬
‫شكرًا‬
‫‪1,082‬‬
‫ُش كر ‪ 277‬مرة في ‪ 103‬موضوع‬

‫الله الله الله‬

‫موضوع روعة‬
‫واصل اخي صاحب الموضوع انت واالخوان فوق ومن لديه اضافة فال يبخل‬
‫بها علينا‬
‫واشوف انه لو تنسقو مع المشرفين لترتيب الشرح ليكون مرجع او دورة‬
‫متكاملة والكمال لله‬
‫‪ .‬انا اول المتابعين وساظل ان شاء الله‬
‫بصراحة لغة جميلة ومفيدة واعجبت بها جدا‬
‫‪ ....................‬متابع ومتعلم لالخير‬
‫تحياتي للجميع‬
‫بغداد والشعراء والصور ‪ ...‬ذهب الزمان وضوعه العطر ‪ ...‬ياالف‬
‫ليلة يامكملة االعراس ‪ ...‬يغسل وجهك القمر‬
‫رد مع اقتباس‬

‫على ‪ noor‬األعضاء التالية أسمائهم يشكرون ‪‬‬

‫‪:‬هذه المشاركة القَيمة‬
‫مجالد السبيعي‬
‫‪ 14-09-2010, 07:10 PM #9‬‬
‫‪Comet‬‬
 ‫لينكساوي‬
‫التوزيعة‬
‫‪Kubuntu 11.04‬‬
‫واجهة النظام‬
‫‪KDE‬‬
‫محل اإلقامة‬
‫مصر‬

‫تاريخ التسجيل‬
‫‪Dec 2009‬‬
‫المشاركات‬
‫‪26‬‬
‫شكرًا‬
‫‪68‬‬
‫ُش كر ‪ 62‬مرة في ‪ 15‬موضوع‬

‫الدرس الثالث واألخير ‪Html‬‬

‫بسم الله الرحمن الرحيم ‪،‬والصالة والسالم على رسول الله‬
‫بعد طول غياب اخواني نعود بإذن الله لنكمل درسنا في لغة‬
‫‪:‬نبدأ بسم الله ‪HTML‬‬
‫بعد ان عرفنا األساسيات وكيف ننسق النصوص سنعرف كيف ننسق‬
‫الصفحة نفسها‬
‫===‬
‫وهو امر مفتوح >‪ <HR‬أوال ‪:‬إضافة خط أفقي لتنظيم الصفحة نستخدم امر *‬
‫ال يوجد امر انهاء له‬

‫من خصائصه‬
‫لتحديد سمك الخط‪1-size :‬‬
‫لتحديد لون الخط‪2-color :‬‬

‫مثال‬
‫‪ PHP:‬كود‬
‫>‪<html‬‬
‫>‪<body‬‬
‫>"‪<hr size ="10" color ="blue‬‬
 ‫>‪</body‬‬
‫>‪</html‬‬
‫============================‬
‫‪ :‬ثانيا ‪:‬عمل خلفية ملونة للصفحة *‬
‫الخلفية الملونة تعطي احساس بجمال الموقع لذلك من المهم ان نقوم‬
‫بعمل خلفية ملونة‬
‫في اول الصفحة وهذا األمر هو ‪ body‬يكتب مع كلمة ‪ tag‬ويتم هذا بأمر‬
‫‪bgcolor‬‬
‫مثال‬
‫‪:‬كود‬
‫>‪<html‬‬
‫>"‪<body bgcolor="pink‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫============================‬
‫‪:‬ثالثا ‪ :‬عمل صورة كخلفية للصفحة*‬
‫وهذا االمر يحدد مسار الصورة ‪ body‬نستخدم هنا امر يوضع مع كلمة‬
‫‪ background‬االمر هو‬
‫مثال‬
‫‪:‬كود‬
‫>‪<html‬‬
‫>"‪<body background="abc.jpg‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫هنا قمت بعمل صورة (في نفس مسار الصفحة كخلفية)‬
‫حاول ان تختار صورة ذات حجم صغير لتجنب البطء في فتح الصفحة او ‪-‬‬
‫استخدم االلوان بدل الصور‬
‫===========================‬
‫‪ :‬رابعا القوائم *‬
‫من الممكن ان نقوم بعمل قوائم منقطة او مرقمة‬
‫‪ :‬القائمة المنقطة ‪1-‬‬
‫لكتابة سطور >‪ <li> </li‬لبدء عمل القائمة وامر >‪ <UL> </UL‬نستخدم امر‬
‫القائمة‬
‫مثال‬
‫‪:‬كود‬
‫>‪<html‬‬
‫>‪<body‬‬
‫>‪<ul‬‬
‫>‪<li>Ubuntu</li‬‬
 ‫>‪<li>Fedora</li‬‬
‫>‪<li>Mint</li‬‬
‫>‪</ul‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫==========================‬
‫‪ :‬القائمة المرقمة ‪2-‬‬
‫لكتابة سطور >‪ <li> </li‬لبدء عمل القائمة وامر >‪ <OL> </OL‬نستخدم امر‬
‫القائمة‬
‫وهناك خاصية خاصة بهذا االمر تحدد من اي رقم سيبدأ الترقيم وهذه‬
‫‪ start‬الخاصية هي‬
‫مثال‬
‫‪:‬كود‬
‫>‪<html‬‬
‫>‪<body‬‬
‫>"‪<ol start="0‬‬
‫>‪<li>Ubuntu</li‬‬
‫>‪<li>Fedora</li‬‬
‫>‪<li>Mint</li‬‬
‫>‪</ol‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫========================‬
‫خامسا ‪:‬االرتباطات‬
‫تمكنك من اضافة االرتباطات ‪ html‬تعد من اهم عناصر الصفحة ولغة‬
‫هي ‪ href‬والخاصية >‪<a> </a‬نقوم باضافة االرتباط عن طريق االمر‬
‫التي تحدد المكان الذي سيؤدي اليه االرتباط‬

‫مثال‬
‫‪:‬كود‬
‫>‪<html‬‬
‫>‪<body‬‬
‫>‪</a‬مجتمع لينوكس العربي>"‪<a href="http://www.linuxac.org‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫========================‬
‫من الممكن ان تقوم بعمل ارتباط الرسال رسالة لبريد اليكتروني‬

‫مثال‬
 ‫‪:‬كود‬
‫>‪<html‬‬
‫>‪<body‬‬
‫>‪</a‬ارسل لنا>"‪<a href="mailto:[email protected]‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫=========================‬
‫يمكنك عمل رابط يؤدي الى تحميل ملف‬

‫مثال‬
‫‪:‬كود‬
‫>‪<html‬‬
‫>‪<body‬‬
‫>‪</a‬حمل الملف>"‪<a href="abc.mp3‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫=======================‬
‫‪:‬سادسا‪ :‬ادراج الصور وملفات الوسائط المتعددة*‬

‫‪:‬ادراج الصور‪1-‬‬
‫وهو امر مفتوح ليس له نهاية >‪ <img‬يتم ذلك باستخدام امر‬
‫‪:‬خصائص األمر*‬
‫لتحديد عنوان الصورة‪ src :‬الخاصية‪-‬‬
‫لتحديد طول الصورة وعرضها‪ height & width :‬الخاصية‪-‬‬
‫وتستخدم هذه الخاصية لوصف الصورة بنص يظهر عند االشارة ‪ alt‬الخاصية‪-‬‬
‫اليها بالفأرة‬
‫‪tool tip‬او ما يعرف ب‬
‫‪pixels‬لوضع اطار حول الصورة وتحديد سمكه بال ‪ border‬الخاصية‪-‬‬
‫ضع ملف الصورة في نفس مسار الصفحة التي تصممها*‬
‫مثال‬
‫‪:‬كود‬
‫>‪<html‬‬
‫>‪<body‬‬
‫‪<img src="abc.jpg" height="150" width="150" alt="ABC‬‬
‫>"‪picture" border="2‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫======================‬
‫‪:‬ادراج الصور والفيديو‪2-‬‬
‫>‪ <embed> </embed‬ندرج ملفات الصوت والفيديو باستخدام امر‬
 ‫‪:‬خصائص االمر*‬
‫لتحديد مسار الملف‪ src :‬الخاصية‪-‬‬
‫وهي تحدد هل سيبدأ الملف في العمل بمجرد فتح‪ autostart :‬الخاصية‪-‬‬
‫‪ true ,false‬الصفحة وهي اما‬
‫وهي لتحديد طول وعرض ما سيعرض او طول ‪ height & width :‬الخاصية‪-‬‬
‫وعرض لوحة التحكم فقط اذا كان ملف صوت‬
‫"واذا اردت اخفاءها اكتب "‪0‬‬
‫‪ true ,false‬لتحديد اذا كان الملف سيتكرر ام ال وهي اما‪ loop :‬الخاصية‪-‬‬

‫مثال‬
‫‪:‬كود‬
‫>‪<html‬‬
‫>‪<body‬‬
‫>‪<embed src="abc.mp3" height="150" width="150"></embed‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫=========================‬
‫‪:‬سابعا ‪:‬الجداول‬
‫الجداول من اهم مكونات صفحة الويب ألننا بفضلها نستطيع تنظيم‬
‫المعلومات‬
‫>‪ <table> </table‬ندرج الجدول عن طريق امر‬
‫>‪ <tr> </tr‬ثم ندرج الصفوف داخل الجدول بأمر‬
‫>‪<th> </th‬اذا اردنا ادراج خاليا للعناوين بالجدول نستخدم امر )اختياري(‬
‫داخل الصفوف‬
‫>‪ <td> </td‬ثم ندرج خاليا البيانات داخل الصفوف باستخدام امر‬
‫ال تنسوا هنا كل شيء من اليسار الى اليمين ‪-‬‬
‫‪:‬خصائص الجدول*‬
‫لعمل حدود للجدول وتحديد سمكها‪ border :‬الخاصية‪-‬‬
‫لتحديد لون لخلفية الجدول‪ bgcolor :‬الخاصية‪-‬‬

‫>‪ <caption‬بامكانك عمل عنوان للجدول يظهر فوق الجدول باستخدام امر*‬
‫>‪</caption‬‬

‫مثال‬
‫‪:‬كود‬
‫>‪<html‬‬
‫>‪<body‬‬
‫>"‪<table border="3" bgcolor="green‬‬
‫>‪<caption>My Address Book</caption‬‬
 ‫>‪<tr‬‬
‫>‪<th>Name</th‬‬
‫>‪<th>Address</th‬‬
‫>‪<th>Telephone Number</th‬‬
‫>‪</tr‬‬
‫>‪<tr‬‬
‫>‪<td>Ali</td‬‬
‫>‪<td>ABC ST.</td‬‬
‫>‪<td>12345678</td‬‬
‫>‪</table‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫=======================‬
‫‪:‬ثامنا ‪:‬كتابة المالحظات‬

‫عندما يزيد حجم الصفحة أو في حالة الخوف من نسيان االوامر مع مرور‬

‫الوقت‬
‫تظهر حاجتك لوضع مالحظات الرشادك او ارشاد غيرك اثناء مراجعتك للكود‬
‫وهذه المالحظات لن تظهر اثناء استعراض الصفحة بل اثناء استعراض الكود‬
‫الخاص بالصفحة‬
‫ويتم وضع المالحظة على هذا الشكل‬
‫>المالحظة!<‬
‫عالمة التعجب تكون بعد اول قوس مباشرة*‬
‫========================‬
‫‪ HTML‬بحمد الله وفضله تم االنتهاء من درس‬ ‫وارجو من كل من له‬
‫اضافة ان يضيفها بدون تردد‬
‫السالم عليكم ورحمة الله‬

‫نيذة تاريحية عن لغة ال ‪:html‬‬

‫هي إختصار ل ‪ hyper text markup language‬اي لغة ترابط‬
‫النصوص التشعيبة وهي التقنية الجوهر التي تتحكم بما سوف‬
‫يعرضة المستعرض على الشاشة ‪.‬‬
 ‫تم تصميم ‪ html‬في البدء لكي بتمكن العلماء من إنشاء‬
‫مستندات نصية تحتوي على أوامر تنسيق اساسية تسمي (ترميز)‬
‫وارتياطات إلى معلومات أخرى تسمي (نصوص تشعبية او‬
‫ارتباطات تشعبية) على سبيل المثال يمكن ان يحتوي مستند على‬
‫الهزات األرضية على ارتباط الي مستندات اخرى تتحدث عن‬
‫الهزات االرضية كتبها علماء اخرون ‪.‬‬
‫لم يخطر على بال مخترعين ‪ html‬ان هذه التقنية ستبرهن عن‬
‫فعالية وفائدة لدرجة انها ستصبح السبب الرئيسي لنمو الويب‬
‫أساسيات الوسوم أو األوامر‪ ،:‬وسم ‪tag‬‬
‫هي عبارة عن مجرد ملف نصي عادي يكتب في اي برنامج نصي (‬
‫‪ )notbad‬ويحفظ بصيغة ال ‪ html‬او ‪ htm‬ويحتوي هذا المستند على‬
‫شفرات خاصة ‪))tag=url‬وسوم (أوامر)(‪ )tags/url‬نوضع عادة حول‬
‫كتل من النصوص تلك الكتل والوسوم تسمى عناصر (‪)element‬‬
‫ويفسر مستعرض الويب كإنترنت اكسبلورر أو نيتسكيب تلك‬
‫العناصر ليحدد كيفية عرضه على الشاشة ‪.‬في معظم االحيان‬
‫يملك كل عنصر في ‪ html‬وسم فتح ووسم اغالق ويتألف وسم‬
‫الفتح من اسم الوسم مع اشارتي < و > أكبر من واصغر من على‬
‫سبيل المثال‬

‫وسم فتح الخط العريض هو <‪ >B‬ويكون وسم اغالقه محصورا بين‬
‫االشارات ايضا ولكن في هذه الحالة توجد شرطة امامية قبل اسم‬
‫الوسم <‪ >/B‬ويوضع النص الذي يتأثر بالوسم بين وسمي االغالق‬
‫والفتح ‪ ,‬وعند قيام المستعرض بالتفسير سيعرض النص المكتوب‬
‫بين الوسمين‬

‫أفتح برنامج المفكرة ‪ notepad‬وأكتب‬

‫<‪>htmldir =rtl‬‬

‫<‪>head‬‬

‫<‪>Html‬صفحة اختبار‪>Html‬‬

‫‪>Head‬‬
 ‫سؤال صعب اإلجابة ولكن سنحاول تبسيطه‪ ،‬اإلنترنت أو ما يسمى (بالنت) (‪ )NET‬هي عبارة عن‬
‫شبكة حاسوبية عمالقة تتكون من شبكات أصغر‪ ،‬بحيث يمكن ألي شخص متصل باإلنترنت أن يتجول‬
‫في هذه الشبكة وأن يحصل على جميع المعلومات في هذه الشبكة (إذا ُس مح له بذلك) أو أن‬
‫يتحدث‬
‫تصفح اإلنترنت‬

‫في هذه اللحظات وأنت تقرأ هذه الكلمات‪ ،‬أنت تتصفح اإلنترنت‪ ،‬فهذا البرنامج الذي تستخدمه اآلن‬
‫لعرض هذه الصفحة يسمى متصفح اإلنترنت (‪ ،)Browser‬ولكي يعمل هذ‪ 1‬البرنامج (بالطبع) يجب‬
‫أن تكون مرتبط باإلنترنت‪.‬‬

‫ما هي أنواع المتصفحات؟‬

‫هناك عدة أنواع من المتصفحات متواجدة في األسواق أشهرها مستكشف مايكروسوفت (‬

‫‪ )Internet Explorer‬ويليه (‪ ) Netscape‬وتتوافر هذه البرامج بعدة إصدارات‪ ،‬فكلما زاد رقم‬
‫اإلصدار كلما اعتبر إصدارا حديثا‪ ،‬ومطورا عن الذي يسبقه‪ ،‬وفي كل سنة تقريبا تطرح هاتين‬
‫الشركتين إصدارات مطورة من متصفحاتهم‪.‬‬

‫كيف أستخدم المتصفح؟‬

‫بمجرد تصفحك لهذه الصفحة ووصولك هنا فأنت تعتبر ملم (على األقل) بمبادئ استخدام أي‬
‫متصفح‪،‬‬

‫كيف يمكنني قراءة الصفحات العربية في المتصفح؟‬

‫بما أنك تستطيع قراءة هذه الكلمات اآلن‪ ،‬فهذا يعني أن المتصفح الذي تستخدمه حاليا يدعم‬
‫العربية‪ ،‬ولكن زيادة في العلم سنشرح لك نقاط مهمة‪:‬‬

‫هناك نوعان من المواقع العربية التي تستخدم اللغة العربية‪:‬‬

‫المواقع التي تستخدم اللغة العربية كنص‪ ،‬وتمتاز‪:‬‬

‫‪ -‬األكثر انتشارا (موقعنا يستخدم هذه الطريقة)‬

‫‪ -‬يمكنك أن تنسخ الكالم الموجود في الصفحات‪.‬‬

‫‪ -‬تستوجب استخدام متصفح يقرأ (يفهم) النص العربي‬

‫‪ -‬سريعة التصفح‬

‫المواقع التي تستخدم اللغة العربية على هيئة صور‪ ،‬وتمتاز‪:‬‬

‫‪ -‬أقل انتشارا‬
 ‫‪ -‬ال تستوجب استخدام متصفح يدعم اللغة العربية ( ألن أي متصفح يمكنه عرض الصور)‬

‫‪ -‬بطئ التصفح‬

‫‪ -‬ال يمكنك نسخ الكالم المكتوب (ولكن يمكنك حفظ الصورة)‬

‫البحث في الشبكة‬

‫شبكة اإلنترنت تحتوي على كم هائل من المعلومات وعدد ال يحصى من الصفحات و المواقع ولهذا‬
‫تطلب أن يكون هناك دليل يشمل كل هذه المواقع و يسهل عملية البحث عبر الشبكة ‪ ..‬ولهذا فإن‬
‫مواقع البحث مثل ‪ yahoo‬و ‪ altavista‬تعتبر من أشهر المواقع عبر الشبكة و مواقع البحث تنقسم‬
‫لقسمين هما‬
‫أ ‪ -‬دالئل البحث ‪:‬‬

‫ومن أشهر الدالئل ‪ Yahoo … Excite … Magellan‬و باإلمكان البحث في هذه المواقع حسب‬
‫الموضوع أو حسب الكلمة المفتاحية‬

‫البحث حسب الموضوع ‪:‬‬

‫تم ترتيب هذه المواقع على نحو يسهل عملية التفتيش انطالقا من موضوع عام ثم تضييق هذا‬
‫النطاق إلى مواضيع متفرعة محدده مثال‪ :‬إذا أردت البحث عن موضوع يتعلق بكرة القدم اختر‬
‫الموضوع العام و الذي بدورة يحتوي على المواضيع التي تهتم بهذا الموضوع ‪.‬وهو الرياضة ‪ ..‬وبعد‬
‫ذلك ستظهر لك قائمة بمواضيع مختلفة تتعلق بالرياضة اختر منها موضوع كرة القدم‬

‫البحث حسب الكلمة المفتاحية ‪:‬‬

‫هذه العملية تعتبر اسهل من عملية البحث من خالل موضوع معين ‪ .‬فمن خاللها تستطيع كتابة كلمة‬
‫مفتاحيه لموضوع تود البحث عنة ‪..‬فتظهر لك تلقائيا أسماء المواقع التي تهتم بهذه الكلمة‪.‬‬

‫فمثال ‪ :‬لو أردت البحث عن المواقع التي تتحدث عن كرة القدم فالكلمة المفتاحية هنا هي (‬
‫‪ . )soccer‬وذا أردت البحث عن مواقع تتحدث عن علوم الكمبيوتر فالكلمة المفتاحية هنا هي (‬
‫‪ )Computer Science‬و لكن عليك عند كتابة الكلمة المفتاحية كتابة هذه الكلمة بدون المسافات‬
‫أي يجب عليك كتابة الكلمة بهذا الشكل (‪ )computer+science‬فكتابة الكلمة بوجود الفراغ يعني‬
‫بأن البرنامج سيبحث عن المواقع التي تتحدث عن العلوم عامه و المواقع التي تتحدث عن الكمبيوتر‬
‫عامه ‪.‬‬

‫ب‪ .‬محركات البحث‪:‬‬

‫و من اشهر برامج البحث المتوفرة في الشبكة ‪ .. Altavista … Lycos … Infoseek‬واآلن وبعد‬

‫أن عرفت كيف تستخدم دالئل البحث سيسهل عليك التعرف على استخدام برامج البحث ‪.‬‬

‫و طريقة استخدام برامج البحث هي بالضبط نفس طريقة استخدام دالئل البحث ولكن فقط من‬
‫خالل الكلمة المفتاحية ‪ ..‬ادخل الكلمة المفتاحية في المكان المتاح واختر أمر البحث ‪.‬‬
 ‫البحث عن المواقع العربية‪:‬‬

‫يعتبر البحث عن المواقع العربية من أصعب األمور‪ ،‬وذلك لقلة محركات او مواقع البحث التي تدعم‬
‫(تفهم) اللغة العربية‪ ،‬ومن أشهر المواقع التي تدعم البحث باستخدام األحرف العربية (نوعا ما)‬
‫محرك ألتافيستا ‪. www.av.com‬‬

‫ولكن مع تطور اإلنترنت والمواقع العربي ظهرت الحاجة لوجود محركات بحث عربية‪ ،‬وقد ظهر عدد‬
‫المحركات العربية التي تعتبر بدائية بالنسبة لمحركات البحث األجنبية ولكن كان لظهروها أثر كبير‬
‫على تسهيل البحث لمستخدم اإلنترنت العربي‪،‬‬

‫البريد اإللكتروني‬

‫البريد اإللكتروني هو وسيلة لتبادل الرسائل عبر اإلنترنت‪ ،‬ويشترط أن يمتلك المرسل والمستقبل‬
‫عنوان بريد خاص يكتب بهذا الشكل‪:‬‬
‫‪anyname@ anycompany.com or net‬‬

‫فـ ‪ :anycompany‬يعتمد على الشركة أو المزود الذي قدم لك حساب البريد اإللكتروني‬

‫و ‪ : anyname‬يعتمد على اختيارك السم المستخدم عند حصولك على حساب البريد اإللكتروني‪.‬‬

‫أنواع البريد اإللكتروني‪:‬‬

‫هناك نوعان‪:‬‬

‫‪ -‬نوع يستخدم برنامج خاص إلرسال واستقبال البريد اإللكتروني يعمل وأنت متصل باإلنترنت‪ ،‬ويجب‬
‫أن يكون البرنامج متوفر لديك (وهناك عدة برامج)‬

‫‪ -‬نوع يسمى بريد الويب أو البريد المجاني ‪ ،‬ويمكنك استخدامه دون الحاجة لبرنامج خاص سوى‬
‫ارتباطك باإلنترنت‪ ،‬وهذا سبب انتشار هذا النوع‪.‬‬

‫كيف يمكنني الحصول على بريد إلكتروني؟‬

‫‪ .1‬بالنسبة للنوع األول غالبا ما يقدم في حال اشتراكك في خدمة اإلنترنت من الشركة المزودة‬
‫لخدمة اإلنترنت التي تتعامل معها‪ ،‬ويجب أن يتوافر في الكمبيوتر الذي تملك برنامج الستخدام هذا‬
‫البريد‪ ،‬ويجب أن تعرف طريقة استخدام البرنامج‪.‬‬

‫‪ .2‬النوع الثاني‪ ،‬يمكنك الحصول عليه بدخول إحدى المواقع التي تقدم هذه الخدمة والتسجيل‬
‫لديها ‪.‬‬

‫الدردشة والحوار‬

‫أعتقد أنك وصلت لمرادك‪ ،‬فالكثير من مبتدئي اإلنترنت سمعوا عن هذه الخدمة الشهيرة أال وهي‬
‫الدردشة والحوار الحي‪ ،‬ولعل الكثيرين ال يعرفون من اإلنترنت سوى هذه الخدمة‪ ،‬لذلك فنصيحتنا‬
‫لك في مستشفى اإلنترنت هي أن تحاول أن تستفيد من جميع خدمات اإلنترنت وأن تبتعد عن‬
 ‫اإلدمان في أي مجال من مجاالت اإلنترنت وخاصة الدردشة أو الحوار‪.‬‬
‫فلنبدأ‪:‬‬

‫الدردشة أو الحوار هي الترجمة الحرفية لكلمة ‪ Chat‬باللغة اإلنجليزية‪ ،‬ومنذ انطالق اإلنترنت كان‬
‫لهذه الخدمة انتشار واسع بين مستخدمي الشبكة‪ ،‬حيث يمكنك من خالل هذه الخدمة التحدث مع‬
‫أي شخص في العالم بشرط أن تكون أنت وهو مرتبطين بشبكة اإلنترنت‪.‬‬

‫ولكن كيف؟‬

‫ببساطة تنقسم هذه الخدمة إلى نوعين ‪ ،‬النوع األول هو استخدام برنامج خاص (بعضها مجاني‬
‫والبعض غير مجاني) يعمل وأنت مرتبط باإلنترنت والطريقة الثانية هي التحدث عن طريق المتصفح‬
‫في مواقع خاصة لذلك‪.‬‬

‫فلنبدأ بالطريقة األولى‪:‬‬

‫برامج الحوار‪:‬‬

‫يشترط في هذه الطريقة توافر برنامج الحوار (نفسه) في جهازي الشخصان المتحدثان‪ ،‬وأن يكون‬
‫كال الطرفان مرتبطان في اإلنترنت‪ ،‬وهتاك العديد من البرامج التي تقدم هذه الخدمة ويشترك فيها‬
‫مالين البشر‪.‬‬

‫تقسم برامج الحوار بدورها إلى قسمان‪:‬‬

‫‪ -‬برامج الحوار التقليدية‪:‬‬

‫وهي تعتمد على ظهور شاشة (كشاشة المتصفح) يتحاور فيها أكثر من شخص ‪ ،‬ويمكنك أن تتحاور‬
‫مع شخص معين دون أن يعرن اآلخرين ما يدور بينكم‪ ،‬ومن أشهر هذه البرامج ‪MIRC‬‬

‫‪ -‬برامج القوائم‪:‬‬

‫وهي البرامج الشهيرة في الوقت الحاضر ‪ ،‬وتعتمد على ظهور قائمة صغيرة في شاشة جهازك تضم‬
‫أصدقاؤك (يجب أن تعرف أسماءهم أو أرقامهم كي تضمهم إلى قائمتك الخاصة) وتمكنك هذه‬
‫البرامج من إرسال رسالة لشخص غير متواجد يستقبلها عند دخوله إلنترنت وتشغيله لهذا البرنامج‪،‬‬
‫كما توفر بعض البرامج إرسال ملفات بين المتحاورين ( الحذر من استقبال أي ملف من مصدر‬
‫مجهول أو غير موثوق)‪ .‬ومن أشهر هذه البرامج ‪ ، ICQ‬و ‪AOL Instant Messenger‬‬

‫مواقع الحوار‪:‬‬

‫وتعتمد هذه الطريقة التي يفضلها الكثيرين وخاصة مستخدمي األجهزة العامة على استخدام‬
‫المتصفح وأن تكون مرتبط باإلنترنت‪ ،‬وتوفر هذه الخدمة عدد كبير من المواقع األجنبية وكذلك بعض‬
‫المواقع العربية‪ ،‬وتعتبر هذه الطريقة للحوار أكثر جدية من برامج الحوار (النوع الثاني) ألن هناك‬
‫بعض المواقع التي تستضيف وتناقش المختصين في بعض المجاالت (كالطب والصحة مثال) وتسمح‬
‫للزوار بمناقشتهم ‪ ،‬ومن المواقع المفيدة التي تقدم هذه الخدمة هي ‪ www.cnn.com‬و‬
‫‪chat.yahoo.com‬‬
 ‫ومن المواقع العربية الشهيرة موقع الساحة العربية وعنوانه ‪www.alsaha.com‬‬

‫(مالحظة قد تستخدم لفظ الحوار كي تطلق على مواقع الحوار الغير مباشر ( ‪ ) Forum‬أو ما‬
‫تسمى بساحات أو منابر اإلنترنت والتي تختلف عن مواقع الدردشة المباشر‪ ،‬بحيث يمكنك كتابة‬
‫مقالة أو الرد علة أية مقالة ومناقشة موضوع مهم‪ ،‬وموقع الساحة العربية يقدم للمستخدم العربي‬
‫ألول مرة االثنين معا وهما الحوار المباشر (الدردشة أو ‪ )chat‬في ‪ chat.alsaha.com‬والحوار‬
‫غير المباشر (‪www.alsaha.com )Forum‬‬

‫كيف تصمم صفحة على اإلنترنت‬

‫بدون مقدمات‪ ،‬هناك ثالث كلمات سحرية إن عرفتها ستعرف كيف تصمم موقع على اإلنترنت وهي‬
‫( فكر‪ ،‬صمم ‪ ،‬أنشر) هي اختصار للخطوات التي يجب أن تقوم بها لتصميم صفحة ( أو صفحات)‬
‫ونشرها على اإلنترنت‬

‫فكر‪:‬‬

‫ما هو موضوع موقعك وما هي األمور التي ستذكرها في موقعك‪ ،‬حدد أهداف موقعك ونوع الزوار‬
‫الذين تريدهم لموقعك‬

‫صمم‪:‬‬

‫صمم الموقع باستخدام طرق التصميم المختلفة في جهازك‪.‬‬

‫أنشر‪:‬‬

‫أبحث عن مكان تنشر فيه موقعك (مجاني) أو أملك مساحة على اإلنترنت (غير مجاني) وأنقل‬
‫الملفات التي صممتها في جهازك‪.‬‬

‫فلندخل بالتفاصيل قليال‪:‬‬

‫بالنسبة للخطوة األولى فهو شيء راجع لك ‪ ،‬أما الخطوة الثانية فمهمتنا توضيحها لك‬

‫التصميم‪:‬‬

‫هناك طريقتان لتصميم المواقع على اإلنترنت ‪ ،‬الطريقة األولى تتطلب معرفتك للغة ‪HTML‬‬
‫والطريقة الثانية عن طريق برامج التصميم وهي األسهل‪.‬‬

‫لغة ‪HTML‬‬

‫يمكنك أن تتعدى هذه الخطوة‪ ،‬فبرامج التصميم جعلت تعلم هذه اللغة ليس باألمر الضروري‪،‬‬

‫برامج التصميم‬
 ‫ننصحك كمبتدئ بتعلم إحدى برامج التصميم ألنها سهلة وبسيطة‪ ،‬ومن أشهر هذه البرامج برنامج‬
‫‪ Front Page‬ويمكنك تصميم صفحات عربية عليه‪.‬‬

‫(أي مستخدم للويندوز يملك نسخة غير مطورة من برنامج فرونت بيج يمكنك استخدامها فهي‬
‫شبيهة بالنسخة الغير مجانية نوعا ما واسمها ‪ ، Front Page Express‬سنخصص دروسا قريبا لهذه‬
‫النسخة)‬

‫النشر‪:‬‬

‫بعد أن تنتهي من تصميم صفحتك على اإلنترنت ستحتاج إلى أمرين‪ ،‬أولهما إيجاد مساحة لنشر‬
‫موقعك والثانية طريقة نقل الموقع من جهازك لهذه المساحة‪.‬‬

‫إيجاد المساحة ‪:‬‬

‫أيضا هناك طريقتان تعتمدان عليك‪ ،‬فهناك مواقع تقدم مساحات مجانية للمواقع الشخصية وهناك‬
‫مواقع تقدم مساحات أكبر (غير مجانية)‬

‫نقل الملفات ‪:‬‬

‫تعتمد طريقة نقل الملفات على الموقع الذي قدم لك المساحة على اإلنترنت‪ ،‬فكثير من المواقع‬
‫المجانية تستطيع من خاللها نقل الملفات دون عناء استخدام برنامج خاص‪ ،‬ولكن في بعض المواقع‬
‫يجب أن تملك برنامج خاص يسمى ‪ FTP‬لنقل الملفات من جهازك للموقع‪ .‬مع شخص آخر في أي‬
‫مكان من العالم‪.‬‬

‫سم الله الرحمن الرحيم‬

‫فتح صفحة ويب جديدة بواسطة لوحة المفاتيح وذلك باختيار ‪Ctrl+L‬‬
‫أما إذا أردت فتح نافذة ثانية لصفحة الوب ذاتها‪ ،‬فاختر ‪Ctrl+N‬‬
‫يمكنك إغالق اإلطار الحالي بالضغط على ‪.CTRL+W‬‬
‫لالنتقال إلى موقع جديد‪ ،‬اضغط ‪.CTRL+O‬‬
‫لحفظ صفحة ويب سريعًا لقائمة المفضلة‪ ،‬اضغط ‪.CTRL+D‬‬
‫لالنتقال إلى األمام بين اإلطارات‪ ،‬اضغط ‪.CTRL+TAB‬‬
‫للرجوع إلى الخلف بين اإلطارات‪ ،‬اضغط ‪.SHIFT+CTRL+TAB‬‬
‫لعرض قائمة بعناوين إنترنت التي كتبتها في شريط 'العناوين'‪ ،‬اضغط ‪.F4‬‬
‫يمكنك نقل المؤشر إلى شريط 'العناوين' بالضغط على ‪ALT+D‬‬
‫لحفظ صفحة ويب سريعًا لقائمة المفضلة‪ ،‬اضغط ‪.CTRL+D‬‬
‫للبحث عن كلمة أو عبارة على صفحة ويب‪ ،‬اضغط ‪ CTRL+F‬لفتح مربع الحوار 'بحث'‪.‬‬
‫ًا‬
‫يمكنك كتابة كلمة في شريط العناوين وضغط ‪ CTRL+ENTER‬إلضافة ‪ /http://www‬و‪ com.‬تلقائي على جانبي‬
‫الكلمة‪.‬‬
‫لالنتقال إلى الخلف أو إلى األمام داخل شريط 'البحث'‪ ،‬انقر بواسطة الزر األيمن للماوس داخل شريط 'البحث'‪ ،‬ثم‬
‫انقر فوق الخلف أو األمام في القائمة التي تظهر‪.‬‬
‫ُال‬
‫يمكنك حفظ صفحة ويب لقراءتها دون اتصال بالنقر فوق القائمة 'ملف' ثم النقر فوق 'حفظ باسم'‪ .‬بد من النقر‬
 ‫فوق الزر 'الخلف'‪ ،‬يمكنك الضغط على المفتاح ‪ BACKSPACE‬للعودة صفحة إلى الخلف‪.‬‬
‫يمكنك التبديل بين الحجم العادي إلطار ‪ Internet Explorer‬ووضع ملء الشاشة بضغط ‪.F11‬‬
‫لحفظ صفحة أو صورة دون فتحها‪ ،‬انقر بواسطة الزر األيمن للماوس فوق ارتباط العنصر الذي تريده‪ ،‬ثم انقر فوق‬
‫'حفظ الهدف باسم'‪.‬‬
‫لتحميل صفحات ويب بشكل أسرع‪ ،‬انقر فوق القائمة 'أدوات'‪ ،‬ثم فوق 'خيارات إنترنت'‪ ،‬ثم فوق عالمة التبويب‬
‫'خيارات متقدمة'‪ ،‬ثم قم بإيقاف تشغيل األصوات والصور‪.‬‬
‫لمشاهدة قائمة بكافة عناوين إنترنت التي كتبتها أثناء جلسة العمل هذه‪ ،‬انقر فوق السهم الصغير المتجه ألسفل‬
‫الموجود في أقصى يسار شريط 'العناوين'‪.‬‬
‫في شريط العناوين‪ ،‬يمكنك تحريك المؤشر بسرعة إلى الخلف بين أجزاء العنوان بضغط ‪.CTRL+LEFT ARROW‬‬
‫في شريط العناوين‪ ،‬يمكنك تحريك المؤشر بسرعة إلى األمام بين أجزاء العنوان بضغط ‪CTRL+RIGHT‬‬
‫‪.ARROW‬‬
‫لتكبير النص أو تصغيره على صفحات ويب‪ ،‬انقر فوق القائمة 'عرض'ثم انقر فوق 'حجم النص'‪ .‬اضغط على ‪F5‬‬
‫لتحديث الشاشة‪.‬‬
‫ًا‬
‫للرجوع إلى صفحات سابقة سريع ‪ ،‬يمكنك النقر فوق السهم الصغير المتجه ألسفل الموجود على يسار الزر‬
‫'الخلف'‪.‬‬
‫وإذا رأيت شاشة الكمبيوتر امتألت بالنوافذ‪ ،‬فما عليك سوى الهروب المنظم‪ ،‬وذلك من خالل وظيفة ‪Ctrl+W‬‬
‫إنعاش الموقع ‪Refresh‬‬
‫إذا زرت المواقع التي زرتها مؤخرا‪ ،‬فيجب أن تعلم بأن المتصفح يفتح لك الصفحات التي اختزنها في الذاكرة كاش‬
‫‪Cache‬‬
‫ولهذا السبب تكون محتوياتها قديمة‪ ،‬وتحتاج إلى تحديث· تستطيع الحصول على الصفحات المحدثة من خالل‬
‫الضغط على زر اإلنعاش ‪Refresh‬‬
‫أو بطريقة أسرع من خالل الضغط على الزر ‪F5‬‬
‫الخيارات السريعة‬

‫إذا أردت تغيير أي توصيفات في المتصفح انترنت اكسبلورر‪ ،‬فسيكون ذلك من خالل خيارات اإلنترنت التي تجدها‬
‫كالتالي‪:‬‬
‫من شريط األدوات‬
‫اختر ‪Tools Internet Options‬‬
‫ولكن‪ ،‬أال تالحظ بأن ذلك قد يأخذ منك بعض الوقت؟ وما رأيك بطريقة أسرع للوصول إلى خيارات اإلنترنت؟‬
‫من لوحة المفاتيح‪ ،‬اختر ‪ Alt+T‬وستصل إلى مرادك‬
‫الزر ‪ Tab‬خير صديق‬
‫هل رأيت الزر المسمى ‪ Tab‬والذي يحمل سهمين متعاكسين على يسارك؟‬
‫هذا الزر خير صديق لك‪ ،‬النه يختصر كثيرا من األعمال اليدوية· استخدم الزر ‪ Tab‬للتنقل من وصلة ‪ Link‬إلى أخرى‬
‫على الموقع الذي تتصفحه·‬
‫أما إذا أردت االنتقال إلى الصفحة السابقة‪ ،‬فاختر ‪ Shift+Tab‬طريقة سريعة لعرض موقع‬
‫الدخول السريع‬

‫قمت بتشغيل الكمبيوتر من البداية‪ ،‬ولكنك لم تفتح المتصفح اكسبلورر بعد‪ ،‬فما رأيك لو طلبت الموقع الذي تريد‬
‫مباشرة من دون فتح اكسبلورر؟‬
‫من قائمة البدء‬
‫اختر ‪Start‬‬
‫‪ Run‬ومن علبة الحوار أدخل عنوان الموقع وليكن مثال ‪ http://www.3bir.com/vb‬ثم اضغط على ‪ Ok‬وفي الحال‬
‫سيفتح المتصفح اكسبلورر ومعه الموقع الذي اخترته· جرب هذه الطريقة‪ ،‬لكي تدخل عصر السرعة·‬
‫خطوة لألمام··خطوتان للخلف‬
‫المتصفح اكسبلورر يقدم أفضل السبل لكي تبحر بطريقة جيدة على اإلنترنت‪ ،‬فتختصر في الوقت والجهد·‬
‫ومن المعلوم أنك تضغط على الزر ‪ Back‬الموجود في شريط أدوات المتصفح‪ ،‬أو الضغط على الزر ‪Forward‬‬
‫للتقدم إلى األمام‬
‫ولكن‪ ،‬هناك طريقة أسرع من هذه الطريقة‪ ،‬وهي كالتالي‪:‬‬
‫من لوحة المفاتيح‪ ،‬استخدم الزر ‪ Backspace‬للرجوع إلى الصفحة السابقة‬
‫أما إذا أردت الذهاب إلى صفحة قمت بزيارتها في تلك اللحظة فارجع خطوتين إلى الوراء‪ ،‬من خالل الضغط على‬
 ‫الزرين‬
Shift+Backspace