سلام امیدوارم که مطالب قبلی رو خوب مطالعه کرده باشید و در حال حاضر آماده برای وارد شدن به کار عملی و نوشتن کد باشید. توصیه من به شما این هست که حتما دو مقاله قبلی رو مطالعه کنید چون تا ندونید 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 خود را کاملا استاندارد ساختید و ذخیره سازی کردید.
خوب این هم پایان جسله اول.سعی من کامل و ساده گویی بود ، امیدوارم تمام آموزش رو متوجه شده باشید.منتظر نظرات شما هستم.و شما هم منتظر جلسات بعدی باشید.
| اگر این قالب را دوست دارید امتیاز دهید : |
سلام ادمین
چقدر سختههههه
ولی میشه یادش گرفت فکر کنم…
(داداش همچین ساده هم نگفته بودیا؟؟؟ D:
واسه کسی که کدها فقط به چشمش آشنا باشه خیلی ساده نیس ولی دستت درد نکنه.)
خیلی خوبه ممنون علی بهنام فر
پس چرا قالبهای بلاگ اسکای یروز نمیشن؟
سلام .خسته نباشید
خیلی خوب شد که زبان html رو آموزش میدید من که واقعا دنبال یک همچین آموزش ساده و کاملی مگشتم. با این که سی دی آموزش html گرفتم ولی ترجیح میدم که با آموزش شما زبان html رو یاد بگیرم.
موفق باشید.
سلام دوستم میتونی برام یک قالب بسازی برای میهن بلاگ درباره ی بارسلونا باشه!
متشکرم هر چند به قول شما کدهای اماده وجود دارد ولی برای به کارگیری /انها باز نیاز است تا حدودی خودمان بلد باشیم حتما بقیه مطالب رو دنبال می کنم ساده و روان نوشتید باز متشکرم
راستی من یه سایت دارم که چند روزی است باز نمیشه می تونید کمکم کنید
نام سایتwww.novinpendargroup.com است
متشکرم
سلام واقعا کارت درسته من که از مطالب خیلی لذت میبرم.
راستش یک کد اسلاید شو میخوام اما نمیدونم کجای کد ها قرارش بدم اگه میشه راهنمایی کنید . ممنون
خیلی خوبه.
هیچوقت فکرشو نمیکردم بتونم چنین کاری رو انجام بدم.
شدیدا منتظر جلسه بعدیتون هستم.
like
سلام . فوق العاده بود ، من همیشه علاقه داشتم کدنویسی رو یاد بگیرم ولی همیشه برام مبهم بود مثلا یه بار تو برنامه با ما بروز باشید آموزش داد ولی من هیچی نفهمیدم .
ولی اینو که خوندم واقعا یاد گرفتم . ممنون
میدونم که خیلی گرفتارین ولی لطفا زود به زود اپدیت کنید
تشکر
راستی ببخشید یه موضوعی رو یادم رفت اگه ممکنه به من جواب بدهید که میتونم از مطالب شما دز وبلاگ خودم استفاده کنم بلکه بیننده ی بیشتری داشته باشه
البته یادم هست و خواهد موند که منبع رو هم ذکر کنم
به اجازه شما نیاز داشتم( کپی کردم اگه دوست ندارید به من بگید که پاک کنم! )
خلاصه………….
یاحق
سلام علیکم آقا علی
من تمامی آموزش های شما را مطالعه کردم
واقعا قابل تحسین است و ممنونم از اینکه وقت باارزش خودتون رو برا اینکار ها میگذارید
لطفا ادامه بدهید با هر چه سرعت بیشتر من منتظرم
یاحق برادر
عالی در حد المپیک
داداش عالیه.
فقط من یه مشکل بزرگ همیشه دارم ، اونم توی استخون بندی قالبه.من سی اس اس و اچ تی ام ال رو بلدم ولی کامل روشون مسلط نیستم.
نمیدونم استخون بندی رو با دایو بنویسم یا با تیبل.میشه یه راهنمایی بکنی یا اگر ممکنه یه استخون بندی بهم کدش رو بدی من از روش یاد بگیرم.
به خدا کمک بزرگی می کنی.ممنون.
با سلام خواهش میکنم 1-مطالب را فصل و با ذکر مثال متنوع توضیح دهید2-چرا بعضی چیز هارا از قلم می اندازید مثل از قلم اندختن[-BlogTitle-] خوب همه باید این رو هم بدانند خواهشمندم هرجه از سایت و وب نویسی می دانید به ماهم بگویید
باتشکر.
سلام. ممنون آقای بهنام فر. تازه دارم خوب متوجه میشم. خواهشا همینطوری با همین شفافیت و راحتی توضیح بدید بقیه مطالب رو .. ممنون و انشاالله سی اس اس رو هم آموزش بدید در جلسات بعدی. در پایان کل آموزش اچ تی ام ال هم فایل پی دی اف اون رو بزارید.ممنون
اچ تی ام ال نرم افزار خاص نمیخواد درسته ولی بعضی نرم افزارا کار رو واقعا آسون میکنن! مثل Dreamweaver! مگه نه؟
آقا ممنون از زحمات شما
فقط اگه آموزش هارو زودتر بزارید ممنون می شم!
یاعلی