چرتک بلاگ

خوب :) تو قسمت قبلی گفتیم که HTML ستون و اساس دنیای وب (و البته قالب وبلاگتون) هست. امروز قراره با این زبان بیشتر آشنا بشیم و تگ های پر استفاده اون رو یاد بگیریم. به علاوه یک سری مرجع هم برای یادگیری این زبان بهتون معرفی میکنم. پس با ما همراه باشین!

چرا HTML؟

HTML مخفف HyperText Markup Language هستش. اینکه هر کدوم از این کلمات چه مفهوم و سرگذشتی دارن به ما مربوط نیست... گذشته از اینکه خودمم چندان اطلاعاتی ندارم! ولی برای اطلاعات اضافی زبان هایی که از تگ ها (همین علامت های <>) به جای سینتکس استفاده میکنن Markup Language میگیم. هایپرتکست هم همین متنی که جلوتون هست و با لینک به هم مرتبط شدن. فقط اینو بگم که دونستن این چیزا اصلا نیاز نیست! زیاد خودتون رو سرگرم اینکه فلان زبان رو کی ساخته و چطوری ساخته نکنین. دونستنشون خوبه... ولی به شرط اینکه خود زبان رو یاد بگیرین!

قانون ها و عناصر HTML

توی HTML هر چیزی یک تگ خودش رو داره! و هر تگی که باز میشه باید با تگ دوقلوش بسته بشه. نفهمیدین؟ مثال بعدی رو ببینین!

<p>Salam Zendegi</p>

در مثال بالا ما یک پاراگراف داریم که مقدارش سلام زندگی هست. یعنی باید سلام زندگی رو نمایش بده و بره خط بعدی. همون طور که میبینین بین دو تگ p محصور شده. درست مثل برج های یک قلعه! یک مثال دیگه:

<a href="http://blog.ir">Blog</a>

تگ a مربوط به لینک هستش. یعنی میتونین دقیقا Blog رو بسازین. تو این مثال ما گفتیم میخوایم یک لینک بسازیم که به http://blog.ir بره. در حقیقت href یک ویژگی یا مشخصه تگ a هست که میگه این لینک باید به کجا بره. (برای کنجکاوتر ها منظور از href همون hypertext refrence هست یعنی همون مرجع لینک). هر چیزی هم که بین دو تگ a باشه لینک دار میشه یعنی با کلیک روی اون به همون آدرس معرفی شده میرین چه متن باشه چه عکس که در این مثال متن خالی Blog هستش. بزارین مثال بالا رو کامل تر کنیم!

<a href="http://blog.ir" target="_blank"> Blog in new page </a>

تو مثال بالا از دو مشخصه استفاده کردیم. اولیش رو که قبلا دیدیم همون آدرس لینک رو نشون میده. دومین مشخه که target هست میگه این لینکی که میخوای چطوری باز بشه؟ تو تب جدید یا این صفحه؟ اگر میخواین وقتی لینک رو کلیک میکنین در تب جدید باز بشه باید مقدار این مشخصه رو _balnk بزارین. عبارت Blog in new page هم به عنوان متن لینک نمایش داده میشه.پس دیدم برای اینکه تگی بیشتر از دو مشخصه داشته باشه کافیه وسطشون فقط یک فاصله باشه.

تگ خلافکار!

بعضی تگ ها هستن که نیازی به تگ دوقلوشون ندارن! مثل تگ عکس خودمون (که برای درج عکس استفاده میشه). فرض کنین ما یک عکسی رو تو جایی آپلود کردیم و لینکش هم X هست. (یعنی اگر x رو تو مرورگر بزنیم یا عکس رو دانلود میکنه یا نمایش میده. میدونم توضیحات اضافی هستش ولی خب وسواسه دیگه!) اینطوری میتونین عکستون رو تو صفحه وبتون قرار بدین:

<img src="X" />

بعله همین... لازم نیست یک تگ img بسته هم بزارین. البته استانداردش این هست که این علامت اسلش / رو بزارین ولی اگر نزارین هم ایرادی نمیکنه! (برای آدمای کنجکاو هم باید بگم src همون source به معنی منبع هستش)

چندی توضیح دیگر

نباید تگی تگ دیگه رو قطع کنه! مثلا فرض کنین میخوایم وسط یک پاراگراف یک لینک بزاریم:

<p> this is <a href="http://google.com"></p> Google </a>

اصلا از کد بالا معلومه یک چیزیش مشکل داره! برج های نگهبانی که یادتون هست؟ تگ ها هم باید اینطوری باشن یعنی تو مثال بالا تگ a یک زیر مجموعه ای از تگ p هست و باید بین دو تگ p باشه. خلاصه این کد بالا نه درسته نه قشنگ، وزنش هم به هم خورده و متقارن نیست! کد درستش کد زیر هست:

