مذكرةة

‫مقدمة عن اإلنترنت‬
‫وفهم لغة ‪HTML‬‬

‫المحاضرة االولى‬
‫اعداد االستاذة‪:‬‬
‫الجوهرة الجهيمي‬
‫مقدمة عن اإلنترنت‬
‫‪ ‬ال يختلف اثنان في أن شبكة اإلنترنت ازدادت أهميتها‬
‫في اآلونة األخيرة‪.‬مما زاد هذه األهمية دخول االنترنت‬
‫في مجاالت شتى منها مجاالت التعليم والتجارة‬
‫واالتصاالت‪....‬الخ‪.‬‬
‫‪ ‬ماهو االنترنت‪:‬‬
‫هو نظام ووسيلة اتصال من الشبكات الحاسوبية يصل‬
‫ما بين حواسيب حول العالم ببروتوكول موحد‬
‫هو بروتوكول إنترنت )‪.)IP()Internet Protocol‬‬
‫تربط اإلنترنت ما بين ماليين المستخدمين حول العالم ‪.‬‬
‫بعض األمثلة على االستخدامات اإلتصالية‬
‫لإلنترنت‬
‫‪ ‬محركات وأدلة البحث ‪google, yahoo :‬‬
‫‪ ‬البريد اإللكتروني‬
‫‪ ‬مواقع الويب ‪:‬‬

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

