آموزشHTML-درس دوم – معرفی تگ های ضروری

طراحی سایت » آموزش HTML » آموزشHTML-درس دوم – معرفی تگ های ضروری
۲۵ اسفند ۱۳۸۸ چاپ

تگ یا برچسب به فرامینی گفته می شود که در قالب HTML وجود دارد و توسط مرورگر شناسایی و اجرا می شوند. به عنوان مثال <html> یک تگ می باشد. همانطور که مشاهده می کنید تگ ها بین علامت <> قرار داده می شوند.

اغلب تگ ها دارای تگ آغازین و پایانی می باشند. به عنوان مثال تگ پایانی برای مثال بالا </html> می باشد.
اما برخی تگ ها به عنوان تک تگ شناخته می شوند و دارای تگ خاتمه نیستند ، مثلا <br /> .توجه کنید که / با یک فاصله بعد از حرف br بکار رفته در صورتی که در تگ پایانی / قبل از کلمه و بدون فاصله با آن بکار می رود. در ادامه این موضوع را بهتر درک خواهید کرد.
حال که مفهوم تگ و انواع آن را شناختیم باید بدانیم برای ایجاد یک صفحه که مرورگر آن را به عنوان صفحه وب شناسایی کند به چه تگ هایی نیاز داریم.

اهداف:

  1. آشنایی و نحوه ی استفاده از تگ های ضروری
  2. ایجاد اولین صفحه HTML و مشاهده ی آن

نکته 1: برای کد نویسی HTML به محیط خاصی نیاز ندارید و می توانید از NotePad ویندوز استفاده کنید.توجه کنید Word و یا WordPad محیط های مناسبی برای این کار نیستند.

نکته 2: یکی از نرم افزارهای قدرتمند جهت ارائه ی محیط پیشرفته ی کد نویسی برنامه ی Adobe DreamWeaver می باشد که محیطی دوگانه به صورت کدنویسی و یا طراحی و تلفیقی از این دو را برای شما فراهم می آورد.

تگ های ضروری در html

هر صفحه وب از 2 تگ ساخته می شود (یعنی 2 تگ ضروری می باشد) که عبارتند از تگ <html> و تگ <body>. تگ <html> به مرورگر می گوید که صفحه ی مورد نظر از این بخش آغاز گردیده و تگ <body> نیز تعیین می کند بدنه ی صفحه (بخش قابل مشاهده توسط بیننده) از کجا آغاز شده است.
همانطور که ذکر شد این تگ ها دارای تگ خاتمه می باشند که به ترتیب عبارتند از </html> و </body>.
2 تگ دیگر نیز داریم که گرچه ضروری نیستند ولی مهم می باشند.این تگ ها بعد از تگ <html> و قبل از تگ <body> قرار می گیرند و عبارتند از <head> و <title> .

نحوه ی استفاده و ایجاد اولین صفحه

خوب تاحال 4 تگ ضروری را فرا گرفتیم و می توانیم یک صفحه ی وب بسیار ساده را ایجاد نماییم.

تمرین 1-2:

نرم افزار NotePad را از منوی شروع ویندوز یافته و اجرا نمایید.

1- یک صفحه با موضوع ” اولین صفحه ی من” و متن “به اولین صفحه ی من خوش آمدید” ایجاد نمایید.

2- فایل را با پسوند .html و یا .htm ذخیره کنید.

از آنجایی که این اولین صفحه ی ساخته شده توسط شماست ممکن است نیاز به راهنمایی داشته باشید.پس به ادامه ی مطلب توجه کنید.
در تصویر زیر نمونه ی حل شده ی تمرین بالا را مشاهده می کنید.
درس دوم - معرفی تگ های ضروری
توجه کنید که یک صفحه از دو بخش عمده تشکیل شده است . بخش سر (head) و بخش بدنه (body) که تنها بخش بدنه نمایش داده می شود و در بخش سر کدهایی قرار می گیرند که در دروس بعدی به آن ها خواهیم پرداخت. یکی از این تگ ها تگ عنوان یا <title> می باشد.

