كود قالب الصفحة. مع إطار واسع. العلامات الاختيارية في HTML5
الدرس "كيفية إنشاء صفحة HTML" مخصص لتخطيط صفحة ويب بسيطة للغاية. سوف تتعلم كيفية حفظ ملف HTML بشكل صحيح، وتعيين الترميز اللازم لعرض صفحة HTML بشكل صحيح في المتصفح، ووضع النصوص والقوائم والصور على صفحة ويب.
بعد دراسة هذا الدرس، ستتعلم بالفعل كيفية إنشاء صفحة الويب الأولى الخاصة بك، كما في الشكل 1.
الصورة 1
1. هيكل مستند HTML
ملفات HTML لها الامتداد .htmأو .لغة البرمجة.
عادة ما يتم إقران العلامات: علامات البداية والنهاية. أولي -<>، أخير>، على سبيل المثال
و
تسمى العلامة المقترنة أيضًا حاوية .
لا تحتوي بعض العلامات على زوج علامات مطلوب، وتسمى هذه العلامة أعزب
. يتم إغلاق هذه العلامة عن طريق كتابة شرطة مائلة لليمين قبل قوس زاوية الإغلاق، على سبيل المثال
يبدو هيكل مستند HTML كما يلي (الشكل 2).
الشكل 2
توضيحات للإدراج في الشكل 2
في السطر الأول، يشير بناء DOCTYPE إلى أحد معايير تخطيط صفحة الويب.
بين العلامات
و
يحتوي على جزء الرأس. ويشمل التصميم
الشكل 3
سِجِلّ يعني الترميز السيريلي بحيث يتم عرض الحروف بشكل صحيح في المتصفح. إذا لم يتم تحديد الترميز، فيمكن عرض الخطوط في بعض الأحيان على النحو التالي (الشكل 4)
الشكل 4
نفس الصفحة بعد إدخال الترميز (الشكل 5)
الشكل 5
ملحوظة: بدلاً من التشفير مجموعة الأحرف = "windows-1251"يمكنك استخدام الترميز مجموعة الأحرف = " utf -8" ، والذي يسمح لك بإنشاء مواقع متعددة اللغات، حيث أن جميع الشخصيات الموجودة في العالم موجودة فيه. في هذه الحالة، في المفكرة++ ضروري قبل التخطيط والحفظلغة البرمجة-اختر الملف من القائمة العلوية الترميزات - التشفير إلى ترميز عالمي -8 بدون بوم (UTF-8 بدون قائمة مكونات الصنف)
هذه المعلومات كافية لإنشاء المستند الأول.
الممارسة 1
1. قم بإنشاء مجلد، قم بتسميته ليمنزل. يجب أن تكون أسماء جميع المجلدات والملفات مكتوبة بأحرف لاتينية صغيرة، لا يمكن استخدام الأسماء الروسية. اجعل الأسماء قصيرة وذات معنى.
سنقوم بكتابة كود صفحة الويب في المفكرة. من الأفضل عدم استخدام برنامج "المفكرة" الذي يأتي مع نظام التشغيل Windows، ولكن استخدام برنامج "متقدم" أكثر، على سبيل المثال برنامج Notepad++. توزيع المفكرة ++موجود في المجلد قرص مضغوط/توزيع.
2. افتح المفكرة ++. تأكد من ضبط ترميز ANSI، للقيام بذلك في القائمة الموجودة في العنصر الترميزات، ضبط الموقف ترميز إلى ANSI.
3. اكتب الرمز من القائمة في الشكل 2 في برنامج Notepad++.
سيكون الكود الموجود في القائمة في الشكل 2 بمثابة قالب لنا في المستقبل حتى لا نضطر إلى كتابة بنية مستند HTML في كل مرة. انسخ بناء DOCTYPE من هنا (لا داعي لحفظه أو حفظه).
4. احفظ الملف باسم template.htmlفي المجلد بيتي، أثناء وجوده في الميدان نوع الملفثَبَّتَ كل الانواع(الشكل 6)، وإلا فلن يتم فتح صفحة الويب الخاصة بك في المتصفح.
الشكل 6
5. بعد الحفظ، قم بالتشغيل نموذج. لغة البرمجةنقرتين متتاليتين. ونتيجة لذلك، سيبدو ملفك بهذا الشكل (الشكل 7).
الشكل 7
إذا لم تحصل على النتيجة كما في الشكل أعلاه، فهذا يعني على الأرجح أن هناك خطأ في الكود. يكفي وجود حرف واحد خاطئ ولن يتم عرض صفحة الويب بشكل صحيح. تحقق من الرمز مرة أخرى باستخدام القائمة الموجودة في الشكل 2.
6. داخل المجلد بيتيإنشاء مجلد عام_ لغة البرمجة. عادةً ما يكون هذا الاسم هو المجلد الذي يتم تخزين الموقع فيه عند استضافته على استضافة حقيقية (يمكن أيضًا تسمية هذا المجلد بـ www).
7. احفظ الملف نموذج. لغة البرمجةفي المجلد عام_ لغة البرمجةتحت اسم جديد رئيسي. لغة البرمجة.
8. من مجلد قرص مضغوط/ html_css_1افتح الملف text_main.txtفي برنامج Notepad++، وافتح أيضًا الملف المحفوظ تحت الاسم رئيسي. لغة البرمجة
9. انسخ كل النص من الملف text_main.txtوالصقه في الملف رئيسي. لغة البرمجةبدلاً من عبارة "محتوى صفحة الويب". في العلامة
10. حفظ التغييرات ومعاينة الملف رئيسي. لغة البرمجةفي المتصفح. سترى نصًا غير منسق. ولا يقوم المتصفح حتى بعمل فواصل الأسطر الموجودة في النص المصدر (الشكل 8).
الشكل 8
2. التنسيقالويب-الصفحات الموسومةلغة البرمجة
يغطي هذا البرنامج التعليمي لكيفية إنشاء صفحة HTML العلامات الأساسية المستخدمة لترميز صفحة الويب.
تم تصميم العلامات لتنسيق نص صفحة الويب. يمكن الاطلاع على قائمة العلامات بمزيد من التفاصيل في المجلد قرص مضغوط/الدليللغة البرمجةفي الدليل html401_en.chm(في عنصر القائمة العلوي عناصر).
دعونا نلقي نظرة على بعض العلامات.
عناصر ح 1, ح 2, ح 3, ح 4, ح 5, ح 6
تتم هيكلة نص المستند داخل العنصر < جسم> باستخدام العناوين المحددة بواسطة العناصر h1، h2، h3، h4، h5، h6.
يتم إقران عناصر العنوان، لذلك يجب أن يكون لها فتحة < ح1> والإغلاق ح1> العلامات.
يحتوي HTML على ستة مستويات للعناوين: h1 (الأعلى)، h2، h3، h4، h5 وh6 (الأسفل). تشبه وظيفة عناصر العناوين أنماط العناوين العادية في برامج تحرير النصوص.
تظهر تأثيرات هذه العلامات الستة في الأشكال أدناه. في صورة واحدة مصدر(الشكل 9)، ومن ناحية أخرى - العرض في المتصفح (الشكل 10).
الشكل 9
الشكل 10
تقسيم النص إلى فقرات
بطاقة شعار < ص> يضبط بداية الفقرة ويدرج مسافة في أعلى الفقرة - مسافة بادئة لفصل هذه الفقرة عن الفقرة السابقة.
قوة كسر الخط
بطاقة شعار
يسمح لك بالتفاف النص المتبقي من الفقرة إلى السطر التالي. هذه علامة غير مقترنة، وعلى عكس علامة الفقرة، لا تزيد التباعد بين الأسطر.
الممارسة 2
1. قم بتنسيق العنوان "كتالوج المشاريع المعمارية" باستخدام العلامات
و
.2. قم بتنسيق العنوان "مشاريع لمنزلك المستقبلي" باستخدام العلامات
و
.3. قم بتنسيق العناوين "مشاريع المنزل" و"المناطق المنزلية" باستخدام العلامات
و
.4. قم بتقسيم النص الرئيسي إلى فقرات باستخدام علامة
داخل الفقرتين الأوليين، استخدم العلامة
لكسر الخط. ونتيجة لذلك، يجب أن يبدو الكود الخاص بك بهذا الشكل (الشكل 11).
5. عرض النتيجة في المتصفح.
الشكل 11
قوائم نقطية ومرقمة
باستخدام أدوات HTML، يمكنك إنشاء أي قوائم: مرقمة (رقمية وأبجدية) ومنقطة أنواع مختلفةعلامات.
بطاقة شعار < ماي>… ماي> ينشئ قائمة ذات تعداد نقطي.
بطاقة شعار < رأ>… رأ> يولد قائمة مرقمة.
عنصر قائمة واحد كما في
- ، و في
- قم بتنفيذ الكود الموضح في الشكل 13 في ملف جديد.
- احفظ الملف في مجلد بيتيتحت الاسم سبيسوك_ vlozh. لغة البرمجة. النتيجة في الشكل 13
- مطلق؛
- نسبي.
- أدخل المجلد Folder_2،
- ثم أدخل المجلد Folder_1،
- ثم أرفق الصورة.
- الخروج من المجلد Folder_1,
- الخروج من المجلد Folder_2,
- إرفاق صورة.
- الخروج من المجلد Folder_1,
- الخروج من المجلد Folder_2,
- انتقل إلى المجلد Folder_3،
- انتقل إلى المجلد Folder_4،
- إرفاق الصورة pic.jpg
- الخروج من المجلد Folder_1,
- الخروج من المجلد Folder_2,
- الخروج من المجلد Folder_3,
- أدخل المجلد Folder_4،
- إرفاق الصورة pic.jpg.
- template.html
- main.html
- spisok_vlozh.html
- داخل المجلدبيتييجب أن يكون هناك مجلدعام_ لغة البرمجةمع ملفات الموقع في المستقبل
- سبعة أمثلة على المعالجة النسبية ومثالين كمثالين للتحكم من مهمة عملية 14
- الكلمات الرئيسية ووصف الصفحة؛
- روابط لملفات أخرى (*.css و*.js).
- تم تشكيلها باستخدام علامة <
لى>
.
الممارسة 3
1. قم بإنشاء قائمة مرقمة تحت عنوان "مشاريع المنزل".
2. أنشئ قائمة ذات تعداد نقطي تحت عنوان "مناطق المنزل". سيبدو الكود الخاص بك هكذا (الشكل 12).
الشكل 12
3. عرض الصفحة في المتصفح.
يمكن تداخل القوائم داخل بعضها البعض باستخدام علامات مختلفة.
يظهر مثال على القائمة المتداخلة في الشكل. 13
الممارسة 4
الشكل 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 أعلى بمستويين من الصورة. ضروري:
الشكل 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). ضروري: نظرًا لأنك تحتاج إلى الخروج مرتين، فإن التصميم ../ تكرر مرتين.
الشكل 25 الممارسة 11 تنفيذ المثال 5 (إنشاء مجلدات، ملف doc.html، التقاط أي صورة). يجب إدراج الصورة في صفحة الويب doc.html. |
مثال 6 (الشكل 26) ضروري:
الشكل 26 الممارسة 12 تنفيذ المثال 6 (إنشاء مجلدات، ملف doc.html، التقاط أي صورة). صورة يجب إدراجها في صفحة الويب doc.html. |
مثال 7 (الشكل 27) ضروري: نظرًا لأنك تحتاج إلى الخروج ثلاث مرات، فإن التصميم ../ تكرر ثلاث مرات.
الشكل 27 الممارسة 13 تنفيذ المثال 7 (إنشاء مجلدات، ملف doc.html، التقاط أي صورة). صورة يجب إدراجها في صفحة الويب doc.html. وبالتالي، بغض النظر عن عدد المرات التي تحتاج فيها إلى الخروج، فإننا نضع البناء ../ مرات عديدة، وإذا دخلنا، نقوم بإدراج أسماء المجلدات التي واجهناها على طول الطريق. |
الممارسة 14
1. قم بإنشاء مستند html وأدخل صورة فيه بحيث يكون المسار إلى الصورة كما يلي.
"
../../../../../../folder_1/folder_2/folder_3/image.jpg" /
>
2. قم بتطوير المثال الخاص بك لإدراج صورة في مستند html بحيث يحتوي على و مخرج من المجلدات، و مدخل في المجلدات. يجب أن يكون المثال مختلفًا عن جميع الأمثلة المذكورة أعلاه.
ونتيجة لاستكمال هذا الموضوع، يجب أن يكون لديك الملفات التالية:
تم اختراع العديد من اللغات، لكن لغة HTML هي إحدى اللغات المميزة والأكثر شهرة. ترتبط به العديد من التطورات الرئيسية الأخرى في البرمجة. يصبح الكثير ممكنًا عندما يكون لدى عقل المطور معرفة باللغة الترميزية - لغة ترميز النص التشعبي (HTML).
في جوهرها، لا يوجد شيء معقد في HTML، وفي بضع دقائق، سيتمكن أي شخص بعيد عن البرمجة والإنترنت من إنشاء صفحة HTML في "المفكرة". مثال جدير بالاهتمام، والبساطة التي يمكن للجميع الوصول إليها حقًا.
وصف عام
يعد ملف HTML عبارة عن صفحة واحدة من الموقع، على الرغم من إمكانية الجدال حول ذلك، إلا أن حقيقة أن ملفًا واحدًا يشكل صفحة واحدة أمر واضح في البداية.
يبدأ ملف HTML برأس DOCTYPE، مما يشير إلى أن نوع الملف هو HTML. تتم الإشارة إلى كافة عناصر الصفحة (العلامات) بين قوسين زاوية. كل زوج ("<» и «>") يتضمن علامة HTML واحدة. عادةً ما تأتي علامات HTML في أزواج، أي أن لكل "علامة" يوجد "/tag". كلاهما محاط بين قوسين زاوية. هناك علامات مفردة، وأكثرها شيوعًا هي "br/" - الانتقال إلى السطر التالي.
أكبر علامة في الملف هي HTML نفسها، والتي تحتوي على علامتين فقط: HEAD وBODY. في الأول، يتم عمل أوصاف مختلفة، مع الإشارة إلى الروابط إلى الملفات الأخرى المطلوبة على الصفحة، والتي قد تكون موجودة مخطوطات PHPوجافا سكريبت. والثاني يسجل محتوى الصفحة. أيضا في شكل العلامات والبرامج النصية.
صفحة HTML بسيطة
ويرد أدناه مثال على إنشاء مثل هذه الصفحة في المقالة. دعونا ننظر إليها بعناية.
القسم الرئيسي
الغرض الرئيسى - وصف عامالصفحات والنصوص العامة، على الرغم من أن الأخير هو مفهوم نسبي إلى حد ما. عادة، يتم إعطاء شيئين فقط أهمية كبيرة هنا:
لعرض محتوى الصفحة، تعتبر محتويات هذا القسم مهمة بشكل غير مباشر فقط، لأنها تشير إلى: في مكان ما في الملفات الأخرى توجد قواعد 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 +«>")، لو نحن نتحدث عنحول بداية العلامة، و"» + 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 المتصفح أين تبدأ فقرات النص، وأي جزء من النص يمثل عنوانًا، ومكان إدراج الجداول، وحتى الصور. والعلامات هي كلمات بين قوسين زاوية، على سبيل المثال
,