بازگشت   پاتوق بچه های ایرونی - Demo Version > کامپیوتر و شبکه > برنامه نویسی

 
 
ابزارهای موضوع نحوه نمایش
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n
ارسال لینک | \r\nدنباله \r\n\r\n \r\nداغ کن - کلوب دات کام \r\n\r\n \r\nداغ کن - کلوب دات کام \r\n\r\n
\r\n
\r\n
\r\n\r\n \r\n
\r\n پیش فرض\r\n آموزش HTML : فصل اول\r\n \r\n
\r\n \r\n \r\n\r\n \r\n
\r\n \r\n
با یاد و نام خداوند مهربون شروع می کنم
فصل اول : آشنایی با html
\n
\n با عرض سلام خدمت همه ی خوبان و بزرگواران پاتوقی و با اجازه از همه اساتید و دوستان اهل فن ، امیدوارم که جسارت منو ببخشید . در صورتی که هر گونه اشکال را مشاهده کردید ، و یا نظر و پسشنهادری داشتید یا به خود بنده بگوید که من اصلاح کنم و یا اگر دسترسی به ویرایش دارید خودتون ویرایش کنید . ممنون
\n همان طور که از نام عنوان مشخصه می خوام شما را در این فصل فقط با زبان html آشنا کنم
\n خوب در ابتدا چند نکته رو متذکر می شم تا نگرانی های خیلی ها رو بر طرف کنم .
\n 1- بعضی ها اعتقاد دارن که وب نویسی ، خیلی از زبان های برنامه نویسی دیگه آسان تره ، خوب راست هم می گن ، چون واقعا پیچیدگی زیادی نداره و اگه طرف کمی وقت بذاره می تونه وب نویسی را به طور کامل در مدت بسیار کم یاد بگیره اما بعضی ها اعتقاد دارن که برنامه نویسی وب یکی از از سخت ترین زبان های دنیاست ، این افراد هم از یه جهاتی حق دارن ، چرا ؟
\n یک ) وب نویسی فقط محدود به زبان html نیست . با html فقط می تونید صفحات ساده و استاتیک درست کنید . برای ساخت یک وب سایت حرفه ای شما نیازمند یادگیری دیگر زبان ها وب نویسی دیگری نیز می باشید تا امکانات وسیعی تری در اختیار شما قرار دهد از جمله این زبان ها می توان به CSS و JavaScript اشاره کرد . اما با زبان های نام برده شده در بالا فقط می تونید صفحات ثابت وب (استاتیک )رو درست کنید ، یعنی کاربر همان چیزی را می بیند که شما طراحی کردید نه بیشتر و نه کمتر .
\n اما نوعی دیگر از صفحات وب وجود دارد به نام داینامیک (پویا )که نیاز به استفاده از زبان های برنامه نویسی server side دارند . این گونه وب ها بنا بر نیاز و نوع درخواست کاربرخود ،همان لحظه توسط سرور ساخته می شود و شاید حتی فقط برای یک کاربر ساخته شود . برای مثال سایت گوگل را در نظر بگیرید ؛ افراد زیادی برای جست و جوی مطلب خود از این سایت استفاده می کنند و سرور گوگل با توجه به نیاز شما به جست و جوی عبارت خاص مورد نظر شما ، صفحات را ساخته و برای شما نمایش می دهد. از جمله زبان های راجع server side می توانم به php و asp.net اشاره کنم .در کل برای استفاده از هر کدوم از زبان های برنامه نویسی بالا ، نیاز به آشنایی با html را دارید .
\n دوم ) با اینکه زبان های وب نویسی از حجم کمترو کد های ساده تری برخوردار هستند اما روز به روز تغییر می کنند و استاندارد ها و کد های جدیدی اضافه می شود پس باید همیشه خودتون رو به روز نگه دارید در صورتی که شاید چنین چیزی کمتر در زبان های دیگر مشاهده شود. برای مثال جدیدا استاندارد html5 ارائه شده البته هنوز رایج نشده و حتی بعضی از مرورگر ها اون رو پشتیبانی نمی کنند . ما در این جا قصد بررسی html 4 رو نیز داریم .
\n
\n 2- اولین سوالی که ممکن است در ذهن شما به وجود آید این است که از چه برنامه ای برای نوشتن HTML استفاده می شود؟ در جواب باید بگم که برنامه های متعددی برای این امر تهیه و ساخته شده اما ساده ترین برنامه ای را که می توانیم برای ایجاد سند HTMLخود استفاده کنیم Notpad می باشد . پس تا انتهای این آموزش از notpad برای نوشتن صفحات خود استفاده می کنیم.
\n حالا چجوری از notpad برای نوشتن html استفاده کنیم ؟ خیلی خون سرد notpad رو باز می کنیم و دستورات رو می نویسیم . نکته در چگونه ذخیره کردنش هست! . از منو file گزینه save as رو انتخاب کنید. در قسمت file name نام دلخواه بنویسید و در آخر اسم صفحه .htm یا .html رو قرار بدهید به مثال زیر توجه کنید
\n
Home.html
اسم صفحه مثال بالا home و پسوند آن html است .
\n نکته : توجه کنید که پسوند های htm و html با هم هیچ فرقی ندارند و می تونید هر کدام را که دوست دارید استفاده کنید ولی باید دقت کنید که همیشه عادت کنید از یکی از این پسوند ها استفاده کنید ، چون ممکنه در آینده براتون مشکل زا شود.
\n حال در قسمت Encoding گزینه UTF-8 را انتخاب کنید و فایل را در جای دلخواه فایل خود ذخیره کنید .
\n چرا ما UTF-8رو انتخاب کردیم ؟ با انتخاب این گزینه می توانیم از کاراکتر های فارسی هم استفاده کنیم . در صورتی که نمی خوایم از حروف فارسی در صفحه وب خود استفاده کنیم می تونیم از ANSI هم استفاده کنید
\n
\n 3- هیچ نیازی نیست که شما کد ها را حفظ کنید. فقط کافیه کد ها را در حد آشنایی بشناسید . این یعنی چی ، مثلا شما وقتی کدی را دیدید فقط کافیه بدونید کار این کد چیه و لازم نیست دیکته ی اون رو به خاطر بسپارید . در آینده خواهم گفت که چطوری کد ها را حفظ و استفاده بکنید و الان نمی گم تا تنبل نشید.
\n
\n ممکن در مثال های اولیه از یک کد های استفاده کنم که به احتمال زیاد شما آشنایی با اون ها ندارید. این مثال ها فقط برای بررسی نمایش ترتیب کد ها و چگونگی نوشتن کد ها بیان می شود واصلا نگران نباشید که چیزی رو یاد نگرفتید ، دستورات را در آینده دونه به دونه بررسی می کنم.
\n
\n 4- بسیار از دستورات را رو ما در اینجا بررسی نمی کنم . چرا ؟ - چون خیلی از این کد ها امروزه کاربردی ندارند ، - بعضی از این کد ها در همه مرورگر ها کار نمی کنه ، - بعضی هاشون هم تکراریه . حالا شاید سوال پیش بیاد که مگه مخترع html معیوب ذهنی بوده که اومده کد های تکراری گذاشته ؟ در جواب باید بگم که نه ، ایشون از ناحیه مغز مشکلی نداشتن ، بلکه یکسری از کد ها در گذشته مفهم خاصی داشتن اما امروزه مترادف و هم معنی یکسری کد ها شدن . بذارید بحث رو بیشتر باز کنم . در html دو گونه کد وجود دار: کد ها منطقی و کد های فیزیکی .
\n در دستورات منطقی شما حدود و مفهوم رو بیان می کنید و اندازه دقیق رو مشخص نمی کنید بلکه هدف متمایز کردن متنی از سایر متون است و امثال این. ولی در کد های فیزیکی اندازه ها و ویژگی ها دقیقا بیان می شود . فرق دیگر این دو کد در این است ، ممکن است کد های منطقی در هر مرورگری به شکل خاص و متفاوتی نسبت به مرورگر دیگر نمایش دهد ولی کد های فیزیکی در همه ی مرورگر های ثابت و یک شکل است .
\n امروزه با استاندارد شدن مرورگر ها تقریبا کد های منطقی در همه مرور گر ها به شکل ثابت دیده می شود و می شه گفت که بعضی از کد ها منطقی و فیزیکی معادل یکدیگر شدن . در آینده بیشتر با این کد ها آشنا می شید .
\n
\n 5- تمامی دستورات html درون دو تگ ( < کد > ) نوشته می شود و هر دستور که نوشته می شود باید بسته هم بشود .برای مثال من طریقه نوشتن و بستن دستور body را مثال می زنم.
\n ابتدا کد را درون تگ می نویسم ( <body> ) ، نوشته های دلخواه را بعد از کد می نویسیم و در انتها مطالب ،همان کد را می نویسم فقط یک ( / ) به اول کد اضافه می کنیم . به مثال زیر توجه کنید. به ین کار بستن کد می گویند
\n
\n
\r\n
کد:
\r\n
<body>
\n
متن دلخواه
\n
</body>
\r\n
البته استثنا هم وجود دارد و بعضی از کد ها بسته نمی شود مانند دستور <br> که فقط یک بار نوشته می شود و به بستن نیازی ندارد.
\n 6- زبان html به بزرگ و کوچک بودن حروف حساس نیست همچنین به تعداد فاصله ها (enter و space ) هم حساس نیست . مثالا این دو کد هیچ تفاوتی با یکدیگر ندارند فقط دومی با ایجاد فاصله مناسب باعث شده که خوانده، کد را بهتر درک کند به عبارتی کد منظم تر شده و قابل فهم تر است .
\n مثال یک :
\n
\r\n
کد:
\r\n
<html><body><p>     learning Html     </p></body></html>\r\n
مثال دو:
\r\n
کد:
\r\n
 
<html>
\n
<body>
\n
Learning html
\n
</body>
\n
</html>
\r\n
خوب حالا به یکسری کد های ابتدایی و پایه ای آشنا می شویم . ابتدا به قالب اصلی نوشتن دستورات html در زیر آشنا شوید و بعد کم کم توضیح می دهم.
\r\n
کد:
\r\n
 
<html>
\n
<head>
\n
</head>
\n
<body>
\n
</body>
\n
</html>
\r\n
- تمامی دستورات باید در داخل تگ html نوشته شود.
\n - نوشتن دستورات درون html به دو دسته تقسیم می شود . قسمت سر یا head و قسمت بدنه یا body
\n - دستورات نام برده در بالا ، در هر سند html فقط یک با نوشته می شود.
\n - در قسمت سر یا head محل قرار دادن عنوان صفحه ، و همچنین قرار دادن جزئیاتی مثل نوشتن کد های css ، نوشتن کلمات کلیدی ، روبات ها و... استفاده می شود ، که به این قسمت فعلا کاری نداریم فقط برای نوشتن عنوان صفحه استفاده می کنیم
\n برای نوشتن عنوان صفحه وب خود می تونید از دستور زیر استفاده کنید
\n
\r\n
کد:
\r\n
 <title/> عنوان صفحه  <title>\r\n
