آموزش HTMLآموزش طراحی سایت

معرفی HTML – HTML چیست ؟

آشنایی با HTML و متد درسی HTML میزفا

اچ تی ام ال چیست ؟ HTML چه کاربردی دارد ؟ در این مقاله قصد داریم به طور کلی به معرفی HTML بپردازیم.

آموزش طراحی سایت با HTML

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

پادکست مقالات HTML

پادکست این مقاله : علی اسمعیلی

 

 اچ تی ام ال HTML چیست؟

پیش از اینکه به معرفی HTML بپردازیم لازم است تا ابتدا با انواع برنامه ھای تحت وب آشنا شویم. برنامه ھای تحت وب بصورت کلی به دو دسته تقسیم می‌شوند:

  • برنامه ھای استاتیک (Static)

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

  • برنامه های داینامیک (Dynamic)

    برنامه هایی هستند که داده ای را از کابر گرفته سپس آن را پردازش کرده و نتیجه‌ی آن را در اختیار کاربر قرار می‌دهند.

HTML چیست؟ HTML یک زبان نماد گذاری یا نشانه گذاری است که در طراحی سایت کاربرد بسیار فراوانی دارد . از اچ تی ام ال برای ساختن صفحات استاتیک استفاده می‌شود و به وسیله آن میتوان صفحات وبی ساخت که شامل عکس ، فیلم ،موزیک ، پاراگراف ، جدول و … است. HTML  مخفف عبارت Hyper Text Markup Language به معنی زبان نشانه گذاری ابر متن است، که در ادامه به توضیح ھر یک از کلمات این عبارت خواهیم پرداخت و معرفی زبان HTML را تکمیل خواهیم کرد.

  •  Language

    این عبارت نشان دھنده این است که HTML یکی از زبان ھای برنامه نویسی است. البته بهتر است که به جای عبارت “برنامه نویسی” از “نشانه گذاری” استفاده کنیم.

  • Text

    این عبارت نشان می‌دھد که یک برنامه به زبان HTML یک فایل متنی ساده بیشتر نیست! در واقع مرورگر‌ھا این فایل متنی را می‌خوانند و با توجه به دستورات داخل آن ، آن را به عناصر مختلف همچون عکس‌ها ، پاراگراف‌ها و … تبدیل می‌کنند.

  • Hyper

    در مقابل “Liner” قرار دارد . جالب است که بدانید زبان ھای برنامه نویسی به دو دسته تقسیم می‌شوند : 1 – Hyper – 2     Linner

    Liner : به زبان ھایی ھمچون C,Pascal, Delphi, PHP و … گفته می شود که باید دستورات به ترتیبی که نوشته شده اند به صورت خط به خط اجرا شوند و تا خطی از برنامه اجرا نشده خط بعدی اجرا نمی شود، و در واقع الگوی خطی دارند که وجود خطا در ھر خط از برنامه موجب توقف اجرای کل برنامه می شود.
    Hyper : در مقابل زبانھایی ھستند که الگوی خاصی ندارند و خطا در یک خط از برنامه موجب توقف کل برنامه نمی شود. به این زبان ھا Hyper گفته می شود.

  • Markup

    زبان HTML بر خلاف بسیاری از زبان ھای برنامه نویسی فاقد دستور‌ھایی ھمچون ساختارشرطی، حلقه، توابع و… است. در عوض این زبان از ساختار ساده ای به نام Markup Tag یا به اختصار Tag ( برچسب ) تشکیل شده است. در واقع اچ تی ام ال (HTML) یه نوع دستور بیشتر ندارد و آن ھم ھمین Tagھا ھستند.

آیا HTML یک زبان برنامه نویسی است؟

همانطور که گفتیم زبان HTML یک زبان نشانه گذاری است و اصطلاح زبان برنامه نویسی HTML یک اصطلاح اشتباه است، چرا؟

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

پس تا الان متوجه شدیم که HTML چیست ؟ و با این تعریف متوجه شدیم که چرا HTML یک زبان برنامه نویسی نیست!

ساختار صفحات HTML

