تم تصميم المهام المتعلقة بأساسيات HTML لدمج العمل مع مجموعة من المواضيع التالية: بنية HTML، والتعليقات في HTML، والعلامات الأساسية، وسمات HTML الأساسية. .
مهام الصور بتنسيق HTML: إدراج صورة في HTML (رمز صورة HTML)، وحجم صورة HTML، ومحاذاة الصورة... في HTML.
مهام HTML وCSS المتقدمة
مهام HTML مع Emmet. تخطيط سريع، أوامر Emmet (ما يسمى ورقة الغش Emmet). بعد إكمال المهام باستخدام البرنامج الإضافي Emmet، ستزداد سرعة التخطيط/التطوير لديك بشكل ملحوظ. .
المهام على محددات CSS. محددات CSS: محددات فئة CSS، محددات سمات CSS، محددات CSS المجاورة، محددات سياق CSS، محددات فرعية + في CSS، محددات الأولوية. .
تعد كيفية عمل تحديد موضع CSS أمرًا مهمًا لفهم التخطيطات المعقدة. فيما يلي المهام التي يجب فهمها والعمل معها: الموضع المطلق، والموضع النسبي، والموضع الثابت، والموضع الثابت، وخصائص CSS أعلى اليسار وأسفل اليمين. .
مهام تخطيط النموذج
إحدى مهام مصمم التخطيط هي كتابة التعليمات البرمجية عبر المتصفحات. رمز يسمح للصفحات بأن تبدو متشابهة أو متشابهة قدر الإمكان في أكبر عدد من المتصفحات. .
تتيح لك إمكانيات CSS الحديثة إنشاء ميزات رائعة والعمل مع الخلفية عن طريق تلوينها بتعبئة متدرجة. مجموعة صغيرة من المهام للرسوم المتحركة CSS.
مهام استعلامات الوسائط (مواقع الجوال). يعد إنشاء نسخة محمولة من الموقع جزءًا مهمًا من مهارات مطوري الويب. يتم تخصيص المهام للمواضيع التالية: إنشاء موقع ويب للجوال، والتحقق من إصدار الهاتف المحمول للموقع. .
المهام على تخطيط تخطيط psd وأطر CSS. يعد تخطيط موقع الويب استنادًا إلى تخطيط PSD هو الجزء الأكثر أهمية في عمل مصمم الويب. في دروس HTML، ننظر إلى الخطوات الأساسية للتخطيط من PSD إلى HTML. مهام .
التطوير المنهجي للأعمال العملية في علوم الكمبيوتر حول موضوعي "لغة ترميز HTML" و"تقنيات الويب الحديثة" (لطلاب المدارس المتوسطة).
عند إجراء الفصول الدراسية باستخدام هذه التطورات المنهجية، لإنشاء ملفات HTML وCSS، يوصى باستخدام محرر نصوص عادي يدعم تمييز بناء الجملة للغات HTML وCSS، ويفضل أيضًا أن يتضمن القدرة على العمل مع ملفات متعددة في وضع متعدد الصفحات .
على سبيل المثال، برنامج Notepad++ (notepad-plus-plus.org) مناسب لنظام التشغيل Windows. في محرر النصوص Notepad++، لتغليف الأسطر الطويلة، تحتاج إلى تحديد عرض -> فاصل الأسطر من القائمة. يعد برنامج Notepad2 (flos-freeware.ch/notepad2.html) أيضًا محررًا جيدًا للنصوص. ومع ذلك، فهو لا يدعم عملية متعددة الصفحات. يتم ضبط فواصل الأسطر باستخدام الأمر View -> Word Wrap.
1. وثيقة HTML. الفقرات، فواصل الأسطر، المحاذاة1 بنية مستند HTMLيتكون الكود المصدري لمستند HTML من العلامات والمحتوى.
يمكن أن تحتوي العلامات على سمات مختلفة ذات خصائص محددة. في الإصدارات الأقدم من HTML، تم استخدام السمات لتصميم المحتوى: تحديد حجم الخط ولونه، ومحاذاة النص، وتعيين المسافات البادئة، والمزيد. في الوقت الحاضر، يتم عادةً تنسيق محتوى مستند HTML باستخدام لغة CSS.
يتضمن أي مستند HTML دائمًا حاويات html ورأس ونص متداخلة داخل بعضها البعض على النحو التالي:
المهمة 1. قم بإنشاء ملف وإعطائه البنية الموضحة أعلاه. احفظها.
تحتوي حاوية الرأس عادةً على حاوية عنوان، يتم عرض محتوياتها في عنوان نافذة المستند.
المهمة 2. أضف حاوية عنوان إلى المستند:
الكمبيوتر - الكمبيوتر الإلكتروني
احفظ الملف وافتحه في متصفحك. ابحث عن محتوى العنوان الذي أدخلته.
يتم عرض محتويات الجسم في نافذة المتصفح.
يتم استخدام علامة الحاوية لترميز الفقرات. تسمح لك علامة b واحدة بالانتقال إلى سطر جديد دون إنشاء فقرة جديدة، على سبيل المثال. يخلق فاصل أسطر.
المهمة 3. أضف المحتوى التالي إلى حاوية النص:
إن ظهور أجهزة الكمبيوتر الشخصية في أوائل السبعينيات (بالتوازي مع التطور التدريجي لأجهزة الكمبيوتر الكبيرة) يعتبر الآن بمثابة انقلاب ثوري. ويقارن حجم تأثيرها على المجتمع البشري بعواقب اختراع الطباعة.
يوجد بالفعل ملايين ومليارات من أجهزة الكمبيوتر في العالم.
ويستمر عددهم في النمو بشكل مطرد!
يحفظ. قم بتحديث المستند في متصفحك. لاحظ عدد الفقرات التي ترى فيها فاصل الأسطر.
2 محاذاة الفقرة. موضة قديمةيتم تحديد محاذاة الفقرة من خلال القيم لليسار (يسار)، واليمين (يمين)، والوسط (الوسط)، والضبط (المبرر). يمكن تعيين هذه القيم لخاصية المحاذاة، وهي صالحة للعديد من العلامات.
لذلك، على سبيل المثال، يمكن تعيين محاذاة الفقرة المركزية كما يلي:
المهمة 4. بالنسبة للفقرات التي تم إنشاؤها مسبقًا، قم بتعيين المحاذاة لتكون مبررة (للفقرة الأولى) ومحاذاة لليمين (للثانية).
ليس المقصود من هذه المقالة أن تكون دليلاً شاملاً للغة ترميز مستندات HTML. فهو يصف أساسيات HTML - المبادئ والمفاهيم والتعريفات الأساسية لهذه التكنولوجيا، بعد إتقانها، يمكنك بسهولة المضي قدمًا في دراسة ترميز HTML.
لدراسة الدرس قم بتحميل الأرشيف بالملفات الضرورية.
HTML هي لغة ترميز المستندات. النطق الصحيح هو HTT.
هل سبق لك أن عملت في محرر مستندات Word أو تطبيقات مكتبية مشابهة؟ ربما تعلم أن هذا النوع من المحررات يتمتع بقدرات غنية لتحرير النصوص وترتيب العناصر وإدراج الصور وما إلى ذلك.
قد تتساءل لماذا تكتب عن معالجات النصوص في مقال عن HTML؟ لكن لماذا. إذا عرفت ذلك، ما هو محرر المكتب؟ هذا تطبيق لتحرير وعرض المستندات.
الكلمة الأساسية هنا هي وثيقة. وهذا هو، نقوم بإنشاء مستند وتحريره وعرضه في بعض البرامج، في هذه الحالة - في محرر Office. إذا فتحنا مثل هذا المستند في محرر نصوص بسيط، على سبيل المثال، المفكرة، فسنرى العديد من الرموز والعلامات الغريبة. هذه الفوضى من الرموز غير مفهومة للبشرية، ولكنها مفهومة لأجهزة الكمبيوتر. بفضل هذه اللغة الداخلية، يتخذ مستند Word بنية معينة ومظهرًا معينًا في المحرر نفسه، ويظهر المستند أمامنا بكل مجده مع النص والصور المنسقة في مكانها.
HTML هي لغة ترميز المستندات للمتصفح. Word هنا هو المتصفح، والمستند هو صفحة HTML. هذا هو أساس تقنية HTML، وهو أمر ضروري حتى لا تخلط بين لغة ترميز مستندات الويب ولغات البرمجة. الاسم يتحدث عن نفسه -. باستخدام HTML نحن العلاماتحيث سيتم عرض العنصر أو الصورة أو النص على الصفحة، وبأي ترتيب ستظهر بجانب بعضها البعض.
نعم، الكتابة البسيطة وتنسيق النص في تطبيقات المكتب لا علاقة له بالبرمجة. لكن القارئ الملاحظ سوف يلاحظ تفصيلًا مهمًا - في معالج النصوص، نقوم بكتابة النصوص والصور وتحريرها وتنسيقها باستخدام الأزرار والقوائم المرئية، ولكن لماذا تتم كتابة كود HTML يدويًا؟ لماذا تتعلم الكثير من التفاصيل الفنية لكتابة العلامات للمستند؟
في الواقع، هناك الكثير من المحررين الذين يمكنك من خلالهم إنشاء وتحرير صفحات HTML، على غرار برنامج Word. أي أن كود HTML المصدر مخفي بالنسبة لنا ولا ندخل فيه.
نوع من Word لـ HTML. يُطلق على هؤلاء المحررين المرئيين اسم:
WYSIWYGالمحررين - W hat Y ou See I s W hat Y ou G et. أي إذا ترجمناها إلى اللغة الروسية: ما نراه هو ما نحصل عليه.أنا أسميهم "wuzivoogies". وعلى الرغم من أن هذا غير صحيح صوتيًا، إلا أنه يوضح بوضوح عدم معنى هذا الاختراع. غالبًا ما يستخدم المبتدئون هؤلاء المحررين لإنشاء مواقعهم الإلكترونية الأولى. بالطبع، هذا مناسب - لا تحتاج إلى الخوض في دراسة العلامات وأنماط التصميم وغيرها من الأشياء غير السارة والمعقدة للوهلة الأولى. يقوم المحرر نفسه تلقائيًا بتحويل إجراءاتنا إلى كود HTML.
ولكن، كما يقولون، لا شيء يحدث. وبشكل أكثر تحديدا، فإن هذا النهج له عيوب خطيرة للغاية. ما الذي يمنع الجميع من استخدام المحررات المرئية لتصميم صفحات HTML؟ الحقيقة هي أن الصفحات التي تم تشكيلها بهذه الطريقة عادة ما تحتوي على الكثير من التعليمات البرمجية غير الضرورية والكثير من الأخطاء من وجهة النظر الدلالية. الآن، بالطبع، لا توجد مشاكل مع اتصال إنترنت عالي السرعة والفرق في حجم الصفحة 400 كيلو بايت و 100 كيلو بايت ليس كبيرا بالنسبة للسرعة، ومع ذلك، فإن كود HTML المحسن والمكتوب بشكل صحيح يزيل العديد من المشاكل ويوفر العديد من المزايا، يسمى:
- كود HTML المختص له تأثير إيجابي على تحسين محرك البحث والسرعة التي يزحف بها روبوت البحث إلى الموقع. إن الكيلوبايتات من التعليمات البرمجية التي تم إنشاؤها بواسطة vuzivuga غير مقبولة وحتى ضارة؛
- يحتوي كود HTML الذي تم إنشاؤه بواسطة محرر WYSIWYG على العديد من الأخطاء الدلالية. أي أن العلامات التي تم إنشاؤها بواسطة هذا المحرر تستخدم لأغراض أخرى، حيث يجب استخدامها، على سبيل المثال، القوائم
- سيقوم المحرر بإنشاء علامة أخرى لا نحتاج إليها. يعتمد ذلك بالطبع على المحرر، ولكننا نعني هنا الحلول المعقدة لإنشاء مواقع الويب، وليس مجرد تحرير النص في منطقة النص باستخدام أدوات WYSIWYG.
- يتم إنشاء الكثير من العلامات غير الضرورية وتصبح بنية المستند منتفخة. لنفترض أنك قمت بنقل عنصر في مثل هذا البرنامج، أولاً إلى اليمين، ثم إلى اليسار، ثم إلى المركز - كل إجراء يترك أثراً في كود HTML المصدر. المحرر عبارة عن برنامج ولا يمكنه معرفة ما تريد الحصول عليه بالضبط نتيجة لذلك، فهو يقوم بإنشاء الكثير من التعليمات البرمجية، مع مراعاة جميع الخيارات الممكنة لسلوك المستند في المتصفح.
- كقاعدة عامة، محرري التصميم المرئي لكود HTML سرعان ما أصبحوا قديمين. وبسبب عدم الاهتمام من جانب المهنيين، فإنهم محرومون بشكل عام من الدعم ويتوقفون عن التطور. وHTML يتطور. كل شيء يتطور إلا wuzivoogi. وبناءً على ذلك، لا يمكنهم إنشاء تعليمات برمجية صحيحة وحديثة تستخدم ميزات وحلولًا جديدة.
- إن دعم وتطوير مثل هذه المشاريع هو عقاب سماوي. لا يمكن الحديث على الإطلاق عن استخدام الأنماط وإعادة استخدام التعليمات البرمجية.
لذلك، سوف نكتب لغة HTML باستخدام الأقلام فقط. لم يتم بعد اختراع الأدوات الكافية لتحرير HTML المرئي، ومن غير المرجح أن تظهر. من السهل تعلم وفهم لغة ترميز HTML، وهناك العديد من الأدوات لأتمتة كتابة تعليمات HTML البرمجية، ولكن المزيد عن ذلك في دروس أخرى.
بعد إجراء القليل من العبث باستخدام محرر WYSIWYG، يترك معلمو HTML الشباب هذه المهمة غير المجدية ويمضيون قدمًا.
هيكل مستند HTMLبالنسبة للفصول الدراسية، أوصي بتنزيل محرر النصوص Sublime وتثبيته. أوصي بشدة بعدم استخدام Windows Notepad المدمج لتخطيط HTML إذا كنت لا ترغب في كسر نفسيتك في المراحل الأولى من تعلم HTML.
قررنا أن نكتب كود مستند HTML يدويًا، أي كتابته. تخطيط HTML هو عملية إنشاء مستند HTML. في عامة الناس وفي الدوائر المطلعة، هذا مجرد تخطيط. أي وثيقة لها هيكل وقواعد معينة للبناء. ما هي العناصر التي يتكون منها الكود، وما هي بنية HTML؟
لنقم بإنشاء قالب أولي على الكمبيوتر - ملف Index.html، وفتحه باستخدام محرر ولصق الكود التالي فيه:
نص مستند الرأس يرجى ملاحظة أن مستندات HTML لها امتداد .html.
لذلك، بالترتيب من المثال.
- نوع الوثيقة (نوع الوثيقة)تتم الإشارة دائمًا إلى هذا البناء في بداية المستند حتى "يفهم" المتصفح بشكل صحيح إصدار HTML المستخدم عند إنشاء المستند.
ونظرًا لحقيقة أن HTML يتطور باستمرار، فقد أصبح له عدة إصدارات، مثل أي منتج برمجي. الإصدار الحالي من HTML هو الإصدار الخامس والنوع المستندي الموجود في المثال هو الإصدار الحالي.
من حيث المبدأ، ليس هناك أي نقطة في الخوض في دراسة أنواع المستندات، لأنه مع إصدار HTML5، أصبح هذا التصميم هو المعيار. ما عليك سوى إدراجه في بداية المستند في كل مرة تبدأ فيها بإنشاء تخطيط لموقع الويب.
- بداية الوثيقةالعلامة الأولى التي نراها بعد نوع المستند هي .
علامة HTML هي وحدة هيكلية لترميز مستند HTML. يتكون كود HTML من كتل بناء تسمى العلامات. كل علامة لها وظيفتها الخاصة، وتعلم لغة ترميز HTML يدور في النهاية حول تعلم العلامات وخصائصها في المستند.
أود أن أشير إلى أن تعلم HTML ليس بالأمر الصعب كما قد يبدو للوهلة الأولى. إن تعلم العلامات المستخدمة في ترميز المستندات لا يمثل عبئًا كبيرًا على الدماغ.
لذلك، يبدأ ترميز المستند بعلامة وينتهي بعلامة إغلاق. يجب إغلاق كل علامة تحتوي على علامات أو عناصر أخرى بعلامة إغلاق. على سبيل المثال،،،، الخ.
تعتبر العلامة إلزامية لأنها تحتوي على بنية المستند بالكامل وهي عبارة عن غلاف للعناصر الأخرى.
بطاقة شعاربعد ذلك، نرى العلامة التي تحتوي على عناصر أخرى غير واضحة لنا بعد. يحتوي على عناصر أخرى - وهذا يعني أن العناصر أو العلامات موجودة بين علامتي الفتح والإغلاق للبنية:
المحتوى أو العلامات الأخرى
الغرض من العلامة هو تخزين المعلومات التعريفية لمستند HTML، أي المعلومات التي لا يتم عرضها في المستند نفسه، ولكنها مهمة وتحدد إلى حد كبير كيف سيبدو المستند ويتصرف.
هذه العلامة مطلوبة في المستند.
العنوان هو علامة مطلوبة تحتوي على معلومات تعريفية نصية تظهر في عنوان المتصفح أو علامة التبويب. يجب أن تكون العلامة في . كما تستخدم محركات البحث محتويات هذه العلامة لعرض المستند في نتائج البحث.
علامة متغيرةالعلامة الوصفية هي علامة متخصصة مصممة لتوفير بيانات منظمة حول الصفحة. غالبًا ما يتم استخدام العلامات الوصفية في . العلامات الوصفية غير مطلوبة في بنية مستند HTML.
الرمز المفضلإرفاق ملف به صورة مفضلة بالمستند. Favicon هو رمز مصغر يتم عرضه بجوار عنوان المستند في علامة تبويب المتصفح. الأيقونة المفضلة هي ملف رسومي بقياس 16 × 16 (أو 32 × 32) بكسل، ويمكن أن يكون له تنسيقات مختلفة، مثل png، jpg، ico، gif. يتم استخدام تنسيق ico بشكل تقليدي. الرموز المفضلة المتحركة هي ملفات GIF تحتوي على رسوم متحركة. يمكنك رؤية الرمز المفضل المتحرك، على سبيل المثال، على VKontakte، عند وصول رسالة جديدة.
أنماط وثيقة CSSيتضمن ملف CSS مع تصميم HTML للمستند.
CSS- المتتاليةأنماط وثيقة HTML. تحتوي كل علامة موجودة في العلامة على مجموعة من الخصائص، مثل اللون والعرض والارتفاع والموضع بالنسبة للعناصر الأخرى. كل هذه الخصائص هي أنماط CSS يمكن تصديرها إلى ملف خارجي. يربط التصميم الملفات الخارجية بمستند HTML، بما في ذلك أنماط CSS.
ملاحظة: تحدد الخاصية href للبنية موقع الملف الخارجي. في مثالنا، الملف style.cssو favicon.ico، موجودة في نفس المجلد الذي يوجد به الملف Index.html. ليس لديه علامة إغلاق.
بطاقة شعارتحتوي العلامة على رمز أو رابط لملف جافا سكريبت، وغالبًا ما يتم استخدامها داخل علامة، على الرغم من أن أداة تحسين سرعة الصفحة من Google توصي باستخدام هذه العلامة في نهاية المستند، قبل علامة الإغلاق.
في مثالنا، تم توصيل ملف خارجي script.js، الموجود في نفس المجلد الذي يوجد به ملف Index.html الرئيسي.
لذلك، أيها الأصدقاء، لقد ألقينا نظرة على العناصر الرئيسية التي يتم استخدامها في أغلب الأحيان في العلامة. بالإضافة إلى هذه العناصر، هناك عدد من العناصر الأخرى الأكثر تحديدًا واختياريًا.
الجسم ويسمى الجسمهذا هو المكان الذي تبدأ فيه كل الأشياء الممتعة والأشياء الملموسة بصريًا في تخطيط HTML للمستند.
دعنا ننتقل مباشرة إلى تخطيط الجزء المرئي من الصفحة. سيتم عرض كل ما نكتبه ونخططه داخل العلامة في المتصفح. دعونا نفتح ملفنا Index.htmlفي المتصفح لكي نرى بوضوح ما نقوم به في المحرر.
يمكن أن تحتوي العلامة على أي علامات HTML ضرورية لتصميم المستند وتوفير وظائفه (النموذج). سأقدم جدولًا بالعلامات الأكثر استخدامًا وأصف كل واحدة منها بإيجاز. يمكنك تشغيل الأمثلة الواردة في المحرر على الفور.
لم نأخذ في الاعتبار جميع العلامات، وهذا ليس ضروريًا في هذه المرحلة. الشيء الرئيسي هو فهم الفكرة الأساسية لـ HTML، وتعلم كيفية استخدام العلامات الموضحة أعلاه، ثم المضي قدمًا.
يرجى ملاحظة أن جميع الأسماء في الملفات المضمنة يجب أن تكون مكتوبة بالأحرف اللاتينية، بدون مسافات.
على سبيل المثال، لا تفعل:
يعد ذلك ضروريًا لتحقيق توافق أكبر لمحتوى الصفحة. بالإضافة إلى ذلك، تملي معايير كتابة كود HTML.
إذن، نحن الآن نعرف بعض أساسيات HTML: ما هي البنية التي يجب أن تحتوي عليها وثيقة HTML النموذجية، ونعرف بعض العلامات الأكثر شيوعًا، وحان الوقت للانتقال إلى الجزء الأكثر متعة - وهو ملفات تعريف الارتباط.
تدريب عملي على تخطيط HTMLإذا لم تكن قد قمت بتنزيل الأرشيف مع الأمثلة بعد، فقم بذلك. على سبيل المثال، يمكنك إلقاء نظرة على ملف example.html، والذي كان موجودًا أيضًا في الأرشيف.
وبهذا نختتم الدرس الخاص بأساسيات HTML، في الدرس التالي "أساسيات CSS" سنتعلم كيفية إدارة أنماط عناصر المستند والتعرف على أوراق الأنماط المتتالية وتعلم كيفية استخدام فئات الأنماط وجعل تخطيطنا جميلًا وملونًا .
نراكم مرة أخرى أيها الأصدقاء!
