https://virgool.io/feed/@ARiyou2000 fa 2026-06-16 09:00:38 https://files.virgool.io/upload/users/91149/avatar/YVFr6p.png?height=120&width=120 https://virgool.io/@ARiyou2000 https://virgool.io/@ARiyou2000/15-fonts-in-css-gxsrxlof4kou به نام ایزد دانادر این پست آموزشی در مورد فونت و وابسته ها صحبت خواهیم کرد.امیدوارم این مطلب براتون مفید باشه و یادتون نره برای ما نظرات و انتقاداتتون رو ارسال کنید.اگر سوال یا هر حرفی دارید میتونید به ایمیل من به آدرس ARiyou.public@gmail.com و یا در شبکه های اجتماعی با شناسه (ID | User name) زیر منو پیدا کنیدTelegram, Twitter, Facebook & ... By : @ARiyou2000<br/>با تشکر از همه شما دوستان، آریو جهاندیگه بریم سر اصل مطلباستایل فونت cssخانواده ی فونت ( font family )مجموعه فونت هایی که نمایانگر اشکال مختلف یک نوع typeface یا طرح حروف هستند(، پررنگی ) boldness ، اندازه و همچنین سبک یک نوشته یا متن را تعریف می کنند .خانوادهای فونت ( font family ) در CSSدر CSS ، دو گروه اسم خانواده ی فونت وجود دارند ( generic family ) خانواده ی عمومی (گروهی از فونت ها که ظاهری مشابه دارند ) از میان آن ها میتوان به “Serif” و “Monospace” اشاره کرد.(font family ) خانواده ی فونت ( یک نوع خانواده ی فونت ویژه ) از جمله “Times New Roman” و”Arial”.نکته توجه داشته باشید که خواندن فونت های sans-serif در مقایسه با فونت های serif روی صفحه نمایشرایانه به مراتب آسان تر است .خانواده ی فونت ( font family )ویژگی های خانواده ی فونت با خاصیت font-family تعیین می گردند .خصوصیت font-family طبیعتا باید دربردارنده ی اسم فونت های متعددی باشد که به عنوان یک نوع سیستم پشتیبانی یا یدکی عمل کند . در صورتی که مرورگر مورد نظر از نوع حروف (فونت) اولی پشتیبانی نکرد، در آنصورت فونت دوم را امتحان خوهد کرد .کافی است با فونت دلخواه کار خود را آغاز کرده، سپس آن را با generic family به اتمام برسانید . با این کارشما به مرورگر اجازه می دهید در صورت عدم وجود فونت های دیگر، فونتی مشابه را از generic familyانتخاب کند .نکته چنانچه اسم یک خانواده ی فونت( font family ( متشکل از چندین حروف )بیش از یک حرف) باشد، درآن صورت باید اسم فونت مزبور را داخل کاراکتر یا علامت نقل و قول دوتایی (double quotation ) قراردهید، مثال “Times New Roman” .در مثالی که در ذیر ارائه شده، بیش از یک font family در لیست با استفاده از ویرگول از هم جدا شده اند.p { font-family: &quotTimes New Roman&quot ، &quotTimes ، serif&quot }Try it Yourself »سبک فونت ها( Font style )سبک فونت یا Font style یا همان سبک فونت عمدتا به منظور مشخص کردن متن ها و نوشته های خوابیده و حروف کج بکارمی روند .خصوصیت نام برده سه مقدار متفاوت داردسبک normal – که در آن متن به صورت عادی نمایش داده می شود.سبک Italic – که متن به صورت خوابیده نشان داده می شوند .سبک Oblique – که در آن نوشته یا حروف درست مشابه italic متمایل شده یا کج می شوند (بیشتر به منظورشبیه سازی حالت italic یا حروف خوابیده بکار می رود اما کمتر پشتیبانی می شود - به مثال توجه کنید)p.normal {   font-style: normal; } p.italic {   font-style: italic; } p.oblique {   font-style: oblique; }Try it Yourself »اندازه ی فونت ( Font Size )همان طور که از اسم آن پیدا است این خصیصه اندازه ی فونت را تعریف می کند .قابلیت و توانایی مدیریت اندازه ی نوشته ها و متن ها در طراحی وب از اهمیت بسیار بالایی برخوردار است . بااین وجود شما به هیچ وجه نباید با بهره گیری از قابلیت تنظیم اندازه ی فونت کاری کنید که پاراگراف ها ظاهری شبیه به تیتر (heading)، و یا تیتر ظاهری مشابه پاراگراف ها پیدا کنند .همیشه سعی کنید از تگ های مناسب HTML استفاده کنید( آموزش HTML فراموش نکنید)، به عنوان مثال از <h1> – <h6> ویژه ی تیترها واز <p> برای پاراگراف ها بهره بگیرید .مقدار font-size ممکن است یک مقدار مطلق (absolute) و حتی نسبی (relative) باشد .اندازه ی مطلقنوشته را به یک اندازه ی تعریف شده تنظیم می کند.به کاربر اجازه ی تغییر اندازه ی متن را در همه ی مرورگرهای موجود نمی دهد (بنا به دلایل دسترسی نامناسب است)اندازه ی مطلق زمانی کاملاً کارامد تلقی می گردد که اندازه ی خروجی از پیش برای شما تعریف شده ومشخص باشد.توجه : در صورتی که اندازه ی فونت را مشخص نکنید، اندازه ی پیش فرض برای نوشته های معمولی مانندپاراگراف ها که 16px 16px=1em است مورد استفاده قرار می گیرد .تنظیم و انتخاب اندازه بر حسب پیکسل (با پیکسل)تنظیم اندازه ی متن بر حسب پیکسل به شما امکان می دهد اندازه ی نوشته را با اختیار کامل مدیریت کنیدh1 {   font-size: 40px; } h2 {   font-size: 30px; } p {   font-size: 14px; }Try it Yourself »نکته در صورت استفاده از پیکسل، می توان با بهره گیری از ابزار بزرگنمایی ( zoom tools) کل یک صفحه ی وب را مجددا اندازه بندی کرد (به طور دلخواه اندازه ی آن تغییر داد)تنظیم اندازه ی فونت با Emبرای اجازه دادن به کاربرها جهت اندازه بندی مجدد متن (قابل دسترسی از طریق فهرست گزینش مرورگرمربوطه)، بسیاری از طراحان وب به جای استفاده از پیکسل، واحد em را بکار می برند .W3C بهره گیری از واحد اندازه بندی فوق را به طراحان وب توصیه می کند .مقدار 1em در واقع معادل با اندازه ی فعلی فونت می باشد . اندازه ی پیش فرض نوشته در مرورگرهای کنونی برابراست با 16px . بنابراین، اندازه ی پیش فرض 1em به عبارتی همان 16px است .با بهره گیری از فرمول ذیل می توان واحد پیکسل را به em محاسبه و تبدیل کردh1 {   font-size: 2.5em; /* 40px/16=2.5em */ } h2 {   font-size: 1.875em; /* 30px/16=1.875em */ } p {   font-size: 0.875em; /* 14px/16=0.875em */ }Try it Yourself »در مثالی که در بالا مشاهده می کنید، اندازه ی نوشته بر حسب em در حقیقت برابر است با مثال پیشین که برحسب پیکسل اندازه بندی شده بود . با این وجود، با استفاده از اندازه ی em ، قابلیت تنظیم اندازه ی نوشته در تمامی مرورگرها وجود دارد .متاسفانه، در ویرایش های قدیمی تر IE باز به مشکل برمی خوریم . هنگامی که سعی می کنیم اندازه ی متن رانسبت به قبل بزرگتر کنیم، متن بیش از حد دلخواه بزرگنمایی می شود و زمانی هم که سعی بر کوچک تر کردن نوشته می کنیم باز با همین چالش روبه رو می شویم .بکاربردن ترکیبی از Percent و Emراه حلی که در کلیه ی مرورگرها کارگر و موثر واقع می شود، این است که font-size پیش فرض را در قسمت یا عنصر بدنه <body> برحسب درصد تنظیم کنیم .body { font-size: 100%; } h1 { font-size: 2.5em; } h2 { font-size: 1.875em; } p { font-size: 0.875em; }اکنون کد ما به خوبی عمل کرده و نتیجه ی دلخواه را بدست می آید . به عبارتی دیگر همان اندازه ی متن را درتمامی مروگرها پیاده کرده و بدین وسیله به همه ی مرورگرها اجازه می دهد نوشته را مطابق نیاز بزرگ یا کوچک نمایی کند .در ضمن یادتون باشه من از پست هایی که میزارم 10 خطش رو مجبورم و بقیش رو واسه دل خودم مینویسم. پس واقعا امیدوارم سرتون درد نیومده باشه و لذت برده باشید.نظراتتون بینهایت دلگرم کنندست. انتقاداتتون هم در درجه اول باعث بهبود شخصیت اجتماعیم و بعدش کارم و نوشته هام میشه، پس بازم بینهایت ممنونم.مثل همیشه نظراتونو می‌خونم و جواب می‌دم و اگه از نوشته‌هام خوشتون اومد او قلب تو خالیه‌ رو قرمز کنین برام و دنبالم کنید تا انگیزه داشته باشم بنویسم❤️شب و روزگار بر شما خوش.بدرود.ARiyou Jahan ‏12/01‏/2019‏ 10:34 ب.ظ ARiyou Jahan ARiyou Jahan Wed, 11 Dec 2019 10:26:28 +0330 https://virgool.io/@ARiyou2000/14-basic-css-selectors-jga9k8qxcrd7 به نام ایزد دانادر این پست آموزشی در مورد انواع انتخاب گرهای ساده صحبت خواهیم کرد.یک style در CSS شامل یک انتخاب کننده (selector) و بلاکی است که اعلان (declaration) در آن قرار میگیرد. در این فصل با نحوه ی تعریف کد های CSS و چگونگی انتخاب عناصر HTML جهت اعمال استایل روی آنها آشنا خواهیم شد.من برای این پست مطالب رو از سایت learn source , mizfa انتخاب کردم.امیدوارم این مطلب براتون مفید باشه و یادتون نره برای ما نظرات و انتقاداتتون رو ارسال کنید.اگر سوال یا هر حرفی دارید میتونید به ایمیل من به آدرس ARiyou.public@gmail.com و یا در شبکه های اجتماعی با شناسه (ID | User name) زیر منو پیدا کنیدTelegram, Twitter, Facebook & ... By : @ARiyou2000<br/>با تشکر از همه شما دوستان، آریو جهاندیگه بریم سر اصل مطلبآشنایی با style ها در زبان HTMLCSS زبانی برای استایل دهی به صفحاتی است که بر پایه HTML طراحی شده است. درحالی که HTML ساختار صفحه را فراهم می آورد، CSS با تعامل با مرورگر باعث به وجود آمدن ظاهر مناسب برای HTML در صفحه نمایش میشود.برای مثال ممکن است شما از HTML برای تبدیل یک عبارت به یک سرتیتر سطح بالا استفاده کنید و از CSS برای استایل دهی به آن سرتیتر. مثلا این سرتیتر باید بزرگ، به رنگ قرمز و در مکانی باشد که به اندازه ی  50 پیکسل از گوشه ی سمت چپ مرورگر فاصله داشته باشد. در CSS به قوانینی که ظاهر یک قسمت مشخص از صفحه را تعیین میکنند style میگویند و به مجموعه ای از style ها style sheet گفته میشود.شما میتوانید style ها را برای کار با هر تگ HTML ایی ایجاد کنید، برای مثال شما میتوانید استایل هایی ایجاد کنید که تصاویر در صفحه را فرمت بندی کنند. برای نمونه یک استایل میتواند یک تصویر را نسبت به دیگر عناصر ترازبندی کند، یک بوردر رنگی در اطراف تصویر ایجاد کند و فاصله ای به اندازه ی 50 پیکسل بین تصویر و دیگر عناصر موجود در صفحه تدارک ببیند.مرورگر استایل هایی را که شما ایجاد کرده اید بر روی متون، تصاویر، هیدینگ ها و دیگر عناصر صفحه اعمال میکند. برای مثال شما میتوانید استایلی ایجاد کنید که روی یک پاراگراف مشخص در یک صفحه اعمال شود و فورا سایز متن، رنگ و فوت آن را تغییر دهد. شما میتوانید استایل هایی را ایجاد کنید که روی تگ های خاصی از HTML اعمال میشود برای مثال مرورگر تگ های <h1> در صفحه شما را به یک شکل نشان میدهد و اهمیتی ندارد که این تگ ها در کجای صفحه قرار داشته باشند و حتی شما میتوانید استایلی تعریف کنید که تنها روی یک تگ خاصی اعمال شود که قبلا به طریقی در HTML نشانه گذاری شده است.حتی پیچیده ترین و زیبا ترین وب سایت ها هم مانند آن چیزی که در شکل زیر مشاهده میکنید با یک استایل CSS شروع شده اند. با اضافه کردن استایل ها به صفحات وب میتوانید صفحاتی را ایجاد کنید که موجب شگفتی کاربرانتان شود. چه در کار کردن با CSS یک حرفه ای باشید و یا یک تازه کار، نیاز است یک سری قوانینی را در مورد چگونگی ایجاد style ها و style sheet ها رعایت کنید. در این فصل به این قوانین خواهیم پرداخت.منطق کدهای CSSقبل از هرچیزی، باید منطق استفاده از دستورات CSS رو متوجه بشیم. منطقش بسیار سادست. با یک سوال بیاین شروع کنیم:چطور یک انسان رو توصیف می‌کنیم؟خب مثلا یک دوستی مثل بهرام، بینی قشنگی داره! چطور این موضوع رو توصیف می‌کنیم؟ مسلما با جمله ی زیر:بهرام، بینی قشنگی دارهطبق فرم کلی‌ای که برای ساختار کدهای CSS گفته شد، می‌تونیم جمله ی بالا رو به این فرم بنویسیم:Bahram{ nose: beautiful; }در اینجا، کلمه “Bahram” یک انتخابگر یا selector هست. چون میگه ویژگی ها متعلق به چه کسی یا چیزی هستن.کلمه “nose” یک ویژگی یا property از بهرام هست. یعنی شکل بینی بهرام.و در نهایت کلمه “beautiful” یک مقدار یا value برای بینی بهرام هست. مقداری که میتونه کلمات زیبا، نازیبا و غیره رو در به داشته باشه.در CSS هم دقیقا با اینطور منطقی، چه بسا ساده تر، سر و کار داریم! مراحل کار به شکل زیره:یک عنصر از صفحه رو انتخاب کن.ویژگی عنصر رو (قیافه اون رو! ) با مقادیر مختلف تغییر بده.مرحله اول با استفاده از انتخابگر ها انجام می‌گیره. برای مثال، در کد زیر، ما عناصر h1 رو در صفحه انتخاب می‌کنیم و چهره مورد نظرمون رو در {…} وارد می‌کنیم. عنصر متناسب با اطلاعات نوشته شده توسط ما، تغییر می‌کنه.h1{ … }حالا انتخابگر ها، فقط نام عناصر نیستن، بلکه می‌تونن انواع مختلفی داشته باشن.ویژگی ها و چهره ی یک عنصرحالا میون {…} چی باید قرار بدیم؟ چطور چهره ی عنصر رو مشخص کنیم؟ بسیار سادست، ما در CSS ویژگی ها و به تناسب با اون ویژگی ها، مقادیر مختلفی داریم. برای مثال، میخوایم رنگ عنصر h1 که انتخاب کردیم، قرمز باشه:h1 { color : red ; }این کد بیان می­کنه، رنگ تمام متن­هایی که داخلh1ها هستن، به رنگ قرمز تغییر کنه.حالا سه نکته رو با هم بررسی کنیم:۱. ما می­‌تونیم به هرتعداد که می­خوایم، به انتخابگر ویژگی اختصاص بدیم:h1 { color: red ; font-size: 10px ; text-align: center ; }۲. عموما برای راحتی کدنویسی، بهتر هست که کدها رو در خطوط جداگانه بنویسیم، یعنی:h1{ color: red; font-size: 10px; text-align: center; }۳. یک عنصر، نمی­تونه ویژگی تکراری داشته باشه، برای مثال، کد زیر اشتباهه:div { color: blue; color: black; }حالا چند مثال رو با هم بررسی کنیم:p { color: black; background-color: blue; }تمام پاراگراف ­ها در صفحه، به رنگ مشکی ظاهر بشن و رنگ پس‌­زمینه اون ­ها، آبی باشه.span { font-family: IranSansWeb; opacity: 0.8; }عناصر span در صفحه، دارای فونت IranSansWeb و شفافیت 0.8 باشند.به عبارت دیگر :ساختار یک Styleیک استایل به تنهایی ظاهر یک عنصر در یک صفحه را مشخص میکند. به عبارتی دیگر یک استایل دستورالعملی است که به مرورگر میگوید چطور عنصری در صفحه را فرمت بندی کند برای مثال رنگ یک عنصر هیدینگ را به آبی تغییر دهد، یک بورد قرمز اطراف یک تصویر ایجاد کند و یا ساید باری به عرض 150 پیکسل برای نگهداری لینک ها ایجاد کند. اگر یک استایل میتوانست صحبت کند حتما چیزی شبیه به این میگفت : "آهای مرورگر این را شبیه آن بکن".در واقع یک استایل از دو قسمت تشکیل شده است : عنصری در صفحه که قصد اعمال فرمتی جدید را روی آن داریم  که به آن selector یا انتخاب کننده میگویند و دستورالعمل هایی که نحوه ی فرمت بندی را مشخص میکند که declaration block یا بلاک اعلان نام دارد. برای مثال یک selector میتواند یک عنصر هیدینگ ، پاراگرافی از متن، یک تصویر و ... باشد و بلاک اعلان میتواند شامل قوانینی مانند  تغییر رنگ هیدینگ به آبی، اضافه شدن یک بوردر قرمز رنگ اطراف پاراگراف، قرار دادن تصویر در وسط صفحه و ... باشد.یک style در CSS شامل یک انتخاب کننده (selector) و بلاکی است که اعلان (declaration) در آن قرار میگیرد :selector به عنصری از HTML اشاره دارد که قصد داریم استایل را روی آن اعمال کنیم.بلاک اعلان خود شامل یک یا چندین تعریف است که با استفاده از علامت نقطه ویرگول (;) از هم جدا شده اند.تعریف ها خود شامل نام صفت CSS و مقدار آن هستند که توسط یک علامت دو نقطه (:) از هم جدا شده اند.تعریف ها در CSS همیشه با علامت نقطه ویرگول (;) خاتمه پیدا میکنند و بلاک اعلان همیشه توسط یک جفت بریس ({ }) احاطه شده است.نمونه مثال زیر کدی را نشان میدهد که تمام عناصر <p> در صفحه ی HTML را وسط چین کرده و رنگ آنها را به قرمز تغییر میدهد :p { color: red; text-align: center; }خودتان امتحان کنیدانواع selector در CSSعناصرکلاس هاآیدی هاانتخابگر کلیانتخاب‌کننده‌های گروهی ( در جلسات آینده یاد خواهیم گرفت )انتخاب‌کننده‌های پیشرفته ( در جلسات آینده یاد خواهیم گرفت )عناصرتا اینجا یاد گرفتیم که می­‌تونیم نام خود عناصر رو به جای selector یا انتخابگر قرار داده و توسط دستورات اون­‌ها رو تغییر بدیم. مانند:p { text-align: center; color: red; }خودتان امتحان کنیدبحث جدیدی که در مورد نه تنها عناصر، بلکه به­‌طور کلی در مورد انتخابگر­‌ها باید یاد بگیریم، بحث روابط ” فرزندی و خانوادگی ” هست!برای یادگیری این بحث، نیازمند تسلط کافی و مناسب در HTML هستیم. همون­طور که می‌­دونیم، کدهای HTML با هم دارای رابطه فرزند و خانواده هستن. نکته این هست:” اگر به عنصری،یک سری دستورات CSS اعمال شود، به فرزندان آن عنصر هم همان دستورات CSS اعمال می­‌شود “کد زیر رو در نظر بگیرید.<div> <p> mizfa css </p> <p> mizfa html </p> <p> mizfa javascript </p> </div>همونطور که مشاهده می­شه، عناصر p، فرزند عنصر div به حساب میان. فرض کنیم کد CSS ما به شکل زیر باشه:div { color: blue; }نتیجه به فرم زیر خواهد بود:از تکنیک فرزند خانواده در CSS، در آینده به وفور استفاده می‌کنید.حالا سوالی که پیش میاد این هست: اگه ما ۵ پاراگراف داشته باشیم و فقط بخوایم به پاراگراف اول و سوم، رنگ قرمز رو اضافه کنیم، از چه کدی باید استفاده کنیم؟این مشکل، با کلاس‌­ها رفع می­شه!کلاس هاکلاس­ ها زمانی به کار میرن که بخوایم به عناصر معدودی، دستورات CSS رو مرتبط کنیم. روش استفاده از کلاس ها به ترتیب زیر هست:در فایل HTML یک کلاس با نام دلخواه، برای عناصر موردنظر، تعریف می­‌کنیم.در فایل CSS، قبل از نام کلاس یک نقطه ” . ” گذاشته و خصوصیات رو برای اون می­‌نویسیم.برای مثال:کد در فایل HTML<p class=&quotclass-name&quot> mizfa css classes </p>کد در فایل CSS.class-name{ color: yellow; }خصوصیات ذکر شده در کد CSS تنها به عناصری اعمال می­‌شن که کلاس “class-name” رو دارا هستن.یه مثال دیگه:فایل HTML:<ul> <li class=”special”>Link1 </li> <li>Link2 </li> <li class=”special”>Link3 </li> <li>Link4 </li> <li class=”special”>Link5 </li> </ul>فایل CSS:.special { background-color: yellow ; }انتخاب کننده ی class عناصری را انتخاب میکند که دارای صفت class خاصی باشند.برای انتخاب عناصری با یک class خاص، در ابتدای selector ، کاراکتر نقطه (.) را قرار داده و به دنبال آن، مقدار class را مینویسیم.در نمونه مثال زیر تمام عناصری که دارای مقدار "class="center باشند، راست چین شده و مقدار رنگ آنها به قرمز تغییر خواهد کرد..center { text-align: center; color: red; }خودتان امتحان کنیدهمان طوری که در مثال زیر نشان داده شده است  میتوان دایره انتخاب selector را به یک نوع عنصر محدود کرد.در مثال زیر تنها عناصر پاراگرافی (<p>) که دارای مقدار "class="center باشند راست چین شده و رنگ قرمز روی آنها اعمال میشود.p.center { text-align: center; color: red; }خودتان امتحان کنیدعناصر HTML میتوانند چندین مقدار برای صفت class داشته باشند.در نمونه مثال زیر عنصر پاراگراف دارای دو مقدار center و large برای صفت class است که هر کدام میتوانند استایل جداگانه ای در CSS داشته باشند.<p class=&quotcenter large&quot>This paragraph refers to two classes.</p>خودتان امتحان کنیدتا اینجا این کار رو برای چند عنصر خاص هم یاد گیرفتیم. ما اگه یه عنصر خاص بود چی؟آیدی­ هانحوه­‌ی استفاده از آیدی­‌ها در HTML و CSS به فرم زیر هست:در فایل HTML، برای عنصر موردنظر یک آیدی دلخواه انتخاب می­ کنیم.در فایل CSS، قبل از نام آیدی، هشتگ ( # ) قرار داده و ویژگی­‌ها رو برای عنصر مورد نظر تعریف می­‌کنیم.مثال:کد HTML:<h1 id=” id-name “>Mizfa Id tutorial</h1>کد CSS:#id-name{ color: yellow; }تقریبا می­شه گفت که آیدی­‌ها شباهت بسیاری به کلاس­‌ها دارن. اما تفاوت­‌های مهمی هم دارن که اون هارو در جلسه آینده بررسی می‌کنیم.انتخاب کننده ی idانتخاب کننده ی id ، از صفت id  عنصر HTML جهت پیدا کردن یک عنصر منحصر به فرد استفاده میکند.مقدار id یک عنصر در صفحه باید منحصر به فرد بوده و به همین دلیل انتخاب کننده ی id نیز یک عنصر منحصر به فرد را انتخاب میکند.برای انتخاب یک عنصر با یک id خاص ، در ابتدای selector ، کاراکتر (#) را قرار داده و به دنبال آن، id عنصر را مینویسیم.نمونه کد زیر فقط به عنصری با شناسه "id="para1 اعمال میشود.#para1 { text-align: center; color: red; }خودتان امتحان کنیدانتخابگر کلیانتخابگر کلی، انتخابگری هست که می‌تونه تمام عناصر موجود در صفحه رو با یک ویژگی معین تغییر بده. این انتخابگر با علامت * مشخص می‌شه.به طور مثال در کد زیر، ما می‌گیم که فونت تمام نوشته های درون صفحه، باید b nazanin باشه:*{ font-family: b nazanin; }انتخابگر های گروهیفرض کنیم تعدادی عنصر داریم و می‌­خوایم به تمام اون­ ها دستورات یکسانی رو نسبت بدیم. مسلما اولین کدی که به ذهن ما می­رسه، شکلی شبیه به کد زیر داره:فایل HTML:<div> ... </div> <p> ... </p> <h3> ... </h3>فایل CSS:div{ font-size: 20px; } p{ font-size: 20px; } h3{ font-size: 20px; }برای سبک شدن کارمون، کافیه کدها را به وسیله کاما “ , “ به صورت یک گروه نوشت. کاما در اینجا حکم ” و ” رو داشته و ویژگی­ هارو به عناصر ذکر شده نسبت می­ده.div , h3 , p{    font-size: 20px;   }مفهوم کد­، می­گه: ” عنصر div و h3 و p را بگیر و ویژگی­ هارو به آن­ها نسبت بده “.به طور خلاصه تر:اگر شما عناصری داشته باشید که استایل یکسانی داشته باشند همانند مثال زیر :h1 { text-align: center; color: red; } h2 { text-align: center; color: red; } p { text-align: center; color: red; }بهتر است برای صرفه جویی در نوشتن کد از selector های گروهی استفاده کنید.کد بالا را میتوان توسط انتخاب کننده های گروهی به شکل زیر باز نویسی کرد. در این روش انتخاب کننده های توسط علامت ویرگول (,) از هم جدا میشوند :h1, h2, p { text-align: center; color: red; }خودتان امتحان کنیدمباحث پیشرفته تر برای علاقه مندان :انتخاب عناصر فرزندفرض کنیم کد ما دارای تعدادی عنصر p در داخل عناصر دیگه هست.<div> <p> … </p> <p> … </p> </div> <span> <p> … </p> <p> … </p> </span>حالا می­خوایم عناصر p داخل عنصر span رو انتخاب کنیم. کافیه بنویسیم:span p{ … }مفهوم کد می­گه: ” به داخل span برو، عنصر p را پیدا کن و ویژگی­ ها رو به آن نسبت بده “.نکته این روش، در این هست، انتخاب­گر ­هایی که بین خودشون علامتی ندارن، ارتباط فرزند و خانواده با هم دیگه برقرار می­‌کنن.مثال های پیشرفته ترdiv , .right , #iran{ font-size: 30px; }مفهوم کد: عنصر div، عناصر با کلاس right و عناصر با آیدی iran رو پیدا کن و سایز فونت اون­ها رو به 30 پیکسل تغییر بده.div ul li{ color: red; }مفهوم کد: داخل عنصر div شو، سپس داخل عنصر ul شو، عنصر li رو پیدا کن و رنگ متن اون رو به قرمز تغییر بده.div.first p , div .first p{ background-color: blue; }مفهوم کد: عنصر div با کلاس first رو پیدا کن و p داخل اون رو انتخاب کن. همزمان تمام div های دیگه رو پیدا کن، هر عنصری داخل اون ها با کلاس first رو پیدا کن و داخل اون ها p رو پیدا کن. سپس به این 2 عنصر p انتخاب شده، رنگ پس زمینه آبی رو اختصاص بده.این مبحث هم به پایان رسید. اگه به توضیح بیشتر نیاز داشتید بهم اطلاع بدید.در ضمن یادتون باشه من از پست هایی که میزارم 10 خطش رو مجبورم و بقیش رو واسه دل خودم مینویسم. پس واقعا امیدوارم سرتون درد نیومده باشه و لذت برده باشید.نظراتتون بینهایت دلگرم کنندست. انتقاداتتون هم در درجه اول باعث بهبود شخصیت اجتماعیم و بعدش کارم و نوشته هام میشه، پس بازم بینهایت ممنونم.مثل همیشه نظراتونو می‌خونم و جواب می‌دم و اگه از نوشته‌هام خوشتون اومد او قلب تو خالیه‌ رو قرمز کنین برام و دنبالم کنید تا انگیزه داشته باشم بنویسم❤️شب و روزگار بر شما خوش.بدرود.ARiyou Jahan ‏12/01‏/2019‏ 10:34 ب.ظ ARiyou Jahan ARiyou Jahan Wed, 11 Dec 2019 04:14:15 +0330 https://virgool.io/@ARiyou2000/13-html5-semantic-tags-kazsmbulsdci به نام ایزد دانادر این پست آموزشی در مورد تگ های معنایی یا Semantic Tags که در HTML5 اضافه شدند صحبت خواهیم کرد.اینکه چرا به این تگ ها، تگ های معنایی میگیم و چرا اضافه شدن و هدف از اون ها چی بود.امیدوارم این مطلب براتون مفید باشه و یادتون نره برای ما نظرات و انتقاداتتون رو ارسال کنید.اگر سوال یا هر حرفی دارید میتونید به ایمیل من به آدرس ARiyou.public@gmail.com و یا در شبکه های اجتماعی با شناسه (ID | User name) زیر منو پیدا کنیدTelegram, Twitter, Facebook & ... By : @ARiyou2000&lt;br/&gt;با تشکر از همه شما دوستان، آریو جهاندیگه بریم سر اصل مطلباول بیایید برسی کنیم تگ های غیرمعنایی چی هستند.تگ‌های غیرمعنایی (Non-Semantic Tags):اغلب تگ های HTML به منظور جای دادن محتوا در خود تعریف می شوند و به مرورگر می گویند محتوای صفحات وب را چطور نمایش دهند. این تگ ها، نوع محتوای داخل خود را مشخص نمی کنند و نمی گویند هر محتوا چه نقشی (Role) در صفحات وب سایت دارد.تگ‌های غیر معنایی div و span:تگ های کلاسیک div و span غیر معنایی (non-semantic) می باشند و هیچ گونه اطلاعاتی راجع به نوع محتوای درون خود و نقش آن محتوا در صفحه وب را ارائه نمی دهند.تگ‌های معنایی (Semantic Tags) :در اچ‌تی‌ام‌ال 5 معنایی (Semantic HTML5) تگ هایی وجود دارد که برای مرورگر مشخص می کند که هر محتوایی که در این تگ ها وجود دارد از چه نوعی هستند و چه نقشی در صفحه وب سایت دارد. تگ های معنایی html5 (Semantic Tags) صراحتا برای بات ها و خزنده های گوگل و بینگ مشخص می کند که کدام محتوای واقع در صفحه از اهمیت بیشتری برخوردار است، کدامیک برای navigation می باشد، کدامیک جانبی هستند و غیره…بنابراین با افزودن تگ های معنایی HTML5 به صفحات وب سایت خود، اطلاعات اضافی به محتوای سایت اضافه خواهد شد که به موتورهای جستجوی گوگل و بینگ امکان تشخیص نوع محتوا و نیز درجه اهمیت و اولویت محتواهای صفحات وب را می دهد.تگ‌های معنایی Header, Footer, Nav, Article :تگ های معنایی HTML5 مانند تگ های تصویر فوق، بطور مشخص نوع محتوای خود و نیز نقش آن را به مرورگر اعلام می کنند.لزوم استفاده از تگ های معنایی HTML5:برای کاربرانی که از نعمت بینایی بهره مند می باشند، تشخیص بخش های مختلف یک وب سایت (مانند منو، هدر، محتوای اصلی و فوتر) ساده می باشد و قادرند در یک نگاه تمام المان ها را تشخیص دهند اما فرض کنید کاربری نابینا وارد یک وب سایت شود.خزنده های موتور جستجوی گوگل و بینگ اگر نابینا نباشند حتما دچار ضعف در بینایی می باشند!بنابراین بات های موتورهای جستجو به کمک شما نیازمند می باشند. اگر شما بعنوان مدیر وب سایت (و یا طراح وب سایت) برای GoogleBot مشخص کنید که کدام یک از المان ها هدر می باشد، کدام فوتر و بهمین ترتیب سایر المان های یک صفحه وب، این موتورهای جستجو از شما سپاسگزار خواهند بود!از همه مهم تر اینست که به بات گوگل درجه اهمیت و اولویت محتوای بخش های مختلف یک صفحه وب را اعلام کنید.تگ های معنایی زیادی در html5 وجود دارد که می توان از بین آنها <section> و <nav> و <footer> را نام برد اما المان های دیگری مانند <blockquote> و <em> نیز قابل تعریف و استفاده هستند.بعنوان مثال، تگ های زیر می توانند بجای تگ <div> تعریف شوند تا نقش و نوع محتوای درون هر یک از آنها مشخص باشد:یکی دیگر از مزایای این تگ ها درک بهتر موضوع و دسترسی راحت تر در CSS و... است.از طرفی این تگ ها کدنویسی را کاهش داده و با یک پارچه کردن قسمت های اصلی کد، درک کد و ایجاد تغییرات یا ارتقا برنامه و تغییر در CSS برنامه توسط برنامه نویس دیگر را نیز راحت تر می کند.پیش از این تگ <header> توسط برنامه نویسان به شکل زیر تعریف میشد:<div id="header">حال تصور کنید که برنامه نویسی دیگر از این رویه معمول پیروی نمی کرد و به جای I id="header" I مقدار زیر را وارد می نمودI id="top" Iدر این صورت بخش بزرگی با مشکل و اتلاف وثت در درک این نام گذاری رو به رو میشد.نام گذاری های معمول تا پیش از این مطابق شکل زیر بود.خب فکر می کنم تا همین جای کار کافی و قابل قبول بوده باشه. بنابر این این مبحث هم به تعریف قابل قبولی رسید.در ضمن یادتون باشه من از پست هایی که میزارم 10 خطش رو مجبورم و بقیش رو واسه دل خودم مینویسم. پس واقعا امیدوارم سرتون درد نیومده باشه و لذت برده باشید.نظراتتون بینهایت دلگرم کنندست. انتقاداتتون هم در درجه اول باعث بهبود شخصیت اجتماعیم و بعدش کارم و نوشته هام میشه، پس بازم بینهایت ممنونم.مثل همیشه نظراتونو می‌خونم و جواب می‌دم و اگه از نوشته‌هام خوشتون اومد او قلب تو خالیه‌ رو قرمز کنین برام و دنبالم کنید تا انگیزه داشته باشم بنویسم❤️شب و روزگار بر شما خوش.بدرود.ARiyou Jahan ‏12/01‏/2019‏ 10:34 ب.ظ ARiyou Jahan ARiyou Jahan Wed, 11 Dec 2019 03:34:35 +0330 https://virgool.io/@ARiyou2000/12-html-entities-iyemyewrkti5 به نام ایزد دانادر این پست آموزشی در مورد موجودیت ها یا Entities صحبت خواهیم کرد.امیدوارم این مطلب براتون مفید باشه و یادتون نره برای ما نظرات و انتقاداتتون رو ارسال کنید.اگر سوال یا هر حرفی دارید میتونید به ایمیل من به آدرس ARiyou.public@gmail.com و یا در شبکه های اجتماعی با شناسه (ID | User name) زیر منو پیدا کنیدTelegram, Twitter, Facebook & ... By : @ARiyou2000با تشکر از همه شما دوستان، آریو جهاندیگه بریم سر اصل مطلببیایید به یه تعریف Free Learn انجام داده نگاه کنیم.موجودیت ها یا Entities در HTMLموجودیت ها یا Entities در HTML به کاراکترهایی که بتوانند کاراکترهای ذخیره شده در HTML را نمایش دهند موجودیت یا Entitie گفته می شود.بهتر است بدانید برخی از کاراکترها هستند که متعلق به HTML می باشند، خب این یعنی چی! یعنی ما تعدادی کاراکتر داریم که زبان HTML از آنها برای وجود خودش استفاده میکنه و یجورایی میشه گفت HTML این کاراکترها رو در خودش ذخیره کرده.برای مثال این علامت (<)(بزرگتر) و این علامت (>) (کوچکتر) متعلق به HTML می باشد یعنی ما با استفاده از این دو علامت میتوانیم یک تگ را باز و بسته نماییم و بطور کلی دیگر مواردی که در زبان HTML از آن استفاده می شود.حال موجودیت ها باز خودشون یکسری کاراکتر هستند که ما با استفاده از آنها میتوانیم کاراکترهای ذخیره شده در زبان HTML را استخراج کنیم و در نهایت آنها را در خروجی به نمایش دربیاوریم.بفرض مثال من میخوام دستورات زیر را درون یک فایل HTML قرار دهم و دقیقا همین دستورات در خروجی هم نمایش داده شود؟!<p>Www . Free-Learn . Ir</p> <p>سایت آموزشی فری لرن</p>همانطور که میدانید در حالت عادی چنین چیزی امکان نداره! چون HTML به محض دیدن دستورات بالا در خروجی اول یک پاراگراف با این مقدار (Www . Free-Learn . Ir) و سپس یک پاراگراف دیگر با این مقدار (سایت آموزشی فری لرن) را نمایش میدهد.ولی من میخوام دقیقا همین دستورات در خروجی نیز نمایش داده شوند یعنی میخوام در خروجی دقیقا دستور زیر یعنی <p>Www . Free-Learn . Ir</p> نمایش داده شود! اونوقت باید چکار کرد؟ اینجاست که ما باید از موجودیت ها یا Entities استفاده نماییم.حال میخواهیم با استفاده از موجودیت ها، دستورات بالا را که مشاهده نمودید در خروجی دقیقا به همان صورت به نمایش دربیاوریم.<body> <p> Www . Free-Learn . Ir </p> <p> سایت آموزشی فری-لرن </p> </body>امتحان کنیداگر خروجی را مشاهده نمایید میبینید که در خروجی دقیقا دستوراتی را که میخواستیم به ما نمایش داده شود نمایش داده شده است چرا که ما با استفاده از موجودیت ها تونستیم از کاراکترهایی که متعلق به HTML است استفاده نماییم.کار با موجودیت ها یا Entities در HTMLبرای استفاده از موجودیت ها در HTML ما میتونیم از ۲ روش زیر استفاده نماییم :استفاده از نام موجودیتاستفاده از کد موجودیتشکل کلی یک موجودیت در HTML بصورت زیر می باشد، یعنی ما باید از طریق شکل زیر از موجودیت ها استفاده نماییم :&entity_name;یا&#entity_number;اولی entity_name یا همون نام موجودیت و دومی entity_number یا همون شماره یا کد موجودیت می باشد.نحوه استفاده از نام یک موجودیت در HTMLبرای استفاده از نام یک موجودیت ما باید اول یک علامت ( & ) گذاشته سپس نام موجودیت را نوشته و در نهایت علامت ( ; ) را بگذاریم. پس به راحتی ما میتوانیم از موجودیت ها در HTML استفاده نماییم.ساده ترین راه استفاده از نام یک موجودیت است ولی ممکن است بعضی از مرورگرها این نام ها رابطور کامل پشتیبانی نکنند.<body> <p> © </p> <p> ® </p> </body>امتحان کنیدنحوه استفاده از کد یک موجودیت در HTMLبرای استفاده از کد یا شماره یک موجودیت ما باید اول علامت ( & ) را گذاشته سپس یک علامت ( # ) سپس کد یا شماره موجودیت را نوشته و در نهایت علامت ( ; ) را بگذاریم. پس به راحتی ما میتوانیم از موجودیت ها در HTML استفاده نماییم.<body> <p> © </p> <p> ® </p> </body>امتحان کنیدحال اگر خروجی هر دو مثال بالا را مشاهده نمایید، میبینید که خروجی هر ۲ مثال بالا یکی است، چون در مثال اول از نام موجودیت استفاده کردیم و در مثال دوم از کد یا شماره موجودیت، پس هر ۲ خروجی باید یکی باشند.نحوه ایجاد فاصله بین حروف در HTMLنمیدونم تا به الان براتون پیش اومده یا نه ولی بطور کلی اینو بدونید که در زبان HTML فقط و فقط یک خط فاصله در بین حروف و کلمات محاسبه می شود ، یعنی اگر شما ۱۰۰ فاصله در بین کلماتتون بندازید در خروجی فقط و فقط یک فاصله عمل میکند و نمایش داده می شود.اینجاست که ما میتونیم با استفاده از موجودیت ;nbsp& به راحتی و به دلخواه هر چقدر که فاصله بخواهیم در بین حروف و کلمات ایجاد نماییم و به همان اندازه نیز در خروجی نمایش داده شود.<body> <p> Salam Man Sadegh Hastam.</p> </body>امتحان کنیدترکیب حروف با موجودیت ها در HTMLما همچنین در HTML میتوانیم از موجودیت ها بصورت ترکیبی استفاده نماییم ، یعنی با ترکیب حروف و موجودیت ها میتوانیم یک حرف یا کلمه جدیدی را ایجاد نماییم. لطفا برای مثال به دستورات زیر توجه نمایید.<body> <p> Ã </p> <p> ã </p> </body>امتحان کنیداگر بروی دکمه امتحان کنید کلیک نمایید و خروجی را مشاهده نمایید، میبینید که با ترکیب حرف (A) و موجودیت (;۷۷۱#&) ما تونستیم یک حرف جدیدی را ایجاد نماییم.خلاصه ی این بخش (مخصوص کسایی که به درک کردن مبحث اعتقاد ندارن که در برخی موارد خیلی هم خوبه)موجودیت بطور کلی به کاراکترهای ذخیره شده در HTML و یا کاراکترهایی که بتوان علامت های < و > و… را در یک صفحه ی وب نشان داد، گفته می شود.برای ایجاد فاصله بین حروف و کلمات در یک فایل HTML باید از ;nbsp& استفاده کرد.در ضمن یادتون باشه من از پست هایی که میزارم 10 خطش رو مجبورم و بقیش رو واسه دل خودم مینویسم. پس واقعا امیدوارم سرتون درد نیومده باشه و لذت برده باشید.نظراتتون بینهایت دلگرم کنندست. انتقاداتتون هم در درجه اول باعث بهبود شخصیت اجتماعیم و بعدش کارم و نوشته هام میشه، پس بازم بینهایت ممنونم.مثل همیشه نظراتونو می‌خونم و جواب می‌دم و اگه از نوشته‌هام خوشتون اومد او قلب تو خالیه‌ رو قرمز کنین برام و دنبالم کنید تا انگیزه داشته باشم بنویسم❤️شب و روزگار بر شما خوش.بدرود.ARiyou Jahan ‏12/01‏/2019‏ 10:34 ب.ظ ARiyou Jahan ARiyou Jahan Tue, 10 Dec 2019 16:39:38 +0330 https://virgool.io/@ARiyou2000/11-divs-spans-vx5oyju6ssl6 به نام ایزد دانادر این پست آموزشی در مورد Divs ها و Spans ها صحبت خواهیم کرد.البته کمی هم به یادآوری Block Element , Inline Element ها می پردازیم.امیدوارم این مطلب براتون مفید باشه و یادتون نره برای ما نظرات و انتقاداتتون رو ارسال کنید.اگر سوال یا هر حرفی دارید میتونید به ایمیل من به آدرس ARiyou.public@gmail.com و یا در شبکه های اجتماعی با شناسه (ID | User name) زیر منو پیدا کنیدTelegram, Twitter, Facebook & ... By : @ARiyou2000با تشکر از همه شما دوستان، آریو جهاندیگه بریم سر اصل مطلبقبل از هر چیزی یه نگاه مختصر به انواع تگ که قبلا به طور مفصل توضیح دادیم داشته باشیم.عنصر Block Element چیست و چه فرقی با Inline Element دارد؟2 دسته مهم از المان هایی که در HTML از آن ها استفاده می کنیم، المان های بلاکی (Block element) و المان های درون خطی (Inline element) هستند.المان های بلاکیهمان طور که از عنوان پیدا است این المان ها مانند بلوکی هستند که می توانند عناصر دیگر را در خود جای دهند و با استفاده از آن ها می توان بخش های مختلف صفحه را جدا کرده و به هر بخش استایل داد. به عنوان مثال Div و h1 دو نمونه از المان های بلاکی هستند. قبل و بعد از باز و بسته شدن این نوع المان ها، مرورگر یک خط جدید در نظر می گیرد.المان های درون خطیاین المان ها می توانند درون یک تگ دیگر مورد استفاده قرار بگیرند و تاثیری روی سایر عناصر آن بخش ندارند و فقط همان خط را تغییر می دهند. از این المان ها می توان در استایل دادن به المان های بلاکی نیز استفاده کرد. قبل و بعد از باز شدن این تگ، مرورگر به خط جدید نمی رود.تگ Div یا Division در HTML چیست ؟به کمک تگ Div می توان بخش های مختلف صفحه را به طور جداگانه طراحی کرد و به عناصری که در آن Div قرار داده ایم با CSS سبک و استایل بدهیم. به عنوان مثال قسمت پایینی هر سایت (Footer) در کدهای HTML یک Div محسوب می شود که آیکون ها، متن و سایر المان هایی که در فوتر می بینید در آن دیو قرار می گیرند. با کمک Div عناصر قسمتی از صفحه که به دلخواه شما چیده شده اند، استایل می گیرند. همچنین تمامی بخش های یک صفحه مانند تصاویر، متن، دکمه و غیره با استفاده از این تگ قابل جداسازی هستند.تگ Span در HTML چیست ؟به کمک تگ span می توان به هر عنصر مستقل و بدون تغییر دادن سایر عناصر استایل داد. به عنوان مثال می توانید این تگ را برای یک پاراگراف <P> در کدهای خود استفاده کرده و استایل آن را تغییر دهید بدون اینکه سایر متن ها تغییری کنند.تفاوت تگ Div با Span چیست ؟زبان HTML به شما در شکل دهی ساختار یک صفحه کمک می کند و برای استایل دادن و افزودن ویژگی های ظاهری به صفحات سایت، باید از CSS کمک بگیرید. تگ div و تگ span در کنار CSS کاربرد زیادی دارند و در بسیاری از موارد کار طراحان وب را ساده می کنند. تا این قسمت از مطلب با کاربرد تگ ها آشنا شدیم. در لیست زیر تفاوت تگ Div و Span را بررسی می کنیم:تگ Div:تگ Div یک المان بلاکی است.Div برای استایل دادن به کادرهای موجود در صفحه که دارای المان های مختلفی هستند، به کار می رود.تگ Span :Span یک المان درون خطی است.این تگ برای استایل دادن به عناصر صفحه به کار می رود.جمع بندیپس به این نتیجه رسیدیم که تگ دیو در HTML برای سازمان دهی المان های مختلفی که در خود جای داده به کار می رود. درحالیکه تگ Span برای سازمان دهی متن در همان خط از کد استفاده می شود. اگرشما هم تعریف دیگری از تفاوت این دو تگ دارید خوشحال می شویم با خوانندگان در میان بگذارید.با تشکر از سون-لرن.در ضمن یادتون باشه من از پست هایی که میزارم 10 خطش رو مجبورم و بقیش رو واسه دل خودم مینویسم. پس واقعا امیدوارم سرتون درد نیومده باشه و لذت برده باشید.نظراتتون بینهایت دلگرم کنندست. انتقاداتتون هم در درجه اول باعث بهبود شخصیت اجتماعیم و بعدش کارم و نوشته هام میشه، پس بازم بینهایت ممنونم.مثل همیشه نظراتونو می‌خونم و جواب می‌دم و اگه از نوشته‌هام خوشتون اومد او قلب تو خالیه‌ رو قرمز کنین برام و دنبالم کنید تا انگیزه داشته باشم بنویسم❤️شب و روزگار بر شما خوش.بدرود.ARiyou Jahan ‏12/01‏/2019‏ 10:34 ب.ظ ARiyou Jahan ARiyou Jahan Tue, 10 Dec 2019 16:34:36 +0330 https://virgool.io/@ARiyou2000/10-backgrounds-borders-hnlb2g43r9ms به نام ایزد دانادر این پست آموزشی در مورد پس زمینه ها و حاشیه ها صحبت خواهیم کرد.این که چطور عوضشون کنیم و کمی هم با اندازه ها و لبه ها شون بازی میکنیم.از اونجایی که این موارد، همه تغییرات ظاهری هستند و نه بنیادی، پس مربود به CSS هستند. بنابراین قطعا مقداری وارد مباحث CSS میشیم ولی در اونها عمیق نمیشیم. در واقع این جلسه رو نمیشه به عنوان شروع CSS شناخت. فقط با چند دستور ساده و فعلا شاید حفظ کردنی آشنا میشیم.امیدوارم این مطلب براتون مفید باشه و یادتون نره برای ما نظرات و انتقاداتتون رو ارسال کنید.اگر سوال یا هر حرفی دارید میتونید به ایمیل من به آدرس ARiyou.public@gmail.com و یا در شبکه های اجتماعی با شناسه (ID | User name) زیر منو پیدا کنیدTelegram, Twitter, Facebook & ... By : @ARiyou2000&lt;br/&gt;با تشکر از همه شما دوستان، آریو جهاندیگه بریم سر اصل مطلبمی خواهیم اول یکم با حاشیه دور Content یا محتوای اصلی یا همون Border بازی کنیم.قبل از شروع بهتره بدونید که خود حاشیه مربوط به HTML میشه ولی تغییر در ظاهر اون مربوط به CSS.این حاشیه از قبل موجوده ولی نامرئی. ما به وسیله چند خط دستور ساده CSS اون رو آشکار میکنیم.بیایید اول یاد بگیریم چطور دستورات CSS رو به صورت اصولی و External وارد کنیم. به این که External چیه بعدا میرسیم؛ شما فعلا با این اصطلاح آشنا باشید تا بعد که توش ریز بشیم.خب ساختن این فایل بستگی به روشی که شما برای کد زدن انتخاب کردید داره. البته که اگه از IDE ها از جمله Jetbrains استفاده می کنید،کار شما خیلی راحت تر خواهد بود. اما این رو بدونید که اصول کار یکسانه.ایجاد فایل CSSخب اول کار دقیقا همونطور که یه فایل HTML ایجاد کردید یه فایل متنی با پسوند (css.) ایجاد میکنیم.اگر تو IDE کد میزنید کافیه توی قسمت Project کلیک راست کنید و از قسمت New گزینه Style Sheet یا css رو انتخاب کنید.ترجیها این فایل رو تو همون قسمتی که فایل HTML رو ساختیم ایجاد می کنیم تا در مرحله دوم برای آدرس دهی به مشکل نخوریم.حالا باید این فایل HTML رو به CSS متصل کنیم. برای این کار باید به فایل HTML مون آدرس فایل CSS مونن رو بدیم.برای این کار تو تگ head فایل HTML مون دستور زیر رو وارد میکنیم و به جای کلمه Address، آدرس فایل CSS رو به همراه پسوند css. وارد میکنیم.<link href="address" type="text/css" rel="stylesheet" />برای درک بهتر:<!doctype html> <html> <head> <title>ARiyou Jahan</title> <link href=&quotstyle.css&quot type=&quottext/css&quot rel=&quotstylesheet&quot /> </head> <body> </body> </html>توجه داشته باشید که در متن بالا از اونجایی که ما فایل css. رو در همون مکان html قرار دادیم، آدرس دهی رو به این صورت و باتوجه به پروژه (و نه آدرس کامل فایل از ریشه سیستم به صورت c:\ ..... \style.css) انجام دادم.خب الان فایل css. و html. ما به هم متصل هستند و الان اگر کاری در فایل css. انجام بدیم، با توجه به اون شئ یا اشیائی که اسمشون رو در فایل css. گفتیم، مرورگر به دنبال همون اشیاء در فایل html. می گرده و ظاهرشون رو با توجه به اون دستوراتی که در فایل css. گفتیم تغییر میده.خب بیاید نحوه انجام دادن این کارو با هم برسی کنیم.متن فایل های css. به این صورته که شما بخش های مجزایی دارید و این بخش ها داخل بدنه بخش دیگه ای نیستند.a{ مثل تمام متن ها a دستورات برای تمامی اشیاء از جنس } b{ مثل تمام دکمه ها b دستورات برای تمامی اشیاء از جنس } p{ دستورات برای تمامی پاراگراف ها - مثل تغییر سایز آنها یا رنگ }خب حالا با نحوه وارد کردن دستورات CSS در فایل css. هم آشنا شدیم.الان وقت تغییر دادن حاشیه به وسیله CSSایجاد تغییرات در Borderخاصیت Border درCSSخاصیت های Border به شما این مکان را می دهند که style ، اندازه و رنگ حاشیه ی یک المان را تغییر دهید.نکته:توجه داشته باشید که هیچ یک از خاصیت های Border تا زمانی که خاصیت Border-style مقداردهی نشدهباشند، تاثیری نخواهند داشت.مقادیر Border-styleNone هیچ حاشیه ای تعریف نمی شود.Dotted حاشیه ی نقطه چین تعریف می کند.Dashed حاشیه ی خط چین تعریف می کند.Solid یک حاشیه با خط ممتد رسم می کند.Double دو خط حاشیه تعریف می کند.Groove یک خط حاشیه ی سه بعدی نمایش می دهد که در آن خطوط بالایی و سمت چپ پررنگ تر ازخطوط دیگر هستند.Ridge در این حالت خطوط حاشیه به صورت سه بعدی و با طیف رنگی نمایش داده می شوند.Inset این مقدار یک حاشیه ی داخلی سه بعدی تعریف می کند که در آن معمولا خطوط بالایی و سمت چپ دارای سایه و تیره تر از خطوط دیگر هستند.Outset حاشیه ی سه بعدی خارجی تعریف می کند که در آن خطوط پایینی و سمت راست دارای سایه و تیره تر از خطوط دیگر هستند.ضخامت حاشیه (Border width)با استفاده از خاصیت Border-width می توان ضخامت خط حاشیه را تنظیم کرد.عرض  (width) یا بر حسب پیکسل تنظیم می شود و یا با بهره گیری از سه مقدار از پیش تعریف شده ی thin ، medium و thick .نکته : خاصیت ” Border-width “زمانی که به تنهایی بکار برده می شود، کار خاصی انجام نمی دهد. ابتدا باید بهوسیله ی خاصیت ” Border-style “خطوط حاشیه را مقدار دهی (تنظیم) کنید.p.one { border-style: solid; border-width: 5px; } p.two { border-style: solid; border-width: medium; }رنگ خط حاشیه  (Border color)خاصیت border-color به منظور تنظیم و مقداردهی رنگ خط حاشیه مورد استفاده قرار می گیرد.رنگ خط حاشیه را می توان با مقادیر زیر تنظیم کرد.Name -اسم رنگ دلخواه را مشخص می کند، مانند ” red”RGB -یک مقدار red blue green) RGB )  تعریف می کند.Hex- یک مقدار شانزده شانزدهی(hex) مانند “#ff0000” مشخص می کندنکته : چنانچه رنگ خط حاشیه مقداردهی نشده باشد، border رنگ خود را از خاصیت color مربوطه به ارث می برد.خاصیت ” border-color “اگر به تنهایی بکار گرفته شود، هیچ اثری نخواهد داشت. بدین معنا که شما باید درمرحله ی اول با استفاده از خاصیت ” border-style “، خطوط حاشیه را مقداردهی کنید.p.one { border-style: solid; border-color: red; } p.two { border-style: solid; border-color: #98bf21; }تعریف حاشیه به صورت مجزا برای هر طرف در CSSاین امکان وجود دارد که برای حاشیه ی هر طرف ظاهری متفاوت تعریف کرد (برای هر طرف یک حاشیه یمتفاوت داشت)p { border-top-style: dotted; border-right-style : solid; border-bottom-style: dotted; border-left-style: solid; }مثال بالا را همچنین می توان با تنها یک خاصیت تنظیم یا مقدار دهی کرد.p { border-style: dotted solid; }خاصیت border-style می تواند از یک تا چهار مقدار را  داشته باشد.border-style dotted solid double dashed;حاشیه ی بالایی نقطه چین می شود.حاشیه ی سمت راست عنصر با خطی معمولی کشیده می شود.حاشیه ی پایین با دو خط نمایش داده می شود.حاشیه ی سمت چپ خط چین می شود.border-style dotted solid double;حاشیه سمت بالا نقطه چین می شود.حاشیه های سمت راست و چپ با خط معمولی ترسیم می شوند.حاشیه ی سمت پایین دو خطه می شود.border-style dotted solid;حاشیه های سمت بالا و پایین نقطه چین می گردند.حاشیه های سمت راست و چپ با خطی معمولی کشیده می شوند.border-style dotted;هر چهار حاشیه با خطی معمولی تعریف می شوند.خاصیت border-style در مثال بالا بکار گرفته شده، اگرچه قابلیت استفاده از آن با border-width وborder-color وجود نیز وجود دارد.خاصیت Border-Shorthandهمان طور که در مثال های فوق مشاهده می کنید، خاصیت های مختلفی وجود دارند که در برخورد و کار باخطوط حاشیه باید به آن ها توجه داشت.به منظور کاهش اندازه ی کد (مختصر نویسی یا بهینه نوشتن کد)، همچنین می توان تمامی خاصیت های جداگانه را در یک خاصیت واحد تعریف کرد. این خاصیت را مختصر نویسی کد یا همان short-hand propertyمی نامند.خاصیت ذکر شده در واقع فشرده یا خلاصه ی خاصیت های مجزای زیر است.border-widthborder-style (الزامی )border-colorp { border: 5px solid red; }حالا میرسیم به مبحث پس زمینه که اونو به اختیار خودتون میزارمدر ضمن یادتون باشه من از پست هایی که میزارم 10 خطش رو مجبورم و بقیش رو واسه دل خودم مینویسم. پس واقعا امیدوارم سرتون درد نیومده باشه و لذت برده باشید.نظراتتون بینهایت دلگرم کنندست. انتقاداتتون هم در درجه اول باعث بهبود شخصیت اجتماعیم و بعدش کارم و نوشته هام میشه، پس بازم بینهایت ممنونم.مثل همیشه نظراتونو می‌خونم و جواب می‌دم و اگه از نوشته‌هام خوشتون اومد او قلب تو خالیه‌ رو قرمز کنین برام و دنبالم کنید تا انگیزه داشته باشم بنویسم❤️شب و روزگار بر شما خوش.بدرود.ARiyou Jahan ‏12/01‏/2019‏ 10:34 ب.ظ ARiyou Jahan ARiyou Jahan Tue, 10 Dec 2019 14:52:31 +0330 https://virgool.io/@ARiyou2000/09-box-model-margin-padding-ki5eyf4x9win به نام ایزد دانادر این پست آموزشی در مورد مدل جعبه در CSS و تفاوت انواع فاصله صحبت خواهیم کرد.امیدوارم این مطلب براتون مفید باشه و یادتون نره برای ما نظرات و انتقاداتتون رو ارسال کنید.اگر سوال یا هر حرفی دارید میتونید به ایمیل من به آدرس ARiyou.public@gmail.com و یا در شبکه های اجتماعی با شناسه (ID | User name) زیر منو پیدا کنیدTelegram, Twitter, Facebook & ... By : @ARiyou2000&lt;br/&gt;با تشکر از همه شما دوستان، آریو جهاندیگه بریم سر اصل مطلبخب، قبل از شروع هر چیز بیایید 2 تا چیزو به خاطر بسپاریم.منظور از باکس اصلی همون پنچره نمایش برنامه ماست که در حالت عادی از بالا به نوار ابزار مرورگر و از پایین به نوار وظیفه یا Task bar ویندوز و از دو طرف تا انتهای صفحه نمایش ادامه پیدا میکنه.بازم میگم که در حالت عادی. منظور از حالت عادی ویندوز بدون تغییرات ظاهری و کاربری و یه مرورگر مثل کروم هستش.منظور از content همون محتوای اصلی اون بخش(نه کل صفحه. بعدا در مورد بخش ها صحبت میکنیم) هستش که معمولا در مرکز اون بخش و مبحث ما هستش.برسی انواع ناحیه :هر عنصر دارای چهار لبه می باشد. لبه margin یا همان فاصله خارجی، لبه border یا همان حاشیه عنصر، لبه padding یا فاصله داخلی و لبه Content یا محتوای عنصر.ا Content - محتوای box ، جایی که متون و تصاویر قرار میگیرندا Padding - فضایی که اطراف محتوای یک عنصر قرار میگیرد.ا Border - خط دوری که بین padding و content قرار میگیردا Margin - فضایی که بیرون از border اطراف عنصر HTML قرار میگیردناحیه محتواهمانطور که از نامش پیداست ناحیه ای است که محتوای عنصر در آن قرار می گیرد. مثلا اگر متنی داخل عنصر قرار دهیم در این ناحیه جای می گیرد و یا اگر عناصر دیگری به عنوان فرزندان عنصر درون آن قرار گیرند در این ناحیه خواهند بود.ناحیه paddingاگر از داخل عنصر به سمت بیرون حرکت کنیم بعد از ناحیه محتوا به ناحیه padding می رسیم. از این ناحیه برای مواردی از قبیل ایجاد فاصله ای بین محتوای عنصر و حاشیه دور آن استفاده می شود. همچنین در حالت پیشفرض پس زمینه عنصر علاوه بر ناحیه محتوا در این ناحیه هم نیز ترسیم می شود. این فاصله را می توان توسط ویژگی padding کنترل کرد.ناحیه borderاین ناحیه همان حاشیه دور یک عنصر است که می توان آن را توسط ویژگی border و مشتقات آن کنترل کرد.ناحیه marginبیرونی ترین ناحیه یک عنصر ناحیه فضای خارجی یا همان margin می باشد. که ناحیه ای شیشه می باشد که فاصله بین عنصر(در اصل border عنصر) با عناصر اطراف آن را کنترل می کند. از طریق ویژگی margin می توان این فضا را بوجود آورد.اگر تنها یک عنصر را در صفحه تصور کنیم، عنصر اطرافِ border عنصر ما همان box اصلی است که در حالت عادی از بالا به نوار ابزار مرورگر و از پایین به نوار وظیفه یا Task bar ویندوز و از دو طرف تا انتهای صفحه نمایش ادامه پیدا میکنه. پس در این حالت margin به ما فاصله بین border و لبه صفحه نمایش رو نشون میده.اینم یه جمع بندی :در ضمن یادتون باشه من از پست هایی که میزارم 10 خطش رو مجبورم و بقیش رو واسه دل خودم مینویسم. پس واقعا امیدوارم سرتون درد نیومده باشه و لذت برده باشید.نظراتتون بینهایت دلگرم کنندست. انتقاداتتون هم در درجه اول باعث بهبود شخصیت اجتماعیم و بعدش کارم و نوشته هام میشه، پس بازم بینهایت ممنونم.مثل همیشه نظراتونو می‌خونم و جواب می‌دم و اگه از نوشته‌هام خوشتون اومد او قلب تو خالیه‌ رو قرمز کنین برام و دنبالم کنید تا انگیزه داشته باشم بنویسم❤️شب و روزگار بر شما خوش.بدرود.ARiyou Jahan ‏12/01‏/2019‏ 10:34 ب.ظ ARiyou Jahan ARiyou Jahan Mon, 09 Dec 2019 23:00:41 +0330 https://virgool.io/@ARiyou2000/08-implementing-css-t9keag4bmhhb به نام ایزد دانادر این پست آموزشی در مورد انواع پیاده سازی CSS صحبت خواهیم کرد.امیدوارم این مطلب براتون مفید باشه و یادتون نره برای ما نظرات و انتقاداتتون رو ارسال کنید.اگر سوال یا هر حرفی دارید میتونید به ایمیل من به آدرس ARiyou.public@gmail.com و یا در شبکه های اجتماعی با شناسه (ID | User name) زیر منو پیدا کنیدTelegram, Twitter, Facebook & ... By : @ARiyou2000<br/>با تشکر از همه شما دوستان، آریو جهاندیگه بریم سر اصل مطلبخب. من در این پست قسط دارم در مورد انواع پیاده سازی CSS صحبت کنم و نه خود CSS؛ بنابراین در مسائل CSS در این جلسه ریز نمیشیم.خب از اونجا که تا الان با مسائل CSS هیچ آشنایی نداشتیم، بهتره اول بفهمیم CSS چیه و کارش چیه.یک صفحه وب شامل اجزای زیر می‌باشد:محتوا یا Content: این بخش وب بوسیله کد هایHTML ایجاد می‌شود.نمایش یا Presentation: این بخش وب بوسیله کد هایCSS ایجاد می‌شود.رفتار یا Behavior: این بخش وب بوسیله  JavaScript ایجاد می‌شود.خب ما با بخش دوم کار داریم یعنی CSS:زبان CSS چیست؟کدهای CSS دستوراتی است که توسط آنها میتوان تمامی خصوصیات ظاهری صفحه وب سایت را تعیین کرد. بنابراین شما توسط کدهای آسان  HTML صفحه وب سایت خود را پیاده سازی میکنید و با دستورات آسان CSS مشخص میکنید هر عنصر چه خصوصیات ظاهری داشته باشد. خصوصیاتی مانند رنگ عنصر، اندازه هر عنصر، رنگ و غیره . CSS مخفف کلمه Cascading Style Sheets و به معنی شیوه نامه آبشاری است. علت این نامگذاری نحوه اعمال دستورات به عناصر موجود در صفحه است. شما برای اعمال دستورات CSS به عناصر HTML می بایست از بیرونی ترین عنصر به ترتیب به عناصر داخلی آن دسترسی پیدا کنید که تداعی کننده حالت آبشاری است که بعد از استفاده از دستورات متوجه این موضوع خواهید شد.چرا باید از کدهای CSS استفاده کنیم؟کدهای CSS می‌تواند در بسیاری از کارهای تکراری، زمان طراحی و حجم کدهای سایت صرفه جویی کند. شما میتوانید یکبار خصوصیات ظاهری عناصر را در وب سایت توسط کدهای CSS مشخص کنید، سپس هر کجا در وب سایت از عنصر مورد نظر استفاده کردید، خصوصیات مشخص شده را به آن عنصر اعمال کنید.  خوب است بدانید گوگل در رتبه بندی وب سایت ها یعنی همان سئو، سرعت بارگذاری سایت و کیفیت کدها را نیز مدنظر قرار میدهد و وب سایت هایی را که سرعت بارگذاری آنها مناسب نباشد، کمتر به جستجو کنندگان معرفی خواهد کرد.نکته: در گذشته طراحی سایت و چیدمان عناصر صفحات وب، از طریق جدول انجام می‌گرفت. جداول مشکلات زیادی داشتند و به این خاطر با ظهور CSS کاملا منسوخ شدند. از جمله مشکلات جداول میتوان به حجم بالای پردازش آنها توسط مرورگر و در نتیجه کاهش سرعت اشاره کرد. این ویژگی منفی وب سایت هایی است که با جدول پیاده سازی می شدند. در مقابل در وب سایتی که با کدهای CSS پیاده سازی شود، عناصر یکی پس از دیگری در هنگام بارگزاری بر روی صفحه پدیدار میشوند و کاربر از لحظه درخواست میتواند مشغول مطالعه و مشاهده وب سایت تا زمانی که بارگزاری کامل شود، باشد.ساختار نحوی کدهای CSSدر این بخش ساختار کدهای CSS را یاد خواهید گرفت. در حال حاضر نیازی به درک نوع استایل اعمال شده نیست چراکه در بخش های بعدی بطور مفصل انواع استایل های عناصر را آموزش خواهم داد. بنابراین فقط به بخش های مورد استفاده در یک دستور CSS، نحوه جدا کردن دستورات ، جایگاه دستورات و بطور کلی ساختار دستور دقت نمایید.ساختار نحوی کدهای CSSانتخاب کننده یا Selector : این بخش نام عنصر HTML است که می خواهیم استایل مورد نظر را بر روی آن اعمال کنیم.تعریف یا Declaration : بخشی که در میان علامت {} نوشته می شود، بخش اعلان نام دارد و در این قسمت شما باید نام خاصیت مورد نظر که می خواهید اعمال شود و مقدار آن را تعیین کنید. در این مثال خاصیت رنگ برابر با مقدار آبی است و خاصیت سایز فونت برابر با مقدار 12 پیکسل است.برای اینکه دستورات خوانایی بیشتری داشته باشد و بتوانید با یک نگاه سریعا بخش مورد نظر خود را پیدا کنید، می توانید هر جفت خاصیت و مقدار را در یک خط بنویسیدp { color:red; text-align:center; }شناسه(id)ها و Classها در CSSهمانطور که در بخش ساختار نحوی دستورات مشاهده کردید، در بخش Selector عنصری که می‌خواهیم استایل روی آن اعمال شود را ذکر می‌کنیم. به عنوان نمونه در تمامی دستورات فوق عنصر مورد نظر پاراگراف بود و استایل های نوشته شده در براکت ها، بر روی همه پاراگراف های موجود در صفحه وب اعمال میشد. حالا اگر بخواهیم دستورات استایل مورد نظر فقط روی یک عنصر در صفحه وب و یا فقط گروهی از عناصر مورد نظر ما اعمال شود باید از id و Class استفاده کنیم.اعمال دستورات فقط بر روی یک عنصر واحد توسط idبرای این منظور ابتد باید به کدهای HTML رفته و برای عنصر مورد نظر صفت id را تعریف کنید. سپس به بخش دستورات CSS رفته و در بخش Selector ، صفت id که برای عنصر مورد نظر تعریف کرده اید را نوشته و یک نماد “#” قبل از آن اضافه کنیدمثلا چنانچه بخواهیم دستورات فقط بر روی یک پاراگراف خاص اعمال شود، ابتدا برای آن پاراگراف یک صفت id در کدهای HTML تعریف میکنیم:<p id=&quotpara1&quot>This is a Paragraph.<p>سپس در دستورات CSS در بخش Selector مقدار صفت id تعریف شده را همراه با یک علامت “#” می نویسیم:#para1 { text-align:center; color:red; }بدین ترتیب این دستورات فقط بر روی پاراگرافی اعمال میشوند که دارای id برابر با para1 است و سایر پاراگراف های موجود در صفحه از این دستورات تاثیرپذیر نیستند.نکته: هرگز صفت id را با عدد شروع نکنید چراکه در مرورگر فایرفاکس کار نخواهد کرد.اعمال دستورات بر روی یک گروه از عناصر توسط Classبرای این منظور ابتد باید به کدهای HTML رفته و برای همه عناصری که میخواهید خصوصیت های ظاهری یکسان داشته باشند صفت Class را تعریف کنید. سپس به بخش دستورات CSS رفته و در بخش Selector ، صفت Classکه برای عناصر مورد نظر تعریف کرده اید را نوشته و یک نماد “.” قبل از آن اضافه کنیدمثلا چنانچه بخواهیم دستورات بر روی تعدادی پاراگراف مورد نظر ما اعمال شود، ابتدا برای آن دسته از پاراگراف ها یک صفت Class مشترک در کدهای HTML تعریف میکنیم :<p class=&quotcneter&quot>This is a Paragraph.</p>سپس در دستورات CSS در بخش Selector مقدار صفت Class تعریف شده را همراه با یک علامت “.”  یا همان نقطه می‌نویسیم:.cneter { text-align:center; }بدین ترتیب این دستورات فقط بر روی پاراگراف هایی اعمال میشوند که دارای Class برابر با Center هستند و سایر پاراگراف های موجود در صفحه از این دستورات تاثیرپذیر نیستند.نکته: هرگز صفت Class را با عدد شروع نکنید چرا که فقط در مرورگر اینترنت اکسپلورر کار خواهد کرد.کدهای CSS را کجا بنویسیم؟برای نوشتن کدهایCSS در یک وب سایت سه روش وجود دارد:External Style Sheet : شیوه نامه خارجیInternal Style Sheet : شیوه نامه داخلیInline Style : شیوه درون خطیExternal style sheet یا شیوه نامه خارجیاستایل های خارجی فایل هایی هستند که بوسیله تگ <link> در صفحه وب قرار گرفته اند و بهترین راه برای تغییر دادن ظاهر یک سایت که از صفحات زیادی درست شده اند می باشند.در استایل های خارجی یک فایل را با پسوند css در اینترنت ذخیره (آپلود) می کنیم و آدرس آن را در تگ <link> می گذاریم. در آن فایل باید از سلکتور هایی استفاده کنیم که بتوان آنها را به کد ها و تگ های موجود در صفحه وصل کرد.توجه داشته باشید که همیشه باید تگ <link> درون تگ <head> قرار داشته باشد تا عملکردی مناسب داشته باشد. البته نه ازلحاظ کد نویسی بلکه از لحاظ سئو بودن.برنامه هایی مثل notepad، DreamWeaver، Visual Studio و هر برنامه ای که با آن احساس راحتی بیشتری دارید برای نوشتن این کدها قابل استفاده هستند. فراموش نکنید فایل های CSS فقط حاوی دستورات CSS هستند و هیچ کد و تگی از HTML در آنها نباید نوشته شود.یک نمونه کد که میتوانید آن را در یک notepadنوشته و با فرمت cssذخیره کنید .hr { color: sienna; } p { margin-left:20px; } body { background-image:url(&quotimages/back40.gif&quot); }Internal Style Sheet یا شیوه نامه ی داخلییک استایل داخلی زمانی باید استفاده شود که معمولا  استایل به یک تگ html وصل است اما بهتر است که همین استایل ها را نیز مانند استایل های داخلی به کار ببریم  چون کاربر با چند کلیک و رفتن به صفحات دیگر ،  نیازی نیست این استایل ها را دوباره دانلود کند.نحوه نوشتن این استایل ها مانند استایل خارجی می باشد ولی تنها فرق آن این است که به جای تگ <link> از تگ <style> استفاده می کنیم.کد زیر یک نمونه از استایل خارجی می باشد .<head> <style type=&quottext/css&quot> hr { color: sienna; } p { margin-left:20px; } body { background-image:url(&quotimages/back40.gif&quot); } </style> </head>Inline Style یا شیوه نامه ی درون خطیبا استفاده از این روش بسیاری از مزیت ها و ویژگی هایی که دستورات  CSS بخاطر آنها به وجود آمد را از دست میدهید. چراکه برای هر عنصر باید دستورات مختص آن را بنویسید و بدیهی است که برای تغییر باید به تک تک عناصر مراجعه کرده و آنها را تغییر دهید که بسیار زمانبر و گاهی همراه با خطا خواهد بود.برای استفاده از این روش باید به عنصر مورد نظر صفت Style را افزوده و سپس خاصیت ها و مقدارها را به این صفت اضافه کنید. در مثال زیر از همین روش برای تغییر رنگ متن پاراگراف استفاده میکنیم:<p style=&quotcolor:yellow;&quot>This is a paragraph.</p>استایل ها یا شیوه نامه های چندگانهشیوه نامه ها و یا استایل های چندگانه ، استایل هایی هستند که خاصیت یک تگ HTML را در کل صفحه برای تمام تگ های موجود در سلکتور (انتخابگر) را تعیین می کنند. برای مثال:h3 { color:red; text-align:left; font-size:8pt; }به طور کلی هنگامی یک دستور به هر سه روش برای یک عنصر HTML نوشته میشود، اولویت اجرای آنها به صورت زیر است:استایل های درون خطیشیوه نامه های داخلیشیوه نامه های خارجیپس استایل هایی که به صورت درون خطی و تنها برای یک عنصر خاص نوشته می شود، باعث می شود دستورات مربوط به آن عنصر در شیوه نامه داخلی که در تگ نوشته شده و همچنین دستورات مربوطه در شیوه نامه خارجی که با تگ به صفحه فعلی متصل شده نادیده گرفته شوند.نکته: چنانچه لینک یک شیوه نامه خارجی بعد از دستورات شیوه نامه داخلی در تگ قرار داده شود، در نهایت دستورات شیوه نامه خارجی اعمال خواهند شد.در ضمن یادتون باشه من از پست هایی که میزارم 10 خطش رو مجبورم و بقیش رو واسه دل خودم مینویسم. پس واقعا امیدوارم سرتون درد نیومده باشه و لذت برده باشید.نظراتتون بینهایت دلگرم کنندست. انتقاداتتون هم در درجه اول باعث بهبود شخصیت اجتماعیم و بعدش کارم و نوشته هام میشه، پس بازم بینهایت ممنونم.مثل همیشه نظراتونو می‌خونم و جواب می‌دم و اگه از نوشته‌هام خوشتون اومد او قلب تو خالیه‌ رو قرمز کنین برام و دنبالم کنید تا انگیزه داشته باشم بنویسم❤️شب و روزگار بر شما خوش.بدرود.ARiyou Jahan ‏12/01‏/2019‏ 10:34 ب.ظ ARiyou Jahan ARiyou Jahan Mon, 09 Dec 2019 17:40:48 +0330 https://virgool.io/@ARiyou2000/07-class-ids-rb9rdaz0mtzw به نام ایزد دانادر این پست آموزشی در مورد صفت عمومی کلاس و صفت خاص ID یا شناسه صحبت خواهیم کرد.امیدوارم این مطلب براتون مفید باشه و یادتون نره برای ما نظرات و انتقاداتتون رو ارسال کنید.اگر سوال یا هر حرفی دارید میتونید به ایمیل من به آدرس ARiyou.public@gmail.com و یا در شبکه های اجتماعی با شناسه (ID | User name) زیر منو پیدا کنیدTelegram, Twitter, Facebook & ... By : @ARiyou2000&lt;br/&gt;با تشکر از همه شما دوستان، آریو جهاندیگه بریم سر اصل مطلبهریک از تگ ها در HTML می توانند شامل Attribute های id و class شوندتعریف خصوصیت عمومی class در تگ های htmlبا استفاده از کلاس می توان به یک بخش از صفحه وب ، ویژگی هایی داد. از یک کلاس ( CLASS ) در html بارها می توان استفاده کرد.در حقیقت زمانی که نیاز داریم مجموعه ای از تگ ها همه شامل یک خصوصیت(یا خصوصیات) یکسان شوند از این ویژگی استفاده می کنیم.صفت عمومی id در HTMLصفت id صفتی است که ما با استفاده از آن میتوانیم یک آی دی یا یک شناسه منحصر بفرد را برای یک عنصر در یک صفحه وب مشخص نماییم و نکته ای که باید بهش توجه کنیم این است که اون آی دی باید در یک صفحه وب کاملا منحصر بفرد باشد.اینکه میگیم منحصر بفرد باشد یعنی اینکه نباید ۲ عنصر با ۱ آی دی مشترک در یک صفحه ی وب وجود داشته باشد. پس بطور کلی ما با استفاده از صفت id میتوانیم برای یک یا چند عنصر شناسه های منحصر بفردی را تعریف نماییم.تفاوت class و idخصوصیت class را گروه های مختلفی می توانیم تکرار کرده و با اسم های یکسان در گروه ها و تگ های مختلف به کار بریم.اما خصوصیت عمومی id تنها مخصوص یک عنصر و یا یک گروه تگ می باشد.لذا در خصوصیت id شما نمی توانید آن اسم را به تگ یا گروه تگ دیگری اختصاص دهید.استفاده از class ها و ID هااز کلاس ها و شناسه ها با توجه به ماهیت آنها برای تغییر یک یا چند تگ استفاده می شود.این استفاده در مبحث طراحی قالب سایت (css) و اجرای دستورات JavaScript استفاده می شود.به این نوع دستورات در آینده خواهیم رسید.راستی یادتون باشه من از پست هایی که میزارم 10 خطش رو مجبورم و بقیش رو واسه دل خودم مینویسم. پس واقعا امیدوارم سرتون درد نیومده باشه و لذت برده باشید.نظراتتون بینهایت دلگرم کنندست. انتقاداتتون هم در درجه اول باعث بهبود شخصیت اجتماعیم و بعدش کارم و نوشته هام میشه، پس بازم بینهایت ممنونم.مثل همیشه نظراتونو می‌خونم و جواب می‌دم و اگه از نوشته‌هام خوشتون اومد او قلب تو خالیه‌ رو قرمز کنین برام و دنبالم کنید تا انگیزه داشته باشم بنویسم❤️شب و روزگار بر شما خوش.بدرود.ARiyou Jahan ‏12/01‏/2019‏ 10:34 ب.ظ ARiyou Jahan ARiyou Jahan Mon, 09 Dec 2019 16:59:39 +0330 https://virgool.io/@ARiyou2000/07-block-inline-level-elements-xnttrvh7ayil به نام ایزد دانادر این پست آموزشی در مورد عناصر درون خطی و بلاکی صحبت خواهیم کرد.امیدوارم این مطلب براتون مفید باشه و یادتون نره برای ما نظرات و انتقاداتتون رو ارسال کنید.اگر سوال یا هر حرفی دارید میتونید به ایمیل من به آدرس ARiyou.public@gmail.com و یا در شبکه های اجتماعی با شناسه (ID | User name) زیر منو پیدا کنیدTelegram, Twitter, Facebook & ... By : @ARiyou2000با تشکر از همه شما دوستان، آریو جهاندیگه بریم سر اصل مطلبممکن است در هنگام کدنویسی html با این مشکل مواجه شوید که بعضی عناصر را با اینکه در خطی جداگانه نوشته اید ولی باز هم کنار دیگر الـمنت ها در مرورگر نمایش داده شوند. درست است که شما با تگ می توانید عنصر را در یک خط جدا قرار دهـید ولی همیشه نمی توان از این تگ برای جدا کردن عناصر استفاده کرد. عناصر html به دو گروه inline level و block level تقسیم می شوند که این ویژگی ها، نقش تعیین کننده ای در طراحی وب سایت شما دارند.با تشکر از پیشگامان صفر و یک فرسادتگ ها و یا عناصر Block Levelاین المان ها ( elements ) تمام فضای خط را به خود اختصاص می دهند و در صورتی که یک تگ در کنار آنها قرار گیرد آنرا به خط بعد منتقل می کنند .به عناصر و یا تگ هایی که یک خط را بصورت کامل اشغال کنند عناصر Block Level می گویند . این تگ ها بدون در نظر گرفتن محتوا و فضای اشغال شده به سایر تگ ها و المان ها اجازه نمی دهند که در کنار آنها قرار بگیرند و سایر تگ ها را به زیر خود منتقل خواهند کرد . ممکن است متن و یا محتوای درون این تگ ها چند حرف و یا یک خط کامل باشد .به عنوان مثال قطعه کد زیر را در نظر بگیرید:<!DOCTYPE html> <html> <head> <meta charst=&quotutf-8&quot/> <title>پیشگامان صفر و یک فرساد</title> </head> <body> <h1> این تگ بلاکی می باشد </h1> <p>این تگ نیز بلاکی می باشد </p> </body> </html>شاید برداشت شما این باشد که محتوای دو تگ h1,p باید در کنار هم قرار بگیرند. اما خروجی قطعه کد بالا در مرورگر به صورت زیر خواهد بود:تگ های inline-levelاین دسته از المان ها در html ، فقط محدوده مورد نظر خودشان را در یک خط اشغال می کنند. بطوریکه تگ ها و المان های دیگر می توانند در همان block (خط) در کنار آنها قرار بگیرند.این Element ها خطی اند و اگر یک تگ inline level دیگر را کنار آن ها بنویسیم کنار تگ قبلی ما قرار می گیرد و فضایی که لازم دارد را پر می کند و فضای اضافی اشغال نمی کند. در واقع فقط تا جایی که محتوا دارند را اشغال می کنند.به قطعه کد زیر توجه کنید که شامل چندین عنصر inline-level می باشد:<!DOCTYPE html> <html> <head> <meta charst=&quotutf-8&quot/> <title>پیشگامان صفر و یک فرساد</title> </head> <body> <span> تگ این لاین </span> <span> دومین تگ این لاین </span> <a href=&quothttps://pzof.ir &quot> طراحی سایت </a> </body> </html>خروجی قطعه کد بالا در مرورگر به این شکل خواهد بود:تگ های Inline level میتوانند درون تگ های inline level دیگر قرار گیرند.تگ های Inline level میتوانند درون تگ های Block level قرار گیرند.تگ های Block level نمیتوانند درون تگ های inline level قرار گیرند.تگ های Block level میتوانند درون تگ های Block level دیگر قرار گیرند.با css می توان level هر عنصر را تغیر داد ( درجلسات css با آن ٱشنا خواهید شد).دقت کنید که برای معتبر بودن کدهایتان در html5 و xhtml باید بدانید که کدام عناصر خطی اند و کدام عناصر بلاکی. چون مثلا در xhtml نمی توان عناصر بلاکی را درون عناصر خطی نوشت ولی در html5 استثناء وجود دارد.برای دیدن لیست عناصر inline level می تونید یه سر به وب سایتِ، سایت آموزی بزنید.در ضمن یادتون باشه من از پست هایی که میزارم 10 خطش رو مجبورم و بقیش رو واسه دل خودم مینویسم. پس واقعا امیدوارم سرتون درد نیومده باشه و لذت برده باشید.نظراتتون بینهایت دلگرم کنندست. انتقاداتتون هم در درجه اول باعث بهبود شخصیت اجتماعیم و بعدش کارم و نوشته هام میشه، پس بازم بینهایت ممنونم.مثل همیشه نظراتونو می‌خونم و جواب می‌دم و اگه از نوشته‌هام خوشتون اومد او قلب تو خالیه‌ رو قرمز کنین برام و دنبالم کنید تا انگیزه داشته باشم بنویسم❤️شب و روزگار بر شما خوش.بدرود.ARiyou Jahan ‏12/01‏/2019‏ 10:34 ب.ظ ARiyou Jahan ARiyou Jahan Mon, 09 Dec 2019 11:40:19 +0330 https://virgool.io/@ARiyou2000/06-form-and-inputs-eovvf6xyzfg9 به نام ایزد توانادر این پست آموزشی در مورد فرم ها و ورودی ها صحبت خواهیم کرد.امیدوارم این مطلب براتون مفید باشه و یادتون نره برای ما نظرات و انتقاداتتون رو ارسال کنید.اگر سوال یا هر حرفی دارید میتونید به ایمیل من به آدرس ARiyou.public@gmail.com و یا در شبکه های اجتماعی با شناسه (ID | User name) زیر منو پیدا کنیدTelegram, Twitter, Facebook & ... By : @ARiyou2000با تشکر از همه شما دوستان، آریو جهاندیگه بریم سر اصل مطلبدوستان تا این جای کار من سعی کردم به جای این که بگم چه کدی بزنید و از کدوم تگ ها استفاده کنید، بهتون بگم چطور کد بزنید. در واقع سعی کردم بهتون دیدگاه(روش فکر کردن) بدم و نه دید(فکر).خب دلیل هم این بود که مسائل بسیار ساده بودن و نیازی به گفتن من نبود. خودتون با یه سرچ ساده و استفاده از منابعی که پیوند همون صفحه می گفتم می تونید اونها رو هم بفهمید.ولی از این جای کار به بعد مسائل قراره چالشی بشن.مخصوصا وقتی وارد مباحث css بشیم. بنابراین ما باز هم سعی میکنیم به روش قدیمی و خوبمون ادامه بدیم، ولی کمی هم کد بهش اضافه میشه.خب اگه بخواهیم خودمونی بخواهیم یک فرم را تعریف کنیم میگوییم به مجموعه ای از چندین فیلد (متنی ، انتخابی و..) در یک صفحه (کاغذ ، وب و..) که قرار است توسط یک شخص تکمیل شود را فرم میگوییم.که باز البته فرم ها میتونن نوع های مختلفی داشته باشند، مثلا یک فرم تماس با یک شخص، فرم ورود به یک سیستم و یا فرم ثبت نام در یک سیستم و دیگر مواردی که ممکن است تا به الان با آنها روبرو شده باشید.خب در صفحات اینترنتی هم فرم ها وجود دارند و ما میتونیم از آنها استفاده های بسیار زیادی را داشته باشیم، بفرض مثال یک فرم برای ثبت نام کاربران در وبسایت مان یا یک فرم برای ارسال پیام و دیگر مواردی که میتوانیم در یک صفحه ی وب از فرم ها استفاده نماییم.پس بطور کلی یک فرم برای جمع آوری اطلاعات از کاربران و همچنین ارسال این اطلاعات به پایگاه داده یک وبسایت می باشد، که امروزه تقریبا در هر وبسایتی یک فرم همانند فرم ورود یا ثبت نام وجود دارد.با تشکر از سایت Free-Learn برای مطالب عالیشون.کار با فرم ها یا Forms در HTMLبطور کلی در HTML ما با استفاده از تگ <form> میتوانیم یک فرم را ایجاد نماییم، سپس در این فرم ما باید از تگ ها یا عناصر مخصوص به فرم ها استفاده نماییم که ان شاالله در بخش های بعدی با تمامی تگ هایی که میتوان در فرم ها استفاده کرد آشنا خواهید شد.شکل کلی برای استفاده از تگ <form> در HTML بصورت زیر می باشد :<form> Iتگ های فرم در اینجا قرار میگیرند</form>خب گفتیم کار فرم ها اینه که توسط کاربر تکمیل شن. اما چطور ورودی بگیریم؟برای گرفتن ورودی از کاربر عنصری تحت نام input در html طراحی شده که در ادامه اون رو هم برسی می کینم.تگ Input در HTMLتگ input یا ورودی ( یا اینپوت ) تگی است که در تگ Form مورد استفاده قرار میگیرد و دارای طرح (نوع) های مختلفی می باشد که با استفاده از آن میتوان داده ها (اطلاعات) را از کاربر دریافت کرد.تگ Input دارای نوع های مختلفی می باشد، که این نوع ها را میتوان با استفاده از صفت type مشخص نمود.تعریف یک فرم در حالت کلی به شکل زیر است.<input type=&quotیکی از انواع با توجه به لیست&quot>گرچه با ننوشتن type هم یک input ساده یه نمایش در می آید، اما این کار کاملا اشتباه است و هرگز نباید انجام شود.انواع ورودی یا type های input به شرح ذیل است:color, checkbox, button, email, datetime-local, date, image, hidden, file, password, number, month, reset, range, radio, tel, submit, search, url, time, text, weekچندین مثال از نحوه استفاده از نوع های موجود در جدول بالا.<input type=&quotbutton&quot><input type=&quotcolor&quot><input type=&quotdate&quot><input type=&quotemail&quot><input type=&quotfile&quot><input type=&quothidden&quot><input type=&quotimage&quot><input type=&quotpassword&quot><input type=&quotradio&quot><input type=&quotsubmit&quot><input type=&quottext&quot><input type=&quoturl&quot>خب حالا بیایید با هم یکم عمیق تر به هر مورد نگاه کنیم و کار هر کدوم رو بگیم.عنصر ورودی از نوع Textاولین عنصر ورودی که میخواهیم باهاش آشنا شویم عنصر ورودی از نوع متن می باشد که البته در بخش های قبلی و در مثال هایی که بنده ارائه دادم ما به وضوح با این عنصر ورودی کار کردیم و نحوه استفاده از آن را نیز یاد گرفتیم.این عنصر ورودی از نوع متن تنها میتواند یک فیلد متنی با قابلیت دریافت یک خط متن از کاربر را ایجاد نماید و یکی از پراستفاده ترین و مهمترین عنصر ورودی در فرم ها می باشد.<input type="text">امتحان کنیدعنصر ورودی از نوع Passwordعنصر ورودی از نوع پسورد یا رمز عبور یکی دیگر از عناصر ورودی در فرم ها می باشد که با استفاده از این عنصر ما میتوانیم یک فیلد از نوع پسورد را ایجاد نماییم.متنی که درون فیلد پسورد قرار میگیرد قابل مشاهده نیست و معمولا بصورت دایره های توپُر نمایش داده می شوند.<input type="password">امتحان کنیدعنصر ورودی از نوع Submitعنصر ورودی سابمیت نیز یکی دیگر از عناصر ورودی در فرم ها می باشد، که در واقع این عنصر یک دکمه می باشد جهت ارسال اطلاعات وارد شده در فرم ها به یک فایل و.. در سرور سایت مقصد.<input type="submit" value="ارسال">امتحان کنیدعنصر ورودی از نوع Resetهمانطور که از اسم این عنصر ورودی هم مشخصه ما با استفاده از آن میتوانیم یک فرم را ریست نماییم، این عنصر نیز همانند عنصر Submit می باشد یعنی در واقع یک دکمه می باشد که با زدن آن تمامی اطلاعات وارد شده در فرم ها پاک می شوند.<input type="reset" value="پاک کردن">امتحان کنیدعنصر ورودی از نوع Radioدکمه های رادیویی دکمه هایی هستند که کاربر فقط و فقط قادر است یکی از گزینه ها را انتخاب نماید و امکان انتخاب بیش از یک گزینه در این نوع عناصر وجود ندارد.<input type="radio">امتحان کنیدعنصر ورودی از نوع Checkboxبرخلاف دکمه های رادیویی ما یک عنصر ورودی داریم به اسم چک باکس یا Checkbox که کاربر قادر است بیش از چند گزینه را در این نوع عناصر انتخاب نماید.<input type="checkbox">امتحان کنیدعنصر ورودی از نوع Buttonیک عنصر ورودی از نوع دکمه با قابلیت کلیک شدن توسط کاربر می باشد که ما میتوانیم در این نوع دکمه ها یک محتوا (تصویر،متن و..) را قرار دهیم و در واقع تفاوت اصلی این نوع دکمه با دکمه های Submit در همین است.<input type="button" ="alert('سلام خوبی؟')" value="کلیک کن">امتحان کنیدعنصر ورودی از نوع Colorبا استفاده از این عنصر ما میتوانیم یک باکس رنگ را برای کاربر به نمایش دربیاوریم تا کاربر بتواند رنگ دلخواهش را انتخاب نماید.<input type="color">امتحان کنیدعنصر ورودی از نوع Dateبا استفاده از این عنصر میتوان یک مقدار بصورت تاریخ (سال/ماه/روز) را دریافت کرد.<input type="date">امتحان کنیدعنصر ورودی از نوع Datetime-localبا استفاده از این عنصر میتوان یک تاریخ (سال/ماه/روز) و زمان (ساعت/دقیقه) را بهمراه منطقه زمانی از کاربر دریافت کرد.<input type="datetime-local">امتحان کنیدعنصر ورودی از نوع Emailبا استفاده از این عنصر میتوان یک مقدار بصورت ایمیل را از کاربر دریافت کرد.اگر مقدار وارد شده ایمیل نباشد بعضی از مرورگرها پیغام هشدار میدهند و از ارسال اطلاعات خودداری مینمایند.<input type="email">امتحان کنیدعنصر ورودی از نوع Monthبا استفاده از این عنصر میتوان مقدار ماه و سال را از کاربر دریافت کرد.<input type="month">امتحان کنیدعنصر ورودی از نوع Numberبا استفاده از این عنصر میتوان یک مقدار بصورت عددی را از کاربر دریافت کرد و همچنین از صفات زیر میتوان در این عنصر استفاده کرد:min : کمترین مقداری که میتوان وارد کردmax : بیشترین مقداری که میتوان وارد کردvalue : یک مقدار از قبل تعریف شده را مشخص میکندstep : فاصله ی بین حرکت اعداد را مشخص میکند<input type="number" min="1" max="10" step="3" value="1">امتحان کنیدعنصر ورودی از نوع Rangeبا استفاده از این عنصر میتوان یک مقدار از طریق یک میله ی لغزان را از کاربر دریافت کرد و همچنین از صفات زیر میتوان در این عنصر استفاده کرد:min : کمترین مقداری که میتوان وارد کردmax : بیشترین مقداری که میتوان وارد کردvalue : یک مقدار از قبل تعریف شده را مشخص میکندstep : فاصله ی بین حرکت اعداد را مشخص میکند<input type="range" min="0" max="50" step="5" value="25">امتحان کنیدعنصر ورودی از نوع Searchبا استفاده از این عنصر میتوان یک فیلد متنی جستجوگر را ایجاد کرد.<input type="search">امتحان کنیدعنصر ورودی از نوع Telبا استفاده از این عنصر میتوان یک مقدار بصورت شماره تلفن را از کاربر دریافت کرد.<input type="tel">امتحان کنیدعنصر ورودی از نوع Timeبا استفاده از این عنصر میتوان یک مقدار بصورت زمان را از کاربر دریافت کرد.<input type="time">امتحان کنیدعنصر ورودی از نوع URLبا استفاده از این عنصر میتوان یک مقدار بصورت آدرس اینترنتی دریافت کرد.توجه داشته باشید که باید در ابتدای آدرس حتما //:http وجود داشته باشد.<input type="url">امتحان کنیدعنصر ورودی از نوع Weekبا استفاده از این عنصر میتوان یک مقدار بصورت هفته در سال را از کاربر دریافت کرد.<input type="week">امتحان کنیدعنصر ورودی از نوع Fileبا استفاده از این عنصر میتوان امکان آپلود کردن فایل ها را توسط کاربران، ایجاد کرد.<input type="file">امتحان کنیدعنصر ورودی از نوع Imageبا استفاده از این عنصر میتوان یک دکمه تصویری، دکمه ای که از تصویر ایجاد شده است را ایجاد کرد.<input type="image" src="image.jpg">امتحان کنیدعنصر ورودی از نوع Hiddenبا استفاده از این عنصر میتوان یک فیلد مخفی را ایجاد کرد، به گونه ای که این فیلد از دید کاربر مخفی باشد.<input type="hidden">امتحان کنیدتا اینجای کار با فرم ها آشنا شدیم.از اونجا که فرم ها باید توسط کاربر تکمیل شن، با عناصر اصلی فرم ها یعنی انواع input یا ورودی هم آشنا شدیم و تا حد مورد نیاز برسی شون کردیم.حالا وقت اونه که یه فرم ساده طراحی کنیم.برای مثال دستورات زیر یک فرم را ایجاد میکنند که برای مشاهده خروجی دستورات زیر لطفا بروی دکمه (امتحان کنید) کلیک نمایید.<form>name : <br><input type=&quottext&quot name=&quotfirstname&quot value=&quotSadegh&quot><br>family : <br><input type=&quottext&quot name=&quotlastname&quot value=&quotAsadi&quot><br><br><input type=&quotsubmit&quot value=&quotارسال&quot></form>امتحان کنیداگر بروی دکمه امتحان کنید کلیک نمایید، شما در خروجی شکل کلی یک فرم را میتوانید مشاهده نمایید ،یک فرم ساده با ۲ دکمه و ۲ باکس متنی برای دریافت و ارسال داده ها .بعدها اگه درخواست یا یاداوری بود به این پست متدهای فرم و صفاتش هم اضافه میشه. اما فعلا می تونید این مباحث رو در Free-Learn دنبال کنید.راستی فراموش نکنید من از پست هایی که میزارم 10 خطش رو مجبورم و بقیش رو واسه دل خودم مینویسم. پس واقعا امیدوارم سرتون درد نیومده باشه و لذت برده باشید.نظراتتون بینهایت دلگرم کنندست. انتقاداتتون هم در درجه اول باعث بهبود شخصیت اجتماعیم و بعدش کارم و نوشته هام میشه، پس بازم بینهایت ممنونم.مثل همیشه نظراتونو می‌خونم و جواب می‌دم و اگه از نوشته‌هام خوشتون اومد او قلب تو خالیه‌ رو قرمز کنین برام و دنبالم کنید تا انگیزه داشته باشم بنویسم❤️شب و روزگار بر شما خوش.بدرود.ARiyou Jahan ‏12/01‏/2019‏ 10:34 ب.ظ ARiyou Jahan ARiyou Jahan Mon, 09 Dec 2019 10:29:56 +0330 https://virgool.io/@ARiyou2000/browser-and-browsers-war-qndcxqnhefr1 به نام ایزد دانادر این پست آموزشی در مورد مرورگر ها و داستان معروفی با عنوان جنگ مرورگر ها صحبت خواهیم کرد.امیدوارم این مطلب براتون مفید باشه و یادتون نره برای ما نظرات و انتقاداتتون رو ارسال کنید.اگر سوال یا ه حرفی دارید میتونید به ایمیل من به آدرس ARiyou.public@gmail.com و یا در شبکه های اجتماعی با شناسه (ID | User name) زیر منو پیدا کنیدTelegram, Twitter, Facebook & ... By : @ARiyou2000با تشکر از همه شما دوستان، آریو جهاندیگه بریم سر اصل مطلبتا این جای کار خیلی وقت ها به مرورگر ها و تکنولوژی خفن ساخت اونها اشاره کردیم، ولی به اونها خیلی نپرداختیم. خب می تونم از بیام دل و رودش رو بریزیم بیرون و پروسه های تخصصی مثل این که چطور کار می کنن ولی حال این کارو ندارم. تازه حال به کنار سوادشم ندارم.کار مرورگرها دریافت، نمایش و مرور اطلاعات از وب هستش.اولین مرورگر وب در سال ۱۹۹۰ و توسط Tim Berners-Lee اختراع شد به نام مرورگر WorldWideWeb که نام آن بعدها به Nexus تغییر کرد. در سال ۱۹۹۳، Mark Andreessen مخترع Netscape دست به نو آوری و ایجاد تغییراتی در مرورگرها زد، او با انتشار Mosaic (بعدها Netscape) اولین مرورگر محبوب در سراسر جهان که استفاده از وب جهان گستر را آسان‌تر و دسترسی کاربران دیگر سیستم عامل‌ها به آن را نیز ممکن ساخت و همچنین اولین مرورگر گرافیکی جهان بود که انقلابی در روش استفاده از وب را به وجود آورد. او بعدها شرکت خود را با نام Netscape افتتاح کرد و در سال ۱۹۹۴ مرورگر Netscape Navigator را عرضه کرد که سریعاً به محبوب‌ترین مرورگر وب جهان تبدیل شد. در سال ۱۹۹۵ مایکروسافت با عرضه Internet Explorer نخستین قدم را در رقابت مرورگرها برداشت و در سال ۲۰۰۲ با ۹۵٪ تعداد کاربر تبدیل به محبوب‌ترین مرورگر جهان شد.در سال‌های بعد با عرضه دیگر مرورگرها این رقابت‌ها جدی تر شد و کارزاری با نام جنگ مرورگرها شکل گرفت.منم ترجیه میدم به همین داستان بپردازم پس یکی بود یکی نبود:فعلا بیاید یه تعریف رسمی از این داستان داشته باشیم چون الان تو دانشگاهم و سر کلاس.طبق تعریف ویکی پدیا:جنگ مرورگرها(به انگلیسی: Browser wars) اصطلاحی است که به رقابت بر سر تسلط میزان سهم بازار کاربران جهانی مرورگرهای وب اشاره دارد.این اصطلاح معمولاً برای دو رقابت و ظهور و افول بزرگ تاریخ مرورگرها به کار می‌رود:۱)-نخست برتری مرورگر شرکت مایکروسافت یعنی اینترنت اکسپلورر بر مرورگر نت‌اسکیپ در دهه ۹۰ میلادی در رقابت بازار تعداد کاربران استفاده کننده.۲)- دومین رقابت مربوط به کاهش سهم بازار اینترنت اکسپلورر (آغاز در سال ۲۰۰۳ میلادی) در رقابت با مرورگرهای تازه عرضه شده‌ای چون فایرفاکس ، سافاری ، اپرا و گوگل کروم است.در سالهای اخیر پس از معرفی ویژگی‌هایی چون اچ‌تی‌ام‌ال۵ و شیوه‌نامهٔ آبشاری و گسترش استفاده از مرورگرهای تلفن‌های هوشمند ابعاد جدیدی از این نبرد رقابتی ایجاد شده است.سهم استفاده از همه مرورگرها در خرداد ماه 1398در ضمن یادتون باشه من از پست هایی که میزارم 10 خطش رو مجبورم و بقیش رو واسه دل خودم مینویسم. پس واقعا امیدوارم سرتون درد نیومده باشه و لذت برده باشید.نظراتتون بینهایت دلگرم کنندست. انتقاداتتون هم در درجه اول باعث بهبود شخصیت اجتماعیم و بعدش کارم و نوشته هام میشه، پس بازم بینهایت ممنونم.مثل همیشه نظراتونو می‌خونم و جواب می‌دم و اگه از نوشته‌هام خوشتون اومد او قلب تو خالیه‌ رو قرمز کنین برام و دنبالم کنید تا انگیزه داشته باشم بنویسم❤️شب و روزگار بر شما خوش.بدرود.ARiyou Jahan ‏12/03‏/2019‏ 10:48 ق.ظ ARiyou Jahan ARiyou Jahan Fri, 06 Dec 2019 11:07:45 +0330 https://virgool.io/@ARiyou2000/running-server-on-our-local-desktop-wnhjix9qqr4s به نام ایزد دانادر این پست آموزشی در مورد راه اندازی سرور روی سیستم خانگی خودمان صحبت خواهیم کرد.با اين كار مي توانيد از شر انتخاب ميزبان يا پرداخت هزينه هاي ماهيانه راحت شده، به سادگي وب سايت خود را راهاندازي كنيد، با دوستانتان به صورت Online بازي كرده، از طريق سرور FTP شخصي خود، فايلهايي را در دسترس ديگران قرار داده و از بسياري امكانات ديگر نيز بهره مند شويد.امیدوارم این مطلب براتون مفید باشه و یادتون نره برای ما نظرات و انتقاداتتون رو ارسال کنید.اگر سوال یا ه حرفی دارید میتونید به ایمیل من به آدرس ARiyou.public@gmail.com و یا در شبکه های اجتماعی با شناسه (ID | User name) زیر منو پیدا کنیدTelegram, Twitter, Facebook & ... By : @ARiyou2000با تشکر از همه شما دوستان، آریو جهاندیگه بریم سر اصل مطلببیاید با این موضوع شروع کنیم که کار لوکال هاست چیه و اصلا چرا از لوکال هاست استفاده کنیم؟ببینید ما برای کارهای مختلف از جمله تغییرات در پوسته سایت، آزمایش اسکریپت و سیستم های مختلف، استفاده از زبان های برنامه نویسی تحت وب و… به هاست نیاز داریم.حالا دوتا راه پیش روی ما هست. اولی استفاده از هاست های آنلاینه. اینطوری برنامه رو توی هاست قرار میدیم و از تمام دستگاه ها به اون دسترسی داریم.خب این روش معایب مهمی داره، از جمله هزینه هاستینگ و این که برای فاز تست حتما باید آنلاین باشیم؛ اگر سرویس دهنده ما هنگام انجام پروژه به مشکل بخوره، پروژه ما هم متوقف میشه.اگه دارید به دسترسی سایت از همه جا فکر میکنید، خب باید بگم ما الان اول راهیم و نیازی به این مورد هم نداریم.راه دوم و منطقی اینه که ما یک لوکال هاست ایجاد کنیم. لوکال هاست همون سروریه که روی دستگاه خود شما اجرا میشه و نه بستر جهانی وب (البته این حرفم بعضی جاهاش یه ایراد کوچیکی داره که به موقع اصلاحش میکنیم).لوکال هاست به معنی میزبان محلی است. در واقع هارد کامپیوتر شما به عنوان فضای هاست سرور و دامنه لوکال هاست به عنوان دامنه اینترنتی عمل میکند با این تفاوت که وب سایت تنها بر روی کامپیوتر شما قابل نمایش هست. لوکال هاست دارای پایگاه داده mysql بوده و قابلیت اجرای تمامی فایل های ASP و PHP را دارد. بنابراین مانند یک هاست و دامنه اینترنتی میتوانید بر روی کامپیوتر خودتان ، وب سایت را طرحی و تست نمایید.پاسخگویی به درخواست‌های مشاهده صفحات وب سایت توسط بازدیدکنندگان ، توسط نرم‌افزارهایی مانند Apache و IIS انجام میشود. این نرم‌افزارها، به صورت سرویس هایی بر روی سیستم عامل میشوند.همانطور که این نرم افزارها میتوانند بر روی سرور اینترنتی نصب شوند، امکان نصب آنها بر روی کامپیوتر شخصی نیز وجود دارد. به دلیل دشوار بودن نصب و تنظیم این نرم‌افزارها و نیاز به نرم‌افزارهای جانبی مانند ابزارهای پایگاه داده، ابزار FTP ، ابزارهای Mail Server و افزونه‌های مختلف روی هر یک از این نرم‌افزارها، بسته‌هایی که کار نصب گروهی تمامی پیش‌نیازهای ایجاد یک سرور محلی را به انجام می‌رسانند، تولید شده‌اند.دسترسی به سرور محلی یا لوکال هاستدر سرورهای اینترنتی، نحوه دسترسی به وب سایت با استفاده از نام دامنه و یا آدرس آی پی میباشد. با نصب نرم افزارهای لوکال هاست بر روی کامپیوتر شخصی ، سرور محلی با آدرس http://localhost  و یا http://127.0.0.1 قابل دسترس خواهد بود. امکان تخصیص نام دامنه به سرور محلی نیز با انجام تنظیماتی امکانپذیر است.انواع هاست محلی یا  Localhostبرای ایجاد یک سرور محلی بر روی کامپیوتر شخصی خود ، نرم‌افزارهایی مانند  Apache،IIS  و Tomcat برای میزبانی سرورهایی بر پایه ‌ php، asp و java  مورد نیاز است. بسته به اینکه وب سایت با چه زبانی برنامه نویسی شده باشد ، لازم است تا یکی از این نرم افزارها بر روی سیستم عامل کامپیوتر شخصی شما به عنوان یک میزبان محلی نصب شود.نرم افزارهای لوکال هاستنرم افزار های متعددی با اهداف مختلف در این زمینه ایجاد شده اند که از جمله اونها میشه به MAMP - Mac, Apache, Mysql, and PHPWAMP - Windows, Apache, Mysql, and PHPLAMP - Linux, Apache, Mysql, and PHPXAMPP - Cross-platform, Apache, MariaDB(Mysql), PHP and Perlاما این ها در واقع یک نرم افزار هستند که برای پلتفرم های مختلف طراحی شدن.منظور ما از متفاوت بودن 2 نرم افزار تغییر لوگوی نرم افزار یا ظاهرش نیست، بلکه منظور تغییرات در مهندسی دو نرم افزاره. با این تعریف نرم افزار های مختلفی که در این زمینه ارائه شدن شامل:Easy PHP در بین نرم افزارهای لوکال ساده ترین ظاهر را داراست. اما این سادگی چیزی از امکانات آن کم نمی کند. بهترین گزینه برای تازه کاران است.XAMPPتنظیمات بیشتری نسبت به Easy PHP دارد. رابط کاربری نیز در حد متوسط است.Wamp Serverاین نرم افزار تنظیمات بیشتری دارد اما رابط کاربری آن چنگی به دل نمی زد و به نوعی در سطح متوسط رو به پایین است.AMPPSیکی از کاملترین و بهترین نرم افزارهای موجود برای راه اندازی میزبان مجازی بر روی کامپیوتر شماست. غیر از مشترکات موجود، می توان وجود ابزارها و دسترسی های مختلف برای کاربر و همچنین رابط کاربری زیبا و روان آن را نقاط مثبت و وجه تمایز با دیگر نرم افزارها دانست.اشاره کرد. در این پست من به معرفی نرم افزار XAMPP البته به استناد به سایت SabzWP و معرفی AMPPS به استناد سایت zooroofchi میپردازم.معرفی نرم افزار xamppاین نرم افزار که توسط تیم Apache Friends طراحی شده است، متشکل از سرور Apache، پایگاه داده MariaDB و زبان های برنامه نویسی PHP و Perl است. از آن جایی که اکثر راه اندازی های واقعی وب سرور از همان اجزای XAMPP استفاده می کنند، از یک سرور تست محلی به یک سرور زنده امکان پذیر می شود.شما می توانید این نرم افزار را به راحتی بر روی لپ تاپ یا سیستم خانگی خود نصب کنید و قبل از آپلود آن به سرور وب یا رایانه از راه دور، کلاینت یا وب سایت خود را آزمایش کنید. نرم افزار سرور XAMPP به شما محیط مناسب برای آزمایش پروژه های MYSQL، PHP، Apache و Perl را در رایانه محلی می دهد. کراس پلت فرم بدین معناست که می تواند بر روی هر کامپیوتر با هر سیستم عامل اجرا شود.فرایند نصب نرم افزار XAMPP بسیار ساده و سریع است. هنگامی که XAMPP بر روی کامپیوتر محلی شما نصب می شود، به عنوان یک سرور محلی یا هایت محلی عمل می کند. شما می توانید وب سایت ها را قبل از ارسال آن به سرور وب از راه دور تست کنید. این نرم افزار سرور XAMPP به شما محیطی مناسب برای آزمایش برنامه های MYSQL، PHP، Apache و Perl را در یک کامپیوتر محلی می دهد.امکانات نرم افزار XAMPPهنگامی که XAMPP بر روی سیستم خانگی شما نصب می شود، شما می توانید هر کدام از ماژول ها را تنها با یک کلیک راه اندازی و یا متوقف کنید. به عنوان مثال برای تست نرم افزار های PHP بر روی سیستم تان (وردپرس هم یک نرم افزار بر پایه php است)، تنها کافی است گزینه های Apache و MySQL را فعال کنید. این کار به شما اجازه می دهد بتوانیم برنامه های PHP را در سیستم تان تست و راه اندازی کنید.همان طور که میدانید وردپرس نیز از زبان برنامه نویسی php و پایگاه داده mysql استفاده می کند که این موضوع باعث میشود بتوانیم به راحتی از این نرم افزار استفاده کنیم.ویژگی هایی که این نرم افزار به شما خواهد داد عبارتند از:ایجاد وب سایت جهت تست و رفع باگایجاد وب سایت با نام دامنه واقعی برای استفاده در پروژه (تنظیم باید شود)ایجاد بی نهایت وب سایت با نام دامنه واقعی (تنظیم باید شود)البته نگران تنظیمات نباشید. ما تمام تنظیماتی که نیاز دارید انجام دهید را به شما خواهیم گفت.به عنوان یک توسعه دهنده برنامه، شما باید هر بار که ممکن است برنامه ها را آزمایش کنید تا اشکالات را پیدا کرده و آن ها را برطرف کنید. اگر شما در محیطی محلی مانند XAMPP آزمایش می کنید، فرایند توسعه شما سریع تر خواهند بود.آزمایش برنامه ها به صورت زنده بسیار مشکل خواهد بود و برای بازدید کنندگان شما نیز قابل مشاهده است. اما در حالی که در XAMPP شما به راحتی می توانید تست و به روز رسانی را در localhost خود را انجام دهید. در هر تعداد دفعات مختلف، شما می توانید در XAMPP به روز رسانی و تست کنید. پس از تکمیل، می توانید این فایل های به روز شده جدید را به سرورخود انتقال دهید.امکانات نرم افزار Amppsاین نرم افزار امکانات فراوانی دارد که قطعا نمی توان در این مطلب به همه ی آنها اشاره کرد. اما می توان برخی از امکانات آن را در این مطلب برجسته کرد. در قسمت Home این نرم افزار شما با امکانات و تنظیمات یک سرور کامل روبرو هستید. از جمله: مدیریت فایل ها، مدیریت FTP، PHP MyAdmin، مدیریت دامین ها، مرکز امنیت، پیکربندی Apache  و PHP، مدیریت ایمیل و…یکی دیگر از امکاناتی که بسیار جلب توجه می کند وجود لیست های دسته بندی شده از اسکریپت ها و سیستم های مختلف مدیریت محتواست که هرکدام را به صورت جداگانه و طبق رنک امتیازی معرفی می کند. شما می توانید هر کدام از این اسکریپت ها را به صورت مستقیم بر روی کامپیوتر خود بارگذاری و نصب کنید.این امکانات همراه با دیگر تنظیمات، Ampps را به یکی از محبوب ترین و بهترین نرم افزارهای لوکال تبدیل کرده است. شما می توانید آن را دانلود و نصب کرده تا با امکانات آن بیشتر آشنا شوید.راستی یادتون باشه من از پست هایی که میزارم 10 خطش رو مجبورم و بقیش رو واسه دل خودم مینویسم. پس واقعا امیدوارم سرتون درد نیومده باشه و لذت برده باشید.نظراتتون بینهایت دلگرم کنندست. انتقاداتتون هم در درجه اول باعث بهبود شخصیت اجتماعیم و بعدش کارم و نوشته هام میشه، پس بازم بینهایت ممنونم.مثل همیشه نظراتونو می‌خونم و جواب می‌دم و اگه از نوشته‌هام خوشتون اومد او قلب تو خالیه‌ رو قرمز کنین برام و دنبالم کنید تا انگیزه داشته باشم بنویسم❤️مثل خیلی دیگه از پست هام، این پست هم بعدا کامل میشه. تا اون موقع شب و روزگار بر شما خوش.بدرود.ARiyou Jahan ‏12/04‏/2019‏ 07:17 ق.ظ ARiyou Jahan ARiyou Jahan Fri, 06 Dec 2019 08:18:16 +0330 https://virgool.io/@ARiyou2000/05-attributes-in-html-hahw8wu9svce به نام ایزد دانادر این پست آموزشی در مورد Attributes یا همون صفات صحبت خواهیم کرد.امیدوارم این مطلب براتون مفید باشه و یادتون نره برای ما نظرات و انتقاداتتون رو ارسال کنید.اگر سوال یا ه حرفی دارید میتونید به ایمیل من به آدرس ARiyou.public@gmail.com و یا در شبکه های اجتماعی با شناسه (ID | User name) زیر منو پیدا کنیدTelegram, Twitter, Facebook & ... By : @ARiyou2000با تشکر از همه شما دوستان، آریو جهاندیگه بریم سر اصل مطلببرای شروع بیاید نگاهی به مرجع اصلیمون یعنی W3Schools بیندازیم. مرجع میگه :تمام عناصر HTML می توانند attributes داشته باشندصفات یا همان attribute ها امکانات بیشتری به یک تگ یا عنصر می دهندصفات یا همان attribute ها همیشه در تگ شروع نوشته می شوندصفات یا همان attribute ها شامل نام و مقدار هستند مانند : "name = "valueخب همون طور که از متن بالا مشخصه صفات یا همان attribute ها کارشون مثل شخصی کردن یه موضوع کلیه.فرض کنید شما کادری تعریف می کنید که توش یه ورودی میگیرید.خب تو این کادر شما هر چیزی می تونید وارد کنید.خب اگه بخواهم این کادر فقط عدد قبول کنه(مثل شماره ملی) یا فقط حروف(مثل نام و فامیل) یا مثلا با فرمت خاصی ورودی قبول کنه (مثل آدرس ایمیل که هم شامل عدد و هم حرف اما حتما @ نیاز داره) خب اونوقت چه کار کنیم؟اینجاست که صفات یکی از نقش های خودشونو به زیبایی اجرا می کنن.راستشو بخواهید در حال حاظر حال ندارم بیشتر از این بنویسم و این پست رو بعدا اگه یادم موند کامل میکنم.در ضمن یادتون باشه من از پست هایی که میزارم 10 خطش رو مجبورم و بقیش رو واسه دل خودم مینویسم. پس واقعا امیدوارم سرتون درد نیومده باشه و لذت برده باشید.نظراتتون بینهایت دلگرم کنندست. انتقاداتتون هم در درجه اول باعث بهبود شخصیت اجتماعیم و بعدش کارم و نوشته هام میشه، پس بازم بینهایت ممنونم.مثل همیشه نظراتونو می‌خونم و جواب می‌دم و اگه از نوشته‌هام خوشتون اومد او قلب تو خالیه‌ رو قرمز کنین برام و دنبالم کنید تا انگیزه داشته باشم بنویسم❤️شب و روزگار بر شما خوش.بدرود.ARiyou Jahan ‏12/03‏/2019‏ 09:34 ب.ظ ARiyou Jahan ARiyou Jahan Thu, 05 Dec 2019 21:44:17 +0330 https://virgool.io/@ARiyou2000/4-meta-tags-search-engines-u0bv2finclbf به نام ایزد دانادر این پست آموزشی در مورد Meta Tag ها و کمکی ده اونها به مطرح شدن ما در موتور های جست و جو میکنن صحبت خواهیم کرد.این که اصلا چی هستن و چه کمکی می تونن به ما بکنن.امیدوارم این مطلب براتون مفید باشه و یادتون نره برای ما نظرات و انتقاداتتون رو ارسال کنید.اگر سوال یا ه حرفی دارید میتونید به ایمیل من به آدرس ARiyou.public@gmail.com و یا در شبکه های اجتماعی با شناسه (ID | User name) زیر منو پیدا کنیدTelegram, Twitter, Facebook & ... By : @ARiyou2000با تشکر از همه شما دوستان، آریو جهاندیگه بریم سر اصل مطلببا مفهوم تگ در زبان HTML و تگ های اصلی و کلیدی در پست های پیشین با هم آشنا شدیم، اما الان می خواهیم شکل خاص تری از تگ ها رو که به خودی خود هیچ تاثیر و جلوه ظاهری در خروجی کدها ندارند اما حاوی اطلاعاتی در خصوص نوع صفحات وب و نحوه پردازش آنها هستند که این اطلاعات برای مرورگر قابل فهم و استفاده است. متاتگ (Meta Tag) بر خلاف تگ های معمولی (که در قسمت body نوشته می شوند) در قسمت head صفحه قرار می گیرند.ExampleDescribe metadata within an HTML document:<head> <meta charset=&quotUTF-8&quot> <meta name=&quotdescription&quot content=&quotFree Web tutorials&quot> <meta name=&quotkeywords&quot content=&quotHTML,CSS,XML,JavaScript&quot> <meta name=&quotauthor&quot content=&quotJohn Doe&quot> <meta name=&quotviewport&quot content=&quotwidth=device-width, initial-scale=1.0&quot> </head>راستی بیایید با هم یه سری هم به مرجع اصلی مون یعنی W3Schools بزنیم.طبق تعریف این مرجع :Metadata is data (information) about data. متاتگ داده (اطلاعاتی) است در مورد یک داده دیگرپس مرجع ما میگه کار متاتگ ها اینه که اطلاعاتی در مورد یک داده (مثل کاراکترست استفاده شده در اون صفحه یا مثل کلمات کلیدی استفاده شده در اون صفحه) بده. (اما به کی؟)اما این اطلاعات رو به کی بده؟ خب جواب این سوال در ساختار متاتگ ها مشخصه؛ اون ها برای نمایش به کاربر ساخته نشدن پس اطلاعات رو به کاربر نمیدن بلکه به ماشین (اعم از مرورگر،موتور جست و جو، ربات و...) میدن که برای اونها مفید و قابل درکه (مثلا این که صفحه رو چطور لود کنن یا وقتی کسی تو گوگل سرچ کرد به ازای چه کلماتی صفحه شما هم در نتایج نمایش داده شه یا اینکه چطور صفحه نمایش داده شه).بیایید مثالی از تغییر نحوه نمایش رو باهم ببینیم:بدون نوشتن متاتگ <viewprt> :" />بدون نوشتن متاتگ با نوشتن متاتگ <viewprt> :" />با نوشتن متاتگ باز طبق مرجع داریم:The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.تگ <meta> در واقع متادیتا(فرا داده) هایی رو در مورد صفحه ما فراهم می کنه. و همون طور که قبل تر گفتم برای ماشین قابل درک هست و نمایش داده نمیشن.نکته: متاتگ ها همیشه یک جفتِ name/value برای ما پاس میکنن (اگه با این مفهوم هیچ آشنایی ندارید نگران نباشید چون در پست های آینده در نموردش توضیح میدم).سپاس که تا اینجاش رو همراه من بودید.یادتون باشه که اینترنت بهترین دوست شماست و قطعا می تونید مطالب بهتری رو توش پیدا کنید.این پست رو من به زبون خودم نوشتم و سعی کردم مطالبی که بیشتر وبلاگ ها و سایت ها نادیده میگیرن رو اضافه کنم. اگه خواستید اطلاعات بیشتری در مورد متاتگ های معروف بدست بیارید پیشنهاد من به شما سایت webgoo هست.راستی یادتون باشه من از پست هایی که میزارم 10 خطش رو مجبورم و بقیش رو واسه دل خودم مینویسم. پس واقعا امیدوارم سرتون درد نیومده باشه و لذت برده باشید.نظراتتون بینهایت دلگرم کنندست. انتقاداتتون هم در درجه اول باعث بهبود شخصیت اجتماعیم و بعدش کارم و نوشته هام میشه، پس بازم بینهایت ممنونم.مثل همیشه نظراتونو می‌خونم و جواب می‌دم و اگه از نوشته‌هام خوشتون اومد او قلب تو خالیه‌ رو قرمز کنین برام و دنبالم کنید تا انگیزه داشته باشم بنویسم❤️پیروز باشید.بدرود.ARiyou Jahan ‏12/02‏/2019‏ 9:06 ب.ظ ARiyou Jahan ARiyou Jahan Thu, 05 Dec 2019 21:07:31 +0330 https://virgool.io/@ARiyou2000/3-setting-up-live-server-deeper-look-to-how-to-coding-llcslhq3at1w به نام ایزد توانادر این پست آموزشی در مورد کد زدن زنده و اینکه چطور بلافاصله نتیجه کد رو ببینم صحبت خواهیم کرد.همچنین مقداری هم به حاشیه میریم و در مورد مواردی مثل محل های کد زدن و آموزش شروع به کار صحبت میکنیم.امیدوارم این مطلب براتون مفید باشه و یادتون نره برای ما نظرات و انتقاداتتون رو ارسال کنید.اگر سوال یا ه حرفی دارید میتونید به ایمیل من به آدرس ARiyou.public@gmail.com و یا در شبکه های اجتماعی با شناسه (ID | User name) زیر منو پیدا کنیدTelegram, Twitter, Facebook & ... By : @ARiyou2000با تشکر از همه شما دوستان، آریو جهاندیگه بریم سر اصل مطلباگه میدونید کجا کد بزنید و اصول معمول کد زدن رو می دونید از این مبحث بگذرید و مستقیم برید سر بخش بعد.اگرم کلا اطلاعی از شروع کار ندارید می تونید به پست اولم مراجعه کنید.تا اینجای کار با چندتا محیط کد نویسی آشنا شدیم؛ اگر اونها رو فراموش کردید طوری نیست.یکی از اون ها سایت W3Schools هستش که مرجع اصلی ماست و شما میتونید هم آموزش ببینید و هم کدتونو آنلاین امتحان کنید. خوبیش اینه که رو گوشی هم اجرا میشه.یکی دیگه که قدرت پردازش بی نظیری هم داره Web Storm هستش که پولیه ولی میتونید از سایت های ایرانی نسخه سالم و کرک شدش رو گیر بیارید. این گزینه یا مشابهش که مال همون شرکته (Jetbrains) یعنی IntelliJ IDEA معروف گزینه های خوبی هستندهمچنین می تونید از Visual Studio Code که حجم کمی هم داره استفاده کنید. ولی خودم قبلی رو ترجیح میدم.شما حتی می تونید تو notepad یا notepad++ هم کد بزنید.ولی بعضی از اونها یه مشکل کوچیک ولی دردسر ساز داشتن. از جمله محیط پیشنهادی خودم یعنی وب استورم.اون مشکل هم این بود که شما برای دیدن نتیجه کار هر دفعه باید کد رو سیو می کزدید و بعد به مرورگر می رفتید و صفحه رو دوباره ریفرش می کردید. شاید ساده به نظر بیاد ولی کافیه یکم کد بزنید تا ببینید چقدر رو مخه.خب گفتیم ابزار دیگه ای که به شدت نیازه و بدون اون اصلا نمیشه کار کرد یه مرورگر خوبه.ما به خاطر هماهنگی وب استورم با کروم از Chrome استفاده میکنیم(به من چه که کروم رم سیستم رو میخوره. هم پارتی کلفتی مثل گوگل داره هم دمش گرمه و قدرت مند داره عمل میکنه. به عبارتی گردنش کلفته). خب حالا که همه چی اوکی شد و می تونیم راحت (یا بعد یکم ریفرش زدن، با خیال ناراحت) کد بزنیم و امتحانش کنیم، میریم سراغ اصل کار.اگه تا اینجای کار با من همراه بودید و تو وب استورم کد زدید، نیاز به یه افزونه کوچیک تو کروم دارید.افزونه ها برنامه های کوچیکی هستن که تو مرورگرها دانلود، نصب و اجرا میشن.فقط کافیه این افزونه رو از این لینک دانلود کنید (یا خودتون تو گوگل در موردش جست و جو کنید).نکته: در مورد اجرا شدنش روی opera نمی تونم الان نظر قطعی بدم اما خودم با مشکلاتی تو استفاده مواجه شدم (از نظراتتون بینهایت ممنون میشم).تا امروز این کارو واسه Fire Fox تست نکردم.خب حالا که که extension یا همون افزونه مورد نظرمون رو نصب کردیم می رسیم به گام دوم.حالا باید وارد web storm بشید و در صفحه کدهاتون کلیک راست کنید. سپس روی گزینه Debug کلیک کنید و BOOM.حالا میرسیم به گام آخر که خیلی خیلی سخته. الان شما باید مرورگر رو به یه طرف صفحه و ادیتور کد رو به سمت دیگه منتقل کنید.شاید واستون سوال باشه که قسمت سختش کجاست؟ خب سوال خوبیه. اتفاقا واسه خودمم سواله.سختیش اونجاست که باید تصمیم بگیری مرورگر سمت چپ باشه یا ادیتور؟ به هر کروم چقدر فضا بدی؟ باور کنید خودش یه چالشه.راستی امروز از یه مانیتور استفاده می کنی و فردا احتمالا یه مانیتور دیگه هم بندازی کنارش؛ پس فردا هم قطعا اونقدر درامد داری که یه صفحه کشیده نسل جدید LG یا Samsung رو بخری. فکر کن اونروز این کار چقدر سخت شه!یه راه دیگه دادن نتیجه بالافاصله هم استفاده از ادیتورهای آنلاینه که الان اسمشونو یادم نیست ولی خیلی محیط خوشکلی دارن (قابل توجه اون عزیزان عقده ای تازه کدنویس که بعد هر خط 3 ساعت ازش دارن عکس پست می کنن).به هر حال این بحث هم به پایان رسید. اگه به اطلاعات بیشتری نیاز داشتید می تونید از لینک زیر استفاده کنید.https://www.jetbrains.com/help/webstorm/live-editing.htmlیادتون باشه من از پست هایی که میزارم 10 خطش رو مجبورم و بقیش رو واسه دل خودم مینویسم. پس واقعا امیدوارم سرتون درد نیومده باشه و لذت برده باشید.نظراتتون بینهایت دلگرم کنندست. انتقاداتتون هم در درجه اول باعث بهبود شخصیت اجتماعیم و بعدش کارم و نوشته هام میشه، پس بازم بینهایت ممنونم.مثل همیشه نظراتونو می‌خونم و جواب می‌دم و اگه از نوشته‌هام خوشتون اومد او قلب تو خالیه‌ رو قرمز کنین برام و دنبال کنیدم تا انگیزه داشته باشم بنویسم❤️شب و روزگار بر شما خوش.بدرود.ARiyou Jahan ‏12/01‏/2019‏ 10:34 ب.ظ ARiyou Jahan ARiyou Jahan Sun, 01 Dec 2019 22:39:27 +0330 https://virgool.io/@ARiyou2000/02-doctype-basic-layout-g2i0heqm5hvu به نام ایزد توانا.در این پست آموزشی قصد داریم مقداری در مورد DOCTYPE ها صحبت کنیم.اینکه اصلا چی هستن و از کجا اومدن و کارشون چیه.بعد اون هم در مورد مفاهیم پایه Layout ها صحبت میکنیم.دستور DOCTYPE یه دستور ساده ولی در صورت فراموشی دردسر سازه.اونقدر دردسر ساز که منبع اصلی ما در این دوره یعنی W3Schools اولین چیزی که به شما میگه اینه که تمام دستورات HTML باید با دستور <DOCTYPE!> شروع بشن.All HTML documents must start with a document type declaration: <!DOCTYPE html>.ولی این دستور چیه و چرا باید استفادش کرد؟با تشکر از webgoo :دستور DOCTYPE در واقع جزئی از تگ های html نیست، بلکه یک دستور راهنما برای مرورگرهای وب است، از آنجایی که کنسرسیوم جهانی وب (w3c) استاندارد های مختلفی از زبان پایه ی وب یعنی HTML یا (HyperText Markup Language) را ارائه نموده که هر کدام از آنها در مقایسه با هم دارای تفاوت هایی هرچند اندک هستند، اما این موضوع سبب می شود که مرورگرهای وب، در برخورد با صفحات مختلف نتوانند در حالت عادی، استاندارد صحیح را شناسایی کنند و لذا به جای پردازش متناسب با استاندارد اصلی، عملیات پیش فرض خود را برای نمایش صفحه انجام می دهند که این موضوع ممکن است با آنچه مورد نظر شما بوده باشد، فرق کند و یا از مرورگری به مرورگر دیگر، صفحات شما به چند شکل مختلف پردازش شوند، لذا برای جلوگیری از بروز چنین مشکلاتی، از دستور راهنمای DOCTYPE استفاده می شود تا نوع نسخه HTML استفاده شده را برای مرورگر مشخص کند.استفاده از DOCTYPE اجباری یا اختیاری؟در واقع استفاده از دستور DOCTYPE در صفحات وب اجباری نیست، بدین معنی که اگر هم از آن استفاده نشود، صفحه و اطلاعات آن همچنان در مرورگر بارگذاری شده و قابل استفاده است، اما کنسرسیوم جهانی وب (W3C) به طور جدی توصیه می کند که در صفحات خود از این دستور استفاده کنیم (مخصوصا در صفحاتی که از نسخه HTML 4.01 یا XHTML 1.0 استفاده می کنند)، لذا به خاطر رعایت استانداردهای توصیه شده W3C می توان گفت که استفاده از آن تقریبا الزامی است، در غیر این صورت علاوه بر اینکه ممکن است صفحات، به درستی در مرورگرهای مختلف نمایش داده نشوند، از نظر اعتبار سنجی (Validation) نیز معتبر نیستند (که این امر در امتیاز و رتبه سایت یا وبلاگ در موتورهای جستجو تاثیر منفی خواهد داشت)؛ برای اعتبار سنجی کدهای خود، می توانید به آدرس http://validator.w3.org مراجعه کنید.خب اینم از DOCTYPE ها البته بعدا واستون کامل ترش میکنم.بریم سراغ Layout ها البته این جلسه فقط یه نیم نگاه بهشون میندازیم و بعدا کاملشون میکنیم.در واقع layout ها ابزاری برای قالب بندی سایت ما هستند که تخت روش های مختلفی و با منطق های مختلف بیان می شوند.یکی از این روش ها که امروزه کمتر مطرح میشود و می توان گفت منسوخ شده روش table است که آشنایی با آن خارج از لطف نیست.<header> - یک هیدر (قسمتی که در بالای سایت قرار میگیرد) را برای یک سند یا قسمت تعریف میکند.<nav> - لینک های ناوبری (منو ها) سایت در این عنصر قرار میگیرند.<section> - یک قسمت را در سند مشخص میکند.<article> - یک مقاله مستقل در این عنصر قرار میگیرد.<aside> - ستون سمت راست و یا چپ را برای سایت مشخص میکند.<footer> - یک فوتر را برای یک سند و یا قسمت تعریف میکند.<details> - جزئیات اضافی در این عنصر قرار میگیرد.<summary> - سرتیتری برای عنصر <details> تعریف میکند.ولی این روش پیچیدگی بسیاری داشت و امروزه روش مناسبی به نظر نمیرسد.در این روش صفحه به چند قسمت تقسیم می شود که هر قسمت خود دارای زیر مجموعه هایی بود. حال تصور کنید پیچیدگی این کار وقتی که با حجم بزرگی از محتوا رو به رو باشیم چطوره.امروزه از موارد دیگه ای به عنوان طرح بندی صفحات استفاده میشه از جمله:جداول HTML (که مقداری در موردشون صحبت کردیم و امروزه دیگه منسوخ شدن)خاصیت float در CSS (یکی از پر کاربردترین ها)فریمورک های CSS (فریمورک هایی مثلBootstrap)استفاده از مدل flexbox در CSS (جدیدترین مدل)برای اطلاعات بیشتر می تونید به لینک مرجع ما یعنی W3Schools یا نسخه فارسی شده اون یعنی LearnSource مراجعه کنید.این پست در آینده تکمیل خواهد شد.با سپاس از وقت شما. آریو جهان ARiyou Jahan ARiyou Jahan Sun, 01 Dec 2019 20:06:39 +0330 https://virgool.io/@ARiyou2000/first-basic-html-page-how-to-start-coding-e7bu1uzhwns9 به نام ایزد توانادر این پست آموزشی در مورد صفحات ساده HTML و ساخت اولین برنامه به کمک همین صفحات صحبت خواهیم کرد.همچنین مقداری هم به حاشیه میریم و در مورد مواردی مثل محل های کد زدن و آموزش شروع به کار صحبت میکنیم.امیدوارم این مطلب براتون مفید باشه و یادتون نره برای ما نظرات و انتقاداتتون رو ارسال کنید.اگر سوال یا ه حرفی دارید میتونید به ایمیل من به آدرس ARiyou.public@gmail.com و یا در شبکه های اجتماعی با شناسه (ID | User name) زیر منو پیدا کنیدTelegram, Twitter, Facebook & ... By : @ARiyou2000با تشکر از همه شما دوستان، آریو جهاندیگه بریم سر اصل مطلباگه میدونید کجا کد بزنید و برای شروع باید چکار کنید از این مبحث بگذرید.راستش به نظر من سخت ترین قسمت شروع یه کار یا مبحث جدید مخصوصا تو مباحث مرتبط به و با کامپیوتر برداشتن اولین قدم به اون دنیای جدیده(این قضیه با شروع اون کار فرق میکنه).همون لحظه ای که پات رو به اون دنیا میزاری و با کلی سوال مواجه میشی که هیچ کس تا الان بهشون جواب نداده(البته معمولا). مثلا وقتی داری یه ویدیو آموزشی خیلی عالی و معتبر رو نگاه می کنی و استاد شروع میکنه به مد زدن. تو هم می خواهی همون کارو کنی ولی نمیدونی کجا باید این کارو انجام بدی.مثل خودم که مدت ها پیش وقتی خواستم واسه فان یه سری بات تلگرامی طراحی کنم ولی هیچ کس بهم نگفت کجا کد بزنم و منو تا مدت ها از این کار منصرف کرد.چون تو اون لحظه واسه اون استاد چیز مهمی نیست و فقط کد هستش که اهمیت داره.اوکی. چند تا از جاهایی که میشه توشون کد زد رو می گم:یکی از اون ها سایت W3Schools هستش که مرجع اصلی ماست و شما میتونید هم آموزش ببینید و هم کدتونو آنلاین امتحان کنید. خوبیش اینه که رو گوشی هم اجرا میشه.یکی دیگه که قدرت پردازش بی نظیری هم داره Web Storm هستش که پولیه ولی میتونید از سایت های ایرانی نسخه سالم و کرک شدش رو گیر بیارید. این گزینه یا مشابهش که مال همون شرکته (Jetbrains) یعنی IntelliJ IDEA معروف گزینه های خوبی هستندهمچنین می تونید از Visual Studio Code که حجم کمی هم داره استفاده کنید. ولی خودم قبلی رو ترجیح میدم.شما حتی می تونید تو notepad یا notepad++ هم کد بزنید.گزینه های دیگه ای هم هست که الان یادم نیست. به نظرم با وب استورم یا notepad شروع کنید و بعدا بقیه رو هم امتحان کنید.بقیه چیزی که نیاز دارید یه مرورگر خوبه که ما به خاطر هماهنگی وب استورم با کروم از Chrome استفاده میکنیم.البته برای کار راحت تر می تونید در مورد افزونه های Jetbrains برای مرورگر ها هم تحقیق کنید.حالا می خواهیم از ساحل شنی یه قدم تو این دریا پا بزاریم.بیایید اول از نگاهی به ساختار صفحات وب داشته باشیم. صفحات وب مثل بدن انسان میمونن و HTML & CSS & JAVASCRIPT خب مثل...اصلا تصویر پایین خودش گویای همه چی هست.زبان تگ نویسی HTML در واقع مثل اسکلت میمونه و structure یه صفحه رو تشکیل میدهبعد به کمک CSS می تونیم به اون رنگ و لعاب بدیم و زیباش کنیم.(گوشت بشه به تنش)در پایان هم با JavaScript بهش جون می بخشیم و بهم قابلیت هایی مثل عکس العمل رو اضافه میکنیم.سه تا نکته مهم به HTML گفتم زبان تگ نویسی و نه برنامه نویسی چون (خودتون تحقیق کنید)گفتم با JavaScript میتونه عکس العمل بده؛ در مورد نحوه برخورد سرور و کلاینت و این جور موارد هم تحقیق کنید.نکته سوم هم تا اومدم دوتای قبلی رو بنویسم یادم رفت.اگر با اصطلاحات بالا یا تگ هایی که در ادامه میگیم آشنایی ندارید ترس ورتون نداره کم کم باهاشون آشنا میشیم.در ضمن از این به بعد همیشه یه صدایی تو سرت هست که میگه صبر کن،میگه اول پایه رو قوی کن، میگه اول برو با تمام اصطلاحات بالا آشنا شو بعد بیا سر ادامش؛خب می خواهم بهت بگم مادامی که داری به این صدا گوش میدی در جا میزنی و به هیچ جا نمیرسی.این صدا شاید حرفاش منطقی به نظر برسه ولی مطمئنم که گوش کردن به این حرفا احمقانه ترین کار ممکنه واستون.خب. بیشتر از این منتظرتون نمیزارم. بریم با هم یکم کد بزنیم.زبان HTML بر پایه تگ ها بنا شده.تگ ها به صورت کلی به شکل <TAG NAME> هستند. لازمه بدونید که تگ ها به دو مدل دارای بدنه و بدون بدنه یا in Line تقسیم میشن. تکلیف تگ های در خط که مشخصه و به صورت بالا و خیلی راحت تعریف میشن.اما تگ های دارای بدنه به صورت زیر تعریف میشن<Tag name> some action like show a text</Tag name>خب حالا که با تگ و انواع اون آشنا شدید میریم سراغ یه صفحه HTML ساده.هر صفحه HTML از یه تگ اصلی با عنوان خود html (با حروف کوچک مینویسنش) ساخته شده.این تک جامع شامل بدنه است و هر چیزی خارج از بدنه این تگ غیر قابل قبوله (البته بجز چند مورد خاص که بهشون خواهیم رسید ولی تا اون موقع هر چیزی خارج از این بدنه غیر قابل قبوله؛ البته ممکنه ازش خروجی مورد نظر حاصل شه ولی خود این کار اشتباهه).داخل تگ html دو تگ اصلی دیگه وجود داره تحت عنوان های body & headخب بیایید ببینیم تا اینجای کار کد ما چی شده:<html> <head> head section statments ! </head> <body> body section statments ! </body> </html>خب بیایید دو تک head & body رو به تفکیک برسی کنیم.تو تگ head معمولا چیز هایی که قرار میگیرن نمایش داده نمیشن و اونهایی هم که نمایش داده میشن در کادر اصلی ما (اون صفحه که محتویات وبسایت ها توش به نمایش گزاشته میشه) نیستن و فقط در حد سربرگ و... هستن.تگ body محتویات باکس اصلی ما هستش و هر چیزی که نیاز به نمایش داره اینجا قرار میگیره.تو این جلسه با تگ head کاری نداریم و به رسم برنامه نویس ها فقط می خواهیم Hello world رو چاپ کنیم.<html> <body> Hello world </body> </html>خب حالا بیاید یکم جالب ترش کنیم و از دو تگ پاراگراف <p> , تیتر <h1> استفاده کنیم. همچنین سربرگمون رو هم عوض میکنیم.<html> <head> <title>تایتل یا عنوان سربرگ</title> </head> <body> <h1> یک نمونه تیتر</h1> <p> یک نمونه پاراگراف که می تواند شامل تعداد زیادی کلمه باشد </p> </body> </html>در ضمن تیتر ها می توانند دارای درجه اهمیت های مختلف از 1 تا 6 باشد که از 1 تا 3 به عنوان بسیار مهم تلقی میشود.<h1> <h2> <h3> <h4> <h5> <h6>کلی مبحث دیگه هم هست که باتوجه به این که الان که این پست رو مینویسم شبه حال گفتنش رو ندارم و تو پست های بعدی جبران میکنم. اگه علاقه مند بودید لایک و نظر بدید و منو دنبال کنید.شب و روزگار بر شما خوش.بدرود.ARiyou Jahan ‏12/01‏/2019‏ 03:37 ق.ظ ARiyou Jahan ARiyou Jahan Sun, 01 Dec 2019 00:41:06 +0330