برای استفاده نکردن یا کمتر استفاده کردن از ان تگ های پاراگراف و اسپن استفاده کردیم می خواهیم برای طراحی مان ایا می توانیم از تگ دیگری استفاده کنیم
یک طراحی را نگاه کردیم که این سایت استفاده کرده بود که استفاد نکردیم وجایی به نظرمان نرسید که ازش استفاده کنیم
هم خط جدید دارد
هم ترتیب دارد
هم محتوای هر تگ مشخص است
یک از مسئله هایی که تگ خط جدید دارد درست است که نسبت به تگ های دیگر کمتر استفاده می شود مسئله اگر از این تگ استفاده کنیم نسبت به این تگ مشخص است که این تگ
استفاده کردن اش راحت است اما محتوا را نمی توانیم از این طریق پیدا کنیم یکی از روش های که برای معنا دار کردن محتوا بود استفاده از تگ ها بود
یکی از روش های پیدا کردن محتوا یا تغییر روی محتوا استفاده از کلاس بود مثلا اگر بخواهیم تگ خط جدید را تغییر بدهیم وبرسیم به تگ اش مثلا می خواهیم این محتوا را تغییر
بدهیم اصلا می بینید که بی معنی است تغییری نمی کند اما تگ پاراگراف که تگ خط جدید را هم دارد
می بینید که محتوایش را تغییر می دهد این هم یکی دیگر از علت های تغییر
پس اگر بخواهیم از یک تگ در سورس کدمان استفاده کنیم باید طراحی در نظر داشته باشیم براساس طراحی تگ را پیاده سازی می کنیم
حالا اگر طراحی را پیاده سازی کردیم تگ های بهتری وجود دارد یا ازروی تگ ها به طراحی بهتری می رسیم به همین شکلی که پیش رفتیم
در این قسمت مسئله عنوان و توضیحات را داخل تگی قرار داده است ما این مسئله را داخل تگ لیست توضیحات قرار می دادیم ولی اینجا داخل تگی قرار داده است به نام جدول
ایا می توانیم در این طراحی از جدول استفاده کنیم چیزی به نظرم نمی رسد براساس محتوا چون این قسمت از محتوا هم
کلا محتوا به این شکل می باشد که دوقسمت قسمت سوم توضیحات اش و خود این قسمت هم سه قسمت دارد براساس محتوا به این شکل می باشد
به توضیحات یا اموزش این تگ مراجعه کنم ببینم اصول طراحی ا ش چطور است
چه جاهایی از این تگ استفاده می شود
من چطور می توانم از این تگ استفاده کنم
ایا نیاز است از این تگ در این قسمت استفاده کنم
پس هرچیزی که بتوانم از ان مفهوم سطر و ستون بیرون بکشم می توانم از تگ جدول استفاده کنم با همین توضیح می توانم طراحی کنم
و تگ خط جدید ببینیم چی می شود
این قسمتی از توضیحات بخش سوم می باشد ایا می توانم مفهوم سطر وستون برایش بسازم
می توانند در یک سطر و ستون قرا بگیرند
اولین طراحی که به نظرمان می رسید نمی توانیم که وسط متن ان را عنوان کنیم این وسط متن به همین خاطر از تگ بولد استفاده کردیم اگر مثل این ها عنوان بود از تگ هد استفاده می کردیم
وپس طراحی براساس پاراگراف را باید حذف کنم تا تغییر مشخص شود
اول تگ های خط جدید را پاک می کنیم اگر خواستیم طراحی را نگه داریم می توانیم ذخیره اش کنیم پس فرض می کنیم این طراحی خوبی است پس نگه اش داشتیم یا یک نکته ای دارد که
بعدا می توانیم ازش استفاده کنیم
نمی دانم چطوری راست به چپ شد چند ساله دارم با نوتپد می نویسم همیشه چپ به راست بوده است اولین باری است که راست به چپ می شود اصلا چطوری برمی گردد به حالت قبلی
این مسئله هم درست با کنترل شیفت چپ به حالت قبلی برگشت .
حالا برمی گردیم به مسئله استفاده از جدول پس این قسمت را می توانیم یک سطر و ستون در نظر بگیریم وچون توانستیم یک سطر و ستون در نظر بگیریم پس می توانیم این قسمت را که بخش اول از بخش سوم
توضیحات مان می باشد را به جدول تبدیل کنیم حال باید بیینم این نوع طراحی را چطورپیاده سازی کنیم .اول باید بدانیم چطور جدول پیاده سازی کنیم بعد سطر وستون را پیاده سازی کنیم برای پیاده سازی جدول از تگ جدول
استفاده می کنیم .
این تگ جدول است در سورس کدمان پیاده سازی می کنیم <table ></table>
یک بروزرسانی می کنیم اولین بار است که از تگ جدول استفاده می کنیم از این روش ها استفاده می کنم که خطایابی راهم یاد بگیریم اینجا می گوید هیچ چیزی
درون تگ جدول وجود ندارد در حالی که می بینید اینجا محتوا درون تگ جدول وجود دارد شاید ذخیره نکردیم تفاوتی نکرد شاید موضوع تگ های تو در تو باشد
که تگ جدول درون تگ پاراگراف قرار گرفته است این قسمت درون تگ پاراگراف هم دیگر نیست تگ پاراگراف را حذف کردم همچنان ان قسمتی که می خواستیم
درون تگ نیست به قسمت اموزش می رویم شاید زیر بخش های تگ جدول را وارد نکردیم اجرا نمی شودگفتیم شاید محتوا درون تگ جدول قرار بگیرد حالا
سطر و ستون را پیاده سازی می کنیم برای پیاده سازی سطر از تگ سطر استفاده می کنیم
<table>
<tr>این سطر اول از جدول می باشد</tr>
</table>
پس تمام محتوا را درون جدول و درون یک سطر قرار دادیم پس یک سطر برای جدول طراحی کردیم ولی نتیجه تغییری نکرد
از درون اموزش نگاه کنیم ببینیم تگ جدول محددیتی دارد به هیچ محدودیتی اشاره نکرده است فقط در تمام جاها که پیاده سازی کرده است سطرو ستون وارد شده است حالا ستون را
هم وارد می کنیم
<table>
<tr>
<td>این یعنی سطر اول ستون اول</td>
</tr>
</table>
پس یک جدول طراحی کردیم با یک سطر و یک ستون حالا در سورس کدمان وارد می کنیم تمام این محتوا را درون یک سطر ویک ستون قرار می دهیم با این طراحی
پس وارد نکردن سطر و ستون جزو محدودیت های تگ جدول می باشد و جدول را بایک سطر وستون طراحی کردیم و محتوا را درونش قرار دادیم جدول اش کجا است سطرو ستون اش
الان کاملا مشخص است که محتوا در یک سطر ودریک ستون یا سلول قرار دارد در حالی که در سورس کدمان دقیقا درست است ما در سورس کدمان
هفت سطر داریم که قبلا برای این ها از خط جدید استفاده می کردیم یعنی هر سطری یک خط جدید وارد می کردیم که در نتیجه مشخص باشد حالا می اییم برای هرکدام به جای
خط جدید از سطر یا سطر جدید استفاده می کنیم و به جای این تمام محتوا در یک سطر و یک ستون باشد هر سطر یا خط در یک سطر وستون قرار می گیرد
قبلا طراحی یک سطر و ستون را توضیح دادم حال طراحی این که هر خط به سطر وستون تبدیل شود
الان هفت تاسطر داریم که هر سطر یک ستون داریم می بینید که تگ بولد درون جدول اعمال شده است ایا می توانستیم یک سطر داشته باشیم هفت تا ستون
محتوا دیگر شبیه سورس مان نمی شد یا محتوا شبیه این است که خط ها زیر هم قرا بگیرند حالا این طراحی را هم برای فهم بیشتر پیش می رویم
سطرها را حذف می کنیم در این طراحی بی معنی است ولی اجرا می کنیم تفاوت را مشاهده کنیم الان فقط ستون داریم
طراحی مان یک سطر و هفت ستون شد الان طراحی جدولی کاملا مشخص است الان می توانیم محتوا را بخوانیم مثل قبل شاید بتوانیم بخوانیم ولی طراحی اش بی معنی است
به همین خاطر از طراحی یک سطر ویک ستون استفاده کردیم اگر نسبت به طراحی قبلی که استفاده از خط جدید است نگاه کنیم می بینم تعداد تگ های بیشتری استفاده شده است
ولی محتوایمان را معنا دار کرده است طراحی مان را بهتر کرده است دسترسی به محتوا راحت تر شده است پس برگشتیم به همان طراحی یک سطر ویک ستون این قسمت سوم بود که از
جدول استفاده کردیم که تگ پاراگراف هم وارد کنیم که حذف کرده بوده ایم پس تگ پاراگراف جدول درونش قرا نمی گیرد
گفتیم که بخش اموزشی داریم که سه بخش داشت و بخش سوم اش هم سه بخش داشت
<div>
<dl>
<!-- می خواستم بخش سوم رابه زیر بخش هایش متصل کنم
شروع یک تگ درون تگی دیگری که پایین تر بسته میشود.
-->
<div>
</dl><!--سه بخش را دراینجا قرار دادیم-->
<div><!--بخش سوم زیربخش های اش را اینجا قرار دادیم-->
<table></table><!--بخش اول از بخش سوم را اینجا قرار دادیم-->
<p></p>بخش دوم
<p></p>بخش سوم
</div>
</div>
</div>
این طراحی است که تااینجا برای این قسمت قراردادیم حال برای ان دوبخش از جدول استفاده کنیم چون تعداد دایو ها یکسان بوده است خودش یک طوری کامل کرده است من این قسمت دایو
گذاشته بودم هنوز هم بروزرسانی نکردم ولی دایوای نیست
<div>
<dl>
</dl><!--سه بخش را دراینجا قرار دادیم-->
<div><!--بخش سوم زیربخش های اش را اینجا قرار دادیم-->
<table></table><!--بخش اول از بخش سوم را اینجا قرار دادیم-->
<p>پس درون این تگ ،تگ ها اسپن و هد قرار دادیم قبول نکرد به همین خاطر جای تگ را تغییر دادیم</p>بخش دوم
<p></p>بخش سوم
</div>
</div>
تگ های پاراگراف در سورس کدمان درست است شاید ترکیب کلی تگ های پاراگراف به هم خورده است به همین خاطر باید کل سورس را نگاه کرد
طراحی قبلی مان را کامل می کنیم اگر طراحی جدیدی یا تگ جدیدی استفاده کردیم تغییرش را متوجه شویم
پس تگ اضافی یا کم نداشتیم این تگ پاراگراف است که هر جایی استفاده نمی شود پس تگ پاراگراف درونش تگ های اسپن و هد قرار دادیم ولی به مشکل خوردیم یا
از ان به این حالت نمی توان استفاده کرد.
حالا می خواهیم دو قسمت را وارد تگ جدول کنیم چرا یک بار اینجا می نویسی یک بار درون سورس کد وقتی اینجا یا درون نوت پد می نویسم نمای کلی از مسئله را می نویسم ودرون
سورس کد حالت کلی را پیاده سازی می کنم و بعد اجرا می کنم
<div>
<dl>
</dl><!--سه بخش را دراینجا قرار دادیم-->
<div><!--بخش سوم زیربخش های اش را اینجا قرار دادیم-->
<table>
<p>پس درون این تگ ،تگ ها اسپن و هد قرار دادیم قبول نکرد به همین خاطر جای تگ را تغییر دادیم</p>بخش دوم
<p></p>بخش سوم
</table><!--سه بخش را اینجا یا درون جدول قرار دادیم-->
</div>
</div>
همین تغییر را مشاهده می کنیم اصلا جابه جا شدن درون جدول قرار نگرفتن مسئله قبلی که باید سطر وستون هم برایشان تعریف کنید بخش دوم وسوم یک سطر و ستون
شده اند اما چون که تگ خط جدید دارند مشخص نیست چون تمام محتوایش درون یک سطر ویک ستون هستند یا درون یک سلول هستند
ما می خواستیم سه بخش را درون جدول قرار بدهیم همین مفهوم را پیاده سازی کردیم با جدول اما محتوا درون یک سطر وستون بی معنی شده است یا درخط جدید قرار نگرفته شبیه
قبل شد چه تفاوتی کرد الان محتوا درون سه بخش هستند و استفاده از خط جدید این ها مفهوم یک سطر و یک ستون است حالا برای این که هر سطری معناداشته باشد
یا قابل خواندن باشد تگ پاراگراف درون تگ سطر خوانده شده است یا اعمال می شود سه بخش را درون جدول قرار دادم و سه سطر و هر کدام یک ستون حالا
یک سطر داریم به تعداد سطرها ستون می سازیم این هم خوب است ولی به درد زبان ما نمی خورد همانطور که مشاهده می کنیم برای سطرهای دیگر هم مشکل پیش می اید یعنی به اندازه
تعداد ستون هایی که برای سطر اول ساختیم برای سطرهای دیگر هم ساخته می شوددراین حالت مشخص نیست به اموزش برویم ببینیم
از ویژگی استفاده کنیم همین ساختار سورس کد که درون یک جدول ویک سطر و یک ستون است را چطور کدش را پیاده سازی کنیم
یک راه اش این است که یک سطر ویک ستون یا یک سلول یه جدول بشود یا تگ های تودرتو جدول می خواهم بدانم راه راحت تری نیست از کدهای سایت نگاه کنیم
ببینیم ایده ای به ذهن مان نمی رسد این راه ها رفته ام محتوا باید سطرهای مختلفی قرار بگیرند نه در ستون های مختلفی
استفاده از تگ جدول تو درتو یعنی جدول داریم با سه سطر که هر سطری داری یک ستون می باشد سطراول ستون اول دارای هفت سطر می باشد که این هفت سطر را تبدیل به یک جدول
این جدول جایگزین طراحی با خط جدید می باشد یعنی اگر خط جدید بگذارید یک طراحی اگر از تگ جدول استفاده کنید یک طراحی و اگر از تگ پاراگراف استفاده کنید یک طراحی می باشد
همین نوت پد را بگذار روی اینترنت خیلی خودت را اذیت نکن مرورگر هم این نوت پد را می شناسد این همین نوت پدی هست که اولین روز رویش کار کردی می بینید که
مرورگراین را پشتیبانی می کند درسته اگر خواستی به لینکی بروی خودت برو اول کپی کن بعد داخل مرورگر بنویس بعد داخل وب سایت شو
فرض کن این نوت پد روی اینترنت هست و بقیه دارند از این نوت پد برای بحث محتوایش ازش استفاده می کنند خوب یکی از تفاوت هایش مشخص شد این که مسئله ی خیلی مهمی نیست نه کاربرد تگ لینک مشخص شد
یک مسئله دیگری هم می تواند باشد روی یک لینکی اگر کلیک کنم ممکن است هک شوم این مسئله ام هست تازه کاربردهای دیگرهم را به شما اموزش دهم
این که همین نوت پد را فرض کنیم بخواهد یک غیر فارسی زبان بخواند نیازی نیست یک صفحه اچ تی ام ال غیر فارسی طراحی کنی کافی است بله به زبان دیگر ترجمه شد و یک
غیر فارسی زبان می تواند بخواند چه کاری است این همه وقت برنامه نویسی اچ تی ام ال کنید بعد تگ های را یاد بگیرید و بعد بدانید چه کاربردی در زبان های مختلف دارد تازه انقدر قوی
است که تاریخ راهم تغییر می دهد تازه به هر زبانی بخواهید ترجمه می شود این هم اگر خواستید صفحه اچ تی ام ال به زبان های دیگر ترجمه کنید نیازی نیست حالا به نظرتان همین هست
وقتی علت استفاده از کاری که می کنی را ندانی این نوع سوالات یا ابهامات می تواند کاری که می کنی را زیر سوال ببرد
درحالی که در کد مشاهده می کنید حتی اگر بخواهید نوت پد را درون مرورگر باز کنید یا اجرا کنید دارید از کد اچ تی ام ال
<pre></pre>
استفاده می کنید پس یکی از مشکلات یا یکی از راه حل های که ممکن است در ذهن مان ایجاد شود را متوجه شدیم ام مسئله ی دیگرهم هست شما روی وب فقط به اندازه تگ
<pre></pre>
شناخته شده هستید بقیه تگ ها یا کدها را همه ی صفحه های وب دارند یا اگر می خواهید روی وب شناخته شوید یا درون وب بین هزاران وب سایت یا وب پیج شناخته شوید باید لینک این
نوت پد تان که روی اینترنت است را برای دیگران باید بفرستید یعنی این لینک را بفرستم نه این لینک روی کامپیوترخودتان است اگر کسی هک تان کند به همه کامپیوترتان دسترسی دارد
اگر نه کسی به کامپیوترشما دسترسی ندارد پس باید یک لینکی برایش بفرستید که به این فایل دسترسی داشته باشد پس باید روی اینترنت بگذارید
وادرس یا لینک روی اینترنت را برایش ارسال کنید.این که چطور یک فایل را روی اینترنت بگذارید اینجا توضیح دادم اینجا که روی کامپیوتر خودتان است می دانم ولی
روی اینترنت نگذاشتم وقتی روی اینترت گذاشتم ادرس لینک اموزشی اش را روی این اموزش می گذارم پس این مسئله که نوت پد را بدون برنامه نویسی روی اینترنت بگذاریم
و لینک اش را به دیگران ارسال کنیم
ساخت ایمیل
وارد شدن به ایمیل
وارد شدن به درایو مجازی تان روی اینترنت چطور این را بسازم
ساختن یک پوشه یا فولدرحالا وارد پوشه می شویم حال نوت پد را که از قبل کدنویسی نکردیم وارد پوشه می کنیم این همان فایلی است که در روز اول کدنویسی اچ تی ام ال نکردیم
حال فایل روی اینترنت قرار گرفت و می توانیم لینک اش ر ابه دیگران ارسال کنیم
این همان فایل ورد است درست فایل ورد روی اینترنت می باشد یعنی بدون این که برنامه نویسی اچ تی ام ال کنید می توانید این فایل را به این شکل به دیگران نشان بدهید
با این فایل که کدنویسی کردید می توانید مقایسه کنید که می خواهید به دیگران نشان بدهید
محیط های مختلفی که می توانید فایل تان را به همه نشان بدهید بله به همه چون که روی اینترنت است
الان خودمان می بینیم باید کاری کنیم بقیه ببینند پس اول چون که این درایو مجازی برای من است باید اول اجازه دسترسی به این فایل را به دیگران بدهم
پس با این روش همه می توانند به این فایل دسترسی داشته باشند
لینک دسترسی به این فایل را کپی می کنیم پس همه می توانند این فایل را به این شکل ببینند این خروجی هست که کدنویسی نکردیم و می توانیم به دیگران ارائه بدهیم
این هم خروجی است که با کدنویسی می خواهید به دیگران ارائه بدهید
برای این که دیگران این صفحه را ببینید باید لینکش را به دیگران ارسال کنید
از طریق هر روشی که می دانید یا می توانید برای این دیگران این فایل را ببیند ارسال کنید پس
روش یا راه فهمیدن یافهماندن این که من این فایل را روی اینترنت دارم را ازکجا پیدا کنم؟ چطوری انسان ها را پیدا کنم ولینکم را برایشان بفرستم
https://drive.google.com/file/d/10o-RyakTrKeOnT7sAtd1zFXwcfodMleT/view
چطوراین لینک را به دیگران ارسال کنم برایم یک مسئله می شود پس الان فایلم بدون کدنویسی روی اینترنت است چه ربطی به کدنویسی دارد گفتم شما
به اندازه کدی که درون فایلتان هست شناخته شده هستی اگر پسوند فایل اچ تی ام ال باشد یعنی فایلی شناخته شده باشد تازه به اندازه یک تگ شناخته شده هستی.
یعنی چه پسوند فایل تان نوت پد یا اچ تی ام ال
کدنویسی را در فایل اچ تی ام ال و محتوایمان در فایل نوت پد هست پس یک روش برای دیدن محتوایم این شد که این لینک را به دیگران ارسال کنم و به همان اندازه شناخته می شوم
حالا برویم به بحث های دیگر فایل غیر کدنویسی ام را هم روی اینترنت گذاشتم ولینک اش را برای دیگران فرستادم
فایلم را هم کدنویسی نکردم وروی اینترنت گذاشتم همه ی این ها علت هایش را توضیح دادم
خوب اگر لینکم را برای کسی نفرستم چطور افراد باید به این لینک دسترسی پیدا کنند چطور به محتوایم دسترسی پیدا کنند چطور فایلم را بشناسند چطور افراد به محیط دسترسی پیدا کنند
مگر این محیط با ایمیل باز نمی شود و ایمیل برای من نیست چطور افراد به فایلی که درون ایمیل ام گذاشته اند دسترسی پیدا کنند راه حلش را گفتم از طریق لینک
به همه ی افراد که نمی توانی لینک رابفرستی پس روش های دیگر را باید بدانیم
محتوای من درباره برنامه نویسی می باشد حال می خواهم بدانم موتورهای جستجو چه فایلی به من می دهند درسته روش بعدی یا کلا یکی از علت های استفاده از کدنویسی
شناختن روی اینترنت است و این شناختن روی اینترنت توسط چه کسانی یا چه چیزهایی انجام می شود توسط موتورهای جستجو حالا می خواهیم ببینیم اگر فایل نوت پد روی اینترنت داشته باشیم
موتورهای جستجو زودتر ما را پیدا می کنند یا فایل اچ تی ام ال داشته باشیم زبان محتوای ما هم فارسی می باشد این صفحه ای است که برای من موتورهای جستجو اورده اند
پس روش دیگری که می توانند محتوای من را پیدا کنند جستجو کردن است پس این یک فایل نوت پد نیست یک فایل حاوی کدهای اچ تی ام ال است
می دانم که این فایل اچ تی ام ال است از روی کدهایش مشخص است می خواهم دقیق متوجه شوم اگر بخواهم به
محتوایی که روی اینترنت گذاشتم نزدیک شوم باید فایل نوت پد را جستجو کنم
یک روش این است که در تنظیمات گوگل نوع فایل تان را انتخاب کنید یک روش استفاده از کامند می باشد از کامند
filetype:پسوند فایل نوت پد را وارد می کنیم نه اسم نرم افزرا را
الان دارم جستجو می کنم فایل هایی با نوع نوت پد می باشد این نتیجه جستجو با چیزی که من روی اینترنت گذاشتم نزدیک است اگر به صورت یا حالت
معمولی جستجو کنید فایل های اچ تی ام ال برگردانده می شود می خواهیم بدانیم چند درصد احتمال دارد فایل های نوت پد توسط انسان ها روی اینترنت جستجو شود
این فایل نوت پدی هست که پیدا شده است
پس این هم روش جستجو در موتورهای جستجو یا روش هایی که فایل نوت پد بدون کدنویسی من را روی اینترنت می خواهند پیدا کنند
فایل من روی اینترنت هست و من جستجو کردم فایل های نوت پدی که حاوی محتوای
"زبان برنامه نویسی پایتون "
هستند را برایم پیدا کن که به محتوایم یا فایلم نرسیدم اکانتم را جستجو کنم اصلا یک کاری می کنم خود فایل را جستجو کنیم
با این که خودفایل را در موتورهای جستجو وارد کردم ولی به محتوای فایلم نرسیدم
این هم روشی که لینک ات را برای کسی می فرستی
فیلم آموزشی:
فایل های مورد نیاز:
موفق باشید
به امید خدا