وقتی با HTML کار میکنیم، از یک ساختار خیلی ساده یعنی تگ ها و خاصیت ها استفاده می‌کنیم. به عنوان مثال برای تهیه یک پاراگراف از تگ p استفاده می‌کنیم.

<p>این نمونه را در میزفا مشاهده می کنید. </p>
<p>امیدواریم یک شروع خوب را با میزفا داشته باشید. </p>

در بالا با استفاده از تگ باز و بسته p ، دو عبارت را نوشتیم که خروجی آن را در تصویر زیر مشاهده می‌کنید.

نمونه کد HTML
نمونه کد HTML

برای دیدن توضیحات کامل در رابطه با ساختار صفحات HTML می‌توانید، مقاله ساختار صفحات HTML را بررسی کنید.

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

مزایا و معایب HTML

مانند هر چیز دیگه ای، HTML هم محدودیت ها و قدرت های خاص خودش رو داره که ما بهش مزیت و عیب HTML میگیم و در ادامه باهاشون آشنا میشیم.

مزیت ها

  • به علت داشتن منابع بسیار خوب و انجمن های رفع اشکال قدرتمند این زبان یکی از پر استفاده ترین زبان هاست.
  • به طور کلی در تمامی مرورگر های وب به صورت Native یا زبان مادری فعاله.
  • یادگیری آن بسیار راحت است و نیازی به دانش قبلی نداره.
  • متن باز و کاملا رایگانه.
  • کد هاش کاملا قابل فهم و ساده هست.
  • استاندارد های اصلی وب توسط سازنده همین زبان یعنی W3C تعیین میشه.
  • خیلی راحت با زبان های برنامه نویسی سمت سرور یا Backend مثل PHP ، Node.js و Python (فلسک یا جنگو) ارتباط برقرار می‌کنه.

معایب

  • در بیشتر مواقع برای ساخت صفحات و برنامه های استاتیک ازش استفاده میشه و برای استفاده پویا یا داینامیک از HTML نمیتونید استفاده کنید و باید از Javascript یا یک زبان سمت سرور مثل PHP استفاده کنید.
  • از یک منطق خاصی برای ساخت صفحات پیروی نمیکنه. برای هر صفحه شما باید بخش های مختلفش رو بسازید و خودتون تعریف کنید که اون بخش چه کاری انجام میده. حالا تو HTML5 یک سری تگ ها اضافه شده به نام header و footer ولی اون ها هم از منطق خاصی پیروی نمیکنند و فقط برای راحت تر کردن مفهوم استفاده میشن.
  • بعضی از مرورگر ها امکانات و ویژگی های جدید رو دیر پیشتیبانی می‌کنند.
  • پیش بینی رفتار مرورگر ها در نمایش کد ها کمی سخته ( به عنوان مثال بعضی از مرورگر های قدیمی تگ های جدید موجود در HTML5 را نمیشناسند و نمیتوانیم تضمین دهیم که با بعضی از راهکار ها باز هم تمامی مرورگر ها وب سایت ما را صحیح نمایش می‌دهند).

ساختار آموزش HTML در میزفا

من علی اسمعیلی به عنوان مدرس این دوره آموزشی در خدمت شما هستم و امیدوارم بتونم HTML را به ساده ترین شکل ممکن بهتون بیاموزم و این آموزش باعث پیشرفت شما بشه.

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

آخر هر مقاله سعی کردم که تمرین هایی رو براتون مانند نمونه زیر قرار بدم و برای افزایش انرژی شما برای ادامه‌ی دوره و تکمیل آموزش ها، برای حل تمرین ها یک هدیه کوچک قرار دادیم که این هدیه در حال حاضر به این صورت است که :

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

سوال:

متن سوال!!!

در بعضی از مثال ها علاوه بر خروجی برای جمع آوری منابع کوتاه پیش‌نمایش خروجی تصویری به همراه کد ها قرار گرفته، که می‌تونید آرشیوشون رو ذخیره و نگه‌داری کنید و در آینده برای یاد آوری ازشون استفاده کنید.

نمونه HTML
نمونه HTML

نتیجه گیری + سوال

خب در این جلسه با مفهوم HTML ، اینکه HTML چیست و چه کاربردی دارد، آشنا شدیم در جلسه بعدی به معرفی تاریخچه‌ی پیدایش HTML می‌پردازیم.

سوال:

سوال یک) HTML چه نوع زبانیست؟

سوال دو) فرق برنامه های استاتیک و داینامیک چیست؟

اگر به هر دو سوال جواب بدی بهتره ولی میتونی یکی رو انتخاب کنی.

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

تا جلسه بعدی، شاد باشید…

علی اسماعیلی

درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم...

نوشته های مشابه

‫28 دیدگاه ها

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

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

    داینامیک:صفحاتی که از سمت سرور استفاده میکنند و با کاربر تعامل دارند مثل همین صفحه که هم مقاله داره و هم نظرات

  2. سوال ۱: HTMl یک زبان نشانه گذاری فرا متن است.
    سوال۲:
    استاتیک: در طراحی سایت استاتیک تمامی عناصر در فایل های HTMl انجام می شوند و مستقیما برروی سرور قرار میگیرند.
    دینامیک:وب سایت‌های دینامیک به کمک برنامه نویسی وب و سیستم مدیریت محتوا تولید شده‌اند و محتوای این وب‌سایت‌ها توسط صاحبان آن‌ها قابل تغییر و بروز رسانی می‌باشند.

    1. سلام نگار سوال یک قابل قبوله.
      سوال دوم بخش استاتیک کاملا درسته. در مورد داینامیک علاوه بر این مواردی که گفتی اینکه روی داده‌ها پردازشی هم صورت میگیره از مهمترین هاست.

      به هر شکل جایزه‌ات را دریافت می‌کنی و ممنون از مشارکتت.

  3. html یک زبان نشانه گذاری برای برنامه ھای استاتیک (Static) است

    static:برنامه هایی هستند که صفحات آن ها از متن ها تصاویر صوت تشکیل شده اند این صفحات هیچ تعاملی با کاربر ندارد و کاربر تنها می تواند این صفحات را مشاهده کند
    dynamic: برنامه هایی هستند که داده های را از کاربر میگیرد و بهد از پردازش نتیجه را به کاربر می دهد

  4. ببخشید ابتدا من یک سوال بپرسم آقا چطور میتونم اکانتم رو در میزفا ویرایش بکنم (اطلاعات ثبت شده ام را )
    و اکنون جواب سوالات :
    ۱- HTML یک زبان نماد گذاری یا علامت گذاری که بوسیله فراتر از متن ها یا همون تگها نوشته میشه
    ۲- برنامه های داینامیک یکسری برنامه اظلاعات دهنده هستند که هیچ تعاملی با کاربر نداره و فقط با نشون دادن یکسری عکس و متن و صوت یا فیلم اطلاعات ارائه میده اما برنامه های استاتیک هم اطلاعات دهنده و هم تعاملیه به این صورت که میتونه مطالبی از کاربر دریافت و پس از ویرایش و ذخیره سازی داده های ویرایش شده ای رو در اختیار کاربر قرار بده بعبارتی یک سیستم پرسش و پاسخ با کارگر ایجاد میکنه دقیقا مثل اینکاری که من دارم میکنم که شما با تگ فرم در HTML شکل این فرم رو طراحی کردید و با PHP یا .net و جاوا اسکریپت تعاملات کاربری و بانک اطلاعاتی درست کردید.

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

  5. سلام بر شما

    پاسخ سوال اول: html یک زبان نماد گذاری یا نشانه گذاری

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

    1. درود
      ممنونم از پاسخ شما.
      درسته ولی متاسفانه در آکادمی میزفا عضو نیستید و نتونستیم امتیاز به شما بدیم.

  6. سلام وقتتون بخیر باشه
    پاسخ سوال اول
    html رو نمی تونیم بگیم که یک زبان برنامه نویسی است. html یک زبان نشانه گذاری می باشد
    پاسخ سوال دو
    یک برنامه ی استاتیک شامل تصویر ، صوت و… هست که کاربر ما نمیتونه تعاملی داشته باشه طراحیش با html امکان پذیر است
    در داینامیک کاربر ما چیز هایی مثل نوشته و … رو وارد می کنه بعد اون زبان بهش پردازش میکنه یا برمیگردونه. یعنی دقیقا بر عکس استاتیک

    1. سلام. درسته ممنونم از تعریف شما. امتیاز داده شد

  7. اچ تی ام ال نوعی زبان برنامه نویسی نیست بلکه یک زبان نماد گزاری است و برای طراحی وب به کار می رود

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

    1. درسته ممنونم از وقتی که گذاشتی.
      متاسفانه با ایمیلی که نظر ارسال کردی در اکادمی میزفا ثبت نام نکردی و نتونستیم امتیاز به شما بدیم.

  8. به نام خدا و با سلام خدمت همکاران میزفا
    همنطور که قبلا” خودم را خدمتتان معرفی کردم بنده احسان تفکری علی آبادی هستم البته شما میتونید مرا اسی نیز نام ببرید .
    من در نت پد ،ورد پد.و ورد مایکروسافت 2013 سعی در نوشتن فایل پی اچ پی داشتم که بعد از نام گذاری قسمت سیو تیپ از گزینه ای به نام پی اچ پی نداشت و وقتی هم روی آل فایل میزنم در زمان اجرا فایل پسوند اون رو برام تکس میزنه و من به شخصه راغب نیستم از برنامه های مخصوص برای نوشتن فایل پی اچ پی استفاده کنم و میخوام بایکی از همین برنامه ها که در کامپیوتر هست پی اچ پی رو بنویسم .ممنون میشم که زحمت بکشید و در خصوص مشکل پیش آمده من را راهنمایی کنید.
    ممنون
    اسی

    1. سلام اسی عزیز.
      طبیعتا به شما پیشنهاد نمیکنم که در ورد یا نت پد کدنویسی کنید.
      پیشنهاد میکنم از Visual Studio Code استفاده کنید، رایگان سبک و قدرتمند هست.
      یا حداقل از Notepad++ استفاده کنید تا مشکلات اشاره شده رو نداشته باشید.

  9. salam
    html ? html zabane neshane gozarist ke baraye sakhte barname haye static estefade mishe va yek zabane barname nevisi nist
    static:barname hay hastant ke az video va tasavir va matn barkhordarand ke hich taamoli ba karbar nadashte va faghat karbar mitone onaro tamashakone
    dynamic: barnamehay hastand ke yek dade ro az karbar gerefte va pardazesh karde va natijaro ham be karbar neshon mide

  10. html یک زبان نمادگذاری ویا نشانه گذاری مورد استفاده در برنامه های استاتیک است .

    کلا برنامه های تحت وب به دو دسته تقسیم می شوند :1استاتیک 2 داینامیک
    برنامه های استاتیک شامل صوت ،تصویر ،فایل و … می باشد که کاربر نمیتواند هیچ تعاملی با انها داشته باشد و صرفا جهت مشاهده است . اما برنامه های داینامیک اطلاعات و داده ها را از کابر دریافت می کنند و پس از پردازش خروجی را تحویل کاربر می دهند .

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

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

    1. سلام مریم. در مورد تعریف dynamic کمی بیشتر دقت کن. جواب دوتا بخش دیگه درسته.

  12. html یک زبان نشانه گذاری برای سایت های ststic است
    static برنامه هایی هستند که صفحات آن ها از متن ، تصاویر ، صوت و … تشکیل شده در واقع این صفحات هیچ گونه تعاملی با کاربر ندارند و کاربر تنها می‌تواند این صفحات را مشاهده کند
    dynamic برنامه هایی هستند که داده ای را از کابر گرفته سپس آن را پردازش کرده و نتیجه‌ی آن را در اختیار کاربر قرار می‌دهند.

    1. سلام علی جان.
      ممنون از پاسخ شما، امتیاز در اکانت شما شارژ شد.

  13. سواال
    htmlچه نوع زبانیست؟htmlیک زبان برنامه نویسی نیست .بلکه در ان یک زبان نشانه گزاری سمت وب است
    استاتیک:برای قسمت استایل دهی سایت است
    دینامیک:برای قسمت سمت سرور است .

    1. سلام آرش عزیز
      اکانتت شارژ شد.
      ممنونم از وقتی که گذاشتی
      ادامه درس های html حتما پیش برو

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

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

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

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

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر