القائمة الرئيسية

الصفحات

أساسيات تصميم الويب سريع الاستجابة مع HTML5 و CSS3 الدرس الاول

 بعض مقالات برمجة الويب تقديم محتوى شامل دون محاولة شرحه بشكل كامل. يمكن أن يؤدي ذلك إلى قراء لديهم فهم ضعيف واحتفاظ ضعيف بالمحتوى. في هذا الكتاب ، نأخذ بعين الاعتبار المقدار المناسب للمحتوى المطلوب تقديمه في كل فصل ،



بحيث توجد فرصة كبيرة للتفسيرات والتعلم. نحن نحاول إشراك القراء باستخدام لهجة ممتعة ومحادثة. من المرجح أن يحتفظ القراء الذين يشاركون بما يقرؤون. من المرجح أن يحفر القراء الذين يستمتعون بعمق ويتوقون لمعرفة المزيد.


 على الرغم من أننا نأخذ الوقت الكافي لتوضيح بناء جملة HTML و CSS وجافا سكريبت بعناية ، إلا أننا ندرك مدى أهمية تطوير مهارات الإبداع وحل المشكلات اللازمة لتصبح بارعا في برمجة الويب. مع وضع ذلك في الاعتبار ، نقدم المحتوى بطريقة تدعم


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



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


 الدرس الاول:من تصميم الويب سريع الاستجابة مع HTML5 و CSS3




 مقدمة هل سبق لك الاطلاع على الويب وتساءلت عن كيفية عمل صفحات الويب الخاصة بها؟

 إذا كان الأمر كذلك، وهذا الكتاب هو لك. في الواقع ، حتى لو لم تفكر في كيفية إنشاء صفحات الويب ، فإن هذاالسلسه  لا يزال مناسبًا لك.


كل ما تحتاجه هو عقل منطقي واهتمام. يأخذك هذ ا الدروس  في رحلة تتعلم فيها إنشاء صفحات ويب مفيدة وجذابة وتفاعلية. لذلك تسلق على متن الطائرة والتمتع بالرحلة! لجعل هذا الكتاب في متناول القراء ذوي الخلفية الصغيرة في أجهزة الكمبيوتر ،





 نبدأ ببطء  إذا توصلت إلى شيء تعرفه بالفعل ، فلا تتردد في تخطيه. إذا كنت تعرف بالفعل كيفية البرمجة ، فربما تريد تخطي بعض أساسيات البرمجة عندما نصل إلى JavaScript. ولكن كن مطمئنًا أنه ما لم تكن تعرف HTML و CSS و JavaScript بالفعل ،


 فإن الغالبية العظمى من محتوى هذا الكتاب يجب أن يكون جديدًا عليك. بعد كل شيء ، نريد منك أن تحصل على قيمة أموالك من هذا الكتاب. لنبدأ بوصف مختصر للويب ، وهو اختصار لـ World Wide Web. معظم الناس يقولون "الويب" بدلاً من "الشبكة العالمية" ، وسنتابع هذا الاتفاق.

 الويب عبارة عن مجموعة من المستندات ، تسمى صفحات الويب ، يتم مشاركتها (بالنسبة للجزء الأكبر) من قبل مستخدمي الكمبيوتر في جميع أنحاء العالم. هناك أنواع مختلفة من صفحات الويب تقوم بأشياء مختلفة ، ولكنها على الأقل تعرض المحتوى على شاشات الكمبيوتر. بكلمة "محتوى" ، نعني النصوص والصور وآليات إدخال المستخدم مثل مربعات النص والأزرار. يوضح الشكل  صفحة ويب نموذجية. لاحظ نص صفحة الويب والصور ومربعات النص والأزرار. لاحظ أيضًا عنوان صفحة الويب


