• سبد خرید
  • آموزشداغ
    • ساختار پست ها
      • آخرین پست های سایت
      • پادکست صوتی
      • ویدئو
      • مقاله
    • کسب و کار
      • شبکه های اجتماعی
      • دیجیتال مارکتینگ
      • بازاریابی و تبلیغات
      • مدیریت و رهبری
      • رشد کسب‌وکار
      • صنعت آموزش
      • تولید محتوا
      • توسعه فردی
      • فروش
    • آموزش نرم افزار
      • موبایل گرافی
      • آموزش ICDL
      • آموزش فتوشاپ
      • آموزش ایلاستریتور
      • آموزش افترافکت
      • آموزش پریمیر
      • آموزش اودیشن
    • طراحی سایت
      • رفع خطا و مشکلات سایت
      • آموزش وردپرس
      • افزونه وردپرس
      • امنیت وردپرس
      • آموزش ووکامرس
      • آموزش سئو
  • محصولات و خدماتحراج
    • فروشگاه – دوره و محصولات
    • دوره های عضویت VIP
    • عضویت VIPداغ
    • خدمات
      • دانلود از سایت های فروش فایل
      • طراحی
        • طراحی سایت و فروشگاه اینترنتی
        • طراحی پست ، استوری و بنر – به زودی
        • ساخت پادکست – به زودی
      • ادمین اینستاگرام – به زودی
      • تدوین ویدیو – به زودی
      • موشن – به زودی
  • رویدادها
    • رویداد های جدید
    • رویداد های من
  • دانلودهاجدید
    • افزودنی نرم‌افزار های ادوبی
      • فونت حرفه ای
      • فونت رایگان – به زودی
      • پریست – به زودی
      • پلاگین
      • اکشن – به زودی
      • جعبه ابزار – به زودی
    • اپلیکیشن اندروید
      • InShot Video Editor Pro – ویرایشگر ویدئو پر از امکانات اینشات
      • KineMaster Video Editor – کین مستر ویرایشگر قدرتمند ویدئو
      • PicsArt Photo Editor – پیکزآرت اندروید قدرتمندترین ویرایشگر عکس
      • CapCut – ویرایشگر ویدئو همه کاره کپ کات نسخه اندروید
      • دانلود جدیدترین نسخه کم اسکنر – CamScanner
    • نرم افزار های کاربردی
      • دانلود جدیدترین نسخه دانلود منیجر – Internet Download Manager (IDM)
      • دانلود جدیدترین نسخه لست پس پسورد – LastPass Password Manager
    • نرم افزار های ادوبی
      • دانلود جدیدترین نسخه فتوشاپ – Adobe Photoshop
      • دانلود جدیدترین نسخه ایلاستریتور – Adobe Illustrator
      • دانلود جدیدترین نسخه پریمیر – Adobe Premiere Pro
      • دانلود جدیدترین نسخه افترافکت – Adobe After Effects
      • دانلود جدیدترین نسخه مدیا انکودر – Adobe Media Encoder
      • دانلود جدیدترین نسخه آدیشن – Adobe Audition
  • درباره ما
    • ارتباط با ما
    • ارتباط با ما
    • پشتیبانی
    • قوانین سایت
    • اساتید و کارکنان
    • همکاری در فروش
      • بازاریاب شوید
      • اکانت بازاریابی من
      • صفحه قوانین و مقررات بازاریابی
    • پیشنهادها و انتقادها
  • اپلیکیشن
    • وب اپلیکیشن
  • پخش زنده
  • راهنما
