سلام و درود به همه همراهان ویکی تیچ. در این دوره با آموزش html همراه شما خواهیم بود. شاید تا حالا شنیده باشید که html زبان برنامه نویسی نیست و همه کاربران اینترنت اون رو زبان نشانه گذاری html صدا میزنن. خب زبان نشانه گذاری دقیقا یعنی چی؟ در قسمت قبلی آموزش ها هم اشاره کردم که زبان نشانه گذاری یعنی زبانی که توسط اون، اجزای صفحه رو نشانه گذاری میکنیم. دوستان اگر بخوام کمی ساده تر این موضوع رو بیان کنم معنی نشانه گذاری اجزای صفحه اینه که مشخص کنیم چه چیزی در کجای صفحه قرار بگیره.
یک اتاق خالی رو تصور کنید. وقتی میخوایم اجزای مورد نظرمون رو توی اتاق بچینیم، باید مشخص کنیم که کدوم وسیله کجا قرار بگیره. برای مثال تخت رو گوشه ی سمت چپ اتاق، میز رو زیر پنجره، کمد رو سمت راست در ورودی و روبروی تخت یک تابلو به دیوار می زنیم. خب توی صفحات وب هم اجزای مختلفی وجود دارن. برای مثال تصاویر، نوشته های متنی، تیتر ها یا عناوین، دکمه ها و لینک ها، آیکون ها و خیلی اجزای گوناگون دیگه که وقتی کنار هم قرار بگیرن، یک صفحه کامل رو میسازن. زبان نشانه گذاری html مشخص میکنه که در هر قسمت از صفحه از چه عنصری استفاده بشه و محتوای اون چی باشه. در ادامه مشخص می کنیم که چطور قراره این کار رو انجام بدیم.
برای اضافه کردن یک عنصر در html از علامتی به اسم تگ استفاده می کنیم که به این شکل <> هستند. متنی که درون علامت تگ ها نوشته بشه نشان دهنده نوع اون عنصر هست .برای مثال <a> که تگ a نامیده میشه، برای بوجود آوردن یک لینک در صفحه استفاده میشه.بیش از صد نوع تگ گوناگون در زبان نشانه گذاری html وجود داره که هر کدوم برای ساختن یک عنصر مشخص به کار گرفته میشه . مثلا همونطور که الان گفتیم تگ a برای ساخت لینک، تگ img برای ساخت تصاویر، تگ p برای ساخت متن نوشته شده استفاده میشن. توی قسمت ویکی دیتا در بخش html، انواع تگ ها با کاربردهای هر کدوم و توضیحات لازم رو گذاشتم. اما الان نیازی نیست به این قسمت برید. اول بهتره کمی با ساختار نشانه گذاری آشنا بشیم.
دسته اول تگ هایی که هم تگ باز دارن و هم تگ بسته : شاید بهتر باشه اول تگ باز و تگ بسته رو تعریف کنیم. تگ باز برای شروع ساخت محتوای یک تگ و تگ بسته برای پایان محتوای یک تگ به کار گرفته میشه. توی تگ بسته قبل از اسم تگ مورد استفادمون یک علامت / میگذاریم. به تصویر زیر نگاه کنید.
همونطور که کاملا مشخصه، این دسته از تگ ها در یک قسمت باز شده، محتوای داخل اونها مشخص میشه و در پایان بسته میشن. در نظر داشته باشید که اسم تگ باز و بسته دقیقا باید یکی باشه و فقط در تگ بسته قبل از اسم یک علامت / گذاشته میشه. عمده تگ های html از نوع اول هستن.
قبل از این که بخوایم دسته دوم رو توضیح بدیم، شاید لازم باشه تا با مفهوم صفت ها (attribute) در زبان نشانه گذاری html آشنا بشیم.
صفت (attribute) : هر کدام از تگ های html وقتی مورد استفاده قرار میگیرن میتونن یک سری صفت هم داشته باشن. همونطور که از اسمش پیداست صفت ها در واقع ویژگی هایی هستن که روی محتوای تگ تاثیر میگذارن. یک مثال ساده میزنم. تگ a یک لینک در صفحه ایجاد می کنه. اما این که اون لینک قراره مارو به چه آدرسی ببره توسط یک صفت به اسم href مشخص میشه که این صفت مخصوص تگ a هست.
بعضی از صفت ها مخصوص یک تگ خاص هستن و بعضی دیگه به طور عمومی میتونن برای خیلی از تگ ها استفاده بشن که به اونها صفات عمومی یا general attribute گفته میشه.
حتما براتون سوال شده که صفت ها کجا و چطوری نوشته میشن. هر صفت یک اسم داره و یک مقدار هم دریافت می کنه. برای مثل همین صفت href .در واقع اسم این صفت href هست و مقداری که دریافت می کنه همون لینکی هست که هدف تگ a بوده. خب حالا دقت کنید که صفت ها داخل تگ باز نوشته میشن . نحوه نوشتن اونها به این ترتیب هست. اول اسم صفت نوشته میشه بعد یک علامت مساوی گذاشته میشه و بعد از علامت مساوی داخل دبل کوتیشن مقدار مربوط به اون نوشته میشه. تصویر پایین رو نگاه کنید
<a href="https://wikiteach.ir">ورود به سایت</a>
توی مثال بالا می‌بینیم که اول تگ باز a اومده و داخل اون صفت href با مقداری که برابر با آدرس سایت ویکی تیچ هست قرار گرفته. بعد محتوای داخل تگ که “ورود به سایت” هست اومده و بعد از اون تگ بسته a رو می‌تونیم ببینیم. نتیجه نهایی برای همچین دستوری توی زبان نشانه گذاری html به این شکل خواهد بود ===> ورود به سایت
بعد از این که با مفهوم صفت‌ها (attribute) آشنا شدید، وقتشه که در مورد دسته دوم تگ‌های زبان نشانه گذاری html صحبت کنیم. این دسته از تگ‌ها فقط دارای یک تگ باز هستند و اگر شامل محتوایی باشن، یا توی ساختار اونها مشخص خواهد شد و یا بواسطه attribute هایی که دریافت می‌کنند تعریف میشن. ساده ترین مثال برای این دسته از تگ‌ها تگ br هست. این تگ زمانی که مورد استفاده قرار می‌گیره به خط بعد میره و ادامه محتوا رو از سر خط ادامه می‌ده. هر جای صفحه که از تگ br استفاده کنیم، مثل این می‌مونه که از دکمه اینتر توی کیبورد استفاده کرده باشیم. به مثال زیر توجه کنید
<p>hello world! <br>i am amir taher</p>
خروجی دستور بالا به این شکل خواهد بود :
hello world!
i am amir taher
همونطور که دقت کردید ، تگ br نه نیاز داره تا یک بار باز و یک بار بسته بشه و همچنین نه صفتی رو دریافت کرده و نه شامل محتوایی میشه. صرفا وقتی از این نشانه استفاده می‌کینم، به خط بعدی می‌ریم. البته لازم میدونم این نکته رو بگم که تگ br میتونه در صورت لزوم صفات عمومی توی زبان نشانه گذاری html رو دریافت کنه.
از بین سایر تگ‌های نوع دوم html می‌توینم به تگ hr و تگ img اشاره کنیم. این تگ‌ها هم فقط دارای تگ باز هستند و در صورتی که بخوان شامل محتوایی بشن ، از طریق صفات ( attribute) این کار انجام میشه. به عنوان مثال تگ img برای اینه که توی صفحه سایتمون از عکس‌ها و تصاویر استفاده کنیم. اما این تگ یک صفت داره به اسم src که آدرس عکس رو دریافت میکنه تا اون رو نمایش بده. به مثال پایین دقت کنید :
خُب دوستان اگر تا اینجا همراه من بودید و مطالب گفته شده در بالا رو کاملا درک کردید ( که انصافا ساده هم هستند ) ، باید بهتون تبریک بگم شما الان می‌تونید با زبان نشانه گذاری html دستورات مورد نظر خودتون رو بنویسید. به همین راحتی !!! فقط لازمه که با تگ‌های html بیشتر آشنا بشین. در قسمت پایانی این آموزش تگ‌های مهم html رو به ترتیب اولویت ( از نظر خودم البته ) براتون می‌نویسم.
امیدوارم که از محتوای این آموزش لذت برده باشید تا آموزش بعدی شما رو به خدای بزرگ می‌سپارم .
پی‌نوشت : دوستان عزیز شاید تمام مسیر آموزش طراحی سایت به همین سادگی نباشه، اما بهتون قول می‌دم که اگه زمان بگذارید و تلاش کنید خیلی هم پیچیده نخواهد بود. کافیه بخواید و انرژی لازم رو برای فراگیری مطالب صرف کنید. اونوقت همه‌ی مطالب این حوزه به همین اندازه ساده به نظر می‌رسن.