- اکثر کد ها و دستورات دیگر را درون تگ body می نویسیم .
\n
\n - تا اینجا با طریقه کلی نوشتن دستورات آشنا شدید. اما در اینجا می خوایم راجبع نسبت دادن صفات به تگ ها بحث کنیم .
\n
\n به تمامی دستوراتی می توانیم صفاتی اضافه کنیم فقط الان بحثی رو اینکه این صفات چی هستن و چه صفاتی برای چه دستوراتی هستن رو نداریم فقط می خوایم طریقه نسبت دادن صفتی رو به تگی بررسی کنیم . طریقه نوشتن صفت به صورت زیر است :
\n

\n
\r\n
کد:
\r\n
< command attribute-name="value">\r\n
در اینجا منظور از command دستور ، منظور از attribute-name نام صفت و منظور از value مقدار یا نوع صفت می باشد.
\n به مثال زیر توجه کنید .
\r\n
کد:
\r\n
 
<body dir="rtl">\n
\nMy name is mahan \n\n/body>>
\r\n
با تگ body که آشنا شدید اما dir چیه ؟ اینجا dir همان صفته که می تونه بهش دو مقدار نسبت بدیم : rtl و ltr .
\n منظور از rtl ، Right to left یعنی از راست به چپ می باشد و ltr برعکس . این صفت باعث می شود تا کل صفحه ما راست چین شود . این صفت در صورت پیش فرض ltr می باشد . در کل بهتره که از این صفت برای راست چین کردن متن خود استفاده نکنیم ، چون ممکنه تو طراحی مشکلاتی رو ایجاد کنه . در آینده طریقه راست چین رو بیان می کنم .
\n نکته :اگر دقت کرده باشید صفت رو فقط در تگ اول می نویسیم و لازم نیست موقع بستن اون رو تکرار کنیم
\n نکته : صفات را داخل دو دابل کوتیشن ( " " ) قرار می دهیم .
\n
\n
\n
\n امیدوارم که از مطالب بالا لذت برده باشید و برای شما مفید واقع شده باشد .
\n در صورتی که احساس می کنید مطالب بالا را خوب درک نکرده اید احساس نگرانی نکنید و مطالب فوق فقط جهت آشنایی بوده .ولی حتما مثال های بالا را خودتون یک بار دیگر انجام دهید ، چون بدون تمرین ، یاد گیری انجام نمی شود.
\n در صورت اشکال ، مشکلتون رو در همین مبحث مطرح کنید تا دراشکالات دیگران هم بر طرف شود.
\n
\n
\n موفق باشید\r\n
\r\n \r\n\r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n
\r\n __________________
\r\n وقتی که برگه برنده تو دست توست ، لازم نیست جوانمردانه بازی کنی
\r\n (چرچیل )
\r\n
\r\n
\r\n \r\n \r\n\r\n \r\n\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n ویرایش توسط Admin : یک روز پیش در ساعت 07:19 PM\r\n \r\n \r\n \r\n
\r\n \r\n \r\n\r\n \r\n\r\n\r\n \r\n Mahan آنلاین نیست.\r\n\r\n\r\n \r\n \r\n \r\n \r\n  \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n پاسخ با نقل قول\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n 3 کاربر برای این پست سودمند از Mahan عزیز تشکر کرده اند:\r\n \r\n \r\n \r\n
\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n'; pd[9899] = '\r\n\r\n \r\n\r\n
\r\n
\r\n
\r\n\r\n
\r\n \r\n\r\n\r\n\r\n\r\n\r\n \r\n \r\n \r\n \r\n\r\n\r\n \r\n \r\n \r\n\r\n\r\n \r\n \r\n \r\n\r\n
\r\n \r\n قدیمی\r\n یک هفته پیش\r\n \r\n \r\n \r\n  \r\n #2\r\n \r\n
\r\n\r\n
\r\n \r\n Mahan\r\n \r\n \r\n
\r\n\r\n
مدیر
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
Points: 2,728, Level: 31Points: 2,728, Level: 31Points: 2,728, Level: 31
\r\n \r\n\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
Activity: 61%\r\n Activity: 61%\r\n Activity: 61%
\r\n \r\n
\r\n\r\n \r\n
\r\n  
Mahan آواتار ها\r\n
\r\n \r\n\r\n
\r\n  
\r\n
تاریخ عضویت: Jul 2010
\r\n \r\n \r\n
\r\n نوشته ها: 535\r\n
\r\n \r\n
سپاس: 541
\r\n
\r\n \r\n \r\n 504 بار در 284 پست سپاس\r\n \r\n \r\n
\r\n\r\n \r\n
\r\n\r\n حالت من : \r\n \r\n \r\n \r\n
\r\n \r\n\r\n \r\n\r\n \r\n \r\n
Mahan به Yahoo ارسال پیام
\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n\r\n\r\n \r\n
\r\n پیش فرض\r\n پاسخ : آموزش html : فصل اول\r\n
\r\n
\r\n \r\n \r\n\r\n \r\n
\r\n \r\n ممکن است ، متون کمی به هم ریخته دیده شود برای همین من فایل word این مطلب رو هم در اختیارتان قرار می دهم .\r\n
\r\n \r\n\r\n \r\n \r\n
\r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n
\r\n فایل های پیوست شده\r\n \r\n \r\n \r\n \r\n\r\n
نوع فایل: zipHTML1.zip (22.5 کیلو بایت, 2 نمایش)
\r\n
\r\n \r\n\r\n \r\n\r\n
\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n
\r\n __________________
\r\n وقتی که برگه برنده تو دست توست ، لازم نیست جوانمردانه بازی کنی
\r\n (چرچیل )
\r\n
\r\n
\r\n \r\n \r\n\r\n \r\n\r\n \r\n\r\n
\r\n Mahan آنلاین نیست.\r\n\r\n\r\n \r\n \r\n \r\n \r\n  \r\n \r\n \r\n \r\n \r\n \r\n \r\n پاسخ با نقل قول\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n 3 کاربر برای این پست سودمند از Mahan عزیز تشکر کرده اند:\r\n \r\n \r\n \r\n
\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n \r\n
\r\n
\r\n
\r\n\r\n\r\n\r\n'; pd[9902] = '\r\n\r\n \r\n\r\n
\r\n
\r\n
\r\n\r\n
\r\n \r\n\r\n\r\n\r\n\r\n\r\n \r\n \r\n \r\n \r\n\r\n\r\n \r\n \r\n \r\n\r\n\r\n \r\n \r\n \r\n\r\n
\r\n \r\n قدیمی\r\n یک هفته پیش\r\n \r\n \r\n \r\n  \r\n #3\r\n \r\n
\r\n\r\n
\r\n \r\n آیسان\r\n \r\n \r\n
\r\n\r\n
همکار مدیر
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
Points: 2,371, Level: 29Points: 2,371, Level: 29Points: 2,371, Level: 29
\r\n \r\n\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
Activity: 99%\r\n Activity: 99%\r\n Activity: 99%
\r\n \r\n
\r\n\r\n \r\n
\r\n  
آیسان آواتار ها\r\n
\r\n \r\n\r\n
\r\n  
\r\n
تاریخ عضویت: Jul 2010
\r\n
محل سکونت: تهران
\r\n \r\n
\r\n نوشته ها: 686\r\n
\r\n \r\n
سپاس: 1,519
\r\n
\r\n \r\n \r\n 528 بار در 341 پست سپاس\r\n \r\n \r\n
\r\n\r\n \r\n
\r\n\r\n حالت من : \r\n \r\n \r\n \r\n
\r\n \r\n\r\n \r\n\r\n \r\n \r\n
\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n\r\n\r\n \r\n
\r\n پیش فرض\r\n پاسخ : آموزش html : فصل اول\r\n
\r\n
\r\n \r\n \r\n\r\n \r\n
\r\n \r\n ماهان جان یه کم فونتش رو درشت تر میکردی .
\nباید عینک ته استکانی زد تا خوند !\r\n
\r\n \r\n\r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n
\r\n __________________
\r\n
\r\n
\r\n \r\n \r\n\r\n \r\n\r\n \r\n\r\n
\r\n \r\nآیسان هم اکنون آنلاین است.\r\n\r\n \r\n \r\n \r\n \r\n  \r\n \r\n \r\n \r\n \r\n \r\n \r\n پاسخ با نقل قول\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n \r\n
\r\n
\r\n
\r\n\r\n\r\n\r\n'; pd[9906] = '\r\n\r\n \r\n\r\n
\r\n
\r\n
\r\n\r\n
\r\n \r\n\r\n\r\n\r\n\r\n\r\n \r\n \r\n \r\n \r\n\r\n\r\n \r\n \r\n \r\n\r\n\r\n \r\n \r\n \r\n\r\n
\r\n \r\n قدیمی\r\n یک هفته پیش\r\n \r\n \r\n \r\n  \r\n #4\r\n \r\n
\r\n\r\n
\r\n \r\n Mahan\r\n \r\n \r\n
\r\n\r\n
مدیر
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
Points: 2,728, Level: 31Points: 2,728, Level: 31Points: 2,728, Level: 31
\r\n \r\n\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
Activity: 61%\r\n Activity: 61%\r\n Activity: 61%
\r\n \r\n
\r\n\r\n \r\n
\r\n  
Mahan آواتار ها\r\n
\r\n \r\n\r\n
\r\n  
\r\n
تاریخ عضویت: Jul 2010
\r\n \r\n \r\n
\r\n نوشته ها: 535\r\n
\r\n \r\n
سپاس: 541
\r\n
\r\n \r\n \r\n 504 بار در 284 پست سپاس\r\n \r\n \r\n
\r\n\r\n \r\n
\r\n\r\n حالت من : \r\n \r\n \r\n \r\n
\r\n \r\n\r\n \r\n\r\n \r\n \r\n
Mahan به Yahoo ارسال پیام
\r\n
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n\r\n\r\n \r\n
\r\n پیش فرض\r\n پاسخ : آموزش html : فصل اول\r\n
\r\n
\r\n \r\n \r\n\r\n \r\n
\r\n \r\n فونت رو درست کردم ، ولی کلا از روی فایل word مقاله رو مطالعه کن ، یکم اینجا مشکل داره\r\n
\r\n \r\n\r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n
\r\n __________________
\r\n وقتی که برگه برنده تو دست توست ، لازم نیست جوانمردانه بازی کنی
\r\n (چرچیل )
\r\n
\r\n
\r\n \r\n \r\n\r\n \r\n\r\n \r\n\r\n
\r\n Mahan آنلاین نیست.\r\n\r\n\r\n \r\n \r\n \r\n \r\n  \r\n \r\n \r\n \r\n \r\n \r\n \r\n پاسخ با نقل قول\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n 2 کاربر برای این پست سودمند از Mahan عزیز تشکر کرده اند:\r\n \r\n \r\n \r\n
\r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n \r\n
\r\n
\r\n
\r\n\r\n\r\n\r\n'; // next/previous post info pn[9897] = "9906,9899"; pn[0] = ",9897"; pn[9899] = "9897,9902"; pn[9902] = "9899,9906"; pn[9906] = "9902,9897"; // cached usernames pu[0] = guestphrase; pu[2] = "Mahan"; pu[8] = "آیسان"; // -->
Prev پست قبلی   پست بعدی Next
قدیمی یک هفته پیش   #1
مدیر
Points: 2,728, Level: 31 Points: 2,728, Level: 31 Points: 2,728, Level: 31
Activity: 61% Activity: 61% Activity: 61%
 
Mahan آواتار ها
 
تاریخ عضویت: Jul 2010
نوشته ها: 535
سپاس: 541
504 بار در 284 پست سپاس
حالت من :
Mahan به Yahoo ارسال پیام
ارسال لینک | دنباله داغ کن - کلوب دات کام داغ کن - کلوب دات کام

پیش فرض آموزش HTML : فصل اول
با یاد و نام خداوند مهربون شروع می کنم
فصل اول : آشنایی با html

با عرض سلام خدمت همه ی خوبان و بزرگواران پاتوقی و با اجازه از همه اساتید و دوستان اهل فن ، امیدوارم که جسارت منو ببخشید . در صورتی که هر گونه اشکال را مشاهده کردید ، و یا نظر و پسشنهادری داشتید یا به خود بنده بگوید که من اصلاح کنم و یا اگر دسترسی به ویرایش دارید خودتون ویرایش کنید . ممنون
همان طور که از نام عنوان مشخصه می خوام شما را در این فصل فقط با زبان html آشنا کنم
خوب در ابتدا چند نکته رو متذکر می شم تا نگرانی های خیلی ها رو بر طرف کنم .
1- بعضی ها اعتقاد دارن که وب نویسی ، خیلی از زبان های برنامه نویسی دیگه آسان تره ، خوب راست هم می گن ، چون واقعا پیچیدگی زیادی نداره و اگه طرف کمی وقت بذاره می تونه وب نویسی را به طور کامل در مدت بسیار کم یاد بگیره اما بعضی ها اعتقاد دارن که برنامه نویسی وب یکی از از سخت ترین زبان های دنیاست ، این افراد هم از یه جهاتی حق دارن ، چرا ؟
یک ) وب نویسی فقط محدود به زبان html نیست . با html فقط می تونید صفحات ساده و استاتیک درست کنید . برای ساخت یک وب سایت حرفه ای شما نیازمند یادگیری دیگر زبان ها وب نویسی دیگری نیز می باشید تا امکانات وسیعی تری در اختیار شما قرار دهد از جمله این زبان ها می توان به CSS و JavaScript اشاره کرد . اما با زبان های نام برده شده در بالا فقط می تونید صفحات ثابت وب (استاتیک )رو درست کنید ، یعنی کاربر همان چیزی را می بیند که شما طراحی کردید نه بیشتر و نه کمتر .
اما نوعی دیگر از صفحات وب وجود دارد به نام داینامیک (پویا )که نیاز به استفاده از زبان های برنامه نویسی server side دارند . این گونه وب ها بنا بر نیاز و نوع درخواست کاربرخود ،همان لحظه توسط سرور ساخته می شود و شاید حتی فقط برای یک کاربر ساخته شود . برای مثال سایت گوگل را در نظر بگیرید ؛ افراد زیادی برای جست و جوی مطلب خود از این سایت استفاده می کنند و سرور گوگل با توجه به نیاز شما به جست و جوی عبارت خاص مورد نظر شما ، صفحات را ساخته و برای شما نمایش می دهد. از جمله زبان های راجع server side می توانم به php و asp.net اشاره کنم .در کل برای استفاده از هر کدوم از زبان های برنامه نویسی بالا ، نیاز به آشنایی با html را دارید .
دوم ) با اینکه زبان های وب نویسی از حجم کمترو کد های ساده تری برخوردار هستند اما روز به روز تغییر می کنند و استاندارد ها و کد های جدیدی اضافه می شود پس باید همیشه خودتون رو به روز نگه دارید در صورتی که شاید چنین چیزی کمتر در زبان های دیگر مشاهده شود. برای مثال جدیدا استاندارد html5 ارائه شده البته هنوز رایج نشده و حتی بعضی از مرورگر ها اون رو پشتیبانی نمی کنند . ما در این جا قصد بررسی html 4 رو نیز داریم .

2- اولین سوالی که ممکن است در ذهن شما به وجود آید این است که از چه برنامه ای برای نوشتن HTML استفاده می شود؟ در جواب باید بگم که برنامه های متعددی برای این امر تهیه و ساخته شده اما ساده ترین برنامه ای را که می توانیم برای ایجاد سند HTMLخود استفاده کنیم Notpad می باشد . پس تا انتهای این آموزش از notpad برای نوشتن صفحات خود استفاده می کنیم.
حالا چجوری از notpad برای نوشتن html استفاده کنیم ؟ خیلی خون سرد notpad رو باز می کنیم و دستورات رو می نویسیم . نکته در چگونه ذخیره کردنش هست! . از منو file گزینه save as رو انتخاب کنید. در قسمت file name نام دلخواه بنویسید و در آخر اسم صفحه .htm یا .html رو قرار بدهید به مثال زیر توجه کنید
Home.html
اسم صفحه مثال بالا home و پسوند آن html است .
نکته : توجه کنید که پسوند های htm و html با هم هیچ فرقی ندارند و می تونید هر کدام را که دوست دارید استفاده کنید ولی باید دقت کنید که همیشه عادت کنید از یکی از این پسوند ها استفاده کنید ، چون ممکنه در آینده براتون مشکل زا شود.
حال در قسمت Encoding گزینه UTF-8 را انتخاب کنید و فایل را در جای دلخواه فایل خود ذخیره کنید .
چرا ما UTF-8رو انتخاب کردیم ؟ با انتخاب این گزینه می توانیم از کاراکتر های فارسی هم استفاده کنیم . در صورتی که نمی خوایم از حروف فارسی در صفحه وب خود استفاده کنیم می تونیم از ANSI هم استفاده کنید