برای اطلاع از تخفیف ها و جشنواره های ایساتیس ما را در اینستاگرام و تلگرام دنبال کنید.
آموزش ایساتیس
  • سبد خرید
  • دوره و محصولات
  • آموزش هاداغ
    • ساختار پست ها
      • پست های آموزشی عضویت ویژه
      • آخرین پست های سایت
      • دسته بندی آموزش ها
      • رادیو ایساتیس
      • ایساتیس TV
    • کسب و کار
      • صنعت آموزش
      • رشد کسب‌وکار
      • دیجیتال مارکتینگ
      • مدیریت و رهبری
      • بازاریابی و تبلیغات
      • توسعه فردی
    • نرم افزار
      • موبایل گرافی
      • آموزش فتوشاپ
      • آموزش ایلاستریتور
      • آموزش پریمیر
      • آموزش افترافکت
      • آموزش اودیشن
    • طراحی سایت
      • آموزش وردپرس
      • آموزش ووکامرس
      • آموزش سئو
      • امنیت وردپرس
      • افزونه وردپرس
      • فروش
  • عضویت ویژهجدید
    • خرید و تمدید اشتراکداغ
    • ابزار طراحی
      • براش فتوشاپ
      • متن سه بعدی
      • بک گراند
      • موکاپ
    • قالب آماده
      • قالب اینستاگرام
      • قالب ایندیزاین
      • قالب پاورپوینت
    • پروژه آماده پریمیر
      • ترنزیشن
    • بانک فوتیج
      • استوک فوتیج
      • فوتیج نور
    • موسیقی
      • آهنگ بی کلام
  • بیشتر
    • خدمات
      • دانلود از سایت های فروش فایل
      • طراحی
        • طراحی سایت و فروشگاه اینترنتی
        • طراحی پست ، استوری و بنر – به زودی
        • ادمین اینستاگرام – به زودی
      • تدوین ویدیو – به زودی
      • موشن – به زودی
      • ساخت پادکست – به زودی
    • درباره ما
      • ارتباط با ما
      • قوانین سایت
      • اساتید و کارکنان
      • پیشنهادها و انتقادها
  • راهنما
ورود | ثبت‌نام

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

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

آموزش سینتکس 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 data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIgdmlld0JveD0iMCAwIDUwIDUwIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzdHlsZT0iZmlsbDojZjJmMmYyO2ZpbGwtb3BhY2l0eTogMC4xOyIvPjwvc3ZnPg==" width="50" height="50" decoding="async" data-src="https://placehold.it/50x50" alt="" title="آموزش سینتکس HTML 2"> 
<input type="text"> 

				
			

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

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

www.w3schools.com

چقدر این پست برای شما مفید بود؟

میانگین امتیاز / 5. تعداد آرا:

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

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

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

پست های جدید
  • سئوی بازاریابی محتوا با انتخاب کلیدواژه مناسب
  • هر آنچه که باید درباره پرفورمنس مارکتینگ بدانید !
  • 12 روش بازاریابی محتوا برای کسب و کار
  • 7 ترفند افزایش بازدید استوری اینستاگرام
دوست داری چی یاد بگیری؟
QR کد زیر را اسکن کنید
گزارش خرابی لینک

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

دسترسی سریع
  • سفارش طراحی سایت وردپرس
  • اشتراک عضویت ویژه
  • دوره و محصولات
  • قوانین سایت
  • ارتباط با ما
  • پخش زنده
  • بلاگ
نمادها
شبکه های اجتماعی
Youtube M-icon-aparat Telegram Instagram Linkedin

به مشکلی برخورد کردید؟

مطالعه راهنما سایت

منتورینگ اختصاصی

پروژه محور

انتقال تجربه

از حرفه ای ها بیاموزید

گواهی پایان دوره

به تائید آموزش‌ایساتیس

افزایش درامد

همراه با منتورینگ

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

ساخته شده با 💜 در ایران

اشتراک گذاری در شبکه های اجتماعی
ارسال به ایمیل
https://amoozeshisatis.com/?p=18212
ورود ×
استفاده از Google
استفاده از Microsoft
استفاده از GitHub
استفاده از LinkedIn
یا از شبکه های اجتماعی استفاده کنید
رمز عبور خود را فراموش کرده اید؟
ورود با کد تایید
ارسال مجدد کد تایید(00:90)
حساب کاربری ندارید؟
عضویت
ارسال مجدد کد تایید(00:90)
بازگشت به صفحه ورود

ارسال مجدد کد تایید (00:90)
بازگشت به صفحه ورود
  • فروشگاه

  • سبدخرید

  • آموزش

  • ایساتیس TV

  • مرورگر شما از HTML5 پشتیبانی نمی کند.