• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 6245 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

آموزش HTML (قسمت 1) : مقدمه ای بر HTML

32004 ۱۹ شهریور ۹۱

HTML چیست؟

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

  • برنامه های استاتیک (Static): برنامه هایی هستند که صفحات آنها از متن، تصاویر،صوت و ... تشکیل شده. و احیاناً چند لینک به سایر آدرس ها در آن قرار گرفته است. در واقع این نوع صفحات با کاربر تعاملی ندارند و صرفاً کاربر میتواند موارد داخل این صفحات را مشاهده کند.
  • برنامه های داینامیک (Dynamic): برنامه هایی هستند که داده ای را از کاربر گرفته، و آن را پردازش می کنند، و در انتها نتیجه‌ی آن در اختیار کاربر قرار می گیرد.

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

HTML مخفف عبارت Hyper Text Markup Language (زبان نشانه گذاری ابر متن) است، که در ادامه به توضیح هر یک از کلمات این عبارت میپردازیم:

Language: این عبارت نشان دهنده این است که HTML یکی از زبان های برنامه نویسی است. البته در ادامه خواهیم دید که بهتر است به جای عبارت "برنامه نویسی" از "نشانه گذاری" استفاده کنیم.

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

Hyper: در مقابل "liner" قرار دارد. جالبه بدونید که زبان های برنامه نویسی رو به دو دسته تقسیم میکنند.

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

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

چون فایلهای Html متنی هستند بنابراین برای کد نویسی صفحات وب از هر ویرایشگر متنی میتوان استفاده کرد مانند Notepad یا Wordpad که در تمامی ویندوزها قابل دسترسی هستند. البته برای نوشتن کدهای Html نرم افزار های پیشرفته زیادی در این زمینه وجود دارد که ما را در نوشتن تگ ها راهنمایی میکنند. که پیشنهاد من برای اینکار نرم افزار Notepad++ است که میتونید آخرین نسخه این نرم افزار رو از لینک زیر دانلود کنید:

برای مشاهده نتیجه کار هم نیاز به یک مرورگر (....,Opera,IE, Firefox, Google Chrome)دارید که من از گوگل کروم استفاده میکنم.

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 19 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

    خیلی عالی بود
    ولی یکی از دوستان آموزش HTML رو گذاشته اگه شما ادامه ی آموزشو اونو بدین خیلی بهتره

    • ‏‏
      سجاد دریس(۱۹ شهریور ۱۳۹۱)

      سلام.
      آقای محمد سینا طراحی قالب رو آموزش میدادن ولی بنده میخوام که فقط html رو آموزش بدم.

  • ‏‏
    لقمان آوند(۱۹ شهریور ۱۳۹۱)

    عالی بود سامان جان

  • ‏‏

    سلام
    اگرممکن است درادامه آموزشxhtml5یاپیشرفته ترین این آموزش رابه کاربران آموزش لطفاً آموزش دهید
    نمی دانم منظورم واضح بودیانه
    باتشکر

    • ‏‏
      سجاد دریس(۲۰ شهریور ۱۳۹۱)

      سلام
      دوست عزیز آموزش های ما بر اساس html5 یعنی آخرین نسخه از html است.

      در ضمن xhtml فقط شامل یک سری قواعد و اصول برای html هست. که موقع طراحی باید از اونا پیروی کنیم. این قواعد رو هم طی آموزش بهتون معرفی می کنیم.

  • ‏‏

    سلام داداش خیلی خوب بود دمت گرم با هم سر میزنم با نظر

    • ‏‏
      سجاد دریس(۶ مهر ۱۳۹۱)

      سلام.
      ممنون لطف داری قاسم جان.

  • ‏‏
    میلاد(۵ آبان ۱۳۹۱)

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

  • ‏‏

    کی گفته HTML فقط یک زبان برای ساختن صفحات استاتیک است.
    اگر منظورتون اینکه نمیتونه ورودیهایش رو ویرایش کنه و در اختیار کاربرش قرار بده کاملاً اشتباه میکنید من خودم کدی بلدم که وردیش رو ویرایش می کنه و نتیجه رو تحویل کاربر میده. 😆

    • ‏‏
      سجاد دریس(۱۲ خرداد ۱۳۹۲)

      “کی گفته HTML فقط یک زبان برای ساختن صفحات استاتیک است.”!
      استاتیک یعنی نمایش یک سری خروجی به کاربر، بدون اینکه پردازشی روی داده ها بشه، و کاربر میتونه اون خروجی رو فقط مشاهده کنه.
      حالا شما توی همین صفحه ای که هستین میتونید ویرایشی توی متون انجام بدین؟
      اگر HTML تعریف یا کاربردی غیر از این داره بگین…..
      اگه منظورتون editable کردن تگ ها هست، بله با این روش میشه بعضی تگها رو ادیت کرد، ولی با ریفرش کردن صفحه باز به مقدار اولیه بر میگرده. اگر هم منظورتون اون دستور هک صفحه است که بشه همه اجزاء رو ادیت کرد.
      اون ربطی به زبان html نداره.

  • ‏‏

    این کد رو یه امتحان کن.

    • ‏‏
      لقمان آوند(۱۲ خرداد ۱۳۹۲)

      عزیز دستورات محاسباتی که استفاده کردی مال html که نیست . کدهای جاوااسکریپت هستند . فرق جاوااسکریپت و html رو که میدونی ؟

  • ‏‏

    آره فرقشون رو میدونم ولی تا جایی که من میدونم در بین کد های HTML وقتی بخواد یک کد جاوا اسکریپت بیاد بین تگهای :


    میاد البته بجز onload و اینها

    • ‏‏
      سجاد دریس(۱۲ خرداد ۱۳۹۲)

      اگر به جمله قبلتون برگردین؛ بحثتون سر این بود که html فقط زبانی برای ساختن صفحات static نبود.
      حالا شما “با جاوا اسکریپت” یه سری محاسبات انجام دادی. اما در هر صورت هنوز هم صفحمون استاتیک هست.
      منظور از پردازش در صفحات داینامیک، فرستادن یک درخواست از طرف کاربر به سرور، اتصال به پایگاه داده ، گرفتن خروجی، و در نهایت نمایش داده ها است
      که با html و حتی javascript نمیشه همچین کاری کرد پس یه زبان برای ایجاد صفحات استاتیک هست.
      این جمع و تفریق هم دv مرورگر (سمت کاربر) انجام شده، پس با این کدتون صفحه رو داینامیک نکردین.

    • ‏‏
      لقمان آوند(۱۲ خرداد ۱۳۹۲)

      اون onload و onclick و … معروف به رویداد ها هستند که به عنوان مقدار دستورات جاوااسکریپت رو می پذیرند دوست عزیز …
      بد نیست اگه این آموزش رو بخونید .

  • ‏‏
    محمّد حسن مهرآذر(۱۷ مرداد ۱۳۹۲)

    سلام دوست عزیز من یک سوالی داشتم:
    من میخواستم یاد بگیرم تا قالب های رزبلاگ رو طراحی کنم بهتره اوّل HTML و CSS رو یاد بگیرم؟

    • ‏‏
      وحید صالحی(۱۷ مرداد ۱۳۹۲)

      پایه و اساس طراحی وب و قالب css و html هست و شما حتما باید به آن مسلط باشی…

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram