عنصر قائمة واحد كما في

، و في
تم تشكيلها باستخدام علامة < لى> .

الممارسة 3

1. قم بإنشاء قائمة مرقمة تحت عنوان "مشاريع المنزل".

2. أنشئ قائمة ذات تعداد نقطي تحت عنوان "مناطق المنزل". سيبدو الكود الخاص بك هكذا (الشكل 12).



الشكل 12

3. عرض الصفحة في المتصفح.

يمكن تداخل القوائم داخل بعضها البعض باستخدام علامات مختلفة.

يظهر مثال على القائمة المتداخلة في الشكل. 13

الممارسة 4

1. قم بتنفيذ الكود الموضح في الشكل 13 في ملف جديد.
2. احفظ الملف في مجلد بيتيتحت الاسم سبيسوك_ vlozh. لغة البرمجة. النتيجة في الشكل 13



الشكل 13. مثال على قائمة متداخلة

أنماط الخطوط

بطاقة شعار … - يسمح لك بعرض النص بخط غامق.

بطاقة شعار … - يسمح لك بعرض النص بخط مائل.

بطاقة شعار … - يعرض النص الذي تحته خط.

على سبيل المثال:

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

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

المنخفضات والمرتفعات

بطاقة شعار < الفرعية> و الفرعية> يسمح لك بخفض النص بمقدار نصف سطر أسفل النص العادي.

بطاقة شعار < رشفة> و رشفة> يسمح لك برفع النص نصف سطر فوق النص العادي. سيظهر النص الموجود بين هذه العلامات بخط أصغر من النص العادي.

الممارسة 5

1. قم بتنسيق الاسم myhouse.ru بالخط العريض في الفقرة الأولى (الشكل 14).

الشكل 14

2. تنسيق عبارة "أكثر من 95% من المشاريع" بخط مائل تحتها خط في الفقرة الثانية (الشكل 15).

الشكل 15

3. تنسيق الحروف الفوقية حيث يتم استخدام الأمتار المربعة (الشكل 16).



الشكل 16

4. احفظ الملف. عرض عبر المتصفح. يجب أن تبدو صفحة الويب بهذا الشكل (الشكل 17).



الشكل 17

3. إدراج الصور

في مقالتنا حول كيفية إنشاء صفحة HTML، سننظر في كيفية وضع الصور على صفحة ويب.

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

لإدراج صورة، استخدم الأمر

على سبيل المثال: " image1.jpg" alt="صورة" /> !}

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

يمكن أن تكون ملفات الرسوم بالتنسيق jpg و gif و png ودائمًا في نموذج الألوانRGB.

الممارسة 6

1. بعد قائمة مناطق المنزل، قم بإدراج صور مشاريع الأكواخ في صفحة الويب مشروع_1.jpgو مشروع_2.jpgمن المجلد قرص مضغوط/html_المغلق_1 . للقيام بذلك، قم أولاً بنسخ هاتين الصورتين إلى المجلد الذي يوجد به ملف main.html. سيبدو رمز إدراج الصورة بهذا الشكل (الشكل 18).

الشكل 18

2. عرض النتيجة في المتصفح (الشكل 19).



الشكل 19

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

4. المخاطبة داخل الموقع

في درسنا الأول، كيفية إنشاء صفحة HTML، سوف نستكشف مفاهيم العنونة في HTML.

دعونا نفكر في خيارات المعالجة عندما تحتاج إلى وضع الصور في ملف html الذي قد يكون موجودًا في مجلدات مختلفة بالموقع.

هناك نوعان من العنونة:

• مطلق؛
• نسبي.

المخاطبة المطلقة (باستخدام أسماء محركات أقراص الكمبيوتر) غير مستعمل(الشكل 20)



الشكل 20

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

مثال 1 توجد الصورة في نفس المجلد الذي يوجد به مستند HTML (الشكل 21). أي أن الصورة وملف HTML على نفس المستوى نظام الملفاتويمكن لمستند HTML إرفاق الصورة على الفور. في هذه الحالة، فإن إدراج صورة في صفحة ويب سيبدو بهذا الشكل. / > الشكل 21 مهمة عملية7 تنفيذ المثال 1 (إنشاء مجلد، ملف doc.html، التقاط أي صورة). صورة

مثال 2 صورة صورة. jpgموجود في المجلد مجلد_1 . يوجد مستند HTML خارج المجلد_1. أولئك. في نظام ملفات الموقع، يقع مستند HTML بمستوى واحد أعلى من الصورة (الشكل 22). تحتاج إلى إدخال المجلد Folder_1، ثم إرفاق الصورة الشكل 22 مهمة عملية8 قم بتنفيذ المثال 2 (إنشاء مجلد، ملف doc.html، التقاط أي صورة). يجب إدراج الصورة في صفحة الويب doc.html.

مثال 3 صورة صورة. jpgموجود في المجلد مجلد_1 ، والذي يقع بدوره في المجلد مجلد_2 . يوجد مستند HTML خارج هذه المجلدات (الشكل 23). وبالتالي، فإن مستند HTML أعلى بمستويين من الصورة. ضروري: أدخل المجلد Folder_2، ثم أدخل المجلد Folder_1، ثم أرفق الصورة. الشكل 23 مهمة عملية9 تنفيذ المثال 3 (إنشاء مجلدات، ملف doc.html، التقاط أي صورة). يجب إدراج الصورة في صفحة الويب doc.html.

مثال 4 مجلد_1 . الصورة موجودة خارج المجلد_1. أولئك. يقع مستند HTML بمستوى واحد أقل من الصورة (الشكل 24). تحتاج إلى الخروج من المجلد_1، ثم إرفاق الصورة. يشار إلى ترك المجلد بالبناء ../ (نقطتان وشرطة مائلة إلى اليمين). / > الشكل 24 مهمة عملية10 تنفيذ المثال 4 (إنشاء مجلد، ملف doc.html، التقاط أي صورة). يجب إدراج الصورة في صفحة الويب doc.html.

مثال 5 يوجد مستند HTML في المجلد مجلد_1 والذي يقع بدوره في المجلد مجلد_2 . الصورة خارج هذه المجلدات. وبالتالي، فإن مستند HTML يقع في مستويين أقل من الصورة (الشكل 25). ضروري: الخروج من المجلد Folder_1, الخروج من المجلد Folder_2, إرفاق صورة. نظرًا لأنك تحتاج إلى الخروج مرتين، فإن التصميم ../ تكرر مرتين. / > الشكل 25 الممارسة 11 تنفيذ المثال 5 (إنشاء مجلدات، ملف doc.html، التقاط أي صورة). يجب إدراج الصورة في صفحة الويب doc.html.

مثال 6 (الشكل 26) ضروري: الخروج من المجلد Folder_1, الخروج من المجلد Folder_2, انتقل إلى المجلد Folder_3، انتقل إلى المجلد Folder_4، إرفاق الصورة pic.jpg الشكل 26 الممارسة 12 تنفيذ المثال 6 (إنشاء مجلدات، ملف doc.html، التقاط أي صورة). صورة يجب إدراجها في صفحة الويب doc.html.

مثال 7 (الشكل 27) ضروري: الخروج من المجلد Folder_1, الخروج من المجلد Folder_2, الخروج من المجلد Folder_3, أدخل المجلد Folder_4، إرفاق الصورة pic.jpg. نظرًا لأنك تحتاج إلى الخروج ثلاث مرات، فإن التصميم ../ تكرر ثلاث مرات. الشكل 27 الممارسة 13 تنفيذ المثال 7 (إنشاء مجلدات، ملف doc.html، التقاط أي صورة). صورة يجب إدراجها في صفحة الويب doc.html. وبالتالي، بغض النظر عن عدد المرات التي تحتاج فيها إلى الخروج، فإننا نضع البناء ../ مرات عديدة، وإذا دخلنا، نقوم بإدراج أسماء المجلدات التي واجهناها على طول الطريق.

الممارسة 14

1. قم بإنشاء مستند html وأدخل صورة فيه بحيث يكون المسار إلى الصورة كما يلي.

" ../../../../../../folder_1/folder_2/folder_3/image.jpg" / >

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

ونتيجة لاستكمال هذا الموضوع، يجب أن يكون لديك الملفات التالية:

• template.html
• main.html
• spisok_vlozh.html
  
• داخل المجلدبيتييجب أن يكون هناك مجلدعام_ لغة البرمجةمع ملفات الموقع في المستقبل
• سبعة أمثلة على المعالجة النسبية ومثالين كمثالين للتحكم من مهمة عملية 14

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

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

وصف عام

يعد ملف HTML عبارة عن صفحة واحدة من الموقع، على الرغم من إمكانية الجدال حول ذلك، إلا أن حقيقة أن ملفًا واحدًا يشكل صفحة واحدة أمر واضح في البداية.

يبدأ ملف HTML برأس DOCTYPE، مما يشير إلى أن نوع الملف هو HTML. تتم الإشارة إلى كافة عناصر الصفحة (العلامات) بين قوسين زاوية. كل زوج ("<» и «>") يتضمن علامة HTML واحدة. عادةً ما تأتي علامات HTML في أزواج، أي أن لكل "علامة" يوجد "/tag". كلاهما محاط بين قوسين زاوية. هناك علامات مفردة، وأكثرها شيوعًا هي "br/" - الانتقال إلى السطر التالي.

أكبر علامة في الملف هي HTML نفسها، والتي تحتوي على علامتين فقط: HEAD وBODY. في الأول، يتم عمل أوصاف مختلفة، مع الإشارة إلى الروابط إلى الملفات الأخرى المطلوبة على الصفحة، والتي قد تكون موجودة مخطوطات PHPوجافا سكريبت. والثاني يسجل محتوى الصفحة. أيضا في شكل العلامات والبرامج النصية.

صفحة HTML بسيطة

ويرد أدناه مثال على إنشاء مثل هذه الصفحة في المقالة. دعونا ننظر إليها بعناية.



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

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

• الكلمات الرئيسية ووصف الصفحة؛
• روابط لملفات أخرى (*.css و*.js).

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

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



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

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

قسم الجسم

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

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



HTML عبارة عن علامات وليست نصوص برمجية. وفي النهاية، يعرض المتصفح محتوى الصفحة فقط، وعلاماتها فقط. لا يوجد كود PHP هناك.

تتمتع JavaScript بمكانة خاصة، همها خدمة الصفحة ليس فقط في لحظة التحميل (التحميل الزائد)، ولكن أيضًا في اللحظات التي تكون فيها الصفحة في متصفح الزائر، ويقوم بدراستها.

يظهر أدناه مثال بسيط (قسم الجسم فقط).



وفي متصفح الزائر يبدو هكذا:



لم يحدد الكود الشكل الذي يجب أن تبدو عليه العناصر التي سيعرضها المتصفح. كل التصميمات المرئية موجودة في قواعد CSS. في هذه الحالة، في ملف Mcss/scPhpWordRW.css الذي تم ربطه (راجع المثال الأول لصفحة HTML).

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



يوضح هذا مدى بساطة وصف علامة scLogo_vDoc، وهذا الوصف هو أنه في حالتها الطبيعية تعرض العلامة الصورة vDoc-logo.png، وعندما يكون الماوس فوقها، يتم عرض vDoc-logo-h.png.

هيكل أوصاف HTML

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

يتكون الاسم، في حالة العلامة المقترنة، من الاسم نفسه (tagName) والأقواس الزاوية ("<» + tagName +«>")، لو نحن نتحدث عنحول بداية العلامة، و""إذا سجلت نهايتها.

يوجد أدناه مثال لصفحة HTML تصف السمات في النص.



يمكن أن تحتوي العلامة على سمات، وفي هذه الحالة يتم وضعها بمسافة بعد اسم العلامة قبل قوس زاوية الإغلاق ">". السمات، إذا كانت العلامة تحتوي عليها، تتم كتابتها فقط في بداية العلامة. يعتبر محتوى العلامة هو ما يقع بين بداية العلامة ونهايتها.

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



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

بالإضافة إلى العناصر البسيطة، يقدم HTML وصفًا للجداول والنماذج. هناك طلب كبير على هذه العناصر في "إنشاء مواقع الويب اليومية".

وصف الجدول: العلامات TABLE، TR، TD

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



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

يظهر بوضوح مثال لصفحة HTML تصف جدولًا بسيطًا في المقالة.



يظهر هنا جدول مكون من ثلاثة صفوف في ثلاثة أعمدة، وفي الصف الأول، بدلاً من علامة TD، تم استخدام علامة TH - عنوان العمود. لا تختلف هاتان العلامتان بشكل خاص، ولكن من الممكن تمامًا استخدام العلامة الأولى لتمييز الصف الأول من الجدول، وفي CSS يمكنك إرفاق النمط الخاص بك بـ TH، مما يميزه عن TDs الأخرى.

وصف النموذج: العلامات FORM، INPUT

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

مثال لصفحة HTML تصف نموذجًا بسيطًا:



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

باستخدام HTML

إن معرفة لغة النص التشعبي هي وظيفة في أي تخصص في مجال برمجة الإنترنت، لكن إذا كنت بحاجة إلى كتابة برامج بلغة PHP أو JavaScript، فأنت بحاجة إلى معرفة HTML + CSS بشكل مثالي.

تمت الإشارة إلى لغة PHP في المثال السابق. تعمل لغة PHP على الخادم، وبالتالي تنتقل الصفحة التي تحتوي على هذا النموذج من الخادم إلى المتصفح مع ملء الحقول. على وجه الخصوص، تلقت وظيفة TestOnBlur المذكورة في علامة INPUT (معالج حدث onblur) جميع المعلمات كحقول نصية.



يتم تشغيل JavaScript في المتصفح، ولكي يعمل الزر بشكل صحيح لإرسال البيانات إلى الخادم، أي البناء: onclick=jQuery("#to").val("cart")، يجب أن يكون لديك فكرة ليس فقط عن ماهية jQuery، ولكن أيضًا عن ماهية #to، val، cart. بتعبير أدق، تحتاج إلى معرفة علامات HTML الأساسية و قواعد عامةتطبيق أنماط CSS عليهم.

وهذا يكفي لتحسين مؤهلاتك بسرعة في أي تخصص في مجال برمجة الإنترنت.

مرحبا عزيزي قراء المدونة. مع هذه المقالة سوف نبدأ في تعلم الأساسيات لغة HTML.

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

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

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

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

,

, .

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

لغة HTML وعلاماتها

ظهرت النسخة الأولى من لغة HTML في عام 1992. في وقت عام 2013، يجري تطوير المواصفات نسخة جديدة HTML رقم 5. تم تطوير هذه المواصفات بواسطة اتحاد شبكة الويب العالمية، أو W3C للاختصار. تقوم منظمة W3C بتطوير معايير ويب أخرى. يمكنك التعرف على هذه المعايير على موقعهم الإلكتروني www.w3.org. بالمناسبة، العديد من متصفحات الويب تدعم بالفعل بعض ميزات HTML 5.

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










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




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







بعد ذلك، احفظ صفحة الويب التي تم إنشاؤها في ملف يسمى Index.html. في هذه الحالة، في مربع حوار حفظ الملف، يجب عليك تعيين الترميز على UTF-8 ووضع اسم الملف بين علامتي اقتباس، وإلا فسيقوم برنامج Notepad بإضافة ملحق txt إليه، وسيتم تسمية ملفنا بـ Index.htm.txt:

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



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

ما هي العلامة؟

الآن دعونا نتحدث أكثر عن بنية الصفحة. دعونا نلقي نظرة على القطعة:

موقع عن السيارات

. نرى هنا النص الذي يظهر على الصفحة كعنوان، محاطًا بالعلامات

و

. ما هي العلامة في HTML؟

علامة HTMLهي كلمات ورموز عادية محاطة بين قوسين، على سبيل المثال

,

, . لذا ضع علامة

هي علامة الافتتاح، العلامة

علامة الإغلاق، ويسمى النص الموجود بينهما محتوى العلامة. العلامة أيضا

والعلامة

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



علامة مقترنة جدًا

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

—

.

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

هو عنصر كتلة.

هذا كل شيء بالنسبة لي!!! نراكم في المشاركات القادمة!

: HTML - لغة ترميز النص التشعبي (أو لغة ترميز النص التشعبي).

لذلك دعونا نتعرف عليه بشكل أفضل.

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

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

عند الحفظ بشكل صحيح، يجب أن يتغير رمز الملف إلى رمز المتصفح (Internet Explorer افتراضيًا).

الآن افتح هذا الملف باستخدام برنامج "المفكرة" وانسخ الكود التالي هناك.

هذه هي أول صفحة ويب!



احفظه وافتحه في المتصفح.

تهانينا، لقد قمت للتو بإنشاء صفحة الويب الأولى الخاصة بك.

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

لكن صفحتنا ليس لها عنوان.



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



حفظ، تحديث، معجب. صفحتنا الآن لديها عنوان.



وصف العلامات.

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

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

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

والعلامة الأخيرة في الكود الخاص بنا هي - . أيضًا علامة مقترنة ( و

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

وفي الدرس التالي سنتحدث عن أنواع العلامات وقواعد كتابتها.





شعبية في الفئة:



كيفية إنشاء مقطع كاريوكي على جهاز الكمبيوتر؟

يقرأ



يلزم تطبيق Origin للعب، ولكن لم يتم تثبيت FIFA عليه...

يقرأ



تسجيل صفحة شخصية على شبكة التواصل الاجتماعي الفيسبوك

يقرأ



كيفية إجراء فحص Nmap Nmap بسيط

يقرأ



أحدث المقالات



كيفية تدوير الصورة بضع درجات...

يقرأ



تعطيل الإعلانات في متصفح ياندكس حيث...

يقرأ



استكشاف أخطاء الاتصال بشبكة Wi-Fi وإصلاحها على...

يقرأ



تغيير كلمة المرور في ملف تعريف Windows 10

يقرأ



تعليمات لإعداد أجهزة التوجيه اللاسلكية...

يقرأ



كيفية اختيار القرص الصلب وأيهما أفضل للشراء...

يقرأ



Meizu للدمى. دليل المكالمات والعناوين....

يقرأ



تحميل برنامج بي دي اف ماستر

يقرأ



5visa.ru
إنترنت. الوسائط المتعددة. الملاح. تعليم. بواسطة. البرامج الثابتة. البرامج. نصيحة. تثبيت

• طبعة المشروع
• الإعلان على الموقع

• جهات الاتصال
• خريطة الموقع

© 2023 الإنترنت. الوسائط المتعددة. الملاح. تعليم. بواسطة. البرامج الثابتة. البرامج. نصيحة. تثبيت

قمة