یعنی وقتی می گوییم کدام قسمت از صفحه یعنی کدام تگ
چطوری به تگ دسترسی داشته باشیم و تغییرش بدهیم یک طور یا صورت را که قبلا دیدید به کدش دسترسی داریم تغییراتی ایجاد می کنیم
حالا برای تغییر کد یک حالت دیگر هم در قبل بهش اشاره کردیم حالا هر تگی را می خواهیم تغییر بدهیم یا ایجاد کنیم روی ان میرویم
مثلا اگر بخواهیم فونت یا اندازه قلم کل صفحه را تغییر بدهیم اگر بخواهیم بخش هد راتغییر بدهیم اگر بخواهیم بخش بدنه را تغییر بدهیم وقتی
تغییری در بادی ایجاد کنیم در کل بدنه تغییر ایجاد می کند اما اگر تغییری در تگ از بادی مثل این یا تگ پاراگراف ایجاد کنیم فقط تگ پاراگراف تغییر می کند
پس این که درقبل گفتیم چرا تگ ها را تو در تو می نویسم یا چرا تگ ها را وقتی می نویسیم تاثیرشان شبیه هم است یکی از کاربردهایش را متوجه شدیم
وقتی بخواهیم به محتوا دسترسی داشته باشیم و تغییری در محتوا ایجاد کنیم(دلخواه) باید به محتوا دسترسی داشته باشیم برای دسترسی به محتوا از تگ ها
استفاده می کنیم مثلا می خواهیم این محتوا را تغییر بدهیم یا تغییری درونش ایجاد کنیم از طریق صفحه به کد رسیدیم
حالا از کد هم می توانیم به محتوا یا صفحه برسیم حالا همین جا می توانیم تغییری ایجاد کنیم پس تغییراتی در کد ایجاد کردیم این به چه کاری می اید
ذخیره که نمی شود اگر بخواهیم پیش نمایشی از نتیجه را مشاهده کنیم .کاربردهای دیگر هم دارد مثلا مثل فونت که اشاره کردم.
من الان می خواهم کمی اندازه قلم متن ام را بزرگ کنم یا افزایش بدهم ولی چون که نیاز به توضیحات دارد می خواهم بدانم طراحی دیگری به نظرم می رسد
که آن را ادامه بدهم یا همان را توضیح بدهم .خوب طراحی دیگری به نظرم نرسید غیر از این ادامه متن را با همان تگ ها ادامه بدهم ولی این قسمت
را توضیح می دهم تا تغییر داشته باشیم . هر تگ می تواند دارای یک قسمتی باشد به نام ویژگی یعنی چه؟
با تگ پاراگراف اشنا شدیم
<p></p>
حالا مثلا می خواهیم بگوییم که این تگ اندازه قلم اش یا فونت اش کمی برزگ تر شود یا کوچک تر شود یا اصطلاحا سبک نوشتاری اش تغییر کند چه کارمیکنیم
یک ویژگی به آن اضافه می کنیم ویژگی چی هست کجای تگ اضافه می شود.
داخل تگ شروع وارد می شود و به شکل زیر می باشد
الان من یک ویژگی به نام استایل به تگ پاراگراف اضافه کردم یعنی چه؟
اندازه قلم یعنی سبک قلم درسته ؟ استایل هم به فارسی یعنی سبک است یعنی همانطور که در زبان فارسی یا عامیانه می گوییم همان را به کد تبدیل می کنیم .
پاراگرافی که فونت یا اندازه قلم اش یا سبک قلم اش مثلا 300 باشد که شبیه این مثال در این وب سایت باشد که با منبع مان یکسان باشد.
پس به این ویژگی می گویند که در تگ شروع قرار می گیرد حالا هر تگی می تواند ویژگی خاص خودش را داشته باشد
و یک ویژگی می تواند در تمام تگ ها استفاده شود یعنی چه ؟
مثلا در تمام تگ ها متن قرار می گیرد درسته ؟ پس اندازه قلم یا سبک متن در تمام تگ ها معنی دارد پس این ویژگی در تمام تگ ها استفاده می شود
اما بعضی ویژگی فقط برای همان تگ استفاده می شود که این را بعدا توضیح می دهم ولی یک مثالی بزنم این است که
تگ پاراگراف معنی لینک نمی دهد یعنی بخواهیم درون تگ پاراگراف یک ویژگی لینک اضافه کنیم .ویژگی لینک برای تگ لینک می باشد که مثلا بگوییم
این لینک به صفحه فلان مربوط می شود.
حالا برویم درون صفحه مان این تغییر را وارد کنیم و نتیجه را ببینم .
<p style="font-size:300px">الان هرچیزی در این بین تگ بنویسید اندازه قلم اش 300 می شود.</p>
این تگ شروع پاراگراف مان می باشد پس ویژگی درون این قسمت وارد می شود ویژگی چی بود اندازه قلم 300 شود.
اگر ویژگی را یادتان رفت می توانید از بخش اموزش استفاده کنید حالا یک نکته ای وجود دارد بعد از دیدن نتیجه توضیح میدهم.
خیلی بزرگ شد کمی کوچک تر کنیم تا نتیجه را بهتر ببینم .چرا اینطور شد؟
باز هم کمی کوچک تر می کنیم تا بهتر ببینیم الان داریم چه کاری می کنیم تغییراتی روی ویژگی یک تگ ایجاد می کنیم کمی بهتر شد باز هم کوچک تر می کنیم تا
تاثیرش را با بقیه قسمت معلوم شود پس تفاوت متن را مشاهده می کنید پس اندازه متن مان تغییر کرد .
حالا چرا هر دفعه ویژگی را تغییر می دادیم تا تاثیررا متوجه شویم وارد کد شویم تا انتهای تگ پاراگراف را مشاهده کنیم .
پس با بحث ویژگی آشنا شدید اعمال ویژگی دیدن نتیجه اشنا شدید پیدا کردن انتهای تگ خیلی سخت شد از راه دیگر می توانید استفاده کنید
یکی استفاده از کامنت بود پس از طریق کامنت انتهای تگ پاراگراف را پیدا کردیم
یک روش دیگر هم برای پیدا کردن انتهای تگ می باشد وقتی از طریق علامت فلش باز و بسته اش می کنیم شروع و پایان مشخص می شود
حالا چرا ابتدا و انتهای تگ مهم است؟
چون که می خواهیم ببینم ویژگی تا کجا اعمال می شود یعنی چه؟
یعنی تا کجا اندازه فونت را تغییر می دهیم یا تغییر ایجاد می کنیم در کد انتها را یک جایی مشخص کردیم ولی در صفحه یک جای دیگر را می گوید
چرا اینطور می شود چون که تگ هایی اضافه شده است و ترتیب تگ ها بهم خورده است حالا ترتیب شان بهم بخورد چی می شود؟
اعمال ویژگی ها درست کار نمی کند یعنی چه اعمال ویژگی درست کار نمی کند؟
مثلا من می خواهم اندازه قلم یک قسمت از متن یا محتوا را تغییر بدهم ولی کل متن تغییر می کند
این مسئله خطایابی در بحث تگ ها می باشد .
اول می بینیم کجا در کد بسته شده است اینجا می شود. یعنی صفحه یا مرورگر می گوید تگ پاراگراف شما اینجا بسته شده است ولی در کد می بینید که ما اینجا تگ
پاراگراف نداریم به خاطر این است که ترتیب شان بهم خورده است یعنی چه ؟ یعنی مثلا تگ های شروع و پایان یکسان نیست یعنی چه مثلا
اگر 5 تا تگ شروع پاراگراف داریم باید 5 تا تگ پایان پاراگراف داشته باشیم تا اینجا که درست بود ولی در کل باید بگردیم از یک راه دیگر استفاده کنیم
ببینیم خطا داریم یا نه ببینیم در کل چند تا تگ شروع و پایان پاراگراف داریم کرسر را می گذاریم اول یا کلیک می کنیم روی خط اول و عمل جستجو را روبه
پایین انجام می دهیم یا جستجو روبه پایین می کنیم حالا چه چیزی جستجو می کنیم تگ شروع پاراگراف
خوب حالا تگ شروع که ویژگی داشت را پیدا نکرد این یک مشکل جستجو می باشد حالا جستجو شروع را باید تغییر بدهیم دوباره کرسر را به اول برمی گردانیم
پس درست شد اولین تگ شروع پاراگراف را پیدا کردیم
فکر کنم 31 تگ شروع پاراگراف داشتیم می توانیم دوباره بشماریم که اشتباه نکرده باشیم می توانی ازروش برعکس استفاده کنیم یعنی چه
به اخرین تگ شروع رسیدیم کرسر را می گذاریم در انتها ی جستجو حالا جستجوی روبه بالا می کنیم درست پس اخرین نتیجه جستجو اولین نتیجه جستجو می شود
پس 31 تگ شروع حالا تگ پایان پاراگراف را جستجو می کنیم چون ویژگی در تگ پایا پاراگراف قرار نمی گیرد به همان شکلی که هست می نویسیم
دوباره کرسر را به اول می بریم حالا جستجو را روبه پایین ادامه می دهیم پس اولین تگ پایان پاراگراف را پیدا کرد
دوباره مثل قبل برای اطمینان بیشتر می توانیم روبه بالا جستجو می کنیم فکر کنم 30 تا پاراگراف بسته داشته باشیم
حالا کرسر را به اخر جستجو می بریم عمل جستجو رو به بالا انجام می دهیم یا می کنیم پس 30 تا تگ پاراگراف بسته داشتیم یک تگ پاراگراف بسته اضافه می کنیم
حالا کجا اضافه می کنیم یک راهش این است که به بگردی ببینی کجا شروع دارد ولی پایان ندارد تگ پایان را اضافه کنی
یک راهش هم این است که قبل از تگ بادی یا بدنه یک تگ پاراگراف اضافه کنی بعد ترتیب اش در حالت کلی درست می شود این راه را برویم ببینیم جواب می دهد .تغییر نکرد
تگ شروع پاراگراف را پیدا کن
تگ پایان پاراگراف را پیدا کن
فکر کنم مشکل را پیدا کردیم
دوباره کرسر را به اول صفحه می بریم یک تگ شروعی پیدا کردیم که پایان نداشت
فکر کنم تگ پاراگراف اضافی این باشد چون طبق طراحی که قبلا داشتم این اضافی می باشد و اینجا نباید تگ پاراگراف باشد پس مشاهده می کنیم طراحی مختلف روی
محتوا گذاشتن یا قرار دادن یا برنامه نویسی کردن چه مشکلی را پیش می آوردحالا ادامه می دهیم .می بینید طبق اصول طراحی و طبق حالت قبلی اینجا تگ شروع
پاراگراف نداریم
مشاهده میکنید که چطور مفاهیم جستجو را با نرم افزار جستجو می کنیم وچطور خطایابی می کنیم این دفعه تگ شروعی پیدا نکردیم اما تگ پایان داشتیم
حالا برویم ان خطایی که پیدا کردیم اعمال کنیم اگر درست نشد باز ادامه می دهیم
هدف چی هست مرورگر و کدمان یکسان شوند
این قسمت یک تگ شروع و پایان پاراگراف ساخته است تگ باید اینجا بسته شود ولی اینجا بسته می شود در مروگر این را می گوید
همچنان در حال خطایابی هستیم. باز تغییراتی در کد دادیم حال دوباره نتیجه را مشاهده می کنیم
وقتی تغییرات فونت را روی تگ یا تگ استایل را روی این پاراگراف اعمال می کنیم باید این اعمال تا انتهای تگ پاراگراف پیش رود یکی از نشانه های
درست بودن این است اما تا اینجا اعمال تغییر فونت یا اندازه قلم پیش نرفته است
این قسمت را نگاه کنید این درست است و باید به این شکل باشد فکر کنم مرورگر می اید تگ های اضافی را کامل می کند یعنی
اگر تگ اضافی شروع داریم تگ پایان اضافه می کند و اگر تگ اضافه پایان داریم می اید تگ شروع اضافه می کند این متن راه حل ما باشد
شروع اموزش بخش دوم را در کد پیدا می کنیم و ان چیزی که فکر می کنیم اعمال می کنید در این قسمت هر تگی اضافه بود پاک می کنیم یک تگ پایان اضافی
است و یک تگ شروع اضافی می باشدیعنی در این فاصله اگر تگ پاراگراف پایان را حذف کنیم و تگ شروع این قسمت را حذف کنیم این تگ با این تگ
همخوانی دارند
یک بسته اضافی داریم این هم جواب نداد برویم مثال اعمال ویژگی را روی یک تگ دیگر بزنم تا مشکل طراحی را کنم .
استایل را روی تگ بادی قرار می دهیم قبلا گفتیم ویژگی استایل روی تمام تگ ها اعمال می شود شکل استایل هم شبیه هم می باشد
پس تا اینجا چند نوع خطایابی را پیش رفتیم و موفق نشدیم حالا در ادامه بیشتر در مورد طراحی کار می کنیم.
حالا برگردیم به مسئله اعمال ویژگی روی یک تگ حال قسمت بادی فونت اش را تغییر می دهیم
می بینید که تمام متن اندازه قلم یا فونت اش تغییر کرد یعنی چی؟ چون که تمام تگ ها زیر یا بچه یا داخل تگ بادی می باشند یا اصطلاحا
تگ بادی
parent
است وبقیه تگها
child
هستند یا تگ بادی راس می باشد بقیه زیر گروه او هستند حالا اسم های متفاوتی دارند این مسئله برای همه اعمال می شود حال این ویژگی روی
یک تگ هم می توان اعمال کرد که روی هیچ کدام تاثیر نداشته باشد مثلا روی تگ بولد اعمال می کنیم حال درون مروگر می توانیم نتیجه را مشاهده کنیم
چون که تگ بولد هیچ زیر تگی ندارد به همین خاطر فقط روی خودش اعمال می شود چه چیزی رویش اعمال شد اندازه فونت یا قلم اش تغییر کرد
یک جای دیگر هم می توان نتیجه را دید و تغییر دادبخش ویژگی ها را در مرورگر هم می توانی ببینی هم می توانی تغییر بدهی
یک تگ دیگر هم یا یک ویژگی دیگری هم این متن دارد که بولد بودن بود که این ویژگی متن هم می باشد اینجا می توانید بببینید
این هم توضیح ویژگی یک تگ و چگونگی اعمالش روی تگ های مختلف و دیدن نتیجه ان در مرورگر و بحث خطایابی که پیش رفتیم ولی انطوری که می خواستیم
پیش نرفت پس تا اینجا با ویژگی استایل اشنا شدید که خودش دارای مسئله های خیلی زیادی می باشی بقیه را می توانی خودتان مشاهده یا مطالعه کنید
مثلا رنگ اش را می توانید تغییر بدهید فونت اش را تغییر بدهید
اندازه قلم یا فونت را تغییر بدهید
جهت متن را تغییر بدهید
پس با پیشرفت در بحث کدنویسی به اشکالات کدمان دست پیدا می کنیم
از نگاه ما کدمان درست ولی از نگاه مرورگراشکالاتی دارد یک کار دیگری می کنیم
یک فایل اچ تی ام ال دیگرایجاد می کنیم محتوا را کمی کوتاه می کنیم و کدنویسی را ادامه می دهیم ناقصی های کد را کامل می کنیم
ذخیره میکنیم و اجرا می کنیم تا نتیجه را مشاهده کنیم پس مشکلش ربطی به ادامه کدها نداشت حالا برویم جستجو کنیم
می گوید یا یک جواب این است که تگ های پاراگراف نمی توانند به صورت تو درتو قرار بگیرند حالا از یک تگ دیگری استفاده می کنیم
از تگ دایو استفاده می کنیم و نتیجه را مشاهده می کنیم بله درست شد و خطایابی کردیم که چرا یکسری تگ ها اضافی مرورگر اضافه میکرد پس
یکی از تفاوت های تگ را متوجه شدیم
یکسری از تگ ها می توانند تودر تو به کار روند اما یکسری از تگ ها نمی توانند تودرتو قرار بگیرند مثلا تگ پاراگراف می توانند استفاده شود اما نمی تواند
تگ های دیگررا دربربگیرد اما تگ دایو می تواند استفاده شود و تگ های دیگر را دربربگیرد
حالا اعمال فونت که در اول اموزش را روی این تگ اعمال می کنیم که می خواستیم روی تگ پاراگراف اعمال کنیم گفتیم که ویژگی
استایل روی تمام تگ ها به کار می رود
حالا در نتیجه مشاهده می کنیم ما یک روشی را استفاده کردیم ان هم کوتاه کردن محتوایمان بود حالا برمی گردیم به صفحه اصلی مان و نتیجه را انجا هم مشاهده می کنیم
حالا فونت یا اندازه متن را روی تگ اعمال می کنیم حالا تغییر اندازه متن را مشاهده می کنید مشاهده کردید که خطایابی کردیم
ویژگی را به ان قسمتی که می خواستیم اعمال کردیم
فیلم آموزشی:
ستاره) فایل های مورد نیاز:
موفق باشید
به امید خدا