الموضحة في شريط عنوان الشكل. عنوان صفحة الويب هو الموقع الذي توجد به صفحة الويب على الإنترنت. الحديث عن الإنترنت ، ما هو؟ إنها مجموعة من عدة مليارات من أجهزة الكمبيوتر المتصلة في جميع أنحاء العالم. يتم تخزين كل صفحة ويب على أحد أجهزة الكمبيوتر تلك. يوضح الشكل 1.1 موقع "محادثات TED". لزيارته ، افتح متصفحًا (مثل Google Chrome و



 Microsoft Edge و FireFox) وأدخل عنوان صفحة الويب الموضحة في شريط عنوان الشكل. في بداية هذا الكتاب ، سنركز على عرض النص ، مثل "محادثات 2400+ لتحريك فضولك" في الجزء العلوي من الشكل

 بعد ذلك ، سنركز على ظهور المحتوى المعروض. ثم انتقل إلى الهياكل التنظيمية والصور ومقاطع الصوت ومقاطع الفيديو. أخيرًا ، سنركز على تطبيق ضوابط إدخال المستخدم. على سبيل المثال ، في الشكل



أزرار. "buttons"



 تلك هي الضوابط. ستتعرف على عناصر التحكم هذه ، بالإضافة إلى المزيد من عناصر التحكم ، في الفصول العديدة الأخيرة. في هذا الفصل الأول، ونحن نتمسك مع الأساسيات، حتى تتمكن من الحصول على وتشغيلها بسرعة. على وجه التحديد، ونحن نبدأ مع بعض المفاهيم السائدة التي تشرح عملية التنمية صفحة ويب ونشرها. ثم، ونحن نقدم البنى الأساسية التي سوف تستخدم لوصف وعرض محتوى صفحة الإنترنت. بعد ذلك، نقدم لمحة خاطفة من أوراق الأنماط المتتالية (CSS)، والتي سوف تستخدم لعرض محتوى صفحة ويب في ارضاء بطريقة مهيأ. أخيرًا ، نقدم نبذة مختصرة عن اللغة الأساسية المستخدمة لكتابة كل الويب



صفحات HTML."pages—HTML."



موقع الويب عبارة عن مجموعة من صفحات الويب ذات الصلة التي يتم تخزينها عادةً على جهاز كمبيوتر خادم ويب واحد. خادم الويب هو نظام الكمبيوتر التي تمكن المستخدمين من الوصول إلى صفحات الويب المخزنة على جهاز الكمبيوتر الخادم الإنترنت. مصطلح "خادم الويب" يمكن أن يشير إلى برنامج صفحة الوصول إلى شبكة الإنترنت التي يتم تشغيلها على جهاز الكمبيوتر، أو أنه يمكن الرجوع إلى جهاز الكمبيوتر نفسه. لإنشاء موقع على شبكة الانترنت، وسوف تحتاج هذه الأمور: (1) محرر النص، (2) أداة تحميل / النشر، وخدمة (3) استضافة المواقع، و (4) المتصفح.



محررين النص البرمجى




هناك العديد من برامج تحرير النصوص المختلفة ، بدرجات متفاوتة من الوظائف. برنامج Microsoft Notepad مجاني ولا يوفر وظائف خاصة على الويب. لاستخدامها ، يقوم مطور الويب ببساطة بإدخال النص.

ويظهر النص كما هو. على الرغم من أنه من الممكن استخدام محرر نص عادي مثل Notepad ،



 إلا أن معظم مطوري الويب يستخدمون نوعًا من محرري النصوص - أداة تأليف ويب. تحتوي أدوات تأليف الويب المختلفة على.



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



إدخاله حاليًا. غالبًا ما تسمى آلية الإكمال التلقائي هذه intellisense وتسمى أحيانًا قائمة الاختيار. ميزة أخرى شائعة في جميع أدوات تأليف الويب هي WYSIWYG ، والتي يطلق عليها "wizeewig". إنها تعني "ما تراه هو ما ستحصل عليه". يعني WYSIWYG أنك تقوم بتحرير النص الخاص بك ، فأنت في موقع ويب.



ويمكن الحصول على برامج اضافيه  لتحرير لغات البرمجه  أفضل 10 مواقع دعم مجاني للمبرمجين والمطورين الويب



ويوجد ادوات  كثير لتصميم الويب   ولاكن انا  افضل  Visual Studio. Visual Studio هو من Microsoft ، لذلك فهو ليس مجانيًا. ولكن الخوف لا ، Microsoftophiles. إذا كنت تخطط لاستخدام Visual Studio لأغراض غير تجارية ، فيمكنك تنزيل Microsoft Visual Studio Community مجانًا (وهذا يعني أنك - الطلاب وأعضاء هيئة التدريس والمساهمين فمشروع مفتوح المصدر). يتضمن Visual Studio Community جميع وظائف الإصدار المحترف في Visual Studio.1. ويوجد

هناك الكثير. من أدوات تأليف الويب الأخرى التي نرحب بك لتتعلمها بنفسك. يعمل Visual Studio وفروعه على Windows ولكن إذا كان لديك جهاز كمبيوتر Mac (intosh) ، فتحقق من أداة Adobe Web Dreamweaver للتأليف على الويب. يعمل على كل من ويندوز وماك.



يمكن لك البحث فى  Google عن أدوات أخرى لتحرير نصوص الويب - معظمها مجاني وبعضها جيد جدًا! في العادة ، تتيح أدوات تأليف الويب للمطورين إنشاء ليس فقط صفحات الويب ، ولكن أيضًا البرامج الأخرى. يشار عادةً إلى أدوات تأليف الويب للأغراض العامة هذه على أنها بيئات تطوير متكاملة ، أو بيئات تطوير متكاملة (IDEs) لفترة قصيرة.



عمليات تحميل صفحة الويب بعد إدخال نص صفحة الويب الخاصة بك على جهاز الكمبيوتر المحلي الخاص بك باستخدام IDE المفضل لديك ، قد ترغب في نشره. النشر يعني أنك تقوم بتحميل صفحة الويب الخاصة بك على كمبيوتر خادم الويب حتى يتمكن المستخدمون الآخرون من الوصول إليها على الويب. توفر بعض IDEs ، مثل Dreamweaver ، إمكانيات تحميل مضمنة ، ولكن لا توفر IDEs الأخرى ، مثل Visual Studio. بالنسبة إلى IDEs التي لا توفر إمكانيات تحميل مضمنة ، ستحتاج إلى استخدام أداة منفصلة لتحميل الملفات. هناك الكثير من أدوات تحميل الملفات. على موقع هذا الكتاب ، نحن نقدم تعليميًا لتعلم كيفية تثبيت واستخدام أداة تحميل ملف مجانية وبديهية تسمى WinSCP.



خدمة استضافة الويب لكي تعمل أداة تحميل الملفات مثل WinSCP ،




 يجب أن يكون لديك كمبيوتر خادم ويب لتخزين الملفات التي تم تحميلها. حتى يمكن الوصول إلى الملفات التي تم تحميلها كصفحات ويب على الويب ، يحتاج كمبيوتر خادم الويب لديك إلى خدمة استضافة ويب. لا يلزم مطور الويب عادة القلق بشأن برنامج خدمة استضافة الويب. إذا كان مطور الويب جزءًا من مؤسسة متوسطة إلى كبيرة الحجم ، فإن تقنية المعلومات الخاصة بالمؤسسة (IT)




سيقوم القسم بتثبيت وصيانة خدمة استضافة الويب. من ناحية أخرى ، إذا كان مطور الويب جزءًا من مؤسسة صغيرة جدًا أو ليس جزءًا من مؤسسة على الإطلاق ، فسوف يحتاج المطور إلى إعداد خدمة استضافة الويب أو الاعتماد على شركة استضافة ويب عامة (مثل GoDaddy. كوم) للقيام بذلك. بغض النظر عن المسؤول عن خدمة استضافة الويب ، تحتاج جميع خدمات استضافة الويب إلى آلية لتلقي الملفات التي تم تحميلها من أداة تحميل الملف. عادة ، هذه الآلية هي خادم FTP (بروتوكول نقل الملفات) ، وهو برنامج يتم تشغيله على كمبيوتر خادم الويب. الشكل



1.2 هو وصف مصور لكيفية ملاءمة خادم FTP مع الباقي



 عملية إنشاء الموقع.




المستعرضات يعرض الجزء العلوي من الشكل 1.2 الجزء الأخير من تجربة الموقع: الوصول إلى المستعرض. المتصفح عبارة عن برنامج يمكّن المستخدم من استرداد صفحة ويب وعرضها. وفقا ل HTTP: // ع. statcounter.com ، أشهر المتصفحات لأجهزة الكمبيوتر هي Google Chrome ، ومتصفحات Microsoft (Microsoft Edge و Internet Explorer) ، و Mozilla2 Firefox ، مع Google Chrome في المرتبة الأولى. المتصفحات الأخرى هي Safari (لأجهزة Mac) ، Opera ، ومتصفح Android الافتراضي. يتمتع Safari و Android بشعبية خاصة مع الأجهزة المحمولة.



