Emmet: المشروع 1
في الدروس 1–16 تعلمت 8 فئات صيغ رئيسية و3 إجراءات أساسية و5 إجراءات تسريع تحرير في Emmet — لكن كلها كأمثلة "أجزاء" معزولة. هذا الدرس هو أول مشروع تطبيقي شامل: كتابة HTML صفحة تسجيل دخول كاملة من 70 سطرًا باختصار Emmet واحد. تكتب أليس النموذج بالكامل في 10 ثوانٍ — أسرع 10 أضعاف من الترميز اليدوي.
1. ما ستتعلمه
- تفكيك المتطلبات: تقسيم "صفحة تسجيل الدخول" إلى 5 أقسام (الرأس / النموذج / الأزرار / الروابط / تسجيل الدخول الاجتماعي) وربط كل قسم بجزء اختصار Emmet
- تركيب التداخل: استخدام
>ابن ++شقيق +()تجميع +*ضرب لربط الأقسام في هيكل كامل - تسلسل class/ID: استخدام سلاسل فئات متعددة
.class1.class2للتعبير عن أنماط الأزرار (.btn.btn-primary) - السمات المخصصة: استخدام
[attr=val]لإضافةtype/name/placeholder/required/forإلى<input>، وhrefإلى<a> - ملء النص: استخدام
{text}لكتابة نصوص مثل "Welcome Back"، "Username"، "Password"، "Sign In"، "or"، "Forgot Password?"، "Don't have an account?"، "Sign Up Now"
2. قصة حقيقية لمطور واجهة أمامية
(1) نقطة الألم: 3 مدخلات + 2 زران + 3 روابط + عنوان — 10 دقائق يدويًا
أليس هي مطورة واجهة أمامية في منصة SaaS. في يوليو 2026، يسقط مدير المنتج إشعارًا عاجلاً: أضف صفحة تسجيل دخول إلى لوحة تحكم المسؤول هذا الأسبوع، للإطلاق يوم الاثنين القادم. تصميم Figma يظهر 5 أقسام:
| القسم | قائمة العناصر |
|---|---|
| 1. رأس العلامة التجارية | <span> يعرض اسم المنتج "CLOUDFLOW" |
| 2. منطقة العنوان | <h1> Welcome Back + <p> عنوان فرعي |
| 3. النموذج | مدخلا Username / Password + تسميات + مربع اختيار + رابط نسيت كلمة المرور |
| 4. زر الإرسال | زر "Sign In" أساسي + زرا تسجيل دخول اجتماعي "Google" / "GitHub" |
| 5. موجه التسجيل | رابط "Don't have an account? Sign Up Now" في الأسفل |
المجموع: 1 <span>، 1 <h1>، 1 <p>، 2 <input>، 2 <label>، 1 <button>، 1 <a> لنسيت كلمة المرور، 2 <button> لتسجيل الدخول الاجتماعي، 1 <a> للتسجيل = 11 عنصر نموذج + 1 span علامة تجارية. HTML المكتوب يدويًا:
<span class="brand-name">CLOUDFLOW</span>
<h1 class="title">Welcome Back</h1>
<p class="subtitle">Continue with your account</p>
<form id="loginForm" action="/login" method="post">
<div class="field">
<label for="user">Username</label>
<input id="user" class="input" type="text" name="user" placeholder="Enter your username" required>
</div>
<div class="field">
<label for="pwd">Password</label>
<input id="pwd" class="input" type="password" name="pwd" placeholder="Enter your password" required>
</div>
<div class="field-row">
<label class="checkbox">
<input type="checkbox" name="remember"> Remember me
</label>
<a class="help" href="/forgot">Forgot Password?</a>
</div>
<button type="submit" class="btn btn-primary">Sign In</button>
</form>
<div class="divider"><span>or</span></div>
<div class="social">
<button class="social-btn" type="button">Google</button>
<button class="social-btn" type="button">GitHub</button>
</div>
<p class="footer">Don't have an account? <a href="/signup">Sign Up Now</a></p>
إجمالي 32 سطرًا من HTML المكتوب يدويًا، بالإضافة إلى جميع تفاصيل السمات (id / class / type / name / placeholder / required / for / action / method). تقدر أليس أنها ستستغرق 8–10 دقائق — ومن السهل نسيان السمات (مثل نسيان required، مما يكسر تحقق النموذج).
(2) حل Emmet دفعة واحدة
تفتح أليس VSCode، تضغط ! لتوسيع هيكل HTML، ثم تنتقل إلى <body> وتكتب سطر اختصار واحد:
div.login-container>div.login-card>(.brand>span.brand-name{CLOUDFLOW})+h1.title{Welcome Back}+p.subtitle{Continue with your account}+form#loginForm[action=/login method=post]>(.field>label[for=user]{Username}+input#user.input[type=text name=user placeholder="Enter your username" required])+(.field>label[for=pwd]{Password}+input#pwd.input[type=password name=pwd placeholder="Enter your password" required])+(.field-row>(label.checkbox>input[type=checkbox name=remember]{Remember me})+a.help[href="/forgot"]{Forgot Password?})+button[type=submit].btn.btn-primary{Sign In}+.divider{or}+.social>(button.social-btn{Google})+(button.social-btn{GitHub})+p.footer{Don't have an account?}+a[href="/signup"]{Sign Up Now}
اضغط Tab، ويظهر 32 سطرًا من HTML دفعة واحدة. أمضت أليس 10 ثوانٍ فقط — أسرع 48–60 ضعفًا من الترميز اليدوي. الأهم: صفر سمات مفقودة (required / placeholder / for جميعها مضمنة)، صفر أخطاء إملائية.
(3) الفوائد
أكملت أليس "المشروع 1" في 10 ثوانٍ للنموذج — أسرع 48–60 ضعفًا من الترميز اليدوي — مع صفر سمات مفقودة وصفر أخطاء إملائية. أكبر فائدة ليست السرعة، بل إزالة 80% من أخطاء "السمات المفقودة" — من السهل نسيان required أو for عند الترميز اليدوي، لكن في اختصارات Emmet هذه التفاصيل "مكونات" متكاملة من الاختصار ولا يمكن تفويتها. مراقبة الجودة تنجح من أول مرة قبل إطلاق يوم الاثنين، صفر تراجعات.
3. قائمة عناصر صفحة تسجيل الدخول: ربط 5 أقسام بعوامل Emmet
الجدول أدناه يربط جميع الأقسام الخمسة بعوامل Emmet محددة — هذه هي خطوة "تفكيك المتطلبات" الحرجة.
| القسم | العنصر | اختصار Emmet | الصيغة المغطاة (الدرس) |
|---|---|---|---|
| 1. رأس العلامة التجارية | <span class="brand-name">CLOUDFLOW</span> |
span.brand-name{CLOUDFLOW} |
الدرس 03 الوسوم الضمنية + الدرس 09 النص |
| 2. منطقة العنوان | <h1 class="title"> + <p class="subtitle"> |
h1.title{...}+p.subtitle{...} |
الدرس 04 الأشقاء + الدرس 03 class + الدرس 09 النص |
| 3. النموذج | <form id="loginForm" action="..." method="..."> تداخل عدة <div class="field"> |
form#loginForm[action=/login method=post]>(.field>...) |
الدرس 04 الابن + الدرس 07 id + الدرس 08 السمات المخصصة + الدرس 06 التجميع + الوسوم الضمنية |
| 4. زر الإرسال | <button type="submit" class="btn btn-primary">Sign In</button> |
button[type=submit].btn.btn-primary{Sign In} |
الدرس 08 السمات المخصصة + الدرس 07 الفئات المتعددة + الدرس 09 النص |
| 5. تسجيل الدخول الاجتماعي | <div class="social"> مع 2 <button> بداخله |
.social>(button.social-btn{Google})+(button.social-btn{GitHub}) |
الدرس 06 التجميع + الدرس 05 الضرب (يمكن أيضًا استخدام *2) + الوسوم الضمنية |
نقطة أساسية: هذا الجدول هو "الطريقة الأساسية لممارسة Emmet التطبيقية" — أولاً فكك الصفحة إلى أقسام، ثم فكك الأقسام إلى عناصر، وأخيرًا ترجم العناصر إلى اختصارات Emmet. سلسلة التفكير الذهنية المكونة من 3 خطوات هذه هي المفتاح للانتقال من "مبتدئ Emmet" إلى "خبير Emmet".
4. اختصار Emmet الشامل (الأساسي)
الأمثلة الثلاثة التالية تبني من أصغر وحدة إلى النموذج الكامل — عرض عملية التفكير "دفعة واحدة".
(1) ▶ مثال: كتلة العنوان h1.title{Welcome Back} (الصعوبة ⭐)
أصغر وحدة: عنصر <h1> واحد بفئة ونص.
الاختصار:
h1.title{Welcome Back}
التوسيع:
<h1 class="title">Welcome Back</h1>
الناتج: يعرض كعنوان
<h1>؛ class="title" يمكن استهدافه بمحددات CSS (مثال:.title { font-size: 28px; }).TEXT 📖 للعرض فقطالشرح: `h1` هو اسم العنصر (HTML الدرس 03)، `.title` هي الفئة (الدرس 07)، `{Welcome Back}` هو المحتوى النصي (الدرس 09). ثلاث نقاط صيغ مدمجة — هذه هي "أصغر وحدة كاملة" في Emmet.
(2) ▶ مثال: زوج حقل نموذج label[for=user]{Username}+input#user.input[type=text name=user placeholder="Enter your username" required] (الصعوبة ⭐⭐)
حقل نموذج واحد: <label> + <input>، مع ارتباط for/id + سمات متعددة.
الاختصار:
label[for=user]{Username}+input#user.input[type=text name=user placeholder="Enter your username" required]
التوسيع:
<label for="user">Username</label>
<input id="user" class="input" type="text" name="user" placeholder="Enter your username" required>
الناتج: يعرض 1
<label>+ 1<input>؛<label for="user">مرتبط بـ<input>عبرid="user"(النقر على التسمية يركز المدخل).<input>يحمل 6 سمات:id/class/type/name/placeholder/required.TEXT 📖 للعرض فقطالشرح: "كثافة المعلومات" في الاختصار تفوق بكثير الكتابة اليدوية — - 3 نقاط صيغ: `#user` (id)، `.input` (class)، `[type=text]` (سمة) - 5 أزواج مفتاح-قيمة للسمات: `type=text` / `name=user` / `placeholder="Enter your username"` / `required` (سمة منطقية، بدون قيمة) - نص واحد: `{Username}` المجموع: 9 سمات عنصر HTML، الاختصار 95 حرفًا فقط — كتابة نفس السمات يدويًا ستكون 200+ حرف.
(3) ▶ مثال: نموذج تسجيل دخول كامل (اختصار السطر الواحد الأساسي) (الصعوبة ⭐⭐)
نموذج كامل: 1 <form> + 2 <div class="field"> (كل منها بـ label+input) + 1 <div class="field-row"> (بـ checkbox+link) + 1 <button>.
الاختصار:
form#loginForm[action=/login method=post]>(.field>label[for=user]{Username}+input#user.input[type=text name=user placeholder="Enter your username" required])+(.field>label[for=pwd]{Password}+input#pwd.input[type=password name=pwd placeholder="Enter your password" required])+(.field-row>(label.checkbox>input[type=checkbox name=remember]{Remember me})+a.help[href="/forgot"]{Forgot Password?})+button[type=submit].btn.btn-primary{Sign In}
التوسيع:
<form id="loginForm" action="/login" method="post">
<div class="field">
<label for="user">Username</label>
<input id="user" class="input" type="text" name="user" placeholder="Enter your username" required>
</div>
<div class="field">
<label for="pwd">Password</label>
<input id="pwd" class="input" type="password" name="pwd" placeholder="Enter your password" required>
</div>
<div class="field-row">
<label class="checkbox"><input type="checkbox" name="remember">Remember me</label>
<a class="help" href="/forgot">Forgot Password?</a>
</div>
<button type="submit" class="btn btn-primary">Sign In</button>
</form>
الناتج: يعرض نموذج تسجيل دخول كامل بـ 2 حقل إدخال (Username / Password) + 1 مربع اختيار (Remember me) + 1 رابط نسيت كلمة المرور + 1 زر Sign In.
TEXT 📖 للعرض فقطالشرح: هذا الاختصار يربط جميع الصيغ الأساسية من الدروس 1–16 — - `form#loginForm`: اسم العنصر + id (الدروس 03 + 07) - `[action=/login method=post]`: 2 سمة مخصصة (الدرس 08) - `>(...)`: تداخل الابن + تجميع (الدروس 04 + 06) - `.field` / `.field-row`: وسم `div` ضمني (الدرس 03) - `label[for=user]{Username}`: عنصر + سمة مخصصة + نص (الدروس 08 + 09) - `input#user.input[type=text ...]`: id + فئات متعددة + سمات متعددة (الدروس 07 + 08) - `+`: عقدة شقيقة (الدرس 04) - `button[type=submit].btn.btn-primary{Sign In}`: سمات متعددة + فئات متعددة + نص (الدروس 07 + 08 + 09) المجموع: 14 وسم HTML، 35+ سمة — الكتابة اليدوية 200+ حرف، الاختصار 270 حرفًا يتوسع إلى 14 وسمًا بجميع السمات.
5. تفكيك الاختصار: معنى الصيغة لكل رمز
اختصار "النموذج الكامل" من القسم السابق هو 270 حرفًا — يبدو مخيفًا للوهلة الأولى. لنفككه إلى 5 أجزاء ونشرح كل رمز:
| الجزء | جزء الاختصار | نقاط الصيغة | المعنى |
|---|---|---|---|
| 1 | form#loginForm[action=/login method=post] |
عنصر + id + سمات مخصصة (الدروس 03+07+08) | <form id="loginForm" action="/login" method="post"> |
| 2 | >(...) |
ابن + تجميع (الدروس 04+06) | ادخل داخل form، مغلف كمجموعة |
| 3 | (.field>label[for=user]{Username}+input#user.input[type=text name=user placeholder="Enter your username" required]) |
div ضمني + ابن + عنصر + سمة + id + class + نص (الدروس 03+04+07+08+09) | مجموعة .field واحدة: تحتوي label + input |
| 4 | +(.field>label[for=pwd]{Password}+input#pwd.input[type=password name=pwd placeholder="Enter your password" required]) |
عقدة شقيقة + تكرار هيكل الجزء 3 | .field ثانية (حقل كلمة المرور)، شقيقة للجزء 3 |
| 5 | +(.field-row>(label.checkbox>input[type=checkbox name=remember]{Remember me})+a.help[href="/forgot"]{Forgot Password?})+button[type=submit].btn.btn-primary{Sign In} |
عقدة شقيقة + تجميع متعدد الطبقات + زر متعدد السمات | مربع اختيار + نسيت كلمة المرور + زر Sign In |
نقطة أساسية: الجزء 5 هو الأكثر تعقيدًا —
.field-rowيداخل شقيقين (label.checkbox + a.help)، ثم+زرbutton[type=submit]. التجميع متعدد الطبقات + تداخل الأشقاء هو جوهر Emmet المتقدم — بمجرد إتقانه، يمكنك كتابة "سطر واحد = 20 سطر HTML".
6. مثال كامل: صفحة تسجيل دخول دفعة واحدة — 70 سطرًا
ضمن الاختصار الأساسي أعلاه في صفحة HTML كاملة (بما في ذلك <!DOCTYPE> / <head> / <style> / غلاف <body> + أنماط CSS كاملة) للحصول على صفحة تسجيل دخول كاملة من 70 سطرًا. هذا المثال هو جوهر هذا الدرس — لا يوجد زر "جرب" (حسب مواصفة v2.5 البوابة #26، الأمثلة الشاملة لا تُعاين في المحرر).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Dashboard - Sign In</title>
<meta name="description" content="SaaS admin dashboard login page">
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-container { width: 100%; max-width: 420px; }
.login-card { background: #fff; padding: 40px; border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); }
.brand { text-align: center; margin-bottom: 24px; }
.brand-name { font-size: 18px; font-weight: 700; color: #2c3e50; letter-spacing: 1px; }
.title { font-size: 28px; color: #2c3e50; text-align: center; margin-bottom: 8px; font-weight: 700; }
.subtitle { color: #7f8c8d; text-align: center; margin-bottom: 32px; font-size: 14px; }
.field { margin-bottom: 20px; }
label { display: block; color: #34495e; margin-bottom: 8px; font-size: 14px; font-weight: 500; }
.input { width: 100%; padding: 12px 16px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; transition: border-color 0.2s; }
.input:focus { outline: none; border-color: #3498db; box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15); }
.field-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; font-size: 14px; }
.checkbox { display: flex; align-items: center; gap: 8px; color: #7f8c8d; cursor: pointer; }
.checkbox input { margin: 0; cursor: pointer; }
.help { color: #3498db; text-decoration: none; }
.help:hover { text-decoration: underline; }
.btn { width: 100%; padding: 14px; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.2s; }
.btn-primary { background: #3498db; color: #fff; }
.btn-primary:hover { background: #2980b9; }
.divider { display: flex; align-items: center; margin: 24px 0; color: #95a5a6; font-size: 13px; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: #ddd; }
.divider span { padding: 0 16px; }
.social { display: flex; gap: 12px; }
.social-btn { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 8px; background: #fff; cursor: pointer; font-size: 14px; }
.social-btn:hover { background: #f8f9fa; }
.footer { text-align: center; margin-top: 24px; color: #7f8c8d; font-size: 14px; }
.footer a { color: #3498db; text-decoration: none; font-weight: 500; }
</style>
</head>
<body>
<main class="login-container">
<div class="login-card">
<div class="brand">
<span class="brand-name">CLOUDFLOW</span>
</div>
<h1 class="title">Welcome Back</h1>
<p class="subtitle">Continue with your account</p>
<form id="loginForm" action="/login" method="post">
<div class="field">
<label for="user">Username</label>
<input id="user" class="input" type="text" name="user" placeholder="Enter your username" required>
</div>
<div class="field">
<label for="pwd">Password</label>
<input id="pwd" class="input" type="password" name="pwd" placeholder="Enter your password" required>
</div>
<div class="field-row">
<label class="checkbox">
<input type="checkbox" name="remember"> Remember me
</label>
<a class="help" href="/forgot">Forgot Password?</a>
</div>
<button type="submit" class="btn btn-primary">Sign In</button>
</form>
<div class="divider"><span>or</span></div>
<div class="social">
<button class="social-btn" type="button">Google</button>
<button class="social-btn" type="button">GitHub</button>
</div>
<p class="footer">Don't have an account? <a href="/signup">Sign Up Now</a></p>
</div>
</main>
</body>
</html>
الناتج: يعرض المتصفح صفحة تسجيل دخول كاملة للوحة تحكم SaaS — خلفية متدرجة بنفسجية، بطاقة بيضاء في المنتصف، اسم العلامة التجارية "CLOUDFLOW"، عنوان Welcome Back، نموذج Username/Password (مع ارتباط التسمية وتحقق required)، مربع اختيار Remember me، رابط Forgot Password، زر Sign In أزرق، فاصل "or"، تسجيل دخول اجتماعي Google/GitHub، موجه تسجيل في الأسفل. جميع الأنماط مضمنة في
<style>، صفر اعتماديات خارجية، صفر مكتبات طرف ثالث.TEXT 📖 للعرض فقطالشرح: 70 سطر HTML في هذا الدرس يربط جميع صيغ اختصارات HTML من الدروس 1–16 — - كتلة `<style>` (25 سطر CSS) مكتوبة يدويًا أو باستخدام اختصارات CSS (الدروس 11–13)؛ هذا الدرس يركز على جزء HTML - 32 سطر HTML داخل `<body>` من `<main class="login-container">` إلى `</main>` مولدة بتوسيع اختصار Emmet واحد - مقارنة عدد الأسطر: كتابة 32 سطر HTML يدويًا تستغرق 8 دقائق؛ اختصار Emmet 270 حرفًا + توسيع Tab يستغرق 10 ثوانٍ. **تحسين سرعة 48 ضعفًا، معدل السمات المفقودة ينخفض من 20% إلى 0%**
🌐 جرب بنفسك: أدخل الاختصار الأساسي لهذا الدرس
form#loginForm[action=/login method=post]>(.field>label[for=user]{Username}+input#user.input[type=text name=user placeholder="Enter your username" required])+(.field>label[for=pwd]{Password}+input#pwd.input[type=password name=pwd placeholder="Enter your password" required])+button[type=submit].btn.btn-primary{Sign In}في عرض Emmet الحي، اضغط Tab، وشاهد التوسيع الفوري.
❓ أسئلة شائعة
{text}) يمكن أن يحتوي أي أحرف — بما في ذلك الصينية والإيموجي والمسافات. لكن قيم السمات (داخل [attr=val]) مع المسافات يجب تغليفها بعلامات اقتباس (مثال: [placeholder="Enter your username"]). تجنب استخدام الأحرف غير الإنجليزية في id/class — محددات CSS لديها توافق ضعيف مع id/class غير الإنجليزية (الإصدارات القديمة من IE لا تدعمها)؛ يوصى بشدة باستخدام الإنجليزية لـ id/class.placeholder تحتاج كتابتها كاملة؟[placeholder=...] يجب كتابتها كاملة. لكن قيم السمات يمكنها حذف علامات الاقتباس عندما لا تكون هناك مسافات: [type=text] مكافئ لـ [type="text"]. لقيم السمات مع مسافات مثل [placeholder=Enter your username]، علامات الاقتباس مطلوبة: [placeholder="Enter your username"]، وإلا سيخطئ محلل Emmet.action="/login" يعني الإرسال إلى نقطة نهاية /login الخلفية. في التطوير الحقيقي، action عادة هو مسار خلفي (مثال: Express app.post('/login', ...)، Django path('login/', views.login)). هذا الدرس يركز على جزء HTML؛ معالجة الخلفية غير مغطاة. إذا احتجت محاكاة واجهة أمامية خالصة، استخدم action="javascript:void(0)" على <form> وأضف JS للاستماع لحدث submit.required؟required هي سمة "تحقق إلزامي" في HTML5 — يتحقق المتصفح أصلاً مما إذا كان المدخل فارغًا، وإذا كان فارغًا، يمنع الإرسال ويعرض "Please fill out this field". في مثال هذا الدرس، كلا مدخلي Username و Password لديهما required؛ رابط Forgot Password لا يحتاجها (ليس حقلاً في النموذج). هذه هي السمة المفتاحية لـ "تحقق الواجهة الأمامية بدون JS" — يوصى بها بشدة لجميع الحقول المطلوبة. سهلة النسيان عند الترميز اليدوي؛ فرصة صفر للنسيان عند استخدام اختصارات Emmet لأنها مكون هيكلي من الاختصار.📖 ملخص
- سلسلة تفكير من 5 خطوات: فكك المتطلبات إلى أقسام ← الأقسام إلى عناصر ← ترجم العناصر إلى Emmet ← اربط في صفحة كاملة ← أضف غلاف head/style
- الاختصارات الأساسية:
.field/.field-row/.btn.btn-primary/form#id[action=... method=...]/[type=text name=... placeholder="..." required] - تجنب السمات المفقودة: اختصارات Emmet "هيكلية" — الترميز اليدوي ينسى بسهولة
required/for/placeholder، لكن الاختصارات لا تفعل ذلك أبدًا - تسلسل الفئات المتعددة:
.btn.btn-primary←class="btn btn-primary"(نمط محدد CSS) - اقتباس قيم السمات: احذف علامات الاقتباس عند عدم وجود مسافات (مثال:
[type=text])؛ استخدم علامات الاقتباس عند وجود مسافات (مثال:[placeholder="Enter your username"]) - جوهر هذا الدرس: دمج "صيغة الأجزاء" من الدروس 1–16 في "ممارسة دفعة واحدة" — القفزة الحرجة من "قراءة الاختصارات" إلى "كتابة سطر واحد"
📝 تمارين
-
أساسي (الصعوبة ⭐): اكتب هيكل صفحة تسجيل دخول بسيطة في سطر اختصار Emmet واحد — تضمين 1
<h1 class="title">User Login</h1>، 1 مدخل Username<input>(بـid="email"،type="email"،name="email"،required)، 1 مدخل Password<input>(بـid="pwd"،type="password"،name="pwd"،required)، 1<button type="submit">Sign In</button>. بعد التوسيع، تحقق: (أ) سماتtypeلـ<input>صحيحة؛ (ب)<button type="submit">داخل form يشغل إرسال النموذج؛ (ج) كلا سمتيrequiredفعالتان (المتصفح يمنع الإرسال عند الحقول الفارغة). -
متوسط (الصعوبة ⭐⭐): أعد كتابة اختصار Emmet للمثال الكامل 70 سطرًا في هذا الدرس — لا يحتاج مطابقة اختصار أليس تمامًا، لكن يجب أن يكون مكافئًا وظيفيًا: على الأقل 1 form، 2 input، 1 checkbox، 1 رابط نسيت كلمة المرور، 1 زر Sign In، 1 رابط تسجيل. أضف زري تسجيل دخول اجتماعي (Google، GitHub). قارن اختصارك مقابل اختصار أليس لترى أيهما أكثر إيجازًا (أحرف أقل). التقط لقطة شاشة لكل من اختصارك و HTML الموسع.
-
متقدم (الصعوبة ⭐⭐⭐): وسّع صفحة تسجيل الدخول 70 سطرًا في هذا الدرس إلى صفحة تسجيل كاملة. بالإضافة إلى حقول صفحة تسجيل الدخول، أضف: رقم الهاتف (
type="tel")، البريد الإلكتروني (type="email")، رمز التحقق (type="text"+ زر "Get Code" على اليمين)، ومربع اختيار شروط الخدمة (يجب تحديده). المتطلبات: (أ) HTML صفحة كاملة دفعة واحدة (اختصار Emmet واحد لجزء body)؛ (ب) عدد أحرف الاختصار ≤ 400 (إذا تجاوز، فكر في استخدام*ضرب أو تبسيط الهيكل)؛ (ج) جميع المدخلات لديهاrequired؛ (د) مربع اختيار الشروط يجب تحديده للإرسال (استخدم<input type="checkbox" required>للتحقق الأصلي من المتصفح). أخيرًا، أحصِ عدد الأحرف وفرق الوقت بين الترميز اليدوي مقابل Emmet، واكتب تقرير "فوائد Emmet التطبيقية".
