دوره برنامه نویسی وب آیولرن

من به احترام شما لایو ساعت ۸ رو برگزار کردم اما همه فوتبال هستن پس با خیال راحت فوتبال رو ببنید هفته بعد میبینمتون❤️

🔥 جلسه‌ی دوم شاتل پلاس وب آیولرن 🔥 ✅ بعد از اولین تجربه‌ای که تو دنیای کدنویسی داشتید و دو پروژه‌ای که انجام دادید، نوبت به روز دوم رسید. ✅ پروژه‌ روز دوم اینه که سایت شخصی خودتون رو طراحی میکنید! 💥خیلی جالبه مگه نه😍

نحوه وسط‌چین کردن عکس گوگل ابتدا باید یک تگ div ایجاد کنید و تگ img را داخل این تگ قرار دهید ؛ در مرحله بعد دستور Text-align : center را به تگ والد یعنی تگ div بدهید.

<div style="text-align : center ;">
 <img src="http://www.aiolearn.com/google.png">
</div>

برای نمایش دادن عکس گوگل میتونید در اتریبیوت src از آدرس بالا استفاده کنید. #شاتل ==..==..==..==..==..==..==..==..==..==..==.. ✅کانال پشتیبانی برنامه نویسی وب آیولرن ✨ @aiolearn

نشان دادن فرمت فایل‌ها در سیستم ۱.ابتدا وارد پوشه مورد نظر شوید. ۲.از بالا روی تب view کلیک کنید. ۳.تیک گزینه‌ی file name extension را فعال نمایید. ایجاد یک فایل html بعد از فعال کردن فرمت ‌فایل‌ها در ویندوز مراحل زیر را طی کنید: ۱. یک پوشه جدید ایجاد کنید و وارد آن شوید. ۲.کلیک راست کردا و از گزینه‌ی new یک فایل متن ( Text Document ) ایجاد کنید. ۳.در مرحله آخر باید فایل را rename کنید و فرمت Txt را به HTML تغییر دهید. #شاتل ==..==..==..==..==..==..==..==..==..==..==.. ✅کانال پشتیبانی برنامه نویسی وب آیولرن ✨ @aiolearn

تفاوت مقادیر Block و inline در display : عناصری که یه خط کامل رو برای خودشون اشغال می کنن، عناصر بلاک نام دارن. واضح تر بگیم، اگه شما ۲ تا عنصر بلاک رو پشت هم بنویسید، نمی تونن تو صفحه کنار هم قرار بگیرن و به صورت ستونی قرار می گیرن عناصر inline، نقطه مقابل عناصر block هستن. عناصری که یک خط رو برای خودشون اشغال نمی کنن، عناصر inline نام دارن. به این معنی که عناصر inline، بدون هیچ مشکلی در کنار هم قرار می گیرن. تنها فضایی که عناصر inline اشغال می کنن، سایز و ابعاد خود محتواست. همچنین spanها مهم ترین عناصر با نحوه نمایش inline هستن. عناصر دیگهِ با نحوه نمایش inline عبارتند از: <button> <input> <select> <big> , <small> <img> <label> <abbr> عناصر inline، دو تفاوت اساسی دیگه با عناصر block دارن که یادگیری اون ها بسیار مهمه: عناصر inline، خاصیت های width و height رو قبول نمی‌کنن. عناصر inline، تنها padding‌ و margin چپ و راست رو می‌پذیرن. در جهات بالا و پایین به درستی عمل نمی‌کنن. ==..==..==..==..==..==..==..==..==..==..==.. ✅کانال پشتیبانی برنامه نویسی وب آیولرن ✨ @aiolearn

ابزار Emmet چیست ؟ ابزار Emmet یک ابزار برای توسعه‌دهندگان وب است که می‌تواند سرعت نوشتن کد‌های HTML و CSS را تا حد بسیار زیادی افزایش دهد. این ابزار بصورت یک پلاگین در ویرایشگر‌های کد مختلف نصب می‌شود. همه چیز با استفاده از اختصارات Emmet قابل نوشتن است. برای اینکه بتوانیم کدهای HTML و CSS را با استفاده از این اختصارات بنویسیم، باید نحوه نوشتن (Syntax) این عبارات را فرابگیریم. مثال :

div>ul>li

حالا با فشردن دکمه Tab کد بالا به شکل زیر نمایش داده میشود‌.

<div>
    <ul>
        <li></li>
    </ul>
</div>

مثال دوم :

ul>li.item$*5

حالا با فشردن دکمه Tab کد بالا به شکل زیر نمایش داده میشود‌.

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

برای دیدن تمامی اختصارات emmet میتونید از سایت زیر استفاده کنید. https://docs.emmet.io/cheat-sheet ==..==..==..==..==..==..==..==..==..==..==.. ✅کانال پشتیبانی برنامه نویسی وب آیولرن ✨ @aiolearn

بعد از انجام تمارین Flex-box و یادگیری کامل دستور display : flex شما میتونید با تمرین‌ها و چالش‌هایی که این سایت براتون میزاره، به صورت کامل با CSS Grid آشنا بشید.🔥 فقط کافیه وارد لینک زیر بشید و چالش‌های این سایت انجام بدید💥 https://cssgridgarden.com/ ==..==..==..==..==..==..==..==..==..==..==.. ✅کانال پشتیبانی برنامه نویسی وب آیولرن ✨ @aiolearn

لیست پیشنهادی نقاط شکست صفحه نمایش خب حالا ما میتونیم برای خودمون هر نقطه شکستی که دوست داشته باشیم ایجاد کنیم و هیچ مانعی برای اینکار وجود ندارد، مثلا میتونیم بگیم وقتی اندازه صفحه نمایش کمتر از ۶۰۰ پیکسل شد فلان دستورات CSS رو اعمال کن و اگه کمتر از ۵۰۰ پیکسل شد بهمان دستورات رو. پس بطور کلی مانعی در ایجاد نقطه شکست وجود ندارد، ولی خب یسری نقطه شکست مشخص و یا پیشنهاد شده وجود دارد برای دیگر رسانه ها ( مثه گوشی های موبایل ، تبلت ها و.. ) که بتونیم از آنها استفاده نماییم.

/* برای گوشی های موبایل */
@media only screen and (max-width: 480px) {...} 
 
/* برای تبلت ها در حالت عمودی و گوشی های موبایل کمی بزرگتر */
@media only screen and (min-width: 481px) {...} 
 
/* برای لپ تاپ ها و تبلت ها بصورت افقی */
@media only screen and (min-width: 769px) {...} 
 
/* برای صفحه نمایش های بزرگ مثه کامپیوتر و بالاتر */
@media only screen and (min-width: 1280px){...}

⚜دستور media در css با استفاده از دستور media@ در CSS میتوان به راحتی Media Query ها ( پرس وجوی رسانه ) را در یک صفحه وب ایجاد و یا تعریف کرد. در ادامه میتوانید یک مثال از دستور media@ را در زبان CSS مشاهده نمایید. مثال : وقتی اندازه عرض صفحه کمتر از ۵۰۰px شد ( یعنی میشه روی گوشی موبایل )، رنگ زمینه و رنگ متن صفحه تغییر پیدا میکنه :

<style>
 
/* در حالت عادی */
body{
 background-color:#fff;
 color:#000;
 text-align:center;
}
 
/* در حالت واکنش گرایی */
/* وقتی اندازه صفحه کمتر از 500 پیکسل شد */
@media only screen and (max-width: 500px) {
  body {
   background-color:black;
   color:yellow;
  }
}
 
</style>

مثال ۲ : مخفی کردن تگ ها با استفاده از دستور Media@ ( در مثال زیر، عکس در کامپیوتر یا لپ تاپ نمایش داده میشه ولی در گوشی های موبایل مخفی میشه و یک پیغام نمایش داده میشه و میگه که شما الان روی گوشی موبایل هستید ) :

/* وقتی اندازه صفحه کمتر از 500 پیکسل شد */
@media screen and (max-width: 500px) {
 img.MyImage {
  display: none;
 }
 .MyMessage {
  display: block;
 }
}

❓نقطه شکست صفحه نمایش چیست؟ بطور کلی به اون اندازه ای از صفحه نمایش که قراره ( و باید ) شکسته بشه ( کمتر یا بیشتر بشه ) میگیم نقطه شکست، مثلا در دستور زیر :

