یادگیری HTML به راحتی آب خوردن | اموزش تضمینی طراحی سایت تبریز

یادگیری HTML به راحتی آب خوردن

آموزش HTML کاملا راحت و مختصر

امروز در این مقاله (یادگیری HTML به راحتی آب خوردن) از آکادمی هنرجو قصد دارم html رو به راحتی هر چه تمام به دوستانی که تازه میخوان این زبان رو یادبگیرن و درکی ازش ندارن یاد بدم ، پس اگه تو مقاله ها و توضیحات دیگه سردرگم شدید این مقاله رو پیشنهاد میکنم بهتون با دقت بخونید تا متوجه داستان بشید .

معرفی

HTML مخفف عبارت Hyper Text Markup Language است . که به معنی زبان نشانه گذاری ابرمتن هست.

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

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

فایل های (سند) html با پسوند htm. و html. شناخته میشوند.

نکته : اچ تی ام ال زبان برنامه نویسی نیست ! این یک زبان برای نشانه گزاری کردن متن هست که مرورگر بفهمد .این قسمت از متن را چگونه باید نشان دهد ، مثلا ما با اچ تی ام ال یک تکه از متن سایت را Bold میکنیم در واقع با این زبان نشانه میگذاریم که ای مرورگر این تیکه از متن باید درشت نشون داده شود.

ساختار

در html نشانه هایی که میگذاریم رو با اسم تگ (برچسب) خواهیم شناخت .هر تک به طور کلی باز میشود و بسته میشود مانند پارانتز باز و پارانتز بسته که به صورت زیر است : (البته استثناءهایی هم وجود دارد که ذکر خواهم کرد).

<Tag open> .... Text .... </Tag Close>

خب این شد ساختار تگ ها ، حالا بخواهیم یک سند اچ تی ام ال ایجاد کنیم و استفاده کنیم باید چه کار کنیم ؟

بسیار ساده ، شما میتونید با هر ادیتور متنی از ساده ترین ها بگیر مثل نوت پد(notepad) و ویم(vim) تا پیشرفته ترین ها . فقط کافی هستش با این ادیتور های متن یک سند تازه باز کنید و با پسوند htm. یا html. ذخیره کنید .

حال ساختار یک سند html چگونه است ؟

<html>
<head>
      <title> this is my web site title </titel>
</head>
<body>
      <!-- you can add comment with this characters -->
</body>
</html>

توضیح سه تگ اصلی سند html

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

  • html :
    تگ اول که همه چیز در آن قرار دارد نشان دهنده این است که این یک سند اچ تی ام ال است و مرورگر به واسطه آن تشخیش میده که این سند html  هست و همچنین المان هایی هم میشه بهش اضافه کرد مثلا ورژن اچ تی ام ال که داریم ازش استفاده می کنیم تو این سند.
  • تگ head یا به فارسی سر !
    اولین تگ در بدنه تگ اچ تی ام ال هستش . حاوی یک سری اطلاعات برای مرورگر و نیز جستجوگرها هاست (مثلا گوگل ، یاهو ، بینگ و …)
    اطلاعات این بخش نمایش داده نمی شود.
    ولی اطلاعاتی همچون عنوان صفحه ، کلمات کلیدی ، استایل های خارجی و داخلی ، جاوا اسکریپت های خارجی و داخلی ، آیکون صفحه ، توضیحاتی راجع به سازنده و … را تعریف میکند. که برای مرورگر و نیز ایندکس کردن توسط جستجوگرهای وب مانند گوگل و یاهو بسیار مهم است.
  • body :
    این قسمت بدنه سند ماست که به قولی اسمش روشه ، هرچیزی که شما وقتی یه سایت رو باز میکنید و میبینید تو این بخش قرار میگیره.
  • کامنت گذاری :
    همچنین برای ایجاد کامنت در html میتونید از کدی که تو کد بالا داخل body نوشتم استفاده کنید.
  • title :
    این تگ داخل تگ head نوشته میشه و عنوان سایت رو نشون میده ، محل نمایشش هم بالای تب مربوط به سایت بالای مرورگر هست.

نحوه باز و بسته شدن تگ ها در html

نکته : اگه ما چند تگ رو پشت سره هم باز کنیم ، نحوه بستن آنها چطور خواهد بود ؟ باید از داخلی ترین تگ (اخرین تگی که باز کردیم ) به سمت خارجی ترین تگ شروع به بستن تگ ها کنیم . به مثال زیر توجه کنید :

<html>
<head>
      <title> type here your title </title>
</head>
<body>
        <center><b><i><p> This is my first paragraph </p></i></b></center>
</body>
</html>

به نحوه باز و بسته شدن تگ ها دقت کنید .

اولین پروژه

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

  • اول نوت پد رو باز کنید .
  • حالا کد بالا رو کپی و پیست کنید.
  • حالا این save as رو بزنید و پسوند فایل رو از txt به اچ تی ام ال تغییر بدید و ذخیره کنید.
  • حالا به مرورگر بازش کنید ، مثلا فایرفوکس یا اکسپرور خودمون.

خب این شد اولین پروژه اچ تی ام ال شما ، حالا تگ های جدید بالا رو توضیح میدم :

  • center : از اسمش معلومه ، هرچیزی داخل این تگ ، وسط چین میشه .
  • b مخفف bold هست و متن داخلش رو درشت میکنه .
  • i مخفف italic هست و متن داخلش رو مورب میکنه.
  • p این تگ هم مخفف paragraph هست (پاراگراف) و کلا هر متنی که خواستید تو سند html بنویسید رو داخل این تگ قرار بدید.

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

تگ هایی که تو نسخه جدید html5 منسوخ شدن هم ذکر شده. این سایت منبع عالی هست برای یادگرفتن اچ تی ام ال درباره هر تگ میتونید مثال های مختلف پیدا کنید و اموزشش روان هست .

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

در صورت داشتن سوالی زیر همین پست کامنت کنید دوستان.

منبع: آکادمی هنرجو

دیگر مقالات مفید سایت آکادمی هنرجو:

نوشتن نظر

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