آموزش HTML - جلسه ششم

سلام دوستان؛‌ بسیار خوشحالم که آموزش‌های HTML به خوبی در حال پیشرفت است. امروز با جلسه ششم از آموزش با شما همراه هستم! در جلسه قبل به بررسی صفات عناصر HTML پرداختیم. در انتهای آموزش هم به پیوست، لیست صفت‌های عمومی که قابل استفاده در تمامی عناصر بودند و نیز صفت‌های هر عنصر را به تفکیک جهت دانلود قرار دادیم. در این جلسه به بررسی تگ‌هایی که در نحوه ارائه متون مورد استفاده قرار می‌گیرد خواهیم پرداخت. با ما همراه باشید.

درج توضیحات کار را برایتان آسان می‌کند!

قبل از آموزش تگ‌های مربوط به ویرایش متن، لازم دیدم تا از امکانی که باعث قابل فهم‌تر کردن اسناد HTML می‌شود و به آن نظم قابل توجهی می‌بخشد صحبت کنم. در زبان HTML امکانی تحت عنوان توضیحات بیشتر (این عنوان را من روی آن می‌گذارم!) برای قسمت‌های مختلف سند HTML وجود دارد. به وسیله‌ی این امکان می‌توان برای قسمت‌های گوناگون سند HTML توضیحاتی درج کرد؛ این امکان زمانی ارزشمند می‌شود که یک سند HTML با تعداد زیادی خط کدنویسی شده داشته باشیم. تحت چنین شرایطی تشخیص قسمت‌های مختلف سند ما خصوصا زمانی که پس از یک وقفه چندروزه به آن مراجعه می‌کنیم مشکل می‌شود. اینجاست که می‌توان از این مشکل پیشگیری و با درج چند خط توضیحات ساده برای هر قسمت کار را برای دفعات بعد ساده و ساده‌تر کرد. لازم به ذکر است که این توضیحات برای کاربران، هنگام نمایش سند شما در مرورگر‌های اینترنتی، رؤیت نمی‌شود و فقط در کد‌های نوشته شده توسط شما نمایش داده می‌شود. برای تعریف یک توضیح در سند HTML به روش زیر عمل کنید:

<!---توضیحات شما در این قسمت--->

شما باید در قسمت ذکر شده توضیحات خود را درج کنید؛ لازم به ذکر است که تگ توضیحات، تگ بسته ندارد.

درج خط افقی به وسیله تگ <hr>:

برای درج یک خط افقی در اسناد HTML خود می‌توانید از تگ <hr> استفاده کنید. این تگ یک تکه بوده و تگ بسته ندارد. یکی از استفاده‌های متداول از این تگ برای تقسیم‌بندی قسمت‌های مختلف یک سند HTML است.

تگ‌های قالب‌بندی متن:

در زبان HTML تگ‌هایی جهت قالب‌بندی متن پیش‌بینی شده است. از این تگ‌های بسیار کاربردی می‌توان در موارد گوناگون بهره جست. تقریبا تمامی کاربران ویندوزی رایانه از واژه‌پرداز Word شرکت مایکروسافت استفاده می‌کنند. در اینصورت با قالب‌بندی های متن آشنایی قبلی دارند. مثلا حالت bold در زبان HTML توسط تگ <b> تعریف می‌شود. همچنین است حالت italic که به‌وسیله تگ <i> تعریف می‌شود. در تصویر زیر لیستی از تگ‌های قابل استفاده جهت قالب‌بندی متن در زبان HTML آورده شده است:

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

نکته مهم: دو تگ <strong> و <em> اغلب از نظر مرورگر‌های اینترنتی به ترتیب نظیر تگ‌های <b> و  <i> قالب‌بندی می‌شوند ولی تفاوتشان با دو تگ <b> و <i> در این است که علاوه بر قالب‌بندی، بر محتوای مطلبشان نیز برجستگی و تأکید ایجاد می‌کنند.

نمایش صحیح محتوای ارسالی؛ مسئله این است!

شما در هرحال نمی‌توانید کاملا مطمئن باشید که آنچه توسط مرورگرهای اینترنتی نمایش داده می‌شوند، دقیقا همان چیزی است که شما می‌خواهید. چرا که صفحه‌های گوناگون با رزولوشن‌های گوناگون نتایج متفاوتی را به همراه خواهد داشت. بنابراین توصیه اکید ما این است که سعی نکنید با استفاده از Spaceهای مکرر و یا اقداماتی نظیر آن اقدام به ترازبندی و تنظیم صفحه خود کنید. چرا که این کار معمولا به جای یک نیجه رضایت بخش فاجعه به بار می آورد! البته HTML تدابیری در زمینه ترازبندی دقیق هر قسمت از محتوای یک سند HTML اندیشیده است که نگرانی‌ها را برطرف می‌کند. ما الان زمان گفتن آن نیست و در جلسات بعدی به آن خواهیم پرداخت.

تگ <pre> جهت تعریف متون تنظیم نشــده:

تگ <pre> یکی از تگ‌های کمتر شناخته شده‌ی زبان HTML است. این شناخت کم حاکی از آن است که کاربرد این تگ با پیشرفت HTML به ندرت کمتر و کمتر شده است. اگر متنی درون تگ <pre> تعریف شود، هیچ‌گونه تغییری در آن ایجاد نمی‌شود و به همان صورت به نمایش در می‌آید. در حالت عادی اگر شما چندین Space یا Line break پشت سرهم وارد کنید، مرورگر تنها یکی از آن‌ها را به حساب می‌آورد و مابقی را رد می‌کند. اما اگر متن شما درون تگ <pre> تعریف شده باشد، تمامی Spaceها، Line breakها و ... عینا به نمایش در می‌آید. از تگ <pre> به روش زیر استفاده کنید:

<pre>Your preformatted Text Here</pre>

تگ‌های نقل قول:

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

هریک از تگ‌های بالا را در اسناد HTML خود استفاده و نتیجه را مشاهده نمائید. این کار درک شما را از این تگ‌ها و کاربردشان بالا می‌برد و انگیزه‌ای عالی، جهت ادامه کار به شما اعطا می‌کند.

اگر این مطلب را می‌پسندید آن‌را در گوگل محبوب کنید: