آموزشhtml_جلسه دوم_معرفی تگ های ضروری
هدف ها:-
_آشنایی و نحوه ی استفاده از تگ های ضروری
-ایجاد اولین صفحه HTML و مشاهده ی آن
نکته ۱: برای کد نویسی HTML به محیط خاصی نیاز ندارید و می توانید از NotePad ویندوز استفاده کنید.توجه کنید Word و یا WordPad محیط های مناسبی برای این کار نیستند.نکته ۲: یکی از نرم افزارهای قدرتمند جهت ارائه ی محیط پیشرفته ی کد نویسی برنامه ی Adobe DreamWeaver می باشد که محیطی دوگانه به صورت کدنویسی و یا طراحی و تلفیقی از این دو را برای شما فراهم می آورد.
تگ (برچسب) چیست؟
تگ به فرامینی گفته می شود که در قالب HTML وجود دارد و توسط مرورگر شناسایی و اجرا می شوند. به عنوان مثال <html> یک تگ می باشد. همانطور که مشاهده می کنید تگ ها بین علامت <> قرار داده می شوند.اغلب تگ ها دارای تگ آغازین و پایانی می باشند. به عنوان مثال تگ پایانی برای مثال بالا </html> می باشد.اما برخی تگ ها به عنوان تک تگ شناخته می شوند و دارای تگ خاتمه نیستند ، مثلا <br /> .توجه کنید که / با یک فاصله بعد از حرف br بکار رفته در صورتی که در تگ پایانی / قبل از کلمه و بدون فاصله با آن بکار می رود. در ادامه این موضوع را بهتر درک خواهید کرد.حال که مفهوم تگ و انواع آن را شناختیم باید بدانیم برای ایجاد یک صفحه که مرورگر آن را به عنوان صفحه وب شناسایی کند به چه تگ هایی نیاز داریم.
تگ های ضروری
هر صفحه وب از ۲ تگ ساخته می شود(یعنی ۲ تگ ضروری می باشد) که عبارتند از تگ <html> و تگ <body>. تگ <html> به مرورگر می گوید که صفحه ی مورد نظر از این بخش آغاز گردیده و تگ <body> نیز تعیین می کند بدنه ی صفحه (بخش قابل مشاهده توسط بیننده) از کجا آغاز شده است.همانطور که ذکر شد این تگ ها دارای تگ خاتمه می باشند که به ترتیب عبارتند از </html> و </body>.2 تگ دیگر نیز داریم که گرچه ضروری نیستند ولی مهم می باشند.این تگ ها بعد از تگ <html> و قبل از تگ <body> قرار می گیرند و عبارتند از <head> و <title>
.نحوه ی استفاده و ایجاد اولین صفحه
خوب تاحال ۴ تگ ضروری را فرا گرفتیم و می توانیم یک صفحه ی وب بسیار ساده را ایجاد نماییم.تمرین ۱-۲:نرم افزار NotePad را از منوی شروع ویندوز یافته و اجرا نمایید.۱- یک صفحه با موضوع ” اولین صفحه ی من” و متن “به اولین صفحه ی من خوش آمدید” ایجاد نمایید.۲- فایل را با پسوند .html و یا .htm ذخیره کنید.از آنجایی که این اولین صفحه ی ساخته شده توسط شماست ممکن است نیاز به راهنمایی داشته باشید.پس به ادامه ی مطلب توجه کنید.در تصویر زیر نمونه ی حل شده ی تمرین بالا را مشاهده می کنید
.
توجه کنید که یک صفحه از دو بخش عمده تشکیل شده است . بخش سر (head) و بخش بدنه (body) که تنها بخش بدنه نمایش داده می شود و در بخش سر کدهایی قرار می گیرند که در دروس بعدی به آن ها خواهیم پرداخت. یکی از این تگ ها تگ عنوان یا <title> می باشد.نکته ۳: به ترتیب باز و بسته شدن تگ ها توجه کنید.همیشه ترتیب بستن تگ را کنترل کنید ، مثلا بعد از تگ <head> تگ <title> آغاز شده است و بعد از بسته شدن تگ <title> تگ <head> خاتمه یافته است. گرچه عدم رعایت این نکته مشکلی در نحوه ی نمایش ایجاد نمی کند ولی بر خلاف استاندارد های موجود می باشد و خطا محسوب می گردد.وقتی کدهای بالا را در Notepad نوشتید نوبت به ذخیره ی آن می رسد که به ترتیب زیر عمل می کنیم:
و در مرحله بعد در پنجره ی باز شده نام صفحه ی خود را نوشته و پسوند آن را از .txt به .html و یا .htm تغییر دهید و از آنجایی که از متن فارسی استفاده کرده ایم Encoding را برابر Unicode و یا UTF-8 قرار می دهیم.
(نکته ۴ : در صورتی که پسوند را مشاهده نمی کنید در My Computer از منوی بالا گزینه ی Folder Option (Vista & 7 : Organize – Folder and Search Options) را انتخاب کنید و از لبه ی View تیک گزینه ی Hide extension for known file types را بردارید)
حال می توانیم صفحه ی خود را مشاهده کنیم. بر روی MyFirstPage.html کلیک کنید تا نتیجه ی کار خود را مشاهده کنید. این صفحه چیزی شبیه به این خواهد بود :
تمرین ۲-۲ :یک صفحه ی html با موضوع و متن دلخواه ایجاد کنید و آن را در مرورگر خود مشاهده نمایید.
هدف ها:-
_آشنایی و نحوه ی استفاده از تگ های ضروری
-ایجاد اولین صفحه HTML و مشاهده ی آن
نکته ۱: برای کد نویسی HTML به محیط خاصی نیاز ندارید و می توانید از NotePad ویندوز استفاده کنید.توجه کنید Word و یا WordPad محیط های مناسبی برای این کار نیستند.نکته ۲: یکی از نرم افزارهای قدرتمند جهت ارائه ی محیط پیشرفته ی کد نویسی برنامه ی Adobe DreamWeaver می باشد که محیطی دوگانه به صورت کدنویسی و یا طراحی و تلفیقی از این دو را برای شما فراهم می آورد.
تگ (برچسب) چیست؟
تگ به فرامینی گفته می شود که در قالب HTML وجود دارد و توسط مرورگر شناسایی و اجرا می شوند. به عنوان مثال <html> یک تگ می باشد. همانطور که مشاهده می کنید تگ ها بین علامت <> قرار داده می شوند.اغلب تگ ها دارای تگ آغازین و پایانی می باشند. به عنوان مثال تگ پایانی برای مثال بالا </html> می باشد.اما برخی تگ ها به عنوان تک تگ شناخته می شوند و دارای تگ خاتمه نیستند ، مثلا <br /> .توجه کنید که / با یک فاصله بعد از حرف br بکار رفته در صورتی که در تگ پایانی / قبل از کلمه و بدون فاصله با آن بکار می رود. در ادامه این موضوع را بهتر درک خواهید کرد.حال که مفهوم تگ و انواع آن را شناختیم باید بدانیم برای ایجاد یک صفحه که مرورگر آن را به عنوان صفحه وب شناسایی کند به چه تگ هایی نیاز داریم.
تگ های ضروری
هر صفحه وب از ۲ تگ ساخته می شود(یعنی ۲ تگ ضروری می باشد) که عبارتند از تگ <html> و تگ <body>. تگ <html> به مرورگر می گوید که صفحه ی مورد نظر از این بخش آغاز گردیده و تگ <body> نیز تعیین می کند بدنه ی صفحه (بخش قابل مشاهده توسط بیننده) از کجا آغاز شده است.همانطور که ذکر شد این تگ ها دارای تگ خاتمه می باشند که به ترتیب عبارتند از </html> و </body>.2 تگ دیگر نیز داریم که گرچه ضروری نیستند ولی مهم می باشند.این تگ ها بعد از تگ <html> و قبل از تگ <body> قرار می گیرند و عبارتند از <head> و <title>
.نحوه ی استفاده و ایجاد اولین صفحه
خوب تاحال ۴ تگ ضروری را فرا گرفتیم و می توانیم یک صفحه ی وب بسیار ساده را ایجاد نماییم.تمرین ۱-۲:نرم افزار NotePad را از منوی شروع ویندوز یافته و اجرا نمایید.۱- یک صفحه با موضوع ” اولین صفحه ی من” و متن “به اولین صفحه ی من خوش آمدید” ایجاد نمایید.۲- فایل را با پسوند .html و یا .htm ذخیره کنید.از آنجایی که این اولین صفحه ی ساخته شده توسط شماست ممکن است نیاز به راهنمایی داشته باشید.پس به ادامه ی مطلب توجه کنید.در تصویر زیر نمونه ی حل شده ی تمرین بالا را مشاهده می کنید
.
توجه کنید که یک صفحه از دو بخش عمده تشکیل شده است . بخش سر (head) و بخش بدنه (body) که تنها بخش بدنه نمایش داده می شود و در بخش سر کدهایی قرار می گیرند که در دروس بعدی به آن ها خواهیم پرداخت. یکی از این تگ ها تگ عنوان یا <title> می باشد.نکته ۳: به ترتیب باز و بسته شدن تگ ها توجه کنید.همیشه ترتیب بستن تگ را کنترل کنید ، مثلا بعد از تگ <head> تگ <title> آغاز شده است و بعد از بسته شدن تگ <title> تگ <head> خاتمه یافته است. گرچه عدم رعایت این نکته مشکلی در نحوه ی نمایش ایجاد نمی کند ولی بر خلاف استاندارد های موجود می باشد و خطا محسوب می گردد.وقتی کدهای بالا را در Notepad نوشتید نوبت به ذخیره ی آن می رسد که به ترتیب زیر عمل می کنیم:
و در مرحله بعد در پنجره ی باز شده نام صفحه ی خود را نوشته و پسوند آن را از .txt به .html و یا .htm تغییر دهید و از آنجایی که از متن فارسی استفاده کرده ایم Encoding را برابر Unicode و یا UTF-8 قرار می دهیم.
(نکته ۴ : در صورتی که پسوند را مشاهده نمی کنید در My Computer از منوی بالا گزینه ی Folder Option (Vista & 7 : Organize – Folder and Search Options) را انتخاب کنید و از لبه ی View تیک گزینه ی Hide extension for known file types را بردارید)
حال می توانیم صفحه ی خود را مشاهده کنیم. بر روی MyFirstPage.html کلیک کنید تا نتیجه ی کار خود را مشاهده کنید. این صفحه چیزی شبیه به این خواهد بود :
تمرین ۲-۲ :یک صفحه ی html با موضوع و متن دلخواه ایجاد کنید و آن را در مرورگر خود مشاهده نمایید.