post

آموزش HTML – بخش سه (شروع کدنویسی)

با توجه به شناخت کلی که از HTML بدست آوردید و همینطور تگ هایی که در پست قبلی باهاش آشنا شدید، دیگه کم کم میتونیم بریم سراغ طراحی اولین صفحه HTML خودمون؛ پس تا انتهای این پست با من همراه باشید.

اولین صفحه HTML

برای شروع کار به یه ویرایشگر ساده متنی مثل NotePad نیاز داریم. بعد از این که NotePad رو باز کردید گام به گام با من و مرحله به مرحله این کارها رو انجام بدید:

  •  میخوایم یه فایل HTML بسازیم، پس کار رو با تگ <html> شروع می کنیم.
  • حالا به یه قسمت تنظیمات پشت پرده (head) برای صفحه مون نیاز داریم، پس تگ <head> رو هم باز می کنیم.
  • از بین تگهایی که تا الان یاد گرفتیم به نظرتون کدومش بدرد تنظیمات پشت پرده سایت میخوره؟ آفرین، عنوان یک صفحه جزو تنظیمات بحساب میاد، پس تگ <title> رو هم باز می کنیم و بعد از انتخاب یک عنوان مناسب برای صفحه مون تگ <title/> رو می بندیم.
  • دیگه تگی بلد نیستیم که توی این قسمت به کارمون بیاد پس با قسمت تنظیمات کاری نداریم و تگ <head/> رو هم می بندیم.
  • حالا می رسیم به قسمت جذاب بدنه یا همون قسمت از طراحی ما که با چشم دیده میشه، اکثر تگ هایی که توی آموزش قبل یاد گرفتیم مربوط به این قسمت هستند.
  • تگ <body> رو باز می کنیم.
  • برای شروع از یه تگ h1 استفاده می کنیم، تگ <h1> رو باز می کنیم، عنوان مد نظرمون که مایلیم داخل صفحه نمایش داده بشه رو می نویسیم و تگ <h1/> رو می بندیم.
  • دیگه از چی استفاده کنیم؟ فکر کنم تگ p انتخاب مناسبی باشه، پس تگ <p> رو باز می کنیم و متن مورد نظرمون رو می نویسیم و تگ <p/> رو می بندیم.
  • از تگ img و a هم استفاده کنیم؟ به نظرم چون استفاده از این دو تگ نیاز به یه سری توضیحات داره فعلا به همین مقدار اکتفا کنیم.
  • خب کارمون با قسمت بدنه هم تموم شده پس تگ <body/> رو هم می بندیم.
  • ساخت صفحه HTML هم به پایان رسید، پس تگ <html/> رو هم می بندیم.

چیزی که داخل NotePad نوشتین باید شبیه کد زیر باشه:

<html>

<head>

<title>عنوان صفحه</title>

</head>

<body>

<h1>عنوان مورد نظر</h1>

<p>متن مورد نظر</p>

</body>

</html>

 

ذخیره فایل HTML

برای ذخیره این فایل از زبانه File گزینه Save as رو انتخاب می کنیم تا صفحه جدیدی برامون باز بشه. داخل این صفحه اون قسمت پایین یه چیزی به اسم Encoding نوشته شده، چون ما از زبان فارسی استفاده کردیم، این قسمت رو بر روی UTF-8 قرار بدد تا کدهای ما دچار بهم ریختگی نشه.

نکته کلیدی که باید بهش توجه کنید اینه که NotePad در واقع برای ساخت و ویرایش فایلهای متنیه، پس تنها گزینه ای که که برای ذخیره کردن فایل بهتون میده، ذخیره فایل با پسوند txt هست، برای اینکه این محدودیت رو دور بزنیم کافیه .txt رو از قسمت نام حذف کنیم و بجاش .html بنویسیم و فایل رو ذخیره کنیم.

به همین سادگی اولین صفحه HTML مون رو طراحی کردیم.

مشاهده فایل HTML

مشاهده فایل HTML کار چندان سختی نیست و همه شما حتی همین الان هم دارید همین کارو انجام میدین، فقط کافیه اون فایلی رو که ذخیره کردید با یه مرورگر( گوگل کروم، موزیلا فایرفاکس، اپرا و…) باز کنید.

 

جمع بندی

توی این پست سعی کردم حس خوب طراحی و اینکه یه چیز رو خودتون با دست های خودتون بسازید رو تجربه کنید و این انگیزه ای بشه برای ادامه راه. برای اینکه این طراحی ساده امروزتون به یه طراحی شیک و مدرن امروزی تبدیل بشه نیاز به چیزی به اسم CSS دارید. سعی می کنم توی پست بعدی بخش هایی از HTML رو که قبل از شروع CSS باید باهاش آشنایی داشته باشید بهتون معرفی کنم، بعدش میریم سراغ CSS و همزمان با اون HTML رو هم پیش می بریم. پس همچنان با من و مدرسه کوچک تیتکا همراه باشید. در ضمن یادتون نره نظراتتون رو با من در میان بذارید، چون هر یک نظری که میخونم انگیزم رو برای ادامه این راه بیشتر و بیشتر می کنه. باز هم بابت این همراهیتون ازتون ممنونم.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *