صفحة HTML وبنيتها المحددة بواسطة العلامات الرئيسية

دعونا نرى كيف تبدو صفحة الإنترنت الأكثر عادية من الداخل.

• تعتبر بنية HTML، بشكل عام، أساس كل صفحة ويب.
• يوجد اليوم عدة أنواع من مستندات HTML. كل نوع مستند له بنية HTML الخاصة به (التفاصيل في أسفل الصفحة).
• إن بنية HTML الأولية الصحيحة هي مفتاح التوافق عبر المستعرضات للموقع.

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

مثال على هيكل الوثيقة:

دعونا نلقي نظرة على علامات HTML التي تحدد بنية الصفحة

• - إلزامي، تحديد وثيقة HTML.
• - تعريف قسم بمعلومات الخدمة، ويحتوي على تعليمات لمحركات البحث والمتصفحات والبرامج النصية.
• - تحديد العنوان الرئيسي لصفحة الويب.
• - إلزامي، تحديد الجزء المرئي من الوثيقة.
• - تحديد عنوان المستوى الثالث.
• - تحديد الفقرة. راجع درس فقرات HTML

هيكل وثيقة HTML | كتابة كود الصفحة

تسلسل الإجراءات هو كما يلي:

1. اكتب كود HTML الخاص بالصفحة في المفكرة:

4. افتح IE (Internet Explorer) أو متصفح افتراضي آخر. نحاول في قائمته العثور على الملف Index.html المحفوظ على الكمبيوتر وفتحه. يمكنك أيضًا العثور على ملف وفتحه في أي متصفح في النافذة التي تظهر بعد كتابة مجموعة من مفتاحين على لوحة المفاتيح: Ctrl وO - اضغط باستمرار على Ctrl ثم اضغط على الحرف اللاتيني O.

لمزيد من دراسة المادة، تحتاج إلى ما يلي:
يجب أن يكون لديك ببساطة عدة متصفحات مختلفة على جهاز الكمبيوتر الخاص بك. قم بتنزيل Mozilla Firefox وOpera مجانًا وتابع درسنا.

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

بنية HTML 4.01 الصحيحة

ينبغي أن يكون هذا هو الهيكل الأولي لصفحة HTML:

هيكل وثيقة HTML

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

هل نجح كل شيء بالنسبة لك؟ - لذلك كنت حذرا وفعلت كل شيء بشكل صحيح.

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

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

يمكن أن يحتوي أي مستند WWW على نص منمق ومنسق ورسومات وارتباطات تشعبية لموارد الإنترنت المختلفة. ولتحقيق كل هذه الإمكانيات، تم تطوير لغة خاصة لوصف مستندات WWW، تسمى HyperText Markup Language (HTML)، أي لغة HyperText Markup Language.

وصف HTML لصفحة الويب عبارة عن مجموعة من التعليمات التي يتم تفسيرها بواسطة برنامج المتصفح.

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

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

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

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

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

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

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

تعد أوراق أنماط CSS محاولة لفصل تفاصيل تصميم الصفحة عن بنيتها ومحتواها.

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

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

< Как работает браузер

أهلا بالجميع!

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

• . سوف نتعلم كيفية تحرير كود موقع الويب باستخدام هؤلاء المحررين؛
• . سنساعد روبوت البحث على فهم بنية الصفحة؛
• . سنكتشف مدى صحة تجميع كود الموقع والعثور على الأخطاء؛

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

أساسيات HTML

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

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

تتكون لغة الترميز من علامات خاصة تساعد المتصفح على تحديد:

• هيكل الوثيقة؛
• موقع عنصر معين؛
• الغرض من العنصر
• تضمين ملفات الطرف الثالث؛
• والكثير الكثير.

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

هيكل HTML

يحتوي أي مستند HTML على بنية أولية يجب اتباعها بدقة. تبدو هكذا:

عنوان الصفحة محتوى الصفحة