تااینجا امدیم یک محیط کدنویسی کوچک تری برای خود تعریف کردیم یا یک فایل اچ تی ام ال دیگری تعریف کردیم بعد خطا را پیدا کردیم و بعد ان را در فایل اصلی
مان وارد کردیم .در ادامه این محیط های کدنویسی کوچک می شود فایل های اچ تی ام ال مان ان یک محیط کدنویسی دیگری است در حال حاضر فعلا
در این محیط کدنویسی اصلی مان قرار می گیریم و یک نکته را متوجه شدیم که تگ پاراگراف تودر تو نمی شود و می رویم این مسئله در کل فایل تغییر می دهیم
می دانیم که در بحث طراحی این قسمت از کد دارای تگ های دیگری می شود به همین خاطر تغییری ایجاد می کنیم
این فایل اصلی مان می باشد می دانیم این قسمت از کد بعدا تغییر می کند به همین خاطر تگ پاراگراف به تگ دایو تغییر می کند
قبل از تغییر را ببینیم این قسمت از کد را حال تغییر را ذخیره می کنیم ببینیم چی می شود همانطور که مشاهده می کنید بقیه تگ ها را درون خود ش قرار داد باز
به همین شکل چون که یکبار نشان دادم چه کار می کنم
چون که این بخش از متن دارای هیچ تگی نیست و فقط دارای تگ پاراگراف هست به همین خاطر مرورگر هیچ تگی را اضافه نکرده است
وگرنه شبیه قسمت اول تگ ها را درون خودش قرار نمی داد و به همان خطا یا مشکل اضافه کردن تگ ها برمی خوردیم حال ذخیره را
بروزرسانی می کنیم این قسمت شبیه قبل می باشد که دارای تگ هایی درون تگ پاراگراف می باشد.
و یک نکته هر کدام از این دایو ها می تواند یک صفحه اچ تی ام ال شود
پس تااینجا فکر کنم متوجه شدید که چرا دنبال خطایابی بودیم خوانایی کد افزایش پیدا کرد
زیبایی کد افزایش پیدا کردکد دسته بندی شد تقسیم بندی شد
این تگ ها را قبلا توضیح دادم می توانید حالت های مختلف طراحی را روی آن اعمال کنید
شاید من از چندین تگ استفاده کنم ولی شما یک طراحی ارائه بدهی که از تگ های کمتری استفاده شود
حال این بخش را می خواهیم کدش را ببینیم دراینجا محتوا را تغییر دادم که طراحی تغییر کند این هم یک قسمت دیگری از محتوا که محتوا را تغییردادیم
تا به یک سبک برسیم حالت های دیگری هم می توانیم استفاده کنیم بستگی به طراحی مان دارد .
یک ذخیره ای می کنیم نتیجه را می بینیم کمی اندازه قلم این بخش را افزایش می دهیم حالا در این قسمت به یک لینک بر می خوریم و می خواهیم
زمانی که روی ان کلیک می کنیم ما را به صفحه مورد نظر ببرد نه این که فقط معرفی کنداگر این لینک درون مرورگر کپی کنید می توانید به صفحه ی
مورد نظر بروید اما می خواهیم روی لینک کلیک کنیم و به صفحه مورد نظر برویم برای این کار از یک تگی استفاده می کنیم به نام تگ آ
<a> این وسط هر متنی که بخواهید و مربوط به لینک باشد می توانید وارد کنید </a>
ربطی به رفتن به صفحه موردنظر ندارد خوب تگ آ را اعمال کردیم نتیجه را ببینیم.هیچ تغییری نداشیتم کدش را ببینیم
پس ربطی به چیزی که بین تگ ها وارد می کنیم ندارد فقط برای شناخت تگ می باشد. پس برای رفتن به صفحه مورد نظر یا لینک
باید چی کار کرد از ویژگی که قبلا توضیح دادم استفاده می کنیم یادتان نرود ویژگی در تگ شروع وارد می شود .
هر تگ می توانند چندین ویژگی داشته باشد
هر ویژگی وقتی اسم متفاوتی دارد می تواند کارایی متفاوتی داشته باشد
اسم ویژگی برای این کار
href
می باشد
<a href="numpy.org"></a>
پس در تگ شروع ویژگی را وارد کردیم و داخل ویژگی لینکی که می خواهیم به صفحه برویم وارد می کنیم حالا در کدمان این را اعمال می کنیم
ذخیره می کنیم و نتیجه را می بینیم چون حالت محلی یا روی کامپیوتر خودمان صفحه اچ تی ام ال هست نتوانستیم به صفحه مورد نظر برویم ولی کد را درست نوشتیم
اگر فایلمان روی اینترنت بود یا فنی تر روی سرور بود مشکلی وجود نداشت دوباره کد را اجرا می کنیم .
پس کد اجرا شد . و درست اجرا شد همانطور که درقبل دیدید کد درست بود
<a href="numpy.org"></a>
numpy.org
اما چون که فایل روی کامپیوترم هست واینترنت را نمی شناسد به صفحه ای که روی اینترنت است نرفت ولی با قرار دادن قسمت ابتدای لینک
یعنی
https://
https://numpy.org/
به صفحه مورد نظر رفت.
https://
نام پروتکل امن روی فضای مجازی یا اینترنت می باشد پس درون ویژگی نمی توانید هر چیزی بنویسید ولی بین تگ هر چیزی می توانید بنویسید که به لینک
مربوط می باشد.این هم آموزش یکی دیگر از تگ ها اچ تی ام ال و خطایابی آن چون خیلی راحت اموزش داده می شود
سختی احساس نمی شود ولی باید برای یادگیری تمرین کرد.دوباره به یک لینک دیگری برخوردیم و همان را دوباره تکرار می کنیم
اما اینجا لینک اش متفاوت است اجرا نمی شود می بینید که به لینک نمی رود اینجا مشکل اش مشخص می شود وقتی اجرا می کنیم ولی وقتی کد
می نوشتیم متوجه نشدیم یک فاصله ای بین
org /
وجود دارد این فاصله را حذف می کنیم دوباره اجرا می کنیم پس اجرا شد این هم خطایابی لینک قسمت بین تگ را تغییر دادم ولی باز اجرا شد
معنی این چی هست که درون نوت می نویسید بعد کدنویسی می کنید درون نوت پد و در مرورگر اجرا می کنید؟
برای اجرا در هر محیطی به کدنویسی در ان محیط نیازدارید .
نوت پد کلمات را می خواند.
کدهای اسکی ،کدهای باینری
مروگر برای این که این کلمات را بخواند و متوجه شود باید به زبان خودش باشد.
کدهای اچ تی ام ال
اگر بخواهم یک کلمه یا یک قسمتی از متن را پررنگ تر کنم یا تغییری درونش ایجاد کنم از همان تگ بولد استفاده می کنم .
<b>
با تگ لینک هم آشنا شدیم و متوجه شدیم که کجا می توانیم ازش استفاده کنیم.
اگر بخواهیم این لینک در صفحه جدیدی باز شود. از یک ویژگی دیگری استفاده می کنیم.
از ویژگی
target=""
با مقدار
_blank
استفاده می کنیم.چه جالب ان لینکی که مشکل داشت درونش قرار گرفتیم هم اشکالش را برطرف کردیم هم یک ویژگی جدید به آن اضافه کردیم .
بله در یک صفحه جدید باز شد و درست باز شد پس لینک های دیگردر صفحه جدید باز نشدن واشکال هم دارند و رفع می کنیم
بله باز شد ولی در صفحه جدید باز نشد باز شد در یک صفحه جدید بازشد
حالا از چند ویژگی در تگ اچ تی ام ال هم استفاده کردیم ببینید مرورگر خطایی را تشخیص می دهد اینجا یک خطایی داریم
مشکل این است که یک کاراکتر نگذاشته بودم همچنان از تگ ها استفاده می کنیم وصفحه ی خود را طراحی می کنیم .
دراین روشی که مشاهده کردید خیلی مسائل را حل کردید
درخواست را به گوگل دادید
بدون این که چیزی وارد گوگل کنید دارید جستجو می کنید
به نتیجه خودتان در موتورجستجوی گوگل رسید
اینجا هم مشاهده می کنید که گوگل صفحه ام رابست چون که این مسئله ای که می نویسم خیلی مهم است این چت پی تی بود که اینجا مسئله آپگرید را
گوگل برایم قرار داد.بله بگذار جستجو را تغییر بدهم نه خدا راشکر در ان درخواست بسته شده است نه کلا
محدودیت ترافیک قرار داد بگذریم برمی گردیم به این مسئله .
یک نکته خیلی مهم نظم در کدنویسی یا تگ نویسی خیلی مهم است یعنی عمل جستجو را راحت می کند.
حالا اگر بهش برخورم توضیح می دهم .
در این روش شما می توانید برای خودتان یک موتورجستجو طراحی کنید یعنی چه؟
درخواست به گوگل داده می شود و نتیجه را در وب سایت خودتان دریافت می کنید و به کاربر نشان می دهید
به همین خاطر گوگل مسئله درخواست را محدود کرد
یعنی می توانید یک موتورجستجو طراحی کنید با همین روش بدون این که داده ای ذخیره کنید یا پردازشی روی سروی انجام شود فقط
تعداد درخواست مسئله است .که فکر نمی کنم محدودیتی در این روش وجود داشته باشد.
این هم استفاده از تگ لینک به روش های مختلف
یک تغییر کلی باید ایجاد کنیم .از طریق جستجو اینجا عمل جایگزین را نداریم و باید از نرم افزاری استفاده کنیم که عمل جایگزین داشته باشد
وگرنه باید روش دستی این کار انجام بدهیم .مشکلی که ممکن است به وجود بیاید را مشاهده کردید
یک بارفایل تان را با یک نرم افزار باز می کنید وردپد به شکلی که دیدید می شود و بعد با نرم افزار دیگری باز می کنید نوت پد ممکن است دیگری
محتوایش مثل قبل نشود و همه اش پاک شود .
بازهم همین خطا را داریم
باید در فایل
matplotlib
را جایگزین
matplotib
کنیم باکدنویسی درون فایل نوت پد و تبدیل ان به فایل اچ تی ام ال و قرار دادن ان روی اینترت یک روح تازه ای به محتوا داده می شود
اگر بخواهیم همین ساختاری که در نوت پد داریم برای این قسمت در کد اچ تی ام ال مان پیاده سازی کنیم
مثلا اینترش را که حل کردیم فقط یک مسئله فضای خالی می ماند که که فضای خالی را کدهای اچ تی ام ال
یعنی برای این که فضای خالی یا اسپیس در مروگر نشان داده شود باید از این کد استفاده کنید
اینجا که خودش فضای خالی دارد این فضای خالی برای مرورگر مشخص نیست نامعلوم است باید کدی را بنویسیم که مرورگر فضای خالی را بفهمد
روش های دیگری برای ایجاد فضای خالی وجود دارد ولی استفاده از تگ ها یا کدهای اچ تی ام ال به این صورت می باشد.
اینجا سه فضای خالی ایجاد کردیم ببینید تگ دیگری وجود دارد برای فضای خالی
تگ pre
فضای خالی حفظ می کند اضافه نمی کند یک ذخیره کنیم و نتیجه را ببینیم .فضای خالی قبلی را حذف کردیم
همانطور که مشاهده می کنید تگ پاراگراف هم تاثیر در طراحی یا حفظ فضای خالی ندارد و فقط از بالا و پایین فضایی را ایجاد می کند
حالا از تگ
pre
استفاده می کنیم
خوب چی کار کردیم؟
اول از تگ پاراگراف استفاده کردیم بعد از تگ خط جدید یا اینتر استفاده کردیم بعد از تگ فضای خالی استفاده کردیم این اشتباه نیست
این هم یک نوع طراحی می باشد که طراحی که در نوت پد هست را داریم درمرورگر پیاده سازی می کنیم اما اگربخواهیم
ساختار یا طراحی که در نوت پد هست را حفظ کنیم یا مروگر همان طراحی را بفهمد می آییم و از تگ
pre
استفاده می کنیم متن همانطوری که در سورس کد نوشته شده است توسط تگ
pre
همانطور نمایش داده می شود. افزایش کارایی حذف تگ ها استفاده از تگ کمتر این هم یک نوع طراحی می باشد
اگر با تگ ها اشنا باشید می توانید انواع طراحی را داشته باشید .چه تفاوتی دارد مثلا ما می خواهیم به قسمتی از تگ
pre
دسترسی داشته باشیم دیگر نمی توانیم چون کل متن درون یک تگ می باشد.مثلا می خواهیم بگوییم خط اول تگ
pre
را می خواهیم چطوری به خط اولش دسترسی داشته باشیم وقتی هیچ تگی آن را احاطه نکرده است .
ولی می توانی به متن درون تگ
pre
دسترسی داشته باشیم که می شود این پس نوع طراحی توسط تگ ها به دسترسی به متن یا محتوا بستگی دارد بستگی دارد .
یک مثال دیگری بزنم در این قسمت مشخص تر است مثلا این قسمت از متن را می خواهیم بهش دسترسی داشته باشیم از طریق
کدنویسی
body >div(دوم) >article >div>b
پس پیداش کردیم این قسمت از محتوا را درون کدنویسی دقیقا ان قسمت را می توانیم تغییراتی بدهیم چطور تغییراتی بعدا متوجه می شویم
این پیدا کردن محتوا از طریق تگ ها
هر کدام از این کاربردهایی دارد.
داخل همین جا همین طور که می توانید جستجو کنید یک کلمه یا عدد نزدیک محتوا پیدا کنید داخل کد جستجو کنید
پس تااینجا با تفاوت های استفاده از تگ های اچ تی ام ال و نحوه کارکردها آن اشنا شدید
فیلم آموزشی:
فایل های مورد نیاز:
موفق باشید
به امید خدا
