العناصر النشطة لصفحات الويب هي. العناصر الأساسية لصفحة الويب

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

ما هي صفحة الويب؟

يخبرنا الفاحص في درس في علوم الكمبيوتر: "ضع قائمة بالعناصر الرئيسية لصفحة الويب". ماذا نقول له في المقابل؟ بادئ ذي بدء ، دعنا نتحدث عن ماهية صفحة الويب من حيث المبدأ.

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

مكان ودور صفحات الويب في هيكل المواقع

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

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

مبدأ استخدام النص التشعبي

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

إذا أخبرنا مدرس علوم الكمبيوتر: "ضع قائمة بالعناصر الرئيسية لصفحة ويب" ، فيمكننا أن نبدأ بشكل صحيح في سرد ​​مكونات المستند المقابل ، والتي تم إنشاؤها باستخدام لغة ترميز HTML. لذلك ، في البداية ، دعونا نلقي نظرة على بعض النقاط النظرية المتعلقة بـ HTML.

بنية HTML: العلامات

كيف يقرأ المستعرض البيانات المطلوبة حول صفحة الويب من مستند HTML؟ بسيط جدا.

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

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

صفات

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

المحتوى

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

عناصر صفحات الويب

"لذا ضع قائمة بالعناصر الرئيسية لصفحة الويب ، أخيرًا!" - يعيد المعلم. "بكل سرور" - نجيب عليه. ما الذي يتضمنه هيكل نوع الوثائق قيد الدراسة؟ دعنا نتفق على أننا سننظر في هذا الجانب في سياق عناصر HTML لصفحة الويب. أي أن عرضها في المتصفح - ما يراه المستخدم على الشاشة - سوف يثير اهتمامنا بدرجة أقل. النقطة المهمة هي أن خوارزميات HTML المقابلة ، والتي على أساسها يعرض البرنامج المحتوى بنفس الطريقة ، يمكن أن تكون مختلفة. وهذه هي خصوصية لغة HTML: يمكن عرض الصورة المطلوبة على صفحة الويب طرق مختلفة... في الوقت نفسه ، يمكن أن تكون متكافئة من حيث تكاليف العمالة لمنشئ صفحة الويب بطرق مختلفة ، وتتحمل قدرًا مختلفًا من الجهد والوقت لتنفيذها.

عناصر صفحة الويب: الرأس

العناصر القياسية لصفحة الويب ، كما قد تبدو ، قليلة جدًا من حيث العدد. في الواقع ، لا يوجد سوى اثنين منهم - العنوان والجسم الرئيسي للوثيقة. في الوقت نفسه ، يمكن أن يكون لكل منهم هيكل معقد نوعًا ما.

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

كيف يتم التقاط عنوان صفحة الويب باستخدام HTML؟ بسيط جدا. تتم كتابة علامة الفتح أولاً ، والتي تبدو دائمًا مثل HEAD بأقواس زاوية ، ثم محتوى العنوان ، ثم علامة الإغلاق. إنها مكتوبة ، بالطبع ، في أعلى مستند الويب.

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

الجسم الرئيسي لصفحة الويب

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

كل نوع من أنواع المحتوى له علاماته الخاصة. قد تحتوي بنية الجسم الرئيسي لمستند الويب على أوامر HTML ، والتي تُستخدم أيضًا لتنسيق النص - على سبيل المثال ، لمنح الخط لونًا وحجمًا معينًا وخصائص أخرى.

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

علامات HTML الأساسية

لذا ، من أجل دراسة ماهية عناصر صفحة الويب بمزيد من التفصيل ، دعنا ندرس بمزيد من التفصيل جوهر علامات HTML الأساسية. لقد قدمنا ​​بالفعل بعضًا منها أعلاه - على وجه الخصوص ، تلك التي بمساعدة المستعرض يقرأ رؤوس صفحات الويب ويحدد مكان الجزء الرئيسي من المستند.

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

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