‫محتوى الموقع‬ ‫‪(2‬‬
‫التفاصيل التي يقدمها الموقع‬ ‫‪(3‬‬
‫تقسيم المحتوى على عناصر‬
‫ويجب ايضا فهم ومعرفة نوعية المدخالت ‪( input‬سواء كانت كتابية او اختيارية او روابط‬
‫تشعبية ) وتصميم المخرجات ‪output‬بما يتوافق مع ذلك‪.‬‬
‫تصميم وكتابة المحتوى بإستخدام ‪HTML‬‬
‫‪ ‬تعريف لغة ‪:HTML‬‬

‫لغة تستخدم في تصميم صفحات الوب ومواقع الوب‪ ،‬وتعتبر هذه اللغة‬ ‫‪‬‬
‫من أقدم اللغات وأوسعها استخداما ً في تصميم صفحات الوب‪ .‬ولغة‬
‫‪HTML‬تعطي برنامج تصفح اإلنترنت وصفا ً لكيفية عرض المحتويات‪.‬‬
‫تحتاج لمحرر النصوص لويندوز ‪text doucment‬المفكرة‬ ‫‪‬‬
‫تتكون ملفات ‪ HTML‬من قسمين ‪:‬‬ ‫‪‬‬
‫المحتوى ‪ :‬وهو ما يشاهده الجمهور في صفحتك‪.‬‬ ‫‪‬‬
‫الوسوم ‪:‬وهي األجزاء التي تحدد كيف سيشاهد جمهورك‬ ‫‪‬‬
‫كيف نقوم بحفظ العمل‪:‬‬
‫لتعديل العمل‪:‬‬
‫بنية ملف ‪HTML‬‬
‫‪ ‬الرأس ‪ : Head‬يحتوي على المعلومات اإلضافية‬
‫الخاصة بالمستند مثل عنوان الصفحة والكلمات‬
‫المفتاحية ‪.‬‬
‫الجسم ‪ : Body‬وهو يحتوي على المحتوى الذي يراه‬
‫المستخدم‪.‬‬
‫‪ ‬في كتابة الوسوم لغة ‪ HTML‬ال تراعي حالة األحرف‬

‫من حيث كونها كبيرة أو صغيرة‪ ،‬أي أنه في ‪HTML‬‬
‫وضع <‪ >b‬ال يختلف عن <‪.>B‬‬
‫المثال التالي يبين كيفية تقسيم ملف ‪HTML‬‬
‫تحديد عنوان المستند الذي يظهر في شريط العنوان للمتصفح بإحاطته بـ <‪ >title‬و <‪ ،>/ title‬والمكان‬
‫الصحيح لوسم الـ <‪ >title‬هو الرأس ‪head‬‬
‫مثال‬
‫تحديد اتجاة النص وتنسيق الخطوط وااللوان‬
‫‪ ‬سنقوم بتحديد اتجاه الصفحة من اليمين الى اليسار او‬
‫من اليسار الى اليمين عن طريق الوسم‬
‫> ”‪<html dir=“rtl‬‬
‫”‪ ”rtl‬تعني من اليمين لليسار اما ”‪ “ltr‬تعني من االيسار لليمين‬
‫‪ ‬يمكن تغيير لون خلفية صفحة الوب من الوسوم التالية‬

‫(‪ )tag‬داخل الوسم >‪<body‬‬
‫لتغيير لون الخلفيه‬ ‫>”‪<body bgcolor=“green‬‬
‫لجعل الخلفية عبارة عن صورة‬ ‫>”‪jpg‬اسم الصورة‪<body bgcolor=“.‬‬
‫مالحظة‪ :‬يجب ان تكون الصورة في نفس مجلد الصفحة‬
‫تحديد اتجاه النص وتنسيق الخطوط واأللوان‬
‫‪ ‬األلوان في ‪HTML‬‬
‫األلوان في الكمبيوتر تنتج من خلط األلوان األساسية الضوئية الثالثة‪ ،‬وهي األحمر‬
‫واألخضر واألزرق‬
‫يمكن كتابة الللون بصيغة صحيحة ( ‪)yellow,green,red,blue,black‬‬
‫ويكمن بصيغة الرموز‬
‫‪ ‬لتحديد الفقرات يتم إحاطتها بالوسم ‪P‬‬
‫>‪</p‬هنا توضع كتابة الفقرة الجديدة >‪<p‬‬
‫‪ ‬لالنتقال لسطر جديد نستخدم الوسم ‪br‬‬

‫هنا توضع الكتابة في سطر جديد بدون انهاء الفقرة>‪<br‬‬
‫تمرين‬
‫‪ ‬نريد كتابة العبارة االتية ”هذة صفحتي االولى“‬
‫وفي سطر اخر نكتب ”انا ‪ ..‬اسم الطالبة ‪ ..‬مبرمجة‬
‫ناجحة“‬
‫‪ ‬وعنوان الصفحة صفحتي االولى‬
‫‪ ‬بحيث يكون اتجاة العبارة من اليمين لليسار وخلفية‬
‫الصفحة باللون االخضر‬
‫طريقة كتابة الكود‬
‫الوسم ‪ Font‬للتحكم في النصوص‬
‫‪ ‬يعمل الوسم ‪ font‬دائما مع مجموعة من الخصائص‪ ،‬فهو ال يمتلك أي‬
‫تأثير لوحده‪ ،‬وأهم خصائصه هي التي تحدد نوع الخط والتي تحدد لونه‬
‫والتي تحدد حجمه‪.‬‬
‫‪ .1‬نوع الخط ‪face‬‬
‫>‪<font face="verdana">Verdana Text</font><br‬‬
‫>‪<font face="Courier New">Courier New Text</font‬‬
‫لون الخط ‪color‬‬ ‫‪.2‬‬

‫>‪ < /font‬الخط باللون االحمر >"‪<font color="red‬‬
‫‪ .3‬حجم الخط ‪size‬‬

‫>‪ < /font> <br‬حجم الخط ‪<font size="4"> 4‬‬
‫>‪ < /font‬حجم الخط ‪<font size="9"> 9‬‬
‫العناوين‬
‫وهي من ستة مستويات‪ ،‬العنوان األول ‪ h1‬والثاني ‪h2‬وهكذا حتى ‪.. h6‬‬
‫وتكون في صفحة الوب‬

‫تنسيقات اخرى‬
‫‪ ‬لتحديد اتجاه الفقرة استخدم الخاصية ‪ align‬في الوسم‬
‫‪P‬‬
‫ويظهر في صفحة الوب كالشكل التالي‬

‫تنسيقات اخرى‬
‫‪ ‬الوسم >‪<B> </B‬للخط العريض‬
‫‪ ‬الوسم >‪ <I> </I‬للمائل‬
‫‪ ‬والوسم >‪ <U> </U‬لكتابة نص تحتة خط‬
‫التعداد‬
‫‪ Align ‬ويتم كتابتها داخل الوسم >‪<p‬لمحاذاة النص وتأخذ القيم‬
‫‪Left, right, Center‬‬
‫‪ ‬الوسم >‪<ul> </ul‬لبدء فقرة تعداد نقطي‬
‫مالحظة الوسم >‪ <li> </li‬النشاء فقرة تعداد نقطي و‬
‫يتم تكرارها لكل فقرة تعداد وتستخدم بعد >‪<ul‬‬
‫ويمكن تحديد شكل التنقيط عن طريق (‪type(tag‬‬
‫‪<UL type="circle"> .1‬تعداد نقطي بشكل دوائر‬
‫‪ <UL type=“square"> .2‬تعداد نقطي بشكل مربعات‬
‫‪ ‬الوسم >‪<ol> </ol‬لبدء تعداد رقمي‬
‫مالحظة الوسم >‪ <li> </li‬النشاء فقرة تعداد رقمي و‬
‫يتم تكرارها لكل فقرة تعداد وتستخدم بعد>‪<ol‬‬
‫مثال‬
‫ويظهر في المتصفح‬
‫االرتباطات التشعبية‬
‫‪ ‬االرتباط التشعبي ‪:‬‬
‫هو نص أو رسم يمكنك نقره لالنتقال إلى مكان مختلف‬
‫على الصفحة أو فتح صفحة ويب مختلفة أو بدء رسالة‬
‫بريد إلكتروني ‪...‬إالخ‬
‫‪ ‬مهما كان نوع االرتباط التشعبي اللذي نريد إنشاءه‬
‫التركيب النحوي األساسي هو نفسه يبدا بالوسم >‪<a‬‬
‫‪ ‬يجب حفظ الملف في نفس المجلد الذي حفظتي به‬
‫صفحتك‬
‫• قاعدة‪:‬‬
‫>‪</a‬النص الظاهر > ”الرابط“=‪• <a href‬‬
‫انشاء االرتباط التشعبي‬
‫‪ ‬استخدم الوسم ‪ a‬مع الخاصية ‪ href‬لتحديد الوجهة‬
‫وينشا لدينا رابط تشعبي ينقلنا الى موقع مايكروسوفت‬

‫ويفتح ‪outlook‬الرسال ايميل‬
‫إدراج الصور‬
‫‪ ‬يتم إدراج الصور في صفحة ‪ HTML‬عن طريق الوسم ‪ ،IMG‬وهو‬
‫وسم مفرد ( ال يجتاج إلى وسم إغالق)‪ ،‬وهذا الوسم يحتاج إلى خاصية‬
‫مهمة لكي يعمل بشكل سليم هي ‪ src‬والتي نضع بها عنوان الصورة‬
‫المطلوبة‬
‫>"‪.gif‬اسم الصورة“=‪<img src‬‬
‫‪ ‬توجد أيضا الخاصية ‪ width‬لتحديد عرض الصورة و‪ height‬لتحديد‬
‫ارتفاعها‪ ،‬يمكن بواسطة الخاصيتان السابقتان تكبير الصورة وتصغيرها‬
‫حسب المطلوب‬
‫>‪.gif“ width=200 height=100‬اسم الصورة“=‪<img src‬‬
‫‪ ‬مالحظة‪:‬‬
‫يجب حفظ الصورة فنفس المجلد الذي حفظتي فيه صفحتك‬
‫الجداول‬
‫‪ ‬تعتبر الجداول من أهم مكونات صفحات ‪ ،HTML‬وجميع‬
‫التصاميم اإلحترافية تستفيد من الجداول لتصميم الصفحة‬
‫وتوزيع الكائنات عليها وتشكيلها في القالب الذي يريدونه‪ ،‬يتم‬
‫إدراج الجدول بالوسم > ‪ < table‬وداخل الجدول يجب إدراج‬
‫صفوف> ‪< tr‬وداخل الصفوف توجد البيانات > ‪..< td‬‬
‫‪ ‬يمكن وضع إطار للجدول بالخاصية ‪ border tag‬حيث نحدد‬

‫فيه سماكة اإلطار المطلوب‬
‫>"‪<table border="1‬‬
‫مثال‬
‫الجداول‬
‫‪ ‬يمكنك أيضا التحكم بالمسافة بين الخاليا بواسطة الخاصية‬
‫‪ ،cellspacing‬والمسافة بين الحدود الداخلية للخاليا‬
‫ومحتويات الخاليا بواسطة الخاصية ‪... cellpadding‬‬
‫>”‪<table cellspacing="10" cellpadding="20" border="1‬‬
‫‪ ‬يمكن التحكم بلون خلفية الجدول بالخاصية ‪bgcolor‬‬

‫>”‪<table bgcolor="Yellow“ border="1‬‬
‫‪ ‬يمكن التحكم بمحاذاة محتوى الخلية أفقيا بالخاصية ‪ align‬ورأسيا‬

‫بالخاصية ‪ ،valign‬في الخاصية ‪ align‬القيمة ‪ left‬تعني محاذاة لليسار و‬
‫‪ rigth‬لليمين و ‪ center‬بالمنتصف‪ ،‬أما الخاصية ‪ valign‬فتأخد القيمة‬
‫‪ top‬لألعلى‪ bottom ،‬لألسفل ‪ middle‬للمنتصف‪.‬‬
‫مثال‬
‫النماذج‬
‫عندما تريد إرسال المعلومات من متصفح الويب‪ ،‬إلى مزود الويب فإنك‬ ‫‪‬‬
‫تستخدم بروتوكول ‪ http‬في عمل ذلك‪ ،‬وينص بروتكول ‪ http‬على أن‬
‫البيانات ترسل في صورة أزواج‪ ،‬كل زوج عبارة عن إسم وقيمة‪ ،‬مثال إذا‬
‫أردت إرسال إسم المستخدم عبر بروتوكول ‪ http‬فإنك ترسل العبارة‬
‫التالية ‪ name=mubarmej‬هذا يسمى زوج ألنه يتكون من جزئين‪،‬‬
‫الجزء األول هو إسم المعلومة (‪ ،)name‬والجزء الثاني هو المعلومة‬
‫نفسها (‪)mubarmej‬‬
‫البيانات ترسل بطريقتين‬ ‫‪‬‬
‫‪ Get‬تظهر البيانات في شريط العنوان وتلحق بعدها بعالمة ؟‬ ‫‪.1‬‬
‫‪http://somewhere.com/script.cgi?name=mubarmej&country=United+States‬‬
‫‪ Post‬ال تظهر البيانات في شريط العنوان‬ ‫‪.2‬‬
‫النماذج‬
‫‪ ‬النماذج واجهة سهلة إلدخال البيانات مثل مربعات النص وقوائم‬
‫اإلختيار ومربعات نعم‪/‬ال واألزرار‪.‬‬
‫‪ ‬يتم إدراج النموذج بالوسم >‪<form‬ويتم إدراج المعلومات في‬

‫صورة وسوم >‪.. <input‬‬
‫‪ ‬خواص النموذج ‪form‬‬

‫‪ Action .1‬تحدد عنوان البرنامج الذي سيستفيد من البيانات‬
‫‪ Method .2‬تحدد طريقة نقل البيانات إما ‪ post‬أو ‪get‬‬
‫‪Type‬‬
‫انواع النماذج‪:‬‬
‫‪ : Text ‬يظهر في النموذج في صورة مربع نص‬
‫يمكن للمستخدم إدخال أي شيء فيه‪.‬‬
‫‪ :Radio button ‬يستخدم لعمل الدوائر لكي يختار‬
‫المستخدم قيمة ما من عدة خيارات‪.‬‬
‫‪ : Checkbox ‬لعمل مربع اختيار‪.‬‬
‫‪ : Button ‬لعمل زر‪ ،‬ويستفاد من الزر في عمل أي‬
‫شيء‪.‬‬
‫مثال‬
‫اعداد االستاذة‪:‬‬
‫الجوهرة الجهيمي‬

مذكرةة

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

مذكرةة

Uploaded by

Copyright:

Available Formats

‫مقدمة عن اإلنترنت‬

‫وفهم لغة ‪HTML‬‬

‫‪ ‬مواقع الويب ‪:‬‬

‫معرفة أهداف الموقع‬ ‫‪(1‬‬

‫‪ ‬تعريف لغة ‪:HTML‬‬

‫‪ ‬في كتابة الوسوم لغة ‪ HTML‬ال تراعي حالة األحرف‬

‫‪ ‬يمكن تغيير لون خلفية صفحة الوب من الوسوم التالية‬

‫‪ ‬لالنتقال لسطر جديد نستخدم الوسم ‪br‬‬

‫لون الخط ‪color‬‬ ‫‪.2‬‬

‫‪ .3‬حجم الخط ‪size‬‬

‫وتكون في صفحة الوب‬

‫ويظهر في صفحة الوب كالشكل التالي‬

‫وينشا لدينا رابط تشعبي ينقلنا الى موقع مايكروسوفت‬

‫‪ ‬يمكن وضع إطار للجدول بالخاصية ‪ border tag‬حيث نحدد‬

‫‪ ‬يمكن التحكم بلون خلفية الجدول بالخاصية ‪bgcolor‬‬

‫‪ ‬يمكن التحكم بمحاذاة محتوى الخلية أفقيا بالخاصية ‪ align‬ورأسيا‬

‫‪ ‬يتم إدراج النموذج بالوسم >‪<form‬ويتم إدراج المعلومات في‬

‫‪ ‬خواص النموذج ‪form‬‬

You might also like