<p> this is <a href="http://google.com">Google</a> </p>

حتما لازم نیست نوشته ها رو با حروف کوچیک بنویسین. میتونین از حروف بزرگ هم استفاده کنین ولی استفاده از حروف بزرگ توصیه نمیشه. (همون کنسرسیوم w3 که تو قسمت قبلی در موردش گفتیم، اینو میگه)

میتونین در چند خط کدتون رو بنویسین و کدتون بدون مشکل نمایش داده میشه! یعنی میتونین به جای اینکار:

<p>Salam Zendegi</p>

اینکارو انجام بدین:

<p>
Salam Zendegi
</p>

و در بسیاری موارد خوانایی کد رو بالا میبره! اصلا باید برخی تگ ها رو که بعدا معرفی میکنم رو اینطوری بنویسین!

تگ های قالب بندی

این تگ ها مختص متنتون هستن یعنی با این تگ ها میتونین متنتون رو ضخیم کج آندرلاین دار قلم خورده _{متن زیرنویس} ^{متن بالانویس} یا کدنویس کنین. اگر یک نگاهی به ویرایشگرتون بندازین اینا همشون هستن! من خودم زیاد از اینا استفاده نکردم بخاطر همین بعضیاشون یادم رفته! ولی خب اگر میخواین بدون تقلب و استفاده از ویرایشگر متن های چنینی بنویسین این هم کد هاشون:

<b>ضخیم</b>
<strong>ضخیم و مهم</strong>
<em>کج</em>
<u>آندرلاین دار</u>
<s>قلم خورده</s>
<sub>متن زیرنویس</sub>
<sup>متن بالانویس </sup>
<code>کدنویس</code>

تگ های h

دیدین صفحات ویکی پدیا چطوریه؟ مثلا موضوع مقاله از همه درشت تر هست و زیر موضوعات اون کمی کوچیکتر و باز هم زیر موضوعات زیر موضوعات اونا کمی کوچکتر... (قاطی نکنیم صلوات!) خلاصه اینا همون تگ h هستن که تو فارسی فکر کنم سرنویس بهشون میگن. شاید خیلی ها دست کم بگیرن این تگ رو ولی تو مبحث بهینه سازی برای گوگل اینا واقعا ارزش دارن! کد:

<h1>سرنویس 1</h1>
<h2>سرنویس 2</h2>
...
<h5>سرنویس 5</h5>
<h6>سرنویس 6</h6>

تگ خط جدید و خط افقی

اگر پشت سر هم چند لینک بسازین متوجه میشین به هم میچسبن. با استفاده از تگ <br> میتونین به خط جدید برین. تگ <hr> هم برای کشیدن یک خط افقی هستش. اینا هم مثل تگ عکس نیازی به دوقلو ندارن!

دیو وب!

شاید پرکاربردترین و در عین حال تهی ترین تگ همون تگ div هستش! اصلا چرا از من میشنوین برین به ویرایش ساختار قالب تا ببینین این تگ چه غوغایی راه انداخته. شاید بگین "واو مگه این تگ چیکار میکنه؟!" باید در جواب بگم هیچ کاری :)) این تگ یک جورایی مثل قفسه بندی میمونه. مثلا هدر تمام قسمت بالایی رو بگیره و بعدش مطالب در سمت راست باشن و توضیحات وبلاگ و ابزار در سمت جپ و در پایان هم فوتر باشه. همه اینا با تگ بی خاصیت div انجام میشه! یک تگ مشابه این هم وجود داره به اسم span. توضیحاتشون تو این آموزش نمیگنجه و به علاوه باید CSS رو بلد باشین. پس معرفی تخصصی اینا هم میمونه برای بعد! هر زمان دلتون گرفت و احساس کردین خیلی بی خاصیت هستین به یاد این تگ بیوفتین و ببینین که چقدر این تگ استفاده داره :)

<div>not yet but soon... </div>

تگ های زیادی هستن که با بعضیاشون تو پست های بعدی آشنا میشین.

یک سند html کامل

خوب تا اینجا تا حدی پایه html رو دونستیم. الان میخوایم یک سند کامل بسازیم. به کد زیر توجه کنین

<!DOCTYPE html>
<html>
<head>
    <title>عنوان</title>
</head>
<body>
    <p>این یک تگ پاراگراف است! </p>
</body>
</html> 

خوب تو خط اول ما نوع سندمون رو مشخص میکنیم که مرورگر بفهمه این سند HTML هستش. نباشه هم اجرا میشه ولی بودنش مهمه!

تو خط دوم تگ html رو داریم که دو تا تگ body و head داره. این تگ هم که باید باشه (چراش رو از من نپرسید!)

تگ head: این تگ مثل ذهن وب میمونه. ما نمیدونم تو ذهن کسی چی میگذره... هر چیزی هم که بین این دو جفت تگ قرار بگیره تو صفحه دیده نمیشه! تو بین این تگ معمولا چیز هایی برای بهینه سازی موتور جست و جو مثل گوگل، کد برای نمایش صحیح و بهتر در مرورگر، لینک به فایل css و یا آیکون عکس و عنوان صفحه نمایش داده میشه. منظور از عنوان صفحه همون چیزی هست که تو تب مرورگر هستش. این هم خودش دنیایی داره و بعدا باز بهش برمیگردیم :)

تگ body: بدنه صفحه اینجاست! میتونین هر تگی که از بالا یاد گرفتین رو اینجا بین این دو تگ قرار بدین.

صبر کن داداش! اینارو چطور امتحان کنیم عاخه؟!

آخ آخ راست گفتین... چرا الان یادم افتاد!

روش اول: نت پد

خب کافیه نت پد رو باز کنین و کد بالا رو توش کپی پیست کنین.

بعد cntrl + s رو بزنین تا صفحه ذخیره فایل براتون بیاد.

حالا طبق عکس زیر میتونین فایلی که ذخیره میکنین رو با پسوند html یا htm ذخیره کنین. (به Encoding خیلی توجه کنین)

خوب حالا اگر این فایل که ذخیره کردین رو با مرورگر باز کنین نتیجه کار و اگر با نت پد باز کنین خود HTML رو میبینین! البته میتونین از نرم افزار های خیلی بهتری مانند نوت پد پلاس پلاس، سابلایم، اتم یا ویژوال استودیو کد استفاده کنین.

روش دوم: سایت های آنلاین

بعضی از سایت ها مثل سایت w3schools و یا codepen.io به صورت رایگان این امکان رو در اختیارتون قرار میدن. حتی میتونین در این سایت ها نام نویسی کنین و کد هاتون رو ذخیره کنین (دومی خیلی معروفه تو این زمینه!)

روش سوم: همینجا!

بعله... چه جایی بهتر از بلاگ بیان؟! میتونین وقتی پستی مینویسین دکمه منبع <> روی ویرایشگر رو بزنین و کدتون رو وارد کنین! حتی تو ویرایشگر ckeditor فعلی بلاگ بیان میتونین کدتون رو همینطوری به صورت متن بنویسین بعدش انتخاب کنین و دکمه <> که تو ردیف اول کنار گنجاندن خط افقی هستش رو بزنین تا ویرایشگر متنتون رو وارد کد کنه و نتیجه رو نمایش بده. بخاطر همین پست تغییر ویرایشگر بیان  رو قبل از این پست ها منتشر کردم چون ویرایشگر تمام این کار ها رو انجام میده و میتونین در حین ویرایش پستتون html رو هم یاد بگیرین.البته یادتون باشه وقتی دارین از ویرایشگرتون استفاده میکنین لازم نیست تگ های html,body,header رو بنویسین چون شما دارین این کد ها رو در پستتون مینویسین و این تگ ها در قالب وبلاگ موجود هستش!

بهترین مرجع های یادگیری HTML

مگه داریم تبلیغ میکنیم؟ اصلا پولی هم به ما میدن مگه؟ والا...

بهترین دوستی که میتونه همدمتون تو سختی ها باشه گوگل هستش. میتونین گوگل کنید "آموزش HTML" تا هزاران مرجع یادگیری براش پیدا کنین. ولی خب خودم بیشتر از هر منبعی از w3 schools یاد گرفتم. آموزش های فارسی هم زیاد هست هم تو فرانش هم تو فرادرس هم تو تاپ لرن و زومیت و ... دمشون هم واقعا گرم! خلاصه اینکه اگر علاقه دارین به این پست بسنده نکنین. قل سیروا فی الارض...

سخن پایانی

html و css داداش آبجی هستن. نمیتونین فقط یکیش رو یاد بگیرین و اون یکی رو ول کنین. باید هر دو رو با هم استفاده کنین! بخاطر همین تو قسمت بعدی وبلاگ زدایان قراره با اسطوره آرایش و زیبایی یعنی CSS آشنا بشیم. حرفی دیگه ای نیست. تا دیدار بعدی خدا نگه دار همگی!