مسؤول عن معالجة الصور بواسطة المتصفح. كما يسمح لك بوضع سمات مختلفة تنظم حجم الصورة وموضعها على الصفحة.

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

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

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

خصوصية أدوات تطوير الويب

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

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

عناصر صفحة الويب

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

العنصر الأول في صفحة الويب التي سنلقي نظرة عليها هو عنوانها. يمكن تنفيذه في شكل نصي ورسوم بيانية ، ومع ذلك ، في كلتا الحالتين ، يجب أن يكون موجودًا في الجزء العلوي من المستند. في بعض الأحيان يتم دمج قائمة لاختيار الترميز السيريلي والأزرار للتبديل من اللغة الروسية إلى إصدار اللغة الإنجليزية للموقع مع العنوان ، إذا تم تقديم مورد الويب هذا بلغتين. العنوان الفرعي للمستند ، كقاعدة عامة ، هو المساحة المخصصة لوضع لافتة إعلانية. في معظم الحالات ، يتم تضمين لافتة في الجزء العلوي من صفحة الويب شرط أساسيتسجيل موقع ويب في خدمات تبادل الشعارات - الأنظمة التي تعلن عن مورد قمت بإنشائه مقابل عرض إعلانات أعضاء آخرين في شبكة تبادل الشعارات على صفحات موقع الويب الخاص بك. مقاس معياريعادةً ما تكون الشعارات المنشورة تحت عنوان المستند 468 × 60 بكسل. إذا كنت تستخدم تخطيطًا ثابتًا للصفحة ، فسيكون عرض عنوان المستند حوالي 640 بكسل: ترجع هذه القيمة بشكل أساسي إلى الحاجة إلى ضمان عرض المستند بشكل صحيح على الشاشات بدقة شاشة تبلغ 640 × 480 بكسل ولتجنب ظهور شريط تمرير أفقي يجعل من الصعب عرضه. من الواضح أن عرض اللافتة في هذه الحالة سيكون أقل بكثير من عرض العنوان ، بسبب ذلك في جزء الصفحة حيث تخطط لتخصيص مساحة للإعلان ، سيتم تشكيل مساحة غير مشغولة ، والتي يمكن ملؤها بشعار الشركة المالكة لهذا الموقع أو رابط لخادم يقوم بتنفيذ استضافة الويب. بالطبع ، الشعار ليس ضروريًا دائمًا: كقاعدة عامة ، يتم تضمينه في صفحة الويب فقط إذا كان الموقع يركز على التجارة.

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

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

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

لذلك ، قمنا بتحليل جميع المكونات الرئيسية لصفحة الويب وموقعها المحتمل بالنسبة لبعضها البعض.

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

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

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

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

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

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

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

تحدد معرفة مكان وكيفية وضع الكلمات الرئيسية على صفحة الويب نجاح أو فشل حملة تحسين محركات البحث.

تحتوي كل صفحة ويب على 5 عناصر حيث يجب أن تضع كلماتك الرئيسية:

1. عنوان الصفحة (علامة العنوان)
2. الكلمات الرئيسية للصفحة (الكلمات الرئيسية ذات العلامات الوصفية)
3. وصف الصفحة (وصف العلامة الوصفية)
4. نص بديل للصور (علامة Alt)
5. محتوى صفحة الويب (علامة النص الأساسي)

من بين جميع العناصر المذكورة أعلاه لصفحة الويب ، فإن الأهم من ذلك كله هو محتوى الصفحة (النقطة 5). المزيد عن هذا لاحقًا.

في الوقت الحالي ، دعنا نأخذ هذه القائمة بالترتيب.

رقم العنصر 1. عنوان الصفحة (علامة العنوان)

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

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

يتذكر!عنوان صفحة الويب هو هي وصف قصير.

بالإضافة إلى ما سبق ، يتم استخدام محتوى علامة العنوان كعنوان لصفحة الويب عند إضافتها إلى المفضلة في مستعرض الإنترنت.

