ساخت صفحه فرود
خدا، به نامش
سلام و درود، خب قراره یک صفحه فرود طراحی کنیم که خروجی کار بشه این:
حالا صفحه فرود چیه؟
به یک صفحه میگن که واسه معرفی هر چیزی میشه درستش کرد (آدم، جسم، خودرو، خوراکی و...) و افراد میان داخلش تا ببینن چی ب چیه و آشنا بشن باهاش.
واسه ساخت صفحه فرود چی لازم داریم؟
محتوایی که می خوایم ارائه کنیم (عکس و فیلم و رنگ ها و متن ها)
یک رایانه ساده به همراه یک مرورگر
زبان برنامه نویسی
خب حالا چه زبانی؟
زبانای برنامه نویسی خیلی زیادن و کارای خیلی شگفت انگیزی هم میشه باهاشون کرد اما الان فقط یکم با اچ تی ام ال و سی اس اس کار میکنیم که زبان برنامه نویسی محسوب نمیشن و ی جورایی فقط زبان ایما و اشاره و وصل کردن صفحه ها به هم هست. مثل پاورپوینت ساختن! برای یک صفحه فرود ساده همین کافیه. در ضمن اینا تقریبا پایه هستن و بقیه چیزایی که یاد بگیری میشه بهش اضافه کنی بعدا و تکمیل تر و حرفه ای تر پیش بری.
خب حالا اچ تی ام ال چیه؟
رایانه فعلا حرف مارو به فارسی نمی فهمه و باید بهش دستوراتی بدی که به زبون خودشه. پس ما با اچ تی ام ال بهش می گیم که چیکار کنه و چیو نمایش بده و چجوری نمایش بده.
خب پس سی اس اس چیه؟
سی اس اس باز یک سری دستورات دیگه هست که تکمیل کننده دستورات اچ تی ام ال میشه. برای مثال وقتی با اچ تی ام ال به رایانه میگی متن *سلام* رو نشون بده. خیلی ساده همین سلام رو نشونت میده و تمام. بعد با دستورات سی اس اس بهش میگی که *سلام* رو با قلم زیبا نشون بده و رنگشم زرد کن مثلا. پس اچ تی ام ال استخون بندی کلی صفحه رو میگه و سی اس اس پوسته و ظاهرشو میگه به رایانه.
حالا این دستوراتو چجوری بنویسیم؟
یک پرونده خالی باز می کنیم برای یادداشت.
نیاز به نرم افزار خاصی هم نیست همه سیستم عاملا دارن این قابلیتو که یک پرونده خالی با پسوند تی ایکس تی *txt* یا همون تکست ایجاد می کنن که میشه داخلش متن نوشت.
( نرم افزار های برنامه نویسی هم تنها کاری که میکنن روند نوشتن و دیدن این دستورات رو ساده سازی کردن و باعث کمتر شدن خطا،بیشتر شدن سرعت و راحت تر شدن توسعه یک برنامه نویسی شدن. )
خلاصه پرونده متنی جدید رو که ساختیم میزنیم روش تا باز بشه. یک صفحه خالی برای نوشتن میاد که هرچیزی میشه داخلش نوشت. همه چی فقط به صورت متن! حالا خیلی راحت اولین کاری که می کنیم می نویسیم سلام! و بعد هم ذخیره اش می کنیم. حالا اگر بخوایم این پرونده مثل یک اچ تی ام ال در مرورگر باز بشه باید اسمشو و پسوندشو تغییر بدیم از *فلان.txt* به *فلان.html* به همین راحتی الان اگر روش بزنیم تا باز بشه داخل مرورگر پیشفرض سیستم عامل یک صفحه سفید باز میشه که نوشته سلام! تبریک می گم تو برنامه نویس شدی!
ولی همونطور که میبینی سلام رو از چپ به راست نوشته و انگار پیشفرضش خارجیه! واسه همین بهش می گیم که از راست به چپ بنویس. دستورش میشه این:
توضیح بیشترش اینه که برای برچسب html یدونه ویژگی اضافه کردیم که اونم جهت هست dir مخفف direction به معنی جهت هست که در حالت پیشفرض خارجیا ltr یعنی left to right که میشه از چپ به راست می نویسن حالا ما وقتی می خوایم فارسی بنویسیم میشه راست به چپ right to left که مخففش میشه rtl به همین سادگی. بعد از این کار متن میره سمت راست.
خروجی میشه این:
حالا می خوایم بهش بگیم که پس زمینه صفحه سفید نباشه و زرد باشه. این دستور تو قالب حالت و شمایل یا استایل نوشته میشه:
توضیح: این یعنی داخل برچسب html یک برچسب دیگه ایجاد کردیم به اسم style و داخلش گفتیم که کل صفحه html مون پسزمینه اش رنگ #fc0 باشه. حالا به این نوع رمز رنگ ها می گن hex که رایانه بفهمه! تو اینکسکیپ هم بهت این رمزرنگ رو میده.
بعد از این که رنگو زدیم خروجی میشه این:
حالا نوبت اضافه کردن یک خط متن دگ هست و اینکه خوشامد بگیم!
توضیح: رایانه همه چیو پشت سر هم آبشاری یا تراکتوری می خونه و واسش مهم نیس چقدر فاصله بزاری یا بالا پایین بری واس همین برای این که بهش بگی این متن رو در خط بعدی نمایش بده از برچسب br که مخفف break به معنی شکستن هست استفاده می کنیم. اینجوری خط ها رو از هم مجزا نشون میده و پشت سر هم نمی نویسه اونارو.
بعد از این که خط رو اضافه کردیم و شکست رو هم ایجاد کردیم خروجی میشه این:
خب حالا می خوایم ضخامت خط اول رو بیشتر کنه و همه متن هارو هم وسط بچینه برای این کار دستور زیر رو میزنیم:
توضیح: برچسب h1 تا h6 به صورت پیشفرض برای عنوان تنظیم شدن و ضخیم هستن و به تریبت اندازه شون از بزرگ به کوچیک میرسه اما حتی h6 که کوچیکترینشونه هم ضخیم تر از نوشته ی معمولی هست.
حالا بعد از اضافه کردن وسط چین و قالب عنوان خروجی میشه این:
آخرین کاری که مونده انجام بدیم اینه که یک عکس اضافه کنیم به این صفحه و دستورش هم اینه:
توضیح: توی این دستور img مخففه image یعنی عکس هست و src مخففه source به معنی منبع هست پس مشخصه که میگه منبع عکسی که می خوای نمایش بدی کجاست؟
بهش یا نشونی دقیق باید بدیم یا حدودی.
اگر دقیق بخوای بگی باید عکسی که مد نظرت هست رو رونوشت (کپی) بزنی و یک راست اینجا پیوستش (پیست) کنی داخل src که نشونیش طولانی و عجیب میشه.
ولی راه راحت ترش اینه که عکس رو بزاری دقیقا تو همون پوشه ای که پرونده اچ تی ام ال رو داری و کنار هم باشن تا راحت فقط اسم عکس رو بزاری داخل src و بقیشو خودش می دونه.
من تو مثال بالا عکس رو گذاشتم دقیقا تو همون پوشه ای که اچ تی ام الم ذخیره شده و اسم عکس رو هم گذاشتم عکس.svg و آره پسوند های svg , jpg , gif و هرنوع عکس دیگه ای رو هم میشه گذاشت اینجا!
خب حالا خروجی همونی شد که می خواستیم برسیم برای این جلسه! مبارک باشه. صفحه اولی که طراحی کردی رو برام بفرست منم ببینم!
چنتا نکته پایانی: تمام برچسب هایی که با*< *شروع میشن و با* > *تموم میشن تاثیرشون میمونه تا این که دوباره تکرارشون کنی و با یک خط مورب* / *به برچسب پایان بدی مثل این:
نکته بعدی این که کوچیک بزرگ نوشتن حروف خیلی مهمه و همه این چیزایی که اینجا هست با حروف کوچیکه و اگر یدونش هم بزرگ باشه، دستور اجرا نمیشه! پس دقت کن همه چیو درست بنویسی.
نوشته شده توسط مصطفی در