• سبد خرید
  • دوره و محصولات
    • انتخاب سردبیر
    • دوره های آموزشی
    • فایل های عضویت ویژه
    • پکیج ها
    • کتاب
  • مقالات آموزشی
    • طراحی سایت با وردپرس
      • آموزش وردپرس
      • آموزش ووکامرس
      • آموزش سئو
      • افزونه وردپرس
      • امنیت وردپرس
      • رفع خطا و مشکلات وردپرس
    • آموزش نرم افزار
      • آموزش فتوشاپ
      • آموزش ایلاستریتور
      • آموزش پریمیر
      • آموزش افترافکت
      • آموزش آدیشن
    • رشد کسب‌وکار
      • صنعت آموزش
      • توسعه فردی
      • مدیریت و رهبری
      • بازاریابی و تبلیغات
      • دیجیتال مارکتینگ
      • فروش
      • تولید محتوا
      • موبایل گرافی
      • شبکه های اجتماعی
    • پخش زنده
    • پادکست
  • خرید اشتراک
  • خدمات
برای اطلاع از تخفیف ها و جشنواره های ایساتیس ما را در اینستاگرام و تلگرام دنبال کنید.
آموزش ایساتیس
  • سبد خرید
  • دوره و محصولات
    • انتخاب سردبیر
    • دوره های آموزشی
    • فایل های عضویت ویژه
    • پکیج ها
    • کتاب
  • مقالات آموزشی
    • طراحی سایت با وردپرس
      • آموزش وردپرس
      • آموزش ووکامرس
      • آموزش سئو
      • افزونه وردپرس
      • امنیت وردپرس
      • رفع خطا و مشکلات وردپرس
    • آموزش نرم افزار
      • آموزش فتوشاپ
      • آموزش ایلاستریتور
      • آموزش پریمیر
      • آموزش افترافکت
      • آموزش آدیشن
    • رشد کسب‌وکار
      • صنعت آموزش
      • توسعه فردی
      • مدیریت و رهبری
      • بازاریابی و تبلیغات
      • دیجیتال مارکتینگ
      • فروش
      • تولید محتوا
      • موبایل گرافی
      • شبکه های اجتماعی
    • پخش زنده
    • پادکست
  • خرید اشتراک
  • خدمات
ورود | ثبت‌نام

وبلاگ

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

آموزش سینتکس HTML

22 فروردین 1402
ارسال شده توسط تیم تحریریه آموزش ایساتیس
آموزش HTML
آموزش سینتکس HTML + همراه با ویرایشگر کد زنده
زمان مطالعه: 3 دقیقه
تعداد بازدیدها: 13

آموزش سینتکس HTML + همراه با ویرایشگر کد زنده

آنچه در این مقاله می‌خوانید نمایش
آموزش سینتکس HTML + همراه با ویرایشگر کد زنده
Attribute ها
توضیحات تکمیلی
عناصری که در خودشان بسته می شوند

مانند تمام زبان ها، HTML نیز قوانین مخصوص به خود را دارد. در این مطلب با قوانین و نحو زبان HTML آشنا می شویم.

HTML اختصاری برای HyperText Markup Language می باشد.

  • HyperText یعنی HTML از قسمت HTTP اینترنت استفاده می کند.
  • Markup یعنی کدی که می نویسیم با کلمات کلیدی حاشیه نویسی و علامت گذاری می شود.
  • Language یعنی هم توسط انسان و هم توسط کامپیوتر قابل خواندن می باشد.

در HTML قوانین بسیار ساده هستند به عنوان نمونه یکی از مهمترین قوانین مشخص کردن مرزها می باشد. اینکه مشخص کنیم هر چیزی از کدام قسمت شروع می شود و پایان آن کجا می باشد.

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

				
					<p>Lorem ipsum dolor sit amet, conitationem doloribus! Sint non.</p>
				
			

آنچه که بین کمانک ها < > می بینیم تگ (Tag) نام دارد. وظیفه تگ ها این است که مشخص کنند کجا یک چیزی شروع و کجا تمام می شود.

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

تگ ها معمولا جفت هستند:

  • تگ شروع <p>
  • تگ پایان </p>

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

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

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

Attribute ها

Attribute یا ویژگی ها اطلاعات اضافه ای هستند که به عناصر HTML اضافه می شوند. ویژگی ها را به تگ ها می توانیم اضافه کنیم و آنها نیز توسط مرورگر نمایش داده نمی شوند. در دنیای HTML چندین ویژگی وجود دارند که به مرور با آنها آشنا می شویم.

به عنوان مثال یکی از این ویژگی ها title نام دارد که به وسیله آن می توان به یک عنصر HTML اطلاعاتی اضافه کرد که در زمانی که کاربر موس را بر روی آن عنصر نگه می دارد آن اطلاعات به کاربر نشان داده شوند. البته کاربرد این ویژگی فقط مخصوص کاربران نیست بلکه ربات ها نیز از اینگونه ویژگی ها استفاده می کنند.

				
					<p title="اطلاعات مورد نظر اینجا میاد"></p>
				
			

