فرادرس۱۱ تگ مهم HTML که هر مدیر سایتی باید آنها را بداند
شبکه‌ی جهانی اینترنت از زبان‌های مختلفی تشکیل شده است. ولی در این بین تنها یک زبان وجود دارد که از ابتدای اختراع صفحات وب بوده و در هر جایی می‌توانید آن را مشاهده کنید. این زبان، «زبان نشانه‌گذاری فوق متن» (Hypertext Markup Language) یا HTML است. همانطور که از اسم آن مشخص است، HTML یک زبان برنامه‌نویسی نیست، بلکه یک زبان نشانه‌گذاری است. این نشانه‌ها توسط مرورگر خوانده شده و بر اساس آنها محتوای وبسایت ساخته می‌شود. در ساده‌ترین حالت، HTML برای قالب‌بندی متون، جاسازی فایل‌های صوتی و تصویری و سازماندهی محتوای وبسایت استفاده می‌شود. به عبارتی دیگر، HTML صفحات وب را توضیح می‌دهد و بر اساس توضیحات آن، مرورگر یک تصویر از آن ایجاد می‌کند.
به لطف نرم‌افزارهای وبسایت ساز رایگانی که امروزه وجود دارند، دیگر کسی نیاز به کد زدن HTML ندارد. با این حال گاهی پیش می‌آید که تگ‌های HTML می‌توانند بسیار کاربردی باشند، برای مثال در مواقعی که می‌خواهید تغییرات سریع در وبسایت ایجاد کنید یا قالب متون یک پست را تغییر دهید، HTML به کارتان خواهد آمد. در این مطلب می‌خواهیم تعدادی تگ کاربردی و ساده‌ی HTML را که برای مصارف روزانه کاربرد دارند به شما معرفی کنیم.
قبل از معرفی تگ‌ها، شما را با چند قانون پایه آشنا می‌کنیم که به درک ساده‌تر این تگ‌ها کمک کنند:
- HTML از تگ‌های نشانه‌گذاری استفاده می‌کند که در بین علامت‌های کوچکتر و بزرگتر قرار دارند، نظیر <html>.
- تگ‌هایی که همانند تگ بالا است را تگ آغازین می‌نامند. هر تگ آغازین یک تگ پایانی هم خواهد داشت، نظیر <html/>.
- برخی از تگ‌ها محتوای خاصی را تعریف نمی‌کنند، با این حال برای حفظ نظم و استاندارد HTML، باید در جایی بسته شوند. در نتیجه این تگ‌ها باید تگ آغازین و پایانی را در یکجا داشته باشند که برای مثال به شکل </ br> نوشته می‌شوند.
قالب‌بندی متن
تگ‌های HTML معمولا خیلی ساده و مشخص هستند. تگ‌هایی که برای ایجاد جلوه‌های «italic»، «bold» یا «Underlined» استفاده می‌شوند، از نام هر جلوه گرفته شده‌اند.
ورودی:
1<b>bold</b>خروجی: bold
ورودی:
1<i>italic</i>خروجی: italic
ورودی:
1<u>underlined</u>خروجی: underlined
ورودی:
1<s>strike through text</s>خروجی: strike through text
ساخت فوق متن یا Hypertext
نوشتن آدرس خام یک سایت خیلی جلوه‌ی زیبایی ندارد. ترکیب لینک با متن و ایجاد یک فوق متن می‌تواند ظاهر زیباتری را در وبسایت ما رقم بزند و همچنین در صورت طولانی بودن لینک، در فضای سایت ما صرفه جویی کند.
ورودی:
1<a href=”//www.faradars.org” title=”فرادرس”>فرادرس</a>خروجی: فرادرس
همانطور که مشاهده می‌کنید، این تگ کمی پیچیده‌تر از تگ‌های قبلی است، از همین رو به جزئیات آن نگاهی می‌اندازیم. در واقع تگ اصلی در این دستور <a> است و سایر موارد نوشته شده در آن تنها خصوصیاتی هستند که جزئیات آن را مشخص می‌کنند. خصوصیت «=href» برای مشخص کردن لینک و خصوصیت «=title» برای مشخص کردن توضیحاتی به کار می‌رود که به هنگام قرار دادن ماوس بر روی متن نمایش داده می‌شود. حتما توجه داشته باشید که مقادیر نوشته شده برای لینک و title را در علامت کوتِیشِن (" ") قرار دهید تا به مشکلی بر نخورید.
جاسازی تصاویر
یک تصویر می‌تواند هزاران حرف برای گفتن داشته باشد، از همین رو باید بیشتر از آنها در وبسایت‌های خود استفاده کنیم. اینک با نحوه‌ی اضافه کردن تصاویر به صورت دستی در HTML آشنا خواهیم شد:
ورودی:
1<img src="https://blog.faradars.org/wp-content/uploads/2018/06/Faradars.png" alt"فرادرس" />خروجی:
در این مثال، تگ اصلی <img> است و دو خصوصیتی که نیاز داریم، «=src» و «=alt» هستند. اولین خصوصیت آدرس تصویر را مشخص می‌کند و دومین خصیصه متن جایگزینی است که در صورت عدم نمایش صحیح عکس، نمایش داده می‌شود. مجددا توجه داشته باشید که باید از علامت کوتیشن اسفتاده کنید.
همچنین تگ <img> یک مثال از تگی است که نیازی به بسته شدن نداشته و به صورت تک تگ تعریف می‌شود، در نتیجه در انتهای آن از علامت «/» استفاده کرده‌ایم.
شکستگی خط و پاراگراف‌ها
برای ایجاد یک متن ساختار یافته باید از شکستگی‌ها و پاراگراف‌ها استفاده کنید. منظور از «شکستگی» رفتن به سر خط بعدی است. برای این کار از تگ‌های زیر استفاده می‌کنیم:
ورودی:
1<br />خروجی: این تگ شما را به خط بعدی خواهد برد. توجه داشته باشید که این تگ نیز تگ پایانی ندارد.
ورودی:
1<p>متن مورد نظر خود را وارد کنید</p>خروجی: بر خلاف تگ قبلی، این تگ شروع و پایان دارد. متنی که در بین این دو تگ قرار گرفته باشد در یک پاراگراف نوشته خواهد شد، یعنی بعد و قبل از آن یک خط خالی ایجاد می‌شود.
لیست‌ها
به طور کلی دو نوع لیست وجود دارد؛ لیست‌های ترتیبی و لیست‌های بدون ترتیب که به ترتیب توسط اعداد و توسط دایره‌های تو پر نمایش داده می‌شوند. برای ساخت هر کدام از این لیست‌ها، باید به تگ آنها آشنایی داشته باشید.
به طور کلی سه تگ برای این کار وجود دارد که در ادامه مشاهده می‌کنید:
ورودی:
1<ol>
2<li>مورد اول</li>
3<li>مورد دوم</li>
4</ol>خروجی:
- مورد اول
- مورد دوم
ورودی:
1<ul>
2<li>مورد اول</li>
3<li>مورد دوم</li>
4</ul>- مورد اول
- مورد دوم
برای ساخت یک لیست مرتب از تگ <ol>، و برای لیست غیر ترتیبی از تگ <ul> استفاده می‌کنیم. در هر دو مورد، برای تعریف یک آیتم جدید در لیست از تگ <li> استفاده می‌شود.
حالا که با منطق کاری HTML آشنا شده‌اید و دیدید که چقدر ساده است، شاید بد نباشد قدم‌های بیشتری برداشته و به این زبان و طراحی وب تسلط بیشتری پیدا کنید. برای شروع می‌توانید از آموزش‌های زیر استفاده نمایید:
- آموزش طراحی وب با HTML – مقدماتی
- آموزش طراحی سایت ویژه کودکان و نوجوانان (HTML و CSS)
- طراحی و برنامه نویسی وب
- آموزش طراحی سایت وردپرسی بدون کدنویسی
- چگونه برنامه‌نویسی وب را شروع کنم؟
^^
