HTML چیست / آشنایی با HTML – HTML چیست و کاربرد آن در ساخت صفحات وب چیست؟
خوش اومدین به اولین جلسه از دوره آموزشی HTML . خوشحالم که تو این دوره هم میتونم در خدمتتون باشم. امروز قرار هست اولین قدم رو برای قرارگرفتن در مسیر طراحی وب سایت برداریم. قدمی که هرچند ضروری هست ولی کافی نیست و تنها گامی کوچک در مسیری بزرگه. در درس اول به این پرسش پاسخ میدیم که HTML چیست و چه نقشی در ساخت صفحات وب داره؟ خبر خوب اینه که این موضوع بسیار بسیار ساده و بدور از هرگونه پیچیدگی هست و اولین قدم هست که بتونید با نوشتن متن، به خروجی صفحه وب برسید. کاری که شاید تا حالا اصلا انجام نداده باشید و از این لحاظ جذابه. هرچند که ما با برنامه نویسی توی این دوره کاری نداریم ولی بخاطر همین موضوعی که گفتم، کمی از حس و حال برنامه نویسی رو تجربه میکنیم و قطعا اگه بنا باشه به برنامه نویسی علاقمند بشید استارتش تو همین دوره میخوره. پس صحبت رو کوتاه میکنیم و میری سراغ اولین جلسه.
HTML چیست؟
هرچند میخوایم به این سوال پاسخ بدیم که HTML چیست ولی اگه میخوای بدونی HTML مخفف چه کلماتی است و تو چه تاریخی ایجاد شده و چه سرگذتشی داره میتونی این اطلاعات رو تو صفحه ویکی پدیا HTML پیدا کنی. ولی اگه بخوام صرفا جهت آشنایی اولیه با HTML رو تو یه جمله تعریف کنم میتونم بگم:
HTML (اچ تی ام ال) هسته اصلی صفات وب هست. HTML از تعداد تگ ایجاد شده و اسکلت اصلی تمامی صفحات وب توسط HTML ایجاد میشه. بنابراین اچ تی ام ال سازنده ساختار صفحات وب هست.
یه مثال جالب برای درک این موضوع هست. اگه صفحات وب رو به بدن انسان تشبیه کنیم. HTML نقش اسکلت این بدن رو به عهده داره. پس همونطور که انسان بدون اسکلت بندی ندارم، صفحه وبی هم بدون HTML نداریم.
اگه بخوایم با مثال بالا تعریفمون رو کامل کنیم میتونیم بگیم که همونطور که اسکلت در حقیقت همان استخوان ها هستند که با اندازه ها و کارکردهای متفاوت در کنار هم قرار گرفتند، میتونیم در مورد HTML هم بگیم همون Tag تگ ها هستند که در کنار هم قرارگرفتن و HTML رو تشکیل دادن. در حقیقت HTML چیزی نیست بجز تعدادی Tag با کارکردهای متفاوت.
تعریف Tag در HTML
تا اینجا تا حدودی با اینکه HTML چیست و چه کاربردی دارد آشنا شدیم. حالا که فهمیدن و یادگیری HTML وابسته به فهم و یادگیری Tag هست، پس مهمترین کار ما تو این دوره میشه آشنایی با تگ ها و کارکردشون. به تصویر زیر نگاه کنید تا با نمونه ای از تگ آشنا بشید.
نکته خیلی مهم: اینکه این تگ ها چه کاری انجام میدن، موضوع صحبت ما نیست و توی ادامه این دوره اینها رو یاد میگیریم. اینجا هدف ما صرفا آشنایی با مفاهیم هست.
توی تصویر بالا ساده ترین نمونه یه فایل HTML رو میبینید که شامل کدهای HTML هست. همونطور که گفتیم HTML از یه سری تگ ساخته شده. تمامی بخش های قرمز رنگی که توی تصویر بالا میبینید تگ هست. هر تگ وظیفه خاص خودش رو داره و بعضی از تگ ها یه سری خصوصیات رو میگیرن که توی تصویر بالا عنوان خصوصیت رو با رنگ بنفش و مقدار خصوصیت رو با رنگ سبز میبینید.
تگ ها داخل ممکن است هیچ خصوصیتی نگیرند ولی معمولا اکثر تگ ها در HTML یه سری خصوصیاتی رو میگیرن. لازم نیست همه این خصوصیات رو حفظ کنیم و یا حتی یاد بگیریم. بلکه یه سری خصوصیت ها که بیشتر استفاده میشه رو باهاشون آشنا میشیم و با توجه به نیازمون به طور خودکار بعضی هاشون رو هم حفظ میکنیم. مهم اینه که ساختار رو یاد بگیریم و بتونیم تگ ها و خصوصیت ها رو به شکل درست بنویسیم. درست مثل نوشتن املاء در زبان فارسی، نکته مهم اولیه اینه که حروف الفبا رو یاد بگیریم و لازم نیست املای همه کلمات رو حفظ کنیم. به مرور زمان املای خیلی از کلمات رو حفظ میشیم و اگه جایی املای کلمه ای رو نمیدونستیم خیلی راحت اون مورد رو یادمیگیریم و به گنجینه لغاتمون اضافه میشه. پس با همین رویکرد به یادگیری تگ ها نگاه کنید و پیش برید.
بنابراین اگه بخوایم یه تعریف کاملی از تگ داشته باشیم میتونیم بگیم:
تگ ها که HTML از اونها تشکیل شده شامل دو علامت کوچکتر و بزرگتر هستند که اسم تگ در داخل اونها قرار میگیره. بعضی تگ ها یه قسمتی هستن و بعضی ها دو قسمتی(بیشتر دوقسمتی هستند) تگ های دو قسمتی شامل تگ باز و تگ بسته میشن که تنها تفاوتشون داشتن یه اسلش / بعد از علامت کوچکتر ابتدای تگ است.
به عنوان مثال در تصویر بالا تگ <head> در خط 4 باز شده (قسمت اول تگ یا همون تگ باز) و در خط 15 همون تگ با یک اسلش اضافه بسته شده.
نکته مهم: خصوصیات تگ ها در بخش اول تگ ها (تگ باز) قرار میگیرن. برای تگ های تکی هم که طبیعتا در همون یه بخش قرار میگیرن.
توی تصویر بالا دقت کنید: ما تگی به اسم <h1> داریم که در خط 12 باز شده و در همون خط هم بسته شده. این تگ هیچ خصوصیتی دریافت نکرده در صورتی که تگ <html> که در خط 2 باز شده در خط 15 بسته شده. همچنین این تگ خصوصیت lang رو استفاده کرده که با مقدار en مقداردهی شده.
نکات مهم در مورد تگ ها
با توجه به مطالبی که در بالا با آن اشاره شدیم، الان درک بهترین نسبت به تگ ها داریم و البته در طول دوره که با این تگ ها کار میکینیم، این تعاریف و مفاهیم بهتر و بیشتر برامون جامیفته.
در این قسمت نکات مهمی در مورد تگ ها رو بررسی میکنیم:
- بعضی تگ ها دو قسمتی هستند و بعضی تگ ها تک قسمتی. تگ های دو قسمتی این قابلیت رو دارند که متن یا تگ یا تگ های دیگری رو داخل خودشون قرار بدن و دقیقا به همین خاطر دو قسمتی هستند.
هر تگ یا متنی که داخل تگ دیگری استفاده شود زیرمجموعه اون تگ محسوب میشه - تگ ها میتونند خصوصیت هایی داشته باشند. این خصوصیت ها در قسمت اول تگ قرار میگیرن
- خصوصیات تگ ها شامل دو قسمت هستن: عنوان خصوصیت و مقدار خصوصیت. برای مقداردهی یک خصوصیت، داخل تگ باز و بعد از نام تگ، قبل از علامت بزرگتر، ابتدا نام خصوصیت نوشته میشود و سپس علامت مساوی را میگذاریم. بعد از آن مقدار خصوصیت رو داخل دابل کوتیشن ” قرار میدیم و در مقابل خصوصیت مینویسیم. نمونه هایی از خصوصیت ها رو میتونید در تصویر بالا پیدا کنید.
چند نکته در مورد HTML
تا اینجا متوجه شدیم که HTML چیست و ساختار آن که شامل تگ ها هستند به چه شکلی هست. خب یه سری نکات کلی در مورد HTML هم هست که اینجا بهش میپردازیم:
- تگ های head و body دو زیرمجموعه اصلی تگ html در یک فایل html هستند.
- تگ هایی که قرار است روی صفحه نمایش به مخاطب نمایش داده بشوند معمولا داخل تگ body قرار میگیرند. از طرفی تگ head بیشتر برای فراخوانی فایل های دیگر، درج اطلاعات کلی فایل و… استفاده میشه و بصورت مستقیم آیتمی در صفحه نهایی اضافه نمیکنه.
- فایل ها ی html با پسوند .html و .htm ذخیره میشن.
- فاصله هایی که بین تگ ها در تصویر بالا هم مشخص هستند (تو رفتگی ها و اینترها) هیچ تأثیری در فایل ما ندارند و صرفا برای زیبایی نویسی و فهم بهتر کدها توسط ما کاربرد دارن. اگر تمامی مواردی که در تصویر بالا میبینید در یک خط هم نوشته میشد تأثیری در خروجی نهایی نداشت.
- برای مشاهده فایل های HTML باید از مرورگر(Browser) استفاده کنیم. مرورگرهای زیادی از جمله کروم، فایرفاکس، اپرا و… به صورت رایگان در دسترس هستند.
امیدوارم با توضیحات بالا به پاسخ پرسش ابتدای جلسه رسیده باشید و بدانید که HTML چیست و کاربردش توی طراحی سایت چیه. بهتون پیشنهاد میکنم برای درک بهتر و دریافت پاسخ بهتر به سوال HTML چیست ویدیو مربوط به این جلسه رو ببینید و از نکاتی که اونجا بیشتر توضیح دادم استفاده کنید.
قطعا تا پایان این دوره و با شناختی از تگ ها پیدا میکنید، درک بهتر خواهید یافت و با تمرین و ممارست، گام مهمی در مسیر یادگیری طراحی سایت برمیدارید.
