غير مصنف

كيفية إنشاء ملفات HTML بسهولة مع إيميت Emmet


هل من الممكن إنشاء كل كود HTML للموقع في دقائق ، إن لم يكن في ثوان؟ 
من الممكن إذا كنت تستخدم Emmet! يسمح هذا النهج الجديد بالتطوير السريع للتعليمات البرمجية بتنسيق HTML و XML وتنسيقات التعليمات البرمجية المنظمة الأخرى.
Emmet هو مكون إضافي للعديد من برامج تحرير النصوص الشائعة. باستخدام Emmet ، يمكنك إنشاء الهيكل العظمي لصفحتك في بنية منطقية ولكنها مضغوطة للغاية ، ثم توسيعها إلى كود HTML كامل وسليم. تبدو النتيجة سحرية: يمتد سطر من النص إلى مئات أسطر النحو ، ولديك صفحة ثابتة ، أو حتى بنية كاملة للموقع ، جاهزة في غضون دقائق.
سوف تتعلم هنا كيف يمكنك استخدام Emmet لإنشاء صفحة ويب ثابتة كاملة. يستخدم Visual Studio Code لهذا البرنامج التعليمي لأنه يأتي مع دعم مضمن لـ Emmet. يمكنك استخدام Emmet في برامج تحرير أخرى ، مثل Sublime Text و Atom ، ولكن سيتعين عليك إضافة دعم لها من خلال امتداد.

قم بإنشاء ملف موقعك

للبدء ، افتح Visual Studio Code.

تشغيل المواقع في دقائق مع Emmet Vscode
اختر “ملف -> ملف جديد” لإنشاء مستند جديد وفارغ.

مواقع في دقائق مع إيميت جعل ملف جديد
اختر “ملف -> حفظ باسم” لحفظ ملفك ، مع منحه امتداد “html”.

مواقع في دقائق مع Emmet حفظ باسم Html

تركيب اساسي

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

مواقع في دقائق مع تذييل Mainmet رأس الصفحة الرئيسية
يعني “#” الموجود أمام كل كلمة أن كل مجموعة عبارة عن div بمعرف. اضغط على Enter في نهاية السطر لرؤية Emmet قيد التشغيل ، مع تحويل هذه العبارة الصغيرة إلى ثلاثة أسطر من HTML المهيكل.

تم توسيع المواقع بالدقائق مع تذييل الصفحة الرئيسية لرأس Emmet

هيكل الرأس

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

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

التجمع في إيميت

باستخدام Emmet ، يمكنك تجميع العناصر بوضعها بين قوسين. هذا يسمح لك بإنشاء هياكل معقدة لصفحاتك. لذا التراجع عن كل شيء حتى الآن والاحتفاظ فقط بكودك الأساسي #header+#mainsite+footerمن قبل.

مواقع في دقائق مع تراجع Emmet والتجربة
استبدل #headerالرمز في ما يلي:
في Emmet ، يمكنك إسقاط مستوى باستخدام >الحرف ويمكن أن ترتفع إلى مستوى باستخدام ^الحرف. يسمح لك هذا بالدخول إلى عنصر وإضافة عناصر أخرى إليه ثم الرجوع مرة أخرى.
يجب أن تبدو النتيجة كما يلي:

مواقع في دقائق مع المحتوى Emmet Head Plus
سيتم ترجمة ما سبق إلى: “أضف Div (مجموعة) برقم التعريف #header. بداخله ، أضف ثلاثة Div مع الفئات “.logo” و “.menu.top” و “.menu.main”. قم بإرجاع مستوى واحد لأعلى ، خارج المجموعة ، وأضف قسمين إضافيين بجانبه مع المعرفين “#mainsite” و “#footer”.

مواقع بالدقائق مع رأس Emmet كـ Html

هيكل الوظائف

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

مواقع في دقائق مع صيغة Emmet Post Emmet
هذا يخبر Emmet إلى “إنشاء Div مع الفصل .post. داخله ، ضع عنوانًا لعنوان H3 وصورة وفقرة للمقتطف.
مع إرفاق “{TEXT}” بعد العنصر ، يمكنك تحديد محتوياته. لذا ، مع “{Post Title}” ، هذا يخبر Emmet أن محتوى كل عنوان H3 سيكون نص العنصر النائب “Post Title”. يمكنك تغيير “عنوان المشاركة” إلى اسمك أو أي سلسلة نصية تريدها ، وسيتم استخدامها كمحتوى لعناوين مشاركاتك عندما يتم توسيع الكود.
و $إلى جانب “عنوان الرسالة” هو المتغير الرقمي الذي يعمل جنبا إلى جنب مع “5” يمكنك أن ترى خارج الأقواس. و *5بعد الأقواس يقول ايميت لتكرار محتويات الأقواس خمس مرات. و $يتم استبدال مع عدد تكرار كل وظيفة و. استبدل هذا الرقم بعدد المنشورات التي تريدها على صفحتك.
أضف هذا إلى الرمز الفعلي. يجب أن يبدو:

مواقع في دقائق مع المشاركات Emmet في النحو الرئيسي

هيكل التذييل

بالنسبة إلى التذييل ، فإننا نضيف مجموعتين – قسمين Divs مع فئتي “.design” و “.copyright”.
رمز على النحو التالي:

مواقع في دقائق مع بناء جملة إيميت
سيؤدي هذا إلى إنشاء div مع فئة “.design”. يوجد بداخله ارتباط بفئة “.designerslink”. يضاف إلى ذلك قسم ثان مع فئة “.copyright”. يوجد داخل هذا القسم فقرة من النص العادي تحتوي على محتويات “Copyright 2020 My Name.”

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

تم توسيع المواقع بالدقائق مع رمز Emmet All
احفظ التغييرات على الملف بالضغط على CtrlSأو بزيارة “ملف -> حفظ”. لمشاهدة عملك ، قم بتشغيل المتصفح الخاص بك. بعد ذلك ، إما باستخدام “ملف -> فتح” أو مدير ملفات خارجي ، حدد موقع ملف HTML الخاص بك وافتحه يدويًا في المتصفح.

مواقع في دقائق مع موقع Emmet في المتصفح

تغليف

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

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

زر الذهاب إلى الأعلى