به نام خدا
می خواهیم با یک فایل نوت پد وب سایت بسازیم و روی اینترنت و فضای مجازی قرار بدهیم یا بگذاریم
این محتوای فایل نوت پد که که توضیحات آموزشی از یک فیلم آموزشی است حالا می خواهیم درباره این موضوع
که چطور یک کار پیدا کنم ؟
چطوریک پروژه را حل کنم یا به نتیجه برسانم ؟
من یک دانش آموز هستم یک دانشجو هستم یک طلبه هستم چگونه برای خودم کارپیدا کنم؟
چگونه هم درس بخوانم و هم کار کنم ؟
چگونه تحصیل کنم و کار برای خودم بسازم؟
چگونه تحصیل کنم و ازدرسی که می خوانم کار داشته باشم؟
چگونه دانش خودم رابه عمل تبدیل کنم؟
چگونه تحصیل وکارم بایکدیگر هم خوانی داشته باشد؟
چگونه یک جستجوگر یا محقق شوم؟
چگونه روش پروژه حل کردن را یاد بگیرم؟
چگونه پروژه های خود را انتخاب کنم و با دیگران حل کنم؟
آموزش روند کلی پیشروی در یک پروژه؟
داستان های زندگی ام یا داستان های انسان شناسی یا داستان های که به من مربوط می شود یا داستان هایی که زندگی ام را ساخته است یا داستان هایی که با شما به اشتراک گذاشته ام یا داستان های انسان دیروز وفردا
یک وب پیج یا صفحات متفاوت بسازیم
به طور ساده تبدیل به فایل اچ تی ام ال اش می کنیم و بعد روی مرورگر نشان می دهیم ولی کسی نمی تواند ببنید چون که فقط روی کامپیوتر
خودم است . یک نتیجه یا نمونه اولیه از کاری که می خواهیم روی وب بگذاریم اینجا مشاهده می کنیم .
که اصطلاحا بهش می گویند
localhost
یک کپی ازش می گیریم اگر مشکلی برایش پیش آمد فایل اصلی خراب نشود
پسوند فایل همانطور که مشاهده می کنید تکس است
txt
این فایل روی وب نشان داده می شود و توسط مرورگر نمایش داده می شود ولی فایل وب نیست .الان وب سایت ساختیم
نه فقط یک فایل نوت پد را درون مرورگر باز کردیم مثل این که یک فایل نوت پد را با نوت پد باز کنیم یعنی مروگر این فایل را می خواند ربطی به وب سایت
یا برنامه نویسی تحت وب ندارد
پسوند فایل را عوض کردم ببینم تغییر کرد نه همچنان تکس است اگر تغییر کند
راحت ترین راه برای تغییرش این است که داخل فایل اصلی می رویم روی گزینه
file > save as
کلیک می کنید بعد گزینه
all files
را انتخاب می کنید به پسوند
.html
را وارد می کنید همراه با نام فایل که قبلا نوشته بودیم بعد شما مسیری را برای فایل انتخاب می کنید بعد روی گزینه ذخیره کلیک می کنید
حالا شما یک فایل اچ تی ام ال ساختید بدون کد نویسی همان طور که مشاهده می کنید ایکون تغییر کرد .وقتی بازش می کنید
محتوای درونش را می بینید که محتوای فایل اصلی که نوت پد است متفاوت است چه چیزی اش متفاوت است
ساختارش در فایل اچ تی ام ال باید ساختار برایش بسازی که به آن برنامه نویسی تحت وب یا اچ تی ام ال می گویند
HTML (hypter text markup langugage)
این یک توضیح مختصری درباره چرا از این زبان برنامه نویسی استفاده کنیم چطور استفاده می کنیم کجا استفاده می کنیم برای چی استفاده می کنیم
حالا این که چطور ازش استفاده کنیم .
پس تا اینجا یک فایل نوت پد داشتیم که حاوی توضیحات مان بود و می خواستیم روی وب بگذاریم امدیم از فایل اصلی یا فایل اچ تی ام ال ساختیم
و همه این کارها روی کامپیوتر مان داریم انجام می دهیم نه روی اینترنت
فایل دوم که پسوندش را تغییر دادیم ولی ایکونش تغییر نکرد پسوندش تغییر نکرد نامش تغییر کرد به همین خاطر ایکونش هم تغییر نکرد
می توانیم وارد فایل اچ تی ام ال که ساختیم بشویم و تغییرات یا برنامه نویسی کنیم
یا می توانیم وارد فایل اصلی نوت پد شویم و برنامه نویسی کنیم فرقی ندارد فقط اگر وارد فایل نوت پد شدیم در اخر باید فایل را با پسوند
.html
اچ تی ام ال ذخیره کنیم .کل تفاوتش در همین است حالا چطور برنامه نویسی کنیم باید با زبان اچ تی ام ال آشنا باشید اگر کامل نمی دانید می توانید به آموزش اش
بروید و هر قسمتی که می خواهید را در آنجا ببینید چه کار می کند .
اینجا توضیحاتی داده است مثلا
اچ تی ام ال زبانی برای صفحات وب
با اچ تی ام ال می توانید صفحات وب خودتان را بسازید
اچ تی ام ال آسان است یاد بگیرید شما لذت خواهید برد از آن
این ها مقدمات می روید به اصل کار می پردازیم.
این نتیجه کار است
این فایل را تغییر می دهیم که روی کامپیوتر مان است
آموزش را هم از این صفحه نگاه می کنیم
این که چه تغییری صفحه کند این در ذهن ما است که به آن خلاقیت یا طراحی می گویند می توانید این را از جایی کپی کنید دیگر نخواهید از اول بنویسید
یا طرح خودتان استفاده کنید مثلا می روید یک وب سایتی و از ان استفاده می کنیم از ان یعنی چه از کد آن چطوری ؟
داخل همین سایت گزینه نمونه های را جستجو می کنید
این الان نمونه یک وب سایت است که در این قسمت وب سایت است در این قسمت کدش هست حالا شما می توانید
این کد را درون یک فایل نوت پد ذخیره کنید و پسوند فایل را اچ تی ام ال بگذارید بعد تغییرات یا
محتوای خودتان درون کدها بگذارید بعد روی اینترنت بگذارید .
با این مسئله کاری نداریم که کدها را کپی کنیم . چون نمی دانید که هر کدی چه زبانی است حالا می رویم بحث ابتدایی مان که برنامه نویسی بود و می خواستیم
وب سایت یا صفحه وب خودمان را بنویسم .
اینجا یک نمونه از کد صفحه اچ تی ام ال را می بینید
به این
<>
تگ می گویند که یکی شروع و دیگری پایان است و کلمه ای که داخلش نوشته می شود این را معنا می دهد . هر کدام از این تگ ها
یک معنایی دارد . همانطور که مشاهده می کنید هر کدام تگ یک شروع و یک پایانی دارند . کل این کد یک صفحه وب را تشریح می کند
فارسی یا زبان انسانی اش اینطور می شود.
<!DOCTYPE html> یک فایل از نوع اچ تی ام ال
<html> شروع فایل اچ تی ام ال تشکیل شده از
<head>شروع هد یا سر یا بالای صفحه و ان تشکیل شده از
<title> شروع عنوان صفحه
</title> پایان عنوان
</head> پایان سر یا هد
<body> بدنه صفحه وب شروع
</body> بدنه صفحه وب پایان
</html> پایان فایل اچ تی ام ال
پس در کل یک صفحه وب از یک عنوان یا هد یا بالای سر تشکیل شده و از یک بدنه به صورت تصویری همان هد یا سر یا بالای صفحه می شود اینجا بدنه صفحه هم
می شود اینجا
درون صفحه مان که می خواهیم تغییرش دهیم و برای اش ساختار بسازیم .
به هر کدام از این ها یک تگ می گویند مثلا تگ بدنه یا بادی می باشد که / باعث بسته شدن اش می شود
<body> بدنه صفحه وب شروع
</body> بدنه صفحه وب پایان
در این کد دو تا تگ دیگر هم هست فعلا با این کاری نداریم پس یک فایل نوت پد بسازیم ابتدای کار را توضیح می دهم بعد می رویم فایل اصلی مان
الان فرمت این فایل نوت پد است می توانی همین الان یک فایل اچ تی ام ال بسازی می توانی در اخربسازی هر طوری که می توانی یا راحت هستید .
حالا کد را درون فایل وارد می کنیم یا ذخیره می کنیم یا کپی می کنیم هر کدام که خودتان راحت هستید هر کدی که می نویسم فایل را اجرا می کنم
تا نتیجه مشخص شود یادتان نرود که این فایل روی اینترنت یا وب نیست درون کامپیوترخودتان است.
تا اینجا نتیجه ای نداشتیم که چون فقط یک فایل اچ تی ام ال ساختیم و به مروگر از طریق برنامه نویسی فهماندیم که این یک فایل اچ تی ام ال است .
اگر درون مروگر کلیک راست کنیم و گزینه
inpect
را کلیک کنیم می توانیم کد درون فایل اچ تی ام ال مان را ببینیم .همان طور که مشاهده می کنید کد درون فایل مان با کد درون این قسمت متفاوت است
یعنی ما فقط یک تگ نوشتیم ولی چند تگ دیگر اینجا قرار دارد . درسته یک صفحه وب یا اچ تی ام ال به طور پیش فرض دارای تگ هد و تگ بادی هست
یعنی وقتی شما پسوند فایل را تغییر می دهید به اچ تی ام ال یعنی یک فایل تحت وب می سازید پس وقتی فایل تحت وب می سازید به طور پیش فرض
یعنی تگ
html,head,body
برای فایل ساخته می شود. واین در جایی معلوم می شود که زبان فایل را می فهمد . مرورگر یک اجرا کننده فایل های تحت وب است یعنی زبان فایل های
تحت وب را می فهمد و اگر اشکالی درونشان باشد می تواند خطای شان را متوجه شود. برمی گردیم درون فایل مان و ادامه کدمان را می نویسیم .
درسته پسوند فایل را به اچ تی ام ال تغییر دادیم ولی بازهم درون محیط نوت پد یا با نرم افزار نوت پد کدنویسی می کنیم .
(با نرم افزار های دیگر هم می توانید ولی ساده ترین حالت ممکن را در این نرم افزار توضیح یا تشریح می کنم)
می رویم تگ بعدی را وارد کنیم . حالا چرا یک شروع و یک پایان دارد در ادامه متوجه می شوید فایل توضیحات کجا رفت در اینجا کمی اموزش داده می شود
که در فایل توضیحات متوجه شوید .بعد از وارد کردن ذخیره می کنید حالا اجرا می کنیم .پس باز نتیجه ای نداریم . چرا داریم مایک فایل
html
ساختیم با دوتگ
html ,head
شبیه قبل چون فایل اچ تی ام ال می باشد پیش فرض تگ های
html,head,body
درونش قرار دارد .باز ادامه می دهیم .تگ بعدی را وارد می کنیم این تگ بدنه صفحه وب می باشد.
اگر تااینجا کدی که نوشتید مشکل داشته باشد در قسمت
inspect
می توانید روی کد بروید و توضیحات اشکال را متوجه شوید و کد را اصلاح کنید. می گویدکه
کد باید به طور پیش فرض کمترین حالت ممکن تگ عنوان را داشته باشد که ما داریم ارام ارام پیش می رویم تا به ان تگ برسیم .
تگ بعدی تگ عنوان می باشد که بالای صفحه یا هد یا سر صفحه می باشد و درون تگ هد باید قرار بگیرد
درسته جای هر تگ مهم است که کجا قرار بگیرد پس تگ عنوان شروع و پایان را وارد می کنیم گفتیم چرا شروع و پایان باید داشته باشد
اینجا متوج ه می شوید چون که محتوای صفحه وب درون یا وسط شروع و پایان قرار می گیرد .
حالا ذخیره می کنیم .و بعد اجرا می کنیم .همانطور که مشاهده می کنیم عنوان صفحه تغییر کرد .حالا جای تگ عنوان را تغییر بدهیم .
جابه جای روی نتیجه تاثیر نمی گذارد اما در بحث کدنویسی یا ساختار کدنویسی عنوان چون که در بالای صفحه قرار دارد و برای نظم کدنویسی عنوان
را درون تگ هد قرار می دهند.اما اگر محتوا درون تگ هد قرار بگیرد دیگر به صورت عنوان در نظرگرفته نمی شود
پس نتیجه می گیریم تگ ها به محتوا معنا می بخشند.
تمام تگ هایی که در این صفحه مشاهده می کنید . در دوقسمت قرار می گیرند
تگ هد head
تگ بادی body
یک نمونه از تگی که درون هد قرار گرفته همراه با نتیجه مشاهده کردید .
حال یک نمونه از تگی که درون بادی قرار می گیرد هم مشاهده می کنید .تگ اچ 1
برای بزرگ کردن یا بزرگنمایی عنوان ها می باشد . وبرزگترین ان اچ ا می باشد
من اول یک متنی درون بادی می نویسم بعد از تگ استفاده می کنم که تاثیرش را متوجه شوید .
خیلی مهم است که محتوا را کجا می نویسید.بین کدام دو تگ همان طور که مشاهده می کنید در بدنه صفحه وب نشان داده شده است .
حالا از یک تگی که درون بدنه استفاده می شود استفاده می کنیم.اسم تگ اش است هدینگ
شروع تگ حتما برای پایان تگ باید بک اسلش بگذارید.
تغییر را مشاهده کردید حالا کد داخل فایل
html
مان را نگاه می کنیم .وقتی زیر تگ خط می کشد یعنی یک مشکلی یا خطایی یا هشداری هست که این را بعدا توضیح یا تشریح می کنم.
.
پس تااینجا با کلیات برنامه نویسی اچ تی ام ال ،تگ شناسی ،تگ شروع و پایان ،محتوا درون تگ ،عناصر صفحه وب از طریق تگ ها
آشنا شدید.
توضیح کامل تگ هدینگ در این قسمت می باشد.
<h1></h1>
توضیح کامل تگ عنوان در این قسمت می باشد
<title></title>
پس با چگونگی مطالعه یا آشنایی بیشتر با تگ ها هم متوجه شدید .حالا می خواهیم یک تگ دیگر را معرفی کنیم که
در تگ بادی
body
استفاده می شود.تگ پاراگراف یا تگ پی
<p>
می باشدشروع تگ پاراگراف پایان تگ پاراگراف.
اول یک متن را در حالت عادی مشاهده کنید . وقتی درون هیچ تگی نیست حالا درون تگ پاراگراف قرار می دهیم .
تغییری خاصی مشاهده نکردیم حالا درون فایل
html
را نگاه می کنیم مثل قبل دوباره درون تگ پاراگراف را خالی کردیم و متن یا محتوارا در حالت عادی قراردادیم یا گذاشتیم.
یعنی محتوا یا متن درون تگ
body
قرار دارد .حالا باز متن یا محتوا را تغییر یا جابه جا می کنیم .الان درون بادی یا بدنه قرار ندارد .ببینیم کجا هست .
ما درون
body
قرارش ندادیم همانطور که مشاهده می کنید اما درون فایل اچ تی ام ال مشاهده می کنید درون بادی هست یکسری از مسایل
خود به خود انجام می شود یعنی وقتی فایل اچ تی ام ال ساخته می شود محتوا جزوی از هد یا بدنه است به غیر از این دو نمی تواند جزو
تگ یا جای دیگری باشد .حالا محتوا را اوردیم داخل تگ پاراگراف
این هم کار را با تگ ها و حرکت کردن درونشان و کار با مفاهیم به صورت خیلی ساده .برای مطالعه بیشتر
یا آشنایی بیشتر با تگ پاراگراف می توانید از این قسمت استفاد ه کنید.
حالا می خواهیم این آموزش را در فایل توضیحات مان قرا بدهیم و از آن روی وب استفاده کنیم.
قبلا بعضی مفاهیم را توضیحات دادیم حالا فایل توضیحات مان را باز می کنیم .
از تگ هایی که اموزش دادیم استفاده می کنیم .
براساس موضوع
براساس تغییری که می خواهیم در ساختار صفحه وب ام بدهم از تگ هایی که یاد گرفتیم استفاده می کنیم مثلا عنوان ها را درون تگ
<h1></h1>
توضیحات را درون تگ
<p></p>
می گذاریم یا اگر می خواهیم هر جداسازی کنیم از تگ پاراگراف یا همان تگ
<p></p>
استفاده می کنیم براساس تفکرمان یا براساس طراحی مان از تگ ها استفاده می کنیم . حالا یکسری تغییرات را ببینیم
تا اینجا تغییرات را ذخیره می کنیم و نتیجه را مشاهده می کنیم .در کل براساس طراحی تان می توانید از تگ ها استفاده کنید .این یک نوع طراحی بود براساس موضوع ها
حال می توانید حالت های دیگری هم درنظر بگیرید به محتوای تان هم بستگی دارد .
وقتی تگ ها تکراری می شوند می توانید برایشان توضیحات یا کامنت بنویسید تگ کامنت
شروع کامنت پایان کامنت می تواند محتوا انقدر زیاد باشد که فاصله شروع و پایان تگ خیلی زیاد شود مثل همین جا
تگی که توضیحات نداشت پاک کردیم حال یک طراحی دیگری داریم همراه با توضیحات یعنی توضیحات مشخص می کند که چطور تگ ها را بگذاریم .
این طراحی بستگی به محتوای خودتان دارد که چطوری بخواهید دسته بندی اش کنید یا بهش نظم ببخشید
با شروع تگ پاراگراف شروع می شود وتمام کردن با تگ تمام پاراگراف می باشد.
وقتی بک اسلش وارد می کنم
/
یعنی پاراگرافی که شروع کرده بوده (در توضیحات اش واضح است)اینجا تمام یا پایان اش می باشد.
این اموزش فکر به کد یا طراحی به کد اچ تی ام ال حالا نتیجه را می بینیم به تغییرات یا اصلاحات می کنیم.
این هم تغییراتی در تگ کامنت یا توضیحات
مشکلات کدنویسی تان را می توانید در این قسمت مشاهده کنید
یکسری از توضیحات در خط دیگری هستند یا واضح تر دارای اینتر هستند ولی درون صفحه وب ان مشاهده نمی شود
برای این که صفحه وب اینتررا متوجه شود باید اسم دیگرش رفتن به خط جدید است از تگ
br
استفاده می کنید این تگ پایان ندارد اینجا پیدایش نکردم جستجو کردم باز همان صفحه امد باید ببینید که در کدام دسته بندی قرار دارد
حالا این تگ را فایل
html
قرار می دهم.هرجایی که بخواهیم یک خط جدید یا اینتر بخورد این تگ را وارد می کنم و جایی که بخوام عنوان باشد از تگ
<h2>
استفاده می کنم یا تگ های دیگر اچ حالا یک نگاهی به نتیجه می کنیم
فیلم آموزشی :
فایل های مورد نیاز :
ستاره) چرا وقتی فیلم های آموزشی وجود دارد از متون درون فیلم استفاده می کنی یعنی یکبار فیلم می گیری از متون یک بار هم متون را وارد می کنی می شود دوبار یا دوباره کاره می کنی مسئله پیدا کردن توسط موتورهای جستجو متون را بهتر یا زودتر از متن و ارتباط معنایی یا تفاوت ارتباط معنایی فیلم و متون دربحث ارتباط با انسان.
موفق باشید
به امیدخدا