موس خود را بر روی پاراگراف زیر قرار دهید:

See the Pen Untitled by Ali Tasharoei (@Isatis-academy) on CodePen.

پرکاربردترین ویژگی ها در HTML ویژگی class و id می باشند. که با آنها در فصل های آینده بیشتر آشنا می شویم. فقط نکته ای که باید الان بخاطر بسپاریم این است که id یکتا است پس دو یا چند عنصر نمی توانند یک id یکسان داشته باشند. اما class به این صورت نیست.

				
					<p class="number" id="one"></p>
<p class="number" id="two"></p>
				
			

توضیحات تکمیلی

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

در سینتکس زبان HTML برای نوشتن توضیحات یا Comment در کد کافی است توضیحات را با علامت <!-- شروع و با علامت --> به پایان برسانیم. در این صورت هر آنچه که بین این دو علامت نوشته شود توسط مرورگر پردازش نشده و نادیده گرفته می شود.

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

				
					<!-- این جمله توسط مرورگر نادیده گرفته می شود چون یک توضیح است -->
<p>This is a test.</p>

				
			

عناصری که در خودشان بسته می شوند

برخی از عناصر HTML فقط دارای تگ شروع هستند:

				
					<br> <!-- عنصری که خط جدید ایجاد می کند -->
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="| سینتکس" title="آموزش سینتکس HTML 2" data-lazy-src="http://placehold.it/50x50"><noscript><img decoding="async" src="http://placehold.it/50x50" alt="| سینتکس" title="آموزش سینتکس HTML 2"></noscript> <!-- عنصر تصویر -->
<input type="text"> <!-- عنصری برای وارد کردن متن -->

				
			

چون این عناصر تگ پایانی ندارند محتوایی درون آنها قرار نمی گیرد. البته این عناصر معمولا ویژگی هایی دارند که باید برای آنها تعیین شود.

نویسنده : علی تشرعی | تیم تحریریه آموزش ایساتیس
منبع : تیم تحقیقات آموزش ایساتیس
منبع

www.w3schools.com

راست چین
سون هاست
ایرانسرور
برچسب ها: HTMLآموزش HTML
قبلی رفع خطای Missing a Temporary Folder در وردپرس
بعدی عناصر خطی و بلاک در HTML

دیدگاهتان را بنویسید لغو پاسخ

پست های جدید
  • چند نکته که برای کسب درامد از اینستاگرام باید رعایت کنید
  • 12 راه عالی برای کسب درآمد حرفه ای در اینستاگرام
  • کسب درآمد حرفه ای از اینستاگرام
  • 7 اشتباه رایج مبتدی ها در ایمیل مارکتینگ
  • آموزش جستجوی عکس در گوگل
  • 10 ترفند بهبود سئو با کمک ChatGPT
  • 5 نکته مهم در تصمیم‌گیری
  • چطور آهنگ‌های معروف ریلز های اینستاگرامی را پیدا کنیم؟
دوست داری چی یاد بگیری؟
نرم افزار های ادوبی
QR کد زیر را اسکن کنید
گزارش خرابی لینک
درباره آکادمی ایساتیس

آموزش ایساتیس از سال ۱۳۹۸ با شعار آموزش جامع برای پیشرفت، فعالیت خود را در زمینه آموزش تخصصی نرم افزارهای ادوبی و راه اندازی کسب‌وکار اینترنتی با توجه به استانداردها و متدولوژی های روز دنیا و مد نظر قرار دادن ارزش ها و باورهای حرفه‌ای آغاز کرد. اساتید و تیم ایساتیس همواره تلاش می‌کند که با مطالعه فراوان آموزش‌های خود را به روز کرده و با تیم پشتیبانی در کنار دانشجویان به رفع اشکالات آنها می‌پردازند. | ساخته شده با عشق در ایران

آکادمی آموزش ایساتیس توسط سون هاست پشتیبانی می‌شود و دارای ترافیک نیم بها می‌باشد.

دسترسی سریع
  • ارسال تیکت
  • کیف پول
  • پشتیبانی
  • ارتباط با ما
  • قوانین سایت
  • درج آگهی
  • اساتید و کارکنان
  • راهنما سایت
  • افزونه وردپرس
  • فونت پولی
مجوز ها
استفاده از سایت مشروط بر قبول توافق نامه کاربری و حفظ حریم شخصی است.حقوق مادی و معنوی این سایت متعلق به مجموعه آموزش ایساتیس است.
اشتراک گذاری در شبکه های اجتماعی
ارسال به ایمیل
https://amoozeshisatis.com/?p=18212
ورود
استفاده از موبایل
استفاده از آدرس ایمیل
آیا هنوز عضو نیستید؟ اکنون عضو شوید
بازنشانی رمز عبور
استفاده از موبایل
استفاده از آدرس ایمیل
عضویت
قبلا عضو شدید؟ اکنون وارد شوید
مرورگر شما از HTML5 پشتیبانی نمی کند.