صفحة ويب مثال ملاحظة الشكل 1.3



، مما يدل على صفحة ويب بسيطة كانساس سيتي الطقس. قبل أن تظهر لك التعليمات البرمجية خلف الكواليس لصفحة مدينة كانساس سيتي الطقس، نحتاج أولا أن يذهب أكثر من بعض المفاهيم الأولية. سنبدأ مع عنوان الموقع. رسميا، ومن المعروف أن قيمة عنوان موقع ويب







كعنوان URL ، والذي يشير إلى محدد موقع الموارد. هذا الاسم ليس كل هذا الحدس ، لذلك فقط تذكر أن عنوان URL هو عنوان موقع ويب. إليك عنوان URL لصفحة الطقس في Kansas City في الشكل 1.3: http://teach.park.edu/~jdean240/lecture/weather.html يشير http إلى بروتوكول نقل النص التشعبي ، حيث يمثل البروتوكول مجموعة من القواعد والتنسيقات لتبادل الرسائل بين أجهزة الكمبيوتر. بعد http يأتي محدد ،



: // ، ثم اسم كمبيوتر خادم الويب الذي يخزن صفحة الويب. على سبيل المثال ، يتم تعليم كمبيوتر خادم الويب. يأتي بعد ذلك المجال الذي يصف كيفية العثور على خادم الويب على الإنترنت. في هذا المثال ، المجال هو park.edu. بعد ذلك ،



 هناك سلسلة من الأدلة والدلائل (تسمى أيضًا المجلدات والمجلدات الفرعية) التي تشير إلى مكان تخزين صفحة الويب على كمبيوتر خادم الويب. هذا يسمى المسار. على سبيل المثال ، المسار هو ~ jdean240 / lecture. يشير



 ~ (التلدة) في اليسار إلى أن الدليل هو دليل رئيسي لحساب المستخدم.



 ليس هناك شرط لاستخدام ~ للدليل الرئيسي للمستخدم. إنها اتفاقية عادية في الجامعات ، حيث يحب المستخدمون (الطلاب والمدرسون) القيام بأمور خاصة بهم ، لكن معظم الشركات لا تستخدمها. في المثال ، بعد الدليل الرئيسي ~ jdean240 ، هناك / ثم المحاضرة. مصطلح المحاضرة هو دليل فرعي للدليل الرئيسي ،



 و / هو محدد يفصل الدليل الرئيسي عن الدليل الفرعي.




في المثال ، بعد الدليل الفرعي للمحاضرة ، يوجد / ثم weather.html. عبارة weather.html هي اسم ملف صفحة الويب ، و / هو محدد آخر. هذه المرة ، يفصل / الدليل الفرعي عن اسم ملف صفحة الويب. في الشكل 1.3 ، كل الأشياء التي تراها أسفل شريط العناوين هي عناصر صفحة الويب - h1 و hr و p و div. سيكون لدينا المزيد ليقوله حول هذه العناصر في وقت لاحق ، ولكن هنا مجرد مقدمة موجزة في الوقت الحالي. يستخدم عنصر h1 لتنفيذ عنوان صفحة الويب ، مع وضع الحرف "h" في h1 في "العنوان". يتم استخدام عنصر hr لتنفيذ خط أفقي ، مع وضع "h" و "r" الشكل 1.3 صفحة الطقس في مدينة كانساس سيتي



عنصر h1 عنصر ساعة عنصر ع لتحميل صفحة الويب ، أدخل عنوان URL لصفحة الويب في شريط العناوين. عنصر div 6 الفصل 1 مقدمة في برمجة الويب ل "الأفقي" و "القاعدة" ، على التوالي. يتم استخدام عنصر p لتنفيذ فقرة.



