آموزش شماره 2 وب(Html چیست؟)
رایان آموز | سه شنبه, ۱۴ آذر ۱۳۹۱، ۱۰:۲۸ ب.ظ
در پست قبلی اشاره ای به تاریخچه ی وب داشتیم.
در این پست به طور کامل تر و رساتری به شروع مباحث وب خواهیم کرد.
نویسنده:
سید حسین نسابه
Html چیست؟
Html مخفف کلمات Hyper Text Markup Language است به معنی زبان نشانه گذاری فوق متن.
برخی این زبان را زبان برنامه نویسی نمی خوانند ، ممکن است به این علت باشد که شما در این زبان فقط میتوانید متن و عکس و محل آن ها و .... را مشخص کنید و اگر مثلا در اینترنت در یک سایت ثبت نام میکنید این کار Html نیست و زبان های مکمل وب این کار را انجام می دهند.
Html یک متن گاه دراز است که وقتی مرورگر شما آن را میخواند آن را به یک صفحه ی گرافیکی تبدیل میکند.
مثلا همین صفحه که شما در حال خواندن آن هستید یک متن است که به یک صفحه گرافیکی تبدیل شده است.برای دیدن متن اصلی که به این صفحه تبدیل شده است
اگر از مرورگر Internet Explorer استفاده می کنید برروی همین صفحه راست کلیک کنید و از منوی باز شده view source یا گزینه مشابه آن را انتخاب کنید
اگر از مرورگر Firefox یا Chrome استفاده می کنید برروی همین صفحه کلیک راست کنید و از منوی باز شده page source یا گزینه مشابه آن را انتخاب کنید.
بعد از این کار میبینید متنی بسیار دراز رو به رویتان ظاهر شده است!
نترسید ... برنامه نویسی وب به این درازی و سختی نسیت و با تمرینات مداوم آسان میگردد ... با دقت نگاه کنید .... در این صفحه بعضی از کلمات رنگ متمایزی دارند ..... یعنی اینکه این کلمات یا واژه ها کلمات کلیدی هستند و باعث بوجود آمدن صفحه میشوند.
به کلمات کلیدی که ساختار صفحه را می سازد تگ گفته میشود.
تگ معمولا یک واژه است که از قرار گیری یک کلمه بین <> ساخته میشود برای مثال تگ شروع کننده صفحه که به مرورگر می فهماند این یک صفحه html است بدین صورت است:
<Html>
یادتان باشد هر تگ Html یک پایان دارد و باید تگ بالا را بدین صورت نوشت:
<Html>
....اجزای صفحه......
<Html/>
در واقع شروع این تگ <Html> و پایان آن <Html/> است
در مورد تگ های دیگر نیز این مورد صدق میکند.
حالا بیایید ساختمان یک صفحه وب را مورد بررسی قرار دهیم.ابتدا به این ساختار نگاهی بیندازید:
<Html>
<Head>
<title>
</title>
</Head>
<Body>
</Body>
</Html>
به مفهوم تگ ها می پردازیم:
<Html> : شروع صفحه
<Head>:بعدا توضیح داده خواهد شد.
<title>:جای آن در تگ Head است و کار آن انتخاب یک موضوع برای صفحه جاری است.مثلا موضوع وبلاگ ما "رایانه و فناوری های الکترونیکی"است که در تب بالای صفحه مشخص است.
مثال:
<title>وبلاگ رایانه و فناوری های الکترونیکی<title/>
<Body>:درواقع هر چیزی که قرار است در صفحه به بازدیدکننده صفحه نماش داده شود اعم از متن و عکس و لینک و ...... در این تگ قرار می گیرد.
حالا برای اینکه مظورم را بهتر فهمیده باشید کار های زیر را انجام دهید:
متن زیر را در برنامه NotePad ویندوز کپی کنید:
...................................................
متن:
<Html><Head><title>خوش آمدید!</title></Head><Body>به وبسایت ما خوش آمدید</Body></Html>
...................................
توجه : دقت کنید که وقتی متن را در NotePad کپی کردید اسلش های پایان تگ مانند <Html/> در سمت چپ آن ها قرار داشته باشد مثلا </Body> غلط است و درست آن <Body/> می باشد
حالا این متن را با پسوند .html (در قسمت file name اینگونه وارد کنید:page.html)
در دسکتاپ خود ذخیره کنید
(1) ما در تصویر خاصیت Encoding را برابر utf-8 قرار دادیم . زیرا این خاصیت باعث ذخیره درست متن فارسی می شود.مثلا اگر ما خاصیت Encoding ره برابر ANSI قرار می دادیم متن فارسی در Notepad اینگونه ذخیره می شد:
Èå æÈÓÇíÊ ãÇ ÎæÔ ÂãÏíÏ
یعنی برای پشتیبانی از زبان فارسی یا عربی می بایست ابتدا Encoding را برابر utf-8 یا unicode قرار دهیم.
صفحه ای که در دسکتاپ خود ذخیره کردید را اجرا کنید.
نتیجه پست امروز:
بهتون تبریک میگویم.شما اولین صفحه Html خود را ساختید و اجرا کردید.
حالا این نتیجه را با چیزی که نوشتید مقایسه کنید.می فهمیم
هرچیزی که در تگ <Body> نوشته شود در صحفه نشان داده می شود
(البته یک استثنا هم دارد که بعدا می گویم)
هرچیزی که در تگ <title> نوشته می شود به عنوان موضوع صفحه انتخاب می شود
این ساده ترین صفحه ای بود که ما ساختیم.درآینده صفحات پرمحتواتری خواهیم ساخت.
راستی درجلسات آینده ما دیگر از NotePad استفاده نمی کنیم.چون کار با آن خیلی سخت تر از نرم افزار های دیگر است.در جلسه آینده من نرم افزاری را به شما معرفی می کنم که کار ما را بسیار آسان تر و سریع تر می کند.
اگر جایی از آموزش لنگ بود یا نفهمیدید در قسمت نظرات حتما حتما حتما بیان کنید.
تا آموزش بعدی خدا نگهدار.
نویسنده:
سید حسین نسابه
