-: توی این جلسه
یادگیری علامت‌گذاری یا همون "مارک‌آپ" متن رو ادامه می‌دیم
یعنی باز هم از تیترها (heading) پاراگراف‌ها
استفاده می‌کنیم و یاد می‌گیریم متن رو بولد (ضخیم) یا ایتالیک کنیم
خب بیاید اول با تیترها شروع کنیم
معمولاً هدف تیترها اینه که متن‌های بلند رو
به بخش‌های کوچیک‌تر و منطقی‌تر تقسیم کنن
و برای هر بخش یه عنوان (title) بذارن
تا الان شما با تگ H1 آشنا شدین
ولی در واقع 6 نوع تگ تیتر مختلف وجود داره
یه جور سلسله‌مراتب (hierarchy) بین تیترها هست
که به ما کمک می‌کنه توی متن هم سلسله‌مراتب مشخص کنیم
پس می‌تونیم از H1 شروع کنیم تا برسیم به H6
خب بیاید این متن رو برداریم
و باهاش هر شش نوع تیتر رو بسازیم
که ببینید هر کدوم توی مرورگر چه شکلی نمایش داده می‌شن
و چه تفاوتی دارن
تیتر H1 رو به عنوان تیتر اصلی در نظر می‌گیریم
بعد از اون تیتر دوم یا H2 هست
دارم همون متن قبلی رو اینجا کپی می‌کنم
که تفاوت ظاهری‌شون رو ببینید
خب الان H1 و H2 داریم
بعد برای تیتر سوم یا سطح سوم
از H3 استفاده می‌کنیم باز هم همون متن رو می‌ذاریم
و همین کارو ادامه می‌دیم
تا برسیم به H6
درسته؟
وقتی این کدها رو تایپ می‌کنید
کم‌کم وارد ذهنتون می‌شه
و در عمل دارید تمرین نوشتن HTML می‌کنید
خب H6 هم نوشتیم حالا فایل رو ذخیره کنیم
بعد مرورگر رو رفرش کنیم
و همونطور که می‌بینید
این کار باعث شده یه سلسله‌مراتب تصویری خیلی خوب
بین این شش تا تیتر درست بشه
تیتر اول خیلی بزرگ‌تر از بقیه‌ست
و آخری
یعنی H6 خیلی کوچیکه
و بین این دوتا
بقیه سایزها قرار می‌گیرن
خب عالیه
الان می‌دونیم که این تیترها چطور کار می‌کنن
بیاید بریم سراغ صفحه‌ی دمو که ساختیم
تا ببینیم چه نوع تیترهایی واقعاً لازم داریم
مثلاً اینجا اسم وبلاگمون هست
یعنی "The Code Magazine" که بزرگ‌ترین تیتره
زیرش عنوان مقاله رو داریم
یعنی عنوان این پست وبلاگ که یه مقدار کوچیک‌تره
پس دیگه تیتر اصلی (primary) نیست
بلکه تیتر دوم یا همون H2 محسوب می‌شه
بعد می‌رسیم به یه بخش کوچیک‌تر
که همون اطلاعات نویسنده و تاریخ انتشار مقاله‌ست
این دیگه اهمیت کمتری داره و می‌تونه تیتر سوم یعنی H3 باشه
درسته؟ اینطوری منطقی‌تره
پس حالا بیاید همین رو پیاده کنیم
می‌ریم توی فایل HTML و تیترها رو درست می‌کنیم
اول اسم وبلاگ رو داریم
پس اینجا باید H1 باشه
بعدش تیتر مقاله رو داریم
که باید H2 بشه
و در نهایت
اون اطلاعات نویسنده و تاریخ
اینا رو می‌ذاریم داخل H3
خب حالا فایل رو ذخیره کنیم و مرورگر رو رفرش کنیم
می‌بینید که الان تیترها درست نمایش داده می‌شن
یه ساختار منطقی ایجاد شد
و همین برای موتورهای جستجو و دسترس‌پذیری خیلی مهمه
خب حالا بریم سراغ پاراگراف‌ها
پاراگراف‌ها همون متن‌های عادی هستن
که بدنه‌ی اصلی مقاله یا نوشته رو تشکیل می‌دن
یاد گرفتید که برای پاراگراف از تگ P استفاده می‌کنیم
پس هرجایی متن عادی داشتیم باید داخل P بذاریم
بیاید یه پاراگراف تستی اینجا اضافه کنیم
مثلاً بنویسیم: «این یه متن تستی داخل پاراگرافه»
بعد ذخیره کنیم و مرورگر رو رفرش کنیم
می‌بینید که متن به صورت عادی نمایش داده می‌شه
فاصله‌ی بالا و پایینش هم به صورت خودکار ایجاد شده
که این کار مرورگره چون پاراگراف همینطوری نمایش داده می‌شه
خب حالا می‌ریم سراغ استایل دادن به متن
یعنی چطور متن رو بولد یا ایتالیک کنیم
اگه بخوایم متنی پررنگ یا ضخیم باشه
از تگ STRONG استفاده می‌کنیم
STRONG یعنی متن اهمیت بیشتری داره
و مرورگر اون رو پررنگ‌تر نشون می‌ده
بیاید همین متن تستی رو با strong امتحان کنیم
می‌نویسیم: «این یه متن با تاکید هست»
ذخیره کنیم و مرورگر رو رفرش کنیم
می‌بینید که کلمه‌ی "تاکید" پررنگ شده
و همین باعث می‌شه توجه بیشتری به اون بخش جلب بشه
خب حالا اگه بخوایم متن ایتالیک باشه
یعنی کمی کج نوشته بشه
از تگ EM استفاده می‌کنیم
EM مخفف Emphasis یا همون «تاکید» هست
ولی فرقش با Strong اینه که اینبار با حالت ایتالیک نشون داده می‌شه
مثلاً بنویسیم: «این یه متن ایتالیک هست»
ذخیره کنیم و مرورگر رو رفرش کنیم
می‌بینید که اون کلمه به شکل ایتالیک نمایش داده می‌شه
پس اینجوری می‌تونیم خیلی راحت روی بخش‌های مختلف متن تأکید کنیم
یا پررنگشون کنیم یا ایتالیک
خب عالیه تا اینجا خیلی خوب پیش رفتیم
حالا می‌خوایم بریم سراغ لیست‌ها
لیست‌ها دو نوع اصلی دارن: لیست مرتب و لیست نامرتب
لیست نامرتب همونیه که با نقطه نمایش داده می‌شه
و لیست مرتب با شماره‌ها نمایش داده می‌شه
خب اول با لیست نامرتب شروع کنیم
برای این کار از تگ UL استفاده می‌کنیم
UL مخفف unordered list یعنی لیست نامرتب
و هر آیتم داخلش با تگ LI مشخص می‌شه
LI یعنی list item یا همون آیتم لیست
بیاید یه مثال بزنیم: یه لیست از میوه‌ها
می‌نویسیم:
سیبموزانگور
ذخیره کنیم و مرورگر رو رفرش کنیم
می‌بینید که سه آیتم با نقطه نشون داده شدن
خب حالا لیست مرتب رو امتحان کنیم
برای لیست مرتب از تگ OL استفاده می‌کنیم
OL مخفف ordered list یعنی لیست مرتب
و باز هم آیتم‌ها با LI مشخص می‌شن
مثلاً:
اولدومسوم
ذخیره کنیم و مرورگر رو رفرش کنیم
این بار آیتم‌ها با شماره‌گذاری نمایش داده شدن
پس خیلی راحت می‌تونیم لیست‌ها رو درست کنیم
خب حالا بریم سراغ لینک‌ها
لینک‌ها همون چیزایی هستن که ما رو به یه صفحه‌ی دیگه می‌برن
برای ساخت لینک از تگ A استفاده می‌کنیم
A مخفف anchor یا همون «لنگر» هست
و همیشه یه ویژگی خیلی مهم داره به اسم href
href در واقع آدرس صفحه‌ایه که می‌خوایم بهش بریم
مثلاً: برو به گوگل
ذخیره کنیم و مرورگر رو رفرش کنیم
می‌بینید که متن "برو به گوگل" لینک شده
و اگه روش کلیک کنیم مرورگر ما رو به گوگل می‌بره
خیلی ساده و کاربردی
می‌تونیم لینک‌ها رو هم به سایت‌های خارجی بدیم هم به صفحات داخلی
مثلاً می‌تونیم به یه صفحه‌ی دیگه داخل همین پروژه لینک بدیم
فقط کافیه مسیر فایل رو داخل href بذاریم
مثلاً: درباره ما
خب حالا بیاید بریم سراغ تصاویر
برای نمایش عکس از تگ IMG استفاده می‌کنیم
IMG مخفف image یعنی تصویر
این تگ یه ویژگی خیلی مهم داره به اسم src
src مخفف source یعنی منبع عکس
و باید مسیر فایل تصویری که می‌خوایم نشون بدیم رو اونجا بذاریم
مثلاً:
اینجا alt هم داریم که متن جایگزینه
alt خیلی مهمه برای وقتی که تصویر لود نشه
یا برای کسانی که از صفحه‌خوان استفاده می‌کنن
پس همیشه باید متن جایگزین مناسب بنویسیم
خب حالا ذخیره کنیم و مرورگر رو رفرش کنیم
می‌بینید که تصویر روی صفحه ظاهر شد
و اگه لود نشه متن جایگزین نمایش داده می‌شه
خب حالا می‌ریم سراغ یه ویژگی دیگه
توی تگ img ما می‌تونیم اندازه تصویر رو هم مشخص کنیم
این کارو با ویژگی‌های width و height انجام می‌دیم
مثلاً:
اینجوری تصویر ۲۰۰ پیکسل عرض و ۲۰۰ پیکسل ارتفاع می‌گیره
ولی معمولاً فقط width رو می‌نویسیم
چون مرورگر خودش ارتفاع رو متناسب تغییر می‌ده
خب حالا می‌ریم سراغ یه موضوع جالب‌تر: فایل‌های ویدیو
برای نمایش ویدیو از تگ video استفاده می‌کنیم
این تگ هم مثل img یه ویژگی src داره
ولی برای اینکه ویدیو کنترل داشته باشه باید ویژگی controls رو هم بذاریم
مثلاً: <video src="moviemp4" controls>
حالا ذخیره کنیم و مرورگر رو رفرش کنیم
می‌بینید که یه پلیر ویدیو روی صفحه ظاهر شد
و کاربر می‌تونه پلی پاز یا ولوم رو تنظیم کنه
خیلی راحت و کاربردی
خب حالا بریم سراغ موضوعی به اسم جدول‌ها
جدول‌ها با تگ table ساخته می‌شن
و هر سطر جدول با تگ tr یعنی table row مشخص می‌شه
داخل هر سطر هم سلول‌ها با تگ td ساخته می‌شن
بیاید یه مثال بسازیم: یه جدول ساده با نام و سن
نامسنعلی۲۰
ذخیره کنیم و مرورگر رو رفرش کنیم
می‌بینید که یه جدول ساده ساخته شد
ولی خب بدون استایل خیلی خشک و بی‌روح به نظر میاد
بعداً با CSS قشنگ‌ترش می‌کنیم
یه نکته: برای عنوان ستون‌ها از تگ th استفاده می‌کنیم
th مخفف table header یعنی سرستون
پس بهتره اولین ردیف جدول رو با th بنویسیم
مثلاً: نامسن
این باعث می‌شه عنوان ستون‌ها پررنگ‌تر دیده بشن
خب حالا بریم سراغ موضوع خیلی مهم دیگه: فرم‌ها
فرم‌ها همون چیزایی هستن که کاربر می‌تونه توشون اطلاعات وارد کنه
مثلاً فرم ثبت‌نام یا ورود
برای فرم از تگ form استفاده می‌کنیم
داخل فرم می‌تونیم inputهای مختلف بذاریم
input یعنی همون فیلدهایی که کاربر می‌تونه چیزی تایپ کنه
مثلاً:
اینجا یه فیلد متنی ساخته شد
کاربر می‌تونه اسم یا هر متن دیگه‌ای وارد کنه
نوع input خیلی مهمه
چون با type مشخص می‌کنیم چی وارد بشه
مثلاً type="email" باعث می‌شه فیلد ایمیل باشه
یا type="password" برای وارد کردن رمز عبور
و همینطور type="number" برای اعداد
پس inputها انواع مختلفی دارن
یه نکته مهم دیگه: همیشه باید برای input یه label بذاریم
label یعنی برچسب تا کاربر بدونه چی باید وارد کنه
مثلاً: نام:
اینجوری کاربر می‌فهمه این فیلد برای اسمشه
خب حالا می‌ریم سراغ دکمه‌ها
برای دکمه از تگ button استفاده می‌کنیم
مثلاً: ثبت‌نام
اینجوری یه دکمه روی فرم ظاهر می‌شه
کاربر روش کلیک می‌کنه و فرم ارسال می‌شه
اما ارسال فرم یه ویژگی دیگه هم نیاز داره
اونم ویژگی action داخل تگ form هست
action مشخص می‌کنه اطلاعات به کجا فرستاده بشه
مثلاً:
این یعنی وقتی فرم ارسال شد اطلاعات بره به فایل signupphp
فعلاً چون ما بک‌اند نداریم این بخش کار خاصی نمی‌کنه
ولی توی پروژه‌های واقعی خیلی مهمه
خب حالا بریم سراغ یه موضوع دیگه: لینک‌ها
برای ساخت لینک از تگ a استفاده می‌کنیم
a مخفف anchor یعنی لنگر
توی تگ a یه ویژگی href داریم که آدرس رو مشخص می‌کنه
مثلاً: گوگل
اینجوری وقتی روش کلیک کنیم می‌ریم سایت گوگل
خب حالا بریم سراغ موضوع خیلی پرکاربرد: لیست‌ها
لیست‌ها دو نوع هستن: مرتب و نامرتب
لیست نامرتب با تگ ul ساخته می‌شه
و هر آیتمش با تگ li یعنی list item مشخص می‌شه
مثلاً:
HTMLCSSJavaScript
ذخیره کنیم و مرورگر رو رفرش کنیم
می‌بینید که یه لیست نقطه‌ای ساخته شد
لیست مرتب هم با تگ ol ساخته می‌شه
ol مخفف ordered list یعنی لیست مرتب
همین آیتم‌ها رو بذاریم داخل ol
ذخیره کنیم و دوباره مرورگر رو رفرش کنیم
حالا آیتم‌ها شماره‌گذاری شدن
لیست‌ها خیلی توی منوها و محتوا استفاده می‌شن
خب حالا یه موضوع خیلی مهم دیگه: div
div یه تگ عمومی برای دسته‌بندی بخش‌هاست
مثلاً می‌تونیم کل هدر سایت رو داخل یه div بذاریم
بعداً با CSS می‌تونیم اون بخش رو استایل بدیم
پس div برای ساختاردهی خیلی کاربردیه
یه تگ مشابه دیگه هم داریم به اسم span
span برای بخش‌های کوچیک متن استفاده می‌شه
مثلاً بخوایم فقط یه کلمه رو رنگی کنیم
می‌نویسیم: <span style="color:red">مهم
اینجوری فقط کلمه "مهم" قرمز می‌شه
پس div برای بخش‌های بزرگ و span برای بخش‌های کوچیکه
خب حالا بریم سراغ تگ‌های معنایی
تگ‌های معنایی مثل header, footer, main و article هستن
این تگ‌ها باعث می‌شن کد ما معنای بیشتری داشته باشه
مثلاً تگ header مشخص می‌کنه این بخش هدر سایت هست
footer هم برای پایین صفحه یا همون فوتر استفاده می‌شه
main بخش اصلی محتواست
و article برای مقالات یا پست‌های بلاگ
این تگ‌ها توی سئو و خوانایی کد خیلی مهمن
خب حالا یه نمونه کوچیک از این تگ‌ها می‌سازیم
کد مگزین
مقاله اولمتن مقاله
© 2025 همه حقوق محفوظ است
ذخیره کنیم و مرورگر رو رفرش کنیم
می‌بینید که ساختار صفحه خیلی مرتب‌تر شد
خب حالا برسیم به تگ خیلی مهمی به اسم link
این تگ برای وصل کردن فایل‌های CSS به HTML استفاده می‌شه
باید داخل head بنویسیمش
مثلاً: <link rel="stylesheet" href="stylecss">
اینجوری فایل stylecss به صفحه وصل می‌شه
خب حالا بریم سراغ meta tag
تگ meta برای اطلاعات اضافی درباره صفحه استفاده می‌شه
مثلاً charset برای مشخص کردن نوع کاراکترهاست
این باعث می‌شه حروف فارسی درست نمایش داده بشن
یه meta دیگه viewport هست
این برای ریسپانسیو بودن صفحه روی موبایل استفاده می‌شه
<meta name="viewport"
content="width=device-width, initial-scale=10">
این خط باعث می‌شه سایت روی موبایل درست دیده بشه
خب تا اینجا کلی از ساختار HTML رو یاد گرفتیم
الان می‌تونیم یه صفحه کامل بسازیم که هم متن داره هم عکس هم لینک
و حتی فرم و جدول هم توش بذاریم
از اینجا به بعد تمرکز اصلی می‌ره روی CSS
چون با CSS می‌تونیم ظاهر سایت رو زیبا کنیم
ولی قبلش مرور می‌کنیم ببینیم چی یاد گرفتیم
یاد گرفتیم چطور متن تصویر ویدیو و جدول بسازیم
یاد گرفتیم فرم‌ها و ورودی‌های مختلف درست کنیم
یاد گرفتیم لیست‌ها div و span رو کجا استفاده کنیم
و با تگ‌های معنایی مثل header و footer آشنا شدیم
همینطور meta tagها و link برای اتصال CSS
خب حالا آماده‌ایم بریم سراغ بخش بعدی یعنی CSS
اونجاست که ظاهر سایت‌مون رو می‌سازیم
یاد می‌گیریم رنگ‌ها فونت‌ها و فاصله‌ها رو تغییر بدیم
و در نهایت سایتی درست کنیم که هم زیبا باشه هم حرفه‌ای
پس تا جلسه بعدی همراه من باشید
مرسی که با من اومدید جلو بریم برای CSS