3- هیچ نیازی نیست که شما کد ها را حفظ کنید. فقط کافیه کد ها را در حد آشنایی بشناسید . این یعنی چی ، مثلا شما وقتی کدی را دیدید فقط کافیه بدونید کار این کد چیه و لازم نیست دیکته ی اون رو به خاطر بسپارید . در آینده خواهم گفت که چطوری کد ها را حفظ و استفاده بکنید و الان نمی گم تا تنبل نشید.

ممکن در مثال های اولیه از یک کد های استفاده کنم که به احتمال زیاد شما آشنایی با اون ها ندارید. این مثال ها فقط برای بررسی نمایش ترتیب کد ها و چگونگی نوشتن کد ها بیان می شود واصلا نگران نباشید که چیزی رو یاد نگرفتید ، دستورات را در آینده دونه به دونه بررسی می کنم.

4- بسیار از دستورات را رو ما در اینجا بررسی نمی کنم . چرا ؟ - چون خیلی از این کد ها امروزه کاربردی ندارند ، - بعضی از این کد ها در همه مرورگر ها کار نمی کنه ، - بعضی هاشون هم تکراریه . حالا شاید سوال پیش بیاد که مگه مخترع html معیوب ذهنی بوده که اومده کد های تکراری گذاشته ؟ در جواب باید بگم که نه ، ایشون از ناحیه مغز مشکلی نداشتن ، بلکه یکسری از کد ها در گذشته مفهم خاصی داشتن اما امروزه مترادف و هم معنی یکسری کد ها شدن . بذارید بحث رو بیشتر باز کنم . در html دو گونه کد وجود دار: کد ها منطقی و کد های فیزیکی .
در دستورات منطقی شما حدود و مفهوم رو بیان می کنید و اندازه دقیق رو مشخص نمی کنید بلکه هدف متمایز کردن متنی از سایر متون است و امثال این. ولی در کد های فیزیکی اندازه ها و ویژگی ها دقیقا بیان می شود . فرق دیگر این دو کد در این است ، ممکن است کد های منطقی در هر مرورگری به شکل خاص و متفاوتی نسبت به مرورگر دیگر نمایش دهد ولی کد های فیزیکی در همه ی مرورگر های ثابت و یک شکل است .
امروزه با استاندارد شدن مرورگر ها تقریبا کد های منطقی در همه مرور گر ها به شکل ثابت دیده می شود و می شه گفت که بعضی از کد ها منطقی و فیزیکی معادل یکدیگر شدن . در آینده بیشتر با این کد ها آشنا می شید .

5- تمامی دستورات html درون دو تگ ( < کد > ) نوشته می شود و هر دستور که نوشته می شود باید بسته هم بشود .برای مثال من طریقه نوشتن و بستن دستور body را مثال می زنم.
ابتدا کد را درون تگ می نویسم ( <body> ) ، نوشته های دلخواه را بعد از کد می نویسیم و در انتها مطالب ،همان کد را می نویسم فقط یک ( / ) به اول کد اضافه می کنیم . به مثال زیر توجه کنید. به ین کار بستن کد می گویند

کد:
<body>
متن دلخواه
</body>
البته استثنا هم وجود دارد و بعضی از کد ها بسته نمی شود مانند دستور <br> که فقط یک بار نوشته می شود و به بستن نیازی ندارد.
6- زبان html به بزرگ و کوچک بودن حروف حساس نیست همچنین به تعداد فاصله ها (enter و space ) هم حساس نیست . مثالا این دو کد هیچ تفاوتی با یکدیگر ندارند فقط دومی با ایجاد فاصله مناسب باعث شده که خوانده، کد را بهتر درک کند به عبارتی کد منظم تر شده و قابل فهم تر است .
مثال یک :
کد:
<html><body><p>     learning Html     </p></body></html>
مثال دو:
کد:
 
<html>
<body>
Learning html
</body>
</html>
خوب حالا به یکسری کد های ابتدایی و پایه ای آشنا می شویم . ابتدا به قالب اصلی نوشتن دستورات html در زیر آشنا شوید و بعد کم کم توضیح می دهم.
کد:
 
<html>
<head>
</head>
<body>
</body>
</html>
- تمامی دستورات باید در داخل تگ html نوشته شود.
- نوشتن دستورات درون html به دو دسته تقسیم می شود . قسمت سر یا head و قسمت بدنه یا body
- دستورات نام برده در بالا ، در هر سند html فقط یک با نوشته می شود.
- در قسمت سر یا head محل قرار دادن عنوان صفحه ، و همچنین قرار دادن جزئیاتی مثل نوشتن کد های css ، نوشتن کلمات کلیدی ، روبات ها و... استفاده می شود ، که به این قسمت فعلا کاری نداریم فقط برای نوشتن عنوان صفحه استفاده می کنیم
برای نوشتن عنوان صفحه وب خود می تونید از دستور زیر استفاده کنید
کد:
 <title/> عنوان صفحه  <title>
- اکثر کد ها و دستورات دیگر را درون تگ body می نویسیم .

- تا اینجا با طریقه کلی نوشتن دستورات آشنا شدید. اما در اینجا می خوایم راجبع نسبت دادن صفات به تگ ها بحث کنیم .

به تمامی دستوراتی می توانیم صفاتی اضافه کنیم فقط الان بحثی رو اینکه این صفات چی هستن و چه صفاتی برای چه دستوراتی هستن رو نداریم فقط می خوایم طریقه نسبت دادن صفتی رو به تگی بررسی کنیم . طریقه نوشتن صفت به صورت زیر است :

کد:
< command attribute-name="value">
در اینجا منظور از command دستور ، منظور از attribute-name نام صفت و منظور از value مقدار یا نوع صفت می باشد.
به مثال زیر توجه کنید .
کد:
 
<body dir="rtl">
My name is mahan /body>>
با تگ body که آشنا شدید اما dir چیه ؟ اینجا dir همان صفته که می تونه بهش دو مقدار نسبت بدیم : rtl و ltr .
منظور از rtl ، Right to left یعنی از راست به چپ می باشد و ltr برعکس . این صفت باعث می شود تا کل صفحه ما راست چین شود . این صفت در صورت پیش فرض ltr می باشد . در کل بهتره که از این صفت برای راست چین کردن متن خود استفاده نکنیم ، چون ممکنه تو طراحی مشکلاتی رو ایجاد کنه . در آینده طریقه راست چین رو بیان می کنم .
نکته :اگر دقت کرده باشید صفت رو فقط در تگ اول می نویسیم و لازم نیست موقع بستن اون رو تکرار کنیم
نکته : صفات را داخل دو دابل کوتیشن ( " " ) قرار می دهیم .



امیدوارم که از مطالب بالا لذت برده باشید و برای شما مفید واقع شده باشد .
در صورتی که احساس می کنید مطالب بالا را خوب درک نکرده اید احساس نگرانی نکنید و مطالب فوق فقط جهت آشنایی بوده .ولی حتما مثال های بالا را خودتون یک بار دیگر انجام دهید ، چون بدون تمرین ، یاد گیری انجام نمی شود.
در صورت اشکال ، مشکلتون رو در همین مبحث مطرح کنید تا دراشکالات دیگران هم بر طرف شود.


موفق باشید
__________________
وقتی که برگه برنده تو دست توست ، لازم نیست جوانمردانه بازی کنی
(چرچیل )

ویرایش توسط Admin : یک روز پیش در ساعت 07:19 PM
Mahan آنلاین نیست.   پاسخ با نقل قول
3 کاربر برای این پست سودمند از Mahan عزیز تشکر کرده اند:
 

برچسب ها
html, فصل, آموزش, اول

ابزارهای موضوع
نحوه نمایش

مجوز های ارسال و ویرایش
شما می توانید موضوع جدیدی ارسال کنید
شما امکان ارسال پاسخ را دارید
شما نمیتوانید فایل پیوست در پست خود ضمیمه کنید
شما نمیتوانید پست های خود را ویرایش کنید

BB code هست فعال
شکلک ها فعال است
کد [IMG] فعال است
کد HTML غیر فعال است
Trackbacks are غیر فعال
Pingbacks are غیر فعال
Refbacks are غیر فعال




Powered by vBulletin Version 3.8.4
Copyright ©2000 - 2010, Jelsoft Enterprises Ltd.
SEO by vBSEO

Free Persian Language By Persian Forum Ver 3.0 Farsi Skin Developed By: Admin
مسئوليت مطالب و نظرات كاربران، به عهده خود آنان است و لزوما نظر انجمن نيست

Check PageRank

WebMaster : webmastervb3
Sitemap