أخيرًا ، يتم استخدام عنصر div لتجميع الكلمات معًا كجزء من قسم داخل صفحة ويب. هناك عناصر إضافية تُستخدم لتنفيذ صفحة Kansas City Weather ، ولكنها ليست بديهية مثل العناصر التي وصفناها. على سبيل المثال ، هناك عنصر نصي يشكل المنطقة البيضاء بالكامل أسفل شريط العناوين. في المستقبل ، سنعرض كيفية تنفيذ هذا العنصر ،



 بالإضافة إلى جميع العناصر الأخرى في صفحة Kansas City Weather. لكن أولاً تحية للدور المركزي للعناصر في صفحة ويب. تحتوي عناصر صفحة الويب على محتوى صفحة الويب ، وهو الجزء الأكثر أهمية في صفحة الويب. بعد تحديد العناصر التي تستخدم هذه العناصر وتنفيذها ، ستحتاج إلى التركيز على تنسيق المحتوى



 سنشرح كيفية تنسيق المحتوى باستخدام CSS. اختياريا ، يمكنك إضافة سلوكيات لبعض أو كل العناصر. في وقت لاحق من الكتاب ، سنشرح كيفية إضافة سلوكيات باستخدام JavaScript. على سبيل المثال ، في صفحة Kansas City Weather ، يمكنك إضافة سلوك إلى عنصر h1 ، بحيث عندما تنقر عليه ، تصبح الفقرة التالية باللون الأزرق.



سيناريو غريب نوعا ما ، لكنك تحصل على الفكرة.



علامات HTML الآن سنقوم بوصف كيفية تنفيذ عناصر لصفحة ويب. لتنفيذ عنصر لصفحة ويب ، ستحتاج إلى استخدام العلامات. على سبيل المثال ، إذا كنت تريد تنفيذ عنصر قوي (من أجل التركيز على محتوى العنصر وعرضه باستخدام boldface) ، فقم بإحاطة المحتوى بعلامات <strong>. إليك كيفية تنفيذ عنصر قوي لكلمة "جدا":



كانت Caiden سعيدة <strong> جدًا </ strong> عندما خرجت سنها أخيرًا.



استخدام العلامات هو السمة الرئيسية للغة الترميز. لماذا يطلق عليه "العلامات"؟ لغة الترميز "ترميز" وثيقة من قبل الأجزاء المحيطة بمحتواها مع العلامات. يتم تطبيق صفحات الويب باستخدام HTML ،



 والتي تعني لغة توصيف النص التشعبي. أنت تعرف بالفعل معنى "الترميز". يشير "التشعب" في "النص التشعبي" إلى قدرة HTML على تنفيذ الارتباطات التشعبية. الارتباط التشعبي (أو رابط مختصر)



هو المكان الذي تنقر فيه على نص أو صورة للانتقال إلى صفحة ويب أخرى. لذا HTML هي لغة تدعم علامات الترميز للتنسيق والقدرة على الانتقال إلى صفحات الويب الأخرى. لتبسيط عملية إنشاء صفحة الويب ،



 يتيح لك خيار WYSIWYG (لأدوات تأليف الويب) إخفاء علامات HTML. لسوء الحظ ، عند إخفاء علامات HTML ، يفقد المطور بعض التحكم ، وتميل صفحات الويب الناتجة إلى ذلك. حتى إذا كانت أداة تأليف الويب الخاصة بك تنشئ تعليمات HTML البرمجية نظيفة عندما تكون في وضع WYSIWIG ، فإننا نوصي بشدة بإدخال جميع العلامات بوضوح ، على الأقل حتى الآن. سيساعدك ذلك على تعلم تفاصيل HTML حتى تتمكن من فهم مشكلات التعليمات البرمجية الدقيقة وتصحيحها. تأتي معظم علامات HTML ، وليس كلها ، في أزواج مع علامة البدء وعلامة النهاية. على سبيل المثال ، تستخدم التعليمة البرمجية التالية علامة البدء <h1> وعلامة النهاية </h1>:

العنكبوت للمعلومات
العنكبوت للمعلومات
العنكبوت للمعلومات هو مدونه تعليمه يهتم بكل ما هو جديد في عالم الانترنت اذا كان مشرفي المواقع او الألعاب المجانية كما أيضا تهتم ببجي موبيل, وبرامج اختراق الألعاب والاخبار المحلية والعالمية, كما نوفر للمبتديين شروحات عن اختراق الألعاب وأحدث الألعاب وإصلاح مشاكل الألعاب والمزيد وهو موقع مجانا 100%.. إذا كان لديكم أي استفسار لا تتردد في الاتصال بنا عبر الفيس بوك او تويتر او اليوتيوب