** کینگ کد : بزرگترین مرجع دانلود سورس کد های برنامه نویسی اندروید، ویندوز و جدید ترین اسکریپت های روز دنیا **
-----------------------------------------------
** سورس فروشگاه اینترنتی مارکیت فارسی برای اندروید - سورس فروشگاه اینترنتی موکتز فارسی برای اندروید **
-----------------------------------------------
** اسکریپت چیست؟ و چگونه از آن استفاده کنیم؟ (آموزش کامل نصب اسکریپت) **
-----------------------------------------------
** (160 جلسه) آموزش کامل و 0 تا 100 برنامه نویسی PHP **
-----------------------------------------------
** دانلود فیلم آموزشی فتوشاپ فارسی **
-----------------------------------------------
» بروزترین سایت ایرانی محصولات کدکنیون ( سایت /https://codemilo.ir )
» Cicool – Page, Form, Rest API and CRUD Generator
» KingArchitect | Property Portfolio & Real Estate React Template – No JQuery
» Sheltos – Real Estate React Next Js with Redux Toolkit , React Hooks & API Routes Template
» Acres – Real Estate React Template
» Mingrand – Real Estate React Template
» ChawkBazar – Elementor Lifestyle and Fashion Ecommerce Theme
» Streamit 3.0 | Video Streaming WordPress Theme + RTL
» MagicAI – OpenAI Content, Text, Image, Chat, Code Generator as SaaS
» PHP Form Generator – Codeigniter 4 Form Master, Form Header Detail, User Management, Multi-language
» بروزترین سایت ایرانی محصولات کدکنیون ( سایت /https://codemilo.ir )
» Cicool – Page, Form, Rest API and CRUD Generator
» KingArchitect | Property Portfolio & Real Estate React Template – No JQuery
» Sheltos – Real Estate React Next Js with Redux Toolkit , React Hooks & API Routes Template
» Acres – Real Estate React Template
» Mingrand – Real Estate React Template
» ChawkBazar – Elementor Lifestyle and Fashion Ecommerce Theme
» Streamit 3.0 | Video Streaming WordPress Theme + RTL
» MagicAI – OpenAI Content, Text, Image, Chat, Code Generator as SaaS
» PHP Form Generator – Codeigniter 4 Form Master, Form Header Detail, User Management, Multi-language
آموزش html
فهرست کامل مطالب آموزش برنامه نویسی HTML از 0 تا 100 :
فصل اول – مباحث اولیه برای آشنایی با HTML :
جلسه اول – شروع یادگیری html
جلسه دوم – html چیست ؟
جلسه سوم – تگ ها در html
جلسه چهارم – شروع یک خط جدید با تگ br
جلسه پنجم – ایجاد عنوان با تگ های h1 و h2 و h3 و h4 و h5 و h6
جلسه ششم – ایجاد یک پاراگراف با تگ p
جلسه هفتم – تقسیم فایل html به دو بخش head و body
جلسه هشتم – مشخصه برای تگ ها در html
جلسه نهم – نرم افزار Dreamweaver برای راحت تر نوشتن کدها
جلسه دهم – تگ div برای ساخت اسکلت سایت
جلسه یازدهم – استفاده از id برای دادن نام اختصاصی به هر تگ div
جلسه دوزادهم – ساخت اسکلت یک سایت کامل
جلسه سیزدهم – قرار دادن سایت بر روی اینترنت
جلسه چهاردهم – تغییر رنگ پس زمینه سایت
جلسه پانزدهم – تعیین رنگ در html
جلسه شانزدهم – ساخت لینک در html
جلسه هفدهم – تعیین مشخصات فونت ها در html
جلسه هجدهم – نوشتن توضیحات در فایل html
جلسه نوزدهم – ترسیم خط افقی در html با تگ hr
جلسه بیستم – تگ های شیوه نمایش متن در html
جلسه بیست و یکم – نمایش عکس ها در html
جلسه بیست و دوم – ساخت جدول در html
جلسه بیست و سوم – ساخت لیست (فهرست) در html
جلسه بیست و چهارم – فرم ها در html
فصل دوم – نمایش متن در HTML :
حتما تابحال صفحات مربوط به پر کردن فرم در سایت ها را دیده اید . در اکثر مباحث آموزش html ، مواردی را معرفی کردیم که با آنها می توانستید اطلاعاتی را به کاربر نمایش بدهید اما فرم ها برای دریافت اطلاعات از کاربر و ذخیره این اطلاعات به کار می روند .
در یک فرم باید شخص کاربر برخی موارد را پر کرده و برخی را نیز انتخاب کند و سپس با فشار دادن یک دکمه ، اطلاعات به سرور (server) حاوی سایت ارسال خواهد شد .
فهرست ها جزو مواردی هستند که بسیار در ساختار سایت ها به کار می روند . یک فهرست شامل تعدادی بخش های مختلف است که به ترتیب و پشت سر هم نمایش داده می شوند . این بخش ها می توانند شامل موارد مختلفی همچون متن ، عکس ، جدول و … باشند . می توان در کنار این بخش ها ، شماره و یا هر شکل کوچک دیگری را قرار داد .
استفاده از جداول ، شیوه ای مناسب برای نمایش اطلاعات دسته بندی شده و منظم می باشد . در html از تگ <table> برای ساخت یک جدول استفاده می شود . شروع جدول را با تگ شروع <table> و پایان جدول را با تگ پایان <table/> اعلام می کنیم . درون این دو تگ ، با هر تگ <tr> می توانیم یک سطر برای جدول ایجاد کنیم . درون زوج تگ <tr> و <tr/> ، با هر تگ <td> می توانیم یک خانه برای آن سطر ایجاد کنیم .
نمایش عکس ها در فایل html بسیار پرکاربرد می باشد زیرا ارزش یک تصویر بیش از هزاران کلمه می باشد تا بتوانید به سادگی منظور خود را به مخاطب منتقل کنید . اما در استفاده از عکس ها باید بسیار مراقب باشید زیرا اگر حجم عکس های یک صفحه html زیاد باشد آنگاه زمان بارگذاری آن صفحه در مرورگر کاربر زیاد می شود و ممکن است کاربر پشیمان شده و از سایت شما خارج شود . توصیه می شود که هم این جنبه را در نظر بگیرید که عکس های سودمند برای کاربر جذاب خواهد بود و هم اینکه حجم عکس های مورد استفاده اگر زیاد باشد ممکن است کاربر را فراری بدهد .
معمولا زیاد پیش می آید که بخواهیم بخشی از متن را به شیوه ای خاص نمایش بدهیم ، مثلا برجسته تر ، زیرخط دار ، به صورت زیر نویس ، به صورت بالانویس و … . در html برای هر یک از این نمایش ها ، تگ های اختصاصی وجود دارد که در ادامه آنها را شرح خواهیم داد .
استفاده از خط افقی ، شیوه ای ساده برای جدا کردن مطالب مختلف از یکدیگر می باشد . برای ترسیم یک خط افقی در html ، از تگ <hr> استفاده می شود . در واقع این تگ باعث می شود که مطالب قبل و بعد از آن با یک خط افقی از یکدیگر جدا شوند . به مثال زیر توجه کنید :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<html> <head> </head> <body> <p> first paragraph . </p> <hr> <p> second paragraph . </p> </body> </html> |
first paragraph .
second paragraph .
مشاهده می کنید که بین پراگراف اول و پاراگراف دوم یک خط افقی رسم شده است .
معمولا زمانی که حجم کدهای فایل html افزایش یابد مجبور می شوید که توضیحاتی را برای بخش های مختلف کدها بنویسید تا در آینده راحت تر بتوانید آنها را تغییر دهید . این روش بسیار کارآمد است و از گیج شدن در بین انبوه کدها جلوگیری می کند . شروع توضیحات را با علامت های –!> و پایان توضیحات را با علامت های <– اعلام می کنیم . به مثال زیر توجه کنید :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<html> <head> </head> <body> <!-- comment about first paragragh --> <p> first paragraph . </p> <!-- comment about second paragragh --> <p> second paragraph . </p> </body> </html> |
first paragraph .
second paragraph .
مشاهده می کنید که دو توضیح نوشته شده در بین کدها ، در مرورگر نمایش داده نشده اند .
در یک فایل html بیش از هر چیز ، متن ها به کار می روند . زیبایی ، اندازه ، رنگ و سایر ویژگی های فونت های به کار رفته در متن اهمیت بسیار زیادی دارد . در html از تگ <font> برای تعیین ویژگی های فونت ها استفاده می شود . البته این کار را با CSS نیز می توان انجام داد و مطمئنا استفاده از CSS انتخاب بسیار بهتری می باشد ، اما برای شروع یادگیری و حتی در مواقعی خاص ، استفاده از تگ <font> مفید خواهد بود .
یکی از بهترین قابلیت های html ، امکان ساخت لینک می باشد تا کاربران به راحتی از یک صفحه html به صفحه ای دیگر بروند . تگ مورد استفاده برای ساخت لینک در html ، تگ <a> می باشد . به مثال زیر توجه کنید :
1 2 3 4 5 6 7 8 9 10 |
<html> <head> </head> <body> <a href="http://www.kingcode.ir">scriptbaran</a> </body> </html> |
مشاهده می کنید که عبارت scriptbaran به صورت یک لینک نمایش داده شده است . مشخصه href در تگ <a> ، آدرس لینک را مشخص کرده است که برابر http://www.kingcode.ir قرار داده شده است بنابراین چنانچه بر روی این لینک کلیک کنید صفحه اینترنتی مربوط به آدرس ذکر شده نمایش داده می شود .
در طراحی صفحات html در موارد زیادی همچون تعیین رنگ پس زمینه ، رنگ فونت های متن و … می توانیم از رنگ های مختلف استفاده کنیم . برای تعیین یک رنگ مشخص در html ، سه روش وجود دارد که در ادامه هر یک را شرح خواهیم داد .
چنانچه رنگ پس زمینه سایت را مشخص نکنید ، رنگ پس زمینه به طور پیش فرض به صورت سفید نمایش داده می شود . به مثال زیر توجه کنید :
1 2 3 4 5 6 7 8 9 10 11 12 |
<html> <head> </head> <body> <p> this is a paragraph . </p> </body> </html> |
مشاهده می کنید که رنگ پس زمینه همان رنگ پس زمینه پیش فرض ، یعنی رنگ سفید ، می باشد .
برای آنکه رنگ پس زمینه دیگری غیر از رنگ سفید انتخاب کنیم ( مثلا سبز ) می توانیم از مشخصه bgcolor برای تگ body استفاده کنیم . به مثال زیر توجه کنید :
1 2 3 4 5 6 7 8 9 10 11 12 |
<html> <head> </head> <body bgcolor="green"> <p> this is a paragraph . </p> </body> </html> |
مشاهده می کنید که رنگ پس زمینه به صورت سبز رنگ نمایش داده شده است .
برای تعیین رنگ در html ، چندین روش وجود دارد که این روش ها را در مبحث بعدی شرح خواهیم داد .
همان طور که قبلا گفتم ، اگر قصد ساخت یک سایت خیلی خوب را دارید لازم نیست که حتما همه قواعد ساخت سایت را یاد بگیرید یا اینکه چندین هفته بر روی آن کار کنید ، بلکه برای آنکه انگیزه خود را از دست ندهید باید ابتدا اسکلت و ساختار اصلی سایت را بسازید و آن را بر روی اینترنت قرار بدهید . شاید ظاهر و محتوای سایت شما دارای مشکلاتی باشد اما مهم نیست و به مرور زمان این مشکلات را برطرف خواهید نمود . وقتی صفحات سایت شما تنها بر روی کامپیوتر شخصیتان باشد انگیزه چندان زیادی برای بهتر کردن آن ندارید اما اگر سایت شما بر روی اینترنت قرار داشته باشد چون می دانید افراد دیگری آن را خواهند دید ، انگیزه فراوانی برای ارتقای سطح سایت خود خواهید داشت .
برای قرار دادن سایت خود بر روی اینترنت باید یک نام دامنه و یک هاست داشته باشید . در ادامه خواهم گفت که نام دامنه و هاست چیست و چگونه یک نام دامنه و یک هاست را انتخاب و خریداری نمایید . شاید شخصی یک هاست مجانی را به شما معرفی کند اما من با این انتخاب مخالفم زیرا بهتر است دل به دریا بزنید و وارد میدان واقعی نبرد سایت ها برای به دست آوردن مخاطب بشوید . از اشتباه کردن نترسید ، فقط کسی اشتباه نمی کند که هیچ تلاشی نکند . من خود از خدمات سایت زیر استفاده کرده ام :
اکنون آماده هستید که اسکلت یک سایت کامل را بسازید . کار من این است که کدهای مربوط به اسکلت یک سایت کامل را به شما بدهم و کار شما تنها یک چیز است و آن ((خرابکاری)) می باشد . نخندید کاملا جدی گفتم ، شما باید این کدها را کپی کرده و نتیجه را مشاهده کنید که یک اسکلت کامل برای سایت است سپس باید بخش های مختلف آن را دستکاری کنید و ببینید چه چیزهایی خراب می شود . تنها با این روش است که می توانید به چگونگی شکل گرفتن این اسکلت پی ببرید . نگران خرابکاری نباشید هر وقت که بخواهید کدهای صحیح در این صفحه در اختیار شما می باشد . البته من نیز توضیحاتی را در مورد کدها ارائه خواهم کرد .
همانطور که در مبحث قبلی گفتم ، نوشتن مشخصه style درون تگ div انتخاب مناسبی نیست و ما به جای آن روش بهتری را پیشنهاد می کنیم . در این روش برای هر تگ div یک نام اختصاصی ( یک id ) در نظر می گیریم و سپس ویژگی هایی را که می خواهیم به آن تگ div نسبت دهیم را در قسمت head از فایل html قرار می دهیم . همان مثال مبحث قبل را این بار با این روش می نویسیم :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<html> <head> <style type="text/css"> #column1 { float:left; padding-right:100px; } #column2 { float:left; } </style> </head> <body> <div id="column1"> <p>paragraph number 1</p> </div> <div id="column2"> <p>paragraph number 2</p> </div> </body> </html> |
paragraph number 1
paragraph number 2
مشاهده می کنید که نتیجه دقیقا همان نتیجه مثال مبحث قبلی است . این روش بسیار کارآمد است که باعث می شود با گذشت زمان که صفحه شما شلوغ تر می شود ، گیج نشوید و راحت تر بتوانید مشخصه های هر تگ را تغییر دهید .
در کدنویسی بالا ، ابتدا برای تگ div اول یک id با نام column1 و برای تگ div دوم یک id با نام column2 مشخص کرده ایم . حال باید کدهای CSS را بنویسیم . محل کدهای CSS باید بین تگ های <head> و <head/> باشد . شروع کدهای CSS را با تگ شروع <style type=”text/css”> اعلام می کنیم و پایان کدهای CSS را نیز با تگ پایانی <style/> اعلام می کنیم ، سپس بین این دو تگ ، کدهای CSS را می نویسیم . برای تگ های div ، نام هایی اختصاصی ( id ) ساختیم تا بتوانیم در این محل به آنها ویژگی هایی را اختصاص دهیم . برای اینکه هر تگ div را مشخص کنیم ابتدا علامت # را نوشته و سپس نام id مربوط به آن را می نویسیم . سپس بین دو علامت { و } تمامی مشخصه هایی را که می خواهیم برای آن تگ div می نویسیم .