close
تبلیغات در اینترنت
قسمت چهارم اموزش اچ تی ام ال
خرید و فروش فایلپروژه رباتیک و الکترونیک
[Post_Title]
[Post_Title]
تاریخ: [Post_Date]
نویسنده: [Post_Author]
redtools.ir
تبلیغات
خرید هاستتبلیغات شما
قسمت چهارم اموزش اچ تی ام ال
قسمت چهارم اموزش اچ تی ام ال
تاریخ: 13 / 12 / 1392
نویسنده: Majid

درس 4: ایجاد اولین قالب شما

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

یک مرورگر و دفترچه یادداشت (و یا ویرایشگر متن مشابه): در درس اول وسایل مورد نیاز برای ساخت قالب را شناختیم.شما در حال حاظر با مرورگر خود در حال دیدن این صفحه میباشید.به شما یاد میدهیم که قالب خود را ایجاد و در مرورگرتان به صورت افلاین مشاهده کنید.

اول نت پد را باز کنید (در لوازم جانبی تحت برنامه در منوی شروع):

چگونه برای پیدا کردن دفترچه یادداشت

حالا ما آماده هستیم!

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

HTML ساده و منطقی است. این زبان مانند زبان انگلیسی:. از بالا به پایین و از چپ به راست. بنابراین، یک سند HTML ساده با آنچه که باید در ابتدا آمده است شروع می شود و با آنچه که میخواهید به پایان میرسد.

اولین چیزی که شما باید انجام دهید این است که "صحبت" مرورگر را HTML بنامید.با تگ <html> کار شروع میشود.بنابراین قبل از انجام هر کاری " <html> "را در خط اول از نوت پد بنویسید.

همانطور که شما در درس های قبل اموختید بعد از تایپ تگ باز باید تگ بسته هم کنارش داشته باشیم این تگ ها مانند زن و شوهر میمانند پس در اخر بعد از <html> تگ </html> را فراموش نکنید.

بعد از تگ اچ تی ام ال شما نیاز به تگ های <head> "سر" و  <body> "بدن" دارید پس ان را به طور زیر تایپ کنید:

<html>
<head>
</head>
<body>
</body>
</html> 

خب حالا شما تقریبا پایه قالبتان را ساختید

همانطور که قبلا یاد گرفته، سند HTML دارای دو بخش است: یک سر (head) و یک بدن (body) در بخش سر شما اطلاعاتی در مورد صفحه وارد میکنید، در حالی که بدن شامل اطلاعاتی است در مرورگر مشاهده میشود.

برای مثال، اگر شما می خواهید عنوانی که در بالای مرورگر دیده میشود را وارد کنید باید ان را در بخش سر وارد کنید. عنصر عنوان title است به عنوان مثال نوشتن عنوان با باز کردن تگ <title> اغاز و با تگ </title> بسته میشود:

<title>موضوع وبسایت شما</title>

توجه داشته باشید که این عنوان در مرورگر مشاهده نمیشود. هر چیزی که می خواهید بر روی صفحه ظاهر شود باید بین تگ "بدن" اضافه شود.

به عنوان مثال میخواهیم متن: "هورا! این اولین وب سایت من است." را در مرورگر به نمایش بگزاریم پس ان را در بخش بدن (head) تایپ میکنیم به صورت زیر:

<p>هورا! این اولین وب سایت من است</p>

عنصر P در تگ <p> یک پاراگراف متن است که دقیقا آنچه در آن قرار میگیرد متن است.

سند HTML که ساخته اید باید شبیه این شده باشد:

<html>
<head>
<title>موضوع وبسایت شما</title>
</head>
<body>
<p>هورا! این اولین وب سایت من است</p>
</body>
</html> 

خب تمام شد شما برای اولین بار قالب خود را ساخته اید.برای مشاهده باید ان را ذخیره و با مرورگر ان را باز کنید.

در نوت پد "save as" را در زیر "file" در منوی بالای صفحه کلیک کنید.

  • بخش "save as type" در "all files" قرار دهید.
  • در حال حاضر سند خود را به عنوان "page1.htm" ذخیره کنید (پایان دادن به "پسوندهای htm." نشان می دهد که آن را در یک سند HTML ذخیره کردید)
  • اگر متوجه نشدید از عکس زیر متوجه میشوید:

ذخیره سند

در حال حاضر به مرورگر بروید:

  • در منوی بالا  "open" در زیر "file"را بزنید (یا CTRL+O را فشار دهید).
  • در حال حاضر سند HTML خود را پیدا کنید و بر روی "ok" کلیک کنید.

سند گسترش

در حال حاضر این متن را در مرورگرتان میبینید: "هورا! این اولین وب سایت من است." تبریک می گویم!

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

منبع: www.redtools.ir


نمایش نظرات
آیا وقت آن نرسیده است که قالب اختصاصی برای خود داشته باشید؟!
ابزار قرمز با سابقه عالی و طراحی های مد پسند بهترین انتخاب برای شما میباشد.
با کیفیت ترین قالب با مناسبترین قیمت , قالب هایی سئو شده و طراحی های نو
همینک قالب اختصاصی خود را سفارش دهید

تــ ــالــ ــار گــفـ ـتــ ـگـ ـو

تعداد پاسخ: 0
تعداد بازدید: 3
توسط: xavi5
تعداد پاسخ: 0
تعداد بازدید: 3
توسط: hostcode
تعداد پاسخ: 0
تعداد بازدید: 2
توسط: hostcode
تعداد پاسخ: 0
تعداد بازدید: 3
توسط: ladan
تعداد پاسخ: 0
تعداد بازدید: 2
توسط: ladan
تعداد پاسخ: 0
تعداد بازدید: 3
توسط: hostcode
تعداد پاسخ: 0
تعداد بازدید: 4
توسط: hostcode
تعداد پاسخ: 0
تعداد بازدید: 4
توسط: hostcode
تعداد پاسخ: 0
تعداد بازدید: 6
توسط: lemon
تـــمـــامـــی حـــقــــوق مــــحـــفــوظ مــیــبــاشــد !
طــراحــی شــده تــوسـط: مجید امانی
اجــرا شــده تـوسـط: وبـســایــت ابــزار قــرمـز