در حال بارگذاری...

مینی‌پروژه HTML — سایت شخصی

درس قبل جمع‌بندی جعبه‌ابزار HTML را نقشه کرد و به اینجا به‌عنوان تمرین اشاره داد. این درس نقشهٔ مهارت تازه نیست. یک برنامهٔ ساخت است: سه صفحه برنامه‌ریزی کنید، یک پوستهٔ ناوبری مشترک بگذارید، محتوای واقعی بنویسید، و سایت را با جدول پذیرش کوتاه ثابت کنید.

چرا الان مینی‌پروژه

آموزش‌ها یک موضوع در هر بار نشان می‌دهند. سایت شخصی کوچک همه را با هم می‌خواهد: landmark در هر صفحه، لینک نسبی کارکننده، یک تصویر اطلاعاتی، فهرست یا جدول داده، و فرم تماس با label. تحویل همان بسته — حتی بدون CSS زشت — از حفظ attribute بهتر است. این را چک‌لیستی بدانید که در یک نشست متمرکز تمام می‌شود.

پاسخ مستقیم

۱) دست‌کم سه فایل: index.html، about.html، contact.html. ۲) همان landmarkهای header / nav / footer را در همهٔ صفحات با لینک کار بین آن‌ها تکرار کنید. ۳) معرفی واقعی در خانه، داستان کوتاه در درباره، فرم name/email/message با label در تماس. ۴) یک تصویر اطلاعاتی با alt معنادار، به‌علاوه فهرست مهارت یا جدول واقعیت کوچک. ۵) با صفحه‌کلید Tab کنید؛ label گمشده، لینک شکسته و پرش عنوان را درست کنید. ۶) قبل از «تمام» هر ردیف جدول پذیرش را علامت بزنید.

📊 Acceptance criteria

Item	Done when
Shared nav	Same landmark links work on every page
Semantics	header, nav, main, and footer on each page
Home & about	Real paragraphs — not placeholder lorem forever
Media	At least one informative image with useful alt
Data	A skills list or a small facts table
Form	Labeled name, email, message + a real submit button
Quality	Keyboard tab order makes sense; no unlabeled controls

قبل از تایپ برنامه‌ریزی کنید

اول روی کاغذ (یا فایل یادداشت) بکشید: نام سایت، هدف سه صفحه، کدام عکس، کدام مهارت یا واقعیت در درباره. چیدمان پوشه را تصمیم بگیرید — هر سه HTML در یک پوشه برای لینک نسبی ساده. یک‌بار نام شخص/برند را ثابت کنید تا h1 و title در صفحات هم‌خوان بماند.

پوستهٔ مشترک — از اینجا شروع کنید

یک header/nav را در همهٔ صفحات کپی کنید؛ فقط محتوای main را عوض کنید. مقدار href نسبی باید دقیقاً با نام فایل بخواند. بعداً روی فرم <button type="submit"> واقعی بگذارید — submit جعلی با div خالی نسازید.

Shared nav starter

html

<header>
<h1>Alex Site</h1>
<nav aria-label="Main">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>
</header>
<main>
<!-- page content -->
</main>
<footer>
<p>© Alex</p>
</footer>

خواندن پوسته

header + nav + main + footer landmark واضح می‌دهد
aria-label روی nav وقتی ناو دوم بیاید کمک می‌کند
لینک نسبی سه فایل را یک سایت می‌کند
پوسته را تکرار کنید؛ فقط داخل main عوض شود
در <title> هر صفحه هم عنوان کوتاه بگذارید
جمع‌بندی عادت‌ها را گفت؛ اینجا با هم اعمال می‌شوند

استارتر فرم صفحهٔ تماس

صفحهٔ تماس جایی است که مهارت فرم به پروژه می‌رسد. هر کنترل را با <label> دیدنی جفت کنید (for/id یا پوشش کنترل). name بگذارید تا بک‌اند یا mailto بعدی نام فیلد داشته باشد. کنترل submit واقعی در نشانه‌گذاری باشد حتی اگر هنوز به سرور پست نمی‌کنید.

Contact form starter

html

<form action="#" method="post">
<p>
<label for="name">Name</label>
<input id="name" name="name" type="text" required>
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
</p>
<p>
<label for="msg">Message</label>
<textarea id="msg" name="message" rows="5" required></textarea>
</p>
<button type="submit">Send</button>
</form>

ترتیب ساختی که کار می‌کند

پوسته را در سه فایل تکرار کنید؛ لینک ناو را تا رسیدن همه به هم درست کنید. ۲. معرفی خانه و داستان درباره (+ فهرست مهارت یا جدول) بنویسید. ۳. یک عکس در images/؛ src و alt مشخص. ۴. فرم تماس را بچسبانید؛ label و name و submit را چک کنید. ۵. سه صفحه را در مرورگر باز کنید؛ عرض کم؛ از اولین لینک تا submit تب کنید. ۶. هر ردیف پذیرش را بزنید — CSS سبک بعداً، نه قبل از صادق بودن ساختار.

اشتباهات آسان این پروژه

کپی ناو یک‌بار، بعد فقط یک صفحه را ویرایش کردن تا لینک‌ها از هم جدا شوند
ورودی تماس فقط با placeholder و بدون <label>
جدول چیدمان برای کل صفحه به‌جای landmark + CSS بعدی
alt="" خالی روی پرتره یا عکسی که معنا دارد
ماندن lorem در خانه/درباره و اعلام «تمام»
پرش به فریم‌ورک یا CSS سنگین قبل از اعتبارسنجی سه صفحه
فراموش عادت جمع‌بندی: اول ساختار و label؛ بعد ظاهر

خلاصه

این جلسه ساخت سایت شخصی عملی است، نه نقشهٔ کورس دیگر
سه صفحه header/nav/main/footer مشترک با لینک نسبی کار می‌کنند
media، فهرست یا جدول، و فرم تماس با label را ترکیب کنید
جدول پذیرش تعریف «تمام» شماست
قبل از پرداخت CSS با صفحه‌کلید چک کنید
موضوعات اختیاری بعدی (SVG و بعد) اضافه هستند — اول این سایت را تحویل دهید

یادآوری کوتاه

اگر گیر کردید به جدول پذیرش برگردید — نه به حفظ تگ تازه. هدف تمرین ترکیب مهارت‌های همین کورس در یک سایت کوچک قابل باز کردن در مرورگر است.

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

📝 دستورالعمل‌ها

هر سوال را با دقت بخوانید
بهترین پاسخ را برای هر سوال انتخاب کنید
می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
پیشرفت شما در بالا نمایش داده می‌شود