آموزش سینتکس HTML
آموزش سینتکس HTML + همراه با ویرایشگر کد زنده
مانند تمام زبان ها، 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">
چون این عناصر تگ پایانی ندارند محتوایی درون آنها قرار نمی گیرد. البته این عناصر معمولا ویژگی هایی دارند که باید برای آنها تعیین شود.
دیدگاهتان را بنویسید