مقدمة لتصميم الويب

‫مقدمة الى تصميم الويب‬
‫االنترنت‬
‫هي شبكة عالمية تربط بين حواسيب العالم وتسمح بتناقل البيانات بمختلف أنواعها وبنطاقاتها‪.‬‬
‫مختلف منها ما هو عبر شبكة محلية او عالمية‬
‫ماهي مواقع االنترنت‬

‫عبارة عن صفحات مبرمجة بأي لغة من لغات الويب تقوم بأخذ وعرض البيانات على شبكة‬
‫االنترنت‪ .‬وتختلف المواقع عن بعضها من ناحية عملها وبرمجتها وطريقة عملها‪ .‬ومن أمثلة‬
‫لغات البرمجة المستخدمة في برمجة المواقع ‪PHP with MYSQL DATABASES -ASP.NET‬‬
‫‪with SQL SERVER DATABASES‬‬
‫ماهي الويب )‪world wide web(www‬؟‬

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

‫مواقع ستاتييك‪ :‬مواقع عادية تحوي صفحات ثابتة ال تتغير إال برمجيا بتغيير الكود الخاص‬
‫بالصفحات وتقوم بعرض البيانات بشكل ثابت كما انها غير تفاعلية أي ال تحوي قاعدة بيانات‬
‫إلدخال وإخراج البيانات مثل ‪.HTML‬‬
‫مواقع تفاعلية‪ :‬مواقع تحوي صفحات انترنت تفاعلية تقوم بعرض البيانات من خالل قاعدة‬
‫بيانات تستوردها الصفحات لتعرضها للمستخدمين وتقوم الصفحات أيضا بإدخال البيانات الى‬
‫قاعدة البيانات من خالل المستخدم المتفاعل مع الموقع سواء مدير الموقع او الزائر‪ .‬وهي‬
‫األكثر استخداما ويتم برمجتها غالبا بأحد اللغات البرمجية ‪PHP with MYSQL‬‬
‫‪DATABASES -ASP.NET with SQL SERVER DATABASES‬‬
‫بعض مجال العمل (النطاق ‪)domain‬‬

‫نوع النشاط‬ ‫الرمز‬
‫الهيئات والشركات التجارية‬ ‫‪Com‬‬
‫المعاهد والجامعات والمؤسسات التعليمية‬ ‫‪Edu‬‬
‫الدوائر والمؤسسات الحكومية‬ ‫‪Gov‬‬
‫الهيئات والمؤسسات العسكرية‬ ‫‪Mil‬‬
‫شركة التوصيل خدمات الشبكات‬ ‫‪Net‬‬
‫المنظمات والهيئات الخاصة والمجانية‬ ‫‪Org‬‬
‫المؤسسات الدولية ما كالناتو‬ ‫‪Int‬‬
‫طريقة عمل المواقع اإللكترونية‬
‫ما هي‬
‫لغة‬
‫‪HTML‬‬
‫في البداية ‪ HTML‬هي لغة بسيطة جدا ً تستخدم لوصف ما تحتويه صفحات الويب ( ‪Web‬‬
‫‪ )Pages‬ومعنى ذلك أنها تستخدم لتحديد العناصر الموجودة في الصفحة مثل العناوين‪،‬‬
‫الفقرات‪ ،‬األزرار‪ ،‬الصور‪ ،‬القوائم‪ ،‬الجداول وغيرها من األشياء التي يمكن إضافتها في‬
‫صفحات الويب‪.‬‬
‫إذا ً نستخدم هذه اللغة لهدف واحد فقط وهو تحديد بنية صفحات الويب (‪.) Pages Structure‬‬
‫اآلن عليك معرفة أن كلمة ‪ HTML‬هي اختصار لجملة ‪Hyper Text Markup‬‬
‫‪ Language‬وهذا يعني أنها ال تعتبر لغة برمجة (‪.)Programming Language‬‬
‫مفهوم المحرر‬
‫المحرر (‪ )Editor‬هو أي برنامج يمكن استخدامه للتعديل على محتوى الملفات النصية‪.‬‬
‫في العادة‪ ،‬أنظمة التشغيل دائما ً نجد عليها محررات نصوص (‪ )Text Editors‬جاهزة‪ ،‬فمثالً‬
‫في نظام ويندوز يوجد محرر جاهز اسمة ‪ ،Notepad‬وفي نظام ماك يوجد محرر جاهز‬
‫اسمه ‪.TextEdit‬‬
‫المحررات االفتراضية التي نجدها جاهزة في الحاسوب ليست أفضل محررات يمكن استخدامها‬
‫لكتابة كود ‪ HTML‬و‪ CSS‬و‪ JavaScript‬ألنها ال تساعدك في كتابة الكود وال تظهر لك ألوان‬
‫جميلة كما تفعل باقي المحررات المخصصة لذلك‪.‬‬
‫‪HTML‬أنواع الوسوم في‬

‫بشكل عام أي شيء يتم إضافته في الصفحة يقال له وسم (‪ )Tag‬ويوجد نوعين من الوسوم‪:‬‬
‫>‪ –<br/‬وسوم فردية وهذه تعني أن الوسم ال يمكن وضع وسم آخر فيه مثل الوسم‪.‬‬
‫>‪ - <p><p/‬وسوم زوجية ويقصد بها أن الوسم يمكن أن يوضع فيه وسوم أخرى مثل الوسم‪.‬‬
‫‪HTML‬وسوم الصفحة األساسية في‬

‫بشكل عام‪ ،‬أي صفحة ‪ HTML‬تتكون من قسمين أساسيين كالتالي‪:‬‬
‫•‬ ‫القسم‬
‫‪Head‬‬
‫‪.‬والذي تضع فيه كل ما تحتاجه لتصميم الصفحة ولكن المستخدم ال يراه‬
‫•‬ ‫القسم‬
‫‪Body‬‬
‫‪.‬والذي نضع فيه كل األشياء التي سيراها المستخدم‬
‫اآلن عند كتابة كود ‪ HTML5‬يجب ذكر المعلومات التالية على األقل في الملف‪.‬‬
‫>‪<!DOCTYPE html‬‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫أمثلة على األشياء التي يمكن إضافتها في القسم‬

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

‫في حال أردت وضع عنوان للملف حتى يظهر في المتصفح بدالً من اسم الملف نفسه‪ ،‬قم بوضعه‬
‫بداخل‬
‫>‪<title> </title‬‬
‫في القسم‬
‫‪Head‬‬
‫‪.‬كالتالي‬
‫مثال‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪</title‬كلية المجتمع>‪<title‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫‪HTML‬خصائص وسوم‬
‫أغلب الوسوم التي تضيفها في الكود يمكن إضافة خصائص لها على الشكل التالي‪.‬‬
‫>‪<element attribute="value"> </element‬‬
‫•‬ ‫‪.‬يقصد بها اسم الوسم ‪element:‬‬
‫•‬ ‫‪.‬يقصد بها الخاصيّة التي يملكها الوسم باألساس و لكننا ننوي تحديد قيمتها ‪attribute:‬‬
‫•‬ ‫يقصد بها القيمة التي سنضعها في الخاصيّة و دائما ً يجب وضعها بين ‪value:‬‬
‫""‬
‫كمثال بسيط‪ ،‬عند إضافة صورة في الصفحة نستخدم الوسم‬
‫>‪<img‬‬
‫وبداخله نحدد مسار الصورة التي سيتم عرضها بواسطة الخاصية‬
‫‪src‬‬
‫‪.‬كالتالي‬
‫مثال‬
‫>‪<html‬‬
‫>‪<head‬‬
‫>‪</head‬‬
‫>‪<body‬‬
‫>"‪<img src="/tutorials/html/basics/html-5-icon.PNG‬‬
‫>‪</body‬‬
‫>‪</html‬‬
‫محاذاة السطور في صفحة الويب‬

‫‪.1‬محاذاة إلى اليمين‬
‫>‪</P‬النص>"‪<P align="right‬‬
‫‪.2‬محاذاة إلى اليسار‬
‫>‪</P‬النص>"‪<P align="left‬‬
‫‪.3‬توسيط‬
‫>‪</P‬النص>"‪<P align="center‬‬
‫التعداد الرقمي ‪Orderd(numbered)list‬‬

‫يوضع التعداد الرقمي عبر الوسم>‪.<OL> </OL‬‬
‫في كل سطر تريد ترقيمه يوضع أمامه الوسم >‪.<LI‬‬
‫>‪<OL‬‬
‫‪<LI> Ali‬‬
‫‪<LI> Ahmad‬‬
‫‪<LI> Mouhamed‬‬
‫>‪</OL‬‬
‫التعداد النقطي ‪Unordered (bulleted)list‬‬

‫يوضع التعداد النقطي عبر الوسم >‪.<UL></UL‬‬
‫في كل سطر تريد تنقيطه يوضع أمامه الوسم >‪.<LI‬‬
‫>‪<UL‬‬
‫‪<LI> Ali‬‬
‫‪<LI> Ahmad‬‬
‫‪<LI> Mouhamed‬‬
‫خاصية ‪BORDER‬‬
‫تستخدم مع الوسم >‪ <IMG‬وظيفتها إضافة إطار حول الصور والتحكم بسمكة‪ .‬وهذه الخاصية‬
‫تستخدم بشكل خاص عند تعيين صورة ما كوصلة تشعبية‬
‫ويتم التحكم بالسمك من خالل إسناد رقم يمثل السمك بالبيكسل‪ .‬والقيمة االفتراضية هي‪ 0‬أي ال‬
‫يوجد إطار حول الصورة‪.‬‬
‫>"‪<IMG SRC="IMAGE.JPG" BORDER="5‬‬
‫‪HTML‬طريقة كتابة أسماء الوسوم ال تؤثر في‬

‫سواء قمت بكتابة اسم الوسم بأحرف صغيرة (‪ )Small Letters‬أو بأحرف‬
‫كبيرة (‪ )Capital Letters‬فإن ذلك ال يسبب أي مشكلة‪.‬‬
‫‪HTML‬التعليقات في‬
‫التعليق (‪ )Comment‬عبارة عن وسم خاص يمكنك وضعه في أي مكان تريد في الصفحة‬
‫بهدف كتابة مالحظات تساعدك في الشرح أو لتذكر سبب استخدام الوسوم في حال أردت مستقبالً‬
‫مراجعة كود الصفحة والتعديل عليه‪.‬‬
‫لوضع تعليق استخدم الوسم‬
‫>‪<!-- --‬‬
‫وأكتب النص بداخله كالتالي‬
‫<!‪>DOCTYPE html‬‬
‫<‪>html‬‬
‫<‪>head‬‬
‫<‪>head/‬‬
‫<‪>body‬‬
‫<! ‪ --‬هذا التعليق األول وهو ال يظهر أمام المستخدم العادي ‪>--‬‬
‫<! ‪ --‬هذا التعليق الثاني الذي قمنا‬

‫بكتابته على ثالثة أسطر وهو ال‬
‫يظهر أيضا ً أمام المستخدم العادي ‪>--‬‬
‫<‪>body/‬‬
‫<‪>html/‬‬
‫تغيير لون الخلفية لصفحة ‪web‬‬
‫>"‪<BODY BGCOLOR="red‬‬
‫كيف إذا أردنا ان نجعل الخلفية صورة‬

‫>"‪<BODY BACKGROUND="IMG.jpg‬‬
‫تنسيق الفقرات‬
‫مفهوم الفقرات‪:‬‬
‫الفقرة (‪ )Paragraph‬عبارة عن مساحة يتم تخصيصها لعرض النص الذي نضعه فيها على‬
‫سطر جديد‪.‬‬
‫أنواع الفقرات‬
‫هناك نوعين من الفقرات التي يمكن إضافتها في الصفحة‪:‬‬
‫‪.‬فقرات مخصصة لعرض النص بالشكل المناسب‬
‫‪.‬فقرات مخصصة لعرض النص كما هو‬
‫الفرق بين النوعين هو أن الفقرة المخصصة لعرض النص بالشكل المناسب يتم عرض النص‬
‫الموضوع فيها بشكل مناسب لحجم الشاشة حتى يتمكن المستخدم من رؤية كل النص الموضوع‬
‫فيها بشكل سهل باإلضافة إلى أنها تقوم بإزالة أي مسافات فارغة تجد أنه ال داعي لها‪.‬‬
‫الفقرات المخصصة لعرض النص بالشكل المناسب‬
‫لعرض نص عادي في الصفحة نضع النص بداخل‬
‫>‪<p> </p‬‬
‫‪.‬‬
‫‪:‬معلومة‬
‫‪p‬‬
‫‪.‬التي تعني فقرة ‪Paragraph‬اختصار لكلمة‬
‫عند عرض النص بواسطة هذا الوسم يقوم المتصفح بإزالة أي مسافات فارغة يجد أنه ال داعي‬
‫لها (‪ )Extra White Spaces‬على النحو التالي‪:‬‬
‫‪.‬إذا وجد أكثر من مسافة بين الكلمات يبقي مسافة واحدة فقط‬
‫‪.‬إذا وجد أسطر فارغة‪ ،‬سيقوم بازلتها عند عرض المحتوى في الصفحة‬
‫إذا وجد النص موضوع على أكثر من سطر عمداً‪ ،‬سيقوم بعرض كل المحتوى على نفس‬
‫‪.‬السطر وينزل على السطر عند الحاجة فقط‬
‫>‪<p>This is a paragraph. </p‬‬
‫>‪<p>This is another paragraph. </p‬‬
‫في المثال التالي تعمدنا وضع مسافات فارغة بين الكلمات‪.‬‬

‫عند تجربة الكود الحظ كيف سيقوم المتصفح بإزالة جميع المسافات التي يجد أنه ال داعي لها‬
‫وكيف سيعرض النص بشكل جميل‪.‬‬
‫المثال الثاني‬
‫>‪<p> This paragraph contains extra spaces. </p‬‬
‫النزول على سطر جديد في الفقرة‬

‫إلعالم المتصفح أنك تريد النزول على سطر جديد بداخل الفقرة‪ ،‬يجب وضع‬
‫>‪<br‬‬
‫‪ .‬في نهاية السطر‬
‫‪br‬‬
‫‪.‬التي يقصد بها في حالتنا إيقاف العرض على نفس السطر ‪Break‬اختصار لكلمة‬
‫في المثال التالي قمنا بإعالم المتصفح أنه من بعد كلمة‬
‫‪paragraph.‬‬
‫‪ .‬يجب عرض النص المتبقي على سطر جديد‬
‫مثال‬
‫‪<p>Here we break the paragraph. <br>This will appear on a‬‬
‫>‪new line. </p‬‬
‫عرض أكثر من مسافة بين الكلمات في الفقرة‬

‫إلعالم المتصفح أنك تريد وضع أكثر من مسافة فارغة وراء بعض في النص‪ ،‬فالحل هو‬
‫استخدام الرمز ;‪ &nbsp‬الذي يعني مسافة فارغة بالنسبة للمتصفح‪.‬‬
‫كل رمز ;‪ &nbsp‬تضعه يفهمه المتصفح على أنه مسافة فارغة يجب عدم إزالتها‪.‬‬
‫في المثال التالي قمنا بإضافة ‪ 4‬مسافات فارغة في بداية النص‪.‬‬

‫مثال‬
‫‪<p> We add 4 white spaces‬‬
‫>‪at the beginning. </p‬‬
‫الفقرات المخصصة لعرض النص كما هو‬

‫لعرض النص كما يظهر بالضبط في الكود نضع النص بداخل‬
‫>‪<pre> </pre‬‬
‫‪.‬‬
‫‪pre‬‬
‫‪.‬التي تعني نص منسق مسبقا ً ‪Preformatted Text‬اختصار لعبارة‬
‫مبدئيا ً النص الوحيد الذي نعرضه كما هو في العادة هو حين نعرض كود في صفحة الويب ألننا‬
‫نريده أن يظهر بنفس الشكل الذي تم إدخاله فيه‪.‬‬
‫في المثال التالي قمنا بكتابة نص بداخل‬

‫>‪<pre> </pre‬‬
‫‪ .‬حتى يتم عرضه كما هو في المتصفح‬
‫مثال‬
‫>‪<pre‬‬
‫‪Name: Amat alsalam‬‬
‫‪Job: Programmer‬‬
‫‪Age: 23‬‬
‫>‪</pre‬‬
‫طريقة عرض خط أفقي‬

‫لعرض خط أفقي في الصفحة نضع‬
‫>‪<hr‬‬
‫‪ .‬فقط‬
‫‪hr‬‬
‫‪.‬التي تعني مسطرة أفقية ‪Horizontal Rule‬اختصار لكلمة‬
‫في المثال التالي قمنا بعرض خط أفقي بين الفقرتين‪.‬‬

‫مثال‬
‫‪<p>In Harmash.com you can learn everything you need for free.‬‬
‫>‪</p‬‬
‫>‪<hr‬‬
‫>‪<p>You can learn Algorithms, Java, C++, Python, SQL etc. </p‬‬
‫مفهوم العناوين وأنواعها‬
‫العنوان هو نص حجمه مختلف عن حجم الفقرة يتم عرضه على سطر منفرد بهدف إعطاء‬
‫المستخدم فكرة عامة عن موضوع الصفحة التي دخل إليها‪ ،‬أو فكرة عامة عن موضوع الفقرة‬
‫التي سيقرأها‪.‬‬
‫يوجد ‪ 6‬أحجام من العناوين التي يمكنك إضافتها في الصفحة تبدأ من‬
‫>‪<h1‬‬
‫الذي يعطيك أكبر عنوان وتنتهي عند‬
‫>‪<h6‬‬
‫‪.‬الذي يعطيك أصغر عنوان‬
‫في المثال التالي قمنا بعرض جميع العناوين من األكبر إلى األصغر حتى تالحظ فرق الحجم‬
‫بينهم‪.‬‬
‫مثال‬
‫>‪<h1>Heading 1</h1‬‬
‫أهمية العناوين بالنسبة لمحركات البحث‬

‫العنوان الرئيسي الذي تضعه للصفحة يعتبر أهم عنوان تضعه في الصفحة بالنسبة لمحركات‬
‫البحث (‪ )Search Engines‬مثل جوجل وياهو وغيرهما‪ .‬بعدها في األهمية يأتي مباشرة ً‬
‫العناوين الموضوعة للفقرات‪ .‬يليها العناوين الفرعية األقل أهمية الموضوعة في الفقرات‪ ،‬وفي‬
‫النهاية محتوى الفقرات نفسه‪.‬‬
‫لذلك ننصحك دائما ً بوضع عنوان الصفحة بين‬
‫>‪<h1> </h1‬‬
‫وعنوان أي فقرة بين‬
‫>‪<h2> </h2‬‬
‫وأي عنوان فرعي في الفقرة بين‬
‫>‪<h3> </h3‬‬
‫‪.‬وهكذا‬
‫مفهوم تنسيق النص‬

‫تنسيق النص (‪ )Text Formatting‬يقصد به عرض النص بشكل أفضل فمثالً إن كان هناك‬
‫كلمة مهمة في النص يمكننا عرضها بخط عريض‪ ،‬وإن كان هناك شيء تم حذفه يمكننا عرضه‬
‫خط فوقه لإلشارة إلى أنه محذوف وهكذا‪.‬‬
‫في ‪ HTML‬يوجد العديد من الوسوم الجاهزة التي يمكن استخدامها في تنسيق النص وهي ما‬
‫سنتعرف عليها في هذا الدرس‪.‬‬
‫عرض النص بخط عريض‬
‫أي كلمة أو جملة في النص تريد عرضها بخط عريض (‪ )Bold‬يمكنك وضعها بين‬
‫>‪<b> </b‬‬
‫أو بين‬
‫>‪<strong> </strong‬‬
‫‪.‬‬
‫بشكل عام استخدم‬
‫>‪<b‬‬
‫إذا أردت عرض الكالم بخط عريض واستخدم‬
‫>‪<strong‬‬
‫‪.‬في حال كان الكالم مهم‬
‫في المثال التالي قمنا بعرض كلمة في الفقرة بخط عريض باستخدام‬
‫>‪<b‬‬
‫و‬
‫>‪<strong‬‬
‫‪.‬أيضا ً‬
‫مثال‬
‫>‪<p>My name is <b>Mahmad</b></p‬‬
‫>‪<p>My name is <strong>Mahmad</strong></p‬‬
‫عرض النص بخط مائل‬

‫أي كلمة أو جملة في النص تريد عرضها بخط مائل (‪ )Italic‬يمكنك وضعها بين‬
‫>‪<I> </I‬‬
‫أو بين‬
‫>‪<I‬‬
‫إذا أردت عرض نص مائل واستخدم‬
‫في المثال التالي قمنا بعرض جملة في الفقرة بخط مائل باستخدام‬
‫>‪<I‬‬
‫مثال‬
‫>‪<p><I>Lord of the Rings</I> is a very large book. </p‬‬
‫عرض نص محذوف‬
‫أي كلمة أو جملة في النص تريد وضع خط عليها وكأنها محذوفة يمكنك وضعها بين‬
‫>‪<del> </del‬‬
‫أو بين‬
‫>‪<s> </s‬‬
‫‪.‬‬
‫بشكل عام استخدم‬
‫>‪<del‬‬
‫إذا أردت لإلشارة إلى أن الكالم قد تم حذفه استخدم‬
‫>‪<s‬‬
‫‪.‬عند اإلشارة إلى أن الكالم محذوف ألنه لم يعد صحيحا ً‬
‫في المثال التالي قمنا بعرض كالم مشطوب في الفقرة باستخدام‬

‫>‪<del‬‬
‫مثال‬
‫>‪<p>HTML is so <del>hard</del> easy to learn. </p‬‬
‫وضع خط تحت النص‬
‫أي كلمة أو جملة في النص تريد عرض خط تحتها (‪ )Underline‬يمكنك وضعها بين‬
‫>‪<u> </u‬‬
‫في المثال التالي قمنا بعرض خط تحت الكالم الموجود في الفقرة باستخدام‬
‫>‪<u‬‬
‫‪.‬‬
‫المثال األول‬
‫>‪<p><u>Name:</u> Amat alsalam</p‬‬
‫تعليم أجزاء في النص‬

‫تعليم النص (‪ )Text Marking‬فكرته وضع لون أصفر خلف جزئية محددة في النص للفت‬
‫نظر المستخدم إليها‪.‬‬
‫أي كلمة أو جملة في النص تريد تعليمها باللون األصفر يمكنك وضعها بين‬
‫>‪<mark> </mark‬‬
‫في المثال التالي قمنا بتعليم كلمة موجودة في الفقرة باستخدام‬

‫>‪<mark‬‬
‫‪.‬‬
‫مثال‬
‫>‪<p><mark>Fast food</mark> affect your body! </p‬‬
‫عرض جزء من النص بشكل مرتفع أو منخفض‬

‫في المعادالت الحسابية نتعامل كثيرا ً مع أرقام ورموز تظهر بشكل مرتفع قليالً أو منخفض قليالً‬
‫نسبةً لباقي األرقام والرموز الموجودة في نفس السطر‪.‬‬
‫في ‪ HTML‬يوجد نوعين من الوسوم التي تستخدم لهذا الغرض‪:‬‬
‫•‬ ‫أي جزء في النص تريد عرضه بشكل مرتفع قليالً عن باقي النص ضعه بين‬
‫>‪<sup> </sup‬‬
‫•‬ ‫أي جزء في النص تريد عرضه بشكل منخفض قليالً عن باقي النص ضعه بين‬
‫>‪<sub> </sub‬‬
‫معلومة‪:‬‬
‫‪sup‬‬
‫التي تعني نص مرتفع‪ ،‬و ‪ Super Script‬اختصار لكلمة‬
‫‪sub‬‬
‫‪.‬التي تعني نص منخفض ‪Sub Script‬اختصار لكلمة‬
‫في المثال التالي قمنا بعرض جزء من النص بداخل‬

‫>‪<sup> </sup‬‬
‫حتى يظهر بشكل مرتفع قليالً عنه وجزء من النص بداخل‬
‫>‪<sub> </sub‬‬
‫‪.‬حتى يظهر بشكل منخفض قليالً عنه‬
‫مثال‬
‫>‪<p>10<sup>6</sup> log<sub>2</sub> 64 = 6 Mbps</p‬‬
‫مفهوم الرابط‬
‫الرابط (‪ )Link‬او الوصالت التشعبية هي روح االنترنت‪ .‬وإذا كانت االنترنت بمجملها هي‬
‫شبكة العنكبوت فإن هذه الوصالت هي الخيوط التي تشكل هذه الشبكة وتؤلف حلقات الوصل بين‬
‫الماليين من مواقعها‪ .‬وهي في العادة عبارة عن نص يشير لعنوان صفحة أخرى عند النقر عليه‬
‫يقوم المتصفح بنقلك إليها‪.‬‬
‫أيضاً‪ ،‬قد يكون الرابط يشير لملف أو برنامج ما عند النقر عليه يقوم المتصفح بسؤالك ما إن كنت‬
‫تريد تحميله أم ال‪.‬‬
‫أشكال الروابط‬
‫•‬ ‫عند النقر عليه يتم توجيهك لصفحة أخرى أو )‪(Text Link‬يمكن وضع الرابط كنص‬
‫‪.‬تحميل ملف ما‬
‫•‬ ‫عند النقر عليها يتم توجيهك لصفحة )‪(Image Link‬يمكن وضع الرابط كصورة‬
‫‪.‬أخرى أو تحميل ملف ما‬
‫إضافة رابط في الصفحة‬

‫بشكل عام نستخدم الوسم‬
‫>‪<a‬‬
‫على هذا النحو‬
‫>‪<a href="url">text</a‬‬
‫‪.‬لعرض رابط في الصفحة‬
‫•‬ ‫مكان الكلمة‬
‫‪text‬‬
‫‪.‬نضع النص الذي نريده أن يظهر في الصفحة والذي يمكن النقر عليه‬
‫•‬ ‫مكان الكلمة‬
‫‪url‬‬
‫نضع الرابط الذي نريد توجيه المستخدم إليه عند النقر على النص الذي يظهر في‬
‫‪.‬الصفحة‬
‫في المثال التالي قمنا بإضافة رابط في الفقرة عند النقر عليه يتم توجيه المستخدم للصفحة‬
‫الرئيسية في موقع جوجل‪.‬‬
‫مثال‬
‫‪<p><a href="http://www.Googl.com">Go to‬‬
‫>‪google.com</a></p‬‬
‫إظهار تلميح عند تمرير الماوس فوق الرابط‬

‫في حال أردت إظهار تلميح عند تمرير الماوس فوق الرابط فيمكنك إضافة الخاصية‬
‫‪title‬‬
‫في الوسم‬
‫>‪<a‬‬
‫‪.‬وتمرير التلميح الذي تريد عرضه كقيمة لها‬
‫في المثال التالي قمنا بإضافة تلميح للرابط يتم إظهاره عند تمرير الماوس فوقه‪.‬‬
‫مثال‬
‫‪<p><a href="https://google.com" title="Go to‬‬
‫>‪google.com">google</a> where everything you need. </p‬‬
‫وضع رابط لبريد إلكتروني محدد‬

‫في حال أردت وضع رابط في الصفحة عند النقر عليه يقوم بفتح تطبيق البريد اإللكتروني‬
‫االفتراضي الموجود في جهاز المستخدم وتحديد الجهة التي سيتم إرسال البريد إليها قم بوضع‬
‫الكلمة‬
‫‪mailto:‬‬
‫يليها البريد اإللكتروني الذي تريده أن يتلقى رسالة المستخدم كقيمة للخاصية‬
‫‪href‬‬
‫‪.‬‬
‫في المثال التالي قمنا بإضافة رابط عند النقر عليه يقوم بفتح تطبيق البريد اإللكتروني الموجود‬
‫في جهاز المستخدم وتحديد الجهة التي سيتم إرسال البريد إليها‪.‬‬
‫مثال‬
‫‪<p><a href="mailto:someone@example.com">Send‬‬
‫>‪Email</a></p‬‬
‫إضافة رابط كصورة‬

‫في حال أردت وضع الرابط كصورة بدل وضعه كنص‪ ،‬يمكنك وضعه رابط عادي بواسطة‬
‫الوسم‬
‫>‪<a‬‬
‫‪ .‬وبداخله تقوم بوضع الصورة التي تريد فتج الرابط عند النقر عليها‬
‫ستتعلم كيفية التعامل مع الصور في درس خاص ولكن اآلن عليك معرفة أنه لوضع صورة‬
‫نستخدم الوسم‬
‫>‪<img‬‬
‫على هذا النحو‬
‫>‪<img src="image_url"/‬‬
‫‪.‬‬
‫مكان الكلمة‬
‫‪image_url‬‬
‫‪.‬نضع رابط الصورة التي سيتم عرضها‬
‫في المثال التالي قمنا بإضافة صورة عند النقر عليها يتم توجيه المستخدم للصفحة األولى في‬
‫دورة ‪.HTML‬‬
‫مثال‬
‫>‪<a href="https://www.google.com"><img src="img.jpg"></a‬‬
‫لنقم بإنشاء وصلة تشعبية تقودنا إلى الصفحة التي نريدها‬
‫>‪</a‬الصفحة الرئيسية >"‪<a href="namebage.html‬‬
‫س\\سؤال المحاضرة (تكليف)‬

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

مقدمة لتصميم الويب

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

‫مقدمة الى تصميم الويب‬

‫ماهي مواقع االنترنت‬

‫ماهي الويب )‪world wide web(www‬؟‬

‫أنواع المواقع االلكترونية‬

‫بعض مجال العمل (النطاق ‪)domain‬‬

‫‪HTML‬أنواع الوسوم في‬

‫‪HTML‬وسوم الصفحة األساسية في‬

‫أمثلة على األشياء التي يمكن إضافتها في القسم‬

‫طريقة وضع عنوان للملف‬

‫محاذاة السطور في صفحة الويب‬

‫التعداد الرقمي ‪Orderd(numbered)list‬‬

‫التعداد النقطي ‪Unordered (bulleted)list‬‬

‫‪HTML‬طريقة كتابة أسماء الوسوم ال تؤثر في‬

‫<! ‪ --‬هذا التعليق الثاني الذي قمنا‬

‫تغيير لون الخلفية لصفحة ‪web‬‬

‫كيف إذا أردنا ان نجعل الخلفية صورة‬

‫في المثال التالي تعمدنا وضع مسافات فارغة بين الكلمات‪.‬‬

‫النزول على سطر جديد في الفقرة‬

‫عرض أكثر من مسافة بين الكلمات في الفقرة‬

‫في المثال التالي قمنا بإضافة ‪ 4‬مسافات فارغة في بداية النص‪.‬‬

‫الفقرات المخصصة لعرض النص كما هو‬

‫في المثال التالي قمنا بكتابة نص بداخل‬

‫طريقة عرض خط أفقي‬

‫في المثال التالي قمنا بعرض خط أفقي بين الفقرتين‪.‬‬

‫أهمية العناوين بالنسبة لمحركات البحث‬

‫مفهوم تنسيق النص‬

‫>‪<p>My name is <strong>Mahmad</strong></p‬‬

‫عرض النص بخط مائل‬

‫في المثال التالي قمنا بعرض كالم مشطوب في الفقرة باستخدام‬

‫تعليم أجزاء في النص‬

‫في المثال التالي قمنا بتعليم كلمة موجودة في الفقرة باستخدام‬

‫عرض جزء من النص بشكل مرتفع أو منخفض‬

‫في المثال التالي قمنا بعرض جزء من النص بداخل‬

‫إضافة رابط في الصفحة‬

‫إظهار تلميح عند تمرير الماوس فوق الرابط‬

‫وضع رابط لبريد إلكتروني محدد‬

‫إضافة رابط كصورة‬

‫س\\سؤال المحاضرة (تكليف)‬

You might also like