رقم العنصر 2. الكلمات الرئيسية للصفحة (الكلمات الرئيسية ذات العلامات الوصفية)

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

من كل ما قيل ، يترتب على ذلك أن هذه العلامة اختيارية ، ولكن يمكنك استخدامها فقط لغرضها المباشر.

افصل بين الكلمات الرئيسية بفاصلة. ضع أهم الكلمات الرئيسية في أعلى القائمة ، ثم بترتيب تنازلي من حيث الأهمية. توقفت محركات البحث عن الاهتمام بالحالة التي يتم فيها كتابة الكلمات الرئيسية ، لذلك يمكن الآن كتابة جميع الكلمات الرئيسية بأحرف صغيرة.

رقم العنصر 3. وصف الصفحة (وصف العلامة الوصفية)

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

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

رقم العنصر 4. نص بديل للصور (علامة Alt)

علامات Alt هي وصف نصي لمحتوى الصورة ، أي إذا لم يتم تحميل الصورة لسبب ما ، وكانت هذه الصورة تحتوي على نص بديل ، فسيتم عرض هذا النص بدلاً من الصورة.

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

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

رقم العنصر 5. محتوى صفحة الويب (علامة النص الأساسي)

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

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

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

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

لغة HTML

يمكن أن توجد صفحات الويب بأي تنسيق ، ولكن يتم اعتماد Hyper Text Markup Language كمعيار - لغة ترميز النص التشعبي المصممة لإنشاء نص غني بالصور والصوت والرسوم المتحركة ومقاطع الفيديو وروابط النص التشعبي إلى مستندات أخرى منتشرة في جميع أنحاء الويب. الفضاء ، وتقع على نفس الخادم أو الكائن جزء منمن نفس مشروع الويب.

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

يوجد HTML في العديد من النكهات ويستمر في التطور ، ولكن من المحتمل أن يتم استخدام بنيات HTML في المستقبل. دراسة HTML والتعرف عليها بشكل أعمق ، وإنشاء مستند في البداية تعلم HTMLومن خلال توسيعه قدر الإمكان ، يمكننا إنشاء صفحات ويب يمكن للكثيرين مشاهدتها متصفحات الانترنتسواء الآن أو في المستقبل. لا يستبعد هذا إمكانية استخدام طرق أخرى ، مثل طريقة القدرات المحسنة التي يوفرها Netscape Navigator أو Internet Explorer أو أي برنامج آخر.

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

تم التصديق على HTML من قبل اتحاد شبكة الويب العالمية. وهي مدعومة من قبل العديد من المتصفحات الرئيسية ، ومن المحتمل أن تصبح أساس جميع البرامج المتعلقة بالويب تقريبًا.

مبادئ إنشاء صفحة ويب ، العناصر الرئيسية لصفحة الويب

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

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

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

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

لإنشاء صفحات الويب ، تحتاج إلى أي متصفح - Internet Explorer أو جوجل كروم Mozilla Firefox ، أو أفضل كليهما ، نظرًا لأن العديد من عناصر HTML يتم تقديمها بشكل مختلف في برامج مختلفةالمشاهدة ومن المستحسن للغاية التحكم في هذا الاختلاف.

بالإضافة إلى ذلك ، تحتاج إلى أي محرر نصوص ، على سبيل المثال ، لـ إعداد HTML- الملفات والمتصفح - لعرض والتحكم في ما تم إنجازه.

لإنشاء صفحة ويب ، فإن الخطوة الأولى هي إنشاء بنية الموقع. الموقع عبارة عن خادم باسم فريد وعنوان دائم ، متصل فعليًا بـ WWW ، أو موجود فعليًا على خادم آخر أكبر.

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