نکته 3: به ترتیب باز و بسته شدن تگ ها توجه کنید.همیشه ترتیب بستن تگ را کنترل کنید ، مثلا بعد از تگ <head> تگ <title> آغاز شده است و بعد از بسته شدن تگ <title> تگ <head> خاتمه یافته است. گرچه عدم رعایت این نکته مشکلی در نحوه ی نمایش ایجاد نمی کند ولی بر خلاف استاندارد های موجود می باشد و خطا محسوب می گردد.

وقتی کدهای بالا را در Notepad نوشتید نوبت به ذخیره ی آن می رسد که به ترتیب زیر عمل می کنیم:
درس دوم - معرفی تگ های ضروری
و در مرحله بعد در پنجره ی باز شده نام صفحه ی خود را نوشته و پسوند آن را از .txt به .html و یا .htm تغییر دهید و از آنجایی که از متن فارسی استفاده کرده ایم Encoding را برابر Unicode و یا UTF-8 قرار می دهیم.
درس دوم - معرفی تگ های ضروری
نکته 4: در صورتی که پسوند را مشاهده نمی کنید در My Computer از منوی بالا گزینه ی Folder Option (Vista & 7 : Organize – Folder and Search Options) را انتخاب کنید و از لبه ی View تیک گزینه ی Hide extension for known file types را بردارید)
درس دوم - معرفی تگ های ضروری
حال می توانیم صفحه ی خود را مشاهده کنیم. بر روی MyFirstPage.html کلیک کنید تا نتیجه ی کار خود را مشاهده کنید. این صفحه چیزی شبیه به این خواهد بود :
درس دوم - معرفی تگ های ضروری
تمرین 2-2 :

یک صفحه ی html با موضوع و متن دلخواه ایجاد کنید و آن را در مرورگر خود مشاهده نمایید.
[answer]

پاسخ تمرین 2-2:

<html>
<head><title>پاسخ تمرین 2-2</title></head>
<body>
تنها بخشی از کد در مرورگر قابل مشاهده خواهد بود که بین دو تگ بدنه قرار گرفته باشد.
</body>
</html>
[/answer]

گفتگو پیرامون آموزشHTML-درس دوم – معرفی تگ های ضروری

(منتشر شده: 21 | در انتظار تایید: 0)
حسین مداحی

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

پاسخ دهید
wiki

سلام آموزش عالی بود ولی ی مشکل دارم اونم اینکه موقع ذخیره کردن فایل فقط فرمت txt هس و فرمت های دیه مث html رو پیدا نمیکنم لطفاراهنمایی کنید.تیک گزینه Hide extension for known file types رو هم برداشتم ولی حل نشد

پاسخ دهید
عصرعلم

در پاسخ به wiki

سلام
باید فرمت txt را به صورت دستی پاک کنید و بجای اون html تایپ کنید و بعد ذخیره کنید.

پاسخ دهید
م

سلام ممنون

پاسخ دهید
Zeynab

واقعا مرسی من هنوز کاملشو یاد نگرفتم ولی تا اینجاشو خیلی خوب یاد گرفتم
هنوز تو ذهنم حفظم نشده:D

پاسخ دهید
مهتا

سلام ویندوز من ۸ هستش . از نکته ۴ به بعد به مشکل برخوردم میشه کمک کنید؟

پاسخ دهید
حجت

همه مراحل رو درست انجام دادم فقط وقتی میخوام فایلو بازش کنم هیچ پسوندی نداره فقط نوشته html

پاسخ دهید
عصرعلم

در پاسخ به حجت

سلام
باید تنظیمات ویندوز را درست کنید تا پسوند فایلها را نمایش بده وبعد پسوند فایل را به html تغییر بدید. در متن آموزش نحوه ی انجام اینکار گفته شده.

پاسخ دهید
حجت

چجوری صفحه ایجاد شده رو روی مرورگر ببینم
نشون نمیده

پاسخ دهید
مریم

سلام ممنون
ذوق زده شده بودم
ولی هی سوال برای تمرین دوم من هرکاری کردم توی مرورگرم بازنمیشه چرا؟؟؟!

پاسخ دهید
عصرعلم

در پاسخ به مریم

سلام
پاسخ تمرین دوم در متن موجود است، پاسخ خودتون را با پاسخی که وجود داره مقایسه کنید ببینید اشکال کار کجاست.

پاسخ دهید
هانیه

کدمو چجوری تو مرور گر باز کنم؟یعنی چیزی که نوشتم و کپی کردم

پاسخ دهید
عصرعلم

در پاسخ به هانیه

سلام
نحوه ی ذخیره سازی صفحه html در متن عنوان شده. بعد از ذخیره کردن با فرمت html میتونید با هر مرورگری فایل را باز کنید.

پاسخ دهید
Arash Kairm

سلام….. من میخواهم که در صفحه انترنتی من یک فونت دلخواه خود را استفاده کنم…. که این فونت را در یکی از فولدر های دایرکتوری انداختیم و نمیدانم که چطور استفاده نمایم…..

پاسخ دهید
عصرعلم

در پاسخ به Arash Kairm

سلام
اول باید فونت رو به فونت مناسب صفحات وب تبدیل کنید (فرمتهاش فرق میکنه) و بعدش از کد css زیر استفاده کنید:
در مثال زیر نام فونت BYekan است.
@font-face{
font-family:'yek';src: url('fonts/BYekan.eot?#') format('eot'), /* IE6–۸ */
url('fonts/BYekan.woff') format('woff'),/* FF3.6+,IE9,Chrome6+,Saf5.1+*/
url('fonts/BYekan.ttf') format('truetype');/* Saf3—۵, Chrome4+, FF3.5, Opera 10+ */
}

پاسخ دهید
alireza

با سلام و خسته نباشید
وقتی که به سایتتون اومدم خیلی خوشحال شدم چون آموزشتون خیلی کارآمد هست و از پایه به طالبش کمک میکنه
از تنبلی حال نداشتم که مطلبی ارسال کنم
ولی ارزش کارتون اونقدر بالاست که نتونستم تشکر نکنم
متشکرم

پاسخ دهید
عصرعلم

در پاسخ به alireza

سلام
ممنون از لطف شما
پاینده و سربلند باشید.

پاسخ دهید
farhang

می خواستم بدونم این html شما چه ورژنی است
منظورم اینه مه ۴ است یا ۵ ؟

پاسخ دهید
عصرعلم

در پاسخ به farhang

سلام
آخرین ورژن رسمی و استاندارد html ورژن ۴ است و ورژن ۵ هنوز رسمی نیست و در دوره آزمایشی یا beta قرار داره ( تا این تاریخ ) و حداقل تا سال ۲۰۱۴ استاندارد نخواهد شد (بنا بر گزارشاتی که منتشر شده)، با این حال تگها و نکاتی که در این سری آموزشی ذکر شده اند مبانی پایه ی HTML هستند و تفاوتی در نسخه های html 4 و ۵ ندارند، تفاوتهای جزئی بین نسخه های مختلف html وجود داره و اینطور نیست که بتونیم بگیم این درسها مربوط به نسخه ۴ یا ۵ است؛ در واقع هم مربوط به ورژن ۴ است و هم ۵ !

پاسخ دهید
ز

سلام ممنون از آموزش
آموزش html رو دیگه به امید خدا شروع کردم
ممنون از این که تو نوشته هاتون امید هم میدید

پاسخ دهید
سجاد

در پاسخ به ز

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

موفق باشید

پاسخ دهید

فقط گزینه‌ی وسط را تیک بزنید. »مشاهده قوانین