@media only screen and (max-width: 500px) { ... }
1
@media only screen and (max-width: 500px) { ... }

نقطه شکست صفحه میشه اون ;max-width:500px ، یعنی وقتی اندازه صفحه نمایش کمتر از ۵۰۰ پیکسل شد فلان دستورات CSS بروی عناصر اعمال میشه، پس نقطه شکست به اون اندازه ای گفته میشه که باید عناصر به اصطلاح شکسته شوند و استایل جدید بگیرند.

⚜دستور media در css با استفاده از دستور media@ در CSS میتوان به راحتی Media Query ها ( پرس وجوی رسانه ) را در یک صفحه وب ایجاد و یا تعریف کرد. در ادامه میتوانید یک مثال از دستور media@ را در زبان CSS مشاهده نمایید. مثال : وقتی اندازه عرض صفحه کمتر از ۵۰۰px شد ( یعنی میشه روی گوشی موبایل )، رنگ زمینه و رنگ متن صفحه تغییر پیدا میکنه : <style> /* در حالت عادی */ body{ background-color:#fff; color:#000; text-align:center; } /* در حالت واکنش گرایی */ /* وقتی اندازه صفحه کمتر از 500 پیکسل شد */ @media only screen and (max-width: 500px) { body { background-color:black; color:yellow; } } </style> مثال ۲ : مخفی کردن تگ ها با استفاده از دستور Media@ ( در مثال زیر، عکس در کامپیوتر یا لپ تاپ نمایش داده میشه ولی در گوشی های موبایل مخفی میشه و یک پیغام نمایش داده میشه و میگه که شما الان روی گوشی موبایل هستید ) : /* وقتی اندازه صفحه کمتر از 500 پیکسل شد */ @media screen and (max-width: 500px) { img.MyImage { display: none; } .MyMessage { display: block; } } ❓نقطه شکست صفحه نمایش چیست؟ بطور کلی به اون اندازه ای از صفحه نمایش که قراره ( و باید ) شکسته بشه ( کمتر یا بیشتر بشه ) میگیم نقطه شکست، مثلا در دستور زیر : @media only screen and (max-width: 500px) { ... } 1 @media only screen and (max-width: 500px) { ... } نقطه شکست صفحه میشه اون ;max-width:500px ، یعنی وقتی اندازه صفحه نمایش کمتر از ۵۰۰ پیکسل شد فلان دستورات CSS بروی عناصر اعمال میشه، پس نقطه شکست به اون اندازه ای گفته میشه که باید عناصر به اصطلاح شکسته شوند و استایل جدید بگیرند.

✅دانشجویان عزیز لایو امشب به شنبه ساعت ۸ شب موکول شد✅

😍 لایو دانشجویان امشب چهارشنبه ساعت 8:00 https://www.skyroom.online/ch/aiolearn/student لینک ورود به لایو 👆

رفع خطای mysql در زمپ: مشابه رفع خطای پورت آپاچی در اجرای زمپ، ممکن است برای اجرای mysql هم به مشکل بر بخوریم. پایگاه داده در زمپ از پورت 3306 به صورت پیش‌فرض استفاده می‌کند. خیلی کم پیش می‌آید که نرم‌افزار دیگری از این پورت استفاده کند مگر سایر برنامه‌های مدیریت دیتابیس را نصب کرده باشید. در هر حال اگر با خطایی به شکل زیر مواجه شدید، باید برنامه‌ای که باعث تداخل می‌شود را ببندید و یا پورت mysql در زمپ را تغییر دهید.

Error: MySQL shutdown unexpectedly. This may be due to a blocked port, missing dependencies. improper privileges, a crash, or a shutdown by another method.

✅ برای تغییر پورت دیتابیس در زمپ، ابتدا لازم است فایلی به نام my.ini را ویرایش کنیم. 1⃣ با کلیک روی دکمه Config در جلوی MySQL در کنترل پنل زمپ و انتخاب my.ini می‌توانید آن را باز کنید. این فایل در مسیر نصب زمپ در زیرپوشه mysql/bin قرار دارد. 2⃣ در این فایل به دنبال کلمه port بگردید و هر کجا که مقدار 3306 وجود داشت، به یک مقدار دلخواه دیگر تغییر دهید. معمولاً عدد 3307 مشکل خطای اجرای زمپ را برطرف می‌کند. 3⃣ در مرحله بعدی باید فایل php.ini را باز کرده و تغییرات پورت پیش‌فرض mysql را در آن اعمال کنیم. این فایل در مسیر C:\xampp\php قرار دارد. همچنین از کنترل پنل زمپ با کلیک روی Config سرویس آپاچی (Apache) می‌توانید آن را باز کنید. 4⃣ در این فایل به دنبال عبارت mysql.default_port بگردید. پس از علامت مساوی عدد 3306 را به مقداری که در فایل قبلی تعریف کردید تغییر دهید. در اینجا من 3307 را جایگزین می‌کنیم. اگر سرویس Apache فعال است، آن را stop کنید تا php.ini بازخوانی شود. حالا مجدداً آپاچی را روشن کرده و سعی کنید MySQL را هم start کنید. خواهید دید که دیگر خطای رزرو پورت نمایش داده نمی‌شود و سرویس به درستی اجرا خواهد شد. ==..==..==..==..==..==..==..==..==..==..==.. ✅کانال پشتیبانی برنامه نویسی وب آیولرن ✨ @aiolearn

رفع خطا در xampp دو خطای اصلی که در اجرای xampp رخ می‌دهد، عدم اجرای آپاچی یا mysql است. این دو خطا در اکثر اوقات به دلیل مشکل در رزرو کردن پورت مورد نیاز در سیستم است. حالا علت این خطا چیست؟ هر برنامه در سیستم عامل که بخواهد با ابزارها یا برنامه‌های دیگر در تعامل باشد، نیاز به در اختیار گرفتن یک پورت (port) دارد. در زمپ از پورت 80 برای آپاچی (apache) و 3306 برای پایگاه داده mysql استفاده می‌شود. اگر هر کدام از این پورت‌ها قبلاً توسط نرم‌افزار دیگری گرفته شده باشد، زمپ نخواهد توانست سرویس مورد نظر شما را start کند. برای رفع هر دو خطا دو راه‌حل داریم: ✅ پیدا کردن نرم‌افزاری که باعث تداخل شده و غیرفعال کردن آن ✅ تغییر پورت مورد نیاز زمپ برای اجرای صحیح مشکل استارت نشدن Apache زمپ : اگر این مشکل برای زمپ وجود داشته باشد، وقتی روی دکمه start ماژول Apache کلیک می‌کنید، آپاچی شروع به کار نمی‌کند! در این لحظه معمولاً خطای زیر در log کنسول زمپ نمایش داده می‌شود.

Problem detected! Port 80 in use by X with PID Apache will not start without the configured ports free!

Error: Apache shutdown unexpectedly. This may be due to a blocked port, missing dependencies. improper privileges, a crash, or a shutdown by another method

راهکار : تغییر پورت آپاچی (Apache) در زمپ 1⃣ از کنترل پنل زمپ روی دکمه Config در جلوی Apache کلیک کرده و گزینه اولی (httpd.conf) را باز کنید. همچنین می‌توانید در مسیر زمپ وارد پوشه apache شده و در پوشه conf فایل httpd.conf را با یک ویرایشگر متن باز کنید. 2⃣ عبارت Listen 80 را در فایل جستجو کنید. مقدار آن را به Listen 8000 تغییر دهید. 3⃣ عبارت ServerName localhost:80 را جستجو کرده و مقدار 80 را به همان مقداری که برای قبلی قرار دادید (در اینجا 8000) تغییر دهید.

توجه کنید که اگر پورت 80 را تغییر دادید، برای دسترسی به localhost باید آدرس localhost:port که در آن به جای port عددی که برای مقدار جایگزین 80 انتخاب کردید قرار می‌گیرد را وارد کنید.

❤️یلداتون مبارک آیولرنی های عزیز و دوست داشتنی ❤️ =..=..=..=..=..=..=..=..=..=..=..=..=..=..=..=..=..= کانال پشتیبانی فنی برنامه نویسی آکادمی آیولرن 💠@aiolearn