هناك بعض القواعد البسيطة التي تسمح للزائر أن يفهم واجهة الموقع [# 10].

1. يجب ألا يحتوي الموقع على معلومات غير مفيدة ، يجب أن يكون الخط سهل القراءة. يجب أن تكون الرسومات واضحة ومعبرة وسريعة التحميل.

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

3. يجب على زائر الموقع أن يجد بسهولة المعلومات التي يهتم بها وأن يكون قادرًا على الحصول على معلومات شاملة (وصف في شكل نص بالإضافة إلى بعض الصور).

4. يجب تصنيف المعلومات إلى مجموعات. قد يكون من الممكن توفير القدرة على البحث عن المنتجات بالاسم والوصف.

5. يجب أن يحتوي الموقع على أقسام معلومات:

مع بيانات عن الشركة (مجال النشاط ، العنوان ، أرقام هواتف الاتصالإلخ.)؛

العناصر الرئيسية لصفحات الويب:

1. العنوان / الشعار (الرأس)

3. المحتوى / المحتوى (مربع نص)

4. عناصر التنقل

5. معلومات عن مطوري الموقع

تحتوي أي صفحة ويب على مجموعة معينة من العناصر القياسية التي تعتبر مكونات مطلوبة لكل مورد إنترنت.

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

الجزء الرئيسي من المستند مشغول بما يسمى حقل النص - المنطقة التي يوجد بها المحتوى الدلالي للصفحة: نص معلومات إعلامية ورسوم توضيحية.

تسمى العناصر المدرجة أيضًا "المحتوى" (من اللغة الإنجليزية ، المحتوى - المحتوى). يعتمد وضع مربع النص بشكل أساسي على كيفية قيام مصمم الويب بوضع باقي المستند.

الشكل 1. نموذج لمحتوى الموقع

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

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

الشكل 2. معلومات الاتصال

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

نتيجة لذلك ، يتم تقليل تسلسل الإجراءات لتطوير موقع ويب إلى الخوارزمية البسيطة التالية:

1. تحديد الأهداف وتحديد المهام الرئيسية.

2. إنشاء قائمة بالأقسام المواضيعية في المستقبل.

3. تطوير البنية المنطقية والمادية للمورد.

4. إعداد مخطط التصميم وتخطيط الموقع وجدول التخطيط غير المرئي.

5. إعداد المواد النصية.

6. إعداد المواد الرسومية في شكل متجه.

7. تصدير الصور المتجهة إلى تنسيق نقطي.

8. تحسين جميع الصور.

9. إنشاء قوالب لصفحات الويب.

10. بناء صفحات الويب وكود التصحيح.

11. التحقق من هوية عرض صفحات الويب بدرجات دقة وألوان مختلفة للشاشة ومتصفحات مختلفة.

أساسيات تصميم الويب

أساسيات تصميم الويب

تاريخ تطور الإنترنت. ظهور الإنترنت في بيلاروسيا. WEB - التصميم. تاريخ المنشأ. متطلبات تصميم الموقع وفقًا لمعايير W3C. المتصفحات الرئيسية. هيكل الموقع والأوصاف والعلامات.

إنترنت ( إنجليزي الإنترنت ، الشبكات المترابطة - الشبكات المترابطة) - عملاق شبكة الكمبيوتر، وتتألف من العديد من الشبكات الأصغر المتصلة ببعضها البعض وتغطي الكرة الأرضية بأكملها.

بدأ تاريخ الإنترنت في منتصف القرن الماضي: في عام 1957في الولايات المتحدة ، تم إنشاء وكالة التنمية المتقدمة (ARPA) ، والتي كانت تعمل في مجال التطوير العسكري.

في عام 1989 أنشأ Tim Berners-Lee HTML.

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

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

في 1973 كانت هذه هي السنة الأولى التي "تتواصل" فيها أجهزة الكمبيوتر من مختلف البلدان من خلال Arpanet. أصبحت الشبكة دولية.

استمر تطوير الشبكة بخطى سريعة. في عام 1987 ، تجاوز عدد المضيفين 10000. في عام 1988 ، انضمت كندا وأيسلندا والدنمارك والنرويج وفرنسا وفنلندا والسويد إلى NSFNET. في عام 1989 ، تجاوز عدد المضيفين 100.000. وتم ربط بريطانيا العظمى ، واليابان ، وألمانيا ، والنمسا ، وإسرائيل ، وإيطاليا ، والمكسيك ، ونيوزيلندا ، وهولندا بالشبكة. انضمت روسيا إلى الشبكة في عام 1990. بيلاروسيا أيضًا في أوائل التسعينيات.

بدأ عدد المستخدمين المتصلين في الزيادة بوتيرة سريعة كل عام. في عام 1995أصبح الويب أكبر وسيلة اتصال جماهيري وأكثرها ديناميكية ويمكن الوصول إليها.

WEB - التصميم. تاريخ المنشأ.

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

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

أيضًا ، يرتبط التسويق عبر الإنترنت (التسويق عبر الإنترنت) ارتباطًا مباشرًا بتصميم المواقع ، أي الترويج والإعلان عن المورد الذي تم إنشاؤه ، تحسين محرك البحث

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

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

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

سهولة الاستخدام(قابلية استخدام اللغة الإنجليزية - حرفيًا "قابلية الاستخدام" ، "قابلية التطبيق") - فيما يتعلق بـ تكنولوجيا الكمبيوتريشير مصطلح قابلية الاستخدام إلى مفهوم تطوير واجهات مستخدم البرنامج ، مع التركيز على أقصى قدر من الراحة النفسية والجمالية للمستخدم.

متطلبات تصميم مواقع الويب وفقًا لمعايير W3C

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

يجب أن يوفر الموقع راحة واكتمال عناصر التنقل.

يجب أن يكون الوصول إلى المعلومات الأساسية والقوائم وعناصر التنقل الأخرى متاحًا دون التمرير الأفقي تمامًا نافذة مفتوحةالمستعرض بدقة شاشة 1024 × 768 بكسل.

قد يختلف تصميم (ترتيب كتل المعلومات ، التصميم المرئي) للصفحة الرئيسية عن تصميم الصفحات النموذجية مع الحفاظ على وحدة نمط الموقع.

من المستحسن وجود كائنات رسومية جميلة ، واستخدام عناصر رسومية صغيرة ولكن أنيقة (أيقونات ، "مرئيات") في تصميم صفحات الموقع.

يتم تشجيع التضمين الطفيف لعناصر الرسوم المتحركة.

يجب أن يكون تصميم الموقع "خفيفًا" بدرجة كافية من حيث كمية العناصر الرسومية وضمان أعلى سرعة ممكنة لتحميل صفحات الموقع.

توفير تعريف سهل للقسم والقسم الفرعي الذي يقع فيه المستخدم.

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

يجب أن يوفر التصميم إمكانية تطوير هيكل الموقع من خلال تطوير وتضمين أقسام وأقسام فرعية جديدة فيه.

مستعرض الويب ، أو المستعرض.

حاليًا ، يختار كل مستخدم متصفحه "الخاص به". الأكثر شعبية هي Opera و Firefox. ويتبعهم Internet Explorer (IE).

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

الموقع متعدد المستعرضات هو موقع احترافي ومختص يبدو بنفس القدر عند عرضه في متصفحات مختلفة. يجب أن يضمن الموقع العرض الصحيح للبيانات في المتصفحات التالية:

Internet Explorer (الإصدار 5.5 وما بعده):

Opera (الإصدار 7.0 وما بعده) ؛

Mozilla Firefox (الإصدار 1.0 وما بعده).

وضع الألوان الرئيسي للشاشات ، والذي يجب عرض الموقع بشكل صحيح عليه ، هو 15 بت ألوان وما فوق (عدد الألوان 65536 وما فوق).

تطوير هيكل مشروع الويب

وفقًا للمفهوم العام للمشروع والأهداف والغايات المحددة ، يتم تحديد هيكل مشروع الويب ، وهي:

§ هيكل البيانات ، تعريف العلاقات بين جداول قاعدة البيانات ، هياكل نقل البيانات من مصادر خارجية;

§ تحديد مستوى أتمتة معالجة البيانات ، وتطوير هيكل إدارة البيانات ؛

§ تحديد النماذج وترتيب مظهرها ؛

§ هيكل واجهة المستخدم: عناصر القائمة وعناصر التنقل ومستويات التداخل المطلوبة ؛

§ تطوير مخططات تصميم المشروع (عدد الخيارات موافق عليه مسبقا).

تطوير.

§ التصميم: الحل الفني والفني. إنشاء نمط موقع ويب أصلي: مخطط الألوان ، وإنتاج عناصر التصميم ، واللافتات ، والعناصر الرسومية ؛

§ البرمجة: إنشاء عناصر البرنامج.

§ تنفيذ الملاحة ضمن نموذج المشروع المعتمد.

§ المحتوى الأساسي ؛

لغة ترميز النص التشعبي HTML

• (من لغة ترميز النص التشعبي الإنجليزية - "لغة ترميز النص التشعبي") هي لغة ترميز قياسية للمستندات في الشبكة العالمية... يتم إنشاء جميع صفحات الويب باستخدام HTML (أو XHTML). يتم تفسير HTML بواسطة المتصفح ويتم تقديمه في مستند سهل الاستخدام.
• جنبا إلى جنب مع XML ، يشار إلى HTML عادة باسم "لغات ترميز النص". في الواقع ، فإن دور هاتين اللغتين ، بالإضافة إلى التنسيق نفسه المسمى "نص عادي" ، يتجاوز المعالجة. معلومات نصية.
• يبدأ تعلم أي لغة كمبيوتر بالإلمام بمكوناتها الأساسية - المشغلين والتعبيرات والمتغيرات. من وجهة النظر هذه ، لغة HTML بسيطة للغاية ، كي لا نقول إنها بدائية: بالإضافة إلى النص العادي ، يحتوي ملف HTML على نوع واحد فقط من هياكل التحكم ، ما يسمى العلامات.

الكلمات الموضوعة بين قوسين معقوفين "<” и “>”تسمى واصفات HTML أو علامات HTML.

المكونات الرئيسية لصفحة الويب

شريط التنقل الرئيسي للموقع (القائمة). القائمة البديلة والقائمة الرئيسية المكررة. الروابط وأنواع الروابط وتنفيذها. العناصر الرئيسية لتصميم الموقع. تخطيط صفحة الموقع. نظام ألوان الموقع. تحسين رسومات الويب وإعداد الصور لصفحة الويب. مبادئ العمل بالصور.

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

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

يمكن تكرار العديد من عناصر القائمة الرئيسية بتنسيق قائمة بديلة.إذا كان العنصر الرئيسي أفقيًا ، فهو عمودي ، أو العكس.

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

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

يجب إبراز الأقسام التي تمت زيارتها بلون مختلف حتى يتمكن الزائر من رؤية المكان الذي تواجد فيه وأين لم يكن موجودًا.

الارتباط بالصفحة الرئيسية.من المستحسن بشدة أن يكون لديك رابط للصفحة الرئيسية في جميع صفحات الموقع. أصبح استخدام شعار الموقع كارتباط للصفحة الرئيسية أو كأيقونة منزل قاعدة مقبولة بشكل عام.

التوفر هو موضع ترحيب القائمة الرئيسية المكررةفي أسفل الصفحة.

العناصر الرئيسية لتصميم الموقع.

تصميم- هو تصميم الأشياء والسيارات والديكورات الداخلية على أساس مبادئ الجمع بين الراحة والاقتصاد والجمال.

الفنون التصويرية- فن تصوير الأشياء بخطوط كفاف وضربات بدون دهانات (أحيانًا - استخدام بقع ملونة) (قاموس Ozhegov).

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

تتمثل المهمة الرئيسية لتصميم الويب في خلق جو مريح لاستيعاب المعلومات على صفحات موقع الإنترنت.

لا يوجد حل واحد يناسب الجميع لتصميم صفحات الويب. هناك خيارات مختلفة تمامًا لتنفيذ تصميم الويب ، والتي تتضمن تطوير العناصر التالية:

تخطيط صفحات موقع الويب ؛

الفنون التصويرية.

تخطيط صفحة الموقع.

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

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

نظام ألوان الموقع.

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

لإنشاء تصميم فعال ، من الضروري مراعاة عدد من المتطلبات المفروضة على اختيار نظام الألوان:

يجب أن يتوافق السطوع والنغمة والتشبع اللوني مع أسلوب الشركة في الموقع ؛

يتم اختيار الألوان مع مراعاة الجمهور المستهدف لهذا المورد ؛

يجب ألا يتجاوز عدد الألوان الأساسية المستخدمة ، إن أمكن ، ثلاثة ؛

يجب أن تتفاعل الألوان المستخدمة في الموقع وتتوافق مع بعضها البعض ؛

يجب أن يتوافق استخدام اللون مع القواعد الأساسية للمنطق ؛

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

من الضروري أن يتوافق نظام الألوان مع شكل عرض المادة ومحتواها وجمهور الموقع.

تحسين رسومات الويب ، وإعداد الصور لصفحة الويب. مبادئ العمل بالصور.

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

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

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

يجب ألا يتجاوز متوسط ​​وقت تحميل الصفحة 30 ثانية بسرعة اتصال 28.8 كيلوبت في الثانية. يسمح بزيادة أوقات التحميل صفحات فرديةحتى 35 ثانية ، ولكن ليس أكثر من 30٪ من إجمالي عدد الصفحات على الموقع. الصفحة الرئيسيةيجب ألا يزيد وقت التحميل عن 40 ثانية

على ال صفحة على الإنترنتيمكنك استخدام ملفات الرسوم بتنسيقات JPG و GIF و PNG. GIF هو تنسيق خاص للشبكة: يحتوي على حجم ملف صغير ، وإمكانية التطوير السلس والرسوم المتحركة ، بالإضافة إلى تأثير الشفافية ، مما يسمح لك باستخدام الصورة كـ "خلفية" على الصفحة أو في الجداول. لكن منذ يحتوي ملف gif على 256 لونًا ، وهو غير فعال لتخزين الصور. من ناحية أخرى ، لا يوجد لدى JPG قيود على عمق الألوان ، ولكن أيضًا إمكانيات الرسوم المتحركة. صيغة جديدةالملفات التي تدعم كلاً من العمق والشفافية -PNG ، لها عيوب لا تراها المتصفحات القديمة. لذلك ، إذا كنت لا تأخذ في الاعتبار مستخدمي البرامج القديمة ، فمن الممكن تمامًا تضمين اختبار pings في صفحاتك. لتضمين صورة في صفحة ، تحتاج إلى وصف ارتباط لها:

حيث SRC (من س ou RC e -source) = ملف الصورة بتنسيق تنسيق gifأو jpg أو png تحتوي على الصورة.
يمكنك تعيين الموضع النسبي للصورة والنص عن طريق تمكين سمة المحاذاة = "":

الأنواع التالية من المحاذاة ممكنة:
محاذاة = "وسط" - نسبة إلى مركز الخط
محاذاة = "يسار" - يتدفق النص حول الصورة إلى اليمين
محاذاة = "يمين" - نفس الشيء على اليسار

عند استخدام المحاذاة إلى اليسار أو اليمين يمكن تضمينها في علامة img معلمة إضافيةمسافة بادئة حول الصورة ، بحيث لا يتم الضغط على الصورة بالقرب من النص الخاص بك. المعلمة VSPACE = "n" - تنشئ مسافة بادئة رأسية ، و HSPACE = "n" - أفقيًا بمقدار n بكسل. وبالتالي ، فإن علامة الصورة المكتوبة بشكل صحيح مع النص المتدفق إلى اليمين ستبدو كما يلي:

نص.

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

معلومات مماثلة.