مانند تمام زبان ها، 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 توسط مرورگر نمایش داده نمی شود. آنها فقط توسط مرورگر خوانده می شوند تا مشخص شود چه نوع محتوایی نوشته ایم.
برای آشنایی با ساخت فایل HTML به این مطلب مراجعه کنید.
Attribute ها
Attribute یا ویژگی ها اطلاعات اضافه ای هستند که به عناصر HTML اضافه می شوند. ویژگی ها را به تگ ها می توانیم اضافه کنیم و آنها نیز توسط مرورگر نمایش داده نمی شوند. در دنیای HTML چندین ویژگی وجود دارند که به مرور با آنها آشنا می شویم.
به عنوان مثال یکی از این ویژگی ها title
نام دارد که به وسیله آن می توان به یک عنصر HTML اطلاعاتی اضافه کرد که در زمانی که کاربر موس را بر روی آن عنصر نگه می دارد آن اطلاعات به کاربر نشان داده شوند. البته کاربرد این ویژگی فقط مخصوص کاربران نیست بلکه ربات ها نیز از اینگونه ویژگی ها استفاده می کنند.
<p title="اطلاعات مورد نظر اینجا میاد"></p>
موس را بر روی پاراگراف زیر قرار دهید:
See the Pen Title attribute by Mojtaba Seyedi (@seyedi) 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 src="http://placehold.it/50x50" alt=""> <!-- عنصر تصویر -->
<input type="text"> <!-- عنصری برای وارد کردن متن -->
چون این عناصر تگ پایانی ندارند محتوایی درون آنها قرار نمی گیرد. البته این عناصر معمولا ویژگی هایی دارند که باید برای آنها تعیین شود.
این عناصر از بیماری خود بسته بینی رنج برده و در خودشان بسته می شوند پس راحتشان گذاشته و آنها را با یک تگ پایانی، بیشتر آزار ندهیم :)
کاربرد هر یک از مثال های بالا در جلوی آنها بصورت توضیح یا همان Comment نوشته شده است. به مرور با تعداد بیشتری از این عناصر آشنا خواهیم شد.
خسته نباشید مفید بود
خوبه برای شروع ..
سلام مطالبتون خیلی مفیده خسته نباشید
فقط دوتا سوال دارم کار الت توی قسمت عکس چیه؟؟ هرتغییری توش بوجود میارم اتفاق خاصی نمیوفته
و همین طور کار تکست توی قسمت اینپوت وقتی بجای تکست میزنم ایمج بازم همون پنل وارد کردن متن میاد
سلام دوست عزیز
کاربرد alt وقتی مشخص میشه که موس رو روی تصویر نگهداری به بیان ساده تر هر چیزی که در اتریبیوت آلت بنویسید وقتی موس رو روی عکس نگهداریم اون متن روی عکس ظاهر میشه .
تکست هم که در اتریبیوت type قرارگرفته نوع متنی است که نوشتیم
امیدوارم توضیحاتم خوب بوده باشن . با آرزوی موفقیت برای شما
سلام
اونکه با رفتن موس بر روی عنصر متنی نمایش داده میشه، قاعدتا باید از اتریبیوت title باشه، کار alt اون نیست، بعضی مرورگرهای قدیمی این اشتباه رو انجام میدادند.
و اما alt دو کاربرد داره:
– افراد نابینا که ماشین براشون سایت رو میخونه، وقتی به تصویر میرسه متن اون تصویر خونده میشه، که اونها هم متوجه شن تصویر در مورد چه موضوعی هستش
– کاربرد دوم موتورهای جستجو هستند که از روی alt تشخیص میدن تصویر چیه، که اون رو در نتیجه جستجو افراد نمایش بدند.
سلام.طوری میشه آدرس تصویر دلخواه رو قرار بدیم در تگimg?
سلام، آدرس رو در قسمت src قرار بدید.