آموزش طراحی سایتآموزش 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 روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم...

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

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


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

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

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

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