آشنایی کلی با HTML CSS
توسط Mohsen シ در تاریخ ۰۶ بهمن ۱۳۹۸
اسپند دود کنین که قراره امروز طراح وب بشین! تو این قسمت از وبلاگ زدایان امروز قراره ببینیم مرورگر ها چطور وبسایتمون رو نمایش میدن و اصلا HTML CSS که میگن چی هستش؟! پس با ما همراه باشین :)
تا حالا با خودتون فکر کردین که :
مرورگر هایی مثل فایرفاکس و گوگل کروم چطور کار میکنن؟
تو قسمت اول وبلاگ زدایان یک مقداری توضیح مختصری در مورد هاست دادیم! فرض کنین میخواین به بلاگ بیان به نشانی blog.ir بیاین. تو این مدت چه اتفاقایی میوفته؟
1. شما یک درخواست برای سرور بیان (Server منظور کامپیوتری هست که وبسایت بیان رو میزبانی میکنه) میفرستین که داداش من میخوام وبسایتت رو ببینم میشه فایلت رو برام بفرستی؟
2. سرور بیان با خوشحالی میگه 200! یعنی درخواستت قبول شد، کوچیکتم هست بفرما اینم فایل من.
3. فایلی که مرورگر شما گرفته مثل دستور پخت آشپزی میمونه! توی دستور پخت دیدین اولش یک مواد اولیه و ادویه نوشتن؟ احسنت! توی این فایل هم یک سری دستور هست که میگه برو و از اینترنت فایل هایی که مربوط به ظاهر وبلاگ هست رو برام دانلود کن! (در عمل قراره اینو به وضوح تو دو یا سه قسمت بعد ببینین اینجا فقط یک توضیح مختصر میدیم!)
4. دستور هایی که تو فایل هستش معنی خاصی برای مرورگر داره مثلا مرورگر زمانی که این دستور خوشگل رو میبینه
میدونه که باید یک پاراگراف بسازه که توش نوشته باشه Salam! و بعدش بره یک خط جدید! مرورگر خط به خط این راهنما ها رو اجرا میکنه.مثلا تو خط اول نوشتیم یک عکس داریم که اولش لوگوی بلاگ هست (اینجا مرورگر باز یک درخواست میفرسته تا عکس رو دانلود میکنه) بعدش چند تا متن و بعدش توضیح اینکه بیان عجب سرویس خوبیه و ...
5. وقتی که این دستورات به پایان رسید یک چیز این شکلی دارین:
برای مشاهده بهتر عکس، روی عکس کلیک کنین.
عه... چرا اینطوریه؟ آهان تو مرحله سوم گفتیم دستورات مربوط به ظاهر رو دانلود کنه! پس مرورگرمون با اجرای اون دستورات درست مثل آرایشگر های حرفه ای شروع میکنه به درست کردن موقعیت و رنگ و کلا هر چی مربوط به ظاهر وبلاگ هست!
6. (اینو معمولا تو آخر انجام میدن) مرورگرتون هر چی مربوط به جاوا اسکریپت هم هست رو به پرونده اضافه میکنه. مثلا همین دکمه پسندیدم (که شاید ندیدین!) یک دستوری داره که اگر عضو بیان بودین و روی اون دکمه کلیک کردین یک دونه درخواست به سرور بیان بفرسته که لایک های این پست رو یک دونه اضافه کن. قسمت نظرات هم همینطور هستش.
7. مرورگر همه اینارو جمع و جور میکنه و کدی که در نهایت به زبان صفر و یک کامپیوتره اجرا میکنه تا تو صفحه نمایشتون، صفحه اول بلاگ بیان نشون داده بشه!
البت موارد بالا بستگی به مرورگرتون داره ممکنه یکی روش متفاوتی داشته باشه و درک درستش کار نسبتا سختیه ولی در کل روند کار اینطوریه! حداقل برای درک فعلی ما :) (اگر واقعا حرفه ای هستین و زبانتون هم قوی هست به این لینک سری بزنین.)
به این فایل ها چی میگن؟!
فایلی که سرور تو مرحله 2 برامون میفرسته HTML هستش. HTML بدنه و اسکلت وبه یعنی اگر نباشه یعنی هیچی وجود خارجی نداره! تو این فایل همانطور که گفتیم چیز های واقعا مهم و خام وجود داره.اینکه اصلا تو وبلاگ شما یا صفحه اول بیان چیا هستش!
فایل هایی که مربوط به ظاهر وبلاگ هستش و تو مرحله 3 دیدیم، CSS هستن (آشنا نیست؟ تو پنل مدیریت... زیر گزینه قالب... ویرایش CSS قالب فعلی...) اینا تعیین میکنن که ظاهر وبلاگتون چطوری باشه. عکساتون گرد باشن، متناتون قرمز باشن و یا اصلا چه فونتی داشته باشن و کجا باشن. بدون این فایل وبلاگ شما فقط لینک و نوشته و چند تا عکسه! همین.
فایلی که تو قسمت 6 دیدیم جاوا اسکریپته! این زبان برنامه نویسی هست. یعنی میتونین باهاش هم اچ تی ام ال رو تغییر بدین (پاراگراف اضافه کنین و عکس بزارین و غیره) و هم میتونین سی اس اس رو تغییر بدین (رنگ متن رو تغییر بدین، عکسی رو سیاه سفید کنین و غیره) و کلی کار های جالب دیگه. قبلنا زیاد دست کم میگرفتمش ولی زبان خوبیه! برای افراد مبتدی زیاد پیشنهاد نمیدم چون بعدنا پیچیدگی های خاصی پیدا میکنه ولی یادگیریش جالبه! حتی میتونین بازی هم بسازین :)
مجموع این سه تا به همراه کمی دانش و مهارت در مورد عکس ها میشه طراحی وب! البته اینا پایان کار نیستن ولی حداقلش اینا رو باید بلد باشین!
چرا اینا رو جدا جدا کردن؟ مثلا یک فایل برای CSS و یک فایل HTML. نمیشد همشون رو تو یک فایل نوشت؟
میشه! ولی تو دنیای کامپیوتر معمولا سعی میشه همه چیز مرتب و تا حد امکان کوتاه باشه! فرض کنین یک صفحه خیلی بزرگ دارین اگر این استایل (همون ویژگی های ظاهری مربوط به هر قسمت) رو تو فایل اصلی بنویسیم شاید در پایان فایلمون بیش از دو هزار خط داشته باشه! ویرایش چنین فایلی واقعا کابوس بزرگی میشه علی الخصوص الان که CSS دنیایی برای خودش شده! پس طبق قرارداد بهتره HTML و CSS رو جداگانه بنویسیم. تو قسمت های بعدی در مورد این هم حرف میزنیم!
گفتی مرورگر ها این کد هایی که نوشتیم رو میدونن. کی تعیین میکنه که فلان کد چه کاری باید انجام بده؟
یک ائتلافی هست به اسم "w3 consortium" که اینا تعیین میکنن هر کد چیکار باید انجام بده. در حقیقت استاندارد کد نویسی HTML و CSS به دست این آقایون و خانما هستش. برای اطلاعات بیشتر میتونین به این لینک مراجعه کنین.
تا اینجا چیا یاد گرفتیم؟
میدونیم که HTML,CSS,JavaScript چیا هستن و چه وظیفه ای دارن.
میدونیم مرورگر ها چطور صفحه ما رو پردازش میکنن و نمایش میدن.
میدونیم چرا باید فایل هامون رو جدا جدا بنویسیم.
و میدونیم کی این استاندارد های طراحی وب رو تعیین و پایه گذاری میکنه.
تو قسمت بعدی چی یاد میگیریم؟
HTML اصلا به چه معنیه؟ این اصلا چه اسمیه گذاشتن روش!
چطور میتونیم اولین سند HTML مون رو بسازیم؟
مهم ترین دستورات و تگ های HTML چیا هستن؟
و منابع یادگیری HTML چیا هستش؟
اینم از این قسمتمون :) امیدوارم براتون مفید واقع بوده باشه! اگر باز چیزی درک نکردین زیاد نگران نباشین... تو زمان کد نویسی همه اینا مفهوم میشه! در هر حال، خوش باشین و سلامت و تا آموزش بعدی خدا نگهدار همگی...
اگر قبلا در بیان ثبت نام کرده اید لطفا ابتدا وارد شوید، در غیر این صورت می توانید ثبت نام کنید.
سلام
تشکر آقا محسن :)
چون می فهمم برای این مطلب وقت گذاشتی، حداقل کاری که می تونم کنم ارسال دیدگاه تشکرآمیز هست.
فکر کنم مخاطبین بیان یکم خستن :|
ممنون خوبم عزیز
چی بگم، بیانی ها همه گلن یکی از یکی گل تر :)
آره منم گلم، ولی گل خَرزَهره :)
نه اونقدرها هم سحرخیز نیستم، کلا فاز من مشخص نیست و هرروز یه جوره! از قضا امروز فاز سحرخیزی بود. ولی انصافا آروزوی قلبیم هست که همیشه سحرخیز باشم.
هر چی من می گم یه نقطه امید از توش در میاری، امیدوارم تو زندگیت و برای خودت هم همینطور باشی عزیز :)
عزیز دلی :)
نه با موبایل اومدم وبلاگت، کار اصلیم که توی انبار هست ولی علاقه عجیبی به کامپیوتر دارم.
خب خیلی وقتت گرفتم امیدوارم موفق باشی و سحرخیز :)
سلام خوبیییین ؟
خیلی ممنون :) شما خوب هستین؟
عالی بود
بعضیاش رو بلد بودم ولی خیلیاش جدید بود
خواهش میکنم. ممنونم