سلام امیدوارم که مطالب قبلی رو خوب مطالعه کرده باشید و در حال حاضر آماده برای وارد شدن به کار عملی و نوشتن کد باشید. توصیه من به شما این هست که حتما دو مقاله قبلی رو مطالعه کنید چون تا ندونید HTML چیست خوب یادگیری و نوشتن این زبان یکم مضحک هست.بدون هیچ حاشیه ای می ریم سر اصل مطلب .
نرم افزار مورد نیار برای نوشتن HTML :
خیلی از دوستان فکر می کنند که برای نوشتن کد های HTML و کلا برای طراحی وب باید حتما نرم افزار خاصی داشته باشی !!!!!!!!!!!!!! من (علی بهنام فر) اینجا اعلام می کنم 😉 که این صحبت ها همه مسخرست ، البته نرم افزار های موجود هست که کد نویسی رو ساده تر می کنند ولی خوب شما برای نوشتن کد ، حتما ، تاکید می کنم ، حتما ، نیازی به این نرم افزار ها ندارید.شما می تونید از نرم افزار Notepad که در تمام ویندوز ها موجود هست استفاده کنید و یا حداکثر نرم افزار Notepad++ دانلود و نصب کنید ، در حال حاضر اکثر طراحان حرفه ای وب از دو نرم افزار بالا برای طراحی وب استفاده می کنند.ما در طول آموزش از نرم افزار Notepad++ استفاده می کنیم .این نرم افزار رایگان بوده و شما می تونید از وب سایت اصلی Notepad++ آن را دانلود و نصب کنید.
خوب وارد نوشتن کد ها بشیم.در واقع HTML ساخته شده از شناسه ها یا همان تگ (tag) است.خوب حالا این تگ ها چی هستن و اصول نوشتن آن ها چیست ؟
اصول نوشتن تگ (tag) :
هر تگ با علامت کوچکتر ریاضی > آغاز می شود و با علامت بزرگتر < به پایان می رسد.
< نام تگ >
اجاره بدید یک تگ پر کاربرد اینجا معرفی کنم و ادامه ی این آموزش را بر اساس همین تگ پیش ببریم . <b> این تگ باعث ضخیم شدن متن می شود.ولی نوشتن فقط <b> برای ضخیم شدن متن کافی نیست در واقع ما با نوشتن <b> یک تگ رو باز کردیم ولی خوب باید این تگ بسته شود ، برای بستن یک تگ کافی است همان تگ با را /> شروع کنید به مثال زیر توجه کنید.
<b>تم دیزاینر : مرجع خدمات وبمستر برای پارسی زبانان</b>
نتیجه کد بالا :
حالا به مثال اشتباه زیر دقت کنید.در واقع ما در مثال زیر تگ رو نبستیم.به نتیجه دقت کنید.
<b>تم دیزاینر : مرجع خدمات وبمستر برای پارسی زبانان
نتیجه کد بالا :
به نظرم تا اینجا خوب با باز و بسته کردن یک تگ آشنا شدید ولی ساختار HTML از هزاران تگ تشکیل شده که باید در کنار هم به درستی کار کنند برای نوشتن تگ های استاندارد و صحیح ، متن زیر رو همیشه به خاطر داشته باشید (این شعار همیشگی من هم هست) :
هر تگ باز شده باید بسته شود و هر تگی که زود تر باز شد باید دیر تر بسته شود
برای فهم بهتر شعار بالا به مثال زیر دقت کنید.
<b><u>تم دیزاینر : مرجع خدمات وبمستر برای پارسی زبانان</u></b>
خوب همون طور که می بینید تگ <b> که روزتر باز شده دیر تر بسته شده <b/> .
اما خوب تگ های استثنایی هم داریم که نیاز به بسته شدن ندارند این تگ ها در ادامه آموزش ها مطرح خواهند شد در این بخش فقط به زدن یک مثال بسنده می کنیم.
<img src="http://www.theme-designer.com/wp-content/themes/wp/image/pic/1.jpg">
این تگ برای معرفی یک تصویر است.(این تگ فقط یک مثال بود در جلسات آینده کامل توضیح خواهیم داد.)
ساختار کلی HTML :
ساختار کلی این زبان از یک تگ اصلی و دو زیر تگ اصلی ساخته شده است.
تگ اصلی <html></html> : تمام کدهای نوشته شده باید بین این تگ باشد.
زیر تگ اصلی <head></head> : تمام تنظیمات صفحه مثل عنوان صفحه و یا کد های css و .. بین این تگ قرار خواهند گرفت.هر چیزی که اینجا قرار داده شود در صفحه به صورت مستقیم قابل دیدن نیست.
زیر تگ اصلی <body></body> : هر چیزی که اینجا قرار داده شود در صفحه شما به صورت مستقیم قابل دیدن است.
ساختار کلی HTML :
<html> <head> <title>عنوان صفحه</title> </head> <body> هر چیزی که اینجا قرار داده شود در صفحه شما به صورت مستقیم قابل دیدن است. </body> </html>
در کد های بالا شاید تگ <title></title> برای شما ناشناس باشد.محتوای بین این تگ به صورت عنوان صفحه شناخته می شود .مثلا در همین صفحه ما این تگ رو به صورت زیر تعریف کردیم.
<title>جلسه اول : ساختار و اصول نوشتن HTML</title>
میبینید که متن نوشته شده بین این همان عنوان صفحه در مرورگر هست.فکر کنم متوجه شدید دیگه 😉
نمایش و ذخیره سازی HTML :
شما برای داشتن یک صفحه اچ تی ام ال باید کد های که نوشته اید را با پسوند htm یا html ذخیره کنید.خوب نرم افزار ++Notepad باز کنید و کدهای که این جلسه یاد گرفتید را بنویسید.
من برای نمونه این کد را می نویسم :
<html> <head> <title>تست عنوان صفحه</title> </head> <body> هر چیزی که اینجا قرار داده شود در صفحه شما به صورت مستقیم قابل دیدن است.<br> <b>هر چیزی که اینجا قرار داده شود در صفحه شما به صورت مستقیم قابل دیدن است.</b> </body> </html>
بعد هم برید قسمت file و save as رو انتخاب کنید ، نام فایل (File name) را برای مثال ali-behnamfar.html وارد کنید و ذخیره کنید.حالا با هر مرورگری به جز Internet Explorer فایل ذخیره شده را باز کنید ، می بینید که نوشته های فارسی به صورت کد نمایش داده شده اند.برای حل این مشکل موقع ذخیره سازی Encoding را UTF-8 without BOM انتخاب کنید.
خوب حالا همان مراحل بالا را دوباره تکرار می کنیم.نرم افزار ++Notepad باز می کنید و کدهای که در این جلسه یاد گرفتیم را می نویسیم.
من برای نمونه این کد را می نویسم :
<html> <head> <title>تست عنوان صفحه</title> </head> <body> هر چیزی که اینجا قرار داده شود در صفحه شما به صورت مستقیم قابل دیدن است.<br> <b>هر چیزی که اینجا قرار داده شود در صفحه شما به صورت مستقیم قابل دیدن است.</b> </body> </html>
بعد از منو بالا نرم افزار ++Notepad روی Encoding کلیک کنید و بعد Encoding UTF-8 without BOM انتخاب کنید.بعد هم برید قسمت file و save as رو انتخاب کنید ، نام فایل (File name) را برای مثال ali-behnamfar.html وارد کنید و ذخیره کنید.می بینید همه چیز درست شد و دیگر در نمایش کراکتر های فارسی مشکلی نیست.اگر بخوام خیلی خلاصه توضیح بدم که ما چی کار کردم در واقع ما نوع ذخیره سازی کارکتر ها رو تغییر دادیم همین. 😉 به یاد داشته باشید از این جلسه به بعد تمام فایل ها رو با Encoding UTF-8 without BOM ذخیره کنید.
راستی تگ <br> هم باعث می شه شما به سطر بعدی متن برید.
تبریک می گم شما اولین صفحه HTML خود را کاملا استاندارد ساختید و ذخیره سازی کردید.
خوب این هم پایان جسله اول.سعی من کامل و ساده گویی بود ، امیدوارم تمام آموزش رو متوجه شده باشید.منتظر نظرات شما هستم.و شما هم منتظر جلسات بعدی باشید.
| اگر این قالب را دوست دارید امتیاز دهید : |
من کد تو نت پد پلاس پلاس نوشتم و سیو کردم ولی وقتی با فایرفاکس بازش کردم کد فارسی نبود.چه کنم
مرسی کاملا یاد گرفتم فقط یه مشکل دارم که اونم اینه رو گزینه ی Encoding UTF-8 without BOM کلیک میکنم بعد سیو بازم فارسی رو نمیاره
برم درس بعدی خیلی جذاب بود
ممنون
سلام من کد هارو نوشتم و سیو هم کردم حالا چه جوری باید تو فایرفاکس بازش کنم
سلام خسته نباشید لطف میکنید شرایط نویسندگی در سایتتون رو برای من ارسال کنید ، راستی قسمت تماس با ماتون کار نمیکنه
ممنون
سوال دومم رو کامل ننونشته:
تگ br نیاز به بستن نداره؟
با درود
ممنون از آموزش واضح و صریح شما
۱-فقط وقتی متن رو سیو میکنم و با موزیلا باز میکنم به این شکل ا قرار داده شود نمایش میده. (در ضمن encoding روی UFT-8 تنظیم شده.)
۲-تگ نیاز به بستن نداره؟
با سپاس از شما
سلام اسم وبلاگمو میخوام دوخطه زیبا کنم..چکار باید کنم ؟
ممنون،خیلی در مورد اچ تی ام ال دنبال آموزشی آسان و راحت میگشتم،که تو سایت شما دیدم،واقعا خیلی صریح و واضح توضیح میدید،من تمام مطالبتون رو دنبال میکنم.
notepad++
زبان فارسیو کلا پشتیبانی نمیکنه فارسی توش مینویسم همش ؟؟؟؟؟؟ علامت سوال میشه
notepad هم میشه توش فارسی بنویسی ولی وقتی سیو میکنم میبندم دوباره ک باز میکنم مثل قبلی میشه
!!!!
چ باید کرد؟؟؟ 😐
notepad++ کاملا از زبان فارسی پشتیبانی می کند و هیچ مشکلی ندارد.
اگر شما مشکل دارید احتمالا مشکل از ویندوز شما هست.
ویندوزم ۸
تازه هم آپدیت کردم 🙁
فک می کنم باید توش نحوه انکودتو بنویسی .
utf8
راجع به همین سرچ کن ، دقیق بفهمی
دوست عزیز برای نمایش دادن زبان فارسی در نرم افزار های note pad++ و note pad باید کد زیر رو در قسمت head بنویسید:
<meta charset="utf-8"
هنگام سیو کد های html در notepad در زیر یک نوشته ای هست به نام Encoding اونجا اگه utf-8 رو بزنی و سیو کنی مطالب فارسی هم نشان داده می شود.
دوست عزیز منم این مشکل رو داشتم
شما رو ویندوزتون زبان فارسی نصب نیست و باید برید و زبان فارسی رو براش دانلود کنید
باسلام و عرض ادب و خسته نباشید خدمت نویسنده محترم آموزش
دوست عزیز شما باید از منوی نرم افزار ++NotePad بروی گزینه Encoding کلیک نمایید و سپس گزینه Encode In UTF-8 را انتخاب نمایید تا متن فارسی بدون مشکل نمایش داده شود
باتشکر
برای رفع این مشکل از منو نوت تب وار انکودینگ بشید و encode in utf-8-bom را انتخاب کنید
بعد سیو رو بزنید
نوشته ها رو باید با فرمت utf8 ذخیره کنید تا مشکل برطرف بشه
در notepad
file/save as/encoding=utf-8
سلام .. خیلی مفید بووود..
با تشکر…
سلام ممنون از مطالب مفیدتون. همینطوری که پیش می رویم می شه کد نویسی را هم یادمون بدید؟
سلام خسته نباشین وب سایت خوبی دارین من آموزش های شما رو دنبال میکنم ممنونم
با تشکر
سلام
چقدر روون بود
و قلم و نوع نوشتارتون هم فوق العاده بود
سپاس . ادامه بدید لطفا
ایول دمتون گرم
آغااااااااااااااااااا ما الان درس بخونیم یا بشینیم این کد ها رو حفظ کنیم؟؟؟:d
ممنون حاجی دمت جیز
سلام استاد بهنام فر واقعا تشکر خیلی در این سختی شما اسونش کردی
فک نمیکردم به این زیبایی بتونم یه اچ تی ام ال بسازم ولی شد
اگه درس بعدی گذاشتین خیلی خوشحال میشم که اموزششو ببینم
با تشکر.
باسلام ببخشید من ذخیره سازی اچ دیام ال رو متوجه نشدم کلا اگه میشه یه جوری توضیح بدین .ممنون میشم . در ضمن من خودم طراحی سایت انجام میدم ببنید ظاهرش خوبه ؟ اگه خوبه بهم بگین ممنون میشم . فقط خواهشا جواب بدین من برام این قسمتش مهمه باتشکر .
http://www.chechelas.tk
دوست من لطفا کپی رایت رو را رعایت کنید.کار شما دزدی هست و بنده راضی نیستم.
سلام خسته نباشید فقط تگ رو نباید بست ؟
کجا ؟ چی ؟
اقا خیلی باحالی ادم وقتی میخونه میفهمه. ولی من کد رو تو نت پد نوشتم و سیو کردم ولی وقتی با فایرفاکس و یا کروم باز میکنم کد فارسی نیست.چه کنم
نوع encoding رو UTF-8 قرار بدید.
سلامencoding کجاس؟ برای من نداره کجاست جاش؟