مدرس: خوش برگشتید
خب اولین چیزی که باید توی HTML یاد بگیریم
ساختار کلی یا همون اسکلت اصلی سندهای HTML هست
یعنی یه ساختاری که هر
سند HTML باید داشته باشه
ولی اول بیاید یه نگاه سریع بندازیم به
پروژه‌ای که قراره توی این بخش با هم بسازیم
اینجا قراره یه مجله‌ی آنلاین به اسم Code Magazine درست کنیم
همین‌طور که می‌بینید توی این مجله
یه پست ساده‌ی وبلاگی داریم به اسم «زبان پایه‌ی وب»
توی این پست لینک داریم تصویر داریم
متن بولد یا پررنگ داریم
و متن ایتالیک یا مورب هم داریم
همین‌طور لیست‌ها و کلی چیز دیگه
پس توی این بخش با این موارد آشنا می‌شیم
که در نهایت وقتی بخش تموم شد
شما هم اصول اولیه‌ی HTML رو یاد گرفتید
و همین پروژه رو هم خواهید ساخت
خب بریم سر اصل مطلب و شروع کنیم
اولین کاری که باید انجام بدیم اینه که
یه پوشه‌ی پروژه بسازیم
پس برگردید به دسکتاپ یا هر جایی که با فایل‌ها کار می‌کنید
همون‌جایی که فایل‌ها رو ذخیره کردید
من اینجا پوشه‌ای رو باز می‌کنم
که توی بخش قبلی دانلود کرده بودیم
این همون کدهای شروع (starter code) هست
و من می‌خوام از داخل اون یه کپی بگیرم
و این فایل‌های اولیه رو بیارم بیرون
پس این پوشه رو کپی می‌کنم و می‌ذارم روی دسکتاپم
اینجا
البته می‌تونید همون پوشه‌ی اصلی رو به عنوان پوشه‌ی پروژه استفاده کنید
اما این کار ممکنه یه کم گیج‌کننده بشه
برای همین من همیشه ترجیح می‌دم
یه کپی از اون پوشه رو جای دیگه بسازم
خب حالا برگردیم به VS Code
اینجا می‌خوام یه فایل HTML جدید بسازم
پس روی این پوشه کلیک راست می‌کنم
و New File رو انتخاب می‌کنم
و اسم فایل رو می‌ذارم indexhtml
index اسم استانداردی هست برای صفحه‌ی اصلی وبسایت
و html هم پسوندشه
چون داریم یه فایل HTML می‌سازیم
و خب حالا VS Code تشخیص داده که این یه فایل HTML هست
برای همین یه آیکون مخصوص HTML هم اینجا گذاشته
خب حالا اولین چیزی که می‌نویسیم داخل این فایل
یه چیزی به اسم doctype هست
این خیلی شبیه یه عنصر HTMLه اما درواقع یه عنصر نیست
DOCTYPE یه اعلان یا اعلامیه‌ست برای مرورگر
و مشخص می‌کنه که این سند از نوع HTML5 هست
که خب این همون نسخه‌ایه که الان همه استفاده می‌کنن
پس کافیه فقط بنویسیم <!DOCTYPE html>
همین لازم نیست چیز دیگه‌ای بهش اضافه کنیم
خب حالا بریم سراغ اولین عنصر واقعی HTML
و اون هم عنصر هست
این درواقع عنصر ریشه یا همون root element صفحه‌ست
یعنی همه‌ی بقیه‌ی کدهای HTML قراره داخل این باشن
برای همین اول باید باز کنیم
و در انتها هم باید با ببندیمش
یادتون باشه هر عنصری که باز می‌کنیم
آخرش باید بسته بشه مگر اینکه جزو اون استثناها باشه
خب حالا داخل عنصر html دو بخش اصلی داریم
بخش head و بخش body
پس اول بیاید head رو بسازیم
اینجا می‌نویسیم
و پایینش هم می‌نویسیم
یعنی یه بخش کامل head درست کردیم
بعد هم میایم بخش body رو درست می‌کنیم
پس اینجا می‌نویسیم و در انتها هم
همون‌طور که گفتم اینا دو بخش اصلی HTML هستن
head و body همیشه داخل html قرار می‌گیرن
خب حالا بیاید یه کم دقیق‌تر ببینیم هرکدوم چه‌کاره‌ست
بخش head جاییه که اطلاعات مربوط به صفحه رو می‌ذاریم
این اطلاعات مستقیماً به کاربر نشون داده نمی‌شن
اما مرورگرها و موتورهای جستجو ازشون استفاده می‌کنن
مثلاً می‌تونیم عنوان صفحه (title) رو اینجا بذاریم
پس بیاید یه تگ title باز کنیم:
و اسم پروژه‌مون رو داخلش بنویسیم
مثلاً بنویسیم: "مجله‌ی کد"
بعد هم باید این تگ رو با ببندیم
پس الان عنوان صفحه رو مشخص کردیم
و اگه این فایل رو توی مرورگر باز کنیم
می‌بینیم که عنوان توی تب بالای مرورگر نشون داده می‌شه
خب حالا که head تموم شد میریم سراغ body
چون همه‌ی محتوایی که قراره کاربر ببینه اینجا قرار می‌گیره
مثل متن‌ها عکس‌ها لینک‌ها و هرچیز دیگه
پس بیاید با یه متن ساده شروع کنیم
اولین چیزی که می‌نویسیم یه تیتر یا همون heading هست
پس از عنصر استفاده می‌کنیم
داخلش بنویسیم: "زبان پایه‌ی وب: HTML"
و بعد با ببندیمش
خب این شد تیتر اصلی صفحه‌مون
حالا می‌خوایم یه پاراگراف زیرش اضافه کنیم
پس تگ رو باز می‌کنیم
و داخلش یه متن ساده می‌نویسیم
مثلاً بنویسیم: "به مجله‌ی کد خوش اومدید!"
و بعد هم با می‌بندیمش
خب حالا این متن به عنوان یه پاراگراف نشون داده می‌شه
همون‌طور که می‌بینید مرورگر خودش یه خط فاصله می‌ذاره
یعنی پاراگراف‌ها به‌طور پیش‌فرض از هم جدا نمایش داده می‌شن
و همین باعث می‌شه متن مرتب‌تر دیده بشه
خب بیاید حالا یه تصویر هم به صفحه اضافه کنیم
برای این کار از عنصر استفاده می‌کنیم
این یکی از همون عناصریه که تگ بسته نداره
پس فقط یه تگ باز داریم و داخلش ویژگی‌ها رو می‌نویسیم
اولین ویژگی که همیشه لازمه ویژگی src هست
این مشخص می‌کنه تصویرمون از کجا بیاد
پس اینجا می‌نویسیم: src="img/logopng"
یعنی تصویر لوگو از پوشه‌ی img خونده بشه
ویژگی مهم بعدی alt هست
این درواقع متنیه که اگه عکس لود نشد نمایش داده می‌شه
و همچنین برای دسترس‌پذیری خیلی مهمه
پس می‌نویسیم: alt="لوگوی سایت"
به همین سادگی تونستیم تصویر رو اضافه کنیم
خب حالا بیاید یه لینک هم به صفحه اضافه کنیم
برای لینک‌ها از عنصر استفاده می‌کنیم
این یکی هم مثل پاراگراف نیاز به تگ باز و بسته داره
پس می‌نویسیم و بعد
خب حالا مهم‌ترین ویژگی لینک href هست
که مشخص می‌کنه لینک به کجا بره
مثلاً می‌نویسیم: href="https://googlecom"
یعنی وقتی روش کلیک کنیم میره به سایت گوگل
بین تگ باز و بسته هم متن لینک رو می‌ذاریم
مثلاً بنویسیم: "جستجو در گوگل"
پس لینک کامل شد و آماده‌ی استفاده‌ست
اگه الان روی این لینک کلیک کنیم
مستقیم ما رو به گوگل می‌بره
خیلی راحت و بدون دردسر
خب حالا یه بخش خیلی مهم دیگه: لیست‌ها
لیست‌ها توی HTML دو نوع اصلی دارن
یکی لیست مرتب یا ordered list
و یکی لیست نامرتب یا unordered list
بیاید اول با لیست نامرتب شروع کنیم
برای این کار از عنصر استفاده می‌کنیم
بعد هم برای هر آیتم لیست از استفاده می‌کنیم
مثلاً می‌نویسیم: "HTML" "CSS" "JavaScript"
هرکدوم از اینا داخل یه قرار می‌گیرن
و وقتی توی مرورگر نمایش داده بشه
به صورت گلوله‌ای یا دایره‌ای نشون داده می‌شن
خب حالا نوع دوم لیست‌ها: لیست مرتب
برای این یکی از استفاده می‌کنیم
دقیقاً مثل قبل هر آیتم با مشخص می‌شه
فقط این بار مرورگر خودش بهشون شماره می‌ده
مثلاً آیتم اول می‌شه 1 بعدی 2 بعدی 3 و همین‌طور ادامه
این برای وقتی خوبه که بخوایم مراحل یا ترتیب رو نشون بدیم
پس دیدید که کار با لیست‌ها هم خیلی ساده‌ست
فقط کافیه بدونید و چطور استفاده می‌شن
و البته برای آیتم‌های داخل لیست
خب حالا همه‌ی اینارو با هم ترکیب می‌کنیم
یعنی متن تصویر لینک و لیست
این‌طوری یه صفحه‌ی ساده‌ی کامل خواهیم داشت
این دقیقاً همون چیزیه که معمولاً توی وب‌سایت‌ها می‌بینیم
ترکیبی از متن عکس لینک و لیست
حالا بیاید یه قدم دیگه جلوتر بریم
می‌خوایم بخش‌های مختلف صفحه رو باهم سازماندهی کنیم
برای این کار از عنصر استفاده می‌کنیم
که می‌تونیم چندتا عنصر رو داخلش گروه‌بندی کنیم
مثلاً همه‌ی متن‌ها رو بذاریم توی یه div
یا همه‌ی عکس‌ها رو توی یه div جدا بذاریم
اینطوری ساختار صفحه‌مون خیلی مرتب‌تر می‌شه
بعداً هم با CSS راحت‌تر می‌تونیم استایل بدیم
پس بیشتر برای سازماندهی استفاده می‌شه
اما یه سری عناصر دیگه هم هستن که نقش معنایی دارن
مثلاً عنصر برای سربرگ صفحه‌ست
یا برای پایین صفحه یا همون پانوشت
و همین‌طور برای محتوای اصلی سایت
این عناصر کمک می‌کنن صفحه معنای بهتری پیدا کنه
و برای موتورهای جستجو و دسترس‌پذیری هم خیلی مهمن
پس پیشنهاد می‌شه هر وقت می‌تونیم از این عناصر معنایی استفاده کنیم
نه اینکه همه‌چی رو فقط بذاریم توی div
خب حالا بیاید به یه موضوع دیگه بپردازیم: متن‌های تأکید شده
برای این کار دو عنصر مهم داریم: و
متن رو پررنگ می‌کنه و بهش تأکید قوی می‌ده
اما متن رو مورب می‌کنه و تأکید ملایم‌تری داره
پس اگه می‌خوایم یه چیزی خیلی مهم جلوه کنه از strong استفاده می‌کنیم
ولی اگه فقط می‌خوایم توجه رو جلب کنیم em بهتره
و نکته مهم اینه که اینا فقط ظاهر نیستن
درواقع به مرورگر و موتور جستجو می‌گن که این متن مهمه
پس معنای خاصی هم پشتشون هست
خب حالا بیاید یه خط افقی هم یاد بگیریم
این کار رو با عنصر انجام می‌دیم
معمولاً وقتی می‌خوایم بخش‌ها رو از هم جدا کنیم استفاده می‌شه
اینم مثل img تگ بسته نداره
فقط یه تگ باز داریم و کار تمومه
خب تا اینجا کلی عنصر مختلف یاد گرفتیم
تیترها پاراگراف‌ها لیست‌ها لینک‌ها و عکس‌ها
همین‌طور div عناصر معنایی strong و em
و حتی hr برای جدا کردن بخش‌ها
این تقریباً همه‌ی چیزهای پایه‌ای HTML بودن
با همینا می‌تونیم کلی صفحه‌ی ساده درست کنیم
اما هنوز یه سری چیزای مهم دیگه هم مونده
مثلاً اینکه چطور ساختار کلی صفحه رو تعریف کنیم
اینجاست که وارد بخش خیلی مهمی به اسم head می‌شیم
عنصر در بالای سند HTML قرار می‌گیره
و شامل اطلاعاتی درباره‌ی خود صفحه‌ست
نه محتوایی که کاربر می‌بینه بلکه اطلاعات پشت‌صحنه
مثلاً عنوان صفحه کدگذاری کاراکترها یا فونت‌ها
و همین‌طور فایل‌های CSS یا JavaScript
پس head جاییه که همه‌ی این متااطلاعات قرار می‌گیره
یکی از مهم‌ترین چیزها داخل head عنصر هست
این همون متنیه که بالای مرورگر یا توی تب‌ها دیده می‌شه
و همچنین توی نتایج گوگل هم نشون داده می‌شه